enable MathIcon rendering in new Eq. Editor

replaces the previous text based button icons
with the new svg icons in the new equation
editor

fixes MAT-621
flag=new_equation_editor

test plan:
-enable the ff
-navigate to a page with an RCE
-open the equation editor
-ensure that the svg icons are rendering
 properly
-try entering a few equations using the
 buttons and ensure they function as
 expected

Change-Id: I6a917e2fbce77708b86f49c030bc38b0d7fbea16
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/284693
Tested-by: Service Cloud Jenkins <[email protected]>
Reviewed-by: Weston Dransfield <[email protected]>
QA-Review: Weston Dransfield <[email protected]>
Product-Review: David Lyons <[email protected]>

packages/canvas-rce/src/rce/plugins/instructure_equation/EquationEditorToolbar/__tests__/index.test.js

@@ -32,10 +32,6 @@ function renderToolbar(overrideProps = {}) {
   return render(<EquationEditorToolbar {...props} {...overrideProps} />)
 }
 
-jest.mock('../../mathlive', () => ({
-  convertLatexToMarkup: jest.fn()
-}))
-
 describe('EquationEditorToolbar', () => {
   it('renders all buttons', () => {
     const {container, getByText} = renderToolbar()

packages/canvas-rce/src/rce/plugins/instructure_equation/EquationEditorToolbar/index.js

@@ -23,8 +23,7 @@ import {Tabs} from '@instructure/ui-tabs'
 import {ScreenReaderContent} from '@instructure/ui-a11y-content'
 import {Button} from '@instructure/ui-buttons'
 import buttons from './buttons'
-
-import {convertLatexToMarkup} from '../mathlive'
+import MathIcon from '../MathIcon'
 
 const buttonContainerStyle = {
   display: 'inline-block',
@@ -48,11 +47,7 @@ export default function EquationEditorToolbar(props) {
     >
       {section.commands.map(({displayName, command, advancedCommand}) => {
         const name = displayName || command
-        const icon = (
-          <span
-            dangerouslySetInnerHTML={{__html: convertLatexToMarkup(name, {mathstyle: 'textstyle'})}}
-          />
-        )
+        const icon = <MathIcon command={command} />
 
         // I'm inlining styles here because for some reason the RCE plugin plays
         // poorly with the way webpack is compiling styles, causing rules from a

packages/canvas-rce/src/rce/plugins/instructure_equation/MathIcon/__tests__/index.test.js

@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) 2022 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import {render} from '@testing-library/react'
+import MathIcon from '../index'
+
+const renderMathIcon = command => {
+  const {queryByTestId} = render(<MathIcon command={command} />)
+  const mathSymbolIcon = queryByTestId('math-symbol-icon')
+  const warningIcon = queryByTestId('warning-icon')
+  return [mathSymbolIcon, warningIcon]
+}
+
+describe('MathIcon', () => {
+  it('renders an SVGIcon when given a valid command', () => {
+    const [mathSymbolIcon, warningIcon] = renderMathIcon('\\otimes')
+    expect(mathSymbolIcon).toBeInTheDocument()
+    expect(warningIcon).not.toBeInTheDocument()
+  })
+
+  it('renders a warning icon when given an invalid command', () => {
+    const [mathSymbolIcon, warningIcon] = renderMathIcon('invalidcommand')
+    expect(mathSymbolIcon).not.toBeInTheDocument()
+    expect(warningIcon).toBeInTheDocument()
+  })
+})

packages/canvas-rce/src/rce/plugins/instructure_equation/MathIcon/index.js

@@ -0,0 +1,35 @@
+/*
+ * Copyright (C) 2022 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import {string} from 'prop-types'
+import {IconWarningLine} from '@instructure/ui-icons'
+import {SVGIcon} from '@instructure/ui-svg-images'
+import svgs from './svgs'
+
+export default function MathIcon({command}) {
+  if (command in svgs) {
+    return <SVGIcon src={svgs[command]} data-testid="math-symbol-icon" />
+  } else {
+    return <IconWarningLine data-testid="warning-icon" />
+  }
+}
+
+MathIcon.propTypes = {
+  command: string.isRequired
+}