From de234adb8be88ae48bbd3240b9bca13f8c0bb17c Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Wed, 10 Feb 2021 16:37:00 +0100
Subject: [PATCH] add node view to details experiment

---
 .../Experiments/Details/details-summary.ts    |  2 +-
 docs/src/demos/Experiments/Details/details.ts | 54 ++++++++++++++++++-
 2 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/docs/src/demos/Experiments/Details/details-summary.ts b/docs/src/demos/Experiments/Details/details-summary.ts
index 1a09a091..03feeb49 100644
--- a/docs/src/demos/Experiments/Details/details-summary.ts
+++ b/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: {},
diff --git a/docs/src/demos/Experiments/Details/details.ts b/docs/src/demos/Experiments/Details/details.ts
index 9627db1e..32103ccb 100644
--- a/docs/src/demos/Experiments/Details/details.ts
+++ b/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
+        },
+      }
+    }
+  },
 })