MDL-83794 editor_tiny: Add SVG support

lib/editor/tiny/amd/build/content.min.js

@@ -1,3 +1,3 @@
-define("editor_tiny/content",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.addMathMLSupport=void 0;_exports.addMathMLSupport=editor=>{editor.on("PreInit",(()=>{editor.schema.addCustomElements({math:{extends:"div"},"tiny-math-span":{extends:"span"},"tiny-math-block":{extends:"div"}}),editor.parser.addNodeFilter("math",(nodes=>nodes.forEach((node=>{if(node.parent&&("tiny-math-block"===node.parent.name||"tiny-math-span"===node.parent.name))return;const displayMode=(node=>{const style=node.attr("style");return null!=style&&style.includes("display")&&style.match(/dispaly:[^;]*inline/)?"tiny-math-span":"tiny-math-block"})(node);node.wrap(editor.editorManager.html.Node.create(displayMode,{contenteditable:"false"}))})))),editor.serializer.addNodeFilter("tiny-math-span, tiny-math-block",((nodes,name)=>nodes.forEach((node=>{const displayMode=name.replace("tiny-math-","");node.children().forEach((child=>{const currentStyle=child.attr("style");currentStyle?child.attr("style","".concat(currentStyle,";display: ").concat(displayMode)):child.attr("style","display: ".concat(displayMode))})),node.unwrap()}))))}))}}));
+define("editor_tiny/content",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.addSVGSupport=_exports.addMathMLSupport=void 0;_exports.addMathMLSupport=editor=>{editor.on("PreInit",(()=>{editor.schema.addCustomElements({math:{extends:"div"},"tiny-math-span":{extends:"span"},"tiny-math-block":{extends:"div"}}),editor.parser.addNodeFilter("math",(nodes=>nodes.forEach((node=>{if(node.parent&&("tiny-math-block"===node.parent.name||"tiny-math-span"===node.parent.name))return;const displayMode=(node=>{const style=node.attr("style");return null!=style&&style.includes("display")&&style.match(/dispaly:[^;]*inline/)?"tiny-math-span":"tiny-math-block"})(node);node.wrap(editor.editorManager.html.Node.create(displayMode,{contenteditable:"false"}))})))),editor.serializer.addNodeFilter("tiny-math-span, tiny-math-block",((nodes,name)=>nodes.forEach((node=>{const displayMode=name.replace("tiny-math-","");node.children().forEach((child=>{const currentStyle=child.attr("style");currentStyle?child.attr("style","".concat(currentStyle,";display: ").concat(displayMode)):child.attr("style","display: ".concat(displayMode))})),node.unwrap()}))))}))};_exports.addSVGSupport=editor=>{editor.on("PreInit",(()=>{editor.schema.addCustomElements({svg:{extends:"div"},"tiny-svg-block":{extends:"div"}}),editor.parser.addNodeFilter("svg",(nodes=>nodes.forEach((node=>{node.wrap(editor.editorManager.html.Node.create("tiny-svg-block",{contenteditable:"false"}))})))),editor.serializer.addNodeFilter("tiny-svg-block",(nodes=>nodes.forEach((node=>{node.unwrap()}))))}))}}));
 
 //# sourceMappingURL=content.min.js.map

lib/editor/tiny/amd/src/content.js

@@ -85,3 +85,33 @@ export const addMathMLSupport = (editor) => {
         }));
     });
 };
+
+/**
+ * Add SVG support to the editor.
+ *
+ * @param {TinyMCE} editor
+ */
+export const addSVGSupport = (editor) => {
+    editor.on('PreInit', () => {
+        editor.schema.addCustomElements({
+            // Add support for SVG by defining an SVG tag which extends DIV.
+            // Note: This is blind support and does not check the child content.
+            // Any invalid markup will be accepted.
+            svg: {
+                'extends': "div",
+            },
+            'tiny-svg-block': {
+                'extends': "div",
+            },
+        });
+
+        editor.parser.addNodeFilter('svg', (nodes) => nodes.forEach((node) => {
+            node.wrap(editor.editorManager.html.Node.create('tiny-svg-block', {
+                contenteditable: 'false',
+            }));
+        }));
+        editor.serializer.addNodeFilter('tiny-svg-block', (nodes) => nodes.forEach((node) => {
+            node.unwrap();
+        }));
+    });
+};

lib/editor/tiny/amd/src/editor.js

@@ -28,7 +28,7 @@ import {getTinyMCE, baseUrl} from './loader';
 import * as Options from './options';
 import {addToolbarButton, addToolbarButtons, addToolbarSection,
     removeToolbarButton, removeSubmenuItem, updateEditorState} from './utils';
-import {addMathMLSupport} from './content';
+import {addMathMLSupport, addSVGSupport} from './content';
 
 /**
  * Storage for the TinyMCE instances on the page.
@@ -343,6 +343,7 @@ const getStandardConfig = (target, tinyMCE, options, plugins) => {
             });
 
             addMathMLSupport(editor);
+            addSVGSupport(editor);
 
             target.addEventListener('form:editorUpdated', function() {
                 updateEditorState(editor, target);