├── .gitignore ├── docs └── demo.gif ├── .vscodeignore ├── .vscode ├── extensions.json ├── tasks.json ├── settings.json └── launch.json ├── .eslintrc.json ├── tsconfig.json ├── src ├── test │ ├── runTest.ts │ └── suite │ │ ├── index.ts │ │ └── mdutil.test.ts ├── extension.ts ├── mdutil.ts └── boardEditor.ts ├── CHANGELOG.md ├── LICENSE ├── README.md ├── media ├── boardEditor.css ├── boardEditor.js └── Sortable.min.js ├── package.json └── vsc-extension-quickstart.md /.gitignore: -------------------------------------------------------------------------------- 1 | out 2 | node_modules 3 | .vscode-test/ 4 | *.vsix 5 | .DS_Store 6 | -------------------------------------------------------------------------------- /docs/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brokensandals/markheadboard/HEAD/docs/demo.gif -------------------------------------------------------------------------------- /.vscodeignore: -------------------------------------------------------------------------------- 1 | .vscode/** 2 | .vscode-test/** 3 | out/test/** 4 | src/** 5 | .gitignore 6 | vsc-extension-quickstart.md 7 | **/tsconfig.json 8 | **/.eslintrc.json 9 | **/*.map 10 | **/*.ts 11 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // See http://go.microsoft.com/fwlink/?LinkId=827846 3 | // for the documentation about the extensions.json format 4 | "recommendations": [ 5 | "dbaeumer.vscode-eslint" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | // See https://go.microsoft.com/fwlink/?LinkId=733558 2 | // for the documentation about the tasks.json format 3 | { 4 | "version": "2.0.0", 5 | "tasks": [ 6 | { 7 | "type": "npm", 8 | "script": "watch", 9 | "problemMatcher": "$tsc-watch", 10 | "isBackground": true, 11 | "presentation": { 12 | "reveal": "never" 13 | }, 14 | "group": { 15 | "kind": "build", 16 | "isDefault": true 17 | } 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | "files.exclude": { 4 | "out": false // set this to true to hide the "out" folder with the compiled JS files 5 | }, 6 | "search.exclude": { 7 | "out": true // set this to false to include "out" folder in search results 8 | }, 9 | // Turn off tsc task auto detection since we have the necessary tasks as npm scripts 10 | "typescript.tsc.autoDetect": "off" 11 | } -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "parser": "@typescript-eslint/parser", 4 | "parserOptions": { 5 | "ecmaVersion": 6, 6 | "sourceType": "module" 7 | }, 8 | "plugins": [ 9 | "@typescript-eslint" 10 | ], 11 | "rules": { 12 | "@typescript-eslint/class-name-casing": "warn", 13 | "@typescript-eslint/semi": "warn", 14 | "curly": "warn", 15 | "eqeqeq": "warn", 16 | "no-throw-literal": "warn", 17 | "semi": "off" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es6", 5 | "outDir": "out", 6 | "lib": [ 7 | "es6", 8 | "es2020.string" 9 | ], 10 | "sourceMap": true, 11 | "rootDir": "src", 12 | "strict": true /* enable all strict type-checking options */ 13 | /* Additional Checks */ 14 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 15 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 16 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 17 | }, 18 | "exclude": [ 19 | "node_modules", 20 | ".vscode-test" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /src/test/runTest.ts: -------------------------------------------------------------------------------- 1 | import * as path from 'path'; 2 | 3 | import { runTests } from 'vscode-test'; 4 | 5 | async function main() { 6 | try { 7 | // The folder containing the Extension Manifest package.json 8 | // Passed to `--extensionDevelopmentPath` 9 | const extensionDevelopmentPath = path.resolve(__dirname, '../../'); 10 | 11 | // The path to test runner 12 | // Passed to --extensionTestsPath 13 | const extensionTestsPath = path.resolve(__dirname, './suite/index'); 14 | 15 | // Download VS Code, unzip it and run the integration test 16 | await runTests({ extensionDevelopmentPath, extensionTestsPath }); 17 | } catch (err) { 18 | console.error('Failed to run tests'); 19 | process.exit(1); 20 | } 21 | } 22 | 23 | main(); 24 | -------------------------------------------------------------------------------- /src/extension.ts: -------------------------------------------------------------------------------- 1 | import * as vscode from 'vscode'; 2 | import { BoardEditorProvider } from './boardEditor'; 3 | 4 | export function activate(context: vscode.ExtensionContext) { 5 | context.subscriptions.push(BoardEditorProvider.register(context)); 6 | context.subscriptions.push(vscode.commands.registerCommand('markheadboard.boardEditor.reopen', () => { 7 | vscode.commands.executeCommand('vscode.openWith', vscode.window.activeTextEditor?.document.uri, 'markheadboard.boardEditor'); 8 | })); 9 | context.subscriptions.push(vscode.commands.registerCommand('markheadboard.boardEditor.openToSide', () => { 10 | vscode.window.showTextDocument(vscode.window.activeTextEditor!.document.uri, { viewColumn: vscode.ViewColumn.Beside }).then(editor => { 11 | vscode.commands.executeCommand('vscode.openWith', vscode.window.activeTextEditor?.document.uri, 'markheadboard.boardEditor'); 12 | }); 13 | })); 14 | } 15 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## 1.2.0 4 | 5 | - Changes 6 | - When command-clicking a column/card to open a link, previously it was always opened externally; now only http/https and mailto URIs are opened externally, and all other links are opened in editor tabs. 7 | - Bugfixes 8 | - Adding or editing a link on a level 3 heading was previously not being reflected on the board unless you refreshed. 9 | 10 | ## 1.1.0 11 | 12 | - Additions 13 | - If a column or card title contains links (in the `[title](href)` syntax), command-clicking it instead opens the first link. 14 | 15 | ## 1.0.0 16 | 17 | - Additions 18 | - You can now drag cards or columns around to rearrange them (the Markdown document will be updated). 19 | - Bugfixes 20 | - Headings of level 3 or more should not be treated as cards, lines with no space after the `#` or `##` should not be treated as headings. 21 | 22 | ## 0.0.1 23 | 24 | - Initial release -------------------------------------------------------------------------------- /src/test/suite/index.ts: -------------------------------------------------------------------------------- 1 | import * as path from 'path'; 2 | import * as Mocha from 'mocha'; 3 | import * as glob from 'glob'; 4 | 5 | export function run(): Promise { 6 | // Create the mocha test 7 | const mocha = new Mocha({ 8 | ui: 'tdd', 9 | color: true 10 | }); 11 | 12 | const testsRoot = path.resolve(__dirname, '..'); 13 | 14 | return new Promise((c, e) => { 15 | glob('**/**.test.js', { cwd: testsRoot }, (err, files) => { 16 | if (err) { 17 | return e(err); 18 | } 19 | 20 | // Add files to the test suite 21 | files.forEach(f => mocha.addFile(path.resolve(testsRoot, f))); 22 | 23 | try { 24 | // Run the mocha test 25 | mocha.run(failures => { 26 | if (failures > 0) { 27 | e(new Error(`${failures} tests failed.`)); 28 | } else { 29 | c(); 30 | } 31 | }); 32 | } catch (err) { 33 | console.error(err); 34 | e(err); 35 | } 36 | }); 37 | }); 38 | } 39 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2020 Jacob Williams 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Mark Headboard 2 | 3 | Provides a kanban-board-like view for Markdown files. 4 | Each level 1 heading is a column on the board, and each level 2 heading is a card in the column. 5 | 6 | ![demo](docs/demo.gif) 7 | 8 | Features: 9 | 10 | - clicking a card will take you to that section in the text editor 11 | - if a column or card title contains links (in the `[title](href)` syntax), command-clicking it instead opens the first link 12 | - drag & drop cards or columns to rearrange sections in the document 13 | 14 | ## Usage 15 | 16 | Two commands are added to the command palette: 17 | 18 | - `Mark Headboard: Reopen as Board` 19 | - `Mark Headboard: Open as Board to the Side` 20 | 21 | Or, you can use `Reopen Editor With`. 22 | 23 | ## Known Issues 24 | 25 | Markdown parsing is primitive and done via regex. 26 | Most notably, it doesn't yet know to ignore fenced code blocks when scanning for headings. 27 | Also, only atx-style headers (`#` and `##`) are supported, not setext-style headers. 28 | 29 | Moving the last column to the front does not work correctly if there is no trailing newline. 30 | -------------------------------------------------------------------------------- /media/boardEditor.css: -------------------------------------------------------------------------------- 1 | #columns { 2 | width: 100%; 3 | height: 100%; 4 | display: flex; 5 | flex-wrap: wrap; 6 | } 7 | 8 | .column { 9 | border-radius: 3px; 10 | cursor: default; 11 | max-width: 200px; 12 | margin-right: 8px; 13 | margin-top: 10px; 14 | min-width: 200px; 15 | padding: 10px; 16 | width: 200px; 17 | } 18 | 19 | .cards { 20 | list-style-type: none; 21 | max-height: 75vh; 22 | height: 100%; 23 | overflow-y: scroll; 24 | padding: 0; 25 | } 26 | 27 | .card { 28 | border-radius: 5px; 29 | cursor: default; 30 | margin-bottom: 8px; 31 | padding: 6px; 32 | width: 170px; 33 | } 34 | 35 | .has-link::before { 36 | content: '🔗 '; 37 | } 38 | 39 | .vscode-light .column { 40 | background-color: #f4f4f4; 41 | } 42 | 43 | .vscode-light .card { 44 | background-color: #e8e8e8; 45 | } 46 | 47 | .vscode-dark .column { 48 | background-color: #2c2c2c; 49 | } 50 | 51 | .vscode-dark .card { 52 | background-color: #3d3d3d; 53 | } 54 | 55 | .vscode-high-contrast .column { 56 | border: 1px solid orange; 57 | } 58 | 59 | .vscode-high-contrast .card { 60 | border: 1px solid blue; 61 | } 62 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | // A launch configuration that compiles the extension and then opens it inside a new window 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | { 6 | "version": "0.2.0", 7 | "configurations": [ 8 | { 9 | "name": "Run Extension", 10 | "type": "extensionHost", 11 | "request": "launch", 12 | "runtimeExecutable": "${execPath}", 13 | "args": [ 14 | "--extensionDevelopmentPath=${workspaceFolder}" 15 | ], 16 | "outFiles": [ 17 | "${workspaceFolder}/out/**/*.js" 18 | ], 19 | "preLaunchTask": "${defaultBuildTask}" 20 | }, 21 | { 22 | "name": "Extension Tests", 23 | "type": "extensionHost", 24 | "request": "launch", 25 | "runtimeExecutable": "${execPath}", 26 | "args": [ 27 | "--extensionDevelopmentPath=${workspaceFolder}", 28 | "--extensionTestsPath=${workspaceFolder}/out/test/suite/index" 29 | ], 30 | "outFiles": [ 31 | "${workspaceFolder}/out/test/**/*.js" 32 | ], 33 | "preLaunchTask": "${defaultBuildTask}" 34 | } 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /src/mdutil.ts: -------------------------------------------------------------------------------- 1 | const HEADING_REGEXP = /^(##?) +(.*)$/mg; 2 | const LINK_REGEXP = /\[(.*?)\]\((\S+?)\)/g; 3 | 4 | interface Section { 5 | start: number; 6 | end: number; 7 | index: number; 8 | heading: string; 9 | link?: string; 10 | children: Section[]; 11 | } 12 | 13 | function parseSectionHeading(section: Section) { 14 | if (!section.heading) { 15 | return; 16 | } 17 | 18 | section.heading = section.heading.replace(LINK_REGEXP, function(m: string, title: string, href: string) { 19 | section.link = section.link || href; 20 | return title; 21 | }); 22 | } 23 | 24 | export function parseHeadings(doc: string): Section { 25 | const root: Section = { start: 0, end: doc.length, index: 0, heading: '', children: [] }; 26 | let h1: Section | null = null; 27 | let h2: Section | null = null; 28 | let h1index = 0; 29 | let h2index = 0; 30 | 31 | for (const match of doc.matchAll(HEADING_REGEXP)) { 32 | if (match.index === undefined) { 33 | continue; 34 | } 35 | if (h2) { 36 | h2.end = match.index; 37 | } 38 | switch (match[1]) { 39 | case '#': 40 | if (h1) { 41 | h1.end = match.index; 42 | } 43 | h1 = { start: match.index, end: 0, index: h1index, heading: match[2], children: [] }; 44 | parseSectionHeading(h1); 45 | h1index += 1; 46 | h2index = 0; 47 | h2 = null; 48 | root.children.push(h1); 49 | break; 50 | case '##': 51 | if (h1) { 52 | h2 = { start: match.index, end: 0, index: h2index, heading: match[2], children: [] }; 53 | parseSectionHeading(h2); 54 | h2index += 1; 55 | h1.children.push(h2); 56 | } 57 | break; 58 | } 59 | } 60 | 61 | if (h1) { 62 | h1.end = root.end; 63 | } 64 | if (h2) { 65 | h2.end = root.end; 66 | } 67 | 68 | return root; 69 | } 70 | -------------------------------------------------------------------------------- /src/test/suite/mdutil.test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from 'assert'; 2 | import * as mdutil from '../../mdutil'; 3 | 4 | suite('mdutil', () => { 5 | suite('parseHeadings', () => { 6 | test('no headings', () => { 7 | const doc = 'Hello!\nThis is a #test document.\nIt has no sections.'; 8 | assert.deepStrictEqual(mdutil.parseHeadings(doc).children, []); 9 | }); 10 | 11 | test('normal doc', () => { 12 | const doc = `# First List 13 | ## Card 1.1 14 | ## Card 1.2 15 | 16 | some text 17 | 18 | ### sub-heading that should be ignored 19 | 20 | ## Card 1.3 21 | 22 | more 23 | text 24 | 25 | # Second List 26 | 27 | # Third List 28 | 29 | ## [Card 3.1 has a link](http://example.com/foo/bar) 30 | 31 | foo bar baz`; 32 | const expected = { 33 | start: 0, 34 | end: doc.length, 35 | index: 0, 36 | heading: '', 37 | children: [ 38 | { 39 | start: 0, 40 | end: doc.indexOf('# Second List'), 41 | index: 0, 42 | heading: 'First List', 43 | children: [ 44 | { start: doc.indexOf('## Card 1.1'), end: doc.indexOf('## Card 1.2'), index: 0, heading: 'Card 1.1', children: [] }, 45 | { start: doc.indexOf('## Card 1.2'), end: doc.indexOf('## Card 1.3'), index: 1, heading: 'Card 1.2', children: [] }, 46 | { start: doc.indexOf('## Card 1.3'), end: doc.indexOf('# Second List'), index: 2, heading: 'Card 1.3', children: [] }, 47 | ], 48 | }, 49 | { start: doc.indexOf('# Second List'), end: doc.indexOf('# Third List'), index: 1, heading: 'Second List', children: [] }, 50 | { 51 | start: doc.indexOf('# Third List'), 52 | end: doc.length, 53 | index: 2, 54 | heading: 'Third List', 55 | children: [ 56 | { start: doc.indexOf('## [Card 3.1'), end: doc.length, index: 0, heading: 'Card 3.1 has a link', link: 'http://example.com/foo/bar', children: [] }, 57 | ], 58 | }, 59 | ], 60 | }; 61 | assert.deepStrictEqual(mdutil.parseHeadings(doc), expected); 62 | }); 63 | }); 64 | }); 65 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "markheadboard", 3 | "displayName": "Mark Headboard", 4 | "description": "Edit a markdown file as a board with top-level headings shown as columns and second-level headings shown as cards.", 5 | "version": "1.2.0", 6 | "publisher": "brokensandals", 7 | "license": "MIT", 8 | "engines": { 9 | "vscode": "^1.47.0" 10 | }, 11 | "categories": [ 12 | "Other" 13 | ], 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/brokensandals/markheadboard.git" 17 | }, 18 | "activationEvents": [ 19 | "onCommand:markheadboard.boardEditor.reopen", 20 | "onCommand:markheadboard.boardEditor.openToSide", 21 | "onCustomEditor:markheadboard.boardEditor" 22 | ], 23 | "main": "./out/extension.js", 24 | "contributes": { 25 | "commands": [ 26 | { 27 | "category": "Mark Headboard", 28 | "command": "markheadboard.boardEditor.reopen", 29 | "title": "Reopen as Board" 30 | }, 31 | { 32 | "category": "Mark Headboard", 33 | "command": "markheadboard.boardEditor.openToSide", 34 | "title": "Open as Board to the Side" 35 | } 36 | ], 37 | "customEditors": [ 38 | { 39 | "viewType": "markheadboard.boardEditor", 40 | "displayName": "Mark Headboard", 41 | "selector": [ 42 | { 43 | "filenamePattern": "*.md" 44 | } 45 | ], 46 | "priority": "option" 47 | } 48 | ], 49 | "menus": { 50 | "commandPalette": [ 51 | { 52 | "command": "markheadboard.boardEditor.reopen", 53 | "when": "editorLangId == markdown" 54 | }, 55 | { 56 | "command": "markheadboard.boardEditor.openToSide", 57 | "when": "editorLangId == markdown" 58 | } 59 | ] 60 | } 61 | }, 62 | "scripts": { 63 | "vscode:prepublish": "npm run compile", 64 | "compile": "tsc -p ./", 65 | "lint": "eslint src --ext ts", 66 | "watch": "tsc -watch -p ./", 67 | "pretest": "npm run compile && npm run lint", 68 | "test": "node ./out/test/runTest.js" 69 | }, 70 | "devDependencies": { 71 | "@types/glob": "^7.1.1", 72 | "@types/mocha": "^7.0.2", 73 | "@types/node": "^13.11.0", 74 | "@types/vscode": "^1.47.0", 75 | "@typescript-eslint/eslint-plugin": "^2.30.0", 76 | "@typescript-eslint/parser": "^2.30.0", 77 | "eslint": "^6.8.0", 78 | "glob": "^7.1.6", 79 | "mocha": "^7.1.2", 80 | "typescript": "^3.8.3", 81 | "vscode-test": "^1.3.0" 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /vsc-extension-quickstart.md: -------------------------------------------------------------------------------- 1 | # Welcome to your VS Code Extension 2 | 3 | ## What's in the folder 4 | 5 | * This folder contains all of the files necessary for your extension. 6 | * `package.json` - this is the manifest file in which you declare your extension and command. 7 | * The sample plugin registers a command and defines its title and command name. With this information VS Code can show the command in the command palette. It doesn’t yet need to load the plugin. 8 | * `src/extension.ts` - this is the main file where you will provide the implementation of your command. 9 | * The file exports one function, `activate`, which is called the very first time your extension is activated (in this case by executing the command). Inside the `activate` function we call `registerCommand`. 10 | * We pass the function containing the implementation of the command as the second parameter to `registerCommand`. 11 | 12 | ## Get up and running straight away 13 | 14 | * Press `F5` to open a new window with your extension loaded. 15 | * Run your command from the command palette by pressing (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and typing `Hello World`. 16 | * Set breakpoints in your code inside `src/extension.ts` to debug your extension. 17 | * Find output from your extension in the debug console. 18 | 19 | ## Make changes 20 | 21 | * You can relaunch the extension from the debug toolbar after changing code in `src/extension.ts`. 22 | * You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes. 23 | 24 | 25 | ## Explore the API 26 | 27 | * You can open the full set of our API when you open the file `node_modules/@types/vscode/index.d.ts`. 28 | 29 | ## Run tests 30 | 31 | * Open the debug viewlet (`Ctrl+Shift+D` or `Cmd+Shift+D` on Mac) and from the launch configuration dropdown pick `Extension Tests`. 32 | * Press `F5` to run the tests in a new window with your extension loaded. 33 | * See the output of the test result in the debug console. 34 | * Make changes to `src/test/suite/extension.test.ts` or create new test files inside the `test/suite` folder. 35 | * The provided test runner will only consider files matching the name pattern `**.test.ts`. 36 | * You can create folders inside the `test` folder to structure your tests any way you want. 37 | 38 | ## Go further 39 | 40 | * Reduce the extension size and improve the startup time by [bundling your extension](https://code.visualstudio.com/api/working-with-extensions/bundling-extension). 41 | * [Publish your extension](https://code.visualstudio.com/api/working-with-extensions/publishing-extension) on the VSCode extension marketplace. 42 | * Automate builds by setting up [Continuous Integration](https://code.visualstudio.com/api/working-with-extensions/continuous-integration). 43 | -------------------------------------------------------------------------------- /src/boardEditor.ts: -------------------------------------------------------------------------------- 1 | import * as crypto from 'crypto'; 2 | import * as path from 'path'; 3 | import { pathToFileURL } from 'url'; 4 | import * as vscode from 'vscode'; 5 | import * as mdutil from './mdutil'; 6 | 7 | function shouldOpenExternally(href: string) { 8 | return href.startsWith('http://') || href.startsWith('https://') || href.startsWith('mailto:'); 9 | } 10 | 11 | function pathToUri(href: string, relativeToDir: string): vscode.Uri { 12 | href = href.split('#', 2)[0].split('?', 2)[0]; // remove query string or fragment 13 | if (!(href.startsWith('/'))) { 14 | href = relativeToDir + '/' + href; 15 | } 16 | return vscode.Uri.parse('file://' + href); 17 | } 18 | 19 | // This doesn't really do what I want - it only looks at _visible_ editors, I'd like to find any 20 | // _open_ editor - but there doesn't seem to be a good way to do that: https://github.com/microsoft/vscode/issues/15178 21 | function findOrOpenEditor(uri: vscode.Uri, callback: (editor: vscode.TextEditor) => void) { 22 | for (const editor of vscode.window.visibleTextEditors) { 23 | if (editor.document.uri.toString() === uri.toString()) { 24 | // Calling showTextDocument ensures that focus shifts to the editor; 25 | // including editor.viewColumn is necessary to keep it from opening a new editor 26 | // in the current column if the existing editor is in a different column. 27 | vscode.window.showTextDocument(editor.document, editor.viewColumn).then(callback); 28 | return; 29 | } 30 | } 31 | vscode.window.showTextDocument(uri).then(callback); 32 | } 33 | 34 | export class BoardEditorProvider implements vscode.CustomTextEditorProvider { 35 | public static register(context: vscode.ExtensionContext): vscode.Disposable { 36 | return vscode.window.registerCustomEditorProvider('markheadboard.boardEditor', new BoardEditorProvider(context)); 37 | } 38 | 39 | constructor( 40 | private readonly context: vscode.ExtensionContext 41 | ) { } 42 | 43 | public async resolveCustomTextEditor( 44 | document: vscode.TextDocument, 45 | webviewPanel: vscode.WebviewPanel, 46 | token: vscode.CancellationToken 47 | ): Promise { 48 | webviewPanel.webview.options = { 49 | enableScripts: true, 50 | }; 51 | 52 | function updateView() { 53 | webviewPanel.webview.postMessage({ type: 'refresh', root: mdutil.parseHeadings(document.getText()) }); 54 | } 55 | 56 | const disposables: vscode.Disposable[] = []; 57 | 58 | disposables.push(vscode.workspace.onDidChangeTextDocument(event => { 59 | if (event.document.uri.toString() === document.uri.toString()) { 60 | updateView(); 61 | } 62 | })); 63 | 64 | webviewPanel.onDidDispose(() => { 65 | disposables.forEach(d => d.dispose()); 66 | }); 67 | 68 | webviewPanel.webview.onDidReceiveMessage(message => { 69 | switch (message.type) { 70 | case 'open': 71 | if (typeof message.start === 'undefined' || typeof !message.heading === 'undefined') { 72 | // Should only get here in the case of a bug. 73 | return; 74 | } 75 | const pos = document.positionAt(message.start); 76 | const line = document.lineAt(pos); 77 | const textOffset = line.text.indexOf(message.heading); 78 | findOrOpenEditor(document.uri, editor => { 79 | editor.revealRange(new vscode.Range(pos, pos), vscode.TextEditorRevealType.AtTop); 80 | if (!message.heading) { 81 | editor.selection = new vscode.Selection(line.range.end, line.range.end); 82 | } else if (textOffset > -1) { 83 | editor.selection = new vscode.Selection( 84 | pos.translate(0, textOffset), 85 | pos.translate(0, textOffset + message.heading.length) 86 | ); 87 | } 88 | }); 89 | break; 90 | case 'openLink': 91 | if (typeof message.link === 'undefined') { 92 | // Should only get here in the case of a bug. 93 | return; 94 | } 95 | if (shouldOpenExternally(message.link)) { 96 | vscode.env.openExternal(vscode.Uri.parse(message.link)); 97 | } else { 98 | const parts = document.uri.path.split('/'); 99 | const parDir = parts.slice(0, parts.length-1).join('/'); 100 | vscode.window.showTextDocument(pathToUri(message.link, parDir)); 101 | } 102 | break; 103 | case 'move': 104 | if (typeof message.sourceStart === 'undefined' || typeof message.sourceEnd === 'undefined' || typeof message.dest === 'undefined') { 105 | // Should only get here in the case of a bug. 106 | return; 107 | } 108 | const edit = new vscode.WorkspaceEdit(); 109 | const sourceStart = document.positionAt(message.sourceStart); 110 | const sourceEnd = document.positionAt(message.sourceEnd); 111 | const sourceRange = new vscode.Range(sourceStart, sourceEnd); 112 | const sourceText = document.getText(sourceRange); 113 | const dest = document.positionAt(message.dest); 114 | edit.insert(document.uri, dest, sourceText); 115 | edit.delete(document.uri, sourceRange); 116 | vscode.workspace.applyEdit(edit); 117 | break; 118 | } 119 | }); 120 | 121 | const nonce = crypto.randomBytes(64).toString('hex'); 122 | webviewPanel.webview.html = ` 123 | 124 | 125 | 126 | 127 | 128 | Mark Headboard 129 | 130 | 131 |
132 | 133 | 134 | 135 | `; 136 | 137 | updateView(); 138 | } 139 | } 140 | -------------------------------------------------------------------------------- /media/boardEditor.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | const vscode = acquireVsCodeApi(); 3 | let root = null; 4 | 5 | function handleSectionClick(event) { 6 | const columnSec = root.children[parseInt(event.target.closest('.column').dataset.index, 10)]; 7 | const message = { type: 'open' }; 8 | const card = event.target.closest('.card'); 9 | if (card) { 10 | const cardSec = columnSec.children[parseInt(card.dataset.index, 10)]; 11 | message.start = cardSec.start; 12 | message.heading = cardSec.heading; 13 | message.link = cardSec.link; 14 | } else { 15 | message.start = columnSec.start; 16 | message.heading = columnSec.heading; 17 | message.link = columnSec.link; 18 | } 19 | if (event.metaKey && message.link) { 20 | message.type = 'openLink'; 21 | } 22 | vscode.postMessage(message); 23 | event.stopPropagation(); 24 | } 25 | 26 | function handleColumnSort(event) { 27 | console.log(event); 28 | const sourceColumnSec = root.children[event.oldDraggableIndex]; 29 | const message = { 30 | type: 'move', 31 | sourceStart: sourceColumnSec.start, 32 | sourceEnd: sourceColumnSec.end, 33 | }; 34 | const replaceIndex = (event.oldDraggableIndex < event.newDraggableIndex) ? event.newDraggableIndex + 1 : event.newDraggableIndex; 35 | if (replaceIndex < root.children.length) { 36 | message.dest = root.children[replaceIndex].start; 37 | } else { 38 | message.dest = root.end; 39 | } 40 | vscode.postMessage(message); 41 | window.setTimeout(updateColumns, 100); // if the change doesn't get saved, reset everything to previous state 42 | } 43 | 44 | function handleCardSort(event) { 45 | const sourceColumnSec = root.children[parseInt(event.from.closest('.column').dataset.index, 10)]; 46 | const sourceCardSec = sourceColumnSec.children[event.oldDraggableIndex]; 47 | const destColumnSec = root.children[parseInt(event.to.closest('.column').dataset.index, 10)]; 48 | const message = { 49 | type: 'move', 50 | sourceStart: sourceCardSec.start, 51 | sourceEnd: sourceCardSec.end, 52 | }; 53 | const replaceIndex = (event.from === event.to && event.oldDraggableIndex < event.newDraggableIndex) ? event.newDraggableIndex + 1 : event.newDraggableIndex; 54 | if (replaceIndex < destColumnSec.children.length) { 55 | message.dest = destColumnSec.children[replaceIndex].start; 56 | } else { 57 | message.dest = destColumnSec.end; 58 | } 59 | vscode.postMessage(message); 60 | window.setTimeout(updateColumns, 100); // if the change doesn't get saved, reset everything to previous state 61 | } 62 | 63 | function addSectionListeners(element) { 64 | element.addEventListener('click', handleSectionClick); 65 | } 66 | 67 | function updateCard(section, card) { 68 | card.className = 'card'; 69 | if (section.link) { 70 | card.className += ' has-link'; 71 | card.title = 'meta+click to open ' + section.link; 72 | } else { 73 | card.title = ''; 74 | } 75 | card.innerText = section.heading || '[UNTITLED]'; 76 | card.dataset.index = section.index; 77 | } 78 | 79 | function updateColumn(section, column) { 80 | column.className = 'column'; 81 | column.dataset.index = section.index; 82 | 83 | const columnHeadings = column.getElementsByClassName('column-name'); 84 | let columnHeading; 85 | if (columnHeadings.length) { 86 | columnHeading = columnHeadings[0]; 87 | } else { 88 | columnHeading = document.createElement('h1'); 89 | column.appendChild(columnHeading); 90 | } 91 | columnHeading.className = 'column-name'; 92 | if (section.link) { 93 | columnHeading.className += ' has-link'; 94 | columnHeading.title = 'meta+click to open ' + section.link; 95 | } else { 96 | columnHeading.title = ''; 97 | } 98 | columnHeading.innerText = section.heading || '[UNTITLED]'; 99 | 100 | const cardsContainers = column.getElementsByClassName('cards'); 101 | let cardsContainer; 102 | if (cardsContainers.length) { 103 | cardsContainer = cardsContainers[0]; 104 | } else { 105 | cardsContainer = document.createElement('ul'); 106 | cardsContainer.className = 'cards'; 107 | column.appendChild(cardsContainer); 108 | new Sortable(cardsContainer, { 109 | animation: 150, 110 | group: 'cards', 111 | onSort: handleCardSort, 112 | }); 113 | } 114 | 115 | const cards = cardsContainer.getElementsByClassName('card'); 116 | let index = 0; 117 | 118 | while (index < section.children.length && index < cards.length) { 119 | updateCard(section.children[index], cards[index]); 120 | index += 1; 121 | } 122 | 123 | while (index < section.children.length) { 124 | const card = document.createElement('li'); 125 | updateCard(section.children[index], card); 126 | addSectionListeners(card); 127 | cardsContainer.appendChild(card); 128 | index += 1; 129 | } 130 | 131 | while (index < cards.length) { 132 | cards[index].remove(); 133 | } 134 | } 135 | 136 | function updateColumns() { 137 | const columnsContainer = document.getElementById('columns'); 138 | const columns = columnsContainer.getElementsByClassName('column'); 139 | let index = 0; 140 | 141 | while (index < root.children.length && index < columns.length) { 142 | updateColumn(root.children[index], columns[index]); 143 | index += 1; 144 | } 145 | 146 | while (index < root.children.length) { 147 | const column = document.createElement('section'); 148 | updateColumn(root.children[index], column); 149 | addSectionListeners(column); 150 | columnsContainer.appendChild(column); 151 | index += 1; 152 | } 153 | 154 | while (index < columns.length) { 155 | columns[index].remove(); 156 | } 157 | } 158 | 159 | window.addEventListener('message', event => { 160 | const message = event.data; 161 | switch (message.type) { 162 | case 'refresh': 163 | root = message.root; 164 | updateColumns(root); 165 | vscode.setState({ root }); 166 | break; 167 | } 168 | }); 169 | 170 | new Sortable(document.getElementById('columns'), { 171 | animation: 150, 172 | onSort: handleColumnSort, 173 | }); 174 | 175 | const state = vscode.getState(); 176 | if (state) { 177 | root = state.root; 178 | updateColumns(); 179 | } 180 | }()); 181 | -------------------------------------------------------------------------------- /media/Sortable.min.js: -------------------------------------------------------------------------------- 1 | /*! Sortable 1.10.2 - MIT | git://github.com/SortableJS/Sortable.git */ 2 | !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Sortable=e()}(this,function(){"use strict";function o(t){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function a(){return(a=Object.assign||function(t){for(var e=1;e"===e[0]&&(e=e.substring(1)),t)try{if(t.matches)return t.matches(e);if(t.msMatchesSelector)return t.msMatchesSelector(e);if(t.webkitMatchesSelector)return t.webkitMatchesSelector(e)}catch(t){return!1}return!1}}function P(t,e,n,o){if(t){n=n||document;do{if(null!=e&&(">"===e[0]?t.parentNode===n&&h(t,e):h(t,e))||o&&t===n)return t;if(t===n)break}while(t=(i=t).host&&i!==document&&i.host.nodeType?i.host:i.parentNode)}var i;return null}var f,p=/\s+/g;function k(t,e,n){if(t&&e)if(t.classList)t.classList[n?"add":"remove"](e);else{var o=(" "+t.className+" ").replace(p," ").replace(" "+e+" "," ");t.className=(o+(n?" "+e:"")).replace(p," ")}}function R(t,e,n){var o=t&&t.style;if(o){if(void 0===n)return document.defaultView&&document.defaultView.getComputedStyle?n=document.defaultView.getComputedStyle(t,""):t.currentStyle&&(n=t.currentStyle),void 0===e?n:n[e];e in o||-1!==e.indexOf("webkit")||(e="-webkit-"+e),o[e]=n+("string"==typeof n?"":"px")}}function v(t,e){var n="";if("string"==typeof t)n=t;else do{var o=R(t,"transform");o&&"none"!==o&&(n=o+" "+n)}while(!e&&(t=t.parentNode));var i=window.DOMMatrix||window.WebKitCSSMatrix||window.CSSMatrix||window.MSCSSMatrix;return i&&new i(n)}function g(t,e,n){if(t){var o=t.getElementsByTagName(e),i=0,r=o.length;if(n)for(;i=e.left-n&&r<=e.right+n,i=a>=e.top-n&&a<=e.bottom+n;return n&&o&&i?l=t:void 0}}),l}((t=t.touches?t.touches[0]:t).clientX,t.clientY);if(e){var n={};for(var o in t)t.hasOwnProperty(o)&&(n[o]=t[o]);n.target=n.rootEl=e,n.preventDefault=void 0,n.stopPropagation=void 0,e[j]._onDragOver(n)}}}function kt(t){z&&z.parentNode[j]._isOutsideThisEl(t.target)}function Rt(t,e){if(!t||!t.nodeType||1!==t.nodeType)throw"Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(t));this.el=t,this.options=e=a({},e),t[j]=this;var n={group:null,sort:!0,disabled:!1,store:null,handle:null,draggable:/^[uo]l$/i.test(t.nodeName)?">li":">*",swapThreshold:1,invertSwap:!1,invertedSwapThreshold:null,removeCloneOnHide:!0,direction:function(){return Ot(t,this.options)},ghostClass:"sortable-ghost",chosenClass:"sortable-chosen",dragClass:"sortable-drag",ignore:"a, img",filter:null,preventOnFilter:!0,animation:0,easing:null,setData:function(t,e){t.setData("Text",e.textContent)},dropBubble:!1,dragoverBubble:!1,dataIdAttr:"data-id",delay:0,delayOnTouchOnly:!1,touchStartThreshold:(Number.parseInt?Number:window).parseInt(window.devicePixelRatio,10)||1,forceFallback:!1,fallbackClass:"sortable-fallback",fallbackOnBody:!1,fallbackTolerance:0,fallbackOffset:{x:0,y:0},supportPointer:!1!==Rt.supportPointer&&"PointerEvent"in window,emptyInsertThreshold:5};for(var o in O.initializePlugins(this,t,n),n)o in e||(e[o]=n[o]);for(var i in At(e),this)"_"===i.charAt(0)&&"function"==typeof this[i]&&(this[i]=this[i].bind(this));this.nativeDraggable=!e.forceFallback&&xt,this.nativeDraggable&&(this.options.touchStartThreshold=1),e.supportPointer?u(t,"pointerdown",this._onTapStart):(u(t,"mousedown",this._onTapStart),u(t,"touchstart",this._onTapStart)),this.nativeDraggable&&(u(t,"dragover",this),u(t,"dragenter",this)),bt.push(this.el),e.store&&e.store.get&&this.sort(e.store.get(this)||[]),a(this,T())}function Xt(t,e,n,o,i,r,a,l){var s,c,u=t[j],d=u.options.onMove;return!window.CustomEvent||w||E?(s=document.createEvent("Event")).initEvent("move",!0,!0):s=new CustomEvent("move",{bubbles:!0,cancelable:!0}),s.to=e,s.from=t,s.dragged=n,s.draggedRect=o,s.related=i||e,s.relatedRect=r||X(e),s.willInsertAfter=l,s.originalEvent=a,t.dispatchEvent(s),d&&(c=d.call(u,s,a)),c}function Yt(t){t.draggable=!1}function Bt(){Dt=!1}function Ft(t){for(var e=t.tagName+t.className+t.src+t.href+t.textContent,n=e.length,o=0;n--;)o+=e.charCodeAt(n);return o.toString(36)}function Ht(t){return setTimeout(t,0)}function Lt(t){return clearTimeout(t)}Rt.prototype={constructor:Rt,_isOutsideThisEl:function(t){this.el.contains(t)||t===this.el||(ht=null)},_getDirection:function(t,e){return"function"==typeof this.options.direction?this.options.direction.call(this,t,e,z):this.options.direction},_onTapStart:function(e){if(e.cancelable){var n=this,o=this.el,t=this.options,i=t.preventOnFilter,r=e.type,a=e.touches&&e.touches[0]||e.pointerType&&"touch"===e.pointerType&&e,l=(a||e).target,s=e.target.shadowRoot&&(e.path&&e.path[0]||e.composedPath&&e.composedPath()[0])||l,c=t.filter;if(function(t){St.length=0;var e=t.getElementsByTagName("input"),n=e.length;for(;n--;){var o=e[n];o.checked&&St.push(o)}}(o),!z&&!(/mousedown|pointerdown/.test(r)&&0!==e.button||t.disabled||s.isContentEditable||(l=P(l,t.draggable,o,!1))&&l.animated||Z===l)){if(J=F(l),et=F(l,t.draggable),"function"==typeof c){if(c.call(this,e,l,this))return W({sortable:n,rootEl:s,name:"filter",targetEl:l,toEl:o,fromEl:o}),K("filter",n,{evt:e}),void(i&&e.cancelable&&e.preventDefault())}else if(c&&(c=c.split(",").some(function(t){if(t=P(s,t.trim(),o,!1))return W({sortable:n,rootEl:t,name:"filter",targetEl:l,fromEl:o,toEl:o}),K("filter",n,{evt:e}),!0})))return void(i&&e.cancelable&&e.preventDefault());t.handle&&!P(s,t.handle,o,!1)||this._prepareDragStart(e,a,l)}}},_prepareDragStart:function(t,e,n){var o,i=this,r=i.el,a=i.options,l=r.ownerDocument;if(n&&!z&&n.parentNode===r){var s=X(n);if(q=r,G=(z=n).parentNode,V=z.nextSibling,Z=n,ot=a.group,rt={target:Rt.dragged=z,clientX:(e||t).clientX,clientY:(e||t).clientY},ct=rt.clientX-s.left,ut=rt.clientY-s.top,this._lastX=(e||t).clientX,this._lastY=(e||t).clientY,z.style["will-change"]="all",o=function(){K("delayEnded",i,{evt:t}),Rt.eventCanceled?i._onDrop():(i._disableDelayedDragEvents(),!c&&i.nativeDraggable&&(z.draggable=!0),i._triggerDragStart(t,e),W({sortable:i,name:"choose",originalEvent:t}),k(z,a.chosenClass,!0))},a.ignore.split(",").forEach(function(t){g(z,t.trim(),Yt)}),u(l,"dragover",Pt),u(l,"mousemove",Pt),u(l,"touchmove",Pt),u(l,"mouseup",i._onDrop),u(l,"touchend",i._onDrop),u(l,"touchcancel",i._onDrop),c&&this.nativeDraggable&&(this.options.touchStartThreshold=4,z.draggable=!0),K("delayStart",this,{evt:t}),!a.delay||a.delayOnTouchOnly&&!e||this.nativeDraggable&&(E||w))o();else{if(Rt.eventCanceled)return void this._onDrop();u(l,"mouseup",i._disableDelayedDrag),u(l,"touchend",i._disableDelayedDrag),u(l,"touchcancel",i._disableDelayedDrag),u(l,"mousemove",i._delayedDragTouchMoveHandler),u(l,"touchmove",i._delayedDragTouchMoveHandler),a.supportPointer&&u(l,"pointermove",i._delayedDragTouchMoveHandler),i._dragStartTimer=setTimeout(o,a.delay)}}},_delayedDragTouchMoveHandler:function(t){var e=t.touches?t.touches[0]:t;Math.max(Math.abs(e.clientX-this._lastX),Math.abs(e.clientY-this._lastY))>=Math.floor(this.options.touchStartThreshold/(this.nativeDraggable&&window.devicePixelRatio||1))&&this._disableDelayedDrag()},_disableDelayedDrag:function(){z&&Yt(z),clearTimeout(this._dragStartTimer),this._disableDelayedDragEvents()},_disableDelayedDragEvents:function(){var t=this.el.ownerDocument;d(t,"mouseup",this._disableDelayedDrag),d(t,"touchend",this._disableDelayedDrag),d(t,"touchcancel",this._disableDelayedDrag),d(t,"mousemove",this._delayedDragTouchMoveHandler),d(t,"touchmove",this._delayedDragTouchMoveHandler),d(t,"pointermove",this._delayedDragTouchMoveHandler)},_triggerDragStart:function(t,e){e=e||"touch"==t.pointerType&&t,!this.nativeDraggable||e?this.options.supportPointer?u(document,"pointermove",this._onTouchMove):u(document,e?"touchmove":"mousemove",this._onTouchMove):(u(z,"dragend",this),u(q,"dragstart",this._onDragStart));try{document.selection?Ht(function(){document.selection.empty()}):window.getSelection().removeAllRanges()}catch(t){}},_dragStarted:function(t,e){if(vt=!1,q&&z){K("dragStarted",this,{evt:e}),this.nativeDraggable&&u(document,"dragover",kt);var n=this.options;t||k(z,n.dragClass,!1),k(z,n.ghostClass,!0),Rt.active=this,t&&this._appendGhost(),W({sortable:this,name:"start",originalEvent:e})}else this._nulling()},_emulateDragOver:function(){if(at){this._lastX=at.clientX,this._lastY=at.clientY,Nt();for(var t=document.elementFromPoint(at.clientX,at.clientY),e=t;t&&t.shadowRoot&&(t=t.shadowRoot.elementFromPoint(at.clientX,at.clientY))!==e;)e=t;if(z.parentNode[j]._isOutsideThisEl(t),e)do{if(e[j]){if(e[j]._onDragOver({clientX:at.clientX,clientY:at.clientY,target:t,rootEl:e})&&!this.options.dragoverBubble)break}t=e}while(e=e.parentNode);It()}},_onTouchMove:function(t){if(rt){var e=this.options,n=e.fallbackTolerance,o=e.fallbackOffset,i=t.touches?t.touches[0]:t,r=U&&v(U,!0),a=U&&r&&r.a,l=U&&r&&r.d,s=Ct&>&&b(gt),c=(i.clientX-rt.clientX+o.x)/(a||1)+(s?s[0]-Et[0]:0)/(a||1),u=(i.clientY-rt.clientY+o.y)/(l||1)+(s?s[1]-Et[1]:0)/(l||1);if(!Rt.active&&!vt){if(n&&Math.max(Math.abs(i.clientX-this._lastX),Math.abs(i.clientY-this._lastY))o.right+10||t.clientX<=o.right&&t.clientY>o.bottom&&t.clientX>=o.left:t.clientX>o.right&&t.clientY>o.top||t.clientX<=o.right&&t.clientY>o.bottom+10}(n,a,this)&&!g.animated){if(g===z)return A(!1);if(g&&l===n.target&&(s=g),s&&(i=X(s)),!1!==Xt(q,l,z,o,s,i,n,!!s))return O(),l.appendChild(z),G=l,N(),A(!0)}else if(s.parentNode===l){i=X(s);var v,m,b,y=z.parentNode!==l,w=!function(t,e,n){var o=n?t.left:t.top,i=n?t.right:t.bottom,r=n?t.width:t.height,a=n?e.left:e.top,l=n?e.right:e.bottom,s=n?e.width:e.height;return o===a||i===l||o+r/2===a+s/2}(z.animated&&z.toRect||o,s.animated&&s.toRect||i,a),E=a?"top":"left",D=Y(s,"top","top")||Y(z,"top","top"),S=D?D.scrollTop:void 0;if(ht!==s&&(m=i[E],yt=!1,wt=!w&&e.invertSwap||y),0!==(v=function(t,e,n,o,i,r,a,l){var s=o?t.clientY:t.clientX,c=o?n.height:n.width,u=o?n.top:n.left,d=o?n.bottom:n.right,h=!1;if(!a)if(l&&pt