How does CodeMirror appear in a custom <$edit-text> form field, like it works in the draft editor?

1

I’m using TiddlyWiki with the new CodeMirror6 plugin enabled. In the normal edit/draft mode, the text field is correctly edited with the CodeMirror editor. I want to use CodeMirror in a custom form, I’m using an explicit <$edit-text> widget, where I only get a plain textarea, no CodeMirror. Is there an easy way to achieve this?

2

Try installing this plug in

3

Thanks for the really prompt reply. Unfortunately, I only see the one tiddler with the italic title:

/plugins/tiddlywiki/codemirror-6-edit-text

and the text:

Missing tiddler "/plugins/tiddlywiki/codemirror-6-edit-text" – click to create

Which plugin do you mean exactly? One of the plugins from the core plugin collection under “Plugins”?

4

The plugin $:/plugins/tiddlywiki/codemirror-6-edit-text should be installed with the full bundle, Its called “SimpleEngine for CodeMirror 6” and is listed separately in the plugin list after the others,
then if you go to Control Panel > settings > codemirror > Editor and scroll down to “SimpleEngine Settings” should indicate its installed and running. To stop this altered behaviour you need to disable the plugin.

Given you read /plugins/tiddlywiki/codemirror-6-edit-text rather than $:/plugins/tiddlywiki/codemirror-6-edit-text suggests it is not installed correctly. I saw this before and found the plugin with the correct name and it was fixed.

5

Thanks for the clarification. The plugin link in the opend tiddler in My TiddlyWiki in @arunnbabu81’s wiki is broken into two tiddlers: one titled $ and the other titled plugins/tiddlywiki/codemirror-6-edit-text.

Thanks @TW_Tones for the explanation. I’ve now read that textarea and input should behave like the full CodeMirror editor. This is true for example in ControlPanel → Info → Basics → Default Tiddler, but not in a tiddler with the code:

<$edit-text
  tag="textarea" field="test" minHeight="30" default=""
/>

nor in a tiddler with a plain HTML snippet like:

<label for="test">TEST:</label>
<textarea id="test" name="test" rows="4" cols="50">text...</textarea>

My question is: Is it also possible to get the full CodeMirror behavior there?

Background: I want to edit the content of a transcluded tiddler in a modal, so that I don’t lose the visual focus on the parent tiddler in the main text flow (story river). It would be very convenient if this modal textarea editor could use the full CodeMirror features, especially syntax highlighting for TiddlyWiki text – ideally identical to the normal draft editor with CodeMirror, with the full syntax highlighting I’m used to from the regular editor.

Is there any way to get full CodeMirror support (including syntax highlighting) inside a custom form or modal that uses <$edit-text> to edit a tiddler’s text field?

Thx
Geron

6

Untested guess: you might want to have a look at the edit widget, documentation is here: https://tiddlywiki.com/#EditWidget

Fred

7

Thanks for the hint @tw-FRed ! I also looked at the source of ControlPanel → Info → Basics → Default Tiddler, and it seems that class="tc-edit-texteditor" is the key. However, the EditTextWidget does not work:

<$edit-text
  tag="textarea" class="tc-edit-texteditor" field="test" minHeight="30" default=""
/>

but the EditWidget does:

<$edit
  class="tc-edit-texteditor" field="test" minHeight="30" default=""
/>

Maybe someone can explain why. In any case, I’m happy with this solution and grateful for the food for thought.

Many thanks!

8

Although a particular case of edit may use the edit-text widget it is often embedded in more such as a view template, css or within another widget. Although the plugins read me implies it is just the widgets.

9

@96eron did you try to go into the plug in section in the control panel of that wiki that I shared to check for that plug in
It’s not my wiki. I saw it from the codemirror 6 thread in this forum

10

The current build on this website has a problem with the Simple Engine.
I’ve fixed that, but the website would need a fresh build.

11

Yes, thank you, I saw it but at first didn’t understand that the opened Tiddler in this wiki had accidentally been saved split into two parts with its titles, which made it seem meaningless at first glance. I was eventually able to figure it out. My example above with editWidget (NOT EditTextWidget) and the class="tc-edit-texteditor" also works without Simple Engine.

Geron

12

Thank you, I haven’t quite understood the background of the differences yet, but that sounds logical.

g.eron

13

Thats because it is same the widget that is used for the main editor in Tiddlywiki