From 563f37d74b5385290244b92828fa78142a0ec071 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 19 Jan 2021 20:27:51 +0100
Subject: [PATCH] fix copying mentions as plain text

---
 docs/src/demos/Examples/Drawing/Paper.js      |  4 +-
 .../NodeViews/DragHandle/DraggableItem.js     |  4 +-
 .../TableOfContents/TableOfContents.js        |  4 +-
 docs/src/docPages/guide/node-views.md         |  6 +-
 packages/core/src/Editor.ts                   |  2 +-
 packages/core/src/ExtensionManager.ts         | 26 ++++++--
 packages/core/src/Node.ts                     | 15 +++++
 .../src/extensions/clipboardTextSerializer.ts | 60 +++++++++++++++++++
 packages/core/src/extensions/index.ts         |  1 +
 packages/extension-mention/src/mention.ts     |  4 ++
 .../suggestion/src/findSuggestionMatch.ts     |  5 +-
 11 files changed, 116 insertions(+), 15 deletions(-)
 create mode 100644 packages/core/src/extensions/clipboardTextSerializer.ts

diff --git a/docs/src/demos/Examples/Drawing/Paper.js b/docs/src/demos/Examples/Drawing/Paper.js
index 71eab1c3..844459bf 100644
--- a/docs/src/demos/Examples/Drawing/Paper.js
+++ b/docs/src/demos/Examples/Drawing/Paper.js
@@ -1,5 +1,5 @@
 import { Node, mergeAttributes } from '@tiptap/core'
-import { VueRenderer } from '@tiptap/vue'
+import { VueNodeViewRenderer } from '@tiptap/vue'
 import Component from './Component.vue'
 
 export default Node.create({
@@ -30,6 +30,6 @@ export default Node.create({
   },
 
   addNodeView() {
-    return VueRenderer(Component)
+    return VueNodeViewRenderer(Component)
   },
 })
diff --git a/docs/src/demos/Guide/NodeViews/DragHandle/DraggableItem.js b/docs/src/demos/Guide/NodeViews/DragHandle/DraggableItem.js
index 025cc9be..910c0b2d 100644
--- a/docs/src/demos/Guide/NodeViews/DragHandle/DraggableItem.js
+++ b/docs/src/demos/Guide/NodeViews/DragHandle/DraggableItem.js
@@ -1,5 +1,5 @@
 import { Node, mergeAttributes } from '@tiptap/core'
-import { VueRenderer } from '@tiptap/vue'
+import { VueNodeViewRenderer } from '@tiptap/vue'
 import Component from './Component.vue'
 
 export default Node.create({
@@ -24,6 +24,6 @@ export default Node.create({
   },
 
   addNodeView() {
-    return VueRenderer(Component)
+    return VueNodeViewRenderer(Component)
   },
 })
diff --git a/docs/src/demos/Guide/NodeViews/TableOfContents/TableOfContents.js b/docs/src/demos/Guide/NodeViews/TableOfContents/TableOfContents.js
index a52a6571..7c0e6092 100644
--- a/docs/src/demos/Guide/NodeViews/TableOfContents/TableOfContents.js
+++ b/docs/src/demos/Guide/NodeViews/TableOfContents/TableOfContents.js
@@ -1,5 +1,5 @@
 import { Node, mergeAttributes } from '@tiptap/core'
-import { VueRenderer } from '@tiptap/vue'
+import { VueNodeViewRenderer } from '@tiptap/vue'
 import Component from './Component.vue'
 
 export default Node.create({
@@ -22,6 +22,6 @@ export default Node.create({
   },
 
   addNodeView() {
-    return VueRenderer(Component)
+    return VueNodeViewRenderer(Component)
   },
 })
diff --git a/docs/src/docPages/guide/node-views.md b/docs/src/docPages/guide/node-views.md
index 0d6002c7..e6fb1ee1 100644
--- a/docs/src/docPages/guide/node-views.md
+++ b/docs/src/docPages/guide/node-views.md
@@ -7,7 +7,7 @@ Node views are the best thing since sliced bread, at least if you’re a fan of
 
 <!-- ```js
 import { Node } from '@tiptap/core'
-import { VueRenderer } from '@tiptap/vue'
+import { VueNodeViewRenderer } from '@tiptap/vue'
 import Component from './Component.vue'
 
 export default Node.create({
@@ -83,12 +83,12 @@ https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-item
 
 ```js
 import { Node } from '@tiptap/core'
-import { VueRenderer } from '@tiptap/vue'
+import { VueNodeViewRenderer } from '@tiptap/vue'
 import Component from './Component.vue'
 
 export default Node.create({
   addNodeView() {
-    return VueRenderer(Component)
+    return VueNodeViewRenderer(Component)
   },
 })
 ```
diff --git a/packages/core/src/Editor.ts b/packages/core/src/Editor.ts
index c1f0ba65..0ee0bc36 100644
--- a/packages/core/src/Editor.ts
+++ b/packages/core/src/Editor.ts
@@ -29,7 +29,7 @@ export class Editor extends EventEmitter {
 
   private commandManager!: CommandManager
 
-  private extensionManager!: ExtensionManager
+  public extensionManager!: ExtensionManager
 
   private css!: HTMLStyleElement
 
diff --git a/packages/core/src/ExtensionManager.ts b/packages/core/src/ExtensionManager.ts
index 9c7cfbb4..82c32088 100644
--- a/packages/core/src/ExtensionManager.ts
+++ b/packages/core/src/ExtensionManager.ts
@@ -6,6 +6,7 @@ import { Editor } from './Editor'
 import { Extensions, NodeViewRenderer } from './types'
 import getSchema from './helpers/getSchema'
 import getSchemaTypeByName from './helpers/getSchemaTypeByName'
+import getNodeType from './helpers/getNodeType'
 import splitExtensions from './helpers/splitExtensions'
 import getAttributesFromExtensions from './helpers/getAttributesFromExtensions'
 import getRenderedAttributes from './helpers/getRenderedAttributes'
@@ -145,11 +146,9 @@ export default class ExtensionManager {
         const context = {
           options: extension.options,
           editor,
-          type: getSchemaTypeByName(extension.config.name, this.schema),
+          type: getNodeType(extension.config.name, this.schema),
         }
-
-        // @ts-ignore
-        const renderer = extension.config.addNodeView?.bind(context)?.() as NodeViewRenderer
+        const renderer = extension.config.addNodeView?.call(context) as NodeViewRenderer
 
         const nodeview = (
           node: ProsemirrorNode,
@@ -173,4 +172,23 @@ export default class ExtensionManager {
       }))
   }
 
+  get textSerializers() {
+    const { editor } = this
+    const { nodeExtensions } = splitExtensions(this.extensions)
+
+    return Object.fromEntries(nodeExtensions
+      .filter(extension => !!extension.config.renderText)
+      .map(extension => {
+        const context = {
+          options: extension.options,
+          editor,
+          type: getNodeType(extension.config.name, this.schema),
+        }
+
+        const textSerializer = (props: { node: ProsemirrorNode }) => extension.config.renderText?.call(context, props)
+
+        return [extension.config.name, textSerializer]
+      }))
+  }
+
 }
diff --git a/packages/core/src/Node.ts b/packages/core/src/Node.ts
index 802eb41a..44accd6b 100644
--- a/packages/core/src/Node.ts
+++ b/packages/core/src/Node.ts
@@ -88,6 +88,20 @@ export interface NodeConfig<Options = any, Commands = {}> extends Overwrite<Exte
     }
   ) => DOMOutputSpec) | null,
 
+  /**
+   * Render Text
+   */
+  renderText?: ((
+    this: {
+      options: Options,
+      editor: Editor,
+      type: NodeType,
+    },
+    props: {
+      node: ProseMirrorNode,
+    }
+  ) => string) | null,
+
   /**
    * Add Attributes
    */
@@ -257,6 +271,7 @@ export class Node<Options = any, Commands = {}> {
     isolating: null,
     parseHTML: () => null,
     renderHTML: null,
+    renderText: null,
     addAttributes: () => ({}),
     addNodeView: null,
     onCreate: null,
diff --git a/packages/core/src/extensions/clipboardTextSerializer.ts b/packages/core/src/extensions/clipboardTextSerializer.ts
new file mode 100644
index 00000000..b6bb56be
--- /dev/null
+++ b/packages/core/src/extensions/clipboardTextSerializer.ts
@@ -0,0 +1,60 @@
+import { Editor } from '@tiptap/core'
+import { Plugin, PluginKey } from 'prosemirror-state'
+import { Extension } from '../Extension'
+
+const textBetween = (
+  editor: Editor,
+  from: number,
+  to: number,
+  blockSeparator?: string,
+  leafText?: string,
+): string => {
+  let text = ''
+  let separated = true
+
+  editor.state.doc.nodesBetween(from, to, (node, pos) => {
+    const textSerializer = editor.extensionManager.textSerializers[node.type.name]
+
+    if (textSerializer) {
+      text += textSerializer({ node })
+      separated = !blockSeparator
+    } else if (node.isText) {
+      text += node?.text?.slice(Math.max(from, pos) - pos, to - pos)
+      separated = !blockSeparator
+    } else if (node.isLeaf && leafText) {
+      text += leafText
+      separated = !blockSeparator
+    } else if (!separated && node.isBlock) {
+      text += blockSeparator
+      separated = true
+    }
+  }, 0)
+
+  return text
+}
+
+export const ClipboardTextSerializer = Extension.create({
+  name: 'editable',
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('clipboardTextSerializer'),
+        props: {
+          clipboardTextSerializer: () => {
+            const { editor } = this
+            const { from, to } = editor.state.selection
+
+            return textBetween(editor, from, to, '\n')
+          },
+        },
+      }),
+    ]
+  },
+})
+
+declare module '@tiptap/core' {
+  interface AllExtensions {
+    ClipboardTextSerializer: typeof ClipboardTextSerializer,
+  }
+}
diff --git a/packages/core/src/extensions/index.ts b/packages/core/src/extensions/index.ts
index e9c6a76d..66302f22 100644
--- a/packages/core/src/extensions/index.ts
+++ b/packages/core/src/extensions/index.ts
@@ -1,3 +1,4 @@
+export { ClipboardTextSerializer } from './clipboardTextSerializer'
 export { Commands } from './commands'
 export { Editable } from './editable'
 export { FocusEvents } from './focusEvents'
diff --git a/packages/extension-mention/src/mention.ts b/packages/extension-mention/src/mention.ts
index 17e66e28..921b4a94 100644
--- a/packages/extension-mention/src/mention.ts
+++ b/packages/extension-mention/src/mention.ts
@@ -60,6 +60,10 @@ export const Mention = Node.create({
     return ['span', HTMLAttributes, `@${node.attrs.id}`]
   },
 
+  renderText({ node }) {
+    return `@${node.attrs.id}`
+  },
+
   addProseMirrorPlugins() {
     return [
       Suggestion({
diff --git a/packages/suggestion/src/findSuggestionMatch.ts b/packages/suggestion/src/findSuggestionMatch.ts
index 35dac99f..e548a700 100644
--- a/packages/suggestion/src/findSuggestionMatch.ts
+++ b/packages/suggestion/src/findSuggestionMatch.ts
@@ -16,7 +16,10 @@ export type SuggestionMatch = {
 
 export function findSuggestionMatch(config: Trigger): SuggestionMatch {
   const {
-    char, allowSpaces, startOfLine, $position,
+    char,
+    allowSpaces,
+    startOfLine,
+    $position,
   } = config
 
   // cancel if top level node