@byline/richtext-lexical 6.3.0 → 6.5.0

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "6.3.0",
+  "version": "6.5.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -62,39 +62,40 @@
     }
   },
   "dependencies": {
-    "@lexical/code": "0.50.0",
-    "@lexical/extension": "0.50.0",
-    "@lexical/headless": "0.50.0",
-    "@lexical/link": "0.50.0",
-    "@lexical/list": "0.50.0",
-    "@lexical/mark": "0.50.0",
-    "@lexical/markdown": "0.50.0",
-    "@lexical/overflow": "0.50.0",
-    "@lexical/react": "0.50.0",
-    "@lexical/rich-text": "0.50.0",
-    "@lexical/selection": "0.50.0",
-    "@lexical/table": "0.50.0",
-    "@lexical/utils": "0.50.0",
+    "@lexical/code": "0.51.0",
+    "@lexical/code-prism": "0.51.0",
+    "@lexical/extension": "0.51.0",
+    "@lexical/headless": "0.51.0",
+    "@lexical/link": "0.51.0",
+    "@lexical/list": "0.51.0",
+    "@lexical/mark": "0.51.0",
+    "@lexical/markdown": "0.51.0",
+    "@lexical/overflow": "0.51.0",
+    "@lexical/react": "0.51.0",
+    "@lexical/rich-text": "0.51.0",
+    "@lexical/selection": "0.51.0",
+    "@lexical/table": "0.51.0",
+    "@lexical/utils": "0.51.0",
     "clsx": "^2.1.1",
-    "lexical": "0.50.0",
+    "lexical": "0.51.0",
     "react-error-boundary": "^6.1.5",
-    "@byline/ui": "6.3.0",
-    "@byline/admin": "6.3.0",
-    "@byline/client": "6.3.0",
-    "@byline/core": "6.3.0",
-    "@byline/i18n": "6.3.0"
+    "@byline/admin": "6.5.0",
+    "@byline/core": "6.5.0",
+    "@byline/i18n": "6.5.0",
+    "@byline/client": "6.5.0",
+    "@byline/ui": "6.5.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.5.13",
-    "@lexical/clipboard": "0.50.0",
-    "@lexical/html": "0.50.0",
+    "@biomejs/biome": "2.5.14",
+    "@lexical/clipboard": "0.51.0",
+    "@lexical/html": "0.51.0",
     "@rsbuild/plugin-react": "^2.1.0",
-    "@rslib/core": "^1.0.0",
-    "@types/node": "^26.5.1",
+    "@rslib/core": "^1.0.1",
+    "@types/node": "^26.6.2",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "@vitejs/plugin-react": "^6.1.1",
@@ -104,7 +105,7 @@
     "typescript": "^7.0.2",
     "typescript-plugin-css-modules": "^5.2.0",
     "vite": "^8.3.0",
-    "vitest": "^5.0.0"
+    "vitest": "^5.0.1"
   },
   "publishConfig": {
     "access": "public",

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;