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

package/dist/RichTextEditor/Components/CodeBlockLanguageSelect.js

@@ -0,0 +1,21 @@
+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);
+        }, buttonProps: {
+            title: "Select code language",
+            leftSection: _jsx(CodeXmlIcon, { size: 12 }),
+            style: { padding: "1px 6px" },
+        }, dropDownProps: {
+            style: {
+                width: 150,
+                height: 250,
+            },
+        }, children: selectedLanguage.label }));
+};
+export default CodeBlockLanguageSelect;

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

@@ -0,0 +1,3 @@
+import { ReactNodeViewProps } from "@tiptap/react";
+declare const CodeBlockNodeView: ({ editor, getPos, node, updateAttributes, }: ReactNodeViewProps) => import("react/jsx-runtime").JSX.Element;
+export default CodeBlockNodeView;

package/dist/RichTextEditor/Components/CodeBlockNodeView.js

@@ -0,0 +1,27 @@
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NodeViewContent, NodeViewWrapper, } from "@tiptap/react";
+import CodeBlockCopyButton from "./CodeBlockCopyButton";
+import CodeBlockWrapButton from "./CodeBlockWrapButton";
+import CodeBlockFormatButton from "./CodeBlockFormatButton";
+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* () {
+                            const pos = getPos();
+                            if (typeof pos !== "number")
+                                return;
+                            const formatted = yield formatCodeBlockText(node.textContent, language);
+                            replaceCodeBlockContent(editor, pos + 1, pos + node.nodeSize - 1, formatted);
+                        }) }), _jsx(CodeBlockCopyButton, { className: "editor-code-block-action", text: node.textContent })] }), _jsx(NodeViewContent, { as: "code", className: `hljs language-${language || "plaintext"}`, spellCheck: false })] }));
+};
+export default CodeBlockNodeView;

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

@@ -0,0 +1,10 @@
+import { Editor } from "@tiptap/react";
+type CodeBlockWrapButtonProps = {
+    className?: string;
+    editor?: Editor | null;
+    active?: boolean;
+    onToggle?: () => void;
+    size?: "xs" | "sm";
+};
+declare const CodeBlockWrapButton: ({ className, editor, active, onToggle, size, }: CodeBlockWrapButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default CodeBlockWrapButton;

package/dist/RichTextEditor/Components/CodeBlockWrapButton.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WrapTextIcon } from "lucide-react";
+import { Button } from "../../Button";
+import { getCodeBlockWrap, toggleCodeBlockWrap, } from "../Utils/codeBlockUtils";
+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) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (onToggle) {
+                onToggle();
+                return;
+            }
+            toggleCodeBlockWrap(editor || null);
+        }, children: _jsx(WrapTextIcon, { size: 14 }) }));
+};
+export default CodeBlockWrapButton;

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

@@ -0,0 +1,8 @@
+import { Editor } from "@tiptap/react";
+type LinkEditorProps = {
+    editor: Editor;
+    onClose?: () => void;
+    autoFocus?: boolean;
+};
+export declare const LinkEditor: React.FC<LinkEditorProps>;
+export default LinkEditor;

package/dist/RichTextEditor/Components/LinkEditor.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState, } from "react";
+import styled from "styled-components";
+import { ExternalLinkIcon, SaveIcon, UnlinkIcon } from "lucide-react";
+import Input from "../../Input";
+import { Button } from "../../Button";
+import { getLinkAttributes, normalizeLinkUrl, openLink, } from "../Utils/linkUtils";
+const LinkEditorContent = styled.form `
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 280px;
+`;
+const LinkInput = styled(Input) `
+  min-width: 190px;
+`;
+const LinkActions = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+const LinkEditorButton = styled(Button) `
+  padding: 0 6px;
+`;
+const getInitialHref = (editor) => editor.getAttributes("link").href || "";
+export const LinkEditor = ({ editor, onClose, autoFocus, }) => {
+    const inputRef = useRef(null);
+    const [href, setHref] = useState(() => getInitialHref(editor));
+    const currentHref = getInitialHref(editor);
+    const normalizedLink = useMemo(() => normalizeLinkUrl(href), [href]);
+    const hasLink = Boolean(currentHref);
+    useEffect(() => {
+        setHref(getInitialHref(editor));
+    }, [editor, editor.state.selection.from, editor.state.selection.to]);
+    useEffect(() => {
+        if (!autoFocus)
+            return;
+        window.requestAnimationFrame(() => {
+            var _a, _b;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.select();
+        });
+    }, [autoFocus]);
+    const handleSave = () => {
+        if (!normalizedLink.isValid)
+            return;
+        const { from, to, empty } = editor.state.selection;
+        const attributes = getLinkAttributes(normalizedLink.href);
+        if (empty && hasLink) {
+            editor.chain().focus().extendMarkRange("link").setLink(attributes).run();
+        }
+        else if (empty) {
+            editor
+                .chain()
+                .focus()
+                .insertContent({
+                type: "text",
+                text: normalizedLink.href,
+                marks: [
+                    {
+                        type: "link",
+                        attrs: attributes,
+                    },
+                ],
+            })
+                .run();
+        }
+        else {
+            editor
+                .chain()
+                .focus()
+                .setTextSelection({ from, to })
+                .setLink(attributes)
+                .run();
+        }
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    const handleRemove = () => {
+        editor.chain().focus().extendMarkRange("link").unsetLink().run();
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        handleSave();
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+    };
+    return (_jsxs(LinkEditorContent, { onSubmit: handleSubmit, children: [_jsx(LinkInput, { ref: inputRef, "aria-label": "Enter URL", placeholder: "https://example.com/", size: "xs", variant: "outlined", value: href, onChange: (event) => setHref(event.target.value), onKeyDown: handleKeyDown }), _jsxs(LinkActions, { children: [hasLink && (_jsxs(_Fragment, { children: [_jsx(LinkEditorButton, { "aria-label": "Open link", title: "Open link", size: "xs", variant: "subtle", type: "button", onClick: () => openLink(currentHref), children: _jsx(ExternalLinkIcon, { size: 14 }) }), _jsx(LinkEditorButton, { "aria-label": "Remove link", title: "Remove link", size: "xs", variant: "subtle", type: "button", onClick: handleRemove, children: _jsx(UnlinkIcon, { size: 14 }) })] })), _jsx(LinkEditorButton, { "aria-label": "Save link", title: "Save link", size: "xs", variant: "subtle", type: "submit", disabled: !normalizedLink.isValid, children: _jsx(SaveIcon, { size: 14 }) })] })] }));
+};
+export default LinkEditor;

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

@@ -5,6 +5,8 @@ export declare enum Controls {
     ITALIC = "italic",
     UNDERLINE = "underline",
     STRIKE = "strike",
+    CODE = "code",
+    CODE_BLOCK = "codeBlock",
     HEADING_1 = "heading_1",
     HEADING_2 = "heading_2",
     HEADING_3 = "heading_3",
@@ -16,5 +18,7 @@ export declare enum Controls {
     TEXT_ALIGN_RIGHT = "textAlignRight",
     TEXT_ALIGN_JUSTIFIED = "textAlignJustified",
     FONT = "font",
-    COLOR = "color"
+    COLOR = "color",
+    HIGHLIGHT = "highlight",
+    LINK = "link"
 }

package/dist/RichTextEditor/Enums/Controls.js

@@ -6,6 +6,8 @@ export var Controls;
     Controls["ITALIC"] = "italic";
     Controls["UNDERLINE"] = "underline";
     Controls["STRIKE"] = "strike";
+    Controls["CODE"] = "code";
+    Controls["CODE_BLOCK"] = "codeBlock";
     Controls["HEADING_1"] = "heading_1";
     Controls["HEADING_2"] = "heading_2";
     Controls["HEADING_3"] = "heading_3";
@@ -18,4 +20,6 @@ export var Controls;
     Controls["TEXT_ALIGN_JUSTIFIED"] = "textAlignJustified";
     Controls["FONT"] = "font";
     Controls["COLOR"] = "color";
+    Controls["HIGHLIGHT"] = "highlight";
+    Controls["LINK"] = "link";
 })(Controls || (Controls = {}));

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

@@ -4,7 +4,11 @@ export declare enum Extensions {
     Underline = "underline",
     Bold = "bold",
     Italic = "italic",
+    Code = "code",
+    CodeBlock = "codeBlock",
     Color = "color",
+    Highlight = "highlight",
+    Link = "link",
     TextStyle = "textStyle",
     Strike = "strike",
     BulletList = "bulletList",

package/dist/RichTextEditor/Enums/Extensions.js

@@ -5,7 +5,11 @@ export var Extensions;
     Extensions["Underline"] = "underline";
     Extensions["Bold"] = "bold";
     Extensions["Italic"] = "italic";
+    Extensions["Code"] = "code";
+    Extensions["CodeBlock"] = "codeBlock";
     Extensions["Color"] = "color";
+    Extensions["Highlight"] = "highlight";
+    Extensions["Link"] = "link";
     Extensions["TextStyle"] = "textStyle";
     Extensions["Strike"] = "strike";
     Extensions["BulletList"] = "bulletList";

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

@@ -0,0 +1,9 @@
+declare enum HighlightColors {
+    Yellow = "rgba(250, 204, 21, 0.38)",
+    Green = "rgba(34, 197, 94, 0.34)",
+    Blue = "rgba(59, 130, 246, 0.34)",
+    Pink = "rgba(236, 72, 153, 0.32)",
+    Purple = "rgba(168, 85, 247, 0.34)",
+    Orange = "rgba(249, 115, 22, 0.34)"
+}
+export default HighlightColors;

package/dist/RichTextEditor/Enums/HighlightColors.js

@@ -0,0 +1,10 @@
+var HighlightColors;
+(function (HighlightColors) {
+    HighlightColors["Yellow"] = "rgba(250, 204, 21, 0.38)";
+    HighlightColors["Green"] = "rgba(34, 197, 94, 0.34)";
+    HighlightColors["Blue"] = "rgba(59, 130, 246, 0.34)";
+    HighlightColors["Pink"] = "rgba(236, 72, 153, 0.32)";
+    HighlightColors["Purple"] = "rgba(168, 85, 247, 0.34)";
+    HighlightColors["Orange"] = "rgba(249, 115, 22, 0.34)";
+})(HighlightColors || (HighlightColors = {}));
+export default HighlightColors;

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

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

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["CodeBlock"] = "Code Block";
     SlashCommands["CurrentDate"] = "Current Date";
     SlashCommands["CurrentTimestamp"] = "Current Timestamp";
     SlashCommands["Image"] = "Image";

package/dist/RichTextEditor/Extensions/getSlashCommand.js

@@ -11,12 +11,13 @@ 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, } from "lucide-react";
+import { Heading1, Heading2, Heading3, Heading4, List, ListOrdered, Text, Image as ImageIcon, Calendar, ClockIcon, SquareCodeIcon, } from "lucide-react";
 import { startImageUpload, } from "../Plugins/UploadImagesPlugin.js";
 import { PluginKey } from "@tiptap/pm/state";
 import SlashCommandList from "./SlashCommandList";
 import { SlashCommands } from "../Enums";
 import moment from "moment/moment.js";
+import { DEFAULT_CODE_BLOCK_LANGUAGE } from "../Utils/codeBlockUtils";
 const SlashCommandPluginKey = new PluginKey("slash-command");
 const getCommandItems = (values, options) => {
     var _a;
@@ -115,6 +116,20 @@ const getCommandItems = (values, options) => {
                 editor.chain().focus().deleteRange(range).toggleOrderedList().run();
             },
         },
+        {
+            title: SlashCommands.CodeBlock,
+            description: "Create a syntax-highlighted code block.",
+            searchTerms: ["code", "pre", "snippet"],
+            icon: SquareCodeIcon,
+            command: ({ editor, range }) => {
+                editor
+                    .chain()
+                    .focus()
+                    .deleteRange(range)
+                    .setCodeBlock({ language: DEFAULT_CODE_BLOCK_LANGUAGE })
+                    .run();
+            },
+        },
         {
             title: SlashCommands.CurrentDate,
             description: "Insert the current date.",

package/dist/RichTextEditor/Extensions/getTiptapExtensions.d.ts

@@ -1,12 +1,20 @@
 import { Extension } from "@tiptap/core";
 import { HandleImageUpload } from "../Plugins";
 import { Extensions } from "../Enums";
-import { BubbleMenuOptions } from "./BubbleMenuExtension";
+export type ExtensionPreset = "minimal" | "basic" | "full";
 export type ExtensionType = (typeof Extensions)[keyof typeof Extensions];
+export declare const BASIC_EXTENSIONS: ExtensionType[];
+export declare const MINIMAL_EXTENSIONS: ExtensionType[];
+export declare const FULL_EXTENSIONS: ExtensionType[];
+export declare const resolveExtensions: ({ disabledExtensions, extensionPreset, extensions, }: {
+    disabledExtensions?: ExtensionType[];
+    extensionPreset?: ExtensionPreset;
+    extensions?: ExtensionType[];
+}) => ExtensionType[];
 interface GetTipTapExtensionsProps {
+    disabledExtensions?: ExtensionType[];
     extensions?: ExtensionType[];
     slashCommands?: any[];
-    bubbleMenuOptions?: BubbleMenuOptions;
     handleImageUpload?: HandleImageUpload;
 }
 declare const getTipTapExtensions: (props: GetTipTapExtensionsProps) => Extension[];

package/dist/RichTextEditor/Extensions/getTiptapExtensions.js

@@ -1,22 +1,45 @@
 import TiptapImage from "@tiptap/extension-image";
 import StarterKit from "@tiptap/starter-kit";
+import { CodeBlockLowlight } from "@tiptap/extension-code-block-lowlight";
 import HorizontalRule from "@tiptap/extension-horizontal-rule";
 import TextAlign from "@tiptap/extension-text-align";
-import { Table, TableCell, TableHeader, TableRow } from "@tiptap/extension-table";
+import { Table, TableCell, TableHeader, TableRow, } from "@tiptap/extension-table";
 import { Focus, Placeholder } from "@tiptap/extensions";
 import { Color } from "@tiptap/extension-color";
+import { Highlight } from "@tiptap/extension-highlight";
+import { Link } from "@tiptap/extension-link";
 import { TextStyle } from "@tiptap/extension-text-style";
 import { InputRule, Extension } from "@tiptap/core";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import { common, createLowlight } from "lowlight";
 import { ImageActionsPlugin, UploadImagesPlugin, } from "../Plugins";
 import getSlashCommand from "./getSlashCommand";
 import { Extensions } from "../Enums";
-import BubbleMenu from "./BubbleMenuExtension";
+import { LINK_REL, LINK_TARGET, normalizeLinkUrl } from "../Utils/linkUtils";
+import CodeBlockNodeView from "../Components/CodeBlockNodeView";
+import { DEFAULT_CODE_BLOCK_LANGUAGE } from "../Utils/codeBlockUtils";
+const lowlight = createLowlight(common);
+const CustomCodeBlockLowlight = CodeBlockLowlight.extend({
+    addAttributes() {
+        var _a;
+        return Object.assign(Object.assign({}, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)), { wrap: {
+                default: false,
+                parseHTML: (element) => element.getAttribute("data-wrap") === "true",
+                renderHTML: (attributes) => attributes.wrap ? { "data-wrap": "true" } : {},
+            } });
+    },
+    addNodeView() {
+        return ReactNodeViewRenderer(CodeBlockNodeView);
+    },
+});
 const CustomImage = TiptapImage.extend({
     // Add data-uuid attribute to image
     addAttributes() {
         var _a;
         return Object.assign(Object.assign({}, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)), { "data-uuid": {
                 default: null,
+            }, crossorigin: {
+                default: "anonymous",
             } });
     },
     addProseMirrorPlugins() {
@@ -40,27 +63,107 @@ const CustomStorage = Extension.create({
         };
     },
 });
-const getTipTapExtensions = ({ extensions = [], slashCommands = [], bubbleMenuOptions, handleImageUpload, }) => {
+export const BASIC_EXTENSIONS = [
+    Extensions.Bold,
+    Extensions.Italic,
+    Extensions.Underline,
+    Extensions.Strike,
+    Extensions.Code,
+    Extensions.BulletList,
+    Extensions.OrderedList,
+    Extensions.TextStyle,
+    Extensions.Color,
+    Extensions.Highlight,
+    Extensions.Link,
+    Extensions.TextAlign,
+    Extensions.Focus,
+    Extensions.CustomStorage,
+];
+export const MINIMAL_EXTENSIONS = [
+    Extensions.Focus,
+    Extensions.CustomStorage,
+];
+export const FULL_EXTENSIONS = [
+    ...BASIC_EXTENSIONS,
+    Extensions.CodeBlock,
+    Extensions.HorizontalRule,
+    Extensions.Table,
+    Extensions.TableCell,
+    Extensions.TableHeader,
+    Extensions.TableRow,
+    Extensions.Placeholder,
+    Extensions.SlashCommand,
+    Extensions.BubbleMenu,
+];
+const EXTENSION_PRESETS = {
+    minimal: MINIMAL_EXTENSIONS,
+    basic: BASIC_EXTENSIONS,
+    full: FULL_EXTENSIONS,
+};
+export const resolveExtensions = ({ disabledExtensions = [], extensionPreset = "basic", extensions = [], }) => {
+    const disabled = new Set(disabledExtensions);
+    const resolved = new Set([
+        ...(EXTENSION_PRESETS[extensionPreset] || BASIC_EXTENSIONS),
+        ...extensions,
+    ]);
+    if (resolved.has(Extensions.Color)) {
+        resolved.add(Extensions.TextStyle);
+    }
+    if (resolved.has(Extensions.Table)) {
+        resolved.add(Extensions.TableRow);
+        resolved.add(Extensions.TableCell);
+        resolved.add(Extensions.TableHeader);
+    }
+    disabled.forEach((extension) => resolved.delete(extension));
+    return Array.from(resolved);
+};
+const getTipTapExtensions = ({ disabledExtensions = [], extensions = [], slashCommands = [], handleImageUpload, }) => {
+    const disabled = new Set(disabledExtensions);
+    const enabled = new Set(extensions);
+    const isEnabled = (extension) => enabled.has(extension) && !disabled.has(extension);
     return [
         {
             name: "starterKit",
-            category: "default",
             extension: StarterKit.configure({
-                bulletList: {
-                    HTMLAttributes: {
-                        class: "",
-                    },
-                },
-                orderedList: {
-                    HTMLAttributes: {
-                        class: "",
-                    },
-                },
-                listItem: {
-                    HTMLAttributes: {
-                        class: "",
-                    },
-                },
+                bold: isEnabled(Extensions.Bold) ? {} : false,
+                italic: isEnabled(Extensions.Italic) ? {} : false,
+                underline: isEnabled(Extensions.Underline) ? {} : false,
+                strike: isEnabled(Extensions.Strike) ? {} : false,
+                bulletList: isEnabled(Extensions.BulletList)
+                    ? {
+                        HTMLAttributes: {
+                            class: "",
+                        },
+                    }
+                    : false,
+                orderedList: isEnabled(Extensions.OrderedList)
+                    ? {
+                        HTMLAttributes: {
+                            class: "",
+                        },
+                    }
+                    : false,
+                listItem: isEnabled(Extensions.BulletList) ||
+                    isEnabled(Extensions.OrderedList)
+                    ? {
+                        HTMLAttributes: {
+                            class: "",
+                        },
+                    }
+                    : false,
+                listKeymap: isEnabled(Extensions.BulletList) ||
+                    isEnabled(Extensions.OrderedList)
+                    ? {}
+                    : false,
+                link: false,
+                code: isEnabled(Extensions.Code)
+                    ? {
+                        HTMLAttributes: {
+                            class: "editor-inline-code",
+                        },
+                    }
+                    : false,
+                codeBlock: false,
                 horizontalRule: false,
                 dropcursor: {
                     color: "#DBEAFE",
@@ -69,24 +172,53 @@ const getTipTapExtensions = ({ extensions = [], slashCommands = [], bubbleMenuOp
                 gapcursor: false,
             }),
         },
+        {
+            name: Extensions.CodeBlock,
+            extension: CustomCodeBlockLowlight.configure({
+                lowlight,
+                defaultLanguage: DEFAULT_CODE_BLOCK_LANGUAGE,
+                enableTabIndentation: true,
+                HTMLAttributes: {
+                    class: "editor-code-block",
+                },
+            }),
+        },
         {
             name: Extensions.TextStyle,
-            category: "default",
             extension: TextStyle,
         },
         {
             name: Extensions.Color,
-            category: "default",
             extension: Color,
         },
+        {
+            name: Extensions.Highlight,
+            extension: Highlight.configure({ multicolor: true }),
+        },
+        {
+            name: Extensions.Link,
+            extension: Link.configure({
+                autolink: true,
+                linkOnPaste: true,
+                openOnClick: false,
+                enableClickSelection: false,
+                defaultProtocol: "https",
+                protocols: ["http", "https"],
+                isAllowedUri: (url) => normalizeLinkUrl(url).isValid,
+                shouldAutoLink: (url) => normalizeLinkUrl(url).isValid,
+                HTMLAttributes: {
+                    class: "editor-link",
+                    target: LINK_TARGET,
+                    rel: LINK_REL,
+                },
+            }),
+        },
         {
             name: Extensions.TextAlign,
-            category: "default",
             extension: TextAlign.configure({ types: ["heading", "paragraph"] }),
         },
         {
             name: Extensions.Focus,
-            category: "default",
             extension: Focus.configure({ className: "has-focus", mode: "all" }),
         },
         // patch to fix horizontal rule bug: https://github.com/ueberdosis/tiptap/pull/3859#issuecomment-1536799740
@@ -157,14 +289,8 @@ const getTipTapExtensions = ({ extensions = [], slashCommands = [], bubbleMenuOp
         },
         {
             name: Extensions.CustomStorage,
-            category: "default",
             extension: CustomStorage,
         },
-        {
-            name: Extensions.BubbleMenu,
-            category: "default",
-            extension: BubbleMenu.configure(bubbleMenuOptions),
-        },
         {
             name: Extensions.SlashCommand,
             extension: getSlashCommand({
@@ -174,8 +300,9 @@ const getTipTapExtensions = ({ extensions = [], slashCommands = [], bubbleMenuOp
         },
     ]
         .filter((ext) => {
-        return (extensions.includes(ext.name) ||
-            ext.category === "default");
+        if (ext.name === "starterKit")
+            return true;
+        return isEnabled(ext.name);
     })
         .map((ext) => ext.extension);
 };