fix table

Author: PierreCrb

src/components/editor/previews/TableContainerPreview.tsx

@@ -4,7 +4,6 @@ import { useDropComponent } from '~hooks/useDropComponent'
 import {
   Box,
   Table,
-  TableCaption,
   TableContainer,
   Tbody,
   Tfoot,
@@ -47,18 +46,18 @@ const acceptedTypesTable: ComponentType[] = [
 ]
 
 export const TablePreview = ({ component }: IPreviewProps) => {
-  const { props, ref } = useInteractive(component, true)
+  const { props, ref } = useInteractive(component, true, true)
   const { drop, isOver } = useDropComponent(component.id, acceptedTypesTable)
 
-  let boxProps: any = {}
+  let boxProps: any = { border: '1px solid red' }
 
   if (isOver) {
     props.bg = 'teal.50'
   }
 
   return (
-    <Box ref={drop(ref)} {...boxProps}>
-      <Table {...props}>
+    <Box ref={drop(ref)} {...props} border="1px solid green">
+      <Table {...component.props}>
         {component.children.map((key: string) => (
           <ComponentPreview key={key} componentName={key} />
         ))}
@@ -89,19 +88,21 @@ export const TheadPreview = ({ component }: IPreviewProps) => {
 const acceptedTypesTr: ComponentType[] = ['Th', 'Td']
 
 export const TrPreview = ({ component }: IPreviewProps) => {
-  const { props, ref } = useInteractive(component, true)
+  const { props, ref } = useInteractive(component, true, true)
   const { drop, isOver } = useDropComponent(component.id, acceptedTypesTr)
 
   if (isOver) {
     props.bg = 'teal.50'
   }
 
   return (
-    <Tr ref={drop(ref)} {...props}>
-      {component.children.map((key: string) => (
-        <ComponentPreview key={key} componentName={key} />
-      ))}
-    </Tr>
+    <Box ref={drop(ref)} {...props} border="1px solid green">
+      <Tr {...component.props}>
+        {component.children.map((key: string) => (
+          <ComponentPreview key={key} componentName={key} />
+        ))}
+      </Tr>
+    </Box>
   )
 }
 

src/components/inspector/panels/components/TableCaptionPanel.tsx

@@ -1,5 +1,6 @@
 import { Select } from '@chakra-ui/react'
 import { memo } from 'react'
+import ChildrenControl from '~components/inspector/controls/ChildrenControl'
 import FormControl from '~components/inspector/controls/FormControl'
 import SwitchControl from '~components/inspector/controls/SwitchControl'
 import { useForm } from '~hooks/useForm'
@@ -12,6 +13,8 @@ const TableCaptionPanel = () => {
 
   return (
     <>
+      <ChildrenControl />
+
       <FormControl label="Placement" htmlFor="placement">
         <Select
           name="placement"

src/components/inspector/panels/components/TdThPanel.tsx

@@ -1,9 +1,11 @@
 import { memo } from 'react'
+import ChildrenControl from '~components/inspector/controls/ChildrenControl'
 import SwitchControl from '~components/inspector/controls/SwitchControl'
 
 const TdThPanel = () => {
   return (
     <>
+      <ChildrenControl />
       <SwitchControl label="Is numeric" name="isNumeric" />
     </>
   )