Replace TinyMCE with TipTap

[apexdodge]

TinyMCE editor was MIT for a brief moment, and is not anymore. It is still open source, but I would like every single dependency to be MIT or equivalent.

I found this: https://github.com/ueberdosis/tiptap which is very popular, maintained, and robust. The downside is that there is no UI for it, so we have to design our own. But I think this may be the best for the long term.

[apexdodge]

This task will be the primary objective for milestone 1.4.0.

[apexdodge]

I have evaluated dozens of HTML WYSIWYG editors and its quite something.

Obviously the two best are TinyMCE and CKEditor. Trix is MIT but disappointing because it lacks the true flexibility we need.

TinyMCE went MIT license for a brief period but changed course and is now no longer MIT licensed for future versions. CKEditor is not open source friendly either.

However, this looks fantastic: https://github.com/ueberdosis/tiptap and is MIT licensed. The catch is that it is headless.

The task:

• Create a drop-in replacement for wysiwig hotwire.dev controllers.
• Migrate existing long text to wysiwyg fields
• Make long text field not formatted

Our current long text field: https://github.com/RaythaHQ/raytha/blob/main/src/Raytha.Web/wwwroot/raytha_admin/js/src/controllers/contentitems/longtext_controller.js Our current wysiwig field: https://github.com/RaythaHQ/raytha/blob/main/src/Raytha.Web/wwwroot/raytha_admin/js/src/controllers/contentitems/wysiwyg_controller.js

1) Build the UI on top of TipTap using bootstrap 5 from our current admin template.

I am fine with v1's UI looking somewhat rudimentary with just buttons like this: https://tiptap.dev/docs/examples/basics/default-text-editor but if able to have more toolbar style similar to this: https://www.tiny.cloud/docs/tinymce/latest/full-featured-premium-demo/ all the better.

2) The toolbar/buttons should be floating / fixed so it doesn't scroll away

3) Most of the extensions are free: https://tiptap.dev/docs/editor/extensions/overview.

Make sure to enable:

Marks

• Bold
• Code
• Highlight
• Italic
• Link
• Strike
• Subscript
• Superscript
• Text style
• Underline

Nodes

• Block quote
• Bullet list
• Code block
• Document
• Text
• Hard break
• Heading
• Horizontal
• List item
• Ordered list
• Paragraph
• Table and all table related extensions
• Youtube

Functionality

• Character count
• Color
• Text align
• Typography

4) We need 3 custom extensions to be built

• Image - we should have the ability to insert an image via URL, or upload a new image and update the dimensions / set text of the image. Appears as a regular image.
• Video - same for video, insert via URL or upload a video. Appears as an html5 video.
• File - Upload an arbitrary file in accordance with appsettings.json file upload rules. Can also set the 'link text' Appears as a link.

Note in the future we may enhance these extensions to allow to pick from a media gallery of already uploaded items.

6) Update long text field.

The long text field should no longer be a formatted field, just a field only with nothing else with it. Remove all code connected to Trix editor and the hotwire controller for it. Simplify the code.</p> <p>5) Migration</p> <ul> <li>We need a migration script to convert any existing long text fields to wysiwig fields</li> </ul> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>