From df217dbd3d03e40266163bc17a0b55487e2fcdd4 Mon Sep 17 00:00:00 2001
From: anne-ds <anne.schumann@digitalservice.bund.de>
Date: Fri, 18 Oct 2024 18:07:44 +0200
Subject: [PATCH] Fix paste border number into border number

Is a first working draft, needs definetely refactoring!
RISDEV-5136
---
 frontend/src/components/input/TextEditor.vue |   2 +
 frontend/src/editor/EventHandler.ts          | 106 +++++++++++++++++++
 2 files changed, 108 insertions(+)
 create mode 100644 frontend/src/editor/EventHandler.ts

diff --git a/frontend/src/components/input/TextEditor.vue b/frontend/src/components/input/TextEditor.vue
index d738b9dc6..ecca8b210 100644
--- a/frontend/src/components/input/TextEditor.vue
+++ b/frontend/src/components/input/TextEditor.vue
@@ -31,6 +31,7 @@ import { CustomBulletList } from "@/editor/bulletList"
 import addBorderNumbers from "@/editor/commands/addBorderNumbers"
 import { handleSelection } from "@/editor/commands/handleSelection"
 import removeBorderNumbers from "@/editor/commands/removeBorderNumbers"
+import { EventHandler } from "@/editor/EventHandler"
 import { FontSize } from "@/editor/fontSize"
 import { CustomImage } from "@/editor/image"
 import { Indent } from "@/editor/indent"
@@ -110,6 +111,7 @@ const editor = new Editor({
     BorderNumberLink,
     Bold,
     Color,
+    EventHandler,
     FontSize,
     Italic,
     CustomListItem,
diff --git a/frontend/src/editor/EventHandler.ts b/frontend/src/editor/EventHandler.ts
new file mode 100644
index 000000000..e62cfa5de
--- /dev/null
+++ b/frontend/src/editor/EventHandler.ts
@@ -0,0 +1,106 @@
+import { Extension } from "@tiptap/core"
+import { Plugin, PluginKey } from "@tiptap/pm/state"
+
+export const EventHandler = Extension.create({
+  name: "eventHandler",
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey("eventHandler"),
+        props: {
+          handlePaste: (view, event) => {
+            const { state } = view
+            const { selection } = state
+            const { from } = selection
+            const $from = state.doc.resolve(from)
+
+            const parent = $from.node($from.depth - 1)
+            const schema = state.schema
+            const borderNumberContentNodeType = schema.nodes.borderNumberContent
+
+            if (parent.type !== borderNumberContentNodeType) {
+              return false
+            }
+
+            const clipboardData = event.clipboardData
+            const pastedHTML = clipboardData?.getData("text/html")
+
+            if (pastedHTML) {
+              const parser = new DOMParser()
+              const doc = parser.parseFromString(pastedHTML, "text/html")
+
+              const borderNumberElements = doc.querySelectorAll("border-number")
+              if (borderNumberElements.length > 0) {
+                const borderNumberContentElements =
+                  doc.querySelectorAll("content")
+
+                if (borderNumberContentElements.length > 0) {
+                  Array.from(borderNumberContentElements)
+                    .reverse()
+                    .forEach((contentNode) => {
+                      this.editor.commands.insertContentAt(
+                        from,
+                        contentNode.outerHTML,
+                      )
+                    })
+
+                  return true
+                }
+
+                return false
+              }
+              return false
+            }
+            return false
+          },
+          handleDrop: (view, event) => {
+            const { state } = view
+            const { selection } = state
+            const { from } = selection
+            const $from = state.doc.resolve(from)
+
+            const parent = $from.node($from.depth - 1)
+            const schema = state.schema
+            const borderNumberContentNodeType = schema.nodes.borderNumberContent
+
+            if (parent.type !== borderNumberContentNodeType) {
+              return false
+            }
+
+            const dataTransfer = event.dataTransfer
+            const draggedHTML = dataTransfer?.getData("text/html")
+
+            if (draggedHTML) {
+              const parser = new DOMParser()
+              const doc = parser.parseFromString(draggedHTML, "text/html")
+
+              const borderNumberElements = doc.querySelectorAll("border-number")
+              if (borderNumberElements.length > 0) {
+                const borderNumberContentElements =
+                  doc.querySelectorAll("content")
+
+                if (borderNumberContentElements.length > 0) {
+                  Array.from(borderNumberContentElements)
+                    .reverse()
+                    .forEach((contentNode) => {
+                      this.editor.commands.insertContentAt(
+                        from,
+                        contentNode.outerHTML,
+                      )
+                    })
+
+                  return true
+                }
+
+                return false
+              }
+              return false
+            }
+            return false
+          },
+        },
+      }),
+    ]
+  },
+})