@monolith-forensics/monolith-ui 1.9.3-dev.3 → 1.9.3-dev.4

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

@@ -8,6 +8,7 @@ export declare enum Controls {
     CLEAR_FORMATTING = "clearFormatting",
     CODE = "code",
     CODE_BLOCK = "codeBlock",
+    HORIZONTAL_RULE = "horizontalRule",
     BLOCKQUOTE = "blockquote",
     HEADING_1 = "heading_1",
     HEADING_2 = "heading_2",

package/dist/RichTextEditor/Enums/Controls.js

@@ -9,6 +9,7 @@ export var Controls;
     Controls["CLEAR_FORMATTING"] = "clearFormatting";
     Controls["CODE"] = "code";
     Controls["CODE_BLOCK"] = "codeBlock";
+    Controls["HORIZONTAL_RULE"] = "horizontalRule";
     Controls["BLOCKQUOTE"] = "blockquote";
     Controls["HEADING_1"] = "heading_1";
     Controls["HEADING_2"] = "heading_2";

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

@@ -8,6 +8,7 @@ export declare enum SlashCommands {
     NumberedList = "Numbered List",
     Code = "Code",
     CodeBlock = "Code Block",
+    HorizontalRule = "Horizontal Rule",
     Blockquote = "Blockquote",
     CurrentDate = "Current Date",
     CurrentTimestamp = "Current Timestamp",

package/dist/RichTextEditor/Enums/SlashCommands.js

@@ -9,6 +9,7 @@ export var SlashCommands;
     SlashCommands["NumberedList"] = "Numbered List";
     SlashCommands["Code"] = "Code";
     SlashCommands["CodeBlock"] = "Code Block";
+    SlashCommands["HorizontalRule"] = "Horizontal Rule";
     SlashCommands["Blockquote"] = "Blockquote";
     SlashCommands["CurrentDate"] = "Current Date";
     SlashCommands["CurrentTimestamp"] = "Current Timestamp";

package/dist/RichTextEditor/Extensions/getSlashCommand.js

@@ -11,7 +11,7 @@ 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, TextQuote, Image as ImageIcon, Calendar, CodeIcon, ClockIcon, SquareCodeIcon, Table2Icon, } from "lucide-react";
+import { Heading1, Heading2, Heading3, Heading4, List, ListOrdered, Text, TextQuote, Image as ImageIcon, Calendar, CodeIcon, ClockIcon, SeparatorHorizontalIcon, SquareCodeIcon, Table2Icon, } from "lucide-react";
 import { startImageUpload, } from "../Plugins/UploadImagesPlugin.js";
 import { PluginKey } from "@tiptap/pm/state";
 import SlashCommandList from "./SlashCommandList";
@@ -148,6 +148,15 @@ const getCommandItems = (values, options) => {
                 editor.chain().focus().deleteRange(range).toggleBlockquote().run();
             },
         },
+        {
+            title: SlashCommands.HorizontalRule,
+            description: "Insert a horizontal divider.",
+            searchTerms: ["divider", "line", "rule", "separator"],
+            icon: SeparatorHorizontalIcon,
+            command: ({ editor, range }) => {
+                editor.chain().focus().deleteRange(range).setHorizontalRule().run();
+            },
+        },
         {
             title: SlashCommands.CurrentDate,
             description: "Insert the current date.",

package/dist/RichTextEditor/Extensions/getTiptapExtensions.js

@@ -71,6 +71,7 @@ export const BASIC_EXTENSIONS = [
     Extensions.Strike,
     Extensions.Code,
     Extensions.Blockquote,
+    Extensions.HorizontalRule,
     Extensions.BulletList,
     Extensions.OrderedList,
     Extensions.TextStyle,
@@ -88,7 +89,6 @@ export const MINIMAL_EXTENSIONS = [
 export const FULL_EXTENSIONS = [
     ...BASIC_EXTENSIONS,
     Extensions.CodeBlock,
-    Extensions.HorizontalRule,
     Extensions.Table,
     Extensions.TableCell,
     Extensions.TableHeader,

package/dist/RichTextEditor/RichTextEditor.js

@@ -14,7 +14,7 @@ import { EditorContent, useEditor } from "@tiptap/react";
 import { BubbleMenu as TiptapBubbleMenu, } from "@tiptap/react/menus";
 import { isTextSelection } from "@tiptap/core";
 import { DOMParser as ProseMirrorDOMParser } from "@tiptap/pm/model";
-import { TextSelection } from "@tiptap/pm/state";
+import { NodeSelection, TextSelection } from "@tiptap/pm/state";
 import { Toolbar } from "./Toolbar";
 import getTipTapExtensions, { resolveExtensions, } from "./Extensions/getTiptapExtensions";
 import { Controls, Extensions, SlashCommands } from "./Enums";
@@ -435,6 +435,12 @@ const StyledContent = styled.div `
       margin: 0;
       line-height: 1.5rem;
     }
+
+    hr {
+      border: 1px solid ${({ theme }) => theme.palette.action.hover};
+      margin: 1rem 0;
+    }
+
     .editor-inline-code,
     :not(pre) > code {
       padding: 0.1rem 0.25rem;
@@ -844,6 +850,9 @@ export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = ""
         if (command === SlashCommands.Blockquote) {
             return resolvedExtensionSet.has(Extensions.Blockquote);
         }
+        if (command === SlashCommands.HorizontalRule) {
+            return resolvedExtensionSet.has(Extensions.HorizontalRule);
+        }
         if (command === SlashCommands.Table) {
             return resolvedExtensionSet.has(Extensions.Table);
         }
@@ -860,6 +869,7 @@ export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = ""
             [Controls.CODE]: Extensions.Code,
             [Controls.CODE_BLOCK]: Extensions.CodeBlock,
             [Controls.BLOCKQUOTE]: Extensions.Blockquote,
+            [Controls.HORIZONTAL_RULE]: Extensions.HorizontalRule,
             [Controls.BULLET_LIST]: Extensions.BulletList,
             [Controls.ORDERED_LIST]: Extensions.OrderedList,
             [Controls.COLOR]: Extensions.Color,
@@ -917,8 +927,11 @@ export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = ""
         const hasEditorFocus = view.hasFocus() || isChildOfMenu;
         const selectedText = state.doc.textBetween(from, to).trim();
         const isEmptyTextBlock = !selectedText && isTextSelection(state.selection);
+        const isHorizontalRuleSelection = selection instanceof NodeSelection &&
+            selection.node.type.name === "horizontalRule";
         if (!hasEditorFocus ||
             selection.empty ||
+            isHorizontalRuleSelection ||
             isEmptyTextBlock ||
             !editor.isEditable) {
             return false;

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

@@ -15,6 +15,7 @@ export declare const StrikeThroughControl: ({ editor }: ControlProps) => import(
 export declare const CodeControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const CodeBlockControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const BlockquoteControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HorizontalRuleControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Heading1Control: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Heading2Control: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Heading3Control: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;

package/dist/RichTextEditor/Toolbar/Controls.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconBold, IconItalic, IconUnderline, IconStrikethrough, IconH1, IconH2, IconH3, IconH4, IconList, IconListNumbers, IconAlignLeft, IconAlignRight, IconAlignCenter, IconAlignJustified, IconCornerUpLeft, IconCornerUpRight, IconBlockquote, } from "@tabler/icons-react";
+import { IconBold, IconItalic, IconUnderline, IconStrikethrough, IconH1, IconH2, IconH3, IconH4, IconList, IconListNumbers, IconAlignLeft, IconAlignRight, IconAlignCenter, IconAlignJustified, IconCornerUpLeft, IconCornerUpRight, IconBlockquote, IconSeparatorHorizontal, } from "@tabler/icons-react";
 import { CodeIcon, HighlighterIcon, PaletteIcon, RemoveFormattingIcon, SquircleIcon, TypeIcon, } from "lucide-react";
 import { SquareCodeIcon } from "lucide-react";
 import { Control } from "./Control";
@@ -163,6 +163,11 @@ export const BlockquoteControl = ({ editor }) => {
             name: "toggleBlockquote",
         }, icon: IconBlockquote }));
 };
+export const HorizontalRuleControl = ({ editor }) => {
+    return (_jsx(Control, { editor: editor, label: "hrControlLabel", operation: {
+            name: "setHorizontalRule",
+        }, icon: IconSeparatorHorizontal }));
+};
 export const Heading1Control = ({ editor }) => {
     return (_jsx(Control, { editor: editor, label: "h1ControlLabel", isActive: {
             name: "heading",

package/dist/RichTextEditor/Toolbar/Toolbar.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import ControlsGroup from "./ControlsGroup";
-import { UndoControl, RedoControl, FontControl, TextColorControl, HighlightControl, BoldControl, ItalicControl, UnderlineControl, StrikeThroughControl, ClearFormattingControl, CodeControl, CodeBlockControl, BlockquoteControl, 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, BlockquoteControl, HorizontalRuleControl, Heading1Control, Heading2Control, Heading3Control, Heading4Control, BulletListControl, OrderedListControl, AlignLeftControl, AlignCenterControl, AlignRightControl, AlignJustifiedControl, } from "./Controls";
 import { Controls } from "../Enums";
 import { DropDownMenu } from "../../DropDownMenu";
 import { useState } from "react";
@@ -46,5 +46,5 @@ export const Toolbar = ({ editor, toolbarOptions }) => {
                             },
                         } }, item.options, { size: "xs", children: (_b = item === null || item === void 0 ? void 0 : item.options) === null || _b === void 0 ? void 0 : _b.label }), index));
                 }
-            }), _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 })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.BLOCKQUOTE)) && (_jsx(BlockquoteControl, { 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 }))] }));
+            }), _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 })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.BLOCKQUOTE)) && (_jsx(BlockquoteControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HORIZONTAL_RULE)) && (_jsx(HorizontalRuleControl, { 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.9.3-dev.3",
+  "version": "1.9.3-dev.4",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",