diff --git a/src/element/textWysiwyg.tsx b/src/element/textWysiwyg.tsx index 23e755b34..bcc5ce556 100644 --- a/src/element/textWysiwyg.tsx +++ b/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(); diff --git a/src/packages/extensions/ts/mathjax/implementation.tsx b/src/packages/extensions/ts/mathjax/implementation.tsx index 999d1da71..ff89c0eeb 100644 --- a/src/packages/extensions/ts/mathjax/implementation.tsx +++ b/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; diff --git a/src/subtypes.ts b/src/subtypes.ts index 621bd386c..2e240410f 100644 --- a/src/subtypes.ts +++ b/src/subtypes.ts @@ -220,6 +220,7 @@ export type SubtypeMethods = { "id" | "version" | "versionNonce" >, ) => Omit, "id" | "version" | "versionNonce">; + getEditorStyle: (element: ExcalidrawTextElement) => Record; ensureLoaded: (callback?: () => void) => Promise; measureText: ( element: Pick< @@ -261,7 +262,9 @@ type MethodMap = { subtype: Subtype; methods: Partial }; const methodMaps = [] as Array; // Use `getSubtypeMethods` to call subtype-specialized methods, like `render`. -export const getSubtypeMethods = (subtype: Subtype | undefined) => { +export const getSubtypeMethods = ( + subtype: Subtype | undefined, +): Partial | undefined => { const map = methodMaps.find((method) => method.subtype === subtype); return map?.methods; };