Source code mode: When the text area is resized, the number of visibl…

…e code view lines does not dynamically adjust #1206

Issue: #1206

CHANGELOG.md

@@ -9,6 +9,39 @@
 > - :house: [Internal]
 > - :nail_care: [Polish]
 
+## 4.2.48
+
+### :bug: Bug Fix
+
+- [Source code mode: When the text area is resized, the number of visible code view lines does not dynamically adjust #1206](https://github.com/xdan/jodit/issues/1206)
+
+#### :house: Internal
+
+- Use typings for `options` in `Jodti.make(element, options)` method
+
+Before:
+
+```typescript
+class Jodit {
+	static make(element: HTMLElement | string, options?: object): Jodit {
+		//...
+	}
+}
+```
+
+After:
+
+```typescript
+class Jodit {
+	static make(
+		element: HTMLElement | string,
+		options?: DeepPartial<Config>
+	): Jodit {
+		//...
+	}
+}
+```
+
 ## 4.2.45
 
 - Fixed bug with RTL mode when all dialogs were opened without RTL mode

public/stand.html

@@ -54,6 +54,9 @@ <h1>Jodit Test Document</h1>
 			// const editor = Jodit.make('root.getElementById('edit')', {
 			const editor = Jodit.make('#editorNative', {
 				toolbarInlineForSelection: true,
+				"allowResizeX": true,
+				"height": 150,
+				"width": 500,
 				commandToHotkeys: {
 					someCustomCommand: 'shift+space'
 				},
@@ -62,8 +65,8 @@ <h1>Jodit Test Document</h1>
 						alert(111);
 					}
 				},
-				direction: 'rtl',
-				tabIndex: 0,
+				// direction: 'rtl',
+				// tabIndex: 0,
 				// shadowRoot: root,
 				// safeMode: true,
 				// disablePlugins: ['clean-html'],

src/plugins/size/size.ts

@@ -89,6 +89,8 @@ export class size extends Plugin {
 	 * Manually change height
 	 */
 	private __setHeight(height: number | string): void {
+		const { clientHeight, clientWidth } = this.j.container;
+
 		if (isNumber(height)) {
 			const { minHeight, maxHeight } = this.j.o;
 
@@ -107,13 +109,15 @@ export class size extends Plugin {
 			this.j.storage.set('height', height);
 		}
 
-		this.__resizeWorkspaceImd();
+		this.__resizeWorkspaceImd({ clientHeight, clientWidth });
 	}
 
 	/**
 	 * Manually change width
 	 */
 	private __setWidth(width: number | string): void {
+		const { clientHeight, clientWidth } = this.j.container;
+
 		if (isNumber(width)) {
 			const { minWidth, maxWidth } = this.j.o;
 
@@ -128,7 +132,7 @@ export class size extends Plugin {
 
 		css(this.j.container, 'width', width);
 
-		this.__resizeWorkspaceImd();
+		this.__resizeWorkspaceImd({ clientHeight, clientWidth });
 	}
 
 	/**
@@ -146,7 +150,15 @@ export class size extends Plugin {
 	 * Calculate workspace height
 	 */
 	@autobind
-	private __resizeWorkspaceImd(): void {
+	private __resizeWorkspaceImd(
+		{
+			clientHeight,
+			clientWidth
+		}: {
+			clientHeight: number;
+			clientWidth: number;
+		} = this.j.container
+	): void {
 		if (!this.j || this.j.isDestructed || !this.j.o || this.j.o.inline) {
 			return;
 		}
@@ -186,6 +198,16 @@ export class size extends Plugin {
 					: 'auto'
 			);
 		}
+
+		const { clientHeight: newClientHeight, clientWidth: newClientWidth } =
+			this.j.container as HTMLElement;
+
+		if (
+			clientHeight !== newClientHeight ||
+			clientWidth !== newClientWidth
+		) {
+			this.j.e.fire(this.j, 'resize');
+		}
 	}
 
 	/**

src/plugins/source/config.ts

@@ -88,7 +88,7 @@ Config.prototype.sourceEditorNativeOptions = {
 };
 
 Config.prototype.sourceEditorCDNUrlsJS = [
-	'https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ace.js'
+	'https://cdnjs.cloudflare.com/ajax/libs/ace/1.37.1/ace.js'
 ];
 
 Config.prototype.beautifyHTMLCDNUrlsJS = [

src/plugins/source/editor/engines/ace.ts

@@ -153,11 +153,16 @@ export class AceEditor
 				this.setValue(this.getValue());
 			}
 
-			const onResize = this.j.async.debounce(() => {
-				if (editor.isInDestruct) {
+			const onResize = this.j.async.throttle(() => {
+				if (
+					editor.isInDestruct ||
+					editor.getMode() === constants.MODE_WYSIWYG
+				) {
 					return;
 				}
 
+				const hasFocus = this.instance.isFocused();
+
 				if (editor.o.height !== 'auto') {
 					this.instance.setOption(
 						'maxLines',
@@ -169,9 +174,12 @@ export class AceEditor
 				}
 
 				this.instance.resize();
+				hasFocus && this.focus();
 			}, this.j.defaultTimeout * 2);
 
-			editor.e.on('afterResize afterSetMode', onResize);
+			editor.e
+				.on(editor, 'resize', onResize)
+				.on('afterResize afterSetMode', onResize);
 
 			onResize();
 
@@ -240,6 +248,7 @@ export class AceEditor
 	}
 
 	focus(): void {
+		this.instance.container.focus();
 		this.instance.focus();
 	}