gio
/
think
mirror of https://github.com/fantasticit/think.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #196 from fantasticit/fix/0916

This commit is contained in:
fantasticit 2022-09-16 20:49:11 +08:00 committed by GitHub
parent d967fc72f7 64113f48f1
commit b03be31d3a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 89 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
packages/client/src/components/template/card/index.tsx
View File

@ -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={{
overflow: 'auto',
}}
bodyStyle={bodyStyle}
visible={visible}
onCancel={() => {
toggleVisible(false);
onClosePreview && onClosePreview();
}}
onCancel={cancel}
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
style={{
marginBottom: 12,
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
overflow: 'hidden',
}}
>
<div style={titleContainerStyle}>
<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
theme="solid"
type="tertiary"
onClick={() => {
toggleVisible(true);
onOpenPreview && onOpenPreview();
}}
>
<Button theme="solid" type="tertiary" onClick={preview}>
预览
</Button>
{onClick && (
<Button type="primary" theme="solid" onClick={() => onClick && onClick(template.id)}>
使用
</Button>
)}
</div>
</div>
</>

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

@ -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({
x: dx / 2.5,
y: dy / 2.5,
});
// this._viewDragger.move({
// x: dx / 2.5,
// y: dy / 2.5,
// });
var me = this;
clearTimeout(this._mousewheeltimer);

33
packages/client/src/tiptap/core/extensions/paste.ts
View File

@ -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,8 +242,10 @@ export const Paste = Extension.create<IPasteOptions>({
return true;
}
if (text.length !== 0) {
return insertText(view, text);
if (isInTitle(view.state)) {
if (text.length) {
return insertText(view, text);
}
}
return false;

2
packages/client/src/tiptap/core/menus/text/index.tsx
View File

@ -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 }) => {

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

@ -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;
};

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

@ -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;
};

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

@ -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;
}

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

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

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

@ -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),
};
}
}

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

@ -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;
}

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

@ -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> => {
const ext = AllExtensions.find((ext) => ext && ext.name === name);
export const getAttributes = (editor: Editor, name: string, element: HTMLElement): Record<string, unknown> => {
if (!editor || !editor.extensionManager) return {};
const ext = Array.from(editor.extensionManager.extensions).find((ext) => ext && ext.name === name);
if (!ext) return {};

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

@ -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;
};