Wisk API Documentation

Index

• 1. Introduction
• 2. Plugins
  • 2.1 Plugin Structure
  • 2.2 Plugin Components
  • 2.3 Plugin Configuration Example
  • 2.4 Plugin Methods
  • 2.5 Plugin Functions
• 3. Database (db)
• 4. Theme
• 5. Editor

1. Introduction

This doc deals with building plugins for Wisk, a web-based note-taking app. Plugins are self-contained components that can be added to the editor to extend its functionality. The Wisk API provides a way to interact with the editor and the database, as well as to manage themes.

The Wisk API is accessible through the window.wisk object, which serves as the host for the Wisk API. It contains the following main components:

• plugins
• db
• theme
• editor (selector, pageId, elementIds, etc)

2. Plugins

The window.wisk.plugins object provides the following methods and properties:

• defaultPlugins: An array of default plugins
• loadedPlugins: An array of loaded plugins
• loadPlugin(plugin): Loads a plugin (internal method)
• pluginData: An object containing plugin data

2.1 Plugin Structure

A plugin is a JavaScript object with the following properties:

• name: The name of the plugin
• title: The title of the plugin
• icon: The icon of the plugin
• tags: An array of tags for the plugin
• description: A description of the plugin
• contents: An array of components

2.2 Plugin Components

Each component in the contents array is an object with the following properties:

• title: The title of the content
• icon: Displayed when installing the plugin
• category: Determines how the component will be shown (see details below)
• component: Self-contained web component
• nav: Whether the icon should appear in the nav bar
• module: Whether the content should be loaded as a module
• textual: Whether the content should be loaded as text (when true, the component shows a selector and the value is copied completely)

Component Categories

The category property determines how the component will be shown. It can be any one of the following:

• mini-dialog: A mini dialog
• full-dialog: A full dialog
• right-sidebar: A right sidebar
• left-sidebar: A left sidebar
• element: An element in editor
• context-box: Appears when text is selected
• no-gui: No GUI, just a function that runs in the background

2.3 Plugin Configuration Example

"example": {
    "example": {
        "name": "example",
        "title": "Example",
        "icon": "access-manager.svg",
        "tags": ["example", "demo"],
        "description": "An example plugin",
        "contents": [
            {
                "title": "Example",
                "icon": "example.svg",
                "category": "mini-dialog",
                "component": "example",
                "nav": false,
                "module": false,
                "textual": true
            }
        ]
    }
}

2.4 Plugin Methods

Plugins can have the following optional methods:

• installed: Runs when the plugin is installed (should be in the first content of the plugin)
• uninstalled: Runs when the plugin is uninstalled (should be in the first content of the plugin)
• load: Runs when the component is loaded, initializes the component if needed
• unload: Runs when the component is unloaded
• focus: Runs when the component is focused
• blur: Runs when the component is blurred
• focusOnCaret: Runs when the component should focus on the caret (only for textual components)

2.5 Plugin Functions

Plugins can run these functions to interact with the editor and/or other plugins:

• showSelector: function(elementId) {}
• createNewBlock: function(elementId, blockType, value) {}
• deleteBlock: function(elementId) {}
• focusBlock: function(elementId, identifier) {}
• updateBlock: function(elementId, path, value) {}
• runBlockFunction: function(elementId, functionName, value) {}
• justUpdates: function(elementId, value) {}

3. Database (db)

Wisk supports a key-value store database. The following methods are available: // change to getPages etc

• getItems(pageId): Gets all items for a page
• setItem(pageId, value): Sets an item for a page
• removeItem(pageId): Removes an item for a page
• getAllItems(): Gets all items

4. Theme

Theme data is stored locally in the browser. The window.wisk.theme object supports the following methods:

• setTheme(theme): Sets the theme
• getTheme(): Gets the current theme
• getThemes(): Gets all themes
• getThemeData(): Gets the data for a theme

5. Editor

The window.wisk.editor object supports these properties and methods:

• showSelector(elementId): Shows the selector for element type
• newElement: TODO
• changeElement: TODO
• pageId: The current page id
• elementIds: An array of element ids