Create a Plugin

Plugins Documentation

Things you will need 🎯

• Linux, Mac OS X, or Windows.
• git (used for source version control).

Getting the code and configuring your environment 🖥️

• Please refer to the guide provided for setting up the environment.
• For creating a plugin to Canvasboard, We will be focusing on majorly src/app/plugins folder and src/app/components/new-board folder.
• Create a new branch git switch -c add-plugin-<name_of_plugin>

Template 📋

For Template of making your own plugin you can refer to any plugin file like cb-h1.ts or follow the below template

declare var $: any;

export class Add<name_of_plugin>Component {

  constructor() {

  }

    // <name_of_plugin> HTML Tag
    add<name_of_plugin>TagHTMLCode(uid) {

      $(`#cb-buttons-${uid}`).append(`
      <!-- <name_of_plugin> tag -->
       <!-- your plugin HTML code here -->
      `);
    }

    add<name_of_plugin>TagClickFunction = (uid) => {
        // Adding <name_of_plugin> Tags
        // Plugin function Code here
    }

    add<name_of_plugin>TagToolBox = (uid) => {
     // ToolBox Plugin Code here
    }

}

• Create a new file <name_of_plugin>.ts with the above template and replace <name_of_plugin> with your Plugin Name.
• Now the same HTML code will be needed to be added in src/app/components/new-board/new-board.component.html under div with class plugins.
• Add the necessary plugins stylesheet to styles.scss in src folder under TOOLBOX UTILITIES comment.

Adding to the Board 📝

All the changes should be done in new-board.component.ts in folder src/app/components/new-board.

• Add Import statement import { Add<name_of_plugin>Component } from '../../plugins/<name_of_plugin>'; under Importing Plugins comment.
• Add declare plugin variable Add<name_of_plugin>Component:any; under Initializing plugins comment;
• Initialize the plugin variable in constructor in the format this.Add<name_of_plugin>Component = new Add<name_of_plugin>Component();.
• Create a function at the end of file cbToolbox<name_of_plugin> which should to be added as angular click function in the new-board.component.html plugin html code as (click)= cbToolbox<name_of_plugin>().
• Inside the function, it needs to call addBlockEditor which will create a new card when it is called and add a new number as the function parameter like this.addBlockEditor('main-box', <new_incremented_number>);
• Inside the addBlockEditor function add new switch case statement with the number which was called above and call your plugin toolbox function in the following way

$(`#${id}`).append(this.blockFunction(uid));
this.Add<name_of_plugin>Component.add<name_of_plugin>TextToolBox(uid);
break;

Unit Testing 👨‍💻👩‍💻

We will provide a template for testing soon for now run the already given test cases and run the application to check for any errors.

ng lint
ng test --no-watch
ng serve -o --poll=2000

Create a PR 🚀

After you are done with all the changes and have tested it, follow these steps for creating a PR:

1. Add the changes to the staging using git add .

2. Commit the changes using: git commit -a -m "Add Plugin <name_of_plugin>"

3. Pull the changes from the upstream using git pull upstream master

4. push the branch to your forked repository using: git push origin add-plugin-<name_of_plugin>

5. Go to your GitHub forked repository and make the PR using the pushed branch. Also make sure you don't have any merge conflicts while opening a PR.

6. Add corresponding Screenshots/GIFs to the PR to display the necessary UI changes and plugin Actions.

Thats it Folks!! 🎉 You have created a plugin for the Canvasboard 🚀