Autocompletion for commit SHA #1547

@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}__--`;
});

Not too bad. Do we have to handle the list generation and API rate limiting ourselves? I thought that the UI would at least be handled by GitHub

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

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

Also it can use JSX to generate the fragment effortlessly

I know. It was just an example.

I suppose your code is only missing the api.v4 call to get the commit list

event listener (text-expander-change) added from Content Scripts - detail: null event listener (text-expander-change) added from console - detail: {...} It looks like we can't access to event.detail from Content Scripts (Only in Chrome).

Update: It works in Firefox

That's likely due to isolation. I thought events were somewhat safe from this…

We worked around this for resolve-conflict, even if it's not pretty.