lexical-char-count.ts

import { createHeadlessEditor } from '@lexical/headless'
import {
  EditorConfig,
  getEnabledNodes,
  sanitizeEditorConfig,
} from '@payloadcms/richtext-lexical'
import { $getRoot, SerializedRootNode } from 'lexical'
import { Validate } from 'payload/types'

import { simple } from '../config/lexical'

type LexicalWordCountProps = {
  length?: number
  config?: EditorConfig
}

const defaultProps: LexicalWordCountProps = {
  length: 160,
  config: simple,
}

/**
 * Cap lexical fields at a specific char count
 * @param {number} props.length - max chars (120 default)
 * @param {EditorConfig} props.config - specify an editor config
 * @returns 
 */
export default function lexicalCharCount({
  length = defaultProps.length,
  config = defaultProps.config,
}: LexicalWordCountProps = defaultProps): Validate<{
  root: SerializedRootNode
}> {
  return async (state): Promise<string | true> => {
    if (!state) {
      return true
    }

    try {
      const editor = createHeadlessEditor({
        // https://payloadcms.com/docs/rich-text/lexical#headless-editor
        nodes: getEnabledNodes({
          editorConfig: sanitizeEditorConfig(config),
        }),
        onError: (e) => {
          throw e
        },
      })

      editor.setEditorState(editor.parseEditorState(state))
      const textContent =
        editor.getEditorState().read(() => {
          return $getRoot().getTextContent()
        }) || ''

      const charCount = textContent.length

      if (charCount > length) {
        return `Current character count (${charCount}) is over the limit (${length}).`
      }

      return true
    } catch (error) {
      console.error(`[lexicalCharCount] uncaught validation error`)
      console.error(error)
      return true
    }
  }
}