@uipath/apollo-react 4.39.4 → 4.40.0

package/dist/material/components/ap-rich-text-editor/plugins/ToolbarPlugin.js

@@ -0,0 +1,272 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
+import { $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode, REMOVE_LIST_COMMAND } from "@lexical/list";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $isHeadingNode } from "@lexical/rich-text";
+import { $isAtNodeEnd } from "@lexical/selection";
+import { $getNearestNodeOfType, mergeRegister } from "@lexical/utils";
+import { Code, FormatBold, FormatItalic, FormatListBulleted, FormatListNumbered, FormatStrikethrough, FormatUnderlined, Link } from "@mui/icons-material";
+import { Tooltip } from "@mui/material";
+import { $getSelection, $isRangeSelection, FORMAT_TEXT_COMMAND, SELECTION_CHANGE_COMMAND } from "lexical";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useSafeLingui } from "../../../../i18n/useSafeLingui.js";
+const LowPriority = 1;
+function Divider() {
+    return /*#__PURE__*/ jsx("div", {
+        className: "divider"
+    });
+}
+function getSelectedNode(selection) {
+    const anchor = selection.anchor;
+    const focus = selection.focus;
+    const anchorNode = selection.anchor.getNode();
+    const focusNode = selection.focus.getNode();
+    if (anchorNode === focusNode) return anchorNode;
+    const isBackward = selection.isBackward();
+    if (isBackward) return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+    return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
+}
+function ToolbarPlugin({ disabled = false }) {
+    const [editor] = useLexicalComposerContext();
+    const toolbarRef = useRef(null);
+    const { _ } = useSafeLingui();
+    const [isBold, setIsBold] = useState(false);
+    const [isItalic, setIsItalic] = useState(false);
+    const [isUnderline, setIsUnderline] = useState(false);
+    const [isStrikethrough, setIsStrikethrough] = useState(false);
+    const [blockType, setBlockType] = useState('paragraph');
+    const [isLink, setIsLink] = useState(false);
+    const [isCode, setIsCode] = useState(false);
+    const $updateToolbar = useCallback(()=>{
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+            const anchorNode = selection.anchor.getNode();
+            const element = 'root' === anchorNode.getKey() ? anchorNode : anchorNode.getTopLevelElementOrThrow();
+            const elementKey = element.getKey();
+            const elementDOM = editor.getElementByKey(elementKey);
+            if (null !== elementDOM) if ($isListNode(element)) {
+                const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+                const type = parentList ? parentList.getTag() : element.getTag();
+                setBlockType(type);
+            } else {
+                const type = $isHeadingNode(element) ? element.getTag() : element.getType();
+                setBlockType(type);
+            }
+            setIsBold(selection.hasFormat('bold'));
+            setIsItalic(selection.hasFormat('italic'));
+            setIsUnderline(selection.hasFormat('underline'));
+            setIsStrikethrough(selection.hasFormat('strikethrough'));
+            setIsCode(selection.hasFormat('code'));
+            const node = getSelectedNode(selection);
+            const parent = node.getParent();
+            $isLinkNode(parent) || $isLinkNode(node) ? setIsLink(true) : setIsLink(false);
+        }
+    }, [
+        editor
+    ]);
+    useEffect(()=>mergeRegister(editor.registerUpdateListener(({ editorState })=>{
+            editorState.read(()=>{
+                $updateToolbar();
+            });
+        }), editor.registerCommand(SELECTION_CHANGE_COMMAND, ()=>{
+            $updateToolbar();
+            return false;
+        }, LowPriority)), [
+        editor,
+        $updateToolbar
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: `toolbar${disabled ? ' disabled' : ''}`,
+        ref: toolbarRef,
+        role: "toolbar",
+        "aria-orientation": "horizontal",
+        "aria-disabled": disabled,
+        children: [
+            /*#__PURE__*/ jsx(Tooltip, {
+                title: _({
+                    id: 'rich-text-editor.bold'
+                }),
+                children: /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    onClick: ()=>{
+                        editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
+                    },
+                    disabled: disabled,
+                    className: 'toolbar-item spaced ' + (isBold ? 'active' : ''),
+                    "aria-pressed": isBold,
+                    "aria-label": _({
+                        id: 'rich-text-editor.format-bold'
+                    }),
+                    children: /*#__PURE__*/ jsx(FormatBold, {
+                        sx: {
+                            fontSize: '24px'
+                        }
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(Tooltip, {
+                title: _({
+                    id: 'rich-text-editor.italic'
+                }),
+                children: /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    onClick: ()=>{
+                        editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
+                    },
+                    className: 'toolbar-item spaced ' + (isItalic ? 'active' : ''),
+                    "aria-pressed": isItalic,
+                    disabled: disabled,
+                    "aria-label": _({
+                        id: 'rich-text-editor.format-italic'
+                    }),
+                    children: /*#__PURE__*/ jsx(FormatItalic, {
+                        sx: {
+                            fontSize: '24px'
+                        }
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(Tooltip, {
+                title: _({
+                    id: 'rich-text-editor.underline'
+                }),
+                children: /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    onClick: ()=>{
+                        editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
+                    },
+                    className: 'toolbar-item spaced ' + (isUnderline ? 'active' : ''),
+                    "aria-pressed": isUnderline,
+                    disabled: disabled,
+                    "aria-label": _({
+                        id: 'rich-text-editor.format-underline'
+                    }),
+                    children: /*#__PURE__*/ jsx(FormatUnderlined, {
+                        sx: {
+                            fontSize: '24px'
+                        }
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(Tooltip, {
+                title: _({
+                    id: 'rich-text-editor.strikethrough'
+                }),
+                children: /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    onClick: ()=>{
+                        editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
+                    },
+                    className: 'toolbar-item spaced ' + (isStrikethrough ? 'active' : ''),
+                    "aria-pressed": isStrikethrough,
+                    disabled: disabled,
+                    "aria-label": _({
+                        id: 'rich-text-editor.format-strikethrough'
+                    }),
+                    children: /*#__PURE__*/ jsx(FormatStrikethrough, {
+                        sx: {
+                            fontSize: '24px'
+                        }
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(Divider, {}),
+            /*#__PURE__*/ jsx(Tooltip, {
+                title: _({
+                    id: 'rich-text-editor.unordered-list'
+                }),
+                children: /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    onClick: ()=>{
+                        if ('ul' !== blockType) editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
+                        else editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0);
+                    },
+                    className: 'toolbar-item spaced ' + ('ul' === blockType ? 'active' : ''),
+                    disabled: disabled,
+                    "aria-pressed": 'ul' === blockType,
+                    "aria-label": _({
+                        id: 'rich-text-editor.format-unordered-list'
+                    }),
+                    children: /*#__PURE__*/ jsx(FormatListBulleted, {
+                        sx: {
+                            fontSize: '24px'
+                        }
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(Tooltip, {
+                title: _({
+                    id: 'rich-text-editor.ordered-list'
+                }),
+                children: /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    onClick: ()=>{
+                        if ('ol' !== blockType) editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0);
+                        else editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0);
+                    },
+                    className: 'toolbar-item spaced ' + ('ol' === blockType ? 'active' : ''),
+                    disabled: disabled,
+                    "aria-pressed": 'ol' === blockType,
+                    "aria-label": _({
+                        id: 'rich-text-editor.format-ordered-list'
+                    }),
+                    children: /*#__PURE__*/ jsx(FormatListNumbered, {
+                        sx: {
+                            fontSize: '24px'
+                        }
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(Divider, {}),
+            /*#__PURE__*/ jsx(Tooltip, {
+                title: _({
+                    id: 'rich-text-editor.link'
+                }),
+                children: /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    onClick: ()=>{
+                        if (isLink) editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+                        else editor.update(()=>{
+                            const selection = $getSelection();
+                            if ($isRangeSelection(selection)) selection.insertText(`[${selection.getTextContent() || 'text'}](link)`);
+                        });
+                    },
+                    className: 'toolbar-item spaced ' + (isLink ? 'active' : ''),
+                    disabled: disabled,
+                    "aria-pressed": isLink,
+                    "aria-label": _({
+                        id: 'rich-text-editor.insert-link'
+                    }),
+                    children: /*#__PURE__*/ jsx(Link, {
+                        sx: {
+                            fontSize: '24px'
+                        }
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(Tooltip, {
+                title: _({
+                    id: 'rich-text-editor.code'
+                }),
+                children: /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    onClick: ()=>{
+                        editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
+                    },
+                    className: 'toolbar-item spaced ' + (isCode ? 'active' : ''),
+                    "aria-pressed": isCode,
+                    disabled: disabled,
+                    "aria-label": _({
+                        id: 'rich-text-editor.format-code'
+                    }),
+                    children: /*#__PURE__*/ jsx(Code, {
+                        sx: {
+                            fontSize: '24px'
+                        }
+                    })
+                })
+            })
+        ]
+    });
+}
+export { ToolbarPlugin as default };

package/dist/material/components/index.cjs

@@ -42,6 +42,9 @@ var __webpack_modules__ = {
     "./ap-progress-spinner" (module) {
         module.exports = require("./ap-progress-spinner/index.cjs");
     },
+    "./ap-rich-text-editor" (module) {
+        module.exports = require("./ap-rich-text-editor/index.cjs");
+    },
     "./ap-sankey-diagram" (module) {
         module.exports = require("./ap-sankey-diagram/index.cjs");
     },
@@ -166,37 +169,41 @@ var __webpack_exports__ = {};
     var __rspack_reexport = {};
     for(const __rspack_import_key in _ap_progress_spinner__rspack_import_13)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_ap_progress_spinner__rspack_import_13[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _ap_skeleton__rspack_import_14 = __webpack_require__("./ap-skeleton");
+    var _ap_rich_text_editor__rspack_import_14 = __webpack_require__("./ap-rich-text-editor");
+    var __rspack_reexport = {};
+    for(const __rspack_import_key in _ap_rich_text_editor__rspack_import_14)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_ap_rich_text_editor__rspack_import_14[__rspack_import_key];
+    __webpack_require__.d(__webpack_exports__, __rspack_reexport);
+    var _ap_skeleton__rspack_import_15 = __webpack_require__("./ap-skeleton");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _ap_skeleton__rspack_import_14)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_ap_skeleton__rspack_import_14[__rspack_import_key];
+    for(const __rspack_import_key in _ap_skeleton__rspack_import_15)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_ap_skeleton__rspack_import_15[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _ap_text_area__rspack_import_15 = __webpack_require__("./ap-text-area");
+    var _ap_text_area__rspack_import_16 = __webpack_require__("./ap-text-area");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _ap_text_area__rspack_import_15)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_ap_text_area__rspack_import_15[__rspack_import_key];
+    for(const __rspack_import_key in _ap_text_area__rspack_import_16)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_ap_text_area__rspack_import_16[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _ap_text_field__rspack_import_16 = __webpack_require__("./ap-text-field");
+    var _ap_text_field__rspack_import_17 = __webpack_require__("./ap-text-field");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _ap_text_field__rspack_import_16)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_ap_text_field__rspack_import_16[__rspack_import_key];
+    for(const __rspack_import_key in _ap_text_field__rspack_import_17)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_ap_text_field__rspack_import_17[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _ap_tool_call__rspack_import_17 = __webpack_require__("./ap-tool-call");
+    var _ap_tool_call__rspack_import_18 = __webpack_require__("./ap-tool-call");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _ap_tool_call__rspack_import_17)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_ap_tool_call__rspack_import_17[__rspack_import_key];
+    for(const __rspack_import_key in _ap_tool_call__rspack_import_18)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_ap_tool_call__rspack_import_18[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _ap_tooltip__rspack_import_18 = __webpack_require__("./ap-tooltip");
+    var _ap_tooltip__rspack_import_19 = __webpack_require__("./ap-tooltip");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _ap_tooltip__rspack_import_18)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_ap_tooltip__rspack_import_18[__rspack_import_key];
+    for(const __rspack_import_key in _ap_tooltip__rspack_import_19)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_ap_tooltip__rspack_import_19[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _ap_tree_view__rspack_import_19 = __webpack_require__("./ap-tree-view");
+    var _ap_tree_view__rspack_import_20 = __webpack_require__("./ap-tree-view");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _ap_tree_view__rspack_import_19)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_ap_tree_view__rspack_import_19[__rspack_import_key];
+    for(const __rspack_import_key in _ap_tree_view__rspack_import_20)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_ap_tree_view__rspack_import_20[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _ap_typography__rspack_import_20 = __webpack_require__("./ap-typography");
+    var _ap_typography__rspack_import_21 = __webpack_require__("./ap-typography");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _ap_typography__rspack_import_20)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_ap_typography__rspack_import_20[__rspack_import_key];
+    for(const __rspack_import_key in _ap_typography__rspack_import_21)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_ap_typography__rspack_import_21[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _ap_sankey_diagram__rspack_import_21 = __webpack_require__("./ap-sankey-diagram");
+    var _ap_sankey_diagram__rspack_import_22 = __webpack_require__("./ap-sankey-diagram");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _ap_sankey_diagram__rspack_import_21)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_ap_sankey_diagram__rspack_import_21[__rspack_import_key];
+    for(const __rspack_import_key in _ap_sankey_diagram__rspack_import_22)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_ap_sankey_diagram__rspack_import_22[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
 })();
 for(var __rspack_i in __webpack_exports__)exports[__rspack_i] = __webpack_exports__[__rspack_i];

package/dist/material/components/index.d.ts

@@ -12,6 +12,7 @@ export * from './ap-menu';
 export * from './ap-modal';
 export * from './ap-popover';
 export * from './ap-progress-spinner';
+export * from './ap-rich-text-editor';
 export * from './ap-skeleton';
 export * from './ap-text-area';
 export * from './ap-text-field';

package/dist/material/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/material/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/material/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC"}

package/dist/material/components/index.js

@@ -12,6 +12,7 @@ export * from "./ap-menu/index.js";
 export * from "./ap-modal/index.js";
 export * from "./ap-popover/index.js";
 export * from "./ap-progress-spinner/index.js";
+export * from "./ap-rich-text-editor/index.js";
 export * from "./ap-skeleton/index.js";
 export * from "./ap-text-area/index.js";
 export * from "./ap-text-field/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-react",
-  "version": "4.39.4",
+  "version": "4.40.0",
   "description": "Apollo Design System - React component library with Material UI theming",
   "repository": {
     "type": "git",
@@ -156,6 +156,16 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@floating-ui/react": "^0.27.15",
+    "@lexical/code": "0.16.0",
+    "@lexical/html": "0.16.0",
+    "@lexical/link": "0.16.0",
+    "@lexical/list": "0.16.0",
+    "@lexical/markdown": "0.16.0",
+    "@lexical/react": "0.16.0",
+    "@lexical/rich-text": "0.16.0",
+    "@lexical/selection": "0.16.0",
+    "@lexical/table": "0.16.0",
+    "@lexical/utils": "0.16.0",
     "@lingui/core": "^5.6.1",
     "@lingui/react": "^5.6.1",
     "@mui/icons-material": "^5.18.0",
@@ -185,6 +195,7 @@
     "debounce": "^3.0.0",
     "html-to-image": "^1.11.11",
     "katex": "^0.16.27",
+    "lexical": "0.16.0",
     "lodash": "^4.18.1",
     "lucide-react": "^0.577.0",
     "luxon": "^3.7.1",