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

This PR:

add support for French and English localization. enable json module add support for browser-based language detector enable transpile-only to skip type checking on i18next initialization

Hi there!

This pull is a very small fix to enable equation nodes (math/latex) to be serialized. Currently the exportJSON() method fails client-side due to the type property of the serialized return object being emoji instead of equation.

To test:

1. In the storybook component, add enableEquations to <InsertDropdown/> component and add a console log to the onChange event. For convenience:

export const FullEditor = () => (
  <EditorComposer>
    <Editor onChange={stringifiedNodes => console.log(stringifiedNodes)}>
      <ToolbarPlugin>
        <FontFamilyDropdown />
        <FontSizeDropdown />
        <Divider />
        <BoldButton />
        <ItalicButton />
        <UnderlineButton />
        <CodeFormatButton />
        <InsertLinkButton />
        <TextColorPicker />
        <BackgroundColorPicker />
        <TextFormatDropdown />
        <Divider />
        <InsertDropdown enableEquations />
        <Divider />
        <AlignDropdown />
      </ToolbarPlugin>
    </Editor>
  </EditorComposer>
);

2. Add any equation to the Storybook playground
3. Profit!

Hi,

This pull request is converting all buttons from submit to button. It is required to avoid submit when use the editor inside a form.

<form>
    <Editor />
</form>

Thanks.

Currently we can't run npm run storybook because the build fails.

Error Log:

ERROR in ./stories/Verbum.stories.tsx
Module not found: Error: Can't resolve '../src/App' in '~/verbum/stories'
 @ ./stories/Verbum.stories.tsx 48:0-39 56:13-26

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

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

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.

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

https://github.com/ozanyurtsever/verbum/blob/07cd283aadb2ca05ddc51a23582e38313b0aeaaa/src/plugins/ToolbarPlugin/components/InsertDropdown.tsx#L64

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