Neil Patrick's Mansion

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

    0.2.4 • Public • Published

    Lexical Vue

    npm (tag) npm bundle size NPM

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

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

    Demo: https://lexical-vue-playground.vercel.app

    Getting started with Vue

    Requires Vue >= 3.2.0.

    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.

    I'm converting most of @lexical/react plugins into Vue 3 components. Check them all here.

    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)

    Documentation

    https://lexical-vue.vercel.app

    Credits

    License

    MIT

    Install

    npm i @wingnpm/lexical-vue

    DownloadsWeekly Downloads

    9

    Version

    0.2.4

    License

    MIT

    Unpacked Size

    124 kB

    Total Files

    43

    Last publish

    Collaborators

    • wingnpm