luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

style: update code style

Browse Source
This commit is contained in:
QiShaoXuan
2022-08-09 14:54:59 +08:00
parent 849bf813b4
commit 75083f1c75
1 changed files with 148 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

300
libs/components/editor-core/src/editor/clipboard/browser-clipboard.ts
View File

@@ -16,10 +16,11 @@ import {
import { MarkdownParser } from './markdown-parse'; import { MarkdownParser } from './markdown-parse';
// todo needs to be a switch // todo needs to be a switch
const support_markdown_paste = true; const SUPPORT_MARKDOWN_PASTE = true;
const filterNodes = ['INPUT', 'SELECT', 'TEXTAREA'];
const shouldHandlerContinue = (event: Event, editor: Editor) => { const shouldHandlerContinue = (event: Event, editor: Editor) => {
const filterNodes = ['INPUT', 'SELECT', 'TEXTAREA'];
if (event.defaultPrevented) { if (event.defaultPrevented) {
return false; return false;
} }
@@ -36,96 +37,94 @@ enum ClipboardAction {
PASTE = 'paste', PASTE = 'paste',
} }
class BrowserClipboard { class BrowserClipboard {
private event_target: Element; private _eventTarget: Element;
private hooks: HooksRunner; private _hooks: HooksRunner;
private editor: Editor; private _editor: Editor;
private clipboard_parse: ClipboardParse; private _clipboardParse: ClipboardParse;
private markdown_parse: MarkdownParser; private _markdownParse: MarkdownParser;
private static optimal_mime_type: string[] = [ private static _optimalMimeType: string[] = [
OFFICE_CLIPBOARD_MIMETYPE.DOCS_DOCUMENT_SLICE_CLIP_WRAPPED, OFFICE_CLIPBOARD_MIMETYPE.DOCS_DOCUMENT_SLICE_CLIP_WRAPPED,
OFFICE_CLIPBOARD_MIMETYPE.HTML, OFFICE_CLIPBOARD_MIMETYPE.HTML,
OFFICE_CLIPBOARD_MIMETYPE.TEXT, OFFICE_CLIPBOARD_MIMETYPE.TEXT,
]; ];
constructor(eventTarget: Element, hooks: HooksRunner, editor: Editor) { constructor(eventTarget: Element, hooks: HooksRunner, editor: Editor) {
this.event_target = eventTarget; this._eventTarget = eventTarget;
this.hooks = hooks; this._hooks = hooks;
this.editor = editor; this._editor = editor;
this.clipboard_parse = new ClipboardParse(editor); this._clipboardParse = new ClipboardParse(editor);
this.markdown_parse = new MarkdownParser(); this._markdownParse = new MarkdownParser();
this.initialize(); this._initialize();
} }
public getClipboardParse() { public getClipboardParse() {
return this.clipboard_parse; return this._clipboardParse;
} }
private initialize() { private _initialize() {
this.handle_copy = this.handle_copy.bind(this); this._handleCopy = this._handleCopy.bind(this);
this.handle_cut = this.handle_cut.bind(this); this._handleCut = this._handleCut.bind(this);
this.handle_paste = this.handle_paste.bind(this); this._handlePaste = this._handlePaste.bind(this);
document.addEventListener(ClipboardAction.COPY, this.handle_copy); document.addEventListener(ClipboardAction.COPY, this._handleCopy);
document.addEventListener(ClipboardAction.CUT, this.handle_cut); document.addEventListener(ClipboardAction.CUT, this._handleCut);
document.addEventListener(ClipboardAction.PASTE, this.handle_paste); document.addEventListener(ClipboardAction.PASTE, this._handlePaste);
this.event_target.addEventListener( this._eventTarget.addEventListener(
ClipboardAction.COPY, ClipboardAction.COPY,
this.handle_copy this._handleCopy
); );
this.event_target.addEventListener( this._eventTarget.addEventListener(
ClipboardAction.CUT, ClipboardAction.CUT,
this.handle_cut this._handleCut
); );
this.event_target.addEventListener( this._eventTarget.addEventListener(
ClipboardAction.PASTE, ClipboardAction.PASTE,
this.handle_paste this._handlePaste
); );
} }
private handle_copy(e: Event) { private _handleCopy(e: Event) {
if (!shouldHandlerContinue(e, this.editor)) { if (!shouldHandlerContinue(e, this._editor)) {
return; return;
} }
this.dispatch_clipboard_event( this._dispatchClipboardEvent(ClipboardAction.COPY, e as ClipboardEvent);
ClipboardAction.COPY,
e as ClipboardEvent
);
} }
private handle_cut(e: Event) { private _handleCut(e: Event) {
if (!shouldHandlerContinue(e, this.editor)) { if (!shouldHandlerContinue(e, this._editor)) {
return; return;
} }
this.dispatch_clipboard_event(ClipboardAction.CUT, e as ClipboardEvent); this._dispatchClipboardEvent(ClipboardAction.CUT, e as ClipboardEvent);
} }
private handle_paste(e: Event) { private _handlePaste(e: Event) {
if (!shouldHandlerContinue(e, this.editor)) { if (!shouldHandlerContinue(e, this._editor)) {
return; return;
} }
e.stopPropagation(); e.stopPropagation();
const clipboardData = (e as ClipboardEvent).clipboardData; const clipboardData = (e as ClipboardEvent).clipboardData;
const isPureFile = this.is_pure_file_in_clipboard(clipboardData); const isPureFile = this._isPureFileInClipboard(clipboardData);
if (isPureFile) { if (isPureFile) {
this.paste_file(clipboardData); this._pasteFile(clipboardData);
} else { } else {
this.paste_content(clipboardData); this._pasteContent(clipboardData);
} }
// this.editor.selectionManager // this._editor.selectionManager
// .getSelectInfo() // .getSelectInfo()
// .then(selectionInfo => console.log(selectionInfo)); // .then(selectionInfo => console.log(selectionInfo));
} }
private paste_content(clipboardData: any) { private _pasteContent(clipboardData: any) {
const originClip: { data: any; type: any } = this.getOptimalClip( const originClip: { data: any; type: any } = this.getOptimalClip(
clipboardData clipboardData
) as { data: any; type: any }; ) as { data: any; type: any };
const originTextClipData = clipboardData.getData( const originTextClipData = clipboardData.getData(
OFFICE_CLIPBOARD_MIMETYPE.TEXT OFFICE_CLIPBOARD_MIMETYPE.TEXT
); );
@@ -133,19 +132,19 @@ class BrowserClipboard {
let clipData = originClip['data']; let clipData = originClip['data'];
if (originClip['type'] === OFFICE_CLIPBOARD_MIMETYPE.TEXT) { if (originClip['type'] === OFFICE_CLIPBOARD_MIMETYPE.TEXT) {
clipData = this.excape_html(clipData); clipData = this._excapeHtml(clipData);
} }
switch (originClip['type']) { switch (originClip['type']) {
/** Protocol paste */ /** Protocol paste */
case OFFICE_CLIPBOARD_MIMETYPE.DOCS_DOCUMENT_SLICE_CLIP_WRAPPED: case OFFICE_CLIPBOARD_MIMETYPE.DOCS_DOCUMENT_SLICE_CLIP_WRAPPED:
this.fire_paste_edit_action(clipData); this._firePasteEditAction(clipData);
break; break;
case OFFICE_CLIPBOARD_MIMETYPE.HTML: case OFFICE_CLIPBOARD_MIMETYPE.HTML:
this.paste_html(clipData, originTextClipData); this._pasteHtml(clipData, originTextClipData);
break; break;
case OFFICE_CLIPBOARD_MIMETYPE.TEXT: case OFFICE_CLIPBOARD_MIMETYPE.TEXT:
this.paste_text(clipData, originTextClipData); this._pasteText(clipData, originTextClipData);
break; break;
default: default:
@@ -153,14 +152,14 @@ class BrowserClipboard {
} }
} }
private paste_html(clipData: any, originTextClipData: any) { private _pasteHtml(clipData: any, originTextClipData: any) {
if (support_markdown_paste) { if (SUPPORT_MARKDOWN_PASTE) {
const has_markdown = const hasMarkdown =
this.markdown_parse.checkIfTextContainsMd(originTextClipData); this._markdownParse.checkIfTextContainsMd(originTextClipData);
if (has_markdown) { if (hasMarkdown) {
try { try {
const convertedDataObj = const convertedDataObj =
this.markdown_parse.md2Html(originTextClipData); this._markdownParse.md2Html(originTextClipData);
if (convertedDataObj.isConverted) { if (convertedDataObj.isConverted) {
clipData = convertedDataObj.text; clipData = convertedDataObj.text;
} }
@@ -171,23 +170,23 @@ class BrowserClipboard {
} }
} }
const blocks = this.clipboard_parse.html2blocks(clipData); const blocks = this._clipboardParse.html2blocks(clipData);
this.insert_blocks(blocks); this.insert_blocks(blocks);
} }
private paste_text(clipData: any, originTextClipData: any) { private _pasteText(clipData: any, originTextClipData: any) {
const blocks = this.clipboard_parse.text2blocks(clipData); const blocks = this._clipboardParse.text2blocks(clipData);
this.insert_blocks(blocks); this.insert_blocks(blocks);
} }
private async paste_file(clipboardData: any) { private async _pasteFile(clipboardData: any) {
const file = this.get_image_file(clipboardData); const file = this._getImageFile(clipboardData);
if (file) { if (file) {
const result = await services.api.file.create({ const result = await services.api.file.create({
workspace: this.editor.workspace, workspace: this._editor.workspace,
file: file, file: file,
}); });
const block_info: ClipBlockInfo = { const blockInfo: ClipBlockInfo = {
type: 'image', type: 'image',
properties: { properties: {
image: { image: {
@@ -199,11 +198,11 @@ class BrowserClipboard {
}, },
children: [] as ClipBlockInfo[], children: [] as ClipBlockInfo[],
}; };
this.insert_blocks([block_info]); this.insert_blocks([blockInfo]);
} }
} }
private get_image_file(clipboardData: any) { private _getImageFile(clipboardData: any) {
const files = clipboardData.files; const files = clipboardData.files;
if (files && files[0] && files[0].type.indexOf('image') > -1) { if (files && files[0] && files[0].type.indexOf('image') > -1) {
return files[0]; return files[0];
@@ -211,7 +210,7 @@ class BrowserClipboard {
return; return;
} }
private excape_html(data: any, onlySpace?: any) { private _excapeHtml(data: any, onlySpace?: any) {
if (!onlySpace) { if (!onlySpace) {
// TODO: // TODO:
// data = string.htmlEscape(data); // data = string.htmlEscape(data);
@@ -224,7 +223,7 @@ class BrowserClipboard {
} }
public getOptimalClip(clipboardData: any) { public getOptimalClip(clipboardData: any) {
const mimeTypeArr = BrowserClipboard.optimal_mime_type; const mimeTypeArr = BrowserClipboard._optimalMimeType;
for (let i = 0; i < mimeTypeArr.length; i++) { for (let i = 0; i < mimeTypeArr.length; i++) {
const data = const data =
@@ -242,24 +241,23 @@ class BrowserClipboard {
return ''; return '';
} }
private is_pure_file_in_clipboard(clipboardData: DataTransfer) { private _isPureFileInClipboard(clipboardData: DataTransfer) {
const types = clipboardData.types; const types = clipboardData.types;
const res = return (
(types.length === 1 && types[0] === 'Files') || (types.length === 1 && types[0] === 'Files') ||
(types.length === 2 && (types.length === 2 &&
(types.includes('text/plain') || types.includes('text/html')) && (types.includes('text/plain') || types.includes('text/html')) &&
types.includes('Files')); types.includes('Files'))
);
return res;
} }
private async fire_paste_edit_action(clipboardData: any) { private async _firePasteEditAction(clipboardData: any) {
const clip_info: InnerClipInfo = JSON.parse(clipboardData); const clipInfo: InnerClipInfo = JSON.parse(clipboardData);
clip_info && this.insert_blocks(clip_info.data, clip_info.select); clipInfo && this.insert_blocks(clipInfo.data, clipInfo.select);
} }
private can_edit_text(type: BlockFlavorKeys) { private _canEditText(type: BlockFlavorKeys) {
return ( return (
type === Protocol.Block.Type.page || type === Protocol.Block.Type.page ||
type === Protocol.Block.Type.text || type === Protocol.Block.Type.text ||
@@ -282,144 +280,142 @@ class BrowserClipboard {
} }
const cur_select_info = const cur_select_info =
await this.editor.selectionManager.getSelectInfo(); await this._editor.selectionManager.getSelectInfo();
if (cur_select_info.blocks.length === 0) { if (cur_select_info.blocks.length === 0) {
return; return;
} }
let begin_index = 0; let beginIndex = 0;
const cur_node_id = const curNodeId =
cur_select_info.blocks[cur_select_info.blocks.length - 1].blockId; cur_select_info.blocks[cur_select_info.blocks.length - 1].blockId;
let cur_block = await this.editor.getBlockById(cur_node_id); let curBlock = await this._editor.getBlockById(curNodeId);
const block_view = this.editor.getView(cur_block.type); const blockView = this._editor.getView(curBlock.type);
if ( if (
cur_select_info.type === 'Range' && cur_select_info.type === 'Range' &&
cur_block.type === 'text' && curBlock.type === 'text' &&
block_view.isEmpty(cur_block) blockView.isEmpty(curBlock)
) { ) {
cur_block.setType(blocks[0].type); await curBlock.setType(blocks[0].type);
cur_block.setProperties(blocks[0].properties); curBlock.setProperties(blocks[0].properties);
this.paste_children(cur_block, blocks[0].children); await this._pasteChildren(curBlock, blocks[0].children);
begin_index = 1; beginIndex = 1;
} else if ( } else if (
select?.type === 'Range' && select?.type === 'Range' &&
cur_select_info.type === 'Range' && cur_select_info.type === 'Range' &&
this.can_edit_text(cur_block.type) && this._canEditText(curBlock.type) &&
this.can_edit_text(blocks[0].type) this._canEditText(blocks[0].type)
) { ) {
if ( if (
cur_select_info.blocks.length > 0 && cur_select_info.blocks.length > 0 &&
cur_select_info.blocks[0].startInfo cur_select_info.blocks[0].startInfo
) { ) {
const start_info = cur_select_info.blocks[0].startInfo; const startInfo = cur_select_info.blocks[0].startInfo;
const end_info = cur_select_info.blocks[0].endInfo; const endInfo = cur_select_info.blocks[0].endInfo;
const cur_text_value = cur_block.getProperty('text').value; const curTextValue = curBlock.getProperty('text').value;
const pre_cur_text_value = cur_text_value.slice( const pre_curTextValue = curTextValue.slice(
0, 0,
start_info.arrayIndex startInfo.arrayIndex
); );
const last_cur_text_value = cur_text_value.slice( const lastCurTextValue = curTextValue.slice(
end_info.arrayIndex + 1 endInfo.arrayIndex + 1
); );
const pre_text = cur_text_value[ const preText = curTextValue[
start_info.arrayIndex startInfo.arrayIndex
].text.substring(0, start_info.offset); ].text.substring(0, startInfo.offset);
const last_text = cur_text_value[ const lastText = curTextValue[
end_info.arrayIndex endInfo.arrayIndex
].text.substring(end_info.offset); ].text.substring(endInfo.offset);
let last_block: ClipBlockInfo = blocks[blocks.length - 1]; let lastBlock: ClipBlockInfo = blocks[blocks.length - 1];
if (!this.can_edit_text(last_block.type)) { if (!this._canEditText(lastBlock.type)) {
last_block = { type: 'text', children: [] }; lastBlock = { type: 'text', children: [] };
blocks.push(last_block); blocks.push(lastBlock);
} }
const last_values = last_block.properties?.text?.value; const lastValues = lastBlock.properties?.text?.value;
last_text && last_values.push({ text: last_text }); lastText && lastValues.push({ text: lastText });
last_values.push(...last_cur_text_value); lastValues.push(...lastCurTextValue);
last_block.properties = { lastBlock.properties = {
text: { value: last_values }, text: { value: lastValues },
}; };
const insert_info = blocks[0].properties.text; const insertInfo = blocks[0].properties.text;
pre_text && pre_cur_text_value.push({ text: pre_text }); preText && pre_curTextValue.push({ text: preText });
pre_cur_text_value.push(...insert_info.value); pre_curTextValue.push(...insertInfo.value);
this.editor.blockHelper.setBlockBlur(cur_node_id); this._editor.blockHelper.setBlockBlur(curNodeId);
setTimeout(async () => { setTimeout(async () => {
const cur_block = await this.editor.getBlockById( const curBlock = await this._editor.getBlockById(curNodeId);
cur_node_id curBlock.setProperties({
); text: { value: pre_curTextValue },
cur_block.setProperties({
text: { value: pre_cur_text_value },
}); });
this.paste_children(cur_block, blocks[0].children); await this._pasteChildren(curBlock, blocks[0].children);
}, 0); }, 0);
begin_index = 1; beginIndex = 1;
} }
} }
for (let i = begin_index; i < blocks.length; i++) { for (let i = beginIndex; i < blocks.length; i++) {
const next_block = await this.editor.createBlock(blocks[i].type); const nextBlock = await this._editor.createBlock(blocks[i].type);
next_block.setProperties(blocks[i].properties); nextBlock.setProperties(blocks[i].properties);
if (cur_block.type === 'page') { if (curBlock.type === 'page') {
cur_block.prepend(next_block); curBlock.prepend(nextBlock);
} else { } else {
cur_block.after(next_block); curBlock.after(nextBlock);
} }
this.paste_children(next_block, blocks[i].children); await this._pasteChildren(nextBlock, blocks[i].children);
cur_block = next_block; curBlock = nextBlock;
} }
} }
private async paste_children(parent: AsyncBlock, children: any[]) { private async _pasteChildren(parent: AsyncBlock, children: any[]) {
for (let i = 0; i < children.length; i++) { for (let i = 0; i < children.length; i++) {
const next_block = await this.editor.createBlock(children[i].type); const nextBlock = await this._editor.createBlock(children[i].type);
next_block.setProperties(children[i].properties); nextBlock.setProperties(children[i].properties);
parent.append(next_block); await parent.append(nextBlock);
await this.paste_children(next_block, children[i].children); await this._pasteChildren(nextBlock, children[i].children);
} }
} }
private pre_copy_cut(action: ClipboardAction, e: ClipboardEvent) { private _preCopyCut(action: ClipboardAction, e: ClipboardEvent) {
switch (action) { switch (action) {
case ClipboardAction.COPY: case ClipboardAction.COPY:
this.hooks.beforeCopy(e); this._hooks.beforeCopy(e);
break; break;
case ClipboardAction.CUT: case ClipboardAction.CUT:
this.hooks.beforeCut(e); this._hooks.beforeCut(e);
break; break;
} }
} }
private dispatch_clipboard_event( private _dispatchClipboardEvent(
action: ClipboardAction, action: ClipboardAction,
e: ClipboardEvent e: ClipboardEvent
) { ) {
this.pre_copy_cut(action, e); this._preCopyCut(action, e);
} }
dispose() { dispose() {
document.removeEventListener(ClipboardAction.COPY, this.handle_copy); document.removeEventListener(ClipboardAction.COPY, this._handleCopy);
document.removeEventListener(ClipboardAction.CUT, this.handle_cut); document.removeEventListener(ClipboardAction.CUT, this._handleCut);
document.removeEventListener(ClipboardAction.PASTE, this.handle_paste); document.removeEventListener(ClipboardAction.PASTE, this._handlePaste);
this.event_target.removeEventListener( this._eventTarget.removeEventListener(
ClipboardAction.COPY, ClipboardAction.COPY,
this.handle_copy this._handleCopy
); );
this.event_target.removeEventListener( this._eventTarget.removeEventListener(
ClipboardAction.CUT, ClipboardAction.CUT,
this.handle_cut this._handleCut
); );
this.event_target.removeEventListener( this._eventTarget.removeEventListener(
ClipboardAction.PASTE, ClipboardAction.PASTE,
this.handle_paste this._handlePaste
); );
this.clipboard_parse.dispose(); this._clipboardParse.dispose();
this.clipboard_parse = null; this._clipboardParse = null;
this.event_target = null; this._eventTarget = null;
this.hooks = null; this._hooks = null;
this.editor = null; this._editor = null;
} }
} }