Allow youtube link

src/components/MarkdownEditor/index.svelte

@@ -1,7 +1,7 @@
 <script>
   export let value;
   export let placeholder = ``;
-  const activeClassName = "border-b-2 border-blue-700";
+  const activeClassName = 'border-b-2 border-blue-700';
   let isWriteMode = true;
 
   const handleTabClick = (tab) => (event) => {
@@ -9,6 +9,37 @@
   };
 </script>
 
+<div class="root">
+  <div class="flex justify-center">
+    <button
+      on:click={handleTabClick(1)}
+      class="focus:outline-none p-2 {isWriteMode && `${activeClassName}`}"
+    >
+      Write
+    </button>
+    <button
+      on:click={handleTabClick(2)}
+      class="focus:outline-none p-2 {!isWriteMode && `${activeClassName}`}"
+    >
+      Preview
+    </button>
+  </div>
+
+  <div class="m-2 mb-0 p-0">
+    {#if isWriteMode}
+      <textarea
+        bind:value
+        {placeholder}
+        class="border border-gray rounded-md p-2"
+      />
+    {:else}
+      <article class="m-auto preview prose prose-sm sm:prose p-2">
+        <slot name="preview" />
+      </article>
+    {/if}
+  </div>
+</div>
+
 <style>
   .root {
     width: 100%;
@@ -30,31 +61,3 @@
     fill: currentColor;
   }
 </style>
-
-<div class="root">
-  <div class="flex justify-center">
-    <button
-      on:click={handleTabClick(1)}
-      class="focus:outline-none p-2 {isWriteMode && `${activeClassName}`}">
-      Write
-    </button>
-    <button
-      on:click={handleTabClick(2)}
-      class="focus:outline-none p-2 {!isWriteMode && `${activeClassName}`}">
-      Preview
-    </button>
-  </div>
-
-  <div class="m-2 mb-0 p-0">
-    {#if isWriteMode}
-      <textarea
-        bind:value
-        {placeholder}
-        class="border border-gray rounded-md p-2" />
-    {:else}
-      <article class="preview prose prose-sm sm:prose p-2">
-        <slot name="preview" />
-      </article>
-    {/if}
-  </div>
-</div>