@syncfusion/ej2-richtexteditor 27.1.50 → 27.1.52
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/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 +780 -210
- package/dist/es6/ej2-richtexteditor.es2015.js.map +1 -1
- package/dist/es6/ej2-richtexteditor.es5.js +171 -92
- 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 +10 -10
- package/src/common/editor-styles.d.ts +1 -0
- package/src/common/editor-styles.js +1 -0
- package/src/common/interface.d.ts +10 -0
- package/src/editor-manager/plugin/alignments.js +1 -1
- package/src/editor-manager/plugin/indents.js +1 -1
- package/src/editor-manager/plugin/inserthtml.js +37 -9
- package/src/editor-manager/plugin/lists.js +4 -3
- package/src/editor-manager/plugin/ms-word-clean-up.js +14 -2
- package/src/editor-manager/plugin/table.js +3 -0
- package/src/rich-text-editor/actions/base-toolbar.js +1 -1
- package/src/rich-text-editor/actions/dropdown-buttons.js +0 -6
- package/src/rich-text-editor/actions/enter-key.js +8 -2
- package/src/rich-text-editor/actions/html-editor.js +3 -2
- package/src/rich-text-editor/actions/paste-clean-up.js +2 -1
- package/src/rich-text-editor/base/rich-text-editor-model.d.ts +8 -8
- package/src/rich-text-editor/base/rich-text-editor.d.ts +8 -8
- package/src/rich-text-editor/base/rich-text-editor.js +8 -4
- package/src/rich-text-editor/renderer/content-renderer.d.ts +1 -1
- package/src/rich-text-editor/renderer/content-renderer.js +9 -2
- package/src/rich-text-editor/renderer/iframe-content-renderer.js +21 -8
- package/src/rich-text-editor/renderer/image-module.d.ts +2 -0
- package/src/rich-text-editor/renderer/image-module.js +21 -12
- package/src/rich-text-editor/renderer/link-module.js +1 -1
- package/dist/ej2-richtexteditor.min.js +0 -10
|
@@ -12,9 +12,11 @@ var __extends = (this && this.__extends) || (function () {
|
|
|
12
12
|
};
|
|
13
13
|
})();
|
|
14
14
|
import { ContentRender } from '../renderer/content-renderer';
|
|
15
|
-
import { isNullOrUndefined } from '@syncfusion/ej2-base';
|
|
15
|
+
import { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
|
|
16
16
|
import { getEditValue } from '../base/util';
|
|
17
|
-
var IFRAMEHEADER = "\n<!DOCTYPE html> \n <html>\n <head>\n <meta charset='utf-8' /> \n <style>\n @charset \"UTF-8\";\n body {\n font-family: \"Roboto\", sans-serif;\n font-size: 14px;\n }\n html, body{height: 100%;margin: 0;}\n body.e-cursor{cursor:default}\n span.e-selected-node\t{background-color: #939393;color: white;}\n span.e-selected-node.e-highlight {background-color: #1d9dd8;}\n body{color:#333;word-wrap:break-word;padding: 8px;box-sizing: border-box;}\n .e-rte-image, .e-rte-video {border: 0;cursor: pointer;display:\n block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n .e-rte-audio {border: 0;cursor: pointer;display:\n block;float: none;margin: 5px auto;max-width: 100%;position: relative;}\n .e-rte-image.e-imginline, .e-rte-audio.e-audio-inline, .e-rte-video.e-video-inline {display: inline-block;float: none;\n margin-left: 5px;margin-right: 5px;max-width: calc(100% - (2 * 5px));padding: 1px;vertical-align: bottom;}\n .e-rte-image.e-imgcenter, .e-rte-video.e-video-center {cursor: pointer;display: block;float: none;margin: 5px auto;max-width: 100%;position: relative;}\n .e-rte-image.e-imgright, .e-rte-video.e-video-right { float: right; margin: 0 auto;margin-left: 5px;text-align: right;}\n .e-rte-image.e-imgleft, .e-rte-video.e-video-left {float: left;margin: 0 auto;margin-right: 5px;text-align: left;}\n .e-img-caption { display: inline-block; float: none; margin: 5px auto; max-width: 100%;position: relative;}\n .e-img-caption.e-caption-inline {display: inline-block;float: none;\n margin: 5px auto;margin-left: 5px;margin-right: 5px;max-width: calc(100% - (2 * 5px));\n position: relativetext-align: center;vertical-align: bottom;}\n .e-rte-img-caption.e-imgcenter {display: contents; margin-left: auto; margin-right: auto;}\n .e-rte-img-caption.e-imgright {display: contents; margin-left: auto; margin-right: 0;}\n .e-rte-img-caption.e-imgleft {display: contents;margin-left: 0;margin-right: auto;}\n .e-img-caption.e-rte-img-caption.e-imgbreak {display: contents;}\n .e-img-inner {box-sizing: border-box;display: block;font-size: 16px;font-weight: initial;\n margin: auto;opacity: .9;text-align: center;width: 100%;}\n .e-img-wrap {display: inline-block;margin: auto;padding: 0;text-align: center;width: 100%;}\n .e-imgleft, .e-video-left {float: left;margin: 0 5px 0 0;text-align: left;}\n .e-imgright, .e-video-right {float: right;margin: 0 0 0 5px;text-align: right;}\n .e-imgcenter, .e-video-center {cursor: pointer;display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n .e-control img:not(.e-resize) {border: 2px solid transparent; z-index: 1000}\n .e-imginline , .e-audio-inline, .e-video-inline {display: inline-block;float: none;margin-left: 5px;margin-right: 5px;\n max-width: calc(100% - (2 * 5px));vertical-align: bottom;}\n .e-imgbreak, .e-audio-break, .e-video-break {border: 0;cursor: pointer;\n display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n .e-rte-image.e-img-focus:not(.e-resize), .e-audio-focus:not(.e-resize), .e-video-focus:not(.e-resize) {border: solid 2px #4a90e2;}\n img.e-img-focus::selection, audio.e-audio-focus::selection, .e-video-focus::selection { background: transparent;color: transparent;}\n span.e-rte-imageboxmark, span.e-rte-videoboxmark { width: 10px; height: 10px; position: absolute; display: block;\n background: #4a90e2; border: 1px solid #fff; z-index: 1000;}\n .e-mob-rte.e-mob-span span.e-rte-imageboxmark, .e-mob-rte.e-mob-span span.e-rte-videoboxmark { background: #4a90e2; border: 1px solid #fff; }\n .e-mob-rte span.e-rte-imageboxmark, .e-mob-rte span.e-rte-videoboxmark { background: #fff; border: 1px solid #4a90e2;\n border-radius: 15px; height: 20px; width: 20px; }\n .e-mob-rte.e-mob-span span.e-rte-imageboxmark, .e-mob-rte.e-mob-span span.e-rte-videoboxmark { background: #4a90e2; border: 1px solid #fff; }\n .e-rte-content .e-content img.e-resize, .e-rte-content .e-content video.e-resize { z-index: 1000; }\n .e-rte-content { font-size: 14px; }\n .e-content { font-weight: normal; line-height: 1.5; font-size: 1em; }\n .e-img-caption .e-img-inner { outline: 0; }\n .e-rte-img-caption.e-imgleft .e-img-inner { float: left; text-align: left; }\n .e-rte-img-caption.e-imgright .e-img-inner { float: right; text-align: right; }\n .e-rte-img-caption.e-imgleft .e-img-wrap, .e-rte-img-caption.e-imgright .e-img-wrap { display: contents; }\n .e-img-caption a:focus-visible { outline: none; }\n .e-rte-img-caption .e-rte-image.e-imgright { margin-left: auto; margin-right: 0; }\n .e-rte-img-caption .e-rte-image.e-imgleft { margin: 0; }\n body{box-sizing: border-box;min-height: 100px;outline: 0 solid transparent;\n overflow-x: auto;padding: 16px;position: relative;text-align: inherit;z-index: 2;}\n p{margin: 0 0 10px;margin-bottom: 10px;}\n code{ background: #9d9d9d26; color: #ed484c;}\n li{margin-bottom: 10px;}\n table{margin-bottom: 10px;}\n h1{ font-size: 2.857em; font-weight: 600; line-height: 1.2; margin: 10px 0; }\n h2{ font-size: 2.285em; font-weight: 600; line-height: 1.2; margin: 10px 0; }\n h3{ font-size: 2em; font-weight: 600; line-height: 1.2; margin: 10px 0; }\n h4{ font-size: 1.714em; font-weight: 600; line-height: 1.2; margin: 10px 0; }\n h5{ font-size: 1.428em; font-weight: 600; line-height: 1.2; margin: 10px 0; }\n h6{ font-size: 1.142em; line-height: 600; line-height: 1.5; margin: 10px 0; }\n blockquote{margin: 10px 0;margin-left: 0;padding-left: 5px;border-left: solid 2px #5c5c5c;}\n pre{background-color: inherit;border: 0;border-radius: 0;color: #333;\n font-size: inherit;line-height: inherit;margin: 0 0 10px;overflow: visible;padding: 0;\n white-space: pre-wrap;word-break: inherit;word-wrap: break-word;}\n strong, b{font-weight: 700;}\n a{text-decoration: none;user-select: auto;}\n a:hover{text-decoration: underline;};\n p:last-child, pre:last-child, blockquote:last-child{margin-bottom: 0;}\n h3+h4, h4+h5, h5+h6{margin-top: 00.6em;}\n ul:last-child{margin-bottom: 0;}\n table { border-collapse: collapse; empty-cells: show;}\n table td,table th {border: 1px solid #BDBDBD; height: 20px; padding: 2px 5px; vertical-align: middle;}\n table.e-alternate-border tbody tr:nth-child(2n) {background-color: #F5F5F5;}\n table th {background-color: #E0E0E0;}\n table.e-dashed-border td,table.e-dashed-border th { border: 1px dashed #BDBDBD} \n table .e-cell-select {border: 1px double #4a90e2;}\n table.e-cell-select {position: relative;}\n table.e-cell-select::after { content: \"\"; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid #4a90e2; pointer-events: none;}\n table td.e-cell-select.e-multi-cells-select, table th.e-cell-select.e-multi-cells-select {border: 1px solid #dee2e6; position: relative; }\n table td.e-cell-select.e-multi-cells-select::after, table th.e-cell-select.e-multi-cells-select::after {background-color: rgba(13, 110, 253, 0.08); content: \"\";\n position: absolute; top: 0; left: 0; width: 100%; height: 100%; bottom: 0; pointer-events: none; right: 0;}\n span.e-table-box { cursor: nwse-resize; display: block; height: 10px; position: absolute; width: 10px; }\n span.e-table-box.e-rmob {height: 14px;width: 14px;}\n .e-row-resize, .e-column-resize { background-color: transparent; background-repeat: repeat;\n bottom: 0;cursor: col-resize;height: 1px;overflow: visible;position: absolute;width: 1px; }\n .e-row-resize { cursor: row-resize; height: 1px;}\n .e-table-rhelper { cursor: col-resize; opacity: .87;position: absolute;}\n .e-table-rhelper.e-column-helper { width: 1px; }\n .e-table-rhelper.e-row-helper {height: 1px;}\n .e-reicon::before { border-bottom: 6px solid transparent; border-right: 6px solid;\n border-top: 6px solid transparent; content: ''; display: block; height: 0;\n position: absolute; right: 4px; top: 4px; width: 20px; }\n .e-reicon::after { border-bottom: 6px solid transparent; border-left: 6px solid;\n border-top: 6px solid transparent; content: ''; display: block;\n height: 0; left: 4px; position: absolute; top: 4px; width: 20px; z-index: 3; }\n .e-row-helper.e-reicon::after { top: 10px; transform: rotate(90deg); }\n .e-row-helper.e-reicon::before { left: 4px; top: -20px; transform: rotate(90deg); }\n span.e-table-box { background-color: #ffffff; border: 1px solid #BDBDBD; }\n span.e-table-box.e-rbox-select { background-color: #BDBDBD; border: 1px solid #BDBDBD; }\n .e-table-rhelper { background-color: #4a90e2;}\n .e-rtl { direction: rtl; }\n .e-rte-placeholder::before { content: attr(placeholder); opacity: 0.54; overflow: hidden; padding-top: 16px; position: absolute; text-align: start; top: 0; z-index: 1; }\n li ol, li ul { margin-block-start: 10px;}\n .e-resize-enabled, .e-count-enabled { padding-bottom: 0px; }\n td.e-multi-cells-select ::selection, th.e-multi-cells-select ::selection { background-color: transparent; }\n td.e-multi-cells-select, th.e-multi-cells-select { user-select: none !important; }\n </style>\n </head>";
|
|
17
|
+
import { IFRAME_EDITOR_STYLES } from '../../common/editor-styles';
|
|
18
|
+
var IFRAMEHEADER = "\n <!DOCTYPE html> \n <html>\n <head>\n <meta charset='utf-8' /> \n <style>" +
|
|
19
|
+
IFRAME_EDITOR_STYLES.replace(/[\n\t]/g, '') + "\n </style>\n </head>\n";
|
|
18
20
|
/**
|
|
19
21
|
* Content module is used to render Rich Text Editor content
|
|
20
22
|
*
|
|
@@ -35,7 +37,7 @@ var IframeContentRender = /** @class */ (function (_super) {
|
|
|
35
37
|
IframeContentRender.prototype.renderPanel = function () {
|
|
36
38
|
var rteObj = this.parent;
|
|
37
39
|
var rteContent = getEditValue(rteObj.value, rteObj);
|
|
38
|
-
var iFrameBodyContent = '<body
|
|
40
|
+
var iFrameBodyContent = '<body contenteditable="true">' +
|
|
39
41
|
rteContent + '</body></html>';
|
|
40
42
|
var iFrameContent = IFRAMEHEADER + iFrameBodyContent;
|
|
41
43
|
var iframe = this.parent.createElement('iframe', {
|
|
@@ -45,7 +47,7 @@ var IframeContentRender = /** @class */ (function (_super) {
|
|
|
45
47
|
});
|
|
46
48
|
iframe.setAttribute('role', 'none');
|
|
47
49
|
this.setPanel(iframe);
|
|
48
|
-
if (!
|
|
50
|
+
if (!isNOU(this.parent.iframeSettings.sandbox)) {
|
|
49
51
|
var sandboxValues = this.parent.iframeSettings.sandbox
|
|
50
52
|
.map(function (element) { return element.toLocaleLowerCase().trim(); })
|
|
51
53
|
.join(' ');
|
|
@@ -55,22 +57,33 @@ var IframeContentRender = /** @class */ (function (_super) {
|
|
|
55
57
|
iframe.setAttribute('sandbox', sandboxValues.trim());
|
|
56
58
|
}
|
|
57
59
|
rteObj.rootContainer.appendChild(iframe);
|
|
58
|
-
iframe.contentDocument.body.id = this.parent.getID() + '_rte-edit-view';
|
|
59
60
|
iframe.contentDocument.body.setAttribute('aria-owns', this.parent.getID());
|
|
60
61
|
iframe.contentDocument.open();
|
|
61
62
|
iFrameContent = this.setThemeColor(iFrameContent, { color: '#333' });
|
|
62
63
|
iframe.contentDocument.write(iFrameContent);
|
|
63
64
|
iframe.contentDocument.close();
|
|
65
|
+
var body = iframe.contentDocument.body;
|
|
66
|
+
body.className = 'e-content';
|
|
67
|
+
if (this.parent.height === 'auto') {
|
|
68
|
+
body.style.overflowY = 'hidden';
|
|
69
|
+
}
|
|
70
|
+
if (!isNOU(this.parent.fontFamily.default)) {
|
|
71
|
+
body.style.fontFamily = this.parent.fontFamily.default;
|
|
72
|
+
}
|
|
73
|
+
if (!isNOU(this.parent.fontSize.default)) {
|
|
74
|
+
body.style.fontSize = this.parent.fontSize.default;
|
|
75
|
+
}
|
|
76
|
+
body.id = this.parent.getID() + '_rte-edit-view';
|
|
64
77
|
if (rteObj.enableRtl) {
|
|
65
78
|
this.contentPanel.contentDocument.body.setAttribute('class', 'e-rtl');
|
|
66
79
|
}
|
|
67
|
-
if (!
|
|
80
|
+
if (!isNOU(iframe.contentDocument.head) && this.parent.iframeSettings.metaTags.length > 0) {
|
|
68
81
|
var head_1 = iframe.contentDocument.head;
|
|
69
82
|
var metaData = this.parent.iframeSettings.metaTags;
|
|
70
83
|
metaData.forEach(function (tag) {
|
|
71
84
|
var meta = document.createElement('meta');
|
|
72
85
|
for (var key in tag) {
|
|
73
|
-
if (!
|
|
86
|
+
if (!isNOU(tag[key])) {
|
|
74
87
|
meta.setAttribute((key === 'httpEquiv') ? 'http-equiv' : key, tag[key]);
|
|
75
88
|
}
|
|
76
89
|
}
|
|
@@ -91,7 +104,7 @@ var IframeContentRender = /** @class */ (function (_super) {
|
|
|
91
104
|
*/
|
|
92
105
|
IframeContentRender.prototype.getEditPanel = function () {
|
|
93
106
|
var editNode;
|
|
94
|
-
if (!
|
|
107
|
+
if (!isNOU(this.contentPanel.contentDocument)) {
|
|
95
108
|
editNode = this.contentPanel.contentDocument.body;
|
|
96
109
|
}
|
|
97
110
|
else {
|
|
@@ -73,9 +73,11 @@ export declare class Image {
|
|
|
73
73
|
private setImageHeight;
|
|
74
74
|
private removeImageHeight;
|
|
75
75
|
private getImageDimension;
|
|
76
|
+
private adjustDimensionsByAspectRatio;
|
|
76
77
|
private pixToPerc;
|
|
77
78
|
private imgDupMouseMove;
|
|
78
79
|
private resizing;
|
|
80
|
+
private adjustDimensions;
|
|
79
81
|
private getResizeFactor;
|
|
80
82
|
private findAspectRatio;
|
|
81
83
|
private cancelResizeAction;
|
|
@@ -429,6 +429,17 @@ var Image = /** @class */ (function () {
|
|
|
429
429
|
return value;
|
|
430
430
|
}
|
|
431
431
|
};
|
|
432
|
+
Image.prototype.adjustDimensionsByAspectRatio = function (width, height, aspectRatio, isWidthPrimary) {
|
|
433
|
+
if (isWidthPrimary) {
|
|
434
|
+
height = Math.round(width / aspectRatio);
|
|
435
|
+
width = Math.round(height * aspectRatio);
|
|
436
|
+
}
|
|
437
|
+
else {
|
|
438
|
+
width = Math.round(height * aspectRatio);
|
|
439
|
+
height = Math.round(width / aspectRatio);
|
|
440
|
+
}
|
|
441
|
+
return { width: width, height: height };
|
|
442
|
+
};
|
|
432
443
|
Image.prototype.pixToPerc = function (expected, parentEle) {
|
|
433
444
|
return expected / parseFloat(getComputedStyle(parentEle).width) * 100;
|
|
434
445
|
};
|
|
@@ -472,21 +483,19 @@ var Image = /** @class */ (function () {
|
|
|
472
483
|
var currentHeight = this.imgEle.clientHeight;
|
|
473
484
|
var width = diffX * resizeFactor[0] + currentWidth;
|
|
474
485
|
var height = diffY * resizeFactor[1] + currentHeight;
|
|
475
|
-
|
|
476
|
-
height = (height < 16) ? 16 : height;
|
|
477
|
-
if (Math.abs(diffX) > Math.abs(diffY)) {
|
|
478
|
-
height = Math.round(width / this.aspectRatio);
|
|
479
|
-
width = Math.round(height * this.aspectRatio);
|
|
480
|
-
}
|
|
481
|
-
else {
|
|
482
|
-
width = Math.round(height * this.aspectRatio);
|
|
483
|
-
height = Math.round(width / this.aspectRatio);
|
|
484
|
-
}
|
|
486
|
+
var dimensions = this.adjustDimensions(width, height, diffX, diffY, this.aspectRatio);
|
|
485
487
|
this.pageX = pageX;
|
|
486
488
|
this.pageY = pageY;
|
|
487
|
-
this.imgDupMouseMove(width + 'px', height + 'px', e);
|
|
489
|
+
this.imgDupMouseMove(dimensions.width + 'px', dimensions.height + 'px', e);
|
|
488
490
|
}
|
|
489
491
|
};
|
|
492
|
+
Image.prototype.adjustDimensions = function (width, height, diffX, diffY, aspectRatio) {
|
|
493
|
+
width = (width < 16) ? 16 : width;
|
|
494
|
+
height = (height < 16) ? 16 : height;
|
|
495
|
+
var isWidthPrimary = Math.abs(diffX) > Math.abs(diffY);
|
|
496
|
+
var dimensions = this.adjustDimensionsByAspectRatio(width, height, aspectRatio, isWidthPrimary);
|
|
497
|
+
return dimensions;
|
|
498
|
+
};
|
|
490
499
|
Image.prototype.getResizeFactor = function (value) {
|
|
491
500
|
return imageResizeFactor[value];
|
|
492
501
|
};
|
|
@@ -1785,7 +1794,7 @@ var Image = /** @class */ (function () {
|
|
|
1785
1794
|
};
|
|
1786
1795
|
proxy.inputUrl.setAttribute('disabled', 'true');
|
|
1787
1796
|
if (isNOU(proxy.parent.insertImageSettings.saveUrl) && _this.isAllowedTypes
|
|
1788
|
-
&& !isNOU(_this.dialogObj)) {
|
|
1797
|
+
&& !isNOU(_this.dialogObj) && selectArgs.filesData[0].size <= _this.uploadObj.maxFileSize) {
|
|
1789
1798
|
_this.dialogObj.getButtons(0).element.removeAttribute('disabled');
|
|
1790
1799
|
}
|
|
1791
1800
|
});
|
|
@@ -375,7 +375,7 @@ var Link = /** @class */ (function () {
|
|
|
375
375
|
// eslint-disable-next-line
|
|
376
376
|
Link.prototype.insertlink = function (e) {
|
|
377
377
|
var linkEle = this.selfLink.dialogObj.element;
|
|
378
|
-
var linkUrl = linkEle.querySelector('.e-rte-linkurl').value;
|
|
378
|
+
var linkUrl = linkEle.querySelector('.e-rte-linkurl').value.trim();
|
|
379
379
|
var linkText = linkEle.querySelector('.e-rte-linkText').value;
|
|
380
380
|
var linkTitle;
|
|
381
381
|
if (this.selfLink.parent.editorMode === 'HTML') {
|