@byline/richtext-lexical 0.9.3

package/src/field/themes/lexical-editor-theme.tsx

@@ -0,0 +1,115 @@
+'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 { EditorThemeClasses } from 'lexical'
+
+export const theme: EditorThemeClasses = {
+  blockCursor: 'LexicalEditorTheme__blockCursor',
+  characterLimit: 'LexicalEditorTheme__characterLimit',
+  code: 'LexicalEditorTheme__code',
+  codeHighlight: {
+    atrule: 'LexicalEditorTheme__tokenAttr',
+    attr: 'LexicalEditorTheme__tokenAttr',
+    boolean: 'LexicalEditorTheme__tokenProperty',
+    builtin: 'LexicalEditorTheme__tokenSelector',
+    cdata: 'LexicalEditorTheme__tokenComment',
+    char: 'LexicalEditorTheme__tokenSelector',
+    class: 'LexicalEditorTheme__tokenFunction',
+    'class-name': 'LexicalEditorTheme__tokenFunction',
+    comment: 'LexicalEditorTheme__tokenComment',
+    constant: 'LexicalEditorTheme__tokenProperty',
+    deleted: 'LexicalEditorTheme__tokenProperty',
+    doctype: 'LexicalEditorTheme__tokenComment',
+    entity: 'LexicalEditorTheme__tokenOperator',
+    function: 'LexicalEditorTheme__tokenFunction',
+    important: 'LexicalEditorTheme__tokenVariable',
+    inserted: 'LexicalEditorTheme__tokenSelector',
+    keyword: 'LexicalEditorTheme__tokenAttr',
+    namespace: 'LexicalEditorTheme__tokenVariable',
+    number: 'LexicalEditorTheme__tokenProperty',
+    operator: 'LexicalEditorTheme__tokenOperator',
+    prolog: 'LexicalEditorTheme__tokenComment',
+    property: 'LexicalEditorTheme__tokenProperty',
+    punctuation: 'LexicalEditorTheme__tokenPunctuation',
+    regex: 'LexicalEditorTheme__tokenVariable',
+    selector: 'LexicalEditorTheme__tokenSelector',
+    string: 'LexicalEditorTheme__tokenSelector',
+    symbol: 'LexicalEditorTheme__tokenProperty',
+    tag: 'LexicalEditorTheme__tokenProperty',
+    url: 'LexicalEditorTheme__tokenOperator',
+    variable: 'LexicalEditorTheme__tokenVariable',
+  },
+  embedBlock: {
+    base: 'LexicalEditorTheme__embedBlock',
+    focus: 'LexicalEditorTheme__embedBlockFocus',
+  },
+  hashtag: 'LexicalEditorTheme__hashtag',
+  heading: {
+    h1: 'LexicalEditorTheme__h1',
+    h2: 'LexicalEditorTheme__h2',
+    h3: 'LexicalEditorTheme__h3',
+    h4: 'LexicalEditorTheme__h4',
+    h5: 'LexicalEditorTheme__h5',
+    h6: 'LexicalEditorTheme__h6',
+  },
+  image: 'editor-image',
+  inlineImage: 'LexicalEditor__inline-image',
+  layoutContainer: 'LexicalEditor__layoutContainer',
+  layoutItem: 'LexicalEditor__layoutItem',
+  admonition: 'LexicalEditor__admonition',
+  indent: 'LexicalEditorTheme__indent',
+  link: 'LexicalEditorTheme__link',
+  list: {
+    listitem: 'LexicalEditorTheme__listItem',
+    listitemChecked: 'LexicalEditorTheme__listItemChecked',
+    listitemUnchecked: 'LexicalEditorTheme__listItemUnchecked',
+    nested: {
+      listitem: 'LexicalEditorTheme__nestedListItem',
+    },
+    olDepth: [
+      'LexicalEditorTheme__ol1',
+      'LexicalEditorTheme__ol2',
+      'LexicalEditorTheme__ol3',
+      'LexicalEditorTheme__ol4',
+      'LexicalEditorTheme__ol5',
+    ],
+    ul: 'LexicalEditorTheme__ul',
+  },
+  ltr: 'LexicalEditorTheme__ltr',
+  mark: 'LexicalEditorTheme__mark',
+  markOverlap: 'LexicalEditorTheme__markOverlap',
+  paragraph: 'LexicalEditorTheme__paragraph',
+  quote: 'LexicalEditorTheme__quote',
+  rtl: 'LexicalEditorTheme__rtl',
+  table: 'LexicalEditorTheme__table',
+  tableAddColumns: 'LexicalEditorTheme__tableAddColumns',
+  tableAddRows: 'LexicalEditorTheme__tableAddRows',
+  tableCell: 'LexicalEditorTheme__tableCell',
+  tableCellActionButton: 'LexicalEditorTheme__tableCellActionButton',
+  tableCellActionButtonContainer: 'LexicalEditorTheme__tableCellActionButtonContainer',
+  tableCellEditing: 'LexicalEditorTheme__tableCellEditing',
+  tableCellHeader: 'LexicalEditorTheme__tableCellHeader',
+  tableCellPrimarySelected: 'LexicalEditorTheme__tableCellPrimarySelected',
+  tableCellResizer: 'LexicalEditorTheme__tableCellResizer',
+  tableCellSelected: 'LexicalEditorTheme__tableCellSelected',
+  tableCellSortedIndicator: 'LexicalEditorTheme__tableCellSortedIndicator',
+  tableResizeRuler: 'LexicalEditorTheme__tableCellResizeRuler',
+  tableSelected: 'LexicalEditorTheme__tableSelected',
+  text: {
+    bold: 'LexicalEditorTheme__textBold',
+    code: 'LexicalEditorTheme__textCode',
+    italic: 'LexicalEditorTheme__textItalic',
+    strikethrough: 'LexicalEditorTheme__textStrikethrough',
+    subscript: 'LexicalEditorTheme__textSubscript',
+    superscript: 'LexicalEditorTheme__textSuperscript',
+    underline: 'LexicalEditorTheme__textUnderline',
+    underlineStrikethrough: 'LexicalEditorTheme__textUnderlineStrikethrough',
+  },
+}

package/src/field/toolbar-extensions.tsx

@@ -0,0 +1,93 @@
+'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 type * as React from 'react'
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { COMMAND_PRIORITY_CRITICAL, type LexicalEditor, SELECTION_CHANGE_COMMAND } from 'lexical'
+
+export type ToolbarExtensionItem = {
+  id: string
+  order?: number
+  node: React.ReactNode
+}
+
+type ToolbarExtensionsContextType = {
+  items: ToolbarExtensionItem[]
+  register: (item: ToolbarExtensionItem) => () => void
+  /**
+   * The editor instance for the current selection. This matters when using nested composers.
+   */
+  editor: LexicalEditor
+  /**
+   * The root editor instance for this composer.
+   */
+  rootEditor: LexicalEditor
+}
+
+const ToolbarExtensionsContext = createContext<ToolbarExtensionsContextType | null>(null)
+
+export function ToolbarExtensionsProvider({
+  children,
+}: {
+  children: React.ReactNode
+}): React.JSX.Element {
+  const [rootEditor] = useLexicalComposerContext()
+  const [activeEditor, setActiveEditor] = useState(rootEditor)
+  const [itemsById, setItemsById] = useState<Map<string, ToolbarExtensionItem>>(() => new Map())
+
+  useEffect(() => {
+    return rootEditor.registerCommand(
+      SELECTION_CHANGE_COMMAND,
+      (_payload, newEditor) => {
+        setActiveEditor(newEditor)
+        return false
+      },
+      COMMAND_PRIORITY_CRITICAL
+    )
+  }, [rootEditor])
+
+  const register = useCallback((item: ToolbarExtensionItem) => {
+    setItemsById((prev) => {
+      const next = new Map(prev)
+      next.set(item.id, item)
+      return next
+    })
+
+    return () => {
+      setItemsById((prev) => {
+        if (!prev.has(item.id)) return prev
+        const next = new Map(prev)
+        next.delete(item.id)
+        return next
+      })
+    }
+  }, [])
+
+  const items = useMemo(() => Array.from(itemsById.values()), [itemsById])
+
+  const value = useMemo(
+    () => ({ items, register, editor: activeEditor, rootEditor }),
+    [items, register, activeEditor, rootEditor]
+  )
+
+  return (
+    <ToolbarExtensionsContext.Provider value={value}>{children}</ToolbarExtensionsContext.Provider>
+  )
+}
+
+export function useToolbarExtensions(): ToolbarExtensionsContextType {
+  const context = useContext(ToolbarExtensionsContext)
+  if (context == null) {
+    throw new Error('useToolbarExtensions must be used within a ToolbarExtensionsProvider')
+  }
+  return context
+}

package/src/field/types.ts

@@ -0,0 +1,19 @@
+/**
+ * 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 { EditorState, LexicalEditor } from 'lexical'
+
+import type { EditorSettings } from './config/types'
+
+export interface OnChangeProps {
+  onChange: (editorState: EditorState, editor: LexicalEditor, tags: Set<string>) => void
+  initialJSON: any
+  config: EditorSettings
+  value: any
+  setValue: (value: any) => void
+}

package/src/field/ui/button.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.
+ *
+ *
+ */
+
+.Button__root {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-left: 15px;
+  padding-right: 15px;
+  border: 0px;
+  background-color: #eee;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.Button__root:hover {
+  background-color: #ddd;
+}
+
+.Button__small {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 10px;
+  padding-right: 10px;
+  font-size: 13px;
+}
+
+.Button__disabled:hover {
+  background-color: #eee;
+}
+
+[data-theme="dark"] .Button__root {
+  color: #ccc;
+  background-color: #222222;
+}
+
+[data-theme="dark"] .Button__root:hover {
+  background-color: #282828;
+}

package/src/field/ui/button.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 * as React from 'react'
+
+import './button.css'
+
+import joinClasses from '../utils/joinClasses'
+
+export function Button({
+  'data-test-id': dataTestId,
+  children,
+  className,
+  onClick,
+  disabled,
+  small,
+  title,
+}: {
+  'data-test-id'?: string
+  children: React.ReactNode
+  className?: string
+  disabled?: boolean
+  onClick: () => void
+  small?: boolean
+  title?: string
+}): React.JSX.Element {
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      className={joinClasses(
+        'Button__root',
+        disabled != null && 'Button__disabled',
+        small != null && 'Button__small',
+        className
+      )}
+      onClick={onClick}
+      title={title}
+      aria-label={title}
+      {...(dataTestId != null && { 'data-test-id': dataTestId })}
+    >
+      {children}
+    </button>
+  )
+}

package/src/field/ui/checkbox.css

@@ -0,0 +1,52 @@
+[type="checkbox"]:checked,
+[type="checkbox"]:not(:checked) {
+  position: absolute;
+  left: -9999px;
+}
+
+[type="checkbox"]:checked + label,
+[type="checkbox"]:not(:checked) + label {
+  position: relative;
+  padding-right: 55px;
+  cursor: pointer;
+  line-height: 20px;
+  display: inline-block;
+  color: #666;
+}
+
+[type="checkbox"]:checked + label:before,
+[type="checkbox"]:not(:checked) + label:before {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 18px;
+  height: 18px;
+  border: 1px solid #666;
+  background: #fff;
+}
+
+[type="checkbox"]:checked + label:after,
+[type="checkbox"]:not(:checked) + label:after {
+  content: "";
+  width: 8px;
+  height: 8px;
+  background: #222222;
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+}
+
+[type="checkbox"]:not(:checked) + label:after {
+  opacity: 0;
+  -webkit-transform: scale(0);
+  transform: scale(0);
+}
+
+[type="checkbox"]:checked + label:after {
+  opacity: 1;
+  -webkit-transform: scale(1);
+  transform: scale(1);
+}

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

@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+.color-picker-wrapper {
+  padding: 20px;
+}
+
+.color-picker-basic-color {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+}
+
+.color-picker-basic-color button {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  height: 16px;
+  width: 16px;
+  cursor: pointer;
+  list-style-type: none;
+}
+
+.color-picker-basic-color button.active {
+  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.3);
+}
+
+.color-picker-saturation {
+  width: 100%;
+  position: relative;
+  margin-top: 15px;
+  height: 150px;
+  background-image:
+    linear-gradient(transparent, black), linear-gradient(to right, white, transparent);
+  user-select: none;
+}
+.color-picker-saturation_cursor {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  box-shadow: 0 0 15px #00000026;
+  box-sizing: border-box;
+  transform: translate(-10px, -10px);
+}
+.color-picker-hue {
+  width: 100%;
+  position: relative;
+  margin-top: 15px;
+  height: 12px;
+  background-image: linear-gradient(
+    to right,
+    rgb(255, 0, 0),
+    rgb(255, 255, 0),
+    rgb(0, 255, 0),
+    rgb(0, 255, 255),
+    rgb(0, 0, 255),
+    rgb(255, 0, 255),
+    rgb(255, 0, 0)
+  );
+  user-select: none;
+  border-radius: 12px;
+}
+
+.color-picker-hue_cursor {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  box-shadow: #0003 0 0 0 0.5px;
+  box-sizing: border-box;
+  transform: translate(-10px, -4px);
+}
+
+.color-picker-color {
+  border: 1px solid #ccc;
+  margin-top: 15px;
+  width: 100%;
+  height: 20px;
+}