closes LS-1185
flag=rce_enhancements
test plan:
- open the rce
> expect the external tools toolbar button to be in the section
of the toolbar with Links, Images, Media, and Documents
Change-Id: I80c5f9ed904d33cd99fdfb51b2e981922bb1f350
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/242617
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jackson Howe <jackson.howe@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
Explanation about how to run tests in the RCE package.
flag=none
Change-Id: I166627972712454285fbf8a85f61393815b0f513
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/242792
Reviewed-by: Ed Schiebel <eschiebel@instructure.com>
QA-Review: Ed Schiebel <eschiebel@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
The RCE depends on a textarea element on the Wiki edit page to
contain the raw HTML output of the RCE.
That textarea didn't have a label on it, so it failed A11y tests.
This adds the label, but keeps it hidden except when the raw HTML
textarea is shown. Then it shows the label to screen readers.
This also updates the RCE wrapper to handle hiding and showing
the textarea's label along with the textarea.
Test Plan:
Navigate to a page with the RCE Enhancements flag on
Verify that the label doesn't appear to screen readers when the RCE
is showing
Show the HTML editor
The screenreader should announce "Raw HTML Editor" immediately
because the textarea receives focus when you show it.
flag = rce_enhancements
Fixes LS-1155
Change-Id: Id1b9cbe169e095f02e665318e3637657fb0cb098
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/242639
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jackson Howe <jackson.howe@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Alex Anderson <raanderson@instructure.com>
closes LS-1157
flag=rce_enhancements
The problem was that when we flip to html edit mode, half the buttons
are hidden, and this wasn't accounted for.
Also discovered that the unit tests weren't really testing anything.
test plan:
- in the new rce, tab into the status bar.
- use the right and left arrow keys to move focus among the buttons
> expect focus to wrap around when getting to the end
- tab out of the RCE, then shift-tab back in
> expect focus to return to the button that had focus before
- flip to html-edit mode and repeat.
- click on the status bar's kb shortcut button, then close the
popup dialog
> expect focus to return to the button
- click on the a11y checker button, then close the tray
> expect focus to return to the button
Change-Id: I26ca75de153837d9145e122c32044578aaf44af2
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/242490
Reviewed-by: Jackson Howe <jackson.howe@instructure.com>
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
When RCEWrapper renders CanvasContentTray, the tray registers itself
with the bridge. Since the bridge is a singleton, it was stuck
on the last RCE in the page. This commit changes Bridge so it keeps
a map of editor.id -> tray controller. Now it can find the right
controller for the active tray. As a side-effect, the CanvasContentTray
has to know its parent RCE's id, so that's a new prop.
I also added keys to RCEWrapper and CanvasContentTray. Focus management
can get wonky if there are >1 instance of a component on the page, and
w/o the key, React can't tell them apart.
I also changed the Bridge var in RCEWrapper to bridge (lower-case)
since it's an instance, not the class. Just fo clarity.
closes LS-895
flag = rce_enhancements
test plan:
- see the ticket recreate scenario
- it should work for inserting anything from the tray
Change-Id: I0b46d56113ce2a22ecd07831c0f7102d40abc25d
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/242423
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
QA-Review: Jeremy Stanley <jeremy@instructure.com>
Product-Review: Jeremy Stanley <jeremy@instructure.com>
Jest automatically parallelizes tests, and is causing the node to have too high of a load. Splitting this into its own job reduces our timeout failure rates significantly.
Test Plan:
1. Ensure JS test results are accurate
2. Ensure JS skips build execution if previously successful
refs DE-38
Change-Id: Iaabf83bac02427d2686ff407209b3496cf0ca485
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/242095
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: James Butters <jbutters@instructure.com>
Reviewed-by: Ryan Norton <rnorton@instructure.com>
QA-Review: James Butters <jbutters@instructure.com>
Product-Review: Aaron Ogata <aogata@instructure.com>
closes LS-1147
flag = rce_enhancements
test plan: see the ticket acceptance criteria
Change-Id: I16cfa998b419505069556a6fc7a0e8a857b221cb
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/240738
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Alex Anderson <raanderson@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
The problem was that in switching from Course Links to
Files, we default to All Files, which has to be in the
user context, not course so we can retrieve the media.
Since we are switching from Links to All Files, it also
didn't make sense for the top drop-down in the tray to have
Course Files and User Files, so that menu is now
just Links and Files. If you've gone from Links -> Files
then change All -> something else (say Images), since we're already
in the user context, we change to User Files / Images.
From there you can change to Course Files if you want.
closes LS-1168
flag=rce_enhancements
test plan:
- in the new rce
- click Links > Course Links from the toolbar
> expect the tray to open
- open the Select where "Links" is currently selected
> expect the options to be "Links" and "Files"
- select "Files"
> expect to see All Files
- change "All" to Documents
> expect to see User Files / Documents
- change to "Links"
> expect to see course links
- try any other transition you can think of.
Change-Id: Ifa695abb7529ab5349429d27ec9835ed4973883a
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/241717
Reviewed-by: Alex Anderson <raanderson@instructure.com>
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
when I replaced tinymce's down-arrow icon with INSTUI's version
I missed a place where we need CSS to size it correctly.
closes LS-1169
flag=rce_enhancements
test plan:
- follow the ticket's recreate scenario
Change-Id: Id7ec9bb8c7fff6a9e77b79fd756d92ed75794df2
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/241723
Reviewed-by: Alex Anderson <raanderson@instructure.com>
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
QA-Review: Ed Schiebel <eschiebel@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
Takes external tools labeled as favorite and includes them in the toolbar.
Embeds the icon into an SVG to be used as the toolbar icon.
Only shows a max of 2 favorite tools.
Also moved the tools favorites to be next to the media upload icons,
as per Peyton's request.
Includes Selenium tests
Test plan:
Enable RCE Enhancements
Activate some apps (Wikipedia and Dropbox work well)
Use Ed's new work to favorite those two apps (or one of them - you do you)
Open an RCE page.
The icons should appear in the toolbar to the right.
Clicking the icon opens up the LTI tool modal properly.
flag = rce_enhancements
Closes LS-532
Change-Id: I96ace173793093f1fd2aa9dba546e7d4cd973c42
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/240530
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Ed Schiebel <eschiebel@instructure.com>
Product-Review: Peyton Craighill <pcraighill@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
If an image is selected when the user creates a link, link the
image and don't replace it with the link text.
I tried creating a unit test for the change, but it became more about
testing the mock tinymce than it did the actual code.
closes LS-1140
flag = rce_enhanements
test plan:
- add an image to the RCE
- click it, then create a link (external or course, doesn't matter)
> expect the image to be linked and not replaced with text
(you can confirm there's a link there by looking at the HTML view)
- try all manner of other link creating and editing scenarios and
make sure they still work. This is the umteenth time I've tweaked
link editing. Seems I fix 1 thing and break another.
Change-Id: I25316807c03e675186743c8422ee64a94c6cbcef
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/240491
QA-Review: Robin Kuss <rkuss@instructure.com>
Tested-by: Ed Schiebel <eschiebel@instructure.com>
Tested-by: Keith Garner <kgarner@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
Reviewed-by: Alex Anderson <raanderson@instructure.com>
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/241634
Reviewed-by: Ben Rinaca <brinaca@instructure.com>
Tested-by: Ben Rinaca <brinaca@instructure.com>
QA-Review: Ben Rinaca <brinaca@instructure.com>
Product-Review: Ben Rinaca <brinaca@instructure.com>
Refs FOO-649
flag=none
Finishes up the <Spinner> imports, pulling the stuff in from
packages.
Test plan:
* Similar to g/240804, just spot-check some of the stuff in the
planner and RCE to make sure everything is still functioning
Change-Id: I3ee605cd0982fef179a28994a39290ee3f8b2c12
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/240996
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Ahmad Amireh <ahmad@instructure.com>
QA-Review: Ahmad Amireh <ahmad@instructure.com>
Product-Review: Ahmad Amireh <ahmad@instructure.com>
closes LA-541
flag = rce_enhancements
test plan:
- load a page with the RCE
- add content or just drag the handle to make it nearly as tall
as your browser window
- now, scroll the page down
> expect the RCE's scrollbar to remain on visible at the top of the
browser's window.
> expect the contents of the RCE not to bleed into the bottom of
the toolbar (new as of PS3)
- keep scrolling so the RCE is completely out of view
> expect the scrollbar to scroll out of sight
Change-Id: I13960c1ab914cbfb9ba9ce96cedcc6d6597277ca
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/240466
Product-Review: Peyton Craighill <pcraighill@instructure.com>
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
QA-Review: Jeremy Stanley <jeremy@instructure.com>
closes LA-991
flag=rce_enhancements
Replaced a few toolbar icons with the instui versions for consistency.
test plan:
- specs pass and everything still works
Change-Id: Ibb488d6df2457f2e41138e40b3b3d9469eb68215
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/239388
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
According to WCAG 2.1, the "status" role is supposed to be used
to announce to the user when something changes. The linked ticket
specifically says we don't want that behavior, so I removed
`aria="status"` from the RCE status bar.
See https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22.html
Test Plan:
With the RCE Enhancements feature flag on
Navigate to an RCE page
Turn on the screen reader (VoiceOver)
Start typing.
The contents of the status bar are not announced, unless
you navigate the screen reader to that section of the webpage.
flag = rce_enhancements
Closes LS-1072
Change-Id: I74d0262b1a2e22ed3ca3d8f6959c58ad822af57f
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/240268
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Alex Anderson <raanderson@instructure.com>
The files need icons based on their type, especially for media
which display their title, and not filename so the user won't
know what it is. Because the INSTUI TreeBrowser doesn't support
setting per-item icons (see INSTUI-2636), this change works around
that by creating data url with the correct icon's SVG, then using
that as the item's tnumbnail.
Because I edited FileBrowser.js, I had to fix eslint issues found,
and I took the opportunity to address React proptype warnings.
closes LA-1132
flag = rce_enhancements
test plan:
- have a course+user with a variety of file types and
at least 1 audio and 1 video media
- open the content tray, and change to All
- expand the folders
> expect images to have their thumbnail
> expect all other file types to have the appropriate icon
(we distinguish between video, audio, Word, Powerpoint, Excel,
and pdf. everything eles is a generic document icon)
Change-Id: Idbac9e17660b6ba863b589ace454ef6e2337df71
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/240119
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
In the old RCE, images were added and let the prevailing CSS
constrain the width to 100%. With COREFE-241, I incorrectly
thought that was poor UX and constrained the images to be 320px
on the long side when first embedded. Turns out I was wrong.
This change reverts that and lets the images be their natural size,
subject to the 100% max-width constraint, just like the old RCE
closes LA-1127
flag = rce_enhancements
test plan:
- add a large photo to the RCE
> expect it to be constrained in size only by the width of
the RCE
> expect the RCE's height to expand to the eventual rendered
size of the image, and not the image's _real_ height
- save
> expect the same result
- edit again
- use the Image Options tray or drag handles to change
its size
> expect it to respect the new size
- save
> expect it to look like it did before
Change-Id: I9046f1fd2d9dd3af7435e75ff30bc1031e823f02
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/239976
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
closes LA-507
flag=rce_enhancements
test plan:
- in the RCE, select Documents > Course Documents
> expect the tray to open to course documents
- change "Documents" to "All"
> expect "Course Files" to change to "User Files"
> expect the file browser to get populated with all your
folders and files
> expect a new "My Media" folder with all your media listed
- from the "All" tray, click on an image file
> expect it to be embedded, not linked
- repeat for an audio or video
> expect it to be embedded, not linked
- repeat for some other file type
> expect it to be linked
Change-Id: Ic0fb955dcd9924d0055826113eedeb4a8b519a19
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/239202
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Alex Anderson <raanderson@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
closes: LA-1100
flag=rce_enhancements
when the video's aspect ratio is such that it's height/width is
less than the container it's been put in, shrink the container down
to match.
test plan:
- create a short-and-wide video (screen capture of a region
using QuickTie works)
- choose upload media and pick it
> expect it to fill the preview area as much as possible
- submit to upload
> expect the box around the video player to shrink to fit the video
- choose upload media and add a "normal" apsect video
> expect the preview to look good
- submit to upload
> expect it to fit in it's container
- add a portrait layout video
> expect the video to be letterboxed, centered in the preview
- submit
> expect it to be letterboxed inside the landscape container
- save
> expect all 3 videos to still be rendered as we expect
- put all the videos into fullscreen and back
> expect them to look right both fullscreen, and after
returning to normal size.
Change-Id: I0ead3e7fc20de1e0046263613f64f511ca3bc9d6
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/239267
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Peyton Craighill <pcraighill@instructure.com>
closes LA-929
flag=rce_enhancements
The canvas files api will reject an empty file, resulting in a generic
error message. Let's stop the user from doing this in the first place
with a better message.
test plan
- in the rce, try uploading an empty file (touch filename will create one)
> expect an error message saying you can't do that
> expect the Submit button to be disabled
- try uploading a non-empty file
> expect it to still work
Change-Id: I6b8b9bedf3f904f5fd25f82d7e29e0b23243b2d7
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/239119
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Peyton Craighill <pcraighill@instructure.com>
RCE images used to be identified by the presence of the data-is-decorative
attribute, and no alt text.This caused a11y audit failures. The new
approach is to mark the image with role="presentation" and leave the allt
text alone. This has the nice side effect of letting the user change her
mind about being decorative w/o losing the alt text.
The image options tray no longer disables the alt text textbox.
closes LA-1116
flag = rce_enhancements
test plan:
- embed an image in the rce (having some text around it will be
helpful later)
- click on it and Options
- in the Image Options tray, check the "Decorative Image" checkbox
- click Done
- inspect the image
> expect role="presentation" to be present
> expect the alt="your text here" to be present
- click the a11y audit button
> expect the image to pass the audit
- save the learning object you were working in
- read the resulting page with a screenreader
> expect the image to be skipped over
Change-Id: Ia0aadd1d65fe207af0b676464078b08e98285761
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/239726
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
There are a couple places in canvas doesn't treat uploaded svg files
as images. When returned from the files api, svg files are missing
a thumbnail url, and the response from canvas on uploading an svg file
misclassified it as a 'file' and not an 'image'
This commit reverts some generalization introduced into mime class categorization.
In an attempt to keep from having to play whack-a-mole with new mime types, I had
introduced changes where anything "image/*" was an image, and the same for "audio/*"
and "video/*", but there are a _lot_ of types I didn't consider that we wouldn't
be able to handle. For example, safari doesn't handle image/webp, so we shouldn't
yet treat that as an image file type.
closes LA-860
flag = rce_enhancements
test plan:
- in the RCE, upload an svg file
> expect it to be previewed in the image > upload dialog
> expect it to be embedded (not linked) in the RCE
- inspect the "create_success" network request's response
> expect the returned "mime_class" to be "image"
- from images > user or course images
> expect the tray to display the svg
- select the svg
> expect it to be embedded, not linked
- from media > record and upload, record audio
> expect it to show up in the rce as the embedded
audio player, and not as a link (this confirms
a fix from an earlier ticket wasn't broken)
Change-Id: I6a2b27550c674555e4f62a97a18091467d094b71
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/239633
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
closes LA-255
flag=rce_enhancements
test plan:
- specs all pass
- the rce still works
Change-Id: Ib33fc1e69d45ce27d36cab4930a6a1afda5b3f8b
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/239373
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
closes LA-729
flag=rce_enhancements
The original intent for the audio player was to size it so the buttons
just fit. This ignored the fact that it's rendered w/in an iframe,
so popup menus are clipped. This change sizes the player to leave
room for those popups.
While the ticket was written against the audio player, the same issues
may occur in the video player, either for portrait videos or videos < 400px
wide when closed captions are present. The original code for
sizing the video player shrank the width to fit
thea video's size, which clipped the buttons. This change sets a minimum
width for the player and letter-boxes the video.
test plan:
- in the new rce
- add an audio file
> expect it to be wide enough to show all the buttons and
tall enough for the speed and volume popups
- add a vertical video
> expect the video sized to fit in the available space in the Computer
tab of the Upload Media modal
- Submit to upload
> expect the player to be wide enough to show all the buttons
- click the fullscreen button
> expect the video to be the height of the screen and letterboxed
- restore to windowed size
> expect the video to return to its letterboxed size
- click the video, then the Options button
- change the video's size
> expect the video to remain letterboxed
- add a horizontal video
> expect the video sized to fit in the available space in the Computer
tab of the Upload Media modal
- submit to upload
> expect the player to be sized to the size of the video
- fullscreen
> expect the video to be letterboxed in the fullscreen player
(if the aspect ration of the video !== that of your monitor,
or fill the screen if they match)
- for the horizontal video, select Opitons and
change the size to be "medium" or "custom" and < 400px wide
and add subtitles
> expect the video to be letterboxed in a 400px wide iframe.
Change-Id: Ib5d08dbd7796985d00f656e38a642ab92939d614
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/238432
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Alex Anderson <raanderson@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
It's tricky. When creating a new link, we have to keep the existing text
in place. This is true for external links, course links, document links, etc.
But then when editing the link, we need to update the text according to
what the user entered in the Link Options tray. To that end, we now
keep track of whether the link is being edited or created.
closes LA-1012
flag=rce_enhancements
test plan:
- enter some text into the rce, then select some
- create a link (Link > Course Links or Documents toolbar button)
> expect the selected text to become the link
- click the link then Options button
- change the link text and save
> expect the link text to be updated
- select some of the link text, then click Options
- in the tray, edit the text and save
> expect all the link text to be replaced by the new
text
- click w/in a link, then use Documents to link a new doc
> expect the text to reamin the same, but the link to now
point to the new doc
- select all the text in a link, then use Documents to link
to a new doc
> expect the text to remain the same, but the link to point
to the new doc
- try all kinds of other stuff with editing and creating links
> expect something reasonable to happen. if not, let me know
- select some plain text
- do Links > External Links
> expect the text field in the popup dialog to be populated
with the selected text
- change the text, add a url, and click Done
> expect the created link to use the updated text
Change-Id: I94d0c660897a6c482f8bc6f1011d73616539f472
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/238684
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
QA-Review: Jeremy Stanley <jeremy@instructure.com>
Reviewed-by: Alex Anderson <raanderson@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
Lauren worked with @dans and felt new-improved wording in the
rce's keyboard shortcut popup dialog will suffice.
test plan:
- in the rce, click on the "view keyboard shortcuts" button
> expect the "CTRL+F9" help text to be " Focus element options toolbar"
Change-Id: I9b17888e2aee954a16c493e3a7840a51ff5d014b
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/238880
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
QA-Review: Jeremy Stanley <jeremy@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
closes LA-995
flag=none
1. unify the instui ui-babel-preset options across sub-packages
2. include "@instructure" as part of each sub-package name
3. unify the commonjs and es module directory structure
4. use index.js to export anything needed to be imported from
outside the package. This removes any dependency on the
package's internal directory structure and makes importing
independent of commonjs vs es module simple
5. move canvas-rce's main entry from async.js to index.js
(I'm 98% sure index.js was an artifact of the old rce)
test plan:
- canvas-lms builds locally and in docker. (Jenkins builds
the docker image, so I presume if it passes jenkins,
the docker build wasn't broken)
- sniff test the result, esp. student planner and the new rce.
- yarn build:watch from canvas-rce, canvas-planner, and
canvas-media packages should work, and yarn build:watch
from canvas-lms should pick-up any changes.
(I've verified this by finding a console.log statement
and changing the message then use devtools to see it's in
the new source after refreshing the browser)
Change-Id: I5f242d06ad655597cd416057d4b740d4bd86003b
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/238603
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Alex Anderson <raanderson@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
In a previous ticket, we added some code that programmatically
closed the floating toolbar. The appraoch was to aggressive
and messed with tinymce's internal state so that reopening the
toolbar could fail. This change makes a minor adjustment to
when we do that (e.g. on focus rather than blur), and adds
a handler so ESC will close the toolbar (while the RCE has focus)
closes LA-1010
flag=rce_enhancements
test plan:
- in the rce, in a browser narrow enough that the ... toolbar
button shows up
- click the "More..." toolbar button
> expect the floating toolbar with the rest of the rce commands
to open
- click the "More..." button
> expect the floating toolbar to close
- with the toolbar open:
- with focus anywhere in the RCE, type ESC
> expect the toolbar to close
- move focus somewhere else on the page, then back into the rce
> expect the toolbar to close
- type alt-f10, and focus moves to the toolbar
- TAB to the More button
- type ENTER
> expect the toolbar to open and focus to move to the
first button in the toolbar
> expect alternately typeing ESC and ENTER to close and open
the toolbar
- click or type ENTER on any of the toolbar commands
> expect the floating toolbar to close
Change-Id: I7f18b34f03bde3fd6032066e4e077d87dcce43b0
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/238836
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
QA-Review: Jeremy Stanley <jeremy@instructure.com>
Product-Review: Jeremy Stanley <jeremy@instructure.com>
closes LA-1013
flag=cc_in_rce_video_tray
test plan:
- in an rce with a video
- click the video then the Options button
- in the video options tray that opens, edit
the title, change to link and back, change the
size
> expect focus works intuitively (at the very least
it does not jump down to the subtitle section)
This should be repeated in chrome and either ff or safari
since they behave differently wrt focusing radio buttons
and checkboxes.
Change-Id: Ifed5f1b24936ef5fbec68a899994d14f5cee5fbd
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/237286
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
Reviewed-by: Jon Willesen <jonw+gerrit@instructure.com>
QA-Review: Jon Willesen <jonw+gerrit@instructure.com>
When a file was selected from the All Documents file tree, it
was missing the necessary class names that cue instructure.js
to provide the inline preview button.
closes LA-568
flag=none
test plan:
- in the new rce
- in a class with a pdf file
- select Documents > Course documents from the toolbar
- click on the pdf file
> expect a link to the file in the rce
- select Documents > Course documents from the toolbar
- in the tray, change from Documents to All in the Select
- in the file tree, click on the pdf file
> expect a link to the file in the rce
- save
> expect both file links to include the "Preview the Document"
button next to them
- click it
> expect an inline preview of the file
Change-Id: I356e13b96cf5155b7d0f276eacf6cc6da66273e5
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/235802
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
QA-Review: Anju Reddy <areddy@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
there was a bug in the RCE's link generating code that missed
marking a link as being previewable. This caused the checkboxes
not to appear in the link options tray.
closes LA-996
flag=none
test plan:
- in the rce upload or link to a .docx course file
- click on the resulting link in the rce, then Options
> expect the Display Options checkboxes to be displayed.
- save
> expect the link to behave according to how you checked the boxes
1) gets a preview icon next to it
2) if disable was checked, there is no preview icon
3) if automatically preview was checked, it automatically tries
to open the preview (this may not actually render if you're
using google docs to call back to your localhost to get the file,
but the preview frame should open)
Change-Id: Ic870e212103e060fce0da10712437e7955c47155
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/236977
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
QA-Review: Anju Reddy <areddy@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
closes LA-985
flag=rce_enhancements
test plan:
The caption editor appears both when you upload a new video
or from the Video Options tray in the rce when editing a
video.
- add some captions
- when clicking the + button, focus should move to the language
select
- when deleting an existing caption, focus should move to the
next one
- if you're in the middle of creating a new caption and jump up
and delete an existing caption, focus should move to the
language select.
Change-Id: I0268068247cf03b6e97e537e137c70eb49953011
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/236465
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
QA-Review: Jeremy Stanley <jeremy@instructure.com>
Product-Review: Lauren Williams <lcwilliams@instructure.com>
closes LA-463
flag=cc_in_rce_video_tray
This change:
1. updates the closed-caption handling w/in the object that handle them
so that their properties don't change depending on where you are.
For the most part, this meant using locale as the unique identifier.
2. Adds the current tracks to the video options passed to the
VideoOtionTray
3. Adds an api call to update media_tracks on saving changes from the
VideoOptionsTray
4. refreshes the iframe containing the media player after updates
complete. This updates the tracks on the contained <video>
element
5. As add closed captions in a language, that language is removed
from the Select when adding more.
test plan:
- upload a video using RCS
- add closed captions in at least 1 language
(it doesn't matter whether the .srt file is in
the right lang. no one checks)
> as you add languages, expect them to be removed
from the list of available languages in the
language Select
> expect the CC button on the resulting video in
the rce with the right languages in the popup
menu
- click on the video, then the Options button
> expect the Video Options tray to include the
closes captions you added
- replace some, delete some, add some
- click Done
> expect the CC menu in the video to include the
updated list of captions
- click on the video, then the Options button
- check the "Display text link" checkbox
- edit the closed captions
- click Done
> expect a link to the movie in the RCE now
- right-click on the link and select open in a new window|tab
> expect the video in the new window|tab to have the updated
closed caption list when you click the CC button
Change-Id: Ie2b51708a7390c47dfcf5ab2b2dbfd9e998fbf86
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/227691
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
QA-Review: Jeremy Stanley <jeremy@instructure.com>
Reviewed-by: Jon Willesen <jonw+gerrit@instructure.com>
Product-Review: Lauren Williams <lcwilliams@instructure.com>
Ed Schiebel