@embedpdf/plugin-ui 1.0.20 → 1.0.21
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/preact/index.cjs +1 -1
- package/dist/preact/index.js +1 -0
- package/dist/preact/index.js.map +1 -1
- package/dist/react/index.cjs +1 -1
- package/dist/react/index.js +1 -0
- package/dist/react/index.js.map +1 -1
- package/dist/shared-preact/index.d.ts +1 -0
- package/dist/shared-react/index.d.ts +1 -0
- package/package.json +4 -4
package/dist/preact/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
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,l]=o.useState({});o.useEffect((()=>{const e=()=>l({});return t.onUpdate(e)&&l({}),()=>t.offUpdate(e)}),[t]);const s=t.getChildContext(n),d=t.getRenderer();if(!d)throw new Error(`No renderer for type: ${t.getRenderType}`);return d(t.props,(function(n){const o=(null==n?void 0:n.context)?{...s,...n.context}:s;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)))}),s)}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.useUICapability=r,exports.useUIPlugin=()=>t.usePlugin(n.UIPlugin.id);
|
|
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,l]=o.useState({});o.useEffect((()=>{const e=()=>l({});return t.onUpdate(e)&&l({}),()=>t.offUpdate(e)}),[t]);const s=t.getChildContext(n),d=t.getRenderer();if(!d)throw new Error(`No renderer for type: ${t.getRenderType}`);return d(t.props,(function(n){const o=(null==n?void 0:n.context)?{...s,...n.context}:s;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)))}),s)}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.useUICapability=r,exports.useUIPlugin=()=>t.usePlugin(n.UIPlugin.id),Object.keys(n).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>n[e]})}));
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/preact/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx } from "preact/jsx-runtime";
|
|
2
2
|
import { usePlugin, useCapability } from "@embedpdf/core/preact";
|
|
3
3
|
import { UIPlugin } from "@embedpdf/plugin-ui";
|
|
4
|
+
export * from "@embedpdf/plugin-ui";
|
|
4
5
|
import "preact";
|
|
5
6
|
import { useState, useEffect } from "preact/hooks";
|
|
6
7
|
const useUIPlugin = () => usePlugin(UIPlugin.id);
|
package/dist/preact/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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":"
|
|
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/dist/react/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
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
|
|
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 l({component:t,parentContext:n={}}){const[r,i]=o.useState({});o.useEffect((()=>{const e=()=>i({});return t.onUpdate(e)&&i({}),()=>t.offUpdate(e)}),[t]);const s=t.getChildContext(n),d=t.getRenderer();if(!d)throw new Error(`No renderer for type: ${t.getRenderType}`);return d(t.props,(function(n){const o=(null==n?void 0:n.context)?{...s,...n.context}:s;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(l,{component:t,parentContext:o},n)}):e.jsx(l,{component:t,parentContext:o},n)))}),s)}exports.PluginUIProvider=function({children:t}){const{provides:n}=r(),o=t=>t.map((t=>e.jsx(l,{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(l,{component:n.getCommandMenu()}):null})},exports.useUICapability=r,exports.useUIPlugin=()=>t.usePlugin(n.UIPlugin.id),Object.keys(n).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>n[e]})}));
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/react/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { usePlugin, useCapability } from "@embedpdf/core/react";
|
|
3
3
|
import { UIPlugin } from "@embedpdf/plugin-ui";
|
|
4
|
+
export * from "@embedpdf/plugin-ui";
|
|
4
5
|
import { useState, useEffect } from "react";
|
|
5
6
|
const useUIPlugin = () => usePlugin(UIPlugin.id);
|
|
6
7
|
const useUICapability = () => useCapability(UIPlugin.id);
|
package/dist/react/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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":"
|
|
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.21",
|
|
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.21"
|
|
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.21"
|
|
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.21"
|
|
39
39
|
},
|
|
40
40
|
"files": [
|
|
41
41
|
"dist",
|