Milkdown / examples

A list of examples to play with milkdown.
MIT License
30 stars 8 forks source link

iframe node example works but with error; I fixed it (?) #11

Open sensiblearts opened 1 week ago

sensiblearts commented 1 week ago

Initial checklist

Affected packages and versions

core 7.3.5, kit 7.5.5

Link to runnable example

No response

Steps to reproduce

Copy the code from your iframe example, example-iframe-plugin, into a .svelte file (I don't think it matters that I'm using svelte).

Expected behavior

Renders the iframe properly. No errors.

Actual behavior

Renders the iframe properly. But throws error:

Uncaught RangeError: Content hole not allowed in a leaf node spec
    at _DOMSerializer.serializeNodeInner (chunk-NHPDIOUZ.js?v=41b99bdd:3154:15)
    at chunk-NHPDIOUZ.js?v=41b99bdd:3143:28
    at _Fragment.forEach (chunk-NHPDIOUZ.js?v=41b99bdd:366:7)
    at _DOMSerializer.serializeFragment (chunk-NHPDIOUZ.js?v=41b99bdd:3117:14)
    at Plugin.handlePaste (@milkdown_plugin-clipboard.js?v=41b99bdd:117:43)
    at chunk-DE7QC25T.js?v=41b99bdd:12891:43
    at EditorView.someProp (chunk-DE7QC25T.js?v=41b99bdd:14511:43)
    at doPaste (chunk-DE7QC25T.js?v=41b99bdd:12891:12)
    at editHandlers.paste (chunk-DE7QC25T.js?v=41b99bdd:12913:15)
    at view.dom.addEventListener.view.input.eventHandlers.<computed> (chunk-DE7QC25T.js?v=41b99bdd:12396:9)

...which led me to this https://github.com/ueberdosis/tiptap/issues/1321

...and this fix https://github.com/ueberdosis/tiptap/commit/8169eef27c15ccccf59b06970a58931ea137f990

So for milkdown I changed this: toDOM: (node: Node) => ['iframe', {...node.attrs, 'contenteditable': false}], 0], to this toDOM: (node: Node) => ['iframe', {...node.attrs, 'contenteditable': false}],

And the error is gone. Fixed?

(I have not had time to dig into why it works, but it works to stop the error.)

(FYI, in a .svelte file, $ is reserved in the code section, so the imports have to be modified, e.g.,: import { $node as nnode, $inputRule as iinputRule, $remark as rremark } from '@milkdown/kit/utils'; )

Runtime

Chrome

OS

Windows, Linux

Build and bundle tools

Vite