Editing Drafts from JavaScript

[Pekka]

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.]

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]

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

[PMario]

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]

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]

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]

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]

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]

Thank you. Much appreciated.

Pekka