From d2b49084b082f0aa28ca6969884b88acb2c63b96 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Fri, 25 Mar 2022 11:13:04 +0000 Subject: [PATCH] Added pre-render sizes to wysiwyg code blocks Sets sizes on WYSIWYG code block sections based on content lines as an early pre-codemirror height prediction to avoid excessive jumping in the editor. For #3326 --- resources/js/wysiwyg/plugin-codeeditor.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/resources/js/wysiwyg/plugin-codeeditor.js b/resources/js/wysiwyg/plugin-codeeditor.js index b0640a450..82ab7d3c8 100644 --- a/resources/js/wysiwyg/plugin-codeeditor.js +++ b/resources/js/wysiwyg/plugin-codeeditor.js @@ -97,11 +97,18 @@ function defineCodeBlockCustomElement(editor) { } this.cleanChildContent(); + const content = this.getContent(); + const lines = content.split('\n').length; + const height = (lines * 19.2) + 18 + 24; + this.style.height = `${height}px`; const container = this.shadowRoot.querySelector('.CodeMirrorContainer'); const renderCodeMirror = (Code) => { - this.cm = Code.wysiwygView(container, this.getContent(), this.getLanguage()); + this.cm = Code.wysiwygView(container, content, this.getLanguage()); Code.updateLayout(this.cm); + setTimeout(() => { + this.style.height = null; + }, 1); }; window.importVersioned('code').then((Code) => {