Quick actions

Quick actions are shapes that bridge editor interactions with menus and other UI functionalities. Lucid provides a vast catalog of quick actions that empower users by making some features (from toggling the laser pointer, to swapping products to even interaction with some integrations) more discoverable and available to use.

Quick actions are part of the extension API, this allows developers to create their own quick actions with custom icons, text, tool-tips and on-click functionality.

The following code snippet is an example that adds a new custom quick action to the quick action menu that prints "Hello, world!" on the web browser console.

import {CustomQuickAction} from 'lucid-extension-sdk/core/quicktools/customquickaction';
import {QuickToolsRegistry} from 'lucid-extension-sdk/core/quicktools/quicktoolsregistry';
import {EditorClient} from 'lucid-extension-sdk/editorclient';

const client = new EditorClient();

const quickAction: CustomQuickAction = {
  quickActionType: 'MyQuickAction',
  label: 'Print Hello, world!',
  action: () => {
    console.log('Hello, world!');
    return true;
  },
  enabledAction: () => true,
  visibleAction: () => true,
};
QuickToolsRegistry.addQuickActionToToolbar(client, quickAction);

The return statement on the action callback allows the editor to know if the user's click was handled by the quick action, or if we should allow other native Lucid interactions to handle it.

The action, enabled, and tooltips callbacks can also be defined with a parameter that will contain the id of the quick action block. With this id you can derive a lot of things like the QuickActionType or location of the block.