feat: add icon scaling support and update changelog for version 4.11.4

Author: xdan

CHANGELOG.md

@@ -9,6 +9,47 @@
 > - :house: [Internal]
 > - :nail_care: [Polish]
 
+## 4.11.4
+
+#### :boom: Breaking Change
+
+- `.jodit-icon` `transform-origin` changed from `0 0 !important` to `var(--jd-icon-transform-origin)` (default `center`), and the `!important` flag was removed. If your layout depends on the old top-left origin, restore it via CSS:
+  ```css
+  :root {
+      --jd-icon-transform-origin: 0 0 !important;
+  }
+  ```
+
+#### :rocket: New Feature
+
+- `IUIIconState` now supports `scale` property — when set, applies `transform: scale(...)` to the SVG icon element, overriding the CSS variable
+- `IControlType.icon` now accepts `string | IUIIconState` — allows setting icon name, fill, iconURL, and scale directly from toolbar button config
+
+  Per-button scale example:
+  ```javascript
+  Jodit.make('#editor', {
+      buttons: Jodit.atom([
+          'bold',
+          {
+              name: 'big-italic',
+              icon: { name: 'italic', fill: '', iconURL: '', scale: 1.5 },
+              tooltip: 'Italic (large icon)'
+          },
+          'underline'
+      ])
+  });
+  ```
+
+- CSS custom properties `--jd-icon-transform-origin` and `--jd-icon-transform-scale` for global icon scaling. Override them to resize all editor icons at once. Per-button `scale` in `IUIIconState` takes priority over the CSS variable.
+
+  Global scale override via CSS:
+  ```css
+  :root {
+      --jd-icon-transform-scale: 1.3;
+      --jd-icon-transform-origin: center;
+  }
+  ```
+
 ## 4.11.2
 
 #### :boom: Breaking Change

docs/security.md

@@ -112,7 +112,7 @@ Jodit.make('#editor', {
 ```javascript
 Jodit.make('#editor', {
     cleanHTML: {
-        allowTags: {
+        allowTags: Jodit.atom({
             p: true,                    // allow <p> with any attributes
             a: { href: true },          // allow <a> only with href
             strong: true,
@@ -127,17 +127,23 @@ Jodit.make('#editor', {
                 width: true,
                 height: true
             }
-        }
+        })
     }
 });
 ```
 
+{% note info %}
+
+Wrap object and array options with `Jodit.atom()`. Without it, Jodit deep-merges your value with the default config instead of replacing it. For example, `allowTags: { p: true }` without `Jodit.atom()` will be merged with the default value, not override it.
+
+{% endnote %}
+
 **Pin to an exact value:**
 
 ```javascript
-allowTags: {
+allowTags: Jodit.atom({
     img: { src: '/images/logo.png' }  // only src="/images/logo.png" survives
-}
+})
 ```
 
 ### denyTags -- blacklist mode
@@ -161,14 +167,20 @@ Inline `style` attributes can be used for CSS injection attacks (e.g., data exfi
 ```javascript
 Jodit.make('#editor', {
     cleanHTML: {
-        allowedStyles: {
+        allowedStyles: Jodit.atom({
             '*': ['color', 'background-color', 'font-size', 'text-align', 'font-weight'],
             img: ['width', 'height']
-        }
+        })
     }
 });
 ```
 
+{% note info %}
+
+Wrap `allowedStyles` with `Jodit.atom()` to replace the default value entirely. Without it, Jodit deep-merges your object with the defaults.
+
+{% endnote %}
+
 When set, any CSS property not in the whitelist is stripped. Supports global (`*`) and tag-specific rules.
 
 ### sanitizer -- external sanitizer hook
@@ -206,11 +218,17 @@ You can disable individual filters if they conflict with your use case:
 ```javascript
 Jodit.make('#editor', {
     cleanHTML: {
-        disableCleanFilter: new Set(['replaceOldTags']) // keep <i> and <b> as-is
+        disableCleanFilter: Jodit.atom(new Set(['replaceOldTags'])) // keep <i> and <b> as-is
     }
 });
 ```
 
+{% note info %}
+
+Wrap `Set` and other collection options with `Jodit.atom()` so Jodit replaces the value instead of merging it with the default.
+
+{% endnote %}
+
 Available filter names: `tryRemoveNode`, `allowAttributes`, `sanitizeAttributes`, `sanitizeStyles`, `replaceOldTags`, `fillEmptyParagraph`, `removeEmptyTextNode`, `removeInvTextNodes`, `safeLinksTarget`, `sandboxIframesInContent`, `convertUnsafeEmbeds`.
 
 ---
@@ -242,17 +260,23 @@ Jodit.make('#editor', {
     defaultActionOnPaste: 'insert_as_html',
 
     // Tags preserved even in "insert only text" mode
-    pasteExcludeStripTags: ['br', 'hr'],
+    pasteExcludeStripTags: Jodit.atom(['br', 'hr']),
 
     // Available options in the paste dialog
-    pasteHTMLActionList: [
+    pasteHTMLActionList: Jodit.atom([
         { value: 'insert_as_html', text: 'Keep' },
         { value: 'insert_as_text', text: 'Insert as Text' },
         { value: 'insert_only_text', text: 'Insert only Text' }
-    ]
+    ])
 });
 ```
 
+{% note info %}
+
+Wrap array options like `pasteExcludeStripTags` and `pasteHTMLActionList` with `Jodit.atom()`. Without it, Jodit deep-merges your array with the default instead of replacing it.
+
+{% endnote %}
+
 ### For maximum safety on paste
 
 ```javascript
@@ -288,11 +312,11 @@ Jodit.make('#editor', {
     // Default action for Word content
     defaultActionOnPasteFromWord: 'insert_as_text', // cleanFromWord
 
-    pasteFromWordActionList: [
+    pasteFromWordActionList: Jodit.atom([
         { value: 'insert_as_html', text: 'Keep' },
         { value: 'insert_as_text', text: 'Clean' },
         { value: 'insert_only_text', text: 'Insert only Text' }
-    ]
+    ])
 });
 ```
 
@@ -379,21 +403,27 @@ To avoid whitelisting external CDNs, host the libraries yourself and override th
 
 ```javascript
 Jodit.make('#editor', {
-    sourceEditorCDNUrlsJS: ['/vendor/ace/ace.js'],
-    beautifyHTMLCDNUrlsJS: [
+    sourceEditorCDNUrlsJS: Jodit.atom(['/vendor/ace/ace.js']),
+    beautifyHTMLCDNUrlsJS: Jodit.atom([
         '/vendor/js-beautify/beautify.min.js',
         '/vendor/js-beautify/beautify-html.min.js'
-    ],
+    ]),
     // Pro only: pasteCode plugin
     pasteCode: {
-        highlightLib: {
+        highlightLib: Jodit.atom({
             js: ['/vendor/prism/prism.min.js'],
             css: ['/vendor/prism/prism.min.css']
-        }
+        })
     }
 });
 ```
 
+{% note info %}
+
+Wrap array and object options with `Jodit.atom()` so Jodit replaces the default CDN URLs instead of merging with them.
+
+{% endnote %}
+
 Then your CSP needs only `'self'`:
 
 ```http
@@ -413,7 +443,7 @@ Alternatively, disable these features entirely if you don't need them:
 Jodit.make('#editor', {
     sourceEditor: 'area',  // plain textarea instead of Ace
     beautifyHTML: false,
-    disablePlugins: ['pasteCode']  // Pro only
+    disablePlugins: Jodit.atom(['pasteCode'])  // Pro only
 });
 ```
 

src/core/ui/button/button/button.test.js

@@ -12,6 +12,62 @@ describe('Test UIButton', () => {
 		editor = getJodit();
 	});
 
+	describe('icon scale', () => {
+		it('should apply transform scale to icon SVG when scale is set', () => {
+			const button = new UIButton(editor);
+			button.state.icon = {
+				name: 'bold',
+				fill: '',
+				iconURL: '',
+				scale: 1.5
+			};
+
+			const svg = button.container.querySelector('.jodit-icon');
+			expect(svg).is.not.null;
+			expect(svg.style.transform).eq('scale(1.5)');
+		});
+
+		it('should not set transform when scale is undefined', () => {
+			const button = new UIButton(editor);
+			button.state.icon = {
+				name: 'bold',
+				fill: '',
+				iconURL: '',
+				scale: undefined
+			};
+
+			const svg = button.container.querySelector('.jodit-icon');
+			expect(svg).is.not.null;
+			expect(svg.style.transform).eq('');
+		});
+
+		it('should reactively update icon when scale changes', async () => {
+			const button = new UIButton(editor);
+			button.state.icon = {
+				name: 'bold',
+				fill: '',
+				iconURL: '',
+				scale: undefined
+			};
+
+			let svg = button.container.querySelector('.jodit-icon');
+			expect(svg.style.transform).eq('');
+
+			button.state.icon = {
+				name: 'bold',
+				fill: '',
+				iconURL: '',
+				scale: 2
+			};
+
+			await editor.async.requestIdlePromise();
+
+			svg = button.container.querySelector('.jodit-icon');
+			expect(svg).is.not.null;
+			expect(svg.style.transform).eq('scale(2)');
+		});
+	});
+
 	describe('aria-label', () => {
 		it('should set aria-label from tooltip when text is empty', () => {
 			const button = new UIButton(editor);

src/core/ui/button/button/button.ts

@@ -47,7 +47,8 @@ export const UIButtonState = (): IUIButtonState => ({
 	icon: {
 		name: 'empty',
 		fill: '',
-		iconURL: ''
+		iconURL: '',
+		scale: undefined
 	},
 
 	tooltip: '',

src/core/ui/icon.ts

@@ -75,15 +75,15 @@ export class Icon {
 
 		let iconElement: CanUndef<HTMLElement>;
 
-		const { name, iconURL, fill } = icon;
+		const { name, iconURL, fill, scale } = icon;
 		const clearName = name.replace(/[^a-zA-Z0-9]/g, '_');
 
 		let iconFromEvent: CanUndef<string>;
 		if (!/<svg/.test(name)) {
 			iconFromEvent = jodit.o.getIcon?.(name, clearName);
 		}
 
-		const cacheKey = `${name}${iconURL}${fill}${iconFromEvent ?? ''}`;
+		const cacheKey = `${name}${iconURL}${fill}${scale ?? ''}${iconFromEvent ?? ''}`;
 
 		if (jodit.o.cache && this.__cache.has(cacheKey)) {
 			return this.__cache.get(cacheKey)?.cloneNode(true);
@@ -117,6 +117,11 @@ export class Icon {
 		if (iconElement) {
 			iconElement.classList.add('jodit-icon');
 			iconElement.style.fill = fill;
+
+			if (scale != null) {
+				iconElement.style.transform = `scale(${scale})`;
+			}
+
 			jodit.o.cache &&
 				this.__cache.set(
 					cacheKey,

src/modules/toolbar/button/button.ts

@@ -274,6 +274,19 @@ export class ToolbarButton<T extends IViewBased = IViewBased>
 
 		state.name = ctr.name;
 
+		this.__initIconFromControl();
+
+		if (ctr.tooltip) {
+			state.tooltip = isFunction(ctr.tooltip)
+				? ctr.tooltip(this.j, ctr, this)
+				: ctr.tooltip;
+		}
+
+		state.hasTrigger = Boolean(ctr.list || (ctr.popup && ctr.exec));
+	}
+
+	private __initIconFromControl(): void {
+		const { control: ctr, state } = this;
 		const { textIcons } = this.j.o;
 
 		if (
@@ -283,29 +296,30 @@ export class ToolbarButton<T extends IViewBased = IViewBased>
 		) {
 			state.icon = UIButtonState().icon;
 			state.text = ctr.text || ctr.name;
-		} else {
-			if (ctr.iconURL) {
-				state.icon.iconURL = ctr.iconURL;
-			} else {
-				const name = ctr.icon || ctr.name;
-				state.icon.name =
-					Icon.exists(name) || this.j.o.extraIcons?.[name]
-						? name
-						: '';
-			}
+			return;
+		}
 
-			if (!ctr.iconURL && !state.icon.name) {
-				state.text = ctr.text || ctr.name;
-			}
+		if (!isString(ctr.icon) && ctr.icon != null) {
+			state.icon = {
+				name: ctr.icon.name || ctr.name,
+				iconURL: ctr.icon.iconURL || '',
+				fill: ctr.icon.fill || '',
+				scale: ctr.icon.scale
+			};
+			return;
 		}
 
-		if (ctr.tooltip) {
-			state.tooltip = isFunction(ctr.tooltip)
-				? ctr.tooltip(this.j, ctr, this)
-				: ctr.tooltip;
+		if (ctr.iconURL) {
+			state.icon.iconURL = ctr.iconURL;
+		} else {
+			const name = ctr.icon || ctr.name;
+			state.icon.name =
+				Icon.exists(name) || this.j.o.extraIcons?.[name] ? name : '';
 		}
 
-		state.hasTrigger = Boolean(ctr.list || (ctr.popup && ctr.exec));
+		if (!ctr.iconURL && !state.icon.name) {
+			state.text = ctr.text || ctr.name;
+		}
 	}
 
 	/**