annotate rich_editor/rich_editor.js @ 203:92a57bd716c1

removed unused file
author MrJuneJune <me@mrjunejune.com>
date Sun, 15 Feb 2026 09:13:09 -0800
parents 6cdee35a7ba9
children e5aed6c36672
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
201
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
1 /**
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
2 * Rich Editor
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
3 * -----------
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
4 * A vanilla JavaScript rich text editor with:
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
5 * - Text formatting (h1-h6, paragraphs, lists)
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
6 * - Image/file upload via paste, drop, click, or /upload command
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
7 * - Debounced auto-save
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
8 * - Generic callback functions for uploads and saves
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
9 *
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
10 * Usage:
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
11 * const editor = RichEditor.init('editor-container', {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
12 * uploadCallback: async (file) => { return { url: '...', key: '...' }; },
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
13 * saveCallback: async (content) => { console.log('Saved:', content); },
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
14 * debounceMs: 1000,
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
15 * placeholder: 'Start writing...'
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
16 * });
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
17 */
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
18
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
19 const RichEditor = (function() {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
20 'use strict';
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
21
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
22 const DEFAULT_OPTIONS = {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
23 uploadCallback: null,
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
24 saveCallback: null,
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
25 debounceMs: 1000,
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
26 placeholder: 'Start writing... (Use /upload to insert files)',
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
27 cloudFrontUrl: ''
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
28 };
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
29
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
30 function debounce(func, wait) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
31 let timeout;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
32 return function executedFunction(...args) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
33 const later = () => {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
34 clearTimeout(timeout);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
35 func(...args);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
36 };
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
37 clearTimeout(timeout);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
38 timeout = setTimeout(later, wait);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
39 };
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
40 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
41
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
42 function createToolbar(editor) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
43 const toolbar = document.createElement('div');
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
44 toolbar.className = 'rich-editor-toolbar';
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
45
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
46 const buttons = [
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
47 { cmd: 'h1', label: 'H1', title: 'Heading 1' },
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
48 { cmd: 'h2', label: 'H2', title: 'Heading 2' },
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
49 { cmd: 'h3', label: 'H3', title: 'Heading 3' },
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
50 { cmd: 'p', label: 'ΒΆ', title: 'Paragraph' },
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
51 { cmd: 'ul', label: 'β€’', title: 'Bullet List' },
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
52 { cmd: 'ol', label: '1.', title: 'Numbered List' },
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
53 { cmd: 'separator' },
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
54 { cmd: 'bold', label: 'B', title: 'Bold' },
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
55 { cmd: 'italic', label: 'I', title: 'Italic' },
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
56 { cmd: 'separator' },
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
57 { cmd: 'link', label: 'πŸ”—', title: 'Insert Link' },
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
58 { cmd: 'notelink', label: 'πŸ“', title: 'Link to Note' },
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
59 { cmd: 'upload', label: 'πŸ“Ž', title: 'Upload File' }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
60 ];
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
61
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
62 buttons.forEach(btn => {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
63 if (btn.cmd === 'separator') {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
64 const sep = document.createElement('span');
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
65 sep.className = 'rich-editor-separator';
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
66 toolbar.appendChild(sep);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
67 return;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
68 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
69
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
70 const button = document.createElement('button');
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
71 button.type = 'button';
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
72 button.className = 'rich-editor-btn';
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
73 button.textContent = btn.label;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
74 button.title = btn.title;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
75 button.dataset.cmd = btn.cmd;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
76
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
77 button.addEventListener('click', (e) => {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
78 e.preventDefault();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
79 editor.execCommand(btn.cmd);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
80 });
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
81
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
82 toolbar.appendChild(button);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
83 });
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
84
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
85 return toolbar;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
86 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
87
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
88 function createStyles() {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
89 if (document.getElementById('rich-editor-styles')) return;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
90
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
91 const style = document.createElement('style');
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
92 style.id = 'rich-editor-styles';
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
93 style.textContent = `
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
94 .rich-editor-container {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
95 border: 1px solid #ccc;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
96 border-radius: 4px;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
97 overflow: hidden;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
98 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
99
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
100 .rich-editor-toolbar {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
101 display: flex;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
102 flex-wrap: wrap;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
103 gap: 4px;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
104 padding: 8px;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
105 background: #f5f5f5;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
106 border-bottom: 1px solid #ccc;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
107 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
108
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
109 .rich-editor-btn {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
110 padding: 6px 12px;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
111 border: 1px solid #ccc;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
112 border-radius: 4px;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
113 background: #fff;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
114 cursor: pointer;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
115 font-size: 14px;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
116 min-width: 32px;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
117 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
118
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
119 .rich-editor-btn:hover {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
120 background: #e9e9e9;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
121 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
122
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
123 .rich-editor-btn:active {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
124 background: #ddd;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
125 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
126
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
127 .rich-editor-separator {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
128 width: 1px;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
129 background: #ccc;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
130 margin: 0 4px;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
131 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
132
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
133 .rich-editor-content {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
134 min-height: 300px;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
135 padding: 16px;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
136 outline: none;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
137 overflow-y: auto;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
138 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
139
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
140 .rich-editor-content:empty:before {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
141 content: attr(data-placeholder);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
142 color: #999;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
143 pointer-events: none;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
144 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
145
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
146 .rich-editor-content img {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
147 max-width: 100%;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
148 height: auto;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
149 border-radius: 4px;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
150 margin: 8px 0;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
151 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
152
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
153 .rich-editor-content a {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
154 color: #0078ff;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
155 text-decoration: none;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
156 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
157
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
158 .rich-editor-content a:hover {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
159 text-decoration: underline;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
160 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
161
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
162 .rich-editor-content a.note-link {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
163 background: #e8f4ff;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
164 padding: 2px 6px;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
165 border-radius: 3px;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
166 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
167
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
168 .rich-editor-content a.note-link:hover {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
169 background: #d0e8ff;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
170 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
171
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
172 .rich-editor-content .upload-placeholder {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
173 display: inline-block;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
174 padding: 8px 16px;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
175 background: #f0f0f0;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
176 border-radius: 4px;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
177 color: #666;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
178 font-style: italic;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
179 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
180
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
181 .rich-editor-content .upload-placeholder.loading {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
182 padding: 8px 16px;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
183 background: #fffacd;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
184 border-radius: 4px;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
185 animation: pulse 1.5s ease-in-out infinite;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
186 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
187
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
188 @keyframes pulse {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
189 0%, 100% { opacity: 1; }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
190 50% { opacity: 0.6; }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
191 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
192
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
193 .rich-editor-upload-overlay {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
194 position: absolute;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
195 top: 0;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
196 left: 0;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
197 right: 0;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
198 bottom: 0;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
199 background: rgba(0, 120, 255, 0.1);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
200 border: 2px dashed #0078ff;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
201 display: flex;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
202 align-items: center;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
203 justify-content: center;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
204 font-size: 18px;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
205 color: #0078ff;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
206 pointer-events: none;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
207 z-index: 10;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
208 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
209
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
210 .rich-editor-status {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
211 padding: 4px 8px;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
212 font-size: 12px;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
213 color: #666;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
214 background: #f9f9f9;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
215 border-top: 1px solid #eee;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
216 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
217
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
218 .rich-editor-file-input {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
219 display: none;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
220 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
221 `;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
222 document.head.appendChild(style);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
223 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
224
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
225 class Editor {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
226 constructor(elementId, options) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
227 this.options = { ...DEFAULT_OPTIONS, ...options };
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
228 this.container = document.getElementById(elementId);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
229
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
230 if (!this.container) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
231 throw new Error(`Element with id "${elementId}" not found`);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
232 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
233
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
234 this.init();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
235 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
236
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
237 init() {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
238 createStyles();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
239
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
240 // Create wrapper
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
241 this.wrapper = document.createElement('div');
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
242 this.wrapper.className = 'rich-editor-container';
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
243 this.wrapper.style.position = 'relative';
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
244
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
245 // Create toolbar
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
246 this.toolbar = createToolbar(this);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
247 this.wrapper.appendChild(this.toolbar);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
248
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
249 // Create content area
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
250 this.content = document.createElement('div');
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
251 this.content.className = 'rich-editor-content';
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
252 this.content.contentEditable = true;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
253 this.content.dataset.placeholder = this.options.placeholder;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
254 this.wrapper.appendChild(this.content);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
255
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
256 // Create status bar
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
257 this.status = document.createElement('div');
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
258 this.status.className = 'rich-editor-status';
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
259 this.status.textContent = 'Ready';
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
260 this.wrapper.appendChild(this.status);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
261
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
262 // Create hidden file input
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
263 this.fileInput = document.createElement('input');
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
264 this.fileInput.type = 'file';
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
265 this.fileInput.className = 'rich-editor-file-input';
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
266 this.fileInput.multiple = true;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
267 this.fileInput.accept = 'image/*,application/pdf,.doc,.docx,.txt';
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
268 this.wrapper.appendChild(this.fileInput);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
269
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
270 // Add to container
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
271 this.container.appendChild(this.wrapper);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
272
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
273 // Setup event listeners
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
274 this.setupEvents();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
275
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
276 // Setup debounced save
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
277 if (this.options.saveCallback) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
278 this.debouncedSave = debounce(() => {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
279 this.save();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
280 }, this.options.debounceMs);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
281 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
282 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
283
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
284 setupEvents() {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
285 // Input events for auto-save
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
286 this.content.addEventListener('input', () => {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
287 if (this.debouncedSave) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
288 this.setStatus('Editing...');
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
289 this.debouncedSave();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
290 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
291 });
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
292
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
293 // Handle paste
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
294 this.content.addEventListener('paste', (e) => {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
295 const items = e.clipboardData?.items;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
296 if (!items) return;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
297
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
298 for (const item of items) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
299 if (item.type.startsWith('image/') || item.kind === 'file') {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
300 e.preventDefault();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
301 const file = item.getAsFile();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
302 if (file) this.uploadFile(file);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
303 return;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
304 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
305 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
306 });
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
307
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
308 // Handle drop
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
309 this.content.addEventListener('dragover', (e) => {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
310 e.preventDefault();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
311 this.showDropOverlay();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
312 });
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
313
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
314 this.content.addEventListener('dragleave', (e) => {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
315 e.preventDefault();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
316 this.hideDropOverlay();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
317 });
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
318
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
319 this.content.addEventListener('drop', (e) => {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
320 e.preventDefault();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
321 this.hideDropOverlay();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
322
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
323 const files = e.dataTransfer?.files;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
324 if (files && files.length > 0) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
325 for (const file of files) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
326 this.uploadFile(file);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
327 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
328 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
329 });
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
330
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
331 // Handle /upload command
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
332 this.content.addEventListener('keydown', (e) => {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
333 if (e.key === 'Enter') {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
334 const selection = window.getSelection();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
335 const node = selection.anchorNode;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
336 if (node && node.textContent) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
337 const text = node.textContent;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
338 if (text.trim() === '/upload') {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
339 e.preventDefault();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
340 node.textContent = '';
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
341 this.triggerFileUpload();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
342 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
343 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
344 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
345 });
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
346
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
347 // File input change
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
348 this.fileInput.addEventListener('change', (e) => {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
349 const files = e.target.files;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
350 if (files && files.length > 0) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
351 for (const file of files) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
352 this.uploadFile(file);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
353 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
354 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
355 this.fileInput.value = '';
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
356 });
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
357
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
358 // Handle keyboard shortcuts
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
359 this.content.addEventListener('keydown', (e) => {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
360 if (e.ctrlKey || e.metaKey) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
361 switch (e.key.toLowerCase()) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
362 case 'b':
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
363 e.preventDefault();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
364 this.execCommand('bold');
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
365 break;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
366 case 'i':
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
367 e.preventDefault();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
368 this.execCommand('italic');
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
369 break;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
370 case 's':
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
371 e.preventDefault();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
372 this.save();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
373 break;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
374 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
375 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
376 });
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
377 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
378
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
379 showDropOverlay() {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
380 if (this.dropOverlay) return;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
381
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
382 this.dropOverlay = document.createElement('div');
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
383 this.dropOverlay.className = 'rich-editor-upload-overlay';
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
384 this.dropOverlay.textContent = 'Drop files here to upload';
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
385 this.wrapper.appendChild(this.dropOverlay);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
386 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
387
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
388 hideDropOverlay() {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
389 if (this.dropOverlay) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
390 this.dropOverlay.remove();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
391 this.dropOverlay = null;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
392 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
393 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
394
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
395 triggerFileUpload() {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
396 this.fileInput.click();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
397 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
398
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
399 async uploadFile(file) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
400 if (!this.options.uploadCallback) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
401 console.warn('No upload callback configured');
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
402 return;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
403 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
404
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
405 // Insert loading placeholder
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
406 const placeholder = document.createElement('div');
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
407 placeholder.className = 'upload-placeholder loading';
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
408 placeholder.textContent = file.type.startsWith('image/')
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
409 ? `Processing ${file.name}... ⏳`
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
410 : `Uploading ${file.name}...`;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
411
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
412 this.insertAtCursor(placeholder);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
413
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
414 this.setStatus(`Uploading ${file.name}...`);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
415
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
416 try {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
417 const result = await this.options.uploadCallback(file);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
418
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
419 if (result && result.url) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
420 // Replace placeholder with actual content
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
421 if (file.type.startsWith('image/')) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
422 const img = document.createElement('img');
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
423 img.src = result.url;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
424 img.alt = file.name;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
425 placeholder.replaceWith(img);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
426 } else {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
427 const link = document.createElement('a');
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
428 link.href = result.url;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
429 link.textContent = file.name;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
430 link.target = '_blank';
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
431 placeholder.replaceWith(link);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
432 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
433
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
434 this.setStatus(`Uploaded ${file.name}`);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
435 if (this.debouncedSave) this.debouncedSave();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
436 } else {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
437 placeholder.textContent = `Failed to upload ${file.name}`;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
438 placeholder.className = 'upload-placeholder';
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
439 this.setStatus('Upload failed');
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
440 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
441 } catch (error) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
442 console.error('Upload error:', error);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
443 placeholder.textContent = `Error: ${error.message}`;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
444 placeholder.className = 'upload-placeholder';
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
445 this.setStatus('Upload error');
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
446 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
447 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
448
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
449 insertAtCursor(element) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
450 const selection = window.getSelection();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
451 if (selection.rangeCount > 0) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
452 const range = selection.getRangeAt(0);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
453 range.deleteContents();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
454 range.insertNode(element);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
455 range.setStartAfter(element);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
456 range.collapse(true);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
457 selection.removeAllRanges();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
458 selection.addRange(range);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
459 } else {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
460 this.content.appendChild(element);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
461 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
462 this.content.focus();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
463 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
464
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
465 execCommand(cmd) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
466 this.content.focus();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
467
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
468 switch (cmd) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
469 case 'h1':
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
470 case 'h2':
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
471 case 'h3':
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
472 case 'h4':
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
473 case 'h5':
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
474 case 'h6':
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
475 document.execCommand('formatBlock', false, cmd);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
476 break;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
477 case 'p':
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
478 document.execCommand('formatBlock', false, 'p');
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
479 break;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
480 case 'ul':
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
481 document.execCommand('insertUnorderedList', false, null);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
482 break;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
483 case 'ol':
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
484 document.execCommand('insertOrderedList', false, null);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
485 break;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
486 case 'bold':
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
487 document.execCommand('bold', false, null);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
488 break;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
489 case 'italic':
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
490 document.execCommand('italic', false, null);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
491 break;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
492 case 'link':
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
493 this.insertLink();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
494 break;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
495 case 'notelink':
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
496 this.insertNoteLink();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
497 break;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
498 case 'upload':
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
499 this.triggerFileUpload();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
500 break;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
501 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
502
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
503 if (this.debouncedSave) this.debouncedSave();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
504 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
505
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
506 insertLink() {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
507 const url = prompt('Enter URL:');
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
508 if (!url) return;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
509
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
510 const selection = window.getSelection();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
511 const selectedText = selection.toString() || url;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
512
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
513 const link = document.createElement('a');
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
514 link.href = url;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
515 link.textContent = selectedText;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
516 link.target = '_blank';
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
517
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
518 if (selection.rangeCount > 0) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
519 const range = selection.getRangeAt(0);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
520 range.deleteContents();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
521 range.insertNode(link);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
522 range.setStartAfter(link);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
523 range.collapse(true);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
524 selection.removeAllRanges();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
525 selection.addRange(range);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
526 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
527 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
528
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
529 insertNoteLink() {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
530 const noteId = prompt('Enter note ID (e.g., my-ideas):');
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
531 if (!noteId) return;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
532
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
533 const sanitizedId = noteId.toLowerCase().replace(/[^a-z0-9-]/g, '-').replace(/-+/g, '-');
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
534 const selection = window.getSelection();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
535 const selectedText = selection.toString() || sanitizedId;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
536
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
537 const link = document.createElement('a');
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
538 link.href = '/notes/' + encodeURIComponent(sanitizedId);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
539 link.textContent = selectedText;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
540 link.className = 'note-link';
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
541
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
542 if (selection.rangeCount > 0) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
543 const range = selection.getRangeAt(0);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
544 range.deleteContents();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
545 range.insertNode(link);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
546 range.setStartAfter(link);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
547 range.collapse(true);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
548 selection.removeAllRanges();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
549 selection.addRange(range);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
550 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
551 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
552
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
553 setStatus(text) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
554 this.status.textContent = text;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
555 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
556
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
557 async save() {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
558 if (!this.options.saveCallback) return;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
559
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
560 this.setStatus('Saving...');
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
561
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
562 try {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
563 await this.options.saveCallback(this.getContent());
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
564 this.setStatus('Saved');
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
565 } catch (error) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
566 console.error('Save error:', error);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
567 this.setStatus('Save failed');
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
568 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
569 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
570
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
571 getContent() {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
572 return this.content.innerHTML;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
573 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
574
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
575 setContent(html) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
576 this.content.innerHTML = html;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
577 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
578
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
579 getText() {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
580 return this.content.textContent;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
581 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
582
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
583 clear() {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
584 this.content.innerHTML = '';
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
585 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
586
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
587 focus() {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
588 this.content.focus();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
589 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
590 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
591
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
592 return {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
593 init: function(elementId, options) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
594 return new Editor(elementId, options);
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
595 }
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
596 };
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
597 })();
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
598
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
599 // Export for module systems
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
600 if (typeof module !== 'undefined' && module.exports) {
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
601 module.exports = RichEditor;
6cdee35a7ba9 [MrJuneJune] notes
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
602 }