nate/homeschool
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add rich text editor for lesson content input

Browse Source 
Replaces the plain textarea with a WYSIWYG contenteditable editor so
the formatting the parent sees while writing matches what the student
sees when reading. Toolbar supports bold, italic, underline, H2/H3,
bullet/numbered lists, links, and YouTube embeds. Selection is saved
on editor blur and restored before each execCommand so toolbar clicks
don't lose the user's selection.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Nate EmmertandClaude Sonnet 4.6 committed 2026-07-21 20:00:03 -04:00
1 parent 4ec26b1deb
commit 3dc4ddea4b
3 files changed
+118 -7
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/admin.html
+18 -3
View File
@@ -162,9 +162,24 @@
</div>
<div id="ie-field-lesson" class="ie-field">
<label>Lesson content (text, or paste HTML — images/YouTube embeds allowed)
<textarea id="ie-body-lesson" rows="8" placeholder="Weather is what the sky and air are doing right now.&#10;&#10;&lt;iframe src=&quot;https://www.youtube.com/embed/VIDEO_ID&quot;&gt;&lt;/iframe&gt;"></textarea>
</label>
<div class="rte-label">Lesson content</div>
<div class="rte-toolbar">
<button type="button" class="rte-btn" data-cmd="bold" title="Bold"><b>B</b></button>
<button type="button" class="rte-btn" data-cmd="italic" title="Italic"><i>I</i></button>
<button type="button" class="rte-btn" data-cmd="underline" title="Underline"><u>U</u></button>
<span class="rte-sep"></span>
<button type="button" class="rte-btn" data-cmd="formatBlock" data-val="h2" title="Heading">H2</button>
<button type="button" class="rte-btn" data-cmd="formatBlock" data-val="h3" title="Sub-heading">H3</button>
<button type="button" class="rte-btn" data-cmd="formatBlock" data-val="p" title="Paragraph"></button>
<span class="rte-sep"></span>
<button type="button" class="rte-btn" data-cmd="insertUnorderedList" title="Bullet list">• List</button>
<button type="button" class="rte-btn" data-cmd="insertOrderedList" title="Numbered list">1. List</button>
<span class="rte-sep"></span>
<button type="button" class="rte-btn" id="rte-link-btn" title="Add link">🔗 Link</button>
<button type="button" class="rte-btn" id="rte-youtube-btn" title="Embed YouTube">▶ YouTube</button>
</div>
<div id="ie-body-lesson" class="rte-editor lesson-body" contenteditable="true"
data-placeholder="Weather is what the sky and air are doing right now.&#10;Add images, YouTube embeds, and more."></div>
</div>
<div id="ie-field-assignment" class="ie-field">