From 23eeb8200d207c7def0fed372f1595266da703c3 Mon Sep 17 00:00:00 2001 From: Simon Cambier Date: Wed, 22 Nov 2023 22:00:55 +0100 Subject: [PATCH] Text wrapping --- package.json | 1 + pnpm-lock.yaml | 16 +++++++ src/components/TopBar.svelte | 81 ++++++++++++++++++++---------------- src/routes/+page.svelte | 8 ++-- 4 files changed, 68 insertions(+), 38 deletions(-) diff --git a/package.json b/package.json index 7d3849e..3609f40 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d8be9a4..e088ad7 100644 --- a/pnpm-lock.yaml +++ b/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'} diff --git a/src/components/TopBar.svelte b/src/components/TopBar.svelte index 5bc2ed0..f2db7a0 100644 --- a/src/components/TopBar.svelte +++ b/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 let languages: Language[] = [] let selectedLanguage: Language | null = null + let textWrap = false let urlInput: HTMLInputElement let isUrlInputVisible = false - $: setDefaultLanguage(languages) $: { - const language = selectedLanguage?.data ?? { mime: null, mode: null } - // @ts-ignore - editor.setOption('mode', language.mime) - CodeMirror.autoLoadMode(editor, language.mode) - $selectedLang = selectedLanguage?.value ?? null + 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 - } - - function setDefaultLanguage(languages: Language[]) { - setLanguage('plt') + // Automatic text wrap for plain text or markdown + if (lang === 'plt' || lang === 'mrwn' || !lang) { + textWrap = true + } } async function showUrlInput() { @@ -65,12 +71,12 @@ } -
+

Paste

About
-
-
- -
-
- -
-
- {#if isUrlInputVisible} -
-
- + + + +
+ {:else} +
+
+ - - +
+ +
+
{/if} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 13e13bf..9e0e5a5 100644 --- a/src/routes/+page.svelte +++ b/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 @@
- {#if !!editor} - - {/if} +