lucid-extension-sdk

Description

TypeScript SDK for building in-editor extensions for the products of Lucid Software.

Getting started

To get started building an extension for Lucid products, follow the instructions in the lucid-package CLI.

Simple examples

Add a new entry in the main menu

import {EditorClient, Menu, MenuType} from 'lucid-extension-sdk';

const client = new EditorClient();
const menu = new Menu(client);

client.registerAction('my-new-action', () => {
    console.log('Hello world');
});

menu.addDropdownMenuItem({
    label: 'Hello world',
    action: 'my-new-action',
});

Create a new page and add some shapes to it

import {DocumentProxy, EditorClient, Menu, MenuType, Viewport} from 'lucid-extension-sdk';

const client = new EditorClient();
const menu = new Menu(client);
const viewport = new Viewport(client);
const document = new DocumentProxy(client);

client.registerAction('create-content', async () => {
    const page = document.addPage({title: 'Hello world'});
    viewport.setCurrentPage(page);

    //Before creating any blocks, you must make sure the code
    //for that kind of block is loaded.
    await client.loadBlockClasses(['ProcessBlock']);

    let y = 0;
    for (const char of 'Hello world') {
        const block = page.addBlock({
            className: 'ProcessBlock',
            boundingBox: {
                x: 0,
                y,
                w: 60,
                h: 60,
            },
        });

        const textAreaName = block.textAreas.keys()[0];
        block.textAreas.set(textAreaName, char);

        y += 80;
    }
});

menu.addDropdownMenuItem({
    label: 'Hello world',
    action: 'create-content',
});

Create and download a CSV with shape data from the current page

import {EditorClient, Menu, MenuLocation, MenuType, Viewport} from 'lucid-extension-sdk';

const client = new EditorClient();
const menu = new Menu(client);
const viewport = new Viewport(client);

client.registerAction('download', async () => {
    const page = viewport.getCurrentPage();
    if (!page) {
        return;
    }

    const csv: string[][] = [['Type', 'ID', 'Text', 'DataValue']];

    for (const [id, block] of page?.allBlocks) {
        csv.push([
            block.getClassName(),
            block.id,
            block.textAreas.first() ?? '',
            JSON.stringify(block.allShapeData.get('DataValue')),
        ]);
    }

    client.download('data.csv', csv.map((line) => line.join(',')).join('\n'), 'text/plain', false);
});

menu.addDropdownMenuItem({
    label: 'Download CSV',
    action: 'download',
    location: MenuLocation.Export, //Near File -> Export
});

License

This project is distributed under the Apache License, Version 2.0, see LICENSE for more information.