PluginProbe
Tableberg – Simple Gutenberg Table Block / 1.1.5
Tableberg – Simple Gutenberg Table Block v1.1.5
1.1.5 1.1.4 1.1.3 1.1.2 1.1.1 1.1.0 1.0.5 1.0.4 1.0.3 1.0.2 1.0.1 trunk 0.0.2 0.2.1 0.3.2 0.3.3 0.4.1 0.5.0 0.5.1 0.5.2 0.5.3 0.5.4 0.5.5 0.5.6 0.5.7 All 42 releases
tableberg / src / CellChildAutoCompleter.tsx

CellChildAutoCompleter.tsx in Tableberg – Simple Gutenberg Table Block 1.1.5, at src/CellChildAutoCompleter.tsx

57 lines 1.9 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 import { WPCompleter } from "@wordpress/components/build-types/autocomplete/types";
2 import buttonBlockIcon from "@tableberg/shared/icons/button";
3 import imageBlockIcon from "@tableberg/shared/icons/image";
4 import StyledListIcon from "@tableberg/shared/icons/styled-list";
5 import RibbonIcon from "@tableberg/shared/icons/ribbon";
6 import { ElementTypes } from "./attributes";
7 import { getExtendedElementDefinitions } from "./extensions";
8
9 function OptionIcon(icon: JSX.Element) {
10 return <span className="block-editor-block-icon has-colors">{icon}</span>;
11 }
12
13 type Option = {
14 icon: JSX.Element;
15 name: string;
16 value: ElementTypes;
17 disabled?: boolean;
18 };
19
20 const baseCellChildAutoCompleter: WPCompleter<Option> = {
21 name: "cell-blocks",
22 triggerPrefix: "/",
23 className: "block-editor-autocompleters__block",
24 options: [],
25 getOptionLabel: option => [OptionIcon(option.icon), option.name],
26 getOptionKeywords: option => [option.name],
27 isOptionDisabled: option => option.disabled ?? false,
28 getOptionCompletion: option => {
29 return {
30 action: "replace",
31 value: option.value,
32 };
33 },
34 };
35
36 export function getCellChildAutoCompleter(): WPCompleter<Option> {
37 return {
38 ...baseCellChildAutoCompleter,
39 options: [
40 { icon: buttonBlockIcon, name: "Button", value: "button" },
41 { icon: imageBlockIcon, name: "Image", value: "image" },
42 { icon: StyledListIcon, name: "List", value: "list" },
43 {
44 icon: RibbonIcon,
45 name: "Ribbon",
46 value: "ribbon",
47 disabled: true,
48 },
49 ...getExtendedElementDefinitions().map(definition => ({
50 icon: definition.icon as JSX.Element,
51 name: definition.autocompleteLabel || definition.title,
52 value: definition.name as ElementTypes,
53 })),
54 ],
55 };
56 }
57