@byline/richtext-lexical 0.9.3

package/src/field/plugins/floating-text-format-toolbar-plugin/index.tsx

@@ -0,0 +1,398 @@
+'use client'
+/**
+ * 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 './index.css'
+
+import type * as React from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import { $isCodeHighlightNode } from '@lexical/code'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { mergeRegister } from '@lexical/utils'
+import {
+  $getSelection,
+  $isParagraphNode,
+  $isRangeSelection,
+  $isTextNode,
+  COMMAND_PRIORITY_LOW,
+  FORMAT_TEXT_COMMAND,
+  type LexicalEditor,
+  SELECTION_CHANGE_COMMAND,
+} from 'lexical'
+import { createPortal } from 'react-dom'
+
+import { $isLinkNode, type LinkAttributes, TOGGLE_LINK_COMMAND } from '../../nodes/link-nodes'
+import { getDOMRangeRect } from '../../utils/getDOMRangeRect'
+import { getSelectedNode } from '../../utils/getSelectedNode'
+import { setFloatingElemPosition } from '../../utils/setFloatingElemPosition'
+
+function TextFormatFloatingToolbar({
+  editor,
+  anchorElem,
+  isLink,
+  isBold,
+  isItalic,
+  isUnderline,
+  isCode,
+  isStrikethrough,
+  isSubscript,
+  isSuperscript,
+}: {
+  editor: LexicalEditor
+  anchorElem: HTMLElement
+  isBold: boolean
+  isCode: boolean
+  isItalic: boolean
+  isLink: boolean
+  isStrikethrough: boolean
+  isSubscript: boolean
+  isSuperscript: boolean
+  isUnderline: boolean
+}): React.JSX.Element {
+  const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null)
+
+  const handleOnInsertLink = useCallback(() => {
+    if (!isLink) {
+      // Only call TOGGLE_LINK_COMMAND and openModal if there is
+      // text selected (at least one character).
+      const editorState = editor.getEditorState()
+      editorState.read(() => {
+        const selection = $getSelection()
+        if ($isRangeSelection(selection)) {
+          if (selection.focus.offset !== selection.anchor.offset) {
+            const linkAttributes: LinkAttributes = {
+              linkType: 'custom',
+              url: 'https://',
+            }
+            editor.dispatchCommand(TOGGLE_LINK_COMMAND, linkAttributes)
+            // TODO: WARNING: See: link-plugin-payload/floating-link-editor.
+            // The Drawer modal is currently wrapped in the floating editor and
+            // will only open if $toggleLink in the link node successfully
+            // modifies a link now - which will trigger an update in the
+            // floating link editor. Not a good way to couple the two.
+            // openModal(linkDrawerSlug)
+          }
+        }
+      })
+    } else {
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)
+    }
+  }, [editor, isLink])
+
+  function mouseMoveListener(e: MouseEvent): void {
+    if (popupCharStylesEditorRef?.current != null && (e.buttons === 1 || e.buttons === 3)) {
+      if (popupCharStylesEditorRef.current.style.pointerEvents !== 'none') {
+        const x = e.clientX
+        const y = e.clientY
+        const elementUnderMouse = document.elementFromPoint(x, y)
+
+        if (!popupCharStylesEditorRef.current.contains(elementUnderMouse)) {
+          // Mouse is not over the target element => not a normal click, but probably a drag
+          popupCharStylesEditorRef.current.style.pointerEvents = 'none'
+        }
+      }
+    }
+  }
+  function mouseUpListener(_e: MouseEvent): void {
+    if (popupCharStylesEditorRef?.current != null) {
+      if (popupCharStylesEditorRef.current.style.pointerEvents !== 'auto') {
+        popupCharStylesEditorRef.current.style.pointerEvents = 'auto'
+      }
+    }
+  }
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
+    if (popupCharStylesEditorRef?.current != null) {
+      document.addEventListener('mousemove', mouseMoveListener)
+      document.addEventListener('mouseup', mouseUpListener)
+
+      return () => {
+        document.removeEventListener('mousemove', mouseMoveListener)
+        document.removeEventListener('mouseup', mouseUpListener)
+      }
+    }
+  }, [popupCharStylesEditorRef])
+
+  const updateTextFormatFloatingToolbar = useCallback(() => {
+    const selection = $getSelection()
+
+    const popupCharStylesEditorElem = popupCharStylesEditorRef.current
+    const nativeSelection = window.getSelection()
+
+    if (popupCharStylesEditorElem === null) {
+      return
+    }
+
+    const rootElement = editor.getRootElement()
+    if (
+      selection !== null &&
+      nativeSelection !== null &&
+      !nativeSelection.isCollapsed &&
+      rootElement?.contains(nativeSelection.anchorNode)
+    ) {
+      const rangeRect = getDOMRangeRect(nativeSelection, rootElement)
+
+      setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem, isLink)
+    }
+  }, [editor, anchorElem, isLink])
+
+  useEffect(() => {
+    const scrollerElem = anchorElem.parentElement
+
+    const update = (): void => {
+      editor.getEditorState().read(() => {
+        updateTextFormatFloatingToolbar()
+      })
+    }
+
+    window.addEventListener('resize', update)
+    if (scrollerElem != null) {
+      scrollerElem.addEventListener('scroll', update)
+    }
+
+    return () => {
+      window.removeEventListener('resize', update)
+      if (scrollerElem != null) {
+        scrollerElem.removeEventListener('scroll', update)
+      }
+    }
+  }, [editor, updateTextFormatFloatingToolbar, anchorElem])
+
+  useEffect(() => {
+    editor.getEditorState().read(() => {
+      updateTextFormatFloatingToolbar()
+    })
+    return mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          updateTextFormatFloatingToolbar()
+        })
+      }),
+
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        () => {
+          updateTextFormatFloatingToolbar()
+          return false
+        },
+        COMMAND_PRIORITY_LOW
+      )
+    )
+  }, [editor, updateTextFormatFloatingToolbar])
+
+  return (
+    <div ref={popupCharStylesEditorRef} className="floating-text-format-popup">
+      {editor.isEditable() && (
+        <>
+          <button
+            type="button"
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')
+            }}
+            className={`popup-item spaced ${isBold ? 'active' : ''}`}
+            aria-label="Format text as bold"
+          >
+            <i className="format bold" />
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')
+            }}
+            className={`popup-item spaced ${isItalic ? 'active' : ''}`}
+            aria-label="Format text as italics"
+          >
+            <i className="format italic" />
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline')
+            }}
+            className={`popup-item spaced ${isUnderline ? 'active' : ''}`}
+            aria-label="Format text to underlined"
+          >
+            <i className="format underline" />
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')
+            }}
+            className={`popup-item spaced ${isStrikethrough ? 'active' : ''}`}
+            aria-label="Format text with a strikethrough"
+          >
+            <i className="format strikethrough" />
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'subscript')
+            }}
+            className={`popup-item spaced ${isSubscript ? 'active' : ''}`}
+            title="Subscript"
+            aria-label="Format Subscript"
+          >
+            <i className="format subscript" />
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'superscript')
+            }}
+            className={`popup-item spaced ${isSuperscript ? 'active' : ''}`}
+            title="Superscript"
+            aria-label="Format Superscript"
+          >
+            <i className="format superscript" />
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code')
+            }}
+            className={`popup-item spaced ${isCode ? 'active' : ''}`}
+            aria-label="Insert code block"
+          >
+            <i className="format code" />
+          </button>
+          <button
+            type="button"
+            onClick={handleOnInsertLink}
+            className={`popup-item spaced ${isLink ? 'active' : ''}`}
+            aria-label="Insert link"
+          >
+            <i className="format link" />
+          </button>
+        </>
+      )}
+    </div>
+  )
+}
+
+function useFloatingTextFormatToolbar(
+  editor: LexicalEditor,
+  anchorElem: HTMLElement
+): React.JSX.Element | null {
+  const [isText, setIsText] = useState(false)
+  const [isLink, setIsLink] = useState(false)
+  const [isBold, setIsBold] = useState(false)
+  const [isItalic, setIsItalic] = useState(false)
+  const [isUnderline, setIsUnderline] = useState(false)
+  const [isStrikethrough, setIsStrikethrough] = useState(false)
+  const [isSubscript, setIsSubscript] = useState(false)
+  const [isSuperscript, setIsSuperscript] = useState(false)
+  const [isCode, setIsCode] = useState(false)
+
+  const updatePopup = useCallback(() => {
+    editor.getEditorState().read(() => {
+      // Should not to pop up the floating toolbar when using IME input
+      if (editor.isComposing()) {
+        return
+      }
+      const selection = $getSelection()
+      const nativeSelection = window.getSelection()
+      const rootElement = editor.getRootElement()
+
+      if (
+        nativeSelection !== null &&
+        (!$isRangeSelection(selection) ||
+          rootElement === null ||
+          !rootElement.contains(nativeSelection.anchorNode))
+      ) {
+        setIsText(false)
+        return
+      }
+
+      if (!$isRangeSelection(selection)) {
+        return
+      }
+
+      const node = getSelectedNode(selection)
+
+      // Update text format
+      setIsBold(selection.hasFormat('bold'))
+      setIsItalic(selection.hasFormat('italic'))
+      setIsUnderline(selection.hasFormat('underline'))
+      setIsStrikethrough(selection.hasFormat('strikethrough'))
+      setIsSubscript(selection.hasFormat('subscript'))
+      setIsSuperscript(selection.hasFormat('superscript'))
+      setIsCode(selection.hasFormat('code'))
+
+      // Update links
+      const parent = node.getParent()
+      if ($isLinkNode(parent) || $isLinkNode(node)) {
+        setIsLink(true)
+      } else {
+        setIsLink(false)
+      }
+
+      if (!$isCodeHighlightNode(selection.anchor.getNode()) && selection.getTextContent() !== '') {
+        setIsText($isTextNode(node) || $isParagraphNode(node))
+      } else {
+        setIsText(false)
+      }
+
+      const rawTextContent = selection.getTextContent().replace(/\n/g, '')
+      if (!selection.isCollapsed() && rawTextContent === '') {
+        setIsText(false)
+      }
+    })
+  }, [editor])
+
+  useEffect(() => {
+    document.addEventListener('selectionchange', updatePopup)
+    return () => {
+      document.removeEventListener('selectionchange', updatePopup)
+    }
+  }, [updatePopup])
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerUpdateListener(() => {
+        updatePopup()
+      }),
+      editor.registerRootListener(() => {
+        if (editor.getRootElement() === null) {
+          setIsText(false)
+        }
+      })
+    )
+  }, [editor, updatePopup])
+
+  if (!isText) {
+    return null
+  }
+
+  return createPortal(
+    <TextFormatFloatingToolbar
+      editor={editor}
+      anchorElem={anchorElem}
+      isLink={isLink}
+      isBold={isBold}
+      isItalic={isItalic}
+      isStrikethrough={isStrikethrough}
+      isSubscript={isSubscript}
+      isSuperscript={isSuperscript}
+      isUnderline={isUnderline}
+      isCode={isCode}
+    />,
+    anchorElem
+  )
+}
+
+export function FloatingTextFormatToolbarPlugin({
+  anchorElem = document.body,
+}: {
+  anchorElem?: HTMLElement
+}): React.JSX.Element | null {
+  const [editor] = useLexicalComposerContext()
+  return useFloatingTextFormatToolbar(editor, anchorElem)
+}

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

@@ -0,0 +1,21 @@
+/**
+ * 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 { SelectValue } from '@infonomic/uikit/react'
+
+export const positionOptions: SelectValue[] = [
+  { label: 'Full', value: 'full' },
+  { label: 'Wide', value: 'wide' },
+  { label: 'Left', value: 'left' },
+  { label: 'Right', value: 'right' },
+]
+
+/** Alt text is required for accessibility — non-empty after trimming. */
+export function isAltTextValid(value: string | undefined | null): boolean {
+  return typeof value === 'string' && value.trim().length > 0
+}

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

@@ -0,0 +1,202 @@
+'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
+ *
+ * Portions Copyright (c) Meta Platforms, Inc. and affiliates.
+ */
+
+import type * as React from 'react'
+import { useCallback, useEffect, useState } from 'react'
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { $wrapNodeInElement, mergeRegister } from '@lexical/utils'
+import {
+  $createParagraphNode,
+  $getNodeByKey,
+  $insertNodes,
+  $isRootOrShadowRoot,
+  COMMAND_PRIORITY_EDITOR,
+  COMMAND_PRIORITY_NORMAL,
+  createCommand,
+  type LexicalCommand,
+  type LexicalEditor,
+  type NodeKey,
+} from 'lexical'
+
+import {
+  $createInlineImageNode,
+  $isInlineImageNode,
+  InlineImageNode,
+} from '../../nodes/inline-image-node'
+import { InlineImageModal } from './inline-image-modal'
+import type { InlineImageAttributes } from '../../nodes/inline-image-node/types'
+import type { InlineImageData } from './types'
+
+export type InsertInlineImagePayload = Readonly<InlineImageAttributes>
+export type UpdateInlineImagePayload = Readonly<{
+  nodeKey: NodeKey
+  attributes: InlineImageAttributes
+}>
+export type OpenInlineImageModalPayload = Readonly<{ nodeKey?: NodeKey }> | null
+
+/**
+ * Asks the InlineImagePlugin to open its modal. Pass `null` (or omit
+ * `nodeKey`) for insert mode; pass a `nodeKey` to edit an existing node
+ * with its current attributes pre-filled.
+ */
+export const OPEN_INLINE_IMAGE_MODAL_COMMAND: LexicalCommand<OpenInlineImageModalPayload> =
+  createCommand('OPEN_INLINE_IMAGE_MODAL_COMMAND')
+
+/** Inserts a new InlineImageNode at the current selection. */
+export const INSERT_INLINE_IMAGE_COMMAND: LexicalCommand<InsertInlineImagePayload> = createCommand(
+  'INSERT_INLINE_IMAGE_COMMAND'
+)
+
+/** Updates the InlineImageNode identified by `nodeKey` in place. */
+export const UPDATE_INLINE_IMAGE_COMMAND: LexicalCommand<UpdateInlineImagePayload> = createCommand(
+  'UPDATE_INLINE_IMAGE_COMMAND'
+)
+
+type ModalMode = 'insert' | 'edit'
+
+interface ModalState {
+  mode: ModalMode
+  open: boolean
+  nodeKey: NodeKey | null
+  initialData: InlineImageData | undefined
+}
+
+const CLOSED_STATE: ModalState = {
+  mode: 'insert',
+  open: false,
+  nodeKey: null,
+  initialData: undefined,
+}
+
+/**
+ * Build the modal's `initialData` from a live node. Reads via
+ * `editor.getEditorState().read(...)` so we don't mutate state during a
+ * non-update phase.
+ */
+function readNodeAsInitialData(
+  editor: LexicalEditor,
+  nodeKey: NodeKey
+): InlineImageData | undefined {
+  let data: InlineImageData | undefined
+  editor.getEditorState().read(() => {
+    const node = $getNodeByKey(nodeKey)
+    if (!$isInlineImageNode(node)) return
+    data = {
+      documentRelation: node.getRelation(),
+      src: node.getSrc(),
+      altText: node.getAltText(),
+      position: node.getPosition(),
+      showCaption: node.getShowCaption(),
+    }
+  })
+  return data
+}
+
+export function InlineImagePlugin({ collection }: { collection: string }): React.JSX.Element {
+  const [editor] = useLexicalComposerContext()
+  const [modalState, setModalState] = useState<ModalState>(CLOSED_STATE)
+
+  useEffect(() => {
+    if (!editor.hasNodes([InlineImageNode])) {
+      throw new Error('InlineImagePlugin: InlineImageNode not registered on editor')
+    }
+
+    return mergeRegister(
+      editor.registerCommand<OpenInlineImageModalPayload>(
+        OPEN_INLINE_IMAGE_MODAL_COMMAND,
+        (payload) => {
+          const nodeKey = payload?.nodeKey
+          if (nodeKey != null) {
+            const initialData = readNodeAsInitialData(editor, nodeKey)
+            setModalState({ mode: 'edit', open: true, nodeKey, initialData })
+          } else {
+            setModalState({
+              mode: 'insert',
+              open: true,
+              nodeKey: null,
+              initialData: undefined,
+            })
+          }
+          return true
+        },
+        COMMAND_PRIORITY_NORMAL
+      ),
+
+      editor.registerCommand<InsertInlineImagePayload>(
+        INSERT_INLINE_IMAGE_COMMAND,
+        (payload) => {
+          const imageNode = $createInlineImageNode(payload)
+          $insertNodes([imageNode])
+          if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
+            $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd()
+          }
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR
+      ),
+
+      editor.registerCommand<UpdateInlineImagePayload>(
+        UPDATE_INLINE_IMAGE_COMMAND,
+        ({ nodeKey, attributes }) => {
+          const node = $getNodeByKey(nodeKey)
+          if ($isInlineImageNode(node)) {
+            node.update(attributes)
+            return true
+          }
+          return false
+        },
+        COMMAND_PRIORITY_EDITOR
+      )
+    )
+  }, [editor])
+
+  const handleSubmit = useCallback(
+    (data: InlineImageData) => {
+      if (data.documentRelation == null) return
+
+      const attributes: InlineImageAttributes = {
+        ...data.documentRelation,
+        src: data.src,
+        altText: data.altText,
+        position: data.position,
+        width: data.width,
+        height: data.height,
+        showCaption: data.showCaption,
+      }
+
+      if (modalState.mode === 'edit' && modalState.nodeKey != null) {
+        editor.dispatchCommand(UPDATE_INLINE_IMAGE_COMMAND, {
+          nodeKey: modalState.nodeKey,
+          attributes,
+        })
+      } else {
+        editor.dispatchCommand(INSERT_INLINE_IMAGE_COMMAND, attributes)
+      }
+    },
+    [editor, modalState.mode, modalState.nodeKey]
+  )
+
+  const handleClose = useCallback(() => {
+    setModalState(CLOSED_STATE)
+  }, [])
+
+  return (
+    <InlineImageModal
+      isOpen={modalState.open}
+      collection={collection}
+      data={modalState.initialData}
+      onSubmit={handleSubmit}
+      onClose={handleClose}
+    />
+  )
+}

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

@@ -0,0 +1,29 @@
+.inline-image-plugin--modal-image {
+  margin-bottom: 2rem;
+}
+
+.inline-image-plugin--modal-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.inline-image-plugin--modal-media-display {
+  margin-bottom: 2em;
+}
+
+.inline-image-plugin--modal-alt-text {
+  margin-bottom: 1em;
+}
+
+.inline-image-plugin--modal-position {
+  margin-bottom: 2em;
+}
+
+.inline-image-plugin--modal-show-caption {
+  margin-bottom: 1em;
+}
+
+.inline-image-plugin--modal-actions {
+  display: flex;
+  gap: 12px;
+}