@keboola/design 2.0.0 → 2.1.0

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

@@ -1,142 +0,0 @@
-import { useRef } 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 {
-  ChevronDown,
-  Heading1,
-  Heading2,
-  Heading3,
-  List as ListIcon,
-  ListOrdered,
-  type LucideIcon,
-  Quote,
-  SquareCode,
-  Type,
-} from '../../../../icons';
-import { cn } from '../../../../utils';
-import { DropdownMenu } from '../../../DropdownMenu';
-import { Tooltip } from '../../../Tooltip';
-
-const BLOCK_TYPE_META = {
-  paragraph: { label: 'Normal', icon: Type satisfies LucideIcon, selectable: true },
-  h1: { label: 'Heading 1', icon: Heading1 satisfies LucideIcon, selectable: true },
-  h2: { label: 'Heading 2', icon: Heading2 satisfies LucideIcon, selectable: true },
-  h3: { label: 'Heading 3', icon: Heading3 satisfies LucideIcon, selectable: true },
-  bullet: { label: 'Bullet List', icon: ListIcon satisfies LucideIcon, selectable: false },
-  number: { label: 'Numbered List', icon: ListOrdered satisfies LucideIcon, selectable: false },
-  quote: { label: 'Quote', icon: Quote satisfies LucideIcon, selectable: false },
-  code: { label: 'Code Block', icon: SquareCode satisfies LucideIcon, 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 CurrentBlockIcon = currentMeta?.icon ?? Type;
-
-  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',
-            )}
-          >
-            <CurrentBlockIcon className="tw-size-4" />
-            {currentMeta?.label ?? 'Normal'}
-            <ChevronDown className="tw-size-3" />
-          </button>
-        </DropdownMenu.Trigger>
-      </Tooltip>
-      <DropdownMenu.Content align="start" className="tw-min-w-40">
-        {BLOCK_TYPE_OPTIONS.map(({ value, label, icon: IconComp }) => (
-          <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',
-            )}
-          >
-            <IconComp className="tw-size-4" />
-            {label}
-          </DropdownMenu.Item>
-        ))}
-      </DropdownMenu.Content>
-    </DropdownMenu>
-  );
-};

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

@@ -1,160 +0,0 @@
-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 { Link as LinkIcon } from '../../../../icons';
-import { Button } from '../../../Button';
-import { ButtonGroup } from '../../../ButtonGroup';
-import { FormGroup } from '../../../FormGroup';
-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"
-      >
-        <LinkIcon className="tw-size-4" />
-      </ToolbarButton>
-    );
-  }
-
-  return (
-    <div className="tw-relative">
-      <ToolbarButton active={open} onClick={handleOpen} tooltip="Insert Link">
-        <LinkIcon className="tw-size-4" />
-      </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

@@ -1,36 +0,0 @@
-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

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

package/src/components/MarkdownEditor/theme.ts

@@ -1,39 +0,0 @@
-import type { EditorThemeClasses } from 'lexical';
-
-/**
- * Lexical editor theme — maps node types to CSS classes.
- * The editor container uses `tw-prose` so semantic elements (headings, lists, blockquotes, etc.)
- * are styled by Tailwind Typography. We only need explicit classes for text formatting
- * (bold, italic, etc.) because Lexical renders those as `<span>` elements.
- */
-export const editorTheme: EditorThemeClasses = {
-  link: 'tw-cursor-pointer !tw-text-secondary-500 tw-underline',
-  text: {
-    bold: 'tw-font-bold',
-    italic: 'tw-italic',
-    strikethrough: 'tw-line-through',
-    underline: 'tw-underline',
-    code: 'tw-rounded tw-bg-neutral-100 tw-px-1 tw-py-0.5 tw-font-mono tw-text-[0.85em]',
-  },
-  list: {
-    ol: '!tw-list-decimal',
-    ul: '!tw-list-disc',
-    checklist: '!tw-list-none !tw-pl-0',
-    listitemChecked: [
-      'tw-relative !tw-pl-6 tw-list-none tw-outline-none tw-line-through tw-text-neutral-400',
-      'before:tw-content-[""] before:tw-absolute before:tw-left-0 before:tw-top-[3px]',
-      'before:tw-size-4 before:tw-rounded before:tw-border before:tw-border-solid',
-      'before:tw-bg-secondary-500 before:tw-border-secondary-500 before:tw-cursor-pointer',
-      'after:tw-content-[""] after:tw-absolute after:tw-left-[5.5px] after:tw-top-[5.5px]',
-      'after:tw-w-1 after:tw-h-2 after:tw-border-white after:tw-border-solid',
-      'after:tw-border-r-[1.5px] after:tw-border-b-[1.5px] after:tw-border-t-0 after:tw-border-l-0',
-      'after:tw-rotate-45',
-    ].join(' '),
-    listitemUnchecked: [
-      'tw-relative !tw-pl-6 tw-list-none tw-outline-none',
-      'before:tw-content-[""] before:tw-absolute before:tw-left-0 before:tw-top-[3px]',
-      'before:tw-size-4 before:tw-rounded before:tw-border before:tw-border-solid',
-      'before:tw-border-neutral-200 before:tw-bg-white before:tw-cursor-pointer',
-    ].join(' '),
-  },
-};

package/src/components/MarkdownEditor/transformers.ts

@@ -1,189 +0,0 @@
-import type {
-  ElementTransformer,
-  MultilineElementTransformer,
-  TextMatchTransformer,
-  Transformer,
-} from '@lexical/markdown';
-import { CHECK_LIST, TRANSFORMERS } from '@lexical/markdown';
-import {
-  $createHorizontalRuleNode,
-  $isHorizontalRuleNode,
-  HorizontalRuleNode,
-} from '@lexical/react/LexicalHorizontalRuleNode';
-
-import { $createImageNode, $isImageNode, ImageNode } from './nodes/ImageNode';
-import { $createMermaidNode, $isMermaidNode, MermaidNode } from './nodes/MermaidNode';
-
-/** Markdown image: `![alt](src)` */
-const IMAGE: TextMatchTransformer = {
-  dependencies: [ImageNode],
-  export: (node) => {
-    if (!$isImageNode(node)) return null;
-    return `![${node.getAlt()}](${node.getSrc()})`;
-  },
-  importRegExp: /!\[([^\]]*)\]\(([^)]+)\)/,
-  regExp: /!\[([^\]]*)\]\(([^)]+)\)$/,
-  replace: (textNode, match) => {
-    const [, alt = '', src = ''] = match;
-    const imageNode = $createImageNode(src, alt);
-    textNode.replace(imageNode);
-  },
-  trigger: ')',
-  type: 'text-match',
-};
-
-/** Horizontal rule: `---`, `***`, or `___` */
-const HORIZONTAL_RULE: ElementTransformer = {
-  dependencies: [HorizontalRuleNode],
-  export: (node) => {
-    return $isHorizontalRuleNode(node) ? '---' : null;
-  },
-  regExp: /^(---|\*\*\*|___)$/,
-  replace: (parentNode) => {
-    const node = $createHorizontalRuleNode();
-    parentNode.replace(node);
-  },
-  type: 'element',
-};
-
-/** Fenced mermaid block: ` ```mermaid ... ``` ` → MermaidNode (rendered as diagram) */
-const MERMAID: MultilineElementTransformer = {
-  dependencies: [MermaidNode],
-  export: (node) => {
-    if (!$isMermaidNode(node)) return null;
-    return '```mermaid\n' + node.getCode() + '\n```';
-  },
-  regExpStart: /^[ \t]*(`{3,})mermaid(?:\s.*)?$/,
-  regExpEnd: {
-    optional: true,
-    regExp: /^[ \t]*`{3,}$/,
-  },
-  replace: (rootNode, _children, _startMatch, _endMatch, linesInBetween) => {
-    if (!linesInBetween) return;
-    const code = linesInBetween.join('\n').trim();
-    if (code) {
-      rootNode.append($createMermaidNode(code));
-    }
-  },
-  handleImportAfterStartMatch: ({
-    lines,
-    rootNode,
-    startLineIndex,
-    startMatch,
-  }): [boolean, number] => {
-    const fence = startMatch[1];
-    if (!fence) return [false, startLineIndex];
-    const fenceLength = fence.trim().length;
-    const endRegex = new RegExp(`^[ \\t]*\`{${fenceLength},}$`);
-
-    for (let i = startLineIndex + 1; i < lines.length; i++) {
-      if (endRegex.test(lines[i] ?? '')) {
-        const code = lines
-          .slice(startLineIndex + 1, i)
-          .join('\n')
-          .trim();
-        if (code) {
-          rootNode.append($createMermaidNode(code));
-        }
-        return [true, i];
-      }
-    }
-
-    // No closing fence — consume remaining lines
-    const code = lines
-      .slice(startLineIndex + 1)
-      .join('\n')
-      .trim();
-    if (code) {
-      rootNode.append($createMermaidNode(code));
-    }
-    return [true, lines.length - 1];
-  },
-  type: 'multiline-element',
-};
-
-/**
- * Custom transformers = our additions + built-in Lexical transformers.
- * MERMAID is placed before TRANSFORMERS so it intercepts ` ```mermaid ``` ` before the generic CODE transformer.
- * IMAGE is placed before built-in LINK to prevent `![alt](url)` from being parsed as `!` + link.
- */
-export const CUSTOM_TRANSFORMERS: Transformer[] = [
-  IMAGE,
-  HORIZONTAL_RULE,
-  CHECK_LIST,
-  MERMAID,
-  ...TRANSFORMERS,
-];
-
-/**
- * Inline-only subset for `singleLine` mode: keeps text-format (bold/italic/code/strike)
- * and text-match (links) transformers; drops every element / multiline-element transformer
- * (headings, lists, HR, code blocks, mermaid). Used for inline-editable titles where the
- * caller doesn't want block-level markdown syntax to "promote" a line.
- */
-export const SINGLE_LINE_TRANSFORMERS: Transformer[] = CUSTOM_TRANSFORMERS.filter(
-  (t) => t.type === 'text-format' || t.type === 'text-match',
-);
-
-// --- Table pre/post-processing ---
-// GFM tables can't round-trip through Lexical's markdown (no built-in table transformer).
-// We wrap them in fenced code blocks on import and unwrap on export to preserve them exactly.
-
-const TABLE_FENCE_LANG = '__kbc_table__';
-
-const isTableLine = (line: string): boolean => {
-  const trimmed = line.trim();
-  return trimmed.startsWith('|') && trimmed.endsWith('|');
-};
-
-const CODE_FENCE_REGEX = /^[ \t]*`{3,}/;
-
-/** Wrap GFM tables in code fences so they survive Lexical's markdown round-trip. */
-export const preprocessMarkdown = (markdown: string): string => {
-  const lines = markdown.split('\n');
-  const result: string[] = [];
-  let tableLines: string[] = [];
-  let insideCodeFence = false;
-
-  const flushTable = () => {
-    if (tableLines.length >= 2) {
-      result.push(`\`\`\`${TABLE_FENCE_LANG}`);
-      result.push(...tableLines);
-      result.push('```');
-    } else {
-      // Single pipe line isn't a table — keep as-is
-      result.push(...tableLines);
-    }
-    tableLines = [];
-  };
-
-  for (const line of lines) {
-    if (CODE_FENCE_REGEX.test(line)) {
-      if (tableLines.length > 0) flushTable();
-      insideCodeFence = !insideCodeFence;
-      result.push(line);
-      continue;
-    }
-
-    if (insideCodeFence) {
-      result.push(line);
-      continue;
-    }
-
-    if (isTableLine(line)) {
-      tableLines.push(line);
-    } else {
-      if (tableLines.length > 0) flushTable();
-      result.push(line);
-    }
-  }
-  if (tableLines.length > 0) flushTable();
-
-  return result.join('\n');
-};
-
-/** Unwrap code-fenced tables back to raw GFM table markdown. */
-export const postprocessMarkdown = (markdown: string): string => {
-  const regex = new RegExp(`\`\`\`${TABLE_FENCE_LANG}\\n([\\s\\S]*?)\\n\`\`\``, 'g');
-  return markdown.replace(regex, '$1');
-};

package/src/components/MarkedText/MarkedText.stories.tsx

@@ -1,46 +0,0 @@
-import { useState } from 'react';
-import type { ComponentProps } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { TextInput } from '../Input';
-
-import { MarkedText } from './MarkedText';
-
-export default {
-  component: MarkedText,
-  args: {
-    source: 'This is a text with marked words.',
-    mark: 'marked',
-  },
-} satisfies Meta<typeof MarkedText>;
-
-type Story = StoryObj<typeof MarkedText>;
-
-export const Default: Story = {};
-
-const MarkedTextDemo = (props: ComponentProps<typeof MarkedText>) => {
-  const [search, setSearch] = useState('');
-  return (
-    <div className="tw-flex tw-flex-col tw-gap-4">
-      <TextInput
-        value={search}
-        placeholder="Search..."
-        onValueChange={setSearch}
-        variant="secondary"
-      />
-      <MarkedText {...props} mark={search} />
-    </div>
-  );
-};
-
-export const WithInput: Story = {
-  args: {
-    source:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisi vel consectetur interdum, nisl nunc egestas nunc, vitae tincidunt nisl nunc euismod nunc. Sed euismod, nisi vel consectetur interdum, nisl nunc egestas nunc, vitae tincidunt nisl nunc euismod nunc.\n' +
-      'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n' +
-      'Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.\n' +
-      'Sed porttitor lectus nibh. Nulla porttitor accumsan tincidunt. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur aliquet quam id dui posuere blandit. Nulla quis lorem ut libero malesuada feugiat.\n' +
-      'Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Vivamus suscipit tortor eget felis porttitor volutpat.',
-  },
-  render: MarkedTextDemo,
-};

package/src/components/MarkedText/MarkedText.tsx

@@ -1,36 +0,0 @@
-import { useMemo } from 'react';
-import type { ComponentProps, ElementRef, Ref } from 'react';
-
-import { createMarkedParts } from './utils';
-
-type Props = {
-  source: string;
-  className?: string;
-  mark?: string;
-  isCaseSensitive?: boolean;
-} & ComponentProps<'span'>;
-
-export const MarkedText = ({
-  ref,
-  source,
-  mark,
-  isCaseSensitive = false,
-  ...spanProps
-}: Props & { ref?: Ref<ElementRef<'span'>> }) => {
-  const parts = useMemo(
-    () =>
-      createMarkedParts({
-        mark,
-        source,
-        isCaseSensitive,
-      }),
-    [isCaseSensitive, mark, source],
-  );
-
-  return (
-    <span {...spanProps} ref={ref}>
-      {/* oxlint-disable-next-line react/no-array-index-key */}
-      {parts.map(({ isMark, part }, index) => (isMark ? <mark key={index}>{part}</mark> : part))}
-    </span>
-  );
-};

package/src/components/MarkedText/index.ts

@@ -1 +0,0 @@
-export { MarkedText } from './MarkedText';