@syncfusion/ej2-richtexteditor 20.2.49 → 20.3.47

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.
Files changed (150) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/ej2-richtexteditor.min.js +10 -0
  3. package/dist/ej2-richtexteditor.umd.min.js +2 -2
  4. package/dist/ej2-richtexteditor.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-richtexteditor.es2015.js +3790 -358
  6. package/dist/es6/ej2-richtexteditor.es2015.js.map +1 -1
  7. package/dist/es6/ej2-richtexteditor.es5.js +3780 -319
  8. package/dist/es6/ej2-richtexteditor.es5.js.map +1 -1
  9. package/dist/global/ej2-richtexteditor.min.js +2 -2
  10. package/dist/global/ej2-richtexteditor.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +13 -13
  13. package/src/common/config.js +2 -0
  14. package/src/common/types.d.ts +4 -0
  15. package/src/editor-manager/base/classes.d.ts +16 -0
  16. package/src/editor-manager/base/classes.js +16 -0
  17. package/src/editor-manager/base/constant.d.ts +2 -0
  18. package/src/editor-manager/base/constant.js +2 -0
  19. package/src/editor-manager/base/editor-manager.d.ts +4 -0
  20. package/src/editor-manager/base/editor-manager.js +14 -0
  21. package/src/editor-manager/base/interface.d.ts +2 -0
  22. package/src/editor-manager/plugin/audio.d.ts +32 -0
  23. package/src/editor-manager/plugin/audio.js +133 -0
  24. package/src/editor-manager/plugin/dom-node.js +1 -1
  25. package/src/editor-manager/plugin/image.js +1 -1
  26. package/src/editor-manager/plugin/inserthtml.js +1 -1
  27. package/src/editor-manager/plugin/lists.js +10 -8
  28. package/src/editor-manager/plugin/ms-word-clean-up.js +18 -18
  29. package/src/editor-manager/plugin/nodecutter.d.ts +1 -1
  30. package/src/editor-manager/plugin/nodecutter.js +7 -5
  31. package/src/editor-manager/plugin/selection-commands.js +3 -2
  32. package/src/editor-manager/plugin/table.js +3 -2
  33. package/src/editor-manager/plugin/undo.js +2 -1
  34. package/src/editor-manager/plugin/video.d.ts +34 -0
  35. package/src/editor-manager/plugin/video.js +249 -0
  36. package/src/editor-manager/plugin.d.ts +2 -0
  37. package/src/editor-manager/plugin.js +2 -0
  38. package/src/global.js +1 -1
  39. package/src/rich-text-editor/actions/base-quick-toolbar.js +3 -1
  40. package/src/rich-text-editor/actions/base-toolbar.js +1 -1
  41. package/src/rich-text-editor/actions/dropdown-buttons.d.ts +2 -2
  42. package/src/rich-text-editor/actions/dropdown-buttons.js +14 -11
  43. package/src/rich-text-editor/actions/enter-key.d.ts +1 -0
  44. package/src/rich-text-editor/actions/enter-key.js +157 -103
  45. package/src/rich-text-editor/actions/html-editor.d.ts +1 -0
  46. package/src/rich-text-editor/actions/html-editor.js +59 -1
  47. package/src/rich-text-editor/actions/paste-clean-up.js +2 -1
  48. package/src/rich-text-editor/actions/quick-toolbar.d.ts +2 -0
  49. package/src/rich-text-editor/actions/quick-toolbar.js +52 -6
  50. package/src/rich-text-editor/actions/resize.js +11 -1
  51. package/src/rich-text-editor/actions/toolbar-action.js +2 -1
  52. package/src/rich-text-editor/actions/xhtml-validation.js +1 -1
  53. package/src/rich-text-editor/audio.d.ts +4 -0
  54. package/src/rich-text-editor/audio.js +4 -0
  55. package/src/rich-text-editor/base/classes.d.ts +50 -0
  56. package/src/rich-text-editor/base/classes.js +50 -0
  57. package/src/rich-text-editor/base/constant.d.ts +74 -14
  58. package/src/rich-text-editor/base/constant.js +76 -16
  59. package/src/rich-text-editor/base/enum.d.ts +10 -2
  60. package/src/rich-text-editor/base/enum.js +10 -2
  61. package/src/rich-text-editor/base/interface.d.ts +86 -2
  62. package/src/rich-text-editor/base/interface.js +8 -0
  63. package/src/rich-text-editor/base/rich-text-editor-model.d.ts +130 -29
  64. package/src/rich-text-editor/base/rich-text-editor.d.ts +150 -30
  65. package/src/rich-text-editor/base/rich-text-editor.js +200 -6
  66. package/src/rich-text-editor/formatter/formatter.js +7 -2
  67. package/src/rich-text-editor/models/default-locale.js +46 -0
  68. package/src/rich-text-editor/models/items.d.ts +3 -0
  69. package/src/rich-text-editor/models/items.js +100 -3
  70. package/src/rich-text-editor/models/toolbar-settings-model.d.ts +169 -1
  71. package/src/rich-text-editor/models/toolbar-settings.d.ts +143 -1
  72. package/src/rich-text-editor/models/toolbar-settings.js +88 -0
  73. package/src/rich-text-editor/renderer/audio-module.d.ts +76 -0
  74. package/src/rich-text-editor/renderer/audio-module.js +875 -0
  75. package/src/rich-text-editor/renderer/iframe-content-renderer.js +1 -1
  76. package/src/rich-text-editor/renderer/image-module.js +9 -6
  77. package/src/rich-text-editor/renderer/link-module.js +2 -1
  78. package/src/rich-text-editor/renderer/table-module.d.ts +2 -0
  79. package/src/rich-text-editor/renderer/table-module.js +43 -7
  80. package/src/rich-text-editor/renderer/video-module.d.ts +105 -0
  81. package/src/rich-text-editor/renderer/video-module.js +1422 -0
  82. package/src/rich-text-editor/renderer/view-source.js +2 -0
  83. package/src/rich-text-editor/renderer.d.ts +2 -0
  84. package/src/rich-text-editor/renderer.js +2 -0
  85. package/src/rich-text-editor/video.d.ts +4 -0
  86. package/src/rich-text-editor/video.js +4 -0
  87. package/styles/_all.scss +1 -2
  88. package/styles/bootstrap-dark.css +220 -70
  89. package/styles/bootstrap.css +220 -70
  90. package/styles/bootstrap4.css +220 -70
  91. package/styles/bootstrap5-dark.css +220 -70
  92. package/styles/bootstrap5.css +220 -70
  93. package/styles/fabric-dark.css +220 -70
  94. package/styles/fabric.css +222 -72
  95. package/styles/fluent-dark.css +222 -72
  96. package/styles/fluent.css +222 -72
  97. package/styles/highcontrast-light.css +222 -72
  98. package/styles/highcontrast.css +222 -72
  99. package/styles/material-dark.css +220 -70
  100. package/styles/material.css +220 -70
  101. package/styles/rich-text-editor/_all.scss +1 -1
  102. package/styles/rich-text-editor/_bootstrap-dark-definition.scss +3 -0
  103. package/styles/rich-text-editor/_bootstrap-definition.scss +2 -1
  104. package/styles/rich-text-editor/_bootstrap4-definition.scss +5 -3
  105. package/styles/rich-text-editor/_bootstrap5-definition.scss +8 -3
  106. package/styles/rich-text-editor/_fabric-dark-definition.scss +3 -0
  107. package/styles/rich-text-editor/_fabric-definition.scss +2 -0
  108. package/styles/rich-text-editor/_fluent-definition.scss +8 -3
  109. package/styles/rich-text-editor/_fusionnew-definition.scss +8 -3
  110. package/styles/rich-text-editor/_highcontrast-definition.scss +2 -0
  111. package/styles/rich-text-editor/_highcontrast-light-definition.scss +2 -0
  112. package/styles/rich-text-editor/_layout.scss +116 -74
  113. package/styles/rich-text-editor/_material-dark-definition.scss +3 -0
  114. package/styles/rich-text-editor/_material-definition.scss +2 -0
  115. package/styles/rich-text-editor/_material3-definition.scss +8 -3
  116. package/styles/rich-text-editor/_tailwind-definition.scss +7 -2
  117. package/styles/rich-text-editor/_theme.scss +74 -15
  118. package/styles/rich-text-editor/bootstrap-dark.css +220 -70
  119. package/styles/rich-text-editor/bootstrap.css +220 -70
  120. package/styles/rich-text-editor/bootstrap4.css +220 -70
  121. package/styles/rich-text-editor/bootstrap5-dark.css +220 -70
  122. package/styles/rich-text-editor/bootstrap5.css +220 -70
  123. package/styles/rich-text-editor/fabric-dark.css +220 -70
  124. package/styles/rich-text-editor/fabric.css +222 -72
  125. package/styles/rich-text-editor/fluent-dark.css +222 -72
  126. package/styles/rich-text-editor/fluent.css +222 -72
  127. package/styles/rich-text-editor/highcontrast-light.css +222 -72
  128. package/styles/rich-text-editor/highcontrast.css +222 -72
  129. package/styles/rich-text-editor/icons/_bootstrap-dark.scss +20 -4
  130. package/styles/rich-text-editor/icons/_bootstrap.scss +20 -4
  131. package/styles/rich-text-editor/icons/_bootstrap4.scss +20 -4
  132. package/styles/rich-text-editor/icons/_bootstrap5.scss +20 -4
  133. package/styles/rich-text-editor/icons/_fabric-dark.scss +20 -4
  134. package/styles/rich-text-editor/icons/_fabric.scss +20 -4
  135. package/styles/rich-text-editor/icons/_fluent.scss +20 -4
  136. package/styles/rich-text-editor/icons/_fusionnew.scss +20 -4
  137. package/styles/rich-text-editor/icons/_highcontrast-light.scss +20 -4
  138. package/styles/rich-text-editor/icons/_highcontrast.scss +20 -4
  139. package/styles/rich-text-editor/icons/_material-dark.scss +20 -4
  140. package/styles/rich-text-editor/icons/_material.scss +20 -4
  141. package/styles/rich-text-editor/icons/_material3.scss +20 -4
  142. package/styles/rich-text-editor/icons/_tailwind.scss +20 -4
  143. package/styles/rich-text-editor/material-dark.css +220 -70
  144. package/styles/rich-text-editor/material.css +220 -70
  145. package/styles/rich-text-editor/tailwind-dark.css +220 -70
  146. package/styles/rich-text-editor/tailwind.css +220 -70
  147. package/styles/tailwind-dark.css +220 -70
  148. package/styles/tailwind.css +220 -70
  149. package/.eslintrc.json +0 -244
  150. package/tslint.json +0 -111
package/src/rich-text-editor/renderer/iframe-content-renderer.js CHANGED
@@ -14,7 +14,7 @@ var __extends = (this && this.__extends) || (function () {
14
14
  import { ContentRender } from '../renderer/content-renderer';
15
15
  import { isNullOrUndefined } 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 {border: 0;cursor: pointer;display:\n block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n .e-rte-image.e-imginline {display: inline-block;float: none;max-width: calc(100% - (2 * 5px));padding: 1px;vertical-align: bottom;}\n .e-rte-image.e-imgcenter {cursor: pointer;display: block;float: none;margin: 5px auto;max-width: 100%;position: relative;}\n .e-rte-image.e-imgright { float: right; margin: 0 auto;margin-left: 5px;text-align: right;}\n .e-rte-image.e-imgleft {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-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 {float: left;margin: 0 5px 0 0;text-align: left;}\n .e-imgright {float: right;margin: 0 0 0 5px;text-align: right;}\n .e-imgcenter {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 {display: inline-block;float: none;margin-left: 5px;margin-right: 5px;\n max-width: calc(100% - (2 * 5px));vertical-align: bottom;}\n .e-imgbreak {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) {border: solid 2px #4a90e2;}\n img.e-img-focus::selection { background: transparent;color: transparent;}\n span.e-rte-imageboxmark { 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 { background: #4a90e2; border: 1px solid #fff; }\n .e-mob-rte span.e-rte-imageboxmark { 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 { background: #4a90e2; border: 1px solid #fff; }\n .e-rte-content .e-content img.e-resize { z-index: 1000; }\n .e-img-caption .e-img-inner { outline: 0; }\n .e-img-caption a:focus-visible { outline: none; }\n .e-img-caption .e-rte-image.e-imgright, .e-img-caption .e-rte-image.e-imgleft { float: none; 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 li{margin-bottom: 10px;}\n h1{font-size: 2.17em;font-weight: 400;line-height: 1;margin: 10px 0;}\n h2{font-size: 1.74em;font-weight: 400;margin: 10px 0;}\n h3{font-size: 1.31em;font-weight: 400;margin: 10px 0;}\n h4{font-size: 16px;font-weight: 400;line-height: 1.5;margin: 0;}\n h5{font-size: 00.8em;font-weight: 400;margin: 0;}\n h6{font-size: 00.65em;font-weight: 400;margin: 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 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 </style>\n </head>";
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-audio, .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-image.e-imginline, .e-rte-audio.e-audio-inline, .e-rte-video.e-video-inline {display: inline-block;float: none;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-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 { 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 { background: #4a90e2; border: 1px solid #fff; }\n .e-mob-rte span.e-rte-imageboxmark { 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 { 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-img-caption .e-img-inner { outline: 0; }\n .e-img-caption a:focus-visible { outline: none; }\n .e-img-caption .e-rte-image.e-imgright, .e-img-caption .e-rte-image.e-imgleft { float: none; 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 li{margin-bottom: 10px;}\n h1{font-size: 2.17em;font-weight: 400;line-height: 1;margin: 10px 0;}\n h2{font-size: 1.74em;font-weight: 400;margin: 10px 0;}\n h3{font-size: 1.31em;font-weight: 400;margin: 10px 0;}\n h4{font-size: 16px;font-weight: 400;line-height: 1.5;margin: 0;}\n h5{font-size: 00.8em;font-weight: 400;margin: 0;}\n h6{font-size: 00.65em;font-weight: 400;margin: 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 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 </style>\n </head>";
18
18
  /**
19
19
  * Content module is used to render Rich Text Editor content
20
20
  *
package/src/rich-text-editor/renderer/image-module.js CHANGED
@@ -357,7 +357,7 @@ var Image = /** @class */ (function () {
357
357
  if (this.parent.insertImageSettings.resizeByPercent) {
358
358
  if (parseInt('' + img.getBoundingClientRect().width + '', 10) !== 0 && parseInt('' + width + '', 10) !== 0) {
359
359
  var original = img.offsetWidth + this.mouseX;
360
- var finalWidthByPerc = (original / img.offsetWidth) * (parseFloat(img.style.width).toString() == 'NaN' ? (img.offsetWidth / (parseFloat(getComputedStyle(this.parent.element).width)) * 100) : parseFloat(img.style.width));
360
+ var finalWidthByPerc = (original / img.offsetWidth) * (parseFloat(img.style.width).toString() === 'NaN' ? (img.offsetWidth / (parseFloat(getComputedStyle(this.parent.element).width)) * 100) : parseFloat(img.style.width));
361
361
  img.style.width = ((finalWidthByPerc > 3) ? finalWidthByPerc : 3) + '%';
362
362
  }
363
363
  else {
@@ -370,7 +370,8 @@ var Image = /** @class */ (function () {
370
370
  img.style.height = expectedY + 'px';
371
371
  }
372
372
  else if (img.style.width !== '' && img.style.height === '') {
373
- var currentWidth = ((width / height * expectedY) + width / height) < (this.parent.inputElement.getBoundingClientRect().right - 32) ?
373
+ var currentWidth = ((width / height * expectedY) + width / height) <
374
+ (this.parent.inputElement.getBoundingClientRect().right - 32) ?
374
375
  ((width / height * expectedY) + width / height) : (this.parent.inputElement.getBoundingClientRect().right - 32);
375
376
  img.style.width = currentWidth.toString() + 'px';
376
377
  }
@@ -393,7 +394,9 @@ var Image = /** @class */ (function () {
393
394
  if (this.parent.insertImageSettings.resizeByPercent) {
394
395
  if (parseInt('' + img.getBoundingClientRect().width + '', 10) !== 0 && parseInt('' + width + '', 10) !== 0) {
395
396
  var original = img.offsetWidth + this.mouseX;
396
- var finalWidthByPerc = (original / img.offsetWidth) * (parseFloat(img.style.width).toString() == 'NaN' ? (img.offsetWidth / (parseFloat(getComputedStyle(this.parent.element).width)) * 100) : parseFloat(img.style.width));
397
+ var finalWidthByPerc = (original / img.offsetWidth) * (parseFloat(img.style.width).toString() === 'NaN' ?
398
+ (img.offsetWidth / (parseFloat(getComputedStyle(this.parent.element).width)) * 100) :
399
+ parseFloat(img.style.width));
397
400
  img.style.width = ((finalWidthByPerc > 3) ? finalWidthByPerc : 3) + '%';
398
401
  }
399
402
  else {
@@ -1159,8 +1162,8 @@ var Image = /** @class */ (function () {
1159
1162
  }
1160
1163
  this.removingImgName = absoluteUrl.replace(/^.*[\\\/]/, '');
1161
1164
  var xhr = new XMLHttpRequest();
1162
- xhr.addEventListener("readystatechange", function () {
1163
- if (this.readyState == 4 && this.status == 200) {
1165
+ xhr.addEventListener('readystatechange', function () {
1166
+ if (this.readyState === 4 && this.status === 200) {
1164
1167
  proxy.triggerPost(this.response);
1165
1168
  }
1166
1169
  });
@@ -2157,7 +2160,7 @@ var Image = /** @class */ (function () {
2157
2160
  }, 900);
2158
2161
  },
2159
2162
  success: function (e) {
2160
- if (e.operation === "cancel") {
2163
+ if (e.operation === 'cancel') {
2161
2164
  return;
2162
2165
  }
2163
2166
  isUploading = false;
package/src/rich-text-editor/renderer/link-module.js CHANGED
@@ -276,7 +276,8 @@ var Link = /** @class */ (function () {
276
276
  var linkText = linkContent.querySelector('.e-rte-linkText');
277
277
  var linkTitle = linkContent.querySelector('.e-rte-linkTitle');
278
278
  var linkOpenLabel = this.i10n.getConstant('linkOpenInNewWindow');
279
- this.checkBoxObj = new CheckBox({ label: linkOpenLabel, checked: true, enableRtl: this.parent.enableRtl, cssClass: this.parent.cssClass });
279
+ this.checkBoxObj = new CheckBox({ label: linkOpenLabel, checked: true, enableRtl: this.parent.enableRtl,
280
+ cssClass: this.parent.cssClass });
280
281
  this.checkBoxObj.isStringTemplate = true;
281
282
  this.checkBoxObj.createElement = this.parent.createElement;
282
283
  this.checkBoxObj.appendTo(linkTarget);
package/src/rich-text-editor/renderer/table-module.d.ts CHANGED
@@ -34,6 +34,7 @@ export declare class Table {
34
34
  private dialogRenderObj;
35
35
  private currentColumnResize;
36
36
  private currentMarginLeft;
37
+ private previousTableElement;
37
38
  private constructor();
38
39
  protected addEventListener(): void;
39
40
  protected removeEventListener(): void;
@@ -44,6 +45,7 @@ export declare class Table {
44
45
  private dropdownSelect;
45
46
  private UpdateCells;
46
47
  private keyDown;
48
+ private tableModulekeyUp;
47
49
  private openDialog;
48
50
  private showDialog;
49
51
  private closeDialog;
package/src/rich-text-editor/renderer/table-module.js CHANGED
@@ -41,6 +41,7 @@ var Table = /** @class */ (function () {
41
41
  this.parent.on(events.dropDownSelect, this.dropdownSelect, this);
42
42
  this.parent.on(events.keyDown, this.keyDown, this);
43
43
  this.parent.on(events.mouseUp, this.selectionTable, this);
44
+ this.parent.on(events.tableModulekeyUp, this.tableModulekeyUp, this);
44
45
  this.parent.on(events.bindCssClass, this.setCssClass, this);
45
46
  this.parent.on(events.destroy, this.destroy, this);
46
47
  this.parent.on(events.moduleDestroy, this.moduleDestroy, this);
@@ -63,6 +64,7 @@ var Table = /** @class */ (function () {
63
64
  this.parent.off(events.tableColorPickerChanged, this.setBGColor);
64
65
  this.parent.off(events.keyDown, this.keyDown);
65
66
  this.parent.off(events.mouseUp, this.selectionTable);
67
+ this.parent.off(events.tableModulekeyUp, this.tableModulekeyUp);
66
68
  this.parent.off(events.bindCssClass, this.setCssClass);
67
69
  this.parent.off(events.destroy, this.destroy);
68
70
  this.parent.off(events.moduleDestroy, this.moduleDestroy);
@@ -209,6 +211,22 @@ var Table = /** @class */ (function () {
209
211
  }
210
212
  }
211
213
  };
214
+ Table.prototype.tableModulekeyUp = function (e) {
215
+ var event = e.args;
216
+ if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection) && this.contentModule) {
217
+ var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
218
+ var selection = this.parent.formatter.editorManager.nodeSelection.save(range, this.contentModule.getDocument());
219
+ var ele = this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range)[0];
220
+ ele = (ele && ele.tagName !== 'TD' && ele.tagName !== 'TH') ? ele.parentElement : ele;
221
+ if (ele && ele.tagName !== 'TD' && ele.tagName !== 'TH') {
222
+ var closestTd = closest(ele, 'td');
223
+ ele = !isNullOrUndefined(closestTd) && this.parent.inputElement.contains(closestTd) ? closestTd : ele;
224
+ }
225
+ if (this.previousTableElement != ele && !isNullOrUndefined(this.previousTableElement)) {
226
+ this.previousTableElement.classList.remove(classes.CLS_TABLE_SEL);
227
+ }
228
+ }
229
+ };
212
230
  Table.prototype.openDialog = function (isInternal, e) {
213
231
  if (!isInternal) {
214
232
  this.parent.contentModule.getEditPanel().focus();
@@ -309,6 +327,7 @@ var Table = /** @class */ (function () {
309
327
  }
310
328
  };
311
329
  Table.prototype.tabSelection = function (event, selection, ele) {
330
+ this.previousTableElement = ele;
312
331
  var insideList = this.insideList(selection.range);
313
332
  if ((event.keyCode === 37 || event.keyCode === 39) && selection.range.startContainer.nodeType === 3 ||
314
333
  insideList) {
@@ -338,7 +357,8 @@ var Table = /** @class */ (function () {
338
357
  ele.classList.add(classes.CLS_TABLE_SEL);
339
358
  this.addRow(selection, event, true);
340
359
  ele.classList.remove(classes.CLS_TABLE_SEL);
341
- nextElement = nextElement.parentElement.nextSibling ? nextElement.parentElement.nextSibling.firstChild : nextElement.parentElement.firstChild;
360
+ nextElement = nextElement.parentElement.nextSibling ? nextElement.parentElement.nextSibling.firstChild :
361
+ nextElement.parentElement.firstChild;
342
362
  // eslint-disable-next-line
343
363
  (nextElement.textContent.trim() !== '' && closest(nextElement, 'td')) ?
344
364
  selection.setSelectionNode(this.contentModule.getDocument(), nextElement) :
@@ -438,7 +458,8 @@ var Table = /** @class */ (function () {
438
458
  var closestTable = closest(target, 'table');
439
459
  var startNode = this.parent.getRange().startContainer.parentElement;
440
460
  var endNode = this.parent.getRange().endContainer.parentElement;
441
- if (target && target.nodeName !== 'A' && target.nodeName !== 'IMG' && startNode === endNode && (target.nodeName === 'TD' || target.nodeName === 'TH' ||
461
+ if (target && target.nodeName !== 'A' && target.nodeName !== 'IMG' && target.nodeName !== 'VIDEO' && !target.classList.contains(classes.CLS_CLICKELEM) &&
462
+ target.nodeName !== 'AUDIO' && startNode === endNode && (target.nodeName === 'TD' || target.nodeName === 'TH' ||
442
463
  target.nodeName === 'TABLE' || (closestTable && this.parent.contentModule.getEditPanel().contains(closestTable)))
443
464
  && !(range.startContainer.nodeType === 3 && !range.collapsed)) {
444
465
  var range_1 = this.parent.formatter.editorManager.nodeSelection.getRange(this.contentModule.getDocument());
@@ -824,8 +845,9 @@ var Table = /** @class */ (function () {
824
845
  var tableWidth = parseInt(getComputedStyle(_this.curTable).width, 10);
825
846
  var tableHeight = parseInt(getComputedStyle(_this.curTable).height, 10);
826
847
  var paddingSize = +getComputedStyle(_this.contentModule.getEditPanel()).paddingRight.match(/\d/g).join('');
827
- var rteWidth = _this.contentModule.getEditPanel().offsetWidth - (_this.contentModule.getEditPanel().offsetWidth -
828
- _this.contentModule.getEditPanel().clientWidth) - paddingSize * 2;
848
+ var rteWidth = _this.contentModule.getEditPanel().offsetWidth -
849
+ (_this.contentModule.getEditPanel().offsetWidth -
850
+ _this.contentModule.getEditPanel().clientWidth) - paddingSize * 2;
829
851
  var widthCompare = void 0;
830
852
  if (!isNOU(_this.curTable.parentElement.closest('table')) && !isNOU(_this.curTable.closest('td')) &&
831
853
  _this.contentModule.getEditPanel().contains(_this.curTable.closest('td'))) {
@@ -846,9 +868,11 @@ var Table = /** @class */ (function () {
846
868
  mouseX = mouseX - 0.75; //This was done for to make the gripper and the table first/last column will be close.
847
869
  _this.removeResizeElement();
848
870
  // Below the value '100' is the 100% width of the parent element.
849
- if (((mouseX !== 0 && 5 < currentColumnCellWidth) || mouseX < 0) && currentTableWidth <= 100 && _this.convertPixelToPercentage(tableWidth - mouseX, widthCompare) <= 100) {
871
+ if (((mouseX !== 0 && 5 < currentColumnCellWidth) || mouseX < 0) && currentTableWidth <= 100 &&
872
+ _this.convertPixelToPercentage(tableWidth - mouseX, widthCompare) <= 100) {
850
873
  var firstColumnsCell = _this.findFirstLastColCells(_this.curTable, true);
851
- _this.curTable.style.width = _this.convertPixelToPercentage(tableWidth - mouseX, widthCompare) > 100 ? (100 + '%') : (_this.convertPixelToPercentage(tableWidth - mouseX, widthCompare) + '%');
874
+ _this.curTable.style.width = _this.convertPixelToPercentage(tableWidth - mouseX, widthCompare) > 100 ? (100 + '%') :
875
+ (_this.convertPixelToPercentage(tableWidth - mouseX, widthCompare) + '%');
852
876
  var differenceWidth = currentTableWidth - _this.convertPixelToPercentage(tableWidth - mouseX, widthCompare);
853
877
  _this.currentMarginLeft = _this.currentMarginLeft + differenceWidth;
854
878
  _this.curTable.style.marginLeft = 'calc(' + (_this.curTable.style.width === '100%' ? 0 : _this.currentMarginLeft) + '%)';
@@ -861,7 +885,8 @@ var Table = /** @class */ (function () {
861
885
  mouseX = mouseX + 0.75; //This was done for to make the gripper and the table first/last column will be close.
862
886
  _this.removeResizeElement();
863
887
  // Below the value '100' is the 100% width of the parent element.
864
- if (((mouseX !== 0 && 5 < currentColumnCellWidth) || mouseX > 0) && currentTableWidth <= 100 && _this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) <= 100) {
888
+ if (((mouseX !== 0 && 5 < currentColumnCellWidth) || mouseX > 0) &&
889
+ currentTableWidth <= 100 && _this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) <= 100) {
865
890
  var lastColumnsCell = _this.findFirstLastColCells(_this.curTable, false);
866
891
  _this.curTable.style.width = _this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) > 100 ? (100 + '%') : (_this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) + '%');
867
892
  var differenceWidth = currentTableWidth - _this.convertPixelToPercentage(tableWidth + mouseX, widthCompare);
@@ -995,6 +1020,17 @@ var Table = /** @class */ (function () {
995
1020
  };
996
1021
  this.parent.formatter.process(this.parent, (delKey) ? cmd : args, args.originalEvent, value);
997
1022
  this.contentModule.getEditPanel().focus();
1023
+ if (this.parent.inputElement.innerHTML === null || this.parent.inputElement.innerHTML === '') {
1024
+ if (this.parent.enterKey === 'DIV') {
1025
+ this.contentModule.getEditPanel().innerHTML = '<div><br/></div>';
1026
+ }
1027
+ else if (this.parent.enterKey === 'BR') {
1028
+ this.contentModule.getEditPanel().innerHTML = '<br/>';
1029
+ }
1030
+ else {
1031
+ this.contentModule.getEditPanel().innerHTML = '<p><br/></p>';
1032
+ }
1033
+ }
998
1034
  this.removeResizeElement();
999
1035
  this.hideTableQuickToolbar();
1000
1036
  };
package/src/rich-text-editor/renderer/video-module.d.ts ADDED
@@ -0,0 +1,105 @@
1
+ import { IImageNotifyArgs } from '../base/interface';
2
+ import { Uploader } from '@syncfusion/ej2-inputs';
3
+ import { Dialog } from '@syncfusion/ej2-popups';
4
+ export declare class Video {
5
+ element: HTMLElement;
6
+ private rteID;
7
+ private parent;
8
+ dialogObj: Dialog;
9
+ uploadObj: Uploader;
10
+ private i10n;
11
+ private inputUrl;
12
+ private embedInputUrl;
13
+ private uploadUrl;
14
+ private contentModule;
15
+ private rendererFactory;
16
+ private quickToolObj;
17
+ private vidResizeDiv;
18
+ private vidDupPos;
19
+ private resizeBtnStat;
20
+ private videoEle;
21
+ private prevSelectedVidEle;
22
+ private isVideoUploaded;
23
+ private isAllowedTypes;
24
+ private pageX;
25
+ private pageY;
26
+ private dialogRenderObj;
27
+ private deletedVid;
28
+ private changedWidthValue;
29
+ private changedHeightValue;
30
+ private inputWidthValue;
31
+ private inputHeightValue;
32
+ private removingVideoName;
33
+ private constructor();
34
+ protected addEventListener(): void;
35
+ protected removeEventListener(): void;
36
+ private afterRender;
37
+ private clearDialogObj;
38
+ private onKeyUp;
39
+ private undoStack;
40
+ private onIframeMouseDown;
41
+ private videoSize;
42
+ private vidsizeInput;
43
+ private insertSize;
44
+ private resizeEnd;
45
+ private resizeStart;
46
+ private videoClick;
47
+ private onCutHandler;
48
+ private videoResize;
49
+ private getPointX;
50
+ private getPointY;
51
+ private vidResizePos;
52
+ private calcPos;
53
+ private setAspectRatio;
54
+ private pixToPerc;
55
+ private vidDupMouseMove;
56
+ private resizing;
57
+ private cancelResizeAction;
58
+ private resizeVidDupPos;
59
+ private resizeBtnInit;
60
+ private onToolbarAction;
61
+ private onKeyDown;
62
+ private openDialog;
63
+ private showDialog;
64
+ private closeDialog;
65
+ private checkVideoBack;
66
+ private checkVideoDel;
67
+ private alignmentSelect;
68
+ private deleteVideo;
69
+ private videoRemovePost;
70
+ private triggerPost;
71
+ private onDocumentClick;
72
+ private removeResizeEle;
73
+ private onWindowResize;
74
+ private break;
75
+ private inline;
76
+ private alignVideo;
77
+ private editAreaClickHandler;
78
+ private showVideoQuickToolbar;
79
+ private hideVideoQuickToolbar;
80
+ private isEmbedVidElem;
81
+ private insertingVideo;
82
+ insertVideo(e: IImageNotifyArgs): void;
83
+ private urlPopup;
84
+ private videoUpload;
85
+ private checkExtension;
86
+ private fileSelect;
87
+ private cancelDialog;
88
+ private insertVideoUrl;
89
+ /**
90
+ * Destroys the ToolBar.
91
+ *
92
+ * @method destroy
93
+ * @returns {void}
94
+ * @hidden
95
+
96
+ */
97
+ destroy(): void;
98
+ /**
99
+ * For internal use only - Get the module name.
100
+ *
101
+ * @returns {void}
102
+ * @hidden
103
+ */
104
+ private getModuleName;
105
+ }