Medium-editor: Adding 2 buttons

[boesie]

Hi,

I added 2 buttons. see example below

But both classes are added to the same <span> See example below.

<span class="kop1 kop2">My</span> father’s family name being

But how can I remove the first one "kop1" when I press the kop2 button?

I think I need to change this code, but how?

handleClick: function (event) {
    this.classApplier.toggleSelection();
    this.base.checkContentChanged();
  }

I can't find it on the walkthrough page:
https://github.com/yabwe/medium-editor/blob/master/src/js/extensions/WALKTHROUGH-BUTTON.md

[j0k3r]

Please provide a JSBin / jsfiddle containing a set of reproducible steps.

[boesie]

Yes no problem. If you push the button CLASS1 and second CLASS2.
Both classes are added to the
<span class="class1 class2">
But i need only:
<span class="class2">

I also added the code to a textarea. So you can easily check the html code

LINK: https://jsfiddle.net/d3agwpLr/1/

[nmielnik]

So it seems like you want to "link" these buttons together to ensure only one of them can be applied at a time. So, I would probably go about it by exposing a special function on all the buttons you want to be "linked" together. Since you want to be able to remove any applied classes from the other "linked" buttons, I would just name this function removeLinkedApplierIfApplied().

The function could leverage the isAppliedToSelection() function that the ClassApplier exposes and remove the class if it's applied. So, the function could look something like this:

var removeLinkedApplierIfApplied = function () {
    if (this.classApplier.isAppliedToSelection(this.window)) {
        this.classApplier.toggleSelection();
    }
}

You can also get access to all the extensions within the instance of MediumEditor via this.base.extensions. So, you can create another help method that can loop through all the existing extensions (except the current extension), and if it finds a removeFormatIfApplied function, it will call it. Let's call this function toggleOtherLinkedAppliers() and it would look something like this:

var toggleOtherLinkedAppliers = function () {
    this.base.extensions.forEach(function (extension) {
        // Look for extensions (other than this one) that have a removeLinkedApplierIfApplied function
        if (extension !== this && typeof extension.removeLinkedApplierIfApplied === 'function')  {
            extension.removeLinkedApplierIfApplied();
        }
    }, this);
}

Now, all you need to do is attach these functions to each button you create, and when the button is clicked, it just calls this.toggleOtherLinkedAppliers() before it applies itself.

An example of how you would change one of your buttons:

var HighlighterButton2 = MediumEditor.extensions.button.extend({
    name: 'highlighter2',

    // tagNames, contentDefault, ...
    // All of the properties and the init function stay the same as how you had them before
    // ..., action, init, 

    // Add the 2 new functions
    removeLinkedApplierIfApplied: removeLinkedApplierIfApplied,
    toggleOtherLinkedAppliers: toggleOtherLinkedAppliers,

    handleClick: function (event) {
        // Call the helper function before toggling the applier for this button
        this.toggleOtherLinkedAppliers();
        this.classApplier.toggleSelection();

        // Ensure the editor knows about an html change so watchers are notified
        // ie: <textarea> elements depend on the editableInput event to stay synchronized
        this.base.checkContentChanged();
    settextarea('tekst100','tekst200');
    }
});

Just add those functions to each button you want to be "linked", and add the function call into handleClick() and I think it should all work the way you were describing. Good luck.

[boesie]

Great!! You make my day!! No my whole week :-)