perf: 编辑器: 行间距

public/images/icons/line-height.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 4H21V6H11V4ZM6 7V11H4V7H1L5 3L9 7H6ZM6 17H9L5 21L1 17H4V13H6V17ZM11 18H21V20H11V18ZM9 11H21V13H9V11Z"></path></svg>

src/components/LexicalEditor/plugins/ToolbarPlugin.jsx

@@ -89,6 +89,19 @@ const FONT_SIZE_OPTIONS = [
   // ['48px', '48px'],
 ];
 
+const LINE_SPACING_OPTIONS = [
+  ['1', '1'],
+  ['1.25', '1.25'],
+  ['1.5', '1.5'],
+  ['2', '2'],
+  ['2.5', '2.5'],
+  ['3', '3'],
+  // ['3.5', '3.5'],
+  // ['4', '4'],
+  // ['4.5', '4.5'],
+  // ['5', '5'],
+];
+
 const ELEMENT_FORMAT_OPTIONS = {
   center: { icon: 'center-align', iconRTL: 'center-align', name: 'Center Align' },
   end: { icon: 'right-align', iconRTL: 'left-align', name: 'End Align' },
@@ -534,6 +547,26 @@ function BlockOptionsDropdownList({ editor, blockType, toolbarRef, setShowBlockO
   );
 }
 
+const FontDropDownMapped = {
+  'font-family': {
+    buttonAriaLabel: 'Formatting options for font family',
+    IconClassName: 'icon icon2 block-type font-family',
+    options: FONT_FAMILY_OPTIONS,
+    styleName: 'fontFamily',
+  },
+  'font-size': {
+    buttonAriaLabel: 'Formatting options for font size',
+    IconClassName: '',
+    options: FONT_SIZE_OPTIONS,
+    styleName: 'fontSize',
+  },
+  'line-height': {
+    buttonAriaLabel: 'Formatting options for line spacing',
+    IconClassName: 'icon icon2 line-height',
+    options: LINE_SPACING_OPTIONS,
+    styleName: 'lineHeight',
+  },
+}
 function FontDropDown({ editor, value, style, disabled = false }) {
   const handleClick = useCallback(
     (option) => {
@@ -549,26 +582,23 @@ function FontDropDown({ editor, value, style, disabled = false }) {
     [editor, style]
   );
 
-  const buttonAriaLabel = style === 'font-family' ? 'Formatting options for font family' : 'Formatting options for font size';
+  const buttonIconClassName = FontDropDownMapped[style].IconClassName;
+  const buttonAriaLabel = FontDropDownMapped[style].buttonAriaLabel;
+  const dropdownOptions = FontDropDownMapped[style].options;
 
   return (
-    <DropDown
+    <DropDown disabled={disabled} buttonClassName={'toolbar-item ' + style} buttonLabel={value} buttonIconClassName={buttonIconClassName} buttonAriaLabel={buttonAriaLabel}>
-      disabled={disabled}
+      {dropdownOptions.map(([option, text]) => (
-      buttonClassName={'toolbar-item ' + style}
-      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 }}
+          style={{ fontFamily: style === 'font-family' ? option : undefined, fontSize: style === 'font-size' ? option : undefined, }}
           onClick={() => handleClick(option)}
           key={option}>
           <span className='text'>{text}</span>
         </DropDownItem>
       ))}
     </DropDown>
-  );
+  )
 }
 
 function ElementFormatDropdown({ editor, value, isRTL, disabled = false }) {
@@ -673,6 +703,7 @@ export default function ToolbarPlugin() {
   const [fontColor, setFontColor] = useState('#000');
   const [bgColor, setBgColor] = useState('#fff');
   const [elementFormat, setElementFormat] = useState('left');
+  const [lineSpacing, setLineSpacing] = useState('1.5');
 
   const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
   const [isSmallWidthViewport, setIsSmallWidthViewport] = useState(false);
@@ -760,6 +791,9 @@ export default function ToolbarPlugin() {
       setFontSize(
         $getSelectionStyleValueForProperty(selection, 'font-size', '16px'),
       );
+      setLineSpacing(
+        $getSelectionStyleValueForProperty(selection, 'line-height', '1.5'),
+      );
       let matchingParent;
       if ($isLinkNode(parent)) {
         // If node is a link, we need to fetch the parent paragraph node to set format
@@ -896,6 +930,12 @@ export default function ToolbarPlugin() {
           value={fontSize}
           editor={editor}
         />
+        <FontDropDown
+          disabled={!isEditable}
+          style={'line-height'}
+          value={lineSpacing}
+          editor={editor}
+        />
         <Divider />
           <button type='button'
             onClick={() => {

src/components/LexicalEditor/styles.css

@@ -87,6 +87,7 @@
   outline: 0;
   padding: 15px 10px;
   caret-color: #444;
+  line-height: 1.5;
 }
 
 .editor-pure-input {
@@ -415,7 +416,7 @@ pre::-webkit-scrollbar-thumb {
   margin-right: 2px;
 }
 
-.toolbar button.toolbar-item i.format {
+.toolbar button.toolbar-item i.format, .toolbar button.toolbar-item .icon2 {
   background-size: contain;
   display: inline-block;
   height: 18px;
@@ -889,6 +890,10 @@ i.justify-align {
   background-image: url(/images/icons/justify.svg);
 }
 
+i.line-height, .icon.line-height {
+  background-image: url(/images/icons/line-height.svg);
+}
+
 .editor-container span.editor-image {
     cursor: default;
     display: inline-block;