History: wysiwyg editor

This page is an analysis of 2024-11, when ((Tiki28)) is soon to be released, so this can permit to pick a direction for ((Tiki29)).

Tiki has a WYSIWYG for ((Tiki-Flavored Markdown)) but it also needs a solution for HTML.

Currently, there are two HTML-WYSIWYG libs in use:
__1. In Tiki: [https://github.com/ckeditor/ckeditor4|CKEditor 4]__
Its opensource version has reached its end of life on June 30, 2023.

__2. In Cypht: [https://github.com/kindsoft/kindeditor|KindEditor]__
It is no longer maintained, and archived by the owner since Jan 9, 2024.

Given the implicit need to replace both libraries, we should consider the following criteria for a suitable replacement:
* A much better lib will be the one compatible both in Tiki and Cypht at once.
* A customizable toolbar to be able to add Tiki's specific editor tools.
* Easily tweakable to match Cypht and Tiki Bootstrap theming
* Lightweight

!! Options

!!!!__ [https://quilljs.com|Quill]__
__BSD-3-Clause license__
__Sizes:__
- quill.js: 209KB
- quill.snow.css: 25KB

* Pros
** The editor is not confined within an iframe, its style can be customized via CSS
** Modular architecture exposing additional config options and APIs to alter the interactions
** The toolbar is customizable and can be switched off as well
** Provide a Keyboard module allowing to enable custom behavior for keyboard events
* Cons
** Shipped with few tools. i.e. A table builder tool is missing

!!!__[https://summernote.org/|Summernote]__
__MIT license__
__Sizes:__
- summernote-bs5.js: 358KB
- summernote-bs5.css: 24KB

* Pros
** Bootstrap style-based editor, themable with bootswatch.
** Customizable toolbar
** Has many tools compared to Quill. Such as: the table builder, code view, full screen, many more font formatting tools, etc.
** A functional codemirror integration for code view
** Built on jQuery, also found in Tiki and Cypht
* Cons
** ?

!!!__[https://trix-editor.org|Trix]__
__MIT license__
__Sizes:__
- trix.umd.js: 449KB
- trix.css: 20KB

* Pros
** ?
* Cons
** No extension mechanism. Custom tools can't be added to the toolbar
** Not Bootstrap based
** Has very few tools.
** Overall, it's an editor to use where complex content manipulation is not needed such as with the Tiki syntax, plugins, etc.

!!!__[http://slatejs.org|Slate]__
__MIT license__

* Pros
** ?
* Cons
** Doesn't provide API to add custom tools to the toolbar
** A React based library
** Still in beta version

!!!__[https://github.com/fastmail/Squire|Squire]__
__MIT license__
__Sizes:__
- squire.js: 50.8KB

* Pros
** Customizable yes, but requires building the entire UI from scratch
** "In addition to its use at Fastmail, it is also currently used in production at ProtonMail, SnappyMail, StartMail, Tutanota, Zoho Mail, Superhuman and Teamwork Desk, as well as other non-mail apps including Google Earth" Source: https://github.com/fastmail/Squire/blob/master/README.md
* Cons
** Does not provide any UI, everything UI-related should be made from scratch
*** Could we re-use the UI from ToastUI editor? {sign user="marclaporte" datetime="2024-11-11T10:49:59+00:00"}
**** There’s no need to combine ToastUI and Squire, as everything Squire can do is also possible with ToastUI. However, ToastUI can be used as an HTML WYSIWYG editor by converting between HTML and Markdown. But then, Cypht would be excluded from this option, as it does not handle Markdown. {sign user="mercijacob" datetime="2024-11-12T16:08:01+00:00"}
**** @mercijacob https://www.cypht.org/features.html reports "Compose messages in plain text, HTML, or Markdown"
**** @marclaporte I understand that statement, but is this actually functional in Cypht? If it is a projected integration, how would a message composed in Markdown via Cypht be rendered in another client that only supports plain text and HTML?
***** @mercijacob: Message is written in Markdown and converted to HTML: https://github.com/cypht-org/cypht/pull/812
** Not enough tool features provided

!!! [https://ckeditor.com/ckeditor-5|CKEditor 5]

While CKEditor 5 is available, it’s not an option we can consider. Unlike CKEditor 4, which was initially released under the MIT license, CKEditor 5 is published under the GPL-2.0 license, which is incompatible with Tiki.

!!! [https://www.tiny.cloud|TinyMCE]

TinyMCE falls into the same category as CKEditor 5; its GPL-2.0 license is also incompatible with Tiki.

!!! [https://xdsoft.net/jodit|Jodit]
__MIT license__
__Sizes:__
- jodit.js: 1.9MB
- jodit.css: 180KB

* Pros
** Not Bootstrap based, but it can be customized with Bootstrap variables.
** Customizable
** Has many integrated tools

* Cons
** It offers two licensing models: MIT and commercial
** Has a slightly larger bundle compared to the other candidates
---

!! Votes

* Summernote {sign user="mercijacob" datetime="2024-11-11T10:55:01+00:00"}
* Summernote {sign user="chibaguy" datetime="2024-11-12T06:22:33+00:00"}
---

!! Implementation roadmap
* summernote setup in the JavaScript build system
* Edit the wysiwyg toolbar generator to match summernote toolbar data structure
* Handle tools with Tiki's custom behaviour (image upload, editor settings, syntax and plugins helper, wiki link, autosave)
* Add support for Tiki plugins
* Adjust tiki-admin_toolbars to render summernote ui and relative tools when wysiwyg is chosen as mode