fix: Fixed readOnly mode in text mode when the whole editor is in a readOnly mode

Author: Vojtěch Václav Porteš

src/builder/builder.test.tsx

@@ -411,6 +411,41 @@ describe('#components/Builder', () => {
     ).toBeGreaterThan(0);
   });
 
+  it('Protects the full text editor range when the Builder is read-only', () => {
+    const { container } = render(
+      <Builder
+        fields={fields}
+        data={[
+          {
+            type: 'GROUP',
+            value: 'AND',
+            isNegated: false,
+            children: [
+              { field: 'MOCK_FIELD', value: 'alpha', operator: 'EQUAL' },
+              { field: 'MOCK_NUMBER', value: 2, operator: 'EQUAL' },
+            ],
+          },
+        ]}
+        textMode
+        defaultMode="text"
+        readOnly
+        components={{
+          ...defaultComponents,
+          TextModeEditor: CustomTextModeEditor,
+        }}
+        onChange={jest.fn()}
+      />
+    );
+
+    expect(queryByDataTest(container, 'CustomTextModeEditor')).not.toBeNull();
+    expect(getByDataTest(container, 'CustomTextModeEditorInput')).toHaveValue(
+      "(MOCK_FIELD = 'alpha' AND MOCK_NUMBER = 2)"
+    );
+    expect(getByDataTest(container, 'CustomTextModeEditorProtectedRangeCount')).toHaveTextContent(
+      '1'
+    );
+  });
+
   it('Preserves locked rules after valid text edits in a custom TextModeEditor', async () => {
     const onChange = jest.fn();
     const { container } = render(

src/builder/builder.tsx

@@ -589,30 +589,38 @@ export const Builder = forwardRef<IBuilderRef, IBuilderProps>(({
 
   const content =
     textModeEnabled && mode === 'text' ? (
-      TextModeEditorComponent === defaultComponents.TextModeEditor ? (
-        <DefaultTextModeEditor
-          value={textValue}
-          diagnostics={textDiagnostics}
-          protectedRanges={textProtectedRanges}
-          protectedRangeHoverMessage={strings.textMode?.lockedRangesHover || null}
-          errorMessage={textErrorMessage}
-          TextModeInputComponent={TextModeInputComponent}
-          readOnly={readOnly}
-          allowProtectedRangeDeletion={!readOnlyProtectsDelete}
-          onChange={handleTextChange}
-        />
-      ) : (
-        <TextModeEditorComponent
-          value={textValue}
-          diagnostics={textDiagnostics}
-          protectedRanges={textProtectedRanges}
-          protectedRangeHoverMessage={strings.textMode?.lockedRangesHover || null}
-          errorMessage={textErrorMessage}
-          readOnly={readOnly}
-          allowProtectedRangeDeletion={!readOnlyProtectsDelete}
-          onChange={handleTextChange}
-        />
-      )
+      (() => {
+        const textModeProtectedRanges = readOnly
+          ? textValue.length > 0
+            ? [{ start: 0, end: textValue.length }]
+            : []
+          : textProtectedRanges;
+
+        return TextModeEditorComponent === defaultComponents.TextModeEditor ? (
+          <DefaultTextModeEditor
+            value={textValue}
+            diagnostics={textDiagnostics}
+            protectedRanges={textModeProtectedRanges}
+            protectedRangeHoverMessage={strings.textMode?.lockedRangesHover || null}
+            errorMessage={textErrorMessage}
+            TextModeInputComponent={TextModeInputComponent}
+            readOnly={readOnly}
+            allowProtectedRangeDeletion={!readOnlyProtectsDelete}
+            onChange={handleTextChange}
+          />
+        ) : (
+          <TextModeEditorComponent
+            value={textValue}
+            diagnostics={textDiagnostics}
+            protectedRanges={textModeProtectedRanges}
+            protectedRangeHoverMessage={strings.textMode?.lockedRangesHover || null}
+            errorMessage={textErrorMessage}
+            readOnly={readOnly}
+            allowProtectedRangeDeletion={!readOnlyProtectsDelete}
+            onChange={handleTextChange}
+          />
+        );
+      })()
     ) : (
       builderContent
     );