@monolith-forensics/monolith-ui 1.9.1-dev.9 → 1.9.3-dev.1

package/dist/RichTextEditor/Components/TableTools/TableTools.styled.js

@@ -0,0 +1,167 @@
+import styled from "styled-components";
+import { Button } from "../../../Button";
+import { getControlSizeTokens } from "../../../core";
+import FieldLabel from "../../../FieldLabel";
+import { Popover } from "../../../Popover";
+import { CORNER_BUTTON_SIZE, RAIL_THICKNESS } from "./TableTools.constants";
+export const TableToolsPanel = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-width: 250px;
+  color: ${({ theme }) => theme.palette.text.primary};
+`;
+export const TableToolsSection = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+export const TableToolsSectionTitle = styled(FieldLabel) `
+  color: ${({ theme }) => theme.palette.text.secondary};
+  font-size: 0.6875rem;
+  font-weight: 600;
+  line-height: 1rem;
+  text-transform: uppercase;
+`;
+export const InsertGrid = styled.div `
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.5rem;
+`;
+export const Field = styled.label `
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  color: ${({ theme }) => theme.palette.text.secondary};
+  font-size: 0.75rem;
+  line-height: 1rem;
+`;
+export const SwitchRow = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  color: ${({ theme }) => theme.palette.text.secondary};
+  font-size: 0.75rem;
+  line-height: 1rem;
+`;
+export const RailRoot = styled.div `
+  display: flex;
+  position: fixed;
+  top: ${({ $rect }) => `${$rect.top}px`};
+  left: ${({ $rect }) => `${$rect.left}px`};
+  z-index: 1500;
+  width: ${({ $rect }) => `${$rect.width}px`};
+  height: ${({ $rect }) => `${$rect.height}px`};
+
+  top: ${({ $rect, $kind }) => $kind === "column" ? `${$rect.top + 5}px` : `${$rect.top}px`};
+
+  left: ${({ $rect, $kind }) => $kind === "row" ? `${$rect.left + 4}px` : `${$rect.left}px`};
+
+  button {
+    margin: auto;
+    width: 100%;
+    height: 100%;
+
+    width: ${({ $kind }) => $kind === "column" ? "30px" : RAIL_THICKNESS + "px"};
+
+    height: ${({ $kind }) => $kind === "row" ? "30px" : RAIL_THICKNESS + "px"};
+
+    min-height: 0;
+    padding: 0;
+    border-radius: 10px;
+    background-color: ${({ theme }) => theme.palette.background.paper};
+    color: ${({ theme }) => theme.palette.text.secondary};
+
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.primary.main};
+      color: white;
+    }
+  }
+`;
+export const MenuPanel = styled.div `
+  display: flex;
+  flex-direction: column;
+  min-width: 220px;
+  color: ${({ theme }) => theme.palette.text.primary};
+`;
+export const MenuDropdown = styled(Popover.Dropdown) `
+  min-width: 180px;
+  border-radius: 5px;
+  border: 1px solid ${({ theme }) => theme.palette.divider};
+  background-color: ${({ theme }) => theme.palette.input.background};
+  box-shadow: none;
+  padding: 5px;
+`;
+export const MenuGroup = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding-top: ${({ $withDivider }) => ($withDivider ? "5px" : 0)};
+  margin-top: ${({ $withDivider }) => ($withDivider ? "5px" : 0)};
+  border-top: ${({ $withDivider, theme }) => $withDivider ? `1px solid ${theme.palette.divider}` : 0};
+`;
+export const MenuButton = styled(Button) `
+  min-width: 100%;
+  height: ${getControlSizeTokens("sm").menuRowHeight}px;
+  min-height: ${getControlSizeTokens("sm").menuRowHeight}px;
+  padding: 0 ${getControlSizeTokens("sm").menuItemPaddingX}px;
+  border: none;
+  border-radius: 3px;
+  color: ${({ $danger, theme }) => $danger ? theme.palette.error.main : theme.palette.text.primary};
+  font-weight: normal;
+  justify-content: flex-start;
+  width: 100%;
+
+  .button-label {
+    display: inline-block;
+    min-width: 0;
+    width: 100%;
+    overflow: hidden;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [data-position="left"] {
+    color: currentColor;
+    opacity: 0.8;
+  }
+
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.action.hover};
+    color: ${({ $danger, theme }) => $danger ? theme.palette.error.main : theme.palette.text.primary};
+  }
+
+  &:active {
+    translate: none;
+  }
+
+  &:focus {
+    text-decoration: none;
+  }
+`;
+export const CornerRoot = styled.div `
+  display: flex;
+  position: fixed;
+  top: ${({ $top }) => `${$top}px`};
+  left: ${({ $left }) => `${$left}px`};
+  z-index: 1500;
+  width: ${CORNER_BUTTON_SIZE}px;
+  height: ${CORNER_BUTTON_SIZE}px;
+
+  button {
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    padding: 0;
+    border-radius: 6px;
+    background-color: ${({ theme }) => theme.palette.background.paper};
+    color: ${({ theme }) => theme.palette.text.secondary};
+
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.primary.main};
+      color: white;
+    }
+  }
+`;

package/dist/RichTextEditor/Components/TableTools/TableTools.types.d.ts

@@ -0,0 +1,76 @@
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import type { TableMap } from "@tiptap/pm/tables";
+import type { Editor } from "@tiptap/react";
+import type { MouseEvent as ReactMouseEvent, ReactNode } from "react";
+export type TableInsertOptions = {
+    rows: number;
+    cols: number;
+    withHeaderRow: boolean;
+};
+export type TableToolsContentProps = {
+    editor: Editor | null;
+    showInsert?: boolean;
+    onInsert?: () => void;
+    onAction?: () => void;
+};
+export type TableToolsPopoverProps = {
+    editor: Editor | null;
+};
+export type TableRailsProps = {
+    editor: Editor | null;
+};
+export type RailKind = "row" | "column";
+export type OpenMenuKind = RailKind | "table";
+export type Point = {
+    x: number;
+    y: number;
+};
+export type RailRect = {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};
+export type TableContext = {
+    node: ProseMirrorNode;
+    pos: number;
+    start: number;
+    map: TableMap;
+};
+export type TableRailTarget = {
+    kind: RailKind;
+    rowIndex: number;
+    colIndex: number;
+    tableElement: HTMLTableElement;
+    tableRect: RailRect;
+    tableContext: TableContext;
+    rowRect: RailRect;
+    columnRect: RailRect;
+};
+export type RailTarget = TableRailTarget;
+export type TableToolAction = {
+    label: string;
+    leftSection: ReactNode;
+    disabled?: boolean;
+    danger?: boolean;
+    onClick: () => void;
+};
+export type TableToolActionGroup = {
+    label: string;
+    actions: TableToolAction[];
+};
+export type RailAction = TableToolAction;
+export type RailActionGroup = TableToolActionGroup;
+export type TableCornerMenuProps = {
+    editor: Editor | null;
+    target: TableRailTarget;
+    opened: boolean;
+    onOpen: () => void;
+    onClose: () => void;
+    onAction: () => void;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+    onMouseDown: (event: ReactMouseEvent<HTMLButtonElement>) => void;
+};
+export type TableAction = TableToolAction;
+export type TableActionGroup = TableToolActionGroup;

package/dist/RichTextEditor/Components/TableTools/TableTools.types.js

@@ -0,0 +1 @@
+export {};

package/dist/RichTextEditor/Components/TableTools/TableTools.utils.d.ts

@@ -0,0 +1,4 @@
+export * from "./TableTools.commands";
+export * from "./TableTools.constants";
+export * from "./TableTools.geometry";
+export * from "./TableTools.selectors";

package/dist/RichTextEditor/Components/TableTools/TableTools.utils.js

@@ -0,0 +1,4 @@
+export * from "./TableTools.commands";
+export * from "./TableTools.constants";
+export * from "./TableTools.geometry";
+export * from "./TableTools.selectors";

package/dist/RichTextEditor/Components/TableTools/TableToolsPopover.d.ts

@@ -0,0 +1,2 @@
+import type { TableToolsPopoverProps } from "./TableTools.types";
+export declare const TableToolsPopover: ({ editor }: TableToolsPopoverProps) => import("react/jsx-runtime").JSX.Element;

package/dist/RichTextEditor/Components/TableTools/TableToolsPopover.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Table2Icon } from "lucide-react";
+import { useState } from "react";
+import { Button } from "../../../Button";
+import { Popover } from "../../../Popover";
+import { hasTableExtension, isTableActive } from "./TableTools.selectors";
+import { TableToolsContent } from "./TableInsertControls";
+export const TableToolsPopover = ({ editor }) => {
+    const [opened, setOpened] = useState(false);
+    const selected = opened || isTableActive(editor);
+    return (_jsxs(Popover, { opened: opened, onChange: setOpened, position: "bottom", width: 285, trapFocus: true, children: [_jsx(Popover.Target, { children: _jsx(Button, { size: "xs", variant: "outlined", title: "Table", "aria-label": "Table", selected: selected, disabled: !hasTableExtension(editor), style: { padding: "1px 6px" }, children: _jsx(Table2Icon, { size: 14 }) }) }), _jsx(Popover.Dropdown, { children: _jsx(TableToolsContent, { editor: editor, showInsert: true, onInsert: () => setOpened(false) }) })] }));
+};

package/dist/RichTextEditor/Components/TableTools/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./TableTools";
+export { hasTableExtension, isTableActive } from "./TableTools.selectors";
+export type { OpenMenuKind, Point, RailAction, RailActionGroup, RailKind, RailRect, RailTarget, TableAction, TableActionGroup, TableContext, TableCornerMenuProps, TableInsertOptions, TableRailTarget, TableRailsProps, TableToolAction, TableToolActionGroup, TableToolsContentProps, TableToolsPopoverProps, } from "./TableTools.types";

package/dist/RichTextEditor/Components/TableTools/index.js

@@ -0,0 +1,2 @@
+export * from "./TableTools";
+export { hasTableExtension, isTableActive } from "./TableTools.selectors";

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

@@ -5,6 +5,9 @@ export declare enum Controls {
     ITALIC = "italic",
     UNDERLINE = "underline",
     STRIKE = "strike",
+    CLEAR_FORMATTING = "clearFormatting",
+    CODE = "code",
+    CODE_BLOCK = "codeBlock",
     HEADING_1 = "heading_1",
     HEADING_2 = "heading_2",
     HEADING_3 = "heading_3",
@@ -16,5 +19,8 @@ export declare enum Controls {
     TEXT_ALIGN_RIGHT = "textAlignRight",
     TEXT_ALIGN_JUSTIFIED = "textAlignJustified",
     FONT = "font",
-    COLOR = "color"
+    COLOR = "color",
+    HIGHLIGHT = "highlight",
+    LINK = "link",
+    TABLE = "table"
 }

package/dist/RichTextEditor/Enums/Controls.js

@@ -6,6 +6,9 @@ export var Controls;
     Controls["ITALIC"] = "italic";
     Controls["UNDERLINE"] = "underline";
     Controls["STRIKE"] = "strike";
+    Controls["CLEAR_FORMATTING"] = "clearFormatting";
+    Controls["CODE"] = "code";
+    Controls["CODE_BLOCK"] = "codeBlock";
     Controls["HEADING_1"] = "heading_1";
     Controls["HEADING_2"] = "heading_2";
     Controls["HEADING_3"] = "heading_3";
@@ -18,4 +21,7 @@ export var Controls;
     Controls["TEXT_ALIGN_JUSTIFIED"] = "textAlignJustified";
     Controls["FONT"] = "font";
     Controls["COLOR"] = "color";
+    Controls["HIGHLIGHT"] = "highlight";
+    Controls["LINK"] = "link";
+    Controls["TABLE"] = "table";
 })(Controls || (Controls = {}));

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

@@ -4,7 +4,11 @@ export declare enum Extensions {
     Underline = "underline",
     Bold = "bold",
     Italic = "italic",
+    Code = "code",
+    CodeBlock = "codeBlock",
     Color = "color",
+    Highlight = "highlight",
+    Link = "link",
     TextStyle = "textStyle",
     Strike = "strike",
     BulletList = "bulletList",

package/dist/RichTextEditor/Enums/Extensions.js

@@ -5,7 +5,11 @@ export var Extensions;
     Extensions["Underline"] = "underline";
     Extensions["Bold"] = "bold";
     Extensions["Italic"] = "italic";
+    Extensions["Code"] = "code";
+    Extensions["CodeBlock"] = "codeBlock";
     Extensions["Color"] = "color";
+    Extensions["Highlight"] = "highlight";
+    Extensions["Link"] = "link";
     Extensions["TextStyle"] = "textStyle";
     Extensions["Strike"] = "strike";
     Extensions["BulletList"] = "bulletList";

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

@@ -0,0 +1,9 @@
+declare enum HighlightColors {
+    Yellow = "rgba(250, 204, 21, 0.38)",
+    Green = "rgba(34, 197, 94, 0.34)",
+    Blue = "rgba(59, 130, 246, 0.34)",
+    Pink = "rgba(236, 72, 153, 0.32)",
+    Purple = "rgba(168, 85, 247, 0.34)",
+    Orange = "rgba(249, 115, 22, 0.34)"
+}
+export default HighlightColors;

package/dist/RichTextEditor/Enums/HighlightColors.js

@@ -0,0 +1,10 @@
+var HighlightColors;
+(function (HighlightColors) {
+    HighlightColors["Yellow"] = "rgba(250, 204, 21, 0.38)";
+    HighlightColors["Green"] = "rgba(34, 197, 94, 0.34)";
+    HighlightColors["Blue"] = "rgba(59, 130, 246, 0.34)";
+    HighlightColors["Pink"] = "rgba(236, 72, 153, 0.32)";
+    HighlightColors["Purple"] = "rgba(168, 85, 247, 0.34)";
+    HighlightColors["Orange"] = "rgba(249, 115, 22, 0.34)";
+})(HighlightColors || (HighlightColors = {}));
+export default HighlightColors;

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

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

package/dist/RichTextEditor/Enums/SlashCommands.js

@@ -7,7 +7,10 @@ export var SlashCommands;
     SlashCommands["Heading4"] = "Heading 4";
     SlashCommands["BulletList"] = "Bullet List";
     SlashCommands["NumberedList"] = "Numbered List";
+    SlashCommands["Code"] = "Code";
+    SlashCommands["CodeBlock"] = "Code Block";
     SlashCommands["CurrentDate"] = "Current Date";
     SlashCommands["CurrentTimestamp"] = "Current Timestamp";
     SlashCommands["Image"] = "Image";
+    SlashCommands["Table"] = "Table";
 })(SlashCommands || (SlashCommands = {}));

package/dist/RichTextEditor/Extensions/SlashCommandList.js

@@ -62,7 +62,6 @@ const CommandDescription = styled.div `
   color: ${({ theme }) => theme.palette.text.secondary};
   text-overflow: ellipsis;
   overflow: hidden;
-  white-space: nowrap;
 `;
 const updateScrollView = (container, item) => {
     const containerHeight = container.offsetHeight;

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

@@ -1,10 +1,30 @@
-import { Extension } from "@tiptap/core";
+import type { ComponentType } from "react";
+import { Extension, Editor } from "@tiptap/core";
 import { HandleImageUpload } from "../Plugins/UploadImagesPlugin.js";
 import { SlashCommands } from "../Enums";
-type CommandName = keyof typeof SlashCommands;
+export type SlashCommandRange = {
+    from: number;
+    to: number;
+};
+export type SlashCommandActionProps = {
+    editor: Editor;
+    range: SlashCommandRange;
+};
+export type CustomSlashCommand = {
+    id: string;
+    title: string;
+    description?: string;
+    searchTerms?: string[];
+    icon?: ComponentType<{
+        size?: number;
+    }>;
+    command: (props: SlashCommandActionProps) => void;
+};
 interface SlashCommandOptions {
     handleImageUpload?: HandleImageUpload;
-    commands?: CommandName[];
+    commands?: SlashCommands[];
+    customCommands?: CustomSlashCommand[];
+    getCustomCommands?: () => CustomSlashCommand[];
 }
 declare const getSlashCommand: (options?: SlashCommandOptions) => Extension;
 export default getSlashCommand;

package/dist/RichTextEditor/Extensions/getSlashCommand.js

@@ -11,22 +11,23 @@ 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, CodeIcon, ClockIcon, SquareCodeIcon, Table2Icon, } from "lucide-react";
 import { startImageUpload, } from "../Plugins/UploadImagesPlugin.js";
 import { PluginKey } from "@tiptap/pm/state";
 import SlashCommandList from "./SlashCommandList";
 import { SlashCommands } from "../Enums";
 import moment from "moment/moment.js";
+import { DEFAULT_CODE_BLOCK_LANGUAGE } from "../Utils/codeBlockUtils";
 const SlashCommandPluginKey = new PluginKey("slash-command");
 const getCommandItems = (values, options) => {
-    var _a;
+    var _a, _b;
     if ((_a = options === null || options === void 0 ? void 0 : options.commands) === null || _a === void 0 ? void 0 : _a.includes(SlashCommands.Image)) {
         // Assert that options.handleImageUpload is defined
         if (!options.handleImageUpload) {
             throw new Error("options.handleImageUpload is required when using the Image command.");
         }
     }
-    return [
+    const builtInItems = [
         {
             title: SlashCommands.Text,
             description: "Just start typing with plain text.",
@@ -115,6 +116,29 @@ const getCommandItems = (values, options) => {
                 editor.chain().focus().deleteRange(range).toggleOrderedList().run();
             },
         },
+        {
+            title: SlashCommands.Code,
+            description: "Start typing inline code.",
+            searchTerms: ["inline", "monospace"],
+            icon: CodeIcon,
+            command: ({ editor, range }) => {
+                editor.chain().focus().deleteRange(range).setCode().run();
+            },
+        },
+        {
+            title: SlashCommands.CodeBlock,
+            description: "Create a syntax-highlighted code block.",
+            searchTerms: ["code", "pre", "snippet"],
+            icon: SquareCodeIcon,
+            command: ({ editor, range }) => {
+                editor
+                    .chain()
+                    .focus()
+                    .deleteRange(range)
+                    .setCodeBlock({ language: DEFAULT_CODE_BLOCK_LANGUAGE })
+                    .run();
+            },
+        },
         {
             title: SlashCommands.CurrentDate,
             description: "Insert the current date.",
@@ -170,14 +194,36 @@ const getCommandItems = (values, options) => {
                 input.click();
             },
         },
-    ]
-        .filter((item) => {
+        {
+            title: SlashCommands.Table,
+            description: "Insert a 3 by 3 table.",
+            searchTerms: ["grid", "rows", "columns"],
+            icon: Table2Icon,
+            command: ({ editor, range }) => {
+                editor
+                    .chain()
+                    .focus()
+                    .deleteRange(range)
+                    .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+                    .run();
+            },
+        },
+    ].filter((item) => {
         if (options === null || options === void 0 ? void 0 : options.commands) {
             return options.commands.includes(item.title);
         }
         return true;
-    })
-        .filter((item) => {
+    });
+    const customItems = (((_b = options === null || options === void 0 ? void 0 : options.getCustomCommands) === null || _b === void 0 ? void 0 : _b.call(options)) ||
+        (options === null || options === void 0 ? void 0 : options.customCommands) ||
+        []).map((command) => ({
+        title: command.title,
+        description: command.description || "",
+        searchTerms: command.searchTerms,
+        icon: command.icon || Text,
+        command: command.command,
+    }));
+    return [...builtInItems, ...customItems].filter((item) => {
         var _a, _b;
         if (typeof (values === null || values === void 0 ? void 0 : values.query) === "string" && ((_a = values === null || values === void 0 ? void 0 : values.query) === null || _a === void 0 ? void 0 : _a.length) > 0) {
             const search = (_b = values === null || values === void 0 ? void 0 : values.query) === null || _b === void 0 ? void 0 : _b.toLowerCase();

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

@@ -1,10 +1,23 @@
 import { Extension } from "@tiptap/core";
 import { HandleImageUpload } from "../Plugins";
-import { Extensions } from "../Enums";
+import type { CustomSlashCommand } from "./getSlashCommand";
+import { Extensions, SlashCommands } from "../Enums";
+export type ExtensionPreset = "minimal" | "basic" | "full";
 export type ExtensionType = (typeof Extensions)[keyof typeof Extensions];
+export declare const BASIC_EXTENSIONS: ExtensionType[];
+export declare const MINIMAL_EXTENSIONS: ExtensionType[];
+export declare const FULL_EXTENSIONS: ExtensionType[];
+export declare const resolveExtensions: ({ disabledExtensions, extensionPreset, extensions, }: {
+    disabledExtensions?: ExtensionType[];
+    extensionPreset?: ExtensionPreset;
+    extensions?: ExtensionType[];
+}) => ExtensionType[];
 interface GetTipTapExtensionsProps {
+    disabledExtensions?: ExtensionType[];
     extensions?: ExtensionType[];
-    slashCommands?: any[];
+    slashCommands?: SlashCommands[];
+    customSlashCommands?: CustomSlashCommand[];
+    getCustomSlashCommands?: () => CustomSlashCommand[];
     handleImageUpload?: HandleImageUpload;
 }
 declare const getTipTapExtensions: (props: GetTipTapExtensionsProps) => Extension[];