I am trying to add an extension that replaces the existing link functionality in medium editor to allow me to have a filelist and other custom bits. The problem is that once I show modal and you make some change in it the original selection is lost. The example for inserting code, which looked to be the same thing the main script uses is this which I editing only so far as allowing a selection object to be passed in as a second param.

What I do is on button click show the modal, set some inputs, grab the selection from the base (same as window.getSelection()) save that to extension object. Then on clicking the save button in the modal I use the function from the code insert example, passing the selection. However the selection has changed, so I am guessing it's a reference or calculated everytime maybe, so I'm not sure how to make it work.

Here's code, I trimmed out the unrelated bits:

function MediumLink() {
    var self = this;
    this.parent = true;
    //...button init

    this.modalSubmit.addEventListener('click', function () {
        //the linkSel is no longer what I set it to here
        console.log(self.linkSel);
        self.insertHtmlAtCaret('<a href="' + self.modalHref.value + '">' + self.modalName.value + '</a>', self.linkSel);
        //... hide and reset modal
    }, false);

    //
    this.insertHtmlAtCaret = function (html, sel) {
        if (sel === undefined) {
            sel = window.getSelection();
        }
        //..rest of this function is unchanged from example
    };
}
MediumLink.prototype.onClick = function () {
    var sel = this.base.selection;

    if (sel.type === 'Range') { //trying to keep sel from changing since an empty selection would have a different type
        //... set inputs in modal based on the selection

        // sel is what I want at this point, what should be passed 
        console.log(sel);
        this.linkSel = sel;
    }
};

I am trying to add an extension that replaces the existing link functionality in medium editor to allow me to have a filelist and other custom bits. The problem is that once I show modal and you make some change in it the original selection is lost. The example for inserting code, which looked to be the same thing the main script uses is this which I editing only so far as allowing a selection object to be passed in as a second param.

What I do is on button click show the modal, set some inputs, grab the selection from the base (same as window.getSelection()) save that to extension object. Then on clicking the save button in the modal I use the function from the code insert example, passing the selection. However the selection has changed, so I am guessing it's a reference or calculated everytime maybe, so I'm not sure how to make it work.

Here's code, I trimmed out the unrelated bits:

function MediumLink() {
    var self = this;
    this.parent = true;
    //...button init

    this.modalSubmit.addEventListener('click', function () {
        //the linkSel is no longer what I set it to here
        console.log(self.linkSel);
        self.insertHtmlAtCaret('<a href="' + self.modalHref.value + '">' + self.modalName.value + '</a>', self.linkSel);
        //... hide and reset modal
    }, false);

    //https://github./jillix/medium-editor-custom-html
    this.insertHtmlAtCaret = function (html, sel) {
        if (sel === undefined) {
            sel = window.getSelection();
        }
        //..rest of this function is unchanged from example
    };
}
MediumLink.prototype.onClick = function () {
    var sel = this.base.selection;

    if (sel.type === 'Range') { //trying to keep sel from changing since an empty selection would have a different type
        //... set inputs in modal based on the selection

        // sel is what I want at this point, what should be passed 
        console.log(sel);
        this.linkSel = sel;
    }
};

• javascript
• medium-editor

2 Answers 2

medium-editor does have support for this built in:

MediumEditor.saveSelection()  // Stores the selection internally
MediumEditor.restoreSelection() // Re-applies the stored selection

From within your extension, since you're setting this.parent = true you can access this.base to call these methods:

this.base.saveSelection()
this.base.restoreSelection()

These built-in helpers should work fine as long as you don't make large alterations to the html (or more specifically the text value itself) between when the selection is saved and when the selection is restored.

Ok I think the problem boils down to this :

How do we save the selection and reproduce it if it is lost while we perform some other operation.

I dont know if there is an inbuilt medium editor function for it but I have encountered same problem and the short answer is to use Ranges and X-path to save selection.

Ranges are required to highlight the selection and X path to have selection accurately across all node and text.

Refer this : How to calculate the XPath position of an element using Javascript?