diff --git a/packages/client/src/tiptap/extensions/katex.ts b/packages/client/src/tiptap/extensions/katex.ts index faefe7f5..bab1373d 100644 --- a/packages/client/src/tiptap/extensions/katex.ts +++ b/packages/client/src/tiptap/extensions/katex.ts @@ -5,6 +5,7 @@ import { KatexWrapper } from '../wrappers/katex'; type IKatexAttrs = { text?: string; defaultShowPicker?: boolean; + createUser: string; }; declare module '@tiptap/core' { @@ -43,6 +44,9 @@ export const Katex = Node.create({ defaultShowPicker: { default: false, }, + createUser: { + default: null, + }, }; }, @@ -57,7 +61,7 @@ export const Katex = Node.create({ addCommands() { return { setKatex: - (options = {}) => + (options) => ({ commands }) => { return commands.insertContent({ type: this.name, diff --git a/packages/client/src/tiptap/extensions/quick-insert.tsx b/packages/client/src/tiptap/extensions/quick-insert.tsx index 43fd95b5..695f4928 100644 --- a/packages/client/src/tiptap/extensions/quick-insert.tsx +++ b/packages/client/src/tiptap/extensions/quick-insert.tsx @@ -26,7 +26,7 @@ export const QuickInsert = Node.create({ const $from = state.selection.$from; const tr = state.tr.deleteRange($from.start(), $from.pos); dispatch(tr); - props?.command(editor); + props?.command(editor, props.user); editor?.view?.focus(); }, }, diff --git a/packages/client/src/tiptap/extensions/status.ts b/packages/client/src/tiptap/extensions/status.ts index 5879a049..9c115088 100644 --- a/packages/client/src/tiptap/extensions/status.ts +++ b/packages/client/src/tiptap/extensions/status.ts @@ -7,6 +7,7 @@ type IStatusAttrs = { color?: string; text?: string; defaultShowPicker?: boolean; + createUser: string; }; declare module '@tiptap/core' { @@ -37,6 +38,9 @@ export const Status = Node.create({ defaultShowPicker: { default: false, }, + createUser: { + default: null, + }, }; }, @@ -63,7 +67,7 @@ export const Status = Node.create({ addCommands() { return { setStatus: - (options = {}) => + (options) => ({ commands }) => { return commands.insertContent({ type: this.name, diff --git a/packages/client/src/tiptap/menus/insert/index.tsx b/packages/client/src/tiptap/menus/insert/index.tsx index d8c3bc76..b2f0132e 100644 --- a/packages/client/src/tiptap/menus/insert/index.tsx +++ b/packages/client/src/tiptap/menus/insert/index.tsx @@ -18,6 +18,7 @@ import { } from 'components/icons'; import { GridSelect } from 'components/grid-select'; import { useToggle } from 'hooks/use-toggle'; +import { useUser } from 'data/user'; import { createKeysLocalStorageLRUCache } from 'helpers/lru-cache'; import { isTitleActive } from '../../utils/is-active'; import { createCountdown } from '../countdown/service'; @@ -92,12 +93,13 @@ const COMMANDS = [ { icon: , label: '数学公式', - action: (editor) => editor.chain().focus().setKatex({ defaultShowPicker: true }).run(), + action: (editor, user) => editor.chain().focus().setKatex({ defaultShowPicker: true, createUser: user.name }).run(), }, { icon: , label: '状态', - action: (editor) => editor.chain().focus().setStatus({ defaultShowPicker: true }).run(), + action: (editor, user) => + editor.chain().focus().setStatus({ defaultShowPicker: true, createUser: user.name }).run(), }, { icon: , @@ -120,6 +122,7 @@ const COMMANDS = [ ]; export const Insert: React.FC<{ editor: Editor }> = ({ editor }) => { + const { user } = useUser(); const [recentUsed, setRecentUsed] = useState([]); const [visible, toggleVisible] = useToggle(false); @@ -141,7 +144,7 @@ export const Insert: React.FC<{ editor: Editor }> = ({ editor }) => { return () => { insertMenuLRUCache.put(command.label); setRecentUsed(transformToCommands(insertMenuLRUCache.get() as string[])); - command.action(editor); + command.action(editor, user); toggleVisible(false); }; }, diff --git a/packages/client/src/tiptap/menus/quick-insert.tsx b/packages/client/src/tiptap/menus/quick-insert.tsx index 1d180401..25977b1d 100644 --- a/packages/client/src/tiptap/menus/quick-insert.tsx +++ b/packages/client/src/tiptap/menus/quick-insert.tsx @@ -209,14 +209,19 @@ export const QUICK_INSERT_ITEMS = [ 数学公式 ), - command: (editor: Editor) => + command: (editor: Editor, user) => { + console.log('user', user); + if (!user) return; + editor .chain() .focus() .setKatex({ defaultShowPicker: true, + createUser: user.name, }) - .run(), + .run(); + }, }, { @@ -227,14 +232,18 @@ export const QUICK_INSERT_ITEMS = [ 状态 ), - command: (editor: Editor) => + command: (editor: Editor, user) => { + if (!user) return; + editor .chain() .focus() .setStatus({ defaultShowPicker: true, + createUser: user.name, }) - .run(), + .run(); + }, }, { diff --git a/packages/client/src/tiptap/wrappers/katex/index.tsx b/packages/client/src/tiptap/wrappers/katex/index.tsx index 746ebbcf..972345e7 100644 --- a/packages/client/src/tiptap/wrappers/katex/index.tsx +++ b/packages/client/src/tiptap/wrappers/katex/index.tsx @@ -5,13 +5,15 @@ import { Popover, TextArea, Typography, Space } from '@douyinfe/semi-ui'; import { IconHelpCircle } from '@douyinfe/semi-icons'; import katex from 'katex'; import { useToggle } from 'hooks/use-toggle'; +import { useUser } from 'data/user'; import styles from './index.module.scss'; const { Text } = Typography; export const KatexWrapper = ({ editor, node, updateAttributes }) => { const isEditable = editor.isEditable; - const { text, defaultShowPicker } = node.attrs; + const { text, defaultShowPicker, createUser } = node.attrs; + const { user } = useUser(); const ref = useRef(); const [visible, toggleVisible] = useToggle(false); @@ -36,19 +38,19 @@ export const KatexWrapper = ({ editor, node, updateAttributes }) => { const onVisibleChange = useCallback( (value) => { toggleVisible(value); - if (defaultShowPicker) { + if (defaultShowPicker && user && createUser === user.name) { updateAttributes({ defaultShowPicker: false }); } }, - [defaultShowPicker, updateAttributes] + [defaultShowPicker, updateAttributes, createUser, user] ); useEffect(() => { - if (defaultShowPicker) { + if (defaultShowPicker && user && createUser === user.name) { toggleVisible(true); setTimeout(() => ref.current?.focus(), 100); } - }, [defaultShowPicker]); + }, [defaultShowPicker, createUser, user]); return ( diff --git a/packages/client/src/tiptap/wrappers/menu-list/index.tsx b/packages/client/src/tiptap/wrappers/menu-list/index.tsx index 0b17fd14..45717fdb 100644 --- a/packages/client/src/tiptap/wrappers/menu-list/index.tsx +++ b/packages/client/src/tiptap/wrappers/menu-list/index.tsx @@ -2,6 +2,7 @@ import { Editor } from '@tiptap/core'; import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react'; import cls from 'classnames'; import scrollIntoView from 'scroll-into-view-if-needed'; +import { useUser } from 'data/user'; import styles from './index.module.scss'; interface IProps { @@ -11,6 +12,7 @@ interface IProps { } export const MenuList: React.FC = forwardRef((props, ref) => { + const { user } = useUser(); const $container = useRef(); const [selectedIndex, setSelectedIndex] = useState(0); @@ -18,6 +20,8 @@ export const MenuList: React.FC = forwardRef((props, ref) => { const item = props.items[index]; if (item) { + // @ts-ignore + item.user = user; // 注入用户信息 props.command(item); } }; diff --git a/packages/client/src/tiptap/wrappers/status/index.tsx b/packages/client/src/tiptap/wrappers/status/index.tsx index 39554cb8..c8d7aa14 100644 --- a/packages/client/src/tiptap/wrappers/status/index.tsx +++ b/packages/client/src/tiptap/wrappers/status/index.tsx @@ -1,9 +1,10 @@ import { NodeViewWrapper, NodeViewContent } from '@tiptap/react'; import { Button, Collapsible, Space, Popover, Tag, Input } from '@douyinfe/semi-ui'; import cls from 'classnames'; +import { useCallback, useEffect, useRef } from 'react'; +import { useUser } from 'data/user'; import { useToggle } from 'hooks/use-toggle'; import styles from './index.module.scss'; -import { useCallback, useEffect, useRef } from 'react'; const colors = [ '#F5222D', @@ -52,7 +53,8 @@ const colors = [ export const StatusWrapper = ({ editor, node, updateAttributes }) => { const isEditable = editor.isEditable; - const { color, text, defaultShowPicker } = node.attrs; + const { color, text, defaultShowPicker, createUser } = node.attrs; + const { user } = useUser(); const ref = useRef(); const [visible, toggleVisible] = useToggle(false); const [isOpen, toggleOpen] = useToggle(false); @@ -66,19 +68,19 @@ export const StatusWrapper = ({ editor, node, updateAttributes }) => { const onVisibleChange = useCallback( (value) => { toggleVisible(value); - if (defaultShowPicker) { + if (defaultShowPicker && user && user.name === createUser) { updateAttributes({ defaultShowPicker: false }); } }, - [defaultShowPicker, updateAttributes] + [defaultShowPicker, updateAttributes, createUser, user] ); useEffect(() => { - if (defaultShowPicker) { + if (defaultShowPicker && user && user.name === createUser) { toggleVisible(true); setTimeout(() => ref.current?.focus(), 100); } - }, [defaultShowPicker]); + }, [defaultShowPicker, createUser, user]); useEffect(() => { if (visible) {