S
Speakly.PRO

Lex Editor Guide

Create rich, interactive language learning content with the Lex Editor.

The Lex Editor is a sophisticated content creation environment built on Lexical (Meta's framework). It is specifically designed for educational content with powerful features for language learning.

Access the Editor:

  • Create or edit any lesson
  • Opens automatically in content area
  • Available at /platform/courses/[id]/lessons/[id]/edit

Editor Interface

Main Components

1. Toolbar (Top)

Formatting Toolbar:

  • Text styles (Normal, Heading 1-3, Quote)
  • Bold, Italic, Underline, Strikethrough
  • Text color and highlighting
  • Alignment options
  • Lists (ordered, unordered, checklist)
  • Indentation
  • Clear formatting

Insert Toolbar:

  • Insert menu for special elements
  • Quick-insert buttons for common items
  • Media upload buttons
  • Exercise insertion

2. Main Content Area (Center)

Writing Space:

  • Large, clean editing area
  • Click to place cursor
  • Type or paste content
  • See real-time formatting

Block-Based Structure:

  • Content organized in blocks
  • Each paragraph, image, or element is a block
  • Drag to reorder blocks
  • Blocks can be transformed

3. Sidebar (Right)

May Include:

  • Document outline
  • Comments and suggestions
  • Collaboration panel
  • Settings and properties

4. Status Bar (Bottom)

Information Display:

  • Word count
  • Character count
  • Reading time estimate
  • Last saved timestamp
  • Auto-save indicator

Basic Text Editing

Text Formatting

Apply Formatting:

  1. Select Text: Click and drag to highlight, or place cursor in text
  2. Use Toolbar: Click formatting button, or use keyboard shortcuts

Common Shortcuts:

  • Ctrl/Cmd + B - Bold
  • Ctrl/Cmd + I - Italic
  • Ctrl/Cmd + U - Underline
  • Ctrl/Cmd + K - Insert link

Text Styles:

  • Normal: Regular paragraph text
  • Heading 1: Main sections
  • Heading 2: Subsections
  • Heading 3: Sub-subsections
  • Quote: Blockquotes and citations

Lists

Create Lists:

Ordered List (Numbered):

  1. Click ordered list button
  2. Type first item
  3. Press Enter for next item
  4. Press Enter twice to end list

Unordered List (Bullets):

  • Click bullet list button
  • Same behavior as ordered

Checklist:

  • Click checklist button
  • Creates checkboxes
  • Can check/uncheck

Indentation:

  • Tab key to indent
  • Shift+Tab to outdent
  • Or use toolbar buttons

Insert Links:

  1. Select text to link
  2. Click link button (or Ctrl/Cmd+K)
  3. Enter URL
  4. Choose open in new tab (optional)
  5. Click Save

Edit Links:

  • Click on link
  • Click edit icon
  • Modify URL or text

Remove Links:

  • Click link
  • Click unlink icon

Working with Blocks

Understanding Blocks

Everything in the editor is a block:

  • Paragraphs
  • Headings
  • Images
  • Exercises
  • Tables
  • And more...

Block Menu:

  • Hover left of any block
  • Six-dot icon appears
  • Click and drag to move
  • Or click for options

Transforming Blocks

Change Block Type:

  1. Click in block
  2. Look for transform option
  3. Or use "/" command:
    • Type "/" at start of block
    • Menu of options appears
    • Select new block type

Examples:

  • Transform paragraph to heading
  • Convert text to quote
  • Change list type
  • Turn text into exercise

Slash Commands

Quick Insert with "/":

Type "/" anywhere to see menu of:

  • Basic blocks (paragraph, heading)
  • Lists
  • Media (image, video)
  • Exercises
  • Special elements
  • Embeds

Popular Commands:

  • /h1, /h2, /h3 - Headings
  • /image - Insert image
  • /table - Create table
  • /exercise - Add exercise
  • /audio - Insert audio
  • /math - Add equation

Inserting Media

Images

Upload Image:

  1. Click "Insert Image" button or type /image
  2. Choose source:
    • Upload: From computer
    • URL: Web image
    • Library: Existing images
  3. Select or upload image
  4. Add:
    • Alt text (for accessibility)
    • Caption (optional)
    • Size (small, medium, large, full)
  5. Click Insert

Image Options:

After inserting:

  • Click image to select
  • Resize by dragging corners
  • Alignment buttons (left, center, right)
  • Replace image
  • Add link to image

Best Practices:

  • Always add alt text
  • Optimize file size (under 2MB)
  • Use relevant, high-quality images
  • Respect copyright

Audio

Insert Audio:

  1. Click "Insert Audio" or type /audio
  2. Choose method:
    • Upload: Audio file (MP3, WAV, M4A)
    • Record: Direct recording
    • Embed: External audio URL
  3. Configure: Title, Description, Transcript (recommended)
  4. Insert into content

Audio Player:

  • Play/pause controls
  • Volume adjustment
  • Progress bar
  • Download option (configurable)

Video

Embed Video:

YouTube:

  1. Type /youtube or click video button
  2. Paste YouTube URL
  3. Configure size and alignment
  4. Insert

Other Platforms:

  • Vimeo
  • Other embeddable players
  • Direct video files (if supported)

Video Options:

  • Autoplay (not recommended)
  • Start time offset
  • Size and alignment
  • Caption

Advanced Content Elements

Tables

Create Tables:

  1. Type /table or click table button
  2. Choose initial size (rows x columns) -- can add/remove later
  3. Table appears in editor

Editing Tables:

  • Add Rows/Columns: Click in cell, look for + icons on edges, or use right-click menu
  • Delete Rows/Columns: Right-click cell, select delete option
  • Cell Properties: Merge cells, split cells, header formatting, background color, alignment
  • Table Properties: Border style, width (fixed or responsive), caption

Mathematical Equations

Insert Equations:

  1. Type /math or /equation
  2. Equation editor appears
  3. Enter LaTeX or use visual editor
  4. Preview renders in real-time
  5. Insert into content

LaTeX Support:

  • Full LaTeX syntax
  • Common presets available
  • Fractions, exponents, roots
  • Greek letters
  • Mathematical symbols

Examples:

E = mc^2
\frac{a}{b} + \frac{c}{d}
\sqrt{x^2 + y^2}
\sum_{i=1}^{n} x_i

Code Blocks

Insert Code:

  1. Type /code or click code button
  2. Code block appears
  3. Select language from dropdown (Python, JavaScript, HTML, and 50+ more)
  4. Paste or type code
  5. Syntax highlighting applies automatically

Features:

  • Line numbers (toggle)
  • Copy button
  • Language detection
  • Theme selection

Collapsible Sections

Create Expandable Content:

  1. Type /collapsible or find in insert menu
  2. Section appears with:
    • Title/header (always visible)
    • Content area (expandable)
  3. Add title
  4. Add hidden content
  5. Students click to expand

Use Cases:

  • Additional examples
  • Advanced information
  • Optional readings
  • Answer keys

Layouts and Columns

Multi-Column Layouts:

  1. Type /columns or find layout option
  2. Choose column configuration:
    • 2 columns
    • 3 columns
    • 2/3 + 1/3 split
    • Custom
  3. Columns appear
  4. Add content to each column

Responsive Behavior:

  • Side-by-side on desktop
  • Stacks vertically on mobile
  • Maintains readability

Special Features

Mentions

Mention Users:

  1. Type @
  2. Username search appears
  3. Type name or select from list
  4. Mention becomes link to user

Use Cases:

  • Assign tasks to co-teachers
  • Reference student work
  • Collaborative editing

Comments and Annotations

Add Comments:

  1. Select text
  2. Click comment button
  3. Type comment
  4. Comment appears in sidebar

Types of Comments:

  • Teacher Notes: Visible only to teachers
  • Suggestions: Track changes
  • Feedback: For students

Comment Features:

  • Threaded discussions
  • Resolve/unresolve
  • Notifications
  • Filter by type

Page Breaks

Insert Page Breaks:

  1. Type /pagebreak or insert from menu
  2. Marks where page ends when printing
  3. Helps with PDF export

Working with Content

Copy and Paste

Basic Paste:

  • Ctrl/Cmd + V - Paste with formatting
  • Ctrl/Cmd + Shift + V - Paste as plain text

Paste from External Sources:

  • Word documents
  • Google Docs
  • Web pages
  • Other editors

Paste Handling:

  • Editor cleans up formatting
  • Preserves headings and lists
  • Converts tables
  • Handles images (if available)

Find and Replace

Access Find/Replace:

  • Ctrl/Cmd + F - Find
  • Ctrl/Cmd + H - Find and Replace

Features:

  • Case sensitive option
  • Match whole words
  • Regular expressions (advanced)
  • Replace one or all

Undo and Redo

Commands:

  • Ctrl/Cmd + Z - Undo
  • Ctrl/Cmd + Y or Ctrl/Cmd + Shift + Z - Redo

History:

  • Maintains full history
  • Undo multiple actions
  • Redo after undo

Saving and Publishing

Auto-Save

How It Works:

  • Saves every 30 seconds
  • Indicator shows "Saving..." then "Saved"
  • Prevents data loss

Manual Save

Force Save:

  • Click "Save" button
  • Or Ctrl/Cmd + S
  • Use before closing

Publishing

Save vs. Publish:

  • Save: Store changes, stay in draft
  • Publish: Make live for students

Publication Options:

  • Immediate: Available now
  • Scheduled: Set future date/time
  • Draft: Continue editing

Collaboration Features

Real-Time Editing

Multi-User Editing:

  • Multiple teachers can edit simultaneously
  • See others' cursors
  • Changes sync in real-time
  • Conflict resolution automatic

Presence Indicators:

  • Colored cursors show who is editing
  • Avatar icons in corners
  • Activity status

Version History

Access History:

  1. Click "History" button
  2. See list of all versions
  3. Shows:
    • Timestamp
    • Editor name
    • Changes summary

Restore Versions:

  • Click any version to preview
  • Click "Restore" to rollback
  • Current version preserved

Troubleshooting

Editor Not Loading

Solutions:

  1. Refresh page
  2. Clear browser cache
  3. Try different browser
  4. Check internet connection
  5. Disable browser extensions

Content Not Saving

Solutions:

  1. Check connection
  2. Wait for auto-save indicator
  3. Try manual save
  4. Copy content as backup
  5. Contact support if persistent

Formatting Issues

Common Problems:

  • Pasted content looks wrong
  • Styles not applying
  • Layout breaks

Solutions:

  • Paste as plain text, then format
  • Clear formatting and reapply
  • Check for conflicting styles
  • Use "Clear Formatting" button

Next Steps

Now that you understand the editor basics:


Q&A

Can multiple teachers edit the same lesson at the same time?

Yes. The Lex Editor supports real-time collaboration. Multiple users see each other's cursors and changes sync instantly. Conflicts are resolved automatically.

What file formats can I upload for images and audio?

Images: JPG, PNG, GIF, WebP (under 5MB recommended). Audio: MP3, WAV, M4A. Video is embedded via URL (YouTube, Vimeo).

Can students see teacher comments and annotations?

It depends on the comment type. "Teacher Notes" are visible only to teachers. "Feedback" comments can be configured to show to students.

Does the editor work offline?

The editor requires an internet connection for saving and collaboration features. If you lose connection temporarily, auto-save will retry once reconnected. Always save before going offline.