@blocklet/editor 2.3.12 → 2.3.15

package/lib/main/index.css

@@ -845,7 +845,6 @@ button.action-button:disabled {
 .toolbar {
   display: flex;
   margin-bottom: 1px;
-  background: #fff;
   padding: 4px;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
@@ -864,7 +863,6 @@ button.action-button:disabled {
   vertical-align: middle;
   flex-shrink: 0;
   align-items: center;
-  color: #4b5563;
 }
 
 .toolbar button.toolbar-item:disabled {
@@ -892,18 +890,10 @@ button.action-button:disabled {
   opacity: 0.2;
 }
 
-.toolbar button.toolbar-item.active {
-  background-color: rgba(223, 232, 250, 0.3);
-}
-
 .toolbar button.toolbar-item.active i {
   opacity: 1;
 }
 
-.toolbar .toolbar-item:hover:not([disabled]) {
-  background-color: #eee;
-}
-
 .toolbar .toolbar-item.font-family .text {
   display: block;
   max-width: 40px;

package/lib/main/markdown-editor/plugins/ToolbarPlugin.js

@@ -9,6 +9,7 @@ import { $setBlocksType } from '@lexical/selection';
 import { $findMatchingParent, $getNearestNodeOfType, mergeRegister } from '@lexical/utils';
 import { $createParagraphNode, $getNodeByKey, $getSelection, $isRangeSelection, $isRootOrShadowRoot, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, COMMAND_PRIORITY_CRITICAL, FORMAT_TEXT_COMMAND, SELECTION_CHANGE_COMMAND, } from 'lexical';
 import { useCallback, useEffect, useState } from 'react';
+import { Box } from '@mui/material';
 import { IS_APPLE } from '../../../shared/environment';
 import useHasNodes from '../../hooks/useHasNodes';
 import useModal from '../../hooks/useModal';
@@ -340,14 +341,24 @@ export default function ToolbarPlugin() {
     if (menus.length === 0) {
         return null;
     }
-    return (_jsxs(Toolbar, { className: "toolbar", children: [menus, modal] }));
+    return (_jsxs(Box, { className: "toolbar", sx: {
+            position: 'sticky',
+            top: 0,
+            zIndex: 10,
+            height: 'auto',
+            bgcolor: 'background.paper',
+            '& button.toolbar-item, & button.toolbar-item .text': {
+                color: 'text.primary',
+            },
+            '& button.toolbar-item.active': {
+                backgroundColor: 'action.selected',
+            },
+            '& .toolbar-item:hover:not([disabled])': {
+                backgroundColor: 'action.hover',
+            },
+        }, children: [menus, modal] }));
 }
-const Toolbar = styled.div `
-  z-index: 10;
-  position: sticky;
-  top: 0;
-  height: auto;
-`;
+const Toolbar = styled.div ``;
 const FormatButton = styled.button `
   display: flex;
   align-items: center;

package/lib/main/plugins/ToolbarPlugin/index.js

@@ -10,6 +10,7 @@ import { $getSelectionStyleValueForProperty, $isParentElementRTL, $patchStyleTex
 import { $findMatchingParent, $getNearestBlockElementAncestorOrThrow, $getNearestNodeOfType, mergeRegister, } from '@lexical/utils';
 import { $createParagraphNode, $getNodeByKey, $getSelection, $isRangeSelection, $isRootOrShadowRoot, $isTextNode, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, COMMAND_PRIORITY_CRITICAL, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND, SELECTION_CHANGE_COMMAND, } from 'lexical';
 import { useCallback, useEffect, useState } from 'react';
+import { Box } from '@mui/material';
 import { useEditorConfig } from '../../../config';
 import { IS_APPLE } from '../../../shared/environment';
 import useHasNodes from '../../hooks/useHasNodes';
@@ -438,14 +439,23 @@ export default function ToolbarPlugin() {
     if (menus.length === 0) {
         return null;
     }
-    return (_jsxs(Toolbar, { className: "toolbar", children: [menus, modal] }));
+    return (_jsxs(Box, { className: "toolbar", sx: {
+            position: 'sticky',
+            top: 0,
+            zIndex: 10,
+            height: 'auto',
+            bgcolor: 'background.paper',
+            '& button.toolbar-item, & button.toolbar-item .text': {
+                color: 'text.primary',
+            },
+            '& button.toolbar-item.active': {
+                backgroundColor: 'action.selected',
+            },
+            '& .toolbar-item:hover:not([disabled])': {
+                backgroundColor: 'action.hover',
+            },
+        }, children: [menus, modal] }));
 }
-const Toolbar = styled.div `
-  z-index: 10;
-  position: sticky;
-  top: 0;
-  height: auto;
-`;
 const FormatButton = styled.button `
   display: flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.3.12",
+  "version": "2.3.15",
   "main": "lib/index.js",
   "publishConfig": {
     "access": "public"
@@ -68,7 +68,7 @@
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
-    "@blocklet/pdf": "^2.3.12"
+    "@blocklet/pdf": "^2.3.15"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",