olivier/monster-menus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update README and main plugin logic for improved menu processing

Browse Source 
- Enhanced README.md with build, development, and testing instructions.
- Refactored main.js to separate menu block processing into a dedicated method.
- Improved error handling during plugin loading.
- Streamlined link processing for internal, external, and file links.
- Added support for multi-line dataview queries.
- Updated manifest.json version to 1.4.
This commit is contained in:
Olivier
2025-12-26 17:07:06 -05:00
parent b20ca4d966
commit aa96902664
4 changed files with 574 additions and 491 deletions
Download Patch File Download Diff File Expand all files Collapse all files

527
main.ts
View File

@@ -1,4 +1,4 @@
import { App, Plugin, PluginSettingTab, Setting, MarkdownRenderer, Platform } from 'obsidian';
import { App, Plugin, PluginSettingTab, Setting, MarkdownRenderer, Platform, MarkdownPostProcessorContext } from 'obsidian';
interface MenuPluginSettings {
mySetting: string;
@@ -12,266 +12,19 @@ export default class MenuPlugin extends Plugin {
settings: MenuPluginSettings;
async onload() {
await this.loadSettings();
try {
await this.loadSettings();
// This adds a settings tab so the user can configure various aspects of the plugin
this.addSettingTab(new MenuPluginSettingTab(this.app, this));
// This adds a settings tab so the user can configure various aspects of the plugin
this.addSettingTab(new MenuPluginSettingTab(this.app, this));
this.registerMarkdownCodeBlockProcessor('menu', (source, el, ctx) => {
const lines = source.trim().split('\n');
let layoutOrClass = '';
let colors: Record<string, string> = {};
const links: string[] = [];
let dataviewQuery = '';
// Parse YAML-like properties and links
for (const line of lines) {
const trimmed = line.trim();
if (trimmed.startsWith('layout:') || trimmed.startsWith('class:')) {
const colonIndex = trimmed.indexOf(':');
layoutOrClass = trimmed.substring(colonIndex + 1).trim();
} else if (trimmed.startsWith('dataview:') || trimmed.startsWith('dv:')) {
const colonIndex = trimmed.indexOf(':');
dataviewQuery = trimmed.substring(colonIndex + 1).trim();
} else if (trimmed.includes(':') && !trimmed.startsWith('[') && !trimmed.startsWith('[[') && !dataviewQuery) {
// Parse color properties
const [key, ...valueParts] = trimmed.split(':');
const value = valueParts.join(':').trim();
if (key && value && !key.includes('//') && !key.includes('http')) {
colors[key.trim()] = value;
}
} else if (trimmed && !trimmed.includes(':') && !dataviewQuery) {
links.push(trimmed);
} else if (trimmed.startsWith('[') && !dataviewQuery) {
links.push(trimmed);
} else if (dataviewQuery) {
// If we already found a dataview start, append subsequent lines to it
// This handles multi-line queries if the user didn't put it all on one line
// But actually, the simple parsing above assumes one line per property.
// For complex queries, we might need a better parser.
// For now, let's assume the query might be multi-line if it started with dv:
// But the loop iterates lines.
// Let's adjust: if we are in "dataview mode", just add to query.
dataviewQuery += '\n' + line;
}
}
// Re-parsing to handle multi-line dataview queries correctly
// The previous loop was a bit naive for multi-line. Let's do a cleaner pass.
layoutOrClass = '';
colors = {};
links.length = 0;
dataviewQuery = '';
let isDataviewBlock = false;
for (const line of lines) {
const trimmed = line.trim();
if (isDataviewBlock) {
dataviewQuery += '\n' + line;
continue;
}
if (trimmed.startsWith('layout:') || trimmed.startsWith('class:')) {
const colonIndex = trimmed.indexOf(':');
layoutOrClass = trimmed.substring(colonIndex + 1).trim();
} else if (trimmed.startsWith('dataview:') || trimmed.startsWith('dv:')) {
const colonIndex = trimmed.indexOf(':');
dataviewQuery = trimmed.substring(colonIndex + 1).trim();
isDataviewBlock = true; // Assume rest of block is the query
} else if (trimmed.includes(':') && !trimmed.startsWith('[') && !trimmed.startsWith('[[')) {
const [key, ...valueParts] = trimmed.split(':');
const value = valueParts.join(':').trim();
if (key && value && !key.includes('//') && !key.includes('http')) {
colors[key.trim()] = value;
}
} else if (trimmed) {
links.push(trimmed);
}
}
// Determine layout and classes
const builtInLayouts = new Set(['default', 'minimal', 'slate', 'horizon', 'aether']);
const container = el.createEl('div', { cls: 'menu-container' });
let selectedLayout = '';
let extraClasses: string[] = [];
if (layoutOrClass) {
const tokens = layoutOrClass.split(/\s+/).filter(Boolean);
if (tokens.length) {
const builtInIndex = tokens.findIndex(t => builtInLayouts.has(t));
if (builtInIndex !== -1) {
selectedLayout = tokens[builtInIndex];
extraClasses = tokens.filter((_, i) => i !== builtInIndex);
} else {
extraClasses = tokens;
}
}
} else {
selectedLayout = 'default';
}
if (selectedLayout) {
container.setAttr('data-layout', selectedLayout);
}
for (const cls of extraClasses) {
container.addClass(cls);
}
// Apply custom properties
if (Object.keys(colors).length > 0) {
const baseKeys = new Set([
'bg', 'text', 'border', 'font',
'hover-text', 'hover-bg', 'hover-border', 'hover-font',
]);
const normalizeKey = (raw: string) => {
let s = raw.trim().toLowerCase();
s = s
.replace(/\btext-hover\b/g, 'hover-text')
.replace(/\bbg-hover\b/g, 'hover-bg')
.replace(/\bborder-hover\b/g, 'hover-border')
.replace(/\binternal-text-hover\b/g, 'internal-hover-text')
.replace(/\binternal-bg-hover\b/g, 'internal-hover-bg')
.replace(/\binternal-border-hover\b/g, 'internal-hover-border')
.replace(/\bexternal-text-hover\b/g, 'external-hover-text')
.replace(/\bexternal-bg-hover\b/g, 'external-hover-bg')
.replace(/\bexternal-border-hover\b/g, 'external-hover-border')
.replace(/\bfile-text-hover\b/g, 'file-hover-text')
.replace(/\bfile-bg-hover\b/g, 'file-hover-bg')
.replace(/\bfile-border-hover\b/g, 'file-hover-border')
.replace(/\baccent\b/g, 'hover-text')
.replace(/\binternal-accent\b/g, 'internal-hover-text')
.replace(/\bexternal-accent\b/g, 'external-hover-text')
.replace(/\bfile-accent\b/g, 'file-hover-text')
.replace(/\bbackground\b/g, 'bg');
return s;
};
const isAllowed = (key: string) => {
if (baseKeys.has(key)) return true;
const m = key.match(/^(internal|external|file)-(.*)$/);
return !!(m && baseKeys.has(m[2]));
};
for (const [rawKey, value] of Object.entries(colors)) {
const key = normalizeKey(rawKey);
if (!isAllowed(key)) continue;
container.style.setProperty(`--${key}`, value);
}
}
const applyInlineBaseStyles = (a: HTMLElement, variant: 'internal' | 'external' | 'file' | 'generic') => {
const prefix = variant === 'generic' ? '' : `${variant}-`;
const get = (k: string) => (colors[`${prefix}${k}`] ?? colors[k]);
const bgVal = get('bg'); if (bgVal) a.style.background = bgVal as string;
const textVal = get('text'); if (textVal) a.style.color = textVal as string;
const borderVal = get('border'); if (borderVal) a.style.borderColor = borderVal as string;
const fontVal = get('font'); if (fontVal) a.style.fontFamily = fontVal as string;
const hoverKeys = ['hover-bg', 'hover-text', 'hover-border', 'hover-font'];
for (const hk of hoverKeys) {
const v = get(hk);
if (v) a.style.setProperty(`--${hk}`, v as string);
}
};
// Process regular links
for (const link of links) {
if (link.startsWith('[[') && link.endsWith(']]')) {
const linkContent = link.slice(2, -2);
let href = linkContent;
let text = linkContent;
if (linkContent.includes('|')) {
[href, text] = linkContent.split('|');
}
const a = container.createEl('a', {
text: text,
attr: { 'data-href': href }
});
a.addClass('menu-internal-link');
if (!selectedLayout) applyInlineBaseStyles(a, 'internal');
a.style.cursor = 'pointer';
a.addEventListener('click', (e) => {
e.preventDefault();
this.app.workspace.openLinkText(href, ctx.sourcePath, false);
});
} else if (link.match(/^\[.*\]\(.*\)$/)) {
const match = link.match(/^\[(.*)\]\((.*)\)$/);
if (match) {
const text = match[1];
const url = match[2];
const a = container.createEl('a', {
text: text,
attr: url.startsWith('file://') ? {} : { href: url, target: '_blank', rel: 'noopener noreferrer' }
});
a.style.cursor = 'pointer';
if (url.startsWith('file://')) {
a.addClass('menu-file-link');
if (!selectedLayout) applyInlineBaseStyles(a, 'file');
} else {
a.addClass('menu-external-link');
if (!selectedLayout) applyInlineBaseStyles(a, 'external');
}
a.addEventListener('click', (e) => {
e.preventDefault();
if (url.startsWith('file://')) {
if (Platform.isDesktop) {
try {
const { shell } = require('electron');
let filePath = decodeURIComponent(url.substring(7));
if (filePath.startsWith('/') && filePath.charAt(2) === ':') {
filePath = filePath.substring(1);
}
shell.openPath(filePath);
} catch (error) {
console.error('Failed to open file:', error);
}
} else {
console.warn('File links are not supported on mobile.');
// Optionally show a notice to the user
// new Notice('File links are not supported on this device.');
}
} else {
window.open(url, '_blank', 'noopener,noreferrer');
}
});
}
}
}
// Process Dataview Query
if (dataviewQuery) {
const dvContainer = container.createDiv({ cls: 'menu-dataview-container' });
// Render the dataview query
// We wrap it in ```dataview ... ``` so Obsidian's renderer handles it
MarkdownRenderer.render(
this.app,
`\`\`\`dataview\n${dataviewQuery}\n\`\`\``,
dvContainer,
ctx.sourcePath,
this
);
// MutationObserver to style links once they render
const observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
if (mutation.type === 'childList') {
const links = dvContainer.querySelectorAll('a');
links.forEach((link: HTMLElement) => {
if (link.hasClass('internal-link')) {
link.addClass('menu-internal-link');
if (!selectedLayout) applyInlineBaseStyles(link, 'internal');
} else {
link.addClass('menu-external-link');
if (!selectedLayout) applyInlineBaseStyles(link, 'external');
}
});
}
}
});
observer.observe(dvContainer, { childList: true, subtree: true });
}
});
this.registerMarkdownCodeBlockProcessor('menu', (source, el, ctx) => {
this.processMenuBlock(source, el, ctx);
});
} catch (error) {
console.error('[obsidian-menus] Failed to load plugin:', error);
throw error;
}
}
onunload() {
@@ -285,6 +38,262 @@ export default class MenuPlugin extends Plugin {
async saveSettings() {
await this.saveData(this.settings);
}
private processMenuBlock(source: string, el: HTMLElement, ctx: MarkdownPostProcessorContext) {
const lines = source.trim().split('\n');
let layoutOrClass = '';
let colors: Record<string, string> = {};
const links: string[] = [];
let dataviewQuery = '';
// Parse YAML-like properties and links
for (const line of lines) {
const trimmed = line.trim();
if (trimmed.startsWith('layout:') || trimmed.startsWith('class:')) {
const colonIndex = trimmed.indexOf(':');
layoutOrClass = trimmed.substring(colonIndex + 1).trim();
} else if (trimmed.startsWith('dataview:') || trimmed.startsWith('dv:')) {
const colonIndex = trimmed.indexOf(':');
dataviewQuery = trimmed.substring(colonIndex + 1).trim();
} else if (trimmed.includes(':') && !trimmed.startsWith('[') && !trimmed.startsWith('[[') && !dataviewQuery) {
// Parse color properties
const [key, ...valueParts] = trimmed.split(':');
const value = valueParts.join(':').trim();
if (key && value && !key.includes('//') && !key.includes('http')) {
colors[key.trim()] = value;
}
} else if (trimmed && !trimmed.includes(':') && !dataviewQuery) {
links.push(trimmed);
} else if (trimmed.startsWith('[') && !dataviewQuery) {
links.push(trimmed);
} else if (dataviewQuery) {
// If we already found a dataview start, append subsequent lines to it
// This handles multi-line queries if the user didn't put it all on one line
// But actually, the simple parsing above assumes one line per property.
// For complex queries, we might need a better parser.
// For now, let's assume the query might be multi-line if it started with dv:
// But the loop iterates lines.
// Let's adjust: if we are in "dataview mode", just add to query.
dataviewQuery += '\n' + line;
}
}
// Re-parsing to handle multi-line dataview queries correctly
// The previous loop was a bit naive for multi-line. Let's do a cleaner pass.
layoutOrClass = '';
colors = {};
links.length = 0;
dataviewQuery = '';
let isDataviewBlock = false;
for (const line of lines) {
const trimmed = line.trim();
if (isDataviewBlock) {
dataviewQuery += '\n' + line;
continue;
}
if (trimmed.startsWith('layout:') || trimmed.startsWith('class:')) {
const colonIndex = trimmed.indexOf(':');
layoutOrClass = trimmed.substring(colonIndex + 1).trim();
} else if (trimmed.startsWith('dataview:') || trimmed.startsWith('dv:')) {
const colonIndex = trimmed.indexOf(':');
dataviewQuery = trimmed.substring(colonIndex + 1).trim();
isDataviewBlock = true; // Assume rest of block is the query
} else if (trimmed.includes(':') && !trimmed.startsWith('[') && !trimmed.startsWith('[[')) {
const [key, ...valueParts] = trimmed.split(':');
const value = valueParts.join(':').trim();
if (key && value && !key.includes('//') && !key.includes('http')) {
colors[key.trim()] = value;
}
} else if (trimmed) {
links.push(trimmed);
}
}
// Determine layout and classes
const builtInLayouts = new Set(['default', 'minimal', 'slate', 'horizon', 'aether']);
const container = el.createEl('div', { cls: 'menu-container' });
let selectedLayout = '';
let extraClasses: string[] = [];
if (layoutOrClass) {
const tokens = layoutOrClass.split(/\s+/).filter(Boolean);
if (tokens.length) {
const builtInIndex = tokens.findIndex(t => builtInLayouts.has(t));
if (builtInIndex !== -1) {
selectedLayout = tokens[builtInIndex];
extraClasses = tokens.filter((_, i) => i !== builtInIndex);
} else {
extraClasses = tokens;
}
}
} else {
selectedLayout = 'default';
}
if (selectedLayout) {
container.setAttr('data-layout', selectedLayout);
}
for (const cls of extraClasses) {
container.addClass(cls);
}
// Apply custom properties
if (Object.keys(colors).length > 0) {
const baseKeys = new Set([
'bg', 'text', 'border', 'font',
'hover-text', 'hover-bg', 'hover-border', 'hover-font',
]);
const normalizeKey = (raw: string) => {
let s = raw.trim().toLowerCase();
s = s
.replace(/\btext-hover\b/g, 'hover-text')
.replace(/\bbg-hover\b/g, 'hover-bg')
.replace(/\bborder-hover\b/g, 'hover-border')
.replace(/\binternal-text-hover\b/g, 'internal-hover-text')
.replace(/\binternal-bg-hover\b/g, 'internal-hover-bg')
.replace(/\binternal-border-hover\b/g, 'internal-hover-border')
.replace(/\bexternal-text-hover\b/g, 'external-hover-text')
.replace(/\bexternal-bg-hover\b/g, 'external-hover-bg')
.replace(/\bexternal-border-hover\b/g, 'external-hover-border')
.replace(/\bfile-text-hover\b/g, 'file-hover-text')
.replace(/\bfile-bg-hover\b/g, 'file-hover-bg')
.replace(/\bfile-border-hover\b/g, 'file-hover-border')
.replace(/\baccent\b/g, 'hover-text')
.replace(/\binternal-accent\b/g, 'internal-hover-text')
.replace(/\bexternal-accent\b/g, 'external-hover-text')
.replace(/\bfile-accent\b/g, 'file-hover-text')
.replace(/\bbackground\b/g, 'bg');
return s;
};
const isAllowed = (key: string) => {
if (baseKeys.has(key)) return true;
const m = key.match(/^(internal|external|file)-(.*)$/);
return !!(m && baseKeys.has(m[2]));
};
for (const [rawKey, value] of Object.entries(colors)) {
const key = normalizeKey(rawKey);
if (!isAllowed(key)) continue;
container.style.setProperty(`--${key}`, value);
}
}
const applyInlineBaseStyles = (a: HTMLElement, variant: 'internal' | 'external' | 'file' | 'generic') => {
const prefix = variant === 'generic' ? '' : `${variant}-`;
const get = (k: string) => (colors[`${prefix}${k}`] ?? colors[k]);
const bgVal = get('bg'); if (bgVal) a.style.background = bgVal as string;
const textVal = get('text'); if (textVal) a.style.color = textVal as string;
const borderVal = get('border'); if (borderVal) a.style.borderColor = borderVal as string;
const fontVal = get('font'); if (fontVal) a.style.fontFamily = fontVal as string;
const hoverKeys = ['hover-bg', 'hover-text', 'hover-border', 'hover-font'];
for (const hk of hoverKeys) {
const v = get(hk);
if (v) a.style.setProperty(`--${hk}`, v as string);
}
};
// Process regular links
for (const link of links) {
if (link.startsWith('[[') && link.endsWith(']]')) {
const linkContent = link.slice(2, -2);
let href = linkContent;
let text = linkContent;
if (linkContent.includes('|')) {
[href, text] = linkContent.split('|');
}
const a = container.createEl('a', {
text: text,
attr: { 'data-href': href }
});
a.addClass('menu-internal-link');
if (!selectedLayout) applyInlineBaseStyles(a, 'internal');
a.style.cursor = 'pointer';
a.addEventListener('click', (e) => {
e.preventDefault();
this.app.workspace.openLinkText(href, ctx.sourcePath, false);
});
} else if (link.match(/^\[.*\]\(.*\)$/)) {
const match = link.match(/^\[(.*)\]\((.*)\)$/);
if (match) {
const text = match[1];
const url = match[2];
const a = container.createEl('a', {
text: text,
attr: url.startsWith('file://') ? {} : { href: url, target: '_blank', rel: 'noopener noreferrer' }
});
a.style.cursor = 'pointer';
if (url.startsWith('file://')) {
a.addClass('menu-file-link');
if (!selectedLayout) applyInlineBaseStyles(a, 'file');
} else {
a.addClass('menu-external-link');
if (!selectedLayout) applyInlineBaseStyles(a, 'external');
}
a.addEventListener('click', (e) => {
e.preventDefault();
if (url.startsWith('file://')) {
if (Platform.isDesktop) {
try {
// Use dynamic import with proper error handling
const electronPath = 'electron';
const { shell } = require(electronPath);
let filePath = decodeURIComponent(url.substring(7));
if (filePath.startsWith('/') && filePath.charAt(2) === ':') {
filePath = filePath.substring(1);
}
shell.openPath(filePath);
} catch (error) {
console.error('Failed to open file:', error);
}
} else {
console.warn('File links are not supported on mobile.');
}
} else {
window.open(url, '_blank', 'noopener,noreferrer');
}
});
}
}
}
// Process Dataview Query
if (dataviewQuery) {
const dvContainer = container.createDiv({ cls: 'menu-dataview-container' });
// Render the dataview query
// We wrap it in ```dataview ... ``` so Obsidian's renderer handles it
MarkdownRenderer.render(
this.app,
`\`\`\`dataview\n${dataviewQuery}\n\`\`\``,
dvContainer,
ctx.sourcePath,
this
);
// MutationObserver to style links once they render
const observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
if (mutation.type === 'childList') {
const links = dvContainer.querySelectorAll('a');
links.forEach((link: HTMLElement) => {
if (link.hasClass('internal-link')) {
link.addClass('menu-internal-link');
if (!selectedLayout) applyInlineBaseStyles(link, 'internal');
} else {
link.addClass('menu-external-link');
if (!selectedLayout) applyInlineBaseStyles(link, 'external');
}
});
}
}
});
observer.observe(dvContainer, { childList: true, subtree: true });
}
}
}
class MenuPluginSettingTab extends PluginSettingTab {