Toolbar option and on-selection changed not working !!

[renish123123]

I m using quill editor as on very complex level where i have one drop down below of text editor. i have to placed drop down selected value into editor toggle position. For achieve this task i created one span blot and its working. i successfully able to placed drop down value to editor.
But problem is editor toolbar option Bold,italic ,underline will stopped working into placed value,even its not give me cursor range so please help me to short out this issues.

Here is my span blot
let BlockEmbed = Quill.import('blots/embed');

class SpanBlot extends BlockEmbed {
    static create(value) {
        console.log(value);
        let node = super.create();
        node.setAttribute('class', 'newclassss');
        node.innerHTML = value.value;
       // node.setAttribute('style', "margin-left:3px; margin-right:3px;");
        return node;
    }
    static value(node) {
        return {
            value: node.innerHTML
        };
    }
}

SpanBlot.blotName = 'spantag';
SpanBlot.tagName = 'span';

Quill.register(SpanBlot);

var quill = new Quill('#editor', {
    modules: {
        toolbar: [
            [{ 'font': [] }],
            ['bold', 'italic', 'underline'],        // toggled buttons

            [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
            // outdent/indent
            [{ 'direction': 'rtl' }],                         // text direction



            [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme

            [{ 'align': [] }],


        ]
    },
    placeholder: 'Compose an epic...',
    theme: 'snow'  // or 'bubble'
});

quill.on('selection-change', function(range, oldRange, source) {
    if (range) {
        if (range.length == 0) {
            console.log('User cursor is on', range.index);
            window.selectedTogglePlace=range.index;


        } else {
            var text = quill.getText(range.index, range.length);
           console.log('User has highlighted', text);
        }
    } else {
        console.log('Cursor not in the editor');
    }
});

[seandearnaley]

@renish123123 if you look at the parchment docs the section describing Embed Blots explains: "Its corresponding DOM node will often be a Void Element, but can be a Normal Element. In these cases Parchment will not manipulate or generally be aware of the element's children, and it will be important to correctly implement the blot's index() and position() functions to correctly work with cursors/selections."

I didn't notice this myself when I first started with Quill... but it's become a real problem, range isn't going to work inside the embeds, it'd be great if there were some way to have embed's take selection into account, it'd also be nice to be able to make editable blots inside embeds, I've made some attempts to workaround selection but I can't even get keyboard handling to work effectively, a return tries to make a new block element and backspace doesn't work properly either. It's extremely hard to extend.

[jhchen]

You may have more luck on help by following the suggestions in the issue template when you clicked "New Issue". At present, this Issue does not describe what you are trying to do and why and instead dumps a bunch of code (most appearing to be irrelevant to the issue itself) and says it doesn't work.

[quill-bot]

Closing inactive issue.

[amitm02]

I've encounter similar issue. After some prolong usage, the selection-change stop firing. It is a bit tricky to detect as there is errors in the console.

@jhchen, can you give me some points about how to investigate the further? Is there a specific code in quill worth putting a breaking point once it happens that you can point me to?

[danieldevsquad]

Something similar is happening in my case. I have multiple elements in the same page and when I change the alignment of an element, the 'selection-change' will not trigger for all the elements rendered after that.
Check this codepen:

https://codepen.io/danielcamargo/pen/GvdXrj?editors=1111