@keystone-6 - Standalone Editor

// PS. Tailwind classes used for wrapper.

import { FC, useEffect, useState } from 'react'
import { FieldContainer } from '@keystone-ui/fields'
import { Field } from '@keystone-6/fields-document/views'

enum EditorState {
  Loading,
  Ready,
}

const emptyDocument = [
  {
    type: 'heading',
    level: 1,
    children: [{ text: 'Start here' }],
  },
  {
    type: 'paragraph',
    children: [{ text: 'Start writing there!' }],
  },
]

const Loading = () => (
  <div className="flex justify-center items-center">
    <div className="spinner-border animate-spin inline-block w-8 h-8 border-4 rounded-full" role="status">
      <span className="visually-hidden">Loading...</span>
    </div>
  </div>
)

const field: any = {
  componentBlocks: [],
  relationships: {},
  documentFeatures: {
    formatting: {
      inlineMarks: {
        bold: true,
        italic: true,
        underline: true,
        strikethrough: true,
        code: false,
        keyboard: false,
        subscript: false,
        superscript: false,
      },
      alignment: {
        center: false,
        end: false,
      },
      blockTypes: {
        blockquote: true,
        code: false,
      },
      headingLevels: [1, 2, 3],
      listTypes: { ordered: true, unordered: true },
      softBreaks: true,
    },
    layouts: [],
    dividers: true,
    links: true,
  },
}

interface Props {
  onChange: (data: any[]) => void
}

const Editor: FC<Props> = ({ onChange }) => {
  const [reload, setReload] = useState<EditorState>(EditorState.Loading)
  const [description, setDescription] = useState<any[]>(emptyDocument)

  useEffect(() => {
    setReload(EditorState.Ready)
  }, [])

  useEffect(() => {
    console.log(description)
    onChange(description)
  }, [description])

  return (
    <div className="h-96 border-x border-gray-300 px-5">
      {reload === EditorState.Loading ? (
        <Loading />
      ) : (
        <FieldContainer>
          <Field
            value={description}
            autoFocus={false}
            field={field}
            onChange={(document) => {
              setDescription(document)
            }}
          />
        </FieldContainer>
      )}
    </div>
  )
}

export default Editor