From 45173eb67dd4511097efa9f3c7fc167d054bbfe5 Mon Sep 17 00:00:00 2001
From: Davide Bizzi <davide.bizzi@unguess.io>
Date: Tue, 22 Oct 2024 15:12:52 +0200
Subject: [PATCH] rework: Don't use wordwrapper

---
 .../transcript/extensions/theme/index.tsx     |  6 ----
 .../transcript/nodes/word/Component.tsx       | 22 ------------
 src/stories/transcript/nodes/word/index.tsx   | 35 ++++++++++++++-----
 3 files changed, 27 insertions(+), 36 deletions(-)
 delete mode 100644 src/stories/transcript/nodes/word/Component.tsx

diff --git a/src/stories/transcript/extensions/theme/index.tsx b/src/stories/transcript/extensions/theme/index.tsx
index ee22c23f..29b58b9e 100644
--- a/src/stories/transcript/extensions/theme/index.tsx
+++ b/src/stories/transcript/extensions/theme/index.tsx
@@ -7,10 +7,6 @@ const DefaultActiveWrapper = ({ children }: { children: ReactNode }) => {
   return <span style={{ background: "#ff0000" }}>{children}</span>;
 };
 
-const DefaultWordWrapper = ({ children }: { children: ReactNode }) => {
-  return <span>{children}</span>;
-};
-
 const DefaultObservationWrapper = ({
   title,
   color,
@@ -145,7 +141,6 @@ const SearchStyleWrapper = styled.span`
 
 export interface ThemeOptions {
   activeWrapper: typeof DefaultActiveWrapper;
-  wordWrapper: typeof DefaultWordWrapper;
   observationWrapper: typeof DefaultObservationWrapper;
   paragraphWrapper: typeof DefaultParagraphWrapper;
   speakerWrapper: typeof DefaultSpeakerWrapper;
@@ -176,7 +171,6 @@ export const Theme = Extension.create<ThemeOptions, {}>({
   addOptions() {
     return {
       activeWrapper: DefaultActiveWrapper,
-      wordWrapper: DefaultWordWrapper,
       observationWrapper: DefaultObservationWrapper,
       paragraphWrapper: DefaultParagraphWrapper,
       speakerWrapper: DefaultSpeakerWrapper,
diff --git a/src/stories/transcript/nodes/word/Component.tsx b/src/stories/transcript/nodes/word/Component.tsx
deleted file mode 100644
index 3af20610..00000000
--- a/src/stories/transcript/nodes/word/Component.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Node } from "@tiptap/pm/model";
-import { Editor, NodeViewContent, NodeViewWrapper } from "@tiptap/react";
-import { getTheme } from "../../extensions/theme";
-
-export const Component = ({ node, editor }: { node: Node; editor: Editor }) => {
-  const themeExtension = getTheme(editor);
-
-  const WordWrapper = themeExtension.options.wordWrapper;
-  return (
-    <NodeViewWrapper {...node.attrs} as="div" style={{ display: "inline" }}>
-      <WordWrapper>
-        <span
-          onClick={() => {
-            editor.commands.setCurrentTime(node.attrs["data-start"]);
-          }}
-        >
-          <NodeViewContent as="span" className="content is-editable" />
-        </span>
-      </WordWrapper>
-    </NodeViewWrapper>
-  );
-};
diff --git a/src/stories/transcript/nodes/word/index.tsx b/src/stories/transcript/nodes/word/index.tsx
index 27a0ddac..b316843e 100644
--- a/src/stories/transcript/nodes/word/index.tsx
+++ b/src/stories/transcript/nodes/word/index.tsx
@@ -1,6 +1,5 @@
 import { Node } from "@tiptap/core";
-import { ReactNodeViewRenderer } from "@tiptap/react";
-import { Component } from "./Component";
+import { Plugin } from "@tiptap/pm/state";
 
 export const Word = Node.create({
   name: "Word",
@@ -20,13 +19,13 @@ export const Word = Node.create({
   parseHTML() {
     return [
       {
-        tag: "span[data-start][data-end]",
+        tag: "word[data-start][data-end]",
       },
     ];
   },
   renderHTML({ node }) {
     return [
-      "span",
+      "word",
       {
         "data-start": node.attrs["data-start"],
         "data-end": node.attrs["data-end"],
@@ -36,9 +35,29 @@ export const Word = Node.create({
     ];
   },
 
-  addNodeView() {
-    return ReactNodeViewRenderer(Component, {
-      as: "span",
-    });
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        props: {
+          handleDOMEvents: {
+            click: (view, event) => {
+              const { target } = event;
+              if (
+                target instanceof HTMLElement &&
+                target.getAttribute("data-start")
+              ) {
+                const dataStart = target.getAttribute("data-start");
+
+                if (!dataStart) return false;
+
+                this.editor.commands.setCurrentTime(Number(dataStart));
+                return true;
+              }
+              return false;
+            },
+          },
+        },
+      }),
+    ];
   },
 });