با استفاده از useState باید:

• داده‌های موجود در localStorage با کلید note_app_notes_v1 را بخوانید.
• اگر داده‌ای وجود دارد، آن را با JSON.parse تبدیل کنید.
• اگر خطایی رخ داد یا داده‌ای وجود نداشت، آرایه‌ای خالی ([]) برگردانید.

نکته: این مقداردهی فقط یک‌بار در هنگام اجرای اولیه انجام می‌شود.

باید با استفاده از useEffect کاری کنید که هر بار notes تغییر کند، مقدار جدید در localStorage ذخیره شود.

• کلید ذخیره باید همان مقدار STORAGE_KEY باشد.
• از JSON.stringify(notes) برای ذخیره داده‌ها استفاده کنید.

در این تابع، باید نوت جدید را به ابتدای آرایه اضافه کنید.

یعنی جدیدترین نوت‌ها در بالاترین قسمت لیست قرار بگیرند.

• نوتی که id آن برابر با id ورودی است را پیدا کنید.
• فیلدهای جدید (از patch) را با نوت قبلی ترکیب کنید.
• مقدار updatedAt را با زمان فعلی (new Date().toISOString()) به‌روزرسانی نمایید.
• سایر نوت‌ها، بدون تغییر باقی بمانند.

در این تابع باید نوتی که id آن برابر با مقدار ورودی است را از آرایه حذف کنید:

از useNotes استفاده کنید تا به notes و addNote دسترسی پیدا کنید.

1. این تابع با کلیک روی دکمه‌ی «نوت جدید» فراخوانی می‌شود.

2. داخل آن باید:

   • یک شناسه‌ی یکتا (id) برای نوت بسازید (مثلاً با Date.now().toString()).
   • یک نوت جدید با مقادیر پیش‌فرض بسازید. برای مثال:

3. نوت را با استفاده از addNote(newNote) به لیست اضافه کنید.

4. سپس با navigate(/note/${id}) کاربر را به صفحه‌ی همان نوت، هدایت کنید.

1. در صورتی که هیچ نوتی وجود نداشته باشد، باید چنین متنی نمایش داده شود:

نوتی وجود ندارد

2. در غیر این صورت، لیست نوت‌ها را با استفاده از کامپوننت NoteCard رندر کنید.

   • از id برای مقدار key استفاده کنید.
   • مقدار note را به کامپوننت NoteCard پاس بدهید.

• با استفاده از useParams باید آیدی نوت را از URL استخراج کنید.

دسترسی به داده‌های Context

با استفاده از useNotes از مقادیر زیر را استفاده کنید:

• notes: لیست تمام نوت‌ها
• updateNote: تابعی برای به‌روزرسانی نوت‌ها
• removeNote: تابعی برای حذف نوت‌ها

باید نوتی را پیدا کنید که شناسه‌اش با id برابر باشد.

اگر نوتی با آن شناسه وجود نداشت، پیام مناسب را نمایش دهید:

<div className="p-6">نوت مورد نظر پیدا نشد</div>

ورودی بالای صفحه برای ویرایش عنوان نوت استفاده می‌شود.

• مقدار این ورودی باید برابر با note.title باشد.
• با استفاده از تابع مناسب که از context دریافت می‌کنید، مقدار title را به‌روزرسانی کنید.

در بالای صفحه دو دکمه وجود دارد:

بازگشت: با کلیک روی آن باید کاربر به صفحه‌ی قبلی برگردد. حذف نوت: با کلیک روی آن باید نوت حذف شود و کاربر به صفحه‌ی اصلی ("/") هدایت شود

در پایین صفحه باید از کامپوننت NoteEditor برای ویرایش محتوای نوت استفاده کنید.

این useEffect مسئول قرار دادن محتوای نوت در ادیتور هنگام بارگذاری نوت یا تغییر نوت انتخاب‌شده است.

• نکته: اگر محتوایی وجود نداشت باید محتوای آن را "" قرار دهید.
• نکته: از editorRef.current.innerHTML برای قرار دادن محتوا استفاده کنید.
• نکته: بعد از مقداردهی، می‌توانید فوکوس را روی ادیتور بگذارید.

برای جلوگیری از ثبت لحظه‌ای تغییرات، بهتر است از تابع debounce استفاده کنید:

// TODO: تابعی برای ذخیره تغییرات ایجاد کنید
// نکته: برای بهینه‌تر شدن، می‌توانید از debounce استفاده کنید تا تغییرات سریع پشت سر هم ثبت نشوند
const save;

برای ثبت محتوا هنگام تایپ:

const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
  // محتوای جدید را دریافت کنید و با استفاده از updateNote ذخیره کنید
  // با استفاده از تابع آپدیت تغییرات نوت را آپدیت کنید
};

• نکته: مقدار جدید را می‌توان از e.currentTarget.innerHTML دریافت کرد.
• نکته: سپس با save(html) یا مستقیماً با updateNote ذخیره کنید.

برای جلوگیری از وارد شدن محتوای اضافی هنگام Paste:

const handlePaste = (e: React.ClipboardEvent<HTMLDivElement>) => {
  // از e.preventDefault برای جلوگیری از paste پیش‌فرض استفاده کنید
  // سپس متن ساده را در محل کرسر درج کنید
};

• نکته: متن را از e.clipboardData.getData("text/plain") بگیرید.
• نکته: با استفاده از Selection API، متن را در محل فعلی کرسر وارد کنید.

کامپوننت Toolbar بالای ادیتور برای فرمت‌دهی متن است:

<Toolbar editorRef={editorRef} savedRangeRef={savedRangeRef} />

1. editorRef: رفرنس ادیتور برای اعمال تغییرات.
2. savedRangeRef: محدوده انتخاب متن که توسط Toolbar برای اعمال فرمت استفاده می‌شود.

یک استیت برای مدیریت رنگ متن ایجاد کنید.

• مقدار زیر را به عنوان مقدار پیشفرض، قرار دهید:

#111827

1. این state برای ذخیره رنگ انتخابی توسط کاربر است.
2. هنگام تغییر رنگ، هم باید state به‌روزرسانی شود و هم دستور اعمال رنگ روی متن انتخاب‌شده اجرا شود.

در هنگام استفاده از Toolbar، ممکن است کاربر متنی را انتخاب کرده باشد و بخواهد روی همان متن تغییرات اعمال کند (مثل بولد، ایتالیک یا تغییر رنگ).

• مرورگر، هنگام کلیک روی دکمه‌ها ممکن است selection را از دست بدهد.

• بنابراین لازم است که قبل از اعمال هر دستور، محدوده انتخاب‌شده قبلی کاربر را دوباره فعال کنیم.

• این کار باعث می‌شود که تغییرات دقیقاً روی همان متن انتخاب‌شده اعمال شود و تجربه کاربری روان باقی بماند.

نکته: برای نگهداری و دسترسی به selection، از رفرنس‌های ادیتور و محدوده ذخیره‌شده استفاده می‌کنیم، اما پیاده‌سازی جزئیات را می‌توان به مرحله بعدی واگذار کرد.

رفرنس‌ها: editorRef و savedRangeRef

تابعی به نام exec بسازید که دستورهای مختلف (bold, italic, underline, color, align) را اعمال کند:

const exec = (command: string, value?: string) => {
  // ۱. ابتدا selection را بازیابی کنید
  restoreSelection();

  // ۲. اجرای دستور
  try {
    document.execCommand(command, false, value);
  } catch {
    // اگر مرورگر دستور را پشتیبانی نکرد، خطا را نادیده بگیرید
  }
};

1. مثال: exec("bold") → متن انتخاب‌شده را بولد می‌کند.

2. مثال: exec("foreColor", "#ff0000") → رنگ متن را تغییر می‌دهد.

3. مثال: exec("justifyCenter") → متن را وسط‌چین می‌کند.