Recommended way to do a complicated edit operation?

[Ca1vino]

My use case is to write a complex JavaScript function that edits the content of a tiddler (using regex, maps, etc.) while the tiddler is open in edit mode. What is the recommended way to do that?

I will probably end up with more than one of these, so I'd want to be able to separate the execution code from the pattern specification.

Any advice will be appreciated.

[pmario]

First of all you should have a closer look and understand the EditTemplate and all its components. There are at least 18 of them.

The edit template is activated by the PageTemplate - story section.

A very important widget in edit mode is the https://tiddlywiki.com/#FieldManglerWidget ... You will probably need to have a look at the source code, to understand it.

If you want to activate js actions you have to have a closer look at the TW-Hook mechanism. https://tiddlywiki.com/dev/#HookMechanism
Search for th- in the dev docs.

Have a closer look at the dev-docs

[pmario]

If you could be more specific about your usecase, I could be more specific about the elements, where I would start. ... The first post will probably be too general, and will probably not be helpful, because it's too much info

[Ca1vino]

Yes, thanks for asking, the use case is this...

Add a button in Edit mode (I can do that).
The button would apply a complex javascript loop with regexes and patterns to modify the text. Would it be in a JS widget, or somewhere else? I've done JS widgets and macros.

Then what ... ? The javascript code updates the tiddler and flushes it to the server? Or does it return to Wikitext messages and actions? I think I'd rather just get it done in the JS code.

[Jermolene]

My use case is to write a complex JavaScript function that edits the content of a tiddler (using regex, maps, etc.) while the tiddler is open in edit mode. What is the recommended way to do that?

I think the best approach would be to create a custom editor toolbar button. When they are clicked, they have access to the text being edited. You can explore the built-in editor toolbar buttons here:

https://github.com/Jermolene/TiddlyWiki5/tree/master/core/ui/EditorToolbar

[pmario]

As Jeremy pointed out, you could create 1+ new buttons: eg: https://github.com/Jermolene/TiddlyWiki5/blob/master/core/ui/EditorToolbar/bold.tid

The text looks like this:

<$action-sendmessage
	$message="tm-edit-text-operation"
	$param="wrap-selection"
	prefix="''"
	suffix="''"
/>

tm-edit-text-operation is handled at: https://github.com/Jermolene/TiddlyWiki5/blob/master/core/modules/editor/factory.js#L79

The code that does the work can be found at: https://github.com/Jermolene/TiddlyWiki5/tree/master/core/modules/editor/operations/text

IMO this should help to get you started.

[Ca1vino]

Thanks everyone,
After reading these various helpful comments, I've come to see the solution as:
"The recommended way to do this is to create a new edit mode button and a new edit text operation"

Specifically:
(1) Make a new edit mode button (clone / modify an existing one)
<$action-sendmessage
$message="tm-edit-text-operation"
$param="format-log"
prefix="''"
suffix="''"
/>
(2) Make a new texteditoroperation module called by the edit button (in above example, "format-log")
Put the complicated javascript code in this module.

[pmario]

Right.
and
You are not limited to prefix, suffix ... as parameters. You can add, whatever you need there!