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

package/dist/MonolithUIProvider/MonolithUIProvider.d.ts

@@ -81,6 +81,29 @@ export interface MonolithDefaultTheme {
         action: {
             hover: string;
         };
+        codeBlock?: {
+            background: string;
+            text: string;
+            border: string;
+            selection: string;
+            syntax: {
+                comment: string;
+                punctuation: string;
+                property: string;
+                selector: string;
+                operator: string;
+                keyword: string;
+                string: string;
+                number: string;
+                function: string;
+                variable: string;
+                tag: string;
+                attribute: string;
+                literal: string;
+                deleted: string;
+                inserted: string;
+            };
+        };
         divider: string;
     };
     header: {

package/dist/RichTextEditor/Components/BubbleMenu.js

@@ -9,10 +9,6 @@ import TextColors from "../Enums/TextColors";
 import HighlightColors from "../Enums/HighlightColors";
 import LinkEditor from "./LinkEditor";
 import { hasInlineCode, toggleInlineCode } from "../Utils/codeUtils";
-import CodeBlockLanguageSelect from "./CodeBlockLanguageSelect";
-import CodeBlockCopyButton from "./CodeBlockCopyButton";
-import CodeBlockWrapButton from "./CodeBlockWrapButton";
-import CodeBlockFormatButton from "./CodeBlockFormatButton";
 import { hasSyntaxHighlightedCodeBlock, toggleCodeBlock, } from "../Utils/codeBlockUtils";
 const getMenuItems = (editor, customMenuItems, theme, openLinkEditor) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -77,7 +73,8 @@ const getMenuItems = (editor, customMenuItems, theme, openLinkEditor) => {
                     data: {
                         Icon: CaseSensitiveIcon,
                         command: (editor) => {
-                            if (editor.isActive("bulletList") || editor.isActive("orderedList")) {
+                            if (editor.isActive("bulletList") ||
+                                editor.isActive("orderedList")) {
                                 editor
                                     .chain()
                                     .focus()
@@ -387,11 +384,11 @@ const BubbleItemButton = styled(Button) `
 `;
 const CodeBlockBubbleTools = ({ editor, theme, }) => {
     const nodeTypeMenu = getMenuItems(editor, [], theme, () => undefined).find((item) => item.name === "node_type");
-    return (_jsxs(_Fragment, { children: [(nodeTypeMenu === null || nodeTypeMenu === void 0 ? void 0 : nodeTypeMenu.type) === "menu" && (_jsx(DropDownMenu, Object.assign({ data: nodeTypeMenu.items, size: "xs", arrow: nodeTypeMenu.arrow, buttonProps: nodeTypeMenu.buttonProps, variant: "subtle", buttonRender: nodeTypeMenu.buttonRender, onItemSelect: (item) => { var _a, _b; return (_b = (_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.command) === null || _b === void 0 ? void 0 : _b.call(_a, editor, ""); }, dropDownProps: {
-                    style: { width: 135 },
-                } }, nodeTypeMenu.dropDownProps, { children: nodeTypeMenu.icon
-                    ? (_jsx(nodeTypeMenu.icon, { size: 14 }))
-                    : (nodeTypeMenu.label || nodeTypeMenu.name) }))), _jsx(CodeBlockLanguageSelect, { editor: editor }), _jsx(CodeBlockWrapButton, { editor: editor }), _jsx(CodeBlockFormatButton, { editor: editor }), _jsx(CodeBlockCopyButton, { editor: editor })] }));
+    return (_jsx(_Fragment, { children: (nodeTypeMenu === null || nodeTypeMenu === void 0 ? void 0 : nodeTypeMenu.type) === "menu" && (_jsx(DropDownMenu, Object.assign({ data: nodeTypeMenu.items, size: "xs", arrow: nodeTypeMenu.arrow, buttonProps: nodeTypeMenu.buttonProps, variant: "subtle", buttonRender: nodeTypeMenu.buttonRender, onItemSelect: (item) => { var _a, _b; return (_b = (_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.command) === null || _b === void 0 ? void 0 : _b.call(_a, editor, ""); }, dropDownProps: {
+                style: { width: 135 },
+            } }, nodeTypeMenu.dropDownProps, { children: nodeTypeMenu.icon
+                ? (_jsx(nodeTypeMenu.icon, { size: 14 }))
+                : (nodeTypeMenu.label || nodeTypeMenu.name) }))) }));
 };
 const BubbleMenu = ({ className, editor, customMenuItems = [], }) => {
     const theme = useTheme();

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

@@ -0,0 +1,18 @@
+export declare const CodeBlockBaseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+    ref?: import("react").RefObject<HTMLButtonElement>;
+    children?: import("react").ReactNode | string;
+    className?: string;
+    loading?: boolean;
+    leftSection?: import("react").ReactNode;
+    rightSection?: import("react").ReactNode;
+    href?: string | null;
+    download?: string | null;
+    fullWidth?: boolean;
+    size?: import("../../core").Size;
+    variant?: import("../../core").Variant;
+    color?: import("../../Button").ButtonColor;
+    disabled?: boolean;
+    selected?: boolean;
+    justify?: "start" | "center" | "end";
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}, never>> & string & Omit<import("react").FC<import("../../Button").ButtonProps>, keyof import("react").Component<any, {}, any>>;

package/dist/RichTextEditor/Components/CodeBlockBaseButton.js

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+import { Button } from "../../Button";
+export const CodeBlockBaseButton = styled(Button) `
+  padding: 5px;
+  background-color: ${({ theme }) => theme.palette.background.paper};
+`;

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

@@ -5,5 +5,5 @@ type CodeBlockCopyButtonProps = {
     text?: string;
     size?: "xs" | "sm";
 };
-declare const CodeBlockCopyButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<CodeBlockCopyButtonProps, never>> & string & Omit<({ className, editor, text, size }: CodeBlockCopyButtonProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+declare const CodeBlockCopyButton: ({ className, editor, text, size, }: CodeBlockCopyButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default CodeBlockCopyButton;

package/dist/RichTextEditor/Components/CodeBlockCopyButton.js

@@ -9,11 +9,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import styled from "styled-components";
 import { CheckIcon, CopyIcon } from "lucide-react";
-import { Button } from "../../Button";
 import { copyCodeBlockText, getActiveCodeBlockText, } from "../Utils/codeBlockUtils";
-const CodeBlockCopyButton = styled(({ className, editor, text, size = "xs" }) => {
+import { CodeBlockBaseButton } from "./CodeBlockBaseButton";
+const CodeBlockCopyButton = ({ className, editor, text, size = "xs", }) => {
     const [copied, setCopied] = useState(false);
     const [copyFailed, setCopyFailed] = useState(false);
     const code = text !== null && text !== void 0 ? text : getActiveCodeBlockText(editor || null);
@@ -26,7 +25,7 @@ const CodeBlockCopyButton = styled(({ className, editor, text, size = "xs" }) =>
         }, 1400);
         return () => window.clearTimeout(timeout);
     }, [copied, copyFailed]);
-    return (_jsx(Button, { className: className, size: size, variant: "outlined", title: copyFailed ? "Unable to copy" : copied ? "Copied" : "Copy code", "aria-label": copyFailed ? "Unable to copy code" : copied ? "Copied" : "Copy code", disabled: !code, onClick: (event) => __awaiter(void 0, void 0, void 0, function* () {
+    return (_jsx(CodeBlockBaseButton, { className: className, size: size, variant: "outlined", title: copyFailed ? "Unable to copy" : copied ? "Copied" : "Copy code", "aria-label": copyFailed ? "Unable to copy code" : copied ? "Copied" : "Copy code", disabled: !code, onClick: (event) => __awaiter(void 0, void 0, void 0, function* () {
             event.preventDefault();
             event.stopPropagation();
             try {
@@ -39,7 +38,5 @@ const CodeBlockCopyButton = styled(({ className, editor, text, size = "xs" }) =>
                 setCopyFailed(true);
             }
         }), children: copied ? _jsx(CheckIcon, { size: 14 }) : _jsx(CopyIcon, { size: 14 }) }));
-}) `
-  padding: 3px;
-`;
+};
 export default CodeBlockCopyButton;

package/dist/RichTextEditor/Components/CodeBlockFormatButton.js

@@ -10,8 +10,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { CheckIcon, TriangleAlertIcon, WandSparklesIcon } from "lucide-react";
-import { Button } from "../../Button";
 import { canFormatCodeBlockLanguage, formatActiveCodeBlock, getCodeBlockLanguage, } from "../Utils/codeBlockUtils";
+import { CodeBlockBaseButton } from "./CodeBlockBaseButton";
 const CodeBlockFormatButton = ({ className, editor, language, onFormat, size = "xs", }) => {
     const [formatted, setFormatted] = useState(false);
     const [formatFailed, setFormatFailed] = useState(false);
@@ -26,7 +26,7 @@ const CodeBlockFormatButton = ({ className, editor, language, onFormat, size = "
         }, 1400);
         return () => window.clearTimeout(timeout);
     }, [formatted, formatFailed]);
-    return (_jsx(Button, { className: className, size: size, variant: "outlined", title: !canFormat
+    return (_jsx(CodeBlockBaseButton, { className: className, size: size, variant: "outlined", title: !canFormat
             ? "Formatting is not supported for this language"
             : formatFailed
                 ? "Unable to format code"

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

@@ -1,6 +1,9 @@
 import { Editor } from "@tiptap/react";
 type CodeBlockLanguageSelectProps = {
-    editor: Editor | null;
+    className?: string;
+    editor?: Editor | null;
+    language?: string;
+    onLanguageChange?: (language: string) => void;
 };
-declare const CodeBlockLanguageSelect: ({ editor }: CodeBlockLanguageSelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const CodeBlockLanguageSelect: ({ className, editor, language, onLanguageChange, }: CodeBlockLanguageSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default CodeBlockLanguageSelect;

package/dist/RichTextEditor/Components/CodeBlockLanguageSelect.js

@@ -2,15 +2,24 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { CodeXmlIcon } from "lucide-react";
 import { DropDownMenu } from "../../DropDownMenu";
 import { CODE_BLOCK_LANGUAGES, getCodeBlockLanguage, getCodeBlockLanguageOption, setCodeBlockLanguage, } from "../Utils/codeBlockUtils";
-const CodeBlockLanguageSelect = ({ editor }) => {
-    const language = getCodeBlockLanguage(editor);
-    const selectedLanguage = getCodeBlockLanguageOption(language);
-    return (_jsx(DropDownMenu, { data: CODE_BLOCK_LANGUAGES, value: [selectedLanguage], enableSelectedOptionStyling: true, size: "xs", variant: "outlined", disabled: !(editor === null || editor === void 0 ? void 0 : editor.isActive("codeBlock")), onItemSelect: (item) => {
-            setCodeBlockLanguage(editor, item.value);
+import { useTheme } from "styled-components";
+const CodeBlockLanguageSelect = ({ className, editor, language, onLanguageChange, }) => {
+    const theme = useTheme();
+    const codeLanguage = language !== null && language !== void 0 ? language : getCodeBlockLanguage(editor || null);
+    const selectedLanguage = getCodeBlockLanguageOption(codeLanguage);
+    return (_jsx(DropDownMenu, { className: className, data: CODE_BLOCK_LANGUAGES, value: [selectedLanguage], enableSelectedOptionStyling: true, size: "xs", variant: "outlined", disabled: !onLanguageChange && !(editor === null || editor === void 0 ? void 0 : editor.isActive("codeBlock")), onItemSelect: (item) => {
+            if (onLanguageChange) {
+                onLanguageChange(item.value);
+                return;
+            }
+            setCodeBlockLanguage(editor || null, item.value);
         }, buttonProps: {
             title: "Select code language",
             leftSection: _jsx(CodeXmlIcon, { size: 12 }),
-            style: { padding: "1px 6px" },
+            style: {
+                padding: "1px 6px",
+                backgroundColor: theme.palette.background.paper,
+            },
         }, dropDownProps: {
             style: {
                 width: 150,

package/dist/RichTextEditor/Components/CodeBlockNodeView.js

@@ -12,11 +12,12 @@ import { NodeViewContent, NodeViewWrapper, } from "@tiptap/react";
 import CodeBlockCopyButton from "./CodeBlockCopyButton";
 import CodeBlockWrapButton from "./CodeBlockWrapButton";
 import CodeBlockFormatButton from "./CodeBlockFormatButton";
+import CodeBlockLanguageSelect from "./CodeBlockLanguageSelect";
 import { formatCodeBlockText, replaceCodeBlockContent, } from "../Utils/codeBlockUtils";
 const CodeBlockNodeView = ({ editor, getPos, node, updateAttributes, }) => {
     const language = node.attrs.language;
     const wrap = Boolean(node.attrs.wrap);
-    return (_jsxs(NodeViewWrapper, { as: "pre", className: "editor-code-block", "data-language": language || "plaintext", "data-wrap": wrap ? "true" : "false", children: [_jsxs("div", { className: "editor-code-block-actions", contentEditable: false, children: [_jsx(CodeBlockWrapButton, { className: "editor-code-block-action", active: wrap, onToggle: () => updateAttributes({ wrap: !wrap }) }), _jsx(CodeBlockFormatButton, { className: "editor-code-block-action", language: language, onFormat: () => __awaiter(void 0, void 0, void 0, function* () {
+    return (_jsxs(NodeViewWrapper, { as: "pre", className: "editor-code-block", "data-language": language || "plaintext", "data-wrap": wrap ? "true" : "false", children: [_jsxs("div", { className: "editor-code-block-actions", contentEditable: false, children: [_jsx(CodeBlockLanguageSelect, { language: language, onLanguageChange: (language) => updateAttributes({ language }) }), _jsx(CodeBlockWrapButton, { active: wrap, onToggle: () => updateAttributes({ wrap: !wrap }) }), _jsx(CodeBlockFormatButton, { className: "editor-code-block-action", language: language, onFormat: () => __awaiter(void 0, void 0, void 0, function* () {
                             const pos = getPos();
                             if (typeof pos !== "number")
                                 return;

package/dist/RichTextEditor/Components/CodeBlockWrapButton.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { WrapTextIcon } from "lucide-react";
-import { Button } from "../../Button";
-import { getCodeBlockWrap, toggleCodeBlockWrap, } from "../Utils/codeBlockUtils";
+import { getCodeBlockWrap, toggleCodeBlockWrap } from "../Utils/codeBlockUtils";
+import { CodeBlockBaseButton } from "./CodeBlockBaseButton";
 const CodeBlockWrapButton = ({ className, editor, active, onToggle, size = "xs", }) => {
     const isWrapped = active !== null && active !== void 0 ? active : getCodeBlockWrap(editor || null);
-    return (_jsx(Button, { className: className, size: size, variant: "outlined", title: isWrapped ? "Disable code wrapping" : "Enable code wrapping", "aria-label": isWrapped ? "Disable code wrapping" : "Enable code wrapping", selected: isWrapped, disabled: !onToggle && !(editor === null || editor === void 0 ? void 0 : editor.isActive("codeBlock")), onClick: (event) => {
+    return (_jsx(CodeBlockBaseButton, { className: className, size: size, variant: "outlined", title: isWrapped ? "Disable code wrapping" : "Enable code wrapping", "aria-label": isWrapped ? "Disable code wrapping" : "Enable code wrapping", selected: isWrapped, disabled: !onToggle && !(editor === null || editor === void 0 ? void 0 : editor.isActive("codeBlock")), onClick: (event) => {
             event.preventDefault();
             event.stopPropagation();
             if (onToggle) {

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

@@ -6,6 +6,7 @@ export declare enum SlashCommands {
     Heading4 = "Heading 4",
     BulletList = "Bullet List",
     NumberedList = "Numbered List",
+    Code = "Code",
     CodeBlock = "Code Block",
     CurrentDate = "Current Date",
     CurrentTimestamp = "Current Timestamp",

package/dist/RichTextEditor/Enums/SlashCommands.js

@@ -7,6 +7,7 @@ export var SlashCommands;
     SlashCommands["Heading4"] = "Heading 4";
     SlashCommands["BulletList"] = "Bullet List";
     SlashCommands["NumberedList"] = "Numbered List";
+    SlashCommands["Code"] = "Code";
     SlashCommands["CodeBlock"] = "Code Block";
     SlashCommands["CurrentDate"] = "Current Date";
     SlashCommands["CurrentTimestamp"] = "Current Timestamp";

package/dist/RichTextEditor/Extensions/SlashCommandList.js

@@ -62,7 +62,6 @@ const CommandDescription = styled.div `
   color: ${({ theme }) => theme.palette.text.secondary};
   text-overflow: ellipsis;
   overflow: hidden;
-  white-space: nowrap;
 `;
 const updateScrollView = (container, item) => {
     const containerHeight = container.offsetHeight;

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, Image as ImageIcon, Calendar, ClockIcon, SquareCodeIcon, } from "lucide-react";
+import { Heading1, Heading2, Heading3, Heading4, List, ListOrdered, Text, Image as ImageIcon, Calendar, CodeIcon, ClockIcon, SquareCodeIcon, } from "lucide-react";
 import { startImageUpload, } from "../Plugins/UploadImagesPlugin.js";
 import { PluginKey } from "@tiptap/pm/state";
 import SlashCommandList from "./SlashCommandList";
@@ -116,6 +116,15 @@ const getCommandItems = (values, options) => {
                 editor.chain().focus().deleteRange(range).toggleOrderedList().run();
             },
         },
+        {
+            title: SlashCommands.Code,
+            description: "Start typing inline code.",
+            searchTerms: ["inline", "monospace"],
+            icon: CodeIcon,
+            command: ({ editor, range }) => {
+                editor.chain().focus().deleteRange(range).setCode().run();
+            },
+        },
         {
             title: SlashCommands.CodeBlock,
             description: "Create a syntax-highlighted code block.",

package/dist/RichTextEditor/RichTextEditor.d.ts

@@ -1,4 +1,3 @@
-import "highlight.js/styles/github-dark.css";
 import { Editor } from "@tiptap/react";
 import { ExtensionPreset, ExtensionType } from "./Extensions/getTiptapExtensions";
 import { HandleImageUrlUpload, HandleImageUpload } from "./Plugins/UploadImagesPlugin";

package/dist/RichTextEditor/RichTextEditor.js

@@ -10,7 +10,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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";
@@ -25,6 +24,61 @@ import BubbleMenuContent from "./Components/BubbleMenu";
 import Fonts from "./Enums/Fonts";
 import RichTextEditorContext from "./Contexts/RichTextEditorContext";
 import { getLinkAttributesAtPosition, getLinkRangeAtPosition, openLink, } from "./Utils/linkUtils";
+const codeBlockFallbacks = {
+    light: {
+        background: "#f6f8fa",
+        text: "#24292f",
+        border: "#d0d7de",
+        selection: "#0969da2e",
+        syntax: {
+            comment: "#6e7781",
+            punctuation: "#24292f",
+            property: "#0550ae",
+            selector: "#116329",
+            operator: "#cf222e",
+            keyword: "#cf222e",
+            string: "#0a3069",
+            number: "#0550ae",
+            function: "#8250df",
+            variable: "#953800",
+            tag: "#116329",
+            attribute: "#0550ae",
+            literal: "#0550ae",
+            deleted: "#82071e",
+            inserted: "#116329",
+        },
+    },
+    dark: {
+        background: "#0d1117",
+        text: "#c9d1d9",
+        border: "#30363d",
+        selection: "#1f6feb40",
+        syntax: {
+            comment: "#8b949e",
+            punctuation: "#c9d1d9",
+            property: "#79c0ff",
+            selector: "#7ee787",
+            operator: "#ff7b72",
+            keyword: "#ff7b72",
+            string: "#a5d6ff",
+            number: "#79c0ff",
+            function: "#d2a8ff",
+            variable: "#ffa657",
+            tag: "#7ee787",
+            attribute: "#79c0ff",
+            literal: "#79c0ff",
+            deleted: "#ffa198",
+            inserted: "#aff5b4",
+        },
+    },
+};
+const getCodeBlockTheme = (theme) => {
+    if (theme.palette.codeBlock)
+        return theme.palette.codeBlock;
+    return theme.palette.mode === "DARK"
+        ? codeBlockFallbacks.dark
+        : codeBlockFallbacks.light;
+};
 const getImageFilesFromClipboard = (clipboardData) => {
     return Array.from(clipboardData.files).filter((file) => file.type.includes("image/"));
 };
@@ -339,12 +393,12 @@ const StyledContent = styled.div `
     .editor-code-block {
       position: relative;
       margin: 0.5rem 0;
-      padding: 0.875rem 1rem;
+      padding: 1rem 0.875rem;
       overflow-x: auto;
-      border: 1px solid #30363d;
+      border: 1px solid ${({ theme }) => getCodeBlockTheme(theme).border};
       border-radius: 6px;
-      background-color: #0d1117;
-      color: #c9d1d9;
+      background-color: ${({ theme }) => getCodeBlockTheme(theme).background};
+      color: ${({ theme }) => getCodeBlockTheme(theme).text};
       font-family:
         ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas,
         "Liberation Mono", "Courier New", monospace;
@@ -352,6 +406,10 @@ const StyledContent = styled.div `
       line-height: 1.45rem;
       white-space: pre;
 
+      ::selection {
+        background-color: ${({ theme }) => getCodeBlockTheme(theme).selection};
+      }
+
       &[data-wrap="true"] {
         white-space: pre-wrap;
         word-break: break-word;
@@ -375,6 +433,7 @@ const StyledContent = styled.div `
 
       .editor-code-block-actions {
         display: flex;
+        align-items: center;
         position: absolute;
         top: 0.4rem;
         right: 0.4rem;
@@ -384,16 +443,91 @@ const StyledContent = styled.div `
         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;
       }
+
+      .hljs-comment,
+      .hljs-quote {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.comment};
+      }
+
+      .hljs-punctuation {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.punctuation};
+      }
+
+      .hljs-property,
+      .hljs-attr,
+      .hljs-attribute,
+      .hljs-doctag {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.property};
+      }
+
+      .hljs-selector-tag,
+      .hljs-selector-id,
+      .hljs-selector-class,
+      .hljs-selector-attr,
+      .hljs-selector-pseudo {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.selector};
+      }
+
+      .hljs-operator,
+      .hljs-params {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.operator};
+      }
+
+      .hljs-keyword,
+      .hljs-meta .hljs-keyword,
+      .hljs-template-tag,
+      .hljs-template-variable {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.keyword};
+      }
+
+      .hljs-string,
+      .hljs-regexp {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.string};
+      }
+
+      .hljs-number {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.number};
+      }
+
+      .hljs-title,
+      .hljs-title.function_,
+      .hljs-title.class_ {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.function};
+      }
+
+      .hljs-variable,
+      .hljs-name,
+      .hljs-section,
+      .hljs-symbol {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.variable};
+      }
+
+      .hljs-tag {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.tag};
+      }
+
+      .hljs-built_in,
+      .hljs-type,
+      .hljs-literal {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.literal};
+      }
+
+      .hljs-meta,
+      .hljs-link {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.attribute};
+      }
+
+      .hljs-deletion {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.deleted};
+      }
+
+      .hljs-addition {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.inserted};
+      }
     }
     ul {
       margin: 0;
@@ -627,6 +761,9 @@ export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = ""
     }), [disabledExtensions, extensionPreset, extensions]);
     const resolvedExtensionSet = useMemo(() => new Set(resolvedExtensions), [resolvedExtensions]);
     const resolvedSlashCommands = useMemo(() => slashCommands.filter((command) => {
+        if (command === SlashCommands.Code) {
+            return resolvedExtensionSet.has(Extensions.Code);
+        }
         if (command === SlashCommands.CodeBlock) {
             return resolvedExtensionSet.has(Extensions.CodeBlock);
         }

package/dist/RichTextEditor/Toolbar/Toolbar.js

@@ -12,7 +12,6 @@ import { Popover } from "../../Popover";
 import TextColors from "../Enums/TextColors";
 import HighlightColors from "../Enums/HighlightColors";
 import LinkEditor from "../Components/LinkEditor";
-import CodeBlockLanguageSelect from "../Components/CodeBlockLanguageSelect";
 import CodeBlockWrapButton from "../Components/CodeBlockWrapButton";
 import CodeBlockFormatButton from "../Components/CodeBlockFormatButton";
 import { hasSyntaxHighlightedCodeBlock } from "../Utils/codeBlockUtils";
@@ -117,7 +116,7 @@ export const Toolbar = styled(({ className, editor, toolbarOptions }) => {
                         height: 210,
                     },
                 }, children: _jsx(HighlighterIcon, { size: 14 }) })), (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.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.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.CODE_BLOCK)) &&
-                        showCodeBlockLanguageSelect && (_jsxs(_Fragment, { children: [_jsx(CodeBlockLanguageSelect, { editor: editor }), _jsx(CodeBlockWrapButton, { editor: editor }), _jsx(CodeBlockFormatButton, { 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 }))] })] }));
+                        showCodeBlockLanguageSelect && (_jsxs(_Fragment, { children: [_jsx(CodeBlockWrapButton, { editor: editor }), _jsx(CodeBlockFormatButton, { 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;

package/dist/theme/variants.js

@@ -122,6 +122,29 @@ const lightVariant = {
         action: {
             hover: "rgba(0, 0, 0, 0.1)",
         },
+        codeBlock: {
+            background: "#f6f8fa",
+            text: "#24292f",
+            border: "#d0d7de",
+            selection: "#0969da2e",
+            syntax: {
+                comment: "#6e7781",
+                punctuation: "#24292f",
+                property: "#0550ae",
+                selector: "#116329",
+                operator: "#cf222e",
+                keyword: "#cf222e",
+                string: "#0a3069",
+                number: "#0550ae",
+                function: "#8250df",
+                variable: "#953800",
+                tag: "#116329",
+                attribute: "#0550ae",
+                literal: "#0550ae",
+                deleted: "#82071e",
+                inserted: "#116329",
+            },
+        },
         divider: "rgba(0, 0, 0, 0.3)",
     },
     header: {
@@ -282,6 +305,29 @@ const darkVariant = merge(lightVariant, {
         dataGrid: {
             hover: "#2f2f2f",
         },
+        codeBlock: {
+            background: "#191919",
+            text: "#c9d1d9",
+            border: "rgba(255, 255, 255, 0.15)",
+            selection: "#1f6feb40",
+            syntax: {
+                comment: "#8b949e",
+                punctuation: "#c9d1d9",
+                property: "#79c0ff",
+                selector: "#7ee787",
+                operator: "#ff7b72",
+                keyword: "#ff7b72",
+                string: "#a5d6ff",
+                number: "#79c0ff",
+                function: "#d2a8ff",
+                variable: "#ffa657",
+                tag: "#7ee787",
+                attribute: "#79c0ff",
+                literal: "#79c0ff",
+                deleted: "#ffa198",
+                inserted: "#aff5b4",
+            },
+        },
     },
     header: {
         color: grey[300],

package/package.json

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