0ffc9d82b4
refs MAT-719
flag=buttons_and_icons_root_account
Test Plan
- build canavs-rce and canvas JS bundles. Make sure you
are running lateste RCS NOT from an image
- In a course, create two assignments: "Assignment A" and
"Assignment B"
- In Assignment A, create a button and icon in the description
- Save Assignment A
- Embed the exact same button and icon in Assignment B's
description.
- Save Assignment B
- Edit Assignment A. Click the button and icon in the RCE
and then choose "Edit" to update the button and icon
- Verify a request was made that included that looks like this:
Path: /files/2168/download
Params:
download_frd=1
replacement_chain_context_type=course
replacement_chain_context_id=<cours id>
- Make a memorable change to the button and icon. Make sure
to click the "Apply changes to all instances..." checkbox
before saving.
- Edit Assignment B
- Verify the button and icon has updated to match the changes
made in step 8.
- Click "edit" on the button and icon. Verify the edit form
is pre-populated. Verify you can make changes to the button
and icon.
- In a new assignment, add a button from the existing buttons
and icons tray
- Save the assignment
- Edit the assignment and verify you are able to edit the
button and icon
Change-Id: I51df7574941326b1332cc1df973adb98debcf061
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/286356
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jon Scheiding <jon.scheiding@instructure.com>
QA-Review: Jon Scheiding <jon.scheiding@instructure.com>
Product-Review: Weston Dransfield <wdransfield@instructure.com>
|
||
|---|---|---|
| .. | ||
| bin | ||
| demo | ||
| doc | ||
| github-pages | ||
| jest | ||
| locales | ||
| scripts | ||
| src | ||
| test | ||
| testcafe | ||
| .dockerignore | ||
| .eslintrc | ||
| .gitignore | ||
| .npmignore | ||
| .prettierignore | ||
| .testcaferc.json | ||
| DEVELOPMENT.md | ||
| Dockerfile | ||
| LICENSE | ||
| README.md | ||
| babel-register.js | ||
| babel.config.js | ||
| build.sh | ||
| docker-compose.yml | ||
| jest.config.js | ||
| mocha-reporter-config.js | ||
| package.json | ||
| webpack.demo.config.js | ||
| webpack.dev.config.js | ||
| webpack.shared.config.js | ||
| webpack.testcafe.config.js | ||
README.md
Canvas Rich Content Editor
The Canvas LMS Rich Content Editor extracted in it's own npm package for use
across multiple services. In the canvas ecosystem, this npm module is used
in pair with a running canvas-rce-api microservice.
Some features require a running instance of the canvas-rce-api,
but you do not need that instance in order to
do development on canvas-rce. (see docs/development.md)
The first customer of the canvas-rce is the canvas-lms LMS so documentation
and references throughout documentation might reflect and assume the use of
canvas-lms.
Install and setup
As a published npm module, you can add canvas-rce to your node project by doing the following:
npm install canvas-rce --save
For guidance on how canvas-rce is used within canvas, please reference
the canvas-lms use of canvas-rce
to get an idea on how to incorporate it into your project. Pay
special attention to the RichContentEditor.js and serviceRCELoader.js.
Outside of canvas, the CanvasRce React component is your entry point.
Work is ongoing to make the props to CanvasRce more rational.
Please be patient.
Tests
While canvas consumes the es modules build of the rce, Jest tests are run against the commonjs build, so make sure you've built the commonjs assets before running tests:
yarn build:canvas
yarn test:jest
There are still legacy mocha tests run with yarn test:mocha. yarn test runs them all.
test debugging hints
yarn test:jest:debug path/to/__test__/file.test.js
will break and wait for you to attach a debugger (e.g. chrome://inspect/#devices).
Similarly, for mocha tests
yarn test:mocha:debug path/to/test/file.test.js
Both those commands may include a --watch argument to keep the process alive
while you iterate.
Polyfills
This project makes use of modern JavaScript APIs like Promise, Object.assign, Array.prototype.includes, etc. which are present in modern browsers but may not be present in old browsers like IE 11. In order to not send unnecessarily large and duplicated code bundles to the browser, consumers are expected to have already globally polyfilled those APIs. Canvas only supports modern browsers and the rce has not been tested in older browsers like IE. If you need suggestions for how to include polyfills in your own app, you can just put this in your html above the script that includes canvas-rce:
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?rum=0"></script>
(See: https://polyfill.io/v2/docs/ for more info)
Development
See DEVELOPMENT.md