30:T64a,NodeView = Node.create({ name: "nodeView", group: "block", atom: true, addAttributes() { return { count: { default: 0 } }; }, parseHTML() { return [ { tag: "node-view" } ]; }, renderHTML({ HTMLAttributes }) { return ["node-view", TipTap.mergeAttributes(HTMLAttributes)]; }, addNodeView() { return ({ editor, node, getPos }) => { const { view } = editor; // Markup /*

Node view

*/ const dom = document.createElement("div"); dom.classList.add("node-view"); const label = document.createElement("span"); label.classList.add("label"); label.innerHTML = "Node view"; const content = document.createElement("div"); content.classList.add("content"); const button = document.createElement("button"); button.innerHTML = `This button has been clicked ${node.attrs.count} times.`; button.addEventListener("click", () => { if (typeof getPos === "function") { view.dispatch( view.state.tr.setNodeMarkup(getPos(), undefined, { count: node.attrs.count + 1 }) ); editor.commands.focus(); } }); content.append(button); dom.append(label, content); return { dom }; }; } })31:[] 2e:{"title":"TipTap","cells":[{"id":0,"value":"md`# TipTap\n\nhttps://tiptap.dev/`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"md`## Vanilla Javascript`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"viewof editor = {\n const element = html`

`;\n const editor = new Editor({\n element,\n extensions: [StarterKit, NodeView],\n content: `

Hello World!

\n`\n });\n element.value = editor;\n return element;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"editor","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"editor.getJSON()","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"md`## React`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"TipTapComponent = component(() => {\n const { useEditor, EditorContent } = TipTapReact;\n const editor = useEditor({\n extensions: [StarterKit],\n content: `

Hello World! 🌎️

`\n });\n // return EditorContent({ editor });\n return jsx``;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"render(() => jsx`<${TipTapComponent} />`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"StarterKit = {\n const { default: StarterKit } = await import(\n \"//cdn.skypack.dev/@tiptap/starter-kit?min\"\n );\n return StarterKit;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"Node = TipTap.Node","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"Editor = TipTap.Editor","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"TipTap = import(\"//cdn.skypack.dev/@tiptap/core?min\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"TipTapReact = import(\"//cdn.skypack.dev/@tiptap/react\")\n// TipTapReact = import(\"//esm.sh/@tiptap/react?deps=react@17.0.2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"import { render, component, createElement, jsx } from \"@gnestor/react\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}