@beyondwork/docx-react-component 1.0.29 → 1.0.31

package/src/ui-tailwind/editor-surface/tw-paragraph-block.tsx

@@ -0,0 +1,151 @@
+import React from "react";
+
+import type { SelectionSnapshot, SurfaceBlockSnapshot, SurfaceInlineSegment } from "../../api/public-types";
+import type { CommentDecorationModel } from "../../ui/headless/comment-decoration-model";
+import { getCommentRangeState, type MarkupDisplay } from "../../ui/headless/comment-decoration-model";
+import type { RevisionDecorationModel } from "../../ui/headless/revision-decoration-model";
+import { getRevisionRangeState } from "../../ui/headless/revision-decoration-model";
+import { createSelectionSnapshot } from "../../ui/headless/selection-helpers";
+import { renderTwCaret } from "./tw-caret";
+import { TwSegmentView } from "./tw-segment-view";
+
+export interface TwParagraphBlockProps {
+  block: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>;
+  selection: SelectionSnapshot;
+  markupDisplay: MarkupDisplay;
+  commentDecorations?: CommentDecorationModel;
+  revisionDecorations?: RevisionDecorationModel;
+  onSelectionChange?: (selection: SelectionSnapshot) => void;
+  onCommentActivated?: (commentId: string) => void;
+  onRevisionActivated?: (revisionId: string) => void;
+}
+
+export function TwParagraphBlock(props: TwParagraphBlockProps) {
+  const { block, selection, markupDisplay } = props;
+  const headingLevel = inferHeadingLevel(block.styleId);
+  const hasComment = getCommentRangeState(props.commentDecorations, block.from, block.to).hasComments;
+  const hasChange = getRevisionRangeState(props.revisionDecorations, block.from, block.to).hasChanges;
+
+  // Margin indicator per mode
+  let marginClass = "";
+  if (markupDisplay === "simple" && (hasComment || hasChange)) {
+    if (hasComment && hasChange) marginClass = "border-l-2 border-l-comment/50 pl-3 ";
+    else if (hasComment) marginClass = "border-l-2 border-l-comment/40 pl-3 ";
+    else marginClass = "border-l-2 border-l-insert/40 pl-3 ";
+  }
+
+  // Dot markers for gutter
+  const dots: string[] = [];
+  if (markupDisplay === "clean" && hasComment) {
+    dots.push("var(--color-comment)");
+  } else if (markupDisplay !== "simple") {
+    if (hasComment) dots.push("var(--color-comment)");
+    if (hasChange) dots.push("var(--color-insert)");
+  }
+
+  const segmentElements = (
+    <>
+      <CaretButton
+        position={block.from}
+        selection={selection}
+        onSelectionChange={props.onSelectionChange}
+      />
+      {block.segments.length > 0 ? (
+        block.segments.map((segment) => (
+          <TwSegmentView
+            key={segment.segmentId}
+            segment={segment}
+            selection={selection}
+            markupDisplay={markupDisplay}
+            commentDecorations={props.commentDecorations}
+            revisionDecorations={props.revisionDecorations}
+            onSelectionChange={props.onSelectionChange}
+            onCommentActivated={props.onCommentActivated}
+            onRevisionActivated={props.onRevisionActivated}
+          />
+        ))
+      ) : (
+        <span className="text-secondary italic">Empty paragraph</span>
+      )}
+      <CaretButton
+        position={block.to}
+        selection={selection}
+        onSelectionChange={props.onSelectionChange}
+      />
+    </>
+  );
+
+  return (
+    <div className="group relative">
+      <BlockHint
+        label={headingLevel ? `H${headingLevel}` : "P"}
+        dots={dots.length > 0 ? dots : undefined}
+      />
+      {headingLevel ? (
+        <div className={`${marginClass}transition-colors`}>
+          <HeadingElement level={headingLevel}>{segmentElements}</HeadingElement>
+        </div>
+      ) : (
+        <p className={`text-base leading-[1.75] text-primary ${marginClass}transition-colors`}>
+          {segmentElements}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function CaretButton(props: {
+  position: number;
+  selection: SelectionSnapshot;
+  onSelectionChange?: (selection: SelectionSnapshot) => void;
+}) {
+  const isActive = props.selection.isCollapsed && props.selection.anchor === props.position;
+  return (
+    <button
+      type="button"
+      tabIndex={-1}
+      onMouseDown={(e) => {
+        e.preventDefault();
+        props.onSelectionChange?.(createSelectionSnapshot(props.position));
+      }}
+      aria-label={`Set caret at ${props.position}`}
+      className={`p-0 m-0 border-none bg-transparent cursor-text inline-flex items-center ${isActive ? "min-w-[2px] h-[22px]" : "w-0 h-0 overflow-hidden"}`}
+    >
+      {renderTwCaret(props.selection, props.position)}
+    </button>
+  );
+}
+
+function BlockHint(props: { label: string; dots?: string[] }) {
+  return (
+    <div className="absolute -left-10 top-1 flex flex-col items-end gap-0 select-none w-8 text-right">
+      <div className="flex items-center gap-0.5">
+        <span className="text-[10px] text-tertiary/60 font-medium">{props.label}</span>
+        {props.dots?.map((color, i) => (
+          <span
+            key={i}
+            className="inline-block h-1 w-1 rounded-full"
+            style={{ backgroundColor: color }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function HeadingElement(props: { level: 1 | 2 | 3; children: React.ReactNode }) {
+  switch (props.level) {
+    case 1: return <h2 className="text-2xl font-medium text-primary leading-tight">{props.children}</h2>;
+    case 2: return <h3 className="text-xl font-medium text-primary leading-snug">{props.children}</h3>;
+    case 3: return <h4 className="text-lg font-medium text-primary leading-snug">{props.children}</h4>;
+  }
+}
+
+function inferHeadingLevel(styleId?: string): 1 | 2 | 3 | null {
+  if (!styleId) return null;
+  const lower = styleId.toLowerCase();
+  if (lower === "heading1") return 1;
+  if (lower === "heading2") return 2;
+  if (lower === "heading3") return 3;
+  return null;
+}