{"_id":"@agorarte/rte-controller","_rev":"2-ee8b9e7529e7a740c5ac676bae531827","name":"@agorarte/rte-controller","dist-tags":{"latest":"1.5.0-alpha.0"},"versions":{"1.5.0-alpha.0":{"name":"@agorarte/rte-controller","version":"1.5.0-alpha.0","main":"lib/index.js","description":"RTE UI controller is a module to be used in the UI resource itself to facilitate the integration with RTE world.","license":"MIT","private":false,"keywords":["rte-controller"],"author":{"name":"xiaqin@agora.io"},"scripts":{"build:debug":"webpack --config ./webpack/webpack.debug.js","build":"webpack --config ./webpack/webpack.prod.js","package":"chmod +x package.sh && ./package.sh"},"publishConfig":{"access":"public"},"devDependencies":{"@babel/core":"^7.18.13","@babel/plugin-transform-runtime":"^7.18.10","@babel/polyfill":"^7.12.1","@babel/preset-env":"^7.18.10","@babel/preset-react":"^7.18.6","@types/react":"^16.8.25","@types/react-dom":"^16.8.6","autoprefixer":"^10.4.8","babel-loader":"^8.2.5","babel-plugin-transform-async-to-generator":"^6.24.1","clean-webpack-plugin":"^4.0.0","css-loader":"^6.7.1","css-minimizer-webpack-plugin":"^4.0.0","file-loader":"^6.2.0","html-webpack-plugin":"^5.5.0","html-withimg-loader":"^0.1.16","postcss-loader":"^7.0.1","react":"^16.8.6","react-dom":"^16.8.6","sass":"^1.54.5","sass-loader":"^13.0.2","style-loader":"^3.3.1","ts-loader":"^9.3.1","typescript":"^4.8.2","url-loader":"^4.1.1","webpack":"5.73.0","webpack-cli":"^4.10.0","webpack-dev-server":"^4.10.0","webpack-merge":"^5.8.0","webpackbar":"^5.0.2"},"peerDependencies":{"@types/react":"^16.8.25","@types/react-dom":"^16.8.6","react":"^16.8.6","react-dom":"^16.8.6"},"peerDependenciesMeta":{"@types/react":{"optional":true},"@types/react-dom":{"optional":true}},"dependencies":{"@material-ui/core":"^4.12.4","rte-controller-base":"^0.4.0-alpha.1"},"types":"./lib/index.d.ts","gitHead":"8aa8fa8055d3cb53d071640fdf6931253b6a7d50","_id":"@agorarte/rte-controller@1.5.0-alpha.0","_nodeVersion":"18.9.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-FVORMbXKal9OFJUL+0FUK5voUVBJ8NrdJIhF0DYjPxK+EhXxhXcvbwGRAt7N2RgMYTS2AFKGOeUhiyJVx8o4yQ==","shasum":"1b51658ad1a7546b71abcc689804dff307094b26","tarball":"https://registry.npmjs.org/@agorarte/rte-controller/-/rte-controller-1.5.0-alpha.0.tgz","fileCount":23,"unpackedSize":715252,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEbxKUOW4tueK+bM4tLFtMS79gLM+rpCA5Z8pIls+GGJAiEAslgt44d5xyDc+5NzhOGB+GKzyst/sHvn8AGW49CcvEI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLnmzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptVQ/9F+dedQ2WsyEqlf7YnysGyNOlBOD1AfYjMRz+H0VmCkZhfRf2\r\nDEkQRPsjMab/213K5TKVfxmqY5vYVYl0YpgYD+rfSLicB+Jpux2d7hFNbCTz\r\nmMQCaRAMOAmapFJPNoSi6qC36MX8AdyufpZfz40dCZPQcrJAYmkuRBG+knA1\r\nJoXS0uaMGoBiUJdbEVZDJBKqAeTm5KW0kH6FmVoylXLT3l2+Ap7yjN0J41c7\r\nbcDR2VcTafElbRhuSFl/VaSj8/sGlbUEi0X/saWuyjXFNMA40r0gi+EZImfB\r\nV6E8xgGTD7ueGBOmOfcqeJPX2oSmUTVyx7MXmsWDqfMmMUvhFiEK+xSjcBKT\r\nB7+M0fcnBALj4nTae+KkZ6oOt1YlQEUlIGeHuMF666gblhAtA6uGCTc+Sbpi\r\nrNt1BAMf4409tc2GO7hQgRWx0iXPcztTlihIj12hI1AE5JCzSEU7tNW/t3R9\r\ngpybF9PBmdZtOBEvGD2l+dhSg9O0SA2XZMuDZD4I02Ga/WCUmLR6cK439JBt\r\nMaVP2JSyleCRLu1lag1gFvuvjGC1LR5N6sGvpOpltY/pP7WgJFJNnr2cK065\r\nRpNHDOdJkIkEWfTT56XPXlabO6We0IFsAz4jYTxozVB2p+kvNUtu6pnWlknU\r\n2SrqP5WWVJEMmXO2zHjNn8DEQh9jJq+8R+s=\r\n=ejyv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"halajohn","email":"wei.hu.tw@gmail.com"},"directories":{},"maintainers":[{"name":"halajohn","email":"wei.hu.tw@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rte-controller_1.5.0-alpha.0_1663990195633_0.7024268937115352"},"_hasShrinkwrap":false}},"time":{"created":"2022-09-24T03:29:55.541Z","1.5.0-alpha.0":"2022-09-24T03:29:55.789Z","modified":"2022-09-25T13:15:27.810Z"},"maintainers":[{"email":"sunxilin@agora.io","name":"liziyuanzzz"},{"email":"renjingui@agora.io","name":"conqueror123"},{"email":"wei.hu.tw@gmail.com","name":"halajohn"}],"description":"RTE UI controller is a module to be used in the UI resource itself to facilitate the integration with RTE world.","keywords":["rte-controller"],"author":{"name":"xiaqin@agora.io"},"license":"MIT","readme":"# RTE-Controller\n\nRTE UI controller is a module to be used in the UI resource itself to facilitate the integration with RTE world.\n\n## How to Use?\n\n### Install\n\n```bash\ncd path/to/your project\nnpm i rte-controller --save-dev\n```\n\n### Use\n\n#### Create RteContext instance\n\n* If the RTE App is running as a HTTP Server\n\n```typescript\nimport { createDefaultRteContext } from 'rte-controller';\n\nconst rteContext = await createDefaultRteContext({\n  uri: 'http://127.0.0.1:8001/',\n  graph_id: '0',\n  extension_group: 'default_ui_gateway_extension_ts_group',\n  extension: 'default_ui_gateway_extension_ts',\n});\n```\n\n* If the RTE App is running in the rendering thread of electron, you can specify `uri` to `localhost` or empty. Then rte-controller will transfer message between javascript function calls with the `Exported RTE` object.\n\n```typescript\nimport { createDefaultRteContext } from 'rte-controller';\n\nconst rteContext = await createDefaultRteContext({\n  uri: 'http://127.0.0.1:8001/',\n  graph_id: '0',\n  extension_group: 'default_ui_gateway_extension_ts_group',\n  extension: 'default_ui_gateway_extension_ts',\n});\n```\n\n#### Use with RTE layout template\n\nCreate RteContext first.\n\n```typescript\nimport { mountRteUiWidgets } from 'rte-controller';\n\n// Mount fetched UI widgets into DOM.\nawait mountRteUiWidgets(\n  rteContext,\n  document.getElementById('ui-container') as HTMLElement,\n);\n```\n\n#### Use with your own layout\n\nCreate RteContext first.\n\n```typescript\nReactDOM.render(\n  <>\n    <div\n      style={{\n        width: '400px',\n        backgroundColor: 'lightgray',\n      }}\n    >\n      <ExtensionContainer\n        rteContext={rteContext}\n        extension='extension_a'\n      ></ExtensionContainer>\n    </div>\n    <div\n      style={{\n        width: '600px',\n        backgroundColor: 'yellow',\n      }}\n    >\n      <ExtensionContainer\n        rteContext={rteContext}\n        extension='extension_b'\n      ></ExtensionContainer>\n    </div>\n  </>,\n  targetRenderContainer,\n);\n```\n\nYou can use `widgetProps` in `ExtensionContainer` to define any props, which will be passed to the widget component directly. For example:\n\n```React\n<ExtensionContainer\n  extension='default_ui_extension_ts'\n  rteContext={rteContext}\n  widgetProps={{\n    renderItem: (): React.ReactElement => {\n      return <div>aaa</div>;\n    },\n  }}\n></ExtensionContainer>\n```\n\n#### Define widget props in the UI Extension\n\nYou can define the widget props in the UI Extension, and `rte-controller` will fetch it from the UI Extension in rendering the widget. For example:\n\n```json\n{\n  \"extension_group\": {\n    \"addon\": \"default_extension_group\",\n    \"name\": \"ui_extension_group\"\n  },\n  \"extension\": {\n    \"addon\": \"default_ui_extension_ts\",\n    \"name\": \"default_ui_extension_ts\"\n  },\n  \"prop\": {\n    \"widget_props\": \"{\\\"mode\\\": \\\"demo\\\"}\"\n  }\n}\n```\n\nThe `widget_props` will be parsed in JSON format.\n\n#### Customize the timing of receiving message\n\nBy default, rte-controller will start to receive message when all the widgets are mounted.\n\nYou can customize with `setWidgetMountedListener()` in `RteContext`. For example:\n\n```typescript\nimport {\n  RteContext,\n  RteUiWidgetInfo,\n} from 'rte-controller';\n\nrteContext.setWidgetMountedListener(\n  (\n    rteContext: RteContext,\n    widget: RteUiWidgetInfo,\n    error?: Error,\n  ): void => {\n    console.log(\n      `The widget is ready, ${JSON.stringify(widget)}, error: ${error}`,\n    );\n\n    // Calling 'readyToReceiveExtensionMessage()' to open the message channel between the App and RTE Extension, and will receive events from RTE Extension if any.\n    setTimeout(() => {\n      rteContext.readyToReceiveExtensionMessage();\n    }, 5000);\n  },\n);\n```\n\n> Keep in mind that you have to call `readyToReceiveExtensionMessage()` yourself when the App is ready to receive messages from RTE Extension.\n\n#### Subscribe events\n\nYou can subscribe event from RTE Extension like the UI Widget with `subscribeEvent()` in `RteContext`. For example:\n\n```typescript\nrteContext.subscribeEvent({\n  extension: 'default_ui_extension_ts',\n  handler: (msg: RteUiWidgetMsg) => {\n    console.log(\n      `Receive message from default_ui_extension_ts: ${JSON.stringify(\n        msg,\n      )}`,\n    );\n  },\n});\n```\n\nThe `extension` and `type` are used to filter the events, you have to specify at least one. And of course, you can specify both of them.\n\nAnd you can use `unsubscribeEvent()` to cancel the subscription.\n","readmeFilename":"readme.md"}