@akinon/ui-editor 1.0.0

package/dist/cjs/tiptap/components/tiptap.js

@@ -0,0 +1,311 @@
+import { getSafeCustomTokens, useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import DragHandle from '@tiptap/extension-drag-handle-react';
+import { generateJSON } from '@tiptap/html';
+import { EditorContent, useEditor } from '@tiptap/react';
+import { ConfigProvider } from 'antd';
+import clsx from 'clsx';
+import React, { useEffect } from 'react';
+import { DragHandleIcon } from '../assets/icons';
+import { EDITOR_HEIGHT, getTableCellDefaults, getTableHeaderDefaults } from '../constants';
+import { formatHtml, getExtensions, normalizeHtml } from '../utils';
+import { FormatBubbleMenu } from './format-bubble-menu';
+import { HtmlCodeViewer } from './html-code-viewer';
+import { MenuBar } from './menu-bar';
+import { TableBubbleMenu } from './table-bubble-menu';
+export const Tiptap = ({ value, defaultValue, onChange, readOnly = false, classNames, toolbar, defaultSourceMode = true, placeholder }) => {
+    var _a;
+    const isSourceModeButtonHidden = (_a = toolbar === null || toolbar === void 0 ? void 0 : toolbar.hiddenButtons) === null || _a === void 0 ? void 0 : _a.includes('sourceMode');
+    const [isSourceMode, setIsSourceMode] = React.useState(isSourceModeButtonHidden ? false : defaultSourceMode);
+    const [rawHTML, setRawHTML] = React.useState('');
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    const customTokens = getSafeCustomTokens(theme);
+    const colors = (theme === null || theme === void 0 ? void 0 : theme.colors) || {};
+    const baseCls = getPrefixCls('tiptap-editor');
+    const handleEditorClick = (_view, _pos, event) => {
+        const target = event.target;
+        const anchor = target.closest('a');
+        if (anchor) {
+            event.preventDefault();
+            return true;
+        }
+        return false;
+    };
+    const extensions = React.useMemo(() => getExtensions(placeholder), [placeholder]);
+    const editorProps = React.useMemo(() => ({
+        handleClick: handleEditorClick
+    }), []);
+    const onChangeRef = React.useRef(onChange);
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    const editor = useEditor({
+        editable: !readOnly,
+        content: defaultValue !== undefined ? defaultValue : value,
+        onUpdate: ({ editor }) => {
+            var _a;
+            (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, {
+                html: editor.getHTML(),
+                json: editor.getJSON()
+            });
+        },
+        extensions,
+        editorProps
+    });
+    useEffect(() => {
+        if (editor) {
+            editor.setEditable(!readOnly);
+        }
+    }, [editor, readOnly]);
+    useEffect(() => {
+        if (editor && value !== undefined && value !== editor.getHTML()) {
+            editor.commands.setContent(value);
+        }
+    }, [editor, value]);
+    useEffect(() => {
+        if (editor && isSourceMode && !rawHTML) {
+            setRawHTML(formatHtml(editor.getHTML()));
+        }
+    }, [editor, isSourceMode, rawHTML]);
+    {
+        /* Cleans the HTML by removing the safe 'text/inert' type from script tags,
+        making them executable again for the client/production usage. */
+    }
+    const getCleanHtml = () => {
+        const safeHtml = editor.getHTML();
+        const cleanHtml = safeHtml.replace(/ type="text\/inert"/g, '');
+        return cleanHtml;
+    };
+    const toggleSource = () => {
+        if (isSourceMode) {
+            editor.commands.setContent(normalizeHtml(rawHTML), {
+                emitUpdate: false
+            });
+            editor.commands.blur();
+        }
+        else {
+            setRawHTML(formatHtml(editor.getHTML()));
+        }
+        setIsSourceMode(!isSourceMode);
+    };
+    const handleSourceChange = (val) => {
+        var _a;
+        setRawHTML(val);
+        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, {
+            html: val,
+            json: generateJSON(val, extensions)
+        });
+    };
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['TiptapEditor'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        const prefixCls = `:where(.${hashId}).${baseCls}`;
+        const tableCellDefaults = getTableCellDefaults(colors);
+        const tableHeaderDefaults = getTableHeaderDefaults(colors);
+        return {
+            [`${prefixCls}`]: {
+                width: '100%'
+            },
+            [`${prefixCls} .${baseCls}__content`]: {
+                marginTop: '10px',
+                backgroundColor: (_a = colors.ebonyClay) === null || _a === void 0 ? void 0 : _a['475'],
+                outline: 'none',
+                minHeight: EDITOR_HEIGHT,
+                maxHeight: EDITOR_HEIGHT,
+                width: '100%',
+                maxWidth: '100%',
+                borderBottomLeftRadius: '5px',
+                borderBottomRightRadius: '5px',
+                overflowY: 'auto',
+                overflowX: 'hidden'
+            },
+            [`${prefixCls} .${baseCls}__content .tiptap`]: {
+                fontFamily: 'Jost, sans-serif',
+                lineHeight: '1.42',
+                minHeight: '100%',
+                outline: 'none',
+                wordBreak: 'break-all',
+                overflowWrap: 'anywhere',
+                whiteSpace: 'pre-wrap',
+                padding: '20px',
+                color: token.colorText
+            },
+            [`${prefixCls} .${baseCls}__content > .tiptap *`]: {
+                margin: 0,
+                padding: 0,
+                boxSizing: 'border-box',
+                letterSpacing: '0.5px'
+            },
+            [`${prefixCls} .${baseCls}__content > .tiptap pre`]: {
+                backgroundColor: (_b = colors.indigo) === null || _b === void 0 ? void 0 : _b['50-05'],
+                color: (_c = colors.neutral) === null || _c === void 0 ? void 0 : _c['60-88'],
+                border: `1px solid ${(_d = colors.indigo) === null || _d === void 0 ? void 0 : _d['100-11']}`,
+                padding: '2px 6px',
+                borderRadius: '5px',
+                margin: '16px 0'
+            },
+            [`${prefixCls} .${baseCls}__content > .tiptap :not(pre) code`]: {
+                backgroundColor: (_e = colors.indigo) === null || _e === void 0 ? void 0 : _e['50-08'],
+                color: (_f = colors.orange) === null || _f === void 0 ? void 0 : _f['300'],
+                padding: '5px',
+                borderRadius: '4px',
+                border: `1px solid ${(_g = colors.indigo) === null || _g === void 0 ? void 0 : _g['100-15']}`,
+                fontWeight: customTokens.typography.fontWeightMedium
+            },
+            [`${prefixCls} .${baseCls}__content > .tiptap[contenteditable='true'] pre code`]: {
+                backgroundColor: 'transparent',
+                border: 'none',
+                borderRadius: 0,
+                padding: 0,
+                color: 'inherit',
+                '-webkit-text-fill-color': 'inherit',
+                fontSize: 'inherit',
+                fontWeight: 'normal'
+            },
+            [`${prefixCls} .${baseCls}__content .tiptap a`]: {
+                color: (_h = colors.azure) === null || _h === void 0 ? void 0 : _h['500'],
+                textDecoration: 'underline',
+                cursor: 'pointer'
+            },
+            [`${prefixCls} .${baseCls}__content .tiptap h1, ${prefixCls} .${baseCls}__content .tiptap h2, ${prefixCls} .${baseCls}__content .tiptap h3, ${prefixCls} .${baseCls}__content .tiptap h4, ${prefixCls} .${baseCls}__content .tiptap h5, ${prefixCls} .${baseCls}__content .tiptap h6`]: {
+                marginTop: '24px',
+                marginBottom: '8px',
+                lineHeight: '1.3'
+            },
+            [`${prefixCls} .${baseCls}__content .tiptap p`]: {
+                marginTop: '12px'
+            },
+            [`${prefixCls} .${baseCls}__content a:hover`]: {
+                color: (_j = colors.azure) === null || _j === void 0 ? void 0 : _j['400']
+            },
+            [`${prefixCls} .${baseCls}__content .tiptap ul:not([data-type=taskList])`]: {
+                listStyle: 'disc',
+                listStylePosition: 'outside',
+                paddingLeft: '25px',
+                marginLeft: '0',
+                marginBottom: '12px'
+            },
+            [`${prefixCls} .${baseCls}__content .tiptap ol:not([data-type=taskList])`]: {
+                listStyle: 'decimal',
+                listStylePosition: 'outside',
+                paddingLeft: '25px',
+                marginLeft: '0',
+                marginBottom: '12px'
+            },
+            [`${prefixCls} .${baseCls}__content .tiptap li`]: {
+                marginBottom: '0.5rem'
+            },
+            [`${prefixCls} .${baseCls}__content .tiptap blockquote`]: {
+                marginTop: '16px',
+                marginBottom: '16px'
+            },
+            [`${prefixCls} .${baseCls}__content .tiptap blockquote p`]: {
+                borderLeft: `4px solid ${(_k = colors.neutral) === null || _k === void 0 ? void 0 : _k['600']}`,
+                paddingLeft: '0.5rem',
+                marginLeft: '0.5rem',
+                fontStyle: 'italic'
+            },
+            [`${prefixCls} .${baseCls}__content .tiptap table`]: {
+                borderCollapse: 'collapse',
+                tableLayout: 'fixed',
+                width: '100%',
+                margin: '16px 0',
+                overflow: 'hidden',
+                border: `1px solid ${(_l = colors.neutral) === null || _l === void 0 ? void 0 : _l['600']}`
+            },
+            [`${prefixCls} .${baseCls}__content .tiptap table td`]: {
+                minWidth: '1em',
+                border: `1px solid ${(_m = colors.neutral) === null || _m === void 0 ? void 0 : _m['600']}`,
+                padding: '8px 12px',
+                verticalAlign: 'top',
+                boxSizing: 'border-box',
+                position: 'relative',
+                textAlign: 'center',
+                backgroundColor: tableCellDefaults.backgroundColor
+            },
+            [`${prefixCls} .${baseCls}__content .tiptap table th`]: {
+                minWidth: '1em',
+                border: `${tableHeaderDefaults.borderWidth} ${tableHeaderDefaults.borderStyle} ${tableHeaderDefaults.borderColor}`,
+                padding: '10px 12px',
+                verticalAlign: 'middle',
+                boxSizing: 'border-box',
+                position: 'relative',
+                fontWeight: 600,
+                textAlign: 'center',
+                backgroundColor: tableHeaderDefaults.backgroundColor,
+                color: (_o = colors.neutral) === null || _o === void 0 ? void 0 : _o['100'],
+                fontSize: '14px'
+            },
+            [`${prefixCls} .${baseCls}__content .tiptap thead`]: {
+                borderBottom: `2px solid ${(_p = colors.azure) === null || _p === void 0 ? void 0 : _p['500']}`
+            },
+            [`${prefixCls} .${baseCls}__content .tiptap table .selectedCell:after`]: {
+                zIndex: 2,
+                position: 'absolute',
+                content: '""',
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0,
+                background: (_q = colors.indigo) === null || _q === void 0 ? void 0 : _q['300-40'],
+                pointerEvents: 'none'
+            },
+            [`${prefixCls} .${baseCls}__content .tiptap table .column-resize-handle`]: {
+                position: 'absolute',
+                right: '-2px',
+                top: 0,
+                bottom: '-2px',
+                width: '4px',
+                backgroundColor: (_r = colors.azure) === null || _r === void 0 ? void 0 : _r['500'],
+                pointerEvents: 'none',
+                zIndex: 20
+            },
+            [`${prefixCls} .${baseCls}__content .tiptap table p`]: {
+                margin: 0
+            },
+            [`${prefixCls} .${baseCls}__content .tiptap hr`]: {
+                margin: '16px 0',
+                borderTop: `1px solid ${token.colorBorder}`
+            },
+            [`${prefixCls} .source-textarea`]: {
+                width: '100%',
+                marginTop: '10px',
+                minHeight: EDITOR_HEIGHT,
+                height: EDITOR_HEIGHT,
+                backgroundColor: token.colorBgContainer,
+                color: token.colorText,
+                fontFamily: 'monospace',
+                fontSize: '14px',
+                padding: '20px',
+                border: `1px solid ${token.colorBorder}`,
+                borderRadius: '5px',
+                resize: 'vertical',
+                outline: 'none',
+                boxSizing: 'border-box'
+            },
+            [`${prefixCls} .ProseMirror-gapcursor:after`]: {
+                borderTopColor: `${token.colorTextLightSolid} !important`
+            },
+            [`${prefixCls} .${baseCls}__content .tiptap .is-editor-empty:first-child::before`]: {
+                color: token.colorTextPlaceholder,
+                content: 'attr(data-placeholder)',
+                float: 'left',
+                height: 0,
+                pointerEvents: 'none'
+            }
+        };
+    });
+    return useStyle(React.createElement("div", { className: `${baseCls} ${hashId}` },
+        editor && (React.createElement(React.Fragment, null,
+            React.createElement(MenuBar, { isSourceMode: isSourceMode, toggleSource: toggleSource, editor: editor, onSave: getCleanHtml, className: classNames === null || classNames === void 0 ? void 0 : classNames.editorToolbar, toolbar: toolbar, readOnly: readOnly }),
+            React.createElement(FormatBubbleMenu, { editor: editor }),
+            React.createElement(TableBubbleMenu, { editor: editor }),
+            React.createElement(DragHandle, { editor: editor },
+                React.createElement(DragHandleIcon, null)))),
+        isSourceMode && editor ? (React.createElement(HtmlCodeViewer, { value: rawHTML, onChange: handleSourceChange, readOnly: readOnly })) : (React.createElement(EditorContent, { className: clsx(`${baseCls}__content`, classNames === null || classNames === void 0 ? void 0 : classNames.editorContent), editor: editor }))));
+};

package/dist/cjs/tiptap/constants/__tests__/table-defaults.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=table-defaults.test.d.ts.map

package/dist/cjs/tiptap/constants/__tests__/table-defaults.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-defaults.test.d.ts","sourceRoot":"","sources":["../../../../../src/tiptap/constants/__tests__/table-defaults.test.ts"],"names":[],"mappings":""}

package/dist/cjs/tiptap/constants/__tests__/table-defaults.test.js

@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'vitest';
+import { getTableCellDefaults, getTableHeaderDefaults } from '../table-defaults';
+describe('tiptap/constants/table-defaults', () => {
+    const mockColors = {
+        neutral: {
+            '600': '#666666'
+        },
+        ebonyClay: {
+            '550': '#333333'
+        }
+    };
+    describe('getTableCellDefaults', () => {
+        it('should return defaults with provided colors', () => {
+            // @ts-expect-error Mocking partial theme config
+            const result = getTableCellDefaults(mockColors);
+            expect(result).toEqual({
+                borderColor: '#666666',
+                borderWidth: '1px',
+                borderStyle: 'solid',
+                backgroundColor: 'transparent'
+            });
+        });
+        it('should return undefined for colors when not provided', () => {
+            // @ts-expect-error Mocking partial theme config
+            const result = getTableCellDefaults({});
+            expect(result).toEqual({
+                borderColor: undefined,
+                borderWidth: '1px',
+                borderStyle: 'solid',
+                backgroundColor: 'transparent'
+            });
+        });
+    });
+    describe('getTableHeaderDefaults', () => {
+        it('should return defaults with provided colors', () => {
+            // @ts-expect-error Mocking partial theme config
+            const result = getTableHeaderDefaults(mockColors);
+            expect(result).toEqual({
+                borderColor: '#666666',
+                borderWidth: '1px',
+                borderStyle: 'solid',
+                backgroundColor: '#333333'
+            });
+        });
+        it('should return undefined for colors when not provided', () => {
+            // @ts-expect-error Mocking partial theme config
+            const result = getTableHeaderDefaults({});
+            expect(result).toEqual({
+                borderColor: undefined,
+                borderWidth: '1px',
+                borderStyle: 'solid',
+                backgroundColor: undefined
+            });
+        });
+    });
+});

package/dist/cjs/tiptap/constants/__tests__/table-defaults.test.ts

@@ -0,0 +1,69 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  getTableCellDefaults,
+  getTableHeaderDefaults
+} from '../table-defaults';
+
+describe('tiptap/constants/table-defaults', () => {
+  const mockColors = {
+    neutral: {
+      '600': '#666666'
+    },
+    ebonyClay: {
+      '550': '#333333'
+    }
+  };
+
+  describe('getTableCellDefaults', () => {
+    it('should return defaults with provided colors', () => {
+      // @ts-expect-error Mocking partial theme config
+      const result = getTableCellDefaults(mockColors);
+
+      expect(result).toEqual({
+        borderColor: '#666666',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        backgroundColor: 'transparent'
+      });
+    });
+
+    it('should return undefined for colors when not provided', () => {
+      // @ts-expect-error Mocking partial theme config
+      const result = getTableCellDefaults({});
+
+      expect(result).toEqual({
+        borderColor: undefined,
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        backgroundColor: 'transparent'
+      });
+    });
+  });
+
+  describe('getTableHeaderDefaults', () => {
+    it('should return defaults with provided colors', () => {
+      // @ts-expect-error Mocking partial theme config
+      const result = getTableHeaderDefaults(mockColors);
+
+      expect(result).toEqual({
+        borderColor: '#666666',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        backgroundColor: '#333333'
+      });
+    });
+
+    it('should return undefined for colors when not provided', () => {
+      // @ts-expect-error Mocking partial theme config
+      const result = getTableHeaderDefaults({});
+
+      expect(result).toEqual({
+        borderColor: undefined,
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        backgroundColor: undefined
+      });
+    });
+  });
+});

package/dist/cjs/tiptap/constants/editor-config.d.ts

@@ -0,0 +1,89 @@
+import { HTML_ELEMENTS } from './html-elements';
+export declare const PRESET_COLORS: string[];
+export declare const HEADING_OPTIONS: readonly [{
+    readonly key: "paragraph";
+    readonly label: "Paragraph";
+    readonly level: null;
+}, {
+    readonly key: string;
+    readonly label: "Heading 1";
+    readonly level: 1;
+}, {
+    readonly key: string;
+    readonly label: "Heading 2";
+    readonly level: 2;
+}, {
+    readonly key: string;
+    readonly label: "Heading 3";
+    readonly level: 3;
+}, {
+    readonly key: string;
+    readonly label: "Heading 4";
+    readonly level: 4;
+}];
+export declare const FONT_SIZES: {
+    readonly [HTML_ELEMENTS.H1]: 32;
+    readonly [HTML_ELEMENTS.H2]: 24;
+    readonly [HTML_ELEMENTS.H3]: 18;
+    readonly [HTML_ELEMENTS.H4]: 16;
+    readonly paragraph: 14;
+};
+export declare const EXTENSION_PRIORITIES: {
+    readonly IMAGE_UPLOAD: 1000;
+    readonly HORIZONTAL_RULE: 100;
+};
+export declare const TOOLBAR_BUTTON_IDS: {
+    readonly BOLD: "bold";
+    readonly ITALIC: "italic";
+    readonly STRIKE: "strike";
+    readonly UNDERLINE: "underline";
+    readonly CLEAR: "clear";
+    readonly BULLET_LIST: "bulletList";
+    readonly ORDERED_LIST: "orderedList";
+    readonly CODE: "code";
+    readonly CODE_BLOCK: "codeBlock";
+    readonly BLOCKQUOTE: "blockquote";
+    readonly HORIZONTAL_RULE: "horizontalRule";
+    readonly IMAGE: "image";
+    readonly H1: "h1";
+    readonly H2: "h2";
+    readonly H3: "h3";
+    readonly H4: "h4";
+    readonly PARAGRAPH: "paragraph";
+    readonly HIGHLIGHT: "highlight";
+    readonly TASK_LIST: "taskList";
+    readonly LINK: "link";
+    readonly TABLE: "table";
+    readonly HEADING: "heading";
+    readonly UNDO: "undo";
+    readonly REDO: "redo";
+    readonly SOURCE_MODE: "sourceMode";
+    readonly YOUTUBE: "youtube";
+};
+export declare const TOOLBAR_GROUP_IDS: {
+    readonly HEADING: "heading";
+    readonly FORMATTING: "formatting";
+    readonly LIST: "list";
+    readonly LINK: "link";
+    readonly MEDIA: "media";
+    readonly HISTORY: "history";
+    readonly ALIGNMENT: "alignment";
+};
+export declare const ALIGNMENT_OPTIONS: {
+    LEFT: string;
+    CENTER: string;
+    RIGHT: string;
+    JUSTIFY: string;
+};
+export declare const ALLOWED_IMAGE_MIMES: string[];
+export declare const HEADING_LEVELS: readonly [1, 2, 3, 4];
+export declare const TEXT_ALIGN_TYPES: ("paragraph" | "heading")[];
+export declare const LINK_CONFIG: {
+    DEFAULT_PROTOCOL: string;
+    PROTOCOLS: string[];
+    DISALLOWED_PROTOCOLS: string[];
+    PHISHING_DOMAINS: string[];
+    NO_AUTOLINK_DOMAINS: string[];
+};
+export declare const EDITOR_HEIGHT = "400px";
+//# sourceMappingURL=editor-config.d.ts.map

package/dist/cjs/tiptap/constants/editor-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-config.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/constants/editor-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,eAAO,MAAM,aAAa,UAqBzB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;EAMlB,CAAC;AAEX,eAAO,MAAM,UAAU;IAErB,SAAA,CAAC,aAAa,CAAC,EAAE,CAAC,KAAI;IACtB,SAAA,CAAC,aAAa,CAAC,EAAE,CAAC,KAAI;IACtB,SAAA,CAAC,aAAa,CAAC,EAAE,CAAC,KAAI;IACtB,SAAA,CAAC,aAAa,CAAC,EAAE,CAAC,KAAI;;CACd,CAAC;AAEX,eAAO,MAAM,oBAAoB;;;CAGvB,CAAC;AAEX,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BrB,CAAC;AAEX,eAAO,MAAM,iBAAiB;;;;;;;;CAQpB,CAAC;AAEX,eAAO,MAAM,iBAAiB;;;;;CAK7B,CAAC;AAEF,eAAO,MAAM,mBAAmB,UAK/B,CAAC;AAEF,eAAO,MAAM,cAAc,uBAAwB,CAAC;AAEpD,eAAO,MAAM,gBAAgB,6BAG5B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;sBAIE,MAAM,EAAE;yBACL,MAAM,EAAE;CACpC,CAAC;AAEF,eAAO,MAAM,aAAa,UAAU,CAAC"}

package/dist/cjs/tiptap/constants/editor-config.js

@@ -0,0 +1,103 @@
+import { HTML_ELEMENTS } from './html-elements';
+export const PRESET_COLORS = [
+    '#F5222D',
+    '#FA541C',
+    '#FA8C16',
+    '#FAAD14',
+    '#FADB14',
+    '#A0D911',
+    '#52C41A',
+    '#13C2C2',
+    '#1890FF',
+    '#2F54EB',
+    '#722ED1',
+    '#EB2F96',
+    '#BFBFBF',
+    '#8C8C8C',
+    '#595959',
+    '#262626',
+    '#000000',
+    '#FF0000',
+    '#00FF00',
+    '#0000FF'
+];
+export const HEADING_OPTIONS = [
+    { key: 'paragraph', label: 'Paragraph', level: null },
+    { key: HTML_ELEMENTS.H1, label: 'Heading 1', level: 1 },
+    { key: HTML_ELEMENTS.H2, label: 'Heading 2', level: 2 },
+    { key: HTML_ELEMENTS.H3, label: 'Heading 3', level: 3 },
+    { key: HTML_ELEMENTS.H4, label: 'Heading 4', level: 4 }
+];
+export const FONT_SIZES = {
+    paragraph: 14,
+    [HTML_ELEMENTS.H1]: 32,
+    [HTML_ELEMENTS.H2]: 24,
+    [HTML_ELEMENTS.H3]: 18,
+    [HTML_ELEMENTS.H4]: 16
+};
+export const EXTENSION_PRIORITIES = {
+    IMAGE_UPLOAD: 1000,
+    HORIZONTAL_RULE: 100
+};
+export const TOOLBAR_BUTTON_IDS = {
+    BOLD: 'bold',
+    ITALIC: 'italic',
+    STRIKE: 'strike',
+    UNDERLINE: 'underline',
+    CLEAR: 'clear',
+    BULLET_LIST: 'bulletList',
+    ORDERED_LIST: 'orderedList',
+    CODE: 'code',
+    CODE_BLOCK: 'codeBlock',
+    BLOCKQUOTE: 'blockquote',
+    HORIZONTAL_RULE: 'horizontalRule',
+    IMAGE: 'image',
+    H1: 'h1',
+    H2: 'h2',
+    H3: 'h3',
+    H4: 'h4',
+    PARAGRAPH: 'paragraph',
+    HIGHLIGHT: 'highlight',
+    TASK_LIST: 'taskList',
+    LINK: 'link',
+    TABLE: 'table',
+    HEADING: 'heading',
+    UNDO: 'undo',
+    REDO: 'redo',
+    SOURCE_MODE: 'sourceMode',
+    YOUTUBE: 'youtube'
+};
+export const TOOLBAR_GROUP_IDS = {
+    HEADING: 'heading',
+    FORMATTING: 'formatting',
+    LIST: 'list',
+    LINK: 'link',
+    MEDIA: 'media',
+    HISTORY: 'history',
+    ALIGNMENT: 'alignment'
+};
+export const ALIGNMENT_OPTIONS = {
+    LEFT: 'left',
+    CENTER: 'center',
+    RIGHT: 'right',
+    JUSTIFY: 'justify'
+};
+export const ALLOWED_IMAGE_MIMES = [
+    'image/png',
+    'image/jpeg',
+    'image/gif',
+    'image/webp'
+];
+export const HEADING_LEVELS = [1, 2, 3, 4];
+export const TEXT_ALIGN_TYPES = [
+    TOOLBAR_GROUP_IDS.HEADING,
+    TOOLBAR_BUTTON_IDS.PARAGRAPH
+];
+export const LINK_CONFIG = {
+    DEFAULT_PROTOCOL: 'https',
+    PROTOCOLS: ['http', 'https'],
+    DISALLOWED_PROTOCOLS: ['ftp', 'file'],
+    PHISHING_DOMAINS: [],
+    NO_AUTOLINK_DOMAINS: []
+};
+export const EDITOR_HEIGHT = '400px';