feat: add comparison check to word-editor (#191)

## Description
Currently, when creating or editing a word, every request is submitted
regardless of whether any content has actually changed.
This PR introduces a **content comparison check** so that submissions
only proceed when there are real changes.

- Added a `hasWordChanged` check in the `handleSubmit` function to
compare current editor values with their initial values.
- Display a short, user-friendly message when the user tries to submit
without making any changes.

## Related Issue
 Fixes #38 

## Screenshots/Screencasts
<img width="1588" height="784" alt="image"
src="https://github.com/user-attachments/assets/9240bfe5-adc7-45d1-b3b5-27c501164189"
/>

## Notes to Reviewer
- Added `initialContent` to the store.  
- Extended `useWordEditor` to expose these values along with their
corresponding setters.

---------

Co-authored-by: Olabode Lawal-Shittabey <babblebey@gmail.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: 3 people

src/components/islands/word-editor.jsx

@@ -104,13 +104,21 @@ function Editor({ eTitle, eContent, eMetadata, className, action, ...props }) {
   const router = useRouter();
   const isSubmitted = useStore($isWordSubmitted);
   const isSubmitLoading = useStore($isWordSubmitLoading);
-  const { title, setTitle, content, setContent } = useWordEditor();
+  const {
+    title,
+    setTitle,
+    content,
+    setContent,
+    initialContent,
+    setInitialContent,
+  } = useWordEditor();
 
   const isDone = isSubmitLoading || isSubmitted;
 
   useEffect(() => {
     setTitle(eTitle);
     setContent(eContent);
+    setInitialContent(eContent);
   }, []);
 
   /**
@@ -120,6 +128,14 @@ function Editor({ eTitle, eContent, eMetadata, className, action, ...props }) {
    * @todo handle error for when submission isn't successful
    */
   async function handleSubmit(e) {
+    const hasWordChanged = content !== initialContent;
+    if (!hasWordChanged) {
+      alert(
+        "No changes detected. Please update the content before submitting.",
+      );
+      return;
+    }
+
     $isWordSubmitLoading.set(true);
     const formData = new FormData(e.target);
     const response = await fetch("/api/dictionary", {

src/lib/hooks/use-word-editor.js

@@ -16,10 +16,16 @@ export default function useWordEditor() {
     $wordEditor.setKey("content", content);
   }
 
+  function setInitialContent(content) {
+    $wordEditor.setKey("inititalContent", content);
+  }
+
   return {
     title: word.title,
     content: word.content,
+    initialContent: word.inititalContent,
     setTitle,
     setContent,
+    setInitialContent,
   };
 }

src/lib/stores/dictionary.js

@@ -10,11 +10,13 @@ import { atom, map } from "nanostores";
  * @typedef {Object} Word
  * @property {string} title
  * @property {string} content
+ * @property {string} initialContent
  * @type {import('nanostores').MapStore<Record<string, Word>>}
  */
 export const $wordEditor = map({
   title: "",
   content: "",
+  initialContent: "",
 });
 
 export const $isWordSubmitLoading = atom(false);