Rich Text Editor

import { RichTextEditor } from "@samplehc/ui/components";
import { useTaskState } from "@samplehc/ui/data";
import { useRef, useState } from "react";

function PersistentEditor() {
  const [content, setContent] = useTaskState("documentContent", "");
  const [isSaving, setIsSaving] = useState(false);
  const editorRef = useRef();

  const handleUpdate = ({ editor }) => {
    setIsSaving(true);
    const html = editor.getHTML();
    
    // Debounce saves to avoid too frequent updates
    setTimeout(() => {
      setContent(html);
      setIsSaving(false);
    }, 1000);
  };

  return (
    <RichTextEditor
      editorRef={editorRef}
      defaultValue={content}
      onUpdate={handleUpdate}
      isSaving={isSaving}
    />
  );
}

import { RichTextEditor } from "@samplehc/ui/components";

const MEDICAL_REPORT_TEMPLATE = `
<h1>Medical Report</h1>
<h2>Patient Information</h2>
<p><strong>Patient Name:</strong> [Patient Name]</p>
<p><strong>Date of Birth:</strong> [DOB]</p>
<p><strong>MRN:</strong> [Medical Record Number]</p>

<h2>Chief Complaint</h2>
<p>[Chief complaint...]</p>

<h2>History of Present Illness</h2>
<p>[HPI details...]</p>

<h2>Assessment and Plan</h2>
<p>[Assessment and plan...]</p>

<h2>Physician Signature</h2>
<p>[Physician name and credentials]</p>
<p>[Date signed]</p>
`;

function MedicalReportEditor() {
  return (
    <RichTextEditor
      defaultValue={MEDICAL_REPORT_TEMPLATE}
      onUpdate={({ editor }) => {
        // Auto-save functionality
        localStorage.setItem("medical-report-draft", editor.getHTML());
      }}
    />
  );
}