Add a checklist button next to the + button in the memo composer

[vfontanela]

Typing /todo on a phone to create a task list works, but it is a little annoying for quick notes, shopping lists, or simple checklists.

Memos already supports task lists very well once the checklist is started:

typing /todo inserts - [ ]
pressing Enter continues the checklist correctly
checking/unchecking items already works

So I think it would be great to expose this existing behavior as a small checklist button next to the existing + button in the memo composer.

This is not a request for a full task-management system. It is only a small UI improvement for the existing task-list feature and the existing /todo command.

I tested this using Memos’ built-in Settings → System → Additional Script, and it works on both desktop and mobile. Since the script is stored in Memos itself, it also persists across devices after logging in.

The proof of concept below adds a ☑ button next to the + button. When clicked, it inserts - [ ] at the current cursor position and focuses the editor. It also hides the button when a sidebar, modal, or overlay covers the composer.

`
(() => {
const ID = "vf-memos-checklist-button";

function isVisible(el) {
if (!el) return false;
const r = el.getBoundingClientRect();
return r.width > 0 && r.height > 0;
}

function isEditable(el) {
return (
el &&
(
el.tagName === "TEXTAREA" ||
el.tagName === "INPUT" ||
el.isContentEditable
)
);
}

function isTitleField(el) {
const ph = (el.getAttribute("placeholder") || "").toLowerCase();
return (
ph.includes("título") ||
ph.includes("titulo") ||
ph.includes("title")
);
}

let lastEditor = null;

function rememberEditor(el) {
if (isEditable(el) && !isTitleField(el)) {
lastEditor = el;
}
}

document.addEventListener("focusin", e => rememberEditor(e.target), true);
document.addEventListener("click", e => rememberEditor(e.target), true);
document.addEventListener("keyup", e => rememberEditor(e.target), true);

function findEditor() {
if (isEditable(lastEditor) && !isTitleField(lastEditor)) {
return lastEditor;
}

const candidates = [...document.querySelectorAll("textarea, input, [contenteditable='true']")]
  .filter(isVisible)
  .filter(el => !isTitleField(el));

return (
  candidates.find(el => el.tagName === "TEXTAREA") ||
  candidates.find(el => {
    const ph = (el.getAttribute("placeholder") || "").toLowerCase();
    return (
      ph.includes("ideia") ||
      ph.includes("nota") ||
      ph.includes("note") ||
      ph.includes("memo")
    );
  }) ||
  candidates[0] ||
  null
);

}

function setNativeValue(el, value) {
const proto =
el.tagName === "TEXTAREA"
? HTMLTextAreaElement.prototype
: HTMLInputElement.prototype;

const setter = Object.getOwnPropertyDescriptor(proto, "value").set;
setter.call(el, value);

}

function insertTodo() {
const el = findEditor();

if (!el) {
  alert("Click the memo editor first.");
  return;
}

el.focus();

const text = "- [ ] ";

if (el.tagName === "TEXTAREA" || el.tagName === "INPUT") {
  const start = el.selectionStart ?? el.value.length;
  const end = el.selectionEnd ?? start;

  const before = el.value.slice(0, start);
  const after = el.value.slice(end);

  const prefix = before && !before.endsWith("\n") ? "\n" : "";
  const insert = prefix + text;

  setNativeValue(el, before + insert + after);

  const pos = before.length + insert.length;
  el.setSelectionRange(pos, pos);

  el.dispatchEvent(new InputEvent("input", {
    bubbles: true,
    inputType: "insertText",
    data: insert
  }));

  return;
}

if (el.isContentEditable) {
  document.execCommand("insertText", false, text);
  el.dispatchEvent(new InputEvent("input", {
    bubbles: true,
    inputType: "insertText",
    data: text
  }));
}

}

function findPlusButton() {
const editor = findEditor();
if (!editor) return null;

const er = editor.getBoundingClientRect();

const buttons = [...document.querySelectorAll("button")]
  .filter(isVisible)
  .filter(btn => btn.id !== ID)
  .map(btn => {
    const r = btn.getBoundingClientRect();

    const smallSquare =
      Math.abs(r.width - r.height) < 8 &&
      r.width >= 24 &&
      r.width <= 48;

    const nearLeftBottomOfEditor =
      r.left >= er.left - 10 &&
      r.left <= er.left + 80 &&
      r.top >= er.bottom - 10 &&
      r.top <= er.bottom + 90;

    const hasSvg = !!btn.querySelector("svg");

    return {
      btn,
      ok: smallSquare && nearLeftBottomOfEditor && hasSvg,
      score: Math.abs(r.left - er.left) + Math.abs(r.top - er.bottom)
    };
  })
  .filter(x => x.ok)
  .sort((a, b) => a.score - b.score);

return buttons[0]?.btn || null;

}

function makeButton() {
const btn = document.createElement("button");
btn.id = ID;
btn.type = "button";
btn.textContent = "☑";
btn.title = "Insert checklist";
btn.setAttribute("aria-label", "Insert checklist");

btn.style.position = "fixed";
btn.style.zIndex = "999999";
btn.style.width = "34px";
btn.style.height = "34px";
btn.style.border = "1px solid rgba(0,0,0,.16)";
btn.style.borderRadius = "6px";
btn.style.background = "var(--background, white)";
btn.style.color = "inherit";
btn.style.boxShadow = "0 1px 2px rgba(0,0,0,.08)";
btn.style.fontSize = "17px";
btn.style.fontWeight = "600";
btn.style.lineHeight = "1";
btn.style.cursor = "pointer";
btn.style.display = "none";

btn.addEventListener("mousedown", e => {
  e.preventDefault();
});

btn.addEventListener("click", e => {
  e.preventDefault();
  e.stopPropagation();
  insertTodo();
});

document.body.appendChild(btn);
return btn;

}

function isElementReallyOnTop(el) {
if (!el) return false;

const r = el.getBoundingClientRect();

if (
  r.width <= 0 ||
  r.height <= 0 ||
  r.right < 0 ||
  r.bottom < 0 ||
  r.left > window.innerWidth ||
  r.top > window.innerHeight
) {
  return false;
}

const centerX = r.left + r.width / 2;
const centerY = r.top + r.height / 2;

const topElement = document.elementFromPoint(centerX, centerY);

return (
  topElement === el ||
  el.contains(topElement) ||
  topElement?.closest?.("button") === el
);

}

function positionButton() {
let btn = document.getElementById(ID);
if (!btn) btn = makeButton();

const plus = findPlusButton();

if (!plus) {
  btn.style.display = "none";
  return;
}

if (!isElementReallyOnTop(plus)) {
  btn.style.display = "none";
  return;
}

const r = plus.getBoundingClientRect();

btn.style.left = `${r.right + 8}px`;
btn.style.top = `${r.top}px`;
btn.style.display = "block";

}

const observer = new MutationObserver(positionButton);
observer.observe(document.body, {
childList: true,
subtree: true,
attributes: true
});

window.addEventListener("resize", positionButton);
window.addEventListener("scroll", positionButton, true);

setInterval(positionButton, 700);
positionButton();
})();

`

[boojack]

@vfontanela thanks for bring this up. We'll get a formatting toolbar that contains a task item insert action. Let's waiting for next release.

[vfontanela]

Great, thank you!

That sounds perfect. A formatting toolbar with a task item insert action would solve the mobile friction nicely.

Looking forward to the next release.