tsquare 0.11.0 → 0.12.0

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

@@ -0,0 +1,13 @@
+import type { LanguageData } from "./language-data.js";
+export interface EditorOptions {
+    /** The starting text. */
+    doc?: string;
+    /** Autocomplete for components, props, option words, icons and accents: pass languageData(). Without it, no autocomplete. */
+    data?: LanguageData;
+    /** Called with the whole text after every change. */
+    onChange?: (text: string) => void;
+    /** Line numbers in a gutter. Default true. */
+    lineNumbers?: boolean;
+    /** The editable area's accessible name. Default "Wireframe text". */
+    ariaLabel?: string;
+}

package/dist/playground/editor.d.ts

@@ -0,0 +1,18 @@
+import { EditorView } from "@codemirror/view";
+import type { EditorOptions } from "./editor-options.js";
+export interface Editor {
+    view: EditorView;
+    getText(): string;
+    /** Replace the whole document as one undoable step. */
+    setText(text: string): void;
+    setIssues(issues: {
+        line: number;
+        message: string;
+    }[]): void;
+    goToLine(line: number): void;
+    /** Scroll the cursor back into view (after the panels around the editor change size). */
+    revealCursor(): void;
+    /** Remove the editor and its listeners. */
+    destroy(): void;
+}
+export declare function createEditor(parent: HTMLElement, opts?: EditorOptions): Editor;

package/dist/playground/index.html

@@ -75,6 +75,28 @@
     --syn-punct: #9aa4b2;
     color-scheme: dark;
   }
+  /* the editor (tsquare/editor) reads these: the playground's own colors, light or dark */
+  :root {
+    --tsquare-editor-bg: var(--editor-bg);
+    --tsquare-editor-fg: var(--editor-ink);
+    --tsquare-editor-gutter: var(--muted);
+    --tsquare-editor-active-line: var(--editor-active);
+    --tsquare-editor-selection: var(--editor-selection);
+    --tsquare-editor-error: var(--error);
+    --tsquare-editor-popup-bg: var(--panel);
+    --tsquare-editor-popup-border: var(--line);
+    --tsquare-editor-popup-selected: var(--accent-soft);
+    --tsquare-editor-font: var(--mono);
+    --tsquare-editor-ui-font: var(--sans);
+    --tsquare-syntax-component: var(--syn-component);
+    --tsquare-syntax-string: var(--syn-string);
+    --tsquare-syntax-prop: var(--syn-prop);
+    --tsquare-syntax-number: var(--syn-number);
+    --tsquare-syntax-word: var(--syn-word);
+    --tsquare-syntax-color: var(--syn-color);
+    --tsquare-syntax-comment: var(--syn-comment);
+    --tsquare-syntax-punct: var(--syn-punct);
+  }
   * { box-sizing: border-box; }
   html, body { height: 100%; margin: 0; }
   body { background: var(--bg); color: var(--ink); font: 14px/1.45 var(--sans); display: flex; flex-direction: column; }