Пишем плагины для Obsidian. Часть 127.11.2024 12:00

Когда блоки кода найдены, мы подменяем их innerHTML простой заменой всех известных мне видов горизонтальных черточек на символ ·.

Я вас поздравляю, наш первый плагин, делающий что-то осмысленное готов:

Вверху — табулатура в режиме редактирования, внизу — в режиме чтения.

Кому-то такой вид табулатуры может показаться сомнительным, но на то они и личные плагины, чтобы делаться под личные запросы. К тому же, в нашем случае главным является образовательный процесс :)

Плагин 2. Suggest TODO

Задача

У меня есть специфическая проблема, связанная со списками дел. Типовая ситуация: у меня есть длинный список TODO. И мне никогда не решиться на выбор очередного пункта из списка на выполнение. В конце концов я заканчиваю либо вообще тотальной прокрастинацией, не приступив ни к одному делу, либо приступаю к наиболее приятным пунктам, игнорируя трудные и неприятные дела, оставляя их висеть в списке месяцами.

Попробуем сломить лень и нерешительность плагином, который будет выбирать TODO из списка за нас.

Как это должно работать: у нас есть заметка с пунктами, например:

или даже так:

Оба вида списков должны поддерживаться. В случае с чек-боксами во внимание нужно принимать только незакрытые пункты. Хочется открыть заметку с TODO-списком и запустить команду Suggest TODO, которая сама предложит нам что-нибудь. Вызов команды хотим иметь в виде двух опций:

Ответ с рекомендованным TODO вывести на экран в отдельном диалоговом окошке.

Реализация

Для начала, чтобы разделить бизнес-логику и служебный код самого плагина, напишем функцию suggestTodoImpl(), которая принимает на вход сырой markdown, а возвращает строку со случайно-выбранным TODO. Возвращаемый TODO должен быть очищен от визуальной шелухи и готов к выводу в финальном диалоговом окне. Если алгоритм не может найти ни один доступный к выбору TODO, функция должна вернуть null:

function suggestTodoImpl(markdown) {
    const todos = markdown.split("\n")
        // find TODOs
        .filter(line => {
            if (line.startsWith('- [x]')) return false
            return line.startsWith('- ') || line.startsWith('- [ ]')
        })
        // prettify TODOs
        .map(line => removePrefix(removePrefix(line, '- [ ]'), '- ').trim())

    if (todos.length === 0) {
        return null
    }

    const randomLine = todos[Math.floor(Math.random() * todos.length)]
    return randomLine
}

Имея на руках эту кор-логику можно приступать к самому плагину. Сначала дадим понять плагину, что мы хотим свой Command и иконку на Ribbon:

class TodoSuggestPlugin extends obsidian.Plugin {
    async onload() {
        this.addCommand({
            id: 'Suggest-random-todo',
            name: 'Suggest random TODO',
            callback: () => {this.suggestTodo()}
        })

        this.addRibbonIcon('dice', 'Suggest random TODO', (evt) => {
            this.suggestTodo()
        })
    }
}

Оба коллбека апеллируют к this.suggestTodo(), который нами еще не написан. Но мы это скоро исправим. В this.addCommand() мы регистрируем команду, которую сможем вызвать через Ctrl + P, а this.addRibbonIcon() добавит на левую панель иконку dice с изображением игральной кости. Оба действия приведут к одной логике:

async suggestTodo() {
	const activeView = this.app.workspace.getActiveViewOfType(obsidian.MarkdownView)
	if (!activeView) {
		new Notice("No active note found!")
		return
	}

	let content
	if (activeView.getMode() === "source") {
		// Editor mode: Get content from the editor
		const editor = activeView.editor
		content = editor.getValue()
	} else if (activeView.getMode() === "preview") {
		// Reading mode: Read content from the file
		const file = activeView.file
		content = await this.app.vault.read(file)
	}

	if (!content) {
		new Notice("Could not read content!")
		return
	}

	const todo = suggestTodoImpl(content)
	
	if (!todo) {
		new Notice("No TODOs available!")
		return
	}

	new ResultModal(this.app, todo).open()
}

Код, пусть и кажется большим, своей большей частью является прелюдией к строчке const todo = suggestTodoImpl(content). Задача же найти тот самый content сводится к тому, чтобы сначала найти активную view в нашем Obsidian, а затем извлечь из нее markdown.

Первое делается через this.app.workspace.getActiveViewOfType(obsidian.MarkdownView), второе же зависит от режима в котором сейчас находится view: чтения или редактирования. Поэтому мы и имеем это странное ветвление в попытках заполнить content.

Так же мы встречаем два новых для нас класса:

• Notice

• ResultModal

Notice — это маленькое popup-окошко с оповещением, которое всплывет на пару секунд в верхнем правом углу окна. Например, вот так:

Мы будем его использовать, чтобы оповестить пользователя о нештатной ситуации.

ResultModal же — наш пользовательский класс, диалоговое окно, в котором мы выведем результат выполнения команды, если все пройдет успешно:

Чтобы создать свое модальное окно, нужно отнаследоваться от Modal и описать в конструкторе класса наполнение окна:

class ResultModal extends obsidian.Modal {
    constructor(app, todo) {
        super(app)

        this.setTitle('Your TODO')
        this.setContent(todo)

        new obsidian.Setting(this.contentEl)
            .addButton((btn) =>
                btn
                .setButtonText('OK')
                .setCta()
                .onClick(() => {
                    this.close()
                })
            )
    }
}

Кнопка OK просто закрывает модальное окно.

Плагин готов! Вы можете использовать его через Command palette, запустив команду Suggest TODO:

Или просто нажать на иконку на панели слева:

Плагин 3. Top-10 recent edited notes

Задача

У меня до последнего момента в Obsidian был установлен жирный плагин Dataview, на котором нельзя разве что запустить космический корабль. Плагин привносит в ваши заметки sql и JavaScript, чтобы вы могли жонглироватьвашими данными и получать хитрые сводки и выжимки, как вам вашей душе будет угодно.

Мне все это вычислительное изобилие не нужно, и Dataview стоял у меня только с одной целью — иметь под рукой волшебную заметку со списком top-10 последних отредактированных в хранилище файлов. Вы просто создавали заметку вот c таким содержимым:

```dataview
TABLE file.ctime as "Time Modified"
SORT file.ctime DESC
LIMIT 10
```

и в режиме просмотра она показывала вам результат этого «sql»-запроса, с возможностью быстрого перехода по файлам из сводки:

У меня в тестовом хранилище не наберется 10 файлов, но суть вы поняли.

Такой список мне необходим, поскольку, не знаю, закономерно ли это для всех или нет, но

чем меньше времени прошло с последнего изменения заметки, тем выше вероятность, что она мне снова понадобится, чтобы дописать в нее что-то еще.

И да, я знаю о существовании core-плагина Quick Switcher, который можно вызвать по Ctrl + O. Его проблема в том, что он показывает топ недавно открывавшихся файлов, а это немного другое, и ломает мой флоу.

Итак, наш план:

• Сделать top-10, но не в виде заметки, а в виде кастомной ui-страницы на правой панели — где находятся теги, содержание страницы, ссылки и т.п.

• Сделать не фиксированный top-10, а скорее top-N, где N будет настраиваться в настройках плагина

• Удалить тяжеловесный Dataview за ненадобностью

Реализация

Суть плагина должна сводиться к тому, что было ранее описано в Dataview-запросе:

• Достаем список всех файлов хранилища

• Сортируем их по дате изменения

• Ограничиваем список N файлами

• Куда-то отрисовываем результат в виде работающих ссылок на файлы

Так как мы планируем работать с файловым хранилищем в целом, нам нужен класс Vault, который как раз специализируется на таких задачах. У него есть метод Vault.getMarkdownFiles(), который выдаст нам список из объектов TFile. У этого класса в свою очередь можно достать информацию о дате последнего изменения файла: file.stat.mtime. Опишем свободную функцию для этой логики:

function getTopNFiles(plugin, n) {
	const files = plugin.app.vault.getMarkdownFiles().sort(
		(f1, f2) => {
			return f2.stat.mtime - f1.stat.mtime
		}
	)
	
	if (files.length > n) {
		files.length = n
	}
	
	return files
}

Остается понять, где этот код будет вызван. В текущем плагине мы хотим рендерить контент в особую панель справа. Это рендеринг в кастомный View. В Obsidian Docs есть хороший гайд, который рассказывает, как работать с View: как их объявлять, регистрировать в плагине, отображать и наполнять. Мы пойдем прямо по стопам этого гайда, и получим вот такой код:

class RecentEditedNotesPlugin extends obsidian.Plugin {
    async onload() {
        this.registerView(
            VIEW_TYPE_RECENT_EDITED_NOTES,
            (leaf) => new RecentEditedNotesView(leaf, this)
        )
        this.activateView()
    }

    async activateView() {
        const { workspace } = this.app
    
        let leaf = null
        const leaves = workspace.getLeavesOfType(VIEW_TYPE_RECENT_EDITED_NOTES)
    
        if (leaves.length > 0) {
            // A leaf with our view already exists, use that
            leaf = leaves[0]
        } else {
            // Our view could not be found in the workspace, create a new leaf
            // in the right sidebar for it
            leaf = workspace.getRightLeaf(false)
            await leaf.setViewState({ type: VIEW_TYPE_RECENT_EDITED_NOTES, active: true })
        }
    
        // "Reveal" the leaf in case it is in a collapsed sidebar
        workspace.revealLeaf(leaf)
    }
}

const VIEW_TYPE_RECENT_EDITED_NOTES = 'recent-edited-notes-view'

class RecentEditedNotesView extends obsidian.ItemView {
    plugin = null

    constructor(leaf, plugin) {
        super(leaf)
        this.plugin = plugin
    }

    getViewType() {
        return VIEW_TYPE_RECENT_EDITED_NOTES
    }

    getDisplayText() {
        return 'Recent edited notes'
    }

    async onOpen() {
    }
}

Это все — служебная обвязка, списанная с гайда, чтобы объявить и отобразить на правой панели новый view с айди recent-edited-notes-view:

View пустой, мы будем его заполнять в методе async onOpen(), который пока что пуст. Для начала подумаем о высокоуровневом поведении: когда и при каких условиях содержимое view должно обновляться?

• На старте Obsidian

• При изменении какого-то файла

• При переименовывании какого-то файла

Так и запишем:

async onOpen() {
	this.plugin.app.vault.on('modify', (file) => {
		this.update()
	})
	this.plugin.app.vault.on('rename', (file) => {
		this.update()
	})

	this.update()
}

Да, у Vault есть возможность вызвать коллбек на событие изменения или переименовывания файла.

Мы практически на финишной прямой — осталось написать функцию update(), которая заполнит View нашим топом:

update() {
	const container = this.containerEl.children[1]
	container.empty()

	container.createEl('h4', { text: 'Top-10 recent edited notes' })

	const files = getTopNFiles(this.plugin, 10)
	const ul = container.createEl('ul')

	for (const file of files) {
		const li = ul.createEl('li')
		const link = li.createEl('a', { text: file.basename })
	}
}

Почему в this.containerEl.children[1] индекс 1, а не ноль — честно, не скажу, так было указано в гайде, и так работает, а экспериментировать я не стал :)

Функция добавляет на view заголовок, достает список файлов через getTopNFiles() и программно создает html вида:

    ...
    ...
    ...
    ...

И мы получаем результат:

Опять-таки, у меня не 10 файлов, но вы поняли.

Но у нас не работают ссылки! И как только я не пытался изголяться, чтобы заставить это работать: прописывал href, другие атрибуты; читал официальную документацию; дебажил ссылки в Obsidian и пытался добавлять в теги подсмотренные у Obsidian классы, такие как .internal-link — все было без толку. В итоге нашел ответ в Discord-канале — правильное работающее решение выглядит так:

link.addEventListener("click", (event) => {
	event.preventDefault() // Prevent default link behavior
	app.workspace.openLinkText(file.path, "", false) // Open the note
})

class RecentEditedNotesSettingTab extends obsidian.PluginSettingTab {
    plugin
  
    constructor(app, plugin) {
        super(app, plugin)
        this.plugin = plugin
    }
  
    display() {
        let { containerEl } = this

        containerEl.empty()

        new obsidian.Setting(containerEl)
            .setName('List length')
            .setDesc('How long is your list of recently edited notes')
            .addText((text) =>
                text
                .setValue(this.plugin.settings.listLength)
                .onChange(async (value) => {
                    this.plugin.settings.listLength = value
                    await this.plugin.saveSettings()
                })
            )
    }
}

const DEFAULT_SETTINGS = {
    listLength: 10,
}

class RecentEditedNotesPlugin extends obsidian.Plugin {
    settings = null

    async onload() {
        await this.loadSettings()
        this.addSettingTab(new RecentEditedNotesSettingTab(this.app, this))
	    ...
    }

    async loadSettings() {
        this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData())
    }

    async saveSettings() {
        await this.saveData(this.settings)
    }
}

-container.createEl('h4', { text: 'Top-10 recent edited notes' })
+container.createEl('h4', { text: `Top-${this.plugin.settings.listLength} recent edited notes` })

-const files = getTopNFiles(this.plugin, 10)
+const files = getTopNFiles(this.plugin, this.plugin.settings.listLength)

© Habrahabr.ru