Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-83794

MathML and SVGs stripped out by Tiny

XMLWordPrintable

    • MOODLE_403_STABLE, MOODLE_404_STABLE, MOODLE_405_STABLE
    • MOODLE_404_STABLE, MOODLE_405_STABLE
    • MDL-83794-404
    • MDL-83794-405
    • MDL-83794-main
    • Hide
      1. Navigate to a course
      2. Create a new "Page" element
      3. Find the Page "Content"
      4. From the "View" menu, view the HTML Source
      5. Replace the current content with: 

        <p>And SVG:</p>
        		 
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
        		 
          y="0px" viewBox="0 0 345 150" style="enable-background:new 0 0 345 150;" xml:space="preserve"
        		 
          preserveAspectRatio="xMinYMid meet">
        		 
          <g>
        		 
            <path d="M325.7,14.7C317.6,6.9,305.3,3,289,3h-43.5H234v31h-66l-5.4,22.2c4.5-2.1,10.9-4.2,15.3-5.3c4.4-1.1,8.8-0.9,13.1-0.9
        		 
        		c14.6,0,26.5,4.5,35.6,13.3c9.1,8.8,13.6,20,13.6,33.4c0,9.4-2.3,18.5-7,27.2s-11.3,15.4-19.9,20c-3.1,1.6-6.5,3.1-10.2,4.1h42.4
        		 
        		H259V95h25c18.2,0,31.7-4.2,40.6-12.5s13.3-19.9,13.3-34.6C337.9,33.6,333.8,22.5,325.7,14.7z M288.7,60.6c-3.5,3-9.6,4.4-18.3,4.4
        		 
        		H259V33h13.2c8.4,0,14.2,1.5,17.2,4.7c3.1,3.2,4.6,6.9,4.6,11.5C294,53.9,292.2,57.6,288.7,60.6z" />
        		 
            <path d="M176.5,76.3c-7.9,0-14.7,4.6-18,11.2L119,81.9L136.8,3h-23.6H101v62H51V3H7v145h44V95h50v53h12.2h42
        		 
        		c-6.7-2-12.5-4.6-17.2-8.1c-4.8-3.6-8.7-7.7-11.7-12.3c-3-4.6-5.3-9.7-7.3-16.5l39.6-5.7c3.3,6.6,10.1,11.1,17.9,11.1
        		 
        		c11.1,0,20.1-9,20.1-20.1S187.5,76.3,176.5,76.3z" />
        		 
          </g>
        		 
        </svg>
        		 
         
        		 
        <p>Some MathML:</p>
        		 
        <math>
        		 
            <semantics>
        		 
              <mtable>
        		 
                <!-- Step one -->
        		 
                <mtr>
        		 
                  <mtd>
        		 
                    <msup>
        		 
                      <mrow>
        		 
                        <mo>(</mo>
        		 
                        <mi>a</mi>
        		 
                        <mo>+</mo>
        		 
                        <mi>b</mi>
        		 
                        <mo>)</mo>
        		 
                      </mrow>
        		 
                      <mn>2</mn>
        		 
                    </msup>
        		 
                  </mtd>
        		 
                  <mtd>
        		 
                    <mo>=</mo>
        		 
                  </mtd>
        		 
                  <mtd>
        		 
                    <msup>
        		 
                      <mi>c</mi>
        		 
                      <mn>2</mn>
        		 
                    </msup>
        		 
                    <mo>+</mo>
        		 
                    <mn>4</mn>
        		 
                    <mo>⋅</mo>
        		 
                    <mo>(</mo>
        		 
                    <mfrac>
        		 
                      <mn>1</mn>
        		 
                      <mn>2</mn>
        		 
                    </mfrac>
        		 
                    <mi>a</mi>
        		 
                    <mi>b</mi>
        		 
                    <mo>)</mo>
        		 
                  </mtd>
        		 
                </mtr>
        		 
                <!-- Step two -->
        		 
                <mtr>
        		 
                  <mtd>
        		 
                    <msup>
        		 
                      <mi>a</mi>
        		 
                      <mn>2</mn>
        		 
                    </msup>
        		 
                    <mo>+</mo>
        		 
                    <mn>2</mn>
        		 
                    <mi>a</mi>
        		 
                    <mi>b</mi>
        		 
                    <mo>+</mo>
        		 
                    <msup>
        		 
                      <mi>b</mi>
        		 
                      <mn>2</mn>
        		 
                    </msup>
        		 
                  </mtd>
        		 
                  <mtd>
        		 
                    <mo>=</mo>
        		 
                  </mtd>
        		 
                  <mtd>
        		 
                    <msup>
        		 
                      <mi>c</mi>
        		 
                      <mn>2</mn>
        		 
                    </msup>
        		 
                    <mo>+</mo>
        		 
                    <mn>2</mn>
        		 
                    <mi>a</mi>
        		 
                    <mi>b</mi>
        		 
                  </mtd>
        		 
                </mtr>
        		 
                <!-- Step three -->
        		 
                <mtr>
        		 
                  <mtd>
        		 
                    <msup>
        		 
                      <mi>a</mi>
        		 
                      <mn>2</mn>
        		 
                    </msup>
        		 
                    <mo>+</mo>
        		 
                    <msup>
        		 
                      <mi>b</mi>
        		 
                      <mn>2</mn>
        		 
                    </msup>
        		 
                  </mtd>
        		 
                  <mtd>
        		 
                    <mo>=</mo>
        		 
                  </mtd>
        		 
                  <mtd>
        		 
                    <msup>
        		 
                      <mi>c</mi>
        		 
                      <mn>2</mn>
        		 
                    </msup>
        		 
                  </mtd>
        		 
                </mtr>
        		 
              </mtable>
        		 
              <!-- Representation in TeX format -->
        		 
              <annotation encoding="application/x-tex">
        		 
                \begin{aligned}
        		 
                (a + b)^2 &amp;= c^2 + 4 \cdot \left( \frac{1}{2} ab \right) \\
        		 
                a^2 + 2ab + b^2 &amp;= c^2 + 2ab \\
        		 
                a^2 + b^2 &amp;= c^2
        		 
                \end{aligned}
        		 
              </annotation>
        		 
            </semantics>
        		 
          </math>

      6. Save the source
      7. From within Tiny Attempt to move the SVG and MathML blocks around as a whole
        1. Confirm that they move
        2. Confirm you can't select individual parts of the MathML
      8. View the source again from the Tiny View menu
        1. Confirm that the SVG and MathML are still present and are not wrapped in any <tiny- elements
      9. Save changes
      10. View the Page activity
        1. Confirm you see both the SVG and the equation
      Show
      Navigate to a course Create a new "Page" element Find the Page "Content" From the "View" menu, view the HTML Source Replace the current content with: <p>And SVG:</p> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 345 150" style="enable-background:new 0 0 345 150;" xml:space="preserve" preserveAspectRatio="xMinYMid meet"> <g> <path d="M325.7,14.7C317.6,6.9,305.3,3,289,3h-43.5H234v31h-66l-5.4,22.2c4.5-2.1,10.9-4.2,15.3-5.3c4.4-1.1,8.8-0.9,13.1-0.9 c14.6,0,26.5,4.5,35.6,13.3c9.1,8.8,13.6,20,13.6,33.4c0,9.4-2.3,18.5-7,27.2s-11.3,15.4-19.9,20c-3.1,1.6-6.5,3.1-10.2,4.1h42.4 H259V95h25c18.2,0,31.7-4.2,40.6-12.5s13.3-19.9,13.3-34.6C337.9,33.6,333.8,22.5,325.7,14.7z M288.7,60.6c-3.5,3-9.6,4.4-18.3,4.4 H259V33h13.2c8.4,0,14.2,1.5,17.2,4.7c3.1,3.2,4.6,6.9,4.6,11.5C294,53.9,292.2,57.6,288.7,60.6z" /> <path d="M176.5,76.3c-7.9,0-14.7,4.6-18,11.2L119,81.9L136.8,3h-23.6H101v62H51V3H7v145h44V95h50v53h12.2h42 c-6.7-2-12.5-4.6-17.2-8.1c-4.8-3.6-8.7-7.7-11.7-12.3c-3-4.6-5.3-9.7-7.3-16.5l39.6-5.7c3.3,6.6,10.1,11.1,17.9,11.1 c11.1,0,20.1-9,20.1-20.1S187.5,76.3,176.5,76.3z" /> </g> </svg>   <p>Some MathML:</p> <math> <semantics> <mtable> <!-- Step one --> <mtr> <mtd> <msup> <mrow> <mo>(</mo> <mi>a</mi> <mo>+</mo> <mi>b</mi> <mo>)</mo> </mrow> <mn>2</mn> </msup> </mtd> <mtd> <mo>=</mo> </mtd> <mtd> <msup> <mi>c</mi> <mn>2</mn> </msup> <mo>+</mo> <mn>4</mn> <mo>⋅</mo> <mo>(</mo> <mfrac> <mn>1</mn> <mn>2</mn> </mfrac> <mi>a</mi> <mi>b</mi> <mo>)</mo> </mtd> </mtr> <!-- Step two --> <mtr> <mtd> <msup> <mi>a</mi> <mn>2</mn> </msup> <mo>+</mo> <mn>2</mn> <mi>a</mi> <mi>b</mi> <mo>+</mo> <msup> <mi>b</mi> <mn>2</mn> </msup> </mtd> <mtd> <mo>=</mo> </mtd> <mtd> <msup> <mi>c</mi> <mn>2</mn> </msup> <mo>+</mo> <mn>2</mn> <mi>a</mi> <mi>b</mi> </mtd> </mtr> <!-- Step three --> <mtr> <mtd> <msup> <mi>a</mi> <mn>2</mn> </msup> <mo>+</mo> <msup> <mi>b</mi> <mn>2</mn> </msup> </mtd> <mtd> <mo>=</mo> </mtd> <mtd> <msup> <mi>c</mi> <mn>2</mn> </msup> </mtd> </mtr> </mtable> <!-- Representation in TeX format --> <annotation encoding="application/x-tex"> \begin{aligned} (a + b)^2 &amp;= c^2 + 4 \cdot \left( \frac{1}{2} ab \right) \\ a^2 + 2ab + b^2 &amp;= c^2 + 2ab \\ a^2 + b^2 &amp;= c^2 \end{aligned} </annotation> </semantics> </math> Save the source From within Tiny Attempt to move the SVG and MathML blocks around as a whole Confirm that they move Confirm you can't select individual parts of the MathML View the source again from the Tiny View menu Confirm that the SVG and MathML are still present and are not wrapped in any <tiny- elements Save changes View the Page activity Confirm you see both the SVG and the equation
    • Hide

      Code verified against automated checks.

      Checked MDL-83794 using repository: https://github.com/andrewnicols/moodle.git

      More information about this report

      Built on: Fri Jan 31 03:20:22 PM UTC 2025

      Show
      Code verified against automated checks. Checked MDL-83794 using repository: https://github.com/andrewnicols/moodle.git MOODLE_404_STABLE (0 errors / 0 warnings) [branch: MDL-83794-404 | CI Job ] MOODLE_405_STABLE (0 errors / 0 warnings) [branch: MDL-83794-405 | CI Job ] main (0 errors / 0 warnings) [branch: MDL-83794-main | CI Job ] More information about this report Built on: Fri Jan 31 03:20:22 PM UTC 2025
    • Hide

      Launching automatic jobs for branch MDL-83794-404

      Launching automatic jobs for branch MDL-83794-405

      Launching automatic jobs for branch MDL-83794-main

      Built on: Wed Jan 22 04:30:23 AM UTC 2025

      Show
      Launching automatic jobs for branch MDL-83794 -404 https://ci.moodle.org/view/Testing/job/DEV.02%20-%20Developer-requested%20PHPUnit/18003/ PHPUnit (sqlsrv) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/61514/ Behat (NonJS - boost and classic) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/61515/ Behat (Firefox - boost) Launching automatic jobs for branch MDL-83794 -405 https://ci.moodle.org/view/Testing/job/DEV.02%20-%20Developer-requested%20PHPUnit/18004/ PHPUnit (sqlsrv) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/61516/ Behat (NonJS - boost and classic) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/61517/ Behat (Firefox - boost) Launching automatic jobs for branch MDL-83794 -main https://ci.moodle.org/view/Testing/job/DEV.02%20-%20Developer-requested%20PHPUnit/18005/ PHPUnit (sqlsrv) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/61518/ Behat (NonJS - boost and classic) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/61519/ Behat (Firefox - boost) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/61520/ Behat (Firefox - classic) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/61521/ App tests (stable app version) Built on: Wed Jan 22 04:30:23 AM UTC 2025

      Tiny is strict with regards schema, and currently does not support MathML or SVG.

      We need to add SVG and MathML elements support to Tiny.

      Initially we hoped this was just a case of adding them to the custom_elements, but upon further inspection it's not quite this simple. We actually need to create new custom elements using the addCustomElements API, and then instruct the parser to wrap them in the new element; then instruct the serializer to unwrap them.

      We must wrap them in a new element rather than just making math and svg the top-level elements because they don't place nicely on their own with content editable and they don't play well with the Tiny Maths Premium plugin.

        1. (1) 10 Passed -- (Main)MDL-83794.png
          (1) 10 Passed -- (Main)MDL-83794.png
          58 kB
        2. (1) 5 Failed -- (404)MDL-83794.png
          (1) 5 Failed -- (404)MDL-83794.png
          80 kB
        3. (1) 7 Passed -- (Main)MDL-83794.png
          (1) 7 Passed -- (Main)MDL-83794.png
          112 kB
        4. (1) 8 Passed -- (Main)MDL-83794.png
          (1) 8 Passed -- (Main)MDL-83794.png
          177 kB

            dobedobedoh Andrew Lyons
            dobedobedoh Andrew Lyons
            Meirza Meirza
            Safat Shahin Safat Shahin
            Kim Jared Lucas Kim Jared Lucas
            Votes:
            2 Vote for this issue
            Watchers:
            14 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 6 hours, 4 minutes
                6h 4m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.