New CodeMirror 6 TiddlyWiki5 plugin

Sometimes (can’t reliably reproduce) when closing the Editor with ESC, I get this RSoE:

Uncaught RangeError: Invalid child in posBefore
at fe.posBefore (codemirror-view.js:10:24058)
at _e (codemirror-view.js:10:59173)
at Ke (codemirror-view.js:10:58304)
at vs.posAtCoords (codemirror-view.js:10:143604)
at Ao.startHover (codemirror-view.js:10:176771)
at Ao.checkHover (codemirror-view.js:10:176582)

I’ll update if I find out how to reproduce it.

CodeMirror 6 Plugin - Latest Development Preview

The latest development state of the CodeMirror 6 plugin is available for testing at:

https://deploy-preview-9556--tiddlywiki-previews.netlify.app/

Recent Changes & Fixes

Configurable Enter Key Indentation

A new configuration option has been added for Enter key behavior:

Config tiddler: $:/config/codemirror-6/lang-tiddlywiki/enterIndent

Options:

  • smart (default): Full smart indentation - automatically indents inside widgets, HTML tags, conditionals (<%if%>, <%else%>), and pragma definitions

  • indent: Simply matches the previous line’s indentation

  • none: Inserts a plain newline with no indentation

Note: Lists always continue on Enter regardless of this setting. The configuration only affects behavior outside of lists.

Simplified Pragma Completions

Pragma completions (\define, \procedure, \function, \widget, etc.) now only insert the keyword name instead of full templates with \end. Full templates with parameter placeholders are now handled by snippets, giving you more control over the inserted content.

Tag-Based Language Override System

You can now override the editor language for a tiddler using tags. Configure which tag activates which language mode via config tiddlers like $:/config/codemirror-6/lang-css/tags. When multiple tags on a tiddler point to different languages, the first matching tag wins.

Tooltips/Popups Configuration

Tooltips and completion popups now properly append to document.body, preventing clipping issues in iframes and other constrained containers.

Bug Fixes

  • Fixed CSS completions not working in standalone text/css tiddlers (completions now work both in $$.css code blocks and in CSS-type tiddlers)

  • Extended completion support to other languages (HTML, Python, Go) in standalone tiddlers

  • Fixed server-side build compatibility for the edit-text plugin

  • Code formatting improvements across plugin files


Please test and report any issues! Your feedback helps improve the plugin.

3 Likes

Changes

  • New Theme: Greyscale (light / dark)
  • $$ KaTeX $$ Syntax rendered through the lang-latex plugin
  • CSS completion options include all CSS classes of the page
  • JavaScript completion options include $tw object and keys of the window object
  • $$$.fileextension , $$$mime/type supported with nested language parsing, same for triple backticks followed by the language name
  • CamelCase now properly detected
  • New edit-text plugin that makes ALL inputs or textareas CodeMirror 6 (still needs some CSS for proper width-styling of inputs throughout the TiddlyWiki UI)
2 Likes

Is this to say that you consider CodeMirror 6 stable/ready for general use?

Beyond the needed tweak to the width, it seems it’s not working well when other input types are requested.

For example, type="number" on an $edit-text widget should give something like:
image

But with CodeMirror 6 it gives:
image

@yan NO :wink:

Ah! thanks for reporting! I’ll have a look, I didn’t think about the different input types

1 Like

Markdown is now basically compatible with Wikitext syntax, so some of the autocompletion and related features should also support Markdown. @BurningTreeC

Thanks for the update!

Earlier I tried to play around with using your codemirror6 plugin as Streams’ default editor but I couldn’t get them to play nice together.

I also understand this is probably a lower priority task since it seems this is candidate official TW plugin(s) now.

You mentioned checking the GitHub PRs but I didn’t really see anything here:

Unless I am misunderstanding what you meant.

Anyway thanks for all your hard work on this plugin, I’m very excited for it because I seems it scratches a long-standing itch in the TW5 ecosystem.

Hi @yan - now the edit-text plugin only uses CodeMirror for text inputs and falls back to the standard TiddlyWiki engine for inputs with other types

1 Like

Hi @oeyoews - yes I was thinking about that, too

Maybe I can make it happen

Hi @Xyvir - this link is the link to my old CodeMirror 6 repository, sorry for the confusion

You can get the current plugins by either:

The plugins at The new CodeMirror 6 — an advanced Editor for TiddlyWiki5 are out of date

Best wishes,
Simon

1 Like

I’m still getting the RSoD with the only two enabled plugins being TW Core 5.3.8 (duh) and CM6 0.0.21. I’ve got various other plugins installed (CM6 plugins and Relink) but all of them are disabled. Would it matter if I completely uninstall them?

It is also still not happening on your current development version, so it’s definitely something on my end. Could 5.3.8 vs 5.4.0.pre have something to do with it?

Could I gather CM6 or TW logs somehow, someplace?

The alert only appears on iOS (Safari (Incognito mode to disable all of its extensions & Duckduckgo, I tried both though I know they share the same engine). Firefox on Windows does not have the problem.

Hi @Lamnatos

you’re getting the RangeError: A document must have at least one line right?

Yes, it’s the same as before.

As for other customizations, I’ve defined a number of ViewTemplates and added a couple of Tiddler icon/color cascades.

I’ll try making an experiment with a completely fresh/untouched TW 5.3.8 installation and the latest CM6 and see if it still happens.

edit:

Still happens for me here: https://al-cm6.tiddlyhost.com

Create a new tiddler, type a single character in the main area, backspace, get alert :frowning:

Is anyone else on iOS and willing to give it a try?

edit #2:

Also happens on a different iOS device with iOS 18.2

does this happen in a text/plain Editor, too @Lamnatos ?

Not sure where you mean. On the al-cm6 link above, in the GettingStarted tiddler, it does happen in the “Default tiddlers” text area but it does not happen in the “Subtitle” input box.

That’s a text editor like the main text editor of a tiddler.
You probably have IME/autocorrect enabled on iOS and that causes a problem.
Can you please try it in the text of a tiddler with type text/vnd.tiddlywiki and also in the text of a tiddler with type text/plain?

Tried both types on a new tiddler, with saving and reloading, happens on both. Also disabled all autocorrections & fixes on iOS settings, still happens.

1 Like

After enabling Bidirectional text (per-line) option, editing any tiddler raises this error: Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.

Wiki Information

TiddlyWiki Version: 5.4.0-prerelease
Current palette: $:/palettes/FlexokiLight
Current theme: $:/themes/tiddlywiki/snowwhite
Current layout: 
Browser language setting: zh-CN
Default type for missing tiddlers: 
Auto save setting: no
Code wrapping setting: pre
Sticky titles setting: no
Sidebar layout setting: fluid-fixed
Auto focus field setting for new tiddlers: title
Current storyview setting: classic
Toolbar text setting: no
Toolbar icon setting: yes
Button class setting: tc-btn-invisible
Navigation address bar setting: no
Tiddler opening behaviour setting for navigations from outside the story river: top
Tiddler opening behaviour setting for navigations from within the story river: below
CamelCase linking setting: disable
Keyboard shortcuts that have been customised: 
Disabled plugins: 
Plugins: 
  $:/core - 5.4.0-prerelease
  $:/languages/zh-CN - 5.4.0-prerelease
  $:/languages/zh-Hans - 5.4.0-prerelease
  $:/plugins/tiddlywiki/browser-storage - 5.4.0-prerelease
  $:/plugins/tiddlywiki/codemirror-6 - 0.0.21
  $:/plugins/tiddlywiki/codemirror-6/plugins/edit-text - 0.0.21
  $:/plugins/tiddlywiki/codemirror-6/plugins/lang-html - 0.0.21
  $:/plugins/tiddlywiki/codemirror-6/plugins/lang-markdown - 0.0.21
  $:/plugins/tiddlywiki/highlight - 5.4.0-prerelease
  $:/plugins/tiddlywiki/markdown - 5.4.0-prerelease
  $:/plugins/XLBilly/autodark - 0.0.3
  $:/plugins/xlbilly/markdown-admonition - 0.1.0
  $:/tab - 0.0.2
  $:/temp/info-plugin - 
  $:/themes/tiddlywiki/snowwhite - 5.4.0-prerelease
  $:/themes/tiddlywiki/vanilla - 5.4.0-prerelease

Hello @XLBilly , thanks for reporting. I’ve fixed the error here: https://deploy-preview-9556--tiddlywiki-previews.netlify.app/

Thanks again,
Simon

Hi @Lamnatos

does your issue with the error also appear within normal inputs at this page?

https://deploy-preview-9556--tiddlywiki-previews.netlify.app/