{"id":20037891,"url":"https://github.com/openedx-unsupported/frontend-lib-content-components","last_synced_at":"2025-05-05T06:31:44.906Z","repository":{"id":38084527,"uuid":"429912166","full_name":"openedx/frontend-lib-content-components","owner":"openedx","description":"A library of high-level components for content handling (viewing, editing, etc. of HTML, video, problems, etc.), to be shared by multiple MFEs.","archived":false,"fork":false,"pushed_at":"2024-04-08T15:10:31.000Z","size":12625,"stargazers_count":10,"open_issues_count":24,"forks_count":29,"subscribers_count":14,"default_branch":"main","last_synced_at":"2024-04-09T23:10:50.432Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/openedx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2021-11-19T19:28:49.000Z","updated_at":"2024-04-17T19:54:01.227Z","dependencies_parsed_at":"2023-10-05T01:18:37.994Z","dependency_job_id":"cc4c134f-70d4-44dc-bc61-f8625e3b2ed1","html_url":"https://github.com/openedx/frontend-lib-content-components","commit_stats":{"total_commits":314,"total_committers":27,"mean_commits":11.62962962962963,"dds":0.7388535031847134,"last_synced_commit":"76ad7d8bda974a8de9b40cf1425cee010dcd2b39"},"previous_names":["edx/frontend-lib-content-components"],"tags_count":302,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openedx%2Ffrontend-lib-content-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openedx%2Ffrontend-lib-content-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openedx%2Ffrontend-lib-content-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openedx%2Ffrontend-lib-content-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/openedx","download_url":"https://codeload.github.com/openedx/frontend-lib-content-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224428976,"owners_count":17309627,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T10:23:36.362Z","updated_at":"2025-05-05T06:31:39.358Z","avatar_url":"https://github.com/openedx.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# frontend-lib-content-components\n\n## 🚧 Moved 🚧\n\nThis package is **unsupported**. It will receive no further updates.\n\nThe code in this repository has been merged into [`frontend-app-course-authoring`](https://github.com/openedx/frontend-app-course-authoring). Please use that repo going forward.\n\nSee https://github.com/openedx/frontend-app-course-authoring/pull/1208 for details.\n\n\n-------------------------\n\n\n# Purpose\nA library of high-level components for content handling (viewing, editing, etc. of HTML, video, problems, etc.), to be shared by multiple MFEs.\n\n# Getting Started\n\n## How to set up development workflow of V2 content Editors in Studio and course Authoring MFE.\n\nThis guide presumes you have a functioning devstack.\n\n1. Enable Studio to use an editor for your xblock using waffle flags\n    1. Add the string name of your editor e.g. `html` to the flag check in the [edx-platform repo.](https://github.com/openedx/edx-platform/blob/369e5af85ab58c51a4bf4baf249d5cb36c1961fe/cms/static/js/views/pages/container.js#L190)\n    2. In devstack + venv, run `$ 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.\n    4. In [Studio Django Admin](http://localhost:18000/admin/waffle/flag/) turn on `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. ](https://github.com/openedx/edx-platform/blob/master/cms/djangoapps/contentstore/toggles.py). you might have to add a flag for your xblock of choice.\n2. Clone this repo into the [`${DEVSTACK_WORKSPACE}/src` directory](https://edx.readthedocs.io/projects/open-edx-devstack/en/latest/readme.html?highlight=DEVSTACK_WORKSPACE#id9) the sibling repo of your edx devstack `/src`.\n3. In the course authoring app, follow the guide to use your [local verison of frontend-lib-content-components. ](https://github.com/openedx/frontend-build#local-module-configuration-for-webpack) The module.config.js in the frontend-app-course-authoring repo will be:\n\n```\n    module.exports = {\n    /*\n    Modules you want to use from local source code.  Adding a module here means that when this app\n    runs its build, it'll resolve the source from peer directories of this app.\n\n    moduleName: the name you use to import code from the module.\n    dir: The relative path to the module's source code.\n    dist: The sub-directory of the source code where it puts its build artifact.  Often \"dist\".\n\n    To use a module config:\n\n    1. Copy module.config.js.example and remove the '.example' extension\n    2. Uncomment modules below in the localModules array to load them from local source code.\n    3. Remember to re-build the production builds of those local modules if they have one.\n        See note below.\n    */\n    localModules: [\n        /*********************************************************************************************\n        IMPORTANT NOTE: If any of the below packages (like paragon or frontend-platform) have a build\n        step that populates their 'dist' directories, you must manually run that step.  For paragon\n        and frontend-platform, for instance, you need to run `npm run build` in the repo before\n        module.config.js will work.\n        **********************************************************************************************/\n\n        // { moduleName: '@edx/brand', dir: '../brand-openedx' }, // replace with your brand checkout\n        // { moduleName: '@openedx/paragon/scss/core', dir: '../paragon', dist: 'scss/core' },\n        // { moduleName: '@openedx/paragon/icons', dir: '../paragon', dist: 'icons' },\n        // { moduleName: '@openedx/paragon', dir: '../paragon', dist: 'dist' },\n        // { moduleName: '@edx/frontend-platform', dir: '../frontend-platform', dist: 'dist' },\n        // NOTE: This is the relative path of the frontend-lib-content-components in the frontend-app-course-authoring container.\n        { moduleName: '@edx/frontend-lib-content-components', dir: '../src/frontend-lib-content-components', dist: 'dist' },\n    ],\n    };\n\n```\n\n4. Open a terminal\n    1. `cd ${DEVSTACK_WORKSPACE}/src/frontend-lib-content-components`\n    1. run `$ npm install`\n    2. run `$ make build` when you want to see your changes.\n\n5. In devstack run `make studio-static` followed by `$ make dev.down.frontend-app-course-authoring` and `$ make dev.up.frontend-app-course-authoring`.\n\n6. Go to [studio](http://localhost:18010) and edit a course or add the Xblock with the developing editor, it should redirect to `frontend-app-course-authoring`\n   MFE and the editor should load.\n\n## Using the gallery view.\n\nThe 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\n\n$ cd www\n$ npm start\n\nand now the gallery will be live at http://localhost:8080/index.html. use the toggle at the top to switch between available editors.\n\n## Creating Xblock Editor\n\nTo develop a custom Xblock editor, run the command:\n\n`$ npm run-script addXblock \u003cname of xblock\u003e`\n\nfrom the frontend-lib-content-components source directory. It will create an editor you can then view at `src/editors/containers`.\nIt 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:\n\n1. Adding a flag in [toggles.py](https://github.com/openedx/edx-platform/blob/master/cms/djangoapps/contentstore/toggles.py)\n2. Activating the Flag in [Studio Django Admin. ](http://localhost:18000/admin/waffle/flag/)\n3. Add the function in [studio_xblock_wrapper.html](https://github.com/openedx/edx-platform/blob/master/cms/templates/studio_xblock_wrapper.html#L13)\n4. Make appropriate changes in [container.js in the edx-platform repo.](https://github.com/openedx/edx-platform/blob/369e5af85ab58c51a4bf4baf249d5cb36c1961fe/cms/static/js/views/pages/container.js#L190)\n5. Activate the flag.\n6. Follow steps 4 to 6 from [above](#how-to-set-up-development-workflow-of-v2-content-editors-in-studio-and-course-authoring-mfe)\n\n## Installing into a project\n\n- `npm install @edx/frontend-lib-content-components`\n- For the Jest tests to work, a few config options are necessary. In jest.config.js, include:\n```js\n  moduleNameMapper: {\n    '^lodash-es$': 'lodash',\n  },\n```\n- Some mocks for test setup are also necessary, specifically replacing `window.matchMedia`.\n- To make this easier, we provide example files for `jest.config.js` and `setupTest.js` that are known to work.\nYou can find them in the example/ folder.\n\n## License\n\nThe code in this repository is licensed under the AGPLv3 unless otherwise\nnoted.\n\nPlease see `LICENSE \u003cLICENSE\u003e`_ for details.\n\n## Contributing\n\nContributions are very welcome.  Please read `How To Contribute`_ for details.\n\n.. _How To Contribute: https://openedx.org/r/how-to-contribute\n\nThis project is currently accepting all types of contributions, bug fixes,\nsecurity fixes, maintenance work, or new features.  However, please make sure\nto have a discussion about your new feature idea with the maintainers prior to\nbeginning development to maximize the chances of your change being accepted.\nYou can start a conversation by creating a new issue on this repo summarizing\nyour idea.\n\n## Getting Help\n\nIf you're having trouble, we have discussion forums at\nhttps://discuss.openedx.org where you can connect with others in the community.\n\nOur real-time conversations are on Slack. You can request a `Slack\ninvitation`_, then join our `community Slack workspace`_.  Because this is a\nfrontend repository, the best place to discuss it would be in the `#wg-frontend\nchannel`_.\n\nFor anything non-trivial, the best path is to open an issue in this repository\nwith as many details about the issue you are facing as you can provide.\n\nhttps://github.com/openedx/frontend-lib-content-components/issues\n\nFor more information about these options, see the `Getting Help`_ page.\n\n.. _Slack invitation: https://openedx.org/slack\n.. _community Slack workspace: https://openedx.slack.com/\n.. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6\n.. _Getting Help: https://openedx.org/community/connect\n\n##  The Open edX Code of Conduct\n\nAll community members are expected to follow the `Open edX Code of Conduct`_.\n\n.. _Open edX Code of Conduct: https://openedx.org/code-of-conduct/\n\n## Reporting Security Issues\n\nPlease do not report security issues in public. Please email security@openedx.org.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopenedx-unsupported%2Ffrontend-lib-content-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopenedx-unsupported%2Ffrontend-lib-content-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopenedx-unsupported%2Ffrontend-lib-content-components/lists"}