fixes

app/client/components/Editor.tsx

@@ -1,159 +0,0 @@
-import { Card, Heading, SystemStyleObject } from '@chakra-ui/react';
-import EditorJS, { EditorConfig } from '@editorjs/editorjs';
-import Header from '@editorjs/header';
-import List from '@editorjs/list';
-import Quote from '@editorjs/quote';
-import { useEffect, useRef } from 'react';
-
-// @ts-ignore
-import Link from '@coolbytes/editorjs-link';
-
-export function Editor({ initialData }: { initialData?: EditorConfig['data'] }) {
-  const ejInstance = useRef<EditorJS | undefined | null>();
-
-  const initEditor = () => {
-    const editor = new EditorJS({
-      holder: 'editorjs',
-      onReady: () => {
-        ejInstance.current = editor;
-      },
-      autofocus: true,
-      data: initialData,
-      // onChange: async () => {
-      //   const content = await editor.saver.save();
-      // },
-      tools: {
-        header: Header,
-        list: List,
-        link: Link,
-        quote: Quote
-      }
-    });
-  };
-
-  useEffect(() => {
-    if (ejInstance.current === null) {
-      initEditor();
-    }
-
-    return () => {
-      ejInstance?.current?.destroy();
-      ejInstance.current = null;
-    };
-  }, []);
-
-  return (
-    <>
-      <Card.Root
-        variant={'subtle'}
-        width="100%"
-        maxWidth="840px"
-        minHeight="sm"
-        justifyContent="center"
-        alignItems="center"
-      >
-        <Card.Header>
-          <Heading textAlign="center">Editor</Heading>
-        </Card.Header>
-        <Card.Body
-          width="90%"
-          css={{
-            '& *': {
-              fontSize: 'revert',
-              fontWeight: 'revert'
-            },
-            ...editorJsStyles
-          }}
-        >
-          <div className="editorjs" id="editorjs"></div>
-        </Card.Body>
-      </Card.Root>
-    </>
-  );
-}
-
-const editorJsStyles:
-  | SystemStyleObject
-  | Omit<Array<SystemStyleObject | undefined>, keyof any[]>
-  | undefined = {
-  '& .ce-block--selected .ce-block__content, \
-  & .ce-inline-toolbar, \
-  & .codex-editor--narrow .ce-toolbox, \
-  & .ce-conversion-toolbar, \
-  & .ce-settings, \
-  & .ce-settings__button, \
-  & .ce-toolbar__settings-btn, \
-  & .cdx-button, \
-  & .ce-popover': {
-    background: 'colorPalette.500',
-    border: 'none'
-  },
-
-  '& .ce-inline-tool, \
-  & .ce-conversion-toolbar__label, \
-  & .ce-toolbox__button, \
-  & .cdx-settings-button, \
-  & .ce-toolbar__plus': {
-    color: 'colorPalette.500'
-  },
-
-  '& ::selection': {
-    background: 'colorPalette.500'
-  },
-
-  '& .cdx-settings-button:hover, \
-  & .ce-settings__button:hover, \
-  & .ce-toolbox__button--active, \
-  & .ce-toolbox__button:hover, \
-  & .cdx-button:hover, \
-  & .ce-inline-toolbar__dropdown:hover, \
-  & .ce-inline-tool:hover, \
-  & .ce-popover__item:hover, \
-  & .ce-toolbar__settings-btn:hover': {
-    background: 'colorPalette.500',
-    color: 'fg'
-  },
-
-  '& .cdx-notify--error': {
-    background: 'red !important'
-  },
-
-  '& .cdx-notify__cross::after, & .cdx-notify__cross::before': {
-    background: 'white'
-  },
-
-  '& .ce-toolbar__plus:hover, \
-   & .ce-popover__container': {
-    backgroundColor: 'bg.emphasized',
-    color: 'colorPalette.500',
-    border: 'none'
-  },
-
-  '& .ce-popover-item:hover:not(.ce-popover-item--no-hover)': {
-    backgroundColor: 'colorPalette.500',
-    color: 'fg'
-  },
-
-  '& .cdx-search-field': {
-    background: 'bg.muted',
-    color: 'fg',
-    border: 'none'
-  },
-
-  '& .ce-popover-item__title, \
-   & .ce-popover-item__icon': {
-    color: 'fg'
-  },
-
-  '& .ce-popover-item-separator': {
-    color: 'bg.muted'
-  },
-
-  '& .ce-toolbar__settings-btn': {
-    color: 'white'
-  },
-
-  '& .ce-toolbar__settings-btn:hover': {
-    color: 'black'
-  }
-};

app/client/components/EditorSlate.tsx

@@ -1,6 +1,6 @@
 import { Button, Card, Stack, Text, Wrap } from '@chakra-ui/react';
 import isHotkey from 'is-hotkey';
-import React, { KeyboardEvent, MouseEvent, useCallback, useEffect, useMemo } from 'react';
+import React, { KeyboardEvent, MouseEvent, useCallback, useMemo } from 'react';
 import { createEditor, Descendant, Editor, Element as SlateElement, Transforms } from 'slate';
 import { withHistory } from 'slate-history';
 import {