@borisj74/bv-ds 0.1.7 → 0.1.8

package/src/components/TextEditor/TextEditor.tsx

@@ -0,0 +1,175 @@
+import { useEffect, type ReactNode } from "react";
+import { EditorContent } from "@tiptap/react";
+import clsx from "clsx";
+import { Bold01, Link01, AlignLeft, AlignCenter, AlignRight, XClose } from "@borisj74/bv-ds-icons";
+import { ButtonUtility } from "../ButtonUtility";
+import { TextEditorToolbar, TextEditorToolbarDivider } from "../TextEditorToolbar";
+import { TextEditorTooltip } from "../TextEditorTooltip";
+import { IconBox } from "../../internal/iconBox";
+import { useTextEditor } from "../../hooks/useTextEditor";
+
+export interface TextEditorProps {
+  placeholder?: string;
+  /** Initial HTML content. */
+  content?: string;
+  /** Fires with serialized HTML on every change. */
+  onUpdate?: (html: string) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+/*
+ * Inline-SVG fallbacks for formatting glyphs absent from @borisj74/bv-ds-icons
+ * v0.1.0 (italic / underline / strike / bullet-list / ordered-list / heading).
+ * Swap to package icons once they exist. 24-grid, currentColor stroke.
+ */
+const stroke = {
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round" as const,
+  strokeLinejoin: "round" as const,
+};
+const ItalicIcon = () => (
+  <svg viewBox="0 0 24 24" {...stroke}><path d="M19 4h-9M14 20H5M15 4 9 20" /></svg>
+);
+const UnderlineIcon = () => (
+  <svg viewBox="0 0 24 24" {...stroke}><path d="M6 4v6a6 6 0 0 0 12 0V4M4 21h16" /></svg>
+);
+const StrikeIcon = () => (
+  <svg viewBox="0 0 24 24" {...stroke}><path d="M4 12h16M16 7.5A4 3 0 0 0 8 8M8 16.5a4 3 0 0 0 8-.5" /></svg>
+);
+const HeadingIcon = () => (
+  <svg viewBox="0 0 24 24" {...stroke}><path d="M6 4v16M18 4v16M6 12h12" /></svg>
+);
+const BulletListIcon = () => (
+  <svg viewBox="0 0 24 24" {...stroke}><path d="M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01" /></svg>
+);
+const OrderedListIcon = () => (
+  <svg viewBox="0 0 24 24" {...stroke}><path d="M10 6h10M10 12h10M10 18h10M4 4v4M3 14h2l-2 3h2" /></svg>
+);
+
+// ProseMirror content styling (Tailwind preflight strips list/heading styles).
+const proseClass = clsx(
+  "font-body text-sm text-text-primary",
+  "[&_.ProseMirror]:min-h-[80px] [&_.ProseMirror]:outline-none",
+  "[&_.ProseMirror_p]:my-0",
+  "[&_.ProseMirror_ul]:list-disc [&_.ProseMirror_ul]:pl-2xl",
+  "[&_.ProseMirror_ol]:list-decimal [&_.ProseMirror_ol]:pl-2xl",
+  "[&_.ProseMirror_h2]:text-lg [&_.ProseMirror_h2]:font-semibold [&_.ProseMirror_h2]:text-text-primary",
+  "[&_.ProseMirror_a]:text-text-brand-secondary [&_.ProseMirror_a]:underline",
+  // Placeholder (extension adds .is-editor-empty + data-placeholder).
+  "[&_.ProseMirror_p.is-editor-empty:first-child]:before:pointer-events-none",
+  "[&_.ProseMirror_p.is-editor-empty:first-child]:before:float-left",
+  "[&_.ProseMirror_p.is-editor-empty:first-child]:before:h-0",
+  "[&_.ProseMirror_p.is-editor-empty:first-child]:before:text-text-placeholder",
+  "[&_.ProseMirror_p.is-editor-empty:first-child]:before:content-[attr(data-placeholder)]",
+);
+
+/**
+ * Rich-text editor — composes the `TextEditorToolbar` / `TextEditorTooltip`
+ * chrome shells onto a TipTap editor (`useTextEditor`). The toolbar buttons map
+ * to TipTap commands and reflect `editor.isActive(...)`; a `TextEditorTooltip`
+ * surfaces link controls when the caret sits inside a link.
+ *
+ * Pass `content` as initial HTML and read changes via `onUpdate(html)`.
+ */
+export function TextEditor({
+  placeholder,
+  content,
+  onUpdate,
+  disabled = false,
+  className,
+}: TextEditorProps) {
+  const editor = useTextEditor({ placeholder, content, editable: !disabled, onUpdate });
+
+  // Sync editable when `disabled` toggles without recreating the editor.
+  useEffect(() => {
+    editor?.setEditable(!disabled);
+  }, [editor, disabled]);
+
+  const isActive = (name: string, attrs?: Record<string, unknown>) =>
+    editor?.isActive(name, attrs) ?? false;
+
+  const setLink = () => {
+    if (!editor) return;
+    const prev = (editor.getAttributes("link").href as string | undefined) ?? "";
+    const url = window.prompt("Link URL", prev);
+    if (url === null) return;
+    const chain = editor.chain().focus().extendMarkRange("link");
+    if (url === "") chain.unsetLink().run();
+    else chain.setLink({ href: url }).run();
+  };
+
+  const ToolbarButton = ({
+    label,
+    icon,
+    active,
+    onRun,
+  }: {
+    label: string;
+    icon: ReactNode;
+    active?: boolean;
+    onRun: () => void;
+  }) => (
+    <ButtonUtility
+      variant="ghost"
+      label={label}
+      icon={<IconBox size={20}>{icon}</IconBox>}
+      aria-pressed={active}
+      disabled={disabled || !editor}
+      className={active ? "!bg-bg-secondary !text-fg-secondary" : undefined}
+      // Keep the editor selection when pressing a toolbar button.
+      onMouseDown={(e) => e.preventDefault()}
+      onClick={onRun}
+    />
+  );
+
+  return (
+    <div
+      className={clsx(
+        "relative flex flex-col overflow-hidden rounded-xl border border-border-primary bg-bg-primary",
+        "focus-within:ring-2 focus-within:ring-border-brand",
+        disabled && "opacity-60",
+        className,
+      )}
+    >
+      <TextEditorToolbar className="w-full !rounded-none !border-l-0 !border-r-0 !border-t-0 !shadow-none">
+        <ToolbarButton label="Bold" icon={<Bold01 />} active={isActive("bold")} onRun={() => editor?.chain().focus().toggleBold().run()} />
+        <ToolbarButton label="Italic" icon={<ItalicIcon />} active={isActive("italic")} onRun={() => editor?.chain().focus().toggleItalic().run()} />
+        <ToolbarButton label="Underline" icon={<UnderlineIcon />} active={isActive("underline")} onRun={() => editor?.chain().focus().toggleUnderline().run()} />
+        <ToolbarButton label="Strikethrough" icon={<StrikeIcon />} active={isActive("strike")} onRun={() => editor?.chain().focus().toggleStrike().run()} />
+        <TextEditorToolbarDivider />
+        <ToolbarButton label="Heading" icon={<HeadingIcon />} active={isActive("heading", { level: 2 })} onRun={() => editor?.chain().focus().toggleHeading({ level: 2 }).run()} />
+        <ToolbarButton label="Bullet list" icon={<BulletListIcon />} active={isActive("bulletList")} onRun={() => editor?.chain().focus().toggleBulletList().run()} />
+        <ToolbarButton label="Ordered list" icon={<OrderedListIcon />} active={isActive("orderedList")} onRun={() => editor?.chain().focus().toggleOrderedList().run()} />
+        <TextEditorToolbarDivider />
+        <ToolbarButton label="Align left" icon={<AlignLeft />} active={editor?.isActive({ textAlign: "left" }) ?? false} onRun={() => editor?.chain().focus().setTextAlign("left").run()} />
+        <ToolbarButton label="Align center" icon={<AlignCenter />} active={editor?.isActive({ textAlign: "center" }) ?? false} onRun={() => editor?.chain().focus().setTextAlign("center").run()} />
+        <ToolbarButton label="Align right" icon={<AlignRight />} active={editor?.isActive({ textAlign: "right" }) ?? false} onRun={() => editor?.chain().focus().setTextAlign("right").run()} />
+        <TextEditorToolbarDivider />
+        <ToolbarButton label="Link" icon={<Link01 />} active={isActive("link")} onRun={setLink} />
+      </TextEditorToolbar>
+
+      <div className="relative min-h-[120px] px-3xl py-2xl">
+        <EditorContent editor={editor} className={proseClass} />
+
+        {editor?.isActive("link") && (
+          <TextEditorTooltip className="absolute right-3xl top-md z-10">
+            <span className="max-w-[160px] truncate px-xs text-xs text-text-secondary">
+              {String(editor.getAttributes("link").href ?? "")}
+            </span>
+            <ButtonUtility variant="ghost" size="xs" label="Edit link" icon={<IconBox size={16}><Link01 /></IconBox>} onClick={setLink} />
+            <ButtonUtility
+              variant="ghost"
+              size="xs"
+              label="Remove link"
+              icon={<IconBox size={16}><XClose /></IconBox>}
+              onClick={() => editor.chain().focus().extendMarkRange("link").unsetLink().run()}
+            />
+          </TextEditorTooltip>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/TextEditor/index.ts

@@ -0,0 +1,2 @@
+export { TextEditor } from "./TextEditor";
+export type { TextEditorProps } from "./TextEditor";

package/src/hooks/useTextEditor.ts

@@ -0,0 +1,45 @@
+import { useEditor, type Editor } from "@tiptap/react";
+import { StarterKit } from "@tiptap/starter-kit";
+import { TextAlign } from "@tiptap/extension-text-align";
+import { Placeholder } from "@tiptap/extension-placeholder";
+
+export interface UseTextEditorOptions {
+  /** Placeholder shown while the document is empty. */
+  placeholder?: string;
+  /** Initial HTML content. */
+  content?: string;
+  /** Whether the editor is editable (default `true`). */
+  editable?: boolean;
+  /** Fires with the serialized HTML on every change. */
+  onUpdate?: (html: string) => void;
+}
+
+/**
+ * Thin wrapper around TipTap's `useEditor`, pre-configured with the standard
+ * extension set: StarterKit (bold/italic/strike/code/heading/lists — and, in
+ * TipTap v3, **underline + link**), TextAlign (left/center/right) and
+ * Placeholder. Link is configured `openOnClick: false` via StarterKit.
+ *
+ * Note: Underline and Link ship inside StarterKit v3, so they are NOT added as
+ * separate extensions (doing so throws a duplicate-extension error).
+ *
+ * Returns the TipTap `Editor` (or `null` until mounted). Compose it with
+ * `EditorContent` + the toolbar, or use the `TextEditor` composite.
+ */
+export function useTextEditor({
+  placeholder,
+  content,
+  editable = true,
+  onUpdate,
+}: UseTextEditorOptions = {}): Editor | null {
+  return useEditor({
+    editable,
+    content: content ?? "",
+    extensions: [
+      StarterKit.configure({ link: { openOnClick: false } }),
+      TextAlign.configure({ types: ["heading", "paragraph"] }),
+      Placeholder.configure({ placeholder: placeholder ?? "" }),
+    ],
+    onUpdate: ({ editor }) => onUpdate?.(editor.getHTML()),
+  });
+}

package/src/index.ts

@@ -135,6 +135,7 @@ export * from "./components/TableHeaderCell";
 export * from "./components/TableHeaderLabel";
 export * from "./components/Tabs";
 export * from "./components/Tag";
+export * from "./components/TextEditor";
 export * from "./components/TextEditorToolbar";
 export * from "./components/TextEditorTooltip";
 export * from "./components/TextareaInputField";
@@ -144,6 +145,9 @@ export * from "./components/TreeView";
 export * from "./components/TreeViewConnector";
 export * from "./components/TreeViewItem";
 export * from "./components/VerificationCodeInput";
+// Hooks
+export { useTextEditor } from "./hooks/useTextEditor";
+export type { UseTextEditorOptions } from "./hooks/useTextEditor";
 // Illustration set — namespaced group (not individual barrel exports).
 export * as illustrations from "./illustrations";
 // figma-to-react appends one line here per new component, e.g.: