@monolith-forensics/monolith-ui 1.9.1-dev.1 → 1.9.1-dev.10

package/dist/RichTextEditor/Plugins/ImageActionsPlugin.js

@@ -60,123 +60,20 @@ const getImageFilename = (image) => {
     return "image.png";
 };
 const getImageBlob = (src) => __awaiter(void 0, void 0, void 0, function* () {
-    const response = yield fetch(src, {
-        mode: "cors",
-        credentials: "omit",
-    });
+    const response = yield fetch(src);
     if (!response.ok) {
         throw new Error("Unable to load image.");
     }
-    return {
-        blob: yield response.blob(),
-        contentType: response.headers.get("content-type") || "",
-    };
-});
-const clipboardPngType = "image/png";
-const imageMimeTypesByExtension = {
-    gif: "image/gif",
-    jpg: "image/jpeg",
-    jpeg: "image/jpeg",
-    png: clipboardPngType,
-    svg: "image/svg+xml",
-    webp: "image/webp",
-};
-const normalizeMimeType = (type) => type.toLowerCase().split(";")[0].trim();
-const getImageMimeTypeFromSource = (src) => {
-    var _a;
-    try {
-        const url = new URL(src);
-        const filename = url.pathname.split("/").filter(Boolean).pop();
-        const extension = (_a = filename === null || filename === void 0 ? void 0 : filename.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-        return extension ? imageMimeTypesByExtension[extension] || "" : "";
-    }
-    catch (_b) {
-        const dataUrlMatch = src.match(/^data:([^;,]+)/);
-        return (dataUrlMatch === null || dataUrlMatch === void 0 ? void 0 : dataUrlMatch[1]) || "";
-    }
-};
-const canWriteClipboardType = (ClipboardItemCtor, type) => {
-    if (!type)
-        return false;
-    if (typeof ClipboardItemCtor.supports === "function") {
-        return ClipboardItemCtor.supports(type);
-    }
-    return type === clipboardPngType;
-};
-const loadImageSource = (src) => new Promise((resolve, reject) => {
-    const image = new Image();
-    image.crossOrigin = "anonymous";
-    image.onload = () => resolve(image);
-    image.onerror = () => {
-        reject(new Error("Unable to prepare image for clipboard."));
-    };
-    image.src = src;
-});
-const renderImageSourceToPngBlob = (src) => __awaiter(void 0, void 0, void 0, function* () {
-    const image = yield loadImageSource(src);
-    const width = image.naturalWidth || image.width;
-    const height = image.naturalHeight || image.height;
-    if (!width || !height) {
-        throw new Error("Unable to prepare image for clipboard.");
-    }
-    const canvas = document.createElement("canvas");
-    canvas.width = width;
-    canvas.height = height;
-    const context = canvas.getContext("2d");
-    if (!context) {
-        throw new Error("Unable to prepare image for clipboard.");
-    }
-    context.drawImage(image, 0, 0, width, height);
-    return new Promise((resolve, reject) => {
-        canvas.toBlob((blob) => {
-            if (blob) {
-                resolve(blob);
-            }
-            else {
-                reject(new Error("Unable to prepare image for clipboard."));
-            }
-        }, clipboardPngType);
-    });
-});
-const convertBlobToClipboardPng = (blob, fallbackSrc) => __awaiter(void 0, void 0, void 0, function* () {
-    const objectUrl = URL.createObjectURL(blob);
-    try {
-        return yield renderImageSourceToPngBlob(objectUrl);
-    }
-    catch (error) {
-        if (!fallbackSrc || fallbackSrc === objectUrl)
-            throw error;
-        return renderImageSourceToPngBlob(fallbackSrc);
-    }
-    finally {
-        URL.revokeObjectURL(objectUrl);
-    }
-});
-const getClipboardImageBlob = (image, ClipboardItemCtor) => __awaiter(void 0, void 0, void 0, function* () {
-    const src = image.currentSrc || image.src;
-    const { blob, contentType } = yield getImageBlob(src);
-    const type = normalizeMimeType(blob.type) ||
-        normalizeMimeType(contentType) ||
-        getImageMimeTypeFromSource(src);
-    if (canWriteClipboardType(ClipboardItemCtor, type)) {
-        return {
-            blob: blob.type === type ? blob : new Blob([blob], { type }),
-            type,
-        };
-    }
-    return {
-        blob: yield convertBlobToClipboardPng(blob, src),
-        type: clipboardPngType,
-    };
+    return response.blob();
 });
 const copyImage = (image) => __awaiter(void 0, void 0, void 0, function* () {
     var _a;
-    const ClipboardItemCtor = window
-        .ClipboardItem;
+    const ClipboardItemCtor = window.ClipboardItem;
     if (!((_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.write) || !ClipboardItemCtor) {
         throw new Error("Image copying is not supported by this browser.");
     }
-    const { blob, type } = yield getClipboardImageBlob(image, ClipboardItemCtor);
+    const blob = yield getImageBlob(image.src);
+    const type = blob.type || "image/png";
     yield navigator.clipboard.write([
         new ClipboardItemCtor({
             [type]: blob,
@@ -188,7 +85,7 @@ const downloadImage = (image) => __awaiter(void 0, void 0, void 0, function* ()
     let href = image.src;
     let objectUrl = null;
     try {
-        const { blob } = yield getImageBlob(image.src);
+        const blob = yield getImageBlob(image.src);
         objectUrl = URL.createObjectURL(blob);
         href = objectUrl;
     }

package/dist/RichTextEditor/Plugins/UploadImagesPlugin.js

@@ -113,6 +113,7 @@ export const startImageUpload = (file, view, pos, handleImageUpload) => {
                 src: imageSrc,
                 alt: `${id}.png`,
                 "data-uuid": id,
+                crossorigin: "anonymous",
                 title: `Filename: ${id}.png`,
             });
             const insertTransaction = view.state.tr

package/dist/RichTextEditor/RichTextEditor.d.ts

@@ -1,12 +1,15 @@
+import "highlight.js/styles/github-dark.css";
 import { Editor } from "@tiptap/react";
-import { ExtensionType } from "./Extensions/getTiptapExtensions";
+import { ExtensionPreset, ExtensionType } from "./Extensions/getTiptapExtensions";
 import { HandleImageUrlUpload, HandleImageUpload } from "./Plugins/UploadImagesPlugin";
-import { BubbleMenuOptions } from "./Extensions/BubbleMenuExtension";
+import { BubbleMenuOptions } from "./Components/BubbleMenu";
 import { ToolbarOptions } from "./Toolbar/Toolbar";
 type RichTextEditorProps = {
     className?: string;
     editorInstanceRef?: React.RefObject<Editor | null>;
     extensions?: ExtensionType[];
+    disabledExtensions?: ExtensionType[];
+    extensionPreset?: ExtensionPreset;
     slashCommands?: any[];
     defaultValue?: string;
     value?: string;

package/dist/RichTextEditor/RichTextEditor.js

@@ -8,17 +8,23 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
+import "highlight.js/styles/github-dark.css";
 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 { Toolbar } from "./Toolbar";
-import getTipTapExtensions from "./Extensions/getTiptapExtensions";
-import { Extensions, SlashCommands } from "./Enums";
+import getTipTapExtensions, { resolveExtensions, } from "./Extensions/getTiptapExtensions";
+import { Controls, Extensions, SlashCommands } from "./Enums";
 import { addImagePlaceholder, removeImagePlaceholder, startImageUpload, } from "./Plugins/UploadImagesPlugin";
 import SaveBadge from "./Components/SaveBadge";
+import BubbleMenuContent from "./Components/BubbleMenu";
 import Fonts from "./Enums/Fonts";
 import RichTextEditorContext from "./Contexts/RichTextEditorContext";
+import { getLinkAttributesAtPosition, getLinkRangeAtPosition, openLink, } from "./Utils/linkUtils";
 const getImageFilesFromClipboard = (clipboardData) => {
     return Array.from(clipboardData.files).filter((file) => file.type.includes("image/"));
 };
@@ -317,6 +323,78 @@ const StyledContent = styled.div `
       margin: 0;
       line-height: 1.5rem;
     }
+    .editor-inline-code,
+    :not(pre) > code {
+      padding: 0.1rem 0.25rem;
+      border: 1px solid ${({ theme }) => theme.palette.divider};
+      border-radius: 4px;
+      background-color: ${({ theme }) => theme.palette.action.hover};
+      color: ${({ theme }) => theme.palette.text.secondary};
+      font-family:
+        ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas,
+        "Liberation Mono", "Courier New", monospace;
+      font-size: 0.9em;
+      box-decoration-break: clone;
+    }
+    .editor-code-block {
+      position: relative;
+      margin: 0.5rem 0;
+      padding: 0.875rem 1rem;
+      overflow-x: auto;
+      border: 1px solid #30363d;
+      border-radius: 6px;
+      background-color: #0d1117;
+      color: #c9d1d9;
+      font-family:
+        ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas,
+        "Liberation Mono", "Courier New", monospace;
+      font-size: 0.85rem;
+      line-height: 1.45rem;
+      white-space: pre;
+
+      &[data-wrap="true"] {
+        white-space: pre-wrap;
+        word-break: break-word;
+        overflow-wrap: anywhere;
+      }
+
+      code {
+        display: block;
+        min-width: max-content;
+        padding: 0;
+        border: 0;
+        background-color: transparent;
+        color: inherit;
+        font: inherit;
+      }
+
+      &[data-wrap="true"] code {
+        min-width: 0;
+        white-space: inherit;
+      }
+
+      .editor-code-block-actions {
+        display: flex;
+        position: absolute;
+        top: 0.4rem;
+        right: 0.4rem;
+        z-index: 1;
+        gap: 0.25rem;
+        opacity: 0;
+        transition: opacity 120ms ease-in-out;
+      }
+
+      .editor-code-block-action {
+        background-color: #161b22;
+        color: #c9d1d9;
+        border-color: #30363d;
+      }
+
+      &:hover .editor-code-block-actions,
+      &:focus-within .editor-code-block-actions {
+        opacity: 1;
+      }
+    }
     ul {
       margin: 0;
     }
@@ -330,8 +408,6 @@ const StyledContent = styled.div `
       color: ${({ theme }) => theme.palette.text.primary};
       text-decoration: underline;
       cursor: pointer;
-      // Set title attribute
-      title: "Click to open link";
     }
     img {
       max-width: 100%;
@@ -543,16 +619,96 @@ const StyledContent = styled.div `
     margin: 0 0.125rem;
   }
 `;
-export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = "", value, readOnly = false, font, showToolbar = true, saving = false, extensions = [], slashCommands = [], bubbleMenuOptions, toolbarOptions, autoFocus, onChange, handleImageUpload, handleImageUrlUpload, style, }) => {
+export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = "", value, readOnly = false, font, showToolbar = true, saving = false, disabledExtensions = [], extensionPreset = "basic", extensions = [], slashCommands = [], bubbleMenuOptions, toolbarOptions, autoFocus, onChange, handleImageUpload, handleImageUrlUpload, style, }) => {
+    const resolvedExtensions = useMemo(() => resolveExtensions({
+        disabledExtensions,
+        extensionPreset,
+        extensions,
+    }), [disabledExtensions, extensionPreset, extensions]);
+    const resolvedExtensionSet = useMemo(() => new Set(resolvedExtensions), [resolvedExtensions]);
+    const resolvedSlashCommands = useMemo(() => slashCommands.filter((command) => {
+        if (command === SlashCommands.CodeBlock) {
+            return resolvedExtensionSet.has(Extensions.CodeBlock);
+        }
+        return true;
+    }), [resolvedExtensionSet, slashCommands]);
+    const resolvedToolbarOptions = useMemo(() => {
+        if (!(toolbarOptions === null || toolbarOptions === void 0 ? void 0 : toolbarOptions.controls))
+            return toolbarOptions;
+        const controlExtensionMap = {
+            [Controls.BOLD]: Extensions.Bold,
+            [Controls.ITALIC]: Extensions.Italic,
+            [Controls.UNDERLINE]: Extensions.Underline,
+            [Controls.STRIKE]: Extensions.Strike,
+            [Controls.CODE]: Extensions.Code,
+            [Controls.CODE_BLOCK]: Extensions.CodeBlock,
+            [Controls.BULLET_LIST]: Extensions.BulletList,
+            [Controls.ORDERED_LIST]: Extensions.OrderedList,
+            [Controls.COLOR]: Extensions.Color,
+            [Controls.HIGHLIGHT]: Extensions.Highlight,
+            [Controls.LINK]: Extensions.Link,
+            [Controls.TEXT_ALIGN_LEFT]: Extensions.TextAlign,
+            [Controls.TEXT_ALIGN_CENTER]: Extensions.TextAlign,
+            [Controls.TEXT_ALIGN_RIGHT]: Extensions.TextAlign,
+            [Controls.TEXT_ALIGN_JUSTIFIED]: Extensions.TextAlign,
+        };
+        return Object.assign(Object.assign({}, toolbarOptions), { controls: toolbarOptions.controls.filter((control) => {
+                if (typeof control !== "string")
+                    return true;
+                const extension = controlExtensionMap[control];
+                return !extension || resolvedExtensionSet.has(extension);
+            }) });
+    }, [resolvedExtensionSet, toolbarOptions]);
     const isControlled = value !== undefined;
-    const hasImageExtension = extensions.includes(Extensions.Image);
-    const hasSlashCommandExtension = extensions.includes(Extensions.SlashCommand);
-    const hasImageSlashCommand = hasSlashCommandExtension && slashCommands.includes(SlashCommands.Image);
+    const hasImageExtension = resolvedExtensionSet.has(Extensions.Image);
+    const hasSlashCommandExtension = resolvedExtensionSet.has(Extensions.SlashCommand);
+    const hasBubbleMenuExtension = resolvedExtensionSet.has(Extensions.BubbleMenu);
+    const hasImageSlashCommand = hasSlashCommandExtension &&
+        resolvedSlashCommands.includes(SlashCommands.Image);
     const onChangeRef = useRef(onChange);
+    const bubbleMenuPortalRef = useRef(null);
     const [fontState, setFontState] = useState(font || Fonts.DEFAULT);
     useEffect(() => {
         onChangeRef.current = onChange;
     }, [onChange]);
+    const getBubbleMenuPortalRoot = useCallback(() => {
+        if (bubbleMenuPortalRef.current) {
+            return bubbleMenuPortalRef.current;
+        }
+        const portal = document.createElement("div");
+        portal.setAttribute("data-monolith-bubble-menu-portal", "");
+        document.body.appendChild(portal);
+        bubbleMenuPortalRef.current = portal;
+        return portal;
+    }, []);
+    useEffect(() => {
+        return () => {
+            var _a;
+            (_a = bubbleMenuPortalRef.current) === null || _a === void 0 ? void 0 : _a.remove();
+            bubbleMenuPortalRef.current = null;
+        };
+    }, []);
+    const shouldShowBubbleMenu = useCallback(({ editor, element, view, state, from, to }) => {
+        const { selection } = state;
+        const isChildOfMenu = element.contains(document.activeElement);
+        const hasEditorFocus = view.hasFocus() || isChildOfMenu;
+        const selectedText = state.doc.textBetween(from, to).trim();
+        const isEmptyTextBlock = !selectedText && isTextSelection(state.selection);
+        if (!hasEditorFocus ||
+            selection.empty ||
+            isEmptyTextBlock ||
+            !editor.isEditable) {
+            return false;
+        }
+        return true;
+    }, []);
+    const bubbleMenuPositionOptions = useMemo(() => ({
+        strategy: "fixed",
+        placement: "top",
+        offset: 8,
+        flip: false,
+        shift: { padding: 10 },
+    }), []);
     if (hasImageSlashCommand && !hasImageExtension) {
         throw new Error("Extensions.Image is required when using the Image slash command.");
     }
@@ -566,12 +722,29 @@ export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = ""
         editable: !readOnly,
         shouldRerenderOnTransaction: true,
         extensions: getTipTapExtensions({
-            extensions,
-            slashCommands,
-            bubbleMenuOptions,
+            disabledExtensions,
+            extensions: resolvedExtensions,
+            slashCommands: resolvedSlashCommands,
             handleImageUpload,
         }),
         editorProps: {
+            handleClick: (view, pos, event) => {
+                const linkRange = getLinkRangeAtPosition(view.state, pos);
+                const linkAttributes = getLinkAttributesAtPosition(view.state, pos);
+                if (!linkRange || !(linkAttributes === null || linkAttributes === void 0 ? void 0 : linkAttributes.href))
+                    return false;
+                const mouseEvent = event;
+                mouseEvent.preventDefault();
+                mouseEvent.stopPropagation();
+                const shouldOpenLink = mouseEvent.metaKey || mouseEvent.ctrlKey || !view.editable;
+                if (shouldOpenLink) {
+                    openLink(linkAttributes.href);
+                    return true;
+                }
+                view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, linkRange.from, linkRange.to)));
+                view.focus();
+                return true;
+            },
             handlePaste: (view, event) => {
                 if (!hasImageExtension || !handleImageUpload)
                     return false;
@@ -632,5 +805,5 @@ export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = ""
     return (_jsx(StyledContent, { className: className, children: _jsxs(RichTextEditorContext.Provider, { value: {
                 font: fontState,
                 setFont: setFontState,
-            }, children: [showToolbar && (_jsx(Toolbar, { editor: editor, toolbarOptions: toolbarOptions })), saving && _jsx(SaveBadge, {}), _jsx(EditorContent, { className: "editor-content", editor: editor, "data-font": fontState || null, style: style })] }) }));
+            }, children: [showToolbar && (_jsx(Toolbar, { editor: editor, toolbarOptions: resolvedToolbarOptions })), saving && _jsx(SaveBadge, {}), editor && hasBubbleMenuExtension && (_jsx(TiptapBubbleMenu, { editor: editor, pluginKey: "bubbleMenu", updateDelay: 200, appendTo: getBubbleMenuPortalRoot, shouldShow: shouldShowBubbleMenu, options: bubbleMenuPositionOptions, children: _jsx(BubbleMenuContent, { editor: editor, customMenuItems: bubbleMenuOptions === null || bubbleMenuOptions === void 0 ? void 0 : bubbleMenuOptions.customMenuItems }) })), _jsx(EditorContent, { className: "editor-content", editor: editor, "data-font": fontState || null, style: style })] }) }));
 };

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

@@ -1,13 +1,17 @@
 import { Editor } from "@tiptap/react";
+import { ButtonProps } from "../../Button";
 export type ControlProps = {
     className?: string;
     editor: Editor | null;
     isActive?: any;
-    operation: {
+    operation?: {
         name: string;
         attributes?: any;
     };
+    onClick?: (editor: Editor | null) => void;
+    disabled?: boolean;
     label: string;
     icon: any;
+    size?: ButtonProps["size"];
 };
-export declare const Control: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<ControlProps, never>> & string & Omit<({ className, editor, isActive, operation, label, icon: Icon, }: ControlProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const Control: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<ControlProps, never>> & string & Omit<({ className, editor, isActive, operation, onClick, disabled, label, icon: Icon, size, }: ControlProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;

package/dist/RichTextEditor/Toolbar/Control.js

@@ -1,23 +1,30 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import Labels from "./Labels";
-export const Control = styled(({ className, editor, isActive, operation, label, icon: Icon, }) => {
+import { Button } from "../../Button";
+export const Control = styled(({ className, editor, isActive, operation, onClick, disabled, label, icon: Icon, size = "xs", }) => {
     var _a;
     const _label = Labels[label];
     const active = (isActive === null || isActive === void 0 ? void 0 : isActive.name)
         ? (_a = editor === null || editor === void 0 ? void 0 : editor.isActive) === null || _a === void 0 ? void 0 : _a.call(editor, isActive.name, isActive.attributes)
         : false;
-    return (_jsx("button", { className: className + (active ? " active" : ""), "aria-label": _label, "data-active": active, title: _label, onClick: () => {
+    return (_jsx(Button, { className: className + (active ? " active" : ""), "aria-label": _label, "data-active": active, title: _label, disabled: disabled, onClick: () => {
+            if (onClick) {
+                onClick(editor);
+                return;
+            }
+            if (!operation)
+                return;
             const focus = editor === null || editor === void 0 ? void 0 : editor.chain().focus();
             focus[operation.name](operation.attributes).run();
-        }, children: _jsx(Icon, { size: "16px" }) }));
+        }, size: size, children: _jsx(Icon, { size: "16px" }) }));
 }) `
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  padding: 0px;
+
+  padding: 5px;
+
   background-color: transparent;
   cursor: pointer;
   color: ${({ theme }) => theme.palette.text.primary};

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

@@ -8,6 +8,8 @@ export declare const BoldControl: ({ editor }: ControlProps) => import("react/js
 export declare const ItalicControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const UnderlineControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const StrikeThroughControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
+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 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,6 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { IconBold, IconItalic, IconUnderline, IconStrikethrough, IconH1, IconH2, IconH3, IconH4, IconList, IconListNumbers, IconAlignLeft, IconAlignRight, IconAlignCenter, IconAlignJustified, IconCornerUpLeft, IconCornerUpRight, } from "@tabler/icons-react";
+import { CodeIcon } from "lucide-react";
+import { SquareCodeIcon } from "lucide-react";
 import { Control } from "./Control";
+import { hasInlineCode, toggleInlineCode } from "../Utils/codeUtils";
+import { hasSyntaxHighlightedCodeBlock, toggleCodeBlock, } from "../Utils/codeBlockUtils";
 export const UndoControl = ({ editor }) => {
     return (_jsx(Control, { editor: editor, label: "undoControlLabel", operation: {
             name: "undo",
@@ -39,6 +43,16 @@ export const StrikeThroughControl = ({ editor }) => {
             name: "toggleStrike",
         }, icon: IconStrikethrough }));
 };
+export const CodeControl = ({ editor }) => {
+    return (_jsx(Control, { editor: editor, label: "codeControlLabel", isActive: {
+            name: "code",
+        }, onClick: toggleInlineCode, disabled: !hasInlineCode(editor), icon: CodeIcon }));
+};
+export const CodeBlockControl = ({ editor }) => {
+    return (_jsx(Control, { editor: editor, label: "codeBlockControlLabel", isActive: {
+            name: "codeBlock",
+        }, onClick: toggleCodeBlock, disabled: !hasSyntaxHighlightedCodeBlock(editor), icon: SquareCodeIcon }));
+};
 export const Heading1Control = ({ editor }) => {
     return (_jsx(Control, { editor: editor, label: "h1ControlLabel", isActive: {
             name: "heading",

package/dist/RichTextEditor/Toolbar/ControlsGroup.js

@@ -9,6 +9,7 @@ const ControlsGroup = styled(forwardRef(({ className, children }, ref) => {
 })) `
   & {
     display: flex;
+    flex: 0 0 auto;
     justify-content: flex-start;
     align-items: center;
   }