added slate editor, fixes

app/client/components/EditorTestSlate.tsx

@@ -0,0 +1,56 @@
+import { Card, Heading } from '@chakra-ui/react';
+import { useState } from 'react';
+import { BaseEditor, createEditor, Descendant } from 'slate';
+import { Editable, ReactEditor, Slate, withReact } from 'slate-react';
+
+type CustomElement = { type: 'paragraph'; children: CustomText[] };
+type CustomText = { text: string };
+
+declare module 'slate' {
+  interface CustomTypes {
+    Editor: BaseEditor & ReactEditor;
+    Element: CustomElement;
+    Text: CustomText;
+  }
+}
+
+export function EditorSlate() {
+  const initialValue: Descendant[] = [
+    {
+      type: 'paragraph',
+      children: [{ text: 'A line of text in a paragraph.' }]
+    }
+  ];
+
+  const [editor] = useState(() => withReact(createEditor()));
+  return (
+    // Add the editable component inside the context.
+    <>
+      <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'
+            }
+          }}
+        >
+          <Slate editor={editor} initialValue={initialValue}>
+            <Editable />
+          </Slate>
+        </Card.Body>
+      </Card.Root>
+    </>
+  );
+}