details: add (not working) commands & basic styling

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>