Autocompletion for commit SHA

When I work on code review comments, I often refer to a commit where this particular issue was solved. This requires manually copy & pasting the commit sha and this really annoys me.

Wouldn’t it be cool, if you could trigger an autocomplete prompt for commit sha like you can do for GitHub users with the @-Sign?

[artusm]

@fregante

Help wanted to reverse engineer the existing @ or # autocompletion

An example of a custom autocompletion.

async function apiRequest(text) {
  const values = ["value", "value1", "value2", "test1", "value2"];

  return values.filter((value) =>
    value.toLowerCase().includes(text.toLowerCase())
  );
}

async function searchSHA(text) {
  const autocompleteValues = await apiRequest(text);

  const fragment = document.createElement("ul");
  fragment.setAttribute("role", "listbox");
  fragment.className =
    "suggester-container suggester suggestions list-style-none position-absolute";

  fragment.innerHTML = autocompleteValues
    .map(
      (
        value,
        i
      ) => `<li role="option" id="suggester-example-${i}" data-value="${value}">
    <span>${value}</span>
    <small>${value}</small>
  </li>`
    )
    .join("");

  return {
    matched: autocompleteValues.length > 0,
    fragment,
  };
}

const textExpander = document.querySelector("text-expander");
textExpander.setAttribute("keys", `${textExpander.getAttribute("keys")} !`);
textExpander.addEventListener("text-expander-change", (event) => {
  const { key, provide, text } = event.detail;
  if (key !== "!") return;

  provide(searchSHA(text));
});
textExpander.addEventListener("text-expander-value", (e) => {
  if ("!" !== e.detail.key) return;

  e.detail.value = `--__${e.detail.item.dataset.value}__--`;
});

[fregante]

That looks correct according to https://github.com/github/text-expander-element 🎉

I suppose your code is only missing the api.v4 call to get the commit list. Also it can use JSX to generate the fragment effortlessly