Merge pull request #1168 from payloadcms/fix/read-only

Fix: read only field styles

src/admin/components/forms/field-types/RichText/RichText.tsx

@@ -70,6 +70,7 @@ const RichText: React.FC<Props> = (props) => {
   const [enabledLeaves, setEnabledLeaves] = useState({});
   const [initialValueKey, setInitialValueKey] = useState('');
   const editorRef = useRef(null);
+  const toolbarRef = useRef(null);
 
   const renderElement = useCallback(({ attributes, children, element }) => {
     const matchedElement = enabledElements[element?.type];
@@ -176,6 +177,31 @@ const RichText: React.FC<Props> = (props) => {
     setInitialValueKey(JSON.stringify(initialValue || ''));
   }, [initialValue]);
 
+  useEffect(() => {
+    function setClickableState(clickState: 'disabled' | 'enabled') {
+      const selectors = 'button, a, [role="button"]';
+      const toolbarButtons: (HTMLButtonElement | HTMLAnchorElement)[] = toolbarRef.current.querySelectorAll(selectors);
+      const editorButtons: (HTMLButtonElement | HTMLAnchorElement)[] = editorRef.current.querySelectorAll(selectors);
+
+      [...(toolbarButtons || []), ...(editorButtons || [])].forEach((child) => {
+        const isButton = child.tagName === 'BUTTON';
+        const isDisabling = clickState === 'disabled';
+        child.setAttribute('tabIndex', isDisabling ? '-1' : '0');
+        if (isButton) child.setAttribute('disabled', isDisabling ? 'disabled' : null);
+      });
+    }
+
+    if (loaded && readOnly) {
+      setClickableState('disabled');
+    }
+
+    return () => {
+      if (loaded && readOnly) {
+        setClickableState('enabled');
+      }
+    };
+  }, [loaded, readOnly]);
+
   if (!loaded) {
     return null;
   }
@@ -215,13 +241,16 @@ const RichText: React.FC<Props> = (props) => {
           editor={editor}
           value={valueToRender as any[]}
           onChange={(val) => {
-            if (val !== defaultValue && val !== value) {
+            if (!readOnly && val !== defaultValue && val !== value) {
               setValue(val);
             }
           }}
         >
           <div className={`${baseClass}__wrapper`}>
-            <div className={`${baseClass}__toolbar`}>
+            <div
+              className={`${baseClass}__toolbar`}
+              ref={toolbarRef}
+            >
               <div className={`${baseClass}__toolbar-wrap`}>
                 {elements.map((element, i) => {
                   let elementName: string;

src/admin/components/forms/field-types/RichText/index.scss

@@ -3,6 +3,7 @@
 .rich-text {
   margin-bottom: base(2);
   display: flex;
+  isolation: isolate;
 
   &__toolbar {
     @include blur-bg(var(--theme-elevation-0));
@@ -103,6 +104,29 @@
     .rich-text__editor {
       background-color: var(--theme-elevation-150);
       padding: base(.5);
+
+      .popup button {
+        display: none;
+      }
+    }
+
+    .rich-text__toolbar {
+      pointer-events: none;
+      position: relative;
+      top: 0;
+
+      &::after {
+        content: ' ';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: var(--theme-elevation-150);
+        opacity: .85;
+        z-index: 2;
+        backdrop-filter: unset;
+      }
     }
   }
 

src/admin/components/forms/field-types/Select/index.tsx

@@ -95,6 +95,7 @@ const Select: React.FC<Props> = (props) => {
       showError={showError}
       errorMessage={errorMessage}
       required={required}
+      readOnly={readOnly}
       description={description}
       style={style}
       className={className}