Multiple block selection

[zeinabzahran]

How to select more than one block and perform action like bold or italic to whole selection?

[lijie1129]

Hi, @zeinabzahran

As of version 2.29.0-rc.0, editor.js still does not support perform inline actions across mutiple blocks.

[Ian4869]

Hi,Have you found a way to achieve this requirement?

[osain-az]

I can look at it one of these days

[anand-cubyts]

this will be really helpful

[sebmeister2077]

I've somewhat achieved this by using a MutationObserver on the editor__redactor element, and save which blocks contain the 'selected' class, showing the inline toolbar manually after the mouse up event (adding the necesary classes) and then extending the Inline Tools you need to also handle cross block selections ann apply the styling to all [contenteditable=true] elements

[josessolmaximo]

I've somewhat achieved this by using a MutationObserver on the editor__redactor element, and save which blocks contain the 'selected' class, showing the inline toolbar manually after the mouse up event (adding the necesary classes) and then extending the Inline Tools you need to also handle cross block selections ann apply the styling to all [contenteditable=true] elements

how did you show the inline toolbar manually? I tried this.api.inlineToolbar.open() but it doesn't open

[sebmeister2077]

@josessolmaximo I've added the neccessary classes on the element which are from the editor itself :D, you can check their names by inspecting the toolbar when open.

        document
            .querySelectorAll(".ce-block--selected")
        // css style for visual block selection, other than default because that one is used to determine internal selection state
            .forEach((el) => el.classList.add(this.customCSS.blockSelected));

        // toolbar DOM element
        toolbar.style.left = `max(120px,${toolbar.style.left ?? "0px"})`;
        toolbar.classList.add("ce-inline-toolbar--showed");

[justcodej]

@josessolmaximo我已经在元素上添加了来自编辑器本身的必要类：D，您可以在打开时检查工具栏来检查它们的名称。

        document
            .querySelectorAll(".ce-block--selected")
        // css style for visual block selection, other than default because that one is used to determine internal selection state
            .forEach((el) => el.classList.add(this.customCSS.blockSelected));

        // toolbar DOM element
        toolbar.style.left = `max(120px,${toolbar.style.left ?? "0px"})`;
        toolbar.classList.add("ce-inline-toolbar--showed");

May I ask if you can provide a demonstration or code snippet?

[sebmeister2077]

@justcodej @josessolmaximo I've uploaded my code here https://github.com/sebmeister2077/editorjs-multiblock-selection-plugin Might publish this on npm but only if i can make this be supported on multiple versions of editorjs..

Currently works on v2.28 for me if you want to check it out