add node view to details experiment

docs/src/demos/Experiments/Details/details-summary.ts

@@ -11,7 +11,7 @@ export default Node.create({
 
   content: 'inline*',
 
-  group: 'block',
+  // group: 'block',
 
   defaultOptions: <DetailsSummaryOptions>{
     HTMLAttributes: {},

docs/src/demos/Experiments/Details/details.ts

@@ -32,7 +32,7 @@ export default Node.create({
           }
 
           return {
-            open: '',
+            open: 'open',
           }
         },
       },
@@ -48,4 +48,56 @@ export default Node.create({
   renderHTML({ HTMLAttributes }) {
     return ['details', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
   },
+
+  addNodeView() {
+    return ({
+      node,
+      HTMLAttributes,
+      getPos,
+      editor,
+    }) => {
+      const { view } = editor
+      const item = document.createElement('details')
+
+      item.addEventListener('click', event => {
+        // @ts-ignore
+        const { open } = event.target.parentElement as HTMLElement
+        // @ts-ignore
+        const { localName } = event.target
+
+        if (typeof getPos === 'function' && localName === 'summary') {
+          view.dispatch(view.state.tr.setNodeMarkup(getPos(), undefined, {
+            open: !open,
+          }))
+          editor.commands.focus()
+        }
+      })
+
+      if (node.attrs.open) {
+        item.setAttribute('open', 'open')
+      }
+
+      Object.entries(HTMLAttributes).forEach(([key, value]) => {
+        item.setAttribute(key, value)
+      })
+
+      return {
+        dom: item,
+        contentDOM: item,
+        update: updatedNode => {
+          if (updatedNode.type !== this.type) {
+            return false
+          }
+
+          if (updatedNode.attrs.open) {
+            item.setAttribute('open', 'open')
+          } else {
+            item.removeAttribute('open')
+          }
+
+          return true
+        },
+      }
+    }
+  },
 })