tiptap: fix excalidraw

feat/excalidraw
fantasticit 2022-08-15 12:11:22 +08:00
parent cf1a234062
commit 3a0a0c2203
3 changed files with 18 additions and 25 deletions

View File

@ -4,14 +4,14 @@ import { ReactNodeViewRenderer } from '@tiptap/react';
import { ExcalidrawWrapper } from 'tiptap/core/wrappers/excalidraw'; import { ExcalidrawWrapper } from 'tiptap/core/wrappers/excalidraw';
import { getDatasetAttribute } from 'tiptap/prose-utils'; import { getDatasetAttribute } from 'tiptap/prose-utils';
const DEFAULT_MIND_DATA = []; const DEFAULT_MIND_DATA = { elements: [] };
export interface IExcalidrawAttrs { export interface IExcalidrawAttrs {
defaultShowPicker?: boolean; defaultShowPicker?: boolean;
createUser?: IUser['id']; createUser?: IUser['id'];
width?: number | string; width?: number | string;
height?: number; height?: number;
data?: Array<any>; data?: Record<string, unknown>;
} }
declare module '@tiptap/core' { declare module '@tiptap/core' {

View File

@ -11,8 +11,8 @@ const { Text } = Typography;
export const ExcalidrawSettingModal: React.FC<IProps> = ({ editor }) => { export const ExcalidrawSettingModal: React.FC<IProps> = ({ editor }) => {
const [Excalidraw, setExcalidraw] = useState(null); const [Excalidraw, setExcalidraw] = useState(null);
const [elements, setElements] = useState([]); const [data, setData] = useState({});
const [initialData, setInitialData] = useState([]); const [initialData, setInitialData] = useState({ elements: [], appState: { isLoading: false }, files: null });
const [visible, toggleVisible] = useToggle(false); const [visible, toggleVisible] = useToggle(false);
const [loading, toggleLoading] = useToggle(true); const [loading, toggleLoading] = useToggle(true);
const [error, setError] = useState(null); const [error, setError] = useState(null);
@ -38,8 +38,14 @@ export const ExcalidrawSettingModal: React.FC<IProps> = ({ editor }) => {
}); });
}, []); }, []);
const onChange = useCallback((els) => { const onChange = useCallback((elements, appState, files) => {
setElements(els); // excalidraw 导出的是 {},实际上应该是 []
// appState.collaborators = [];
setData({
elements,
appState: { isLoading: false },
files,
});
}, []); }, []);
const save = useCallback(() => { const save = useCallback(() => {
@ -48,12 +54,9 @@ export const ExcalidrawSettingModal: React.FC<IProps> = ({ editor }) => {
return; return;
} }
if (elements.filter((el) => !el.isDeleted).length > 0) { editor.chain().focus().setExcalidraw({ data }).run();
editor.chain().focus().setExcalidraw({ data: elements }).run();
}
toggleVisible(false); toggleVisible(false);
}, [Excalidraw, editor, elements, toggleVisible]); }, [Excalidraw, editor, data, toggleVisible]);
useEffect(() => { useEffect(() => {
const handler = (data) => { const handler = (data) => {
@ -78,6 +81,7 @@ export const ExcalidrawSettingModal: React.FC<IProps> = ({ editor }) => {
onOk={save} onOk={save}
okText="保存" okText="保存"
cancelText="退出" cancelText="退出"
motion={false}
> >
<div style={{ height: '100%', margin: '0 -24px', border: '1px solid var(--semi-color-border)' }}> <div style={{ height: '100%', margin: '0 -24px', border: '1px solid var(--semi-color-border)' }}>
{loading && ( {loading && (
@ -89,15 +93,7 @@ export const ExcalidrawSettingModal: React.FC<IProps> = ({ editor }) => {
{error && <Text>{(error && error.message) || '未知错误'}</Text>} {error && <Text>{(error && error.message) || '未知错误'}</Text>}
<div style={{ width: '100%', height: '100%' }} ref={renderEditor}> <div style={{ width: '100%', height: '100%' }} ref={renderEditor}>
{!loading && !error && Excalidraw ? ( {!loading && !error && Excalidraw ? (
<Excalidraw <Excalidraw ref={renderExcalidraw} onChange={onChange} langCode="zh-CN" initialData={initialData} />
ref={renderExcalidraw}
onChange={onChange}
langCode="zh-CN"
initialData={{
appState: { isLoading: false },
elements: initialData,
}}
/>
) : null} ) : null}
</div> </div>
</div> </div>

View File

@ -53,12 +53,9 @@ export const ExcalidrawWrapper = ({ editor, node, updateAttributes }) => {
useEffect(() => { useEffect(() => {
const setContent = async () => { const setContent = async () => {
if (loading || error || !visible || !data || !data.length) return; if (loading || error || !visible || !data) return;
const svg: SVGElement = await exportToSvgRef.current({ const svg: SVGElement = await exportToSvgRef.current(data);
elements: data,
files: null,
});
svg.setAttribute('width', '100%'); svg.setAttribute('width', '100%');
svg.setAttribute('height', '100%'); svg.setAttribute('height', '100%');