From 1710ec1291455c89b4ef1cbe41e951dd501ed7bb Mon Sep 17 00:00:00 2001
From: JiHong88 <0125ses@hanmail.net>
Date: Thu, 20 Apr 2023 18:44:03 +0900
Subject: [PATCH] fix: #1229 remove contenteditable

---
 sample/index.html                |  8 ++++----
 src/lib/core.js                  | 24 +++++++++++-------------
 src/lib/util.js                  |  4 ++++
 src/plugins/dialog/image.js      |  1 -
 src/plugins/dialog/math.js       |  1 +
 src/plugins/modules/component.js |  2 --
 6 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/sample/index.html b/sample/index.html
index 9d0748ef4..ea9afc7a0 100644
--- a/sample/index.html
+++ b/sample/index.html
@@ -128,8 +128,8 @@
         <div class="inline-margin"></div>
         <textarea id="editor_classic" style="display:none;">
             <p>SunEditor</p>
-            <div class="se-component se-image-container __se__float-right" contenteditable="false"><figure style="margin: auto;"><img src="http://suneditor.com/docs/cat.jpg" data-align="right" alt="Tabby" data-rotate="" data-proportion="false" data-rotatex="" data-rotatey="" origin-size="640,426" data-origin="640,426" style="transform: rotate(0deg);" data-index="0" data-file-name="cat.jpg" data-file-size="0" data-size="," data-percentage="auto,auto"><figcaption contenteditable="true" style="margin-top: 0px;"><p>Insert description</p></figcaption></figure></div>
-            <p>Here is an example of math -&gt; <span class="katex" contenteditable="false" data-exp="\displaystyle\sum_{i=1}^{k+1}i" data-font-size="1.5em" style="font-size: 1.5em;"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mstyle scriptlevel="0" displaystyle="true"><munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mrow><mi>k</mi><mo>+</mo><mn>1</mn></mrow></munderover><mi>i</mi></mstyle></mrow><annotation encoding="application/x-tex">\displaystyle\sum_{i=1}^{k+1}i</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:3.1137820000000005em;vertical-align:-1.277669em;"></span><span class="mop op-limits"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.8361130000000003em;"><span style="top:-1.872331em;margin-left:0em;"><span class="pstrut" style="height:3.05em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathdefault mtight">i</span><span class="mrel mtight">=</span><span class="mord mtight">1</span></span></span></span><span style="top:-3.050005em;"><span class="pstrut" style="height:3.05em;"></span><span><span class="mop op-symbol large-op">∑</span></span></span><span style="top:-4.300005em;margin-left:0em;"><span class="pstrut" style="height:3.05em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathdefault mtight" style="margin-right:0.03148em;">k</span><span class="mbin mtight">+</span><span class="mord mtight">1</span></span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:1.277669em;"><span></span></span></span></span></span><span class="mspace" style="margin-right:0.16666666666666666em;"></span><span class="mord mathdefault">i</span></span></span></span> 123</p>
+            <div class="se-component se-image-container __se__float-center"><figure style="margin: auto;"><img src="http://suneditor.com/docs/cat.jpg" data-align="right" alt="Tabby" data-rotate="" data-proportion="false" data-rotatex="" data-rotatey="" origin-size="640,426" data-origin="640,426" style="transform: rotate(0deg);" data-index="0" data-file-name="cat.jpg" data-file-size="0" data-size="," data-percentage="auto,auto"><figcaption style="margin-top: 0px;"><p>Insert description</p></figcaption></figure></div>
+            <p>Here is an example of math -&gt; <span class="katex" data-exp="\displaystyle\sum_{i=1}^{k+1}i" data-font-size="1.5em" style="font-size: 1.5em;"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mstyle scriptlevel="0" displaystyle="true"><munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mrow><mi>k</mi><mo>+</mo><mn>1</mn></mrow></munderover><mi>i</mi></mstyle></mrow><annotation encoding="application/x-tex">\displaystyle\sum_{i=1}^{k+1}i</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:3.1137820000000005em;vertical-align:-1.277669em;"></span><span class="mop op-limits"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.8361130000000003em;"><span style="top:-1.872331em;margin-left:0em;"><span class="pstrut" style="height:3.05em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathdefault mtight">i</span><span class="mrel mtight">=</span><span class="mord mtight">1</span></span></span></span><span style="top:-3.050005em;"><span class="pstrut" style="height:3.05em;"></span><span><span class="mop op-symbol large-op">∑</span></span></span><span style="top:-4.300005em;margin-left:0em;"><span class="pstrut" style="height:3.05em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathdefault mtight" style="margin-right:0.03148em;">k</span><span class="mbin mtight">+</span><span class="mord mtight">1</span></span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:1.277669em;"><span></span></span></span></span></span><span class="mspace" style="margin-right:0.16666666666666666em;"></span><span class="mord mathdefault">i</span></span></span></span> 123</p>
             <h3>The Suneditor is based on pure JavaScript, with no dependencies.</h3>
             <pre>Suneditor is a lightweight, flexible, customizable WYSIWYG text editor for your web applications.</pre>
             <blockquote><p>Supports Chrome, Safari, Opera, Firefox, Edge, IE11, Mobile web browser.</p></blockquote>
@@ -168,7 +168,7 @@ <h3>The Suneditor is based on pure JavaScript, with no dependencies.</h3>
         <div class="inline-margin"></div>
         <textarea id="editor_inline3" style="display:none;">
             <p><br></p>
-            <div class="se-component se-image-container __se__float-right" contenteditable="false"><figure style="margin: auto;"><img src="http://suneditor.com/docs/cat2.jpg" data-align="right" alt="Cat" data-rotate="" data-proportion="false" data-rotatex="" data-rotatey="" origin-size="640,959" data-origin="640,959" style="width: 640px; max-width: 100%;"><figcaption contenteditable="true" style="margin-top: 0px;"><p>Insert description</p></figcaption></figure></div>
+            <div class="se-component se-image-container __se__float-right"><figure style="margin: auto;"><img src="http://suneditor.com/docs/cat2.jpg" data-align="right" alt="Cat" data-rotate="" data-proportion="false" data-rotatex="" data-rotatey="" origin-size="640,959" data-origin="640,959" style="width: 640px; max-width: 100%;"><figcaption style="margin-top: 0px;"><p>Insert description</p></figcaption></figure></div>
             <p><br></p>
         </textarea>
     </div>
@@ -177,7 +177,7 @@ <h3>The Suneditor is based on pure JavaScript, with no dependencies.</h3>
         <div class="inline-margin"></div>
         <textarea id="editor_balloon" style="display:none;">
             <p><br></p>
-            <div class="se-component se-image-container __se__float-right" contenteditable="false"><figure style="margin: auto;"><img src="http://suneditor.com/docs/cat1.jpg" data-align="right" alt="Cat paw" data-rotate="" data-proportion="false" data-rotatex="" data-rotatey="" origin-size="640,426" data-origin="640,426" style="width: 640px; max-width: 100%;"><figcaption contenteditable="true" style="margin-top: 0px;"><p>Insert description</p></figcaption></figure></div>
+            <div class="se-component se-image-container __se__float-right"><figure style="margin: auto;"><img src="http://suneditor.com/docs/cat1.jpg" data-align="right" alt="Cat paw" data-rotate="" data-proportion="false" data-rotatex="" data-rotatey="" origin-size="640,426" data-origin="640,426" style="width: 640px; max-width: 100%;"><figcaption style="margin-top: 0px;"><p>Insert description</p></figcaption></figure></div>
             <h3>The Suneditor is based on pure JavaScript, with no dependencies.</h3>
             <p>Suneditor is a lightweight, flexible, customizable WYSIWYG text editor for your web applications.</p>
             <pre>Supports Chrome, Safari, Opera, Firefox, Edge, IE11, Mobile web browser.</pre>
diff --git a/src/lib/core.js b/src/lib/core.js
index 70eef1567..6130b5369 100755
--- a/src/lib/core.js
+++ b/src/lib/core.js
@@ -5141,12 +5141,12 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             const renderHTML = util.createElement('DIV');
             renderHTML.innerHTML = contents;
 
-            const figcaptions = util.getListChildren(renderHTML, function (current) {
-                return /FIGCAPTION/i.test(current.nodeName);
+            const editableEls = util.getListChildren(renderHTML, function (current) {
+                return current.hasAttribute('contenteditable');
             });
 
-            for (let i = 0, len = figcaptions.length; i < len; i++) {
-                figcaptions[i].removeAttribute('contenteditable');
+            for (let i = 0, len = editableEls.length; i < len; i++) {
+                editableEls[i].removeAttribute('contenteditable');
             }
 
             if (options.fullPage && !onlyContents) {
@@ -6454,11 +6454,6 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             if (options.showPathLabel) context.element.navigation.textContent = core._variable.currentNodes.join(' > ');
         },
 
-        _cancelCaptionEdit: function () {
-            this.setAttribute('contenteditable', false);
-            this.removeEventListener('blur', event._cancelCaptionEdit);
-        },
-
         _buttonsEventHandler: function (e) {
             let target = e.target;
             if (core._bindControllersOff) e.stopPropagation();
@@ -6510,6 +6505,12 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
 
         onMouseDown_wysiwyg: function (e) {
             if (core.isReadOnly || util.isNonEditable(context.element.wysiwyg)) return;
+            if (util._isExcludeSelectionElement(e.target)) {
+                console.log("excldfjdsoiafjkls")
+                e.preventDefault();
+                return;
+            }
+
             _w.setTimeout(core._editorRange.bind(core));
 
             // user event
@@ -6528,8 +6529,6 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             if (core._isBalloon) {
                 event._hideToolbar();
             }
-
-            if (/FIGURE/i.test(e.target.nodeName)) e.preventDefault();
         },
 
         onClick_wysiwyg: function (e) {
@@ -6556,9 +6555,8 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             }
 
             const figcaption = util.getParentElement(targetElement, 'FIGCAPTION');
-            if (figcaption && (util.isNonEditable(figcaption) || !figcaption.getAttribute("contenteditable"))) {
+            if (figcaption && util.isNonEditable(figcaption)) {
                 e.preventDefault();
-                figcaption.setAttribute('contenteditable', true);
                 figcaption.focus();
 
                 if (core._isInline && !core._inlineToolbarAttr.isShow) {
diff --git a/src/lib/util.js b/src/lib/util.js
index f62d24b14..49c81c9a0 100755
--- a/src/lib/util.js
+++ b/src/lib/util.js
@@ -1749,6 +1749,10 @@ const util = {
         }.bind(this));
     },
 
+    _isExcludeSelectionElement: function (element) {
+        return !/FIGCAPTION/i.test(element.nodeName) && (this.isComponent(element) || /FIGURE/i.test(element.nodeName));
+    },
+
     /**
      * @description Nodes that need to be added without modification when changing text nodes
      * @param {Node} element Element to check
diff --git a/src/plugins/dialog/image.js b/src/plugins/dialog/image.js
index 262e26f58..7fc4021a0 100644
--- a/src/plugins/dialog/image.js
+++ b/src/plugins/dialog/image.js
@@ -660,7 +660,6 @@ export default {
         // caption
         if (contextImage._captionChecked) {
             contextImage._caption = this.plugins.component.create_caption.call(this);
-            contextImage._caption.setAttribute('contenteditable', false);
             cover.appendChild(contextImage._caption);
         }
 
diff --git a/src/plugins/dialog/math.js b/src/plugins/dialog/math.js
index a96422f22..14c3ea1ee 100644
--- a/src/plugins/dialog/math.js
+++ b/src/plugins/dialog/math.js
@@ -135,6 +135,7 @@ export default {
                 if (!element.getAttribute('data-exp') || !this.options.katex) return;
                 const dom = this._d.createRange().createContextualFragment(this.plugins.math._renderer.call(this, this.util.HTMLDecoder(element.getAttribute('data-exp'))));
                 element.innerHTML = dom.querySelector('.katex').innerHTML;
+                element.setAttribute('contenteditable', false);
             }
         };
     },
diff --git a/src/plugins/modules/component.js b/src/plugins/modules/component.js
index b7c88cc52..804fa26fe 100644
--- a/src/plugins/modules/component.js
+++ b/src/plugins/modules/component.js
@@ -32,7 +32,6 @@
         set_container: function (cover, className) {
             const container = this.util.createElement('DIV');
             container.className = 'se-component ' + className;
-            container.setAttribute('contenteditable', false);
             container.appendChild(cover);
     
             return container;
@@ -55,7 +54,6 @@
          */
         create_caption: function () {
             const caption = this.util.createElement('FIGCAPTION');
-            caption.setAttribute('contenteditable', true);
             caption.innerHTML = '<div>' + this.lang.dialogBox.caption + '</div>';
             return caption;
         }