WYSIWYG and Markdown

This is a project to attain the following objectives. This is a massive project that will have to be done in phases.

1. A commonly used text syntax like Markdown supported natively in Tiki. Better than PluginMarkdown
   • The CommonMark spec is extensive: https://spec.commonmark.org/
   • We use Markdown for bold, bullets, etc. and we keep our current syntax for Tiki plugins {PLUGINNAME()} ... {PLUGINNAME}
   • We do what failed here: http://www.wikicreole.org/wiki/TikiWikiCMSGroupware WikiCreole was an attempt to get a common wiki syntax which is more or less what Markdown is.
   • To have a realistic transition, each text area will have a choice of various syntaxes, so each Tiki instance can move at their own pace. Each text area could have options such as
     • Tiki syntax
     • Markdown + Tiki plugins
     • HTML only
     • HTML + Tiki syntax + Tiki plugins
     • Whatever other mode existed in the past
   • Phased approach while we work on conversion tools
     • Optional, default off
     • Optional, default on
     • In 5-10 years, we can decide if we remove Tiki syntax or keep forever for read-only of legacy content
   • Conversion tools
     • Live (supervised by user) and via command line
     • Need a tool to compare HTML end result
2. A reliable WYSIWYG editor that handles markdown with Tiki plugin syntax and avoids https://wysiwygproblems.com/
   • Must have intuitive UI for adding images and files (previews). Ex.: copy-paste or crop or ...
   • https://medium.com/maatwebsite/lets-see-wyg-with-these-editors-e5720e91a626
   • https://github.com/JefMari/awesome-wysiwyg
   • Along with syntax highlighting for Markdown.
   • Need a way to import HTML (copy-paste), ideally, with some level of conversion to text syntax. Ex.: https://github.com/thephpleague/html-to-markdown
   • Need a way to deal with HTML that some Tiki instances may have used
     • PluginWYSIWYG and the WYSIWYG editor in wiki pages (one of the modes is to save as HTML)
   • A good time for item6191-Replace-Emoticons-with-Emoji
3. Wiki Parser Revamp, Plugin revamp and/or merge Tiki plugins and Tiki modules into Gadgets (or Widgets) that can live in a text area or elsewhere on a page, and move to Vue JS: https://gitlab.com/jonnybradley/tiki/-/tree/project-fluffy-2
   • Can be done in a second step but overall plan needs to make sure it will be a good solution
4. Realtime collaborative editing
   • Can be done in a second step but overall plan needs to make sure it will be a good solution
   • Could be done with TogetherJS or with another method
   • Matrix
     • https://matrix.org/blog/2021/12/22/the-mega-matrix-holiday-special-2021#applications-beyond-chat
     • https://github.com/YousefED/Matrix-CRDT
       • https://syncedstore.org/docs/vue
5. Page Builder and Form Builder
   • Can be done in a second step but overall plan needs to make sure it will be a good solution
6. Interop with external systems so we could store some wiki pages in Git, as requested: here
   • Can be done in a second step but overall plan needs to make sure it will be a good solution
7. Review diagrams from textual descriptions. Ex.: https://github.com/yuzutech/kroki
8. Review Typography features

Steps

1. Scope high level plan done
2. Compare implementation options as per How to pick a software library (ongoing)
3. Gather community agreement done (there is consensus this is desirable)
4. Gather more resources
   • As of 2022-03-31, we have sufficient resources for steps #1 and #2 above. We'll sollicit more sponsorship to be able to do more (#3, #4, etc.)
5. Assemble team (around Jonny and Victor) and do it! Team is reserved.

Questions

• How do we deal with just HTML content? (which CKEditor is good at)
  • Discussion from the SummerNote project explaining why it's difficult for an HTML WYSIWYG editor to support Markdown
• Do we keep current PHP lib? or go with another? https://packagist.org/?query=markdown (we need flexibility to add some syntax like wiki plugins and to interact with the WYSIWYG)
• How should we go about converting from Tiki syntax to CommonMark?
  • One option is https://pandoc.org/try/
  • We could envisage a tool to compare Tiki Syntax -> HTML vs Tiki Syntax -> Commmark -> HTML

Options

1.1. WYSIWYG editors

1.1.1. ProseMirror with Markdown

https://prosemirror.net/examples/markdown/
https://github.com/ProseMirror/prosemirror-markdown

1.1.2. TOAST UI Editor

• "The main characteristic of TOAST UI Editor is that it is a markdown based editor that support WYSIWYG editor simultaneously."
• Test here: https://nhn.github.io/tui.editor/latest/tutorial-example03-editor-with-wysiwyg-mode
• About major changes in latest version: https://github.com/nhn/tui.editor/releases/tag/v3.0.0
  • Important part: "In order to deal with this issue, we used the Prosemirror, a development tool used to build a WYSIWYG editor, for TOAST UI Editor 3.0, and we were able to unify the internal dependencies of the editors into one. The unified dependency allowed us to follow a single, internal structure, and we were able to remove the past dependencies including CodeMirror, squire, and to-mark."
• MIT License
• Based on ProseMirror
• Has an image editor
• Available here: https://asset-packagist.org/package/bower-asset/tui-editor
• This model is the most reliable way to have both a text syntax and WYSIWYG, but for legacy HTML content, we'd have to continue with CKEditor

1.1.3. MeditorJS

• Docs: https://gitlab.com/cobalt-os-team/MeditorJS
• Based on Editor.md
• MIT License
• Last commit: On Dec 11, 2021

1.1.4.  Stacks-Editor

• Github: https://github.com/StackExchange/Stacks-Editor
• Docs: https://stackedit.io/
• Based on ProseMirror
• MIT License
• Last commit: On May 17, 2022

1.1.5. Milkdown

• Overview: https://milkdown.dev/
• Github: https://github.com/Saul-Mirone/milkdown
• Based on ProseMirror
• MIT License
• Last commit: On May 19, 2022

1.1.6. TipTap

• Github: https://github.com/ueberdosis/tiptap
• Based on ProseMirror
• MIT License
• Last commit: On May 17, 2022

1.1.7. Wax

• Based on ProseMirror
• Does it handle Markdown?
• From Coko foundation: https://coko.foundation/articles/single-source-publishing.ht
• Interesting features: https://waxjs.net/features/
• GitLab: https://gitlab.coko.foundation/wax/wax
• MIT License
• Last commit: On Aug 8, 2020
• Archived project! Repository and other project resources are read-only

1.1.8.  Woofmark

• Github: https://github.com/bevacqua/woofmark
• Docs: https://bevacqua.github.io/woofmark/
• MIT license
• Last commit: On Feb12, 2019

1.1.9.  CodeMirror

• Github: https://github.com/codemirror/codemirror.next/
• Community: https://discuss.codemirror.net/
• Docs: https://codemirror.net/6/
• MIT license
• Last commit: On "Apr 20, 2022"

1.1.10. HyperMD

• Github: https://github.com/laobubu/HyperMD
• MIT license
• Last commit: On "Jan15, 2019"

1.1.11. Ckeditor-5

• Docs: https://ckeditor.com/ckeditor-5/
• Features: https://ckeditor.com/ckeditor-5/features/#collaboration
• Github: https://github.com/ckeditor/ckeditor5
• https://onlinemarkdowneditor.dev/
• GNU General Public License Version 2 or later
• Last commit: On "May 19, 2022"

1.1.12. Editor.js

• Overview: https://editorjs.io/
• Docs: https://editorjs.io/base-concepts
• Github: https://github.com/codex-team/editor.js
• Apache-2.0 license
• Last commit: On May 14, 2022

1.1.13. TinyMCE

• Docs: https://www.tiny.cloud/docs/quick-start/
• Github: https://github.com/tinymce/tinymce
• MIT license
• Last commit: On May 17, 2022
• (https://www.tiny.cloud/docs/plugins/opensource/textpattern/)

1.1.14. Bubble

• Features: https://bubble.io/features

1.1.15. Quill

• Overview: https://quilljs.com/guides/why-quill/
• Github: https://github.com/quilljs/quill/
• BSD-3-Clause license
• Last commit: On Mar 22, 2022

1.1.16. Summernote

• Docs: https://summernote.org/getting-started/
• Github: https://github.com/summernote/summernote
• MIT license
• Last commit: On May 12, 2022

1.1.17. ContentTools

• Overview: https://getcontenttools.com/getting-started
• Github: https://github.com/GetmeUK/ContentTools
• MIT license
• Last commit: On Jul 11, 2021

1.1.18. Textbox.io

• Overview: https://www.textbox.io/
• Docs: https://www.textbox.io/docs/
• Github: https://github.com/tinymce/tinymce

1.1.19. WYMeditor

• Overview: http://www.wymeditor.org/
• Features: http://www.wymeditor.org/features/
• Github: https://github.com/wymeditor/wymeditor/
• This repository has been archived by the owner. It is now read-only.

1.1.20. ALOHA EDITOR

• Use: https://www.alohaeditor.org/guides/using_aloha.html
• Github: https://github.com/alohaeditor/Aloha-Editor
• Last commit: On Oct 07, 2019

1.1.21. Simple MDE

• Github: https://github.com/sparksuite/simplemde-markdown-editor
• MIT license
• Last commit: On Jun14, 2016

1.1.22.  Editor.md

• Based on CodeMirror & jQuery & Marked.
• Github: https://github.com/pandao/editor.md
• MIT license
• Last commit: On May 09, 2019

1.1.23. Easy-markdown-editor

• Github: https://github.com/Ionaru/easy-markdown-editor
• Last commit: On Mar 12, 2022

1.1.24. Froala

• Github: https://github.com/froala/design-blocks
• Version: https://froala.com/blog/general/introducing-froala-v4-0-6-the-most-powerful-wysiwyg-html-editor/
• Doc: https://froala.com/wysiwyg-editor/docs/overview/
• Supporter: https://wysiwyg-editor.froala.help/hc/en-us
• Last commit: On Jan 15, 2019

1.1.25. Trumbowyg

• Docs: https://alex-d.github.io/Trumbowyg/documentation/
• Github: https://github.com/Alex-D/Trumbowyg
• Demo: https://alex-d.github.io/Trumbowyg/demos/
• MIT license
• Last commit: On Dec 15, 2021

1.1.26. CoffeeCup HTML Editor

• Overview: https://www.coffeecup.com/html-editor/
• Github: https://github.com/gradus/coffeecup
• Last commit: On Jun 19, 2013

1.1.27. Medium-editor-insert-plugin

• Github: https://github.com/linkesch/medium-editor-insert-plugin
• This repository has been archived by the owner. It is now read-only.

1.1.28. Brickyeditor

• Github: https://github.com/samclarke/SCEditor
• Details: https://openbase.com/js/brickyeditor
• Options: https://www.sceditor.com/documentation/options/
• Last commit: On Mar 10, 2022

1.1.29. SCEditor

• Intetegration: https://www.sceditor.com/documentation/getting-started/
• Github: https://github.com/samclarke/SCEditor
• MIT license
• Last commit: On Mar 10, 2020

1.1.30. AlloyEditor

• https://alloyeditor.com/
• https://github.com/liferay/alloy-editor/issues/760
• https://github.com/liferay/alloy-editor/issues/1494
• https://ckeditor.com/cke4/addon/markdown

1.1.31.  Markdownify

• Docs: https://markdownify.js.org/
• Github: https://github.com/amitmerchant1990/electron-markdownify/
• Last commit: On "May 22, 2022"

1.1.32.  Showdown

• Docs: https://showdownjs.com/docs/
• Github: https://github.com/showdownjs/showdown
• Last commit: On "May 26, 2022"

1.1.33. Bootstrap Markdown Editor

• Github: https://github.com/inacho/bootstrap-markdown-editor
• Last commit: On "Dec 1, 2016"

1.1.34.  Markdown-it

• Github: https://github.com/markdown-it/markdown-it
• Demo: https://markdown-it.github.io/
• Last commit: On "May 25, 2022"

1.1.35. Cristal

• https://github.com/xwiki-contrib/cristal/
• https://cristal.xwiki.org/xwiki/bin/view/Main/WebHome
• https://forum.xwiki.org/t/choosing-a-library-to-integrate-react-components-inside-vue/16565/6
• https://peertube.xwiki.com/w/rjW8WDZnbBjrxk3W6UDbWk
• https://peertube.xwiki.com/w/oGgjTjG4H8vsrFR5GJgd4z
• https://peertube.xwiki.com/w/at1wJLtWxuqNMF9EaRuM2n

1.2. Markdown tools that are not WYSIWYG editors

Here are all the Markdown Editors that are not WYSIWYG

1.2.1. Hackmdio

• https://github.com/hackmdio/codimd

  
  

Ideas

• Idea from Jonny: use attributes so each object can have a different setting. So old comments could be Tiki syntax, and new comments could be Markdown.

Other tools

• https://www.lyx.org/Download

Related links

• https://github.blog/2022-05-19-math-support-in-markdown/
• https://ckeditor.com/docs/ckeditor5/latest/features/markdown.html
• https://discuss.prosemirror.net/t/offline-peer-to-peer-collaborative-editing-using-yjs/2488
• https://blog.kevinjahns.de/are-crdts-suitable-for-shared-editing/
• https://www.tiny.cloud/blog/real-time-collaboration-ot-vs-crdt/
• People want Markdown: https://forum.virtualmin.com/t/links-to-documentation-are-broke/111602
• Markdown support for the Squire is an HTML5 rich text editor: "I think this request is really outside the scope of Squire. A good Markdown editor would be an entirely different product, and probably require quite a different code base."

To be evaluated

• https://markdown-it.github.io