@monolith-forensics/monolith-ui 1.9.3-dev.0 → 1.9.3-dev.2

package/dist/RichTextEditor/Components/TableCornerMenu.js

@@ -1,202 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TextSelection } from "@tiptap/pm/state";
-import { CopyIcon, EraserIcon, TablePropertiesIcon, Trash2Icon, } from "lucide-react";
-import styled from "styled-components";
-import { Button } from "../../Button";
-import { getControlSizeTokens } from "../../core";
-import { Popover } from "../../Popover";
-const CORNER_BUTTON_SIZE = 18;
-const VIEWPORT_PADDING = 8;
-const clearTableContents = (editor, target) => {
-    if (!editor)
-        return false;
-    const paragraph = editor.state.schema.nodes.paragraph.createAndFill();
-    if (!paragraph)
-        return false;
-    const tr = editor.state.tr;
-    const { tableContext } = target;
-    const cells = 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))
-        .sort((a, b) => b.pos - a.pos);
-    cells.forEach((cell) => {
-        const from = tableContext.start + cell.pos + 1;
-        const to = tableContext.start + cell.pos + cell.node.nodeSize - 1;
-        tr.replaceWith(from, to, paragraph);
-    });
-    editor.view.dispatch(tr);
-    return true;
-};
-const duplicateTable = (editor, target) => {
-    if (!editor)
-        return false;
-    const { tableContext } = target;
-    const paragraph = editor.state.schema.nodes.paragraph.createAndFill();
-    if (!paragraph)
-        return false;
-    const insertPosition = tableContext.pos + tableContext.node.nodeSize;
-    const duplicatedTable = tableContext.node.copy(tableContext.node.content);
-    const tr = editor.state.tr.insert(insertPosition, [
-        paragraph,
-        duplicatedTable,
-    ]);
-    const firstCellPosition = tableContext.map.positionAt(0, 0, duplicatedTable);
-    if (firstCellPosition !== null) {
-        const duplicatePosition = insertPosition + paragraph.nodeSize;
-        const firstCellContentPosition = duplicatePosition + 1 + firstCellPosition + 1;
-        tr.setSelection(TextSelection.near(tr.doc.resolve(firstCellContentPosition)));
-    }
-    editor.view.dispatch(tr.scrollIntoView());
-    return true;
-};
-const deleteTable = (editor, target) => {
-    if (!editor)
-        return false;
-    const { tableContext } = target;
-    editor.view.dispatch(editor.state.tr
-        .delete(tableContext.pos, tableContext.pos + tableContext.node.nodeSize)
-        .scrollIntoView());
-    return true;
-};
-const getTableActionGroups = (editor, target) => [
-    {
-        label: "Content",
-        actions: [
-            {
-                label: "Clear table contents",
-                leftSection: _jsx(EraserIcon, { size: 14 }),
-                onClick: () => clearTableContents(editor, target),
-            },
-            {
-                label: "Duplicate table",
-                leftSection: _jsx(CopyIcon, { size: 14 }),
-                onClick: () => duplicateTable(editor, target),
-            },
-        ],
-    },
-    {
-        label: "Delete",
-        actions: [
-            {
-                label: "Delete table",
-                leftSection: _jsx(Trash2Icon, { size: 14 }),
-                danger: true,
-                onClick: () => deleteTable(editor, target),
-            },
-        ],
-    },
-];
-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),
-});
-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;
-    }
-  }
-`;
-const TableMenuPanel = styled.div `
-  display: flex;
-  flex-direction: column;
-  min-width: 220px;
-  color: ${({ theme }) => theme.palette.text.primary};
-`;
-const TableMenuDropdown = 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;
-`;
-const TableMenuGroup = 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};
-`;
-const TableMenuButton = 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;
-  }
-`;
-const TableMenu = ({ groups, onAction, }) => (_jsx(TableMenuPanel, { children: groups.map((group, index) => (_jsx(TableMenuGroup, { "$withDivider": index > 0, children: group.actions.map((action) => (_jsx(TableMenuButton, { "$danger": action.danger, size: "sm", variant: "subtle", leftSection: action.leftSection, justify: "start", onClick: () => {
-                action.onClick();
-                onAction();
-            }, children: action.label }, action.label))) }, group.label))) }));
-export const TableCornerMenu = ({ editor, target, opened, onOpen, onClose, onAction, onMouseEnter, onMouseLeave, onMouseDown, }) => {
-    const rect = getCornerRect(target);
-    const groups = getTableActionGroups(editor, target);
-    return (_jsx(CornerRoot, { "data-monolith-table-rail": true, "$top": rect.top, "$left": rect.left, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: _jsxs(Popover, { opened: opened, onChange: (nextOpened) => {
-                if (nextOpened) {
-                    onOpen();
-                    return;
-                }
-                onClose();
-            }, position: "bottom-start", width: 245, trapFocus: true, children: [_jsx(Popover.Target, { children: _jsx(Button, { type: "button", size: "xs", variant: "outlined", title: "Table options", "aria-label": "Table options", selected: opened, onMouseDown: onMouseDown, children: _jsx(TablePropertiesIcon, { size: 12 }) }) }), _jsx(TableMenuDropdown, { children: _jsx(TableMenu, { groups: groups, onAction: onAction }) })] }) }));
-};

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

@@ -1,44 +0,0 @@
-import { Editor } from "@tiptap/react";
-import { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import { TableMap } from "@tiptap/pm/tables";
-type TableToolsContentProps = {
-    editor: Editor | null;
-    showInsert?: boolean;
-    onInsert?: () => void;
-    onAction?: () => void;
-};
-type TableToolsPopoverProps = {
-    editor: Editor | null;
-};
-type TableRailsProps = {
-    editor: Editor | null;
-};
-type RailKind = "row" | "column";
-type RailRect = {
-    top: number;
-    left: number;
-    width: number;
-    height: number;
-};
-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 declare const hasTableExtension: (editor: Editor | null) => boolean;
-export declare const isTableActive: (editor: Editor | null) => boolean;
-export declare const TableToolsContent: ({ editor, showInsert, onInsert, onAction, }: TableToolsContentProps) => import("react/jsx-runtime").JSX.Element;
-export declare const TableToolsPopover: ({ editor }: TableToolsPopoverProps) => import("react/jsx-runtime").JSX.Element;
-export declare const TableRails: ({ editor }: TableRailsProps) => import("react/jsx-runtime").JSX.Element | null;
-export {};