rework: Don't use wordwrapper

AppQuality · Oct 22, 2024 · 45173eb · 45173eb
1 parent 4a88749
commit 45173eb
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 36 deletions.
diff --git 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
diff --git 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;
+            },
+          },
+        },
+      }),
+    ];
   },
 });