chat-layout 1.1.0-5 → 1.1.1

package/README.md

@@ -54,6 +54,7 @@ See [example/chat.ts](./example/chat.ts) for a full chat example.
 - `Text` and `MultilineText` default to `overflowWrap: "break-word"`, which preserves compatibility-first min-content sizing for shrink layouts.
 - Use `overflowWrap: "anywhere"` when long unspaced strings should contribute grapheme-level breakpoints to min-content sizing.
 - `Text` supports `overflow: "ellipsis"` with `ellipsisPosition: "start" | "end" | "middle"` when measured under a finite `maxWidth`.
+- `Text` and `MultilineText` both accept either a plain string or `InlineSpan[]` for mixed inline styles.
 - `MultilineText` supports `overflow: "ellipsis"` together with `maxLines`; values below `1` are treated as `1`.
 
 ## Text ellipsis
@@ -61,7 +62,11 @@ See [example/chat.ts](./example/chat.ts) for a full chat example.
 Single-line `Text` can ellipsize at the start, end, or middle when a finite width constraint is present:
 
 ```ts
-const title = new Text("Extremely long thread title that should not blow out the row", {
+const title = new Text([
+  { text: "Extremely long " },
+  { text: "thread title", font: "700 16px system-ui", color: "#0f766e" },
+  { text: " that should not blow out the row" },
+], {
   lineHeight: 20,
   font: "16px system-ui",
   color: "#111",

package/example/test.ts

@@ -9,6 +9,7 @@ import {
   type Context,
   type DynValue,
   type HitTest,
+  type InlineSpan,
   type Node,
 } from "chat-layout";
 
@@ -83,6 +84,14 @@ const renderer = new DebugRenderer(ctx, {});
 
 let color = "green";
 
+const singleLineRichText: InlineSpan<C>[] = [
+  { text: "单行 " },
+  { text: "rich", font: "700 16px monospace", color: "#0f766e" },
+  { text: " text 也支持 " },
+  { text: "inline span", font: "700 16px monospace", color: "#2563eb" },
+  { text: " 省略了" },
+];
+
 class ClickDetect extends Wrapper<C> {
   hittest(_ctx: Context<C>, _test: HitTest): boolean {
     color = "red";
@@ -108,10 +117,12 @@ const node = new RoundedBox(
             [
               new ClickDetect(
                 new RoundedBox(
-                  new Text("测试 3".repeat(2), {
+                  new Text(singleLineRichText, {
                     lineHeight: 20,
                     font: "400 16px monospace",
                     color: () => color,
+                    overflow: "ellipsis",
+                    ellipsisPosition: "middle",
                   }),
                   {
                     left: 14,

package/index.d.mts

@@ -82,7 +82,7 @@ interface TextStyleOptions<C extends CanvasRenderingContext2D> {
   overflowWrap?: TextOverflowWrapMode;
 }
 /**
- * A span-like inline text fragment used by rich multi-line text.
+ * A span-like inline text fragment used by rich text nodes.
  */
 interface InlineSpan<C extends CanvasRenderingContext2D> {
   /** Source text contained in this inline fragment. */
@@ -390,13 +390,13 @@ declare class MultilineText<C extends CanvasRenderingContext2D> implements Node<
  * Draws a single line of text, clipped logically by measurement width.
  */
 declare class Text<C extends CanvasRenderingContext2D> implements Node<C> {
-  readonly text: string;
+  readonly text: string | InlineSpan<C>[];
   readonly options: TextOptions<C>;
   /**
-   * @param text Source text to measure and draw.
+   * @param text Source text to measure and draw. Pass an `InlineSpan[]` for mixed inline styles.
    * @param options Text layout and drawing options.
    */
-  constructor(text: string, options: TextOptions<C>);
+  constructor(text: string | InlineSpan<C>[], options: TextOptions<C>);
   measure(ctx: Context<C>): Box;
   measureMinContent(ctx: Context<C>): Box;
   draw(ctx: Context<C>, x: number, y: number): boolean;