productivity FieldtypeEditorJs : Preview of a productivity fiedltype for editors.

[flydev]

Hello,

I would like to present you a new module which aim to facilitate the productivity of your editors/publishers when working on ProcessWire.

The idea begun when my co-worker told me that when typing in ProcessWire CkEditor field he was feeling "loosing motivation" when writing big wall of text and/or inspiration. So he opened his web-browser and show me a site looking to Wordpress - feel free to put your preferred emoji here - then he opened Gutenberg... typed some text and moving some "blocks".

I understood immediately why he got this feeling with CkEditor. If you or your client feel like this guy, then you will love this module !

 

What is currently supported ?

Features

• Auto-save
• Medias upload support
• HannaCode support

Blocks Implemented

• Heading
• Image
• Paragraph
• Embed
• Quote
• Code
• Link
• Table (beta)
• Block Delimiter
• Raw HTML
• Note (custom block markup)

Feature Request

• Frontend Edition 

 

And there you go for the preview - sorry I am to lazy and bad at typing text so I had a copy/pasta moment :

 

 

Module featured in the ProcessWire Weekly #317 - Thanks @teppo

Edited June 15, 2020 by flydev ??
features / pw weekly link

[rick]

Got a link?

 

[flydev]

Sorry @rick not yet, there is a chance that the module will be released as ProModule with refund policy to be able to try the module.

[teppo]

Intrigued!

As it happens, I have InputfieldEditorJS + FieldtypeEditorJS proof-of-concept sitting on one of my own sites as well. Mostly functional, though your module looks way more polished. I never got to implement media uploads, for one. It was intended as a test to see if our team would prefer that over Repeater Matrix, and since it wasn't a massive success, I never fully completed it.

Very much looking forward to seeing your module in action ?

[MoritzLost]

Interesting, I was thinking that ProcessWire could do with a couple of alternatives to the dated CK Editor. EditorJS is one of those 'modern' editors (I was also looking at Quill), I definitely like the block-based output in JSON format.

In the end I think it would be nice to be able to change the editor implementation library for textarea fields on the fly – like having a textarea field where you can select between CK Editor, EditorJS, TinyMCE etc. and being able to easily add other editors through a hook or something.

Edit: Obviously this should be changed in the field settings per site, not configurable by editors themselves!

[flydev]

1 minute ago, MoritzLost said:

like having a textarea field where you can select between CK Editor, EditorJS, TinyMCE etc. and being able to easily add other editors through a hook or something.

If I got what you mean (compatible Fieldtype ?) it's already the case, you can drop a textarea then choose EditorJS, CkEditor or the vanilla textarea as field.

 

2 minutes ago, MoritzLost said:

I definitely like the block-based output in JSON format.

Sure !  On my side, it's the possibility to fetch those JSON data directly into the third party apps (mobile, desktop, etc).

 

26 minutes ago, teppo said:

It was intended as a test to see if our team would prefer that over Repeater Matrix, and since it wasn't a massive success, I never fully completed it.

Glad to hear that someone tried to implement this editor solution. Could you elaborate on why it wasn't a great success ? As a non-editor who I am, I really like what I feel writing thing on this fieldtype. 

About RepeaterMatrix, I think (and we already saw some posts here in the forum) that it could be used to make a page builder, but thats not intended by this module.

[Sergio]

This is amazing, @flydev ??!! Looks very useful!

[teppo]

5 hours ago, flydev ?? said:

Could you elaborate on why it wasn't a great success ? As a non-editor who I am, I really like what I feel writing thing on this fieldtype. 

About RepeaterMatrix, I think (and we already saw some posts here in the forum) that it could be used to make a page builder, but thats not intended by this module.

To be clear I wouldn't say that it was a failure by any means — more like we didn't see major benefits going with Editor.js vs. Repeater Matrix + CKEditor. "Results were inconclusive" ?

Like you said, Editor.js probably isn't going to replace Repeater Matrix if what you really need is a block builder; at least it doesn't seem like a good idea at the moment. While it could definitely help with some tasks that CKeditor currently isn't very good at — such as embedding images — at the same time the "every element is a block" approach can also feel a little intimidating and perhaps even unintuitive for those more familiar with "traditional" content editors (CKeditor, Word, etc.)

Should probably also mention that I did my proof of concept back in March, when the Editor.js project seemed a little... unresponsive. There were big missing parts (including i18n support) and issues that were not getting much attention. Now that I've checked, it appears that the project is going strong again.

Hope this makes sense. All in all I'm very curious to see where you're going with this module! ?

[Pixrael]

This could be a block builder option?

https://grapesjs.com/
https://github.com/artf/grapesjs

Newsletter demo: https://grapesjs.com/demo-newsletter-editor.html
Webpage demo: https://grapesjs.com/demo.html

Usage:

<link rel="stylesheet" href="path/to/grapes.min.css">
<script src="path/to/grapes.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      components: '<div class="txt-red">Hello world!</div>',
      style: '.txt-red{color: red}',
  });
</script>

That's it..

 I try it before, but I don't know how to build a module ?

[flydev]

Thanks @teppo for your insight, as always highly appreciated. I got what you mean. 

I think that there is a part of question of taste but also depending on the task on which the user is involved/focused. In first instance, while discussing with the colleague, I started to insist that he could use the CKEditor to write his articles; The point is here, he is specialised in content creation. I also suggested MS Word as tool - but no, the UI is not soft as Gutenberg. Then I abdicated and told him to write his articles on Gutenberg and a local install of Wordpress, after all, I will not touch at it, and I can import the content of a Wordpress page to ProcessWire.

I don't know if you guys are used to write content, but this guy showed me also the editor that was crafted for the big site Medium. It's something similar, polished, the editor contain an inline toolbar and some blocks. I understood then that it's like an "new" category of users, they are used to write content in a modern environment. I was not even aware of those type of editor / blocks approach ? . So yes, I can understand that it can be "intimidating". 

2 hours ago, teppo said:

Hope this makes sense. All in all I'm very curious to see where you're going with this module! 

Yes! First mission that was to bring back this guy to use ProcessWire is almost done ??

 

@Pixrael Yes it could. The module you would like to see was already mentioned and I remember that Theo, Elabx and Joshua worked on something. It was not grapejs but the idea remain the same. If you really want to give a try and invest some time the community will help you ! @bernhard wrote nice tutorials on modules creation you could begin with, then start a new thread here in the modules/dev forum. There are some hard works in perspective and I think that a module like that should be taken by a group with dev and designers ?

 

[flydev]

Forgot to put a note on what is currently supported :

Features

• Auto-save
• Medias upload support
• HannaCode support

Blocks Implemented

• Heading
• Image
• Paragraph
• Embed
• Quote
• Code
• Link
• Table (beta)
• Block Delimiter
• Raw HTML
• Note (custom block markup)

 

[dotnetic]

Shut up and take my money.

I also thought a long time about making a fieldtype with editor.js, because it is just awesome to store contents as structured data.

Prosemirror is an alternative, which works similar and is used in Statamic for its Bard field (which is also awesome).

Is there any release date yet?

[gornycreative]

This looks great - I don't personally care for these types of editors because I'm an older user, but many clients have asked for this type of builder. I'd probably get used to it and enjoy it once I got into the habit.

[flydev]

On 6/8/2020 at 9:23 AM, dotnetic said:

Is there any release date yet?

Not yet, when the website used to promote the module will be ready, the release date will posted here. 

 

On 6/9/2020 at 1:23 PM, gornycreative said:

This looks great - I don't personally care for these types of editors because I'm an older user, but many clients have asked for this type of builder.

Same here, and what I can say/confirm, is that once you get your hand into the editor, you will want to use it ?

Thanks you for your interest.

 

PS: If you think onto something that should be indispensable and that need to be implemented, please do not hesitate to ask/discuss the feature here.

[dotnetic]

9 hours ago, flydev ?? said:

On 6/9/2020 at 1:23 PM, gornycreative said:

This looks great - I don't personally care for these types of editors because I'm an older user, but many clients have asked for this type of builder.

 

The big catch is, that no HTML is generated but structured data and you only have to define your elements once and can reuse them as often as you like in one field, without modifying the template or adding new fields to ProcessWire. You can move things around and render the different elements like an image for example, however you want it. Output it as a picture element, put some divs around it, etc. Or render a heading of level two as a heading level 3 instead. This is not possible if you only have HTML.

[gornycreative]

That makes a lot more sense in terms of advantages - I will need to look into this some more! Thanks.

[JayGee]

This looks cool. One bit of feedback (and this may just be my opinion rather than a general consensus) but I really dislike how the WP Gutenberg treats every paragraph as a block. To me it makes no sense to be able to rearrange text at the paragraph level. To me a single block of text with multiple paragraphs within it seems more sensible.

Although looking at the example JSON doc on the Editor JS homepage it looks like it treats every para as an element and for ease of maintenance I guess you won't won't want to stray too far the default behaviour.

[flydev]

I think I get what you mean @Guy Incognito

Actually, you can move every single paragraph independently - BUT, you can also copy/cut all the selected paragraphs and move them as it was a "one-block".

 

Edited June 15, 2020 by flydev ??
screencast

[JayGee]

3 minutes ago, flydev ?? said:

I think I get what you mean @Guy Incognito

Actually, you can move every single paragraph independently - BUT, you can also copy/cut all the selected paragraphs and move them as it was a "one-block".

 

 

Ok this is awesome then - best of both worlds!

One other feature request that will make this a killer module IMO... that it should work with Front End editing.

 

[flydev]

Just now, Guy Incognito said:

that it should work with Front End editing.

Indeed, it will work on front-end editing for defined roles ??

[horst]

19 minutes ago, flydev ?? said:

Indeed, it will work on front-end editing for defined roles

OH, hurry up, I need this as soon as possible! ?

[szabesz]

11 hours ago, horst said:

OH, hurry up, I need this as soon as possible!

+1 ?

[encho]

Another +1, this would be my default editor as there are so many issues with CKE. I was even contemplating moving to builtin markdown editor, but would be difficult to convince the clients. This would be great for new websites, but what about the existing sites poluted with CKE's html tags? I guess it would be tricky just to update the existing text/body field to a new type due to html vs json?

[JayGee]

50 minutes ago, encho said:

Another +1, this would be my default editor as there are so many issues with CKE. I was even contemplating moving to builtin markdown editor, but would be difficult to convince the clients. This would be great for new websites, but what about the existing sites poluted with CKE's html tags? I guess it would be tricky just to update the existing text/body field to a new type due to html vs json?

I think you can still store HTML in Editor.js. So I wonder if it might be feasible to add a new editor field alongside CKeditor ones then use a hook to copy the content over on page save... or something like that anyway!... I'll be looking to address the same issue if this module works out.

[encho]

On 6/17/2020 at 8:29 PM, Guy Incognito said:

I think you can still store HTML in Editor.js. So I wonder if it might be feasible to add a new editor field alongside CKeditor ones then use a hook to copy the content over on page save... or something like that anyway!... I'll be looking to address the same issue if this module works out.

I am aware of the fact that Editor.js can do html, it would be easy that way to just do in-place swapping the text field with the new one.

But it would also be nice to move old texts to json. I see it discussed in Editor.js Github so there must be a way. One workaround I can do is to dump my database and then run some custom regex search/replace to remove <p> and other tags and replace with json key/values. Problem is there are so many variants, spans, divs, and stuff pasted from word that it is very difficult to anticipate all the options. Did this in past when I was trying to replace <p><strong>***</strong></p> with <h2> enclosure. Web editors/moderators never learn and this Editor.js approach seems to be closest to neatness perfection and keeping everyone happy along the way.