/azure-devops-wiki-editor

Chrome Extension enables WYSIWYG editor in Azure DevOps wiki

Primary LanguageTypeScriptMIT LicenseMIT

Build and Release

Azure DevOps Wiki Editor

Chrome Extension enables WYSIWYG editor in Azure DevOps markdown wiki. Based on great work of Toast UI Editor.

🚀 Prerequisites

  • Node.js (v12 or higher)
  • npm (comes with Node.js)
  • Google Chrome browser

🛠️ How to Build

🔧 Development Build

To build the development version of the extension, follow these steps:

  1. Clone the Repository:

    git clone https://github.com/bthos/azure-devops-wiki-editor.git
cd azure-devops-wiki-editor

  2. Install Dependencies: Make sure you have Node.js and npm installed. Then, run the following command to install the required dependencies:

    npm install

  3. Build the Development Version: Run the following command to build the development version of the extension:

    npm run dev-build

This will create a development build in the dist/ directory. The development build includes source maps and unminified code for easier debugging.

📦 Production Build

To build the production version of the extension, follow these steps:

  1. Install Dependencies: If you haven't already, install the dependencies:

    npm install

  2. Clean the Build Directory (Optional):

    npm run clean

  3. Build the Production Version: Run the following command to build the production version of the extension:

    npm run build

This will create a production build in the dist/ directory. The production build is optimized with minified code and no source maps. It also creates a ZIP file ready for distribution.

💻 Development Server

To test the editor functionality locally before installing it as a Chrome extension:

  1. Start the development server:

    npm run server

  2. Open your browser and navigate to: http://localhost:8080/test.html

  3. You'll see a test page with the WYSIWYG editor where you can try out the features without needing to install the extension.

🧪 Testing the Extension

🔍 Local Testing

  1. Build the extension using either the development or production build steps above
  2. Open Chrome and navigate to chrome://extensions/
  3. Enable "Developer mode" by toggling the switch in the top right corner
  4. Click on the "Load unpacked" button
  5. Select the dist/ directory where the build files are located
  6. Navigate to any Azure DevOps wiki page
  7. Try editing a page to verify the WYSIWYG editor appears and functions correctly
  8. Test the following features:
    • Basic text formatting (bold, italic, lists)
    • Creating and editing tables
    • Adding links and images
    • Switching between WYSIWYG and Markdown modes
    • Saving changes to the wiki page

❗ Troubleshooting

If the editor doesn't appear:

  1. Check the browser's console for any error messages
  2. Try refreshing the page
  3. Ensure the extension is enabled in Chrome
  4. Verify you're on a supported Azure DevOps wiki page (URL should match *://dev.azure.com/*/_wiki/* or *://*.visualstudio.com/*/_wiki/*)

✨ Features

  • WYSIWYG editing interface for Azure DevOps Wiki pages
  • Real-time preview of markdown changes
  • Support for all standard markdown syntax:
    • Headers (H1-H6)
    • Lists (ordered and unordered)
    • Tables with easy editing interface
    • Code blocks with syntax highlighting
    • Task lists (checkboxes)
    • Blockquotes
  • Azure DevOps specific features:
    • @mentions support
    • Wiki TOC generation ([[_TOC_]])
    • Wiki links
    • Work item links (#123)
  • Image upload and embedding
  • Split screen mode (editor/preview)
  • Full screen editing mode

⌨️ Keyboard Shortcuts

Action Windows/Linux macOS
Bold Ctrl+B ⌘+B
Italic Ctrl+I ⌘+I
Strike Through Ctrl+S ⌘+S
Heading 1-6 Ctrl+1-6 ⌘+1-6
Code Block Ctrl+Shift+C ⌘+Shift+C
Link Ctrl+K ⌘+K
Switch to HTML Ctrl+Tab ⌘+Tab
Save Changes Ctrl+S ⌘+S

👥 Contributing

  1. Fork the repository
  2. Create a new branch for your feature or bugfix
  3. Make your changes
  4. Test thoroughly using the steps above
  5. Create a pull request with a clear description of your changes

📄 License

This project is licensed under the ISC License. See the LICENSE file for details.

📚 Repository

The source code for this project is available at GitHub.

🐛 Bugs and Issues

If you encounter any issues:

  1. Check the existing issues to see if it's already reported
  2. If not, create a new issue with:
    • Steps to reproduce the problem
    • Expected behavior
    • Actual behavior
    • Browser version and OS
    • Any relevant error messages from the console

📦 Dependencies

  • @toast-ui/editor: ^3.2.2 - The core WYSIWYG editor component

🛠️ DevDependencies

  • @types/chrome: ^0.0.239 - TypeScript definitions for Chrome extension APIs
  • copy-webpack-plugin: ^11.0.0 - Copies static assets during build
  • cross-env: ^7.0.3 - Sets environment variables across platforms
  • css-minimizer-webpack-plugin: ^7.0.2 - Minimizes CSS files
  • http-server: ^14.1.1 - Simple HTTP server for development
  • terser-webpack-plugin: ^5.3.14 - JavaScript minification
  • ts-loader: ^9.4.4 - TypeScript loader for webpack
  • typescript: ^5.1.6 - TypeScript compiler
  • webpack: ^5.88.1 - Module bundler
  • webpack-cli: ^5.1.4 - Webpack command line interface
  • zip-webpack-plugin: ^4.0.3 - Creates ZIP file for production builds

📜 Scripts

  • clean: Removes the dist directory and zip files
  • test: Currently just a placeholder (exits with code 0)
  • dev-build: Builds development version with source maps
  • build: Builds production version with optimizations and creates ZIP file
  • server: Starts a local development server
  • version: Updates version.txt file and adds it to git