Creating custom plugins in `Obsidian`
Creating custom plugins in Obsidian
Plugins
- I want some sort of a
obsidianplugin where I can add some sort of a special syntax/identifier and add a path/filename to which the snippet below is added until I escape it using some sort of syntax again. - Finally I want one more plugin which identifies this syntax and removes all of it from my
.mdfiles before pushing to github. - Want a special button which runs a script which pushes to a remote github repo.
Making Plugin-1
We gotta understand how do the obsidian plugins work first.
The Plugin Class defines lifecycle of a plugin and exposes operations available to it.
The onload fn configures resources needed by the plugin.
The unload fn releases resources used by the plugin.
Cmd+Option+i is shortcut to open Developer Tools.
- We create a new plugin using
documentationpicked from theObsidianwebsite. - We use
editorCallbackinstead of callback as we need access to the editor. But if we usecallbackinstead, we get something like ![[Screenshot 2025-01-01 at 11.09.54 PM.png]] which is accessible in theCommand Palette.
I have written this much code now
this.addCommand({
id:"identify-n-add-to-pages",
name:"Identify path and add to Pages",
hotkeys:[{modifiers:['Mod','Shift'],key:'`'}],
editorCallback:(editor:Editor,view:MarkdownView)=>{
editor.setValue("kachow")
}
})
- This works ie. it adds kachow to the current page but removes everything else which is undesirable.
- To solve it, I find the last line and then add the word kachow! to it. It however removes any content on that line as well.
- So, we need to get content on the last line as well,
concatenateit and replace. - With a little messing around with the definitions given in the
obsidian.d.tsfile for theEditortype, I am able to get it working.
this.addCommand({
id:"identify-n-add-to-pages",
name:"Identify path and add to Pages",
hotkeys:[{modifiers:['Mod','Shift'],key:'`'}],//is Cmd in MacOS.
editorCallback:(editor:Editor,view:MarkdownView)=>{
// editor.setValue("kachow")
// let lastLine = editor.lineCount()
let cursorPosition = editor.getCursor() //get the line the cursor is at.
// let lastLineContent = editor.getLine(lastLine-1)
let currLineContent = editor.getLine(cursorPosition.line) //get content of that line.
console.log(currLineContent,cursorPosition)
// editor.setLine(lastLine-1,currLineContent+"kachow!")
editor.setLine(cursorPosition.line,currLineContent+"kachow!") //set the line to be the same.
}
})
-
Now, we will need to see what the user is writing and identify whether it fits our pattern.
-
For that, we need to attach event listeners to editor events.
-
I tried using the
Workspaceclass by creating an instance of it. After several tries of debugging the syntax, I GPT’ed the thing only to understand that I tried to instantiate something which is already created by default in the environment and that the environment wasn’t gonna be able to integrate another instantiation of the same thing.
Regex
- Next, we create a
Regexpattern to identify what path to write the data to and what part should be written. - Logically it should start with an identifier and so I am gonna start the identifier with
<@{path}>and will copy everything from there until an<@end>is encountered. - So it will be something like
<@/Users/hk/Desktop/notes>. - The initial
regexI came up with was/<@(.|^>)>/i. The problem was that it was matching only one character ie. something like<@d>worked but wouldn’t work if length was greater than one. GPTcame up with/<@([^>\\n\\r]*)>/iso logically,/<@([.|^>|^\r]*)>/ishould work as well. `