@byline/richtext-lexical 6.3.0 → 6.5.0

package/dist/field/context/shared-on-change-context.js

@@ -16,6 +16,6 @@ const SharedOnChangeContext = ({ children, onChange })=>{
 const useSharedOnChange = ()=>{
     const context = useContext(Context);
     if (void 0 !== context) return context;
-    throw new Error('useSharedOnChange must be used within an SharedOnChangeProvider');
+    else throw new Error('useSharedOnChange must be used within an SharedOnChangeProvider');
 };
 export { SharedOnChangeContext, useSharedOnChange };

package/dist/field/extensions/code-highlight/code-highlight-extension.js

@@ -1,4 +1,5 @@
-import { CodeHighlightNode, CodeNode, registerCodeHighlighting } from "@lexical/code";
+import { CodeHighlightNode, CodeNode } from "@lexical/code";
+import { registerCodeHighlighting } from "@lexical/code-prism";
 import { defineExtension } from "lexical";
 const CodeHighlightExtension = defineExtension({
     name: '@byline/richtext-lexical/CodeHighlight',

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

@@ -30,7 +30,8 @@ function readNodeAsInitialData(editor, nodeKey) {
             src: node.getSrc(),
             altText: node.getAltText(),
             position: node.getPosition(),
-            showCaption: node.getShowCaption()
+            showCaption: node.getShowCaption(),
+            link: node.getLink()
         };
     });
     return data;
@@ -87,7 +88,8 @@ function InlineImagePlugin() {
             position: data.position,
             width: data.width,
             height: data.height,
-            showCaption: data.showCaption
+            showCaption: data.showCaption,
+            link: data.link
         };
         if ('edit' === modalState.mode && null != modalState.nodeKey) editor.dispatchCommand(UPDATE_INLINE_IMAGE_COMMAND, {
             nodeKey: modalState.nodeKey,

package/dist/field/extensions/inline-image/inline-image-modal.css

@@ -49,3 +49,70 @@
   overflow: hidden;
 }
 
+.inline-image-modal-tabs.byline-tabs-root {
+  border: none;
+  border-radius: 0;
+  gap: 0;
+  padding: 0;
+}
+
+.inline-image-modal-tabs .byline-tabs-list {
+  border: none;
+  border-bottom: 1px solid var(--border-color);
+  border-radius: 0;
+  gap: 1.25rem;
+  padding: 0;
+}
+
+.inline-image-modal-tabs .byline-tabs-trigger {
+  width: auto;
+  color: var(--gray-500);
+  font-size: 1rem;
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  background: none;
+  border: none;
+  border-bottom: 2px solid #0000;
+  flex: none;
+  justify-content: flex-start;
+  margin-bottom: -1px;
+  padding: .5rem 0;
+  transition: color .15s, border-color .15s;
+  display: inline-flex;
+  position: relative;
+}
+
+.inline-image-modal-tabs .byline-tabs-trigger:hover {
+  color: var(--gray-800);
+  border-bottom-color: var(--gray-300);
+}
+
+.inline-image-modal-tabs .byline-tabs-trigger:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--blue-500);
+  border-radius: var(--radius-sm, 3px);
+  outline: none;
+}
+
+.inline-image-modal-tabs .byline-tabs-trigger[data-active], .inline-image-modal-tabs .byline-tabs-trigger[data-active]:hover {
+  color: var(--primary-600);
+  border-bottom-color: var(--primary-400);
+}
+
+.inline-image-modal-tabs .inline-image-modal-link-panel {
+  min-height: 20rem;
+}
+
+:is([data-theme="dark"], .dark) .inline-image-modal-tabs .byline-tabs-trigger {
+  color: var(--gray-400);
+}
+
+:is([data-theme="dark"], .dark) .inline-image-modal-tabs .byline-tabs-trigger:hover {
+  color: var(--gray-200);
+  border-bottom-color: var(--gray-600);
+}
+
+:is([data-theme="dark"], .dark) .inline-image-modal-tabs .byline-tabs-trigger[data-active], :is([data-theme="dark"], .dark) .inline-image-modal-tabs .byline-tabs-trigger[data-active]:hover {
+  color: var(--primary-200);
+  border-bottom-color: var(--primary-400);
+}
+

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

@@ -2,27 +2,34 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { RelationPicker } from "@byline/admin/react";
-import { getCollectionDefinition, isSingleton } from "@byline/core";
-import { Button, Checkbox, CloseIcon, ErrorText, IconButton, Input, Label, Modal, RadioGroup, RadioGroupItem } from "@byline/ui/react";
+import { getAdminConfig, getCollectionDefinition, isSingleton } from "@byline/core";
+import { Button, Checkbox, CloseIcon, ErrorText, IconButton, Input, Label, Modal, RadioGroup, RadioGroupItem, Tabs } from "@byline/ui/react";
 import { useModalFormState } from "../../shared/useModalFormState.js";
+import { LinkTargetFields } from "../link/link-target-fields.js";
+import { fromLinkAttributes, toLinkAttributes, validateLinkTarget } from "../link/link-target-state.js";
 import { isAltTextValid, positionOptions } from "./fields.js";
 import { deriveImageSizes, getPreferredSize } from "./utils.js";
 import "./inline-image-modal.css";
-function emptyState() {
+const LINK_TARGET_OPTIONS = {
+    allowNone: true
+};
+function emptyState(linkable) {
     return {
         documentRelation: null,
         altText: '',
         position: 'full',
-        showCaption: false
+        showCaption: false,
+        target: fromLinkAttributes(void 0, linkable, LINK_TARGET_OPTIONS)
     };
 }
-function fromInlineImageData(data) {
-    if (!data) return emptyState();
+function fromInlineImageData(data, linkable) {
+    if (!data) return emptyState(linkable);
     return {
         documentRelation: data.documentRelation ?? null,
         altText: data.altText ?? '',
         position: data.position ?? 'full',
-        showCaption: data.showCaption ?? false
+        showCaption: data.showCaption ?? false,
+        target: fromLinkAttributes(data.link, linkable, LINK_TARGET_OPTIONS)
     };
 }
 const LABEL_FIELD_KEYS = [
@@ -45,9 +52,14 @@ const InlineImageModal = ({ isOpen, collection, data: dataFromProps, onSubmit, o
     const [pickerOpen, setPickerOpen] = useState(false);
     const [altError, setAltError] = useState(null);
     const [imageError, setImageError] = useState(null);
-    const [state, setState] = useModalFormState(isOpen, ()=>fromInlineImageData(dataFromProps), ()=>{
+    const [linkError, setLinkError] = useState(null);
+    const [activeTab, setActiveTab] = useState('image');
+    const linkable = useMemo(()=>getAdminConfig().collections.filter((collection)=>!isSingleton(collection) && true === collection.linksInEditor), []);
+    const [state, setState] = useModalFormState(isOpen, ()=>fromInlineImageData(dataFromProps, linkable), ()=>{
         setAltError(null);
         setImageError(null);
+        setLinkError(null);
+        setActiveTab('image');
     });
     const targetDefinition = getCollectionDefinition(collection);
     const targetDef = null == targetDefinition || isSingleton(targetDefinition) ? null : targetDefinition;
@@ -99,8 +111,22 @@ const InlineImageModal = ({ isOpen, collection, data: dataFromProps, onSubmit, o
         setImageError(null);
     };
     const handleSave = ()=>{
-        if (!state.documentRelation || !pickedImage) return void setImageError('Pick an image');
-        if (!isAltTextValid(state.altText)) return void setAltError('Alt text is required');
+        if (!state.documentRelation || !pickedImage) {
+            setImageError('Pick an image');
+            setActiveTab('image');
+            return;
+        }
+        if (!isAltTextValid(state.altText)) {
+            setAltError('Alt text is required');
+            setActiveTab('image');
+            return;
+        }
+        const linkProblem = validateLinkTarget(state.target);
+        if (null != linkProblem) {
+            setLinkError(linkProblem);
+            setActiveTab('link');
+            return;
+        }
         const preferred = getPreferredSize(state.position, pickedImage);
         const data = {
             documentRelation: state.documentRelation,
@@ -109,7 +135,8 @@ const InlineImageModal = ({ isOpen, collection, data: dataFromProps, onSubmit, o
             position: state.position,
             width: preferred?.width,
             height: preferred?.height,
-            showCaption: state.showCaption
+            showCaption: state.showCaption,
+            link: toLinkAttributes(state.target)
         };
         onSubmit(data);
         onClose();
@@ -147,106 +174,154 @@ const InlineImageModal = ({ isOpen, collection, data: dataFromProps, onSubmit, o
                             ]
                         }),
                         /*#__PURE__*/ jsx(Modal.Content, {
-                            children: /*#__PURE__*/ jsxs("div", {
-                                className: "flex flex-col gap-4",
+                            children: /*#__PURE__*/ jsxs(Tabs, {
+                                className: "inline-image-modal-tabs",
+                                value: activeTab,
+                                onValueChange: (value)=>setActiveTab(value),
                                 children: [
-                                    /*#__PURE__*/ jsxs("div", {
-                                        className: "flex flex-col gap-2",
+                                    /*#__PURE__*/ jsxs(Tabs.List, {
+                                        className: "mb-4",
                                         children: [
-                                            /*#__PURE__*/ jsx("span", {
-                                                className: "text-sm font-medium",
+                                            /*#__PURE__*/ jsx(Tabs.Trigger, {
+                                                value: "image",
                                                 children: "Image"
                                             }),
-                                            /*#__PURE__*/ jsxs("div", {
-                                                className: "inline-image-modal-picker",
-                                                children: [
-                                                    pickedThumbUrl ? /*#__PURE__*/ jsx("img", {
-                                                        src: pickedThumbUrl,
-                                                        alt: pickedTitle ?? '',
-                                                        className: "inline-image-modal-thumb"
-                                                    }) : /*#__PURE__*/ jsx("div", {
-                                                        className: "inline-image-modal-thumb-placeholder",
-                                                        children: "—"
-                                                    }),
-                                                    /*#__PURE__*/ jsxs("div", {
-                                                        className: "inline-image-modal-picker-details",
-                                                        children: [
-                                                            pickedTitle && /*#__PURE__*/ jsx("span", {
-                                                                className: "inline-image-modal-title",
-                                                                children: pickedTitle
-                                                            }),
-                                                            /*#__PURE__*/ jsx(Button, {
-                                                                size: "sm",
-                                                                className: "inline-image-modal-change-btn",
-                                                                variant: "outlined",
-                                                                intent: "noeffect",
-                                                                type: "button",
-                                                                onClick: ()=>setPickerOpen(true),
-                                                                children: state.documentRelation ? 'Change image…' : `Pick ${targetDef?.labels.singular ?? 'image'}…`
-                                                            })
-                                                        ]
-                                                    })
-                                                ]
-                                            }),
-                                            imageError && /*#__PURE__*/ jsx(ErrorText, {
-                                                id: "image-error",
-                                                text: imageError
+                                            /*#__PURE__*/ jsx(Tabs.Trigger, {
+                                                value: "link",
+                                                children: "Link"
                                             })
                                         ]
                                     }),
-                                    /*#__PURE__*/ jsx(Input, {
-                                        id: "inline-image-alt",
-                                        name: "altText",
-                                        label: "Alt text",
-                                        required: true,
-                                        placeholder: "Describe the image for screen readers",
-                                        value: state.altText,
-                                        error: null != altError,
-                                        errorText: altError ?? void 0,
-                                        onChange: (e)=>{
-                                            setAltError(null);
-                                            setState((s)=>({
-                                                    ...s,
-                                                    altText: e.target.value
-                                                }));
-                                        }
+                                    /*#__PURE__*/ jsx(Tabs.Content, {
+                                        value: "image",
+                                        children: /*#__PURE__*/ jsxs("div", {
+                                            className: "flex flex-col gap-4",
+                                            children: [
+                                                /*#__PURE__*/ jsxs("div", {
+                                                    className: "flex flex-col gap-2",
+                                                    children: [
+                                                        /*#__PURE__*/ jsx("span", {
+                                                            className: "text-sm font-medium",
+                                                            children: "Image"
+                                                        }),
+                                                        /*#__PURE__*/ jsxs("div", {
+                                                            className: "inline-image-modal-picker",
+                                                            children: [
+                                                                pickedThumbUrl ? /*#__PURE__*/ jsx("img", {
+                                                                    src: pickedThumbUrl,
+                                                                    alt: pickedTitle ?? '',
+                                                                    className: "inline-image-modal-thumb"
+                                                                }) : /*#__PURE__*/ jsx("div", {
+                                                                    className: "inline-image-modal-thumb-placeholder",
+                                                                    children: "—"
+                                                                }),
+                                                                /*#__PURE__*/ jsxs("div", {
+                                                                    className: "inline-image-modal-picker-details",
+                                                                    children: [
+                                                                        pickedTitle && /*#__PURE__*/ jsx("span", {
+                                                                            className: "inline-image-modal-title",
+                                                                            children: pickedTitle
+                                                                        }),
+                                                                        /*#__PURE__*/ jsx(Button, {
+                                                                            size: "sm",
+                                                                            className: "inline-image-modal-change-btn",
+                                                                            variant: "outlined",
+                                                                            intent: "noeffect",
+                                                                            type: "button",
+                                                                            onClick: ()=>setPickerOpen(true),
+                                                                            children: state.documentRelation ? 'Change image…' : `Pick ${targetDef?.labels.singular ?? 'image'}…`
+                                                                        })
+                                                                    ]
+                                                                })
+                                                            ]
+                                                        }),
+                                                        imageError && /*#__PURE__*/ jsx(ErrorText, {
+                                                            id: "image-error",
+                                                            text: imageError
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ jsx(Input, {
+                                                    id: "inline-image-alt",
+                                                    name: "altText",
+                                                    label: "Alt text",
+                                                    required: true,
+                                                    placeholder: "Describe the image for screen readers",
+                                                    value: state.altText,
+                                                    error: null != altError,
+                                                    errorText: altError ?? void 0,
+                                                    onChange: (e)=>{
+                                                        setAltError(null);
+                                                        setState((s)=>({
+                                                                ...s,
+                                                                altText: e.target.value
+                                                            }));
+                                                    }
+                                                }),
+                                                /*#__PURE__*/ jsxs("div", {
+                                                    className: "flex flex-col gap-2 mb-3",
+                                                    children: [
+                                                        /*#__PURE__*/ jsx(Label, {
+                                                            htmlFor: "inline-image-position",
+                                                            id: "inline-image-position-label",
+                                                            className: "text-sm font-medium",
+                                                            label: "Position"
+                                                        }),
+                                                        /*#__PURE__*/ jsx(RadioGroup, {
+                                                            id: "inline-image-position",
+                                                            name: "position",
+                                                            "aria-labelledby": "inline-image-position-label",
+                                                            direction: "row",
+                                                            value: state.position ?? 'full',
+                                                            onValueChange: (value)=>setState((s)=>({
+                                                                        ...s,
+                                                                        position: value
+                                                                    })),
+                                                            children: positionOptions.map((opt)=>/*#__PURE__*/ jsx(RadioGroupItem, {
+                                                                    id: `inline-image-position-${opt.value}`,
+                                                                    value: String(opt.value),
+                                                                    label: opt.label
+                                                                }, String(opt.value)))
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ jsx(Checkbox, {
+                                                    id: "inline-image-caption",
+                                                    name: "showCaption",
+                                                    label: "Show caption",
+                                                    checked: state.showCaption,
+                                                    onCheckedChange: (checked)=>setState((s)=>({
+                                                                ...s,
+                                                                showCaption: true === checked
+                                                            }))
+                                                })
+                                            ]
+                                        })
                                     }),
-                                    /*#__PURE__*/ jsxs("div", {
-                                        className: "flex flex-col gap-2 mb-3",
+                                    /*#__PURE__*/ jsxs(Tabs.Content, {
+                                        value: "link",
+                                        className: "inline-image-modal-link-panel",
                                         children: [
-                                            /*#__PURE__*/ jsx(Label, {
-                                                htmlFor: "inline-image-position",
-                                                id: "inline-image-position-label",
-                                                className: "text-sm font-medium",
-                                                label: "Position"
+                                            /*#__PURE__*/ jsx("p", {
+                                                className: "mt-0 mb-3 text-sm text-accent-400",
+                                                children: "Give the image a click target. Leave this as “No link” for a plain image."
                                             }),
-                                            /*#__PURE__*/ jsx(RadioGroup, {
-                                                id: "inline-image-position",
-                                                name: "position",
-                                                "aria-labelledby": "inline-image-position-label",
-                                                direction: "row",
-                                                value: state.position ?? 'full',
-                                                onValueChange: (value)=>setState((s)=>({
+                                            /*#__PURE__*/ jsx(LinkTargetFields, {
+                                                idPrefix: "inline-image-link",
+                                                state: state.target,
+                                                onChange: (target)=>{
+                                                    setLinkError(null);
+                                                    setState((s)=>({
                                                             ...s,
-                                                            position: value
-                                                        })),
-                                                children: positionOptions.map((opt)=>/*#__PURE__*/ jsx(RadioGroupItem, {
-                                                        id: `inline-image-position-${opt.value}`,
-                                                        value: String(opt.value),
-                                                        label: opt.label
-                                                    }, String(opt.value)))
+                                                            target
+                                                        }));
+                                                },
+                                                linkable: linkable,
+                                                allowNone: true,
+                                                error: linkError,
+                                                legend: "Link to"
                                             })
                                         ]
-                                    }),
-                                    /*#__PURE__*/ jsx(Checkbox, {
-                                        id: "inline-image-caption",
-                                        name: "showCaption",
-                                        label: "Show caption",
-                                        checked: state.showCaption,
-                                        onCheckedChange: (checked)=>setState((s)=>({
-                                                    ...s,
-                                                    showCaption: true === checked
-                                                }))
                                     })
                                 ]
                             })

package/dist/field/extensions/inline-image/inline-image-node-component.css

@@ -10,6 +10,14 @@
   max-width: 100%;
 }
 
+.LexicalEditor__inline-image.has-link img {
+  cursor: pointer;
+}
+
+.LexicalEditor__inline-image.has-link img.focused.draggable {
+  cursor: grab;
+}
+
 .LexicalEditor__inline-image img.focused {
   outline: 2px solid #3c84f4;
 }
@@ -65,6 +73,35 @@
   background-color: #3c84f480;
 }
 
+.LexicalEditor__inline-image .image-link-badge {
+  color: #fff;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  background-color: #00000080;
+  border: 1px solid #ffffff4d;
+  border-radius: 5px;
+  align-items: center;
+  gap: 4px;
+  max-width: calc(100% - 90px);
+  padding: 1px 6px;
+  font-size: .8rem;
+  display: flex;
+  position: absolute;
+  top: 12px;
+  left: 12px;
+}
+
+.LexicalEditor__inline-image .image-link-badge:hover {
+  background-color: #3c84f480;
+}
+
+.LexicalEditor__inline-image .image-link-badge__label {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
 .LexicalEditor__inline-image .InlineImageNode__caption_container {
   color: #000;
   background-color: #f4f4f4;

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

@@ -8,9 +8,10 @@
 import type * as React from 'react';
 import type { LexicalEditor, NodeKey } from 'lexical';
 import type { DocumentRelation } from '../../nodes/document-relation.js';
+import type { LinkAttributes } from '../link/index.js';
 import type { Position } from './node-types.js';
 import './inline-image-node-component.css';
-export default function InlineImageComponent({ relation, src, position, altText, width, height, showCaption, caption, nodeKey, }: {
+export default function InlineImageComponent({ relation, src, position, altText, width, height, showCaption, caption, link, nodeKey, }: {
     relation: DocumentRelation;
     src: string;
     position: Position;
@@ -19,5 +20,6 @@ export default function InlineImageComponent({ relation, src, position, altText,
     width?: number | string;
     showCaption: boolean;
     caption: LexicalEditor;
+    link?: LinkAttributes;
     nodeKey: NodeKey;
 }): React.JSX.Element;

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

@@ -17,6 +17,7 @@ import placeholder_inline from "../../ui/placeholder-inline.js";
 import { FloatingTextFormatToolbarPlugin } from "../floating-text-format/index.js";
 import { FloatingLinkEditorPlugin } from "../link/floating-link-editor.js";
 import { LinkPlugin } from "../link/link-extension.js";
+import { resolveLinkHref } from "../link/link-href.js";
 import { OPEN_INLINE_IMAGE_MODAL_COMMAND } from "./inline-image-extension.js";
 import { $isInlineImageNode } from "./inline-image-node.js";
 import "./inline-image-node-component.css";
@@ -49,7 +50,7 @@ function LazyImage({ id, collection, src, position, altText, className, imageRef
         draggable: "false"
     });
 }
-function InlineImageComponent({ relation, src, position, altText, width, height, showCaption, caption, nodeKey }) {
+function InlineImageComponent({ relation, src, position, altText, width, height, showCaption, caption, link, nodeKey }) {
     const { targetDocumentId: id, targetCollectionPath: collection } = relation;
     const [editor] = useLexicalComposerContext();
     const { onChange } = useSharedOnChange();
@@ -59,6 +60,9 @@ function InlineImageComponent({ relation, src, position, altText, width, height,
     const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
     const [selection, setSelection] = useState(null);
     const activeEditorRef = useRef(null);
+    const linkHref = resolveLinkHref(link);
+    const linkHrefRef = useRef(linkHref);
+    linkHrefRef.current = linkHref;
     const onDelete = useCallback((payload)=>{
         if (isSelected && $isNodeSelection($getSelection())) {
             const event = payload;
@@ -120,6 +124,12 @@ function InlineImageComponent({ relation, src, position, altText, width, height,
         }, COMMAND_PRIORITY_LOW), editor.registerCommand(CLICK_COMMAND, (payload)=>{
             const event = payload;
             if (event.target === imageRef.current) {
+                const href = linkHrefRef.current;
+                if (null != href && (event.metaKey || event.ctrlKey)) {
+                    event.preventDefault();
+                    window.open(href, '_blank', 'noopener,noreferrer');
+                    return true;
+                }
                 if (event.shiftKey) setSelected(!isSelected);
                 else {
                     clearSelection();
@@ -150,6 +160,18 @@ function InlineImageComponent({ relation, src, position, altText, width, height,
     ]);
     const draggable = isSelected && $isNodeSelection(selection);
     const isFocused = isSelected;
+    const linkBadgeLabel = (()=>{
+        if (null == link) return '';
+        if ('internal' === link.linkType) {
+            if (link.document?._resolved === false) return 'Missing target';
+            return link.document?.title ?? link.targetCollectionPath;
+        }
+        try {
+            return new URL(link.url ?? '').hostname;
+        } catch  {
+            return link.url ?? '';
+        }
+    })();
     const handleToggleModal = ()=>{
         editor.dispatchCommand(OPEN_INLINE_IMAGE_MODAL_COMMAND, {
             nodeKey
@@ -173,6 +195,22 @@ function InlineImageComponent({ relation, src, position, altText, width, height,
                     onClick: handleToggleModal,
                     children: "Edit"
                 }),
+                null != link && /*#__PURE__*/ jsxs("button", {
+                    type: "button",
+                    className: "image-link-badge",
+                    title: null != linkHref ? `Links to ${linkHref} — ⌘/Ctrl-click the image to open` : 'Link target could not be resolved',
+                    onClick: handleToggleModal,
+                    children: [
+                        /*#__PURE__*/ jsx("span", {
+                            "aria-hidden": "true",
+                            children: "\uD83D\uDD17"
+                        }),
+                        /*#__PURE__*/ jsx("span", {
+                            className: "image-link-badge__label",
+                            children: linkBadgeLabel
+                        })
+                    ]
+                }),
                 /*#__PURE__*/ jsx(LazyImage, {
                     id: id,
                     collection: collection,

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

@@ -9,6 +9,7 @@ import * as React from 'react';
 import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedLexicalNode } from 'lexical';
 import { DecoratorNode } from 'lexical';
 import type { DocumentRelation } from '../../nodes/document-relation.js';
+import type { LinkAttributes } from '../link/index.js';
 import type { InlineImageAttributes, Position, SerializedInlineImageNode } from './node-types.js';
 export declare class InlineImageNode extends DecoratorNode<React.JSX.Element> {
     __relation: DocumentRelation;
@@ -19,11 +20,12 @@ export declare class InlineImageNode extends DecoratorNode<React.JSX.Element> {
     __height: number | string | undefined;
     __showCaption: boolean;
     __caption: LexicalEditor;
+    __link: LinkAttributes | undefined;
     static getType(): string;
     static clone(node: InlineImageNode): InlineImageNode;
     static importJSON(serializedNode: SerializedLexicalNode): InlineImageNode;
     static importDOM(): DOMConversionMap | null;
-    constructor(relation: DocumentRelation, src: string, position: Position, altText?: string, width?: number | string, height?: number | string, showCaption?: boolean, caption?: LexicalEditor, key?: NodeKey);
+    constructor(relation: DocumentRelation, src: string, position: Position, altText?: string, width?: number | string, height?: number | string, showCaption?: boolean, caption?: LexicalEditor, link?: LinkAttributes, key?: NodeKey);
     exportDOM(): DOMExportOutput;
     exportJSON(): SerializedInlineImageNode;
     getRelation(): DocumentRelation;
@@ -33,12 +35,21 @@ export declare class InlineImageNode extends DecoratorNode<React.JSX.Element> {
     setWidthAndHeight(width: number | string, height: number | string): void;
     getShowCaption(): boolean;
     setShowCaption(showCaption: boolean): void;
+    getLink(): LinkAttributes | undefined;
+    setLink(link: LinkAttributes | undefined): void;
     getPosition(): Position;
     setPosition(position: Position): void;
     update(payload: InlineImageAttributes): void;
+    /**
+     * `has-link` drives the editor's cursor affordance — see
+     * `inline-image-node-component.css`. It is a class rather than a
+     * decorator-side style so the hover state is correct before React has
+     * hydrated the decorator.
+     */
+    private buildClassName;
     createDOM(config: EditorConfig): HTMLElement;
     updateDOM(prevNode: InlineImageNode, dom: HTMLElement, config: EditorConfig): boolean;
     decorate(): React.JSX.Element;
 }
-export declare function $createInlineImageNode({ targetDocumentId, targetCollectionId, targetCollectionPath, document, src, position, altText, height, width, showCaption, caption, key, }: InlineImageAttributes): InlineImageNode;
+export declare function $createInlineImageNode({ targetDocumentId, targetCollectionId, targetCollectionPath, document, src, position, altText, height, width, showCaption, caption, link, key, }: InlineImageAttributes): InlineImageNode;
 export declare function $isInlineImageNode(node: LexicalNode | null | undefined): node is InlineImageNode;