@vectojs/markdown 0.18.0 → 0.18.1

package/dist/Markdown.d.ts

@@ -574,6 +574,36 @@ export declare class Markdown extends UIComponent {
      */
     private affordanceButtonOptions;
     private paragraphImage;
+    /**
+     * Re-position every block after an image whose decode corrected its box.
+     *
+     * The 16:10 guess above is rarely the real aspect ratio, so without this every
+     * sibling below the image keeps the position computed from the guess, and an
+     * image taller than the guess renders *under* the paragraph that follows it.
+     *
+     * A bare `this.content.layout()` is not enough, and that is the part worth
+     * knowing: `Stack.layout()` is **not recursive**. It positions its children
+     * from the size each child reports at the moment it runs and never asks a
+     * child to recompute its own box first. Every image sits behind at least one
+     * intermediate container that caches a height — an image-bearing paragraph is
+     * a `Stack`, a list item's or blockquote's image is wrapped in a
+     * `MarkdownContainer` — so laying out `content` alone re-reads the very boxes
+     * the decode just invalidated. Measured on `94d6da3`: a 600x900 portrait in
+     * `![alt](…)\n\nAfter.` corrects `Image.height` 480 to 900 while its parent
+     * `Stack` stays 480 and the following paragraph stays at `y=496`.
+     *
+     * So resync bottom-up, from the image's own parent up to `content`, and each
+     * level sees a freshly-sized child before it positions anything.
+     */
+    private reflowAfterImageResize;
+    /**
+     * Re-derive one `MarkdownContainer`'s cached box from its children.
+     *
+     * Mirrors how {@link reflowToken}'s `blockquote` / `container` arms and every
+     * construction site derive it, so an image resize and a width change converge
+     * on the same geometry rather than each having its own arithmetic.
+     */
+    private resyncWrapperBox;
     /** One table cell entity, shared by the render arm and the streamed-table path. */
     private tableCellRichText;
     /**

package/dist/index.js

@@ -4130,16 +4130,83 @@ var Markdown = class _Markdown extends import_ui4.UIComponent {
       radius: this.theme.imageRadius,
       onLoad: () => {
         const bmp = img.bitmap;
+        const previousWidth = img.width;
+        const previousHeight = img.height;
         if (bmp && bmp.naturalWidth && bmp.naturalHeight) {
           const aspect = bmp.naturalHeight / bmp.naturalWidth;
           img.width = Math.min(bmp.naturalWidth, availableWidth);
           img.height = Math.round(img.width * aspect);
         }
+        if (img.width !== previousWidth || img.height !== previousHeight) {
+          this.reflowAfterImageResize(img);
+        }
         this.scene?.markDirty();
       }
     });
     return img;
   }
+  /**
+   * Re-position every block after an image whose decode corrected its box.
+   *
+   * The 16:10 guess above is rarely the real aspect ratio, so without this every
+   * sibling below the image keeps the position computed from the guess, and an
+   * image taller than the guess renders *under* the paragraph that follows it.
+   *
+   * A bare `this.content.layout()` is not enough, and that is the part worth
+   * knowing: `Stack.layout()` is **not recursive**. It positions its children
+   * from the size each child reports at the moment it runs and never asks a
+   * child to recompute its own box first. Every image sits behind at least one
+   * intermediate container that caches a height — an image-bearing paragraph is
+   * a `Stack`, a list item's or blockquote's image is wrapped in a
+   * `MarkdownContainer` — so laying out `content` alone re-reads the very boxes
+   * the decode just invalidated. Measured on `94d6da3`: a 600x900 portrait in
+   * `![alt](…)\n\nAfter.` corrects `Image.height` 480 to 900 while its parent
+   * `Stack` stays 480 and the following paragraph stays at `y=496`.
+   *
+   * So resync bottom-up, from the image's own parent up to `content`, and each
+   * level sees a freshly-sized child before it positions anything.
+   */
+  reflowAfterImageResize(img) {
+    let reachesContent = false;
+    for (let node = img.parent; node; node = node.parent) {
+      if (node === this.content) {
+        reachesContent = true;
+        break;
+      }
+    }
+    if (!reachesContent) return;
+    for (let node = img.parent; node; node = node.parent) {
+      if (node instanceof import_ui4.Stack) node.layout();
+      else if (node instanceof MarkdownContainer) this.resyncWrapperBox(node);
+      if (node === this.content) break;
+    }
+    this.width = this.content.width;
+    this.height = this.content.height;
+    this.onLayoutUpdated?.();
+  }
+  /**
+   * Re-derive one `MarkdownContainer`'s cached box from its children.
+   *
+   * Mirrors how {@link reflowToken}'s `blockquote` / `container` arms and every
+   * construction site derive it, so an image resize and a width change converge
+   * on the same geometry rather than each having its own arithmetic.
+   */
+  resyncWrapperBox(wrapper) {
+    const innerStack = wrapper.children.find((c) => c instanceof import_ui4.Stack);
+    const border = wrapper.children.find((c) => c instanceof QuoteBorder);
+    const background = wrapper.children.find((c) => c instanceof ContainerBackground);
+    if (border || background) {
+      const contentHeight = innerStack?.height || 20;
+      if (border instanceof QuoteBorder) border.height = contentHeight;
+      if (background instanceof ContainerBackground) background.height = contentHeight;
+      wrapper.height = Math.max(background?.height ?? 0, border?.height ?? 0, contentHeight);
+      return;
+    }
+    const child = wrapper.children[0];
+    if (!child) return;
+    wrapper.width = child.x + child.width;
+    wrapper.height = child.height;
+  }
   /** One table cell entity, shared by the render arm and the streamed-table path. */
   tableCellRichText(cell, header, t) {
     return new import_ui4.RichText(this.tableCellSpans(cell, t), {
@@ -4251,6 +4318,8 @@ var Markdown = class _Markdown extends import_ui4.UIComponent {
       const wrapper = new MarkdownContainer();
       el.x = indent;
       wrapper.add(el);
+      wrapper.width = el.width + indent;
+      wrapper.height = el.height;
       stack.add(wrapper);
     }
     for (let i = leadChildren.length; i < children.length; i++) {

package/dist/index.mjs

@@ -4078,16 +4078,83 @@ var Markdown = class _Markdown extends UIComponent3 {
       radius: this.theme.imageRadius,
       onLoad: () => {
         const bmp = img.bitmap;
+        const previousWidth = img.width;
+        const previousHeight = img.height;
         if (bmp && bmp.naturalWidth && bmp.naturalHeight) {
           const aspect = bmp.naturalHeight / bmp.naturalWidth;
           img.width = Math.min(bmp.naturalWidth, availableWidth);
           img.height = Math.round(img.width * aspect);
         }
+        if (img.width !== previousWidth || img.height !== previousHeight) {
+          this.reflowAfterImageResize(img);
+        }
         this.scene?.markDirty();
       }
     });
     return img;
   }
+  /**
+   * Re-position every block after an image whose decode corrected its box.
+   *
+   * The 16:10 guess above is rarely the real aspect ratio, so without this every
+   * sibling below the image keeps the position computed from the guess, and an
+   * image taller than the guess renders *under* the paragraph that follows it.
+   *
+   * A bare `this.content.layout()` is not enough, and that is the part worth
+   * knowing: `Stack.layout()` is **not recursive**. It positions its children
+   * from the size each child reports at the moment it runs and never asks a
+   * child to recompute its own box first. Every image sits behind at least one
+   * intermediate container that caches a height — an image-bearing paragraph is
+   * a `Stack`, a list item's or blockquote's image is wrapped in a
+   * `MarkdownContainer` — so laying out `content` alone re-reads the very boxes
+   * the decode just invalidated. Measured on `94d6da3`: a 600x900 portrait in
+   * `![alt](…)\n\nAfter.` corrects `Image.height` 480 to 900 while its parent
+   * `Stack` stays 480 and the following paragraph stays at `y=496`.
+   *
+   * So resync bottom-up, from the image's own parent up to `content`, and each
+   * level sees a freshly-sized child before it positions anything.
+   */
+  reflowAfterImageResize(img) {
+    let reachesContent = false;
+    for (let node = img.parent; node; node = node.parent) {
+      if (node === this.content) {
+        reachesContent = true;
+        break;
+      }
+    }
+    if (!reachesContent) return;
+    for (let node = img.parent; node; node = node.parent) {
+      if (node instanceof Stack) node.layout();
+      else if (node instanceof MarkdownContainer) this.resyncWrapperBox(node);
+      if (node === this.content) break;
+    }
+    this.width = this.content.width;
+    this.height = this.content.height;
+    this.onLayoutUpdated?.();
+  }
+  /**
+   * Re-derive one `MarkdownContainer`'s cached box from its children.
+   *
+   * Mirrors how {@link reflowToken}'s `blockquote` / `container` arms and every
+   * construction site derive it, so an image resize and a width change converge
+   * on the same geometry rather than each having its own arithmetic.
+   */
+  resyncWrapperBox(wrapper) {
+    const innerStack = wrapper.children.find((c) => c instanceof Stack);
+    const border = wrapper.children.find((c) => c instanceof QuoteBorder);
+    const background = wrapper.children.find((c) => c instanceof ContainerBackground);
+    if (border || background) {
+      const contentHeight = innerStack?.height || 20;
+      if (border instanceof QuoteBorder) border.height = contentHeight;
+      if (background instanceof ContainerBackground) background.height = contentHeight;
+      wrapper.height = Math.max(background?.height ?? 0, border?.height ?? 0, contentHeight);
+      return;
+    }
+    const child = wrapper.children[0];
+    if (!child) return;
+    wrapper.width = child.x + child.width;
+    wrapper.height = child.height;
+  }
   /** One table cell entity, shared by the render arm and the streamed-table path. */
   tableCellRichText(cell, header, t) {
     return new RichText2(this.tableCellSpans(cell, t), {
@@ -4199,6 +4266,8 @@ var Markdown = class _Markdown extends UIComponent3 {
       const wrapper = new MarkdownContainer();
       el.x = indent;
       wrapper.add(el);
+      wrapper.width = el.width + indent;
+      wrapper.height = el.height;
       stack.add(wrapper);
     }
     for (let i = leadChildren.length; i < children.length; i++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectojs/markdown",
-  "version": "0.18.0",
+  "version": "0.18.1",
   "publishConfig": {
     "access": "public"
   },