MDL-78936 editor_tiny: Disable quickbars for small target

The quickbars selection toolbar is not displayed correctly
if the target element is too small. We will wait for it
to be fixed in the future before we re-enable it in Moodle
This commit is contained in:
Huong Nguyen
2024-06-26 10:13:28 +07:00
parent ad7fc69c25
commit 67f348a340
3 changed files with 12 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
+10 -3
View File
@@ -23,7 +23,7 @@
import jQuery from 'jquery';
import Pending from 'core/pending';
import {getDefaultConfiguration} from './defaults';
import {getDefaultConfiguration, getDefaultQuickbarsSelectionToolbar} from './defaults';
import {getTinyMCE, baseUrl} from './loader';
import * as Options from './options';
import {addToolbarButton, addToolbarButtons, addToolbarSection,
@@ -271,6 +271,11 @@ const getStandardConfig = (target, tinyMCE, options, plugins) => {
// eslint-disable-next-line camelcase
quickbars_insert_toolbar: '',
// If the target element is too small, disable the quickbars selection toolbar.
// The quickbars selection toolbar is not displayed correctly if the target element is too small.
// See: https://github.com/tinymce/tinymce/issues/9693.
quickbars_selection_toolbar: target.rows > 5 ? getDefaultQuickbarsSelectionToolbar() : false,
// Override the standard block formats property (removing h1 & h2).
// https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#block_formats
// eslint-disable-next-line camelcase
@@ -408,8 +413,10 @@ const getEditorConfiguration = (target, tinyMCE, options, pluginValues) => {
.replaceAll(/\| *\|/g, '|');
}
// eslint-disable-next-line camelcase
instanceConfig.quickbars_selection_toolbar = instanceConfig.quickbars_selection_toolbar.replace('h2 h3', 'h3 h4 h5 h6');
if (instanceConfig.quickbars_selection_toolbar !== false) {
// eslint-disable-next-line camelcase
instanceConfig.quickbars_selection_toolbar = instanceConfig.quickbars_selection_toolbar.replace('h2 h3', 'h3 h4 h5 h6');
}
// Next we call the `configure` function for any plugin which defines it.
// We pass the current instanceConfig in here, to allow them to make certain changes to the global configuration.