@react-fluent-edit/core

@react-fluent-edit/core

This package includes the core editor component and tools to create plugins.

Installation

Install the package in your project directory with:

// with npm
npm install @react-fluent-edit/core

// with yarn
yarn add @react-fluent-edit/core

API

FluentEdit

import {
  FluentEdit,
  FluentEditProps,
  FluentEditProvider,
} from "@react-fluent-edit/core";

return (
  <FluentEdit 
    singleLine={false}
    markdown={true}
    autoFocus={true}
    placeholder=""
    initialValue=""
    onChange={value => console.log(value)}
    plugins={[...]}
  />
);

Plugin

import { Plugin } from "@react-fluent-edit"

const plugin: Plugin = {
  name: "mentions",
  leaves: [
    { 
      match: ({ leaf }) => ["bold", "italic", "underline"]
        .some(prop => leaf[prop]), 
      component: Leaf,
    }
  ],
  elements: [
    { 
      match: ({ element: { type } }) => ["list", "heading"]
        .some(item => type === item), 
      component: Element,
    }
  ],
  overrides: [{ handler: (editor) => withRichText(editor) }],
  beforeSerialize: {
    handler: (nodes) => replaceTextNodesWithRichTextNodes(nodes),
  },
  afterDeserialize: {
    handler: (nodes) => replaceRichTextNodesWithTextNodes(nodes),
  },
  handlers: {
    onClick: (event, editor) => { ... }
  }
  options,
}

useFluentEdit hook

import { useFluentEdit } from "@react-fluent-edit"

const { editor, focusEditor } = useFluentEdit()