@beyondwork/docx-react-component 1.0.19 → 1.0.20

package/src/ui-tailwind/chrome/tw-object-context-toolbar.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+export interface ActiveObjectContext {
+  kind: "textbox" | "shape";
+  display: "inline" | "floating";
+}
+
+export interface TwObjectContextToolbarProps {
+  activeObject: ActiveObjectContext;
+}
+
+export function TwObjectContextToolbar(props: TwObjectContextToolbarProps) {
+  const label = props.activeObject.kind === "textbox" ? "Text box" : "Shape";
+
+  return (
+    <div
+      data-testid="object-context-toolbar"
+      className="flex flex-wrap items-center gap-2 rounded-xl border border-border bg-canvas px-3 py-2 shadow-sm"
+    >
+      <span className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+        Object
+      </span>
+      <span className="rounded-full bg-surface px-2 py-1 text-[10px] font-medium uppercase tracking-[0.1em] text-secondary">
+        {label}
+      </span>
+      <span className="rounded-full bg-surface px-2 py-1 text-[10px] font-medium uppercase tracking-[0.1em] text-secondary">
+        {props.activeObject.display}
+      </span>
+      <span className="text-xs text-secondary">
+        Object selection is active.
+      </span>
+    </div>
+  );
+}

package/src/ui-tailwind/chrome/tw-selection-toolbar.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import type { FocusEventHandler } from "react";
 import * as Tooltip from "@radix-ui/react-tooltip";
-import { Bold, Italic, MessageSquare, Underline } from "lucide-react";
+import { Baseline, Bold, Highlighter, Italic, MessageSquare, Underline } from "lucide-react";
 
 import type { SelectionToolbarModel } from "../../ui/headless/selection-toolbar-model";
 import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
@@ -14,6 +14,8 @@ export interface TwSelectionToolbarProps {
   onToggleBold?: () => void;
   onToggleItalic?: () => void;
   onToggleUnderline?: () => void;
+  onSetTextColor?: (color: string) => void;
+  onSetHighlightColor?: (color: string | null) => void;
   onAddComment?: () => void;
 }
 
@@ -60,6 +62,20 @@ export const TwSelectionToolbar = forwardRef<HTMLDivElement, TwSelectionToolbarP
         disabled={formattingDisabled}
         onClick={props.onToggleUnderline}
       />
+      <ToolbarActionButton
+        icon={<Baseline className="h-3.5 w-3.5" />}
+        label="Text color blue"
+        pressed={false}
+        disabled={formattingDisabled}
+        onClick={() => props.onSetTextColor?.("#1660a8")}
+      />
+      <ToolbarActionButton
+        icon={<Highlighter className="h-3.5 w-3.5" />}
+        label="Highlight yellow"
+        pressed={false}
+        disabled={formattingDisabled}
+        onClick={() => props.onSetHighlightColor?.("#ffff00")}
+      />
 
       <div className="mx-0.5 h-4 w-px bg-border" />
 
@@ -86,9 +102,18 @@ export const TwSelectionToolbar = forwardRef<HTMLDivElement, TwSelectionToolbarP
         </Tooltip.Portal>
       </Tooltip.Root>
 
-      {contextLabel ? (
+      {model.previewText ? (
         <>
           <div className="mx-0.5 h-4 w-px bg-border" />
+          <span className="max-w-[8rem] truncate text-[11px] text-secondary">
+            {model.previewText}
+          </span>
+        </>
+      ) : null}
+
+      {contextLabel ? (
+        <>
+          {!model.previewText ? <div className="mx-0.5 h-4 w-px bg-border" /> : null}
           <span
             className={`min-w-0 max-w-[11rem] truncate rounded-full px-2 py-0.5 text-[10px] font-medium tracking-[0.08em] ${
               model.badges.some((badge) => badge.tone === "accent")

package/src/ui-tailwind/chrome/tw-table-context-toolbar.tsx

@@ -0,0 +1,128 @@
+import React from "react";
+
+import type { StyleCatalogSnapshot } from "../../api/public-types";
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+
+export interface TwTableContextToolbarProps {
+  disabled: boolean;
+  tableStyles: StyleCatalogSnapshot["tables"];
+  onSetTableStyle?: (styleId: string) => void;
+  onAddRowBefore?: () => void;
+  onAddRowAfter?: () => void;
+  onAddColumnBefore?: () => void;
+  onAddColumnAfter?: () => void;
+  onDeleteRow?: () => void;
+  onDeleteColumn?: () => void;
+  onMergeCells?: () => void;
+  onSplitCell?: () => void;
+  onSetCellBackground?: (color: string) => void;
+  onDeleteTable?: () => void;
+}
+
+const CELL_COLORS = [
+  "#ffffff",
+  "#f0f0ee",
+  "#dbeafe",
+  "#fef3c7",
+  "#dcfce7",
+  "#fce7f3",
+] as const;
+
+export function TwTableContextToolbar(props: TwTableContextToolbarProps) {
+  return (
+    <div
+      data-testid="table-context-toolbar"
+      className="flex flex-wrap items-center gap-2 rounded-xl border border-border bg-canvas px-3 py-2 shadow-sm"
+    >
+      <span className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+        Table
+      </span>
+
+      <select
+        aria-label="Table style"
+        className="h-8 rounded-md border border-border bg-canvas px-2 text-xs text-primary disabled:opacity-40"
+        disabled={props.disabled || props.tableStyles.length === 0 || !props.onSetTableStyle}
+        onMouseDown={preserveEditorSelectionMouseDown}
+        onChange={(event) => props.onSetTableStyle?.(event.target.value)}
+        defaultValue=""
+      >
+        <option value="" disabled>Table style</option>
+        {props.tableStyles.map((style) => (
+          <option key={style.styleId} value={style.styleId}>
+            {style.displayName}
+          </option>
+        ))}
+      </select>
+
+      <ToolbarButton ariaLabel="Add row above" disabled={props.disabled} onClick={props.onAddRowBefore}>
+        Row above
+      </ToolbarButton>
+      <ToolbarButton ariaLabel="Add row below" disabled={props.disabled} onClick={props.onAddRowAfter}>
+        Row below
+      </ToolbarButton>
+      <ToolbarButton ariaLabel="Delete row" disabled={props.disabled} onClick={props.onDeleteRow}>
+        Delete row
+      </ToolbarButton>
+      <ToolbarButton ariaLabel="Add column left" disabled={props.disabled} onClick={props.onAddColumnBefore}>
+        Column left
+      </ToolbarButton>
+      <ToolbarButton ariaLabel="Add column right" disabled={props.disabled} onClick={props.onAddColumnAfter}>
+        Column right
+      </ToolbarButton>
+      <ToolbarButton ariaLabel="Delete column" disabled={props.disabled} onClick={props.onDeleteColumn}>
+        Delete column
+      </ToolbarButton>
+      <ToolbarButton ariaLabel="Merge cells" disabled={props.disabled} onClick={props.onMergeCells}>
+        Merge
+      </ToolbarButton>
+      <ToolbarButton ariaLabel="Split cell" disabled={props.disabled} onClick={props.onSplitCell}>
+        Split
+      </ToolbarButton>
+
+      <div className="flex items-center gap-1">
+        <span className="text-[11px] text-secondary">Fill</span>
+        {CELL_COLORS.map((color) => (
+          <button
+            key={color}
+            type="button"
+            aria-label={`Set cell fill ${color}`}
+            disabled={props.disabled || !props.onSetCellBackground}
+            onMouseDown={preserveEditorSelectionMouseDown}
+            onClick={() => props.onSetCellBackground?.(color)}
+            className="h-6 w-6 rounded border border-border disabled:opacity-40"
+            style={{ backgroundColor: color }}
+          />
+        ))}
+      </div>
+
+      <ToolbarButton ariaLabel="Delete table" danger disabled={props.disabled} onClick={props.onDeleteTable}>
+        Delete table
+      </ToolbarButton>
+    </div>
+  );
+}
+
+function ToolbarButton(props: {
+  ariaLabel: string;
+  children: React.ReactNode;
+  danger?: boolean;
+  disabled: boolean;
+  onClick?: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={props.ariaLabel}
+      disabled={props.disabled || !props.onClick}
+      onMouseDown={preserveEditorSelectionMouseDown}
+      onClick={props.onClick}
+      className={`inline-flex h-8 items-center rounded-md px-2 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${
+        props.danger
+          ? "text-danger hover:bg-danger/10"
+          : "text-primary hover:bg-surface"
+      }`}
+    >
+      {props.children}
+    </button>
+  );
+}

package/src/ui-tailwind/editor-surface/perf-probe.ts

@@ -1,4 +1,16 @@
-export type PerfProbeKind = "typing" | "selection";
+export type PerfProbeKind =
+  | "typing"
+  | "selection"
+  | "runtime.create"
+  | "snapshot.surface"
+  | "snapshot.compatibility"
+  | "snapshot.navigation"
+  | "pm.rebuild"
+  | "pm.decorations"
+  | "pm.mount"
+  | "shell.render"
+  | "workspace.chrome"
+  | "selection.sync";
 
 export interface PerfProbeSample {
   token: string;
@@ -18,14 +30,13 @@ interface PerfProbeState {
   pending?: Record<string, PendingProbe>;
   samples?: PerfProbeSample[];
   maxSamples?: number;
+  invalidationCounts?: Record<string, number>;
 }
 
 export interface PerfProbeSummary {
   samples: PerfProbeSample[];
-  latest: {
-    typing: PerfProbeSample | null;
-    selection: PerfProbeSample | null;
-  };
+  latest: Partial<Record<PerfProbeKind, PerfProbeSample | null>>;
+  invalidationCounts: Record<string, number>;
 }
 
 declare global {
@@ -69,16 +80,47 @@ export function finishPerfProbe(token: string | null | undefined): PerfProbeSamp
     recordedAt: Date.now(),
   };
 
-  state.samples ??= [];
-  state.samples.push(sample);
-  const maxSamples = state.maxSamples ?? 20;
-  if (state.samples.length > maxSamples) {
-    state.samples.splice(0, state.samples.length - maxSamples);
+  pushSample(state, sample);
+
+  return sample;
+}
+
+export function recordPerfSample(
+  kind: PerfProbeKind,
+  durationMs = 0,
+): PerfProbeSample | null {
+  const state = getEnabledState();
+  if (!state) {
+    return null;
   }
 
+  const token = `${kind}-${state.nextToken ?? 0}`;
+  state.nextToken = (state.nextToken ?? 0) + 1;
+  const sample: PerfProbeSample = {
+    token,
+    kind,
+    durationMs,
+    recordedAt: Date.now(),
+  };
+  pushSample(state, sample);
   return sample;
 }
 
+export function incrementInvalidationCounter(
+  counter: string,
+  amount = 1,
+): number {
+  const state = getEnabledState();
+  if (!state) {
+    return 0;
+  }
+
+  state.invalidationCounts ??= {};
+  state.invalidationCounts[counter] =
+    (state.invalidationCounts[counter] ?? 0) + amount;
+  return state.invalidationCounts[counter]!;
+}
+
 export function getLatestPerfSummary(): PerfProbeSummary | null {
   const state = getEnabledState();
   const samples = state?.samples ?? [];
@@ -88,13 +130,22 @@ export function getLatestPerfSummary(): PerfProbeSummary | null {
 
   return {
     samples: [...samples],
-    latest: {
-      typing: [...samples].reverse().find((sample) => sample.kind === "typing") ?? null,
-      selection: [...samples].reverse().find((sample) => sample.kind === "selection") ?? null,
-    },
+    latest: buildLatestSampleMap(samples),
+    invalidationCounts: { ...(state.invalidationCounts ?? {}) },
   };
 }
 
+export function resetPerfProbeState(): void {
+  const state = getEnabledState();
+  if (!state) {
+    return;
+  }
+  state.nextToken = 0;
+  state.pending = {};
+  state.samples = [];
+  state.invalidationCounts = {};
+}
+
 function getEnabledState(): PerfProbeState | null {
   if (typeof window === "undefined") {
     return null;
@@ -105,3 +156,24 @@ function getEnabledState(): PerfProbeState | null {
   }
   return state;
 }
+
+function pushSample(state: PerfProbeState, sample: PerfProbeSample): void {
+  state.samples ??= [];
+  state.samples.push(sample);
+  const maxSamples = state.maxSamples ?? 20;
+  if (state.samples.length > maxSamples) {
+    state.samples.splice(0, state.samples.length - maxSamples);
+  }
+}
+
+function buildLatestSampleMap(
+  samples: PerfProbeSample[],
+): Partial<Record<PerfProbeKind, PerfProbeSample | null>> {
+  const latest: Partial<Record<PerfProbeKind, PerfProbeSample | null>> = {};
+  for (const sample of [...samples].reverse()) {
+    if (latest[sample.kind] === undefined) {
+      latest[sample.kind] = sample;
+    }
+  }
+  return latest;
+}

package/src/ui-tailwind/editor-surface/pm-command-bridge.ts

@@ -72,9 +72,9 @@ export function createCommandBridgePlugins(
               return;
             }
 
-            const { from, to } = view.state.selection;
+            const { anchor, head } = view.state.selection;
             callbacks.onSelectionChange(
-              createSelectionSnapshot(posMap.pmToRuntime(from), posMap.pmToRuntime(to)),
+              createSelectionSnapshot(posMap.pmToRuntime(anchor), posMap.pmToRuntime(head)),
             );
           }
         },

package/src/ui-tailwind/editor-surface/pm-decorations.ts

@@ -4,6 +4,8 @@ import type { CommentDecorationModel } from "../../ui/headless/comment-decoratio
 import { getCommentHighlightClass, type MarkupDisplay } from "../../ui/headless/comment-decoration-model";
 import type { RevisionDecorationModel } from "../../ui/headless/revision-decoration-model";
 import { getRevisionHighlightClass } from "../../ui/headless/revision-decoration-model";
+import type { EditorStoryTarget, WorkflowScope } from "../../api/public-types";
+import { MAIN_STORY_TARGET, storyTargetsEqual } from "../../core/selection/mapping.ts";
 import type { PositionMap } from "./pm-position-map";
 import type { Node as PMNode } from "prosemirror-model";
 
@@ -21,6 +23,8 @@ export function buildDecorations(
   revisionModel: RevisionDecorationModel | undefined,
   markupDisplay: MarkupDisplay,
   showTrackedChanges = true,
+  workflowScopes?: readonly WorkflowScope[],
+  activeStory: EditorStoryTarget = MAIN_STORY_TARGET,
 ): DecorationSet {
   const decorations: Decoration[] = [];
 
@@ -94,5 +98,36 @@ export function buildDecorations(
     }
   }
 
+  // Walk workflow scopes and create inline decorations for scope emphasis.
+  if (workflowScopes) {
+    for (const scope of workflowScopes) {
+      const scopeStoryTarget = scope.storyTarget ?? MAIN_STORY_TARGET;
+      if (!storyTargetsEqual(scopeStoryTarget, activeStory)) continue;
+      if (scope.anchor.kind === "detached") continue;
+      const from = scope.anchor.kind === "range" ? scope.anchor.from : scope.anchor.at;
+      const to = scope.anchor.kind === "range" ? scope.anchor.to : scope.anchor.at;
+      const pmFrom = positionMap.runtimeToPm(from);
+      const pmTo = positionMap.runtimeToPm(to);
+      if (pmFrom >= pmTo) continue;
+
+      const modeClass =
+        scope.mode === "edit"
+          ? "bg-blue-50/40 ring-1 ring-blue-200/50"
+          : scope.mode === "suggest"
+            ? "bg-amber-50/40 ring-1 ring-amber-200/50"
+            : scope.mode === "comment"
+              ? "bg-green-50/40 ring-1 ring-green-200/50"
+              : "bg-gray-50/40 ring-1 ring-gray-200/50";
+
+      decorations.push(
+        Decoration.inline(pmFrom, pmTo, {
+          class: modeClass,
+          "data-workflow-scope-id": scope.scopeId,
+          "data-workflow-scope-mode": scope.mode,
+        }),
+      );
+    }
+  }
+
   return DecorationSet.create(doc, decorations);
 }

package/src/ui-tailwind/editor-surface/pm-position-map.ts

@@ -29,7 +29,7 @@ export function buildPositionMap(surface: EditorSurfaceSnapshot): PositionMap {
       }
 
       for (const entry of entries) {
-        if (runtimePos >= entry.runtimeStart && runtimePos <= entry.runtimeEnd) {
+        if (runtimePos >= entry.runtimeStart && runtimePos < entry.runtimeEnd) {
           return entry.pmStart + (runtimePos - entry.runtimeStart);
         }
         if (runtimePos < entry.runtimeStart) {

package/src/ui-tailwind/editor-surface/pm-schema.ts

@@ -16,14 +16,21 @@ function resolveHeadingLevel(
 ): number | null {
   if (styleId) {
     const normalized = styleId.toLowerCase();
-    const headingMatch = /^heading([1-6])$/.exec(normalized);
+    const compact = normalized.replace(/[\s_-]+/g, "");
+    const headingMatch = /^heading([1-6])$/.exec(compact);
     if (headingMatch) {
       return Number.parseInt(headingMatch[1], 10);
     }
-    if (normalized === "title") {
+    if (compact === "title") {
       return 1;
     }
-    if (normalized === "subtitle") {
+    if (compact === "subtitle") {
+      return 2;
+    }
+    if (compact === "tocheading") {
+      return 1;
+    }
+    if (/^(appendix|schedule|annex|exhibit|attachment)(heading|title)$/.test(compact)) {
       return 2;
     }
   }
@@ -74,6 +81,24 @@ function safeCssColor(raw: string | null | undefined): string | null {
   return null;
 }
 
+function sanitizeLinkHref(raw: string | null | undefined): string | null {
+  if (!raw) return null;
+  const trimmed = raw.trim();
+  if (trimmed.startsWith("#")) {
+    return trimmed;
+  }
+  const lower = trimmed.toLowerCase();
+  if (
+    lower.startsWith("http://") ||
+    lower.startsWith("https://") ||
+    lower.startsWith("mailto:") ||
+    lower.startsWith("tel:")
+  ) {
+    return trimmed;
+  }
+  return null;
+}
+
 /**
  * ProseMirror schema for the supported live surface slice.
  *
@@ -101,9 +126,14 @@ export const editorSchema = new Schema({
         spacingAfter: { default: null },
         lineSpacing: { default: null },
         lineRule: { default: null },
+        contextualSpacing: { default: null },
+        listContinuation: { default: null },
+        contextualSpacingBefore: { default: null },
+        contextualSpacingAfter: { default: null },
         indentLeft: { default: null },
         indentRight: { default: null },
         indentFirstLine: { default: null },
+        indentHanging: { default: null },
         shadingFill: { default: null },
         borderTop: { default: null },
         borderBottom: { default: null },
@@ -128,9 +158,13 @@ export const editorSchema = new Schema({
         const safeAlign = alignment === "both" ? "justify" : alignment;
         if (safeAlign && SAFE_ALIGNMENT.has(safeAlign)) styles.push(`text-align: ${safeAlign}`);
         const spacingBefore = node.attrs.spacingBefore as number | null;
-        if (spacingBefore) styles.push(`margin-top: ${spacingBefore / 20}px`);
+        const contextualSpacingBefore = node.attrs.contextualSpacingBefore as boolean | null;
+        if (contextualSpacingBefore) styles.push("margin-top: 0");
+        else if (spacingBefore) styles.push(`margin-top: ${spacingBefore / 20}px`);
+        const contextualSpacingAfter = node.attrs.contextualSpacingAfter as boolean | null;
         const spacingAfter = node.attrs.spacingAfter as number | null;
-        if (spacingAfter) styles.push(`margin-bottom: ${spacingAfter / 20}px`);
+        if (contextualSpacingAfter) styles.push("margin-bottom: 0");
+        else if (spacingAfter) styles.push(`margin-bottom: ${spacingAfter / 20}px`);
         const lineSpacing = node.attrs.lineSpacing as number | null;
         const lineRule = node.attrs.lineRule as string | null;
         if (lineSpacing && lineRule === "auto") styles.push(`line-height: ${lineSpacing / 240}`);
@@ -141,7 +175,9 @@ export const editorSchema = new Schema({
         const indentRight = node.attrs.indentRight as number | null;
         if (indentRight) styles.push(`padding-right: ${indentRight / 20}px`);
         const indentFirstLine = node.attrs.indentFirstLine as number | null;
-        if (indentFirstLine) styles.push(`text-indent: ${indentFirstLine / 20}px`);
+        const indentHanging = node.attrs.indentHanging as number | null;
+        if (indentHanging) styles.push(`text-indent: -${indentHanging / 20}px`);
+        else if (indentFirstLine) styles.push(`text-indent: ${indentFirstLine / 20}px`);
         const shadingColor = safeHexColor(node.attrs.shadingFill as string | null);
         if (shadingColor) styles.push(`background-color: ${shadingColor}`);
         for (const [side, attrName] of [["top", "borderTop"], ["bottom", "borderBottom"], ["left", "borderLeft"], ["right", "borderRight"]] as const) {
@@ -160,6 +196,24 @@ export const editorSchema = new Schema({
         if (headingLevel) {
           attrs["data-heading-level"] = String(headingLevel);
         }
+        const isNumbered = node.attrs.numberingInstanceId !== null;
+        if (isNumbered) {
+          attrs["data-numbered"] = "true";
+        }
+        const contextualSpacing = node.attrs.contextualSpacing as boolean | null;
+        if (contextualSpacing) {
+          attrs["data-contextual-spacing"] = "true";
+        }
+        const listContinuation = node.attrs.listContinuation as boolean | null;
+        if (listContinuation) {
+          attrs["data-list-continuation"] = "true";
+        }
+        if (contextualSpacingBefore) {
+          attrs["data-contextual-spacing-before"] = "true";
+        }
+        if (contextualSpacingAfter) {
+          attrs["data-contextual-spacing-after"] = "true";
+        }
         if (styles.length > 0) attrs.style = styles.join("; ");
         const numberingPrefix = node.attrs.numberingPrefix as string | null;
         const numberingLevel = node.attrs.numberingLevel as number | null;
@@ -277,10 +331,43 @@ export const editorSchema = new Schema({
         state: { default: "editable" },
         display: { default: "inline" },
         detail: { default: null },
+        src: { default: null },
+        widthEmu: { default: null },
+        heightEmu: { default: null },
       },
       toDOM(node) {
         const isMissing = node.attrs.state === "missing";
         const isFloating = node.attrs.display === "floating";
+        const src = node.attrs.src as string | null;
+        const widthEmu = node.attrs.widthEmu as number | null;
+        const heightEmu = node.attrs.heightEmu as number | null;
+        if (!isMissing && src) {
+          const widthPx = widthEmu ? Math.max(24, Math.round(widthEmu / 9525)) : undefined;
+          const heightPx = heightEmu ? Math.max(24, Math.round(heightEmu / 9525)) : undefined;
+          const style = [
+            "display:inline-block",
+            "vertical-align:middle",
+            "margin:0 4px",
+            widthPx ? `width:${widthPx}px` : "",
+            heightPx ? `height:${heightPx}px` : "",
+          ].filter(Boolean).join(";");
+          return [
+            "span",
+            {
+              class: "inline-flex items-center rounded",
+              "data-node-type": "image",
+              title: (node.attrs.detail as string) ?? (node.attrs.altText as string) ?? "Image",
+            },
+            [
+              "img",
+              {
+                src,
+                alt: (node.attrs.altText as string) ?? "",
+                style,
+              },
+            ],
+          ];
+        }
         return [
           "span",
           {
@@ -380,6 +467,39 @@ export const editorSchema = new Schema({
       },
     },
 
+    field_ref_atom: {
+      inline: true,
+      group: "inline",
+      atom: true,
+      selectable: false,
+      attrs: {
+        fieldFamily: { default: "REF" },
+        fieldTarget: { default: null },
+        instruction: { default: "" },
+        refreshStatus: { default: "stale" },
+        label: { default: "Field" },
+      },
+      toDOM(node) {
+        const refreshStatus = node.attrs.refreshStatus as string;
+        const statusClass =
+          refreshStatus === "current"
+            ? "text-blue-700 bg-blue-50 border-blue-200"
+            : refreshStatus === "unresolvable"
+              ? "text-amber-800 bg-amber-50 border-amber-200"
+              : "text-slate-700 bg-slate-50 border-slate-200";
+        return [
+          "span",
+          {
+            class: `inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded text-xs border ${statusClass}`,
+            "data-node-type": "field_ref_atom",
+            "data-field-family": node.attrs.fieldFamily as string,
+            title: node.attrs.instruction as string,
+          },
+          (node.attrs.label as string) || "Field",
+        ];
+      },
+    },
+
     table: tableNodeSpec,
     table_row: tableRowNodeSpec,
     table_cell: tableCellNodeSpec,
@@ -724,15 +844,26 @@ export const editorSchema = new Schema({
         {
           tag: "a[href]",
           getAttrs(dom) {
-            return { href: (dom as HTMLElement).getAttribute("href") };
+            return { href: sanitizeLinkHref((dom as HTMLElement).getAttribute("href")) ?? "" };
           },
         },
       ],
       toDOM(mark) {
+        const href = sanitizeLinkHref(mark.attrs.href as string);
+        if (!href) {
+          return [
+            "span",
+            {
+              class: "text-accent underline decoration-1 underline-offset-2",
+              "data-invalid-link": "true",
+            },
+            0,
+          ];
+        }
         return [
           "a",
           {
-            href: mark.attrs.href as string,
+            href,
             class: "text-accent underline decoration-1 underline-offset-2",
             target: "_blank",
             rel: "noopener noreferrer",