Merge branch 'main' of github.com:ueberdosis/tiptap

# Bitte geben Sie eine Commit-Beschreibung ein, um zu erklären, warum dieser
# Merge erforderlich ist, insbesondere wenn es einen aktualisierten
# Upstream-Branch mit einem Thema-Branch zusammenführt.
#
# Zeilen, die mit '#' beginnen, werden ignoriert,
# und eine leere Beschreibung bricht den Commit ab.

docs/src/demos/Experiments/Figure/figure.ts

@@ -2,6 +2,7 @@ import {
   Command,
   Node,
   nodeInputRule,
+  mergeAttributes,
 } from '@tiptap/core'
 
 export interface FigureOptions {
@@ -35,6 +36,8 @@ export const Figure = Node.create<FigureOptions>({
 
   draggable: true,
 
+  isolating: true,
+
   addAttributes() {
     return {
       src: {
@@ -76,7 +79,7 @@ export const Figure = Node.create<FigureOptions>({
   renderHTML({ HTMLAttributes }) {
     return [
       'figure', this.options.HTMLAttributes,
-      ['img', HTMLAttributes],
+      ['img', mergeAttributes(HTMLAttributes, { draggable: false, contenteditable: false })],
       ['figcaption', 0],
     ]
   },

docs/src/demos/Experiments/Nested/CustomNode.js

@@ -0,0 +1,80 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-2'
+import { Plugin } from 'prosemirror-state'
+
+import CustomNodeView from './CustomNode.vue'
+
+export default Node.create({
+  name: 'customNode',
+  isBlock: true,
+  inline: false,
+  group: 'block',
+  draggable: true,
+  isolating: true,
+  defining: true,
+  selectable: true,
+
+  addAttributes() {
+    return {
+      nest: { default: false },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'custom-node',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['custom-node', mergeAttributes(HTMLAttributes)]
+  },
+
+  addNodeView() {
+    return VueNodeViewRenderer(CustomNodeView)
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        props: {
+          handleKeyDown: (view, event) => {
+            // Prevent _any_ key from clearing block. As soon as you start typing,
+            // and a block is focused, it'll blast the block away.
+            view.state.typing = true
+          },
+
+          handlePaste: (view, event, slice) => {
+            // Prevent pasting overwriting block
+            view.state.pasting = true
+          },
+        },
+
+        filterTransaction: (transaction, state) => {
+          let result = true
+
+          // Check if our flags are set, and if the selected node is a custom node
+          if (state.typing || state.pasting) {
+            transaction.mapping.maps.forEach(map => {
+              map.forEach((oldStart, oldEnd, newStart, newEnd) => {
+                state.doc.nodesBetween(
+                  oldStart,
+                  oldEnd,
+                  (node, number, pos, parent, index) => {
+                    if (node.type.name === 'customNode') {
+                      result = false
+                    }
+                  },
+                )
+              })
+            })
+          }
+
+          return result
+        },
+      }),
+    ]
+  },
+})

docs/src/demos/Experiments/Nested/CustomNode.vue

@@ -0,0 +1,106 @@
+<template>
+  <node-view-wrapper class="draggable-item" :class="{ active: selected }">
+    <div
+      class="drag-handle"
+      contenteditable="false"
+      draggable="true"
+      data-drag-handle
+    />
+    <div class="draggable-nested">
+      <tiptap-nested />
+    </div>
+  </node-view-wrapper>
+</template>
+
+<script>
+import { NodeViewWrapper } from '@tiptap/vue-2'
+import TiptapNested from './Nested.vue'
+
+export default {
+  name: 'CustomNode',
+
+  components: {
+    NodeViewWrapper,
+    TiptapNested,
+  },
+
+  props: {
+    editor: {
+      type: Object,
+      default: () => {},
+    },
+
+    node: {
+      type: Object,
+      default: () => {},
+    },
+
+    decorations: {
+      type: Array,
+      default: () => [],
+    },
+
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+
+    extension: {
+      type: Object,
+      default: () => {},
+    },
+
+    getPos: {
+      type: Function,
+      default: () => {},
+    },
+
+    updateAttributes: {
+      type: Function,
+      default: () => {},
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.draggable-item {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0.5rem;
+  margin: 0.5rem 0;
+  border-radius: 0.5rem;
+  background: white;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.1);
+
+  &.active {
+    border: 1px red solid;
+  }
+
+  input {
+    margin: 0 0 0.5rem 0;
+  }
+
+  .drag-handle {
+    flex: 0 0 auto;
+    position: relative;
+    width: 1rem;
+    height: 1rem;
+    top: 0.3rem;
+    margin-right: 0.5rem;
+    cursor: grab;
+    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 16"><path fill-opacity="0.2" d="M4 14c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zM2 6C.9 6 0 6.9 0 8s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6C.9 0 0 .9 0 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /></svg>');
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+  }
+
+  .content {
+    flex: 1 1 auto;
+  }
+}
+
+.draggable-nested {
+  flex: 1
+}
+</style>

docs/src/demos/Experiments/Nested/Nested.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="editor-nested" v-if="editor">
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-2'
+import StarterKit from '@tiptap/starter-kit'
+import CustomNode from './CustomNode.js'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      content: `
+      Nested intro text`,
+      extensions: [StarterKit, CustomNode],
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style>
+.editor-nested {
+  padding: 10px;
+  border: 1px gray solid;
+}
+.ProseMirror {
+  outline: none;
+}
+</style>

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

@@ -0,0 +1,49 @@
+<template>
+  <div class="editor" v-if="editor">
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-2'
+import StarterKit from '@tiptap/starter-kit'
+import CustomNode from './CustomNode.js'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      content: 'Testing<custom-node></custom-node>Text',
+      extensions: [StarterKit, CustomNode],
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style>
+p {
+  margin: 0;
+}
+
+.editor {
+  padding: 10px;
+  border: 1px gray solid;
+}
+
+.ProseMirror {
+  outline: none;
+}
+</style>

docs/src/docPages/api/commands/set-meta.md

@@ -0,0 +1,21 @@
+# setMeta
+Store a metadata property in the current transaction.
+
+## Parameters
+`key: string`
+
+The name of your metadata. You can get its value at any time with [getMeta](https://prosemirror.net/docs/ref/#state.Transaction.getMeta).
+
+`value: any`
+
+Store any value within your metadata.
+
+## Usage
+```js
+// Prevent the update event from being triggered
+editor.commands.setMeta('preventUpdate', true)
+
+// Store any value in the current transaction.
+// You can get this value at any time with tr.getMeta('foo').
+editor.commands.setMeta('foo', 'bar')
+```

docs/src/docPages/experiments/figure.md

@@ -2,9 +2,6 @@
 
 ⚠️ Experiment
 
-## Known issues
-* Dragging should move the image, but duplicates it
-
 ## Tasks
 * Add the caption as an optional parameter to the command
 * Build commands to wrap an image into a figure + figcaption?

docs/src/links.yaml

@@ -206,6 +206,8 @@
         - title: setMark
           link: /api/commands/set-mark
           type: draft
+        - title: setMeta
+          link: /api/commands/set-meta
         - title: setNode
           link: /api/commands/set-node
           type: draft