mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-12 04:18:54 +00:00
refactor: remove useless file
This commit is contained in:
QiShaoXuan
@@ -1,422 +0,0 @@
|
||||
import { HooksRunner } from '../types';
|
||||
import {
|
||||
OFFICE_CLIPBOARD_MIMETYPE,
|
||||
InnerClipInfo,
|
||||
ClipBlockInfo,
|
||||
} from './types';
|
||||
import { Editor } from '../editor';
|
||||
import { AsyncBlock } from '../block';
|
||||
import ClipboardParse from './clipboard-parse';
|
||||
import { SelectInfo } from '../selection';
|
||||
import {
|
||||
Protocol,
|
||||
BlockFlavorKeys,
|
||||
services,
|
||||
} from '@toeverything/datasource/db-service';
|
||||
import { MarkdownParser } from './markdown-parse';
|
||||
|
||||
// todo needs to be a switch
|
||||
const SUPPORT_MARKDOWN_PASTE = true;
|
||||
|
||||
const shouldHandlerContinue = (event: Event, 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';
|
||||
};
|
||||
|
||||
enum ClipboardAction {
|
||||
COPY = 'copy',
|
||||
CUT = 'cut',
|
||||
PASTE = 'paste',
|
||||
}
|
||||
class BrowserClipboard {
|
||||
private _eventTarget: Element;
|
||||
private _hooks: HooksRunner;
|
||||
private _editor: Editor;
|
||||
private _clipboardParse: ClipboardParse;
|
||||
private _markdownParse: MarkdownParser;
|
||||
|
||||
private static _optimalMimeType: string[] = [
|
||||
OFFICE_CLIPBOARD_MIMETYPE.DOCS_DOCUMENT_SLICE_CLIP_WRAPPED,
|
||||
OFFICE_CLIPBOARD_MIMETYPE.HTML,
|
||||
OFFICE_CLIPBOARD_MIMETYPE.TEXT,
|
||||
];
|
||||
|
||||
constructor(eventTarget: Element, hooks: HooksRunner, editor: Editor) {
|
||||
this._eventTarget = eventTarget;
|
||||
this._hooks = hooks;
|
||||
this._editor = editor;
|
||||
this._clipboardParse = new ClipboardParse(editor);
|
||||
this._markdownParse = new MarkdownParser();
|
||||
this._initialize();
|
||||
}
|
||||
|
||||
public getClipboardParse() {
|
||||
return this._clipboardParse;
|
||||
}
|
||||
|
||||
private _initialize() {
|
||||
this._handleCopy = this._handleCopy.bind(this);
|
||||
this._handleCut = this._handleCut.bind(this);
|
||||
this._handlePaste = this._handlePaste.bind(this);
|
||||
|
||||
document.addEventListener(ClipboardAction.COPY, this._handleCopy);
|
||||
document.addEventListener(ClipboardAction.CUT, this._handleCut);
|
||||
document.addEventListener(ClipboardAction.PASTE, this._handlePaste);
|
||||
this._eventTarget.addEventListener(
|
||||
ClipboardAction.COPY,
|
||||
this._handleCopy
|
||||
);
|
||||
this._eventTarget.addEventListener(
|
||||
ClipboardAction.CUT,
|
||||
this._handleCut
|
||||
);
|
||||
this._eventTarget.addEventListener(
|
||||
ClipboardAction.PASTE,
|
||||
this._handlePaste
|
||||
);
|
||||
}
|
||||
|
||||
private _handleCopy(e: Event) {
|
||||
if (!shouldHandlerContinue(e, this._editor)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._dispatchClipboardEvent(ClipboardAction.COPY, e as ClipboardEvent);
|
||||
}
|
||||
|
||||
private _handleCut(e: Event) {
|
||||
if (!shouldHandlerContinue(e, this._editor)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._dispatchClipboardEvent(ClipboardAction.CUT, e as ClipboardEvent);
|
||||
}
|
||||
|
||||
private _handlePaste(e: Event) {
|
||||
if (!shouldHandlerContinue(e, this._editor)) {
|
||||
return;
|
||||
}
|
||||
e.stopPropagation();
|
||||
|
||||
const clipboardData = (e as ClipboardEvent).clipboardData;
|
||||
|
||||
const isPureFile = this._isPureFileInClipboard(clipboardData);
|
||||
|
||||
if (isPureFile) {
|
||||
this._pasteFile(clipboardData);
|
||||
} else {
|
||||
this._pasteContent(clipboardData);
|
||||
}
|
||||
// this._editor.selectionManager
|
||||
// .getSelectInfo()
|
||||
// .then(selectionInfo => console.log(selectionInfo));
|
||||
}
|
||||
|
||||
private _pasteContent(clipboardData: any) {
|
||||
const originClip: { data: any; type: any } = this.getOptimalClip(
|
||||
clipboardData
|
||||
) as { data: any; type: any };
|
||||
|
||||
const originTextClipData = clipboardData.getData(
|
||||
OFFICE_CLIPBOARD_MIMETYPE.TEXT
|
||||
);
|
||||
|
||||
let clipData = originClip['data'];
|
||||
|
||||
if (originClip['type'] === OFFICE_CLIPBOARD_MIMETYPE.TEXT) {
|
||||
clipData = this._excapeHtml(clipData);
|
||||
}
|
||||
|
||||
switch (originClip['type']) {
|
||||
/** Protocol paste */
|
||||
case OFFICE_CLIPBOARD_MIMETYPE.DOCS_DOCUMENT_SLICE_CLIP_WRAPPED:
|
||||
this._firePasteEditAction(clipData);
|
||||
break;
|
||||
case OFFICE_CLIPBOARD_MIMETYPE.HTML:
|
||||
this._pasteHtml(clipData, originTextClipData);
|
||||
break;
|
||||
case OFFICE_CLIPBOARD_MIMETYPE.TEXT:
|
||||
this._pasteText(clipData, originTextClipData);
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
private _pasteHtml(clipData: any, originTextClipData: any) {
|
||||
if (SUPPORT_MARKDOWN_PASTE) {
|
||||
const hasMarkdown =
|
||||
this._markdownParse.checkIfTextContainsMd(originTextClipData);
|
||||
if (hasMarkdown) {
|
||||
try {
|
||||
const convertedDataObj =
|
||||
this._markdownParse.md2Html(originTextClipData);
|
||||
if (convertedDataObj.isConverted) {
|
||||
clipData = convertedDataObj.text;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
clipData = originTextClipData;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const blocks = this._clipboardParse.html2blocks(clipData);
|
||||
this.insert_blocks(blocks);
|
||||
}
|
||||
|
||||
private _pasteText(clipData: any, originTextClipData: any) {
|
||||
const blocks = this._clipboardParse.text2blocks(clipData);
|
||||
this.insert_blocks(blocks);
|
||||
}
|
||||
|
||||
private async _pasteFile(clipboardData: any) {
|
||||
const file = this._getImageFile(clipboardData);
|
||||
if (file) {
|
||||
const result = await services.api.file.create({
|
||||
workspace: this._editor.workspace,
|
||||
file: file,
|
||||
});
|
||||
const blockInfo: ClipBlockInfo = {
|
||||
type: 'image',
|
||||
properties: {
|
||||
image: {
|
||||
value: result.id,
|
||||
name: file.name,
|
||||
size: file.size,
|
||||
type: file.type,
|
||||
},
|
||||
},
|
||||
children: [] as ClipBlockInfo[],
|
||||
};
|
||||
this.insert_blocks([blockInfo]);
|
||||
}
|
||||
}
|
||||
|
||||
private _getImageFile(clipboardData: any) {
|
||||
const files = clipboardData.files;
|
||||
if (files && files[0] && files[0].type.indexOf('image') > -1) {
|
||||
return files[0];
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
private _excapeHtml(data: any, onlySpace?: any) {
|
||||
if (!onlySpace) {
|
||||
// TODO:
|
||||
// data = string.htmlEscape(data);
|
||||
// data = data.replace(/\n/g, '<br>');
|
||||
}
|
||||
|
||||
// data = data.replace(/ /g, ' ');
|
||||
// data = data.replace(/\t/g, ' ');
|
||||
return data;
|
||||
}
|
||||
|
||||
public getOptimalClip(clipboardData: any) {
|
||||
const mimeTypeArr = BrowserClipboard._optimalMimeType;
|
||||
|
||||
for (let i = 0; i < mimeTypeArr.length; i++) {
|
||||
const data =
|
||||
clipboardData[mimeTypeArr[i]] ||
|
||||
clipboardData.getData(mimeTypeArr[i]);
|
||||
|
||||
if (data) {
|
||||
return {
|
||||
type: mimeTypeArr[i],
|
||||
data: data,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
private _isPureFileInClipboard(clipboardData: DataTransfer) {
|
||||
const types = clipboardData.types;
|
||||
|
||||
return (
|
||||
(types.length === 1 && types[0] === 'Files') ||
|
||||
(types.length === 2 &&
|
||||
(types.includes('text/plain') || types.includes('text/html')) &&
|
||||
types.includes('Files'))
|
||||
);
|
||||
}
|
||||
|
||||
private async _firePasteEditAction(clipboardData: any) {
|
||||
const clipInfo: InnerClipInfo = JSON.parse(clipboardData);
|
||||
clipInfo && this.insert_blocks(clipInfo.data, clipInfo.select);
|
||||
}
|
||||
|
||||
private _canEditText(type: BlockFlavorKeys) {
|
||||
return (
|
||||
type === Protocol.Block.Type.page ||
|
||||
type === Protocol.Block.Type.text ||
|
||||
type === Protocol.Block.Type.heading1 ||
|
||||
type === Protocol.Block.Type.heading2 ||
|
||||
type === Protocol.Block.Type.heading3 ||
|
||||
type === Protocol.Block.Type.quote ||
|
||||
type === Protocol.Block.Type.todo ||
|
||||
type === Protocol.Block.Type.code ||
|
||||
type === Protocol.Block.Type.callout ||
|
||||
type === Protocol.Block.Type.numbered ||
|
||||
type === Protocol.Block.Type.bullet
|
||||
);
|
||||
}
|
||||
|
||||
// TODO: cursor positioning problem
|
||||
private async insert_blocks(blocks: ClipBlockInfo[], select?: SelectInfo) {
|
||||
if (blocks.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const cur_select_info =
|
||||
await this._editor.selectionManager.getSelectInfo();
|
||||
if (cur_select_info.blocks.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
let beginIndex = 0;
|
||||
const curNodeId =
|
||||
cur_select_info.blocks[cur_select_info.blocks.length - 1].blockId;
|
||||
let curBlock = await this._editor.getBlockById(curNodeId);
|
||||
const blockView = this._editor.getView(curBlock.type);
|
||||
if (
|
||||
cur_select_info.type === 'Range' &&
|
||||
curBlock.type === 'text' &&
|
||||
blockView.isEmpty(curBlock)
|
||||
) {
|
||||
await curBlock.setType(blocks[0].type);
|
||||
curBlock.setProperties(blocks[0].properties);
|
||||
await this._pasteChildren(curBlock, blocks[0].children);
|
||||
beginIndex = 1;
|
||||
} else if (
|
||||
select?.type === 'Range' &&
|
||||
cur_select_info.type === 'Range' &&
|
||||
this._canEditText(curBlock.type) &&
|
||||
this._canEditText(blocks[0].type)
|
||||
) {
|
||||
if (
|
||||
cur_select_info.blocks.length > 0 &&
|
||||
cur_select_info.blocks[0].startInfo
|
||||
) {
|
||||
const startInfo = cur_select_info.blocks[0].startInfo;
|
||||
const endInfo = cur_select_info.blocks[0].endInfo;
|
||||
const curTextValue = curBlock.getProperty('text').value;
|
||||
const pre_curTextValue = curTextValue.slice(
|
||||
0,
|
||||
startInfo.arrayIndex
|
||||
);
|
||||
const lastCurTextValue = curTextValue.slice(
|
||||
endInfo.arrayIndex + 1
|
||||
);
|
||||
const preText = curTextValue[
|
||||
startInfo.arrayIndex
|
||||
].text.substring(0, startInfo.offset);
|
||||
const lastText = curTextValue[
|
||||
endInfo.arrayIndex
|
||||
].text.substring(endInfo.offset);
|
||||
|
||||
let lastBlock: ClipBlockInfo = blocks[blocks.length - 1];
|
||||
if (!this._canEditText(lastBlock.type)) {
|
||||
lastBlock = { type: 'text', children: [] };
|
||||
blocks.push(lastBlock);
|
||||
}
|
||||
const lastValues = lastBlock.properties?.text?.value;
|
||||
lastText && lastValues.push({ text: lastText });
|
||||
lastValues.push(...lastCurTextValue);
|
||||
lastBlock.properties = {
|
||||
text: { value: lastValues },
|
||||
};
|
||||
|
||||
const insertInfo = blocks[0].properties.text;
|
||||
preText && pre_curTextValue.push({ text: preText });
|
||||
pre_curTextValue.push(...insertInfo.value);
|
||||
this._editor.blockHelper.setBlockBlur(curNodeId);
|
||||
setTimeout(async () => {
|
||||
const curBlock = await this._editor.getBlockById(curNodeId);
|
||||
curBlock.setProperties({
|
||||
text: { value: pre_curTextValue },
|
||||
});
|
||||
await this._pasteChildren(curBlock, blocks[0].children);
|
||||
}, 0);
|
||||
beginIndex = 1;
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = beginIndex; i < blocks.length; i++) {
|
||||
const nextBlock = await this._editor.createBlock(blocks[i].type);
|
||||
nextBlock.setProperties(blocks[i].properties);
|
||||
if (curBlock.type === 'page') {
|
||||
curBlock.prepend(nextBlock);
|
||||
} else {
|
||||
curBlock.after(nextBlock);
|
||||
}
|
||||
|
||||
await this._pasteChildren(nextBlock, blocks[i].children);
|
||||
curBlock = nextBlock;
|
||||
}
|
||||
}
|
||||
|
||||
private async _pasteChildren(parent: AsyncBlock, children: any[]) {
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
const nextBlock = await this._editor.createBlock(children[i].type);
|
||||
nextBlock.setProperties(children[i].properties);
|
||||
await parent.append(nextBlock);
|
||||
await this._pasteChildren(nextBlock, children[i].children);
|
||||
}
|
||||
}
|
||||
|
||||
private _preCopyCut(action: ClipboardAction, e: ClipboardEvent) {
|
||||
switch (action) {
|
||||
case ClipboardAction.COPY:
|
||||
this._hooks.beforeCopy(e);
|
||||
break;
|
||||
|
||||
case ClipboardAction.CUT:
|
||||
this._hooks.beforeCut(e);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
private _dispatchClipboardEvent(
|
||||
action: ClipboardAction,
|
||||
e: ClipboardEvent
|
||||
) {
|
||||
this._preCopyCut(action, e);
|
||||
}
|
||||
|
||||
dispose() {
|
||||
document.removeEventListener(ClipboardAction.COPY, this._handleCopy);
|
||||
document.removeEventListener(ClipboardAction.CUT, this._handleCut);
|
||||
document.removeEventListener(ClipboardAction.PASTE, this._handlePaste);
|
||||
this._eventTarget.removeEventListener(
|
||||
ClipboardAction.COPY,
|
||||
this._handleCopy
|
||||
);
|
||||
this._eventTarget.removeEventListener(
|
||||
ClipboardAction.CUT,
|
||||
this._handleCut
|
||||
);
|
||||
this._eventTarget.removeEventListener(
|
||||
ClipboardAction.PASTE,
|
||||
this._handlePaste
|
||||
);
|
||||
this._clipboardParse.dispose();
|
||||
this._clipboardParse = null;
|
||||
this._eventTarget = null;
|
||||
this._hooks = null;
|
||||
this._editor = null;
|
||||
}
|
||||
}
|
||||
|
||||
export { BrowserClipboard };
|
||||
Reference in New Issue
Block a user