@agent-native/core 0.0.0-beta-20260819225910 → 0.0.0-beta-20260819231527

package/corpus/README.md

@@ -31,4 +31,4 @@ rg -n "defineAction|useActionQuery" node_modules/@agent-native/core/corpus
 
 ## Generated Counts
 
-- template files: 8479
+- template files: 8480

package/corpus/templates/content/app/components/editor/BubbleToolbar.tsx

@@ -60,6 +60,109 @@ type SelectionFillRange = {
 };
 
 type TextStyle = "paragraph" | 1 | 2 | 3 | 4 | 5 | 6;
+type ColorAttribute = "color" | "bgColor";
+type ColorName =
+  | "gray"
+  | "brown"
+  | "orange"
+  | "yellow"
+  | "green"
+  | "blue"
+  | "purple"
+  | "pink"
+  | "red";
+
+const COLOR_NAMES: ColorName[] = [
+  "gray",
+  "brown",
+  "orange",
+  "yellow",
+  "green",
+  "blue",
+  "purple",
+  "pink",
+  "red",
+];
+
+export function getSelectionNotionSpanAttribute(
+  editor: Editor,
+  attribute: ColorAttribute,
+): string | null | "mixed" {
+  const { from, to } = editor.state.selection;
+  const markType = editor.state.schema.marks.notionSpan;
+  if (!markType) return null;
+
+  let observed: string | null = null;
+  let hasObserved = false;
+  let mixed = false;
+
+  editor.state.doc.nodesBetween(from, to, (node, _position, parent) => {
+    if (!node.isText || !parent?.type.allowsMarkType(markType)) return;
+    const mark = node.marks.find((candidate) => candidate.type === markType);
+    const value = (mark?.attrs[attribute] as string | null | undefined) ?? null;
+    if (!hasObserved) {
+      observed = value;
+      hasObserved = true;
+    } else if (observed !== value) {
+      mixed = true;
+    }
+  });
+
+  return mixed ? "mixed" : observed;
+}
+
+export function selectionHasColorableText(
+  state: EditorState,
+  from: number,
+  to: number,
+) {
+  const markType = state.schema.marks.notionSpan;
+  if (!markType) return false;
+
+  let hasText = false;
+  state.doc.nodesBetween(from, to, (node, _position, parent) => {
+    if (node.isText && parent?.type.allowsMarkType(markType)) hasText = true;
+    return !hasText;
+  });
+  return hasText;
+}
+
+export function setSelectionNotionSpanAttribute(
+  editor: Editor,
+  attribute: ColorAttribute,
+  value: string | null,
+) {
+  const { state } = editor;
+  const { from, to } = state.selection;
+  const markType = state.schema.marks.notionSpan;
+  if (!markType || from === to) return false;
+
+  const transaction = state.tr;
+  state.doc.nodesBetween(from, to, (node, position, parent) => {
+    if (!node.isText || !parent?.type.allowsMarkType(markType)) return;
+    const start = Math.max(from, position);
+    const end = Math.min(to, position + node.nodeSize);
+    if (start >= end) return;
+
+    const existing = node.marks.find((mark) => mark.type === markType);
+    const attrs = { ...existing?.attrs, [attribute]: value };
+    transaction.removeMark(start, end, markType);
+    if (
+      attrs.color ||
+      attrs.bgColor ||
+      attrs.underline ||
+      attrs.href ||
+      (attrs.attrsJson && attrs.attrsJson !== "{}")
+    ) {
+      transaction.addMark(start, end, markType.create(attrs));
+    }
+  });
+
+  if (!transaction.docChanged) return false;
+  editor.view.dispatch(transaction);
+  editor.commands.focus();
+  return true;
+}
 
 function activeTextStyle(editor: Editor): TextStyle {
   for (const level of [1, 2, 3, 4, 5, 6] as const) {
@@ -119,8 +222,16 @@ export function BubbleToolbar({ editor, onComment }: BubbleToolbarProps) {
   const [showLinkInput, setShowLinkInput] = useState(false);
   const [linkUrl, setLinkUrl] = useState("");
   const [textStyleOpen, setTextStyleOpen] = useState(false);
+  const [colorOpen, setColorOpen] = useState(false);
+  const [colorRevision, setColorRevision] = useState(0);
+  const [recentColor, setRecentColor] = useState<{
+    attribute: ColorAttribute;
+    value: string;
+  } | null>(null);
   const textStyleSelection = useRef<{ from: number; to: number } | null>(null);
+  const colorSelection = useRef<{ from: number; to: number } | null>(null);
   const textStyleApplied = useRef(false);
+  const colorApplied = useRef(false);
   const restoreEditorFocusOnClose = useRef(false);
   const [textStyle, setTextStyle] = useState<TextStyle>(() =>
     activeTextStyle(editor),
@@ -129,8 +240,12 @@ export function BubbleToolbar({ editor, onComment }: BubbleToolbarProps) {
   useEffect(() => {
     const syncTextStyle = () => {
       setTextStyle(activeTextStyle(editor));
+      setColorRevision((revision) => revision + 1);
       const { from, to } = editor.state.selection;
-      if (from !== to) textStyleSelection.current = { from, to };
+      if (from !== to) {
+        textStyleSelection.current = { from, to };
+        colorSelection.current = { from, to };
+      }
     };
     editor.on("selectionUpdate", syncTextStyle);
     editor.on("transaction", syncTextStyle);
@@ -199,6 +314,82 @@ export function BubbleToolbar({ editor, onComment }: BubbleToolbarProps) {
     setTextStyleOpen(false);
   };
 
+  const applyColor = (attribute: ColorAttribute, value: string | null) => {
+    if (colorSelection.current) {
+      editor.commands.setTextSelection(colorSelection.current);
+    }
+    if (!setSelectionNotionSpanAttribute(editor, attribute, value)) return;
+    if (value) setRecentColor({ attribute, value });
+    colorApplied.current = true;
+    setColorOpen(false);
+  };
+
+  const activeTextColor = getSelectionNotionSpanAttribute(editor, "color");
+  const activeBackgroundColor = getSelectionNotionSpanAttribute(
+    editor,
+    "bgColor",
+  );
+  void colorRevision;
+
+  const renderColorChoice = (
+    attribute: ColorAttribute,
+    value: string | null,
+  ) => {
+    const sectionLabel = t(
+      attribute === "color" ? "editor.textColor" : "editor.backgroundColor",
+    );
+    const colorName = value?.replace(/_bg$/, "") as ColorName | undefined;
+    const choiceLabel = colorName
+      ? t(`editor.color.${colorName}`)
+      : t("editor.defaultColor");
+    const activeValue =
+      attribute === "color" ? activeTextColor : activeBackgroundColor;
+    const isActive = activeValue !== "mixed" && activeValue === value;
+
+    return (
+      <button
+        key={`${attribute}-${value ?? "default"}`}
+        type="button"
+        role="menuitemradio"
+        aria-checked={isActive}
+        aria-label={`${sectionLabel}: ${choiceLabel}`}
+        onPointerDown={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          applyColor(attribute, value);
+        }}
+        onClick={(event) => {
+          if (event.detail === 0) applyColor(attribute, value);
+        }}
+        className={cn(
+          "relative flex size-8 items-center justify-center rounded-md border border-border bg-background text-sm font-semibold hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          isActive && "ring-2 ring-foreground",
+        )}
+      >
+        {attribute === "color" ? (
+          <span className={colorName ? `notion-block-color--${colorName}` : ""}>
+            A
+          </span>
+        ) : (
+          <span
+            className={cn(
+              "size-5 rounded border border-border",
+              colorName && `notion-block-bg--${colorName}`,
+            )}
+          />
+        )}
+        {isActive ? (
+          <IconCheck
+            aria-hidden="true"
+            className="absolute -end-1 -top-1 rounded-full bg-foreground p-0.5 text-background"
+            size={12}
+            strokeWidth={3}
+          />
+        ) : null}
+      </button>
+    );
+  };
+
   const openLinkInput = useCallback(() => {
     setLinkUrl(editor.getAttributes("link").href || "");
     setShowLinkInput(true);
@@ -318,6 +509,15 @@ export function BubbleToolbar({ editor, onComment }: BubbleToolbarProps) {
   };
 
   const items = [
+    { type: "text-style" as const },
+    ...(selectionHasColorableText(
+      editor.state,
+      editor.state.selection.from,
+      editor.state.selection.to,
+    )
+      ? [{ type: "color" as const }]
+      : []),
+    { type: "divider" as const },
     {
       icon: IconBold,
       title: t("editor.bold"),
@@ -343,8 +543,6 @@ export function BubbleToolbar({ editor, onComment }: BubbleToolbarProps) {
       isActive: () => editor.isActive("code"),
     },
     { type: "divider" as const },
-    { type: "text-style" as const },
-    { type: "divider" as const },
     {
       icon: IconLink,
       title: t("editor.link"),
@@ -529,6 +727,103 @@ export function BubbleToolbar({ editor, onComment }: BubbleToolbarProps) {
                 </Popover>
               );
             }
+            if ("type" in item && item.type === "color") {
+              return (
+                <Popover
+                  key="color"
+                  open={colorOpen}
+                  onOpenChange={(open) => {
+                    if (open) {
+                      colorApplied.current = false;
+                      restoreEditorFocusOnClose.current = false;
+                      const { from, to } = editor.state.selection;
+                      if (from !== to) colorSelection.current = { from, to };
+                    }
+                    setColorOpen(open);
+                  }}
+                >
+                  <PopoverTrigger asChild>
+                    <button
+                      type="button"
+                      aria-label={t("editor.color.label")}
+                      className={cn(
+                        "flex size-8 items-center justify-center rounded text-sm font-semibold text-popover-foreground/85 hover:bg-accent hover:text-accent-foreground",
+                        colorOpen && "bg-accent text-accent-foreground",
+                      )}
+                    >
+                      A
+                    </button>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    portalled={false}
+                    align="start"
+                    sideOffset={24}
+                    className="w-52 p-2"
+                    onEscapeKeyDown={() => {
+                      restoreEditorFocusOnClose.current = true;
+                      window.setTimeout(() => editor.commands.focus(), 0);
+                    }}
+                    onCloseAutoFocus={(event) => {
+                      if (
+                        colorApplied.current ||
+                        restoreEditorFocusOnClose.current
+                      ) {
+                        event.preventDefault();
+                      }
+                      if (restoreEditorFocusOnClose.current) {
+                        editor.commands.focus();
+                      }
+                      colorApplied.current = false;
+                      restoreEditorFocusOnClose.current = false;
+                    }}
+                  >
+                    {recentColor ? (
+                      <div className="mb-2">
+                        <div className="mb-1 text-xs font-medium text-muted-foreground">
+                          {t("editor.color.recentlyUsed")}
+                        </div>
+                        <div role="menu">
+                          {renderColorChoice(
+                            recentColor.attribute,
+                            recentColor.value,
+                          )}
+                        </div>
+                      </div>
+                    ) : null}
+                    <div className="mb-2">
+                      <div className="mb-1 text-xs font-medium text-muted-foreground">
+                        {t("editor.textColor")}
+                      </div>
+                      <div
+                        role="menu"
+                        aria-label={t("editor.textColor")}
+                        className="grid grid-cols-5 gap-1"
+                      >
+                        {renderColorChoice("color", null)}
+                        {COLOR_NAMES.map((name) =>
+                          renderColorChoice("color", name),
+                        )}
+                      </div>
+                    </div>
+                    <div>
+                      <div className="mb-1 text-xs font-medium text-muted-foreground">
+                        {t("editor.backgroundColor")}
+                      </div>
+                      <div
+                        role="menu"
+                        aria-label={t("editor.backgroundColor")}
+                        className="grid grid-cols-5 gap-1"
+                      >
+                        {renderColorChoice("bgColor", null)}
+                        {COLOR_NAMES.map((name) =>
+                          renderColorChoice("bgColor", `${name}_bg`),
+                        )}
+                      </div>
+                    </div>
+                  </PopoverContent>
+                </Popover>
+              );
+            }
             const {
               icon: Icon,
               title,

package/corpus/templates/content/app/components/editor/VisualEditor.tsx

@@ -76,6 +76,7 @@ import {
   LocalMdxComponentNode,
 } from "./extensions/LocalMdxComponentNode";
 import {
+  CompatibleCode,
   createNotionEditorExtensions,
   focusMostRecentEmptyToggleSummary,
   type NotionPageLink,
@@ -1645,6 +1646,7 @@ export function createVisualEditorExtensions({
     },
     starterKit: {
       blockquote: false,
+      code: false,
       paragraph: false,
       heading: { levels: [1, 2, 3, 4, 5, 6] },
       horizontalRule: {},
@@ -1653,6 +1655,7 @@ export function createVisualEditorExtensions({
     collab:
       ydoc || localAwareness ? { ydoc, awareness: localAwareness, user } : null,
     extraExtensions: [
+      CompatibleCode,
       EmptyLineParagraph,
       NotionBlockquote,
       CodeBlock,

package/corpus/templates/content/app/components/editor/extensions/NotionExtensions.tsx

@@ -1,4 +1,5 @@
 import { findTrailingPlainInlineMath } from "@shared/inline-math";
+import { NFM_COLORS } from "@shared/nfm";
 import {
   escapeHtml,
   indentMarkdown,
@@ -12,6 +13,7 @@ import {
   IconFileText,
 } from "@tabler/icons-react";
 import { InputRule, type Editor } from "@tiptap/core";
+import { Code } from "@tiptap/extension-code";
 import type { Fragment, Node as ProseMirrorNode } from "@tiptap/pm/model";
 import { Selection } from "@tiptap/pm/state";
 import {
@@ -745,12 +747,19 @@ export const NotionSpanMark = Mark.create({
   renderHTML({ HTMLAttributes }) {
     const attrs = parseAttrsJson(HTMLAttributes.attrsJson as string);
     const style: string[] = [];
+    const classes: string[] = [];
 
-    if (HTMLAttributes.color) {
-      style.push(`color: ${HTMLAttributes.color}`);
+    if (
+      NFM_COLORS.has(HTMLAttributes.color) &&
+      !HTMLAttributes.color.endsWith("_bg")
+    ) {
+      classes.push(`notion-block-color--${HTMLAttributes.color}`);
     }
-    if (HTMLAttributes.bgColor) {
-      style.push(`background-color: ${HTMLAttributes.bgColor}`);
+    if (
+      NFM_COLORS.has(HTMLAttributes.bgColor) &&
+      HTMLAttributes.bgColor.endsWith("_bg")
+    ) {
+      classes.push(`notion-block-bg--${HTMLAttributes.bgColor.slice(0, -3)}`);
     }
     if (HTMLAttributes.underline === "true") {
       style.push("text-decoration: underline");
@@ -764,6 +773,7 @@ export const NotionSpanMark = Mark.create({
         bg_color: HTMLAttributes.bgColor || undefined,
         underline: HTMLAttributes.underline || undefined,
         href: HTMLAttributes.href || undefined,
+        class: classes.length ? classes.join(" ") : undefined,
         style: style.length ? style.join("; ") : undefined,
       }),
       0,
@@ -787,6 +797,10 @@ export const NotionSpanMark = Mark.create({
   },
 });
 
+export const CompatibleCode = Code.extend({
+  excludes: "",
+});
+
 export const NotionToggle = Node.create({
   name: "notionToggle",
   priority: 1000,

package/corpus/templates/content/app/i18n-data.ts

@@ -3137,6 +3137,22 @@ const enUS = {
     italic: "Italic",
     strikethrough: "Strikethrough",
     code: "Code",
+    textColor: "Text color",
+    backgroundColor: "Background color",
+    defaultColor: "Default",
+    color: {
+      label: "Color",
+      recentlyUsed: "Recently used",
+      gray: "Gray",
+      brown: "Brown",
+      orange: "Orange",
+      yellow: "Yellow",
+      green: "Green",
+      blue: "Blue",
+      purple: "Purple",
+      pink: "Pink",
+      red: "Red",
+    },
     heading1: "Heading 1",
     heading2: "Heading 2",
     heading3: "Heading 3",
@@ -5729,6 +5745,22 @@ const databaseExactEnglishMessagesByLocale = {
 
 const editorMessagesByLocale = {
   "zh-CN": {
+    textColor: "文本颜色",
+    backgroundColor: "背景颜色",
+    defaultColor: "默认",
+    color: {
+      label: "颜色",
+      recentlyUsed: "最近使用",
+      gray: "灰色",
+      brown: "棕色",
+      orange: "橙色",
+      yellow: "黄色",
+      green: "绿色",
+      blue: "蓝色",
+      purple: "紫色",
+      pink: "粉色",
+      red: "红色",
+    },
     noDocumentSelected: "未选择文档",
     blocksFieldRevisionConflict:
       "此 Blocks 字段已在其他位置更改。你的编辑未保存；现已显示最新版本。",
@@ -6078,6 +6110,22 @@ const editorMessagesByLocale = {
     },
   },
   "es-ES": {
+    textColor: "Color de texto",
+    backgroundColor: "Color de fondo",
+    defaultColor: "Predeterminado",
+    color: {
+      label: "Color",
+      recentlyUsed: "Usados recientemente",
+      gray: "Gris",
+      brown: "Marrón",
+      orange: "Naranja",
+      yellow: "Amarillo",
+      green: "Verde",
+      blue: "Azul",
+      purple: "Morado",
+      pink: "Rosa",
+      red: "Rojo",
+    },
     noDocumentSelected: "Ningún documento seleccionado",
     blocksFieldRevisionConflict:
       "Este campo de bloques cambió en otro lugar. Tu edición no se guardó; ahora se muestra la versión más reciente.",
@@ -6440,6 +6488,22 @@ const editorMessagesByLocale = {
     },
   },
   "fr-FR": {
+    textColor: "Couleur du texte",
+    backgroundColor: "Couleur d’arrière-plan",
+    defaultColor: "Par défaut",
+    color: {
+      label: "Couleur",
+      recentlyUsed: "Utilisées récemment",
+      gray: "Gris",
+      brown: "Marron",
+      orange: "Orange",
+      yellow: "Jaune",
+      green: "Vert",
+      blue: "Bleu",
+      purple: "Violet",
+      pink: "Rose",
+      red: "Rouge",
+    },
     noDocumentSelected: "Aucun document sélectionné",
     blocksFieldRevisionConflict:
       "Ce champ de blocs a été modifié ailleurs. Votre modification n’a pas été enregistrée ; la dernière version est maintenant affichée.",
@@ -6807,6 +6871,22 @@ const editorMessagesByLocale = {
     },
   },
   "de-DE": {
+    textColor: "Textfarbe",
+    backgroundColor: "Hintergrundfarbe",
+    defaultColor: "Standard",
+    color: {
+      label: "Farbe",
+      recentlyUsed: "Zuletzt verwendet",
+      gray: "Grau",
+      brown: "Braun",
+      orange: "Orange",
+      yellow: "Gelb",
+      green: "Grün",
+      blue: "Blau",
+      purple: "Violett",
+      pink: "Rosa",
+      red: "Rot",
+    },
     noDocumentSelected: "Kein Dokument ausgewählt",
     blocksFieldRevisionConflict:
       "Dieses Blocks-Feld wurde an anderer Stelle geändert. Deine Bearbeitung wurde nicht gespeichert; jetzt wird die neueste Version angezeigt.",
@@ -7177,6 +7257,22 @@ const editorMessagesByLocale = {
     },
   },
   "ja-JP": {
+    textColor: "テキストの色",
+    backgroundColor: "背景色",
+    defaultColor: "デフォルト",
+    color: {
+      label: "色",
+      recentlyUsed: "最近使用した色",
+      gray: "灰色",
+      brown: "茶色",
+      orange: "オレンジ",
+      yellow: "黄色",
+      green: "緑",
+      blue: "青",
+      purple: "紫",
+      pink: "ピンク",
+      red: "赤",
+    },
     noDocumentSelected: "ドキュメントが選択されていません",
     blocksFieldRevisionConflict:
       "このブロックフィールドは別の場所で変更されました。編集内容は保存されず、最新バージョンが表示されています。",
@@ -7536,6 +7632,22 @@ const editorMessagesByLocale = {
     },
   },
   "ko-KR": {
+    textColor: "텍스트 색상",
+    backgroundColor: "배경색",
+    defaultColor: "기본값",
+    color: {
+      label: "색상",
+      recentlyUsed: "최근 사용",
+      gray: "회색",
+      brown: "갈색",
+      orange: "주황색",
+      yellow: "노란색",
+      green: "녹색",
+      blue: "파란색",
+      purple: "보라색",
+      pink: "분홍색",
+      red: "빨간색",
+    },
     noDocumentSelected: "선택한 문서가 없습니다.",
     blocksFieldRevisionConflict:
       "이 블록 필드가 다른 곳에서 변경되었습니다. 편집 내용은 저장되지 않았으며 최신 버전이 표시됩니다.",
@@ -7894,6 +8006,22 @@ const editorMessagesByLocale = {
     },
   },
   "pt-BR": {
+    textColor: "Cor do texto",
+    backgroundColor: "Cor de fundo",
+    defaultColor: "Padrão",
+    color: {
+      label: "Cor",
+      recentlyUsed: "Usadas recentemente",
+      gray: "Cinza",
+      brown: "Marrom",
+      orange: "Laranja",
+      yellow: "Amarelo",
+      green: "Verde",
+      blue: "Azul",
+      purple: "Roxo",
+      pink: "Rosa",
+      red: "Vermelho",
+    },
     noDocumentSelected: "Nenhum documento selecionado",
     blocksFieldRevisionConflict:
       "Este campo de blocos foi alterado em outro lugar. Sua edição não foi salva; a versão mais recente agora está sendo exibida.",
@@ -8258,6 +8386,22 @@ const editorMessagesByLocale = {
     },
   },
   "hi-IN": {
+    textColor: "टेक्स्ट का रंग",
+    backgroundColor: "पृष्ठभूमि का रंग",
+    defaultColor: "डिफ़ॉल्ट",
+    color: {
+      label: "रंग",
+      recentlyUsed: "हाल में उपयोग किए गए",
+      gray: "स्लेटी",
+      brown: "भूरा",
+      orange: "नारंगी",
+      yellow: "पीला",
+      green: "हरा",
+      blue: "नीला",
+      purple: "बैंगनी",
+      pink: "गुलाबी",
+      red: "लाल",
+    },
     noDocumentSelected: "कोई दस्तावेज़ चयनित नहीं",
     blocksFieldRevisionConflict:
       "यह ब्लॉक फ़ील्ड कहीं और बदल गया है। आपका संपादन सहेजा नहीं गया; अब नवीनतम संस्करण दिखाया जा रहा है।",
@@ -8612,6 +8756,22 @@ const editorMessagesByLocale = {
     },
   },
   "ar-SA": {
+    textColor: "لون النص",
+    backgroundColor: "لون الخلفية",
+    defaultColor: "افتراضي",
+    color: {
+      label: "اللون",
+      recentlyUsed: "المستخدمة مؤخراً",
+      gray: "رمادي",
+      brown: "بني",
+      orange: "برتقالي",
+      yellow: "أصفر",
+      green: "أخضر",
+      blue: "أزرق",
+      purple: "أرجواني",
+      pink: "وردي",
+      red: "أحمر",
+    },
     noDocumentSelected: "لم يتم تحديد أي مستند",
     blocksFieldRevisionConflict:
       "تم تغيير حقل الكتل هذا في مكان آخر. لم يتم حفظ تعديلك؛ ويظهر الآن أحدث إصدار.",