chat-layout 1.1.0-4 → 1.1.0

package/README.md

@@ -20,7 +20,7 @@ const bubble = new RoundedBox(
   new MultilineText(item.content, {
     lineHeight: 20,
     font: "16px system-ui",
-    style: "black",
+    color: "black",
     align: "start",
   }),
   { top: 6, bottom: 6, left: 10, right: 10, radii: 8, fill: "#ccc" },
@@ -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,10 +62,14 @@ 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",
-  style: "#111",
+  color: "#111",
   overflow: "ellipsis",
   ellipsisPosition: "middle",
 });
@@ -76,7 +81,7 @@ Multi-line `MultilineText` can cap the visible line count and convert the last v
 const preview = new MultilineText(reply.content, {
   lineHeight: 16,
   font: "13px system-ui",
-  style: "#444",
+  color: "#444",
   align: "start",
   overflowWrap: "anywhere",
   overflow: "ellipsis",

package/example/chat.ts

@@ -157,23 +157,23 @@ type ChatItem = MessageItem | RevokedItem;
 
 const richTextMessage: InlineSpan<C>[] = [
   { text: "现在这个 chat example 可以直接展示 " },
-  { text: "rich text", font: "700 16px system-ui", style: "#0f766e" },
+  { text: "rich text", font: "700 16px system-ui", color: "#0f766e" },
   { text: " 了，支持 " },
-  { text: "颜色", style: "#2563eb" },
+  { text: "颜色", color: "#2563eb" },
   { text: "、" },
-  { text: "粗体", font: "700 16px system-ui", style: "#b91c1c" },
+  { text: "粗体", font: "700 16px system-ui", color: "#b91c1c" },
   { text: "，以及 " },
-  { text: "inline code", font: "15px ui-monospace, SFMono-Regular, Consolas, monospace", style: "#7c3aed" },
+  { text: "inline code", font: "15px ui-monospace, SFMono-Regular, Consolas, monospace", color: "#7c3aed" },
   { text: " 这样的片段混排。" },
 ];
 
 const richReplyPreview: InlineSpan<C>[] = [
   { text: "回复预览里也能用 " },
-  { text: "rich text", font: "700 13px system-ui", style: "#0f766e" },
+  { text: "rich text", font: "700 13px system-ui", color: "#0f766e" },
   { text: "，比如 " },
-  { text: "关键词高亮", style: "#2563eb" },
+  { text: "关键词高亮", color: "#2563eb" },
   { text: " 和 " },
-  { text: "code()", font: "12px ui-monospace, SFMono-Regular, Consolas, monospace", style: "#7c3aed" },
+  { text: "code()", font: "12px ui-monospace, SFMono-Regular, Consolas, monospace", color: "#7c3aed" },
   {
     text: "，超长内容仍然会按原来的两行省略规则收起，不需要额外处理。",
   },
@@ -225,7 +225,7 @@ const renderItem = memoRenderItem((item: ChatItem): Node<C> => {
             new Text(`${item.sender}已撤回一条消息`, {
               lineHeight: 18,
               font: "14px system-ui",
-              style: () => (currentHover?.id === item.id ? "#525252" : "#666"),
+              color: () => (currentHover?.id === item.id ? "#525252" : "#666"),
               overflow: "ellipsis",
             }),
             {
@@ -262,7 +262,7 @@ const renderItem = memoRenderItem((item: ChatItem): Node<C> => {
         new Text(item.sender, {
           lineHeight: 15,
           font: "12px system-ui",
-          style: "black",
+          color: "black",
         }),
         {
           top: 0,
@@ -286,7 +286,7 @@ const renderItem = memoRenderItem((item: ChatItem): Node<C> => {
     new MultilineText(item.content, {
       lineHeight: 20,
       font: "16px system-ui",
-      style: "black",
+      color: "black",
       align: "start",
       overflowWrap: "anywhere",
     }),
@@ -302,12 +302,12 @@ const renderItem = memoRenderItem((item: ChatItem): Node<C> => {
             new Text(item.reply.sender, {
               lineHeight: 14,
               font: "11px system-ui",
-              style: () => (currentHover?.id === item.id ? "#4d4d4d" : "#666"),
+              color: () => (currentHover?.id === item.id ? "#4d4d4d" : "#666"),
             }),
             new MultilineText(item.reply.content, {
               lineHeight: 16,
               font: "13px system-ui",
-              style: () => (currentHover?.id === item.id ? "#222" : "#444"),
+              color: () => (currentHover?.id === item.id ? "#222" : "#444"),
               align: "start",
               overflow: "ellipsis",
               overflowWrap: "anywhere",

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";
@@ -98,7 +107,7 @@ const node = new RoundedBox(
           lineHeight: 20,
           font: "400 16px monospace",
           align: "center",
-          style: "black",
+          color: "black",
         }),
         { align: "center" },
       ),
@@ -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",
-                    style: () => color,
+                    color: () => color,
+                    overflow: "ellipsis",
+                    ellipsisPosition: "middle",
                   }),
                   {
                     left: 14,
@@ -128,7 +139,7 @@ const node = new RoundedBox(
                   lineHeight: 16,
                   font: "400 12px monospace",
                   align: "center",
-                  style: "black",
+                  color: "black",
                 }),
                 {
                   left: 10,
@@ -163,7 +174,7 @@ const node = new RoundedBox(
             lineHeight: 20,
             font: "400 16px monospace",
             physicalAlign: "right",
-            style: "black",
+            color: "black",
           }),
           {
             left: 10,

package/index.d.mts

@@ -72,8 +72,8 @@ interface TextStyleOptions<C extends CanvasRenderingContext2D> {
   lineHeight: number;
   /** Canvas font string used for measurement and drawing. */
   font: string;
-  /** Fill style or resolver used when drawing the text. */
-  style: DynValue<C, string>;
+  /** Color or resolver used when drawing the text. */
+  color: DynValue<C, string>;
   /** Default: normal; matches pretext and CSS-style collapsible whitespace behavior. */
   whiteSpace?: TextWhiteSpaceMode;
   /** Default: normal; use keep-all to match pretext's CJK-friendly line breaking mode. */
@@ -82,15 +82,15 @@ 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. */
   text: string;
   /** Canvas font string override for this fragment. Falls back to the node-level font. */
   font?: string;
-  /** Fill style override for this fragment. Falls back to the node-level style. */
-  style?: DynValue<C, string>;
+  /** Color override for this fragment. Falls back to the node-level color. */
+  color?: DynValue<C, string>;
   /** Optional break hint forwarded to pretext rich-inline layout. */
   break?: "normal" | "never";
   /** Optional extra occupied width forwarded to pretext rich-inline layout. */
@@ -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;