remove glitchy line wrapping code
Hunter
Wednesday, August 6th, 2025 at 8:09 PM
7 <link rel="icon" href="resources/rollerskate.png">
8 <link rel="manifest" href="manifest.json">
9 <script type="module">
- import {EditorView, keymap, placeholder, lineNumbers, Decoration} from "https://esm.sh/@codemirror/view@6"
- import {EditorState, Compartment, StateField, StateEffect} from "https://esm.sh/@codemirror/state@6"
10 + import {EditorView, keymap, placeholder, lineNumbers} from "https://esm.sh/@codemirror/view@6"
11 + import {EditorState, Compartment} from "https://esm.sh/@codemirror/state@6"
12 import {defaultKeymap, indentWithTab, undo, redo, undoDepth, redoDepth, history, historyKeymap} from "https://esm.sh/@codemirror/commands@6"
13 import {closeBrackets, closeBracketsKeymap} from "https://esm.sh/@codemirror/autocomplete@6"
14 import {html} from "https://esm.sh/@codemirror/lang-html@6"
16 import {indentUnit} from "https://esm.sh/@codemirror/language@6"
17 import {search, searchKeymap, closeSearchPanel, openSearchPanel} from "https://esm.sh/@codemirror/search@6"
18
- window.CodeMirror = {EditorView, EditorState, Compartment, keymap, defaultKeymap, indentWithTab, html, githubDark, indentUnit, placeholder, undo, redo, undoDepth, redoDepth, history, historyKeymap, closeBrackets, closeBracketsKeymap, search, searchKeymap, closeSearchPanel, openSearchPanel, lineNumbers, Decoration, StateField, StateEffect};
19 + window.CodeMirror = {EditorView, EditorState, Compartment, keymap, defaultKeymap, indentWithTab, html, githubDark, indentUnit, placeholder, undo, redo, undoDepth, redoDepth, history, historyKeymap, closeBrackets, closeBracketsKeymap, search, searchKeymap, closeSearchPanel, openSearchPanel, lineNumbers};
20 </script>
21 <style>
22 :root {
198 let isFullscreen = false;
199 let showLineNumbers = false;
200 let lineNumbersCompartment;
- let showLineWrapping = false;
- let lineWrappingCompartment;
201
202 function toggleFullscreen() {
203 const previewPane = document.querySelector('.preview-pane');
382 function loadEditorSettings() {
383 try {
384 showLineNumbers = localStorage.getItem('editor-line-numbers') === 'true';
- showLineWrapping = localStorage.getItem('editor-line-wrapping') === 'true';
385 } catch (e) {
386 console.warn('Could not load editor settings from localStorage:', e);
387 showLineNumbers = false;
- showLineWrapping = false;
388 }
389 }
390
406 });
407 }
408
- function createLineWrappingPlugin() {
- const {EditorView, Decoration, StateField, StateEffect} = window.CodeMirror;
-
- // Line wrapping functionality
- const CharacterWidthEffect = StateEffect.define({});
- const extra_cycle_character_width = StateField.define({
- create() {
- return null;
- },
- update(value, tr) {
- for (let effect of tr.effects) {
- if (effect.is(CharacterWidthEffect)) return effect.value;
- }
- return value;
- }
- });
-
- const character_width_listener = EditorView.updateListener.of((viewupdate) => {
- const width = viewupdate.view.defaultCharacterWidth;
- const current_width = viewupdate.view.state.field(extra_cycle_character_width, false);
-
- if (current_width !== width) {
- viewupdate.view.dispatch({
- effects: [CharacterWidthEffect.of(width)]
- });
- }
- });
-
- const ARBITRARY_INDENT_LINE_WRAP_LIMIT = 48;
- const line_wrapping_decorations = StateField.define({
- create() {
- return Decoration.none;
- },
- update(deco, tr) {
- const tabSize = tr.state.tabSize;
- const charWidth = tr.state.field(extra_cycle_character_width, false);
- if (charWidth == null) return Decoration.none;
-
- if (!tr.docChanged && deco !== Decoration.none) return deco;
-
- const decorations = [];
-
- for (let i = 0; i < tr.state.doc.lines; i++) {
- const line = tr.state.doc.line(i + 1);
- if (line.length === 0) continue;
-
- let indented_chars = 0;
- for (const ch of line.text) {
- if (ch === '\t') {
- indented_chars = indented_chars + tabSize;
- } else if (ch === ' ') {
- indented_chars = indented_chars + 1;
- } else {
- break;
- }
- }
-
- // Only apply decoration to lines that have indentation
- if (indented_chars > 0) {
- const offset = Math.min(indented_chars, ARBITRARY_INDENT_LINE_WRAP_LIMIT) * charWidth;
-
- const rules = document.createElement('span').style;
- rules.setProperty('--idented', `${offset}px`);
- rules.setProperty('text-indent', 'calc(-1 * var(--idented) - 1px)');
- rules.setProperty('padding-left', 'calc(var(--idented) + 6px)');
-
- const linerwapper = Decoration.line({
- attributes: { style: rules.cssText }
- });
-
- decorations.push(linerwapper.range(line.from, line.from));
- }
- }
- return Decoration.set(decorations, true);
- },
- provide: (f) => EditorView.decorations.from(f)
- });
-
- return [extra_cycle_character_width, character_width_listener, line_wrapping_decorations];
- }
-
- function toggleLineWrapping() {
- const {EditorView} = window.CodeMirror;
- showLineWrapping = !showLineWrapping;
- saveEditorSetting('editor-line-wrapping', showLineWrapping);
-
- const wrapExtensions = showLineWrapping ? [EditorView.lineWrapping, ...createLineWrappingPlugin()] : [];
- editorView.dispatch({
- effects: lineWrappingCompartment.reconfigure(wrapExtensions)
- });
- }
-
409
410 // File operations
411 window.saveFile = function() {
446 return;
447 }
448
- const {EditorView, EditorState, Compartment, keymap, defaultKeymap, indentWithTab, html, githubDark, indentUnit, placeholder, undo, redo, undoDepth, redoDepth, history, historyKeymap, closeBrackets, closeBracketsKeymap, search, searchKeymap, closeSearchPanel, openSearchPanel, lineNumbers, Decoration, StateField, StateEffect} = window.CodeMirror;
449 + const {EditorView, EditorState, Compartment, keymap, defaultKeymap, indentWithTab, html, githubDark, indentUnit, placeholder, undo, redo, undoDepth, redoDepth, history, historyKeymap, closeBrackets, closeBracketsKeymap, search, searchKeymap, closeSearchPanel, openSearchPanel, lineNumbers} = window.CodeMirror;
450
451 // Load saved content and editor settings
452 const savedContent = loadFromStorage();
454
455 // Create compartments for dynamic extensions
456 lineNumbersCompartment = new Compartment();
- lineWrappingCompartment = new Compartment();
457
458 // Create CodeMirror editor
459 editorView = new EditorView({
470 {key: "Mod-o", run: () => { window.loadFile(); return true; }},
471 {key: "Mod-s", run: () => { window.saveFile(); return true; }},
472 {key: "F1", run: () => { toggleLineNumbers(); return true; }},
- {key: "F2", run: () => { toggleLineWrapping(); return true; }},
473 indentWithTab,
474 ...searchKeymap.filter(binding => binding.key !== "Mod-f"),
475 ...defaultKeymap
492 'autocapitalize': 'off',
493 'spellcheck': 'false'
494 }),
- lineNumbersCompartment.of(showLineNumbers ? lineNumbers() : []),
- lineWrappingCompartment.of([])
495 + lineNumbersCompartment.of(showLineNumbers ? lineNumbers() : [])
496 ]
497 }),
498 parent: document.getElementById('editor')
509 handleViewportChange(); // Exit fullscreen mode if keyboard is open
510 });
511
- // Initialize line wrapping if it was enabled
- if (showLineWrapping) {
- const wrapExtensions = [EditorView.lineWrapping, ...createLineWrappingPlugin()];
- editorView.dispatch({
- effects: lineWrappingCompartment.reconfigure(wrapExtensions)
- });
- }
-
512 // Initial render
513 updatePreview();
514