From c327f94f6149d9b20ed45567506e83438bb800c9 Mon Sep 17 00:00:00 2001 From: Mauricio Date: Thu, 20 May 2021 10:28:20 -0400 Subject: [PATCH 01/18] Created components and icons for new dialog (WIP) --- .../common/components/modal/simple-dialog.js | 13 ++ .../custom-width-icon.svg | 27 ++++ .../edit-iframe-modal.js | 128 ++++++++++++++++++ .../edit-iframe-modal.scss | 0 .../obojobo-chunks-iframe/editor-component.js | 37 +++++ .../embeddable-webpage-icon.svg | 31 +++++ .../obojobo-chunks-iframe/max-width-icon.svg | 32 +++++ .../obojobo-chunks-iframe/new-iframe-modal.js | 82 +++++++++++ .../new-iframe-modal.scss | 0 .../obojobo-chunks-iframe/text-width-icon.svg | 32 +++++ .../obojobo-chunks-iframe/video-icon.svg | 13 ++ .../obojobo-chunks-iframe/warning-icon.svg | 14 ++ 12 files changed, 409 insertions(+) create mode 100644 packages/obonode/obojobo-chunks-iframe/custom-width-icon.svg create mode 100644 packages/obonode/obojobo-chunks-iframe/edit-iframe-modal.js create mode 100644 packages/obonode/obojobo-chunks-iframe/edit-iframe-modal.scss create mode 100644 packages/obonode/obojobo-chunks-iframe/embeddable-webpage-icon.svg create mode 100644 packages/obonode/obojobo-chunks-iframe/max-width-icon.svg create mode 100644 packages/obonode/obojobo-chunks-iframe/new-iframe-modal.js create mode 100644 packages/obonode/obojobo-chunks-iframe/new-iframe-modal.scss create mode 100644 packages/obonode/obojobo-chunks-iframe/text-width-icon.svg create mode 100644 packages/obonode/obojobo-chunks-iframe/video-icon.svg create mode 100644 packages/obonode/obojobo-chunks-iframe/warning-icon.svg diff --git a/packages/app/obojobo-document-engine/src/scripts/common/components/modal/simple-dialog.js b/packages/app/obojobo-document-engine/src/scripts/common/components/modal/simple-dialog.js index fa62ed6f35..0e0c375614 100644 --- a/packages/app/obojobo-document-engine/src/scripts/common/components/modal/simple-dialog.js +++ b/packages/app/obojobo-document-engine/src/scripts/common/components/modal/simple-dialog.js @@ -54,6 +54,19 @@ class SimpleDialog extends React.Component { default: true } ] + } else if (this.props.cancelOrCustomYes){ + buttons = [ + { + value: 'Cancel', + altAction: true, + onClick: this.props.onCancel + }, + { + value: this.props.customYes || 'OK', + onClick: this.props.onConfirm, + default: true + } + ] } else { buttons = [ { diff --git a/packages/obonode/obojobo-chunks-iframe/custom-width-icon.svg b/packages/obonode/obojobo-chunks-iframe/custom-width-icon.svg new file mode 100644 index 0000000000..d41282ae9c --- /dev/null +++ b/packages/obonode/obojobo-chunks-iframe/custom-width-icon.svg @@ -0,0 +1,27 @@ + + + + + + + + + + +px + diff --git a/packages/obonode/obojobo-chunks-iframe/edit-iframe-modal.js b/packages/obonode/obojobo-chunks-iframe/edit-iframe-modal.js new file mode 100644 index 0000000000..a0e6f5378d --- /dev/null +++ b/packages/obonode/obojobo-chunks-iframe/edit-iframe-modal.js @@ -0,0 +1,128 @@ +import React from 'react' +import Common from 'Common' + +const { SimpleDialog } = Common.components.modal + +import './edit-iframe-modal.scss' + +class EditIframeModal extends React.Component { + constructor(props) { + super(props) + + this.state = { + autoload: false + } + + this.inputRef = React.createRef(); + + this.onChangeAutoload = this.onChangeAutoload.bind(this); + } + + onChangeAutoload(event) { + const autoload = event.target.value + this.setState({ autoload }); + } + + render() { + console.log(this.props.element.content) + return ( + this.props.onConfirm(this.state)} + onCancel={this.props.onCancel} + focusOnFirstElement={this.focusOnFirstElement} + > +
+ + + +
+
+ +
+ + +
+
+

Options

+
+ +
+ + + +
+ +
+
+ + {this.state.autoload && ( + This option might cause your module to load or run slowly + )} +
+
+ + This will be shown before the IFrame is loaded +
+ + + ) + } +} + +export default EditIframeModal; diff --git a/packages/obonode/obojobo-chunks-iframe/edit-iframe-modal.scss b/packages/obonode/obojobo-chunks-iframe/edit-iframe-modal.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/obonode/obojobo-chunks-iframe/editor-component.js b/packages/obonode/obojobo-chunks-iframe/editor-component.js index b32998f9a3..f9320def3c 100644 --- a/packages/obonode/obojobo-chunks-iframe/editor-component.js +++ b/packages/obonode/obojobo-chunks-iframe/editor-component.js @@ -13,6 +13,8 @@ import { } from 'obojobo-document-engine/src/scripts/oboeditor/util/freeze-unfreeze-editor' import IframeProperties from './iframe-properties-modal' +import NewIframeModal from './new-iframe-modal' +import EditIframeModal from './edit-iframe-modal' import './editor-component.scss' @@ -30,6 +32,7 @@ class IFrame extends React.Component { this.returnFocusOnShiftTab = this.returnFocusOnShiftTab.bind(this) this.returnFocusOnTab = this.returnFocusOnTab.bind(this) this.onCloseIFramePropertiesModal = this.onCloseIFramePropertiesModal.bind(this) + this.changeAdvancedProperties = this.changeAdvancedProperties.bind(this) } focusIframe() { @@ -50,6 +53,7 @@ class IFrame extends React.Component { onConfirm={this.changeProperties} onCancel={this.onCloseIFramePropertiesModal} /> + // ) freezeEditor(this.props.editor) @@ -61,12 +65,45 @@ class IFrame extends React.Component { } changeProperties(content) { + // const path = ReactEditor.findPath(this.props.editor, this.props.element) + // Transforms.setNodes( + // this.props.editor, + // { content: { ...this.props.element.content, ...content } }, + // { at: path } + // ) + // this.onCloseIFramePropertiesModal() + // ------ const path = ReactEditor.findPath(this.props.editor, this.props.element) Transforms.setNodes( this.props.editor, { content: { ...this.props.element.content, ...content } }, { at: path } ) + + // Closes New Iframe modal + this.onCloseIFramePropertiesModal() + + // Opens Edit Iframe modal + ModalUtil.show( + + ) + + freezeEditor(this.props.editor) + } + + changeAdvancedProperties(content) { + const path = ReactEditor.findPath(this.props.editor, this.props.element) + Transforms.setNodes( + this.props.editor, + { content: { ...this.props.element.content, ...content } }, + { at: path } + ) + + // Closes New Iframe modal this.onCloseIFramePropertiesModal() } diff --git a/packages/obonode/obojobo-chunks-iframe/embeddable-webpage-icon.svg b/packages/obonode/obojobo-chunks-iframe/embeddable-webpage-icon.svg new file mode 100644 index 0000000000..022dad585a --- /dev/null +++ b/packages/obonode/obojobo-chunks-iframe/embeddable-webpage-icon.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + diff --git a/packages/obonode/obojobo-chunks-iframe/max-width-icon.svg b/packages/obonode/obojobo-chunks-iframe/max-width-icon.svg new file mode 100644 index 0000000000..47f3e0fd63 --- /dev/null +++ b/packages/obonode/obojobo-chunks-iframe/max-width-icon.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + diff --git a/packages/obonode/obojobo-chunks-iframe/new-iframe-modal.js b/packages/obonode/obojobo-chunks-iframe/new-iframe-modal.js new file mode 100644 index 0000000000..3b1a5aa3c5 --- /dev/null +++ b/packages/obonode/obojobo-chunks-iframe/new-iframe-modal.js @@ -0,0 +1,82 @@ +import React from 'react' +import Common from 'Common' + +const { SimpleDialog } = Common.components.modal + +import './new-iframe-modal.scss' + +class NewIframeModal extends React.Component { + constructor(props) { + super(props) + + this.state = { + src: '', + loadingIframe: false + } + + this.inputRef = React.createRef(); + + this.handleSourceChange = this.handleSourceChange.bind(this) + this.focusOnFirstElement = this.focusOnFirstElement.bind(this) + } + + componentDidMount() { + this.inputRef.current.focus() + this.inputRef.current.select() + } + + focusOnFirstElement() { + this.inputRef.current.focus() + } + + handleSourceChange(event) { + this.setState({ src: event.target.value, loadingIframe: true }); + } + + render() { + const previewContent = +
+ +
+

Does the preview look good?

+ +
+
+ + return ( + this.props.onConfirm(this.state)} + onCancel={this.props.onCancel} + focusOnFirstElement={this.focusOnFirstElement} + > +
+

Paste either an iframe embed code or a URL to embed:

+ +
+
+

Embedded preview:

+ {this.state.src ? ( + previewContent + ) : ( +
+ Paste a link or embed code above to see the preview +
+ )} +
+ + ) + } +} + +export default NewIframeModal diff --git a/packages/obonode/obojobo-chunks-iframe/new-iframe-modal.scss b/packages/obonode/obojobo-chunks-iframe/new-iframe-modal.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/obonode/obojobo-chunks-iframe/text-width-icon.svg b/packages/obonode/obojobo-chunks-iframe/text-width-icon.svg new file mode 100644 index 0000000000..db28e3daad --- /dev/null +++ b/packages/obonode/obojobo-chunks-iframe/text-width-icon.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + diff --git a/packages/obonode/obojobo-chunks-iframe/video-icon.svg b/packages/obonode/obojobo-chunks-iframe/video-icon.svg new file mode 100644 index 0000000000..33dcd06cef --- /dev/null +++ b/packages/obonode/obojobo-chunks-iframe/video-icon.svg @@ -0,0 +1,13 @@ + + + + + + + diff --git a/packages/obonode/obojobo-chunks-iframe/warning-icon.svg b/packages/obonode/obojobo-chunks-iframe/warning-icon.svg new file mode 100644 index 0000000000..a8d6dde5bc --- /dev/null +++ b/packages/obonode/obojobo-chunks-iframe/warning-icon.svg @@ -0,0 +1,14 @@ + + + + + +! + From 18cc8cb93b9d6eb12fc9ebc3392d6fc827138865 Mon Sep 17 00:00:00 2001 From: Mauricio Date: Wed, 26 May 2021 09:28:45 -0400 Subject: [PATCH 02/18] Implemented new iframe logic and overall front-end --- .../src/scripts/common/components/switch.js | 10 +- .../src/scripts/common/components/switch.scss | 12 +- .../src/scss/_includes.scss | 2 + .../edit-iframe-modal.js | 426 ++++++++++++++---- .../edit-iframe-modal.scss | 387 ++++++++++++++++ .../obojobo-chunks-iframe/editor-component.js | 63 +-- .../iframe-content-types.js | 2 + .../obojobo-chunks-iframe/new-iframe-modal.js | 52 ++- .../new-iframe-modal.scss | 75 +++ 9 files changed, 880 insertions(+), 149 deletions(-) create mode 100644 packages/obonode/obojobo-chunks-iframe/iframe-content-types.js diff --git a/packages/app/obojobo-document-engine/src/scripts/common/components/switch.js b/packages/app/obojobo-document-engine/src/scripts/common/components/switch.js index 35a5c4282a..1b1a63f0cf 100644 --- a/packages/app/obojobo-document-engine/src/scripts/common/components/switch.js +++ b/packages/app/obojobo-document-engine/src/scripts/common/components/switch.js @@ -4,7 +4,13 @@ import './switch.scss' /* istanbul ignore next */ const noOp = () => {} -const SwitchCore = ({ checked = false, onChange = noOp, title, forwardedRef }) => ( +const SwitchCore = ({ + checked = false, + onChange = noOp, + title, + description, + forwardedRef +}) => (
{title ? {title} : null}
"`; + +exports[`NewIFrameModal NewIFrameModal component correctly detects content type 1`] = ` +
+
+
+ +
+

+ New Embedded IFrame +

+
+
+
+

+ Paste either an iframe embed code or a URL to embed: +

+ or \\"https://example.com\\"" + type="text" + value="

Does the preview look good?

- + {this.state.openPreviewNotWorkingSection ? ( +
+ + If the preview above is not what you expected, keep in mind that some pages + inside your IFrame may restrict their content, thus not allowing them to be shown + within Obojobo. Also, if you are trying to embed media instead of an IFrame, make + sure to paste your IFrame's embed code (starting with <iframe...) and not only the regular URL. + +
+ ) : ( + + )}
diff --git a/packages/obonode/obojobo-chunks-iframe/new-iframe-modal.scss b/packages/obonode/obojobo-chunks-iframe/new-iframe-modal.scss index 05b8fcf527..ac1720683b 100644 --- a/packages/obonode/obojobo-chunks-iframe/new-iframe-modal.scss +++ b/packages/obonode/obojobo-chunks-iframe/new-iframe-modal.scss @@ -69,6 +69,11 @@ transition: 0.3s; } } + + .preview-not-working { + font-size: 0.8em; + text-align: left; + } } } } diff --git a/packages/obonode/obojobo-chunks-iframe/new-iframe-modal.test.js b/packages/obonode/obojobo-chunks-iframe/new-iframe-modal.test.js new file mode 100644 index 0000000000..ab9bec5df3 --- /dev/null +++ b/packages/obonode/obojobo-chunks-iframe/new-iframe-modal.test.js @@ -0,0 +1,136 @@ +import React from 'react' +import { mount } from 'enzyme' +import TestRenderer from 'react-test-renderer' +import NewIFrameModal from './new-iframe-modal' +// import IFrameSizingTypes from './iframe-sizing-types' +import IFrameContentTypes from './iframe-content-types' + +const testRendererOptions = { + createNodeMock: element => { + if (element.type === 'input') { + return { + focus: () => {}, + select: () => {} + } + } + } +} + +describe('NewIFrameModal', () => { + beforeEach(() => { + jest.clearAllMocks() + }) + + test('NewIFrameModal component mounts as expected', () => { + const component = mount( + + ) + const tree = component.html() + expect(tree).toMatchSnapshot() + }) + + test('NewIFrameModal component calls onConfirm from props', () => { + const onConfirm = jest.fn() + + const component = mount( + + ) + + component + .find('button') + .at(1) + .simulate('click') + + expect(onConfirm).toHaveBeenCalled() + }) + + test('NewIFrameModal component focuses on first element', () => { + const component = mount( + + ) + + component.instance().focusOnFirstElement() + + expect(component.html()).toMatchSnapshot() + }) + + test('NewIFrameModal component changes src', () => { + const component = mount( + + ) + + component + .find('input') + .at(0) + .simulate('change', { target: { value: 'changed' } }) + + expect(component.html()).toMatchSnapshot() + }) + + test('NewIFrameModal component correctly detects content type', () => { + const component = TestRenderer.create( + , + testRendererOptions + ) + const startState = component.toJSON() + const input = component.root.findAllByType('input')[1] + + // Changing the src input to trigger a content type detection (Detection: Media) + input.props.onChange({ target: { value: " + const previewContent = ( +
+

Does the preview look good?

{this.state.openPreviewNotWorkingSection ? ( -
+
- If the preview above is not what you expected, keep in mind that some pages - inside your IFrame may restrict their content, thus not allowing them to be shown - within Obojobo. Also, if you are trying to embed media instead of an IFrame, make - sure to paste your IFrame's embed code (starting with <iframe...) and not only the regular URL. + If the preview above is not what you expected, keep in mind that some pages inside + your IFrame may restrict their content, thus not allowing them to be shown within + Obojobo. Also, if you are trying to embed media instead of an IFrame, make sure to + paste your IFrame's embed code (starting with <iframe...) and not only the + regular URL.
) : ( - )}
+ ) return ( -
+

Paste either an iframe embed code or a URL to embed:

-
+

Embedded preview:

{this.state.src ? ( previewContent ) : ( -
+
Paste a link or embed code above to see the preview
)} diff --git a/packages/obonode/obojobo-chunks-iframe/new-iframe-modal.scss b/packages/obonode/obojobo-chunks-iframe/new-iframe-modal.scss index ac1720683b..5bb9ae0e06 100644 --- a/packages/obonode/obojobo-chunks-iframe/new-iframe-modal.scss +++ b/packages/obonode/obojobo-chunks-iframe/new-iframe-modal.scss @@ -14,7 +14,7 @@ font-size: 0.8em; border-radius: 0.4em; display: block; - border: 1px solid $color-neutral-text; + border: 0.1em solid $color-neutral-text; box-sizing: border-box; &:focus { From c74ba4a08ba117057eddf568c263d90cfc11b59c Mon Sep 17 00:00:00 2001 From: Mauricio Date: Mon, 7 Jun 2021 11:14:54 -0400 Subject: [PATCH 07/18] Added extra dialog and switch unit tests --- .../__snapshots__/simple-dialog.test.js.snap | 76 +++++++++++++++++++ .../components/modal/simple-dialog.test.js | 11 +++ .../common/components/switch.test.js | 9 +++ 3 files changed, 96 insertions(+) diff --git a/packages/app/obojobo-document-engine/__tests__/common/components/modal/__snapshots__/simple-dialog.test.js.snap b/packages/app/obojobo-document-engine/__tests__/common/components/modal/__snapshots__/simple-dialog.test.js.snap index 22a69c6058..fae91cdb11 100644 --- a/packages/app/obojobo-document-engine/__tests__/common/components/modal/__snapshots__/simple-dialog.test.js.snap +++ b/packages/app/obojobo-document-engine/__tests__/common/components/modal/__snapshots__/simple-dialog.test.js.snap @@ -76,6 +76,82 @@ exports[`SimpleDialog SimpleDialog cancelOk 1`] = `
`; +exports[`SimpleDialog SimpleDialog cancelOrCustomYes 1`] = ` +
+
+
+ +
+
+ Content +
+
+
+ +
+
+ +
+
+
+ +
+
+
+`; + exports[`SimpleDialog SimpleDialog no type 1`] = `
{ expect(tree).toMatchSnapshot() }) + test('SimpleDialog cancelOrCustomYes', () => { + const component = renderer.create( + + Content + + ) + const tree = component.toJSON() + + expect(tree).toMatchSnapshot() + }) + test('SimpleDialog no type', () => { const component = renderer.create( diff --git a/packages/app/obojobo-document-engine/__tests__/common/components/switch.test.js b/packages/app/obojobo-document-engine/__tests__/common/components/switch.test.js index e2826decae..e6de96dbf3 100644 --- a/packages/app/obojobo-document-engine/__tests__/common/components/switch.test.js +++ b/packages/app/obojobo-document-engine/__tests__/common/components/switch.test.js @@ -25,6 +25,15 @@ describe('Switch', () => { expect(checkbox.children).toEqual(['mocktitle']) }) + test('Switch renders correctly with a description', () => { + const testRenderer = TestRenderer.create( + + ) + const testInstance = testRenderer.root + const small = testInstance.findByType('small') + expect(small.children).toEqual(['mockDescription']) + }) + test('Switch renders when unchecked', () => { const testRenderer = TestRenderer.create() const testInstance = testRenderer.root From edfda3af7436f699dcd652f4c63528f27fcc5533 Mon Sep 17 00:00:00 2001 From: Mauricio Date: Tue, 8 Jun 2021 09:54:48 -0400 Subject: [PATCH 08/18] Added code and tests to extract src from iframe tags --- .../new-iframe-modal.test.js.snap | 124 +++++++++++++++++- .../obojobo-chunks-iframe/editor-component.js | 1 + .../editor-component.test.js | 5 +- .../obojobo-chunks-iframe/new-iframe-modal.js | 15 ++- .../new-iframe-modal.test.js | 16 ++- 5 files changed, 151 insertions(+), 10 deletions(-) diff --git a/packages/obonode/obojobo-chunks-iframe/__snapshots__/new-iframe-modal.test.js.snap b/packages/obonode/obojobo-chunks-iframe/__snapshots__/new-iframe-modal.test.js.snap index c00bcbb3f4..373c1a99e6 100644 --- a/packages/obonode/obojobo-chunks-iframe/__snapshots__/new-iframe-modal.test.js.snap +++ b/packages/obonode/obojobo-chunks-iframe/__snapshots__/new-iframe-modal.test.js.snap @@ -1,6 +1,128 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`NewIFrameModal NewIFrameModal component changes src 1`] = `"

New Embedded IFrame

Paste either an iframe embed code or a URL to embed:

or "https://example.com"\\" value=\\"\\">

Embedded preview:

Paste a link or embed code above to see the preview
"`; +exports[`NewIFrameModal NewIFrameModal component changes src 1`] = ` +
+
+
+ +
+

+ New Embedded IFrame +

+
+
+
+

+ Paste either an iframe embed code or a URL to embed: +

+ or \\"https://example.com\\"" + type="text" + value="https://" + /> +
+
+

+ Embedded preview: +

+
+ -
+

Does the preview look good?

{this.state.openPreviewNotWorkingSection ? (
- - If the preview above is not what you expected, keep in mind that some pages inside - your IFrame may restrict their content, thus not allowing them to be shown within - Obojobo. Also, if you are trying to embed media instead of an IFrame, make sure to - paste your IFrame's embed code (starting with <iframe...) and not only the - regular URL. - + If the preview above is not what you expected, keep in mind that some pages inside + your IFrame may restrict their content, thus not allowing them to be shown within + Obojobo. Also, if you are trying to embed media instead of an IFrame, make sure to + paste your IFrame's embed code (starting with <iframe...) and not only the + regular URL.
) : ( )} -
+
) @@ -124,11 +129,15 @@ class NewIframeModal extends React.Component {

Embedded preview:

- {this.state.src ? ( + {this.state.src && this.state.iframeLoaded ? ( previewContent ) : (
- Paste a link or embed code above to see the preview + {this.state.iframeLoaded || this.state.src === '' ? ( + Paste a link or embed code above to see the preview + ) : ( + Make sure you are using a valid URL or an IFrame embed code + )}
)}
diff --git a/packages/obonode/obojobo-chunks-iframe/new-iframe-modal.scss b/packages/obonode/obojobo-chunks-iframe/new-iframe-modal.scss index 5bb9ae0e06..e9ee863483 100644 --- a/packages/obonode/obojobo-chunks-iframe/new-iframe-modal.scss +++ b/packages/obonode/obojobo-chunks-iframe/new-iframe-modal.scss @@ -5,16 +5,17 @@ header { p { + // @HACK: Enforce pixel perfect children. + // Used to make the "Click to load this content" element non-blurry in CHROME + transform-style: preserve-3d; font-size: 0.9em; } input { + @include text-input(); + width: 100%; - padding: 0.9em; - font-size: 0.8em; - border-radius: 0.4em; - display: block; - border: 0.1em solid $color-neutral-text; + padding: 0.6em; box-sizing: border-box; &:focus { @@ -25,6 +26,9 @@ .preview { p { + // @HACK: Enforce pixel perfect children. + // Used to make the "Click to load this content" element non-blurry in CHROME + transform-style: preserve-3d; font-size: 0.9em; } @@ -39,21 +43,34 @@ color: $color-neutral-text; font-size: 0.8em; font-weight: lighter; + + span { + width: 80%; + display: block; + margin: 0 auto; + } } .preview-with-iframe { iframe { + box-sizing: border-box; width: 100%; height: 12em; border: none; + border: 0.1em solid $color-shadow; + border-radius: 0.4em; } - div { - margin: 2em 0; + section { + // @HACK: Enforce pixel perfect children. + // Used to make the "Click to load this content" element non-blurry in CHROME + transform-style: preserve-3d; + width: 100%; + max-width: 23em; p { font-weight: bold; - margin-bottom: 0.1em; + margin: 2em 0 0.1em 0; } button { @@ -62,6 +79,7 @@ text-decoration: underline; background: transparent; transition: 0.3s; + font-family: $font-default; &:hover { cursor: pointer; @@ -71,8 +89,13 @@ } .preview-not-working { + // @HACK: Enforce pixel perfect children. + // Used to make the "Click to load this content" element non-blurry in CHROME + transform-style: preserve-3d; + margin-top: 1.9em; font-size: 0.8em; text-align: left; + text-align: justify; } } } diff --git a/packages/obonode/obojobo-chunks-iframe/text-width-icon.svg b/packages/obonode/obojobo-chunks-iframe/text-width-icon.svg index db28e3daad..807b8b6604 100644 --- a/packages/obonode/obojobo-chunks-iframe/text-width-icon.svg +++ b/packages/obonode/obojobo-chunks-iframe/text-width-icon.svg @@ -15,18 +15,18 @@ c-2.1,2-2.3,5.3-0.3,7.4l43.4,47.5C591.2,369,594.5,369.1,596.7,367.1z"/> - - - - - - - + + + + + + + diff --git a/packages/obonode/obojobo-chunks-iframe/warning-icon.svg b/packages/obonode/obojobo-chunks-iframe/warning-icon.svg index a8d6dde5bc..5e89f55c95 100644 --- a/packages/obonode/obojobo-chunks-iframe/warning-icon.svg +++ b/packages/obonode/obojobo-chunks-iframe/warning-icon.svg @@ -3,12 +3,45 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -! diff --git a/yarn.lock b/yarn.lock index f5b9b1ba43..4fa6d8bd51 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14282,6 +14282,11 @@ url@^0.11.0: punycode "1.3.2" querystring "0.2.0" +use-debounce@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-7.0.0.tgz#00a67d23d4fe09905e11145a99278da06c01c880" + integrity sha512-4fvxEEs7ztdNMh+c497HAgysdq2+Ascem6EaDANGlCIap1JzqfL03Xw8xkYc2lShfXm4uO6PA6V5zcXN7gJdFA== + use@^3.1.0: version "3.1.1" resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f" From afd6db31148b1246b44713c397b79b669c667ee4 Mon Sep 17 00:00:00 2001 From: Mauricio Date: Fri, 2 Jul 2021 10:00:25 -0400 Subject: [PATCH 12/18] Added debounce and more tests --- .../edit-iframe-modal.test.js.snap | 60 ----- .../new-iframe-modal.test.js.snap | 150 +++++++++++-- .../edit-iframe-modal.js | 54 +---- .../obojobo-chunks-iframe/editor-component.js | 7 +- .../obojobo-chunks-iframe/new-iframe-modal.js | 211 +++++++++--------- .../new-iframe-modal.test.js | 65 ++++-- 6 files changed, 288 insertions(+), 259 deletions(-) diff --git a/packages/obonode/obojobo-chunks-iframe/__snapshots__/edit-iframe-modal.test.js.snap b/packages/obonode/obojobo-chunks-iframe/__snapshots__/edit-iframe-modal.test.js.snap index ded5a2c221..f5beffbd9a 100644 --- a/packages/obonode/obojobo-chunks-iframe/__snapshots__/edit-iframe-modal.test.js.snap +++ b/packages/obonode/obojobo-chunks-iframe/__snapshots__/edit-iframe-modal.test.js.snap @@ -81,8 +81,6 @@ exports[`EditIframeModal EditIFrameModal component changes New Window 1`] = ` >
"`; +exports[`NewIFrameModal NewIFrameModal component opens section explaining why the iframe preview is not working 1`] = ` +
+
+
+ +
+

+ New Embedded IFrame +

+
+
+
+

+ Paste either an iframe embed code or a URL to embed: +

+ or \\"https://example.com\\"" + type="text" + value="https://mock.com" + /> +
+
+

+ Embedded preview: +

+
+