This patch mainly add two functions: link insert and link edit in Milkdown editor.
Link Insert
Even though Milkdown's official example use "togglelink" instead of insert link in its menu bar, I reckon that most common user who is not familar with markdown can get confused by this design and will prefer a more direct "link insert" buttion.
This function is supported through a Milkdown composed command plugin, which add an "insertlink" command. And the UI is designed as a dialog which ask user for a link and optional text(default the same with href). The "title" field is ignored but anyway its almost useless?
As the input url is not checked, I do wonder if there exist a XSS issue; but this dialog should be logically equal to a []() input.
What's more, this patch can also illustrate that <Teleport> can function correctly even without :disable.
Preview:
Link Update
The idea comes from the Milkdown official example: when you clicked at a link, it should popup a tooltip and the user can edit the href of the link. However, as KUN has pointed out, all those functions are removed in v6 and are left for devs to build their own ones.
As a result, I rewrite this function under Milkdown v7 as a tooltip, referring to the implementations in v6 as a link mark plugin. However, due to the limitations in prosemirror vue adaptor, it just cannot pass the ctx into vue component during initialization, so I have to make use of pinia to pass the ctx into the tooltip vue component. (By the way the vue component is not a sub-component of Editor component, so even provide-inject will not work here).
The hide property in the component is used as an more elegant altenative to v-if="loading", as v-if=false will cause the whole component fail to response to ref change(The reactivity on linkHref will not work anymore).
Preview:
Misc
A npm run format is run before the commits.
As components in this patch are poorly named and pinia file is modified, a code review might be necessary.
This patch mainly add two functions: link insert and link edit in Milkdown editor.
Link Insert
Even though Milkdown's official example use "togglelink" instead of insert link in its menu bar, I reckon that most common user who is not familar with markdown can get confused by this design and will prefer a more direct "link insert" buttion.
This function is supported through a Milkdown composed command plugin, which add an "insertlink" command. And the UI is designed as a dialog which ask user for a link and optional text(default the same with href). The "title" field is ignored but anyway its almost useless?
As the input url is not checked, I do wonder if there exist a XSS issue; but this dialog should be logically equal to a
[]()input.What's more, this patch can also illustrate that
<Teleport>can function correctly even without:disable.Preview:
Link Update
The idea comes from the Milkdown official example: when you clicked at a link, it should popup a tooltip and the user can edit the href of the link. However, as KUN has pointed out, all those functions are removed in v6 and are left for devs to build their own ones.
As a result, I rewrite this function under Milkdown v7 as a tooltip, referring to the implementations in v6 as a link mark plugin. However, due to the limitations in prosemirror vue adaptor, it just cannot pass the ctx into vue component during initialization, so I have to make use of pinia to pass the ctx into the tooltip vue component. (By the way the vue component is not a sub-component of Editor component, so even provide-inject will not work here).
The
hideproperty in the component is used as an more elegant altenative tov-if="loading", as v-if=false will cause the whole component fail to response to ref change(The reactivity on linkHref will not work anymore).Preview:
Misc
A
npm run formatis run before the commits.As components in this patch are poorly named and pinia file is modified, a code review might be necessary.