// import {RichTextPlugin} from "@lexical/react/LexicalRichTextPlugin";
// import {ContentEditable} from "@lexical/react/LexicalContentEditable";
// import {OnChangePlugin} from "@lexical/react/LexicalOnChangePlugin";
// import {HistoryPlugin} from "@lexical/react/LexicalHistoryPlugin";
// import {LinkPlugin} from "@lexical/react/LexicalLinkPlugin";
// import {MarkdownShortcutPlugin} from "@lexical/react/LexicalMarkdownShortcutPlugin";
// import {LexicalComposer} from "@lexical/react/LexicalComposer";

// import {AutoFocusPlugin} from '@lexical/react/LexicalAutoFocusPlugin';
// import {AutoScrollPlugin} from '@lexical/react/LexicalAutoScrollPlugin';
// import {CharacterLimitPlugin} from '@lexical/react/LexicalCharacterLimitPlugin';
// import {CheckListPlugin} from '@lexical/react/LexicalCheckListPlugin';
// import {ClearEditorPlugin} from '@lexical/react/LexicalClearEditorPlugin';
// import {CollaborationPlugin} from '@lexical/react/LexicalCollaborationPlugin';
// import {HashtagPlugin} from '@lexical/react/LexicalHashtagPlugin';
// import {ListPlugin} from '@lexical/react/LexicalListPlugin';
// // import {PlainTextPlugin} from '@lexical/react/LexicalPlainTextPlugin';
// import {TablePlugin} from '@lexical/react/LexicalTablePlugin';

// import {createWebsocketProvider} from './collaboration'
// import {useSettings} from './context/SettingsContext'
// import {useSharedHistoryContext} from './context/SharedHistoryContext'
// import TableCellNodes from './nodes/TableCellNodes'
// import ActionsPlugin from './plugins/ActionsPlugin'
// import AutocompletePlugin from './plugins/AutocompletePlugin'
// import AutoEmbedPlugin from './plugins/AutoEmbedPlugin'
// import AutoLinkPlugin from './plugins/AutoLinkPlugin'
// import ClickableLinkPlugin from './plugins/ClickableLinkPlugin'
// import CodeActionMenuPlugin from './plugins/CodeActionMenuPlugin';
// import CodeHighlightPlugin from './plugins/CodeHighlightPlugin'
// import CollapsiblePlugin from './plugins/CollapsiblePlugin'
// import CommentPlugin from './plugins/CommentPlugin'
// import ComponentPickerPlugin from './plugins/ComponentPickerPlugin'
// import DraggableBlockPlugin from './plugins/DraggableBlockPlugin'
// import EmojiPickerPlugin from './plugins/EmojiPickerPlugin'
// import EmojisPlugin from './plugins/EmojisPlugin'
// import EquationsPlugin from './plugins/EquationsPlugin'
// import ExcalidrawPlugin from './plugins/ExcalidrawPlugin'
// import FigmaPlugin from './plugins/FigmaPlugin'
// import FloatingLinkEditorPlugin from './plugins/FloatingLinkEditorPlugin'
// import FloatingTextFormatToolbarPlugin from './plugins/FloatingTextFormatToolbarPlugin'
// import HorizontalRulePlugin from './plugins/HorizontalRulePlugin'
// import ImagesPlugin from './plugins/ImagesPlugin'
// import KeywordsPlugin from './plugins/KeywordsPlugin'
// import ListMaxIndentLevelPlugin from './plugins/ListMaxIndentLevelPlugin'
// import MarkdownShortcutPlugin from './plugins/MarkdownShortcutPlugin'
// import {MaxLengthPlugin} from './plugins/MaxLengthPlugin'
// import MentionsPlugin from './plugins/MentionsPlugin'
// import PollPlugin from './plugins/PollPlugin'
// import SpeechToTextPlugin from './plugins/SpeechToTextPlugin'
// import TabFocusPlugin from './plugins/TabFocusPlugin'
// import TableCellActionMenuPlugin from './plugins/TableActionMenuPlugin'
// import TableCellResizer from './plugins/TableCellResizer'
// import TableOfContentsPlugin from './plugins/TableOfContentsPlugin'
// import {TablePlugin as NewTablePlugin} from './plugins/TablePlugin'
// import ToolbarPlugin from './plugins/ToolbarPlugin'
// import TreeViewPlugin from './plugins/TreeViewPlugin'
// import TwitterPlugin from './plugins/TwitterPlugin'
// import YouTubePlugin from './plugins/YouTubePlugin'
// import PlaygroundEditorTheme from './themes/PlaygroundEditorTheme'
// import ContentEditable from './ui/ContentEditable'
// import ErrorBoundary from './ui/ErrorBoundary'
// import Placeholder from './ui/Placeholder'

import * as React from 'react';
import {useRef, useState} from 'react';
import {
	EditorComposer,
	Editor as InternalEditor,
	ToolbarPlugin,
	AlignDropdown,
	BackgroundColorPicker,
	BoldButton,
	CodeFormatButton,
	FloatingLinkEditor,
	FontFamilyDropdown,
	FontSizeDropdown,
	InsertDropdown,
	InsertLinkButton,
	ItalicButton,
	TextColorPicker,
	TextFormatDropdown,
	UnderlineButton,
	Divider,
} from 'verbum';

// import nodes from './Nodes'

export const Editor = (props) => {
	return (
		// <LexicalComposer initialConfig={{editorState: props.state, namespace: props.namespace, onError: props.onError, theme: props.theme, nodes}}>
		// 	<ToolbarPlugin/>
		// 	<RichTextPlugin contentEditable={<ContentEditable/>} placeholder={<div>Sample...</div>}/>
		// 	{props.onChange && <OnChangePlugin onChange={props.onChange} ignoreSelectionChange={true}/>}
		// 	<HistoryPlugin/>
		// 	<LinkPlugin/>
		// 	<MarkdownShortcutPlugin/>
		// </LexicalComposer>

		<EditorComposer>
			<InternalEditor hashtagsEnabled={true} onChange={props.onChange} initialEditorState={props.state}>
				<ToolbarPlugin defaultFontSize="20px">
					<FontFamilyDropdown />
					<FontSizeDropdown />
					<Divider />
					<BoldButton />
					<ItalicButton />
					<UnderlineButton />
					<CodeFormatButton />
					<InsertLinkButton />
					<TextColorPicker />
					<BackgroundColorPicker />
					<TextFormatDropdown />
					<Divider />
					<InsertDropdown enablePoll={true} enableTable={true} />
					<Divider />
					<AlignDropdown />
				</ToolbarPlugin>
			</InternalEditor>
		</EditorComposer>
	)
}