gistfile1.txt

import React, { useState, useMemo, useCallback } from "react";
import Autosuggest from "react-autosuggest";
import {
  fetchSuggestions,
  clearSuggestions,
  setCommandInput,
  selectSuggestions,
} from "./state";

import { useDispatch, useSelector } from "react-redux";
import { Suggestion } from "./state/types";
import { selectCommandInputValue } from "./state/reducer";
import { ClassNames } from "@emotion/core";
import { Editable, withReact, useSlate, Slate } from "slate-react";
import { Editor, Transforms, createEditor, Node } from "slate";

import { typography, space, color } from "styled-system";

const initialValue: Node[] = [
  {
    type: "paragraph",
    children: [
      { text: "This is editable " },
      { text: "rich", bold: true },
      { text: " text, " },
      { text: "much", italic: true },
      { text: " better than a " },
      { text: "<textarea>", code: true },
      { text: "!" },
    ],
  },
  {
    type: "paragraph",
    children: [
      {
        text:
          "Since it's rich text, you can do things like turn a selection of text ",
      },
      { text: "bold", bold: true },
      {
        text:
          ", or add a semantically rendered block quote in the middle of the page, like this:",
      },
    ],
  },
  {
    type: "block-quote",
    children: [{ text: "A wise quote." }],
  },
  {
    type: "paragraph",
    children: [{ text: "Try it out for yourself!" }],
  },
];

const Element = ({ attributes, children, element }: any) => {
  switch (element.type) {
    case "block-quote":
      return <blockquote {...attributes}>{children}</blockquote>;
    case "bulleted-list":
      return <ul {...attributes}>{children}</ul>;
    case "heading-one":
      return <h1 {...attributes}>{children}</h1>;
    case "heading-two":
      return <h2 {...attributes}>{children}</h2>;
    case "list-item":
      return <li {...attributes}>{children}</li>;
    case "numbered-list":
      return <ol {...attributes}>{children}</ol>;
    default:
      return <p {...attributes}>{children}</p>;
  }
};

const Leaf = ({ attributes, children, leaf }: any) => {
  if (leaf.bold) {
    children = <strong>{children}</strong>;
  }

  if (leaf.code) {
    children = <code>{children}</code>;
  }

  if (leaf.italic) {
    children = <em>{children}</em>;
  }

  if (leaf.underline) {
    children = <u>{children}</u>;
  }

  return <span {...attributes}>{children}</span>;
};

export const CommandInput = () => {
  const editor = useMemo(() => withReact(createEditor()), []);
  const renderElement = useCallback((props) => <Element {...props} />, []);
  const renderLeaf = useCallback((props) => <Leaf {...props} />, []);
  const [editorValue, setEditorValue] = useState(initialValue);

  return (
    <ClassNames>
      {({ css, theme }) => (
        <Slate
          editor={editor}
          value={editorValue}
          onChange={(value) => setEditorValue(value)}
        >
          <Editable
            renderElement={renderElement}
            renderLeaf={renderLeaf}
            placeholder="Enter some rich text…"
            spellCheck
            autoFocus
            onKeyDown={(event) => {
              // for (const hotkey in HOTKEYS) {
              // if (isHotkey(hotkey, event)) {
              // event.preventDefault();
              //   const mark = HOTKEYS[hotkey];
              //   toggleMark(editor, mark);
              // }
              // }
            }}
          />
        </Slate>
      )}
    </ClassNames>
  );
};