chore: more specific variable names

Author: condorheroblog

docs/guide/toolbar.md

@@ -25,8 +25,8 @@ Bold.configure({
 ```jsx
 <RichTextEditor
   toolbar={{
-    render: (props, dom, domContent, containerDom) => {
-      return containerDom(domContent)
+    render: (props, toolbarItems, dom, containerDom) => {
+      return containerDom(dom)
     }
   }}
 />
@@ -50,6 +50,6 @@ export interface ToolbarRenderProps {
   disabled: boolean
 }
 export interface ToolbarProps {
-  render?: (props: ToolbarRenderProps, dom: ToolbarItemProps[], domContent: React.ReactNode, containerDom: (innerContent: React.ReactNode) => React.ReactNode) => React.ReactNode
+  render?: (props: ToolbarRenderProps, toolbarItems: ToolbarItemProps[], dom: JSX.Element[], containerDom: (innerContent: React.ReactNode) => React.ReactNode) => React.ReactNode
 }
 ```

src/components/Toolbar.tsx

@@ -15,7 +15,7 @@ export interface ToolbarComponentProps {
 function Toolbar({ editor, disabled, toolbar }: ToolbarComponentProps) {
   const { t, lang } = useLocale()
 
-  const items = useMemo(() => {
+  const toolbarItems = useMemo(() => {
     const extensions = [...editor.extensionManager.extensions]
     const sortExtensions = extensions.sort((arr, acc) => {
       const a = (arr.options).sort ?? -1
@@ -81,7 +81,7 @@ function Toolbar({ editor, disabled, toolbar }: ToolbarComponentProps) {
     )
   }
 
-  const domContent = items.map((item: ToolbarItemProps, key) => {
+  const dom = toolbarItems.map((item: ToolbarItemProps, key) => {
     const ButtonComponent = item.button.component
 
     return (
@@ -99,10 +99,10 @@ function Toolbar({ editor, disabled, toolbar }: ToolbarComponentProps) {
   })
 
   if (toolbar && toolbar?.render) {
-    return toolbar.render({ editor, disabled: disabled || false }, items, domContent, containerDom)
+    return toolbar.render({ editor, disabled: disabled || false }, toolbarItems, dom, containerDom)
   }
 
-  return containerDom(domContent)
+  return containerDom(dom)
 }
 
 export { Toolbar }

src/types.ts

@@ -235,7 +235,7 @@ export interface ToolbarRenderProps {
   disabled: boolean
 }
 export interface ToolbarProps {
-  render?: (props: ToolbarRenderProps, dom: ToolbarItemProps[], domContent: React.ReactNode, containerDom: (innerContent: React.ReactNode) => React.ReactNode) => React.ReactNode
+  render?: (props: ToolbarRenderProps, toolbarItems: ToolbarItemProps[], dom: JSX.Element[], containerDom: (innerContent: React.ReactNode) => React.ReactNode) => React.ReactNode
 }
 
 export interface NameValueOption<T = string> {