Skip to content

Commit

Permalink
update: #441 component copy and cut
Browse files Browse the repository at this point in the history
  • Loading branch information
JiHong88 committed Jul 18, 2020
1 parent a00db1f commit 0b0de6b
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 24 deletions.
12 changes: 10 additions & 2 deletions src/lib/core.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ type fileInfo = {
element: Element;
src: string;
};
type seledtedFileInfo = Record<string, string | Element>;
​​
interface Core {
/**
Expand Down Expand Up @@ -109,6 +110,11 @@ interface Core {
*/
currentControllerTarget: Element;

/**
* @description The file component object of current selected file tag (getFileComponent(): {target, component, pluginName})
*/
currentFileComponentInfo: seledtedFileInfo;

/**
* @description An array of buttons whose class name is not "se-code-view-enabled"
*/
Expand Down Expand Up @@ -340,11 +346,11 @@ interface Core {

/**
* @description Gets the file component and that plugin name
* return: {component, pluginName} | null
* return: {target, component, pluginName} | null
* @param element Target element (figure tag, component div, file tag)
* @returns
*/
getFileComponent(element: Element): Record<string, string | Element> | null;
getFileComponent(element: Element): seledtedFileInfo | null;

/**
* @description The component(image, video) is selected and the resizing module is called.
Expand Down Expand Up @@ -593,6 +599,8 @@ export default class SunEditor {
onChange: (contents: string, core: Core) => void;
onBlur: (e: FocusEvent, core: Core) => void;
onPaste: (e: Event, cleanData: string, maxCharCount: number, core: Core) => void;
onCopy: (e: Event, clipboardData: any, core: Core) => void;
onCut: (e: Event, clipboardData: any, core: Core) => void;

/**
* @description Called just before the inline toolbar is positioned and displayed on the screen.
Expand Down
91 changes: 69 additions & 22 deletions src/lib/core.js
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,11 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
*/
currentControllerTarget: null,

/**
* @description The file component object of current selected file tag (getFileComponent)
*/
currentFileComponentInfo: null,

/**
* @description An array of buttons whose class name is not "se-code-view-enabled"
*/
Expand Down Expand Up @@ -666,6 +671,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
}
if (!util.hasClass(arg, 'se-controller')) {
this.currentControllerTarget = arg;
this.currentFileComponentInfo = this.getFileComponent(arg);
continue;
}
if (arg.style) arg.style.display = 'block';
Expand All @@ -691,6 +697,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re

this.currentControllerName = '';
this.currentControllerTarget = null;
this.currentFileComponentInfo = null;
this.effectNode = null;
if (!this._bindControllersOff) return;

Expand Down Expand Up @@ -786,7 +793,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re

const fileComponentInfo = this.getFileComponent(focusEl);
if (fileComponentInfo) {
this.selectComponent(fileComponentInfo.component, fileComponentInfo.pluginName);
this.selectComponent(fileComponentInfo.target, fileComponentInfo.pluginName);
} else if (focusEl) {
focusEl = util.getChildElement(focusEl, function (current) { return current.childNodes.length === 0 || current.nodeType === 3; }, true);
if (!focusEl) this.nativeFocus();
Expand Down Expand Up @@ -1247,7 +1254,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re

const fileComponentInfo = this.getFileComponent(element);
if (fileComponentInfo) {
this.selectComponent(fileComponentInfo.component, fileComponentInfo.pluginName);
this.selectComponent(fileComponentInfo.target, fileComponentInfo.pluginName);
} else if (oNode) {
oNode = util.getEdgeChildNodes(oNode, null).sc || oNode;
this.setRange(oNode, 0, oNode, 0);
Expand All @@ -1261,26 +1268,27 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re

/**
* @description Gets the file component and that plugin name
* return: {component, pluginName} | null
* return: {target, component, pluginName} | null
* @param {Element} element Target element (figure tag, component div, file tag)
* @returns {Object|null}
*/
getFileComponent: function (element) {
if (!this._fileManager.queryString || !element) return null;

let fileComponent, pluginName;
let target, pluginName;
if (/^FIGURE$/i.test(element.nodeName) || /se-component/.test(element.className)) {
fileComponent = element.querySelector(this._fileManager.queryString);
target = element.querySelector(this._fileManager.queryString);
}
if (!fileComponent && element.nodeName && this._fileManager.regExp.test(element.nodeName)) {
fileComponent = element;
if (!target && element.nodeName && this._fileManager.regExp.test(element.nodeName)) {
target = element;
}

if (fileComponent) {
pluginName = this._fileManager.pluginMap[fileComponent.nodeName.toLowerCase()];
if (target) {
pluginName = this._fileManager.pluginMap[target.nodeName.toLowerCase()];
if (pluginName) {
return {
component: fileComponent,
target: target,
component: util.getParentElement(target, util.isComponent),
pluginName: pluginName
};
}
Expand All @@ -1295,6 +1303,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
* @param {String} pluginName Plugin name (image, video)
*/
selectComponent: function (element, pluginName) {
if (!this.hasFocus) this.focus();
const plugin = this.plugins[pluginName];
if (!plugin) return;
_w.setTimeout(function () {
Expand Down Expand Up @@ -5189,7 +5198,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
const fileComponentInfo = core.getFileComponent(targetElement);
if (fileComponentInfo) {
e.preventDefault();
core.selectComponent(fileComponentInfo.component, fileComponentInfo.pluginName);
core.selectComponent(fileComponentInfo.target, fileComponentInfo.pluginName);
return;
}

Expand Down Expand Up @@ -5624,7 +5633,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
e.preventDefault();
e.stopPropagation();
if (formatEl.textContent.length === 0) util.removeItem(formatEl);
core.selectComponent(fileComponentInfo.component, fileComponentInfo.pluginName);
core.selectComponent(fileComponentInfo.target, fileComponentInfo.pluginName);
}
break;
}
Expand Down Expand Up @@ -5678,7 +5687,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
const fileComponentInfo = core.getFileComponent(nextEl);
if (fileComponentInfo) {
e.stopPropagation();
core.selectComponent(fileComponentInfo.component, fileComponentInfo.pluginName);
core.selectComponent(fileComponentInfo.target, fileComponentInfo.pluginName);
}

break;
Expand Down Expand Up @@ -6309,19 +6318,53 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
return false;
},

onCut_wysiwyg: function () {
_w.setTimeout(function () {
// history stack
core.history.push(false);
});
},

onPaste_wysiwyg: function (e) {
const clipboardData = util.isIE ? _w.clipboardData : e.clipboardData;
if (!clipboardData) return true;
return event._dataTransferAction('paste', e, clipboardData);
},

_setClipboardComponent: function (e, clipboardData) {
if (core.currentFileComponentInfo) {
e.preventDefault();
e.stopPropagation();
clipboardData.setData('text/html', core.currentFileComponentInfo.component.outerHTML);
}
},

onCopy_wysiwyg: function (e) {
const clipboardData = util.isIE ? _w.clipboardData : e.clipboardData;
if (typeof functions.onCopy === 'function' && !functions.onCopy(e, clipboardData, core)) {
e.preventDefault();
e.stopPropagation();
return false;
}

if (core.currentFileComponentInfo) {
event._setClipboardComponent(e, clipboardData);
}
},

onCut_wysiwyg: function (e) {
const clipboardData = util.isIE ? _w.clipboardData : e.clipboardData;
if (typeof functions.onCut === 'function' && !functions.onCut(e, clipboardData, core)) {
e.preventDefault();
e.stopPropagation();
return false;
}

if (core.currentFileComponentInfo) {
event._setClipboardComponent(e, clipboardData);
util.removeItem(core.currentFileComponentInfo.component);
core.controllersOff();
}

_w.setTimeout(function () {
// history stack
core.history.push(false);
});
},

onDrop_wysiwyg: function (e) {
const dataTransfer = e.dataTransfer;
if (!dataTransfer) return true;
Expand Down Expand Up @@ -6509,8 +6552,9 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
eventWysiwyg.addEventListener(util.isIE ? 'textinput' : 'input', event.onInput_wysiwyg, false);
eventWysiwyg.addEventListener('keydown', event.onKeyDown_wysiwyg, false);
eventWysiwyg.addEventListener('keyup', event.onKeyUp_wysiwyg, false);
eventWysiwyg.addEventListener('paste', event.onPaste_wysiwyg, false);
eventWysiwyg.addEventListener('copy', event.onCopy_wysiwyg, false);
eventWysiwyg.addEventListener('cut', event.onCut_wysiwyg, false);
eventWysiwyg.addEventListener('paste', event.onPaste_wysiwyg, false);
eventWysiwyg.addEventListener('drop', event.onDrop_wysiwyg, false);
eventWysiwyg.addEventListener('scroll', event.onScroll_wysiwyg, false);
eventWysiwyg.addEventListener('focus', event.onFocus_wysiwyg, false);
Expand Down Expand Up @@ -6568,8 +6612,9 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
eventWysiwyg.removeEventListener(util.isIE ? 'textinput' : 'input', event.onInput_wysiwyg);
eventWysiwyg.removeEventListener('keydown', event.onKeyDown_wysiwyg);
eventWysiwyg.removeEventListener('keyup', event.onKeyUp_wysiwyg);
eventWysiwyg.removeEventListener('paste', event.onPaste_wysiwyg);
eventWysiwyg.removeEventListener('copy', event.onCopy_wysiwyg);
eventWysiwyg.removeEventListener('cut', event.onCut_wysiwyg);
eventWysiwyg.removeEventListener('paste', event.onPaste_wysiwyg);
eventWysiwyg.removeEventListener('drop', event.onDrop_wysiwyg);
eventWysiwyg.removeEventListener('scroll', event.onScroll_wysiwyg);

Expand Down Expand Up @@ -6636,6 +6681,8 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
onKeyUp: null,
onDrop: null,
onChange: null,
onCopy: null,
onCut: null,
onPaste: null,
onFocus: null,
onBlur: null,
Expand Down

0 comments on commit 0b0de6b

Please sign in to comment.