New version 4.13.9 Read more https://github.com/xdan/jodit/blob/main/CHANGELOG.md

Author: eric-mallac

CHANGELOG.md

@@ -9,6 +9,12 @@
 > - :house: [Internal]
 > - :nail_care: [Polish]
 
+## 4.13.9
+
+#### :bug: Bug Fix
+
+- **Mobile / adaptive toolbar**: with a custom `buttons` list and the default `buttonsMD`/`buttonsSM`/`buttonsXS`, resizing the editor narrower surfaced buttons that were never requested — the breakpoint sets are group-based defaults independent of `buttons`. The responsive breakpoint set is now constrained to `buttons`: resizing only ever drops buttons, never adds ones outside `buttons`. Set `buttonsMD`/`buttonsSM`/`buttonsXS` explicitly if you want a different per-breakpoint set. The default configuration (where `buttons` is the full superset) is unchanged. Fixes [#1389](https://github.com/xdan/jodit/issues/1389).
+
 ## 4.13.8
 
 #### :house: Internal

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "jodit",
-	"version": "4.13.8",
+	"version": "4.13.9",
 	"description": "Jodit is an awesome and useful wysiwyg editor with filebrowser",
 	"main": "build/jodit.min.js",
 	"types": "./types/index.d.ts",

package.json

@@ -152,6 +152,37 @@ const editor = Jodit.make('#editor', {
 });
 ```
 
+### Breakpoint sets are constrained to `buttons`
+
+`buttons` is treated as the full set of buttons the editor may ever show. The
+responsive breakpoint sets (`buttonsMD`/`buttonsSM`/`buttonsXS`) are intersected
+with `buttons`, so resizing the editor can only ever **drop** buttons on smaller
+widths — it never adds a button that is not in `buttons`.
+
+This matters when you customise only `buttons` and leave the breakpoint sets at
+their (group-based) defaults:
+
+```typescript
+const editor = Jodit.make('#editor', {
+    // only four buttons wanted, at every width
+    buttons: ['bold', 'italic', 'underline', 'strikethrough']
+});
+```
+
+On a narrow editor this still shows just those four buttons. Previously the
+editor fell back to the default `buttonsMD`/`buttonsSM`/`buttonsXS` groups and
+displayed many more buttons than were requested.
+
+If you actually want a *different* set at some breakpoint, set that breakpoint
+option explicitly (its buttons should be a subset of `buttons`):
+
+```typescript
+const editor = Jodit.make('#editor', {
+    buttons: ['bold', 'italic', 'underline', 'strikethrough', 'ul', 'ol'],
+    buttonsXS: ['bold', 'italic', 'dots']
+});
+```
+
 ### Disable Adaptive Toolbar
 
 ```typescript

src/plugins/mobile/README.md

@@ -35,16 +35,26 @@ declare module 'jodit/config' {
 
 		/**
 		 * The list of buttons that appear in the editor's toolbar for medium-sized spaces (≥ options.sizeMD).
+		 *
+		 * The set is constrained to `buttons`: resizing may only drop buttons on
+		 * smaller widths, never surface a button that is not in `buttons`. So if
+		 * you customise only `buttons` and leave this at its default, a narrow
+		 * editor still shows just your `buttons`. Set this explicitly (as a subset
+		 * of `buttons`) to get a different medium-width set.
 		 */
 		buttonsMD: ButtonsOption;
 
 		/**
 		 * The list of buttons that appear in the editor's toolbar for small-sized spaces (≥ options.sizeSM).
+		 *
+		 * Constrained to `buttons` — see {@link buttonsMD}.
 		 */
 		buttonsSM: ButtonsOption;
 
 		/**
 		 * The list of buttons that appear in the editor's toolbar for extra-small spaces (less than options.sizeSM).
+		 *
+		 * Constrained to `buttons` — see {@link buttonsMD}.
 		 */
 		buttonsXS: ButtonsOption;
 	}

src/plugins/mobile/config.ts

@@ -35,6 +35,37 @@ describe('Test mobile mode', function () {
 			expect(count()).to.eq(window.toolbarButtonsCountXS);
 		});
 
+		describe('When only a custom `buttons` list is set (no buttonsMD/SM/XS)', function () {
+			// #1389: resizing narrower switched to the group-based buttonsMD/SM/XS
+			// defaults, surfacing buttons the user never requested. Resizing must
+			// only ever drop buttons, never add ones outside `buttons`.
+			it('Should never show buttons that were not requested on resize', function () {
+				getBox().style.width = '1000px';
+				const editor = getJodit({
+					disablePlugins: ['speech-recognize'],
+					buttons: ['bold', 'italic', 'underline', 'strikethrough']
+				});
+
+				const count = () =>
+					editor.container.querySelectorAll(
+						'.jodit-toolbar__box .jodit-toolbar-button'
+					).length;
+
+				expect(count()).equals(4);
+				expect(getButton('image', editor)).to.be.null;
+
+				[790, 690, 390].forEach(width => {
+					getBox().style.width = width + 'px';
+					simulateEvent('resize', window);
+
+					expect(count()).equals(4);
+					expect(getButton('bold', editor)).to.be.not.null;
+					expect(getButton('image', editor)).to.be.null;
+					expect(getButton('ul', editor)).to.be.null;
+				});
+			});
+		});
+
 		describe('Disable plugins', () => {
 			it('Should remove buttons from these plugins for all sizes', () => {
 				getBox().style.width = '1000px';

src/plugins/mobile/mobile.test.js

@@ -10,13 +10,96 @@
  * @module plugins/mobile
  */
 
-import type { ButtonsGroups, IJodit, IToolbarCollection } from 'jodit/types';
+import type {
+	ButtonsGroups,
+	IControlType,
+	IJodit,
+	IToolbarCollection
+} from 'jodit/types';
 import { pluginSystem } from 'jodit/core/global';
 import { splitArray, toArray } from 'jodit/core/helpers/';
-import { flatButtonsSet } from 'jodit/core/ui/helpers/buttons';
+import { flatButtonsSet, isButtonGroup } from 'jodit/core/ui/helpers/buttons';
 
 import './config';
 
+const isButtonSeparator = (item: unknown): boolean =>
+	item === '|' || item === '---' || item === '\n';
+
+/**
+ * Constrain a responsive breakpoint set (`buttonsMD/SM/XS`) to the buttons the
+ * user actually asked for via `buttons`. Those breakpoint defaults are
+ * group-based supersets, so a custom (smaller) `buttons` list would otherwise
+ * see *extra* buttons appear on resize when the toolbar switched to a breakpoint
+ * set — resizing must only ever drop buttons, never add ones outside `buttons`.
+ *
+ * When the breakpoint set introduces nothing outside `buttons` (the default
+ * case, where `buttons` is the full superset), the list is returned untouched so
+ * the standard grouped mobile layout — groups, separators and `dots` — is
+ * preserved. See #1389.
+ */
+function fitToButtons(list: ButtonsGroups, editor: IJodit): ButtonsGroups {
+	const allowed = flatButtonsSet(splitArray(editor.o.buttons), editor);
+	const groups = editor.getRegisteredButtonGroups();
+
+	let changed = false;
+	let hadDots = false;
+	const flat: Array<string | IControlType> = [];
+
+	for (const item of list) {
+		if (isButtonGroup(item)) {
+			const members = [...item.buttons, ...(groups[item.group] ?? [])];
+			const kept = members.filter(button => allowed.has(button));
+
+			if (kept.length !== members.length) {
+				changed = true;
+			}
+
+			flat.push(...kept);
+		} else if (isButtonSeparator(item)) {
+			flat.push(item);
+		} else if (item === 'dots') {
+			hadDots = true;
+		} else if (allowed.has(item)) {
+			flat.push(item);
+		} else {
+			changed = true;
+		}
+	}
+
+	if (!changed) {
+		return list;
+	}
+
+	// Drop separators left dangling once the buttons around them were removed.
+	const cleaned: Array<string | IControlType> = [];
+	for (const item of flat) {
+		if (
+			isButtonSeparator(item) &&
+			(cleaned.length === 0 ||
+				isButtonSeparator(cleaned[cleaned.length - 1]))
+		) {
+			continue;
+		}
+
+		cleaned.push(item);
+	}
+	while (cleaned.length && isButtonSeparator(cleaned[cleaned.length - 1])) {
+		cleaned.pop();
+	}
+
+	// Keep the "show all" overflow button only if some requested button is still
+	// hidden at this breakpoint.
+	if (hadDots) {
+		const shown = flatButtonsSet(cleaned, editor);
+
+		if (toArray(allowed).some(button => !shown.has(button))) {
+			cleaned.push('dots');
+		}
+	}
+
+	return cleaned;
+}
+
 /**
  * Rebuild toolbar in depends on editor's width
  */
@@ -76,20 +159,29 @@ export function mobile(editor: IJodit): void {
 						editor.container.parentElement ?? editor.container
 					).offsetWidth;
 
-					const newStore = ((): ReturnType<typeof splitArray> => {
+					const newStore = ((): ButtonsGroups => {
 						if (editor.isFullSize || width >= editor.o.sizeLG) {
 							return splitArray(editor.o.buttons);
 						}
 
 						if (width >= editor.o.sizeMD) {
-							return splitArray(editor.o.buttonsMD);
+							return fitToButtons(
+								splitArray(editor.o.buttonsMD),
+								editor
+							);
 						}
 
 						if (width >= editor.o.sizeSM) {
-							return splitArray(editor.o.buttonsSM);
+							return fitToButtons(
+								splitArray(editor.o.buttonsSM),
+								editor
+							);
 						}
 
-						return splitArray(editor.o.buttonsXS);
+						return fitToButtons(
+							splitArray(editor.o.buttonsXS),
+							editor
+						);
 					})();
 
 					if (newStore.toString() !== store.toString()) {