feat: add package @remirror/extension-react-component

Add a new package for managing components within the prosemirror editor.

It currently only works for nodeViews but support will be added for

- SSR
- Marks
- Decorations (still needs exploration).

.changeset/config.json

@@ -46,6 +46,7 @@
       "@remirror/extension-placeholder",
       "@remirror/extension-position-tracker",
       "@remirror/extension-positioner",
+      "@remirror/extension-react-component",
       "@remirror/extension-react-ssr",
       "@remirror/extension-search",
       "@remirror/extension-strike",

.changeset/silver-plums-report.md

@@ -0,0 +1,14 @@
+---
+'@remirror/extension-react-component': major
+'@remirror/preset-react': minor
+'@remirror/react': major
+'@remirror/react-utils': minor
+---
+
+Add a new extension package `@remirror/extension-react-component` for creating ProseMirror `NodeView`'s from React components.
+
+- Move `ReactPortal` implementation from `@remirror/react` to `@remirror/react-utils` for usage in other parts of the application.
+- Move `ReactNodeView` into new package `@remirror/extension-react-component`.
+- Rename `ReactNodeView.createNodeView` to `ReactNodeView.create`.
+
+The new package adds the `ReactComponent` property to the extension interface. An extension with a component attached will use it to override the automatic DOM representation with a ProseMirror `NodeView`.

docs/errors.mdx

@@ -6,174 +6,182 @@ This page contains the documented errors that occur while using `remirror`. Curr
 descriptions are very short and if you'd like to contribute to make them more comprehensive, then
 that would be very much appreciated. Edit this page to get started.
 
-## RMR0000
+## Core
+
+<br />
+
+### RMR0000
 
 > Production Error
 
 An error occurred in production and details are intentionally being hidden.
 
-## RMR0001
+### RMR0001
 
 > Unknown Error
 
 Sooo, this is embarassing. Something happened and we're not quite sure why. Your best course of
 action is to open an [issue](https://github.com/remirror/remirror/issues/new?template=bug_report.md)
 explaining what you're seeing.
 
-## RMR0002
+### RMR0002
 
 > Invalid Command Arguments
 
 The arguments passed to the command method were invalid. Check how you're calling all commands made
 available by the editor and make sure arguments are correct.
 
-## RMR0003
+### RMR0003
 
 > Custom Error
 
 This is a custom error possibly thrown by an external library. It's almost as hard to diagnose as
 the `Unknown Error`.
 
-## RMR0004
+### RMR0004
 
 > Core Helpers
 
 An error occurred in a function called from the `@remirror/core-helpers` library.
 
-## RMR0005
+### RMR0005
 
 > Mutation
 
 You have attempted to change a value that shouldn't be changed.
 
-## RMR0006
+### RMR0006
 
 > Internal
 
 This is an error which should not occur and is internal to the remirror codebase.
 
-## RMR0007
+### RMR0007
 
 > Missing Required Extension
 
 You're editor is missing a required extension.
 
-## RMR0008
+### RMR0008
 
 > Manager Phase Error
 
 Called a method event at the wrong time. Please make sure getter functions are only called with
 within the scope of the returned functions. They should not be called in the outer scope of your
 method.
 
-## RMR0009
+### RMR0009
 
 > New Editor Manager
 
 No directly invoking the editor manager with `new`. Instead use one of the static methods to create
 your instance.
 
-## RMR0010
+### RMR0010
 
 > Invalid Preset Extension
 
 The user requested an invalid extension from the preset. Please check the `createExtensions` return
 method is returning an extension with the defined constructor.
 
-## RMR0011
+### RMR0011
 
 > Invalid Manager Arguments
 
 Invalid value passed into `Manager constructor`. Only `Presets` and `Extensions` are supported.
 
-## RMR0012
+### RMR0012
 
 > Commands Called In Outer Scope
 
 The `commands` or `dispatch` method which is passed into the `create*` method should only be called
 within returned method since it relies on an active view (not present in the outer scope).
 
-## RMR0013
+### RMR0013
 
 > Helpers Called In Outer Scope
 
 The `helpers` method which is passed into the ``create\*` method should only be called within
 returned method since it relies on an active view (not present in the outer scope).
 
-## RMR0014
+### RMR0014
 
 > Invalid Manager Extension
 
 The user requested an invalid extension from the manager.
 
-## RMR0015
+### RMR0015
 
 > Invalid Manager Preset
 
 The user requested an invalid preset from the manager.
 
-## RMR0016
+### RMR0016
 
 > Duplicate Command Names
 
 Command method names must be unique within the editor.
 
-## RMR0017
+### RMR0017
 
 > Duplicate Helper Names
 
 Helper method names must be unique within the editor.
 
-## RMR0018
+### RMR0018
 
 > Non Chainable Command
 
 Attempted to chain a non chainable command.
 
-## RMR0019
+### RMR0019
 
 > Invalid Extension
 
 The provided extension is invalid.
 
-## RMR0020
+### RMR0020
 
 > Invalid Preset
 
 The provided preset is invalid.
 
-## RMR0050
+### RMR0050
 
 > Invalid Name
 
 An invalid name was used for the extension.
 
-## RMR0100
+### RMR0100
 
 > Extension
 
 An error occurred within an extension.
 
-## RMR0101
+### RMR0101
 
 > Extension Spec
 
 The spec was defined without calling the `defaults`, `parse` or `dom` methods.
 
-## RMR0102
+### RMR0102
 
 > Extension Extra Attributes
 
 Extra attributes must either be a string or an object.
 
-## RMR0200
+## React
+
+<br />
+
+### RMR0200
 
 > React Provider Context
 
 `useRemirror` was called outside of the remirror context. It can only be used within an active
 remirror context created by the `<RemirrorProvider />`.
 
-## RMR0201
+### RMR0201
 
 > React Get Root Props
 
@@ -277,19 +285,29 @@ const EditorWrapper = () => {
 
 Now the `TextEditor` component is only updated when the `RemirrorProvider` is updated.
 
-## RMR0202
+### RMR0202
 
 > React Editor View
 
 A problem occurred adding the editor view to the dom.
 
-## RMR0202
+### RMR0203
 
 > React Controlled
 
 There is a problem with your controlled editor setup.
 
-## RMR0300
+### RMR0204
+
+> React Node View
+
+Something went wrong with your custom ReactNodeView Component.
+
+## Other
+
+<br />
+
+### RMR0300
 
 > I18N Context
 

packages/@remirror/core-constants/src/error-constants.ts

@@ -128,7 +128,12 @@ export enum ErrorConstant {
   /**
    * There is a problem with your controlled editor setup.
    */
-  REACT_CONTROLLED = 'RMR0202',
+  REACT_CONTROLLED = 'RMR0203',
+
+  /**
+   * Something went wrong with your custom ReactNodeView Component.
+   */
+  REACT_NODE_VIEW = 'RMR0204',
 
   /**
    * There is something wrong with your i18n setup.

packages/@remirror/core-utils/src/dom-utils.ts

@@ -357,9 +357,7 @@ export function getMarkRange(
     startPos -= pmPosition.parent.child(startIndex).nodeSize;
   }
 
-  const endPos = startPos + start.node.nodeSize;
-
-  return { from: startPos, to: endPos };
+  return { from: startPos, to: startPos + start.node.nodeSize };
 }
 
 /**
@@ -374,8 +372,7 @@ export function getMarkRange(
  * @public
  */
 export function getTextContentFromSlice(slice: Slice) {
-  const node = slice.content.firstChild;
-  return node ? node.textContent : '';
+  return slice.content.firstChild?.textContent ?? '';
 }
 
 /**

packages/@remirror/core/src/builtins/node-views-extension.ts

@@ -17,7 +17,7 @@ import { AnyCombinedUnion } from '../preset';
  * @builtin
  */
 export class NodeViewsExtension extends PlainExtension {
-  static readonly defaultPriority = ExtensionPriority.High;
+  static readonly defaultPriority = ExtensionPriority.Default;
 
   get name() {
     return 'nodeView' as const;

packages/@remirror/core/src/builtins/paste-rules-extension.ts

@@ -11,7 +11,7 @@ import { CreateLifecycleMethod, PlainExtension } from '../extension';
  * @builtin
  */
 export class PasteRulesExtension extends PlainExtension {
-  static readonly defaultPriority = ExtensionPriority.High;
+  static readonly defaultPriority = ExtensionPriority.Default;
 
   get name() {
     return 'pasteRules' as const;

packages/@remirror/core/src/builtins/suggestions-extension.ts

@@ -16,7 +16,7 @@ import { PlainExtension } from '../extension';
  * @builtin
  */
 export class SuggestionsExtension extends PlainExtension {
-  static readonly defaultPriority = ExtensionPriority.High;
+  static readonly defaultPriority = ExtensionPriority.Default;
 
   get name() {
     return 'suggestions' as const;

packages/@remirror/dev/src/__tests__/dev.spec.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 
 import { RemirrorProvider } from '@remirror/react';
-import { createCoreManager } from '@remirror/testing';
-import { render } from '@remirror/testing/react';
+import { createReactManager, render } from '@remirror/testing/react';
 
 import { ProsemirrorDevTools } from '../dev';
 
@@ -12,7 +11,7 @@ beforeEach(() => {
 
 test('it supports <ProsemirrorDevTools />', () => {
   const { baseElement } = render(
-    <RemirrorProvider manager={createCoreManager([])}>
+    <RemirrorProvider manager={createReactManager([])}>
       <ProsemirrorDevTools />
     </RemirrorProvider>,
   );
@@ -25,13 +24,13 @@ test('it unmounts <ProsemirrorDevTools />', () => {
   const Component = ({ dev }: { dev: boolean }) => (dev ? <ProsemirrorDevTools /> : <div />);
 
   const { baseElement, rerender } = render(
-    <RemirrorProvider manager={createCoreManager([])}>
+    <RemirrorProvider manager={createReactManager([])}>
       <Component dev={true} />
     </RemirrorProvider>,
   );
 
   rerender(
-    <RemirrorProvider manager={createCoreManager([])}>
+    <RemirrorProvider manager={createReactManager([])}>
       <Component dev={false} />
     </RemirrorProvider>,
   );