Merge branch 'main' of https://github.com/ueberdosis/tiptap-next into feature/remove-inferred-commands

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,103 @@
+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: 'open',
+          }
+        },
+      },
+    }
+  },
+
+  parseHTML() {
+    return [{
+      tag: 'details',
+    }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['details', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
+  },
+
+  addNodeView() {
+    return ({
+      node,
+      HTMLAttributes,
+      getPos,
+      editor,
+    }) => {
+      const { view } = editor
+      const item = document.createElement('details')
+
+      item.addEventListener('click', event => {
+        // @ts-ignore
+        const { open } = event.target.parentElement as HTMLElement
+        // @ts-ignore
+        const { localName } = event.target
+
+        if (typeof getPos === 'function' && localName === 'summary') {
+          view.dispatch(view.state.tr.setNodeMarkup(getPos(), undefined, {
+            open: !open,
+          }))
+          editor.commands.focus()
+        }
+      })
+
+      if (node.attrs.open) {
+        item.setAttribute('open', 'open')
+      }
+
+      Object.entries(HTMLAttributes).forEach(([key, value]) => {
+        item.setAttribute(key, value)
+      })
+
+      return {
+        dom: item,
+        contentDOM: item,
+        update: updatedNode => {
+          if (updatedNode.type !== this.type) {
+            return false
+          }
+
+          if (updatedNode.attrs.open) {
+            item.setAttribute('open', 'open')
+          } else {
+            item.removeAttribute('open')
+          }
+
+          return true
+        },
+      }
+    }
+  },
+})

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>