@livepreso/react-plugin-textfield 0.0.2

package/configs/generate-toolbar-options.js

@@ -0,0 +1,96 @@
+import { tableItemGenerators } from "./table-toolbar-configuration";
+import { generateToolbarConfiguration } from "./generate-toolbar-configuration";
+import { TABLE, TOOLBAR_SCOPES } from "../constants";
+import { primaryItemGenerators } from "./toolbar-configuration";
+
+const testUniqueIds = (options) => {
+	const allIds = options.flatMap(({ items = [] } = {}) =>
+		items.map(({ id }) => id),
+	);
+
+	const groupedIds = allIds.reduce((acc, id) => {
+		acc[id] = acc[id] || [];
+		acc[id].push(id);
+		return acc;
+	}, {});
+
+	for (const ids of Object.values(groupedIds)) {
+		if (ids.length > 1) {
+			throw new Error(`Toolbar IDs must be unique, duplicate found: ${ids[0]}`);
+		}
+	}
+};
+
+export const generateToolbarOptions = ({
+	toolbarConfig = [],
+	tableToolbarConfig = [],
+	textStyles = [],
+	colors = [],
+} = {}) => {
+	const includeTableEditor = toolbarConfig.includes(TABLE);
+	const options = { textStyles, colors };
+
+	const primaryOptions = generateToolbarConfiguration({
+		toolbar: toolbarConfig,
+		itemGenerators: primaryItemGenerators,
+		...options,
+	});
+
+	const allTableOptions = generateToolbarConfiguration({
+		toolbar: tableToolbarConfig,
+		itemGenerators: tableItemGenerators,
+		...options,
+	});
+
+	// Split table options into table-wide vs. cell based on scope
+	let tableOptions = [];
+	let tableCellOptions = [];
+
+	if (includeTableEditor) {
+		for (const {
+			id: groupId,
+			items = [],
+			label: groupLabel = null,
+		} of allTableOptions) {
+			for (const { scope, ...item } of items) {
+				// Target defaults to table-wide if not supplied
+				const target =
+					scope === TOOLBAR_SCOPES.TABLE_CELL ? tableCellOptions : tableOptions;
+				const existingGroup = target.find((g) => g.id === groupId);
+
+				if (existingGroup) {
+					existingGroup.items.push(item);
+					continue;
+				}
+
+				target.push({ id: groupId, label: groupLabel, items: [item] });
+			}
+		}
+	}
+
+	const allOptions = [...primaryOptions, ...tableOptions, ...tableCellOptions];
+	testUniqueIds(allOptions);
+
+	// Remove duplicate extensions
+	const extensions = allOptions
+		.flatMap((group) => {
+			const groupExtensions = group.extensions || [];
+			const itemExtensions = group.items.flatMap(
+				(item) => item.extensions || [],
+			);
+			return [...groupExtensions, ...itemExtensions].reduce(
+				(extensions, extension) => {
+					// Remove duplicate extensions
+					if (extensions.some(({ name }) => extension.name === name)) {
+						return extensions;
+					}
+
+					return [...extensions, extension];
+				},
+				[],
+			);
+		})
+		.filter(Boolean);
+
+	return { primaryOptions, tableOptions, tableCellOptions, extensions };
+};

package/configs/table-toolbar-configuration.js

@@ -0,0 +1,187 @@
+import React from "react";
+import icons from "../icons";
+import {
+	TOOLBAR_COMPONENT_TYPES,
+	TABLE_TOOLBAR_IDS,
+	TOOLBAR_SCOPES,
+} from "../constants";
+import { ColorPicker } from "../components/color-picker/ColorPicker";
+import { VerticalAlignToggle } from "../components/VerticalAlignToggle";
+import { findCellsInSelection } from "../components/tiptap/Table";
+import { generateVerticalAlignmentIcon } from "../utils/generate-vertical-alignment-icon";
+
+// Table-wide options
+const fullWidthToggle = () => ({
+	id: TABLE_TOOLBAR_IDS.FULL_WIDTH,
+	label: "Fit width",
+	type: TOOLBAR_COMPONENT_TYPES.BUTTON,
+	command: (editor) => editor.chain().focus().setFullWidth().run(),
+	icon: <icons.FitWidthArrows />,
+	scope: TOOLBAR_SCOPES.TABLE,
+});
+
+const distributeColumnsButton = () => ({
+	id: TABLE_TOOLBAR_IDS.EQUAL_WIDTH_COLUMNS,
+	label: "Distribute columns",
+	type: TOOLBAR_COMPONENT_TYPES.BUTTON,
+	command: (editor) => editor.chain().focus().setTableEqualColumnWidths().run(),
+	icon: <icons.EvenlyDistribute />,
+	scope: TOOLBAR_SCOPES.TABLE,
+});
+
+const deleteTableButton = () => ({
+	id: TABLE_TOOLBAR_IDS.DELETE_TABLE,
+	label: "Delete table",
+	type: TOOLBAR_COMPONENT_TYPES.BUTTON,
+	command: (editor) => editor.chain().focus().deleteTable().run(),
+	icon: <icons.Delete />,
+	scope: TOOLBAR_SCOPES.TABLE,
+});
+
+// Internal table options (eg. cell, row and column)
+const addColumnLeftButton = () => ({
+	id: TABLE_TOOLBAR_IDS.ADD_COLUMN_LEFT,
+	label: "Add column left",
+	type: TOOLBAR_COMPONENT_TYPES.BUTTON,
+	command: (editor) =>
+		editor.chain().focus().addColumnBefore().cleanWidth().run(),
+	icon: <icons.AddColumnLeft />,
+	scope: TOOLBAR_SCOPES.TABLE_CELL,
+});
+
+const addColumnRightButton = () => ({
+	id: TABLE_TOOLBAR_IDS.ADD_COLUMN_RIGHT,
+	label: "Add column right",
+	type: TOOLBAR_COMPONENT_TYPES.BUTTON,
+	command: (editor) =>
+		editor.chain().focus().addColumnAfter().cleanWidth().run(),
+	icon: <icons.AddColumnRight />,
+	scope: TOOLBAR_SCOPES.TABLE_CELL,
+});
+
+const removeColumnButton = () => ({
+	id: TABLE_TOOLBAR_IDS.REMOVE_COLUMN,
+	label: "Remove column",
+	type: TOOLBAR_COMPONENT_TYPES.BUTTON,
+	command: (editor) => editor.chain().focus().deleteColumn().run(),
+	icon: <icons.RemoveColumnOutline />,
+	scope: TOOLBAR_SCOPES.TABLE_CELL,
+});
+
+const addRowAboveButton = () => ({
+	id: TABLE_TOOLBAR_IDS.ADD_ROW_ABOVE,
+	label: "Add row above",
+	type: TOOLBAR_COMPONENT_TYPES.BUTTON,
+	command: (editor) => editor.chain().focus().addRowBefore().run(),
+	icon: <icons.AddRowAbove />,
+	scope: TOOLBAR_SCOPES.TABLE_CELL,
+});
+
+const addRowBelowButton = () => ({
+	id: TABLE_TOOLBAR_IDS.ADD_ROW_BELOW,
+	label: "Add row below",
+	type: TOOLBAR_COMPONENT_TYPES.BUTTON,
+	command: (editor) => editor.chain().focus().addRowAfter().run(),
+	icon: <icons.AddRowBelow />,
+	scope: TOOLBAR_SCOPES.TABLE_CELL,
+});
+
+const removeRowButton = () => ({
+	id: TABLE_TOOLBAR_IDS.REMOVE_ROW,
+	label: "Remove row",
+	type: TOOLBAR_COMPONENT_TYPES.BUTTON,
+	command: (editor) => editor.chain().focus().deleteRow().run(),
+	icon: <icons.RemoveRowOutline />,
+	scope: TOOLBAR_SCOPES.TABLE_CELL,
+});
+
+const distributeSelectedColumnsButton = () => ({
+	id: TABLE_TOOLBAR_IDS.EQUAL_WIDTH_SELECTION,
+	label: "Set equal column widths",
+	type: TOOLBAR_COMPONENT_TYPES.BUTTON,
+	command: (editor) => editor.chain().focus().setTableEqualColumnWidths().run(),
+	icon: <icons.EvenlyDistribute />,
+	scope: TOOLBAR_SCOPES.TABLE_CELL,
+});
+
+const mergeCellsButton = () => ({
+	id: TABLE_TOOLBAR_IDS.MERGE_CELLS,
+	label: "Merge cells",
+	type: TOOLBAR_COMPONENT_TYPES.BUTTON,
+	enabled: (editor) => editor.can().mergeCells(),
+	command: (editor) => editor.chain().focus().mergeCells().run(),
+	icon: <icons.MergeCells />,
+	scope: TOOLBAR_SCOPES.TABLE_CELL,
+});
+
+const splitCellsButton = () => ({
+	id: TABLE_TOOLBAR_IDS.SPLIT_CELLS,
+	label: "Split cell",
+	type: TOOLBAR_COMPONENT_TYPES.BUTTON,
+	enabled: (editor) => editor.can().splitCell(),
+	command: (editor) => editor.chain().focus().splitCell().run(),
+	icon: <icons.SplitCells />,
+	scope: TOOLBAR_SCOPES.TABLE_CELL,
+});
+
+const cellBgColorPicker = ({ colors }) => ({
+	id: TABLE_TOOLBAR_IDS.CELL_BG_COLOR,
+	label: "Cell colour",
+	icon: <icons.FormatColorFill />,
+	scope: TOOLBAR_SCOPES.TABLE_CELL,
+	type: TOOLBAR_COMPONENT_TYPES.SUB,
+	items: [{ id: "color-picker" }],
+	renderItem: (item, { editor } = {}) => (
+		<ColorPicker
+			colors={colors}
+			onChange={(color) =>
+				editor.chain().focus().setCellAttribute("backgroundColor", color).run()
+			}
+		/>
+	),
+});
+
+const cellValignPicker = () => ({
+	id: TABLE_TOOLBAR_IDS.CELL_VALIGN,
+	label: "Cell alignment",
+	renderIcon: generateVerticalAlignmentIcon,
+	scope: TOOLBAR_SCOPES.TABLE_CELL,
+	type: TOOLBAR_COMPONENT_TYPES.SUB,
+	items: [{ id: "vertical-align" }],
+	value: (editor) => {
+		const cells = findCellsInSelection(editor.state);
+		if (!cells) return null;
+		return cells[0]?.attrs?.verticalAlign;
+	},
+	renderItem: (item, { editor, editorState, value } = {}) => (
+		<VerticalAlignToggle
+			id={TABLE_TOOLBAR_IDS.CELL_VALIGN}
+			value={value}
+			onChange={(alignment) =>
+				editor
+					.chain()
+					.focus()
+					.setCellAttribute("verticalAlign", alignment)
+					.run()
+			}
+		/>
+	),
+});
+export const tableItemGenerators = {
+	// Table-wide options
+	[TABLE_TOOLBAR_IDS.FULL_WIDTH]: fullWidthToggle,
+	[TABLE_TOOLBAR_IDS.EQUAL_WIDTH_COLUMNS]: distributeColumnsButton,
+	[TABLE_TOOLBAR_IDS.DELETE_TABLE]: deleteTableButton,
+	// Internal table options
+	[TABLE_TOOLBAR_IDS.ADD_COLUMN_LEFT]: addColumnLeftButton,
+	[TABLE_TOOLBAR_IDS.ADD_COLUMN_RIGHT]: addColumnRightButton,
+	[TABLE_TOOLBAR_IDS.REMOVE_COLUMN]: removeColumnButton,
+	[TABLE_TOOLBAR_IDS.ADD_ROW_ABOVE]: addRowAboveButton,
+	[TABLE_TOOLBAR_IDS.ADD_ROW_BELOW]: addRowBelowButton,
+	[TABLE_TOOLBAR_IDS.REMOVE_ROW]: removeRowButton,
+	[TABLE_TOOLBAR_IDS.EQUAL_WIDTH_SELECTION]: distributeSelectedColumnsButton,
+	[TABLE_TOOLBAR_IDS.MERGE_CELLS]: mergeCellsButton,
+	[TABLE_TOOLBAR_IDS.SPLIT_CELLS]: splitCellsButton,
+	[TABLE_TOOLBAR_IDS.CELL_BG_COLOR]: cellBgColorPicker,
+	[TABLE_TOOLBAR_IDS.CELL_VALIGN]: cellValignPicker,
+};

package/configs/toolbar-configuration.js

@@ -0,0 +1,330 @@
+import React from "react";
+
+import Bold from "@tiptap/extension-bold";
+import Italic from "@tiptap/extension-italic";
+import Link from "@tiptap/extension-link";
+import { BulletList, OrderedList } from "@tiptap/extension-list";
+import { ListItem } from "../components/tiptap/ListItem";
+import Subscript from "@tiptap/extension-subscript";
+import Superscript from "@tiptap/extension-superscript";
+import TextAlign from "@tiptap/extension-text-align";
+import { Heading } from "@tiptap/extension-heading";
+import Underline from "@tiptap/extension-underline";
+import { UndoRedo } from "@tiptap/extensions";
+
+import icons from "../icons";
+import { TableRow } from "@tiptap/extension-table";
+import { TextStyle, Color } from "@tiptap/extension-text-style";
+import { TableCell, TableHeader } from "../components/tiptap/TableCells";
+import { TableExtended } from "../components/tiptap/Table";
+import { Select } from "../components/Select/Select";
+import { PRIMARY_TOOLBAR_IDS, TOOLBAR_COMPONENT_TYPES } from "../constants";
+import LinkEditDialog from "../components/LinkEditDialog";
+import { Gapcursor } from "@tiptap/extensions";
+import { ColorPickerCombo } from "../components/color-picker/ColorPickerCombo";
+
+function generateTextStyleTest(textStyles) {
+	return (editor) => {
+		// test for level zero aka paragraph last
+		const sortedTextStyles = [...textStyles].sort(
+			(a, b) => Number(b.block) - Number(a.block),
+		);
+		const match = sortedTextStyles.find((ts) => {
+			const level = Number(ts.block);
+			if (level > 0) return editor.isActive("heading", { level });
+			return editor.isActive("paragraph");
+		});
+		return match?.block;
+	};
+}
+
+const undoButton = () => ({
+	id: PRIMARY_TOOLBAR_IDS.UNDO,
+	label: "Undo",
+	type: TOOLBAR_COMPONENT_TYPES.BUTTON,
+	extensions: [UndoRedo],
+	enabled: (editor) => editor.can().chain().focus().undo().run(),
+	command: (editor) => editor.chain().focus().undo().run(),
+	icon: <icons.Undo />,
+});
+
+const redoButton = () => ({
+	id: PRIMARY_TOOLBAR_IDS.REDO,
+	label: "Redo",
+	type: TOOLBAR_COMPONENT_TYPES.BUTTON,
+	extensions: [UndoRedo],
+	enabled: (editor) => editor.can().chain().focus().redo().run(),
+	command: (editor) => editor.chain().focus().redo().run(),
+	icon: <icons.Redo />,
+});
+
+const textStyleSelect = ({ textStyles = [] } = {}) => ({
+	id: PRIMARY_TOOLBAR_IDS.HEADING,
+	label: "Text style",
+	type: TOOLBAR_COMPONENT_TYPES.CUSTOM,
+	extensions: [Heading],
+	value: generateTextStyleTest(textStyles),
+	renderContent: ({ editor, value }) => {
+		const options = textStyles.map(({ block: value, title: label }) => ({
+			value,
+			label,
+		}));
+
+		const onChange = (value) => {
+			const level = Number(value);
+			if (!value || level === 0)
+				return editor.chain().focus().setParagraph().run();
+
+			return editor
+				.chain()
+				.focus()
+				.toggleHeading({ level: Number(value) })
+				.run();
+		};
+
+		return (
+			<Select
+				label="Text style"
+				placeholder="Text style"
+				options={[options]}
+				value={value}
+				onValueChange={onChange}
+			/>
+		);
+	},
+});
+
+const CustomLinkExtension = Link.configure({
+	linkOnPaste: true,
+	enableClickSelection: true,
+	openOnClick: false,
+	protocols: ["http", "https", "slide"],
+});
+
+const boldButton = () => ({
+	id: PRIMARY_TOOLBAR_IDS.BOLD,
+	label: "Bold",
+	type: TOOLBAR_COMPONENT_TYPES.TOGGLE,
+	extensions: [Bold],
+	icon: <icons.FormatBold />,
+	active: (editor) => editor.isActive("bold"),
+	command: (editor) => editor.chain().focus().toggleBold().run(),
+});
+
+const italicButton = () => ({
+	id: PRIMARY_TOOLBAR_IDS.ITALIC,
+	label: "Italic",
+	type: TOOLBAR_COMPONENT_TYPES.TOGGLE,
+	extensions: [Italic],
+	icon: <icons.FormatItalic />,
+	active: (editor) => editor.isActive("italic"),
+	command: (editor) => editor.chain().focus().toggleItalic().run(),
+});
+
+const underlineButton = () => ({
+	id: PRIMARY_TOOLBAR_IDS.UNDERLINE,
+	label: "Underline",
+	type: TOOLBAR_COMPONENT_TYPES.TOGGLE,
+	extensions: [Underline],
+	icon: <icons.FormatUnderlined />,
+	active: (editor) => editor.isActive("underline"),
+	command: (editor) => editor.chain().focus().toggleUnderline().run(),
+});
+
+const superscriptButton = () => ({
+	id: PRIMARY_TOOLBAR_IDS.SUPERSCRIPT,
+	label: "Superscript",
+	type: TOOLBAR_COMPONENT_TYPES.TOGGLE,
+	extensions: [Superscript],
+	icon: <icons.Superscript />,
+	active: (editor) => editor.isActive("superscript"),
+	command: (editor) => editor.chain().focus().toggleSuperscript().run(),
+});
+
+const subscriptButton = () => ({
+	id: PRIMARY_TOOLBAR_IDS.SUBSCRIPT,
+	label: "Subscript",
+	type: TOOLBAR_COMPONENT_TYPES.TOGGLE,
+	extensions: [Subscript],
+	icon: <icons.Subscript />,
+	active: (editor) => editor.isActive("subscript"),
+	command: (editor) => editor.chain().focus().toggleSubscript().run(),
+});
+
+const textColorPicker = ({ colors } = {}) => ({
+	id: PRIMARY_TOOLBAR_IDS.TEXT_COLOR,
+	label: "Text colour",
+	type: TOOLBAR_COMPONENT_TYPES.CUSTOM,
+	extensions: [TextStyle, Color],
+	enabled: (editor) => editor.can().chain().focus().setColor("#000000").run(),
+	value: (editor) => editor.getAttributes("textStyle").color,
+	renderContent: ({ editor, value, isEnabled, userSelections = {} } = {}) => {
+		const { textColor = {} } = userSelections;
+		const { value: savedValue, setValue: setSavedValue } = textColor;
+
+		return (
+			<ColorPickerCombo
+				colors={colors}
+				value={savedValue}
+				pickerValue={value}
+				disabled={!isEnabled}
+				onChange={(color) => {
+					setSavedValue(color);
+					return editor.chain().focus().setColor(color).run();
+				}}
+			/>
+		);
+	},
+});
+
+const alignmentToggleGroup = () => ({
+	id: PRIMARY_TOOLBAR_IDS.TEXT_ALIGN,
+	type: TOOLBAR_COMPONENT_TYPES.TOGGLE_GROUP,
+	extensions: [
+		TextAlign.configure({
+			types: ["heading", "paragraph"],
+		}),
+	],
+	label: "Text alignment",
+	command: (editor, { value }) =>
+		editor.chain().focus().setTextAlign(value).run(),
+	value: (editor) => editor.isActive("textAlign"),
+	defaultValue: "left",
+	options: [
+		{
+			id: "align-left",
+			tooltip: "Left",
+			label: "Left align",
+			value: "left",
+			icon: <icons.FormatAlignLeft />,
+		},
+		{
+			id: "align-center",
+			tooltip: "Center",
+			label: "Center align",
+			value: "center",
+			icon: <icons.FormatAlignCenter />,
+		},
+		{
+			id: "align-right",
+			tooltip: "Right",
+			label: "Right align",
+			value: "right",
+			icon: <icons.FormatAlignRight />,
+		},
+		{
+			id: "align-justify",
+			tooltip: "Justify",
+			label: "Justify align",
+			value: "justify",
+			icon: <icons.FormatAlignJustify />,
+		},
+	],
+});
+
+const bulletListButton = () => ({
+	id: PRIMARY_TOOLBAR_IDS.UNORDERED_LIST,
+	label: "Bullet List",
+	type: TOOLBAR_COMPONENT_TYPES.TOGGLE,
+	extensions: [ListItem, BulletList],
+	command: (editor) => editor.chain().focus().toggleBulletList().run(),
+	icon: <icons.FormatListBulleted />,
+	active: (editor) => editor.isActive("bulletList"),
+});
+
+const numberedListButton = () => ({
+	id: PRIMARY_TOOLBAR_IDS.ORDERED_LIST,
+	label: "Ordered List",
+	type: TOOLBAR_COMPONENT_TYPES.TOGGLE,
+	extensions: [ListItem, OrderedList],
+	command: (editor) => editor.chain().focus().toggleOrderedList().run(),
+	icon: <icons.FormatListNumbered />,
+	active: (editor) => editor.isActive("orderedList"),
+});
+
+const addLinkButton = () => {
+	const label = "Add / edit Link";
+
+	return {
+		id: PRIMARY_TOOLBAR_IDS.INSERT_LINK,
+		label,
+		type: TOOLBAR_COMPONENT_TYPES.CUSTOM,
+		extensions: [CustomLinkExtension],
+		value: (editor) => editor.getAttributes("link").href,
+		active: (editor) => editor.isActive("link"),
+		renderContent({ editor, isActive, value }) {
+			return (
+				<LinkEditDialog
+					icon={<icons.Link />}
+					label={label}
+					active={isActive}
+					value={value}
+					onChange={(url) =>
+						editor
+							.chain()
+							.focus()
+							.extendMarkRange("link")
+							.setLink({ href: url, target: "_blank" })
+							.run()
+					}
+				/>
+			);
+		},
+	};
+};
+
+const removeLinkButton = () => ({
+	id: PRIMARY_TOOLBAR_IDS.REMOVE_LINK,
+	label: "Remove link",
+	type: TOOLBAR_COMPONENT_TYPES.BUTTON,
+	extensions: [CustomLinkExtension],
+	command: (editor) => editor.chain().focus().unsetLink().run(),
+	enabled: (editor) => editor.isActive("link"),
+	icon: <icons.LinkOff />,
+});
+
+const clearFormattingButton = () => ({
+	id: PRIMARY_TOOLBAR_IDS.CLEAR_FORMATTING,
+	label: "Clear Formatting",
+	type: TOOLBAR_COMPONENT_TYPES.BUTTON,
+	command: (editor) => editor.chain().focus().unsetAllMarks().run(),
+	icon: <icons.FormatClear />,
+});
+
+const insertTableButton = () => ({
+	id: PRIMARY_TOOLBAR_IDS.INSERT_TABLE,
+	label: "Insert Table",
+	type: TOOLBAR_COMPONENT_TYPES.BUTTON,
+	extensions: [TableExtended, TableCell, TableHeader, TableRow, Gapcursor],
+	command: (editor) =>
+		editor
+			.chain()
+			.focus()
+			.insertTable({
+				rows: 3,
+				cols: 3,
+				withHeaderRow: true,
+			})
+			.setFullWidth()
+			.run(),
+	icon: <icons.BorderAll />,
+});
+
+export const primaryItemGenerators = {
+	[PRIMARY_TOOLBAR_IDS.UNDO]: undoButton,
+	[PRIMARY_TOOLBAR_IDS.REDO]: redoButton,
+	[PRIMARY_TOOLBAR_IDS.HEADING]: textStyleSelect,
+	[PRIMARY_TOOLBAR_IDS.BOLD]: boldButton,
+	[PRIMARY_TOOLBAR_IDS.ITALIC]: italicButton,
+	[PRIMARY_TOOLBAR_IDS.UNDERLINE]: underlineButton,
+	[PRIMARY_TOOLBAR_IDS.SUPERSCRIPT]: superscriptButton,
+	[PRIMARY_TOOLBAR_IDS.SUBSCRIPT]: subscriptButton,
+	[PRIMARY_TOOLBAR_IDS.TEXT_COLOR]: textColorPicker,
+	[PRIMARY_TOOLBAR_IDS.TEXT_ALIGN]: alignmentToggleGroup,
+	[PRIMARY_TOOLBAR_IDS.UNORDERED_LIST]: bulletListButton,
+	[PRIMARY_TOOLBAR_IDS.ORDERED_LIST]: numberedListButton,
+	[PRIMARY_TOOLBAR_IDS.INSERT_LINK]: addLinkButton,
+	[PRIMARY_TOOLBAR_IDS.REMOVE_LINK]: removeLinkButton,
+	[PRIMARY_TOOLBAR_IDS.CLEAR_FORMATTING]: clearFormattingButton,
+	[PRIMARY_TOOLBAR_IDS.INSERT_TABLE]: insertTableButton,
+};