0.19.0 • Published 12 months ago

@lexical/react v0.19.0

Weekly downloads
-
License
MIT
Repository
github
Last release
12 months ago

@lexical/react

This package provides a set of components and hooks for Lexical that allow for text editing in React applications.

Getting started

Install lexical and @lexical/react:

npm install --save lexical @lexical/react

Below is an example of a basic plain text editor using lexical and @lexical/react (try it yourself).

import {$getRoot, $getSelection} from 'lexical';
import {useEffect} from 'react';

import {LexicalComposer} from '@lexical/react/LexicalComposer';
import {PlainTextPlugin} from '@lexical/react/LexicalPlainTextPlugin';
import {ContentEditable} from '@lexical/react/LexicalContentEditable';
import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';
import {OnChangePlugin} from '@lexical/react/LexicalOnChangePlugin';
import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';

const theme = {
  // Theme styling goes here
  ...
}

// When the editor changes, you can get notified via the
// LexicalOnChangePlugin!
function onChange(editorState) {
  editorState.read(() => {
    // Read the contents of the EditorState here.
    const root = $getRoot();
    const selection = $getSelection();

    console.log(root, selection);
  });
}

// Lexical React plugins are React components, which makes them
// highly composable. Furthermore, you can lazy load plugins if
// desired, so you don't pay the cost for plugins until you
// actually use them.
function MyCustomAutoFocusPlugin() {
  const [editor] = useLexicalComposerContext();

  

useEffect(() => {
    // Focus the editor when the effect fires!
    editor.focus();
  }, [editor]);

  return null;
}

// Catch any errors that occur during Lexical updates and log them
// or throw them as needed. If you don't throw them, Lexical will
// try to recover gracefully without losing user data.
function onError(error) {
  throw error;
}

function Editor() {
  const initialConfig = {
    namespace: 'MyEditor',
    theme,
    onError,
  };

return (
    <LexicalComposer initialConfig={initialConfig}>
      <PlainTextPlugin
        contentEditable={<ContentEditable />}
        placeholder={<div>Enter some text...</div>}
      />
      <OnChangePlugin onChange={onChange} />
      <HistoryPlugin />
      <MyCustomAutoFocusPlugin />
    </LexicalComposer>
  );
}
@paiondata/messier-61@fantufantu/beeeditorlexical-lib-demomessier-61scribo-markdownurdu-rich-editorlexical-toolbar-verbum@everything-registry/sub-chunk-545veridical@veridical/components@veridical/pluginshrconnect-uieditor-dsdsykpcomposersykecomposer2test-package-deploy-from-organizationworroierwritlytelco-wysiwygtest-sceyt-chat-react-uikittestpkg777vntrs-editorvc-editor@bunstack/lexical@blocklet/prompt-editor@blocklet/discuss-kit-ux@blocklet/editor@rryando/editor@payloadcms/richtext-lexical@ticketz-oss/mdx-editorkalliopelanding-page-builderkoenig-lexical-experimentgsoc-projectshr-integra-uihp-markdown-editorhaprog-editorinscribe-editorinputronlexical-editor-componentlexical-editor-easylexical-email-editor-reactlexical-playgroundlexical-playground-wllexical-react-rtelexical-readylexical-rich-text-examplelexical-rtelexical-reviewlexical-richtext-editor-tslexical-softy-editorlexical-test-1lexical-text-editorlexical-wysiwyglexical-editorlexitorlexiwindlex-samplekyz-editormatrix-rxmdx-floatmdxeditor-editor-react17mdxeditor-editor-react18-developmentmdxeditor-newlines-editor@webtech0321/mdx-editor-collab@workwave-tidal/core@webiny/lexical-editor@webiny/lexical-nodes@twilio-paste/lexical-library@tryghost/koenig-lexical-experiment@tmrrw-labs/payload-plugin-translation@tiller-ds/form-elements-advanced@timcchang/spring-js@tyzo/library-standard@uniformdev/design-system@uniformdev/mesh-sdk-react@unicornhatch/text-editor@tohuhono/puck-rich-text@toptal/picasso-rich-text-editor@triniti/cms@uva-glass/component-library@yext/react-components@yext/pages-components@yuntijs/ui@zalastax/nolb-_lex@zerocmf/rich-editor@zeeshanzahoor/koenig-lexicalabobaker-rte@churchapps/apphelper@attrybtech/attryb-ui@iserp/verbum5htp-core@167pluto/rte@21epub-ui/comments@21epub-ui/text-editor2ani-ui@gtplan/react-components@accelbyte/widgets-v2@aigne/publish-docs@cmpsr/markdown-editor
0.19.0

12 months ago

0.18.0

1 year ago

0.17.1

1 year ago

0.17.0

1 year ago

0.16.0

1 year ago

0.16.1

1 year ago

0.15.0

1 year ago

0.14.5

2 years ago

0.14.4

2 years ago

0.14.3

2 years ago

0.14.2

2 years ago

0.14.0

2 years ago

0.14.1

2 years ago

0.13.1

2 years ago

0.13.0

2 years ago

0.12.6

2 years ago

0.12.5

2 years ago

0.11.2

2 years ago

0.11.3

2 years ago

0.12.0

2 years ago

0.12.1

2 years ago

0.12.2

2 years ago

0.12.3

2 years ago

0.12.4

2 years ago

0.11.0

2 years ago

0.11.1

2 years ago

0.9.0

3 years ago

0.9.2

3 years ago

0.9.1

3 years ago

0.10.0

3 years ago

0.7.9

3 years ago

0.7.8

3 years ago

0.7.7

3 years ago

0.8.1

3 years ago

0.8.0

3 years ago

0.7.2

3 years ago

0.7.1

3 years ago

0.7.4

3 years ago

0.7.3

3 years ago

0.7.0

3 years ago

0.7.6

3 years ago

0.7.5

3 years ago

0.6.3

3 years ago

0.6.2

3 years ago

0.6.5

3 years ago

0.6.4

3 years ago

0.6.1-next.0

3 years ago

0.5.1-next.1

3 years ago

0.5.1-next.0

3 years ago

0.5.1-next.2

3 years ago

0.6.0

3 years ago

0.5.0

3 years ago

0.4.1

3 years ago

0.4.0

3 years ago

0.3.9

3 years ago

0.3.11

3 years ago

0.3.10

3 years ago

0.3.6

3 years ago

0.3.5

3 years ago

0.3.8

3 years ago

0.3.7

3 years ago

0.3.4

3 years ago

0.3.0

3 years ago

0.2.7

3 years ago

0.2.6

3 years ago

0.2.9

3 years ago

0.2.8

3 years ago

0.3.2

3 years ago

0.3.1

3 years ago

0.3.3

3 years ago

0.1.20

4 years ago

0.1.21

4 years ago

0.2.1

4 years ago

0.2.0

4 years ago

0.1.17

4 years ago

0.1.18

4 years ago

0.1.19

4 years ago

0.2.3

3 years ago

0.2.2

4 years ago

0.2.5

3 years ago

0.2.4

3 years ago

0.1.12

4 years ago

0.1.13

4 years ago

0.1.14

4 years ago

0.1.15

4 years ago

0.1.16

4 years ago

0.1.11

4 years ago

0.1.10

4 years ago

0.1.9

4 years ago

0.1.8

4 years ago

0.1.7

4 years ago

0.1.6

4 years ago

0.1.5

4 years ago

0.1.4

4 years ago

0.1.3

4 years ago

0.1.2

4 years ago

0.1.1

4 years ago

0.1.0

4 years ago