Allow Immerable class instances as Element and Text nodes

[SmilinBrian]

We are updating TextExpander from using Slate 0.47 to current. It seemed like a good opportunity to convert some of our older JavaScript code to TypeScript as well. With that in mind, I set off creating TypeScript classes for the inline elements that we use.

I made a base class, and made it immerable:

import { immerable } from 'immer';

export default class ContentElement {
  // Make instances "draftable" by immer
  [immerable] = true;
  ...
}

and then made subclasses for the various inlines, such as this date macro inline:

export default class ContentElementMacroDate extends ContentElement implements BaseCustomElement {
  readonly dateFormat: string;

  // type and children props make it conform to BaseCustomElement
  readonly type: string;

  readonly children: Descendant[];
  ...

With things like that defined, it was going to really clean up the code where we create and insert new inlines - we'd have a clear constructor for a date macro instead of our old 0.47 way of adding certain data keys when creating a Node.

Then when I put it to the test my design hopes were dashed - Slate expects incoming data to consist of "plain objects" and uses isPlainObject() to test that:

const isElement = (value: any): value is Element => {
  return (
    isPlainObject(value) &&
    Node.isNodeList(value.children) &&
    !Editor.isEditor(value)
  )
}

…from

slate/packages/slate/src/interfaces/element.ts

Line 34 in 3ad3aac

isPlainObject(value) &&

There are similar tests for Text, Descendant, etc.

Obviously my ContentElements are not plain objects, so the design needs major changing. But, because my ContentElement sub-classes are immerable, I think it would have worked except for those isPlainObject() tests.

So I propose that we move the basic "is this incoming object acceptable in the most basic terms" (currently isPlainObject()) to be an overrideable function on Editor.

Specifically, in the BaseEditor interface, add:

  isAcceptableObject: (candidate: any) => boolean

then createEditor would provide a default implementation:

  isAcceptableObject: (candidate: any) => isPlainObject(candidate)

and it would require an Editor.isAcceptableObject(editor, candidate) implementation to tie it all together.

Or simply change the isPlainObject() tests to call a utility function that checks isPlainObject(candidate) || candidate[immerable].

This would allow us to gain more "reasoning" about inlines and blocks by making them TypeScript class instances and, as long as developers make them immerable and are careful, everything should work.

[SmilinBrian]

For future reference: Slate makes a lot of assumptions in transforms/node.ts to be able to manipulate Elementss and Texts. It strongly assumes they are plain objects, and takes advantage of that to add or remove properties and "split" nodes. Changing the code to make it immerable would be challenging.