Merge branch 'master' into refactor-svgcanvas

src/editor/components/jgraduate/Util.js

@@ -104,10 +104,7 @@ export function getClosest(elem, selector) {
  */
 export function getParents(elem, selector) {
   const parents = [];
-  let firstChar;
-  if ( selector ) {
-    firstChar = selector.charAt(0);
-  }
+  const firstChar = selector?.charAt(0);
   // Get matches
   for ( ; elem && elem !== document; elem = elem.parentNode ) {
     if ( selector ) {
@@ -138,23 +135,13 @@ export function getParents(elem, selector) {
     }
   }
   // Return parents if any exist
-  if ( parents.length === 0 ) {
-    return null;
-  } else {
-    return parents;
-  }
+  return parents.length? parents : null;
 }
 
 export function getParentsUntil(elem, parent, selector) {
   const parents = [];
-  let parentType;
-  let selectorType;
-  if ( parent ) {
-    parentType = parent.charAt(0);
-  }
-  if ( selector ) {
-    selectorType = selector.charAt(0);
-  }
+  const parentType = parent?.charAt(0);
+  const selectorType = selector?.selector.charAt(0);
   // Get matches
   for ( ; elem && elem !== document; elem = elem.parentNode ) {
     // Check if parent has been reached
@@ -210,9 +197,5 @@ export function getParentsUntil(elem, parent, selector) {
     }
   }
   // Return parents if any exist
-  if ( parents.length === 0 ) {
-    return null;
-  } else {
-    return parents;
-  }
+  return parents.length? parents : null;
 }

src/editor/panels/TopPanel.html

@@ -133,7 +133,7 @@
         <se-button id="tool_italic" title="properties.italic" src="italic.svg" shortcut="I"></se-button>
         <se-select id="tool_font_family" label="properties.font_family_label"
             options="properties.serif,properties.sans_serif,properties.cursive,properties.fantasy,properties.monospace,properties.courier,properties.helvetica,properties.times"
-            values="Serif::Sans-serif::Cursive::Fantasy::Monospace::Courier::Helvetica::Times"></select>
+            values="Serif::Sans-serif::Cursive::Fantasy::Monospace::Courier::Helvetica::Times"></se-select>
             <se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="properties.font_size"
                 src="fontsize.svg"></se-spin-input>
     </div>

src/svgcanvas/elem-get-set.js

@@ -703,7 +703,7 @@ export const setFontSizeMethod = function (val) {
   const selectedElements = svgCanvas.getSelectedElements();
   svgCanvas.setCurText('font_size', val);
   svgCanvas.changeSelectedAttribute('font-size', val);
-  if (!selectedElements[0].textContent) {
+  if (selectedElements[0] && !selectedElements[0].textContent) {
     svgCanvas.textActions.setCursor();
   }
 };

src/svgcanvas/sanitize.js

@@ -166,7 +166,9 @@ export const sanitizeSvg = function (node) {
         // We can add specific namepaces on demand for now.
         // Is there a more appropriate way to do this?
         if (attrName.startsWith('se:') || attrName.startsWith('oi:')|| attrName.startsWith('data-')) {
-          seAttrs.push([ attrName, attr.value ]);
+          // We should bypass the namespace aswell
+          const seAttrNS = (attrName.startsWith('se:')) ? NS.SE : ((attrName.startsWith('oi:')) ? NS.OI : null);
+          seAttrs.push([ attrName, attr.value, seAttrNS ]);
         } else {
           console.warn(`sanitizeSvg: attribute ${attrName} in element ${node.nodeName} not in whitelist is removed`);
           node.removeAttributeNS(attrNsURI, attrLocalName);
@@ -190,8 +192,8 @@ export const sanitizeSvg = function (node) {
       }
     }
 
-    Object.values(seAttrs).forEach(([ att, val ]) => {
-      node.setAttributeNS(NS.SE, att, val);
+    Object.values(seAttrs).forEach(([ att, val, ns ]) => {
+      node.setAttributeNS(ns, att, val);
     });
 
     // for some elements that have a xlink:href, ensure the URI refers to a local element

src/svgcanvas/selection.js

@@ -49,7 +49,7 @@ export const clearSelectionMethod = function (noCall) {
   svgCanvas?.setEmptySelectedElements();
 
   if (!noCall) {
-    svgCanvas.call("selected", selectedElements);
+    svgCanvas.call("selected", selectionContext_.getSelectedElements());
   }
 };
 

src/svgcanvas/svg-exec.js

@@ -527,7 +527,7 @@ export const importSvgString = function (xmlString) {
     // Look for symbol and make sure symbol exists in image
     if (svgCanvas.getImportIds(uid) && svgCanvas.getImportIds(uid).symbol) {
       const parents = getParents(svgCanvas.getImportIds(uid).symbol, '#svgroot');
-      if (parents.length) {
+      if (parents?.length) {
         useExisting = true;
       }
     }