@santjc/react-pretext 0.1.0

package/dist/editorial.js

@@ -0,0 +1,684 @@
+import {
+  useElementWidth,
+  usePreparedSegments
+} from "./chunk-6P7OEVAC.js";
+
+// src/editorial/components/EditorialColumns.tsx
+import { useMemo } from "react";
+
+// src/editorial/lib/flowText.ts
+import { layoutNextLine } from "@chenglou/pretext";
+var initialCursor = {
+  segmentIndex: 0,
+  graphemeIndex: 0
+};
+function flowText({
+  prepared,
+  lineHeight,
+  getLineSlotAtY,
+  startY = 0,
+  startCursor = initialCursor,
+  maxLines,
+  maxY,
+  maxSteps = 2e3
+}) {
+  const lines = [];
+  let y = startY;
+  let cursor = startCursor;
+  let exhausted = false;
+  let truncated = false;
+  let step = 0;
+  for (; step < maxSteps; step += 1) {
+    if (maxLines !== void 0 && lines.length >= maxLines) {
+      break;
+    }
+    if (maxY !== void 0 && y + lineHeight > maxY) {
+      break;
+    }
+    const lineSlot = getLineSlotAtY(y);
+    if (lineSlot === null || lineSlot.right <= lineSlot.left) {
+      y += lineHeight;
+      continue;
+    }
+    const line = layoutNextLine(prepared, cursor, Math.max(1, Math.floor(lineSlot.right - lineSlot.left)));
+    if (line === null) {
+      exhausted = true;
+      break;
+    }
+    lines.push({
+      text: line.text,
+      x: lineSlot.left,
+      y,
+      width: line.width,
+      slotLeft: lineSlot.left,
+      slotRight: lineSlot.right,
+      slotWidth: lineSlot.right - lineSlot.left,
+      start: line.start,
+      end: line.end
+    });
+    cursor = line.end;
+    y += lineHeight;
+  }
+  if (!exhausted && step >= maxSteps) {
+    truncated = true;
+  }
+  if (!exhausted && !truncated && layoutNextLine(prepared, cursor, 1) === null) {
+    exhausted = true;
+  }
+  return {
+    lines,
+    height: Math.max(0, y - startY),
+    exhausted,
+    truncated,
+    endCursor: cursor
+  };
+}
+
+// src/editorial/lib/editorialJustify.ts
+var supportedGapKinds = /* @__PURE__ */ new Set(["space", "preserved-space"]);
+var unsupportedKinds = /* @__PURE__ */ new Set(["tab", "soft-hyphen", "hard-break", "zero-width-break"]);
+function getEditorialJustification({
+  prepared,
+  line,
+  maxWordSpacing = 24
+}) {
+  if (line.text.trimStart() !== line.text) {
+    return null;
+  }
+  let lastSegmentIndex = line.end.graphemeIndex > 0 ? line.end.segmentIndex : line.end.segmentIndex - 1;
+  while (lastSegmentIndex >= line.start.segmentIndex) {
+    const trailingKind = prepared.kinds[lastSegmentIndex];
+    const trailingSegment = prepared.segments[lastSegmentIndex];
+    if ((trailingKind === "space" || trailingKind === "preserved-space") && trailingSegment === " ") {
+      lastSegmentIndex -= 1;
+      continue;
+    }
+    break;
+  }
+  if (lastSegmentIndex < line.start.segmentIndex) {
+    return null;
+  }
+  let gapCount = 0;
+  for (let segmentIndex = line.start.segmentIndex; segmentIndex <= lastSegmentIndex; segmentIndex += 1) {
+    const kind = prepared.kinds[segmentIndex];
+    const segment = prepared.segments[segmentIndex];
+    if (kind === void 0 || segment === void 0) {
+      return null;
+    }
+    const isPartialStart = segmentIndex === line.start.segmentIndex && line.start.graphemeIndex > 0;
+    const isPartialEnd = segmentIndex === line.end.segmentIndex && line.end.graphemeIndex > 0;
+    if ((isPartialStart || isPartialEnd) && kind !== "text") {
+      return null;
+    }
+    if (unsupportedKinds.has(kind)) {
+      return null;
+    }
+    if (!supportedGapKinds.has(kind)) {
+      continue;
+    }
+    if (segment !== " ") {
+      return null;
+    }
+    const previousKind = prepared.kinds[segmentIndex - 1];
+    const nextKind = prepared.kinds[segmentIndex + 1];
+    if (supportedGapKinds.has(previousKind ?? "") || supportedGapKinds.has(nextKind ?? "")) {
+      return null;
+    }
+    gapCount += 1;
+  }
+  if (gapCount === 0) {
+    return null;
+  }
+  const extraWidth = line.slotWidth - line.width;
+  if (extraWidth <= 0) {
+    return null;
+  }
+  const wordSpacing = extraWidth / gapCount;
+  if (wordSpacing > maxWordSpacing) {
+    return null;
+  }
+  return wordSpacing;
+}
+
+// src/editorial/lib/editorialLineAnnotation.ts
+function annotateEditorialLines(prepared, lines, preserveParagraphBreaks) {
+  return lines.map((line, index) => {
+    const isTerminal = index === lines.length - 1;
+    const isParagraphTerminal = preserveParagraphBreaks && /\n\s*$/.test(line.text);
+    const justifyWordSpacing = !isTerminal && !isParagraphTerminal ? getEditorialJustification({ prepared, line }) : null;
+    return {
+      ...line,
+      justifyWordSpacing,
+      isTerminal,
+      isParagraphTerminal
+    };
+  });
+}
+
+// src/editorial/lib/lineSlots.ts
+function carveLineSlots(baseLineSlot, blockedLineRanges, minWidth = 24) {
+  let lineSlots = [baseLineSlot];
+  for (let blockedIndex = 0; blockedIndex < blockedLineRanges.length; blockedIndex += 1) {
+    const blockedLineRange = blockedLineRanges[blockedIndex];
+    const nextLineSlots = [];
+    for (let slotIndex = 0; slotIndex < lineSlots.length; slotIndex += 1) {
+      const lineSlot = lineSlots[slotIndex];
+      if (blockedLineRange.right <= lineSlot.left || blockedLineRange.left >= lineSlot.right) {
+        nextLineSlots.push(lineSlot);
+        continue;
+      }
+      if (blockedLineRange.left > lineSlot.left) {
+        nextLineSlots.push({ left: lineSlot.left, right: blockedLineRange.left });
+      }
+      if (blockedLineRange.right < lineSlot.right) {
+        nextLineSlots.push({ left: blockedLineRange.right, right: lineSlot.right });
+      }
+    }
+    lineSlots = nextLineSlots;
+  }
+  return lineSlots.filter((lineSlot) => lineSlot.right - lineSlot.left >= minWidth);
+}
+function getCircleBlockedLineRangeForRow({
+  cx,
+  cy,
+  radius,
+  lineTop,
+  lineBottom,
+  horizontalPadding = 0,
+  verticalPadding = 0
+}) {
+  const top = lineTop - verticalPadding;
+  const bottom = lineBottom + verticalPadding;
+  if (bottom <= cy - radius || top >= cy + radius) {
+    return null;
+  }
+  const minDy = cy >= top && cy <= bottom ? 0 : cy < top ? top - cy : cy - bottom;
+  if (minDy >= radius) {
+    return null;
+  }
+  const maxDx = Math.sqrt(radius * radius - minDy * minDy);
+  return {
+    left: cx - maxDx - horizontalPadding,
+    right: cx + maxDx + horizontalPadding
+  };
+}
+function pickWidestLineSlot(lineSlots) {
+  if (lineSlots.length === 0) {
+    return null;
+  }
+  let widestLineSlot = lineSlots[0];
+  for (let index = 1; index < lineSlots.length; index += 1) {
+    const lineSlot = lineSlots[index];
+    if (lineSlot.right - lineSlot.left > widestLineSlot.right - widestLineSlot.left) {
+      widestLineSlot = lineSlot;
+    }
+  }
+  return widestLineSlot;
+}
+function createLineSlotResolver({
+  baseLineSlot,
+  lineHeight,
+  minWidth = 24,
+  getBlockedLineRanges = () => []
+}) {
+  return (y) => {
+    const lineTop = y;
+    const lineBottom = y + lineHeight;
+    const blockedLineRanges = getBlockedLineRanges(lineTop, lineBottom);
+    const lineSlots = carveLineSlots(baseLineSlot, blockedLineRanges, minWidth);
+    return pickWidestLineSlot(lineSlots);
+  };
+}
+
+// src/editorial/lib/editorialFigures.ts
+function resolveEditorialPlacement(figure, bounds) {
+  const placement = figure.placement ?? "top-right";
+  const freeWidth = Math.max(0, bounds.width - figure.width);
+  const freeHeight = Math.max(0, bounds.height - figure.height);
+  const horizontal = (() => {
+    switch (placement) {
+      case "top-left":
+      case "center-left":
+      case "bottom-left":
+        return 0;
+      case "top-center":
+      case "center":
+      case "bottom-center":
+        return freeWidth / 2;
+      case "top-right":
+      case "center-right":
+      case "bottom-right":
+        return freeWidth;
+    }
+  })();
+  const vertical = (() => {
+    switch (placement) {
+      case "top-left":
+      case "top-center":
+      case "top-right":
+        return 0;
+      case "center-left":
+      case "center":
+      case "center-right":
+        return freeHeight / 2;
+      case "bottom-left":
+      case "bottom-center":
+      case "bottom-right":
+        return freeHeight;
+    }
+  })();
+  return {
+    x: Math.min(Math.max(figure.x ?? horizontal, 0), freeWidth),
+    y: Math.min(Math.max(figure.y ?? vertical, 0), freeHeight)
+  };
+}
+function getRectBlockedLineRangeForRow({
+  x,
+  y,
+  width,
+  height,
+  lineTop,
+  lineBottom,
+  horizontalPadding = 0,
+  verticalPadding = 0
+}) {
+  const top = y - verticalPadding;
+  const bottom = y + height + verticalPadding;
+  if (lineBottom <= top || lineTop >= bottom) {
+    return null;
+  }
+  return {
+    left: x - horizontalPadding,
+    right: x + width + horizontalPadding
+  };
+}
+function getBlockedLineRangesForEditorialFigures(figures, lineTop, lineBottom) {
+  const blocked = [];
+  for (let index = 0; index < figures.length; index += 1) {
+    const figure = figures[index];
+    if (figure.shape === "circle") {
+      const range2 = getCircleBlockedLineRangeForRow({
+        cx: figure.x + figure.width / 2,
+        cy: figure.y + figure.height / 2,
+        radius: Math.min(figure.width, figure.height) / 2,
+        lineTop,
+        lineBottom,
+        horizontalPadding: figure.linePadding ?? 0
+      });
+      if (range2 !== null) {
+        blocked.push(range2);
+      }
+      continue;
+    }
+    const range = getRectBlockedLineRangeForRow({
+      x: figure.x,
+      y: figure.y,
+      width: figure.width,
+      height: figure.height,
+      lineTop,
+      lineBottom,
+      horizontalPadding: figure.linePadding ?? 0
+    });
+    if (range !== null) {
+      blocked.push(range);
+    }
+  }
+  return blocked;
+}
+
+// src/editorial/lib/layoutEditorialTrack.ts
+function layoutEditorialTrack({
+  prepared,
+  figures: figureDefs = [],
+  width,
+  height,
+  lineHeight,
+  paddingInline = 0,
+  paddingBlock = 0,
+  startCursor = initialCursor,
+  startY = paddingBlock,
+  maxY,
+  preserveParagraphBreaks = false
+}) {
+  const innerWidth = Math.max(24, width - paddingInline * 2);
+  const innerHeight = Math.max(0, height - paddingBlock * 2);
+  const figures = figureDefs.map((figure) => {
+    const resolved = resolveEditorialPlacement(figure, {
+      width: innerWidth,
+      height: innerHeight
+    });
+    return {
+      ...figure,
+      x: paddingInline + resolved.x,
+      y: paddingBlock + resolved.y
+    };
+  });
+  const getLineSlotAtY = createLineSlotResolver({
+    baseLineSlot: { left: paddingInline, right: width - paddingInline },
+    lineHeight,
+    minWidth: 24,
+    getBlockedLineRanges: (lineTop, lineBottom) => getBlockedLineRangesForEditorialFigures(figures, lineTop, lineBottom)
+  });
+  const rawBody = flowText({
+    prepared,
+    lineHeight,
+    startCursor,
+    startY,
+    getLineSlotAtY,
+    maxY
+  });
+  return {
+    figures,
+    body: {
+      ...rawBody,
+      lines: annotateEditorialLines(prepared, rawBody.lines, preserveParagraphBreaks)
+    }
+  };
+}
+
+// src/editorial/lib/editorialTracks.ts
+function resolveEditorialTracks(tracks, gap, availableWidth) {
+  const fixedWidth = tracks.reduce((total, track) => total + (track.width ?? 0), 0);
+  const totalGap = Math.max(0, tracks.length - 1) * gap;
+  const flexibleTracks = tracks.filter((track) => track.width === void 0);
+  const totalFr = flexibleTracks.reduce((total, track) => total + (track.fr ?? 1), 0);
+  const remainingWidth = Math.max(0, availableWidth - fixedWidth - totalGap);
+  let x = 0;
+  return tracks.map((track) => {
+    const resolvedWidth = track.width ?? (totalFr === 0 ? 0 : remainingWidth * (track.fr ?? 1) / totalFr);
+    const resolved = {
+      ...track,
+      width: resolvedWidth,
+      x
+    };
+    x += resolvedWidth + gap;
+    return resolved;
+  });
+}
+function getEditorialTracksWidth(tracks, gap) {
+  if (tracks.length === 0) {
+    return 0;
+  }
+  return tracks.reduce((total, track) => total + track.width, 0) + gap * (tracks.length - 1);
+}
+
+// src/editorial/components/FlowLines.tsx
+import { Fragment, jsx } from "react/jsx-runtime";
+function getFlowLineText(line, lineRenderMode) {
+  if (lineRenderMode === "justify" && line.justifyWordSpacing !== null && line.justifyWordSpacing !== void 0) {
+    return line.text.trimEnd();
+  }
+  return line.text;
+}
+function getFlowLineStyle(line, font, lineHeight, lineRenderMode) {
+  return {
+    position: "absolute",
+    left: `${line.slotLeft}px`,
+    top: `${line.y}px`,
+    width: `${Math.ceil(line.slotWidth)}px`,
+    font,
+    lineHeight: `${lineHeight}px`,
+    whiteSpace: "pre",
+    textAlign: "left",
+    wordSpacing: lineRenderMode === "justify" && line.justifyWordSpacing !== null && line.justifyWordSpacing !== void 0 ? `${line.justifyWordSpacing}px` : void 0
+  };
+}
+function getFlowLineKey(line, index) {
+  return `${line.start.segmentIndex}-${line.start.graphemeIndex}-${index}`;
+}
+function FlowLines({
+  lines,
+  font,
+  lineHeight,
+  lineClassName,
+  lineRenderMode = "natural",
+  renderLine
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: lines.map((line, index) => {
+    const key = getFlowLineKey(line, index);
+    const text = getFlowLineText(line, lineRenderMode);
+    const style = getFlowLineStyle(line, font, lineHeight, lineRenderMode);
+    if (renderLine !== void 0) {
+      return renderLine({ key, line, text, style });
+    }
+    return /* @__PURE__ */ jsx("div", { className: lineClassName, style, children: text }, key);
+  }) });
+}
+
+// src/editorial/components/renderResolvedEditorialFigure.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function renderResolvedEditorialFigure(figure, index) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: figure.className,
+      style: {
+        position: "absolute",
+        left: `${figure.x}px`,
+        top: `${figure.y}px`,
+        width: `${figure.width}px`,
+        height: `${figure.height}px`,
+        ...figure.style
+      },
+      children: figure.content
+    },
+    index
+  );
+}
+
+// src/editorial/components/EditorialColumns.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function createEmptyEditorialBody() {
+  return {
+    lines: [],
+    height: 0,
+    exhausted: false,
+    truncated: false,
+    endCursor: initialCursor
+  };
+}
+function EditorialColumns({
+  text,
+  font,
+  lineHeight,
+  gap = 24,
+  lineRenderMode = "natural",
+  prepareOptions,
+  className,
+  style,
+  tracks: trackDefs
+}) {
+  const { ref, width: availableWidth } = useElementWidth();
+  const tracks = useMemo(() => resolveEditorialTracks(trackDefs, gap, availableWidth), [availableWidth, gap, trackDefs]);
+  const { prepared } = usePreparedSegments({ text, font, options: prepareOptions });
+  const renderedTracks = useMemo(() => {
+    if (prepared === null || availableWidth <= 0) {
+      return tracks.map((track) => ({
+        ...track,
+        figures: [],
+        body: createEmptyEditorialBody()
+      }));
+    }
+    let cursor = initialCursor;
+    const preserveParagraphBreaks = prepareOptions?.whiteSpace === "pre-wrap";
+    return tracks.map((track) => {
+      const paddingInline = track.paddingInline ?? 16;
+      const paddingBlock = track.paddingBlock ?? 0;
+      const { figures, body } = layoutEditorialTrack({
+        prepared,
+        figures: track.figures,
+        width: track.width,
+        height: track.minHeight ?? 320,
+        lineHeight,
+        startCursor: cursor,
+        startY: paddingBlock,
+        maxY: track.minHeight === void 0 ? void 0 : track.minHeight - paddingBlock,
+        paddingInline,
+        paddingBlock,
+        preserveParagraphBreaks
+      });
+      cursor = body.endCursor;
+      return {
+        ...track,
+        figures,
+        body
+      };
+    });
+  }, [availableWidth, lineHeight, prepared, prepareOptions?.whiteSpace, tracks]);
+  const width = getEditorialTracksWidth(tracks, gap);
+  const minHeight = renderedTracks.reduce((current, track) => Math.max(current, track.minHeight ?? track.body.height), 0);
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ref,
+      className,
+      style: {
+        position: "relative",
+        width: "100%",
+        minHeight: `${minHeight}px`,
+        ...style
+      },
+      children: /* @__PURE__ */ jsx3(
+        "div",
+        {
+          style: {
+            position: "relative",
+            width: `${width}px`,
+            minHeight: `${minHeight}px`
+          },
+          children: renderedTracks.map((track, trackIndex) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: track.className,
+              style: {
+                position: "absolute",
+                left: `${track.x}px`,
+                top: 0,
+                width: `${track.width}px`,
+                minHeight: `${track.minHeight ?? track.body.height}px`,
+                ...track.style
+              },
+              children: [
+                track.figures.map(renderResolvedEditorialFigure),
+                /* @__PURE__ */ jsx3(FlowLines, { lines: track.body.lines, font, lineHeight, lineRenderMode })
+              ]
+            },
+            trackIndex
+          ))
+        }
+      )
+    }
+  );
+}
+
+// src/editorial/components/EditorialSurface.tsx
+import { useMemo as useMemo2 } from "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function EditorialSurface({
+  text,
+  font,
+  lineHeight,
+  startY = 0,
+  maxY,
+  minHeight = 320,
+  lineRenderMode = "natural",
+  prepareOptions,
+  className,
+  style,
+  figures
+}) {
+  const { ref, width } = useElementWidth();
+  const { prepared } = usePreparedSegments({ text, font, options: prepareOptions });
+  const baseHeight = Math.max(minHeight, maxY ?? startY + 320);
+  const preserveParagraphBreaks = prepareOptions?.whiteSpace === "pre-wrap";
+  const layout = useMemo2(() => {
+    if (prepared === null || width <= 0) {
+      return {
+        figures: [],
+        body: {
+          lines: [],
+          height: 0
+        }
+      };
+    }
+    return layoutEditorialTrack({
+      prepared,
+      figures,
+      width,
+      height: baseHeight,
+      lineHeight,
+      startY,
+      maxY,
+      preserveParagraphBreaks
+    });
+  }, [baseHeight, figures, lineHeight, maxY, preserveParagraphBreaks, prepared, startY, width]);
+  const height = Math.max(baseHeight, startY + layout.body.height);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref,
+      className,
+      style: {
+        position: "relative",
+        minHeight: `${height}px`,
+        ...style
+      },
+      children: [
+        layout.figures.map(renderResolvedEditorialFigure),
+        /* @__PURE__ */ jsx4(FlowLines, { lines: layout.body.lines, font, lineHeight, lineRenderMode })
+      ]
+    }
+  );
+}
+
+// src/editorial/hooks/useTextFlow.ts
+import { useMemo as useMemo3 } from "react";
+function useTextFlow({
+  prepared,
+  lineHeight,
+  getLineSlotAtY,
+  startY,
+  startCursor,
+  maxLines,
+  maxY,
+  maxSteps,
+  enabled = true
+}) {
+  return useMemo3(() => {
+    if (!enabled || prepared === null) {
+      return {
+        lines: [],
+        height: 0,
+        exhausted: false,
+        truncated: false,
+        isReady: false,
+        endCursor: initialCursor
+      };
+    }
+    const result = flowText({
+      prepared,
+      lineHeight,
+      getLineSlotAtY,
+      startY,
+      startCursor,
+      maxLines,
+      maxY,
+      maxSteps
+    });
+    return {
+      ...result,
+      isReady: true
+    };
+  }, [enabled, getLineSlotAtY, lineHeight, maxLines, maxSteps, maxY, prepared, startCursor, startY]);
+}
+export {
+  EditorialColumns,
+  EditorialSurface,
+  FlowLines,
+  carveLineSlots,
+  createLineSlotResolver,
+  flowText,
+  getCircleBlockedLineRangeForRow,
+  pickWidestLineSlot,
+  useTextFlow
+};