@deckbuilderkit/editor 0.0.0-stage → 0.1.1

package/src/theme.ts

@@ -0,0 +1,86 @@
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { EditorView } from '@codemirror/view';
+import { tags } from '@lezer/highlight';
+
+// Only the CSS tokens from @deckbuilderkit/ui's styles.css, so every palette (and a palette switch
+// while the editor is open) works with no per-palette code.
+
+export const editorTheme = EditorView.theme({
+  // Fills its host when the host has a height, else grows with the content.
+  '&': { height: '100%', backgroundColor: 'var(--bg-sunken)', color: 'var(--text)', fontSize: 'var(--editor-font-size, 12.5px)' },
+  '&.cm-focused': { outline: 'none' },
+  '.cm-scroller': { overflow: 'auto', fontFamily: 'var(--font-mono)', lineHeight: 'var(--editor-line-height, 1.55)' },
+  '.cm-content': { caretColor: 'var(--accent)', fontVariantLigatures: 'var(--editor-ligatures, normal)' },
+  '.cm-cursor, .cm-dropCursor': { borderLeftColor: 'var(--accent)' },
+  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection':
+    { backgroundColor: 'color-mix(in srgb, var(--accent) 35%, transparent)' },
+  '.cm-gutters': { backgroundColor: 'var(--bg-elev)', color: 'var(--text-3)', borderRight: '1px solid var(--border-soft)' },
+  // Translucent: the selection layer is drawn behind the lines, so an opaque one would hide it.
+  '.cm-activeLine': { backgroundColor: 'color-mix(in srgb, var(--hover) 60%, transparent)' },
+  '.cm-activeLineGutter': { backgroundColor: 'var(--hover)', color: 'var(--text-2)' },
+  '.cm-searchMatch': { backgroundColor: 'var(--mark)' },
+  '.cm-searchMatch.cm-searchMatch-selected': { backgroundColor: 'var(--mark)', outline: '1px solid var(--warn)' },
+  '.cm-selectionMatch': { backgroundColor: 'var(--accent-soft)', outline: '1px solid color-mix(in srgb, var(--accent) 50%, transparent)' },
+  '&.cm-focused .cm-matchingBracket': { backgroundColor: 'var(--accent-soft)', outline: '1px solid var(--accent)' },
+  '&.cm-focused .cm-nonmatchingBracket': { backgroundColor: 'var(--err-soft)' },
+  '.cm-placeholder': { color: 'var(--text-3)' },
+  '.cm-panels': { backgroundColor: 'var(--bg-elev)', color: 'var(--text)' },
+  '.cm-panels.cm-panels-top': { borderBottom: '1px solid var(--border)' },
+  '.cm-panels.cm-panels-bottom': { borderTop: '1px solid var(--border)' },
+  '.cm-panel input, .cm-panel button': { fontSize: '12px' },
+  '.cm-panel.cm-search input, .cm-panel.cm-search button': { fontFamily: 'inherit' },
+  '.cm-panel.cm-search input.cm-textfield': {
+    backgroundColor: 'var(--bg-sunken)', color: 'var(--text)', border: '1px solid var(--border)', borderRadius: '4px',
+  },
+  '.cm-panel.cm-search input.cm-textfield:focus': { outline: 'none', borderColor: 'var(--accent)' },
+  '.cm-panel.cm-search button.cm-button': {
+    backgroundImage: 'none', backgroundColor: 'var(--panel-2)', color: 'var(--text)', border: '1px solid var(--border)', borderRadius: '4px',
+  },
+  '.cm-panel.cm-search button.cm-button:hover': { backgroundColor: 'var(--hover)' },
+  '.cm-panel.cm-search button.cm-button:active': { backgroundImage: 'none', backgroundColor: 'var(--selected)' },
+  '.cm-panel.cm-search label': { color: 'var(--text-2)' },
+  '.cm-panel.cm-search input[type=checkbox]': { accentColor: 'var(--accent)' },
+  '.cm-panel.cm-search button[name=close]': { backgroundColor: 'transparent', border: 'none', color: 'var(--text-2)' },
+  '.cm-tooltip': { backgroundColor: 'var(--panel-2)', color: 'var(--text)', border: '1px solid var(--border)' },
+  '.cm-tooltip-autocomplete > ul > li[aria-selected]': { backgroundColor: 'var(--selected)', color: 'var(--text)' },
+  '.cm-completionDetail': { color: 'var(--text-3)' },
+  '.cm-completionMatchedText': { color: 'var(--accent)', textDecoration: 'none' },
+  // Lint: theme colours instead of @codemirror/lint's fixed SVG squiggles and icons.
+  '.cm-lintRange': { backgroundImage: 'none', textDecorationLine: 'underline', textDecorationStyle: 'wavy', textDecorationSkipInk: 'none', textUnderlineOffset: '3px' },
+  '.cm-lintRange-error': { textDecorationColor: 'var(--err)' },
+  '.cm-lintRange-warning': { textDecorationColor: 'var(--warn)' },
+  '.cm-lintRange-info, .cm-lintRange-hint': { textDecorationColor: 'var(--info)' },
+  '.cm-lintRange-active': { backgroundColor: 'var(--mark)' },
+  '.cm-lintPoint:after': { borderBottomColor: 'var(--warn)' },
+  '.cm-lintPoint-error:after': { borderBottomColor: 'var(--err)' },
+  '.cm-lintPoint-info:after': { borderBottomColor: 'var(--info)' },
+  '.cm-tooltip-lint': { padding: '0' },
+  '.cm-diagnostic': { padding: '4px 8px', marginLeft: '0', borderLeft: '3px solid var(--border)', color: 'var(--text)', fontFamily: 'var(--font-sans, inherit)', fontSize: '12px' },
+  '.cm-diagnostic-error': { borderLeftColor: 'var(--err)' },
+  '.cm-diagnostic-warning': { borderLeftColor: 'var(--warn)' },
+  '.cm-diagnostic-info, .cm-diagnostic-hint': { borderLeftColor: 'var(--info)' },
+  '.cm-diagnosticSource': { color: 'var(--text-3)', opacity: '1' },
+  '.cm-gutter-lint': { width: '12px' },
+  '.cm-gutter-lint .cm-gutterElement': { padding: '0', display: 'flex', alignItems: 'center', justifyContent: 'center' },
+  '.cm-lint-marker': { content: 'normal', width: '7px', height: '7px', borderRadius: '50%', backgroundColor: 'var(--info)' },
+  '.cm-lint-marker-error': { content: 'normal', backgroundColor: 'var(--err)' },
+  '.cm-lint-marker-warning': { content: 'normal', backgroundColor: 'var(--warn)' },
+  '.cm-lint-marker-info': { content: 'normal', backgroundColor: 'var(--info)' },
+  '.cm-panel.cm-panel-lint ul [aria-selected]': { backgroundColor: 'var(--selected)', backgroundImage: 'none' },
+});
+
+export const highlightStyle = HighlightStyle.define([
+  { tag: [tags.keyword, tags.operatorKeyword, tags.modifier, tags.controlKeyword], color: 'var(--y-key)' },
+  { tag: [tags.propertyName, tags.attributeName, tags.heading], color: 'var(--y-key)' },
+  { tag: [tags.string, tags.special(tags.string), tags.regexp, tags.link, tags.url], color: 'var(--y-str)' },
+  { tag: [tags.number, tags.integer, tags.float], color: 'var(--y-num)' },
+  { tag: [tags.bool, tags.atom, tags.null, tags.constant(tags.name)], color: 'var(--y-bool)' },
+  { tag: [tags.comment, tags.lineComment, tags.blockComment], color: 'var(--y-comment)', fontStyle: 'italic' },
+  { tag: tags.invalid, color: 'var(--err)' },
+  { tag: tags.strong, fontWeight: '600' },
+  { tag: tags.emphasis, fontStyle: 'italic' },
+  { tag: tags.heading, fontWeight: '600' },
+]);
+
+/** Theme + syntax colours, for every EditorView in this package. */
+export const themeExtension = [editorTheme, syntaxHighlighting(highlightStyle)];

package/src/toc.ts

@@ -0,0 +1,11 @@
+/** Index of the section being read: the last heading whose top (relative to the container's top) is at or above `offset`; the last heading when scrolled to the bottom, 0 before the first one. */
+export function activeHeading(tops: readonly number[], offset: number, atBottom: boolean): number {
+  if (tops.length === 0) return -1;
+  if (atBottom) return tops.length - 1;
+  let active = 0;
+  for (let i = 0; i < tops.length; i++) {
+    if (tops[i]! <= offset) active = i;
+    else break;
+  }
+  return active;
+}

package/src/variables.ts

@@ -0,0 +1,123 @@
+import { REST_BUILTIN_VARIABLES, type RestEnvVar, restVarRefs } from '@deckbuilderkit/server-core/protocol';
+import type { Completion, CompletionContext, CompletionResult, CompletionSource } from '@codemirror/autocomplete';
+import { EditorState, type Extension } from '@codemirror/state';
+import { Decoration, type DecorationSet, type EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+import { t } from '@deckbuilderkit/ui/i18n';
+
+export interface VariableInfo {
+  defined: boolean;
+  /** Hover text: the value of a plain variable, a label for secret, built-in or undefined ones. */
+  title: string;
+}
+
+/** Whether `name` resolves against `vars` (enabled ones; a secret one only when set) or the built-ins. */
+export function variableInfo(name: string, vars: readonly RestEnvVar[]): VariableInfo {
+  if ((REST_BUILTIN_VARIABLES as readonly string[]).includes(name)) return { defined: true, title: t('http.varBuiltin', { name }) };
+  const v = vars.find((x) => x.enabled && x.name === name && (!x.secret || x.set));
+  if (!v) return { defined: false, title: t('http.varUndefined', { name }) };
+  return { defined: true, title: v.secret ? t('http.varSecret', { name }) : `${name} = ${v.value}` };
+}
+
+export const variableClass = (defined: boolean) => `req-var ${defined ? 'req-var-ok' : 'req-var-bad'}`;
+
+function decorate(view: EditorView, vars: readonly RestEnvVar[]): DecorationSet {
+  const marks = restVarRefs(view.state.doc.toString()).map(({ name, from, to }) => {
+    const info = variableInfo(name, vars);
+    return Decoration.mark({ class: variableClass(info.defined), attributes: { title: info.title } }).range(from, to);
+  });
+  return Decoration.set(marks);
+}
+
+/** Marks `{{name}}` green when defined, red when not; the title shows the value (never a secret one). */
+export function variableHighlight(vars: readonly RestEnvVar[]): Extension {
+  return ViewPlugin.fromClass(class {
+    decorations: DecorationSet;
+    constructor(view: EditorView) {
+      this.decorations = decorate(view, vars);
+    }
+    update(u: ViewUpdate) {
+      if (u.docChanged) this.decorations = decorate(u.view, vars);
+    }
+  }, { decorations: (p) => p.decorations });
+}
+
+/** A variable `{{` can complete to: its name and what the list shows beside it. */
+export interface VariableOption {
+  name: string;
+  /** The value, or a label for a secret or built-in one. */
+  detail: string;
+}
+
+/** The names `{{` offers: enabled variables (a secret one only when set), then the built-ins. */
+export function variableOptions(vars: readonly RestEnvVar[]): VariableOption[] {
+  const out: VariableOption[] = [];
+  const seen = new Set<string>();
+  for (const v of vars) {
+    if (!v.enabled || (v.secret && !v.set) || seen.has(v.name)) continue;
+    seen.add(v.name);
+    out.push({ name: v.name, detail: v.secret ? t('http.varTagSecret') : v.value });
+  }
+  for (const name of REST_BUILTIN_VARIABLES) out.push({ name, detail: t('http.varTagBuiltin') });
+  return out;
+}
+
+/** The options whose name contains `partial` (ignoring case), those starting with it first. */
+export function filterVariableOptions(options: readonly VariableOption[], partial: string): VariableOption[] {
+  const p = partial.toLowerCase();
+  const hits = options.filter((o) => o.name.toLowerCase().includes(p));
+  return [...hits.filter((o) => o.name.toLowerCase().startsWith(p)), ...hits.filter((o) => !o.name.toLowerCase().startsWith(p))];
+}
+
+/** An unfinished `{{name` ending at the caret: where the `{{` starts and the name typed so far. */
+export interface VariableQuery {
+  from: number;
+  partial: string;
+}
+
+const OPEN_REF = /\{\{\s*(\$?[\w.-]*)$/;
+
+/** The `{{partial` right before `caret` in `text`, or null. */
+export function variableQueryAt(text: string, caret: number): VariableQuery | null {
+  const m = OPEN_REF.exec(text.slice(0, caret));
+  return m ? { from: m.index, partial: m[1]! } : null;
+}
+
+/** `text` with the `{{partial` before `caret` (and the rest of the name and a `}}` after it) replaced by `{{name}}`; the caret goes after it. */
+export function insertVariable(text: string, caret: number, name: string): { text: string; caret: number } {
+  const q = variableQueryAt(text, caret);
+  const from = q ? q.from : caret;
+  const tail = /^[\w.-]*(\s*\}\})?/.exec(text.slice(caret))![0];
+  const ref = `{{${name}}}`;
+  return { text: text.slice(0, from) + ref + text.slice(caret + tail.length), caret: from + ref.length };
+}
+
+/** What completing `name` inserts when `after` follows the completed range: `name}}`, or only `name` when `}}` is already there. */
+export function variableCompletionText(name: string, after: string): string {
+  return /^\s*\}\}/.test(after) ? name : `${name}}}`;
+}
+
+/** Completes `{{name` in a CodeMirror editor with the variables and built-ins. */
+export function variableCompletion(vars: readonly RestEnvVar[]): CompletionSource {
+  const options: Completion[] = variableOptions(vars).map(({ name, detail }) => ({
+    label: name,
+    detail,
+    type: 'variable',
+    apply: (view, _c, from, to) => {
+      const after = view.state.sliceDoc(to, to + 40);
+      const insert = variableCompletionText(name, after);
+      const skip = insert === name ? (/^\s*\}\}/.exec(after)![0].length) : 0;
+      view.dispatch({ changes: { from, to, insert }, selection: { anchor: from + insert.length + skip }, userEvent: 'input.complete' });
+    },
+  }));
+  return (ctx: CompletionContext): CompletionResult | null => {
+    const m = ctx.matchBefore(/\{\{\s*\$?[\w.-]*$/);
+    if (!m) return null;
+    const q = variableQueryAt(m.text, m.text.length)!;
+    return { from: m.to - q.partial.length, options, validFor: /^\$?[\w.-]*$/ };
+  };
+}
+
+/** `variableCompletion` as language data, so it adds to the language's own completions. */
+export function variableAutocomplete(vars: readonly RestEnvVar[]): Extension {
+  return EditorState.languageData.of(() => [{ autocomplete: variableCompletion(vars) }]);
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.