diff --git a/packages/client/src/tiptap/core/extensions/excalidraw.ts b/packages/client/src/tiptap/core/extensions/excalidraw.ts index 5f8e693..e5b227f 100644 --- a/packages/client/src/tiptap/core/extensions/excalidraw.ts +++ b/packages/client/src/tiptap/core/extensions/excalidraw.ts @@ -4,14 +4,14 @@ import { ReactNodeViewRenderer } from '@tiptap/react'; import { ExcalidrawWrapper } from 'tiptap/core/wrappers/excalidraw'; import { getDatasetAttribute } from 'tiptap/prose-utils'; -const DEFAULT_MIND_DATA = []; +const DEFAULT_MIND_DATA = { elements: [] }; export interface IExcalidrawAttrs { defaultShowPicker?: boolean; createUser?: IUser['id']; width?: number | string; height?: number; - data?: Array; + data?: Record; } declare module '@tiptap/core' { diff --git a/packages/client/src/tiptap/core/menus/excalidraw/modal.tsx b/packages/client/src/tiptap/core/menus/excalidraw/modal.tsx index 91c1e9f..0cf5b89 100644 --- a/packages/client/src/tiptap/core/menus/excalidraw/modal.tsx +++ b/packages/client/src/tiptap/core/menus/excalidraw/modal.tsx @@ -11,8 +11,8 @@ const { Text } = Typography; export const ExcalidrawSettingModal: React.FC = ({ editor }) => { const [Excalidraw, setExcalidraw] = useState(null); - const [elements, setElements] = useState([]); - const [initialData, setInitialData] = useState([]); + const [data, setData] = useState({}); + const [initialData, setInitialData] = useState({ elements: [], appState: { isLoading: false }, files: null }); const [visible, toggleVisible] = useToggle(false); const [loading, toggleLoading] = useToggle(true); const [error, setError] = useState(null); @@ -38,8 +38,14 @@ export const ExcalidrawSettingModal: React.FC = ({ editor }) => { }); }, []); - const onChange = useCallback((els) => { - setElements(els); + const onChange = useCallback((elements, appState, files) => { + // excalidraw 导出的是 {},实际上应该是 [] + // appState.collaborators = []; + setData({ + elements, + appState: { isLoading: false }, + files, + }); }, []); const save = useCallback(() => { @@ -48,12 +54,9 @@ export const ExcalidrawSettingModal: React.FC = ({ editor }) => { return; } - if (elements.filter((el) => !el.isDeleted).length > 0) { - editor.chain().focus().setExcalidraw({ data: elements }).run(); - } - + editor.chain().focus().setExcalidraw({ data }).run(); toggleVisible(false); - }, [Excalidraw, editor, elements, toggleVisible]); + }, [Excalidraw, editor, data, toggleVisible]); useEffect(() => { const handler = (data) => { @@ -78,6 +81,7 @@ export const ExcalidrawSettingModal: React.FC = ({ editor }) => { onOk={save} okText="保存" cancelText="退出" + motion={false} >
{loading && ( @@ -89,15 +93,7 @@ export const ExcalidrawSettingModal: React.FC = ({ editor }) => { {error && {(error && error.message) || '未知错误'}}
{!loading && !error && Excalidraw ? ( - + ) : null}
diff --git a/packages/client/src/tiptap/core/wrappers/excalidraw/index.tsx b/packages/client/src/tiptap/core/wrappers/excalidraw/index.tsx index 2b20157..4daeced 100644 --- a/packages/client/src/tiptap/core/wrappers/excalidraw/index.tsx +++ b/packages/client/src/tiptap/core/wrappers/excalidraw/index.tsx @@ -53,12 +53,9 @@ export const ExcalidrawWrapper = ({ editor, node, updateAttributes }) => { useEffect(() => { const setContent = async () => { - if (loading || error || !visible || !data || !data.length) return; + if (loading || error || !visible || !data) return; - const svg: SVGElement = await exportToSvgRef.current({ - elements: data, - files: null, - }); + const svg: SVGElement = await exportToSvgRef.current(data); svg.setAttribute('width', '100%'); svg.setAttribute('height', '100%');