Markdown editor: Buttons broken

[rgieseke]

1) The issue and what you expected to happen In the Markdown editor using a shortcut like 'Ctrl-Alt-1' or clicking the "Bold" button does nothing but should add the respective Markdown syntax.

2) Exact steps to reproduce this issue See 1)

3) Your environment: Directus rc.76, reprodiced in clean local install Postgres Latest Firefox (Chrome also affected)

4) Console: Error message

Uncaught TypeError: codemirror.getCursor is not a function
    edit edits.ts:263
    1 input-rich-text-md.vue:222
    callWithErrorHandling runtime-core.esm-bundler.js:154
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:163
    emit runtime-core.esm-bundler.js:991
    createSetupContext/get emit/< runtime-core.esm-bundler.js:7271
    onClick v-button.vue:174
    callWithErrorHandling runtime-core.esm-bundler.js:154
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:163
    invoker runtime-dom.esm-bundler.js:336

This still worked in rc.70 so i suspect during the Update to Vue3 this might have been introduced (https://github.com/directus/directus/commit/1961dc188bfa51cfa0f846eab8c7f20a26a075c7#diff-88610999889851aa655df1f8fb9d691f3df64aed9ed1638609ba6a435b13944a).

[rgieseke]

If you've got any pointers i'd be happy to investigate further!

[rijkvanzanten]

This still worked in rc.70 so i suspect during the Update to Vue3 this might have been introduced (1961dc1#diff-88610999889851aa655df1f8fb9d691f3df64aed9ed1638609ba6a435b13944a).

Seems like it!

The parameter codemirror was added in this function:

https://github.com/directus/directus/blob/3850416863ae16c05a15f5305d4b57c1134d898b/app/src/interfaces/input-rich-text-md/edits.ts#L261

and this bit was updated to pass it along as is now required:

https://github.com/directus/directus/blob/3850416863ae16c05a15f5305d4b57c1134d898b/app/src/interfaces/input-rich-text-md/input-rich-text-md.vue#L256-L267

though it seems like edit calls in the template directly where missed in that change!

https://github.com/directus/directus/blob/3850416863ae16c05a15f5305d4b57c1134d898b/app/src/interfaces/input-rich-text-md/input-rich-text-md.vue#L21

[rijkvanzanten]

Should be a fairly quick fix. Wanna open a PR @rgieseke? 🙂

[rgieseke]

It seems it's not only adding the missing argument, somehow codemirror is not available for the click handlers (and the keyboard shortcuts don't work either. codemirror is always null when setting up (after adding to the return statement:

return {
            t,
            codemirror,
            codemirrorEl,
            edit,
            view,
            html,

Diving into Vue for the first time since a loooong time, i don't really know what's needed to fix this. The "Code" editor component also loads codemirror async, but doesn't have a toolbar, so looking there didn't provide any clues.

[rgieseke]

I've looked into this again (to see whether the button changes in rc.78 were related). I've noted that when leaving the page with pending edits, one can't close the 'Unsaved changes' dialog. A normal text input works fine.