@wattanx/lexical-vue
TypeScript icon, indicating that this package has built-in type declarations

0.0.2 • Public • Published

Lexical Vue

Forked from lexical-vue

An extensible Vue 2 web text-editor based on Lexical.

For documentation and more information about Lexical, be sure to visit the Lexical website.

Getting started with Vue

Requires Vue 2.7 (>=3.0, use lexical-vue. )

Install lexical and lexical-vue:

npm install lexical lexical-vue # or pnpm or yarn

Below is an example of a basic plain text editor using lexical and lexical-vue.

<script setup lang="ts">
import { $getRoot, $getSelection } from 'lexical';
import { ref } from 'vue';

import {
  LexicalAutoFocusPlugin,
  LexicalComposer,
  LexicalContentEditable,
  LexicalHistoryPlugin,
  LexicalOnChangePlugin,
  LexicalPlainTextPlugin,
} from 'lexical-vue';

const config = {
  theme: {
    // Theme styling goes here
  },
};

const onError = (error) => {
  throw error;
};

// 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);
  });
}

// Two-way binding
const content = ref('');
</script>

<template>
  <LexicalComposer :initial-config="config" @error="onError">
    <LexicalPlainTextPlugin>
      <template #contentEditable>
        <LexicalContentEditable />
      </template>
      <template #placeholder>
        <div>Enter some text...</div>
      </template>
    </LexicalPlainTextPlugin>
    <LexicalOnChangePlugin v-model="content" @change="onChange" />
    <LexicalHistoryPlugin />
    <LexicalAutoFocusPlugin />
  </LexicalComposer>
</template>

For a more complex example, check the rich text editor playground.

Creating custom Lexical nodes with Vue

Contributing

  1. Create a new branch
    • git checkout -b my-new-branch
  2. Commit your changes
    • git commit -a -m 'Description of the changes'
      • There are many ways of doing this and this is just a suggestion
  3. Push your branch to GitHub
    • git push origin my-new-branch
  4. Go to the repository page in GitHub and click on "Compare & pull request"
    • The GitHub CLI allows you to skip the web interface for this step (and much more)

Credits

License

MIT

Package Sidebar

Install

npm i @wattanx/lexical-vue

Weekly Downloads

1

Version

0.0.2

License

MIT

Unpacked Size

856 kB

Total Files

51

Last publish

Collaborators

  • wattanx