Variable default

Type Declaration

• DocumentModalWorkflowSource: typeof DocumentModalWorkflowSource

• DraftailRichTextArea: typeof DraftailRichTextArea

• DraftUtils: {
      addHorizontalRuleRemovingSelection(
          editorState: EditorState,
      ): EditorState;
      addLineBreak(editorState: EditorState): EditorState;
      applyMarkdownStyle(
          editorState: EditorState,
          range: { end: number; pattern: string; start: number; type: string },
          char: string,
      ): EditorState;
      getCommandPalettePrompt(
          editorState: EditorState,
      ): { block: ContentBlock; position: number; text: string } | null;
      getEntitySelection(
          editorState: EditorState,
          entityKey?: string,
      ): SelectionState;
      getEntityTypeStrategy(
          entityType: string,
      ): (
          block: ContentBlock,
          callback: (start: number, end: number) => void,
          contentState: ContentState,
      ) => void;
      getSelectedBlock(editorState: EditorState): ContentBlock;
      getSelectionEntity(editorState: EditorState): string | undefined;
      handleDeleteAtomic(editorState: EditorState): false | EditorState;
      handleHardNewline(editorState: EditorState): false | EditorState;
      handleNewLine(
          editorState: EditorState,
          event: KeyboardEvent,
      ): false | EditorState;
      insertNewUnstyledBlock(editorState: EditorState): EditorState;
      removeBlock(editorState: EditorState, key: string): EditorState;
      removeBlockEntity(
          editorState: EditorState,
          entityKey: string,
          blockKey: string,
      ): EditorState;
      removeCommandPalettePrompt(editorState: EditorState): EditorState;
      resetBlockWithType(
          editorState: EditorState,
          newType?: string,
          newText?: string,
          newData?: { [key: string]: unknown },
      ): EditorState;
      updateBlockEntity(
          editorState: EditorState,
          block: ContentBlock,
          data: { [key: string]: unknown },
      ): EditorState;
  }

  Inspired by draftjs-utils, with our custom functions.

  DraftUtils functions are utility helpers useful in isolation, specific to the Draft.js API, without ties to Draftail's specific behavior or other APIs.

  • addHorizontalRuleRemovingSelection: function

    • addHorizontalRuleRemovingSelection(editorState: EditorState): EditorState

      Inserts a horizontal rule in the place of the current selection. Returns updated EditorState. Inspired by DraftUtils.addLineBreakRemovingSelection.

      Parameters

      • editorState: EditorState

      Returns EditorState

  • addLineBreak: function

    • addLineBreak(editorState: EditorState): EditorState

      Handles Shift + Enter keypress removing selection and inserting a line break. https://github.com/jpuri/draftjs-utils/blob/112bbe449cc9156522fcf2b40f2910a071b795c2/js/block.js#L133

      Parameters

      • editorState: EditorState

      Returns EditorState

  • applyMarkdownStyle: function

    • applyMarkdownStyle(
          editorState: EditorState,
          range: { end: number; pattern: string; start: number; type: string },
          char: string,
      ): EditorState

      Applies an inline style on a given range, based on a Markdown shortcut, removing the Markdown markers. Supports adding styles on existing styles, and entities.

      Parameters

      • editorState: EditorState
      • range: { end: number; pattern: string; start: number; type: string }
      • char: string

      Returns EditorState

  • getCommandPalettePrompt: function

    • getCommandPalettePrompt(
          editorState: EditorState,
      ): { block: ContentBlock; position: number; text: string } | null

      Parameters

      • editorState: EditorState

      Returns { block: ContentBlock; position: number; text: string } | null

  • getEntitySelection: function

    • getEntitySelection(editorState: EditorState, entityKey?: string): SelectionState

      Creates a selection on a given entity in the currently selected block. Returns the current selection if no entity key is provided, or if the entity could not be found.

      Parameters

      • editorState: EditorState
      • OptionalentityKey: string

      Returns SelectionState

  • getEntityTypeStrategy: function

    • getEntityTypeStrategy(
          entityType: string,
      ): (
          block: ContentBlock,
          callback: (start: number, end: number) => void,
          contentState: ContentState,
      ) => void

      Get an entity decorator strategy based on the given entity type. This strategy will find all entities of the given type.

      Parameters

      • entityType: string

      Returns (
          block: ContentBlock,
          callback: (start: number, end: number) => void,
          contentState: ContentState,
      ) => void

  • getSelectedBlock: function

    • getSelectedBlock(editorState: EditorState): ContentBlock

      Returns the first selected block.

      Parameters

      • editorState: EditorState

      Returns ContentBlock

  • getSelectionEntity: function

    • getSelectionEntity(editorState: EditorState): string | undefined

      Returns the entity applicable to whole of current selection. An entity can not span multiple blocks. https://github.com/jpuri/draftjs-utils/blob/e81c0ae19c3b0fdef7e0c1b70d924398956be126/js/inline.js#L75

      Parameters

      • editorState: EditorState

      Returns string | undefined

  • handleDeleteAtomic: function

    • handleDeleteAtomic(editorState: EditorState): false | EditorState

      Handles pressing delete within an atomic block. This can happen when selection is placed on an image. Ideally this should be handled by the built-in RichUtils, but it's not. See https://github.com/wagtail/wagtail/issues/4370.

      Parameters

      • editorState: EditorState

      Returns false | EditorState

  • handleHardNewline: function

    • handleHardNewline(editorState: EditorState): false | EditorState

      Handles hard newlines. https://github.com/jpuri/draftjs-utils/blob/e81c0ae19c3b0fdef7e0c1b70d924398956be126/js/keyPress.js#L17

      Parameters

      • editorState: EditorState

      Returns false | EditorState

  • handleNewLine: function

    • handleNewLine(
          editorState: EditorState,
          event: KeyboardEvent,
      ): false | EditorState

      Handles three scenarios:

      • Soft newlines.
      • Hard newlines in the "defer breaking out of the block" case.
      • Other hard newlines. See https://github.com/springload/draftail/issues/104, https://github.com/jpuri/draftjs-utils/issues/10.

      Parameters

      • editorState: EditorState
      • event: KeyboardEvent

      Returns false | EditorState

  • insertNewUnstyledBlock: function

    • insertNewUnstyledBlock(editorState: EditorState): EditorState

      Inserts new unstyled block. Initially inspired from https://github.com/jpuri/draftjs-utils/blob/e81c0ae19c3b0fdef7e0c1b70d924398956be126/js/block.js#L153, but changed so that the split + block type reset amounts to only one change in the undo stack.

      Parameters

      • editorState: EditorState

      Returns EditorState

  • removeBlock: function

    • removeBlock(editorState: EditorState, key: string): EditorState

      Removes the block at the given key.

      Parameters

      • editorState: EditorState
      • key: string

      Returns EditorState

  • removeBlockEntity: function

    • removeBlockEntity(
          editorState: EditorState,
          entityKey: string,
          blockKey: string,
      ): EditorState

      Removes a block-level entity, turning the block into an empty paragraph, and placing the selection on it.

      Parameters

      • editorState: EditorState
      • entityKey: string
      • blockKey: string

      Returns EditorState

  • removeCommandPalettePrompt: function

    • removeCommandPalettePrompt(editorState: EditorState): EditorState

      Parameters

      • editorState: EditorState

      Returns EditorState

  • resetBlockWithType: function

    • resetBlockWithType(
          editorState: EditorState,
          newType?: string,
          newText?: string,
          newData?: { [key: string]: unknown },
      ): EditorState

      Changes a block type to be newType, setting its new text. Also removes the required characters from the characterList, and resets block data.

      Parameters

      • editorState: EditorState
      • OptionalnewType: string
      • OptionalnewText: string
      • OptionalnewData: { [key: string]: unknown }

      Returns EditorState

  • updateBlockEntity: function

    • updateBlockEntity(
          editorState: EditorState,
          block: ContentBlock,
          data: { [key: string]: unknown },
      ): EditorState

      Updates a given atomic block's entity, merging new data with the old one.

      Parameters

      • editorState: EditorState
      • block: ContentBlock
      • data: { [key: string]: unknown }

      Returns EditorState

• EmbedModalWorkflowSource: typeof EmbedModalWorkflowSource

• ImageModalWorkflowSource: typeof ImageModalWorkflowSource

• initEditor: (
      selector: string,
      originalOptions: any,
      currentScript: Element,
  ) => (((newOptions: any) => void) | undefined)[]

  Initializes the DraftailEditor for a given field.

• LinkModalWorkflowSource: typeof LinkModalWorkflowSource

• ModalWorkflowSource: typeof ModalWorkflowSource

• registerPlugin: (type: any, optionName?: string) => any

  Client-side editor-specific equivalent to register_editor_plugin. optionName defaults to entityTypes for backwards-compatibility with previous function signature only allowing registering entities.

• splitState: (
      editorState: EditorState,
  ) => {
      shouldMoveCommentFn: (comment: Comment) => boolean;
      stateAfter: EditorState;
      stateBefore: EditorState;
  }

• Tooltip: {
      propTypes: {
          children: Validator<NonNullable<ReactNodeLike>>;
          direction: Validator<string>;
          target: Validator<
              NonNullable<
                  InferProps<
                      {
                          height: Validator<number>;
                          left: Validator<number>;
                          top: Validator<number>;
                          width: Validator<number>;
                      },
                  >,
              >,
          >;
      };
      (
          __namedParameters: { children: any; direction: any; target: any },
      ): Element;
  }

  A tooltip, with arbitrary content.

• TooltipEntity: typeof default