Add controller shared context (#852)

packages/outline-playground/src/controllers/PlaygroundController.js

@@ -22,6 +22,8 @@ export type PlaygroundContext = {
   triggerListeners(type: 'readonly' | 'clear', value: ListenerValue): void,
 };
 
+export type PlaygroundSharedContext = {};
+
 const config = {
   theme: {
     paragraph: 'editor-paragraph',
@@ -90,7 +92,17 @@ function createPlaygroundContext(): PlaygroundContext {
   };
 }
 
-const PlaygroundController: Controller<PlaygroundContext> =
-  createController<PlaygroundContext>(createPlaygroundContext, config);
+function createPlaygroundSharedContext(): PlaygroundSharedContext {
+  return {};
+}
+
+const PlaygroundController: Controller<
+  PlaygroundContext,
+  PlaygroundSharedContext,
+> = createController<PlaygroundContext, PlaygroundSharedContext>(
+  createPlaygroundContext,
+  createPlaygroundSharedContext,
+  config,
+);
 
 export default PlaygroundController;

packages/outline-react/src/OutlineController.js

@@ -10,56 +10,60 @@
 import type {OutlineEditor, EditorState, EditorThemeClasses} from 'outline';
 
 import * as React from 'react';
-import {createContext, useContext, useMemo} from 'react';
+import {createContext as createReactContext, useContext, useMemo} from 'react';
 import {createEditor} from 'outline';
 import invariant from 'shared/invariant';
 
-type ControllerContext<Context> = null | [OutlineEditor, Context];
+type ControllerContext<Context, SharedContext> =
+  | null
+  | [OutlineEditor, Context, null | SharedContext];
 
-export type Controller<Context> = {
+export type Controller<Context, SharedContext> = {
   ({children: React$Node}): React$Node,
-  __context: React$Context<ControllerContext<Context>>,
+  __context: React$Context<ControllerContext<Context, SharedContext>>,
 };
 
-export function createController<Context>(
-  createControllerContext: () => Context,
+export function createController<Context, SharedContext>(
+  createContext: () => Context,
+  createSharedContext: () => SharedContext,
   editorConfig?: {
     initialEditorState?: EditorState,
     theme?: EditorThemeClasses,
   },
-): Controller<Context> {
-  const ControlledContext = createContext<ControllerContext<Context>>(null);
+): Controller<Context, SharedContext> {
+  const ControllerContextInternal =
+    createReactContext<ControllerContext<Context, SharedContext>>(null);
 
   function ControllerComponent({children}) {
-    const existingContext = useContext(ControlledContext);
-    if (existingContext !== null) {
-      invariant(
-        false,
-        'OutlineController\'s of the same type cannot be nested',
-      );
-    }
+    const existingController = useContext(ControllerContextInternal);
     const controllerContext = useMemo(() => {
-      const context: Context = createControllerContext();
+      const context: Context = createContext();
       const editor = createEditor<Context>({
         ...editorConfig,
         context,
       });
-      return [editor, context];
-    }, []);
+      let sharedContextValue: SharedContext | null = null;
+      // Create shared context
+      if (existingController === null) {
+        sharedContextValue = createSharedContext();
+      }
+      return [editor, context, sharedContextValue];
+    }, [existingController]);
+
     return (
-      <ControlledContext.Provider value={controllerContext}>
+      <ControllerContextInternal.Provider value={controllerContext}>
         {children}
-      </ControlledContext.Provider>
+      </ControllerContextInternal.Provider>
     );
   }
-  ControllerComponent.__context = ControlledContext;
+  ControllerComponent.__context = ControllerContextInternal;
 
   return ControllerComponent;
 }
 
-export function useController<Context>(
-  controller: Controller<Context>,
-): [OutlineEditor, Context] {
+export function useController<Context, SharedContext>(
+  controller: Controller<Context, SharedContext>,
+): [OutlineEditor, Context, null | SharedContext] {
   const context = useContext(controller.__context);
   if (context === null) {
     invariant(

scripts/error-codes/codes.json

@@ -43,5 +43,6 @@
   "41": "createNode: node does not exist in nodeMap",
   "42": "reconcileNode: prevNode or nextNode does not exist in nodeMap",
   "43": "reconcileNode: parentDOM is null",
-  "44": "Reconciliation: could not find DOM element for node key \"${key}\""
+  "44": "Reconciliation: could not find DOM element for node key \"${key}\"",
+  "45": "OutlineCotext.useOutlineContext: cannot find matching OutlineContext"
 }