Text: Improve readonly mode

TangibleInc · Oct 30, 2024 · 0d95eb1 · 0d95eb1
1 parent b8e8b93
commit 0d95eb1
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 24 deletions.
diff --git a/assets/build/beaver-builder/index.min.css b/assets/build/beaver-builder/index.min.css
diff --git a/assets/build/default/index.min.css b/assets/build/default/index.min.css
diff --git a/assets/build/elementor/index.min.css b/assets/build/elementor/index.min.css
diff --git a/assets/build/index.min.js b/assets/build/index.min.js
diff --git a/assets/build/wp/index.min.css b/assets/build/wp/index.min.css
diff --git a/assets/src/codemirror/index.js b/assets/src/codemirror/index.js
@@ -7,6 +7,7 @@ import {
   placeholder
 } from '@codemirror/view'
 
+import { EditorState } from '@codemirror/state'
 import { dynamicValueRegex } from '../dynamic-values'
 
 /**
@@ -108,8 +109,10 @@ const createInput = (
 
       /**
        * Readonly mode
+       * @see https://codemirror.net/docs/ref/#state.EditorState.readOnly
        * @see https://discuss.codemirror.net/t/codemirror-6-readonly-view/2333
        */
+      EditorState.readOnly.of(config.readOnly ?? false),
       EditorView.contentAttributes.of({
         contenteditable: ! (config.readOnly ?? false)
       }),

diff --git a/assets/src/components/dynamic/text-input/index.scss b/assets/src/components/dynamic/text-input/index.scss
@@ -11,6 +11,7 @@
     border-color: rgba(black, 0.1);
     color: rgba(black, 0.4);
     background: rgba(white, 0.5);
+    pointer-events: none;
 
     .tf-dynamic-text-input__affix { 
       border-color: rgba(black, 0.1);