@blocklet/editor 2.0.144 → 2.0.145

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

@@ -17,7 +17,6 @@ export default function ExcalidrawComponent({ nodeKey, data }) {
     const captionButtonRef = useRef(null);
     const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
     const [isResizing, setIsResizing] = useState(false);
-    const [viewModeEnabled, setViewModeEnabled] = useState(false);
     const initialEditorEditable = useRef(editor.isEditable());
     // 兼容 excalidraw 旧版本数据 - 缺少 "elements" key, 并且是一个 array, 新版本数据是 object
     const parsed = useMemo(() => {
@@ -129,16 +128,14 @@ export default function ExcalidrawComponent({ nodeKey, data }) {
             }
         });
     };
-    const _appState = viewModeEnabled ? { ...appState, viewModeEnabled: true } : appState;
     const handleClick = () => {
         // view mode 仅在 readonly 的 editor 中有效
         if (!initialEditorEditable.current) {
-            setViewModeEnabled(true);
+            setModalOpen(true);
         }
     };
     const handleClose = () => {
         setModalOpen(false);
-        setViewModeEnabled(false);
     };
     const containerStyles = {
         ...(containerWidth && { width: containerWidth }),
@@ -149,7 +146,8 @@ export default function ExcalidrawComponent({ nodeKey, data }) {
     if (!containerWidth && editor.getRootElement()) {
         containerStyles.width = '90%';
     }
-    return (_jsxs(_Fragment, { children: [_jsx(ExcalidrawModal, { initialElements: elements, initialFiles: files, initialAppState: _appState, isShown: isModalOpen || viewModeEnabled, onDelete: deleteNode, onClose: handleClose, onSave: (els, aps, fls) => {
+    const _appState = !initialEditorEditable.current ? { ...appState, viewModeEnabled: true } : appState;
+    return (_jsxs(_Fragment, { children: [_jsx(ExcalidrawModal, { initialElements: elements, initialFiles: files, initialAppState: _appState, isShown: isModalOpen, readonly: !initialEditorEditable.current, onDelete: deleteNode, onClose: handleClose, onSave: (els, aps, fls) => {
                     editor.setEditable(true);
                     setData(els, aps, fls);
                     setModalOpen(false);

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

@@ -37,11 +37,12 @@ type Props = {
      * Callback when the save button is clicked
      */
     onSave: (elements: ReadonlyArray<ExcalidrawElementFragment>, appState: Partial<AppState>, files: BinaryFiles) => void;
+    readonly?: boolean;
 };
 /**
  * @explorer-desc
  * A component which renders a modal with Excalidraw (a painting app)
  * which can be used to export an editable image
  */
-export default function ExcalidrawModal({ closeOnClickOutside, onSave, initialElements, initialAppState, initialFiles, initialLibraryItems, isShown, onDelete, onClose, }: Props): ReactPortal | null;
+export default function ExcalidrawModal({ closeOnClickOutside, onSave, initialElements, initialAppState, initialFiles, initialLibraryItems, isShown, onDelete, onClose, readonly, }: Props): ReactPortal | null;
 export {};

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

@@ -12,7 +12,6 @@ import { createPortal } from 'react-dom';
 import LoadingButton from '@mui/lab/LoadingButton';
 import Button from '../../ui/Button';
 import Modal from '../../ui/Modal';
-import { useBeforeUnload } from '../../hooks/useBeforeUnload';
 import { uploadImageToMediaKit } from './utils';
 const safeParseJSON = (json) => {
     try {
@@ -28,7 +27,7 @@ const LIBRARY_KEY = 'excalidraw-library';
  * A component which renders a modal with Excalidraw (a painting app)
  * which can be used to export an editable image
  */
-export default function ExcalidrawModal({ closeOnClickOutside = false, onSave, initialElements, initialAppState, initialFiles, initialLibraryItems = safeParseJSON(localStorage.getItem(LIBRARY_KEY))?.libraryItems, isShown = false, onDelete, onClose, }) {
+export default function ExcalidrawModal({ closeOnClickOutside = false, onSave, initialElements, initialAppState, initialFiles, initialLibraryItems = safeParseJSON(localStorage.getItem(LIBRARY_KEY))?.libraryItems, isShown = false, onDelete, onClose, readonly, }) {
     const excaliDrawModelRef = useRef(null);
     const excaliDrawSceneRef = useRef(null);
     const [discardModalOpen, setDiscardModalOpen] = useState(false);
@@ -38,7 +37,9 @@ export default function ExcalidrawModal({ closeOnClickOutside = false, onSave, i
     const [saveText, setSaveText] = useState('Save');
     const [fullScreen, setFullScreen] = useState(false);
     const markBlockletDirtyState = () => {
-        window.dispatchEvent(new CustomEvent('blocklet:markDirty', { detail: { key: 'excalidraw' } }));
+        if (!readonly) {
+            window.dispatchEvent(new CustomEvent('blocklet:markDirty', { detail: { key: 'excalidraw' } }));
+        }
     };
     const resetBlockletDirtyState = () => {
         window.dispatchEvent(new CustomEvent('blocklet:resetDirty', { detail: { key: 'excalidraw' } }));
@@ -56,7 +57,6 @@ export default function ExcalidrawModal({ closeOnClickOutside = false, onSave, i
             return initialLibraryItems;
         },
     });
-    useBeforeUnload(isShown);
     useEffect(() => {
         let modalOverlayElement = null;
         const clickOutsideHandler = (event) => {
@@ -112,7 +112,6 @@ export default function ExcalidrawModal({ closeOnClickOutside = false, onSave, i
                         name: appState.name,
                         theme: appState.theme,
                         viewBackgroundColor: appState.viewBackgroundColor,
-                        viewModeEnabled: appState.viewModeEnabled,
                         zenModeEnabled: appState.zenModeEnabled,
                         zoom: appState.zoom,
                     }
@@ -154,7 +153,12 @@ export default function ExcalidrawModal({ closeOnClickOutside = false, onSave, i
             }, closeOnClickOutside: false, children: ["Are you sure you want to discard the changes?", _jsxs("div", { className: "ExcalidrawModal__discardModal", children: [_jsx(Button, { onClick: () => {
                                 resetBlockletDirtyState();
                                 setDiscardModalOpen(false);
-                                onClose();
+                                if (!initialElements?.length) {
+                                    onDelete();
+                                }
+                                else {
+                                    onClose();
+                                }
                             }, children: "Discard" }), ' ', _jsx(Button, { onClick: () => {
                                 setDiscardModalOpen(false);
                             }, children: "Cancel" })] })] }));
@@ -180,5 +184,5 @@ export default function ExcalidrawModal({ closeOnClickOutside = false, onSave, i
                             appState: initialAppState || { isLoading: false },
                             elements: initialElements,
                             files: initialFiles,
-                        } }), _jsxs("div", { className: "ExcalidrawModal__actions", children: [!fullScreen && (_jsx(LoadingButton, { className: "action-button", style: { width: 32, padding: 0, display: 'flex', alignItems: 'center' }, onClick: () => setFullScreen(true), children: _jsx("i", { className: "iconify", "data-icon": "material-symbols:fullscreen", "data-height": "18" }) })), fullScreen && (_jsx(LoadingButton, { className: "action-button", style: { width: 32, padding: 0, display: 'flex', alignItems: 'center' }, onClick: () => setFullScreen(false), children: _jsx("i", { className: "iconify", "data-icon": "material-symbols:fullscreen-exit", "data-height": "18" }) })), !initialAppState.viewModeEnabled && (_jsxs(_Fragment, { children: [_jsx(LoadingButton, { loadingPosition: "start", disabled: loading, className: "action-button", onClick: discard, children: "Discard" }), _jsx(LoadingButton, { loadingPosition: "start", loading: loading, className: "action-button", onClick: save, children: saveText })] })), initialAppState.viewModeEnabled && (_jsx(LoadingButton, { className: "action-button", onClick: () => onClose(), children: "Close" }))] })] }) }) }), document.body);
+                        } }), _jsxs("div", { className: "ExcalidrawModal__actions", children: [!fullScreen && (_jsx(LoadingButton, { className: "action-button", style: { width: 32, padding: 0, display: 'flex', alignItems: 'center' }, onClick: () => setFullScreen(true), children: _jsx("i", { className: "iconify", "data-icon": "material-symbols:fullscreen", "data-height": "18" }) })), fullScreen && (_jsx(LoadingButton, { className: "action-button", style: { width: 32, padding: 0, display: 'flex', alignItems: 'center' }, onClick: () => setFullScreen(false), children: _jsx("i", { className: "iconify", "data-icon": "material-symbols:fullscreen-exit", "data-height": "18" }) })), !readonly && (_jsxs(_Fragment, { children: [_jsx(LoadingButton, { loadingPosition: "start", disabled: loading, className: "action-button", onClick: discard, children: "Discard" }), _jsx(LoadingButton, { loadingPosition: "start", loading: loading, className: "action-button", onClick: save, children: saveText })] })), readonly && (_jsx(LoadingButton, { className: "action-button", onClick: () => onClose(), children: "Close" }))] })] }) }) }), document.body);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.0.144",
+  "version": "2.0.145",
   "main": "lib/index.js",
   "scripts": {
     "dev": "npm run storybook",
@@ -40,7 +40,7 @@
     "@arcblock/ux": "^2.10.23",
     "@blocklet/embed": "^0.2.0",
     "@blocklet/pages-kit": "^0.2.399",
-    "@blocklet/pdf": "2.0.144",
+    "@blocklet/pdf": "2.0.145",
     "@excalidraw/excalidraw": "^0.14.2",
     "@iconify/iconify": "^3.0.1",
     "@iconify/icons-tabler": "^1.2.95",
@@ -113,5 +113,5 @@
     "react": "*",
     "react-dom": "*"
   },
-  "gitHead": "1f707b0d6ccaddfc2c7d57979af1514c77ec2d7a"
+  "gitHead": "eeac7ba668f239de905f6b1cf8c132f910d15e45"
 }