sea-react-components 1.0.2

package/dist/components/text-editor/components/toolbar/index.js

@@ -0,0 +1,280 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+import Button from "../../../button";
+import Select from "../../../select";
+import Icon from "../../../icon";
+import Menu from "../../../menu";
+import MenuItem from "../../../menu/menu-item";
+import Tooltip from "../../../tooltip";
+import clsx from "clsx";
+import { SupportedFontFamilies } from "../../utils";
+import { convertToBase64 } from "../../../../utils/file";
+export default function Toolbar({ editor, headingLevels = [1, 2, 3] }) {
+    const imageFileInputRef = useRef(null);
+    const [currentHeadingLevel, setCurrentHeadingLevel] = useState(undefined);
+    const [fontFamily, setFontFamily] = useState("default");
+    const handleSelectHeadingLevel = (level) => {
+        setCurrentHeadingLevel(level);
+        editor.chain().focus().toggleHeading({ level }).run();
+    };
+    const handleSelectFamilyFont = (fontStyle) => {
+        setFontFamily(fontStyle);
+        if (fontStyle === "default") {
+            editor.chain().focus().unsetFontFamily().run();
+        }
+        else {
+            editor.chain().focus().setFontFamily(fontStyle).run();
+        }
+    };
+    const handleClickLink = useCallback(() => {
+        const isLink = editor.isActive("link");
+        if (isLink) {
+            editor.chain().focus().unsetLink().run();
+        }
+        else {
+            const url = window.prompt("URL");
+            editor
+                .chain()
+                .focus()
+                .extendMarkRange("link")
+                .setLink({ href: url })
+                .run();
+        }
+    }, [editor]);
+    const MARKER_SECTIONS = [
+        {
+            name: "section-1",
+            items: [
+                {
+                    name: "paragraph",
+                    icon: "mdi:format-paragraph",
+                    type: "button",
+                    onClick: () => {
+                        editor.chain().focus().setParagraph().run();
+                    },
+                },
+            ],
+        },
+        {
+            name: "section-2",
+            items: [
+                {
+                    name: "bold",
+                    icon: "ooui:bold-b",
+                    type: "button",
+                    onClick: () => {
+                        editor.chain().focus().toggleBold().run();
+                    },
+                },
+                {
+                    name: "italic",
+                    icon: "tabler:italic",
+                    type: "button",
+                    onClick: () => {
+                        editor.chain().focus().toggleItalic().run();
+                    },
+                },
+                {
+                    name: "strike",
+                    icon: "dashicons:editor-strikethrough",
+                    type: "button",
+                    onClick: () => {
+                        editor.chain().focus().toggleStrike().run();
+                    },
+                },
+                {
+                    name: "underline",
+                    icon: "fluent:text-underline-20-filled",
+                    type: "button",
+                    onClick: () => {
+                        editor.commands.toggleUnderline();
+                    },
+                },
+                {
+                    name: "blockquote",
+                    icon: "mingcute:blockquote-line",
+                    type: "button",
+                    onClick: () => editor.chain().focus().toggleBlockquote().run(),
+                },
+            ],
+        },
+        {
+            name: "section-3",
+            items: [
+                {
+                    name: "code",
+                    icon: "solar:code-outline",
+                    type: "button",
+                    onClick: () => {
+                        editor.chain().focus().toggleCode().run();
+                    },
+                },
+                {
+                    name: "codeBlock",
+                    icon: "ph:code-block",
+                    type: "button",
+                    onClick: () => {
+                        editor.chain().focus().toggleCodeBlock().run();
+                    },
+                },
+            ],
+        },
+        {
+            name: "section-4",
+            items: [
+                {
+                    name: "bulletList",
+                    icon: "clarity:bullet-list-line",
+                    type: "button",
+                    onClick: () => {
+                        editor.chain().focus().toggleBulletList().run();
+                    },
+                },
+                {
+                    name: "orderedList",
+                    icon: "grommet-icons:ordered-list",
+                    type: "button",
+                    onClick: () => {
+                        editor.chain().focus().toggleOrderedList().run();
+                    },
+                },
+            ],
+        },
+        {
+            name: "section-5",
+            items: [
+                {
+                    name: "textLeftAlign",
+                    icon: "mingcute:align-left-line",
+                    type: "button",
+                    onClick: () => editor.chain().focus().setTextAlign("left").run(),
+                },
+                {
+                    name: "textCenterAlign",
+                    icon: "mingcute:align-center-line",
+                    type: "button",
+                    onClick: () => editor.chain().focus().setTextAlign("center").run(),
+                },
+                {
+                    name: "textRightAlign",
+                    icon: "mingcute:align-right-line",
+                    type: "button",
+                    onClick: () => editor.chain().focus().setTextAlign("right").run(),
+                },
+            ],
+        },
+        {
+            name: "section-6",
+            items: [
+                {
+                    name: "horizontalRule",
+                    icon: "octicon:horizontal-rule-16",
+                    type: "button",
+                    onClick: () => {
+                        editor.chain().focus().setHorizontalRule().run();
+                    },
+                },
+            ],
+        },
+        {
+            name: "section-7",
+            items: [
+                {
+                    name: "link",
+                    icon: "line-md:link",
+                    type: "button",
+                    onClick: () => handleClickLink(),
+                },
+            ],
+        },
+        {
+            name: "section-8",
+            items: [
+                {
+                    name: "image",
+                    icon: "material-symbols:image-outline",
+                    type: "image-input",
+                    onClick: () => imageFileInputRef.current && imageFileInputRef.current.click(),
+                    handleFileChange: (file) => {
+                        convertToBase64(file).then((base64) => {
+                            editor.commands.setImage({
+                                src: base64,
+                            });
+                        });
+                    },
+                },
+            ],
+        },
+        {
+            name: "section-9",
+            items: [
+                {
+                    name: "table",
+                    icon: "majesticons:table-line",
+                    type: "menu",
+                    menuContent: (_jsxs("div", { className: "p-1 grid grid-cols-2 gap-1", children: [_jsx("div", { className: "col-span-2 flex items-center gap-1", children: _jsx(MenuItem, { className: "p-1 ", onClick: () => editor
+                                        .chain()
+                                        .focus()
+                                        .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+                                        .run(), children: _jsx(Tooltip, { text: "Insert Table", placement: "top", containerClassName: "bg-gray-100 w-32", textClassName: "text-black text-center text-sm", children: _jsx(Icon, { icon: "majesticons:table-line", className: "w-5 h-5" }) }) }, "insert-table") }), _jsxs("div", { className: "col-span-2 flex items-center gap-1", children: [_jsx(MenuItem, { className: "p-1 ", onClick: () => editor.chain().focus().addColumnBefore().run(), children: _jsx(Tooltip, { text: "Add Column Before", placement: "top", containerClassName: "bg-gray-100 w-32", textClassName: "text-black text-center text-sm", children: _jsx(Icon, { icon: "mdi:table-column-plus-before", className: "w-5 h-5" }) }) }, "add-column-before"), _jsx(MenuItem, { className: "p-1 ", onClick: () => editor.chain().focus().addColumnAfter().run(), children: _jsx(Tooltip, { text: "Add Column After", placement: "top", containerClassName: "bg-gray-100 w-32", textClassName: "text-black text-center text-sm", children: _jsx(Icon, { icon: "mdi:table-column-plus-after", className: "w-5 h-5" }) }) }, "add-column-after"), _jsx(MenuItem, { className: "p-1 ", onClick: () => editor.chain().focus().deleteColumn().run(), children: _jsx(Tooltip, { text: "Remove Column", placement: "top", containerClassName: "bg-gray-100 w-32", textClassName: "text-black text-center text-sm", children: _jsx(Icon, { icon: "mdi:table-column-remove", className: "w-5 h-5" }) }) }, "remove-column")] }), _jsxs("div", { className: "col-span-2 flex items-center gap-1", children: [_jsx(MenuItem, { className: "p-1", onClick: () => editor.chain().focus().addRowBefore().run(), children: _jsx(Tooltip, { text: "Add Row Before", placement: "top", containerClassName: "bg-gray-100 w-32", textClassName: "text-black text-center text-sm", children: _jsx(Icon, { icon: "mdi:table-row-plus-before", className: "w-5 h-5" }) }) }, "add-row-before"), _jsx(MenuItem, { className: "p-1", onClick: () => editor.chain().focus().addRowAfter().run(), children: _jsx(Tooltip, { text: "Add Row After", placement: "top", containerClassName: "bg-gray-100 w-32", textClassName: "text-black text-center text-sm", children: _jsx(Icon, { icon: "mdi:table-row-plus-after", className: "w-5 h-5" }) }) }, "add-row-after"), _jsx(MenuItem, { className: "p-1", onClick: () => editor.chain().focus().deleteRow().run(), children: _jsx(Tooltip, { text: "Remove Row", placement: "top", containerClassName: "bg-gray-100 w-32", textClassName: "text-black text-center text-sm", children: _jsx(Icon, { icon: "mdi:table-row-remove", className: "w-5 h-5" }) }) }, "remove-row")] }), _jsxs("div", { className: "col-span-2 flex items-center gap-1", children: [_jsx(MenuItem, { className: "p-1", onClick: () => editor.chain().focus().mergeCells().run(), children: _jsx(Tooltip, { text: "Merge Cells", placement: "top", containerClassName: "bg-gray-100 w-32", textClassName: "text-black text-center text-sm", children: _jsx(Icon, { icon: "flowbite:merge-cells-outline", className: "w-5 h-5" }) }) }, "merge-cells"), _jsx(MenuItem, { className: "p-1", onClick: () => editor.chain().focus().splitCell().run(), children: _jsx(Tooltip, { text: "Split Cells", placement: "top", containerClassName: "bg-gray-100 w-32", textClassName: "text-black text-center text-sm", children: _jsx(Icon, { icon: "flowbite:split-cells-outline", className: "w-5 h-5" }) }) }, "split-cells")] })] })),
+                },
+            ],
+        },
+        {
+            name: "section-10",
+            items: [
+                {
+                    name: "undo",
+                    icon: "material-symbols:undo",
+                    type: "button",
+                    disabled: !editor.can().undo(),
+                    onClick: () => {
+                        editor.chain().focus().undo().run();
+                    },
+                },
+                {
+                    name: "redo",
+                    icon: "material-symbols:redo",
+                    type: "button",
+                    disabled: !editor.can().redo(),
+                    onClick: () => {
+                        editor.chain().focus().redo().run();
+                    },
+                },
+            ],
+        },
+    ];
+    return (_jsxs("div", { className: "flex items-center gap-1 flex-wrap", children: [_jsx(Select, { name: "heading", multiselect: false, values: currentHeadingLevel ? [currentHeadingLevel] : [], setValues: (newValues) => {
+                    handleSelectHeadingLevel(newValues[0]);
+                }, options: headingLevels.map((o) => ({
+                    label: `H${o}`,
+                    value: o,
+                })), placeholder: "Heading" }), _jsx(Select, { name: "font", multiselect: false, values: [fontFamily], setValues: (newValues) => {
+                    handleSelectFamilyFont(newValues[0]);
+                }, options: SupportedFontFamilies.map((o) => ({
+                    label: o.label,
+                    value: o.style,
+                })), placeholder: "Heading" }), MARKER_SECTIONS.map((s, si) => (_jsxs("div", { className: "flex items-center gap-1", children: [s.items.map((item, ii) => {
+                        if (item.type === "button")
+                            return (_jsx(Button, { onClick: () => item.onClick(), disabled: item.disabled, className: clsx(editor.isActive(item.name)
+                                    ? "bg-primary bg-opacity-30"
+                                    : "bg-transparent hover:bg-primary hover:bg-opacity-30"), children: _jsx(Icon, { icon: item.icon, className: "\r\n                text-black h-5 w-5" }) }, `${item.name}-${ii}`));
+                        else if (item.type === "menu") {
+                            return (_jsx(Menu, { menuButton: _jsx(Icon, { icon: item.icon, className: "\r\n            text-black h-5 w-5" }), className: "w-28", children: item.menuContent }, `${item.name}-${ii}`));
+                        }
+                        else if (item.type === "image-input") {
+                            return (_jsxs("div", { children: [_jsx(Button, { onClick: () => item.onClick(), disabled: item.disabled, className: clsx(editor.isActive(item.name)
+                                            ? "bg-primary bg-opacity-30"
+                                            : "bg-transparent hover:bg-primary hover:bg-opacity-30"), children: _jsx(Icon, { icon: item.icon, className: "\r\n                text-black h-5 w-5" }) }), _jsx("input", { ref: imageFileInputRef, type: "file", accept: "image/*", className: "hidden", onChange: (event) => {
+                                            const files = event.target.files;
+                                            const file = files[0];
+                                            if (file && item.handleFileChange)
+                                                item.handleFileChange(file);
+                                        } })] }, `${item.name}-${ii}`));
+                        }
+                        else {
+                            return _jsx("div", {}, `${item.name}-${ii}`);
+                        }
+                    }), si < MARKER_SECTIONS.length - 1 && (_jsx("div", { className: "h-8 w-[2px] bg-gray-300 rounded-full" }))] }, `${s.name}-${si}`)))] }));
+}

package/dist/components/text-editor/index.d.ts

@@ -0,0 +1,12 @@
+import { Level } from "@tiptap/extension-heading";
+import "./style.css";
+export type Props = {
+    content: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    readOnly: boolean;
+    headingLevels?: Level[];
+    immediatelyRender?: boolean;
+};
+export default function TextEditor({ content, onChange, readOnly, placeholder, headingLevels, immediatelyRender, }: Props): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/text-editor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/text-editor/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AA0BlD,OAAO,aAAa,CAAC;AAQrB,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,KAAK,EAAE,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AACF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,WAA6B,EAC7B,aAAyB,EACzB,iBAAyB,GAC1B,EAAE,KAAK,2CA4IP"}

package/dist/components/text-editor/index.js

@@ -0,0 +1,152 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Document from "@tiptap/extension-document";
+import Highlight from "@tiptap/extension-highlight";
+import Image from "@tiptap/extension-image";
+import Underline from "@tiptap/extension-underline";
+import Link from "@tiptap/extension-link";
+import Dropcursor from "@tiptap/extension-dropcursor";
+import FontFamily from "@tiptap/extension-font-family";
+import Text from "@tiptap/extension-text";
+import TextStyle from "@tiptap/extension-text-style";
+import Placeholder from "@tiptap/extension-placeholder";
+import TextAlign from "@tiptap/extension-text-align";
+import Typography from "@tiptap/extension-typography";
+import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+import Gapcursor from "@tiptap/extension-gapcursor";
+import Table from "@tiptap/extension-table";
+import TableCell from "@tiptap/extension-table-cell";
+import TableHeader from "@tiptap/extension-table-header";
+import TableRow from "@tiptap/extension-table-row";
+import { all, createLowlight } from "lowlight";
+import css from "highlight.js/lib/languages/css";
+import js from "highlight.js/lib/languages/javascript";
+import ts from "highlight.js/lib/languages/typescript";
+import html from "highlight.js/lib/languages/xml";
+import { isAllowedUri, shouldAutoLink } from "./utils";
+import Toolbar from "./components/toolbar";
+import "./style.css";
+const lowlight = createLowlight(all);
+lowlight.register("html", html);
+lowlight.register("css", css);
+lowlight.register("js", js);
+lowlight.register("ts", ts);
+export default function TextEditor({ content, onChange, readOnly, placeholder = "Write Here...", headingLevels = [1, 2, 3], immediatelyRender = false, }) {
+    const editor = useEditor({
+        // element: document.querySelector(".element"),
+        extensions: [
+            Document,
+            Underline,
+            Dropcursor,
+            Image,
+            Text,
+            TextStyle,
+            FontFamily,
+            Typography,
+            Placeholder.configure({
+                placeholder,
+                showOnlyWhenEditable: false,
+            }),
+            StarterKit.configure({
+                heading: {
+                    levels: headingLevels,
+                    HTMLAttributes: {
+                    // class: "text-6xl text-4xl text-2xl",
+                    },
+                },
+                code: {
+                    HTMLAttributes: {
+                        class: "bg-orange-200 text-black font-light p-1 rounded-md",
+                    },
+                },
+                // codeBlock: {
+                //   HTMLAttributes: {
+                //     class:
+                //       "bg-orange-200 text-black font-light p-1 rounded-md",
+                //   },
+                // },
+                bold: {
+                    HTMLAttributes: {
+                        class: "font-bold",
+                    },
+                },
+                blockquote: {
+                    HTMLAttributes: {
+                        class: "p-4 my-4 border-s-4 border-gray-300 bg-gray-50 dark:border-gray-500 dark:bg-gray-300",
+                    },
+                },
+                horizontalRule: {},
+                // bulletList: {
+                //   keepMarks: true,
+                //   keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
+                // },
+                // orderedList: {
+                //   keepMarks: true,
+                //   keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
+                // },
+            }),
+            Highlight.configure({ multicolor: true }),
+            Link.configure({
+                openOnClick: false,
+                autolink: true,
+                defaultProtocol: "https",
+                protocols: ["http", "https"],
+                isAllowedUri: isAllowedUri,
+                shouldAutoLink: shouldAutoLink,
+                HTMLAttributes: {
+                    class: "text-primary underline",
+                },
+            }),
+            TextAlign.configure({
+                types: ["heading", "paragraph"],
+            }),
+            CodeBlockLowlight.configure({
+                lowlight,
+                // HTMLAttributes: {
+                //   class:
+                //     "bg-orange-200 text-black font-light p-1 rounded-md",
+                // },
+            }),
+            Image.configure({
+                allowBase64: true,
+                // HTMLAttributes: {
+                //   class: "border-2 border-black",
+                // },
+            }),
+            Gapcursor,
+            Table.configure({
+                resizable: true,
+                allowTableNodeSelection: true,
+            }),
+            TableCell.configure({
+                HTMLAttributes: {
+                    class: "border border-gray-300 box-border min-w-[1em] px-2 py-1 relative align-top",
+                },
+            }),
+            TableHeader.configure({
+                HTMLAttributes: {
+                    class: "bg-gray-100 border border-gray-300",
+                },
+            }),
+            TableRow.configure({}),
+        ],
+        content,
+        editorProps: {
+            attributes: {
+                class: "prose prose-sm sm:prose-base lg:prose-lg xl:prose-2xl m-5 focus:outline-none",
+            },
+        },
+        autofocus: false,
+        // make the text editable (default is true)
+        editable: true,
+        // prevent loading the default CSS (which isn't much anyway)
+        injectCSS: false,
+        immediatelyRender,
+    });
+    if (!editor)
+        return null;
+    // console.log(editor);
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("link", { href: "https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap", rel: "stylesheet" }), _jsx(Toolbar, { editor: editor, headingLevels: headingLevels }), _jsx(EditorContent, { className: "element", editor: editor, placeholder: placeholder })] }));
+}

package/dist/components/text-editor/style.css

@@ -0,0 +1,132 @@
+.tiptap p.is-editor-empty:first-child::before {
+  color: #adb5bd;
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: "JetBrainsMono", monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+
+    .hljs-comment,
+    .hljs-quote {
+      color: #616161;
+    }
+
+    .hljs-variable,
+    .hljs-template-variable,
+    .hljs-attribute,
+    .hljs-tag,
+    .hljs-regexp,
+    .hljs-link,
+    .hljs-name,
+    .hljs-selector-id,
+    .hljs-selector-class {
+      color: #f98181;
+    }
+
+    .hljs-number,
+    .hljs-meta,
+    .hljs-built_in,
+    .hljs-builtin-name,
+    .hljs-literal,
+    .hljs-type,
+    .hljs-params {
+      color: #fbbc88;
+    }
+
+    .hljs-string,
+    .hljs-symbol,
+    .hljs-bullet {
+      color: #b9f18d;
+    }
+
+    .hljs-title,
+    .hljs-section {
+      color: #faf594;
+    }
+
+    .hljs-keyword,
+    .hljs-selector-tag {
+      color: #70cff8;
+    }
+
+    .hljs-emphasis {
+      font-style: italic;
+    }
+
+    .hljs-strong {
+      font-weight: 700;
+    }
+  }
+
+  table {
+    border-collapse: collapse;
+    margin: 0;
+    overflow: hidden;
+    table-layout: fixed;
+    width: 100%;
+
+    .column-resize-handle {
+      bottom: -2px;
+      pointer-events: none;
+      position: absolute;
+      right: -2px;
+      top: 0;
+      width: 4px;
+    }
+
+    .selectedCell:after {
+      background: #61616140;
+      content: "";
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      pointer-events: none;
+      position: absolute;
+      z-index: 2;
+      color: #ffffff;
+    }
+  }
+
+  .tableWrapper {
+    margin: 1.5rem 0;
+    overflow-x: auto;
+  }
+
+  &.resize-cursor {
+    cursor: ew-resize;
+    cursor: col-resize;
+  }
+}

package/dist/components/text-editor/utils/index.d.ts

@@ -0,0 +1,14 @@
+import { LinkProtocolOptions } from "@tiptap/extension-link/dist";
+export declare const isAllowedUri: (url: string, ctx: {
+    defaultValidate: (url: string) => boolean;
+    protocols: Array<LinkProtocolOptions | string>;
+    defaultProtocol: string;
+}) => boolean;
+export declare const shouldAutoLink: (url: string) => boolean;
+export type FontFamilyStyles = "default" | "Inter" | '"Comic Sans MS", "Comic Sans"' | "serif" | "monospace" | "cursive" | "Exo 2";
+export type FontType = {
+    label: string;
+    style: FontFamilyStyles;
+};
+export declare const SupportedFontFamilies: FontType[];
+//# sourceMappingURL=index.d.ts.map

package/dist/components/text-editor/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/text-editor/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAElE,eAAO,MAAM,YAAY,QAClB,MAAM,OACN;IACH,eAAe,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IAC1C,SAAS,EAAE,KAAK,CAAC,mBAAmB,GAAG,MAAM,CAAC,CAAC;IAC/C,eAAe,EAAE,MAAM,CAAC;CACzB,KACA,OA0CF,CAAC;AAEF,eAAO,MAAM,cAAc,QAAS,MAAM,KAAG,OAkB5C,CAAC;AAEF,MAAM,MAAM,gBAAgB,GACxB,SAAS,GACT,OAAO,GACP,+BAA+B,GAC/B,OAAO,GACP,WAAW,GACX,SAAS,GACT,OAAO,CAAC;AAEZ,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,gBAAgB,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,QAAQ,EA6B3C,CAAC"}

package/dist/components/text-editor/utils/index.js

@@ -0,0 +1,82 @@
+export const isAllowedUri = (url, ctx) => {
+    try {
+        // construct URL
+        const parsedUrl = url.includes(":")
+            ? new URL(url)
+            : new URL(`${ctx.defaultProtocol}://${url}`);
+        // use default validation
+        if (!ctx.defaultValidate(parsedUrl.href)) {
+            return false;
+        }
+        // disallowed protocols
+        const disallowedProtocols = ["ftp", "file", "mailto"];
+        const protocol = parsedUrl.protocol.replace(":", "");
+        if (disallowedProtocols.includes(protocol)) {
+            return false;
+        }
+        // only allow protocols specified in ctx.protocols
+        const allowedProtocols = ctx.protocols.map((p) => typeof p === "string" ? p : p.scheme);
+        if (!allowedProtocols.includes(protocol)) {
+            return false;
+        }
+        // disallowed domains
+        const disallowedDomains = ["example-phishing.com", "malicious-site.net"];
+        const domain = parsedUrl.hostname;
+        if (disallowedDomains.includes(domain)) {
+            return false;
+        }
+        // all checks have passed
+        return true;
+    }
+    catch (_a) {
+        return false;
+    }
+};
+export const shouldAutoLink = (url) => {
+    try {
+        // construct URL
+        const parsedUrl = url.includes(":")
+            ? new URL(url)
+            : new URL(`https://${url}`);
+        // only auto-link if the domain is not in the disallowed list
+        const disallowedDomains = [
+            "example-no-autolink.com",
+            "another-no-autolink.com",
+        ];
+        const domain = parsedUrl.hostname;
+        return !disallowedDomains.includes(domain);
+    }
+    catch (_a) {
+        return false;
+    }
+};
+export const SupportedFontFamilies = [
+    {
+        label: "Default",
+        style: "default",
+    },
+    {
+        label: "Inter",
+        style: "Inter",
+    },
+    {
+        label: "Comic Sans",
+        style: '"Comic Sans MS", "Comic Sans"',
+    },
+    {
+        label: "Serif",
+        style: "serif",
+    },
+    {
+        label: "Monospace",
+        style: "monospace",
+    },
+    {
+        label: "Cursive",
+        style: "cursive",
+    },
+    {
+        label: "Exo 2",
+        style: "Exo 2",
+    },
+];