Code Snippets

A script to easily organize and use your code snippets. Creates a snippet from the contents of the clipboard.

Open code-snippets in Script Kit

import "@johnlindquist/kit";

// Menu: Code Snippets
// Description: Easily organize your code snippets
// Author: Altrim Beqiri
// Twitter: @altrimbeqiri

import "@johnlindquist/kit";

const wrapCode = (html: string) => `<pre class="px-4">
<style type="text/css">
  code {
    font-size: 0.75rem !important;
    width: 100%;
    white-space: pre-wrap;
  }
  pre {
    display: flex;
  }
  p {
    margin-bottom: 1rem;
  }
</style>
  <code>
${html.trim()}
  </code>
</pre>`;

const highlightCode = async ({ contents, language }): Promise<string> => {
  const { default: highlight } = await npm("highlight.js");
  let highlightedContents = language
    ? highlight.highlight(contents, { language }).value
    : highlight.highlightAuto(contents).value;

  return wrapCode(highlightedContents);
};

interface Snippet {
  id: string;
  name: string;
  description?: string;
  language?: string;
  html?: any;
  code?: any;
  preview?: any;
}

const { snippets, write }: { snippets: Snippet[]; write: any } = await db("code-snippets-db", {
  snippets: [],
});

const onNoChoices = async (input) => {
  if (input) {
    setPanel(
      md(`## Creating snippet <code>${input}</code>
    
Creates a new code snippet with the contents of the clipboard.`)
    );
  } else {
    setPlaceholder(`Enter a snippet name`);
  }
};

const onChoices = async () => {
  setPanel(``);
};

const loadSnippets = async () => {
  try {
    return snippets.map((snippet) => {
      snippet.preview = async () => {
        if (snippet?.code) {
          return await highlightCode({ contents: snippet?.code, language: snippet?.language });
        }

        return "";
      };

      return snippet;
    });
  } catch (error) {
    return [error.message];
  }
};

const config = {
  placeholder: "Set snippet name",
  strict: false,
  onChoices,
  onNoChoices,
  flags: {
    rename: {
      name: "Description",
      description: "Set a description for the selected script",
    },
    language: {
      name: "Language",
      description: "Set code language for the selected script",
    },
  },
};

const addSnippet = async () => {
  const snippet: Snippet | string = await arg(config, await loadSnippets());

  if (typeof snippet === "string") {
    const clipboard = await paste();

    snippets.push({
      id: uuid(),
      name: snippet,
      code: clipboard.trim(),
    });

    await write();
    await addSnippet();
  } else if (snippet?.id) {
    const foundSnippet = snippets.find((s) => s?.id === snippet.id);

    if (flag?.rename) {
      const description = await arg("Enter Description");
      foundSnippet.description = description;
      await write();
      await addSnippet();
    }

    if (flag?.language) {
      const language = await arg("Enter Code Language");
      foundSnippet.language = language;
      await write();
      await addSnippet();
    }

    await setSelectedText(foundSnippet.code);
  }
};

const removeSnippet = async () => {
  const snippet: Snippet = await arg("Remove snippet", snippets);
  const index = snippets.findIndex((s) => s?.id === snippet.id);
  if (index > -1) {
    snippets.splice(index, 1);
  }
  await write();
  await removeSnippet();
};

onTab("Snippets", addSnippet);
onTab("Remove", removeSnippet);