Skip to content
InnoQualis InnoQualis Docs

Rich Text Editor

InnoQualis EQMS includes a built-in rich text editor powered by TipTap for creating and editing document content directly within the application. The editor supports text formatting, headings, lists, links, images, and auto-save.

Editor toolbar reference

Section titled “Editor toolbar reference”

The toolbar appears at the top of the editor in edit mode. Controls are organized into groups separated by vertical dividers.

Text formatting

Section titled “Text formatting”
ButtonTitleDescription
Bold iconBoldToggle bold formatting on selected text
Italic iconItalicToggle italic formatting on selected text
Strikethrough iconStrikethroughToggle strikethrough formatting on selected text
Code iconCodeToggle inline code formatting on selected text

Headings

Section titled “Headings”
ButtonTitleDescription
H1 iconHeading 1Toggle the current paragraph as a top-level heading
H2 iconHeading 2Toggle the current paragraph as a second-level heading
H3 iconHeading 3Toggle the current paragraph as a third-level heading

Lists and quotes

Section titled “Lists and quotes”
ButtonTitleDescription
List iconBullet ListToggle an unordered (bulleted) list
Numbered list iconNumbered ListToggle an ordered (numbered) list
Quote iconQuoteToggle a block quotation
Section titled “Links and images”
ButtonTitleDescription
Link iconAdd LinkOpens a dialog to enter a URL. Applied to selected text.
Image iconAdd ImageOpens a dialog to enter an image URL. Inserted at the cursor position.

History

Section titled “History”
ButtonTitleDescription
Undo iconUndoRevert the last change. Disabled when there is nothing to undo.
Redo iconRedoRe-apply a previously undone change. Disabled when there is nothing to redo.

Save

Section titled “Save”

The Save button appears on the right side of the toolbar when a save handler is configured. Select it to manually save the current content.

Section titled “Add a link”
  1. In the editor, select the text you want to turn into a hyperlink.
  2. In the toolbar, select Add Link.
  3. In the dialog, enter the full URL (for example, https://example.com).
  4. Select Confirm.
  5. The linked text appears in blue with an underline.

Add an image

Section titled “Add an image”
  1. In the editor, place your cursor where the image should appear.
  2. In the toolbar, select Add Image.
  3. In the dialog, enter the full URL to the image (for example, https://example.com/image.png).
  4. Select Confirm.
  5. The image appears in the document, scaled to fit the content area.

Use auto-save

Section titled “Use auto-save”

The editor supports automatic saving at configurable intervals.

  • Default interval: 30 seconds.
  • When enabled, the editor saves content automatically at the configured interval.
  • The status bar shows the last saved timestamp after auto-save occurs.
  • Auto-save is disabled in read-only mode.

Status bar

Section titled “Status bar”

The status bar at the bottom of the editor (hidden in read-only mode) displays:

  • Character count — total number of characters (left side).
  • Last saved — time of the most recent save, either manual or auto-save (right side).

Read-only mode

Section titled “Read-only mode”

When the editor is in read-only mode:

  • The toolbar is hidden.
  • The status bar is hidden.
  • Content displays but cannot be edited.
  • Links and images remain visible.

Keyboard shortcuts

Section titled “Keyboard shortcuts”
ShortcutAction
Ctrl/Cmd + BToggle bold
Ctrl/Cmd + IToggle italic
Ctrl/Cmd + ZUndo
Ctrl/Cmd + Shift + ZRedo

Permissions

Section titled “Permissions”
ActionRequirement
View content (read-only)Authenticated user with document access
Edit contentAuthenticated user with document editing permissions