add details experiment

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

@@ -0,0 +1,29 @@
+import { Node } from '@tiptap/core'
+
+export interface DetailsSummaryOptions {
+  HTMLAttributes: {
+    [key: string]: any
+  },
+}
+
+export default Node.create({
+  name: 'detailsSummary',
+
+  content: 'inline*',
+
+  group: 'block',
+
+  defaultOptions: <DetailsSummaryOptions>{
+    HTMLAttributes: {},
+  },
+
+  parseHTML() {
+    return [{
+      tag: 'summary',
+    }]
+  },
+
+  renderHTML() {
+    return ['summary', 0]
+  },
+})

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

@@ -0,0 +1,51 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+
+export interface DetailsOptions {
+  HTMLAttributes: {
+    [key: string]: any
+  },
+}
+
+export default Node.create({
+  name: 'details',
+
+  content: 'detailsSummary block+',
+
+  group: 'block',
+
+  defaultOptions: <DetailsOptions>{
+    HTMLAttributes: {},
+  },
+
+  addAttributes() {
+    return {
+      open: {
+        default: true,
+        parseHTML: element => {
+          return {
+            open: element.hasAttribute('open'),
+          }
+        },
+        renderHTML: attributes => {
+          if (!attributes.open) {
+            return null
+          }
+
+          return {
+            open: '',
+          }
+        },
+      },
+    }
+  },
+
+  parseHTML() {
+    return [{
+      tag: 'details',
+    }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['details', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
+  },
+})

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

@@ -0,0 +1,58 @@
+<template>
+  <div v-if="editor">
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import {
+  Editor, EditorContent, defaultExtensions,
+} from '@tiptap/vue-starter-kit'
+import Details from './details'
+import DetailsSummary from './details-summary'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        ...defaultExtensions(),
+        Details,
+        DetailsSummary,
+      ],
+      content: `
+        <p>Here is a details list:</p>
+        <details open>
+          <summary>An open details tag</summary>
+          <p>More info about the details.</p>
+        </details>
+        <details>
+          <summary>A closed details tag</summary>
+          <p>More info about the details.</p>
+        </details>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+</style>

docs/src/docPages/experiments.md

@@ -9,6 +9,7 @@ Congratulations! You’ve found our playground with a list of experiments. Be aw
 * [Commands](/experiments/commands)
 * [Embeds](/experiments/embeds)
 * [Multiple editors](/experiments/multiple-editors)
+* [Details](/experiments/details)
 
 ## Waiting for approval
 * [@tiptap/extension-placeholder](/experiments/placeholder)

docs/src/docPages/experiments/details.md

@@ -0,0 +1,5 @@
+# Details
+
+⚠️ Experiment
+
+<demo name="Experiments/Details" />