Recommended vanilla JS WYSIWYG editor framework

[linonetwo]

https://github.com/JefMari/awesome-wysiwyg-editors?tab=readme-ov-file#standalone

[linonetwo]

https://github.com/ueberdosis/tiptap is based on https://github.com/prosemirror , it config many rules, like shift + tab should outdent the list. There are many coner cases like this, maintaining them and test them ourselves is not a good idea. But tiptap involves too many abstructions, may increase size.

They are both MIT licensed.

Need to check if prosemirror's plugin ecosystem already provides enough plugins. Like https://github.com/ocavue/prosemirror-flat-list

[linonetwo]

ProseMirror itself requires 3 packages

import {schema} from "prosemirror-schema-basic"
import {EditorState} from "prosemirror-state"
import {EditorView} from "prosemirror-view"

let state = EditorState.create({schema})
let view = new EditorView(document.body, {state})

And still need plugins like https://github.com/ocavue/prosemirror-flat-list

so it will be hard to maintain by copy minified JS to this repo, need to use bundler like https://tiddly-gittly.github.io/Modern.TiddlyDev/

[oeyoews]

I have indeed looked at prosemirror a few times, and recently I tried to integrate prosemirror into tiddlywiki again. I am not familiar with it and it will take some time, but I plan to start with prosemirror-markdown

[linonetwo]

It is very simple, just use its plugins, see #8991

[rougsig]

https://github.com/Milkdown/milkdown

https://github.com/codex-team/editor.js

[linonetwo]

I'd consider editor.js, it allows "Copy editor.js file to your project and load it." https://editorjs.io/getting-started/#manually-load-file-to-your-project

[linonetwo]

Editorjs's AST is not good enough, it retain mark's HTML tag in the text.

[linonetwo]

Prosemirror's AST is better

{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"type":"text","text":"Hihi!"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"type":"text","text":"asdfsdaf"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"type":"text","text":"as"},{"type":"text","marks":[{"type":"strong"}],"text":"dfas"},{"type":"text","text":"df"}]}]}]}]}

[rougsig]

Prosemirror is great. And project already have codemirror, api in most places are same.

[pmario]

All the examples listed here are higher level libraries that are based on ProseMirror. The libraries implement a lot of UI boilerplate, that is not needed by TW, since TW has its own UI system. We can use the ProseMirror library directly, which will make the whole code base much simpler.

[linonetwo]

Prosemirror itself can only be install from npm, there are 3 packages. Also, list indentation is not a simple UI boilerplate. It needs another npm package.

[linonetwo]

There are actually 20 dependency for a simple demo, 606.0 k, because those packages has many other dependencies recursively, I let github copilot write a script to crawl them all and generate the tiddlywiki.files #8991 (comment)