export default function EditifyPage() {
  const onChange = (html: string, text: string) => {
    console.log('change event: new html: ', html);
    console.log('change event: new text: ', text);
  };

  const onSelectionChange = (selection: Selection) => {
    console.log('selectionchange event: selected text: ', selection.toString());
  };

  React.useEffect(() => {
    // editify can be used only in client side
    const { Editify } = require("editify");

    const editor = new Editify("editor");

    editor.on("change", onChange);
    editor.on("selectionchange", onSelectionChange);

    return () => {
      editor.off("change", onChange);
      editor.off("selectionchange", onSelectionChange);
    };
  }, []);

  return (
    <React.Fragment>
      <div>
        <button id="toolbar-bold">BOLD</button>
      </div>
      <div id="editor">
        <p>This line is editable!</p>
      </div>
    </React.Fragment>
  );
}