diff --git a/src/index.jsx b/src/index.jsx index 8c42ef1b6..0fbbb65cd 100755 --- a/src/index.jsx +++ b/src/index.jsx @@ -2,6 +2,7 @@ import { APP_INIT_ERROR, APP_READY, subscribe, initialize, mergeConfig, getConfig, getPath, } from '@edx/frontend-platform'; import { AppProvider, ErrorPage } from '@edx/frontend-platform/react'; +import { AuthoringAppSlot } from 'CourseAuthoring/plugin-slots/AuthoringAppSlot'; import React, { StrictMode, useEffect } from 'react'; import { createRoot } from 'react-dom/client'; import { @@ -97,12 +98,14 @@ const App = () => { return ( - - - - - - + + + + + + + + ); }; diff --git a/src/plugin-slots/AuthoringAppSlot/README.md b/src/plugin-slots/AuthoringAppSlot/README.md new file mode 100644 index 000000000..b00c83cfd --- /dev/null +++ b/src/plugin-slots/AuthoringAppSlot/README.md @@ -0,0 +1,44 @@ +# AuthoringAppSlot + +### Slot ID: `authoring_app_slot` + +### Plugin Props: + +NONE + +## Description + +The slot wraps the entire application. It can be used to add content before or +after the application (such as cookie banners) or to wrap the entire +application in a component. One possible use case of that is to wrap the entire +application in a context manager that would allow communication between +different slots injected on the page. + +## Example + +![Screenshot of the entire app surrounded by border](./images/app_wrapped_in_border.png) + +The following example configuration wraps the entire app in a dashed border as +shown above. + +```js +import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; + +const config = { + pluginSlots: { + authoring_app_slot: { + keepDefault: true, + plugins: [ + { + op: PLUGIN_OPERATIONS.Wrap, + widgetId: 'default_contents', + wrapper: ({ component }) => ( +
{component}
+ ), + }, + ], + }, + } +}; +export default config; +``` diff --git a/src/plugin-slots/AuthoringAppSlot/images/app_wrapped_in_border.png b/src/plugin-slots/AuthoringAppSlot/images/app_wrapped_in_border.png new file mode 100644 index 000000000..14ea3a7e0 Binary files /dev/null and b/src/plugin-slots/AuthoringAppSlot/images/app_wrapped_in_border.png differ diff --git a/src/plugin-slots/AuthoringAppSlot/index.tsx b/src/plugin-slots/AuthoringAppSlot/index.tsx new file mode 100644 index 000000000..e9335fc45 --- /dev/null +++ b/src/plugin-slots/AuthoringAppSlot/index.tsx @@ -0,0 +1,11 @@ +import { PluginSlot } from '@openedx/frontend-plugin-framework'; + +export const AuthoringAppSlot = ({ children }:AuthoringAppSlotProps) => ( + + {children} + +); + +interface AuthoringAppSlotProps { + children: React.ReactNode; +}