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

Practical example: drafting a deviation investigation report

Section titled “Practical example: drafting a deviation investigation report”

Scenario: You are writing a deviation investigation report directly in the EQMS using the rich text editor.

  1. Open the document in edit mode. The editor toolbar appears at the top.
  2. Select H1 and type Deviation Investigation Report -- DEV-2026-042.
  3. Press Enter, select H2, and type 1. Description of Deviation.
  4. Press Enter, then type the narrative: During routine environmental monitoring on 28 Feb 2026, viable particle counts in Cleanroom B exceeded the action limit of 50 CFU/m3. Recorded value: 78 CFU/m3.
  5. Select the text action limit of 50 CFU/m3 and select Bold to emphasize the threshold.
  6. Add a second heading with H2: 2. Root Cause Analysis. Below it, select Numbered List and enter each contributing factor as a list item.
  7. To reference the environmental monitoring SOP, select the text SOP-EM-004, select Add Link, and paste the document URL.
  8. Select Save in the toolbar, or wait for auto-save (every 30 seconds). The status bar confirms the save with a timestamp.

The editor auto-saves your work, so you will not lose content if your browser closes unexpectedly.

Permissions

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