@eightyfourthousand/lib-editing 2026.4.0 → 2026.4.2

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

@@ -1,63 +0,0 @@
-'use client';
-
-import { cn } from '@eightyfourthousand/lib-utils';
-import { Editor } from '@tiptap/core';
-import { useEditorState } from '@tiptap/react';
-import {
-  Button,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@eightyfourthousand/design-system';
-import { BookOpenTextIcon } from 'lucide-react';
-import { SelectorInputField } from './SelectorInputField';
-
-export const GlossarySelector = ({ editor }: { editor: Editor }) => {
-  const editorState = useEditorState({
-    editor,
-    selector: (instance) => ({
-      isActive: instance.editor.isActive('glossaryInstance'),
-    }),
-  });
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          variant="ghost"
-          size="icon"
-          className="px-2 rounded-none flex-shrink-0"
-        >
-          <BookOpenTextIcon
-            className={cn(
-              'size-4',
-              editorState.isActive
-                ? 'text-foreground'
-                : 'text-muted-foreground',
-            )}
-            strokeWidth={2.5}
-          />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        className="w-fit shadow-xl rounded-md border p-1"
-        align="end"
-        noPortal
-      >
-        <SelectorInputField
-          editor={editor}
-          type="glossaryInstance"
-          attr="glossary"
-          placeholder="Add glossary uuid..."
-          onSubmit={(value) => {
-            if (value) {
-              editor.chain().focus().setGlossaryInstance(value).run();
-            } else {
-              editor.chain().focus().unsetGlossaryInstance().run();
-            }
-          }}
-        />
-      </PopoverContent>
-    </Popover>
-  );
-};

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

@@ -1,68 +0,0 @@
-'use client';
-
-import { cn } from '@eightyfourthousand/lib-utils';
-import { Editor } from '@tiptap/core';
-import { useEditorState } from '@tiptap/react';
-import {
-  Button,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@eightyfourthousand/design-system';
-import { LinkIcon } from 'lucide-react';
-import { SelectorInputField } from './SelectorInputField';
-
-export const LinkSelector = ({ editor }: { editor: Editor }) => {
-  const editorState = useEditorState({
-    editor,
-    selector: (instance) => ({
-      isActive: instance.editor.isActive('link'),
-    }),
-  });
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          variant="ghost"
-          size="icon"
-          className="rounded-none flex-shrink-0"
-        >
-          <LinkIcon
-            className={cn(
-              'size-4',
-              editorState.isActive
-                ? 'text-foreground'
-                : 'text-muted-foreground',
-            )}
-            strokeWidth={2.5}
-          />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        className="w-fit shadow-xl rounded-md border p-1"
-        align="end"
-        noPortal
-      >
-        <SelectorInputField
-          editor={editor}
-          type="link"
-          attr="href"
-          placeholder="Add link..."
-          onSubmit={(value) => {
-            if (value) {
-              editor
-                .chain()
-                .focus()
-                .extendMarkRange('link')
-                .setLink({ href: value })
-                .run();
-            } else {
-              editor.chain().focus().extendMarkRange('link').unsetLink().run();
-            }
-          }}
-        />
-      </PopoverContent>
-    </Popover>
-  );
-};

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

@@ -1,119 +0,0 @@
-'use client';
-
-import { Editor } from '@tiptap/core';
-import { useEditorState } from '@tiptap/react';
-import {
-  Button,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@eightyfourthousand/design-system';
-import { CheckIcon, ChevronDownIcon, SpeechIcon } from 'lucide-react';
-import { cn } from '@eightyfourthousand/lib-utils';
-
-interface SelectorResult {
-  isEnglish: boolean;
-  isSanskrit: boolean;
-  isTibetan: boolean;
-  isWylie: boolean;
-  isMixed: boolean;
-}
-
-interface MenuItem {
-  name: string;
-  onClick: (editor: Editor) => void;
-  isActive: (state: SelectorResult) => boolean;
-}
-
-const items: MenuItem[] = [
-  {
-    name: 'English',
-    onClick: (editor: Editor) => {
-      editor.chain().focus().toggleMantra('en').run();
-    },
-    isActive: (state: SelectorResult) => state.isEnglish,
-  },
-  {
-    name: 'Sanskrit',
-    onClick: (editor: Editor) => {
-      editor.chain().focus().toggleMantra('Sa-Ltn').run();
-    },
-    isActive: (state: SelectorResult) => state.isSanskrit,
-  },
-  {
-    name: 'Wylie',
-    onClick: (editor: Editor) => {
-      editor.chain().focus().toggleMantra('Bo-Ltn').run();
-    },
-    isActive: (state: SelectorResult) => state.isWylie,
-  },
-  {
-    name: 'Tibetan',
-    onClick: (editor: Editor) => {
-      editor.chain().focus().toggleMantra('bo').run();
-    },
-    isActive: (state: SelectorResult) => state.isTibetan,
-  },
-  {
-    name: 'Mixed',
-    onClick: (editor: Editor) => {
-      editor.chain().focus().toggleMantra().run();
-    },
-    isActive: (state: SelectorResult) => state.isMixed,
-  },
-];
-
-export const MantraSelector = ({ editor }: { editor: Editor }) => {
-  const editorState = useEditorState({
-    editor,
-    selector: (instance) => ({
-      isEnglish: instance.editor.isActive('mantra', { lang: 'en' }),
-      isSanskrit: instance.editor.isActive('mantra', { lang: 'Sa-Ltn' }),
-      isTibetan: instance.editor.isActive('mantra', { lang: 'bo' }),
-      isWylie: instance.editor.isActive('mantra', { lang: 'Bo-Ltn' }),
-      isMixed: instance.editor.isActive('mantra', { lang: undefined }),
-    }),
-  });
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="ghost" className="rounded-none">
-          <SpeechIcon
-            className={cn(
-              'size-3',
-              editorState.isEnglish ||
-                editorState.isSanskrit ||
-                editorState.isTibetan ||
-                editorState.isWylie ||
-                editorState.isMixed
-                ? 'text-primary'
-                : 'text-muted-foreground',
-            )}
-            strokeWidth={2.5}
-          />
-          <ChevronDownIcon className="size-2" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        className="w-28 shadow-xl rounded-md border p-1"
-        align="end"
-        noPortal
-      >
-        {items.map((item) => (
-          <div
-            key={item.name}
-            className="flex items-center text-sm rounded-md hover:bg-muted text-foreground px-2 py-1.5 cursor-pointer"
-            onClick={() => item.onClick(editor)}
-          >
-            <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/NodeSelector.tsx

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

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

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

@@ -1,89 +0,0 @@
-'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>
-  );
-};