From 2d3356ad1c46fcf813a91b9e9850a0a16b0e3e3d Mon Sep 17 00:00:00 2001
From: robinvandermolen <robin@maykinmedia.nl>
Date: Tue, 22 Oct 2024 16:37:25 +0200
Subject: [PATCH] :sparkles: [#4707] Resizable json widget

---
 .../js/components/admin/forms/JsonWidget.js   |  5 ++--
 .../scss/components/admin/_json-editor.scss   | 20 ++++++++--------
 .../scss/components/admin/_json-widget.scss   | 23 +++++++++++++++++++
 3 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/src/openforms/js/components/admin/forms/JsonWidget.js b/src/openforms/js/components/admin/forms/JsonWidget.js
index c57a2758e5..a3d59687a1 100644
--- a/src/openforms/js/components/admin/forms/JsonWidget.js
+++ b/src/openforms/js/components/admin/forms/JsonWidget.js
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import jsonLogic from 'json-logic-js';
 import {isEqual} from 'lodash';
 import PropTypes from 'prop-types';
-import React, {useEffect, useRef, useState} from 'react';
+import {useEffect, useRef, useState} from 'react';
 import {useIntl} from 'react-intl';
 import {useGlobalState} from 'state-pool';
 
@@ -79,7 +79,7 @@ const JsonWidget = ({
     >
       {isExpanded && (
         <div
-          className="json-widget__input"
+          className="json-widget__input json-widget__input--resizable"
           style={{
             '--of-json-widget-cols': cols,
             '--of-json-widget-rows': Math.min(maxRows, Math.max(MIN_LINES, numRows)),
@@ -90,6 +90,7 @@ const JsonWidget = ({
             onChange={onJsonChange}
             lineCountCallback={(numLines = 1) => setNumRows(numLines)}
             theme={theme}
+            automaticLayout={true}
           />
         </div>
       )}
diff --git a/src/openforms/scss/components/admin/_json-editor.scss b/src/openforms/scss/components/admin/_json-editor.scss
index cd36f6e97b..6a097525ab 100644
--- a/src/openforms/scss/components/admin/_json-editor.scss
+++ b/src/openforms/scss/components/admin/_json-editor.scss
@@ -1,3 +1,13 @@
+$json_editor_min_inline_size: var(
+  --of-json-widget-min-inline-size,
+  // assume monospace font, multiply the width of one char times the number of cols requested
+  // and add the space for the editor margin
+  calc(
+      var(--of-json-widget-cols, 10) * var(--of-json-widget-char-size, 8.44px) +
+        var(--of-json-widget-margin-inline-size, 68px)
+    )
+);
+
 // Set up height/width based on the number of requested rows/cols.
 // You can customize this per instance by providing an inline style attribute for
 // the rows/cols.
@@ -6,15 +16,7 @@
   flex-direction: column;
 
   block-size: calc(var(--of-json-widget-rows, 3) * var(--_of-json-widget-row-block-size, 19px));
-  min-inline-size: var(
-    --of-json-widget-min-inline-size,
-    // assume monospace font, multiply the width of one char times the number of cols requested
-    // and add the space for the editor margin
-    calc(
-        var(--of-json-widget-cols, 10) * var(--of-json-widget-char-size, 8.44px) +
-          var(--of-json-widget-margin-inline-size, 68px)
-      )
-  );
+  min-inline-size: $json_editor_min_inline_size;
   max-inline-size: var(--of-json-widget-max-inline-size, var(--of-admin-input-field-size));
 
   border: 1px solid var(--border-color);
diff --git a/src/openforms/scss/components/admin/_json-widget.scss b/src/openforms/scss/components/admin/_json-widget.scss
index 99cf1b8be1..ad99a78d35 100644
--- a/src/openforms/scss/components/admin/_json-widget.scss
+++ b/src/openforms/scss/components/admin/_json-widget.scss
@@ -6,6 +6,29 @@
 .json-widget {
   @include bem.element('input') {
     @include json-editor.container;
+
+    @include bem.modifier('resizable') {
+      position: relative;
+      resize: both;
+      overflow: auto;
+      padding-block-end: 0.8em;
+      inline-size: json-editor.$json_editor_min_inline_size;
+      max-inline-size: unset;
+      z-index: 0;
+
+      // Purely to give the resize handle some space from the input
+      &::after {
+        position: absolute;
+        content: '';
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 0.8em;
+        border-block-start: 1px solid var(--border-color);
+        background-color: var(--form-input-bg);
+        z-index: 1;
+      }
+    }
   }
 
   @include bem.modifier('collapsed') {