Error: Cannot find transform for node Node<"heading">

[MonicaRungi-w]

"heading" is not recognized:

"isHeading" function isn't checking the node type "heading":

[octet-stream]

Hello. Thanks for your feedback!
Every transform in slate-to-react matches the type field against corresponding html tag, so in order for it to work, your node must have the h<level> type. Because Slate does not enforce any specific schema rules, other than children field for elements and text for leaves, I simply cannot cover every possible scenario for matchers. This is what createElementTransform, createLeafTransform, createElementNodeMatcher and createLeafNodeMatcher are for, so you can bring your own components to render Slate nodes the way that fits your own needs.

This is how you can create your custom element element matcher & transform:

import {createElement} from "react"
import {createElementNodeMatcher} from "slate-to-react"

export interface Heading {
  type: "heading"
  level: 1 | 2 | 3 | 4 | 5 | 6
  children: InlineDescendant[] // This would be your own type
}

export const isHeading = createElementNodeMatcher<Heading>((node): node is Heading => (
  node.type === "heading"
    && typeof node.level === "number"
    && node.level >= 1
    && node.level <= 6
))

export const HeadingElement = createElementTransform(
  isHeading,

  ({key, attributes, element, children}) => createElement(
    element.level,

    {
      ...attributes,

      key
    }
  )
)

I also recommend disabling all default transforms so you can see where you need to add custom elements by setting the defaultTransforms option to false. See: https://github.com/octet-stream/slate-to-react#type-transformnodesoptions

To be clear, this is the convention taken from Plate's schema – they typically place tag names in the type field and this is why I made it in my package by default.

Now I am thinking if it was a good idea making pre-built transforms enabled by default. Maybe this is something I will need to change sometime later.

[MonicaRungi-w]

@octet-stream Thank you for the quick response! :)