From 4d7eaf450aaabcb5a841ad18938f5904b9cc92f9 Mon Sep 17 00:00:00 2001 From: Artur Kyryliuk Date: Sat, 29 Aug 2026 21:00:35 +0200 Subject: [PATCH] feat(manager): let CodeMirror editors be resized vertically Every element editor opens at CodeMirror's default 300px and stays there, which is short for a template and far too tall for a one-line chunk. .CodeMirror is already overflow: hidden (codemirror.css), which is the precondition CSS resize needs, so the affordance is one declaration. The editor then has to be told to measure again: CodeMirror draws the lines its last measurement said would fit, so without a refresh the space gained by dragging stays blank. A ResizeObserver on the wrapper does that for every instance the plugin creates. Editors created elsewhere get the handle from the same rule and are expected to refresh themselves. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01MXdDGZnGP6vGt9zTDG5o3n --- assets/plugins/codemirror/codemirror.plugin.php | 9 +++++++++ manager/media/style/default/css/custom.css | 6 ++++++ 2 files changed, 15 insertions(+) diff --git a/assets/plugins/codemirror/codemirror.plugin.php b/assets/plugins/codemirror/codemirror.plugin.php index a8d7ad7b87..4228278615 100755 --- a/assets/plugins/codemirror/codemirror.plugin.php +++ b/assets/plugins/codemirror/codemirror.plugin.php @@ -370,6 +370,15 @@ function makeMarker(symbol) { myCodeMirrors['{$el}'] = CodeMirror.fromTextArea(myTextArea, config); if (window.evoElementNameHelper) { window.evoElementNameHelper.installCodeMirror(myCodeMirrors['{$el}']); + } + // .CodeMirror is resize: vertical (custom.css), so the wrapper + // can be dragged taller. CodeMirror renders the lines its last + // measurement said would fit, so the new space stays blank + // until it is asked to measure again. + if (window.ResizeObserver) { + new ResizeObserver(function() { + myCodeMirrors['{$el}'].refresh(); + }).observe(myCodeMirrors['{$el}'].getWrapperElement()); } {$setHeight} // reset onchange tab diff --git a/manager/media/style/default/css/custom.css b/manager/media/style/default/css/custom.css index f0552fbdc9..70e2e82b8a 100644 --- a/manager/media/style/default/css/custom.css +++ b/manager/media/style/default/css/custom.css @@ -471,6 +471,12 @@ div.mce-fullscreen { margin-top:2.6rem; } .mceEditor .mceToolbar td { height: 24px; float: left } /* codeMirror */ .CodeMirror { width: 100%; margin: 0 !important; } +/* Drag the bottom edge to make any editor taller. The wrapper is already + overflow: hidden (codemirror.css), which is what lets resize apply to it. + CodeMirror only draws the lines its last measurement said would fit, so + the instance has to refresh on resize or the new space stays blank - the + CodeMirror plugin does that for the editors it creates. */ +.CodeMirror { resize: vertical; } .CodeMirror pre { word-break: break-all !important; } .CodeMirror > div:first-child > textarea { /*opacity: 0;*/ z-index: -1; left: -9999rem; }