@uipath/apollo-react 3.66.1 → 3.68.0

package/dist/canvas/components/StickyNoteNode/FormattingToolbar.cjs

@@ -0,0 +1,149 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __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__, {
+    FormattingToolbar: ()=>FormattingToolbar
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_index_cjs_namespaceObject = require("../../index.cjs");
+const index_cjs_namespaceObject = require("../../../material/components/index.cjs");
+const external_react_namespaceObject = require("react");
+const external_markdown_formatting_index_cjs_namespaceObject = require("./markdown-formatting/index.cjs");
+const external_StickyNoteNode_styles_cjs_namespaceObject = require("./StickyNoteNode.styles.cjs");
+const external_StickyNoteNode_utils_cjs_namespaceObject = require("./StickyNoteNode.utils.cjs");
+const FormattingToolbarComponent = ({ textAreaRef, borderColor, activeFormats, onFormat })=>{
+    const applyFormat = (0, external_react_namespaceObject.useCallback)((formatFn)=>{
+        const textarea = textAreaRef.current;
+        if (!textarea) return;
+        const input = {
+            value: textarea.value,
+            selectionStart: textarea.selectionStart,
+            selectionEnd: textarea.selectionEnd
+        };
+        onFormat(formatFn(input));
+        textarea.focus();
+    }, [
+        textAreaRef,
+        onFormat
+    ]);
+    const handleBold = (0, external_react_namespaceObject.useCallback)(()=>applyFormat(external_markdown_formatting_index_cjs_namespaceObject.toggleBold), [
+        applyFormat
+    ]);
+    const handleItalic = (0, external_react_namespaceObject.useCallback)(()=>applyFormat(external_markdown_formatting_index_cjs_namespaceObject.toggleItalic), [
+        applyFormat
+    ]);
+    const handleStrikethrough = (0, external_react_namespaceObject.useCallback)(()=>applyFormat(external_markdown_formatting_index_cjs_namespaceObject.toggleStrikethrough), [
+        applyFormat
+    ]);
+    const handleBulletList = (0, external_react_namespaceObject.useCallback)(()=>applyFormat(external_markdown_formatting_index_cjs_namespaceObject.toggleBulletList), [
+        applyFormat
+    ]);
+    const handleNumberedList = (0, external_react_namespaceObject.useCallback)(()=>applyFormat(external_markdown_formatting_index_cjs_namespaceObject.toggleNumberedList), [
+        applyFormat
+    ]);
+    const mod = (0, external_StickyNoteNode_utils_cjs_namespaceObject.getModifierKey)();
+    const shift = (0, external_StickyNoteNode_utils_cjs_namespaceObject.isMac)() ? '⇧' : '+Shift+';
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StickyNoteNode_styles_cjs_namespaceObject.FormattingToolbarContainer, {
+        borderColor: borderColor,
+        onMouseDown: (e)=>e.preventDefault(),
+        className: "nodrag nowheel",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTooltip, {
+                content: `Bold (${mod}+B)`,
+                placement: "top",
+                delay: true,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.FormattingButton, {
+                    isActive: activeFormats.bold,
+                    onClick: handleBold,
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.NodeIcon, {
+                        icon: "bold",
+                        size: 14
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTooltip, {
+                content: `Italic (${mod}+I)`,
+                placement: "top",
+                delay: true,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.FormattingButton, {
+                    isActive: activeFormats.italic,
+                    onClick: handleItalic,
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.NodeIcon, {
+                        icon: "italic",
+                        size: 14
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTooltip, {
+                content: `Strikethrough (${mod}${shift}X)`,
+                placement: "top",
+                delay: true,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.FormattingButton, {
+                    isActive: activeFormats.strikethrough,
+                    onClick: handleStrikethrough,
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.NodeIcon, {
+                        icon: "strikethrough",
+                        size: 14
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.ToolbarSeparator, {}),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTooltip, {
+                content: "Bullet list",
+                placement: "top",
+                delay: true,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.FormattingButton, {
+                    isActive: activeFormats.bulletList,
+                    onClick: handleBulletList,
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.NodeIcon, {
+                        icon: "list",
+                        size: 14
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTooltip, {
+                content: "Numbered list",
+                placement: "top",
+                delay: true,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.FormattingButton, {
+                    isActive: activeFormats.numberedList,
+                    onClick: handleNumberedList,
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.NodeIcon, {
+                        icon: "list-ordered",
+                        size: 14
+                    })
+                })
+            })
+        ]
+    });
+};
+const FormattingToolbar = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(FormattingToolbarComponent);
+exports.FormattingToolbar = __webpack_exports__.FormattingToolbar;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "FormattingToolbar"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/StickyNoteNode/FormattingToolbar.d.ts

@@ -0,0 +1,12 @@
+import { type RefObject } from 'react';
+import type { ActiveFormats } from './markdown-formatting';
+import type { TextSelection } from './StickyNoteNode.types';
+interface FormattingToolbarProps {
+    textAreaRef: RefObject<HTMLTextAreaElement | null>;
+    borderColor: string;
+    activeFormats: ActiveFormats;
+    onFormat: (result: TextSelection) => void;
+}
+export declare const FormattingToolbar: import("react").MemoExoticComponent<({ textAreaRef, borderColor, activeFormats, onFormat, }: FormattingToolbarProps) => import("react/jsx-runtime").JSX.Element>;
+export {};
+//# sourceMappingURL=FormattingToolbar.d.ts.map

package/dist/canvas/components/StickyNoteNode/FormattingToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormattingToolbar.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/FormattingToolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,SAAS,EAAe,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAa3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAG5D,UAAU,sBAAsB;IAC9B,WAAW,EAAE,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACnD,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C;AAwED,eAAO,MAAM,iBAAiB,+FAjE3B,sBAAsB,6CAiEwC,CAAC"}

package/dist/canvas/components/StickyNoteNode/FormattingToolbar.js

@@ -0,0 +1,115 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NodeIcon } from "../../index.js";
+import { ApTooltip } from "../../../material/components/index.js";
+import { memo, useCallback } from "react";
+import { toggleBold, toggleBulletList, toggleItalic, toggleNumberedList, toggleStrikethrough } from "./markdown-formatting/index.js";
+import { FormattingButton, FormattingToolbarContainer, ToolbarSeparator } from "./StickyNoteNode.styles.js";
+import { getModifierKey, isMac } from "./StickyNoteNode.utils.js";
+const FormattingToolbarComponent = ({ textAreaRef, borderColor, activeFormats, onFormat })=>{
+    const applyFormat = useCallback((formatFn)=>{
+        const textarea = textAreaRef.current;
+        if (!textarea) return;
+        const input = {
+            value: textarea.value,
+            selectionStart: textarea.selectionStart,
+            selectionEnd: textarea.selectionEnd
+        };
+        onFormat(formatFn(input));
+        textarea.focus();
+    }, [
+        textAreaRef,
+        onFormat
+    ]);
+    const handleBold = useCallback(()=>applyFormat(toggleBold), [
+        applyFormat
+    ]);
+    const handleItalic = useCallback(()=>applyFormat(toggleItalic), [
+        applyFormat
+    ]);
+    const handleStrikethrough = useCallback(()=>applyFormat(toggleStrikethrough), [
+        applyFormat
+    ]);
+    const handleBulletList = useCallback(()=>applyFormat(toggleBulletList), [
+        applyFormat
+    ]);
+    const handleNumberedList = useCallback(()=>applyFormat(toggleNumberedList), [
+        applyFormat
+    ]);
+    const mod = getModifierKey();
+    const shift = isMac() ? '⇧' : '+Shift+';
+    return /*#__PURE__*/ jsxs(FormattingToolbarContainer, {
+        borderColor: borderColor,
+        onMouseDown: (e)=>e.preventDefault(),
+        className: "nodrag nowheel",
+        children: [
+            /*#__PURE__*/ jsx(ApTooltip, {
+                content: `Bold (${mod}+B)`,
+                placement: "top",
+                delay: true,
+                children: /*#__PURE__*/ jsx(FormattingButton, {
+                    isActive: activeFormats.bold,
+                    onClick: handleBold,
+                    children: /*#__PURE__*/ jsx(NodeIcon, {
+                        icon: "bold",
+                        size: 14
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(ApTooltip, {
+                content: `Italic (${mod}+I)`,
+                placement: "top",
+                delay: true,
+                children: /*#__PURE__*/ jsx(FormattingButton, {
+                    isActive: activeFormats.italic,
+                    onClick: handleItalic,
+                    children: /*#__PURE__*/ jsx(NodeIcon, {
+                        icon: "italic",
+                        size: 14
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(ApTooltip, {
+                content: `Strikethrough (${mod}${shift}X)`,
+                placement: "top",
+                delay: true,
+                children: /*#__PURE__*/ jsx(FormattingButton, {
+                    isActive: activeFormats.strikethrough,
+                    onClick: handleStrikethrough,
+                    children: /*#__PURE__*/ jsx(NodeIcon, {
+                        icon: "strikethrough",
+                        size: 14
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(ToolbarSeparator, {}),
+            /*#__PURE__*/ jsx(ApTooltip, {
+                content: "Bullet list",
+                placement: "top",
+                delay: true,
+                children: /*#__PURE__*/ jsx(FormattingButton, {
+                    isActive: activeFormats.bulletList,
+                    onClick: handleBulletList,
+                    children: /*#__PURE__*/ jsx(NodeIcon, {
+                        icon: "list",
+                        size: 14
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(ApTooltip, {
+                content: "Numbered list",
+                placement: "top",
+                delay: true,
+                children: /*#__PURE__*/ jsx(FormattingButton, {
+                    isActive: activeFormats.numberedList,
+                    onClick: handleNumberedList,
+                    children: /*#__PURE__*/ jsx(NodeIcon, {
+                        icon: "list-ordered",
+                        size: 14
+                    })
+                })
+            })
+        ]
+    });
+};
+const FormattingToolbar = /*#__PURE__*/ memo(FormattingToolbarComponent);
+export { FormattingToolbar };

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.cjs

@@ -47,9 +47,12 @@ const external_remark_gfm_namespaceObject = require("remark-gfm");
 var external_remark_gfm_default = /*#__PURE__*/ __webpack_require__.n(external_remark_gfm_namespaceObject);
 const external_constants_cjs_namespaceObject = require("../../constants.cjs");
 const index_cjs_namespaceObject = require("../Toolbar/index.cjs");
+const external_FormattingToolbar_cjs_namespaceObject = require("./FormattingToolbar.cjs");
+const external_markdown_formatting_index_cjs_namespaceObject = require("./markdown-formatting/index.cjs");
 const external_StickyNoteNode_styles_cjs_namespaceObject = require("./StickyNoteNode.styles.cjs");
 const external_StickyNoteNode_types_cjs_namespaceObject = require("./StickyNoteNode.types.cjs");
 const external_StickyNoteNode_utils_cjs_namespaceObject = require("./StickyNoteNode.utils.cjs");
+const external_useMarkdownShortcuts_cjs_namespaceObject = require("./useMarkdownShortcuts.cjs");
 const minWidth = 8 * external_constants_cjs_namespaceObject.GRID_SPACING;
 const minHeight = 8 * external_constants_cjs_namespaceObject.GRID_SPACING;
 const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false })=>{
@@ -60,6 +63,13 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     const [localContent, setLocalContent] = (0, external_react_namespaceObject.useState)(data.content || '');
     const textAreaRef = (0, external_react_namespaceObject.useRef)(null);
     const colorButtonRef = (0, external_react_namespaceObject.useRef)(null);
+    const [activeFormats, setActiveFormats] = (0, external_react_namespaceObject.useState)({
+        bold: false,
+        italic: false,
+        strikethrough: false,
+        bulletList: false,
+        numberedList: false
+    });
     const colorKey = data.color || 'yellow';
     const color = external_StickyNoteNode_types_cjs_namespaceObject.STICKY_NOTE_COLORS[colorKey] ?? external_StickyNoteNode_types_cjs_namespaceObject.STICKY_NOTE_COLORS.yellow;
     const colorWithAlpha = (0, external_StickyNoteNode_types_cjs_namespaceObject.withAlpha)(color);
@@ -89,6 +99,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         isResizing
     ]);
     const handleDoubleClick = (0, external_react_namespaceObject.useCallback)(()=>{
+        if (isEditing) return;
         setIsEditing(true);
         setTimeout(()=>{
             if (textAreaRef.current) {
@@ -96,7 +107,9 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                 textAreaRef.current.select();
             }
         }, 0);
-    }, []);
+    }, [
+        isEditing
+    ]);
     const handleBlur = (0, external_react_namespaceObject.useCallback)(()=>{
         setIsEditing(false);
         if (localContent !== data.content) updateNodeData(id, {
@@ -111,14 +124,53 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     const handleChange = (0, external_react_namespaceObject.useCallback)((e)=>{
         setLocalContent(e.target.value);
     }, []);
+    const handleFormat = (0, external_react_namespaceObject.useCallback)((result)=>{
+        setLocalContent(result.value);
+        setActiveFormats((0, external_markdown_formatting_index_cjs_namespaceObject.detectActiveFormats)(result));
+        requestAnimationFrame(()=>{
+            if (textAreaRef.current) {
+                textAreaRef.current.selectionStart = result.selectionStart;
+                textAreaRef.current.selectionEnd = result.selectionEnd;
+            }
+        });
+    }, []);
+    const updateActiveFormats = (0, external_react_namespaceObject.useCallback)(()=>{
+        if (!textAreaRef.current) return;
+        const next = (0, external_markdown_formatting_index_cjs_namespaceObject.detectActiveFormats)({
+            value: textAreaRef.current.value,
+            selectionStart: textAreaRef.current.selectionStart,
+            selectionEnd: textAreaRef.current.selectionEnd
+        });
+        setActiveFormats((prev)=>(0, external_markdown_formatting_index_cjs_namespaceObject.activeFormatsEqual)(prev, next) ? prev : next);
+    }, []);
+    const shortcutKeyDown = (0, external_useMarkdownShortcuts_cjs_namespaceObject.useMarkdownShortcuts)(textAreaRef, handleFormat);
     const handleKeyDown = (0, external_react_namespaceObject.useCallback)((e)=>{
         if ('Escape' === e.key) {
             setIsEditing(false);
             setLocalContent(data.content || '');
             textAreaRef.current?.blur();
+            return;
         }
+        if ('Enter' === e.key && !e.shiftKey && !e.metaKey && !e.ctrlKey) {
+            const textarea = textAreaRef.current;
+            if (textarea) {
+                const result = (0, external_markdown_formatting_index_cjs_namespaceObject.continueListOnEnter)({
+                    value: textarea.value,
+                    selectionStart: textarea.selectionStart,
+                    selectionEnd: textarea.selectionEnd
+                });
+                if (result) {
+                    e.preventDefault();
+                    handleFormat(result);
+                }
+            }
+            return;
+        }
+        shortcutKeyDown(e);
     }, [
-        data.content
+        data.content,
+        shortcutKeyDown,
+        handleFormat
     ]);
     const handleResizeStart = (0, external_react_namespaceObject.useCallback)(()=>{
         setIsResizing(true);
@@ -310,16 +362,27 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.BottomCornerIndicators, {
                                 selected: selected
                             }),
-                            isEditing ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.StickyNoteTextArea, {
-                                ref: textAreaRef,
-                                value: localContent,
-                                onChange: handleChange,
-                                onBlur: handleBlur,
-                                onKeyDown: handleKeyDown,
-                                readOnly: !isEditing,
-                                placeholder: placeholder,
-                                isEditing: isEditing,
-                                className: "nodrag nowheel"
+                            isEditing ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FormattingToolbar_cjs_namespaceObject.FormattingToolbar, {
+                                        textAreaRef: textAreaRef,
+                                        borderColor: color,
+                                        activeFormats: activeFormats,
+                                        onFormat: handleFormat
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.StickyNoteTextArea, {
+                                        ref: textAreaRef,
+                                        value: localContent,
+                                        onChange: handleChange,
+                                        onBlur: handleBlur,
+                                        onKeyDown: handleKeyDown,
+                                        onSelect: updateActiveFormats,
+                                        onKeyUp: updateActiveFormats,
+                                        placeholder: placeholder,
+                                        isEditing: isEditing,
+                                        className: "nodrag nowheel"
+                                    })
+                                ]
                             }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.StickyNoteMarkdown, {
                                 children: localContent ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_markdown_default(), {
                                     remarkPlugins: [

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StickyNoteNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAsB1E,OAAO,KAAK,EAAmB,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAI9E,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,IAAI,EAAE,cAAc,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AA8TD,eAAO,MAAM,cAAc,kHAlTxB,mBAAmB,6CAkTqC,CAAC"}
+{"version":3,"file":"StickyNoteNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AA6B1E,OAAO,KAAK,EAAmB,cAAc,EAAiB,MAAM,wBAAwB,CAAC;AAK7F,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,IAAI,EAAE,cAAc,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAsXD,eAAO,MAAM,cAAc,kHA1WxB,mBAAmB,6CA0WqC,CAAC"}

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.js

@@ -8,9 +8,12 @@ import react_markdown from "react-markdown";
 import remark_gfm from "remark-gfm";
 import { GRID_SPACING } from "../../constants.js";
 import { NodeToolbar } from "../Toolbar/index.js";
+import { FormattingToolbar } from "./FormattingToolbar.js";
+import { activeFormatsEqual, continueListOnEnter, detectActiveFormats } from "./markdown-formatting/index.js";
 import { BottomCornerIndicators, ColorOption, ColorPickerPanel, RESIZE_CONTROL_Z_INDEX, ResizeHandle, StickyNoteContainer, StickyNoteMarkdown, StickyNoteTextArea, StickyNoteWrapper, TopCornerIndicators, stickyNoteGlobalStyles } from "./StickyNoteNode.styles.js";
 import { STICKY_NOTE_COLORS, withAlpha } from "./StickyNoteNode.types.js";
 import { preserveNewlines } from "./StickyNoteNode.utils.js";
+import { useMarkdownShortcuts } from "./useMarkdownShortcuts.js";
 const minWidth = 8 * GRID_SPACING;
 const minHeight = 8 * GRID_SPACING;
 const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false })=>{
@@ -21,6 +24,13 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     const [localContent, setLocalContent] = useState(data.content || '');
     const textAreaRef = useRef(null);
     const colorButtonRef = useRef(null);
+    const [activeFormats, setActiveFormats] = useState({
+        bold: false,
+        italic: false,
+        strikethrough: false,
+        bulletList: false,
+        numberedList: false
+    });
     const colorKey = data.color || 'yellow';
     const color = STICKY_NOTE_COLORS[colorKey] ?? STICKY_NOTE_COLORS.yellow;
     const colorWithAlpha = withAlpha(color);
@@ -50,6 +60,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         isResizing
     ]);
     const handleDoubleClick = useCallback(()=>{
+        if (isEditing) return;
         setIsEditing(true);
         setTimeout(()=>{
             if (textAreaRef.current) {
@@ -57,7 +68,9 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                 textAreaRef.current.select();
             }
         }, 0);
-    }, []);
+    }, [
+        isEditing
+    ]);
     const handleBlur = useCallback(()=>{
         setIsEditing(false);
         if (localContent !== data.content) updateNodeData(id, {
@@ -72,14 +85,53 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     const handleChange = useCallback((e)=>{
         setLocalContent(e.target.value);
     }, []);
+    const handleFormat = useCallback((result)=>{
+        setLocalContent(result.value);
+        setActiveFormats(detectActiveFormats(result));
+        requestAnimationFrame(()=>{
+            if (textAreaRef.current) {
+                textAreaRef.current.selectionStart = result.selectionStart;
+                textAreaRef.current.selectionEnd = result.selectionEnd;
+            }
+        });
+    }, []);
+    const updateActiveFormats = useCallback(()=>{
+        if (!textAreaRef.current) return;
+        const next = detectActiveFormats({
+            value: textAreaRef.current.value,
+            selectionStart: textAreaRef.current.selectionStart,
+            selectionEnd: textAreaRef.current.selectionEnd
+        });
+        setActiveFormats((prev)=>activeFormatsEqual(prev, next) ? prev : next);
+    }, []);
+    const shortcutKeyDown = useMarkdownShortcuts(textAreaRef, handleFormat);
     const handleKeyDown = useCallback((e)=>{
         if ('Escape' === e.key) {
             setIsEditing(false);
             setLocalContent(data.content || '');
             textAreaRef.current?.blur();
+            return;
         }
+        if ('Enter' === e.key && !e.shiftKey && !e.metaKey && !e.ctrlKey) {
+            const textarea = textAreaRef.current;
+            if (textarea) {
+                const result = continueListOnEnter({
+                    value: textarea.value,
+                    selectionStart: textarea.selectionStart,
+                    selectionEnd: textarea.selectionEnd
+                });
+                if (result) {
+                    e.preventDefault();
+                    handleFormat(result);
+                }
+            }
+            return;
+        }
+        shortcutKeyDown(e);
     }, [
-        data.content
+        data.content,
+        shortcutKeyDown,
+        handleFormat
     ]);
     const handleResizeStart = useCallback(()=>{
         setIsResizing(true);
@@ -271,16 +323,27 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                             /*#__PURE__*/ jsx(BottomCornerIndicators, {
                                 selected: selected
                             }),
-                            isEditing ? /*#__PURE__*/ jsx(StickyNoteTextArea, {
-                                ref: textAreaRef,
-                                value: localContent,
-                                onChange: handleChange,
-                                onBlur: handleBlur,
-                                onKeyDown: handleKeyDown,
-                                readOnly: !isEditing,
-                                placeholder: placeholder,
-                                isEditing: isEditing,
-                                className: "nodrag nowheel"
+                            isEditing ? /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    /*#__PURE__*/ jsx(FormattingToolbar, {
+                                        textAreaRef: textAreaRef,
+                                        borderColor: color,
+                                        activeFormats: activeFormats,
+                                        onFormat: handleFormat
+                                    }),
+                                    /*#__PURE__*/ jsx(StickyNoteTextArea, {
+                                        ref: textAreaRef,
+                                        value: localContent,
+                                        onChange: handleChange,
+                                        onBlur: handleBlur,
+                                        onKeyDown: handleKeyDown,
+                                        onSelect: updateActiveFormats,
+                                        onKeyUp: updateActiveFormats,
+                                        placeholder: placeholder,
+                                        isEditing: isEditing,
+                                        className: "nodrag nowheel"
+                                    })
+                                ]
                             }) : /*#__PURE__*/ jsx(StickyNoteMarkdown, {
                                 children: localContent ? /*#__PURE__*/ jsx(react_markdown, {
                                     remarkPlugins: [