diff --git a/plugins/tiddlywiki/prosemirror/development.tid b/plugins/tiddlywiki/prosemirror/development.tid new file mode 100755 index 000000000..6a14269e5 --- /dev/null +++ b/plugins/tiddlywiki/prosemirror/development.tid @@ -0,0 +1,24 @@ +title: $:/plugins/tiddlywiki/prosemirror/development + +Downloaded from JsDelivr CDN (like `https://cdn.jsdelivr.net/npm/prosemirror-state@latest/dist/index.cjs` and store as `prosemirror-state.js`): + +* [ext[prosemirror-state|https://cdn.jsdelivr.net/npm/prosemirror-state@latest/dist/index.cjs]]: v1.4.3 +* [ext[prosemirror-view|https://cdn.jsdelivr.net/npm/prosemirror-view@latest/dist/index.cjs]]: v1.38.1 +** [ext[prosemirror.css|https://cdn.jsdelivr.net/npm/prosemirror-view@latest/style/prosemirror.css]] +* [ext[prosemirror-model|https://cdn.jsdelivr.net/npm/prosemirror-model@latest/dist/index.cjs]]: v1.25.0 +* [ext[prosemirror-schema-basic|https://cdn.jsdelivr.net/npm/prosemirror-schema-basic@latest/dist/index.cjs]]: v1.2.4 +* [ext[prosemirror-schema-list|https://cdn.jsdelivr.net/npm/prosemirror-schema-list@latest/dist/index.cjs]]: v1.5.1 +* [ext[prosemirror-example-setup|https://cdn.jsdelivr.net/npm/prosemirror-example-setup@latest/dist/index.cjs]]: v1.2.3 +* [ext[orderedmap|https://cdn.jsdelivr.net/npm/orderedmap@latest/dist/index.cjs]]: v2.1.1 +* [ext[prosemirror-transform|https://cdn.jsdelivr.net/npm/prosemirror-transform@latest/dist/index.cjs]]: v1.10.3 +* [ext[prosemirror-keymap|https://cdn.jsdelivr.net/npm/prosemirror-keymap@latest/dist/index.cjs]]: v1.2.2 +* [ext[prosemirror-history|https://cdn.jsdelivr.net/npm/prosemirror-history@latest/dist/index.cjs]]: v1.4.1 +* [ext[prosemirror-commands|https://cdn.jsdelivr.net/npm/prosemirror-commands@latest/dist/index.cjs]]: v1.7.0 +* [ext[prosemirror-dropcursor|https://cdn.jsdelivr.net/npm/prosemirror-dropcursor@latest/dist/index.cjs]]: v1.8.1 +* [ext[prosemirror-gapcursor|https://cdn.jsdelivr.net/npm/prosemirror-gapcursor@latest/dist/index.cjs]]: v1.3.2 +* [ext[prosemirror-menu|https://cdn.jsdelivr.net/npm/prosemirror-menu@latest/dist/index.cjs]]: v1.2.4 +** [ext[menu.css|https://cdn.jsdelivr.net/npm/prosemirror-menu@latest/style/menu.css]] +* [ext[prosemirror-inputrules|https://cdn.jsdelivr.net/npm/prosemirror-inputrules@latest/dist/index.cjs]]: v1.5.0 +* [ext[w3c-keyname|https://cdn.jsdelivr.net/npm/w3c-keyname@latest/dist/index.cjs]]: v2.2.8 +* [ext[crelt|https://cdn.jsdelivr.net/npm/crelt@latest/dist/index.cjs]]: v1.0.6 +* [ext[rope-sequence|https://cdn.jsdelivr.net/npm/rope-sequence@latest/dist/index.cjs]]: v1.3.4 diff --git a/plugins/tiddlywiki/prosemirror/files/menu.css b/plugins/tiddlywiki/prosemirror/files/menu.css new file mode 100644 index 000000000..488350a58 --- /dev/null +++ b/plugins/tiddlywiki/prosemirror/files/menu.css @@ -0,0 +1,148 @@ +.ProseMirror-textblock-dropdown { + min-width: 3em; +} + +.ProseMirror-menu { + margin: 0 -4px; + line-height: 1; +} + +.ProseMirror-tooltip .ProseMirror-menu { + width: -webkit-fit-content; + width: fit-content; + white-space: pre; +} + +.ProseMirror-menuitem { + margin-right: 3px; + display: inline-block; +} + +.ProseMirror-menuseparator { + border-right: 1px solid #ddd; + margin-right: 3px; +} + +.ProseMirror-menu-dropdown, .ProseMirror-menu-dropdown-menu { + font-size: 90%; + white-space: nowrap; +} + +.ProseMirror-menu-dropdown { + vertical-align: 1px; + cursor: pointer; + position: relative; + padding-right: 15px; +} + +.ProseMirror-menu-dropdown-wrap { + padding: 1px 0 1px 4px; + display: inline-block; + position: relative; +} + +.ProseMirror-menu-dropdown:after { + content: ""; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid currentColor; + opacity: .6; + position: absolute; + right: 4px; + top: calc(50% - 2px); +} + +.ProseMirror-menu-dropdown-menu, .ProseMirror-menu-submenu { + position: absolute; + background: white; + color: #666; + border: 1px solid #aaa; + padding: 2px; +} + +.ProseMirror-menu-dropdown-menu { + z-index: 15; + min-width: 6em; +} + +.ProseMirror-menu-dropdown-item { + cursor: pointer; + padding: 2px 8px 2px 4px; +} + +.ProseMirror-menu-dropdown-item:hover { + background: #f2f2f2; +} + +.ProseMirror-menu-submenu-wrap { + position: relative; + margin-right: -4px; +} + +.ProseMirror-menu-submenu-label:after { + content: ""; + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; + border-left: 4px solid currentColor; + opacity: .6; + position: absolute; + right: 4px; + top: calc(50% - 4px); +} + +.ProseMirror-menu-submenu { + display: none; + min-width: 4em; + left: 100%; + top: -3px; +} + +.ProseMirror-menu-active { + background: #eee; + border-radius: 4px; +} + +.ProseMirror-menu-disabled { + opacity: .3; +} + +.ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu, .ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu { + display: block; +} + +.ProseMirror-menubar { + border-top-left-radius: inherit; + border-top-right-radius: inherit; + position: relative; + min-height: 1em; + color: #666; + padding: 1px 6px; + top: 0; left: 0; right: 0; + border-bottom: 1px solid silver; + background: white; + z-index: 10; + -moz-box-sizing: border-box; + box-sizing: border-box; + overflow: visible; +} + +.ProseMirror-icon { + display: inline-block; + line-height: .8; + vertical-align: -2px; /* Compensate for padding */ + padding: 2px 8px; + cursor: pointer; +} + +.ProseMirror-menu-disabled.ProseMirror-icon { + cursor: default; +} + +.ProseMirror-icon svg { + fill: currentColor; + height: 1em; +} + +.ProseMirror-icon span { + vertical-align: text-top; +} diff --git a/plugins/tiddlywiki/prosemirror/files/prosemirror.css b/plugins/tiddlywiki/prosemirror/files/prosemirror.css new file mode 100644 index 000000000..75a90b240 --- /dev/null +++ b/plugins/tiddlywiki/prosemirror/files/prosemirror.css @@ -0,0 +1,54 @@ +.ProseMirror { + position: relative; +} + +.ProseMirror { + word-wrap: break-word; + white-space: pre-wrap; + white-space: break-spaces; + -webkit-font-variant-ligatures: none; + font-variant-ligatures: none; + font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */ +} + +.ProseMirror pre { + white-space: pre-wrap; +} + +.ProseMirror li { + position: relative; +} + +.ProseMirror-hideselection *::selection { background: transparent; } +.ProseMirror-hideselection *::-moz-selection { background: transparent; } +.ProseMirror-hideselection { caret-color: transparent; } + +/* See https://github.com/ProseMirror/prosemirror/issues/1421#issuecomment-1759320191 */ +.ProseMirror [draggable][contenteditable=false] { user-select: text } + +.ProseMirror-selectednode { + outline: 2px solid #8cf; +} + +/* Make sure li selections wrap around markers */ + +li.ProseMirror-selectednode { + outline: none; +} + +li.ProseMirror-selectednode:after { + content: ""; + position: absolute; + left: -32px; + right: -2px; top: -2px; bottom: -2px; + border: 2px solid #8cf; + pointer-events: none; +} + +/* Protect against generic img rules */ + +img.ProseMirror-separator { + display: inline !important; + border: none !important; + margin: 0 !important; +} diff --git a/plugins/tiddlywiki/prosemirror/files/tiddlywiki.files b/plugins/tiddlywiki/prosemirror/files/tiddlywiki.files index 7f6031148..395f8fc2e 100755 --- a/plugins/tiddlywiki/prosemirror/files/tiddlywiki.files +++ b/plugins/tiddlywiki/prosemirror/files/tiddlywiki.files @@ -21,6 +21,13 @@ "title": "prosemirror-view", "module-type": "library" } + },{ + "file": "prosemirror.css", + "fields": { + "type": "text/css", + "title": "$:/plugins/tiddlywiki/prosemirror/lib/prosemirror.css", + "tags": "[[$:/tags/Stylesheet]]" + } },{ "file": "prosemirror-schema-list.cjs", "fields": { @@ -107,6 +114,14 @@ "module-type": "library" } }, + { + "file": "menu.css", + "fields": { + "type": "text/css", + "title": "$:/plugins/tiddlywiki/prosemirror/lib/menu.css", + "tags": "[[$:/tags/Stylesheet]]" + } + }, { "file": "prosemirror-inputrules.cjs", "fields": { diff --git a/plugins/tiddlywiki/prosemirror/plugin.info b/plugins/tiddlywiki/prosemirror/plugin.info index 6476cc369..d708de136 100755 --- a/plugins/tiddlywiki/prosemirror/plugin.info +++ b/plugins/tiddlywiki/prosemirror/plugin.info @@ -2,6 +2,6 @@ "title": "$:/plugins/tiddlywiki/prosemirror", "name": "Prosemirror Visual Editor", "description": "WYSIWYG editor (What You See Is What You Get) for TiddlyWiki", - "list": "readme", + "list": "readme development tree", "stability": "STABILITY_1_EXPERIMENTAL" } diff --git a/plugins/tiddlywiki/prosemirror/readme.tid b/plugins/tiddlywiki/prosemirror/readme.tid index b676b99dd..a61db1e7d 100755 --- a/plugins/tiddlywiki/prosemirror/readme.tid +++ b/plugins/tiddlywiki/prosemirror/readme.tid @@ -1,26 +1,5 @@ title: $:/plugins/tiddlywiki/prosemirror/readme -Test Test +Test `<$prosemirror />`, see console for content JSON. <$prosemirror /> - -Downloaded from JsDelivr CDN (like `https://cdn.jsdelivr.net/npm/prosemirror-state@latest/dist/index.cjs` and store as `prosemirror-state.js`): - -* [ext[prosemirror-state|https://cdn.jsdelivr.net/npm/prosemirror-state@latest/dist/index.cjs]]: v1.4.3 -* [ext[prosemirror-view|https://cdn.jsdelivr.net/npm/prosemirror-view@latest/dist/index.cjs]]: v1.38.1 -* [ext[prosemirror-model|https://cdn.jsdelivr.net/npm/prosemirror-model@latest/dist/index.cjs]]: v1.25.0 -* [ext[prosemirror-schema-basic|https://cdn.jsdelivr.net/npm/prosemirror-schema-basic@latest/dist/index.cjs]]: v1.2.4 -* [ext[prosemirror-schema-list|https://cdn.jsdelivr.net/npm/prosemirror-schema-list@latest/dist/index.cjs]]: v1.5.1 -* [ext[prosemirror-example-setup|https://cdn.jsdelivr.net/npm/prosemirror-example-setup@latest/dist/index.cjs]]: v1.2.3 -* [ext[orderedmap|https://cdn.jsdelivr.net/npm/orderedmap@latest/dist/index.cjs]]: v2.1.1 -* [ext[prosemirror-transform|https://cdn.jsdelivr.net/npm/prosemirror-transform@latest/dist/index.cjs]]: v1.10.3 -* [ext[prosemirror-keymap|https://cdn.jsdelivr.net/npm/prosemirror-keymap@latest/dist/index.cjs]]: v1.2.2 -* [ext[prosemirror-history|https://cdn.jsdelivr.net/npm/prosemirror-history@latest/dist/index.cjs]]: v1.4.1 -* [ext[prosemirror-commands|https://cdn.jsdelivr.net/npm/prosemirror-commands@latest/dist/index.cjs]]: v1.7.0 -* [ext[prosemirror-dropcursor|https://cdn.jsdelivr.net/npm/prosemirror-dropcursor@latest/dist/index.cjs]]: v1.8.1 -* [ext[prosemirror-gapcursor|https://cdn.jsdelivr.net/npm/prosemirror-gapcursor@latest/dist/index.cjs]]: v1.3.2 -* [ext[prosemirror-menu|https://cdn.jsdelivr.net/npm/prosemirror-menu@latest/dist/index.cjs]]: v1.2.4 -* [ext[prosemirror-inputrules|https://cdn.jsdelivr.net/npm/prosemirror-inputrules@latest/dist/index.cjs]]: v1.5.0 -* [ext[w3c-keyname|https://cdn.jsdelivr.net/npm/w3c-keyname@latest/dist/index.cjs]]: v2.2.8 -* [ext[crelt|https://cdn.jsdelivr.net/npm/crelt@latest/dist/index.cjs]]: v1.0.6 -* [ext[rope-sequence|https://cdn.jsdelivr.net/npm/rope-sequence@latest/dist/index.cjs]]: v1.3.4 diff --git a/plugins/tiddlywiki/prosemirror/tree.tid b/plugins/tiddlywiki/prosemirror/tree.tid new file mode 100644 index 000000000..b0649663a --- /dev/null +++ b/plugins/tiddlywiki/prosemirror/tree.tid @@ -0,0 +1,3 @@ +title: $:/plugins/tiddlywiki/prosemirror/tree + +<> \ No newline at end of file diff --git a/plugins/tiddlywiki/prosemirror/widget.js b/plugins/tiddlywiki/prosemirror/widget.js index 1be2c7a65..16d47ab8a 100644 --- a/plugins/tiddlywiki/prosemirror/widget.js +++ b/plugins/tiddlywiki/prosemirror/widget.js @@ -49,7 +49,7 @@ ProsemirrorWidget.prototype.render = function(parent,nextSibling) { var self = this; this.view = new EditorView(container, { state: EditorState.create({ - doc: DOMParser.fromSchema(mySchema).parse(document.querySelector("#content")), + doc: mySchema.node("doc", null, [mySchema.node("paragraph")]), plugins: exampleSetup({schema: mySchema}) }), dispatchTransaction: function(transaction) { @@ -64,11 +64,8 @@ ProsemirrorWidget.prototype.render = function(parent,nextSibling) { }; ProsemirrorWidget.prototype.saveEditorContent = function() { - this.editor.save().then((outputData) => { - console.log('Article data: ', outputData) - }).catch((error) => { - console.log('Saving failed: ', error) - }); + const content = this.view.state.doc.toJSON(); + console.log(JSON.stringify(content)); } // Debounced save function for performance