feat: 编辑器: 字号

src/components/LexicalEditor/plugins/ToolbarPlugin.jsx

@@ -70,16 +70,19 @@ const FONT_FAMILY_OPTIONS = [
 
 const FONT_SIZE_OPTIONS = [
   ['10px', '10px'],
-  ['11px', '11px'],
+  // ['11px', '11px'],
   ['12px', '12px'],
   ['13px', '13px'],
   ['14px', '14px'],
-  ['15px', '15px'],
+  // ['15px', '15px'],
   ['16px', '16px'],
-  ['17px', '17px'],
+  // ['17px', '17px'],
   ['18px', '18px'],
-  ['19px', '19px'],
+  // ['19px', '19px'],
   ['20px', '20px'],
+  ['24px', '24px'],
+  ['32px', '32px'],
+  // ['48px', '48px'],
 ];
 
 const ELEMENT_FORMAT_OPTIONS = {
@@ -492,12 +495,13 @@ function FontDropDown({ editor, value, style, disabled = false }) {
     <DropDown
       disabled={disabled}
       buttonClassName={'toolbar-item ' + style}
-      // buttonLabel={value}
+      buttonLabel={value}
       buttonIconClassName={style === 'font-family' ? 'icon block-type font-family' : ''}
       buttonAriaLabel={buttonAriaLabel}>
       {(style === 'font-family' ? FONT_FAMILY_OPTIONS : FONT_SIZE_OPTIONS).map(([option, text]) => (
         <DropDownItem
           className={`item font-m-${option.replace(/\s+/g, '_')} ${dropDownActiveClass(value === option)} ${style === 'font-size' ? 'fontsize-item' : ''}`}
+          style={{ fontFamily: style === 'font-family' ? option : undefined, fontSize: style === 'font-size' ? option : undefined }}
           onClick={() => handleClick(option)}
           key={option}>
           <span className='text'>{text}</span>
@@ -605,6 +609,7 @@ export default function ToolbarPlugin() {
   const [isStrikethrough, setIsStrikethrough] = useState(false);
   const [isCode, setIsCode] = useState(false);
   const [fontFamily, setFontFamily] = useState('Arial');
+  const [fontSize, setFontSize] = useState('16px');
   const [fontColor, setFontColor] = useState('#000');
   const [bgColor, setBgColor] = useState('#fff');
   const [elementFormat, setElementFormat] = useState('left');
@@ -692,6 +697,9 @@ export default function ToolbarPlugin() {
       setFontFamily(
         $getSelectionStyleValueForProperty(selection, 'font-family', 'Arial'),
       );
+      setFontSize(
+        $getSelectionStyleValueForProperty(selection, 'font-size', '16px'),
+      );
       let matchingParent;
       if ($isLinkNode(parent)) {
         // If node is a link, we need to fetch the parent paragraph node to set format
@@ -814,6 +822,12 @@ export default function ToolbarPlugin() {
           value={fontFamily}
           editor={editor}
         />
+        <FontDropDown
+          disabled={!isEditable}
+          style={'font-size'}
+          value={fontSize}
+          editor={editor}
+        />
         <Divider />
           <button type='button'
             onClick={() => {

src/components/LexicalEditor/styles.css

@@ -80,7 +80,7 @@
 .editor-input {
   min-height: 150px;
   resize: none;
-  font-size: 15px;
+  font-size: 16px;
   caret-color: rgb(5, 5, 5);
   position: relative;
   tab-size: 1;

src/components/LexicalEditor/ui/DropDown.tsx

@@ -29,12 +29,13 @@ export function DropDownItem({
   children,
   className,
   onClick,
-  title,
+  title, style
 }: {
   children: React.ReactNode;
   className: string;
   onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
   title?: string;
+  style?: React.CSSProperties;
 }) {
   const ref = useRef<HTMLButtonElement>(null);
 
@@ -53,7 +54,7 @@ export function DropDownItem({
   }, [ref, registerItem]);
 
   return (
-    <button
+    <button style={style}
       className={className}
       onClick={onClick}
       ref={ref}