diff --git a/packages/client/src/components/icons/IconCountdown.tsx b/packages/client/src/components/icons/IconCountdown.tsx new file mode 100644 index 00000000..477e62bd --- /dev/null +++ b/packages/client/src/components/icons/IconCountdown.tsx @@ -0,0 +1,16 @@ +import { Icon } from '@douyinfe/semi-ui'; + +export const IconCountdown: React.FC<{ style?: React.CSSProperties }> = ({ style = {} }) => { + return ( + + + + + + } + /> + ); +}; diff --git a/packages/client/src/components/icons/index.tsx b/packages/client/src/components/icons/index.tsx index 501b79f5..88fd54fc 100644 --- a/packages/client/src/components/icons/index.tsx +++ b/packages/client/src/components/icons/index.tsx @@ -48,3 +48,4 @@ export * from './IconTableHeaderCell'; export * from './IconSub'; export * from './IconSup'; export * from './IconGlobe'; +export * from './IconCountdown'; diff --git a/packages/client/src/tiptap/basekit.tsx b/packages/client/src/tiptap/basekit.tsx index 582c6987..76e75fb2 100644 --- a/packages/client/src/tiptap/basekit.tsx +++ b/packages/client/src/tiptap/basekit.tsx @@ -13,7 +13,6 @@ import { DocumentChildren } from './extensions/document-children'; import { DocumentReference } from './extensions/document-reference'; import { Dropcursor } from './extensions/dropcursor'; import { Emoji } from './extensions/emoji'; -import { EvokeMenu } from './extensions/evoke-menu'; import { Focus } from './extensions/focus'; import { FontSize } from './extensions/font-size'; import { Gapcursor } from './extensions/gapcursor'; @@ -33,6 +32,7 @@ import { Mind } from './extensions/mind'; import { OrderedList } from './extensions/ordered-list'; import { Paragraph } from './extensions/paragraph'; import { Placeholder } from './extensions/placeholder'; +import { QuickInsert } from './extensions/quick-insert'; import { SearchNReplace } from './extensions/search'; import { SelectionExtension } from './extensions/selection'; import { Status } from './extensions/status'; @@ -69,7 +69,6 @@ export const BaseKit = [ DocumentReference, Dropcursor, Emoji, - EvokeMenu, Focus, FontSize, Gapcursor, @@ -89,6 +88,7 @@ export const BaseKit = [ OrderedList, Paragraph, Placeholder, + QuickInsert, SearchNReplace, SelectionExtension, Status, diff --git a/packages/client/src/tiptap/extensions/countdown.ts b/packages/client/src/tiptap/extensions/countdown.ts index a508984b..9133b246 100644 --- a/packages/client/src/tiptap/extensions/countdown.ts +++ b/packages/client/src/tiptap/extensions/countdown.ts @@ -30,7 +30,7 @@ export const Countdown = Node.create({ addAttributes() { return { title: { - default: '倒计时', + default: '倒计时⏰', parseHTML: getDatasetAttribute('title'), }, date: { diff --git a/packages/client/src/tiptap/extensions/evoke-menu.tsx b/packages/client/src/tiptap/extensions/quick-insert.tsx similarity index 92% rename from packages/client/src/tiptap/extensions/evoke-menu.tsx rename to packages/client/src/tiptap/extensions/quick-insert.tsx index 6e91386f..0c6a9d2c 100644 --- a/packages/client/src/tiptap/extensions/evoke-menu.tsx +++ b/packages/client/src/tiptap/extensions/quick-insert.tsx @@ -5,19 +5,19 @@ import { Decoration, DecorationSet } from 'prosemirror-view'; import Suggestion from '@tiptap/suggestion'; import tippy from 'tippy.js'; import { MenuList } from '../wrappers/menu-list'; -import { EVOKE_MENU_ITEMS } from '../menus/evoke-menu'; +import { QUICK_INSERT_ITEMS } from '../menus/quick-insert'; -export const EvokeMenuPluginKey = new PluginKey('evokeMenu'); +export const QuickInsertPluginKey = new PluginKey('quickInsert'); -export const EvokeMenu = Node.create({ - name: 'evokeMenu', +export const QuickInsert = Node.create({ + name: 'quickInsert', addOptions() { return { HTMLAttributes: {}, suggestion: { char: '/', - pluginKey: EvokeMenuPluginKey, + pluginKey: QuickInsertPluginKey, command: ({ editor, range, props }) => { const { state, dispatch } = editor.view; const $from = state.selection.$from; @@ -81,7 +81,7 @@ export const EvokeMenu = Node.create({ }).configure({ suggestion: { items: ({ query }) => { - return EVOKE_MENU_ITEMS.filter((command) => command.key.startsWith(query)); + return QUICK_INSERT_ITEMS.filter((command) => command.key.startsWith(query)); }, render: () => { let component; diff --git a/packages/client/src/tiptap/extensions/search.ts b/packages/client/src/tiptap/extensions/search.ts index 285e5f6e..5d49efb0 100644 --- a/packages/client/src/tiptap/extensions/search.ts +++ b/packages/client/src/tiptap/extensions/search.ts @@ -23,6 +23,7 @@ declare module '@tiptap/core' { * @description Replace all instances of search result with given replace term. */ replaceAll: () => ReturnType; + goToPrevSearchResult: () => void; goToNextSearchResult: () => void; }; } diff --git a/packages/client/src/tiptap/menubar.tsx b/packages/client/src/tiptap/menubar.tsx index 1f164c42..b257235b 100644 --- a/packages/client/src/tiptap/menubar.tsx +++ b/packages/client/src/tiptap/menubar.tsx @@ -1,25 +1,41 @@ import React from 'react'; -import { Space, Button } from '@douyinfe/semi-ui'; -import { IconUndo, IconRedo } from '@douyinfe/semi-icons'; -import { Tooltip } from 'components/tooltip'; -import { IconClear } from 'components/icons'; +import { Space } from '@douyinfe/semi-ui'; import { Divider } from './divider'; -import { MediaInsertMenu } from './menus/media-insert'; -import { Paragraph } from './menus/paragraph'; -import { FontSize } from './menus/font-size'; -import { BaseMenu } from './menus/base-menu'; -import { AlignMenu } from './menus/align'; -import { ListMenu } from './menus/list'; -import { BaseInsertMenu } from './menus/base-insert'; -import { BaseBubbleMenu } from './menus/base-bubble-menu'; -import { ImageBubbleMenu } from './menus/image'; -import { BannerBubbleMenu } from './menus/banner'; -import { LinkBubbleMenu } from './menus/link'; -import { IframeBubbleMenu } from './menus/iframe'; -import { TableBubbleMenu } from './menus/table'; -import { CountdownBubbleMenu } from './menus/countdown'; -import { CountdownSettingModal } from './menus/countdown-setting'; +import { Insert } from './menus/insert'; +import { Undo } from './menus/undo'; +import { Redo } from './menus/redo'; +import { CleadrNodeAndMarks } from './menus/clear-node-and-marks'; + +import { Heading } from './menus/heading'; +import { FontSize } from './menus/fontsize'; +import { Bold } from './menus/bold'; +import { Italic } from './menus/italic'; +import { Underline } from './menus/underline'; +import { Strike } from './menus/strike'; +import { Code } from './menus/code'; +import { Superscript } from './menus/superscript'; +import { Subscript } from './menus/subscript'; +import { TextColor } from './menus/text-color'; +import { BackgroundColor } from './menus/background-color'; + +import { Align } from './menus/align'; + +import { BulletList } from './menus/bullet-list'; +import { OrderedList } from './menus/ordered-list'; +import { TaskList } from './menus/task-list'; +import { Ident } from './menus/ident'; + +import { Emoji } from './menus/emoji'; +import { Link } from './menus/link'; +import { Blockquote } from './menus/blockquote'; +import { HorizontalRule } from './menus/horizontal-rule'; +import { Search } from './menus/search'; + +import { Countdonw } from './menus/countdown'; +import { Image } from './menus/image'; +import { Iframe } from './menus/iframe'; +import { Table } from './menus/table'; export const MenuBar: React.FC<{ editor: any }> = ({ editor }) => { if (!editor) { @@ -29,63 +45,52 @@ export const MenuBar: React.FC<{ editor: any }> = ({ editor }) => { return (
- + - -