wobsoriano/lexical-vue

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

lexical-vue's Issues

Is it possible to insert a router-link element?

I've been wondering about this one for quite a while now. Regular links will reload the whole page, so I need to figure out a way how to insert a <router-link> element instead of a regular <a> tag. Can it be done somehow? We already can insert whole components using decorators, but what about inline elements?

The interface is not generating.

I am using sample code, but the rich text is not displaying correctly.
Thanks 🙏🏽

Npm miss LexicalAutoEmbedPlugin directory in components directory

I found that the code on NPM is missing the LexicalAutoEmbedPlugin directory. LexicalAutoEmbedPlugin exists in the directory I built locally

Cannot edit content

I’m not sure if I miss something obvious, but I’m unable to actually add/edit content on Nuxt 3: contenteditable stays always false.

I followed your example in the docs and also had a look at #4, but I can’t seem to get it work neither in my project nor in a sandbox (https://stackblitz.com/edit/nuxt-starter-bk7zmb). Any idea? Is lexical-vue compatible with lexical 0.8.1?

Two-way binding of content not working

In the example it says that content has two way binding, which doesn't seem to be correct. Changing content programmatically doesn't update the editor content. Also giving the ref an initial value doesn't seem to work. Is this a bug or rather misleading docs?

In case of the later, is there any way to populate the editor with initial data from outside?

Thanks 🙏🏽

How to use LexicalTypeaheadMenuPlugin

I want use LexicalTypeaheadMenuPlugin but your document not provide usage

Change to check list is not work

hi, I find that change block to `check list` is failed in the demo. Is it something wrong?

Below is Lexical Playground:

Collaborative feature

Thanks for this great library! Is it by any chance possible to integrate the collaborative features to sync the editor state using yjs like in the react CollaborationPlugin?

Is there a way to make the yjs lib optional?

I'm not using that plugin and I can't start my app without installing yjs.

After installing it, I see errors like this:

Yjs was already imported. This breaks constructor checks and will lead to issues! - https://github.com/yjs/yjs/issues/438

is there a way to not load it if I don't need it?

Thanks

Error with 0.8.3

My project suddenly has these errors after I updated to 0.8.3

I also literally tried copying the basic example and got this error again

Using Lexical Config type directly

Is there a reason why we cannot use the CreatedEditorArgs type directly that is provided bylexical here?

lexical-vue/src/components/LexicalComposer.vue

Lines 9 to 21 in 8c19a0f

	initialConfig: {
	namespace?: string
	nodes?: (Klass<LexicalNode> | {
	replace: Klass<LexicalNode>
	with: <T extends { new (...args: any): any }>(
	node: InstanceType<T>,
	) => LexicalNode
	})[]
	editable?: boolean
	theme?: EditorThemeClasses
	editorState?: InitialEditorStateType
	}
	}>()

If we use the lexical provided type, we wouldn't have to recreate it in the composer as it is now as well as provide more straight forward type safety:

import {  CreateEditorArgs } from 'lexical'

const config: CreateEditorArgs = {
   ...
}

Add `EmojiPlugin` in playground

Reference:
https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/EmojisPlugin/index.ts

Can't get an instance of editor with useEditor() in Nuxt 3

I am exposing lexical-vue with the following plugin:

// plugins/lexical.client.ts

import {
  useEditor,
  LexicalComposer,
  LexicalContentEditable,
  LexicalPlainTextPlugin,
} from 'lexical-vue'

export default defineNuxtPlugin(nuxtApp => {

  nuxtApp.vueApp.component('LexicalComposer', LexicalComposer)
  nuxtApp.vueApp.component('LexicalContentEditable', LexicalContentEditable)
  nuxtApp.vueApp.component('LexicalPlainTextPlugin', LexicalPlainTextPlugin)

  return {
    provide: {
      useEditor,
    }
  }

})

So inside the component when I try using it as following:

<template>
    <ClientOnly>
      <LexicalComposer :initial-config="config">
        <LexicalPlainTextPlugin>
          <template #contentEditable>
            <LexicalContentEditable />
          </template>
          <template #placeholder>
            <div>
              What do you want to write about today?
            </div>
          </template>
        </LexicalPlainTextPlugin>
      </LexicalComposer>
  </ClientOnly>
</template>

<script setup>
const {
  $useEditor: useEditor,
} = useNuxtApp()

const config = {
  editable: true,
  theme: { },
  onError(error) {
    console.error(error)
  },
}

const editor = useEditor()

// Two-way binding
const content = ref('')

</script>

I get an error: useEditor is not a function and trace shows <LexicalComposer /> is required error message (which is a bit misleading, because it throws when editor in underlying function is null

Is it possible to work with Nuxt3?

Hello, I really liked the framework.

But there was a need to use with Nuxt3. I am not very versed in JS and do not understand the essence of the error.

I copied the example code into the component, but I get an error:
[h3] [unhandled] H3Error: Class extends value undefined is not a constructor or null

Two lexical.dev.js!

I run npm i and find this in

- node_modules
  - ...
 - lexical-vue
    - dist
    - node_modules
      - lexical
        - **Lexical.dev.js**

This BUG makes my program can not get current EditorState.
Because read EditorState through lexical-vue, it will load Lexical.dev.js file in lexical-vue
And then read EditorState through lexical, it will load Lexical.dev.js file in lexical,it turns out get error.
If I use pnpm i, then there is only dist dir in lexical-vue.
My env

• [email protected]
• [email protected]
• Windows 11 21H2

Node Overrides causes type error in "initialConfig".

Official sample code
https://lexical.dev/docs/concepts/node-replacement

const editorConfig = {
    ...
    nodes=[
        // Don't forget to register your custom node separately!
        CustomParagraphNode,
        {
            replace: ParagraphNode,
            with: (node: ParagraphNode) => {
                return new CustomParagraphNode();
            }
        }
    ]
}

I tried this code in lexical-vue, but it caused a type error in initialConfig.

I think the reason is that lexical-vue does not define replace in Nodes.
...Or is there any way to work around this error?

---

lexical-vue
src/components/LexicalComposer.vue

const props = defineProps<{
  initialConfig: {
    namespace?: string
    nodes?: Class<LexicalNode>[]
    editable?: boolean
    theme?: EditorThemeClasses
    editorState?: InitialEditorStateType
  }
}>()

---

Origin (lexical-react)
https://github.com/facebook/lexical/blob/main/packages/lexical-react/src/LexicalComposer.tsx

export type InitialConfigType = Readonly<{
  editor__DEPRECATED?: LexicalEditor | null;
  namespace: string;
  nodes?: ReadonlyArray<
    | Klass<LexicalNode>
    | {
        replace: Klass<LexicalNode>;
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        with: <T extends {new (...args: any): any}>(
          node: InstanceType<T>,
        ) => LexicalNode;
      }
  >;
  onError: (error: Error, editor: LexicalEditor) => void;
  editable?: boolean;
  theme?: EditorThemeClasses;
  editorState?: InitialEditorStateType;
}>;

[Plugin Request] Mentions

Hello @wobsoriano,

Congrats for this work! Would you consider adding the MentionsPlugin to this library?
Not sure about all the work it implies...

Thank you very much! 🙏🏻

@lexical/text/LexicalText.js does not provide an export named '$canShowPlaceholderCurry'

Error encountered:

Uncaught (in promise) SyntaxError: The requested module '/_nuxt/@fs/***/node_modules/lexical-vue/node_modules/@lexical/text/LexicalText.js?v=0f92231a' does not export '$canShowPlaceholderCurry' (at index.js?v=0f92231a:3:10)

Using the latest Nuxt 3 on Bun, below is a sample component to replicate the issue:

<script setup>
import {
  LexicalComposer,
  LexicalContentEditable,
  LexicalHistoryPlugin,
  LexicalOnChangePlugin,
  LexicalPlainTextPlugin
} from 'lexical-vue'

const initialConfig = {
  namespace: 'ChatPaper',
  theme: {
    ltr: 'text-left',
    rtl: 'text-right',
    paragraph: 'my-4',
    quote: 'border-l-4 pl-4 italic',
    heading: {
      h1: 'text-4xl font-bold my-2',
      h2: 'text-3xl font-bold my-2',
      h3: 'text-2xl font-bold my-2',
      h4: 'text-xl font-bold my-2',
      h5: 'text-lg font-bold my-2',
      h6: 'text-base font-bold my-2'
    },
    list: {
      nested: {
        listitem: 'pl-4'
      },
      ol: 'list-decimal list-inside',
      ul: 'list-disc list-inside',
      listitem: 'mb-2',
      listitemChecked: 'text-green-500',
      listitemUnchecked: 'text-red-500'
    },
    hashtag: 'text-blue-500',
    image: 'max-w-full h-auto',
    link: 'text-blue-500 underline',
    text: {
      bold: 'font-bold',
      code: 'font-mono bg-gray-100 p-1 rounded',
      italic: 'italic',
      strikethrough: 'line-through',
      subscript: 'sub',
      superscript: 'sup',
      underline: 'underline',
      underlineStrikethrough: 'underline line-through'
    },
    code: 'font-mono text-sm bg-gray-100 p-2 rounded',
    codeHighlight: {
      atrule: 'text-purple-500',
      attr: 'text-green-500',
      boolean: 'text-orange-500',
      builtin: 'text-blue-500',
      cdata: 'text-gray-500',
      char: 'text-green-500',
      class: 'text-purple-500',
      'class-name': 'text-purple-500',
      comment: 'text-gray-500 italic',
      constant: 'text-orange-500',
      deleted: 'text-red-500 line-through',
      doctype: 'text-gray-500 italic',
      entity: 'text-red-500',
      function: 'text-blue-500',
      important: 'text-red-500',
      inserted: 'text-green-500',
      keyword: 'text-purple-500',
      namespace: 'text-red-500',
      number: 'text-orange-500',
      operator: 'text-gray-600',
      prolog: 'text-gray-500',
      property: 'text-green-500',
      punctuation: 'text-gray-600',
      regex: 'text-orange-500',
      selector: 'text-purple-500',
      string: 'text-green-500',
      symbol: 'text-orange-500',
      tag: 'text-red-500',
      url: 'text-blue-500 underline',
      variable: 'text-red-500'
    }
  },
  onError: console.error
}
</script>

<template>
  <ClientOnly>
    <LexicalComposer :initial-config="initialConfig">
      <LexicalPlainTextPlugin>
        <template #contentEditable>
          <LexicalContentEditable />
        </template>
        <template #placeholder>
          <div>Enter some text...</div>
        </template>
      </LexicalPlainTextPlugin>
      <LexicalHistoryPlugin />
      <LexicalLinkPlugin />
      <LexicalCheckListPlugin />
      <LexicalTablePlugin />
      <LexicalTabIndentationPlugin />
      <LexicalOnChangePlugin @change="onChange" />
    </LexicalComposer>
  </ClientOnly>
</template>

Versions:

• Bun: 1.0.29
• Node: v20.11.1
• lexical: 0.13.1
• lexical-vue: 0.8.2
• nuxt: 3.10.2

Issue replicates in both Bun and Node environments.

[Bug] LexicalClearEditorPlugin not working

as title