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 { 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<any>;
data?: Record<string, unknown>;
}
declare module '@tiptap/core' {

View File

@ -11,8 +11,8 @@ const { Text } = Typography;
export const ExcalidrawSettingModal: React.FC<IProps> = ({ 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<IProps> = ({ 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<IProps> = ({ 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<IProps> = ({ editor }) => {
onOk={save}
okText="保存"
cancelText="退出"
motion={false}
>
<div style={{ height: '100%', margin: '0 -24px', border: '1px solid var(--semi-color-border)' }}>
{loading && (
@ -89,15 +93,7 @@ export const ExcalidrawSettingModal: React.FC<IProps> = ({ editor }) => {
{error && <Text>{(error && error.message) || '未知错误'}</Text>}
<div style={{ width: '100%', height: '100%' }} ref={renderEditor}>
{!loading && !error && Excalidraw ? (
<Excalidraw
ref={renderExcalidraw}
onChange={onChange}
langCode="zh-CN"
initialData={{
appState: { isLoading: false },
elements: initialData,
}}
/>
<Excalidraw ref={renderExcalidraw} onChange={onChange} langCode="zh-CN" initialData={initialData} />
) : null}
</div>
</div>

View File

@ -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%');