Chunkify text into discord friendly chunks with an intuitive UI!

Open chunkify-text in Script Kit

import "@johnlindquist/kit";

/**
 * Chunkify a text into chunks of a given size.
 * @param {string} text
 * @param {number} chunkSize
 */
function chunkify(text, chunkSize) {
  const chunks = [];

  let index = 0;
  while (index < text.length) {
    let end = index + chunkSize;

    while (end > index && text[end] !== "\n") {
      end--;
    }

    if (end === index) {
      end = index + chunkSize;
    }

    const chunk = text.substring(index, end);
    chunks.push(chunk);
    index = end;
  }

  return chunks;
}

const rawText = await editor(
  "Paste the text to chunkify here (You can delete this placeholder)."
);

let textWidget = await widget(
  `<header class="grid grid-flow-col px-4 py-2">
    <button id="previous-button" class="items-center rounded-md bg-black p-4 text-white transition-colors hover:bg-white hover:text-black hover:outline">Previous</button>
    <div>
      <h1 class="text-center text-4xl">Chunkifier</h1>
      <h2 class="text-center text-gray-500">Chunk {{chunkIndex}} of {{totalChunks}}</h2>
    </div>
    <button id="close-button" class="items-center rounded-md bg-black p-4 text-white transition-colors hover:bg-white hover:text-black hover:outline">Close</button>
  </header>
  <section class="max-w-prose flex-1 overflow-auto break-words p-6">{{chunk}}</section>
  <button id="copy-button" class="flex mx-6 my-4 items-center justify-center rounded-md bg-black px-6 py-4 text-4xl text-white transition-colors hover:bg-white hover:text-black hover:outline hover:outline-black">{{copyBtnText}}</button>`,
  {
    closable: true,
    useContentSize: true,
    draggable: true,
    containerClass:
      "flex h-screen flex-col overflow-hidden bg-white text-black",
    alwaysOnTop: true,
    minHeight: 600,
  }
);

const chunks = chunkify(rawText, 2000);
let chunkIndex = 0;
let copyBtnText = "Copy";
textWidget.setState({
  chunkIndex: chunkIndex + 1,
  chunk: chunks[chunkIndex],
  copyBtnText: "Copy",
  totalChunks: chunks.length,
});

function handleClose() {
  textWidget.close();
  process.exit(0);
}

function handleCopyButton() {
  copy(chunks[chunkIndex]);
  const isLastChunk = chunkIndex >= chunks.length - 1;

  if (isLastChunk && copyBtnText === "Copy") {
    copyBtnText = "Done";
    textWidget.setState({
      copyBtnText,
      chunk: "All chunks copied, click again to close!",
    });
  } else if (isLastChunk) {
    handleClose();
  } else {
    chunkIndex++;
    textWidget.setState({
      chunkIndex: chunkIndex + 1,
      chunk: `${chunks[chunkIndex]}`,
    });
  }
}

function handlePreviousButton() {
  if (chunkIndex <= 0) return;
  chunkIndex--;
  let copyBtnText = "Copy";
  textWidget.setState({
    chunkIndex: chunkIndex + 1,
    copyBtnText,
    chunk: `${chunks[chunkIndex]}`,
  });
}

textWidget.onClick((event) => {
  switch (event.targetId) {
    case "copy-button":
      handleCopyButton();
      break;
    case "previous-button":
      handlePreviousButton();
      break;
    case "close-button":
      handleClose();
      break;
  }
});