@uipath/apollo-react 4.39.5 → 4.40.0

package/dist/material/components/ap-rich-text-editor/ApRichTextEditor.cjs

@@ -0,0 +1,297 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    ApRichTextEditor: ()=>ApRichTextEditor
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const code_namespaceObject = require("@lexical/code");
+const html_namespaceObject = require("@lexical/html");
+const link_namespaceObject = require("@lexical/link");
+const list_namespaceObject = require("@lexical/list");
+const markdown_namespaceObject = require("@lexical/markdown");
+const LexicalComposer_namespaceObject = require("@lexical/react/LexicalComposer");
+const LexicalContentEditable_namespaceObject = require("@lexical/react/LexicalContentEditable");
+const LexicalErrorBoundary_namespaceObject = require("@lexical/react/LexicalErrorBoundary");
+var LexicalErrorBoundary_default = /*#__PURE__*/ __webpack_require__.n(LexicalErrorBoundary_namespaceObject);
+const LexicalHistoryPlugin_namespaceObject = require("@lexical/react/LexicalHistoryPlugin");
+const LexicalLinkPlugin_namespaceObject = require("@lexical/react/LexicalLinkPlugin");
+const LexicalListPlugin_namespaceObject = require("@lexical/react/LexicalListPlugin");
+const LexicalMarkdownShortcutPlugin_namespaceObject = require("@lexical/react/LexicalMarkdownShortcutPlugin");
+const LexicalOnChangePlugin_namespaceObject = require("@lexical/react/LexicalOnChangePlugin");
+const LexicalRichTextPlugin_namespaceObject = require("@lexical/react/LexicalRichTextPlugin");
+const LexicalTablePlugin_namespaceObject = require("@lexical/react/LexicalTablePlugin");
+const rich_text_namespaceObject = require("@lexical/rich-text");
+const table_namespaceObject = require("@lexical/table");
+const material_namespaceObject = require("@mui/material");
+const apollo_core_namespaceObject = require("@uipath/apollo-core");
+const external_lexical_namespaceObject = require("lexical");
+const external_react_namespaceObject = require("react");
+const useSafeLingui_cjs_namespaceObject = require("../../../i18n/useSafeLingui.cjs");
+const index_cjs_namespaceObject = require("../ap-typography/index.cjs");
+require("./ApRichTextEditor.css");
+const AutoLinkPlugin_cjs_namespaceObject = require("./plugins/AutoLinkPlugin.cjs");
+var AutoLinkPlugin_cjs_default = /*#__PURE__*/ __webpack_require__.n(AutoLinkPlugin_cjs_namespaceObject);
+const CodeHighlightPlugin_cjs_namespaceObject = require("./plugins/CodeHighlightPlugin.cjs");
+var CodeHighlightPlugin_cjs_default = /*#__PURE__*/ __webpack_require__.n(CodeHighlightPlugin_cjs_namespaceObject);
+const MarkdownTransformers_cjs_namespaceObject = require("./plugins/MarkdownTransformers.cjs");
+const ToolbarPlugin_cjs_namespaceObject = require("./plugins/ToolbarPlugin.cjs");
+var ToolbarPlugin_cjs_default = /*#__PURE__*/ __webpack_require__.n(ToolbarPlugin_cjs_namespaceObject);
+const ErrorMessage = ({ id, message })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTypography, {
+        id: id,
+        variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
+        style: {
+            color: 'var(--color-error-text)'
+        },
+        children: message
+    });
+const EditorTheme = {
+    code: 'editor-code',
+    heading: {
+        h1: 'editor-heading-h1',
+        h2: 'editor-heading-h2',
+        h3: 'editor-heading-h3',
+        h4: 'editor-heading-h4',
+        h5: 'editor-heading-h5'
+    },
+    image: 'editor-image',
+    link: 'editor-link',
+    list: {
+        listitem: 'editor-listitem',
+        nested: {
+            listitem: 'editor-nested-listitem'
+        },
+        ol: 'editor-list-ol',
+        ul: 'editor-list-ul'
+    },
+    ltr: 'ltr',
+    paragraph: 'editor-paragraph',
+    placeholder: 'editor-placeholder',
+    quote: 'editor-quote',
+    rtl: 'rtl',
+    table: 'editor-table',
+    tableCell: 'editor-table-cell',
+    tableCellEditing: 'editor-table-cell-editing',
+    tableCellHeader: 'editor-table-cell-header',
+    tableCellPrimarySelected: 'editor-table-cell-primary-selected',
+    tableCellSelected: 'editor-table-cell-selected',
+    tableSelected: 'editor-table-selected',
+    tableSelection: 'editor-table-selection',
+    text: {
+        bold: 'editor-text-bold',
+        code: 'editor-text-code',
+        hashtag: 'editor-text-hashtag',
+        italic: 'editor-text-italic',
+        overflowed: 'editor-text-overflowed',
+        strikethrough: 'editor-text-strikethrough',
+        underline: 'editor-text-underline',
+        underlineStrikethrough: 'editor-text-underlineStrikethrough'
+    }
+};
+const ApRichTextEditor = (props)=>{
+    const { label, required, initialContent, placeholder, disabled, helperText, error, errorMessage, onMarkdownChange, onHtmlChange, loading, maxHeight = '100%', inputFormat = 'markdown', dataTestid } = props;
+    const { _ } = (0, useSafeLingui_cjs_namespaceObject.useSafeLingui)();
+    const baseId = (0, external_react_namespaceObject.useId)();
+    const labelId = `${baseId}-label`;
+    const helperId = `${baseId}-helper`;
+    const errorId = `${baseId}-error`;
+    const getInitialEditorState = (0, external_react_namespaceObject.useCallback)((editor, format, content)=>{
+        if ('markdown' === format) return void (0, markdown_namespaceObject.$convertFromMarkdownString)(content ?? '', MarkdownTransformers_cjs_namespaceObject.RTE_TRANSFORMERS);
+        const htmlParser = new DOMParser();
+        const dom = htmlParser.parseFromString(content ?? '', 'text/html');
+        const nodes = (0, html_namespaceObject.$generateNodesFromDOM)(editor, dom);
+        editor.update(()=>{
+            const root = (0, external_lexical_namespaceObject.$getRoot)();
+            root.clear();
+            root.select();
+            (0, external_lexical_namespaceObject.$insertNodes)(nodes);
+        });
+    }, []);
+    const editorConfig = (0, external_react_namespaceObject.useMemo)(()=>({
+            namespace: 'apollo-rich-text-editor',
+            nodes: [
+                rich_text_namespaceObject.HeadingNode,
+                list_namespaceObject.ListNode,
+                list_namespaceObject.ListItemNode,
+                code_namespaceObject.CodeNode,
+                code_namespaceObject.CodeHighlightNode,
+                link_namespaceObject.AutoLinkNode,
+                link_namespaceObject.LinkNode,
+                rich_text_namespaceObject.QuoteNode,
+                table_namespaceObject.TableNode,
+                table_namespaceObject.TableCellNode,
+                table_namespaceObject.TableRowNode
+            ],
+            onError (err) {
+                throw err;
+            },
+            theme: EditorTheme,
+            editable: !disabled && !loading,
+            editorState: (editor)=>getInitialEditorState(editor, inputFormat, initialContent)
+        }), [
+        disabled,
+        loading,
+        getInitialEditorState,
+        inputFormat,
+        initialContent
+    ]);
+    const getHelperText = (0, external_react_namespaceObject.useCallback)(()=>{
+        if (errorMessage) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ErrorMessage, {
+            id: errorId,
+            message: errorMessage
+        });
+        if (error) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ErrorMessage, {
+            id: errorId,
+            message: helperText ?? ''
+        });
+        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTypography, {
+            id: helperId,
+            variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
+            children: helperText
+        });
+    }, [
+        error,
+        errorMessage,
+        helperText,
+        errorId,
+        helperId
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "ap-rich-text-editor",
+        children: [
+            label && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                id: labelId,
+                className: `editor-label${disabled ? ' disabled' : ''}`,
+                children: [
+                    label,
+                    required && ' *'
+                ]
+            }),
+            loading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LexicalComposer_namespaceObject.LexicalComposer, {
+                initialConfig: editorConfig,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    "aria-labelledby": label ? labelId : void 0,
+                    role: "application",
+                    className: `editor-container disabled${errorMessage || error ? ' error' : ''} loading`,
+                    style: {
+                        maxHeight
+                    },
+                    "aria-disabled": true,
+                    "aria-invalid": !!(error || errorMessage),
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarPlugin_cjs_default(), {
+                            disabled: true
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(material_namespaceObject.CircularProgress, {
+                            "aria-label": _({
+                                id: 'rich-text-editor.loading'
+                            })
+                        })
+                    ]
+                })
+            }, "rte-loading") : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(LexicalComposer_namespaceObject.LexicalComposer, {
+                initialConfig: editorConfig,
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        "aria-labelledby": label ? labelId : void 0,
+                        role: "application",
+                        className: `editor-container${disabled ? ' disabled' : ''}${errorMessage || error ? ' error' : ''}`,
+                        "aria-disabled": disabled,
+                        "aria-invalid": !!(error || errorMessage),
+                        style: {
+                            maxHeight
+                        },
+                        "aria-errormessage": errorMessage || error && helperText ? errorId : void 0,
+                        "aria-describedby": helperText ? helperId : void 0,
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LexicalOnChangePlugin_namespaceObject.OnChangePlugin, {
+                                onChange: (editorState, editor)=>{
+                                    editorState.read(()=>{
+                                        onHtmlChange?.((0, html_namespaceObject.$generateHtmlFromNodes)(editor));
+                                        onMarkdownChange?.((0, markdown_namespaceObject.$convertToMarkdownString)(MarkdownTransformers_cjs_namespaceObject.RTE_TRANSFORMERS));
+                                    });
+                                }
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarPlugin_cjs_default(), {
+                                disabled: disabled
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                className: `editor-inner${disabled ? ' disabled' : ''}`,
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LexicalRichTextPlugin_namespaceObject.RichTextPlugin, {
+                                        contentEditable: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LexicalContentEditable_namespaceObject.ContentEditable, {
+                                            ariaLabelledBy: label ? labelId : void 0,
+                                            className: "editor-input",
+                                            disabled: disabled,
+                                            ariaDescribedBy: errorMessage ? errorId : helperText ? helperId : void 0,
+                                            "data-testid": dataTestid
+                                        }),
+                                        placeholder: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                            className: "editor-placeholder",
+                                            children: placeholder
+                                        }),
+                                        ErrorBoundary: LexicalErrorBoundary_default()
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LexicalListPlugin_namespaceObject.ListPlugin, {}),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LexicalLinkPlugin_namespaceObject.LinkPlugin, {}),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(AutoLinkPlugin_cjs_default(), {}),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CodeHighlightPlugin_cjs_default(), {}),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LexicalMarkdownShortcutPlugin_namespaceObject.MarkdownShortcutPlugin, {
+                                        transformers: MarkdownTransformers_cjs_namespaceObject.RTE_TRANSFORMERS
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LexicalTablePlugin_namespaceObject.TablePlugin, {
+                                        hasCellMerge: false,
+                                        hasCellBackgroundColor: false
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LexicalHistoryPlugin_namespaceObject.HistoryPlugin, {})
+                        ]
+                    }),
+                    (helperText || errorMessage) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(material_namespaceObject.FormHelperText, {
+                        component: "div",
+                        children: getHelperText()
+                    })
+                ]
+            }, "rte-editor")
+        ]
+    });
+};
+exports.ApRichTextEditor = __webpack_exports__.ApRichTextEditor;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "ApRichTextEditor"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});