@keboola/design 1.0.0

package/src/components/MarkdownEditor/plugins/ToolbarPlugin.tsx

@@ -0,0 +1,274 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { $createCodeNode, $isCodeNode } from '@lexical/code';
+import { $isLinkNode } from '@lexical/link';
+import {
+  $isListNode,
+  INSERT_ORDERED_LIST_COMMAND,
+  INSERT_UNORDERED_LIST_COMMAND,
+  REMOVE_LIST_COMMAND,
+} from '@lexical/list';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $createQuoteNode, $isHeadingNode, $isQuoteNode } from '@lexical/rich-text';
+import { $getNearestBlockElementAncestorOrThrow } from '@lexical/utils';
+import {
+  $createParagraphNode,
+  $getSelection,
+  $isRangeSelection,
+  type ElementFormatType,
+  FORMAT_TEXT_COMMAND,
+} from 'lexical';
+
+import { Icon } from '../../Icon';
+
+import { AlignmentDropdown } from './toolbar/AlignmentDropdown';
+import { BlockTypeDropdown } from './toolbar/BlockTypeDropdown';
+import { LinkPanel } from './toolbar/LinkPanel';
+import { ToolbarButton } from './toolbar/ToolbarButton';
+import { ToolbarDivider } from './toolbar/ToolbarDivider';
+
+const ELEMENT_FORMAT_TYPES = ['left', 'center', 'right', 'justify', 'start', 'end', ''] as const;
+
+const isElementFormatType = (value: string): value is ElementFormatType =>
+  (ELEMENT_FORMAT_TYPES as readonly string[]).includes(value);
+
+const toElementFormatType = (value: string): ElementFormatType =>
+  isElementFormatType(value) ? value : 'left';
+
+export const ToolbarPlugin = () => {
+  const [editor] = useLexicalComposerContext();
+  const [isBold, setIsBold] = useState(false);
+  const [isItalic, setIsItalic] = useState(false);
+  const [isUnderline, setIsUnderline] = useState(false);
+  const [isStrikethrough, setIsStrikethrough] = useState(false);
+  const [isCode, setIsCode] = useState(false);
+  const [isLink, setIsLink] = useState(false);
+  const [blockType, setBlockType] = useState<string>('paragraph');
+  const [alignment, setAlignment] = useState<ElementFormatType>('left');
+  const [isVisible, setIsVisible] = useState(false);
+  const [position, setPosition] = useState<{ top: number; left: number } | null>(null);
+  const toolbarRef = useRef<HTMLDivElement>(null);
+  const isMouseDownRef = useRef(false);
+  const hasSelectionRef = useRef(false);
+
+  const updatePosition = useCallback(() => {
+    const nativeSelection = window.getSelection();
+    if (!nativeSelection || nativeSelection.rangeCount === 0) return;
+    const range = nativeSelection.getRangeAt(0);
+    const rect = range.getBoundingClientRect();
+    if (rect.width > 0) {
+      const toolbarWidth = toolbarRef.current?.offsetWidth ?? 300;
+      setPosition({
+        top: rect.top + window.scrollY - 8,
+        left: Math.max(8, rect.left + window.scrollX + rect.width / 2 - toolbarWidth / 2),
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    const handleMouseDown = () => {
+      isMouseDownRef.current = true;
+    };
+    const handleMouseUp = () => {
+      isMouseDownRef.current = false;
+      if (hasSelectionRef.current) {
+        setIsVisible(true);
+      }
+    };
+    document.addEventListener('mousedown', handleMouseDown);
+    document.addEventListener('mouseup', handleMouseUp);
+    return () => {
+      document.removeEventListener('mousedown', handleMouseDown);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, []);
+
+  const updateToolbar = useCallback(() => {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) {
+      hasSelectionRef.current = false;
+      setIsVisible(false);
+      return;
+    }
+
+    const hasSelection = !selection.isCollapsed() && selection.getTextContent().length > 0;
+    hasSelectionRef.current = hasSelection;
+
+    if (!hasSelection) {
+      setIsVisible(false);
+    } else if (!isMouseDownRef.current) {
+      setIsVisible(true);
+    }
+
+    if (hasSelection) {
+      updatePosition();
+    }
+
+    setIsBold(selection.hasFormat('bold'));
+    setIsItalic(selection.hasFormat('italic'));
+    setIsUnderline(selection.hasFormat('underline'));
+    setIsStrikethrough(selection.hasFormat('strikethrough'));
+    setIsCode(selection.hasFormat('code'));
+
+    const node = selection.anchor.getNode();
+    const parent = node.getParent();
+    setIsLink($isLinkNode(parent) || $isLinkNode(node));
+
+    const blockElement = $getNearestBlockElementAncestorOrThrow(node);
+
+    if ($isListNode(blockElement)) {
+      const listType = blockElement.getListType();
+      setBlockType(listType === 'number' ? 'number' : 'bullet');
+    } else if ($isHeadingNode(blockElement)) {
+      setBlockType(blockElement.getTag());
+    } else if ($isCodeNode(blockElement)) {
+      setBlockType('code');
+    } else if ($isQuoteNode(blockElement)) {
+      setBlockType('quote');
+    } else {
+      setBlockType('paragraph');
+    }
+
+    setAlignment(toElementFormatType(blockElement.getFormatType()));
+  }, [updatePosition]);
+
+  useEffect(() => {
+    const unregisterUpdate = editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        updateToolbar();
+      });
+    });
+
+    return () => {
+      unregisterUpdate();
+    };
+  }, [editor, updateToolbar]);
+
+  if (!isVisible || !position) return null;
+
+  return createPortal(
+    <div
+      ref={toolbarRef}
+      role="toolbar"
+      aria-label="Formatting options"
+      onMouseDown={(e) => e.preventDefault()}
+      style={{ top: position.top, left: position.left }}
+      className="tw-absolute tw-z-[1060] tw-flex tw--translate-y-full tw-items-center tw-gap-0.5 tw-rounded-lg tw-border tw-border-neutral-200 tw-bg-white tw-px-1.5 tw-py-1 tw-shadow-lg"
+    >
+      <BlockTypeDropdown editor={editor} blockType={blockType} />
+
+      <ToolbarDivider />
+
+      <ToolbarButton
+        active={isBold}
+        onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')}
+        tooltip="Bold (Ctrl+B)"
+      >
+        <Icon icon={['far', 'bold']} />
+      </ToolbarButton>
+      <ToolbarButton
+        active={isItalic}
+        onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')}
+        tooltip="Italic (Ctrl+I)"
+      >
+        <Icon icon={['far', 'italic']} />
+      </ToolbarButton>
+      <ToolbarButton
+        active={isUnderline}
+        onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline')}
+        tooltip="Underline (Ctrl+U)"
+      >
+        <Icon icon={['far', 'underline']} />
+      </ToolbarButton>
+      <ToolbarButton
+        active={isStrikethrough}
+        onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')}
+        tooltip="Strikethrough"
+      >
+        <Icon icon={['far', 'strikethrough']} />
+      </ToolbarButton>
+      <ToolbarButton
+        active={isCode}
+        onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code')}
+        tooltip="Inline Code"
+      >
+        <Icon icon={['far', 'code']} />
+      </ToolbarButton>
+
+      <ToolbarDivider />
+
+      <LinkPanel editor={editor} isLink={isLink} />
+
+      <ToolbarDivider />
+
+      <ToolbarButton
+        active={blockType === 'bullet'}
+        onClick={() => {
+          if (blockType === 'bullet') {
+            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+          } else {
+            editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+          }
+        }}
+        tooltip="Bullet List"
+      >
+        <Icon icon={['far', 'list-ul']} />
+      </ToolbarButton>
+      <ToolbarButton
+        active={blockType === 'number'}
+        onClick={() => {
+          if (blockType === 'number') {
+            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+          } else {
+            editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+          }
+        }}
+        tooltip="Numbered List"
+      >
+        <Icon icon={['far', 'list-ol']} />
+      </ToolbarButton>
+
+      <ToolbarDivider />
+
+      <AlignmentDropdown editor={editor} alignment={alignment} />
+
+      <ToolbarDivider />
+
+      <ToolbarButton
+        active={blockType === 'quote'}
+        onClick={() => {
+          editor.update(() => {
+            const selection = $getSelection();
+            if (!$isRangeSelection(selection)) return;
+            const anchorNode = selection.anchor.getNode();
+            const element = $getNearestBlockElementAncestorOrThrow(anchorNode);
+            const newNode = blockType === 'quote' ? $createParagraphNode() : $createQuoteNode();
+            element.getChildren().forEach((child) => newNode.append(child));
+            element.replace(newNode);
+          });
+        }}
+        tooltip="Quote"
+      >
+        <Icon icon={['far', 'block-quote']} />
+      </ToolbarButton>
+      <ToolbarButton
+        active={blockType === 'code'}
+        onClick={() => {
+          editor.update(() => {
+            const selection = $getSelection();
+            if (!$isRangeSelection(selection)) return;
+            const anchorNode = selection.anchor.getNode();
+            const element = $getNearestBlockElementAncestorOrThrow(anchorNode);
+            const newNode = blockType === 'code' ? $createParagraphNode() : $createCodeNode();
+            element.getChildren().forEach((child) => newNode.append(child));
+            element.replace(newNode);
+          });
+        }}
+        tooltip="Code Block"
+      >
+        <Icon icon="square-code" />
+      </ToolbarButton>
+    </div>,
+    document.body,
+  );
+};

package/src/components/MarkdownEditor/plugins/toolbar/AlignmentDropdown.tsx

@@ -0,0 +1,93 @@
+import { useRef } from 'react';
+import type { ComponentProps } from 'react';
+import {
+  $getSelection,
+  $setSelection,
+  type BaseSelection,
+  type ElementFormatType,
+  FORMAT_ELEMENT_COMMAND,
+  type LexicalEditor,
+} from 'lexical';
+
+import { cn } from '../../../../utils';
+import { DropdownMenu } from '../../../DropdownMenu';
+import { Icon } from '../../../Icon';
+import { Tooltip } from '../../../Tooltip';
+
+type IconProp = ComponentProps<typeof Icon>['icon'];
+
+const ALIGNMENT_OPTIONS: { value: ElementFormatType; label: string; icon: IconProp }[] = [
+  { value: 'left', label: 'Left', icon: ['far', 'align-left'] },
+  { value: 'center', label: 'Center', icon: ['far', 'align-center'] },
+  { value: 'right', label: 'Right', icon: ['far', 'align-right'] },
+  { value: 'justify', label: 'Justify', icon: ['far', 'align-justify'] },
+];
+
+const ALIGNMENT_ICONS: Record<string, IconProp> = Object.fromEntries(
+  ALIGNMENT_OPTIONS.map(({ value, icon }) => [value, icon]),
+);
+
+export const AlignmentDropdown = ({
+  editor,
+  alignment,
+}: {
+  editor: LexicalEditor;
+  alignment: ElementFormatType;
+}) => {
+  const savedSelectionRef = useRef<BaseSelection | null>(null);
+
+  const handleOpenChange = (open: boolean) => {
+    if (open) {
+      editor.getEditorState().read(() => {
+        const selection = $getSelection();
+        savedSelectionRef.current = selection ? selection.clone() : null;
+      });
+    }
+  };
+
+  const handleSelect = (align: ElementFormatType) => {
+    // Restore selection and dispatch within the same update so the command sees
+    // the restored selection (otherwise dispatchCommand may race with the queued
+    // $setSelection and apply the format to the wrong block).
+    editor.update(() => {
+      if (savedSelectionRef.current) {
+        $setSelection(savedSelectionRef.current);
+      }
+      editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, align);
+    });
+  };
+
+  return (
+    <DropdownMenu onOpenChange={handleOpenChange}>
+      <Tooltip tooltip="Text alignment" placement="top" triggerAsChild>
+        <DropdownMenu.Trigger asChild>
+          <button
+            type="button"
+            className={cn(
+              'tw-flex tw-h-7 tw-cursor-pointer tw-items-center tw-gap-1 tw-rounded tw-border-0 tw-bg-transparent tw-px-1.5 tw-text-xs tw-text-neutral-600',
+              'hover:tw-bg-neutral-100',
+            )}
+          >
+            <Icon icon={ALIGNMENT_ICONS[alignment] ?? ['far', 'align-left']} fixedWidth />
+            <Icon icon={['fas', 'caret-down']} className="tw-text-[8px]" />
+          </button>
+        </DropdownMenu.Trigger>
+      </Tooltip>
+      <DropdownMenu.Content align="start" className="tw-min-w-32">
+        {ALIGNMENT_OPTIONS.map(({ value, label, icon }) => (
+          <DropdownMenu.Item
+            key={value}
+            onSelect={() => handleSelect(value)}
+            className={cn(
+              'tw-flex tw-items-center tw-gap-2',
+              alignment === value && 'tw-bg-secondary-50 tw-text-secondary-500',
+            )}
+          >
+            <Icon icon={icon} fixedWidth />
+            {label}
+          </DropdownMenu.Item>
+        ))}
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  );
+};

package/src/components/MarkdownEditor/plugins/toolbar/BlockTypeDropdown.tsx

@@ -0,0 +1,133 @@
+import { useRef } from 'react';
+import type { ComponentProps } from 'react';
+import { $createCodeNode } from '@lexical/code';
+import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from '@lexical/list';
+import { $createHeadingNode, $createQuoteNode } from '@lexical/rich-text';
+import { $getNearestBlockElementAncestorOrThrow } from '@lexical/utils';
+import {
+  $createParagraphNode,
+  $getSelection,
+  $isRangeSelection,
+  $setSelection,
+  type BaseSelection,
+  type LexicalEditor,
+} from 'lexical';
+
+import { cn } from '../../../../utils';
+import { DropdownMenu } from '../../../DropdownMenu';
+import { Icon } from '../../../Icon';
+import { Tooltip } from '../../../Tooltip';
+
+type IconProp = ComponentProps<typeof Icon>['icon'];
+
+const BLOCK_TYPE_META = {
+  paragraph: { label: 'Normal', icon: ['far', 'font'] as IconProp, selectable: true },
+  h1: { label: 'Heading 1', icon: ['far', 'h1'] as IconProp, selectable: true },
+  h2: { label: 'Heading 2', icon: ['far', 'h2'] as IconProp, selectable: true },
+  h3: { label: 'Heading 3', icon: ['far', 'h3'] as IconProp, selectable: true },
+  bullet: { label: 'Bullet List', icon: ['far', 'list-ul'] as IconProp, selectable: false },
+  number: { label: 'Numbered List', icon: ['far', 'list-ol'] as IconProp, selectable: false },
+  quote: { label: 'Quote', icon: ['far', 'block-quote'] as IconProp, selectable: false },
+  code: { label: 'Code Block', icon: 'square-code' as IconProp, selectable: false },
+} as const;
+
+type BlockType = keyof typeof BLOCK_TYPE_META;
+
+const BLOCK_TYPE_OPTIONS = (
+  Object.entries(BLOCK_TYPE_META) as [BlockType, (typeof BLOCK_TYPE_META)[BlockType]][]
+)
+  .filter(([, meta]) => meta.selectable)
+  .map(([value, { label, icon }]) => ({ value, label, icon }));
+
+const isBlockType = (value: string): value is BlockType =>
+  Object.prototype.hasOwnProperty.call(BLOCK_TYPE_META, value);
+
+export const BlockTypeDropdown = ({
+  editor,
+  blockType,
+}: {
+  editor: LexicalEditor;
+  blockType: string;
+}) => {
+  const savedSelectionRef = useRef<BaseSelection | null>(null);
+  const currentMeta = isBlockType(blockType) ? BLOCK_TYPE_META[blockType] : null;
+
+  const handleOpenChange = (open: boolean) => {
+    if (open) {
+      editor.getEditorState().read(() => {
+        const selection = $getSelection();
+        savedSelectionRef.current = selection ? selection.clone() : null;
+      });
+    }
+  };
+
+  const handleSelect = (type: BlockType) => {
+    editor.update(() => {
+      if (savedSelectionRef.current) {
+        $setSelection(savedSelectionRef.current);
+      }
+
+      const selection = $getSelection();
+      if (!$isRangeSelection(selection)) return;
+
+      if (type === 'bullet') {
+        editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+        return;
+      }
+      if (type === 'number') {
+        editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+        return;
+      }
+
+      const anchorNode = selection.anchor.getNode();
+      const element = $getNearestBlockElementAncestorOrThrow(anchorNode);
+
+      const newNode =
+        type === 'h1' || type === 'h2' || type === 'h3'
+          ? $createHeadingNode(type)
+          : type === 'quote'
+            ? $createQuoteNode()
+            : type === 'code'
+              ? $createCodeNode()
+              : $createParagraphNode();
+
+      element.getChildren().forEach((child) => newNode.append(child));
+      element.replace(newNode);
+    });
+  };
+
+  return (
+    <DropdownMenu onOpenChange={handleOpenChange}>
+      <Tooltip tooltip="Change block type" placement="top" triggerAsChild>
+        <DropdownMenu.Trigger asChild>
+          <button
+            type="button"
+            className={cn(
+              'tw-flex tw-h-7 tw-cursor-pointer tw-items-center tw-gap-1.5 tw-rounded tw-border-0 tw-bg-transparent tw-px-1.5 tw-text-xs tw-text-neutral-600',
+              'hover:tw-bg-neutral-100',
+            )}
+          >
+            <Icon icon={currentMeta?.icon ?? ['far', 'font']} fixedWidth />
+            {currentMeta?.label ?? 'Normal'}
+            <Icon icon={['fas', 'caret-down']} className="tw-text-[8px]" />
+          </button>
+        </DropdownMenu.Trigger>
+      </Tooltip>
+      <DropdownMenu.Content align="start" className="tw-min-w-40">
+        {BLOCK_TYPE_OPTIONS.map(({ value, label, icon }) => (
+          <DropdownMenu.Item
+            key={value}
+            onSelect={() => handleSelect(value)}
+            className={cn(
+              'tw-flex tw-items-center tw-gap-2',
+              blockType === value && 'tw-bg-secondary-50 tw-text-secondary-500',
+            )}
+          >
+            <Icon icon={icon} fixedWidth />
+            {label}
+          </DropdownMenu.Item>
+        ))}
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  );
+};

package/src/components/MarkdownEditor/plugins/toolbar/LinkPanel.tsx

@@ -0,0 +1,160 @@
+import { useRef, useState } from 'react';
+import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
+import { $createLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
+import {
+  $createTextNode,
+  $getSelection,
+  $isRangeSelection,
+  $setSelection,
+  type BaseSelection,
+  type LexicalEditor,
+} from 'lexical';
+
+import { Button } from '../../../Button';
+import { ButtonGroup } from '../../../ButtonGroup';
+import { FormGroup } from '../../../FormGroup';
+import { Icon } from '../../../Icon';
+import { TextInput } from '../../../Input';
+import { Label } from '../../../Label';
+
+import { ToolbarButton } from './ToolbarButton';
+
+const insertLink = (
+  editor: LexicalEditor,
+  url: string,
+  label: string,
+  savedSelection: BaseSelection | null,
+) => {
+  editor.update(() => {
+    $setSelection(savedSelection);
+    const selection = $getSelection();
+
+    if ($isRangeSelection(selection)) {
+      const selectedText = selection.getTextContent();
+      if (selectedText && label === selectedText) {
+        editor.dispatchCommand(TOGGLE_LINK_COMMAND, url);
+        return;
+      }
+    }
+
+    const linkNode = $createLinkNode(url);
+    const textNode = $createTextNode(label || url);
+    linkNode.append(textNode);
+
+    if ($isRangeSelection(selection)) {
+      selection.insertNodes([linkNode]);
+    }
+  });
+};
+
+export const LinkPanel = ({ editor, isLink }: { editor: LexicalEditor; isLink: boolean }) => {
+  const [open, setOpen] = useState(false);
+  const [url, setUrl] = useState('');
+  const [label, setLabel] = useState('');
+  const savedSelectionRef = useRef<BaseSelection | null>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  const handleOpen = () => {
+    editor.getEditorState().read(() => {
+      const selection = $getSelection();
+      savedSelectionRef.current = selection ? selection.clone() : null;
+
+      if ($isRangeSelection(selection)) {
+        const text = selection.getTextContent();
+        if (text) setLabel(text);
+      }
+    });
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+    setUrl('');
+    setLabel('');
+    savedSelectionRef.current = null;
+    editor.focus();
+  };
+
+  const handleSubmit = () => {
+    const trimmedUrl = url.trim();
+    if (!trimmedUrl) return;
+
+    insertLink(editor, trimmedUrl, label.trim(), savedSelectionRef.current);
+    handleClose();
+  };
+
+  const handleKeyDown = (e: ReactKeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleSubmit();
+    }
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      handleClose();
+    }
+  };
+
+  if (isLink) {
+    return (
+      <ToolbarButton
+        active
+        onClick={() => editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)}
+        tooltip="Remove Link"
+      >
+        <Icon icon={['far', 'link']} />
+      </ToolbarButton>
+    );
+  }
+
+  return (
+    <div className="tw-relative">
+      <ToolbarButton active={open} onClick={handleOpen} tooltip="Insert Link">
+        <Icon icon={['far', 'link']} />
+      </ToolbarButton>
+      {open && (
+        <div
+          ref={panelRef}
+          className="tw-absolute tw-left-0 tw-top-full tw-z-50 tw-mt-1 tw-w-80 tw-rounded-md tw-border tw-border-neutral-200 tw-bg-white tw-p-3 tw-shadow-lg"
+        >
+          <div className="tw-flex tw-flex-col tw-gap-2">
+            <FormGroup>
+              <Label htmlFor="link-label" className="tw-mb-1 tw-text-xs">
+                Label
+              </Label>
+              <TextInput
+                id="link-label"
+                autoFocus
+                placeholder="Link text"
+                value={label}
+                onValueChange={setLabel}
+                onKeyDown={handleKeyDown}
+                variant="secondary"
+              />
+            </FormGroup>
+            <FormGroup>
+              <Label htmlFor="link-url" className="tw-mb-1 tw-text-xs">
+                URL
+              </Label>
+              <TextInput
+                id="link-url"
+                placeholder="https://…"
+                value={url}
+                onValueChange={setUrl}
+                onKeyDown={handleKeyDown}
+                variant="secondary"
+              />
+            </FormGroup>
+            <ButtonGroup>
+              <Button size="small" variant="outline" onClick={handleClose}>
+                Cancel
+              </Button>
+              <Button size="small" onClick={handleSubmit} disabled={!url.trim()}>
+                Add link
+              </Button>
+            </ButtonGroup>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/MarkdownEditor/plugins/toolbar/ToolbarButton.tsx

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+
+import { cn } from '../../../../utils';
+import { Tooltip } from '../../../Tooltip';
+
+export const ToolbarButton = ({
+  active,
+  disabled,
+  onClick,
+  tooltip,
+  children,
+  className: extraClassName,
+}: {
+  active?: boolean;
+  disabled?: boolean;
+  onClick: () => void;
+  tooltip: ReactNode;
+  children: ReactNode;
+  className?: string;
+}) => (
+  <Tooltip tooltip={tooltip} placement="top" triggerAsChild>
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={onClick}
+      className={cn(
+        'tw-flex tw-h-7 tw-min-w-7 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded tw-border-0 tw-bg-transparent tw-px-1 tw-text-xs tw-text-neutral-600',
+        'hover:tw-bg-neutral-100 disabled:tw-cursor-not-allowed disabled:tw-opacity-30',
+        active && 'tw-bg-secondary-100 tw-text-secondary-500',
+        extraClassName,
+      )}
+    >
+      {children}
+    </button>
+  </Tooltip>
+);

package/src/components/MarkdownEditor/plugins/toolbar/ToolbarDivider.tsx

@@ -0,0 +1 @@
+export const ToolbarDivider = () => <div className="tw-mx-0.5 tw-h-5 tw-w-px tw-bg-neutral-200" />;