wip: start refactoring remirror codebase

@remirror/dev/readme.md

@@ -25,6 +25,7 @@ import React from 'react';
 import { BoldExtension, ItalicExtension, UnderlineExtension } from '@remirror/core-extensions';
 import { ProsemirrorDevTools } from '@remirror/dev';
 import { ManagedRemirrorProvider, RemirrorExtension, RemirrorManager } from '@remirror/react';
+
 const MyEditor = () => {
   return (
     <RemirrorManager>

@remirror/dev/src/dev-components.ts

@@ -2,7 +2,7 @@ import applyDevTools from 'prosemirror-dev-tools';
 import { useEffect } from 'react';
 import { unmountComponentAtNode } from 'react-dom';
 
-import { useRemirrorContext } from '@remirror/react';
+import { useRemirror } from '@remirror/react';
 
 /**
  * A component that should be placed within the remirror context and will
@@ -15,7 +15,7 @@ import { useRemirrorContext } from '@remirror/react';
  * Based on https://github.com/d4rkr00t/prosemirror-dev-tools
  */
 export const ProsemirrorDevTools = () => {
-  const { view } = useRemirrorContext();
+  const { view } = useRemirror();
 
   useEffect(() => {
     applyDevTools(view);

@remirror/editor-social/src/components/emoji-suggestion-component.tsx

@@ -4,7 +4,7 @@ import { Type, useMultishift } from 'multishift';
 import { FunctionComponent } from 'react';
 
 import { EmojiObject, EmojiSuggestCommand } from '@remirror/extension-emoji';
-import { popupMenuPositioner, useRemirrorContext } from '@remirror/react';
+import { popupMenuPositioner, useRemirror } from '@remirror/react';
 import { useRemirrorTheme } from '@remirror/ui';
 
 import { DataParams, SocialExtensions } from '../social-types';
@@ -23,7 +23,7 @@ export const EmojiSuggestions: FunctionComponent<EmojiSuggestionsProps> = ({
   command,
 }) => {
   const { sxx } = useRemirrorTheme();
-  const { view, getPositionerProps } = useRemirrorContext<SocialExtensions>();
+  const { view, getPositionerProps } = useRemirror<SocialExtensions>();
   const { getMenuProps, getItemProps, itemHighlightedAtIndex, hoveredIndex } = useMultishift({
     highlightedIndexes: [highlightedIndex],
     type: Type.ControlledMenu,

@remirror/editor-social/src/components/social-suggestion-components.tsx

@@ -3,7 +3,7 @@ import { jsx } from '@emotion/core';
 import { forwardRef, FunctionComponent } from 'react';
 
 import { object, Position, RemirrorTheme } from '@remirror/core';
-import { useRemirrorContext } from '@remirror/react';
+import { useRemirror } from '@remirror/react';
 import { useRemirrorTheme } from '@remirror/ui';
 
 import {
@@ -120,7 +120,7 @@ export const AtSuggestions: FunctionComponent<UserSuggestionsProps> = ({
   data,
   setExitTriggeredInternally,
 }) => {
-  const { view, actions } = useRemirrorContext<SocialExtensions>();
+  const { view, actions } = useRemirror<SocialExtensions>();
 
   /**
    * Click handler for accepting a user suggestion
@@ -184,7 +184,7 @@ export const TagSuggestions: FunctionComponent<TagSuggestionsProps> = ({
   data,
   setExitTriggeredInternally,
 }) => {
-  const { view, actions } = useRemirrorContext<SocialExtensions>();
+  const { view, actions } = useRemirror<SocialExtensions>();
 
   /**
    * Click handler for accepting a tag suggestion

@remirror/editor-social/src/components/social-wrapper-component.tsx

@@ -4,7 +4,7 @@ import { jsx } from '@emotion/core';
 import { FC } from 'react';
 
 import { EmojiObject, EmojiSuggestCommand } from '@remirror/extension-emoji';
-import { useRemirrorContext } from '@remirror/react';
+import { useRemirror } from '@remirror/react';
 
 import {
   ActiveTagData,
@@ -71,7 +71,7 @@ export const SocialEditorComponent: FC<SocialEditorComponentProps> = ({
   const {
     getRootProps,
     state: { newState },
-  } = useRemirrorContext<SocialExtensions>();
+  } = useRemirror<SocialExtensions>();
   const content = newState.doc.textContent;
   return (
     <div>

@remirror/editor-wysiwyg/src/components/wysiwyg-editor.tsx

@@ -34,7 +34,7 @@ import {
   ManagedRemirrorProvider,
   RemirrorExtension,
   RemirrorManager,
-  useRemirrorContext,
+  useRemirror,
 } from '@remirror/react';
 import { RemirrorThemeProvider } from '@remirror/ui';
 
@@ -134,7 +134,7 @@ export const WysiwygEditor: FC<WysiwygEditorProps> = ({
  * Any component rendered has access to the remirror context.
  */
 const InnerEditor: FC<BubbleMenuProps> = ({ linkActivated, deactivateLink, activateLink }) => {
-  const { getRootProps } = useRemirrorContext<WysiwygExtensions>();
+  const { getRootProps } = useRemirror<WysiwygExtensions>();
 
   return (
     <EditorWrapper>

@remirror/editor-wysiwyg/src/components/wysiwyg-menu.tsx

@@ -15,7 +15,7 @@ import {
 import keyNames from 'w3c-keyname';
 
 import { ActionNames, AnyFunction, Attrs, getMarkAttrs, KeyOfThemeVariant } from '@remirror/core';
-import { bubblePositioner, useRemirrorContext } from '@remirror/react';
+import { bubblePositioner, useRemirror } from '@remirror/react';
 import { useRemirrorTheme } from '@remirror/ui';
 import {
   BoldIcon,
@@ -86,7 +86,7 @@ interface MenuBarProps extends Pick<BubbleMenuProps, 'activateLink'> {
  * The MenuBar component which renders the actions that can be taken on the text within the editor.
  */
 export const MenuBar: FC<MenuBarProps> = ({ inverse, activateLink }) => {
-  const { actions } = useRemirrorContext<WysiwygExtensions>();
+  const { actions } = useRemirror<WysiwygExtensions>();
 
   return (
     <Toolbar>
@@ -164,9 +164,7 @@ export const BubbleMenu: FC<BubbleMenuProps> = ({
   deactivateLink,
   activateLink,
 }) => {
-  const { actions, getPositionerProps, helpers, state, manager } = useRemirrorContext<
-    WysiwygExtensions
-  >();
+  const { actions, getPositionerProps, helpers, state, manager } = useRemirror<WysiwygExtensions>();
 
   const positionerProps = getPositionerProps({
     ...bubblePositioner,

@remirror/extension-code-block/readme.md

@@ -17,5 +17,6 @@ Refractor is a peer dependency and is needed when adding extra language support.
 import jsx from 'refractor/lang/jsx';
 import typescript from 'refractor/lang/typescript';
 import { CodeBlockExtension } from '@remirror/extension-code-block';
+
 new CodeBlockExtension({ supportedLanguages: [typescript, jsx] });
 ```

@remirror/react-portals/package.json

@@ -23,6 +23,7 @@
   "dependencies": {
     "@babel/runtime": "^7",
     "@types/nanoid": "2.1.0",
+    "nanoevents": "^5.0.1",
     "nanoid": "^2.1.7",
     "type-fest": "^0.12.0"
   },

@remirror/react-portals/src/__tests__/react-portals.spec.tsx

@@ -1,8 +1,6 @@
 import { act, render } from '@testing-library/react';
 import React from 'react';
 
-import { RemirrorManager, useRemirrorManager } from '@remirror/react';
-
 import { PortalContainer, RemirrorPortals } from '..';
 
 describe('RemirrorPortals', () => {
@@ -27,30 +25,6 @@ describe('RemirrorPortals', () => {
     expect(mockRender).toBeCalledWith({}, {});
   });
 
-  it('provides access to the manager context', () => {
-    expect.assertions(1);
-
-    const Component = () => {
-      const manager = useRemirrorManager();
-
-      expect(manager).toBeTruthy();
-
-      return <div data-testid='test' />;
-    };
-
-    const portalContainer = new PortalContainer();
-    render(
-      <RemirrorManager>
-        <RemirrorPortals portalContainer={portalContainer} />
-      </RemirrorManager>,
-    );
-
-    act(() => {
-      document.body.appendChild(container);
-      portalContainer.render({ render: Component, container });
-    });
-  });
-
   it('removes the portal the when dom node is removed', () => {
     expect.assertions(3);
 

@remirror/react-portals/src/portal-container.ts

@@ -1,8 +1,7 @@
+import { createNanoEvents } from 'nanoevents';
 import nano from 'nanoid';
 import { ReactElement } from 'react';
 
-import createNanoEvents from './nanoevents';
-
 export interface RenderParams {
   /**
    * Renders a JSX element.
@@ -25,7 +24,7 @@ interface Events {
   /**
    * Trigger an update in all subscribers
    */
-  update: (map: PortalMap) => void;
+  update: (portalMap: PortalMap) => void;
 }
 
 export type PortalList = ReadonlyArray<[HTMLElement, MountedPortal]>;
@@ -50,10 +49,22 @@ export class PortalContainer {
   /**
    * Event handler for subscribing to update events from the portalContainer.
    */
-  public on = (callback: (map: PortalMap) => void) => {
+  public on = (callback: (portalMap: PortalMap) => void) => {
     return this.events.on('update', callback);
   };
 
+  /**
+   * Subscribe to one event before automatically unbinding.
+   */
+  public once = (callback: (portalMap: PortalMap) => void) => {
+    const unbind = this.events.on('update', (portalMap) => {
+      unbind();
+      callback(portalMap);
+    });
+
+    return unbind;
+  };
+
   /**
    * Trigger an update in all subscribers.
    */

@remirror/react/package.json

@@ -31,7 +31,8 @@
     "prosemirror-commands": "^1.1.3",
     "prosemirror-model": "^1.9.1",
     "prosemirror-state": "^1.3.2",
-    "prosemirror-view": "^1.14.4"
+    "prosemirror-view": "^1.14.4",
+    "tiny-invariant": "^1.1.0"
   },
   "peerDependencies": {
     "@emotion/core": "^10",

@remirror/react/src/__tests__/react-hooks.spec.tsx

@@ -1,17 +1,16 @@
 import { render } from '@testing-library/react';
 import React, { FC } from 'react';
 
-import { createTestManager, injectedPropsShape, positionerShape } from '@remirror/test-fixtures';
-
-import { RemirrorProvider } from '../components/remirror-providers';
-import { usePositioner, useRemirrorContext } from '../hooks/context-hooks';
+import { RemirrorProvider } from '../components/remirror-provider';
+import { usePositioner } from '../hooks/use-positioner';
+import { useRemirror } from '../hooks/use-remirror';
 import { bubblePositioner } from '../react-positioners';
 
 test('useRemirrorContext', () => {
   expect.assertions(1);
 
   const HookComponent: FC = () => {
-    const injectedProps = useRemirrorContext();
+    const injectedProps = useRemirror();
 
     expect(injectedProps).toMatchObject(injectedPropsShape);
 

@remirror/react/src/components/__tests__/providers-server.spec.tsx

@@ -9,13 +9,12 @@ import { renderToStaticMarkup } from 'react-dom/server';
 
 import { createTestManager, docNodeBasicJSON } from '@remirror/test-fixtures';
 
-import { useRemirrorContext } from '../../hooks/context-hooks';
-import { RemirrorManager } from '../remirror-manager';
-import { ManagedRemirrorProvider, RemirrorProvider } from '../remirror-providers';
+import { useRemirror } from '../../hooks/use-remirror';
+import { RemirrorProvider } from '../remirror-provider';
 
 test('RemirrorProvider', () => {
   const TestComponent = () => {
-    const { getRootProps } = useRemirrorContext();
+    const { getRootProps } = useRemirror();
     const rootProps = getRootProps();
     return (
       <div data-testid='1'>
@@ -35,26 +34,3 @@ test('RemirrorProvider', () => {
 
   expect(reactString).toInclude('basic');
 });
-
-test('ManagedRemirrorProvider', () => {
-  // global.render = renderToStaticMarkup;
-  const TestComponent = () => {
-    const { getRootProps } = useRemirrorContext();
-    const rootProps = getRootProps();
-    return (
-      <div>
-        <div data-testid='target' {...rootProps} />
-      </div>
-    );
-  };
-
-  const reactString = renderToStaticMarkup(
-    <RemirrorManager>
-      <ManagedRemirrorProvider initialContent={docNodeBasicJSON}>
-        <TestComponent />
-      </ManagedRemirrorProvider>
-    </RemirrorManager>,
-  );
-
-  expect(reactString).toInclude('basic');
-});