@byline/cli 6.4.0 → 6.5.0

package/dist/templates/ui-byline/components/inline-image/index.tsx

@@ -7,6 +7,8 @@ import type { InlineImagePosition, SerializedInlineImageNode } from '@byline/ric
 import { FadeInLift } from '@byline/ui/react'
 
 import { ResponsiveImage } from '../responsive-image/index.tsx'
+import { getHref, type LinkAttributes } from '../link/link-lexical.tsx'
+import { LangLink } from '@/ui/byline/components/link/lang-link'
 import type { Locale } from '@/ui/byline/types/i18n'
 import type { SerializeOptions, SerializeProps } from '../richtext-lexical/serialize/index.tsx'
 
@@ -44,7 +46,7 @@ interface Props {
 }
 
 export function InlineImageSerializer({ node, serialize, lng, options }: Props): React.JSX.Element {
-  const { showCaption, position, altText, document: pickerDoc, caption } = node
+  const { showCaption, position, altText, document: pickerDoc, caption, link } = node
   const image = pickerDoc?.image as StoredFileValue | undefined
 
   const floatLeft = position === 'left'
@@ -86,16 +88,76 @@ export function InlineImageSerializer({ node, serialize, lng, options }: Props):
     </FadeInLift>
   )
 
+  // Optional click-through target.
+  //
+  // The anchor goes INSIDE the floated wrapper and wraps the image only.
+  // Two reasons, both load-bearing:
+  //
+  //   - the float and the 50% column live on the outer span, so an anchor
+  //     outside it would take the float and change the layout;
+  //   - the caption is a nested editor that can contain its own links, and
+  //     an `<a>` inside an `<a>` is invalid — browsers un-nest it and the
+  //     layout breaks with it. The caption stays outside the anchor.
+  //
+  // `display: block` stops the inline `<a>` adding a descender gap beneath
+  // the image. `getHref` returns '' for a target the walker marked
+  // unresolved, in which case the image renders with no anchor at all —
+  // the same degradation a text link gets.
+  //
+  // `options.insideLink` suppresses the anchor entirely: the image is
+  // already inside a text link, whose anchor would be invalidated by a
+  // nested one. The outer link wins.
+  const href = options?.insideLink === true || link == null ? '' : getHref(link as LinkAttributes)
+
+  // Target and rel are derived here rather than through the text link's
+  // `getAdditionalProps`. That helper forces `target="_blank"` for any
+  // external href regardless of the node's own `newTab`, which suits a text
+  // link (they also get a visible external-link icon) but makes the image
+  // dialog's "Open in new tab" checkbox a no-op for exactly the URLs an
+  // editor is most likely to tick it for. Here the editor's choice is
+  // authoritative.
+  //
+  // `rel="noopener"` is belt-and-braces, not a fix for a live hole: the
+  // HTML standard has `target="_blank"` imply `noopener` unless a rel
+  // explicitly opts back in, and conforming browsers have done so for
+  // years. It is stated anyway so the guarantee does not rest on the
+  // implied behaviour, and it matches what text links emit for `newTab`.
+  // `noreferrer` is deliberately NOT added — it would additionally strip
+  // the referrer, a separate behavioural choice that belongs with the
+  // site's referrer policy rather than with this checkbox.
+  const newTab = link?.newTab === true
+  const anchorProps = newTab
+    ? { target: '_blank', rel: 'noopener' }
+    : ({} as { target?: string; rel?: string })
+
+  const Linked =
+    href.length === 0 ? (
+      ImgSlot
+    ) : href.startsWith('/') ? (
+      <LangLink lng={lng} to={href} {...anchorProps} className="block">
+        {ImgSlot}
+      </LangLink>
+    ) : (
+      <a href={href} {...anchorProps} className="block">
+        {ImgSlot}
+      </a>
+    )
+
   if (showCaption) {
     return (
       <span className={classes}>
-        {ImgSlot}
+        {Linked}
         <span className="block inline-image-block--caption">
           {caption?.editorState?.root?.children != null ? (
+            // The caption is a nested serialize pass and can hold its own
+            // links, so the surrounding options travel with it. Dropping
+            // them would let a caption link emit an anchor inside the text
+            // link this image sits in — the image's own anchor is already
+            // suppressed for that reason, and the caption is no different.
             serialize({
               nodes: caption.editorState.root.children,
               lng,
-              options: { renderParagraphInline: true },
+              options: { ...options, renderParagraphInline: true },
             })
           ) : (
             <span>Caption not found for inline image.</span>
@@ -105,5 +167,5 @@ export function InlineImageSerializer({ node, serialize, lng, options }: Props):
     )
   }
 
-  return <span className={classes}>{ImgSlot}</span>
+  return <span className={classes}>{Linked}</span>
 }

package/dist/templates/ui-byline/components/link/link-lexical.tsx

@@ -108,7 +108,7 @@ function isLocalHref(href: string): boolean {
  *      walked sessions.
  *   4. Neither — strip wrapper.
  */
-function getHref(args: LinkAttributes): string {
+export function getHref(args: LinkAttributes): string {
   let href = ''
   const publicWebsiteUrl = '/' // getPublicWebsiteUrl()
 

package/dist/templates/ui-byline/components/richtext-lexical/serialize/index.tsx

@@ -10,7 +10,7 @@ import { CodeSerializer } from '../../code/code-serializer.tsx'
 import { HeadingWithAnchorSerializer } from '../../heading-anchor/index.ts'
 import { InlineImageSerializer } from '../../inline-image/index.tsx'
 import { LayoutContainerSerializer, LayoutItemSerializer } from '../../layout/index.tsx'
-import { LinkLexicalSerializer } from '../../link/link-lexical.tsx'
+import { getHref, LinkLexicalSerializer } from '../../link/link-lexical.tsx'
 import { ListItemSerializer, ListSerializer } from '../../list/index.ts'
 import { TableCellSerializer } from '../../table-cell/index.tsx'
 import { VimeoSerializer } from '../../vimeo/index.tsx'
@@ -30,6 +30,20 @@ import type { SerializedLexicalNode } from './types.ts'
 export interface SerializeOptions {
   renderParagraphInline: boolean
   disableAnimation?: boolean
+  /**
+   * True while serializing the children of a `link` node.
+   *
+   * An `<a>` may not contain another `<a>`: the HTML parser un-nests them,
+   * which silently changes the document structure and breaks the layout
+   * around it. An inline image carries its own optional click target, and
+   * an image inside a text link is reachable — a markdown import turns
+   * `[![alt](img)](url)` into a `link` node containing an `inline-image`
+   * node, and the image dialog can then give that image a link of its own.
+   *
+   * The outer link wins: it already makes the image clickable, which is
+   * what a reader expects from an image inside a link.
+   */
+  insideLink?: boolean
 }
 
 export interface SerializeProps {
@@ -148,9 +162,38 @@ export function Serialize({
             )
           }
           case 'link': {
+            // `LinkLexicalSerializer` renders its children plain when the
+            // href is unusable (an unresolved internal target, an empty
+            // custom url), so a link node does not always produce an
+            // anchor. `insideLink` must track the anchor, not the node —
+            // setting it unconditionally would strip a working image link
+            // for the benefit of an outer anchor that was never emitted.
+            //
+            // When an anchor IS emitted, children are re-serialized with
+            // the flag rather than reusing `serializedChildren`, so nested
+            // anchor-bearing nodes (an inline image with its own link)
+            // render without their own `<a>`.
+            //
+            // A link node reached while already inside an anchor renders its
+            // children plain. `<a>` inside `<a>` is un-nested by the parser
+            // whatever produced it, and a link node is just as capable of
+            // nesting as an inline image — an image caption, for instance,
+            // is a nested editor whose links arrive here with the flag set.
+            if (options?.insideLink === true) {
+              return <Fragment key={index}>{serializedChildren}</Fragment>
+            }
+            const rendersAnchor = getHref(node.attributes).length > 0
             return (
               <LinkLexicalSerializer key={index} attributes={node.attributes} lng={lng}>
-                {serializedChildren}
+                {node.children != null && rendersAnchor ? (
+                  <Serialize
+                    nodes={node.children}
+                    lng={lng}
+                    options={{ ...options, insideLink: true }}
+                  />
+                ) : (
+                  serializedChildren
+                )}
               </LinkLexicalSerializer>
             )
           }

package/dist/templates/ui-byline/components/richtext-lexical/serialize/types.ts

@@ -6,10 +6,7 @@
  * Copyright (c) Infonomic Company Limited
  */
 
-import type {
-  SerializedLexicalNode as LexicalSerializedLexicalNode,
-  SerializedRootNode as LexicalSerializedRootNode,
-} from '@byline/richtext-lexical'
+import type { SerializedRootNode as LexicalSerializedRootNode } from '@byline/richtext-lexical'
 
 /**
  * Root of a Lexical editor state — `editorState.root` from a persisted
@@ -33,10 +30,22 @@ export interface SerializedLexicalEditorState {
  * `checked`, `attributes`, `headerState`, `kind`, etc.) without
  * enumerating every node type.
  *
- * Structurally a superset of Lexical's `SerializedLexicalNode`, so
- * values of either flavor flow through the dispatcher without casts.
+ * Deliberately standalone rather than an intersection with Lexical's
+ * `SerializedLexicalNode`. Lexical 0.51 types a nested editor's children —
+ * an inline image's caption, say — as `SerializedPartialNode[]`, whose
+ * `version` and `$slots` relax because a compact export omits what parsing
+ * restores on its own. Intersecting with the strict type reimposes those
+ * requirements at every depth (`$slots` recurses), which would reject the
+ * partial form over properties this dispatcher never reads and force a cast
+ * at every nested-editor call site.
+ *
+ * The open index signature is what makes both flavours assignable, so
+ * strict and partial nodes alike flow through the dispatcher without casts.
  */
-export type SerializedLexicalNode = LexicalSerializedLexicalNode & {
+export type SerializedLexicalNode = {
+  type: string
+  /** @deprecated Lexical writes it, nothing reads it; a compact export omits it. */
+  version?: number
   format?: number | string
   text?: string
   mode?: string

package/package.json

@@ -2,7 +2,7 @@
   "name": "@byline/cli",
   "private": false,
   "license": "MPL-2.0",
-  "version": "6.4.0",
+  "version": "6.5.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -48,12 +48,12 @@
     "yaml": "^2.9.1"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.5.13",
+    "@biomejs/biome": "2.5.14",
     "@types/mdast": "^4.0.4",
-    "@types/node": "^26.6.1",
+    "@types/node": "^26.6.2",
     "@types/pg": "^8.23.1",
     "@types/semver": "^7.8.0",
-    "dotenv": "^17.4.2",
+    "dotenv": "^18.0.1",
     "mdast-util-to-string": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "remark-parse": "^11.0.0",
@@ -61,7 +61,7 @@
     "typescript": "^7.0.2",
     "unified": "^11.0.5",
     "vitest": "^5.0.1",
-    "@byline/core": "6.4.0"
+    "@byline/core": "6.5.0"
   },
   "publishConfig": {
     "access": "public",