feat: new chord editor prototype

src/lib/chord-editor/action-plugin.ts

@@ -0,0 +1,103 @@
+import {
+  Decoration,
+  EditorView,
+  ViewPlugin,
+  ViewUpdate,
+  WidgetType,
+} from "@codemirror/view";
+import { mount, unmount } from "svelte";
+import Action from "$lib/components/Action.svelte";
+import { syntaxTree } from "@codemirror/language";
+import type { Range } from "@codemirror/state";
+
+export class ActionWidget extends WidgetType {
+  component: {};
+  element: HTMLElement;
+
+  constructor(readonly id: string | number) {
+    super();
+    this.id = id;
+    this.element = document.createElement("span");
+    this.element.style.paddingInline = "2px";
+
+    this.component = mount(Action, {
+      target: this.element,
+      props: { action: id, display: "keys" },
+    });
+  }
+
+  override eq(other: ActionWidget) {
+    return this.id == other.id;
+  }
+
+  toDOM() {
+    return this.element;
+  }
+
+  override ignoreEvent() {
+    return true;
+  }
+
+  override destroy() {
+    unmount(this.component);
+  }
+}
+
+function actionWidgets(view: EditorView) {
+  const widgets: Range<Decoration>[] = [];
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree(view.state).iterate({
+      from,
+      to,
+      enter: (node) => {
+        if (node.name !== "ExplicitAction") return;
+        const value =
+          node.node.getChild("ActionId") ??
+          node.node.getChild("HexNumber") ??
+          node.node.getChild("DecimalNumber");
+        if (!value) return;
+        if (!node.node.getChild("ExplicitDelimEnd")) {
+          return;
+        }
+
+        const id = view.state.doc.sliceString(value.from, value.to);
+        let deco = Decoration.replace({
+          widget: new ActionWidget(
+            value.name === "ActionId" ? id : parseInt(id),
+          ),
+        });
+        widgets.push(deco.range(node.from, node.to));
+      },
+    });
+  }
+  return Decoration.set(widgets);
+}
+
+export const actionPlugin = ViewPlugin.fromClass(
+  class {
+    decorations = Decoration.none;
+
+    constructor(view: EditorView) {
+      this.decorations = actionWidgets(view);
+    }
+
+    update(update: ViewUpdate) {
+      if (
+        update.docChanged ||
+        update.viewportChanged ||
+        syntaxTree(update.startState) != syntaxTree(update.state)
+      )
+        this.decorations = actionWidgets(update.view);
+    }
+  },
+  {
+    decorations(instance) {
+      return instance.decorations;
+    },
+    provide(plugin) {
+      return EditorView.atomicRanges.of(
+        (view) => view.plugin(plugin)?.decorations ?? Decoration.none,
+      );
+    },
+  },
+);

src/lib/chord-editor/action-serializer.ts

@@ -0,0 +1,16 @@
+import { KEYMAP_CODES, type KeyInfo } from "$lib/serial/keymap-codes";
+import { get } from "svelte/store";
+
+export function canUseIdAsString(info: KeyInfo): boolean {
+  return !!info.id && /^[a-zA-Z_][a-zA-Z0-9_]*$/.test(info.id);
+}
+
+export function actionToValue(action: number | KeyInfo) {
+  const info =
+    typeof action === "number" ? get(KEYMAP_CODES).get(action) : action;
+  if (info && info.id?.length === 1)
+    return /^[<>\\\s]$/.test(info.id) ? `\\${info.id}` : info.id;
+  if (!info || !canUseIdAsString(info))
+    return `<0x${(info?.code ?? action).toString(16).padStart(2, "0")}>`;
+  return `<${info.id}>`;
+}

src/lib/chord-editor/autocomplete.ts

@@ -0,0 +1,72 @@
+import { KEYMAP_CATEGORIES, KEYMAP_CODES } from "$lib/serial/keymap-codes";
+import type {
+  Completion,
+  CompletionSection,
+  CompletionSource,
+} from "@codemirror/autocomplete";
+import { derived, get } from "svelte/store";
+import { actionToValue, canUseIdAsString } from "./action-serializer";
+
+const completionSections = derived(
+  KEYMAP_CATEGORIES,
+  (categories) =>
+    new Map(
+      categories.map(
+        (category) =>
+          [
+            category,
+            {
+              name: category.name,
+            } satisfies CompletionSection,
+          ] as const,
+      ),
+    ),
+);
+
+export const actionAutocompleteItems = derived(
+  [KEYMAP_CODES, completionSections],
+  ([codes, sections]) =>
+    codes
+      .values()
+      .map((info) => {
+        const canUseId = canUseIdAsString(info);
+        const completionValue =
+          (canUseId && info.id) ||
+          `0x${info.code.toString(16).padStart(2, "0")}`;
+        return {
+          label:
+            [
+              canUseId || !info.id ? undefined : `"${info.id}"`,
+              info.title,
+              info.variant?.replace(/^[a-z]/g, (c) => c.toUpperCase()),
+            ]
+              .filter(Boolean)
+              .join(" ") || completionValue,
+          detail: actionToValue(info),
+          section: info.category ? sections.get(info.category) : undefined,
+          info: info.description,
+          type: "keyword",
+          apply: completionValue + ">",
+        } satisfies Completion;
+      })
+      .filter(
+        (item) => typeof item.label === "string" && item.apply !== undefined,
+      )
+      .toArray(),
+);
+
+export const actionAutocomplete = ((context) => {
+  let word = context.tokenBefore([
+    "ExplicitDelimStart",
+    "ActionId",
+    "HexNumber",
+    "DecimalNumber",
+  ]);
+  if (!word) return null;
+  console.log(get(actionAutocompleteItems));
+  return {
+    from: word.type.name === "ExplicitDelimStart" ? word.to : word.from,
+    validFor: /^<?[a-zA-Z0-9_]*$/,
+    options: get(actionAutocompleteItems),
+  };
+}) satisfies CompletionSource;

src/lib/chord-editor/changes-plugin.ts

@@ -0,0 +1,17 @@
+import {
+  EditorView,
+  ViewPlugin,
+  ViewUpdate,
+  type PluginValue,
+} from "@codemirror/view";
+
+export const changesPlugin = ViewPlugin.fromClass(
+  class implements PluginValue {
+    constructor(readonly view: EditorView) {}
+
+    update(update: ViewUpdate) {}
+  },
+  {
+    eventHandlers: {},
+  },
+);

src/lib/chord-editor/chord-delim-plugin.ts

@@ -0,0 +1,80 @@
+import {
+  Decoration,
+  EditorView,
+  ViewPlugin,
+  ViewUpdate,
+  WidgetType,
+} from "@codemirror/view";
+import { syntaxTree } from "@codemirror/language";
+import type { Range } from "@codemirror/state";
+
+export class DelimWidget extends WidgetType {
+  constructor() {
+    super();
+  }
+
+  override eq(other: DelimWidget) {
+    return true;
+  }
+
+  toDOM() {
+    const element = document.createElement("span");
+    element.innerHTML = " ⇛ ";
+    element.style.scale = "1.8";
+    element.style.opacity = "0.5";
+    return element;
+  }
+
+  override ignoreEvent() {
+    return false;
+  }
+
+  override destroy() {}
+}
+
+function actionWidgets(view: EditorView) {
+  const widgets: Range<Decoration>[] = [];
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree(view.state).iterate({
+      from,
+      to,
+      enter: (node) => {
+        if (node.name !== "PhraseDelim") return;
+        let deco = Decoration.replace({
+          widget: new DelimWidget(),
+        });
+        widgets.push(deco.range(node.from, node.to));
+      },
+    });
+  }
+  return Decoration.set(widgets);
+}
+
+export const delimPlugin = ViewPlugin.fromClass(
+  class {
+    decorations = Decoration.none;
+
+    constructor(view: EditorView) {
+      this.decorations = actionWidgets(view);
+    }
+
+    update(update: ViewUpdate) {
+      if (
+        update.docChanged ||
+        update.viewportChanged ||
+        syntaxTree(update.startState) != syntaxTree(update.state)
+      )
+        this.decorations = actionWidgets(update.view);
+    }
+  },
+  {
+    decorations(instance) {
+      return instance.decorations;
+    },
+    provide(plugin) {
+      return EditorView.atomicRanges.of(
+        (view) => view.plugin(plugin)?.decorations ?? Decoration.none,
+      );
+    },
+  },
+);

src/lib/chord-editor/chords-grammar-plugin.ts

@@ -0,0 +1,57 @@
+import { parser } from "./chords.grammar";
+import {
+  LRLanguage,
+  LanguageSupport,
+  HighlightStyle,
+} from "@codemirror/language";
+import { styleTags, tags } from "@lezer/highlight";
+import { actionAutocomplete } from "./autocomplete";
+
+export const chordHighlightStyle = HighlightStyle.define([
+  {
+    tag: tags.keyword,
+    paddingInline: "2px",
+    opacity: "0.5",
+  },
+  {
+    tag: tags.className,
+    backgroundColor:
+      "color-mix(in srgb, var(--md-sys-color-surface-variant) 50%, transparent)",
+    borderRadius: "4px",
+    paddingInline: "4px",
+    marginInline: "-4px",
+  },
+  {
+    tag: tags.integer,
+    color: "var(--md-sys-color-tertiary)",
+  },
+  {
+    tag: tags.angleBracket,
+    opacity: "0.5",
+  },
+  { tag: tags.modifier, opacity: "0.25" },
+  { tag: tags.escape, color: "var(--md-sys-color-primary)" },
+  { tag: tags.strong, fontWeight: "bold" },
+]);
+
+export const chordLanguage = LRLanguage.define({
+  name: "chords",
+  parser: parser.configure({
+    props: [
+      styleTags({
+        "PhraseDelim CompoundDelim": [tags.keyword, tags.strong],
+        "HexNumber DecimalNumber": [tags.className, tags.integer],
+        "ExplicitDelimStart ExplicitDelimEnd": tags.angleBracket,
+        ActionId: tags.className,
+        EscapedLetter: tags.escape,
+        Escape: [tags.escape, tags.modifier],
+      }),
+    ],
+  }),
+});
+
+export function chordLanguageSupport() {
+  return new LanguageSupport(chordLanguage, [
+    chordLanguage.data.of({ autocomplete: actionAutocomplete }),
+  ]);
+}

src/lib/chord-editor/chords.grammar

@@ -0,0 +1,27 @@
+@top Program { Chord* }
+
+ExplicitAction { ExplicitDelimStart (HexNumber | DecimalNumber | ActionId) ExplicitDelimEnd }
+EscapedSingleAction { Escape EscapedLetter }
+Action { SingleLetter | ExplicitAction | EscapedSingleAction }
+ActionString { Action* }
+ChordInput { (ActionString CompoundDelim)* ActionString }
+ChordPhrase { ActionString }
+Chord { ChordInput PhraseDelim ChordPhrase ChordDelim }
+
+@tokens {
+  @precedence {HexNumber, DecimalNumber}
+  @precedence {CompoundDelim, PhraseDelim, ExplicitDelimStart, ChordDelim, SingleLetter}
+  @precedence {EscapedLetter}
+  ExplicitDelimStart {"<"}
+  ExplicitDelimEnd {">"}
+  CompoundDelim {"+>"}
+  PhraseDelim {"=>"}
+  Escape { "\\" }
+  HexNumber { "0x" $[a-fA-F0-9]+ }
+  DecimalNumber { $[0-9]+ }
+  ActionId { $[a-zA-Z_]$[a-zA-Z0-9_]* }
+  SingleLetter { ![\\] }
+  EscapedLetter { ![] }
+  ChordDelim { ($[\n] | @eof) }
+}
+

src/lib/chord-editor/grammar.d.ts

@@ -0,0 +1,3 @@
+declare module "*.grammar" {
+  export const parser: import("@lezer/lr").LRParser;
+}

src/lib/chord-editor/test.txt

@@ -0,0 +1,16 @@
+.=<LEFT_SHIFT> => =>
+;ims => <0x219><IMPULSE>
+-;<KSC_2C><LEFT_SHIFT> => <0x23e>_<0x23e>
+.;g => <0x23e>...<0x23e><LH_THUMB_3_3D>
+'dg => <0x23e>'<0x23e>
+'gl => <0x23e>'ll<0x23e>
+'ar => <0x23e>'re<0x23e>
+'gs => <0x23e>'s<0x23e>
+'ev => <0x23e>'ve<0x23e>
+<SPACE>-; => <0x23e><0x223>-<0x223><KSC_00>
+<SPACE>;<LEFT_SHIFT> => <0x23e><0x223><0x23d><0x223><KSC_00>
+<SPACE>;g => <0x23e><0x223><SPACE><0x223><KSC_00>
+deg => <0x23e>ed<0x23e>
+;gr => <0x23e>er<0x23e>
+;es => <0x23e>es<0x23e>
+;est => <0x23e>est<0x23e>