From 29dafd30ea850e14a9a27ebffe8d82e7ca53948a Mon Sep 17 00:00:00 2001 From: kunalja Date: Fri, 6 Jun 2025 21:30:17 -0400 Subject: [PATCH] initial feature, highlight selection --- .gitignore | 1 + main.ts | 224 +++++++++++++++++++++----------------------------- manifest.json | 17 ++-- styles.css | 34 ++++++-- 4 files changed, 131 insertions(+), 145 deletions(-) diff --git a/.gitignore b/.gitignore index 7afccef..ef371df 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,4 @@ data.json .env .windsurf +prompts/ \ No newline at end of file diff --git a/main.ts b/main.ts index 2d07212..8508398 100644 --- a/main.ts +++ b/main.ts @@ -1,134 +1,96 @@ -import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, Setting } from 'obsidian'; +import { MarkdownView, Plugin, Notice } from 'obsidian'; -// Remember to rename these classes and interfaces! +export default class VariantEditor extends Plugin { + + async onload() { + console.log('VariantEditor: Plugin loading...'); + + try { + // Bind the method to ensure proper 'this' context + this.highlightSelection = this.highlightSelection.bind(this); + + // Register the command with a direct function reference + this.addCommand({ + id: 'variant-editor-highlight', + name: 'Variant Editor: Highlight Word & Sentence', + hotkeys: [{ modifiers: ["Mod"], key: "h" }], + callback: () => { + console.log('VariantEditor: Command callback executed'); + this.highlightSelection(); + } + }); + + } catch (error) { + console.error('VariantEditor: Error during initialization:', error); + } + } -interface MyPluginSettings { - mySetting: string; -} - -const DEFAULT_SETTINGS: MyPluginSettings = { - mySetting: 'default' -} - -export default class MyPlugin extends Plugin { - settings: MyPluginSettings; - - async onload() { - await this.loadSettings(); - - // This creates an icon in the left ribbon. - const ribbonIconEl = this.addRibbonIcon('dice', 'Sample Plugin', (evt: MouseEvent) => { - // Called when the user clicks the icon. - new Notice('This is a notice!'); - }); - // Perform additional things with the ribbon - ribbonIconEl.addClass('my-plugin-ribbon-class'); - - // This adds a status bar item to the bottom of the app. Does not work on mobile apps. - const statusBarItemEl = this.addStatusBarItem(); - statusBarItemEl.setText('Status Bar Text'); - - // This adds a simple command that can be triggered anywhere - this.addCommand({ - id: 'open-sample-modal-simple', - name: 'Open sample modal (simple)', - callback: () => { - new SampleModal(this.app).open(); - } - }); - // This adds an editor command that can perform some operation on the current editor instance - this.addCommand({ - id: 'sample-editor-command', - name: 'Sample editor command', - editorCallback: (editor: Editor, view: MarkdownView) => { - console.log(editor.getSelection()); - editor.replaceSelection('Sample Editor Command'); - } - }); - // This adds a complex command that can check whether the current state of the app allows execution of the command - this.addCommand({ - id: 'open-sample-modal-complex', - name: 'Open sample modal (complex)', - checkCallback: (checking: boolean) => { - // Conditions to check - const markdownView = this.app.workspace.getActiveViewOfType(MarkdownView); - if (markdownView) { - // If checking is true, we're simply "checking" if the command can be run. - // If checking is false, then we want to actually perform the operation. - if (!checking) { - new SampleModal(this.app).open(); - } - - // This command will only show up in Command Palette when the check function returns true - return true; - } - } - }); - - // This adds a settings tab so the user can configure various aspects of the plugin - this.addSettingTab(new SampleSettingTab(this.app, this)); - - // If the plugin hooks up any global DOM events (on parts of the app that doesn't belong to this plugin) - // Using this function will automatically remove the event listener when this plugin is disabled. - this.registerDomEvent(document, 'click', (evt: MouseEvent) => { - console.log('click', evt); - }); - - // When registering intervals, this function will automatically clear the interval when the plugin is disabled. - this.registerInterval(window.setInterval(() => console.log('setInterval'), 5 * 60 * 1000)); - } - - onunload() { - - } - - async loadSettings() { - this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData()); - } - - async saveSettings() { - await this.saveData(this.settings); - } -} - -class SampleModal extends Modal { - constructor(app: App) { - super(app); - } - - onOpen() { - const {contentEl} = this; - contentEl.setText('Woah!'); - } - - onClose() { - const {contentEl} = this; - contentEl.empty(); - } -} - -class SampleSettingTab extends PluginSettingTab { - plugin: MyPlugin; - - constructor(app: App, plugin: MyPlugin) { - super(app, plugin); - this.plugin = plugin; - } - - display(): void { - const {containerEl} = this; - - containerEl.empty(); - - new Setting(containerEl) - .setName('Setting #1') - .setDesc('It\'s a secret') - .addText(text => text - .setPlaceholder('Enter your secret') - .setValue(this.plugin.settings.mySetting) - .onChange(async (value) => { - this.plugin.settings.mySetting = value; - await this.plugin.saveSettings(); - })); - } + onunload() { + this.clearHighlight(); + } + + private highlightSelection(): void { + try { + console.log('VariantEditor: highlightSelection called'); + + const view = this.app.workspace.getActiveViewOfType(MarkdownView); + if (!view) { + console.log('VariantEditor: No active Markdown view'); + return; + } + + const editor = view.editor; + const selectedText = editor.getSelection(); + const selectedWord = selectedText.trim(); + + if (!selectedWord) { + console.log('VariantEditor: No text selected'); + return; + } + + const editorEl = view.contentEl; + if (!editorEl) { + console.log('VariantEditor: Could not find editor container'); + return; + } + + const lines = editorEl.querySelectorAll('.cm-line'); + console.log(`VariantEditor: Found ${lines.length} lines`); + + lines.forEach(line => { + if (!line.classList.contains('cm-active')) { + (line as HTMLElement).classList.add('fh-dim') + } + }); + + } catch (e) { + console.error('VariantEditor: Error in highlightSelection:', e); + } + } + + private clearHighlight(): void { + try { + console.log('VariantEditor: clearHighlight called'); + + const view = this.app.workspace.getActiveViewOfType(MarkdownView); + if (!view) { + console.log('VariantEditor: No active Markdown view in clearHighlight'); + return; + } + + const editorEl = view.contentEl; + if (!editorEl) { + console.log('VariantEditor: Could not find editor container in clearHighlight'); + return; + } + + // Remove dim and active classes from all lines + const lines = editorEl.querySelectorAll('.cm-line'); + lines.forEach(line => (line as HTMLElement).classList.remove('fh-dim')); + console.log('VariantEditor: clearHighlight completed'); + + } catch (e) { + console.error('VariantEditor: Error in clearHighlight:', e); + } + } } diff --git a/manifest.json b/manifest.json index dfa940e..688a04a 100644 --- a/manifest.json +++ b/manifest.json @@ -1,11 +1,10 @@ { - "id": "sample-plugin", - "name": "Sample Plugin", - "version": "1.0.0", - "minAppVersion": "0.15.0", - "description": "Demonstrates some of the capabilities of the Obsidian API.", - "author": "Obsidian", - "authorUrl": "https://obsidian.md", - "fundingUrl": "https://obsidian.md/pricing", - "isDesktopOnly": false + "id": "variant-editor", + "name": "VariantEditor", + "version": "1.0.0", + "minAppVersion": "1.0.0", + "description": "Highlight a word to focus on its sentence while dimming the rest of the content.", + "author": "Kunal Jain", + "authorUrl": "https://github.com/kunalJa/VariantEditor", + "isDesktopOnly": false } diff --git a/styles.css b/styles.css index 71cc60f..3c30ecb 100644 --- a/styles.css +++ b/styles.css @@ -1,8 +1,32 @@ -/* +/* Variant Editor Plugin Styles */ -This CSS file will be included with your plugin, and -available in the app when your plugin is enabled. +/* Dimmed lines */ +.markdown-source-view .cm-line.fh-dim { + opacity: 0.25; +} -If your plugin does not need CSS, delete this file. +/* Active line (contains the selected text) */ +.markdown-source-view .cm-line.fh-active { + opacity: 1 !important; + position: relative; + z-index: 1; + background-color: var(--background-primary); + border-radius: 2px; + box-shadow: 0 0 0 1px var(--background-modifier-border); +} -*/ +/* When in sentence mode, make the active line more subtle */ +.markdown-source-view .cm-line.fh-active:not(.fh-dim) { + background-color: var(--background-primary); + box-shadow: none; +} + +/* Highlighted text */ +.fh-highlight { + background-color: var(--text-highlight-bg); + color: var(--text-normal) !important; + font-weight: 600; + padding: 0 2px; + border-radius: 3px; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); +}