@syncfusion/ej2-richtexteditor 25.2.3 → 25.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +30 -2
- package/dist/ej2-richtexteditor.min.js +2 -2
- package/dist/ej2-richtexteditor.umd.min.js +2 -2
- package/dist/ej2-richtexteditor.umd.min.js.map +1 -1
- package/dist/es6/ej2-richtexteditor.es2015.js +236 -114
- package/dist/es6/ej2-richtexteditor.es2015.js.map +1 -1
- package/dist/es6/ej2-richtexteditor.es5.js +238 -113
- package/dist/es6/ej2-richtexteditor.es5.js.map +1 -1
- package/dist/global/ej2-richtexteditor.min.js +2 -2
- package/dist/global/ej2-richtexteditor.min.js.map +1 -1
- package/dist/global/index.d.ts +1 -1
- package/package.json +11 -11
- package/src/common/util.js +4 -1
- package/src/editor-manager/base/editor-manager.js +5 -3
- package/src/editor-manager/plugin/alignments.js +3 -0
- package/src/editor-manager/plugin/dom-node.d.ts +20 -0
- package/src/editor-manager/plugin/dom-node.js +105 -2
- package/src/editor-manager/plugin/formats.js +1 -1
- package/src/editor-manager/plugin/indents.js +3 -0
- package/src/editor-manager/plugin/lists.d.ts +0 -1
- package/src/editor-manager/plugin/lists.js +2 -76
- package/src/rich-text-editor/actions/full-screen.js +0 -6
- package/src/rich-text-editor/actions/html-editor.d.ts +1 -0
- package/src/rich-text-editor/actions/html-editor.js +62 -9
- package/src/rich-text-editor/actions/paste-clean-up.d.ts +1 -0
- package/src/rich-text-editor/actions/paste-clean-up.js +41 -5
- package/src/rich-text-editor/base/rich-text-editor.d.ts +1 -0
- package/src/rich-text-editor/base/rich-text-editor.js +6 -2
- package/src/rich-text-editor/renderer/toolbar-renderer.js +7 -9
|
@@ -4574,11 +4574,14 @@ function nestedListCleanUp(range) {
|
|
|
4574
4574
|
item.remove();
|
|
4575
4575
|
});
|
|
4576
4576
|
}
|
|
4577
|
+
else {
|
|
4578
|
+
break;
|
|
4579
|
+
}
|
|
4577
4580
|
}
|
|
4578
4581
|
let liElem = (range.startContainer.nodeName === "#text" ? range.startContainer.parentElement : range.startContainer).querySelectorAll("li");
|
|
4579
4582
|
if (liElem.length > 0) {
|
|
4580
4583
|
liElem.forEach((item) => {
|
|
4581
|
-
if (item.firstChild.nodeName === "OL" || item.firstChild.nodeName === "UL") {
|
|
4584
|
+
if (!isNullOrUndefined(item.firstChild) && (item.firstChild.nodeName === "OL" || item.firstChild.nodeName === "UL")) {
|
|
4582
4585
|
item.style.listStyleType = "none";
|
|
4583
4586
|
}
|
|
4584
4587
|
});
|
|
@@ -5449,8 +5452,6 @@ class ToolbarRenderer {
|
|
|
5449
5452
|
target: colorPicker.element.parentElement, cssClass: css,
|
|
5450
5453
|
enablePersistence: this.parent.enablePersistence, enableRtl: this.parent.enableRtl,
|
|
5451
5454
|
beforeOpen: (dropDownArgs) => {
|
|
5452
|
-
colorPicker.inline = true;
|
|
5453
|
-
colorPicker.dataBind();
|
|
5454
5455
|
if (proxy.parent.readonly || !proxy.parent.enabled) {
|
|
5455
5456
|
dropDownArgs.cancel = true;
|
|
5456
5457
|
return;
|
|
@@ -5588,14 +5589,18 @@ class ToolbarRenderer {
|
|
|
5588
5589
|
const colorPicker = new ColorPicker({
|
|
5589
5590
|
enablePersistence: this.parent.enablePersistence,
|
|
5590
5591
|
enableRtl: this.parent.enableRtl,
|
|
5591
|
-
inline:
|
|
5592
|
-
value:
|
|
5592
|
+
inline: true,
|
|
5593
|
+
value: null,
|
|
5594
|
+
cssClass: ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER) + ' ' + args.cssClass + ' ' + 'e-rte-picker-init',
|
|
5593
5595
|
created: () => {
|
|
5594
5596
|
const value = (item === 'backgroundcolor') ? proxy.parent.backgroundColor.default : proxy.parent.fontColor.default;
|
|
5595
|
-
colorPicker.
|
|
5597
|
+
colorPicker.cssClass = ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER) + ' ' + args.cssClass;
|
|
5598
|
+
colorPicker.value = value;
|
|
5596
5599
|
},
|
|
5597
5600
|
mode: ((item === 'backgroundcolor') ? proxy.parent.backgroundColor.mode : proxy.parent.fontColor.mode),
|
|
5598
5601
|
modeSwitcher: ((item === 'backgroundcolor') ? proxy.parent.backgroundColor.modeSwitcher : proxy.parent.fontColor.modeSwitcher),
|
|
5602
|
+
presetColors: (item === 'backgroundcolor') ? this.parent.backgroundColor.colorCode : this.parent.fontColor.colorCode,
|
|
5603
|
+
columns: (item === 'backgroundcolor') ? this.parent.backgroundColor.columns : this.parent.fontColor.columns,
|
|
5599
5604
|
beforeTileRender: (args) => {
|
|
5600
5605
|
args.element.classList.add(CLS_COLOR_PALETTE);
|
|
5601
5606
|
args.element.classList.add(CLS_CUSTOM_TILE);
|
|
@@ -5640,10 +5645,6 @@ class ToolbarRenderer {
|
|
|
5640
5645
|
}
|
|
5641
5646
|
});
|
|
5642
5647
|
colorPicker.isStringTemplate = true;
|
|
5643
|
-
colorPicker.columns = (item === 'backgroundcolor') ? this.parent.backgroundColor.columns : this.parent.fontColor.columns;
|
|
5644
|
-
colorPicker.presetColors = (item === 'backgroundcolor') ? this.parent.backgroundColor.colorCode :
|
|
5645
|
-
this.parent.fontColor.colorCode;
|
|
5646
|
-
colorPicker.cssClass = ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER) + ' ' + args.cssClass;
|
|
5647
5648
|
colorPicker.createElement = this.parent.createElement;
|
|
5648
5649
|
colorPicker.appendTo(document.getElementById(args.target));
|
|
5649
5650
|
return colorPicker;
|
|
@@ -12250,7 +12251,7 @@ class DOMNode {
|
|
|
12250
12251
|
unWrap(element) {
|
|
12251
12252
|
const parent = element.parentNode;
|
|
12252
12253
|
let unWrapNode = [];
|
|
12253
|
-
while (element.firstChild) {
|
|
12254
|
+
while (element.firstChild && (element.previousSibling !== this.parent.querySelector('.e-mention-chip') || element.textContent !== ' ')) {
|
|
12254
12255
|
unWrapNode.push(element.firstChild);
|
|
12255
12256
|
parent.insertBefore(element.firstChild, element);
|
|
12256
12257
|
}
|
|
@@ -12600,6 +12601,109 @@ class DOMNode {
|
|
|
12600
12601
|
}
|
|
12601
12602
|
return null;
|
|
12602
12603
|
}
|
|
12604
|
+
/**
|
|
12605
|
+
* Method to wrap the inline and text node with block node.
|
|
12606
|
+
*
|
|
12607
|
+
* @param {HTMLElement} node - specifies the element sent to wrap the node around it with block nodes.
|
|
12608
|
+
* @param {string} wrapperElement - specifies which block nodes to wrap around.
|
|
12609
|
+
* @returns {HTMLElement} - returns the wrapped element.
|
|
12610
|
+
* @hidden
|
|
12611
|
+
* @deprecated
|
|
12612
|
+
*/
|
|
12613
|
+
gatherElementsAround(node, wrapperElement) {
|
|
12614
|
+
const newWrapElem = createElement(wrapperElement);
|
|
12615
|
+
// Insert the new div element before the current node.
|
|
12616
|
+
let currentNode = node.previousSibling;
|
|
12617
|
+
const currentNodeParent = node.parentElement;
|
|
12618
|
+
if (currentNodeParent.className === 'e-editor-select-start') {
|
|
12619
|
+
currentNodeParent.parentNode.insertBefore(newWrapElem, currentNodeParent);
|
|
12620
|
+
}
|
|
12621
|
+
else if (currentNodeParent) {
|
|
12622
|
+
currentNodeParent.insertBefore(newWrapElem, node);
|
|
12623
|
+
}
|
|
12624
|
+
let i = 0;
|
|
12625
|
+
while (currentNode !== null && currentNode.nodeName !== 'BR' &&
|
|
12626
|
+
!this.isBlockNode(currentNode)) {
|
|
12627
|
+
const prevSibling = currentNode.previousSibling;
|
|
12628
|
+
if (currentNode.nodeType === 3 || currentNode.nodeType === 1) {
|
|
12629
|
+
if (i === 0) {
|
|
12630
|
+
newWrapElem.appendChild(currentNode);
|
|
12631
|
+
}
|
|
12632
|
+
else {
|
|
12633
|
+
newWrapElem.insertBefore(currentNode, newWrapElem.firstChild);
|
|
12634
|
+
}
|
|
12635
|
+
}
|
|
12636
|
+
currentNode = prevSibling;
|
|
12637
|
+
i++;
|
|
12638
|
+
}
|
|
12639
|
+
// Add the current node to the new div
|
|
12640
|
+
newWrapElem.appendChild(node);
|
|
12641
|
+
// Gather text and inline elements after the currentNode
|
|
12642
|
+
currentNode = newWrapElem.nextSibling ? newWrapElem.nextSibling :
|
|
12643
|
+
newWrapElem.parentElement.nextSibling;
|
|
12644
|
+
while (currentNode !== null && currentNode.nodeName !== 'BR' &&
|
|
12645
|
+
!this.isBlockNode(currentNode)) {
|
|
12646
|
+
const nextSibling = currentNode.nextSibling ?
|
|
12647
|
+
currentNode.nextSibling : currentNode.parentElement.nextSibling;
|
|
12648
|
+
if (currentNode.nodeType === 3 || currentNode.nodeType === 1) {
|
|
12649
|
+
newWrapElem.appendChild(currentNode);
|
|
12650
|
+
}
|
|
12651
|
+
currentNode = nextSibling;
|
|
12652
|
+
}
|
|
12653
|
+
return newWrapElem;
|
|
12654
|
+
}
|
|
12655
|
+
/**
|
|
12656
|
+
* Method to convert all the inline nodes between the selection to block nodes.
|
|
12657
|
+
*
|
|
12658
|
+
* @param {Node[]} selectedNodes - specifies the nodes of the start and end selection.
|
|
12659
|
+
* @param {boolean} fromList - specifies if the method is called from list module.
|
|
12660
|
+
* @returns {Node[]} - returns the selected list of elements as block nodes.
|
|
12661
|
+
* @hidden
|
|
12662
|
+
* @deprecated
|
|
12663
|
+
*/
|
|
12664
|
+
convertToBlockNodes(selectedNodes, fromList) {
|
|
12665
|
+
if (selectedNodes.length > 1) {
|
|
12666
|
+
let i = 0;
|
|
12667
|
+
let currentSelectedNode = selectedNodes[0];
|
|
12668
|
+
while (!isNullOrUndefined(currentSelectedNode)) {
|
|
12669
|
+
if (currentSelectedNode.nodeName === 'BR') {
|
|
12670
|
+
const nextNode = currentSelectedNode.nextSibling;
|
|
12671
|
+
detach(currentSelectedNode);
|
|
12672
|
+
currentSelectedNode = nextNode;
|
|
12673
|
+
}
|
|
12674
|
+
if (!isNullOrUndefined(currentSelectedNode)) {
|
|
12675
|
+
if (fromList) {
|
|
12676
|
+
selectedNodes[i] = currentSelectedNode.nodeName === 'LI' || this.isBlockNode(currentSelectedNode) ?
|
|
12677
|
+
currentSelectedNode :
|
|
12678
|
+
this.gatherElementsAround(currentSelectedNode, (fromList ? 'p' : 'div'));
|
|
12679
|
+
}
|
|
12680
|
+
else {
|
|
12681
|
+
selectedNodes[i] = !this.isBlockNode(selectedNodes[i]) ?
|
|
12682
|
+
this.gatherElementsAround(currentSelectedNode, (fromList ? 'p' : 'div')) :
|
|
12683
|
+
selectedNodes[i];
|
|
12684
|
+
}
|
|
12685
|
+
const currentProcessNode = selectedNodes[i].nodeName === 'LI' ? selectedNodes[i].parentElement : selectedNodes[i];
|
|
12686
|
+
const currentElementCheckNode = currentProcessNode.nodeName === '#text' ? currentProcessNode.parentElement : currentProcessNode;
|
|
12687
|
+
currentSelectedNode = !isNullOrUndefined(currentElementCheckNode.querySelector('.e-editor-select-end')) ||
|
|
12688
|
+
!isNullOrUndefined(closest(currentSelectedNode, '.e-editor-select-end')) ?
|
|
12689
|
+
null : currentProcessNode.nextSibling;
|
|
12690
|
+
if (currentSelectedNode === null && !isNullOrUndefined(currentProcessNode.nextSibling) && currentProcessNode.nextSibling.nodeName === 'BR') {
|
|
12691
|
+
detach(currentProcessNode.nextSibling);
|
|
12692
|
+
}
|
|
12693
|
+
}
|
|
12694
|
+
i++;
|
|
12695
|
+
}
|
|
12696
|
+
}
|
|
12697
|
+
else {
|
|
12698
|
+
if (!this.isBlockNode(selectedNodes[0])) {
|
|
12699
|
+
selectedNodes[0] = this.gatherElementsAround(selectedNodes[0], (fromList ? 'p' : 'div'));
|
|
12700
|
+
if (!isNullOrUndefined(selectedNodes[0].nextSibling) && (selectedNodes[0].nextSibling.nodeName === 'BR')) {
|
|
12701
|
+
detach(selectedNodes[0].nextSibling);
|
|
12702
|
+
}
|
|
12703
|
+
}
|
|
12704
|
+
}
|
|
12705
|
+
return selectedNodes;
|
|
12706
|
+
}
|
|
12603
12707
|
/**
|
|
12604
12708
|
* blockNodes method
|
|
12605
12709
|
*
|
|
@@ -13405,39 +13509,7 @@ class Lists {
|
|
|
13405
13509
|
let listsNodes = this.domNode.blockNodes(true);
|
|
13406
13510
|
if (e.enterAction === 'BR') {
|
|
13407
13511
|
this.setSelectionBRConfig();
|
|
13408
|
-
|
|
13409
|
-
if (selectedNodes.length > 1) {
|
|
13410
|
-
let i = 0;
|
|
13411
|
-
let currentAlignmentNode = selectedNodes[0];
|
|
13412
|
-
while (!isNullOrUndefined(currentAlignmentNode)) {
|
|
13413
|
-
if (currentAlignmentNode.nodeName === 'BR') {
|
|
13414
|
-
const nextNode = currentAlignmentNode.nextSibling;
|
|
13415
|
-
detach(currentAlignmentNode);
|
|
13416
|
-
currentAlignmentNode = nextNode;
|
|
13417
|
-
}
|
|
13418
|
-
if (!isNullOrUndefined(currentAlignmentNode)) {
|
|
13419
|
-
selectedNodes[i] = currentAlignmentNode.nodeName === 'LI' || this.parent.domNode.isBlockNode(currentAlignmentNode) ?
|
|
13420
|
-
currentAlignmentNode : this.gatherElementsAround(currentAlignmentNode);
|
|
13421
|
-
const currentSelectNode = selectedNodes[i].nodeName === 'LI' ? selectedNodes[i].parentElement : selectedNodes[i];
|
|
13422
|
-
const currentElementCheckNode = currentAlignmentNode.nodeName === '#text' ? currentAlignmentNode.parentElement : currentAlignmentNode;
|
|
13423
|
-
currentAlignmentNode = !isNullOrUndefined(currentElementCheckNode.querySelector('.e-editor-select-end')) ||
|
|
13424
|
-
!isNullOrUndefined(closest(currentAlignmentNode, '.e-editor-select-end')) ?
|
|
13425
|
-
null : currentSelectNode.nextSibling;
|
|
13426
|
-
if (currentAlignmentNode === null && !isNullOrUndefined(currentSelectNode.nextSibling) && currentSelectNode.nextSibling.nodeName === 'BR') {
|
|
13427
|
-
detach(currentSelectNode.nextSibling);
|
|
13428
|
-
}
|
|
13429
|
-
}
|
|
13430
|
-
i++;
|
|
13431
|
-
}
|
|
13432
|
-
}
|
|
13433
|
-
else {
|
|
13434
|
-
if (!this.parent.domNode.isBlockNode(selectedNodes[0])) {
|
|
13435
|
-
selectedNodes[0] = this.gatherElementsAround(selectedNodes[0]);
|
|
13436
|
-
if (!isNullOrUndefined(selectedNodes[0].nextSibling) && (selectedNodes[0].nextSibling.nodeName === 'BR')) {
|
|
13437
|
-
detach(selectedNodes[0].nextSibling);
|
|
13438
|
-
}
|
|
13439
|
-
}
|
|
13440
|
-
}
|
|
13512
|
+
this.parent.domNode.convertToBlockNodes(this.parent.domNode.blockNodes(), true);
|
|
13441
13513
|
this.setSelectionBRConfig();
|
|
13442
13514
|
listsNodes = this.parent.domNode.blockNodes();
|
|
13443
13515
|
}
|
|
@@ -13739,7 +13811,7 @@ class Lists {
|
|
|
13739
13811
|
parentNode.removeAttribute("style");
|
|
13740
13812
|
}
|
|
13741
13813
|
}
|
|
13742
|
-
const wrapper = '<' +
|
|
13814
|
+
const wrapper = '<' + e.enterAction + wrapperclass + this.domNode.attributes(element) + '></' + e.enterAction + '>';
|
|
13743
13815
|
if (e.enterAction !== 'BR') {
|
|
13744
13816
|
this.domNode.wrapInner(element, this.domNode.parseHTMLFragment(wrapper));
|
|
13745
13817
|
}
|
|
@@ -13813,48 +13885,6 @@ class Lists {
|
|
|
13813
13885
|
closeTag(type) {
|
|
13814
13886
|
return this.domNode.parseHTMLFragment('<span class="e-rte-list-close-' + type.toLowerCase() + '"></span>');
|
|
13815
13887
|
}
|
|
13816
|
-
gatherElementsAround(node) {
|
|
13817
|
-
const pWrap = document.createElement('p');
|
|
13818
|
-
// Insert the new div before the current node
|
|
13819
|
-
let currentNode = node.previousSibling;
|
|
13820
|
-
const classNode = node.parentNode;
|
|
13821
|
-
if (classNode.className === 'e-editor-select-start') {
|
|
13822
|
-
node.parentNode.parentNode.insertBefore(pWrap, node.parentNode);
|
|
13823
|
-
}
|
|
13824
|
-
else if (node.parentNode) {
|
|
13825
|
-
node.parentNode.insertBefore(pWrap, node);
|
|
13826
|
-
}
|
|
13827
|
-
// Gather text and inline elements before the currentNode
|
|
13828
|
-
let i = 0;
|
|
13829
|
-
while (currentNode !== null && currentNode.nodeName !== 'BR' &&
|
|
13830
|
-
!this.parent.domNode.isBlockNode(currentNode)) {
|
|
13831
|
-
const prevSibling = currentNode.previousSibling;
|
|
13832
|
-
if (currentNode.nodeType === 3 || currentNode.nodeType === 1) {
|
|
13833
|
-
if (i === 0) {
|
|
13834
|
-
pWrap.appendChild(currentNode);
|
|
13835
|
-
}
|
|
13836
|
-
else {
|
|
13837
|
-
pWrap.insertBefore(currentNode, pWrap.firstChild);
|
|
13838
|
-
}
|
|
13839
|
-
}
|
|
13840
|
-
currentNode = prevSibling;
|
|
13841
|
-
i++;
|
|
13842
|
-
}
|
|
13843
|
-
// Add the current node to the new p
|
|
13844
|
-
pWrap.appendChild(node);
|
|
13845
|
-
// Gather text and inline elements after the currentNode
|
|
13846
|
-
currentNode = pWrap.nextSibling ? pWrap.nextSibling : pWrap.parentElement.nextSibling;
|
|
13847
|
-
while (currentNode !== null && currentNode.nodeName !== 'BR' &&
|
|
13848
|
-
!this.parent.domNode.isBlockNode(currentNode)) {
|
|
13849
|
-
const nextSibling = currentNode.nextSibling ?
|
|
13850
|
-
currentNode.nextSibling : currentNode.parentElement.nextSibling;
|
|
13851
|
-
if (currentNode.nodeType === 3 || currentNode.nodeType === 1) {
|
|
13852
|
-
pWrap.appendChild(currentNode);
|
|
13853
|
-
}
|
|
13854
|
-
currentNode = nextSibling;
|
|
13855
|
-
}
|
|
13856
|
-
return pWrap;
|
|
13857
|
-
}
|
|
13858
13888
|
}
|
|
13859
13889
|
|
|
13860
13890
|
/**
|
|
@@ -14189,8 +14219,8 @@ class Formats {
|
|
|
14189
14219
|
}
|
|
14190
14220
|
}
|
|
14191
14221
|
}
|
|
14192
|
-
if (e.enterAction !== 'BR' && !isNullOrUndefined(range.startContainer) && !isNullOrUndefined(range.startContainer.parentElement) && range.startContainer === range.endContainer && range.startContainer.nodeName === '#text' && range.startContainer.parentElement.classList.contains(
|
|
14193
|
-
|
|
14222
|
+
if (e.enterAction !== 'BR' && !isNullOrUndefined(range.startContainer) && !isNullOrUndefined(range.startContainer.parentElement) && range.startContainer === range.endContainer && range.startContainer.nodeName === '#text' && range.startContainer.parentElement.classList.contains('e-content') && range.startContainer.parentElement.isContentEditable) {
|
|
14223
|
+
const pTag = createElement(e.enterAction);
|
|
14194
14224
|
range.startContainer.parentElement.insertBefore(pTag, range.startContainer);
|
|
14195
14225
|
pTag.appendChild(range.startContainer);
|
|
14196
14226
|
this.parent.nodeSelection.setCursorPoint(this.parent.currentDocument, pTag, 1);
|
|
@@ -15530,7 +15560,10 @@ class Alignments {
|
|
|
15530
15560
|
let save = this.parent.nodeSelection.save(range, this.parent.currentDocument);
|
|
15531
15561
|
if (!isTableAlign) {
|
|
15532
15562
|
this.parent.domNode.setMarker(save);
|
|
15533
|
-
|
|
15563
|
+
let alignmentNodes = this.parent.domNode.blockNodes();
|
|
15564
|
+
if (e.enterAction === 'BR') {
|
|
15565
|
+
alignmentNodes = this.parent.domNode.convertToBlockNodes(alignmentNodes, false);
|
|
15566
|
+
}
|
|
15534
15567
|
for (let i = 0; i < alignmentNodes.length; i++) {
|
|
15535
15568
|
const parentNode = alignmentNodes[i];
|
|
15536
15569
|
setStyleAttribute(parentNode, { 'text-align': this.alignments[e.subCommand] });
|
|
@@ -15612,7 +15645,10 @@ class Indents {
|
|
|
15612
15645
|
const range = this.parent.nodeSelection.getRange(this.parent.currentDocument);
|
|
15613
15646
|
let save = this.parent.nodeSelection.save(range, this.parent.currentDocument);
|
|
15614
15647
|
this.parent.domNode.setMarker(save);
|
|
15615
|
-
|
|
15648
|
+
let indentsNodes = this.parent.domNode.blockNodes();
|
|
15649
|
+
if (e.enterAction === 'BR') {
|
|
15650
|
+
indentsNodes = this.parent.domNode.convertToBlockNodes(indentsNodes, false);
|
|
15651
|
+
}
|
|
15616
15652
|
const parentNodes = indentsNodes.slice();
|
|
15617
15653
|
const listsNodes = [];
|
|
15618
15654
|
for (let i = 0; i < parentNodes.length; i++) {
|
|
@@ -20970,12 +21006,14 @@ class EditorManager {
|
|
|
20970
21006
|
case 'alignments':
|
|
20971
21007
|
this.observer.notify(ALIGNMENT_TYPE, {
|
|
20972
21008
|
subCommand: value, event: event, callBack: callBack,
|
|
20973
|
-
selector: selector,
|
|
20974
|
-
value: exeValue
|
|
21009
|
+
selector: selector, value: exeValue, enterAction: enterAction
|
|
20975
21010
|
});
|
|
20976
21011
|
break;
|
|
20977
21012
|
case 'indents':
|
|
20978
|
-
this.observer.notify(INDENT_TYPE, {
|
|
21013
|
+
this.observer.notify(INDENT_TYPE, {
|
|
21014
|
+
subCommand: value, event: event, callBack: callBack,
|
|
21015
|
+
selector: selector, enterAction: enterAction
|
|
21016
|
+
});
|
|
20979
21017
|
break;
|
|
20980
21018
|
case 'links':
|
|
20981
21019
|
this.observer.notify(LINK, { command: command, value: value, item: exeValue, event: event, callBack: callBack });
|
|
@@ -21921,25 +21959,54 @@ class HtmlEditor {
|
|
|
21921
21959
|
this.deleteCleanup(e, currentRange);
|
|
21922
21960
|
}
|
|
21923
21961
|
if (args.keyCode === 9 && this.parent.enableTabKey) {
|
|
21962
|
+
this.parent.formatter.saveData(e);
|
|
21924
21963
|
if (!isNullOrUndefined(args.target) && isNullOrUndefined(closest(args.target, '.e-rte-toolbar'))) {
|
|
21925
21964
|
const range = this.nodeSelectionObj.getRange(this.contentRenderer.getDocument());
|
|
21926
21965
|
const parentNode = this.nodeSelectionObj.getParentNodeCollection(range);
|
|
21927
21966
|
if (!((parentNode[0].nodeName === 'LI' || closest(parentNode[0], 'li') ||
|
|
21928
21967
|
closest(parentNode[0], 'table')) && range.startOffset === 0)) {
|
|
21929
21968
|
args.preventDefault();
|
|
21930
|
-
|
|
21931
|
-
|
|
21932
|
-
|
|
21969
|
+
const selection = this.contentRenderer.getDocument().getSelection().getRangeAt(0);
|
|
21970
|
+
let alignmentNodes = this.parent.formatter.editorManager.domNode.blockNodes();
|
|
21971
|
+
if (this.parent.enterKey === 'BR') {
|
|
21972
|
+
if (selection.startOffset !== selection.endOffset && selection.startOffset === 0) {
|
|
21973
|
+
let save = this.nodeSelectionObj.save(range, this.contentRenderer.getDocument());
|
|
21974
|
+
this.parent.formatter.editorManager.domNode.setMarker(save);
|
|
21975
|
+
alignmentNodes = this.parent.formatter.editorManager.domNode.blockNodes();
|
|
21976
|
+
this.parent.formatter.editorManager.domNode.convertToBlockNodes(alignmentNodes, false);
|
|
21977
|
+
this.marginTabAdd(args.shiftKey, alignmentNodes);
|
|
21978
|
+
save = this.parent.formatter.editorManager.domNode.saveMarker(save);
|
|
21979
|
+
save.restore();
|
|
21980
|
+
}
|
|
21981
|
+
else {
|
|
21982
|
+
InsertHtml.Insert(this.contentRenderer.getDocument(), ' ');
|
|
21983
|
+
this.rangeCollection.push(this.nodeSelectionObj.getRange(this.contentRenderer.getDocument()));
|
|
21984
|
+
}
|
|
21933
21985
|
}
|
|
21934
|
-
else
|
|
21935
|
-
|
|
21936
|
-
|
|
21937
|
-
|
|
21938
|
-
|
|
21939
|
-
|
|
21986
|
+
else {
|
|
21987
|
+
if (!args.shiftKey) {
|
|
21988
|
+
if (selection.startOffset !== selection.endOffset && selection.startOffset === 0) {
|
|
21989
|
+
this.marginTabAdd(args.shiftKey, alignmentNodes);
|
|
21990
|
+
}
|
|
21991
|
+
else {
|
|
21992
|
+
InsertHtml.Insert(this.contentRenderer.getDocument(), ' ');
|
|
21993
|
+
this.rangeCollection.push(this.nodeSelectionObj.getRange(this.contentRenderer.getDocument()));
|
|
21994
|
+
}
|
|
21995
|
+
}
|
|
21996
|
+
else if (this.rangeCollection.length > 0 &&
|
|
21997
|
+
this.rangeCollection[this.rangeCollection.length - 1].startContainer.textContent.length === 4) {
|
|
21998
|
+
const textCont = this.rangeCollection[this.rangeCollection.length - 1].startContainer;
|
|
21999
|
+
this.nodeSelectionObj.setSelectionText(this.contentRenderer.getDocument(), textCont, textCont, 0, textCont.textContent.length);
|
|
22000
|
+
InsertHtml.Insert(this.contentRenderer.getDocument(), document.createTextNode(''));
|
|
22001
|
+
this.rangeCollection.pop();
|
|
22002
|
+
}
|
|
22003
|
+
else {
|
|
22004
|
+
this.marginTabAdd(args.shiftKey, alignmentNodes);
|
|
22005
|
+
}
|
|
21940
22006
|
}
|
|
21941
22007
|
}
|
|
21942
22008
|
}
|
|
22009
|
+
this.parent.formatter.saveData(e);
|
|
21943
22010
|
}
|
|
21944
22011
|
if (e.args.action === 'space' ||
|
|
21945
22012
|
e.args.action === 'enter' ||
|
|
@@ -22601,6 +22668,30 @@ class HtmlEditor {
|
|
|
22601
22668
|
getSelectedHtml(e) {
|
|
22602
22669
|
e.callBack(this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument()).toString());
|
|
22603
22670
|
}
|
|
22671
|
+
marginTabAdd(val, alignmentNodes) {
|
|
22672
|
+
for (let index = 0; index < alignmentNodes.length; index++) {
|
|
22673
|
+
const element = alignmentNodes[index];
|
|
22674
|
+
if (element.closest('li')) {
|
|
22675
|
+
continue;
|
|
22676
|
+
}
|
|
22677
|
+
if (element.style.marginLeft) {
|
|
22678
|
+
let count$$1 = parseInt(element.style.marginLeft, 10);
|
|
22679
|
+
if (val) {
|
|
22680
|
+
count$$1 -= 20;
|
|
22681
|
+
}
|
|
22682
|
+
else {
|
|
22683
|
+
count$$1 += 20;
|
|
22684
|
+
}
|
|
22685
|
+
element.style.marginLeft = count$$1.toString() + 'px';
|
|
22686
|
+
if (element.style.marginLeft === '0px') {
|
|
22687
|
+
element.removeAttribute('style');
|
|
22688
|
+
}
|
|
22689
|
+
}
|
|
22690
|
+
else if (!val) {
|
|
22691
|
+
element.style.marginLeft = '20px';
|
|
22692
|
+
}
|
|
22693
|
+
}
|
|
22694
|
+
}
|
|
22604
22695
|
}
|
|
22605
22696
|
|
|
22606
22697
|
/**
|
|
@@ -23309,6 +23400,28 @@ class PasteCleanup {
|
|
|
23309
23400
|
this.cropImageHandler(this.parent.inputElement);
|
|
23310
23401
|
}
|
|
23311
23402
|
}
|
|
23403
|
+
convertBlobToBase64(element) {
|
|
23404
|
+
const imgElem = element.querySelectorAll('img');
|
|
23405
|
+
for (let i = 0; i < imgElem.length; i++) {
|
|
23406
|
+
if (imgElem[i].getAttribute('src') &&
|
|
23407
|
+
imgElem[i].getAttribute('src').startsWith("blob")) {
|
|
23408
|
+
let blobImageUrl = imgElem[i].getAttribute('src');
|
|
23409
|
+
let img = new Image();
|
|
23410
|
+
const onImageLoadEvent = () => {
|
|
23411
|
+
let canvas = document.createElement('canvas');
|
|
23412
|
+
let ctx = canvas.getContext('2d');
|
|
23413
|
+
canvas.width = img.width;
|
|
23414
|
+
canvas.height = img.height;
|
|
23415
|
+
ctx.drawImage(img, 0, 0);
|
|
23416
|
+
let base64String = canvas.toDataURL('image/png');
|
|
23417
|
+
imgElem[i].src = base64String;
|
|
23418
|
+
img.removeEventListener('load', onImageLoadEvent);
|
|
23419
|
+
};
|
|
23420
|
+
img.src = blobImageUrl;
|
|
23421
|
+
img.addEventListener('load', onImageLoadEvent);
|
|
23422
|
+
}
|
|
23423
|
+
}
|
|
23424
|
+
}
|
|
23312
23425
|
cropImageHandler(element) {
|
|
23313
23426
|
const allImgElm = element.querySelectorAll('.e-img-cropped');
|
|
23314
23427
|
if (allImgElm.length > 0) {
|
|
@@ -23347,9 +23460,20 @@ class PasteCleanup {
|
|
|
23347
23460
|
}
|
|
23348
23461
|
}
|
|
23349
23462
|
else {
|
|
23350
|
-
this.
|
|
23351
|
-
|
|
23352
|
-
|
|
23463
|
+
if (!isNullOrUndefined(this.parent.insertImageSettings.saveUrl) && !isNullOrUndefined(this.parent.insertImageSettings.path) && !isNullOrUndefined(this.parent.inputElement.querySelectorAll("img")) && this.parent.inputElement.querySelectorAll("img")[0].src.startsWith("blob")) {
|
|
23464
|
+
this.convertBlobToBase64(this.parent.inputElement);
|
|
23465
|
+
setTimeout(() => {
|
|
23466
|
+
this.imgUploading(this.parent.inputElement);
|
|
23467
|
+
if (this.parent.iframeSettings.enable) {
|
|
23468
|
+
this.parent.updateValue();
|
|
23469
|
+
}
|
|
23470
|
+
}, 20);
|
|
23471
|
+
}
|
|
23472
|
+
else {
|
|
23473
|
+
this.imgUploading(this.parent.inputElement);
|
|
23474
|
+
if (this.parent.iframeSettings.enable) {
|
|
23475
|
+
this.parent.updateValue();
|
|
23476
|
+
}
|
|
23353
23477
|
}
|
|
23354
23478
|
}
|
|
23355
23479
|
}
|
|
@@ -24129,9 +24253,6 @@ class FullScreen {
|
|
|
24129
24253
|
&& !isNullOrUndefined(this.parent.quickToolbarModule)) {
|
|
24130
24254
|
this.parent.quickToolbarModule.hideQuickToolbars();
|
|
24131
24255
|
}
|
|
24132
|
-
if (this.parent.showTooltip && !isNullOrUndefined(document.querySelector('.e-tooltip-wrap'))) {
|
|
24133
|
-
this.parent.notify(destroyTooltip, { args: event });
|
|
24134
|
-
}
|
|
24135
24256
|
this.scrollableParent = getScrollableParent(this.parent.element);
|
|
24136
24257
|
if (!this.parent.element.classList.contains(CLS_FULL_SCREEN)) {
|
|
24137
24258
|
const evenArgs = {
|
|
@@ -24183,9 +24304,6 @@ class FullScreen {
|
|
|
24183
24304
|
&& !isNullOrUndefined(this.parent.quickToolbarModule)) {
|
|
24184
24305
|
this.parent.quickToolbarModule.hideQuickToolbars();
|
|
24185
24306
|
}
|
|
24186
|
-
if (this.parent.showTooltip && !isNullOrUndefined(document.querySelector('.e-tooltip-wrap'))) {
|
|
24187
|
-
this.parent.notify(destroyTooltip, { args: event });
|
|
24188
|
-
}
|
|
24189
24307
|
if (this.parent.element.classList.contains(CLS_FULL_SCREEN)) {
|
|
24190
24308
|
const evenArgs = {
|
|
24191
24309
|
cancel: false,
|
|
@@ -34026,6 +34144,7 @@ let RichTextEditor = class RichTextEditor extends Component {
|
|
|
34026
34144
|
this.persistData();
|
|
34027
34145
|
setStyleAttribute(this.element, { 'width': formatUnit(this.width) });
|
|
34028
34146
|
attributes(this.element, { role: 'application', 'aria-label': 'Rich Text Editor' });
|
|
34147
|
+
this.beforeRenderClassValue = this.element.getAttribute('class');
|
|
34029
34148
|
}
|
|
34030
34149
|
persistData() {
|
|
34031
34150
|
if (this.enablePersistence && this.originalElement.tagName === 'TEXTAREA') {
|
|
@@ -34896,6 +35015,10 @@ let RichTextEditor = class RichTextEditor extends Component {
|
|
|
34896
35015
|
if (this.isDestroyed || !this.isRendered) {
|
|
34897
35016
|
return;
|
|
34898
35017
|
}
|
|
35018
|
+
this.element.className = this.beforeRenderClassValue;
|
|
35019
|
+
this.removeHtmlAttributes();
|
|
35020
|
+
this.removeAttributes();
|
|
35021
|
+
this.beforeRenderClassValue = null;
|
|
34899
35022
|
if (!isNullOrUndefined(this.timeInterval)) {
|
|
34900
35023
|
clearInterval(this.timeInterval);
|
|
34901
35024
|
this.timeInterval = null;
|
|
@@ -34963,8 +35086,6 @@ let RichTextEditor = class RichTextEditor extends Component {
|
|
|
34963
35086
|
}
|
|
34964
35087
|
}
|
|
34965
35088
|
}
|
|
34966
|
-
this.removeHtmlAttributes();
|
|
34967
|
-
this.removeAttributes();
|
|
34968
35089
|
super.destroy();
|
|
34969
35090
|
this.isRendered = false;
|
|
34970
35091
|
}
|
|
@@ -34995,6 +35116,7 @@ let RichTextEditor = class RichTextEditor extends Component {
|
|
|
34995
35116
|
this.element.removeAttribute('aria-disabled');
|
|
34996
35117
|
this.element.removeAttribute('role');
|
|
34997
35118
|
this.element.removeAttribute('tabindex');
|
|
35119
|
+
this.element.removeAttribute('aria-label');
|
|
34998
35120
|
}
|
|
34999
35121
|
destroyDependentModules() {
|
|
35000
35122
|
/* destroy dependent modules */
|