Add new Minimal with Math Editor for Enabling MathJax (#2869)

* Add new Minimal with Math editor

* Add test for new editor config

* Simplify logic to remove branching

Author: pt2302

static/js/components/widgets/MarkdownEditor.test.tsx

@@ -8,12 +8,14 @@ import MarkdownEditor from "./MarkdownEditor"
 import {
   FullEditorConfig,
   MinimalEditorConfig,
+  MinimalWithMathEditorConfig,
 } from "../../lib/ckeditor/CKEditor"
 import {
   ADD_RESOURCE_EMBED,
   ADD_RESOURCE_LINK,
   CKEDITOR_RESOURCE_UTILS,
   MARKDOWN_CONFIG_KEY,
+  MINIMAL_WITH_MATH,
   RESOURCE_EMBED,
   RESOURCE_LINK,
   RESOURCE_LINK_CONFIG_KEY,
@@ -103,6 +105,11 @@ describe("MarkdownEditor", () => {
       configLabel: "FullEditorConfig",
       otherProps: { allowedHtml: ["sub", "sup"] },
     },
+    {
+      minimal: MINIMAL_WITH_MATH,
+      expectedConfig: MinimalWithMathEditorConfig,
+      configLabel: "MinimalWithMathEditorConfig",
+    },
   ])(
     "Uses the $configLabel when minimal=$minimal",
     ({ minimal, expectedConfig, otherProps }) => {

static/js/components/widgets/MarkdownEditor.tsx

@@ -7,6 +7,7 @@ import CKEditorInspector from "@ckeditor/ckeditor5-inspector"
 import {
   FullEditorConfig,
   MinimalEditorConfig,
+  MinimalWithMathEditorConfig,
 } from "../../lib/ckeditor/CKEditor"
 import ResourceLink from "../../lib/ckeditor/plugins/ResourceLink"
 import { checkNotSubAndSup } from "../../lib/ckeditor/attributeChecks"
@@ -23,6 +24,7 @@ import {
   MARKDOWN_CONFIG_KEY,
   RESOURCE_LINK_CONFIG_KEY,
   WEBSITE_NAME,
+  MINIMAL_WITH_MATH,
 } from "../../lib/ckeditor/plugins/constants"
 import ResourcePickerDialog from "./ResourcePickerDialog"
 import useThrowSynchronously from "../../hooks/useAsyncError"
@@ -37,7 +39,7 @@ export interface Props {
   name?: string
   onChange?: (event: { target: { value: string; name: string } }) => void
   children?: React.ReactNode
-  minimal?: boolean
+  minimal?: boolean | typeof MINIMAL_WITH_MATH
   embed: string[]
   link: string[]
   allowedHtml: string[]
@@ -142,48 +144,34 @@ export default function MarkdownEditor(props: Props): JSX.Element {
       [WEBSITE_NAME]: website.name,
     }
 
+    const baseConfig =
+      minimal === MINIMAL_WITH_MATH
+        ? MinimalWithMathEditorConfig
+        : minimal
+          ? MinimalEditorConfig
+          : FullEditorConfig
+
     // Create a copy of plugins to avoid mutating the original
-    const plugins = minimal
-      ? [...MinimalEditorConfig.plugins]
-      : [...FullEditorConfig.plugins]
+    const plugins = [...baseConfig.plugins]
     if (isCustomLinkUIEnabled) {
       plugins.push(CustomLink)
     }
 
-    if (minimal) {
-      return {
-        ...MinimalEditorConfig,
-        plugins,
-        [CKEDITOR_RESOURCE_UTILS]: {
-          renderResource,
-          openResourcePicker,
-        },
-        toolbar: {
-          ...MinimalEditorConfig.toolbar,
-          items: MinimalEditorConfig.toolbar.items.filter(toolbarItemsFilter),
-        },
-        ...resourceLink,
-      }
-    } else {
-      // this render function is stuck into the editor config
-      // our ResourceEmbed plugin can pull the callback out,
-      // and then use it to render resources within the editor.
-      return {
-        ...FullEditorConfig,
-        plugins,
-        [CKEDITOR_RESOURCE_UTILS]: {
-          renderResource,
-          openResourcePicker,
-        },
-        toolbar: {
-          ...FullEditorConfig.toolbar,
-          items: FullEditorConfig.toolbar.items.filter(toolbarItemsFilter),
-        },
-        [MARKDOWN_CONFIG_KEY]: {
-          allowedHtml,
-        },
-        ...resourceLink,
-      }
+    return {
+      ...baseConfig,
+      plugins,
+      [CKEDITOR_RESOURCE_UTILS]: {
+        renderResource,
+        openResourcePicker,
+      },
+      toolbar: {
+        ...baseConfig.toolbar,
+        items: baseConfig.toolbar.items.filter(toolbarItemsFilter),
+      },
+      [MARKDOWN_CONFIG_KEY]: {
+        allowedHtml,
+      },
+      ...resourceLink,
     }
   }, [
     minimal,

static/js/lib/ckeditor/CKEditor.ts

@@ -172,3 +172,48 @@ export const MinimalEditorConfig = {
   },
   language: "en",
 }
+
+export const MinimalWithMathEditorConfig = {
+  plugins: [
+    EssentialsPlugin,
+    AutoformatPlugin,
+    BoldPlugin,
+    ItalicPlugin,
+    CodePlugin,
+    BlockQuotePlugin,
+    LinkPlugin,
+    ListPlugin,
+    ParagraphPlugin,
+    ResourceEmbed,
+    ResourcePicker,
+    ResourceLink,
+    MathSyntax,
+    MarkdownListSyntax,
+    Mathematics,
+    Markdown,
+    LegacyShortcodes,
+  ],
+  toolbar: {
+    items: [
+      "bold",
+      "italic",
+      "code",
+      "link",
+      "bulletedList",
+      "numberedList",
+      "blockQuote",
+      "math",
+      "undo",
+      "redo",
+      ADD_RESOURCE_LINK,
+      ADD_RESOURCE_EMBED,
+    ],
+  },
+  math: {
+    engine: "mathjax",
+    outputType: "script",
+    forceOutputType: true,
+    enablePreview: true,
+  },
+  language: "en",
+}

static/js/lib/ckeditor/plugins/constants.ts

@@ -2,6 +2,8 @@ export const ADD_RESOURCE_LINK = "addResourceLink"
 
 export const ADD_RESOURCE_EMBED = "addResourceEmbed"
 
+export const MINIMAL_WITH_MATH = "with-math" as const
+
 export const CKEDITOR_RESOURCE_UTILS = "CKEDITOR_RESOURCE_UTILS"
 
 export const RESOURCE_EMBED = "resourceEmbed"

static/js/types/websites.ts

@@ -49,9 +49,11 @@ interface ConfigFieldBaseProps {
   condition?: FieldValueCondition
 }
 
+import { MINIMAL_WITH_MATH } from "../lib/ckeditor/plugins/constants"
+
 export interface MarkdownConfigField extends ConfigFieldBaseProps {
   widget: WidgetVariant.Markdown
-  minimal?: boolean
+  minimal?: boolean | typeof MINIMAL_WITH_MATH
   link?: string[]
   embed?: string[]
   allowed_html?: string[]

websites/config_schema/site-config-schema.yml

@@ -25,7 +25,7 @@ field:
     'object', 'relation', 'menu', 'hierarchical-select', 'website-collection')
   label: str()
   name: str()
-  minimal: bool(required=False)
+  minimal: any(bool(), enum('with-math'), required=False)
   allowed_html: list(str(), required=False)
   required: bool(required=False)
   help: str(required=False)