details: add (not working) commands & basic styling

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

@@ -1,4 +1,4 @@
-import { Node, mergeAttributes } from '@tiptap/core'
+import { Node, mergeAttributes, Command } from '@tiptap/core'
 
 export interface DetailsOptions {
   HTMLAttributes: {
@@ -13,6 +13,8 @@ export default Node.create({
 
   group: 'block',
 
+  // defining: true,
+
   defaultOptions: <DetailsOptions>{
     HTMLAttributes: {},
   },
@@ -44,4 +46,30 @@ export default Node.create({
       }
     }
   },
+
+  addCommands() {
+    return {
+      /**
+       * Set a details node
+       */
+      setDetails: (): Command => ({ commands }) => {
+        // TODO: Doesn’t work
+        return commands.wrapIn('details')
+      },
+      /**
+       * Toggle a details node
+       */
+      toggleDetails: (): Command => ({ commands }) => {
+        // TODO: Doesn’t work
+        return commands.toggleWrap('details')
+      },
+      /**
+       * Unset a details node
+       */
+      unsetDetails: (): Command => ({ commands }) => {
+        // TODO: Doesn’t work
+        return commands.lift('details')
+      },
+    }
+  },
 })

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

@@ -1,5 +1,9 @@
 <template>
   <div v-if="editor">
+    <button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('details') }">
+      details
+    </button>
+
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -39,6 +43,7 @@ export default {
           <summary>A closed details tag</summary>
           <p>More info about the details.</p>
         </details>
+        <p>That’s it.</p>
       `,
     })
   },
@@ -54,5 +59,18 @@ export default {
   > * + * {
     margin-top: 0.75em;
   }
+
+  details {
+    summary::before {
+      content: '▸';
+      color: red;
+      display: inline-block;
+      width: 1em;
+    }
+
+    &[open] summary::before {
+      content: '▾';
+    }
+  }
 }
 </style>