Simple quill integration + checked item cascade. Enjoy!

[gelatinescreams]

Copy the css and js below to the relevant fields in settings -> system

• Version 1.6 3/26/26
• Adds quill support to the notes
• Full markdown support
• Enable double click to edit in the settings for auto list sort.
• Clicking a list item now enters edit mode.
  Clicked items will go to the bottom of the list!
• Automatically clicks view more on notes

CSS

textarea.quill-hidden {
  display: none !important;
  height: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}
 
.quill-wrapper {
  width: 100% !important;
  min-height: 120px !important;
  display: block !important;
}
 
.ql-container.ql-snow {
  border: none !important;
  font-size: 1rem;
  line-height: 1.5;
  background: transparent;
  color: var(--foreground)  !important;
  position: unset !important;
  width:100%;
}
 
.ql-editor {
  min-height: 100px !important;
  max-height: 40vh !important;
  padding: 0.25rem 0 !important;
  overflow-y: auto !important;
}
 
.ql-editor.ql-blank::before {
  color: var(--foreground)  !important;
  opacity: 0.7;
  font-style: normal;
  left: 0;
}
 
.ql-toolbar.ql-snow {
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 4px 0;
  margin-bottom: 4px;
  min-width: 100%  !important;
  box-sizing: border-box;
  width: 100%  !important;
}
 
.ql-snow .ql-stroke {
  stroke: currentColor;
}
 
.ql-snow .ql-fill {
  fill: currentColor;
}
 
.ql-snow button:hover {
  color: var(--primary);
}
 
.markdown-content p:empty::before,
.markdown-content p:has(> br:only-child)::before {
  content: '\00a0';
}
 
.markdown-content p:empty,
.markdown-content p:has(> br:only-child) {
  min-height: 1.5em;
}

.quill-wrapper {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.memo-editor-content ~ div .markdown-content {
  display: none !important;
}
 
:root {
  --primary: #1bb6cf;
}

JS

(function() {
  if (window.location.pathname.startsWith('/setting')) return;
  if (window.quillEditorInitialized) return;
  window.quillEditorInitialized = true;

  const quillCSS = document.createElement('link');
  quillCSS.rel = 'stylesheet';
  quillCSS.href = 'https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css';
  document.head.appendChild(quillCSS);

  quillCSS.onload = () => {
    const style = document.createElement('style');
    style.textContent = `
      textarea.quill-hidden {
        display: none !important;
        height: 0 !important;
        position: absolute !important;
        pointer-events: none !important;
      }
      .ql-toolbar.ql-snow {
        border: none !important;
        border-bottom: 1px solid var(--border) !important;
        padding: 4px 0 !important;
        margin-bottom: 4px !important;
        box-sizing: border-box !important;
        width: 100%  !important;
      }
      .ql-container.ql-snow {
        border: none !important;
        font-size: 1rem !important;
        line-height: 1.5 !important;
        background: transparent !important;
        color: var(--foreground)  !important;
        position: unset !important;
        width:100%;
      }
      .quill-wrapper {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
      }
      .ql-editor.ql-blank::before {
        color: var(--foreground)  !important;
        opacity: 0.7;
        font-style: normal;
        left: 0;
       }
    `;
    document.head.appendChild(style);
  };

  const quillScript = document.createElement('script');
  quillScript.src = 'https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js';
  document.head.appendChild(quillScript);

  quillScript.onload = () => {
    initQuillEditor();
    initTagDropdownFix();
    initAutoExpand();
    initAutoSortChecklist();
  };

  function initAutoExpand() {
    const observer = new MutationObserver(() => {
      document.querySelectorAll('.text-primary.cursor-pointer').forEach(btn => {
        if (btn.textContent.trim() === 'Show more') btn.click();
      });
    });
    observer.observe(document.body, { childList: true, subtree: true });
    document.querySelectorAll('.text-primary.cursor-pointer').forEach(btn => {
      if (btn.textContent.trim() === 'Show more') btn.click();
    });
  }

  function isMemoTextarea(textarea) {
    const placeholder = textarea.placeholder || '';
    if (placeholder === 'Any thoughts...') return true;
    if (textarea.closest('.memo-editor-content')) return true;
    if (textarea.closest('[class*="memo"][class*="editor"]')) return true;
    if (textarea.closest('[class*="edit"][class*="memo"]')) return true;
    let el = textarea.parentElement;
    for (let i = 0; i < 5; i++) {
      if (!el) break;
      const saveBtn = el.querySelector('button.bg-primary');
      if (saveBtn && saveBtn.textContent.trim() === 'Save') return true;
      el = el.parentElement;
    }
    return false;
  }

  function initQuillEditor() {
    if (!window.quillInstances) window.quillInstances = new Map();

    function tryAttach(textarea) {
      if (textarea.dataset.quillified) return;
      if (!isMemoTextarea(textarea)) return;
      textarea.dataset.quillified = 'true';
      try {
        attachQuill(textarea);
      } catch (e) {
        textarea.dataset.quillified = 'false';
        textarea.classList.remove('quill-hidden');
      }
    }

    const observer = new MutationObserver(() => {
      document.querySelectorAll('textarea').forEach(tryAttach);
    });
    observer.observe(document.body, { childList: true, subtree: true });
    document.querySelectorAll('textarea').forEach(tryAttach);
  }

  function initTagDropdownFix() {
    setInterval(() => {
      document.querySelectorAll('div[class*="z-20"][class*="absolute"]').forEach(dropdown => {
        if (!dropdown.querySelector('.truncate')) return;
        const top = parseInt(dropdown.style.top);
        if (top > 300) {
          const container = dropdown.closest('.flex.flex-col.justify-start');
          if (container) {
            const rect = container.getBoundingClientRect();
            dropdown.style.top = Math.min(top, rect.height - 50) + 'px';
          }
        }
      });
    }, 50);
  }

  function attachQuill(textarea) {
    const parent = textarea.parentNode;
    if (!parent) return;

    const editorDiv = document.createElement('div');
    editorDiv.className = 'quill-wrapper';
    parent.insertBefore(editorDiv, textarea);
    textarea.classList.add('quill-hidden');

    const quill = new Quill(editorDiv, {
      theme: 'snow',
      placeholder: 'Any thoughts...',
      modules: {
        toolbar: [
          ['bold', 'italic', 'strike', 'code'],
          [{ 'header': [1, 2, 3, false] }],
          [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'list': 'check' }],
          [{ 'indent': '-1' }, { 'indent': '+1' }],
          ['blockquote', 'code-block'],
          ['link'],
          ['clean']
        ],
        clipboard: { matchVisual: false }
      }
    });

    editorDiv.addEventListener('keydown', (e) => {
      if (e.key === 'Tab' || e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'Enter') {
        const dropdown = document.querySelector('div[class*="z-20"][class*="absolute"]');
        if (dropdown && dropdown.querySelector('.truncate')) {
          e.stopPropagation();
        }
      }
    }, true);

    quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
      delta.ops = delta.ops.map(op => {
        if (op.attributes) {
          delete op.attributes.color;
          delete op.attributes.background;
        }
        return op;
      });
      return delta;
    });

    function loadContent() {
      if (textarea.value && quill.getText().trim() === '') {
        quill.root.innerHTML = markdownToHtml(textarea.value);
      }
    }

    loadContent();
    let attempts = 0;
    const checkContent = setInterval(() => {
      loadContent();
      if (++attempts > 10) clearInterval(checkContent);
    }, 50);

    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
      window.HTMLTextAreaElement.prototype, 'value'
    ).set;

    let lastQuillUpdate = 0;
    let lastTextareaValue = textarea.value;

    quill.on('text-change', () => {
      lastQuillUpdate = Date.now();
      try {
        const md = quillHtmlToMarkdown(quill.root);
        nativeInputValueSetter.call(textarea, md);
        lastTextareaValue = md;
        textarea.dispatchEvent(new Event('input', { bubbles: true }));
      } catch (e) {}
    });

    setInterval(() => {
      if (Date.now() - lastQuillUpdate < 500) return;
      if (quill.hasFocus()) return;
      const newValue = textarea.value;
      if (newValue === '' && lastTextareaValue !== '') {
        quill.setText('');
        lastTextareaValue = '';
      } else if (newValue.length > lastTextareaValue.length) {
        quill.root.innerHTML = markdownToHtml(newValue);
        lastTextareaValue = newValue;
      }
    }, 100);

    window.quillInstances.set(textarea, quill);
  }

  function quillHtmlToMarkdown(root) {
    const lines = [];
    const children = Array.from(root.children);
    for (let i = 0; i < children.length; i++) {
      const node = children[i];
      const tagName = node.tagName.toLowerCase();
      const innerHTML = node.innerHTML;
      const text = node.textContent;
      const isLast = i === children.length - 1;
      const isEmpty = innerHTML === '<br>' || text.trim() === '' || text === '\u00A0';

      if (isEmpty && isLast) continue;
      if (isEmpty) {
        const nextNode = children[i + 1];
        if (nextNode && nextNode.tagName?.toLowerCase() === 'div' && nextNode.classList?.contains('ql-code-block-container')) continue;
        lines.push('\u00A0');
        continue;
      }

      if (tagName === 'h1') { lines.push('# ' + processInline(node)); continue; }
      if (tagName === 'h2') { lines.push('## ' + processInline(node)); continue; }
      if (tagName === 'h3') { lines.push('### ' + processInline(node)); continue; }
      if (tagName === 'h4') { lines.push('#### ' + processInline(node)); continue; }
      if (tagName === 'h5') { lines.push('##### ' + processInline(node)); continue; }
      if (tagName === 'h6') { lines.push('###### ' + processInline(node)); continue; }
      if (tagName === 'blockquote') { lines.push('> ' + processInline(node)); continue; }

      if (tagName === 'div' && node.classList.contains('ql-code-block-container')) {
        lines.push('```');
        node.querySelectorAll('.ql-code-block').forEach(block => lines.push(block.textContent));
        lines.push('```');
        continue;
      }

      if (tagName === 'pre') { lines.push('```'); lines.push(node.textContent); lines.push('```'); continue; }

      if (tagName === 'ol' || tagName === 'ul') {
        let orderedIndex = 1;
        node.querySelectorAll('li').forEach(li => {
          const indent = getIndentLevel(li);
          const indentStr = '  '.repeat(indent);
          const dataList = li.getAttribute('data-list');
          const liText = getListItemText(li);
          if (dataList === 'checked')        lines.push(indentStr + '- [x] ' + liText);
          else if (dataList === 'unchecked') lines.push(indentStr + '- [ ] ' + liText);
          else if (dataList === 'ordered')   lines.push(indentStr + `${orderedIndex++}. ` + liText);
          else if (dataList === 'bullet')    lines.push(indentStr + '- ' + liText);
          else if (tagName === 'ol')         lines.push(indentStr + `${orderedIndex++}. ` + liText);
          else                               lines.push(indentStr + '- ' + liText);
        });
        continue;
      }

      if (tagName === 'p') { lines.push(processInline(node)); continue; }
      lines.push(text);
    }
    return lines.join('\n');
  }

  function getIndentLevel(li) {
    const match = (li.className || '').match(/ql-indent-(\d+)/);
    return match ? parseInt(match[1]) : 0;
  }

  function getListItemText(li) {
    let result = '';
    for (const child of li.childNodes) {
      if (child.nodeType === Node.ELEMENT_NODE && child.classList?.contains('ql-ui')) continue;
      if (child.nodeType === Node.TEXT_NODE) result += child.textContent;
      else if (child.nodeType === Node.ELEMENT_NODE) result += processInlineElement(child);
    }
    return result;
  }

  function processInline(node) {
    let result = '';
    for (const child of node.childNodes) {
      if (child.nodeType === Node.TEXT_NODE) result += child.textContent;
      else if (child.nodeType === Node.ELEMENT_NODE) result += processInlineElement(child);
    }
    return result;
  }

  function processInlineElement(child) {
    const tag = child.tagName.toLowerCase();
    const text = child.textContent;
    if (tag === 'strong' || tag === 'b') return '**' + text + '**';
    if (tag === 'em'     || tag === 'i') return '*' + text + '*';
    if (tag === 's' || tag === 'strike') return '~~' + text + '~~';
    if (tag === 'code') return '`' + text + '`';
    if (tag === 'a') return '[' + text + '](' + (child.getAttribute('href') || '') + ')';
    if (tag === 'br') return '';
    if (tag === 'span') return child.classList?.contains('ql-ui') ? '' : text;
    return text;
  }

  function markdownToHtml(md) {
    const lines = md.split('\n');
    let html = '';
    let inCodeBlock = false;
    let codeContent = '';

    for (let i = 0; i < lines.length; i++) {
      let line = lines[i];
      if (line.startsWith('```')) {
        if (inCodeBlock) {
          html += '<div class="ql-code-block-container" spellcheck="false">';
          codeContent.trim().split('\n').forEach(cl => {
            html += '<div class="ql-code-block">' + escapeHtml(cl) + '</div>';
          });
          html += '</div>';
          codeContent = '';
          inCodeBlock = false;
        } else {
          inCodeBlock = true;
        }
        continue;
      }
      if (inCodeBlock) { codeContent += line + '\n'; continue; }

      if (line.trim() === '' || line === '\u00A0' || line.trim() === '\u00A0') { html += '<p><br></p>'; continue; }
      if (line.startsWith('###### ')) { html += '<h6>' + processInlineMd(line.slice(7)) + '</h6>'; continue; }
      if (line.startsWith('##### '))  { html += '<h5>' + processInlineMd(line.slice(6)) + '</h5>'; continue; }
      if (line.startsWith('#### '))   { html += '<h4>' + processInlineMd(line.slice(5)) + '</h4>'; continue; }
      if (line.startsWith('### '))    { html += '<h3>' + processInlineMd(line.slice(4)) + '</h3>'; continue; }
      if (line.startsWith('## '))     { html += '<h2>' + processInlineMd(line.slice(3)) + '</h2>'; continue; }
      if (line.startsWith('# '))      { html += '<h1>' + processInlineMd(line.slice(2)) + '</h1>'; continue; }
      if (line.startsWith('> '))      { html += '<blockquote>' + processInlineMd(line.slice(2)) + '</blockquote>'; continue; }

      const checkedMatch   = line.match(/^(\s*)- \[x\] (.*)$/);
      const uncheckedMatch = line.match(/^(\s*)- \[ \] (.*)$/);
      const bulletMatch    = line.match(/^(\s*)[-*] (.*)$/);
      const orderedMatch   = line.match(/^(\s*)(\d+)\. (.*)$/);

      if (checkedMatch)   { html += '<ol><li data-list="checked"><span class="ql-ui"></span>'   + processInlineMd(checkedMatch[2])   + '</li></ol>'; continue; }
      if (uncheckedMatch) { html += '<ol><li data-list="unchecked"><span class="ql-ui"></span>' + processInlineMd(uncheckedMatch[2]) + '</li></ol>'; continue; }
      if (bulletMatch)    { html += '<ol><li data-list="bullet"><span class="ql-ui"></span>'    + processInlineMd(bulletMatch[2])    + '</li></ol>'; continue; }
      if (orderedMatch)   { html += '<ol><li data-list="ordered"><span class="ql-ui"></span>'   + processInlineMd(orderedMatch[3])   + '</li></ol>'; continue; }

      html += '<p>' + processInlineMd(line) + '</p>';
    }
    return html;
  }

  function processInlineMd(text) {
    return text
      .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
      .replace(/\*(.+?)\*/g,     '<em>$1</em>')
      .replace(/~~(.+?)~~/g,     '<s>$1</s>')
      .replace(/`([^`]+)`/g,     '<code>$1</code>')
      .replace(/\[(.+?)\]\((.+?)\)/g, '<a href="$2">$1</a>');
  }

  function escapeHtml(text) {
    return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  }

  function initAutoSortChecklist() {
    document.addEventListener('click', (e) => {
      const qlUI = e.target.closest('.ql-ui');
      if (qlUI) { handleQuillCheckbox(qlUI); return; }
      const checkbox = e.target.closest('button[role="checkbox"]');
      if (checkbox) { handleViewModeCheckbox(checkbox); return; }
    }, true);
  }

  function findTextareaForEditor(editor) {
    let el = editor;
    for (let depth = 0; depth < 6; depth++) {
      el = el.parentElement;
      if (!el) break;
      const ta = el.querySelector('textarea');
      if (ta && window.quillInstances?.has(ta)) return ta;
    }
    return null;
  }

  function handleQuillCheckbox(qlUI) {
    const listItem = qlUI.closest('li');
    if (!listItem) return;
    setTimeout(() => {
      const editor = listItem.closest('.ql-editor');
      if (!editor) return;
      mergeAndSortChecklists(editor);
      const textarea = findTextareaForEditor(editor);
      if (textarea) syncQuillToTextarea(textarea);
    }, 150);
  }

  function handleViewModeCheckbox(checkbox) {
    const listItem = checkbox.closest('li.task-list-item');
    if (!listItem) return;
    const list = listItem.closest('ul.contains-task-list');
    if (!list) return;
    const markdownContent = list.closest('.markdown-content');
    if (!markdownContent) return;

    const allItems = Array.from(list.querySelectorAll('li.task-list-item'));
    const itemIndex = allItems.indexOf(listItem);
    const wasChecked = checkbox.getAttribute('data-state') === 'checked';
    const newState = !wasChecked;

    setTimeout(() => {
      markdownContent.dispatchEvent(new MouseEvent('dblclick', { bubbles: true, cancelable: true, view: window }));
      setTimeout(() => {
        const memoContainer = markdownContent.closest('.group');
        const quillEditor = memoContainer?.querySelector('.ql-editor');
        if (!quillEditor) return;

        const checklistItems = quillEditor.querySelectorAll('li[data-list="checked"], li[data-list="unchecked"]');
        if (checklistItems[itemIndex]) {
          checklistItems[itemIndex].setAttribute('data-list', newState ? 'checked' : 'unchecked');
        }

        mergeAndSortChecklists(quillEditor);

        const textarea = memoContainer?.querySelector('textarea') || findTextareaForEditor(quillEditor);
        if (textarea) syncQuillToTextarea(textarea);
      }, 500);
    }, 800);
  }

  function mergeAndSortChecklists(editor) {
    const allOls = Array.from(editor.querySelectorAll('ol'));
    let mergeTarget = null;
    allOls.forEach(ol => {
      const li = ol.querySelector('li');
      const dataList = li?.getAttribute('data-list');
      if (dataList === 'checked' || dataList === 'unchecked') {
        if (!mergeTarget) { mergeTarget = ol; }
        else { while (ol.firstChild) mergeTarget.appendChild(ol.firstChild); ol.remove(); }
      }
    });
    if (mergeTarget) {
      const items = Array.from(mergeTarget.querySelectorAll('li'));
      const unchecked = items.filter(li => li.getAttribute('data-list') !== 'checked');
      const checked   = items.filter(li => li.getAttribute('data-list') === 'checked');
      [...unchecked, ...checked].forEach(li => mergeTarget.appendChild(li));
    }
  }

  function syncQuillToTextarea(textarea) {
    const quill = window.quillInstances?.get(textarea);
    if (!quill) return;
    const md = quillHtmlToMarkdown(quill.root);
    const setter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value').set;
    setter.call(textarea, md);
    textarea.dispatchEvent(new Event('input', { bubbles: true }));
  }

})();

[gelatinescreams]

Thank you for memos. It's really great. I use it daily and have integrated it with my mentra ai glasses.

Hello everyone, if you are into topology, network, smart home, home lab et al visualizers, check out my single html file called The One File

[gelatinescreams]

V1.1 Added a fix for dynamic tag addition to edit field.

[gelatinescreams]

V1.2 Added fix for copy pasted text from other non markdown inputs. Further tag display fixes. Added timestamp to quill edit area.

[gelatinescreams]

V 1.3

Clicked items will go to the bottom of the list!

[gelatinescreams]

V1.4 : Fixed an issue relating to secondary code blocks.

[Inverstar]

看起来不错，Great and Thanks

[coledeb]

Amazing! Do you by any chance know if it's possible to also have these options when editing an existing note?

[gelatinescreams]

I have not updated to the newest version of memeos yet. I will do so this weekend and update.

[gelatinescreams]

Done.

[gelatinescreams]

Version 1.6

• Updated to newest Version: v0.26.2
• Fixed tag system keyboard conflicts
• Fixed search tag conflict

BOTH CSS AND JS SECTIONS HAVE CHANGED. PLEASE COMPLETELY REPLACE THE OLD WITH THE NEW.