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.