@embedpdf/plugin-ui 1.0.16 → 1.0.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +10 -93
- package/dist/index.js.map +1 -1
- package/dist/lib/index.d.ts +0 -1
- package/dist/lib/menu/types.d.ts +8 -0
- package/dist/lib/menu/utils.d.ts +1 -0
- package/dist/lib/types.d.ts +3 -4
- package/dist/lib/ui-plugin.d.ts +0 -1
- package/dist/preact/index.cjs +1 -1
- package/dist/preact/index.cjs.map +1 -1
- package/dist/preact/index.js +0 -29
- package/dist/preact/index.js.map +1 -1
- package/dist/react/index.cjs +1 -1
- package/dist/react/index.cjs.map +1 -1
- package/dist/react/index.js +0 -29
- package/dist/react/index.js.map +1 -1
- package/dist/shared-preact/hooks/index.d.ts +0 -1
- package/dist/shared-react/hooks/index.d.ts +0 -1
- package/package.json +4 -4
- package/dist/lib/icons/icon-manager.d.ts +0 -47
- package/dist/lib/icons/types.d.ts +0 -36
- package/dist/shared-preact/hooks/use-icon.d.ts +0 -15
- package/dist/shared-react/hooks/use-icon.d.ts +0 -15
package/dist/react/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-ui.ts","../../src/shared/
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-ui.ts","../../src/shared/components/component-wrapper.tsx","../../src/shared/components/plugin-ui-provider.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { UIPlugin } from '@embedpdf/plugin-ui';\n\nexport const useUIPlugin = () => usePlugin<UIPlugin>(UIPlugin.id);\nexport const useUICapability = () => useCapability<UIPlugin>(UIPlugin.id);\n","import { useState, useEffect } from '@framework';\nimport { childrenFunctionOptions, UIComponent } from '@embedpdf/plugin-ui';\n\nexport function ComponentWrapper({\n component,\n parentContext = {},\n}: {\n component: UIComponent<any>;\n parentContext?: Record<string, any>;\n}) {\n const [_, forceUpdate] = useState({});\n\n useEffect(() => {\n const updateCallback = () => forceUpdate({});\n // If the component had updated before we attach the listener, force one re-render\n if (component.onUpdate(updateCallback)) {\n forceUpdate({});\n }\n return () => component.offUpdate(updateCallback);\n }, [component]);\n\n // Merge contexts from parent + the UIComponent's own child context\n const childContext = component.getChildContext(parentContext);\n\n // Instead of returning `component.render()`, we do the following:\n\n // 1) Look up the \"renderer function\" for this component type\n const renderer = component.getRenderer(); // We'll define getRenderer() below\n\n if (!renderer) {\n throw new Error(`No renderer for type: ${component.getRenderType}`);\n }\n\n // 2) Build a function that returns child wrappers\n function renderChildrenFn(options?: childrenFunctionOptions) {\n const merged = options?.context ? { ...childContext, ...options.context } : childContext;\n return component\n .getChildren()\n .filter(({ id }) => {\n // If filter function is provided, use it to determine if we should include this child\n return !options?.filter || options.filter(id);\n })\n .map(({ component: child, id, className }) =>\n className ? (\n <div className={className}>\n <ComponentWrapper key={id} component={child} parentContext={merged} />\n </div>\n ) : (\n <ComponentWrapper key={id} component={child} parentContext={merged} />\n ),\n );\n }\n\n // 3) Finally call the renderer with (props, childrenFn, context)\n return renderer(component.props, renderChildrenFn, childContext);\n}\n","import { ReactNode } from '@framework';\nimport { useUICapability } from '../hooks';\nimport { ComponentWrapper } from './component-wrapper';\nimport { UIComponent } from '@embedpdf/plugin-ui';\n\n/**\n * Interface for UI components organized by type/location\n */\nexport interface UIComponentsMap {\n headers: {\n top: ReactNode[];\n bottom: ReactNode[];\n left: ReactNode[];\n right: ReactNode[];\n };\n panels: {\n left: ReactNode[];\n right: ReactNode[];\n };\n floating: {\n insideScroller: ReactNode[];\n outsideScroller: ReactNode[];\n };\n commandMenu: ReactNode | null;\n}\n\n/**\n * Props for the PluginUIProvider\n */\nexport interface PluginUIProviderProps {\n /**\n * Render function that receives UI components\n */\n children: (components: UIComponentsMap) => ReactNode;\n}\n\n/**\n * PluginUIProvider collects all components from the UI plugin system\n * and provides them to a render function without imposing any structure.\n *\n * It uses the render props pattern for maximum flexibility.\n */\nexport function PluginUIProvider({ children }: PluginUIProviderProps) {\n const { provides: uiProvides } = useUICapability();\n\n // Helper function to wrap UIComponents as JSX elements\n const wrapComponents = (components: UIComponent<any>[]): ReactNode[] => {\n return components.map((component) => (\n <ComponentWrapper key={component.props.id} component={component} />\n ));\n };\n\n // Collect and wrap all components from UI plugin\n const componentMap: UIComponentsMap = {\n headers: {\n top: wrapComponents(uiProvides?.getHeadersByPlacement('top') || []),\n bottom: wrapComponents(uiProvides?.getHeadersByPlacement('bottom') || []),\n left: wrapComponents(uiProvides?.getHeadersByPlacement('left') || []),\n right: wrapComponents(uiProvides?.getHeadersByPlacement('right') || []),\n },\n panels: {\n left: wrapComponents(uiProvides?.getPanelsByLocation('left') || []),\n right: wrapComponents(uiProvides?.getPanelsByLocation('right') || []),\n },\n floating: {\n insideScroller: wrapComponents(uiProvides?.getFloatingComponents('inside') || []),\n outsideScroller: wrapComponents(uiProvides?.getFloatingComponents('outside') || []),\n },\n commandMenu: uiProvides?.getCommandMenu() ? (\n <ComponentWrapper component={uiProvides.getCommandMenu()!} />\n ) : null,\n };\n\n // Let the consumer determine the layout structure through the render prop\n return children(componentMap);\n}\n"],"names":[],"mappings":";;;;AAGO,MAAM,cAAc,MAAM,UAAoB,SAAS,EAAE;AACzD,MAAM,kBAAkB,MAAM,cAAwB,SAAS,EAAE;ACDjE,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,gBAAgB,CAAA;AAClB,GAGG;AACD,QAAM,CAAC,GAAG,WAAW,IAAI,SAAS,CAAA,CAAE;AAEpC,YAAU,MAAM;AACd,UAAM,iBAAiB,MAAM,YAAY,EAAE;AAEvC,QAAA,UAAU,SAAS,cAAc,GAAG;AACtC,kBAAY,CAAA,CAAE;AAAA,IAAA;AAET,WAAA,MAAM,UAAU,UAAU,cAAc;AAAA,EAAA,GAC9C,CAAC,SAAS,CAAC;AAGR,QAAA,eAAe,UAAU,gBAAgB,aAAa;AAKtD,QAAA,WAAW,UAAU,YAAY;AAEvC,MAAI,CAAC,UAAU;AACb,UAAM,IAAI,MAAM,yBAAyB,UAAU,aAAa,EAAE;AAAA,EAAA;AAIpE,WAAS,iBAAiB,SAAmC;AACrD,UAAA,UAAS,mCAAS,WAAU,EAAE,GAAG,cAAc,GAAG,QAAQ,QAAA,IAAY;AAC5E,WAAO,UACJ,YAAY,EACZ,OAAO,CAAC,EAAE,SAAS;AAElB,aAAO,EAAC,mCAAS,WAAU,QAAQ,OAAO,EAAE;AAAA,IAC7C,CAAA,EACA;AAAA,MAAI,CAAC,EAAE,WAAW,OAAO,IAAI,UAAU,MACtC,YACE,oBAAC,OAAI,EAAA,WACH,UAAC,oBAAA,kBAAA,EAA0B,WAAW,OAAO,eAAe,OAArC,GAAA,EAA6C,EACtE,CAAA,IAEC,oBAAA,kBAAA,EAA0B,WAAW,OAAO,eAAe,OAAA,GAArC,EAA6C;AAAA,IAExE;AAAA,EAAA;AAIJ,SAAO,SAAS,UAAU,OAAO,kBAAkB,YAAY;AACjE;ACbgB,SAAA,iBAAiB,EAAE,YAAmC;AACpE,QAAM,EAAE,UAAU,WAAW,IAAI,gBAAgB;AAG3C,QAAA,iBAAiB,CAAC,eAAgD;AAC/D,WAAA,WAAW,IAAI,CAAC,cACrB,oBAAC,oBAA0C,aAApB,UAAU,MAAM,EAA0B,CAClE;AAAA,EACH;AAGA,QAAM,eAAgC;AAAA,IACpC,SAAS;AAAA,MACP,KAAK,gBAAe,yCAAY,sBAAsB,WAAU,CAAA,CAAE;AAAA,MAClE,QAAQ,gBAAe,yCAAY,sBAAsB,cAAa,CAAA,CAAE;AAAA,MACxE,MAAM,gBAAe,yCAAY,sBAAsB,YAAW,CAAA,CAAE;AAAA,MACpE,OAAO,gBAAe,yCAAY,sBAAsB,aAAY,CAAE,CAAA;AAAA,IACxE;AAAA,IACA,QAAQ;AAAA,MACN,MAAM,gBAAe,yCAAY,oBAAoB,YAAW,CAAA,CAAE;AAAA,MAClE,OAAO,gBAAe,yCAAY,oBAAoB,aAAY,CAAE,CAAA;AAAA,IACtE;AAAA,IACA,UAAU;AAAA,MACR,gBAAgB,gBAAe,yCAAY,sBAAsB,cAAa,CAAA,CAAE;AAAA,MAChF,iBAAiB,gBAAe,yCAAY,sBAAsB,eAAc,CAAE,CAAA;AAAA,IACpF;AAAA,IACA,cAAa,yCAAY,oBACvB,oBAAC,oBAAiB,WAAW,WAAW,eAAe,EAAA,CAAI,IACzD;AAAA,EACN;AAGA,SAAO,SAAS,YAAY;AAC9B;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@embedpdf/plugin-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.17",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.cjs",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -23,19 +23,19 @@
|
|
|
23
23
|
}
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@embedpdf/models": "1.0.
|
|
26
|
+
"@embedpdf/models": "1.0.17"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@types/react": "^18.2.0",
|
|
30
30
|
"typescript": "^5.0.0",
|
|
31
31
|
"@embedpdf/build": "1.0.0",
|
|
32
|
-
"@embedpdf/core": "1.0.
|
|
32
|
+
"@embedpdf/core": "1.0.17"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"react": ">=16.8.0",
|
|
36
36
|
"react-dom": ">=16.8.0",
|
|
37
37
|
"preact": "^10.26.4",
|
|
38
|
-
"@embedpdf/core": "1.0.
|
|
38
|
+
"@embedpdf/core": "1.0.17"
|
|
39
39
|
},
|
|
40
40
|
"files": [
|
|
41
41
|
"dist",
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import { Icon, IconCapabilities, IconIdentifier, IconRegistry } from './types';
|
|
2
|
-
/**
|
|
3
|
-
* Registry for managing icons throughout the application
|
|
4
|
-
*/
|
|
5
|
-
export declare class IconManager {
|
|
6
|
-
private icons;
|
|
7
|
-
constructor(icons: Icon[] | IconRegistry);
|
|
8
|
-
/**
|
|
9
|
-
* Register a single icon
|
|
10
|
-
*/
|
|
11
|
-
registerIcon(icon: Icon): void;
|
|
12
|
-
/**
|
|
13
|
-
* Register multiple icons at once
|
|
14
|
-
*/
|
|
15
|
-
registerIcons(icons: Icon[] | IconRegistry): void;
|
|
16
|
-
/**
|
|
17
|
-
* Get all registered icons
|
|
18
|
-
*/
|
|
19
|
-
getAllIcons(): IconRegistry;
|
|
20
|
-
/**
|
|
21
|
-
* Get an icon by its ID
|
|
22
|
-
*/
|
|
23
|
-
getIcon(id: string): Icon | undefined;
|
|
24
|
-
/**
|
|
25
|
-
* Check if an identifier is an SVG string
|
|
26
|
-
*/
|
|
27
|
-
isSvgString(identifier: IconIdentifier): boolean;
|
|
28
|
-
/**
|
|
29
|
-
* Check if a string is an SVG data URI
|
|
30
|
-
*/
|
|
31
|
-
isSvgDataUri(value: string): boolean;
|
|
32
|
-
/**
|
|
33
|
-
* Get the SVG string for an icon identifier
|
|
34
|
-
* If the identifier is a raw SVG string, it is returned as is
|
|
35
|
-
* If the identifier is an icon ID, the registered SVG is returned
|
|
36
|
-
*/
|
|
37
|
-
getSvgString(identifier: IconIdentifier): string | undefined;
|
|
38
|
-
/**
|
|
39
|
-
* Utility method to parse a data URI
|
|
40
|
-
*/
|
|
41
|
-
dataUriToSvgString(dataUri: string): string;
|
|
42
|
-
/**
|
|
43
|
-
* Convert an SVG string to a data URI
|
|
44
|
-
*/
|
|
45
|
-
svgStringToDataUri(svgString: string): string;
|
|
46
|
-
capabilities(): IconCapabilities;
|
|
47
|
-
}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Represents an icon in the icon registry
|
|
3
|
-
*/
|
|
4
|
-
export interface Icon {
|
|
5
|
-
id: string;
|
|
6
|
-
svg: string;
|
|
7
|
-
}
|
|
8
|
-
/**
|
|
9
|
-
* Record type for icon registry
|
|
10
|
-
*/
|
|
11
|
-
export type IconRegistry = Record<string, Icon>;
|
|
12
|
-
/**
|
|
13
|
-
* An identifier for an icon that can be either a registered icon id or raw SVG
|
|
14
|
-
*/
|
|
15
|
-
export type IconIdentifier = string;
|
|
16
|
-
/**
|
|
17
|
-
* Options for rendering an icon
|
|
18
|
-
*/
|
|
19
|
-
export interface IconRenderOptions {
|
|
20
|
-
className?: string;
|
|
21
|
-
title?: string;
|
|
22
|
-
}
|
|
23
|
-
/**
|
|
24
|
-
* Capabilities for the IconManager
|
|
25
|
-
*/
|
|
26
|
-
export interface IconCapabilities {
|
|
27
|
-
registerIcon: (icon: Icon) => void;
|
|
28
|
-
registerIcons: (icons: Icon[] | IconRegistry) => void;
|
|
29
|
-
getIcon: (id: string) => Icon | undefined;
|
|
30
|
-
getAllIcons: () => IconRegistry;
|
|
31
|
-
getSvgString: (identifier: IconIdentifier) => string | undefined;
|
|
32
|
-
isSvgString: (identifier: IconIdentifier) => boolean;
|
|
33
|
-
isSvgDataUri: (value: string) => boolean;
|
|
34
|
-
dataUriToSvgString: (dataUri: string) => string;
|
|
35
|
-
svgStringToDataUri: (svgString: string) => string;
|
|
36
|
-
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { IconIdentifier, Icon as IconType, IconRegistry } from '../../lib/index.ts';
|
|
2
|
-
/**
|
|
3
|
-
* Hook to access icon functionality in React
|
|
4
|
-
*/
|
|
5
|
-
export declare function useIcon(): {
|
|
6
|
-
registerIcon: (icon: IconType) => void;
|
|
7
|
-
registerIcons: (icons: IconType[] | IconRegistry) => void;
|
|
8
|
-
getIcon: (id: string) => IconType | undefined;
|
|
9
|
-
getAllIcons: () => IconRegistry;
|
|
10
|
-
getSvgString: (identifier: IconIdentifier) => string | undefined;
|
|
11
|
-
isSvgString: (identifier: IconIdentifier) => boolean;
|
|
12
|
-
isSvgDataUri: (value: string) => boolean;
|
|
13
|
-
dataUriToSvgString: (dataUri: string) => string;
|
|
14
|
-
svgStringToDataUri: (svgString: string) => string;
|
|
15
|
-
};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { IconIdentifier, Icon as IconType, IconRegistry } from '../../lib/index.ts';
|
|
2
|
-
/**
|
|
3
|
-
* Hook to access icon functionality in React
|
|
4
|
-
*/
|
|
5
|
-
export declare function useIcon(): {
|
|
6
|
-
registerIcon: (icon: IconType) => void;
|
|
7
|
-
registerIcons: (icons: IconType[] | IconRegistry) => void;
|
|
8
|
-
getIcon: (id: string) => IconType | undefined;
|
|
9
|
-
getAllIcons: () => IconRegistry;
|
|
10
|
-
getSvgString: (identifier: IconIdentifier) => string | undefined;
|
|
11
|
-
isSvgString: (identifier: IconIdentifier) => boolean;
|
|
12
|
-
isSvgDataUri: (value: string) => boolean;
|
|
13
|
-
dataUriToSvgString: (dataUri: string) => string;
|
|
14
|
-
svgStringToDataUri: (svgString: string) => string;
|
|
15
|
-
};
|