🚀 - Allow for forms in Text Editor

[splincode]

Description

Which @taiga-ui/* package(s) are relevant/releated to the feature request?

addon-editor

Description

There is often a need to allow for specific elements to be in your text. For example, a user may need to add a button, or an image with specific width style, etc.

ex: Adding a button within text.

• Button Label
• Button Url
• Button Color

ex: Adding an image with specific style:

• Image Url
• Image Alt text
• Image caption
• Image size

In the example above, an image form group was defined to show image with a specific width.

Would it be possible to define a form component (that can contain fields for any arbitrary need) that would be displayed within the text-editor, and defining display component that will display the element based on the data provided in the form.

[KhaledGabr]

Another example from the internet that demonstrates this idea.

This is quite related to the draggable groups example, but what the group display in the Editor is different than what it displays in the HTML output. https://tinkoff.github.io/tui-editor/groups

[KhaledGabr]

I was able to achieve this result by following the example: https://taiga-family.github.io/editor/custom-tool/paste-emoji
and creating a custom extension. So feel free to close this issue.

[splincode]

@KhaledGabr Could you add contribution?

[KhaledGabr]

@splincode I think I can do something there indeed .. my current implementation is a bit tightly coupled with my codebase, but I could generalize it.

But I just realized that I need to figure out a good solution for the tui-editor-socket to allow for display of arbitrary component at the right place in the dom tree. My current approach seems to fail when the component belongs to a sub node. (node within an ordered list).

However, The allowance for forms specifically in Text Editor is fairly straightforward, I just had to follow the example of iFrameEditor or imageEditor and extend my component with TuiNodeViewNg.

But it's the display part that has proven to be more challenging .. Currently I am just splitting it which is not ideal:

  <tui-editor-socket [content]="content1"></tui-editor-socket>
  <custom-component [content]="component"></custom-component >
  <tui-editor-socket [content]="content2"></tui-editor-socket>

Will look further into that and get back to you.

15.08.2024_13.48.56_REC.mp4