refactor: remove clipboard utils to ClipboardUtils

This commit is contained in:
QiShaoXuan
2022-08-22 10:29:42 +08:00
parent 17e454b1e6
commit 065f833564
9 changed files with 30 additions and 116 deletions
@@ -5,6 +5,7 @@ import { Copy } from './copy';
import { Paste } from './paste';
import ClipboardParse from './clipboard-parse';
import { MarkdownParser } from './markdown-parse';
import { ClipboardUtils } from './clipboardUtils';
export class Clipboard {
private _clipboardEventDispatcher: ClipboardEventDispatcher;
@@ -12,14 +13,12 @@ export class Clipboard {
private _paste: Paste;
private _clipboardParse: ClipboardParse;
private _markdownParse: MarkdownParser;
public clipboardUtils: ClipboardUtils;
constructor(editor: Editor, clipboardTarget: HTMLElement) {
this._clipboardEventDispatcher = new ClipboardEventDispatcher(
editor,
clipboardTarget
);
this._clipboardParse = new ClipboardParse(editor);
this._markdownParse = new MarkdownParser();
this.clipboardUtils = new ClipboardUtils(editor);
this._copy = new Copy(editor);
this._paste = new Paste(
@@ -28,6 +27,11 @@ export class Clipboard {
this._markdownParse
);
this._clipboardEventDispatcher = new ClipboardEventDispatcher(
editor,
clipboardTarget
);
editor
.getHooks()
.get(HookType.ON_COPY)
@@ -1,5 +1,5 @@
import { Editor } from '../editor';
import { shouldHandlerContinue } from './utils';
import { ClipboardUtils } from './clipboardUtils';
enum ClipboardAction {
copy = 'copy',
@@ -11,10 +11,12 @@ enum ClipboardAction {
export class ClipboardEventDispatcher {
private _editor: Editor;
private _clipboardTarget: HTMLElement;
private _utils: ClipboardUtils;
constructor(editor: Editor, clipboardTarget: HTMLElement) {
this._editor = editor;
this._clipboardTarget = clipboardTarget;
this._utils = new ClipboardUtils(editor);
this._initialize();
}
@@ -41,20 +43,20 @@ export class ClipboardEventDispatcher {
}
private _copyHandler(e: ClipboardEvent) {
if (!shouldHandlerContinue(e, this._editor)) {
if (!this._utils.shouldHandlerContinue(e)) {
return;
}
this._editor.getHooks().onCopy(e);
}
private _cutHandler(e: ClipboardEvent) {
if (!shouldHandlerContinue(e, this._editor)) {
if (!this._utils.shouldHandlerContinue(e)) {
return;
}
this._editor.getHooks().onCut(e);
}
private _pasteHandler(e: ClipboardEvent) {
if (!shouldHandlerContinue(e, this._editor)) {
if (!this._utils.shouldHandlerContinue(e)) {
return;
}
@@ -1,11 +1,6 @@
import { Editor } from '../editor';
import {
AsyncBlock,
SelectBlock,
SelectInfo,
} from '@toeverything/components/editor-core';
import { SelectBlock, SelectInfo } from '@toeverything/components/editor-core';
import { ClipBlockInfo, OFFICE_CLIPBOARD_MIMETYPE } from './types';
import { getClipInfoOfBlockById } from './utils';
import { Clip } from './clip';
export class ClipboardUtils {
@@ -14,15 +9,18 @@ export class ClipboardUtils {
this._editor = editor;
}
async isBlockEditable(blockOrBlockId: AsyncBlock | string) {
const block =
typeof blockOrBlockId === 'string'
? await this._editor.getBlockById(blockOrBlockId)
: blockOrBlockId;
const blockView = this._editor.getView(block.type);
shouldHandlerContinue = (event: ClipboardEvent) => {
const filterNodes = ['INPUT', 'SELECT', 'TEXTAREA'];
return blockView.activatable;
}
if (event.defaultPrevented) {
return false;
}
if (filterNodes.includes((event.target as HTMLElement)?.tagName)) {
return false;
}
return this._editor.selectionManager.currentSelectInfo.type !== 'None';
};
async getClipInfoOfBlockById(blockId: string) {
const block = await this._editor.getBlockById(blockId);
@@ -85,37 +83,4 @@ export class ClipboardUtils {
})
);
}
async convertEditableBlockToHtml(block: AsyncBlock) {
const generate = (textList: any[]) => {
let content = '';
textList.forEach(text_obj => {
let text = text_obj.text || '';
if (text_obj.bold) {
text = `<strong>${text}</strong>`;
}
if (text_obj.italic) {
text = `<em>${text}</em>`;
}
if (text_obj.underline) {
text = `<u>${text}</u>`;
}
if (text_obj.inlinecode) {
text = `<code>${text}</code>`;
}
if (text_obj.strikethrough) {
text = `<s>${text}</s>`;
}
if (text_obj.type === 'link') {
text = `<a href='${text_obj.url}'>${generate(
text_obj.children
)}</a>`;
}
content += text;
});
return content;
};
const text_list: any[] = block.getProperty('text').value;
return generate(text_list);
}
}
@@ -3,7 +3,6 @@ import { SelectInfo } from '../selection';
import { OFFICE_CLIPBOARD_MIMETYPE } from './types';
import { Clip } from './clip';
import ClipboardParse from './clipboard-parse';
import { getClipDataOfBlocksById } from './utils';
import { ClipboardUtils } from './clipboardUtils';
class Copy {
private _editor: Editor;
@@ -14,7 +14,6 @@ import {
services,
} from '@toeverything/datasource/db-service';
import { MarkdownParser } from './markdown-parse';
import { shouldHandlerContinue } from './utils';
const SUPPORT_MARKDOWN_PASTE = true;
type TextValueItem = {
@@ -26,7 +25,6 @@ export class Paste {
private _editor: Editor;
private _markdownParse: MarkdownParser;
private _clipboardParse: ClipboardParse;
constructor(
editor: Editor,
clipboardParse: ClipboardParse,
@@ -43,9 +41,6 @@ export class Paste {
OFFICE_CLIPBOARD_MIMETYPE.TEXT,
];
public handlePaste(e: ClipboardEvent) {
if (!shouldHandlerContinue(e, this._editor)) {
return;
}
e.stopPropagation();
const clipboardData = e.clipboardData;
@@ -1,54 +0,0 @@
import { Editor } from '../editor';
import { ClipBlockInfo, OFFICE_CLIPBOARD_MIMETYPE } from './types';
import { Clip } from './clip';
export const shouldHandlerContinue = (
event: ClipboardEvent,
editor: Editor
) => {
const filterNodes = ['INPUT', 'SELECT', 'TEXTAREA'];
if (event.defaultPrevented) {
return false;
}
if (filterNodes.includes((event.target as HTMLElement)?.tagName)) {
return false;
}
return editor.selectionManager.currentSelectInfo.type !== 'None';
};
export const getClipInfoOfBlockById = async (
editor: Editor,
blockId: string
) => {
const block = await editor.getBlockById(blockId);
const blockInfo: ClipBlockInfo = {
type: block.type,
properties: block?.getProperties(),
children: [] as ClipBlockInfo[],
};
const children = (await block?.children()) ?? [];
for (let i = 0; i < children.length; i++) {
const childInfo = await getClipInfoOfBlockById(editor, children[i].id);
blockInfo.children.push(childInfo);
}
return blockInfo;
};
export const getClipDataOfBlocksById = async (
editor: Editor,
blockIds: string[]
) => {
const clipInfos = await Promise.all(
blockIds.map(blockId => getClipInfoOfBlockById(editor, blockId))
);
return new Clip(
OFFICE_CLIPBOARD_MIMETYPE.DOCS_DOCUMENT_SLICE_CLIP_WRAPPED,
JSON.stringify({
data: clipInfos,
})
);
};
@@ -145,6 +145,10 @@ export class Editor implements Virgo {
return this.ui_container;
}
public get clipboard() {
return this._clipboard;
}
/**
* Use it discreetly.
* Preference to use {@link withBatch}
@@ -10,4 +10,3 @@ export { BlockDropPlacement, HookType, GroupDirection } from './types';
export type { Plugin, PluginCreator, PluginHooks, Virgo } from './types';
export { BaseView, getTextHtml } from './views/base-view';
export type { ChildrenView, CreateView } from './views/base-view';
export { getClipDataOfBlocksById } from './clipboard/utils';