import { QuoteNode } from './QuoteNode';
import { $getSelection, $isRangeSelection } from 'lexical';
import { $wrapLeafNodesInElements } from '@lexical/selection';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';

const Toolbar = () => {
  const [editor] = useLexicalComposerContext();

  const addQuote = () => {
    editor.update(() => {
      const selection = $getSelection();

      if ($isRangeSelection(selection)) {
        $wrapLeafNodesInElements(selection, () => new QuoteNode());
      }
    });
  }

  return (
    <section className="Toolbar">
      <button type="button" onClick={addQuote}>
        Add Quote
      </button>
    </section>
  )
}

export { Toolbar };