ttrpg-tools/src/components/CommandLinkManager.tsx

/**
 * CommandLinkManager — mounts as a child of <Article> and intercepts
 * clicks on :cmd[] directive spans to dispatch them via the shared
 * command dispatcher. Errors are surfaced through the shared
 * dispatchError signal, shown by JournalInput above the textarea.
 */

import { Component, onCleanup } from "solid-js";
import { useArticleDom } from "./Article";
import { useJournalStream } from "./stores/journalStream";
import { useJournalCompletions } from "./journal/completions";
import { dispatchCommand, setDispatchError } from "./journal/command-dispatcher";

export const CommandLinkManager: Component = () => {
  const contentDom = useArticleDom();
  const stream = useJournalStream();
  const comp = useJournalCompletions();

  const onClick = (e: MouseEvent) => {
    const cmdSpan = (e.target as HTMLElement).closest("[data-cmd]");
    if (!cmdSpan) return;

    const command = cmdSpan.getAttribute("data-cmd");
    if (!command) return;

    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();

    dispatchCommand({
      role: stream.myRole as "gm" | "player" | "observer",
      myName: stream.myName,
      command,
      sparkTables: comp.data.sparkTables,
      variables: stream.variables,
      declarations: comp.data.declarations,
      tagModifiers: comp.data.tagModifiers,
    }).then((result) => {
      if (!result.ok) {
        setDispatchError(result.error);
      }
    });
  };

  const dom = contentDom();
  if (dom) {
    dom.addEventListener("click", onClick, true);
  }

  onCleanup(() => {
    const d = contentDom();
    if (d) d.removeEventListener("click", onClick, true);
  });

  return null;
};

export default CommandLinkManager;