@blocklet/editor 2.3.106 → 2.4.0

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

@@ -5,9 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { ExcalidrawElement, NonDeleted } from '@excalidraw/excalidraw/types/element/types';
-import { AppState, BinaryFiles } from '@excalidraw/excalidraw/types/types';
+import type { ExcalidrawElement, NonDeleted } from '@excalidraw/excalidraw/dist/types/excalidraw/element/types';
+import type { AppState, BinaryFiles } from '@excalidraw/excalidraw/dist/types/excalidraw/types';
 import * as React from 'react';
+import { type JSX } from 'react';
 type ImageType = 'svg' | 'canvas';
 type Props = {
     /**

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

@@ -1,5 +1,6 @@
-import { AppState, BinaryFiles, LibraryItems } from '@excalidraw/excalidraw/types/types';
 import { ReactPortal } from 'react';
+import type { AppState, BinaryFiles, LibraryItems } from '@excalidraw/excalidraw/dist/types/excalidraw/types';
+import '@excalidraw/excalidraw/index.css';
 export type ExcalidrawElementFragment = {
     isDeleted?: boolean;
 };

package/lib/main/nodes/ExcalidrawNode/ExcalidrawModal.js

@@ -10,6 +10,7 @@ import { Excalidraw, useHandleLibrary, serializeLibraryAsJSON } from '@excalidra
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import LoadingButton from '@mui/lab/LoadingButton';
+import '@excalidraw/excalidraw/index.css';
 import Button from '../../ui/Button';
 import Modal from '../../ui/Modal';
 import { uploadImageToMediaKit } from './utils';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -9,6 +8,7 @@
 import './ExcalidrawModal.css';
 import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
 import { DecoratorNode } from 'lexical';
+import { type JSX } from 'react';
 export type SerializedExcalidrawNode = Spread<{
     data: string;
 }, SerializedLexicalNode>;

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

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-/// <reference types="react" />
 import type { EditorConfig, ElementFormatType, LexicalEditor, LexicalNode, NodeKey, Spread } from 'lexical';
 import { DecoratorBlockNode, SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
+import type { JSX } from 'react';
 export type SerializedFigmaNode = Spread<{
     documentID: string;
     type: 'figma';

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

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-/// <reference types="react" />
 import { LexicalEditor, NodeKey } from 'lexical';
+import { type JSX } from 'react';
 import './ImageNode.css';
 import type { ImageSizeMode } from '../../types';
 export default function ImageComponent({ file, src, altText, nodeKey, width, height, maxWidth, resizable, showCaption, caption, captionsEnabled, markerState, frame, sizeMode, }: {

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

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-/// <reference types="react" />
 import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedEditor, SerializedLexicalNode, Spread } from 'lexical';
 import { DecoratorNode } from 'lexical';
+import { type JSX } from 'react';
 import type { ImageSizeMode } from '../../types';
 export interface ImagePayload {
     file?: File;

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

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

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

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-/// <reference types="react" />
 import { LexicalEditor, NodeKey } from 'lexical';
+import { type JSX } from 'react';
 import './StickyNode.css';
 export default function StickyComponent({ x, y, nodeKey, color, caption, }: {
     caption: LexicalEditor;

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

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-/// <reference types="react" />
 import type { EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
 import { DecoratorNode } from 'lexical';
+import { type JSX } from 'react';
 type StickyNoteColor = 'pink' | 'yellow';
 export type SerializedStickyNode = Spread<{
     xOffset: number;

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

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-/// <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 type SerializedTweetNode = Spread<{
     id: string;
     type: 'tweet';

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

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-/// <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 type SerializedYouTubeNode = Spread<{
     videoID: string;
     type: 'youtube';

package/lib/main/plugins/AutoEmbedPlugin/index.d.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-/// <reference types="react" />
 import { EmbedConfig } from '@lexical/react/LexicalAutoEmbedPlugin';
+import { type JSX } from 'react';
 export interface PlaygroundEmbedConfig extends EmbedConfig {
     contentName: string;
     icon?: JSX.Element;

package/lib/main/plugins/AutoLinkPlugin/index.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 LexicalAutoLinkPlugin(): JSX.Element;

package/lib/main/plugins/CodeHighlightPlugin/index.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 CodeHighlightPlugin(): JSX.Element | null;

package/lib/main/plugins/ComponentPickerPlugin/index.d.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-/// <reference types="react" />
 import { LexicalEditor } from 'lexical';
+import { type JSX } from 'react';
 export declare const INSERT_COMPONENT_COMMAND: import("lexical").LexicalCommand<unknown>;
 export default function ComponentPickerMenuPlugin(): JSX.Element;
 export declare const uploadFile: (editor: LexicalEditor) => void;

package/lib/main/plugins/DraggableBlockPlugin/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -7,6 +6,7 @@
  *
  */
 import './index.css';
+import { type JSX } from 'react';
 export default function DraggableBlockPlugin({ anchorElem, }: {
     anchorElem?: HTMLElement;
 }): JSX.Element;

package/lib/main/plugins/EmojisPlugin/index.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 EmojisPlugin(): JSX.Element | null;

package/lib/main/plugins/FigmaPlugin/index.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-/// <reference types="react" />
 import { LexicalCommand } from 'lexical';
+import { type JSX } from 'react';
 export declare const INSERT_FIGMA_COMMAND: LexicalCommand<string>;
 export default function FigmaPlugin(): JSX.Element | null;

package/lib/main/plugins/FloatingLinkEditorPlugin/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -7,6 +6,7 @@
  *
  */
 import './index.css';
+import { type JSX } from 'react';
 export default function FloatingLinkEditorPlugin({ anchorElem, }: {
     anchorElem?: HTMLElement;
 }): JSX.Element | null;

package/lib/main/plugins/FloatingTextFormatToolbarPlugin/ColorPickerButton.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { LexicalEditor } from 'lexical';
+import { type JSX } from 'react';
 export default function ColorPickerButton({ editor }: {
     editor: LexicalEditor;
 }): JSX.Element;

package/lib/main/plugins/FloatingTextFormatToolbarPlugin/index.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-/// <reference types="react" />
+import { type JSX } from 'react';
 import './index.css';
 export default function FloatingTextFormatToolbarPlugin({ anchorElem, }: {
     anchorElem?: HTMLElement;

package/lib/main/plugins/ImagesPlugin/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { LexicalCommand } from 'lexical';
+import { type JSX } from 'react';
 import { ImagePayload } from '../../nodes/ImageNode';
 export type InsertImagePayload = Readonly<ImagePayload>;
 export declare const INSERT_IMAGE_COMMAND: LexicalCommand<InsertImagePayload>;

package/lib/main/plugins/KeywordsPlugin/index.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 KeywordsPlugin(): JSX.Element | null;

package/lib/main/plugins/LexicalTypeaheadMenuPlugin/index.d.ts

@@ -6,7 +6,7 @@
  *
  */
 import { LexicalCommand, LexicalEditor, NodeKey, TextNode } from 'lexical';
-import { MutableRefObject, ReactPortal } from 'react';
+import { MutableRefObject, ReactPortal, type JSX } from 'react';
 export type QueryMatch = {
     leadOffset: number;
     matchingString: string;

package/lib/main/plugins/MarkdownShortcutPlugin/index.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 MarkdownShortcutPlugin(): JSX.Element;

package/lib/main/plugins/MentionsPlugin/HighlightStyle.d.ts

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

package/lib/main/plugins/MentionsPlugin/index.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 NewMentionsPlugin(): JSX.Element | null;

package/lib/main/plugins/PasteLogPlugin/index.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 PasteLogPlugin(): JSX.Element;

package/lib/main/plugins/StickyPlugin/index.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 StickyPlugin(): JSX.Element | null;

package/lib/main/plugins/TestRecorderPlugin/index.d.ts

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

package/lib/main/plugins/TreeViewPlugin/index.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 TreeViewPlugin(): JSX.Element;

package/lib/main/plugins/TwitterPlugin/index.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-/// <reference types="react" />
 import { LexicalCommand } from 'lexical';
+import { type JSX } from 'react';
 export declare const INSERT_TWEET_COMMAND: LexicalCommand<string>;
 export default function TwitterPlugin(): JSX.Element | null;

package/lib/main/plugins/TypingPerfPlugin/index.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 TypingPerfPlugin(): JSX.Element | null;

package/lib/main/plugins/YouTubePlugin/index.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-/// <reference types="react" />
 import { LexicalCommand } from 'lexical';
+import { type JSX } from 'react';
 export declare const INSERT_YOUTUBE_COMMAND: LexicalCommand<string>;
 export default function YouTubePlugin(): JSX.Element | null;

package/lib/main/styled-editor-content.d.ts

@@ -1,3 +1,5 @@
 /// <reference types="react" />
 import { BoxProps } from '@mui/material';
-export declare const StyledEditorContent: import("react").ForwardRefExoticComponent<Omit<BoxProps<"div", {}>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function StyledEditorContent({ ref, children, ...rest }: BoxProps & {
+    ref?: React.RefObject<HTMLDivElement | null>;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/main/styled-editor-content.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, alpha, styled, GlobalStyles, useTheme } from '@mui/material';
-import { forwardRef } from 'react';
 const StyledEditorWrapper = styled(Box) `
   position: relative;
   color: ${({ theme }) => alpha(theme.palette.text.primary, 0.8)};
@@ -55,9 +54,9 @@ const StyledEditorWrapper = styled(Box) `
     background-color: ${({ theme }) => theme.palette.grey[100]} !important;
   }
 `;
-export const StyledEditorContent = forwardRef(({ children, ...rest }, ref) => {
+export function StyledEditorContent({ ref = undefined, children, ...rest }) {
     return (_jsxs(StyledEditorWrapper, { ref: ref, ...rest, children: [_jsx(EditorGlobalStyle, {}), children] }));
-});
+}
 function EditorGlobalStyle() {
     const theme = useTheme();
     return (_jsx(GlobalStyles, { styles: {

package/lib/main/ui/Button.d.ts

@@ -6,7 +6,7 @@
  *
  */
 import './Button.css';
-import { ReactNode } from 'react';
+import { ReactNode, type JSX } from 'react';
 export default function Button({ 'data-test-id': dataTestId, children, className, onClick, disabled, small, title, }: {
     'data-test-id'?: string;
     children: ReactNode;

package/lib/main/ui/ColorPicker.d.ts

@@ -6,7 +6,7 @@
  *
  */
 import './ColorPicker.css';
-import { ReactNode } from 'react';
+import { ReactNode, type JSX } from 'react';
 interface ColorPickerProps {
     disabled?: boolean;
     buttonAriaLabel?: string;

package/lib/main/ui/Dialog.d.ts

@@ -6,7 +6,7 @@
  *
  */
 import './Dialog.css';
-import { ReactNode } from 'react';
+import { ReactNode, type JSX } from 'react';
 type Props = Readonly<{
     'data-test-id'?: string;
     children: ReactNode;

package/lib/main/ui/DropDown.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 * as React from 'react';
 export declare function DropDownItem({ children, className, onClick, title, }: {
     children: React.ReactNode;

package/lib/main/ui/FileInput.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-/// <reference types="react" />
+import type { JSX } from 'react';
 import './Input.css';
 type Props = Readonly<{
     'data-test-id'?: string;

package/lib/main/ui/FileInput.js

@@ -1,11 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
 import './Input.css';
 export default function FileInput({ accept, label, onChange, 'data-test-id': dataTestId }) {
     return (_jsxs("div", { className: "Input__wrapper", children: [_jsx("label", { className: "Input__label", children: label }), _jsx("input", { type: "file", accept: accept, className: "Input__input", onChange: (e) => onChange(e.target.files), "data-test-id": dataTestId })] }));

package/lib/main/ui/FrameMockup/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type BoxProps } from '@mui/material';
 export declare const deviceFrames: readonly [{
     readonly id: "iphone-x";
@@ -110,5 +109,5 @@ export declare const frames: ({
 interface FrameMockupProps {
     type: string;
 }
-export declare const FrameMockup: React.FC<FrameMockupProps & BoxProps>;
+export declare function FrameMockup({ ref, type, sx, children, ...rest }: FrameMockupProps & BoxProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/main/ui/FrameMockup/index.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Screenshot from '@arcblock/ux/lib/Screenshot';
-import { forwardRef } from 'react';
 import { Box } from '@mui/material';
 import { isBrowserType, BrowserMockup, browsers } from './browser';
 export const deviceFrames = [
@@ -27,7 +26,7 @@ export const shadowFrames = [
 export const isShadowFrame = (id) => shadowFrames.some((frame) => frame.id === id);
 export const frames = [...deviceFrames, ...browsers, ...shadowFrames];
 // @ts-ignore
-export const FrameMockup = forwardRef(function FrameMockup({ type, sx, children, ...rest }, ref) {
+export function FrameMockup({ ref = undefined, type, sx, children, ...rest }) {
     const mergedSx = [{}, ...(Array.isArray(sx) ? sx : [sx])];
     const renderInner = () => {
         if (isDeviceFrame(type)) {
@@ -59,4 +58,4 @@ export const FrameMockup = forwardRef(function FrameMockup({ type, sx, children,
         }
     };
     return (_jsx(Box, { ref: ref, sx: mergedSx, ...rest, children: renderInner() }));
-});
+}

package/lib/main/ui/ImageResizer.d.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-/// <reference types="react" />
 import type { LexicalEditor } from 'lexical';
+import { type JSX } from 'react';
 export default function ImageResizer({ onResizeStart, onResizeEnd, buttonRef, imageRef, maxWidth, editor, showCaption, setShowCaption, captionsEnabled, }: {
     editor: LexicalEditor;
     buttonRef: {

package/lib/main/ui/Modal.d.ts

@@ -6,7 +6,7 @@
  *
  */
 import './Modal.css';
-import { ReactNode } from 'react';
+import { ReactNode, type JSX } from 'react';
 export default function Modal({ onClose, children, title, closeOnClickOutside, }: {
     children: ReactNode;
     closeOnClickOutside?: boolean;

package/lib/main/ui/Placeholder.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export interface PlaceholderProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
 }
-declare const _default: React.ForwardRefExoticComponent<Omit<PlaceholderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+export default function Placeholder({ ref, ...props }: PlaceholderProps & {
+    ref?: React.RefObject<HTMLDivElement | null>;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/main/ui/Placeholder.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from '@emotion/styled';
-import { forwardRef } from 'react';
-export default forwardRef(function Placeholder(props, ref) {
+export default function Placeholder({ ref = undefined, ...props }) {
     return _jsx(PlaceholderRoot, { ...props, ref: ref });
-});
+}
 const PlaceholderRoot = styled.div `
   font-size: 15px;
   color: #999;

package/lib/main/ui/Switch.d.ts

@@ -6,6 +6,7 @@
  *
  */
 import * as React from 'react';
+import { type JSX } from 'react';
 export default function Switch({ checked, onClick, text, id, }: Readonly<{
     checked: boolean;
     id?: string;

package/lib/stories/Dialog.js

@@ -33,6 +33,9 @@ const DialogEditor = () => {
     const handleClose = () => {
         setOpen(false);
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: onOpen, children: "Embed the editor in the dialog" }), _jsxs(Dialog, { maxWidth: "md", open: open, onClose: handleClose, children: [_jsx(DialogTitle, { children: "Embed the editor in the dialog" }), _jsx(Box, { width: 800, height: 400, children: _jsx(BlockletEditor, { editorState: JSON.stringify(data) }) }), _jsx(DialogActions, { children: _jsx(Button, { onClick: handleClose, children: "Close" }) })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: onOpen, children: "Embed the editor in the dialog" }), _jsxs(Dialog, { maxWidth: "md", open: open, onClose: handleClose, children: [_jsx(DialogTitle, { children: "Embed the editor in the dialog" }), _jsx(Box, { sx: {
+                            width: 800,
+                            height: 400,
+                        }, children: _jsx(BlockletEditor, { editorState: JSON.stringify(data) }) }), _jsx(DialogActions, { children: _jsx(Button, { onClick: handleClose, children: "Close" }) })] })] }));
 };
 export default DialogEditor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.3.106",
+  "version": "2.4.0",
   "main": "lib/index.js",
   "publishConfig": {
     "access": "public"
@@ -27,9 +27,9 @@
     "@blocklet/code-editor": "^0.4.274",
     "@blocklet/embed": "^0.2.5",
     "@blocklet/js-sdk": "^1.16.44",
-    "@blocklet/pages-kit": "^0.5.50",
-    "@blocklet/pages-kit-runtime": "^0.5.50",
-    "@excalidraw/excalidraw": "^0.14.2",
+    "@blocklet/pages-kit": "^0.5.52",
+    "@blocklet/pages-kit-runtime": "^0.5.52",
+    "@excalidraw/excalidraw": "^0.18.0",
     "@iconify/iconify": "^3.1.1",
     "@iconify/icons-tabler": "^1.2.95",
     "@lexical/clipboard": "^0.30.0",
@@ -68,19 +68,19 @@
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
-    "@blocklet/pdf": "^2.3.106"
+    "@blocklet/pdf": "^2.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@emotion/css": "^11.13.0",
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
-    "@mui/material": "^5.16.7",
+    "@emotion/css": "^11.13.5",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/material": "^7.1.2",
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-essentials": "^6.5.16",
     "@storybook/addon-interactions": "^6.5.16",
     "@storybook/addon-links": "^6.5.16",
-    "@storybook/builder-vite": "^8.3.5",
+    "@storybook/builder-vite": "^9.0.13",
     "@storybook/react": "^6.5.16",
     "@storybook/testing-library": "^0.0.13",
     "@types/katex": "^0.14.0",
@@ -88,23 +88,23 @@
     "@types/react": "^18.3.9",
     "@types/react-dom": "^18.3.0",
     "@types/url-join": "^4.0.3",
-    "@vitejs/plugin-react": "^4.3.2",
+    "@vitejs/plugin-react": "^4.6.0",
     "babel-loader": "^8.4.1",
     "copyfiles": "^2.4.1",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
     "typescript": "^4.9.5",
-    "vite": "^5.4.9",
-    "vite-plugin-svgr": "^4.2.0"
+    "vite": "^7.0.0",
+    "vite-plugin-svgr": "^4.3.0"
   },
   "peerDependencies": {
-    "@arcblock/did-connect": "^2.10.36",
-    "@arcblock/ux": "^2.10.46",
-    "@emotion/css": "*",
-    "@emotion/react": "*",
-    "@emotion/styled": "*",
-    "@mui/material": "*",
-    "react": "*",
-    "react-dom": "*"
+    "@arcblock/did-connect": "^3.0.1",
+    "@arcblock/ux": "^3.0.1",
+    "@emotion/css": "^11.13.5",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/material": "^7.1.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   "scripts": {
     "dev": "npm run storybook",