From a9f2f0ec03383ef4c3ef3ba98274b0abaaf962ed Mon Sep 17 00:00:00 2001
From: James <james@trbl.design>
Date: Mon, 24 Oct 2022 12:03:06 -0400
Subject: [PATCH] fix: #1290, renders more than one rich text leaf where
 applicable

---
 .../forms/field-types/RichText/RichText.tsx   | 37 +++++++++++--------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/admin/components/forms/field-types/RichText/RichText.tsx b/src/admin/components/forms/field-types/RichText/RichText.tsx
index 12f18f365c..af6323946a 100644
--- a/src/admin/components/forms/field-types/RichText/RichText.tsx
+++ b/src/admin/components/forms/field-types/RichText/RichText.tsx
@@ -94,22 +94,27 @@ const RichText: React.FC<Props> = (props) => {
   }, [enabledElements, path, props]);
 
   const renderLeaf = useCallback(({ attributes, children, leaf }) => {
-    const matchedLeafName = Object.keys(enabledLeaves).find((leafName) => leaf[leafName]);
+    const matchedLeaves = Object.entries(enabledLeaves).filter(([leafName]) => leaf[leafName]);
 
-    if (enabledLeaves[matchedLeafName]?.Leaf) {
-      const { Leaf } = enabledLeaves[matchedLeafName];
+    if (matchedLeaves.length > 0) {
+      return matchedLeaves.reduce((result, [leafName], i) => {
+        if (enabledLeaves[leafName]?.Leaf) {
+          const Leaf = enabledLeaves[leafName]?.Leaf;
+          return (
+            <Leaf
+              key={i}
+              leaf={leaf}
+              path={path}
+              fieldProps={props}
+              editorRef={editorRef}
+            >
+              {result}
+            </Leaf>
+          );
+        }
 
-      return (
-        <Leaf
-          attributes={attributes}
-          leaf={leaf}
-          path={path}
-          fieldProps={props}
-          editorRef={editorRef}
-        >
-          {children}
-        </Leaf>
-      );
+        return result;
+      }, <span {...attributes}>{children}</span>);
     }
 
     return (
@@ -180,8 +185,8 @@ const RichText: React.FC<Props> = (props) => {
   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);
+      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';