| 1 |
import { useEffect } from "react"; |
| 2 |
import { RichText } from "@wordpress/block-editor"; |
| 3 |
import { __ } from "@wordpress/i18n"; |
| 4 |
import { useTableStore } from "../../store"; |
| 5 |
|
| 6 |
interface TableCaptionProps { |
| 7 |
isSelected: boolean; |
| 8 |
} |
| 9 |
|
| 10 |
export function TableCaption({ isSelected }: TableCaptionProps) { |
| 11 |
const caption = useTableStore(state => state.table.caption || ""); |
| 12 |
const updateTable = useTableStore(state => state.updateTable); |
| 13 |
const showCaption = useTableStore(state => state.showCaption); |
| 14 |
const setShowCaption = useTableStore(state => state.setShowCaption); |
| 15 |
|
| 16 |
useEffect(() => { |
| 17 |
if (caption.trim() !== "" && !showCaption) { |
| 18 |
setShowCaption(true); |
| 19 |
} |
| 20 |
}, [caption, showCaption, setShowCaption]); |
| 21 |
|
| 22 |
useEffect(() => { |
| 23 |
if (!isSelected && caption.trim() === "" && showCaption) { |
| 24 |
setShowCaption(false); |
| 25 |
} |
| 26 |
}, [isSelected, caption, setShowCaption, showCaption]); |
| 27 |
|
| 28 |
if (!showCaption && caption.trim() === "") { |
| 29 |
return null; |
| 30 |
} |
| 31 |
|
| 32 |
return ( |
| 33 |
<RichText |
| 34 |
tagName="figcaption" |
| 35 |
className="tableberg-table-caption wp-element-caption" |
| 36 |
aria-label={__("Table caption text", "tableberg")} |
| 37 |
placeholder={__("Add caption", "tableberg")} |
| 38 |
value={caption} |
| 39 |
onChange={(value: string) => { |
| 40 |
updateTable({ caption: value }); |
| 41 |
}} |
| 42 |
/> |
| 43 |
); |
| 44 |
} |
| 45 |
|
