@byline/richtext-lexical 6.4.0 → 6.6.0

package/src/field/extensions/code-highlight/code-highlight-extension.ts

@@ -8,7 +8,14 @@
  * Portions Copyright (c) Meta Platforms, Inc. and affiliates.
  */
 
-import { CodeHighlightNode, CodeNode, registerCodeHighlighting } from '@lexical/code'
+import { CodeHighlightNode, CodeNode } from '@lexical/code'
+// Lexical 0.51 removed the Prism re-exports from `@lexical/code`, which is
+// now a thin facade over `@lexical/code-core` with no highlighter of its
+// own. The tokenizer lives in a sibling package per highlighter —
+// `@lexical/code-prism` keeps the Prism behaviour this editor already had;
+// `@lexical/code-shiki` is the alternative and does not ship the language
+// maps the toolbar reads.
+import { registerCodeHighlighting } from '@lexical/code-prism'
 import { defineExtension } from 'lexical'
 
 export const CodeHighlightExtension = defineExtension({

package/src/field/extensions/inline-image/inline-image-extension.tsx

@@ -105,6 +105,7 @@ function readNodeAsInitialData(
       altText: node.getAltText(),
       position: node.getPosition(),
       showCaption: node.getShowCaption(),
+      link: node.getLink(),
     }
   })
   return data
@@ -181,6 +182,10 @@ export function InlineImagePlugin(): React.JSX.Element {
         width: data.width,
         height: data.height,
         showCaption: data.showCaption,
+        // Spread unconditionally — `InlineImageNode.update()` keys on the
+        // presence of `link`, so omitting it would make "remove this link"
+        // a silent no-op.
+        link: data.link,
       }
 
       if (modalState.mode === 'edit' && modalState.nodeKey != null) {

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

@@ -57,3 +57,103 @@
   font-size: 0.875rem;
   color: var(--text-subtle);
 }
+
+/**
+ * Tab strip — matched to the admin document editor's tabs.
+ *
+ * The shared `@byline/ui` Tabs ships a boxed look (bordered root, bordered
+ * list). Inside this modal we want the admin surface's idiom instead:
+ * borderless triggers on a hairline rule, muted by default, primary text
+ * plus a 2px primary underline when selected. Rather than change the
+ * shared component — which every other Tabs consumer would inherit — the
+ * overrides are scoped to `.inline-image-modal-tabs`.
+ *
+ * Base UI 1.8 marks the selected trigger with `data-active` (not
+ * `data-selected`). Colours, weights and transitions mirror
+ * `packages/admin/src/presentation/tabs.module.css` so the two strips stay
+ * recognisably the same control.
+ */
+
+.inline-image-modal-tabs.byline-tabs-root {
+  padding: 0;
+  gap: 0;
+  border: none;
+  border-radius: 0;
+}
+
+.inline-image-modal-tabs .byline-tabs-list {
+  gap: 1.25rem;
+  padding: 0;
+  border: none;
+  border-bottom: 1px solid var(--border-color);
+  border-radius: 0;
+}
+
+.inline-image-modal-tabs .byline-tabs-trigger {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  width: auto;
+  justify-content: flex-start;
+  padding: 0.5rem 0;
+  /* Sits on top of the list's hairline so the active underline covers it. */
+  margin-bottom: -1px;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: none;
+  color: var(--gray-500);
+  font-size: 1rem;
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition:
+    color 150ms ease,
+    border-color 150ms ease;
+}
+
+.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 {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--blue-500);
+  border-radius: var(--radius-sm, 3px);
+}
+
+.inline-image-modal-tabs .byline-tabs-trigger[data-active] {
+  color: var(--primary-600);
+  border-bottom-color: var(--primary-400);
+}
+
+.inline-image-modal-tabs .byline-tabs-trigger[data-active]:hover {
+  color: var(--primary-600);
+  border-bottom-color: var(--primary-400);
+}
+
+/*
+ * Reserve the height of the tallest link state. Measured: 118px with no
+ * link, 231px for a custom URL, 301px for a document pick — so choosing a
+ * link type would otherwise shift the dialog by ~180px under the cursor.
+ * The floor holds the panel steady across all three.
+ */
+.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);
+  }
+
+  .inline-image-modal-tabs .byline-tabs-trigger:hover {
+    color: var(--gray-200);
+    border-bottom-color: var(--gray-600);
+  }
+
+  .inline-image-modal-tabs .byline-tabs-trigger[data-active],
+  .inline-image-modal-tabs .byline-tabs-trigger[data-active]:hover {
+    color: var(--primary-200);
+    border-bottom-color: var(--primary-400);
+  }
+}

package/src/field/extensions/inline-image/inline-image-modal.tsx

@@ -13,7 +13,7 @@ import { useMemo, useState } from 'react'
 
 import { RelationPicker } from '@byline/admin/react'
 import type { MultiCollectionDefinition, StoredFileValue } from '@byline/core'
-import { getCollectionDefinition, isSingleton } from '@byline/core'
+import { getAdminConfig, getCollectionDefinition, isSingleton } from '@byline/core'
 import {
   Button,
   Checkbox,
@@ -25,9 +25,17 @@ import {
   Modal,
   RadioGroup,
   RadioGroupItem,
+  Tabs,
 } from '@byline/ui/react'
 
 import { useModalFormState } from '../../shared/useModalFormState'
+import { LinkTargetFields } from '../link/link-target-fields'
+import {
+  fromLinkAttributes,
+  type LinkTargetState,
+  toLinkAttributes,
+  validateLinkTarget,
+} from '../link/link-target-state'
 import { isAltTextValid, positionOptions } from './fields'
 import { deriveImageSizes, getPreferredSize } from './utils'
 import type { DocumentRelation } from '../../nodes/document-relation'
@@ -41,24 +49,38 @@ interface FormState {
   altText: string
   position: Position
   showCaption: boolean
+  /** Optional click-through target — see `../link/link-target-state.ts`. */
+  target: LinkTargetState
 }
 
-function emptyState(): FormState {
+/**
+ * Unlike a link node, an inline image is perfectly valid with no click
+ * target, so the shared sub-form runs with `allowNone` and `toLinkAttributes`
+ * is allowed to return undefined.
+ */
+const LINK_TARGET_OPTIONS = { allowNone: true } as const
+
+function emptyState(linkable: MultiCollectionDefinition[]): FormState {
   return {
     documentRelation: null,
     altText: '',
     position: 'full',
     showCaption: false,
+    target: fromLinkAttributes(undefined, linkable, LINK_TARGET_OPTIONS),
   }
 }
 
-function fromInlineImageData(data: InlineImageData | undefined): FormState {
-  if (!data) return emptyState()
+function fromInlineImageData(
+  data: InlineImageData | undefined,
+  linkable: MultiCollectionDefinition[]
+): FormState {
+  if (!data) return emptyState(linkable)
   return {
     documentRelation: data.documentRelation ?? null,
     altText: data.altText ?? '',
     position: data.position ?? 'full',
     showCaption: data.showCaption ?? false,
+    target: fromLinkAttributes(data.link, linkable, LINK_TARGET_OPTIONS),
   }
 }
 
@@ -96,13 +118,29 @@ export const InlineImageModal: React.FC<InlineImageModalProps> = ({
   const [pickerOpen, setPickerOpen] = useState(false)
   const [altError, setAltError] = useState<string | null>(null)
   const [imageError, setImageError] = useState<string | null>(null)
+  const [linkError, setLinkError] = useState<string | null>(null)
+  // Which tab is showing. Validation can move this: an error on a hidden
+  // panel would otherwise be invisible, and the user would just see Save
+  // do nothing.
+  const [activeTab, setActiveTab] = useState<'image' | 'link'>('image')
+
+  const linkable = useMemo<MultiCollectionDefinition[]>(
+    () =>
+      getAdminConfig().collections.filter(
+        (collection): collection is MultiCollectionDefinition =>
+          !isSingleton(collection) && collection.linksInEditor === true
+      ),
+    []
+  )
 
   const [state, setState] = useModalFormState<FormState>(
     isOpen,
-    () => fromInlineImageData(dataFromProps),
+    () => fromInlineImageData(dataFromProps, linkable),
     () => {
       setAltError(null)
       setImageError(null)
+      setLinkError(null)
+      setActiveTab('image')
     }
   )
 
@@ -175,10 +213,18 @@ export const InlineImageModal: React.FC<InlineImageModalProps> = ({
   const handleSave = () => {
     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 (linkProblem != null) {
+      setLinkError(linkProblem)
+      setActiveTab('link')
       return
     }
 
@@ -196,6 +242,9 @@ export const InlineImageModal: React.FC<InlineImageModalProps> = ({
       width: preferred?.width,
       height: preferred?.height,
       showCaption: state.showCaption,
+      // Always present, so `InlineImageNode.update()` sees the key and can
+      // CLEAR an existing link when the editor chooses "No link".
+      link: toLinkAttributes(state.target),
     }
     onSubmit(data)
     onClose()
@@ -214,91 +263,135 @@ export const InlineImageModal: React.FC<InlineImageModalProps> = ({
             </IconButton>
           </Modal.Header>
           <Modal.Content>
-            <div className="flex flex-col gap-4">
-              <div className="flex flex-col gap-2">
-                <span className="text-sm font-medium">Image</span>
-                <div className="inline-image-modal-picker">
-                  {pickedThumbUrl ? (
-                    <img
-                      src={pickedThumbUrl}
-                      alt={pickedTitle ?? ''}
-                      className="inline-image-modal-thumb"
+            {/*
+              Two tabs rather than one long column. The link sub-form adds a
+              collection select, a picker row and a checkbox, which together
+              pushed the modal past the viewport on shorter screens. Tabs keep
+              the dialog a fixed, predictable height.
+
+              `Tabs.Content` keeps both panels mounted, so switching away and
+              back does not discard a half-filled form — and `handleSave`
+              switches `activeTab` to whichever panel holds a validation
+              error, so Save never appears to do nothing.
+            */}
+            <Tabs
+              className="inline-image-modal-tabs"
+              value={activeTab}
+              onValueChange={(value) => setActiveTab(value as 'image' | 'link')}
+            >
+              <Tabs.List className="mb-4">
+                <Tabs.Trigger value="image">Image</Tabs.Trigger>
+                <Tabs.Trigger value="link">Link</Tabs.Trigger>
+              </Tabs.List>
+
+              <Tabs.Content value="image">
+                <div className="flex flex-col gap-4">
+                  <div className="flex flex-col gap-2">
+                    <span className="text-sm font-medium">Image</span>
+                    <div className="inline-image-modal-picker">
+                      {pickedThumbUrl ? (
+                        <img
+                          src={pickedThumbUrl}
+                          alt={pickedTitle ?? ''}
+                          className="inline-image-modal-thumb"
+                        />
+                      ) : (
+                        <div className="inline-image-modal-thumb-placeholder">—</div>
+                      )}
+                      <div className="inline-image-modal-picker-details">
+                        {pickedTitle && (
+                          <span className="inline-image-modal-title">{pickedTitle}</span>
+                        )}
+                        <Button
+                          size="sm"
+                          className="inline-image-modal-change-btn"
+                          variant="outlined"
+                          intent="noeffect"
+                          type="button"
+                          onClick={() => setPickerOpen(true)}
+                        >
+                          {state.documentRelation
+                            ? 'Change image…'
+                            : `Pick ${targetDef?.labels.singular ?? 'image'}…`}
+                        </Button>
+                      </div>
+                    </div>
+                    {imageError && <ErrorText id="image-error" text={imageError} />}
+                  </div>
+
+                  <Input
+                    id="inline-image-alt"
+                    name="altText"
+                    label="Alt text"
+                    required
+                    placeholder="Describe the image for screen readers"
+                    value={state.altText}
+                    error={altError != null}
+                    errorText={altError ?? undefined}
+                    onChange={(e) => {
+                      setAltError(null)
+                      setState((s) => ({ ...s, altText: e.target.value }))
+                    }}
+                  />
+
+                  <div className="flex flex-col gap-2 mb-3">
+                    <Label
+                      htmlFor="inline-image-position"
+                      id="inline-image-position-label"
+                      className="text-sm font-medium"
+                      label="Position"
                     />
-                  ) : (
-                    <div className="inline-image-modal-thumb-placeholder">—</div>
-                  )}
-                  <div className="inline-image-modal-picker-details">
-                    {pickedTitle && <span className="inline-image-modal-title">{pickedTitle}</span>}
-                    <Button
-                      size="sm"
-                      className="inline-image-modal-change-btn"
-                      variant="outlined"
-                      intent="noeffect"
-                      type="button"
-                      onClick={() => setPickerOpen(true)}
+                    <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 as Position }))
+                      }
                     >
-                      {state.documentRelation
-                        ? 'Change image…'
-                        : `Pick ${targetDef?.labels.singular ?? 'image'}…`}
-                    </Button>
+                      {positionOptions.map((opt) => (
+                        <RadioGroupItem
+                          key={String(opt.value)}
+                          id={`inline-image-position-${opt.value}`}
+                          value={String(opt.value)}
+                          label={opt.label}
+                        />
+                      ))}
+                    </RadioGroup>
                   </div>
+
+                  <Checkbox
+                    id="inline-image-caption"
+                    name="showCaption"
+                    label="Show caption"
+                    checked={state.showCaption}
+                    onCheckedChange={(checked) =>
+                      setState((s) => ({ ...s, showCaption: checked === true }))
+                    }
+                  />
                 </div>
-                {imageError && <ErrorText id="image-error" text={imageError} />}
-              </div>
-
-              <Input
-                id="inline-image-alt"
-                name="altText"
-                label="Alt text"
-                required
-                placeholder="Describe the image for screen readers"
-                value={state.altText}
-                error={altError != null}
-                errorText={altError ?? undefined}
-                onChange={(e) => {
-                  setAltError(null)
-                  setState((s) => ({ ...s, altText: e.target.value }))
-                }}
-              />
-
-              <div className="flex flex-col gap-2 mb-3">
-                <Label
-                  htmlFor="inline-image-position"
-                  id="inline-image-position-label"
-                  className="text-sm font-medium"
-                  label="Position"
+              </Tabs.Content>
+
+              <Tabs.Content value="link" className="inline-image-modal-link-panel">
+                <p className="mt-0 mb-3 text-sm text-accent-400">
+                  Give the image a click target. Leave this as “No link” for a plain image.
+                </p>
+                <LinkTargetFields
+                  idPrefix="inline-image-link"
+                  state={state.target}
+                  onChange={(target) => {
+                    setLinkError(null)
+                    setState((s) => ({ ...s, target }))
+                  }}
+                  linkable={linkable}
+                  allowNone
+                  error={linkError}
+                  legend="Link to"
                 />
-                <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 as Position }))
-                  }
-                >
-                  {positionOptions.map((opt) => (
-                    <RadioGroupItem
-                      key={String(opt.value)}
-                      id={`inline-image-position-${opt.value}`}
-                      value={String(opt.value)}
-                      label={opt.label}
-                    />
-                  ))}
-                </RadioGroup>
-              </div>
-
-              <Checkbox
-                id="inline-image-caption"
-                name="showCaption"
-                label="Show caption"
-                checked={state.showCaption}
-                onCheckedChange={(checked) =>
-                  setState((s) => ({ ...s, showCaption: checked === true }))
-                }
-              />
-            </div>
+              </Tabs.Content>
+            </Tabs>
           </Modal.Content>
           <Modal.Actions className="flex gap-3">
             <Button

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

@@ -11,6 +11,22 @@
   cursor: default;
 }
 
+/*
+ * A linked image gets the pointer cursor, which is honest because
+ * cmd/ctrl-click opens the target (see the CLICK_COMMAND handler in
+ * inline-image-node-component.tsx). A plain click still selects the node,
+ * so the hover hint is paired with a real action rather than promising
+ * navigation the editor never performs.
+ */
+.LexicalEditor__inline-image.has-link img {
+  cursor: pointer;
+}
+
+/* Selection and dragging outrank the link hint. */
+.LexicalEditor__inline-image.has-link img.focused.draggable {
+  cursor: grab;
+}
+
 .LexicalEditor__inline-image img.focused {
   outline: 2px solid rgb(60, 132, 244);
   /* user-select: none; */
@@ -69,6 +85,34 @@
   background-color: rgba(60, 132, 244, 0.5);
 }
 
+.LexicalEditor__inline-image .image-link-badge {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  max-width: calc(100% - 90px);
+  padding: 1px 6px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 5px;
+  background-color: rgba(0, 0, 0, 0.5);
+  font-size: 0.8rem;
+  color: #fff;
+  cursor: pointer;
+  user-select: none;
+}
+
+.LexicalEditor__inline-image .image-link-badge:hover {
+  background-color: rgba(60, 132, 244, 0.5);
+}
+
+.LexicalEditor__inline-image .image-link-badge__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .LexicalEditor__inline-image .InlineImageNode__caption_container {
   display: block;
   position: relative;

package/src/field/extensions/inline-image/inline-image-node-component.tsx

@@ -43,9 +43,11 @@ import PlaceholderInline from '../../ui/placeholder-inline'
 import { FloatingTextFormatToolbarPlugin } from '../floating-text-format'
 import { FloatingLinkEditorPlugin } from '../link/floating-link-editor'
 import { LinkPlugin } from '../link/link-extension'
+import { resolveLinkHref } from '../link/link-href'
 import { OPEN_INLINE_IMAGE_MODAL_COMMAND } from './inline-image-extension'
 import { $isInlineImageNode } from './inline-image-node'
 import type { DocumentRelation } from '../../nodes/document-relation'
+import type { LinkAttributes } from '../link'
 import type { Position } from './node-types'
 
 import './inline-image-node-component.css'
@@ -116,6 +118,7 @@ export default function InlineImageComponent({
   height,
   showCaption,
   caption,
+  link,
   nodeKey,
 }: {
   relation: DocumentRelation
@@ -126,6 +129,7 @@ export default function InlineImageComponent({
   width?: number | string
   showCaption: boolean
   caption: LexicalEditor
+  link?: LinkAttributes
   nodeKey: NodeKey
 }): React.JSX.Element {
   const { targetDocumentId: id, targetCollectionPath: collection } = relation
@@ -141,6 +145,12 @@ export default function InlineImageComponent({
 
   const activeEditorRef = useRef<LexicalEditor | null>(null)
 
+  // Held in a ref so the CLICK_COMMAND registration (which must not
+  // re-register on every link change) always reads the current target.
+  const linkHref = resolveLinkHref(link)
+  const linkHrefRef = useRef<string | null>(linkHref)
+  linkHrefRef.current = linkHref
+
   const onDelete = useCallback(
     (payload: KeyboardEvent) => {
       if (isSelected && $isNodeSelection($getSelection())) {
@@ -226,6 +236,17 @@ export default function InlineImageComponent({
         (payload) => {
           const event = payload
           if (event.target === imageRef.current) {
+            // Cmd/ctrl-click opens the click target, matching the
+            // convention of every other editor that shows a pointer
+            // cursor over linked content. Without this the `has-link`
+            // cursor would promise something a plain click never does —
+            // a plain click must keep selecting the node.
+            const href = linkHrefRef.current
+            if (href != null && (event.metaKey || event.ctrlKey)) {
+              event.preventDefault()
+              window.open(href, '_blank', 'noopener,noreferrer')
+              return true
+            }
             if (event.shiftKey) {
               setSelected(!isSelected)
             } else {
@@ -268,6 +289,22 @@ export default function InlineImageComponent({
 
   // Open the plugin-hosted modal in edit mode for this node. The plugin
   // reads the current attributes via `nodeKey` and pre-fills the form.
+  // Short, human-readable description of where the image points. Falls
+  // back to a plain warning when the target is gone, which mirrors what
+  // the public renderer does (it drops the anchor entirely).
+  const linkBadgeLabel = ((): string => {
+    if (link == null) return ''
+    if (link.linkType === 'internal') {
+      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 = (): void => {
     editor.dispatchCommand(OPEN_INLINE_IMAGE_MODAL_COMMAND, { nodeKey })
   }
@@ -292,6 +329,21 @@ export default function InlineImageComponent({
         >
           Edit
         </button>
+        {link != null && (
+          <button
+            type="button"
+            className="image-link-badge"
+            title={
+              linkHref != null
+                ? `Links to ${linkHref} — ⌘/Ctrl-click the image to open`
+                : 'Link target could not be resolved'
+            }
+            onClick={handleToggleModal}
+          >
+            <span aria-hidden="true">🔗</span>
+            <span className="image-link-badge__label">{linkBadgeLabel}</span>
+          </button>
+        )}
         <LazyImage
           id={id}
           collection={collection}