From cf1a2340629e3d2b55a5e65da8c6b06b9c406983 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Sat, 13 Aug 2022 14:27:54 +0800
Subject: [PATCH 1/2] tiptap: add excalidraw

---
 packages/client/package.json                  |   1 +
 packages/client/src/styles/globals.scss       |   4 +
 .../src/tiptap/core/extensions/excalidraw.ts  | 114 +++++++++++++++++
 .../client/src/tiptap/core/menus/_event.ts    |   6 +
 .../client/src/tiptap/core/menus/commands.tsx |   8 ++
 .../tiptap/core/menus/excalidraw/bubble.tsx   |  82 +++++++++++++
 .../tiptap/core/menus/excalidraw/index.tsx    |  14 +++
 .../tiptap/core/menus/excalidraw/modal.tsx    | 106 ++++++++++++++++
 .../client/src/tiptap/core/styles/node.scss   |   6 +-
 .../src/tiptap/core/styles/selection.scss     |   3 +-
 .../wrappers/excalidraw/index.module.scss     |  33 +++++
 .../tiptap/core/wrappers/excalidraw/index.tsx | 116 ++++++++++++++++++
 .../collaboration/collaboration/menubar.tsx   |   2 +
 .../src/tiptap/editor/collaboration/kit.ts    |   2 +
 pnpm-lock.yaml                                |  13 ++
 15 files changed, 507 insertions(+), 3 deletions(-)
 create mode 100644 packages/client/src/tiptap/core/extensions/excalidraw.ts
 create mode 100644 packages/client/src/tiptap/core/menus/excalidraw/bubble.tsx
 create mode 100644 packages/client/src/tiptap/core/menus/excalidraw/index.tsx
 create mode 100644 packages/client/src/tiptap/core/menus/excalidraw/modal.tsx
 create mode 100644 packages/client/src/tiptap/core/wrappers/excalidraw/index.module.scss
 create mode 100644 packages/client/src/tiptap/core/wrappers/excalidraw/index.tsx

diff --git a/packages/client/package.json b/packages/client/package.json
index 6035a2ad..8db59a5b 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -11,6 +11,7 @@
     "@douyinfe/semi-icons": "^2.3.1",
     "@douyinfe/semi-next": "^2.3.1",
     "@douyinfe/semi-ui": "^2.3.1",
+    "@excalidraw/excalidraw": "^0.12.0",
     "@hocuspocus/provider": "^1.0.0-alpha.29",
     "@think/config": "workspace:^1.0.0",
     "@think/constants": "workspace:^1.0.0",
diff --git a/packages/client/src/styles/globals.scss b/packages/client/src/styles/globals.scss
index 37e34317..81714f1d 100644
--- a/packages/client/src/styles/globals.scss
+++ b/packages/client/src/styles/globals.scss
@@ -141,3 +141,7 @@
     background-color: transparent;
   }
 }
+
+.excalidraw.excalidraw-modal-container {
+  z-index: 1010 !important;
+}
diff --git a/packages/client/src/tiptap/core/extensions/excalidraw.ts b/packages/client/src/tiptap/core/extensions/excalidraw.ts
new file mode 100644
index 00000000..5f8e6931
--- /dev/null
+++ b/packages/client/src/tiptap/core/extensions/excalidraw.ts
@@ -0,0 +1,114 @@
+import { IUser } from '@think/domains';
+import { mergeAttributes, Node, nodeInputRule } from '@tiptap/core';
+import { ReactNodeViewRenderer } from '@tiptap/react';
+import { ExcalidrawWrapper } from 'tiptap/core/wrappers/excalidraw';
+import { getDatasetAttribute } from 'tiptap/prose-utils';
+
+const DEFAULT_MIND_DATA = [];
+
+export interface IExcalidrawAttrs {
+  defaultShowPicker?: boolean;
+  createUser?: IUser['id'];
+  width?: number | string;
+  height?: number;
+  data?: Array<any>;
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    excalidraw: {
+      setExcalidraw: (attrs?: IExcalidrawAttrs) => ReturnType;
+    };
+  }
+}
+
+export const Excalidraw = Node.create({
+  name: 'excalidraw',
+  group: 'block',
+  selectable: true,
+  atom: true,
+  draggable: true,
+  inline: false,
+
+  addAttributes() {
+    return {
+      defaultShowPicker: {
+        default: false,
+      },
+      createUser: {
+        default: null,
+      },
+      width: {
+        default: '100%',
+        parseHTML: getDatasetAttribute('width'),
+      },
+      height: {
+        default: 240,
+        parseHTML: getDatasetAttribute('height'),
+      },
+      data: {
+        default: DEFAULT_MIND_DATA,
+        parseHTML: getDatasetAttribute('data', true),
+      },
+    };
+  },
+
+  addOptions() {
+    return {
+      HTMLAttributes: {
+        class: 'mind',
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div[class=mind]',
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
+  },
+
+  addCommands() {
+    return {
+      setExcalidraw:
+        (options) =>
+        ({ tr, commands, chain, editor }) => {
+          options = options || {};
+          options.data = options.data || DEFAULT_MIND_DATA;
+
+          // @ts-ignore
+          if (tr.selection?.node?.type?.name == this.name) {
+            return commands.updateAttributes(this.name, options);
+          }
+
+          return chain()
+            .insertContent({
+              type: this.name,
+              attrs: options,
+            })
+            .run();
+        },
+    };
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(ExcalidrawWrapper);
+  },
+
+  addInputRules() {
+    return [
+      nodeInputRule({
+        find: /^\$excalidraw $/,
+        type: this.type,
+        getAttributes: () => {
+          return { width: '100%' };
+        },
+      }),
+    ];
+  },
+});
diff --git a/packages/client/src/tiptap/core/menus/_event.ts b/packages/client/src/tiptap/core/menus/_event.ts
index fe687da4..e0f3ec8f 100644
--- a/packages/client/src/tiptap/core/menus/_event.ts
+++ b/packages/client/src/tiptap/core/menus/_event.ts
@@ -14,6 +14,7 @@ export const OPEN_COUNT_SETTING_MODAL = 'OPEN_COUNT_SETTING_MODAL';
 export const OPEN_LINK_SETTING_MODAL = 'OPEN_LINK_SETTING_MODAL';
 export const OPEN_FLOW_SETTING_MODAL = 'OPEN_FLOW_SETTING_MODAL';
 export const OPEN_MIND_SETTING_MODAL = 'OPEN_MIND_SETTING_MODAL';
+export const OPEN_EXCALIDRAW_SETTING_MODAL = 'OPEN_EXCALIDRAW_SETTING_MODAL';
 
 export const subject = (editor: Editor, eventName, handler) => {
   const event = getEventEmitter(editor);
@@ -44,3 +45,8 @@ export const triggerOpenMindSettingModal = (editor: Editor, data) => {
   const event = getEventEmitter(editor);
   event.emit(OPEN_MIND_SETTING_MODAL, data);
 };
+
+export const triggerOpenExcalidrawSettingModal = (editor: Editor, data) => {
+  const event = getEventEmitter(editor);
+  event.emit(OPEN_EXCALIDRAW_SETTING_MODAL, data);
+};
diff --git a/packages/client/src/tiptap/core/menus/commands.tsx b/packages/client/src/tiptap/core/menus/commands.tsx
index fb6a9201..a09896be 100644
--- a/packages/client/src/tiptap/core/menus/commands.tsx
+++ b/packages/client/src/tiptap/core/menus/commands.tsx
@@ -135,6 +135,14 @@ export const COMMANDS: ICommand[] = [
       editor.chain().focus().setMind({ width: '100%', defaultShowPicker: true, createUser: user.id }).run();
     },
   },
+  {
+    isBlock: true,
+    icon: <IconMind />,
+    label: '绘图',
+    action: (editor, user) => {
+      editor.chain().focus().setExcalidraw({ width: '100%', defaultShowPicker: true, createUser: user.id }).run();
+    },
+  },
   {
     isBlock: true,
     icon: <IconMath />,
diff --git a/packages/client/src/tiptap/core/menus/excalidraw/bubble.tsx b/packages/client/src/tiptap/core/menus/excalidraw/bubble.tsx
new file mode 100644
index 00000000..d8ac58a4
--- /dev/null
+++ b/packages/client/src/tiptap/core/menus/excalidraw/bubble.tsx
@@ -0,0 +1,82 @@
+import { IconCopy, IconDelete, IconEdit, IconLineHeight } from '@douyinfe/semi-icons';
+import { Button, Space } from '@douyinfe/semi-ui';
+import { Divider } from 'components/divider';
+import { SizeSetter } from 'components/size-setter';
+import { Tooltip } from 'components/tooltip';
+import { useUser } from 'data/user';
+import { useCallback, useEffect } from 'react';
+import { BubbleMenu } from 'tiptap/core/bubble-menu';
+import { Excalidraw, IExcalidrawAttrs } from 'tiptap/core/extensions/excalidraw';
+import { useAttributes } from 'tiptap/core/hooks/use-attributes';
+import { copyNode, deleteNode, getEditorContainerDOMSize } from 'tiptap/prose-utils';
+
+import { triggerOpenExcalidrawSettingModal } from '../_event';
+
+export const ExcalidrawBubbleMenu = ({ editor }) => {
+  const { width: maxWidth } = getEditorContainerDOMSize(editor);
+  const attrs = useAttributes<IExcalidrawAttrs>(editor, Excalidraw.name, {
+    defaultShowPicker: false,
+    createUser: '',
+    width: 0,
+    height: 0,
+  });
+  const { defaultShowPicker, createUser, width, height } = attrs;
+  const { user } = useUser();
+
+  const setSize = useCallback(
+    (size) => {
+      editor
+        .chain()
+        .updateAttributes(Excalidraw.name, size)
+        .setNodeSelection(editor.state.selection.from)
+        .focus()
+        .run();
+    },
+    [editor]
+  );
+  const openEditLinkModal = useCallback(() => {
+    triggerOpenExcalidrawSettingModal(editor, attrs);
+  }, [editor, attrs]);
+  const shouldShow = useCallback(() => editor.isActive(Excalidraw.name), [editor]);
+  const copyMe = useCallback(() => copyNode(Excalidraw.name, editor), [editor]);
+  const deleteMe = useCallback(() => deleteNode(Excalidraw.name, editor), [editor]);
+
+  useEffect(() => {
+    if (defaultShowPicker && user && createUser === user.id) {
+      openEditLinkModal();
+      editor.chain().updateAttributes(Excalidraw.name, { defaultShowPicker: false }).focus().run();
+    }
+  }, [createUser, defaultShowPicker, editor, openEditLinkModal, user]);
+
+  return (
+    <BubbleMenu
+      className={'bubble-menu'}
+      editor={editor}
+      pluginKey="flow-bubble-menu"
+      shouldShow={shouldShow}
+      tippyOptions={{ maxWidth: 'calc(100vw - 100px)' }}
+    >
+      <Space spacing={4}>
+        <Tooltip content="复制">
+          <Button onClick={copyMe} icon={<IconCopy />} type="tertiary" theme="borderless" size="small" />
+        </Tooltip>
+
+        <Tooltip content="编辑">
+          <Button size="small" type="tertiary" theme="borderless" icon={<IconEdit />} onClick={openEditLinkModal} />
+        </Tooltip>
+
+        <SizeSetter width={width} maxWidth={maxWidth} height={height} onOk={setSize}>
+          <Tooltip content="设置宽高">
+            <Button icon={<IconLineHeight />} type="tertiary" theme="borderless" size="small" />
+          </Tooltip>
+        </SizeSetter>
+
+        <Divider />
+
+        <Tooltip content="删除节点" hideOnClick>
+          <Button onClick={deleteMe} icon={<IconDelete />} type="tertiary" theme="borderless" size="small" />
+        </Tooltip>
+      </Space>
+    </BubbleMenu>
+  );
+};
diff --git a/packages/client/src/tiptap/core/menus/excalidraw/index.tsx b/packages/client/src/tiptap/core/menus/excalidraw/index.tsx
new file mode 100644
index 00000000..3c786fdb
--- /dev/null
+++ b/packages/client/src/tiptap/core/menus/excalidraw/index.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Editor } from 'tiptap/core';
+
+import { ExcalidrawBubbleMenu } from './bubble';
+import { ExcalidrawSettingModal } from './modal';
+
+export const Excalidraw: React.FC<{ editor: Editor }> = ({ editor }) => {
+  return (
+    <>
+      <ExcalidrawBubbleMenu editor={editor} />
+      <ExcalidrawSettingModal editor={editor} />
+    </>
+  );
+};
diff --git a/packages/client/src/tiptap/core/menus/excalidraw/modal.tsx b/packages/client/src/tiptap/core/menus/excalidraw/modal.tsx
new file mode 100644
index 00000000..91c1e9f5
--- /dev/null
+++ b/packages/client/src/tiptap/core/menus/excalidraw/modal.tsx
@@ -0,0 +1,106 @@
+import { Modal, Spin, Typography } from '@douyinfe/semi-ui';
+import { useToggle } from 'hooks/use-toggle';
+import { useCallback, useEffect, useState } from 'react';
+import { Editor } from 'tiptap/core';
+
+import { cancelSubject, OPEN_EXCALIDRAW_SETTING_MODAL, subject } from '../_event';
+
+type IProps = { editor: Editor };
+
+const { Text } = Typography;
+
+export const ExcalidrawSettingModal: React.FC<IProps> = ({ editor }) => {
+  const [Excalidraw, setExcalidraw] = useState(null);
+  const [elements, setElements] = useState([]);
+  const [initialData, setInitialData] = useState([]);
+  const [visible, toggleVisible] = useToggle(false);
+  const [loading, toggleLoading] = useToggle(true);
+  const [error, setError] = useState(null);
+
+  const renderEditor = useCallback(
+    (div) => {
+      if (!div) return;
+
+      import('@excalidraw/excalidraw')
+        .then((res) => {
+          setExcalidraw(res.Excalidraw);
+        })
+        .catch(setError)
+        .finally(() => toggleLoading(false));
+    },
+    [toggleLoading]
+  );
+
+  const renderExcalidraw = useCallback((app) => {
+    console.log('render', app);
+    setTimeout(() => {
+      app.refresh();
+    });
+  }, []);
+
+  const onChange = useCallback((els) => {
+    setElements(els);
+  }, []);
+
+  const save = useCallback(() => {
+    if (!Excalidraw) {
+      toggleVisible(false);
+      return;
+    }
+
+    if (elements.filter((el) => !el.isDeleted).length > 0) {
+      editor.chain().focus().setExcalidraw({ data: elements }).run();
+    }
+
+    toggleVisible(false);
+  }, [Excalidraw, editor, elements, toggleVisible]);
+
+  useEffect(() => {
+    const handler = (data) => {
+      toggleVisible(true);
+      data && setInitialData(data.data);
+    };
+
+    subject(editor, OPEN_EXCALIDRAW_SETTING_MODAL, handler);
+
+    return () => {
+      cancelSubject(editor, OPEN_EXCALIDRAW_SETTING_MODAL, handler);
+    };
+  }, [editor, toggleVisible]);
+
+  return (
+    <Modal
+      centered
+      title="绘图"
+      fullScreen
+      visible={visible}
+      onCancel={toggleVisible}
+      onOk={save}
+      okText="保存"
+      cancelText="退出"
+    >
+      <div style={{ height: '100%', margin: '0 -24px', border: '1px solid var(--semi-color-border)' }}>
+        {loading && (
+          <Spin spinning>
+            {/* FIXME: semi-design 的问题，不加 div，文字会换行! */}
+            <div></div>
+          </Spin>
+        )}
+        {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,
+              }}
+            />
+          ) : null}
+        </div>
+      </div>
+    </Modal>
+  );
+};
diff --git a/packages/client/src/tiptap/core/styles/node.scss b/packages/client/src/tiptap/core/styles/node.scss
index 5dbf6f04..ab41d86b 100644
--- a/packages/client/src/tiptap/core/styles/node.scss
+++ b/packages/client/src/tiptap/core/styles/node.scss
@@ -38,7 +38,8 @@
   .node-flow,
   .node-codeBlock,
   .node-documentChildren,
-  .node-documentReference {
+  .node-documentReference,
+  .node-excalidraw {
     margin-top: 0.75em;
   }
 
@@ -60,7 +61,8 @@
   .node-flow,
   .node-codeBlock,
   .node-documentChildren,
-  .node-documentReference {
+  .node-documentReference,
+  .node-excalidraw {
     .render-wrapper {
       position: relative;
       user-select: text;
diff --git a/packages/client/src/tiptap/core/styles/selection.scss b/packages/client/src/tiptap/core/styles/selection.scss
index e14fe53f..1160ff23 100644
--- a/packages/client/src/tiptap/core/styles/selection.scss
+++ b/packages/client/src/tiptap/core/styles/selection.scss
@@ -36,7 +36,8 @@
   .node-codeBlock,
   .node-documentChildren,
   .node-documentReference,
-  .node-status {
+  .node-status,
+  .node-excalidraw {
     &.selected-node {
       &:not(.has-focus) {
         ::selection {
diff --git a/packages/client/src/tiptap/core/wrappers/excalidraw/index.module.scss b/packages/client/src/tiptap/core/wrappers/excalidraw/index.module.scss
new file mode 100644
index 00000000..f9bdb171
--- /dev/null
+++ b/packages/client/src/tiptap/core/wrappers/excalidraw/index.module.scss
@@ -0,0 +1,33 @@
+.wrap {
+  position: relative;
+  max-width: 100%;
+  overflow: visible;
+  line-height: 0;
+
+  .renderWrap {
+    border: 1px solid var(--node-border-color);
+    border-radius: var(--border-radius);
+
+    &::after {
+      background-color: transparent !important;
+    }
+  }
+
+  .title {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    z-index: 2;
+
+    .icon {
+      display: flex;
+      width: 18px;
+      height: 18px;
+      color: #fff;
+      background-color: #f80;
+      border-radius: 2px;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
diff --git a/packages/client/src/tiptap/core/wrappers/excalidraw/index.tsx b/packages/client/src/tiptap/core/wrappers/excalidraw/index.tsx
new file mode 100644
index 00000000..2b201570
--- /dev/null
+++ b/packages/client/src/tiptap/core/wrappers/excalidraw/index.tsx
@@ -0,0 +1,116 @@
+import { Space, Spin, Typography } from '@douyinfe/semi-ui';
+import { NodeViewWrapper } from '@tiptap/react';
+import cls from 'classnames';
+import { IconMind } from 'components/icons';
+import { Resizeable } from 'components/resizeable';
+import { useToggle } from 'hooks/use-toggle';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import VisibilitySensor from 'react-visibility-sensor';
+import { Excalidraw } from 'tiptap/core/extensions/excalidraw';
+import { getEditorContainerDOMSize } from 'tiptap/prose-utils';
+
+import styles from './index.module.scss';
+
+const { Text } = Typography;
+
+const INHERIT_SIZE_STYLE = { width: '100%', height: '100%', maxWidth: '100%' };
+
+export const ExcalidrawWrapper = ({ editor, node, updateAttributes }) => {
+  const exportToSvgRef = useRef(null);
+  const isEditable = editor.isEditable;
+  const isActive = editor.isActive(Excalidraw.name);
+  const { width: maxWidth } = getEditorContainerDOMSize(editor);
+  const { data, width, height } = node.attrs;
+  const [Svg, setSvg] = useState<SVGElement | null>(null);
+  const [loading, toggleLoading] = useToggle(true);
+  const [error, setError] = useState<Error | null>(null);
+  const [visible, toggleVisible] = useToggle(false);
+
+  const onResize = useCallback(
+    (size) => {
+      updateAttributes({ width: size.width, height: size.height });
+    },
+    [updateAttributes]
+  );
+
+  const onViewportChange = useCallback(
+    (visible) => {
+      if (visible) {
+        toggleVisible(true);
+      }
+    },
+    [toggleVisible]
+  );
+
+  useEffect(() => {
+    import('@excalidraw/excalidraw')
+      .then((res) => {
+        exportToSvgRef.current = res.exportToSvg;
+      })
+      .catch(setError)
+      .finally(() => toggleLoading(false));
+  }, [toggleLoading, data]);
+
+  useEffect(() => {
+    const setContent = async () => {
+      if (loading || error || !visible || !data || !data.length) return;
+
+      const svg: SVGElement = await exportToSvgRef.current({
+        elements: data,
+        files: null,
+      });
+
+      svg.setAttribute('width', '100%');
+      svg.setAttribute('height', '100%');
+      svg.setAttribute('display', 'block');
+
+      setSvg(svg);
+    };
+    setContent();
+  }, [data, loading, error, visible]);
+
+  return (
+    <NodeViewWrapper className={cls(styles.wrap, isActive && styles.isActive)}>
+      <VisibilitySensor onChange={onViewportChange}>
+        <Resizeable isEditable={isEditable} width={width} height={height} maxWidth={maxWidth} onChangeEnd={onResize}>
+          <div
+            className={cls(styles.renderWrap, 'render-wrapper')}
+            style={{ ...INHERIT_SIZE_STYLE, overflow: 'hidden' }}
+          >
+            {error && (
+              <div style={INHERIT_SIZE_STYLE}>
+                <Text>{error.message || error}</Text>
+              </div>
+            )}
+
+            {loading && <Spin spinning style={INHERIT_SIZE_STYLE}></Spin>}
+
+            {!loading && !error && visible && (
+              <div
+                style={{
+                  height: '100%',
+                  maxHeight: '100%',
+                  padding: 24,
+                  overflow: 'hidden',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                }}
+                dangerouslySetInnerHTML={{ __html: Svg?.outerHTML ?? '' }}
+              />
+            )}
+
+            <div className={styles.title}>
+              <Space>
+                <span className={styles.icon}>
+                  <IconMind />
+                </span>
+                绘图
+              </Space>
+            </div>
+          </div>
+        </Resizeable>
+      </VisibilitySensor>
+    </NodeViewWrapper>
+  );
+};
diff --git a/packages/client/src/tiptap/editor/collaboration/collaboration/menubar.tsx b/packages/client/src/tiptap/editor/collaboration/collaboration/menubar.tsx
index fdcc9e88..7f017724 100644
--- a/packages/client/src/tiptap/editor/collaboration/collaboration/menubar.tsx
+++ b/packages/client/src/tiptap/editor/collaboration/collaboration/menubar.tsx
@@ -16,6 +16,7 @@ import { Countdonw } from 'tiptap/core/menus/countdown';
 import { DocumentChildren } from 'tiptap/core/menus/document-children';
 import { DocumentReference } from 'tiptap/core/menus/document-reference';
 import { Emoji } from 'tiptap/core/menus/emoji';
+import { Excalidraw } from 'tiptap/core/menus/excalidraw';
 import { Flow } from 'tiptap/core/menus/flow';
 import { FontSize } from 'tiptap/core/menus/fontsize';
 import { Heading } from 'tiptap/core/menus/heading';
@@ -107,6 +108,7 @@ const _MenuBar: React.FC<{ editor: Editor }> = ({ editor }) => {
         <Table editor={editor} />
         <Katex editor={editor} />
         <Mind editor={editor} />
+        <Excalidraw editor={editor} />
       </Space>
     </div>
   );
diff --git a/packages/client/src/tiptap/editor/collaboration/kit.ts b/packages/client/src/tiptap/editor/collaboration/kit.ts
index 0d2ff3a3..370636ac 100644
--- a/packages/client/src/tiptap/editor/collaboration/kit.ts
+++ b/packages/client/src/tiptap/editor/collaboration/kit.ts
@@ -20,6 +20,7 @@ import { Dragable } from 'tiptap/core/extensions/dragable';
 import { Dropcursor } from 'tiptap/core/extensions/dropcursor';
 import { Emoji } from 'tiptap/core/extensions/emoji';
 import { EventEmitter } from 'tiptap/core/extensions/event-emitter';
+import { Excalidraw } from 'tiptap/core/extensions/excalidraw';
 import { Flow } from 'tiptap/core/extensions/flow';
 import { Focus } from 'tiptap/core/extensions/focus';
 import { FontSize } from 'tiptap/core/extensions/font-size';
@@ -100,6 +101,7 @@ export const CollaborationKit = [
   Color,
   ColorHighlighter,
   Dropcursor,
+  Excalidraw,
   EventEmitter,
   Focus,
   FontSize,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6e3a08f9..cb6bda5d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,6 +44,7 @@ importers:
       '@douyinfe/semi-icons': ^2.3.1
       '@douyinfe/semi-next': ^2.3.1
       '@douyinfe/semi-ui': ^2.3.1
+      '@excalidraw/excalidraw': ^0.12.0
       '@hocuspocus/provider': ^1.0.0-alpha.29
       '@think/config': workspace:^1.0.0
       '@think/constants': workspace:^1.0.0
@@ -156,6 +157,7 @@ importers:
       '@douyinfe/semi-icons': 2.3.1_react@17.0.2
       '@douyinfe/semi-next': 2.3.1
       '@douyinfe/semi-ui': 2.3.1_wnecvl2xit6hykxlpfa3byfhr4
+      '@excalidraw/excalidraw': 0.12.0_sfoxds7t5ydpegc3knd667wn6m
       '@hocuspocus/provider': 1.0.0-alpha.29
       '@think/config': link:../config
       '@think/constants': link:../constants
@@ -1951,6 +1953,17 @@ packages:
       - supports-color
     dev: true
 
+  /@excalidraw/excalidraw/0.12.0_sfoxds7t5ydpegc3knd667wn6m:
+    resolution: {integrity: sha512-xMPmKmOEgKij43k5m6Koaevb+SBw6La7MT9UDY8Iq7nQCMhA1HQwcUURfSkZ3ERibdQmMsAGtjSLbkX7hrA3+A==}
+    peerDependencies:
+      react: ^17.0.2
+      react-dom: ^17.0.2
+    dependencies:
+      dotenv: 10.0.0
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+    dev: false
+
   /@hocuspocus/common/1.0.0-alpha.4:
     resolution: {integrity: sha512-LvKj+ASSWnvjFB7n2bl7BUGFKF9XFFP1oA3/XmKl3c7wUIvoN1Ir3sX8XnN6qBA3S2CoruEHHk+KPS6zMSMfHA==}
     dev: false

From 3a0a0c220333311f08031f8fded13186ebb5162d Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Mon, 15 Aug 2022 12:11:22 +0800
Subject: [PATCH 2/2] tiptap: fix excalidraw

---
 .../src/tiptap/core/extensions/excalidraw.ts  |  4 +--
 .../tiptap/core/menus/excalidraw/modal.tsx    | 32 ++++++++-----------
 .../tiptap/core/wrappers/excalidraw/index.tsx |  7 ++--
 3 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/packages/client/src/tiptap/core/extensions/excalidraw.ts b/packages/client/src/tiptap/core/extensions/excalidraw.ts
index 5f8e6931..e5b227f1 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<any>;
+  data?: Record<string, unknown>;
 }
 
 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 91c1e9f5..0cf5b897 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<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>
diff --git a/packages/client/src/tiptap/core/wrappers/excalidraw/index.tsx b/packages/client/src/tiptap/core/wrappers/excalidraw/index.tsx
index 2b201570..4daeced1 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%');