close #204

packages/client/src/tiptap/core/extensions/font-family.ts

@@ -0,0 +1,60 @@
+import '@tiptap/extension-text-style';
+
+import { Extension } from '@tiptap/core';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    fontFamily: {
+      setFontFamily: (fontFamily: string) => ReturnType;
+      unsetFontFamily: () => ReturnType;
+    };
+  }
+}
+
+export const FontFamily = Extension.create({
+  name: 'fontFamily',
+
+  addOptions() {
+    return {
+      types: ['textStyle'],
+    };
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontFamily: {
+            default: null,
+            parseHTML: (element) => element.style.fontFamily.replace(/['"]+/g, ''),
+            renderHTML: (attributes) => {
+              if (!attributes.fontFamily) {
+                return {};
+              }
+
+              return {
+                style: `font-family: ${attributes.fontFamily}`,
+              };
+            },
+          },
+        },
+      },
+    ];
+  },
+
+  addCommands() {
+    return {
+      setFontFamily:
+        (fontFamily) =>
+        ({ chain }) => {
+          return chain().setMark('textStyle', { fontFamily }).run();
+        },
+      unsetFontFamily:
+        () =>
+        ({ chain }) => {
+          return chain().setMark('textStyle', { fontFamily: null }).removeEmptyTextStyle().run();
+        },
+    };
+  },
+});

packages/client/src/tiptap/core/menus/fontfamily/index.tsx

@@ -0,0 +1,48 @@
+import { Select } from '@douyinfe/semi-ui';
+import React, { useCallback } from 'react';
+import { Editor } from 'tiptap/core';
+import { Title } from 'tiptap/core/extensions/title';
+import { useActive } from 'tiptap/core/hooks/use-active';
+import { useAttributes } from 'tiptap/core/hooks/use-attributes';
+
+export const Fonts = [
+  'Arial',
+  'Arial Black',
+  'Georgia',
+  'Impact',
+  'Tahoma',
+  'Times New Roman',
+  'Verdana',
+  'Courier New',
+  'Lucida Console',
+  'Monaco',
+  'monospace',
+];
+
+export const FontFamily: React.FC<{ editor: Editor }> = ({ editor }) => {
+  const isTitleActive = useActive(editor, Title.name);
+  const currentFontFamily = useAttributes(editor, 'textStyle', { fontFamily: '' }, (attrs) => attrs.fontFamily);
+
+  const toggle = useCallback(
+    (val) => {
+      editor.chain().focus().setFontFamily(val).run();
+    },
+    [editor]
+  );
+
+  return (
+    <Select
+      disabled={isTitleActive}
+      placeholder="字体"
+      value={currentFontFamily}
+      onChange={toggle}
+      style={{ width: 80, marginRight: 10 }}
+    >
+      {Fonts.map((font) => (
+        <Select.Option key={font} value={font}>
+          {font}
+        </Select.Option>
+      ))}
+    </Select>
+  );
+};

packages/client/src/tiptap/editor/collaboration/collaboration/menubar.tsx

@@ -19,6 +19,7 @@ import { DocumentReference } from 'tiptap/core/menus/document-reference';
 import { Emoji } from 'tiptap/core/menus/emoji';
 import { Excalidraw } from 'tiptap/core/menus/excalidraw';
 import { Flow } from 'tiptap/core/menus/flow';
+import { FontFamily } from 'tiptap/core/menus/fontfamily';
 import { FontSize } from 'tiptap/core/menus/fontsize';
 import { Heading } from 'tiptap/core/menus/heading';
 import { HorizontalRule } from 'tiptap/core/menus/horizontal-rule';
@@ -68,6 +69,7 @@ const _MenuBar: React.FC<{ editor: Editor }> = ({ editor }) => {
         <Divider />
 
         <Heading editor={editor} />
+        <FontFamily editor={editor} />
         <FontSize editor={editor} />
         <Bold editor={editor} />
         <Italic editor={editor} />

packages/client/src/tiptap/editor/collaboration/kit.ts

@@ -26,6 +26,7 @@ import { EventEmitter } from 'tiptap/core/extensions/event-emitter';
 import { Excalidraw } from 'tiptap/core/extensions/excalidraw';
 import { Flow } from 'tiptap/core/extensions/flow';
 import { Focus } from 'tiptap/core/extensions/focus';
+import { FontFamily } from 'tiptap/core/extensions/font-family';
 import { FontSize } from 'tiptap/core/extensions/font-size';
 import { Gapcursor } from 'tiptap/core/extensions/gapcursor';
 import { HardBreak } from 'tiptap/core/extensions/hard-break';
@@ -48,7 +49,6 @@ import { Paste } from 'tiptap/core/extensions/paste';
 import { Placeholder } from 'tiptap/core/extensions/placeholder';
 import { QuickInsert } from 'tiptap/core/extensions/quick-insert';
 import { SearchNReplace } from 'tiptap/core/extensions/search';
-import { SelectionExtension } from 'tiptap/core/extensions/selection';
 import { Status } from 'tiptap/core/extensions/status';
 import { Strike } from 'tiptap/core/extensions/strike';
 import { Subscript } from 'tiptap/core/extensions/subscript';
@@ -124,6 +124,7 @@ export const CollaborationKit = [
   Excalidraw,
   EventEmitter,
   Focus,
+  FontFamily,
   FontSize,
   Gapcursor,
   HardBreak,
@@ -137,7 +138,6 @@ export const CollaborationKit = [
   ListItem,
   Loading,
   OrderedList,
-  // SelectionExtension,
   Strike,
   Subscript,
   Superscript,