Passing custom props to nodes

In our application, some of our node components requires some props from the parent.

The solution we tried was to create a schema depending on these props:

function makeSchema(commonProps) {
    return {
        nodes: {
            paragraph: (props) => (
                <Paragraph {...props} {...commonProps}>
                    {props.children}
                </Paragraph>
            )
        }
    };
}

But Slate doesn’t re-render when the schema changed.

So I’m proposing 3 solutions:

1. Adapt the shouldComponentUpdate to re-render when the schema changed
   • Pro: it seems coherent
   • Cons: How to compare prevProps.schema with props.schema ? If the schema is inlined in the render() method, and so unique to each render call
2. Pass all other props of Editor to the nodes
   • Cons: we have to avoid conflicts between prop’s names
3. Add a prop props to Editor: <Editor props={{ customPropToPassToNode: 'test' }} ... />

@ianstormtaylor @Soreine what do you guys think ?

[ianstormtaylor]

@SamyPesse Okay, damn, that is hard haha. What about if we allowed plugins to listen to the lifecycle events of the editor, such that you could do something like this inside a plugin:

function plugin() {
  const store = new Store()  

  function editorDidMount(editor, props) {
    store.set(props.pathname)
  }

  function editorDidUpdate(editor, props) {
    store.set(props.pathname)
  }

  class Comment extends React.Component {

    state = {
      pathname = store.get(),
    }

    componentDidMount = () => {
      store.on(this.onPathnameChange)
    }

    componentWillUnmount = () => {
      store.off(this.onPathnameChange)
    }

    onPathnameChange = (pathname) => {
      this.setState({ pathname })
    }

    render = () => {
      const { pathname } = this.state
      const { node } = this.props
      const id = node.data.get('id')
      const active = pathname == id
      return ...
    }

  }

  const schema = {
    marks: {
      comment: Comment,
    }
  }

  return {
    editorDidMount,
    editorDidUpdate,
    schema,
  }
}

I think that would allow you to get a lot fewer updates, since you’d be able to only update when the props above changed, or better yet only when their impacts below changed. But it’s just a quick idea, could be some gaping holes.

Not the most amazing, since you’re back to monitoring a store with handlers in a not very React way. But not sure there’s a better way unless React supported this natively with context in a way that handled updates.

[ianstormtaylor]

@oyeanuj I think for that case you’d want to setup your own store/subscribing pattern like I assume what Samy’s done, and use that to then call setState inside the node. That way only that single node will change when the event happens. Does that make sense?

I’m just not sure Slate should standardize it yet, unless we come across a lot of use cases that are always the exact same. It feels like the subscription handling stuff could get very complex.