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

Add rich text editor to assignment body field

Browse Source 
Replaces the plain textarea with a contenteditable div + full toolbar
(bold, italic, underline, H2/H3, paragraph, bullet/numbered lists, link,
YouTube embed) — same as the lesson editor.

Toolbar buttons use mousedown+preventDefault so selection is preserved
when clicking format buttons. Both editors share the same button wiring
via closest('.rte-group') rather than hardcoded element IDs.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 4.6 committed 2026-07-30 12:16:39 -04:00
1 parent c7dd48d0c3
commit 35ae40819b
2 files changed
+72 -53
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/admin.html
+23 -6
View File
@@ -181,7 +181,7 @@
<p id="import-status" class="hint"></p>
</div>
<div id="ie-field-lesson" class="ie-field">
<div id="ie-field-lesson" class="ie-field rte-group">
<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>
@@ -195,16 +195,33 @@
<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>
<button type="button" class="rte-btn rte-link-btn" title="Add link">🔗 Link</button>
<button type="button" class="rte-btn 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">
<label>Instructions <textarea id="ie-body-assignment" rows="5" placeholder="Draw today's weather and write one sentence."></textarea></label>
<label>Points possible <input id="ie-points" type="number" min="0" value="10"></label>
<div id="ie-field-assignment" class="ie-field rte-group">
<div class="rte-label">Instructions</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 rte-link-btn" title="Add link">🔗 Link</button>
<button type="button" class="rte-btn rte-youtube-btn" title="Embed YouTube">▶ YouTube</button>
</div>
<div id="ie-body-assignment" class="rte-editor lesson-body" contenteditable="true"
data-placeholder="Draw today's weather and write one sentence."></div>
<label style="margin-top:.75rem">Points possible <input id="ie-points" type="number" min="0" value="10"></label>
</div>
<div id="ie-field-quiz" class="ie-field">