#svgSourceEditorDiaog editor dialog changed

src/editor/svgedit.js

@@ -234,6 +234,10 @@ editor.init = () => {
     const newSeEditPrefsDialog = document.createElement('se-edit-prefs-dialog');
     newSeEditPrefsDialog.setAttribute('id', 'se-edit-prefs');
     document.body.append(newSeEditPrefsDialog);
+    // svg editor source dialoag added to DOM
+    const newSeEditorDialog = document.createElement('se-svg-source-editor-dialog');
+    newSeEditorDialog.setAttribute('id', 'se-svg-editor-dialog');
+    document.body.append(newSeEditorDialog);
   } catch (err) {}
 
   configObj.load();
@@ -634,14 +638,13 @@ editor.init = () => {
   */
   const showSourceEditor = function (e, forSaving) {
     if (editingsource) { return; }
-
     editingsource = true;
     origSource = svgCanvas.getSvgString();
-    $('#save_output_btns').toggle(Boolean(forSaving));
-    $('#tool_source_back').toggle(!forSaving);
-    $('#svg_source_textarea').val(origSource);
-    $('#svg_source_editor').fadeIn();
-    $('#svg_source_textarea').focus();
+    const $editorDialog = document.getElementById('se-svg-editor-dialog');
+    $editorDialog.setAttribute('dialog', 'open');
+    $editorDialog.setAttribute('value', origSource);
+    $editorDialog.setAttribute('copysec', Boolean(forSaving));
+    $editorDialog.setAttribute('applysec', !forSaving);
   };
 
   let selectedElement = null;
@@ -2822,18 +2825,17 @@ editor.init = () => {
   * @returns {void}
   */
   const hideSourceEditor = () => {
-    $('#svg_source_editor').hide();
+    const $editorDialog = document.getElementById('se-svg-editor-dialog');
+    $editorDialog.setAttribute('dialog', 'closed');
     editingsource = false;
-    $('#svg_source_textarea').blur();
   };
 
   /**
-  *
+  * @param {Event} e
   * @returns {Promise<void>} Resolves to `undefined`
   */
-  const saveSourceEditor = async () => {
+  const saveSourceEditor = async (e) => {
     if (!editingsource) { return; }
-
     const saveChanges = () => {
       svgCanvas.clearSelection();
       hideSourceEditor();
@@ -2843,7 +2845,7 @@ editor.init = () => {
       prepPaints();
     };
 
-    if (!svgCanvas.setSvgString($('#svg_source_textarea').val())) {
+    if (!e.detail.value) {
       const ok = await $.confirm(uiStrings.notification.QerrorsRevertToSource);
       if (!ok) {
         return;
@@ -2938,10 +2940,10 @@ editor.init = () => {
   };
 
   /**
-  *
+  * @param {Event} e
   * @returns {Promise<void>} Resolves to `undefined`
   */
-  const cancelOverlays = async () => {
+  const cancelOverlays = async (e) => {
     $('#dialog_box').hide();
     if (!editingsource && !docprops && !preferences) {
       if (curContext) {
@@ -2951,7 +2953,7 @@ editor.init = () => {
     }
 
     if (editingsource) {
-      if (origSource !== $('#svg_source_textarea').val()) {
+      if (origSource !== e.detail.value) {
         const ok = await $.confirm(uiStrings.notification.QignoreSourceChanges);
         if (ok) {
           hideSourceEditor();
@@ -3446,11 +3448,9 @@ editor.init = () => {
     $id('font_size').addEventListener('change', (e) => changeFontSize(e));
 
     // register actions in top toolbar
-    $id('tool_source_save').addEventListener('click', saveSourceEditor);
     $id('tool_ungroup').addEventListener('click', clickGroup);
     $id('tool_unlink_use').addEventListener('click', clickGroup);
     $id('sidepanel_handle').addEventListener('click', toggleSidePanel);
-    $id('copy_save_done').addEventListener('click', cancelOverlays);
 
     $id('tool_bold').addEventListener('click', clickBold);
     $id('tool_italic').addEventListener('click', clickItalic);
@@ -3490,6 +3490,15 @@ editor.init = () => {
         savePreferences(e);
       }
     });
+    $id('se-svg-editor-dialog').addEventListener('change', function (e) {
+      if (e?.detail?.copy === 'click') {
+        cancelOverlays(e);
+      } else if (e?.detail?.dialog === 'closed') {
+        hideSourceEditor();
+      } else {
+        saveSourceEditor(e);
+      }
+    });
     layersPanel.addEvents();
     const toolButtons = [
       // Shortcuts not associated with buttons