@monolith-forensics/monolith-ui 1.3.2 → 1.3.3

package/dist/RichTextEditor/Enums/Controls.d.ts

@@ -16,5 +16,6 @@ export declare enum Controls {
     TEXT_ALIGN_RIGHT = "textAlignRight",
     TEXT_ALIGN_JUSTIFIED = "textAlignJustified",
     FONT = "font",
-    COLOR = "color"
+    COLOR = "color",
+    TABLE = "table"
 }

package/dist/RichTextEditor/Enums/Controls.js

@@ -18,4 +18,5 @@ export var Controls;
     Controls["TEXT_ALIGN_JUSTIFIED"] = "textAlignJustified";
     Controls["FONT"] = "font";
     Controls["COLOR"] = "color";
+    Controls["TABLE"] = "table";
 })(Controls || (Controls = {}));

package/dist/RichTextEditor/Enums/SlashCommands.d.ts

@@ -6,6 +6,7 @@ export declare enum SlashCommands {
     Heading4 = "Heading 4",
     BulletList = "Bullet List",
     NumberedList = "Numbered List",
+    Table = "Table",
     CurrentDate = "Current Date",
     CurrentTimestamp = "Current Timestamp",
     Image = "Image"

package/dist/RichTextEditor/Enums/SlashCommands.js

@@ -7,6 +7,7 @@ export var SlashCommands;
     SlashCommands["Heading4"] = "Heading 4";
     SlashCommands["BulletList"] = "Bullet List";
     SlashCommands["NumberedList"] = "Numbered List";
+    SlashCommands["Table"] = "Table";
     SlashCommands["CurrentDate"] = "Current Date";
     SlashCommands["CurrentTimestamp"] = "Current Timestamp";
     SlashCommands["Image"] = "Image";

package/dist/RichTextEditor/Extensions/CustomTableView.d.ts

@@ -0,0 +1,22 @@
+import { TableView as DefaultTableView } from "@tiptap/extension-table";
+import { EditorView } from "@tiptap/pm/view";
+import type { Node as PMNode } from "prosemirror-model";
+export declare class CustomTableView extends DefaultTableView {
+    private addColumnBtn;
+    private tableMenuBtn;
+    private tableMenu;
+    private isOpen;
+    private selectionHandler;
+    private clickOutsideHandler;
+    private view;
+    constructor(node: PMNode, cellMinWidth: number, view: EditorView);
+    update(node: PMNode): boolean;
+    destroy(): void;
+    private renderTableMenu;
+    private renderAddColumnBtn;
+    private updateColumnButtonVisibility;
+    private updateTableMenuVisibility;
+    private toggleMenu;
+    private openMenu;
+    private closeMenu;
+}

package/dist/RichTextEditor/Extensions/CustomTableView.js

@@ -0,0 +1,137 @@
+import { TableView as DefaultTableView } from "@tiptap/extension-table";
+import { addColumnAfter, } from "prosemirror-tables";
+/** Walk up from $pos to find the nearest ancestor table. */
+function findTable(state) {
+    const { $from } = state.selection;
+    return findAncestorOfType($from, "table");
+}
+/** Generic ancestor finder by node.type.name */
+function findAncestorOfType($pos, typeName) {
+    var _a;
+    for (let depth = $pos.depth; depth >= 0; depth--) {
+        const node = $pos.node(depth);
+        if (((_a = node.type) === null || _a === void 0 ? void 0 : _a.name) === typeName) {
+            const pos = depth === 0 ? 0 : $pos.before(depth);
+            return { node, pos };
+        }
+    }
+    return null;
+}
+export class CustomTableView extends DefaultTableView {
+    // NOTE: signature has NO getPos
+    constructor(node, cellMinWidth, view) {
+        // keep default resizing/DOM from the base TableView
+        super(node, cellMinWidth);
+        this.isOpen = true;
+        this.view = view;
+        this.addColumnBtn = null;
+        this.tableMenuBtn = null;
+        this.tableMenu = null;
+        this.selectionHandler = null;
+        this.clickOutsideHandler = () => { };
+        // this.renderTableMenu();
+        this.renderAddColumnBtn();
+    }
+    update(node) {
+        const ok = super.update(node);
+        if (ok)
+            this.updateColumnButtonVisibility();
+        // if (ok) this.updateTableMenuVisibility();
+        return ok;
+    }
+    destroy() {
+        if (this.selectionHandler) {
+            this.view.dom.ownerDocument.removeEventListener("selectionchange", this.selectionHandler);
+        }
+    }
+    renderTableMenu() {
+        var _a;
+        const tableMenuContainer = document.createElement("div");
+        tableMenuContainer.className = "tiptap-table-menu-container";
+        this.tableMenuBtn = document.createElement("div");
+        this.tableMenuBtn.textContent = "⋮";
+        this.tableMenuBtn.title = "Table menu";
+        this.tableMenuBtn.className = "tiptap-table-menu-btn";
+        tableMenuContainer.appendChild(this.tableMenuBtn);
+        this.tableMenu = document.createElement("div");
+        this.tableMenu.className = "tiptap-table-menu";
+        this.tableMenu.style.display = this.isOpen ? "block" : "none";
+        tableMenuContainer.appendChild(this.tableMenu);
+        this.tableMenuBtn.addEventListener("mousedown", (e) => e.preventDefault());
+        this.tableMenuBtn.addEventListener("click", () => {
+            this.toggleMenu();
+        });
+        (_a = this.table.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild(tableMenuContainer);
+        // Visibility & lifecycle
+        this.selectionHandler = () => this.updateTableMenuVisibility();
+        this.view.dom.ownerDocument.addEventListener("selectionchange", this.selectionHandler);
+        this.updateTableMenuVisibility();
+        this.clickOutsideHandler = (e) => {
+            var _a;
+            if (!this.isOpen)
+                return;
+            const target = e.target;
+            if (!((_a = this.tableMenu) === null || _a === void 0 ? void 0 : _a.contains(target)) && target !== this.tableMenuBtn) {
+                this.closeMenu();
+            }
+        };
+        this.view.dom.ownerDocument.addEventListener("mousedown", this.clickOutsideHandler);
+    }
+    renderAddColumnBtn() {
+        var _a;
+        // Create the left-side button
+        this.addColumnBtn = document.createElement("div");
+        this.addColumnBtn.textContent = "+";
+        this.addColumnBtn.title = "Add column";
+        this.addColumnBtn.className = "tiptap-table-addcol-btn";
+        this.addColumnBtn.addEventListener("mousedown", (e) => e.preventDefault());
+        this.addColumnBtn.addEventListener("click", () => {
+            addColumnAfter(this.view.state, this.view.dispatch);
+            this.view.focus();
+        });
+        // The default TableView sets up a wrapper div at this.dom
+        if (getComputedStyle(this.dom).position === "static") {
+            this.dom.style.position = "relative";
+        }
+        (_a = this.table.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild(this.addColumnBtn);
+        // Toggle visibility on selection changes
+        const doc = this.view.dom.ownerDocument;
+        this.selectionHandler = () => this.updateColumnButtonVisibility();
+        doc.addEventListener("selectionchange", this.selectionHandler);
+        this.updateColumnButtonVisibility();
+    }
+    updateColumnButtonVisibility() {
+        const found = findTable(this.view.state);
+        const isInsideThisTable = !!found && found.node === this.node;
+        if (this.addColumnBtn) {
+            this.addColumnBtn.style.display = isInsideThisTable ? "flex" : "none";
+        }
+        if (this.tableMenuBtn) {
+            this.tableMenuBtn.style.display = isInsideThisTable ? "flex" : "none";
+        }
+    }
+    updateTableMenuVisibility() {
+        const found = findTable(this.view.state);
+        const inside = !!found && found.node === this.node;
+        if (!inside)
+            this.closeMenu();
+        // Optional: update position relative to table (e.g., snap left/top)
+        // You can also use the selected cell rect for context-sensitive placement.
+    }
+    toggleMenu() {
+        this.isOpen ? this.closeMenu() : this.openMenu();
+    }
+    openMenu() {
+        this.isOpen = true;
+        if (this.tableMenu) {
+            this.tableMenu.style.display = "block";
+            this.tableMenu.focus();
+        }
+    }
+    closeMenu() {
+        this.isOpen = false;
+        if (this.tableMenu) {
+            this.tableMenu.style.display = "none";
+        }
+    }
+}

package/dist/RichTextEditor/Extensions/SlashCommandList.d.ts

@@ -1,9 +1,11 @@
+import { SuggestionItem } from "./getSlashCommand";
+import { Editor, Range } from "@tiptap/react";
 interface SlashCommandListProps {
     className?: string;
-    items: any[];
-    command: (item: any) => void;
-    editor: any;
-    range: any;
+    items: SuggestionItem[];
+    command: (item: SuggestionItem) => void;
+    editor: Editor;
+    range: Range;
 }
 declare const SlashCommandList: ({ items, command, editor, range, }: SlashCommandListProps) => import("react/jsx-runtime").JSX.Element | null;
 export default SlashCommandList;

package/dist/RichTextEditor/Extensions/SlashCommandList.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react";
 import styled from "styled-components";
+import { useToolbarState } from "../Toolbar/useToolbarState";
+import { SlashCommands } from "../Enums";
 const SlashCommandListContainer = styled.div `
   display: flex;
   flex-direction: column;
@@ -38,6 +40,11 @@ const SlashCommandItem = styled.button `
   &.selected {
     background-color: ${({ theme }) => theme.palette.action.hover};
   }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 `;
 const CommandIcon = styled.div `
   display: flex;
@@ -78,6 +85,7 @@ const updateScrollView = (container, item) => {
 };
 const SlashCommandList = ({ items, command, editor, range, }) => {
     const [selectedIndex, setSelectedIndex] = useState(0);
+    const { isInsideTable } = useToolbarState(editor);
     const selectItem = useCallback((index) => {
         const item = items[index];
         if (item) {
@@ -105,6 +113,9 @@ const SlashCommandList = ({ items, command, editor, range, }) => {
                     return true;
                 }
                 if (e.key === "Enter") {
+                    if (items[selectedIndex].disabled) {
+                        return true;
+                    }
                     selectItem(selectedIndex);
                     return true;
                 }
@@ -127,7 +138,10 @@ const SlashCommandList = ({ items, command, editor, range, }) => {
             updateScrollView(container, item);
     }, [selectedIndex]);
     return items.length > 0 ? (_jsx(SlashCommandListContainer, { ref: commandListContainer, className: "slash-command", children: items.map((item, index) => {
-            return (_jsxs(SlashCommandItem, { className: `slash-command-item ${index === selectedIndex ? "selected" : ""}`, onClick: () => selectItem(index), children: [_jsx(CommandIcon, { className: "item-icon", children: _jsx(item.icon, { size: 18 }) }), _jsxs("div", { children: [_jsx(CommandTitle, { className: "item-title", children: item.title }), _jsx(CommandDescription, { className: "item-description", children: item.description })] })] }, index));
+            if (item.title === SlashCommands.Table && isInsideTable) {
+                item.disabled = true;
+            }
+            return (_jsxs(SlashCommandItem, { className: `slash-command-item ${index === selectedIndex ? "selected" : ""}`, onClick: () => selectItem(index), disabled: item.disabled, children: [_jsx(CommandIcon, { className: "item-icon", children: _jsx(item.icon, { size: 18 }) }), _jsxs("div", { children: [_jsx(CommandTitle, { className: "item-title", children: item.title }), _jsx(CommandDescription, { className: "item-description", children: item.description })] })] }, index));
         }) })) : null;
 };
 export default SlashCommandList;

package/dist/RichTextEditor/Extensions/getSlashCommand.d.ts

@@ -1,7 +1,18 @@
-import { Extension } from "@tiptap/core";
+import { Extension, Editor } from "@tiptap/core";
 import { HandleImageUpload } from "../Plugins/UploadImagesPlugin.js";
 import { SlashCommands } from "../Enums";
 type CommandName = keyof typeof SlashCommands;
+export type SuggestionItem = {
+    title: CommandName;
+    description: string;
+    searchTerms?: string[];
+    icon: any;
+    disabled?: boolean;
+    command: (props: {
+        editor: Editor;
+        range: any;
+    }) => void;
+};
 interface SlashCommandOptions {
     handleImageUpload?: HandleImageUpload;
     commands?: CommandName[];

package/dist/RichTextEditor/Extensions/getSlashCommand.js

@@ -11,7 +11,7 @@ import { Extension } from "@tiptap/core";
 import Suggestion from "@tiptap/suggestion";
 import { ReactRenderer } from "@tiptap/react";
 import tippy from "tippy.js";
-import { Heading1, Heading2, Heading3, Heading4, List, ListOrdered, Text, Image as ImageIcon, Calendar, ClockIcon, } from "lucide-react";
+import { Heading1, Heading2, Heading3, Heading4, List, ListOrdered, Text, Image as ImageIcon, Calendar, ClockIcon, Table, } from "lucide-react";
 import { startImageUpload, } from "../Plugins/UploadImagesPlugin.js";
 import { PluginKey } from "@tiptap/pm/state";
 import SlashCommandList from "./SlashCommandList";
@@ -115,6 +115,15 @@ const getCommandItems = (values, options) => {
                 editor.chain().focus().deleteRange(range).toggleOrderedList().run();
             },
         },
+        {
+            title: SlashCommands.Table,
+            description: "Create a table.",
+            searchTerms: ["table"],
+            icon: Table,
+            command: ({ editor, range }) => {
+                editor.chain().focus().deleteRange(range).insertTable().run();
+            },
+        },
         {
             title: SlashCommands.CurrentDate,
             description: "Insert the current date.",

package/dist/RichTextEditor/Extensions/getTiptapExtensions.js

@@ -3,13 +3,10 @@ import StarterKit from "@tiptap/starter-kit";
 import HorizontalRule from "@tiptap/extension-horizontal-rule";
 import Underline from "@tiptap/extension-underline";
 import TextAlign from "@tiptap/extension-text-align";
-import Table from "@tiptap/extension-table";
-import TableCell from "@tiptap/extension-table-cell";
-import TableHeader from "@tiptap/extension-table-header";
-import TableRow from "@tiptap/extension-table-row";
+import { TableKit } from "@tiptap/extension-table";
 import Placeholder from "@tiptap/extension-placeholder";
 import { Color } from "@tiptap/extension-color";
-import TextStyle from "@tiptap/extension-text-style";
+import { TextStyle } from "@tiptap/extension-text-style";
 import { InputRule, Extension } from "@tiptap/core";
 import Focus from "@tiptap/extension-focus";
 import { UploadImagesPlugin } from "../Plugins";
@@ -121,22 +118,13 @@ const getTipTapExtensions = ({ extensions = [], slashCommands = [], bubbleMenuOp
         },
         {
             name: Extensions.Table,
-            extension: Table.configure({
-                resizable: true,
+            extension: TableKit.configure({
+                table: {
+                    resizable: true,
+                    // View: CustomTableView,
+                },
             }),
         },
-        {
-            name: Extensions.TableRow,
-            extension: TableRow,
-        },
-        {
-            name: Extensions.TableHeader,
-            extension: TableHeader,
-        },
-        {
-            name: Extensions.TableCell,
-            extension: TableCell,
-        },
         {
             name: Extensions.Image,
             extension: CustomImage.configure({

package/dist/RichTextEditor/Plugins/UploadImagesPlugin.js

@@ -107,7 +107,8 @@ export const UploadImagesPlugin = () => new Plugin({
     },
     props: {
         decorations(state) {
-            return this.getState(state);
+            const decos = this.getState(state);
+            return decos !== null && decos !== void 0 ? decos : null;
         },
     },
 });

package/dist/RichTextEditor/RichTextEditor.js

@@ -59,23 +59,120 @@ const StyledContent = styled.div `
     word-break: break-word;
     text-rendering: optimizeLegibility;
 
+    .tableWrapper {
+      position: relative;
+
+      .tiptap-table-menu-container {
+        position: absolute;
+        left: -20px;
+        top: 0;
+
+        display: flex;
+        flex-direction: column;
+      }
+
+      .tiptap-table-menu {
+        display: none;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        background-color: ${({ theme }) => theme.palette.background.default};
+        border-radius: 4px;
+        border: 1px solid ${({ theme }) => theme.palette.divider};
+        padding: 10px;
+        width: 100px;
+        height: 100px;
+
+        z-index: 1000;
+        position: absolute;
+        top: 30px;
+        left: 0px;
+
+        &.show {
+          display: flex;
+        }
+      }
+
+      .tiptap-table-menu-btn {
+        display: none;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        cursor: pointer;
+
+        padding: 3px;
+        border-radius: 4px;
+        color: ${({ theme }) => theme.palette.text.secondary};
+        font-weight: 500;
+        font-size: 1.25rem;
+
+        &:hover {
+          background-color: ${({ theme }) => theme.palette.action.hover};
+          color: ${({ theme }) => theme.palette.text.primary};
+        }
+      }
+
+      .tiptap-table-addcol-btn {
+        display: none;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        cursor: pointer;
+        position: absolute;
+        right: -20px;
+        top: 0;
+        width: 20px;
+        height: 100%;
+        background-color: transparent;
+        font-weight: 500;
+        border-radius: 0 4px 4px 0;
+        border-top: 1px solid ${({ theme }) => theme.palette.action.hover};
+        border-bottom: 1px solid ${({ theme }) => theme.palette.action.hover};
+        border-right: 1px solid ${({ theme }) => theme.palette.action.hover};
+        color: ${({ theme }) => theme.palette.text.secondary};
+
+        &:hover {
+          background-color: ${({ theme }) => theme.palette.action.hover};
+          color: ${({ theme }) => theme.palette.text.primary};
+        }
+      }
+    }
+
     table {
+      position: relative;
       border-collapse: collapse;
       width: 100%;
+      table-layout: fixed;
+
+      tr.is-empty::before {
+        display: none;
+      }
 
       th,
       td {
         border: 1px solid ${({ theme }) => theme.palette.divider};
-        padding: 0.5rem;
+        padding: 5px;
         min-width: 100px;
+        white-space: normal;
+        word-break: break-word;
+        overflow-wrap: anywhere;
+        vertical-align: baseline;
+      }
+
+      th.is-empty p::before {
+        display: none;
+      }
+
+      td.is-empty p::before {
+        display: none;
       }
 
       // for table header
       th {
+        background-color: ${({ theme }) => theme.palette.background.alt};
         border: 1px solid ${({ theme }) => theme.palette.divider};
-        padding: 0.5rem;
+        padding: 5px;
         min-width: 100px;
-        background-color: ${({ theme }) => theme.palette.action.hover};
         font-weight: 500;
       }
     }
@@ -139,6 +236,7 @@ const StyledContent = styled.div `
     color: #888;
     pointer-events: none;
     height: 0;
+    white-space: nowrap;
   }
   .ProseMirror .is-empty::before {
     content: attr(data-placeholder);
@@ -146,6 +244,7 @@ const StyledContent = styled.div `
     color: #888;
     pointer-events: none;
     height: 0;
+    white-space: nowrap;
   }
 
   .ProseMirror .monolith-image.uploading {

package/dist/RichTextEditor/Toolbar/Toolbar.d.ts

@@ -18,7 +18,7 @@ export type ToolbarOptions = {
 };
 export type ToolbarProps = {
     className?: string;
-    editor: Editor | null;
+    editor: Editor;
     toolbarOptions?: ToolbarOptions;
 };
-export declare const Toolbar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<ToolbarProps, never>> & string & Omit<({ className, editor, toolbarOptions }: ToolbarProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const Toolbar: React.FC<ToolbarProps>;

package/dist/RichTextEditor/Toolbar/Toolbar.js

@@ -10,14 +10,27 @@ import RichTextEditorContext from "../Contexts/RichTextEditorContext";
 import { Button } from "../../Button";
 import TextColors from "../Enums/TextColors";
 import { SquircleIcon } from "lucide-react";
-export const Toolbar = styled(({ className, editor, toolbarOptions }) => {
+import { useToolbarState } from "./useToolbarState";
+const ToolbarContainer = styled.div `
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+  margin-bottom: 10px;
+  border-radius: 5px 5px 0 0;
+  border: 1px solid transparent;
+`;
+export const Toolbar = ({ className, editor, toolbarOptions, }) => {
     var _a;
     const theme = useTheme();
     const { controls } = toolbarOptions || {};
     const customItems = controls === null || controls === void 0 ? void 0 : controls.filter((control) => typeof control !== "string" &&
         (control.type === "menu" || control.type === "button"));
     const { font, setFont } = useContext(RichTextEditorContext);
-    return (_jsxs("div", { className: className, children: [(_a = customItems === null || customItems === void 0 ? void 0 : customItems.map) === null || _a === void 0 ? void 0 : _a.call(customItems, (item, index) => {
+    const { isInsideTable } = useToolbarState(editor);
+    return (_jsxs(ToolbarContainer, { className: className, children: [(_a = customItems === null || customItems === void 0 ? void 0 : customItems.map) === null || _a === void 0 ? void 0 : _a.call(customItems, (item, index) => {
                 var _a, _b;
                 if (item.type === "button") {
                     return (_jsx(Button, Object.assign({}, item.options, { children: (_a = item === null || item === void 0 ? void 0 : item.options) === null || _a === void 0 ? void 0 : _a.label }), index));
@@ -60,14 +73,80 @@ export const Toolbar = styled(({ className, editor, toolbarOptions }) => {
                                 borderRadius: "3px",
                             } }), item.label] })), size: "xxs", variant: "outlined", arrow: true, buttonProps: {
                     title: "Select Color",
-                }, children: "Color" })), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.BOLD)) && _jsx(BoldControl, { editor: editor }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.ITALIC)) && (_jsx(ItalicControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.UNDERLINE)) && (_jsx(UnderlineControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.STRIKE)) && (_jsx(StrikeThroughControl, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_1)) && (_jsx(Heading1Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_2)) && (_jsx(Heading2Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_3)) && (_jsx(Heading3Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_4)) && (_jsx(Heading4Control, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.BULLET_LIST)) && (_jsx(BulletListControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.ORDERED_LIST)) && (_jsx(OrderedListControl, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_LEFT)) && (_jsx(AlignLeftControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_CENTER)) && (_jsx(AlignCenterControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_RIGHT)) && (_jsx(AlignRightControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_JUSTIFIED)) && (_jsx(AlignJustifiedControl, { editor: editor }))] })] }));
-}) `
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 5px;
-  margin-bottom: 10px;
-  border-radius: 5px 5px 0 0;
-  border: 1px solid transparent;
-`;
+                }, children: "Color" })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TABLE)) && (_jsx(DropDownMenu, { data: [
+                    {
+                        label: "Insert Table",
+                        value: "insert-table",
+                        onClick: () => {
+                            editor === null || editor === void 0 ? void 0 : editor.chain().focus().insertTable().run();
+                        },
+                        disabled: isInsideTable,
+                    },
+                    {
+                        label: "Insert Column Before",
+                        value: "insert-column-before",
+                        onClick: () => {
+                            editor === null || editor === void 0 ? void 0 : editor.chain().focus().addColumnBefore().run();
+                        },
+                        disabled: !isInsideTable,
+                    },
+                    {
+                        label: "Insert Column After",
+                        value: "insert-column-after",
+                        onClick: () => {
+                            editor === null || editor === void 0 ? void 0 : editor.chain().focus().addColumnAfter().run();
+                        },
+                        disabled: !isInsideTable,
+                    },
+                    {
+                        label: "Delete Column",
+                        value: "delete-column",
+                        onClick: () => {
+                            editor === null || editor === void 0 ? void 0 : editor.chain().focus().deleteColumn().run();
+                        },
+                        disabled: !isInsideTable,
+                    },
+                    {
+                        label: "Insert Row Before",
+                        value: "insert-row-before",
+                        onClick: () => {
+                            editor === null || editor === void 0 ? void 0 : editor.chain().focus().addRowBefore().run();
+                        },
+                        disabled: !isInsideTable,
+                    },
+                    {
+                        label: "Insert Row After",
+                        value: "insert-row-after",
+                        onClick: () => {
+                            editor === null || editor === void 0 ? void 0 : editor.chain().focus().addRowAfter().run();
+                        },
+                        disabled: !isInsideTable,
+                    },
+                    {
+                        label: "Delete Row",
+                        value: "delete-row",
+                        onClick: () => {
+                            editor === null || editor === void 0 ? void 0 : editor.chain().focus().deleteRow().run();
+                        },
+                        disabled: !isInsideTable,
+                    },
+                    {
+                        label: "Toggle Header Row",
+                        value: "toggle-header-row",
+                        onClick: () => {
+                            editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleHeaderRow().run();
+                        },
+                        disabled: !isInsideTable,
+                    },
+                    {
+                        label: "Delete Table",
+                        value: "delete-table",
+                        onClick: () => {
+                            editor === null || editor === void 0 ? void 0 : editor.chain().focus().deleteTable().run();
+                        },
+                        disabled: !isInsideTable,
+                    },
+                ], size: "xxs", variant: "outlined", arrow: true, buttonProps: {
+                    title: "Select Color",
+                }, children: "Table" })), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.BOLD)) && _jsx(BoldControl, { editor: editor }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.ITALIC)) && (_jsx(ItalicControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.UNDERLINE)) && (_jsx(UnderlineControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.STRIKE)) && (_jsx(StrikeThroughControl, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_1)) && (_jsx(Heading1Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_2)) && (_jsx(Heading2Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_3)) && (_jsx(Heading3Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_4)) && (_jsx(Heading4Control, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.BULLET_LIST)) && (_jsx(BulletListControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.ORDERED_LIST)) && (_jsx(OrderedListControl, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_LEFT)) && (_jsx(AlignLeftControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_CENTER)) && (_jsx(AlignCenterControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_RIGHT)) && (_jsx(AlignRightControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_JUSTIFIED)) && (_jsx(AlignJustifiedControl, { editor: editor }))] })] }));
+};

package/dist/RichTextEditor/Toolbar/useToolbarState.d.ts

@@ -0,0 +1,30 @@
+import { Editor } from "@tiptap/react";
+export declare const useToolbarState: (editor: Editor) => {
+    isBold: boolean;
+    canBold: boolean;
+    isItalic: boolean;
+    canItalic: boolean;
+    isStrike: boolean;
+    canStrike: boolean;
+    isCode: boolean;
+    canCode: boolean;
+    canClearMarks: boolean;
+    isParagraph: boolean;
+    isHeading1: boolean;
+    isHeading2: boolean;
+    isHeading3: boolean;
+    isHeading4: boolean;
+    isHeading5: boolean;
+    isHeading6: boolean;
+    isBulletList: boolean;
+    isOrderedList: boolean;
+    isCodeBlock: boolean;
+    isBlockquote: boolean;
+    canUndo: boolean;
+    canRedo: boolean;
+    isTable: boolean;
+    isTableRow: boolean;
+    isTableCell: boolean;
+    isTableHeader: boolean;
+    isInsideTable: boolean;
+};

package/dist/RichTextEditor/Toolbar/useToolbarState.js

@@ -0,0 +1,44 @@
+import { useEditorState } from "@tiptap/react";
+export const useToolbarState = (editor) => {
+    const editorState = useEditorState({
+        editor,
+        selector: (ctx) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
+            const isTable = (_a = ctx.editor.isActive("table")) !== null && _a !== void 0 ? _a : false;
+            const isTableRow = (_b = ctx.editor.isActive("tableRow")) !== null && _b !== void 0 ? _b : false;
+            const isTableCell = (_c = ctx.editor.isActive("tableCell")) !== null && _c !== void 0 ? _c : false;
+            const isTableHeader = (_d = ctx.editor.isActive("tableHeader")) !== null && _d !== void 0 ? _d : false;
+            const isInsideTable = isTable || isTableRow || isTableCell || isTableHeader;
+            return {
+                isBold: (_e = ctx.editor.isActive("bold")) !== null && _e !== void 0 ? _e : false,
+                canBold: (_f = ctx.editor.can().chain().toggleBold().run()) !== null && _f !== void 0 ? _f : false,
+                isItalic: (_g = ctx.editor.isActive("italic")) !== null && _g !== void 0 ? _g : false,
+                canItalic: (_h = ctx.editor.can().chain().toggleItalic().run()) !== null && _h !== void 0 ? _h : false,
+                isStrike: (_j = ctx.editor.isActive("strike")) !== null && _j !== void 0 ? _j : false,
+                canStrike: (_k = ctx.editor.can().chain().toggleStrike().run()) !== null && _k !== void 0 ? _k : false,
+                isCode: (_l = ctx.editor.isActive("code")) !== null && _l !== void 0 ? _l : false,
+                canCode: (_m = ctx.editor.can().chain().toggleCode().run()) !== null && _m !== void 0 ? _m : false,
+                canClearMarks: (_o = ctx.editor.can().chain().unsetAllMarks().run()) !== null && _o !== void 0 ? _o : false,
+                isParagraph: (_p = ctx.editor.isActive("paragraph")) !== null && _p !== void 0 ? _p : false,
+                isHeading1: (_q = ctx.editor.isActive("heading", { level: 1 })) !== null && _q !== void 0 ? _q : false,
+                isHeading2: (_r = ctx.editor.isActive("heading", { level: 2 })) !== null && _r !== void 0 ? _r : false,
+                isHeading3: (_s = ctx.editor.isActive("heading", { level: 3 })) !== null && _s !== void 0 ? _s : false,
+                isHeading4: (_t = ctx.editor.isActive("heading", { level: 4 })) !== null && _t !== void 0 ? _t : false,
+                isHeading5: (_u = ctx.editor.isActive("heading", { level: 5 })) !== null && _u !== void 0 ? _u : false,
+                isHeading6: (_v = ctx.editor.isActive("heading", { level: 6 })) !== null && _v !== void 0 ? _v : false,
+                isBulletList: (_w = ctx.editor.isActive("bulletList")) !== null && _w !== void 0 ? _w : false,
+                isOrderedList: (_x = ctx.editor.isActive("orderedList")) !== null && _x !== void 0 ? _x : false,
+                isCodeBlock: (_y = ctx.editor.isActive("codeBlock")) !== null && _y !== void 0 ? _y : false,
+                isBlockquote: (_z = ctx.editor.isActive("blockquote")) !== null && _z !== void 0 ? _z : false,
+                canUndo: (_0 = ctx.editor.can().chain().undo().run()) !== null && _0 !== void 0 ? _0 : false,
+                canRedo: (_1 = ctx.editor.can().chain().redo().run()) !== null && _1 !== void 0 ? _1 : false,
+                isTable,
+                isTableRow,
+                isTableCell,
+                isTableHeader,
+                isInsideTable,
+            };
+        },
+    });
+    return editorState;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",
@@ -33,22 +33,23 @@
     "@radix-ui/react-switch": "^1.0.7",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@tabler/icons-react": "^3.11.0",
-    "@tiptap/extension-color": "^2.9.1",
-    "@tiptap/extension-focus": "^2.5.9",
-    "@tiptap/extension-horizontal-rule": "^2.5.9",
-    "@tiptap/extension-image": "^2.5.9",
-    "@tiptap/extension-placeholder": "^2.5.9",
-    "@tiptap/extension-table": "^2.5.8",
-    "@tiptap/extension-table-cell": "^2.5.8",
-    "@tiptap/extension-table-header": "^2.5.8",
-    "@tiptap/extension-table-row": "^2.5.8",
-    "@tiptap/extension-text-align": "^2.5.8",
-    "@tiptap/extension-text-style": "^2.9.1",
-    "@tiptap/extension-underline": "^2.5.8",
-    "@tiptap/pm": "^2.5.8",
-    "@tiptap/react": "^2.5.8",
-    "@tiptap/starter-kit": "^2.5.8",
-    "@tiptap/suggestion": "^2.5.9",
+    "@tiptap/extension-color": "^3.0.9",
+    "@tiptap/extension-focus": "^3.0.9",
+    "@tiptap/extension-horizontal-rule": "^3.0.9",
+    "@tiptap/extension-image": "^3.0.9",
+    "@tiptap/extension-placeholder": "^3.0.9",
+    "@tiptap/extension-table": "^3.0.9",
+    "@tiptap/extension-table-cell": "^3.0.9",
+    "@tiptap/extension-table-header": "^3.0.9",
+    "@tiptap/extension-table-row": "^3.0.9",
+    "@tiptap/extension-text-align": "^3.0.9",
+    "@tiptap/extension-text-style": "^3.0.9",
+    "@tiptap/extension-underline": "^3.0.9",
+    "@tiptap/extensions": "^3.0.9",
+    "@tiptap/pm": "^3.0.9",
+    "@tiptap/react": "^3.0.9",
+    "@tiptap/starter-kit": "^3.0.9",
+    "@tiptap/suggestion": "^3.0.9",
     "@uiw/codemirror-theme-vscode": "^4.23.6",
     "@uiw/react-codemirror": "^4.23.6",
     "deepmerge": "^4.3.1",