@yancyyu/openhermit 1.5.8

package/src/renderer/components/ui/tabs.tsx

@@ -0,0 +1,52 @@
+/* eslint-disable react/jsx-props-no-spreading -- Standard shadcn pattern: forward remaining props to underlying elements */
+import * as React from 'react';
+
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from '@renderer/lib/utils';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ComponentRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'inline-flex h-9 items-center justify-center rounded-lg bg-[var(--color-surface-raised)] p-1 text-[var(--color-text-muted)]',
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ComponentRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[var(--color-surface)] data-[state=active]:text-[var(--color-text)] data-[state=active]:shadow-sm',
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ComponentRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn('mt-2 focus-visible:outline-none', className)}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };
+/* eslint-enable react/jsx-props-no-spreading -- Re-enable after shadcn component */

package/src/renderer/components/ui/textarea.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import { cn } from '@renderer/lib/utils';
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<'textarea'>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'flex min-h-[60px] w-full rounded-md border border-[var(--color-border)] bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-[var(--color-text-muted)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--color-border-emphasis)] disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = 'Textarea';
+
+export { Textarea };

package/src/renderer/components/ui/tiptap/TiptapBubbleMenu.tsx

@@ -0,0 +1,75 @@
+import { cn } from '@renderer/lib/utils';
+import { useCurrentEditor, useEditorState } from '@tiptap/react';
+import { BubbleMenu } from '@tiptap/react/menus';
+import { Bold, Code, Italic, Strikethrough } from 'lucide-react';
+
+export const TiptapBubbleMenu = () => {
+  const { editor } = useCurrentEditor();
+
+  const state = useEditorState({
+    editor,
+    selector: ({ editor: e }) => {
+      if (!e) return null;
+      return {
+        isBold: e.isActive('bold'),
+        isItalic: e.isActive('italic'),
+        isStrike: e.isActive('strike'),
+        isCode: e.isActive('code'),
+      };
+    },
+  });
+
+  if (!editor || !state) return null;
+
+  const btnClass = (active: boolean) =>
+    cn(
+      'rounded p-1 transition-colors text-[var(--color-text-muted)]',
+      'hover:bg-[var(--color-surface-raised)] hover:text-[var(--color-text-secondary)]',
+      active && 'bg-[var(--color-surface-raised)] text-[var(--color-text)]'
+    );
+
+  return (
+    <BubbleMenu
+      editor={editor}
+      options={{ placement: 'top', offset: 8 }}
+      className={cn(
+        'flex items-center gap-0.5 rounded-lg p-1 shadow-lg',
+        'border border-[var(--color-border-emphasis)]',
+        'bg-[var(--color-surface-overlay)]'
+      )}
+    >
+      <button
+        type="button"
+        className={btnClass(state.isBold)}
+        onClick={() => editor.chain().focus().toggleBold().run()}
+        aria-label="Bold"
+      >
+        <Bold size={12} />
+      </button>
+      <button
+        type="button"
+        className={btnClass(state.isItalic)}
+        onClick={() => editor.chain().focus().toggleItalic().run()}
+        aria-label="Italic"
+      >
+        <Italic size={12} />
+      </button>
+      <button
+        type="button"
+        className={btnClass(state.isStrike)}
+        onClick={() => editor.chain().focus().toggleStrike().run()}
+        aria-label="Strike"
+      >
+        <Strikethrough size={12} />
+      </button>
+      <button
+        type="button"
+        className={btnClass(state.isCode)}
+        onClick={() => editor.chain().focus().toggleCode().run()}
+        aria-label="Code"
+      >
+        <Code size={12} />
+      </button>
+    </BubbleMenu>
+  );
+};

package/src/renderer/components/ui/tiptap/TiptapEditor.tsx

@@ -0,0 +1,73 @@
+import './tiptapStyles.css';
+
+import { useMemo } from 'react';
+
+import { cn } from '@renderer/lib/utils';
+import { EditorContent, EditorContext } from '@tiptap/react';
+
+import { TiptapBubbleMenu } from './TiptapBubbleMenu';
+import { TiptapToolbar } from './TiptapToolbar';
+import { useTiptapEditor } from './useTiptapEditor';
+
+import type { TiptapEditorProps } from './types';
+
+export const TiptapEditor = ({
+  content,
+  onChange,
+  placeholder,
+  editable = true,
+  minHeight,
+  maxHeight,
+  autoFocus = false,
+  toolbar = true,
+  bubbleMenu = true,
+  extensions,
+  className,
+  disabled = false,
+}: TiptapEditorProps) => {
+  const isEditable = editable && !disabled;
+  const { editor } = useTiptapEditor({
+    content,
+    onChange,
+    editable: isEditable,
+    autoFocus,
+    placeholder,
+    extensions,
+  });
+
+  // EditorContext.Provider — v3 паттерн для sharing editor instance
+  // TiptapToolbar и TiptapBubbleMenu получают editor через useCurrentEditor()
+  const providerValue = useMemo(() => ({ editor }), [editor]);
+
+  if (!editor) return null;
+
+  const showToolbar = toolbar !== false && isEditable;
+  const showBubble = bubbleMenu && isEditable;
+  const toolbarConfig = typeof toolbar === 'object' ? toolbar : undefined;
+
+  return (
+    <EditorContext.Provider value={providerValue}>
+      <div
+        className={cn(
+          'tiptap-editor-wrapper rounded-md border border-[var(--color-border)] bg-transparent',
+          disabled && 'cursor-not-allowed opacity-50',
+          className
+        )}
+      >
+        {showToolbar && <TiptapToolbar config={toolbarConfig} />}
+
+        <div
+          className="overflow-y-auto px-3 py-2"
+          style={{
+            minHeight: minHeight ?? '60px',
+            maxHeight: maxHeight ?? 'none',
+          }}
+        >
+          <EditorContent editor={editor} />
+        </div>
+
+        {showBubble && <TiptapBubbleMenu />}
+      </div>
+    </EditorContext.Provider>
+  );
+};

package/src/renderer/components/ui/tiptap/TiptapToolbar.tsx

@@ -0,0 +1,269 @@
+import { cn } from '@renderer/lib/utils';
+import { useCurrentEditor, useEditorState } from '@tiptap/react';
+import {
+  Bold,
+  Code,
+  FileCode2,
+  Heading1,
+  Heading2,
+  Heading3,
+  Italic,
+  List,
+  ListOrdered,
+  Minus,
+  Quote,
+  Redo2,
+  Strikethrough,
+  Undo2,
+} from 'lucide-react';
+
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
+
+import type { ToolbarConfig } from './types';
+
+interface TiptapToolbarProps {
+  config?: ToolbarConfig;
+}
+
+const ToolbarButton = ({
+  icon,
+  active,
+  disabled,
+  onClick,
+  label,
+}: {
+  icon: React.ReactNode;
+  active?: boolean;
+  disabled?: boolean;
+  onClick: () => void;
+  label: string;
+}) => {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={onClick}
+          disabled={disabled}
+          aria-label={label}
+          aria-pressed={active}
+          className={cn(
+            'rounded p-1.5 transition-colors',
+            'text-[var(--color-text-muted)]',
+            'hover:bg-[var(--color-surface-raised)] hover:text-[var(--color-text-secondary)]',
+            active && 'bg-[var(--color-surface-raised)] text-[var(--color-text)]',
+            disabled &&
+              'cursor-not-allowed opacity-30 hover:bg-transparent hover:text-[var(--color-text-muted)]'
+          )}
+        >
+          {icon}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="top" className="text-xs">
+        {label}
+      </TooltipContent>
+    </Tooltip>
+  );
+};
+
+const Divider = () => {
+  return <div className="mx-0.5 h-4 w-px bg-[var(--color-border)]" />;
+};
+
+export const TiptapToolbar = ({ config }: TiptapToolbarProps) => {
+  const { editor } = useCurrentEditor();
+
+  // useEditorState — КРИТИЧНО для v3!
+  // Без этого active state НЕ обновляется (shouldRerenderOnTransaction: false)
+  const state = useEditorState({
+    editor,
+    selector: ({ editor: e }) => {
+      if (!e) return null;
+      return {
+        isBold: e.isActive('bold'),
+        isItalic: e.isActive('italic'),
+        isStrike: e.isActive('strike'),
+        isCode: e.isActive('code'),
+        isCodeBlock: e.isActive('codeBlock'),
+        isBulletList: e.isActive('bulletList'),
+        isOrderedList: e.isActive('orderedList'),
+        isBlockquote: e.isActive('blockquote'),
+        headingLevel: ([1, 2, 3] as const).find((l) => e.isActive('heading', { level: l })) ?? 0,
+        canUndo: e.can().undo(),
+        canRedo: e.can().redo(),
+      };
+    },
+  });
+
+  if (!editor || !state) return null;
+
+  const c = {
+    bold: true,
+    italic: true,
+    strike: true,
+    code: true,
+    codeBlock: true,
+    heading: { levels: [1, 2, 3] as (1 | 2 | 3)[] },
+    bulletList: true,
+    orderedList: true,
+    blockquote: true,
+    horizontalRule: true,
+    undoRedo: true,
+    ...config,
+  };
+  const headingLevels = c.heading === false ? [] : (c.heading?.levels ?? [1, 2, 3]);
+
+  const groups: React.ReactNode[][] = [];
+
+  // Group 1: Text formatting
+  const textGroup: React.ReactNode[] = [];
+  if (c.bold)
+    textGroup.push(
+      <ToolbarButton
+        key="bold"
+        icon={<Bold size={14} />}
+        active={state.isBold}
+        onClick={() => editor.chain().focus().toggleBold().run()}
+        label="Bold (⌘B)"
+      />
+    );
+  if (c.italic)
+    textGroup.push(
+      <ToolbarButton
+        key="italic"
+        icon={<Italic size={14} />}
+        active={state.isItalic}
+        onClick={() => editor.chain().focus().toggleItalic().run()}
+        label="Italic (⌘I)"
+      />
+    );
+  if (c.strike)
+    textGroup.push(
+      <ToolbarButton
+        key="strike"
+        icon={<Strikethrough size={14} />}
+        active={state.isStrike}
+        onClick={() => editor.chain().focus().toggleStrike().run()}
+        label="Strikethrough (⌘⇧S)"
+      />
+    );
+  if (textGroup.length) groups.push(textGroup);
+
+  // Group 2: Code
+  const codeGroup: React.ReactNode[] = [];
+  if (c.code)
+    codeGroup.push(
+      <ToolbarButton
+        key="code"
+        icon={<Code size={14} />}
+        active={state.isCode}
+        onClick={() => editor.chain().focus().toggleCode().run()}
+        label="Code (⌘E)"
+      />
+    );
+  if (c.codeBlock)
+    codeGroup.push(
+      <ToolbarButton
+        key="codeBlock"
+        icon={<FileCode2 size={14} />}
+        active={state.isCodeBlock}
+        onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+        label="Code Block (⌘⌥C)"
+      />
+    );
+  if (codeGroup.length) groups.push(codeGroup);
+
+  // Group 3: Headings
+  const headingIcons = { 1: Heading1, 2: Heading2, 3: Heading3 } as const;
+  const headingGroup: React.ReactNode[] = headingLevels.map((level) => {
+    const Icon = headingIcons[level];
+    return (
+      <ToolbarButton
+        key={`h${level}`}
+        icon={<Icon size={14} />}
+        active={state.headingLevel === level}
+        onClick={() => editor.chain().focus().toggleHeading({ level }).run()}
+        label={`Heading ${level}`}
+      />
+    );
+  });
+  if (headingGroup.length) groups.push(headingGroup);
+
+  // Group 4: Lists
+  const listGroup: React.ReactNode[] = [];
+  if (c.bulletList)
+    listGroup.push(
+      <ToolbarButton
+        key="bullet"
+        icon={<List size={14} />}
+        active={state.isBulletList}
+        onClick={() => editor.chain().focus().toggleBulletList().run()}
+        label="Bullet List (⌘⇧8)"
+      />
+    );
+  if (c.orderedList)
+    listGroup.push(
+      <ToolbarButton
+        key="ordered"
+        icon={<ListOrdered size={14} />}
+        active={state.isOrderedList}
+        onClick={() => editor.chain().focus().toggleOrderedList().run()}
+        label="Ordered List (⌘⇧7)"
+      />
+    );
+  if (listGroup.length) groups.push(listGroup);
+
+  // Group 5: Blocks
+  const blockGroup: React.ReactNode[] = [];
+  if (c.blockquote)
+    blockGroup.push(
+      <ToolbarButton
+        key="quote"
+        icon={<Quote size={14} />}
+        active={state.isBlockquote}
+        onClick={() => editor.chain().focus().toggleBlockquote().run()}
+        label="Blockquote (⌘⇧B)"
+      />
+    );
+  if (c.horizontalRule)
+    blockGroup.push(
+      <ToolbarButton
+        key="hr"
+        icon={<Minus size={14} />}
+        onClick={() => editor.chain().focus().setHorizontalRule().run()}
+        label="Horizontal Rule"
+      />
+    );
+  if (blockGroup.length) groups.push(blockGroup);
+
+  // Group 6: Undo/Redo
+  if (c.undoRedo) {
+    groups.push([
+      <ToolbarButton
+        key="undo"
+        icon={<Undo2 size={14} />}
+        disabled={!state.canUndo}
+        onClick={() => editor.chain().focus().undo().run()}
+        label="Undo (⌘Z)"
+      />,
+      <ToolbarButton
+        key="redo"
+        icon={<Redo2 size={14} />}
+        disabled={!state.canRedo}
+        onClick={() => editor.chain().focus().redo().run()}
+        label="Redo (⌘⇧Z)"
+      />,
+    ]);
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-0.5 border-b border-[var(--color-border)] px-1.5 py-1">
+      {groups.map((group, i) => (
+        <div key={i} className="contents">
+          {i > 0 && <Divider />}
+          {group}
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/renderer/components/ui/tiptap/index.ts

@@ -0,0 +1,3 @@
+export { EDITOR_PRESETS } from './presets';
+export { TiptapEditor } from './TiptapEditor';
+export type { EditorPreset, TiptapEditorProps, ToolbarConfig } from './types';

package/src/renderer/components/ui/tiptap/presets.ts

@@ -0,0 +1,46 @@
+import type { TiptapEditorProps } from './types';
+
+export const EDITOR_PRESETS = {
+  full: {
+    toolbar: true,
+    bubbleMenu: true,
+    minHeight: '120px',
+    maxHeight: '400px',
+  },
+  compact: {
+    toolbar: {
+      bold: true,
+      italic: true,
+      strike: true,
+      code: true,
+      bulletList: true,
+      orderedList: true,
+      undoRedo: true,
+      codeBlock: false,
+      heading: false,
+      blockquote: false,
+      horizontalRule: false,
+    },
+    bubbleMenu: true,
+    minHeight: '60px',
+    maxHeight: '200px',
+  },
+  minimal: {
+    toolbar: {
+      bold: true,
+      italic: true,
+      code: true,
+      strike: false,
+      codeBlock: false,
+      heading: false,
+      bulletList: false,
+      orderedList: false,
+      blockquote: false,
+      horizontalRule: false,
+      undoRedo: false,
+    },
+    bubbleMenu: false,
+    minHeight: '40px',
+    maxHeight: '120px',
+  },
+} as const satisfies Record<string, Partial<TiptapEditorProps>>;