chore: renders client leaves

packages/richtext-slate/src/field/RichText.tsx

@@ -13,25 +13,15 @@ import { withHistory } from 'slate-history'
 import { Editable, Slate, withReact } from 'slate-react'
 
 import type { FormFieldBase } from '../../../ui/src/forms/fields/shared'
-import type {
-  ElementNode,
-  RichTextCustomLeaf,
-  RichTextElement,
-  RichTextLeaf,
-  TextNode,
-} from '../types'
+import type { ElementNode, RichTextElement, RichTextLeaf, TextNode } from '../types'
 
 import { withCondition } from '../../../ui/src/forms/withCondition'
 import { defaultRichTextValue } from '../data/defaultValue'
 import { richTextValidate } from '../data/validation'
-import elementTypes from './elements'
 import listTypes from './elements/listTypes'
-import enablePlugins from './enablePlugins'
 import hotkeys from './hotkeys'
 import './index.scss'
-import leafTypes from './leaves'
 import toggleLeaf from './leaves/toggle'
-import mergeCustomFunctions from './mergeCustomFunctions'
 import withEnterBreakOut from './plugins/withEnterBreakOut'
 import withHTML from './plugins/withHTML'
 import { LeafButtonProvider } from './providers/LeafButtonProvider'
@@ -96,8 +86,9 @@ const RichText: React.FC<
     > = {}
 
     for (const [key, value] of richTextComponentMap) {
-      if (key.startsWith('leaf.button') || key.startsWith('leaf.component')) {
-        const leafName = key.replace('leaf.button', '').replace('leaf.component', '')
+      if (key.startsWith('leaf.button.') || key.startsWith('leaf.component.')) {
+        const leafName = key.replace('leaf.button.', '').replace('leaf.component.', '')
+
         if (!enabledLeaves[leafName]) {
           enabledLeaves[leafName] = {
             name: leafName,
@@ -106,8 +97,8 @@ const RichText: React.FC<
           }
         }
 
-        if (key.startsWith('leaf.button')) enabledLeaves[leafName].Button = value
-        if (key.startsWith('leaf.component')) enabledLeaves[leafName].Leaf = value
+        if (key.startsWith('leaf.button.')) enabledLeaves[leafName].Button = value
+        if (key.startsWith('leaf.component.')) enabledLeaves[leafName].Leaf = value
       }
     }
 
@@ -200,7 +191,7 @@ const RichText: React.FC<
   const renderLeaf = useCallback(
     ({ attributes, children, leaf }) => {
       const matchedLeaves = Object.entries(leaves).filter(([leafName]) => leaf[leafName])
-      console.log(matchedLeaves, leaf)
+
       if (matchedLeaves.length > 0) {
         return matchedLeaves.reduce(
           (result, [, leafConfig], i) => {
@@ -231,7 +222,7 @@ const RichText: React.FC<
 
       return <span {...attributes}>{children}</span>
     },
-    [path, props, schemaPath, richTextComponentMap],
+    [path, props, schemaPath, leaves],
   )
 
   const classes = [

packages/richtext-slate/src/field/leaves/bold/Bold/index.tsx

@@ -0,0 +1,9 @@
+'use client'
+import React from 'react'
+
+import { useLeaf } from '../../../providers/LeafProvider'
+
+export const Bold = () => {
+  const { attributes, children } = useLeaf()
+  return <strong {...attributes}>{children}</strong>
+}

packages/richtext-slate/src/field/leaves/bold/index.tsx

@@ -3,13 +3,8 @@ import React from 'react'
 import type { RichTextCustomLeaf } from '../../..'
 
 import BoldIcon from '../../icons/Bold'
-import { useLeaf } from '../../providers/LeafProvider'
 import LeafButton from '../Button'
-
-const Bold = () => {
-  const { attributes, children } = useLeaf()
-  return <strong {...attributes}>{children}</strong>
-}
+import { Bold } from './Bold'
 
 const bold: RichTextCustomLeaf = {
   name: 'bold',

packages/richtext-slate/src/field/leaves/code/Code/index.tsx

@@ -0,0 +1,9 @@
+'use client'
+import React from 'react'
+
+import { useLeaf } from '../../../providers/LeafProvider'
+
+export const Code = () => {
+  const { attributes, children } = useLeaf()
+  return <code {...attributes}>{children}</code>
+}

packages/richtext-slate/src/field/leaves/code/index.tsx

@@ -3,13 +3,8 @@ import React from 'react'
 import type { RichTextCustomLeaf } from '../../..'
 
 import CodeIcon from '../../icons/Code'
-import { useLeaf } from '../../providers/LeafProvider'
 import LeafButton from '../Button'
-
-const Code = () => {
-  const { attributes, children } = useLeaf()
-  return <code {...attributes}>{children}</code>
-}
+import { Code } from './Code'
 
 const code: RichTextCustomLeaf = {
   name: 'code',

packages/richtext-slate/src/field/leaves/italic/Italic/index.tsx

@@ -0,0 +1,9 @@
+'use client'
+import React from 'react'
+
+import { useLeaf } from '../../../providers/LeafProvider'
+
+export const Italic = () => {
+  const { attributes, children } = useLeaf()
+  return <em {...attributes}>{children}</em>
+}

packages/richtext-slate/src/field/leaves/italic/index.tsx

@@ -3,13 +3,8 @@ import React from 'react'
 import type { RichTextCustomLeaf } from '../../..'
 
 import ItalicIcon from '../../icons/Italic'
-import { useLeaf } from '../../providers/LeafProvider'
 import LeafButton from '../Button'
-
-const Italic = () => {
-  const { attributes, children } = useLeaf()
-  return <em {...attributes}>{children}</em>
-}
+import { Italic } from './Italic'
 
 const italic: RichTextCustomLeaf = {
   name: 'italic',

packages/richtext-slate/src/field/leaves/strikethrough/Strikethrough/index.tsx

@@ -0,0 +1,9 @@
+'use client'
+import React from 'react'
+
+import { useLeaf } from '../../../providers/LeafProvider'
+
+export const Strikethrough = () => {
+  const { attributes, children } = useLeaf()
+  return <del {...attributes}>{children}</del>
+}

packages/richtext-slate/src/field/leaves/strikethrough/index.tsx

@@ -1,16 +1,10 @@
-'use client'
 import React from 'react'
 
 import type { RichTextCustomLeaf } from '../../..'
 
 import StrikethroughIcon from '../../icons/Strikethrough'
-import { useLeaf } from '../../providers/LeafProvider'
 import LeafButton from '../Button'
-
-const Strikethrough = () => {
-  const { attributes, children } = useLeaf()
-  return <del {...attributes}>{children}</del>
-}
+import { Strikethrough } from './Strikethrough'
 
 const strikethrough: RichTextCustomLeaf = {
   name: 'strikethrough',

packages/richtext-slate/src/field/leaves/underline/Underline/index.tsx

@@ -0,0 +1,9 @@
+'use client'
+import React from 'react'
+
+import { useLeaf } from '../../../providers/LeafProvider'
+
+export const Underline = () => {
+  const { attributes, children } = useLeaf()
+  return <u {...attributes}>{children}</u>
+}

packages/richtext-slate/src/field/leaves/underline/index.tsx

@@ -3,13 +3,8 @@ import React from 'react'
 import type { RichTextCustomLeaf } from '../../..'
 
 import UnderlineIcon from '../../icons/Underline'
-import { useLeaf } from '../../providers/LeafProvider'
 import LeafButton from '../Button'
-
-const Underline = () => {
-  const { attributes, children } = useLeaf()
-  return <u {...attributes}>{children}</u>
-}
+import { Underline } from './Underline'
 
 const underline: RichTextCustomLeaf = {
   name: 'underline',

packages/richtext-slate/tsconfig.json

@@ -20,6 +20,12 @@
     "src/**/*.spec.ts",
     "src/**/*.spec.tsx"
   ],
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts", "src/**/*.json"],
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.d.ts",
+    "src/**/*.json",
+    "src/field/leaves/italic/Italic"
+  ],
   "references": [{ "path": "../payload" }] // db-mongodb depends on payload
 }