@inshapardaz/likhari-react 0.1.5-dev.41 → 0.1.5

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.
@@ -2,7 +2,6 @@ import type { MantineThemeOverride } from '@mantine/core';
2
2
  import type { SerializedEditorState } from 'lexical';
3
3
  import { type FormatId } from '@inshapardaz/likhari-converters';
4
4
  import { type EditorFeatureConfig, type FeatureConfigPresetName } from '@inshapardaz/likhari-core';
5
- import { type FontOption } from './fonts/index.js';
6
5
  export interface EditorInitialContent {
7
6
  format: Extract<FormatId, 'lexical-json' | 'plain-text'>;
8
7
  value: string;
@@ -38,20 +37,6 @@ export interface EditorRootProps {
38
37
  * the unsaved-changes state) or to hide it while keeping `onSave`.
39
38
  */
40
39
  showSave?: boolean;
41
- /**
42
- * Stores an uploaded image and returns the URL to reference it by. Without
43
- * it, uploaded images are embedded in the document as base64 data URIs —
44
- * simple, but they bloat the document (see `images.maxSizeMB`).
45
- */
46
- onImageUpload?: (file: File) => Promise<string>;
47
- /**
48
- * Entries for the toolbar's font-family dropdown. Defaults to
49
- * `DEFAULT_FONT_OPTIONS` (generic Latin faces plus the Urdu/Arabic-script
50
- * collection from inshapardaz/urdu-web-fonts, the same source qari uses).
51
- * Spread the defaults to add your own, e.g.
52
- * `[...DEFAULT_FONT_OPTIONS, { name: 'Mine', family: '"Mine", serif' }]`.
53
- */
54
- fontOptions?: FontOption[];
55
40
  }
56
41
  export interface EditorRef {
57
42
  getContent(format: FormatId): string;
@@ -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;AAS1D,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;AAGjE,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,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,cAAc,CAAC;IACtC,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;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,UAAU,EAAE,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,uGA8HrB,CAAC"}
1
+ {"version":3,"file":"EditorRoot.d.ts","sourceRoot":"","sources":["../src/EditorRoot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAS1D,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;AAOzH,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,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,cAAc,CAAC;IACtC,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;CACpB;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,uGAsHrB,CAAC"}
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
2
+ import { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
3
3
  import { LexicalComposer } from '@lexical/react/LexicalComposer';
4
4
  import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
5
5
  import { ContentEditable } from '@lexical/react/LexicalContentEditable';
@@ -14,7 +14,6 @@ import { EDITOR_NODES } from './nodes.js';
14
14
  import { editorTheme } from './theme/editorTheme.js';
15
15
  import { EditorThemeProvider } from './theme/EditorThemeProvider.js';
16
16
  import { Toolbar } from './components/Toolbar.js';
17
- import { injectUrduWebFontsCss } from './fonts/index.js';
18
17
  import { LinkPastePlugin } from './plugins/LinkPastePlugin.js';
19
18
  function initialEditorStateJson(initialContent) {
20
19
  if (!initialContent)
@@ -22,14 +21,8 @@ function initialEditorStateJson(initialContent) {
22
21
  const state = defaultFormatRegistry.parse(initialContent.format, initialContent.value);
23
22
  return JSON.stringify(state);
24
23
  }
25
- export const EditorRoot = forwardRef(function EditorRoot({ documentId, initialContent, featureConfig, featurePreset, theme, colorScheme, locale = 'en', placeholder = 'Start writing…', height = '480px', onChange, onSave, showSave = Boolean(onSave), onImageUpload, fontOptions, }, ref) {
24
+ export const EditorRoot = forwardRef(function EditorRoot({ documentId, initialContent, featureConfig, featurePreset, theme, colorScheme, locale = 'en', placeholder = 'Start writing…', height = '480px', onChange, onSave, showSave = Boolean(onSave), }, ref) {
26
25
  const config = useMemo(() => resolveFeatureConfig(featureConfig, featurePreset), [featureConfig, featurePreset]);
27
- // The urdu-web-fonts stylesheets are needed for the font dropdown and for
28
- // RTL content, whose canvas font (editor.css) is one of those families.
29
- useEffect(() => {
30
- if (config.font.family || locale !== 'en')
31
- injectUrduWebFontsCss();
32
- }, [config.font.family, locale]);
33
26
  const editorStateRef = useRef(null);
34
27
  const lastSavedJsonRef = useRef(null);
35
28
  const [isDirty, setIsDirty] = useState(false);
@@ -92,5 +85,5 @@ export const EditorRoot = forwardRef(function EditorRoot({ documentId, initialCo
92
85
  onSave?.(content, format);
93
86
  };
94
87
  const dir = locale === 'en' ? 'ltr' : 'rtl';
95
- return (_jsx(EditorThemeProvider, { theme: theme, colorScheme: colorScheme, children: _jsx("div", { className: "likhari-root", dir: dir, ref: rootElementRef, "data-document-id": documentId, style: { height: typeof height === 'number' ? `${height}px` : height }, children: _jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsx(Toolbar, { config: config, onSave: handleSave, isDirty: isDirty, showSave: showSave, fontOptions: fontOptions, onImageUpload: onImageUpload, direction: dir }), _jsx("div", { className: "likhari-canvas", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "likhari-content-editable", dir: dir, "aria-label": "Editor content" }), placeholder: _jsx("div", { className: "likhari-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), config.history && _jsx(HistoryPlugin, {}), (config.lists.bullet || config.lists.numbered || config.lists.check) && _jsx(ListPlugin, {}), config.links && _jsx(LinkPlugin, {}), config.links && _jsx(LinkPastePlugin, {}), _jsx(OnChangePlugin, { onChange: handleChange })] }) }) }));
88
+ return (_jsx(EditorThemeProvider, { theme: theme, colorScheme: colorScheme, children: _jsx("div", { className: "likhari-root", dir: dir, ref: rootElementRef, "data-document-id": documentId, style: { height: typeof height === 'number' ? `${height}px` : height }, children: _jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsx(Toolbar, { config: config, onSave: handleSave, isDirty: isDirty, showSave: showSave }), _jsx("div", { className: "likhari-canvas", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "likhari-content-editable", dir: dir, "aria-label": "Editor content" }), placeholder: _jsx("div", { className: "likhari-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), config.history && _jsx(HistoryPlugin, {}), (config.lists.bullet || config.lists.numbered || config.lists.check) && _jsx(ListPlugin, {}), config.links && _jsx(LinkPlugin, {}), config.links && _jsx(LinkPastePlugin, {}), _jsx(OnChangePlugin, { onChange: handleChange })] }) }) }));
96
89
  });
@@ -1,15 +1,9 @@
1
1
  import type { ResolvedEditorFeatureConfig } from '@inshapardaz/likhari-core';
2
- import { type FontOption } from '../fonts/index.js';
3
2
  export interface ToolbarProps {
4
3
  config: ResolvedEditorFeatureConfig;
5
4
  onSave?: () => void;
6
5
  isDirty?: boolean;
7
6
  showSave?: boolean;
8
- /** Font-family dropdown entries; defaults to DEFAULT_FONT_OPTIONS. */
9
- fontOptions?: FontOption[];
10
- /** Text direction of the canvas; picks which default font and size are pre-selected. */
11
- direction?: 'ltr' | 'rtl';
12
- onImageUpload?: (file: File) => Promise<string>;
13
7
  }
14
- export declare function Toolbar({ config, onSave, isDirty, showSave, onImageUpload, fontOptions, direction }: ToolbarProps): import("react").JSX.Element;
8
+ export declare function Toolbar({ config, onSave, isDirty, showSave }: ToolbarProps): import("react").JSX.Element;
15
9
  //# sourceMappingURL=Toolbar.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../src/components/Toolbar.tsx"],"names":[],"mappings":"AA4CA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAC;AAC7E,OAAO,EAA6D,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAmPtG,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,2BAA2B,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sEAAsE;IACtE,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,wFAAwF;IACxF,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;CACjD;AAED,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,WAAkC,EAAE,SAAiB,EAAE,EAAE,YAAY,+BAyoBhJ"}
1
+ {"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../src/components/Toolbar.tsx"],"names":[],"mappings":"AAyCA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAC;AAiO7E,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,2BAA2B,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,YAAY,+BAqiB1E"}
@@ -2,31 +2,21 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
2
2
  import { useCallback, useEffect, useRef, useState } from 'react';
3
3
  import { Menu, Select } from '@mantine/core';
4
4
  import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
5
- import { $getSelection, $isRangeSelection, $isElementNode, $setSelection, $getRoot, $getNearestNodeFromDOMNode, $createTextNode, KEY_MODIFIER_COMMAND, COMMAND_PRIORITY_NORMAL, FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND, UNDO_COMMAND, REDO_COMMAND, SELECTION_CHANGE_COMMAND, CAN_UNDO_COMMAND, CAN_REDO_COMMAND, COMMAND_PRIORITY_LOW, } from 'lexical';
6
- import { $getSelectionStyleValueForProperty, $patchStyleText, $setBlocksType } from '@lexical/selection';
5
+ import { $getSelection, $isRangeSelection, $isElementNode, $setSelection, $getNearestNodeFromDOMNode, $createTextNode, KEY_MODIFIER_COMMAND, COMMAND_PRIORITY_NORMAL, FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND, UNDO_COMMAND, REDO_COMMAND, SELECTION_CHANGE_COMMAND, CAN_UNDO_COMMAND, CAN_REDO_COMMAND, COMMAND_PRIORITY_LOW, } from 'lexical';
6
+ import { $setBlocksType } from '@lexical/selection';
7
7
  import { $createParagraphNode } from 'lexical';
8
8
  import { $createHeadingNode, $createQuoteNode, $isHeadingNode, $isQuoteNode } from '@lexical/rich-text';
9
9
  import { $isListNode, INSERT_CHECK_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND, } from '@lexical/list';
10
- import { $findMatchingParent, $insertNodeToNearestRoot } from '@lexical/utils';
11
- import { ImageDialog } from '../image/ImageDialog.js';
12
- import { $createImageNode } from '../image/ImageNode.js';
10
+ import { $findMatchingParent } from '@lexical/utils';
13
11
  import { $createLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
14
12
  import { LinkDialog } from './LinkDialog.js';
15
13
  import { normalizeLinkUrl } from '../utils/linkUrl.js';
16
- import { CANVAS_FONT_DEFAULTS, DEFAULT_FONT_OPTIONS, FONT_SIZES_PX } from '../fonts/index.js';
17
- import { setStyleProperty } from '../utils/style.js';
18
14
  import { IconAbc, IconAlignCenter, IconAlignJustified, IconAlignLeft, IconAlignRight, IconArrowBackUp, IconArrowForwardUp, IconBold, IconClearFormatting, IconDeviceFloppy, IconDots, IconExternalLink, IconFeather, IconIndentDecrease, IconIndentIncrease, IconItalic, IconLetterCase, IconLetterCaseLower, IconLetterCaseUpper, IconLink, IconLinkOff, IconPencil, IconPhoto, IconPilcrow, IconSparkles, IconStrikethrough, IconSubscript, IconSuperscript, IconTextSize, IconTypography, IconUnderline, IconWand, } from '@tabler/icons-react';
19
- /** Sentinel for "no inline style": Lexical returns the default it is given when
20
- * the selection has none, so this tells "unstyled" (show the canvas default)
21
- * apart from "styled with a value the dropdown doesn't list" (show nothing). */
22
- const UNSET_STYLE = '__unset__';
23
15
  const INITIAL_STATE = {
24
16
  blockType: 'paragraph',
25
17
  activeFormats: new Set(),
26
18
  elementFormat: 'start',
27
19
  listType: null,
28
- fontFamily: UNSET_STYLE,
29
- fontSize: UNSET_STYLE,
30
20
  isLink: false,
31
21
  linkUrl: '',
32
22
  canUndo: false,
@@ -56,8 +46,8 @@ function StubButton({ icon, title }) {
56
46
  * labels the control itself, since a dropdown can't show one per option in
57
47
  * its closed state. The dropdown portals to <body>, so it is not clipped by
58
48
  * the editor's `overflow: hidden` frame. */
59
- function ToolbarSelect({ icon: Icon, label, value, data, width, disabled, placeholder, searchable, renderOption, onChange }) {
60
- return (_jsx(Select, { size: "xs", w: width, "aria-label": label, title: disabled ? `${label} (coming soon)` : label, data: data, value: value, placeholder: placeholder, disabled: disabled, searchable: searchable, renderOption: renderOption, nothingFoundMessage: searchable ? 'No match' : undefined, allowDeselect: false, leftSection: _jsx(Icon, { size: 15, stroke: ICON_STROKE }), comboboxProps: { withinPortal: true, position: 'bottom-start', middlewares: { flip: true, shift: true } }, classNames: { input: 'likhari-toolbar-select-input', dropdown: 'likhari-toolbar-select-dropdown' }, onChange: (v) => v && onChange?.(v) }));
49
+ function ToolbarSelect({ icon: Icon, label, value, data, width, disabled, placeholder, onChange }) {
50
+ return (_jsx(Select, { size: "xs", w: width, "aria-label": label, title: disabled ? `${label} (coming soon)` : label, data: data, value: value, placeholder: placeholder, disabled: disabled, allowDeselect: false, leftSection: _jsx(Icon, { size: 15, stroke: ICON_STROKE }), comboboxProps: { withinPortal: true, position: 'bottom-start', middlewares: { flip: true, shift: true } }, classNames: { input: 'likhari-toolbar-select-input', dropdown: 'likhari-toolbar-select-dropdown' }, onChange: (v) => v && onChange?.(v) }));
61
51
  }
62
52
  function OverflowItem({ icon: Icon, label, active, onClick, }) {
63
53
  return (_jsx(Menu.Item, { leftSection: _jsx(Icon, { size: ICON_SIZE, stroke: ICON_STROKE }), "data-active": active ? 'true' : 'false', className: "likhari-overflow-item",
@@ -73,7 +63,7 @@ function LinkMenuItems({ url, onEdit, onRemove }) {
73
63
  // Not a URL the editor would accept (e.g. loaded from a document): show it, don't make it clickable.
74
64
  _jsx(Menu.Item, { disabled: true, title: url, className: "likhari-link-menu-url", children: url || '(no URL)' })), _jsx(Menu.Item, { leftSection: _jsx(IconPencil, { size: ICON_SIZE, stroke: ICON_STROKE }), onMouseDown: (e) => e.preventDefault(), onClick: onEdit, children: "Edit link" }), _jsx(Menu.Item, { color: "red", leftSection: _jsx(IconLinkOff, { size: ICON_SIZE, stroke: ICON_STROKE }), onMouseDown: (e) => e.preventDefault(), onClick: onRemove, children: "Remove link" })] }));
75
65
  }
76
- export function Toolbar({ config, onSave, isDirty, showSave, onImageUpload, fontOptions = DEFAULT_FONT_OPTIONS, direction = 'ltr' }) {
66
+ export function Toolbar({ config, onSave, isDirty, showSave }) {
77
67
  const [editor] = useLexicalComposerContext();
78
68
  const [state, setState] = useState(INITIAL_STATE);
79
69
  const updateToolbar = useCallback(() => {
@@ -92,8 +82,6 @@ export function Toolbar({ config, onSave, isDirty, showSave, onImageUpload, font
92
82
  else if ($isQuoteNode(element)) {
93
83
  blockType = 'quote';
94
84
  }
95
- const fontFamily = $getSelectionStyleValueForProperty(selection, 'font-family', UNSET_STYLE);
96
- const fontSize = $getSelectionStyleValueForProperty(selection, 'font-size', UNSET_STYLE);
97
85
  const linkNode = $findMatchingParent(anchorNode, $isLinkNode);
98
86
  const isLink = Boolean(linkNode);
99
87
  const linkUrl = linkNode && $isLinkNode(linkNode) ? linkNode.getURL() : '';
@@ -113,8 +101,6 @@ export function Toolbar({ config, onSave, isDirty, showSave, onImageUpload, font
113
101
  activeFormats,
114
102
  elementFormat,
115
103
  listType,
116
- fontFamily,
117
- fontSize,
118
104
  isLink,
119
105
  linkUrl,
120
106
  }));
@@ -197,43 +183,6 @@ export function Toolbar({ config, onSave, isDirty, showSave, onImageUpload, font
197
183
  action();
198
184
  editor.focus();
199
185
  };
200
- const [imageDialogOpen, setImageDialogOpen] = useState(false);
201
- const openImageDialog = () => {
202
- // Snapshot first: the dialog's focus trap makes Lexical drop the selection.
203
- snapshotSelection();
204
- setImageDialogOpen(true);
205
- };
206
- const closeImageDialog = () => {
207
- setImageDialogOpen(false);
208
- editor.focus();
209
- };
210
- const insertImage = (image) => {
211
- const saved = menuSelectionRef.current;
212
- if (saved)
213
- editor.update(() => $setSelection(saved.clone()), { discrete: true });
214
- editor.update(() => {
215
- $insertNodeToNearestRoot($createImageNode(image));
216
- });
217
- closeImageDialog();
218
- };
219
- /** Applies a font property per `config.font.scope`: to the selection, to
220
- * every text node in the document, or (for 'both') to the selection when
221
- * there is a range and to the whole document when there isn't. */
222
- const applyFont = (property, value) => {
223
- editor.update(() => {
224
- const selection = $getSelection();
225
- const scope = config.font.scope;
226
- const wholeDocument = scope === 'document' || (scope === 'both' && (!$isRangeSelection(selection) || selection.isCollapsed()));
227
- if (wholeDocument) {
228
- for (const node of $getRoot().getAllTextNodes()) {
229
- node.setStyle(setStyleProperty(node.getStyle(), property, value));
230
- }
231
- }
232
- else if ($isRangeSelection(selection)) {
233
- $patchStyleText(selection, { [property]: value });
234
- }
235
- });
236
- };
237
186
  const [linkDialogOpen, setLinkDialogOpen] = useState(false);
238
187
  const [linkNeedsText, setLinkNeedsText] = useState(false);
239
188
  const openLinkDialog = useCallback(() => {
@@ -372,30 +321,6 @@ export function Toolbar({ config, onSave, isDirty, showSave, onImageUpload, font
372
321
  const showStubInsertGroup = config.images.linked || config.images.embedded || config.poetry.enabled;
373
322
  const showLanguageGroup = config.language.autocorrect || config.language.textCleanup || config.language.spellCheck;
374
323
  const showOverflowMenu = fmt.strikethrough || fmt.superscript || fmt.subscript || fmt.caseTransforms || fmt.clearFormatting || config.indent;
375
- // Grouped for the dropdown when options declare groups (Latin / Urdu).
376
- const fontData = (() => {
377
- const data = [];
378
- const groups = new Map();
379
- for (const f of fontOptions) {
380
- const item = { value: f.family, label: f.name };
381
- if (!f.group) {
382
- data.push(item);
383
- continue;
384
- }
385
- let group = groups.get(f.group);
386
- if (!group) {
387
- group = { group: f.group, items: [] };
388
- groups.set(f.group, group);
389
- data.push(group);
390
- }
391
- group.items.push(item);
392
- }
393
- return data;
394
- })();
395
- // Unstyled text shows the canvas default (pre-selected).
396
- const canvasDefaults = CANVAS_FONT_DEFAULTS[direction];
397
- const shownFontFamily = state.fontFamily === UNSET_STYLE ? canvasDefaults.family : state.fontFamily;
398
- const shownFontSize = state.fontSize === UNSET_STYLE ? canvasDefaults.size : state.fontSize;
399
324
  const formattingOptions = [
400
325
  { value: 'paragraph', label: 'Paragraph' },
401
326
  ...headingLevels.map((level) => ({ value: `h${level}`, label: `Heading ${level}` })),
@@ -414,7 +339,7 @@ export function Toolbar({ config, onSave, isDirty, showSave, onImageUpload, font
414
339
  ];
415
340
  const formattingValue = state.listType ?? state.blockType;
416
341
  const AlignIcon = ALIGN_ICONS[state.elementFormat] ?? IconAlignLeft;
417
- return (_jsxs("div", { className: "likhari-toolbar", role: "toolbar", "aria-label": "Formatting", children: [showSave && (_jsx("div", { className: "likhari-toolbar-group", children: _jsx(ToolbarButton, { icon: IconDeviceFloppy, title: "Save", dirty: Boolean(isDirty), onClick: onSave }) })), config.history && (_jsxs("div", { className: "likhari-toolbar-group", children: [_jsx(ToolbarButton, { icon: IconArrowBackUp, title: "Undo", disabled: !state.canUndo, onClick: () => editor.dispatchCommand(UNDO_COMMAND, undefined) }), _jsx(ToolbarButton, { icon: IconArrowForwardUp, title: "Redo", disabled: !state.canRedo, onClick: () => editor.dispatchCommand(REDO_COMMAND, undefined) })] })), showFormattingGroup && (_jsx("div", { className: "likhari-toolbar-group", children: _jsx(ToolbarSelect, { icon: IconPilcrow, label: "Formatting", width: 148, value: formattingValue, data: formattingOptions, onChange: withRefocus((v) => applyFormatting(v)) }) })), showInlineGroup && (_jsxs("div", { className: "likhari-toolbar-group", children: [fmt.bold && (_jsx(ToolbarButton, { icon: IconBold, title: "Bold", active: state.activeFormats.has('bold'), onClick: () => formatText('bold') })), fmt.italic && (_jsx(ToolbarButton, { icon: IconItalic, title: "Italic", active: state.activeFormats.has('italic'), onClick: () => formatText('italic') })), fmt.underline && (_jsx(ToolbarButton, { icon: IconUnderline, title: "Underline", active: state.activeFormats.has('underline'), onClick: () => formatText('underline') }))] })), (config.font.family || config.font.size) && (_jsxs("div", { className: "likhari-toolbar-group", children: [config.font.family && (_jsx(ToolbarSelect, { icon: IconTypography, label: "Font family", width: 150, value: fontOptions.some((f) => f.family === shownFontFamily) ? shownFontFamily : null, placeholder: "Font", data: fontData, searchable: true, renderOption: ({ option }) => _jsx("span", { style: { fontFamily: option.value }, children: option.label }), onChange: withRefocus((v) => applyFont('font-family', v)) })), config.font.size && (_jsx(ToolbarSelect, { icon: IconTextSize, label: "Font size", width: 84, value: FONT_SIZES_PX.some((px) => `${px}px` === shownFontSize) ? shownFontSize : null, placeholder: "Size", data: FONT_SIZES_PX.map((px) => ({ value: `${px}px`, label: String(px) })), onChange: withRefocus((v) => applyFont('font-size', v)) }))] })), showAlignGroup && (_jsx("div", { className: "likhari-toolbar-group", children: _jsx(ToolbarSelect, { icon: AlignIcon, label: "Alignment", width: 138, value: state.elementFormat || 'start', data: alignOptions, onChange: withRefocus((v) => formatElement(v)) }) })), config.links && (_jsx("div", { className: "likhari-toolbar-group", children: state.isLink ? (
342
+ return (_jsxs("div", { className: "likhari-toolbar", role: "toolbar", "aria-label": "Formatting", children: [showSave && (_jsx("div", { className: "likhari-toolbar-group", children: _jsx(ToolbarButton, { icon: IconDeviceFloppy, title: "Save", dirty: Boolean(isDirty), onClick: onSave }) })), config.history && (_jsxs("div", { className: "likhari-toolbar-group", children: [_jsx(ToolbarButton, { icon: IconArrowBackUp, title: "Undo", disabled: !state.canUndo, onClick: () => editor.dispatchCommand(UNDO_COMMAND, undefined) }), _jsx(ToolbarButton, { icon: IconArrowForwardUp, title: "Redo", disabled: !state.canRedo, onClick: () => editor.dispatchCommand(REDO_COMMAND, undefined) })] })), showFormattingGroup && (_jsx("div", { className: "likhari-toolbar-group", children: _jsx(ToolbarSelect, { icon: IconPilcrow, label: "Formatting", width: 148, value: formattingValue, data: formattingOptions, onChange: withRefocus((v) => applyFormatting(v)) }) })), showInlineGroup && (_jsxs("div", { className: "likhari-toolbar-group", children: [fmt.bold && (_jsx(ToolbarButton, { icon: IconBold, title: "Bold", active: state.activeFormats.has('bold'), onClick: () => formatText('bold') })), fmt.italic && (_jsx(ToolbarButton, { icon: IconItalic, title: "Italic", active: state.activeFormats.has('italic'), onClick: () => formatText('italic') })), fmt.underline && (_jsx(ToolbarButton, { icon: IconUnderline, title: "Underline", active: state.activeFormats.has('underline'), onClick: () => formatText('underline') }))] })), (config.font.family || config.font.size) && (_jsxs("div", { className: "likhari-toolbar-group likhari-toolbar-group--collapse-tablet", children: [config.font.family && (_jsx(ToolbarSelect, { icon: IconTypography, label: "Font family", width: 110, value: null, placeholder: "Font", data: [], disabled: true })), config.font.size && (_jsx(ToolbarSelect, { icon: IconTextSize, label: "Font size", width: 90, value: null, placeholder: "Size", data: [], disabled: true }))] })), showAlignGroup && (_jsx("div", { className: "likhari-toolbar-group", children: _jsx(ToolbarSelect, { icon: AlignIcon, label: "Alignment", width: 138, value: state.elementFormat || 'start', data: alignOptions, onChange: withRefocus((v) => formatElement(v)) }) })), config.links && (_jsx("div", { className: "likhari-toolbar-group", children: state.isLink ? (
418
343
  // Caret is in a link: the button opens a menu to see, edit or remove it.
419
344
  _jsxs(Menu, { position: "bottom-start", withinPortal: true, shadow: "sm", width: 240, onOpen: snapshotSelection, children: [_jsx(Menu.Target, { children: _jsx("button", { type: "button", className: "likhari-toolbar-button", "data-active": "true", "aria-pressed": "true", "aria-haspopup": "menu", "aria-label": "Link options", title: "Link options", onMouseDown: (e) => e.preventDefault(), children: _jsx(IconLink, { size: ICON_SIZE, stroke: ICON_STROKE }) }) }), _jsx(Menu.Dropdown, { children: _jsx(LinkMenuItems, { url: state.linkUrl, onEdit: () => {
420
345
  restoreSelection();
@@ -425,5 +350,5 @@ export function Toolbar({ config, onSave, isDirty, showSave, onImageUpload, font
425
350
  }, position: "bottom-start", withinPortal: true, shadow: "sm", width: 240, children: [_jsx(Menu.Target, { children: _jsx("span", { "aria-hidden": "true", style: { position: 'fixed', left: linkContext?.x ?? -9999, top: linkContext?.y ?? -9999, width: 1, height: 1, pointerEvents: 'none' } }) }), _jsx(Menu.Dropdown, { children: _jsx(LinkMenuItems, { url: linkContext?.url ?? '', onEdit: () => {
426
351
  restoreSelection();
427
352
  openLinkDialog();
428
- }, onRemove: removeLink }) })] })), showStubInsertGroup && (_jsxs("div", { className: "likhari-toolbar-group likhari-toolbar-group--collapse-tablet", children: [(config.images.linked || config.images.embedded) && (_jsx(ToolbarButton, { icon: IconPhoto, title: "Insert image", onClick: openImageDialog })), config.poetry.enabled && _jsx(StubButton, { icon: IconFeather, title: "Poetry blocks" })] })), showLanguageGroup && (_jsxs("div", { className: "likhari-toolbar-group likhari-toolbar-group--collapse-tablet", children: [config.language.autocorrect && _jsx(StubButton, { icon: IconWand, title: "Auto-correct" }), config.language.textCleanup && _jsx(StubButton, { icon: IconSparkles, title: "Text cleanup" }), config.language.spellCheck && _jsx(StubButton, { icon: IconAbc, title: "Spell-checker" })] })), showOverflowMenu && (_jsxs(Menu, { position: "bottom-end", withinPortal: true, shadow: "sm", width: 210, closeOnItemClick: true, onOpen: snapshotSelection, children: [_jsx(Menu.Target, { children: _jsx("button", { type: "button", className: "likhari-toolbar-button", "aria-label": "More formatting", title: "More formatting", onMouseDown: (e) => e.preventDefault(), children: _jsx(IconDots, { size: ICON_SIZE, stroke: ICON_STROKE }) }) }), _jsxs(Menu.Dropdown, { children: [fmt.strikethrough && (_jsx(OverflowItem, { icon: IconStrikethrough, label: "Strikethrough", active: state.activeFormats.has('strikethrough'), onClick: runOverflowAction(() => formatText('strikethrough')) })), fmt.superscript && (_jsx(OverflowItem, { icon: IconSuperscript, label: "Superscript", active: state.activeFormats.has('superscript'), onClick: runOverflowAction(() => formatText('superscript')) })), fmt.subscript && (_jsx(OverflowItem, { icon: IconSubscript, label: "Subscript", active: state.activeFormats.has('subscript'), onClick: runOverflowAction(() => formatText('subscript')) })), fmt.caseTransforms && (_jsxs(_Fragment, { children: [_jsx(OverflowItem, { icon: IconLetterCaseUpper, label: "UPPERCASE", onClick: runOverflowAction(() => applyCaseTransform('upper')) }), _jsx(OverflowItem, { icon: IconLetterCaseLower, label: "lowercase", onClick: runOverflowAction(() => applyCaseTransform('lower')) }), _jsx(OverflowItem, { icon: IconLetterCase, label: "Capitalize", onClick: runOverflowAction(() => applyCaseTransform('capitalize')) })] })), fmt.clearFormatting && _jsx(OverflowItem, { icon: IconClearFormatting, label: "Clear formatting", onClick: runOverflowAction(clearFormatting) }), config.indent && (_jsxs(_Fragment, { children: [_jsx(OverflowItem, { icon: IconIndentDecrease, label: "Outdent", onClick: runOverflowAction(() => editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined)) }), _jsx(OverflowItem, { icon: IconIndentIncrease, label: "Indent", onClick: runOverflowAction(() => editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined)) })] }))] })] })), (config.images.linked || config.images.embedded) && (_jsx(ImageDialog, { opened: imageDialogOpen, allowLinked: config.images.linked, allowEmbedded: config.images.embedded, allowCaption: config.images.caption, maxSizeMB: config.images.maxSizeMB, onImageUpload: onImageUpload, onSubmit: insertImage, onClose: closeImageDialog })), config.links && (_jsx(LinkDialog, { opened: linkDialogOpen, initialUrl: state.linkUrl, showTextField: linkNeedsText, onSubmit: applyLink, onRemove: state.isLink ? removeLink : undefined, onClose: closeLinkDialog }))] }));
353
+ }, onRemove: removeLink }) })] })), showStubInsertGroup && (_jsxs("div", { className: "likhari-toolbar-group likhari-toolbar-group--collapse-tablet", children: [(config.images.linked || config.images.embedded) && _jsx(StubButton, { icon: IconPhoto, title: "Insert image" }), config.poetry.enabled && _jsx(StubButton, { icon: IconFeather, title: "Poetry blocks" })] })), showLanguageGroup && (_jsxs("div", { className: "likhari-toolbar-group likhari-toolbar-group--collapse-tablet", children: [config.language.autocorrect && _jsx(StubButton, { icon: IconWand, title: "Auto-correct" }), config.language.textCleanup && _jsx(StubButton, { icon: IconSparkles, title: "Text cleanup" }), config.language.spellCheck && _jsx(StubButton, { icon: IconAbc, title: "Spell-checker" })] })), showOverflowMenu && (_jsxs(Menu, { position: "bottom-end", withinPortal: true, shadow: "sm", width: 210, closeOnItemClick: true, onOpen: snapshotSelection, children: [_jsx(Menu.Target, { children: _jsx("button", { type: "button", className: "likhari-toolbar-button", "aria-label": "More formatting", title: "More formatting", onMouseDown: (e) => e.preventDefault(), children: _jsx(IconDots, { size: ICON_SIZE, stroke: ICON_STROKE }) }) }), _jsxs(Menu.Dropdown, { children: [fmt.strikethrough && (_jsx(OverflowItem, { icon: IconStrikethrough, label: "Strikethrough", active: state.activeFormats.has('strikethrough'), onClick: runOverflowAction(() => formatText('strikethrough')) })), fmt.superscript && (_jsx(OverflowItem, { icon: IconSuperscript, label: "Superscript", active: state.activeFormats.has('superscript'), onClick: runOverflowAction(() => formatText('superscript')) })), fmt.subscript && (_jsx(OverflowItem, { icon: IconSubscript, label: "Subscript", active: state.activeFormats.has('subscript'), onClick: runOverflowAction(() => formatText('subscript')) })), fmt.caseTransforms && (_jsxs(_Fragment, { children: [_jsx(OverflowItem, { icon: IconLetterCaseUpper, label: "UPPERCASE", onClick: runOverflowAction(() => applyCaseTransform('upper')) }), _jsx(OverflowItem, { icon: IconLetterCaseLower, label: "lowercase", onClick: runOverflowAction(() => applyCaseTransform('lower')) }), _jsx(OverflowItem, { icon: IconLetterCase, label: "Capitalize", onClick: runOverflowAction(() => applyCaseTransform('capitalize')) })] })), fmt.clearFormatting && _jsx(OverflowItem, { icon: IconClearFormatting, label: "Clear formatting", onClick: runOverflowAction(clearFormatting) }), config.indent && (_jsxs(_Fragment, { children: [_jsx(OverflowItem, { icon: IconIndentDecrease, label: "Outdent", onClick: runOverflowAction(() => editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined)) }), _jsx(OverflowItem, { icon: IconIndentIncrease, label: "Indent", onClick: runOverflowAction(() => editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined)) })] }))] })] })), config.links && (_jsx(LinkDialog, { opened: linkDialogOpen, initialUrl: state.linkUrl, showTextField: linkNeedsText, onSubmit: applyLink, onRemove: state.isLink ? removeLink : undefined, onClose: closeLinkDialog }))] }));
429
354
  }
package/dist/index.d.ts CHANGED
@@ -1,8 +1,4 @@
1
1
  export { EditorRoot } from './EditorRoot.js';
2
2
  export type { EditorRootProps, EditorRef, EditorInitialContent } from './EditorRoot.js';
3
3
  export { defaultMantineTheme } from './theme/mantineTheme.js';
4
- export { ImageNode, $createImageNode, $isImageNode } from './image/ImageNode.js';
5
- export type { ImagePayload, ImageLinkType, SerializedImageNode } from './image/ImageNode.js';
6
- export { DEFAULT_FONT_OPTIONS, URDU_WEB_FONT_OPTIONS, FONT_SIZES_PX } from './fonts/index.js';
7
- export type { FontOption } from './fonts/index.js';
8
4
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACrF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC9E,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC1F,OAAO,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACrF,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACrF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC"}
package/dist/index.js CHANGED
@@ -1,4 +1,2 @@
1
1
  export { EditorRoot } from './EditorRoot.js';
2
2
  export { defaultMantineTheme } from './theme/mantineTheme.js';
3
- export { ImageNode, $createImageNode, $isImageNode } from './image/ImageNode.js';
4
- export { DEFAULT_FONT_OPTIONS, URDU_WEB_FONT_OPTIONS, FONT_SIZES_PX } from './fonts/index.js';
@@ -1 +1 @@
1
- {"version":3,"file":"nodes.d.ts","sourceRoot":"","sources":["../src/nodes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAOlD;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,WAAW,CAAC,EAQ5C,CAAC"}
1
+ {"version":3,"file":"nodes.d.ts","sourceRoot":"","sources":["../src/nodes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAMlD;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,WAAW,CAAC,EAO5C,CAAC"}
package/dist/nodes.js CHANGED
@@ -2,7 +2,6 @@ import { HeadingNode, QuoteNode } from '@lexical/rich-text';
2
2
  import { ListItemNode, ListNode } from '@lexical/list';
3
3
  import { LinkNode } from '@lexical/link';
4
4
  import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
5
- import { ImageNode } from './image/ImageNode.js';
6
5
  /**
7
6
  * Node types registered on the editor at construction time. Per
8
7
  * editor-architecture-design.md §2, node registration cannot be conditional
@@ -19,5 +18,4 @@ export const EDITOR_NODES = [
19
18
  ListItemNode,
20
19
  LinkNode,
21
20
  HorizontalRuleNode,
22
- ImageNode,
23
21
  ];
@@ -235,50 +235,6 @@
235
235
  margin: 1.5em 0;
236
236
  }
237
237
 
238
- /* Images — block-level figure with an optional caption input. */
239
- .likhari-image-block {
240
- margin: 0 0 1em 0;
241
- }
242
-
243
- .likhari-image-figure {
244
- display: block;
245
- margin: 0;
246
- text-align: center;
247
- }
248
-
249
- .likhari-image {
250
- display: inline-block;
251
- max-width: 100%;
252
- height: auto;
253
- border-radius: 4px;
254
- cursor: default;
255
- }
256
-
257
- .likhari-image-figure[data-selected='true'] .likhari-image {
258
- outline: 2px solid var(--editor-accent);
259
- outline-offset: 2px;
260
- }
261
-
262
- .likhari-image-caption {
263
- display: block;
264
- width: 100%;
265
- margin-top: 6px;
266
- padding: 2px 4px;
267
- border: none;
268
- border-bottom: 1px dashed transparent;
269
- background: transparent;
270
- color: var(--editor-ink-soft);
271
- font: inherit;
272
- font-size: 0.85em;
273
- text-align: center;
274
- }
275
-
276
- .likhari-image-caption:hover,
277
- .likhari-image-caption:focus {
278
- border-bottom-color: var(--editor-line-strong);
279
- outline: none;
280
- }
281
-
282
238
  /* Link menu: the URL item shows one truncated line. */
283
239
  .likhari-link-menu-url {
284
240
  max-width: 100%;
@@ -1 +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"}
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,kBA6BzB,CAAC"}
@@ -32,5 +32,4 @@ export const editorTheme = {
32
32
  superscript: 'likhari-text-superscript',
33
33
  },
34
34
  hr: 'likhari-hr',
35
- image: 'likhari-image-block',
36
35
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@inshapardaz/likhari-react",
3
- "version": "0.1.5-dev.41",
3
+ "version": "0.1.5",
4
4
  "description": "React implementation of the Likhari editor, built on @lexical/react.",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -1,22 +0,0 @@
1
- import { type FontOption } from './urduWebFonts.js';
2
- export { URDU_WEB_FONT_OPTIONS, injectUrduWebFontsCss, type FontOption } from './urduWebFonts.js';
3
- /** Three generic Latin faces plus the full urdu-web-fonts collection. */
4
- export declare const DEFAULT_FONT_OPTIONS: FontOption[];
5
- /** Sizes offered by the toolbar's font-size dropdown, in px. */
6
- export declare const FONT_SIZES_PX: number[];
7
- /**
8
- * What the canvas renders when text has no explicit font style — kept in sync
9
- * with `.likhari-content-editable` in theme/editor.css. The toolbar's font
10
- * dropdowns show these as the pre-selected values.
11
- */
12
- export declare const CANVAS_FONT_DEFAULTS: {
13
- readonly ltr: {
14
- readonly family: string;
15
- readonly size: "15px";
16
- };
17
- readonly rtl: {
18
- readonly family: "\"Noto Nastaliq Urdu\", serif";
19
- readonly size: "20px";
20
- };
21
- };
22
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/fonts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAExE,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE/F,yEAAyE;AACzE,eAAO,MAAM,oBAAoB,EAAE,UAAU,EAK5C,CAAC;AAEF,gEAAgE;AAChE,eAAO,MAAM,aAAa,UAAmD,CAAC;AAE9E;;;;GAIG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;CAGvB,CAAC"}
@@ -1,20 +0,0 @@
1
- import { URDU_WEB_FONT_OPTIONS } from './urduWebFonts.js';
2
- export { URDU_WEB_FONT_OPTIONS, injectUrduWebFontsCss } from './urduWebFonts.js';
3
- /** Three generic Latin faces plus the full urdu-web-fonts collection. */
4
- export const DEFAULT_FONT_OPTIONS = [
5
- { name: 'Serif', family: `'IBM Plex Serif', Georgia, serif`, group: 'Latin' },
6
- { name: 'Sans', family: `'IBM Plex Sans', system-ui, sans-serif`, group: 'Latin' },
7
- { name: 'Mono', family: `ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace`, group: 'Latin' },
8
- ...URDU_WEB_FONT_OPTIONS,
9
- ];
10
- /** Sizes offered by the toolbar's font-size dropdown, in px. */
11
- export const FONT_SIZES_PX = [12, 13, 14, 15, 16, 18, 20, 24, 28, 32, 36, 48];
12
- /**
13
- * What the canvas renders when text has no explicit font style — kept in sync
14
- * with `.likhari-content-editable` in theme/editor.css. The toolbar's font
15
- * dropdowns show these as the pre-selected values.
16
- */
17
- export const CANVAS_FONT_DEFAULTS = {
18
- ltr: { family: DEFAULT_FONT_OPTIONS[0].family, size: '15px' },
19
- rtl: { family: `"Noto Nastaliq Urdu", serif`, size: '20px' },
20
- };
@@ -1,14 +0,0 @@
1
- /** One entry in the toolbar's font-family dropdown. */
2
- export interface FontOption {
3
- /** Label shown in the dropdown */
4
- name: string;
5
- /** CSS font-family value stored on the selected text, e.g. `"Amiri", serif` */
6
- family: string;
7
- /** Optional dropdown group heading */
8
- group?: string;
9
- }
10
- export declare const URDU_WEB_FONT_OPTIONS: FontOption[];
11
- /** Registers every urdu-web-fonts @font-face via a <link> per family. Safe to
12
- * call repeatedly and from several editors: it injects once per page. */
13
- export declare function injectUrduWebFontsCss(): void;
14
- //# sourceMappingURL=urduWebFonts.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"urduWebFonts.d.ts","sourceRoot":"","sources":["../../src/fonts/urduWebFonts.ts"],"names":[],"mappings":"AAqDA,uDAAuD;AACvD,MAAM,WAAW,UAAU;IACzB,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,+EAA+E;IAC/E,MAAM,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,qBAAqB,EAAE,UAAU,EAI3C,CAAC;AAIJ;yEACyE;AACzE,wBAAgB,qBAAqB,IAAI,IAAI,CAc5C"}
@@ -1,66 +0,0 @@
1
- /**
2
- * Loads the Urdu/Arabic-script font collection from the
3
- * inshapardaz/urdu-web-fonts GitHub repository through jsDelivr's GitHub
4
- * CDN — the same source, and the same pinned commit, that the qari EPUB
5
- * reader uses, so both apps offer an identical font set. Nothing is bundled
6
- * or added as an npm dependency.
7
- *
8
- * Pinned to a commit (not a branch) so the fonts served don't change under
9
- * consumers unexpectedly; bump URDU_WEB_FONTS_COMMIT to pick up upstream
10
- * additions. Each family's stylesheet only registers its @font-face rules —
11
- * the browser downloads a font file when that font is actually used.
12
- */
13
- const URDU_WEB_FONTS_COMMIT = '571e360d5c272252efb0b0b21af54d1f63457521';
14
- const URDU_WEB_FONTS_BASE_URL = `https://cdn.jsdelivr.net/gh/inshapardaz/urdu-web-fonts@${URDU_WEB_FONTS_COMMIT}/src/fonts`;
15
- const URDU_WEB_FONTS = [
16
- { dir: 'adobe-arabic', name: 'Adobe Arabic', family: 'AdobeArabic' },
17
- { dir: 'alvi-lahori-nastalique', name: 'Alvi Lahori Nastaleeq', family: 'AlviLahoriNastaleeq' },
18
- { dir: 'amiri', name: 'Amiri', family: 'Amiri' },
19
- { dir: 'aref-ruqqa', name: 'Aref Ruqaa', family: 'Aref Ruqaa' },
20
- { dir: 'dehalvi-khushkhat', name: 'Dehalvi Khush Khat', family: 'DehalviKhushKhat' },
21
- { dir: 'dubai', name: 'Dubai', family: 'Dubai' },
22
- { dir: 'emad-nastaleeq', name: 'Emad Nastaleeq', family: 'EmadNastaleeq' },
23
- { dir: 'fajer-noori-nastalique', name: 'Fajer Noori Nastalique', family: 'FajerNooriNastalique' },
24
- { dir: 'gulzar-nastalique', name: 'Gulzar Nastalique', family: 'gulzar-nastalique' },
25
- { dir: 'jameel-khushkhati', name: 'Jameel Khushkhati', family: 'jameel-khushkhati' },
26
- { dir: 'jameel-noori-kasheeda', name: 'Jameel Noori Nastaleeq Kasheeda', family: 'JameelNooriNastaleeqKasheeda' },
27
- { dir: 'jameel-noori-nastalique', name: 'Jameel Noori Nastaleeq', family: 'JameelNooriNastaleeq' },
28
- { dir: 'lalezar', name: 'Lalezar', family: 'Lalezar' },
29
- { dir: 'lateef', name: 'Lateef', family: 'Lateef' },
30
- { dir: 'mada', name: 'Mada', family: 'Mada' },
31
- { dir: 'mehr-nastalique', name: 'Mehr Nastaleeq', family: 'MehrNastaleeq' },
32
- { dir: 'mehr-nastalique-2', name: 'Mehr Nastaliq Web', family: 'Mehr Nastaliq Web' },
33
- { dir: 'nafees-nastaleeq', name: 'Nafees Nastaleeq', family: 'NafeesNastaleeq' },
34
- { dir: 'Nafees-web-naskh', name: 'Nafees Web Naskh', family: 'NafeesWebNaskh' },
35
- { dir: 'noto-naskh', name: 'Noto Naskh Arabic', family: 'Noto Naskh Arabic' },
36
- { dir: 'noto-nastalique', name: 'Noto Nastaliq Urdu', family: 'Noto Nastaliq Urdu' },
37
- { dir: 'pak-nastaleeq', name: 'Pak Nastaleeq', family: 'PakNastaleeq' },
38
- { dir: 'qahiri', name: 'Qahiri', family: 'Qahiri' },
39
- { dir: 'reem-kufi', name: 'Reem Kufi', family: 'Reem Kufi' },
40
- { dir: 'sameer-khashab-bold', name: 'Sameer Khashab Bold', family: 'sameer-khashab' },
41
- { dir: 'scheherazade', name: 'Scheherazade New', family: 'Scheherazade New' },
42
- ];
43
- export const URDU_WEB_FONT_OPTIONS = URDU_WEB_FONTS.map((font) => ({
44
- name: font.name,
45
- family: `"${font.family}", serif`,
46
- group: 'Urdu / Arabic script',
47
- }));
48
- let injected = false;
49
- /** Registers every urdu-web-fonts @font-face via a <link> per family. Safe to
50
- * call repeatedly and from several editors: it injects once per page. */
51
- export function injectUrduWebFontsCss() {
52
- if (injected || typeof document === 'undefined')
53
- return;
54
- if (document.querySelector('link[data-likhari-urdu-fonts]')) {
55
- injected = true;
56
- return;
57
- }
58
- for (const font of URDU_WEB_FONTS) {
59
- const link = document.createElement('link');
60
- link.rel = 'stylesheet';
61
- link.href = `${URDU_WEB_FONTS_BASE_URL}/${font.dir}/stylesheet.css`;
62
- link.setAttribute('data-likhari-urdu-fonts', font.dir);
63
- document.head.appendChild(link);
64
- }
65
- injected = true;
66
- }
@@ -1,25 +0,0 @@
1
- import type { ImageLinkType } from './ImageNode.js';
2
- export interface ImageDialogResult {
3
- src: string;
4
- altText: string;
5
- caption: string | null;
6
- linkType: ImageLinkType;
7
- }
8
- export interface ImageDialogProps {
9
- opened: boolean;
10
- /** `images.linked` — allow an external URL. */
11
- allowLinked: boolean;
12
- /** `images.embedded` — allow uploading a file. */
13
- allowEmbedded: boolean;
14
- /** `images.caption` — image gets an (initially empty) caption. */
15
- allowCaption: boolean;
16
- /** `images.maxSizeMB` */
17
- maxSizeMB: number;
18
- /** Host upload handler; when absent, uploads are embedded as base64 data URIs. */
19
- onImageUpload?: (file: File) => Promise<string>;
20
- onSubmit: (image: ImageDialogResult) => void;
21
- onClose: () => void;
22
- }
23
- /** Insert-image dialog (UI spec §6): an external URL and/or an uploaded file. */
24
- export declare function ImageDialog({ opened, allowLinked, allowEmbedded, allowCaption, maxSizeMB, onImageUpload, onSubmit, onClose, }: ImageDialogProps): import("react").JSX.Element;
25
- //# sourceMappingURL=ImageDialog.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ImageDialog.d.ts","sourceRoot":"","sources":["../../src/image/ImageDialog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,aAAa,CAAC;CACzB;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,+CAA+C;IAC/C,WAAW,EAAE,OAAO,CAAC;IACrB,kDAAkD;IAClD,aAAa,EAAE,OAAO,CAAC;IACvB,kEAAkE;IAClE,YAAY,EAAE,OAAO,CAAC;IACtB,yBAAyB;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,kFAAkF;IAClF,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAChD,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC7C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAWD,iFAAiF;AACjF,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,WAAW,EACX,aAAa,EACb,YAAY,EACZ,SAAS,EACT,aAAa,EACb,QAAQ,EACR,OAAO,GACR,EAAE,gBAAgB,+BAmHlB"}
@@ -1,76 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useEffect, useState } from 'react';
3
- import { Alert, Button, FileInput, Group, Modal, SegmentedControl, Stack, TextInput } from '@mantine/core';
4
- import { ACCEPTED_IMAGE_TYPES, normalizeImageUrl, validateImageFile } from './imageUrl.js';
5
- function readAsDataUrl(file) {
6
- return new Promise((resolve, reject) => {
7
- const reader = new FileReader();
8
- reader.onload = () => resolve(String(reader.result));
9
- reader.onerror = () => reject(reader.error ?? new Error('Could not read the file'));
10
- reader.readAsDataURL(file);
11
- });
12
- }
13
- /** Insert-image dialog (UI spec §6): an external URL and/or an uploaded file. */
14
- export function ImageDialog({ opened, allowLinked, allowEmbedded, allowCaption, maxSizeMB, onImageUpload, onSubmit, onClose, }) {
15
- const defaultSource = allowLinked ? 'linked' : 'embedded';
16
- const [source, setSource] = useState(defaultSource);
17
- const [url, setUrl] = useState('');
18
- const [file, setFile] = useState(null);
19
- const [altText, setAltText] = useState('');
20
- const [error, setError] = useState(null);
21
- const [busy, setBusy] = useState(false);
22
- useEffect(() => {
23
- if (opened) {
24
- setSource(defaultSource);
25
- setUrl('');
26
- setFile(null);
27
- setAltText('');
28
- setError(null);
29
- setBusy(false);
30
- }
31
- }, [opened, defaultSource]);
32
- const handleSubmit = async (e) => {
33
- e.preventDefault();
34
- setError(null);
35
- try {
36
- let src;
37
- if (source === 'linked') {
38
- src = normalizeImageUrl(url);
39
- if (!src) {
40
- setError('Enter an http(s) or relative image URL');
41
- return;
42
- }
43
- }
44
- else {
45
- if (!file) {
46
- setError('Choose an image file');
47
- return;
48
- }
49
- const problem = validateImageFile(file, maxSizeMB);
50
- if (problem) {
51
- setError(problem);
52
- return;
53
- }
54
- setBusy(true);
55
- src = onImageUpload ? await onImageUpload(file) : await readAsDataUrl(file);
56
- if (!normalizeImageUrl(src)) {
57
- setError('The upload handler returned an unusable image URL');
58
- setBusy(false);
59
- return;
60
- }
61
- }
62
- onSubmit({ src, altText: altText.trim(), caption: allowCaption ? '' : null, linkType: source });
63
- }
64
- catch (err) {
65
- setError(err instanceof Error ? err.message : 'Could not add the image');
66
- setBusy(false);
67
- }
68
- };
69
- return (_jsx(Modal, { opened: opened, onClose: onClose, title: "Insert image", centered: true, size: "sm", children: _jsx("form", { onSubmit: handleSubmit, children: _jsxs(Stack, { gap: "sm", children: [allowLinked && allowEmbedded && (_jsx(SegmentedControl, { fullWidth: true, value: source, onChange: (v) => {
70
- setSource(v);
71
- setError(null);
72
- }, data: [
73
- { value: 'linked', label: 'From URL' },
74
- { value: 'embedded', label: 'Upload' },
75
- ] })), source === 'linked' ? (_jsx(TextInput, { label: "Image URL", placeholder: "https://example.com/photo.jpg", value: url, onChange: (e) => setUrl(e.currentTarget.value), "data-autofocus": true })) : (_jsx(FileInput, { label: "Image file", placeholder: "Choose an image", accept: ACCEPTED_IMAGE_TYPES.join(','), value: file, onChange: setFile, description: `Up to ${maxSizeMB} MB${onImageUpload ? '' : '; stored inside the document'}` })), _jsx(TextInput, { label: "Alt text", description: "Describes the image for screen readers", value: altText, onChange: (e) => setAltText(e.currentTarget.value) }), error && (_jsx(Alert, { color: "red", variant: "light", p: "xs", children: error })), _jsxs(Group, { justify: "flex-end", gap: "xs", children: [_jsx(Button, { variant: "default", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", loading: busy, children: "Insert" })] })] }) }) }));
76
- }
@@ -1,56 +0,0 @@
1
- import { type ReactElement } from 'react';
2
- import { DecoratorNode, type DOMExportOutput, type EditorConfig, type LexicalNode, type NodeKey, type SerializedLexicalNode, type Spread } from 'lexical';
3
- /** How the image's bytes are held: an external URL, or embedded in the
4
- * document (a base64 data URI, or a URL returned by the host's upload handler). */
5
- export type ImageLinkType = 'linked' | 'embedded';
6
- export interface ImagePayload {
7
- src: string;
8
- altText?: string;
9
- /** null = no caption; '' = caption enabled but empty */
10
- caption?: string | null;
11
- linkType: ImageLinkType;
12
- width?: number | null;
13
- height?: number | null;
14
- key?: NodeKey;
15
- }
16
- export type SerializedImageNode = Spread<{
17
- src: string;
18
- altText: string;
19
- caption: string | null;
20
- linkType: ImageLinkType;
21
- width: number | null;
22
- height: number | null;
23
- }, SerializedLexicalNode>;
24
- /**
25
- * Block-level image (editor-architecture-design.md §3.5). The caption is a
26
- * plain string edited through an input under the image — not the nested
27
- * sub-editor the architecture doc leaves open — which keeps caption edits in
28
- * the parent editor's undo history.
29
- */
30
- export declare class ImageNode extends DecoratorNode<ReactElement> {
31
- __src: string;
32
- __altText: string;
33
- __caption: string | null;
34
- __linkType: ImageLinkType;
35
- __width: number | null;
36
- __height: number | null;
37
- static getType(): string;
38
- static clone(node: ImageNode): ImageNode;
39
- static importJSON(json: SerializedImageNode): ImageNode;
40
- constructor(src: string, altText?: string, caption?: string | null, linkType?: ImageLinkType, width?: number | null, height?: number | null, key?: NodeKey);
41
- exportJSON(): SerializedImageNode;
42
- /** `<figure><img><figcaption>` — the figure/figcaption semantics from spec §4.7. */
43
- exportDOM(): DOMExportOutput;
44
- createDOM(config: EditorConfig): HTMLElement;
45
- updateDOM(): false;
46
- isInline(): false;
47
- getSrc(): string;
48
- getAltText(): string;
49
- getCaption(): string | null;
50
- setCaption(caption: string | null): this;
51
- getTextContent(): string;
52
- decorate(): ReactElement;
53
- }
54
- export declare function $createImageNode({ src, altText, caption, linkType, width, height, key }: ImagePayload): ImageNode;
55
- export declare function $isImageNode(node: LexicalNode | null | undefined): node is ImageNode;
56
- //# sourceMappingURL=ImageNode.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ImageNode.d.ts","sourceRoot":"","sources":["../../src/image/ImageNode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1E,OAAO,EAML,aAAa,EAGb,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,OAAO,EACZ,KAAK,qBAAqB,EAC1B,KAAK,MAAM,EACZ,MAAM,SAAS,CAAC;AAEjB;mFACmF;AACnF,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,CAAC;AAElD,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,MAAM,MAAM,mBAAmB,GAAG,MAAM,CACtC;IACE,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,aAAa,CAAC;IACxB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,EACD,qBAAqB,CACtB,CAAC;AAEF;;;;;GAKG;AACH,qBAAa,SAAU,SAAQ,aAAa,CAAC,YAAY,CAAC;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,UAAU,EAAE,aAAa,CAAC;IAC1B,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IAExB,MAAM,CAAC,OAAO,IAAI,MAAM;IAIxB,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS;IAIxC,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,mBAAmB,GAAG,SAAS;gBAYrD,GAAG,EAAE,MAAM,EACX,OAAO,SAAK,EACZ,OAAO,GAAE,MAAM,GAAG,IAAW,EAC7B,QAAQ,GAAE,aAAwB,EAClC,KAAK,GAAE,MAAM,GAAG,IAAW,EAC3B,MAAM,GAAE,MAAM,GAAG,IAAW,EAC5B,GAAG,CAAC,EAAE,OAAO;IAWf,UAAU,IAAI,mBAAmB;IAajC,oFAAoF;IACpF,SAAS,IAAI,eAAe;IAgB5B,SAAS,CAAC,MAAM,EAAE,YAAY,GAAG,WAAW;IAO5C,SAAS,IAAI,KAAK;IAIlB,QAAQ,IAAI,KAAK;IAIjB,MAAM,IAAI,MAAM;IAIhB,UAAU,IAAI,MAAM;IAIpB,UAAU,IAAI,MAAM,GAAG,IAAI;IAI3B,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAMxC,cAAc,IAAI,MAAM;IAIxB,QAAQ,IAAI,YAAY;CAYzB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,YAAY,GAAG,SAAS,CAEjH;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,IAAI,SAAS,CAEpF"}
@@ -1,151 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useCallback, useEffect, useRef } from 'react';
3
- import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
4
- import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
5
- import { $getNodeByKey, $getSelection, $isNodeSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, DecoratorNode, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, } from 'lexical';
6
- /**
7
- * Block-level image (editor-architecture-design.md §3.5). The caption is a
8
- * plain string edited through an input under the image — not the nested
9
- * sub-editor the architecture doc leaves open — which keeps caption edits in
10
- * the parent editor's undo history.
11
- */
12
- export class ImageNode extends DecoratorNode {
13
- static getType() {
14
- return 'image';
15
- }
16
- static clone(node) {
17
- return new ImageNode(node.__src, node.__altText, node.__caption, node.__linkType, node.__width, node.__height, node.__key);
18
- }
19
- static importJSON(json) {
20
- return $createImageNode({
21
- src: json.src,
22
- altText: json.altText,
23
- caption: json.caption,
24
- linkType: json.linkType,
25
- width: json.width,
26
- height: json.height,
27
- });
28
- }
29
- constructor(src, altText = '', caption = null, linkType = 'linked', width = null, height = null, key) {
30
- super(key);
31
- this.__src = src;
32
- this.__altText = altText;
33
- this.__caption = caption;
34
- this.__linkType = linkType;
35
- this.__width = width;
36
- this.__height = height;
37
- }
38
- exportJSON() {
39
- return {
40
- type: 'image',
41
- version: 1,
42
- src: this.__src,
43
- altText: this.__altText,
44
- caption: this.__caption,
45
- linkType: this.__linkType,
46
- width: this.__width,
47
- height: this.__height,
48
- };
49
- }
50
- /** `<figure><img><figcaption>` — the figure/figcaption semantics from spec §4.7. */
51
- exportDOM() {
52
- const figure = document.createElement('figure');
53
- const img = document.createElement('img');
54
- img.setAttribute('src', this.__src);
55
- img.setAttribute('alt', this.__altText);
56
- if (this.__width)
57
- img.setAttribute('width', String(this.__width));
58
- if (this.__height)
59
- img.setAttribute('height', String(this.__height));
60
- figure.appendChild(img);
61
- if (this.__caption) {
62
- const caption = document.createElement('figcaption');
63
- caption.textContent = this.__caption;
64
- figure.appendChild(caption);
65
- }
66
- return { element: figure };
67
- }
68
- createDOM(config) {
69
- const div = document.createElement('div');
70
- const className = config.theme.image;
71
- if (typeof className === 'string')
72
- div.className = className;
73
- return div;
74
- }
75
- updateDOM() {
76
- return false;
77
- }
78
- isInline() {
79
- return false;
80
- }
81
- getSrc() {
82
- return this.__src;
83
- }
84
- getAltText() {
85
- return this.__altText;
86
- }
87
- getCaption() {
88
- return this.__caption;
89
- }
90
- setCaption(caption) {
91
- const writable = this.getWritable();
92
- writable.__caption = caption;
93
- return writable;
94
- }
95
- getTextContent() {
96
- return this.__altText || this.__caption || '';
97
- }
98
- decorate() {
99
- return (_jsx(ImageComponent, { nodeKey: this.getKey(), src: this.__src, altText: this.__altText, caption: this.__caption, width: this.__width, height: this.__height }));
100
- }
101
- }
102
- export function $createImageNode({ src, altText, caption, linkType, width, height, key }) {
103
- return new ImageNode(src, altText, caption ?? null, linkType, width ?? null, height ?? null, key);
104
- }
105
- export function $isImageNode(node) {
106
- return node instanceof ImageNode;
107
- }
108
- function ImageComponent({ nodeKey, src, altText, caption, width, height }) {
109
- const [editor] = useLexicalComposerContext();
110
- const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
111
- const imageRef = useRef(null);
112
- // Selecting must go through CLICK_COMMAND (returning true) rather than a
113
- // React onClick: otherwise Lexical's own click handling turns the DOM
114
- // selection into a range selection right after, undoing the node selection.
115
- useEffect(() => {
116
- return editor.registerCommand(CLICK_COMMAND, (event) => {
117
- if (event.target !== imageRef.current)
118
- return false;
119
- clearSelection();
120
- setSelected(true);
121
- return true;
122
- }, COMMAND_PRIORITY_LOW);
123
- }, [editor, clearSelection, setSelected]);
124
- // Delete/Backspace removes the selected image — but not while typing in the
125
- // caption input, whose keystrokes also reach the editor's root listener.
126
- const onDelete = useCallback((event) => {
127
- if (!isSelected || event.target instanceof HTMLInputElement)
128
- return false;
129
- if (!$isNodeSelection($getSelection()))
130
- return false;
131
- event.preventDefault();
132
- $getNodeByKey(nodeKey)?.remove();
133
- return true;
134
- }, [isSelected, nodeKey]);
135
- useEffect(() => {
136
- const unregisterDelete = editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW);
137
- const unregisterBackspace = editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW);
138
- return () => {
139
- unregisterDelete();
140
- unregisterBackspace();
141
- };
142
- }, [editor, onDelete]);
143
- const setCaption = (value) => {
144
- editor.update(() => {
145
- const node = $getNodeByKey(nodeKey);
146
- if ($isImageNode(node))
147
- node.setCaption(value);
148
- });
149
- };
150
- return (_jsxs("figure", { className: "likhari-image-figure", "data-selected": isSelected ? 'true' : 'false', contentEditable: false, children: [_jsx("img", { ref: imageRef, className: "likhari-image", src: src, alt: altText, width: width ?? undefined, height: height ?? undefined, draggable: false }), caption !== null && (_jsx("input", { className: "likhari-image-caption", type: "text", "aria-label": "Image caption", placeholder: "Add a caption\u2026", value: caption, onChange: (e) => setCaption(e.currentTarget.value) }))] }));
151
- }
@@ -1,14 +0,0 @@
1
- /**
2
- * Validates the source of a linked image. Accepts http(s) URLs, relative
3
- * paths, and base64 raster/SVG data URIs (what an embedded image stores);
4
- * anything else (javascript:, other data: types, file:, ...) is rejected.
5
- * Returns the trimmed URL, or null when it should be refused.
6
- */
7
- export declare function normalizeImageUrl(input: string): string | null;
8
- export declare const ACCEPTED_IMAGE_TYPES: string[];
9
- /** Returns an error message if the file can't be inserted, otherwise null. */
10
- export declare function validateImageFile(file: {
11
- type: string;
12
- size: number;
13
- }, maxSizeMB: number): string | null;
14
- //# sourceMappingURL=imageUrl.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"imageUrl.d.ts","sourceRoot":"","sources":["../../src/image/imageUrl.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAO9D;AAED,eAAO,MAAM,oBAAoB,UAA0E,CAAC;AAE5G,8EAA8E;AAC9E,wBAAgB,iBAAiB,CAAC,IAAI,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAIxG"}
@@ -1,27 +0,0 @@
1
- /**
2
- * Validates the source of a linked image. Accepts http(s) URLs, relative
3
- * paths, and base64 raster/SVG data URIs (what an embedded image stores);
4
- * anything else (javascript:, other data: types, file:, ...) is rejected.
5
- * Returns the trimmed URL, or null when it should be refused.
6
- */
7
- export function normalizeImageUrl(input) {
8
- const url = input.trim();
9
- if (!url)
10
- return null;
11
- if (/^https?:\/\/\S+$/i.test(url))
12
- return url;
13
- if (/^(\/|\.\.?\/)\S*$/.test(url))
14
- return url;
15
- if (/^data:image\/(png|jpe?g|gif|webp|svg\+xml);base64,[a-z0-9+/=]+$/i.test(url))
16
- return url;
17
- return null;
18
- }
19
- export const ACCEPTED_IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/gif', 'image/webp', 'image/svg+xml'];
20
- /** Returns an error message if the file can't be inserted, otherwise null. */
21
- export function validateImageFile(file, maxSizeMB) {
22
- if (!ACCEPTED_IMAGE_TYPES.includes(file.type))
23
- return 'Choose a PNG, JPEG, GIF, WebP or SVG image';
24
- if (file.size > maxSizeMB * 1024 * 1024)
25
- return `Image is larger than ${maxSizeMB} MB`;
26
- return null;
27
- }
@@ -1,4 +0,0 @@
1
- /** Sets (or replaces) one property in an inline CSS string like Lexical's
2
- * TextNode style, keeping every other property as-is. */
3
- export declare function setStyleProperty(css: string, property: string, value: string): string;
4
- //# sourceMappingURL=style.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/utils/style.ts"],"names":[],"mappings":"AAAA;yDACyD;AACzD,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAYrF"}
@@ -1,15 +0,0 @@
1
- /** Sets (or replaces) one property in an inline CSS string like Lexical's
2
- * TextNode style, keeping every other property as-is. */
3
- export function setStyleProperty(css, property, value) {
4
- const entries = css
5
- .split(';')
6
- .map((part) => part.trim())
7
- .filter(Boolean)
8
- .map((part) => {
9
- const i = part.indexOf(':');
10
- return [part.slice(0, i).trim(), part.slice(i + 1).trim()];
11
- })
12
- .filter(([name]) => name !== property);
13
- entries.push([property, value]);
14
- return entries.map(([name, val]) => `${name}: ${val};`).join(' ');
15
- }