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!