RTFragment

The lowest level content of rich text documents.

A rich text fragment is simply an array of RTNode and RTInlineElement objects.

A fragment must always contain at least one RTNode. If the rich text fragment is 'empty' (e.g. a new paragraph element was inserted into the editor but no text has been typed into it yet), the fragment must consist on a single RTNode with its text set to an empty string:

// An empty fragment
const fragment = [{ text: '' }];

A fragment's RTInlineElements must be surounded by RTNodes, and must always start and end with a RTNode. These can be empty nodes if there is no text content between the inline elements:

The text "Mass-energy equivalence formula: e=mc^2" would have a fragment resembling the following:

// A fragment with inline elements
const fragment = [
  { text: '' },
  {
    type: 'link',
    url: 'https://en.wikipedia.org/wiki/Mass-energy_equivalence',
    children: [{ text: 'Mass-energy equivalence'}]
  },
  { text: ' formula: ' }
  {
    type: 'equation',
    expression: 'e=mc^2'
  },
  { text: '' },
];

Rich text fragments are also used to represent the text selection in the editor.

If the selection covers only part of the text in a RTNode, the resulting selection fragment will include only the selected text.

For example if a section of the text:

Here is some bold text.

were selected like so:

Here is some bold text.

the fragments would look like:

// The complete fragment
const fragment = [
  { text: 'Here is some ' },
  { text: 'bold', bold: true },
  { text: ' text.' },
];

// The selected text fragment
const selectionFragment = [
  { text: 'some ' },
  { text: 'bold', bold: true },
  { text: ' text' },
];

If the selection contains part of the text inside a non-void inline element (e.g. a link element), the children of the element will contain only the selected text as part of the selection fragment.

For example if a section of the text:

Enstein's Mass-energy equivalence formula

were selected like so:

Enstein's Mass-energy equivalence forumla

the fragments would look like:

// The complete fragment
const fragment = [
  { text: '' },
  {
    type: 'link',
    url: 'https://en.wikipedia.org/wiki/Mass-energy_equivalence',
    children: [
      { text: "Einsteni's Mass-energy equivalence formula" },
    ],
  },
  { text: '' },
];

// The selected text fragment
const selectionFragment = [
  { text: '' },
  {
    type: 'link',
    url: 'https://en.wikipedia.org/wiki/Mass-energy_equivalence',
    children: [{ text: 'Mass-energy equivalence' }],
  },
  { text: '' },
];