From 00ef1700ae41e68ff0831a587bf3f09fe6c2c966 Mon Sep 17 00:00:00 2001
From: Jarrod Flesch <jarrodmflesch@gmail.com>
Date: Thu, 29 Sep 2022 11:49:25 -0400
Subject: [PATCH] fix: ajusts how disabled states are being set on anchors and
 buttons

---
 .../forms/field-types/RichText/RichText.tsx   | 33 ++++++++++++++-----
 .../forms/field-types/RichText/index.scss     |  4 +++
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/admin/components/forms/field-types/RichText/RichText.tsx b/src/admin/components/forms/field-types/RichText/RichText.tsx
index e3fed8b81d..12f18f365c 100644
--- a/src/admin/components/forms/field-types/RichText/RichText.tsx
+++ b/src/admin/components/forms/field-types/RichText/RichText.tsx
@@ -178,14 +178,28 @@ const RichText: React.FC<Props> = (props) => {
   }, [initialValue]);
 
   useEffect(() => {
-    if (loaded && readOnly) {
-      // disable interactions on all editor elements when read only
-      Array.from(editorRef.current.children).forEach((child) => {
-        const childAsElement = child as HTMLElement;
-        childAsElement.tabIndex = -1;
-        childAsElement.style.pointerEvents = 'none';
+    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) {
@@ -233,8 +247,11 @@ const RichText: React.FC<Props> = (props) => {
           }}
         >
           <div className={`${baseClass}__wrapper`}>
-            <div className={`${baseClass}__toolbar`} ref={toolbarRef}>
-              <div className={`${baseClass}__toolbar-wrap`} tabIndex={readOnly ? -1 : undefined}>
+            <div
+              className={`${baseClass}__toolbar`}
+              ref={toolbarRef}
+            >
+              <div className={`${baseClass}__toolbar-wrap`}>
                 {elements.map((element, i) => {
                   let elementName: string;
                   if (typeof element === 'object' && element?.name) elementName = element.name;
diff --git a/src/admin/components/forms/field-types/RichText/index.scss b/src/admin/components/forms/field-types/RichText/index.scss
index 01bb21ce9b..8b72848c52 100644
--- a/src/admin/components/forms/field-types/RichText/index.scss
+++ b/src/admin/components/forms/field-types/RichText/index.scss
@@ -104,6 +104,10 @@
     .rich-text__editor {
       background-color: var(--theme-elevation-150);
       padding: base(.5);
+
+      .popup button {
+        display: none;
+      }
     }
 
     .rich-text__toolbar {