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

  1. // This file is part of Moodle - http://moodle.org/
  2. //
  3. // Moodle is free software: you can redistribute it and/or modify
  4. // it under the terms of the GNU General Public License as published by
  5. // the Free Software Foundation, either version 3 of the License, or
  6. // (at your option) any later version.
  7. //
  8. // Moodle is distributed in the hope that it will be useful,
  9. // but WITHOUT ANY WARRANTY; without even the implied warranty of
  10. // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  11. // GNU General Public License for more details.
  12. //
  13. // You should have received a copy of the GNU General Public License
  14. // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  16. /**
  17.  * Module to assist with creation and management of content.
  18.  *
  19.  * @module     editor_tiny/content
  20.  * @copyright  Andrew Lyons <andrew@nicols.co.uk>
  21.  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  22.  */
  24. /**
  25.  * Add MathML support to the editor.
  26.  *
  27.  * @param {TinyMCE} editor
  28.  */
  29. export const addMathMLSupport = (editor) => {
  30.     const getNodeType = (node) => {
  31.         const style = node.attr('style');
  32.         if (style?.includes('display')) {
  33.             if (style.match(/display:[^;]*inline/)) {
  34.                 return 'tiny-math-span';
  35.             }
  36.         }
  37.         return 'tiny-math-block';
  38.     };
  41.     editor.on('PreInit', () => {
  42.         editor.schema.addCustomElements({
  43.             // Add support for MathML by defining some tiny-math blocks which extends SPAN/DIV.
  44.             // Note: This is blind support and does not check the child content.
  45.             // Any invalid markup will be accepted.
  46.             // Note: We use the same names as the Tiny Premium Math plugin to avoid conflicts if both are enabled.
  47.             math: {
  48.                 'extends': 'div',
  49.             },
  50.             'tiny-math-span': {
  51.                 'extends': "span",
  52.             },
  53.             'tiny-math-block': {
  54.                 'extends': "div",
  55.             },
  56.         });
  58.         // Add a Parser filter to wrap math nodes in a tiny-math-[block|span] element.
  59.         editor.parser.addNodeFilter('math', (nodes) => nodes.forEach((node) => {
  60.             if (node.parent) {
  61.                 if (node.parent.name === 'tiny-math-block' || node.parent.name === 'tiny-math-span') {
  62.                     // Already wrapped.
  63.                     return;
  64.                 }
  65.             }
  67.             const displayMode = getNodeType(node);
  68.             node.wrap(editor.editorManager.html.Node.create(displayMode, {
  69.                 contenteditable: 'false',
  70.             }));
  71.         }));
  73.         // Add a Serializer filter to remove the tiny-math-[block|span] wrapper.
  74.         editor.serializer.addNodeFilter('tiny-math-span, tiny-math-block', (nodes, name) => nodes.forEach((node) => {
  75.             const displayMode = name.replace('tiny-math-', '');
  76.             node.children().forEach((child) => {
  77.                 const currentStyle = child.attr('style');
  78.                 if (currentStyle) {
  79.                     child.attr('style', `${currentStyle};display: ${displayMode}`);
  80.                 } else {
  81.                     child.attr('style', `display: ${displayMode}`);
  82.                 }
  83.             });
  84.             node.unwrap();
  85.         }));
  86.     });
  87. };
  89. /**
  90.  * Add SVG support to the editor.
  91.  *
  92.  * @param {TinyMCE} editor
  93.  */
  94. export const addSVGSupport = (editor) => {
  95.     editor.on('PreInit', () => {
  96.         editor.schema.addCustomElements({
  97.             // Add support for SVG by defining an SVG tag which extends DIV.
  98.             // Note: This is blind support and does not check the child content.
  99.             // Any invalid markup will be accepted.
  100.             svg: {
  101.                 'extends': "div",
  102.             },
  103.             'tiny-svg-block': {
  104.                 'extends': "div",
  105.             },
  106.         });
  108.         editor.parser.addNodeFilter('svg', (nodes) => nodes.forEach((node) => {
  109.             node.wrap(editor.editorManager.html.Node.create('tiny-svg-block', {
  110.                 contenteditable: 'false',
  111.             }));
  112.         }));
  113.         editor.serializer.addNodeFilter('tiny-svg-block', (nodes) => nodes.forEach((node) => {
  114.             node.unwrap();
  115.         }));
  116.     });
  117. };