@eightyfourthousand/lib-editing 2026.3.0

package/src/lib/components/editor/menus/selectors/NodeSelector.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+import {
+  Button,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@eightyfourthousand/design-system';
+import { Editor } from '@tiptap/core';
+import { useEditorState } from '@tiptap/react';
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  Heading1,
+  Heading2,
+  Heading3,
+  LetterTextIcon,
+  List,
+  ListOrdered,
+  LucideIcon,
+  QuoteIcon,
+} from 'lucide-react';
+
+interface SelectorResult {
+  isParagraph: boolean;
+  isHeading1: boolean;
+  isHeading2: boolean;
+  isHeading3: boolean;
+  isBulletList: boolean;
+  isOrderedList: boolean;
+  isBlockquote: boolean;
+}
+
+interface MenuItem {
+  name: string;
+  icon: LucideIcon;
+  onClick: (editor: Editor) => void;
+  isActive: (state: SelectorResult) => boolean;
+}
+
+const items: MenuItem[] = [
+  {
+    name: 'Text',
+    icon: LetterTextIcon,
+    onClick: (editor) =>
+      editor.chain().focus().toggleNode('paragraph', 'paragraph').run(),
+    isActive: (state) =>
+      state.isParagraph && !state.isBulletList && !state.isOrderedList,
+  },
+  {
+    name: 'Heading 1',
+    icon: Heading1,
+    onClick: (editor) =>
+      editor.chain().focus().toggleHeading({ level: 1 }).run(),
+    isActive: (state) => state.isHeading1,
+  },
+  {
+    name: 'Heading 2',
+    icon: Heading2,
+    onClick: (editor) =>
+      editor.chain().focus().toggleHeading({ level: 2 }).run(),
+    isActive: (state) => state.isHeading2,
+  },
+  {
+    name: 'Heading 3',
+    icon: Heading3,
+    onClick: (editor) =>
+      editor.chain().focus().toggleHeading({ level: 3 }).run(),
+    isActive: (state) => state.isHeading3,
+  },
+  {
+    name: 'Bullet List',
+    icon: List,
+    onClick: (editor) => editor.chain().focus().toggleBulletList().run(),
+    isActive: (state) => state.isBulletList,
+  },
+  {
+    name: 'Numbered List',
+    icon: ListOrdered,
+    onClick: (editor) => editor.chain().focus().toggleOrderedList().run(),
+    isActive: (state) => state.isOrderedList,
+  },
+  {
+    name: 'Quote',
+    icon: QuoteIcon,
+    onClick: (editor) =>
+      editor
+        .chain()
+        .focus()
+        .toggleNode('paragraph', 'paragraph')
+        .toggleBlockquote()
+        .run(),
+    isActive: (state) => state.isBlockquote,
+  },
+];
+
+export const NodeSelector = ({ editor }: { editor: Editor }) => {
+  const editorState = useEditorState<SelectorResult>({
+    editor,
+    selector: (instance) => ({
+      isParagraph: instance.editor.isActive('paragraph'),
+      isHeading1: instance.editor.isActive('heading', { level: 1 }),
+      isHeading2: instance.editor.isActive('heading', { level: 2 }),
+      isHeading3: instance.editor.isActive('heading', { level: 3 }),
+      isBulletList: instance.editor.isActive('bulletList'),
+      isOrderedList: instance.editor.isActive('orderedList'),
+      isBlockquote: instance.editor.isActive('blockquote'),
+    }),
+  });
+
+  const activeItems = items.filter((item) => item.isActive(editorState));
+
+  const name =
+    activeItems.length > 1 ? 'Multiple' : (activeItems.pop()?.name ?? 'Text');
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="ghost" className="rounded-none">
+          <span className="whitespace-nowrap text-sm me-2">{name}</span>
+          <ChevronDownIcon className="size-3" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-48 p-1 shadow-xl" align="start" noPortal>
+        {items.map((item, i) => {
+          return (
+            <div
+              key={i}
+              onClick={() => item.onClick(editor)}
+              className="flex items-center text-sm rounded-md hover:bg-muted px-2 py-1.5 cursor-pointer"
+            >
+              <item.icon className="size-3.5 me-2" />
+              <span>{item.name}</span>
+              <div className="flex-1"></div>
+              {item.isActive(editorState) && (
+                <CheckIcon className="size-3.5 ms-4" />
+              )}
+            </div>
+          );
+        })}
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/lib/components/editor/menus/selectors/ParagraphButtons.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { cn } from '@eightyfourthousand/lib-utils';
+import { Editor } from '@tiptap/core';
+import { useEditorState } from '@tiptap/react';
+import { Button } from '@eightyfourthousand/design-system';
+import { ArrowUpToLineIcon, IndentIcon } from 'lucide-react';
+
+interface SelectorResult {
+  hasIndent: boolean;
+  hasLeadingSpace: boolean;
+}
+
+const items = [
+  {
+    icon: ArrowUpToLineIcon,
+    onClick: (editor: Editor) => {
+      editor.chain().focus().toggleLeadingSpace().run();
+    },
+    isActive: (state: { hasLeadingSpace: boolean }) => state.hasLeadingSpace,
+  },
+  {
+    icon: IndentIcon,
+    onClick: (editor: Editor) => {
+      editor.chain().focus().toggleIndent().run();
+    },
+    isActive: (state: { hasIndent: boolean }) => state.hasIndent,
+  },
+];
+
+export const ParagraphButtons = ({ editor }: { editor: Editor }) => {
+  const editorState = useEditorState<SelectorResult>({
+    editor,
+    selector: (instance) => {
+      const atts = {
+        hasIndent: !!instance.editor.getAttributes('paragraph')['hasIndent'],
+        hasLeadingSpace:
+          !!instance.editor.getAttributes('paragraph')['hasLeadingSpace'],
+      };
+      return atts;
+    },
+  });
+
+  return (
+    <>
+      {items.map((item, i) => {
+        return (
+          <Button
+            key={i}
+            variant="ghost"
+            size="icon"
+            className={cn(
+              'rounded-none flex-shrink-0',
+              item.isActive(editorState)
+                ? 'text-foreground'
+                : 'text-muted-foreground',
+            )}
+            onClick={() => {
+              item.onClick(editor);
+            }}
+          >
+            <item.icon className={cn('size-4')} strokeWidth={2.5} />
+          </Button>
+        );
+      })}
+    </>
+  );
+};

package/src/lib/components/editor/menus/selectors/SelectorInputField.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { Button, Input } from '@eightyfourthousand/design-system';
+import { Editor } from '@tiptap/core';
+import { useEditorState } from '@tiptap/react';
+import { CheckIcon, Trash2Icon } from 'lucide-react';
+import { useRef } from 'react';
+
+export const SelectorInputField = ({
+  editor,
+  type,
+  attr,
+  placeholder,
+  onSubmit,
+}: {
+  editor: Editor;
+  type: string;
+  attr: string;
+  placeholder: string;
+  onSubmit: (value?: string) => void;
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const editorState = useEditorState({
+    editor,
+    selector: (instance) => ({
+      isActive: instance.editor.isActive(type),
+      getValue: instance.editor.getAttributes(type)[attr],
+    }),
+  });
+
+  return (
+    <div className="flex space-x-1 items-center">
+      <Input
+        ref={inputRef}
+        placeholder={placeholder}
+        value={editorState.getValue}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            onSubmit(inputRef.current?.value);
+          }
+        }}
+      />
+      <Button
+        size="icon"
+        variant="ghost"
+        disabled={!!inputRef.current}
+        onClick={() => onSubmit(inputRef.current?.value)}
+      >
+        <CheckIcon className="size-4" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="icon"
+        type="button"
+        disabled={!editorState.isActive}
+        onClick={() => {
+          if (inputRef.current) {
+            inputRef.current.value = '';
+          }
+          onSubmit();
+        }}
+      >
+        <Trash2Icon className="size-4 text-destructive" />
+      </Button>
+    </div>
+  );
+};

package/src/lib/components/editor/menus/selectors/TextAlignSelector.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import {
+  Button,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@eightyfourthousand/design-system';
+import { Editor } from '@tiptap/core';
+import { useEditorState } from '@tiptap/react';
+import {
+  AlignCenterIcon,
+  AlignLeftIcon,
+  AlignRightIcon,
+  CheckIcon,
+  ChevronDownIcon,
+} from 'lucide-react';
+
+interface SelectorResult {
+  isLeft: boolean;
+  isCenter: boolean;
+  isRight: boolean;
+}
+
+const items = [
+  {
+    title: 'Left',
+    icon: AlignLeftIcon,
+    onClick: (editor: Editor) =>
+      editor.chain().focus().setTextAlign('left').run(),
+    isActive: (state: SelectorResult) => state.isLeft,
+  },
+  {
+    title: 'Center',
+    icon: AlignCenterIcon,
+    onClick: (editor: Editor) =>
+      editor.chain().focus().setTextAlign('center').run(),
+    isActive: (state: SelectorResult) => state.isCenter,
+  },
+  {
+    title: 'Right',
+    icon: AlignRightIcon,
+    onClick: (editor: Editor) => {
+      editor.chain().focus().setTextAlign('right').run();
+    },
+    isActive: (state: SelectorResult) => state.isRight,
+  },
+];
+
+export const TextAlignSelector = ({ editor }: { editor: Editor }) => {
+  const editorState = useEditorState<SelectorResult>({
+    editor,
+    selector: (instance) => ({
+      isLeft: instance.editor.isActive({ textAlign: 'left' }),
+      isCenter: instance.editor.isActive({ textAlign: 'center' }),
+      isRight: instance.editor.isActive({ textAlign: 'right' }),
+    }),
+  });
+
+  const activeItem =
+    items.find((item) => item.isActive(editorState)) ?? items[0];
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="ghost" className="rounded-none">
+          <activeItem.icon className="size-4 me-2" strokeWidth={2.5} />
+          <ChevronDownIcon className="size-3" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-1 shadow-xl w-32" align="end" noPortal>
+        {items.map((item, i) => {
+          return (
+            <div
+              key={i}
+              onClick={() => item.onClick(editor)}
+              className="flex space-x-2 items-center rounded-md hover:bg-muted px-2 py-1.5 text-foreground cursor-pointer"
+            >
+              <item.icon className="size-4" />
+              <span className="text-sm">{item.title}</span>
+              <div className="flex-1"></div>
+              {item.isActive(editorState) && <CheckIcon className="size-3.5" />}
+            </div>
+          );
+        })}
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/lib/components/editor/menus/selectors/TextButtons.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { cn } from '@eightyfourthousand/lib-utils';
+import { Editor } from '@tiptap/core';
+import { useEditorState } from '@tiptap/react';
+import { Button } from '@eightyfourthousand/design-system';
+import {
+  BoldIcon,
+  ItalicIcon,
+  StrikethroughIcon,
+  UnderlineIcon,
+} from 'lucide-react';
+import { LinkSelector } from './LinkSelector';
+
+interface SelectorResult {
+  isBold: boolean;
+  isItalic: boolean;
+  isUnderline: boolean;
+  isStrike: boolean;
+}
+
+const items = [
+  {
+    icon: BoldIcon,
+    onClick: (editor: Editor) => {
+      editor.chain().focus().toggleBold().run();
+    },
+    isActive: (state: SelectorResult) => state.isBold,
+  },
+  {
+    icon: ItalicIcon,
+    onClick: (editor: Editor) => {
+      editor.chain().focus().toggleItalic().run();
+    },
+    isActive: (state: SelectorResult) => state.isItalic,
+  },
+  {
+    icon: UnderlineIcon,
+    onClick: (editor: Editor) => {
+      editor.chain().focus().toggleUnderline().run();
+    },
+    isActive: (state: SelectorResult) => state.isUnderline,
+  },
+  {
+    icon: StrikethroughIcon,
+    onClick: (editor: Editor) => {
+      editor.chain().focus().toggleStrike().run();
+    },
+    isActive: (state: SelectorResult) => state.isStrike,
+  },
+];
+
+export const TextButtons = ({ editor }: { editor: Editor }) => {
+  const editorState = useEditorState<SelectorResult>({
+    editor,
+    selector: (instance) => ({
+      isBold: instance.editor.isActive('bold'),
+      isItalic: instance.editor.isActive('italic'),
+      isUnderline: instance.editor.isActive('underline'),
+      isStrike: instance.editor.isActive('strike'),
+    }),
+  });
+
+  return (
+    <>
+      {items.map((item, i) => {
+        return (
+          <Button
+            key={i}
+            variant="ghost"
+            size="icon"
+            className="rounded-none flex-shrink-0"
+            onClick={() => {
+              item.onClick(editor);
+            }}
+          >
+            <item.icon
+              className={cn('size-4', {
+                'text-foreground': item.isActive(editorState),
+              })}
+              strokeWidth={2.5}
+            />
+          </Button>
+        );
+      })}
+      <LinkSelector editor={editor} />
+    </>
+  );
+};

package/src/lib/components/editor/menus/selectors/TranslationNodeSelector.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+import {
+  Button,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@eightyfourthousand/design-system';
+import { Editor } from '@tiptap/core';
+import { useEditorState } from '@tiptap/react';
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  Heading1,
+  Heading2,
+  Heading3,
+  LetterTextIcon,
+  ListEndIcon,
+  ListStartIcon,
+  LucideIcon,
+  QuoteIcon,
+} from 'lucide-react';
+
+interface SelectorResult {
+  isParagraph: boolean;
+  isHeading1: boolean;
+  isHeading2: boolean;
+  isHeading3: boolean;
+  isLineGroup: boolean;
+  isBlockquote: boolean;
+  isTrailer: boolean;
+}
+
+interface MenuItem {
+  name: string;
+  icon: LucideIcon;
+  onClick: (editor: Editor) => void;
+  isActive: (state: SelectorResult) => boolean;
+}
+
+const items: MenuItem[] = [
+  {
+    name: 'Text',
+    icon: LetterTextIcon,
+    onClick: (editor) =>
+      editor.chain().focus().toggleNode('paragraph', 'paragraph').run(),
+    isActive: (state) => state.isParagraph,
+  },
+  {
+    name: 'Heading 1',
+    icon: Heading1,
+    onClick: (editor) =>
+      editor.chain().focus().toggleHeading({ level: 1 }).run(),
+    isActive: (state) => state.isHeading1,
+  },
+  {
+    name: 'Heading 2',
+    icon: Heading2,
+    onClick: (editor) =>
+      editor.chain().focus().toggleHeading({ level: 2 }).run(),
+    isActive: (state) => state.isHeading2,
+  },
+  {
+    name: 'Heading 3',
+    icon: Heading3,
+    onClick: (editor) =>
+      editor.chain().focus().toggleHeading({ level: 3 }).run(),
+    isActive: (state) => state.isHeading3,
+  },
+  {
+    name: 'Line Group',
+    icon: ListStartIcon,
+    onClick: (editor) => editor.chain().focus().toggleLineGroup().run(),
+    isActive: (state) => state.isLineGroup,
+  },
+  {
+    name: 'Quote',
+    icon: QuoteIcon,
+    onClick: (editor) =>
+      editor
+        .chain()
+        .focus()
+        .toggleNode('paragraph', 'paragraph')
+        .toggleBlockquote()
+        .run(),
+    isActive: (state) => state.isBlockquote,
+  },
+  {
+    name: 'Trailer',
+    icon: ListEndIcon,
+    onClick: (editor) => editor.chain().focus().toggleTrailer().run(),
+    isActive: (state) => state.isTrailer,
+  },
+];
+
+export const TranslationNodeSelector = ({ editor }: { editor: Editor }) => {
+  const editorState = useEditorState<SelectorResult>({
+    editor,
+    selector: (instance) => ({
+      isParagraph: instance.editor.isActive('paragraph'),
+      isHeading1: instance.editor.isActive('heading', { level: 1 }),
+      isHeading2: instance.editor.isActive('heading', { level: 2 }),
+      isHeading3: instance.editor.isActive('heading', { level: 3 }),
+      isLineGroup: instance.editor.isActive('lineGroup'),
+      isBlockquote: instance.editor.isActive('blockquote'),
+      isTrailer: instance.editor.isActive('trailer'),
+    }),
+  });
+
+  const activeItems = items.filter((item) => item.isActive(editorState));
+
+  const name =
+    activeItems.length > 1 ? 'Multiple' : (activeItems.pop()?.name ?? 'Text');
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="ghost" className="rounded-none">
+          <span className="whitespace-nowrap text-sm me-2">{name}</span>
+          <ChevronDownIcon className="size-3" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-48 p-1 shadow-xl" align="start" noPortal>
+        {items.map((item, i) => {
+          return (
+            <div
+              key={i}
+              onClick={() => item.onClick(editor)}
+              className="flex items-center text-sm rounded-md hover:bg-muted text-foreground px-2 py-1.5 cursor-pointer"
+            >
+              <item.icon className="size-3.5 me-2" />
+              <span>{item.name}</span>
+              <div className="flex-1"></div>
+              {item.isActive(editorState) && (
+                <CheckIcon className="size-3.5 ms-4" />
+              )}
+            </div>
+          );
+        })}
+      </PopoverContent>
+    </Popover>
+  );
+};