This commit is contained in:
fantasticit 2022-12-17 19:55:03 +08:00
parent 4254a6fe61
commit 8453788b84
4 changed files with 112 additions and 2 deletions

View File

@ -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();
},
};
},
});

View File

@ -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>
);
};

View File

@ -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} />

View File

@ -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,