RichEditor

ic.RichEditor is a WYSIWYG text editor built on TipTap (ProseMirror). It handles formatted text with headings, lists, tables, images, code blocks with syntax highlighting, math equations (KaTeX), callouts, collapsible sections, and more. Content is stored as HTML and can be exported to Markdown or PDF. Type / on an empty line to see all available block types, or use markdown shortcuts directly.

Layout and interaction modes

ShowToolbar toggles the top formatting bar. ShowToc shows a table of contents sidebar that tracks headings in the document. FocusMode dims everything except the block you are currently editing. ReadOnly prevents editing but keeps the content interactive (links are clickable, text is selectable). Disabled greys out the whole component.

Placeholder and character limit

Placeholder shows ghost text when the editor is empty. MaxLength caps the number of characters the user can type (Inf = unlimited). The status bar at the bottom shows the current word count, character count, and estimated reading time.

Height

Height accepts a pixel value or any CSS size string. Defaults to "100%".

Slash commands and markdown shortcuts

Typing / on an empty line opens a searchable command palette. Available blocks:

• Text: Paragraph, Heading 1-3
• Lists: Bullet List, Numbered List, Task List
• Blocks: Blockquote, Code Block, Callout (Info / Warning / Tip / Danger), Collapsible, Horizontal Rule
• Insert: Table, Math Block

Standard markdown shortcuts also work: # for headings, - for bullets, 1. for numbered lists, > for blockquotes, ``` for code blocks, --- for horizontal rules, $...$ for inline math, and $$...$$ for display math.

Content, Markdown, and PDF export

Value holds the editor content as an HTML string. You can set it from MATLAB to populate the editor, or read it back to get what the user wrote. insertContent(html) inserts HTML at the current cursor position. getMarkdown() returns the content converted to Markdown. exportPdf() exports the content as a PDF file: without arguments it opens a save dialog, or you can pass a file path directly.

editor = ic.RichEditor();

% Set content as HTML
editor.Value = "<h1>Title</h1><p>Hello <strong>world</strong></p>";

% Insert content at the cursor
editor.insertContent("<p>Inserted paragraph</p>");

% Get content as Markdown
md = editor.getMarkdown();
md.then(@(result) disp(result.data));

% Export to PDF (opens save dialog)
editor.exportPdf();

% Export to a specific path
editor.exportPdf("report.pdf");

Images

Images can be inserted from the toolbar (browse local files or paste a URL) or programmatically with insertContent. The editor fetches images through MATLAB rather, which can either read the local file paths or webread a URLs.

editor = ic.RichEditor();

% Insert an image programmatically
editor.insertContent('<img src="plot.png" alt="My plot">');

Events

ValueChanged fires when the content changes, with the HTML in evt.Data.value. FocusChanged fires on focus and blur with a boolean focused field. Submitted fires on Ctrl+Enter / Cmd+Enter.

Programmatic control

clear() empties the editor. insertContent(html) inserts HTML at the cursor position.

Math equations

Equations are rendered with KaTeX. Wrap inline math in $...$ and display math in $$...$$. You can also insert a math block from the slash menu. Double-click a rendered equation to edit the LaTeX source.

Custom styling

Like CodeEditor, the RichEditor reads --ic-* CSS variables for all its colors. Overriding them on .ic-rte retargets the whole theme. For finer control, target .ic-rte-toolbar (the toolbar), .ProseMirror (the content area), .ic-rte__status (the status bar), or .ic-rte-toc (the table of contents sidebar).

editor = ic.RichEditor();

% Override theme variables for a warm paper look
editor.css.style(".ic-rte", ...
    "--ic-background",         "#faf8f5", ...
    "--ic-foreground",          "#3d3929", ...
    "--ic-secondary",           "#f0ece4", ...
    "--ic-border",              "#e0d9cc", ...
    "--ic-muted-foreground",    "#8a8070", ...
    "--ic-primary",             "#b45309", ...
    "border_radius",            "6px");

% Style the toolbar
editor.css.style(".ic-rte-toolbar", ...
    "background_color", "#f0ece4", ...
    "border_bottom_color", "#e0d9cc");

% Serif font for the content area
editor.css.style(".ProseMirror", ...
    "font_family", "Georgia, serif", ...
    "font_size", "15px");