From 10d2a5bc6ebeba067d0b7f5ce29f34ab9374c87b Mon Sep 17 00:00:00 2001 From: Patrik Lindefors Date: Thu, 19 May 2022 18:51:21 +0200 Subject: [PATCH] version 1.0.0 --- README.md | 76 +++---------------------------------------------- main.ts | 78 ++++++++++++++++++++++++++------------------------- manifest.json | 12 ++++---- versions.json | 3 +- 4 files changed, 51 insertions(+), 118 deletions(-) diff --git a/README.md b/README.md index b8f865d..4011ea3 100644 --- a/README.md +++ b/README.md @@ -1,73 +1,5 @@ -# Obsidian Sample Plugin +# Code Block Plugin -This is a sample plugin for Obsidian (https://obsidian.md). - -This project uses Typescript to provide type checking and documentation. -The repo depends on the latest plugin API (obsidian.d.ts) in Typescript Definition format, which contains TSDoc comments describing what it does. - -**Note:** The Obsidian API is still in early alpha and is subject to change at any time! - -This sample plugin demonstrates some of the basic functionality the plugin API can do. -- Changes the default font color to red using `styles.css`. -- Adds a ribbon icon, which shows a Notice when clicked. -- Adds a command "Open Sample Modal" which opens a Modal. -- Adds a plugin setting tab to the settings page. -- Registers a global click event and output 'click' to the console. -- Registers a global interval which logs 'setInterval' to the console. - -## First time developing plugins? - -Quick starting guide for new plugin devs: - -- Check if [someone already developed a plugin for what you want](https://obsidian.md/plugins)! There might be an existing plugin similar enough that you can partner up with. -- Make a copy of this repo as a template with the "Use this template" button (login to GitHub if you don't see it). -- Clone your repo to a local development folder. For convenience, you can place this folder in your `.obsidian/plugins/your-plugin-name` folder. -- Install NodeJS, then run `npm i` in the command line under your repo folder. -- Run `npm run dev` to compile your plugin from `main.ts` to `main.js`. -- Make changes to `main.ts` (or create new `.ts` files). Those changes should be automatically compiled into `main.js`. -- Reload Obsidian to load the new version of your plugin. -- Enable plugin in settings window. -- For updates to the Obsidian API run `npm update` in the command line under your repo folder. - -## Releasing new releases - -- Update your `manifest.json` with your new version number, such as `1.0.1`, and the minimum Obsidian version required for your latest release. -- Update your `versions.json` file with `"new-plugin-version": "minimum-obsidian-version"` so older versions of Obsidian can download an older version of your plugin that's compatible. -- Create new GitHub release using your new version number as the "Tag version". Use the exact version number, don't include a prefix `v`. See here for an example: https://github.com/obsidianmd/obsidian-sample-plugin/releases -- Upload the files `manifest.json`, `main.js`, `styles.css` as binary attachments. Note: The manifest.json file must be in two places, first the root path of your repository and also in the release. -- Publish the release. - -> You can simplify the version bump process by running `npm version patch`, `npm version minor` or `npm version major` after updating `minAppVersion` manually in `manifest.json`. -> The command will bump version in `manifest.json` and `package.json`, and add the entry for the new version to `versions.json` - -## Adding your plugin to the community plugin list - -- Check https://github.com/obsidianmd/obsidian-releases/blob/master/plugin-review.md -- Publish an initial version. -- Make sure you have a `README.md` file in the root of your repo. -- Make a pull request at https://github.com/obsidianmd/obsidian-releases to add your plugin. - -## How to use - -- Clone this repo. -- `npm i` or `yarn` to install dependencies -- `npm run dev` to start compilation in watch mode. - -## Manually installing the plugin - -- Copy over `main.js`, `styles.css`, `manifest.json` to your vault `VaultFolder/.obsidian/plugins/your-plugin-id/`. - -## Improve code quality with eslint (optional) -- [ESLint](https://eslint.org/) is a tool that analyzes your code to quickly find problems. You can run ESLint against your plugin to find common bugs and ways to improve your code. -- To use eslint with this project, make sure to install eslint from terminal: - - `npm install -g eslint` -- To use eslint to analyze this project use this command: - - `eslint main.ts` - - eslint will then create a report with suggestions for code improvement by file and line number. -- If your source code is in a folder, such as `src`, you can use eslint with this command to analyze all files in that folder: - - `eslint .\src\` - - -## API Documentation - -See https://github.com/obsidianmd/obsidian-api +This plugin converts selected text into a code block with automatic programming language detection. The languages that +is detected can be selected in the plugin settings. The language detection is provided by highlight.js and is in no means +perfect, but it works most of the time. diff --git a/main.ts b/main.ts index b0ce3b4..b38717f 100644 --- a/main.ts +++ b/main.ts @@ -1,11 +1,17 @@ -import { App, Editor, MarkdownView, Plugin, PluginSettingTab, Setting } from 'obsidian'; +import { App, Editor, Plugin, PluginSettingTab, Setting } from 'obsidian'; + +const hljs = require('highlight.js/lib/common'); interface CodeBlockPluginSettings { - mySetting: string; + languages: string[]; +} + +function getDefaultLanguages() { + return hljs.listLanguages(); } const DEFAULT_SETTINGS: CodeBlockPluginSettings = { - mySetting: 'default' + languages: getDefaultLanguages() } export default class CodeBlockPlugin extends Plugin { @@ -16,39 +22,31 @@ export default class CodeBlockPlugin extends Plugin { this.addCommand({ id: 'Code block', - name: 'Toggle code block', - editorCallback: (editor: Editor, view: MarkdownView) => { - console.log(this.settings); + name: 'Add code block', + editorCallback: (editor: Editor) => { const selection = editor.getSelection(); if (selection.length == 0) { - editor.replaceSelection('```\n\n```\n'); + const pos = editor.getCursor(); + editor.replaceRange( '```\n\n```\n', pos); + editor.setCursor(pos.line + 1); return; } - - const hljs = require('highlight.js/lib/common'); - const highlight = hljs.highlightAuto(selection, ["java", "javascript", "sql", "kotlin", "python", "groovy", "xml", "html", "yaml", "typescript"]); - const language = highlight.language; - console.log(highlight); - console.log(selection); - console.log(language); - - editor.replaceSelection('```' + language + '\n' + selection + '\n```' + '\n'); + editor.replaceSelection(CodeBlockPlugin.addCodeBlock(this.getLanguage(selection), selection)); } }); - // This adds a settings tab so the user can configure various aspects of the plugin this.addSettingTab(new CodeBlockTab(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, 'paste', (event: ClipboardEvent) => { - const paste = (event.clipboardData).getData('text'); - console.log('paste', paste); - }); + private static addCodeBlock(language: string, selection: string) { + return '```' + language + '\n' + selection + '\n```' + '\n'; + } + + private getLanguage(selection: string) { + return hljs.highlightAuto(selection, this.settings.languages).language; } onunload() { - } async loadSettings() { @@ -70,22 +68,26 @@ class CodeBlockTab extends PluginSettingTab { } display(): void { - const {containerEl} = this; - + const { containerEl } = this; containerEl.empty(); + containerEl.createEl('h2', { text: 'Settings for code-block plugin' }); - containerEl.createEl('h2', {text: 'Settings for code-block plugin.'}); + hljs.listLanguages().sort().forEach((language: string) => { + const index = this.plugin.settings.languages.indexOf(language); + const active = index !== -1; - 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) => { - console.log('Secret: ' + value); - this.plugin.settings.mySetting = value; - await this.plugin.saveSettings(); - })); + return new Setting(containerEl) + .setName(language) + .addToggle(toggle => toggle + .setValue(active) + .onChange(async () => { + if (active) { + this.plugin.settings.languages.splice(index, 1); + } else { + this.plugin.settings.languages.push(language); + } + await this.plugin.saveSettings(); + })); + }); } } diff --git a/manifest.json b/manifest.json index 60626c5..db1bf95 100644 --- a/manifest.json +++ b/manifest.json @@ -1,10 +1,10 @@ { - "id": "obsidian-sample-plugin", - "name": "Sample Plugin", - "version": "1.0.1", + "id": "code-block-plugin", + "name": "Code Block Plugin", + "version": "1.0.0", "minAppVersion": "0.12.0", - "description": "This is a sample plugin for Obsidian. This plugin demonstrates some of the capabilities of the Obsidian API.", - "author": "Obsidian", - "authorUrl": "https://obsidian.md", + "description": "This plugin converts selected text to code blocks with automatic language detection.", + "author": "Patrik Lindefors", + "authorUrl": "https://github.com/paddan/code-block-plugin", "isDesktopOnly": false } diff --git a/versions.json b/versions.json index 997bf32..66e75ec 100644 --- a/versions.json +++ b/versions.json @@ -1,4 +1,3 @@ { - "1.0.0": "0.9.7", - "1.0.1": "0.12.0" + "1.0.0": "0.12.0" }