@pie-lib/editable-html 11.1.2-next.0 → 11.2.0-beta.1

package/src/plugins/math/__tests__/index.test.jsx

@@ -0,0 +1,245 @@
+import React from 'react';
+import debug from 'debug';
+import MockChange from '../../image/__tests__/mock-change';
+import { Data } from 'slate';
+import MathPlugin, { serialization, inlineMath, CustomToolbarComp } from '../index';
+import { shallow } from 'enzyme';
+import { MathToolbar } from '@pie-lib/math-toolbar';
+jest.mock('@pie-framework/mathquill', () => ({
+  StaticMath: jest.fn(),
+  getInterface: jest.fn().mockReturnThis(),
+  registerEmbed: jest.fn(),
+}));
+
+jest.mock('@pie-lib/math-toolbar', () => ({
+  MathPreview: () => <div />,
+  MathToolbar: () => <div />,
+}));
+
+jest.mock('@pie-lib/math-rendering', () => ({
+  ...jest.requireActual('@pie-lib/math-rendering'),
+  mmlToLatex: jest.fn(() => {
+    return '/foobar/latex';
+  }),
+}));
+const log = debug('@pie-lib:editable-html:test:math');
+
+// I believe @andrei is moving this stuff out.
+describe('MathPlugin', () => {
+  describe('toolbar', () => {
+    describe('onClick', () => {
+      let plugin, mockChange, value, onChange;
+      beforeEach(() => {
+        plugin = MathPlugin({});
+        mockChange = new MockChange();
+        value = {
+          change: jest.fn(() => mockChange),
+        };
+        onChange = jest.fn();
+        plugin.toolbar.onClick(value, onChange);
+      });
+
+      test('calls insertInline', () => {
+        expect(mockChange.insertInline).toBeCalledWith(expect.objectContaining({ data: inlineMath().data }));
+      });
+
+      test('it calls onChange', () => {
+        expect(onChange).toHaveBeenCalledWith(mockChange);
+      });
+    });
+  });
+
+  describe('renderNode', () => {
+    test('the component has props', () => {
+      const plugin = MathPlugin({});
+      const { props } = plugin.renderNode({ node: { type: 'math' } });
+      expect(props.node).toEqual({ type: 'math' });
+    });
+  });
+
+  describe('serialization', () => {
+    describe('deserialize', () => {
+      const assertDeserialize = (html, expected, wrapType) => {
+        it(`innerHTML: ${html} is deserialized to: ${expected} with wrapType: ${wrapType}`, () => {
+          const el = {
+            tagName: 'span',
+            childNodes: [],
+            getAttribute: jest.fn(() => ''),
+            hasAttribute: jest.fn(() => true),
+            innerHTML: html,
+          };
+          const next = jest.fn();
+
+          const out = serialization.deserialize(el, next);
+          expect(out).toEqual({
+            object: 'inline',
+            type: 'math',
+            isVoid: true,
+            nodes: [],
+            data: {
+              latex: expected,
+              wrapper: wrapType,
+            },
+          });
+        });
+      };
+
+      assertDeserialize('$$&lt;$$', '<', MathPlugin.DOLLAR);
+      assertDeserialize('$&lt;$', '<', MathPlugin.DOLLAR);
+      assertDeserialize('\\(&lt;\\)', '<', MathPlugin.ROUND_BRACKETS);
+      assertDeserialize('\\[&lt;\\]', '<', MathPlugin.ROUND_BRACKETS);
+      assertDeserialize('latex', 'latex', MathPlugin.ROUND_BRACKETS);
+      assertDeserialize('\\displaystyle foo', 'foo', MathPlugin.ROUND_BRACKETS);
+
+      it('should make mathml editable if MathPlugin.mathMlOptions.mmlEditing is true', () => {
+        MathPlugin.mathMlOptions.mmlEditing = true;
+        const el = {
+          tagName: 'math',
+          outerHTML:
+            '<math xmlns="http://www.w3.org/1998/Math/MathML">  <mn>2</mn>  <mi>x</mi>  <mtext>&#xA0;</mtext>  <mo>&#x2264;</mo>  <mn>4</mn>  <mi>y</mi>  <mtext>&#xA0;</mtext>  <mo>+</mo>  <mtext>&#xA0;</mtext>  <mn>8</mn> <msqrt>    <mi>h</mi>  </msqrt></math>',
+        };
+        const next = jest.fn();
+
+        const out = serialization.deserialize(el, next);
+
+        expect(out).toEqual({
+          object: 'inline',
+          type: 'math',
+          isVoid: true,
+          nodes: [],
+          data: {
+            latex: '/foobar/latex',
+            wrapper: 'round_brackets',
+          },
+        });
+      });
+
+      it('should make mathml readOnly if MathPlugin.mathMlOptions.mmlEditing is false', () => {
+        MathPlugin.mathMlOptions.mmlEditing = false;
+        const el = {
+          tagName: 'math',
+          outerHTML:
+            '<math xmlns="http://www.w3.org/1998/Math/MathML">  <mn>2</mn>  <mi>x</mi>  <mtext>&#xA0;</mtext>  <mo>&#x2264;</mo>  <mn>4</mn>  <mi>y</mi>  <mtext>&#xA0;</mtext>  <mo>+</mo>  <mtext>&#xA0;</mtext>  <mn>8</mn> <msqrt>    <mi>h</mi>  </msqrt></math>',
+        };
+        const next = jest.fn();
+
+        const out = serialization.deserialize(el, next);
+
+        expect(out).toEqual({
+          object: 'inline',
+          isVoid: true,
+          type: 'mathml',
+          data: {
+            html: el.outerHTML,
+          },
+        });
+      });
+    });
+
+    describe('serialize', () => {
+      const assertSerialize = (latex, expectedHtml, wrapper) => {
+        wrapper = wrapper || MathPlugin.ROUND_BRACKETS;
+        it(`${latex} is serialized to: ${expectedHtml}`, () => {
+          const object = {
+            kind: 'inline',
+            type: 'math',
+            isVoid: true,
+            nodes: [],
+            data: Data.create({ latex, wrapper }),
+          };
+          const children = [];
+
+          const out = serialization.serialize(object, children);
+          log('out: ', out);
+          expect(out).toEqual(
+            <span data-latex="" data-raw={latex}>
+              {expectedHtml}
+            </span>,
+          );
+        });
+      };
+
+      assertSerialize('latex', '\\(latex\\)', MathPlugin.ROUND_BRACKETS);
+      assertSerialize('latex', '\\(latex\\)', MathPlugin.SQUARE_BRACKETS);
+      assertSerialize('latex', '$latex$', MathPlugin.DOLLAR);
+      assertSerialize('latex', '$latex$', MathPlugin.DOUBLE_DOLLAR);
+
+      /**
+       * Note that when this is converted to html it get's escaped - but that's an issue with the slate html-serializer.
+       */
+      assertSerialize('<', '\\(<\\)');
+      assertSerialize('x<y', '\\(x<y\\)');
+    });
+  });
+});
+
+describe('CustomToolbarComp', () => {
+  let onDataChange;
+  let onToolbarDone;
+
+  const wrapper = (extras) => {
+    let mockChange = new MockChange();
+    const defaults = {
+      node: {
+        key: '1',
+        data: Data.create({ latex: 'foo' }),
+        equals: () => true,
+      },
+      value: {
+        document: {
+          getNextText: jest.fn().mockReturnValue({ key: 'nt' }),
+        },
+        change: jest.fn().mockReturnValue(mockChange),
+      },
+      onDataChange,
+      onToolbarDone,
+    };
+
+    const props = {
+      ...defaults,
+      ...extras,
+    };
+
+    return shallow(<CustomToolbarComp {...props} />);
+  };
+
+  describe('render', () => {
+    it('renders without default keypadMode', () => {
+      const w = wrapper();
+
+      expect(w).toMatchSnapshot();
+
+      w.setProps({ pluginProps: { math: { keypadMode: 3 } } });
+
+      expect(w).toMatchSnapshot();
+    });
+
+    it('renders with default keypadMode', () => {
+      const w = wrapper({ pluginProps: { math: { keypadMode: 'geometry' } } });
+
+      expect(w).toMatchSnapshot();
+
+      w.setProps({ pluginProps: { math: { keypadMode: 3 } } });
+
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('onDone', () => {
+    it('calls onToolbarDone', () => {
+      onToolbarDone = jest.fn();
+      const w = wrapper();
+      w.find(MathToolbar).prop('onDone')('oo');
+      expect(onToolbarDone).toHaveBeenCalledWith(expect.anything(), false);
+    });
+  });
+
+  describe('onChange', () => {
+    it('calls onDataChange', () => {
+      onDataChange = jest.fn();
+      const w = wrapper();
+      w.find(MathToolbar).prop('onChange')('oo');
+      expect(onDataChange).toHaveBeenCalledWith('1', { latex: 'oo' });
+    });
+  });
+});

package/src/plugins/math/index.jsx

@@ -7,7 +7,7 @@ import debug from 'debug';
 import SlatePropTypes from 'slate-prop-types';
 import PropTypes from 'prop-types';
 
-import { BLOCK_TAGS } from '../../serialization';
+import { BLOCK_TAGS } from '../../block-tags';
 import isEqual from 'lodash/isEqual';
 
 const log = debug('@pie-lib:editable-html:plugins:math');
@@ -36,6 +36,7 @@ export const CustomToolbarComp = React.memo(
         ...node.data.toObject(),
         latex,
       };
+
       const change = value.change().setNodeByKey(node.key, { data: update });
 
       const nextText = value.document.getNextText(node.key);
@@ -105,6 +106,7 @@ export default function MathPlugin(opts) {
   return {
     name: 'math',
     toolbar: {
+      ariaLabel: 'Math Toolbar',
       icon: <Functions />,
       onClick: (value, onChange) => {
         log('[insertMath]');
@@ -191,35 +193,79 @@ const getTagName = (el) => {
  * @param input
  * @returns {*}
  */
-const lessThanHandling = (input) => {
-  const arrowSplit = input.split('<');
-
-  // if we don't have at least 2 characters there's no point in checking
-  if (input.length > 2) {
-    return arrowSplit.reduce((st, part) => {
-      /*
-       We check if this element resulted is:
-       div - continuation of a beginning of a HTML element
-       /div - closing of a HTML tag
-       br/> - beginning and closing of a html TAG
-       */
-      if (part.match(/<[a-zA-Z/][\s\S]*>/gi)) {
-        return `${st}${st ? '<' : ''}${part}`;
-      }
-
-      return `${st}${st ? '&lt;' : ''}${part}`;
-    }, '');
-  }
-
-  return input;
+const arrowHandlingCase = (input) => {
+  /*
+  If we have a < character followed by a letter
+  we make sure to replace it with a &lt; sign instead
+   */
+  return input.replace(/<([a-zA-Z]*)/g, '&lt;$1');
 };
 
-function fixLatexExpression(latexInput) {
+function replaceLeftRight(latexInput) {
   // for some reason, mmlToLatex parses () incorrectly - or at least in a way that our interpreter can not use them
   // Replace '\\left.' and '\\right.' with an empty string
   return latexInput.replace(/\\left\.\s*|\\right\.\s*/g, '');
 }
 
+const convertLatexToMathMl = ({ latex, decoded, wrapper }) => {
+  const removeEmptyMos = (mmlFromLatex) => {
+    // Regular expression to match <mo>&#x2061;</mo> and <mo ...>&#x2061;</mo>, which get added when using log with base
+    // not sure why they get added, but they add an extra space which is not needed
+    const regex = /<mo(?: [^>]*)?>&#x2061;<\/mo>/g;
+
+    // Replace all occurrences of the matched patterns
+    return mmlFromLatex.replace(regex, '');
+  };
+  const handled = arrowHandlingCase(decoded);
+
+  const latexToConvert = `<span data-latex="" data-raw="${handled}">${wrapMath(handled, wrapper)}</span>`;
+
+  // use math rendering (MathJax) to convert latex to mathMl
+  let mathMlFromLatex = renderMath(latexToConvert, {
+    skipWaitForMathRenderingLib: true,
+  });
+
+  // if renderMath returned the exact same string that we sent, it just means that the conversion could not be done
+  const conversionDidNotWork = isEqual(latexToConvert, mathMlFromLatex);
+
+  mathMlFromLatex = removeEmptyMos(mathMlFromLatex);
+
+  // we convert resulted mathml to latex to check if the resulted mathMl can be converted back to latex if user wants to edit it later
+  const latexFromMathMl = mathMlFromLatex ? mmlToLatex(mathMlFromLatex) : '';
+
+  // we need to remove all the spaces from the latex to be able to compare it
+  const strippedL = latex.replace(/\s/g, '');
+  const strippedNewL = latexFromMathMl.replace(/\s/g, '');
+
+  // we check if the latex keeps his form after being converted to mathml and back to latex
+  // if it does, we can safely convert it to mathml
+  if (!isEqual(strippedL, strippedNewL)) {
+    const correctedLatex = replaceLeftRight(latexFromMathMl);
+
+    // As George requested in PD-3167, I will set the new mathML anyway, and also log differences
+    // if it doesn't, we keep the latex version
+    // eslint-disable-next-line no-console
+    console.log('This latex can not be safely converted to mathml so we will keep the latex version!!!', {
+      initialLatex: latex,
+      newLatex: latexFromMathMl,
+      correctedLatex,
+      mathML: mathMlFromLatex,
+      conversionDidNotWork,
+    });
+  }
+
+  return { mathMlFromLatex, conversionDidNotWork };
+};
+
+const convertMathMlToLatex = (mathMl) => {
+  const htmlWithRemovedSpaces = mathMl.replaceAll('&nbsp;', ' ');
+  const htmlToUse = mmlToLatex(htmlWithRemovedSpaces);
+  const latex = htmlDecode(htmlToUse);
+
+  // todo fix this in mathml-to-latex
+  return replaceLeftRight(latex);
+};
+
 export const serialization = {
   deserialize(el) {
     const tagName = getTagName(el);
@@ -237,16 +283,10 @@ export const serialization = {
      * This is here in order to be able to render mathml content
      */
     if (tagName === 'math' || (el.dataset && el.dataset.type === 'mathml') || hasMathChild) {
-      const newHtml = hasMathChild ? el.innerHTML : el.outerHTML;
+      const mathMl = hasMathChild ? el.innerHTML : el.outerHTML;
 
       if (MathPlugin.mathMlOptions.mmlEditing) {
-        // todo fix this in mathml-to-latex
-        const htmlWithRemovedSpaces = newHtml.replaceAll("&nbsp;", " ");
-        const htmlToUse = mmlToLatex(htmlWithRemovedSpaces);
-        const latex = htmlDecode(htmlToUse);
-        // todo fix this in mathml-to-latex
-        const correctedLatex = fixLatexExpression(latex);
-        const { unwrapped, wrapType } = unWrapMath(correctedLatex);
+        const { unwrapped, wrapType } = unWrapMath(convertMathMlToLatex(mathMl));
 
         return {
           object: 'inline',
@@ -265,7 +305,7 @@ export const serialization = {
         isVoid: true,
         type: 'mathml',
         data: {
-          html: newHtml,
+          html: mathMl,
         },
       };
     }
@@ -298,35 +338,26 @@ export const serialization = {
   },
   serialize(object) {
     if (object.type === 'math') {
-      const l = object.data.get('latex');
+      const latex = object.data.get('latex');
       const wrapper = object.data.get('wrapper');
-      log('[serialize] latex: ', l);
-      const decoded = htmlDecode(lessThanHandling(l));
+      const decoded = htmlDecode(arrowHandlingCase(latex));
+
+      log('[serialize] latex: ', latex);
 
       if (MathPlugin.mathMlOptions.mmlOutput) {
-        const res = renderMath(`<span data-latex="" data-raw="${decoded}">${wrapMath(decoded, wrapper)}</span>`);
-        const newLatex = mmlToLatex(res);
-
-        // we need to remove all the spaces from the latex to be able to compare it
-        const strippedL = l.replace(/\s/g, '');
-        const strippedNewL = newLatex.replace(/\s/g, '');
-
-        // we check if the latex keeps his form after being converted to mathml and back to latex
-        // if it does we can safely convert it to mathml
-        if (!isEqual(strippedL, strippedNewL)) {
-          const correctedLatex = fixLatexExpression(newLatex);
-
-          // As George requested in PD-3167, I will set the new mathML anyway, and also log differences
-          // if it doesn't we keep the latex version
-          console.log('This latex can not be safely converted to mathml so we will keep the latex version!!!', {
-            initialLatex: l,
-            newLatex: newLatex,
-            correctedLatex,
-            mathML: res,
-          });
+        const { mathMlFromLatex, conversionDidNotWork } = convertLatexToMathMl({ latex, decoded, wrapper });
+
+        if (conversionDidNotWork) {
+          // this means we could not convert latex to mathMl, so just return the latex version,
+          // same as we would do if mmlOutput would not be enabled
+          return (
+            <span data-latex="" data-raw={decoded}>
+              {wrapMath(decoded, wrapper)}
+            </span>
+          );
         }
 
-        return <span data-type="mathml" dangerouslySetInnerHTML={{ __html: res }} />;
+        return <span data-type="mathml" dangerouslySetInnerHTML={{ __html: mathMlFromLatex }} />;
       }
 
       return (

package/src/plugins/media/__tests__/index.test.js

@@ -0,0 +1,75 @@
+import MediaPlugin from '../';
+
+describe('media plugin', () => {
+  const imagePlugin = MediaPlugin('video');
+
+  describe('normalizeNode', () => {
+    it('should exit the function if the node is not of type document', () => {
+      const returnValue = imagePlugin.normalizeNode({ object: 'image' });
+
+      expect(returnValue).toEqual(undefined);
+    });
+
+    it('should exit there are no changes needed', () => {
+      const nodes = [
+        {
+          object: 'text',
+          text: 'Before Media',
+        },
+        {
+          type: 'video',
+        },
+        {
+          object: 'text',
+          text: 'After Media',
+        },
+      ];
+      const returnValue = imagePlugin.normalizeNode({
+        object: 'document',
+        findDescendant: jest.fn((callback) => {
+          nodes.forEach((n) => callback(n));
+        }),
+      });
+      expect(returnValue).toEqual(undefined);
+    });
+
+    it('should return a function if there is a node with an empty text before a media element', () => {
+      const nodes = [
+        {
+          object: 'text',
+          text: '',
+          key: '1',
+        },
+        {
+          type: 'video',
+          key: '2',
+        },
+        {
+          object: 'text',
+          text: 'After Media',
+          key: '3',
+        },
+      ];
+      const findDescendant = jest.fn((callback) => {
+        nodes.forEach((n) => callback(n));
+      });
+      const change = {
+        withoutNormalization: jest.fn((callback) => {
+          callback();
+        }),
+        insertTextByKey: jest.fn(),
+      };
+      const returnValue = imagePlugin.normalizeNode({
+        object: 'document',
+        findDescendant,
+      });
+
+      expect(returnValue).toEqual(expect.any(Function));
+
+      returnValue(change);
+
+      expect(change.withoutNormalization).toHaveBeenCalledWith(expect.any(Function));
+      expect(change.insertTextByKey).toHaveBeenCalledWith('1', 0, ' ');
+    });
+  });
+});

package/src/plugins/media/index.jsx

@@ -54,6 +54,7 @@ const types = ['audio', 'video'];
 export default function MediaPlugin(type, opts) {
   const toolbar = {
     icon: type === 'audio' ? <VolumeUpIcon /> : <TheatersIcon />,
+    ariaLabel: type === 'audio' ? 'Insert audio' : 'Insert video',
     onClick: (value, onChange) => {
       log('[toolbar] onClick');
       const inline = Inline.create({
@@ -162,7 +163,7 @@ export default function MediaPlugin(type, opts) {
         if (tag === 'audio') {
           return (
             <MediaWrapper editor data-type={type} width={style.width} {...rest}>
-              <audio controls="controls">
+              <audio controls="controls" controlsList="nodownload">
                 <source type="audio/mp3" src={src} />
               </audio>
               <MediaToolbar hideEdit onRemove={handleDelete} />
@@ -303,7 +304,7 @@ export const serialization = {
 
     if (tag === 'audio') {
       return (
-        <audio controls="controls">
+        <audio controls="controls" controlsList="nodownload">
           <source type="audio/mp3" src={src} />
         </audio>
       );