Merge pull request #243 from gamosoft/features/callouts
Features/callouts
This commit is contained in:
Guillermo Villar
GitHub
commit
40797ac457
|
|
@ -528,6 +528,34 @@ def generate_export_html(
|
|||
color: var(--text-secondary, #6a737d);
|
||||
}}
|
||||
|
||||
/* Callouts — mirror the in-app preview. */
|
||||
.markdown-preview .callout {{
|
||||
margin: 1rem 0;
|
||||
padding: 0.75rem 1rem;
|
||||
border-left: 4px solid var(--callout-color, var(--accent-primary, #0366d6));
|
||||
border-radius: 0.375rem;
|
||||
background: var(--callout-bg, var(--bg-secondary, #f6f8fa));
|
||||
}}
|
||||
.markdown-preview .callout-title {{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--callout-color, var(--accent-primary, #0366d6));
|
||||
margin-bottom: 0.25rem;
|
||||
}}
|
||||
.markdown-preview .callout-icon {{
|
||||
font-size: 1.1em;
|
||||
line-height: 1;
|
||||
}}
|
||||
.markdown-preview .callout-body > :first-child {{ margin-top: 0; }}
|
||||
.markdown-preview .callout-body > :last-child {{ margin-bottom: 0; }}
|
||||
.markdown-preview .callout-note {{ --callout-color: #0969da; --callout-bg: rgba(9, 105, 218, 0.08); }}
|
||||
.markdown-preview .callout-tip {{ --callout-color: #1a7f37; --callout-bg: rgba(26, 127, 55, 0.08); }}
|
||||
.markdown-preview .callout-important {{ --callout-color: #8250df; --callout-bg: rgba(130, 80, 223, 0.08); }}
|
||||
.markdown-preview .callout-warning {{ --callout-color: #9a6700; --callout-bg: rgba(154, 103, 0, 0.08); }}
|
||||
.markdown-preview .callout-caution {{ --callout-color: #d1242f; --callout-bg: rgba(209, 36, 47, 0.08); }}
|
||||
|
||||
.markdown-preview ul,
|
||||
.markdown-preview ol {{
|
||||
padding-left: 2em;
|
||||
|
|
@ -767,9 +795,52 @@ def generate_export_html(
|
|||
// Raw markdown content
|
||||
const markdown = `{escaped_content}`;
|
||||
|
||||
// GitHub-style callouts — mirrors the in-app preview preprocessor.
|
||||
let processed;
|
||||
{{
|
||||
const CALLOUT_RE = /^>\\s*\\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\\]\\s*(.*)$/i;
|
||||
const CALLOUT_ICONS = {{ note: 'ℹ️', tip: '💡', important: '❗', warning: '⚠️', caution: '🛑' }};
|
||||
const CALLOUT_TITLES = {{ note: 'Note', tip: 'Tip', important: 'Important', warning: 'Warning', caution: 'Caution' }};
|
||||
const escapeAttr = (s) => s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
const codeBlocks = [];
|
||||
processed = markdown
|
||||
.replace(/```[\\s\\S]*?```/g, function(m) {{ codeBlocks.push(m); return '\\x00CODEBLOCK' + (codeBlocks.length - 1) + '\\x00'; }})
|
||||
.replace(/`[^`]+`/g, function(m) {{ codeBlocks.push(m); return '\\x00CODEBLOCK' + (codeBlocks.length - 1) + '\\x00'; }});
|
||||
const srcLines = processed.split('\\n');
|
||||
const outLines = [];
|
||||
let li = 0;
|
||||
while (li < srcLines.length) {{
|
||||
const m = srcLines[li].match(CALLOUT_RE);
|
||||
if (!m) {{ outLines.push(srcLines[li]); li++; continue; }}
|
||||
const type = m[1].toLowerCase();
|
||||
const title = escapeAttr((m[2] || '').trim() || CALLOUT_TITLES[type]);
|
||||
const icon = CALLOUT_ICONS[type];
|
||||
const bodyLines = [];
|
||||
li++;
|
||||
while (li < srcLines.length && srcLines[li].startsWith('>')) {{
|
||||
bodyLines.push(srcLines[li].replace(/^>\\s?/, ''));
|
||||
li++;
|
||||
}}
|
||||
outLines.push(
|
||||
'',
|
||||
'<div class="callout callout-' + type + '">',
|
||||
'<div class="callout-title"><span class="callout-icon" aria-hidden="true">' + icon + '</span><span class="callout-title-text">' + title + '</span></div>',
|
||||
'<div class="callout-body">',
|
||||
'',
|
||||
bodyLines.join('\\n'),
|
||||
'',
|
||||
'</div>',
|
||||
'</div>',
|
||||
''
|
||||
);
|
||||
}}
|
||||
processed = outLines.join('\\n')
|
||||
.replace(/\\x00CODEBLOCK(\\d+)\\x00/g, function(_, idx) {{ return codeBlocks[parseInt(idx)]; }});
|
||||
}}
|
||||
|
||||
// Render markdown with XSS sanitization
|
||||
// DOMPurify strips scripts, iframes, and event handlers while allowing safe HTML/SVG
|
||||
const rawHtml = marked.parse(markdown);
|
||||
const rawHtml = marked.parse(processed);
|
||||
const safeHtml = DOMPurify.sanitize(rawHtml);
|
||||
document.getElementById('content').innerHTML = safeHtml;
|
||||
|
||||
|
|
|
|||
|
|
@ -270,6 +270,34 @@ graph TD
|
|||
|
||||
📄 **See the [MERMAID](MERMAID.md) note for diagram examples and syntax reference.**
|
||||
|
||||
## 💬 Callouts / Admonitions
|
||||
|
||||
GitHub-style callouts highlight important information in your notes. They render as colored, bordered blocks in the preview pane and are fully compatible with notes imported from GitHub or Obsidian.
|
||||
|
||||
### Syntax
|
||||
|
||||
Start a blockquote with `> [!TYPE]` on its own line, then continue with the body:
|
||||
|
||||
```markdown
|
||||
> [!NOTE]
|
||||
> Useful information that users should know, even when skimming.
|
||||
|
||||
> [!TIP] Custom title
|
||||
> Helpful advice for doing things better or more easily.
|
||||
```
|
||||
|
||||
The first line can include an optional custom title after the type. Inner markdown (bold, links, lists, code) is fully parsed.
|
||||
|
||||
### Supported Types
|
||||
|
||||
- `[!NOTE]` - General information (blue)
|
||||
- `[!TIP]` - Helpful advice (green)
|
||||
- `[!IMPORTANT]` - Crucial information (purple)
|
||||
- `[!WARNING]` - Urgent caution required (amber)
|
||||
- `[!CAUTION]` - Negative consequences if ignored (red)
|
||||
|
||||
Unknown types fall through to a normal blockquote, so existing notes are never broken.
|
||||
|
||||
## 📄 Note Templates
|
||||
|
||||
Create notes from reusable templates with dynamic placeholder replacement.
|
||||
|
|
|
|||
|
|
@ -5190,6 +5190,21 @@ function noteApp() {
|
|||
},
|
||||
|
||||
// Markdown formatting helpers
|
||||
// Trim trailing whitespace from double-click word selections.
|
||||
// No-op on browsers that already exclude it (Firefox, Safari).
|
||||
trimSelectionTrailingSpace(event) {
|
||||
const editor = event && event.target;
|
||||
if (!editor) return;
|
||||
const start = editor.selectionStart;
|
||||
let end = editor.selectionEnd;
|
||||
if (start >= end) return;
|
||||
const text = editor.value;
|
||||
while (end > start && /\s/.test(text.charAt(end - 1))) end--;
|
||||
if (end !== editor.selectionEnd) {
|
||||
editor.setSelectionRange(start, end);
|
||||
}
|
||||
},
|
||||
|
||||
wrapSelection(before, after, placeholder) {
|
||||
const editor = document.getElementById('note-editor');
|
||||
if (!editor) return;
|
||||
|
|
@ -5197,23 +5212,29 @@ function noteApp() {
|
|||
const start = editor.selectionStart;
|
||||
const end = editor.selectionEnd;
|
||||
const selectedText = this.noteContent.substring(start, end);
|
||||
const textToWrap = selectedText || placeholder;
|
||||
|
||||
// Push edge whitespace OUTSIDE inline wrappers — "**house **" is
|
||||
// invalid per CommonMark. Block wrappers (with \n) keep it intact.
|
||||
const isInline = !before.includes('\n') && !after.includes('\n');
|
||||
let leading = '', trailing = '', core = selectedText;
|
||||
if (isInline && selectedText) {
|
||||
const m = selectedText.match(/^(\s*)([\s\S]*?)(\s*)$/);
|
||||
leading = m[1];
|
||||
core = m[2];
|
||||
trailing = m[3];
|
||||
}
|
||||
const textToWrap = core || placeholder;
|
||||
|
||||
// Build the new text
|
||||
const newText = before + textToWrap + after;
|
||||
const newText = leading + before + textToWrap + after + trailing;
|
||||
|
||||
// Update content
|
||||
this.noteContent = this.noteContent.substring(0, start) + newText + this.noteContent.substring(end);
|
||||
|
||||
// Set cursor position (select the wrapped text or placeholder)
|
||||
this.$nextTick(() => {
|
||||
if (selectedText) {
|
||||
// If text was selected, keep it selected (inside the wrapper)
|
||||
editor.setSelectionRange(start + before.length, start + before.length + selectedText.length);
|
||||
} else {
|
||||
// If no text selected, select the placeholder
|
||||
editor.setSelectionRange(start + before.length, start + before.length + placeholder.length);
|
||||
}
|
||||
const coreStart = start + leading.length + before.length;
|
||||
const coreEnd = coreStart + textToWrap.length;
|
||||
editor.setSelectionRange(coreStart, coreEnd);
|
||||
editor.focus();
|
||||
});
|
||||
|
||||
|
|
@ -5811,6 +5832,49 @@ function noteApp() {
|
|||
}
|
||||
);
|
||||
|
||||
// Step 2c: GitHub-style callouts. Runs inside the code-protection
|
||||
// window. Unknown types fall through to plain blockquotes.
|
||||
{
|
||||
const CALLOUT_RE = /^>\s*\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*(.*)$/i;
|
||||
const CALLOUT_ICONS = { note: 'ℹ️', tip: '💡', important: '❗', warning: '⚠️', caution: '🛑' };
|
||||
const CALLOUT_TITLES = { note: 'Note', tip: 'Tip', important: 'Important', warning: 'Warning', caution: 'Caution' };
|
||||
const escapeAttr = (s) => s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
|
||||
const srcLines = contentToRender.split('\n');
|
||||
const outLines = [];
|
||||
let li = 0;
|
||||
while (li < srcLines.length) {
|
||||
const m = srcLines[li].match(CALLOUT_RE);
|
||||
if (!m) {
|
||||
outLines.push(srcLines[li]);
|
||||
li++;
|
||||
continue;
|
||||
}
|
||||
const type = m[1].toLowerCase();
|
||||
const title = escapeAttr((m[2] || '').trim() || CALLOUT_TITLES[type]);
|
||||
const icon = CALLOUT_ICONS[type];
|
||||
const bodyLines = [];
|
||||
li++;
|
||||
while (li < srcLines.length && srcLines[li].startsWith('>')) {
|
||||
bodyLines.push(srcLines[li].replace(/^>\s?/, ''));
|
||||
li++;
|
||||
}
|
||||
outLines.push(
|
||||
'',
|
||||
`<div class="callout callout-${type}">`,
|
||||
`<div class="callout-title"><span class="callout-icon" aria-hidden="true">${icon}</span><span class="callout-title-text">${title}</span></div>`,
|
||||
`<div class="callout-body">`,
|
||||
'',
|
||||
bodyLines.join('\n'),
|
||||
'',
|
||||
`</div>`,
|
||||
`</div>`,
|
||||
''
|
||||
);
|
||||
}
|
||||
contentToRender = outLines.join('\n');
|
||||
}
|
||||
|
||||
// Step 3: Restore code blocks
|
||||
contentToRender = contentToRender.replace(/\x00CODEBLOCK(\d+)\x00/g, (match, index) => {
|
||||
return codeBlocks[parseInt(index)];
|
||||
|
|
|
|||
|
|
@ -545,6 +545,34 @@
|
|||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Callouts — GitHub-style admonitions (> [!NOTE], etc.) */
|
||||
.markdown-preview .callout {
|
||||
margin: 1rem 0;
|
||||
padding: 0.75rem 1rem;
|
||||
border-left: 4px solid var(--callout-color, var(--accent-primary));
|
||||
border-radius: 0.375rem;
|
||||
background: var(--callout-bg, var(--bg-secondary));
|
||||
}
|
||||
.markdown-preview .callout-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--callout-color, var(--accent-primary));
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.markdown-preview .callout-icon {
|
||||
font-size: 1.1em;
|
||||
line-height: 1;
|
||||
}
|
||||
.markdown-preview .callout-body > :first-child { margin-top: 0; }
|
||||
.markdown-preview .callout-body > :last-child { margin-bottom: 0; }
|
||||
.markdown-preview .callout-note { --callout-color: #0969da; --callout-bg: rgba(9, 105, 218, 0.08); }
|
||||
.markdown-preview .callout-tip { --callout-color: #1a7f37; --callout-bg: rgba(26, 127, 55, 0.08); }
|
||||
.markdown-preview .callout-important { --callout-color: #8250df; --callout-bg: rgba(130, 80, 223, 0.08); }
|
||||
.markdown-preview .callout-warning { --callout-color: #9a6700; --callout-bg: rgba(154, 103, 0, 0.08); }
|
||||
.markdown-preview .callout-caution { --callout-color: #d1242f; --callout-bg: rgba(209, 36, 47, 0.08); }
|
||||
|
||||
/* Task lists */
|
||||
.markdown-preview input[type="checkbox"] {
|
||||
margin-right: 0.5rem;
|
||||
|
|
@ -3031,6 +3059,7 @@
|
|||
@scroll="syncOverlayScroll()"
|
||||
@keydown.enter="handleEditorEnterKey($event)"
|
||||
@keydown.tab="handleTabKey($event)"
|
||||
@dblclick="trimSelectionTrailingSpace($event)"
|
||||
@drop="onEditorDrop($event)"
|
||||
@dragover.prevent="onEditorDragOver($event)"
|
||||
@dragenter="onEditorDragEnter($event)"
|
||||
|
|
|
|||
Loading…
Reference in New Issue