feat(apollo-react): add formatting toolbar to sticky notes (2/3) [MST-7636]

packages/apollo-react/src/canvas/components/StickyNoteNode/FormattingToolbar.test.tsx

@@ -0,0 +1,78 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { FormattingToolbar } from './FormattingToolbar';
+import type { ActiveFormats } from './markdown-formatting';
+
+const defaultFormats: ActiveFormats = {
+  bold: false,
+  italic: false,
+  strikethrough: false,
+  bulletList: false,
+  numberedList: false,
+};
+
+function createMockTextArea(value = '', selectionStart = 0, selectionEnd = 0) {
+  const textarea = document.createElement('textarea');
+  textarea.value = value;
+  textarea.selectionStart = selectionStart;
+  textarea.selectionEnd = selectionEnd;
+  document.body.appendChild(textarea);
+  textarea.focus();
+  return { current: textarea };
+}
+
+describe('FormattingToolbar', () => {
+  it('calls onFormat when a button is clicked', () => {
+    const onFormat = vi.fn();
+    const ref = createMockTextArea('hello world', 6, 11);
+
+    render(
+      <FormattingToolbar
+        textAreaRef={ref}
+        borderColor="#42A1FF"
+        activeFormats={defaultFormats}
+        onFormat={onFormat}
+      />
+    );
+
+    // Click the first button (bold)
+    fireEvent.click(screen.getAllByRole('button')[0]!);
+    expect(onFormat).toHaveBeenCalledWith(expect.objectContaining({ value: 'hello **world**' }));
+
+    ref.current.remove();
+  });
+
+  it('does not call onFormat when textAreaRef is null', () => {
+    const onFormat = vi.fn();
+    const ref = { current: null } as React.RefObject<HTMLTextAreaElement | null>;
+
+    render(
+      <FormattingToolbar
+        textAreaRef={ref}
+        borderColor="#42A1FF"
+        activeFormats={defaultFormats}
+        onFormat={onFormat}
+      />
+    );
+
+    fireEvent.click(screen.getAllByRole('button')[0]!);
+    expect(onFormat).not.toHaveBeenCalled();
+  });
+
+  it('prevents textarea blur on mousedown', () => {
+    const ref = { current: null } as React.RefObject<HTMLTextAreaElement | null>;
+    const { container } = render(
+      <FormattingToolbar
+        textAreaRef={ref}
+        borderColor="#42A1FF"
+        activeFormats={defaultFormats}
+        onFormat={vi.fn()}
+      />
+    );
+
+    const toolbarContainer = container.firstChild as HTMLElement;
+    const mouseDownEvent = new MouseEvent('mousedown', { bubbles: true, cancelable: true });
+    const prevented = !toolbarContainer.dispatchEvent(mouseDownEvent);
+    expect(prevented).toBe(true);
+  });
+});

packages/apollo-react/src/canvas/components/StickyNoteNode/FormattingToolbar.tsx

@@ -0,0 +1,97 @@
+import { NodeIcon } from '@uipath/apollo-react/canvas';
+import { ApTooltip } from '@uipath/apollo-react/material/components';
+import { memo, type RefObject, useCallback } from 'react';
+import type { ActiveFormats } from './markdown-formatting';
+import {
+  toggleBold,
+  toggleBulletList,
+  toggleItalic,
+  toggleNumberedList,
+  toggleStrikethrough,
+} from './markdown-formatting';
+import {
+  FormattingButton,
+  FormattingToolbarContainer,
+  ToolbarSeparator,
+} from './StickyNoteNode.styles';
+import type { TextSelection } from './StickyNoteNode.types';
+import { getModifierKey, isMac } from './StickyNoteNode.utils';
+
+interface FormattingToolbarProps {
+  textAreaRef: RefObject<HTMLTextAreaElement | null>;
+  borderColor: string;
+  activeFormats: ActiveFormats;
+  onFormat: (result: TextSelection) => void;
+}
+
+const FormattingToolbarComponent = ({
+  textAreaRef,
+  borderColor,
+  activeFormats,
+  onFormat,
+}: FormattingToolbarProps) => {
+  const applyFormat = useCallback(
+    (formatFn: (input: TextSelection) => TextSelection) => {
+      const textarea = textAreaRef.current;
+      if (!textarea) return;
+
+      const input: TextSelection = {
+        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 (
+    <FormattingToolbarContainer
+      borderColor={borderColor}
+      onMouseDown={(e) => e.preventDefault()}
+      className="nodrag nowheel"
+    >
+      <ApTooltip content={`Bold (${mod}+B)`} placement="top" delay>
+        <FormattingButton isActive={activeFormats.bold} onClick={handleBold}>
+          <NodeIcon icon="bold" size={14} />
+        </FormattingButton>
+      </ApTooltip>
+      <ApTooltip content={`Italic (${mod}+I)`} placement="top" delay>
+        <FormattingButton isActive={activeFormats.italic} onClick={handleItalic}>
+          <NodeIcon icon="italic" size={14} />
+        </FormattingButton>
+      </ApTooltip>
+      <ApTooltip content={`Strikethrough (${mod}${shift}X)`} placement="top" delay>
+        <FormattingButton isActive={activeFormats.strikethrough} onClick={handleStrikethrough}>
+          <NodeIcon icon="strikethrough" size={14} />
+        </FormattingButton>
+      </ApTooltip>
+
+      <ToolbarSeparator />
+
+      <ApTooltip content="Bullet list" placement="top" delay>
+        <FormattingButton isActive={activeFormats.bulletList} onClick={handleBulletList}>
+          <NodeIcon icon="list" size={14} />
+        </FormattingButton>
+      </ApTooltip>
+      <ApTooltip content="Numbered list" placement="top" delay>
+        <FormattingButton isActive={activeFormats.numberedList} onClick={handleNumberedList}>
+          <NodeIcon icon="list-ordered" size={14} />
+        </FormattingButton>
+      </ApTooltip>
+    </FormattingToolbarContainer>
+  );
+};
+
+export const FormattingToolbar = memo(FormattingToolbarComponent);

packages/apollo-react/src/canvas/components/StickyNoteNode/StickyNoteNode.styles.ts

@@ -62,7 +62,9 @@ export const StickyNoteContainer = styled.div<{
   background-color: ${(props) => props.backgroundColor};
   border-radius: 16px;
   border: 2px solid ${(props) => props.borderColor};
-  padding: 16px;
+  padding: ${(props) => (props.isEditing ? '8px' : '16px')} 16px 16px 16px;
+  display: flex;
+  flex-direction: column;
   cursor: ${(props) => (props.isEditing ? 'text' : 'move')};
   position: relative;
   /* Ensure resize handles are clickable */
@@ -79,6 +81,8 @@ export const StickyNoteContainer = styled.div<{
 `;
 
 export const StickyNoteTextArea = styled.textarea<{ isEditing: boolean }>`
+  flex: 1;
+  min-height: 0;
   ${stickyNoteContentStyles}
 
   background: transparent;
@@ -101,6 +105,8 @@ export const StickyNoteTextArea = styled.textarea<{ isEditing: boolean }>`
 `;
 
 export const StickyNoteMarkdown = styled.div`
+  flex: 1;
+  min-height: 0;
   ${stickyNoteContentStyles}
 
   word-wrap: break-word;
@@ -339,3 +345,44 @@ export const ColorOption = styled.button<{ color: string; isSelected: boolean }>
     outline-offset: 1px;
   }
 `;
+
+export const FormattingToolbarContainer = styled.div<{ borderColor: string }>`
+  display: flex;
+  align-items: center;
+  gap: 1px;
+  padding-bottom: 4px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid ${(props) => `color-mix(in srgb, ${props.borderColor} 30%, transparent)`};
+  flex-shrink: 0;
+`;
+
+export const FormattingButton = styled.button<{ isActive: boolean }>`
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 0;
+  color: var(--uix-canvas-foreground);
+  background: ${(props) =>
+    props.isActive
+      ? 'color-mix(in srgb, var(--uix-canvas-primary) 30%, transparent)'
+      : 'transparent'};
+
+  &:hover {
+    background: ${(props) =>
+      props.isActive
+        ? 'color-mix(in srgb, var(--uix-canvas-primary) 40%, transparent)'
+        : 'color-mix(in srgb, var(--uix-canvas-foreground) 10%, transparent)'};
+  }
+`;
+
+export const ToolbarSeparator = styled.div`
+  width: 1px;
+  height: 16px;
+  background: color-mix(in srgb, var(--uix-canvas-foreground) 15%, transparent);
+  margin: 0 4px;
+`;