fix: set maxHeight on TextEditor TinyMce widget [FC-0090] (#2024)

Sets a max_height=500px for the TinyMCE editor when editing a Text/Html component.
This prevents the autoresize plugin from expanding the editor textarea beyond the bounds of the editor modal.

⚠️ Because the max height can only be a numeric pixel value, we can't use clever settings like vh or %, and so we're forced to limit the height of the editor to a fixed size for all screen sizes in order to address this issue.
This commit is contained in:
Jillian
2025-05-24 04:21:39 +09:30
committed by GitHub
parent ac5574d2c4
commit c5f7d0cf3b
3 changed files with 6 additions and 4 deletions

View File

@@ -50,13 +50,13 @@ exports[`TextEditor snapshots block failed to load, Toast is shown 1`] = `
}
editorType="text"
enableImageUpload={true}
height="100%"
id={null}
images={{}}
initializeEditor={[MockFunction args.intializeEditor]}
isLibrary={null}
learningContextId="course+org+run"
lmsEndpointUrl=""
maxHeight={500}
minHeight={500}
onChange={[Function]}
setEditorRef={[MockFunction hooks.prepareEditorRef.setEditorRef]}
@@ -226,13 +226,13 @@ exports[`TextEditor snapshots renders as expected with default behavior 1`] = `
}
editorType="text"
enableImageUpload={true}
height="100%"
id={null}
images={{}}
initializeEditor={[MockFunction args.intializeEditor]}
isLibrary={null}
learningContextId="course+org+run"
lmsEndpointUrl=""
maxHeight={500}
minHeight={500}
onChange={[Function]}
setEditorRef={[MockFunction hooks.prepareEditorRef.setEditorRef]}
@@ -292,13 +292,13 @@ exports[`TextEditor snapshots renders static images with relative paths 1`] = `
}
editorType="text"
enableImageUpload={true}
height="100%"
id={null}
images={{}}
initializeEditor={[MockFunction args.intializeEditor]}
isLibrary={null}
learningContextId="course+org+run"
lmsEndpointUrl=""
maxHeight={500}
minHeight={500}
onChange={[Function]}
setEditorRef={[MockFunction hooks.prepareEditorRef.setEditorRef]}

View File

@@ -65,7 +65,7 @@ const TextEditor = ({
editorContentHtml={editorContent}
setEditorRef={setEditorRef}
minHeight={500}
height="100%"
maxHeight={500}
initializeEditor={initializeEditor}
{...{
images,

View File

@@ -304,6 +304,7 @@ export const editorConfig = ({
updateContent,
content,
minHeight,
maxHeight,
learningContextId,
staticRootUrl,
enableImageUpload,
@@ -335,6 +336,7 @@ export const editorConfig = ({
content_css: false,
content_style: tinyMCEStyles + a11ycheckerCss,
min_height: minHeight,
max_height: maxHeight,
contextmenu: 'link table',
directionality: isLocaleRtl ? 'rtl' : 'ltr',
document_base_url: baseURL,