@inshapardaz/likhari-react 0.1.18 → 0.1.19-dev.182

package/dist/spellcheck/spellDictionaries.d.ts

@@ -0,0 +1,40 @@
+/** Languages the spellchecker has a dictionary slot for. */
+export type SpellLanguage = 'en' | 'ur' | 'pa-shahmukhi';
+/** A Hunspell dictionary as the two text files every Hunspell dictionary ships with. */
+export interface HunspellFiles {
+    /** Affix file: language, encoding, character rules. */
+    aff: string;
+    /** Dictionary file: one word per line, with optional affix flags. */
+    dic: string;
+}
+export interface Speller {
+    correct(word: string): boolean;
+    suggest(word: string): string[];
+}
+type Loader = () => Promise<HunspellFiles>;
+/**
+ * Registers a dictionary for a language. Call once at startup with files you
+ * have licence to ship — e.g. the Urdu `.aff`/`.dic` pair — either as strings
+ * or as a loader that fetches them on demand. Registering again replaces the
+ * previous dictionary for that language.
+ */
+export declare function registerSpellDictionary(language: SpellLanguage, files: HunspellFiles | Loader): void;
+/** Whether a dictionary is registered for the language. */
+export declare function hasSpellDictionary(language: SpellLanguage): boolean;
+/**
+ * The speller for a language, loading its dictionary the first time it is
+ * asked for. Resolves to null when no dictionary is registered, so callers
+ * can skip spellchecking that language rather than flag every word.
+ */
+export declare function getSpeller(language: SpellLanguage): Promise<Speller> | null;
+/** A word in a text, with its position as character offsets. */
+export interface WordSpan {
+    word: string;
+    start: number;
+    end: number;
+}
+export declare function wordsIn(text: string): WordSpan[];
+/** The words in `text` the speller does not recognise. */
+export declare function misspellingsIn(text: string, speller: Speller): WordSpan[];
+export {};
+//# sourceMappingURL=spellDictionaries.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spellDictionaries.d.ts","sourceRoot":"","sources":["../../src/spellcheck/spellDictionaries.ts"],"names":[],"mappings":"AAEA,4DAA4D;AAC5D,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,cAAc,CAAC;AAEzD,wFAAwF;AACxF,MAAM,WAAW,aAAa;IAC5B,uDAAuD;IACvD,GAAG,EAAE,MAAM,CAAC;IACZ,qEAAqE;IACrE,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,OAAO;IACtB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IAC/B,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CACjC;AAED,KAAK,MAAM,GAAG,MAAM,OAAO,CAAC,aAAa,CAAC,CAAC;AAmB3C;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,GAAG,MAAM,GAAG,IAAI,CAGpG;AAED,2DAA2D;AAC3D,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,aAAa,GAAG,OAAO,CAEnE;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,QAAQ,EAAE,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI,CAS3E;AAED,gEAAgE;AAChE,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb;AASD,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,QAAQ,EAAE,CAMhD;AAED,0DAA0D;AAC1D,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,QAAQ,EAAE,CAEzE"}

package/dist/spellcheck/spellDictionaries.js

@@ -0,0 +1,62 @@
+import nspell from 'nspell';
+const loaders = new Map();
+const spellers = new Map();
+async function fetchText(url) {
+    const response = await fetch(url);
+    if (!response.ok)
+        throw new Error(`Spellcheck dictionary failed to load: ${url}`);
+    return response.text();
+}
+/** English ships with the editor: its files are fetched on first use. */
+const englishLoader = async () => ({
+    aff: await fetchText(new URL('./dictionaries/en/index.aff', import.meta.url).href),
+    dic: await fetchText(new URL('./dictionaries/en/index.dic', import.meta.url).href),
+});
+loaders.set('en', englishLoader);
+/**
+ * Registers a dictionary for a language. Call once at startup with files you
+ * have licence to ship — e.g. the Urdu `.aff`/`.dic` pair — either as strings
+ * or as a loader that fetches them on demand. Registering again replaces the
+ * previous dictionary for that language.
+ */
+export function registerSpellDictionary(language, files) {
+    loaders.set(language, typeof files === 'function' ? files : async () => files);
+    spellers.delete(language);
+}
+/** Whether a dictionary is registered for the language. */
+export function hasSpellDictionary(language) {
+    return loaders.has(language);
+}
+/**
+ * The speller for a language, loading its dictionary the first time it is
+ * asked for. Resolves to null when no dictionary is registered, so callers
+ * can skip spellchecking that language rather than flag every word.
+ */
+export function getSpeller(language) {
+    const loader = loaders.get(language);
+    if (!loader)
+        return null;
+    let speller = spellers.get(language);
+    if (!speller) {
+        speller = loader().then(({ aff, dic }) => nspell(aff, dic));
+        spellers.set(language, speller);
+    }
+    return speller;
+}
+/**
+ * Letters and combining marks, with apostrophes inside a word kept. The
+ * Unicode classes cover Arabic-script letters and their diacritics, so Urdu
+ * and Shahmukhi words are found the same way English ones are.
+ */
+const WORD = /[\p{L}\p{M}]+(?:['’][\p{L}\p{M}]+)*/gu;
+export function wordsIn(text) {
+    return [...text.matchAll(WORD)].map((match) => ({
+        word: match[0],
+        start: match.index ?? 0,
+        end: (match.index ?? 0) + match[0].length,
+    }));
+}
+/** The words in `text` the speller does not recognise. */
+export function misspellingsIn(text, speller) {
+    return wordsIn(text).filter((span) => !speller.correct(span.word));
+}

package/dist/theme/editor.css

@@ -160,6 +160,14 @@
 /* Canvas — editor-ui-design-spec.md §4. flex: 1 1 auto + min-height: 0 lets
    this pane absorb the root's height and scroll internally instead of the
    editor (and the page around it) growing to fit the content. */
+.likhari-canvas-frame {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
 .likhari-canvas {
   position: relative;
   flex: 1 1 auto;
@@ -374,6 +382,169 @@
   content: '[' counter(likhari-footnote-item) '] ';
 }
 
+/* Poetry couplets (lexical-editor-spec.md §4.11, editor-ui-design-spec.md §4).
+   Own type scale and spacing, distinct from body text — the .likhari-ltr/
+   .likhari-rtl per-block classes (above) already switch font-family for this
+   element same as any other block; these rules layer poetry's own size/
+   line-height/gap on top, combined with those same classes.
+   Capped width + auto margins read verse as a centered block on the page —
+   conventional poetry typesetting — rather than a full-width paragraph where
+   a short line just hugs the start edge regardless of its own text-align. */
+.likhari-poetry {
+  box-sizing: border-box;
+  margin: 0 auto 1.4em auto;
+  max-width: 70%;
+  /* A visible boundary while editing, same affordance as a table's own
+     border — poetry couplets are a distinct structural block, not a plain
+     paragraph, and should read as one at a glance. */
+  border: 1px dashed var(--editor-line-strong);
+  border-radius: 6px;
+  padding: 10px 16px;
+}
+
+.likhari-poetry.likhari-ltr {
+  font-size: 15px;
+  line-height: 1.6;
+}
+
+.likhari-poetry.likhari-rtl {
+  font-size: 20px;
+  line-height: 2.1;
+}
+
+/* Misra lines sit tight against each other within a couplet — the generic
+   .likhari-paragraph margin would otherwise add the same gap between a
+   couplet's own two lines as between separate couplets within the same
+   block, losing the pairing entirely. */
+.likhari-poetry .likhari-paragraph {
+  margin: 0;
+}
+
+/* A poetry block is "one object with multiple couplets, add/remove like
+   table rows" — so couplet boundaries get the same visible divider as a
+   table's internal row borders, not just extra space. Every couplet but
+   the first (nth-child(odd), since each couplet is two paragraph
+   children — its first misra always lands on an odd position) gets a
+   border-top in place of the previous couplet's margin-bottom. */
+.likhari-poetry--single .likhari-paragraph:nth-child(odd):not(:first-child) {
+  border-top: 1px dashed var(--editor-line-strong);
+  margin-top: var(--poetry-couplet-gap);
+  padding-top: calc(var(--poetry-couplet-gap) * 0.6);
+}
+
+.likhari-poetry--spacing-compact { --poetry-couplet-gap: 0.4em; }
+.likhari-poetry--spacing-normal { --poetry-couplet-gap: 1em; }
+.likhari-poetry--spacing-relaxed { --poetry-couplet-gap: 1.8em; }
+.likhari-poetry--spacing-loose { --poetry-couplet-gap: 2.8em; }
+
+.likhari-poetry--gutter-compact { --poetry-gutter: 8px; }
+.likhari-poetry--gutter-normal { --poetry-gutter: 20px; }
+.likhari-poetry--gutter-relaxed { --poetry-gutter: 32px; }
+.likhari-poetry--gutter-loose { --poetry-gutter: 48px; }
+
+.likhari-poetry--stagger-compact { --poetry-stagger-width: 50%; }
+.likhari-poetry--stagger-normal { --poetry-stagger-width: 65%; }
+.likhari-poetry--stagger-relaxed { --poetry-stagger-width: 75%; }
+.likhari-poetry--stagger-loose { --poetry-stagger-width: 85%; }
+
+/* Staggered: couplets are the same flat misra paragraphs as single column,
+   but each couplet's two misras are placed in a 65%-wide box that alternates
+   sides — the first couplet pushed to the start edge, the next to the end
+   edge, and so on. Logical properties keep the alternation mirrored for RTL. */
+.likhari-poetry--staggered .likhari-paragraph {
+  width: var(--poetry-stagger-width, 65%);
+}
+
+.likhari-poetry--staggered .likhari-paragraph:nth-child(4n+1),
+.likhari-poetry--staggered .likhari-paragraph:nth-child(4n+2) {
+  margin-inline-end: auto;
+}
+
+.likhari-poetry--staggered .likhari-paragraph:nth-child(4n+3),
+.likhari-poetry--staggered .likhari-paragraph:nth-child(4n+4) {
+  margin-inline-start: auto;
+}
+
+.likhari-poetry--staggered .likhari-paragraph:nth-child(odd):not(:first-child) {
+  border-top: 1px dashed var(--editor-line-strong);
+  margin-top: var(--poetry-couplet-gap);
+  padding-top: calc(var(--poetry-couplet-gap) * 0.6);
+}
+
+.likhari-poetry--two-column .likhari-layout-container {
+  margin: 0;
+  /* No grid gap — the column divider sits exactly on the track boundary,
+     so spacing instead comes from matching padding on each side of it,
+     which keeps the gutter visually even on both sides of the line. */
+  gap: 0;
+}
+
+/* One row per couplet in two-column layout — same table-row-border
+   treatment as the single-column rule above, between couplets instead of
+   within one. */
+.likhari-poetry--two-column .likhari-layout-container:not(:first-child) {
+  border-top: 1px dashed var(--editor-line-strong);
+  margin-top: var(--poetry-couplet-gap);
+  padding-top: calc(var(--poetry-couplet-gap) * 0.6);
+}
+
+.likhari-poetry--two-column .likhari-layout-item {
+  text-align: inherit;
+}
+
+/* A centered couplet: a two-column row holding one item (see poetryActions.ts's
+   $setCoupletCentered) — narrowed to the middle of the block, with no column
+   divider or gutter since there's only one column. */
+.likhari-poetry--two-column > .likhari-layout-container:has(> .likhari-layout-item:only-child) {
+  width: 60%;
+  margin-inline: auto;
+}
+
+.likhari-poetry--two-column .likhari-layout-item:only-child {
+  padding-inline-end: 0;
+}
+
+.likhari-poetry--two-column .likhari-layout-item:first-child {
+  padding-inline-end: var(--poetry-gutter, 20px);
+}
+
+/* A visible divider between misra columns, same dashed language as the
+   couplet's own border — matches a table's internal cell borders. */
+.likhari-poetry--two-column .likhari-layout-item:not(:first-child) {
+  border-inline-start: 1px dashed var(--editor-line-strong);
+  padding-inline-start: var(--poetry-gutter, 20px);
+}
+
+/* PoetryResizer.tsx's drag handle — portaled to a fixed position over the
+   active couplet's inline-end edge, so top/left are set inline per drag. */
+.likhari-poetry-resize-handle {
+  position: fixed;
+  width: 10px;
+  /* Physical, not logical: PoetryResizer.tsx already computes `left` as the
+     couplet's actual edge in viewport coordinates for either direction, so
+     centering the handle on it must stay physical too. */
+  margin-left: -5px;
+  cursor: ew-resize;
+  touch-action: none;
+  z-index: 20;
+}
+
+.likhari-poetry-resize-handle::before {
+  content: '';
+  display: block;
+  width: 3px;
+  height: 100%;
+  margin-inline: auto;
+  border-radius: 2px;
+  background: var(--editor-accent);
+  opacity: 0;
+  transition: opacity 0.1s ease;
+}
+
+.likhari-poetry-resize-handle:hover::before {
+  opacity: 0.6;
+}
+
 .likhari-table {
   border-collapse: collapse;
   margin: 1em 0;
@@ -592,3 +763,110 @@
   outline: 2px solid var(--editor-accent);
   outline-offset: 1px;
 }
+
+/* Floats over the top-right of the canvas, so it takes no space from the
+   toolbar or the page. */
+.likhari-find-widget {
+  position: absolute;
+  z-index: 5;
+  top: 8px;
+  right: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: fit-content;
+  padding: 6px;
+  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;
+}
+
+/* Both rows share one grid. Columns: chevron, input, then two narrow tracks
+   that hold either the match count (search row) or the two replace buttons
+   (replace row), then prev, next and close. */
+.likhari-find-row {
+  display: grid;
+  grid-template-columns: 24px 180px 24px 24px 24px 24px 24px;
+  align-items: center;
+  column-gap: 4px;
+}
+
+.likhari-find-replace-input {
+  grid-column: 2;
+}
+
+.likhari-find-status {
+  grid-column: 3 / span 2;
+}
+
+.likhari-find-prev {
+  grid-column: 5;
+}
+
+.likhari-find-next {
+  grid-column: 6;
+}
+
+.likhari-find-close {
+  grid-column: 7;
+}
+
+.likhari-find-replace-one {
+  grid-column: 3;
+}
+
+.likhari-find-replace-all {
+  grid-column: 4;
+}
+
+.likhari-find-widget[dir='rtl'] {
+  right: auto;
+  left: 16px;
+}
+
+.likhari-find-widget input {
+  width: 100%;
+  min-width: 0;
+  padding: 3px 6px;
+  border: 1px solid var(--editor-line);
+  border-radius: 4px;
+  background: var(--editor-paper);
+  color: inherit;
+}
+
+.likhari-find-widget button {
+  padding: 2px 8px;
+  border: 1px solid var(--editor-line);
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.likhari-find-widget button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.likhari-find-widget .likhari-find-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+}
+
+.likhari-find-icon-spacer {
+  display: block;
+}
+
+.likhari-find-status {
+  text-align: end;
+  opacity: 0.8;
+  white-space: nowrap;
+}

package/dist/theme/editorTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editorTheme.d.ts","sourceRoot":"","sources":["../../src/theme/editorTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,kBA+CzB,CAAC"}
+{"version":3,"file":"editorTheme.d.ts","sourceRoot":"","sources":["../../src/theme/editorTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,kBAgDzB,CAAC"}

package/dist/theme/editorTheme.js

@@ -45,6 +45,7 @@ export const editorTheme = {
     footnoteReference: 'likhari-footnote-ref',
     footnoteList: 'likhari-footnote-list',
     footnoteItem: 'likhari-footnote-item',
+    poetry: 'likhari-poetry',
     table: 'likhari-table',
     tableRow: 'likhari-table-row',
     tableCell: 'likhari-table-cell',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inshapardaz/likhari-react",
-  "version": "0.1.18",
+  "version": "0.1.19-dev.182",
   "description": "React implementation of the Likhari editor, built on @lexical/react.",
   "license": "MIT",
   "repository": {
@@ -29,10 +29,12 @@
     "*.css"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.build.json && node ../../scripts/fix-esm-extensions.mjs ./dist && node ../../scripts/copy-assets.mjs src dist \"**/*.css\"",
+    "build": "tsc -p tsconfig.build.json && node ../../scripts/fix-esm-extensions.mjs ./dist && node ../../scripts/copy-assets.mjs src dist \"**/*.css\" && node ../../scripts/copy-assets.mjs src dist \"**/*.aff\" && node ../../scripts/copy-assets.mjs src dist \"**/*.dic\" && node ../../scripts/copy-assets.mjs src dist \"**/*.txt\"",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
+    "@inshapardaz/likhari-converters": "^0.1.0",
+    "@inshapardaz/likhari-core": "^0.1.0",
     "@lexical/link": "^0.20.0",
     "@lexical/list": "^0.20.0",
     "@lexical/react": "^0.20.0",
@@ -40,10 +42,9 @@
     "@lexical/selection": "^0.20.0",
     "@lexical/table": "^0.20.0",
     "@lexical/utils": "^0.20.0",
-    "@inshapardaz/likhari-converters": "^0.1.0",
-    "@inshapardaz/likhari-core": "^0.1.0",
     "@tabler/icons-react": "^3.46.0",
-    "lexical": "^0.20.0"
+    "lexical": "^0.20.0",
+    "nspell": "^2.1.5"
   },
   "peerDependencies": {
     "@mantine/core": "^9.6.3",
@@ -53,6 +54,7 @@
   },
   "devDependencies": {
     "@mantine/core": "^9.6.3",
-    "@mantine/hooks": "^9.6.3"
+    "@mantine/hooks": "^9.6.3",
+    "@types/nspell": "^2.1.6"
   }
 }