@byline/richtext-lexical 0.9.3

package/src/field/utils/getDOMRangeRect.ts

@@ -0,0 +1,24 @@
+/**
+ * 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.
+ *
+ */
+export function getDOMRangeRect(nativeSelection: Selection, rootElement: HTMLElement): DOMRect {
+  const domRange = nativeSelection.getRangeAt(0)
+
+  let rect: DOMRect
+
+  if (nativeSelection.anchorNode === rootElement) {
+    let inner = rootElement
+    while (inner.firstElementChild != null) {
+      inner = inner.firstElementChild as HTMLElement
+    }
+    rect = inner.getBoundingClientRect()
+  } else {
+    rect = domRange.getBoundingClientRect()
+  }
+
+  return rect
+}

package/src/field/utils/getSelectedNode.ts

@@ -0,0 +1,25 @@
+/**
+ * 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 { $isAtNodeEnd } from '@lexical/selection'
+import type { ElementNode, RangeSelection, TextNode } from 'lexical'
+
+export function getSelectedNode(selection: RangeSelection): TextNode | ElementNode {
+  const anchor = selection.anchor
+  const focus = selection.focus
+  const anchorNode = selection.anchor.getNode()
+  const focusNode = selection.focus.getNode()
+  if (anchorNode === focusNode) {
+    return anchorNode
+  }
+  const isBackward = selection.isBackward()
+  if (isBackward) {
+    return $isAtNodeEnd(focus) ? anchorNode : focusNode
+  } else {
+    return $isAtNodeEnd(anchor) ? anchorNode : focusNode
+  }
+}

package/src/field/utils/guard.ts

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+export function isHTMLElement(x: unknown): x is HTMLElement {
+  return x instanceof HTMLElement
+}

package/src/field/utils/hashSerializedState.ts

@@ -0,0 +1,34 @@
+import type { SerializedEditorState } from 'lexical'
+
+// Simple FNV-1a hash for serialized editor state.
+// Used to detect external value changes without deep-equality costs.
+export function hashSerializedState(state: SerializedEditorState | string): string {
+  const str = typeof state === 'string' ? state : stableJsonStringify(state)
+  let hash = 2166136261 >>> 0
+
+  for (let i = 0; i < str.length; i++) {
+    hash ^= str.charCodeAt(i)
+    hash = Math.imul(hash, 16777619)
+  }
+
+  return (hash >>> 0).toString(16)
+}
+
+function stableJsonStringify(value: unknown): string {
+  // Lexical/Payload states are plain JSON-ish objects.
+  // We sort object keys to ensure semantically identical objects hash the same,
+  // even if key insertion order differs (e.g. { relationTo, value } vs { value, relationTo }).
+  return JSON.stringify(value, (_key, val) => {
+    if (val == null) return val
+    if (Array.isArray(val)) return val
+    if (typeof val !== 'object') return val
+
+    const obj = val as Record<string, unknown>
+    const keys = Object.keys(obj).sort()
+    const sorted: Record<string, unknown> = {}
+    for (const key of keys) {
+      sorted[key] = obj[key]
+    }
+    return sorted
+  })
+}

package/src/field/utils/isMobileWidth.ts

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ *
+ */

package/src/field/utils/joinClasses.ts

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ *
+ */
+
+export default function joinClasses(...args: Array<string | boolean | null | undefined>): string {
+  return args.filter(Boolean).join(' ')
+}

package/src/field/utils/point.ts

@@ -0,0 +1,52 @@
+/**
+ * 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.
+ *
+ */
+export class Point {
+  private readonly _x: number
+  private readonly _y: number
+
+  constructor(x: number, y: number) {
+    this._x = x
+    this._y = y
+  }
+
+  get x(): number {
+    return this._x
+  }
+
+  get y(): number {
+    return this._y
+  }
+
+  public equals({ x, y }: Point): boolean {
+    return this.x === x && this.y === y
+  }
+
+  public calcDeltaXTo({ x }: Point): number {
+    return this.x - x
+  }
+
+  public calcDeltaYTo({ y }: Point): number {
+    return this.y - y
+  }
+
+  public calcHorizontalDistanceTo(point: Point): number {
+    return Math.abs(this.calcDeltaXTo(point))
+  }
+
+  public calcVerticalDistance(point: Point): number {
+    return Math.abs(this.calcDeltaYTo(point))
+  }
+
+  public calcDistanceTo(point: Point): number {
+    return Math.sqrt(this.calcDeltaXTo(point) ** 2 + this.calcDeltaYTo(point) ** 2)
+  }
+}
+
+export function isPoint(x: unknown): x is Point {
+  return x instanceof Point
+}

package/src/field/utils/rect.ts

@@ -0,0 +1,142 @@
+/**
+ * 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 { isPoint, type Point } from './point'
+
+interface ContainsPointReturn {
+  result: boolean
+  reason: {
+    isOnTopSide: boolean
+    isOnBottomSide: boolean
+    isOnLeftSide: boolean
+    isOnRightSide: boolean
+  }
+}
+
+export class Rect {
+  private readonly _left: number
+  private readonly _top: number
+  private readonly _right: number
+  private readonly _bottom: number
+
+  constructor(left: number, top: number, right: number, bottom: number) {
+    const [physicTop, physicBottom] = top <= bottom ? [top, bottom] : [bottom, top]
+
+    const [physicLeft, physicRight] = left <= right ? [left, right] : [right, left]
+
+    this._top = physicTop
+    this._right = physicRight
+    this._left = physicLeft
+    this._bottom = physicBottom
+  }
+
+  get top(): number {
+    return this._top
+  }
+
+  get right(): number {
+    return this._right
+  }
+
+  get bottom(): number {
+    return this._bottom
+  }
+
+  get left(): number {
+    return this._left
+  }
+
+  get width(): number {
+    return Math.abs(this._left - this._right)
+  }
+
+  get height(): number {
+    return Math.abs(this._bottom - this._top)
+  }
+
+  public equals({ top, left, bottom, right }: Rect): boolean {
+    return (
+      top === this._top && bottom === this._bottom && left === this._left && right === this._right
+    )
+  }
+
+  public contains({ x, y }: Point): ContainsPointReturn
+  public contains({ top, left, bottom, right }: Rect): boolean
+  public contains(target: Point | Rect): boolean | ContainsPointReturn {
+    if (isPoint(target)) {
+      const { x, y } = target
+
+      const isOnTopSide = y < this._top
+      const isOnBottomSide = y > this._bottom
+      const isOnLeftSide = x < this._left
+      const isOnRightSide = x > this._right
+
+      const result = !isOnTopSide && !isOnBottomSide && !isOnLeftSide && !isOnRightSide
+
+      return {
+        reason: {
+          isOnBottomSide,
+          isOnLeftSide,
+          isOnRightSide,
+          isOnTopSide,
+        },
+        result,
+      }
+    } else {
+      const { top, left, bottom, right } = target
+
+      return (
+        top >= this._top &&
+        top <= this._bottom &&
+        bottom >= this._top &&
+        bottom <= this._bottom &&
+        left >= this._left &&
+        left <= this._right &&
+        right >= this._left &&
+        right <= this._right
+      )
+    }
+  }
+
+  public intersectsWith(rect: Rect): boolean {
+    const { left: x1, top: y1, width: w1, height: h1 } = rect
+    const { left: x2, top: y2, width: w2, height: h2 } = this
+    const maxX = x1 + w1 >= x2 + w2 ? x1 + w1 : x2 + w2
+    const maxY = y1 + h1 >= y2 + h2 ? y1 + h1 : y2 + h2
+    const minX = x1 <= x2 ? x1 : x2
+    const minY = y1 <= y2 ? y1 : y2
+    return maxX - minX <= w1 + w2 && maxY - minY <= h1 + h2
+  }
+
+  public generateNewRect({
+    left = this.left,
+    top = this.top,
+    right = this.right,
+    bottom = this.bottom,
+  }): Rect {
+    return new Rect(left, top, right, bottom)
+  }
+
+  static fromLTRB(left: number, top: number, right: number, bottom: number): Rect {
+    return new Rect(left, top, right, bottom)
+  }
+
+  static fromLWTH(left: number, width: number, top: number, height: number): Rect {
+    return new Rect(left, top, left + width, top + height)
+  }
+
+  static fromPoints(startPoint: Point, endPoint: Point): Rect {
+    const { y: top, x: left } = startPoint
+    const { y: bottom, x: right } = endPoint
+    return Rect.fromLTRB(left, top, right, bottom)
+  }
+
+  static fromDOM(dom: HTMLElement): Rect {
+    const { top, width, left, height } = dom.getBoundingClientRect()
+    return Rect.fromLWTH(left, width, top, height)
+  }
+}

package/src/field/utils/setFloatingElemPosition.ts

@@ -0,0 +1,48 @@
+/**
+ * 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.
+ *
+ */
+const VERTICAL_GAP = 10
+const HORIZONTAL_OFFSET = 5
+
+export function setFloatingElemPosition(
+  targetRect: DOMRect | null,
+  floatingElem: HTMLElement,
+  anchorElem: HTMLElement,
+  isLink: boolean = false,
+  verticalGap: number = VERTICAL_GAP,
+  horizontalOffset: number = HORIZONTAL_OFFSET
+): void {
+  const scrollerElem = anchorElem.parentElement
+
+  if (targetRect === null || scrollerElem == null) {
+    floatingElem.style.opacity = '0'
+    floatingElem.style.transform = 'translate(-10000px, -10000px)'
+    return
+  }
+
+  const floatingElemRect = floatingElem.getBoundingClientRect()
+  const anchorElementRect = anchorElem.getBoundingClientRect()
+  const editorScrollerRect = scrollerElem.getBoundingClientRect()
+
+  let top = targetRect.top - floatingElemRect.height - verticalGap
+  let left = targetRect.left - horizontalOffset
+
+  if (top < editorScrollerRect.top) {
+    // adjusted height for link element if the element is at top
+    top += floatingElemRect.height + targetRect.height + verticalGap * (isLink ? 9 : 2)
+  }
+
+  if (left + floatingElemRect.width > editorScrollerRect.right) {
+    left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset
+  }
+
+  top -= anchorElementRect.top
+  left -= anchorElementRect.left
+
+  floatingElem.style.opacity = '1'
+  floatingElem.style.transform = `translate(${left}px, ${top}px)`
+}

package/src/field/utils/setFloatingElemPositionForLinkEditor.ts

@@ -0,0 +1,46 @@
+/**
+ * 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.
+ *
+ */
+const VERTICAL_GAP = 10
+const HORIZONTAL_OFFSET = 5
+
+export function setFloatingElemPositionForLinkEditor(
+  targetRect: ClientRect | null,
+  floatingElem: HTMLElement,
+  anchorElem: HTMLElement,
+  verticalGap: number = VERTICAL_GAP,
+  horizontalOffset: number = HORIZONTAL_OFFSET
+): void {
+  const scrollerElem = anchorElem.parentElement
+
+  if (targetRect === null || scrollerElem == null) {
+    floatingElem.style.opacity = '0'
+    floatingElem.style.transform = 'translate(-10000px, -10000px)'
+    return
+  }
+
+  const floatingElemRect = floatingElem.getBoundingClientRect()
+  const anchorElementRect = anchorElem.getBoundingClientRect()
+  const editorScrollerRect = scrollerElem.getBoundingClientRect()
+
+  let top = targetRect.top - verticalGap
+  let left = targetRect.left - horizontalOffset
+
+  if (top < editorScrollerRect.top) {
+    top += floatingElemRect.height + targetRect.height + verticalGap * 2
+  }
+
+  if (left + floatingElemRect.width > editorScrollerRect.right) {
+    left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset
+  }
+
+  top -= anchorElementRect.top
+  left -= anchorElementRect.left
+
+  floatingElem.style.opacity = '1'
+  floatingElem.style.transform = `translate(${left}px, ${top}px)`
+}

package/src/field/utils/swipe.ts

@@ -0,0 +1,129 @@
+/**
+ * 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.
+ *
+ */
+
+type Force = [number, number]
+type Listener = (force: Force, e: TouchEvent) => void
+interface ElementValues {
+  start: null | Force
+  listeners: Set<Listener>
+  handleTouchstart: (e: TouchEvent) => void
+  handleTouchend: (e: TouchEvent) => void
+}
+
+const elements = new WeakMap<HTMLElement, ElementValues>()
+
+function readTouch(e: TouchEvent): [number, number] | null {
+  const touch = e.changedTouches[0]
+  if (touch === undefined) {
+    return null
+  }
+  return [touch.clientX, touch.clientY]
+}
+
+function addListener(element: HTMLElement, cb: Listener): () => void {
+  let elementValues = elements.get(element)
+  if (elementValues === undefined) {
+    const listeners = new Set<Listener>()
+    const handleTouchstart = (e: TouchEvent): void => {
+      if (elementValues !== undefined) {
+        elementValues.start = readTouch(e)
+      }
+    }
+    const handleTouchend = (e: TouchEvent): void => {
+      if (elementValues === undefined) {
+        return
+      }
+      const start = elementValues.start
+      if (start === null) {
+        return
+      }
+      const end = readTouch(e)
+      for (const listener of listeners) {
+        if (end !== null) {
+          listener([end[0] - start[0], end[1] - start[1]], e)
+        }
+      }
+    }
+    element.addEventListener('touchstart', handleTouchstart)
+    element.addEventListener('touchend', handleTouchend)
+
+    elementValues = {
+      handleTouchend,
+      handleTouchstart,
+      listeners,
+      start: null,
+    }
+    elements.set(element, elementValues)
+  }
+  elementValues.listeners.add(cb)
+  return () => {
+    deleteListener(element, cb)
+  }
+}
+
+function deleteListener(element: HTMLElement, cb: Listener): void {
+  const elementValues = elements.get(element)
+  if (elementValues === undefined) {
+    return
+  }
+  const listeners = elementValues.listeners
+  listeners.delete(cb)
+  if (listeners.size === 0) {
+    elements.delete(element)
+    element.removeEventListener('touchstart', elementValues.handleTouchstart)
+    element.removeEventListener('touchend', elementValues.handleTouchend)
+  }
+}
+
+export function addSwipeLeftListener(
+  element: HTMLElement,
+  cb: (_force: number, e: TouchEvent) => void
+): () => void {
+  return addListener(element, (force, e) => {
+    const [x, y] = force
+    if (x < 0 && -x > Math.abs(y)) {
+      cb(x, e)
+    }
+  })
+}
+
+export function addSwipeRightListener(
+  element: HTMLElement,
+  cb: (_force: number, e: TouchEvent) => void
+): () => void {
+  return addListener(element, (force, e) => {
+    const [x, y] = force
+    if (x > 0 && x > Math.abs(y)) {
+      cb(x, e)
+    }
+  })
+}
+
+export function addSwipeUpListener(
+  element: HTMLElement,
+  cb: (_force: number, e: TouchEvent) => void
+): () => void {
+  return addListener(element, (force, e) => {
+    const [x, y] = force
+    if (y < 0 && -y > Math.abs(x)) {
+      cb(x, e)
+    }
+  })
+}
+
+export function addSwipeDownListener(
+  element: HTMLElement,
+  cb: (_force: number, e: TouchEvent) => void
+): () => void {
+  return addListener(element, (force, e) => {
+    const [x, y] = force
+    if (y > 0 && y > Math.abs(x)) {
+      cb(x, e)
+    }
+  })
+}

package/src/field/utils/url.ts

@@ -0,0 +1,49 @@
+/**
+ * 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.
+ *
+ */
+
+// NOTE: TODO - revisit - added relative paths that begin with forward slash to
+// supported protocols.
+const SUPPORTED_URL_PROTOCOLS = new Set(['http:', 'https:', 'mailto:', 'sms:', 'tel:'])
+
+export function sanitizeUrl(url: string): string {
+  // Short circuit to allow relative paths beginning with forward slash
+  if (url?.startsWith('/')) {
+    return url
+  }
+
+  try {
+    // console.log('attempting to sanitize from utils')
+    const parsedUrl = new URL(url)
+    // eslint-disable-next-line no-script-url
+    if (!SUPPORTED_URL_PROTOCOLS.has(parsedUrl.protocol)) {
+      return 'about:blank'
+    }
+  } catch (_e) {
+    // console.error(e)
+    return 'https://'
+  }
+  return url
+}
+
+// Source: https://stackoverflow.com/a/8234912/2013580
+const urlRegExp =
+  /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)/
+export function validateUrl(url: string): boolean {
+  // TODO Fix UI for link insertion; it should never default to an invalid URL such as https://.
+  // Maybe show a dialog where they user can type the URL before inserting it.
+  return url === 'https://' || urlRegExp.test(url)
+}
+
+export function encodeRelativeUrl(url: string): string {
+  const segments = url.split('/')
+  for (let index = 0; index < segments.length; index++) {
+    const segment = segments[index]
+    segments[index] = encodeURIComponent(segment)
+  }
+  return segments.join('/')
+}

package/src/index.ts

@@ -0,0 +1,26 @@
+// Foundational Lexical types re-exported so consumers (renderers,
+// serializers) can type their inputs without taking a direct dep on
+// the underlying Lexical version.
+export type {
+  SerializedEditor,
+  SerializedEditorState,
+  SerializedElementNode,
+  SerializedLexicalNode,
+  SerializedRootNode,
+  SerializedTextNode,
+} from 'lexical'
+
+export { defaultEditorConfig } from './field/config/default'
+export { EditorField } from './field/editor-field'
+export { Nodes } from './field/nodes'
+export { lexicalEditor } from './lexical-editor'
+export { RichTextField } from './richtext-field'
+export { createEmptyEditorState } from './validate/createEmptyEditorState'
+export { hasText } from './validate/hasText'
+export type { EditorConfig, EditorSettings, EditorSettingsOverride } from './field/config/types'
+export type { DocumentRelation } from './field/nodes/document-relation'
+export type {
+  InlineImageAttributes,
+  Position as InlineImagePosition,
+  SerializedInlineImageNode,
+} from './field/nodes/inline-image-node/types'

package/src/lexical-editor.tsx

@@ -0,0 +1,56 @@
+/**
+ * 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 { RichTextEditorComponent } from '@byline/core'
+import { cloneDeep } from 'lodash-es'
+
+import { defaultEditorConfig } from './field/config/default'
+import { RichTextField } from './richtext-field'
+import type { EditorConfig } from './field/config/types'
+
+/**
+ * Returns a `RichTextEditorComponent` with editor settings baked in. Use this
+ * at the registration site in your admin config when you want to
+ * customise the editor across the whole installation; per-field overrides
+ * via `RichTextField.editorConfig` continue to take precedence at render time.
+ *
+ * The `configure` callback receives a deep clone of `defaultEditorConfig` —
+ * mutate and return, or return a new object. Mutating the input is safe
+ * because the clone is local to this call.
+ *
+ * Calling `lexicalEditor()` with no argument is equivalent to registering
+ * `RichTextField` directly.
+ *
+ * @example
+ * ```ts
+ * import { lexicalEditor } from '@byline/richtext-lexical'
+ *
+ * defineClientConfig({
+ *   fields: {
+ *     richText: {
+ *       editor: lexicalEditor((c) => {
+ *         c.settings.options.tablePlugin = false
+ *         c.settings.options.codeHighlightPlugin = false
+ *         return c
+ *       }),
+ *     },
+ *   },
+ * })
+ * ```
+ */
+export function lexicalEditor(
+  configure?: (config: EditorConfig) => EditorConfig
+): RichTextEditorComponent {
+  const baked = configure ? configure(cloneDeep(defaultEditorConfig)) : undefined
+
+  const ConfiguredEditor: RichTextEditorComponent = (props) => (
+    <RichTextField {...props} editorConfig={baked} />
+  )
+
+  return ConfiguredEditor
+}