This package is unsupported. It will receive no further updates.
The code in this repository has been merged into frontend-app-course-authoring. Please use that repo going forward.
See https://github.com/openedx/frontend-app-course-authoring/pull/1208 for details.
A library of high-level components for content handling (viewing, editing, etc. of HTML, video, problems, etc.), to be shared by multiple MFEs.
This guide presumes you have a functioning devstack.
html to the flag check in the edx-platform repo.$ make dev.provision.lms+cms+frontend-app-course-authoring to make up the required services. Minimum services required are lms, studio and frontend-app-course-authoring.new_core_editors.use_new_text_editor flag for HTML editor, new_core_editors.use_new_video_editor flag for new video editor, and new_core_editors.use_new_problem_editor flag for problems. The list of supported flags is in toggles.py. . you might have to add a flag for your xblock of choice.${DEVSTACK_WORKSPACE}/src directory the sibling repo of your edx devstack /src. module.exports = {
/*
Modules you want to use from local source code. Adding a module here means that when this app
runs its build, it'll resolve the source from peer directories of this app.
moduleName: the name you use to import code from the module.
dir: The relative path to the module's source code.
dist: The sub-directory of the source code where it puts its build artifact. Often "dist".
To use a module config:
1. Copy module.config.js.example and remove the '.example' extension
2. Uncomment modules below in the localModules array to load them from local source code.
3. Remember to re-build the production builds of those local modules if they have one.
See note below.
*/
localModules: [
/*********************************************************************************************
IMPORTANT NOTE: If any of the below packages (like paragon or frontend-platform) have a build
step that populates their 'dist' directories, you must manually run that step. For paragon
and frontend-platform, for instance, you need to run `npm run build` in the repo before
module.config.js will work.
**********************************************************************************************/
// { moduleName: '@edx/brand', dir: '../brand-openedx' }, // replace with your brand checkout
// { moduleName: '@openedx/paragon/scss/core', dir: '../paragon', dist: 'scss/core' },
// { moduleName: '@openedx/paragon/icons', dir: '../paragon', dist: 'icons' },
// { moduleName: '@openedx/paragon', dir: '../paragon', dist: 'dist' },
// { moduleName: '@edx/frontend-platform', dir: '../frontend-platform', dist: 'dist' },
// NOTE: This is the relative path of the frontend-lib-content-components in the frontend-app-course-authoring container.
{ moduleName: '@edx/frontend-lib-content-components', dir: '../src/frontend-lib-content-components', dist: 'dist' },
],
};
Open a terminal
cd ${DEVSTACK_WORKSPACE}/src/frontend-lib-content-components$ npm install$ make build when you want to see your changes.In devstack run make studio-static followed by $ make dev.down.frontend-app-course-authoring and $ make dev.up.frontend-app-course-authoring.
Go to studio and edit a course or add the Xblock with the developing editor, it should redirect to frontend-app-course-authoring
MFE and the editor should load.
The gallery view runs the editor components with mocked-out block data, and sometimes does not replicate all desired behaviors, but can be used for faster iteration on UI-related changes. To run the gallery view, from the root directory, run
$ cd www $ npm start
and now the gallery will be live at http://localhost:8080/index.html. use the toggle at the top to switch between available editors.
To develop a custom Xblock editor, run the command:
$ npm run-script addXblock <name of xblock>
from the frontend-lib-content-components source directory. It will create an editor you can then view at src/editors/containers.
It will also configure the editor to be viewable in the gallery view. Adding the editor to be used in studio will require the following steps:
npm install @edx/frontend-lib-content-componentsmoduleNameMapper: {
'^lodash-es$': 'lodash',
},window.matchMedia.jest.config.js and setupTest.js that are known to work.
You can find them in the example/ folder.The code in this repository is licensed under the AGPLv3 unless otherwise noted.
Please see LICENSE <LICENSE>_ for details.
Contributions are very welcome. Please read How To Contribute_ for details.
.. _How To Contribute: https://openedx.org/r/how-to-contribute
This project is currently accepting all types of contributions, bug fixes, security fixes, maintenance work, or new features. However, please make sure to have a discussion about your new feature idea with the maintainers prior to beginning development to maximize the chances of your change being accepted. You can start a conversation by creating a new issue on this repo summarizing your idea.
If you're having trouble, we have discussion forums at https://discuss.openedx.org where you can connect with others in the community.
Our real-time conversations are on Slack. You can request a Slack invitation, then join our community Slack workspace. Because this is a
frontend repository, the best place to discuss it would be in the #wg-frontend channel_.
For anything non-trivial, the best path is to open an issue in this repository with as many details about the issue you are facing as you can provide.
https://github.com/openedx/frontend-lib-content-components/issues
For more information about these options, see the Getting Help_ page.
.. _Slack invitation: https://openedx.org/slack .. community Slack workspace: https://openedx.slack.com/ .. #wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6 .. _Getting Help: https://openedx.org/community/connect
All community members are expected to follow the Open edX Code of Conduct_.
.. _Open edX Code of Conduct: https://openedx.org/code-of-conduct/
Please do not report security issues in public. Please email security@openedx.org.