@blocklet/editor 2.3.106 → 2.4.1

package/lib/components/createPortal.d.ts

@@ -1,2 +1,2 @@
-declare const createPortal: (portalElement: React.ReactElement, parentElement: HTMLElement) => React.ReactElement;
+declare const createPortal: (portalElement: React.ReactElement<any>, parentElement: HTMLElement) => React.ReactElement<any>;
 export default createPortal;

package/lib/ext/Aide/Delayed.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 interface Props {
-    children: React.ReactElement;
+    children: React.ReactElement<any>;
     delay: number;
 }
 export default function Delayed({ children, delay }: Props): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

package/lib/ext/Aide/Input.js

@@ -29,7 +29,9 @@ export default function Input({ prepend, ...rest }) {
                     justifyContent: 'center',
                     alighItems: 'center',
                     width: 36,
-                }, children: _jsx(Box, { component: "i", className: "iconify", "data-icon": "bi:stars", "data-height": "16px", sx: { color: 'grey.600' } }) }), prepend, status === 'activated' && (_jsxs(_Fragment, { children: [_jsx(Box, { component: "input", type: "text", value: input, onChange: (e) => setInput(e.target.value), onKeyDown: handleOnKeyDown, ref: (ref) => ref && ref.focus({ preventScroll: true }), sx: {
+                }, children: _jsx(Box, { component: "i", className: "iconify", "data-icon": "bi:stars", "data-height": "16px", sx: { color: 'grey.600' } }) }), prepend, status === 'activated' && (_jsxs(_Fragment, { children: [_jsx(Box, { component: "input", type: "text", value: input, onChange: (e) => setInput(e.target.value), onKeyDown: handleOnKeyDown, ref: (ref) => {
+                            ref?.focus({ preventScroll: true });
+                        }, sx: {
                             flex: '1 1 auto',
                             height: '100%',
                             border: 0,

package/lib/ext/Aide/Templates.js

@@ -23,8 +23,12 @@ export default function Templates({ ...rest }) {
             overflowY: 'auto',
         }, ...rest, children: _jsx(MenuList, { children: filteredTemplates.map((template) => {
                 if (template.hasOptions()) {
-                    return (_jsxs(NestedMenuItem, { subMenu: _jsx(Card, { sx: { minWidth: 200, maxHeight: 240, overflowY: 'auto' }, children: _jsx(TemplateOptions, { template: template, onSelect: selectOption }) }), children: [_jsx(ListItemIcon, { children: _jsx(Box, { component: "i", className: "iconify", "data-icon": template.icon, "data-height": "16px" }) }), _jsx(ListItemText, { children: _jsx(Typography, { variant: "inherit", noWrap: true, lineHeight: 1.2, children: template.name }) })] }, template.id));
+                    return (_jsxs(NestedMenuItem, { subMenu: _jsx(Card, { sx: { minWidth: 200, maxHeight: 240, overflowY: 'auto' }, children: _jsx(TemplateOptions, { template: template, onSelect: selectOption }) }), children: [_jsx(ListItemIcon, { children: _jsx(Box, { component: "i", className: "iconify", "data-icon": template.icon, "data-height": "16px" }) }), _jsx(ListItemText, { children: _jsx(Typography, { variant: "inherit", noWrap: true, sx: {
+                                        lineHeight: 1.2,
+                                    }, children: template.name }) })] }, template.id));
                 }
-                return (_jsxs(MenuItem, { onClick: () => sendToAI(template), selected: activeBuiltinTemplate?.id === template.id, sx: { '&:hover .aide-templates-item': { display: 'inline-block' } }, children: [_jsx(ListItemIcon, { children: _jsx(Box, { component: "i", className: "iconify", "data-icon": template.icon, "data-height": "16px" }) }), _jsx(ListItemText, { children: _jsx(Typography, { variant: "inherit", noWrap: true, lineHeight: 1.2, children: template.name }) }), _jsx(Box, { component: "i", className: "iconify aide-templates-item", "data-icon": "fluent:arrow-enter-24-regular", "data-height": "14px", sx: { display: 'none', color: 'grey.500' } })] }, template.id));
+                return (_jsxs(MenuItem, { onClick: () => sendToAI(template), selected: activeBuiltinTemplate?.id === template.id, sx: { '&:hover .aide-templates-item': { display: 'inline-block' } }, children: [_jsx(ListItemIcon, { children: _jsx(Box, { component: "i", className: "iconify", "data-icon": template.icon, "data-height": "16px" }) }), _jsx(ListItemText, { children: _jsx(Typography, { variant: "inherit", noWrap: true, sx: {
+                                    lineHeight: 1.2,
+                                }, children: template.name }) }), _jsx(Box, { component: "i", className: "iconify aide-templates-item", "data-icon": "fluent:arrow-enter-24-regular", "data-height": "14px", sx: { display: 'none', color: 'grey.500' } })] }, template.id));
             }) }) }));
 }

package/lib/ext/Aide/external-templates/parameter-field.js

@@ -10,17 +10,21 @@ export default function ParameterField({ parameter, ...props }) {
     return _jsx(Field, { ...{ parameter }, ...props });
 }
 function StringParameterField({ parameter, onChange, ...props }) {
-    return (_jsx(TextField, { required: parameter.required, label: parameter.label, placeholder: parameter.placeholder, helperText: parameter.helper, multiline: parameter.multiline, minRows: parameter.multiline ? 2 : undefined, inputProps: { maxLength: parameter.maxLength }, onChange: (e) => onChange(e.target.value), ...props }));
+    return (_jsx(TextField, { required: parameter.required, label: parameter.label, placeholder: parameter.placeholder, helperText: parameter.helper, multiline: parameter.multiline, minRows: parameter.multiline ? 2 : undefined, onChange: (e) => onChange(e.target.value), ...props, slotProps: {
+            htmlInput: { maxLength: parameter.maxLength },
+        } }));
 }
 function NumberParameterField({ parameter, ...props }) {
     return (_jsx(NumberField, { required: parameter.required, label: parameter.label, placeholder: parameter.placeholder, helperText: parameter.helper, min: parameter.min, max: parameter.max, ...props }));
 }
 function SelectParameterField({ parameter, onChange, ...props }) {
-    return (_jsxs(TextField, { required: parameter.required, label: parameter.label, placeholder: parameter.placeholder, helperText: parameter.helper, select: true, SelectProps: {
-            MenuProps: { disablePortal: true },
-        }, 
+    return (_jsxs(TextField, { required: parameter.required, label: parameter.label, placeholder: parameter.placeholder, helperText: parameter.helper, select: true, 
         // SelectProps={{ MenuProps: { keepMounted: false, disablePortal: false } }}
-        onChange: (e) => onChange(e.target.value), ...props, children: [_jsx(MenuItem, { value: "", children: _jsx("em", { children: "None" }) }), (parameter.options ?? []).map((option) => (_jsx(MenuItem, { value: option.value, children: option.label }, option.id)))] }));
+        onChange: (e) => onChange(e.target.value), ...props, slotProps: {
+            select: {
+                MenuProps: { disablePortal: true },
+            },
+        }, children: [_jsx(MenuItem, { value: "", children: _jsx("em", { children: "None" }) }), (parameter.options ?? []).map((option) => (_jsx(MenuItem, { value: option.value, children: option.label }, option.id)))] }));
 }
 const languages = [
     { en: 'English', cn: '英语' },
@@ -75,12 +79,14 @@ function NumberField({ min, max, default: def, onChange, ...props }) {
         }
         return num;
     };
-    return (_jsx(TextField, { onChange: (e) => onChange?.(correctValue(e)), inputProps: {
-            type: 'number',
-            inputMode: 'numeric',
-            pattern: '[0-9]*',
-            min,
-            max,
-            ...props.inputProps,
-        }, ...props }));
+    return (_jsx(TextField, { onChange: (e) => onChange?.(correctValue(e)), ...props, slotProps: {
+            htmlInput: {
+                type: 'number',
+                inputMode: 'numeric',
+                pattern: '[0-9]*',
+                min,
+                max,
+                ...props.inputProps,
+            },
+        } }));
 }

package/lib/ext/Alert/AlertComponent.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import { AlertColor } from '@mui/material';
 import { RangeSelection } from 'lexical';
+import { type JSX } from 'react';
 type AlertComponentProps = {
     text: string;
     severity: AlertColor;

package/lib/ext/Alert/AlertComponent.js

@@ -7,7 +7,7 @@ export default function AlertComponent({ text, severity, onChange }) {
     const [editor] = useLexicalComposerContext();
     const [editing, setEditing] = useState(false);
     const [value, setValue] = useState(text);
-    const selectionRef = useRef();
+    const selectionRef = useRef(undefined);
     // 初始化时若 text 为空则自动进入 editing 状态
     useEffect(() => {
         if (!text) {

package/lib/ext/Alert/AlertNode.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
 import { type DOMConversionMap, type DOMExportOutput, type EditorConfig, type ElementFormatType, type LexicalEditor, type LexicalNode, type NodeKey, type Spread } from 'lexical';
 import { DecoratorBlockNode, SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
 import { AlertColor } from '@mui/material/Alert';
+import type { JSX } from 'react';
 export type SerializedAlertNode = Spread<{
     type: 'alert';
     text: string;

package/lib/ext/Alert/AlertPlugin.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { LexicalCommand, LexicalEditor } from 'lexical';
+import { type JSX } from 'react';
 import { AlertColor } from '@mui/material/Alert';
 type CommandPayload = {
     text: string;

package/lib/ext/BilibiliPlugin/BilibiliNode.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import type { DOMConversionMap, DOMExportOutput, EditorConfig, ElementFormatType, LexicalEditor, LexicalNode, NodeKey, Spread } from 'lexical';
 import { DecoratorBlockNode, SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
+import type { JSX } from 'react';
 export interface BilibiliVideoPayload {
     id: string;
     page: string | undefined;

package/lib/ext/BilibiliPlugin/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { LexicalCommand } from 'lexical';
+import { type JSX } from 'react';
 import { BilibiliVideoPayload } from './BilibiliNode';
 export declare const INSERT_BILIBILI_COMMAND: LexicalCommand<BilibiliVideoPayload>;
 export default function BilibiliPlugin(): JSX.Element | null;

package/lib/ext/BlockletEmbedPlugin/BlockletEmbed.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { type JSX } from 'react';
 declare function BlockletEmbed({ title, url, originalUrl }: {
     title: string;
     url: string;

package/lib/ext/BlockletEmbedPlugin/BlockletEmbedNode.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import type { DOMConversionMap, DOMExportOutput, EditorConfig, ElementFormatType, LexicalEditor, LexicalNode, NodeKey, Spread } from 'lexical';
 import { DecoratorBlockNode, SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
+import type { JSX } from 'react';
 export interface Embed {
     title: string;
     url: string;

package/lib/ext/BlockletEmbedPlugin/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { LexicalCommand } from 'lexical';
+import { type JSX } from 'react';
 import type { LexicalEditor } from 'lexical';
 import { AutoEmbedOption } from '@lexical/react/LexicalAutoEmbedPlugin';
 import { Embed } from './BlockletEmbedNode';

package/lib/ext/BookmarkPlugin/Bookmark.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { JSX } from 'react';
 import type { BookmarkInfo } from './BookmarkNode';
 export declare function Bookmark({ url, title, description, image, favicon, loading }: BookmarkInfo): JSX.Element;
 export declare function BookmarkLoader({ url, onLoaded }: {

package/lib/ext/BookmarkPlugin/BookmarkNode.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import type { DOMConversionMap, DOMExportOutput, EditorConfig, ElementFormatType, LexicalEditor, LexicalNode, NodeKey, Spread } from 'lexical';
 import { DecoratorBlockNode, SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
+import type { JSX } from 'react';
 export interface BookmarkInfo {
     url: string;
     title: string;

package/lib/ext/BookmarkPlugin/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { LexicalCommand, LexicalEditor } from 'lexical';
+import { type JSX } from 'react';
 import { AutoEmbedOption } from '@lexical/react/LexicalAutoEmbedPlugin';
 import { BookmarkInfo } from './BookmarkNode';
 import { EditorConfig } from '../../config';

package/lib/ext/CharacterLimitPlugin/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { SxProps } from '@mui/material';
+import { type JSX } from 'react';
 interface CharacterLimitPluginProps {
     maxLength?: number;
     charLimitIndicatorStyle?: SxProps;

package/lib/ext/FilePlugin/FileNode.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
+import { type JSX } from 'react';
 import { DecoratorNode } from 'lexical';
 export declare const getAbsoluteUrl: ({ fileUrl, name }: {
     fileUrl: string;

package/lib/ext/FilePlugin/FilePlugin.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { LexicalCommand } from 'lexical';
+import { type JSX } from 'react';
 import { FilePayload } from './FileNode';
 export type InsertFilePayload = Readonly<FilePayload>;
 export declare const INSERT_FILE_COMMAND: LexicalCommand<InsertFilePayload>;

package/lib/ext/InlineTranslationPlugin/InlineTranslationPlugin.js

@@ -7,7 +7,7 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { usePopper } from 'react-popper';
 import { createPortal } from 'react-dom';
 import { css, Global } from '@emotion/react';
-import blue from '@mui/material/colors/blue';
+import { blue } from '@mui/material/colors';
 import { useInlineTranslationStore, useStatus, useTargetLanguage } from './store';
 import { useEditorTranslator } from './EditorTranslator';
 import { NODE_TYPE } from './TranslationNode';
@@ -217,12 +217,16 @@ function TranslationElementPopper({ editorTranslator }) {
                             }, children: [_jsxs(Box, { children: [_jsx(Box, { sx: { color: 'text.secondary', fontWeight: 'medium' }, children: translations.original[locale] || translations.original.en }), _jsx(Box, { dangerouslySetInnerHTML: { __html: originalText } })] }), _jsxs(Box, { sx: { mt: 1.5 }, children: [_jsx(Box, { sx: { color: 'text.secondary', fontWeight: 'medium' }, children: translations.translation[locale] ||
                                                 translations.translation.en }), _jsx(Box, { dangerouslySetInnerHTML: {
                                                 __html: editorTranslator.getTranslationText(hoveringTranslationElement.dataset.sid) || '',
-                                            } })] })] }) })] })), _jsx(Box, { ref: setPopperElement, style: hoveringTranslationElementPopper.styles.popper, ...hoveringTranslationElementPopper.attributes.popper, sx: { zIndex: 'modal' }, onMouseLeave: reset, children: !originalText && (_jsx(Stack, { direction: "row", alignItems: hoveringTranslationElement.clientHeight > 100 ? 'center' : 'flex-start', sx: {
+                                            } })] })] }) })] })), _jsx(Box, { ref: setPopperElement, style: hoveringTranslationElementPopper.styles.popper, ...hoveringTranslationElementPopper.attributes.popper, sx: { zIndex: 'modal' }, onMouseLeave: reset, children: !originalText && (_jsx(Stack, { direction: "row", onClick: () => setOriginalText(originalText ? null : editorTranslator.getOriginalText(hoveringTranslationElement.dataset.sid) || ''), sx: {
+                        alignItems: hoveringTranslationElement.clientHeight > 100 ? 'center' : 'flex-start',
                         pr: 1,
                         pt: 0.5,
                         color: 'text.secondary',
                         fontSize: 12,
                         cursor: 'pointer',
                         height: hoveringTranslationElement.clientHeight,
-                    }, onClick: () => setOriginalText(originalText ? null : editorTranslator.getOriginalText(hoveringTranslationElement.dataset.sid) || ''), children: _jsxs(Stack, { direction: "row", alignItems: "center", gap: 0.25, children: [_jsx("i", { className: "iconify", "data-icon": "tabler:tooltip", "data-height": 16 }), translations.original[locale] || translations.original.en] }) })) })] }), document.body);
+                    }, children: _jsxs(Stack, { direction: "row", sx: {
+                            alignItems: 'center',
+                            gap: 0.25,
+                        }, children: [_jsx("i", { className: "iconify", "data-icon": "tabler:tooltip", "data-height": 16 }), translations.original[locale] || translations.original.en] }) })) })] }), document.body);
 }

package/lib/ext/InlineTranslationPlugin/store.d.ts

@@ -46,5 +46,5 @@ export declare const useStatus: (editor: LexicalEditor) => TranslateStatus | und
 export declare const useIsIdle: () => boolean;
 export declare const useIsTranslating: () => boolean;
 export declare const useIsTranslated: () => boolean;
-export declare const useTargetLanguage: () => string;
+export declare const useTargetLanguage: () => any;
 export {};

package/lib/ext/OnContentChangePlugin.js

@@ -11,7 +11,7 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
  */
 export function OnContentChangePlugin({ onChange, ignoreInitialChange = true, }) {
     const [editor] = useLexicalComposerContext();
-    const initialContentRef = useRef();
+    const initialContentRef = useRef(undefined);
     const changedRef = useRef(false);
     useLayoutEffect(() => {
         if (initialContentRef.current === undefined) {

package/lib/ext/PagesKitComponent/PagesKitComponentNode.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import type { DOMConversionMap, DOMExportOutput, EditorConfig, ElementFormatType, LexicalEditor, LexicalNode, NodeKey, Spread } from 'lexical';
 import { DecoratorBlockNode, SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
+import type { JSX } from 'react';
 import type { Properties } from './utils';
 export interface ComponentData {
     id: string;

package/lib/ext/PagesKitComponent/PagesKitComponentPlugin.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { LexicalCommand } from 'lexical';
+import { type JSX } from 'react';
 type CommandPayload = {
     id: string;
     name: string;

package/lib/ext/PasteMarkdownPlugin/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { type JSX } from 'react';
 export declare function isMarkdownText(text: string): boolean;
 /**
  *

package/lib/ext/PasteSlackImagePlugin/index.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
+import { type JSX } from 'react';
 export default function PasteSlackImagePlugin(): JSX.Element | null;

package/lib/ext/PdfPlugin/PdfNode.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
 import { DecoratorNode } from 'lexical';
+import { type JSX } from 'react';
 export declare const getAbsoluteUrl: (imageUrl: string) => any;
 export interface PdfPayload {
     key?: NodeKey;

package/lib/ext/PdfPlugin/PdfPlugin.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { LexicalCommand } from 'lexical';
+import { type JSX } from 'react';
 import { PdfPayload } from './PdfNode';
 export type InsertPdfPayload = Readonly<PdfPayload>;
 export declare const INSERT_PDF_COMMAND: LexicalCommand<InsertPdfPayload>;

package/lib/ext/PostLinkEmbedPlugin/PostLinkNode.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
 import { DecoratorNode } from 'lexical';
+import { type JSX } from 'react';
 export interface PostInfo {
     id: string;
     title: string;

package/lib/ext/PostLinkEmbedPlugin/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { LexicalCommand, LexicalEditor } from 'lexical';
+import { type JSX } from 'react';
 import { AutoEmbedOption } from '@lexical/react/LexicalAutoEmbedPlugin';
 import { EditorConfig } from '../../config';
 type PostType = 'post' | 'blog' | 'doc';

package/lib/ext/SafeAreaPlugin.js

@@ -13,7 +13,7 @@ const normalizeCssSize = (size) => {
  */
 export function SafeAreaPlugin({ size = '30vh' }) {
     const [editor] = useLexicalComposerContext();
-    const originalValue = useRef();
+    const originalValue = useRef(undefined);
     // TODO: editable true->false 时恢复原值
     // const restore = () => {
     //   const rootElement = editor.getRootElement();
@@ -35,7 +35,7 @@ export function SafeAreaPlugin({ size = '30vh' }) {
 }
 export function useSafeArea({ enabled, size = '30vh' }) {
     const [editor] = useLexicalComposerContext();
-    const originalValue = useRef();
+    const originalValue = useRef(undefined);
     useEffect(() => {
         const cleanup = editor.registerRootListener((rootElement, prevRootElement) => {
             if (rootElement !== null && editor.isEditable() && enabled) {

package/lib/ext/ShortcutPlugin/CtrlsShortcutPlugin.d.ts

@@ -2,5 +2,5 @@
 interface Props {
     callback: () => void;
 }
-export declare function CtrlsShortcutPlugin({ callback }: Props): React.ReactElement | null;
+export declare function CtrlsShortcutPlugin({ callback }: Props): React.ReactElement<any> | null;
 export default CtrlsShortcutPlugin;

package/lib/ext/SubpageListingPlugin/SubpageListingComponent.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { type JSX } from 'react';
 import { Mode } from './types';
 type SubpageListingComponentProps = {
     docPostId: string;

package/lib/ext/SubpageListingPlugin/SubpageListingNode.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import { type DOMConversionMap, type DOMExportOutput, type EditorConfig, type ElementFormatType, type LexicalEditor, type LexicalNode, type NodeKey, type Spread } from 'lexical';
 import { DecoratorBlockNode, SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
+import type { JSX } from 'react';
 import { Mode } from './types';
 interface Data {
     docPostId: string;

package/lib/ext/SubpageListingPlugin/SubpageListingPlugin.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { LexicalCommand, LexicalEditor } from 'lexical';
+import { type JSX } from 'react';
 import { Mode } from './types';
 type CommandPayload = {
     mode?: Mode;

package/lib/ext/TemplatePlugin.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { type JSX } from 'react';
 export declare const INSERT_TEMPLATE_COMMAND: import("lexical").LexicalCommand<unknown>;
 export declare function TemplatePlugin(): JSX.Element | null;
 export declare function TemplateSelect({ onSelect, onHover, templateList, }: {

package/lib/ext/TemplatePlugin.js

@@ -155,13 +155,16 @@ export function TemplateSelect({ onSelect, onHover, templateList = [], }) {
                 if (template.options) {
                     return (_jsxs(NestedMenuItem, { subMenu: _jsx(Card, { sx: { minWidth: 200, maxHeight: 240, overflowY: 'auto' }, children: _jsx(MenuList, { children: template.options.map((option) => {
                                     return (_jsx(MenuItem, { onClick: () => onSelect?.(option), onMouseEnter: () => onHover?.(option), children: option.title }, option.title));
-                                }) }) }), children: [_jsx(ListItemIcon, { sx: { mr: 0.75 }, children: _jsx(BlockletLogo, { did: template.did }) }), _jsx(ListItemText, { children: _jsx(Typography, { variant: "inherit", noWrap: true, lineHeight: 1, children: template.title }) })] }, template.title));
+                                }) }) }), children: [_jsx(ListItemIcon, { sx: { mr: 0.75 }, children: _jsx(BlockletLogo, { did: template.did }) }), _jsx(ListItemText, { children: _jsx(Typography, { variant: "inherit", noWrap: true, sx: {
+                                        lineHeight: 1,
+                                    }, children: template.title }) })] }, template.title));
                 }
                 // not any options
                 return null;
             }) })) : (_jsxs(MenuItem, { children: [_jsx(ListItemIcon, { sx: { mr: 0.75 }, children: _jsx(Box, { component: "i", className: "iconify", "data-icon": "material-symbols:info-outline", "data-height": "24px", "data-width": "24px" }) }), _jsx(ListItemText, { sx: {
                         whiteSpace: 'pre-wrap',
-                    }, children: _jsx(Typography, { variant: "inherit", lineHeight: 1.4, sx: {
+                    }, children: _jsx(Typography, { variant: "inherit", sx: {
+                            lineHeight: 1.4,
                             whiteSpace: 'pre-wrap',
                         }, children: "There is no templates available, please contact the owner or admin to import it" }) })] })) }));
 }

package/lib/ext/VideoPlugin/VideoNode.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
 import { DecoratorNode } from 'lexical';
+import { type JSX } from 'react';
 export interface VideoPayload {
     key?: NodeKey;
     src: string;

package/lib/ext/VideoPlugin/VideoPlugin.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { LexicalCommand } from 'lexical';
+import { type JSX } from 'react';
 import { VideoPayload } from './VideoNode';
 export type InsertVideoPayload = Readonly<VideoPayload>;
 export declare const INSERT_VIDEO_COMMAND: LexicalCommand<InsertVideoPayload>;

package/lib/ext/common.d.ts

@@ -4,7 +4,9 @@ type Props = {
     children: React.ReactNode;
     sx?: SxProps;
 } & BoxProps;
-export declare const Card: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Card({ ref, children, sx, ...rest }: Props & {
+    ref?: React.RefObject<HTMLDivElement | null>;
+}): import("react/jsx-runtime").JSX.Element;
 export declare const MenuWrapper: React.FC<BoxProps>;
 export declare const GradientButton: React.FC<ButtonProps>;
 export declare function NestedMenuItem({ children, subMenu, ...rest }: MenuItemProps & {

package/lib/ext/common.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Button, MenuItem, styled } from '@mui/material';
-import { forwardRef, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { usePopper } from 'react-popper';
-export const Card = forwardRef(({ children, sx, ...rest }, ref) => {
+export function Card({ ref = undefined, children, sx, ...rest }) {
     const mergedSx = [
         {
             maxWidth: '100%',
@@ -16,7 +16,7 @@ export const Card = forwardRef(({ children, sx, ...rest }, ref) => {
         ...(Array.isArray(sx) ? sx : [sx]),
     ];
     return (_jsx(Box, { ref: ref, sx: mergedSx, ...rest, children: children }));
-});
+}
 export const MenuWrapper = styled(Box) `
   .MuiMenuItem-root {
     min-height: 32px;

package/lib/ext/nodes/GithubNode.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
 import { DecoratorNode } from 'lexical';
+import { type JSX } from 'react';
 import { GithubInfoType } from './util';
 export type SerializedGithubNode = Spread<{
     title: string;

package/lib/main/Settings.d.ts

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-/// <reference types="react" />
+import { type JSX } from 'react';
 export default function Settings(): JSX.Element;

package/lib/main/context/SettingsContext.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { ReactNode } from 'react';
+import { ReactNode, type JSX } from 'react';
 import type { SettingName } from '../appSettings';
 type SettingsContextShape = {
     setOption: (name: SettingName, value: boolean) => void;

package/lib/main/context/SharedAutocompleteContext.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { ReactNode } from 'react';
+import { ReactNode, type JSX } from 'react';
 type Suggestion = null | string;
 type PublishFn = (newSuggestion: Suggestion) => void;
 type HookShape = [suggestion: Suggestion, setSuggestion: PublishFn];

package/lib/main/context/SharedHistoryContext.d.ts

@@ -6,7 +6,7 @@
  *
  */
 import type { HistoryState } from '@lexical/react/LexicalHistoryPlugin';
-import { ReactNode } from 'react';
+import { ReactNode, type JSX } from 'react';
 type ContextShape = {
     historyState?: HistoryState;
 };

package/lib/main/editor.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { MutableRefObject, ReactNode } from 'react';
+import { MutableRefObject, ReactNode, type JSX } from 'react';
 import { EditorState, LexicalEditor } from 'lexical';
 export interface EditorProps {
     children?: ReactNode;

package/lib/main/hooks/medium-zoom.d.ts

@@ -2,7 +2,7 @@ import 'medium-zoom/dist/style.css';
 interface MediumZoomOption {
     enabled?: boolean;
 }
-export declare const useMediumZoom: (imageRef: React.RefObject<HTMLImageElement>, options?: MediumZoomOption) => {
+export declare const useMediumZoom: (imageRef: React.RefObject<HTMLImageElement | null>, options?: MediumZoomOption) => {
     zoomOpened: boolean;
     openedImageRef: import("react").MutableRefObject<HTMLImageElement | null>;
 };

package/lib/main/hooks/useHasNodes.js

@@ -2,5 +2,7 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import { useCallback } from 'react';
 export default function useHasNodes() {
     const [editor] = useLexicalComposerContext();
-    return useCallback((...types) => editor.hasNodes(types.map((type) => ({ getType: () => type }))), [editor]);
+    return useCallback((...types) => editor.hasNodes(types.map((type) => ({
+        getType: () => type,
+    }))), [editor]);
 }

package/lib/main/hooks/useModal.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-/// <reference types="react" />
+import { type JSX } from 'react';
 export default function useModal(): [
     JSX.Element | null,
     (title: string, showModal: (onClose: () => void) => JSX.Element) => void

package/lib/main/index.d.ts

@@ -6,7 +6,7 @@
  *
  */
 import { EditorState, Klass, LexicalEditor, LexicalNode } from 'lexical';
-import React, { MutableRefObject, ReactNode } from 'react';
+import React, { MutableRefObject, ReactNode, type JSX } from 'react';
 export interface BlockletEditorProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'placeholder' | 'onChange'> {
     placeholder?: ReactNode;
     editable?: boolean;

package/lib/main/markdown-editor/editor.d.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject, ReactNode } from 'react';
+import { MutableRefObject, ReactNode, type JSX } from 'react';
 import { LexicalEditor } from 'lexical';
 export interface EditorProps {
     children?: ReactNode;

package/lib/main/markdown-editor/index.d.ts

@@ -1,5 +1,5 @@
 import { LexicalEditor } from 'lexical';
-import React, { MutableRefObject, ReactNode } from 'react';
+import React, { MutableRefObject, ReactNode, type JSX } from 'react';
 export interface MarkdownEditorProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'placeholder' | 'onChange'> {
     placeholder?: ReactNode;
     editable?: boolean;

package/lib/main/nodes/EquationNode.d.ts

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-/// <reference types="react" />
 import type { EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
 import { DecoratorNode } from 'lexical';
+import { type JSX } from 'react';
 export type SerializedEquationNode = Spread<{
     type: 'equation';
     equation: string;

package/lib/main/nodes/ExcalidrawNode/ExcalidrawComponent.d.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-/// <reference types="react" />
 import type { NodeKey } from 'lexical';
+import { type JSX } from 'react';
 export default function ExcalidrawComponent({ nodeKey, data }: {
     data: string;
     nodeKey: NodeKey;