From d928702e897de30bf600d1257f5919210a54a150 Mon Sep 17 00:00:00 2001 From: Asad Date: Fri, 21 Feb 2025 15:29:23 -0500 Subject: [PATCH] bug: fixed syntax highlighting bug on large pasted text --- README.md | 2 +- public/app.js | 37 +++++++++++++++++++ public/index.html | 26 ++++++++----- .../prism/theme/prism-vsc-dark-plus.min.css | 2 +- 4 files changed, 56 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index aa3bed9..75475c6 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# [BinCode](jsbin.asadk.dev) - A Complete Self-Hostable JSFiddle Alternative +# [BinCode](https://bincode.asadk.dev) - A Complete Self-Hostable JSFiddle Alternative ## Overview BinCode is a minimalist platform for managing and sharing code snippets, built with Vue.js and SQLite. It runs entirely on your own infrastructure, giving you full control over your data and workflow. diff --git a/public/app.js b/public/app.js index 9739746..a24406e 100644 --- a/public/app.js +++ b/public/app.js @@ -153,6 +153,11 @@ createApp({ }, mounted() { + const textarea = document.querySelector('.editor-content textarea'); + if (textarea) { + textarea.addEventListener('paste', this.handlePaste); + } + this.loadPrismTheme(); this.initThemeListener(); @@ -172,8 +177,37 @@ createApp({ }; } }, + beforeUnmount() { + const textarea = document.querySelector('.editor-content textarea'); + if (textarea) { + textarea.removeEventListener('paste', this.handlePaste); + } + }, methods: { + handlePaste(event) { + const textarea = event.target; + + // scroll to cursor + requestAnimationFrame(() => { + this.scrollToCursor(textarea); + }); + }, + scrollToCursor(textarea) { + const cursorPosition = textarea.selectionStart; + + const lineHeight = parseInt(getComputedStyle(textarea).lineHeight, 10); + const lines = textarea.value.substr(0, cursorPosition).split('\n').length; + + const scrollTop = (lines - 1) * lineHeight; + + textarea.scrollTop = scrollTop; + + const pre = textarea.nextElementSibling; + if (pre) { + pre.scrollTop = scrollTop; + } + }, loadPrismTheme() { const existingTheme = document.querySelector("link[data-prism-theme]"); if (existingTheme) { @@ -214,6 +248,9 @@ createApp({ const textarea = event.target; const pre = textarea.nextElementSibling; if (pre) { + pre.style.width = `${textarea.offsetWidth}px`; + pre.style.height = `${textarea.offsetHeight}px`; + pre.scrollTop = textarea.scrollTop; pre.scrollLeft = textarea.scrollLeft; } diff --git a/public/index.html b/public/index.html index 428a4d5..941835f 100644 --- a/public/index.html +++ b/public/index.html @@ -13,6 +13,14 @@ + + + + + + + +
@@ -80,15 +88,15 @@
+ :value="currentCode" + @input="handleInput" + @scroll="handleScroll" + @keydown="handleKeydown" + :class="{ 'active-editor': true }" + spellcheck="false" + autocomplete="off" + :placeholder="'Enter your ' + activeTab.toUpperCase() + ' code here...'" + >