Highlight the last edited text

src/games/storywriter/assets/editor.module.css

@@ -75,6 +75,11 @@
     word-break: break-word;
 }
 
+.editable mark {
+    background: var(--bg-active);
+    color: inherit;
+}
+
 .tab {
     padding: 12px 16px;
     background: transparent;

src/games/storywriter/components/editor.tsx

@@ -50,9 +50,22 @@ export const Editor = () => {
         if (contentRef.current) {
             contentRef.current.scrollTop = contentRef.current.scrollHeight;
         }
-    }, [currentStory?.currentTab]);
+    }, [currentStory?.id, currentStory?.currentTab]);
+
+    const storyValue = useMemo(() => {
+        if (!currentStory) return '';
+
+        const { text, lastEditedText } = currentStory;
+        if (!lastEditedText) return highlight(text);
+
+        const idx = text.lastIndexOf(lastEditedText);
+        if (idx === -1) return highlight(text);
+
+        const marked = text.slice(0, idx) + '<mark>' + lastEditedText + '</mark>' + text.slice(idx + lastEditedText.length);
+        
+        return highlight(marked);
+    }, [currentStory?.text, currentStory?.lastEditedText]);
 
-    const storyValue = useMemo(() => currentStory ? highlight(currentStory.text) : '', [currentStory?.text]);
     const promptPreview = useMemo(() => {
         if (currentStory?.currentTab !== 'prompt') return '';
         const text = Prompt.formatSystemPrompt(appState);

src/games/storywriter/contexts/state.tsx

@@ -74,6 +74,7 @@ export interface Story {
     currentTab: Tab;
     chatMessages: ChatMessage[];
     chapters: Chapters.Chapter[];
+    lastEditedText?: string;
 }
 
 // ─── State ───────────────────────────────────────────────────────────────────
@@ -93,7 +94,7 @@ interface IState {
 type Action =
     | { type: 'CREATE_STORY'; title: string }
     | { type: 'RENAME_STORY'; id: string; title: string }
-    | { type: 'EDIT_STORY'; id: string; text: string }
+    | { type: 'EDIT_STORY'; id: string; text: string; highlightText?: string }
     | { type: 'EDIT_SCRATCHPAD'; id: string; text: string }
     | { type: 'ADD_LORE_ENTRY'; storyId: string; entry: LoreEntry }
     | { type: 'EDIT_LORE_ENTRY'; storyId: string; entryId: string; updates: Partial<LoreEntry> }
@@ -190,7 +191,9 @@ function reducer(state: IState, action: Action): IState {
             return {
                 ...state,
                 stories: state.stories.map(s =>
-                    s.id === action.id ? { ...s, text: action.text } : s
+                    s.id === action.id
+                        ? { ...s, text: action.text, lastEditedText: action.highlightText }
+                        : s
                 ),
             };
         }

src/games/storywriter/utils/tools.ts

@@ -342,7 +342,7 @@ export namespace Tools {
                 const dispatchEdit = (text: string) => appState.dispatch(
                     isScratchpad
                         ? { type: 'EDIT_SCRATCHPAD', id: appState.currentStory!.id, text }
-                        : { type: 'EDIT_STORY', id: appState.currentStory!.id, text }
+                        : { type: 'EDIT_STORY', id: appState.currentStory!.id, text, highlightText: args.new_text }
                 );
 
                 // Append mode: when old_text is not provided, append new_text