diff --git a/src/client/initialize.ts b/src/client/initialize.ts index a025bd3..3a50b50 100644 --- a/src/client/initialize.ts +++ b/src/client/initialize.ts @@ -3,6 +3,7 @@ import { PluginConfig, PluginInstance, PluginMessageResponse, + PluginStyle, WorkbookSelection, WorkbookVariable, } from '../types'; @@ -223,6 +224,18 @@ export function initialize(): PluginInstance { void execPromise('wb:plugin:element:fetch-more', configId); }, }, + + style: { + subscribe(callback: (style: PluginStyle) => void) { + on('wb:plugin:style:update', callback); + return () => off('wb:plugin:style:update', callback); + }, + + get() { + return execPromise('wb:plugin:style:get'); + }, + }, + destroy() { Object.keys(listeners).forEach(event => delete listeners[event]); window.removeEventListener('message', listener, false); diff --git a/src/react/hooks.ts b/src/react/hooks.ts index 7981771..ad22321 100644 --- a/src/react/hooks.ts +++ b/src/react/hooks.ts @@ -8,6 +8,7 @@ import { WorkbookElementData, WorkbookSelection, WorkbookVariable, + PluginStyle, } from '../types'; import { deepEqual } from '../utils/deepEqual'; @@ -246,3 +247,20 @@ export function useActionEffect(configId: string, effect: () => void) { return client.config.registerEffect(configId, effectRef.current); }, [client, configId, effect]); } + +/** + * React hook for accessing plugin style with live updates + * @returns {PluginStyle | undefined} Style properties from the workbook if available + */ +export function usePluginStyle(): PluginStyle | undefined { + const client = usePlugin(); + const [style, setStyle] = useState(); + + useEffect(() => { + // Request initial style data on mount and subscribe to updates + void client.style.get().then(response => setStyle(response)); + return client.style.subscribe(setStyle); + }, [client]); + + return style; +} diff --git a/src/types.ts b/src/types.ts index a05c74c..8548e29 100644 --- a/src/types.ts +++ b/src/types.ts @@ -23,6 +23,15 @@ export interface PluginConfig { [key: string]: any; } +/** + * Style colors available to plugins + * @typedef {object} PluginStyle + * @property {string} backgroundColor Background color set from workbook if any + */ +export interface PluginStyle { + backgroundColor: string; +} + /** * @typedef {object} WorkbookVariable * @property {string} name Name of control variable within workbook @@ -348,6 +357,21 @@ export interface PluginInstance { fetchMoreElementData(configId: string): void; }; + style: { + /** + * Subscribe to style updates + * @param callback Function to call when style updates + * @returns Unsubscriber function + */ + subscribe(callback: (style: PluginStyle) => void): () => void; + + /** + * Request current style from workbook + * @returns Promise with current style + */ + get(): Promise; + }; + /** * Destroys plugin instance and removes all subscribers */