fix: Better legibility when editing some math elements.

src/element/textWysiwyg.tsx

@@ -44,6 +44,7 @@ import { actionZoomIn, actionZoomOut } from "../actions/actionCanvas";
 import App from "../components/App";
 import { LinearElementEditor } from "./linearElementEditor";
 import { parseClipboard } from "../clipboard";
+import { SubtypeMethods, getSubtypeMethods } from "../subtypes";
 
 const getTransform = (
   offsetX: number,
@@ -99,6 +100,14 @@ export const getOriginalContainerHeightFromCache = (
   return originalContainerCache[id]?.height ?? null;
 };
 
+const getEditorStyle = function (element) {
+  const map = getSubtypeMethods(element.subtype);
+  if (map?.getEditorStyle) {
+    return map.getEditorStyle(element);
+  }
+  return {};
+} as SubtypeMethods["getEditorStyle"];
+
 export const textWysiwyg = ({
   id,
   onChange,
@@ -395,6 +404,7 @@ export const textWysiwyg = ({
     whiteSpace,
     overflowWrap: "break-word",
     boxSizing: "content-box",
+    ...getEditorStyle(element),
   });
   updateWysiwygStyle();
 

src/packages/extensions/ts/mathjax/implementation.tsx

@@ -876,6 +876,13 @@ const cleanMathElementUpdate = function (updates) {
   return oldUpdates;
 } as SubtypeMethods["clean"];
 
+const getMathEditorStyle = function (element) {
+  if (isMathElement(element)) {
+    return { background: undefined };
+  }
+  return {};
+} as SubtypeMethods["getEditorStyle"];
+
 const measureMathElement = function (element, next) {
   ensureMathElement(element);
   const isMathJaxLoaded = mathJaxLoaded;
@@ -1542,6 +1549,7 @@ export const prepareMathSubtype = function (
   const methods = {} as SubtypeMethods;
   methods.clean = cleanMathElementUpdate;
   methods.ensureLoaded = ensureMathJaxLoaded;
+  methods.getEditorStyle = getMathEditorStyle;
   methods.measureText = measureMathElement;
   methods.render = renderMathElement;
   methods.renderSvg = renderSvgMathElement;

src/subtypes.ts

@@ -220,6 +220,7 @@ export type SubtypeMethods = {
       "id" | "version" | "versionNonce"
     >,
   ) => Omit<Partial<ExcalidrawElement>, "id" | "version" | "versionNonce">;
+  getEditorStyle: (element: ExcalidrawTextElement) => Record<string, any>;
   ensureLoaded: (callback?: () => void) => Promise<void>;
   measureText: (
     element: Pick<
@@ -261,7 +262,9 @@ type MethodMap = { subtype: Subtype; methods: Partial<SubtypeMethods> };
 const methodMaps = [] as Array<MethodMap>;
 
 // Use `getSubtypeMethods` to call subtype-specialized methods, like `render`.
-export const getSubtypeMethods = (subtype: Subtype | undefined) => {
+export const getSubtypeMethods = (
+  subtype: Subtype | undefined,
+): Partial<SubtypeMethods> | undefined => {
   const map = methodMaps.find((method) => method.subtype === subtype);
   return map?.methods;
 };