@inshapardaz/likhari-react 0.1.28-dev.245 → 0.1.28-dev.254

package/dist/spellcheck/SpellHighlightPlugin.d.ts

@@ -1,8 +1,10 @@
 /**
  * Underlines misspelled words the way the browser does, without changing the
- * document: ranges are set on the rendered text through the CSS Custom
- * Highlight API. Checking is debounced so typing stays smooth. In browsers
- * without the API, nothing is underlined.
+ * document. Only blocks that are in view are checked, a block a few seconds after
+ * it scrolls into view, and an edit is rechecked after typing pauses. Results are
+ * kept per block, so a change re-checks only the block it is in. Underlines are
+ * ranges set through the CSS Custom Highlight API. In browsers without it, nothing
+ * is underlined.
  */
 export declare function SpellHighlightPlugin(): null;
 //# sourceMappingURL=SpellHighlightPlugin.d.ts.map

package/dist/spellcheck/SpellHighlightPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpellHighlightPlugin.d.ts","sourceRoot":"","sources":["../../src/spellcheck/SpellHighlightPlugin.tsx"],"names":[],"mappings":"AAUA;;;;;GAKG;AACH,wBAAgB,oBAAoB,SAkDnC"}
+{"version":3,"file":"SpellHighlightPlugin.d.ts","sourceRoot":"","sources":["../../src/spellcheck/SpellHighlightPlugin.tsx"],"names":[],"mappings":"AAsBA;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,SAoJnC"}

package/dist/spellcheck/SpellHighlightPlugin.js

@@ -1,60 +1,196 @@
 import { useEffect } from 'react';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { $collectMisspellings } from './spellcheckActions.js';
+import { $getNodeByKey, $getRoot, $isElementNode } from 'lexical';
+import { $misspellingsInBlock } from './spellcheckActions.js';
 import { getSpeller } from './spellDictionaries.js';
 import { onSpellWordsChange } from './userWords.js';
 /** The CSS Custom Highlight name; editor.css styles it as a red wavy underline. */
 const HIGHLIGHT = 'likhari-spelling';
-const DEBOUNCE_MS = 300;
+/** A block that has just come into view is checked after this long, so scrolling past it costs nothing. */
+const VIEW_DELAY_MS = 2000;
+/** An edit inside a visible block is checked after the typing pauses for this long. */
+const TYPING_DELAY_MS = 300;
+/** The top-level block (paragraph, table, list...) that holds a node, or null. */
+function $topLevelKey(node) {
+    const root = $getRoot();
+    let current = node;
+    while (current.getParent() && !current.getParent().is(root))
+        current = current.getParent();
+    return current.getParent() ? current.getKey() : null;
+}
 /**
  * Underlines misspelled words the way the browser does, without changing the
- * document: ranges are set on the rendered text through the CSS Custom
- * Highlight API. Checking is debounced so typing stays smooth. In browsers
- * without the API, nothing is underlined.
+ * document. Only blocks that are in view are checked, a block a few seconds after
+ * it scrolls into view, and an edit is rechecked after typing pauses. Results are
+ * kept per block, so a change re-checks only the block it is in. Underlines are
+ * ranges set through the CSS Custom Highlight API. In browsers without it, nothing
+ * is underlined.
  */
 export function SpellHighlightPlugin() {
     const [editor] = useLexicalComposerContext();
     useEffect(() => {
-        if (typeof CSS === 'undefined' || !('highlights' in CSS))
+        if (typeof CSS === 'undefined' || !('highlights' in CSS) || typeof IntersectionObserver === 'undefined')
             return;
         let checkers = null;
-        let timer;
         let active = true;
+        const cache = new Map();
+        const visible = new Set();
+        const elements = new Map();
+        const keyOf = new Map();
+        const timers = new Map();
         const paint = () => {
-            if (!active || !checkers)
-                return;
-            const found = editor.getEditorState().read(() => $collectMisspellings(checkers));
             const ranges = [];
-            for (const misspelling of found) {
-                for (const segment of misspelling.segments) {
-                    const text = editor.getElementByKey(segment.key)?.firstChild;
-                    if (!text || text.nodeType !== Node.TEXT_NODE)
-                        continue;
-                    const range = document.createRange();
-                    range.setStart(text, segment.start);
-                    range.setEnd(text, segment.end);
-                    ranges.push(range);
+            for (const [key, words] of cache) {
+                const block = editor.getElementByKey(key);
+                if (!block || words.length === 0)
+                    continue;
+                const pieces = textPieces(block);
+                for (const word of words) {
+                    for (const piece of pieces) {
+                        const start = Math.max(word.start, piece.start);
+                        const end = Math.min(word.end, piece.end);
+                        if (end <= start)
+                            continue;
+                        const range = document.createRange();
+                        range.setStart(piece.node, start - piece.start);
+                        range.setEnd(piece.node, end - piece.start);
+                        ranges.push(range);
+                    }
                 }
             }
             CSS.highlights.set(HIGHLIGHT, new Highlight(...ranges));
         };
-        const schedule = () => {
-            clearTimeout(timer);
-            timer = setTimeout(paint, DEBOUNCE_MS);
+        const checkBlock = (key) => {
+            if (!active || !checkers)
+                return;
+            const words = editor.getEditorState().read(() => {
+                const node = $getNodeByKey(key);
+                return $isElementNode(node) ? $misspellingsInBlock(node, checkers) : null;
+            });
+            if (words === null)
+                cache.delete(key);
+            else
+                cache.set(key, words);
+            paint();
+        };
+        const schedule = (key, delay) => {
+            clearTimeout(timers.get(key));
+            timers.set(key, setTimeout(() => {
+                timers.delete(key);
+                if (visible.has(key))
+                    checkBlock(key);
+            }, delay));
+        };
+        const observer = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                const key = keyOf.get(entry.target);
+                if (key === undefined)
+                    continue;
+                if (entry.isIntersecting) {
+                    visible.add(key);
+                    if (!cache.has(key))
+                        schedule(key, VIEW_DELAY_MS);
+                }
+                else {
+                    visible.delete(key);
+                    clearTimeout(timers.get(key));
+                    timers.delete(key);
+                }
+            }
+        });
+        // Keeps the observer on exactly the current top-level blocks.
+        const syncBlocks = (editorState = editor.getEditorState()) => {
+            const current = new Map();
+            editorState.read(() => {
+                for (const block of $getRoot().getChildren()) {
+                    const element = editor.getElementByKey(block.getKey());
+                    if (element)
+                        current.set(block.getKey(), element);
+                }
+            });
+            for (const [key, element] of elements) {
+                if (current.get(key) !== element) {
+                    observer.unobserve(element);
+                    keyOf.delete(element);
+                    elements.delete(key);
+                    visible.delete(key);
+                    cache.delete(key);
+                    clearTimeout(timers.get(key));
+                    timers.delete(key);
+                }
+            }
+            for (const [key, element] of current) {
+                if (!elements.has(key)) {
+                    elements.set(key, element);
+                    keyOf.set(element, key);
+                    observer.observe(element);
+                }
+            }
         };
-        const unregister = editor.registerUpdateListener(schedule);
-        const unsubscribe = onSpellWordsChange(schedule);
+        const unregisterUpdate = editor.registerUpdateListener(({ editorState, dirtyElements, dirtyLeaves }) => {
+            if (!checkers)
+                return;
+            const dirty = new Set();
+            editorState.read(() => {
+                for (const key of dirtyLeaves) {
+                    const node = $getNodeByKey(key);
+                    const top = node ? $topLevelKey(node) : null;
+                    if (top)
+                        dirty.add(top);
+                }
+                for (const key of dirtyElements.keys()) {
+                    const node = $getNodeByKey(key);
+                    const top = node ? $topLevelKey(node) : null;
+                    if (top)
+                        dirty.add(top);
+                }
+            });
+            syncBlocks(editorState);
+            for (const key of dirty) {
+                if (visible.has(key))
+                    schedule(key, TYPING_DELAY_MS);
+                else
+                    cache.delete(key);
+            }
+            if (dirty.size > 0)
+                paint();
+        });
+        const unsubscribeWords = onSpellWordsChange(() => {
+            cache.clear();
+            for (const key of visible)
+                schedule(key, 0);
+            paint();
+        });
         Promise.all([getSpeller('en'), getSpeller('ur')]).then(async ([en, ur]) => {
+            if (!active)
+                return;
             checkers = { ltr: en ? await en : undefined, rtl: ur ? await ur : undefined };
-            schedule();
+            syncBlocks();
+            for (const key of visible)
+                if (!cache.has(key))
+                    schedule(key, 0);
         });
         return () => {
             active = false;
-            clearTimeout(timer);
-            unregister();
-            unsubscribe();
+            observer.disconnect();
+            unregisterUpdate();
+            unsubscribeWords();
+            for (const timer of timers.values())
+                clearTimeout(timer);
             CSS.highlights.delete(HIGHLIGHT);
         };
     }, [editor]);
     return null;
 }
+/** The text nodes of a rendered block, with where each one starts in the block's text. */
+function textPieces(block) {
+    const pieces = [];
+    const walker = document.createTreeWalker(block, NodeFilter.SHOW_TEXT);
+    let offset = 0;
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+        const text = node;
+        pieces.push({ node: text, start: offset, end: offset + text.length });
+        offset += text.length;
+    }
+    return pieces;
+}

package/dist/spellcheck/spellcheckActions.d.ts

@@ -1,3 +1,4 @@
+import type { ElementNode } from 'lexical';
 import { type FindMatch } from '../find/findReplaceActions.js';
 import { type Speller } from './spellDictionaries.js';
 /** The checker for each text direction: English for LTR blocks, Urdu for RTL. */
@@ -18,4 +19,16 @@ export interface Misspelling {
 }
 /** Every word in the document its block's checker does not recognise. */
 export declare function $collectMisspellings(checkers: Checkers): Misspelling[];
+/** A misspelled word inside a block, as offsets into the block's text. */
+export interface BlockMisspelling {
+    start: number;
+    end: number;
+    word: string;
+}
+/**
+ * The misspelled words inside one top-level block (a paragraph, a table, a list...),
+ * as offsets into the block's text. Words are found per parent (paragraph or cell),
+ * so text in different cells never forms one word. Must run inside an editor read.
+ */
+export declare function $misspellingsInBlock(block: ElementNode, checkers: Checkers): BlockMisspelling[];
 //# sourceMappingURL=spellcheckActions.d.ts.map

package/dist/spellcheck/spellcheckActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spellcheckActions.d.ts","sourceRoot":"","sources":["../../src/spellcheck/spellcheckActions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAClF,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE5D,iFAAiF;AACjF,MAAM,WAAW,QAAQ;IACvB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,qEAAqE;AACrE,MAAM,WAAW,OAAO;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB;AAED,yEAAyE;AACzE,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,QAAQ,GAAG,WAAW,EAAE,CAmBtE"}
+{"version":3,"file":"spellcheckActions.d.ts","sourceRoot":"","sources":["../../src/spellcheck/spellcheckActions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAwB,KAAK,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAClF,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE5D,iFAAiF;AACjF,MAAM,WAAW,QAAQ;IACvB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,qEAAqE;AACrE,MAAM,WAAW,OAAO;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB;AAED,yEAAyE;AACzE,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,QAAQ,GAAG,WAAW,EAAE,CAmBtE;AAeD,0EAA0E;AAC1E,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,GAAG,gBAAgB,EAAE,CA8B/F"}

package/dist/spellcheck/spellcheckActions.js

@@ -36,3 +36,38 @@ function segmentsOf(group, start, end) {
     }
     return segments;
 }
+/**
+ * The misspelled words inside one top-level block (a paragraph, a table, a list...),
+ * as offsets into the block's text. Words are found per parent (paragraph or cell),
+ * so text in different cells never forms one word. Must run inside an editor read.
+ */
+export function $misspellingsInBlock(block, checkers) {
+    const nodes = block.getAllTextNodes();
+    const starts = [];
+    let offset = 0;
+    for (const node of nodes) {
+        starts.push(offset);
+        offset += node.getTextContent().length;
+    }
+    const found = [];
+    let i = 0;
+    while (i < nodes.length) {
+        const parent = nodes[i].getParentOrThrow();
+        let j = i;
+        let text = '';
+        while (j < nodes.length && nodes[j].getParentOrThrow().getKey() === parent.getKey()) {
+            text += nodes[j].getTextContent();
+            j += 1;
+        }
+        const speller = parent.getDirection() === 'rtl' ? checkers.rtl : checkers.ltr;
+        if (speller) {
+            for (const span of wordsIn(text)) {
+                if (!speller.correct(span.word)) {
+                    found.push({ start: starts[i] + span.start, end: starts[i] + span.end, word: span.word });
+                }
+            }
+        }
+        i = j;
+    }
+    return found;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inshapardaz/likhari-react",
-  "version": "0.1.28-dev.245",
+  "version": "0.1.28-dev.254",
   "description": "React implementation of the Likhari editor, built on @lexical/react.",
   "license": "MIT",
   "repository": {