feat(playground): add serialization and deserialization (#343)

* Render the playground state

* Allow editing state

* Allow editing textarea

* Restoring state works

* Fix some requires for playground

* Lint

* Missing file

* Fix crash in trailing node extension

* Fix remirror importer

* Lint

packages/@remirror/extension-trailing-node/src/trailing-node-extension.ts

@@ -101,7 +101,7 @@ export class TrailingNodeExtension extends PlainExtension<TrailingNodeOptions> {
           update: (view) => {
             const { state, dispatch } = view;
             const { doc } = state;
-            const shouldInsertNodeAtEnd = this.getPluginState<boolean>();
+            const shouldInsertNodeAtEnd = this.getPluginState<boolean>(state);
             const endPosition = doc.content.size;
 
             if (!shouldInsertNodeAtEnd) {

packages/@remirror/playground/scripts/import-remirror.ts

@@ -72,9 +72,6 @@ function template({ extensions, presets }: Everything) {
 *                                                                              *
 \\******************************************************************************/
 
-// Remirror custom imports
-import { RemirrorProvider, useExtension, useManager, useRemirror } from '@remirror/react';
-
 import { useRemirrorPlayground } from './use-remirror-playground';
 
 export const IMPORT_CACHE: { [moduleName: string]: any } = {
@@ -83,11 +80,13 @@ export const IMPORT_CACHE: { [moduleName: string]: any } = {
 
   // Manual-imported
   remirror: require('remirror'),
-  'remirror/react': { RemirrorProvider, useManager, useExtension, useRemirror },
+  'remirror/react': require('remirror/react'),
   '@remirror/playground': { useRemirrorPlayground },
 
   // External dependencies
   '@babel/runtime/helpers/interopRequireDefault': require('@babel/runtime/helpers/interopRequireDefault'),
+  '@babel/runtime/helpers/interopRequireWildcard': require('@babel/runtime/helpers/interopRequireWildcard'),
+  '@babel/runtime/helpers/slicedToArray': require('@babel/runtime/helpers/slicedToArray'),
   react: require('react'),
 };
 

packages/@remirror/playground/src/_remirror.tsx

@@ -6,9 +6,6 @@
 *                                                                              *
 \******************************************************************************/
 
-// Remirror custom imports
-import { RemirrorProvider, useExtension, useManager, useRemirror } from '@remirror/react';
-
 import { useRemirrorPlayground } from './use-remirror-playground';
 
 export const IMPORT_CACHE: { [moduleName: string]: any } = {
@@ -54,11 +51,13 @@ export const IMPORT_CACHE: { [moduleName: string]: any } = {
 
   // Manual-imported
   remirror: require('remirror'),
-  'remirror/react': { RemirrorProvider, useManager, useExtension, useRemirror },
+  'remirror/react': require('remirror/react'),
   '@remirror/playground': { useRemirrorPlayground },
 
   // External dependencies
   '@babel/runtime/helpers/interopRequireDefault': require('@babel/runtime/helpers/interopRequireDefault'),
+  '@babel/runtime/helpers/interopRequireWildcard': require('@babel/runtime/helpers/interopRequireWildcard'),
+  '@babel/runtime/helpers/slicedToArray': require('@babel/runtime/helpers/slicedToArray'),
   react: require('react'),
 };
 

packages/@remirror/playground/src/context.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { EditorState, RemirrorJSON } from 'remirror/core';
+
+export interface PlaygroundContextObject {
+  setContent: (state: Readonly<EditorState>) => void;
+  onContentChange: (callback: (state: RemirrorJSON) => void) => void;
+}
+
+export const PlaygroundContext = React.createContext<PlaygroundContextObject>({
+  setContent: () => {
+    console.warn('No playground context found, setContent ignored');
+  },
+  onContentChange: () => {
+    return () => {};
+  },
+});

packages/@remirror/playground/src/execute.tsx

@@ -1,6 +1,6 @@
 import * as crypto from 'crypto';
 import { languages } from 'monaco-editor';
-import React, { FC, useEffect, useMemo, useRef, useState } from 'react';
+import React, { FC, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 
 // addImport('@remirror/react', 'RemirrorProvider');
@@ -9,6 +9,7 @@ import { render, unmountComponentAtNode } from 'react-dom';
 import { debounce } from '@remirror/core-helpers';
 
 import { IMPORT_CACHE, INTERNAL_MODULES } from './_remirror';
+import { PlaygroundContext, PlaygroundContextObject } from './context';
 // import * as remirrorCoreExtensions from '@remirror/core-extensions';
 //import * as remirrorReact from '@remirror/react';
 //import * as remirror from 'remirror';
@@ -150,7 +151,11 @@ function runCode(code: string, requireFn: (mod: string) => any) {
 
 function runCodeInDiv(
   div: HTMLDivElement,
-  { code, requires }: { code: string; requires: string[] },
+  {
+    code,
+    requires,
+    playground,
+  }: { code: string; requires: string[]; playground: PlaygroundContextObject },
 ) {
   let active = true;
   (async function doIt() {
@@ -169,7 +174,9 @@ function runCodeInDiv(
       // Then mount the React element into the div
       render(
         <ErrorBoundary>
-          <Component />
+          <PlaygroundContext.Provider value={playground}>
+            <Component />
+          </PlaygroundContext.Provider>
         </ErrorBoundary>,
         div,
       );
@@ -223,16 +230,17 @@ export const Execute: FC<ExecuteProps> = function (props) {
   const { code: rawCode, requires: rawRequires } = props;
   const ref = useRef<HTMLDivElement | null>(null);
   const [code, requires] = useDebouncedValue([rawCode, rawRequires]);
+  const playground = useContext(PlaygroundContext);
   useEffect(() => {
     if (!ref.current) {
       return;
     }
 
-    const release = runCodeInDiv(ref.current, { code, requires });
+    const release = runCodeInDiv(ref.current, { code, requires, playground });
     return () => {
       release();
     };
-  }, [code, requires]);
+  }, [code, requires, playground]);
 
   return <div ref={ref} style={{ height: '100%' }} />;
 };