@byline/richtext-lexical 0.9.3

package/src/field/plugins/inline-image-plugin/inline-image-modal.tsx

@@ -0,0 +1,314 @@
+'use client'
+
+/**
+ * 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
+ */
+
+import type * as React from 'react'
+import { useMemo, useState } from 'react'
+
+import type { CollectionDefinition, StoredFileValue } from '@byline/core'
+import { getCollectionDefinition } from '@byline/core'
+import { RelationPicker } from '@byline/ui'
+import {
+  Button,
+  Checkbox,
+  CloseIcon,
+  ErrorText,
+  IconButton,
+  Input,
+  Label,
+  Modal,
+  RadioGroup,
+  RadioGroupItem,
+} from '@infonomic/uikit/react'
+
+import { useEditorConfig } from '../../config/editor-config-context'
+import { useModalFormState } from '../../shared/useModalFormState'
+import { isAltTextValid, positionOptions } from './fields'
+import { deriveImageSizes, getPreferredSize } from './utils'
+import type { DocumentRelation } from '../../nodes/document-relation'
+import type { Position } from '../../nodes/inline-image-node/types'
+import type { InlineImageData, InlineImageModalProps } from './types'
+
+interface FormState {
+  documentRelation: DocumentRelation | null
+  altText: string
+  position: Position
+  showCaption: boolean
+}
+
+function emptyState(): FormState {
+  return {
+    documentRelation: null,
+    altText: '',
+    position: 'full',
+    showCaption: false,
+  }
+}
+
+function fromInlineImageData(data: InlineImageData | undefined): FormState {
+  if (!data) return emptyState()
+  return {
+    documentRelation: data.documentRelation ?? null,
+    altText: data.altText ?? '',
+    position: data.position ?? 'full',
+    showCaption: data.showCaption ?? false,
+  }
+}
+
+export const InlineImageModal: React.FC<InlineImageModalProps> = ({
+  isOpen,
+  collection,
+  data: dataFromProps,
+  onSubmit,
+  onClose,
+}) => {
+  const [pickerOpen, setPickerOpen] = useState(false)
+  const [altError, setAltError] = useState<string | null>(null)
+  const [imageError, setImageError] = useState<string | null>(null)
+  const { config: editorSettings } = useEditorConfig()
+
+  const [state, setState] = useModalFormState<FormState>(
+    isOpen,
+    () => fromInlineImageData(dataFromProps),
+    () => {
+      setAltError(null)
+      setImageError(null)
+    }
+  )
+
+  const targetDef: CollectionDefinition | null = getCollectionDefinition(collection)
+
+  // The image StoredFileValue lives inside the picked media doc's denormalised
+  // `documentRelation.document.image` field — see `handlePickerSelect` below.
+  const pickedImage: StoredFileValue | null = useMemo(() => {
+    const img = state.documentRelation?.document?.image as StoredFileValue | undefined
+    return img ?? null
+  }, [state.documentRelation])
+
+  const pickedThumbUrl: string | null = useMemo(() => {
+    if (!pickedImage?.storageUrl) return null
+    if (pickedImage.mimeType === 'image/svg+xml') return pickedImage.storageUrl
+    if (pickedImage.thumbnailGenerated) {
+      return pickedImage.storageUrl.replace(/\.[^.]+$/, '-thumbnail.avif')
+    }
+    return pickedImage.storageUrl
+  }, [pickedImage])
+
+  const pickedTitle: string | null = useMemo(() => {
+    const title = state.documentRelation?.document?.title
+    return typeof title === 'string' && title.length > 0 ? title : null
+  }, [state.documentRelation])
+
+  const handlePickerSelect = (selection: {
+    targetDocumentId: string
+    targetCollectionId: string
+    record?: Record<string, any>
+  }) => {
+    setPickerOpen(false)
+    const fields = selection.record?.fields ?? {}
+    const image = fields.image as StoredFileValue | undefined
+    const title = typeof fields.title === 'string' ? fields.title : undefined
+    const altTextFromMedia = typeof fields.altText === 'string' ? fields.altText : undefined
+    const sizes = image ? deriveImageSizes(image) : []
+
+    setState((s) => {
+      const document: Record<string, any> = {}
+      if (title) document.title = title
+      if (altTextFromMedia) document.altText = altTextFromMedia
+      if (image) document.image = image
+      if (sizes.length > 0) document.sizes = sizes
+
+      return {
+        ...s,
+        documentRelation: {
+          targetDocumentId: selection.targetDocumentId,
+          targetCollectionId: selection.targetCollectionId,
+          targetCollectionPath: collection,
+          document: Object.keys(document).length > 0 ? document : undefined,
+        },
+        // Pre-fill alt-text from the media's `altText` field on first pick if
+        // the form's alt-text is still empty. Editorial wins over the source
+        // record once the user starts typing.
+        altText: s.altText.length > 0 ? s.altText : (altTextFromMedia ?? ''),
+      }
+    })
+    setImageError(null)
+  }
+
+  const handleSave = () => {
+    if (!state.documentRelation || !pickedImage) {
+      setImageError('Pick an image')
+      return
+    }
+    if (!isAltTextValid(state.altText)) {
+      setAltError('Alt text is required')
+      return
+    }
+
+    const preferred = getPreferredSize(state.position, pickedImage)
+    // The form-state `documentRelation` always carries `{ title, altText,
+    // image, sizes }` embedded at picker-select time so the modal preview
+    // can render. When `embedRelationsOnSave: false`, strip that envelope
+    // at save so the persisted node only carries the relation primary keys.
+    // Top-level `src` / `width` / `height` / `altText` are kept regardless —
+    // Lexical needs them to render the inline image in the admin editor.
+    const persistedRelation = editorSettings.embedRelationsOnSave
+      ? state.documentRelation
+      : {
+        targetDocumentId: state.documentRelation.targetDocumentId,
+        targetCollectionId: state.documentRelation.targetCollectionId,
+        targetCollectionPath: state.documentRelation.targetCollectionPath,
+      }
+    const data: InlineImageData = {
+      documentRelation: persistedRelation,
+      src: preferred?.url ?? pickedImage.storageUrl ?? '',
+      altText: state.altText.trim(),
+      position: state.position,
+      width: preferred?.width,
+      height: preferred?.height,
+      showCaption: state.showCaption,
+    }
+    onSubmit(data)
+    onClose()
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <>
+      <Modal isOpen={isOpen} onDismiss={onClose} closeOnOverlayClick={false}>
+        <Modal.Container style={{ maxWidth: '520px', width: '100%' }}>
+          <Modal.Header className="flex items-center justify-between pt-4 mb-2">
+            <h3 className="m-0 text-xl">Inline image</h3>
+            <IconButton aria-label="Close" size="xs" onClick={onClose}>
+              <CloseIcon width="15px" height="15px" svgClassName="white-icon" />
+            </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="flex items-center gap-3">
+                  {pickedThumbUrl ? (
+                    <img
+                      src={pickedThumbUrl}
+                      alt={pickedTitle ?? ''}
+                      className="w-18 h-18 object-cover rounded border border-gray-700"
+                    />
+                  ) : (
+                    <div className="w-18 h-18 flex items-center justify-center bg-gray-800 rounded border border-gray-700 text-xs text-gray-500">
+                      —
+                    </div>
+                  )}
+                  <Button
+                    size="sm"
+                    className="min-w-[70px]"
+                    variant="outlined"
+                    intent="noeffect"
+                    type="button"
+                    onClick={() => setPickerOpen(true)}
+                  >
+                    {state.documentRelation
+                      ? 'Change image…'
+                      : `Pick ${targetDef?.labels.singular ?? 'image'}…`}
+                  </Button>
+                  {pickedTitle && (
+                    <span className="text-sm text-gray-200 truncate">{pickedTitle}</span>
+                  )}
+                </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"
+                />
+                <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>
+          </Modal.Content>
+          <Modal.Actions className="flex gap-3">
+            <Button
+              size="sm"
+              intent="noeffect"
+              type="button"
+              onClick={onClose}
+              className="min-w-[70px]"
+            >
+              Cancel
+            </Button>
+            <Button
+              size="sm"
+              intent="primary"
+              type="button"
+              onClick={handleSave}
+              className="min-w-[70px]"
+            >
+              Save
+            </Button>
+          </Modal.Actions>
+        </Modal.Container>
+      </Modal>
+
+      <RelationPicker
+        targetCollectionPath={collection}
+        targetDefinition={targetDef}
+        isOpen={pickerOpen}
+        onSelect={handlePickerSelect}
+        onDismiss={() => setPickerOpen(false)}
+      />
+    </>
+  )
+}

package/src/field/plugins/inline-image-plugin/populate.ts

@@ -0,0 +1,48 @@
+/**
+ * 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
+ */
+
+/**
+ * Server-side populate visitor for the inline-image plugin. Pure /
+ * framework-agnostic — imported only from the package's `server` entry.
+ *
+ * Refreshes `node.document` with `{ title, altText, image, sizes }` from
+ * the source media document. Does not touch the inline-image node's
+ * top-level `src` / `width` / `height` / `altText` — those are Lexical
+ * render state and survive untouched, providing a usable fallback when
+ * populate hasn't run.
+ */
+
+import type { StoredFileValue } from '@byline/core'
+
+import { deriveImageSizes } from './utils'
+import type { LexicalNodeLike, LexicalNodeVisitor } from '../../lexical-populate-shared'
+
+export const inlineImageVisitor: LexicalNodeVisitor = {
+  match(node: LexicalNodeLike) {
+    if (node.type !== 'inline-image') return null
+    const collectionPath = node.targetCollectionPath
+    const documentId = node.targetDocumentId
+    if (!collectionPath || !documentId) return null
+    return {
+      node,
+      collectionPath,
+      documentId,
+      apply(target: Record<string, any>) {
+        const targetFields = (target.fields ?? {}) as Record<string, any>
+        const image = targetFields.image as StoredFileValue | undefined
+        const sizes = image ? deriveImageSizes(image) : []
+        const next: Record<string, any> = { ...(node.document ?? {}) }
+        if (typeof targetFields.title === 'string') next.title = targetFields.title
+        if (typeof targetFields.altText === 'string') next.altText = targetFields.altText
+        if (image != null) next.image = image
+        if (sizes.length > 0) next.sizes = sizes
+        node.document = next
+      },
+    }
+  },
+}

package/src/field/plugins/inline-image-plugin/types.ts

@@ -0,0 +1,39 @@
+/**
+ * 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
+ */
+
+import type { DocumentRelation } from '../../nodes/document-relation'
+import type { Position } from '../../nodes/inline-image-node/types'
+
+/**
+ * The form-shape carried into / out of the inline image modal. Mirrors
+ * `InlineImageAttributes` minus the Lexical-managed bits (`key`, `caption:
+ * LexicalEditor`) — those don't belong in form state. The document-reference
+ * envelope is carried as an optional nested `DocumentRelation` here (rather
+ * than spread flat) because the modal needs a single null/non-null state to
+ * represent "user hasn't picked a document yet".
+ */
+export interface InlineImageData {
+  documentRelation: DocumentRelation | null
+  src: string
+  altText?: string
+  position?: Position
+  width?: number | string
+  height?: number | string
+  showCaption?: boolean
+}
+
+export interface InlineImageModalProps {
+  /** Modal visibility — driven by the plugin's open/close commands. */
+  isOpen: boolean
+  /** The collection path the picker should target — typically `'media'`. */
+  collection: string
+  /** Pre-filled data when the modal opens in edit mode; undefined for insert. */
+  data?: InlineImageData
+  onSubmit: (data: InlineImageData) => void
+  onClose: () => void
+}

package/src/field/plugins/inline-image-plugin/utils.ts

@@ -0,0 +1,113 @@
+/**
+ * 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
+ */
+
+import type { StoredFileValue } from '@byline/core'
+
+import type { Position } from '../../nodes/inline-image-node/types'
+
+/**
+ * Maps an editor `position` choice to a media-collection variant name.
+ * Floated images (`left`/`right`) sit in narrow columns alongside text, so
+ * they get the smaller `card` variant. `full` images use the main column,
+ * `wide` ones bleed beyond it. Sizes refer to the variants declared on the
+ * `media` collection in `apps/webapp/byline/collections/media/schema.ts`.
+ */
+function variantFor(position: Position): string {
+  switch (position) {
+    case 'left':
+    case 'right':
+      return 'card'
+    case 'wide':
+      return 'desktop'
+    default:
+      // 'full' | 'default' | undefined
+      return 'tablet'
+  }
+}
+
+export interface PreferredSize {
+  url: string
+  width?: number
+  height?: number
+}
+
+/**
+ * Choose a sensible image URL + dimensions for the editor preview given the
+ * picked media's `image` field and the user's chosen position. Reads
+ * directly from `image.variants` (persisted on the file value at upload
+ * time). SVGs return the original `storageUrl`; missing/empty variants
+ * fall back to the original.
+ */
+export function getPreferredSize(
+  position: Position,
+  image: StoredFileValue | null | undefined
+): PreferredSize | null {
+  if (image?.storageUrl == null) return null
+
+  if (image.mimeType === 'image/svg+xml') {
+    return {
+      url: image.storageUrl,
+      width: image.imageWidth,
+      height: image.imageHeight,
+    }
+  }
+
+  const wanted = variantFor(position)
+  const match = image.variants?.find((v) => v.name === wanted)
+  if (match?.storageUrl) {
+    return {
+      url: match.storageUrl,
+      width: match.width ?? image.imageWidth,
+      height: match.height ?? image.imageHeight,
+    }
+  }
+
+  return {
+    url: image.storageUrl,
+    width: image.imageWidth,
+    height: image.imageHeight,
+  }
+}
+
+/**
+ * One denormalised image variant — the renderer-facing shape used by the
+ * inline-image node and richtext after-read hook. Mirrors the persisted
+ * `PersistedVariant` with `storageUrl` renamed to `url` for renderer
+ * ergonomics.
+ */
+export interface DerivedImageSize {
+  name: string
+  url: string
+  width?: number
+  height?: number
+  format: string
+}
+
+/**
+ * Map a `StoredFileValue.variants` array into the renderer shape. SVGs and
+ * variant-less images return `[]` so renderers fall back to
+ * `image.storageUrl`.
+ */
+export function deriveImageSizes(image: StoredFileValue | null | undefined): DerivedImageSize[] {
+  if (!image?.storageUrl) return []
+  if (image.mimeType === 'image/svg+xml') return []
+  if (!image.variants || image.variants.length === 0) return []
+
+  const out: DerivedImageSize[] = []
+  for (const variant of image.variants) {
+    if (!variant.storageUrl) continue
+    out.push({
+      name: variant.name,
+      url: variant.storageUrl,
+      width: variant.width,
+      height: variant.height,
+      format: variant.format ?? 'avif',
+    })
+  }
+  return out
+}

package/src/field/plugins/layout-plugin/insert-layout-modal.css

@@ -0,0 +1,19 @@
+.insert-layout-modal-container {
+  min-width: 340px;
+  max-width: 600px;
+}
+
+.insert-layout-modal-select {
+  margin: 2rem 0 0;
+}
+
+@media screen and (min-width: 640px) {
+  .insert-layout-modal-select {
+    margin: 1rem 0 0.5rem;
+    width: 100%;
+  }
+
+  .insert-layout-modal-actions {
+    margin: 0;
+  }
+}

package/src/field/plugins/layout-plugin/insert-layout-modal.tsx

@@ -0,0 +1,100 @@
+'use client'
+
+/**
+ * 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
+ */
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type * as React from 'react'
+import { useState } from 'react'
+
+import {
+  Button,
+  CloseIcon,
+  IconButton,
+  Modal,
+  Select,
+  type SelectValue,
+} from '@infonomic/uikit/react'
+
+const layouts: SelectValue[] = [
+  { label: '2 columns (equal width)', value: '1fr 1fr' },
+  { label: '2 columns (25% - 75%)', value: '1fr 3fr' },
+  { label: '2 columns (75% - 25%)', value: '3fr 1fr' },
+  { label: '3 columns (equal width)', value: '1fr 1fr 1fr' },
+  { label: '3 columns (25% - 50% - 25%)', value: '1fr 2fr 1fr' },
+  { label: '4 columns (equal width)', value: '1fr 1fr 1fr 1fr' },
+]
+
+import './insert-layout-modal.css'
+
+export function InsertLayoutModal({
+  open = false,
+  onClose,
+  onSubmit,
+}: {
+  open: boolean
+  onClose: () => void
+  onSubmit: (layout: string) => void
+}): React.JSX.Element {
+  const [layout, setLayout] = useState(layouts[0].value)
+
+  const handleOnCancel = (): void => {
+    if (onClose != null && typeof onClose === 'function') {
+      onClose()
+    }
+  }
+
+  const handleOnSubmit = (): void => {
+    if (onSubmit != null && typeof onSubmit === 'function') {
+      onSubmit(layout)
+    }
+  }
+
+  return (
+    <Modal isOpen={open} onDismiss={handleOnCancel} closeOnOverlayClick={false}>
+      <Modal.Container className="insert-layout-modal-container">
+        <Modal.Header>
+          <h3>Insert Layout</h3>
+          <IconButton arial-label="Close" size="sm" onClick={handleOnCancel}>
+            <CloseIcon width="16px" height="16px" svgClassName="white-icon" />
+          </IconButton>
+        </Modal.Header>
+        <Modal.Content>
+          <Select<string>
+            containerClassName="insert-layout-modal-select"
+            items={layouts}
+            onValueChange={(value) => {
+              if (value != null) setLayout(value)
+            }}
+            placeholder="Select a layout"
+          />
+        </Modal.Content>
+        <Modal.Actions className="insert-layout-modal-actions">
+          <Button size="sm" intent="noeffect" onClick={handleOnCancel} data-autofocus>
+            Cancel
+          </Button>
+          <Button
+            size="sm"
+            intent="primary"
+            onClick={handleOnSubmit}
+            data-test-id="table-modal-submit"
+          >
+            Insert
+          </Button>
+        </Modal.Actions>
+      </Modal.Container>
+    </Modal>
+  )
+}