feat: update to slate 0.58 && fix site build

packages/example/src/Client.tsx

@@ -10,7 +10,7 @@ import styled from '@emotion/styled'
 
 import { withIOCollaboration, useCursor } from '@slate-collaborative/client'
 
-import { Instance, Title, H4, Button } from './Elements'
+import { Instance, Title, H4, Button } from './Components'
 
 import EditorFrame from './EditorFrame'
 

packages/example/src/EditorFrame.tsx

@@ -9,11 +9,11 @@ import {
   useSlate
 } from 'slate-react'
 
-import { ClientFrame, IconButton, Icon } from './Elements'
+import { ClientFrame, IconButton, Icon } from './Components'
 
 import Caret from './Caret'
 
-const LIST_TYPES = ['numbered-list', 'bulleted-list']
+const LIST_TYPES: string[] = ['numbered-list', 'bulleted-list']
 
 export interface EditorFrame {
   editor: ReactEditor
@@ -75,7 +75,7 @@ const toggleBlock = (editor: any, format: any) => {
   const isList = LIST_TYPES.includes(format)
 
   Transforms.unwrapNodes(editor, {
-    match: n => LIST_TYPES.includes(n.type),
+    match: n => LIST_TYPES.includes(n.type as any),
     split: true
   })
 
@@ -151,10 +151,12 @@ const Leaf: React.FC<RenderLeafProps> = ({ attributes, children, leaf }) => {
   return (
     <span
       {...attributes}
-      style={{
-        position: 'relative',
-        backgroundColor: leaf.alphaColor
-      }}
+      style={
+        {
+          position: 'relative',
+          backgroundColor: leaf.alphaColor
+        } as any
+      }
     >
       {leaf.isCaret ? <Caret {...(leaf as any)} /> : null}
       {children}

packages/example/src/Room.tsx

@@ -3,7 +3,7 @@ import React, { useState, ChangeEvent } from 'react'
 import faker from 'faker'
 import debounce from 'lodash/debounce'
 
-import { RoomWrapper, H4, Title, Button, Grid, Input } from './Elements'
+import { RoomWrapper, H4, Title, Button, Grid, Input } from './Components'
 
 import Client from './Client'