From 9ae585d23c3d229fd0a974e8a61e325746a6d7d2 Mon Sep 17 00:00:00 2001
From: Alessio Gravili <alessio@gravili.de>
Date: Tue, 10 Oct 2023 19:22:08 +0200
Subject: [PATCH] fix: Slate toolbar rendered even if it has no elements and
 leaves

---
 .../richtext-slate/src/field/RichText.tsx     | 62 ++++++++++---------
 1 file changed, 32 insertions(+), 30 deletions(-)

diff --git a/packages/richtext-slate/src/field/RichText.tsx b/packages/richtext-slate/src/field/RichText.tsx
index 673f52639..63f3fa849 100644
--- a/packages/richtext-slate/src/field/RichText.tsx
+++ b/packages/richtext-slate/src/field/RichText.tsx
@@ -329,43 +329,45 @@ const RichText: React.FC<FieldProps> = (props) => {
           value={valueToRender as any[]}
         >
           <div className={`${baseClass}__wrapper`}>
-            <div
-              className={[`${baseClass}__toolbar`, drawerIsOpen && `${baseClass}__drawerIsOpen`]
-                .filter(Boolean)
-                .join(' ')}
-              ref={toolbarRef}
-            >
-              <div className={`${baseClass}__toolbar-wrap`}>
-                {elements.map((element, i) => {
-                  let elementName: string
-                  if (typeof element === 'object' && element?.name) elementName = element.name
-                  if (typeof element === 'string') elementName = element
+            {elements?.length + leaves?.length > 0 && (
+              <div
+                className={[`${baseClass}__toolbar`, drawerIsOpen && `${baseClass}__drawerIsOpen`]
+                  .filter(Boolean)
+                  .join(' ')}
+                ref={toolbarRef}
+              >
+                <div className={`${baseClass}__toolbar-wrap`}>
+                  {elements.map((element, i) => {
+                    let elementName: string
+                    if (typeof element === 'object' && element?.name) elementName = element.name
+                    if (typeof element === 'string') elementName = element
 
-                  const elementType = enabledElements[elementName]
-                  const Button = elementType?.Button
+                    const elementType = enabledElements[elementName]
+                    const Button = elementType?.Button
 
-                  if (Button) {
-                    return <Button fieldProps={props} key={i} path={path} />
-                  }
+                    if (Button) {
+                      return <Button fieldProps={props} key={i} path={path} />
+                    }
 
-                  return null
-                })}
-                {leaves.map((leaf, i) => {
-                  let leafName: string
-                  if (typeof leaf === 'object' && leaf?.name) leafName = leaf.name
-                  if (typeof leaf === 'string') leafName = leaf
+                    return null
+                  })}
+                  {leaves.map((leaf, i) => {
+                    let leafName: string
+                    if (typeof leaf === 'object' && leaf?.name) leafName = leaf.name
+                    if (typeof leaf === 'string') leafName = leaf
 
-                  const leafType = enabledLeaves[leafName]
-                  const Button = leafType?.Button
+                    const leafType = enabledLeaves[leafName]
+                    const Button = leafType?.Button
 
-                  if (Button) {
-                    return <Button fieldProps={props} key={i} path={path} />
-                  }
+                    if (Button) {
+                      return <Button fieldProps={props} key={i} path={path} />
+                    }
 
-                  return null
-                })}
+                    return null
+                  })}
+                </div>
               </div>
-            </div>
+            )}
             <div className={`${baseClass}__editor`} ref={editorRef}>
               <Editable
                 className={`${baseClass}__input`}