add text highlight

src/components/editor/ScriptEditor/index.tsx

@@ -10,11 +10,12 @@ import { useTheme } from "@/controllers/ui/useTheme"
 import { themes } from "@/controllers/ui/theme"
 
 import "./styles.css"
+import { ClapSegmentCategory } from "@aitube/clap"
 
 export function ScriptEditor() {
 
-  const editor = useEditor(s => s.editor)
-  const setEditor = useEditor(s => s.setEditor)
+  const standaloneCodeEditor = useEditor(s => s.standaloneCodeEditor)
+  const setStandaloneCodeEditor = useEditor(s => s.setStandaloneCodeEditor)
   const draft = useEditor(s => s.draft)
   const setDraft = useEditor(s => s.setDraft)
   const loadDraftFromClap = useEditor(s => s.loadDraftFromClap)
@@ -38,14 +39,14 @@ export function ScriptEditor() {
   )
 
   useEffect(() => {
-    if (!editor) { return }
+    if (!standaloneCodeEditor) { return }
     // let's do something basic for now: we disable the
     // timeline-to-editor scroll sync when the user is
     // hovering the editor
     if (useEditor.getState().mouseIsInside) { return }
 
-     if (horizontalTimelineRatio !== editor.getScrollTop()) {
-      editor.setScrollPosition({ scrollTop: horizontalTimelineRatio })
+     if (horizontalTimelineRatio !== standaloneCodeEditor.getScrollTop()) {
+      standaloneCodeEditor.setScrollPosition({ scrollTop: horizontalTimelineRatio })
     }
     // various things we can do here!
     // move the scroll:
@@ -63,27 +64,29 @@ export function ScriptEditor() {
     // => I think we should restore the "follow cursor during playback"
     // feature, because this is doable.
 
-  }, [editor, horizontalTimelineRatio])
+  }, [standaloneCodeEditor, horizontalTimelineRatio])
 
-  const onMount = (editor: MonacoEditor.editor.IStandaloneCodeEditor) => {
-    const model = editor.getModel()
-    if (!model) { return }
+  const onMount = (codeEditor: MonacoEditor.editor.IStandaloneCodeEditor) => {
+    const { textModel } = useEditor.getState()
+    if (!textModel) { return }
 
-    setEditor(editor)
+    codeEditor.setModel(textModel)
+    
+    setStandaloneCodeEditor(codeEditor)
 
-    editor.onMouseDown((e) => {
-      jumpCursorOnLineClick(editor.getPosition()?.lineNumber)
+    codeEditor.onMouseDown((e) => {
+      jumpCursorOnLineClick(codeEditor.getPosition()?.lineNumber)
     })
 
-    editor.onDidScrollChange(({ scrollTop, scrollLeft, scrollWidth, scrollHeight }: MonacoEditor.IScrollEvent) => {
+    codeEditor.onDidScrollChange(({ scrollTop, scrollLeft, scrollWidth, scrollHeight }: MonacoEditor.IScrollEvent) => {
       onDidScrollChange({ scrollTop, scrollLeft, scrollWidth, scrollHeight })
     })
 
     // as an optimization we can use this later, for surgical edits,
     // to perform real time updates of the timeline
 
-    model.onDidChangeContent((modelContentChangedEvent: MonacoEditor.editor.IModelContentChangedEvent) => {
-      // console.log("onDidChangeContent:")
+    textModel.onDidChangeContent((modelContentChangedEvent: MonacoEditor.editor.IModelContentChangedEvent) => {
+      console.log("onDidChangeContent:")
       for (const change of modelContentChangedEvent.changes) {
         // console.log(" - change:", change)
       }
@@ -95,6 +98,7 @@ export function ScriptEditor() {
   }
 
   const setMonaco = useEditor(s => s.setMonaco)
+  const setTextModel = useEditor(s => s.setTextModel)
   const setMouseIsInside = useEditor(s => s.setMouseIsInside)
   const themeName = useUI(s => s.themeName)
   const editorFontSize = useUI(s => s.editorFontSize)
@@ -128,19 +132,23 @@ export function ScriptEditor() {
     }
   
     // Apply the custom theme immediately after defining it
-    monaco.editor.setTheme(themes.backstage.id)
+    monaco.editor.setTheme(themes.backstage.id)  
+
+    const textModel: MonacoEditor.editor.ITextModel = monaco.editor.createModel(
+      draft,
+      "plaintext"
+    )
+    setTextModel(textModel)
   }
 
   return (
     <div
       className="h-full"
       onMouseEnter={() => setMouseIsInside(true)}
-     onMouseLeave={() => setMouseIsInside(false)}
+      onMouseLeave={() => setMouseIsInside(false)}
     >
       <Editor
         height="100%"
-        defaultLanguage="plaintext"
-        defaultValue={draft}
         beforeMount={beforeMount}
         theme={themeName}
         onMount={onMount}

src/components/editor/ScriptEditor/styles.css

@@ -1,3 +1,23 @@
 .monaco-editor-background {
   @apply transition-colors;
-}
+}
+
+.entity {
+
+  /*
+  padding and rounded corners only make sense if we use a background:
+  @apply rounded-xl px-1.5 py-1 font-semibold;
+  */
+} 
+
+.entity.entity-location {
+  @apply text-green-300/90 !important;
+} 
+
+.entity.entity-character {
+  @apply text-orange-300/90 !important;
+}
+
+.entity.entity-highlight {
+  @apply font-semibold;
+} 

src/controllers/editor/getDefaultEditorState.ts

@@ -3,7 +3,8 @@ import { EditorState } from "./types"
 export function getDefaultEditorState(): EditorState {
   const state: EditorState = {
     monaco: undefined,
-    editor: undefined,
+    textModel: undefined,
+    standaloneCodeEditor: undefined,
     mouseIsInside: false,
     draft: "",
     lineNumberToMentionedSegments: {},

src/controllers/editor/types.ts

@@ -12,8 +12,10 @@ export type ScrollData = {
 export type EditorState = {
   monaco?: Monaco
 
+  textModel?: MonacoEditor.editor.ITextModel
+
   // reference to the React component
-  editor?: MonacoEditor.editor.IStandaloneCodeEditor
+  standaloneCodeEditor?: MonacoEditor.editor.IStandaloneCodeEditor
 
   // used to know if the user is actually inside the editor or not
   mouseIsInside: boolean
@@ -36,13 +38,16 @@ export type EditorState = {
 
 export type EditorControls = {
   setMonaco: (monaco?: Monaco) => void
-  setEditor: (editor?: MonacoEditor.editor.IStandaloneCodeEditor) => void
+  setTextModel: (textModel?: MonacoEditor.editor.ITextModel) => void
+  setStandaloneCodeEditor: (standaloneCodeEditor?: MonacoEditor.editor.IStandaloneCodeEditor) => void
   setMouseIsInside: (mouseIsInside: boolean) => void
   loadDraftFromClap: (clap: ClapProject) => void
   setDraft: (draft: string) => void
   publishDraftToTimeline: () => Promise<void>
   onDidScrollChange: (scrollData: ScrollData) => void
   jumpCursorOnLineClick: (line?: number) => void
+  highlightElements: () => void
+  applyClassNameToKeywords: (className?: string, keywords?: string[], caseSensitive?: boolean) => void
 }
 
 export type EditorStore = EditorState & EditorControls

src/controllers/editor/useEditor.ts

@@ -11,8 +11,9 @@ import { Monaco } from "@monaco-editor/react"
 
 export const useEditor = create<EditorStore>((set, get) => ({
   ...getDefaultEditorState(),
-  setMonaco: (monaco?: Monaco) => { set({ monaco}) },
-  setEditor: (editor?: MonacoEditor.editor.IStandaloneCodeEditor) => { set({ editor }) },
+  setMonaco: (monaco?: Monaco) => { set({ monaco }) },
+  setTextModel: (textModel?: MonacoEditor.editor.ITextModel) => { set({ textModel }) },
+  setStandaloneCodeEditor: (standaloneCodeEditor?: MonacoEditor.editor.IStandaloneCodeEditor) => { set({ standaloneCodeEditor }) },
   setMouseIsInside: (mouseIsInside: boolean) => { set({ mouseIsInside }) },
   loadDraftFromClap: (clap: ClapProject) => {
     const { setDraft } = get()
@@ -20,13 +21,17 @@ export const useEditor = create<EditorStore>((set, get) => ({
     setDraft(clap.meta.screenplay)
   },
   setDraft: (draft: string) => {
-    const { draft: previousDraft } = get()
+    const { draft: previousDraft, highlightElements, textModel } = get()
     if (draft === previousDraft) { return }
     set({ draft })
 
-    const { editor } = get()
-    if (!editor) { return }
-    editor?.setValue(draft)
+    
+    if (!textModel) { return }
+    // we need to update the model
+    textModel?.setValue(draft)
+
+    // and highlight the text again
+    highlightElements()
   },
   publishDraftToTimeline: async (): Promise<void> => {
     const { draft } = get()
@@ -72,7 +77,7 @@ export const useEditor = create<EditorStore>((set, get) => ({
       const timeline: TimelineStore = useTimeline.getState()
       if (!timeline.timelineCamera || !timeline.timelineControls) { return }
 
-      const { editor } = get()
+      const { standaloneCodeEditor } = get()
     
       const scrollRatio = scrollTop / scrollHeight
       const scrollX = Math.round(leftBarTrackScaleWidth + scrollRatio * timeline.contentWidth)
@@ -112,6 +117,92 @@ export const useEditor = create<EditorStore>((set, get) => ({
     timeline.setCursorTimestampAtInMs(startTimeInMs)
   },
 
+  highlightElements: () => {
+    const timeline: TimelineStore = useTimeline.getState()
+    const { clap } = timeline
+    
+    const { textModel, standaloneCodeEditor, applyClassNameToKeywords } = get()
+    if (!textModel || !standaloneCodeEditor || !clap) { return }
+
+    const characters = clap.entities.filter(entity => entity.category === ClapSegmentCategory.CHARACTER).map(entity => entity.triggerName)
+
+    // any character
+    applyClassNameToKeywords(
+      "entity entity-character",
+      characters
+    )
+
+    // UPPERCASE CHARACTER
+    applyClassNameToKeywords(
+      "entity entity-character entity-highlight",
+      characters,
+      true
+    )
+
+    const locations = clap.entities.filter(entity => entity.category === ClapSegmentCategory.LOCATION).map(entity => entity.triggerName)
+    // any location 
+    applyClassNameToKeywords(
+      "entity entity-location",
+      locations
+    )
+
+    // UPPERCASE LOCATION
+    applyClassNameToKeywords(
+      "entity entity-location entity-highlight",
+      locations,
+      true
+    )
+  },
+  applyClassNameToKeywords: (className: string = "", keywords: string[] = [], caseSensitive = false) => {
+    const timeline: TimelineStore = useTimeline.getState()
+    const { clap } = timeline
+    
+    const { textModel, standaloneCodeEditor } = get()
+    if (!textModel || !standaloneCodeEditor || !clap) { return }
+
+    keywords.forEach((entityTriggerName: string): void => {
+      const matches: MonacoEditor.editor.FindMatch[] = textModel.findMatches(
+        // searchString — The string used to search. If it is a regular expression, set isRegex to true.
+        // searchString: string,
+        entityTriggerName,
+        
+        // @param searchOnlyEditableRange — Limit the searching to only search inside the editable range of the model.
+        // searchOnlyEditableRange: boolean,
+        false,
+
+        // / @param isRegex — Used to indicate that searchString is a regular expression.
+        // isRegex: boolean,
+        false,
+    
+        // @param matchCase — Force the matching to match lower/upper case exactly.
+        // matchCase: boolean,
+        caseSensitive,
+
+        // @param wordSeparators — Force the matching to match entire words only. Pass null otherwise.
+        // wordSeparators: string | null,
+        null,
+
+        // @param captureMatches — The result will contain the captured groups.
+        // captureMatches: boolean,
+        false,
+
+        // limitResultCount — Limit the number of results
+        // limitResultCount?: number
+      )
+
+      matches.forEach((match: MonacoEditor.editor.FindMatch): void => {
+        standaloneCodeEditor.createDecorationsCollection([
+          {
+            range: match.range,
+            options: {
+              isWholeLine: false,
+              inlineClassName: className
+            }
+          },
+        ])
+      })
+    })
+  }
 }))
 
 

src/controllers/ui/theme.ts

@@ -150,12 +150,12 @@ export const lore: UITheme = {
   author: "Clapper",
   description: "",
   defaultBgColor: "#151520",
-  defaultTextColor: "#E3747B",
+  defaultTextColor: "#f6d6d8",
   defaultPrimaryColor: "#DE4A80",
   logoColor: "#DE4A80",
   editorBgColor: "#151520",
   editorCursorColor: '#DE4A80',
-  editorTextColor: "#E3747B",
+  editorTextColor: "#f6d6d8",
   monitorBgColor: "#151520",
   monitorSecondaryTextColor: "#D6D3D1",
   monitorPrimaryTextColor: "#DE4A80",