| @@ -1,222 +1,14 @@ | ||
| 1 | +/// <reference path="../typings/globals.d.ts" /> | |
| 2 | +/// <reference path="../typings/png.d.ts" /> | |
| 3 | +/// <reference path="../typings/wordpress__block-editor.d.ts" /> | |
| 4 | +/// <reference path="../typings/wordpress__data.d.ts" /> | |
| 1 | 5 | /** |
| 2 | - * WordPress Imports | |
| 3 | - */ | |
| 4 | -//@ts-ignore | |
| 5 | -import { useEffect } from "@wordpress/element"; | |
| 6 | -import { Placeholder, TextControl, Button } from "@wordpress/components"; | |
| 7 | -import { blockTable } from "@wordpress/icons"; | |
| 8 | -import { useDispatch, useSelect } from "@wordpress/data"; | |
| 9 | -import { | |
| 10 | - useBlockProps, | |
| 11 | - useInnerBlocksProps, | |
| 12 | - store as blockEditorStore, | |
| 13 | - BlockIcon, | |
| 14 | -} from "@wordpress/block-editor"; | |
| 15 | -import { | |
| 16 | - BlockEditProps, | |
| 17 | - InnerBlockTemplate, | |
| 18 | - // @ts-ignore | |
| 19 | - createBlocksFromInnerBlocksTemplate, | |
| 20 | - registerBlockType, | |
| 21 | -} from "@wordpress/blocks"; | |
| 22 | -/** | |
| 23 | 6 | * Internal Imports |
| 24 | 7 | */ |
| 25 | 8 | import "./style.scss"; |
| 26 | -import metadata from "./block.json"; | |
| 27 | -import { FormEvent, useState } from "react"; | |
| 28 | -import Inspector from "./inspector"; | |
| 29 | -import { TablebergBlockAttrs } from "./types"; | |
| 30 | -import { getStyles } from "./get-styles"; | |
| 31 | -import classNames from "classnames"; | |
| 32 | -import { getStyleClass } from "./get-classes"; | |
| 9 | +import "./editor.scss"; | |
| 10 | +import "./pro-host-api"; | |
| 33 | 11 | |
| 34 | -const ALLOWED_BLOCKS = ["tableberg/row"]; | |
| 12 | +import { registerNativeBlocks } from "./blocks"; | |
| 35 | 13 | |
| 36 | -function edit(props: BlockEditProps<TablebergBlockAttrs>) { | |
| 37 | - const { | |
| 38 | - attributes: { | |
| 39 | - hasTableCreated, | |
| 40 | - enableTableFooter, | |
| 41 | - enableTableHeader, | |
| 42 | - cols, | |
| 43 | - }, | |
| 44 | - setAttributes, | |
| 45 | - clientId, | |
| 46 | - } = props; | |
| 47 | - | |
| 48 | - const blockProps = useBlockProps({ | |
| 49 | - className: classNames(getStyleClass(props.attributes)), | |
| 50 | - style: getStyles(props.attributes), | |
| 51 | - }); | |
| 52 | - | |
| 53 | - // @ts-ignore | |
| 54 | - const innerBlocksProps = useInnerBlocksProps(blockProps, { | |
| 55 | - // @ts-ignore false can obviously be assigned to renderAppender as does wordpress in their own blocks. Need to make a pr to @types/wordpress__block-editor. | |
| 56 | - renderAppender: false, | |
| 57 | - allowedBlocks: ALLOWED_BLOCKS, | |
| 58 | - }); | |
| 59 | - | |
| 60 | - //@ts-ignore | |
| 61 | - const { block } = useSelect((select) => { | |
| 62 | - return { | |
| 63 | - //@ts-ignore | |
| 64 | - block: select(blockEditorStore).getBlock(clientId), | |
| 65 | - }; | |
| 66 | - }); | |
| 67 | - | |
| 68 | - const { replaceInnerBlocks, insertBlocks, removeBlock } = | |
| 69 | - useDispatch(blockEditorStore); | |
| 70 | - | |
| 71 | - const [initialRowCount, setInitialRowCount] = useState<number | "">(2); | |
| 72 | - const [initialColCount, setInitialColCount] = useState<number | "">(2); | |
| 73 | - | |
| 74 | - useEffect(() => { | |
| 75 | - if (enableTableHeader) { | |
| 76 | - const tableHeaderTemplate = [ | |
| 77 | - [ | |
| 78 | - "tableberg/row", | |
| 79 | - { isHeader: true }, | |
| 80 | - new Array(initialColCount) | |
| 81 | - .fill(0) | |
| 82 | - .map(() => ["tableberg/cell", { tagName: "th" }, []]), | |
| 83 | - ], | |
| 84 | - ]; | |
| 85 | - insertBlocks( | |
| 86 | - createBlocksFromInnerBlocksTemplate(tableHeaderTemplate), | |
| 87 | - 0, | |
| 88 | - clientId | |
| 89 | - ); | |
| 90 | - } else { | |
| 91 | - const firstBlock = block.innerBlocks[0]; | |
| 92 | - const isHeader = firstBlock?.attributes?.isHeader; | |
| 93 | - | |
| 94 | - if (isHeader) { | |
| 95 | - removeBlock(firstBlock.clientId); | |
| 96 | - } | |
| 97 | - } | |
| 98 | - }, [enableTableHeader]); | |
| 99 | - useEffect(() => { | |
| 100 | - if (enableTableFooter) { | |
| 101 | - const tableHeaderTemplate = [ | |
| 102 | - [ | |
| 103 | - "tableberg/row", | |
| 104 | - { isFooter: true }, | |
| 105 | - new Array(initialColCount) | |
| 106 | - .fill(0) | |
| 107 | - .map(() => ["tableberg/cell", { tagName: "th" }, []]), | |
| 108 | - ], | |
| 109 | - ]; | |
| 110 | - insertBlocks( | |
| 111 | - createBlocksFromInnerBlocksTemplate(tableHeaderTemplate), | |
| 112 | - block?.innerBlocks?.length + 1, | |
| 113 | - clientId | |
| 114 | - ); | |
| 115 | - } else { | |
| 116 | - const firstBlock = block.innerBlocks[0]; | |
| 117 | - const isHeader = firstBlock?.attributes?.isHeader; | |
| 118 | - | |
| 119 | - if (isHeader) { | |
| 120 | - removeBlock(firstBlock.clientId); | |
| 121 | - } | |
| 122 | - } | |
| 123 | - }, [enableTableFooter]); | |
| 124 | - | |
| 125 | - function onCreateTable(event: FormEvent) { | |
| 126 | - event.preventDefault(); | |
| 127 | - | |
| 128 | - if (initialRowCount === "" || initialColCount === "") return; | |
| 129 | - | |
| 130 | - const initialInnerBlocks: InnerBlockTemplate[] = Array.from( | |
| 131 | - { length: initialRowCount }, | |
| 132 | - () => [ | |
| 133 | - "tableberg/row", | |
| 134 | - {}, | |
| 135 | - Array.from({ length: initialColCount }, () => [ | |
| 136 | - "tableberg/cell", | |
| 137 | - ]), | |
| 138 | - ] | |
| 139 | - ); | |
| 140 | - | |
| 141 | - replaceInnerBlocks( | |
| 142 | - clientId, | |
| 143 | - createBlocksFromInnerBlocksTemplate(initialInnerBlocks) | |
| 144 | - ); | |
| 145 | - setAttributes({ | |
| 146 | - hasTableCreated: true, | |
| 147 | - rows: initialColCount, | |
| 148 | - cols: initialColCount, | |
| 149 | - }); | |
| 150 | - } | |
| 151 | - | |
| 152 | - function onChangeInitialColCount(count: string) { | |
| 153 | - const value = count === "" ? "" : parseInt(count, 10) || 2; | |
| 154 | - setInitialColCount(value); | |
| 155 | - } | |
| 156 | - | |
| 157 | - function onChangeInitialRowCount(count: string) { | |
| 158 | - const value = count === "" ? "" : parseInt(count, 10) || 2; | |
| 159 | - setInitialRowCount(value); | |
| 160 | - } | |
| 161 | - | |
| 162 | - const placeholder = ( | |
| 163 | - <Placeholder | |
| 164 | - label={"Create Tableberg Table"} | |
| 165 | - icon={<BlockIcon icon={blockTable} showColors />} | |
| 166 | - instructions={"Create a complex table with all types of element"} | |
| 167 | - > | |
| 168 | - <form | |
| 169 | - className="blocks-table__placeholder-form" | |
| 170 | - onSubmit={onCreateTable} | |
| 171 | - > | |
| 172 | - <TextControl | |
| 173 | - __nextHasNoMarginBottom | |
| 174 | - type="number" | |
| 175 | - label={"Column count"} | |
| 176 | - value={initialColCount} | |
| 177 | - onChange={onChangeInitialColCount} | |
| 178 | - min="1" | |
| 179 | - className="blocks-table__placeholder-input" | |
| 180 | - /> | |
| 181 | - <TextControl | |
| 182 | - __nextHasNoMarginBottom | |
| 183 | - type="number" | |
| 184 | - label={"Row count"} | |
| 185 | - value={initialRowCount} | |
| 186 | - onChange={onChangeInitialRowCount} | |
| 187 | - min="1" | |
| 188 | - className="blocks-table__placeholder-input" | |
| 189 | - /> | |
| 190 | - <Button | |
| 191 | - className="blocks-table__placeholder-button" | |
| 192 | - variant="primary" | |
| 193 | - type="submit" | |
| 194 | - > | |
| 195 | - {"Create Table"} | |
| 196 | - </Button> | |
| 197 | - </form> | |
| 198 | - </Placeholder> | |
| 199 | - ); | |
| 200 | - | |
| 201 | - return ( | |
| 202 | - <> | |
| 203 | - {hasTableCreated ? <table {...innerBlocksProps} /> : placeholder} | |
| 204 | - <Inspector {...props} /> | |
| 205 | - </> | |
| 206 | - ); | |
| 207 | -} | |
| 208 | - | |
| 209 | -function save() { | |
| 210 | - const blockProps = useBlockProps.save(); | |
| 211 | - const innerBlocksProps = useInnerBlocksProps.save(blockProps); | |
| 212 | - return <table {...innerBlocksProps} />; | |
| 213 | -} | |
| 214 | - | |
| 215 | -//@ts-ignore | |
| 216 | -registerBlockType(metadata.name, { | |
| 217 | - title: metadata.title, | |
| 218 | - category: metadata.category, | |
| 219 | - attributes: metadata.attributes, | |
| 220 | - edit, | |
| 221 | - save, | |
| 222 | -}); | |
| 14 | +registerNativeBlocks(); | |
