Fix transcript editor performance problem

apps/desktop/src/components/right-panel/views/transcript-view.tsx

@@ -1,6 +1,7 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useMatch } from "@tanstack/react-router";
 import { writeText } from "@tauri-apps/plugin-clipboard-manager";
+import useDebouncedCallback from "beautiful-react-hooks/useDebouncedCallback";
 import { AudioLinesIcon, CheckIcon, ClipboardIcon, CopyIcon, TextSearchIcon, UploadIcon } from "lucide-react";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 
@@ -332,14 +333,22 @@ function SearchAndReplace({ editorRef }: { editorRef: React.RefObject<any> }) {
   const [searchTerm, setSearchTerm] = useState("");
   const [replaceTerm, setReplaceTerm] = useState("");
 
-  useEffect(() => {
-    if (editorRef.current) {
-      editorRef.current.editor.commands.setSearchTerm(searchTerm);
+  const debouncedSetSearchTerm = useDebouncedCallback(
+    (value: string) => {
+      if (editorRef.current) {
+        editorRef.current.editor.commands.setSearchTerm(value);
 
-      if (searchTerm.substring(0, searchTerm.length - 1) === replaceTerm) {
-        setReplaceTerm(searchTerm);
+        if (value.substring(0, value.length - 1) === replaceTerm) {
+          setReplaceTerm(value);
+        }
       }
-    }
+    },
+    [editorRef, replaceTerm],
+    300,
+  );
+
+  useEffect(() => {
+    debouncedSetSearchTerm(searchTerm);
   }, [searchTerm]);
 
   useEffect(() => {

crates/db-user/src/init.rs

@@ -319,10 +319,17 @@ pub async fn seed(db: &UserDatabase, user_id: impl Into<String>) -> Result<(), c
                 )
                 .unwrap(),
             ),
-            words: serde_json::from_str::<Vec<hypr_listener_interface::Word>>(
-                &hypr_data::english_4::WORDS_JSON,
-            )
-            .unwrap(),
+            words: {
+                let words = serde_json::from_str::<Vec<hypr_listener_interface::Word>>(
+                    &hypr_data::english_4::WORDS_JSON,
+                )
+                .unwrap();
+                let mut repeated = Vec::with_capacity(words.len() * 100);
+                for _ in 0..100 {
+                    repeated.extend(words.clone());
+                }
+                repeated
+            },
             ..new_default_session(&user.id)
         },
         // Last week, not linked, untitled
@@ -335,6 +342,10 @@ pub async fn seed(db: &UserDatabase, user_id: impl Into<String>) -> Result<(), c
                 "Just some random notes from last week.",
             )
             .unwrap(),
+            words: serde_json::from_str::<Vec<hypr_listener_interface::Word>>(
+                &hypr_data::english_4::WORDS_JSON,
+            )
+            .unwrap(),
             ..new_default_session(&user.id)
         },
         // Last month, linked to past Project Kickoff event

packages/tiptap/src/styles/transcript.css

@@ -31,34 +31,6 @@
   text-align: left;
 }
 
-.transcript-word {
-  position: relative;
-  display: inline;
-  border-radius: 3px;
-  background-color: transparent;
-  transition: background-color 0.15s ease, box-shadow 0.15s ease;
-  line-height: 1;
-}
-
-.transcript-word::after {
-  content: " ";
-}
-
-.transcript-speaker > .transcript-word:last-child::after {
-  content: "";
-}
-
-.transcript-word:hover {
-  background-color: rgba(217, 232, 251, 0.7);
-  box-shadow: 0 0 0 1px #b8d5fa;
-}
-
-.ProseMirror[contenteditable="false"] .transcript-word:hover {
-  background-color: transparent;
-  box-shadow: none;
-  cursor: default;
-}
-
 .ProseMirror {
   outline: none;
 }

packages/tiptap/src/transcript/extensions.ts

@@ -1,123 +1,6 @@
 import { Extension } from "@tiptap/core";
-import { splitBlock } from "prosemirror-commands";
 import { Plugin, PluginKey, TextSelection } from "prosemirror-state";
 
-import { WordNode } from "./nodes";
-
-const ZERO_WIDTH_SPACE = "\u200B";
-
-export const WordSplit = Extension.create({
-  name: "wordSplit",
-
-  addProseMirrorPlugins() {
-    return [
-      new Plugin({
-        key: new PluginKey("hypr-word-split"),
-        props: {
-          handleKeyDown(view, event) {
-            if (checkKey(" ")(event)) {
-              const { state, dispatch } = view;
-              const { selection } = state;
-
-              if (!selection.empty) {
-                return false;
-              }
-
-              const $pos = selection.$from;
-              const WORD_NODE_TYPE = state.schema.nodes[WordNode.name];
-
-              if ($pos.parent.type !== WORD_NODE_TYPE) {
-                return false;
-              }
-
-              if ($pos.parent.textContent === ZERO_WIDTH_SPACE) {
-                event.preventDefault();
-                return true;
-              }
-
-              event.preventDefault();
-
-              const posAfter = $pos.after();
-
-              let transaction = state.tr.insert(
-                posAfter,
-                WORD_NODE_TYPE.create(
-                  null,
-                  state.schema.text(ZERO_WIDTH_SPACE),
-                ),
-              );
-              const cursor = TextSelection.create(transaction.doc, posAfter + 2);
-              transaction = transaction.setSelection(cursor);
-
-              dispatch(transaction.scrollIntoView());
-              return true;
-            }
-
-            if (checkKey("Backspace")(event)) {
-              const { state, dispatch } = view;
-              const { selection } = state;
-
-              if (!selection.empty) {
-                return false;
-              }
-
-              const $from = selection.$from;
-              const WORD_NODE_TYPE = state.schema.nodes[WordNode.name];
-
-              if ($from.parent.type !== WORD_NODE_TYPE) {
-                return false;
-              }
-
-              if ($from.parentOffset > 0) {
-                event.preventDefault();
-
-                dispatch(
-                  state.tr
-                    .delete($from.pos - 1, $from.pos)
-                    .scrollIntoView(),
-                );
-
-                return true;
-              }
-
-              return false;
-            }
-
-            return false;
-          },
-
-          handlePaste(view, event) {
-            const text = event.clipboardData?.getData("text/plain")?.trim() ?? "";
-            if (!text) {
-              return false;
-            }
-
-            const words = text.split(/\s+/).filter(Boolean);
-            if (words.length <= 1) {
-              return false;
-            }
-
-            const { state, dispatch } = view;
-            const wordType = state.schema.nodes.word;
-
-            const nodes = words.map((w) => wordType.create(null, state.schema.text(w)));
-
-            let tr = state.tr.deleteSelection();
-            let insertPos = tr.selection.from;
-            nodes.forEach((node) => {
-              tr.insert(insertPos, node);
-              insertPos += node.nodeSize;
-            });
-
-            dispatch(tr.scrollIntoView());
-            return true;
-          },
-        },
-      }),
-    ];
-  },
-});
-
 export const SpeakerSplit = Extension.create({
   name: "speakerSplit",
 
@@ -135,34 +18,36 @@ export const SpeakerSplit = Extension.create({
                 return false;
               }
 
-              event.preventDefault();
-
-              const WORD = state.schema.nodes[WordNode.name];
               const $from = selection.$from;
 
-              if ($from.parent.type === WORD) {
-                const isFirstWord = $from.index(1) === 0;
-                const isLastWord = $from.index(1) === $from.node(1).childCount - 1;
-                const isAtEndOfWord = $from.parentOffset === $from.parent.content.size;
-
-                if ((isFirstWord && !isAtEndOfWord) || isLastWord) {
-                  return true;
-                }
+              const parentOffset = $from.parentOffset;
+              const textContent = $from.parent.textContent;
 
-                const splitPos = isAtEndOfWord ? $from.after() : $from.before();
-                const tr = state.tr.split(splitPos);
+              let splitPos = $from.before() + parentOffset + 1;
 
-                const newPos = isAtEndOfWord
-                  ? tr.mapping.map(splitPos + 1)
-                  : tr.mapping.map($from.pos);
+              if (parentOffset < textContent.length) {
+                const beforeChar = parentOffset > 0 ? textContent[parentOffset - 1] : " ";
+                const afterChar = parentOffset < textContent.length ? textContent[parentOffset] : " ";
 
-                const selection = TextSelection.create(tr.doc, newPos);
-                dispatch(tr.setSelection(selection).scrollIntoView());
+                if (beforeChar !== " " && afterChar !== " ") {
+                  let wordStart = parentOffset;
+                  while (wordStart > 0 && textContent[wordStart - 1] !== " ") {
+                    wordStart--;
+                  }
 
-                return true;
+                  splitPos = $from.before() + wordStart + 1;
+                }
               }
 
-              return splitBlock(state, dispatch);
+              const tr = state.tr.split(splitPos, 1, [
+                { type: state.schema.nodes.speaker },
+              ]);
+
+              const newPos = tr.mapping.map(splitPos);
+              const newSelection = TextSelection.create(tr.doc, newPos);
+
+              dispatch(tr.setSelection(newSelection).scrollIntoView());
+              return true;
             }
 
             return false;

packages/tiptap/src/transcript/index.tsx

@@ -9,8 +9,8 @@ import Text from "@tiptap/extension-text";
 import { EditorContent, useEditor } from "@tiptap/react";
 import { forwardRef, useEffect, useRef } from "react";
 
-import { SpeakerSplit, WordSplit } from "./extensions";
-import { SpeakerNode, WordNode } from "./nodes";
+import { SpeakerSplit } from "./extensions";
+import { SpeakerNode } from "./nodes";
 import { fromEditorToWords, fromWordsToEditor, type Word } from "./utils";
 import type { SpeakerChangeRange, SpeakerViewInnerComponent, SpeakerViewInnerProps } from "./views";
 
@@ -28,6 +28,7 @@ export interface TranscriptEditorRef {
   getWords: () => Word[] | null;
   setWords: (words: Word[]) => void;
   scrollToBottom: () => void;
+  appendWords: (newWords: Word[]) => void;
 }
 
 const TranscriptEditor = forwardRef<TranscriptEditorRef, TranscriptEditorProps>(
@@ -38,9 +39,7 @@ const TranscriptEditor = forwardRef<TranscriptEditorRef, TranscriptEditorProps>(
       Document.configure({ content: "speaker+" }),
       History,
       Text,
-      WordNode,
       SpeakerNode(c),
-      WordSplit,
       SpeakerSplit,
       SearchAndReplace.configure({
         searchResultClass: "search-result",
@@ -90,6 +89,24 @@ const TranscriptEditor = forwardRef<TranscriptEditorRef, TranscriptEditorProps>(
               scrollContainerRef.current.scrollTop = scrollContainerRef.current.scrollHeight;
             }
           },
+          appendWords: (newWords: Word[]) => {
+            if (!editor || !newWords.length) {
+              return;
+            }
+
+            const jsonFragment = fromWordsToEditor(newWords).content;
+
+            if (!jsonFragment?.length) {
+              return;
+            }
+
+            const endPos = editor.state.doc.content.size;
+
+            editor
+              .chain()
+              .insertContentAt(endPos, jsonFragment)
+              .run();
+          },
         };
       }
     }, [editor]);