mirror of https://github.com/fantasticit/think.git
Merge pull request #196 from fantasticit/fix/0916
This commit is contained in:
commit
b03be31d3a
|
@ -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>
|
||||
</>
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
},
|
||||
|
|
|
@ -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 }) => {
|
||||
|
|
|
@ -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;
|
||||
};
|
||||
|
|
|
@ -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;
|
||||
};
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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',
|
||||
};
|
||||
|
|
|
@ -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),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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 {};
|
||||
|
||||
|
|
|
@ -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;
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue