Merge pull request #196 from fantasticit/fix/0916

packages/client/src/components/template/card/index.tsx

@@ -21,6 +21,17 @@ export interface IProps {
   onClosePreview?: () => void;
 }
 
+const bodyStyle = {
+  overflow: 'auto',
+};
+const titleContainerStyle = {
+  marginBottom: 12,
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+} as React.CSSProperties;
+const flexStyle = { display: 'flex' };
+
 export const TemplateCard: React.FC<IProps> = ({
   template,
   onClick,
@@ -35,26 +46,35 @@ export const TemplateCard: React.FC<IProps> = ({
     Router.push(`/template/${template.id}/`);
   }, [template]);
 
+  const cancel = useCallback(() => {
+    toggleVisible(false);
+    onClosePreview && onClosePreview();
+  }, [toggleVisible, onClosePreview]);
+
+  const preview = useCallback(() => {
+    toggleVisible(true);
+    onOpenPreview && onOpenPreview();
+  }, [toggleVisible, onOpenPreview]);
+
+  const useTemplate = useCallback(() => {
+    onClick && onClick(template.id);
+  }, [onClick, template.id]);
+
   return (
     <>
       <Modal
         title="模板预览"
         width={'calc(100vh - 120px)'}
         height={'calc(100vh - 120px)'}
-        bodyStyle={{
+        bodyStyle={bodyStyle}
-          overflow: 'auto',
-        }}
         visible={visible}
-        onCancel={() => {
+        onCancel={cancel}
-          toggleVisible(false);
-          onClosePreview && onClosePreview();
-        }}
         footer={null}
         fullScreen
       >
         <TemplateReader key={template.id} templateId={template.id} />
       </Modal>
-      <div className={cls(styles.cardWrap, getClassNames(template.id))}>
+      <div className={cls(styles.cardWrap, getClassNames(template.id))} onClick={useTemplate}>
         <header>
           <IconDocument />
           <div className={styles.rightWrap}>
@@ -68,14 +88,7 @@ export const TemplateCard: React.FC<IProps> = ({
           </div>
         </header>
         <main>
-          <div
+          <div style={titleContainerStyle}>
-            style={{
-              marginBottom: 12,
-              whiteSpace: 'nowrap',
-              textOverflow: 'ellipsis',
-              overflow: 'hidden',
-            }}
-          >
             <Text strong>{template.title}</Text>
           </div>
           <div>
@@ -92,28 +105,16 @@ export const TemplateCard: React.FC<IProps> = ({
         </main>
         <footer>
           <Text type="tertiary" size="small">
-            <div style={{ display: 'flex' }}>
+            <div style={flexStyle}>
               已使用
               {template.usageAmount}次
             </div>
           </Text>
         </footer>
         <div className={styles.actions}>
-          <Button
+          <Button theme="solid" type="tertiary" onClick={preview}>
-            theme="solid"
-            type="tertiary"
-            onClick={() => {
-              toggleVisible(true);
-              onOpenPreview && onOpenPreview();
-            }}
-          >
             预览
           </Button>
-          {onClick && (
-            <Button type="primary" theme="solid" onClick={() => onClick && onClick(template.id)}>
-              使用
-            </Button>
-          )}
         </div>
       </div>
     </>

packages/client/src/thirtypart/kityminder/kity-core/module/view.js

@@ -164,7 +164,7 @@ define(function (require, exports, module) {
 
             // 当前偏移加上历史偏移
             var offset = kity.Vector.fromPoints(lastPosition, currentPosition);
-            dragger.move(offset);
+            // dragger.move(offset);
             e.stopPropagation();
             e.preventDefault();
             e.originEvent.preventDefault();
@@ -308,10 +308,10 @@ define(function (require, exports, module) {
             dy = e.wheelDelta;
           }
 
-          this._viewDragger.move({
+          // this._viewDragger.move({
-            x: dx / 2.5,
+          //   x: dx / 2.5,
-            y: dy / 2.5,
+          //   y: dy / 2.5,
-          });
+          // });
 
           var me = this;
           clearTimeout(this._mousewheeltimer);

packages/client/src/tiptap/core/extensions/paste.ts

@@ -1,4 +1,4 @@
-import { Extension } from '@tiptap/core';
+import { Editor as CoreEditor, Extension } from '@tiptap/core';
 import { safeJSONParse } from 'helpers/json';
 import { toggleMark } from 'prosemirror-commands';
 import { DOMParser, Fragment, Node, Schema } from 'prosemirror-model';
@@ -53,7 +53,13 @@ interface IPasteOptions {
    *
    * 将 html 转换为 prosemirror
    */
-  htmlToProsemirror: (arg: { schema: Schema; html: string; needTitle: boolean; defaultTitle?: string }) => Node;
+  htmlToProsemirror: (arg: {
+    editor: CoreEditor;
+    schema: Schema;
+    html: string;
+    needTitle: boolean;
+    defaultTitle?: string;
+  }) => Node;
 
   /**
    * 将 markdown 转换为 html
@@ -63,7 +69,7 @@ interface IPasteOptions {
   /**
    * 将 markdown 转换为 prosemirror 节点
    */
-  markdownToProsemirror: (arg: { schema: Schema; content: string; needTitle: boolean }) => Node;
+  markdownToProsemirror: (arg: { editor: CoreEditor; schema: Schema; content: string; needTitle: boolean }) => Node;
 
   /**
    * 将 prosemirror 转换为 markdown
@@ -119,12 +125,6 @@ export const Paste = Extension.create<IPasteOptions>({
               console.groupEnd();
             });
 
-            if (isInTitle(view.state)) {
-              if (text.length) {
-                return insertText(view, text);
-              }
-            }
-
             // 直接复制节点
             if (node) {
               const json = safeJSONParse(node);
@@ -154,9 +154,10 @@ export const Paste = Extension.create<IPasteOptions>({
               return true;
             }
 
-            // FIXME：各家 office 套件标准不一样，是否需要做成用户自行选择粘贴 html 或者 图片？
+            // TODO：各家 office 套件标准不一样，是否需要做成用户自行选择粘贴 html 或者 图片？
             if (html?.includes('urn:schemas-microsoft-com:office') || html?.includes('</table>')) {
               const doc = htmlToProsemirror({
+                editor,
                 schema: editor.schema,
                 html,
                 needTitle: hasTitleExtension && !hasTitle,
@@ -212,7 +213,7 @@ export const Paste = Extension.create<IPasteOptions>({
               event.preventDefault();
               const { tr } = view.state;
               tr.replaceSelectionWith(view.state.schema.nodes.codeBlock.create({ language: pasteCodeLanguage }));
-              tr.setSelection(TextSelection.near(tr.doc.resolve(Math.max(0, tr.selection.from - 2))));
+              tr.setSelection(TextSelection.near(tr.doc.resolve(Math.max(0, tr.selection.from - 1))));
               tr.insertText(text.replace(/\r\n?/g, '\n'));
               tr.setMeta('paste', true);
               view.dispatch(tr);
@@ -220,10 +221,12 @@ export const Paste = Extension.create<IPasteOptions>({
             }
 
             // 处理 markdown
-            if (markdownText || isMarkdown(text) || html.length === 0 || pasteCodeLanguage === 'markdown') {
+            if (markdownText || isMarkdown(text)) {
+              console.log(text);
               event.preventDefault();
               const schema = view.props.state.schema;
               const doc = markdownToProsemirror({
+                editor,
                 schema,
                 content: normalizeMarkdown(markdownText || text),
                 needTitle: hasTitleExtension && !hasTitle,
@@ -239,9 +242,11 @@ export const Paste = Extension.create<IPasteOptions>({
               return true;
             }
 
-            if (text.length !== 0) {
+            if (isInTitle(view.state)) {
+              if (text.length) {
                 return insertText(view, text);
               }
+            }
 
             return false;
           },

packages/client/src/tiptap/core/menus/text/index.tsx

@@ -7,6 +7,7 @@ import { CodeBlock } from 'tiptap/core/extensions/code-block';
 import { Countdown } from 'tiptap/core/extensions/countdown';
 import { DocumentChildren } from 'tiptap/core/extensions/document-children';
 import { DocumentReference } from 'tiptap/core/extensions/document-reference';
+import { Excalidraw } from 'tiptap/core/extensions/excalidraw';
 import { Flow } from 'tiptap/core/extensions/flow';
 import { HorizontalRule } from 'tiptap/core/extensions/horizontal-rule';
 import { Iframe } from 'tiptap/core/extensions/iframe';
@@ -47,6 +48,7 @@ const OTHER_BUBBLE_MENU_TYPES = [
   Katex.name,
   HorizontalRule.name,
   Status.name,
+  Excalidraw.name,
 ];
 
 export const Text = ({ editor }) => {

packages/client/src/tiptap/markdown/html-to-prosemirror/index.ts

@@ -9,10 +9,10 @@ import { htmlToProsemirror as mdHTMLToProsemirror } from '../markdown-to-prosemi
  * @param defaultTitle 优先作为文档标题，否则默认读取一个 heading 或者 paragraph 的文字内容
  * @returns
  */
-export const htmlToProsemirror = ({ schema, html, needTitle, defaultTitle = '' }) => {
+export const htmlToProsemirror = ({ editor, schema, html, needTitle, defaultTitle = '' }) => {
   const parser = new DOMParser();
   const { body } = parser.parseFromString(extractImage(html), 'text/html');
   body.append(document.createComment(html));
-  const doc = mdHTMLToProsemirror(body, needTitle, defaultTitle);
+  const doc = mdHTMLToProsemirror(editor, body, needTitle, defaultTitle);
   return doc;
 };

packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/index.ts

@@ -1,7 +1,5 @@
 import { Renderer } from './renderer';
 
-const renderer = new Renderer();
-
 /**
  * 表格的内容格式不正确，需要进行过滤修复
  * @param doc
@@ -56,7 +54,8 @@ function fixNode(doc) {
  * @param defaultTitle 优先作为文档标题，否则默认读取一个 heading 或者 paragraph 的文字内容
  * @returns
  */
-export const htmlToProsemirror = (body, needTitle = false, defaultTitle = '') => {
+export const htmlToProsemirror = (editor, body, needTitle = false, defaultTitle = '') => {
+  let renderer = new Renderer(editor);
   const json = renderer.render(body);
 
   // 设置标题
@@ -103,5 +102,7 @@ export const htmlToProsemirror = (body, needTitle = false, defaultTitle = '') =>
   }
 
   fixNode(result);
+
+  renderer = null;
   return result;
 };

packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/marks/mark.ts

@@ -1,8 +1,12 @@
+import { Editor } from '@tiptap/core';
+
 export class Mark {
+  editor: Editor;
   type: string;
   DOMNode: HTMLElement;
 
-  constructor(DomNode) {
+  constructor(editor, DomNode) {
+    this.editor = editor;
     this.type = 'mark';
     this.DOMNode = DomNode;
   }

packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/nodes/list-item.ts

@@ -1,8 +1,8 @@
 import { Node } from './node';
 
 export class ListItem extends Node {
-  constructor(DomNode) {
+  constructor(editor, DomNode) {
-    super(DomNode);
+    super(editor, DomNode);
     this.wrapper = {
       type: 'paragraph',
     };

packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/nodes/node.ts

@@ -1,11 +1,15 @@
+import { Editor } from '@tiptap/core';
+
 import { getAttributes } from '../utils';
 
 export class Node {
+  editor: Editor;
   wrapper: unknown;
   type = 'node';
   DOMNode: HTMLElement;
 
-  constructor(DomNode: HTMLElement) {
+  constructor(editor, DomNode: HTMLElement) {
+    this.editor = editor;
     this.wrapper = null;
     this.DOMNode = DomNode;
   }
@@ -17,7 +21,7 @@ export class Node {
   data(): Record<string, unknown> {
     return {
       type: this.type,
-      attrs: getAttributes(this.type, this.DOMNode),
+      attrs: getAttributes(this.editor, this.type, this.DOMNode),
     };
   }
 }

packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/renderer.ts

@@ -1,4 +1,5 @@
-// 自定义节点
+import { Editor } from '@tiptap/core';
+
 // marks
 import { Bold } from './marks/bold';
 import { Code } from './marks/code';
@@ -45,12 +46,14 @@ import { Text } from './nodes/text';
 import { Title } from './nodes/title';
 
 export class Renderer {
+  editor: Editor;
   document: HTMLElement;
   nodes = [];
   marks = [];
   storedMarks = [];
 
-  constructor() {
+  constructor(editor) {
+    this.editor = editor;
     this.document = undefined;
     this.storedMarks = [];
 
@@ -187,7 +190,7 @@ export class Renderer {
   getMatchingClass(node, classes) {
     for (const i in classes) {
       const Class = classes[i];
-      const instance = new Class(node);
+      const instance = new Class(this.editor, node);
       if (instance.matching()) {
         return instance;
       }

packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/utils.ts

@@ -1,4 +1,4 @@
-import { AllExtensions } from 'tiptap/core/all-kit';
+import { Editor } from '@tiptap/core';
 
 /**
  * 通过 tiptap extension 的配置从 DOM 节点上获取属性值
@@ -28,8 +28,10 @@ const getAttribute = (
   }, ret);
 };
 
-export const getAttributes = (name: string, element: HTMLElement): Record<string, unknown> => {
+export const getAttributes = (editor: Editor, name: string, element: HTMLElement): Record<string, unknown> => {
-  const ext = AllExtensions.find((ext) => ext && ext.name === name);
+  if (!editor || !editor.extensionManager) return {};
+
+  const ext = Array.from(editor.extensionManager.extensions).find((ext) => ext && ext.name === name);
 
   if (!ext) return {};
 

packages/client/src/tiptap/markdown/markdown-to-prosemirror/index.tsx

@@ -25,7 +25,7 @@ export const extractImage = (html) => {
 };
 
 // 将 markdown 字符串转换为 ProseMirror JSONDocument
-export const markdownToProsemirror = ({ schema, content, needTitle, defaultTitle = '' }) => {
+export const markdownToProsemirror = ({ editor, schema, content, needTitle, defaultTitle = '' }) => {
   const html = markdownToHTML(content);
 
   if (!html) return null;
@@ -33,7 +33,7 @@ export const markdownToProsemirror = ({ schema, content, needTitle, defaultTitle
   const parser = new DOMParser();
   const { body } = parser.parseFromString(extractImage(html), 'text/html');
   body.append(document.createComment(content));
-  const node = htmlToProsemirror(body, needTitle, defaultTitle);
+  const node = htmlToProsemirror(editor, body, needTitle, defaultTitle);
 
   return node;
 };