feat: add teacher notes functionality to lesson creation and editing

Author: Jared-Gross

src/components/common/buttons/create-lesson-button.ts

@@ -36,6 +36,7 @@ export class CreateLessonPlanButton {
                 gradeLevel: this.outcome.grade,
                 date: new Date().toISOString(),
                 timeLength: "~ 1 hour",
+                teacherNotes: "",
                 curricularOutcomes: [this.outcome.outcomeId],
                 resourceLinks: [],
                 assessmentEvidence: [],

src/models/lesson.ts

@@ -11,6 +11,7 @@ export interface ILesson {
     resourceLinks: string[];
     assessmentEvidence: AssessmentRow[];
     notes: string;           // Markdown from ToastEditorField
+    teacherNotes: string;           // Markdown from ToastEditorField
 }
 
 export class Lesson implements ILesson {
@@ -24,6 +25,7 @@ export class Lesson implements ILesson {
     resourceLinks: string[];
     assessmentEvidence: AssessmentRow[];
     notes: string;           // Markdown from ToastEditorField
+    teacherNotes: string;           // Markdown from ToastEditorField
 
     constructor(init?: Partial<Lesson>) {
         this.topic = init?.topic ?? "";
@@ -36,6 +38,7 @@ export class Lesson implements ILesson {
         this.resourceLinks = init?.resourceLinks ?? [];
         this.assessmentEvidence = init?.assessmentEvidence ?? [];
         this.notes = init?.notes ?? "";
+        this.teacherNotes = init?.teacherNotes ?? "";
     }
 
     /** Serialize to JSON string */

src/pages/lesson/lesson.ts

@@ -602,7 +602,7 @@ class ToastEditorField implements LessonField<string> {
     header: HTMLHeadingElement;
     id: string;
 
-    constructor(id: string, labelText: string, helperText?: string) {
+    constructor(id: string, labelText: string, helperText?: string, height: string = "800px") {
         this.id = id;
 
         // wrapper
@@ -635,7 +635,7 @@ class ToastEditorField implements LessonField<string> {
         this.editor = new Editor({
             el: editorContainer,
             previewStyle: "vertical",
-            height: "800px",
+            height: height,
             initialEditType: "wysiwyg",
             usageStatistics: true,
             // theme: editorTheme,
@@ -726,6 +726,12 @@ class LessonNotesEditor extends ToastEditorField {
     }
 }
 
+class TeacherNotesEditor extends ToastEditorField {
+    constructor() {
+        super("teacher-notes", "Teacher Notes", "", "250px");
+    }
+}
+
 class AssessmentEvidenceSection implements LessonField<AssessmentRow[]> {
     element: HTMLElement;
     header: HTMLHeadingElement;
@@ -1012,6 +1018,7 @@ class LessonBuilder {
         private grade: GradeLevelSelect,
         private date: DateField,
         private time: TimeLengthSelect,
+        private teacherNotes: TeacherNotesEditor,
         private outcomes: CurricularOutcomesSection,
         private resources: ResourceLinksSection,
         private assessment: AssessmentEvidenceSection,
@@ -1028,6 +1035,8 @@ class LessonBuilder {
 **Date:** ${this.date.getValue() || ""}
 **Time:** ${this.time.getValue() || ""}
 
+${this.teacherNotes.getValue() ? `#### Teacher Notes:\n>${this.teacherNotes.getValue()}` : ""}
+
 ---
 
 ## Curricular Outcomes
@@ -1117,6 +1126,7 @@ function setupEditorPane() {
     const gradeLevelSelect = new GradeLevelSelect();
     const dateField = new DateField();
     const timeLengthSelect = new TimeLengthSelect();
+    const teacherNotes = new TeacherNotesEditor();
     const curricularOutcomesSection = new CurricularOutcomesSection();
     const resourceLinks = new ResourceLinksSection();
     const assessmentEvidence = new AssessmentEvidenceSection();
@@ -1128,6 +1138,7 @@ function setupEditorPane() {
     (window as any).gradeLevelSelect = gradeLevelSelect;
     (window as any).dateField = dateField;
     (window as any).timeLengthSelect = timeLengthSelect;
+    (window as any).teacherNotes = teacherNotes;
     (window as any).curricularOutcomesSection = curricularOutcomesSection;
     (window as any).resourceLinks = resourceLinks;
     (window as any).assessmentEvidence = assessmentEvidence;
@@ -1149,6 +1160,7 @@ function setupEditorPane() {
         gradeLevelSelect,
         dateField,
         timeLengthSelect,
+        teacherNotes,
     ].forEach(f => grid.appendChild(f.element));
 
     const editorPane = document.getElementById("editor-pane")!;
@@ -1170,6 +1182,7 @@ function setupEditorPane() {
         gradeLevelSelect,
         dateField,
         timeLengthSelect,
+        teacherNotes,
         curricularOutcomesSection,
         resourceLinks,
         assessmentEvidence,
@@ -1189,6 +1202,7 @@ function setupEditorPane() {
         el.addEventListener("input", updatePreview)
     );
     lessonNotes.editor.on("change", updatePreview);
+    teacherNotes.editor.on("change", updatePreview);
     curricularOutcomesSection.onChange = updatePreview;
     resourceLinks.onChange = updatePreview;
     assessmentEvidence.onChange = updatePreview;
@@ -1213,13 +1227,15 @@ async function saveLesson() {
         gradeLevel: (document.getElementById("grade-level") as HTMLSelectElement)?.value || "",
         date: (document.getElementById("date-time-input") as HTMLInputElement)?.value || "",
         timeLength: (document.getElementById("time-length") as HTMLSelectElement)?.value || "",
+        teacherNotes: "",
         curricularOutcomes: [],
         resourceLinks: [],
         assessmentEvidence: [],
         notes: "",
     };
 
     // If your field instances are available globally or in scope:
+    data.teacherNotes = (window as any).teacherNotes.getValue();
     data.notes = (window as any).lessonNotes.getValue();
     data.curricularOutcomes = (window as any).curricularOutcomesSection.getValue();
     data.resourceLinks = (window as any).resourceLinks.getValue();
@@ -1304,6 +1320,7 @@ async function loadLessonById() {
         (window as any).gradeLevelSelect.setValue(data.gradeLevel || "");
         (window as any).dateField.setValue(data.date || "");
         (window as any).timeLengthSelect.setValue(data.timeLength || "");
+        (window as any).teacherNotes.setValue(data.teacherNotes || "");
         (window as any).lessonNotes.setValue(data.notes || "");
         await (window as any).curricularOutcomesSection.setValues(data.curricularOutcomes || []);
         (window as any).resourceLinks.setValues(data.resourceLinks || []);