RFC: Node attrs passed as props in ReactNodeView?

Hey @ifiokjr, what do you think about passing node attrs as props to ReactNodeView? The reason I think we should is because we pass node attrs as props when using an SSRComponent.

Right now, if we try to use the same component for a ReactNodeView and SSRComponent then we get the props two different ways.

Here is the current render function of ReactNodeView:

  public render(props: GProps, forwardRef?: (node: HTMLElement) => void): JSX.Element {
    const Component = this.Component;
    return (
      <Component
        view={this.view}
        getPosition={this.getPosition}
        node={this.node}
        forwardRef={forwardRef}
        {...props}
      />
    );
  }

We can get the node props within the Component render by looking at node.

But when we render with SSR, the attrs are passed as props, however we do not have the node passed as a prop during SSR.

My goal here is to be able to use the same component for ReactNodeView and SSRComponent, as much as possible.

What do you think about passing the node attrs as props in ReactNodeView?

(One argument against it might be that we should be using separate components for these two “separate” uses.)

[jashmenn]

I’ll take a stab at it

On Sat, Jul 6, 2019 at 9:43 AM Ifiok Jr. [e-mail] wrote:

Oh yes, @jashmenn https://github.com/jashmenn that’s a great idea. Let’s make it happen.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ifiokjr/remirror/issues/97?email_source=notifications&email_token=AAABBXQL4BQFHXYUASDX4M3P6CVRXA5CNFSM4H6TO6BKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZK23CQ#issuecomment-508931466, or mute the thread https://github.com/notifications/unsubscribe-auth/AAABBXVRDGYOLHVDNF5JPS3P6CVRXANCNFSM4H6TO6BA .

– Nate Murray [phone] http://eigenjoy.com @eigenjoy

[ifiokjr]

@jashmenn to make types easier what I ended up doing was setting both the SSR component and the NodeView component to receive the node (or mark) and extension options` as props.

They now both use SSRComponent Props as their base.

https://github.com/ifiokjr/remirror/blob/b9897ce1f2a1100a37978bde453f7bba645e8139/%40remirror/core/src/types/index.ts#L305-L311

Mark SSR Component

https://github.com/ifiokjr/remirror/blob/7d30fbcfb39e549dc3ca4e9dd9f230b135fc9f88/%40remirror/renderer-react/src/serializer.tsx#L108-L110

Node SSR Component

https://github.com/ifiokjr/remirror/blob/7d30fbcfb39e549dc3ca4e9dd9f230b135fc9f88/%40remirror/renderer-react/src/serializer.tsx#L87-L89

NodeView Props

https://github.com/ifiokjr/remirror/blob/7d30fbcfb39e549dc3ca4e9dd9f230b135fc9f88/%40remirror/react-utils/src/node-view/node-view-types.ts#L12-L31