@monolith-forensics/monolith-ui 1.8.1-dev.4 → 1.8.1

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

@@ -0,0 +1,75 @@
+import { findCellPos, findTable, TableMap } from "@tiptap/pm/tables";
+import { CORNER_BUTTON_SIZE, RAIL_THICKNESS, VIEWPORT_PADDING, } from "./TableTools.constants";
+const toRect = (rect) => ({
+    top: rect.top,
+    left: rect.left,
+    width: rect.width,
+    height: rect.height,
+});
+const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+export const getRailTargetFromCell = (editor, cell) => {
+    const tableElement = cell.closest("table");
+    const rowElement = cell.closest("tr");
+    if (!tableElement || !rowElement || !editor.view.dom.contains(tableElement)) {
+        return null;
+    }
+    const cellPosition = editor.view.posAtDOM(cell, 0);
+    const $cell = findCellPos(editor.state.doc, cellPosition);
+    if (!$cell)
+        return null;
+    const table = findTable($cell);
+    if (!table)
+        return null;
+    const map = TableMap.get(table.node);
+    const cellRect = map.findCell($cell.pos - table.start);
+    const tableRect = toRect(tableElement.getBoundingClientRect());
+    const rowRect = toRect(rowElement.getBoundingClientRect());
+    const columnRect = toRect(cell.getBoundingClientRect());
+    if (tableRect.width <= 0 ||
+        tableRect.height <= 0 ||
+        rowRect.width <= 0 ||
+        rowRect.height <= 0 ||
+        columnRect.width <= 0 ||
+        columnRect.height <= 0) {
+        return null;
+    }
+    return {
+        kind: "column",
+        rowIndex: cellRect.top,
+        colIndex: cellRect.left,
+        tableElement,
+        tableRect,
+        tableContext: {
+            node: table.node,
+            pos: table.pos,
+            start: table.start,
+            map,
+        },
+        rowRect,
+        columnRect,
+    };
+};
+export const getRailRect = (target, kind) => {
+    if (kind === "column") {
+        const width = target.columnRect.width;
+        const left = clamp(target.columnRect.left, VIEWPORT_PADDING, Math.max(VIEWPORT_PADDING, window.innerWidth - width - VIEWPORT_PADDING));
+        return {
+            top: Math.max(VIEWPORT_PADDING, target.tableRect.top - RAIL_THICKNESS),
+            left,
+            width,
+            height: RAIL_THICKNESS,
+        };
+    }
+    const height = target.rowRect.height;
+    const top = clamp(target.rowRect.top, VIEWPORT_PADDING, Math.max(VIEWPORT_PADDING, window.innerHeight - height - VIEWPORT_PADDING));
+    return {
+        top,
+        left: Math.max(VIEWPORT_PADDING, target.rowRect.left - RAIL_THICKNESS),
+        width: RAIL_THICKNESS,
+        height,
+    };
+};
+export const getCornerRect = (target) => ({
+    top: Math.max(VIEWPORT_PADDING, target.tableRect.top - CORNER_BUTTON_SIZE),
+    left: Math.max(VIEWPORT_PADDING, target.tableRect.left - CORNER_BUTTON_SIZE),
+});

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

@@ -0,0 +1,3 @@
+export { TableRails } from "./TableRails";
+export { TableToolsContent } from "./TableInsertControls";
+export { TableToolsPopover } from "./TableToolsPopover";

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

@@ -0,0 +1,16 @@
+import { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import type { Editor } from "@tiptap/react";
+import type { RailTarget } from "./TableTools.types";
+export declare const clampTableSize: (value: number) => number;
+export declare const hasTableExtension: (editor: Editor | null) => boolean;
+export declare const isTableActive: (editor: Editor | null) => boolean;
+export declare const getCellsInTarget: (target: RailTarget) => {
+    pos: number;
+    node: ProseMirrorNode;
+}[];
+export declare const getCellsInTableTarget: (target: RailTarget) => {
+    pos: number;
+    node: ProseMirrorNode;
+}[];
+export declare const hasRiskyMergedCells: (target: RailTarget) => boolean;
+export declare const getTopRowIsHeader: (target: RailTarget) => boolean;

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

@@ -0,0 +1,53 @@
+import { rowIsHeader } from "@tiptap/pm/tables";
+import { MAX_TABLE_SIZE, MIN_TABLE_SIZE } from "./TableTools.constants";
+export const clampTableSize = (value) => {
+    if (Number.isNaN(value))
+        return MIN_TABLE_SIZE;
+    return Math.min(MAX_TABLE_SIZE, Math.max(MIN_TABLE_SIZE, value));
+};
+export const hasTableExtension = (editor) => Boolean(editor === null || editor === void 0 ? void 0 : editor.extensionManager.extensions.find((extension) => extension.name === "table"));
+export const isTableActive = (editor) => Boolean((editor === null || editor === void 0 ? void 0 : editor.isActive("table")) ||
+    (editor === null || editor === void 0 ? void 0 : editor.isActive("tableRow")) ||
+    (editor === null || editor === void 0 ? void 0 : editor.isActive("tableCell")) ||
+    (editor === null || editor === void 0 ? void 0 : editor.isActive("tableHeader")));
+export const getCellsInTarget = (target) => {
+    const { tableContext } = target;
+    return tableContext.map
+        .cellsInRect(target.kind === "row"
+        ? {
+            left: 0,
+            right: tableContext.map.width,
+            top: target.rowIndex,
+            bottom: target.rowIndex + 1,
+        }
+        : {
+            left: target.colIndex,
+            right: target.colIndex + 1,
+            top: 0,
+            bottom: tableContext.map.height,
+        })
+        .map((pos) => ({
+        pos,
+        node: tableContext.node.nodeAt(pos),
+    }))
+        .filter((cell) => Boolean(cell.node));
+};
+export const getCellsInTableTarget = (target) => {
+    const { tableContext } = target;
+    return tableContext.map
+        .cellsInRect({
+        left: 0,
+        right: tableContext.map.width,
+        top: 0,
+        bottom: tableContext.map.height,
+    })
+        .map((pos) => ({
+        pos,
+        node: tableContext.node.nodeAt(pos),
+    }))
+        .filter((cell) => Boolean(cell.node));
+};
+export const hasRiskyMergedCells = (target) => {
+    return getCellsInTarget(target).some((cell) => cell.node.attrs.rowspan > 1 || cell.node.attrs.colspan > 1);
+};
+export const getTopRowIsHeader = (target) => rowIsHeader(target.tableContext.map, target.tableContext.node, 0);

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

@@ -0,0 +1,40 @@
+import type { RailKind, RailRect } from "./TableTools.types";
+export declare const TableToolsPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TableToolsSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TableToolsSectionTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("../../../FieldLabel").FieldLabelProps, never>, never>> & string;
+export declare const InsertGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Field: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
+export declare const SwitchRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const RailRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $rect: RailRect;
+    $kind: RailKind;
+}>> & string;
+export declare const MenuPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const MenuDropdown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../../../Popover").PopoverDropdownProps, never>> & string & Omit<import("react").FC<import("../../../Popover").PopoverDropdownProps>, keyof import("react").Component<any, {}, any>>;
+export declare const MenuGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $withDivider: boolean;
+}>> & string;
+export declare const MenuButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+    ref?: import("react").RefObject<HTMLButtonElement>;
+    children?: import("react").ReactNode | string;
+    className?: string;
+    loading?: boolean;
+    leftSection?: import("react").ReactNode;
+    rightSection?: import("react").ReactNode;
+    href?: string | null;
+    download?: string | null;
+    fullWidth?: boolean;
+    size?: import("../../../core").Size;
+    variant?: import("../../../core").Variant;
+    color?: import("../../../Button").ButtonColor;
+    disabled?: boolean;
+    selected?: boolean;
+    justify?: "start" | "center" | "end";
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}, {
+    $danger?: boolean;
+}>> & string & Omit<import("react").FC<import("../../../Button").ButtonProps>, keyof import("react").Component<any, {}, any>>;
+export declare const CornerRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $top: number;
+    $left: number;
+}>> & string;

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/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/Extensions/getTiptapExtensions.js

@@ -1,13 +1,18 @@
 import TiptapImage from "@tiptap/extension-image";
 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, TableCell, TableHeader, TableRow } from "@tiptap/extension-table";
-import { Focus, Placeholder } from "@tiptap/extensions";
+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 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 { ImageActionsPlugin, UploadImagesPlugin, } from "../Plugins";
+import Focus from "@tiptap/extension-focus";
+import { UploadImagesPlugin } from "../Plugins";
 import getSlashCommand from "./getSlashCommand";
 import { Extensions } from "../Enums";
 import BubbleMenu from "./BubbleMenuExtension";
@@ -20,7 +25,7 @@ const CustomImage = TiptapImage.extend({
             } });
     },
     addProseMirrorPlugins() {
-        return [UploadImagesPlugin(), ImageActionsPlugin(this.editor)];
+        return [UploadImagesPlugin()];
     },
 });
 const CustomStorage = Extension.create({
@@ -79,6 +84,11 @@ const getTipTapExtensions = ({ extensions = [], slashCommands = [], bubbleMenuOp
             category: "default",
             extension: Color,
         },
+        {
+            name: Extensions.Underline,
+            category: "default",
+            extension: Underline,
+        },
         {
             name: Extensions.TextAlign,
             category: "default",

package/dist/RichTextEditor/Plugins/ImageActionsPlugin.js

@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { ReactRenderer } from "@tiptap/react";
 import { CopyIcon, DownloadIcon, FullscreenIcon } from "lucide-react";
-import styled from "styled-components";
+import styled, { useTheme } from "styled-components";
 import { Button } from "../../Button";
 import { FileViewer } from "../../FileViewer";
 import { useState } from "react";
@@ -19,10 +19,6 @@ const imageActionsKey = new PluginKey("image-actions");
 const ImageActionsMenuRoot = styled.div `
   display: flex;
   gap: 4px;
-  padding: 4px;
-  border-radius: 5px;
-
-  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
 
   button {
     width: 24px;
@@ -30,16 +26,17 @@ const ImageActionsMenuRoot = styled.div `
   }
 `;
 const ImageActionsMenu = ({ onCopy, onDownload, getFile, onMouseEnter, onMouseLeave, }) => {
+    const theme = useTheme();
     const [viewerFile, setViewerFile] = useState(null);
     const keepEditorFocus = (event) => {
         event.preventDefault();
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(ImageActionsMenuRoot, { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [_jsx(Button, { type: "button", size: "xxs", variant: "outlined", "aria-label": "Copy image", title: "Copy image", onMouseDown: keepEditorFocus, onClick: onCopy, children: _jsx(CopyIcon, { size: 14 }) }), _jsx(Button, { type: "button", size: "xxs", variant: "outlined", "aria-label": "Download image", title: "Download image", onMouseDown: keepEditorFocus, onClick: onDownload, children: _jsx(DownloadIcon, { size: 14 }) }), _jsx(Button, { type: "button", size: "xxs", variant: "outlined", "aria-label": "View image fullscreen", title: "View image fullscreen", onMouseDown: keepEditorFocus, onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsxs(ImageActionsMenuRoot, { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [_jsx(Button, { type: "button", size: "xxs", variant: "outlined", "aria-label": "Copy image", title: "Copy image", onMouseDown: keepEditorFocus, onClick: onCopy, style: { backgroundColor: theme.palette.background.paper }, children: _jsx(CopyIcon, { size: 14 }) }), _jsx(Button, { type: "button", size: "xxs", variant: "outlined", "aria-label": "Download image", title: "Download image", onMouseDown: keepEditorFocus, onClick: onDownload, style: { backgroundColor: theme.palette.background.paper }, children: _jsx(DownloadIcon, { size: 14 }) }), _jsx(Button, { type: "button", size: "xxs", variant: "outlined", "aria-label": "View image fullscreen", title: "View image fullscreen", onMouseDown: keepEditorFocus, onClick: () => {
                             const file = getFile();
                             if (file) {
                                 setViewerFile(file);
                             }
-                        }, children: _jsx(FullscreenIcon, { size: 14 }) })] }), _jsx(FileViewer, { file: viewerFile || undefined, open: Boolean(viewerFile), onClose: () => setViewerFile(null) })] }));
+                        }, style: { backgroundColor: theme.palette.background.paper }, children: _jsx(FullscreenIcon, { size: 14 }) })] }), _jsx(FileViewer, { file: viewerFile || undefined, open: Boolean(viewerFile), onClose: () => setViewerFile(null) })] }));
 };
 const getImageFilename = (image) => {
     var _a, _b;

package/dist/RichTextEditor/Plugins/UploadImagesPlugin.d.ts

@@ -1,13 +1,5 @@
 import { Plugin } from "@tiptap/pm/state";
 import { DecorationSet, EditorView } from "@tiptap/pm/view";
-export declare const addImagePlaceholder: ({ view, id, pos, src, label, }: {
-    view: EditorView;
-    id: string;
-    pos: number;
-    src?: string;
-    label?: string;
-}) => void;
-export declare const removeImagePlaceholder: (view: EditorView, id: string) => any;
 export type HandleImageUploadProps = {
     file: File;
     name: string;
@@ -19,12 +11,5 @@ export type HandleImageUploadProps = {
 export type HandleImageUpload = {
     (props: HandleImageUploadProps): Promise<string> | undefined;
 };
-export type HandleImageUrlUploadProps = {
-    src: string;
-    name: string;
-};
-export type HandleImageUrlUpload = {
-    (props: HandleImageUrlUploadProps): Promise<string | undefined> | string | undefined;
-};
 export declare const startImageUpload: (file: File, view: EditorView, pos: number, handleImageUpload: HandleImageUpload | undefined) => void;
 export declare const UploadImagesPlugin: () => Plugin<DecorationSet>;