Demo of ProseMirror WYSIWYG editor

[linonetwo]

Demo: https://deploy-preview-8991--tiddlywiki-previews.netlify.app/

This is based on #8258 , since it is not merged, commits here will be long.

Demo to show it is hard to manage dependency without a bundler like https://tiddly-gittly.github.io/Modern.TiddlyDev/

Script to crawl all JS dependency: #8991 (comment)
But due to those .cjs file still require each other with names like require('prosemirror-state'), I have to keep its name prosemirror-state in tiddlywiki.files. Any solution for this? An idea is use regexp on tiddlywiki.files to auto replace require("xxx on prosemirror js files, to require("$:/plugins/tiddlywiki/prosemirror/lib/xxx.

And I don't quite understand engine.js edit-codemirror.js in the old codemirror plugin, so I make prosemirror a widget instead, is this OK?

[github-actions]

Confirmed: linonetwo has already signed the Contributor License Agreement (see contributing.md)

[linonetwo]

Crawl all prosemirror as dependencies using this JS, and download https://cdn.jsdelivr.net/npm/prosemirror-view@latest/style/prosemirror.css and https://cdn.jsdelivr.net/npm/prosemirror-menu@latest/style/menu.css manually.

const fs = require('fs');
const path = require('path');

const dependencies = [
  'prosemirror-state',
  'prosemirror-view',
  'prosemirror-model',
  'prosemirror-schema-basic',
  'prosemirror-schema-list',
  'prosemirror-example-setup',
  'orderedmap',
  'prosemirror-transform',
  'prosemirror-keymap',
  'prosemirror-history',
  'prosemirror-commands',
  'prosemirror-dropcursor',
  'prosemirror-gapcursor',
  'prosemirror-menu',
  'prosemirror-inputrules',
  'w3c-keyname',
  'crelt',
  'rope-sequence',
];

async function getVersionAndDownload(dep) {
  try {
    const response = await fetch(`https://registry.npmjs.org/${dep}/latest`);
    const data = await response.json();
    const version = data.version;
    // const url = `https://cdn.jsdelivr.net/npm/${dep}@${version}/dist/index.cjs`;
    const url = `https://cdn.jsdelivr.net/npm/${dep}@${version}`;
    console.log(`Downloading ${dep}@${version} from ${url}`);
    const fileResponse = await fetch(url);
    const reader = fileResponse.body.getReader();
    const writer = fs.createWriteStream(path.resolve(__dirname, 'plugins/tiddlywiki/prosemirror/files', `${dep}.cjs`));
    const stream = new ReadableStream({
      async start(controller) {
        while (true) {
          const { done, value } = await reader.read();
          if (done) break;
          controller.enqueue(value);
        }
        controller.close();
      }
    });
    const responseStream = stream.pipeTo(new WritableStream({
      write(chunk) {
        writer.write(chunk);
      },
      close() {
        writer.end();
      }
    }));
    await responseStream;
  } catch (error) {
    console.error(`Failed to download ${dep}:`, error);
  }
}

async function main() {
  for (const dep of dependencies) {
    await getVersionAndDownload(dep);
  }
  console.log('All files downloaded and renamed successfully.');
}

main();

place it on tiddlywiki repo's root as crawlAndRename.js then node crawlAndRename.js with node 22+

[linonetwo]

Where is the netlify preview? Seems it won't build preview site for draft PR.

[netlify]

✅ Deploy Preview for tiddlywiki-previews ready!

Name	Link
🔨 Latest commit	2a0bef7
🔍 Latest deploy log	https://app.netlify.com/projects/tiddlywiki-previews/deploys/6a37f73916184e0008b12878
😎 Deploy Preview	https://deploy-preview-8991--tiddlywiki-previews.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

📊 Build Size Comparison: empty.html

Branch	Size
Base (master)	2528.4 KB
PR	2533.1 KB

Diff: ⬆️ Increase: +4.7 KB

[pmario]

@linonetwo -- Can you make this PR work with the latest changes in PR #8258 ?

[linonetwo]

I rebased this onto #8258 , hope didn't break anything.

[pmario]

I think, the new plugin needs to be included, for prosemirror to work here

[linonetwo]

Now it works, see https://deploy-preview-8991--tiddlywiki-previews.netlify.app/

This is just an demo showing #8258 works. Future routes:

1. find a way to make imports easier, and integrate editor factory (optional, needs help, or I could try ask deepwiki)
2. put it in another repo, so we could use https://github.com/tiddly-gittly/Modern.TiddlyDev to build it, also make it possible to use TS. My github copilot pro agent mode works better with TS.

and after this choise, there are more to improve

1. allow register slash / menu as sub-plugin
2. add build-in editor for macro, widget, macro definition, pragmas, based on [IDEA] Inline document for filter operator and action widget #8154 to show available parameters
3. inline AI editing that Notion and Obsidian and Github copilot have

I could complete these features in a double-month, but according to current PR merging speed, it might takes several years if it becomes a core plugin. So I'd like to make it a 3rd party plugin in https://github.com/tiddly-gittly/

[pmario]

This is just an demo showing #8258 works.

I know. But it is a good test, to see, what can be achieved.

---

2. put it in another repo, so we could use https://github.com/tiddly-gittly/Modern.TiddlyDev to build it, also make it possible to use TS. My github copilot pro agent mode works better with TS.

I did have a look at the Modern.TiddlyDev dependency list. For me that's very concerning.

tiddlywiki-plugin-dev has 25 dependencies which themself also have dependencies. So I would not be surprised if there would be 200 dependencies installed. Our users do not know any of them.

And I think none of them is really needed. TW can handle to compile plugins right from the core. TW itself is built that way. I use it every day.

As Jeremy pointed out. ProseMirror is already pretty heavy weight on its own. Adding additional additional dependencies maintenance nightmare and IMO looks a bit like over-engineering.

IMO Adding features like "slash menu" as plugin to TW is OK, but as a sub-plugin, it is way to strongly coupled. It has nothing to do with ProseMirror. It can support ProseMirror, but it should not be linked.

Just my personal thoughts.

[linonetwo]

@Jermolene When you merge the upstream ast core plugin PR, I'd like to move this WYSIWYG plugin to another repo, because I'm tired of writing JS when working on this, I want to use TS, so GitHub Copilot can auto-fix bugs more efficiently and the human-computer feedback loop will be faster.

But you said you hope the WYSIWYG editor to be a core plugin, so I'm in a dilemma.

---

Some afterthoughts:

I must have been spoiled by modern tools; I haven't written code by hand for quite some time..

And it is my fault to use only gpt4.1 on tiddlywiki, I should have use claude4 like I'm used during the work. That won't have problem writing JS. While it is a bit more expensive...

[pmario]

Will they ever be SVG icons "later" -- At least add a TODO the comment, so anyone may find it later ;)

[linonetwo]

I haven't decide how slash menu looks like, I may copy notion's style and add icons.

[pmario]

Why are the comments removed. If they are needed to better understand the code IMO they should stay.

[linonetwo]

I'm putting more time on AI-writing tiddler recently. So effort on this will be liminted in the future. So I will try migrate to https://tiptap.dev/docs/editor/getting-started/install/vanilla-javascript , which is also prosemirror based, but will save a lot of my time.

[Jermolene]

Thanks @linonetwo. I am still very keen to be able to offer a WYSIWYG editor. If it's not ready for v5.4.0 then it would make an excellent tentpole feature for v5.5.0.

[pmario]

@linonetwo .. I did have a new look at the demo page: The example text with ordered and unordered lists seems to have a lot of space in between, which IMO should not be there.

The result does not have that spacing, so it's not WYSIWIG anymore.

[Hydrowood0]

When the latest version of prosemirroe is used together with tiddlers\system$__xp.json, pressing the shortcut key to insert [] will lead to strange results.

"$:/xp/ui/EditorToolbar/list-checkbox.md": {
           "title": "$:/xp/ui/EditorToolbar/list-checkbox.md",
           "caption": "check list (Markdown)",
           "condition": "[<targetTiddler>type[text/x-markdown]] [<targetTiddler>type[text/markdown]]",
           "description": "Apply checklist formatting to lines containing selection",
           "icon": "$:/xp/images/checkbox",
           "shortcuts": "((list-checklist))",
           "tags": "$:/tags/EditorToolbar",
           "text": "<$action-sendmessage\n\t$message=\"tm-edit-text-operation\"\n\t$param=\"prefix-lines\"\n\tcharacter=\"- [ ]\"\n\tcount=\"1\"\n/>\n"
       },
       "$:/xp/ui/EditorToolbar/list-checkbox": {
           "title": "$:/xp/ui/EditorToolbar/list-checkbox",
           "caption": "check list",
           "condition": "[<targetTiddler>!has[type]] [<targetTiddler>type[text/vnd.tiddlywiki]]",
           "description": "Apply checklist formatting to lines containing selection",
           "icon": "$:/xp/images/checkbox",
           "shortcuts": "((list-checklist))",
           "tags": "$:/tags/EditorToolbar",
           "text": "<$action-sendmessage\n\t$message=\"tm-edit-text-operation\"\n\t$param=\"prefix-lines\"\n\tcharacter=\"[ ]\"\n\tcount=\"1\"\n/>\n"
       },