Editing Drafts from JavaScript

48 views
Skip to first unread message

Pekka

unread,
Sep 16, 2021, 2:46:54 AMSep 16
to TiddlyWiki
How can Drafts be edited with JavaScript? 

I would like to parse the text in a draft according to more complicated rules than what is currently possible with existing widgets, e.g. tm-edit-text-operation. 

I have tried this.wiki.setText(...), but it doesn't work. 

What would be the easiest way to change the text field in a Draft Tiddler according to arbitrary rules?


Pekka

Mark S.

unread,
Sep 16, 2021, 12:23:59 PMSep 16
to TiddlyWiki
It sounds like you would like to edit javascript in a mode similar to a code editor.

You can use the code mirror plugin and the javascript for codemirror plugin to edit javascript text.

You can get the plugins from the stand-alone TW by going to 

control panel (cog wheel) --> plugins (tab) --> official plugins (button)

Search for codemirror and javascript .

Pekka

unread,
Sep 17, 2021, 2:38:00 AMSep 17
to TiddlyWiki
Hi Mark,

Thanks for the reply.

I did not explain my goals properly. I would basically like to create a new EditorToolbar button similar to bold, italic etc. but with custom functionality.

I have successfully created buttons that can edit the text in normal Tiddlers but I cannot do the same when the Tiddler is in draft mode. Would there be an easy way to do this?

I have added a picture to help illustrate my goal. Just as an example, what I could do is that when the circled button is pressed, the text before " xx " would be a new field, the text after it would become the field content. The text would then be removed from the text area. All this should happen while the Tiddler is in draft mode. 

Hope this clarifies my goals. Thanks!

Pekka
Example.png

PMario

unread,
Sep 17, 2021, 3:15:34 AMSep 17
to TiddlyWiki
Hi Pekka,

If you search the TW source for "module-type: texteditoroperation" .. you will find 9 text operator functions. They are all part of the
$:/core/modules/editor/operations/text/  namespace.

If you start with an easy one: $:/core/modules/editor/operations/text/insert-text.js   you'll see it exports "insert-text"
If you search for "insert-text" in the .tid files. you'll find: https://tiddlywiki.com/#WidgetMessage%3A%20tm-edit-text-operation ...

Then have a look at the more powerful ones. eg: wrap lines, wrap selections
Then: excise and prefix-lines

IMO that will get you started. ... If it doesn't let us know. .. It's relatively easy to extend those functions, .. once you see the concept.

-mario

PMario

unread,
Sep 17, 2021, 3:18:25 AMSep 17
to TiddlyWiki
On Friday, September 17, 2021 at 9:15:34 AM UTC+2 PMario wrote:
...
IMO that will get you started. ... If it doesn't let us know. .. It's relatively easy to extend those functions, .. once you see the concept.

The core concept is modular and can be extended with your own "toolbar button parameters" ...
Let me know, if this was enough info.

-mario

PMario

unread,
Sep 17, 2021, 3:20:33 AMSep 17
to TiddlyWiki
The prerelease contains a new HowTo: https://tiddlywiki.com/prerelease/#How%20to%20create%20dynamic%20editor%20toolbar%20buttons which shows how to create new toolbar buttons. ... The messages used by those buttons are created with module-type: texteditoroperation JS function.

-mario


Pekka

unread,
Sep 17, 2021, 5:11:40 AMSep 17
to TiddlyWiki
Thanks a lot! 

It was enough and I got the idea. I'm now able to achieve what I want. 

I did not know one could so easily create own functions that react to sendmessage. I was afraid I would have to modify the core and create own event listeners etc. which is currently out of my abilities.

Now I was able to create a function that operates "inside" tm-edit-text-operation. I suppose it would similarly be possible to react to custom created messages as well, e.g. tm-user-specified-message? 


Pekka

PMario

unread,
Sep 17, 2021, 5:20:21 AMSep 17
to TiddlyWiki
On Friday, September 17, 2021 at 11:11:40 AM UTC+2 Pekka wrote:

Now I was able to create a function that operates "inside" tm-edit-text-operation. I suppose it would similarly be possible to react to custom created messages as well, e.g. tm-user-specified-message? 

Yes. The mechanism is the same and since the parameters in the button-config tiddlers are dynamic you can send as much info to the event as you like.
It's a super powerful mechanism and very flexible to extend .... once you "got" the concept.

-m

Pekka

unread,
Sep 17, 2021, 7:22:28 AMSep 17
to TiddlyWiki
Thank you. Much appreciated.

Pekka

Reply all
Reply to author
Forward
0 new messages