From acc6cd6aa082d4c91d54e7547223e2f4eb24fc80 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Thu, 11 Feb 2021 15:12:06 +0100
Subject: [PATCH] details: add (not working) commands & basic styling

---
 docs/src/demos/Experiments/Details/details.ts | 30 ++++++++++++++++++-
 docs/src/demos/Experiments/Details/index.vue  | 18 +++++++++++
 2 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/docs/src/demos/Experiments/Details/details.ts b/docs/src/demos/Experiments/Details/details.ts
index 97eb10195..7a910d6d2 100644
--- a/docs/src/demos/Experiments/Details/details.ts
+++ b/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')
+      },
+    }
+  },
 })
diff --git a/docs/src/demos/Experiments/Details/index.vue b/docs/src/demos/Experiments/Details/index.vue
index 0a4dfa97d..544cbc184 100644
--- a/docs/src/demos/Experiments/Details/index.vue
+++ b/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>