Commit remaining workspace changes

vipmax · vipmax · commit 3633397b8ab9 · 2026-05-27T18:12:13.000+03:00
diff --git a/anycode-base/src/editor.ts b/anycode-base/src/editor.ts
@@ -1,4 +1,4 @@
-import { Code, Change, Position, Operation, type FoldRange } from "./code";
+import { Code, Change, Position, Operation, type FoldRange, WordHighlight, areWordHighlightsEqual } from "./code";
 import { Renderer } from './renderer/Renderer';
 import { getPosFromMouse } from './mouse';
 import { Selection, hasDiagnosticSelection } from "./selection";
@@ -39,6 +39,7 @@ export interface EditorOptions {
     focusedDiffEnabled?: boolean;
     focusedDiffContextLines?: number;
     codeFoldingEnabled?: boolean;
+    wordHighlightEnabled?: boolean;
 }
 
 export interface EditorState {
@@ -54,6 +55,8 @@ export interface EditorState {
     foldRanges: FoldRange[];
     collapsedFoldStarts: Set<number>;
     codeFoldingEnabled: boolean;
+    wordHighlightEnabled: boolean;
+    wordHighlight: WordHighlight | null;
 }
 
 export class AnycodeEditor {
@@ -104,6 +107,9 @@ export class AnycodeEditor {
     private readonly readOnly: boolean;
     private collapsedFoldStarts: Set<number> = new Set();
     private codeFoldingEnabled: boolean;
+    
+    private wordHighlightEnabled: boolean;
+    private wordHighlight: WordHighlight | null = null;
 
     constructor(
         initialText = '',
@@ -116,6 +122,7 @@ export class AnycodeEditor {
         this.focusedDiffEnabled = options.focusedDiffEnabled ?? false;
         this.focusedDiffContextLines = Math.max(0, options.focusedDiffContextLines ?? 3);
         this.codeFoldingEnabled = options.codeFoldingEnabled ?? true;
+        this.wordHighlightEnabled = options.wordHighlightEnabled ?? true;
         // Set initial cursor position
         if (options.line !== undefined && options.column !== undefined) {
             this.offset = this.code.getOffset(options.line, options.column);
@@ -318,9 +325,40 @@ export class AnycodeEditor {
     public setCursor(line: number, column: number): void {
         const offset = this.code.getOffset(line, column);
         this.offset = offset;
+        this.updateWordHighlight();
         this.renderer.renderCursor(line, column);
     }
 
+    private updateWordHighlight() {
+        if (!this.code) return;
+
+        if (!this.wordHighlightEnabled) {
+            if (this.wordHighlight !== null) {
+                this.wordHighlight = null;
+                if (this.renderer) {
+                    this.renderer.renderWordHighlight(this.getEditorState());
+                }
+            }
+            return;
+        }
+        const highlight = this.code.getWordAtOffset(this.offset);
+        const hasChanged = !areWordHighlightsEqual(highlight, this.wordHighlight);
+        
+        if (hasChanged) {
+            this.wordHighlight = highlight;
+            if (this.renderer) {
+                this.renderer.renderWordHighlight(this.getEditorState());
+            }
+        }
+    }
+
+    public setWordHighlightEnabled(enabled: boolean) {
+        if (this.wordHighlightEnabled !== enabled) {
+            this.wordHighlightEnabled = enabled;
+            this.updateWordHighlight();
+        }
+    }
+
     public setSelectionRange(
         startLine: number,
         startColumn: number,
@@ -332,6 +370,7 @@ export class AnycodeEditor {
         const endOffset = this.code.getOffset(endLine, endColumn);
         this.selection = new Selection(startOffset, endOffset);
         this.offset = endOffset;
+        this.updateWordHighlight();
 
         if (center) {
             this.renderer.focusCenter(this.getEditorState());
@@ -529,6 +568,8 @@ export class AnycodeEditor {
             foldRanges: this.code.getFoldRanges(),
             collapsedFoldStarts: this.collapsedFoldStarts,
             codeFoldingEnabled: this.codeFoldingEnabled,
+            wordHighlightEnabled: this.wordHighlightEnabled,
+            wordHighlight: this.wordHighlight,
         };
     }
 
@@ -627,6 +668,7 @@ export class AnycodeEditor {
         //if (o == this.offset) { return; }
 
         this.offset = o;
+        this.updateWordHighlight();
 
         const { line, column } = this.code.getPosition(this.offset);
         this.renderer.renderCursor(line, column);
@@ -1194,9 +1236,15 @@ export class AnycodeEditor {
             this.code = result.ctx.code;
             this.recomputeDiffs();
         }
-        if (offsetChanged) this.offset = result.ctx.offset;
+        if (offsetChanged) {
+            this.offset = result.ctx.offset;
+        }
         if (selectionChanged) this.selection = result.ctx.selection || null;
 
+        if (textChanged || offsetChanged) {
+            this.updateWordHighlight();
+        }
+
         const state = this.getEditorState();
 
         if (textChanged) {
diff --git a/anycode-base/src/renderer/DiffRenderer.ts b/anycode-base/src/renderer/DiffRenderer.ts
@@ -1,7 +1,7 @@
 import { AnycodeLine } from "../utils";
 import { EditorSettings } from "../editor";
 import { DiffInfo, ChangeType } from "../diff";
-import { HighlighedNode } from "../code";
+import { HighlighedNode, WordHighlight } from "../code";
 import type { GhostRow, SeparatorRow, VisualRow } from "./Renderer";
 
 export type ExpandDirection = 'up' | 'down' | 'both' | 'all';
@@ -81,7 +81,8 @@ export class DiffRenderer {
         text: string,
         settings: EditorSettings,
         hunkId: number,
-        nodes?: HighlighedNode[]
+        nodes?: HighlighedNode[],
+        wordHighlight?: WordHighlight | null
     ): HTMLDivElement {
         const ghostLine = document.createElement('div');
         ghostLine.className = "line line-deleted-ghost";
@@ -92,12 +93,25 @@ export class DiffRenderer {
         if (nodes && nodes.length > 0) {
             for (const { name, text: nodeText } of nodes) {
                 const span = document.createElement('span');
+                const classNameParts: string[] = [];
                 if (name) {
                     // Keep class fallback behavior consistent with normal line rendering.
                     const parts = name.split('.').filter(Boolean);
-                    span.className = [name, ...parts].join(' ');
+                    classNameParts.push(...Array.from(new Set([name, ...parts])));
+                }
+                if (!name && nodeText === '\t') classNameParts.push('indent');
+
+                if (
+                    wordHighlight?.token &&
+                    classNameParts.includes(wordHighlight.token) &&
+                    nodeText === wordHighlight.text
+                ) {
+                    classNameParts.push('wh');
+                }
+
+                if (classNameParts.length > 0) {
+                    span.className = classNameParts.join(' ');
                 }
-                if (!name && nodeText === '\t') span.className = 'indent';
                 span.textContent = nodeText;
                 ghostLine.appendChild(span);
             }
@@ -118,11 +132,18 @@ export class DiffRenderer {
         ghostRow: GhostRow, 
         settings: EditorSettings,
         originalText: string,
-        originalNodes?: HighlighedNode[]
+        originalNodes?: HighlighedNode[],
+        wordHighlight?: WordHighlight | null
     ): GhostLine {
         const { hunkId } = ghostRow;
         
-        const ghostLine = this.createDeletedGhostLine(originalText, settings, hunkId, originalNodes);
+        const ghostLine = this.createDeletedGhostLine(
+            originalText,
+            settings,
+            hunkId,
+            originalNodes,
+            wordHighlight
+        );
 
         const emptyGutter = document.createElement('div');
         emptyGutter.className = 'ln';
diff --git a/anycode-base/src/renderer/LineRenderer.ts b/anycode-base/src/renderer/LineRenderer.ts
@@ -1,4 +1,4 @@
-import { HighlighedNode } from "../code";
+import { HighlighedNode, WordHighlight } from "../code";
 import { AnycodeLine, objectHash } from "../utils";
 import { EditorSettings } from "../editor";
 import { DiffInfo } from "../diff";
@@ -23,7 +23,8 @@ export class LineRenderer {
         nodes: HighlighedNode[],
         errorLines: Map<number, string>,
         settings: EditorSettings,
-        diffs?: Map<number, DiffInfo>
+        diffs?: Map<number, DiffInfo>,
+        wordHighlight?: WordHighlight | null
     ): AnycodeLine {
         const wrapper = document.createElement('div') as AnycodeLine;
 
@@ -50,14 +51,29 @@ export class LineRenderer {
         } else {
             for (const { name, text } of nodes) {
                 const span = document.createElement('span');
+                const classNameParts: string[] = [];
                 if (name) {
                     // Add both full token class (e.g. "function.method") and path segments
                     // ("function", "method") so styles can gracefully fall back from specific
                     // to general when a theme misses a deep token color.
+                    // Deduplicate classes to avoid repeating when category name has no dots.
                     const parts = name.split('.').filter(Boolean);
-                    span.className = [name, ...parts].join(' ');
+                    classNameParts.push(...Array.from(new Set([name, ...parts])));
+                }
+                if (!name && text === '\t') classNameParts.push('indent');
+                
+                // Add highlight class if it matches the wordHighlight text and is highlightable
+                if (
+                  wordHighlight?.token &&
+                  classNameParts.includes(wordHighlight.token) &&
+                  text === wordHighlight.text
+                ) {
+                  classNameParts.push('wh');
+                }
+
+                if (classNameParts.length > 0) {
+                    span.className = classNameParts.join(' ');
                 }
-                if (!name && text === '\t') span.className = 'indent';
                 span.textContent = text;
                 wrapper.appendChild(span);
             }
@@ -141,8 +157,9 @@ export class LineRenderer {
         diffs: Map<number, DiffInfo> | undefined,
         runLines: number[],
         foldIndicator: { canFold: boolean; collapsed: boolean },
+        wordHighlight?: WordHighlight | null,
     ): { code: AnycodeLine; gutter: HTMLDivElement; btn: HTMLDivElement; fold: HTMLDivElement } {
-        const code = this.createLineWrapper(lineNumber, nodes, errorLines, settings, diffs);
+        const code = this.createLineWrapper(lineNumber, nodes, errorLines, settings, diffs, wordHighlight);
         const gutter = this.createLineNumber(lineNumber, settings, diffs);
         const btn = this.createLineButtons(lineNumber, runLines, errorLines, settings);
         const fold = document.createElement('div');
diff --git a/anycode-base/src/renderer/Renderer.ts b/anycode-base/src/renderer/Renderer.ts
@@ -522,18 +522,17 @@ export class Renderer {
         if (row.kind === 'real') {
             const syntaxNodes = code.getLineNodes(row.lineIndex);
             elements = this.lineRenderer.createLineElements(
-                row.lineIndex, syntaxNodes, errorLines, settings, diffs, runLines, this.getFoldIndicator(row.lineIndex)
+                row.lineIndex, syntaxNodes, errorLines, settings,
+                diffs, runLines, this.getFoldIndicator(row.lineIndex), state.wordHighlight
             );
         } else if (row.kind === 'ghost') {
             const originalNodes = state.originalCode?.getLineNodes(row.originalLineIndex);
             const originalText = state.originalCode?.line(row.originalLineIndex) ?? '';
             elements = this.diffRenderer.createGhostRowElements(
-                row, settings, originalText, originalNodes
+                row, settings, originalText, originalNodes, state.wordHighlight
             );
         } else {
-            elements = this.diffRenderer.createGapRowElements(
-                row, settings
-            );
+            elements = this.diffRenderer.createGapRowElements(row, settings);
         }
 
         elements.code.setAttribute('data-visual-index', visualIndexAttr);
@@ -613,7 +612,8 @@ export class Renderer {
                 if (existingHash !== newHash) {
                     const visualIndexAttr = String(i);
                     const lineElements = this.lineRenderer.createLineElements(
-                        lineIndex, nodes, errorLines, settings, diffs, runLines, this.getFoldIndicator(lineIndex)
+                        lineIndex, nodes, errorLines, settings,
+                        diffs, runLines, this.getFoldIndicator(lineIndex), state.wordHighlight
                     );
                     lineElements.code.setAttribute('data-visual-index', visualIndexAttr);
                     existingLine.replaceWith(lineElements.code);
@@ -828,6 +828,19 @@ export class Renderer {
         return lines.length > 0 ? lines[lines.length - 1] : null;
     }
 
+    public renderWordHighlight(state: EditorState) {
+        if (!this.codeContent) return;
+        this.codeContent.querySelectorAll('span.wh')
+            .forEach(el => el.classList.remove('wh'));
+
+        const wh = state.wordHighlight;
+        if (!wh?.text || !wh.token) return;
+
+        this.codeContent
+            .querySelectorAll(`span[class~="${wh.token}"]`)
+            .forEach(el => el.textContent === wh.text && el.classList.add('wh'));
+    }
+
     public focus(state: EditorState, focusLine: number | null = null): boolean {
         const { code, offset, settings } = state;
         if (!code) return false;
diff --git a/anycode-base/src/styles.css b/anycode-base/src/styles.css
@@ -503,3 +503,8 @@
 .highlight.selected {
     background: rgba(179, 179, 179, 0.9);
 }
+
+.wh {
+    background-color: rgba(173, 214, 255, 0.18);
+    border-radius: 2px;
+}

Original file line number	Diff line number	Diff line change
`@@ -503,3 +503,8 @@`
`503`	`503`	`.highlight.selected {`
`504`	`504`	`background: rgba(179, 179, 179, 0.9);`
`505`	`505`	`}`
	`506`	`+`
	`507`	`+.wh {`
	`508`	`+ background-color: rgba(173, 214, 255, 0.18);`
	`509`	`+ border-radius: 2px;`
	`510`	`+}`