Text wrapping

package.json

@@ -34,6 +34,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@iconify/svelte": "^3.1.4",
 		"@svelte-put/clickoutside": "^3.0.0",
 		"@sveltejs/adapter-static": "^2.0.3",
 		"brotli-compress": "^1.3.3",

pnpm-lock.yaml

@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@iconify/svelte':
+    specifier: ^3.1.4
+    version: 3.1.4(svelte@4.0.5)
   '@svelte-put/clickoutside':
     specifier: ^3.0.0
     version: 3.0.0
@@ -353,6 +356,19 @@ packages:
     resolution: {integrity: sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==}
     dev: true
 
+  /@iconify/svelte@3.1.4(svelte@4.0.5):
+    resolution: {integrity: sha512-YDwQlN46ka8KPRayDb7TivmkAPizfTXi6BSRNqa1IV0+byA907n8JcgQafA7FD//pW5XCuuAhVx6uRbKTo+CfA==}
+    peerDependencies:
+      svelte: '*'
+    dependencies:
+      '@iconify/types': 2.0.0
+      svelte: 4.0.5
+    dev: false
+
+  /@iconify/types@2.0.0:
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+    dev: false
+
   /@jridgewell/gen-mapping@0.3.3:
     resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
     engines: {node: '>=6.0.0'}

src/components/TopBar.svelte

@@ -4,6 +4,7 @@
   import type { Editor } from 'codemirror'
   import { shareUrl, selectedLang } from '../store'
   import ComboBox from './ComboBox.svelte'
+  import Icon from '@iconify/svelte'
 
   type Language = {
     text: string
@@ -11,22 +12,27 @@
     data: { mime: string; mode: string }
   }
 
-  export let editor: Editor
+  export let editor: Editor | null = null
   export let updateShareUrl: () => Promise<void>
 
   let languages: Language[] = []
   let selectedLanguage: Language | null = null
+  let textWrap = false
 
   let urlInput: HTMLInputElement
   let isUrlInputVisible = false
 
-  $: setDefaultLanguage(languages)
   $: {
+    if (editor) {
       const language = selectedLanguage?.data ?? { mime: null, mode: null }
       // @ts-ignore
       editor.setOption('mode', language.mime)
       CodeMirror.autoLoadMode(editor, language.mode)
       $selectedLang = selectedLanguage?.value ?? null
+
+      // Line wrapping
+      editor.setOption('lineWrapping', textWrap)
+    }
   }
 
   onMount(() => {
@@ -40,10 +46,10 @@
   export function setLanguage(lang: string) {
     const language = languages.find((e) => e.value === lang)!
     selectedLanguage = language
+    // Automatic text wrap for plain text or markdown
+    if (lang === 'plt' || lang === 'mrwn' || !lang) {
+      textWrap = true
     }
-
-  function setDefaultLanguage(languages: Language[]) {
-    setLanguage('plt')
   }
 
   async function showUrlInput() {
@@ -65,12 +71,12 @@
   }
 </script>
 
-<div class="flex justify-between items-center px-3 py-1 text-sm relative z-10 shadow-md">
+<div class="flex justify-between items-center px-3 py-1 text-sm relative z-10 shadow-md gap-2">
   <div class="flex items-center">
     <h1 class="text-xl">Paste</h1>
     <span class="ml-8 text-xs">
       <a
-        href="https://paste.scambier.xyz/?l=mrwn#GyoEIKwOeNPUFZF7U7HXITb4obStAtjoKQMj3+vxE5RxArxajeDypW31lbRvcFinvYg2ZOj/9oh1mJs4PPvn1HBFC0S9+6NjD0t8UrglyStxFWq6ZN89THwpUCilXIRxnVH4DXWQE1VNmFboMcqf2Mpg/jVt30y98lMGLyqVIObk8YAbJHCH4RYOQSMpTODPVckXpQD23jw9fK5PiZp5Kdm2SU3TA9zbZMdkj8GiWn5T0l7+0LWlb03f4wVl96yxi5ux/Hj7uMc1CmNWncG+LMFiYaa8Ur+U+pvCUJ8lCpr/fu0++7HeTIWhoftlV4FFEB18VVJditVtzCdJt6DUbIpIj4f7OZzLBMoaidM6aXyD+9uXvPEdlr9X1eSiOh9GQQhumtO/6j5N18CgcKYsYWUoNw0WiI4WcfioSEoAC40gfvyaHsHrLIZ2RgYygBAXJsNbVceKFX1D34pGAKtaaXrJptut0de3ZgfhDrJlUAbUkzaXuT77dQyIq2oy2RAlj29J4Ezq111vK01Ku64GX+FtWuvlYR4eS/nbXneQVwoWZvLNu6bwyDGSkt4FzW+iDMB7U1pbb0pFyM0XtkLh5UWvMquau/LB5GvpuLR25OxpVkeiCa++8svxUzzIgHiOJgA="
+        href="https://paste.scambier.xyz/?l=mrwn#G14EICwPbMc0BJ69xNPoItLoErDRMwMj3+vxE5RxArxajeByk+b0b1Tm2h/5ugGgK6S83AqUCi09HeYmDs+vvzQc0QDZe7v7U2rHnFe6CTWSm2AArNua4tqtXVIEFVQuqG+is15etOm1OZOPPCH4xDX1iDNF2bQcN9ugum0Icnwj51n0nlvNacn/N3OOctSGrQbLoNzG8n5bSoJQXOx+PsxV+MeUl+rkKNPIAXT9c8LoOY/772FiFkLv/5w8rvtCBc38VEE5lzmGFcZ0QtqlzBhvWLV5WPhRkROqeoKoDCtH03/fQVI5Y8HfLkq2/Nuidd1GQTKgmPJQVWbZ4cAiqUdOJG6j6pvu48qWjqamYG3nFPHcdYLHYCRV877U2mBgSHTbLWv6eu/DEA88SE5XEIqiQFyDVS2HLN7jJSloLHQJ+jOE86zb9jrkQ9tXAwkAoovCcnlrW5T/EU4L7imRsDAkZdEySO/ri/NBuHPMpSFnqGItLlPd98/SZSmySbImOLfv4WGbdCxw9TYykGsk56aQaVSa/DB2t5HfD6x28lJVlMm3Hjnkwyx95PxNGH0teCAk6CqtbBYlC3LjhY0IEpJ0WWZWY6MlJB+jEW7lAN3DSJD0QFz2FZOOV/HwA9LbFBU="
         target="_blank"
       >
         About</a
@@ -79,22 +85,8 @@
     </span>
   </div>
 
-  <div class="flex justify-end gap-2">
-    <div>
-      <ComboBox
-        items={languages}
-        bind:value={selectedLanguage}
-        class="bg-gray-700 border border-gray-300 p-1"
-      />
-    </div>
-    <div>
-      <button on:click={showUrlInput}> Generate Link </button>
-    </div>
-  </div>
-
   {#if isUrlInputVisible}
-    <div class="absolute w-full h-full bg-gray-700 top-0 left-0 p-2">
+    <div class="flex gap-2 grow">
-      <div class="flex gap-2">
       <input
         bind:this={urlInput}
         type="text"
@@ -104,6 +96,25 @@
       <button on:click={copyUrl}> Copy </button>
       <button on:click={closeUrlInput}> Close </button>
     </div>
+  {:else}
+    <div class="flex justify-end gap-2">
+      <div>
+        <ComboBox
+          items={languages}
+          bind:value={selectedLanguage}
+          class="bg-gray-700 border border-gray-300 p-1"
+        />
+      </div>
+      <button title="Toggle text wrap" on:click={() => (textWrap = !textWrap)}>
+        {#if textWrap}
+          <Icon class="text-xl" icon="fluent:text-wrap-24-filled" />
+        {:else}
+          <Icon class="text-xl" icon="fluent:text-wrap-off-24-filled" />
+        {/if}
+      </button>
+      <div>
+        <button on:click={showUrlInput}> Generate Link </button>
+      </div>
     </div>
   {/if}
 </div>

src/routes/+page.svelte

@@ -33,10 +33,14 @@
         editor.setValue(decompressed)
       }
     }
+
     const lang = new URLSearchParams(window.location.search).get('l')
     if (lang) {
       setLanguage(lang)
     }
+    else {
+      setLanguage('plt')
+    }
   })
 
   async function updateShareUrl() {
@@ -81,9 +85,7 @@
 </script>
 
 <div class="flex flex-col font-mono h-screen bg-gray-700">
-  {#if !!editor}
   <TopBar {editor} {updateShareUrl} bind:setLanguage />
-  {/if}
 
   <div id="editor" class="grow overflow-hidden" />