Fix example types (#5812)

* fix: types for richtext.tsx

* fix: types for check-lists, code-highlighting and custom placeholder

* fix: types for editable-voids, embeds, forced-layout, hovering-toolbar

* fix: types for remaining examples

* fix: typescript error for files in image element

* fix: types for examples and some minor fixes

* fix: normalize-tokens.ts type

* fix: types for [example].tsx

site/examples/ts/components/index.tsx

@@ -1,12 +1,11 @@
-import React, { ReactNode, Ref, PropsWithChildren } from 'react'
+import { css, cx } from '@emotion/css'
+import React, { PropsWithChildren, ReactNode, Ref } from 'react'
 import ReactDOM from 'react-dom'
-import { cx, css } from '@emotion/css'
 
 interface BaseProps {
   className: string
   [key: string]: unknown
 }
-type OrNull<T> = T | null
 
 export const Button = React.forwardRef(
   (
@@ -21,7 +20,7 @@ export const Button = React.forwardRef(
         reversed: boolean
       } & BaseProps
     >,
-    ref: Ref<OrNull<HTMLSpanElement>>
+    ref: Ref<HTMLSpanElement>
   ) => (
     <span
       {...props}
@@ -43,67 +42,10 @@ export const Button = React.forwardRef(
   )
 )
 
-export const EditorValue = React.forwardRef(
-  (
-    {
-      className,
-      value,
-      ...props
-    }: PropsWithChildren<
-      {
-        value: any
-      } & BaseProps
-    >,
-    ref: Ref<OrNull<null>>
-  ) => {
-    const textLines = value.document.nodes
-      .map(node => node.text)
-      .toArray()
-      .join('\n')
-    return (
-      <div
-        ref={ref}
-        {...props}
-        className={cx(
-          className,
-          css`
-            margin: 30px -20px 0;
-          `
-        )}
-      >
-        <div
-          className={css`
-            font-size: 14px;
-            padding: 5px 20px;
-            color: #404040;
-            border-top: 2px solid #eeeeee;
-            background: #f8f8f8;
-          `}
-        >
-          Slate's value as text
-        </div>
-        <div
-          className={css`
-            color: #404040;
-            font: 12px monospace;
-            white-space: pre-wrap;
-            padding: 10px 20px;
-            div {
-              margin: 0 0 0.5em;
-            }
-          `}
-        >
-          {textLines}
-        </div>
-      </div>
-    )
-  }
-)
-
 export const Icon = React.forwardRef(
   (
     { className, ...props }: PropsWithChildren<BaseProps>,
-    ref: Ref<OrNull<HTMLSpanElement>>
+    ref: Ref<HTMLSpanElement>
   ) => (
     <span
       {...props}
@@ -123,7 +65,7 @@ export const Icon = React.forwardRef(
 export const Instruction = React.forwardRef(
   (
     { className, ...props }: PropsWithChildren<BaseProps>,
-    ref: Ref<OrNull<HTMLDivElement>>
+    ref: Ref<HTMLDivElement>
   ) => (
     <div
       {...props}
@@ -145,7 +87,7 @@ export const Instruction = React.forwardRef(
 export const Menu = React.forwardRef(
   (
     { className, ...props }: PropsWithChildren<BaseProps>,
-    ref: Ref<OrNull<HTMLDivElement>>
+    ref: Ref<HTMLDivElement>
   ) => (
     <div
       {...props}
@@ -176,7 +118,7 @@ export const Portal = ({ children }: { children?: ReactNode }) => {
 export const Toolbar = React.forwardRef(
   (
     { className, ...props }: PropsWithChildren<BaseProps>,
-    ref: Ref<OrNull<HTMLDivElement>>
+    ref: Ref<HTMLDivElement>
   ) => (
     <Menu
       {...props}