@inshapardaz/likhari-react 0.1.19-dev.184 → 0.1.19-dev.187

package/dist/EditorRoot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorRoot.d.ts","sourceRoot":"","sources":["../src/EditorRoot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAY1D,OAAO,KAAK,EAA8B,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEjF,OAAO,EAAyB,KAAK,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AACvF,OAAO,EAAwB,KAAK,mBAAmB,EAAE,KAAK,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAKzH,OAAO,EAAyB,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAOjE,OAAO,EAAgB,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAchF,OAAO,EAAgC,KAAK,MAAM,EAAE,MAAM,QAAQ,CAAC;AAMnE,yEAAyE;AACzE,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,YAAY,GAAG,KAAK,CAAC;AAEnE,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,QAAQ,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClD;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,KAAK,IAAI,CAAC;IACrD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAChD;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5C;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC;;;;;;;;;;;;;;;OAeG;IACH,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,uGAAuG;IACvG,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3E,6EAA6E;IAC7E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,SAAS;IACxB,UAAU,CAAC,MAAM,EAAE,QAAQ,GAAG,MAAM,CAAC;IACrC,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC;IAClD,iBAAiB,IAAI,OAAO,CAAC;IAC7B,cAAc,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC;IACnC,KAAK,IAAI,IAAI,CAAC;CACf;AAQD,eAAO,MAAM,UAAU,uGAqYrB,CAAC"}
+{"version":3,"file":"EditorRoot.d.ts","sourceRoot":"","sources":["../src/EditorRoot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAY1D,OAAO,KAAK,EAA8B,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEjF,OAAO,EAAyB,KAAK,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AACvF,OAAO,EAAwB,KAAK,mBAAmB,EAAE,KAAK,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAKzH,OAAO,EAAyB,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAOjE,OAAO,EAAgB,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAehF,OAAO,EAAgC,KAAK,MAAM,EAAE,MAAM,QAAQ,CAAC;AAMnE,yEAAyE;AACzE,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,YAAY,GAAG,KAAK,CAAC;AAEnE,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,QAAQ,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClD;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,KAAK,IAAI,CAAC;IACrD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAChD;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5C;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC;;;;;;;;;;;;;;;OAeG;IACH,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,uGAAuG;IACvG,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3E,6EAA6E;IAC7E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,SAAS;IACxB,UAAU,CAAC,MAAM,EAAE,QAAQ,GAAG,MAAM,CAAC;IACrC,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC;IAClD,iBAAiB,IAAI,OAAO,CAAC;IAC7B,cAAc,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC;IACnC,KAAK,IAAI,IAAI,CAAC;CACf;AAQD,eAAO,MAAM,UAAU,uGAwYrB,CAAC"}

package/dist/EditorRoot.js

@@ -28,6 +28,7 @@ import { PoetryResizer } from './blocks/PoetryResizer.js';
 import { DraftRestore } from './components/DraftRestore.js';
 import { FindReplaceBar } from './components/FindReplaceBar.js';
 import { SpellcheckPanel } from './components/SpellcheckPanel.js';
+import { SpellHighlightPlugin } from './spellcheck/SpellHighlightPlugin.js';
 import { LeaveDialog } from './components/LeaveDialog.js';
 import { clearDraft, createDraftId, hasDraftContent, pruneDrafts, writeDraft, } from './persistence/draftStorage.js';
 import { ImageOptionsContext } from './image/ImageOptionsContext.js';
@@ -291,7 +292,7 @@ export const EditorRoot = forwardRef(function EditorRoot({ documentId, initialCo
                                                 setFindOpen(false);
                                             }, isDirty: isDirty, showSave: showSave, fontOptions: fontOptions, direction: dir, locale: locale, drafts: autosave
                                                 ? { currentId: draftId, maxBytes: autosaveMaxBytes, adoptOnRestore: !documentId, onRestored: handleDraftRestored }
-                                                : undefined }), documentId && (_jsx(DraftRestore, { draftId: documentId, mode: restoreDraft, initialJson: initialContentJsonRef.current, locale: locale, onRestored: handleDraftRestored })), _jsxs("div", { className: "likhari-canvas-frame", children: [config.findReplace && findOpen && _jsx(FindReplaceBar, { strings: strings, dir: dir, onClose: () => setFindOpen(false) }), config.language.spellCheck && spellOpen && _jsx(SpellcheckPanel, { strings: strings, onClose: () => setSpellOpen(false) }), _jsx("div", { className: "likhari-canvas", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "likhari-content-editable", dir: dir, "aria-label": strings.editor.contentLabel }), placeholder: _jsx("div", { className: "likhari-placeholder", children: resolvedPlaceholder }), ErrorBoundary: LexicalErrorBoundary }) })] }), config.history && _jsx(HistoryPlugin, {}), (config.lists.bullet || config.lists.numbered || config.lists.check) && _jsx(ListPlugin, {}), config.lists.check && _jsx(CheckListPlugin, {}), config.links && _jsx(LinkPlugin, {}), config.links && _jsx(LinkPastePlugin, {}), config.blocks.pageBreak && _jsx(PageBreakPlugin, {}), config.columns && _jsx(LayoutPlugin, {}), config.footnotes && _jsx(FootnotePlugin, {}), config.poetry.enabled && _jsx(PoetryPlugin, {}), config.poetry.enabled && _jsx(PoetryResizer, {}), config.tables && _jsx(TablePlugin, { hasCellMerge: true, hasTabHandler: true }), config.blocks.horizontalRule && _jsx(HorizontalRulePlugin, {}), _jsx(EditorInstancePlugin, { instanceRef: editorInstanceRef }), _jsx(OnChangePlugin, { onChange: handleChange })] }) }), _jsx(LeaveDialog, { opened: leavePrompt !== null, canSave: Boolean(onSave), canSaveDraft: autosave || navigationGuard === 'save-draft', draftFailed: leavePrompt?.draftFailed ?? false, onSave: () => {
+                                                : undefined }), documentId && (_jsx(DraftRestore, { draftId: documentId, mode: restoreDraft, initialJson: initialContentJsonRef.current, locale: locale, onRestored: handleDraftRestored })), _jsxs("div", { className: "likhari-canvas-frame", children: [config.findReplace && findOpen && _jsx(FindReplaceBar, { strings: strings, dir: dir, onClose: () => setFindOpen(false) }), config.language.spellCheck && spellOpen && _jsx(SpellcheckPanel, { strings: strings, onClose: () => setSpellOpen(false) }), _jsx("div", { className: "likhari-canvas", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "likhari-content-editable", dir: dir, spellCheck: false, "aria-label": strings.editor.contentLabel }), placeholder: _jsx("div", { className: "likhari-placeholder", children: resolvedPlaceholder }), ErrorBoundary: LexicalErrorBoundary }) })] }), config.history && _jsx(HistoryPlugin, {}), (config.lists.bullet || config.lists.numbered || config.lists.check) && _jsx(ListPlugin, {}), config.lists.check && _jsx(CheckListPlugin, {}), config.links && _jsx(LinkPlugin, {}), config.links && _jsx(LinkPastePlugin, {}), config.blocks.pageBreak && _jsx(PageBreakPlugin, {}), config.language.spellCheck && _jsx(SpellHighlightPlugin, {}), config.columns && _jsx(LayoutPlugin, {}), config.footnotes && _jsx(FootnotePlugin, {}), config.poetry.enabled && _jsx(PoetryPlugin, {}), config.poetry.enabled && _jsx(PoetryResizer, {}), config.tables && _jsx(TablePlugin, { hasCellMerge: true, hasTabHandler: true }), config.blocks.horizontalRule && _jsx(HorizontalRulePlugin, {}), _jsx(EditorInstancePlugin, { instanceRef: editorInstanceRef }), _jsx(OnChangePlugin, { onChange: handleChange })] }) }), _jsx(LeaveDialog, { opened: leavePrompt !== null, canSave: Boolean(onSave), canSaveDraft: autosave || navigationGuard === 'save-draft', draftFailed: leavePrompt?.draftFailed ?? false, onSave: () => {
                                     handleSave();
                                     settleLeave(true);
                                 }, onSaveDraft: () => {

package/dist/components/SpellcheckPanel.js

@@ -29,7 +29,7 @@ export function SpellcheckPanel({ strings, onClose }) {
             return;
         setChecking(true);
         const resolved = await speller;
-        const found = editor.getEditorState().read(() => $collectMisspellings(resolved));
+        const found = editor.getEditorState().read(() => $collectMisspellings({ ltr: resolved, rtl: resolved }));
         setItems(found.map((m) => ({
             ...m,
             suggestions: resolved.suggest(m.word).slice(0, SUGGESTIONS_PER_WORD),
@@ -50,7 +50,7 @@ export function SpellcheckPanel({ strings, onClose }) {
         editor.update(() => {
             // The list can be stale if the document changed since it was checked:
             // only replace if the same word is still at the same place.
-            const current = $collectMisspellings(resolved).find((m) => m.word === item.word && m.match.anchorKey === item.match.anchorKey && m.match.anchorOffset === item.match.anchorOffset);
+            const current = $collectMisspellings({ ltr: resolved, rtl: resolved }).find((m) => m.word === item.word && m.match.anchorKey === item.match.anchorKey && m.match.anchorOffset === item.match.anchorOffset);
             if (current)
                 $replaceMatch(current.match, suggestion);
         }, { discrete: true });

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

@@ -1,9 +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 the speller does not recognise, with its position. */
-export declare function $collectMisspellings(speller: Speller): Misspelling[];
+/** 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

@@ -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,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,oFAAoF;AACpF,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,WAAW,EAAE,CAepE"}
+{"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

@@ -1,9 +1,13 @@
 import { $textGroups, $locate } from '../find/findReplaceActions.js';
 import { wordsIn } from './spellDictionaries.js';
-/** Every word in the document the speller does not recognise, with its position. */
-export function $collectMisspellings(speller) {
+/** 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))
@@ -13,8 +17,22 @@ export function $collectMisspellings(speller) {
             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/theme/editor.css

@@ -878,9 +878,11 @@
   z-index: 5;
   top: 8px;
   right: 16px;
-  width: 260px;
+  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;
@@ -897,12 +899,18 @@
 .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);
@@ -955,3 +963,10 @@
 .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;
+}

package/package.json

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