QEditor guidance requested
-
Hello community. New to Quasar and exploring whether the framework in general and the QEditor component specifically can help me. I’m looking for a Vue-based WYSIWYG editor that I can extend with features such as:
- mentions/tags that can be sourced asynchronously - displayed to user while typing via drop-down auto-complete
- key bindings to do things like create markdown-like functionality such as bolding a word by surrounding it with ** and starting a blockquote with >
- create custom actions such as inserting a table of contents (by scanning all H tags, assigning them unique ids, and then having each ToC link scroll the DOM to that element - as one such implementation)
I started looking at TinyMCE but found it too unwieldy in its dom handling. Most recently I’ve been looking at Quill, but it is somewhat opinionated when it comes to handling certain html (e.g. you can’t use the <details> <summary> html tag). TipTap (on ProseMirror) looks promising but not well supported nor much of a community.
Appreciate any guidance anyone can offer as to the extensibility of QEditor. Also, any comments you can offer on its use of execCommand. I thought that method was being deprecated and that developers were being discouraged from using it. I’d love to hear other’s thoughts on that.
Thank you!!
-
@apg you’re probably looking for this:
-
Thank you @qyloxe for the link - that project looks really impressive! Unfortunately it doesn’t seem to have much in the way of documentation or user community (for a novice like me). So building something like what TipTap refers to as a “suggestions” component seems very daunting. And even basic ProseMirror capabilities like InputRules macros - not really sure how to implement those within such a framework. It also feels like many layers of abstraction: TipTap is built on ProseMirror. Quasar-Tiptap built on TipTap. And the whole thing is built on top of the Quasar framework. All to get a WYSIWYG editor I can use for creating mentions, key bindings, and table of contents capabilities. Thinking there must be an easier way.
-
@apg said in QEditor guidance requested:
It also feels like many layers of abstraction: TipTap is built on ProseMirror. Quasar-Tiptap built on TipTap. And the whole thing is built on top of the Quasar framework. All to get a WYSIWYG editor I can use for creating mentions, key bindings, and table of contents capabilities.
ha ha you summarized that perfectly!
Thinking there must be an easier way.
Unfortunately, at the end of the day, IMHO “this is the (easier) way”
From all the editors I found there were always a problem between data structure and presentation and operations. For example, most WYSIWYG editors gives you no data structure (just edit some HTML blob) nice presentation and operations dependend on available plugins or extensibility of editor component. There are WYSIWYG editors in the class where you have more advanced data structure - for example markdown, but again, there is complicated presentation (becuase you have to show the editor and the preview of the output) and there is much simple operations, because you need to keep the convention (for example markdown rules). And there is, as you said: prosemirror/tiptap/quasar-tiptap/quasar monstrosity! haha It has the most flexible data structure you can wish for, the presentation is separated from data and operations are always in a clear way of plugins/extensions. So yes, it is the most complicated but in the long term it is the most easy to maintain and extend. In my practice the solutions with the most flexible data structures typically win, for example. -
Really appreciate the detailed thoughts @qyloxe! Your philosophy makes total sense. Wonder if I’m better off starting with just TipTap in Vue before adding in the extra “stack layers” so-to-speak. Not sure I’m seeing (just yet) the value add that quasar-tiptap provides, other than the Quasar framework, which is quite impressive in its own right. Starting with TipTap / Vue might be a good onboarding flow for me - just have to dig into the code and learn it on the fly. The only other thought I had at this point was to roll my own contenteditable WYSIWYG implementation, particularly since I’m not concerned about cross-browser / cross-platform usage - this app is just for my personal usage. Don’t think I have any use-case needs that can’t be done with basic dom manipulation (other than the mentions/auto-complete functionality). Any additional thoughts you have are very much appreciated!!
-
@apg said in QEditor guidance requested:
The only other thought I had at this point was to roll my own contenteditable WYSIWYG implementation, particularly since I’m not concerned about cross-browser / cross-platform usage - this app is just for my personal usage.
If you just have time and resources for that then it is the most LEARNING experience to build you own! From what you say, I like that you seek a learning process. In learning building and breaking and debugging and constant questioning is essential. If you can afford it then go for it and learn how content editable in browsers work, what is the proper data structure for keeping the strings of edited text (extremely interesting - please research), how to manage cursors and selections, what are differences in UI and expected UX in desktop/mobile, this is the most beneficial for you as a person.
And after that, with all that knowledge, just use something already prepared and maintained and production ready.
-
Awesome feedback - ty!
-
@apg
I have done this a few times make sure you have plenty time on your hand and forget weekends : ))If you are looking to build an editor which is not based on a model just uses a string as the model Quasar Editor is like that. There are all sort of difficulty with this though you will see … a good read here
https://ckeditor.com/blog/ContentEditable-The-Good-the-Bad-and-the-Ugly/Yes you could roll your own just like they did. It is under 500 lines of code
https://github.com/quasarframework/quasar/blob/dev/ui/src/components/editor/QEditor.jsTipTap is built on ProseMirror as you have mentioned. Now this is a model based approach. So is Quill but an older more cumbersome thing IMO. TinyMCE 5 is also similar approach.
TinyMCE 5 does not support custom html !
https://github.com/ckeditor/ckeditor5/issues/5566In these sorts of editors the content is not just a string. You will not be able to manipulate the dom. Everything must fit a predefined schema.
If you are thinking TipTap or Quasar TipTap you would be essentially learning ProseMirror. Without a strong ProseMirror knowledge you will not be able to do much.
TipTap is full of good examples of how to use ProseMirror but it is not a complete job IMO. Back in February ProseMirror was supported and the author replies to almost everyone (if not everyone) on the forum. He does not go into great deal of detail mind : ))
So often you will be left to your own and you will have to wrap your head around the whole concept which is not easy to understand. It wasn’t for me anyway … Good luck with it.
