@blocklet/editor 2.4.40 → 2.4.41

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

@@ -7,6 +7,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  */
 import { exportToSvg } from '@excalidraw/excalidraw';
+import { useTheme } from '@mui/material';
 import { useEffect, useState } from 'react';
 // exportToSvg has fonts from excalidraw.com
 // We don't want them to be used in open source
@@ -30,10 +31,18 @@ const removeStyleFromSvg_HACK = (svg) => {
  */
 export default function ExcalidrawImage({ elements, files, imageContainerRef, appState, rootClassName = null, ...rest }) {
     const [Svg, setSvg] = useState(null);
+    const theme = useTheme();
     useEffect(() => {
         const setContent = async () => {
             const svg = await exportToSvg({
-                appState,
+                appState: {
+                    ...appState,
+                    ...(theme.palette.mode === 'dark' && {
+                        theme: 'dark',
+                        viewBackgroundColor: theme.palette.background.default,
+                        // exportWithDarkMode: true,
+                    }),
+                },
                 elements,
                 files,
             });

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

@@ -11,6 +11,7 @@ import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import LoadingButton from '@mui/lab/LoadingButton';
 import '@excalidraw/excalidraw/index.css';
+import { useTheme } from '@mui/material';
 import Button from '../../ui/Button';
 import Modal from '../../ui/Modal';
 import { uploadImageToMediaKit } from './utils';
@@ -37,6 +38,7 @@ export default function ExcalidrawModal({ closeOnClickOutside = false, onSave, i
     const [loading, setLoading] = useState(false);
     const [saveText, setSaveText] = useState('Save');
     const [fullScreen, setFullScreen] = useState(false);
+    const theme = useTheme();
     const markBlockletDirtyState = () => {
         if (!readonly) {
             window.dispatchEvent(new CustomEvent('blocklet:markDirty', { detail: { key: 'excalidraw' } }));
@@ -181,8 +183,14 @@ export default function ExcalidrawModal({ closeOnClickOutside = false, onSave, i
     // like a module resolution issue with ESM vs CJS?
     // @ts-ignore
     const _Excalidraw = Excalidraw.$$typeof != null ? Excalidraw : Excalidraw.default;
-    return createPortal(_jsx("div", { className: `ExcalidrawModal__overlay ${fullScreen ? 'ExcalidrawModal__fullscreen' : ''}`, role: "dialog", children: _jsx("div", { className: "ExcalidrawModal__modal", ref: excaliDrawModelRef, tabIndex: -1, children: _jsxs("div", { className: "ExcalidrawModal__row", children: [discardModalOpen && _jsx(ShowDiscardDialog, {}), _jsx(_Excalidraw, { onChange: onChange, onLibraryChange: onLibraryChange, ref: excaliDrawSceneRef, initialData: {
-                            appState: initialAppState || { isLoading: false },
+    const appState = {
+        ...initialAppState,
+        ...(theme.palette.mode === 'dark' && {
+            theme: 'dark',
+        }),
+    };
+    return createPortal(_jsx("div", { className: `ExcalidrawModal__overlay ${fullScreen ? 'ExcalidrawModal__fullscreen' : ''}`, role: "dialog", children: _jsx("div", { className: "ExcalidrawModal__modal", ref: excaliDrawModelRef, tabIndex: -1, style: { backgroundColor: theme.palette.grey[100] }, children: _jsxs("div", { className: "ExcalidrawModal__row", children: [discardModalOpen && _jsx(ShowDiscardDialog, {}), _jsx(_Excalidraw, { onChange: onChange, onLibraryChange: onLibraryChange, ref: excaliDrawSceneRef, initialData: {
+                            appState: appState || { 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" }) })), !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.4.40",
+  "version": "2.4.41",
   "main": "lib/index.js",
   "publishConfig": {
     "access": "public"
@@ -24,11 +24,11 @@
     ]
   },
   "dependencies": {
-    "@blocklet/code-editor": "^0.5.3",
+    "@blocklet/code-editor": "^0.5.4",
     "@blocklet/embed": "^0.2.5",
     "@blocklet/js-sdk": "^1.16.48",
-    "@blocklet/pages-kit": "^0.6.43",
-    "@blocklet/pages-kit-runtime": "^0.6.43",
+    "@blocklet/pages-kit": "^0.6.46",
+    "@blocklet/pages-kit-runtime": "^0.6.46",
     "@excalidraw/excalidraw": "^0.18.0",
     "@iconify/iconify": "^3.1.1",
     "@iconify/icons-tabler": "^1.2.95",
@@ -69,7 +69,7 @@
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
-    "@blocklet/pdf": "2.4.40"
+    "@blocklet/pdf": "2.4.41"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",