Simple quill integration + checked item cascade. Enjoy!

[gelatinescreams]

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

• Version 1.4
• 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

@import url('https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css');

textarea[placeholder="Any thoughts..."].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;
}

.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: inherit;
  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;
}

.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;
}

JS

(function() {
  if (window.quillEditorInitialized) return;
  window.quillEditorInitialized = true;
  
  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 initQuillEditor() {
    if (!window.quillInstances) {
      window.quillInstances = new Map();
    }
    
    const observer = new MutationObserver(() => {
      document.querySelectorAll('textarea[placeholder="Any thoughts..."]').forEach(textarea => {
        if (!textarea.dataset.quillified) {
          textarea.dataset.quillified = 'true';
          try {
            attachQuill(textarea);
          } catch (e) {
            textarea.dataset.quillified = 'false';
            textarea.classList.remove('quill-hidden');
          }
        }
      });
    });
    
    observer.observe(document.body, { childList: true, subtree: true });
    
    document.querySelectorAll('textarea[placeholder="Any thoughts..."]').forEach(textarea => {
      if (!textarea.dataset.quillified) {
        textarea.dataset.quillified = 'true';
        try {
          attachQuill(textarea);
        } catch (e) {
          textarea.dataset.quillified = 'false';
          textarea.classList.remove('quill-hidden');
        }
      }
    });
  }

  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
        }
      }
    });
    
    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;
        const event = new Event('input', { bubbles: true });
        textarea.dispatchEvent(event);
      } 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);
        quill.setSelection(quill.getLength(), 0);
        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') {
        const items = node.querySelectorAll('li');
        let orderedIndex = 1;
        
        items.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 className = li.className || '';
    const match = 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 + '**';
    } else if (tag === 'em' || tag === 'i') {
      return '*' + text + '*';
    } else if (tag === 's' || tag === 'strike') {
      return '~~' + text + '~~';
    } else if (tag === 'code') {
      return '`' + text + '`';
    } else if (tag === 'a') {
      const href = child.getAttribute('href') || '';
      return '[' + text + '](' + href + ')';
    } else if (tag === 'br') {
      return '';
    } else if (tag === 'span') {
      if (child.classList?.contains('ql-ui')) {
        return '';
      }
      return text;
    } else {
      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(codeLine => {
            html += '<div class="ql-code-block">' + escapeHtml(codeLine) + '</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\] (.*)$/);
      if (checkedMatch) {
        html += '<ol><li data-list="checked"><span class="ql-ui"></span>' + processInlineMd(checkedMatch[2]) + '</li></ol>';
        continue;
      }
      
      const uncheckedMatch = line.match(/^(\s*)- \[ \] (.*)$/);
      if (uncheckedMatch) {
        html += '<ol><li data-list="unchecked"><span class="ql-ui"></span>' + processInlineMd(uncheckedMatch[2]) + '</li></ol>';
        continue;
      }
      
      const bulletMatch = line.match(/^(\s*)[-*] (.*)$/);
      if (bulletMatch) {
        html += '<ol><li data-list="bullet"><span class="ql-ui"></span>' + processInlineMd(bulletMatch[2]) + '</li></ol>';
        continue;
      }
      
      const orderedMatch = line.match(/^(\s*)(\d+)\. (.*)$/);
      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 handleQuillCheckbox(qlUI) {
    const listItem = qlUI.closest('li');
    if (!listItem) return;
    
    setTimeout(() => {
      const editor = listItem.closest('.ql-editor');
      if (!editor) return;
      
      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));
      }
      
      const textarea = editor.closest('.flex.flex-col')?.querySelector('textarea');
      if (textarea && window.quillInstances) {
        const quill = window.quillInstances.get(textarea);
        if (quill) {
          const md = quillHtmlToMarkdown(quill.root);
          const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
            window.HTMLTextAreaElement.prototype, 'value'
          ).set;
          nativeInputValueSetter.call(textarea, md);
          const event = new Event('input', { bubbles: true });
          textarea.dispatchEvent(event);
        }
      }
    }, 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(() => {
      const dblClickEvent = new MouseEvent('dblclick', {
        bubbles: true,
        cancelable: true,
        view: window
      });
      markdownContent.dispatchEvent(dblClickEvent);
      
      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');
        }
        
        const allOls = Array.from(quillEditor.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));
        }
        
        const textarea = memoContainer?.querySelector('textarea');
        if (textarea && window.quillInstances) {
          const quill = window.quillInstances.get(textarea);
          if (quill) {
            const md = quillHtmlToMarkdown(quill.root);
            const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
              window.HTMLTextAreaElement.prototype, 'value'
            ).set;
            nativeInputValueSetter.call(textarea, md);
            const event = new Event('input', { bubbles: true });
            textarea.dispatchEvent(event);
          }
        }
      }, 500);
    }, 800);
  }
})();

[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