@byline/richtext-lexical 0.9.3

package/src/field/ui/color-picker.tsx

@@ -0,0 +1,395 @@
+'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 './color-picker.css'
+
+import type * as React from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+import TextInput from './text-input'
+
+interface ColorPickerProps {
+  color: string
+  onChange?: (color: string) => void
+}
+
+const basicColors = [
+  '#d0021b',
+  '#f5a623',
+  '#f8e71c',
+  '#8b572a',
+  '#7ed321',
+  '#417505',
+  '#bd10e0',
+  '#9013fe',
+  '#4a90e2',
+  '#50e3c2',
+  '#b8e986',
+  '#000000',
+  '#4a4a4a',
+  '#9b9b9b',
+  '#ffffff',
+]
+
+const WIDTH = 214
+const HEIGHT = 150
+
+export default function ColorPicker({
+  color,
+  onChange,
+}: Readonly<ColorPickerProps>): React.JSX.Element {
+  const [selfColor, setSelfColor] = useState(transformColor('hex', color))
+  const [inputColor, setInputColor] = useState(color)
+  const innerDivRef = useRef(null)
+
+  const saturationPosition = useMemo(
+    () => ({
+      x: (selfColor.hsv.s / 100) * WIDTH,
+      y: ((100 - selfColor.hsv.v) / 100) * HEIGHT,
+    }),
+    [selfColor.hsv.s, selfColor.hsv.v]
+  )
+
+  const huePosition = useMemo(
+    () => ({
+      x: (selfColor.hsv.h / 360) * WIDTH,
+    }),
+    [selfColor.hsv]
+  )
+
+  const onSetHex = (hex: string): void => {
+    setInputColor(hex)
+    if (/^#[0-9A-Fa-f]{6}$/i.test(hex)) {
+      const newColor = transformColor('hex', hex)
+      setSelfColor(newColor)
+    }
+  }
+
+  const onMoveSaturation = ({ x, y }: Position): void => {
+    const newHsv = {
+      ...selfColor.hsv,
+      s: (x / WIDTH) * 100,
+      v: 100 - (y / HEIGHT) * 100,
+    }
+    const newColor = transformColor('hsv', newHsv)
+    setSelfColor(newColor)
+    setInputColor(newColor.hex)
+  }
+
+  const onMoveHue = ({ x }: Position): void => {
+    const newHsv = { ...selfColor.hsv, h: (x / WIDTH) * 360 }
+    const newColor = transformColor('hsv', newHsv)
+
+    setSelfColor(newColor)
+    setInputColor(newColor.hex)
+  }
+
+  useEffect(() => {
+    // Check if the dropdown is actually active
+    if (innerDivRef.current !== null && onChange != null) {
+      onChange(selfColor.hex)
+      setInputColor(selfColor.hex)
+    }
+  }, [selfColor, onChange])
+
+  useEffect(() => {
+    if (color === undefined) return
+    const newColor = transformColor('hex', color)
+    setSelfColor(newColor)
+    setInputColor(newColor.hex)
+  }, [color])
+
+  return (
+    <div className="color-picker-wrapper" style={{ width: WIDTH }} ref={innerDivRef}>
+      <TextInput label="Hex" onChange={onSetHex} value={inputColor} />
+      <div className="color-picker-basic-color">
+        {basicColors.map((basicColor) => (
+          <button
+            type="button"
+            className={basicColor === selfColor.hex ? ' active' : ''}
+            key={basicColor}
+            style={{ backgroundColor: basicColor }}
+            onClick={() => {
+              setInputColor(basicColor)
+              setSelfColor(transformColor('hex', basicColor))
+            }}
+          />
+        ))}
+      </div>
+      <MoveWrapper
+        className="color-picker-saturation"
+        style={{ backgroundColor: `hsl(${selfColor.hsv.h}, 100%, 50%)` }}
+        onChange={onMoveSaturation}
+        ariaLabel="Saturation and value"
+      >
+        <div
+          className="color-picker-saturation_cursor"
+          style={{
+            backgroundColor: selfColor.hex,
+            left: saturationPosition.x,
+            top: saturationPosition.y,
+          }}
+        />
+      </MoveWrapper>
+      <MoveWrapper className="color-picker-hue" onChange={onMoveHue} ariaLabel="Hue">
+        <div
+          className="color-picker-hue_cursor"
+          style={{
+            backgroundColor: `hsl(${selfColor.hsv.h}, 100%, 50%)`,
+            left: huePosition.x,
+          }}
+        />
+      </MoveWrapper>
+      <div className="color-picker-color" style={{ backgroundColor: selfColor.hex }} />
+    </div>
+  )
+}
+
+export interface Position {
+  x: number
+  y: number
+}
+
+interface MoveWrapperProps {
+  className?: string
+  style?: React.CSSProperties
+  onChange: (position: Position) => void
+  children: React.JSX.Element
+  ariaLabel?: string
+}
+
+function MoveWrapper({
+  className,
+  style,
+  onChange,
+  children,
+  ariaLabel,
+}: MoveWrapperProps): React.JSX.Element {
+  const divRef = useRef<HTMLDivElement>(null)
+  const lastPositionRef = useRef<Position>({ x: WIDTH / 2, y: HEIGHT / 2 })
+
+  const applyPosition = (position: Position): void => {
+    lastPositionRef.current = position
+    onChange(position)
+  }
+
+  const move = (e: React.MouseEvent | MouseEvent): void => {
+    if (divRef.current != null) {
+      const { current: div } = divRef
+      const { width, height, left, top } = div.getBoundingClientRect()
+
+      const x = clamp(e.clientX - left, width, 0)
+      const y = clamp(e.clientY - top, height, 0)
+
+      applyPosition({ x, y })
+    }
+  }
+
+  const onMouseDown = (e: React.MouseEvent): void => {
+    if (e.button !== 0) return
+
+    move(e)
+
+    const onMouseMove = (_e: MouseEvent): void => {
+      move(_e)
+    }
+
+    const onMouseUp = (_e: MouseEvent): void => {
+      document.removeEventListener('mousemove', onMouseMove, false)
+      document.removeEventListener('mouseup', onMouseUp, false)
+
+      move(_e)
+    }
+
+    document.addEventListener('mousemove', onMouseMove, false)
+    document.addEventListener('mouseup', onMouseUp, false)
+  }
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>): void => {
+    if (divRef.current == null) return
+
+    const { width, height } = divRef.current.getBoundingClientRect()
+    const stepX = Math.max(1, width / 50)
+    const stepY = Math.max(1, height / 50)
+
+    const current = lastPositionRef.current
+    let next: Position | null = null
+
+    switch (e.key) {
+      case 'ArrowLeft':
+        next = { x: clamp(current.x - stepX, width, 0), y: current.y }
+        break
+      case 'ArrowRight':
+        next = { x: clamp(current.x + stepX, width, 0), y: current.y }
+        break
+      case 'ArrowUp':
+        next = { x: current.x, y: clamp(current.y - stepY, height, 0) }
+        break
+      case 'ArrowDown':
+        next = { x: current.x, y: clamp(current.y + stepY, height, 0) }
+        break
+      case 'Home':
+        next = { x: 0, y: 0 }
+        break
+      case 'End':
+        next = { x: width, y: height }
+        break
+      default:
+        break
+    }
+
+    if (next != null) {
+      e.preventDefault()
+      applyPosition(next)
+    }
+  }
+
+  return (
+    <div
+      ref={divRef}
+      className={className}
+      style={style}
+      onMouseDown={onMouseDown}
+      role="button"
+      tabIndex={0}
+      aria-label={ariaLabel}
+      onKeyDown={onKeyDown}
+    >
+      {children}
+    </div>
+  )
+}
+
+function clamp(value: number, max: number, min: number): number {
+  return value > max ? max : value < min ? min : value
+}
+
+interface RGB {
+  b: number
+  g: number
+  r: number
+}
+interface HSV {
+  h: number
+  s: number
+  v: number
+}
+interface Color {
+  hex: string
+  hsv: HSV
+  rgb: RGB
+}
+
+export function toHex(value: string): string {
+  if (!value.startsWith('#')) {
+    const ctx = document.createElement('canvas').getContext('2d')
+
+    if (ctx == null) {
+      throw new Error('2d context not supported or canvas already initialized')
+    }
+
+    ctx.fillStyle = value
+
+    return ctx.fillStyle
+  } else if (value.length === 4 || value.length === 5) {
+    value = value
+      .split('')
+      .map((v, i) => (!Number.isNaN(i) ? v + v : '#'))
+      .join('')
+
+    return value
+  } else if (value.length === 7 || value.length === 9) {
+    return value
+  }
+
+  return '#000000'
+}
+
+function hex2rgb(hex: string): RGB {
+  const rbgArr = (
+    hex
+      .replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (_m, r, g, b) => `#${r}${r}${g}${g}${b}${b}`)
+      .substring(1)
+      .match(/.{2}/g) ?? []
+  ).map((x: any) => parseInt(x, 16))
+
+  return {
+    b: rbgArr[2],
+    g: rbgArr[1],
+    r: rbgArr[0],
+  }
+}
+
+function rgb2hsv({ r, g, b }: RGB): HSV {
+  r /= 255
+  g /= 255
+  b /= 255
+
+  const max = Math.max(r, g, b)
+  const d = max - Math.min(r, g, b)
+
+  const h = !Number.isNaN(d)
+    ? (max === r ? (g - b) / d + (g < b ? 6 : 0) : max === g ? 2 + (b - r) / d : 4 + (r - g) / d) *
+      60
+    : 0
+  const s = !Number.isNaN(max) ? (d / max) * 100 : 0
+  const v = max * 100
+
+  return { h, s, v }
+}
+
+function hsv2rgb({ h, s, v }: HSV): RGB {
+  s /= 100
+  v /= 100
+
+  const i = ~~(h / 60)
+  const f = h / 60 - i
+  const p = v * (1 - s)
+  const q = v * (1 - s * f)
+  const t = v * (1 - s * (1 - f))
+  const index = i % 6
+
+  const r = Math.round([v, q, p, p, t, v][index] * 255)
+  const g = Math.round([t, v, v, q, p, p][index] * 255)
+  const b = Math.round([p, p, t, v, v, q][index] * 255)
+
+  return { b, g, r }
+}
+
+function rgb2hex({ b, g, r }: RGB): string {
+  return `#${[r, g, b].map((x) => x.toString(16).padStart(2, '0')).join('')}`
+}
+
+function transformColor<M extends keyof Color, C extends Color[M]>(format: M, color: C): Color {
+  let hex: Color['hex'] = toHex('#121212')
+  let rgb: Color['rgb'] = hex2rgb(hex)
+  let hsv: Color['hsv'] = rgb2hsv(rgb)
+
+  if (format === 'hex') {
+    const value = color as Color['hex']
+
+    hex = toHex(value)
+    rgb = hex2rgb(hex)
+    hsv = rgb2hsv(rgb)
+  } else if (format === 'rgb') {
+    const value = color as Color['rgb']
+
+    rgb = value
+    hex = rgb2hex(rgb)
+    hsv = rgb2hsv(rgb)
+  } else if (format === 'hsv') {
+    const value = color as Color['hsv']
+
+    hsv = value
+    rgb = hsv2rgb(hsv)
+    hex = rgb2hex(rgb)
+  }
+
+  return { hex, hsv, rgb }
+}

package/src/field/ui/dialog.css

@@ -0,0 +1,17 @@
+.DialogActions {
+  display: flex;
+  flex-direction: row;
+  justify-content: right;
+  margin-top: 20px;
+}
+
+.DialogButtonsList {
+  display: flex;
+  flex-direction: column;
+  justify-content: right;
+  margin-top: 20px;
+}
+
+.DialogButtonsList button {
+  margin-bottom: 20px;
+}

package/src/field/ui/dialog.tsx

@@ -0,0 +1,29 @@
+'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 type * as React from 'react'
+
+import './dialog.css'
+
+type Props = Readonly<{
+  'data-test-id'?: string
+  children: React.ReactNode
+}>
+
+export function DialogButtonsList({ children }: Props): React.JSX.Element {
+  return <div className="DialogButtonsList">{children}</div>
+}
+
+export function DialogActions({ 'data-test-id': dataTestId, children }: Props): React.JSX.Element {
+  return (
+    <div className="DialogActions" data-test-id={dataTestId}>
+      {children}
+    </div>
+  )
+}

package/src/field/ui/dropdown.tsx

@@ -0,0 +1,217 @@
+'use client'
+
+import * as React from 'react'
+/**
+ * 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 ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+import { createPortal } from 'react-dom'
+
+interface DropDownContextType {
+  registerItem: (ref: React.RefObject<HTMLButtonElement>) => void
+}
+
+const DropDownContext = React.createContext<DropDownContextType | null>(null)
+
+export function DropDownItem({
+  children,
+  className,
+  onClick,
+  title,
+}: {
+  children: React.ReactNode
+  className: string
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void
+  title?: string
+}): React.JSX.Element {
+  const ref = useRef<HTMLButtonElement>(null)
+
+  const dropDownContext = React.useContext(DropDownContext)
+
+  if (dropDownContext === null) {
+    throw new Error('DropDownItem must be used within a DropDown')
+  }
+
+  const { registerItem } = dropDownContext
+
+  useEffect(() => {
+    if (ref?.current != null) {
+      // @ts-expect-error: TODO
+      registerItem(ref)
+    }
+  }, [registerItem])
+
+  return (
+    <button className={className} onClick={onClick} ref={ref} title={title} type="button">
+      {children}
+    </button>
+  )
+}
+
+function DropDownItems({
+  children,
+  dropDownRef,
+  onClose,
+}: {
+  children: React.ReactNode
+  dropDownRef: React.Ref<HTMLDivElement>
+  onClose: () => void
+}): React.JSX.Element {
+  const [items, setItems] = useState<Array<React.RefObject<HTMLButtonElement>>>()
+  const [highlightedItem, setHighlightedItem] = useState<React.RefObject<HTMLButtonElement>>()
+
+  const registerItem = useCallback((itemRef: React.RefObject<HTMLButtonElement>) => {
+    setItems((prev) => (prev != null ? [...prev, itemRef] : [itemRef]))
+  }, [])
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
+    if (items == null) return
+
+    const key = event.key
+
+    if (['Escape', 'ArrowUp', 'ArrowDown', 'Tab'].includes(key)) {
+      event.preventDefault()
+    }
+
+    if (key === 'Escape' || key === 'Tab') {
+      onClose()
+    } else if (key === 'ArrowUp') {
+      setHighlightedItem((prev) => {
+        if (prev == null) return items[0]
+        const index = items.indexOf(prev) - 1
+        return items[index === -1 ? items.length - 1 : index]
+      })
+    } else if (key === 'ArrowDown') {
+      setHighlightedItem((prev) => {
+        if (prev == null) return items[0]
+        return items[items.indexOf(prev) + 1]
+      })
+    }
+  }
+
+  const contextValue = useMemo(
+    () => ({
+      registerItem,
+    }),
+    [registerItem]
+  )
+
+  useEffect(() => {
+    if (items != null && highlightedItem == null) {
+      setHighlightedItem(items[0])
+    }
+
+    if (highlightedItem?.current != null) {
+      highlightedItem.current.focus()
+    }
+  }, [items, highlightedItem])
+
+  return (
+    <DropDownContext.Provider value={contextValue}>
+      <div
+        className="dropdown"
+        ref={dropDownRef}
+        onKeyDown={handleKeyDown}
+        role="menu"
+        tabIndex={-1}
+      >
+        {children}
+      </div>
+    </DropDownContext.Provider>
+  )
+}
+
+export function DropDown({
+  disabled = false,
+  buttonLabel,
+  buttonAriaLabel,
+  buttonClassName,
+  buttonIconClassName,
+  children,
+  stopCloseOnClickSelf,
+}: {
+  disabled?: boolean
+  buttonAriaLabel?: string
+  buttonClassName: string
+  buttonIconClassName?: string
+  buttonLabel?: string
+  children: ReactNode
+  stopCloseOnClickSelf?: boolean
+}): React.JSX.Element {
+  const dropDownRef = useRef<HTMLDivElement>(null)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const [showDropDown, setShowDropDown] = useState(false)
+
+  const handleClose = (): void => {
+    setShowDropDown(false)
+    if (buttonRef?.current != null) {
+      buttonRef.current.focus()
+    }
+  }
+
+  useEffect(() => {
+    const button = buttonRef.current
+    const dropDown = dropDownRef.current
+
+    if (showDropDown && button !== null && dropDown !== null) {
+      const { top, left } = button.getBoundingClientRect()
+      dropDown.style.top = `${top + 40}px`
+      dropDown.style.left = `${Math.min(left, window.innerWidth - dropDown.offsetWidth - 20)}px`
+    }
+  }, [showDropDown])
+
+  useEffect(() => {
+    const button = buttonRef.current
+
+    if (button !== null && showDropDown) {
+      const handle = (event: MouseEvent): void => {
+        const target = event.target
+        if (stopCloseOnClickSelf != null) {
+          if (dropDownRef?.current?.contains(target as Node)) {
+            return
+          }
+        }
+        if (!button.contains(target as Node)) {
+          setShowDropDown(false)
+        }
+      }
+      document.addEventListener('click', handle)
+
+      return () => {
+        document.removeEventListener('click', handle)
+      }
+    }
+  }, [showDropDown, stopCloseOnClickSelf])
+
+  return (
+    <>
+      <button
+        type="button"
+        disabled={disabled}
+        aria-label={buttonAriaLabel ?? buttonLabel}
+        className={buttonClassName}
+        onClick={() => {
+          setShowDropDown(!showDropDown)
+        }}
+        ref={buttonRef}
+      >
+        {buttonIconClassName != null && <span className={buttonIconClassName} />}
+        {buttonLabel != null && <span className="text dropdown-button-text">{buttonLabel}</span>}
+        <i className="chevron-down" />
+      </button>
+
+      {showDropDown &&
+        createPortal(
+          <DropDownItems dropDownRef={dropDownRef} onClose={handleClose}>
+            {children}
+          </DropDownItems>,
+          document.body
+        )}
+    </>
+  )
+}

package/src/field/ui/file-input.tsx

@@ -0,0 +1,44 @@
+/**
+ * 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 * as React from 'react'
+
+import './input.css'
+
+type Props = Readonly<{
+  'data-test-id'?: string
+  accept?: string
+  label: string
+  onChange: (files: FileList | null) => void
+}>
+
+export default function FileInput({
+  accept,
+  label,
+  onChange,
+  'data-test-id': dataTestId,
+}: Props): React.JSX.Element {
+  const inputId = React.useId()
+
+  return (
+    <div className="Input__wrapper">
+      <label className="Input__label" htmlFor={inputId}>
+        {label}
+      </label>
+      <input
+        id={inputId}
+        type="file"
+        accept={accept}
+        className="Input__input"
+        onChange={(e) => {
+          onChange(e.target.files)
+        }}
+        data-test-id={dataTestId}
+      />
+    </div>
+  )
+}