@inshapardaz/likhari-react 0.1.7 → 0.1.9-dev.94

package/dist/persistence/draftStorage.js

@@ -0,0 +1,198 @@
+/**
+ * Autosave-to-localStorage drafts (lexical-editor-spec.md §6.2). Each draft is
+ * keyed by an id: the host's `documentId` when it gives one (§6.1), otherwise
+ * a generated unique id, so editors without a `documentId` never overwrite each
+ * other's drafts. Every function is a no-op (never throws) when `localStorage`
+ * is unavailable (SSR, privacy mode) or a stored value is corrupt — autosave is
+ * best-effort, never a hard dependency.
+ */
+const KEY_PREFIX = 'likhari:draft:';
+const PREVIEW_LENGTH = 140;
+export function draftKey(id) {
+    return `${KEY_PREFIX}${id}`;
+}
+/** A new unique id for a draft whose editor has no `documentId`. */
+export function createDraftId() {
+    try {
+        if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function')
+            return crypto.randomUUID();
+    }
+    catch {
+        // fall through to the non-crypto id
+    }
+    return `draft-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+}
+/** Whether an id came from createDraftId() rather than a host's `documentId`. */
+export function isGeneratedDraftId(id) {
+    return /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(id) || /^draft-[0-9a-z]+-[0-9a-z]+$/.test(id);
+}
+function getLocalStorage() {
+    try {
+        return typeof localStorage === 'undefined' ? null : localStorage;
+    }
+    catch {
+        // Some browsers throw on accessing localStorage in certain privacy modes.
+        return null;
+    }
+}
+function collectText(node, parts, state) {
+    if (node.type === 'text' && typeof node.text === 'string') {
+        if (node.text.trim())
+            state.hasContent = true;
+        parts.push(node.text);
+    }
+    else if (node.type === 'linebreak') {
+        parts.push(' ');
+    }
+    else if (node.type === 'image') {
+        state.hasContent = true;
+        if (node.altText)
+            parts.push(`[${node.altText}]`);
+    }
+    for (const child of node.children ?? [])
+        collectText(child, parts, state);
+    // Block boundaries read as a space in a one-line preview.
+    if (node.children && node.type !== 'root')
+        parts.push(' ');
+}
+function summarize(json) {
+    try {
+        const root = JSON.parse(json).root;
+        if (!root)
+            return { preview: '', hasContent: false };
+        const parts = [];
+        const state = { hasContent: false };
+        collectText(root, parts, state);
+        const text = parts.join('').replace(/\s+/g, ' ').trim();
+        const preview = text.length > PREVIEW_LENGTH ? `${text.slice(0, PREVIEW_LENGTH).trimEnd()}…` : text;
+        return { preview, hasContent: state.hasContent };
+    }
+    catch {
+        return { preview: '', hasContent: false };
+    }
+}
+/** One-line text preview of a Lexical JSON document ('' when it has no text). */
+export function extractPreview(json) {
+    return summarize(json).preview;
+}
+/** Whether a Lexical JSON document has any text or image (a blank one isn't worth a draft). */
+export function hasDraftContent(json) {
+    return summarize(json).hasContent;
+}
+function parseDraft(raw) {
+    if (!raw)
+        return null;
+    try {
+        const parsed = JSON.parse(raw);
+        if (typeof parsed.json !== 'string' || typeof parsed.savedAt !== 'number' || parsed.version !== 1)
+            return null;
+        return parsed;
+    }
+    catch {
+        return null;
+    }
+}
+export function readDraft(id) {
+    const storage = getLocalStorage();
+    if (!storage)
+        return null;
+    try {
+        return parseDraft(storage.getItem(draftKey(id)));
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Best-effort write; returns whether the draft was actually stored (callers that
+ * promise the user a saved draft must check). Skips (rather than throwing) when `json` exceeds
+ * `maxBytes` — localStorage has a shared ~5-10MB per-origin ceiling (§6.2), so a
+ * single large document (e.g. embedded base64 images) must not be allowed to
+ * autosave past a caller-configured limit — or when the write itself fails
+ * (quota exceeded, privacy mode).
+ */
+export function writeDraft(id, json, maxBytes, sourceId) {
+    const storage = getLocalStorage();
+    if (!storage)
+        return false;
+    // .length (UTF-16 code units) over-estimates UTF-8 byte size for any
+    // non-Latin text, which only makes this check more conservative — fine
+    // for a soft cap that doesn't need to be exact.
+    if (json.length > maxBytes)
+        return false;
+    const draft = { json, savedAt: Date.now(), version: 1, preview: extractPreview(json) };
+    if (sourceId)
+        draft.sourceId = sourceId;
+    try {
+        storage.setItem(draftKey(id), JSON.stringify(draft));
+        return true;
+    }
+    catch {
+        // Quota exceeded or similar — autosave is best-effort.
+        return false;
+    }
+}
+export function clearDraft(id) {
+    const storage = getLocalStorage();
+    if (!storage)
+        return;
+    try {
+        storage.removeItem(draftKey(id));
+    }
+    catch {
+        // ignore
+    }
+}
+/** Every stored draft, newest first. */
+export function listDrafts() {
+    const storage = getLocalStorage();
+    if (!storage)
+        return [];
+    const entries = [];
+    try {
+        for (let i = 0; i < storage.length; i++) {
+            const key = storage.key(i);
+            if (!key || !key.startsWith(KEY_PREFIX))
+                continue;
+            const draft = parseDraft(storage.getItem(key));
+            if (draft)
+                entries.push({ id: key.slice(KEY_PREFIX.length), draft });
+        }
+    }
+    catch {
+        return entries;
+    }
+    return entries.sort((a, b) => b.draft.savedAt - a.draft.savedAt);
+}
+/**
+ * Keeps a draft that is about to be overwritten or ignored: copies it to a new
+ * generated id (remembering `sourceId`) so it stays in the drafts list.
+ * Returns the new id, or null if nothing could be copied.
+ */
+export function archiveDraft(id) {
+    const storage = getLocalStorage();
+    const draft = readDraft(id);
+    if (!storage || !draft)
+        return null;
+    const archivedId = createDraftId();
+    try {
+        storage.setItem(draftKey(archivedId), JSON.stringify({ ...draft, sourceId: draft.sourceId ?? id }));
+        return archivedId;
+    }
+    catch {
+        return null;
+    }
+}
+/** Deletes the oldest drafts beyond `max`, never touching `keepIds`. */
+export function pruneDrafts(max, keepIds = []) {
+    if (max < 1)
+        return;
+    const removable = listDrafts().filter((entry) => !keepIds.includes(entry.id));
+    const kept = listDrafts().length - removable.length;
+    const excess = removable.length + kept - max;
+    if (excess <= 0)
+        return;
+    // removable is newest first, so the oldest are at the end.
+    for (const entry of removable.slice(-excess))
+        clearDraft(entry.id);
+}

package/dist/persistence/draftUi.d.ts

@@ -0,0 +1,9 @@
+import type { LexicalEditor } from 'lexical';
+import type { Locale } from '../i18n/index.js';
+/** Replaces the editor's content with a stored draft's Lexical JSON. Returns
+ * false (leaving the editor untouched) if the draft is corrupt or from an
+ * incompatible node schema, rather than throwing. */
+export declare function applyDraftToEditor(editor: LexicalEditor, json: string): boolean;
+/** A draft's save time as a short localized date and time. */
+export declare function formatDraftTime(savedAt: number, locale: Locale): string;
+//# sourceMappingURL=draftUi.d.ts.map

package/dist/persistence/draftUi.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"draftUi.d.ts","sourceRoot":"","sources":["../../src/persistence/draftUi.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAEtC;;qDAEqD;AACrD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAO/E;AAID,8DAA8D;AAC9D,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAOvE"}

package/dist/persistence/draftUi.js

@@ -0,0 +1,23 @@
+/** Replaces the editor's content with a stored draft's Lexical JSON. Returns
+ * false (leaving the editor untouched) if the draft is corrupt or from an
+ * incompatible node schema, rather than throwing. */
+export function applyDraftToEditor(editor, json) {
+    try {
+        editor.setEditorState(editor.parseEditorState(json));
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+const INTL_LOCALES = { en: 'en', ur: 'ur', 'pa-shahmukhi': 'pa-Arab' };
+/** A draft's save time as a short localized date and time. */
+export function formatDraftTime(savedAt, locale) {
+    const date = new Date(savedAt);
+    try {
+        return new Intl.DateTimeFormat(INTL_LOCALES[locale], { dateStyle: 'medium', timeStyle: 'short' }).format(date);
+    }
+    catch {
+        return date.toLocaleString();
+    }
+}

package/dist/theme/EditorThemeProvider.d.ts

@@ -1,5 +1,4 @@
 import { type MantineThemeOverride } from '@mantine/core';
-import '@mantine/core/styles.css';
 import './editor.css';
 export interface EditorThemeProviderProps {
     theme?: MantineThemeOverride;

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

@@ -1 +1 @@
-{"version":3,"file":"EditorThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/EditorThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,0BAA0B,CAAC;AAIlC,OAAO,cAAc,CAAC;AAsBtB,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B;iFAC6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;;;;;OAWG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAE,wBAAwB,+BA+C1H"}
+{"version":3,"file":"EditorThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/EditorThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAO3E,OAAO,cAAc,CAAC;AAsBtB,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B;iFAC6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;;;;;OAWG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAE,wBAAwB,+BA+C1H"}

package/dist/theme/EditorThemeProvider.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { MantineProvider } from '@mantine/core';
-import '@mantine/core/styles.css';
+// Mantine is a peer dependency (docs/mantine-headless-theming.md §4 rule 1):
+// the host imports '@mantine/core/styles.css' itself, once, in its own entry
+// point, so it controls load order. This package must not import it itself.
 import { buildThemeCss } from '@inshapardaz/likhari-core';
 import { defaultMantineTheme } from './mantineTheme.js';
 import { generateAccentCssVars, generateAccentShades } from './accentColor.js';

package/dist/theme/editor.css

@@ -253,6 +253,37 @@
   margin: 1.5em 0;
 }
 
+/* Tables — cell merge/split is deliberately out of scope for now (a flagged
+   open risk, lexical-editor-spec.md §12 item 3, needing its own scope
+   decision); TablePlugin is configured with hasCellMerge={false} to keep
+   every table a plain grid until that's resolved. */
+.likhari-table {
+  border-collapse: collapse;
+  margin: 1em 0;
+  width: 100%;
+}
+
+.likhari-table-row {
+  border-bottom: 1px solid var(--editor-line);
+}
+
+.likhari-table-cell {
+  border: 1px solid var(--editor-line);
+  padding: 6px 10px;
+  min-width: 72px;
+  vertical-align: top;
+}
+
+.likhari-table-cell-header {
+  background: var(--editor-paper-dim);
+  font-weight: 600;
+  text-align: start;
+}
+
+.likhari-table-cell-selected {
+  background: var(--editor-accent-soft);
+}
+
 /* Images — block-level figure; the caption is static text (edited in the
    image's dialog), and a selected image gets a corner resize handle. */
 .likhari-image-block {
@@ -370,3 +401,77 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+/* Restore-draft banner: a strip between the toolbar and the canvas. Uses the
+   editor's own tokens, so it follows the accent color and dark mode. */
+.likhari-draft-banner {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  padding: 8px 12px;
+  background: var(--editor-accent-soft);
+  border-bottom: 1px solid var(--editor-line);
+  color: var(--editor-ink);
+  font-size: 13px;
+}
+
+.likhari-draft-banner-message {
+  display: flex;
+  flex: 1 1 240px;
+  align-items: center;
+  gap: 8px;
+}
+
+.likhari-draft-banner-message svg {
+  flex-shrink: 0;
+  color: var(--editor-accent);
+}
+
+.likhari-draft-banner-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.likhari-draft-banner-button {
+  height: 28px;
+  padding: 0 12px;
+  border: 1px solid var(--editor-line-strong);
+  border-radius: 6px;
+  background: var(--editor-paper);
+  color: var(--editor-ink);
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.likhari-draft-banner-button:hover {
+  background: var(--editor-paper-dim);
+}
+
+.likhari-draft-banner-button[data-variant='primary'] {
+  border-color: var(--editor-accent);
+  background: var(--editor-accent);
+  color: var(--editor-paper);
+}
+
+.likhari-draft-banner-button[data-variant='primary']:hover {
+  filter: brightness(1.1);
+}
+
+.likhari-draft-banner-button[data-variant='danger'] {
+  border-color: transparent;
+  background: transparent;
+  color: var(--editor-danger);
+}
+
+.likhari-draft-banner-button[data-variant='danger']:hover {
+  background: var(--editor-paper-dim);
+}
+
+.likhari-draft-banner-button:focus-visible {
+  outline: 2px solid var(--editor-accent);
+  outline-offset: 1px;
+}

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,kBA8BzB,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,kBAmCzB,CAAC"}

package/dist/theme/editorTheme.js

@@ -33,4 +33,9 @@ export const editorTheme = {
     },
     hr: 'likhari-hr',
     image: 'likhari-image-block',
+    table: 'likhari-table',
+    tableRow: 'likhari-table-row',
+    tableCell: 'likhari-table-cell',
+    tableCellHeader: 'likhari-table-cell-header',
+    tableCellSelected: 'likhari-table-cell-selected',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inshapardaz/likhari-react",
-  "version": "0.1.7",
+  "version": "0.1.9-dev.94",
   "description": "React implementation of the Likhari editor, built on @lexical/react.",
   "license": "MIT",
   "repository": {
@@ -16,6 +16,7 @@
       "development": "./src/index.ts",
       "import": "./dist/index.js"
     },
+    "./styles.css": "./dist/theme/editor.css",
     "./package.json": "./package.json"
   },
   "files": [
@@ -37,16 +38,21 @@
     "@lexical/react": "^0.20.0",
     "@lexical/rich-text": "^0.20.0",
     "@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",
-    "@mantine/core": "^9.6.3",
-    "@mantine/hooks": "^9.6.3",
     "@tabler/icons-react": "^3.46.0",
     "lexical": "^0.20.0"
   },
   "peerDependencies": {
+    "@mantine/core": "^9.6.3",
+    "@mantine/hooks": "^9.6.3",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@mantine/core": "^9.6.3",
+    "@mantine/hooks": "^9.6.3"
   }
 }