details: refactoring to use divs instead of semantic markup

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

@@ -20,9 +20,14 @@ export default Node.create({
   },
 
   parseHTML() {
-    return [{
-      tag: 'details',
-    }]
+    return [
+      {
+        tag: 'details',
+      },
+      {
+        tag: 'div[data-type="details"]',
+      },
+    ]
   },
 
   renderHTML({ HTMLAttributes }) {
@@ -31,7 +36,24 @@ export default Node.create({
 
   addNodeView() {
     return ({ HTMLAttributes }) => {
-      const item = document.createElement('details')
+      const item = document.createElement('div')
+      item.setAttribute('data-type', 'details')
+
+      const toggle = document.createElement('div')
+      toggle.setAttribute('data-type', 'detailsToggle')
+      item.append(toggle)
+
+      const content = document.createElement('div')
+      content.setAttribute('data-type', 'detailsContent')
+      item.append(content)
+
+      toggle.addEventListener('click', () => {
+        if (item.hasAttribute('open')) {
+          item.removeAttribute('open')
+        } else {
+          item.setAttribute('open', 'open')
+        }
+      })
 
       Object.entries(HTMLAttributes).forEach(([key, value]) => {
         item.setAttribute(key, value)
@@ -39,7 +61,7 @@ export default Node.create({
 
       return {
         dom: item,
-        contentDOM: item,
+        contentDOM: content,
         ignoreMutation: (mutation: MutationRecord) => {
           return !item.contains(mutation.target) || item === mutation.target
         },

docs/src/demos/Experiments/Details/index.vue

@@ -5,6 +5,16 @@
     </button>
 
     <editor-content :editor="editor" />
+
+    <h2>HTML</h2>
+    {{ editor.getHTML() }}
+
+    <h2>Issues</h2>
+    <ul>
+      <li>Commands don’t work</li>
+      <li>Fails to open nested details</li>
+      <li>Node can’t be deleted (if it’s the last node)</li>
+    </ul>
   </div>
 </template>
 
@@ -60,16 +70,29 @@ export default {
     margin-top: 0.75em;
   }
 
-  details {
-    summary::before {
+  details,
+  [data-type="details"] {
+    display: flex;
+
+    [data-type="detailsContent"] > *:not(summary) {
+      display: none;
+    }
+
+    [data-type="detailsToggle"]::before {
+      cursor: pointer;
       content: '▸';
-      color: red;
       display: inline-block;
       width: 1em;
     }
 
-    &[open] summary::before {
-      content: '▾';
+    &[open] {
+      [data-type="detailsContent"] > *:not(summary) {
+        display: inherit;
+      }
+
+      [data-type="detailsToggle"]::before {
+        content: '▾';
+      }
     }
   }
 }