--- a/rich_editor/rich_editor.js	Sun Feb 15 09:13:09 2026 -0800
+++ b/rich_editor/rich_editor.js	Sun Feb 15 11:02:13 2026 -0800
@@ -44,19 +44,19 @@
     toolbar.className = 'rich-editor-toolbar';
 
     const buttons = [
-      { cmd: 'h1', label: 'H1', title: 'Heading 1' },
-      { cmd: 'h2', label: 'H2', title: 'Heading 2' },
-      { cmd: 'h3', label: 'H3', title: 'Heading 3' },
+      { cmd: 'h1', label: '', title: 'Heading 1', icons: "/public/icons/h1.png" },
+      { cmd: 'h2', label: '', title: 'Heading 2', icons: "/public/icons/h2.png" },
+      { cmd: 'h3', label: '', title: 'Heading 3', icons: "/public/icons/h3.png" },
       { cmd: 'p', label: '¶', title: 'Paragraph' },
       { cmd: 'ul', label: '•', title: 'Bullet List' },
       { cmd: 'ol', label: '1.', title: 'Numbered List' },
-      { cmd: 'separator' },
-      { cmd: 'bold', label: 'B', title: 'Bold' },
-      { cmd: 'italic', label: 'I', title: 'Italic' },
+      { cmd: 'bold', label: '', title: 'Bold', icons: "/public/icons/bold.png" },
       { cmd: 'separator' },
-      { cmd: 'link', label: '🔗', title: 'Insert Link' },
-      { cmd: 'notelink', label: '📝', title: 'Link to Note' },
-      { cmd: 'upload', label: '📎', title: 'Upload File' }
+      { cmd: 'link', label: '', title: 'Insert Link', icons: "/public/icons/link.png"  },
+      { cmd: 'notelink', label: '', title: 'Link to Note', icons: "/public/icons/binder.png"  },
+      { cmd: 'upload', label: '', title: 'Upload File', icons: "/public/icons/clipy.png"  },
+      { cmd: 'separator' },
+      { cmd: 'readonly', label: '', title: 'readonly', icons: "/public/icons/book.png" },
     ];
 
     buttons.forEach(btn => {
@@ -70,6 +70,8 @@
       const button = document.createElement('button');
       button.type = 'button';
       button.className = 'rich-editor-btn';
+      if (btn.icons)
+        button.style.backgroundImage = `url("${btn.icons}")`;
       button.textContent = btn.label;
       button.title = btn.title;
       button.dataset.cmd = btn.cmd;
@@ -114,14 +116,24 @@
         cursor: pointer;
         font-size: 14px;
         min-width: 32px;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 24px 24px;
+        border: none;
       }
 
       .rich-editor-btn:hover {
         background: #e9e9e9;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 24px 24px;
       }
 
       .rich-editor-btn:active {
         background: #ddd;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 24px 24px;
       }
 
       .rich-editor-separator {
@@ -218,6 +230,10 @@
       .rich-editor-file-input {
         display: none;
       }
+
+      ol,ul {
+        padding: 16px;
+      }
     `;
     document.head.appendChild(style);
   }
@@ -226,6 +242,7 @@
     constructor(elementId, options) {
       this.options = { ...DEFAULT_OPTIONS, ...options };
       this.container = document.getElementById(elementId);
+      this.state = { readOnly: false };
 
       if (!this.container) {
         throw new Error(`Element with id "${elementId}" not found`);
@@ -396,6 +413,35 @@
       this.fileInput.click();
     }
 
+    readOnly() {
+      this.state.readOnly = !this.state.readOnly;
+
+      if (this.state.readOnly)
+      {
+        this.content.contentEditable = false;
+        this.setStatus('Read-only mode');
+        const buttons = this.toolbar.querySelectorAll('.rich-editor-btn');
+        buttons.forEach(btn => {
+          if (btn.dataset.cmd !== 'readonly') {
+            btn.disabled = true;
+          }
+        });
+      }
+      else
+      {
+        // Enable editing
+        this.content.contentEditable = true;
+        this.content.style.backgroundColor = '';
+        this.setStatus('Ready');
+
+        // Enable toolbar buttons
+        const buttons = this.toolbar.querySelectorAll('.rich-editor-btn');
+        buttons.forEach(btn => {
+          btn.disabled = false;
+        });
+      }
+    }
+
     async uploadFile(file) {
       if (!this.options.uploadCallback) {
         console.warn('No upload callback configured');
@@ -498,6 +544,9 @@
         case 'upload':
           this.triggerFileUpload();
           break;
+        case 'readonly':
+          this.readOnly();
+          break;
       }
 
       if (this.debouncedSave) this.debouncedSave();