# Anoop Kakkur Rich Text Editor for Moodle

A powerful, modern WYSIWYG rich text editor plugin for Moodle LMS with **150+ admin-configurable features**, dark mode, accessibility support, and zero external dependencies.

**Version:** 3.1.0  
**Requires:** Moodle 4.1+ (compatible through Moodle 5.2)  
**License:** GNU GPL v3  
**Author:** Anoop Kakkur ([anoopkakkur.com](https://anoopkakkur.com))

---

## Complete Feature List

### General / Interface

- **Show menu bar** — Show the File, Edit, View, Insert, Format, Tools, Help menu bar.
- **Show status bar** — Show the bottom status bar with word count, character count, and element path.
- **Source code view** — Allow users to view and edit the HTML source code.
- **Fullscreen mode** — Allow users to enter fullscreen editing mode (F11).
- **Dark mode toggle** — Allow users to switch between light and dark editor themes.
- **Spell check toggle** — Allow users to toggle browser spell checking on and off.
- **Auto-save drafts** — Periodically auto-save editor content to browser storage with draft recovery.
- **Reading time estimate** — Display estimated reading time in the status bar.
- **Keyboard accessibility mode** — Enable enhanced keyboard navigation and ARIA support for accessibility.
- **Zoom controls** — Allow users to zoom editor content in and out.
- **Focus / Typewriter mode** — Dim all text except the current paragraph for focused writing.
- **Sticky toolbar** — Keep toolbar visible when scrolling long documents.
- **Reading progress bar** — Show a horizontal bar indicating scroll percentage through the document.
- **Line numbers** — Allow users to toggle line numbers in the editor margin.
- **Soft/Hard return toggle** — Show visual indicators for line breaks vs paragraph breaks.
- **Paste as plain text toggle** — Allow users to globally toggle stripping formatting on paste.
- **Auto-correct / Auto-replace** — Automatically replace common symbols like (c) to copyright and arrows.
- **Floating toolbar** — Show a context toolbar near selected text.
- **Clickable element breadcrumb** — Allow users to click the status bar element path to select parent elements.
- **Mini map / Document overview** — Show a small preview of the entire document in a sidebar.
- **Split view** — Allow users to edit source and preview side by side simultaneously.
- **Distraction-free mode** — Hide all UI except the writing area for focused composition.
- **Ruler / Margin guides** — Show a visual ruler with draggable margin indicators.
- **Side panel / Inspector** — Show a properties panel displaying current element attributes.

### Text Formatting

- **Font family selector** — Allow users to change font family.
- **Font size selector** — Allow users to change font size.
- **Text colour** — Allow users to change text and highlight colours.
- **Line spacing** — Allow users to adjust line spacing.
- **Paragraph borders and shading** — Allow users to add borders and shading to paragraphs.
- **Text columns** — Allow users to create multi-column text layouts.
- **Text case transform** — Allow users to transform text to UPPERCASE, lowercase, Title Case, or Sentence case.
- **Text direction (RTL/LTR)** — Allow users to switch text direction for right-to-left language support.
- **Drop cap** — Allow users to apply a large decorative first letter to paragraphs.
- **Small caps** — Allow users to apply small-caps text styling.
- **Letter and word spacing** — Allow users to adjust letter spacing and word spacing.
- **Text shadow** — Allow users to apply shadow effects to text.
- **Paragraph spacing** — Allow users to control spacing before and after paragraphs independently.
- **Editor background colour** — Allow users to change the editor page background colour.
- **Custom CSS classes** — Allow users to apply custom CSS class names to selected elements.
- **Gradient text** — Allow users to apply gradient colours to selected text.
- **Quick format painter** — Allow users to copy formatting and apply to another selection.
- **Per-block text direction** — Allow users to set LTR/RTL direction per paragraph.
- **Transliteration helper** — Allow users to type English and auto-convert to Malayalam/Hindi.

### Insert Features

- **Images** — Allow users to insert images (URL, file upload, drag and drop).
- **Links** — Allow users to insert hyperlinks.
- **Tables** — Allow users to insert and edit tables.
- **Code blocks and snippets** — Allow users to insert code blocks with syntax highlighting and code snippets.
- **Horizontal lines** — Allow users to insert styled horizontal lines.
- **Special characters and emoji** — Allow users to insert special characters, currency symbols, and emoji.
- **Video and iframe embeds** — Allow users to embed YouTube/Vimeo videos and iframes.
- **Shapes** — Allow users to insert shapes with text overlay, resize, and drag.
- **SmartArt** — Allow users to insert SmartArt templates (process, hierarchy, cycle, etc.).
- **Charts** — Allow users to insert charts (bar, column, line, pie, donut, area).
- **Text boxes** — Allow users to insert bordered, resizable text boxes.
- **Heading templates** — Allow users to use pre-styled heading and subheading templates.
- **Callout / Alert boxes** — Allow users to insert styled info, warning, success, and error callout boxes.
- **Footnotes** — Allow users to insert numbered footnotes with auto-linking references.
- **Definition lists** — Allow users to insert formatted definition term and description pairs.
- **Accordion / Collapsible sections** — Allow users to insert collapsible content sections with summary headers.
- **Badges and tags** — Allow users to insert styled inline badges and coloured label tags.
- **Math / Equation editor** — Allow users to insert math equations using LaTeX notation.
- **Content templates** — Allow users to insert pre-built document templates (letter, report, meeting notes, etc.).
- **Highlight annotations** — Allow users to add margin annotations and comments to highlighted text.
- **Image caption** — Allow users to add styled captions below images.
- **Image gallery / Grid** — Allow users to insert multiple images in a grid layout.
- **Audio embed** — Allow users to embed audio files with HTML5 audio player.
- **File attachment links** — Allow users to insert styled download link boxes for files.
- **Blockquote with citation** — Allow users to insert enhanced blockquotes with author/source attribution.
- **Figure with figcaption** — Allow users to insert proper HTML5 figure elements with captions.
- **Progress bar** — Allow users to insert visual percentage progress bars.
- **Timeline** — Allow users to insert vertical timelines for events and milestones.
- **Tab panels** — Allow users to insert tabbed content sections.
- **Table cell merge/split** — Allow users to merge and split table cells.
- **Table sorting** — Allow users to sort table columns alphabetically or numerically.
- **Table styling presets** — Allow users to apply pre-styled table themes.
- **Checklist / Task list** — Allow users to insert interactive checkbox task lists.
- **Content divider with label** — Allow users to insert labelled section dividers.
- **Placeholder / Merge fields** — Allow users to insert placeholder tokens like name and date.
- **Date/Time insert** — Allow users to quick-insert the current date or time.
- **Lorem ipsum generator** — Allow users to insert placeholder dummy text.
- **Card / Box component** — Allow users to insert styled card containers with shadow and padding.
- **Divider patterns** — Allow users to insert extended decorative dividers.
- **Citation / Reference insert** — Allow users to insert APA/MLA/Chicago style citations with bibliography.
- **Glossary tooltip** — Allow users to mark terms that show definitions on hover.
- **Quiz / Question box** — Allow users to insert styled question and answer reveal boxes.
- **Step-by-step instruction box** — Allow users to insert numbered step containers with icons.
- **Key takeaway / Summary box** — Allow users to insert highlighted Key Points summary containers.
- **Compare / Versus box** — Allow users to insert side-by-side comparison layouts.
- **Rubric table template** — Allow users to insert pre-built assessment rubric tables.
- **Learning objective box** — Allow users to insert styled learning objective containers.
- **Non-breaking space insert** — Allow users to insert non-breaking spaces with visual indicator.
- **QR code generator** — Allow users to insert QR codes from URL or text.
- **Google Maps embed** — Allow users to insert Google Maps location embeds.
- **Social media embed** — Allow users to embed tweets, Instagram posts, etc.
- **oEmbed support** — Auto-detect and embed supported URLs using oEmbed.
- **Anchor links / Bookmarks** — Allow users to insert named anchors for internal page navigation.
- **Endnote section** — Allow users to insert endnotes separate from footnotes.
- **JSON/XML viewer** — Display formatted, syntax-highlighted JSON and XML content.
- **Mermaid diagram support** — Allow users to write Mermaid syntax that renders as diagrams.
- **ASCII art box** — Allow users to insert styled ASCII and box-drawing containers.
- **Kanban board insert** — Allow users to insert visual task boards with columns.
- **Star rating insert** — Allow users to insert interactive star rating displays.
- **Colour palette insert** — Allow users to insert visual colour swatch strips.
- **Moodle activity linker** — Allow users to quick-link to Moodle courses and activities.

### Document Features

- **Page break** — Allow users to insert page breaks for print/PDF export.
- **Table of contents** — Allow users to generate a table of contents from headings.
- **Watermark** — Allow users to add watermark text behind content.
- **Header and footer** — Allow users to add editable headers and footers.
- **Heading auto-numbering** — Auto-number headings in outline format (1.0, 1.1, 1.2).
- **Document properties** — Allow users to set title, author, and description metadata.
- **Multi-page / Section navigator** — Allow users to break long documents into navigable sections.
- **Index / Keyword tagging** — Allow users to tag words for auto-generated index section.
- **Running header/footer** — Allow users to set different headers per document section.
- **Page number insert** — Allow users to insert Page X of Y markers for print layouts.
- **Cross-reference** — Allow users to insert auto-linked references like See Figure 3 or See Table 2.

### Export & Import

- **Export to PDF** — Allow users to export content as PDF.
- **Export to Word** — Allow users to export content as a Word document.
- **Import from Word** — Allow users to import content from Word documents.
- **Export HTML** — Allow users to export the raw HTML.
- **Markdown import/export** — Allow users to import from and export to Markdown format.
- **Print preview** — Allow users to preview the document before printing with proper styling.
- **Export to ePub** — Allow users to export content as ePub eBook format.
- **Export Markdown with frontmatter** — Allow users to export Markdown with YAML frontmatter.

### Advanced Tools

- **Find and replace** — Allow users to use the find and replace feature.
- **Show blocks** — Allow users to toggle visual block outlines.
- **Word/Character limit warning** — Allow admins to set a maximum word or character limit with visual warning.
- **Text statistics** — Show detailed text stats: sentences, paragraphs, readability score.
- **Clipboard history** — Allow users to access the last 5 copied items for quick re-paste.
- **Content lock / Read-only sections** — Allow users to lock specific sections from editing.
- **Undo history panel** — Show a visual list of all undo states with jump-to capability.
- **Unicode character inspector** — Show Unicode information for selected characters.
- **Word count per language** — Show separate word counts for different script blocks.
- **Broken link checker** — Scan all links in the document and highlight broken ones.
- **Duplicate content detector** — Highlight repeated paragraphs or sentences in the document.
- **Word frequency analyser** — Show most-used words with frequency counts.
- **Passive voice detector** — Highlight sentences using passive voice construction.
- **Sentence length warning** — Highlight overly long sentences exceeding 40 words.
- **Jargon / Complexity highlighter** — Flag complex words and suggest simpler alternatives.
- **Consistency checker** — Flag inconsistent spelling patterns in the document.
- **Version compare / Diff view** — Allow users to compare current content with the last saved version.
- **Toolbar customiser** — Allow admins to customise toolbar layout via drag and drop.

### Accessibility & Validation

- **Image alt text editor** — Provide a dedicated UI to edit alt text on all images.
- **Heading level checker** — Warn if heading hierarchy is broken (e.g. H1 to H3 skip).
- **Colour contrast checker** — Check if text/background colour meets WCAG AA requirements.
- **Reading level indicator** — Display Flesch-Kincaid readability score.
- **Language attribute** — Allow users to set lang attribute on text selections for multilingual content.

### Security & Privacy

- **Content encryption** — Allow users to encrypt and decrypt selected content with a passphrase.
- **Redaction tool** — Allow users to black out sensitive text with actual content removal.
- **Invisible watermark** — Insert hidden digital fingerprints in content for plagiarism tracking.
- **Export sanitiser** — Strip all metadata and hidden content before export.

### Core Editing (always available)

- Rich text formatting (Bold, Italic, Underline, Strikethrough, Sub/Superscript)
- Block formatting (Headings H1–H6, Paragraphs, Blockquotes, Preformatted)
- Text alignment (Left, Centre, Right, Justify)
- Bullet and numbered lists with indent/outdent
- Undo/Redo with full history
- 40+ keyboard shortcuts
- Paste normalization (minimum 14px font)
- Real-time word & character count

---

## Admin Settings

All **150 features** can be individually enabled/disabled from:  
**Site Administration → Plugins → Text Editors → Anoop Kakkur Rich Text Editor**

Plus 2 text configuration fields:
- **Editor height** (CSS value, default: 75vh)
- **Default font size** (pixels, default: 16)

---

## Voice Typing

Voice typing uses the **Web Speech API** built into modern browsers. No API key, no
registration, no cost. The browser streams audio to Google speech servers (Chrome/Edge)
transparently — no audio passes through Moodle or this plugin.

### Setup
1. `Site Administration → Plugins → Text Editors → Anoop Kakkur Rich Text Editor`
2. Under **Voice typing**, ensure **Voice typing** is ticked.
3. Under **Voice typing languages**, tick the languages to expose to users.
   English India, English US, English UK, Malayalam, Tamil, and Hindi are on by default.

### How users use it
1. Select language from the dropdown in the editor toolbar.
2. Click the microphone button.
3. Browser prompts for microphone permission on first use — click Allow.
4. Speak. Text appears at the cursor in real time.
5. Click the mic button again or click **■ Stop** to finish.

### Browser support
| Browser | Status |
|---|---|
| Chrome 25+ | Full — best accuracy for Indian languages |
| Edge 79+ | Full |
| Safari 14.1+ | Supported |
| Mobile Chrome Android | Supported (Chrome 25+) |
| Mobile Safari iOS | Supported (iOS 14.5+) |
| Firefox | Disabled by default — enable `media.webspeech.recognition.enable` in `about:config` |

### Requirements
- **HTTPS** — all production Moodle sites already use HTTPS.
- **Microphone** — browser prompts the user on first use.
- **Internet connection** — browser streams audio to recognition service.

### Languages (admin-configurable)
| Language | Code | Default |
|---|---|---|
| English (India) | en-IN | On |
| English (US) | en-US | On |
| English (UK) | en-GB | On |
| Malayalam | ml-IN | On |
| Tamil | ta-IN | On |
| Hindi | hi-IN | On |
| Telugu | te-IN | Off |
| Kannada | kn-IN | Off |
| Bengali | bn-IN | Off |
| Urdu | ur-PK | Off |
| Arabic | ar-SA | Off |
| French | fr-FR | Off |
| Spanish | es-ES | Off |
| German | de-DE | Off |
| Japanese | ja-JP | Off |
| Chinese Simplified | zh-CN | Off |
| Portuguese Brazil | pt-BR | Off |
| Russian | ru-RU | Off |
| Korean | ko-KR | Off |

---

## Installation

1. Download and extract to: `moodle/lib/editor/customeditor/`
2. Go to **Site Administration → Notifications** to trigger the upgrade
3. Configure settings at **Site Administration → Plugins → Text Editors → Anoop Kakkur Rich Text Editor**
4. Enable the editor at **Site Administration → Plugins → Text Editors → Manage Editors**

## Requirements

- Moodle 4.1 or later (tested through Moodle 5.2)
- Modern browser (Chrome, Firefox, Safari, Edge)
- No external dependencies — all fonts and assets are bundled

## Bundled Fonts

18 fonts included (no CDN required):
- **English:** Work Sans, IBM Plex Mono, Instrument Sans
- **Malayalam:** Baloo Chettan 2, Noto Sans Malayalam, Dyuthi, Mandaram, Raghu Malayalam Sans, Suruma, Thumba
- **System fallbacks:** Arial, Times New Roman, Georgia, Verdana, Courier New, and more

## Security

- Content Security Policy headers
- 2-phase HTML sanitizer (regex + DOM-based)
- XSS protection on all user inputs
- Iframe sandboxing with domain allowlist
- Paste normalization and sanitization
- Export sanitiser option
- Content encryption support
- Redaction tool for sensitive content

## Changelog

See [CHANGES.md](CHANGES.md) for full version history.

## License

GNU GPL v3 — see [LICENSE](http://www.gnu.org/copyleft/gpl.html)
