type HeadingProps = TextProps & {
  inputs: {
    level?: number;
  };
};

const Heading = createEditorComponent<HeadingProps>((props) => {
  const level = useEditorInput(HeadingLevel, { ...props, name: "level", label: "Heading level" });
  const component = `h${level}`;
  
  return <Text {...props} as={component} />;
});

Heading.defaultProps = {
  inputs: {
    level: 1,
  },
};

Heading.triggers = {
  "#{1,6}": (text) => ({
    inputs: {
      level: text.length,
    },
  });
};

const HeadingLevel = createEditorInput<HeadingProps>((props) => {
  useEditorInputValue(props, "value");
  return <div />;
});
  
const defaultComponents = {
  Paragraph,
  Bold,
  Heading,
  ...
};
  
function App() {
  const editor = useEditorState({ defaultComponents });
  editor.getSelection(); // { startContainerId: "id", startOffset: 0, endContainerId: "id", endOffset: 3, collapsed: false }
  editor.insertElement("Paragraph", null, editor.getSelection());
  editor.insertElement(Heading, { inputs: { level: 2 } });
  editor.replaceElement(Paragraph);
  return <Editor state={editor} />;
}