diff --git a/src/components/editor/previews/TableContainerPreview.tsx b/src/components/editor/previews/TableContainerPreview.tsx index 2d4aab150d..ad93cc6488 100644 --- a/src/components/editor/previews/TableContainerPreview.tsx +++ b/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 ( - - + +
{component.children.map((key: string) => ( ))} @@ -89,7 +88,7 @@ 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) { @@ -97,11 +96,13 @@ export const TrPreview = ({ component }: IPreviewProps) => { } return ( - - {component.children.map((key: string) => ( - - ))} - + + + {component.children.map((key: string) => ( + + ))} + + ) } diff --git a/src/components/inspector/panels/components/TableCaptionPanel.tsx b/src/components/inspector/panels/components/TableCaptionPanel.tsx index 31d330e20c..9c18595ef6 100644 --- a/src/components/inspector/panels/components/TableCaptionPanel.tsx +++ b/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 ( <> + +