@embedpdf/plugin-ui 1.0.10 → 1.0.12
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 +2 -883
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1 -495
- package/dist/index.js +37 -56
- package/dist/index.js.map +1 -1
- package/dist/lib/actions.d.ts +88 -0
- package/dist/lib/icons/icon-manager.d.ts +47 -0
- package/dist/lib/icons/types.d.ts +36 -0
- package/dist/lib/index.d.ts +13 -0
- package/dist/lib/manifest.d.ts +4 -0
- package/dist/lib/menu/menu-manager.d.ts +98 -0
- package/dist/lib/menu/types.d.ts +83 -0
- package/dist/lib/menu/utils.d.ts +5 -0
- package/dist/lib/reducer.d.ts +5 -0
- package/dist/lib/types.d.ts +204 -0
- package/dist/lib/ui-component.d.ts +30 -0
- package/dist/lib/ui-plugin.d.ts +24 -0
- package/dist/lib/utils.d.ts +33 -0
- package/dist/preact/adapter.d.ts +5 -0
- package/dist/preact/core.d.ts +1 -0
- package/dist/preact/index.cjs +2 -130
- package/dist/preact/index.cjs.map +1 -1
- package/dist/preact/index.d.ts +1 -70
- package/dist/preact/index.js +19 -26
- package/dist/preact/index.js.map +1 -1
- package/dist/react/adapter.d.ts +2 -0
- package/dist/react/core.d.ts +1 -0
- package/dist/react/index.cjs +2 -2
- package/dist/react/index.cjs.map +1 -1
- package/dist/react/index.d.ts +1 -2
- package/dist/react/index.js +92 -1
- package/dist/react/index.js.map +1 -1
- package/dist/shared-preact/components/component-wrapper.d.ts +5 -0
- package/dist/shared-preact/components/index.d.ts +1 -0
- package/dist/shared-preact/components/plugin-ui-provider.d.ts +37 -0
- package/dist/shared-preact/hooks/index.d.ts +2 -0
- package/dist/shared-preact/hooks/use-icon.d.ts +15 -0
- package/dist/shared-preact/hooks/use-ui.d.ts +11 -0
- package/dist/shared-preact/index.d.ts +2 -0
- package/dist/shared-react/components/component-wrapper.d.ts +5 -0
- package/dist/shared-react/components/index.d.ts +1 -0
- package/dist/shared-react/components/plugin-ui-provider.d.ts +37 -0
- package/dist/shared-react/hooks/index.d.ts +2 -0
- package/dist/shared-react/hooks/use-icon.d.ts +15 -0
- package/dist/shared-react/hooks/use-ui.d.ts +11 -0
- package/dist/shared-react/index.d.ts +2 -0
- package/package.json +14 -11
- package/dist/index.d.cts +0 -495
- package/dist/preact/index.d.cts +0 -70
- package/dist/react/index.d.cts +0 -2
package/dist/preact/index.cjs
CHANGED
|
@@ -1,130 +1,2 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
|
|
20
|
-
// src/preact/index.ts
|
|
21
|
-
var preact_exports = {};
|
|
22
|
-
__export(preact_exports, {
|
|
23
|
-
PluginUIProvider: () => PluginUIProvider,
|
|
24
|
-
useIcon: () => useIcon,
|
|
25
|
-
useUICapability: () => useUICapability,
|
|
26
|
-
useUIPlugin: () => useUIPlugin
|
|
27
|
-
});
|
|
28
|
-
module.exports = __toCommonJS(preact_exports);
|
|
29
|
-
|
|
30
|
-
// src/preact/hooks/use-ui.ts
|
|
31
|
-
var import_preact = require("@embedpdf/core/preact");
|
|
32
|
-
var import_plugin_ui = require("@embedpdf/plugin-ui");
|
|
33
|
-
var useUIPlugin = () => (0, import_preact.usePlugin)(import_plugin_ui.UIPlugin.id);
|
|
34
|
-
var useUICapability = () => (0, import_preact.useCapability)(import_plugin_ui.UIPlugin.id);
|
|
35
|
-
|
|
36
|
-
// src/preact/hooks/use-icon.ts
|
|
37
|
-
function useIcon() {
|
|
38
|
-
const { provides: uiProvides } = useUICapability();
|
|
39
|
-
if (!uiProvides) {
|
|
40
|
-
throw new Error("useIcon must be used within a UI context");
|
|
41
|
-
}
|
|
42
|
-
const {
|
|
43
|
-
registerIcon,
|
|
44
|
-
registerIcons,
|
|
45
|
-
getIcon,
|
|
46
|
-
getAllIcons,
|
|
47
|
-
getSvgString,
|
|
48
|
-
isSvgString,
|
|
49
|
-
isSvgDataUri,
|
|
50
|
-
dataUriToSvgString,
|
|
51
|
-
svgStringToDataUri
|
|
52
|
-
} = uiProvides;
|
|
53
|
-
return {
|
|
54
|
-
registerIcon,
|
|
55
|
-
registerIcons,
|
|
56
|
-
getIcon,
|
|
57
|
-
getAllIcons,
|
|
58
|
-
getSvgString,
|
|
59
|
-
isSvgString,
|
|
60
|
-
isSvgDataUri,
|
|
61
|
-
dataUriToSvgString,
|
|
62
|
-
svgStringToDataUri
|
|
63
|
-
};
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
// src/preact/components/component-wrapper.tsx
|
|
67
|
-
var import_hooks = require("preact/hooks");
|
|
68
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
69
|
-
function ComponentWrapper({
|
|
70
|
-
component,
|
|
71
|
-
parentContext = {}
|
|
72
|
-
}) {
|
|
73
|
-
const [_, forceUpdate] = (0, import_hooks.useState)({});
|
|
74
|
-
(0, import_hooks.useEffect)(() => {
|
|
75
|
-
const updateCallback = () => forceUpdate({});
|
|
76
|
-
if (component.onUpdate(updateCallback)) {
|
|
77
|
-
forceUpdate({});
|
|
78
|
-
}
|
|
79
|
-
return () => component.offUpdate(updateCallback);
|
|
80
|
-
}, [component]);
|
|
81
|
-
const childContext = component.getChildContext(parentContext);
|
|
82
|
-
const renderer = component.getRenderer();
|
|
83
|
-
if (!renderer) {
|
|
84
|
-
throw new Error(`No renderer for type: ${component.getRenderType}`);
|
|
85
|
-
}
|
|
86
|
-
function renderChildrenFn(options) {
|
|
87
|
-
const merged = options?.context ? { ...childContext, ...options.context } : childContext;
|
|
88
|
-
return component.getChildren().filter(({ id }) => {
|
|
89
|
-
return !options?.filter || options.filter(id);
|
|
90
|
-
}).map(
|
|
91
|
-
({ component: child, id, className }) => className ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComponentWrapper, { component: child, parentContext: merged }, id) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComponentWrapper, { component: child, parentContext: merged }, id)
|
|
92
|
-
);
|
|
93
|
-
}
|
|
94
|
-
return renderer(component.props, renderChildrenFn, childContext);
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
// src/preact/components/plugin-ui-provider.tsx
|
|
98
|
-
var import_jsx_runtime2 = require("preact/jsx-runtime");
|
|
99
|
-
function PluginUIProvider({ children }) {
|
|
100
|
-
const { provides: uiProvides } = useUICapability();
|
|
101
|
-
const wrapComponents = (components) => {
|
|
102
|
-
return components.map((component) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ComponentWrapper, { component }, component.props.id));
|
|
103
|
-
};
|
|
104
|
-
const componentMap = {
|
|
105
|
-
headers: {
|
|
106
|
-
top: wrapComponents(uiProvides?.getHeadersByPlacement("top") || []),
|
|
107
|
-
bottom: wrapComponents(uiProvides?.getHeadersByPlacement("bottom") || []),
|
|
108
|
-
left: wrapComponents(uiProvides?.getHeadersByPlacement("left") || []),
|
|
109
|
-
right: wrapComponents(uiProvides?.getHeadersByPlacement("right") || [])
|
|
110
|
-
},
|
|
111
|
-
panels: {
|
|
112
|
-
left: wrapComponents(uiProvides?.getPanelsByLocation("left") || []),
|
|
113
|
-
right: wrapComponents(uiProvides?.getPanelsByLocation("right") || [])
|
|
114
|
-
},
|
|
115
|
-
floating: {
|
|
116
|
-
insideScroller: wrapComponents(uiProvides?.getFloatingComponents("inside") || []),
|
|
117
|
-
outsideScroller: wrapComponents(uiProvides?.getFloatingComponents("outside") || [])
|
|
118
|
-
},
|
|
119
|
-
commandMenu: uiProvides?.getCommandMenu() ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ComponentWrapper, { component: uiProvides.getCommandMenu() }) : null
|
|
120
|
-
};
|
|
121
|
-
return children(componentMap);
|
|
122
|
-
}
|
|
123
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
124
|
-
0 && (module.exports = {
|
|
125
|
-
PluginUIProvider,
|
|
126
|
-
useIcon,
|
|
127
|
-
useUICapability,
|
|
128
|
-
useUIPlugin
|
|
129
|
-
});
|
|
130
|
-
//# sourceMappingURL=index.cjs.map
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("preact/jsx-runtime"),t=require("@embedpdf/core/preact"),n=require("@embedpdf/plugin-ui");require("preact");const o=require("preact/hooks"),r=()=>t.useCapability(n.UIPlugin.id);function i({component:t,parentContext:n={}}){const[r,s]=o.useState({});o.useEffect((()=>{const e=()=>s({});return t.onUpdate(e)&&s({}),()=>t.offUpdate(e)}),[t]);const l=t.getChildContext(n),g=t.getRenderer();if(!g)throw new Error(`No renderer for type: ${t.getRenderType}`);return g(t.props,(function(n){const o=(null==n?void 0:n.context)?{...l,...n.context}:l;return t.getChildren().filter((({id:e})=>!(null==n?void 0:n.filter)||n.filter(e))).map((({component:t,id:n,className:r})=>r?e.jsx("div",{className:r,children:e.jsx(i,{component:t,parentContext:o},n)}):e.jsx(i,{component:t,parentContext:o},n)))}),l)}exports.PluginUIProvider=function({children:t}){const{provides:n}=r(),o=t=>t.map((t=>e.jsx(i,{component:t},t.props.id)));return t({headers:{top:o((null==n?void 0:n.getHeadersByPlacement("top"))||[]),bottom:o((null==n?void 0:n.getHeadersByPlacement("bottom"))||[]),left:o((null==n?void 0:n.getHeadersByPlacement("left"))||[]),right:o((null==n?void 0:n.getHeadersByPlacement("right"))||[])},panels:{left:o((null==n?void 0:n.getPanelsByLocation("left"))||[]),right:o((null==n?void 0:n.getPanelsByLocation("right"))||[])},floating:{insideScroller:o((null==n?void 0:n.getFloatingComponents("inside"))||[]),outsideScroller:o((null==n?void 0:n.getFloatingComponents("outside"))||[])},commandMenu:(null==n?void 0:n.getCommandMenu())?e.jsx(i,{component:n.getCommandMenu()}):null})},exports.useIcon=function(){const{provides:e}=r();if(!e)throw new Error("useIcon must be used within a UI context");const{registerIcon:t,registerIcons:n,getIcon:o,getAllIcons:i,getSvgString:s,isSvgString:l,isSvgDataUri:g,dataUriToSvgString:a,svgStringToDataUri:c}=e;return{registerIcon:t,registerIcons:n,getIcon:o,getAllIcons:i,getSvgString:s,isSvgString:l,isSvgDataUri:g,dataUriToSvgString:a,svgStringToDataUri:c}},exports.useUICapability=r,exports.useUIPlugin=()=>t.usePlugin(n.UIPlugin.id);
|
|
2
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-ui.ts","../../src/shared/components/component-wrapper.tsx","../../src/shared/components/plugin-ui-provider.tsx","../../src/shared/hooks/use-icon.ts"],"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","import { useUICapability } from './use-ui';\nimport { IconIdentifier, Icon as IconType, IconRegistry } from '@embedpdf/plugin-ui';\n\n/**\n * Hook to access icon functionality in React\n */\nexport function useIcon() {\n const { provides: uiProvides } = useUICapability();\n\n if (!uiProvides) {\n throw new Error('useIcon must be used within a UI context');\n }\n\n const {\n registerIcon,\n registerIcons,\n getIcon,\n getAllIcons,\n getSvgString,\n isSvgString,\n isSvgDataUri,\n dataUriToSvgString,\n svgStringToDataUri,\n } = uiProvides;\n\n return {\n registerIcon,\n registerIcons,\n getIcon,\n getAllIcons,\n getSvgString,\n isSvgString,\n isSvgDataUri,\n dataUriToSvgString,\n svgStringToDataUri,\n };\n}\n"],"names":["useUICapability","useCapability","UIPlugin","id","ComponentWrapper","component","parentContext","_","forceUpdate","useState","useEffect","updateCallback","onUpdate","offUpdate","childContext","getChildContext","renderer","getRenderer","Error","getRenderType","props","options","merged","context","getChildren","filter","map","child","className","jsxRuntime","jsx","children","provides","uiProvides","wrapComponents","components","headers","top","getHeadersByPlacement","bottom","left","right","panels","getPanelsByLocation","floating","insideScroller","getFloatingComponents","outsideScroller","commandMenu","getCommandMenu","registerIcon","registerIcons","getIcon","getAllIcons","getSvgString","isSvgString","isSvgDataUri","dataUriToSvgString","svgStringToDataUri","usePlugin"],"mappings":"4OAIaA,EAAkB,IAAMC,gBAAwBC,EAAAA,SAASC,ICD/D,SAASC,GAAiBC,UAC/BA,EAAAC,cACAA,EAAgB,CAAA,IAKhB,MAAOC,EAAGC,GAAeC,EAAAA,SAAS,CAAA,GAElCC,EAAAA,WAAU,KACR,MAAMC,EAAiB,IAAMH,EAAY,IAKlC,OAHHH,EAAUO,SAASD,IACrBH,EAAY,CAAA,GAEP,IAAMH,EAAUQ,UAAUF,EAAc,GAC9C,CAACN,IAGE,MAAAS,EAAeT,EAAUU,gBAAgBT,GAKzCU,EAAWX,EAAUY,cAE3B,IAAKD,EACH,MAAM,IAAIE,MAAM,yBAAyBb,EAAUc,iBAwBrD,OAAOH,EAASX,EAAUe,OApB1B,SAA0BC,GAClB,MAAAC,SAASD,WAASE,SAAU,IAAKT,KAAiBO,EAAQE,SAAYT,EAC5E,OAAOT,EACJmB,cACAC,QAAO,EAAGtB,UAED,MAAAkB,OAAA,EAAAA,EAASI,SAAUJ,EAAQI,OAAOtB,KAE3CuB,KAAI,EAAGrB,UAAWsB,EAAOxB,KAAIyB,eAC5BA,EACEC,EAAAC,IAAC,MAAI,CAAAF,YACHG,SAACD,EAAAA,IAAA1B,EAAA,CAA0BC,UAAWsB,EAAOrB,cAAegB,GAArCnB,KAGxB2B,EAAAA,IAAA1B,EAAA,CAA0BC,UAAWsB,EAAOrB,cAAegB,GAArCnB,IAE3B,GAI+CW,EACrD,0BCbgB,UAAiBiB,SAAEA,IACjC,MAAQC,SAAUC,GAAejC,IAG3BkC,EAAkBC,GACfA,EAAWT,KAAKrB,GACrByB,EAAAA,IAAC1B,GAA0CC,aAApBA,EAAUe,MAAMjB,MA0B3C,OAAO4B,EArB+B,CACpCK,QAAS,CACPC,IAAKH,GAAe,MAAAD,OAAA,EAAAA,EAAYK,sBAAsB,SAAU,IAChEC,OAAQL,GAAe,MAAAD,OAAA,EAAAA,EAAYK,sBAAsB,YAAa,IACtEE,KAAMN,GAAe,MAAAD,OAAA,EAAAA,EAAYK,sBAAsB,UAAW,IAClEG,MAAOP,GAAe,MAAAD,OAAA,EAAAA,EAAYK,sBAAsB,WAAY,KAEtEI,OAAQ,CACNF,KAAMN,GAAe,MAAAD,OAAA,EAAAA,EAAYU,oBAAoB,UAAW,IAChEF,MAAOP,GAAe,MAAAD,OAAA,EAAAA,EAAYU,oBAAoB,WAAY,KAEpEC,SAAU,CACRC,eAAgBX,GAAe,MAAAD,OAAA,EAAAA,EAAYa,sBAAsB,YAAa,IAC9EC,gBAAiBb,GAAe,MAAAD,OAAA,EAAAA,EAAYa,sBAAsB,aAAc,KAElFE,aAAa,MAAAf,OAAA,EAAAA,EAAYgB,kBACvBnB,MAAC1B,GAAiBC,UAAW4B,EAAWgB,mBACtC,MAKR,kBCrEO,WACL,MAAQjB,SAAUC,GAAejC,IAEjC,IAAKiC,EACG,MAAA,IAAIf,MAAM,4CAGZ,MAAAgC,aACJA,EAAAC,cACAA,EAAAC,QACAA,EAAAC,YACAA,EAAAC,aACAA,EAAAC,YACAA,EAAAC,aACAA,EAAAC,mBACAA,EAAAC,mBACAA,GACEzB,EAEG,MAAA,CACLiB,eACAC,gBACAC,UACAC,cACAC,eACAC,cACAC,eACAC,qBACAC,qBAEJ,gDHjC2B,IAAMC,YAAoBzD,EAAAA,SAASC"}
|
package/dist/preact/index.d.ts
CHANGED
|
@@ -1,70 +1 @@
|
|
|
1
|
-
|
|
2
|
-
import * as _embedpdf_plugin_ui from '@embedpdf/plugin-ui';
|
|
3
|
-
import { UIPlugin, Icon, IconRegistry, IconIdentifier } from '@embedpdf/plugin-ui';
|
|
4
|
-
|
|
5
|
-
/** @jsxImportSource preact */
|
|
6
|
-
|
|
7
|
-
/**
|
|
8
|
-
* Interface for UI components organized by type/location
|
|
9
|
-
*/
|
|
10
|
-
interface UIComponentsMap {
|
|
11
|
-
headers: {
|
|
12
|
-
top: JSX.Element[];
|
|
13
|
-
bottom: JSX.Element[];
|
|
14
|
-
left: JSX.Element[];
|
|
15
|
-
right: JSX.Element[];
|
|
16
|
-
};
|
|
17
|
-
panels: {
|
|
18
|
-
left: JSX.Element[];
|
|
19
|
-
right: JSX.Element[];
|
|
20
|
-
};
|
|
21
|
-
floating: {
|
|
22
|
-
insideScroller: JSX.Element[];
|
|
23
|
-
outsideScroller: JSX.Element[];
|
|
24
|
-
};
|
|
25
|
-
commandMenu: JSX.Element | null;
|
|
26
|
-
}
|
|
27
|
-
/**
|
|
28
|
-
* Props for the PluginUIProvider
|
|
29
|
-
*/
|
|
30
|
-
interface PluginUIProviderProps {
|
|
31
|
-
/**
|
|
32
|
-
* Render function that receives UI components
|
|
33
|
-
*/
|
|
34
|
-
children: (components: UIComponentsMap) => JSX.Element;
|
|
35
|
-
}
|
|
36
|
-
/**
|
|
37
|
-
* PluginUIProvider collects all components from the UI plugin system
|
|
38
|
-
* and provides them to a render function without imposing any structure.
|
|
39
|
-
*
|
|
40
|
-
* It uses the render props pattern for maximum flexibility.
|
|
41
|
-
*/
|
|
42
|
-
declare function PluginUIProvider({ children }: PluginUIProviderProps): h.JSX.Element;
|
|
43
|
-
|
|
44
|
-
declare const useUIPlugin: () => {
|
|
45
|
-
plugin: UIPlugin | null;
|
|
46
|
-
isLoading: boolean;
|
|
47
|
-
ready: Promise<void>;
|
|
48
|
-
};
|
|
49
|
-
declare const useUICapability: () => {
|
|
50
|
-
provides: Readonly<_embedpdf_plugin_ui.UICapability> | null;
|
|
51
|
-
isLoading: boolean;
|
|
52
|
-
ready: Promise<void>;
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
/**
|
|
56
|
-
* Hook to access icon functionality in React
|
|
57
|
-
*/
|
|
58
|
-
declare function useIcon(): {
|
|
59
|
-
registerIcon: (icon: Icon) => void;
|
|
60
|
-
registerIcons: (icons: Icon[] | IconRegistry) => void;
|
|
61
|
-
getIcon: (id: string) => Icon | undefined;
|
|
62
|
-
getAllIcons: () => IconRegistry;
|
|
63
|
-
getSvgString: (identifier: IconIdentifier) => string | undefined;
|
|
64
|
-
isSvgString: (identifier: IconIdentifier) => boolean;
|
|
65
|
-
isSvgDataUri: (value: string) => boolean;
|
|
66
|
-
dataUriToSvgString: (dataUri: string) => string;
|
|
67
|
-
svgStringToDataUri: (svgString: string) => string;
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
export { PluginUIProvider, type PluginUIProviderProps, type UIComponentsMap, useIcon, useUICapability, useUIPlugin };
|
|
1
|
+
export * from '../shared-preact';
|
package/dist/preact/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
1
|
+
import { jsx } from "preact/jsx-runtime";
|
|
2
|
+
import { usePlugin, useCapability } from "@embedpdf/core/preact";
|
|
3
3
|
import { UIPlugin } from "@embedpdf/plugin-ui";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
import "preact";
|
|
5
|
+
import { useState, useEffect } from "preact/hooks";
|
|
6
|
+
const useUIPlugin = () => usePlugin(UIPlugin.id);
|
|
7
|
+
const useUICapability = () => useCapability(UIPlugin.id);
|
|
8
8
|
function useIcon() {
|
|
9
9
|
const { provides: uiProvides } = useUICapability();
|
|
10
10
|
if (!uiProvides) {
|
|
@@ -33,10 +33,6 @@ function useIcon() {
|
|
|
33
33
|
svgStringToDataUri
|
|
34
34
|
};
|
|
35
35
|
}
|
|
36
|
-
|
|
37
|
-
// src/preact/components/component-wrapper.tsx
|
|
38
|
-
import { useState, useEffect } from "preact/hooks";
|
|
39
|
-
import { jsx } from "react/jsx-runtime";
|
|
40
36
|
function ComponentWrapper({
|
|
41
37
|
component,
|
|
42
38
|
parentContext = {}
|
|
@@ -55,39 +51,36 @@ function ComponentWrapper({
|
|
|
55
51
|
throw new Error(`No renderer for type: ${component.getRenderType}`);
|
|
56
52
|
}
|
|
57
53
|
function renderChildrenFn(options) {
|
|
58
|
-
const merged = options
|
|
54
|
+
const merged = (options == null ? void 0 : options.context) ? { ...childContext, ...options.context } : childContext;
|
|
59
55
|
return component.getChildren().filter(({ id }) => {
|
|
60
|
-
return !options
|
|
56
|
+
return !(options == null ? void 0 : options.filter) || options.filter(id);
|
|
61
57
|
}).map(
|
|
62
58
|
({ component: child, id, className }) => className ? /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(ComponentWrapper, { component: child, parentContext: merged }, id) }) : /* @__PURE__ */ jsx(ComponentWrapper, { component: child, parentContext: merged }, id)
|
|
63
59
|
);
|
|
64
60
|
}
|
|
65
61
|
return renderer(component.props, renderChildrenFn, childContext);
|
|
66
62
|
}
|
|
67
|
-
|
|
68
|
-
// src/preact/components/plugin-ui-provider.tsx
|
|
69
|
-
import { jsx as jsx2 } from "preact/jsx-runtime";
|
|
70
63
|
function PluginUIProvider({ children }) {
|
|
71
64
|
const { provides: uiProvides } = useUICapability();
|
|
72
65
|
const wrapComponents = (components) => {
|
|
73
|
-
return components.map((component) => /* @__PURE__ */
|
|
66
|
+
return components.map((component) => /* @__PURE__ */ jsx(ComponentWrapper, { component }, component.props.id));
|
|
74
67
|
};
|
|
75
68
|
const componentMap = {
|
|
76
69
|
headers: {
|
|
77
|
-
top: wrapComponents(uiProvides
|
|
78
|
-
bottom: wrapComponents(uiProvides
|
|
79
|
-
left: wrapComponents(uiProvides
|
|
80
|
-
right: wrapComponents(uiProvides
|
|
70
|
+
top: wrapComponents((uiProvides == null ? void 0 : uiProvides.getHeadersByPlacement("top")) || []),
|
|
71
|
+
bottom: wrapComponents((uiProvides == null ? void 0 : uiProvides.getHeadersByPlacement("bottom")) || []),
|
|
72
|
+
left: wrapComponents((uiProvides == null ? void 0 : uiProvides.getHeadersByPlacement("left")) || []),
|
|
73
|
+
right: wrapComponents((uiProvides == null ? void 0 : uiProvides.getHeadersByPlacement("right")) || [])
|
|
81
74
|
},
|
|
82
75
|
panels: {
|
|
83
|
-
left: wrapComponents(uiProvides
|
|
84
|
-
right: wrapComponents(uiProvides
|
|
76
|
+
left: wrapComponents((uiProvides == null ? void 0 : uiProvides.getPanelsByLocation("left")) || []),
|
|
77
|
+
right: wrapComponents((uiProvides == null ? void 0 : uiProvides.getPanelsByLocation("right")) || [])
|
|
85
78
|
},
|
|
86
79
|
floating: {
|
|
87
|
-
insideScroller: wrapComponents(uiProvides
|
|
88
|
-
outsideScroller: wrapComponents(uiProvides
|
|
80
|
+
insideScroller: wrapComponents((uiProvides == null ? void 0 : uiProvides.getFloatingComponents("inside")) || []),
|
|
81
|
+
outsideScroller: wrapComponents((uiProvides == null ? void 0 : uiProvides.getFloatingComponents("outside")) || [])
|
|
89
82
|
},
|
|
90
|
-
commandMenu: uiProvides
|
|
83
|
+
commandMenu: (uiProvides == null ? void 0 : uiProvides.getCommandMenu()) ? /* @__PURE__ */ jsx(ComponentWrapper, { component: uiProvides.getCommandMenu() }) : null
|
|
91
84
|
};
|
|
92
85
|
return children(componentMap);
|
|
93
86
|
}
|
|
@@ -97,4 +90,4 @@ export {
|
|
|
97
90
|
useUICapability,
|
|
98
91
|
useUIPlugin
|
|
99
92
|
};
|
|
100
|
-
//# sourceMappingURL=index.js.map
|
|
93
|
+
//# sourceMappingURL=index.js.map
|
package/dist/preact/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-ui.ts","../../src/shared/hooks/use-icon.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 { useUICapability } from './use-ui';\nimport { IconIdentifier, Icon as IconType, IconRegistry } from '@embedpdf/plugin-ui';\n\n/**\n * Hook to access icon functionality in React\n */\nexport function useIcon() {\n const { provides: uiProvides } = useUICapability();\n\n if (!uiProvides) {\n throw new Error('useIcon must be used within a UI context');\n }\n\n const {\n registerIcon,\n registerIcons,\n getIcon,\n getAllIcons,\n getSvgString,\n isSvgString,\n isSvgDataUri,\n dataUriToSvgString,\n svgStringToDataUri,\n } = uiProvides;\n\n return {\n registerIcon,\n registerIcons,\n getIcon,\n getAllIcons,\n getSvgString,\n isSvgString,\n isSvgDataUri,\n dataUriToSvgString,\n svgStringToDataUri,\n };\n}\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":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from '@embedpdf/core/react';
|
package/dist/react/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
//# sourceMappingURL=index.cjs.map
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@embedpdf/core/react"),n=require("@embedpdf/plugin-ui"),o=require("react"),r=()=>t.useCapability(n.UIPlugin.id);function i({component:t,parentContext:n={}}){const[r,s]=o.useState({});o.useEffect((()=>{const e=()=>s({});return t.onUpdate(e)&&s({}),()=>t.offUpdate(e)}),[t]);const l=t.getChildContext(n),g=t.getRenderer();if(!g)throw new Error(`No renderer for type: ${t.getRenderType}`);return g(t.props,(function(n){const o=(null==n?void 0:n.context)?{...l,...n.context}:l;return t.getChildren().filter((({id:e})=>!(null==n?void 0:n.filter)||n.filter(e))).map((({component:t,id:n,className:r})=>r?e.jsx("div",{className:r,children:e.jsx(i,{component:t,parentContext:o},n)}):e.jsx(i,{component:t,parentContext:o},n)))}),l)}exports.PluginUIProvider=function({children:t}){const{provides:n}=r(),o=t=>t.map((t=>e.jsx(i,{component:t},t.props.id)));return t({headers:{top:o((null==n?void 0:n.getHeadersByPlacement("top"))||[]),bottom:o((null==n?void 0:n.getHeadersByPlacement("bottom"))||[]),left:o((null==n?void 0:n.getHeadersByPlacement("left"))||[]),right:o((null==n?void 0:n.getHeadersByPlacement("right"))||[])},panels:{left:o((null==n?void 0:n.getPanelsByLocation("left"))||[]),right:o((null==n?void 0:n.getPanelsByLocation("right"))||[])},floating:{insideScroller:o((null==n?void 0:n.getFloatingComponents("inside"))||[]),outsideScroller:o((null==n?void 0:n.getFloatingComponents("outside"))||[])},commandMenu:(null==n?void 0:n.getCommandMenu())?e.jsx(i,{component:n.getCommandMenu()}):null})},exports.useIcon=function(){const{provides:e}=r();if(!e)throw new Error("useIcon must be used within a UI context");const{registerIcon:t,registerIcons:n,getIcon:o,getAllIcons:i,getSvgString:s,isSvgString:l,isSvgDataUri:g,dataUriToSvgString:a,svgStringToDataUri:c}=e;return{registerIcon:t,registerIcons:n,getIcon:o,getAllIcons:i,getSvgString:s,isSvgString:l,isSvgDataUri:g,dataUriToSvgString:a,svgStringToDataUri:c}},exports.useUICapability=r,exports.useUIPlugin=()=>t.usePlugin(n.UIPlugin.id);
|
|
2
|
+
//# sourceMappingURL=index.cjs.map
|
package/dist/react/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-ui.ts","../../src/shared/components/component-wrapper.tsx","../../src/shared/components/plugin-ui-provider.tsx","../../src/shared/hooks/use-icon.ts"],"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","import { useUICapability } from './use-ui';\nimport { IconIdentifier, Icon as IconType, IconRegistry } from '@embedpdf/plugin-ui';\n\n/**\n * Hook to access icon functionality in React\n */\nexport function useIcon() {\n const { provides: uiProvides } = useUICapability();\n\n if (!uiProvides) {\n throw new Error('useIcon must be used within a UI context');\n }\n\n const {\n registerIcon,\n registerIcons,\n getIcon,\n getAllIcons,\n getSvgString,\n isSvgString,\n isSvgDataUri,\n dataUriToSvgString,\n svgStringToDataUri,\n } = uiProvides;\n\n return {\n registerIcon,\n registerIcons,\n getIcon,\n getAllIcons,\n getSvgString,\n isSvgString,\n isSvgDataUri,\n dataUriToSvgString,\n svgStringToDataUri,\n };\n}\n"],"names":["useUICapability","useCapability","UIPlugin","id","ComponentWrapper","component","parentContext","_","forceUpdate","useState","useEffect","updateCallback","onUpdate","offUpdate","childContext","getChildContext","renderer","getRenderer","Error","getRenderType","props","options","merged","context","getChildren","filter","map","child","className","jsxRuntime","jsx","children","provides","uiProvides","wrapComponents","components","headers","top","getHeadersByPlacement","bottom","left","right","panels","getPanelsByLocation","floating","insideScroller","getFloatingComponents","outsideScroller","commandMenu","getCommandMenu","registerIcon","registerIcons","getIcon","getAllIcons","getSvgString","isSvgString","isSvgDataUri","dataUriToSvgString","svgStringToDataUri","usePlugin"],"mappings":"2MAIaA,EAAkB,IAAMC,gBAAwBC,EAAAA,SAASC,ICD/D,SAASC,GAAiBC,UAC/BA,EAAAC,cACAA,EAAgB,CAAA,IAKhB,MAAOC,EAAGC,GAAeC,EAAAA,SAAS,CAAA,GAElCC,EAAAA,WAAU,KACR,MAAMC,EAAiB,IAAMH,EAAY,IAKlC,OAHHH,EAAUO,SAASD,IACrBH,EAAY,CAAA,GAEP,IAAMH,EAAUQ,UAAUF,EAAc,GAC9C,CAACN,IAGE,MAAAS,EAAeT,EAAUU,gBAAgBT,GAKzCU,EAAWX,EAAUY,cAE3B,IAAKD,EACH,MAAM,IAAIE,MAAM,yBAAyBb,EAAUc,iBAwBrD,OAAOH,EAASX,EAAUe,OApB1B,SAA0BC,GAClB,MAAAC,SAASD,WAASE,SAAU,IAAKT,KAAiBO,EAAQE,SAAYT,EAC5E,OAAOT,EACJmB,cACAC,QAAO,EAAGtB,UAED,MAAAkB,OAAA,EAAAA,EAASI,SAAUJ,EAAQI,OAAOtB,KAE3CuB,KAAI,EAAGrB,UAAWsB,EAAOxB,KAAIyB,eAC5BA,EACEC,EAAAC,IAAC,MAAI,CAAAF,YACHG,SAACD,EAAAA,IAAA1B,EAAA,CAA0BC,UAAWsB,EAAOrB,cAAegB,GAArCnB,KAGxB2B,EAAAA,IAAA1B,EAAA,CAA0BC,UAAWsB,EAAOrB,cAAegB,GAArCnB,IAE3B,GAI+CW,EACrD,0BCbgB,UAAiBiB,SAAEA,IACjC,MAAQC,SAAUC,GAAejC,IAG3BkC,EAAkBC,GACfA,EAAWT,KAAKrB,GACrByB,EAAAA,IAAC1B,GAA0CC,aAApBA,EAAUe,MAAMjB,MA0B3C,OAAO4B,EArB+B,CACpCK,QAAS,CACPC,IAAKH,GAAe,MAAAD,OAAA,EAAAA,EAAYK,sBAAsB,SAAU,IAChEC,OAAQL,GAAe,MAAAD,OAAA,EAAAA,EAAYK,sBAAsB,YAAa,IACtEE,KAAMN,GAAe,MAAAD,OAAA,EAAAA,EAAYK,sBAAsB,UAAW,IAClEG,MAAOP,GAAe,MAAAD,OAAA,EAAAA,EAAYK,sBAAsB,WAAY,KAEtEI,OAAQ,CACNF,KAAMN,GAAe,MAAAD,OAAA,EAAAA,EAAYU,oBAAoB,UAAW,IAChEF,MAAOP,GAAe,MAAAD,OAAA,EAAAA,EAAYU,oBAAoB,WAAY,KAEpEC,SAAU,CACRC,eAAgBX,GAAe,MAAAD,OAAA,EAAAA,EAAYa,sBAAsB,YAAa,IAC9EC,gBAAiBb,GAAe,MAAAD,OAAA,EAAAA,EAAYa,sBAAsB,aAAc,KAElFE,aAAa,MAAAf,OAAA,EAAAA,EAAYgB,kBACvBnB,MAAC1B,GAAiBC,UAAW4B,EAAWgB,mBACtC,MAKR,kBCrEO,WACL,MAAQjB,SAAUC,GAAejC,IAEjC,IAAKiC,EACG,MAAA,IAAIf,MAAM,4CAGZ,MAAAgC,aACJA,EAAAC,cACAA,EAAAC,QACAA,EAAAC,YACAA,EAAAC,aACAA,EAAAC,YACAA,EAAAC,aACAA,EAAAC,mBACAA,EAAAC,mBACAA,GACEzB,EAEG,MAAA,CACLiB,eACAC,gBACAC,UACAC,cACAC,eACAC,cACAC,eACAC,qBACAC,qBAEJ,gDHjC2B,IAAMC,YAAoBzD,EAAAA,SAASC"}
|
package/dist/react/index.d.ts
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { }
|
|
1
|
+
export * from '../shared-react';
|
package/dist/react/index.js
CHANGED
|
@@ -1 +1,92 @@
|
|
|
1
|
-
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { usePlugin, useCapability } from "@embedpdf/core/react";
|
|
3
|
+
import { UIPlugin } from "@embedpdf/plugin-ui";
|
|
4
|
+
import { useState, useEffect } from "react";
|
|
5
|
+
const useUIPlugin = () => usePlugin(UIPlugin.id);
|
|
6
|
+
const useUICapability = () => useCapability(UIPlugin.id);
|
|
7
|
+
function useIcon() {
|
|
8
|
+
const { provides: uiProvides } = useUICapability();
|
|
9
|
+
if (!uiProvides) {
|
|
10
|
+
throw new Error("useIcon must be used within a UI context");
|
|
11
|
+
}
|
|
12
|
+
const {
|
|
13
|
+
registerIcon,
|
|
14
|
+
registerIcons,
|
|
15
|
+
getIcon,
|
|
16
|
+
getAllIcons,
|
|
17
|
+
getSvgString,
|
|
18
|
+
isSvgString,
|
|
19
|
+
isSvgDataUri,
|
|
20
|
+
dataUriToSvgString,
|
|
21
|
+
svgStringToDataUri
|
|
22
|
+
} = uiProvides;
|
|
23
|
+
return {
|
|
24
|
+
registerIcon,
|
|
25
|
+
registerIcons,
|
|
26
|
+
getIcon,
|
|
27
|
+
getAllIcons,
|
|
28
|
+
getSvgString,
|
|
29
|
+
isSvgString,
|
|
30
|
+
isSvgDataUri,
|
|
31
|
+
dataUriToSvgString,
|
|
32
|
+
svgStringToDataUri
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
function ComponentWrapper({
|
|
36
|
+
component,
|
|
37
|
+
parentContext = {}
|
|
38
|
+
}) {
|
|
39
|
+
const [_, forceUpdate] = useState({});
|
|
40
|
+
useEffect(() => {
|
|
41
|
+
const updateCallback = () => forceUpdate({});
|
|
42
|
+
if (component.onUpdate(updateCallback)) {
|
|
43
|
+
forceUpdate({});
|
|
44
|
+
}
|
|
45
|
+
return () => component.offUpdate(updateCallback);
|
|
46
|
+
}, [component]);
|
|
47
|
+
const childContext = component.getChildContext(parentContext);
|
|
48
|
+
const renderer = component.getRenderer();
|
|
49
|
+
if (!renderer) {
|
|
50
|
+
throw new Error(`No renderer for type: ${component.getRenderType}`);
|
|
51
|
+
}
|
|
52
|
+
function renderChildrenFn(options) {
|
|
53
|
+
const merged = (options == null ? void 0 : options.context) ? { ...childContext, ...options.context } : childContext;
|
|
54
|
+
return component.getChildren().filter(({ id }) => {
|
|
55
|
+
return !(options == null ? void 0 : options.filter) || options.filter(id);
|
|
56
|
+
}).map(
|
|
57
|
+
({ component: child, id, className }) => className ? /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(ComponentWrapper, { component: child, parentContext: merged }, id) }) : /* @__PURE__ */ jsx(ComponentWrapper, { component: child, parentContext: merged }, id)
|
|
58
|
+
);
|
|
59
|
+
}
|
|
60
|
+
return renderer(component.props, renderChildrenFn, childContext);
|
|
61
|
+
}
|
|
62
|
+
function PluginUIProvider({ children }) {
|
|
63
|
+
const { provides: uiProvides } = useUICapability();
|
|
64
|
+
const wrapComponents = (components) => {
|
|
65
|
+
return components.map((component) => /* @__PURE__ */ jsx(ComponentWrapper, { component }, component.props.id));
|
|
66
|
+
};
|
|
67
|
+
const componentMap = {
|
|
68
|
+
headers: {
|
|
69
|
+
top: wrapComponents((uiProvides == null ? void 0 : uiProvides.getHeadersByPlacement("top")) || []),
|
|
70
|
+
bottom: wrapComponents((uiProvides == null ? void 0 : uiProvides.getHeadersByPlacement("bottom")) || []),
|
|
71
|
+
left: wrapComponents((uiProvides == null ? void 0 : uiProvides.getHeadersByPlacement("left")) || []),
|
|
72
|
+
right: wrapComponents((uiProvides == null ? void 0 : uiProvides.getHeadersByPlacement("right")) || [])
|
|
73
|
+
},
|
|
74
|
+
panels: {
|
|
75
|
+
left: wrapComponents((uiProvides == null ? void 0 : uiProvides.getPanelsByLocation("left")) || []),
|
|
76
|
+
right: wrapComponents((uiProvides == null ? void 0 : uiProvides.getPanelsByLocation("right")) || [])
|
|
77
|
+
},
|
|
78
|
+
floating: {
|
|
79
|
+
insideScroller: wrapComponents((uiProvides == null ? void 0 : uiProvides.getFloatingComponents("inside")) || []),
|
|
80
|
+
outsideScroller: wrapComponents((uiProvides == null ? void 0 : uiProvides.getFloatingComponents("outside")) || [])
|
|
81
|
+
},
|
|
82
|
+
commandMenu: (uiProvides == null ? void 0 : uiProvides.getCommandMenu()) ? /* @__PURE__ */ jsx(ComponentWrapper, { component: uiProvides.getCommandMenu() }) : null
|
|
83
|
+
};
|
|
84
|
+
return children(componentMap);
|
|
85
|
+
}
|
|
86
|
+
export {
|
|
87
|
+
PluginUIProvider,
|
|
88
|
+
useIcon,
|
|
89
|
+
useUICapability,
|
|
90
|
+
useUIPlugin
|
|
91
|
+
};
|
|
92
|
+
//# sourceMappingURL=index.js.map
|
package/dist/react/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-ui.ts","../../src/shared/hooks/use-icon.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 { useUICapability } from './use-ui';\nimport { IconIdentifier, Icon as IconType, IconRegistry } from '@embedpdf/plugin-ui';\n\n/**\n * Hook to access icon functionality in React\n */\nexport function useIcon() {\n const { provides: uiProvides } = useUICapability();\n\n if (!uiProvides) {\n throw new Error('useIcon must be used within a UI context');\n }\n\n const {\n registerIcon,\n registerIcons,\n getIcon,\n getAllIcons,\n getSvgString,\n isSvgString,\n isSvgDataUri,\n dataUriToSvgString,\n svgStringToDataUri,\n } = uiProvides;\n\n return {\n registerIcon,\n registerIcons,\n getIcon,\n getAllIcons,\n getSvgString,\n isSvgString,\n isSvgDataUri,\n dataUriToSvgString,\n svgStringToDataUri,\n };\n}\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":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './plugin-ui-provider';
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { ReactNode } from '../../preact/adapter.ts';
|
|
2
|
+
/**
|
|
3
|
+
* Interface for UI components organized by type/location
|
|
4
|
+
*/
|
|
5
|
+
export interface UIComponentsMap {
|
|
6
|
+
headers: {
|
|
7
|
+
top: ReactNode[];
|
|
8
|
+
bottom: ReactNode[];
|
|
9
|
+
left: ReactNode[];
|
|
10
|
+
right: ReactNode[];
|
|
11
|
+
};
|
|
12
|
+
panels: {
|
|
13
|
+
left: ReactNode[];
|
|
14
|
+
right: ReactNode[];
|
|
15
|
+
};
|
|
16
|
+
floating: {
|
|
17
|
+
insideScroller: ReactNode[];
|
|
18
|
+
outsideScroller: ReactNode[];
|
|
19
|
+
};
|
|
20
|
+
commandMenu: ReactNode | null;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Props for the PluginUIProvider
|
|
24
|
+
*/
|
|
25
|
+
export interface PluginUIProviderProps {
|
|
26
|
+
/**
|
|
27
|
+
* Render function that receives UI components
|
|
28
|
+
*/
|
|
29
|
+
children: (components: UIComponentsMap) => ReactNode;
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* PluginUIProvider collects all components from the UI plugin system
|
|
33
|
+
* and provides them to a render function without imposing any structure.
|
|
34
|
+
*
|
|
35
|
+
* It uses the render props pattern for maximum flexibility.
|
|
36
|
+
*/
|
|
37
|
+
export declare function PluginUIProvider({ children }: PluginUIProviderProps): ReactNode;
|
|
@@ -0,0 +1,15 @@
|
|
|
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
|
+
};
|