@monolith-forensics/monolith-ui 1.1.84 → 1.1.86

package/dist/RichTextEditor/Components/BubbleMenu.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import Extensions from "../Enums/Extensions";
-import { BoldIcon, ItalicIcon, UnderlineIcon, CaseSensitiveIcon, ListIcon, ListOrderedIcon, StrikethroughIcon, Heading1Icon, Heading2Icon, Heading3Icon, Heading4Icon, RemoveFormattingIcon, } from "lucide-react";
+import { BoldIcon, ItalicIcon, UnderlineIcon, CaseSensitiveIcon, ListIcon, ListOrderedIcon, StrikethroughIcon, Heading1Icon, Heading2Icon, Heading3Icon, Heading4Icon, RemoveFormattingIcon, SquircleIcon, } from "lucide-react";
 import DropDownMenu from "../../DropDownMenu";
 import { FloatingPortal, useFloating } from "@floating-ui/react";
 import { useEffect, useRef } from "react";
 import Button from "../../Button";
+import TextColors from "../Enums/TextColors";
+import DefaultColorIcon from "./DefaultColorIcon";
 const getMenuItems = (editor, customMenuItems) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const node = (_c = (_b = (_a = editor === null || editor === void 0 ? void 0 : editor.state) === null || _a === void 0 ? void 0 : _a.selection) === null || _b === void 0 ? void 0 : _b.$from) === null || _c === void 0 ? void 0 : _c.parent;
@@ -133,6 +135,45 @@ const getMenuItems = (editor, customMenuItems) => {
                 },
             ],
         },
+        {
+            name: "color",
+            label: "Color",
+            type: "menu",
+            arrow: true,
+            buttonProps: {
+                // leftSection: nodeTypeIcon,
+                style: { fontSize: 11, padding: "4px" },
+            },
+            items: [
+                // remove Color Style
+                {
+                    label: "Default",
+                    value: "default",
+                    leftSection: _jsx(DefaultColorIcon, { size: 12 }),
+                    data: {
+                        command: (editor) => {
+                            editor.chain().focus().unsetColor().run();
+                        },
+                    },
+                },
+                ...Object.keys(TextColors).map((color) => {
+                    const colorKey = color;
+                    return {
+                        label: color,
+                        value: TextColors[colorKey],
+                        leftSection: (_jsx(SquircleIcon, { size: 12, color: TextColors[colorKey], style: {
+                                backgroundColor: TextColors[colorKey],
+                                borderRadius: "3px",
+                            } })),
+                        data: {
+                            command: (editor) => {
+                                editor.chain().focus().setColor(TextColors[colorKey]).run();
+                            },
+                        },
+                    };
+                }),
+            ],
+        },
         {
             name: Extensions.Bold,
             icon: BoldIcon,

package/dist/RichTextEditor/Components/DefaultColorIcon.d.ts

@@ -0,0 +1,4 @@
+declare const DefaultColorIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>, keyof import("react").Component<any, {}, any>>;
+export default DefaultColorIcon;

package/dist/RichTextEditor/Components/DefaultColorIcon.js

@@ -0,0 +1,7 @@
+import { SquircleIcon } from "lucide-react";
+import styled from "styled-components";
+const DefaultColorIcon = styled(SquircleIcon) `
+  background-color: ${({ theme }) => theme.palette.text.primary};
+  border-radius: 3px;
+`;
+export default DefaultColorIcon;

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

@@ -15,6 +15,7 @@ declare enum Controls {
     TEXT_ALIGN_CENTER = "textAlignCenter",
     TEXT_ALIGN_RIGHT = "textAlignRight",
     TEXT_ALIGN_JUSTIFIED = "textAlignJustified",
-    FONT = "font"
+    FONT = "font",
+    COLOR = "color"
 }
 export default Controls;

package/dist/RichTextEditor/Enums/Controls.js

@@ -17,5 +17,6 @@ var Controls;
     Controls["TEXT_ALIGN_RIGHT"] = "textAlignRight";
     Controls["TEXT_ALIGN_JUSTIFIED"] = "textAlignJustified";
     Controls["FONT"] = "font";
+    Controls["COLOR"] = "color";
 })(Controls || (Controls = {}));
 export default Controls;

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

@@ -4,6 +4,8 @@ declare enum Extensions {
     Underline = "underline",
     Bold = "bold",
     Italic = "italic",
+    Color = "color",
+    TextStyle = "textStyle",
     Strike = "strike",
     BulletList = "bulletList",
     OrderedList = "orderedList",

package/dist/RichTextEditor/Enums/Extensions.js

@@ -5,6 +5,8 @@ var Extensions;
     Extensions["Underline"] = "underline";
     Extensions["Bold"] = "bold";
     Extensions["Italic"] = "italic";
+    Extensions["Color"] = "color";
+    Extensions["TextStyle"] = "textStyle";
     Extensions["Strike"] = "strike";
     Extensions["BulletList"] = "bulletList";
     Extensions["OrderedList"] = "orderedList";

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

@@ -0,0 +1,13 @@
+declare enum TextColors {
+    Black = "black",
+    Gray = "gray",
+    White = "white",
+    Red = "red",
+    Green = "limegreen",
+    Blue = "#4782da",
+    Yellow = "yellow",
+    Pink = "pink",
+    Purple = "purple",
+    Orange = "#f59e0b"
+}
+export default TextColors;

package/dist/RichTextEditor/Enums/TextColors.js

@@ -0,0 +1,14 @@
+var TextColors;
+(function (TextColors) {
+    TextColors["Black"] = "black";
+    TextColors["Gray"] = "gray";
+    TextColors["White"] = "white";
+    TextColors["Red"] = "red";
+    TextColors["Green"] = "limegreen";
+    TextColors["Blue"] = "#4782da";
+    TextColors["Yellow"] = "yellow";
+    TextColors["Pink"] = "pink";
+    TextColors["Purple"] = "purple";
+    TextColors["Orange"] = "#f59e0b";
+})(TextColors || (TextColors = {}));
+export default TextColors;

package/dist/RichTextEditor/Extensions/getTiptapExtensions.js

@@ -8,6 +8,8 @@ import TableCell from "@tiptap/extension-table-cell";
 import TableHeader from "@tiptap/extension-table-header";
 import TableRow from "@tiptap/extension-table-row";
 import Placeholder from "@tiptap/extension-placeholder";
+import { Color } from "@tiptap/extension-color";
+import TextStyle from "@tiptap/extension-text-style";
 import { InputRule, Extension } from "@tiptap/core";
 import Focus from "@tiptap/extension-focus";
 import UploadImagesPlugin from "../Plugins/UploadImagesPlugin";
@@ -72,6 +74,16 @@ const getTipTapExtensions = ({ extensions = [], slashCommands = [], bubbleMenuOp
                 gapcursor: false,
             }),
         },
+        {
+            name: Extensions.TextStyle,
+            category: "default",
+            extension: TextStyle,
+        },
+        {
+            name: Extensions.Color,
+            category: "default",
+            extension: Color,
+        },
         {
             name: Extensions.Underline,
             category: "default",

package/dist/RichTextEditor/Toolbar/Toolbar.js

@@ -8,10 +8,14 @@ import Fonts from "../Enums/Fonts";
 import { useContext } from "react";
 import RichTextEditorContext from "../Contexts/RichTextEditorContext";
 import Button from "../../Button";
+import TextColors from "../Enums/TextColors";
+import DefaultColorIcon from "../Components/DefaultColorIcon";
+import { SquircleIcon } from "lucide-react";
 const Toolbar = styled(({ className, editor, toolbarOptions }) => {
     var _a;
     const { controls } = toolbarOptions || {};
-    const customItems = controls === null || controls === void 0 ? void 0 : controls.filter((control) => typeof control !== "string" && control.type === ("menu" || "button"));
+    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) => {
                 var _a, _b;
@@ -32,7 +36,35 @@ const Toolbar = styled(({ className, editor, toolbarOptions }) => {
                         fontWeight: "normal",
                     },
                     title: "Select Font",
-                }, children: (font || Fonts.DEFAULT) })), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.UNDO)) && _jsx(UndoControl, { editor: editor }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.REDO)) && _jsx(RedoControl, { editor: editor })] }), _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 }))] })] }));
+                }, children: (font || Fonts.DEFAULT) })), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.UNDO)) && _jsx(UndoControl, { editor: editor }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.REDO)) && _jsx(RedoControl, { editor: editor })] }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.COLOR)) && (_jsx(DropDownMenu, { data: [
+                    {
+                        label: "Default",
+                        value: "default",
+                        leftSection: _jsx(DefaultColorIcon, { size: 12 }),
+                        onClick: () => {
+                            editor === null || editor === void 0 ? void 0 : editor.chain().focus().unsetColor().run();
+                        },
+                    },
+                    ...Object.keys(TextColors).map((color) => {
+                        const colorKey = color;
+                        return {
+                            label: color,
+                            value: TextColors[colorKey],
+                            leftSection: (_jsx(SquircleIcon, { size: 12, color: TextColors[colorKey], style: {
+                                    backgroundColor: TextColors[colorKey],
+                                    borderRadius: "3px",
+                                } })),
+                            onClick: () => {
+                                editor === null || editor === void 0 ? void 0 : editor.chain().focus().setColor(TextColors[colorKey]).run();
+                            },
+                        };
+                    }),
+                ], size: "xxs", variant: "outlined", arrow: true, buttonProps: {
+                    style: {
+                        fontWeight: "normal",
+                    },
+                    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;

package/dist/Table/Table.d.ts

@@ -1,5 +1,5 @@
 import "overlayscrollbars/overlayscrollbars.css";
-interface ColumnProps {
+export interface ColumnProps {
     className?: string;
     key?: string | number;
     dataField: string;
@@ -7,6 +7,7 @@ interface ColumnProps {
     columnId?: string | number;
     allowSorting?: boolean;
     allowReorder?: boolean;
+    allowResize?: boolean;
     resizeEnabled?: boolean;
     width?: number;
     sorting?: {
@@ -21,6 +22,7 @@ interface ColumnProps {
 }
 interface ColumnType extends React.FunctionComponent<ColumnProps> {
     displayName: string;
+    props?: ColumnProps;
 }
 export declare const Column: ColumnType;
 interface onResizeProps {
@@ -58,7 +60,7 @@ export declare const useTable: () => {
 };
 interface TableProps {
     className?: string;
-    children: React.ReactNode | React.ReactNode[];
+    children: ColumnType | ColumnType[];
     data: {
         [key: string]: any;
     }[];

package/dist/Table/Table.js

@@ -23,7 +23,7 @@ import moment from "moment";
 import { CheckBox } from "..";
 import { Themes } from "../theme";
 const MIN_COLUMN_WIDTH = 125;
-export const Column = ({ dataField, caption, columnId = shortUUID.generate(), sorting, format, }) => {
+export const Column = () => {
     return null;
 };
 Column.displayName = "Column";
@@ -443,23 +443,21 @@ const Table = styled(({ className, children, data, rowHeight, headerHeight, tabl
     children = useMemo(() => {
         return Array.isArray(children) ? children : [children];
     }, [children]);
-    let columns = useMemo(() => {
-        var _a, _b;
-        return (_b = (_a = children === null || children === void 0 ? void 0 : children.filter) === null || _a === void 0 ? void 0 : _a.call(children, (child) => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "Column"; })) === null || _b === void 0 ? void 0 : _b.map((column) => {
-            return cloneElement(column, {
-                columnId: shortUUID.generate(),
-                allowResize: allowColumnResize !== undefined
-                    ? allowColumnResize
-                    : column.props.allowResize,
-                allowReorder: allowColumnReorder !== undefined
-                    ? allowColumnReorder
-                    : column.props.allowReorder,
-                resizeEnabled: allowColumnResize !== undefined
-                    ? allowColumnResize
-                    : column.props.resizeEnabled,
-            });
+    let columns = useMemo(() => children === null || children === void 0 ? void 0 : children.map((column) => {
+        var _a, _b, _c;
+        return cloneElement(column, {
+            columnId: shortUUID.generate(),
+            allowResize: allowColumnResize !== undefined
+                ? allowColumnResize
+                : (_a = column === null || column === void 0 ? void 0 : column.props) === null || _a === void 0 ? void 0 : _a.allowResize,
+            allowReorder: allowColumnReorder !== undefined
+                ? allowColumnReorder
+                : (_b = column === null || column === void 0 ? void 0 : column.props) === null || _b === void 0 ? void 0 : _b.allowReorder,
+            resizeEnabled: allowColumnResize !== undefined
+                ? allowColumnResize
+                : (_c = column === null || column === void 0 ? void 0 : column.props) === null || _c === void 0 ? void 0 : _c.resizeEnabled,
         });
-    }, [children]);
+    }), [children]);
     const [columnOrder, setColumnOrder] = useState(columns.map((col, index) => {
         var _a, _b;
         return {

package/dist/Table/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from "./Table";
 export { Column } from "./Table";
+export type { ColumnProps } from "./Table";

package/dist/index.d.ts

@@ -25,6 +25,7 @@ export { default as Tooltip } from "./Tooltip";
 export { default as Pill } from "./Pill";
 export { default as Calendar } from "./Calendar";
 export { default as Table } from "./Table";
+export type { ColumnProps } from "./Table";
 export { Column } from "./Table";
 export { default as MonolithUIProvider } from "./MonolithUIProvider";
 export { useMonolithUITheme } from "./MonolithUIProvider";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.1.84",
+  "version": "1.1.86",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",
@@ -28,6 +28,7 @@
     "@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",
@@ -37,6 +38,7 @@
     "@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",