Inline format text

[MAX-786]

fixes #88 fixes #31 fixes #32

Approach (still got some bugs) :

hydra.js:

• [x] Adds a bold button in the toolbar.
• [x] Detects text selection within a block.
• [x] Sends the selected text information and cursor positions to the admin UI via postMessage.

Admin UI:

• [x] Receives the selection data and the bold state (active/inactive).
• [x] Updates the JSON data to reflect the bold formatting.
• [x] Sends the updated JSON data back to the iframe.

Since we have to write our own toggleMark method to update the json of selected block richtext field, I am doing the following:

• A deep copy of blockData is created to ensure the original data is not modified directly.
• findNode method to track the parent node (startNodeParent) where the updates should be applied.
• Nodes within the specified range are filtered out from startNodeParent.children. During this process, the index where the first node in the range was found (insertIndex) is recorded.
• The updatedNodes are inserted at the insertIndex, replacing the removed nodes while maintaining the order of the remaining nodes.

[MAX-786]

I think as Dylan suggested, its better to move addNodeIds on the adminUI side, which will lessen the load on hydrajs and also help us in formatting text inline. I'll try it out and see how complicated it is to do so.

[djay]

@MAX-786 why do we care if the original data is modified? I don't think there is a way to cancel an inline edit is there? does slate in the sidebar modify the original data?

Will you include the other char formatting as well in this PR? might as well include them if its easy. paragraph formats like h2 etc work different. are they better in a different PR or this one?

[djay]

Did it help to see the slate package and it's transform code?

[MAX-786]

Yep!!!! they helped and interestingly i was looking at them before too but i wasn't sure if it would be useful but i made them work and now i also added 'italic' & 'del' formats too. I'll be adding the comments with what approach i used and what it is actually doing to format the text.

[MAX-786]

so the aim of this pr was to enable applying/removing bold, italic, and strikethrough formatting to selected text directly within the iframe. One thing i also needed to make sure is that i had to ensure that any formatting changes made in the iframe are accurately reflected in the Slate JSON representation and vice-versa. Now recent commits correctly handles scenarios where the entire selection is enclosed within a formatting element or maybe formatting element is inside the selection, so it is now handled by isFormatted & unwrapFormattin methods.

https://github.com/user-attachments/assets/dcec3a20-3007-4355-b781-7eb62039605a

[djay]

@MAX-786 I think this looks good enough and we should get it merged and move on

[djay]

@MAX-786 does this work for #107 also or does this only work for the slate block?

[MAX-786]

@MAX-786 does this work for https://github.com/collective/volto-hydra/issues/107 also or does this only work for the slate block?

inline text editing and realtime update is implemented by keeping in mind the instructions for integrator in readme so it will work but inline formatting is currently supported for slate blocks only.