Content leaf

To accommodate SlateJS, all content blocks will have leaf nodes as children, even for empty elements, such as Image, whose child node is

{
  ...
  "children": [{"text":""}]
}

The purpose of this node is to allow the upper Element to be selectable (selection range).

The most common leaf can store both the style and text of the text.

 {
      "text": "Hello",
      "link": {
        "href": "http://127.0.0.1:5173/simple",
        "blank": true
      },
      "bold": true
  },

interface

type TextNode = {
  text: string;
  bold?: boolean;
  italic?: boolean;
  underline?: boolean;
  strikethrough?: boolean;
  color?: string;
  bgColor?: string;
  fontSize?: string;
  fontFamily?: string;
  link?: {
    href?: string;
    blank?: boolean;
  } | null;
};