@agent-native/core 0.109.3 → 0.110.0

package/corpus/core/src/client/rich-markdown-editor/BubbleToolbar.tsx

@@ -1,253 +0,0 @@
-import { TextSelection } from "@tiptap/pm/state";
-import type { Editor } from "@tiptap/react";
-import { useEffect, useState, type CSSProperties } from "react";
-
-import { cn } from "../utils.js";
-
-/** A bubble-toolbar button or a divider. */
-export type BubbleToolbarItem =
-  | {
-      /** Short label/glyph shown on the button. */
-      label: string;
-      /** Accessible/title text. */
-      title: string;
-      action: () => void;
-      isActive: () => boolean;
-      style?: CSSProperties;
-    }
-  | { type: "divider" };
-
-/**
- * Builds the default selection-toolbar items (Plan's current set): bold,
- * italic, strike, code, headings 1-3, and a link toggle. `toggleLink` is
- * supplied by the toolbar so the link-editor input can be opened.
- */
-export function buildDefaultBubbleItems(
-  editor: Editor,
-  toggleLink: () => void,
-): BubbleToolbarItem[] {
-  return [
-    {
-      label: "B",
-      title: "Bold",
-      action: () => editor.chain().focus().toggleBold().run(),
-      isActive: () => editor.isActive("bold"),
-      style: { fontWeight: 700 },
-    },
-    {
-      label: "I",
-      title: "Italic",
-      action: () => editor.chain().focus().toggleItalic().run(),
-      isActive: () => editor.isActive("italic"),
-      style: { fontStyle: "italic" },
-    },
-    {
-      label: "S",
-      title: "Strikethrough",
-      action: () => editor.chain().focus().toggleStrike().run(),
-      isActive: () => editor.isActive("strike"),
-      style: { textDecoration: "line-through" },
-    },
-    {
-      label: "<>",
-      title: "Code",
-      action: () => editor.chain().focus().toggleCode().run(),
-      isActive: () => editor.isActive("code"),
-      style: { fontFamily: "monospace", fontSize: 11 },
-    },
-    { type: "divider" },
-    {
-      label: "H1",
-      title: "Heading 1",
-      action: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
-      isActive: () => editor.isActive("heading", { level: 1 }),
-    },
-    {
-      label: "H2",
-      title: "Heading 2",
-      action: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
-      isActive: () => editor.isActive("heading", { level: 2 }),
-    },
-    {
-      label: "H3",
-      title: "Heading 3",
-      action: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
-      isActive: () => editor.isActive("heading", { level: 3 }),
-    },
-    { type: "divider" },
-    {
-      label: "Link",
-      title: "Link",
-      action: toggleLink,
-      isActive: () => editor.isActive("link"),
-    },
-  ];
-}
-
-export interface BubbleToolbarProps {
-  editor: Editor;
-  /**
-   * Custom item builder. Receives the editor and the `toggleLink` helper (so a
-   * custom set can still open the built-in link editor). Defaults to
-   * {@link buildDefaultBubbleItems}.
-   */
-  buildItems?: (editor: Editor, toggleLink: () => void) => BubbleToolbarItem[];
-}
-
-/**
- * The shared floating selection toolbar. Tracks the current text selection and
- * positions a fixed toolbar above it, with an inline link editor. Extracted
- * from the inline plan toolbar so embedders share one implementation; apps swap
- * the item set via `buildItems`.
- */
-export function BubbleToolbar({
-  editor,
-  buildItems = buildDefaultBubbleItems,
-}: BubbleToolbarProps) {
-  const [visible, setVisible] = useState(false);
-  const [coords, setCoords] = useState({ top: 0, left: 0 });
-  const [showLinkInput, setShowLinkInput] = useState(false);
-  const [linkUrl, setLinkUrl] = useState("");
-
-  useEffect(() => {
-    const update = () => {
-      const selectionState = editor.state.selection;
-      const { from, to } = selectionState;
-      const selection = window.getSelection();
-      const selectionInsideEditor =
-        !!selection?.anchorNode &&
-        !!selection.focusNode &&
-        editor.view.dom.contains(selection.anchorNode) &&
-        editor.view.dom.contains(selection.focusNode);
-      if (
-        !(selectionState instanceof TextSelection) ||
-        from === to ||
-        !selectionInsideEditor
-      ) {
-        setVisible(false);
-        return;
-      }
-      if (!selection || selection.rangeCount === 0) {
-        setVisible(false);
-        return;
-      }
-      const rect = selection.getRangeAt(0).getBoundingClientRect();
-      if (rect.width === 0 && rect.height === 0) {
-        setVisible(false);
-        return;
-      }
-      setCoords({
-        top: rect.top - 8,
-        left: rect.left + rect.width / 2,
-      });
-      setVisible(true);
-    };
-    editor.on("selectionUpdate", update);
-    editor.on("transaction", update);
-    document.addEventListener("selectionchange", update);
-    const onBlur = () => {
-      setTimeout(() => {
-        if (!editor.isFocused) setVisible(false);
-      }, 140);
-    };
-    editor.on("blur", onBlur);
-    return () => {
-      editor.off("selectionUpdate", update);
-      editor.off("transaction", update);
-      document.removeEventListener("selectionchange", update);
-      editor.off("blur", onBlur);
-    };
-  }, [editor]);
-
-  const handleSetLink = () => {
-    if (linkUrl.trim()) {
-      editor
-        .chain()
-        .focus()
-        .extendMarkRange("link")
-        .setLink({ href: linkUrl.trim() })
-        .run();
-    } else {
-      editor.chain().focus().extendMarkRange("link").unsetLink().run();
-    }
-    setShowLinkInput(false);
-    setLinkUrl("");
-  };
-
-  const toggleLink = () => {
-    if (editor.isActive("link")) {
-      editor.chain().focus().unsetLink().run();
-      return;
-    }
-    setLinkUrl(editor.getAttributes("link").href || "");
-    setShowLinkInput(true);
-  };
-
-  const items = buildItems(editor, toggleLink);
-
-  if (!visible) return null;
-
-  return (
-    <div
-      className="an-rich-md-bubble-toolbar"
-      style={{
-        position: "fixed",
-        top: coords.top,
-        left: coords.left,
-        transform: "translate(-50%, -100%)",
-      }}
-      onMouseDown={(event) => event.preventDefault()}
-      data-plan-interactive
-    >
-      {showLinkInput ? (
-        <div className="an-rich-md-link-editor">
-          <input
-            autoFocus
-            type="url"
-            placeholder="Paste link..."
-            value={linkUrl}
-            onChange={(event) => setLinkUrl(event.target.value)}
-            onKeyDown={(event) => {
-              if (event.key === "Enter") handleSetLink();
-              if (event.key === "Escape") {
-                setShowLinkInput(false);
-                setLinkUrl("");
-              }
-            }}
-          />
-          <button type="button" onClick={handleSetLink}>
-            Apply
-          </button>
-        </div>
-      ) : (
-        <div className="an-rich-md-bubble-items">
-          {items.map((item, index) => {
-            if ("type" in item) {
-              return (
-                <span
-                  key={`divider-${index}`}
-                  className="an-rich-md-bubble-divider"
-                />
-              );
-            }
-            return (
-              <button
-                key={item.title}
-                type="button"
-                title={item.title}
-                className={cn(
-                  "an-rich-md-bubble-button",
-                  item.isActive() && "an-rich-md-bubble-button--active",
-                )}
-                style={item.style}
-                onClick={item.action}
-              >
-                {item.label}
-              </button>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}

package/corpus/core/src/client/rich-markdown-editor/CodeBlockNode.tsx

@@ -1,258 +0,0 @@
-import { IconCheck, IconChevronDown } from "@tabler/icons-react";
-import type { Node as TiptapNode } from "@tiptap/core";
-import { CodeBlockLowlight } from "@tiptap/extension-code-block-lowlight";
-import {
-  NodeViewContent,
-  NodeViewWrapper,
-  ReactNodeViewRenderer,
-  type NodeViewProps,
-} from "@tiptap/react";
-import type { createLowlight } from "lowlight";
-import { useMemo, useState } from "react";
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "../components/ui/popover.js";
-import { cn } from "../utils.js";
-
-/**
- * A selectable language for the code-block picker. `value === null` is the
- * "Auto" sentinel: the block stores no language and the lowlight plugin
- * auto-detects (biased toward the editor's registered, web-leaning grammar
- * set). Keeping it first makes Auto the default, matching how plans skew toward
- * JS/TS/JSON without the author having to choose.
- */
-export interface CodeLanguageOption {
-  value: string | null;
-  label: string;
-}
-
-/** Default picker list — Auto first, then the web-leaning grammars plans use. */
-export const DEFAULT_CODE_LANGUAGES: CodeLanguageOption[] = [
-  { value: null, label: "Auto" },
-  { value: "typescript", label: "TypeScript" },
-  { value: "javascript", label: "JavaScript" },
-  { value: "tsx", label: "TSX" },
-  { value: "jsx", label: "JSX" },
-  { value: "json", label: "JSON" },
-  { value: "html", label: "HTML" },
-  { value: "css", label: "CSS" },
-  { value: "bash", label: "Bash" },
-  { value: "python", label: "Python" },
-  { value: "sql", label: "SQL" },
-  { value: "yaml", label: "YAML" },
-  { value: "markdown", label: "Markdown" },
-  { value: "graphql", label: "GraphQL" },
-  { value: "go", label: "Go" },
-  { value: "rust", label: "Rust" },
-  { value: "diff", label: "Diff" },
-];
-
-/** Class hooks so each app themes the shared node with its own palette. */
-export interface CodeBlockClassNames {
-  wrapper: string;
-  header: string;
-  langButton: string;
-  langButtonReadonly: string;
-  picker: string;
-  search: string;
-  list: string;
-  option: string;
-  optionActive: string;
-}
-
-const DEFAULT_CLASS_NAMES: CodeBlockClassNames = {
-  wrapper: "an-code-block",
-  header: "an-code-block__header",
-  langButton: "an-code-block__lang",
-  langButtonReadonly: "an-code-block__lang--readonly",
-  picker: "an-code-block__picker",
-  search: "an-code-block__search",
-  list: "an-code-block__list",
-  option: "an-code-block__option",
-  optionActive: "is-active",
-};
-
-export interface CreateCodeBlockNodeOptions {
-  /** Lowlight instance backing syntax highlighting (same one the app registers). */
-  lowlight: ReturnType<typeof createLowlight>;
-  /** Picker languages. Defaults to {@link DEFAULT_CODE_LANGUAGES} (Auto first). */
-  languages?: CodeLanguageOption[];
-  /** Class hooks for per-app theming. Defaults to the shared `an-code-block__*`. */
-  classNames?: Partial<CodeBlockClassNames>;
-}
-
-function optionLabel(
-  language: string | null,
-  languages: CodeLanguageOption[],
-): string {
-  if (!language) return languages[0]?.label ?? "Auto";
-  const match = languages.find((option) => option.value === language);
-  return match?.label ?? language;
-}
-
-interface CodeBlockNodeViewExtraOptions {
-  languagePickerOptions: CodeLanguageOption[];
-  codeBlockClassNames: CodeBlockClassNames;
-}
-
-function CodeBlockView({
-  node,
-  updateAttributes,
-  editor,
-  extension,
-}: NodeViewProps) {
-  const options = extension.options as unknown as CodeBlockNodeViewExtraOptions;
-  const languages = options.languagePickerOptions;
-  const classNames = options.codeBlockClassNames;
-
-  const [open, setOpen] = useState(false);
-  const [filter, setFilter] = useState("");
-  const isEditable = editor.isEditable;
-
-  const current = (node.attrs.language as string | null) || null;
-  const label = optionLabel(current, languages);
-
-  const filtered = useMemo(() => {
-    const query = filter.trim().toLowerCase();
-    if (!query) return languages;
-    return languages.filter((option) =>
-      option.label.toLowerCase().includes(query),
-    );
-  }, [filter, languages]);
-
-  const select = (value: string | null) => {
-    // Store `""` for Auto so tiptap-markdown emits a bare fence (no language),
-    // matching the auto-detect read path.
-    updateAttributes({ language: value ?? "" });
-    setFilter("");
-    setOpen(false);
-  };
-
-  return (
-    <NodeViewWrapper className={classNames.wrapper}>
-      <div className={classNames.header} contentEditable={false}>
-        {isEditable ? (
-          <Popover
-            open={open}
-            onOpenChange={(next) => {
-              setOpen(next);
-              if (!next) setFilter("");
-            }}
-          >
-            <PopoverTrigger asChild>
-              <button type="button" className={classNames.langButton}>
-                {label}
-                <IconChevronDown className="size-3" />
-              </button>
-            </PopoverTrigger>
-            <PopoverContent align="start" side="bottom" className="w-52 p-0">
-              <input
-                autoFocus
-                type="text"
-                value={filter}
-                onChange={(event) => setFilter(event.target.value)}
-                onKeyDown={(event) => {
-                  if (event.key === "Enter" && filtered.length > 0) {
-                    event.preventDefault();
-                    select(filtered[0].value);
-                  }
-                }}
-                placeholder="Search languages…"
-                className={classNames.search}
-              />
-              <div className={classNames.list}>
-                {filtered.map((option) => {
-                  const active =
-                    option.value === current || (!option.value && !current);
-                  return (
-                    <button
-                      key={option.value ?? "auto"}
-                      type="button"
-                      className={cn(
-                        classNames.option,
-                        active && classNames.optionActive,
-                      )}
-                      onClick={() => select(option.value)}
-                    >
-                      {option.label}
-                      {active && <IconCheck className="size-3.5" />}
-                    </button>
-                  );
-                })}
-              </div>
-            </PopoverContent>
-          </Popover>
-        ) : (
-          label && (
-            <span
-              className={cn(
-                classNames.langButton,
-                classNames.langButtonReadonly,
-              )}
-            >
-              {label}
-            </span>
-          )
-        )}
-      </div>
-      <pre>
-        <NodeViewContent as={"code" as never} />
-      </pre>
-    </NodeViewWrapper>
-  );
-}
-
-/**
- * The shared Notion-style code block: {@link CodeBlockLowlight} (so fenced
- * markdown round-trips byte-identically — the node name and `language` attr are
- * unchanged) plus a React node view that adds a language picker header instead
- * of a bare highlighted `<pre>`. "Auto" stores no language and the lowlight
- * plugin auto-detects.
- *
- * Lifted from the Content editor's bespoke code block so Plans (and any app
- * opting into `features.codeBlock`) share one implementation. Theming is fully
- * class-driven via {@link CreateCodeBlockNodeOptions.classNames}, so each app
- * maps the hooks onto its own palette.
- */
-export function createCodeBlockNode({
-  lowlight,
-  languages = DEFAULT_CODE_LANGUAGES,
-  classNames,
-}: CreateCodeBlockNodeOptions): TiptapNode {
-  const resolvedClassNames: CodeBlockClassNames = {
-    ...DEFAULT_CLASS_NAMES,
-    ...(classNames ?? {}),
-  };
-
-  return CodeBlockLowlight.extend({
-    addOptions() {
-      return {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        ...this.parent!(),
-        languagePickerOptions: languages,
-        codeBlockClassNames: resolvedClassNames,
-      };
-    },
-    addNodeView() {
-      return ReactNodeViewRenderer(CodeBlockView);
-    },
-    addKeyboardShortcuts() {
-      return {
-        ...this.parent?.(),
-        Tab: ({ editor }) => {
-          if (editor.isActive(this.name)) {
-            editor.commands.insertContent("\t");
-            return true;
-          }
-          return false;
-        },
-      };
-    },
-  }).configure({
-    lowlight,
-    defaultLanguage: null,
-  }) as unknown as TiptapNode;
-}