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

package/dist/RichTextEditor/Toolbar/ControlsGroup.js

@@ -1,29 +1,40 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { Children, forwardRef } from "react";
 import styled from "styled-components";
 const ControlsGroup = styled(forwardRef(({ className, children }, ref) => {
-    if (!children) {
+    if (Children.toArray(children).length === 0) {
         return null;
     }
     return (_jsx("div", { className: className + " controls-group", ref: ref, children: children }));
 })) `
   & {
     display: flex;
+    flex: 0 0 auto;
     justify-content: flex-start;
     align-items: center;
   }
-  & button {
+
+  & > button {
     border-radius: 0;
     border: 1px solid ${({ theme }) => theme.palette.divider};
-    border-right: none;
   }
-  & button:first-child {
+
+  & > button:not(:last-of-type) {
+    border-right: 1px solid transparent;
+  }
+
+  & > button:first-child {
     border-radius: 5px 0 0 5px;
   }
-  & button:last-child {
+
+  & > button:last-of-type {
     border-radius: 0 5px 5px 0;
     border-right: 1px solid ${({ theme }) => theme.palette.divider};
   }
+
+  & > button:active {
+    translate: none;
+  }
 `;
 ControlsGroup.displayName = "ControlsGroup";
 export default ControlsGroup;

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

@@ -27,6 +27,7 @@ declare const Labels: {
     superscriptControlLabel: string;
     unsetColorControlLabel: string;
     hrControlLabel: string;
+    tableControlLabel: string;
     linkEditorInputLabel: string;
     linkEditorInputPlaceholder: string;
     linkEditorExternalLink: string;

package/dist/RichTextEditor/Toolbar/Labels.js

@@ -29,6 +29,7 @@ const Labels = {
     superscriptControlLabel: "Superscript",
     unsetColorControlLabel: "Unset color",
     hrControlLabel: "Horizontal line",
+    tableControlLabel: "Table",
     // Link editor
     linkEditorInputLabel: "Enter URL",
     linkEditorInputPlaceholder: "https://example.com/",

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

@@ -17,8 +17,7 @@ export type ToolbarOptions = {
     customItems?: CustomItem[];
 };
 export type ToolbarProps = {
-    className?: string;
     editor: Editor | null;
     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: ({ editor, toolbarOptions }: ToolbarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/RichTextEditor/Toolbar/Toolbar.js

@@ -1,85 +1,50 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled, { useTheme } from "styled-components";
+import styled from "styled-components";
 import ControlsGroup from "./ControlsGroup";
-import { UndoControl, RedoControl, BoldControl, ItalicControl, UnderlineControl, StrikeThroughControl, Heading1Control, Heading2Control, Heading3Control, Heading4Control, BulletListControl, OrderedListControl, AlignLeftControl, AlignCenterControl, AlignRightControl, AlignJustifiedControl, } from "./Controls";
+import { UndoControl, RedoControl, FontControl, TextColorControl, HighlightControl, BoldControl, ItalicControl, UnderlineControl, StrikeThroughControl, ClearFormattingControl, CodeControl, CodeBlockControl, Heading1Control, Heading2Control, Heading3Control, Heading4Control, BulletListControl, OrderedListControl, AlignLeftControl, AlignCenterControl, AlignRightControl, AlignJustifiedControl, } from "./Controls";
 import { Controls } from "../Enums";
 import { DropDownMenu } from "../../DropDownMenu";
-import Fonts from "../Enums/Fonts";
-import { useContext } from "react";
-import RichTextEditorContext from "../Contexts/RichTextEditorContext";
+import { useState } from "react";
 import { Button } from "../../Button";
-import TextColors from "../Enums/TextColors";
-import { SquircleIcon } from "lucide-react";
-export const Toolbar = styled(({ className, editor, toolbarOptions }) => {
+import { Popover } from "../../Popover";
+import LinkEditor from "../Components/LinkEditor";
+import { TableToolsPopover } from "../Components/TableTools";
+import { LinkIcon } from "lucide-react";
+const ToolbarContainer = styled.div `
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+  row-gap: 6px;
+  width: 100%;
+  margin-bottom: 10px;
+  border-radius: 5px 5px 0 0;
+  border: 1px solid transparent;
+
+  > button,
+  > .mfui-DropDownMenu {
+    flex: 0 0 auto;
+  }
+`;
+export const Toolbar = ({ editor, toolbarOptions }) => {
     var _a;
-    const theme = useTheme();
     const { controls } = toolbarOptions || {};
+    const [linkPopoverOpen, setLinkPopoverOpen] = useState(false);
     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) => {
+    return (_jsxs(ToolbarContainer, { 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));
+                    return (_jsx(Button, Object.assign({ size: "xs" }, item.options, { children: (_a = item === null || item === void 0 ? void 0 : item.options) === null || _a === void 0 ? void 0 : _a.label }), index));
                 }
                 else if (item.type === "menu") {
                     return (_jsx(DropDownMenu, Object.assign({ dropDownProps: {
                             style: {
                                 width: 135,
                             },
-                        } }, item.options, { children: (_b = item === null || item === void 0 ? void 0 : item.options) === null || _b === void 0 ? void 0 : _b.label }), index));
+                        } }, item.options, { size: "xs", children: (_b = item === null || item === void 0 ? void 0 : item.options) === null || _b === void 0 ? void 0 : _b.label }), index));
                 }
-            }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.FONT)) && (_jsx(DropDownMenu, { data: Object.values(Fonts).map((font) => ({
-                    label: font,
-                    value: font,
-                    onClick: () => {
-                        setFont(font);
-                    },
-                })), size: "xxs", variant: "outlined", arrow: true, dropDownProps: {
-                    style: {
-                        width: 135,
-                    },
-                }, buttonProps: {
-                    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 })] }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.COLOR)) && (_jsx(DropDownMenu, { data: [
-                    {
-                        label: "Default",
-                        value: "default",
-                        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],
-                            onClick: () => {
-                                editor === null || editor === void 0 ? void 0 : editor.chain().focus().setColor(TextColors[colorKey]).run();
-                            },
-                        };
-                    }),
-                ], renderOption: (item) => (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 5 }, children: [_jsx(SquircleIcon, { size: 12, color: item.value === "default"
-                                ? theme.palette.text.primary
-                                : item.value, style: {
-                                backgroundColor: item.value === "default"
-                                    ? theme.palette.text.primary
-                                    : item.value,
-                                borderRadius: "3px",
-                            } }), item.label] })), size: "xxs", variant: "outlined", arrow: true, buttonProps: {
-                    title: "Select Color",
-                }, dropDownProps: {
-                    style: {
-                        width: 100,
-                    },
-                }, 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;
-`;
+            }), _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.FONT)) && _jsx(FontControl, {}), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.COLOR)) && (_jsx(TextColorControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HIGHLIGHT)) && (_jsx(HighlightControl, { 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 }))] }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.LINK)) && (_jsxs(Popover, { opened: linkPopoverOpen, onChange: setLinkPopoverOpen, position: "bottom", width: 330, trapFocus: true, children: [_jsx(Popover.Target, { children: _jsx(Button, { size: "xs", variant: "outlined", title: "Link", "aria-label": "Link", selected: linkPopoverOpen || Boolean(editor === null || editor === void 0 ? void 0 : editor.isActive("link")), disabled: !editor, style: { padding: "1px 6px" }, children: _jsx(LinkIcon, { size: 14 }) }) }), _jsx(Popover.Dropdown, { children: editor && (_jsx(LinkEditor, { editor: editor, autoFocus: linkPopoverOpen, onClose: () => setLinkPopoverOpen(false) })) })] })), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.CODE)) && _jsx(CodeControl, { editor: editor }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.CODE_BLOCK)) && (_jsx(CodeBlockControl, { editor: editor }))] }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TABLE)) && (_jsx(TableToolsPopover, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.CLEAR_FORMATTING)) && (_jsx(ClearFormattingControl, { editor: editor }))] }));
+};

package/dist/RichTextEditor/Utils/codeBlockUtils.d.ts

@@ -0,0 +1,20 @@
+import { Editor } from "@tiptap/react";
+export type CodeBlockLanguage = {
+    label: string;
+    value: string;
+};
+export declare const DEFAULT_CODE_BLOCK_LANGUAGE = "plaintext";
+export declare const CODE_BLOCK_LANGUAGES: CodeBlockLanguage[];
+export declare const getCodeBlockLanguage: (editor: Editor | null) => string;
+export declare const getCodeBlockLanguageOption: (language?: string) => CodeBlockLanguage;
+export declare const canFormatCodeBlockLanguage: (language?: string) => boolean;
+export declare const formatCodeBlockText: (text: string, language?: string) => Promise<string>;
+export declare const hasSyntaxHighlightedCodeBlock: (editor: Editor | null) => boolean;
+export declare const setCodeBlockLanguage: (editor: Editor | null, language: string) => void;
+export declare const getCodeBlockWrap: (editor: Editor | null) => boolean;
+export declare const toggleCodeBlockWrap: (editor: Editor | null) => void;
+export declare const toggleCodeBlock: (editor: Editor | null) => void;
+export declare const getActiveCodeBlockText: (editor: Editor | null) => string;
+export declare const replaceCodeBlockContent: (editor: Editor, from: number, to: number, text: string) => boolean;
+export declare const formatActiveCodeBlock: (editor: Editor | null) => Promise<void>;
+export declare const copyCodeBlockText: (text: string) => Promise<void>;

package/dist/RichTextEditor/Utils/codeBlockUtils.js

@@ -0,0 +1,137 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import prettier from "prettier/standalone";
+import * as prettierBabelPlugin from "prettier/plugins/babel";
+import * as prettierEstreePlugin from "prettier/plugins/estree";
+import * as prettierHtmlPlugin from "prettier/plugins/html";
+import * as prettierMarkdownPlugin from "prettier/plugins/markdown";
+import * as prettierPostcssPlugin from "prettier/plugins/postcss";
+import * as prettierTypescriptPlugin from "prettier/plugins/typescript";
+import * as prettierYamlPlugin from "prettier/plugins/yaml";
+export const DEFAULT_CODE_BLOCK_LANGUAGE = "plaintext";
+export const CODE_BLOCK_LANGUAGES = [
+    { label: "Plain Text", value: DEFAULT_CODE_BLOCK_LANGUAGE },
+    { label: "JavaScript", value: "javascript" },
+    { label: "TypeScript", value: "typescript" },
+    { label: "JSX", value: "jsx" },
+    { label: "TSX", value: "tsx" },
+    { label: "HTML", value: "html" },
+    { label: "CSS", value: "css" },
+    { label: "JSON", value: "json" },
+    { label: "Markdown", value: "markdown" },
+    { label: "Bash", value: "bash" },
+    { label: "Python", value: "python" },
+    { label: "SQL", value: "sql" },
+    { label: "YAML", value: "yaml" },
+    { label: "XML", value: "xml" },
+];
+const PRETTIER_PARSERS = {
+    javascript: "babel",
+    jsx: "babel",
+    typescript: "typescript",
+    tsx: "typescript",
+    html: "html",
+    css: "css",
+    json: "json",
+    markdown: "markdown",
+    yaml: "yaml",
+};
+const PRETTIER_PLUGINS = [
+    prettierBabelPlugin,
+    prettierEstreePlugin,
+    prettierHtmlPlugin,
+    prettierMarkdownPlugin,
+    prettierPostcssPlugin,
+    prettierTypescriptPlugin,
+    prettierYamlPlugin,
+];
+export const getCodeBlockLanguage = (editor) => {
+    var _a;
+    return (((_a = editor === null || editor === void 0 ? void 0 : editor.getAttributes("codeBlock")) === null || _a === void 0 ? void 0 : _a.language) ||
+        DEFAULT_CODE_BLOCK_LANGUAGE);
+};
+export const getCodeBlockLanguageOption = (language) => {
+    return (CODE_BLOCK_LANGUAGES.find((item) => item.value === language) ||
+        CODE_BLOCK_LANGUAGES[0]);
+};
+export const canFormatCodeBlockLanguage = (language) => {
+    return Boolean(language && PRETTIER_PARSERS[language]);
+};
+export const formatCodeBlockText = (text, language) => __awaiter(void 0, void 0, void 0, function* () {
+    const parser = language ? PRETTIER_PARSERS[language] : undefined;
+    if (!parser) {
+        throw new Error("Code formatting is not supported for this language.");
+    }
+    const formatted = yield prettier.format(text, {
+        parser,
+        plugins: PRETTIER_PLUGINS,
+    });
+    return formatted.replace(/\n$/, "");
+});
+export const hasSyntaxHighlightedCodeBlock = (editor) => {
+    return Boolean(editor === null || editor === void 0 ? void 0 : editor.extensionManager.extensions.find((extension) => { var _a; return extension.name === "codeBlock" && ((_a = extension.options) === null || _a === void 0 ? void 0 : _a.lowlight); }));
+};
+export const setCodeBlockLanguage = (editor, language) => {
+    if (!(editor === null || editor === void 0 ? void 0 : editor.isActive("codeBlock")))
+        return;
+    editor.chain().focus().updateAttributes("codeBlock", { language }).run();
+};
+export const getCodeBlockWrap = (editor) => {
+    var _a;
+    return Boolean((_a = editor === null || editor === void 0 ? void 0 : editor.getAttributes("codeBlock")) === null || _a === void 0 ? void 0 : _a.wrap);
+};
+export const toggleCodeBlockWrap = (editor) => {
+    if (!(editor === null || editor === void 0 ? void 0 : editor.isActive("codeBlock")))
+        return;
+    editor
+        .chain()
+        .focus()
+        .updateAttributes("codeBlock", { wrap: !getCodeBlockWrap(editor) })
+        .run();
+};
+export const toggleCodeBlock = (editor) => {
+    if (!editor)
+        return;
+    editor
+        .chain()
+        .focus()
+        .toggleCodeBlock({ language: DEFAULT_CODE_BLOCK_LANGUAGE })
+        .run();
+};
+export const getActiveCodeBlockText = (editor) => {
+    if (!(editor === null || editor === void 0 ? void 0 : editor.isActive("codeBlock")))
+        return "";
+    return editor.state.selection.$from.parent.textContent;
+};
+export const replaceCodeBlockContent = (editor, from, to, text) => {
+    return editor.commands.command(({ state, tr }) => {
+        if (text.length) {
+            tr.replaceWith(from, to, state.schema.text(text));
+        }
+        else {
+            tr.delete(from, to);
+        }
+        return true;
+    });
+};
+export const formatActiveCodeBlock = (editor) => __awaiter(void 0, void 0, void 0, function* () {
+    if (!(editor === null || editor === void 0 ? void 0 : editor.isActive("codeBlock")))
+        return;
+    const language = getCodeBlockLanguage(editor);
+    const formatted = yield formatCodeBlockText(getActiveCodeBlockText(editor), language);
+    replaceCodeBlockContent(editor, editor.state.selection.$from.start(), editor.state.selection.$from.end(), formatted);
+});
+export const copyCodeBlockText = (text) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    if (!((_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.writeText)) {
+        throw new Error("Clipboard copying is not supported by this browser.");
+    }
+    yield navigator.clipboard.writeText(text);
+});

package/dist/RichTextEditor/Utils/codeUtils.d.ts

@@ -0,0 +1,3 @@
+import { Editor } from "@tiptap/react";
+export declare const hasInlineCode: (editor: Editor | null) => boolean;
+export declare const toggleInlineCode: (editor: Editor | null) => void;

package/dist/RichTextEditor/Utils/codeUtils.js

@@ -0,0 +1,12 @@
+export const hasInlineCode = (editor) => {
+    return Boolean(editor === null || editor === void 0 ? void 0 : editor.extensionManager.extensions.find((extension) => extension.name === "code"));
+};
+export const toggleInlineCode = (editor) => {
+    if (!editor || !hasInlineCode(editor))
+        return;
+    if (editor.isActive("code")) {
+        editor.chain().focus().unsetCode().run();
+        return;
+    }
+    editor.chain().focus().unsetAllMarks().setCode().run();
+};

package/dist/RichTextEditor/Utils/linkUtils.d.ts

@@ -0,0 +1,19 @@
+import { EditorState } from "@tiptap/pm/state";
+export declare const LINK_TARGET = "_blank";
+export declare const LINK_REL = "noopener noreferrer nofollow";
+export type NormalizedLink = {
+    href: string;
+    isValid: boolean;
+};
+export declare const normalizeLinkUrl: (value?: string | null) => NormalizedLink;
+export declare const getLinkAttributes: (href: string) => {
+    href: string;
+    target: string;
+    rel: string;
+    class: string;
+};
+export declare const openLink: (href?: string | null) => void;
+export declare const getLinkRangeAtPosition: (state: EditorState, pos: number) => void | import("@tiptap/core").Range;
+export declare const getLinkAttributesAtPosition: (state: EditorState, pos: number) => {
+    href?: string;
+} | undefined;

package/dist/RichTextEditor/Utils/linkUtils.js

@@ -0,0 +1,57 @@
+import { getMarkRange } from "@tiptap/core";
+export const LINK_TARGET = "_blank";
+export const LINK_REL = "noopener noreferrer nofollow";
+export const normalizeLinkUrl = (value) => {
+    const trimmedValue = (value === null || value === void 0 ? void 0 : value.trim()) || "";
+    if (!trimmedValue) {
+        return { href: "", isValid: false };
+    }
+    const href = /^[a-z][a-z0-9+.-]*:/i.test(trimmedValue)
+        ? trimmedValue
+        : `https://${trimmedValue}`;
+    try {
+        const url = new URL(href);
+        const isValid = url.protocol === "http:" || url.protocol === "https:";
+        return {
+            href,
+            isValid,
+        };
+    }
+    catch (_a) {
+        return {
+            href,
+            isValid: false,
+        };
+    }
+};
+export const getLinkAttributes = (href) => ({
+    href,
+    target: LINK_TARGET,
+    rel: LINK_REL,
+    class: "editor-link",
+});
+export const openLink = (href) => {
+    if (!href)
+        return;
+    const normalizedLink = normalizeLinkUrl(href);
+    if (!normalizedLink.isValid)
+        return;
+    window.open(normalizedLink.href, "_blank", "noopener,noreferrer");
+};
+export const getLinkRangeAtPosition = (state, pos) => {
+    const linkMark = state.schema.marks.link;
+    if (!linkMark)
+        return;
+    return getMarkRange(state.doc.resolve(pos), linkMark);
+};
+export const getLinkAttributesAtPosition = (state, pos) => {
+    const linkMark = state.schema.marks.link;
+    if (!linkMark)
+        return;
+    const $pos = state.doc.resolve(pos);
+    const nextNode = $pos.parent.childAfter($pos.parentOffset).node;
+    const previousNode = $pos.parent.childBefore($pos.parentOffset).node;
+    const mark = (nextNode === null || nextNode === void 0 ? void 0 : nextNode.marks.find((mark) => mark.type === linkMark)) ||
+        (previousNode === null || previousNode === void 0 ? void 0 : previousNode.marks.find((mark) => mark.type === linkMark));
+    return mark === null || mark === void 0 ? void 0 : mark.attrs;
+};

package/dist/RichTextEditor/Utils/tableUtils.d.ts

@@ -0,0 +1 @@
+export declare const TABLE_CELL_MIN_WIDTH = 120;

package/dist/RichTextEditor/Utils/tableUtils.js

@@ -0,0 +1 @@
+export const TABLE_CELL_MIN_WIDTH = 120;

package/dist/SegmentedControl/SegmentedControl.js

@@ -55,7 +55,7 @@ export const SegmentedControl = (_a) => {
     });
     const columnCount = Math.max(normalizedData.length, 1);
     const firstEnabledIndex = getFirstEnabledIndex(normalizedData);
-    return (_jsxs(StyledRoot, Object.assign({ role: "radiogroup", "aria-disabled": disabled, className: className, style: Object.assign({ gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))` }, style), "$fullWidth": fullWidth, "$disabled": disabled, onKeyDown: handleKeyDown }, other, { children: [name && _jsx("input", { type: "hidden", name: name, value: _value || "" }), activeIndex >= 0 && !(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.disabled) && (_jsx(StyledIndicator, { "$index": activeIndex, "$count": columnCount, "$variant": variant, "$activeColor": activeColor })), normalizedData.map((item, index) => {
+    return (_jsxs(StyledRoot, Object.assign({ role: "radiogroup", "aria-disabled": disabled, className: className, style: Object.assign({ gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))` }, style), "$fullWidth": fullWidth, "$disabled": disabled, "$size": size, onKeyDown: handleKeyDown }, other, { children: [name && _jsx("input", { type: "hidden", name: name, value: _value || "" }), activeIndex >= 0 && !(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.disabled) && (_jsx(StyledIndicator, { "$index": activeIndex, "$count": columnCount, "$variant": variant, "$activeColor": activeColor })), normalizedData.map((item, index) => {
                 const isActive = item.value === _value && !item.disabled;
                 const isSegmentDisabled = disabled || item.disabled;
                 return (_jsx(StyledSegmentButton, { ref: (node) => {

package/dist/SegmentedControl/SegmentedControl.styles.d.ts

@@ -3,6 +3,7 @@ import { SegmentedControlVariant } from "./SegmentedControl.types";
 export declare const StyledRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $fullWidth: boolean;
     $disabled: boolean;
+    $size?: Size;
 }>> & string;
 export declare const StyledIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $index: number;

package/dist/SegmentedControl/SegmentedControl.styles.js

@@ -1,27 +1,33 @@
 import styled from "styled-components";
-import { getSegmentFontSize, getSegmentHeight, resolveActiveColor, } from "./SegmentedControl.utils";
+import { getSegmentFontSize, getSegmentHeight, getSegmentPaddingX, resolveActiveColor, } from "./SegmentedControl.utils";
+const SEGMENT_GAP = 2;
 export const StyledRoot = styled.div `
   user-select: none;
   position: relative;
   display: grid;
   align-items: center;
+  grid-auto-rows: minmax(0, 1fr);
+  column-gap: ${SEGMENT_GAP}px;
+  box-sizing: border-box;
   width: ${({ $fullWidth }) => ($fullWidth ? "100%" : "fit-content")};
-  min-width: ${({ $fullWidth }) => ($fullWidth ? "0" : "200px")};
-  padding: 3px;
-  border-radius: 8px;
-  border: 1px solid ${({ theme }) => theme.palette.action.hover};
+  min-width: 0;
+  height: ${({ $size }) => `${getSegmentHeight($size)}px`};
+  padding: 2px;
+  border-radius: 5px;
+  border: 1px solid ${({ theme }) => theme.palette.input.border};
   background: ${({ theme }) => theme.palette.background.secondary};
   opacity: ${({ $disabled }) => ($disabled ? 0.6 : 1)};
   pointer-events: ${({ $disabled }) => ($disabled ? "none" : "auto")};
 `;
 export const StyledIndicator = styled.div `
   position: absolute;
-  top: 3px;
-  left: 3px;
+  top: 2px;
+  left: 2px;
   z-index: 1;
-  height: calc(100% - 6px);
-  width: ${({ $count }) => `calc((100% - 6px) / ${$count})`};
-  border-radius: 6px;
+  box-sizing: border-box;
+  height: calc(100% - 4px);
+  width: ${({ $count }) => `calc((100% - 4px - ${($count - 1) * SEGMENT_GAP}px) / ${$count})`};
+  border-radius: 4px;
   border: 1px solid
     ${({ theme, $variant, $activeColor }) => {
     const resolved = resolveActiveColor(theme, $activeColor);
@@ -33,17 +39,26 @@ export const StyledIndicator = styled.div `
         ? resolved.main
         : theme.palette.background.paper;
 }};
-  transform: translateX(${({ $index }) => `${$index * 100}%`});
+  transform: translateX(
+    ${({ $index }) => `calc(${$index * 100}% + ${$index * SEGMENT_GAP}px)`}
+  );
   transition: transform 160ms ease;
 `;
 export const StyledSegmentButton = styled.button `
   position: relative;
   z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
   border: none;
   outline: none;
-  padding: 0 12px;
+  padding: ${({ $size }) => `0 ${getSegmentPaddingX($size)}px`};
   margin: 0;
-  border-radius: 6px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-radius: 4px;
   background: transparent;
   color: ${({ theme, $active, $variant, $activeColor }) => {
     const resolved = resolveActiveColor(theme, $activeColor);
@@ -54,7 +69,8 @@ export const StyledSegmentButton = styled.button `
   font-size: ${({ $size }) => getSegmentFontSize($size)};
   font-weight: 500;
   line-height: 1;
-  height: ${({ $size }) => `${getSegmentHeight($size)}px`};
+  height: 100%;
+  min-height: 0;
   white-space: nowrap;
   cursor: pointer;
   transition:

package/dist/SegmentedControl/SegmentedControl.utils.d.ts

@@ -6,6 +6,7 @@ export declare const resolveActiveColor: (theme: any, activeColor?: string) => {
 };
 export declare const getSegmentHeight: (size?: Size) => number;
 export declare const getSegmentFontSize: (size?: Size) => string;
+export declare const getSegmentPaddingX: (size?: Size) => number;
 export declare const normalizeSegmentedData: (data: SegmentedControlDataItem[]) => NormalizedSegmentedItem[];
 export declare const getFirstEnabledIndex: (data: NormalizedSegmentedItem[]) => number;
 export declare const getNextEnabledIndex: (data: NormalizedSegmentedItem[], startIndex: number, direction: 1 | -1) => number;

package/dist/SegmentedControl/SegmentedControl.utils.js

@@ -22,10 +22,13 @@ export const resolveActiveColor = (theme, activeColor) => {
     };
 };
 export const getSegmentHeight = (size) => {
-    return getControlSizeTokens(size).segmentedHeight;
+    return getControlSizeTokens(size).height;
 };
 export const getSegmentFontSize = (size) => {
-    return `${getControlSizeTokens(size).segmentedFontSize}px`;
+    return `${getControlSizeTokens(size).fontSize}px`;
+};
+export const getSegmentPaddingX = (size) => {
+    return getControlSizeTokens(size).buttonPaddingX;
 };
 export const normalizeSegmentedData = (data) => data.map((item) => {
     var _a;

package/dist/Table/Table.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useOverlayScrollbars } from "overlayscrollbars-react";
-import { StyledTable } from "./TableComponents";
+import { StyledTable, TableEmptyState, TableEmptyStateDescription, TableEmptyStateTitle, } from "./TableComponents";
 import TableHeader from "./TableHeader";
 import TableProvider from "./TableProvider";
 import shortUUID from "short-uuid";
@@ -33,12 +33,13 @@ const StyledTableContainer = styled.div `
 `;
 const TableContent = ({ children, }) => {
     const { columnState, tableElement, tableHeight, tableMaxHeight, tableMinHeight, headerRowElm, tableDimensions, targetElm, listElm, rowHeight, headerRowHeight, compactState, virtualized, loading, } = useTable();
-    const visibleColumnCount = columnState.filter((column) => column.visible === true).length;
+    const visibleColumnCount = columnState.filter((column) => column.visible !== false).length;
+    const allColumnsHidden = columnState.length > 0 && visibleColumnCount === 0;
     return (_jsxs(StyledTableContainer, { children: [_jsx(TableMenu, {}), children, _jsxs(StyledTable, { className: "mfui-table", style: {
                     height: tableHeight || "100%",
                     maxHeight: tableMaxHeight,
                     minHeight: tableMinHeight,
-                }, ref: tableElement, "data-compact": compactState, children: [_jsx(LoadingIndicator, { visible: loading }), _jsx(TableHeader, { headerRowElm: headerRowElm }), visibleColumnCount === 0 && _jsx("div", { children: "No columns visible" }), virtualized === true ? (_jsx(VirtualizedRows, { tableDimensions: tableDimensions, targetElm: targetElm, listElm: listElm, rowHeight: rowHeight, headerRowHeight: headerRowHeight })) : (_jsx(StaticRows, { targetElm: targetElm, listElm: listElm }))] })] }));
+                }, ref: tableElement, "data-compact": compactState, "data-all-columns-hidden": allColumnsHidden, children: [_jsx(LoadingIndicator, { visible: loading }), _jsx(TableHeader, { headerRowElm: headerRowElm }), allColumnsHidden ? (_jsxs(TableEmptyState, { className: "mfui-table-empty-state", role: "status", children: [_jsx(TableEmptyStateTitle, { children: "All columns are hidden" }), _jsx(TableEmptyStateDescription, { children: "No data is currently displaying because every table column is hidden." })] })) : null, virtualized === true ? (_jsx(VirtualizedRows, { tableDimensions: tableDimensions, targetElm: targetElm, listElm: listElm, rowHeight: rowHeight, headerRowHeight: headerRowHeight })) : (_jsx(StaticRows, { targetElm: targetElm, listElm: listElm }))] })] }));
 };
 export const Table = (_a) => {
     var { data, columnProps, children, treeOptions } = _a, props = __rest(_a, ["data", "columnProps", "children", "treeOptions"]) // pass through props straight to table context

package/dist/Table/TableComponents.d.ts

@@ -18,5 +18,8 @@ export declare const TreeChevronPlaceholder: import("styled-components/dist/type
 export declare const TreeCellContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableViewPort: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableListElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TableEmptyState: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TableEmptyStateTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TableEmptyStateDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledTable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;