import React from "react";
import styled from "styled-components";
import {
  Editor as FabricEditor,
  EditorContext,
  WithEditorActions
} from "@atlaskit/editor-core";

const EditorWrapper = styled.div`
  flex-grow: 1;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: 8px;
  box-sizing: border-box;

  & > div {
    height: 100%;
    padding: 0 28px;

    & > div {
      height: 100%;
    }
  }

  .ProseMirror {
    height: 100%;
    -webkit-app-region: no-drag;
  }
`;

const contentTransformerProvider = () => ({
  encode(doc) {
    return {
      content: doc.toJSON(),
      time: Date.now(),
      textContent: doc.textContent,
      size: doc.textContent.length
    };
  }
});

export default function Editor({ defaultValue, onChange }) {
  return (
    <EditorContext>
      <EditorWrapper>
        <WithEditorActions
          render={actions => (
            <FabricEditor
              appearance="chromeless"
              allowLists={true}
              allowTasksAndDecisions={true}
              allowTextFormatting={true}
              shouldFocus={true}
              contentTransformerProvider={contentTransformerProvider}
              placeholder="Write some text..."
              onChange={() => actions.getValue().then(onChange)}
              defaultValue={defaultValue.content}
            />
          )}
        />
      </EditorWrapper>
    </EditorContext>
  );
}

@@ -437,14 +437,18 @@
 ng: 
-0
+8px
  28px
+ 0
 ;%0A%0A 
@@ -558,16 +558,54 @@
 no-drag;
+%0A%0A    table %7B%0A      width: 100%25;%0A    %7D
 %0A  %7D%0A%60;%0A
@@ -1163,32 +1163,65 @@
 rmatting=%7Btrue%7D%0A
+              allowTables=%7Btrue%7D%0A
               sh

Enable tables