diff --git a/CHANGELOG.md b/CHANGELOG.md index fd826cc1f..55573a76b 100644 --- a/CHANGELOG.md +++ b/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 + ): Jodit { + //... + } +} +``` + ## 4.2.45 - Fixed bug with RTL mode when all dialogs were opened without RTL mode diff --git a/public/stand.html b/public/stand.html index d820afce7..506b04132 100644 --- a/public/stand.html +++ b/public/stand.html @@ -54,6 +54,9 @@

Jodit Test Document

// 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 @@

Jodit Test Document

alert(111); } }, - direction: 'rtl', - tabIndex: 0, + // direction: 'rtl', + // tabIndex: 0, // shadowRoot: root, // safeMode: true, // disablePlugins: ['clean-html'], diff --git a/src/plugins/size/size.ts b/src/plugins/size/size.ts index 7910a1507..2ba785d54 100644 --- a/src/plugins/size/size.ts +++ b/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'); + } } /** diff --git a/src/plugins/source/config.ts b/src/plugins/source/config.ts index 10c57de3d..21985f75f 100644 --- a/src/plugins/source/config.ts +++ b/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 = [ diff --git a/src/plugins/source/editor/engines/ace.ts b/src/plugins/source/editor/engines/ace.ts index 89a774a32..91cff83ff 100644 --- a/src/plugins/source/editor/engines/ace.ts +++ b/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(); }