Skip to main content

Edit Text

The Scriptix transcript editor provides powerful text editing capabilities built on Slate.js with real-time formatting, word-level navigation, and audio synchronization. This guide covers all text editing features and best practices.

Basic Text Editing​

Standard Text Operations​

The editor supports all standard text editing operations:

Typing:

  • Click to position cursor
  • Type to insert text
  • Text appears at cursor position
  • Changes trigger automatic save status tracking

Deleting:

  • Backspace - Delete character before cursor (blocked at start of utterance to prevent navigation to speaker field)
  • Delete - Delete character after cursor
  • Select text and press Delete or Backspace to remove selection

Selection:

  • Click and drag - Select arbitrary text range
  • Double-click - Select entire word
  • Triple-click - Select entire paragraph
  • Ctrl + A (Windows) or Cmd + A (Mac) - Select all text in focused utterance

Cut, Copy, Paste:

  • Cut: Ctrl + X (Windows) or Cmd + X (Mac)
  • Copy: Ctrl + C (Windows) or Cmd + C (Mac)
  • Paste: Ctrl + V (Windows) or Cmd + V (Mac)

Cursor Navigation​

Arrow Keys:

  • ← / → - Move cursor left/right by character (left arrow blocked at utterance start)
  • ↑ / ↓ - Move up/down by line

Note: The editor prevents cursor movement into the speaker label area to avoid crashes.

Text Formatting​

Apply formatting to enhance readability and emphasize important content:

Accessing Formatting Options​

Method 1: Popup Menu

  1. Select text by clicking and dragging
  2. Release mouse button to complete selection
  3. A dark formatting popup appears above the selection
  4. Click formatting buttons to apply styles

Method 2: Keyboard Shortcuts

  • Use shortcuts while text is selected
  • Instant formatting without clicking
  • Works with current editor focus

Available Formatting Styles​

Bold

  • Button: B in formatting popup
  • Keyboard: Ctrl + B (Windows) or Cmd + B (Mac)
  • Use For: Emphasis, important terms, headings
  • Technical: Toggles bold: true property on text nodes

Italic

  • Button: I icon (italic symbol) in formatting popup
  • Keyboard: Ctrl + I (Windows) or Cmd + I (Mac)
  • Use For: Titles, foreign words, subtle emphasis
  • Technical: Toggles italic: true property on text nodes

Underline

  • Button: U in formatting popup
  • Keyboard: Ctrl + U (Windows) or Cmd + U (Mac)
  • Use For: Highlighting key phrases, legal terms
  • Technical: Toggles underlined: true property on text nodes

Strikethrough

  • Button: S with line through it
  • Keyboard: Ctrl + S (Windows) or Cmd + S (Mac)
  • Use For: Deletions, corrections, outdated information
  • Technical: Toggles strike: true property on text nodes

Note: Ctrl + S applies strikethrough formatting, not save. There is no keyboard shortcut for saving—use the Save button in the toolbar.

Text Highlighting​

Add color highlights to mark important sections:

Available Highlight Colors:

  • Yellow (#FEE047) - Standard highlighting
  • Pink (#F9A8D4) - Alternative color
  • Green (#86EFAC) - Another option
  • Remove Highlight - X button clears highlighting

How to Highlight:

  1. Select text
  2. Formatting popup appears
  3. Click a colored circle button
  4. Text background changes to that color

Removing Highlights:

  1. Select highlighted text
  2. Click the X button next to "Highlight" label in popup
  3. Highlight is removed

Technical: Highlights use the mark: true and color: string properties on text nodes.

Use Cases:

  • Mark sections for review
  • Color-code different types of content
  • Flag areas needing verification
  • Visual organization

Combining Formats​

You can combine multiple formats on the same text:

Examples:

  • Bold + Italic - Strong emphasis
  • Underline + Yellow Highlight - Critical terms
  • Bold + Green Highlight - Verified information

How to Combine:

  1. Select text
  2. Apply first format (e.g., Bold)
  3. Keep text selected
  4. Apply second format (e.g., Italic)

Removing Formatting​

Remove Specific Format:

  • Select formatted text
  • Press the same keyboard shortcut again (toggles off)
  • Or click the same button in popup

Remove All Formatting:

  • No built-in "clear all formatting" button
  • Manually toggle off each format
  • Or delete and retype text

Click-to-Seek Audio​

Word-Level Audio Navigation:

  • Each word has start and stop timestamps (in milliseconds)
  • Click or select a word to jump to its audio position
  • Currently playing word is highlighted in blue (#0a8df8)
  • Past words appear in black (#000000)
  • Future words appear in gray (#707070)

How It Works:

  1. Click or select a word
  2. Audio player seeks to that word's start time
  3. Formatting popup appears (if text was selected)
  4. Listen to verify transcription accuracy

Editing Transcript Content​

Correcting Transcription Errors​

Common Error Types:

1. Misspellings

Incorrect: The compeny's revenu increased.
Correct: The company's revenue increased.

2. Homophones

Incorrect: Their going to the store.
Correct: They're going to the store.

3. Proper Names

Incorrect: Sara Johnson from Acme Corp
Correct: Sarah Johnson from ACME Corporation

4. Technical Terms

Incorrect: A P I endpoint
Correct: API endpoint

5. Missing Words

Incorrect: We going to implement this.
Correct: We are going to implement this.

6. Extra Words

Incorrect: The the system is working.
Correct: The system is working.

Verification Workflow​

Best Practice: Listen Before Editing

  1. Identify Potential Error - While reading, spot something that seems wrong
  2. Click the Word - Click to jump to that audio position
  3. Listen - Hear what was actually said
  4. Verify Context - Listen to surrounding words
  5. Make Correction - Edit based on what you heard
  6. Move On - Continue to next error

Example Workflow:

Transcript reads: "The price increased from fifty two seventy"
Seems odd → Click "fifty"
Listen: "The price increased from $52.70"
Correct to: "The price increased from $52.70"

Editing While Preserving Timestamps​

Important: Editing text does not affect timestamps

What Happens:

  • You edit the text content
  • Word-level timestamps remain on their original words
  • New text inherits approximate timestamps from context
  • Click-to-seek still works after edits

Example:

Original: [00:05] The compeny is growing.
Edit to: [00:05] The company is growing.
  • Timestamp [00:05] is unchanged (utterance-level)
  • Clicking "company" still seeks to approximately the same time

Utterance Management​

Each speaker turn is an "utterance" that you can manipulate:

Adding Utterances​

Add Utterance Below:

  1. Click the down arrow button on the utterance row
  2. New blank utterance is inserted below
  3. Assign speaker and add text

Add Utterance Above:

  1. Only available on the first utterance
  2. Same process as above
  3. Inserts before the first utterance

Use Cases:

  • Insert missing speaker turns
  • Separate long utterances
  • Add overlooked sections

Deleting Utterances​

How to Delete:

  1. Click the X button on the utterance row
  2. Utterance is removed

Warning: Deleted utterances cannot be recovered after saving (unless you use Undo).

Use Cases:

  • Remove non-speech sections (long silences)
  • Delete irrelevant content
  • Clean up false starts

Splitting Utterances​

Keyboard Shortcut: Ctrl + Shift + Down or Cmd + Shift + Down

When to Split:

  • One speaker was incorrectly combined with another
  • Long utterance needs to be broken into parts
  • Speaker changes mid-utterance

How to Split:

  1. Position cursor where you want to split
  2. Click the Scissors icon button OR press Ctrl/Cmd + Shift + Down
  3. Utterance breaks into two at cursor position
  4. Each part can have different speaker labels

Example:

Before Split:
[00:05] Speaker 1
Hello everyone. Thank you for coming.

After Split:
[00:05] Speaker 1
Hello everyone.

[00:07] Speaker 1
Thank you for coming.

Comments​

Adding Comments​

Purpose: Add notes, questions, or annotations to specific sections of the transcript for collaboration.

How to Add:

  1. Select the text you want to comment on
  2. Formatting popup appears
  3. Click the Comment button (message circle icon)
  4. Modal dialog opens
  5. Type your comment
  6. Click Save

What Happens:

  • Comment is attached to the selected word range (using start and stop timestamps)
  • Selected words are highlighted with gray background (#dbdde3) when comment is active
  • Comments appear in the right sidebar (Comments History panel)

Use Cases:

  • Flag uncertain sections for review
  • Ask questions to collaborators
  • Note areas needing verification
  • Track discussion points

Search and Find​

Button: Click the Search icon in the toolbar

Search Panel:

  • Appears on the left side of the editor
  • Compact search interface
  • Real-time search as you type (debounced 250ms)

Search Options​

Case Sensitive:

  • Checkbox option in search panel
  • When enabled, "Test" will not match "test"

Whole Word:

  • Checkbox option in search panel
  • When enabled, "test" will not match "testing"

Search Results​

Visual Feedback:

  • Matching text is highlighted in yellow (#ffeeba)
  • Current match has a border (1px solid #afafaf)
  • Match counter shows "X of Y matches"

Navigation:

  • Next Match: Click right arrow or Enter
  • Previous Match: Click left arrow

How It Works:

  • Search scans all utterances and their text nodes
  • Results update in real-time as you type
  • Clicking a result jumps to that location and seeks audio

Replace​

Find and Replace:

  1. Open search panel (Ctrl + F)
  2. Enter search term in "Find" field
  3. Enter replacement text in "Replace" field
  4. Click Replace button to replace current match
  5. Click Replace All to replace all matches at once

Technical: Replace operations update the document structure and trigger re-rendering of affected utterances.

Undo and Redo​

The transcript editor maintains an undo/redo stack for all editing operations:

Using Undo​

Keyboard: Ctrl + Z (Windows) or Cmd + Z (Mac) Button: Undo button in toolbar (curved left arrow icon)

Behavior:

  • Reverts the last change
  • Can undo multiple steps
  • Works for text edits, formatting, deletions, utterance operations
  • Undo button is disabled when stack is empty

Undo Stack:

  • History of document states
  • Each edit creates a new snapshot
  • Stack is maintained in memory

Using Redo​

Keyboard: Ctrl + Y (Windows) or Cmd + Y (Mac) Button: Redo button in toolbar (curved right arrow icon)

Behavior:

  • Restores changes after undo
  • Only available after using undo
  • Can redo multiple steps
  • Redo button is disabled when stack is empty

Reset Document​

Extreme Undo:

  • Click the Reset button in toolbar (circular arrow icon)
  • Confirmation dialog appears: "Are you sure you want to reset?"
  • Click Reset to confirm
  • Resets entire document to last saved version
  • All unsaved changes are lost

Use Case: Made extensive changes you want to discard

Save Status and Auto-Save​

Save Status Indicator​

The editor displays the current save status in the top-right corner:

Status Messages:

  • "Saved" - All changes persisted to server
  • "Saving..." - Save in progress (with subtle blue progress animation)
  • "Edited" - Local edits not yet saved
  • Last saved timestamp - Shows relative time (e.g., "Last saved 2 minutes ago")

Technical Implementation:

  • Status tracked via isDirty flag in TranscriptContext
  • lastSavedAt timestamp updated when save completes
  • isSaving derived from saveDocumentLoading and transient saving state

Manual Save​

Button: Click Save button in toolbar (floppy disk icon) No Keyboard Shortcut - Ctrl + S applies strikethrough formatting

When to Use:

  • Completed a major editing section
  • Before closing the browser
  • After critical corrections
  • Peace of mind

What Happens:

  • saveDocument(true) is called with user action flag
  • Document structure is serialized
  • API request updates the server
  • Save status indicator updates

Auto-Save Behavior​

Important: There is no automatic periodic auto-save to the server.

What Auto-Saves:

  • LocalStorage backup - Changes are backed up to browser localStorage as you edit (see below)
  • Server save - Only triggered by manual Save button click or leaving the editor

Misconception Corrected: The original documentation claimed "auto-save every 2 minutes" but this is not implemented in the codebase.

LocalStorage Backup​

Automatic Backup​

How It Works:

  • Changes are backed up to browser localStorage via saveTranscriptToLocalStorage()
  • Provides recovery if connection drops or browser closes unexpectedly
  • Independent of server saves
  • Uses utility: src/utils/localStorage/transcript-storage.ts

What's Stored:

  • Document structure (utterances, text, formatting)
  • Session ID and Document ID as keys

Recovering from LocalStorage​

When Connection Fails:

  1. Continue editing even offline
  2. Changes saved to localStorage
  3. When connection restores, refresh page
  4. Editor loads from localStorage via loadTranscriptFromLocalStorage()
  5. Review changes and manually save to server

Limitations:

  • Browser-specific (clearing cache/storage removes backup)
  • Not a replacement for server saves
  • Best for short-term recovery

Important: Always manually save to the server before closing the editor for permanent storage.

Best Practices for Text Editing​

Efficient Editing Workflow​

1. Initial Skim

  • Read through transcript quickly
  • Don't edit yet—just observe
  • Note areas needing attention

2. Systematic Review

  • Work from beginning to end
  • Or prioritize critical sections
  • Don't jump around randomly

3. Listen and Verify

  • Click words to hear audio
  • Don't guess—verify with your ears
  • Context from surrounding sentences helps

4. Format for Clarity

  • Use bold for important terms
  • Highlight sections needing review
  • Strikethrough for deletions (if that's your workflow)
  • Add comments for questions or uncertainties

5. Save Frequently

  • Manual save after major edits
  • Watch for "Saved" status confirmation
  • Save before closing browser

Quality Assurance​

Double-Check:

  • Proper names (people, companies, places)
  • Technical terminology
  • Numbers and dates
  • Acronyms and abbreviations

Proofread:

  • Read final transcript without audio
  • Check flow and readability
  • Verify punctuation and capitalization
  • Ensure consistency

Final Listen:

  • Play through at normal or increased speed
  • Follow along to catch remaining errors
  • Focus on previously corrected sections

Common Editing Scenarios​

Scenario 1: Heavy Accent​

Challenge: Many words transcribed incorrectly due to accent

Approach:

  1. Use slow playback (adjust speed with Ctrl + / Ctrl -)
  2. Listen to each sentence by clicking words
  3. Correct word by word
  4. Re-listen to verify
  5. Use context clues

Scenario 2: Technical Content​

Challenge: Industry jargon misspelled or incorrect

Approach:

  1. Identify all technical terms
  2. Verify each against audio
  3. Use search to find all instances
  4. Correct consistently across document
  5. Save terminology for future reference

Scenario 3: Multiple Speakers​

Challenge: Speaker changes and attribution errors

Approach:

  1. Verify speaker labels first (see Speaker Management)
  2. Then edit text within each utterance
  3. Use split utterance for misattributed speech
  4. Add or delete utterances as needed

Scenario 4: Poor Audio Quality​

Challenge: Inaudible or unclear sections

Approach:

  1. Mark unclear sections with highlighting or comments
  2. Try slower playback
  3. Use context to infer meaning
  4. Use [inaudible] marker if truly incomprehensible
  5. Add comment flagging for review if critical

Keyboard Shortcuts for Editing​

Master these for fast editing:

ActionWindows/LinuxMac
BoldCtrl + BCmd + B
ItalicCtrl + ICmd + I
UnderlineCtrl + UCmd + U
StrikethroughCtrl + SCmd + S
UndoCtrl + ZCmd + Z
RedoCtrl + YCmd + Y
Find/SearchCtrl + FCmd + F
Split UtteranceCtrl + Shift + DownCmd + Shift + Down
Speed Up PlaybackCtrl + +Cmd + +
Slow Down PlaybackCtrl + -Cmd + -
Rewind 5 SecondsCtrl + Left ArrowCmd + Left Arrow
Forward 5 SecondsCtrl + Right ArrowCmd + Right Arrow

Technical Architecture Notes​

Editor Framework: Slate.js (React-based rich text editor)

  • Each utterance has its own Slate editor instance
  • Editors managed via EditorContext provider
  • Undo/redo via slate-history plugin

State Management:

  • TranscriptContext manages global transcript state
  • useEditorContext tracks all editor instances for search/replace
  • React Query for server synchronization

Data Structure:

  • Utterances contain paragraphs
  • Paragraphs contain text nodes with formatting properties
  • Text nodes have start/stop timestamps for audio sync

Frequently Asked Questions​

Do my edits change the original audio?​

No, edits only affect the text transcript. The audio file remains unchanged.

Can I edit while the audio is playing?​

Yes, but it's easier to pause first. Clicking to edit may disrupt playback focus.

Will my formatting be preserved when I export?​

Yes, most export formats (DOCX, HTML) preserve bold, italic, underline formatting. Plain text (TXT) does not.

Can I edit speaker labels while editing text?​

Yes, speaker labels are editable. See Label Speakers for details.

What if I accidentally delete a large section?​

Use Undo (Ctrl + Z) immediately. If you've saved, you may need to use Reset to restore to last saved version.

Can multiple people edit the same transcript simultaneously?​

In collaborative shared links, yes. Changes appear in real-time, but there's no conflict resolution—last edit wins.

How do I mark sections I'm unsure about?​

Use highlighting, add comments, or use [brackets] for inline notes.

Why doesn't Ctrl+S save the document?​

Ctrl + S is mapped to strikethrough formatting. Use the Save button in the toolbar for saving.

Next Steps​

Enhance your editing skills:

Start editing! Click into the text, make your first correction, and build your transcript editing skills.