@byline/richtext-lexical 0.9.3

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

@@ -0,0 +1,328 @@
+// '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 * as React from 'react'
+import { Suspense } from 'react'
+
+import type {
+  DOMConversionMap,
+  DOMConversionOutput,
+  DOMExportOutput,
+  EditorConfig,
+  LexicalEditor,
+  LexicalNode,
+  NodeKey,
+} from 'lexical'
+import { $applyNodeReplacement, createEditor, DecoratorNode } from 'lexical'
+
+import type { DocumentRelation } from '../document-relation'
+import type { InlineImageAttributes, Position, SerializedInlineImageNode } from './types'
+
+const InlineImageComponent = React.lazy(async () => await import('./inline-image-node-component'))
+
+function convertInlineImageElement(domNode: Node): null | DOMConversionOutput {
+  if (domNode instanceof HTMLImageElement) {
+    const { alt: altText, src, width, height } = domNode
+    // HTML round-trip carries only the document id and the collection path
+    // (not the collection's UUID). `targetCollectionId` is left empty here;
+    // editor flows that need the UUID should re-pick via the modal.
+    const node = $createInlineImageNode({
+      targetDocumentId: (domNode.dataset.id as string | undefined) ?? '',
+      targetCollectionId: '',
+      targetCollectionPath: (domNode.dataset.collection as string | undefined) ?? '',
+      src,
+      altText,
+      height,
+      width,
+    })
+    return { node }
+  }
+  return null
+}
+
+export class InlineImageNode extends DecoratorNode<React.JSX.Element> {
+  __relation: DocumentRelation
+  __src: string
+  __position: Position
+  __altText: string | undefined
+  __width: number | string | undefined
+  __height: number | string | undefined
+  __showCaption: boolean
+  __caption: LexicalEditor
+
+  static getType(): string {
+    return 'inline-image'
+  }
+
+  static clone(node: InlineImageNode): InlineImageNode {
+    return new InlineImageNode(
+      node.__relation,
+      node.__src,
+      node.__position,
+      node.__altText,
+      node.__width,
+      node.__height,
+      node.__showCaption,
+      node.__caption,
+      node.__key
+    )
+  }
+
+  static importJSON(serializedNode: SerializedInlineImageNode): InlineImageNode {
+    const {
+      src,
+      position,
+      altText,
+      height,
+      width,
+      showCaption,
+      caption,
+      targetDocumentId,
+      targetCollectionId,
+      targetCollectionPath,
+      document,
+    } = serializedNode
+    const node = $createInlineImageNode({
+      targetDocumentId,
+      targetCollectionId,
+      targetCollectionPath,
+      document,
+      src,
+      position,
+      altText,
+      width,
+      height,
+      showCaption,
+    })
+    const nestedEditor = node.__caption
+    const editorState = nestedEditor.parseEditorState(caption.editorState)
+    if (!editorState.isEmpty()) {
+      nestedEditor.setEditorState(editorState)
+    }
+    return node
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {
+      img: (_node: Node) => ({
+        conversion: convertInlineImageElement,
+        priority: 0,
+      }),
+    }
+  }
+
+  constructor(
+    relation: DocumentRelation,
+    src: string,
+    position: Position,
+    altText?: string,
+    width?: number | string,
+    height?: number | string,
+    showCaption?: boolean,
+    caption?: LexicalEditor,
+    key?: NodeKey
+  ) {
+    super(key)
+    this.__relation = relation
+    this.__src = src
+    this.__position = position
+    this.__altText = altText
+    this.__width = width
+    this.__height = height
+    this.__showCaption = showCaption ?? false
+    this.__caption = caption ?? createEditor()
+  }
+
+  exportDOM(): DOMExportOutput {
+    const element = document.createElement('img')
+    element.setAttribute('data-id', this.__relation.targetDocumentId)
+    element.setAttribute('data-collection', this.__relation.targetCollectionPath)
+    element.setAttribute('src', this.__src)
+    element.setAttribute('alt', this.__altText as string)
+
+    // Width and height will be undefined for SVGs
+    if (this.__width != null) {
+      element.setAttribute('width', this.__width.toString())
+    }
+    if (this.__height != null) {
+      element.setAttribute('height', this.__height.toString())
+    }
+    return { element }
+  }
+
+  exportJSON(): SerializedInlineImageNode {
+    return {
+      ...this.__relation,
+      src: this.getSrc(),
+      position: this.__position,
+      altText: this.getAltText(),
+      height: this.__height,
+      width: this.__width,
+      showCaption: this.__showCaption,
+      caption: this.__caption.toJSON(),
+      type: 'inline-image',
+      version: 1,
+    }
+  }
+
+  getRelation(): DocumentRelation {
+    return this.__relation
+  }
+
+  getSrc(): string {
+    return this.__src
+  }
+
+  getAltText(): string {
+    return this.__altText as string
+  }
+
+  setAltText(altText: string): void {
+    const writable = this.getWritable()
+    writable.__altText = altText
+  }
+
+  setWidthAndHeight(width: number | string, height: number | string): void {
+    const writable = this.getWritable()
+    writable.__width = width
+    writable.__height = height
+  }
+
+  getShowCaption(): boolean {
+    return this.__showCaption
+  }
+
+  setShowCaption(showCaption: boolean): void {
+    const writable = this.getWritable()
+    writable.__showCaption = showCaption
+  }
+
+  getPosition(): Position {
+    return this.__position
+  }
+
+  setPosition(position: Position): void {
+    const writable = this.getWritable()
+    writable.__position = position
+  }
+
+  update(payload: InlineImageAttributes): void {
+    const writable = this.getWritable()
+    const {
+      targetDocumentId,
+      targetCollectionId,
+      targetCollectionPath,
+      document,
+      src,
+      position,
+      altText,
+      height,
+      width,
+      showCaption,
+    } = payload
+    if (targetDocumentId != null) {
+      writable.__relation = {
+        targetDocumentId,
+        targetCollectionId,
+        targetCollectionPath,
+        document,
+      }
+    }
+    if (src != null) {
+      writable.__src = src
+    }
+    if (position != null) {
+      writable.__position = position
+    }
+    if (altText != null) {
+      writable.__altText = altText
+    }
+    if (width != null) {
+      writable.__width = width
+    }
+    if (height != null) {
+      writable.__height = height
+    }
+    if (showCaption != null) {
+      writable.__showCaption = showCaption
+    }
+  }
+
+  // View
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const span = document.createElement('span')
+    const className = `${config.theme.inlineImage} position-${this.__position}`
+    if (className !== undefined) {
+      span.className = className
+    }
+    return span
+  }
+
+  updateDOM(prevNode: InlineImageNode, dom: HTMLElement, config: EditorConfig): boolean {
+    const position = this.__position
+    if (position !== prevNode.__position) {
+      const className = `${config.theme.inlineImage} position-${position}`
+      if (className !== undefined) {
+        dom.className = className
+      }
+      return true
+    }
+    if (this.__showCaption !== prevNode.__showCaption) return true
+    return false
+  }
+
+  decorate(): React.JSX.Element {
+    return (
+      <Suspense fallback={null}>
+        <InlineImageComponent
+          relation={this.__relation}
+          src={this.__src}
+          position={this.__position}
+          altText={this.__altText}
+          width={this.__width}
+          height={this.__height}
+          showCaption={this.__showCaption}
+          caption={this.__caption}
+          nodeKey={this.getKey()}
+        />
+      </Suspense>
+    )
+  }
+}
+
+export function $createInlineImageNode({
+  targetDocumentId,
+  targetCollectionId,
+  targetCollectionPath,
+  document,
+  src,
+  position,
+  altText,
+  height,
+  width,
+  showCaption,
+  caption,
+  key,
+}: InlineImageAttributes): InlineImageNode {
+  const relation: DocumentRelation = {
+    targetDocumentId,
+    targetCollectionId,
+    targetCollectionPath,
+    document,
+  }
+  return $applyNodeReplacement(
+    new InlineImageNode(relation, src, position, altText, width, height, showCaption, caption, key)
+  )
+}
+
+export function $isInlineImageNode(node: LexicalNode | null | undefined): node is InlineImageNode {
+  return node instanceof InlineImageNode
+}

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

@@ -0,0 +1,43 @@
+/**
+ * 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'
+
+import type { DocumentRelation } from '../document-relation'
+
+export type Position = 'left' | 'right' | 'full' | 'wide' | 'default' | undefined
+
+export interface InlineImageAttributes extends DocumentRelation {
+  src: string
+  altText?: string
+  position?: Position
+  height?: number | string
+  width?: number | string
+  key?: NodeKey
+  showCaption?: boolean
+  caption?: LexicalEditor
+}
+
+export type SerializedInlineImageNode = Spread<
+  DocumentRelation & {
+    src: string
+    position?: Position
+    altText: string
+    height?: number | string
+    width?: number | string
+    showCaption: boolean
+    caption: SerializedEditor
+  },
+  SerializedLexicalNode
+>

package/src/field/nodes/layout-container-node/layout-container-node.ts

@@ -0,0 +1,97 @@
+/**
+ * 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 { addClassNamesToElement } from '@lexical/utils'
+import type {
+  DOMConversionMap,
+  EditorConfig,
+  LexicalNode,
+  NodeKey,
+  SerializedElementNode,
+  Spread,
+} from 'lexical'
+import { ElementNode } from 'lexical'
+
+export type SerializedLayoutContainerNode = Spread<
+  {
+    templateColumns: string
+  },
+  SerializedElementNode
+>
+
+export class LayoutContainerNode extends ElementNode {
+  __templateColumns: string
+
+  constructor(templateColumns: string, key?: NodeKey) {
+    super(key)
+    this.__templateColumns = templateColumns
+  }
+
+  static getType(): string {
+    return 'layout-container'
+  }
+
+  static clone(node: LayoutContainerNode): LayoutContainerNode {
+    return new LayoutContainerNode(node.__templateColumns, node.__key)
+  }
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const dom = document.createElement('div')
+    dom.style.gridTemplateColumns = this.__templateColumns
+    if (typeof config.theme.layoutContainer === 'string') {
+      addClassNamesToElement(dom, config.theme.layoutContainer)
+    }
+    return dom
+  }
+
+  updateDOM(prevNode: LayoutContainerNode, dom: HTMLElement): boolean {
+    if (prevNode.__templateColumns !== this.__templateColumns) {
+      dom.style.gridTemplateColumns = this.__templateColumns
+    }
+    return false
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {}
+  }
+
+  static importJSON(json: SerializedLayoutContainerNode): LayoutContainerNode {
+    return $createLayoutContainerNode(json.templateColumns)
+  }
+
+  canBeEmpty(): boolean {
+    return false
+  }
+
+  exportJSON(): SerializedLayoutContainerNode {
+    return {
+      ...super.exportJSON(),
+      templateColumns: this.__templateColumns,
+      type: 'layout-container',
+      version: 1,
+    }
+  }
+
+  getTemplateColumns(): string {
+    return this.getLatest().__templateColumns
+  }
+
+  setTemplateColumns(templateColumns: string): void {
+    this.getWritable().__templateColumns = templateColumns
+  }
+}
+
+export function $createLayoutContainerNode(templateColumns: string): LayoutContainerNode {
+  return new LayoutContainerNode(templateColumns)
+}
+
+export function $isLayoutContainerNode(
+  node: LexicalNode | null | undefined
+): node is LayoutContainerNode {
+  return node instanceof LayoutContainerNode
+}

package/src/field/nodes/layout-container-node/layout-item-node.ts

@@ -0,0 +1,63 @@
+/**
+ * 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 { addClassNamesToElement } from '@lexical/utils'
+import type { DOMConversionMap, EditorConfig, LexicalNode, SerializedElementNode } from 'lexical'
+import { ElementNode } from 'lexical'
+
+export type SerializedLayoutItemNode = SerializedElementNode
+
+export class LayoutItemNode extends ElementNode {
+  static getType(): string {
+    return 'layout-item'
+  }
+
+  static clone(node: LayoutItemNode): LayoutItemNode {
+    return new LayoutItemNode(node.__key)
+  }
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const dom = document.createElement('div')
+    if (typeof config.theme.layoutItem === 'string') {
+      addClassNamesToElement(dom, config.theme.layoutItem)
+    }
+    return dom
+  }
+
+  updateDOM(): boolean {
+    return false
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {}
+  }
+
+  static importJSON(): LayoutItemNode {
+    return $createLayoutItemNode()
+  }
+
+  isShadowRoot(): boolean {
+    return true
+  }
+
+  exportJSON(): SerializedLayoutItemNode {
+    return {
+      ...super.exportJSON(),
+      type: 'layout-item',
+      version: 1,
+    }
+  }
+}
+
+export function $createLayoutItemNode(): LayoutItemNode {
+  return new LayoutItemNode()
+}
+
+export function $isLayoutItemNode(node: LexicalNode | null | undefined): node is LayoutItemNode {
+  return node instanceof LayoutItemNode
+}

package/src/field/nodes/link-nodes/auto-link-node.ts

@@ -0,0 +1,64 @@
+import {
+  $applyNodeReplacement,
+  $isElementNode,
+  type ElementNode,
+  type LexicalNode,
+  type RangeSelection,
+} from 'lexical'
+
+import { LinkNode } from './link-node'
+import type { LinkAttributes, SerializedLinkNode } from './types'
+
+export type SerializedAutoLinkNode = SerializedLinkNode
+
+// Custom node type to override `canInsertTextAfter` that will
+// allow typing within the link
+
+export class AutoLinkNode extends LinkNode {
+  static getType(): string {
+    return 'autolink'
+  }
+
+  static clone(node: AutoLinkNode): AutoLinkNode {
+    return new AutoLinkNode({ attributes: node.__attributes, key: node.__key })
+  }
+
+  static importJSON(serializedNode: SerializedAutoLinkNode): AutoLinkNode {
+    const node = $createAutoLinkNode({ attributes: serializedNode.attributes })
+
+    node.setFormat(serializedNode.format)
+    node.setIndent(serializedNode.indent)
+    node.setDirection(serializedNode.direction)
+    return node
+  }
+
+  static importDOM(): null {
+    // TODO: Should link node should handle the import over autolink?
+    return null
+  }
+
+  exportJSON(): SerializedAutoLinkNode {
+    return {
+      ...super.exportJSON(),
+      type: 'autolink',
+      version: 1,
+    }
+  }
+
+  insertNewAfter(selection: RangeSelection, restoreSelection = true): null | ElementNode {
+    const element = this.getParentOrThrow().insertNewAfter(selection, restoreSelection)
+    if ($isElementNode(element)) {
+      const linkNode = $createAutoLinkNode({ attributes: this.__attributes })
+      element.append(linkNode)
+      return linkNode
+    }
+    return null
+  }
+}
+
+export function $createAutoLinkNode({ attributes }: { attributes: LinkAttributes }): AutoLinkNode {
+  return $applyNodeReplacement(new AutoLinkNode({ attributes }))
+}
+export function $isAutoLinkNode(node: LexicalNode | null | undefined): node is AutoLinkNode {
+  return node instanceof AutoLinkNode
+}

package/src/field/nodes/link-nodes/index.ts

@@ -0,0 +1,3 @@
+export * from './auto-link-node'
+export * from './link-node'
+export * from './types'