@inshapardaz/likhari-react 0.1.21 → 0.1.22-dev.216

package/dist/normalization/urduNormalize.js

@@ -0,0 +1,116 @@
+/**
+ * Urdu character normalisation, ported from urduhack's `normalization/character.py`
+ * (MIT licence, https://github.com/urduhack/urduhack). The mapping replaces
+ * Arabic and presentation-form letters with the standard Urdu letter, and
+ * the tables below keep the same entries and order as the original, so the
+ * output matches it character for character.
+ */
+const CORRECT_URDU_CHARACTERS = {
+    "آ": ["ﺁ", "ﺂ"],
+    "أ": ["ﺃ"],
+    "ا": ["ﺍ", "ﺎ"],
+    "ب": ["ﺏ", "ﺐ", "ﺑ", "ﺒ"],
+    "پ": ["ﭖ", "ﭘ", "ﭙ"],
+    "ت": ["ﺕ", "ﺖ", "ﺗ", "ﺘ"],
+    "ٹ": ["ﭦ", "ﭧ", "ﭨ", "ﭩ"],
+    "ث": ["ﺛ", "ﺜ", "ﺚ"],
+    "ج": ["ﺝ", "ﺞ", "ﺟ", "ﺠ"],
+    "ح": ["ﺡ", "ﺣ", "ﺤ", "ﺢ"],
+    "خ": ["ﺧ", "ﺨ", "ﺦ"],
+    "د": ["ﺩ", "ﺪ"],
+    "ذ": ["ﺬ", "ﺫ"],
+    "ر": ["ﺭ", "ﺮ"],
+    "ز": ["ﺯ", "ﺰ"],
+    "س": ["ﺱ", "ﺲ", "ﺳ", "ﺴ"],
+    "ش": ["ﺵ", "ﺶ", "ﺷ", "ﺸ"],
+    "ص": ["ﺹ", "ﺺ", "ﺻ", "ﺼ"],
+    "ض": ["ﺽ", "ﺾ", "ﺿ", "ﻀ"],
+    "ط": ["ﻃ", "ﻄ"],
+    "ظ": ["ﻅ", "ﻇ", "ﻈ"],
+    "ع": ["ﻉ", "ﻊ", "ﻋ", "ﻌ"],
+    "غ": ["ﻍ", "ﻏ", "ﻐ"],
+    "ف": ["ﻑ", "ﻒ", "ﻓ", "ﻔ"],
+    "ق": ["ﻕ", "ﻖ", "ﻗ", "ﻘ"],
+    "ل": ["ﻝ", "ﻞ", "ﻟ", "ﻠ"],
+    "م": ["ﻡ", "ﻢ", "ﻣ", "ﻤ"],
+    "ن": ["ﻥ", "ﻦ", "ﻧ", "ﻨ"],
+    "چ": ["ﭺ", "ﭻ", "ﭼ", "ﭽ"],
+    "ڈ": ["ﮈ", "ﮉ"],
+    "ڑ": ["ﮍ", "ﮌ"],
+    "ژ": ["ﮋ"],
+    "ک": ["ﮎ", "ﮏ", "ﮐ", "ﮑ", "ﻛ", "ك"],
+    "گ": ["ﮒ", "ﮓ", "ﮔ", "ﮕ"],
+    "ں": ["ﮞ", "ﮟ"],
+    "و": ["ﻮ", "ﻭ", "ﻮ"],
+    "ؤ": ["ﺅ"],
+    "ھ": ["ﮪ", "ﮬ", "ﮭ", "ﻬ", "ﻫ", "ﮫ"],
+    "ہ": ["ﻩ", "ﮦ", "ﻪ", "ﮧ", "ﮩ", "ﮨ", "ه"],
+    "ۂ": [],
+    "ۃ": ["ة"],
+    "ء": ["ﺀ"],
+    "ی": ["ﯼ", "ى", "ﯽ", "ﻰ", "ﻱ", "ﻲ", "ﯾ", "ﯿ", "ي"],
+    "ئ": ["ﺋ", "ﺌ"],
+    "ے": ["ﮮ", "ﮯ", "ﻳ", "ﻴ"],
+    "ۓ": [],
+    "۰": ["٠"],
+    "۱": ["١"],
+    "۲": ["٢"],
+    "۳": ["٣"],
+    "۴": ["٤"],
+    "۵": ["٥"],
+    "۶": ["٦"],
+    "۷": ["٧"],
+    "۸": ["٨"],
+    "۹": ["٩"],
+    "۔": [],
+    "؟": [],
+    "٫": [],
+    "،": [],
+    "لا": ["ﻻ", "ﻼ"],
+    "": ["ـ"],
+};
+const TRANSLATOR = new Map();
+for (const [key, values] of Object.entries(CORRECT_URDU_CHARACTERS)) {
+    for (const value of values)
+        TRANSLATOR.set(value, key);
+}
+/** Combining diacritics (harakat and similar), as urduhack's URDU_DIACRITICS. */
+const DIACRITICS = new Set(['َ', 'ً', 'ٰ', 'ِ', 'ُ', 'ٍ']);
+const ENGLISH_DIGITS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+const URDU_DIGITS = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
+/** Replaces Arabic and presentation-form letters with standard Urdu letters, character by character. */
+export function normalizeUrduCharacters(text) {
+    let out = '';
+    for (const char of text)
+        out += TRANSLATOR.get(char) ?? char;
+    return out;
+}
+export function removeUrduDiacritics(text) {
+    let out = '';
+    for (const char of text)
+        if (!DIACRITICS.has(char))
+            out += char;
+    return out;
+}
+/** Converts Urdu digits to English digits, or the reverse. */
+export function replaceUrduDigits(text, to) {
+    const from = to === 'english' ? URDU_DIGITS : ENGLISH_DIGITS;
+    const target = to === 'english' ? ENGLISH_DIGITS : URDU_DIGITS;
+    let out = '';
+    for (const char of text) {
+        const index = from.indexOf(char);
+        out += index === -1 ? char : target[index];
+    }
+    return out;
+}
+/**
+ * The normalisation urduhack's `normalize` applies, with the diacritic and
+ * digit steps made optional. Character mapping always runs.
+ */
+export function normalizeUrdu(text, options = {}) {
+    let out = options.removeDiacritics ? removeUrduDiacritics(text) : text;
+    out = normalizeUrduCharacters(out);
+    if (options.digits === 'english' || options.digits === 'urdu')
+        out = replaceUrduDigits(out, options.digits);
+    return out;
+}

package/dist/spellcheck/SpellHighlightPlugin.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+export declare function SpellHighlightPlugin(): null;
+//# sourceMappingURL=SpellHighlightPlugin.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpellHighlightPlugin.d.ts","sourceRoot":"","sources":["../../src/spellcheck/SpellHighlightPlugin.tsx"],"names":[],"mappings":"AASA;;;;;GAKG;AACH,wBAAgB,oBAAoB,SAgDnC"}

package/dist/spellcheck/SpellHighlightPlugin.js

@@ -0,0 +1,57 @@
+import { useEffect } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $collectMisspellings } from './spellcheckActions.js';
+import { getSpeller } from './spellDictionaries.js';
+/** The CSS Custom Highlight name; editor.css styles it as a red wavy underline. */
+const HIGHLIGHT = 'likhari-spelling';
+const DEBOUNCE_MS = 300;
+/**
+ * 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.
+ */
+export function SpellHighlightPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (typeof CSS === 'undefined' || !('highlights' in CSS))
+            return;
+        let checkers = null;
+        let timer;
+        let active = true;
+        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);
+                }
+            }
+            CSS.highlights.set(HIGHLIGHT, new Highlight(...ranges));
+        };
+        const schedule = () => {
+            clearTimeout(timer);
+            timer = setTimeout(paint, DEBOUNCE_MS);
+        };
+        const unregister = editor.registerUpdateListener(schedule);
+        Promise.all([getSpeller('en'), getSpeller('ur')]).then(async ([en, ur]) => {
+            checkers = { ltr: en ? await en : undefined, rtl: ur ? await ur : undefined };
+            schedule();
+        });
+        return () => {
+            active = false;
+            clearTimeout(timer);
+            unregister();
+            CSS.highlights.delete(HIGHLIGHT);
+        };
+    }, [editor]);
+    return null;
+}

package/dist/spellcheck/spellcheckActions.d.ts

@@ -0,0 +1,21 @@
+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. */
+export interface Checkers {
+    ltr?: Speller;
+    rtl?: Speller;
+}
+/** The part of a misspelled word that falls inside one text node. */
+export interface Segment {
+    key: string;
+    start: number;
+    end: number;
+}
+export interface Misspelling {
+    word: string;
+    match: FindMatch;
+    segments: Segment[];
+}
+/** Every word in the document its block's checker does not recognise. */
+export declare function $collectMisspellings(checkers: Checkers): Misspelling[];
+//# sourceMappingURL=spellcheckActions.d.ts.map

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

@@ -0,0 +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"}

package/dist/spellcheck/spellcheckActions.js

@@ -0,0 +1,38 @@
+import { $textGroups, $locate } from '../find/findReplaceActions.js';
+import { wordsIn } from './spellDictionaries.js';
+/** Every word in the document its block's checker does not recognise. */
+export function $collectMisspellings(checkers) {
+    const found = [];
+    for (const group of $textGroups()) {
+        const direction = group[0].getParentOrThrow().getDirection();
+        const speller = direction === 'rtl' ? checkers.rtl : checkers.ltr;
+        if (!speller)
+            continue;
+        const text = group.map((node) => node.getTextContent()).join('');
+        for (const span of wordsIn(text)) {
+            if (speller.correct(span.word))
+                continue;
+            const start = $locate(group, span.start, false);
+            const end = $locate(group, span.end, true);
+            found.push({
+                word: span.word,
+                match: { anchorKey: start.key, anchorOffset: start.offset, focusKey: end.key, focusOffset: end.offset },
+                segments: segmentsOf(group, span.start, span.end),
+            });
+        }
+    }
+    return found;
+}
+function segmentsOf(group, start, end) {
+    const segments = [];
+    let offset = 0;
+    for (const node of group) {
+        const length = node.getTextContent().length;
+        const from = Math.max(start, offset);
+        const to = Math.min(end, offset + length);
+        if (to > from)
+            segments.push({ key: node.getKey(), start: from - offset, end: to - offset });
+        offset += length;
+    }
+    return segments;
+}

package/dist/spellcheck/spellingMenu.d.ts

@@ -0,0 +1,15 @@
+import type { FindMatch } from '../find/findReplaceActions.js';
+/** A word under the pointer, as a Lexical range, with the direction of its block. */
+export interface WordAtPoint {
+    word: string;
+    direction: 'ltr' | 'rtl';
+    match: FindMatch;
+}
+/** The DOM text node and offset under a viewport point, or null if the point is not on text. */
+export declare function textPointAt(x: number, y: number): {
+    node: Node;
+    offset: number;
+} | null;
+/** The whole word around an offset in a Lexical text node. Must run inside an editor read or update. */
+export declare function $wordAtDomPoint(domText: Node, offset: number): WordAtPoint | null;
+//# sourceMappingURL=spellingMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spellingMenu.d.ts","sourceRoot":"","sources":["../../src/spellcheck/spellingMenu.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAG5D,qFAAqF;AACrF,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,KAAK,GAAG,KAAK,CAAC;IACzB,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,gGAAgG;AAChG,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAUvF;AAED,wGAAwG;AACxG,wBAAgB,eAAe,CAAC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAWjF"}

package/dist/spellcheck/spellingMenu.js

@@ -0,0 +1,27 @@
+import { $getNearestNodeFromDOMNode, $isTextNode } from 'lexical';
+import { wordsIn } from './spellDictionaries.js';
+/** The DOM text node and offset under a viewport point, or null if the point is not on text. */
+export function textPointAt(x, y) {
+    const doc = document;
+    if (doc.caretPositionFromPoint) {
+        const position = doc.caretPositionFromPoint(x, y);
+        return position && position.offsetNode.nodeType === Node.TEXT_NODE ? { node: position.offsetNode, offset: position.offset } : null;
+    }
+    const range = doc.caretRangeFromPoint?.(x, y);
+    return range && range.startContainer.nodeType === Node.TEXT_NODE ? { node: range.startContainer, offset: range.startOffset } : null;
+}
+/** The whole word around an offset in a Lexical text node. Must run inside an editor read or update. */
+export function $wordAtDomPoint(domText, offset) {
+    const node = $getNearestNodeFromDOMNode(domText);
+    if (!$isTextNode(node))
+        return null;
+    const text = node.getTextContent();
+    const span = wordsIn(text).find((s) => offset >= s.start && offset <= s.end);
+    if (!span)
+        return null;
+    return {
+        word: span.word,
+        direction: node.getParentOrThrow().getDirection() === 'rtl' ? 'rtl' : 'ltr',
+        match: { anchorKey: node.getKey(), anchorOffset: span.start, focusKey: node.getKey(), focusOffset: span.end },
+    };
+}

package/dist/theme/editor.css

@@ -870,3 +870,188 @@
   opacity: 0.8;
   white-space: nowrap;
 }
+
+/* Spellcheck panel: same top-right floating spot as the find widget, which
+   closes when this opens. */
+.likhari-spell-panel {
+  position: absolute;
+  z-index: 5;
+  top: 8px;
+  right: 16px;
+  width: max-content;
+  max-width: min(360px, calc(100% - 32px));
+  max-height: 60%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 8px;
+  border: 1px solid var(--editor-line);
+  border-radius: 6px;
+  background: var(--editor-paper-dim);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  font-size: 13px;
+}
+
+.likhari-spell-panel[dir='rtl'] {
+  right: auto;
+  left: 16px;
+}
+
+.likhari-spell-header,
+.likhari-spell-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+
+.likhari-spell-controls select {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.likhari-spell-panel button {
+  padding: 2px 8px;
+  border: 1px solid var(--editor-line);
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.likhari-spell-panel button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.likhari-spell-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0 !important;
+  border: none !important;
+}
+
+.likhari-spell-note {
+  margin: 4px 0;
+  opacity: 0.8;
+}
+
+.likhari-spell-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.likhari-spell-list li {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 0;
+  border-top: 1px solid var(--editor-line);
+}
+
+.likhari-spell-word {
+  font-weight: 600;
+  color: #b42318 !important;
+}
+
+.likhari-spell-suggestion {
+  font-size: 12px;
+}
+
+/* Misspelled words, underlined like the browser's own spellcheck. Styled
+   through the CSS Custom Highlight API by SpellHighlightPlugin. */
+::highlight(likhari-spelling) {
+  text-decoration: red wavy underline;
+  text-decoration-skip-ink: none;
+}
+
+.likhari-spell-nav {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+  margin-bottom: 6px;
+}
+
+.likhari-spell-status {
+  opacity: 0.8;
+}
+
+.likhari-spell-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding-top: 6px;
+  border-top: 1px solid var(--editor-line);
+}
+
+.likhari-spell-suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+/* Auto-correct panel: the same floating spot as the spellcheck panel. */
+.likhari-autocorrect-panel {
+  position: absolute;
+  z-index: 5;
+  top: 8px;
+  right: 16px;
+  width: 260px;
+  max-width: calc(100% - 32px);
+  padding: 8px;
+  border: 1px solid var(--editor-line);
+  border-radius: 6px;
+  background: var(--editor-paper-dim);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  font-size: 13px;
+}
+
+.likhari-autocorrect-panel[dir='rtl'] {
+  right: auto;
+  left: 16px;
+}
+
+.likhari-autocorrect-field {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-bottom: 6px;
+}
+
+.likhari-autocorrect-field input,
+.likhari-autocorrect-field select {
+  padding: 3px 6px;
+  border: 1px solid var(--editor-line);
+  border-radius: 4px;
+  background: var(--editor-paper);
+  color: inherit;
+}
+
+.likhari-autocorrect-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.likhari-autocorrect-actions button {
+  align-self: flex-start;
+  padding: 2px 8px;
+  border: 1px solid var(--editor-line);
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.likhari-autocorrect-actions button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+

package/package.json

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