Sync with Server

src/components/EditContent/index.svelte

@@ -1,11 +1,12 @@
 <script>
-  import marked from "marked";
+  import marked from 'marked';
 
   let isWriteMode = true;
   export let writeLabel = 'Write';
   export let value;
   export let placeholder = ``;
-  const activeClassName = "border-b-2 border-blue-700";
+  export let onInputChange = () => {};
+  const activeClassName = 'border-b-2 border-blue-700';
 
   const handleTabClick = (tab) => () => {
     isWriteMode = tab === 1;
@@ -33,6 +34,7 @@
         bind:value
         {placeholder}
         class="border border-gray rounded-md p-2"
+        on:change={onInputChange}
       />
     {:else}
       <article class="preview prose prose-sm sm:prose p-2">
@@ -58,7 +60,16 @@
           d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"
         />
       </svg>
-      <span>Styling with Markdown is supported</span>
+      <p>
+        Styling with Markdown is supported.
+        <a
+          target="_blank"
+          class="text-blue-500 underline"
+          href="https://guides.github.com/features/mastering-markdown"
+        >
+          Learn more
+        </a>
+      </p>
     </div>
   </div>
 </div>