@byline/richtext-lexical 6.4.0 → 6.6.0

package/dist/field/extensions/inline-image/inline-image-node.js

@@ -2,6 +2,40 @@ import { jsx } from "react/jsx-runtime";
 import { $applyNodeReplacement, DecoratorNode, createEditor } from "lexical";
 import * as __rspack_external_react from "react";
 const InlineImageComponent = /*#__PURE__*/ __rspack_external_react.lazy(async ()=>await import("./inline-image-node-component.js"));
+function writeLinkAttributes(element, link) {
+    if (null == link) return;
+    element.setAttribute('data-link-type', link.linkType ?? 'custom');
+    if (true === link.newTab) element.setAttribute('data-link-new-tab', 'true');
+    if ('internal' === link.linkType) {
+        element.setAttribute('data-link-target-document-id', link.targetDocumentId);
+        element.setAttribute('data-link-target-collection-id', link.targetCollectionId);
+        element.setAttribute('data-link-target-collection-path', link.targetCollectionPath);
+    } else if (null != link.url) element.setAttribute('data-link-url', link.url);
+}
+function readLinkAttributes(domNode) {
+    const linkType = domNode.dataset.linkType;
+    if ('custom' !== linkType && 'internal' !== linkType) return;
+    const newTab = 'true' === domNode.dataset.linkNewTab;
+    if ('internal' === linkType) {
+        const targetDocumentId = domNode.dataset.linkTargetDocumentId;
+        const targetCollectionPath = domNode.dataset.linkTargetCollectionPath;
+        if (!targetDocumentId || !targetCollectionPath) return;
+        return {
+            linkType: 'internal',
+            newTab,
+            targetDocumentId,
+            targetCollectionId: domNode.dataset.linkTargetCollectionId ?? '',
+            targetCollectionPath
+        };
+    }
+    const url = domNode.dataset.linkUrl;
+    if (!url) return;
+    return {
+        linkType: 'custom',
+        url,
+        newTab
+    };
+}
 function convertInlineImageElement(domNode) {
     if (domNode instanceof HTMLImageElement) {
         const { alt: altText, src, width, height } = domNode;
@@ -12,7 +46,8 @@ function convertInlineImageElement(domNode) {
             src,
             altText,
             height,
-            width
+            width,
+            link: readLinkAttributes(domNode)
         });
         return {
             node
@@ -25,10 +60,10 @@ class InlineImageNode extends DecoratorNode {
         return 'inline-image';
     }
     static clone(node) {
-        return new InlineImageNode(node.__relation, node.__src, node.__position, node.__altText, node.__width, node.__height, node.__showCaption, node.__caption, node.__key);
+        return new InlineImageNode(node.__relation, node.__src, node.__position, node.__altText, node.__width, node.__height, node.__showCaption, node.__caption, node.__link, node.__key);
     }
     static importJSON(serializedNode) {
-        const { src, position, altText, height, width, showCaption, caption, targetDocumentId, targetCollectionId, targetCollectionPath, document: document1 } = serializedNode;
+        const { src, position, altText, height, width, showCaption, caption, link, targetDocumentId, targetCollectionId, targetCollectionPath, document: document1 } = serializedNode;
         const node = $createInlineImageNode({
             targetDocumentId,
             targetCollectionId,
@@ -39,7 +74,8 @@ class InlineImageNode extends DecoratorNode {
             altText,
             width,
             height,
-            showCaption
+            showCaption,
+            link
         });
         const nestedEditor = node.__caption;
         const editorState = nestedEditor.parseEditorState(caption.editorState);
@@ -62,6 +98,7 @@ class InlineImageNode extends DecoratorNode {
         element.setAttribute('alt', this.__altText);
         if (null != this.__width) element.setAttribute('width', this.__width.toString());
         if (null != this.__height) element.setAttribute('height', this.__height.toString());
+        writeLinkAttributes(element, this.__link);
         return {
             element
         };
@@ -76,6 +113,7 @@ class InlineImageNode extends DecoratorNode {
             width: this.__width,
             showCaption: this.__showCaption,
             caption: this.__caption.toJSON(),
+            link: this.__link,
             type: 'inline-image',
             version: 1
         };
@@ -105,6 +143,13 @@ class InlineImageNode extends DecoratorNode {
         const writable = this.getWritable();
         writable.__showCaption = showCaption;
     }
+    getLink() {
+        return this.__link;
+    }
+    setLink(link) {
+        const writable = this.getWritable();
+        writable.__link = link;
+    }
     getPosition() {
         return this.__position;
     }
@@ -127,21 +172,24 @@ class InlineImageNode extends DecoratorNode {
         if (null != width) writable.__width = width;
         if (null != height) writable.__height = height;
         if (null != showCaption) writable.__showCaption = showCaption;
+        if ('link' in payload) writable.__link = payload.link;
+    }
+    buildClassName(config) {
+        const linked = null != this.__link ? ' has-link' : '';
+        return `${config.theme.inlineImage} position-${this.__position}${linked}`;
     }
     createDOM(config) {
         const span = document.createElement('span');
-        const className = `${config.theme.inlineImage} position-${this.__position}`;
-        if (void 0 !== className) span.className = className;
+        span.className = this.buildClassName(config);
         return span;
     }
     updateDOM(prevNode, dom, config) {
-        const position = this.__position;
-        if (position !== prevNode.__position) {
-            const className = `${config.theme.inlineImage} position-${position}`;
-            if (void 0 !== className) dom.className = className;
+        if (this.__position !== prevNode.__position || null != this.__link !== (null != prevNode.__link)) {
+            dom.className = this.buildClassName(config);
             return true;
         }
         if (this.__showCaption !== prevNode.__showCaption) return true;
+        if (this.__link !== prevNode.__link) return true;
         return false;
     }
     decorate() {
@@ -156,11 +204,12 @@ class InlineImageNode extends DecoratorNode {
                 height: this.__height,
                 showCaption: this.__showCaption,
                 caption: this.__caption,
+                link: this.__link,
                 nodeKey: this.getKey()
             })
         });
     }
-    constructor(relation, src, position, altText, width, height, showCaption, caption, key){
+    constructor(relation, src, position, altText, width, height, showCaption, caption, link, key){
         super(key);
         this.__relation = relation;
         this.__src = src;
@@ -170,16 +219,17 @@ class InlineImageNode extends DecoratorNode {
         this.__height = height;
         this.__showCaption = showCaption ?? false;
         this.__caption = caption ?? createEditor();
+        this.__link = link;
     }
 }
-function $createInlineImageNode({ targetDocumentId, targetCollectionId, targetCollectionPath, document: document1, src, position, altText, height, width, showCaption, caption, key }) {
+function $createInlineImageNode({ targetDocumentId, targetCollectionId, targetCollectionPath, document: document1, src, position, altText, height, width, showCaption, caption, link, key }) {
     const relation = {
         targetDocumentId,
         targetCollectionId,
         targetCollectionPath,
         document: document1
     };
-    return $applyNodeReplacement(new InlineImageNode(relation, src, position, altText, width, height, showCaption, caption, key));
+    return $applyNodeReplacement(new InlineImageNode(relation, src, position, altText, width, height, showCaption, caption, link, key));
 }
 function $isInlineImageNode(node) {
     return node instanceof InlineImageNode;

package/dist/field/extensions/inline-image/node-types.d.ts

@@ -7,7 +7,23 @@
  */
 import type { LexicalEditor, NodeKey, SerializedEditor, SerializedLexicalNode, Spread } from 'lexical';
 import type { DocumentRelation } from '../../nodes/document-relation.js';
+import type { LinkAttributes } from '../link/index.js';
 export type Position = 'left' | 'right' | 'full' | 'wide' | 'default' | undefined;
+/**
+ * An inline image carries **two** independent document references, and the
+ * distinction matters at every layer:
+ *
+ *   - the flat `DocumentRelation` this interface extends — the *media*
+ *     document the image is sourced from. Always present.
+ *   - `link` — an optional *click-through target*. Nested rather than
+ *     flattened precisely because the flat envelope is already spent on
+ *     the media pick, and the two resolve against different collections.
+ *
+ * `link` reuses the link extension's discriminated union, so an image can
+ * point at a Byline document (`linkType: 'internal'`, relation refreshed
+ * by `inlineImageLinkVisitor`) or at an arbitrary URL
+ * (`linkType: 'custom'`). Absent means the image is not clickable.
+ */
 export interface InlineImageAttributes extends DocumentRelation {
     src: string;
     altText?: string;
@@ -17,6 +33,7 @@ export interface InlineImageAttributes extends DocumentRelation {
     key?: NodeKey;
     showCaption?: boolean;
     caption?: LexicalEditor;
+    link?: LinkAttributes;
 }
 export type SerializedInlineImageNode = Spread<DocumentRelation & {
     src: string;
@@ -26,4 +43,6 @@ export type SerializedInlineImageNode = Spread<DocumentRelation & {
     width?: number | string;
     showCaption: boolean;
     caption: SerializedEditor;
+    /** Optional click-through target; absent on unlinked images. */
+    link?: LinkAttributes;
 }, SerializedLexicalNode>;

package/dist/field/extensions/inline-image/populate.d.ts

@@ -7,3 +7,25 @@
  */
 import type { LexicalNodeVisitor } from '../../lexical-populate-shared.js';
 export declare const inlineImageVisitor: LexicalNodeVisitor;
+/**
+ * Second visitor for the same node type. An inline image carries **two**
+ * independent relations:
+ *
+ *   - the flat `DocumentRelation` envelope on the node — the *media*
+ *     document the image comes from, refreshed by `inlineImageVisitor`
+ *     above;
+ *   - `node.link` — an optional *click-through target*, which is an
+ *     unrelated document in an unrelated collection.
+ *
+ * They cannot share one visitor: `PendingHydration` addresses exactly one
+ * `{ collectionPath, documentId }` pair. `runLexicalPopulate` runs every
+ * visitor against every node and enqueues each match separately, so
+ * registering this alongside `inlineImageVisitor` hydrates both relations
+ * in the same batched pass with no change to the driver contract.
+ *
+ * Only `linkType: 'internal'` links carry a relation; custom-URL links are
+ * a literal href and are skipped. Resolution branches — found, hook threw,
+ * target missing — are the internal-link rules shared with `linkVisitor`
+ * (see `../link/populate.ts`).
+ */
+export declare const inlineImageLinkVisitor: LexicalNodeVisitor;

package/dist/field/extensions/inline-image/populate.js

@@ -1,3 +1,4 @@
+import { createInternalLinkHydration } from "../link/populate.js";
 import { deriveImageSizes, getPreferredSize } from "./utils.js";
 const inlineImageVisitor = {
     match (node) {
@@ -33,4 +34,21 @@ const inlineImageVisitor = {
         };
     }
 };
-export { inlineImageVisitor };
+const inlineImageLinkVisitor = {
+    match (node) {
+        if ('inline-image' !== node.type) return null;
+        const link = node.link;
+        if (null == link) return null;
+        if ('internal' !== link.linkType) return null;
+        const collectionPath = link.targetCollectionPath;
+        const documentId = link.targetDocumentId;
+        if (!collectionPath || !documentId) return null;
+        return {
+            node,
+            collectionPath,
+            documentId,
+            ...createInternalLinkHydration(link, collectionPath, documentId)
+        };
+    }
+};
+export { inlineImageLinkVisitor, inlineImageVisitor };

package/dist/field/extensions/inline-image/types.d.ts

@@ -6,6 +6,7 @@
  * Copyright (c) Infonomic Company Limited
  */
 import type { DocumentRelation } from '../../nodes/document-relation.js';
+import type { LinkAttributes } from '../link/index.js';
 import type { Position } from './node-types.js';
 /**
  * The form-shape carried into / out of the inline image modal. Mirrors
@@ -23,6 +24,12 @@ export interface InlineImageData {
     width?: number | string;
     height?: number | string;
     showCaption?: boolean;
+    /**
+     * Optional click-through target. `undefined` means "no link" — and the
+     * modal always emits the key, so the node's `update()` can tell
+     * "unchanged" from "cleared".
+     */
+    link?: LinkAttributes;
 }
 export interface InlineImageModalProps {
     /** Modal visibility — driven by the plugin's open/close commands. */

package/dist/field/extensions/link/link-href.d.ts

@@ -0,0 +1,30 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+/**
+ * Resolve a `LinkAttributes` to a renderable href, or `null` when no
+ * usable target exists.
+ *
+ * React-free and DOM-free, so the editor, the markdown serializer and any
+ * host renderer can share one definition of the internal-link fallback
+ * chain (documented in `docs/04-collections/07-rich-text.md`):
+ *
+ *   1. `document._resolved === false` — the server-side walker could not
+ *      find the target on its last pass. Return null; callers degrade.
+ *   2. `document.path` starts with `/` — canonical, written by the walker
+ *      via `buildDocumentPath`. Use as-is.
+ *   3. `document.path` is a bare slug — compose `/${collectionPath}/${path}`.
+ *      Covers legacy nodes and picker-time writes not yet walked.
+ *   4. Anything else — null.
+ *
+ * `null` is never "render an empty href". It means the link is not
+ * renderable, and each caller has its own way of degrading: the editor
+ * withholds its cmd-click affordance, the markdown serializer emits the
+ * image without a wrapper, the public renderer drops the anchor.
+ */
+import type { LinkAttributes } from './index.js';
+export declare function resolveLinkHref(link: LinkAttributes | undefined | null): string | null;

package/dist/field/extensions/link/link-href.js

@@ -0,0 +1,14 @@
+function resolveLinkHref(link) {
+    if (null == link) return null;
+    if ('internal' === link.linkType) {
+        if (link.document?._resolved === false) return null;
+        const path = link.document?.path;
+        if ('string' != typeof path || 0 === path.length) return null;
+        if (path.startsWith('/')) return path;
+        if (link.targetCollectionPath) return `/${link.targetCollectionPath}/${path}`;
+        return null;
+    }
+    const url = link.url;
+    return 'string' == typeof url && url.length > 0 ? url : null;
+}
+export { resolveLinkHref };