Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ability to set a label for each root when using the MultiRootEditor when calling addRoot. #529

Open
lnmp4000 opened this issue Sep 18, 2024 · 0 comments

Comments

@lnmp4000
Copy link

I need the ability to set the label on an rich text editable element when using the multi root editor.

I think I have a setup that is slightly more complicated than normal uses cases that I will describe here.

At the point the multi root editor is configured, I do not have information about which rich text editors will be on the page.
So the editor root is setup and the editor and editableElements (empty at this point) are loaded into a react context

 const { editableElements, toolbarElement, editor } = useMultiRootEditor({
   // -- config here -- //
})

Later I use the editor from the context to call addRoot to setup each rich text element.

  editor.addRoot(id, {
                data: getIn(getFieldMeta.current().value, id),
                isUndoable: false,
                config:{ label:'My Label'} //something like this
            });

At the point addRoot is called, I have all the information about the rich text editor, including the label. I would like to be able to pass in additional config at this point to set the label.

The editableElements updates which updates the context, and finally this is rendered inside my application along with the toolbarElement.

Without this, the rich text element is labelled in an unhelpful way:

<div id="Ge8adcd9f-b109-4e5a-9de0-297cdaf71ace.0.C73bf4fba-21dc-4e5d-8544-6683fdfdf226" class="ck ck-content ck-editor__editable ck-rounded-corners ck-editor__editable_inline ck-blurred" lang="en-gb" dir="ltr" role="textbox" aria-label="Rich Text Editor. Editing area: Ge8adcd9f-b109-4e5a-9de0-297cdaf71ace.0.C73bf4fba-21dc-4e5d-8544-6683fdfdf226" contenteditable="true"><p><br data-cke-filler="true"></p></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant