fix(chore): make svgedit less intrusive by adding components in its div instead of document.body.

src/editor/EditorStartup.js

@@ -74,34 +74,34 @@ class EditorStartup {
     this.$svgEditor.style.visibility = 'hidden';
     try {
       // add editor components to the DOM
-      document.body.append(editorTemplate.content.cloneNode(true));
+      this.$svgEditor.append(editorTemplate.content.cloneNode(true));
       // Image props dialog added to DOM
       const newSeImgPropDialog = document.createElement('se-img-prop-dialog');
       newSeImgPropDialog.setAttribute('id', 'se-img-prop');
-      document.body.append(newSeImgPropDialog);
+      this.$svgEditor.append(newSeImgPropDialog);
       newSeImgPropDialog.init(this.i18next);
       // editor prefences dialoag added to DOM
       const newSeEditPrefsDialog = document.createElement('se-edit-prefs-dialog');
       newSeEditPrefsDialog.setAttribute('id', 'se-edit-prefs');
-      document.body.append(newSeEditPrefsDialog);
+      this.$svgEditor.append(newSeEditPrefsDialog);
       newSeEditPrefsDialog.init(this.i18next);
       // canvas menu added to DOM
       const dialogBox = document.createElement('se-cmenu_canvas-dialog');
       dialogBox.setAttribute('id', 'se-cmenu_canvas');
-      document.body.append(dialogBox);
+      this.$svgEditor.append(dialogBox);
       dialogBox.init(this.i18next);
       // alertDialog added to DOM
       const alertBox = document.createElement('se-alert-dialog');
       alertBox.setAttribute('id', 'se-alert-dialog');
-      document.body.append(alertBox);
+      this.$svgEditor.append(alertBox);
       // promptDialog added to DOM
       const promptBox = document.createElement('se-prompt-dialog');
       promptBox.setAttribute('id', 'se-prompt-dialog');
-      document.body.append(promptBox);
+      this.$svgEditor.append(promptBox);
       // Export dialog added to DOM
       const exportDialog = document.createElement('se-export-dialog');
       exportDialog.setAttribute('id', 'se-export-dialog');
-      document.body.append(exportDialog);
+      this.$svgEditor.append(exportDialog);
       exportDialog.init(this.i18next);
     } catch (err) {
       console.error(err);

src/editor/Rulers.js

@@ -18,7 +18,7 @@ class Rulers {
     this.svgCanvas = editor.svgCanvas;
     this.editor = editor;
     // add rulers component to the DOM
-    document.body.append(rulersTemplate.content.cloneNode(true));
+    this.editor.$svgEditor.append(rulersTemplate.content.cloneNode(true));
   }
   /**
    * @type {Module}

src/editor/extensions/ext-grid/ext-grid.js

@@ -40,7 +40,7 @@ export default {
     let showGrid = svgEditor.configObj.curConfig.showGrid || false;
 
     hcanvas.style.display = 'none';
-    document.body.appendChild(hcanvas);
+    svgEditor.$svgEditor.appendChild(hcanvas);
 
     const canvasGrid = svgdoc.createElementNS(NS.SVG, 'svg');
     assignAttributes(canvasGrid, {

src/editor/extensions/ext-storage/ext-storage.js

@@ -82,7 +82,7 @@ export default {
     // storageDialog added to DOM
     const storageBox = document.createElement('se-storage-dialog');
     storageBox.setAttribute('id', 'se-storage-dialog');
-    document.body.append(storageBox);
+    svgEditor.$svgEditor.append(storageBox);
     storageBox.init(svgEditor.i18next);
 
     // manage the change in the storageDialog

src/editor/panels/LayersPanel.js

@@ -149,13 +149,13 @@ class LayersPanel {
     menuMore.setAttribute("id", "se-cmenu-layers-more");
     menuMore.value = "layer_moreopts";
     menuMore.setAttribute("leftclick", true);
-    document.body.append(menuMore);
+    this.editor.$svgEditor.append(menuMore);
     menuMore.init(i18next);
     const menuLayerBox = document.createElement("se-cmenu-layers");
     menuLayerBox.setAttribute("id", "se-cmenu-layers-list");
     menuLayerBox.value = "layerlist";
     menuLayerBox.setAttribute("leftclick", false);
-    document.body.append(menuLayerBox);
+    this.editor.$svgEditor.append(menuLayerBox);
     menuLayerBox.init(i18next);
     document
       .getElementById("layer_new")

src/editor/panels/TopPanel.js

@@ -996,7 +996,7 @@ class TopPanel {
       "se-svg-source-editor-dialog"
     );
     newSeEditorDialog.setAttribute("id", "se-svg-editor-dialog");
-    document.body.append(newSeEditorDialog);
+    this.editor.$svgEditor.append(newSeEditorDialog);
     newSeEditorDialog.init(i18next);
     // register action to top panel buttons
     $id("tool_source").addEventListener(