From 8c3b35d0c0a6653657e3387026437408d6d18e95 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Wed, 10 Feb 2021 15:48:20 +0100
Subject: [PATCH] add details experiment

---
 .../Experiments/Details/details-summary.ts    | 29 ++++++++++
 docs/src/demos/Experiments/Details/details.ts | 51 ++++++++++++++++
 docs/src/demos/Experiments/Details/index.vue  | 58 +++++++++++++++++++
 docs/src/docPages/experiments.md              |  1 +
 docs/src/docPages/experiments/details.md      |  5 ++
 5 files changed, 144 insertions(+)
 create mode 100644 docs/src/demos/Experiments/Details/details-summary.ts
 create mode 100644 docs/src/demos/Experiments/Details/details.ts
 create mode 100644 docs/src/demos/Experiments/Details/index.vue
 create mode 100644 docs/src/docPages/experiments/details.md

diff --git a/docs/src/demos/Experiments/Details/details-summary.ts b/docs/src/demos/Experiments/Details/details-summary.ts
new file mode 100644
index 00000000..1a09a091
--- /dev/null
+++ b/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]
+  },
+})
diff --git a/docs/src/demos/Experiments/Details/details.ts b/docs/src/demos/Experiments/Details/details.ts
new file mode 100644
index 00000000..9627db1e
--- /dev/null
+++ b/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]
+  },
+})
diff --git a/docs/src/demos/Experiments/Details/index.vue b/docs/src/demos/Experiments/Details/index.vue
new file mode 100644
index 00000000..37044446
--- /dev/null
+++ b/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>
diff --git a/docs/src/docPages/experiments.md b/docs/src/docPages/experiments.md
index 58c82a69..b19be942 100644
--- a/docs/src/docPages/experiments.md
+++ b/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)
diff --git a/docs/src/docPages/experiments/details.md b/docs/src/docPages/experiments/details.md
new file mode 100644
index 00000000..d0edff0a
--- /dev/null
+++ b/docs/src/docPages/experiments/details.md
@@ -0,0 +1,5 @@
+# Details
+
+⚠️ Experiment
+
+<demo name="Experiments/Details" />