@lexical/react/LexicalContentEditable.js.flow

This package provides Lexical components and hooks for React applications.

/**
 * 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.
 *
 * @flow strict
 */

import type { LexicalEditor } from 'lexical';
// $FlowFixMe - Not able to type this with a flow extension
import type {TRefFor} from 'CoreTypes.flow';

import * as React from 'react';

type InlineStyle = {
  [key: string]: mixed,
};

// Due to Flow limitations, we prefer fixed types over the built-in inexact HTMLElement
type HTMLDivElementDOMProps = $ReadOnly<{
  'aria-label'?: void | string,
  'aria-labeledby'?: void | string,
  'aria-activedescendant'?: void | string,
  'aria-autocomplete'?: void | string,
  'aria-describedby'?: void | string,
  'aria-errormessage'?: void | string,
  'aria-invalid'?: void | boolean,
  'aria-owns'?: void | string,
  'title'?: void | string,
  onClick?: void | ((e: SyntheticEvent<HTMLDivElement>) => mixed),
  autoCapitalize?: void | boolean,
  autoComplete?: void | boolean,
  autoCorrect?: void | boolean,
  id?: void | string,
  className?: void | string,
  'data-testid'?: void | string,
  role?: void | string,
  spellCheck?: void | boolean,
  suppressContentEditableWarning?: void | boolean,
  tabIndex?: void | number,
  style?: void | InlineStyle | CSSStyleDeclaration,
  'data-testid'?: void | string,
}>;

export type PlaceholderProps =
  | $ReadOnly<{
      'aria-placeholder'?: void,
      placeholder?: null,
    }>
  | $ReadOnly<{
      'aria-placeholder': string,
      placeholder:
        | ((isEditable: boolean) => null | React.Node)
        | null
        | React.Node,
    }>;

export type Props = $ReadOnly<{
  ...HTMLDivElementDOMProps,
  ariaActiveDescendant?: string,
  ariaAutoComplete?: string,
  ariaControls?: string,
  ariaDescribedBy?: string,
  ariaErrorMessage?: string,
  ariaExpanded?: boolean,
  ariaInvalid?: boolean,
  ariaLabel?: string,
  ariaLabelledBy?: string,
  ariaMultiline?: boolean,
  ariaOwns?: string,
  ariaRequired?: string,
  autoCapitalize?: boolean,
  ...PlaceholderProps,
}>;

declare export var ContentEditable: component(
  ref: React.RefSetter<HTMLDivElement>,
  ...Props
);