Is your feature request related to a problem? Please describe.
No way to use editor instance.

Describe the solution you'd like
Maybe should use context to get the instance of editor.

Additional context
Example how i can do this with lexical editor:

import { $convertToMarkdownString, TRANSFORMERS } from '@lexical/markdown'

const MyComponent = () => {
  const [editor] = useLexicalComposerContext()

  const onClick = () => {
    editor.getEditorState().read(() => {
    const a = $convertToMarkdownString(TRANSFORMERS)
  }

  return <div onClick={onClick}>Foobar</div>
}

const Editor = (props: { taskId: number }) => {

  return (
    <LexicalComposer initialConfig={initialConfig}>
      <RichTextPlugin />
      <MyComponent />
    </LexicalComposer>
  )
}

Hello verbum maintainers,

I am currently working with verbum in a React project and I have encountered a challenge with updating the editor state programmatically.

Goal: I need to update the editor state every 1 second with new content.

Issue: Based on my understanding, verbum does not seem to directly expose Lexical's editor.update() method or similar functionality, making it unclear how to update the editor state from outside the component.

Questions:

1. Is there a recommended way to programmatically update the editor state using verbum?
2. If direct manipulation of the editor state is not possible with verbum, could you suggest any alternative approaches or workarounds?

Any guidance or recommendations on this matter would be greatly appreciated.

Thank you for your time and assistance.

Best regards,
Jordan

Describe the bug
If we use multiple editors in one page such that we have to scroll the page, dropdown goes out of alignment with the toolbar button

To Reproduce
Steps to reproduce the behavior:

1. use multiple editors in one page
2. Click on any toolbar button that opens a dropdown, e.g, Text color picker

Expected behavior
Dropdown should be positioned with the button

Additional context
in src/ui/DropDown.tsx on line number 38, we are assigning top value for dropdown, i think we should also take vertical scroll into account

Describe the question
Is it even possible to set up:

1. Ediotor's container size.
2. Images max size.
3. Add more font sizes or reduce them.
4. Add my own font families?

The css in this project isn't namespaced which means it's pretty much unusable to insert anywhere

One good example is dropdown which is a pretty generic style name to globally overwrite

Describe the bug
I am using react hook form in next.js. I have verbum component inside the form tag. Whenever I click on any editor button e.g. underline, heading etc. It causes the react hook form to submit.
Ideally reacct hook form only submits when a button with type submit has been clicked.
Does this mean that every button or option inside verbum/lexical editor has type submit?

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Using the <InsertDropdown enableYoutube /> the html it generates after including a youtube video doesn't include the video...

here's my onChange code

const handleChange = (
  value: string,
  editorInstance?: LexicalEditor | undefined,
) => {
  console.log(value); // incudes the youtube video in the nodes
  editorInstance?.update(() => {
    const htmlString = $generateHtmlFromNodes(editorInstance, null);
    console.log(htmlString); // doesn't include youtube video
  });
};

Describe the bug
Editor has been crushed when locale prop is set (any language 'en' | 'fr' | 'ptBr').

To Reproduce
Steps to reproduce the behavior:

1. Just launch the app.

Expected behavior
Normal behavior.

Screenshots

Desktop:

• OS: MacOS Monterey v.12.6
• Browser: Google Chrome
• Version: 109.0.5414.119

Additional info
Example.

Describe the bug
"verbum": "^0.5.0",

1. Unable to initialize default value
2. onChange cannot be converted into html code

const onChange = (state: string, editor?: any) => {
console.log(state, editor, "-----------------------editor");

editor?.update(() => {
const editorState = editor.getEditorState();
console.log(editorState, "-------------------------editorState");

const jsonString = JSON.stringify(editorState);
console.log(jsonString, '-------------------------jsonString');

const htmlString = $generateHtmlFromNodes(editor, null);
console.log(htmlString, '-------------------------htmlString');

})

Describe the bug
Don't get me wrong, I am more than happy to work and add a live demo but the example code gotta work.
It doesn't work, at least not with nextjs 13 (which is apparently what most folks are using).
I have spent more than a full day trying to set it up, scrambling the internet trying to find a solution just to run this repo.

These are the two issues I am facing:

• #67
• #38

Maybe someone can come to the rescue? Since it looks like Ozan (the author) is not available atm 😅.

and sorry for the aggressive title, had to bring your attention lol. :p

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Describe the bug
Error: parseEditorState: type "heading" + not found

const state = '{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"color: #000000;background-color: #ffffff;","text":"333888","type":"text","version":1}],"direction":null,"format":"","indent":0,"type":"heading","version":1,"tag":"h1"}],"direction":null,"format":"","indent":0,"type":"root","version":1}}'
 const newEditorState = newEditor.parseEditorState(state);

Describe the bug
setting locale to 'fr' produces this error in the console:

and no editor rendered. Unsetting locale make the editor visible, but not all the texts are translated (browser language is IT):

To Reproduce
Steps to reproduce the behavior:

1. Use the example provided
2. set locale="fr"

Expected behavior
Editor should be localized in french

Desktop (please complete the following information):

• OS: MacOS 13.0.1
• Browser: Chrome 108.0.5359.124
• Version: 0.4.1

Describe the bug
can't use ctrl +v paste image

To Reproduce
Steps to reproduce the behavior:

1. Go to 'editor'
2. ctrl +c copy a image
3. ctrl +v paste to editor
4. not effect

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Describe the bug
I couldn't find a way to get the editor value.

To Reproduce
Steps to reproduce the behavior:

1. Use an example from README
2. Attach the following "plugin"

const MyComponent = () => {
  const [editor] = useLexicalComposerContext();
  return <div onClick={() => console.log(editor)}>Show Editor</div>
}

Expected behavior

editor object should be printed

I also couldn't use useContext(EditorContext) because EditorContext doesn't seem to be exported properly.

Maybe that's an XY problem, but I was trying to get the current state of the editor to just send it via POST request and couldn't find a way to do that.

Is there any particular reason for removing initialEditorState from the newest version?

Hi! Thank you for the lib. Is there a way to disable CharacterStylesPopupPlugin?

Thanks!

Is it possible to customize the z-index of the items in the toolbar?

I am using the code like on the example page.
And that is the error message. Do you have any ideas to fix it?
Thank you.

Thanks for this library.

The current version on NPM is 0.5.0, but you seem to have released 0.6.0 here and besides updated Lexical after 0.6.0 release.
Do you plan to cut 0.7.0 version and release it on NPM? That'd be great.

Maybe a default image is needed or we can remove the sample item.

Describe the bug
Toolbar shows as follows.

Desktop (please complete the following information):

• OS: macOS Ventura 13.2
• Browser Chrome 109.0.5414.119 (Official Build) (arm64), Firefox 109.0.1
• Version
  Node 18.12.1
  vite 4.0.0
  React 18.2.0

Typescript 4.9.4

Describe the bug
Uncaught Error: Unable to find an active editor state. State helpers or node methods can only be used synchronously during the callback of editor.update() or editorState.read().

To Reproduce

....
const handleChange = (state, editor) => {
    editor.update(() => {
      const htmlString = $generateHtmlFromNodes(editor, null);
      console.log(htmlString);
    });
  };

  return (
    <EditorComposer>
      <Editor hashtagsEnabled={true} onChange={handleChange}>
....

Expected behavior
To return the HTML value from the text editor when onChange is called

Screenshots

Desktop (please complete the following information):

• OS: Windows 11
• Browser Chrome

Describe the bug
Error Global CSS cannot be imported from within node_modules when using next.js

Expected behavior
I think verbum need work with next.js

Screenshots

Is your feature request related to a problem? Please describe.
I am about to give Verbum a try because It's easy to set up but I got one issue. This issue is I can't style the Toolbar as I want. For example, the height of the toolbar component is 32px but I want to change it to 50px so that will fit my components but Ican't

Describe the solution you'd like
I think you can add default styles and class names, and concatenate the styles props and classnames props so anyone can customize the toolbar and the editor.

Describe the bug
Trying to use Verbum in a Next.js project, I get the following error

Unhandled Runtime Error
Error: Unable to find an active editor state. State helpers or node methods can only be used synchronously during the callback of editor.update() or editorState.read().

To Reproduce
Steps to reproduce the behavior:

1. create a next.js 13 project
2. define a component with the following code

'use client'

import {
    EditorComposer,
    Editor,
    ToolbarPlugin,
    AlignDropdown,
    InsertDropdown,
  } from 'verbum';
  
  const Verbum = () => {
    return (
      
    <EditorComposer>
        <Editor hashtagsEnables={true}>
        <ToolbarPlugin defaultFontSize="20px">
            <InsertDropdown enablePool={true} />
            <AlignDropdown />
        </ToolbarPlugin>
        </Editor>
    </EditorComposer>
    );
  };
  
  export default Verbum;

3. import the component into src/app/page.jsx
4. run the next.js application yarn run dev
5. you'll get the error

Expected behavior
No error in next.js and Lexical editor rendered

Screenshots

Desktop (please complete the following information):

• OS: MacOS moneterey 12.2.1
• chrome

Describe the bug
I just installed the package in a next.js project and I get this error:

error - ../../node_modules/katex/dist/katex.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: ../../node_modules/verbum/dist/verbum.esm.js

To Reproduce

1. start a new next.js app with yarn create next-app <name>
2. install verbum: yarn add verbum
3. copy the example in the README
4. start the development server with yarn dev

Is your feature request related to a problem? Please describe.
For some plugins, we need to access editor from useLexicalComposerContext() - How to do that ?
For example, the FloatingLinkEditor needs it.

Describe the solution you'd like
Being able to access it like with vanilla Lexical : const [editor] = useLexicalComposerContext() - Or tell us how to access own Verbum one ?

Describe the bug
The error when selecting the Code Block drop-down option is as follows:

react-dom.development.js:4312 Uncaught Error: updateEditor: selection has been lost because the previously selected nodes have been removed and selection wasn't moved to another node. Ensure selection changes after removing/replacing a selected node.
at beginUpdate (Lexical.dev.js:5791:1)
at updateEditor (Lexical.dev.js:5847:1)
at LexicalEditor.update (Lexical.dev.js:8549:1)
at formatCode (BlockFormatDropdown.tsx:88:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
at executeDispatch (react-dom.development.js:9041:1)
at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)

Describe the bug
emojisEnabled does not seem to have any effect.

To Reproduce
Steps to reproduce the behavior:

1. Add emojisEnabled to the Editor component

Expected behavior
An emoji button in the toolbar? Auto-completing emoji names prefixed with :? I'm not sure.

Screenshots
https://codesandbox.io/s/verbum-editor-forked-znf6rw?file=/src/App.tsx:298-311

Is your feature request related to a problem? Please describe.
I want to create a custom node and plugin, can't figure how to add my custom node to the initial composer config

Describe the solution you'd like
Option to add nodes array to the inner LexicalComposer

If there is no support for nodes extension currently, how can I get the editor instance via plugin with useLexicalComposerContext()? Placing the plugin inside the EditorComposer as a child? I am getting this error:

Uncaught Error: LexicalComposerContext.useLexicalComposerContext: cannot find a LexicalComposerContext
at useLexicalComposerContext
But can't figure out why, because EditorComposer is a wrapper for LexicalComposer.

I would be happy for any support or a workaround solution. Thanks in advance.

I figure this is not going to be the most popular feature request but it's hard to find an RTE that has a strong footnote feature, and I need it for a project I'm working on. I'm thinking of a footnote/citation feature basically like Wikipedia's, with numbered, hyperlinked in-text superscripts that link to listed-out elements at the bottom. Ideally, it should also have automatic numbering behaviour when adding a new footnote or deleting an existing one.

Without doing a full exploration, I'm guessing this would be a fairly big lift as there are multiple independent behaviours going on and the automatic numbering update requires hooking into the global editor state. I may have time to attempt it myself in the near future but it would be amazing if you could pull it off before that.

Thanks for reading