邮件编辑: 字体

src/components/LexicalEditor/plugins/ToolbarPlugin.jsx

@@ -51,6 +51,29 @@ const blockTypeToBlockName = {
   ul: 'Bulleted List',
 };
 
+const FONT_FAMILY_OPTIONS = [
+  ['Arial', 'Arial'],
+  ['Courier New', 'Courier New'],
+  ['Georgia', 'Georgia'],
+  ['Times New Roman', 'Times New Roman'],
+  ['Trebuchet MS', 'Trebuchet MS'],
+  ['Verdana', 'Verdana'],
+];
+
+const FONT_SIZE_OPTIONS = [
+  ['10px', '10px'],
+  ['11px', '11px'],
+  ['12px', '12px'],
+  ['13px', '13px'],
+  ['14px', '14px'],
+  ['15px', '15px'],
+  ['16px', '16px'],
+  ['17px', '17px'],
+  ['18px', '18px'],
+  ['19px', '19px'],
+  ['20px', '20px'],
+];
+
 const ELEMENT_FORMAT_OPTIONS = {
   center: { icon: 'center-align', iconRTL: 'center-align', name: 'Center Align' },
   end: { icon: 'right-align', iconRTL: 'left-align', name: 'End Align' },
@@ -60,6 +83,14 @@ const ELEMENT_FORMAT_OPTIONS = {
   start: { icon: 'left-align', iconRTL: 'right-align', name: 'Start Align' },
 };
 
+function dropDownActiveClass(active) {
+  if (active) {
+    return 'active dropdown-item-active';
+  } else {
+    return '';
+  }
+}
+
 function Divider() {
   return <div className='divider' />;
 }
@@ -432,6 +463,56 @@ function BlockOptionsDropdownList({ editor, blockType, toolbarRef, setShowBlockO
   );
 }
 
+function FontDropDown({
+  editor,
+  value,
+  style,
+  disabled = false,
+}) {
+  const handleClick = useCallback(
+    (option) => {
+      editor.update(() => {
+        const selection = $getSelection();
+        if (selection !== null) {
+          $patchStyleText(selection, {
+            [style]: option,
+          });
+        }
+      });
+    },
+    [editor, style],
+  );
+
+  const buttonAriaLabel =
+    style === 'font-family'
+      ? 'Formatting options for font family'
+      : 'Formatting options for font size';
+
+  return (
+    <DropDown
+      disabled={disabled}
+      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' : ''
+            }`}
+            onClick={() => handleClick(option)}
+            key={option}>
+            <span className="text">{text}</span>
+          </DropDownItem>
+        ),
+      )}
+    </DropDown>
+  );
+}
+
 function ElementFormatDropdown({ editor, value, isRTL, disabled = false }) {
   const formatOption = ELEMENT_FORMAT_OPTIONS[value || 'left'];
 
@@ -528,6 +609,7 @@ export default function ToolbarPlugin() {
   const [isUnderline, setIsUnderline] = useState(false);
   const [isStrikethrough, setIsStrikethrough] = useState(false);
   const [isCode, setIsCode] = useState(false);
+  const [fontFamily, setFontFamily] = useState('Arial');
   const [fontColor, setFontColor] = useState('#000');
   const [bgColor, setBgColor] = useState('#fff');
   const [elementFormat, setElementFormat] = useState('left');
@@ -600,6 +682,16 @@ export default function ToolbarPlugin() {
 
       // Handle buttons
       setFontColor($getSelectionStyleValueForProperty(selection, 'color', '#000'));
+      setBgColor(
+        $getSelectionStyleValueForProperty(
+          selection,
+          'background-color',
+          '#fff',
+        ),
+      );
+      setFontFamily(
+        $getSelectionStyleValueForProperty(selection, 'font-family', 'Arial'),
+      );
 
       let matchingParent;
       if ($isLinkNode(parent)) {
@@ -715,6 +807,13 @@ export default function ToolbarPlugin() {
         </>
       ) : (
         <>
+        <FontDropDown
+          disabled={!isEditable}
+          style={'font-family'}
+          value={fontFamily}
+          editor={editor}
+        />
+        <Divider />
           <button
             onClick={() => {
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');

src/components/LexicalEditor/styles.css

@@ -388,6 +388,8 @@ pre::-webkit-scrollbar-thumb {
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   vertical-align: middle;
+  width: inherit;
+  overflow-x: auto;
 }
 
 .toolbar button.toolbar-item {
@@ -597,6 +599,9 @@ i.chevron-down {
   height: 20px;
   background-size: contain;
 }
+button.item.dropdown-item-active {
+    background-color: #dfe8fa4d;
+}
 
 .dropdown .item:first-child {
   margin-top: 8px;
@@ -626,7 +631,24 @@ i.chevron-down {
   line-height: 16px;
   background-size: contain;
 }
-
+.dropdown .item.font-m-Arial {
+    font-family: Arial, sans-serif;
+}
+.dropdown .item.font-m-Courier_New {
+    font-family: 'Courier New', monospace;
+}
+.dropdown .item.font-m-Georgia {
+    font-family: Georgia, serif;
+}
+.dropdown .item.font-m-Times_New_Roman {
+    font-family: 'Times New Roman', serif;
+}
+.dropdown .item.font-m-Trebuchet_MS {
+    font-family: 'Trebuchet MS', sans-serif;
+}
+.dropdown .item.font-m-Verdana {
+    font-family: Verdana, sans-serif;
+}
 .link-editor {
   position: absolute;
   z-index: 100;
@@ -754,6 +776,10 @@ i.redo {
 .icon.code {
   background-image: url(/images/icons/code.svg);
 }
+
+.icon.font-family {
+    background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20fill='currentColor'%20class='bi%20bi-fonts'%3e%3cpath%20d='M12.258%203h-8.51l-.083%202.46h.479c.26-1.544.758-1.783%202.693-1.845l.424-.013v7.827c0%20.663-.144.82-1.3.923v.52h4.082v-.52c-1.162-.103-1.306-.26-1.306-.923V3.602l.431.013c1.934.062%202.434.301%202.693%201.846h.479L12.258%203z'/%3e%3c/svg%3e")
+}
 /* .icon.font-color {
     background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%20512%20512'%3e%3cpath%20fill='%23777'%20d='M221.631%20109%20109.92%20392h58.055l24.079-61h127.892l24.079%2061h58.055L290.369%20109Zm-8.261%20168L256%20169l42.63%20108Z'/%3e%3c/svg%3e");
 } */