Extension "snippets" problem with two instances of editor

[alFlash]

I have 2 instances of a markdown-field. Both are equal and implements the snippets Extension from the examples. If I chose a snippet in the first editor, it is inserted to the second Instance.

[fabianmichael]

@alFlash I just found the issue. The dropdown variable was declared globally, which lead to both editor instances picking up the dropdown of the first editor. I’ve updated the example, it should work fine now.

See https://github.com/fabianmichael/kirby-markdown-field/commit/43bf7b673aaaee14847551258d086ac8f37196ff#diff-94adf30031b45bb36c25957d1811477ed6ace4a1b40b75f03adefbfe51e20014L33-R33

[alFlash]

@fabianmichael Thank you for your fast replay and work!!! Now it works. One little issue was not fixed: If the focus is on instance2 and you click directly the snippets button in instance1 the insert will done in instance2 .

THX so much.

[alFlash]

Hi, was it not reproducable? THX

[fabianmichael]

@alFlash I just don’t have any capacity … if this is very important to you, please open a separate ticket, so this does not get lost over time.

[alFlash]

Ok. I understand. Any suggestions/ suppositions where I should begin to search? I suppose the button itself has to be inactive and only wake up at the first click without any other action.

[fabianmichael]

@alFlash It’s kinda weird. The toolbar is usually initialized something like this:

1. A markdown input component uses reads all custom buttons and extension definitions from other plugins and Turns generates actual instances of the Button and Extension classes.
2. These are configured and are bound to a specific editor instance.
3. When a dropdown is opened, it should display the correct dropdown with items whose actions are bound to to editor where the toolbar belongs to, but this seems to be broken …

As far as I understand the code (in the end, I haven’t touched most of it in over a year), my only logical explanation would be that a non-focussed editor instance gets the wrong popup passed. Or maybe CodeMirror’s API sends the text to the wrong editor (the latter is unlikely). If you are willing to investigate this a bit, I’d be very happy. Maybe you are more successful than I was. :-)

[alFlash]

@fabianmichael

Yes, its a focus problem. I solved it (for me). Don't know if it is clean, but it works:

I added this.editor.focus();

before this.editor.insert(value)

so, in every case the clicked editor has the focus.

Finally the options object look like this:

const dropdown = options.map(({ text: label, value }) => ({
          label,
          command: () =>{
            this.editor.focus();
            this.editor.insert(value);
          }
        }))

Thank you.

[fabianmichael]

@alFlash Thanks for the hint, though I could not reproduce the error anymore. I just updated the example extension. Feels better when the editor focussed upon selecting a snippet from the menu, so is is also still a win for me.