tsquare 0.12.0 → 0.12.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.12.1
+
+The language and the renderer haven't changed: every wireframe renders exactly as in 0.12.0, and render URLs give the same images.
+
+- **`tsquare/editor` can wrap long lines:** `lineWrapping: true` wraps instead of scrolling sideways, with each wrapped line's continuation rows indented 4 spaces past its own indentation (2 would look like a child element). Off by default, so the playground is unchanged; `@tsquare-js/react` turns it on, because its editors are often narrow.
+
 ## 0.12.0
 
 The language and the renderer haven't changed: every wireframe renders exactly as in 0.11.0, and render URLs give the same images.

package/README.md

@@ -145,7 +145,7 @@ const editor = createEditor(document.getElementById("code")!, {
 });
 ```
 
-Give the element a height; the editor fills it. Options: `doc`, `data`, `onChange`, `lineNumbers` (default `true`) and `ariaLabel` (default "Wireframe text"). The editor has `getText()`, `setText(text)` (one undoable step), `setIssues(issues)`, `goToLine(n)`, `focus()`, `dom` and `destroy()`.
+Give the element a height; the editor fills it. Options: `doc`, `data`, `onChange`, `lineNumbers` (default `true`), `lineWrapping` (default `false`: wrap long lines instead of scrolling sideways, continuation rows indented 4 spaces past their line's indentation, so they don't look like a child element) and `ariaLabel` (default "Wireframe text"). The editor has `getText()`, `setText(text)` (one undoable step), `setIssues(issues)`, `goToLine(n)`, `focus()`, `dom` and `destroy()`.
 
 Its colors are CSS variables, light or dark by the page's `color-scheme`, defaulting to the playground's:
 

package/dist/editor.js

@@ -9434,9 +9434,9 @@ var LineGap = class {
     }
     return true;
   }
-  draw(viewState, wrapping) {
+  draw(viewState, wrapping2) {
     return Decoration.replace({
-      widget: new LineGapWidget(this.displaySize * (wrapping ? viewState.scaleY : viewState.scaleX), wrapping)
+      widget: new LineGapWidget(this.displaySize * (wrapping2 ? viewState.scaleY : viewState.scaleX), wrapping2)
     }).range(this.from, this.to);
   }
 };
@@ -9732,9 +9732,9 @@ var ViewState = class {
   // predictable. Relies on generous margins (see LG.Margin) to hide
   // the artifacts this might produce from the user.
   ensureLineGaps(current, mayMeasure) {
-    let wrapping = this.heightOracle.lineWrapping;
-    let margin = wrapping ? 1e4 : 2e3, halfMargin = margin >> 1, doubleMargin = margin << 1;
-    if (this.defaultTextDirection != Direction.LTR && !wrapping)
+    let wrapping2 = this.heightOracle.lineWrapping;
+    let margin = wrapping2 ? 1e4 : 2e3, halfMargin = margin >> 1, doubleMargin = margin << 1;
+    if (this.defaultTextDirection != Direction.LTR && !wrapping2)
       return [];
     let gaps = [];
     let addGap = (from, to, line, structure) => {
@@ -9752,13 +9752,13 @@ var ViewState = class {
       }
       let gap = find(current, (gap2) => gap2.from >= line.from && gap2.to <= line.to && Math.abs(gap2.from - from) < halfMargin && Math.abs(gap2.to - to) < halfMargin && !avoid.some((pos) => gap2.from < pos && gap2.to > pos));
       if (!gap) {
-        if (to < line.to && mayMeasure && wrapping && mayMeasure.visibleRanges.some((r) => r.from <= to && r.to >= to)) {
+        if (to < line.to && mayMeasure && wrapping2 && mayMeasure.visibleRanges.some((r) => r.from <= to && r.to >= to)) {
           let lineStart = mayMeasure.moveToLineBoundary(EditorSelection.cursor(to), false, true).head;
           if (lineStart > from)
             to = lineStart;
         }
         let size = this.gapSize(line, from, to, structure);
-        let displaySize = wrapping || size < 2e6 ? size : 2e6;
+        let displaySize = wrapping2 || size < 2e6 ? size : 2e6;
         gap = new LineGap(from, to, size, displaySize);
       }
       gaps.push(gap);
@@ -9771,7 +9771,7 @@ var ViewState = class {
         return;
       let target = this.scrollTarget ? this.scrollTarget.range.head : null;
       let viewFrom, viewTo;
-      if (wrapping) {
+      if (wrapping2) {
         let marginHeight = margin / this.heightOracle.lineLength * this.heightOracle.lineHeight;
         let top2, bot;
         if (target != null) {
@@ -22575,6 +22575,32 @@ var pasteFencedBlock = EditorView.domEventHandlers({
     return true;
   }
 });
+var CONTINUATION = 4;
+var hangingIndent = ViewPlugin.fromClass(
+  class {
+    decorations;
+    constructor(view) {
+      this.decorations = this.build(view);
+    }
+    update(u) {
+      if (u.docChanged || u.viewportChanged) this.decorations = this.build(u.view);
+    }
+    build(view) {
+      const builder = new RangeSetBuilder();
+      for (const { from, to } of view.visibleRanges) {
+        for (let pos = from; pos <= to; ) {
+          const line = view.state.doc.lineAt(pos);
+          const indent = line.text.match(/^ */)[0].length;
+          builder.add(line.from, line.from, Decoration.line({ attributes: { style: `padding-left: calc(6px + ${indent + CONTINUATION}ch); text-indent: -${indent + CONTINUATION}ch` } }));
+          pos = line.to + 1;
+        }
+      }
+      return builder.finish();
+    }
+  },
+  { decorations: (p) => p.decorations }
+);
+var wrapping = [EditorView.lineWrapping, hangingIndent];
 function createEditor(parent, opts = {}) {
   const extensions = [
     opts.lineNumbers === false ? [] : [lineNumbers(), highlightActiveLineGutter()],
@@ -22592,6 +22618,7 @@ function createEditor(parent, opts = {}) {
     keymap.of([{ key: "Enter", run: newlineKeepIndent }, ...closeBracketsKeymap, ...completionKeymap, ...searchKeymap, ...historyKeymap, indentWithTab, ...defaultKeymap]),
     theme2,
     pasteFencedBlock,
+    opts.lineWrapping ? wrapping : [],
     EditorView.contentAttributes.of({ "aria-label": opts.ariaLabel ?? "Wireframe text", spellcheck: "false", autocapitalize: "off" }),
     EditorView.updateListener.of((u) => {
       if (u.docChanged) opts.onChange?.(u.state.doc.toString());

package/dist/playground/editor-options.d.ts

@@ -8,6 +8,8 @@ export interface EditorOptions {
     onChange?: (text: string) => void;
     /** Line numbers in a gutter. Default true. */
     lineNumbers?: boolean;
+    /** Wrap long lines instead of scrolling sideways; continuation rows are indented under their line. Default false. */
+    lineWrapping?: boolean;
     /** The editable area's accessible name. Default "Wireframe text". */
     ariaLabel?: string;
 }