autumnnote 2.1.0 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +74 -6
- package/dist/autumnnote.cjs +27 -22
- package/dist/autumnnote.es.js +474 -591
- package/dist/autumnnote.es.js.map +1 -1
- package/dist/autumnnote.min.js +27 -22
- package/dist/autumnnote.umd.js +27 -22
- package/dist/autumnnote.umd.js.map +1 -1
- package/dist/icon-data-V0Xqv-wX.js +255 -0
- package/dist/icon-data-V0Xqv-wX.js.map +1 -0
- package/package.json +12 -3
- package/types/index.d.ts +8 -0
- package/src/js/Context.js +0 -854
- package/src/js/core/detectLang.js +0 -98
- package/src/js/core/dom.js +0 -372
- package/src/js/core/env.js +0 -38
- package/src/js/core/key.js +0 -66
- package/src/js/core/lists.js +0 -121
- package/src/js/core/markdown.js +0 -695
- package/src/js/core/range.js +0 -194
- package/src/js/core/sanitise.js +0 -304
- package/src/js/editing/History.js +0 -266
- package/src/js/editing/Style.js +0 -812
- package/src/js/editing/Table.js +0 -105
- package/src/js/editing/Typing.js +0 -397
- package/src/js/index.js +0 -193
- package/src/js/index.umd.js +0 -17
- package/src/js/module/AutoSaveRestore.js +0 -125
- package/src/js/module/BaseDialog.js +0 -133
- package/src/js/module/BaseMediaTooltip.js +0 -142
- package/src/js/module/BaseResizer.js +0 -322
- package/src/js/module/BubbleToolbar.js +0 -483
- package/src/js/module/Buttons.js +0 -399
- package/src/js/module/Clipboard.js +0 -579
- package/src/js/module/CodeTooltip.js +0 -493
- package/src/js/module/Codeview.js +0 -125
- package/src/js/module/ContextMenu.js +0 -621
- package/src/js/module/Editor.js +0 -747
- package/src/js/module/EmojiDialog.js +0 -254
- package/src/js/module/FindReplace.js +0 -512
- package/src/js/module/Fullscreen.js +0 -80
- package/src/js/module/IconDialog.js +0 -618
- package/src/js/module/ImageCropOverlay.js +0 -586
- package/src/js/module/ImageDialog.js +0 -193
- package/src/js/module/ImageResizer.js +0 -42
- package/src/js/module/ImageTooltip.js +0 -285
- package/src/js/module/LinkDialog.js +0 -145
- package/src/js/module/LinkTooltip.js +0 -250
- package/src/js/module/MarkdownShortcuts.js +0 -250
- package/src/js/module/Mention.js +0 -365
- package/src/js/module/Placeholder.js +0 -51
- package/src/js/module/ShortcutsDialog.js +0 -111
- package/src/js/module/SlashMenu.js +0 -376
- package/src/js/module/Statusbar.js +0 -246
- package/src/js/module/TableTooltip.js +0 -1392
- package/src/js/module/Toolbar.js +0 -855
- package/src/js/module/VideoDialog.js +0 -193
- package/src/js/module/VideoResizer.js +0 -66
- package/src/js/module/VideoTooltip.js +0 -248
- package/src/js/module/emoji-data.js +0 -496
- package/src/js/module/table-grid.js +0 -102
- package/src/js/module/table-icons.js +0 -33
- package/src/js/renderer.js +0 -120
- package/src/js/settings.js +0 -214
- package/src/styles/_variables.scss +0 -48
- package/src/styles/autumnnote.scss +0 -2877
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* table-icons.js - Inline SVG glyphs for the table tooltip's action bar.
|
|
3
|
-
*
|
|
4
|
-
* Kept out of TableTooltip.js because the markup is ~9 KB of static data that
|
|
5
|
-
* obscures the module's actual logic; nothing here has behaviour.
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
export const ICONS = {
|
|
9
|
-
rowAbove: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="1"/><line x1="3" y1="12" x2="21" y2="12"/><path d="M12 3v7"/><path d="M9 7l3-4 3 4"/></svg>`,
|
|
10
|
-
rowBelow: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="1"/><line x1="3" y1="12" x2="21" y2="12"/><path d="M12 12v7"/><path d="M9 17l3 4 3-4"/></svg>`,
|
|
11
|
-
deleteRow: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="1"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="15" y1="15" x2="21" y2="21"/><line x1="21" y1="15" x2="15" y2="21"/></svg>`,
|
|
12
|
-
colLeft: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="1"/><line x1="12" y1="3" x2="12" y2="21"/><path d="M3 12h7"/><path d="M7 8l-4 4 4 4"/></svg>`,
|
|
13
|
-
colRight: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="1"/><line x1="12" y1="3" x2="12" y2="21"/><path d="M12 12h9"/><path d="M17 8l4 4-4 4"/></svg>`,
|
|
14
|
-
deleteCol: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="1"/><line x1="12" y1="3" x2="12" y2="21"/><line x1="15" y1="6" x2="21" y2="12"/><line x1="21" y1="6" x2="15" y2="12"/></svg>`,
|
|
15
|
-
mergeCells: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="8" height="10" rx="1"/><rect x="14" y="7" width="8" height="10" rx="1"/><path d="M10 12h4"/><path d="M12 10l2 2-2 2"/></svg>`,
|
|
16
|
-
unmergeCells: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="1"/><line x1="12" y1="5" x2="12" y2="19" stroke-dasharray="2.5 2"/><line x1="2" y1="12" x2="22" y2="12" stroke-dasharray="2.5 2"/><path d="M9 9 L6 12 L9 15"/><path d="M15 9 L18 12 L15 15"/></svg>`,
|
|
17
|
-
colWidth: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="4" x2="7" y2="20"/><line x1="17" y1="4" x2="17" y2="20"/><line x1="7" y1="12" x2="17" y2="12"/><path d="M10 9l-3 3 3 3"/><path d="M14 9l3 3-3 3"/></svg>`,
|
|
18
|
-
rowHeight: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="17" x2="20" y2="17"/><line x1="12" y1="7" x2="12" y2="17"/><path d="M9 10l3-3 3 3"/><path d="M9 14l3 3 3-3"/></svg>`,
|
|
19
|
-
tableBorder: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6" stroke-width="1"/><line x1="3" y1="13" x2="21" y2="13" stroke-width="2"/><line x1="3" y1="20" x2="21" y2="20" stroke-width="3"/></svg>`,
|
|
20
|
-
deleteTable: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="1"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/><line x1="16" y1="16" x2="22" y2="22" stroke="#ef4444"/><line x1="22" y1="16" x2="16" y2="22" stroke="#ef4444"/></svg>`,
|
|
21
|
-
selectCells: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4 L4 20 L9 15 L12 21 L14 20 L11 14 L17 14 Z" fill="currentColor" opacity="0.15"/><path d="M4 4 L4 20 L9 15 L12 21 L14 20 L11 14 L17 14 Z"/></svg>`,
|
|
22
|
-
cellShade: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 11L8.93 3.36a1 1 0 0 0-1.29.08L3.22 7.8a1 1 0 0 0-.07 1.29L11 20"/><path d="m5 14 5-5"/><path d="M22 22a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2c0-1.5 2.5-5 3.5-5s3.5 3.5 3.5 5z"/></svg>`,
|
|
23
|
-
borderColor: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="14" rx="1"/><line x1="3" y1="10" x2="21" y2="10" stroke-width="1.5"/><line x1="12" y1="3" x2="12" y2="17" stroke-width="1.5"/><path d="M3 21h18" stroke-width="3"/></svg>`,
|
|
24
|
-
alignLeft: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" y1="6" x2="3" y2="6"/><line x1="15" y1="12" x2="3" y2="12"/><line x1="17" y1="18" x2="3" y2="18"/></svg>`,
|
|
25
|
-
alignCenter: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" y1="6" x2="3" y2="6"/><line x1="17" y1="12" x2="7" y2="12"/><line x1="19" y1="18" x2="5" y2="18"/></svg>`,
|
|
26
|
-
alignRight: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" y1="6" x2="3" y2="6"/><line x1="21" y1="12" x2="9" y2="12"/><line x1="21" y1="18" x2="7" y2="18"/></svg>`,
|
|
27
|
-
alignJustify: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" y1="6" x2="3" y2="6"/><line x1="21" y1="12" x2="3" y2="12"/><line x1="21" y1="18" x2="3" y2="18"/></svg>`,
|
|
28
|
-
headerRow: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="1"/><rect x="3" y="3" width="18" height="8" rx="1" fill="currentColor" opacity="0.2"/><line x1="3" y1="11" x2="21" y2="11"/><line x1="3" y1="16" x2="21" y2="16"/><line x1="9" y1="11" x2="9" y2="21"/><line x1="15" y1="11" x2="15" y2="21"/></svg>`,
|
|
29
|
-
sortAsc: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="6" x2="11" y2="6"/><line x1="4" y1="12" x2="11" y2="12"/><line x1="4" y1="18" x2="13" y2="18"/><path d="M15 9l3-3 3 3"/><line x1="18" y1="6" x2="18" y2="18"/></svg>`,
|
|
30
|
-
sortDesc: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="6" x2="13" y2="6"/><line x1="4" y1="12" x2="11" y2="12"/><line x1="4" y1="18" x2="11" y2="18"/><path d="M15 15l3 3 3-3"/><line x1="18" y1="6" x2="18" y2="18"/></svg>`,
|
|
31
|
-
exportCSV: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>`,
|
|
32
|
-
cellPadding: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="1"/><rect x="7" y="7" width="10" height="10" rx="0.5" stroke-dasharray="2 1.5"/></svg>`,
|
|
33
|
-
};
|
package/src/js/renderer.js
DELETED
|
@@ -1,120 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* renderer.js - Builds the editor DOM structure
|
|
3
|
-
* Inspired by Summernote's renderer.js
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import { createElement } from './core/dom.js';
|
|
7
|
-
import { sanitiseHTML } from './core/sanitise.js';
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* Renders the editor layout around the original element.
|
|
11
|
-
*
|
|
12
|
-
* Structure:
|
|
13
|
-
* <div class="an-container">
|
|
14
|
-
* <div class="an-toolbar">...</div>
|
|
15
|
-
* <div class="an-editable" contenteditable="true">...</div>
|
|
16
|
-
* <div class="an-statusbar">...</div>
|
|
17
|
-
* </div>
|
|
18
|
-
*
|
|
19
|
-
* @param {HTMLElement} targetEl - the original element to replace/wrap
|
|
20
|
-
* @param {import('./settings.js').AsnOptions} options
|
|
21
|
-
* @returns {{ container: HTMLElement, editable: HTMLElement }}
|
|
22
|
-
*/
|
|
23
|
-
export function renderLayout(targetEl, options) {
|
|
24
|
-
const container = createElement('div', { class: 'an-container' });
|
|
25
|
-
|
|
26
|
-
// Editable area
|
|
27
|
-
const editable = createElement('div', {
|
|
28
|
-
class: 'an-editable',
|
|
29
|
-
contenteditable: options.readOnly ? 'false' : 'true',
|
|
30
|
-
spellcheck: String(options.spellcheck !== false),
|
|
31
|
-
'aria-multiline': 'true',
|
|
32
|
-
'aria-label': 'Rich text editor',
|
|
33
|
-
role: 'textbox',
|
|
34
|
-
});
|
|
35
|
-
|
|
36
|
-
// Restore auto-saved content when available; fall back to element content
|
|
37
|
-
let initialContent = '';
|
|
38
|
-
if (options.autoSave && options.autoSaveKey) {
|
|
39
|
-
try { initialContent = localStorage.getItem(options.autoSaveKey) || ''; } catch (_) { void _; }
|
|
40
|
-
}
|
|
41
|
-
if (!initialContent) {
|
|
42
|
-
initialContent = targetEl.tagName === 'TEXTAREA'
|
|
43
|
-
? ((/** @type {HTMLTextAreaElement} */ (targetEl)).value || '').trim()
|
|
44
|
-
: (targetEl.innerHTML || '').trim();
|
|
45
|
-
}
|
|
46
|
-
editable.innerHTML = sanitiseHTML(initialContent, { allowIframes: true });
|
|
47
|
-
|
|
48
|
-
// Apply default font family so the editable renders in the configured font
|
|
49
|
-
const defaultFont = options.defaultFontFamily || options.fontFamilies?.[0];
|
|
50
|
-
if (defaultFont) {
|
|
51
|
-
editable.style.fontFamily = defaultFont;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
// Apply default font size so the size dropdown shows the correct value on startup
|
|
55
|
-
if (options.defaultFontSize) {
|
|
56
|
-
editable.style.fontSize = options.defaultFontSize;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
// Apply height options.
|
|
60
|
-
// `height` sets the initial visible height (takes priority).
|
|
61
|
-
// `minHeight` is the drag-resize floor — only applied when no explicit `height` is given.
|
|
62
|
-
if (options.height) {
|
|
63
|
-
editable.style.minHeight = `${options.height}px`;
|
|
64
|
-
} else if (options.minHeight) {
|
|
65
|
-
editable.style.minHeight = `${options.minHeight}px`;
|
|
66
|
-
}
|
|
67
|
-
if (options.maxHeight) {
|
|
68
|
-
editable.style.maxHeight = `${options.maxHeight}px`;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
container.appendChild(editable);
|
|
72
|
-
|
|
73
|
-
// Apply theme — also add to body so floating elements (dialogs, tooltips,
|
|
74
|
-
// popovers) appended to document.body inherit the CSS rules.
|
|
75
|
-
if (options.theme === 'dark') {
|
|
76
|
-
container.classList.add('an-theme-dark');
|
|
77
|
-
document.body.classList.add('an-theme-dark');
|
|
78
|
-
} else if (options.theme === 'auto') {
|
|
79
|
-
container.classList.add('an-theme-auto');
|
|
80
|
-
document.body.classList.add('an-theme-auto');
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
// Read-only mode
|
|
84
|
-
if (options.readOnly) {
|
|
85
|
-
container.classList.add('an-disabled');
|
|
86
|
-
editable.querySelectorAll('ul.an-checklist input[type="checkbox"]').forEach((cb) => {
|
|
87
|
-
cb.setAttribute('disabled', '');
|
|
88
|
-
});
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
// Text direction
|
|
92
|
-
if (options.direction === 'rtl') {
|
|
93
|
-
editable.setAttribute('dir', 'rtl');
|
|
94
|
-
container.classList.add('an-dir-rtl');
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
// Toolbar overflow
|
|
98
|
-
if (options.toolbarOverflow === 'scroll') {
|
|
99
|
-
container.classList.add('an-toolbar-overflow-scroll');
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
// Configure sticky toolbar
|
|
103
|
-
if (options.stickyToolbar) {
|
|
104
|
-
container.classList.add('an-sticky-toolbar');
|
|
105
|
-
if (options.stickyToolbarOffset) {
|
|
106
|
-
container.style.setProperty('--an-sticky-top', `${options.stickyToolbarOffset}px`);
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
// Custom focus ring colour
|
|
111
|
-
if (options.focusColor) {
|
|
112
|
-
container.style.setProperty('--an-focus-color', options.focusColor);
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
// Hide the original element; keep it in DOM for form submission
|
|
116
|
-
targetEl.style.display = 'none';
|
|
117
|
-
targetEl.after(container);
|
|
118
|
-
|
|
119
|
-
return { container, editable };
|
|
120
|
-
}
|
package/src/js/settings.js
DELETED
|
@@ -1,214 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* settings.js - Default editor options
|
|
3
|
-
* Inspired by Summernote's settings.js
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import { defaultToolbar } from './module/Buttons.js';
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* @typedef {object} AsnOptions
|
|
10
|
-
* @property {string} [placeholder] - Placeholder text when editor is empty
|
|
11
|
-
* @property {number} [height] - Editor height in px (min)
|
|
12
|
-
* @property {number} [minHeight] - Minimum height in px
|
|
13
|
-
* @property {number} [maxHeight] - Maximum height in px (0 = unlimited)
|
|
14
|
-
* @property {boolean} [focus] - Auto-focus on init
|
|
15
|
-
* @property {boolean} [resizable] - Show resize handle
|
|
16
|
-
* @property {Array} [toolbar] - Toolbar button group config
|
|
17
|
-
* @property {boolean} [useBootstrap] - Use Bootstrap button classes on toolbar buttons
|
|
18
|
-
* @property {string} [toolbarButtonClass] - CSS classes for Bootstrap toolbar buttons
|
|
19
|
-
* @property {boolean} [useFontAwesome] - Use Font Awesome icons (default: true)
|
|
20
|
-
* @property {string} [fontAwesomeClass] - Font Awesome prefix class, e.g. 'fas' or 'fa-solid'
|
|
21
|
-
* @property {boolean} [pasteAsPlainText] - Force plain-text paste
|
|
22
|
-
* @property {boolean} [pasteCleanHTML] - Sanitise HTML on paste
|
|
23
|
-
* @property {boolean} [pasteStripAttributes] - Strip class/style/data-* from pasted HTML (default: false)
|
|
24
|
-
* @property {boolean} [allowImageUpload] - Allow file upload in image dialog
|
|
25
|
-
* @property {number} [maxImageSize] - Max upload size in MB
|
|
26
|
-
* @property {number} [tabSize] - Spaces per tab in non-list context
|
|
27
|
-
* @property {number} [historyLimit] - Maximum undo/redo history steps
|
|
28
|
-
* @property {number} [historyMaxBytes] - Maximum combined size (chars) of all stacked undo/redo snapshots
|
|
29
|
-
* @property {string} [defaultFontFamily] - Default font family applied to the editable area on init
|
|
30
|
-
* @property {string} [defaultFontSize] - Default font size applied to the editable area on init (e.g. '14px')
|
|
31
|
-
* @property {string[]} [fontFamilies] - Font families shown in the font-family toolbar dropdown
|
|
32
|
-
* @property {Function} [onChange] - Callback on content change
|
|
33
|
-
* @property {Function} [onFocus] - Callback on focus
|
|
34
|
-
* @property {Function} [onBlur] - Callback on blur
|
|
35
|
-
* @property {Function} [onInit] - Callback after the editor has initialised
|
|
36
|
-
* @property {Function} [onImageUpload] - Custom upload handler: (files) => void
|
|
37
|
-
* @property {Function} [onImageError] - Callback when an image upload error occurs
|
|
38
|
-
* @property {boolean} [stickyToolbar] - Stick the toolbar to the viewport top when scrolling
|
|
39
|
-
* @property {number} [stickyToolbarOffset] - Top offset in px for sticky toolbar (e.g. fixed nav height)
|
|
40
|
-
* @property {string} [theme] - 'light' (default) | 'dark'
|
|
41
|
-
* @property {boolean} [codeHighlight] - Auto-load Prism.js for syntax highlighting of code blocks
|
|
42
|
-
* @property {string} [codeHighlightCDN] - CDN base URL for Prism assets (defaults to cdnjs)
|
|
43
|
-
* @property {boolean} [markdownPaste] - Convert pasted Markdown text to HTML (default: true)
|
|
44
|
-
* @property {boolean} [readOnly] - Start editor in read-only / non-editable mode
|
|
45
|
-
* @property {boolean} [spellcheck] - Enable browser spellcheck in the editable area (default: true)
|
|
46
|
-
* @property {string} [direction] - Text direction: 'ltr' (default) | 'rtl'
|
|
47
|
-
* @property {string} [toolbarOverflow] - Toolbar overflow strategy: 'wrap' (default) | 'scroll'
|
|
48
|
-
* @property {boolean} [autoSave] - Auto-save content to localStorage on change
|
|
49
|
-
* @property {string} [autoSaveKey] - localStorage key used for auto-save (default: 'autumnnote-autosave')
|
|
50
|
-
* @property {number} [autoSaveDelay] - Debounce delay for auto-save writes in milliseconds
|
|
51
|
-
* @property {object|null} [autoSaveAdapter] - Optional async persistence adapter with save/load/remove methods
|
|
52
|
-
* @property {number} [maxChars] - Maximum character count (0 = unlimited). Shows warning in statusbar.
|
|
53
|
-
* @property {number} [maxWords] - Maximum word count (0 = unlimited). Shows warning in statusbar.
|
|
54
|
-
* @property {boolean} [tableHeaderRow] - Insert a header row (<thead><th>) when creating tables
|
|
55
|
-
* @property {Function} [onPaste] - Callback fired on every paste: ({ text, html }) => void
|
|
56
|
-
* @property {Function} [onPasteError] - Callback fired when pasted or dropped content cannot be processed
|
|
57
|
-
* @property {Function} [onSelectionChange] - Callback fired on cursor/selection change: (context) => void
|
|
58
|
-
* @property {string[]} [colorSwatches] - Custom brand colour swatches prepended to the colour-picker palette
|
|
59
|
-
* @property {Function} [onDestroy] - Callback fired when the editor is destroyed: (context) => void
|
|
60
|
-
* @property {Function} [onCharLimitReached] - Callback fired when the character limit is hit: (context) => void
|
|
61
|
-
* @property {Function} [onWordLimitReached] - Callback fired when the word limit is hit: (context) => void
|
|
62
|
-
* @property {string} [focusColor] - Custom focus ring colour, e.g. '#f97316'. Overrides the default blue.
|
|
63
|
-
* @property {boolean} [autoSaveRestore] - Show a restore banner when a previously auto-saved draft exists
|
|
64
|
-
* @property {number} [autoSaveRestoreTimeout] - Maximum age in days for a draft to be offered for restore (0 = no expiry)
|
|
65
|
-
* @property {Function} [onAutoSaveRestore] - Callback fired after the user chooses to restore a draft
|
|
66
|
-
* @property {boolean} [markdownShortcuts] - Convert markdown syntax typed inline to HTML
|
|
67
|
-
* @property {boolean} [bubbleToolbar] - Show a mini floating toolbar above text selections
|
|
68
|
-
* @property {string[]} [bubbleToolbarItems] - Button names for the bubble toolbar
|
|
69
|
-
* @property {object|null} [mention] - @mention configuration (onSearch, minChars, ...)
|
|
70
|
-
* @property {boolean} [slashMenu] - Show a "/" command palette for quick block insertion (default true)
|
|
71
|
-
* @property {string} [lang] - Display language or partial locale object override
|
|
72
|
-
*/
|
|
73
|
-
|
|
74
|
-
export const defaultOptions = {
|
|
75
|
-
placeholder: '',
|
|
76
|
-
height: 200,
|
|
77
|
-
minHeight: 100,
|
|
78
|
-
maxHeight: 0,
|
|
79
|
-
focus: false,
|
|
80
|
-
resizable: true,
|
|
81
|
-
toolbar: defaultToolbar,
|
|
82
|
-
// UI integration options
|
|
83
|
-
// If `useBootstrap` is true, toolbar buttons will use the Bootstrap button classes
|
|
84
|
-
// (set `toolbarButtonClass` to customize). Works with Bootstrap 4 and 5.
|
|
85
|
-
useBootstrap: false,
|
|
86
|
-
toolbarButtonClass: 'btn btn-sm btn-light',
|
|
87
|
-
// Icon options — uses Font Awesome by default. Consumers must include Font Awesome CSS.
|
|
88
|
-
useFontAwesome: true,
|
|
89
|
-
// Default FontAwesome prefix — 'fas' for FA5, 'fa-solid' for FA6. Change if needed.
|
|
90
|
-
fontAwesomeClass: 'fas',
|
|
91
|
-
pasteAsPlainText: false,
|
|
92
|
-
pasteCleanHTML: true,
|
|
93
|
-
pasteStripAttributes: false,
|
|
94
|
-
allowImageUpload: true,
|
|
95
|
-
maxImageSize: 5,
|
|
96
|
-
tabSize: 4,
|
|
97
|
-
onChange: null,
|
|
98
|
-
onFocus: null,
|
|
99
|
-
onBlur: null,
|
|
100
|
-
onInit: null,
|
|
101
|
-
onImageUpload: null,
|
|
102
|
-
onImageError: null,
|
|
103
|
-
stickyToolbar: false,
|
|
104
|
-
stickyToolbarOffset: 0,
|
|
105
|
-
theme: 'light',
|
|
106
|
-
codeHighlight: true,
|
|
107
|
-
codeHighlightCDN: 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0',
|
|
108
|
-
markdownPaste: true,
|
|
109
|
-
historyLimit: 100,
|
|
110
|
-
// Max combined size (chars) of all stacked undo/redo snapshots. Guards
|
|
111
|
-
// against documents with many large embedded images holding dozens of
|
|
112
|
-
// full-size copies in memory despite historyLimit.
|
|
113
|
-
historyMaxBytes: 10 * 1024 * 1024,
|
|
114
|
-
// Default font family applied to the editor and shown in the dropdown when no explicit font is set
|
|
115
|
-
defaultFontFamily: 'Arial',
|
|
116
|
-
// Default font size applied to the editor and shown in the size dropdown when no explicit size is set
|
|
117
|
-
defaultFontSize: '14px',
|
|
118
|
-
// Font families shown in the toolbar font-family dropdown
|
|
119
|
-
fontFamilies: [
|
|
120
|
-
'Arial',
|
|
121
|
-
'Arial Black',
|
|
122
|
-
'Comic Sans MS',
|
|
123
|
-
'Courier New',
|
|
124
|
-
'Georgia',
|
|
125
|
-
'Impact',
|
|
126
|
-
'Tahoma',
|
|
127
|
-
'Times New Roman',
|
|
128
|
-
'Trebuchet MS',
|
|
129
|
-
'Verdana',
|
|
130
|
-
],
|
|
131
|
-
// Read-only mode — disables all editing when true
|
|
132
|
-
readOnly: false,
|
|
133
|
-
// Enable/disable browser spell-check on the editable area
|
|
134
|
-
spellcheck: true,
|
|
135
|
-
// Text direction: 'ltr' (default) or 'rtl'
|
|
136
|
-
direction: 'ltr',
|
|
137
|
-
// How the toolbar handles overflow: 'wrap' (default, wraps to next line) or 'scroll' (single scrollable row)
|
|
138
|
-
toolbarOverflow: 'wrap',
|
|
139
|
-
// Auto-save content to localStorage on every change
|
|
140
|
-
autoSave: false,
|
|
141
|
-
// localStorage key used when autoSave is enabled
|
|
142
|
-
autoSaveKey: 'autumnnote-autosave',
|
|
143
|
-
autoSaveDelay: 400,
|
|
144
|
-
autoSaveAdapter: null,
|
|
145
|
-
// Maximum character count (0 = unlimited)
|
|
146
|
-
maxChars: 0,
|
|
147
|
-
// Maximum word count (0 = unlimited)
|
|
148
|
-
maxWords: 0,
|
|
149
|
-
// Insert a header row (<thead>) when creating new tables
|
|
150
|
-
tableHeaderRow: false,
|
|
151
|
-
// Callback fired on every cursor/selection change inside the editor
|
|
152
|
-
onSelectionChange: null,
|
|
153
|
-
// Custom brand colour swatches to prepend to the toolbar colour-picker palette
|
|
154
|
-
colorSwatches: [],
|
|
155
|
-
// Callback fired after a paste event: function({ text, html })
|
|
156
|
-
onPaste: null,
|
|
157
|
-
// Callback fired for rejected/failed paste and drop payloads: function({ message, size?, maxBytes? })
|
|
158
|
-
onPasteError: null,
|
|
159
|
-
// Callback fired just before the editor instance is destroyed
|
|
160
|
-
onDestroy: null,
|
|
161
|
-
// Callback fired when the character limit is reached: function(context)
|
|
162
|
-
onCharLimitReached: null,
|
|
163
|
-
// Callback fired when the word limit is reached: function(context)
|
|
164
|
-
onWordLimitReached: null,
|
|
165
|
-
// Custom focus ring colour — overrides the default blue when set.
|
|
166
|
-
// Accepts any valid CSS colour string, e.g. '#f97316', 'hsl(25,90%,55%)'.
|
|
167
|
-
focusColor: null,
|
|
168
|
-
// Display language for the editor UI.
|
|
169
|
-
// Built-in values: 'en' (default), 'vi', 'ja', 'zh', 'fr', 'de', 'es', 'ko'.
|
|
170
|
-
// Pass a partial or full locale object to override individual strings.
|
|
171
|
-
lang: 'en',
|
|
172
|
-
|
|
173
|
-
// Auto-save restore: show a banner when a draft exists in localStorage.
|
|
174
|
-
// Requires autoSave: true. Set autoSaveRestoreTimeout to the max age in days
|
|
175
|
-
// (0 = no expiry). onAutoSaveRestore(html, context) fires after restore.
|
|
176
|
-
autoSaveRestore: false,
|
|
177
|
-
autoSaveRestoreTimeout: 7,
|
|
178
|
-
onAutoSaveRestore: null,
|
|
179
|
-
|
|
180
|
-
// Markdown input shortcuts: convert markdown syntax typed inline to HTML.
|
|
181
|
-
// e.g. "## " at line start → <h2>, "**bold**" → <strong>
|
|
182
|
-
markdownShortcuts: true,
|
|
183
|
-
|
|
184
|
-
// "/" command palette for quick block insertion (headings, lists, table, image, ...).
|
|
185
|
-
// Triggers only when "/" is the first character typed on an otherwise-empty line.
|
|
186
|
-
slashMenu: true,
|
|
187
|
-
// Additional slash-menu commands supplied by applications/plugins.
|
|
188
|
-
slashCommands: [],
|
|
189
|
-
|
|
190
|
-
// Optional import/export adapters keyed by format name.
|
|
191
|
-
documentAdapters: {},
|
|
192
|
-
// Optional collaboration bridge notified with local HTML changes.
|
|
193
|
-
collaborationAdapter: null,
|
|
194
|
-
|
|
195
|
-
// Optional image processor (for example a Web Worker bridge). Receives a
|
|
196
|
-
// File and returns a data URL; Clipboard's canvas pipeline remains fallback.
|
|
197
|
-
imageProcessor: null,
|
|
198
|
-
// Add stable data-an-block-id attributes to top-level document blocks.
|
|
199
|
-
blockIds: false,
|
|
200
|
-
|
|
201
|
-
// Maximum paste size in bytes (default 5 MB). Pastes larger than this are silently dropped.
|
|
202
|
-
maxPasteSize: 5 * 1024 * 1024,
|
|
203
|
-
// Minimum image dimension in px during resize (width and height). Prevents images from being
|
|
204
|
-
// resized below this value.
|
|
205
|
-
minImageSize: 20,
|
|
206
|
-
|
|
207
|
-
// Bubble toolbar: show a mini floating toolbar above text selections.
|
|
208
|
-
bubbleToolbar: false,
|
|
209
|
-
bubbleToolbarItems: ['bold', 'italic', 'underline', 'link', 'foreColor', 'hiliteColor', 'removeFormat'],
|
|
210
|
-
|
|
211
|
-
// @mention support. mention.onSearch(query, callback) must be provided to activate.
|
|
212
|
-
// mention.minChars defaults to 0 — dropdown opens immediately on trigger character.
|
|
213
|
-
mention: null,
|
|
214
|
-
};
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
// AutumnNote — SCSS variables
|
|
2
|
-
// Inspired by Summernote's variables
|
|
3
|
-
|
|
4
|
-
// Colors
|
|
5
|
-
$an-primary: #3b82f6 !default; // blue-500
|
|
6
|
-
$an-primary-hover: #2563eb !default; // blue-600
|
|
7
|
-
$an-border: #d1d5db !default; // gray-300
|
|
8
|
-
$an-bg: #ffffff !default;
|
|
9
|
-
$an-bg-toolbar: #f9fafb !default; // gray-50
|
|
10
|
-
$an-bg-btn-hover: #f3f4f6 !default; // gray-100
|
|
11
|
-
$an-bg-btn-active: #dbeafe !default; // blue-100
|
|
12
|
-
$an-text: #111827 !default; // gray-900
|
|
13
|
-
$an-muted: #6b7280 !default; // gray-500
|
|
14
|
-
$an-statusbar-bg: #f9fafb !default;
|
|
15
|
-
|
|
16
|
-
// Dark theme color overrides (applied via .an-theme-dark on .an-container)
|
|
17
|
-
$an-dark-bg: #1e1e2e !default;
|
|
18
|
-
$an-dark-bg-toolbar: #181825 !default;
|
|
19
|
-
$an-dark-bg-btn-hover: #313244 !default;
|
|
20
|
-
$an-dark-bg-btn-active: #1e3a5f !default;
|
|
21
|
-
$an-dark-border: #45475a !default;
|
|
22
|
-
$an-dark-text: #cdd6f4 !default;
|
|
23
|
-
$an-dark-muted: #6c7086 !default;
|
|
24
|
-
$an-dark-statusbar-bg: #181825 !default;
|
|
25
|
-
|
|
26
|
-
// Fonts
|
|
27
|
-
$an-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !default;
|
|
28
|
-
$an-font-size: 14px !default;
|
|
29
|
-
$an-line-height: 1.6 !default;
|
|
30
|
-
|
|
31
|
-
// Sizing
|
|
32
|
-
$an-radius: 6px !default;
|
|
33
|
-
$an-radius-sm: 4px !default;
|
|
34
|
-
$an-btn-height: 30px !default;
|
|
35
|
-
$an-btn-padding: 0 8px !default;
|
|
36
|
-
$an-toolbar-gap: 4px !default;
|
|
37
|
-
$an-toolbar-pad: 6px 8px !default;
|
|
38
|
-
$an-editable-pad: 12px 14px !default;
|
|
39
|
-
$an-statusbar-h: 24px !default;
|
|
40
|
-
|
|
41
|
-
// Dialog
|
|
42
|
-
$an-dialog-z: 9999 !default;
|
|
43
|
-
$an-dialog-bg: rgba(0, 0, 0, 0.45) !default;
|
|
44
|
-
$an-dialog-width: 420px !default;
|
|
45
|
-
$an-dialog-radius: 8px !default;
|
|
46
|
-
|
|
47
|
-
// Transitions
|
|
48
|
-
$an-transition: 0.15s ease !default;
|