@blocklet/editor 2.3.35 → 2.3.36

package/lib/main/index.css

@@ -127,7 +127,6 @@
 }
 
 .typeahead-popover {
-  background: #fff;
   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
   border-radius: 8px;
   z-index: 1;
@@ -160,14 +159,9 @@
   cursor: pointer;
 }
 
-.typeahead-popover ul li.selected {
-  background: #eee;
-}
-
 .typeahead-popover li {
   margin: 0 8px 0 8px;
   padding: 8px;
-  color: #050505;
   cursor: pointer;
   line-height: 16px;
   font-size: 15px;
@@ -175,7 +169,6 @@
   align-content: center;
   flex-direction: row;
   flex-shrink: 0;
-  background-color: #fff;
   border: 0;
 }
 
@@ -186,10 +179,6 @@
   background-size: contain;
 }
 
-.typeahead-popover li:hover {
-  background-color: #eee;
-}
-
 .typeahead-popover li .text {
   display: flex;
   line-height: 20px;
@@ -279,9 +268,7 @@ i.prettier-error {
   margin: 8px 12px;
   padding: 8px 12px;
   border-radius: 15px;
-  background-color: #eee;
   font-size: 15px;
-  color: rgb(5, 5, 5);
   border: 0;
   outline: 0;
   position: relative;
@@ -303,7 +290,6 @@ i.prettier-error {
 }
 
 .link-editor .link-input a {
-  color: rgb(33, 111, 219);
   text-decoration: none;
   display: block;
   white-space: nowrap;
@@ -453,18 +439,13 @@ i.prettier-error {
   z-index: 10001;
   display: block;
   position: fixed;
-  box-shadow:
-    0 12px 28px 0 rgba(0, 0, 0, 0.2),
-    0 2px 4px 0 rgba(0, 0, 0, 0.1),
-    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+  box-shadow: 0 1px rgb(0 0 0 / 0.05);
   border-radius: 8px;
   min-height: 40px;
-  background-color: #fff;
 }
 
 .dropdown .item {
   padding: 8px;
-  color: #050505;
   cursor: pointer;
   line-height: 16px;
   font-size: 15px;
@@ -473,7 +454,6 @@ i.prettier-error {
   flex-direction: row;
   flex-shrink: 0;
   justify-content: space-between;
-  background-color: #fff;
   border: 0;
   max-width: 250px;
   min-width: 100px;
@@ -499,10 +479,6 @@ i.prettier-error {
   margin-bottom: 8px;
 }
 
-.dropdown .item:hover {
-  background-color: #eee;
-}
-
 .dropdown .item .text {
   display: flex;
   line-height: 20px;

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

@@ -373,7 +373,18 @@ export default function ComponentPickerMenuPlugin() {
     }, [editor]);
     return (_jsxs(_Fragment, { children: [modal, _jsx(LexicalTypeaheadMenuPlugin, { onQueryChange: setQueryString, onSelectOption: onSelectOption, triggerFn: checkForTriggerMatch, options: options, menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
                     return anchorElementRef.current && options.length
-                        ? createPortal(_jsx("div", { className: "typeahead-popover component-picker-menu", children: _jsx("ul", { children: options.map((option, i) => (_jsx(ComponentPickerMenuItem, { index: i, isSelected: selectedIndex === i, onClick: () => {
+                        ? createPortal(_jsx(Box, { className: "typeahead-popover component-picker-menu", sx: {
+                                border: 1,
+                                borderColor: 'divider',
+                                color: 'text.primary',
+                                bgcolor: 'background.default',
+                                'li.selected': {
+                                    bgcolor: 'action.selected',
+                                },
+                                'li:hover': {
+                                    bgcolor: 'action.hover',
+                                },
+                            }, children: _jsx("ul", { children: options.map((option, i) => (_jsx(ComponentPickerMenuItem, { index: i, isSelected: selectedIndex === i, onClick: () => {
                                         setHighlightedIndex(i);
                                         selectOptionAndCleanUp(option);
                                     }, onMouseEnter: () => {

package/lib/main/plugins/FloatingLinkEditorPlugin/index.css

@@ -6,7 +6,6 @@
   max-width: 400px;
   width: 100%;
   opacity: 0;
-  background-color: #fff;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
   border-radius: 8px;
   transition: opacity 0.5s;

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

@@ -13,6 +13,7 @@ import { $findMatchingParent, mergeRegister } from '@lexical/utils';
 import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND, } from 'lexical';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { Box } from '@mui/material';
 import { getSelectedNode } from '../../utils/getSelectedNode';
 import { sanitizeUrl } from '../../utils/sanitizeUrl';
 import { setFloatingElemPosition } from '../../utils/setFloatingElemPosition';
@@ -111,7 +112,20 @@ function FloatingLinkEditor({ editor, anchorElem }) {
             inputRef.current.focus();
         }
     }, [isEditMode]);
-    return (_jsx("div", { ref: editorRef, className: "link-editor", children: isEditMode ? (_jsx("input", { ref: inputRef, className: "link-input", value: linkUrl, onChange: (event) => {
+    return (_jsx(Box, { ref: editorRef, className: "link-editor", sx: {
+            bgcolor: 'background.default',
+            color: 'text.primary',
+            border: 1,
+            borderColor: 'divider',
+            '& .link-input': {
+                minHeight: 32,
+                color: 'text.primary',
+                bgcolor: 'grey.100',
+                '& a': {
+                    color: 'primary.main',
+                },
+            },
+        }, children: isEditMode ? (_jsx("input", { ref: inputRef, className: "link-input", value: linkUrl, onChange: (event) => {
                 setLinkUrl(event.target.value);
             }, onKeyDown: (event) => {
                 if (event.key === 'Enter') {

package/lib/main/plugins/FloatingTextFormatToolbarPlugin/index.css

@@ -9,18 +9,15 @@
 
 .floating-text-format-popup {
   display: flex;
-  background: #fff;
   padding: 4px;
   vertical-align: middle;
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
-  background-color: #fff;
   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
   border-radius: 8px;
   transition: opacity 0.5s;
-  height: 35px;
   will-change: transform;
   z-index: 1201;
 }
@@ -33,7 +30,6 @@
   padding: 8px;
   cursor: pointer;
   vertical-align: middle;
-  color: #4b5563;
 }
 
 .floating-text-format-popup button.popup-item:disabled {
@@ -59,18 +55,10 @@
   opacity: 0.2;
 }
 
-.floating-text-format-popup button.popup-item.active {
-  background-color: rgba(223, 232, 250, 0.3);
-}
-
 .floating-text-format-popup button.popup-item.active i {
   opacity: 1;
 }
 
-.floating-text-format-popup .popup-item:hover:not([disabled]) {
-  background-color: #eee;
-}
-
 .floating-text-format-popup select.popup-item {
   border: 0;
   display: flex;

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

@@ -1,12 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment, 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 styled from '@emotion/styled';
 import { $isCodeHighlightNode } from '@lexical/code';
 import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
@@ -14,6 +6,7 @@ import { mergeRegister } from '@lexical/utils';
 import { $getSelection, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_LOW, FORMAT_TEXT_COMMAND, SELECTION_CHANGE_COMMAND, } from 'lexical';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { Box } from '@mui/material';
 import { getDOMRangeRect } from '../../utils/getDOMRangeRect';
 import { getSelectedNode } from '../../utils/getSelectedNode';
 import { setFloatingElemPosition } from '../../utils/setFloatingElemPosition';
@@ -98,7 +91,35 @@ function TextFormatFloatingToolbar({ editor, anchorElem, isLink, isBold, isItali
             return false;
         }, COMMAND_PRIORITY_LOW));
     }, [editor, updateTextFormatFloatingToolbar]);
-    return (_jsx(Menus, { ref: popupCharStylesEditorRef, className: "floating-text-format-popup", children: editor.isEditable() && (_jsxs(_Fragment, { children: [_jsx(AideFloatingToolbarButton, {}), _jsx("button", { onClick: () => {
+    return (_jsx(Box, { ref: popupCharStylesEditorRef, className: "floating-text-format-popup", sx: {
+            border: 1,
+            borderColor: 'divider',
+            bgcolor: 'background.default',
+            'button.popup-item': {
+                height: 28,
+                color: 'text.primary',
+            },
+            'button.popup-item.active': {
+                bgcolor: 'action.selected',
+            },
+            '.popup-item:hover:not([disabled])': {
+                bgcolor: 'action.hover',
+            },
+            '> button': {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                '& .iconify': {
+                    fontSize: 16,
+                    opacity: 0.6,
+                },
+                '&.active': {
+                    '& .iconify': {
+                        opacity: 1,
+                    },
+                },
+            },
+        }, children: editor.isEditable() && (_jsxs(_Fragment, { children: [_jsx(AideFloatingToolbarButton, {}), _jsx("button", { onClick: () => {
                         editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
                     }, className: `popup-item spaced ${isBold ? 'active' : ''}`, "aria-label": "Format text as bold", children: _jsx("i", { className: "iconify", "data-icon": "mdi:format-bold" }) }), _jsx("button", { onClick: () => {
                         editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
@@ -190,21 +211,3 @@ export default function FloatingTextFormatToolbarPlugin({ anchorElem = document.
     const [editor] = useLexicalComposerContext();
     return useFloatingTextFormatToolbar(editor, anchorElem);
 }
-const Menus = styled.div `
-  > button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    > .iconify {
-      font-size: 16px;
-      opacity: 0.6;
-    }
-
-    &.active {
-      > .iconify {
-        opacity: 1;
-      }
-    }
-  }
-`;

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

@@ -12,6 +12,7 @@ import { LexicalTypeaheadMenuPlugin, useBasicTypeaheadTriggerMatch, } from '@lex
 import { $createTextNode, $insertNodes } from 'lexical';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import debounce from 'lodash/debounce';
+import { Box } from '@mui/material';
 import { $createMentionNode } from '../../nodes/MentionNode';
 import { useEditorConfig } from '../../../config';
 import HighlightStyle from './HighlightStyle';
@@ -148,7 +149,18 @@ export default function NewMentionsPlugin() {
     }, [checkForSlashTriggerMatch, editor]);
     return (_jsxs(_Fragment, { children: [_jsx(LexicalTypeaheadMenuPlugin, { onQueryChange: setQueryString, onSelectOption: onSelectOption, triggerFn: checkForMentionMatch, options: options, menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
                     return anchorElementRef.current && results.length
-                        ? createPortal(_jsx("div", { className: "typeahead-popover mentions-menu", children: _jsx("ul", { children: options.map((option, i) => (_jsx(MentionsTypeaheadMenuItem, { index: i, isSelected: selectedIndex === i, onClick: () => {
+                        ? createPortal(_jsx(Box, { className: "typeahead-popover mentions-menu", sx: {
+                                border: 1,
+                                borderColor: 'divider',
+                                color: 'text.primary',
+                                bgcolor: 'background.default',
+                                'li.selected': {
+                                    bgcolor: 'action.selected',
+                                },
+                                'li:hover': {
+                                    bgcolor: 'action.hover',
+                                },
+                            }, children: _jsx("ul", { children: options.map((option, i) => (_jsx(MentionsTypeaheadMenuItem, { index: i, isSelected: selectedIndex === i, onClick: () => {
                                         setHighlightedIndex(i);
                                         selectOptionAndCleanUp(option);
                                     }, onMouseEnter: () => {

package/lib/main/ui/DropDown.js

@@ -10,6 +10,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 import styled from '@emotion/styled';
+import { Box } from '@mui/material';
 const DropDownContext = React.createContext(null);
 export function DropDownItem({ children, className, onClick, title, }) {
     const ref = useRef(null);
@@ -68,23 +69,28 @@ function DropDownItems({ children, dropDownRef, onClose, }) {
             highlightedItem.current.focus();
         }
     }, [items, highlightedItem]);
-    return (_jsx(DropDownContext.Provider, { value: contextValue, children: _jsx(DropdownItems, { className: "dropdown", ref: dropDownRef, onKeyDown: handleKeyDown, children: children }) }));
+    return (_jsx(DropDownContext.Provider, { value: contextValue, children: _jsx(Box, { className: "dropdown", ref: dropDownRef, onKeyDown: handleKeyDown, sx: {
+                border: 1,
+                borderColor: 'divider',
+                bgcolor: 'background.default',
+                '.item': {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 1,
+                    /* fix: safari dropdown menu item 右侧溢出问题 */
+                    width: '-webkit-fill-available',
+                    color: 'text.primary',
+                    bgcolor: 'background.default',
+                    '.iconify': {
+                        flexShrink: 0,
+                        fontSize: '1.4em',
+                    },
+                    '&:hover': {
+                        bgcolor: 'action.hover',
+                    },
+                },
+            }, children: children }) }));
 }
-const DropdownItems = styled.div `
-  .item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    /* fix: safari dropdown menu item 右侧溢出问题 */
-    width: -webkit-fill-available;
-
-    .iconify {
-      flex-shrink: 0;
-      font-size: 1.4em;
-      color: gray;
-    }
-  }
-`;
 export default function DropDown({ disabled = false, buttonLabel, buttonAriaLabel, buttonClassName, buttonIconClassName, buttonIconData, children, stopCloseOnClickSelf, }) {
     const dropDownRef = useRef(null);
     const buttonRef = useRef(null);

package/lib/main/ui/ImageEnhancer.js

@@ -107,7 +107,7 @@ export function ImageEnhancer({ sizeMode, frame, onSizeModeChange, onFrameChange
                 alignItems: 'center',
                 gap: 1,
                 ...(size?.width && { width: size.width - 36 }),
-            }, children: [_jsxs(ToggleButtonGroup, { color: "standard", value: sizeMode, size: "small", exclusive: true, onChange: (_, v) => onSizeModeChange(v), sx: { bgcolor: '#fff' }, children: [_jsx(ToggleButton, { value: "small", children: "Small" }), _jsx(ToggleButton, { value: "best-fit", children: "Best fit" }), _jsx(ToggleButton, { value: "original", children: "Original size" })] }), _jsxs(Select, { value: frame ?? 'none', onChange: (e) => handleFrameChange(e.target.value), sx: { width: { xs: 100, sm: 'auto' } }, MenuProps: { sx: { '.MuiPaper-root': { maxHeight: 400 } }, disablePortal: false }, children: [_jsx(MenuItem, { value: "none", children: "Select frame mockup" }), frames.map((x) => {
+            }, children: [_jsxs(ToggleButtonGroup, { color: "standard", value: sizeMode, size: "small", exclusive: true, onChange: (_, v) => onSizeModeChange(v), sx: { bgcolor: 'background.default' }, children: [_jsx(ToggleButton, { value: "small", children: "Small" }), _jsx(ToggleButton, { value: "best-fit", children: "Best fit" }), _jsx(ToggleButton, { value: "original", children: "Original size" })] }), _jsxs(Select, { value: frame ?? 'none', onChange: (e) => handleFrameChange(e.target.value), sx: { width: { xs: 100, sm: 'auto' } }, MenuProps: { sx: { '.MuiPaper-root': { maxHeight: 400 } }, disablePortal: false }, children: [_jsx(MenuItem, { value: "none", children: "Select frame mockup" }), frames.map((x) => {
                             return (_jsx(MenuItem, { value: x.id, children: x.name }, x.id));
                         })] }), children] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.3.35",
+  "version": "2.3.36",
   "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.35"
+    "@blocklet/pdf": "^2.3.36"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",