@instructure/canvas-rce 5.14.0 → 5.14.2

package/CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 5.14.2 - 2024-11-26
+
+- Added an icon to find and replace tray error
+
+## 5.14.1 - 2024-10-28
+
+### Changed
+
+- Forward along access token and inst_ui parameters from file URLs.
+
 ## 5.14.0 - 2024-10-18
 
 ### Added
@@ -19,6 +29,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Upgraded React to 18
 
+## 5.13.7 - 2024-10-28
+
+### Changed
+
+- Forward along access token and inst_ui parameters from file URLs.
+
 ## 5.13.6 - 2024-09-25
 
 ### Fixed
@@ -36,6 +52,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added IDs to multiple objects missing IDs
 - Add loading spinners to image uploads
 
+## 5.13.5 - 2024-09-25
+
+### Fixed
+
+- File links with data-canvas-previewable='false' will no longer try to preview
+- Change backgroundless buttons to "primary" theme color to be more visible
+- Fix LTI tool scrolling issue on small iOS devices
+- Adding missing translation strings
+- Fixed some types of non-Canvas files from trying to preview like Canvas files
+
+### Changed
+
+- Allow links with data-old-link to replace the existing src or href with the contents
+  of the data-old-link attribute
+- Added IDs to multiple objects missing IDs
+- Add loading spinners to image uploads
+
 ## 5.13.5 - 2024-08-12
 
 ### Fixed

package/DEVELOPMENT.md

@@ -52,7 +52,7 @@ Builds then loads the demo from the filesystem.
 
 Because this package lives in the Canvas packages workspace, you can make modifications to it without first needing to do a `yarn install` in Canvas.
 
-You can start up the watch mode of this package by running `yarn build:watch` inside the `canvas-rce` directory. Then in Canvas proper, you can run `yarn build:js:watch` and things generally work out. If for some reason you get errors with the watch modes, you can fallback to the regular builds `yarn build:canvas` inside of `canvas-rce` and `yarn build:js` inside of Canvas.
+You can start up the watch mode of this package by running `yarn build:watch` inside the `canvas-rce` directory. Then in Canvas proper, you can run `yarn build:js:watch` and things generally work out. If for some reason you get errors with the watch modes, you can fallback to the regular builds `yarn build` inside of `canvas-rce` and `yarn build:js` inside of Canvas.
 
 ## Plugins
 

package/README.md

@@ -33,8 +33,6 @@ yarn build:all
 yarn test:jest
 ```
 
-There are still legacy mocha tests run with `yarn test:mocha`. The command `yarn test` runs them all.
-
 ### Test Debugging Hints
 
 ```
@@ -43,12 +41,6 @@ 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.
 

package/__tests__/common/indicate.test.js

@@ -0,0 +1,84 @@
+/*
+ * Copyright (C) 2018 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import sinon from 'sinon'
+import indicate from '../../src/common/indicate'
+
+describe('indicate function', () => {
+  let clock, region, margin, indicator
+
+  beforeEach(() => {
+    clock = sinon.useFakeTimers()
+    region = {
+      top: 10,
+      left: 20,
+      width: 30,
+      height: 40,
+      zIndex: 50,
+    }
+    margin = 5
+    indicator = indicate(region, margin)
+  })
+
+  afterEach(() => {
+    clock.restore()
+  })
+
+  it('appends a div to the body', () => {
+    expect(indicator.parentNode).toEqual(document.body)
+  })
+
+  it('removes the div after 2 seconds', () => {
+    clock.tick(2000)
+    expect(indicator.parentNode).toBeNull()
+  })
+
+  describe('shape', () => {
+    it('has dimensions of region plus margin', () => {
+      expect(indicator.style.width).toEqual('40px')
+      expect(indicator.style.height).toEqual('50px')
+    })
+
+    it('is positioned at region minus margin', () => {
+      expect(indicator.style.top).toEqual('5px')
+      expect(indicator.style.left).toEqual('15px')
+    })
+
+    it('has a default margin of 3', () => {
+      region.left = 3
+      expect(indicate(region).style.left).toEqual('0px')
+    })
+  })
+
+  describe('transitions', () => {
+    it('div initially has enter and active classes', () => {
+      expect(/enter/.test(indicator.className)).toBeTruthy()
+      expect(/active/.test(indicator.className)).toBeTruthy()
+    })
+
+    it('div has leave class after 900ms', () => {
+      clock.tick(900)
+      expect(/leave/.test(indicator.className)).toBeTruthy()
+    })
+
+    it('div gets leave fast class on mouse over', () => {
+      indicator.dispatchEvent(new window.MouseEvent('mouseover'))
+      expect(/leaveFast/.test(indicator.className)).toBeTruthy()
+    })
+  })
+})

package/__tests__/common/mimeClass.test.js

@@ -0,0 +1,85 @@
+/*
+ * Copyright (C) 2018 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import {fileEmbed, mimeClass} from '../../src/common/mimeClass'
+
+describe('fileEmbed', () => {
+  const base_file = {preview_url: 'some_url'}
+
+  function getBaseFile(...args) {
+    return Object.assign({}, base_file, ...args)
+  }
+
+  it('defaults to file', () => {
+    expect(fileEmbed({}).type).toEqual('file')
+  })
+
+  it('uses content-type to identify video and audio', () => {
+    const video = fileEmbed(getBaseFile({'content-type': 'video/mp4'}))
+    const audio = fileEmbed(getBaseFile({'content-type': 'audio/mpeg'}))
+    const notaudio = fileEmbed(
+      getBaseFile({'content-type': 'x-audio/mpeg', preview_url: undefined})
+    )
+    const notvideo = fileEmbed(getBaseFile({'content-type': 'x-video/mp4', preview_url: undefined}))
+
+    expect(video.type).toEqual('video')
+    expect(audio.type).toEqual('audio')
+    expect(notaudio.type).toEqual('file')
+    expect(notvideo.type).toEqual('file')
+  })
+
+  it('picks scribd if there is a preview_url', () => {
+    const scribd = fileEmbed(getBaseFile({preview_url: 'some-url'}))
+    expect(scribd.type).toEqual('scribd')
+  })
+
+  it('uses content-type to identify images', () => {
+    const png = fileEmbed(getBaseFile({'content-type': 'image/png'}))
+    const svg = fileEmbed(getBaseFile({'content-type': 'image/svg+xml'}))
+
+    expect(png.type).toEqual('image')
+    expect(svg.type).toEqual('image')
+  })
+})
+
+describe('mimeClass', () => {
+  it('returns mime_class attribute if present', () => {
+    const mime_class = 'wooper'
+    expect(mimeClass({mime_class})).toEqual(mime_class)
+  })
+
+  it('returns value corresponding to provided `content-type`', () => {
+    expect(mimeClass({'content-type': 'video/mp4'})).toEqual('video')
+    expect(mimeClass({'content-type': 'video/*'})).toEqual('video')
+    expect(mimeClass({'content-type': 'video'})).toEqual('video')
+    expect(mimeClass({'content-type': 'audio/webm'})).toEqual('audio')
+    expect(mimeClass({'content-type': 'audio/*'})).toEqual('audio')
+    expect(mimeClass({'content-type': 'audio'})).toEqual('audio')
+    expect(mimeClass({'content-type': 'image/svg+xml'})).toEqual('image')
+    expect(mimeClass({'content-type': 'image/webp'})).toEqual('image')
+    expect(mimeClass({'content-type': 'application/vnd.ms-powerpoint'})).toEqual('ppt')
+  })
+
+  it('returns value corresponding to provided `type`', () => {
+    expect(mimeClass({type: 'video/mp4'})).toEqual('video')
+    expect(mimeClass({type: 'audio/webm'})).toEqual('audio')
+    expect(mimeClass({type: 'image/svg+xml'})).toEqual('image')
+    expect(mimeClass({type: 'image/webp'})).toEqual('image')
+    expect(mimeClass({type: 'application/vnd.ms-powerpoint'})).toEqual('ppt')
+  })
+})

package/__tests__/module/contentInsertionUtils.test.js

@@ -0,0 +1,52 @@
+/*
+ * Copyright (C) 2018 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import * as contentInsertionUtils from '../../src/rce/contentInsertionUtils'
+
+describe('contentInsertionUtils', () => {
+  describe('cleanUrl', () => {
+    it('doesnt hurt a good url', () => {
+      const url = 'http://www.google.com'
+      const output = contentInsertionUtils.cleanUrl(url)
+      expect(output).toEqual(url)
+    })
+
+    it('turns email addresses into mailto links', () => {
+      const output = contentInsertionUtils.cleanUrl('ethan@instructure.com')
+      expect(output).toEqual('mailto:ethan@instructure.com')
+    })
+
+    it('adding a protocol to unprotocoled addresses', () => {
+      const input = 'www.example.com'
+      const output = contentInsertionUtils.cleanUrl(input)
+      expect(output).toEqual('http://' + input)
+    })
+
+    it('doesnt mailto links with @ in them', () => {
+      const url =
+        'https://www.google.com/maps/place/331+E+Winchester+St,+Murray,+UT+84107/@40.633021,-111.880836,17z/data=!3m1!4b1!4m2!3m1!1s0x875289b8a03ae74d:0x2e83de307059e47d'
+      const output = contentInsertionUtils.cleanUrl(url)
+      expect(output).toEqual(url)
+    })
+
+    it('doesnt blow up with a missing url', () => {
+      const output = contentInsertionUtils.cleanUrl(undefined)
+      expect(output).toBeUndefined()
+    })
+  })
+})

package/__tests__/module/indicatorRegion.test.js

@@ -0,0 +1,75 @@
+/*
+ * Copyright (C) 2018 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import indicatorRegion from '../../src/rce/indicatorRegion'
+
+describe('IndicatorRegion module', () => {
+  let editor, iframe, target, offsetFake
+
+  beforeEach(() => {
+    iframe = {}
+    editor = {
+      getContainer() {
+        return {querySelector: () => iframe}
+      },
+    }
+    offsetFake = jest.fn(() => {
+      return {
+        top: 1,
+        left: 2,
+        width: 3,
+        height: 4,
+      }
+    })
+    target = {
+      getBoundingClientRect() {
+        return {
+          top: 5,
+          left: 6,
+          right: 16,
+          bottom: 25,
+        }
+      },
+    }
+  })
+
+  describe('indicatorRegion', () => {
+    let region
+
+    beforeEach(() => {
+      region = indicatorRegion(editor, target, offsetFake)
+    })
+
+    it('includes the width and height of the target', () => {
+      expect(region.height).toEqual(20)
+      expect(region.width).toEqual(10)
+    })
+
+    it('gets offset of iframe', () => {
+      expect(offsetFake).toHaveBeenCalledWith(iframe)
+    })
+
+    it('includes sum of the left offsets of the target and iframe', () => {
+      expect(region.left).toEqual(8)
+    })
+
+    it('includes sum of the top offsets minus the iframe scroll', () => {
+      expect(region.top).toEqual(6)
+    })
+  })
+})

package/__tests__/module/normalizeLocale.test.js

@@ -0,0 +1,46 @@
+/*
+ * Copyright (C) 2018 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import normalizeLocale from '../../src/rce/normalizeLocale'
+
+describe('normalizeLocale', () => {
+  it("returns 'en' for null/undefined", () => {
+    expect(normalizeLocale(null)).toEqual('en')
+    expect(normalizeLocale(undefined)).toEqual('en')
+  })
+
+  it('maps unknown region locale to the base locale', () => {
+    expect(normalizeLocale('he-IL')).toEqual('he')
+  })
+
+  it('maps known substitutions', () => {
+    expect(normalizeLocale('fa')).toEqual('fa-IR')
+  })
+
+  it('reduces unrecognized custom locales to the base locale', () => {
+    expect(normalizeLocale('en-GB-x-bogus')).toEqual('en-GB')
+  })
+
+  it("recognizes known custom locales and doesn't reduce them", () => {
+    expect(normalizeLocale('en-GB-x-ukhe')).toEqual('en-GB-x-ukhe')
+  })
+
+  it('otherwise just return en', () => {
+    expect(normalizeLocale('some-locale')).toEqual('en')
+  })
+})

package/__tests__/module/normalizeProps.test.js

@@ -0,0 +1,51 @@
+/*
+ * Copyright (C) 2018 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import normalizeProps from '../../src/rce/normalizeProps'
+
+describe('Rce normalizeProps', () => {
+  let props
+  const tinymce = {}
+  let mockEditorOptions
+  beforeEach(() => {
+    mockEditorOptions = jest.fn(() => {
+      return {}
+    })
+    props = {editorOptions: mockEditorOptions}
+  })
+
+  afterEach(() => {
+    jest.resetAllMocks()
+  })
+
+  it('calls editorOptions with provided tinymce', () => {
+    normalizeProps(props, tinymce)
+    expect(mockEditorOptions).toHaveBeenCalled()
+  })
+
+  it('sets tinymce as provided, even over prop', () => {
+    const otherMCE = {}
+    const normalized = normalizeProps({...props, tinymce: otherMCE}, tinymce)
+    expect(normalized.tinymce).toEqual(tinymce)
+  })
+
+  it('retains other props', () => {
+    const normalized = normalizeProps({...props, textareaId: 'textareaId'}, tinymce)
+    expect(normalized.textareaId).toEqual('textareaId')
+  })
+})

package/__tests__/module/sanitizePlugins.test.js

@@ -0,0 +1,48 @@
+/*
+ * Copyright (C) 2018 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import {sanitizePlugins} from '../../src/rce/sanitizePlugins'
+
+describe('sanitizePlugins', () => {
+  it('preserves plugin object structure', () => {
+    const rawOptions = {
+      plugins: ['link', 'table'],
+      toolbar: [
+        'bold,italic,underline,indent,superscript,subscript,bullist,numlist',
+        'table,link,unlink,instructure_image,ltr,rtl',
+      ],
+    }
+    const cleanOptions = sanitizePlugins(rawOptions)
+
+    expect(cleanOptions).toEqual(rawOptions)
+  })
+
+  it('converts string to array removing spaces', () => {
+    const rawOptions = 'bold,italic,underline,indent, superscript, subscript'
+    const cleanOptions = sanitizePlugins(rawOptions)
+
+    expect(cleanOptions).toEqual([
+      'bold',
+      'italic',
+      'underline',
+      'indent',
+      'superscript',
+      'subscript',
+    ])
+  })
+})

package/__tests__/module/wrapInitCb.test.js

@@ -0,0 +1,56 @@
+/*
+ * Copyright (C) 2018 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import wrapInitCb from '../../src/rce/wrapInitCb'
+
+let mirroredAttrs, edOpts, setAttrStub, fakeEditor, elStub, origInitCB
+
+describe('wrapInitCb', () => {
+  beforeAll(() => {
+    mirroredAttrs = {
+      foo: 'bar',
+    }
+    origInitCB = jest.fn()
+    edOpts = {
+      init_instance_callback: origInitCB,
+    }
+    setAttrStub = jest.fn()
+    elStub = {
+      setAttribute: setAttrStub,
+      dataset: {rich_text: false},
+    }
+    fakeEditor = {
+      getElement: () => elStub,
+      addVisual: () => {},
+      on: () => {},
+      contentWindow: {},
+    }
+  })
+
+  it('tries to add attributes to el in cb', () => {
+    const newEdOpts = wrapInitCb(mirroredAttrs, edOpts)
+    newEdOpts.init_instance_callback(fakeEditor)
+    expect(setAttrStub).toHaveBeenCalledWith('foo', 'bar')
+  })
+
+  it('still calls old cb', () => {
+    const newEdOpts = wrapInitCb(mirroredAttrs, edOpts)
+    newEdOpts.init_instance_callback(fakeEditor)
+    expect(origInitCB).toHaveBeenCalledWith(fakeEditor)
+  })
+})