Merge branch 'MDL-78239-401' of https://github.com/HuongNV13/moodle into MOODLE_401_STABLE

This commit is contained in:
Shamim Rezaie 2023-09-27 14:41:23 +10:00
commit ae0cdf3b67
3 changed files with 30 additions and 5 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -236,6 +236,28 @@ const fixDialoguePositionIfOpen = (params) => {
}
};
/**
* Adjust the editor size base on the target element.
*
* @param {TinyMCE} editor TinyMCE editor
* @param {Node} target Target element
*/
const adjustEditorSize = (editor, target) => {
let expectedEditingAreaHeight = 0;
if (target.clientHeight) {
expectedEditingAreaHeight = target.clientHeight;
} else {
// If the target element is hidden, we cannot get the lineHeight of the target element.
// We don't have a proper way to retrieve the general lineHeight of the theme, so we use 22 here, it's equivalent to 1.5em.
expectedEditingAreaHeight = target.rows * (parseFloat(window.getComputedStyle(target).lineHeight) || 22);
}
const currentEditingAreaHeight = editor.getContainer().querySelector('.tox-sidebar-wrap').clientHeight;
if (currentEditingAreaHeight < expectedEditingAreaHeight) {
// Change the height based on the target element's height.
editor.getContainer().querySelector('.tox-sidebar-wrap').style.height = `${expectedEditingAreaHeight}px`;
}
};
/**
* Get the standard configuration for the specified options.
*
@ -261,9 +283,10 @@ const getStandardConfig = (target, tinyMCE, options, plugins) => {
// eslint-disable-next-line camelcase
min_height: 175,
// Base the height on the size of the text area. Account for lack of height value when the editor is initially hidden,
// in which case use CSS calc() to approximate the same based on number of rows and target line height.
height: target.clientHeight || `calc(${target.rows} * ${window.getComputedStyle(target).lineHeight || '22px'})`,
// Base the height on the size of the text area.
// In some cases, E.g.: The target is an advanced element, it will be hidden. We cannot get the height at this time.
// So set the height to auto, and adjust it later by adjustEditorSize().
height: target.clientHeight || 'auto',
// Set the language.
// https://www.tiny.cloud/docs/tinymce/6/ui-localization/#language
@ -350,6 +373,8 @@ const getStandardConfig = (target, tinyMCE, options, plugins) => {
editor.on('init', function() {
// Hide justify alignment sub-menu.
removeSubmenuItem(editor, 'align', 'tiny:justify');
// Adjust the editor size.
adjustEditorSize(editor, target);
});
editor.on('PostRender', function() {