@inshapardaz/likhari-react 0.1.7-dev.73 → 0.1.7-dev.75
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/EditorRoot.d.ts +18 -0
- package/dist/EditorRoot.d.ts.map +1 -1
- package/dist/EditorRoot.js +55 -3
- package/dist/i18n/strings.d.ts +2 -0
- package/dist/i18n/strings.d.ts.map +1 -1
- package/dist/i18n/strings.js +3 -0
- package/dist/persistence/draftStorage.d.ts +26 -0
- package/dist/persistence/draftStorage.d.ts.map +1 -0
- package/dist/persistence/draftStorage.js +71 -0
- package/dist/plugins/AutosaveRestorePlugin.d.ts +16 -0
- package/dist/plugins/AutosaveRestorePlugin.d.ts.map +1 -0
- package/dist/plugins/AutosaveRestorePlugin.js +33 -0
- package/dist/theme/EditorThemeProvider.d.ts +1 -0
- package/dist/theme/EditorThemeProvider.d.ts.map +1 -1
- package/dist/theme/EditorThemeProvider.js +1 -3
- package/package.json +3 -8
package/dist/EditorRoot.d.ts
CHANGED
|
@@ -70,6 +70,24 @@ export interface EditorRootProps {
|
|
|
70
70
|
* `[...DEFAULT_FONT_OPTIONS, { name: 'Mine', family: '"Mine", serif' }]`.
|
|
71
71
|
*/
|
|
72
72
|
fontOptions?: FontOption[];
|
|
73
|
+
/**
|
|
74
|
+
* Debounced autosave of the current content to `localStorage`, namespaced
|
|
75
|
+
* by `documentId` (lexical-editor-spec.md §6.1–§6.2) — a resilience net
|
|
76
|
+
* against an accidental tab close, independent of `onSave`/the Save
|
|
77
|
+
* button. Requires `documentId` to be set; a draft newer than the initial
|
|
78
|
+
* content prompts (via `window.confirm`) to restore it on mount, and is
|
|
79
|
+
* cleared on a successful explicit save. Defaults to `true`.
|
|
80
|
+
*/
|
|
81
|
+
autosave?: boolean;
|
|
82
|
+
/** Debounce delay before writing an autosave draft, in ms. Default `750`. */
|
|
83
|
+
autosaveDelayMs?: number;
|
|
84
|
+
/**
|
|
85
|
+
* Skips (rather than throwing) an autosave write whose JSON would exceed
|
|
86
|
+
* this size — `localStorage` has a shared ~5-10MB per-origin ceiling, so a
|
|
87
|
+
* single document with embedded base64 images must not be allowed to
|
|
88
|
+
* autosave past a sane limit. Default `2_000_000` (~2MB).
|
|
89
|
+
*/
|
|
90
|
+
autosaveMaxBytes?: number;
|
|
73
91
|
}
|
|
74
92
|
export interface EditorRef {
|
|
75
93
|
getContent(format: FormatId): string;
|
package/dist/EditorRoot.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorRoot.d.ts","sourceRoot":"","sources":["../src/EditorRoot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAU1D,OAAO,KAAK,EAAe,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAClE,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;
|
|
1
|
+
{"version":3,"file":"EditorRoot.d.ts","sourceRoot":"","sources":["../src/EditorRoot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAU1D,OAAO,KAAK,EAAe,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAClE,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;AAMjE,OAAO,EAAgC,KAAK,MAAM,EAAE,MAAM,QAAQ,CAAC;AAKnE,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,OAAO,CAAC,QAAQ,EAAE,cAAc,GAAG,YAAY,CAAC,CAAC;IACzD,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;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6EAA6E;IAC7E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;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,uGA6NrB,CAAC"}
|
package/dist/EditorRoot.js
CHANGED
|
@@ -17,19 +17,24 @@ import { EditorThemeProvider } from './theme/EditorThemeProvider.js';
|
|
|
17
17
|
import { Toolbar } from './components/Toolbar.js';
|
|
18
18
|
import { injectUrduWebFontsCss } from './fonts/index.js';
|
|
19
19
|
import { LinkPastePlugin } from './plugins/LinkPastePlugin.js';
|
|
20
|
+
import { AutosaveRestorePlugin } from './plugins/AutosaveRestorePlugin.js';
|
|
21
|
+
import { clearDraft, writeDraft } from './persistence/draftStorage.js';
|
|
20
22
|
import { ImageOptionsContext } from './image/ImageOptionsContext.js';
|
|
21
23
|
import { PortalTargetContext } from './PortalTargetContext.js';
|
|
22
24
|
import { UiStringsContext, getStrings } from './i18n/index.js';
|
|
25
|
+
const DEFAULT_AUTOSAVE_DELAY_MS = 750;
|
|
26
|
+
const DEFAULT_AUTOSAVE_MAX_BYTES = 2000000;
|
|
23
27
|
function initialEditorStateJson(initialContent) {
|
|
24
28
|
if (!initialContent)
|
|
25
29
|
return undefined;
|
|
26
30
|
const state = defaultFormatRegistry.parse(initialContent.format, initialContent.value);
|
|
27
31
|
return JSON.stringify(state);
|
|
28
32
|
}
|
|
29
|
-
export const EditorRoot = forwardRef(function EditorRoot({ documentId, initialContent, featureConfig, featurePreset, theme, colorScheme, accentColor, locale = 'en', placeholder, height = '480px', onChange, onSave, showSave = Boolean(onSave), onImageUpload, fetchImage, fontOptions, }, ref) {
|
|
33
|
+
export const EditorRoot = forwardRef(function EditorRoot({ documentId, initialContent, featureConfig, featurePreset, theme, colorScheme, accentColor, locale = 'en', placeholder, height = '480px', onChange, onSave, showSave = Boolean(onSave), onImageUpload, fetchImage, fontOptions, autosave = true, autosaveDelayMs = DEFAULT_AUTOSAVE_DELAY_MS, autosaveMaxBytes = DEFAULT_AUTOSAVE_MAX_BYTES, }, ref) {
|
|
30
34
|
const config = useMemo(() => resolveFeatureConfig(featureConfig, featurePreset), [featureConfig, featurePreset]);
|
|
31
35
|
const strings = useMemo(() => getStrings(locale), [locale]);
|
|
32
36
|
const resolvedPlaceholder = placeholder ?? strings.editor.placeholder;
|
|
37
|
+
const autosaveEnabled = autosave && Boolean(documentId);
|
|
33
38
|
// The urdu-web-fonts stylesheets are needed for the font dropdown and for
|
|
34
39
|
// RTL content, whose canvas font (editor.css) is one of those families.
|
|
35
40
|
useEffect(() => {
|
|
@@ -47,17 +52,48 @@ export const EditorRoot = forwardRef(function EditorRoot({ documentId, initialCo
|
|
|
47
52
|
const editorStateRef = useRef(null);
|
|
48
53
|
const lastSavedJsonRef = useRef(null);
|
|
49
54
|
const [isDirty, setIsDirty] = useState(false);
|
|
55
|
+
const isDirtyRef = useRef(isDirty);
|
|
56
|
+
isDirtyRef.current = isDirty;
|
|
57
|
+
const autosaveTimerRef = useRef(null);
|
|
58
|
+
// Computed once, before the first autosave write could possibly run, so
|
|
59
|
+
// the restore-prompt plugin below can tell a stored draft that's merely
|
|
60
|
+
// identical to the initial content apart (no prompt needed) from one that
|
|
61
|
+
// actually represents newer, unsaved work.
|
|
62
|
+
const initialContentJsonRef = useRef(undefined);
|
|
63
|
+
if (initialContentJsonRef.current === undefined) {
|
|
64
|
+
initialContentJsonRef.current = initialEditorStateJson(initialContent);
|
|
65
|
+
}
|
|
50
66
|
const initialConfig = useMemo(() => ({
|
|
51
67
|
namespace: `likhari-editor-${documentId ?? 'anonymous'}`,
|
|
52
68
|
nodes: EDITOR_NODES,
|
|
53
69
|
theme: editorTheme,
|
|
54
|
-
editorState:
|
|
70
|
+
editorState: initialContentJsonRef.current,
|
|
55
71
|
onError(error) {
|
|
56
72
|
throw error;
|
|
57
73
|
},
|
|
58
74
|
}),
|
|
59
75
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
60
76
|
[]);
|
|
77
|
+
// beforeunload (lexical-editor-spec.md §6.4): the automatic half of the
|
|
78
|
+
// navigation guard — hasUnsavedChanges()/confirmDiscard() below are the
|
|
79
|
+
// imperative half a host's own router guard calls for in-app navigation,
|
|
80
|
+
// which the editor can't intercept on its own.
|
|
81
|
+
useEffect(() => {
|
|
82
|
+
if (typeof window === 'undefined')
|
|
83
|
+
return;
|
|
84
|
+
const handleBeforeUnload = (event) => {
|
|
85
|
+
if (!isDirtyRef.current)
|
|
86
|
+
return;
|
|
87
|
+
event.preventDefault();
|
|
88
|
+
event.returnValue = '';
|
|
89
|
+
};
|
|
90
|
+
window.addEventListener('beforeunload', handleBeforeUnload);
|
|
91
|
+
return () => window.removeEventListener('beforeunload', handleBeforeUnload);
|
|
92
|
+
}, []);
|
|
93
|
+
useEffect(() => () => {
|
|
94
|
+
if (autosaveTimerRef.current)
|
|
95
|
+
clearTimeout(autosaveTimerRef.current);
|
|
96
|
+
}, []);
|
|
61
97
|
useImperativeHandle(ref, () => ({
|
|
62
98
|
getContent(format) {
|
|
63
99
|
if (!editorStateRef.current)
|
|
@@ -94,6 +130,13 @@ export const EditorRoot = forwardRef(function EditorRoot({ documentId, initialCo
|
|
|
94
130
|
const json = JSON.stringify(state.toJSON());
|
|
95
131
|
setIsDirty(json !== lastSavedJsonRef.current);
|
|
96
132
|
onChange?.(state.toJSON());
|
|
133
|
+
if (autosaveEnabled && documentId) {
|
|
134
|
+
if (autosaveTimerRef.current)
|
|
135
|
+
clearTimeout(autosaveTimerRef.current);
|
|
136
|
+
autosaveTimerRef.current = setTimeout(() => {
|
|
137
|
+
writeDraft(documentId, json, autosaveMaxBytes);
|
|
138
|
+
}, autosaveDelayMs);
|
|
139
|
+
}
|
|
97
140
|
};
|
|
98
141
|
const handleSave = () => {
|
|
99
142
|
if (!editorStateRef.current)
|
|
@@ -103,6 +146,15 @@ export const EditorRoot = forwardRef(function EditorRoot({ documentId, initialCo
|
|
|
103
146
|
const content = defaultFormatRegistry.serialize(format, json);
|
|
104
147
|
lastSavedJsonRef.current = JSON.stringify(json);
|
|
105
148
|
setIsDirty(false);
|
|
149
|
+
// A successful explicit save supersedes any in-progress/queued autosave
|
|
150
|
+
// draft — don't let a stale one linger and falsely prompt to "restore"
|
|
151
|
+
// older content next time this document is opened (§6.2).
|
|
152
|
+
if (autosaveTimerRef.current) {
|
|
153
|
+
clearTimeout(autosaveTimerRef.current);
|
|
154
|
+
autosaveTimerRef.current = null;
|
|
155
|
+
}
|
|
156
|
+
if (documentId)
|
|
157
|
+
clearDraft(documentId);
|
|
106
158
|
onSave?.(content, format);
|
|
107
159
|
};
|
|
108
160
|
const dir = locale === 'en' ? 'ltr' : 'rtl';
|
|
@@ -111,5 +163,5 @@ export const EditorRoot = forwardRef(function EditorRoot({ documentId, initialCo
|
|
|
111
163
|
// rather than colliding on a shared one.
|
|
112
164
|
const portalTargetId = useId();
|
|
113
165
|
const portalTargetSelector = `#${CSS.escape(portalTargetId)}`;
|
|
114
|
-
return (_jsx(EditorThemeProvider, { theme: theme, colorScheme: colorScheme, accentColor: accentColor, scopeElementId: portalTargetId, children: _jsxs("div", { className: "likhari-root", dir: dir, ref: rootElementRef, "data-document-id": documentId, style: { height: typeof height === 'number' ? `${height}px` : height }, children: [_jsx("div", { id: portalTargetId, className: "likhari-portal-target" }), _jsx(PortalTargetContext.Provider, { value: portalTargetSelector, children: _jsx(UiStringsContext.Provider, { value: strings, children: _jsx(ImageOptionsContext.Provider, { value: imageOptions, children: _jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsx(Toolbar, { config: config, onSave: handleSave, isDirty: isDirty, showSave: showSave, fontOptions: fontOptions, direction: dir, locale: locale }), _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, {}), _jsx(OnChangePlugin, { onChange: handleChange })] }) }) }) })] }) }));
|
|
166
|
+
return (_jsx(EditorThemeProvider, { theme: theme, colorScheme: colorScheme, accentColor: accentColor, scopeElementId: portalTargetId, children: _jsxs("div", { className: "likhari-root", dir: dir, ref: rootElementRef, "data-document-id": documentId, style: { height: typeof height === 'number' ? `${height}px` : height }, children: [_jsx("div", { id: portalTargetId, className: "likhari-portal-target" }), _jsx(PortalTargetContext.Provider, { value: portalTargetSelector, children: _jsx(UiStringsContext.Provider, { value: strings, children: _jsx(ImageOptionsContext.Provider, { value: imageOptions, children: _jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsx(Toolbar, { config: config, onSave: handleSave, isDirty: isDirty, showSave: showSave, fontOptions: fontOptions, direction: dir, locale: locale }), _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, {}), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(AutosaveRestorePlugin, { documentId: documentId, enabled: autosaveEnabled, initialJson: initialContentJsonRef.current, confirmMessage: strings.editor.restoreDraftConfirm })] }) }) }) })] }) }));
|
|
115
167
|
});
|
package/dist/i18n/strings.d.ts
CHANGED
|
@@ -15,6 +15,8 @@ export interface Strings {
|
|
|
15
15
|
contentLabel: string;
|
|
16
16
|
/** window.confirm() prompt shown by EditorRef.confirmDiscard() when there are unsaved changes. */
|
|
17
17
|
confirmDiscard: string;
|
|
18
|
+
/** window.confirm() prompt offering to restore a localStorage draft newer than the initial content (lexical-editor-spec.md §6.2). */
|
|
19
|
+
restoreDraftConfirm: string;
|
|
18
20
|
};
|
|
19
21
|
common: {
|
|
20
22
|
cancel: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"strings.d.ts","sourceRoot":"","sources":["../../src/i18n/strings.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;+DAC+D;AAC/D,MAAM,MAAM,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,cAAc,CAAC;AAElD,MAAM,WAAW,OAAO;IACtB,MAAM,EAAE;QACN,mGAAmG;QACnG,WAAW,EAAE,MAAM,CAAC;QACpB,gDAAgD;QAChD,YAAY,EAAE,MAAM,CAAC;QACrB,kGAAkG;QAClG,cAAc,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"strings.d.ts","sourceRoot":"","sources":["../../src/i18n/strings.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;+DAC+D;AAC/D,MAAM,MAAM,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,cAAc,CAAC;AAElD,MAAM,WAAW,OAAO;IACtB,MAAM,EAAE;QACN,mGAAmG;QACnG,WAAW,EAAE,MAAM,CAAC;QACpB,gDAAgD;QAChD,YAAY,EAAE,MAAM,CAAC;QACrB,kGAAkG;QAClG,cAAc,EAAE,MAAM,CAAC;QACvB,qIAAqI;QACrI,mBAAmB,EAAE,MAAM,CAAC;KAC7B,CAAC;IACF,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,OAAO,EAAE;QACP,gEAAgE;QAChE,SAAS,EAAE,MAAM,CAAC;QAClB,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,eAAe,EAAE,MAAM,CAAC;QACxB,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,SAAS,EAAE,MAAM,CAAC;QAClB,UAAU,EAAE,MAAM,CAAC;QACnB,qBAAqB,EAAE,MAAM,CAAC;QAC9B,QAAQ,EAAE,MAAM,CAAC;QACjB,mBAAmB,EAAE,MAAM,CAAC;QAC5B,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;QAClB,WAAW,EAAE,MAAM,CAAC;QACpB,UAAU,EAAE,MAAM,CAAC;QACnB,WAAW,EAAE,MAAM,CAAC;QACpB,YAAY,EAAE,MAAM,CAAC;QACrB,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;QACtC,WAAW,EAAE,MAAM,CAAC;QACpB,WAAW,EAAE,MAAM,CAAC;QACpB,YAAY,EAAE,MAAM,CAAC;QACrB,cAAc,EAAE,MAAM,CAAC;QACvB,aAAa,EAAE,MAAM,CAAC;QACtB,WAAW,EAAE,MAAM,CAAC;QACpB,SAAS,EAAE,MAAM,CAAC;QAClB,SAAS,EAAE,MAAM,CAAC;QAClB,SAAS,EAAE,MAAM,CAAC;QAClB,UAAU,EAAE,MAAM,CAAC;QACnB,eAAe,EAAE,MAAM,CAAC;QACxB,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;QACf,iBAAiB,EAAE;YACjB,SAAS,EAAE,MAAM,CAAC;YAClB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;YACnC,YAAY,EAAE,MAAM,CAAC;YACrB,UAAU,EAAE,MAAM,CAAC;YACnB,QAAQ,EAAE,MAAM,CAAC;YACjB,KAAK,EAAE,MAAM,CAAC;SACf,CAAC;QACF,YAAY,EAAE;YACZ,KAAK,EAAE,MAAM,CAAC;YACd,MAAM,EAAE,MAAM,CAAC;YACf,GAAG,EAAE,MAAM,CAAC;YACZ,OAAO,EAAE,MAAM,CAAC;YAChB,IAAI,EAAE,MAAM,CAAC;YACb,KAAK,EAAE,MAAM,CAAC;SACf,CAAC;KACH,CAAC;IACF,IAAI,EAAE;QACJ,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,UAAU,EAAE;QACV,WAAW,EAAE,MAAM,CAAC;QACpB,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;QACjB,cAAc,EAAE,MAAM,CAAC;QACvB,SAAS,EAAE,MAAM,CAAC;QAClB,eAAe,EAAE,MAAM,CAAC;QACxB,UAAU,EAAE,MAAM,CAAC;QACnB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,WAAW,EAAE;QACX,WAAW,EAAE,MAAM,CAAC;QACpB,SAAS,EAAE,MAAM,CAAC;QAClB,YAAY,EAAE,MAAM,CAAC;QACrB,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;QACf,kBAAkB,EAAE,MAAM,CAAC;QAC3B,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;QACpC,aAAa,EAAE,MAAM,CAAC;QACtB,WAAW,EAAE,MAAM,CAAC;QACpB,aAAa,EAAE,MAAM,CAAC;QACtB,mBAAmB,EAAE,MAAM,CAAC;QAC5B,cAAc,EAAE,MAAM,CAAC;QACvB,oBAAoB,EAAE,MAAM,CAAC;QAC7B,gBAAgB,EAAE,MAAM,CAAC;QACzB,SAAS,EAAE,MAAM,CAAC;QAClB,eAAe,EAAE,MAAM,CAAC;QACxB,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,gBAAgB,EAAE,OAAO,KAAK,MAAM,CAAC;QAC1E,YAAY,EAAE,MAAM,CAAC;QACrB,kBAAkB,EAAE,MAAM,CAAC;QAC3B,YAAY,EAAE,MAAM,CAAC;QACrB,kBAAkB,EAAE,MAAM,CAAC;QAC3B,MAAM,EAAE;YACN,QAAQ,EAAE,MAAM,CAAC;YACjB,UAAU,EAAE,MAAM,CAAC;YACnB,OAAO,EAAE,MAAM,CAAC;YAChB,cAAc,EAAE,MAAM,CAAC;YACvB,YAAY,EAAE,MAAM,CAAC;YACrB,eAAe,EAAE,MAAM,CAAC;YACxB,gBAAgB,EAAE,MAAM,CAAC;YACzB,UAAU,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;SAC3C,CAAC;KACH,CAAC;IACF,eAAe,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;QAClB,UAAU,EAAE,MAAM,CAAC;QACnB,WAAW,EAAE,MAAM,CAAC;QACpB,eAAe,EAAE,MAAM,CAAC;QACxB,eAAe,EAAE,MAAM,CAAC;QACxB,YAAY,EAAE,MAAM,CAAC;QACrB,QAAQ,EAAE,CAAC,OAAO,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,GAAG,IAAI,KAAK,MAAM,CAAC;QACxE,MAAM,EAAE;YACN,cAAc,EAAE,MAAM,CAAC;YACvB,YAAY,EAAE,MAAM,CAAC;YACrB,UAAU,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;SAC3C,CAAC;KACH,CAAC;IACF,SAAS,EAAE;QACT,SAAS,EAAE,MAAM,CAAC;QAClB,iBAAiB,EAAE,MAAM,CAAC;QAC1B,UAAU,EAAE,MAAM,CAAC;QACnB,UAAU,EAAE,MAAM,CAAC;QACnB,WAAW,EAAE,MAAM,CAAC;QACpB,aAAa,EAAE,MAAM,CAAC;QACtB,WAAW,EAAE,MAAM,CAAC;QACpB,WAAW,EAAE,MAAM,CAAC;KACrB,CAAC;CACH;AAmaD,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAI3C,CAAC;AAEF;;sDAEsD;AACtD,wBAAgB,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAElD"}
|
package/dist/i18n/strings.js
CHANGED
|
@@ -9,6 +9,7 @@ const en = {
|
|
|
9
9
|
placeholder: 'Start writing…',
|
|
10
10
|
contentLabel: 'Editor content',
|
|
11
11
|
confirmDiscard: 'You have unsaved changes. Discard them?',
|
|
12
|
+
restoreDraftConfirm: 'An unsaved draft of this document was found. Restore it?',
|
|
12
13
|
},
|
|
13
14
|
common: {
|
|
14
15
|
cancel: 'Cancel',
|
|
@@ -145,6 +146,7 @@ const ur = {
|
|
|
145
146
|
placeholder: 'لکھنا شروع کریں…',
|
|
146
147
|
contentLabel: 'ایڈیٹر کا مواد',
|
|
147
148
|
confirmDiscard: 'آپ کی غیر محفوظ شدہ تبدیلیاں ہیں۔ کیا انہیں رد کر دیا جائے؟',
|
|
149
|
+
restoreDraftConfirm: 'اس دستاویز کا ایک غیر محفوظ شدہ مسودہ ملا ہے۔ کیا اسے بحال کیا جائے؟',
|
|
148
150
|
},
|
|
149
151
|
common: {
|
|
150
152
|
cancel: 'منسوخ کریں',
|
|
@@ -281,6 +283,7 @@ const paShahmukhi = {
|
|
|
281
283
|
placeholder: 'لکھنا شروع کرو…',
|
|
282
284
|
contentLabel: 'ایڈیٹر دی سامگری',
|
|
283
285
|
confirmDiscard: 'تہاڈیاں کجھ تبدیلیاں سنبھالیاں نئیں گئیاں۔ کی ایہناں نوں رد کر دیئے؟',
|
|
286
|
+
restoreDraftConfirm: 'ایس دستاویز دا اک غیر محفوظ سودھا لبھیا اے۔ کیہ ایہنوں بحال کيتا جاۓ؟',
|
|
284
287
|
},
|
|
285
288
|
common: {
|
|
286
289
|
cancel: 'رد کرو',
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Autosave-to-localStorage drafts (lexical-editor-spec.md §6.2), namespaced
|
|
3
|
+
* by `documentId` (§6.1). Every function is a no-op (never throws) when
|
|
4
|
+
* `localStorage` is unavailable (SSR, privacy mode) or the stored value is
|
|
5
|
+
* corrupt — autosave is best-effort, never a hard dependency.
|
|
6
|
+
*/
|
|
7
|
+
export interface StoredDraft {
|
|
8
|
+
/** Lexical JSON (as produced by `EditorState.toJSON()`, stringified). */
|
|
9
|
+
json: string;
|
|
10
|
+
/** `Date.now()` at write time — lets a host distinguish a stale draft from a genuinely recent one. */
|
|
11
|
+
savedAt: number;
|
|
12
|
+
/** Bumped only if the stored shape itself changes; lets old drafts be recognised/discarded across an upgrade. */
|
|
13
|
+
version: 1;
|
|
14
|
+
}
|
|
15
|
+
export declare function draftKey(documentId: string): string;
|
|
16
|
+
export declare function readDraft(documentId: string): StoredDraft | null;
|
|
17
|
+
/**
|
|
18
|
+
* Best-effort debounced write. Silently skips (rather than throwing) when
|
|
19
|
+
* `json` exceeds `maxBytes` — localStorage has a shared ~5-10MB per-origin
|
|
20
|
+
* ceiling (§6.2), so a single large document (e.g. embedded base64 images)
|
|
21
|
+
* must not be allowed to autosave past a caller-configured limit — or when
|
|
22
|
+
* the write itself fails (quota exceeded, privacy mode).
|
|
23
|
+
*/
|
|
24
|
+
export declare function writeDraft(documentId: string, json: string, maxBytes: number): void;
|
|
25
|
+
export declare function clearDraft(documentId: string): void;
|
|
26
|
+
//# sourceMappingURL=draftStorage.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"draftStorage.d.ts","sourceRoot":"","sources":["../../src/persistence/draftStorage.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,MAAM,WAAW,WAAW;IAC1B,yEAAyE;IACzE,IAAI,EAAE,MAAM,CAAC;IACb,sGAAsG;IACtG,OAAO,EAAE,MAAM,CAAC;IAChB,iHAAiH;IACjH,OAAO,EAAE,CAAC,CAAC;CACZ;AAED,wBAAgB,QAAQ,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAEnD;AAWD,wBAAgB,SAAS,CAAC,UAAU,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAYhE;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAanF;AAED,wBAAgB,UAAU,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAQnD"}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Autosave-to-localStorage drafts (lexical-editor-spec.md §6.2), namespaced
|
|
3
|
+
* by `documentId` (§6.1). Every function is a no-op (never throws) when
|
|
4
|
+
* `localStorage` is unavailable (SSR, privacy mode) or the stored value is
|
|
5
|
+
* corrupt — autosave is best-effort, never a hard dependency.
|
|
6
|
+
*/
|
|
7
|
+
const KEY_PREFIX = 'likhari:draft:';
|
|
8
|
+
export function draftKey(documentId) {
|
|
9
|
+
return `${KEY_PREFIX}${documentId}`;
|
|
10
|
+
}
|
|
11
|
+
function getLocalStorage() {
|
|
12
|
+
try {
|
|
13
|
+
return typeof localStorage === 'undefined' ? null : localStorage;
|
|
14
|
+
}
|
|
15
|
+
catch {
|
|
16
|
+
// Some browsers throw on accessing localStorage in certain privacy modes.
|
|
17
|
+
return null;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
export function readDraft(documentId) {
|
|
21
|
+
const storage = getLocalStorage();
|
|
22
|
+
if (!storage)
|
|
23
|
+
return null;
|
|
24
|
+
try {
|
|
25
|
+
const raw = storage.getItem(draftKey(documentId));
|
|
26
|
+
if (!raw)
|
|
27
|
+
return null;
|
|
28
|
+
const parsed = JSON.parse(raw);
|
|
29
|
+
if (typeof parsed.json !== 'string' || typeof parsed.savedAt !== 'number' || parsed.version !== 1)
|
|
30
|
+
return null;
|
|
31
|
+
return parsed;
|
|
32
|
+
}
|
|
33
|
+
catch {
|
|
34
|
+
return null;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* Best-effort debounced write. Silently skips (rather than throwing) when
|
|
39
|
+
* `json` exceeds `maxBytes` — localStorage has a shared ~5-10MB per-origin
|
|
40
|
+
* ceiling (§6.2), so a single large document (e.g. embedded base64 images)
|
|
41
|
+
* must not be allowed to autosave past a caller-configured limit — or when
|
|
42
|
+
* the write itself fails (quota exceeded, privacy mode).
|
|
43
|
+
*/
|
|
44
|
+
export function writeDraft(documentId, json, maxBytes) {
|
|
45
|
+
const storage = getLocalStorage();
|
|
46
|
+
if (!storage)
|
|
47
|
+
return;
|
|
48
|
+
// .length (UTF-16 code units) over-estimates UTF-8 byte size for any
|
|
49
|
+
// non-Latin text, which only makes this check more conservative — fine
|
|
50
|
+
// for a soft cap that doesn't need to be exact.
|
|
51
|
+
if (json.length > maxBytes)
|
|
52
|
+
return;
|
|
53
|
+
const draft = { json, savedAt: Date.now(), version: 1 };
|
|
54
|
+
try {
|
|
55
|
+
storage.setItem(draftKey(documentId), JSON.stringify(draft));
|
|
56
|
+
}
|
|
57
|
+
catch {
|
|
58
|
+
// Quota exceeded or similar — autosave is best-effort.
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
export function clearDraft(documentId) {
|
|
62
|
+
const storage = getLocalStorage();
|
|
63
|
+
if (!storage)
|
|
64
|
+
return;
|
|
65
|
+
try {
|
|
66
|
+
storage.removeItem(draftKey(documentId));
|
|
67
|
+
}
|
|
68
|
+
catch {
|
|
69
|
+
// ignore
|
|
70
|
+
}
|
|
71
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export interface AutosaveRestorePluginProps {
|
|
2
|
+
documentId?: string;
|
|
3
|
+
enabled: boolean;
|
|
4
|
+
/** The Lexical JSON the editor was constructed with (stringified), or
|
|
5
|
+
* undefined for a blank document — compared against a stored draft so an
|
|
6
|
+
* identical draft doesn't trigger a pointless prompt. */
|
|
7
|
+
initialJson?: string;
|
|
8
|
+
confirmMessage: string;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* On mount, offers to restore a newer localStorage draft over the initial
|
|
12
|
+
* content passed in (lexical-editor-spec.md §6.2) — data-loss prevention is
|
|
13
|
+
* the explicit goal, so this never silently picks one over the other.
|
|
14
|
+
*/
|
|
15
|
+
export declare function AutosaveRestorePlugin({ documentId, enabled, initialJson, confirmMessage }: AutosaveRestorePluginProps): null;
|
|
16
|
+
//# sourceMappingURL=AutosaveRestorePlugin.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AutosaveRestorePlugin.d.ts","sourceRoot":"","sources":["../../src/plugins/AutosaveRestorePlugin.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,0BAA0B;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB;;6DAEyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,EAAE,0BAA0B,QAwBrH"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { useEffect, useRef } from 'react';
|
|
2
|
+
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
|
|
3
|
+
import { readDraft } from '../persistence/draftStorage.js';
|
|
4
|
+
/**
|
|
5
|
+
* On mount, offers to restore a newer localStorage draft over the initial
|
|
6
|
+
* content passed in (lexical-editor-spec.md §6.2) — data-loss prevention is
|
|
7
|
+
* the explicit goal, so this never silently picks one over the other.
|
|
8
|
+
*/
|
|
9
|
+
export function AutosaveRestorePlugin({ documentId, enabled, initialJson, confirmMessage }) {
|
|
10
|
+
const [editor] = useLexicalComposerContext();
|
|
11
|
+
const checked = useRef(false);
|
|
12
|
+
useEffect(() => {
|
|
13
|
+
if (checked.current || !enabled || !documentId)
|
|
14
|
+
return;
|
|
15
|
+
checked.current = true;
|
|
16
|
+
const draft = readDraft(documentId);
|
|
17
|
+
if (!draft || draft.json === initialJson)
|
|
18
|
+
return;
|
|
19
|
+
if (typeof window === 'undefined' || !window.confirm(confirmMessage))
|
|
20
|
+
return;
|
|
21
|
+
try {
|
|
22
|
+
const parsed = editor.parseEditorState(draft.json);
|
|
23
|
+
editor.setEditorState(parsed);
|
|
24
|
+
}
|
|
25
|
+
catch {
|
|
26
|
+
// Corrupt or incompatible draft (e.g. from a much older node schema) —
|
|
27
|
+
// ignore it and keep the initial content rather than crashing.
|
|
28
|
+
}
|
|
29
|
+
// Deliberately runs once on mount only.
|
|
30
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
31
|
+
}, []);
|
|
32
|
+
return null;
|
|
33
|
+
}
|
|
@@ -1 +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;
|
|
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"}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useMemo } from 'react';
|
|
3
3
|
import { MantineProvider } from '@mantine/core';
|
|
4
|
-
|
|
5
|
-
// the host imports '@mantine/core/styles.css' itself, once, in its own entry
|
|
6
|
-
// point, so it controls load order. This package must not import it itself.
|
|
4
|
+
import '@mantine/core/styles.css';
|
|
7
5
|
import { buildThemeCss } from '@inshapardaz/likhari-core';
|
|
8
6
|
import { defaultMantineTheme } from './mantineTheme.js';
|
|
9
7
|
import { generateAccentCssVars, generateAccentShades } from './accentColor.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@inshapardaz/likhari-react",
|
|
3
|
-
"version": "0.1.7-dev.
|
|
3
|
+
"version": "0.1.7-dev.75",
|
|
4
4
|
"description": "React implementation of the Likhari editor, built on @lexical/react.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -16,7 +16,6 @@
|
|
|
16
16
|
"development": "./src/index.ts",
|
|
17
17
|
"import": "./dist/index.js"
|
|
18
18
|
},
|
|
19
|
-
"./styles.css": "./dist/theme/editor.css",
|
|
20
19
|
"./package.json": "./package.json"
|
|
21
20
|
},
|
|
22
21
|
"files": [
|
|
@@ -41,17 +40,13 @@
|
|
|
41
40
|
"@lexical/utils": "^0.20.0",
|
|
42
41
|
"@inshapardaz/likhari-converters": "^0.1.0",
|
|
43
42
|
"@inshapardaz/likhari-core": "^0.1.0",
|
|
43
|
+
"@mantine/core": "^9.6.3",
|
|
44
|
+
"@mantine/hooks": "^9.6.3",
|
|
44
45
|
"@tabler/icons-react": "^3.46.0",
|
|
45
46
|
"lexical": "^0.20.0"
|
|
46
47
|
},
|
|
47
48
|
"peerDependencies": {
|
|
48
|
-
"@mantine/core": "^9.6.3",
|
|
49
|
-
"@mantine/hooks": "^9.6.3",
|
|
50
49
|
"react": "^19.2.0",
|
|
51
50
|
"react-dom": "^19.2.0"
|
|
52
|
-
},
|
|
53
|
-
"devDependencies": {
|
|
54
|
-
"@mantine/core": "^9.6.3",
|
|
55
|
-
"@mantine/hooks": "^9.6.3"
|
|
56
51
|
}
|
|
57
52
|
}
|