@byline/richtext-lexical 0.9.3

package/src/field/ui/input.css

@@ -0,0 +1,32 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+.Input__wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.Input__label {
+  display: flex;
+  flex: 1;
+  color: #666;
+}
+.Input__input {
+  display: flex;
+  flex: 2;
+  border: 1px solid #999;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  padding-left: 10px;
+  padding-right: 10px;
+  font-size: 16px;
+  border-radius: 5px;
+  min-width: 0;
+}

package/src/field/ui/modal.css

@@ -0,0 +1,84 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+.Modal__overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  flex-direction: column;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  background-color: rgba(40, 40, 40, 0.6);
+  flex-grow: 0px;
+  flex-shrink: 1px;
+  z-index: 100;
+}
+
+.Modal__modal {
+  padding: 20px;
+  min-height: 100px;
+  min-width: 300px;
+  display: flex;
+  flex-grow: 0px;
+  background-color: #fff;
+  flex-direction: column;
+  position: relative;
+  box-shadow: 0 0 20px 0 #444;
+  border-radius: 10px;
+}
+
+.Modal__title {
+  color: #444;
+  margin: 0px;
+  padding-bottom: 10px;
+  font-size: 1.4rem;
+  border-bottom: 1px solid #ccc;
+}
+
+.Modal__closeButton {
+  border: 0px;
+  position: absolute;
+  right: 20px;
+  border-radius: 20px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  cursor: pointer;
+  background-color: #eee;
+}
+
+.Modal__closeButton:hover {
+  background-color: #ddd;
+}
+
+.Modal__content {
+  padding-top: 20px;
+}
+
+[data-theme="dark"] .Modal__modal {
+  background-color: #111111;
+}
+
+[data-theme="dark"] .Modal__closeButton {
+  background-color: #222222;
+}
+
+[data-theme="dark"] .Modal__closeButton:hover {
+  background-color: #282828;
+}
+
+[data-theme="dark"] .Modal__title {
+  color: #ccc;
+}

package/src/field/ui/modal.tsx

@@ -0,0 +1,106 @@
+'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 { type ReactNode, useEffect, useRef } from 'react'
+
+import { createPortal } from 'react-dom'
+
+import './modal.css'
+
+function PortalImpl({
+  onClose,
+  children,
+  title,
+  closeOnClickOutside,
+}: {
+  children: ReactNode
+  closeOnClickOutside: boolean
+  onClose: () => void
+  title: string
+}): React.JSX.Element {
+  const modalRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (modalRef.current !== null) {
+      modalRef.current.focus()
+    }
+  }, [])
+
+  useEffect(() => {
+    let modalOverlayElement: HTMLElement | null = null
+    const handler = (event: KeyboardEvent): void => {
+      if (event.keyCode === 27) {
+        onClose()
+      }
+    }
+    const clickOutsideHandler = (event: MouseEvent): void => {
+      const target = event.target
+      if (
+        modalRef.current !== null &&
+        !modalRef.current.contains(target as Node) &&
+        closeOnClickOutside
+      ) {
+        onClose()
+      }
+    }
+    const modelElement = modalRef.current
+    if (modelElement !== null) {
+      modalOverlayElement = modelElement.parentElement
+      if (modalOverlayElement !== null) {
+        modalOverlayElement.addEventListener('click', clickOutsideHandler)
+      }
+    }
+
+    window.addEventListener('keydown', handler)
+
+    return () => {
+      window.removeEventListener('keydown', handler)
+      if (modalOverlayElement !== null) {
+        modalOverlayElement?.removeEventListener('click', clickOutsideHandler)
+      }
+    }
+  }, [closeOnClickOutside, onClose])
+
+  return (
+    <div className="Modal__overlay" role="dialog">
+      <div className="Modal__modal" tabIndex={-1} ref={modalRef}>
+        <h2 className="Modal__title">{title}</h2>
+        <button
+          className="Modal__closeButton"
+          aria-label="Close modal"
+          type="button"
+          onClick={onClose}
+        >
+          X
+        </button>
+        <div className="Modal__content">{children}</div>
+      </div>
+    </div>
+  )
+}
+
+export default function Modal({
+  onClose,
+  children,
+  title,
+  closeOnClickOutside = false,
+}: {
+  children: ReactNode
+  closeOnClickOutside?: boolean
+  onClose: () => void
+  title: string
+}): React.JSX.Element {
+  return createPortal(
+    <PortalImpl onClose={onClose} title={title} closeOnClickOutside={closeOnClickOutside}>
+      {children}
+    </PortalImpl>,
+    document.body
+  )
+}

package/src/field/ui/placeholder-inline.tsx

@@ -0,0 +1,28 @@
+'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 cx from 'classnames'
+
+import './placeholder.css'
+
+// NOTE: we disable all config checks and draggable blocks
+// as in placeholder.tsx - because this version will
+// appear inside caption areas for images.
+export default function PlaceholderInline({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string
+}): React.JSX.Element {
+  const classes = cx('Placeholder__root', className)
+  return <span className={classes}>{children}</span>
+}

package/src/field/ui/placeholder.css

@@ -0,0 +1,33 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+.Placeholder__root {
+  font-size: 15px;
+  color: #999;
+  overflow: hidden;
+  position: absolute;
+  text-overflow: ellipsis;
+  top: 8px;
+  left: 2px;
+  right: 0;
+  user-select: none;
+  white-space: nowrap;
+  display: inline-block;
+  pointer-events: none;
+}
+
+.Placeholder__with_draggable_blocks {
+  left: 22px;
+}
+
+@media (max-width: 1025px) {
+  .ContentEditable__root {
+    left: 2px;
+  }
+}

package/src/field/ui/placeholder.tsx

@@ -0,0 +1,32 @@
+'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 cx from 'classnames'
+
+import './placeholder.css'
+
+import { useEditorConfig } from '../config/editor-config-context'
+
+export function Placeholder({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string
+}): React.JSX.Element {
+  const { config } = useEditorConfig()
+  // const classes = cx('Placeholder__root', className, {
+  //   Placeholder__with_draggable_blocks: config.options.draggableBlocks,
+  // })
+  const classes = cx('Placeholder__root', className)
+
+  return <div className={classes}>{children}</div>
+}

package/src/field/ui/select.css

@@ -0,0 +1,34 @@
+select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-color: transparent;
+  border: none;
+  padding: 0 1em 0 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  cursor: inherit;
+  line-height: inherit;
+
+  z-index: 1;
+  outline: none;
+}
+
+:root {
+  --select-border: #393939;
+  --select-focus: #101484;
+  --select-arrow: var(--select-border);
+}
+
+.select {
+  min-width: 160px;
+  max-width: 290px;
+  border: 1px solid var(--select-border);
+  border-radius: 0.25em;
+  padding: 0.25em 0.5em;
+  font-size: 1rem;
+  cursor: pointer;
+  line-height: 1.4;
+  background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
+}

package/src/field/ui/select.tsx

@@ -0,0 +1,38 @@
+'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 * as React from 'react'
+
+import './select.css'
+
+type SelectIntrinsicProps = React.SelectHTMLAttributes<HTMLSelectElement>
+interface SelectProps extends SelectIntrinsicProps {
+  label: string
+}
+
+export default function Select({
+  children,
+  label,
+  className,
+  ...other
+}: SelectProps): React.JSX.Element {
+  const generatedId = React.useId()
+  const id = other.id ?? generatedId
+
+  return (
+    <div className="Input__wrapper">
+      <label htmlFor={id} style={{ marginTop: '-1em' }} className="Input__label">
+        {label}
+      </label>
+      <select {...other} id={id} className={className ?? 'select'}>
+        {children}
+      </select>
+    </div>
+  )
+}

package/src/field/ui/switch.tsx

@@ -0,0 +1,33 @@
+'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 { useMemo } from 'react'
+
+export default function Switch({
+  checked,
+  onClick,
+  text,
+  id,
+}: Readonly<{
+  checked: boolean
+  id?: string
+  onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+  text: string
+}>): React.JSX.Element {
+  const buttonId = useMemo(() => `id_ ${Math.floor(Math.random() * 10000)}`, [])
+  return (
+    <div className="switch" id={id}>
+      <label htmlFor={buttonId}>{text}</label>
+      <button type="button" role="switch" aria-checked={checked} id={buttonId} onClick={onClick}>
+        <span />
+      </button>
+    </div>
+  )
+}

package/src/field/ui/text-area.css

@@ -0,0 +1,45 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+.TextArea__wrapper {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 10px;
+}
+
+.TextArea__label {
+  display: flex;
+  flex: 1;
+  color: #666;
+  margin-bottom: 4px;
+}
+
+.TextArea__input {
+  border: 1px solid #999;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  padding-left: 10px;
+  padding-right: 10px;
+  font-size: 16px;
+  border-radius: 1px;
+  min-width: 0;
+}
+
+.dark,
+[data-theme="dark"] {
+  .TextArea__label {
+    color: #ccc;
+  }
+
+  .TextArea__input {
+    border: 1px solid #666;
+    background-color: #1c1c1c;
+    color: #eee;
+  }
+}

package/src/field/ui/text-area.tsx

@@ -0,0 +1,50 @@
+'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 HTMLInputTypeAttribute, type JSX, useId } from 'react'
+
+import './text-area.css'
+
+type Props = Readonly<{
+  'data-test-id'?: string
+  label: string
+  rows?: number
+  onChange: (val: string) => void
+  placeholder?: string
+  value: string
+  type?: HTMLInputTypeAttribute
+}>
+
+export function TextArea({
+  label,
+  onChange,
+  rows = 4,
+  placeholder = '',
+  'data-test-id': dataTestId,
+}: Props): JSX.Element {
+  const inputId = useId()
+
+  return (
+    <div className="TextArea__wrapper">
+      <label className="TextArea__label" htmlFor={inputId}>
+        {label}
+      </label>
+      <textarea
+        rows={rows}
+        id={inputId}
+        className="TextArea__input"
+        placeholder={placeholder}
+        onChange={(e) => {
+          onChange(e.target.value)
+        }}
+        data-test-id={dataTestId}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,51 @@
+'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 HTMLInputTypeAttribute, type JSX, useId } from 'react'
+
+import './input.css'
+
+type Props = Readonly<{
+  'data-test-id'?: string
+  label: string
+  onChange: (val: string) => void
+  placeholder?: string
+  value: string
+  type?: HTMLInputTypeAttribute
+}>
+
+export default function TextInput({
+  label,
+  value,
+  onChange,
+  placeholder = '',
+  'data-test-id': dataTestId,
+  type = 'text',
+}: Props): JSX.Element {
+  const inputId = useId()
+
+  return (
+    <div className="Input__wrapper">
+      <label className="Input__label" htmlFor={inputId}>
+        {label}
+      </label>
+      <input
+        id={inputId}
+        type={type}
+        className="Input__input"
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => {
+          onChange(e.target.value)
+        }}
+        data-test-id={dataTestId}
+      />
+    </div>
+  )
+}

package/src/field/utils/cloneDeep.ts

@@ -0,0 +1,57 @@
+export function cloneDeep<T>(object: T, cache = new WeakMap<any, any>()): T {
+  // @ts-expect-error: ignore
+  if (object === null) return null
+
+  if (cache.has(object)) {
+    return cache.get(object)
+  }
+
+  // Handle Date
+  if (object instanceof Date) {
+    return new Date(object.getTime()) as unknown as T
+  }
+
+  // Handle RegExp
+  if (object instanceof RegExp) {
+    return new RegExp(object.source, object.flags) as unknown as T
+  }
+
+  // Handle Map
+  if (object instanceof Map) {
+    const clonedMap = new Map()
+    cache.set(object, clonedMap)
+    for (const [key, value] of object.entries()) {
+      clonedMap.set(key, cloneDeep(value, cache))
+    }
+    return clonedMap as unknown as T
+  }
+
+  // Handle Set
+  if (object instanceof Set) {
+    const clonedSet = new Set()
+    cache.set(object, clonedSet)
+    for (const value of object.values()) {
+      clonedSet.add(cloneDeep(value, cache))
+    }
+    return clonedSet as unknown as T
+  }
+
+  // Handle Array and Object
+  if (typeof object === 'object' && object !== null) {
+    const clonedObject: any = Array.isArray(object)
+      ? []
+      : Object.create(Object.getPrototypeOf(object))
+    cache.set(object, clonedObject)
+
+    for (const key in object) {
+      if (Object.hasOwn(object, key) || Object.getOwnPropertySymbols(object).includes(key as any)) {
+        clonedObject[key] = cloneDeep(object[key], cache)
+      }
+    }
+
+    return clonedObject as T
+  }
+
+  // Handle all other cases
+  return object
+}

package/src/field/utils/deepEqual.ts

@@ -0,0 +1,54 @@
+function keysWithoutUndefinedValues(obj: any): string[] {
+  return Object.keys(obj).filter((key) => obj[key] !== undefined)
+}
+
+export function deepEqual(obj1: any, obj2: any, nested = 0, parentKey = 'top >'): boolean {
+  if (obj1 === obj2) {
+    // it's just the same object. No need to compare.
+    return true
+  }
+
+  if (isPrimitive(obj1) && isPrimitive(obj2)) {
+    // compare primitives
+    return obj1 === obj2
+  }
+
+  const keys1 = keysWithoutUndefinedValues(obj1)
+  const keys2 = keysWithoutUndefinedValues(obj2)
+
+  if (keys1.length !== keys2.length) {
+    /* console.warn(
+      nested +
+        ' PK: ' +
+        parentKey +
+        ' Not equal because of length: ' +
+        keys1.length +
+        ' != ' +
+        keys2.length,
+      'Key1: ' + keys1,
+      'Key2: ' + keys2,
+      'Obj1: ' + obj1,
+      'Obj2: ' + obj2,
+    ); */
+    return false
+  }
+
+  // compare objects with same number of keys
+  for (const key in obj1) {
+    if (!(key in obj2) && obj1[key] !== undefined) {
+      // console.warn('Not equal because of: ' + key + ' not in obj2');
+      return false // other object doesn't have this prop
+    }
+    if (key in obj2 && !deepEqual(obj1[key], obj2[key], nested + 1, `${parentKey} ${key}`)) {
+      // console.warn('Not equal because of: ' + key + ' not equal');
+      return false
+    }
+  }
+
+  return true
+}
+
+// check if value is primitive
+function isPrimitive(obj: any): boolean {
+  return obj !== Object(obj)
+}