@inshapardaz/likhari-react 0.1.6 → 0.1.7-dev.73

package/dist/i18n/strings.js

@@ -0,0 +1,425 @@
+/**
+ * UI localization strings for the editor's own chrome (toolbar, dialogs,
+ * menus, placeholders) — see docs/lexical-editor-spec.md §3.2. This is
+ * separate from content direction/fonts (handled in EditorRoot) and from
+ * Markdown/HTML/plain-text format translation, which is out of scope here.
+ */
+const en = {
+    editor: {
+        placeholder: 'Start writing…',
+        contentLabel: 'Editor content',
+        confirmDiscard: 'You have unsaved changes. Discard them?',
+    },
+    common: {
+        cancel: 'Cancel',
+        save: 'Save',
+        insert: 'Insert',
+    },
+    toolbar: {
+        ariaLabel: 'Formatting',
+        save: 'Save',
+        undo: 'Undo',
+        redo: 'Redo',
+        formattingLabel: 'Formatting',
+        bold: 'Bold',
+        italic: 'Italic',
+        underline: 'Underline',
+        fontFamily: 'Font family',
+        fontFamilyPlaceholder: 'Font',
+        fontSize: 'Font size',
+        fontSizePlaceholder: 'Size',
+        noMatch: 'No match',
+        alignment: 'Alignment',
+        linkOptions: 'Link options',
+        insertLink: 'Insert link (Ctrl+K)',
+        insertImage: 'Insert image',
+        poetryBlocks: 'Poetry blocks',
+        comingSoon: (label) => `${label} (coming soon)`,
+        autocorrect: 'Auto-correct',
+        textCleanup: 'Text cleanup',
+        spellChecker: 'Spell-checker',
+        moreFormatting: 'More formatting',
+        strikethrough: 'Strikethrough',
+        superscript: 'Superscript',
+        subscript: 'Subscript',
+        uppercase: 'UPPERCASE',
+        lowercase: 'lowercase',
+        capitalize: 'Capitalize',
+        clearFormatting: 'Clear formatting',
+        outdent: 'Outdent',
+        indent: 'Indent',
+        formattingOptions: {
+            paragraph: 'Paragraph',
+            heading: (level) => `Heading ${level}`,
+            numberedList: 'Numbered list',
+            bulletList: 'Bullet list',
+            taskList: 'Task list',
+            quote: 'Quote',
+        },
+        alignOptions: {
+            start: 'Align start',
+            center: 'Align center',
+            end: 'Align end',
+            justify: 'Justify',
+            left: 'Align left',
+            right: 'Align right',
+        },
+    },
+    link: {
+        menuLabel: 'Link',
+        noUrl: '(no URL)',
+        editLink: 'Edit link',
+        removeLink: 'Remove link',
+    },
+    linkDialog: {
+        titleInsert: 'Insert link',
+        titleEdit: 'Edit link',
+        urlLabel: 'URL',
+        urlPlaceholder: 'https://example.com',
+        textLabel: 'Text',
+        textPlaceholder: 'Link text (defaults to the URL)',
+        invalidUrl: 'Enter a valid http(s), mailto, tel or relative URL',
+        apply: 'Apply',
+    },
+    imageDialog: {
+        titleInsert: 'Insert image',
+        titleEdit: 'Edit image',
+        currentImage: 'Current image',
+        fromUrl: 'From URL',
+        upload: 'Upload',
+        embeddedInDocument: 'Embedded in the document',
+        linkedFrom: (src) => `Linked from ${src}`,
+        convertButton: 'Convert to embedded image',
+        convertHint: 'Downloads a copy into the document, so it can be cropped, rotated and resized.',
+        imageUrlLabel: 'Image URL',
+        imageUrlPlaceholder: 'https://example.com/photo.jpg',
+        embedCopyLabel: 'Embed a copy in the document',
+        embedCopyDescription: 'Downloads the image so it can be edited and no longer depends on the URL.',
+        convertedFromUrl: 'Converted from the URL: a copy will be embedded in the document.',
+        fileLabel: 'Image file',
+        filePlaceholder: 'Choose an image',
+        fileDescription: (maxSizeMB, storedInDocument) => `Up to ${maxSizeMB} MB${storedInDocument ? '; stored inside the document' : ''}`,
+        altTextLabel: 'Alt text',
+        altTextDescription: 'Describes the image for screen readers',
+        captionLabel: 'Caption',
+        captionDescription: 'Shown under the image. Leave empty for none.',
+        errors: {
+            enterUrl: 'Enter an http(s) or relative image URL',
+            chooseFile: 'Choose an image file',
+            noImage: 'No image',
+            uploadUnusable: 'The upload handler returned an unusable image URL',
+            couldNotSave: 'Could not save the image',
+            couldNotConvert: 'Could not convert the image',
+            couldNotReadFile: 'Could not read the file',
+            largerThan: (maxSizeMB) => `Image is larger than ${maxSizeMB} MB`,
+        },
+    },
+    imageCropDialog: {
+        title: 'Crop & resize',
+        sizeLabel: 'Size',
+        widthLabel: 'Width (px)',
+        heightLabel: 'Height (px)',
+        autoPlaceholder: 'Auto',
+        keepProportions: 'Keep proportions',
+        originalSize: 'Original size',
+        dragHint: (natural) => `You can also drag the corner handle on a selected image. ${natural ? `Original: ${natural.width} × ${natural.height} px.` : ''}`,
+        errors: {
+            uploadUnusable: 'The upload handler returned an unusable image URL',
+            couldNotSave: 'Could not save the image',
+            largerThan: (maxSizeMB) => `Image is larger than ${maxSizeMB} MB`,
+        },
+    },
+    imageMenu: {
+        editImage: 'Edit image…',
+        convertToEmbedded: 'Convert to embedded image',
+        cropResize: 'Crop & resize…',
+        addCaption: 'Add caption…',
+        editCaption: 'Edit caption…',
+        removeCaption: 'Remove caption',
+        deleteImage: 'Delete image',
+        resizeImage: 'Resize image',
+    },
+};
+const ur = {
+    editor: {
+        placeholder: 'لکھنا شروع کریں…',
+        contentLabel: 'ایڈیٹر کا مواد',
+        confirmDiscard: 'آپ کی غیر محفوظ شدہ تبدیلیاں ہیں۔ کیا انہیں رد کر دیا جائے؟',
+    },
+    common: {
+        cancel: 'منسوخ کریں',
+        save: 'محفوظ کریں',
+        insert: 'شامل کریں',
+    },
+    toolbar: {
+        ariaLabel: 'فارمیٹنگ',
+        save: 'محفوظ کریں',
+        undo: 'کالعدم کریں',
+        redo: 'دوبارہ کریں',
+        formattingLabel: 'فارمیٹنگ',
+        bold: 'موٹا',
+        italic: 'ترچھا',
+        underline: 'زیرِ خط',
+        fontFamily: 'فونٹ کا خاندان',
+        fontFamilyPlaceholder: 'فونٹ',
+        fontSize: 'فونٹ کا سائز',
+        fontSizePlaceholder: 'سائز',
+        noMatch: 'کوئی مماثلت نہیں',
+        alignment: 'سیدھ',
+        linkOptions: 'لنک کے اختیارات',
+        insertLink: 'لنک شامل کریں (Ctrl+K)',
+        insertImage: 'تصویر شامل کریں',
+        poetryBlocks: 'شاعری کے بلاکس',
+        comingSoon: (label) => `${label} (جلد آ رہا ہے)`,
+        autocorrect: 'خودکار تصحیح',
+        textCleanup: 'متن کی صفائی',
+        spellChecker: 'ہجے چیک کرنے والا',
+        moreFormatting: 'مزید فارمیٹنگ',
+        strikethrough: 'خط زدہ',
+        superscript: 'بالا نویس',
+        subscript: 'زیریں نویس',
+        uppercase: 'بڑے حروف',
+        lowercase: 'چھوٹے حروف',
+        capitalize: 'پہلا حرف بڑا',
+        clearFormatting: 'فارمیٹنگ ختم کریں',
+        outdent: 'حاشیہ کم کریں',
+        indent: 'حاشیہ بڑھائیں',
+        formattingOptions: {
+            paragraph: 'پیراگراف',
+            heading: (level) => `عنوان ${level}`,
+            numberedList: 'نمبردار فہرست',
+            bulletList: 'بلٹ فہرست',
+            taskList: 'ٹاسک فہرست',
+            quote: 'اقتباس',
+        },
+        alignOptions: {
+            start: 'ابتدائی سیدھ',
+            center: 'درمیانی سیدھ',
+            end: 'اختتامی سیدھ',
+            justify: 'دو طرفہ سیدھ',
+            left: 'بائیں سیدھ',
+            right: 'دائیں سیدھ',
+        },
+    },
+    link: {
+        menuLabel: 'لنک',
+        noUrl: '(کوئی یو آر ایل نہیں)',
+        editLink: 'لنک میں ترمیم کریں',
+        removeLink: 'لنک ہٹائیں',
+    },
+    linkDialog: {
+        titleInsert: 'لنک شامل کریں',
+        titleEdit: 'لنک میں ترمیم کریں',
+        urlLabel: 'یو آر ایل',
+        urlPlaceholder: 'https://example.com',
+        textLabel: 'عبارت',
+        textPlaceholder: 'لنک کی عبارت (نہ دینے پر یو آر ایل ہی استعمال ہوگا)',
+        invalidUrl: 'براہِ کرم ایک درست http(s)، mailto، tel یا رشتہ دار یو آر ایل درج کریں',
+        apply: 'لاگو کریں',
+    },
+    imageDialog: {
+        titleInsert: 'تصویر شامل کریں',
+        titleEdit: 'تصویر میں ترمیم کریں',
+        currentImage: 'موجودہ تصویر',
+        fromUrl: 'یو آر ایل سے',
+        upload: 'اپ لوڈ',
+        embeddedInDocument: 'دستاویز میں شامل',
+        linkedFrom: (src) => `${src} سے منسلک`,
+        convertButton: 'شامل شدہ تصویر میں تبدیل کریں',
+        convertHint: 'دستاویز میں ایک نقل ڈاؤن لوڈ کرتا ہے، تاکہ اسے کاٹا، گھمایا اور سائز تبدیل کیا جا سکے۔',
+        imageUrlLabel: 'تصویر کا یو آر ایل',
+        imageUrlPlaceholder: 'https://example.com/photo.jpg',
+        embedCopyLabel: 'دستاویز میں ایک نقل شامل کریں',
+        embedCopyDescription: 'تصویر ڈاؤن لوڈ کرتا ہے تاکہ اس میں ترمیم کی جا سکے اور یہ یو آر ایل پر منحصر نہ رہے۔',
+        convertedFromUrl: 'یو آر ایل سے تبدیل شدہ: ایک نقل دستاویز میں شامل کی جائے گی۔',
+        fileLabel: 'تصویر کی فائل',
+        filePlaceholder: 'ایک تصویر منتخب کریں',
+        fileDescription: (maxSizeMB, storedInDocument) => `${maxSizeMB} ایم بی تک${storedInDocument ? '؛ دستاویز کے اندر محفوظ ہوتی ہے' : ''}`,
+        altTextLabel: 'متبادل متن',
+        altTextDescription: 'سکرین ریڈرز کے لیے تصویر کی تفصیل بیان کرتا ہے',
+        captionLabel: 'کیپشن',
+        captionDescription: 'تصویر کے نیچے دکھایا جاتا ہے۔ نہ چاہیں تو خالی چھوڑ دیں۔',
+        errors: {
+            enterUrl: 'ایک http(s) یا رشتہ دار تصویر یو آر ایل درج کریں',
+            chooseFile: 'ایک تصویر فائل منتخب کریں',
+            noImage: 'کوئی تصویر نہیں',
+            uploadUnusable: 'اپ لوڈ ہینڈلر نے ناقابلِ استعمال یو آر ایل واپس کیا',
+            couldNotSave: 'تصویر محفوظ نہیں ہو سکی',
+            couldNotConvert: 'تصویر تبدیل نہیں ہو سکی',
+            couldNotReadFile: 'فائل پڑھی نہیں جا سکی',
+            largerThan: (maxSizeMB) => `تصویر ${maxSizeMB} ایم بی سے بڑی ہے`,
+        },
+    },
+    imageCropDialog: {
+        title: 'کاٹیں اور سائز تبدیل کریں',
+        sizeLabel: 'سائز',
+        widthLabel: 'چوڑائی (px)',
+        heightLabel: 'اونچائی (px)',
+        autoPlaceholder: 'خودکار',
+        keepProportions: 'تناسب برقرار رکھیں',
+        originalSize: 'اصل سائز',
+        dragHint: (natural) => `منتخب شدہ تصویر پر کارنر ہینڈل کھینچ کر بھی سائز تبدیل کیا جا سکتا ہے۔ ${natural ? `اصل: ${natural.width} × ${natural.height} پکسل۔` : ''}`,
+        errors: {
+            uploadUnusable: 'اپ لوڈ ہینڈلر نے ناقابلِ استعمال یو آر ایل واپس کیا',
+            couldNotSave: 'تصویر محفوظ نہیں ہو سکی',
+            largerThan: (maxSizeMB) => `تصویر ${maxSizeMB} ایم بی سے بڑی ہے`,
+        },
+    },
+    imageMenu: {
+        editImage: 'تصویر میں ترمیم کریں…',
+        convertToEmbedded: 'شامل شدہ تصویر میں تبدیل کریں',
+        cropResize: 'کاٹیں اور سائز تبدیل کریں…',
+        addCaption: 'کیپشن شامل کریں…',
+        editCaption: 'کیپشن میں ترمیم کریں…',
+        removeCaption: 'کیپشن ہٹائیں',
+        deleteImage: 'تصویر حذف کریں',
+        resizeImage: 'تصویر کا سائز تبدیل کریں',
+    },
+};
+const paShahmukhi = {
+    editor: {
+        placeholder: 'لکھنا شروع کرو…',
+        contentLabel: 'ایڈیٹر دی سامگری',
+        confirmDiscard: 'تہاڈیاں کجھ تبدیلیاں سنبھالیاں نئیں گئیاں۔ کی ایہناں نوں رد کر دیئے؟',
+    },
+    common: {
+        cancel: 'رد کرو',
+        save: 'سنبھالو',
+        insert: 'پاؤ',
+    },
+    toolbar: {
+        ariaLabel: 'فارمیٹنگ',
+        save: 'سنبھالو',
+        undo: 'پہلاں جیہا کرو',
+        redo: 'مُڑ کرو',
+        formattingLabel: 'فارمیٹنگ',
+        bold: 'گہرا',
+        italic: 'ترچھا',
+        underline: 'تھلے لکیر',
+        fontFamily: 'فونٹ خاندان',
+        fontFamilyPlaceholder: 'فونٹ',
+        fontSize: 'فونٹ دا سائز',
+        fontSizePlaceholder: 'سائز',
+        noMatch: 'کوئی نئیں ملیا',
+        alignment: 'سیدھ',
+        linkOptions: 'لنک دے اختیار',
+        insertLink: 'لنک پاؤ (Ctrl+K)',
+        insertImage: 'تصویر پاؤ',
+        poetryBlocks: 'شاعری بلاک',
+        comingSoon: (label) => `${label} (چھیتی آ رہا اے)`,
+        autocorrect: 'خودکار درستی',
+        textCleanup: 'متن دی صفائی',
+        spellChecker: 'ہجے چیکر',
+        moreFormatting: 'ہور فارمیٹنگ',
+        strikethrough: 'کٹی لکیر',
+        superscript: 'اُتلا لکھت',
+        subscript: 'تلا لکھت',
+        uppercase: 'وڈے حرف',
+        lowercase: 'نکے حرف',
+        capitalize: 'پہلا حرف وڈا',
+        clearFormatting: 'فارمیٹنگ ہٹاؤ',
+        outdent: 'حاشیہ گھٹاؤ',
+        indent: 'حاشیہ ودھاؤ',
+        formattingOptions: {
+            paragraph: 'پیراگراف',
+            heading: (level) => `سرلیکھ ${level}`,
+            numberedList: 'نمبردار لسٹ',
+            bulletList: 'بلٹ لسٹ',
+            taskList: 'ٹاسک لسٹ',
+            quote: 'حوالہ',
+        },
+        alignOptions: {
+            start: 'شروع دی سیدھ',
+            center: 'وچکار دی سیدھ',
+            end: 'آخری سیدھ',
+            justify: 'دوویں پاسے سیدھ',
+            left: 'بائیں سیدھ',
+            right: 'سجے سیدھ',
+        },
+    },
+    link: {
+        menuLabel: 'لنک',
+        noUrl: '(کوئی یو آر ایل نئیں)',
+        editLink: 'لنک وچ تبدیلی کرو',
+        removeLink: 'لنک ہٹاؤ',
+    },
+    linkDialog: {
+        titleInsert: 'لنک پاؤ',
+        titleEdit: 'لنک وچ تبدیلی کرو',
+        urlLabel: 'یو آر ایل',
+        urlPlaceholder: 'https://example.com',
+        textLabel: 'لکھت',
+        textPlaceholder: 'لنک دی لکھت (نہ دین تے یو آر ایل ای ورتیا جاوے گا)',
+        invalidUrl: 'کِرپا کر کے صحیح http(s)، mailto، tel یا نسبتی یو آر ایل پاؤ',
+        apply: 'لاگو کرو',
+    },
+    imageDialog: {
+        titleInsert: 'تصویر پاؤ',
+        titleEdit: 'تصویر وچ تبدیلی کرو',
+        currentImage: 'موجودہ تصویر',
+        fromUrl: 'یو آر ایل توں',
+        upload: 'اپ لوڈ',
+        embeddedInDocument: 'دستاویز وچ شامل',
+        linkedFrom: (src) => `${src} توں لنک کیتا گیا`,
+        convertButton: 'شامل تصویر وچ بدلو',
+        convertHint: 'دستاویز وچ اک کاپی ڈاؤن لوڈ کردا اے، تاں جو ایہنوں کٹیا، گھمایا تے سائز بدلیا جا سکے۔',
+        imageUrlLabel: 'تصویر دا یو آر ایل',
+        imageUrlPlaceholder: 'https://example.com/photo.jpg',
+        embedCopyLabel: 'دستاویز وچ اک کاپی شامل کرو',
+        embedCopyDescription: 'تصویر ڈاؤن لوڈ کردا اے تاں جو ایہنوں تبدیل کیتا جا سکے تے ایہہ یو آر ایل تے منحصر نہ رہے۔',
+        convertedFromUrl: 'یو آر ایل توں بدلیا گیا: اک کاپی دستاویز وچ شامل کیتی جاوے گی۔',
+        fileLabel: 'تصویر دی فائل',
+        filePlaceholder: 'اک تصویر چُنو',
+        fileDescription: (maxSizeMB, storedInDocument) => `${maxSizeMB} ایم بی تیک${storedInDocument ? '؛ دستاویز دے اندر سنبھالی جاندی اے' : ''}`,
+        altTextLabel: 'بدل متن',
+        altTextDescription: 'سکرین ریڈرز لئی تصویر دی وضاحت کردا اے',
+        captionLabel: 'کیپشن',
+        captionDescription: 'تصویر دے تھلے دکھایا جاندا اے۔ نہ چاہیدا تے خالی چھڈ دیو۔',
+        errors: {
+            enterUrl: 'اک http(s) یا نسبتی تصویر یو آر ایل پاؤ',
+            chooseFile: 'اک تصویر فائل چُنو',
+            noImage: 'کوئی تصویر نئیں',
+            uploadUnusable: 'اپ لوڈ ہینڈلر نے ناکارآمد یو آر ایل موڑیا',
+            couldNotSave: 'تصویر سنبھالی نئیں جا سکی',
+            couldNotConvert: 'تصویر بدلی نئیں جا سکی',
+            couldNotReadFile: 'فائل پڑھی نئیں جا سکی',
+            largerThan: (maxSizeMB) => `تصویر ${maxSizeMB} ایم بی توں وڈی اے`,
+        },
+    },
+    imageCropDialog: {
+        title: 'کٹو تے سائز بدلو',
+        sizeLabel: 'سائز',
+        widthLabel: 'چوڑائی (px)',
+        heightLabel: 'اُچائی (px)',
+        autoPlaceholder: 'خودکار',
+        keepProportions: 'تناسب رکھو',
+        originalSize: 'اصلی سائز',
+        dragHint: (natural) => `چُنی ہوئی تصویر تے کارنر ہینڈل گھسیٹ کے وی سائز بدلیا جا سکدا اے۔ ${natural ? `اصلی: ${natural.width} × ${natural.height} پکسل۔` : ''}`,
+        errors: {
+            uploadUnusable: 'اپ لوڈ ہینڈلر نے ناکارآمد یو آر ایل موڑیا',
+            couldNotSave: 'تصویر سنبھالی نئیں جا سکی',
+            largerThan: (maxSizeMB) => `تصویر ${maxSizeMB} ایم بی توں وڈی اے`,
+        },
+    },
+    imageMenu: {
+        editImage: 'تصویر وچ تبدیلی کرو…',
+        convertToEmbedded: 'شامل تصویر وچ بدلو',
+        cropResize: 'کٹو تے سائز بدلو…',
+        addCaption: 'کیپشن شامل کرو…',
+        editCaption: 'کیپشن وچ تبدیلی کرو…',
+        removeCaption: 'کیپشن ہٹاؤ',
+        deleteImage: 'تصویر مٹاؤ',
+        resizeImage: 'تصویر دا سائز بدلو',
+    },
+};
+export const STRINGS = {
+    en,
+    ur,
+    'pa-shahmukhi': paShahmukhi,
+};
+/** Returns the strings dictionary for `locale`, defensively falling back to
+ * `en` for any locale not present in `STRINGS` (e.g. a future locale value
+ * passed by a caller on an older type definition). */
+export function getStrings(locale) {
+    return STRINGS[locale] ?? STRINGS.en;
+}

package/dist/i18n/useStrings.d.ts

@@ -0,0 +1,10 @@
+import { type Locale, type Strings } from './strings.js';
+/** Returns the translated strings dictionary for `locale`. */
+export declare function useStrings(locale: Locale): Strings;
+/** Provided once at `EditorRoot`'s top level so components that aren't
+ * direct children (dialogs, context menus) can reach the current locale's
+ * strings without threading a `locale` prop through every intermediate
+ * component. */
+export declare const UiStringsContext: import("react").Context<Strings>;
+export declare function useUiStrings(): Strings;
+//# sourceMappingURL=useStrings.d.ts.map

package/dist/i18n/useStrings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStrings.d.ts","sourceRoot":"","sources":["../../src/i18n/useStrings.ts"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,MAAM,EAAE,KAAK,OAAO,EAAE,MAAM,WAAW,CAAC;AAElE,8DAA8D;AAC9D,wBAAgB,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAElD;AAED;;;gBAGgB;AAChB,eAAO,MAAM,gBAAgB,kCAA2C,CAAC;AAEzE,wBAAgB,YAAY,IAAI,OAAO,CAEtC"}

package/dist/i18n/useStrings.js

@@ -0,0 +1,14 @@
+import { createContext, useContext, useMemo } from 'react';
+import { getStrings } from './strings.js';
+/** Returns the translated strings dictionary for `locale`. */
+export function useStrings(locale) {
+    return useMemo(() => getStrings(locale), [locale]);
+}
+/** Provided once at `EditorRoot`'s top level so components that aren't
+ * direct children (dialogs, context menus) can reach the current locale's
+ * strings without threading a `locale` prop through every intermediate
+ * component. */
+export const UiStringsContext = createContext(getStrings('en'));
+export function useUiStrings() {
+    return useContext(UiStringsContext);
+}

package/dist/image/ImageComponent.d.ts

@@ -0,0 +1,23 @@
+import { type NodeKey } from 'lexical';
+import type { ImageLinkType } from './ImageNode.js';
+interface ImageComponentProps {
+    nodeKey: NodeKey;
+    src: string;
+    altText: string;
+    caption: string | null;
+    linkType: ImageLinkType;
+    /** Display width in px; null = natural size (height always follows the aspect ratio). */
+    width: number | null;
+    height: number | null;
+}
+/**
+ * An image in the document. Click selects it (Delete/Backspace removes it),
+ * drag the corner handle to resize an embedded image, double-click or
+ * right-click for the edit dialog and menu (edit image, convert a linked image
+ * to embedded, add/edit/remove caption, delete). The caption
+ * is shown as plain text under the image — it is edited in the dialog, not in
+ * place.
+ */
+export declare function ImageComponent({ nodeKey, src, altText, caption, linkType, width, height }: ImageComponentProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ImageComponent.d.ts.map

package/dist/image/ImageComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageComponent.d.ts","sourceRoot":"","sources":["../../src/image/ImageComponent.tsx"],"names":[],"mappings":"AAKA,OAAO,EASL,KAAK,OAAO,EACb,MAAM,SAAS,CAAC;AAOjB,OAAO,KAAK,EAAE,aAAa,EAAa,MAAM,aAAa,CAAC;AAU5D,UAAU,mBAAmB;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,aAAa,CAAC;IACxB,yFAAyF;IACzF,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,mBAAmB,+BA4P9G"}

package/dist/image/ImageComponent.js

@@ -0,0 +1,171 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Menu } from '@mantine/core';
+import { IconCrop, IconPhotoDown, IconPhotoEdit, IconTextCaption, IconTrash, IconX } from '@tabler/icons-react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
+import { $getNodeByKey, $getSelection, $isNodeSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, } from 'lexical';
+import { ImageCropDialog } from './ImageCropDialog.js';
+import { ImageDialog } from './ImageDialog.js';
+import { useImageOptions } from './ImageOptionsContext.js';
+import { useUiStrings } from '../i18n/useStrings.js';
+import { usePortalTarget } from '../PortalTargetContext.js';
+import { dataUrlBytes, fetchImageAsDataUrl } from './imageEdit.js';
+// A type-only import of ImageNode (ImageNode itself imports this file), so the
+// node is recognised by its type string rather than `instanceof`.
+function isImageNode(node) {
+    return node?.getType() === 'image';
+}
+const MIN_WIDTH = 32;
+/**
+ * An image in the document. Click selects it (Delete/Backspace removes it),
+ * drag the corner handle to resize an embedded image, double-click or
+ * right-click for the edit dialog and menu (edit image, convert a linked image
+ * to embedded, add/edit/remove caption, delete). The caption
+ * is shown as plain text under the image — it is edited in the dialog, not in
+ * place.
+ */
+export function ImageComponent({ nodeKey, src, altText, caption, linkType, width, height }) {
+    const [editor] = useLexicalComposerContext();
+    const options = useImageOptions();
+    const strings = useUiStrings();
+    const portalTarget = usePortalTarget();
+    const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
+    const imageRef = useRef(null);
+    const figureRef = useRef(null);
+    const [menu, setMenu] = useState(null);
+    const [dialog, setDialog] = useState(null);
+    const [cropDialogOpen, setCropDialogOpen] = useState(false);
+    const [liveWidth, setLiveWidth] = useState(null);
+    // Selecting must go through CLICK_COMMAND (returning true) rather than a
+    // React onClick: otherwise Lexical's own click handling turns the DOM
+    // selection into a range selection right after, undoing the node selection.
+    useEffect(() => {
+        return editor.registerCommand(CLICK_COMMAND, (event) => {
+            if (event.target !== imageRef.current)
+                return false;
+            clearSelection();
+            setSelected(true);
+            return true;
+        }, COMMAND_PRIORITY_LOW);
+    }, [editor, clearSelection, setSelected]);
+    const removeImage = useCallback(() => {
+        editor.update(() => {
+            $getNodeByKey(nodeKey)?.remove();
+        });
+    }, [editor, nodeKey]);
+    const onDelete = useCallback((event) => {
+        if (!isSelected || dialog || cropDialogOpen || menu)
+            return false;
+        if (!$isNodeSelection($getSelection()))
+            return false;
+        event.preventDefault();
+        $getNodeByKey(nodeKey)?.remove();
+        return true;
+    }, [isSelected, dialog, cropDialogOpen, menu, nodeKey]);
+    useEffect(() => {
+        const unregisterDelete = editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW);
+        const unregisterBackspace = editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW);
+        return () => {
+            unregisterDelete();
+            unregisterBackspace();
+        };
+    }, [editor, onDelete]);
+    const updateNode = (change) => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if (isImageNode(node))
+                change(node);
+        });
+    };
+    // Converting from the context menu (as opposed to the "Crop & size" tab's
+    // checkbox) needs no review: just download and swap the source in place.
+    // Only on failure do we fall back to the full dialog, which shows the error
+    // and lets the person retry or pick a different image.
+    const convertToEmbedded = useCallback(async () => {
+        try {
+            const dataUrl = await fetchImageAsDataUrl(src, options.fetchImage);
+            if (dataUrlBytes(dataUrl) > options.maxSizeMB * 1024 * 1024) {
+                throw new Error(strings.imageDialog.errors.largerThan(options.maxSizeMB));
+            }
+            updateNode((node) => node.setSource(dataUrl, 'embedded'));
+        }
+        catch {
+            setDialog({ intent: 'convert' });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [src, options.fetchImage, options.maxSizeMB]);
+    const applyEdit = (value) => {
+        updateNode((node) => {
+            node.setSource(value.src, value.linkType);
+            node.setAltText(value.altText);
+            node.setCaption(value.caption);
+            // A changed source has new pixels the current display size may no
+            // longer fit — reset to auto. Editing alt text/caption only keeps it.
+            if (value.sourceChanged)
+                node.setDimensions(null, null);
+        });
+        setDialog(null);
+        editor.focus();
+    };
+    const applyCrop = (value) => {
+        updateNode((node) => {
+            node.setSource(value.src, 'embedded');
+            node.setDimensions(value.width, value.height);
+        });
+        setCropDialogOpen(false);
+        editor.focus();
+    };
+    // --- drag-to-resize: bottom-right handle, aspect ratio kept ---------------
+    const resizeStart = useRef(null);
+    const onResizeDown = (event) => {
+        const img = imageRef.current;
+        if (!img)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        const box = img.getBoundingClientRect();
+        resizeStart.current = {
+            x: event.clientX,
+            width: box.width,
+            ratio: img.naturalHeight && img.naturalWidth ? img.naturalHeight / img.naturalWidth : box.height / box.width,
+            max: figureRef.current?.clientWidth ?? box.width,
+        };
+        setLiveWidth(box.width);
+    };
+    const onResizeMove = (event) => {
+        const start = resizeStart.current;
+        if (!start)
+            return;
+        setLiveWidth(Math.round(Math.min(Math.max(start.width + (event.clientX - start.x), MIN_WIDTH), start.max)));
+    };
+    const onResizeUp = () => {
+        const start = resizeStart.current;
+        resizeStart.current = null;
+        if (start && liveWidth !== null) {
+            const w = Math.round(liveWidth);
+            updateNode((node) => node.setDimensions(w, Math.round(w * start.ratio)));
+        }
+        setLiveWidth(null);
+    };
+    const shownWidth = liveWidth ?? width ?? undefined;
+    return (_jsxs("figure", { ref: figureRef, className: "likhari-image-figure", "data-selected": isSelected ? 'true' : 'false', contentEditable: false, onDoubleClick: (e) => {
+            if (e.target === imageRef.current)
+                setDialog({});
+        }, onContextMenu: (e) => {
+            e.preventDefault();
+            clearSelection();
+            setSelected(true);
+            setMenu({ x: e.clientX, y: e.clientY });
+        }, children: [_jsxs("span", { className: "likhari-image-wrap", children: [_jsx("img", { ref: imageRef, className: "likhari-image", src: src, alt: altText, width: shownWidth, draggable: false }), isSelected && linkType === 'embedded' && (_jsx("span", { className: "likhari-image-resize-handle", role: "separator", "aria-label": strings.imageMenu.resizeImage, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onPointerCancel: onResizeUp }))] }), caption && _jsx("figcaption", { className: "likhari-image-caption", children: caption }), _jsxs(Menu, { opened: menu !== null, onChange: (opened) => {
+                    if (!opened)
+                        setMenu(null);
+                }, position: "bottom-start", withinPortal: true, portalProps: { target: portalTarget }, shadow: "sm", width: 200, children: [_jsx(Menu.Target, { children: _jsx("span", { "aria-hidden": "true", style: { position: 'fixed', left: menu?.x ?? -9999, top: menu?.y ?? -9999, width: 1, height: 1, pointerEvents: 'none' } }) }), _jsxs(Menu.Dropdown, { children: [_jsx(Menu.Item, { leftSection: _jsx(IconPhotoEdit, { size: 16, stroke: 1.75 }), onClick: () => setDialog({}), children: strings.imageMenu.editImage }), linkType === 'linked' && options.allowEmbedded && (_jsx(Menu.Item, { leftSection: _jsx(IconPhotoDown, { size: 16, stroke: 1.75 }), onClick: () => void convertToEmbedded(), children: strings.imageMenu.convertToEmbedded })), linkType === 'embedded' && (_jsx(Menu.Item, { leftSection: _jsx(IconCrop, { size: 16, stroke: 1.75 }), onClick: () => setCropDialogOpen(true), children: strings.imageMenu.cropResize })), options.allowCaption && (_jsx(Menu.Item, { leftSection: _jsx(IconTextCaption, { size: 16, stroke: 1.75 }), onClick: () => setDialog({ intent: 'caption' }), children: caption ? strings.imageMenu.editCaption : strings.imageMenu.addCaption })), options.allowCaption && caption && (_jsx(Menu.Item, { leftSection: _jsx(IconX, { size: 16, stroke: 1.75 }), onClick: () => updateNode((node) => node.setCaption(null)), children: strings.imageMenu.removeCaption })), _jsx(Menu.Divider, {}), _jsx(Menu.Item, { color: "red", leftSection: _jsx(IconTrash, { size: 16, stroke: 1.75 }), onClick: removeImage, children: strings.imageMenu.deleteImage })] })] }), _jsx(ImageDialog, { mode: "edit", opened: dialog !== null, initial: { src, altText, caption, linkType }, intent: dialog?.intent, onSubmit: applyEdit, onClose: () => {
+                    setDialog(null);
+                    editor.focus();
+                } }), linkType === 'embedded' && (_jsx(ImageCropDialog, { opened: cropDialogOpen, initial: { src, width, height }, onSubmit: applyCrop, onClose: () => {
+                    setCropDialogOpen(false);
+                    editor.focus();
+                } }))] }));
+}