From 098133be20d5f6c76b47d60795ec1e044e560692 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Sun, 3 Aug 2025 09:08:59 +0300
Subject: [PATCH 01/13] feat(texteditor): configured to switch view/edit modes

---
 .../AnswersEditor/AnswersEditor.vue           |  7 ++-
 .../TipTapEditor/TipTapEditor.vue             | 63 +++++++++++++------
 .../components/EditorContentWrapper.vue       |  2 -
 .../components/image/ImageNodeView.vue        |  6 +-
 .../components/math/FormulasMenu.vue          |  2 +-
 .../components/math/MathNodeView.vue          |  3 +-
 .../TipTapEditor/composables/useEditor.js     |  3 +-
 .../composables/useMathHandling.js            |  7 ++-
 8 files changed, 63 insertions(+), 30 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
index d0f777930d..301b462fa2 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
@@ -88,7 +88,12 @@
                       v-else
                       :markdown="answer.answer"
                     /> -->
-                    <TipTapEditor v-model="answer.answer" />
+                    <TipTapEditor
+                      v-model="answer.answer"
+                      class="editor"
+                      :mode="isAnswerOpen(answerIdx) ? 'edit' : 'view'"
+                      @update="updateAnswerText($event, answerIdx)"
+                    />
                   </div>
                 </keep-alive>
               </VFlex>
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
index b557eb2b9a..15ff83c561 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
@@ -1,17 +1,22 @@
 <template>
 
-  <div class="editor-container">
-    <EditorToolbar
-      v-if="!isMobile"
-      v-on="sharedEventHandlers"
-    />
-
-    <div v-else>
-      <MobileTopBar v-on="sharedEventHandlers" />
-      <MobileFormattingBar
-        v-if="isFocused"
+  <div
+    class="editor-container"
+    :class="{ 'view-mode': editorMode === 'view' }"
+  >
+    <div v-if="editorMode === 'edit'">
+      <EditorToolbar
+        v-if="!isMobile"
         v-on="sharedEventHandlers"
       />
+
+      <div v-else>
+        <MobileTopBar v-on="sharedEventHandlers" />
+        <MobileFormattingBar
+          v-if="isFocused"
+          v-on="sharedEventHandlers"
+        />
+      </div>
     </div>
 
     <div
@@ -121,7 +126,10 @@
       const linkHandler = useLinkHandling(editor);
       provide('linkHandler', linkHandler);
 
-      const mathHandler = useMathHandling(editor);
+      const mathHandler = useMathHandling(
+        editor,
+        computed(() => props.mode),
+      );
       provide('mathHandler', mathHandler);
 
       const { isMobile } = useBreakpoint();
@@ -150,6 +158,15 @@
 
       let isUpdatingFromOutside = false; // A flag to prevent infinite update loops
 
+      watch(
+        () => props.mode,
+        newMode => {
+          if (editor.value && editor.value.isEditable !== (newMode === 'edit')) {
+            editor.value.setEditable(newMode === 'edit');
+          }
+        },
+      );
+
       // sync changes from the parent component to the editor
       watch(
         () => props.value,
@@ -157,7 +174,7 @@
           const processedContent = preprocessMarkdown(newValue);
 
           if (!editor.value) {
-            initializeEditor(processedContent);
+            initializeEditor(processedContent, props.mode);
             return;
           }
 
@@ -188,7 +205,7 @@
 
           const markdown = getMarkdownContent();
           if (markdown !== props.value) {
-            emit('input', markdown);
+            emit('update', markdown);
           }
         },
         { deep: true },
@@ -204,6 +221,7 @@
         isMobile,
         imageHandler,
         sharedEventHandlers,
+        editorMode: computed(() => props.mode),
       };
     },
     props: {
@@ -211,8 +229,12 @@
         type: String,
         default: '',
       },
+      mode: {
+        type: String,
+        default: 'edit', // 'edit' or 'view'
+      },
     },
-    emits: ['input'],
+    emits: ['update'],
   });
 
 </script>
@@ -222,8 +244,8 @@
 
   .editor-container {
     position: relative;
-    min-width: 200px;
-    margin: 80px auto;
+    min-height: 200px;
+    margin: auto;
     font-family:
       'Noto Sans',
       -apple-system,
@@ -232,17 +254,22 @@
       'Helvetica Neue',
       Arial,
       sans-serif;
-    background: white;
     border: 1px solid #e1e5e9;
   }
 
+  .editor-container.view-mode {
+    min-height: 0;
+    pointer-events: none;
+    border: 0;
+  }
+
   .link-editor-popover-wrapper,
   .image-upload-popover-wrapper,
   .math-modal-popover-wrapper {
     position: fixed;
     top: 0;
     left: 0;
-    z-index: 1000;
+    z-index: 2;
     width: 100%;
     height: 100%;
     pointer-events: none;
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorContentWrapper.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorContentWrapper.vue
index 75ca8bc98e..9355b1cbdd 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorContentWrapper.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorContentWrapper.vue
@@ -39,7 +39,6 @@
 <style scoped>
 
   .editor-content {
-    min-height: 200px;
     padding: 16px;
     padding-inline: 24px;
     margin-inline: 0 auto;
@@ -55,7 +54,6 @@
 <style>
 
   .ProseMirror {
-    min-height: 200px;
     padding: 0;
     padding-inline: 0;
     margin-inline: 0;
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageNodeView.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageNodeView.vue
index 9e5e3c4f8a..41afb25fe3 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageNodeView.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageNodeView.vue
@@ -3,7 +3,7 @@
   <NodeViewWrapper class="image-node-wrapper">
     <div
       class="image-node-view"
-      :class="{ 'is-selected': selected }"
+      :class="{ 'is-selected': selected && editor.isEditable }"
       :style="{ width: styleWidth }"
     >
       <img
@@ -309,7 +309,6 @@
     cursor: nesw-resize;
   }
 
-  .image-node-view:hover .resize-handle,
   .image-node-view.is-selected .resize-handle,
   .resize-handle:focus {
     opacity: 1;
@@ -319,7 +318,7 @@
     position: absolute;
     inset-inline-end: 6px;
     top: 6px;
-    z-index: 10;
+    z-index: 1.5;
     display: flex;
     gap: 10px;
     padding: 9px;
@@ -341,7 +340,6 @@
     transform: scale(0.75);
   }
 
-  .image-node-view:hover .image-actions,
   .image-node-view.is-selected .image-actions,
   .image-node-view:focus-within .image-actions {
     pointer-events: auto;
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/math/FormulasMenu.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/math/FormulasMenu.vue
index b76cd03715..298066381b 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/math/FormulasMenu.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/math/FormulasMenu.vue
@@ -272,7 +272,7 @@
 
   .card-title {
     position: relative;
-    z-index: 500000;
+    z-index: 5;
     padding: 16px 16px 8px;
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/math/MathNodeView.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/math/MathNodeView.vue
index 8dc4dc6df5..8fa8e8c970 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/math/MathNodeView.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/math/MathNodeView.vue
@@ -73,8 +73,9 @@
   /* https://mathlive.io/mathfield/guides/customizing/#styling */
 
   math-field {
-    font-size: 1.4rem;
+    font-size: 1.3rem;
     font-display: swap;
+    background-color: transparent;
     border: 0;
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useEditor.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useEditor.js
index 8a517fab43..fca7ae2bfa 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useEditor.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useEditor.js
@@ -16,8 +16,9 @@ export function useEditor() {
   const isReady = ref(false);
   const isFocused = ref(false);
 
-  const initializeEditor = content => {
+  const initializeEditor = (content, mode = 'edit') => {
     editor.value = new Editor({
+      editable: mode === 'edit',
       extensions: [
         StarterKitExtension.configure({
           codeBlock: false, // Disable default code block to use the extended version
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useMathHandling.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useMathHandling.js
index bdfe30b683..27a8f11df5 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useMathHandling.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useMathHandling.js
@@ -1,7 +1,7 @@
 import { ref, onUnmounted, watch, nextTick } from 'vue';
 import { useModalPositioning } from './useModalPositioning';
 
-export function useMathHandling(editor) {
+export function useMathHandling(editor, editorMode) {
   const mathModalMode = ref('create');
   const mathModalInitialLatex = ref('');
   const editingMathNodePos = ref(null);
@@ -30,6 +30,9 @@ export function useMathHandling(editor) {
   };
 
   const openEditMathModal = ({ pos, latex }) => {
+    // Don't open modal in view mode
+    if (editorMode?.value === 'view') return;
+
     mathModalMode.value = 'edit';
     mathModalInitialLatex.value = latex;
     editingMathNodePos.value = pos;
@@ -38,7 +41,7 @@ export function useMathHandling(editor) {
     nextTick(() => {
       setTimeout(() => {
         openModal({ centered: true });
-      }, 100);
+      }, 150);
     });
   };
 

From e3b5bcd1cf0406079c10b9e0ec4dd900fe6b43e0 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Sun, 3 Aug 2025 14:27:15 +0300
Subject: [PATCH 02/13] feat(texteditor): minimize on click outside

---
 .../TipTapEditor/TipTapEditor.vue             | 36 +++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
index 15ff83c561..6a6bd1ef6d 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
@@ -1,6 +1,7 @@
 <template>
 
   <div
+    ref="editorContainer"
     class="editor-container"
     :class="{ 'view-mode': editorMode === 'view' }"
   >
@@ -89,7 +90,16 @@
 
 <script>
 
-  import { defineComponent, provide, watch, nextTick, computed } from 'vue';
+  import {
+    defineComponent,
+    provide,
+    watch,
+    computed,
+    ref,
+    nextTick,
+    onMounted,
+    onUnmounted,
+  } from 'vue';
   import EditorToolbar from './components/EditorToolbar.vue';
   import EditorContentWrapper from './components/EditorContentWrapper.vue';
   import { useEditor } from './composables/useEditor';
@@ -119,6 +129,7 @@
       MobileFormattingBar,
     },
     setup(props, { emit }) {
+      const editorContainer = ref(null);
       const { editor, isReady, isFocused, initializeEditor } = useEditor();
       provide('editor', editor);
       provide('isReady', isReady);
@@ -149,6 +160,26 @@
         }
       };
 
+      // Handle click outside to minimize
+      const handleClickOutside = event => {
+        if (props.mode !== 'edit') {
+          return;
+        }
+
+        if (editorContainer.value && !editorContainer.value.contains(event.target)) {
+          emit('minimize');
+        }
+      };
+
+      onMounted(() => {
+        // capture
+        document.addEventListener('click', handleClickOutside, true);
+      });
+
+      onUnmounted(() => {
+        document.removeEventListener('click', handleClickOutside, true);
+      });
+
       const getMarkdownContent = () => {
         if (!editor.value || !isReady.value || !editor.value.storage?.markdown) {
           return '';
@@ -212,6 +243,7 @@
       );
 
       return {
+        editorContainer,
         isReady,
         isFocused,
         handleDrop,
@@ -234,7 +266,7 @@
         default: 'edit', // 'edit' or 'view'
       },
     },
-    emits: ['update'],
+    emits: ['update', 'minimize'],
   });
 
 </script>

From 18355c81c8132b7550d6fca841578097ad5ca8d7 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Mon, 4 Aug 2025 00:51:33 +0300
Subject: [PATCH 03/13] feat(texteditor): replace markodwn with tiptap editor

---
 .../AnswersEditor/AnswersEditor.vue           | 49 ++++---------------
 .../AssessmentItemEditor.vue                  | 45 ++++++++---------
 .../AssessmentItemPreview.vue                 | 24 ++++++---
 .../components/HintsEditor/HintsEditor.vue    | 38 +++-----------
 .../TipTapEditor/components/EditorToolbar.vue | 22 ++++++---
 5 files changed, 71 insertions(+), 107 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
index 301b462fa2..59cf07ae86 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
@@ -25,7 +25,7 @@
           <div :class="indicatorClasses(answer)"></div>
           <VCardText :class="{ 'pb-0': !isAnswerOpen(answerIdx) }">
             <VLayout align-top>
-              <VFlex xs1>
+              <VFlex shrink>
                 <!--
                   VRadio cannot be used without VRadioGroup like VCheckbox but it can
                   be solved by wrapping each VRadio to VRadioGroup
@@ -52,7 +52,7 @@
                 />
               </VFlex>
 
-              <VFlex xs7>
+              <VFlex xs10>
                 <keep-alive :max="5">
                   <!-- Input question shows a text field with type of `number` -->
                   <div v-if="isInputQuestion">
@@ -73,26 +73,13 @@
                   </div>
 
                   <div v-else>
-                    <!-- <MarkdownEditor
-                      v-if="isAnswerOpen(answerIdx)"
-                      class="editor"
-                      analyticsLabel="Answer"
-                      :markdown="answer.answer"
-                      :handleFileUpload="handleFileUpload"
-                      :getFileUpload="getFileUpload"
-                      :imagePreset="imagePreset"
-                      @update="updateAnswerText($event, answerIdx)"
-                      @minimize="emitClose"
-                    />
-                    <MarkdownViewer
-                      v-else
-                      :markdown="answer.answer"
-                    /> -->
+                    <!-- ?? analyticsLabel="Answer" -->
                     <TipTapEditor
                       v-model="answer.answer"
                       class="editor"
                       :mode="isAnswerOpen(answerIdx) ? 'edit' : 'view'"
                       @update="updateAnswerText($event, answerIdx)"
+                      @minimize="emitClose"
                     />
                   </div>
                 </keep-alive>
@@ -100,7 +87,7 @@
 
               <VSpacer />
 
-              <VFlex>
+              <VFlex shrink>
                 <AssessmentItemToolbar
                   :iconActionsConfig="toolbarIconActions"
                   :canMoveUp="!isAnswerFirst(answerIdx)"
@@ -133,8 +120,6 @@
 
 <script>
 
-  /* eslint-disable */
-
   import AssessmentItemToolbar from '../AssessmentItemToolbar';
   import { AssessmentItemToolbarActions } from '../../constants';
   import { floatOrIntRegex, getCorrectAnswersIndices, mapCorrectAnswers } from '../../utils';
@@ -142,8 +127,6 @@
   import { swapElements } from 'shared/utils/helpers';
   import Checkbox from 'shared/views/form/Checkbox';
 
-  import MarkdownEditor from 'shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor';
-  import MarkdownViewer from 'shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer';
   import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue';
 
   const updateAnswersOrder = answers => {
@@ -159,8 +142,6 @@
     name: 'AnswersEditor',
     components: {
       AssessmentItemToolbar,
-      MarkdownEditor,
-      MarkdownViewer,
       Checkbox,
       TipTapEditor,
     },
@@ -184,20 +165,6 @@
         type: Number,
         default: 0,
       },
-      // Inject function to handle file uploads
-      handleFileUpload: {
-        type: Function,
-        default: () => {},
-      },
-      // Inject function to get file upload object
-      getFileUpload: {
-        type: Function,
-        default: () => {},
-      },
-      imagePreset: {
-        type: String,
-        default: null,
-      },
     },
     data() {
       return {
@@ -295,7 +262,7 @@
           if (
             !this.shouldHaveOneCorrectAnswer &&
             JSON.stringify([...newIndices].sort()) ===
-              JSON.stringify([...this.correctAnswersIndices].sort())
+            JSON.stringify([...this.correctAnswersIndices].sort())
           ) {
             return;
           }
@@ -434,9 +401,12 @@
       numberFieldErrorLabel: 'Answer must be a number',
     },
   };
+
 </script>
 
+
 <style lang="scss" scoped>
+
   $exercise-answer-correct: #4caf50;
   $exercise-answer-wrong: #ef5350;
 
@@ -489,4 +459,5 @@
   ::v-deep .no-border.v-text-field > .v-input__control > .v-input__slot::after {
     border-style: none;
   }
+
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
index ad52304149..45146802ed 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
@@ -39,14 +39,12 @@
           </div>
 
           <transition name="fade">
-            <keep-alive include="MarkdownEditor">
-              <MarkdownEditor
+            <keep-alive include="TipTapEditor">
+              <!--analyticsLabel="Question"-->
+              <TipTapEditor
                 v-if="isQuestionOpen"
-                analyticsLabel="Question"
-                :markdown="question"
-                :handleFileUpload="handleFiles"
-                :getFileUpload="getFileUpload"
-                :imagePreset="imagePreset"
+                v-model="question"
+                mode="edit"
                 @update="onQuestionUpdate"
                 @minimize="closeQuestion"
               />
@@ -61,13 +59,20 @@
                   align-start
                   justify-space-between
                 >
-                  <MarkdownViewer :markdown="question" />
-
-                  <Icon
-                    :color="$themePalette.grey.v_800"
-                    icon="edit"
-                    class="mr-2"
-                  />
+                  <VFlex grow>
+                    <TipTapEditor
+                      v-model="question"
+                      mode="view"
+                    />
+                  </VFlex>
+
+                  <VFlex shrink>
+                    <Icon
+                      :color="$themePalette.grey.v_800"
+                      icon="edit"
+                      class="mr-2"
+                    />
+                  </VFlex>
                 </VLayout>
               </div>
             </keep-alive>
@@ -89,9 +94,6 @@
             :questionKind="kind"
             :answers="answers"
             :openAnswerIdx="openAnswerIdx"
-            :handleFileUpload="handleFiles"
-            :getFileUpload="getFileUpload"
-            :imagePreset="imagePreset"
             @update="onAnswersUpdate"
             @open="openAnswer"
             @close="closeAnswer"
@@ -102,8 +104,6 @@
             :hints="hints"
             :openHintIdx="openHintIdx"
             :handleFileUpload="handleFiles"
-            :getFileUpload="getFileUpload"
-            :imagePreset="imagePreset"
             @update="onHintsUpdate"
             @open="openHint"
             @close="closeHint"
@@ -133,21 +133,19 @@
   } from 'shared/constants';
   import ErrorList from 'shared/views/ErrorList/ErrorList';
   import Uploader from 'shared/views/files/Uploader';
-  import MarkdownEditor from 'shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor';
-  import MarkdownViewer from 'shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer';
   import { FormatPresetsNames } from 'shared/leUtils/FormatPresets';
   import DropdownWrapper from 'shared/views/form/DropdownWrapper';
+  import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue';
 
   export default {
     name: 'AssessmentItemEditor',
     components: {
       DropdownWrapper,
       ErrorList,
-      MarkdownEditor,
-      MarkdownViewer,
       AnswersEditor,
       HintsEditor,
       Uploader,
+      TipTapEditor,
     },
     model: {
       prop: 'item',
@@ -210,7 +208,6 @@
       };
     },
     computed: {
-      ...mapGetters('file', ['getFileUpload']),
       ...mapGetters(['hasFeatureEnabled']),
       ...mapGetters('contentNode', ['getContentNode']),
       question() {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue
index 8767685c4b..cb775e2e5c 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue
@@ -9,7 +9,10 @@
         <div class="caption grey--text mb-2">
           {{ kindLabel }}
         </div>
-        <MarkdownViewer :markdown="question" />
+        <TipTapEditor
+          v-model="question"
+          mode="view"
+        />
       </VFlex>
     </VLayout>
 
@@ -39,7 +42,10 @@
               >
                 <template #label>
                   <div class="px-2">
-                    <MarkdownViewer :markdown="answer.answer" />
+                    <TipTapEditor
+                      v-model="answer.answer"
+                      mode="view"
+                    />
                   </div>
                 </template>
               </VRadio>
@@ -55,7 +61,10 @@
               disabled
             >
               <div class="px-2">
-                <MarkdownViewer :markdown="answer.answer" />
+                <TipTapEditor
+                  v-model="answer.answer"
+                  mode="view"
+                />
               </div>
             </Checkbox>
           </template>
@@ -103,7 +112,10 @@
                   {{ hintIdx + 1 }}
                 </VFlex>
                 <VFlex>
-                  <MarkdownViewer :markdown="hint.hint" />
+                  <TipTapEditor
+                    v-model="hint.hint"
+                    mode="view"
+                  />
                 </VFlex>
               </VLayout>
             </div>
@@ -124,13 +136,13 @@
   import translator from '../../translator';
   import { AssessmentItemTypes } from 'shared/constants';
   import Checkbox from 'shared/views/form/Checkbox';
-  import MarkdownViewer from 'shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer.vue';
+  import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue';
 
   export default {
     name: 'AssessmentItemPreview',
     components: {
-      MarkdownViewer,
       Checkbox,
+      TipTapEditor,
     },
     props: {
       /**
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue
index ee9b42720a..7d87e06df8 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue
@@ -31,21 +31,13 @@
                 {{ hintIdx + 1 }}
               </VFlex>
 
-              <VFlex xs7>
+              <VFlex xs10>
                 <transition name="fade">
                   <keep-alive :max="5">
-                    <MarkdownViewer
-                      v-if="!isHintOpen(hintIdx)"
-                      :markdown="hint.hint"
-                    />
-
-                    <MarkdownEditor
-                      v-else
-                      analyticsLabel="Hint"
-                      :markdown="hint.hint"
-                      :handleFileUpload="handleFileUpload"
-                      :getFileUpload="getFileUpload"
-                      :imagePreset="imagePreset"
+                    <!-- analyticsLabel="Hint"-->
+                    <TipTapEditor
+                      v-model="hint.hint"
+                      :mode="isHintOpen(hintIdx) ? 'edit' : 'view'"
                       @update="updateHintText($event, hintIdx)"
                       @minimize="emitClose"
                     />
@@ -90,8 +82,7 @@
   import { AssessmentItemToolbarActions } from '../../constants';
   import { swapElements } from 'shared/utils/helpers';
 
-  import MarkdownEditor from 'shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor';
-  import MarkdownViewer from 'shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer';
+  import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue';
 
   const updateHintsOrder = hints => {
     return hints.map((hint, idx) => {
@@ -106,8 +97,7 @@
     name: 'HintsEditor',
     components: {
       AssessmentItemToolbar,
-      MarkdownEditor,
-      MarkdownViewer,
+      TipTapEditor,
     },
     model: {
       prop: 'hints',
@@ -122,20 +112,6 @@
         type: Number,
         default: 0,
       },
-      // Inject function to handle file uploads
-      handleFileUpload: {
-        type: Function,
-        default: () => {},
-      },
-      // Inject function to get file upload object
-      getFileUpload: {
-        type: Function,
-        default: () => {},
-      },
-      imagePreset: {
-        type: String,
-        default: null,
-      },
     },
     data() {
       return {
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue
index 942c2428a9..d78e6a39b9 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue
@@ -358,6 +358,18 @@
         }
       };
 
+      const handleResize = entries => {
+        setTimeout(() => {
+          for (const entry of entries) {
+            toolbarWidth.value = entry.contentRect.width;
+          }
+        }, 0);
+      };
+
+      const handleWindowResize = () => {
+        setTimeout(updateToolbarWidth, 0);
+      };
+
       const onToolClick = (tool, event) => {
         isMoreDropdownOpen.value = false;
         let target = event.currentTarget;
@@ -425,15 +437,11 @@
 
         // Set up resize observer
         if (toolbarRef.value && window.ResizeObserver) {
-          resizeObserver = new ResizeObserver(entries => {
-            for (const entry of entries) {
-              toolbarWidth.value = entry.contentRect.width;
-            }
-          });
+          resizeObserver = new ResizeObserver(handleResize);
           resizeObserver.observe(toolbarRef.value);
         } else {
           // Fallback to window resize listener
-          window.addEventListener('resize', updateToolbarWidth);
+          window.addEventListener('resize', handleWindowResize);
         }
 
         document.addEventListener('click', handleClickOutside);
@@ -443,7 +451,7 @@
         if (resizeObserver) {
           resizeObserver.disconnect();
         } else {
-          window.removeEventListener('resize', updateToolbarWidth);
+          window.removeEventListener('resize', handleWindowResize);
         }
         document.removeEventListener('click', handleClickOutside);
       });

From 71018f622fad4c876bc2dd3782639c42322cd3a5 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Mon, 4 Aug 2025 15:41:07 +0300
Subject: [PATCH 04/13] feat(texteditor): add minimize buttons to toolbars

---
 .../TipTapEditor/TipTapEditor.vue             | 13 ++++-
 .../TipTapEditor/components/EditorToolbar.vue | 33 +++++++-----
 .../components/toolbar/FormatDropdown.vue     |  2 +-
 .../components/toolbar/MobileTopBar.vue       | 51 +++++++++++++------
 .../components/toolbar/PasteDropdown.vue      | 13 +++--
 .../components/toolbar/ToolbarButton.vue      |  4 +-
 .../composables/useToolbarActions.js          | 12 +++++
 .../views/TipTapEditor/assets/icon-unfold.svg |  3 ++
 8 files changed, 90 insertions(+), 41 deletions(-)
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/TipTapEditor/assets/icon-unfold.svg

diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
index 6a6bd1ef6d..e30fe90421 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
@@ -9,10 +9,14 @@
       <EditorToolbar
         v-if="!isMobile"
         v-on="sharedEventHandlers"
+        @minimize="emitMinimize"
       />
 
       <div v-else>
-        <MobileTopBar v-on="sharedEventHandlers" />
+        <MobileTopBar
+          v-on="sharedEventHandlers"
+          @minimize="emitMinimize"
+        />
         <MobileFormattingBar
           v-if="isFocused"
           v-on="sharedEventHandlers"
@@ -254,6 +258,13 @@
         imageHandler,
         sharedEventHandlers,
         editorMode: computed(() => props.mode),
+        emitMinimize: () => {
+          // force lose focus
+          if (editor.value) {
+            emit('minimize');
+            editor.value.commands.blur();
+          }
+        },
       };
     },
     props: {
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue
index d78e6a39b9..6cb3df0ea9 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue
@@ -114,7 +114,7 @@
       />
     </div>
 
-    <ToolbarDivider v-if="visibleCategories.includes('scripts')" />
+    <ToolbarDivider v-if="visibleCategories.includes('script')" />
 
     <!-- Insert tools -->
     <div
@@ -271,6 +271,11 @@
         </template>
       </div>
     </div>
+    <ToolbarButton
+      :title="minimizeAction.title"
+      :icon="minimizeAction.icon"
+      @click="minimizeAction.handler"
+    />
   </div>
 
 </template>
@@ -303,10 +308,10 @@
       // TODO: Maybe these shouldnt be hardcoded?
       const OVERFLOW_BREAKPOINTS = {
         insert: 750,
-        script: 650,
-        lists: 550,
-        clearFormat: 450,
-        clipboard: 405,
+        script: 660,
+        lists: 600,
+        clearFormat: 500,
+        clipboard: 465,
       };
 
       // Categories that can overflow (in order of overflow priority)
@@ -321,7 +326,8 @@
         listActions,
         scriptActions,
         insertTools,
-      } = useToolbarActions();
+        minimizeAction,
+      } = useToolbarActions(emit);
 
       const { pasteOptions } = useDropdowns();
 
@@ -472,6 +478,7 @@
         listActions,
         scriptActions,
         insertTools,
+        minimizeAction,
         pasteOptions,
         copy$,
         textFormattingToolbar$,
@@ -495,14 +502,18 @@
   .toolbar {
     position: relative;
     display: flex;
-    gap: 4px;
+    gap: 6px;
     align-items: center;
-    padding: 8px 4px;
+    padding: 8px;
     background: #f8f9fa;
     border-bottom: 1px solid #e1e5e9;
     border-radius: 8px 8px 0 0;
   }
 
+  .toolbar > :last-child {
+    margin-left: auto;
+  }
+
   [role='group'] {
     display: flex;
     gap: 2px;
@@ -581,10 +592,4 @@
     }
   }
 
-  @media (max-width: 820px) {
-    .toolbar {
-      gap: 1px;
-    }
-  }
-
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/FormatDropdown.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/FormatDropdown.vue
index a3906153cd..394cdef56b 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/FormatDropdown.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/FormatDropdown.vue
@@ -211,7 +211,7 @@
     gap: 8px;
     align-items: center;
     justify-content: space-between;
-    min-width: 80px;
+    min-width: 100px;
     padding: 6px 8px;
     font-size: 14px;
     color: #495057;
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/MobileTopBar.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/MobileTopBar.vue
index 4fb862d5e3..bf3a1603d7 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/MobileTopBar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/MobileTopBar.vue
@@ -1,7 +1,7 @@
 <template>
 
   <div
-    class="top-bar"
+    class="toolbar top-bar"
     role="toolbar"
     aria-label="Editor controls"
   >
@@ -21,17 +21,24 @@
     </div>
 
     <div class="insert-container">
-      <button
-        class="insert-button"
-        title="Insert content"
-        aria-label="Insert content menu"
-        :aria-expanded="isInsertMenuOpen"
-        aria-haspopup="menu"
-        aria-controls="insert-menu"
-        @click="isInsertMenuOpen = !isInsertMenuOpen"
-      >
-        +
-      </button>
+      <div class="topbar-actions">
+        <button
+          class="insert-button"
+          title="Insert content"
+          aria-label="Insert content menu"
+          :aria-expanded="isInsertMenuOpen"
+          aria-haspopup="menu"
+          aria-controls="insert-menu"
+          @click="isInsertMenuOpen = !isInsertMenuOpen"
+        >
+          +
+        </button>
+        <ToolbarButton
+          :title="minimizeAction.title"
+          :icon="minimizeAction.icon"
+          @click="minimizeAction.handler"
+        />
+      </div>
 
       <div
         v-if="isInsertMenuOpen"
@@ -76,7 +83,7 @@
       const isInsertMenuOpen = ref(false);
       const dropdown = ref(null);
 
-      const { historyActions, insertTools } = useToolbarActions(emit);
+      const { historyActions, insertTools, minimizeAction } = useToolbarActions(emit);
 
       const handleClickOutside = event => {
         if (
@@ -100,6 +107,7 @@
       return {
         historyActions,
         insertTools,
+        minimizeAction,
         isInsertMenuOpen,
         dropdown,
       };
@@ -113,7 +121,8 @@
 
   .top-bar {
     display: flex;
-    flex-shrink: 0;
+
+    /* flex-shrink: 0; */
     align-items: center;
     justify-content: space-between;
     padding: 0.5rem;
@@ -125,25 +134,35 @@
     gap: 0.25rem;
   }
 
+  .topbar-actions {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+  }
+
   .insert-container {
     position: relative;
   }
 
   .insert-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: 36px;
     min-width: 44px;
     height: 36px;
     min-height: 44px;
-    font-size: 1.6rem;
+    font-size: 2.5rem;
     color: #666666;
     cursor: pointer;
+    opacity: 0.8;
   }
 
   .insert-dropdown {
     position: absolute;
     top: calc(100% + 8px);
     right: 0;
-    z-index: 10;
+    z-index: 2;
     width: 200px;
     padding: 0.5rem 0;
     background: white;
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/PasteDropdown.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/PasteDropdown.vue
index ad5e27c398..e80705dda4 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/PasteDropdown.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/PasteDropdown.vue
@@ -262,8 +262,8 @@
   }
 
   .toolbar-icon {
-    width: 17px;
-    height: 17px;
+    width: 20px;
+    height: 20px;
     opacity: 0.7;
   }
 
@@ -306,8 +306,8 @@
   }
 
   .dropdown-arrow {
-    width: 12px;
-    height: 12px;
+    width: 15px;
+    height: 15px;
     opacity: 0.9;
   }
 
@@ -340,7 +340,6 @@
       BlinkMacSystemFont,
       'Segoe UI',
       sans-serif;
-    font-size: 14px;
     line-height: 140%;
     color: #000000;
     cursor: pointer;
@@ -359,8 +358,8 @@
   }
 
   .dropdown-item-icon {
-    width: 16px;
-    height: 16px;
+    width: 18px;
+    height: 18px;
     opacity: 0.7;
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/ToolbarButton.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/ToolbarButton.vue
index 3daefea3d0..2e1775128b 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/ToolbarButton.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/ToolbarButton.vue
@@ -133,8 +133,8 @@
   }
 
   .toolbar-icon {
-    width: 21px;
-    height: 21px;
+    width: 1.7rem;
+    height: 1.7rem;
     opacity: 0.7;
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useToolbarActions.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useToolbarActions.js
index 63b364eb32..2745491656 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useToolbarActions.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useToolbarActions.js
@@ -241,6 +241,10 @@ export function useToolbarActions(emit) {
     }
   };
 
+  const handleMinimize = () => {
+    emit('minimize');
+  };
+
   // Helper function to check if a mark is active
   const isMarkActive = markName => {
     return editor?.value?.isActive(markName) || false;
@@ -393,6 +397,13 @@ export function useToolbarActions(emit) {
     },
   ]);
 
+  const minimizeAction = {
+    name: 'minimize',
+    title: 'Minimize Toolbar',
+    icon: require('../../assets/icon-unfold.svg'),
+    handler: handleMinimize,
+  };
+
   return {
     // Individual handlers
     handleUndo,
@@ -422,5 +433,6 @@ export function useToolbarActions(emit) {
     listActions,
     scriptActions,
     insertTools,
+    minimizeAction,
   };
 }
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/assets/icon-unfold.svg b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/assets/icon-unfold.svg
new file mode 100644
index 0000000000..f4b78336c1
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/assets/icon-unfold.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.9 16L0.5 14.6L5 10.1L9.5 14.6L8.1 16L5 12.9L1.9 16ZM5 5.9L0.5 1.4L1.9 0L5 3.1L8.1 0L9.5 1.4L5 5.9Z" fill="#666666"/>
+</svg>

From 50e70a8dd7e1d2ade71f72134304435afa53e3ba Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Mon, 4 Aug 2025 16:40:24 +0300
Subject: [PATCH 05/13] style(texteditor): remove extra space for  answer/hint
 editors

---
 .../components/AssessmentEditor/AssessmentEditor.vue         | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue
index ae676209ec..7a435311c8 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue
@@ -27,7 +27,8 @@
           <VCardText>
             <VLayout align-start>
               <VFlex
-                xs1
+                :style="{ 'margin-right': '1.5rem' }"
+                shrink
                 mt-2
               >
                 {{ idx + 1 }}
@@ -45,7 +46,7 @@
 
               <VFlex
                 v-else
-                xs10
+                xs11
               >
                 <AssessmentItemEditor
                   :item="item"

From 9fec943d5d5cab0ad8296b7fb2e081023d4d5a92 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Tue, 5 Aug 2025 22:57:01 +0300
Subject: [PATCH 06/13] tests(texteditor): fix old tests to work with the new
 editor

---
 .../AnswersEditor/AnswersEditor.spec.js       | 61 ++++++++++---------
 .../AssessmentEditor/AssessmentEditor.spec.js | 19 ++++--
 .../AssessmentItemEditor.spec.js              | 19 +++---
 .../AssessmentItemPreview.spec.js             | 29 ++++++---
 .../HintsEditor/HintsEditor.spec.js           | 17 +++---
 5 files changed, 85 insertions(+), 60 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.spec.js
index 2eb4db093d..7544e79acf 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.spec.js
@@ -4,8 +4,7 @@ import { AssessmentItemToolbarActions } from '../../constants';
 import AnswersEditor from './AnswersEditor';
 import { AssessmentItemTypes } from 'shared/constants';
 
-jest.mock('shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor.vue');
-jest.mock('shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer.vue');
+jest.mock('shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue');
 
 const clickNewAnswerBtn = async wrapper => {
   await wrapper.findComponent('[data-test="newAnswerBtn"]').trigger('click');
@@ -302,33 +301,37 @@ describe('AnswersEditor', () => {
     });
   });
 
-  // describe('on answer text update', () => {
-  //   beforeEach(async () => {
-  //     wrapper = mount(AnswersEditor, {
-  //       propsData: {
-  //         questionKind: AssessmentItemTypes.SINGLE_SELECTION,
-  //         answers: [
-  //           { answer: 'Mayonnaise (I mean you can, but...)', correct: true, order: 1 },
-  //           { answer: 'Peanut butter', correct: false, order: 2 },
-  //         ],
-  //         openAnswerIdx: 1,
-  //       },
-  //     });
-
-  //     // only one editor is rendered at a time => "wrapper.find"
-  //     wrapper.findComponent({ name: 'MarkdownEditor' }).vm.$emit('update', 'European butter');
-  //     await wrapper.vm.$nextTick();
-  //   });
-
-  //   it('emits update event with a payload containing updated answers', () => {
-  //     expect(wrapper.emitted().update).toBeTruthy();
-  //     expect(wrapper.emitted().update.length).toBe(1);
-  //     expect(wrapper.emitted().update[0][0]).toEqual([
-  //       { answer: 'Mayonnaise (I mean you can, but...)', correct: true, order: 1 },
-  //       { answer: 'European butter', correct: false, order: 2 },
-  //     ]);
-  //   });
-  // });
+  describe('on answer text update', () => {
+    beforeEach(async () => {
+      wrapper = mount(AnswersEditor, {
+        propsData: {
+          questionKind: AssessmentItemTypes.SINGLE_SELECTION,
+          answers: [
+            { answer: 'Mayonnaise (I mean you can, but...)', correct: true, order: 1 },
+            { answer: 'Peanut butter', correct: false, order: 2 },
+          ],
+          openAnswerIdx: 1,
+        },
+      });
+
+      const editors = wrapper.findAllComponents({ name: 'RichTextEditor' });
+      editors.at(1).vm.$emit('update', 'European butter');
+
+      await wrapper.vm.$nextTick();
+    });
+
+    it('emits update event with a payload containing updated answers', () => {
+      expect(wrapper.emitted().update).toBeTruthy();
+      expect(wrapper.emitted().update.length).toBe(1);
+
+      const emittedAnswers = JSON.parse(JSON.stringify(wrapper.emitted().update[0][0]));
+
+      expect(emittedAnswers).toEqual([
+        { answer: 'Mayonnaise (I mean you can, but...)', correct: true, order: 1 },
+        { answer: 'European butter', correct: false, order: 2 },
+      ]);
+    });
+  });
 
   describe('on correct answer change', () => {
     beforeEach(async () => {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.spec.js
index 251fbc94ee..67f9cdac0a 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.spec.js
@@ -5,8 +5,7 @@ import { assessmentItemKey } from '../../utils';
 import AssessmentEditor from './AssessmentEditor';
 import { AssessmentItemTypes, ValidationErrors, DELAYED_VALIDATION } from 'shared/constants';
 
-jest.mock('shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor.vue');
-jest.mock('shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer.vue');
+jest.mock('shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue');
 
 const NODE_ID = 'node-id';
 const ITEM1 = {
@@ -184,10 +183,18 @@ describe('AssessmentEditor', () => {
 
     expect(items.length).toBe(4);
 
-    expect(items.at(0).html()).toContain(ITEM1.question);
-    expect(items.at(1).html()).toContain(ITEM2.question);
-    expect(items.at(2).html()).toContain(ITEM3.question);
-    expect(items.at(3).html()).toContain(ITEM4.question);
+    expect(items.at(0).findComponent({ name: 'RichTextEditor' }).props('value')).toBe(
+      ITEM1.question,
+    );
+    expect(items.at(1).findComponent({ name: 'RichTextEditor' }).props('value')).toBe(
+      ITEM2.question,
+    );
+    expect(items.at(2).findComponent({ name: 'RichTextEditor' }).props('value')).toBe(
+      ITEM3.question,
+    );
+    expect(items.at(3).findComponent({ name: 'RichTextEditor' }).props('value')).toBe(
+      ITEM4.question,
+    );
   });
 
   it('renders items as closed', () => {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.spec.js
index 585152a1a5..157e6a4fc6 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.spec.js
@@ -7,8 +7,7 @@ import { AssessmentItemTypes, ValidationErrors } from 'shared/constants';
 
 const store = factory();
 
-jest.mock('shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor.vue');
-jest.mock('shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer.vue');
+jest.mock('shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue');
 
 const listeners = {
   update: jest.fn(),
@@ -34,8 +33,7 @@ const openQuestion = async wrapper => {
 };
 
 const updateQuestion = async (wrapper, newQuestionText) => {
-  // only one editor is rendered at a time => "wrapper.find"
-  wrapper.findComponent({ name: 'MarkdownEditor' }).vm.$emit('update', newQuestionText);
+  wrapper.findComponent({ name: 'RichTextEditor' }).vm.$emit('update', newQuestionText);
   await wrapper.vm.$nextTick();
 };
 
@@ -63,13 +61,16 @@ describe('AssessmentItemEditor', () => {
       listeners,
     });
 
-    expect(wrapper.html()).toContain('Exercise 2 - Question 2');
+    // Find the first RichTextEditor component, which is used for the question.
+    const questionEditor = wrapper.findComponent({ name: 'RichTextEditor' });
+    expect(questionEditor.exists()).toBe(true);
 
-    // expect(wrapper.html()).toContain('Mayonnaise (I mean you can, but...)');
-    // expect(wrapper.html()).toContain('Peanut butter');
+    // Assert that it received the correct `value` prop.
+    expect(questionEditor.props('value')).toBe('Exercise 2 - Question 2');
 
-    // expect(wrapper.html()).toContain("It's not healthy");
-    // expect(wrapper.html()).toContain('Tasty!');
+    // Check that the child editor components also exist.
+    expect(wrapper.findComponent({ name: 'AnswersEditor' }).exists()).toBe(true);
+    expect(wrapper.findComponent({ name: 'HintsEditor' }).exists()).toBe(true);
   });
 
   describe('on question text update', () => {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.spec.js
index b13e1f4a91..f05c41a1b7 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.spec.js
@@ -3,6 +3,8 @@ import { mount } from '@vue/test-utils';
 import AssessmentItemPreview from './AssessmentItemPreview';
 import { AssessmentItemTypes } from 'shared/constants';
 
+jest.mock('shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue');
+
 describe('AssessmentItemPreview', () => {
   let wrapper;
 
@@ -31,7 +33,9 @@ describe('AssessmentItemPreview', () => {
   });
 
   it('renders question', () => {
-    expect(wrapper.html()).toContain('Question');
+    // Find the RichTextEditor for the question and check its value prop.
+    const questionEditor = wrapper.findComponent({ name: 'RichTextEditor' });
+    expect(questionEditor.props('value')).toBe('Question');
   });
 
   it("doesn't render answers by default", () => {
@@ -55,9 +59,13 @@ describe('AssessmentItemPreview', () => {
     });
 
     it('renders answers', () => {
-      expect(wrapper.html()).toContain('Answer 1');
-      expect(wrapper.html()).toContain('Answer 2');
-      expect(wrapper.html()).toContain('Answer 3');
+      const editors = wrapper.findAllComponents({ name: 'RichTextEditor' });
+      // We expect 1 for the question + 3 for the answers = 4 total editors.
+      expect(editors.length).toBe(4);
+
+      expect(editors.at(1).props('value')).toBe('Answer 1');
+      expect(editors.at(2).props('value')).toBe('Answer 2');
+      expect(editors.at(3).props('value')).toBe('Answer 3');
     });
 
     it("doesn't render hints", () => {
@@ -66,14 +74,19 @@ describe('AssessmentItemPreview', () => {
     });
 
     it('renders hints toggle', () => {
-      expect(wrapper.findComponent('[data-test="hintsToggle"]').exists()).toBe(true);
+      expect(wrapper.find('[data-test="hintsToggle"]').exists()).toBe(true);
     });
 
     it('renders hints on hints toggle click', async () => {
-      await wrapper.findComponent('[data-test="hintsToggle"]').trigger('click');
+      await wrapper.find('[data-test="hintsToggle"]').trigger('click');
+
+      // After clicking, there should be more editors for the hints.
+      // 1 (question) + 3 (answers) + 2 (hints) = 6 total editors.
+      const editors = wrapper.findAllComponents({ name: 'RichTextEditor' });
+      expect(editors.length).toBe(6);
 
-      expect(wrapper.html()).toContain('Hint 1');
-      expect(wrapper.html()).toContain('Hint 2');
+      expect(editors.at(4).props('value')).toBe('Hint 1');
+      expect(editors.at(5).props('value')).toBe('Hint 2');
     });
   });
 });
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.spec.js
index 18520c338f..65b228a26f 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.spec.js
@@ -4,8 +4,7 @@ import { AssessmentItemToolbarActions } from '../../constants';
 
 import HintsEditor from './HintsEditor';
 
-jest.mock('shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor.vue');
-jest.mock('shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer.vue');
+jest.mock('shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue');
 
 const clickNewHintBtn = async wrapper => {
   await wrapper.findComponent('[data-test=newHintBtn]').find('button').trigger('click');
@@ -65,11 +64,13 @@ describe('HintsEditor', () => {
       },
     });
 
-    const hints = wrapper.findAll('[data-test="hint"]');
+    // Find all instances of your new RichTextEditor component
+    const editors = wrapper.findAllComponents({ name: 'RichTextEditor' });
+    expect(editors.length).toBe(2);
 
-    expect(hints.length).toBe(2);
-    expect(hints.at(0).html()).toContain('First hint');
-    expect(hints.at(1).html()).toContain('Second hint');
+    // Instead of checking the raw HTML, we check the `value` prop passed to each editor.
+    expect(editors.at(0).props('value')).toBe('First hint');
+    expect(editors.at(1).props('value')).toBe('Second hint');
   });
 
   describe('on hint text update', () => {
@@ -84,8 +85,8 @@ describe('HintsEditor', () => {
         },
       });
 
-      // only one editor is rendered at a time => "wrapper.find"
-      wrapper.findComponent({ name: 'MarkdownEditor' }).vm.$emit('update', 'Updated hint');
+      const editors = wrapper.findAllComponents({ name: 'RichTextEditor' });
+      editors.at(1).vm.$emit('update', 'Updated hint');
     });
 
     it('emits update event with a payload containing updated hints', () => {

From 9f6881256816901231f547daca61b5e2953d310a Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Wed, 6 Aug 2025 15:04:27 +0300
Subject: [PATCH 07/13] refactor: delete all MarkdownEditor code

---
 .../FormulasMenu/FormulasMenu.vue             |  273 -
 .../MarkdownEditor/FormulasMenu/symbols.json  |  237 -
 .../MarkdownEditor/ImagesMenu/ImagesMenu.vue  |  338 --
 .../MarkdownEditor/MarkdownEditor.vue         |  907 ---
 .../__mocks__/MarkdownEditor.vue              |   28 -
 .../MarkdownEditor/MarkdownEditor/utils.js    |  117 -
 .../MarkdownViewer/MarkdownViewer.vue         |   88 -
 .../__mocks__/MarkdownViewer.vue              |   24 -
 .../formulas/formula-html-to-md.spec.js       |   23 -
 .../formulas/formula-md-to-html.spec.js       |   11 -
 .../formulas/markdownFormulaField.spec.js     |   35 -
 .../image-upload/image-html-to-md.spec.js     |   18 -
 .../image-upload/image-md-to-html.spec.js     |   26 -
 .../image-upload/markdownImageField.spec.js   |   42 -
 .../MarkdownEditor/__tests__/utils.spec.js    |   97 -
 .../shared/views/MarkdownEditor/constants.js  |   12 -
 .../MarkdownEditor/mathquill/mathquill.css    |  469 --
 .../MarkdownEditor/mathquill/mathquill.js     | 5403 -----------------
 .../plugins/formulas/MarkdownFormulaField.vue |   69 -
 .../plugins/formulas/formula-html-to-md.js    |   40 -
 .../plugins/formulas/formula-md-to-html.js    |   21 -
 .../plugins/formulas/formulas.css             |    5 -
 .../plugins/formulas/formulas.js              |   28 -
 .../MarkdownEditor/plugins/formulas/index.js  |    4 -
 .../plugins/formulas/style.scss               |   68 -
 .../formulas/toolbar-icon-formulas.svg        |    9 -
 .../image-upload/MarkdownImageField.vue       |  211 -
 .../plugins/image-upload/image-html-to-md.js  |   34 -
 .../plugins/image-upload/image-md-to-html.js  |   19 -
 .../plugins/image-upload/image-upload.css     |    5 -
 .../plugins/image-upload/image-upload.js      |   30 -
 .../plugins/image-upload/index.js             |   39 -
 .../plugins/image-upload/style.scss           |   80 -
 .../toolbar-icon-image-upload.svg             |    9 -
 .../MarkdownEditor/plugins/minimize/index.js  |    4 -
 .../plugins/minimize/minimize.css             |    6 -
 .../plugins/minimize/minimize.js              |   24 -
 .../minimize/toolbar-icon-minimize.svg        |    9 -
 .../plugins/registerCustomMarkdownField.js    |  123 -
 39 files changed, 8985 deletions(-)
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/FormulasMenu/FormulasMenu.vue
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/FormulasMenu/symbols.json
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/ImagesMenu/ImagesMenu.vue
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor.vue
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/__mocks__/MarkdownEditor.vue
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/utils.js
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer.vue
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownViewer/__mocks__/MarkdownViewer.vue
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/__tests__/plugins/formulas/formula-html-to-md.spec.js
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/__tests__/plugins/formulas/formula-md-to-html.spec.js
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/__tests__/plugins/formulas/markdownFormulaField.spec.js
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/__tests__/plugins/image-upload/image-html-to-md.spec.js
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/__tests__/plugins/image-upload/image-md-to-html.spec.js
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/__tests__/plugins/image-upload/markdownImageField.spec.js
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/__tests__/utils.spec.js
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/constants.js
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/mathquill/mathquill.css
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/mathquill/mathquill.js
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/MarkdownFormulaField.vue
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/formula-html-to-md.js
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/formula-md-to-html.js
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/formulas.css
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/formulas.js
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/index.js
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/style.scss
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/toolbar-icon-formulas.svg
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/MarkdownImageField.vue
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/image-html-to-md.js
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/image-md-to-html.js
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/image-upload.css
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/image-upload.js
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/index.js
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/style.scss
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/toolbar-icon-image-upload.svg
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/minimize/index.js
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/minimize/minimize.css
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/minimize/minimize.js
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/minimize/toolbar-icon-minimize.svg
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/registerCustomMarkdownField.js

diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/FormulasMenu/FormulasMenu.vue b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/FormulasMenu/FormulasMenu.vue
deleted file mode 100644
index ffa12c8d42..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/FormulasMenu/FormulasMenu.vue
+++ /dev/null
@@ -1,273 +0,0 @@
-<template>
-
-  <div class="formulas-menu">
-    <div :class="anchorArrowClasses"></div>
-
-    <VCard elevation="20">
-      <VCardTitle class="pb-1 pt-1">
-        <VLayout
-          align-center
-          justify-space-between
-        >
-          <VFlex class="font-weight-bold">
-            {{ $tr('formulasMenuTitle') }}
-          </VFlex>
-          <VBtn @click="onInsertClick">
-            {{ $tr('btnLabelInsert') }}
-          </VBtn>
-        </VLayout>
-      </VCardTitle>
-
-      <VCardText class="pa-0">
-        <VDivider class="mt-0" />
-
-        <div class="pa-3 symbol-editor text-center">
-          <Formula
-            ref="symbolEditor"
-            :value="value"
-            :editable="true"
-            :mathQuill="mathQuill"
-            @input="onSymbolEditorInput"
-          />
-        </div>
-
-        <VDivider class="mb-0" />
-
-        <div class="grey info-bar lighten-3 pa-2">
-          {{ infoText }}
-        </div>
-
-        <div class="pa-2 symbols-list">
-          <div
-            v-for="(symbolsGroup, symbolsGroupIdx) in symbols"
-            :key="symbolsGroupIdx"
-            class="mt-3"
-          >
-            <div class="font-weight-bold mb-2 pa-2">
-              {{ symbolsTranslator.$tr(symbolsGroup.title) }}
-            </div>
-
-            <VLayout
-              row
-              wrap
-            >
-              <VFlex
-                v-for="(_, symbolIdx) in symbolsGroup.symbols"
-                :key="symbolIdx"
-                :class="symbolClasses(symbolsGroup)"
-                @click="onSymbolClick(symbolsGroupIdx, symbolIdx)"
-                @mouseenter="onSymbolMouseEnter(symbolsGroupIdx, symbolIdx)"
-                @mouseleave="onSymbolMouseLeave"
-              >
-                <Formula
-                  :value="symbol(symbolsGroupIdx, symbolIdx).preview"
-                  :mathQuill="mathQuill"
-                />
-              </VFlex>
-            </VLayout>
-          </div>
-        </div>
-      </VCardText>
-    </VCard>
-  </div>
-
-</template>
-
-
-<script>
-
-  import Formula from '../../../Formula';
-  import SYMBOLS from './symbols.json';
-  import { createTranslator } from 'shared/i18n';
-
-  const ANCHOR_ARROW_SIDE_LEFT = 'left';
-  const ANCHOR_ARROW_SIDE_RIGHT = 'right';
-
-  // TODO: I don't think our string extraction will actually
-  // catch these generated strings here.
-
-  const symbolsStrings = {};
-  SYMBOLS.forEach(symbolsGroup => {
-    symbolsStrings[symbolsGroup.title] = symbolsGroup.title;
-
-    symbolsGroup.symbols.forEach(symbol => {
-      symbolsStrings[symbol.title] = `${symbol.title} ({ expression })`;
-    });
-  });
-  const symbolsTranslator = createTranslator('SymbolsStrings', symbolsStrings);
-
-  export default {
-    name: 'FormulasMenu',
-    components: {
-      Formula,
-    },
-    props: {
-      value: {
-        type: String,
-        default: '',
-      },
-      mathQuill: {
-        type: Function,
-        default: () => {},
-      },
-      anchorArrowSide: {
-        type: String,
-        default: ANCHOR_ARROW_SIDE_LEFT,
-        validator: value => {
-          return [ANCHOR_ARROW_SIDE_LEFT, ANCHOR_ARROW_SIDE_RIGHT].includes(value);
-        },
-      },
-    },
-    data() {
-      return {
-        symbols: SYMBOLS,
-        infoText: '',
-      };
-    },
-    computed: {
-      symbolsTranslator() {
-        return symbolsTranslator;
-      },
-      anchorArrowClasses() {
-        const classes = ['anchor-arrow'];
-
-        if (this.anchorArrowSide === ANCHOR_ARROW_SIDE_RIGHT) {
-          classes.push('anchor-arrow-right');
-        }
-
-        return classes;
-      },
-    },
-    mounted() {
-      this.$refs.symbolEditor.focus();
-    },
-    methods: {
-      symbol(symbolsGroupIdx, symbolIdx) {
-        return this.symbols[symbolsGroupIdx].symbols[symbolIdx];
-      },
-      symbolClasses(symbolsGroup) {
-        const classes = ['symbol', 'text-center', 'pa-2'];
-
-        if (['Formulas', 'Lines'].includes(symbolsGroup.title)) {
-          classes.push('equation');
-          classes.push('xs4');
-        } else {
-          classes.push('xs2');
-        }
-
-        return classes;
-      },
-      onSymbolMouseEnter(symbolsGroupIdx, symbolIdx) {
-        const symbol = this.symbol(symbolsGroupIdx, symbolIdx);
-
-        this.infoText = this.symbolsTranslator.$tr(symbol.title, { expression: symbol.key });
-      },
-      onSymbolMouseLeave() {
-        this.infoText = '';
-      },
-      onSymbolEditorInput(formula) {
-        this.$emit('input', formula);
-      },
-      onSymbolClick(symbolsGroupIdx, symbolIdx) {
-        const formula = this.symbol(symbolsGroupIdx, symbolIdx).preview;
-        this.$emit('input', formula);
-      },
-      onInsertClick() {
-        this.$emit('insert');
-      },
-    },
-    $trs: {
-      formulasMenuTitle: 'Special characters',
-      btnLabelInsert: 'Insert',
-    },
-  };
-
-</script>
-
-
-<style lang="scss" scoped>
-
-  .formulas-menu {
-    position: relative;
-    max-width: 500px;
-    // to make positioning from a parent element easier - this
-    // makes sure that the tip of the anchor will be considered
-    // as top right/left corner
-    margin-top: 16px;
-    margin-right: -30px;
-    margin-left: -30px;
-  }
-
-  .anchor-arrow {
-    position: absolute;
-    top: -40px;
-    left: 10px;
-    z-index: 3;
-    width: 40px;
-    height: 40px;
-    overflow: hidden;
-
-    &::after {
-      position: absolute;
-      top: 28px;
-      right: 0;
-      left: 6px;
-      width: 25px;
-      height: 25px;
-      content: '';
-      background: #ffffff;
-      box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.3);
-      transform: rotate(45deg);
-    }
-
-    &.anchor-arrow-right {
-      right: 10px;
-      left: initial;
-    }
-  }
-
-  .v-card__text {
-    position: relative;
-  }
-
-  .symbol-editor {
-    min-height: 20px;
-    overflow-x: scroll;
-    font-size: 1.3em;
-  }
-
-  .info-bar {
-    position: sticky;
-    z-index: 3;
-    min-height: 36px;
-  }
-
-  .symbols-list {
-    height: 360px;
-    overflow-y: scroll;
-  }
-
-  .symbol {
-    font-size: 1.4em;
-    text-align: center;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-
-    .mq-math-mode {
-      cursor: inherit;
-    }
-
-    &.equation {
-      font-size: 1.1em;
-    }
-
-    &:hover {
-      background-color: var(--v-grey-lighten3);
-    }
-  }
-
-  .mq-focused {
-    box-shadow: none;
-  }
-
-</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/FormulasMenu/symbols.json b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/FormulasMenu/symbols.json
deleted file mode 100644
index ca58afa42e..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/FormulasMenu/symbols.json
+++ /dev/null
@@ -1,237 +0,0 @@
-[
-	{
-		"title": "Formulas",
-		"symbols": [
-			{"key": "^", "preview": "{a}^{b}", "title": "Superscript"},
-			{"key": "_", "preview": "{a}_{b}", "title": "Subscript"},
-			{"key": "\\frac", "preview": "\\frac{a}{b}", "title": "Fraction"},
-			{"key": "\\binom", "preview": "(\\binom_b^a)", "title": "Binomial coefficient"},
-			{"key": "\\sum", "preview": "\\sum_b^a", "title": "Sum"},
-			{"key": "\\prod", "preview": "\\prod_b^a", "title": "Product"},
-			{"key": "\\coprod", "preview": "\\coprod_b^a", "title": "Coproduct"},
-			{"key": "\\int", "preview": "\\int_b^a", "title": "Integral"}
-		]
-	},
-	{
-		"title": "Lines",
-		"symbols": [
-			{"key": "\\sqrt", "preview": "\\surd\\bar{abc}", "title": "Square root"},
-			{"key": "\\bar", "preview": "\\bar{abc}", "title": "Bar"},
-			{"key": "\\underline", "preview": "\\underline{abc}", "title": "Underline"},
-			{"key": "\\overleftarrow", "preview": "\\overleftarrow{abc}", "title": "Left arrow"},
-			{"key": "\\overrightarrow", "preview": "\\overrightarrow{abc}", "title": "Right arrow"},
-			{"key": "\\vec", "preview": "\\vec{v}", "title": "Vector"}
-		]
-	},
-	{
-		"title": "Basic",
-		"symbols": [
-			{"key": "+","preview": "+","title": "Addition"},
-			{"key": "-","preview": "−","title": "Subtraction"},
-			{"key": "\\times","preview": "×","title": "Multiplication"},
-			{"key": "\\div","preview": "÷","title": "Division"},
-			{"key": "\\cdot","preview": "·","title": "Dot"},
-			{"key": "\\neg","preview": "¬","title": "Negation"},
-			{"key": "\\pm","preview": "±","title": "Plus-minus"},
-			{"key": "\\mp","preview": "∓","title": "Minus-plus"},
-			{"key": "\\neq","preview": "≠","title": "Does not equal"},
-			{"key": "\\approx","preview": "≈","title": "Approximately"},
-			{"key": "\\propto","preview": "∝","title": "Proportional"},
-			{"key": "\\doteq","preview": "≐","title": "Definition"},
-			{"key": "\\gt","preview": ">","title": "Greater than"},
-			{"key": "\\ge","preview": "≥","title": "Greater than or equal to"},
-			{"key": "\\ngtr","preview": "≯","title": "Not greater than"},
-			{"key": "\\gg","preview": "≫","title": "Significantly greater than"},
-			{"key": "\\lt","preview": "<","title": "Less than"},
-			{"key": "\\le","preview": "≤","title": "Less than or equal to"},
-			{"key": "\\nless","preview": "≮","title": "Not less than"},
-			{"key": "\\ll","preview": "≪","title": "Significantly less than"},
-			{"key": "\\lceil","preview": "⌈","title": "Left ceiling"},
-			{"key": "\\lfloor","preview": "⌊","title": "Left floor"},
-			{"key": "\\rceil","preview": "⌉","title": "Right ceiling"},
-			{"key": "\\rfloor","preview": "⌋","title": "Right floor"}
-		]
-	},
-	{
-		"title": "Advanced",
-		"symbols": [
-			{"key": "\\bigotimes","preview": "⨂","title": "Tensor product"},
-			{"key": "\\otimes","preview": "⊗","title": "Tensor product"},
-			{"key": "\\oint","preview": "∮","title": "Contour integral"},
-			{"key": "\\nabla","preview": "∇","title": "Nabla"},
-			{"key": "\\ast","preview": "*","title": "Conjugate"},
-			{"key": "\\dagger","preview": "†","title": "Conjugate transpose"},
-			{"key": "\\partial","preview": "∂","title": "Partial"},
-			{"key": "\\wedge","preview": "∧","title": "Wedge product"},
-			{"key": "\\infty","preview": "∞","title": "Infinity"},
-			{"key": "\\top","preview": "⊤","title": "Top element"},
-			{"key": "\\prec","preview": "≺","title": "Reducible to"},
-			{"key": "\\succ","preview": "≻","title": "Nondominated by"}
-		]
-	},
-	{
-		"title": "Logic",
-		"symbols": [
-			{"key": "\\land","preview": "∧","title": "And"},
-			{"key": "\\lor","preview": "∨","title": "Or"},
-			{"key": "\\iff","preview": "⟺","title": "If and only if"},
-			{"key": "\\models","preview": "⊨","title": "Entails"},
-			{"key": "\\vdash","preview": "⊢","title": "Implies"},
-			{"key": "\\vert","preview": "|","title": "Given that/Such that"},
-			{"key": "\\exists","preview": "∃","title": "Exists"},
-			{"key": "\\forall","preview": "∀","title": "For all"},
-			{"key": "\\because","preview": "∵","title": "Because"},
-			{"key": "\\therefore","preview": "∴","title": "Therefore"},
-			{"key": "\\square","preview": "□","title": "QED"},
-			{"key": "\\bigoplus","preview": "⨁","title": "Exclusive or"},
-			{"key": "\\oplus","preview": "⊕","title": "Exclusive or"}
-		]
-	},
-	{
-		"title": "Geometry",
-		"symbols": [
-			{"key": "\\circ","preview": "∘","title": "Degrees"},
-			{"key": "\\angle","preview": "∠","title": "Angle"},
-			{"key": "\\measuredangle","preview": "∡","title": "Measured angle"},
-			{"key": "\\parallel","preview": "∥","title": "Parallel"},
-			{"key": "\\perp","preview": "⊥","title": "Perpendicular"},
-			{"key": "\\nparallel","preview": "∦","title": "Incomparable to"},
-			{"key": "\\sim","preview": "∼","title": "Similar to"},
-			{"key": "\\simeq","preview": "≃","title": "Similar or equal to"},
-			{"key": "\\cong","preview": "≅","title": "Congruent to"},
-			{"key": "\\equiv","preview": "≡","title": "Congruent to"}
-		]
-	},
-	{
-		"title": "Sets",
-		"symbols": [
-			{"key": "\\dots","preview": "…","title": "Ellipsis"},
-			{"key": "\\vdots","preview": "⋮","title": "Ellipsis (vertical)"},
-			{"key": "\\cdots","preview": "⋯","title": "Ellipsis (centered)"},
-			{"key": "\\ddots","preview": "⋱","title": "Ellipsis (diagonal)"},
-			{"key": "\\aleph","preview": "ℵ","title": "Cardinality"},
-			{"key": "\\bigcap","preview": "⋂","title": "Intersection"},
-			{"key": "\\cap","preview": "∩","title": "Intersection"},
-			{"key": "\\sqcap","preview": "⊓","title": "Intersection"},
-			{"key": "\\bigcup","preview": "⋃","title": "Union"},
-			{"key": "\\cup","preview": "∪","title": "Union"},
-			{"key": "\\sqcup","preview": "⊔","title": "Union"},
-			{"key": "\\emptyset","preview": "∅","title": "Empty set"},
-			{"key": "\\in","preview": "∈","title": "In"},
-			{"key": "\\notin","preview": "∉","title": "Not in"},
-			{"key": "\\ni","preview": "∋","title": "Contains"},
-			{"key": "\\ominus","preview": "⊖","title": "Symmetric difference"},
-			{"key": "\\setminus","preview": "∖","title": "Set difference"},
-			{"key": "\\subset","preview": "⊂","title": "Subset"},
-			{"key": "\\sqsubset","preview": "⊏","title": "Subset"},
-			{"key": "\\subseteq","preview": "⊆","title": "Subset or equal"},
-			{"key": "\\sqsubseteq","preview": "⊑","title": "Subset or equal"},
-			{"key": "\\nsubseteq","preview": "⊈","title": "Not a subset or equal"},
-			{"key": "\\supset","preview": "⊃","title": "Superset"},
-			{"key": "\\sqsupset","preview": "⊐","title": "Superset"},
-			{"key": "\\supseteq","preview": "⊇","title": "Superset or equal"},
-			{"key": "\\sqsupseteq","preview": "⊒","title": "Superset or equal"},
-			{"key": "\\nsupseteq","preview": "⊉","title": "Not a superset or equal"},
-			{"key": "\\wr","preview": "≀","title": "Wreath product"},
-			{"key": "\\bowtie","preview": "⋈","title": "Natural join"}
-		]
-	},
-	{
-		"title": "Directional",
-		"symbols": [
-			{"key": "\\downarrow","preview": "↓","title": "Down"},
-			{"key": "\\Downarrow","preview": "⇓","title": "Down (double)"},
-			{"key": "\\bigtriangledown","preview": "▽","title": "Triangle down"},
-			{"key": "\\uparrow","preview": "↑","title": "Up"},
-			{"key": "\\Uparrow","preview": "⇑","title": "Up (double)"},
-			{"key": "\\bigtriangleup","preview": "△","title": "Triangle up"},
-			{"key": "\\updownarrow","preview": "↕","title": "Up-down"},
-			{"key": "\\Updownarrow","preview": "⇕","title": "Up-down (double)"},
-			{"key": "\\leftarrow","preview": "←","title": "Left"},
-			{"key": "\\Leftarrow","preview": "⇐","title": "Left (double)"},
-			{"key": "\\longleftarrow","preview": "⟵","title": "Left (long)"},
-			{"key": "\\Longleftarrow","preview": "⟸","title": "Left (long, double)"},
-			{"key": "\\hookleftarrow","preview": "↩","title": "Left (hooked)"},
-			{"key": "\\leftharpoondown","preview": "↽","title": "Left (harpoon down)"},
-			{"key": "\\leftharpoonup","preview": "↼","title": "Left (harpoon up)"},
-			{"key": "\\rightarrow","preview": "→","title": "Right"},
-			{"key": "\\Rightarrow","preview": "⇒","title": "Right (double)"},
-			{"key": "\\longrightarrow","preview": "⟶","title": "Right (long)"},
-			{"key": "\\Longrightarrow","preview": "⟹","title": "Right (long, double)"},
-			{"key": "\\hookrightarrow","preview": "↪","title": "Right (hooked)"},
-			{"key": "\\rightharpoondown","preview": "⇁","title": "Right (harpoon down)"},
-			{"key": "\\rightharpoonup","preview": "⇀","title": "Right (harpoon up)"},
-			{"key": "\\leftrightarrow","preview": "↔","title": "Left-right"},
-			{"key": "\\Leftrightarrow","preview": "⇔","title": "Left-right (double)"},
-			{"key": "\\longleftrightarrow","preview": "⟷","title": "Left-right (long)"},
-			{"key": "\\Longleftrightarrow","preview": "⟺","title": "Left-right (long, double)"},
-			{"key": "\\nearrow","preview": "↗","title": "Northeast"},
-			{"key": "\\nwarrow","preview": "↖","title": "Northwest"},
-			{"key": "\\searrow","preview": "↘","title": "Southeast"},
-			{"key": "\\swarrow","preview": "↙","title": "Southwest"}
-		]
-	},
-	{
-		"title": "Characters",
-		"symbols": [
-			{"key": "\\alpha","preview": "α","title": "alpha"},
-			{"key": "\\beta","preview": "β","title": "beta"},
-			{"key": "\\chi","preview": "χ","title": "chi"},
-			{"key": "\\Delta","preview": "Δ","title": "Delta"},
-			{"key": "\\delta","preview": "δ","title": "delta"},
-			{"key": "\\digamma","preview": "ϝ","title": "digamma"},
-			{"key": "\\ell","preview": "ℓ","title": "ell"},
-			{"key": "\\epsilon","preview": "ϵ","title": "epsilon"},
-			{"key": "\\varepsilon","preview": "ε","title": "epsilon"},
-			{"key": "\\eta","preview": "η","title": "eta"},
-			{"key": "\\Gamma","preview": "Γ","title": "Gamma"},
-			{"key": "\\gamma","preview": "γ","title": "gamma"},
-			{"key": "\\hbar","preview": "ℏ","title": "Planck's constant"},
-			{"key": "\\iota","preview": "ι","title": "iota"},
-			{"key": "\\kappa","preview": "κ","title": "kappa"},
-			{"key": "\\varkappa","preview": "ϰ","title": "kappa"},
-			{"key": "\\Lambda","preview": "Λ","title": "Lambda"},
-			{"key": "\\lambda","preview": "λ","title": "lambda"},
-			{"key": "\\mu","preview": "μ","title": "mu"},
-			{"key": "\\nu","preview": "ν","title": "nu"},
-			{"key": "\\Omega","preview": "Ω","title": "Omega"},
-			{"key": "\\omega","preview": "ω","title": "omega"},
-			{"key": "\\Phi","preview": "Φ","title": "Phi"},
-			{"key": "\\phi","preview": "ϕ","title": "phi"},
-			{"key": "\\varphi","preview": "φ","title": "phi"},
-			{"key": "\\Pi","preview": "Π","title": "Pi"},
-			{"key": "\\pi","preview": "π","title": "pi"},
-			{"key": "\\varpi","preview": "ϖ","title": "pi"},
-			{"key": "\\Psi","preview": "Ψ","title": "Psi"},
-			{"key": "\\psi","preview": "ψ","title": "psi"},
-			{"key": "\\rho","preview": "ρ","title": "rho"},
-			{"key": "\\varrho","preview": "ϱ","title": "rho"},
-			{"key": "\\Sigma","preview": "Σ","title": "Sigma"},
-			{"key": "\\sigma","preview": "σ","title": "sigma"},
-			{"key": "\\varsigma","preview": "ς","title": "sigma"},
-			{"key": "\\tau","preview": "τ","title": "tau"},
-			{"key": "\\Theta","preview": "Θ","title": "Theta"},
-			{"key": "\\theta","preview": "θ","title": "theta"},
-			{"key": "\\vartheta","preview": "ϑ","title": "theta"},
-			{"key": "\\Upsilon","preview": "Υ","title": "Upsilon"},
-			{"key": "\\upsilon","preview": "υ","title": "upsilon"},
-			{"key": "\\wp","preview": "℘","title": "P"},
-			{"key": "\\Xi","preview": "Ξ","title": "Xi"},
-			{"key": "\\xi","preview": "ξ","title": "xi"},
-			{"key": "\\zeta","preview": "ζ","title": "zeta"}
-		]
-	},
-	{
-		"title": "Miscellaneous",
-		"symbols": [
-			{"key": "\\bigcirc","preview": "◯","title": "Circle"},
-			{"key": "\\clubsuit","preview": "♣","title": "Club"},
-			{"key": "\\diamondsuit","preview": "♢","title": "Diamond"},
-			{"key": "\\heartsuit","preview": "♡","title": "Heart"},
-			{"key": "\\spadesuit","preview": "♠","title": "Spade"},
-			{"key": "\\flat","preview": "♭","title": "Flat"},
-			{"key": "\\natural","preview": "♮","title": "Natural"},
-			{"key": "\\sharp","preview": "♯","title": "Sharp"}
-		]
-	}
-]
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/ImagesMenu/ImagesMenu.vue b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/ImagesMenu/ImagesMenu.vue
deleted file mode 100644
index 303292d99b..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/ImagesMenu/ImagesMenu.vue
+++ /dev/null
@@ -1,338 +0,0 @@
-<template>
-
-  <div
-    class="images-menu"
-    @click.stop
-  >
-    <div :class="anchorArrowClasses"></div>
-
-    <VCard
-      elevation="20"
-      style="min-width: 500px"
-      @dragenter.stop
-      @dragover.stop
-    >
-      <VCardTitle class="py-1">
-        <VLayout
-          align-center
-          justify-space-between
-        >
-          <VFlex class="font-weight-bold">
-            {{ $tr('imageHeader') }}
-          </VFlex>
-          <VBtn
-            :disabled="!fileSrc || uploading || hasError"
-            @click="onInsertClick"
-          >
-            {{ $tr('btnLabelInsert') }}
-          </VBtn>
-        </VLayout>
-      </VCardTitle>
-      <VDivider class="mt-0" />
-      <VCardText>
-        <div class="body-1 mb-2 mx-2">
-          <FileStatusText
-            v-if="uploadingId"
-            :fileId="uploadingId"
-            permanent
-            @open="openFileDialog"
-          />
-          <span
-            v-else-if="fileSrc"
-            class="grey--text"
-          >
-            <ActionLink
-              :text="$tr('selectFile')"
-              class="mr-2"
-              @click="openFileDialog"
-            />
-            {{ $tr('currentImageDefaultText') }}
-          </span>
-        </div>
-        <FileDropzone
-          @dropped="handleFiles"
-          @click="openFileDialog"
-        >
-          <VCard
-            class="pa-0 upload-area"
-            flat
-          >
-            <!-- Uploading status -->
-            <VCard
-              v-if="uploading || hasError"
-              flat
-              style="padding: 28% 0"
-            >
-              <VLayout
-                wrap
-                align-center
-                justify-center
-                style="max-height: 0"
-              >
-                <div
-                  class="text-xs-center"
-                  style="position: absolute"
-                >
-                  <p>
-                    <FileStatus
-                      :fileId="uploadingId"
-                      large
-                    />
-                  </p>
-                  <ActionLink
-                    v-if="!hasError"
-                    :text="$tr('btnLabelCancel')"
-                    data-test="cancel-upload"
-                    @click="cancelPendingFile"
-                  />
-                </div>
-              </VLayout>
-            </VCard>
-
-            <!-- Default drop text -->
-            <VContainer
-              v-else-if="!fileSrc"
-              fluid
-              class="py-5"
-            >
-              <VLayout
-                align-center
-                space-around
-                class="text-xs-center"
-              >
-                <VFlex>
-                  <p class="subheading">
-                    {{ $tr('defaultDropText') }}
-                  </p>
-                  <VBtn>
-                    {{ $tr('selectFileButton') }}
-                  </VBtn>
-                  <p class="caption grey--text my-3">
-                    {{ $tr('acceptsText', { acceptedFormats }) }}
-                  </p>
-                </VFlex>
-              </VLayout>
-            </VContainer>
-
-            <!-- Image preview -->
-            <div
-              v-else
-              class="text-xs-center"
-            >
-              <img
-                :src="fileSrc"
-                class="image-preview"
-              >
-            </div>
-          </VCard>
-        </FileDropzone>
-        <input
-          ref="fileUpload"
-          style="display: none"
-          type="file"
-          :accept="acceptedMimetypes"
-          @change="handleFiles($event.target.files)"
-        >
-
-        <VTextField
-          v-if="fileSrc"
-          v-model="altText"
-          box
-          :label="$tr('altTextLabel')"
-          class="mt-4"
-          persistent-hint
-          :hint="$tr('altTextHint')"
-        />
-      </VCardText>
-    </VCard>
-  </div>
-
-</template>
-
-
-<script>
-
-  import FileStatusText from 'shared/views/files/FileStatusText';
-  import FileStatus from 'shared/views/files/FileStatus';
-  import FileDropzone from 'shared/views/files/FileDropzone';
-  import FormatPresetsMap from 'shared/leUtils/FormatPresets';
-
-  const ANCHOR_ARROW_SIDE_LEFT = 'left';
-  const ANCHOR_ARROW_SIDE_RIGHT = 'right';
-
-  export default {
-    name: 'ImagesMenu',
-    components: {
-      FileStatusText,
-      FileDropzone,
-      FileStatus,
-    },
-    props: {
-      anchorArrowSide: {
-        type: String,
-        default: ANCHOR_ARROW_SIDE_LEFT,
-        validator: value => {
-          return [ANCHOR_ARROW_SIDE_LEFT, ANCHOR_ARROW_SIDE_RIGHT].includes(value);
-        },
-      },
-      src: {
-        type: String,
-        default: '',
-      },
-      alt: {
-        type: String,
-        default: '',
-      },
-      // Inject function to handle file uploads
-      handleFileUpload: {
-        type: Function,
-        default: () => {},
-      },
-      // Inject function to get file upload object
-      getFileUpload: {
-        type: Function,
-        default: () => {},
-      },
-      imagePreset: {
-        type: String,
-        default: '',
-      },
-    },
-    data() {
-      return {
-        uploadingId: '',
-        altText: '',
-      };
-    },
-    computed: {
-      anchorArrowClasses() {
-        const classes = ['anchor-arrow'];
-
-        if (this.anchorArrowSide === ANCHOR_ARROW_SIDE_RIGHT) {
-          classes.push('anchor-arrow-right');
-        }
-
-        return classes;
-      },
-      acceptedMimetypes() {
-        return FormatPresetsMap.get(this.imagePreset).associated_mimetypes.join(',');
-      },
-      acceptedFormats() {
-        // TODO: Properly handle lists for i18n
-        return FormatPresetsMap.get(this.imagePreset).allowed_formats.join(', ');
-      },
-      file() {
-        return this.getFileUpload(this.uploadingId);
-      },
-      fileSrc() {
-        return (this.file && this.file.url) || this.src;
-      },
-      hasError() {
-        return this.file && this.file.error;
-      },
-      uploading() {
-        return this.file && this.file.uploading;
-      },
-    },
-    mounted() {
-      this.altText = this.alt;
-      this.$el.focus();
-    },
-    methods: {
-      onInsertClick() {
-        if (this.fileSrc) {
-          this.$emit('insert', {
-            src: this.fileSrc,
-            alt: this.altText || '',
-          });
-        }
-      },
-      // @public
-      handleFiles(files) {
-        this.handleFileUpload(files).then(files => {
-          const fileUpload = files[0];
-          if (fileUpload && fileUpload.id) {
-            this.uploadingId = fileUpload.id;
-          }
-        });
-      },
-      cancelPendingFile() {
-        this.uploadingId = '';
-      },
-      openFileDialog() {
-        this.$refs.fileUpload.click();
-      },
-    },
-    $trs: {
-      imageHeader: 'Upload image',
-      btnLabelInsert: 'Insert',
-      btnLabelCancel: 'Cancel',
-      altTextLabel: 'Image description',
-      altTextHint:
-        'The image description is necessary to enable visually impaired learners to answer questions, and it also displays when the image fails to load',
-      defaultDropText: 'Drag and drop an image here, or upload manually',
-      selectFileButton: 'Select file',
-      acceptsText: 'Supported file types: {acceptedFormats}',
-      currentImageDefaultText: 'Current image',
-      selectFile: 'Select file',
-    },
-  };
-
-</script>
-
-
-<style lang="scss" scoped>
-
-  .images-menu {
-    position: relative;
-    z-index: 1;
-    max-width: 500px;
-    // to make positioning from a parent element easier - this
-    // makes sure that the tip of the anchor will be considered
-    // as top right/left corner
-    margin-top: 16px;
-    margin-right: -30px;
-    margin-left: -30px;
-  }
-
-  .anchor-arrow {
-    position: absolute;
-    top: -40px;
-    left: 10px;
-    z-index: 3;
-    width: 40px;
-    height: 40px;
-    overflow: hidden;
-
-    &::after {
-      position: absolute;
-      top: 28px;
-      right: 0;
-      left: 6px;
-      width: 25px;
-      height: 25px;
-      content: '';
-      background: #ffffff;
-      box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.3);
-      transform: rotate(45deg);
-    }
-
-    &.anchor-arrow-right {
-      right: 10px;
-      left: initial;
-    }
-  }
-
-  .v-card__text {
-    position: relative;
-  }
-
-  .upload-area {
-    border: 1px solid var(--v-grey-lighten4) !important;
-  }
-
-  .image-preview {
-    max-width: 100%;
-  }
-
-</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor.vue b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor.vue
deleted file mode 100644
index 82ca995bd3..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor.vue
+++ /dev/null
@@ -1,907 +0,0 @@
-<template>
-
-  <div
-    style="position: relative"
-    class="wrapper"
-    :class="{ highlight, uploading: Boolean(uploadingChecksum) }"
-    @dragenter="highlight = true"
-    @dragover="highlight = true"
-    @dragleave="highlight = false"
-    @drop="highlight = false"
-  >
-    <div
-      ref="editor"
-      class="editor"
-    ></div>
-
-    <FormulasMenu
-      v-if="formulasMenu.isOpen"
-      v-model="formulasMenu.formula"
-      v-click-outside="onClick"
-      class="formulas-menu"
-      :anchorArrowSide="formulasMenu.anchorArrowSide"
-      :mathQuill="mathQuill"
-      style="position: absolute"
-      :style="formulasMenu.style"
-      @insert="onFormulasMenuInsert"
-      @cancel="onFormulasMenuCancel"
-    />
-    <ImagesMenu
-      v-if="imagesMenu.isOpen"
-      ref="imagesMenu"
-      v-click-outside="onClick"
-      class="images-menu"
-      :anchorArrowSide="imagesMenu.anchorArrowSide"
-      style="position: absolute"
-      :style="imagesMenu.style"
-      :src="imagesMenu.src"
-      :alt="imagesMenu.alt"
-      :handleFileUpload="handleFileUpload"
-      :getFileUpload="getFileUpload"
-      :imagePreset="imagePreset"
-      @insert="insertImageToEditor"
-      @cancel="onImagesMenuCancel"
-    />
-  </div>
-
-</template>
-
-
-<script>
-
-  /**
-   * * * * * * * * * * * * * * * * * * *
-   * See docs/markdown_editor_viewer.md
-   * * * * * * * * * * * * * * * * * * *
-   */
-
-  import '../mathquill/mathquill.js';
-  import 'codemirror/lib/codemirror.css';
-  import '@toast-ui/editor/dist/toastui-editor.css';
-
-  import Editor from '@toast-ui/editor';
-
-  import imageUpload, { paramsToImageFieldHTML } from '../plugins/image-upload';
-  import formulas from '../plugins/formulas';
-  import minimize from '../plugins/minimize';
-  import formulaMdToHtml from '../plugins/formulas/formula-md-to-html';
-  import imagesMdToHtml from '../plugins/image-upload/image-md-to-html';
-
-  import { CLASS_MATH_FIELD_ACTIVE } from '../constants';
-  import { registerMarkdownFormulaField } from '../plugins/formulas/MarkdownFormulaField';
-  import { registerMarkdownImageField } from '../plugins/image-upload/MarkdownImageField';
-  import { clearNodeFormat, generateCustomConverter, getExtensionMenuPosition } from './utils';
-  import FormulasMenu from './FormulasMenu/FormulasMenu';
-  import ImagesMenu from './ImagesMenu/ImagesMenu';
-  import ClickOutside from 'shared/directives/click-outside';
-
-  registerMarkdownFormulaField();
-  registerMarkdownImageField();
-
-  const AnalyticsActionMap = {
-    Bold: 'Bold',
-    Italic: 'Italicize',
-  };
-
-  export default {
-    name: 'MarkdownEditor',
-    components: {
-      FormulasMenu,
-      ImagesMenu,
-    },
-    directives: {
-      ClickOutside,
-    },
-    model: {
-      prop: 'markdown',
-      event: 'update',
-    },
-    props: {
-      markdown: {
-        type: String,
-        default: '',
-      },
-      // Inject function to handle file uploads
-      handleFileUpload: {
-        type: Function,
-        default: () => {},
-      },
-      // Inject function to get file upload object
-      getFileUpload: {
-        type: Function,
-        default: () => {},
-      },
-      imagePreset: {
-        type: String,
-        default: '',
-      },
-      analyticsLabel: {
-        type: String,
-        default: null,
-      },
-    },
-    data() {
-      return {
-        editor: null,
-        highlight: false,
-        formulasMenu: {
-          isOpen: false,
-          formula: '',
-          anchorArrowSide: null,
-          style: {
-            top: 'initial',
-            left: 'initial',
-            right: 'initial',
-          },
-        },
-        imagesMenu: {
-          isOpen: false,
-          anchorArrowSide: null,
-          src: '',
-          alt: '',
-          style: {
-            top: 'initial',
-            left: 'initial',
-            right: 'initial',
-          },
-        },
-        activeImageField: null,
-        uploadingChecksum: '',
-        mathQuill: null,
-        keyDownEventListener: null,
-        clickEventListener: null,
-        editImageEventListener: null,
-      };
-    },
-    watch: {
-      markdown(newMd, previousMd) {
-        if (newMd !== previousMd && newMd !== this.editor.getMarkdown()) {
-          this.editor.setMarkdown(newMd);
-          this.initImageFields();
-        }
-      },
-    },
-    mounted() {
-      this.mathQuill = MathQuill.getInterface(2);
-
-      const CustomConvertor = generateCustomConverter(this.$refs.editor);
-
-      const createBoldButton = () => {
-        {
-          const button = document.createElement('button');
-          button.className = 'tui-bold tui-toolbar-icons';
-          return button;
-        }
-      };
-      const createItalicButton = () => {
-        {
-          const button = document.createElement('button');
-          button.className = 'tui-italic tui-toolbar-icons';
-          return button;
-        }
-      };
-      const options = {
-        el: this.$refs.editor,
-        minHeight: '240px',
-        height: 'auto',
-        initialValue: this.markdown,
-        initialEditType: 'wysiwyg',
-        usageStatistics: false,
-        toolbarItems: [
-          {
-            type: 'button',
-            options: {
-              el: createBoldButton(),
-              command: 'Bold',
-              tooltip: this.$tr('bold'),
-            },
-          },
-          {
-            type: 'button',
-            options: {
-              el: createItalicButton(),
-              command: 'Italic',
-              tooltip: this.$tr('italic'),
-            },
-          },
-        ],
-        hideModeSwitch: true,
-        plugins: [
-          [
-            imageUpload,
-            {
-              onImageDrop: this.onImageDrop,
-              onImageUploadToolbarBtnClick: this.onImageUploadToolbarBtnClick,
-              toolbarBtnTooltip: this.$tr('image'),
-            },
-          ],
-          [
-            formulas,
-            {
-              onFormulasToolbarBtnClick: this.onFormulasToolbarBtnClick,
-              toolbarBtnTooltip: this.$tr('formulas'),
-            },
-          ],
-          [
-            minimize,
-            {
-              onMinimizeToolbarBtnClick: this.onMinimizeToolbarBtnClick,
-              toolbarBtnTooltip: this.$tr('minimize'),
-            },
-          ],
-        ],
-        customConvertor: CustomConvertor,
-        // https://github.com/nhn/tui.editor/blob/master/apps/editor/docs/custom-html-renderer.md
-        customHTMLRenderer: {
-          text(node) {
-            let content = formulaMdToHtml(node.literal, true);
-            content = imagesMdToHtml(content, true);
-            return {
-              type: 'html',
-              content,
-            };
-          },
-        },
-      };
-
-      this.editor = new Editor(options);
-
-      this.editor.focus();
-
-      this.editor.on('change', () => {
-        this.$emit('update', this.editor.getMarkdown());
-      });
-
-      // Track analytics events for some commands
-      this.editor.on('command', command => {
-        const action = AnalyticsActionMap[command];
-        if (action) {
-          this.trackAnalyticsEvent(action);
-          // Some inconsistencies with these events in GA
-          this.trackAnalyticsEvent('Click', command);
-        }
-      });
-
-      this.initMathFields();
-      this.initImageFields();
-
-      this.editor.getSquire().addEventListener('willPaste', this.onPaste);
-      this.keyDownEventListener = this.$el.addEventListener('keydown', this.onKeyDown, true);
-      this.clickEventListener = this.$el.addEventListener('click', this.onClick);
-      this.editImageEventListener = this.$el.addEventListener('editImage', this.handleEditImage);
-    },
-    activated() {
-      this.editor.focus();
-    },
-    beforeDestroy() {
-      this.editor.getSquire().removeEventListener('willPaste', this.onPaste);
-      this.$el.removeEventListener(this.keyDownEventListener, this.onKeyDown, true);
-      this.$el.removeEventListener(this.clickEventListener, this.onClick);
-      this.$el.removeEventListener(this.editImageEventListener, this.handleEditImage);
-    },
-    methods: {
-      /**
-       * Handle Squire keydown events - TUI WYSIWYG editor is built
-       * on top of Squire (https://github.com/neilj/Squire)
-       * and provides its instance including API methods
-       *
-       * TUI's `addKeyEventHandler` is not sufficient because they
-       * internally override some of the actions that need to be
-       * customized from here => needs to be set on Squire level
-       * Modifying default Squire key events is not documented but there's
-       * a recommended solution here https://github.com/neilj/Squire/issues/107
-       */
-      onKeyDown(event) {
-        // Apply squire selection workarounds
-        this.fixSquireSelectionOnKeyDown(event);
-
-        // ESC should close menus if any are open
-        // or close the editor if none are open
-        if (event.key === 'Escape') {
-          event.stopImmediatePropagation();
-          if (this.formulasMenu.isOpen) {
-            this.resetFormulasMenu();
-          } else if (this.imagesMenu.isOpen) {
-            this.resetImagesMenu();
-          } else {
-            this.onMinimizeToolbarBtnClick();
-          }
-        }
-
-        // Add keyboard shortcuts handlers for custom markdown
-        // editor toolbar buttons: image upload (ctrl+p),
-        // formulas (ctrl+f), minimize (ctrl+m)
-        // Needs to be done here because TUI editor currently
-        // doesn't support customizing shortcuts
-        // https://github.com/nhn/tui.editor/issues/281
-        if (event.ctrlKey === true && event.key === 'p') {
-          event.stopImmediatePropagation();
-          this.onImageUploadToolbarBtnClick();
-        }
-
-        if (event.ctrlKey === true && event.key === 'f') {
-          this.onFormulasToolbarBtnClick();
-        }
-
-        if (event.ctrlKey === true && event.key === 'm') {
-          this.onMinimizeToolbarBtnClick();
-        }
-
-        // Allow default keyboard shortcut handlers
-        // for supported actions: bold (ctrl+b), italics (ctrl+i),
-        // select all (ctrl+a), copy (ctrl+c),
-        // cut (ctrl+x), paste (ctrl+v)
-        // Disable all remaining default keyboard shortcuts.
-        if (event.ctrlKey === true && ['b', 'i', 'a', 'c', 'x', 'v', 'z'].includes(event.key)) {
-          return;
-        }
-
-        // Disable all remaining Ctrl key shortcuts
-        if (event.ctrlKey === true) {
-          event.preventDefault();
-          event.stopPropagation();
-        }
-      },
-      onPaste(event) {
-        const fragment = clearNodeFormat({
-          node: event.fragment,
-          ignore: ['b', 'i'],
-        });
-        event.fragment = fragment;
-      },
-      onImageDrop(file) {
-        this.activeImageComponent = null;
-        this.highlight = false;
-
-        const cursor = this.getCursor();
-        const position = getExtensionMenuPosition({
-          editorEl: this.$el,
-          targetX: cursor.x,
-          targetY: cursor.y + cursor.height,
-        });
-        this.resetImagesMenu();
-        this.openImagesMenu({ position });
-
-        // need to wait for the images menu component
-        this.$nextTick(() => {
-          this.$refs.imagesMenu.handleFiles([file]);
-        });
-      },
-      onImageUploadToolbarBtnClick() {
-        if (this.imagesMenu.isOpen === true) {
-          return;
-        }
-        this.activeImageField = null;
-
-        const cursor = this.getCursor();
-        const position = getExtensionMenuPosition({
-          editorEl: this.$el,
-          targetX: cursor.x,
-          targetY: cursor.y + cursor.height,
-        });
-        this.resetImagesMenu();
-        this.openImagesMenu({ position });
-      },
-      onFormulasToolbarBtnClick() {
-        if (this.formulasMenu.isOpen === true) {
-          return;
-        }
-
-        const cursor = this.getCursor();
-        const formulasMenuPosition = getExtensionMenuPosition({
-          editorEl: this.$el,
-          targetX: cursor.x,
-          targetY: cursor.y + cursor.height,
-        });
-
-        this.resetFormulasMenu();
-        this.openFormulasMenu({ position: formulasMenuPosition });
-      },
-      onMinimizeToolbarBtnClick() {
-        this.$emit('minimize');
-        // Make sure tooltip gets removed from screen
-        document.querySelectorAll('.tui-tooltip').forEach(tooltip => {
-          tooltip.style.display = 'none';
-        });
-      },
-      getCursor() {
-        return this.editor.getSquire().getCursorPosition();
-      },
-      fixSquireSelectionOnKeyDown(event) {
-        /**
-         *  On 'backspace' events, Squire doesn't behave consistently in both Chrome and FireFox,
-         *  particularly when dealing with custom elements or elements with `contenteditable=false`.
-         *
-         *  This function modifies the selection with the intention of correcting it before Squire
-         *  handles it in the usual way.
-         *
-         *  This is a tricky workaround, so please edit this function with care.
-         */
-
-        const squire = this.editor.getSquire();
-        const selection = squire.getSelection();
-
-        // Prevent Squire from deleting custom editor nodes when the cursor is left of one.
-        const isCustomNode = node => node && node.hasAttribute && node.hasAttribute('is');
-
-        const getElementAtRelativeOffset = (selection, offset) =>
-          selection &&
-          squire.getSelectionInfoByOffset(selection.endContainer, selection.endOffset + offset)
-            .element;
-
-        const getLeftwardElement = selection => getElementAtRelativeOffset(selection, -1);
-        const getRightwardElement = selection => getElementAtRelativeOffset(selection, 1);
-
-        const getCharacterAtRelativeOffset = (selection, relativeOffset) => {
-          const { element, offset } = squire.getSelectionInfoByOffset(
-            selection.startContainer,
-            selection.startOffset + relativeOffset,
-          );
-          return element.nodeType === document.TEXT_NODE && element.textContent[offset];
-        };
-
-        const spacerAndCustomElementAreLeftward = selection =>
-          selection &&
-          isCustomNode(getElementAtRelativeOffset(selection, -2)) &&
-          selection.startContainer.nodeType === document.TEXT_NODE &&
-          getCharacterAtRelativeOffset(selection, -1) &&
-          /^\s/.test(getCharacterAtRelativeOffset(selection, -1));
-
-        const spacerAndCustomElementAreRightward = selection =>
-          selection &&
-          isCustomNode(getElementAtRelativeOffset(selection, 2)) &&
-          selection.startContainer.nodeType === document.TEXT_NODE &&
-          getCharacterAtRelativeOffset(selection, 0) &&
-          /\s$/.test(getCharacterAtRelativeOffset(selection, 0));
-
-        const moveCursor = (selection, amount) => {
-          const element = getElementAtRelativeOffset(selection, amount);
-          selection.setStart(element, 0);
-          selection.setEnd(element, 0);
-          return selection;
-        };
-
-        const rightwardElement = getRightwardElement(selection);
-        const leftwardElement = getLeftwardElement(selection);
-
-        if (event.key === 'ArrowRight') {
-          if (isCustomNode(rightwardElement)) {
-            squire.setSelection(moveCursor(selection, 1));
-          } else if (spacerAndCustomElementAreRightward(selection)) {
-            squire.setSelection(moveCursor(selection, 2));
-          }
-        }
-        if (event.key === 'ArrowLeft') {
-          if (isCustomNode(leftwardElement)) {
-            squire.setSelection(moveCursor(selection, -1));
-          } else if (spacerAndCustomElementAreLeftward(selection)) {
-            squire.setSelection(moveCursor(selection, -2));
-          }
-        }
-        // make sure Squire doesn't get stuck with a broken cursor position when deleting
-        // elements with `contenteditable="false"` in FireFox
-        if (event.key === 'Backspace') {
-          if (selection.startContainer.tagName === 'DIV') {
-            // This happens normally when deleting from the beginning of an empty line...
-            if (isCustomNode(selection.startContainer.childNodes[selection.startOffset - 1])) {
-              // ...but on FireFox it also happens if you press 'backspace' and the leftward
-              // element has `contenteditable="false"` (which is necessary on FireFox for
-              // a different reason).  As a result, Squire.js gets stuck. The trick here is
-              // to fix its selection so it knows what to delete.
-              const fixedStartContainer =
-                selection.startContainer.childNodes[selection.startOffset - 1];
-              const fixedEndContainer = selection.endContainer.childNodes[selection.endOffset - 1];
-              if (fixedStartContainer && fixedEndContainer) {
-                selection.setStart(fixedStartContainer, 0);
-                selection.setEnd(fixedEndContainer, 1);
-                squire.setSelection(selection);
-              }
-            }
-          } else if (isCustomNode(leftwardElement)) {
-            // In general, if the cursor is to the right of a custom node and 'backspace'
-            // is pressed, add that node to the selection so that it will be deleted.
-            selection.setStart(leftwardElement, 0);
-            squire.setSelection(selection);
-          } else if (spacerAndCustomElementAreLeftward(selection)) {
-            // if there's a custom node and a spacer, delete them both
-            selection.setStart(getElementAtRelativeOffset(selection, -2), 0);
-            squire.setSelection(selection);
-          }
-        } else if (event.key === 'Delete') {
-          if (spacerAndCustomElementAreRightward(selection)) {
-            // if there's a custom node and a spacer, delete them both
-            selection.setEnd(getElementAtRelativeOffset(selection, 2).nextSibling, 1);
-            squire.setSelection(selection);
-          }
-        }
-        // the cursor will get stuck if it's inside of a non-contentEditable parent
-        if (!selection.startContainer.parentElement.isContentEditable) {
-          selection.setStart(selection.startContainer.parentElement, 0);
-        }
-        if (!selection.endContainer.parentElement.isContentEditable) {
-          selection.setEnd(selection.endContainer.parentElement, 0);
-        }
-        // if any part of a custom node is in the selection, include the whole thing
-        if (isCustomNode(selection.startContainer)) {
-          const previousSibling = selection.startContainer.previousSibling;
-          selection.setStart(previousSibling, previousSibling.length - 1);
-          squire.setSelection(selection);
-        }
-        if (isCustomNode(selection.endContainer)) {
-          selection.setEnd(selection.endContainer.nextSibling, 1);
-          squire.setSelection(selection);
-        }
-        // Important debugging tip... If the editor selection is broken,
-        // uncomment the following line to understand how it got that way:
-        // console.log("keypress", selection, event);
-      },
-      onClick(event) {
-        this.highlight = false;
-        const target = event.target;
-
-        let mathFieldEl = null;
-        if (target.getAttribute('is') === 'markdown-formula-field') {
-          mathFieldEl = target;
-        }
-        const clickedOnMathField = mathFieldEl !== null;
-        const clickedOnActiveMathField =
-          clickedOnMathField &&
-          mathFieldEl.classList &&
-          mathFieldEl.classList.contains(CLASS_MATH_FIELD_ACTIVE);
-        const clickedOnFormulasMenu =
-          (target.classList && target.classList.contains('formulas-menu')) ||
-          target.closest('.formulas-menu');
-        const clickedOnImagesMenu =
-          (target.classList && target.classList.contains('images-menu')) ||
-          target.closest('.images-menu');
-        const clickedOnEditorToolbarBtn =
-          target.classList && target.classList.contains('tui-toolbar-icons');
-
-        // skip markdown editor toolbar buttons clicks
-        // they have their own handlers defined
-        if (clickedOnEditorToolbarBtn) {
-          return;
-        }
-
-        // no need to do anything when the formulas menu clicked
-        if (clickedOnFormulasMenu) {
-          return;
-        }
-
-        // no need to do anything when an active math field clicked
-        if (clickedOnActiveMathField) {
-          return;
-        }
-
-        // no need to do anything when the images menu clicked
-        if (clickedOnImagesMenu) {
-          return;
-        }
-
-        // if clicked outside of open formulas menu
-        // and active math field then close the formulas
-        // menu and clear data related to its previous state
-        if (this.formulasMenu.isOpen) {
-          this.insertFormulaToEditor();
-          this.removeMathFieldActiveClass();
-          this.resetFormulasMenu();
-        }
-
-        // if clicked outside of open images menu close images
-        // menu and clear data related to its previous state
-        if (this.imagesMenu.isOpen) {
-          this.resetImagesMenu();
-        }
-
-        // no need to continue if regular text clicked
-        if (!clickedOnMathField) {
-          return;
-        }
-
-        // open formulas menu if a math field clicked
-        const formulasMenuPosition = getExtensionMenuPosition({
-          editorEl: this.$el,
-          targetX: mathFieldEl.getBoundingClientRect().left,
-          targetY: mathFieldEl.getBoundingClientRect().bottom,
-        });
-
-        // get current formula from the custom element's underlying vue instance
-        const formulasMenuFormula = mathFieldEl.getVueInstance().latex;
-
-        // just a little visual enhancement to make clear
-        // that the formula menu is linked to a math field
-        // element being edited
-        if (formulasMenuPosition.left !== null) {
-          formulasMenuPosition.left += 10;
-        }
-        if (formulasMenuPosition.right !== null) {
-          formulasMenuPosition.right -= 10;
-        }
-
-        mathFieldEl.classList.add(CLASS_MATH_FIELD_ACTIVE);
-
-        // `nextTick` - to be sure that the formula
-        // was reset before a new formula set
-        // important when a math field is being edited in open
-        // formulas menu and another math field is clicked
-        this.$nextTick(() => {
-          this.openFormulasMenu({
-            position: formulasMenuPosition,
-            formula: formulasMenuFormula,
-          });
-        });
-      },
-      onFormulasMenuInsert() {
-        this.insertFormulaToEditor();
-        const formula = this.formulasMenu.formula;
-
-        this.removeMathFieldActiveClass();
-        this.resetFormulasMenu();
-        this.editor.focus();
-
-        if (formula) {
-          this.trackAnalyticsEvent('Select formula', formula);
-        }
-
-        this.trackAnalyticsEvent('Add', 'Formula');
-      },
-      onFormulasMenuCancel() {
-        this.removeMathFieldActiveClass();
-        this.resetFormulasMenu();
-        this.editor.focus();
-      },
-      // Set `markdown-formula-field` components with `editing=true`.
-      initMathFields() {
-        this.$el.querySelectorAll('span[is="markdown-formula-field"]').forEach(el => {
-          el.editing = true;
-        });
-      },
-      findActiveMathField() {
-        return this.$el.getElementsByClassName(CLASS_MATH_FIELD_ACTIVE)[0] || null;
-      },
-      removeMathFieldActiveClass() {
-        const activeMathField = this.findActiveMathField();
-
-        if (activeMathField !== null) {
-          activeMathField.classList.remove(CLASS_MATH_FIELD_ACTIVE);
-        }
-      },
-      openFormulasMenu({ position, formula = null }) {
-        this.resetMenus();
-        const top = `${position.top}px`;
-
-        let left, right, anchorArrowSide;
-
-        if (position.left !== null) {
-          right = 'initial';
-          left = `${position.left}px`;
-          anchorArrowSide = this.$isRTL ? 'right' : 'left';
-        } else {
-          left = 'initial';
-          right = `${position.right}px`;
-          anchorArrowSide = this.$isRTL ? 'left' : 'right';
-        }
-
-        this.formulasMenu = {
-          isOpen: true,
-          formula: formula !== null ? formula : '',
-          anchorArrowSide,
-          style: {
-            top,
-            left,
-            right,
-          },
-        };
-
-        this.trackAnalyticsEvent('Open', 'Formula panel');
-      },
-      /**
-       * Insert formula from formulas menu to markdown editor.
-       * If there is an active math field, replace it by a new
-       * element with the updated formula. Otherwise insert a new
-       * element with the formula on a current cursor position.
-       */
-      insertFormulaToEditor() {
-        const formula = this.formulasMenu.formula;
-
-        if (!formula) {
-          return;
-        }
-
-        const formulaEl = document.createElement('span');
-        formulaEl.setAttribute('is', 'markdown-formula-field');
-        formulaEl.setAttribute('editing', true);
-        formulaEl.innerHTML = formula;
-        const formulaHTML = formulaEl.outerHTML;
-        const activeMathFieldEl = this.findActiveMathField();
-
-        if (activeMathFieldEl !== null) {
-          // setting `outerHTML` is the preferred way to reset a custom node
-          activeMathFieldEl.outerHTML = formulaHTML;
-        } else {
-          const squire = this.editor.getSquire();
-          squire.insertHTML(formulaHTML);
-        }
-      },
-      resetFormulasMenu() {
-        this.formulasMenu = {
-          isOpen: false,
-          formula: '',
-          anchorArrowSide: null,
-          style: {
-            top: 'initial',
-            left: 'initial',
-            right: 'initial',
-          },
-        };
-      },
-
-      /* IMAGE MENU */
-      handleEditImage(event) {
-        const { editorField, editEvent, image } = event.detail;
-        this.activeImageField = editorField;
-        const editorEl = this.$el;
-        const position = getExtensionMenuPosition({
-          editorEl,
-          targetX: editEvent.clientX,
-          targetY: editEvent.clientY,
-        });
-        this.openImagesMenu({
-          position,
-          alt: image.alt,
-          src: image.src,
-        });
-      },
-      // set `markdown-image-field` components with `editing=true`
-      initImageFields() {
-        this.$el.querySelectorAll('span[is="markdown-image-field"]').forEach(imageEl => {
-          imageEl.editing = true;
-        });
-      },
-      openImagesMenu({ position, src = '', alt = '' }) {
-        this.resetMenus();
-        const top = `${position.top}px`;
-
-        let left, right, anchorArrowSide;
-
-        if (position.left !== null) {
-          right = 'initial';
-          left = `${position.left}px`;
-          anchorArrowSide = this.$isRTL ? 'right' : 'left';
-        } else {
-          left = 'initial';
-          right = `${position.right}px`;
-          anchorArrowSide = this.$isRTL ? 'left' : 'right';
-        }
-
-        this.imagesMenu = {
-          isOpen: true,
-          anchorArrowSide,
-          src,
-          alt,
-          style: {
-            top,
-            left,
-            right,
-          },
-        };
-        this.trackAnalyticsEvent('Open', 'Image modal');
-      },
-      /**
-       * Insert image from images menu to markdown editor.
-       * Emit an uploaded event to let parent process files
-       * properly
-       */
-      insertImageToEditor(imageData) {
-        const mdImageFieldHTML = paramsToImageFieldHTML(imageData);
-        if (!imageData) {
-          return;
-        }
-        if (this.activeImageField) {
-          this.activeImageField.outerHTML = mdImageFieldHTML;
-        } else {
-          const template = document.createElement('template');
-          template.innerHTML = mdImageFieldHTML;
-          const mdImageEl = template.content.firstElementChild;
-          mdImageEl.setAttribute('editing', true);
-
-          this.editor.getSquire().insertHTML(mdImageEl.outerHTML);
-
-          this.initImageFields();
-        }
-        this.resetImagesMenu();
-        this.trackAnalyticsEvent('Add', 'Image');
-      },
-      onImagesMenuCancel() {
-        this.resetImagesMenu();
-        this.editor.focus();
-      },
-      resetImagesMenu() {
-        this.imagesMenu = {
-          isOpen: false,
-          anchorArrowSide: null,
-          src: '',
-          alt: '',
-          style: {
-            top: 'initial',
-            left: 'initial',
-            right: 'initial',
-          },
-        };
-      },
-      resetMenus() {
-        this.resetImagesMenu();
-        this.resetFormulasMenu();
-      },
-      trackAnalyticsEvent(name, eventLabel = null) {
-        eventLabel = eventLabel || this.analyticsLabel;
-
-        if (eventLabel) {
-          this.$analytics.trackAction('exercise_editor', name, {
-            eventLabel,
-          });
-        }
-      },
-    },
-    $trs: {
-      bold: 'Bold (Ctrl+B)',
-      italic: 'Italic (Ctrl+I)',
-      image: 'Insert image (Ctrl+P)',
-      formulas: 'Insert formula (Ctrl+F)',
-      minimize: 'Minimize (Ctrl+M)',
-    },
-  };
-
-</script>
-
-
-<style lang="scss" scoped>
-
-  @import '../mathquill/mathquill.css';
-
-  .editor {
-    margin: 1px;
-  }
-
-  .uploading {
-    cursor: progress;
-  }
-
-  .formulas-menu,
-  .images-menu {
-    z-index: 2;
-  }
-
-  .wrapper {
-    padding: 1px;
-    border: 4px solid transparent;
-
-    &.highlight {
-      border-color: var(--v-primary-base);
-    }
-  }
-
-  // TODO (when updating to new frontend files structure)
-  // find better location for following styles that
-  // are supposed to be common to all editable fields
-  ::v-deep .mq-editable-field {
-    border: 0;
-
-    .mq-to,
-    .mq-from,
-    .mq-sup,
-    .mq-sup-inner,
-    .mq-sub,
-    .mq-numerator,
-    .mq-denominator {
-      padding-right: 1px;
-      padding-left: 1px;
-      border: 1px solid gray;
-    }
-
-    .mq-int .mq-sup {
-      border: 0;
-    }
-  }
-
-</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/__mocks__/MarkdownEditor.vue b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/__mocks__/MarkdownEditor.vue
deleted file mode 100644
index 1c1f563e8d..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/__mocks__/MarkdownEditor.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-
-  <div>
-    <div ref="editor">
-      {{ value }}
-    </div>
-  </div>
-
-</template>
-
-
-<script>
-
-  export default {
-    name: 'MarkdownEditor',
-    model: {
-      prop: 'value',
-      event: 'update',
-    },
-    props: {
-      value: {
-        type: String,
-        default: '',
-      },
-    },
-  };
-
-</script>
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/utils.js b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/utils.js
deleted file mode 100644
index f5ce62e98e..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/utils.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import * as Showdown from 'showdown';
-import Editor from '@toast-ui/editor';
-import { stripHtml } from 'string-strip-html';
-
-import imagesHtmlToMd from '../plugins/image-upload/image-html-to-md';
-import formulaHtmlToMd from '../plugins/formulas/formula-html-to-md';
-
-/**
- * Clear DOM node by keeping only its text content.
- *
- * @param {Node} node
- * @param {Array} ignore An array of selectors. All nodes
- *                       corresponding to these selectors
- *                       won't be changed.
- */
-export const clearNodeFormat = ({ node, ignore = [] }) => {
-  let clonedNode = node.cloneNode(true);
-
-  if (clonedNode.hasChildNodes()) {
-    clonedNode.querySelectorAll('*').forEach(childNode => {
-      childNode.parentNode.replaceChild(clearNodeFormat({ node: childNode, ignore }), childNode);
-    });
-  }
-
-  if (
-    clonedNode.nodeType === clonedNode.ELEMENT_NODE &&
-    !ignore.some(selector => clonedNode.matches(selector))
-  ) {
-    const textNode = document.createTextNode(clonedNode.innerHTML);
-
-    if (clonedNode.parentNode) {
-      clonedNode.parentNode.replaceChild(textNode, clonedNode);
-    } else {
-      // use `document.createDocumentFragment` insted of `new DocumentFragment
-      // otherwise Jest test for this helper would fail
-      // https://github.com/jsdom/jsdom/issues/2274
-      clonedNode = document.createDocumentFragment();
-      clonedNode.appendChild(textNode);
-    }
-  }
-
-  return clonedNode;
-};
-
-/**
- * Calculate the formulas menu position within markdown editor.
- * If the formulas menu is to be shown in the second half (horizontally)
- * of the editor, it's right corner should be clipped to the target
- * => this position of the right corner is returned as `right`.
- * Otherwise left corner is used to clip the menu and position
- * of the left corner is return as `left`.
- * Position is returned relative to editor element.
- *
- * @param {Object} editor Markdown editor element
- * @param {Number} targetX Viewport X position of a point in editor
- *                         to which formulas menu should be clipped to
- * @param {Number} targetY Viewport Y position of a point in editor
- *                         to which formulas menu should be clipped to
- */
-export const getExtensionMenuPosition = ({ editorEl, targetX, targetY }) => {
-  const editorWidth = editorEl.getBoundingClientRect().width;
-  const editorTop = editorEl.getBoundingClientRect().top;
-  const editorLeft = editorEl.getBoundingClientRect().left;
-  const editorRight = editorEl.getBoundingClientRect().right;
-  const editorMiddle = editorLeft + editorWidth / 2;
-
-  const menuTop = targetY - editorTop;
-
-  let menuLeft = null;
-  let menuRight = null;
-
-  if (targetX < editorMiddle) {
-    menuLeft = targetX - editorLeft;
-  } else {
-    menuRight = editorRight - targetX;
-  }
-
-  return {
-    top: menuTop,
-    left: menuLeft,
-    right: menuRight,
-  };
-};
-
-export const generateCustomConverter = el => {
-  // This is currently the only way of inheriting and adjusting
-  // default TUI's convertor methods
-  // see https://github.com/nhn/tui.editor/issues/615
-  const tmpEditor = new Editor({ el });
-  const showdown = new Showdown.Converter();
-  const Convertor = tmpEditor.convertor.constructor;
-  class CustomConvertor extends Convertor {
-    toMarkdown(content) {
-      content = showdown.makeMarkdown(content);
-      content = imagesHtmlToMd(content);
-      content = formulaHtmlToMd(content);
-      // TUI.editor sprinkles in extra `<br>` tags that Kolibri renders literally
-      // When showdown has already added linebreaks to render these in markdown
-      // so we just remove these here.
-      content = content.replaceAll('<br>', '');
-
-      // any copy pasted rich text that renders as HTML but does not get converted
-      // will linger here, so remove it as Kolibri will render it literally also.
-      content = stripHtml(content).result;
-      return content;
-    }
-    toHTML(content) {
-      // Kolibri and showdown assume double newlines for a single line break,
-      // wheras TUI.editor prefers single newline characters.
-      content = content.replaceAll('\n\n', '\n');
-      content = super.toHTML(content);
-      return content;
-    }
-  }
-  tmpEditor.remove();
-  return CustomConvertor;
-};
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer.vue b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer.vue
deleted file mode 100644
index 66aed89bf1..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-
-  <div class="markdown-viewer notranslate">
-    <div ref="viewer"></div>
-  </div>
-
-</template>
-
-
-<script>
-
-  /**
-   * * * * * * * * * * * * * * * * * * *
-   * See docs/markdown_editor_viewer.md
-   * * * * * * * * * * * * * * * * * * *
-   */
-
-  import '@toast-ui/editor/dist/toastui-editor-viewer.css';
-  import Viewer from '@toast-ui/editor/dist/toastui-editor-viewer';
-
-  import '../mathquill/mathquill.js';
-  import { CLASS_MATH_FIELD } from '../constants';
-  import formulaMdToHtml from '../plugins/formulas/formula-md-to-html.js';
-  import imagesMdToHtml from '../plugins/image-upload/image-md-to-html.js';
-
-  export default {
-    name: 'MarkdownViewer',
-    props: {
-      markdown: {
-        type: String,
-        default: '',
-      },
-    },
-    data() {
-      return {
-        viewer: null,
-        mathQuill: null,
-      };
-    },
-    watch: {
-      markdown(newMd, previousMd) {
-        if (newMd !== previousMd) {
-          this.viewer.setMarkdown(newMd);
-          this.initStaticMathFields();
-        }
-      },
-    },
-    mounted() {
-      this.mathQuill = MathQuill.getInterface(2);
-
-      this.viewer = new Viewer({
-        el: this.$refs.viewer,
-        height: 'auto',
-        initialValue: this.markdown,
-        customHTMLRenderer: {
-          text(node) {
-            let content = imagesMdToHtml(node.literal);
-            content = formulaMdToHtml(content);
-            return {
-              type: 'html',
-              content,
-            };
-          },
-        },
-      });
-
-      this.initStaticMathFields();
-    },
-    methods: {
-      initStaticMathFields() {
-        const mathFieldEls = this.$el.getElementsByClassName(CLASS_MATH_FIELD);
-        for (const mathFieldEl of mathFieldEls) {
-          this.mathQuill.StaticMath(mathFieldEl);
-        }
-      },
-    },
-  };
-
-</script>
-
-
-<style lang="scss" scoped>
-
-  .markdown-viewer {
-    max-width: calc(100% - 2em);
-  }
-
-</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownViewer/__mocks__/MarkdownViewer.vue b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownViewer/__mocks__/MarkdownViewer.vue
deleted file mode 100644
index 41de8fcef9..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownViewer/__mocks__/MarkdownViewer.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-
-  <div>
-    <div>
-      {{ markdown }}
-    </div>
-  </div>
-
-</template>
-
-
-<script>
-
-  export default {
-    name: 'MarkdownViewer',
-    props: {
-      markdown: {
-        type: String,
-        default: '',
-      },
-    },
-  };
-
-</script>
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/__tests__/plugins/formulas/formula-html-to-md.spec.js b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/__tests__/plugins/formulas/formula-html-to-md.spec.js
deleted file mode 100644
index 2b91c6b1b1..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/__tests__/plugins/formulas/formula-html-to-md.spec.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import formulaHtmlToMd from '../../../plugins/formulas/formula-html-to-md';
-
-describe('MarkdownEditor - extensions - formulas', () => {
-  describe('formulaHtmlToMd', () => {
-    it('converts all elements with `is="markdown-formula-field"` to markdown', () => {
-      const input =
-        'Please solve following equation: <span is="markdown-formula-field">3x+5y+2</span>, <span is="markdown-formula-field">5x+8y+3</span>.';
-
-      expect(formulaHtmlToMd(input)).toBe(
-        'Please solve following equation: $$3x+5y+2$$, $$5x+8y+3$$.',
-      );
-    });
-
-    it('converts a markdown-formula element with extra attributes', () => {
-      const input = `
-                <span is="markdown-formula-field" editing="true" contenteditable="false">
-                  {a}^{b}
-                </span> Have fun!`;
-
-      expect(formulaHtmlToMd(input)).toBe('$${a}^{b}$$ Have fun!');
-    });
-  });
-});
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/__tests__/plugins/formulas/formula-md-to-html.spec.js b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/__tests__/plugins/formulas/formula-md-to-html.spec.js
deleted file mode 100644
index b601121e56..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/__tests__/plugins/formulas/formula-md-to-html.spec.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import formulaMdToHtml from '../../../plugins/formulas/formula-md-to-html';
-
-describe('formulaMdToHtml', () => {
-  it('converts formulas markdown to html', () => {
-    const input = 'Please solve following equation: $$3x+5y+2$$, $$5x+8y+3$$.';
-
-    expect(formulaMdToHtml(input)).toBe(
-      'Please solve following equation: <span is="markdown-formula-field">3x+5y+2</span>, <span is="markdown-formula-field">5x+8y+3</span>.',
-    );
-  });
-});
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/__tests__/plugins/formulas/markdownFormulaField.spec.js b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/__tests__/plugins/formulas/markdownFormulaField.spec.js
deleted file mode 100644
index 44a6956bfe..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/__tests__/plugins/formulas/markdownFormulaField.spec.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { registerMarkdownFormulaField } from 'shared/views/MarkdownEditor/plugins/formulas/MarkdownFormulaField';
-
-// we need to mock the component's style import for the element to successfully register in jsdom
-jest.mock('./style.css', () => '');
-
-let formulaEl;
-
-describe('MarkdownFormulaField custom element', () => {
-  beforeAll(() => {
-    document.body.innerHTML = `
-        <span is="markdown-formula-field">x^y</span>
-      `;
-    formulaEl = document.querySelector('span[is="markdown-formula-field"]');
-    registerMarkdownFormulaField();
-  });
-
-  test('getting formula latex from the custom element', async () => {
-    await window.customElements.whenDefined('markdown-formula-field');
-    expect(formulaEl.getVueInstance().latex).toBe('x^y');
-  });
-
-  it('renders some MathQuill markup in a shadowRoot', async () => {
-    await window.customElements.whenDefined('markdown-formula-field');
-    const shadowRoot = formulaEl.shadowRoot;
-    expect(shadowRoot).toBeTruthy();
-    const varEls = shadowRoot.querySelectorAll('var');
-    expect(varEls[0].innerHTML).toBe('x');
-    expect(varEls[1].innerHTML).toBe('y');
-  });
-
-  it('sets `contenteditable=false` on its host element', async () => {
-    await window.customElements.whenDefined('markdown-formula-field');
-    expect(formulaEl).toHaveAttribute('contenteditable', 'false');
-  });
-});
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/__tests__/plugins/image-upload/image-html-to-md.spec.js b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/__tests__/plugins/image-upload/image-html-to-md.spec.js
deleted file mode 100644
index d6d2f9c224..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/__tests__/plugins/image-upload/image-html-to-md.spec.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import imageHtmlToMd from '../../../plugins/image-upload/image-html-to-md';
-
-describe('imageHtmlToMd', () => {
-  it('converts images html to markdown', () => {
-    const input = `
-      First image: <span is='markdown-image-field'>
-        ![](\${☣ CONTENTSTORAGE}/checksum.ext =100x200)
-      </span>
-      Second image: <span is='markdown-image-field'>
-        ![Second image](\${☣ CONTENTSTORAGE}/94ffaf.png)
-      </span>`;
-
-    expect(imageHtmlToMd(input)).toBe(
-      `First image: ![](\${☣ CONTENTSTORAGE}/checksum.ext =100x200)
-      Second image: ![Second image](\${☣ CONTENTSTORAGE}/94ffaf.png)`,
-    );
-  });
-});
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/__tests__/plugins/image-upload/image-md-to-html.spec.js b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/__tests__/plugins/image-upload/image-md-to-html.spec.js
deleted file mode 100644
index f06e1e485f..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/__tests__/plugins/image-upload/image-md-to-html.spec.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import imageMdToHtml from '../../../plugins/image-upload/image-md-to-html';
-
-describe('imageMdToHtml', () => {
-  it('converts images markdown to html', () => {
-    const input = `
-      First image: ![](\${☣ CONTENTSTORAGE}/checksum.ext =100x200)
-      Second image: ![Second image](\${☣ CONTENTSTORAGE}/94ffaf.png)
-    `;
-
-    expect(imageMdToHtml(input)).toBe(`
-      First image: <span is='markdown-image-field'>![](\${☣ CONTENTSTORAGE}/checksum.ext =100x200)</span>
-      Second image: <span is='markdown-image-field'>![Second image](\${☣ CONTENTSTORAGE}/94ffaf.png)</span>
-    `);
-  });
-  it('handles duplicate images', () => {
-    const input = `
-      First image: ![](\${☣ CONTENTSTORAGE}/checksum.ext =100x200)
-      First image, again: ![](\${☣ CONTENTSTORAGE}/checksum.ext =100x200)
-    `;
-
-    expect(imageMdToHtml(input)).toBe(`
-      First image: <span is='markdown-image-field'>![](\${☣ CONTENTSTORAGE}/checksum.ext =100x200)</span>
-      First image, again: <span is='markdown-image-field'>![](\${☣ CONTENTSTORAGE}/checksum.ext =100x200)</span>
-    `);
-  });
-});
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/__tests__/plugins/image-upload/markdownImageField.spec.js b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/__tests__/plugins/image-upload/markdownImageField.spec.js
deleted file mode 100644
index b831fa362c..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/__tests__/plugins/image-upload/markdownImageField.spec.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { nextTick } from 'vue';
-import { registerMarkdownImageField } from 'shared/views/MarkdownEditor/plugins/image-upload/MarkdownImageField';
-
-// we need to mock the component's style import for the element to successfully register in jsdom
-jest.mock('./style.css', () => '');
-
-let imageEl;
-const imageMd = '![](${☣ CONTENTSTORAGE}/checksum.jpg =100x200)';
-
-describe('MarkdownImageField custom element', () => {
-  beforeAll(() => {
-    document.body.innerHTML = `
-        <span is="markdown-image-field">${imageMd}</span>
-      `;
-    imageEl = document.querySelector('span[is="markdown-image-field"]');
-    registerMarkdownImageField();
-  });
-
-  test('renders some image markdown as an `img` element', async () => {
-    await window.customElements.whenDefined('markdown-image-field');
-    const innerImgEl = imageEl.shadowRoot.querySelector('img');
-    expect(innerImgEl).toHaveAttribute('src', '/content/storage/c/h/checksum.jpg');
-
-    expect(innerImgEl).toHaveAttribute('width', '100');
-  });
-
-  it('can update its markdown upon resizing', async () => {
-    await window.customElements.whenDefined('markdown-image-field');
-    const imageVueComponent = imageEl.getVueInstance();
-    imageVueComponent.image.width = 5000000;
-    imageVueComponent.image.height = 1;
-
-    const expectedMd = '![](${☣ CONTENTSTORAGE}/checksum.jpg =5000000x1)';
-    imageVueComponent.exportParamsToMarkdown();
-
-    await nextTick();
-    await nextTick(); // wait another tick for prop to update
-
-    expect(imageEl.innerHTML).toBe(expectedMd);
-    expect(imageVueComponent.markdown).toBe(expectedMd);
-  });
-});
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/__tests__/utils.spec.js b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/__tests__/utils.spec.js
deleted file mode 100644
index 19eac02c33..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/__tests__/utils.spec.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import { clearNodeFormat, generateCustomConverter } from '../MarkdownEditor/utils';
-
-const htmlStringToFragment = htmlString => {
-  const template = document.createElement('template');
-  template.innerHTML = htmlString;
-
-  return template.content;
-};
-
-const fragmentToHtmlString = fragment => {
-  let htmlString = '';
-
-  fragment.childNodes.forEach(childNode => {
-    if (childNode.nodeType === childNode.TEXT_NODE) {
-      htmlString += childNode.textContent;
-    } else {
-      htmlString += childNode.outerHTML;
-    }
-  });
-
-  return htmlString;
-};
-
-describe('clearNodeFormat', () => {
-  it('clears all tags by default', () => {
-    const fragment = htmlStringToFragment(
-      '<i>Wh</i>at <b>co<i>lo</i>r is </b>th<i>e <b>sky</b></i>',
-    );
-
-    const clearedFragment = clearNodeFormat({ node: fragment });
-
-    expect(fragmentToHtmlString(clearedFragment)).toBe('What color is the sky');
-  });
-
-  it('does not clear format that should be ignored - tag selector', () => {
-    const fragment = htmlStringToFragment(
-      '<i>Wh</i>at <b>co<i>lo</i>r is </b>th<i>e <b>sky</b></i>',
-    );
-    const ignore = ['b'];
-
-    const clearedFragment = clearNodeFormat({ node: fragment, ignore });
-
-    expect(fragmentToHtmlString(clearedFragment)).toBe('What <b>color is </b>the <b>sky</b>');
-  });
-
-  it('does not clear format that should be ignored - class selector', () => {
-    const fragment = htmlStringToFragment(
-      '<i>Wh</i>at <b>co<i class="keep">lo</i>r is </b>th<i class="keep">e <b>sky</b></i>',
-    );
-    const ignore = ['.keep'];
-
-    const clearedFragment = clearNodeFormat({ node: fragment, ignore });
-
-    expect(fragmentToHtmlString(clearedFragment)).toBe(
-      'What co<i class="keep">lo</i>r is th<i class="keep">e sky</i>',
-    );
-  });
-});
-
-describe('markdown conversion', () => {
-  let documentCreateRange;
-
-  beforeAll(() => {
-    documentCreateRange = document.createRange;
-    document.createRange = () => {
-      const range = new Range();
-
-      range.getBoundingClientRect = jest.fn();
-
-      range.getClientRects = () => {
-        return {
-          item: () => null,
-          length: 0,
-          [Symbol.iterator]: jest.fn(),
-        };
-      };
-
-      return range;
-    };
-  });
-
-  afterAll(() => {
-    document.createRange = documentCreateRange;
-  });
-
-  it('converts image tags to markdown without escaping them', () => {
-    const el = document.createElement('div');
-    const CustomConvertor = generateCustomConverter(el);
-    const converter = new CustomConvertor();
-    const html =
-      '<span is="markdown-image-field" vce-ready="" contenteditable="false" class="markdown-field-753aa86a-8159-403b-8b1c-d2b8f9504408 markdown-field-34843d46-79b8-40b4-866c-b83dc8916a47" editing="true" markdown="![](${☣ CONTENTSTORAGE}/bc1c5a86e1e46f20a6b4ee2c1bb6d6ff.png =485.453125x394)">![](${☣ CONTENTSTORAGE}/bc1c5a86e1e46f20a6b4ee2c1bb6d6ff.png =485.453125x394)</span>';
-
-    expect(converter.toMarkdown(html)).toBe(
-      '![](${☣ CONTENTSTORAGE}/bc1c5a86e1e46f20a6b4ee2c1bb6d6ff.png =485.453125x394)',
-    );
-  });
-});
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/constants.js b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/constants.js
deleted file mode 100644
index 3d384e9342..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/constants.js
+++ /dev/null
@@ -1,12 +0,0 @@
-export const CLASS_MATH_FIELD = 'math-field';
-export const CLASS_MATH_FIELD_ACTIVE = `${CLASS_MATH_FIELD}-active`;
-export const CLASS_MATH_FIELD_NEW = `${CLASS_MATH_FIELD}-new`;
-
-export const CLASS_IMG_FIELD = 'image-field';
-export const CLASS_IMG_FIELD_NEW = `${CLASS_IMG_FIELD}-new`;
-
-export const KEY_ARROW_RIGHT = 'ArrowRight';
-export const KEY_ARROW_LEFT = 'ArrowLeft';
-export const KEY_BACKSPACE = 'Backspace';
-
-export const IMAGE_PLACEHOLDER = '${☣ CONTENTSTORAGE}';
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/mathquill/mathquill.css b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/mathquill/mathquill.css
deleted file mode 100644
index 7a42a648c3..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/mathquill/mathquill.css
+++ /dev/null
@@ -1,469 +0,0 @@
-/* stylelint-disable */
-
-/* * * * * * * * * * * ATTENTION * * * * * * * * * * *
- * This file contains some LEq customizations,
- * so there's a need to be careful to reflect them
- * if we upgrade MathQuill one day (or eventually
- * create MathQuill fork if there's a need to upgrade
- * often). For more information see the formulas plugin
- * documentation docs/markdown_editor_viewer.md
- * or commit 9c85577761a75d1c3c216496f4e3373e57623699
- * * * * * * * * * * * * * * * * * * * * * * * * * * */
-
-/*
- * MathQuill v0.10.1               http://mathquill.com
- * by Han, Jeanine, and Mary  maintainers@mathquill.com
- *
- * This Source Code Form is subject to the terms of the
- * Mozilla Public License, v. 2.0. If a copy of the MPL
- * was not distributed with this file, You can obtain
- * one at http://mozilla.org/MPL/2.0/.
- */
-.mq-editable-field {
-  display: -moz-inline-box;
-  display: inline-block;
-}
-.mq-editable-field .mq-cursor {
-  position: relative;
-  z-index: 1;
-  display: -moz-inline-box;
-  display: inline-block;
-  padding: 0;
-  margin-left: -1px;
-  border-left: 1px solid black;
-}
-.mq-editable-field .mq-cursor.mq-blink {
-  visibility: hidden;
-}
-.mq-editable-field,
-.mq-math-mode .mq-editable-field {
-  border: 1px solid gray;
-}
-.mq-editable-field.mq-focused,
-.mq-math-mode .mq-editable-field.mq-focused {
-  border-color: #709ac0;
-  border-radius: 1px;
-  -webkit-box-shadow:
-    #88bbdd 0 0 1px 2px,
-    inset #66aaee 0 0 2px 0;
-  -moz-box-shadow:
-    #88bbdd 0 0 1px 2px,
-    inset #66aaee 0 0 2px 0;
-  box-shadow:
-    #88bbdd 0 0 1px 2px,
-    inset #66aaee 0 0 2px 0;
-}
-.mq-math-mode .mq-editable-field {
-  margin: 1px;
-}
-.mq-editable-field .mq-latex-command-input {
-  padding-right: 1px;
-  margin-right: 1px;
-  margin-left: 2px;
-  font-family: 'Courier New', monospace;
-  color: inherit;
-  border: 1px solid gray;
-}
-.mq-editable-field .mq-latex-command-input.mq-empty {
-  background: transparent;
-}
-.mq-editable-field .mq-latex-command-input.mq-hasCursor {
-  border-color: ActiveBorder;
-}
-.mq-editable-field.mq-empty::after,
-.mq-editable-field.mq-text-mode::after,
-.mq-math-mode .mq-empty::after {
-  visibility: hidden;
-  content: 'c';
-}
-.mq-editable-field .mq-cursor:only-child::after,
-.mq-editable-field .mq-textarea + .mq-cursor:last-child::after {
-  visibility: hidden;
-  content: 'c';
-}
-.mq-editable-field .mq-text-mode .mq-cursor:only-child::after {
-  content: '';
-}
-.mq-editable-field.mq-text-mode {
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-.mq-root-block,
-.mq-math-mode .mq-root-block {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  display: -moz-inline-box;
-  display: inline-block;
-  width: 100%;
-  padding: 2px;
-  overflow: hidden;
-  white-space: nowrap;
-  vertical-align: middle;
-}
-.mq-math-mode {
-  display: -moz-inline-box;
-  display: inline-block;
-  font-size: 115%;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  line-height: 1 !important;
-}
-.mq-math-mode .mq-non-leaf,
-.mq-math-mode .mq-scaled {
-  display: -moz-inline-box;
-  display: inline-block;
-}
-.mq-math-mode var,
-.mq-math-mode .mq-text-mode,
-.mq-math-mode .mq-nonSymbola {
-  font-family: MathJax, serif;
-  line-height: 0.9 !important;
-}
-.mq-math-mode * {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  font-size: inherit;
-  line-height: inherit !important;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-  border-color: black;
-}
-.mq-math-mode .mq-empty {
-  background: #cccccc;
-}
-.mq-math-mode .mq-empty.mq-root-block {
-  background: transparent;
-}
-.mq-math-mode.mq-empty {
-  background: transparent;
-}
-.mq-math-mode .mq-text-mode {
-  display: inline-block;
-}
-.mq-math-mode .mq-text-mode.mq-hasCursor {
-  min-width: 1ex;
-  padding: 0 0.1em;
-  margin: 0 -0.1em;
-  box-shadow: inset darkgray 0 0.1em 0.2em;
-}
-.mq-math-mode .mq-font {
-  font:
-    1em MathJax,
-    serif;
-}
-.mq-math-mode .mq-font * {
-  font-family: inherit;
-  font-style: inherit;
-}
-.mq-math-mode b,
-.mq-math-mode b.mq-font {
-  font-weight: bolder;
-}
-.mq-math-mode var,
-.mq-math-mode i,
-.mq-math-mode i.mq-font {
-  font-style: italic;
-}
-.mq-math-mode var.mq-f {
-  margin-right: 0.2em;
-  margin-left: 0.1em;
-}
-.mq-math-mode .mq-roman var.mq-f {
-  margin: 0;
-}
-.mq-math-mode big {
-  font-size: 200%;
-}
-.mq-math-mode .mq-int > big {
-  display: inline-block;
-  vertical-align: -0.16em;
-  -webkit-transform: scaleX(0.7);
-  -moz-transform: scaleX(0.7);
-  -ms-transform: scaleX(0.7);
-  -o-transform: scaleX(0.7);
-  transform: scaleX(0.7);
-}
-.mq-math-mode .mq-int > .mq-supsub {
-  padding-right: 0.2em;
-  font-size: 80%;
-  vertical-align: -1.1em;
-}
-.mq-math-mode .mq-int > .mq-supsub > .mq-sup > .mq-sup-inner {
-  vertical-align: 1.3em;
-}
-.mq-math-mode .mq-int > .mq-supsub > .mq-sub {
-  margin-left: -0.35em;
-}
-.mq-math-mode .mq-roman {
-  font-style: normal;
-}
-.mq-math-mode .mq-sans-serif {
-  font-family: sans-serif, MathJax, serif;
-}
-.mq-math-mode .mq-monospace {
-  font-family: monospace, MathJax, serif;
-}
-.mq-math-mode .mq-overline {
-  margin-top: 1px;
-  border-top: 1px solid black;
-}
-.mq-math-mode .mq-underline {
-  margin-bottom: 1px;
-  border-bottom: 1px solid black;
-}
-.mq-math-mode .mq-binary-operator {
-  display: -moz-inline-box;
-  display: inline-block;
-  padding: 0 0.2em;
-}
-.mq-math-mode .mq-supsub {
-  font-size: 90%;
-  text-align: left;
-  vertical-align: -0.5em;
-}
-.mq-math-mode .mq-supsub.mq-sup-only {
-  vertical-align: 0.5em;
-}
-.mq-math-mode .mq-supsub.mq-sup-only .mq-sup {
-  display: inline-block;
-  vertical-align: text-bottom;
-}
-.mq-math-mode .mq-supsub .mq-sup {
-  display: block;
-}
-.mq-math-mode .mq-supsub .mq-sub {
-  display: block;
-  float: left;
-}
-.mq-math-mode .mq-supsub .mq-binary-operator {
-  padding: 0 0.1em;
-}
-.mq-math-mode .mq-supsub .mq-fraction {
-  font-size: 70%;
-}
-.mq-math-mode sup.mq-nthroot {
-  min-width: 0.5em;
-  margin-right: -0.6em;
-  margin-left: 0.2em;
-  font-size: 80%;
-  vertical-align: 0.8em;
-}
-.mq-math-mode .mq-paren {
-  padding: 0 0.1em;
-  vertical-align: top;
-  -webkit-transform-origin: center 0.06em;
-  -moz-transform-origin: center 0.06em;
-  -ms-transform-origin: center 0.06em;
-  -o-transform-origin: center 0.06em;
-  transform-origin: center 0.06em;
-}
-.mq-math-mode .mq-paren.mq-ghost {
-  color: silver;
-}
-.mq-math-mode .mq-paren + span {
-  margin-top: 0.1em;
-  margin-bottom: 0.1em;
-}
-.mq-math-mode .mq-array {
-  text-align: center;
-  vertical-align: middle;
-}
-.mq-math-mode .mq-array > span {
-  display: block;
-}
-.mq-math-mode .mq-operator-name {
-  font-family: MathJax, 'Times New Roman', serif;
-  font-style: normal;
-  line-height: 0.9 !important;
-}
-.mq-math-mode var.mq-operator-name.mq-first {
-  padding-left: 0.2em;
-}
-.mq-math-mode var.mq-operator-name.mq-last,
-.mq-math-mode .mq-supsub.mq-after-operator-name {
-  padding-right: 0.2em;
-}
-.mq-math-mode .mq-fraction {
-  padding: 0 0.2em;
-  font-size: 90%;
-  text-align: center;
-  vertical-align: -0.4em;
-}
-.mq-math-mode .mq-fraction,
-.mq-math-mode .mq-large-operator,
-.mq-math-mode x:-moz-any-link {
-  display: -moz-groupbox;
-}
-.mq-math-mode .mq-fraction,
-.mq-math-mode .mq-large-operator,
-.mq-math-mode x:-moz-any-link,
-.mq-math-mode x:default {
-  display: inline-block;
-}
-.mq-math-mode .mq-numerator,
-.mq-math-mode .mq-denominator {
-  display: block;
-}
-.mq-math-mode .mq-numerator {
-  padding: 0 0.1em;
-}
-.mq-math-mode .mq-denominator {
-  float: right;
-  width: 100%;
-  padding: 0.1em;
-  border-top: 1px solid;
-}
-.mq-math-mode .mq-sqrt-prefix {
-  position: relative;
-  top: 0.1em;
-  padding-top: 0;
-  vertical-align: top;
-  -webkit-transform-origin: top;
-  -moz-transform-origin: top;
-  -ms-transform-origin: top;
-  -o-transform-origin: top;
-  transform-origin: top;
-}
-.mq-math-mode .mq-sqrt-stem {
-  padding-top: 1px;
-  padding-right: 0.2em;
-  padding-left: 0.15em;
-  margin-top: 1px;
-  margin-right: 0.1em;
-  border-top: 1px solid;
-}
-.mq-math-mode .mq-vector-prefix {
-  display: block;
-  margin-bottom: -0.1em;
-  font-size: 0.75em;
-  line-height: 0.25em !important;
-  text-align: center;
-}
-.mq-math-mode .mq-vector-stem {
-  display: block;
-}
-.mq-math-mode .mq-large-operator {
-  padding: 0.2em;
-  text-align: center;
-  vertical-align: -0.2em;
-}
-
-.mq-from {
-  padding-top: 5px;
-}
-
-.mq-math-mode .mq-large-operator .mq-from,
-.mq-math-mode .mq-large-operator big,
-.mq-math-mode .mq-large-operator .mq-to {
-  display: block;
-}
-.mq-math-mode .mq-large-operator .mq-from,
-.mq-math-mode .mq-large-operator .mq-to {
-  font-size: 80%;
-}
-.mq-math-mode .mq-large-operator .mq-from {
-  float: right;
-
-  /* take out of normal flow to manipulate baseline */
-  width: 100%;
-}
-.mq-math-mode,
-.mq-math-mode .mq-editable-field {
-  font-family: MathJax, 'Times New Roman', serif;
-  cursor: text;
-}
-.mq-math-mode .mq-overarrow {
-  padding-top: 0.2em;
-  margin-top: 1px;
-  border-top: 1px solid black;
-}
-.mq-math-mode .mq-overarrow::before {
-  position: relative;
-  top: -0.34em;
-  display: block;
-  font-size: 0.5em;
-  line-height: 0;
-  text-align: right;
-  content: '\27A4';
-}
-.mq-math-mode .mq-overarrow.mq-arrow-left::before {
-  -ms-filter: 'FlipH';
-  filter: FlipH;
-  -moz-transform: scaleX(-1);
-  -o-transform: scaleX(-1);
-  -webkit-transform: scaleX(-1);
-  transform: scaleX(-1);
-}
-.mq-math-mode .mq-selection,
-.mq-editable-field .mq-selection,
-.mq-math-mode .mq-selection .mq-non-leaf,
-.mq-editable-field .mq-selection .mq-non-leaf,
-.mq-math-mode .mq-selection .mq-scaled,
-.mq-editable-field .mq-selection .mq-scaled {
-  color: HighlightText;
-  background: #b4d5fe !important;
-  background: Highlight !important;
-  border-color: HighlightText;
-}
-.mq-math-mode .mq-selection .mq-matrixed,
-.mq-editable-field .mq-selection .mq-matrixed {
-  background: #3399ff !important;
-}
-.mq-math-mode .mq-selection .mq-matrixed-container,
-.mq-editable-field .mq-selection .mq-matrixed-container {
-  filter: progid:dximagetransform.microsoft.chroma(color='#3399FF') !important;
-}
-.mq-math-mode .mq-selection.mq-blur,
-.mq-editable-field .mq-selection.mq-blur,
-.mq-math-mode .mq-selection.mq-blur .mq-non-leaf,
-.mq-editable-field .mq-selection.mq-blur .mq-non-leaf,
-.mq-math-mode .mq-selection.mq-blur .mq-scaled,
-.mq-editable-field .mq-selection.mq-blur .mq-scaled,
-.mq-math-mode .mq-selection.mq-blur .mq-matrixed,
-.mq-editable-field .mq-selection.mq-blur .mq-matrixed {
-  color: black;
-  background: #d4d4d4 !important;
-  border-color: black;
-}
-.mq-math-mode .mq-selection.mq-blur .mq-matrixed-container,
-.mq-editable-field .mq-selection.mq-blur .mq-matrixed-container {
-  filter: progid:dximagetransform.microsoft.chroma(color='#D4D4D4') !important;
-}
-.mq-editable-field .mq-textarea,
-.mq-math-mode .mq-textarea {
-  position: relative;
-  -webkit-user-select: text;
-  -moz-user-select: text;
-  user-select: text;
-}
-.mq-editable-field .mq-textarea *,
-.mq-math-mode .mq-textarea *,
-.mq-editable-field .mq-selectable,
-.mq-math-mode .mq-selectable {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  clip: rect(1em 1em 1em 1em);
-  resize: none;
-  -webkit-user-select: text;
-  -moz-user-select: text;
-  user-select: text;
-  -webkit-transform: scale(0);
-  -moz-transform: scale(0);
-  -ms-transform: scale(0);
-  -o-transform: scale(0);
-  transform: scale(0);
-}
-.mq-math-mode .mq-matrixed {
-  display: -moz-inline-box;
-  display: inline-block;
-  background: white;
-}
-.mq-math-mode .mq-matrixed-container {
-  margin-top: -0.1em;
-  filter: progid:dximagetransform.microsoft.chroma(color='white');
-}
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/mathquill/mathquill.js b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/mathquill/mathquill.js
deleted file mode 100644
index f020feddd5..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/mathquill/mathquill.js
+++ /dev/null
@@ -1,5403 +0,0 @@
-/* eslint-disable */
-
-/* * * * * * * * * * * ATTENTION * * * * * * * * * * *
- * This file contains some LEq customizations,
- * so there's a need to be careful to reflect them
- * if we upgrade MathQuill one day (or eventually
- * create MathQuill fork if there's a need to upgrade
- * often). For more information see the formulas plugin
- * documentation docs/markdown_editor_viewer.md
- * or commit 9c85577761a75d1c3c216496f4e3373e57623699
- * * * * * * * * * * * * * * * * * * * * * * * * * * */
-
-/**
- * MathQuill v0.10.1               http://mathquill.com
- * by Han, Jeanine, and Mary  maintainers@mathquill.com
- *
- * This Source Code Form is subject to the terms of the
- * Mozilla Public License, v. 2.0. If a copy of the MPL
- * was not distributed with this file, You can obtain
- * one at http://mozilla.org/MPL/2.0/.
- */
-
-(function () {
-  var jQuery = require('jquery'),
-    undefined,
-    mqCmdId = 'mathquill-command-id',
-    mqBlockId = 'mathquill-block-id',
-    min = Math.min,
-    max = Math.max;
-
-  function noop() {}
-
-  /**
-   * A utility higher-order function that makes defining variadic
-   * functions more convenient by letting you essentially define functions
-   * with the last argument as a splat, i.e. the last argument "gathers up"
-   * remaining arguments to the function:
-   *   var doStuff = variadic(function(first, rest) { return rest; });
-   *   doStuff(1, 2, 3); // => [2, 3]
-   */
-  var __slice = [].slice;
-  function variadic(fn) {
-    var numFixedArgs = fn.length - 1;
-    return function () {
-      var args = __slice.call(arguments, 0, numFixedArgs);
-      var varArg = __slice.call(arguments, numFixedArgs);
-      return fn.apply(this, args.concat([varArg]));
-    };
-  }
-
-  /**
-   * A utility higher-order function that makes combining object-oriented
-   * programming and functional programming techniques more convenient:
-   * given a method name and any number of arguments to be bound, returns
-   * a function that calls it's first argument's method of that name (if
-   * it exists) with the bound arguments and any additional arguments that
-   * are passed:
-   *   var sendMethod = send('method', 1, 2);
-   *   var obj = { method: function() { return Array.apply(this, arguments); } };
-   *   sendMethod(obj, 3, 4); // => [1, 2, 3, 4]
-   *   // or more specifically,
-   *   var obj2 = { method: function(one, two, three) { return one*two + three; } };
-   *   sendMethod(obj2, 3); // => 5
-   *   sendMethod(obj2, 4); // => 6
-   */
-  var send = variadic(function (method, args) {
-    return variadic(function (obj, moreArgs) {
-      if (method in obj) return obj[method].apply(obj, args.concat(moreArgs));
-    });
-  });
-
-  /**
-   * A utility higher-order function that creates "implicit iterators"
-   * from "generators": given a function that takes in a sole argument,
-   * a "yield_" function, that calls "yield_" repeatedly with an object as
-   * a sole argument (presumably objects being iterated over), returns
-   * a function that calls it's first argument on each of those objects
-   * (if the first argument is a function, it is called repeatedly with
-   * each object as the first argument, otherwise it is stringified and
-   * the method of that name is called on each object (if such a method
-   * exists)), passing along all additional arguments:
-   *   var a = [
-   *     { method: function(list) { list.push(1); } },
-   *     { method: function(list) { list.push(2); } },
-   *     { method: function(list) { list.push(3); } }
-   *   ];
-   *   a.each = iterator(function(yield_) {
-   *     for (var i in this) yield_(this[i]);
-   *   });
-   *   var list = [];
-   *   a.each('method', list);
-   *   list; // => [1, 2, 3]
-   *   // Note that the for-in loop will yield 'each', but 'each' maps to
-   *   // the function object created by iterator() which does not have a
-   *   // .method() method, so that just fails silently.
-   */
-  function iterator(generator) {
-    return variadic(function (fn, args) {
-      if (typeof fn !== 'function') fn = send(fn);
-      var yield_ = function (obj) {
-        return fn.apply(obj, [obj].concat(args));
-      };
-      return generator.call(this, yield_);
-    });
-  }
-
-  /**
-   * sugar to make defining lots of commands easier.
-   * TODO: rethink this.
-   */
-  function bind(cons /*, args... */) {
-    var args = __slice.call(arguments, 1);
-    return function () {
-      return cons.apply(this, args);
-    };
-  }
-
-  /**
-   * a development-only debug method.  This definition and all
-   * calls to `pray` will be stripped from the minified
-   * build of mathquill.
-   *
-   * This function must be called by name to be removed
-   * at compile time.  Do not define another function
-   * with the same name, and only call this function by
-   * name.
-   */
-  function pray(message, cond) {
-    if (!cond) throw new Error('prayer failed: ' + message);
-  }
-  var P = (function (prototype, ownProperty, undefined) {
-    // helper functions that also help minification
-    function isObject(o) {
-      return typeof o === 'object';
-    }
-    function isFunction(f) {
-      return typeof f === 'function';
-    }
-
-    // used to extend the prototypes of superclasses (which might not
-    // have `.Bare`s)
-    function SuperclassBare() {}
-
-    return function P(_superclass /* = Object */, definition) {
-      // handle the case where no superclass is given
-      if (definition === undefined) {
-        definition = _superclass;
-        _superclass = Object;
-      }
-
-      // C is the class to be returned.
-      //
-      // It delegates to instantiating an instance of `Bare`, so that it
-      // will always return a new instance regardless of the calling
-      // context.
-      //
-      //  TODO: the Chrome inspector shows all created objects as `C`
-      //        rather than `Object`.  Setting the .name property seems to
-      //        have no effect.  Is there a way to override this behavior?
-      function C() {
-        var self = new Bare();
-        if (isFunction(self.init)) self.init.apply(self, arguments);
-        return self;
-      }
-
-      // C.Bare is a class with a noop constructor.  Its prototype is the
-      // same as C, so that instances of C.Bare are also instances of C.
-      // New objects can be allocated without initialization by calling
-      // `new MyClass.Bare`.
-      function Bare() {}
-      C.Bare = Bare;
-
-      // Set up the prototype of the new class.
-      var _super = (SuperclassBare[prototype] = _superclass[prototype]);
-      var proto = (Bare[prototype] = C[prototype] = C.p = new SuperclassBare());
-
-      // other variables, as a minifier optimization
-      var extensions;
-
-      // set the constructor property on the prototype, for convenience
-      proto.constructor = C;
-
-      C.extend = function (def) {
-        return P(C, def);
-      };
-
-      return (C.open = function (def) {
-        extensions = {};
-
-        if (isFunction(def)) {
-          // call the defining function with all the arguments you need
-          // extensions captures the return value.
-          extensions = def.call(C, proto, _super, C, _superclass);
-        } else if (isObject(def)) {
-          // if you passed an object instead, we'll take it
-          extensions = def;
-        }
-
-        // ...and extend it
-        if (isObject(extensions)) {
-          for (var ext in extensions) {
-            if (ownProperty.call(extensions, ext)) {
-              proto[ext] = extensions[ext];
-            }
-          }
-        }
-
-        // if there's no init, we assume we're inheriting a non-pjs class, so
-        // we default to applying the superclass's constructor.
-        if (!isFunction(proto.init)) {
-          proto.init = _superclass;
-        }
-
-        return C;
-      })(definition);
-    };
-
-    // as a minifier optimization, we've closured in a few helper functions
-    // and the string 'prototype' (C[p] is much shorter than C.prototype)
-  })('prototype', {}.hasOwnProperty);
-  /*************************************************
-   * Base classes of edit tree-related objects
-   *
-   * Only doing tree node manipulation via these
-   * adopt/ disown methods guarantees well-formedness
-   * of the tree.
-   ************************************************/
-
-  // L = 'left'
-  // R = 'right'
-  //
-  // the contract is that they can be used as object properties
-  // and (-L) === R, and (-R) === L.
-  var L = -1;
-  var R = 1;
-
-  function prayDirection(dir) {
-    pray('a direction was passed', dir === L || dir === R);
-  }
-
-  /**
-   * Tiny extension of jQuery adding directionalized DOM manipulation methods.
-   *
-   * Funny how Pjs v3 almost just works with `jQuery.fn.init`.
-   *
-   * jQuery features that don't work on $:
-   *   - jQuery.*, like jQuery.ajax, obviously (Pjs doesn't and shouldn't
-   *                                            copy constructor properties)
-   *
-   *   - jQuery(function), the shortcut for `jQuery(document).ready(function)`,
-   *     because `jQuery.fn.init` is idiosyncratic and Pjs doing, essentially,
-   *     `jQuery.fn.init.apply(this, arguments)` isn't quite right, you need:
-   *
-   *       _.init = function(s, c) { jQuery.fn.init.call(this, s, c, $(document)); };
-   *
-   *     if you actually give a shit (really, don't bother),
-   *     see https://github.com/jquery/jquery/blob/1.7.2/src/core.js#L889
-   *
-   *   - jQuery(selector), because jQuery translates that to
-   *     `jQuery(document).find(selector)`, but Pjs doesn't (should it?) let
-   *     you override the result of a constructor call
-   *       + note that because of the jQuery(document) shortcut-ness, there's also
-   *         the 3rd-argument-needs-to-be-`$(document)` thing above, but the fix
-   *         for that (as can be seen above) is really easy. This problem requires
-   *         a way more intrusive fix
-   *
-   * And that's it! Everything else just magically works because jQuery internally
-   * uses `this.constructor()` everywhere (hence calling `$`), but never ever does
-   * `this.constructor.find` or anything like that, always doing `jQuery.find`.
-   */
-  var $ = P(jQuery, function (_) {
-    _.insDirOf = function (dir, el) {
-      return dir === L ? this.insertBefore(el.first()) : this.insertAfter(el.last());
-    };
-    _.insAtDirEnd = function (dir, el) {
-      return dir === L ? this.prependTo(el) : this.appendTo(el);
-    };
-  });
-
-  var Point = P(function (_) {
-    _.parent = 0;
-    _[L] = 0;
-    _[R] = 0;
-
-    _.init = function (parent, leftward, rightward) {
-      this.parent = parent;
-      this[L] = leftward;
-      this[R] = rightward;
-    };
-
-    this.copy = function (pt) {
-      return Point(pt.parent, pt[L], pt[R]);
-    };
-  });
-
-  /**
-   * MathQuill virtual-DOM tree-node abstract base class
-   */
-  var Node = P(function (_) {
-    _[L] = 0;
-    _[R] = 0;
-    _.parent = 0;
-
-    var id = 0;
-    function uniqueNodeId() {
-      return (id += 1);
-    }
-    this.byId = {};
-
-    _.init = function () {
-      this.id = uniqueNodeId();
-      Node.byId[this.id] = this;
-
-      this.ends = {};
-      this.ends[L] = 0;
-      this.ends[R] = 0;
-    };
-
-    _.dispose = function () {
-      delete Node.byId[this.id];
-    };
-
-    _.toString = function () {
-      return '{{ MathQuill Node #' + this.id + ' }}';
-    };
-
-    _.jQ = $();
-    _.jQadd = function (jQ) {
-      return (this.jQ = this.jQ.add(jQ));
-    };
-    _.jQize = function (jQ) {
-      // jQuery-ifies this.html() and links up the .jQ of all corresponding Nodes
-      var jQ = $(jQ || this.html());
-
-      function jQadd(el) {
-        if (el.getAttribute) {
-          var cmdId = el.getAttribute('mathquill-command-id');
-          var blockId = el.getAttribute('mathquill-block-id');
-          if (cmdId) Node.byId[cmdId].jQadd(el);
-          if (blockId) Node.byId[blockId].jQadd(el);
-        }
-        for (el = el.firstChild; el; el = el.nextSibling) {
-          jQadd(el);
-        }
-      }
-
-      for (var i = 0; i < jQ.length; i += 1) jQadd(jQ[i]);
-      return jQ;
-    };
-
-    _.createDir = function (dir, cursor) {
-      prayDirection(dir);
-      var node = this;
-      node.jQize();
-      node.jQ.insDirOf(dir, cursor.jQ);
-      cursor[dir] = node.adopt(cursor.parent, cursor[L], cursor[R]);
-      return node;
-    };
-    _.createLeftOf = function (el) {
-      return this.createDir(L, el);
-    };
-
-    _.selectChildren = function (leftEnd, rightEnd) {
-      return Selection(leftEnd, rightEnd);
-    };
-
-    _.bubble = iterator(function (yield_) {
-      for (var ancestor = this; ancestor; ancestor = ancestor.parent) {
-        var result = yield_(ancestor);
-        if (result === false) break;
-      }
-
-      return this;
-    });
-
-    _.postOrder = iterator(function (yield_) {
-      (function recurse(descendant) {
-        descendant.eachChild(recurse);
-        yield_(descendant);
-      })(this);
-
-      return this;
-    });
-
-    _.isEmpty = function () {
-      return this.ends[L] === 0 && this.ends[R] === 0;
-    };
-
-    _.children = function () {
-      return Fragment(this.ends[L], this.ends[R]);
-    };
-
-    _.eachChild = function () {
-      var children = this.children();
-      children.each.apply(children, arguments);
-      return this;
-    };
-
-    _.foldChildren = function (fold, fn) {
-      return this.children().fold(fold, fn);
-    };
-
-    _.withDirAdopt = function (dir, parent, withDir, oppDir) {
-      Fragment(this, this).withDirAdopt(dir, parent, withDir, oppDir);
-      return this;
-    };
-
-    _.adopt = function (parent, leftward, rightward) {
-      Fragment(this, this).adopt(parent, leftward, rightward);
-      return this;
-    };
-
-    _.disown = function () {
-      Fragment(this, this).disown();
-      return this;
-    };
-
-    _.remove = function () {
-      this.jQ.remove();
-      this.postOrder('dispose');
-      return this.disown();
-    };
-  });
-
-  function prayWellFormed(parent, leftward, rightward) {
-    pray('a parent is always present', parent);
-    pray(
-      'leftward is properly set up',
-      (function () {
-        // either it's empty and `rightward` is the left end child (possibly empty)
-        if (!leftward) return parent.ends[L] === rightward;
-
-        // or it's there and its [R] and .parent are properly set up
-        return leftward[R] === rightward && leftward.parent === parent;
-      })(),
-    );
-
-    pray(
-      'rightward is properly set up',
-      (function () {
-        // either it's empty and `leftward` is the right end child (possibly empty)
-        if (!rightward) return parent.ends[R] === leftward;
-
-        // or it's there and its [L] and .parent are properly set up
-        return rightward[L] === leftward && rightward.parent === parent;
-      })(),
-    );
-  }
-
-  /**
-   * An entity outside the virtual tree with one-way pointers (so it's only a
-   * "view" of part of the tree, not an actual node/entity in the tree) that
-   * delimits a doubly-linked list of sibling nodes.
-   * It's like a fanfic love-child between HTML DOM DocumentFragment and the Range
-   * classes: like DocumentFragment, its contents must be sibling nodes
-   * (unlike Range, whose contents are arbitrary contiguous pieces of subtrees),
-   * but like Range, it has only one-way pointers to its contents, its contents
-   * have no reference to it and in fact may still be in the visible tree (unlike
-   * DocumentFragment, whose contents must be detached from the visible tree
-   * and have their 'parent' pointers set to the DocumentFragment).
-   */
-  var Fragment = P(function (_) {
-    _.init = function (withDir, oppDir, dir) {
-      if (dir === undefined) dir = L;
-      prayDirection(dir);
-
-      pray('no half-empty fragments', !withDir === !oppDir);
-
-      this.ends = {};
-
-      if (!withDir) return;
-
-      pray('withDir is passed to Fragment', withDir instanceof Node);
-      pray('oppDir is passed to Fragment', oppDir instanceof Node);
-      pray('withDir and oppDir have the same parent', withDir.parent === oppDir.parent);
-
-      this.ends[dir] = withDir;
-      this.ends[-dir] = oppDir;
-
-      // To build the jquery collection for a fragment, accumulate elements
-      // into an array and then call jQ.add once on the result. jQ.add sorts the
-      // collection according to document order each time it is called, so
-      // building a collection by folding jQ.add directly takes more than
-      // quadratic time in the number of elements.
-      //
-      // https://github.com/jquery/jquery/blob/2.1.4/src/traversing.js#L112
-      var accum = this.fold([], function (accum, el) {
-        accum.push.apply(accum, el.jQ.get());
-        return accum;
-      });
-
-      this.jQ = this.jQ.add(accum);
-    };
-    _.jQ = $();
-
-    // like Cursor::withDirInsertAt(dir, parent, withDir, oppDir)
-    _.withDirAdopt = function (dir, parent, withDir, oppDir) {
-      return dir === L ? this.adopt(parent, withDir, oppDir) : this.adopt(parent, oppDir, withDir);
-    };
-    _.adopt = function (parent, leftward, rightward) {
-      prayWellFormed(parent, leftward, rightward);
-
-      var self = this;
-      self.disowned = false;
-
-      var leftEnd = self.ends[L];
-      if (!leftEnd) return this;
-
-      var rightEnd = self.ends[R];
-
-      if (leftward) {
-        // NB: this is handled in the ::each() block
-        // leftward[R] = leftEnd
-      } else {
-        parent.ends[L] = leftEnd;
-      }
-
-      if (rightward) {
-        rightward[L] = rightEnd;
-      } else {
-        parent.ends[R] = rightEnd;
-      }
-
-      self.ends[R][R] = rightward;
-
-      self.each(function (el) {
-        el[L] = leftward;
-        el.parent = parent;
-        if (leftward) leftward[R] = el;
-
-        leftward = el;
-      });
-
-      return self;
-    };
-
-    _.disown = function () {
-      var self = this;
-      var leftEnd = self.ends[L];
-
-      // guard for empty and already-disowned fragments
-      if (!leftEnd || self.disowned) return self;
-
-      self.disowned = true;
-
-      var rightEnd = self.ends[R];
-      var parent = leftEnd.parent;
-
-      prayWellFormed(parent, leftEnd[L], leftEnd);
-      prayWellFormed(parent, rightEnd, rightEnd[R]);
-
-      if (leftEnd[L]) {
-        leftEnd[L][R] = rightEnd[R];
-      } else {
-        parent.ends[L] = rightEnd[R];
-      }
-
-      if (rightEnd[R]) {
-        rightEnd[R][L] = leftEnd[L];
-      } else {
-        parent.ends[R] = leftEnd[L];
-      }
-
-      return self;
-    };
-
-    _.remove = function () {
-      this.jQ.remove();
-      this.each('postOrder', 'dispose');
-      return this.disown();
-    };
-
-    _.each = iterator(function (yield_) {
-      var self = this;
-      var el = self.ends[L];
-      if (!el) return self;
-
-      for (; el !== self.ends[R][R]; el = el[R]) {
-        var result = yield_(el);
-        if (result === false) break;
-      }
-
-      return self;
-    });
-
-    _.fold = function (fold, fn) {
-      this.each(function (el) {
-        fold = fn.call(this, fold, el);
-      });
-
-      return fold;
-    };
-  });
-
-  /**
-   * Registry of LaTeX commands and commands created when typing
-   * a single character.
-   *
-   * (Commands are all subclasses of Node.)
-   */
-  var LatexCmds = {},
-    CharCmds = {};
-  /********************************************
-   * Cursor and Selection "singleton" classes
-   *******************************************/
-
-  /* The main thing that manipulates the Math DOM. Makes sure to manipulate the
-HTML DOM to match. */
-
-  /* Sort of singletons, since there should only be one per editable math
-textbox, but any one HTML document can contain many such textboxes, so any one
-JS environment could actually contain many instances. */
-
-  //A fake cursor in the fake textbox that the math is rendered in.
-  var Cursor = P(Point, function (_) {
-    _.init = function (initParent, options) {
-      this.parent = initParent;
-      this.options = options;
-
-      var jQ = (this.jQ = this._jQ = $('<span class="mq-cursor">&#8203;</span>'));
-      //closured for setInterval
-      this.blink = function () {
-        jQ.toggleClass('mq-blink');
-      };
-
-      this.upDownCache = {};
-    };
-
-    _.show = function () {
-      this.jQ = this._jQ.removeClass('mq-blink');
-      if ('intervalId' in this)
-        //already was shown, just restart interval
-        clearInterval(this.intervalId);
-      else {
-        //was hidden and detached, insert this.jQ back into HTML DOM
-        if (this[R]) {
-          if (this.selection && this.selection.ends[L][L] === this[L])
-            this.jQ.insertBefore(this.selection.jQ);
-          else this.jQ.insertBefore(this[R].jQ.first());
-        } else this.jQ.appendTo(this.parent.jQ);
-        this.parent.focus();
-      }
-      this.intervalId = setInterval(this.blink, 500);
-      return this;
-    };
-    _.hide = function () {
-      if ('intervalId' in this) clearInterval(this.intervalId);
-      delete this.intervalId;
-      this.jQ.detach();
-      this.jQ = $();
-      return this;
-    };
-
-    _.withDirInsertAt = function (dir, parent, withDir, oppDir) {
-      var oldParent = this.parent;
-      this.parent = parent;
-      this[dir] = withDir;
-      this[-dir] = oppDir;
-      // by contract, .blur() is called after all has been said and done
-      // and the cursor has actually been moved
-      // FIXME pass cursor to .blur() so text can fix cursor pointers when removing itself
-      if (oldParent !== parent && oldParent.blur) oldParent.blur(this);
-    };
-    _.insDirOf = function (dir, el) {
-      prayDirection(dir);
-      this.jQ.insDirOf(dir, el.jQ);
-      this.withDirInsertAt(dir, el.parent, el[dir], el);
-      this.parent.jQ.addClass('mq-hasCursor');
-      return this;
-    };
-    _.insLeftOf = function (el) {
-      return this.insDirOf(L, el);
-    };
-    _.insRightOf = function (el) {
-      return this.insDirOf(R, el);
-    };
-
-    _.insAtDirEnd = function (dir, el) {
-      prayDirection(dir);
-      this.jQ.insAtDirEnd(dir, el.jQ);
-      this.withDirInsertAt(dir, el, 0, el.ends[dir]);
-      el.focus();
-      return this;
-    };
-    _.insAtLeftEnd = function (el) {
-      return this.insAtDirEnd(L, el);
-    };
-    _.insAtRightEnd = function (el) {
-      return this.insAtDirEnd(R, el);
-    };
-
-    /**
-     * jump up or down from one block Node to another:
-     * - cache the current Point in the node we're jumping from
-     * - check if there's a Point in it cached for the node we're jumping to
-     *   + if so put the cursor there,
-     *   + if not seek a position in the node that is horizontally closest to
-     *     the cursor's current position
-     */
-    _.jumpUpDown = function (from, to) {
-      var self = this;
-      self.upDownCache[from.id] = Point.copy(self);
-      var cached = self.upDownCache[to.id];
-      if (cached) {
-        cached[R] ? self.insLeftOf(cached[R]) : self.insAtRightEnd(cached.parent);
-      } else {
-        var pageX = self.offset().left;
-        to.seek(pageX, self);
-      }
-    };
-    _.offset = function () {
-      //in Opera 11.62, .getBoundingClientRect() and hence jQuery::offset()
-      //returns all 0's on inline elements with negative margin-right (like
-      //the cursor) at the end of their parent, so temporarily remove the
-      //negative margin-right when calling jQuery::offset()
-      //Opera bug DSK-360043
-      //http://bugs.jquery.com/ticket/11523
-      //https://github.com/jquery/jquery/pull/717
-      var self = this,
-        offset = self.jQ.removeClass('mq-cursor').offset();
-      self.jQ.addClass('mq-cursor');
-      return offset;
-    };
-    _.unwrapGramp = function () {
-      var gramp = this.parent.parent;
-      var greatgramp = gramp.parent;
-      var rightward = gramp[R];
-      var cursor = this;
-
-      var leftward = gramp[L];
-      gramp.disown().eachChild(function (uncle) {
-        if (uncle.isEmpty()) return;
-
-        uncle
-          .children()
-          .adopt(greatgramp, leftward, rightward)
-          .each(function (cousin) {
-            cousin.jQ.insertBefore(gramp.jQ.first());
-          });
-
-        leftward = uncle.ends[R];
-      });
-
-      if (!this[R]) {
-        //then find something to be rightward to insLeftOf
-        if (this[L]) this[R] = this[L][R];
-        else {
-          while (!this[R]) {
-            this.parent = this.parent[R];
-            if (this.parent) this[R] = this.parent.ends[L];
-            else {
-              this[R] = gramp[R];
-              this.parent = greatgramp;
-              break;
-            }
-          }
-        }
-      }
-      if (this[R]) this.insLeftOf(this[R]);
-      else this.insAtRightEnd(greatgramp);
-
-      gramp.jQ.remove();
-
-      if (gramp[L].siblingDeleted) gramp[L].siblingDeleted(cursor.options, R);
-      if (gramp[R].siblingDeleted) gramp[R].siblingDeleted(cursor.options, L);
-    };
-    _.startSelection = function () {
-      var anticursor = (this.anticursor = Point.copy(this));
-      var ancestors = (anticursor.ancestors = {}); // a map from each ancestor of
-      // the anticursor, to its child that is also an ancestor; in other words,
-      // the anticursor's ancestor chain in reverse order
-      for (var ancestor = anticursor; ancestor.parent; ancestor = ancestor.parent) {
-        ancestors[ancestor.parent.id] = ancestor;
-      }
-    };
-    _.endSelection = function () {
-      delete this.anticursor;
-    };
-    _.select = function () {
-      var anticursor = this.anticursor;
-      if (this[L] === anticursor[L] && this.parent === anticursor.parent) return false;
-
-      // Find the lowest common ancestor (`lca`), and the ancestor of the cursor
-      // whose parent is the LCA (which'll be an end of the selection fragment).
-      for (var ancestor = this; ancestor.parent; ancestor = ancestor.parent) {
-        if (ancestor.parent.id in anticursor.ancestors) {
-          var lca = ancestor.parent;
-          break;
-        }
-      }
-      pray('cursor and anticursor in the same tree', lca);
-      // The cursor and the anticursor should be in the same tree, because the
-      // mousemove handler attached to the document, unlike the one attached to
-      // the root HTML DOM element, doesn't try to get the math tree node of the
-      // mousemove target, and Cursor::seek() based solely on coordinates stays
-      // within the tree of `this` cursor's root.
-
-      // The other end of the selection fragment, the ancestor of the anticursor
-      // whose parent is the LCA.
-      var antiAncestor = anticursor.ancestors[lca.id];
-
-      // Now we have two either Nodes or Points, guaranteed to have a common
-      // parent and guaranteed that if both are Points, they are not the same,
-      // and we have to figure out which is the left end and which the right end
-      // of the selection.
-      var leftEnd,
-        rightEnd,
-        dir = R;
-
-      // This is an extremely subtle algorithm.
-      // As a special case, `ancestor` could be a Point and `antiAncestor` a Node
-      // immediately to `ancestor`'s left.
-      // In all other cases,
-      // - both Nodes
-      // - `ancestor` a Point and `antiAncestor` a Node
-      // - `ancestor` a Node and `antiAncestor` a Point
-      // `antiAncestor[R] === rightward[R]` for some `rightward` that is
-      // `ancestor` or to its right, if and only if `antiAncestor` is to
-      // the right of `ancestor`.
-      if (ancestor[L] !== antiAncestor) {
-        for (var rightward = ancestor; rightward; rightward = rightward[R]) {
-          if (rightward[R] === antiAncestor[R]) {
-            dir = L;
-            leftEnd = ancestor;
-            rightEnd = antiAncestor;
-            break;
-          }
-        }
-      }
-      if (dir === R) {
-        leftEnd = antiAncestor;
-        rightEnd = ancestor;
-      }
-
-      // only want to select Nodes up to Points, can't select Points themselves
-      if (leftEnd instanceof Point) leftEnd = leftEnd[R];
-      if (rightEnd instanceof Point) rightEnd = rightEnd[L];
-
-      this.hide().selection = lca.selectChildren(leftEnd, rightEnd);
-      this.insDirOf(dir, this.selection.ends[dir]);
-      this.selectionChanged();
-      return true;
-    };
-
-    _.clearSelection = function () {
-      if (this.selection) {
-        this.selection.clear();
-        delete this.selection;
-        this.selectionChanged();
-      }
-      return this;
-    };
-    _.deleteSelection = function () {
-      if (!this.selection) return;
-
-      this[L] = this.selection.ends[L][L];
-      this[R] = this.selection.ends[R][R];
-      this.selection.remove();
-      this.selectionChanged();
-      delete this.selection;
-    };
-    _.replaceSelection = function () {
-      var seln = this.selection;
-      if (seln) {
-        this[L] = seln.ends[L][L];
-        this[R] = seln.ends[R][R];
-        delete this.selection;
-      }
-      return seln;
-    };
-  });
-
-  var Selection = P(Fragment, function (_, super_) {
-    _.init = function () {
-      super_.init.apply(this, arguments);
-      this.jQ = this.jQ.wrapAll('<span class="mq-selection"></span>').parent();
-      //can't do wrapAll(this.jQ = $(...)) because wrapAll will clone it
-    };
-    _.adopt = function () {
-      this.jQ.replaceWith((this.jQ = this.jQ.children()));
-      return super_.adopt.apply(this, arguments);
-    };
-    _.clear = function () {
-      // using the browser's native .childNodes property so that we
-      // don't discard text nodes.
-      this.jQ.replaceWith(this.jQ[0].childNodes);
-      return this;
-    };
-    _.join = function (methodName) {
-      return this.fold('', function (fold, child) {
-        return fold + child[methodName]();
-      });
-    };
-  });
-  /*********************************************
-   * Controller for a MathQuill instance,
-   * on which services are registered with
-   *
-   *   Controller.open(function(_) { ... });
-   *
-   ********************************************/
-
-  var Controller = P(function (_) {
-    _.init = function (root, container, options) {
-      this.id = root.id;
-      this.data = {};
-
-      this.root = root;
-      this.container = container;
-      this.options = options;
-
-      root.controller = this;
-
-      this.cursor = root.cursor = Cursor(root, options);
-      // TODO: stop depending on root.cursor, and rm it
-    };
-
-    _.handle = function (name, dir) {
-      var handlers = this.options.handlers;
-      if (handlers && handlers.fns[name]) {
-        var mq = handlers.APIClasses[this.KIND_OF_MQ](this);
-        if (dir === L || dir === R) handlers.fns[name](dir, mq);
-        else handlers.fns[name](mq);
-      }
-    };
-
-    var notifyees = [];
-    this.onNotify = function (f) {
-      notifyees.push(f);
-    };
-    _.notify = function () {
-      for (var i = 0; i < notifyees.length; i += 1) {
-        notifyees[i].apply(this.cursor, arguments);
-      }
-      return this;
-    };
-  });
-  /*********************************************************
-   * The publicly exposed MathQuill API.
-   ********************************************************/
-
-  var API = {},
-    Options = P(),
-    optionProcessors = {},
-    Progenote = P(),
-    EMBEDS = {};
-
-  /**
-   * Interface Versioning (#459, #495) to allow us to virtually guarantee
-   * backcompat. v0.10.x introduces it, so for now, don't completely break the
-   * API for people who don't know about it, just complain with console.warn().
-   *
-   * The methods are shimmed in outro.js so that MQ.MathField.prototype etc can
-   * be accessed.
-   */
-  function insistOnInterVer() {
-    if (window.console)
-      console.warn(
-        'You are using the MathQuill API without specifying an interface version, ' +
-          'which will fail in v1.0.0. Easiest fix is to do the following before ' +
-          'doing anything else:\n' +
-          '\n' +
-          '    MathQuill = MathQuill.getInterface(1);\n' +
-          '    // now MathQuill.MathField() works like it used to\n' +
-          '\n' +
-          'See also the "`dev` branch (2014\u20132015) \u2192 v0.10.0 Migration Guide" at\n' +
-          '  https://github.com/mathquill/mathquill/wiki/%60dev%60-branch-(2014%E2%80%932015)-%E2%86%92-v0.10.0-Migration-Guide',
-      );
-  }
-  // globally exported API object
-  function MathQuill(el) {
-    insistOnInterVer();
-    return MQ1(el);
-  }
-  MathQuill.prototype = Progenote.p;
-  MathQuill.interfaceVersion = function (v) {
-    // shim for #459-era interface versioning (ended with #495)
-    if (v !== 1) throw 'Only interface version 1 supported. You specified: ' + v;
-    insistOnInterVer = function () {
-      if (window.console)
-        console.warn(
-          'You called MathQuill.interfaceVersion(1); to specify the interface ' +
-            'version, which will fail in v1.0.0. You can fix this easily by doing ' +
-            'this before doing anything else:\n' +
-            '\n' +
-            '    MathQuill = MathQuill.getInterface(1);\n' +
-            '    // now MathQuill.MathField() works like it used to\n' +
-            '\n' +
-            'See also the "`dev` branch (2014\u20132015) \u2192 v0.10.0 Migration Guide" at\n' +
-            '  https://github.com/mathquill/mathquill/wiki/%60dev%60-branch-(2014%E2%80%932015)-%E2%86%92-v0.10.0-Migration-Guide',
-        );
-    };
-    insistOnInterVer();
-    return MathQuill;
-  };
-  MathQuill.getInterface = getInterface;
-
-  var MIN = (getInterface.MIN = 1),
-    MAX = (getInterface.MAX = 2);
-  function getInterface(v) {
-    if (!(MIN <= v && v <= MAX))
-      throw (
-        'Only interface versions between ' + MIN + ' and ' + MAX + ' supported. You specified: ' + v
-      );
-
-    /**
-     * Function that takes an HTML element and, if it's the root HTML element of a
-     * static math or math or text field, returns an API object for it (else, null).
-     *
-     *   var mathfield = MQ.MathField(mathFieldSpan);
-     *   assert(MQ(mathFieldSpan).id === mathfield.id);
-     *   assert(MQ(mathFieldSpan).id === MQ(mathFieldSpan).id);
-     *
-     */
-    function MQ(el) {
-      if (!el || !el.nodeType) return null; // check that `el` is a HTML element, using the
-      // same technique as jQuery: https://github.com/jquery/jquery/blob/679536ee4b7a92ae64a5f58d90e9cc38c001e807/src/core/init.js#L92
-      var blockId = $(el).children('.mq-root-block').attr(mqBlockId);
-      var ctrlr = blockId && Node.byId[blockId].controller;
-      return ctrlr ? APIClasses[ctrlr.KIND_OF_MQ](ctrlr) : null;
-    }
-    var APIClasses = {};
-
-    MQ.L = L;
-    MQ.R = R;
-
-    function config(currentOptions, newOptions) {
-      if (newOptions && newOptions.handlers) {
-        newOptions.handlers = { fns: newOptions.handlers, APIClasses: APIClasses };
-      }
-      for (var name in newOptions)
-        if (Object.prototype.hasOwnProperty.call(newOptions, name)) {
-          var value = newOptions[name],
-            processor = optionProcessors[name];
-          currentOptions[name] = processor ? processor(value) : value;
-        }
-    }
-    MQ.config = function (opts) {
-      config(Options.p, opts);
-      return this;
-    };
-    MQ.registerEmbed = function (name, options) {
-      if (!/^[a-z][a-z0-9]*$/i.test(name)) {
-        throw 'Embed name must start with letter and be only letters and digits';
-      }
-      EMBEDS[name] = options;
-    };
-
-    var AbstractMathQuill = (APIClasses.AbstractMathQuill = P(Progenote, function (_) {
-      _.init = function (ctrlr) {
-        this.__controller = ctrlr;
-        this.__options = ctrlr.options;
-        this.id = ctrlr.id;
-        this.data = ctrlr.data;
-      };
-      _.__mathquillify = function (classNames) {
-        var ctrlr = this.__controller,
-          root = ctrlr.root,
-          el = ctrlr.container;
-        ctrlr.createTextarea();
-
-        el.attr('data-formula', el.text());
-
-        var contents = el.addClass(classNames).contents().detach();
-        root.jQ = $('<span class="mq-root-block"/>').attr(mqBlockId, root.id).appendTo(el);
-        this.latex(contents.text());
-
-        this.revert = function () {
-          return el
-            .empty()
-            .unbind('.mathquill')
-            .removeClass('mq-editable-field mq-math-mode mq-text-mode')
-            .removeAttr('data-formula')
-            .append(contents);
-        };
-      };
-      _.config = function (opts) {
-        config(this.__options, opts);
-        return this;
-      };
-      _.el = function () {
-        return this.__controller.container[0];
-      };
-      _.text = function () {
-        return this.__controller.exportText();
-      };
-      _.latex = function (latex) {
-        if (arguments.length > 0) {
-          this.__controller.renderLatexMath(latex);
-          if (this.__controller.blurred) this.__controller.cursor.hide().parent.blur();
-          return this;
-        }
-        return this.__controller.exportLatex();
-      };
-      _.html = function () {
-        return this.__controller.root.jQ
-          .html()
-          .replace(/ mathquill-(?:command|block)-id="?\d+"?/g, '')
-          .replace(/<span class="?mq-cursor( mq-blink)?"?>.?<\/span>/i, '')
-          .replace(/ mq-hasCursor|mq-hasCursor ?/, '')
-          .replace(/ class=(""|(?= |>))/g, '');
-      };
-      _.reflow = function () {
-        this.__controller.root.postOrder('reflow');
-        return this;
-      };
-    }));
-    MQ.prototype = AbstractMathQuill.prototype;
-
-    APIClasses.EditableField = P(AbstractMathQuill, function (_, super_) {
-      _.__mathquillify = function () {
-        super_.__mathquillify.apply(this, arguments);
-        this.__controller.editable = true;
-        this.__controller.delegateMouseEvents();
-        this.__controller.editablesTextareaEvents();
-        return this;
-      };
-      _.focus = function () {
-        this.__controller.textarea.focus();
-        return this;
-      };
-      _.blur = function () {
-        this.__controller.textarea.blur();
-        return this;
-      };
-      _.write = function (latex) {
-        this.__controller.writeLatex(latex);
-        this.__controller.scrollHoriz();
-        if (this.__controller.blurred) this.__controller.cursor.hide().parent.blur();
-        return this;
-      };
-      _.cmd = function (cmd) {
-        var ctrlr = this.__controller.notify(),
-          cursor = ctrlr.cursor;
-        if (/^\\[a-z]+$/i.test(cmd)) {
-          cmd = cmd.slice(1);
-          var klass = LatexCmds[cmd];
-          if (klass) {
-            cmd = klass(cmd);
-            if (cursor.selection) cmd.replaces(cursor.replaceSelection());
-            cmd.createLeftOf(cursor.show());
-            this.__controller.scrollHoriz();
-          } /* TODO: API needs better error reporting */ else;
-        } else cursor.parent.write(cursor, cmd);
-        if (ctrlr.blurred) cursor.hide().parent.blur();
-        return this;
-      };
-      _.select = function () {
-        var ctrlr = this.__controller;
-        ctrlr.notify('move').cursor.insAtRightEnd(ctrlr.root);
-        while (ctrlr.cursor[L]) ctrlr.selectLeft();
-        return this;
-      };
-      _.clearSelection = function () {
-        this.__controller.cursor.clearSelection();
-        return this;
-      };
-
-      _.moveToDirEnd = function (dir) {
-        this.__controller.notify('move').cursor.insAtDirEnd(dir, this.__controller.root);
-        return this;
-      };
-      _.moveToLeftEnd = function () {
-        return this.moveToDirEnd(L);
-      };
-      _.moveToRightEnd = function () {
-        return this.moveToDirEnd(R);
-      };
-
-      _.keystroke = function (keys) {
-        var keys = keys.replace(/^\s+|\s+$/g, '').split(/\s+/);
-        for (var i = 0; i < keys.length; i += 1) {
-          this.__controller.keystroke(keys[i], { preventDefault: noop });
-        }
-        return this;
-      };
-      _.typedText = function (text) {
-        for (var i = 0; i < text.length; i += 1) this.__controller.typedText(text.charAt(i));
-        return this;
-      };
-      _.dropEmbedded = function (pageX, pageY, options) {
-        var clientX = pageX - $(window).scrollLeft();
-        var clientY = pageY - $(window).scrollTop();
-
-        var el = document.elementFromPoint(clientX, clientY);
-        this.__controller.seek($(el), pageX, pageY);
-        var cmd = Embed().setOptions(options);
-        cmd.createLeftOf(this.__controller.cursor);
-      };
-      _.clickAt = function (clientX, clientY, target) {
-        target = target || document.elementFromPoint(clientX, clientY);
-
-        var ctrlr = this.__controller,
-          root = ctrlr.root;
-        if (!jQuery.contains(root.jQ[0], target)) target = root.jQ[0];
-        ctrlr.seek($(target), clientX + pageXOffset, clientY + pageYOffset);
-        if (ctrlr.blurred) this.focus();
-        return this;
-      };
-      _.ignoreNextMousedown = function (fn) {
-        this.__controller.cursor.options.ignoreNextMousedown = fn;
-        return this;
-      };
-    });
-    MQ.EditableField = function () {
-      throw "wtf don't call me, I'm 'abstract'";
-    };
-    MQ.EditableField.prototype = APIClasses.EditableField.prototype;
-
-    /**
-     * Export the API functions that MathQuill-ify an HTML element into API objects
-     * of each class. If the element had already been MathQuill-ified but into a
-     * different kind (or it's not an HTML element), return null.
-     */
-    for (var kind in API)
-      (function (kind, defAPIClass) {
-        var APIClass = (APIClasses[kind] = defAPIClass(APIClasses));
-        MQ[kind] = function (el, opts) {
-          var mq = MQ(el);
-          if (mq instanceof APIClass || !el || !el.nodeType) return mq;
-          var ctrlr = Controller(APIClass.RootBlock(), $(el), Options());
-          ctrlr.KIND_OF_MQ = kind;
-          return APIClass(ctrlr).__mathquillify(opts, v);
-        };
-        MQ[kind].prototype = APIClass.prototype;
-      })(kind, API[kind]);
-
-    return MQ;
-  }
-
-  MathQuill.noConflict = function () {
-    window.MathQuill = origMathQuill;
-    return MathQuill;
-  };
-  var origMathQuill = window.MathQuill;
-  window.MathQuill = MathQuill;
-
-  function RootBlockMixin(_) {
-    var names = 'moveOutOf deleteOutOf selectOutOf upOutOf downOutOf'.split(' ');
-    for (var i = 0; i < names.length; i += 1)
-      (function (name) {
-        _[name] = function (dir) {
-          this.controller.handle(name, dir);
-        };
-      })(names[i]);
-    _.reflow = function () {
-      this.controller.handle('reflow');
-      this.controller.handle('edited');
-      this.controller.handle('edit');
-    };
-  }
-  var Parser = P(function (_, super_, Parser) {
-    // The Parser object is a wrapper for a parser function.
-    // Externally, you use one to parse a string by calling
-    //   var result = SomeParser.parse('Me Me Me! Parse Me!');
-    // You should never call the constructor, rather you should
-    // construct your Parser from the base parsers and the
-    // parser combinator methods.
-
-    function parseError(stream, message) {
-      if (stream) {
-        stream = "'" + stream + "'";
-      } else {
-        stream = 'EOF';
-      }
-
-      throw 'Parse Error: ' + message + ' at ' + stream;
-    }
-
-    _.init = function (body) {
-      this._ = body;
-    };
-
-    _.parse = function (stream) {
-      return this.skip(eof)._('' + stream, success, parseError);
-
-      function success(stream, result) {
-        return result;
-      }
-    };
-
-    // -*- primitive combinators -*- //
-    _.or = function (alternative) {
-      pray('or is passed a parser', alternative instanceof Parser);
-
-      var self = this;
-
-      return Parser(function (stream, onSuccess, onFailure) {
-        return self._(stream, onSuccess, failure);
-
-        function failure(newStream) {
-          return alternative._(stream, onSuccess, onFailure);
-        }
-      });
-    };
-
-    _.then = function (next) {
-      var self = this;
-
-      return Parser(function (stream, onSuccess, onFailure) {
-        return self._(stream, success, onFailure);
-
-        function success(newStream, result) {
-          var nextParser = next instanceof Parser ? next : next(result);
-          pray('a parser is returned', nextParser instanceof Parser);
-          return nextParser._(newStream, onSuccess, onFailure);
-        }
-      });
-    };
-
-    // -*- optimized iterative combinators -*- //
-    _.many = function () {
-      var self = this;
-
-      return Parser(function (stream, onSuccess, onFailure) {
-        var xs = [];
-        while (self._(stream, success, failure));
-        return onSuccess(stream, xs);
-
-        function success(newStream, x) {
-          stream = newStream;
-          xs.push(x);
-          return true;
-        }
-
-        function failure() {
-          return false;
-        }
-      });
-    };
-
-    _.times = function (min, max) {
-      if (arguments.length < 2) max = min;
-      var self = this;
-
-      return Parser(function (stream, onSuccess, onFailure) {
-        var xs = [];
-        var result = true;
-        var failure;
-
-        for (var i = 0; i < min; i += 1) {
-          result = self._(stream, success, firstFailure);
-          if (!result) return onFailure(stream, failure);
-        }
-
-        for (; i < max && result; i += 1) {
-          result = self._(stream, success, secondFailure);
-        }
-
-        return onSuccess(stream, xs);
-
-        function success(newStream, x) {
-          xs.push(x);
-          stream = newStream;
-          return true;
-        }
-
-        function firstFailure(newStream, msg) {
-          failure = msg;
-          stream = newStream;
-          return false;
-        }
-
-        function secondFailure(newStream, msg) {
-          return false;
-        }
-      });
-    };
-
-    // -*- higher-level combinators -*- //
-    _.result = function (res) {
-      return this.then(succeed(res));
-    };
-    _.atMost = function (n) {
-      return this.times(0, n);
-    };
-    _.atLeast = function (n) {
-      var self = this;
-      return self.times(n).then(function (start) {
-        return self.many().map(function (end) {
-          return start.concat(end);
-        });
-      });
-    };
-
-    _.map = function (fn) {
-      return this.then(function (result) {
-        return succeed(fn(result));
-      });
-    };
-
-    _.skip = function (two) {
-      return this.then(function (result) {
-        return two.result(result);
-      });
-    };
-
-    // -*- primitive parsers -*- //
-    var string = (this.string = function (str) {
-      var len = str.length;
-      var expected = "expected '" + str + "'";
-
-      return Parser(function (stream, onSuccess, onFailure) {
-        var head = stream.slice(0, len);
-
-        if (head === str) {
-          return onSuccess(stream.slice(len), head);
-        } else {
-          return onFailure(stream, expected);
-        }
-      });
-    });
-
-    var regex = (this.regex = function (re) {
-      pray('regexp parser is anchored', re.toString().charAt(1) === '^');
-
-      var expected = 'expected ' + re;
-
-      return Parser(function (stream, onSuccess, onFailure) {
-        var match = re.exec(stream);
-
-        if (match) {
-          var result = match[0];
-          return onSuccess(stream.slice(result.length), result);
-        } else {
-          return onFailure(stream, expected);
-        }
-      });
-    });
-
-    var succeed = (Parser.succeed = function (result) {
-      return Parser(function (stream, onSuccess) {
-        return onSuccess(stream, result);
-      });
-    });
-
-    var fail = (Parser.fail = function (msg) {
-      return Parser(function (stream, _, onFailure) {
-        return onFailure(stream, msg);
-      });
-    });
-
-    var letter = (Parser.letter = regex(/^[a-z]/i));
-    var letters = (Parser.letters = regex(/^[a-z]*/i));
-    var digit = (Parser.digit = regex(/^[0-9]/));
-    var digits = (Parser.digits = regex(/^[0-9]*/));
-    var whitespace = (Parser.whitespace = regex(/^\s+/));
-    var optWhitespace = (Parser.optWhitespace = regex(/^\s*/));
-
-    var any = (Parser.any = Parser(function (stream, onSuccess, onFailure) {
-      if (!stream) return onFailure(stream, 'expected any character');
-
-      return onSuccess(stream.slice(1), stream.charAt(0));
-    }));
-
-    var all = (Parser.all = Parser(function (stream, onSuccess, onFailure) {
-      return onSuccess('', stream);
-    }));
-
-    var eof = (Parser.eof = Parser(function (stream, onSuccess, onFailure) {
-      if (stream) return onFailure(stream, 'expected EOF');
-
-      return onSuccess(stream, stream);
-    }));
-  });
-  /*************************************************
-   * Sane Keyboard Events Shim
-   *
-   * An abstraction layer wrapping the textarea in
-   * an object with methods to manipulate and listen
-   * to events on, that hides all the nasty cross-
-   * browser incompatibilities behind a uniform API.
-   *
-   * Design goal: This is a *HARD* internal
-   * abstraction barrier. Cross-browser
-   * inconsistencies are not allowed to leak through
-   * and be dealt with by event handlers. All future
-   * cross-browser issues that arise must be dealt
-   * with here, and if necessary, the API updated.
-   *
-   * Organization:
-   * - key values map and stringify()
-   * - saneKeyboardEvents()
-   *    + defer() and flush()
-   *    + event handler logic
-   *    + attach event handlers and export methods
-   ************************************************/
-
-  var saneKeyboardEvents = (function () {
-    // The following [key values][1] map was compiled from the
-    // [DOM3 Events appendix section on key codes][2] and
-    // [a widely cited report on cross-browser tests of key codes][3],
-    // except for 10: 'Enter', which I've empirically observed in Safari on iOS
-    // and doesn't appear to conflict with any other known key codes.
-    //
-    // [1]: http://www.w3.org/TR/2012/WD-DOM-Level-3-Events-20120614/#keys-keyvalues
-    // [2]: http://www.w3.org/TR/2012/WD-DOM-Level-3-Events-20120614/#fixed-virtual-key-codes
-    // [3]: http://unixpapa.com/js/key.html
-    var KEY_VALUES = {
-      8: 'Backspace',
-      9: 'Tab',
-
-      10: 'Enter', // for Safari on iOS
-
-      13: 'Enter',
-
-      16: 'Shift',
-      17: 'Control',
-      18: 'Alt',
-      20: 'CapsLock',
-
-      27: 'Esc',
-
-      32: 'Spacebar',
-
-      33: 'PageUp',
-      34: 'PageDown',
-      35: 'End',
-      36: 'Home',
-
-      37: 'Left',
-      38: 'Up',
-      39: 'Right',
-      40: 'Down',
-
-      45: 'Insert',
-
-      46: 'Del',
-
-      144: 'NumLock',
-    };
-
-    // To the extent possible, create a normalized string representation
-    // of the key combo (i.e., key code and modifier keys).
-    function stringify(evt) {
-      var which = evt.which || evt.keyCode;
-      var keyVal = KEY_VALUES[which];
-      var key;
-      var modifiers = [];
-
-      if (evt.ctrlKey) modifiers.push('Ctrl');
-      if (evt.originalEvent && evt.originalEvent.metaKey) modifiers.push('Meta');
-      if (evt.altKey) modifiers.push('Alt');
-      if (evt.shiftKey) modifiers.push('Shift');
-
-      key = keyVal || String.fromCharCode(which);
-
-      if (!modifiers.length && !keyVal) return key;
-
-      modifiers.push(key);
-      return modifiers.join('-');
-    }
-
-    // create a keyboard events shim that calls callbacks at useful times
-    // and exports useful public methods
-    return function saneKeyboardEvents(el, handlers) {
-      var keydown = null;
-      var keypress = null;
-
-      var textarea = jQuery(el);
-      var target = jQuery(handlers.container || textarea);
-
-      // checkTextareaFor() is called after keypress or paste events to
-      // say "Hey, I think something was just typed" or "pasted" (resp.),
-      // so that at all subsequent opportune times (next event or timeout),
-      // will check for expected typed or pasted text.
-      // Need to check repeatedly because #135: in Safari 5.1 (at least),
-      // after selecting something and then typing, the textarea is
-      // incorrectly reported as selected during the input event (but not
-      // subsequently).
-      var checkTextarea = noop,
-        timeoutId;
-      function checkTextareaFor(checker) {
-        checkTextarea = checker;
-        clearTimeout(timeoutId);
-        timeoutId = setTimeout(checker);
-      }
-      target.bind('keydown keypress input keyup focusout paste', function (e) {
-        checkTextarea(e);
-      });
-
-      // -*- public methods -*- //
-      function select(text) {
-        // check textarea at least once/one last time before munging (so
-        // no race condition if selection happens after keypress/paste but
-        // before checkTextarea), then never again ('cos it's been munged)
-        checkTextarea();
-        checkTextarea = noop;
-        clearTimeout(timeoutId);
-
-        textarea.val(text);
-        if (text && textarea[0].select) textarea[0].select();
-        shouldBeSelected = !!text;
-      }
-      var shouldBeSelected = false;
-
-      // -*- helper subroutines -*- //
-
-      // Determine whether there's a selection in the textarea.
-      // This will always return false in IE < 9, which don't support
-      // HTMLTextareaElement::selection{Start,End}.
-      function hasSelection() {
-        var dom = textarea[0];
-
-        if (!('selectionStart' in dom)) return false;
-        return dom.selectionStart !== dom.selectionEnd;
-      }
-
-      function handleKey() {
-        handlers.keystroke(stringify(keydown), keydown);
-      }
-
-      // -*- event handlers -*- //
-      function onKeydown(e) {
-        keydown = e;
-        keypress = null;
-
-        if (shouldBeSelected)
-          checkTextareaFor(function (e) {
-            if (!(e && e.type === 'focusout') && textarea[0].select) {
-              textarea[0].select(); // re-select textarea in case it's an unrecognized
-            }
-            checkTextarea = noop; // key that clears the selection, then never
-            clearTimeout(timeoutId); // again, 'cos next thing might be blur
-          });
-
-        handleKey();
-      }
-
-      function onKeypress(e) {
-        // call the key handler for repeated keypresses.
-        // This excludes keypresses that happen directly
-        // after keydown.  In that case, there will be
-        // no previous keypress, so we skip it here
-        if (keydown && keypress) handleKey();
-
-        keypress = e;
-
-        checkTextareaFor(typedText);
-      }
-      function typedText() {
-        // If there is a selection, the contents of the textarea couldn't
-        // possibly have just been typed in.
-        // This happens in browsers like Firefox and Opera that fire
-        // keypress for keystrokes that are not text entry and leave the
-        // selection in the textarea alone, such as Ctrl-C.
-        // Note: we assume that browsers that don't support hasSelection()
-        // also never fire keypress on keystrokes that are not text entry.
-        // This seems reasonably safe because:
-        // - all modern browsers including IE 9+ support hasSelection(),
-        //   making it extremely unlikely any browser besides IE < 9 won't
-        // - as far as we know IE < 9 never fires keypress on keystrokes
-        //   that aren't text entry, which is only as reliable as our
-        //   tests are comprehensive, but the IE < 9 way to do
-        //   hasSelection() is poorly documented and is also only as
-        //   reliable as our tests are comprehensive
-        // If anything like #40 or #71 is reported in IE < 9, see
-        // b1318e5349160b665003e36d4eedd64101ceacd8
-        if (hasSelection()) return;
-
-        var text = textarea.val();
-        if (text.length === 1) {
-          textarea.val('');
-          handlers.typedText(text);
-        } // in Firefox, keys that don't type text, just clear seln, fire keypress
-        // https://github.com/mathquill/mathquill/issues/293#issuecomment-40997668
-        else if (text && textarea[0].select) textarea[0].select(); // re-select if that's why we're here
-      }
-
-      function onBlur() {
-        keydown = keypress = null;
-      }
-
-      function onPaste(e) {
-        // browsers are dumb.
-        //
-        // In Linux, middle-click pasting causes onPaste to be called,
-        // when the textarea is not necessarily focused.  We focus it
-        // here to ensure that the pasted text actually ends up in the
-        // textarea.
-        //
-        // It's pretty nifty that by changing focus in this handler,
-        // we can change the target of the default action.  (This works
-        // on keydown too, FWIW).
-        //
-        // And by nifty, we mean dumb (but useful sometimes).
-        textarea.focus();
-
-        checkTextareaFor(pastedText);
-      }
-      function pastedText() {
-        var text = textarea.val();
-        textarea.val('');
-        if (text) handlers.paste(text);
-      }
-
-      // -*- attach event handlers -*- //
-      target.bind({
-        keydown: onKeydown,
-        keypress: onKeypress,
-        focusout: onBlur,
-        paste: onPaste,
-      });
-
-      // -*- export public methods -*- //
-      return {
-        select: select,
-      };
-    };
-  })();
-  /***********************************************
-   * Export math in a human-readable text format
-   * As you can see, only half-baked so far.
-   **********************************************/
-
-  Controller.open(function (_, super_) {
-    _.exportText = function () {
-      return this.root.foldChildren('', function (text, child) {
-        return text + child.text();
-      });
-    };
-  });
-  Controller.open(function (_) {
-    _.focusBlurEvents = function () {
-      var ctrlr = this,
-        root = ctrlr.root,
-        cursor = ctrlr.cursor;
-      var blurTimeout;
-      ctrlr.textarea
-        .focus(function () {
-          ctrlr.blurred = false;
-          clearTimeout(blurTimeout);
-          ctrlr.container.addClass('mq-focused');
-          if (!cursor.parent) cursor.insAtRightEnd(root);
-          if (cursor.selection) {
-            cursor.selection.jQ.removeClass('mq-blur');
-            ctrlr.selectionChanged(); //re-select textarea contents after tabbing away and back
-          } else cursor.show();
-        })
-        .blur(function () {
-          ctrlr.blurred = true;
-          blurTimeout = setTimeout(function () {
-            // wait for blur on window; if
-            root.postOrder('intentionalBlur'); // none, intentional blur: #264
-            cursor.clearSelection().endSelection();
-            blur();
-          });
-          $(window).on('blur', windowBlur);
-        });
-      function windowBlur() {
-        // blur event also fired on window, just switching
-        clearTimeout(blurTimeout); // tabs/windows, not intentional blur
-        if (cursor.selection) cursor.selection.jQ.addClass('mq-blur');
-        blur();
-      }
-      function blur() {
-        // not directly in the textarea blur handler so as to be
-        cursor.hide().parent.blur(); // synchronous with/in the same frame as
-        ctrlr.container.removeClass('mq-focused'); // clearing/blurring selection
-        $(window).off('blur', windowBlur);
-      }
-      ctrlr.blurred = true;
-      cursor.hide().parent.blur();
-    };
-  });
-
-  /**
-   * TODO: I wanted to move MathBlock::focus and blur here, it would clean
-   * up lots of stuff like, TextBlock::focus is set to MathBlock::focus
-   * and TextBlock::blur calls MathBlock::blur, when instead they could
-   * use inheritance and super_.
-   *
-   * Problem is, there's lots of calls to .focus()/.blur() on nodes
-   * outside Controller::focusBlurEvents(), such as .postOrder('blur') on
-   * insertion, which if MathBlock::blur becomes Node::blur, would add the
-   * 'blur' CSS class to all Symbol's (because .isEmpty() is true for all
-   * of them).
-   *
-   * I'm not even sure there aren't other troublesome calls to .focus() or
-   * .blur(), so this is TODO for now.
-   */
-  /*****************************************
-   * Deals with the browser DOM events from
-   * interaction with the typist.
-   ****************************************/
-
-  Controller.open(function (_) {
-    _.keystroke = function (key, evt) {
-      this.cursor.parent.keystroke(key, evt, this);
-    };
-  });
-
-  Node.open(function (_) {
-    _.keystroke = function (key, e, ctrlr) {
-      var cursor = ctrlr.cursor;
-
-      switch (key) {
-        case 'Ctrl-Shift-Backspace':
-        case 'Ctrl-Backspace':
-          ctrlr.ctrlDeleteDir(L);
-          break;
-
-        case 'Shift-Backspace':
-        case 'Backspace':
-          ctrlr.backspace();
-          break;
-
-        // Tab or Esc -> go one block right if it exists, else escape right.
-        case 'Esc':
-        case 'Tab':
-          ctrlr.escapeDir(R, key, e);
-          return;
-
-        // Shift-Tab -> go one block left if it exists, else escape left.
-        case 'Shift-Tab':
-        case 'Shift-Esc':
-          ctrlr.escapeDir(L, key, e);
-          return;
-
-        // End -> move to the end of the current block.
-        case 'End':
-          ctrlr.notify('move').cursor.insAtRightEnd(cursor.parent);
-          break;
-
-        // Ctrl-End -> move all the way to the end of the root block.
-        case 'Ctrl-End':
-          ctrlr.notify('move').cursor.insAtRightEnd(ctrlr.root);
-          break;
-
-        // Shift-End -> select to the end of the current block.
-        case 'Shift-End':
-          while (cursor[R]) {
-            ctrlr.selectRight();
-          }
-          break;
-
-        // Ctrl-Shift-End -> select to the end of the root block.
-        case 'Ctrl-Shift-End':
-          while (cursor[R] || cursor.parent !== ctrlr.root) {
-            ctrlr.selectRight();
-          }
-          break;
-
-        // Home -> move to the start of the root block or the current block.
-        case 'Home':
-          ctrlr.notify('move').cursor.insAtLeftEnd(cursor.parent);
-          break;
-
-        // Ctrl-Home -> move to the start of the current block.
-        case 'Ctrl-Home':
-          ctrlr.notify('move').cursor.insAtLeftEnd(ctrlr.root);
-          break;
-
-        // Shift-Home -> select to the start of the current block.
-        case 'Shift-Home':
-          while (cursor[L]) {
-            ctrlr.selectLeft();
-          }
-          break;
-
-        // Ctrl-Shift-Home -> move to the start of the root block.
-        case 'Ctrl-Shift-Home':
-          while (cursor[L] || cursor.parent !== ctrlr.root) {
-            ctrlr.selectLeft();
-          }
-          break;
-
-        case 'Left':
-          ctrlr.moveLeft();
-          break;
-        case 'Shift-Left':
-          ctrlr.selectLeft();
-          break;
-        case 'Ctrl-Left':
-          break;
-
-        case 'Right':
-          ctrlr.moveRight();
-          break;
-        case 'Shift-Right':
-          ctrlr.selectRight();
-          break;
-        case 'Ctrl-Right':
-          break;
-
-        case 'Up':
-          ctrlr.moveUp();
-          break;
-        case 'Down':
-          ctrlr.moveDown();
-          break;
-
-        case 'Shift-Up':
-          if (cursor[L]) {
-            while (cursor[L]) ctrlr.selectLeft();
-          } else {
-            ctrlr.selectLeft();
-          }
-
-        case 'Shift-Down':
-          if (cursor[R]) {
-            while (cursor[R]) ctrlr.selectRight();
-          } else {
-            ctrlr.selectRight();
-          }
-
-        case 'Ctrl-Up':
-          break;
-        case 'Ctrl-Down':
-          break;
-
-        case 'Ctrl-Shift-Del':
-        case 'Ctrl-Del':
-          ctrlr.ctrlDeleteDir(R);
-          break;
-
-        case 'Shift-Del':
-        case 'Del':
-          ctrlr.deleteForward();
-          break;
-
-        case 'Meta-A':
-        case 'Ctrl-A':
-          ctrlr.notify('move').cursor.insAtRightEnd(ctrlr.root);
-          while (cursor[L]) ctrlr.selectLeft();
-          break;
-
-        default:
-          return;
-      }
-      e.preventDefault();
-      ctrlr.scrollHoriz();
-    };
-
-    _.moveOutOf =
-      _.moveTowards =
-      _.deleteOutOf =
-      _.deleteTowards =
-      _.unselectInto =
-      _.selectOutOf =
-      _.selectTowards =
-        function () {
-          // called by Controller::escapeDir, moveDir // called by Controller::moveDir // called by Controller::deleteDir // called by Controller::deleteDir // called by Controller::selectDir // called by Controller::selectDir // called by Controller::selectDir
-          pray('overridden or never called on this node');
-        };
-  });
-
-  Controller.open(function (_) {
-    this.onNotify(function (e) {
-      if (e === 'move' || e === 'upDown') this.show().clearSelection();
-    });
-    _.escapeDir = function (dir, key, e) {
-      prayDirection(dir);
-      var cursor = this.cursor;
-
-      // only prevent default of Tab if not in the root editable
-      if (cursor.parent !== this.root) e.preventDefault();
-
-      // want to be a noop if in the root editable (in fact, Tab has an unrelated
-      // default browser action if so)
-      if (cursor.parent === this.root) return;
-
-      cursor.parent.moveOutOf(dir, cursor);
-      return this.notify('move');
-    };
-
-    optionProcessors.leftRightIntoCmdGoes = function (updown) {
-      if (updown && updown !== 'up' && updown !== 'down') {
-        throw '"up" or "down" required for leftRightIntoCmdGoes option, ' + 'got "' + updown + '"';
-      }
-      return updown;
-    };
-    _.moveDir = function (dir) {
-      prayDirection(dir);
-      var cursor = this.cursor,
-        updown = cursor.options.leftRightIntoCmdGoes;
-
-      if (cursor.selection) {
-        cursor.insDirOf(dir, cursor.selection.ends[dir]);
-      } else if (cursor[dir]) cursor[dir].moveTowards(dir, cursor, updown);
-      else cursor.parent.moveOutOf(dir, cursor, updown);
-
-      return this.notify('move');
-    };
-    _.moveLeft = function () {
-      return this.moveDir(L);
-    };
-    _.moveRight = function () {
-      return this.moveDir(R);
-    };
-
-    /**
-     * moveUp and moveDown have almost identical algorithms:
-     * - first check left and right, if so insAtLeft/RightEnd of them
-     * - else check the parent's 'upOutOf'/'downOutOf' property:
-     *   + if it's a function, call it with the cursor as the sole argument and
-     *     use the return value as if it were the value of the property
-     *   + if it's a Node, jump up or down into it:
-     *     - if there is a cached Point in the block, insert there
-     *     - else, seekHoriz within the block to the current x-coordinate (to be
-     *       as close to directly above/below the current position as possible)
-     *   + unless it's exactly `true`, stop bubbling
-     */
-    _.moveUp = function () {
-      return moveUpDown(this, 'up');
-    };
-    _.moveDown = function () {
-      return moveUpDown(this, 'down');
-    };
-    function moveUpDown(self, dir) {
-      var cursor = self.notify('upDown').cursor;
-      var dirInto = dir + 'Into',
-        dirOutOf = dir + 'OutOf';
-      if (cursor[R][dirInto]) cursor.insAtLeftEnd(cursor[R][dirInto]);
-      else if (cursor[L][dirInto]) cursor.insAtRightEnd(cursor[L][dirInto]);
-      else {
-        cursor.parent.bubble(function (ancestor) {
-          var prop = ancestor[dirOutOf];
-          if (prop) {
-            if (typeof prop === 'function') prop = ancestor[dirOutOf](cursor);
-            if (prop instanceof Node) cursor.jumpUpDown(ancestor, prop);
-            if (prop !== true) return false;
-          }
-        });
-      }
-      return self;
-    }
-    this.onNotify(function (e) {
-      if (e !== 'upDown') this.upDownCache = {};
-    });
-
-    this.onNotify(function (e) {
-      if (e === 'edit') this.show().deleteSelection();
-    });
-    _.deleteDir = function (dir) {
-      prayDirection(dir);
-      var cursor = this.cursor;
-
-      var hadSelection = cursor.selection;
-      this.notify('edit'); // deletes selection if present
-      if (!hadSelection) {
-        if (cursor[dir]) cursor[dir].deleteTowards(dir, cursor);
-        else cursor.parent.deleteOutOf(dir, cursor);
-      }
-
-      if (cursor[L].siblingDeleted) cursor[L].siblingDeleted(cursor.options, R);
-      if (cursor[R].siblingDeleted) cursor[R].siblingDeleted(cursor.options, L);
-      cursor.parent.bubble('reflow');
-
-      return this;
-    };
-    _.ctrlDeleteDir = function (dir) {
-      prayDirection(dir);
-      var cursor = this.cursor;
-      if (!cursor[L] || cursor.selection) return ctrlr.deleteDir();
-
-      this.notify('edit');
-      Fragment(cursor.parent.ends[L], cursor[L]).remove();
-      cursor.insAtDirEnd(L, cursor.parent);
-
-      if (cursor[L].siblingDeleted) cursor[L].siblingDeleted(cursor.options, R);
-      if (cursor[R].siblingDeleted) cursor[R].siblingDeleted(cursor.options, L);
-      cursor.parent.bubble('reflow');
-
-      return this;
-    };
-    _.backspace = function () {
-      return this.deleteDir(L);
-    };
-    _.deleteForward = function () {
-      return this.deleteDir(R);
-    };
-
-    this.onNotify(function (e) {
-      if (e !== 'select') this.endSelection();
-    });
-    _.selectDir = function (dir) {
-      var cursor = this.notify('select').cursor,
-        seln = cursor.selection;
-      prayDirection(dir);
-
-      if (!cursor.anticursor) cursor.startSelection();
-
-      var node = cursor[dir];
-      if (node) {
-        // "if node we're selecting towards is inside selection (hence retracting)
-        // and is on the *far side* of the selection (hence is only node selected)
-        // and the anticursor is *inside* that node, not just on the other side"
-        if (seln && seln.ends[dir] === node && cursor.anticursor[-dir] !== node) {
-          node.unselectInto(dir, cursor);
-        } else node.selectTowards(dir, cursor);
-      } else cursor.parent.selectOutOf(dir, cursor);
-
-      cursor.clearSelection();
-      cursor.select() || cursor.show();
-    };
-    _.selectLeft = function () {
-      return this.selectDir(L);
-    };
-    _.selectRight = function () {
-      return this.selectDir(R);
-    };
-  });
-  // Parser MathBlock
-  var latexMathParser = (function () {
-    function commandToBlock(cmd) {
-      // can also take in a Fragment
-      var block = MathBlock();
-      cmd.adopt(block, 0, 0);
-      return block;
-    }
-    function joinBlocks(blocks) {
-      var firstBlock = blocks[0] || MathBlock();
-
-      for (var i = 1; i < blocks.length; i += 1) {
-        blocks[i].children().adopt(firstBlock, firstBlock.ends[R], 0);
-      }
-
-      return firstBlock;
-    }
-
-    var string = Parser.string;
-    var regex = Parser.regex;
-    var letter = Parser.letter;
-    var any = Parser.any;
-    var optWhitespace = Parser.optWhitespace;
-    var succeed = Parser.succeed;
-    var fail = Parser.fail;
-
-    // Parsers yielding either MathCommands, or Fragments of MathCommands
-    //   (either way, something that can be adopted by a MathBlock)
-    var variable = letter.map(function (c) {
-      return Letter(c);
-    });
-    var symbol = regex(/^[^${}\\_^]/).map(function (c) {
-      return VanillaSymbol(c);
-    });
-
-    var controlSequence = regex(/^[^\\a-eg-zA-Z]/) // hotfix #164; match MathBlock::write
-      .or(
-        string('\\').then(
-          regex(/^[a-z]+/i)
-            .or(regex(/^\s+/).result(' '))
-            .or(any),
-        ),
-      )
-      .then(function (ctrlSeq) {
-        var cmdKlass = LatexCmds[ctrlSeq];
-
-        if (cmdKlass) {
-          return cmdKlass(ctrlSeq).parser();
-        } else {
-          return fail('unknown command: \\' + ctrlSeq);
-        }
-      });
-    var command = controlSequence.or(variable).or(symbol);
-    // Parsers yielding MathBlocks
-    var mathGroup = string('{')
-      .then(function () {
-        return mathSequence;
-      })
-      .skip(string('}'));
-    var mathBlock = optWhitespace.then(mathGroup.or(command.map(commandToBlock)));
-    var mathSequence = mathBlock.many().map(joinBlocks).skip(optWhitespace);
-
-    var optMathBlock = string('[')
-      .then(
-        mathBlock
-          .then(function (block) {
-            return block.join('latex') !== ']' ? succeed(block) : fail();
-          })
-          .many()
-          .map(joinBlocks)
-          .skip(optWhitespace),
-      )
-      .skip(string(']'));
-    var latexMath = mathSequence;
-
-    latexMath.block = mathBlock;
-    latexMath.optBlock = optMathBlock;
-    return latexMath;
-  })();
-
-  Controller.open(function (_, super_) {
-    _.exportLatex = function () {
-      return this.root.latex().replace(/(\\[a-z]+) (?![a-z])/gi, '$1');
-    };
-    _.writeLatex = function (latex) {
-      var cursor = this.notify('edit').cursor;
-
-      var all = Parser.all;
-      var eof = Parser.eof;
-
-      var block = latexMathParser.skip(eof).or(all.result(false)).parse(latex);
-
-      if (block && !block.isEmpty()) {
-        block.children().adopt(cursor.parent, cursor[L], cursor[R]);
-        var jQ = block.jQize();
-        jQ.insertBefore(cursor.jQ);
-        cursor[L] = block.ends[R];
-        block.finalizeInsert(cursor.options, cursor);
-        if (block.ends[R][R].siblingCreated) block.ends[R][R].siblingCreated(cursor.options, L);
-        if (block.ends[L][L].siblingCreated) block.ends[L][L].siblingCreated(cursor.options, R);
-        cursor.parent.bubble('reflow');
-      }
-
-      return this;
-    };
-    _.renderLatexMath = function (latex) {
-      var root = this.root,
-        cursor = this.cursor;
-
-      var all = Parser.all;
-      var eof = Parser.eof;
-
-      var block = latexMathParser.skip(eof).or(all.result(false)).parse(latex);
-
-      root.eachChild('postOrder', 'dispose');
-      root.ends[L] = root.ends[R] = 0;
-
-      if (block) {
-        block.children().adopt(root, 0, 0);
-      }
-
-      var jQ = root.jQ;
-
-      if (block) {
-        var html = block.join('html');
-        jQ.html(html);
-        root.jQize(jQ.children());
-        root.finalizeInsert(cursor.options);
-      } else {
-        jQ.empty();
-      }
-
-      delete cursor.selection;
-      cursor.insAtRightEnd(root);
-    };
-    _.renderLatexText = function (latex) {
-      var root = this.root,
-        cursor = this.cursor;
-
-      root.jQ.children().slice(1).remove();
-      root.eachChild('postOrder', 'dispose');
-      root.ends[L] = root.ends[R] = 0;
-      delete cursor.selection;
-      cursor.show().insAtRightEnd(root);
-
-      var regex = Parser.regex;
-      var string = Parser.string;
-      var eof = Parser.eof;
-      var all = Parser.all;
-
-      // Parser RootMathCommand
-      var mathMode = string('$')
-        .then(latexMathParser)
-        // because TeX is insane, math mode doesn't necessarily
-        // have to end.  So we allow for the case that math mode
-        // continues to the end of the stream.
-        .skip(string('$').or(eof))
-        .map(function (block) {
-          // HACK FIXME: this shouldn't have to have access to cursor
-          var rootMathCommand = RootMathCommand(cursor);
-
-          rootMathCommand.createBlocks();
-          var rootMathBlock = rootMathCommand.ends[L];
-          block.children().adopt(rootMathBlock, 0, 0);
-
-          return rootMathCommand;
-        });
-      var escapedDollar = string('\\$').result('$');
-      var textChar = escapedDollar.or(regex(/^[^$]/)).map(VanillaSymbol);
-      var latexText = mathMode.or(textChar).many();
-      var commands = latexText.skip(eof).or(all.result(false)).parse(latex);
-
-      if (commands) {
-        for (var i = 0; i < commands.length; i += 1) {
-          commands[i].adopt(root, root.ends[R], 0);
-        }
-
-        root.jQize().appendTo(root.jQ);
-
-        root.finalizeInsert(cursor.options);
-      }
-    };
-  });
-  /********************************************************
-   * Deals with mouse events for clicking, drag-to-select
-   *******************************************************/
-
-  Controller.open(function (_) {
-    Options.p.ignoreNextMousedown = noop;
-    _.delegateMouseEvents = function () {
-      var ultimateRootjQ = this.root.jQ;
-      //drag-to-select event handling
-      this.container.bind('mousedown.mathquill', function (e) {
-        var rootjQ = $(e.target).closest('.mq-root-block');
-        var root = Node.byId[rootjQ.attr(mqBlockId) || ultimateRootjQ.attr(mqBlockId)];
-        var ctrlr = root.controller,
-          cursor = ctrlr.cursor,
-          blink = cursor.blink;
-        var textareaSpan = ctrlr.textareaSpan,
-          textarea = ctrlr.textarea;
-
-        e.preventDefault(); // doesn't work in IE\u22648, but it's a one-line fix:
-        e.target.unselectable = true; // http://jsbin.com/yagekiji/1
-
-        if (cursor.options.ignoreNextMousedown(e)) return;
-        else cursor.options.ignoreNextMousedown = noop;
-
-        var target;
-        function mousemove(e) {
-          target = $(e.target);
-        }
-        function docmousemove(e) {
-          if (!cursor.anticursor) cursor.startSelection();
-          ctrlr.seek(target, e.pageX, e.pageY).cursor.select();
-          target = undefined;
-        }
-        // outside rootjQ, the MathQuill node corresponding to the target (if any)
-        // won't be inside this root, so don't mislead Controller::seek with it
-
-        function mouseup(e) {
-          cursor.blink = blink;
-          if (!cursor.selection) {
-            if (ctrlr.editable) {
-              cursor.show();
-            } else {
-              textareaSpan.detach();
-            }
-          }
-
-          // delete the mouse handlers now that we're not dragging anymore
-          rootjQ.unbind('mousemove', mousemove);
-          $(e.target.ownerDocument).unbind('mousemove', docmousemove).unbind('mouseup', mouseup);
-        }
-
-        if (ctrlr.blurred) {
-          if (!ctrlr.editable) rootjQ.prepend(textareaSpan);
-          textarea.focus();
-        }
-
-        cursor.blink = noop;
-        ctrlr.seek($(e.target), e.pageX, e.pageY).cursor.startSelection();
-
-        rootjQ.mousemove(mousemove);
-        $(e.target.ownerDocument).mousemove(docmousemove).mouseup(mouseup);
-        // listen on document not just body to not only hear about mousemove and
-        // mouseup on page outside field, but even outside page, except iframes: https://github.com/mathquill/mathquill/commit/8c50028afcffcace655d8ae2049f6e02482346c5#commitcomment-6175800
-      });
-    };
-  });
-
-  Controller.open(function (_) {
-    _.seek = function (target, pageX, pageY) {
-      var cursor = this.notify('select').cursor;
-
-      if (target) {
-        var nodeId = target.attr(mqBlockId) || target.attr(mqCmdId);
-        if (!nodeId) {
-          var targetParent = target.parent();
-          nodeId = targetParent.attr(mqBlockId) || targetParent.attr(mqCmdId);
-        }
-      }
-      var node = nodeId ? Node.byId[nodeId] : this.root;
-      pray('nodeId is the id of some Node that exists', node);
-
-      // don't clear selection until after getting node from target, in case
-      // target was selection span, otherwise target will have no parent and will
-      // seek from root, which is less accurate (e.g. fraction)
-      cursor.clearSelection().show();
-
-      node.seek(pageX, cursor);
-      this.scrollHoriz(); // before .selectFrom when mouse-selecting, so
-      // always hits no-selection case in scrollHoriz and scrolls slower
-      return this;
-    };
-  });
-  /***********************************************
-   * Horizontal panning for editable fields that
-   * overflow their width
-   **********************************************/
-
-  Controller.open(function (_) {
-    _.scrollHoriz = function () {
-      var cursor = this.cursor,
-        seln = cursor.selection;
-      var rootRect = this.root.jQ[0].getBoundingClientRect();
-      if (!seln) {
-        var x = cursor.jQ[0].getBoundingClientRect().left;
-        if (x > rootRect.right - 20) var scrollBy = x - (rootRect.right - 20);
-        else if (x < rootRect.left + 20) var scrollBy = x - (rootRect.left + 20);
-        else return;
-      } else {
-        var rect = seln.jQ[0].getBoundingClientRect();
-        var overLeft = rect.left - (rootRect.left + 20);
-        var overRight = rect.right - (rootRect.right - 20);
-        if (seln.ends[L] === cursor[R]) {
-          if (overLeft < 0) var scrollBy = overLeft;
-          else if (overRight > 0) {
-            if (rect.left - overRight < rootRect.left + 20) var scrollBy = overLeft;
-            else var scrollBy = overRight;
-          } else return;
-        } else {
-          if (overRight > 0) var scrollBy = overRight;
-          else if (overLeft < 0) {
-            if (rect.right - overLeft > rootRect.right - 20) var scrollBy = overRight;
-            else var scrollBy = overLeft;
-          } else return;
-        }
-      }
-      this.root.jQ.stop().animate({ scrollLeft: '+=' + scrollBy }, 100);
-    };
-  });
-  /*********************************************
-   * Manage the MathQuill instance's textarea
-   * (as owned by the Controller)
-   ********************************************/
-
-  Controller.open(function (_) {
-    Options.p.substituteTextarea = function () {
-      return $(
-        '<textarea autocapitalize=off autocomplete=off autocorrect=off ' +
-          'spellcheck=false x-palm-disable-ste-all=true />',
-      )[0];
-    };
-    _.createTextarea = function () {
-      var textareaSpan = (this.textareaSpan = $('<span class="mq-textarea"></span>')),
-        textarea = this.options.substituteTextarea();
-      if (!textarea.nodeType) {
-        throw 'substituteTextarea() must return a DOM element, got ' + textarea;
-      }
-      textarea = this.textarea = $(textarea).appendTo(textareaSpan);
-
-      var ctrlr = this;
-      ctrlr.cursor.selectionChanged = function () {
-        ctrlr.selectionChanged();
-      };
-      ctrlr.container.bind('copy', function () {
-        ctrlr.setTextareaSelection();
-      });
-    };
-    _.selectionChanged = function () {
-      var ctrlr = this;
-      forceIERedraw(ctrlr.container[0]);
-
-      // throttle calls to setTextareaSelection(), because setting textarea.value
-      // and/or calling textarea.select() can have anomalously bad performance:
-      // https://github.com/mathquill/mathquill/issues/43#issuecomment-1399080
-      if (ctrlr.textareaSelectionTimeout === undefined) {
-        ctrlr.textareaSelectionTimeout = setTimeout(function () {
-          ctrlr.setTextareaSelection();
-        });
-      }
-    };
-    _.setTextareaSelection = function () {
-      this.textareaSelectionTimeout = undefined;
-      var latex = '';
-      if (this.cursor.selection) {
-        latex = this.cursor.selection.join('latex');
-        if (this.options.statelessClipboard) {
-          // FIXME: like paste, only this works for math fields; should ask parent
-          latex = '$' + latex + '$';
-        }
-      }
-      this.selectFn(latex);
-    };
-    _.staticMathTextareaEvents = function () {
-      var ctrlr = this,
-        root = ctrlr.root,
-        cursor = ctrlr.cursor,
-        textarea = ctrlr.textarea,
-        textareaSpan = ctrlr.textareaSpan;
-
-      this.container.prepend('<span class="mq-selectable">$' + ctrlr.exportLatex() + '$</span>');
-      ctrlr.blurred = true;
-      textarea
-        .bind('cut paste', false)
-        .focus(function () {
-          ctrlr.blurred = false;
-        })
-        .blur(function () {
-          if (cursor.selection) cursor.selection.clear();
-          setTimeout(detach); //detaching during blur explodes in WebKit
-        });
-      function detach() {
-        textareaSpan.detach();
-        ctrlr.blurred = true;
-      }
-
-      ctrlr.selectFn = function (text) {
-        textarea.val(text);
-        if (text) textarea.select();
-      };
-    };
-    _.editablesTextareaEvents = function () {
-      var ctrlr = this,
-        root = ctrlr.root,
-        cursor = ctrlr.cursor,
-        textarea = ctrlr.textarea,
-        textareaSpan = ctrlr.textareaSpan;
-
-      var keyboardEventsShim = saneKeyboardEvents(textarea, this);
-      this.selectFn = function (text) {
-        keyboardEventsShim.select(text);
-      };
-
-      this.container.prepend(textareaSpan).on('cut', function (e) {
-        if (cursor.selection) {
-          setTimeout(function () {
-            ctrlr.notify('edit'); // deletes selection if present
-            cursor.parent.bubble('reflow');
-          });
-        }
-      });
-
-      this.focusBlurEvents();
-    };
-    _.typedText = function (ch) {
-      if (ch === '\n') return this.handle('enter');
-      var cursor = this.notify().cursor;
-      cursor.parent.write(cursor, ch);
-      this.scrollHoriz();
-    };
-    _.paste = function (text) {
-      // TODO: document `statelessClipboard` config option in README, after
-      // making it work like it should, that is, in both text and math mode
-      // (currently only works in math fields, so worse than pointless, it
-      //  only gets in the way by \text{}-ifying pasted stuff and $-ifying
-      //  cut/copied LaTeX)
-      if (this.options.statelessClipboard) {
-        if (text.slice(0, 1) === '$' && text.slice(-1) === '$') {
-          text = text.slice(1, -1);
-        } else {
-          text = '\\text{' + text + '}';
-        }
-      }
-      // FIXME: this always inserts math or a TextBlock, even in a RootTextBlock
-      this.writeLatex(text).cursor.show();
-    };
-  });
-  /*************************************************
-   * Abstract classes of math blocks and commands.
-   ************************************************/
-
-  /**
-   * Math tree node base class.
-   * Some math-tree-specific extensions to Node.
-   * Both MathBlock's and MathCommand's descend from it.
-   */
-  var MathElement = P(Node, function (_, super_) {
-    _.finalizeInsert = function (options, cursor) {
-      // `cursor` param is only for
-      // SupSub::contactWeld, and is deliberately only passed in by writeLatex,
-      // see ea7307eb4fac77c149a11ffdf9a831df85247693
-      var self = this;
-      self.postOrder('finalizeTree', options);
-      self.postOrder('contactWeld', cursor);
-
-      // note: this order is important.
-      // empty elements need the empty box provided by blur to
-      // be present in order for their dimensions to be measured
-      // correctly by 'reflow' handlers.
-      self.postOrder('blur');
-
-      self.postOrder('reflow');
-      if (self[R].siblingCreated) self[R].siblingCreated(options, L);
-      if (self[L].siblingCreated) self[L].siblingCreated(options, R);
-      self.bubble('reflow');
-    };
-  });
-
-  /**
-   * Commands and operators, like subscripts, exponents, or fractions.
-   * Descendant commands are organized into blocks.
-   */
-  var MathCommand = P(MathElement, function (_, super_) {
-    _.init = function (ctrlSeq, htmlTemplate, textTemplate) {
-      var cmd = this;
-      super_.init.call(cmd);
-
-      if (!cmd.ctrlSeq) cmd.ctrlSeq = ctrlSeq;
-      if (htmlTemplate) cmd.htmlTemplate = htmlTemplate;
-      if (textTemplate) cmd.textTemplate = textTemplate;
-    };
-
-    // obvious methods
-    _.replaces = function (replacedFragment) {
-      replacedFragment.disown();
-      this.replacedFragment = replacedFragment;
-    };
-    _.isEmpty = function () {
-      return this.foldChildren(true, function (isEmpty, child) {
-        return isEmpty && child.isEmpty();
-      });
-    };
-
-    _.parser = function () {
-      var block = latexMathParser.block;
-      var self = this;
-
-      return block.times(self.numBlocks()).map(function (blocks) {
-        self.blocks = blocks;
-
-        for (var i = 0; i < blocks.length; i += 1) {
-          blocks[i].adopt(self, self.ends[R], 0);
-        }
-
-        return self;
-      });
-    };
-
-    // createLeftOf(cursor) and the methods it calls
-    _.createLeftOf = function (cursor) {
-      var cmd = this;
-      var replacedFragment = cmd.replacedFragment;
-
-      cmd.createBlocks();
-      super_.createLeftOf.call(cmd, cursor);
-      if (replacedFragment) {
-        replacedFragment.adopt(cmd.ends[L], 0, 0);
-        replacedFragment.jQ.appendTo(cmd.ends[L].jQ);
-      }
-      cmd.finalizeInsert(cursor.options);
-      cmd.placeCursor(cursor);
-    };
-    _.createBlocks = function () {
-      var cmd = this,
-        numBlocks = cmd.numBlocks(),
-        blocks = (cmd.blocks = Array(numBlocks));
-
-      for (var i = 0; i < numBlocks; i += 1) {
-        var newBlock = (blocks[i] = MathBlock());
-        newBlock.adopt(cmd, cmd.ends[R], 0);
-      }
-    };
-    _.placeCursor = function (cursor) {
-      //insert the cursor at the right end of the first empty child, searching
-      //left-to-right, or if none empty, the right end child
-      cursor.insAtRightEnd(
-        this.foldChildren(this.ends[L], function (leftward, child) {
-          return leftward.isEmpty() ? leftward : child;
-        }),
-      );
-    };
-
-    // editability methods: called by the cursor for editing, cursor movements,
-    // and selection of the MathQuill tree, these all take in a direction and
-    // the cursor
-    _.moveTowards = function (dir, cursor, updown) {
-      var updownInto = updown && this[updown + 'Into'];
-      cursor.insAtDirEnd(-dir, updownInto || this.ends[-dir]);
-    };
-    _.deleteTowards = function (dir, cursor) {
-      if (this.isEmpty()) cursor[dir] = this.remove()[dir];
-      else this.moveTowards(dir, cursor, null);
-    };
-    _.selectTowards = function (dir, cursor) {
-      cursor[-dir] = this;
-      cursor[dir] = this[dir];
-    };
-    _.selectChildren = function () {
-      return Selection(this, this);
-    };
-    _.unselectInto = function (dir, cursor) {
-      cursor.insAtDirEnd(-dir, cursor.anticursor.ancestors[this.id]);
-    };
-    _.seek = function (pageX, cursor) {
-      function getBounds(node) {
-        var bounds = {};
-        bounds[L] = node.jQ.offset().left;
-        bounds[R] = bounds[L] + node.jQ.outerWidth();
-        return bounds;
-      }
-
-      var cmd = this;
-      var cmdBounds = getBounds(cmd);
-
-      if (pageX < cmdBounds[L]) return cursor.insLeftOf(cmd);
-      if (pageX > cmdBounds[R]) return cursor.insRightOf(cmd);
-
-      var leftLeftBound = cmdBounds[L];
-      cmd.eachChild(function (block) {
-        var blockBounds = getBounds(block);
-        if (pageX < blockBounds[L]) {
-          // closer to this block's left bound, or the bound left of that?
-          if (pageX - leftLeftBound < blockBounds[L] - pageX) {
-            if (block[L]) cursor.insAtRightEnd(block[L]);
-            else cursor.insLeftOf(cmd);
-          } else cursor.insAtLeftEnd(block);
-          return false;
-        } else if (pageX > blockBounds[R]) {
-          if (block[R]) leftLeftBound = blockBounds[R];
-          // continue to next block
-          else {
-            // last (rightmost) block
-            // closer to this block's right bound, or the cmd's right bound?
-            if (cmdBounds[R] - pageX < pageX - blockBounds[R]) {
-              cursor.insRightOf(cmd);
-            } else cursor.insAtRightEnd(block);
-          }
-        } else {
-          block.seek(pageX, cursor);
-          return false;
-        }
-      });
-    };
-
-    // methods involved in creating and cross-linking with HTML DOM nodes
-    /*
-    They all expect an .htmlTemplate like
-      '<span>&0</span>'
-    or
-      '<span><span>&0</span><span>&1</span></span>'
-
-    See html.test.js for more examples.
-
-    Requirements:
-    - For each block of the command, there must be exactly one "block content
-      marker" of the form '&<number>' where <number> is the 0-based index of the
-      block. (Like the LaTeX \newcommand syntax, but with a 0-based rather than
-      1-based index, because JavaScript because C because Dijkstra.)
-    - The block content marker must be the sole contents of the containing
-      element, there can't even be surrounding whitespace, or else we can't
-      guarantee sticking to within the bounds of the block content marker when
-      mucking with the HTML DOM.
-    - The HTML not only must be well-formed HTML (of course), but also must
-      conform to the XHTML requirements on tags, specifically all tags must
-      either be self-closing (like '<br/>') or come in matching pairs.
-      Close tags are never optional.
-
-    Note that &<number> isn't well-formed HTML; if you wanted a literal '&123',
-    your HTML template would have to have '&amp;123'.
-  */
-    _.numBlocks = function () {
-      var matches = this.htmlTemplate.match(/&\d+/g);
-      return matches ? matches.length : 0;
-    };
-    _.html = function () {
-      // Render the entire math subtree rooted at this command, as HTML.
-      // Expects .createBlocks() to have been called already, since it uses the
-      // .blocks array of child blocks.
-      //
-      // See html.test.js for example templates and intended outputs.
-      //
-      // Given an .htmlTemplate as described above,
-      // - insert the mathquill-command-id attribute into all top-level tags,
-      //   which will be used to set this.jQ in .jQize().
-      //   This is straightforward:
-      //     * tokenize into tags and non-tags
-      //     * loop through top-level tokens:
-      //         * add #cmdId attribute macro to top-level self-closing tags
-      //         * else add #cmdId attribute macro to top-level open tags
-      //             * skip the matching top-level close tag and all tag pairs
-      //               in between
-      // - for each block content marker,
-      //     + replace it with the contents of the corresponding block,
-      //       rendered as HTML
-      //     + insert the mathquill-block-id attribute into the containing tag
-      //   This is even easier, a quick regex replace, since block tags cannot
-      //   contain anything besides the block content marker.
-      //
-      // Two notes:
-      // - The outermost loop through top-level tokens should never encounter any
-      //   top-level close tags, because we should have first encountered a
-      //   matching top-level open tag, all inner tags should have appeared in
-      //   matching pairs and been skipped, and then we should have skipped the
-      //   close tag in question.
-      // - All open tags should have matching close tags, which means our inner
-      //   loop should always encounter a close tag and drop nesting to 0. If
-      //   a close tag is missing, the loop will continue until i >= tokens.length
-      //   and token becomes undefined. This will not infinite loop, even in
-      //   production without pray(), because it will then TypeError on .slice().
-
-      var cmd = this;
-      var blocks = cmd.blocks;
-      var cmdId = ' mathquill-command-id=' + cmd.id;
-      var tokens = cmd.htmlTemplate.match(/<[^<>]+>|[^<>]+/g);
-
-      pray('no unmatched angle brackets', tokens.join('') === this.htmlTemplate);
-
-      // add cmdId to all top-level tags
-      for (var i = 0, token = tokens[0]; token; i += 1, token = tokens[i]) {
-        // top-level self-closing tags
-        if (token.slice(-2) === '/>') {
-          tokens[i] = token.slice(0, -2) + cmdId + '/>';
-        }
-        // top-level open tags
-        else if (token.charAt(0) === '<') {
-          pray('not an unmatched top-level close tag', token.charAt(1) !== '/');
-
-          tokens[i] = token.slice(0, -1) + cmdId + '>';
-
-          // skip matching top-level close tag and all tag pairs in between
-          var nesting = 1;
-          do {
-            ((i += 1), (token = tokens[i]));
-            pray('no missing close tags', token);
-            // close tags
-            if (token.slice(0, 2) === '</') {
-              nesting -= 1;
-            }
-            // non-self-closing open tags
-            else if (token.charAt(0) === '<' && token.slice(-2) !== '/>') {
-              nesting += 1;
-            }
-          } while (nesting > 0);
-        }
-      }
-      return tokens.join('').replace(/>&(\d+)/g, function ($0, $1) {
-        return ' mathquill-block-id=' + blocks[$1].id + '>' + blocks[$1].join('html');
-      });
-    };
-
-    // methods to export a string representation of the math tree
-    _.latex = function () {
-      return this.foldChildren(this.ctrlSeq, function (latex, child) {
-        return latex + '{' + (child.latex() || ' ') + '}';
-      });
-    };
-    _.textTemplate = [''];
-    _.text = function () {
-      var cmd = this,
-        i = 0;
-      return cmd.foldChildren(cmd.textTemplate[i], function (text, child) {
-        i += 1;
-        var child_text = child.text();
-        if (
-          text &&
-          cmd.textTemplate[i] === '(' &&
-          child_text[0] === '(' &&
-          child_text.slice(-1) === ')'
-        )
-          return text + child_text.slice(1, -1) + cmd.textTemplate[i];
-        return text + child.text() + (cmd.textTemplate[i] || '');
-      });
-    };
-  });
-
-  /**
-   * Lightweight command without blocks or children.
-   */
-  var Symbol = P(MathCommand, function (_, super_) {
-    _.init = function (ctrlSeq, html, text) {
-      if (!text) text = ctrlSeq && ctrlSeq.length > 1 ? ctrlSeq.slice(1) : ctrlSeq;
-
-      super_.init.call(this, ctrlSeq, html, [text]);
-    };
-
-    _.parser = function () {
-      return Parser.succeed(this);
-    };
-    _.numBlocks = function () {
-      return 0;
-    };
-
-    _.replaces = function (replacedFragment) {
-      replacedFragment.remove();
-    };
-    _.createBlocks = noop;
-
-    _.moveTowards = function (dir, cursor) {
-      cursor.jQ.insDirOf(dir, this.jQ);
-      cursor[-dir] = this;
-      cursor[dir] = this[dir];
-    };
-    _.deleteTowards = function (dir, cursor) {
-      cursor[dir] = this.remove()[dir];
-    };
-    _.seek = function (pageX, cursor) {
-      // insert at whichever side the click was closer to
-      if (pageX - this.jQ.offset().left < this.jQ.outerWidth() / 2) cursor.insLeftOf(this);
-      else cursor.insRightOf(this);
-    };
-
-    _.latex = function () {
-      return this.ctrlSeq;
-    };
-    _.text = function () {
-      return this.textTemplate;
-    };
-    _.placeCursor = noop;
-    _.isEmpty = function () {
-      return true;
-    };
-  });
-  var VanillaSymbol = P(Symbol, function (_, super_) {
-    _.init = function (ch, html) {
-      super_.init.call(this, ch, '<span>' + (html || ch) + '</span>');
-    };
-  });
-  var BinaryOperator = P(Symbol, function (_, super_) {
-    _.init = function (ctrlSeq, html, text) {
-      super_.init.call(this, ctrlSeq, '<span class="mq-binary-operator">' + html + '</span>', text);
-    };
-  });
-
-  /**
-   * Children and parent of MathCommand's. Basically partitions all the
-   * symbols and operators that descend (in the Math DOM tree) from
-   * ancestor operators.
-   */
-  var MathBlock = P(MathElement, function (_, super_) {
-    _.join = function (methodName) {
-      return this.foldChildren('', function (fold, child) {
-        return fold + child[methodName]();
-      });
-    };
-    _.html = function () {
-      return this.join('html');
-    };
-    _.latex = function () {
-      return this.join('latex');
-    };
-    _.text = function () {
-      return this.ends[L] === this.ends[R] && this.ends[L] !== 0
-        ? this.ends[L].text()
-        : this.join('text');
-    };
-
-    _.keystroke = function (key, e, ctrlr) {
-      if (ctrlr.options.spaceBehavesLikeTab && (key === 'Spacebar' || key === 'Shift-Spacebar')) {
-        e.preventDefault();
-        ctrlr.escapeDir(key === 'Shift-Spacebar' ? L : R, key, e);
-        return;
-      }
-      return super_.keystroke.apply(this, arguments);
-    };
-
-    // editability methods: called by the cursor for editing, cursor movements,
-    // and selection of the MathQuill tree, these all take in a direction and
-    // the cursor
-    _.moveOutOf = function (dir, cursor, updown) {
-      var updownInto = updown && this.parent[updown + 'Into'];
-      if (!updownInto && this[dir]) cursor.insAtDirEnd(-dir, this[dir]);
-      else cursor.insDirOf(dir, this.parent);
-    };
-    _.selectOutOf = function (dir, cursor) {
-      cursor.insDirOf(dir, this.parent);
-    };
-    _.deleteOutOf = function (dir, cursor) {
-      cursor.unwrapGramp();
-    };
-    _.seek = function (pageX, cursor) {
-      var node = this.ends[R];
-      if (!node || node.jQ.offset().left + node.jQ.outerWidth() < pageX) {
-        return cursor.insAtRightEnd(this);
-      }
-      if (pageX < this.ends[L].jQ.offset().left) return cursor.insAtLeftEnd(this);
-      while (pageX < node.jQ.offset().left) node = node[L];
-      return node.seek(pageX, cursor);
-    };
-    _.chToCmd = function (ch) {
-      var cons;
-      // exclude f because it gets a dedicated command with more spacing
-      if (ch.match(/^[a-eg-zA-Z]$/)) return Letter(ch);
-      else if (/^\d$/.test(ch)) return Digit(ch);
-      else if ((cons = CharCmds[ch] || LatexCmds[ch])) return cons(ch);
-      else return VanillaSymbol(ch);
-    };
-    _.write = function (cursor, ch) {
-      var cmd = this.chToCmd(ch);
-      if (cursor.selection) cmd.replaces(cursor.replaceSelection());
-      cmd.createLeftOf(cursor.show());
-    };
-
-    _.focus = function () {
-      this.jQ.addClass('mq-hasCursor');
-      this.jQ.removeClass('mq-empty');
-
-      return this;
-    };
-    _.blur = function () {
-      this.jQ.removeClass('mq-hasCursor');
-      if (this.isEmpty()) this.jQ.addClass('mq-empty');
-
-      return this;
-    };
-  });
-
-  API.StaticMath = function (APIClasses) {
-    return P(APIClasses.AbstractMathQuill, function (_, super_) {
-      this.RootBlock = MathBlock;
-      _.__mathquillify = function () {
-        super_.__mathquillify.call(this, 'mq-math-mode');
-        this.__controller.delegateMouseEvents();
-        this.__controller.staticMathTextareaEvents();
-        return this;
-      };
-      _.init = function () {
-        super_.init.apply(this, arguments);
-        this.__controller.root.postOrder(
-          'registerInnerField',
-          (this.innerFields = []),
-          APIClasses.MathField,
-        );
-      };
-      _.latex = function () {
-        var returned = super_.latex.apply(this, arguments);
-        if (arguments.length > 0) {
-          this.__controller.root.postOrder(
-            'registerInnerField',
-            (this.innerFields = []),
-            APIClasses.MathField,
-          );
-        }
-        return returned;
-      };
-    });
-  };
-
-  var RootMathBlock = P(MathBlock, RootBlockMixin);
-  API.MathField = function (APIClasses) {
-    return P(APIClasses.EditableField, function (_, super_) {
-      this.RootBlock = RootMathBlock;
-      _.__mathquillify = function (opts, interfaceVersion) {
-        this.config(opts);
-        if (interfaceVersion > 1) this.__controller.root.reflow = noop;
-        super_.__mathquillify.call(this, 'mq-editable-field mq-math-mode');
-        delete this.__controller.root.reflow;
-        return this;
-      };
-    });
-  };
-  /*************************************************
-   * Abstract classes of text blocks
-   ************************************************/
-
-  /**
-   * Blocks of plain text, with one or two TextPiece's as children.
-   * Represents flat strings of typically serif-font Roman characters, as
-   * opposed to hierchical, nested, tree-structured math.
-   * Wraps a single HTMLSpanElement.
-   */
-  var TextBlock = P(Node, function (_, super_) {
-    _.ctrlSeq = '\\text';
-
-    _.replaces = function (replacedText) {
-      if (replacedText instanceof Fragment) this.replacedText = replacedText.remove().jQ.text();
-      else if (typeof replacedText === 'string') this.replacedText = replacedText;
-    };
-
-    _.jQadd = function (jQ) {
-      super_.jQadd.call(this, jQ);
-      if (this.ends[L]) this.ends[L].jQadd(this.jQ[0].firstChild);
-    };
-
-    _.createLeftOf = function (cursor) {
-      var textBlock = this;
-      super_.createLeftOf.call(this, cursor);
-
-      if (textBlock[R].siblingCreated) textBlock[R].siblingCreated(cursor.options, L);
-      if (textBlock[L].siblingCreated) textBlock[L].siblingCreated(cursor.options, R);
-      textBlock.bubble('reflow');
-
-      cursor.insAtRightEnd(textBlock);
-
-      if (textBlock.replacedText)
-        for (var i = 0; i < textBlock.replacedText.length; i += 1)
-          textBlock.write(cursor, textBlock.replacedText.charAt(i));
-    };
-
-    _.parser = function () {
-      var textBlock = this;
-
-      // TODO: correctly parse text mode
-      var string = Parser.string;
-      var regex = Parser.regex;
-      var optWhitespace = Parser.optWhitespace;
-      return optWhitespace
-        .then(string('{'))
-        .then(regex(/^[^}]*/))
-        .skip(string('}'))
-        .map(function (text) {
-          if (text.length === 0) return Fragment();
-
-          TextPiece(text).adopt(textBlock, 0, 0);
-          return textBlock;
-        });
-    };
-
-    _.textContents = function () {
-      return this.foldChildren('', function (text, child) {
-        return text + child.text;
-      });
-    };
-    _.text = function () {
-      return '"' + this.textContents() + '"';
-    };
-    _.latex = function () {
-      var contents = this.textContents();
-      if (contents.length === 0) return '';
-      return '\\text{' + contents + '}';
-    };
-    _.html = function () {
-      return (
-        '<span class="mq-text-mode" mathquill-command-id=' +
-        this.id +
-        '>' +
-        this.textContents() +
-        '</span>'
-      );
-    };
-
-    // editability methods: called by the cursor for editing, cursor movements,
-    // and selection of the MathQuill tree, these all take in a direction and
-    // the cursor
-    _.moveTowards = function (dir, cursor) {
-      cursor.insAtDirEnd(-dir, this);
-    };
-    _.moveOutOf = function (dir, cursor) {
-      cursor.insDirOf(dir, this);
-    };
-    _.unselectInto = _.moveTowards;
-
-    // TODO: make these methods part of a shared mixin or something.
-    _.selectTowards = MathCommand.prototype.selectTowards;
-    _.deleteTowards = MathCommand.prototype.deleteTowards;
-
-    _.selectOutOf = function (dir, cursor) {
-      cursor.insDirOf(dir, this);
-    };
-    _.deleteOutOf = function (dir, cursor) {
-      // backspace and delete at ends of block don't unwrap
-      if (this.isEmpty()) cursor.insRightOf(this);
-    };
-    _.write = function (cursor, ch) {
-      cursor.show().deleteSelection();
-
-      if (ch !== '$') {
-        if (!cursor[L]) TextPiece(ch).createLeftOf(cursor);
-        else cursor[L].appendText(ch);
-      } else if (this.isEmpty()) {
-        cursor.insRightOf(this);
-        VanillaSymbol('\\$', '$').createLeftOf(cursor);
-      } else if (!cursor[R]) cursor.insRightOf(this);
-      else if (!cursor[L]) cursor.insLeftOf(this);
-      else {
-        // split apart
-        var leftBlock = TextBlock();
-        var leftPc = this.ends[L];
-        leftPc.disown().jQ.detach();
-        leftPc.adopt(leftBlock, 0, 0);
-
-        cursor.insLeftOf(this);
-        super_.createLeftOf.call(leftBlock, cursor);
-      }
-    };
-
-    _.seek = function (pageX, cursor) {
-      cursor.hide();
-      var textPc = fuseChildren(this);
-
-      // insert cursor at approx position in DOMTextNode
-      var avgChWidth = this.jQ.width() / this.text.length;
-      var approxPosition = Math.round((pageX - this.jQ.offset().left) / avgChWidth);
-      if (approxPosition <= 0) cursor.insAtLeftEnd(this);
-      else if (approxPosition >= textPc.text.length) cursor.insAtRightEnd(this);
-      else cursor.insLeftOf(textPc.splitRight(approxPosition));
-
-      // move towards mousedown (pageX)
-      var displ = pageX - cursor.show().offset().left; // displacement
-      var dir = displ && displ < 0 ? L : R;
-      var prevDispl = dir;
-      // displ * prevDispl > 0 iff displacement direction === previous direction
-      while (cursor[dir] && displ * prevDispl > 0) {
-        cursor[dir].moveTowards(dir, cursor);
-        prevDispl = displ;
-        displ = pageX - cursor.offset().left;
-      }
-      if (dir * displ < -dir * prevDispl) cursor[-dir].moveTowards(-dir, cursor);
-
-      if (!cursor.anticursor) {
-        // about to start mouse-selecting, the anticursor is gonna get put here
-        this.anticursorPosition = cursor[L] && cursor[L].text.length;
-        // ^ get it? 'cos if there's no cursor[L], it's 0... I'm a terrible person.
-      } else if (cursor.anticursor.parent === this) {
-        // mouse-selecting within this TextBlock, re-insert the anticursor
-        var cursorPosition = cursor[L] && cursor[L].text.length;
-        if (this.anticursorPosition === cursorPosition) {
-          cursor.anticursor = Point.copy(cursor);
-        } else {
-          if (this.anticursorPosition < cursorPosition) {
-            var newTextPc = cursor[L].splitRight(this.anticursorPosition);
-            cursor[L] = newTextPc;
-          } else {
-            var newTextPc = cursor[R].splitRight(this.anticursorPosition - cursorPosition);
-          }
-          cursor.anticursor = Point(this, newTextPc[L], newTextPc);
-        }
-      }
-    };
-
-    _.blur = function (cursor) {
-      MathBlock.prototype.blur.call(this);
-      if (!cursor) return;
-      if (this.textContents() === '') {
-        this.remove();
-        if (cursor[L] === this) cursor[L] = this[L];
-        else if (cursor[R] === this) cursor[R] = this[R];
-      } else fuseChildren(this);
-    };
-
-    function fuseChildren(self) {
-      self.jQ[0].normalize();
-
-      var textPcDom = self.jQ[0].firstChild;
-      if (!textPcDom) return;
-      pray('only node in TextBlock span is Text node', textPcDom.nodeType === 3);
-      // nodeType === 3 has meant a Text node since ancient times:
-      //   http://reference.sitepoint.com/javascript/Node/nodeType
-
-      var textPc = TextPiece(textPcDom.data);
-      textPc.jQadd(textPcDom);
-
-      self.children().disown();
-      return textPc.adopt(self, 0, 0);
-    }
-
-    _.focus = MathBlock.prototype.focus;
-  });
-
-  /**
-   * Piece of plain text, with a TextBlock as a parent and no children.
-   * Wraps a single DOMTextNode.
-   * For convenience, has a .text property that's just a JavaScript string
-   * mirroring the text contents of the DOMTextNode.
-   * Text contents must always be nonempty.
-   */
-  var TextPiece = P(Node, function (_, super_) {
-    _.init = function (text) {
-      super_.init.call(this);
-      this.text = text;
-    };
-    _.jQadd = function (dom) {
-      this.dom = dom;
-      this.jQ = $(dom);
-    };
-    _.jQize = function () {
-      return this.jQadd(document.createTextNode(this.text));
-    };
-    _.appendText = function (text) {
-      this.text += text;
-      this.dom.appendData(text);
-    };
-    _.prependText = function (text) {
-      this.text = text + this.text;
-      this.dom.insertData(0, text);
-    };
-    _.insTextAtDirEnd = function (text, dir) {
-      prayDirection(dir);
-      if (dir === R) this.appendText(text);
-      else this.prependText(text);
-    };
-    _.splitRight = function (i) {
-      var newPc = TextPiece(this.text.slice(i)).adopt(this.parent, this, this[R]);
-      newPc.jQadd(this.dom.splitText(i));
-      this.text = this.text.slice(0, i);
-      return newPc;
-    };
-
-    function endChar(dir, text) {
-      return text.charAt(dir === L ? 0 : -1 + text.length);
-    }
-
-    _.moveTowards = function (dir, cursor) {
-      prayDirection(dir);
-
-      var ch = endChar(-dir, this.text);
-
-      var from = this[-dir];
-      if (from) from.insTextAtDirEnd(ch, dir);
-      else TextPiece(ch).createDir(-dir, cursor);
-
-      return this.deleteTowards(dir, cursor);
-    };
-
-    _.latex = function () {
-      return this.text;
-    };
-
-    _.deleteTowards = function (dir, cursor) {
-      if (this.text.length > 1) {
-        if (dir === R) {
-          this.dom.deleteData(0, 1);
-          this.text = this.text.slice(1);
-        } else {
-          // note that the order of these 2 lines is annoyingly important
-          // (the second line mutates this.text.length)
-          this.dom.deleteData(-1 + this.text.length, 1);
-          this.text = this.text.slice(0, -1);
-        }
-      } else {
-        this.remove();
-        this.jQ.remove();
-        cursor[dir] = this[dir];
-      }
-    };
-
-    _.selectTowards = function (dir, cursor) {
-      prayDirection(dir);
-      var anticursor = cursor.anticursor;
-
-      var ch = endChar(-dir, this.text);
-
-      if (anticursor[dir] === this) {
-        var newPc = TextPiece(ch).createDir(dir, cursor);
-        anticursor[dir] = newPc;
-        cursor.insDirOf(dir, newPc);
-      } else {
-        var from = this[-dir];
-        if (from) from.insTextAtDirEnd(ch, dir);
-        else {
-          var newPc = TextPiece(ch).createDir(-dir, cursor);
-          newPc.jQ.insDirOf(-dir, cursor.selection.jQ);
-        }
-
-        if (this.text.length === 1 && anticursor[-dir] === this) {
-          anticursor[-dir] = this[-dir]; // `this` will be removed in deleteTowards
-        }
-      }
-
-      return this.deleteTowards(dir, cursor);
-    };
-  });
-
-  CharCmds.$ =
-    LatexCmds.text =
-    LatexCmds.textnormal =
-    LatexCmds.textrm =
-    LatexCmds.textup =
-    LatexCmds.textmd =
-      TextBlock;
-
-  function makeTextBlock(latex, tagName, attrs) {
-    return P(TextBlock, {
-      ctrlSeq: latex,
-      htmlTemplate: '<' + tagName + ' ' + attrs + '>&0</' + tagName + '>',
-    });
-  }
-
-  LatexCmds.em =
-    LatexCmds.italic =
-    LatexCmds.italics =
-    LatexCmds.emph =
-    LatexCmds.textit =
-    LatexCmds.textsl =
-      makeTextBlock('\\textit', 'i', 'class="mq-text-mode"');
-  LatexCmds.strong =
-    LatexCmds.bold =
-    LatexCmds.textbf =
-      makeTextBlock('\\textbf', 'b', 'class="mq-text-mode"');
-  LatexCmds.sf = LatexCmds.textsf = makeTextBlock(
-    '\\textsf',
-    'span',
-    'class="mq-sans-serif mq-text-mode"',
-  );
-  LatexCmds.tt = LatexCmds.texttt = makeTextBlock(
-    '\\texttt',
-    'span',
-    'class="mq-monospace mq-text-mode"',
-  );
-  LatexCmds.textsc = makeTextBlock(
-    '\\textsc',
-    'span',
-    'style="font-variant:small-caps" class="mq-text-mode"',
-  );
-  LatexCmds.uppercase = makeTextBlock(
-    '\\uppercase',
-    'span',
-    'style="text-transform:uppercase" class="mq-text-mode"',
-  );
-  LatexCmds.lowercase = makeTextBlock(
-    '\\lowercase',
-    'span',
-    'style="text-transform:lowercase" class="mq-text-mode"',
-  );
-
-  var RootMathCommand = P(MathCommand, function (_, super_) {
-    _.init = function (cursor) {
-      super_.init.call(this, '$');
-      this.cursor = cursor;
-    };
-    _.htmlTemplate = '<span class="mq-math-mode">&0</span>';
-    _.createBlocks = function () {
-      super_.createBlocks.call(this);
-
-      this.ends[L].cursor = this.cursor;
-      this.ends[L].write = function (cursor, ch) {
-        if (ch !== '$') MathBlock.prototype.write.call(this, cursor, ch);
-        else if (this.isEmpty()) {
-          cursor.insRightOf(this.parent);
-          this.parent.deleteTowards(dir, cursor);
-          VanillaSymbol('\\$', '$').createLeftOf(cursor.show());
-        } else if (!cursor[R]) cursor.insRightOf(this.parent);
-        else if (!cursor[L]) cursor.insLeftOf(this.parent);
-        else MathBlock.prototype.write.call(this, cursor, ch);
-      };
-    };
-    _.latex = function () {
-      return '$' + this.ends[L].latex() + '$';
-    };
-  });
-
-  var RootTextBlock = P(RootMathBlock, function (_, super_) {
-    _.keystroke = function (key) {
-      if (key === 'Spacebar' || key === 'Shift-Spacebar') return;
-      return super_.keystroke.apply(this, arguments);
-    };
-    _.write = function (cursor, ch) {
-      cursor.show().deleteSelection();
-      if (ch === '$') RootMathCommand(cursor).createLeftOf(cursor);
-      else {
-        var html;
-        if (ch === '<') html = '&lt;';
-        else if (ch === '>') html = '&gt;';
-        VanillaSymbol(ch, html).createLeftOf(cursor);
-      }
-    };
-  });
-  API.TextField = function (APIClasses) {
-    return P(APIClasses.EditableField, function (_, super_) {
-      this.RootBlock = RootTextBlock;
-      _.__mathquillify = function () {
-        return super_.__mathquillify.call(this, 'mq-editable-field mq-text-mode');
-      };
-      _.latex = function (latex) {
-        if (arguments.length > 0) {
-          this.__controller.renderLatexText(latex);
-          if (this.__controller.blurred) this.__controller.cursor.hide().parent.blur();
-          return this;
-        }
-        return this.__controller.exportLatex();
-      };
-    });
-  };
-  /************************************
-   * Symbols for Advanced Mathematics
-   ***********************************/
-
-  LatexCmds.notin =
-    LatexCmds.cong =
-    LatexCmds.equiv =
-    LatexCmds.oplus =
-    LatexCmds.otimes =
-      P(BinaryOperator, function (_, super_) {
-        _.init = function (latex) {
-          super_.init.call(this, '\\' + latex + ' ', '&' + latex + ';');
-        };
-      });
-
-  LatexCmds['\u2260'] = LatexCmds.ne = LatexCmds.neq = bind(BinaryOperator, '\\ne ', '&ne;');
-
-  LatexCmds.ast =
-    LatexCmds.star =
-    LatexCmds.loast =
-    LatexCmds.lowast =
-      bind(BinaryOperator, '\\ast ', '&lowast;');
-  //case 'there4 = // a special exception for this one, perhaps?
-  LatexCmds.therefor = LatexCmds.therefore = bind(BinaryOperator, '\\therefore ', '&there4;');
-
-  LatexCmds.cuz = LatexCmds.because = bind(BinaryOperator, '\\because ', '&#8757;'); // l33t
-
-  LatexCmds.prop = LatexCmds.propto = bind(BinaryOperator, '\\propto ', '&prop;');
-
-  LatexCmds['\u2248'] =
-    LatexCmds.asymp =
-    LatexCmds.approx =
-      bind(BinaryOperator, '\\approx ', '&asymp;');
-
-  LatexCmds.isin = LatexCmds['in'] = bind(BinaryOperator, '\\in ', '&isin;');
-
-  LatexCmds.ni = LatexCmds.contains = bind(BinaryOperator, '\\ni ', '&ni;');
-
-  LatexCmds.notni =
-    LatexCmds.niton =
-    LatexCmds.notcontains =
-    LatexCmds.doesnotcontain =
-      bind(BinaryOperator, '\\not\\ni ', '&#8716;');
-
-  LatexCmds.sub = LatexCmds.subset = bind(BinaryOperator, '\\subset ', '&sub;');
-
-  LatexCmds.sup =
-    LatexCmds.supset =
-    LatexCmds.superset =
-      bind(BinaryOperator, '\\supset ', '&sup;');
-
-  LatexCmds.nsub =
-    LatexCmds.notsub =
-    LatexCmds.nsubset =
-    LatexCmds.notsubset =
-      bind(BinaryOperator, '\\not\\subset ', '&#8836;');
-
-  LatexCmds.nsup =
-    LatexCmds.notsup =
-    LatexCmds.nsupset =
-    LatexCmds.notsupset =
-    LatexCmds.nsuperset =
-    LatexCmds.notsuperset =
-      bind(BinaryOperator, '\\not\\supset ', '&#8837;');
-
-  LatexCmds.sube =
-    LatexCmds.subeq =
-    LatexCmds.subsete =
-    LatexCmds.subseteq =
-      bind(BinaryOperator, '\\subseteq ', '&sube;');
-
-  LatexCmds.supe =
-    LatexCmds.supeq =
-    LatexCmds.supsete =
-    LatexCmds.supseteq =
-    LatexCmds.supersete =
-    LatexCmds.superseteq =
-      bind(BinaryOperator, '\\supseteq ', '&supe;');
-
-  LatexCmds.nsube =
-    LatexCmds.nsubeq =
-    LatexCmds.notsube =
-    LatexCmds.notsubeq =
-    LatexCmds.nsubsete =
-    LatexCmds.nsubseteq =
-    LatexCmds.notsubsete =
-    LatexCmds.notsubseteq =
-      bind(BinaryOperator, '\\not\\subseteq ', '&#8840;');
-
-  LatexCmds.nsupe =
-    LatexCmds.nsupeq =
-    LatexCmds.notsupe =
-    LatexCmds.notsupeq =
-    LatexCmds.nsupsete =
-    LatexCmds.nsupseteq =
-    LatexCmds.notsupsete =
-    LatexCmds.notsupseteq =
-    LatexCmds.nsupersete =
-    LatexCmds.nsuperseteq =
-    LatexCmds.notsupersete =
-    LatexCmds.notsuperseteq =
-      bind(BinaryOperator, '\\not\\supseteq ', '&#8841;');
-
-  //the canonical sets of numbers
-  LatexCmds.N =
-    LatexCmds.naturals =
-    LatexCmds.Naturals =
-      bind(VanillaSymbol, '\\mathbb{N}', '&#8469;');
-
-  LatexCmds.P =
-    LatexCmds.primes =
-    LatexCmds.Primes =
-    LatexCmds.projective =
-    LatexCmds.Projective =
-    LatexCmds.probability =
-    LatexCmds.Probability =
-      bind(VanillaSymbol, '\\mathbb{P}', '&#8473;');
-
-  LatexCmds.Z =
-    LatexCmds.integers =
-    LatexCmds.Integers =
-      bind(VanillaSymbol, '\\mathbb{Z}', '&#8484;');
-
-  LatexCmds.Q =
-    LatexCmds.rationals =
-    LatexCmds.Rationals =
-      bind(VanillaSymbol, '\\mathbb{Q}', '&#8474;');
-
-  LatexCmds.R = LatexCmds.reals = LatexCmds.Reals = bind(VanillaSymbol, '\\mathbb{R}', '&#8477;');
-
-  LatexCmds.C =
-    LatexCmds.complex =
-    LatexCmds.Complex =
-    LatexCmds.complexes =
-    LatexCmds.Complexes =
-    LatexCmds.complexplane =
-    LatexCmds.Complexplane =
-    LatexCmds.ComplexPlane =
-      bind(VanillaSymbol, '\\mathbb{C}', '&#8450;');
-
-  LatexCmds.H =
-    LatexCmds.Hamiltonian =
-    LatexCmds.quaternions =
-    LatexCmds.Quaternions =
-      bind(VanillaSymbol, '\\mathbb{H}', '&#8461;');
-
-  //spacing
-  LatexCmds.quad = LatexCmds.emsp = bind(VanillaSymbol, '\\quad ', '    ');
-  LatexCmds.qquad = bind(VanillaSymbol, '\\qquad ', '        ');
-  /* spacing special characters, gonna have to implement this in LatexCommandInput::onText somehow
-case ',':
-  return VanillaSymbol('\\, ',' ');
-case ':':
-  return VanillaSymbol('\\: ','  ');
-case ';':
-  return VanillaSymbol('\\; ','   ');
-case '!':
-  return Symbol('\\! ','<span style="margin-right:-.2em"></span>');
-*/
-
-  //binary operators
-  LatexCmds.diamond = bind(VanillaSymbol, '\\diamond ', '&#9671;');
-  LatexCmds.bigtriangleup = bind(VanillaSymbol, '\\bigtriangleup ', '&#9651;');
-  LatexCmds.ominus = bind(VanillaSymbol, '\\ominus ', '&#8854;');
-  LatexCmds.uplus = bind(VanillaSymbol, '\\uplus ', '&#8846;');
-  LatexCmds.bigtriangledown = bind(VanillaSymbol, '\\bigtriangledown ', '&#9661;');
-  LatexCmds.sqcap = bind(VanillaSymbol, '\\sqcap ', '&#8851;');
-  LatexCmds.triangleleft = bind(VanillaSymbol, '\\triangleleft ', '&#8882;');
-  LatexCmds.sqcup = bind(VanillaSymbol, '\\sqcup ', '&#8852;');
-  LatexCmds.triangleright = bind(VanillaSymbol, '\\triangleright ', '&#8883;');
-  //circledot is not a not real LaTex command see https://github.com/mathquill/mathquill/pull/552 for more details
-  LatexCmds.odot = LatexCmds.circledot = bind(VanillaSymbol, '\\odot ', '&#8857;');
-  LatexCmds.bigcirc = bind(VanillaSymbol, '\\bigcirc ', '&#9711;');
-  LatexCmds.dagger = bind(VanillaSymbol, '\\dagger ', '&#0134;');
-  LatexCmds.ddagger = bind(VanillaSymbol, '\\ddagger ', '&#135;');
-  LatexCmds.wr = bind(VanillaSymbol, '\\wr ', '&#8768;');
-  LatexCmds.amalg = bind(VanillaSymbol, '\\amalg ', '&#8720;');
-
-  //relationship symbols
-  LatexCmds.models = bind(VanillaSymbol, '\\models ', '&#8872;');
-  LatexCmds.prec = bind(VanillaSymbol, '\\prec ', '&#8826;');
-  LatexCmds.succ = bind(VanillaSymbol, '\\succ ', '&#8827;');
-  LatexCmds.preceq = bind(VanillaSymbol, '\\preceq ', '&#8828;');
-  LatexCmds.succeq = bind(VanillaSymbol, '\\succeq ', '&#8829;');
-  LatexCmds.simeq = bind(VanillaSymbol, '\\simeq ', '&#8771;');
-  LatexCmds.mid = bind(VanillaSymbol, '\\mid ', '&#8739;');
-  LatexCmds.ll = bind(VanillaSymbol, '\\ll ', '&#8810;');
-  LatexCmds.gg = bind(VanillaSymbol, '\\gg ', '&#8811;');
-  LatexCmds.parallel = bind(VanillaSymbol, '\\parallel ', '&#8741;');
-  LatexCmds.nparallel = bind(VanillaSymbol, '\\nparallel ', '&#8742;');
-  LatexCmds.bowtie = bind(VanillaSymbol, '\\bowtie ', '&#8904;');
-  LatexCmds.sqsubset = bind(VanillaSymbol, '\\sqsubset ', '&#8847;');
-  LatexCmds.sqsupset = bind(VanillaSymbol, '\\sqsupset ', '&#8848;');
-  LatexCmds.smile = bind(VanillaSymbol, '\\smile ', '&#8995;');
-  LatexCmds.sqsubseteq = bind(VanillaSymbol, '\\sqsubseteq ', '&#8849;');
-  LatexCmds.sqsupseteq = bind(VanillaSymbol, '\\sqsupseteq ', '&#8850;');
-  LatexCmds.doteq = bind(VanillaSymbol, '\\doteq ', '&#8784;');
-  LatexCmds.frown = bind(VanillaSymbol, '\\frown ', '&#8994;');
-  LatexCmds.vdash = bind(VanillaSymbol, '\\vdash ', '&#8870;');
-  LatexCmds.dashv = bind(VanillaSymbol, '\\dashv ', '&#8867;');
-  LatexCmds.nless = bind(VanillaSymbol, '\\nless ', '&#8814;');
-  LatexCmds.ngtr = bind(VanillaSymbol, '\\ngtr ', '&#8815;');
-
-  //arrows
-  LatexCmds.longleftarrow = bind(VanillaSymbol, '\\longleftarrow ', '&#8592;');
-  LatexCmds.longrightarrow = bind(VanillaSymbol, '\\longrightarrow ', '&#8594;');
-  LatexCmds.Longleftarrow = bind(VanillaSymbol, '\\Longleftarrow ', '&#8656;');
-  LatexCmds.Longrightarrow = bind(VanillaSymbol, '\\Longrightarrow ', '&#8658;');
-  LatexCmds.longleftrightarrow = bind(VanillaSymbol, '\\longleftrightarrow ', '&#8596;');
-  LatexCmds.updownarrow = bind(VanillaSymbol, '\\updownarrow ', '&#8597;');
-  LatexCmds.Longleftrightarrow = bind(VanillaSymbol, '\\Longleftrightarrow ', '&#8660;');
-  LatexCmds.Updownarrow = bind(VanillaSymbol, '\\Updownarrow ', '&#8661;');
-  LatexCmds.mapsto = bind(VanillaSymbol, '\\mapsto ', '&#8614;');
-  LatexCmds.nearrow = bind(VanillaSymbol, '\\nearrow ', '&#8599;');
-  LatexCmds.hookleftarrow = bind(VanillaSymbol, '\\hookleftarrow ', '&#8617;');
-  LatexCmds.hookrightarrow = bind(VanillaSymbol, '\\hookrightarrow ', '&#8618;');
-  LatexCmds.searrow = bind(VanillaSymbol, '\\searrow ', '&#8600;');
-  LatexCmds.leftharpoonup = bind(VanillaSymbol, '\\leftharpoonup ', '&#8636;');
-  LatexCmds.rightharpoonup = bind(VanillaSymbol, '\\rightharpoonup ', '&#8640;');
-  LatexCmds.swarrow = bind(VanillaSymbol, '\\swarrow ', '&#8601;');
-  LatexCmds.leftharpoondown = bind(VanillaSymbol, '\\leftharpoondown ', '&#8637;');
-  LatexCmds.rightharpoondown = bind(VanillaSymbol, '\\rightharpoondown ', '&#8641;');
-  LatexCmds.nwarrow = bind(VanillaSymbol, '\\nwarrow ', '&#8598;');
-
-  //Misc
-  LatexCmds.ldots = bind(VanillaSymbol, '\\ldots ', '&#8230;');
-  LatexCmds.cdots = bind(VanillaSymbol, '\\cdots ', '&#8943;');
-  LatexCmds.vdots = bind(VanillaSymbol, '\\vdots ', '&#8942;');
-  LatexCmds.ddots = bind(VanillaSymbol, '\\ddots ', '&#8945;');
-  LatexCmds.surd = bind(VanillaSymbol, '\\surd ', '&#8730;');
-  LatexCmds.triangle = bind(VanillaSymbol, '\\triangle ', '&#9651;');
-  LatexCmds.ell = bind(VanillaSymbol, '\\ell ', '&#8467;');
-  LatexCmds.top = bind(VanillaSymbol, '\\top ', '&#8868;');
-  LatexCmds.flat = bind(VanillaSymbol, '\\flat ', '&#9837;');
-  LatexCmds.natural = bind(VanillaSymbol, '\\natural ', '&#9838;');
-  LatexCmds.sharp = bind(VanillaSymbol, '\\sharp ', '&#9839;');
-  LatexCmds.wp = bind(VanillaSymbol, '\\wp ', '&#8472;');
-  LatexCmds.bot = bind(VanillaSymbol, '\\bot ', '&#8869;');
-  LatexCmds.clubsuit = bind(VanillaSymbol, '\\clubsuit ', '&#9827;');
-  LatexCmds.diamondsuit = bind(VanillaSymbol, '\\diamondsuit ', '&#9826;');
-  LatexCmds.heartsuit = bind(VanillaSymbol, '\\heartsuit ', '&#9825;');
-  LatexCmds.spadesuit = bind(VanillaSymbol, '\\spadesuit ', '&#9824;');
-  //not real LaTex command see https://github.com/mathquill/mathquill/pull/552 for more details
-  LatexCmds.parallelogram = bind(VanillaSymbol, '\\parallelogram ', '&#9649;');
-  LatexCmds.square = bind(VanillaSymbol, '\\square ', '&#11036;');
-
-  //variable-sized
-  LatexCmds.oint = bind(VanillaSymbol, '\\oint ', '&#8750;');
-  LatexCmds.bigcap = bind(VanillaSymbol, '\\bigcap ', '&#8745;');
-  LatexCmds.bigcup = bind(VanillaSymbol, '\\bigcup ', '&#8746;');
-  LatexCmds.bigsqcup = bind(VanillaSymbol, '\\bigsqcup ', '&#8852;');
-  LatexCmds.bigvee = bind(VanillaSymbol, '\\bigvee ', '&#8744;');
-  LatexCmds.bigwedge = bind(VanillaSymbol, '\\bigwedge ', '&#8743;');
-  LatexCmds.bigodot = bind(VanillaSymbol, '\\bigodot ', '&#8857;');
-  LatexCmds.bigotimes = bind(VanillaSymbol, '\\bigotimes ', '&#8855;');
-  LatexCmds.bigoplus = bind(VanillaSymbol, '\\bigoplus ', '&#8853;');
-  LatexCmds.biguplus = bind(VanillaSymbol, '\\biguplus ', '&#8846;');
-
-  //delimiters
-  LatexCmds.lfloor = bind(VanillaSymbol, '\\lfloor ', '&#8970;');
-  LatexCmds.rfloor = bind(VanillaSymbol, '\\rfloor ', '&#8971;');
-  LatexCmds.lceil = bind(VanillaSymbol, '\\lceil ', '&#8968;');
-  LatexCmds.rceil = bind(VanillaSymbol, '\\rceil ', '&#8969;');
-  LatexCmds.opencurlybrace = LatexCmds.lbrace = bind(VanillaSymbol, '\\lbrace ', '{');
-  LatexCmds.closecurlybrace = LatexCmds.rbrace = bind(VanillaSymbol, '\\rbrace ', '}');
-  LatexCmds.lbrack = bind(VanillaSymbol, '[');
-  LatexCmds.rbrack = bind(VanillaSymbol, ']');
-
-  //various symbols
-  LatexCmds.slash = bind(VanillaSymbol, '/');
-  LatexCmds.vert = bind(VanillaSymbol, '|');
-  LatexCmds.perp = LatexCmds.perpendicular = bind(VanillaSymbol, '\\perp ', '&perp;');
-  LatexCmds.nabla = LatexCmds.del = bind(VanillaSymbol, '\\nabla ', '&nabla;');
-  LatexCmds.hbar = bind(VanillaSymbol, '\\hbar ', '&#8463;');
-
-  LatexCmds.AA =
-    LatexCmds.Angstrom =
-    LatexCmds.angstrom =
-      bind(VanillaSymbol, '\\text\\AA ', '&#8491;');
-
-  LatexCmds.ring = LatexCmds.circ = LatexCmds.circle = bind(VanillaSymbol, '\\circ ', '&#8728;');
-
-  LatexCmds.bull = LatexCmds.bullet = bind(VanillaSymbol, '\\bullet ', '&bull;');
-
-  LatexCmds.setminus = LatexCmds.smallsetminus = bind(VanillaSymbol, '\\setminus ', '&#8726;');
-
-  LatexCmds.not = LatexCmds['\u00ac'] = LatexCmds.neg = bind(VanillaSymbol, '\\neg ', '&not;'); //bind(Symbol,'\\not ','<span class="not">/</span>');
-
-  LatexCmds['\u2026'] =
-    LatexCmds.dots =
-    LatexCmds.ellip =
-    LatexCmds.hellip =
-    LatexCmds.ellipsis =
-    LatexCmds.hellipsis =
-      bind(VanillaSymbol, '\\dots ', '&hellip;');
-
-  LatexCmds.converges =
-    LatexCmds.darr =
-    LatexCmds.dnarr =
-    LatexCmds.dnarrow =
-    LatexCmds.downarrow =
-      bind(VanillaSymbol, '\\downarrow ', '&darr;');
-
-  LatexCmds.dArr =
-    LatexCmds.dnArr =
-    LatexCmds.dnArrow =
-    LatexCmds.Downarrow =
-      bind(VanillaSymbol, '\\Downarrow ', '&dArr;');
-
-  LatexCmds.diverges =
-    LatexCmds.uarr =
-    LatexCmds.uparrow =
-      bind(VanillaSymbol, '\\uparrow ', '&uarr;');
-
-  LatexCmds.uArr = LatexCmds.Uparrow = bind(VanillaSymbol, '\\Uparrow ', '&uArr;');
-
-  LatexCmds.to = bind(BinaryOperator, '\\to ', '&rarr;');
-
-  LatexCmds.rarr = LatexCmds.rightarrow = bind(VanillaSymbol, '\\rightarrow ', '&rarr;');
-
-  LatexCmds.implies = bind(BinaryOperator, '\\Rightarrow ', '&rArr;');
-
-  LatexCmds.rArr = LatexCmds.Rightarrow = bind(VanillaSymbol, '\\Rightarrow ', '&rArr;');
-
-  LatexCmds.gets = bind(BinaryOperator, '\\gets ', '&larr;');
-
-  LatexCmds.larr = LatexCmds.leftarrow = bind(VanillaSymbol, '\\leftarrow ', '&larr;');
-
-  LatexCmds.impliedby = bind(BinaryOperator, '\\Leftarrow ', '&lArr;');
-
-  LatexCmds.lArr = LatexCmds.Leftarrow = bind(VanillaSymbol, '\\Leftarrow ', '&lArr;');
-
-  LatexCmds.harr =
-    LatexCmds.lrarr =
-    LatexCmds.leftrightarrow =
-      bind(VanillaSymbol, '\\leftrightarrow ', '&harr;');
-
-  LatexCmds.iff = bind(BinaryOperator, '\\Leftrightarrow ', '&hArr;');
-
-  LatexCmds.hArr =
-    LatexCmds.lrArr =
-    LatexCmds.Leftrightarrow =
-      bind(VanillaSymbol, '\\Leftrightarrow ', '&hArr;');
-
-  LatexCmds.Re = LatexCmds.Real = LatexCmds.real = bind(VanillaSymbol, '\\Re ', '&real;');
-
-  LatexCmds.Im =
-    LatexCmds.imag =
-    LatexCmds.image =
-    LatexCmds.imagin =
-    LatexCmds.imaginary =
-    LatexCmds.Imaginary =
-      bind(VanillaSymbol, '\\Im ', '&image;');
-
-  LatexCmds.part = LatexCmds.partial = bind(VanillaSymbol, '\\partial ', '&part;');
-
-  LatexCmds.infty =
-    LatexCmds.infin =
-    LatexCmds.infinity =
-      bind(VanillaSymbol, '\\infty ', '&infin;');
-
-  LatexCmds.alef =
-    LatexCmds.alefsym =
-    LatexCmds.aleph =
-    LatexCmds.alephsym =
-      bind(VanillaSymbol, '\\aleph ', '&alefsym;');
-
-  LatexCmds.xist =
-    LatexCmds.xists =
-    LatexCmds.exist =
-    LatexCmds.exists =
-      bind(
-        //LOL
-        VanillaSymbol,
-        '\\exists ',
-        '&exist;',
-      );
-
-  LatexCmds.nexists = LatexCmds.nexist = bind(VanillaSymbol, '\\nexists ', '&#8708;');
-
-  LatexCmds.and = LatexCmds.land = LatexCmds.wedge = bind(VanillaSymbol, '\\wedge ', '&and;');
-
-  LatexCmds.or = LatexCmds.lor = LatexCmds.vee = bind(VanillaSymbol, '\\vee ', '&or;');
-
-  LatexCmds.o =
-    LatexCmds.O =
-    LatexCmds.empty =
-    LatexCmds.emptyset =
-    LatexCmds.oslash =
-    LatexCmds.Oslash =
-    LatexCmds.nothing =
-    LatexCmds.varnothing =
-      bind(BinaryOperator, '\\varnothing ', '&empty;');
-
-  LatexCmds.cup = LatexCmds.union = bind(BinaryOperator, '\\cup ', '&cup;');
-
-  LatexCmds.cap =
-    LatexCmds.intersect =
-    LatexCmds.intersection =
-      bind(BinaryOperator, '\\cap ', '&cap;');
-
-  // FIXME: the correct LaTeX would be ^\circ but we can't parse that
-  LatexCmds.deg = LatexCmds.degree = bind(VanillaSymbol, '\\degree ', '&deg;');
-
-  LatexCmds.ang = LatexCmds.angle = bind(VanillaSymbol, '\\angle ', '&ang;');
-  LatexCmds.measuredangle = bind(VanillaSymbol, '\\measuredangle ', '&#8737;');
-  /*********************************
-   * Symbols for Basic Mathematics
-   ********************************/
-
-  var Digit = P(VanillaSymbol, function (_, super_) {
-    _.createLeftOf = function (cursor) {
-      if (
-        cursor.options.autoSubscriptNumerals &&
-        cursor.parent !== cursor.parent.parent.sub &&
-        ((cursor[L] instanceof Variable && cursor[L].isItalic !== false) ||
-          (cursor[L] instanceof SupSub &&
-            cursor[L][L] instanceof Variable &&
-            cursor[L][L].isItalic !== false))
-      ) {
-        LatexCmds._().createLeftOf(cursor);
-        super_.createLeftOf.call(this, cursor);
-        cursor.insRightOf(cursor.parent.parent);
-      } else super_.createLeftOf.call(this, cursor);
-    };
-  });
-
-  var Variable = P(Symbol, function (_, super_) {
-    _.init = function (ch, html) {
-      super_.init.call(this, ch, '<var>' + (html || ch) + '</var>');
-    };
-    _.text = function () {
-      var text = this.ctrlSeq;
-      if (
-        this[L] &&
-        !(this[L] instanceof Variable) &&
-        !(this[L] instanceof BinaryOperator) &&
-        this[L].ctrlSeq !== '\\ '
-      )
-        text = '*' + text;
-      if (this[R] && !(this[R] instanceof BinaryOperator) && !(this[R] instanceof SupSub))
-        text += '*';
-      return text;
-    };
-  });
-
-  Options.p.autoCommands = { _maxLength: 0 };
-  optionProcessors.autoCommands = function (cmds) {
-    if (!/^[a-z]+(?: [a-z]+)*$/i.test(cmds)) {
-      throw '"' + cmds + '" not a space-delimited list of only letters';
-    }
-    var list = cmds.split(' '),
-      dict = {},
-      maxLength = 0;
-    for (var i = 0; i < list.length; i += 1) {
-      var cmd = list[i];
-      if (cmd.length < 2) {
-        throw 'autocommand "' + cmd + '" not minimum length of 2';
-      }
-      if (LatexCmds[cmd] === OperatorName) {
-        throw '"' + cmd + '" is a built-in operator name';
-      }
-      dict[cmd] = 1;
-      maxLength = max(maxLength, cmd.length);
-    }
-    dict._maxLength = maxLength;
-    return dict;
-  };
-
-  var Letter = P(Variable, function (_, super_) {
-    _.init = function (ch) {
-      return super_.init.call(this, (this.letter = ch));
-    };
-    _.createLeftOf = function (cursor) {
-      super_.createLeftOf.apply(this, arguments);
-      var autoCmds = cursor.options.autoCommands,
-        maxLength = autoCmds._maxLength;
-      if (maxLength > 0) {
-        // want longest possible autocommand, so join together longest
-        // sequence of letters
-        var str = '',
-          l = this,
-          i = 0;
-        // FIXME: l.ctrlSeq === l.letter checks if first or last in an operator name
-        while (l instanceof Letter && l.ctrlSeq === l.letter && i < maxLength) {
-          ((str = l.letter + str), (l = l[L]), (i += 1));
-        }
-        // check for an autocommand, going thru substrings longest to shortest
-        while (str.length) {
-          if (Object.prototype.hasOwnProperty.call(autoCmds, str)) {
-            for (var i = 1, l = this; i < str.length; i += 1, l = l[L]);
-            Fragment(l, this).remove();
-            cursor[L] = l[L];
-            return LatexCmds[str](str).createLeftOf(cursor);
-          }
-          str = str.slice(1);
-        }
-      }
-    };
-    _.italicize = function (bool) {
-      this.isItalic = bool;
-      this.jQ.toggleClass('mq-operator-name', !bool);
-      return this;
-    };
-    _.finalizeTree =
-      _.siblingDeleted =
-      _.siblingCreated =
-        function (opts, dir) {
-          // don't auto-un-italicize if the sibling to my right changed (dir === R or
-          // undefined) and it's now a Letter, it will un-italicize everyone
-          if (dir !== L && this[R] instanceof Letter) return;
-          this.autoUnItalicize(opts);
-        };
-    _.autoUnItalicize = function (opts) {
-      var autoOps = opts.autoOperatorNames;
-      if (autoOps._maxLength === 0) return;
-      // want longest possible operator names, so join together entire contiguous
-      // sequence of letters
-      var str = this.letter;
-      for (var l = this[L]; l instanceof Letter; l = l[L]) str = l.letter + str;
-      for (var r = this[R]; r instanceof Letter; r = r[R]) str += r.letter;
-
-      // removeClass and delete flags from all letters before figuring out
-      // which, if any, are part of an operator name
-      Fragment(l[R] || this.parent.ends[L], r[L] || this.parent.ends[R]).each(function (el) {
-        el.italicize(true).jQ.removeClass('mq-first mq-last mq-followed-by-supsub');
-        el.ctrlSeq = el.letter;
-      });
-
-      // check for operator names: at each position from left to right, check
-      // substrings from longest to shortest
-      outer: for (
-        var i = 0, first = l[R] || this.parent.ends[L];
-        i < str.length;
-        i += 1, first = first[R]
-      ) {
-        for (var len = min(autoOps._maxLength, str.length - i); len > 0; len -= 1) {
-          var word = str.slice(i, i + len);
-          if (Object.prototype.hasOwnProperty.call(autoOps, word)) {
-            for (var j = 0, letter = first; j < len; j += 1, letter = letter[R]) {
-              letter.italicize(false);
-              var last = letter;
-            }
-
-            var isBuiltIn = Object.prototype.hasOwnProperty(BuiltInOpNames, word);
-            first.ctrlSeq = (isBuiltIn ? '\\' : '\\operatorname{') + first.ctrlSeq;
-            last.ctrlSeq += isBuiltIn ? ' ' : '}';
-            if (Object.prototype.hasOwnProperty.call(TwoWordOpNames, word))
-              last[L][L][L].jQ.addClass('mq-last');
-            if (!shouldOmitPadding(first[L])) first.jQ.addClass('mq-first');
-            if (!shouldOmitPadding(last[R])) {
-              if (last[R] instanceof SupSub) {
-                var supsub = last[R]; // XXX monkey-patching, but what's the right thing here?
-                // Have operatorname-specific code in SupSub? A CSS-like language to style the
-                // math tree, but which ignores cursor and selection (which CSS can't)?
-                var respace =
-                  (supsub.siblingCreated =
-                  supsub.siblingDeleted =
-                    function () {
-                      supsub.jQ.toggleClass(
-                        'mq-after-operator-name',
-                        !(supsub[R] instanceof Bracket),
-                      );
-                    });
-                respace();
-              } else {
-                last.jQ.toggleClass('mq-last', !(last[R] instanceof Bracket));
-              }
-            }
-
-            i += len - 1;
-            first = last;
-            continue outer;
-          }
-        }
-      }
-    };
-    function shouldOmitPadding(node) {
-      // omit padding if no node, or if node already has padding (to avoid double-padding)
-      return !node || node instanceof BinaryOperator || node instanceof SummationNotation;
-    }
-  });
-  var BuiltInOpNames = {}; // the set of operator names like \sin, \cos, etc that
-  // are built-into LaTeX, see Section 3.17 of the Short Math Guide: http://tinyurl.com/jm9okjc
-  // MathQuill auto-unitalicizes some operator names not in that set, like 'hcf'
-  // and 'arsinh', which must be exported as \operatorname{hcf} and
-  // \operatorname{arsinh}. Note: over/under line/arrow \lim variants like
-  // \varlimsup are not supported
-  var AutoOpNames = (Options.p.autoOperatorNames = { _maxLength: 9 }); // the set
-  // of operator names that MathQuill auto-unitalicizes by default; overridable
-  var TwoWordOpNames = { limsup: 1, liminf: 1, projlim: 1, injlim: 1 };
-  (function () {
-    var mostOps = (
-      'arg deg det dim exp gcd hom inf ker lg lim ln log max min sup' +
-      ' limsup liminf injlim projlim Pr'
-    ).split(' ');
-    for (var i = 0; i < mostOps.length; i += 1) {
-      BuiltInOpNames[mostOps[i]] = AutoOpNames[mostOps[i]] = 1;
-    }
-
-    var builtInTrigs = 'sin cos tan arcsin arccos arctan sinh cosh tanh sec csc cot coth'.split(
-      // why coth but not sech and csch, LaTeX?
-      ' ',
-    );
-    for (var i = 0; i < builtInTrigs.length; i += 1) {
-      BuiltInOpNames[builtInTrigs[i]] = 1;
-    }
-
-    var autoTrigs = 'sin cos tan sec cosec csc cotan cot ctg'.split(' ');
-    for (var i = 0; i < autoTrigs.length; i += 1) {
-      AutoOpNames[autoTrigs[i]] =
-        AutoOpNames['arc' + autoTrigs[i]] =
-        AutoOpNames[autoTrigs[i] + 'h'] =
-        AutoOpNames['ar' + autoTrigs[i] + 'h'] =
-        AutoOpNames['arc' + autoTrigs[i] + 'h'] =
-          1;
-    }
-
-    // compat with some of the nonstandard LaTeX exported by MathQuill
-    // before #247. None of these are real LaTeX commands so, seems safe
-    var moreNonstandardOps = 'gcf hcf lcm proj span'.split(' ');
-    for (var i = 0; i < moreNonstandardOps.length; i += 1) {
-      AutoOpNames[moreNonstandardOps[i]] = 1;
-    }
-  })();
-  optionProcessors.autoOperatorNames = function (cmds) {
-    if (!/^[a-z]+(?: [a-z]+)*$/i.test(cmds)) {
-      throw '"' + cmds + '" not a space-delimited list of only letters';
-    }
-    var list = cmds.split(' '),
-      dict = {},
-      maxLength = 0;
-    for (var i = 0; i < list.length; i += 1) {
-      var cmd = list[i];
-      if (cmd.length < 2) {
-        throw '"' + cmd + '" not minimum length of 2';
-      }
-      dict[cmd] = 1;
-      maxLength = max(maxLength, cmd.length);
-    }
-    dict._maxLength = maxLength;
-    return dict;
-  };
-  var OperatorName = P(Symbol, function (_, super_) {
-    _.init = function (fn) {
-      this.ctrlSeq = fn;
-    };
-    _.createLeftOf = function (cursor) {
-      var fn = this.ctrlSeq;
-      for (var i = 0; i < fn.length; i += 1) {
-        Letter(fn.charAt(i)).createLeftOf(cursor);
-      }
-    };
-    _.parser = function () {
-      var fn = this.ctrlSeq;
-      var block = MathBlock();
-      for (var i = 0; i < fn.length; i += 1) {
-        Letter(fn.charAt(i)).adopt(block, block.ends[R], 0);
-      }
-      return Parser.succeed(block.children());
-    };
-  });
-  for (var fn in AutoOpNames)
-    if (Object.prototype.hasOwnProperty(AutoOpNames, fn)) {
-      LatexCmds[fn] = OperatorName;
-    }
-  LatexCmds.operatorname = P(MathCommand, function (_) {
-    _.createLeftOf = noop;
-    _.numBlocks = function () {
-      return 1;
-    };
-    _.parser = function () {
-      return latexMathParser.block.map(function (b) {
-        return b.children();
-      });
-    };
-  });
-
-  LatexCmds.f = P(Letter, function (_, super_) {
-    _.init = function () {
-      Symbol.p.init.call(this, (this.letter = 'f'), '<var class="mq-f">f</var>');
-    };
-    _.italicize = function (bool) {
-      this.jQ.html('f').toggleClass('mq-f', bool);
-      return super_.italicize.apply(this, arguments);
-    };
-  });
-
-  // VanillaSymbol's
-  LatexCmds[' '] = LatexCmds.space = bind(VanillaSymbol, '\\ ', '&nbsp;');
-
-  LatexCmds["'"] = LatexCmds.prime = bind(VanillaSymbol, "'", '&prime;');
-
-  LatexCmds.backslash = bind(VanillaSymbol, '\\backslash ', '\\');
-  if (!CharCmds['\\']) CharCmds['\\'] = LatexCmds.backslash;
-
-  LatexCmds.$ = bind(VanillaSymbol, '\\$', '$');
-
-  // does not use Symbola font
-  var NonSymbolaSymbol = P(Symbol, function (_, super_) {
-    _.init = function (ch, html) {
-      super_.init.call(this, ch, '<span class="mq-nonSymbola">' + (html || ch) + '</span>');
-    };
-  });
-
-  LatexCmds['@'] = NonSymbolaSymbol;
-  LatexCmds['&'] = bind(NonSymbolaSymbol, '\\&', '&amp;');
-  LatexCmds['%'] = bind(NonSymbolaSymbol, '\\%', '%');
-
-  //the following are all Greek to me, but this helped a lot: http://www.ams.org/STIX/ion/stixsig03.html
-
-  //lowercase Greek letter variables
-  LatexCmds.alpha =
-    LatexCmds.beta =
-    LatexCmds.gamma =
-    LatexCmds.delta =
-    LatexCmds.zeta =
-    LatexCmds.eta =
-    LatexCmds.theta =
-    LatexCmds.iota =
-    LatexCmds.kappa =
-    LatexCmds.mu =
-    LatexCmds.nu =
-    LatexCmds.xi =
-    LatexCmds.rho =
-    LatexCmds.sigma =
-    LatexCmds.tau =
-    LatexCmds.chi =
-    LatexCmds.psi =
-    LatexCmds.omega =
-      P(Variable, function (_, super_) {
-        _.init = function (latex) {
-          super_.init.call(this, '\\' + latex + ' ', '&' + latex + ';');
-        };
-      });
-
-  //why can't anybody FUCKING agree on these
-  LatexCmds.phi = bind(Variable, '\\phi ', '&#981;'); //W3C or Unicode?
-
-  LatexCmds.phiv = LatexCmds.varphi = bind(Variable, '\\varphi ', '&phi;'); //Elsevier and 9573-13 //AMS and LaTeX
-
-  LatexCmds.epsilon = bind(Variable, '\\epsilon ', '&#1013;'); //W3C or Unicode?
-
-  LatexCmds.epsiv = LatexCmds.varepsilon = bind(Variable, '\\varepsilon ', '&epsilon;'); //Elsevier and 9573-13 //AMS and LaTeX
-
-  LatexCmds.piv = LatexCmds.varpi = bind(Variable, '\\varpi ', '&piv;'); //W3C/Unicode and Elsevier and 9573-13 //AMS and LaTeX
-
-  LatexCmds.sigmaf =
-    LatexCmds.sigmav =
-    LatexCmds.varsigma =
-      bind(
-        //W3C/Unicode //Elsevier //LaTeX
-        Variable,
-        '\\varsigma ',
-        '&sigmaf;',
-      );
-
-  LatexCmds.thetav =
-    LatexCmds.vartheta =
-    LatexCmds.thetasym =
-      bind(
-        //Elsevier and 9573-13 //AMS and LaTeX //W3C/Unicode
-        Variable,
-        '\\vartheta ',
-        '&thetasym;',
-      );
-
-  LatexCmds.upsilon = LatexCmds.upsi = bind(Variable, '\\upsilon ', '&upsilon;'); //AMS and LaTeX and W3C/Unicode //Elsevier and 9573-13
-
-  //these aren't even mentioned in the HTML character entity references
-  LatexCmds.gammad = LatexCmds.Gammad = LatexCmds.digamma = bind(Variable, '\\digamma ', '&#989;'); //Elsevier //9573-13 -- WTF, right? I dunno if this was a typo in the reference (see above) //LaTeX
-
-  LatexCmds.kappav = LatexCmds.varkappa = bind(Variable, '\\varkappa ', '&#1008;'); //Elsevier //AMS and LaTeX
-
-  LatexCmds.rhov = LatexCmds.varrho = bind(Variable, '\\varrho ', '&#1009;'); //Elsevier and 9573-13 //AMS and LaTeX
-
-  //Greek constants, look best in non-italicized Times New Roman
-  LatexCmds.pi = LatexCmds['\u03c0'] = bind(NonSymbolaSymbol, '\\pi ', '&pi;');
-  LatexCmds.lambda = bind(NonSymbolaSymbol, '\\lambda ', '&lambda;');
-
-  //uppercase greek letters
-
-  LatexCmds.Upsilon =
-    LatexCmds.Upsi =
-    LatexCmds.upsih =
-    LatexCmds.Upsih =
-      bind(
-        //LaTeX //Elsevier and 9573-13 //W3C/Unicode "upsilon with hook" //'cos it makes sense to me
-        Symbol,
-        '\\Upsilon ',
-        '<var style="font-family: serif">&upsih;</var>',
-      ); //Symbola's 'upsilon with a hook' is a capital Y without hooks :(
-
-  //other symbols with the same LaTeX command and HTML character entity reference
-  LatexCmds.Gamma =
-    LatexCmds.Delta =
-    LatexCmds.Theta =
-    LatexCmds.Lambda =
-    LatexCmds.Xi =
-    LatexCmds.Pi =
-    LatexCmds.Sigma =
-    LatexCmds.Phi =
-    LatexCmds.Psi =
-    LatexCmds.Omega =
-    LatexCmds.forall =
-      P(VanillaSymbol, function (_, super_) {
-        _.init = function (latex) {
-          super_.init.call(this, '\\' + latex + ' ', '&' + latex + ';');
-        };
-      });
-
-  // symbols that aren't a single MathCommand, but are instead a whole
-  // Fragment. Creates the Fragment from a LaTeX string
-  var LatexFragment = P(MathCommand, function (_) {
-    _.init = function (latex) {
-      this.latex = latex;
-    };
-    _.createLeftOf = function (cursor) {
-      var block = latexMathParser.parse(this.latex);
-      block.children().adopt(cursor.parent, cursor[L], cursor[R]);
-      cursor[L] = block.ends[R];
-      block.jQize().insertBefore(cursor.jQ);
-      block.finalizeInsert(cursor.options, cursor);
-      if (block.ends[R][R].siblingCreated) block.ends[R][R].siblingCreated(cursor.options, L);
-      if (block.ends[L][L].siblingCreated) block.ends[L][L].siblingCreated(cursor.options, R);
-      cursor.parent.bubble('reflow');
-    };
-    _.parser = function () {
-      var frag = latexMathParser.parse(this.latex).children();
-      return Parser.succeed(frag);
-    };
-  });
-
-  // for what seems to me like [stupid reasons][1], Unicode provides
-  // subscripted and superscripted versions of all ten Arabic numerals,
-  // as well as [so-called "vulgar fractions"][2].
-  // Nobody really cares about most of them, but some of them actually
-  // predate Unicode, dating back to [ISO-8859-1][3], apparently also
-  // known as "Latin-1", which among other things [Windows-1252][4]
-  // largely coincides with, so Microsoft Word sometimes inserts them
-  // and they get copy-pasted into MathQuill.
-  //
-  // (Irrelevant but funny story: though not a superset of Latin-1 aka
-  // ISO-8859-1, Windows-1252 **is** a strict superset of the "closely
-  // related but distinct"[3] "ISO 8859-1" -- see the lack of a dash
-  // after "ISO"? Completely different character set, like elephants vs
-  // elephant seals, or "Zombies" vs "Zombie Redneck Torture Family".
-  // What kind of idiot would get them confused.
-  // People in fact got them confused so much, it was so common to
-  // mislabel Windows-1252 text as ISO-8859-1, that most modern web
-  // browsers and email clients treat the MIME charset of ISO-8859-1
-  // as actually Windows-1252, behavior now standard in the HTML5 spec.)
-  //
-  // [1]: http://en.wikipedia.org/wiki/Unicode_subscripts_andsuper_scripts
-  // [2]: http://en.wikipedia.org/wiki/Number_Forms
-  // [3]: http://en.wikipedia.org/wiki/ISO/IEC_8859-1
-  // [4]: http://en.wikipedia.org/wiki/Windows-1252
-  LatexCmds['\u00b9'] = bind(LatexFragment, '^1');
-  LatexCmds['\u00b2'] = bind(LatexFragment, '^2');
-  LatexCmds['\u00b3'] = bind(LatexFragment, '^3');
-  LatexCmds['\u00bc'] = bind(LatexFragment, '\\frac14');
-  LatexCmds['\u00bd'] = bind(LatexFragment, '\\frac12');
-  LatexCmds['\u00be'] = bind(LatexFragment, '\\frac34');
-
-  var PlusMinus = P(BinaryOperator, function (_) {
-    _.init = VanillaSymbol.prototype.init;
-
-    _.contactWeld =
-      _.siblingCreated =
-      _.siblingDeleted =
-        function (opts, dir) {
-          if (dir === R) return; // ignore if sibling only changed on the right
-          // If the left sibling is a binary operator or a separator (comma, semicolon, colon)
-          // or an open bracket (open parenthesis, open square bracket)
-          // consider the operator to be unary, otherwise binary
-          this.jQ[0].className =
-            !this[L] || this[L] instanceof BinaryOperator || /^[,;:\(\[]$/.test(this[L].ctrlSeq)
-              ? ''
-              : 'mq-binary-operator';
-          return this;
-        };
-  });
-
-  LatexCmds['+'] = bind(PlusMinus, '+', '+');
-  //yes, these are different dashes, I think one is an en dash and the other is a hyphen
-  LatexCmds['\u2013'] = LatexCmds['-'] = bind(PlusMinus, '-', '&minus;');
-  LatexCmds['\u00b1'] =
-    LatexCmds.pm =
-    LatexCmds.plusmn =
-    LatexCmds.plusminus =
-      bind(PlusMinus, '\\pm ', '&plusmn;');
-  LatexCmds.mp = LatexCmds.mnplus = LatexCmds.minusplus = bind(PlusMinus, '\\mp ', '&#8723;');
-
-  CharCmds['*'] =
-    LatexCmds.sdot =
-    LatexCmds.cdot =
-      bind(BinaryOperator, '\\cdot ', '&middot;', '*');
-  //semantically should be &sdot;, but &middot; looks better
-
-  var Inequality = P(BinaryOperator, function (_, super_) {
-    _.init = function (data, strict) {
-      this.data = data;
-      this.strict = strict;
-      var strictness = strict ? 'Strict' : '';
-      super_.init.call(
-        this,
-        data['ctrlSeq' + strictness],
-        data['html' + strictness],
-        data['text' + strictness],
-      );
-    };
-    _.swap = function (strict) {
-      this.strict = strict;
-      var strictness = strict ? 'Strict' : '';
-      this.ctrlSeq = this.data['ctrlSeq' + strictness];
-      this.jQ.html(this.data['html' + strictness]);
-      this.textTemplate = [this.data['text' + strictness]];
-    };
-    _.deleteTowards = function (dir, cursor) {
-      if (dir === L && !this.strict) {
-        this.swap(true);
-        this.bubble('reflow');
-        return;
-      }
-      super_.deleteTowards.apply(this, arguments);
-    };
-  });
-
-  var less = {
-    ctrlSeq: '\\le ',
-    html: '&le;',
-    text: '\u2264',
-    ctrlSeqStrict: '<',
-    htmlStrict: '&lt;',
-    textStrict: '<',
-  };
-  var greater = {
-    ctrlSeq: '\\ge ',
-    html: '&ge;',
-    text: '\u2265',
-    ctrlSeqStrict: '>',
-    htmlStrict: '&gt;',
-    textStrict: '>',
-  };
-
-  LatexCmds['<'] = LatexCmds.lt = bind(Inequality, less, true);
-  LatexCmds['>'] = LatexCmds.gt = bind(Inequality, greater, true);
-  LatexCmds['\u2264'] = LatexCmds.le = LatexCmds.leq = bind(Inequality, less, false);
-  LatexCmds['\u2265'] = LatexCmds.ge = LatexCmds.geq = bind(Inequality, greater, false);
-
-  var Equality = P(BinaryOperator, function (_, super_) {
-    _.init = function () {
-      super_.init.call(this, '=', '=');
-    };
-    _.createLeftOf = function (cursor) {
-      if (cursor[L] instanceof Inequality && cursor[L].strict) {
-        cursor[L].swap(false);
-        cursor[L].bubble('reflow');
-        return;
-      }
-      super_.createLeftOf.apply(this, arguments);
-    };
-  });
-  LatexCmds['='] = Equality;
-
-  LatexCmds['\u00d7'] = LatexCmds.times = bind(BinaryOperator, '\\times ', '&times;', '[x]');
-
-  LatexCmds['\u00f7'] =
-    LatexCmds.div =
-    LatexCmds.divide =
-    LatexCmds.divides =
-      bind(BinaryOperator, '\\div ', '&divide;', '[/]');
-
-  CharCmds['~'] = LatexCmds.sim = bind(BinaryOperator, '\\sim ', '~', '~');
-  /***************************
-   * Commands and Operators.
-   **************************/
-
-  var scale, // = function(jQ, x, y) { ... }
-    //will use a CSS 2D transform to scale the jQuery-wrapped HTML elements,
-    //or the filter matrix transform fallback for IE 5.5-8, or gracefully degrade to
-    //increasing the fontSize to match the vertical Y scaling factor.
-
-    //ideas from http://github.com/louisremi/jquery.transform.js
-    //see also http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx
-
-    forceIERedraw = noop,
-    div = document.createElement('div'),
-    div_style = div.style,
-    transformPropNames = {
-      transform: 1,
-      WebkitTransform: 1,
-      MozTransform: 1,
-      OTransform: 1,
-      msTransform: 1,
-    },
-    transformPropName;
-
-  for (var prop in transformPropNames) {
-    if (prop in div_style) {
-      transformPropName = prop;
-      break;
-    }
-  }
-
-  if (transformPropName) {
-    scale = function (jQ, x, y) {
-      jQ.css(transformPropName, 'scale(' + x + ',' + y + ')');
-    };
-  } else if ('filter' in div_style) {
-    //IE 6, 7, & 8 fallback, see https://github.com/laughinghan/mathquill/wiki/Transforms
-    forceIERedraw = function (el) {
-      el.className = el.className;
-    };
-    scale = function (jQ, x, y) {
-      //NOTE: assumes y > x
-      x /= 1 + (y - 1) / 2;
-      jQ.css('fontSize', y + 'em');
-      if (!jQ.hasClass('mq-matrixed-container')) {
-        jQ.addClass('mq-matrixed-container').wrapInner('<span class="mq-matrixed"></span>');
-      }
-      var innerjQ = jQ
-        .children()
-        .css(
-          'filter',
-          'progid:DXImageTransform.Microsoft' + '.Matrix(M11=' + x + ",SizingMethod='auto expand')",
-        );
-      function calculateMarginRight() {
-        jQ.css('marginRight', ((innerjQ.width() - 1) * (x - 1)) / x + 'px');
-      }
-      calculateMarginRight();
-      var intervalId = setInterval(calculateMarginRight);
-      $(window).load(function () {
-        clearTimeout(intervalId);
-        calculateMarginRight();
-      });
-    };
-  } else {
-    scale = function (jQ, x, y) {
-      jQ.css('fontSize', y + 'em');
-    };
-  }
-
-  var Style = P(MathCommand, function (_, super_) {
-    _.init = function (ctrlSeq, tagName, attrs) {
-      super_.init.call(this, ctrlSeq, '<' + tagName + ' ' + attrs + '>&0</' + tagName + '>');
-    };
-  });
-
-  //fonts
-  LatexCmds.mathrm = bind(Style, '\\mathrm', 'span', 'class="mq-roman mq-font"');
-  LatexCmds.mathit = bind(Style, '\\mathit', 'i', 'class="mq-font"');
-  LatexCmds.mathbf = bind(Style, '\\mathbf', 'b', 'class="mq-font"');
-  LatexCmds.mathsf = bind(Style, '\\mathsf', 'span', 'class="mq-sans-serif mq-font"');
-  LatexCmds.mathtt = bind(Style, '\\mathtt', 'span', 'class="mq-monospace mq-font"');
-  //text-decoration
-  LatexCmds.underline = bind(Style, '\\underline', 'span', 'class="mq-non-leaf mq-underline"');
-  LatexCmds.overline = LatexCmds.bar = bind(
-    Style,
-    '\\overline',
-    'span',
-    'class="mq-non-leaf mq-overline"',
-  );
-  LatexCmds.overrightarrow = bind(
-    Style,
-    '\\overrightarrow',
-    'span',
-    'class="mq-non-leaf mq-overarrow mq-arrow-right"',
-  );
-  LatexCmds.overleftarrow = bind(
-    Style,
-    '\\overleftarrow',
-    'span',
-    'class="mq-non-leaf mq-overarrow mq-arrow-left"',
-  );
-
-  // `\textcolor{color}{math}` will apply a color to the given math content, where
-  // `color` is any valid CSS Color Value (see [SitePoint docs][] (recommended),
-  // [Mozilla docs][], or [W3C spec][]).
-  //
-  // [SitePoint docs]: http://reference.sitepoint.com/css/colorvalues
-  // [Mozilla docs]: https://developer.mozilla.org/en-US/docs/CSS/color_value#Values
-  // [W3C spec]: http://dev.w3.org/csswg/css3-color/#colorunits
-  var TextColor = (LatexCmds.textcolor = P(MathCommand, function (_, super_) {
-    _.setColor = function (color) {
-      this.color = color;
-      this.htmlTemplate = '<span class="mq-textcolor" style="color:' + color + '">&0</span>';
-    };
-    _.latex = function () {
-      return '\\textcolor{' + this.color + '}{' + this.blocks[0].latex() + '}';
-    };
-    _.parser = function () {
-      var self = this;
-      var optWhitespace = Parser.optWhitespace;
-      var string = Parser.string;
-      var regex = Parser.regex;
-
-      return optWhitespace
-        .then(string('{'))
-        .then(regex(/^[#\w\s.,()%-]*/))
-        .skip(string('}'))
-        .then(function (color) {
-          self.setColor(color);
-          return super_.parser.call(self);
-        });
-    };
-  }));
-
-  // Very similar to the \textcolor command, but will add the given CSS class.
-  // Usage: \class{classname}{math}
-  // Note regex that whitelists valid CSS classname characters:
-  // https://github.com/mathquill/mathquill/pull/191#discussion_r4327442
-  var Class = (LatexCmds['class'] = P(MathCommand, function (_, super_) {
-    _.parser = function () {
-      var self = this,
-        string = Parser.string,
-        regex = Parser.regex;
-      return Parser.optWhitespace
-        .then(string('{'))
-        .then(regex(/^[-\w\s\\\xA0-\xFF]*/))
-        .skip(string('}'))
-        .then(function (cls) {
-          self.htmlTemplate = '<span class="mq-class ' + cls + '">&0</span>';
-          return super_.parser.call(self);
-        });
-    };
-  }));
-
-  var SupSub = P(MathCommand, function (_, super_) {
-    _.ctrlSeq = '_{...}^{...}';
-    _.createLeftOf = function (cursor) {
-      if (!cursor[L] && cursor.options.supSubsRequireOperand) return;
-      return super_.createLeftOf.apply(this, arguments);
-    };
-    _.contactWeld = function (cursor) {
-      // Look on either side for a SupSub, if one is found compare my
-      // .sub, .sup with its .sub, .sup. If I have one that it doesn't,
-      // then call .addBlock() on it with my block; if I have one that
-      // it also has, then insert my block's children into its block,
-      // unless my block has none, in which case insert the cursor into
-      // its block (and not mine, I'm about to remove myself) in the case
-      // I was just typed.
-      // TODO: simplify
-
-      // equiv. to [L, R].forEach(function(dir) { ... });
-      for (var dir = L; dir; dir = dir === L ? R : false) {
-        if (this[dir] instanceof SupSub) {
-          // equiv. to 'sub sup'.split(' ').forEach(function(supsub) { ... });
-          for (var supsub = 'sub'; supsub; supsub = supsub === 'sub' ? 'sup' : false) {
-            var src = this[supsub],
-              dest = this[dir][supsub];
-            if (!src) continue;
-            if (!dest) this[dir].addBlock(src.disown());
-            else if (!src.isEmpty()) {
-              // ins src children at -dir end of dest
-              src.jQ.children().insAtDirEnd(-dir, dest.jQ);
-              var children = src.children().disown();
-              var pt = Point(dest, children.ends[R], dest.ends[L]);
-              if (dir === L) children.adopt(dest, dest.ends[R], 0);
-              else children.adopt(dest, 0, dest.ends[L]);
-            } else var pt = Point(dest, 0, dest.ends[L]);
-            this.placeCursor = (function (dest, src) {
-              // TODO: don't monkey-patch
-              return function (cursor) {
-                cursor.insAtDirEnd(-dir, dest || src);
-              };
-            })(dest, src);
-          }
-          this.remove();
-          if (cursor && cursor[L] === this) {
-            if (dir === R && pt) {
-              pt[L] ? cursor.insRightOf(pt[L]) : cursor.insAtLeftEnd(pt.parent);
-            } else cursor.insRightOf(this[dir]);
-          }
-          break;
-        }
-      }
-    };
-    Options.p.charsThatBreakOutOfSupSub = '';
-    _.finalizeTree = function () {
-      this.ends[L].write = function (cursor, ch) {
-        if (cursor.options.autoSubscriptNumerals && this === this.parent.sub) {
-          if (ch === '_') return;
-          var cmd = this.chToCmd(ch);
-          if (cmd instanceof Symbol) cursor.deleteSelection();
-          else cursor.clearSelection().insRightOf(this.parent);
-          return cmd.createLeftOf(cursor.show());
-        }
-        if (
-          cursor[L] &&
-          !cursor[R] &&
-          !cursor.selection &&
-          cursor.options.charsThatBreakOutOfSupSub.indexOf(ch) > -1
-        ) {
-          cursor.insRightOf(this.parent);
-        }
-        MathBlock.p.write.apply(this, arguments);
-      };
-    };
-    _.moveTowards = function (dir, cursor, updown) {
-      if (cursor.options.autoSubscriptNumerals && !this.sup) {
-        cursor.insDirOf(dir, this);
-      } else super_.moveTowards.apply(this, arguments);
-    };
-    _.deleteTowards = function (dir, cursor) {
-      if (cursor.options.autoSubscriptNumerals && this.sub) {
-        var cmd = this.sub.ends[-dir];
-        if (cmd instanceof Symbol) cmd.remove();
-        else if (cmd) cmd.deleteTowards(dir, cursor.insAtDirEnd(-dir, this.sub));
-
-        // TODO: factor out a .removeBlock() or something
-        if (this.sub.isEmpty()) {
-          this.sub.deleteOutOf(L, cursor.insAtLeftEnd(this.sub));
-          if (this.sup) cursor.insDirOf(-dir, this);
-          // Note `-dir` because in e.g. x_1^2| want backspacing (leftward)
-          // to delete the 1 but to end up rightward of x^2; with non-negated
-          // `dir` (try it), the cursor appears to have gone "through" the ^2.
-        }
-      } else super_.deleteTowards.apply(this, arguments);
-    };
-    _.latex = function () {
-      function latex(prefix, block) {
-        var l = block && block.latex();
-        return block ? prefix + (l.length === 1 ? l : '{' + (l || ' ') + '}') : '';
-      }
-      return latex('_', this.sub) + latex('^', this.sup);
-    };
-    _.addBlock = function (block) {
-      if (this.supsub === 'sub') {
-        this.sup = this.upInto = this.sub.upOutOf = block;
-        block.adopt(this, this.sub, 0).downOutOf = this.sub;
-        block.jQ = $('<span class="mq-sup"/>')
-          .append(block.jQ.children())
-          .attr(mqBlockId, block.id)
-          .prependTo(this.jQ);
-      } else {
-        this.sub = this.downInto = this.sup.downOutOf = block;
-        block.adopt(this, 0, this.sup).upOutOf = this.sup;
-        block.jQ = $('<span class="mq-sub"></span>')
-          .append(block.jQ.children())
-          .attr(mqBlockId, block.id)
-          .appendTo(this.jQ.removeClass('mq-sup-only'));
-        this.jQ.append('<span style="display:inline-block;width:0">&#8203;</span>');
-      }
-      // like 'sub sup'.split(' ').forEach(function(supsub) { ... });
-      for (var i = 0; i < 2; i += 1)
-        (function (cmd, supsub, oppositeSupsub, updown) {
-          cmd[supsub].deleteOutOf = function (dir, cursor) {
-            cursor.insDirOf(this[dir] ? -dir : dir, this.parent);
-            if (!this.isEmpty()) {
-              var end = this.ends[dir];
-              this.children()
-                .disown()
-                .withDirAdopt(dir, cursor.parent, cursor[dir], cursor[-dir])
-                .jQ.insDirOf(-dir, cursor.jQ);
-              cursor[-dir] = end;
-            }
-            cmd.supsub = oppositeSupsub;
-            delete cmd[supsub];
-            delete cmd[updown + 'Into'];
-            cmd[oppositeSupsub][updown + 'OutOf'] = insLeftOfMeUnlessAtEnd;
-            delete cmd[oppositeSupsub].deleteOutOf;
-            if (supsub === 'sub') $(cmd.jQ.addClass('mq-sup-only')[0].lastChild).remove();
-            this.remove();
-          };
-        })(this, 'sub sup'.split(' ')[i], 'sup sub'.split(' ')[i], 'down up'.split(' ')[i]);
-    };
-  });
-
-  function insLeftOfMeUnlessAtEnd(cursor) {
-    // cursor.insLeftOf(cmd), unless cursor at the end of block, and every
-    // ancestor cmd is at the end of every ancestor block
-    var cmd = this.parent,
-      ancestorCmd = cursor;
-    do {
-      if (ancestorCmd[R]) return cursor.insLeftOf(cmd);
-      ancestorCmd = ancestorCmd.parent.parent;
-    } while (ancestorCmd !== cmd);
-    cursor.insRightOf(cmd);
-  }
-
-  LatexCmds.subscript = LatexCmds._ = P(SupSub, function (_, super_) {
-    _.supsub = 'sub';
-    _.htmlTemplate =
-      '<span class="mq-supsub mq-non-leaf">' +
-      '<span class="mq-sub">&0</span>' +
-      '<span style="display:inline-block;width:0">&#8203;</span>' +
-      '</span>';
-    _.textTemplate = ['_'];
-    _.finalizeTree = function () {
-      this.downInto = this.sub = this.ends[L];
-      this.sub.upOutOf = insLeftOfMeUnlessAtEnd;
-      super_.finalizeTree.call(this);
-    };
-  });
-
-  LatexCmds.superscript =
-    LatexCmds.supscript =
-    LatexCmds['^'] =
-      P(SupSub, function (_, super_) {
-        _.supsub = 'sup';
-        _.htmlTemplate =
-          '<span class="mq-supsub mq-non-leaf mq-sup-only">' +
-          '<span class="mq-sup">&0</span>' +
-          '</span>';
-        _.textTemplate = ['^'];
-        _.finalizeTree = function () {
-          this.upInto = this.sup = this.ends[R];
-          this.sup.downOutOf = insLeftOfMeUnlessAtEnd;
-          super_.finalizeTree.call(this);
-        };
-      });
-
-  var SummationNotation = P(MathCommand, function (_, super_) {
-    _.init = function (ch, html) {
-      var htmlTemplate =
-        '<span class="mq-large-operator mq-non-leaf">' +
-        '<span class="mq-to"><span>&1</span></span>' +
-        '<big>' +
-        html +
-        '</big>' +
-        '<span class="mq-from"><span>&0</span></span>' +
-        '</span>';
-      Symbol.prototype.init.call(this, ch, htmlTemplate);
-    };
-    _.createLeftOf = function (cursor) {
-      super_.createLeftOf.apply(this, arguments);
-      if (cursor.options.sumStartsWithNEquals) {
-        Letter('n').createLeftOf(cursor);
-        Equality().createLeftOf(cursor);
-      }
-    };
-    _.latex = function () {
-      function simplify(latex) {
-        return latex.length === 1 ? latex : '{' + (latex || ' ') + '}';
-      }
-      return (
-        this.ctrlSeq + '_' + simplify(this.ends[L].latex()) + '^' + simplify(this.ends[R].latex())
-      );
-    };
-    _.parser = function () {
-      var string = Parser.string;
-      var optWhitespace = Parser.optWhitespace;
-      var succeed = Parser.succeed;
-      var block = latexMathParser.block;
-
-      var self = this;
-      var blocks = (self.blocks = [MathBlock(), MathBlock()]);
-      for (var i = 0; i < blocks.length; i += 1) {
-        blocks[i].adopt(self, self.ends[R], 0);
-      }
-
-      return optWhitespace
-        .then(string('_').or(string('^')))
-        .then(function (supOrSub) {
-          var child = blocks[supOrSub === '_' ? 0 : 1];
-          return block.then(function (block) {
-            block.children().adopt(child, child.ends[R], 0);
-            return succeed(self);
-          });
-        })
-        .many()
-        .result(self);
-    };
-    _.finalizeTree = function () {
-      this.downInto = this.ends[L];
-      this.upInto = this.ends[R];
-      this.ends[L].upOutOf = this.ends[R];
-      this.ends[R].downOutOf = this.ends[L];
-    };
-  });
-
-  LatexCmds['\u2211'] =
-    LatexCmds.sum =
-    LatexCmds.summation =
-      bind(SummationNotation, '\\sum ', '&sum;');
-
-  LatexCmds['\u220f'] =
-    LatexCmds.prod =
-    LatexCmds.product =
-      bind(SummationNotation, '\\prod ', '&prod;');
-
-  LatexCmds.coprod = LatexCmds.coproduct = bind(SummationNotation, '\\coprod ', '&#8720;');
-
-  LatexCmds['\u222b'] =
-    LatexCmds['int'] =
-    LatexCmds.integral =
-      P(SummationNotation, function (_, super_) {
-        _.init = function () {
-          var htmlTemplate =
-            '<span class="mq-int mq-non-leaf">' +
-            '<big>&int;</big>' +
-            '<span class="mq-supsub mq-non-leaf">' +
-            '<span class="mq-sup"><span class="mq-sup-inner">&1</span></span>' +
-            '<span class="mq-sub">&0</span>' +
-            '<span style="display:inline-block;width:0">&#8203</span>' +
-            '</span>' +
-            '</span>';
-          Symbol.prototype.init.call(this, '\\int ', htmlTemplate);
-        };
-        // FIXME: refactor rather than overriding
-        _.createLeftOf = MathCommand.p.createLeftOf;
-      });
-
-  var Fraction =
-    (LatexCmds.frac =
-    LatexCmds.dfrac =
-    LatexCmds.cfrac =
-    LatexCmds.fraction =
-      P(MathCommand, function (_, super_) {
-        _.ctrlSeq = '\\frac';
-        _.htmlTemplate =
-          '<span class="mq-fraction mq-non-leaf">' +
-          '<span class="mq-numerator">&0</span>' +
-          '<span class="mq-denominator">&1</span>' +
-          '<span style="display:inline-block;width:0">&#8203;</span>' +
-          '</span>';
-        _.textTemplate = ['(', ')/(', ')'];
-        _.finalizeTree = function () {
-          this.upInto = this.ends[R].upOutOf = this.ends[L];
-          this.downInto = this.ends[L].downOutOf = this.ends[R];
-        };
-      }));
-
-  var LiveFraction =
-    (LatexCmds.over =
-    CharCmds['/'] =
-      P(Fraction, function (_, super_) {
-        _.createLeftOf = function (cursor) {
-          if (!this.replacedFragment) {
-            var leftward = cursor[L];
-            while (
-              leftward &&
-              !(
-                leftward instanceof BinaryOperator ||
-                leftward instanceof (LatexCmds.text || noop) ||
-                leftward instanceof SummationNotation ||
-                leftward.ctrlSeq === '\\ ' ||
-                /^[,;:]$/.test(leftward.ctrlSeq)
-              ) //lookbehind for operator
-            )
-              leftward = leftward[L];
-
-            if (leftward instanceof SummationNotation && leftward[R] instanceof SupSub) {
-              leftward = leftward[R];
-              if (leftward[R] instanceof SupSub && leftward[R].ctrlSeq != leftward.ctrlSeq)
-                leftward = leftward[R];
-            }
-
-            if (leftward !== cursor[L]) {
-              this.replaces(Fragment(leftward[R] || cursor.parent.ends[L], cursor[L]));
-              cursor[L] = leftward;
-            }
-          }
-          super_.createLeftOf.call(this, cursor);
-        };
-      }));
-
-  var SquareRoot =
-    (LatexCmds.sqrt =
-    LatexCmds['\u221a'] =
-      P(MathCommand, function (_, super_) {
-        _.ctrlSeq = '\\sqrt';
-        _.htmlTemplate =
-          '<span class="mq-non-leaf">' +
-          '<span class="mq-scaled mq-sqrt-prefix">&radic;</span>' +
-          '<span class="mq-non-leaf mq-sqrt-stem">&0</span>' +
-          '</span>';
-        _.textTemplate = ['sqrt(', ')'];
-        _.parser = function () {
-          return latexMathParser.optBlock
-            .then(function (optBlock) {
-              return latexMathParser.block.map(function (block) {
-                var nthroot = NthRoot();
-                nthroot.blocks = [optBlock, block];
-                optBlock.adopt(nthroot, 0, 0);
-                block.adopt(nthroot, optBlock, 0);
-                return nthroot;
-              });
-            })
-            .or(super_.parser.call(this));
-        };
-        _.reflow = function () {
-          var block = this.ends[R].jQ;
-          scale(block.prev(), 1, block.innerHeight() / +block.css('fontSize').slice(0, -2) - 0.1);
-        };
-      }));
-
-  var Vec = (LatexCmds.vec = P(MathCommand, function (_, super_) {
-    _.ctrlSeq = '\\vec';
-    _.htmlTemplate =
-      '<span class="mq-non-leaf">' +
-      '<span class="mq-vector-prefix">&rarr;</span>' +
-      '<span class="mq-vector-stem">&0</span>' +
-      '</span>';
-    _.textTemplate = ['vec(', ')'];
-  }));
-
-  var NthRoot = (LatexCmds.nthroot = P(SquareRoot, function (_, super_) {
-    _.htmlTemplate =
-      '<sup class="mq-nthroot mq-non-leaf">&0</sup>' +
-      '<span class="mq-scaled">' +
-      '<span class="mq-sqrt-prefix mq-scaled">&radic;</span>' +
-      '<span class="mq-sqrt-stem mq-non-leaf">&1</span>' +
-      '</span>';
-    _.textTemplate = ['sqrt[', '](', ')'];
-    _.latex = function () {
-      return '\\sqrt[' + this.ends[L].latex() + ']{' + this.ends[R].latex() + '}';
-    };
-  }));
-
-  function DelimsMixin(_, super_) {
-    _.jQadd = function () {
-      super_.jQadd.apply(this, arguments);
-      this.delimjQs = this.jQ.children(':first').add(this.jQ.children(':last'));
-      this.contentjQ = this.jQ.children(':eq(1)');
-    };
-    _.reflow = function () {
-      var height = this.contentjQ.outerHeight() / parseFloat(this.contentjQ.css('fontSize'));
-      scale(this.delimjQs, min(1 + 0.2 * (height - 1), 1.2), 1.2 * height);
-    };
-  }
-
-  // Round/Square/Curly/Angle Brackets (aka Parens/Brackets/Braces)
-  //   first typed as one-sided bracket with matching "ghost" bracket at
-  //   far end of current block, until you type an opposing one
-  var Bracket = P(P(MathCommand, DelimsMixin), function (_, super_) {
-    _.init = function (side, open, close, ctrlSeq, end) {
-      super_.init.call(this, '\\left' + ctrlSeq, undefined, [open, close]);
-      this.side = side;
-      this.sides = {};
-      this.sides[L] = { ch: open, ctrlSeq: ctrlSeq };
-      this.sides[R] = { ch: close, ctrlSeq: end };
-    };
-    _.numBlocks = function () {
-      return 1;
-    };
-    _.html = function () {
-      // wait until now so that .side may
-      this.htmlTemplate = // be set by createLeftOf or parser
-        '<span class="mq-non-leaf">' +
-        '<span class="mq-scaled mq-paren' +
-        (this.side === R ? ' mq-ghost' : '') +
-        '">' +
-        this.sides[L].ch +
-        '</span>' +
-        '<span class="mq-non-leaf">&0</span>' +
-        '<span class="mq-scaled mq-paren' +
-        (this.side === L ? ' mq-ghost' : '') +
-        '">' +
-        this.sides[R].ch +
-        '</span>' +
-        '</span>';
-      return super_.html.call(this);
-    };
-    _.latex = function () {
-      return (
-        '\\left' + this.sides[L].ctrlSeq + this.ends[L].latex() + '\\right' + this.sides[R].ctrlSeq
-      );
-    };
-    _.oppBrack = function (opts, node, expectedSide) {
-      // return node iff it's a 1-sided bracket of expected side (if any, may be
-      // undefined), and of opposite side from me if I'm not a pipe
-      return (
-        node instanceof Bracket &&
-        node.side &&
-        node.side !== -expectedSide &&
-        (this.sides[this.side].ch === '|' || node.side === -this.side) &&
-        (!opts.restrictMismatchedBrackets ||
-          OPP_BRACKS[this.sides[this.side].ch] === node.sides[node.side].ch ||
-          { '(': ']', '[': ')' }[this.sides[L].ch] === node.sides[R].ch) &&
-        node
-      );
-    };
-    _.closeOpposing = function (brack) {
-      brack.side = 0;
-      brack.sides[this.side] = this.sides[this.side]; // copy over my info (may be
-      brack.delimjQs
-        .eq(this.side === L ? 0 : 1) // mismatched, like [a, b))
-        .removeClass('mq-ghost')
-        .html(this.sides[this.side].ch);
-    };
-    _.createLeftOf = function (cursor) {
-      if (!this.replacedFragment) {
-        // unless wrapping seln in brackets,
-        // check if next to or inside an opposing one-sided bracket
-        // (must check both sides 'cos I might be a pipe)
-        var opts = cursor.options;
-        var brack =
-          this.oppBrack(opts, cursor[L], L) ||
-          this.oppBrack(opts, cursor[R], R) ||
-          this.oppBrack(opts, cursor.parent.parent);
-      }
-      if (brack) {
-        var side = (this.side = -brack.side); // may be pipe with .side not yet set
-        this.closeOpposing(brack);
-        if (brack === cursor.parent.parent && cursor[side]) {
-          // move the stuff between
-          Fragment(cursor[side], cursor.parent.ends[side], -side) // me and ghost outside
-            .disown()
-            .withDirAdopt(-side, brack.parent, brack, brack[side])
-            .jQ.insDirOf(side, brack.jQ);
-          brack.bubble('reflow');
-        }
-      } else {
-        ((brack = this), (side = brack.side));
-        if (brack.replacedFragment) brack.side = 0;
-        // wrapping seln, don't be one-sided
-        else if (cursor[-side]) {
-          // elsewise, auto-expand so ghost is at far end
-          brack.replaces(Fragment(cursor[-side], cursor.parent.ends[-side], side));
-          cursor[-side] = 0;
-        }
-        super_.createLeftOf.call(brack, cursor);
-      }
-      if (side === L) cursor.insAtLeftEnd(brack.ends[L]);
-      else cursor.insRightOf(brack);
-    };
-    _.placeCursor = noop;
-    _.unwrap = function () {
-      this.ends[L].children().disown().adopt(this.parent, this, this[R]).jQ.insertAfter(this.jQ);
-      this.remove();
-    };
-    _.deleteSide = function (side, outward, cursor) {
-      var parent = this.parent,
-        sib = this[side],
-        farEnd = parent.ends[side];
-
-      if (side === this.side) {
-        // deleting non-ghost of one-sided bracket, unwrap
-        this.unwrap();
-        sib ? cursor.insDirOf(-side, sib) : cursor.insAtDirEnd(side, parent);
-        return;
-      }
-
-      var opts = cursor.options,
-        wasSolid = !this.side;
-      this.side = -side;
-      // if deleting like, outer close-brace of [(1+2)+3} where inner open-paren
-      if (this.oppBrack(opts, this.ends[L].ends[this.side], side)) {
-        // is ghost,
-        this.closeOpposing(this.ends[L].ends[this.side]); // then become [1+2)+3
-        var origEnd = this.ends[L].ends[side];
-        this.unwrap();
-        if (origEnd.siblingCreated) origEnd.siblingCreated(cursor.options, side);
-        sib ? cursor.insDirOf(-side, sib) : cursor.insAtDirEnd(side, parent);
-      } else {
-        // if deleting like, inner close-brace of ([1+2}+3) where outer
-        if (this.oppBrack(opts, this.parent.parent, side)) {
-          // open-paren is
-          this.parent.parent.closeOpposing(this); // ghost, then become [1+2+3)
-          this.parent.parent.unwrap();
-        } // else if deleting outward from a solid pair, unwrap
-        else if (outward && wasSolid) {
-          this.unwrap();
-          sib ? cursor.insDirOf(-side, sib) : cursor.insAtDirEnd(side, parent);
-          return;
-        } else {
-          // else deleting just one of a pair of brackets, become one-sided
-          this.sides[side] = {
-            ch: OPP_BRACKS[this.sides[this.side].ch],
-            ctrlSeq: OPP_BRACKS[this.sides[this.side].ctrlSeq],
-          };
-          this.delimjQs
-            .removeClass('mq-ghost')
-            .eq(side === L ? 0 : 1)
-            .addClass('mq-ghost')
-            .html(this.sides[side].ch);
-        }
-        if (sib) {
-          // auto-expand so ghost is at far end
-          var origEnd = this.ends[L].ends[side];
-          Fragment(sib, farEnd, -side)
-            .disown()
-            .withDirAdopt(-side, this.ends[L], origEnd, 0)
-            .jQ.insAtDirEnd(side, this.ends[L].jQ.removeClass('mq-empty'));
-          if (origEnd.siblingCreated) origEnd.siblingCreated(cursor.options, side);
-          cursor.insDirOf(-side, sib);
-        } // didn't auto-expand, cursor goes just outside or just inside parens
-        else outward ? cursor.insDirOf(side, this) : cursor.insAtDirEnd(side, this.ends[L]);
-      }
-    };
-    _.deleteTowards = function (dir, cursor) {
-      this.deleteSide(-dir, false, cursor);
-    };
-    _.finalizeTree = function () {
-      this.ends[L].deleteOutOf = function (dir, cursor) {
-        this.parent.deleteSide(dir, true, cursor);
-      };
-      // FIXME HACK: after initial creation/insertion, finalizeTree would only be
-      // called if the paren is selected and replaced, e.g. by LiveFraction
-      this.finalizeTree = this.intentionalBlur = function () {
-        this.delimjQs.eq(this.side === L ? 1 : 0).removeClass('mq-ghost');
-        this.side = 0;
-      };
-    };
-    _.siblingCreated = function (opts, dir) {
-      // if something typed between ghost and far
-      if (dir === -this.side) this.finalizeTree(); // end of its block, solidify
-    };
-  });
-
-  var OPP_BRACKS = {
-    '(': ')',
-    ')': '(',
-    '[': ']',
-    ']': '[',
-    '{': '}',
-    '}': '{',
-    '\\{': '\\}',
-    '\\}': '\\{',
-    '&lang;': '&rang;',
-    '&rang;': '&lang;',
-    '\\langle ': '\\rangle ',
-    '\\rangle ': '\\langle ',
-    '|': '|',
-  };
-
-  function bindCharBracketPair(open, ctrlSeq) {
-    var ctrlSeq = ctrlSeq || open,
-      close = OPP_BRACKS[open],
-      end = OPP_BRACKS[ctrlSeq];
-    CharCmds[open] = bind(Bracket, L, open, close, ctrlSeq, end);
-    CharCmds[close] = bind(Bracket, R, open, close, ctrlSeq, end);
-  }
-  bindCharBracketPair('(');
-  bindCharBracketPair('[');
-  bindCharBracketPair('{', '\\{');
-  LatexCmds.langle = bind(Bracket, L, '&lang;', '&rang;', '\\langle ', '\\rangle ');
-  LatexCmds.rangle = bind(Bracket, R, '&lang;', '&rang;', '\\langle ', '\\rangle ');
-  CharCmds['|'] = bind(Bracket, L, '|', '|', '|', '|');
-
-  LatexCmds.left = P(MathCommand, function (_) {
-    _.parser = function () {
-      var regex = Parser.regex;
-      var string = Parser.string;
-      var succeed = Parser.succeed;
-      var optWhitespace = Parser.optWhitespace;
-
-      return optWhitespace.then(regex(/^(?:[([|]|\\\{)/)).then(function (ctrlSeq) {
-        // TODO: \langle, \rangle
-        var open = ctrlSeq.charAt(0) === '\\' ? ctrlSeq.slice(1) : ctrlSeq;
-        return latexMathParser.then(function (block) {
-          return string('\\right')
-            .skip(optWhitespace)
-            .then(regex(/^(?:[\])|]|\\\})/))
-            .map(function (end) {
-              var close = end.charAt(0) === '\\' ? end.slice(1) : end;
-              var cmd = Bracket(0, open, close, ctrlSeq, end);
-              cmd.blocks = [block];
-              block.adopt(cmd, 0, 0);
-              return cmd;
-            });
-        });
-      });
-    };
-  });
-
-  LatexCmds.right = P(MathCommand, function (_) {
-    _.parser = function () {
-      return Parser.fail('unmatched \\right');
-    };
-  });
-
-  var Binomial =
-    (LatexCmds.binom =
-    LatexCmds.binomial =
-      P(P(MathCommand, DelimsMixin), function (_, super_) {
-        _.ctrlSeq = '\\binom';
-        _.htmlTemplate =
-          '<span class="mq-non-leaf">' +
-          '<span class="mq-paren mq-scaled">(</span>' +
-          '<span class="mq-non-leaf">' +
-          '<span class="mq-array mq-non-leaf">' +
-          '<span>&0</span>' +
-          '<span>&1</span>' +
-          '</span>' +
-          '</span>' +
-          '<span class="mq-paren mq-scaled">)</span>' +
-          '</span>';
-        _.textTemplate = ['choose(', ',', ')'];
-      }));
-
-  var Choose = (LatexCmds.choose = P(Binomial, function (_) {
-    _.createLeftOf = LiveFraction.prototype.createLeftOf;
-  }));
-
-  LatexCmds.editable = LatexCmds.MathQuillMathField = P(MathCommand, function (_, super_) {
-    // backcompat with before cfd3620 on #233
-    _.ctrlSeq = '\\MathQuillMathField';
-    _.htmlTemplate =
-      '<span class="mq-editable-field">' + '<span class="mq-root-block">&0</span>' + '</span>';
-    _.parser = function () {
-      var self = this,
-        string = Parser.string,
-        regex = Parser.regex,
-        succeed = Parser.succeed;
-      return string('[')
-        .then(regex(/^[a-z][a-z0-9]*/i))
-        .skip(string(']'))
-        .map(function (name) {
-          self.name = name;
-        })
-        .or(succeed())
-        .then(super_.parser.call(self));
-    };
-    _.finalizeTree = function () {
-      var ctrlr = Controller(this.ends[L], this.jQ, Options());
-      ctrlr.KIND_OF_MQ = 'MathField';
-      ctrlr.editable = true;
-      ctrlr.createTextarea();
-      ctrlr.editablesTextareaEvents();
-      ctrlr.cursor.insAtRightEnd(ctrlr.root);
-      RootBlockMixin(ctrlr.root);
-    };
-    _.registerInnerField = function (innerFields, MathField) {
-      innerFields.push((innerFields[this.name] = MathField(this.ends[L].controller)));
-    };
-    _.latex = function () {
-      return this.ends[L].latex();
-    };
-    _.text = function () {
-      return this.ends[L].text();
-    };
-  });
-
-  // Embed arbitrary things
-  // Probably the closest DOM analogue would be an iframe?
-  // From MathQuill's perspective, it's a Symbol, it can be
-  // anywhere and the cursor can go around it but never in it.
-  // Create by calling public API method .dropEmbedded(),
-  // or by calling the global public API method .registerEmbed()
-  // and rendering LaTeX like \embed{registeredName} (see test).
-  var Embed = (LatexCmds.embed = P(Symbol, function (_, super_) {
-    _.setOptions = function (options) {
-      function noop() {
-        return '';
-      }
-      this.text = options.text || noop;
-      this.htmlTemplate = options.htmlString || '';
-      this.latex = options.latex || noop;
-      return this;
-    };
-    _.parser = function () {
-      var self = this;
-      ((string = Parser.string), (regex = Parser.regex), (succeed = Parser.succeed));
-      return string('{')
-        .then(regex(/^[a-z][a-z0-9]*/i))
-        .skip(string('}'))
-        .then(function (name) {
-          // the chars allowed in the optional data block are arbitrary other than
-          // excluding curly braces and square brackets (which'd be too confusing)
-          return string('[')
-            .then(regex(/^[-\w\s]*/))
-            .skip(string(']'))
-            .or(succeed())
-            .map(function (data) {
-              return self.setOptions(EMBEDS[name](data));
-            });
-        });
-    };
-  }));
-  /****************************************
-   * Input box to type backslash commands
-   ***************************************/
-
-  var LatexCommandInput = (CharCmds['\\'] = P(MathCommand, function (_, super_) {
-    _.ctrlSeq = '\\';
-    _.replaces = function (replacedFragment) {
-      this._replacedFragment = replacedFragment.disown();
-      this.isEmpty = function () {
-        return false;
-      };
-    };
-    _.htmlTemplate = '<span class="mq-latex-command-input mq-non-leaf">\\<span>&0</span></span>';
-    _.textTemplate = ['\\'];
-    _.createBlocks = function () {
-      super_.createBlocks.call(this);
-      this.ends[L].focus = function () {
-        this.parent.jQ.addClass('mq-hasCursor');
-        if (this.isEmpty()) this.parent.jQ.removeClass('mq-empty');
-
-        return this;
-      };
-      this.ends[L].blur = function () {
-        this.parent.jQ.removeClass('mq-hasCursor');
-        if (this.isEmpty()) this.parent.jQ.addClass('mq-empty');
-
-        return this;
-      };
-      this.ends[L].write = function (cursor, ch) {
-        cursor.show().deleteSelection();
-
-        if (ch.match(/[a-z]/i)) VanillaSymbol(ch).createLeftOf(cursor);
-        else {
-          this.parent.renderCommand(cursor);
-          if (ch !== '\\' || !this.isEmpty()) this.parent.parent.write(cursor, ch);
-        }
-      };
-      this.ends[L].keystroke = function (key, e, ctrlr) {
-        if (key === 'Tab' || key === 'Enter' || key === 'Spacebar') {
-          this.parent.renderCommand(ctrlr.cursor);
-          e.preventDefault();
-          return;
-        }
-        return super_.keystroke.apply(this, arguments);
-      };
-    };
-    _.createLeftOf = function (cursor) {
-      super_.createLeftOf.call(this, cursor);
-
-      if (this._replacedFragment) {
-        var el = this.jQ[0];
-        this.jQ = this._replacedFragment.jQ
-          .addClass('mq-blur')
-          .bind(
-            'mousedown mousemove', //FIXME: is monkey-patching the mousedown and mousemove handlers the right way to do this?
-            function (e) {
-              $((e.target = el)).trigger(e);
-              return false;
-            },
-          )
-          .insertBefore(this.jQ)
-          .add(this.jQ);
-      }
-    };
-    _.latex = function () {
-      return '\\' + this.ends[L].latex() + ' ';
-    };
-    _.renderCommand = function (cursor) {
-      this.jQ = this.jQ.last();
-      this.remove();
-      if (this[R]) {
-        cursor.insLeftOf(this[R]);
-      } else {
-        cursor.insAtRightEnd(this.parent);
-      }
-
-      var latex = this.ends[L].latex();
-      if (!latex) latex = ' ';
-      var cmd = LatexCmds[latex];
-      if (cmd) {
-        cmd = cmd(latex);
-        if (this._replacedFragment) cmd.replaces(this._replacedFragment);
-        cmd.createLeftOf(cursor);
-      } else {
-        cmd = TextBlock();
-        cmd.replaces(latex);
-        cmd.createLeftOf(cursor);
-        cursor.insRightOf(cmd);
-        if (this._replacedFragment) this._replacedFragment.remove();
-      }
-    };
-  }));
-
-  var MQ1 = getInterface(1);
-  for (var key in MQ1)
-    (function (key, val) {
-      if (typeof val === 'function') {
-        MathQuill[key] = function () {
-          insistOnInterVer();
-          return val.apply(this, arguments);
-        };
-        MathQuill[key].prototype = val.prototype;
-      } else MathQuill[key] = val;
-    })(key, MQ1[key]);
-})();
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/MarkdownFormulaField.vue b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/MarkdownFormulaField.vue
deleted file mode 100644
index ccd376bb10..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/MarkdownFormulaField.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-
-  <span :class="{ editing: editing }">
-    <span ref="formula"></span>
-  </span>
-
-</template>
-
-
-<script>
-
-  import register from '../registerCustomMarkdownField.js';
-  import '../../mathquill/mathquill.js';
-
-  // vue-custom-element can't use SFC styles, so we load our styles directly,
-  // to be passed in when we register this component as a custom element
-  import css from '!css-loader!sass-loader!./style.scss';
-
-  const MarkdownFormulaField = {
-    name: 'MarkdownFormulaField',
-    props: {
-      editing: {
-        type: Boolean,
-      },
-      markdown: {
-        type: String,
-      },
-    },
-    data() {
-      return {
-        mathquill: MathQuill.getInterface(2),
-      };
-    },
-    mounted() {
-      this.renderMath();
-    },
-    updated() {
-      this.renderMath();
-    },
-    methods: {
-      renderMath() {
-        this.$refs.formula.innerHTML = this.markdown;
-        this.mathquill.StaticMath(this.$refs.formula);
-      },
-    },
-    computed: {
-      latex() {
-        return this.markdown;
-      },
-    },
-    shadowCSS: css,
-  };
-
-  export const registerMarkdownFormulaField = () => register(MarkdownFormulaField);
-  export default MarkdownFormulaField;
-
-</script>
-
-
-<style>
-
-  /*
-  Warning: custom elements don't currently have a way of using SFC styles.
-  Instead, add your style changes to `./style.scss`
-
-  Additionally, all child component styles must be included in `./style.scss`
-*/
-
-</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/formula-html-to-md.js b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/formula-html-to-md.js
deleted file mode 100644
index 1fb6abd25b..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/formula-html-to-md.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Convert all custom `markdown-formula-field` span elements from HTML
- * to markdown latex.
- *
- * Example:
- *
- * "
- *  Solve the following set of equations:
- *    <span is="markdown-formula-field">3x+5y=2</span>,
- *    <span is="markdown-formula-field">5x+8y=3</span>
- * "
- *
- * will be converted to
- *
- * "
- *  Solve the following set of equations:
- *    $$3x+5y=2$$,
- *    $$5x+8y=3$$
- * "
- *
- */
-
-export default html => {
-  if (!html || !html.includes('markdown-formula-field')) {
-    return html;
-  }
-
-  const domParser = new DOMParser();
-  const doc = domParser.parseFromString(html, 'text/html');
-
-  const mathFieldsEls = doc.querySelectorAll('span[is="markdown-formula-field"]');
-
-  for (const mathFieldEl of mathFieldsEls) {
-    const formula = mathFieldEl.innerHTML;
-    mathFieldEl.replaceWith('$$' + formula.trim() + '$$');
-  }
-
-  const newHtml = doc.body.innerHTML;
-  return newHtml;
-};
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/formula-md-to-html.js b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/formula-md-to-html.js
deleted file mode 100644
index 674474dde3..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/formula-md-to-html.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Convert latex formulas to their `markdown-formula-field` custom element
- * representation, which will render MathQuill in the shadow DOM.
- *
- * Example
- *
- * "$$1_2$$"
- *
- * will be converted to
- *
- * "<span is="markdown-formula-field">1_2</span>"
- *
- */
-
-export default (markdown, editing) => {
-  const editAttr = editing ? ' editing="true"' : '';
-  return markdown.replace(
-    /\$\$(.*?)\$\$/g,
-    `<span is="markdown-formula-field"${editAttr}>$1</span>`,
-  );
-};
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/formulas.css b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/formulas.css
deleted file mode 100644
index 97bea3ac49..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/formulas.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.tui-toolbar-btn-formulas.tui-toolbar-icons {
-  background: url('./toolbar-icon-formulas.svg');
-  background-repeat: no-repeat;
-  background-size: 18px;
-}
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/formulas.js b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/formulas.js
deleted file mode 100644
index 04bd0a8468..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/formulas.js
+++ /dev/null
@@ -1,28 +0,0 @@
-const EVENT_FORMULAS_TOOLBAR_BTN_CLICK = 'FormulasToolbarBtnClick';
-
-const formulasExtension = (editor, options) => {
-  if (editor.isViewer()) {
-    return;
-  }
-
-  editor.eventManager.addEventType(EVENT_FORMULAS_TOOLBAR_BTN_CLICK);
-  editor.eventManager.listen(EVENT_FORMULAS_TOOLBAR_BTN_CLICK, () =>
-    options.onFormulasToolbarBtnClick(),
-  );
-
-  editor
-    .getUI()
-    .getToolbar()
-    .addItem({
-      type: 'button',
-      options: {
-        name: 'formulas',
-        // should match ./formulas.css
-        className: 'tui-toolbar-btn-formulas',
-        event: EVENT_FORMULAS_TOOLBAR_BTN_CLICK,
-        tooltip: options.toolbarBtnTooltip,
-      },
-    });
-};
-
-export default formulasExtension;
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/index.js b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/index.js
deleted file mode 100644
index a1ec257d68..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import './formulas.css';
-import formulasExtension from './formulas.js';
-
-export default formulasExtension;
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/style.scss b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/style.scss
deleted file mode 100644
index b6e94b5da8..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/style.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-@import '../../mathquill/mathquill.css';
-
-.uploading {
-  cursor: progress;
-}
-
-.formulas-menu,
-.images-menu {
-  z-index: 2;
-}
-
-.wrapper {
-  border: 4px solid transparent;
-
-  &.highlight {
-    border-color: var(--v-primary-base);
-  }
-}
-
-.mq-math-mode {
-  padding: 4px 4px 2px 0;
-  margin: 4px;
-  font-family: Symbola;
-  color: #333333;
-  cursor: pointer;
-}
-
-.editing .mq-math-mode {
-  background-color: #f9f2f4;
-  border-radius: 4px;
-  box-shadow:
-    0 2px 1px -1px rgba(0, 0, 0, 0.2),
-    0 1px 1px 0 rgba(0, 0, 0, 0.14),
-    0 1px 3px 0 rgba(0, 0, 0, 0.12);
-}
-
-// TODO (when updating to new frontend files structure)
-// find better location for following styles that
-// are supposed to be common to all editable fields
-.mq-editable-field {
-  border: 0;
-
-  .mq-to,
-  .mq-from,
-  .mq-sup,
-  .mq-sup-inner,
-  .mq-sub,
-  .mq-numerator,
-  .mq-denominator {
-    padding-right: 1px;
-    padding-left: 1px;
-    border: 1px solid gray;
-  }
-
-  .mq-int .mq-sup {
-    border: 0;
-  }
-}
-
-.math-field * {
-  line-height: 1 !important;
-  white-space: nowrap !important;
-}
-
-:host {
-  margin-right: -0.2em !important;
-  margin-left: -0.2em !important;
-}
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/toolbar-icon-formulas.svg b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/toolbar-icon-formulas.svg
deleted file mode 100644
index 9c6db3a343..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/toolbar-icon-formulas.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-   material icon with customized color
-   https://material.io/resources/icons/?icon=functions&style=baseline
--->
-<svg version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 0h24v24H0z" fill="none"/>
-<path d="M18 4H6v2l6.5 6L6 18v2h12v-3h-7l5-5-5-5h7z" fill="#565656"/>
-</svg>
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/MarkdownImageField.vue b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/MarkdownImageField.vue
deleted file mode 100644
index fafb901373..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/MarkdownImageField.vue
+++ /dev/null
@@ -1,211 +0,0 @@
-<template>
-
-  <div
-    ref="image-field"
-    v-mouse-up="resizeMouseLeave"
-    v-mouse-move="resizeMouseMove"
-    :class="[imgClass, draggingResizer ? 'dragging' : '', resizing ? 'resizing' : '']"
-  >
-    <BaseMenu
-      z-index="203"
-      class="ignore-md"
-    >
-      <template #activator="{ on }">
-        <VBtn
-          v-show="!resizing && editing"
-          ref="options"
-          color="backgroundColor"
-          small
-          round
-          absolute
-          style="min-width: 30px"
-          class="edit-options ignore-md ma-1 pa-0"
-          v-on="on"
-          @click.stop
-        >
-          <Icon icon="optionsHorizontal" />
-        </VBtn>
-      </template>
-      <VList>
-        <VListTile @click="handleEdit">
-          <VListTileTitle>{{ $tr('editImageOption') }}</VListTileTitle>
-        </VListTile>
-        <VListTile @click="handleResize">
-          <VListTileTitle>{{ $tr('resizeImageOption') }}</VListTileTitle>
-        </VListTile>
-        <VListTile @click="handleRemove">
-          <VListTileTitle>{{ $tr('removeImageOption') }}</VListTileTitle>
-        </VListTile>
-      </VList>
-    </BaseMenu>
-    <img
-      ref="image"
-      :src="image.src"
-      :alt="image.alt"
-      :width="image.width"
-      :height="image.height"
-      @load="setAspectRatio"
-    >
-    <div
-      v-if="resizing"
-      class="ignore-md resizer"
-      @mousedown.prevent.stop="handleResizeDown"
-    ></div>
-  </div>
-
-</template>
-
-
-<script>
-
-  import { CLASS_IMG_FIELD } from '../../constants';
-  import register from '../registerCustomMarkdownField.js';
-  import { imageMdToParams, paramsToImageMd } from './index';
-  import MouseMove from 'shared/directives/mouse-move';
-  import MouseUp from 'shared/directives/mouse-up';
-
-  import '../../mathquill/mathquill.js';
-
-  // vue-custom-element can't use SFC styles, so we load our styles directly,
-  // to be passed in when we register this component as a custom element
-  import css from '!css-loader!sass-loader!./style.scss';
-
-  const MarkdownImageField = {
-    name: 'MarkdownImageField',
-    directives: {
-      MouseUp,
-      MouseMove,
-    },
-    props: {
-      editing: {
-        type: Boolean,
-      },
-      markdown: {
-        type: String,
-        default: '',
-      },
-    },
-    data() {
-      return {
-        image: {
-          width: '',
-          height: '',
-          src: '',
-          alt: '',
-        },
-        resizing: false,
-        draggingResizer: false,
-        aspectRatio: 1,
-      };
-    },
-    mounted() {
-      this.setImageData(imageMdToParams(this.markdown));
-    },
-    watch: {
-      markdown() {
-        this.setImageData(imageMdToParams(this.markdown));
-      },
-    },
-    methods: {
-      setImageData(imageData) {
-        if (this.image.src !== imageData.src) {
-          this.image.width = '';
-          this.image.height = '';
-        }
-        this.image = {
-          ...this.image,
-          ...imageData,
-        };
-      },
-      setAspectRatio(img) {
-        this.aspectRatio = img.target.width / img.target.height;
-      },
-      exportParamsToMarkdown() {
-        this.editorField.innerHTML = paramsToImageMd(this.image);
-      },
-      handleEdit(event) {
-        this.editorField.dispatchEvent(
-          new CustomEvent('editImage', {
-            detail: {
-              editorField: this.editorField,
-              component: this,
-              image: this.image,
-              editEvent: event,
-            },
-            bubbles: true,
-            cancelable: true,
-          }),
-        );
-      },
-      handleRemove() {
-        this.editorField.dispatchEvent(
-          new CustomEvent('remove', {
-            bubbles: true,
-            cancelable: true,
-          }),
-        );
-      },
-      handleResize() {
-        this.resizing = true;
-      },
-      handleResizeDown() {
-        this.draggingResizer = true;
-        document.body.style.cursor = 'se-resize';
-      },
-      resizeMouseLeave() {
-        if (this.draggingResizer) {
-          this.draggingResizer = false;
-          document.body.style.cursor = 'unset';
-          this.exitResizing();
-        }
-      },
-      resizeMouseMove(e) {
-        if (this.draggingResizer) {
-          const boundingRect = this.$refs['image-field'].getBoundingClientRect();
-          const x = e.clientX - boundingRect.x;
-
-          // resize the image, maintaining aspect ratio
-          this.image.width = Math.max(50, x);
-          this.image.height = Math.floor(this.image.width / this.aspectRatio);
-        }
-      },
-      exitResizing() {
-        if (this.resizing) {
-          this.resizing = false;
-          this.draggingResizer = false;
-          this.exportParamsToMarkdown();
-        }
-      },
-    },
-    $trs: {
-      editImageOption: 'Edit',
-      resizeImageOption: 'Resize',
-      removeImageOption: 'Remove',
-    },
-    computed: {
-      imgClass() {
-        return CLASS_IMG_FIELD;
-      },
-      editorField() {
-        return this.$el.getRootNode().host;
-      },
-    },
-    shadowCSS: css,
-  };
-
-  export const registerMarkdownImageField = () => register(MarkdownImageField);
-  export default MarkdownImageField;
-
-</script>
-
-
-<style>
-
-  /*
-  Warning: custom elements don't currently have a way of using SFC styles.
-  Instead, add your style changes to `./style.scss`
-
-  Additionally, all child component styles must be included in `./style.scss`
-*/
-
-</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/image-html-to-md.js b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/image-html-to-md.js
deleted file mode 100644
index 2126ce487b..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/image-html-to-md.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Convert images HTML to markdown
- *
- * E.g.
- *
- * "
- *  What is this picture of?
- *    <span is='markdown-image-field'>![alt-text](${placeholer}/checksum.ext)</span>
- * "
- *
- * will be converted to
- *
- * "
- *  What is this picture of?
- *    ![alt-text](${placeholder}/checksum.ext =100x200)
- * "
- *
- */
-
-export default html => {
-  const domParser = new DOMParser();
-  const doc = domParser.parseFromString(html, 'text/html');
-  const mdImages = doc.querySelectorAll('span[is="markdown-image-field"]');
-
-  for (const mdImageEl of mdImages) {
-    mdImageEl.replaceWith(mdImageEl.innerHTML.trim());
-  }
-
-  const editOptionButtons = doc.querySelectorAll('.ignore-md');
-  for (const editOptionsEl of editOptionButtons) {
-    editOptionsEl.remove();
-  }
-  return doc.body.innerHTML;
-};
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/image-md-to-html.js b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/image-md-to-html.js
deleted file mode 100644
index 1f61c121d1..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/image-md-to-html.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Convert images markdown to HTML
- *
- * Example
- *
- * "![alt-text](${placeholder}/checksum.ext =100x200)"
- *
- * will be converted to
- *
- * "<span is='markdown-image-field'>![alt-text](${placeholer}/checksum.ext =100x200)</span>"
- *
- */
-import { IMAGE_REGEX, imageMdToImageFieldHTML } from './index';
-
-// convert markdown images to image editor field custom elements
-
-export default (markdown, editing) => {
-  return markdown.replace(IMAGE_REGEX, imageMd => imageMdToImageFieldHTML(imageMd, editing));
-};
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/image-upload.css b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/image-upload.css
deleted file mode 100644
index da9f74045d..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/image-upload.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.tui-toolbar-btn-image-upload.tui-toolbar-icons {
-  background: url('./toolbar-icon-image-upload.svg');
-  background-repeat: no-repeat;
-  background-size: 18px;
-}
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/image-upload.js b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/image-upload.js
deleted file mode 100644
index 89f8062f6f..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/image-upload.js
+++ /dev/null
@@ -1,30 +0,0 @@
-const EVENT_IMAGE_UPLOAD_TOOLBAR_BTN_CLICK = 'ImageUploadToolbarBtnClick';
-
-const imageUploadExtension = (editor, options) => {
-  if (editor.isViewer()) {
-    return;
-  }
-
-  editor.addHook('addImageBlobHook', options.onImageDrop);
-
-  editor.eventManager.addEventType(EVENT_IMAGE_UPLOAD_TOOLBAR_BTN_CLICK);
-  editor.eventManager.listen(EVENT_IMAGE_UPLOAD_TOOLBAR_BTN_CLICK, () => {
-    options.onImageUploadToolbarBtnClick();
-  });
-
-  editor
-    .getUI()
-    .getToolbar()
-    .addItem({
-      type: 'button',
-      options: {
-        name: 'image-upload',
-        // should match ./image-upload.css
-        className: 'tui-toolbar-btn-image-upload',
-        event: EVENT_IMAGE_UPLOAD_TOOLBAR_BTN_CLICK,
-        tooltip: options.toolbarBtnTooltip,
-      },
-    });
-};
-
-export default imageUploadExtension;
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/index.js b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/index.js
deleted file mode 100644
index 0e33f894c4..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/index.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import './image-upload.css';
-import { IMAGE_PLACEHOLDER } from '../../constants';
-import imageUploadExtension from './image-upload.js';
-import { storageUrl } from 'shared/vuex/file/utils';
-
-export const IMAGE_REGEX = /!\[([^\]]*)]\(([^/]+\/([^\s]+))(?:\s=([0-9.]+)x([0-9.]+))*\)/g;
-export const SINGLE_IMAGE_REGEX = /!\[([^\]]*)]\(([^/]+\/([^\s]+))(?:\s=([0-9.]+)x([0-9.]+))*\)/;
-
-export const imageMdToParams = imageMd => {
-  const match = imageMd.match(SINGLE_IMAGE_REGEX);
-  if (!match) {
-    return {};
-  }
-  const description = match[1];
-  const fileNameWithExtension = match[3];
-  const width = match[4];
-  const height = match[5];
-  const [checksum, extension] = fileNameWithExtension.split('.');
-
-  const src = storageUrl(checksum, extension);
-  return { imageMd, src, width, height, checksum, alt: description };
-};
-
-export const paramsToImageMd = ({ src, alt, width, height }) => {
-  src = src.split('/').slice(-1)[0];
-  if (width && width !== 'auto' && height && height !== 'auto') {
-    return `![${alt}](${IMAGE_PLACEHOLDER}/${src} =${width}x${height})`;
-  } else {
-    return `![${alt}](${IMAGE_PLACEHOLDER}/${src})`;
-  }
-};
-
-export const imageMdToImageFieldHTML = (imageMd, editing) => {
-  const editAttr = editing ? ' editing="true"' : '';
-  return `<span is='markdown-image-field'${editAttr}>${imageMd}</span>`;
-};
-export const paramsToImageFieldHTML = params => imageMdToImageFieldHTML(paramsToImageMd(params));
-
-export default imageUploadExtension;
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/style.scss b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/style.scss
deleted file mode 100644
index 23b9a60da3..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/style.scss
+++ /dev/null
@@ -1,80 +0,0 @@
-@import '~vuetify/dist/vuetify.min.css';
-// stylelint-disable scss/at-import-partial-extension
-
-$resizer-size: 16px;
-
-img {
-  max-width: 100%;
-  height: auto;
-  object-fit: cover;
-  /* stylelint-disable-next-line custom-property-pattern */
-  border: 1px solid var(--v-greyBorder-base);
-}
-
-.dragging {
-  img {
-    pointer-events: none;
-    user-select: none;
-  }
-}
-
-.resizing {
-  user-select: none;
-
-  * {
-    user-select: none;
-  }
-
-  img {
-    border: 2px solid var(--v-grey-darken4);
-  }
-}
-
-.resizer {
-  position: absolute;
-  right: calc(-#{$resizer-size} / 2);
-  bottom: 2px;
-  width: $resizer-size;
-  height: $resizer-size;
-  cursor: se-resize;
-  user-select: none;
-  background-color: white;
-  border: 2px solid var(--v-grey-darken4);
-  border-radius: $resizer-size;
-}
-
-.edit-options {
-  top: 4px;
-  right: 4px;
-  user-select: none;
-  /* stylelint-disable-next-line custom-property-pattern */
-  background-color: var(--v-backgroundColor--base);
-  opacity: 0;
-
-  // TUI will automatically move cursor inside button,
-  // so don't allow clicking on elements inside the button
-  ::v-deep * {
-    pointer-events: none;
-  }
-
-  ::v-deep .v-btn__content {
-    height: min-content;
-  }
-
-  i {
-    font-style: normal;
-  }
-}
-
-.image-field {
-  position: relative;
-  display: inline-block;
-  width: max-content;
-  max-width: 95%;
-  vertical-align: middle;
-
-  &:hover:not(.resizing) .edit-options,
-  .edit-options:focus {
-    opacity: 1;
-  }
-}
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/toolbar-icon-image-upload.svg b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/toolbar-icon-image-upload.svg
deleted file mode 100644
index 8f15cd66bd..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/toolbar-icon-image-upload.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-   material icon with customized color
-   https://material.io/resources/icons/?icon=add_photo_alternate&style=baseline
--->
-<svg version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99 0-2h3V2h2v3h3v2h-3zm-3 4V8h-3V5H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8h-3zM5 19l3-4 2 3 3-4 4 5H5z" fill="#565656"/>
-<path d="M0 0h24v24H0z" fill="none"/>
-</svg>
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/minimize/index.js b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/minimize/index.js
deleted file mode 100644
index a3745191d1..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/minimize/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import './minimize.css';
-import minimizeExtension from './minimize.js';
-
-export default minimizeExtension;
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/minimize/minimize.css b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/minimize/minimize.css
deleted file mode 100644
index d282eda4b6..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/minimize/minimize.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.tui-toolbar-btn-minimize {
-  float: right !important;
-  background: url('./toolbar-icon-minimize.svg');
-  background-repeat: no-repeat;
-  background-size: 18px;
-}
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/minimize/minimize.js b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/minimize/minimize.js
deleted file mode 100644
index 0c80b89050..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/minimize/minimize.js
+++ /dev/null
@@ -1,24 +0,0 @@
-const EVENT_MINIMIZE_TOOLBAR_BTN_CLICK = 'MinimizeToolbarBtnClick';
-
-const minimizeExtension = (editor, options) => {
-  editor.eventManager.addEventType(EVENT_MINIMIZE_TOOLBAR_BTN_CLICK);
-  editor.eventManager.listen(EVENT_MINIMIZE_TOOLBAR_BTN_CLICK, () => {
-    options.onMinimizeToolbarBtnClick();
-  });
-
-  editor
-    .getUI()
-    .getToolbar()
-    .addItem({
-      type: 'button',
-      options: {
-        name: 'minimize',
-        // should match ./minimize.css
-        className: 'tui-toolbar-btn-minimize',
-        event: EVENT_MINIMIZE_TOOLBAR_BTN_CLICK,
-        tooltip: options.toolbarBtnTooltip,
-      },
-    });
-};
-
-export default minimizeExtension;
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/minimize/toolbar-icon-minimize.svg b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/minimize/toolbar-icon-minimize.svg
deleted file mode 100644
index f45e317a3b..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/minimize/toolbar-icon-minimize.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-   material icon with customized color
-   https://material.io/resources/icons/?icon=minimize&style=baseline
--->
-<svg version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 19h12v2H6z" fill="#565656"/>
-<path d="M0 0h24v24H0V0z" fill="none"/>
-</svg>
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/registerCustomMarkdownField.js b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/registerCustomMarkdownField.js
deleted file mode 100644
index cad63ebcf2..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/registerCustomMarkdownField.js
+++ /dev/null
@@ -1,123 +0,0 @@
-import Vue from 'vue';
-import vueCustomElement from 'vue-custom-element';
-import { v4 as uuidv4 } from 'uuid';
-
-const leftwardSpaceRegex = /\s$/;
-
-const leftwardDoubleSpaceRegex = /\s\s$/;
-
-const hasLeftwardSpace = el => {
-  return (
-    // Has a previous sibling
-    el.previousSibling &&
-    // Which has text content
-    el.previousSibling.textContent &&
-    // The text content has white space right before this element
-    leftwardSpaceRegex.test(el.previousSibling.textContent) &&
-    // And either this sibling doesn't have a previous sibling
-    (!el.previousSibling.previousSibling ||
-      // Or it doesn't have a hasAttribute function
-      typeof el.previousSibling.previousSibling.hasAttribute !== 'function' ||
-      // Or the previous sibling is not another custom field
-      !el.previousSibling.previousSibling.hasAttribute('is') ||
-      // Or the previous sibling has two white spaces, one for each
-      // of the custom fields on either side.
-      leftwardDoubleSpaceRegex.test(el.previousSibling.textContent))
-  );
-};
-
-const rightwardSpaceRegex = /^\s/;
-
-const rightwardDoubleSpaceRegex = /^\s\s/;
-
-const hasRightwardSpace = el => {
-  return (
-    // Has a next sibling
-    el.nextSibling &&
-    // Which has text content
-    el.nextSibling.textContent &&
-    // The text content has white space right after this element
-    rightwardSpaceRegex.test(el.nextSibling.textContent) &&
-    // And either this sibling doesn't have a next sibling
-    (!el.nextSibling.nextSibling ||
-      // Or it doesn't have a hasAttribute function
-      typeof el.nextSibling.nextSibling.hasAttribute !== 'function' ||
-      // Or the next sibling is not another custom field
-      !el.nextSibling.nextSibling.hasAttribute('is') ||
-      // Or the next sibling has two white spaces, one for each
-      // of the custom fields on either side.
-      rightwardDoubleSpaceRegex.test(el.nextSibling.textContent))
-  );
-};
-
-export default VueComponent => {
-  const dashed = camel => camel.replace(/([a-zA-Z])(?=[A-Z])/g, '$1-').toLowerCase();
-  const name = dashed(VueComponent.name);
-  Vue.use(vueCustomElement);
-  Vue.customElement(name, VueComponent, {
-    // element is removed from document
-    disconnectedCallback() {
-      this.observer.disconnect();
-    },
-    // Vue instance is created
-    vueInstanceCreatedCallback() {
-      // by default, `contenteditable` will be false
-      this.setAttribute('contenteditable', Boolean(VueComponent.contentEditable));
-      const id = `markdown-field-${uuidv4()}`;
-      // a hack to prevent squire from merging custom element spans
-      // see here: https://github.com/nhn/tui.editor/blob/master/libs/squire/source/Node.js#L92-L101
-      this.classList.add(id);
-
-      // pass innerHTML of host element as the `markdown` property
-      this.observer = new MutationObserver(mutations => {
-        mutations.forEach(mutation => {
-          const checkIfElementNode = x => x.nodeType === document.ELEMENT_NODE;
-          const checkIfTextNode = x => x.nodeType === document.TEXT_NODE;
-          const elementNodesAdded = [...mutation.addedNodes].filter(checkIfElementNode);
-          const textNodesRemoved = [...mutation.removedNodes].filter(checkIfTextNode);
-
-          // Prevent TUI.editor from adding unwanted DOM elements to the custom element
-          // This is necessary so that style modifiers don't wrap markdown in <b> or <i> tags.
-          if (elementNodesAdded.length > 0) {
-            // if we detect that unwanted DOM elements have been added, revert them immediately
-            this.innerHTML = textNodesRemoved.map(n => n.nodeValue).join();
-          } else {
-            // otherwise, pass the innerHTML to inner Vue component as `markdown` prop
-            this.markdown = this.innerHTML;
-          }
-        });
-      });
-      this.observer.observe(this, { characterData: true, childList: true });
-
-      this.addEventListener('remove', () => {
-        if (hasLeftwardSpace(this)) {
-          this.previousSibling.textContent = this.previousSibling.textContent.replace(
-            leftwardSpaceRegex,
-            '',
-          );
-        }
-        if (hasRightwardSpace(this)) {
-          this.nextSibling.textContent = this.nextSibling.textContent.replace(
-            rightwardSpaceRegex,
-            '',
-          );
-        }
-        if (this.parentNode) {
-          this.parentNode.removeChild(this);
-        }
-      });
-
-      if (!hasLeftwardSpace(this)) {
-        this.insertAdjacentText('beforebegin', '\xa0');
-      }
-      if (!hasRightwardSpace(this)) {
-        this.insertAdjacentText('afterend', '\xa0');
-      }
-      // initialize the `markdown` property
-      this.markdown = this.innerHTML;
-    },
-    shadowCss: VueComponent.shadowCSS,
-    shadow: true,
-    extends: 'span',
-  });
-};

From e091169b9a9fcc8fcf300071336c965c07e10dfc Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Wed, 6 Aug 2025 15:05:53 +0300
Subject: [PATCH 08/13] refactor(texteditor): delete isolated editordev route

---
 contentcuration/contentcuration/dev_urls.py   |  8 --
 .../frontend/editorDev/index.js               | 24 ------
 .../frontend/editorDev/router.js              | 10 ---
 .../TipTapEditor/TipTapEditor/DevHarness.vue  | 76 -------------------
 .../templates/contentcuration/editor_dev.html |  8 --
 webpack.config.js                             |  3 -
 6 files changed, 129 deletions(-)
 delete mode 100644 contentcuration/contentcuration/frontend/editorDev/index.js
 delete mode 100644 contentcuration/contentcuration/frontend/editorDev/router.js
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/DevHarness.vue
 delete mode 100644 contentcuration/contentcuration/templates/contentcuration/editor_dev.html

diff --git a/contentcuration/contentcuration/dev_urls.py b/contentcuration/contentcuration/dev_urls.py
index 77cbddfbac..003cac87a3 100644
--- a/contentcuration/contentcuration/dev_urls.py
+++ b/contentcuration/contentcuration/dev_urls.py
@@ -8,7 +8,6 @@
 from django.urls import include
 from django.urls import path
 from django.urls import re_path
-from django.views.generic import TemplateView
 from drf_yasg import openapi
 from drf_yasg.views import get_schema_view
 from rest_framework import permissions
@@ -76,10 +75,3 @@ def file_server(request, storage_path=None):
     re_path(r"^api-auth/", include("rest_framework.urls", namespace="rest_framework")),
     re_path(r"^content/(?P<storage_path>.+)$", file_server),
 ]
-
-urlpatterns += [
-    re_path(
-        r"^editor-dev(?:/.*)?$",
-        TemplateView.as_view(template_name="contentcuration/editor_dev.html"),
-    ),
-]
diff --git a/contentcuration/contentcuration/frontend/editorDev/index.js b/contentcuration/contentcuration/frontend/editorDev/index.js
deleted file mode 100644
index 4b7e6e0c63..0000000000
--- a/contentcuration/contentcuration/frontend/editorDev/index.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
-import VueRouter from 'vue-router';
-import DevHarness from '../shared/views/TipTapEditor/TipTapEditor/DevHarness.vue';
-import startApp from 'shared/app';
-import storeFactory from 'shared/vuex/baseStore';
-
-Vue.use(VueRouter);
-Vue.use(Vuex);
-
-// Create a minimal store that has the required methods
-const store = storeFactory();
-
-startApp({
-  store, // Provide the store - this is required Althought not needed
-  router: new VueRouter({
-    routes: [
-      {
-        path: '/',
-        component: DevHarness,
-      },
-    ],
-  }),
-});
diff --git a/contentcuration/contentcuration/frontend/editorDev/router.js b/contentcuration/contentcuration/frontend/editorDev/router.js
deleted file mode 100644
index bdbebda15f..0000000000
--- a/contentcuration/contentcuration/frontend/editorDev/router.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Vue from 'vue';
-import Router from 'vue-router';
-import DevHarness from '../shared/views/TipTapEditor/TipTapEditor/DevHarness.vue';
-
-Vue.use(Router);
-export default new Router({
-  mode: 'history',
-  base: '/editor-dev/',
-  routes: [{ path: '/', component: DevHarness }],
-});
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/DevHarness.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/DevHarness.vue
deleted file mode 100644
index e64fe692fe..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/DevHarness.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-
-  <div class="dev-harness">
-    <!-- <header class="harness-header">
-      <h1>TipTap Editor - Development Harness</h1>
-      <p>This page simulates a parent component to test the editor in isolation.</p>
-    </header> -->
-    <hr >
-    <TipTapEditor v-model="markdownContent" />
-    <hr >
-    <!-- <div class="raw-output-wrapper">
-      <h2>Live Markdown Output (v-model state)</h2>
-      <pre>{{ markdownContent }}</pre>
-    </div> -->
-  </div>
-
-</template>
-
-
-<script>
-
-  import { defineComponent, ref } from 'vue';
-  import TipTapEditor from './TipTapEditor.vue';
-
-  const SAMPLE_MARKDOWN = `
-`;
-
-  export default defineComponent({
-    name: 'DevHarness',
-    components: {
-      TipTapEditor,
-    },
-    setup() {
-      // simulates the state of the parent component
-      const markdownContent = ref(SAMPLE_MARKDOWN);
-      return { markdownContent };
-    },
-  });
-
-</script>
-
-
-<style scoped>
-
-  .dev-harness {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 20px;
-  }
-
-  .harness-header {
-    margin: 20px;
-    text-align: center;
-  }
-
-  .raw-output-wrapper {
-    width: 1000px;
-    padding: 1rem;
-    margin-top: 20px;
-    color: #f8f8f2;
-    background-color: #2d2d2d;
-    border-radius: 8px;
-  }
-
-  .raw-output-wrapper h2 {
-    margin-top: 0;
-    color: #ffffff;
-  }
-
-  pre {
-    word-wrap: break-word;
-    white-space: pre-wrap;
-  }
-
-</style>
diff --git a/contentcuration/contentcuration/templates/contentcuration/editor_dev.html b/contentcuration/contentcuration/templates/contentcuration/editor_dev.html
deleted file mode 100644
index d41b1410e6..0000000000
--- a/contentcuration/contentcuration/templates/contentcuration/editor_dev.html
+++ /dev/null
@@ -1,8 +0,0 @@
-{% extends "base.html" %}
-
-{% block content %}
-  <div id="app"></div>
-  <!-- Load the frontend dev bundle manually -->
-  <script src="http://127.0.0.1:4000/dist/editorDev.js"></script>
-  <link rel="stylesheet" href="http://127.0.0.1:4000/dist/editorDev.css">
-{% endblock %}
diff --git a/webpack.config.js b/webpack.config.js
index 7a5ba7d0a2..d055936b79 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -184,8 +184,5 @@ module.exports = (env = {}) => {
     ],
     stats: 'normal',
   });
-  if (dev) {
-    config.entry.editorDev = './editorDev/index.js';
-  }
   return config;
 };

From 5c25c6dae3237722d1f7ae81c7460717bf0e3f22 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Wed, 6 Aug 2025 15:07:15 +0300
Subject: [PATCH 09/13] refactor(texteditor): remove MarkdownEditor
 dependencies

---
 jest_config/setup.js |  2 --
 package.json         |  4 ---
 pnpm-lock.yaml       | 58 ++++----------------------------------------
 3 files changed, 5 insertions(+), 59 deletions(-)

diff --git a/jest_config/setup.js b/jest_config/setup.js
index 15307f4570..1dd298d417 100644
--- a/jest_config/setup.js
+++ b/jest_config/setup.js
@@ -14,9 +14,7 @@ import "core-js/stable/structured-clone";
 import 'fake-indexeddb/auto';
 // Polyfill webstreams
 import {ReadableStream, WritableStream, TransformStream, CountQueuingStrategy} from 'web-streams-polyfill';
-import jquery from 'jquery';
 
-window.jQuery = window.$ = jquery;
 window.ReadableStream = global.ReadableStream = ReadableStream;
 window.WritableStream = global.WritableStream = WritableStream;
 window.TransformStream = global.TransformStream = TransformStream;
diff --git a/package.json b/package.json
index 452edf46df..cd66095d8b 100644
--- a/package.json
+++ b/package.json
@@ -62,11 +62,9 @@
     "@tiptap/extension-underline": "^2.14.0",
     "@tiptap/starter-kit": "^2.13.0",
     "@tiptap/vue-2": "^2.13.0",
-    "@toast-ui/editor": "^2.3.1",
     "ajv": "^8.12.0",
     "axios": "^1.11.0",
     "broadcast-channel": "^5.1.0",
-    "codemirror": "5.58.2",
     "core-js": "^3.44.0",
     "crc-32": "^1.2.2",
     "dexie": "^3.2.6",
@@ -77,7 +75,6 @@
     "html2canvas": "^1.0.0-rc.5",
     "i18n-iso-countries": "^7.11.3",
     "intl": "1.2.5",
-    "jquery": "^2.2.4",
     "jspdf": "https://github.com/parallax/jsPDF.git#b7a1d8239c596292ce86dafa77f05987bcfa2e6e",
     "jszip": "^3.10.1",
     "kolibri-constants": "^0.2.12",
@@ -94,7 +91,6 @@
     "pdfjs-dist": "^2.16.105",
     "qs": "^6.11.2",
     "regenerator-runtime": "^0.14.1",
-    "showdown": "^2.1.0",
     "spark-md5": "^3.0.0",
     "store2": "^2.14.4",
     "string-strip-html": "8.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c536b5adb9..d4c2ad6af3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,9 +35,6 @@ importers:
       '@tiptap/vue-2':
         specifier: ^2.13.0
         version: 2.23.1(@tiptap/core@2.23.1(@tiptap/pm@2.23.1))(@tiptap/pm@2.23.1)(vue@2.7.16)
-      '@toast-ui/editor':
-        specifier: ^2.3.1
-        version: 2.5.4
       ajv:
         specifier: ^8.12.0
         version: 8.17.1
@@ -47,9 +44,6 @@ importers:
       broadcast-channel:
         specifier: ^5.1.0
         version: 5.5.1
-      codemirror:
-        specifier: 5.58.2
-        version: 5.58.2
       core-js:
         specifier: ^3.44.0
         version: 3.44.0
@@ -80,9 +74,6 @@ importers:
       intl:
         specifier: 1.2.5
         version: 1.2.5
-      jquery:
-        specifier: ^2.2.4
-        version: 2.2.4
       jspdf:
         specifier: https://github.com/parallax/jsPDF.git#b7a1d8239c596292ce86dafa77f05987bcfa2e6e
         version: jspdf-yworks@https://codeload.github.com/parallax/jsPDF/tar.gz/b7a1d8239c596292ce86dafa77f05987bcfa2e6e
@@ -131,9 +122,6 @@ importers:
       regenerator-runtime:
         specifier: ^0.14.1
         version: 0.14.1
-      showdown:
-        specifier: ^2.1.0
-        version: 2.1.0
       spark-md5:
         specifier: ^3.0.0
         version: 3.0.2
@@ -1619,9 +1607,6 @@ packages:
       '@tiptap/pm': ^2.7.0
       vue: ^2.6.0
 
-  '@toast-ui/editor@2.5.4':
-    resolution: {integrity: sha512-XsuYlPQxhec9dHQREFAigjE4enHSuGMF7D0YQ6wW7phmusvAu0FnJfZUPjJBoU/GKz7WP5U6fKU9/P+8j65D8A==}
-
   '@tokenizer/token@0.3.0':
     resolution: {integrity: sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A==}
 
@@ -1658,9 +1643,6 @@ packages:
   '@types/bonjour@3.5.13':
     resolution: {integrity: sha512-z9fJ5Im06zvUL548KvYNecEVlA7cVDkGUi6kZusb04mpyEFKCIZJvloCcmpmLaIahDpOQGHaHmG6imtPMmPXGQ==}
 
-  '@types/codemirror@0.0.71':
-    resolution: {integrity: sha512-b2oEEnno1LIGKMR7uBEsr40al1UijF1HEpRn0+Yf1xOLl24iQgB7DBpZVMM7y54G5wCNoclDrRO65E6KHPNO2w==}
-
   '@types/connect-history-api-fallback@1.5.4':
     resolution: {integrity: sha512-n6Cr2xS1h4uAulPRdlw6Jl6s1oG8KrVilPN2yUITEs+K48EzMJJ3W1xy8K5eWuFvjp3R74AOIGSmp2UfBJ8HFw==}
 
@@ -1785,9 +1767,6 @@ packages:
   '@types/strip-json-comments@0.0.30':
     resolution: {integrity: sha512-7NQmHra/JILCd1QqpSzl8+mJRc8ZHz3uDm8YV1Ks9IhK0epEiTw8aIErbvH9PI+6XbqhyIQy3462nEsn7UVzjQ==}
 
-  '@types/tern@0.23.9':
-    resolution: {integrity: sha512-ypzHFE/wBzh+BlH6rrBgS5I/Z7RD21pGhZ2rltb/+ZrVM1awdZwjx7hE5XfuYgHWk9uvV5HLZN3SloevCAp3Bw==}
-
   '@types/tough-cookie@4.0.5':
     resolution: {integrity: sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==}
 
@@ -2580,9 +2559,6 @@ packages:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
 
-  codemirror@5.58.2:
-    resolution: {integrity: sha512-K/hOh24cCwRutd1Mk3uLtjWzNISOkm4fvXiMO7LucCrqbh6aJDdtqUziim3MZUI6wOY0rvY1SlL1Ork01uMy6w==}
-
   collect-v8-coverage@1.0.2:
     resolution: {integrity: sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q==}
 
@@ -2647,6 +2623,9 @@ packages:
     resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==}
     engines: {node: ^12.20.0 || >=14}
 
+  common-path-prefix@3.0.0:
+    resolution: {integrity: sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w==}
+
   common-tags@1.8.2:
     resolution: {integrity: sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==}
     engines: {node: '>=4.0.0'}
@@ -4718,10 +4697,6 @@ packages:
   jpeg-js@0.4.4:
     resolution: {integrity: sha512-WZzeDOEtTOBK4Mdsar0IqEU5sMr3vSV2RqkAIzUEV2BHnUfKGyswWFPFwK5EeDo93K3FohSHbLAjj0s1Wzd+dg==}
 
-  jquery@2.2.4:
-    resolution: {integrity: sha512-lBHj60ezci2u1v2FqnZIraShGgEXq35qCzMv4lITyHGppTnA13rwR0MgwyNJh9TnDs3aXUvd1xjAotfraMHX/Q==}
-    deprecated: This version is deprecated. Please upgrade to the latest version or find support at https://www.herodevs.com/support/jquery-nes.
-
   js-base64@2.6.4:
     resolution: {integrity: sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==}
 
@@ -6509,10 +6484,6 @@ packages:
     resolution: {integrity: sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==}
     engines: {node: '>= 0.4'}
 
-  showdown@2.1.0:
-    resolution: {integrity: sha512-/6NVYu4U819R2pUIk79n67SYgJHWCce0a5xTP979WbNp0FL9MN1I1QK662IDU1b6JzKTvmhgI7T7JYIxBi3kMQ==}
-    hasBin: true
-
   side-channel-list@1.0.0:
     resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
     engines: {node: '>= 0.4'}
@@ -9297,11 +9268,6 @@ snapshots:
       vue: 2.7.16
       vue-ts-types: 1.6.2(vue@2.7.16)
 
-  '@toast-ui/editor@2.5.4':
-    dependencies:
-      '@types/codemirror': 0.0.71
-      codemirror: 5.58.2
-
   '@tokenizer/token@0.3.0': {}
 
   '@tootallnate/once@1.1.2': {}
@@ -9342,10 +9308,6 @@ snapshots:
     dependencies:
       '@types/node': 24.1.0
 
-  '@types/codemirror@0.0.71':
-    dependencies:
-      '@types/tern': 0.23.9
-
   '@types/connect-history-api-fallback@1.5.4':
     dependencies:
       '@types/express-serve-static-core': 4.19.6
@@ -9487,10 +9449,6 @@ snapshots:
 
   '@types/strip-json-comments@0.0.30': {}
 
-  '@types/tern@0.23.9':
-    dependencies:
-      '@types/estree': 1.0.8
-
   '@types/tough-cookie@4.0.5': {}
 
   '@types/trusted-types@2.0.7': {}
@@ -10550,8 +10508,6 @@ snapshots:
 
   co@4.6.0: {}
 
-  codemirror@5.58.2: {}
-
   collect-v8-coverage@1.0.2: {}
 
   color-convert@1.9.3:
@@ -10600,6 +10556,8 @@ snapshots:
 
   commander@9.5.0: {}
 
+  common-path-prefix@3.0.0: {}
+
   common-tags@1.8.2: {}
 
   commondir@1.0.1: {}
@@ -12913,8 +12871,6 @@ snapshots:
 
   jpeg-js@0.4.4: {}
 
-  jquery@2.2.4: {}
-
   js-base64@2.6.4: {}
 
   js-beautify@1.15.4:
@@ -15086,10 +15042,6 @@ snapshots:
 
   shell-quote@1.8.3: {}
 
-  showdown@2.1.0:
-    dependencies:
-      commander: 9.5.0
-
   side-channel-list@1.0.0:
     dependencies:
       es-errors: 1.3.0

From 183ecfd1632bce992df1dad21879bef93f466562 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Sun, 10 Aug 2025 23:48:31 +0300
Subject: [PATCH 10/13] fix(texteditor)[markdown]: enhance falsy dimensions
 check for images

---
 .../shared/views/TipTapEditor/TipTapEditor/utils/markdown.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/utils/markdown.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/utils/markdown.js
index 0b823625f2..9fa6ff9a58 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/utils/markdown.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/utils/markdown.js
@@ -43,7 +43,7 @@ export const paramsToImageMd = ({ src, alt, width, height, permanentSrc }) => {
   }
 
   const fileName = sourceToSave.split('/').pop();
-  if (width && height) {
+  if (Number.isFinite(+width) && Number.isFinite(+height)) {
     return `![${alt || ''}](${IMAGE_PLACEHOLDER}/${fileName} =${width}x${height})`;
   }
   return `![${alt || ''}](${IMAGE_PLACEHOLDER}/${fileName})`;

From ff4242bef6b56c616273ffeae3f3ce17f0e5ccc5 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Mon, 11 Aug 2025 03:16:14 +0300
Subject: [PATCH 11/13] fix(texteditor)[image]: save permanentSrc on update

---
 .../TipTapEditor/components/image/ImageUploadModal.vue     | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageUploadModal.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageUploadModal.vue
index c5f8972620..211627d4eb 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageUploadModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageUploadModal.vue
@@ -247,7 +247,12 @@
       const triggerFileInput = () => fileInput.value.click();
       const onFileSelect = event => handleFileChange(event.target.files[0]);
       const onInsert = () => emit('insert', { src: previewSrc.value, alt: altText.value });
-      const onSave = () => emit('update', { src: previewSrc.value, alt: altText.value });
+      const onSave = () =>
+        emit('update', {
+          src: previewSrc.value,
+          alt: altText.value,
+          permanentSrc: previewSrc.value,
+        });
 
       useFocusTrap(modalRoot);
 

From f860e4fa4fe0ee1d083be2113d9b96864ee318fc Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Fri, 15 Aug 2025 10:41:54 +0300
Subject: [PATCH 12/13] feat(texteditor)[a11y]: make editor focusable with
 keyboard

---
 .../AnswersEditor/AnswersEditor.vue           |  1 +
 .../AssessmentItemEditor.vue                  | 17 +++++++---
 .../AssessmentItemPreview.vue                 |  4 +++
 .../components/HintsEditor/HintsEditor.vue    |  1 +
 .../TipTapEditor/TipTapEditor.vue             | 31 +++++++++++++++----
 5 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
index 59cf07ae86..e558478cb0 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
@@ -80,6 +80,7 @@
                       :mode="isAnswerOpen(answerIdx) ? 'edit' : 'view'"
                       @update="updateAnswerText($event, answerIdx)"
                       @minimize="emitClose"
+                      @open-editor="emitOpen(answerIdx)"
                     />
                   </div>
                 </keep-alive>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
index 45146802ed..bfb2c9ed19 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
@@ -63,15 +63,22 @@
                     <TipTapEditor
                       v-model="question"
                       mode="view"
+                      tabindex="-1"
                     />
                   </VFlex>
 
                   <VFlex shrink>
-                    <Icon
-                      :color="$themePalette.grey.v_800"
-                      icon="edit"
-                      class="mr-2"
-                    />
+                    <button
+                      class="v-btn v-btn--flat v-btn--icon v-size--default"
+                      data-test="editQuestionButton"
+                      @click.stop="openQuestion"
+                    >
+                      <Icon
+                        :color="$themePalette.grey.v_800"
+                        icon="edit"
+                        class="mr-2"
+                      />
+                    </button>
                   </VFlex>
                 </VLayout>
               </div>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue
index cb775e2e5c..39e903abe3 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue
@@ -12,6 +12,7 @@
         <TipTapEditor
           v-model="question"
           mode="view"
+          tabindex="-1"
         />
       </VFlex>
     </VLayout>
@@ -45,6 +46,7 @@
                     <TipTapEditor
                       v-model="answer.answer"
                       mode="view"
+                      tabindex="-1"
                     />
                   </div>
                 </template>
@@ -64,6 +66,7 @@
                 <TipTapEditor
                   v-model="answer.answer"
                   mode="view"
+                  tabindex="-1"
                 />
               </div>
             </Checkbox>
@@ -115,6 +118,7 @@
                   <TipTapEditor
                     v-model="hint.hint"
                     mode="view"
+                    tabindex="-1"
                   />
                 </VFlex>
               </VLayout>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue
index 7d87e06df8..523451a055 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue
@@ -40,6 +40,7 @@
                       :mode="isHintOpen(hintIdx) ? 'edit' : 'view'"
                       @update="updateHintText($event, hintIdx)"
                       @minimize="emitClose"
+                      @open-editor="emitOpen(answerIdx)"
                     />
                   </keep-alive>
                 </transition>
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
index e30fe90421..8f7b16bc0f 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
@@ -4,6 +4,13 @@
     ref="editorContainer"
     class="editor-container"
     :class="{ 'view-mode': editorMode === 'view' }"
+    :tabindex="tabindex"
+    role="textbox"
+    :aria-label="
+      editorMode === 'edit' ? 'text editor - Press Enter to start editing' : 'text editor content'
+    "
+    aria-multiline="true"
+    @keydown="handleContainerKeydown"
   >
     <div v-if="editorMode === 'edit'">
       <EditorToolbar
@@ -84,6 +91,7 @@
     </div>
 
     <EditorContentWrapper
+      :inert="editorMode === 'view'"
       @drop.native.prevent="handleDrop"
       @dragover.native.prevent
     />
@@ -246,6 +254,12 @@
         { deep: true },
       );
 
+      const handleContainerKeydown = event => {
+        if (event.key === 'Enter') {
+          emit('open-editor');
+        }
+      };
+
       return {
         editorContainer,
         isReady,
@@ -259,12 +273,9 @@
         sharedEventHandlers,
         editorMode: computed(() => props.mode),
         emitMinimize: () => {
-          // force lose focus
-          if (editor.value) {
-            emit('minimize');
-            editor.value.commands.blur();
-          }
+          emit('minimize');
         },
+        handleContainerKeydown,
       };
     },
     props: {
@@ -276,8 +287,12 @@
         type: String,
         default: 'edit', // 'edit' or 'view'
       },
+      tabindex: {
+        type: [String, Number],
+        default: 0,
+      },
     },
-    emits: ['update', 'minimize'],
+    emits: ['update', 'minimize', 'open-editor'],
   });
 
 </script>
@@ -306,6 +321,10 @@
     border: 0;
   }
 
+  .editor-container:focus-visible {
+    outline-color: #007bff;
+  }
+
   .link-editor-popover-wrapper,
   .image-upload-popover-wrapper,
   .math-modal-popover-wrapper {

From e46709e703e0ad19a9e53f3b9091426578076dbc Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Fri, 15 Aug 2025 11:15:47 +0300
Subject: [PATCH 13/13] fix(texteditor)[i18n]: missing unwrapped strings

---
 .../TipTapEditor/TipTapEditor.vue             |  9 ++++---
 .../TipTapEditor/TipTapEditorStrings.js       | 26 +++++++++++++++++++
 .../components/toolbar/MobileTopBar.vue       | 25 ++++++++++++++----
 3 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
index 8f7b16bc0f..3eea4abe24 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
@@ -6,9 +6,7 @@
     :class="{ 'view-mode': editorMode === 'view' }"
     :tabindex="tabindex"
     role="textbox"
-    :aria-label="
-      editorMode === 'edit' ? 'text editor - Press Enter to start editing' : 'text editor content'
-    "
+    :aria-label="editorMode === 'edit' ? TipTapEditorLabel$() : TipTapViewerLabel$()"
     aria-multiline="true"
     @keydown="handleContainerKeydown"
   >
@@ -127,6 +125,7 @@
   import MobileTopBar from './components/toolbar/MobileTopBar.vue';
   import MobileFormattingBar from './components/toolbar/MobileFormattingBar.vue';
   import { useBreakpoint } from './composables/useBreakpoint';
+  import { getTipTapEditorStrings } from './TipTapEditorStrings';
 
   export default defineComponent({
     name: 'RichTextEditor',
@@ -260,6 +259,8 @@
         }
       };
 
+      const { TipTapEditorLabel$, TipTapViewerLabel$ } = getTipTapEditorStrings();
+
       return {
         editorContainer,
         isReady,
@@ -276,6 +277,8 @@
           emit('minimize');
         },
         handleContainerKeydown,
+        TipTapEditorLabel$,
+        TipTapViewerLabel$,
       };
     },
     props: {
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js
index 5beb83be03..99a57f1e52 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js
@@ -152,6 +152,14 @@ const MESSAGES = {
     message: 'Clipboard access failed. Try copying again.',
     context: 'Message shown when clipboard access fails during paste operation',
   },
+  TipTapEditorLabel: {
+    message: 'text editor - Press Enter to start editing',
+    context: 'Label for the TipTap editor',
+  },
+  TipTapViewerLabel: {
+    message: 'text editor content',
+    context: 'Label for the TipTap editor in view mode',
+  },
 
   // Image Upload
   editImage: {
@@ -335,6 +343,24 @@ const MESSAGES = {
     message: 'Format size',
     context: 'Alt text for the format size icon',
   },
+
+  // for MobileTopBar
+  editorControls: {
+    message: 'Editor controls',
+    context: 'Accessibility label for the editor controls toolbar',
+  },
+  insertContent: {
+    message: 'Insert content',
+    context: 'Button title for inserting content',
+  },
+  insertContentMenu: {
+    message: 'Insert content menu',
+    context: 'Accessibility label for the insert content menu button',
+  },
+  insertContentOption: {
+    message: 'Insert content option',
+    context: 'Accessibility label for the insert content dropdown menu',
+  },
 };
 
 let TipTapEditorStrings = null;
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/MobileTopBar.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/MobileTopBar.vue
index bf3a1603d7..6efd6bb322 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/MobileTopBar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/MobileTopBar.vue
@@ -3,12 +3,12 @@
   <div
     class="toolbar top-bar"
     role="toolbar"
-    aria-label="Editor controls"
+    :aria-label="editorControls$()"
   >
     <div
       class="history-actions"
       role="group"
-      aria-label="History actions"
+      :aria-label="historyActions$()"
     >
       <ToolbarButton
         v-for="action in historyActions"
@@ -24,8 +24,8 @@
       <div class="topbar-actions">
         <button
           class="insert-button"
-          title="Insert content"
-          aria-label="Insert content menu"
+          :title="insertContent$()"
+          :aria-label="insertContentMenu$()"
           :aria-expanded="isInsertMenuOpen"
           aria-haspopup="menu"
           aria-controls="insert-menu"
@@ -46,7 +46,7 @@
         ref="dropdown"
         class="insert-dropdown"
         role="menu"
-        aria-label="Insert content options"
+        :aria-label="insertContentOption$()"
       >
         <button
           v-for="tool in insertTools"
@@ -74,6 +74,7 @@
 
   import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';
   import { useToolbarActions } from '../../composables/useToolbarActions';
+  import { getTipTapEditorStrings } from '../../TipTapEditorStrings';
   import ToolbarButton from './ToolbarButton.vue';
 
   export default defineComponent({
@@ -85,6 +86,15 @@
 
       const { historyActions, insertTools, minimizeAction } = useToolbarActions(emit);
 
+      // Get translation functions
+      const {
+        editorControls$,
+        historyActions$,
+        insertContent$,
+        insertContentMenu$,
+        insertContentOption$,
+      } = getTipTapEditorStrings();
+
       const handleClickOutside = event => {
         if (
           isInsertMenuOpen.value &&
@@ -110,6 +120,11 @@
         minimizeAction,
         isInsertMenuOpen,
         dropdown,
+        editorControls$,
+        historyActions$,
+        insertContent$,
+        insertContentMenu$,
+        insertContentOption$,
       };
     },
   });