@byline/richtext-lexical 0.9.3

package/src/field/nodes/admonition-node/types.ts

@@ -0,0 +1,33 @@
+/**
+ * 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 {
+  LexicalEditor,
+  NodeKey,
+  SerializedEditor,
+  SerializedLexicalNode,
+  Spread,
+} from 'lexical'
+
+export type AdmonitionType = 'note' | 'tip' | 'warning' | 'danger'
+
+export interface AdmonitionAttributes {
+  admonitionType: AdmonitionType
+  title: string
+  content?: LexicalEditor
+  key?: NodeKey
+}
+
+export type SerializedAdmonitionNode = Spread<
+  {
+    admonitionType: AdmonitionType
+    title: string
+    content: SerializedEditor
+  },
+  SerializedLexicalNode
+>

package/src/field/nodes/document-relation.ts

@@ -0,0 +1,33 @@
+/**
+ * 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
+ */
+
+/**
+ * Stored shape for any Lexical node that references a Byline document
+ * (currently `LinkNode` for internal links and `InlineImageNode` for media
+ * picks). Mirrors the relation-field envelope (`targetDocumentId` /
+ * `targetCollectionId`) and adds the human-readable collection `path` plus
+ * an optional `document` bag for denormalised fields populated by the picker
+ * at write time or by an `afterRead` collection hook at read time.
+ *
+ * The two ID fields are the source of truth; `targetCollectionPath` is
+ * carried alongside because the editor has no field-definition side-channel
+ * (unlike a `relation` field) to look up the path from the id at render time.
+ * `document` is best-effort — renderers must tolerate it being absent.
+ */
+export interface DocumentRelation {
+  targetDocumentId: string
+  targetCollectionId: string
+  targetCollectionPath: string
+  /**
+   * Denormalised fields from the target document — typically `path`, `title`,
+   * and any other fields a renderer needs without a round-trip. Populated by
+   * the picker at write time and (eventually) refreshed by an `afterRead`
+   * hook at read time. Treat as advisory; never the source of truth.
+   */
+  document?: Record<string, any>
+}

package/src/field/nodes/index.ts

@@ -0,0 +1,47 @@
+/**
+ * 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 { CodeHighlightNode, CodeNode } from '@lexical/code'
+import { ListItemNode, ListNode } from '@lexical/list'
+import { MarkNode } from '@lexical/mark'
+import { OverflowNode } from '@lexical/overflow'
+import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode'
+import { HeadingNode, QuoteNode } from '@lexical/rich-text'
+import { TableCellNode, TableNode, TableRowNode } from '@lexical/table'
+import type { Klass, LexicalNode } from 'lexical'
+
+import { AdmonitionNode } from './admonition-node/admonition-node'
+import { InlineImageNode } from './inline-image-node/inline-image-node'
+import { LayoutContainerNode } from './layout-container-node/layout-container-node'
+import { LayoutItemNode } from './layout-container-node/layout-item-node'
+import { AutoLinkNode, LinkNode } from './link-nodes'
+import { VimeoNode } from './vimeo-node'
+import { YouTubeNode } from './youtube-node'
+
+export const Nodes: Array<Klass<LexicalNode>> = [
+  HeadingNode,
+  ListNode,
+  ListItemNode,
+  QuoteNode,
+  CodeNode,
+  TableNode,
+  TableCellNode,
+  TableRowNode,
+  CodeHighlightNode,
+  AutoLinkNode,
+  LinkNode,
+  OverflowNode,
+  InlineImageNode,
+  HorizontalRuleNode,
+  MarkNode,
+  AdmonitionNode,
+  YouTubeNode,
+  VimeoNode,
+  LayoutContainerNode,
+  LayoutItemNode,
+]

package/src/field/nodes/inline-image-node/index.ts

@@ -0,0 +1,10 @@
+/**
+ * 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
+ */
+
+export * from './inline-image-node'
+export * from './types'

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

@@ -0,0 +1,205 @@
+.LexicalEditor__inline-image {
+  cursor: default;
+  display: inline-block;
+  position: relative;
+  z-index: 1;
+  /* user-select: none; */
+}
+
+.LexicalEditor__inline-image img {
+  max-width: 100%;
+  cursor: default;
+}
+
+.LexicalEditor__inline-image img.focused {
+  outline: 2px solid rgb(60, 132, 244);
+  /* user-select: none; */
+}
+
+.LexicalEditor__inline-image img.focused.draggable {
+  cursor: grab;
+}
+
+.LexicalEditor__inline-image img.focused.draggable:active {
+  cursor: grabbing;
+}
+
+.LexicalEditor__inline-image.position-full,
+.LexicalEditor__inline-image.position-default {
+  width: 100%;
+  margin: 1em 0 1em 0;
+}
+
+.LexicalEditor__inline-image.position-full img,
+.LexicalEditor__inline-image.position-default img {
+  width: 100%;
+}
+
+.LexicalEditor__inline-image.position-left {
+  float: left;
+  width: 50%;
+  margin: 0.75rem 1.5rem 0.45rem 0;
+}
+
+.LexicalEditor__inline-image.position-right {
+  float: right;
+  width: 50%;
+  /* The illusion of a 0 right margin looks too far right, so set right to 0.45rem */
+  margin: 0.75rem 0.45rem 0.45rem 1.5rem;
+}
+
+.LexicalEditor__inline-image .image-edit-button {
+  display: block;
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  padding: 1px 4px;
+  margin: 0 auto;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 5px;
+  background-color: rgba(0, 0, 0, 0.5);
+  min-width: 50px;
+  font-size: 0.95rem;
+  color: #fff;
+  cursor: pointer;
+  user-select: none;
+}
+
+.LexicalEditor__inline-image .image-edit-button:hover {
+  background-color: rgba(60, 132, 244, 0.5);
+}
+
+.LexicalEditor__inline-image .InlineImageNode__caption_container {
+  display: block;
+  position: relative;
+  font-size: 0.95rem;
+  background-color: #f4f4f4;
+  min-width: 100%;
+  color: #000;
+  overflow: hidden;
+}
+
+.LexicalEditor__inline-image .InlineImageNode__caption_container .tree-view-output {
+  margin: 0;
+  border-radius: 0;
+}
+
+.LexicalEditor__inline-image .image-caption-button:hover {
+  background-color: rgba(60, 132, 244, 0.5);
+}
+
+.LexicalEditor__inline-image .image-resizer {
+  display: block;
+  width: 7px;
+  height: 7px;
+  position: absolute;
+  background-color: rgb(60, 132, 244);
+  border: 1px solid #fff;
+}
+
+.LexicalEditor__inline-image .image-resizer.image-resizer-n {
+  top: -6px;
+  left: 48%;
+  cursor: n-resize;
+}
+
+.LexicalEditor__inline-image .image-resizer.image-resizer-ne {
+  top: -6px;
+  right: -6px;
+  cursor: ne-resize;
+}
+
+.LexicalEditor__inline-image .image-resizer.image-resizer-e {
+  bottom: 48%;
+  right: -6px;
+  cursor: e-resize;
+}
+
+.LexicalEditor__inline-image .image-resizer.image-resizer-se {
+  bottom: -2px;
+  right: -6px;
+  cursor: nwse-resize;
+}
+
+.LexicalEditor__inline-image .image-resizer.image-resizer-s {
+  bottom: -2px;
+  left: 48%;
+  cursor: s-resize;
+}
+
+.LexicalEditor__inline-image .image-resizer.image-resizer-sw {
+  bottom: -2px;
+  left: -6px;
+  cursor: sw-resize;
+}
+
+.LexicalEditor__inline-image .image-resizer.image-resizer-w {
+  bottom: 48%;
+  left: -6px;
+  cursor: w-resize;
+}
+
+.LexicalEditor__inline-image .image-resizer.image-resizer-nw {
+  top: -6px;
+  left: -6px;
+  cursor: nw-resize;
+}
+
+.InlineImageNode__container {
+  display: block;
+}
+
+.InlineImageNode__container.focused {
+  outline: 2px solid rgb(60, 132, 244);
+  /* user-select: none; */
+}
+
+.InlineImageNode__contentEditable {
+  min-height: 20px;
+  border: 0px;
+  resize: none;
+  cursor: text;
+  caret-color: rgb(5, 5, 5);
+  display: block;
+  position: relative;
+  tab-size: 1;
+  outline: 0px;
+  padding: 10px;
+  user-select: text;
+  font-size: 14px;
+  line-height: 1.4em;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.InlineImageNode__contentEditable p {
+  margin-bottom: 0.25em;
+}
+
+.InlineImageNode__placeholder {
+  font-size: 12px;
+  color: #888;
+  overflow: hidden;
+  position: absolute;
+  text-overflow: ellipsis;
+  top: 10px;
+  left: 10px;
+  right: unset;
+  user-select: none;
+  white-space: nowrap;
+  display: inline-block;
+  pointer-events: none;
+}
+
+.dark .InlineImageNode__contentEditable {
+  color: #eeeeee;
+  caret-color: auto;
+}
+
+.dark .LexicalEditor__inline-image .InlineImageNode__caption_container {
+  background-color: #222222;
+}
+
+.dark .InlineImageNode__placeholder {
+  color: #888;
+}

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

@@ -0,0 +1,342 @@
+// '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 { Suspense, useCallback, useEffect, useRef, useState } from 'react'
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary'
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'
+import { LexicalNestedComposer } from '@lexical/react/LexicalNestedComposer'
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin'
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
+import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection'
+import { mergeRegister } from '@lexical/utils'
+import cx from 'classnames'
+import type { BaseSelection, LexicalEditor, NodeKey, NodeSelection, RangeSelection } from 'lexical'
+import {
+  $getNodeByKey,
+  $getSelection,
+  $isNodeSelection,
+  $setSelection,
+  CLICK_COMMAND,
+  COMMAND_PRIORITY_LOW,
+  DRAGSTART_COMMAND,
+  KEY_BACKSPACE_COMMAND,
+  KEY_DELETE_COMMAND,
+  KEY_ENTER_COMMAND,
+  KEY_ESCAPE_COMMAND,
+  SELECTION_CHANGE_COMMAND,
+} from 'lexical'
+
+import ContentEditableInline from '../../content-editable-inline'
+import { useSharedHistoryContext } from '../../context/shared-history-context'
+import { useSharedOnChange } from '../../context/shared-on-change-context'
+import { FloatingTextFormatToolbarPlugin } from '../../plugins/floating-text-format-toolbar-plugin/index'
+import { OPEN_INLINE_IMAGE_MODAL_COMMAND } from '../../plugins/inline-image-plugin'
+import { LinkPlugin } from '../../plugins/link-plugin/link'
+import { FloatingLinkEditorPlugin } from '../../plugins/link-plugin/link/floating-link-editor'
+import PlaceholderInline from '../../ui/placeholder-inline'
+import { $isInlineImageNode } from './inline-image-node'
+import type { DocumentRelation } from '../document-relation'
+import type { Position } from './types'
+
+import './inline-image-node-component.css'
+
+const imageCache = new Set()
+
+async function useSuspenseImage(src: string): Promise<void> {
+  if (!imageCache.has(src)) {
+    await new Promise((resolve) => {
+      const img = new Image()
+      img.src = src
+      img.onload = () => {
+        imageCache.add(src)
+        resolve(null)
+      }
+    })
+  }
+}
+
+function LazyImage({
+  id,
+  collection,
+  src,
+  position,
+  altText,
+  className,
+  imageRef,
+  width,
+  height,
+}: {
+  id: string
+  collection: string
+  src: string
+  position: Position
+  altText?: string
+  className?: string
+  height?: number | string
+  width?: number | string
+  imageRef: { current: null | HTMLImageElement }
+}): React.JSX.Element {
+  void useSuspenseImage(src)
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      className={className}
+      src={src}
+      alt={altText}
+      ref={imageRef}
+      width={width}
+      height={height}
+      data-id={id}
+      data-collection={collection}
+      data-position={position}
+      style={{
+        display: 'block',
+      }}
+      draggable="false"
+    />
+  )
+}
+
+export default function InlineImageComponent({
+  relation,
+  src,
+  position,
+  altText,
+  width,
+  height,
+  showCaption,
+  caption,
+  nodeKey,
+}: {
+  relation: DocumentRelation
+  src: string
+  position: Position
+  altText?: string
+  height?: number | string
+  width?: number | string
+  showCaption: boolean
+  caption: LexicalEditor
+  nodeKey: NodeKey
+}): React.JSX.Element {
+  const { targetDocumentId: id, targetCollectionPath: collection } = relation
+  const [editor] = useLexicalComposerContext()
+  const { onChange } = useSharedOnChange()
+  const { historyState } = useSharedHistoryContext()
+  const imageRef = useRef<null | HTMLImageElement>(null)
+  const buttonRef = useRef<HTMLButtonElement | null>(null)
+  const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey)
+  const [selection, setSelection] = useState<RangeSelection | NodeSelection | BaseSelection | null>(
+    null
+  )
+
+  const activeEditorRef = useRef<LexicalEditor | null>(null)
+
+  const onDelete = useCallback(
+    (payload: KeyboardEvent) => {
+      if (isSelected && $isNodeSelection($getSelection())) {
+        const event: KeyboardEvent = payload
+        event.preventDefault()
+        const node = $getNodeByKey(nodeKey)
+        if ($isInlineImageNode(node)) {
+          node?.remove()
+        }
+        setSelected(false)
+      }
+      return false
+    },
+    [isSelected, nodeKey, setSelected]
+  )
+
+  const onEnter = useCallback(
+    (event: KeyboardEvent) => {
+      const latestSelection = $getSelection()
+      const buttonElem = buttonRef.current
+      if (
+        isSelected &&
+        $isNodeSelection(latestSelection) &&
+        latestSelection.getNodes().length === 1
+      ) {
+        if (showCaption) {
+          // Move focus into nested editor
+          $setSelection(null)
+          event.preventDefault()
+          caption.focus()
+          return true
+        } else if (buttonElem !== null && buttonElem !== document.activeElement) {
+          event.preventDefault()
+          buttonElem.focus()
+          return true
+        }
+      }
+      return false
+    },
+    [caption, isSelected, showCaption]
+  )
+
+  const onEscape = useCallback(
+    (event: KeyboardEvent) => {
+      if (activeEditorRef.current === caption || buttonRef.current === event.target) {
+        $setSelection(null)
+        editor.update(() => {
+          setSelected(true)
+          const parentRootElement = editor.getRootElement()
+          if (parentRootElement !== null) {
+            parentRootElement.focus()
+          }
+        })
+        return true
+      }
+      return false
+    },
+    [caption, editor, setSelected]
+  )
+
+  useEffect(() => {
+    let isMounted = true
+    const unregister = mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        if (isMounted) {
+          setSelection(editorState.read(() => $getSelection()))
+        }
+      }),
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        (_, activeEditor) => {
+          activeEditorRef.current = activeEditor
+          return false
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand<MouseEvent>(
+        CLICK_COMMAND,
+        (payload) => {
+          const event = payload
+          if (event.target === imageRef.current) {
+            if (event.shiftKey) {
+              setSelected(!isSelected)
+            } else {
+              clearSelection()
+              setSelected(true)
+            }
+            return true
+          }
+
+          return false
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        DRAGSTART_COMMAND,
+        (event) => {
+          if (event.target === imageRef.current) {
+            // TODO This is just a temporary workaround for FF to behave like other browsers.
+            // Ideally, this handles drag & drop too (and all browsers).
+            event.preventDefault()
+            return true
+          }
+          return false
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW),
+      editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW),
+      editor.registerCommand(KEY_ENTER_COMMAND, onEnter, COMMAND_PRIORITY_LOW),
+      editor.registerCommand(KEY_ESCAPE_COMMAND, onEscape, COMMAND_PRIORITY_LOW)
+    )
+    return () => {
+      isMounted = false
+      unregister()
+    }
+  }, [clearSelection, editor, isSelected, onDelete, onEnter, onEscape, setSelected])
+
+  const draggable = isSelected && $isNodeSelection(selection)
+  const isFocused = isSelected
+
+  // Open the plugin-hosted modal in edit mode for this node. The plugin
+  // reads the current attributes via `nodeKey` and pre-fills the form.
+  const handleToggleModal = (): void => {
+    editor.dispatchCommand(OPEN_INLINE_IMAGE_MODAL_COMMAND, { nodeKey })
+  }
+
+  const classNames = cx(
+    'InlineImageNode__container',
+    { focused: isFocused },
+    { draggable: $isNodeSelection(selection) }
+  )
+
+  // TODO: consider implementing a single-line custom editor with span and inline
+  // elements in order to keep caption html valid from within the parent paragraph
+  // https://github.com/facebook/lexical/discussions/3640
+  return (
+    <Suspense fallback={null}>
+      <span draggable={draggable} className={classNames}>
+        <button
+          type="button"
+          className="image-edit-button"
+          ref={buttonRef}
+          onClick={handleToggleModal}
+        >
+          Edit
+        </button>
+        <LazyImage
+          id={id}
+          collection={collection}
+          src={src}
+          position={position}
+          altText={altText}
+          imageRef={imageRef}
+          width={width}
+          height={height}
+        />
+        {showCaption && (
+          <span className="InlineImageNode__caption_container">
+            <LexicalNestedComposer initialEditor={caption}>
+              <OnChangePlugin
+                ignoreSelectionChange={true}
+                onChange={(_nestedEditorState, _nestedEditor, nestedTags) => {
+                  // Note: Shared 'onChange' context provider so that
+                  // caption change events can be registered with the parent
+                  // editor - in turn triggering the parent editor onChange
+                  // event, and therefore updating editorState and the field
+                  // value in Payload (Save Draft and Publish Changes will then
+                  // become 'enabled' from the caption as well as the parent
+                  // editor content.)
+
+                  // Parent editor state - not the LexicalNestedComposer in this case
+                  // although there are other ways that this could be used.
+                  const editorState = editor.getEditorState()
+                  if (onChange != null) onChange(editorState, editor, nestedTags)
+                }}
+              />
+              <LinkPlugin />
+              <FloatingLinkEditorPlugin />
+              <FloatingTextFormatToolbarPlugin />
+              <HistoryPlugin externalHistoryState={historyState} />
+              <RichTextPlugin
+                contentEditable={
+                  <ContentEditableInline className="InlineImageNode__contentEditable" />
+                }
+                placeholder={
+                  <PlaceholderInline className="InlineImageNode__placeholder">
+                    Enter a caption...
+                  </PlaceholderInline>
+                }
+                ErrorBoundary={LexicalErrorBoundary}
+              />
+            </LexicalNestedComposer>
+          </span>
+        )}
+      </span>
+    </Suspense>
+  )
+}