diff --git a/packages/app/obojobo-document-engine/__tests__/common/components/__snapshots__/switch.test.js.snap b/packages/app/obojobo-document-engine/__tests__/common/components/__snapshots__/switch.test.js.snap
index b459636c4c..7fb83214d7 100644
--- a/packages/app/obojobo-document-engine/__tests__/common/components/__snapshots__/switch.test.js.snap
+++ b/packages/app/obojobo-document-engine/__tests__/common/components/__snapshots__/switch.test.js.snap
@@ -4,11 +4,17 @@ exports[`Switch Switch renders correctly with all options set 1`] = `
 <div
   className="obojobo-draft--components--switch"
 >
-  <span
-    contentEditable={false}
+  <div
+    className="text-content"
   >
-    mocktitle
-  </span>
+    <span
+      contentEditable={false}
+    >
+      mocktitle
+    </span>
+    <br />
+    <small />
+  </div>
   <label
     className="switch"
   >
@@ -29,6 +35,12 @@ exports[`Switch Switch renders correctly with no options set 1`] = `
 <div
   className="obojobo-draft--components--switch"
 >
+  <div
+    className="text-content"
+  >
+    <br />
+    <small />
+  </div>
   <label
     className="switch"
   >
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 4154b53a0d..33ca0ef6ff 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
@@ -78,6 +78,84 @@ exports[`SimpleDialog SimpleDialog cancelOk 1`] = `
 </div>
 `;
 
+exports[`SimpleDialog SimpleDialog cancelOrCustomYes 1`] = `
+<div
+  className="obojobo-draft--components--modal--simple-dialog"
+>
+  <div
+    className="obojobo-draft--components--modal--dialog "
+    style={null}
+  >
+    <div
+      aria-atomic="true"
+      aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
+      className="obojobo-draft--components--modal--modal"
+      role="dialog"
+      tabIndex="-1"
+    >
+      <input
+        aria-label="Start of dialog"
+        className="first-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+      <div
+        className="content"
+        id="obojobo-draft--components--modal--modal--content"
+      >
+        <div
+          className="dialog-content"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          Content
+        </div>
+        <div
+          className="controls"
+        >
+          <div
+            className="obojobo-draft--components--button alt-action is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[MockFunction]}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
+          <div
+            className="obojobo-draft--components--button is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[MockFunction]}
+              type="button"
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+      <input
+        aria-label="End of dialog"
+        className="last-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`SimpleDialog SimpleDialog no type 1`] = `
 <div
   className="obojobo-draft--components--modal--simple-dialog"
diff --git a/packages/app/obojobo-document-engine/__tests__/common/components/modal/simple-dialog.test.js b/packages/app/obojobo-document-engine/__tests__/common/components/modal/simple-dialog.test.js
index 6a024f50a9..e72bec7913 100644
--- a/packages/app/obojobo-document-engine/__tests__/common/components/modal/simple-dialog.test.js
+++ b/packages/app/obojobo-document-engine/__tests__/common/components/modal/simple-dialog.test.js
@@ -52,6 +52,17 @@ describe('SimpleDialog', () => {
 		expect(tree).toMatchSnapshot()
 	})
 
+	test('SimpleDialog cancelOrCustomYes', () => {
+		const component = renderer.create(
+			<SimpleDialog cancelOrCustomYes onCancel={jest.fn()} onConfirm={jest.fn()}>
+				Content
+			</SimpleDialog>
+		)
+		const tree = component.toJSON()
+
+		expect(tree).toMatchSnapshot()
+	})
+
 	test('SimpleDialog no type', () => {
 		const component = renderer.create(
 			<SimpleDialog onCancel={jest.fn()} onConfirm={jest.fn()}>
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(
+			<Switch title="mocktitle" description="mockDescription" />
+		)
+		const testInstance = testRenderer.root
+		const small = testInstance.findByType('small')
+		expect(small.children).toEqual(['mockDescription'])
+	})
+
 	test('Switch renders when unchecked', () => {
 		const testRenderer = TestRenderer.create(<Switch checked={false} />)
 		const testInstance = testRenderer.root
diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/navigation/__snapshots__/more-info-box.test.js.snap b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/navigation/__snapshots__/more-info-box.test.js.snap
index 34703ed1b8..6224c68c3f 100644
--- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/navigation/__snapshots__/more-info-box.test.js.snap
+++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/navigation/__snapshots__/more-info-box.test.js.snap
@@ -2,15 +2,15 @@
 
 exports[`MoreInfoBox More Info Box changes to open 1`] = `"<div class=\\"visual-editor--more-info \\"><button class=\\"more-info-button is-open\\" tabindex=\\"0\\" aria-label=\\"Toggle More Info Box\\"><svg viewBox=\\"0 0 214 214\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"#000\\" fill=\\"none\\"><circle cy=\\"107\\" cx=\\"107\\" r=\\"100\\" stroke-width=\\"14\\"></circle><circle cy=\\"107\\" cx=\\"57\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"107\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"157\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle></svg></button><div class=\\"more-info-box\\"><div class=\\"container\\"><div class=\\"obojobo-draft--components--modal--tab-trap\\"><input class=\\"first-tab\\" type=\\"text\\"><div class=\\"properties\\"><div></div><div><div class=\\"properties--row\\"><label for=\\"oboeditor--components--more-info-box--id-input\\">Id</label><input readonly=\\"\\" type=\\"text\\" id=\\"oboeditor--components--more-info-box--id-input\\" class=\\"id-input\\" value=\\"mock-id\\"><div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Copy Id</button></div><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div></div></div><div><span class=\\"objectives\\">Objectives:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center objective-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div><div><span class=\\"triggers\\">Triggers:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center trigger-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div></div><div class=\\"box-controls\\"><div class=\\"obojobo-draft--components--button is-not-dangerous align-center cancel-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Done</button></div></div><input class=\\"last-tab\\" type=\\"text\\"></div></div></div></div>"`;
 
-exports[`MoreInfoBox More Info Box edits values 1`] = `"<div class=\\"visual-editor--more-info \\"><button class=\\"more-info-button is-open\\" tabindex=\\"0\\" aria-label=\\"Toggle More Info Box\\"><svg viewBox=\\"0 0 214 214\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"#000\\" fill=\\"none\\"><circle cy=\\"107\\" cx=\\"107\\" r=\\"100\\" stroke-width=\\"14\\"></circle><circle cy=\\"107\\" cx=\\"57\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"107\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"157\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle></svg></button><div class=\\"more-info-box\\"><div class=\\"container\\"><div class=\\"obojobo-draft--components--modal--tab-trap\\"><input class=\\"first-tab\\" type=\\"text\\"><div class=\\"properties\\"><div></div><div><div class=\\"properties--row\\"><label for=\\"oboeditor--components--more-info-box--id-input\\">Id</label><input readonly=\\"\\" type=\\"text\\" id=\\"oboeditor--components--more-info-box--id-input\\" class=\\"id-input\\" value=\\"new-mock-id\\"><div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Copy Id</button></div><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div></div><div class=\\"properties--row\\"><label for=\\"Mock Input\\">Mock Input</label><input id=\\"Mock Input\\" type=\\"text\\" placeholder=\\"\\" maxlength=\\"300\\" value=\\"mockInputValue1\\"></div><div class=\\"properties--row\\"><label for=\\"Mock Select\\">Mock Select</label><select id=\\"Mock Select\\" class=\\"select-item\\"><option value=\\"mockSelectValue1\\">Value One</option><option value=\\"mockSelectValue2\\">Value Two</option></select></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Mock Toggle</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Mock Abstract Toggle</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><span class=\\"objectives\\">Objectives:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center objective-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div><div><span class=\\"triggers\\">Triggers:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center trigger-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div><div class=\\"button-bar\\"><div class=\\"obojobo-draft--components--button alt-action is-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Delete</button></div><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Duplicate</button></div></div></div><div class=\\"box-controls\\"><div class=\\"obojobo-draft--components--button is-not-dangerous align-center cancel-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Done</button></div></div><input class=\\"last-tab\\" type=\\"text\\"></div></div></div></div>"`;
+exports[`MoreInfoBox More Info Box edits values 1`] = `"<div class=\\"visual-editor--more-info \\"><button class=\\"more-info-button is-open\\" tabindex=\\"0\\" aria-label=\\"Toggle More Info Box\\"><svg viewBox=\\"0 0 214 214\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"#000\\" fill=\\"none\\"><circle cy=\\"107\\" cx=\\"107\\" r=\\"100\\" stroke-width=\\"14\\"></circle><circle cy=\\"107\\" cx=\\"57\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"107\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"157\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle></svg></button><div class=\\"more-info-box\\"><div class=\\"container\\"><div class=\\"obojobo-draft--components--modal--tab-trap\\"><input class=\\"first-tab\\" type=\\"text\\"><div class=\\"properties\\"><div></div><div><div class=\\"properties--row\\"><label for=\\"oboeditor--components--more-info-box--id-input\\">Id</label><input readonly=\\"\\" type=\\"text\\" id=\\"oboeditor--components--more-info-box--id-input\\" class=\\"id-input\\" value=\\"new-mock-id\\"><div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Copy Id</button></div><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div></div><div class=\\"properties--row\\"><label for=\\"Mock Input\\">Mock Input</label><input id=\\"Mock Input\\" type=\\"text\\" placeholder=\\"\\" maxlength=\\"300\\" value=\\"mockInputValue1\\"></div><div class=\\"properties--row\\"><label for=\\"Mock Select\\">Mock Select</label><select id=\\"Mock Select\\" class=\\"select-item\\"><option value=\\"mockSelectValue1\\">Value One</option><option value=\\"mockSelectValue2\\">Value Two</option></select></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Mock Toggle</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Mock Abstract Toggle</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><span class=\\"objectives\\">Objectives:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center objective-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div><div><span class=\\"triggers\\">Triggers:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center trigger-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div><div class=\\"button-bar\\"><div class=\\"obojobo-draft--components--button alt-action is-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Delete</button></div><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Duplicate</button></div></div></div><div class=\\"box-controls\\"><div class=\\"obojobo-draft--components--button is-not-dangerous align-center cancel-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Done</button></div></div><input class=\\"last-tab\\" type=\\"text\\"></div></div></div></div>"`;
 
-exports[`MoreInfoBox More Info Box edits values 2`] = `"<div class=\\"visual-editor--more-info \\"><button class=\\"more-info-button is-open\\" tabindex=\\"0\\" aria-label=\\"Toggle More Info Box\\"><svg viewBox=\\"0 0 214 214\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"#000\\" fill=\\"none\\"><circle cy=\\"107\\" cx=\\"107\\" r=\\"100\\" stroke-width=\\"14\\"></circle><circle cy=\\"107\\" cx=\\"57\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"107\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"157\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle></svg></button><div class=\\"more-info-box\\"><div class=\\"container\\"><div class=\\"obojobo-draft--components--modal--tab-trap\\"><input class=\\"first-tab\\" type=\\"text\\"><div class=\\"properties\\"><div></div><div><div class=\\"properties--row\\"><label for=\\"oboeditor--components--more-info-box--id-input\\">Id</label><input readonly=\\"\\" type=\\"text\\" id=\\"oboeditor--components--more-info-box--id-input\\" class=\\"id-input\\" value=\\"new-mock-id\\"><div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Copy Id</button></div><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div></div><div class=\\"properties--row\\"><label for=\\"Mock Input\\">Mock Input</label><input id=\\"Mock Input\\" type=\\"text\\" placeholder=\\"\\" maxlength=\\"300\\" value=\\"changed value\\"></div><div class=\\"properties--row\\"><label for=\\"Mock Select\\">Mock Select</label><select id=\\"Mock Select\\" class=\\"select-item\\"><option value=\\"mockSelectValue1\\">Value One</option><option value=\\"mockSelectValue2\\">Value Two</option></select></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Mock Toggle</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Mock Abstract Toggle</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><span class=\\"objectives\\">Objectives:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center objective-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div><div><span class=\\"triggers\\">Triggers:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center trigger-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div><div class=\\"button-bar\\"><div class=\\"obojobo-draft--components--button alt-action is-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Delete</button></div><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Duplicate</button></div></div></div><div class=\\"box-controls\\"><div class=\\"obojobo-draft--components--button is-not-dangerous align-center cancel-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Done</button></div></div><input class=\\"last-tab\\" type=\\"text\\"></div></div></div></div>"`;
+exports[`MoreInfoBox More Info Box edits values 2`] = `"<div class=\\"visual-editor--more-info \\"><button class=\\"more-info-button is-open\\" tabindex=\\"0\\" aria-label=\\"Toggle More Info Box\\"><svg viewBox=\\"0 0 214 214\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"#000\\" fill=\\"none\\"><circle cy=\\"107\\" cx=\\"107\\" r=\\"100\\" stroke-width=\\"14\\"></circle><circle cy=\\"107\\" cx=\\"57\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"107\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"157\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle></svg></button><div class=\\"more-info-box\\"><div class=\\"container\\"><div class=\\"obojobo-draft--components--modal--tab-trap\\"><input class=\\"first-tab\\" type=\\"text\\"><div class=\\"properties\\"><div></div><div><div class=\\"properties--row\\"><label for=\\"oboeditor--components--more-info-box--id-input\\">Id</label><input readonly=\\"\\" type=\\"text\\" id=\\"oboeditor--components--more-info-box--id-input\\" class=\\"id-input\\" value=\\"new-mock-id\\"><div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Copy Id</button></div><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div></div><div class=\\"properties--row\\"><label for=\\"Mock Input\\">Mock Input</label><input id=\\"Mock Input\\" type=\\"text\\" placeholder=\\"\\" maxlength=\\"300\\" value=\\"changed value\\"></div><div class=\\"properties--row\\"><label for=\\"Mock Select\\">Mock Select</label><select id=\\"Mock Select\\" class=\\"select-item\\"><option value=\\"mockSelectValue1\\">Value One</option><option value=\\"mockSelectValue2\\">Value Two</option></select></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Mock Toggle</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Mock Abstract Toggle</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><span class=\\"objectives\\">Objectives:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center objective-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div><div><span class=\\"triggers\\">Triggers:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center trigger-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div><div class=\\"button-bar\\"><div class=\\"obojobo-draft--components--button alt-action is-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Delete</button></div><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Duplicate</button></div></div></div><div class=\\"box-controls\\"><div class=\\"obojobo-draft--components--button is-not-dangerous align-center cancel-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Done</button></div></div><input class=\\"last-tab\\" type=\\"text\\"></div></div></div></div>"`;
 
-exports[`MoreInfoBox More Info Box edits values 3`] = `"<div class=\\"visual-editor--more-info \\"><button class=\\"more-info-button is-open\\" tabindex=\\"0\\" aria-label=\\"Toggle More Info Box\\"><svg viewBox=\\"0 0 214 214\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"#000\\" fill=\\"none\\"><circle cy=\\"107\\" cx=\\"107\\" r=\\"100\\" stroke-width=\\"14\\"></circle><circle cy=\\"107\\" cx=\\"57\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"107\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"157\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle></svg></button><div class=\\"more-info-box\\"><div class=\\"container\\"><div class=\\"obojobo-draft--components--modal--tab-trap\\"><input class=\\"first-tab\\" type=\\"text\\"><div class=\\"properties\\"><div></div><div><div class=\\"properties--row\\"><label for=\\"oboeditor--components--more-info-box--id-input\\">Id</label><input readonly=\\"\\" type=\\"text\\" id=\\"oboeditor--components--more-info-box--id-input\\" class=\\"id-input\\" value=\\"new-mock-id\\"><div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Copy Id</button></div><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div></div><div class=\\"properties--row\\"><label for=\\"Mock Input\\">Mock Input</label><input id=\\"Mock Input\\" type=\\"text\\" placeholder=\\"\\" maxlength=\\"300\\" value=\\"changed value\\"></div><div class=\\"properties--row\\"><label for=\\"Mock Select\\">Mock Select</label><select id=\\"Mock Select\\" class=\\"select-item\\"><option value=\\"mockSelectValue1\\">Value One</option><option value=\\"mockSelectValue2\\">Value Two</option></select></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Mock Toggle</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Mock Abstract Toggle</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><span class=\\"objectives\\">Objectives:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center objective-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div><div><span class=\\"triggers\\">Triggers:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center trigger-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div><div class=\\"button-bar\\"><div class=\\"obojobo-draft--components--button alt-action is-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Delete</button></div><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Duplicate</button></div></div></div><div class=\\"box-controls\\"><div class=\\"obojobo-draft--components--button is-not-dangerous align-center cancel-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Done</button></div></div><input class=\\"last-tab\\" type=\\"text\\"></div></div></div></div>"`;
+exports[`MoreInfoBox More Info Box edits values 3`] = `"<div class=\\"visual-editor--more-info \\"><button class=\\"more-info-button is-open\\" tabindex=\\"0\\" aria-label=\\"Toggle More Info Box\\"><svg viewBox=\\"0 0 214 214\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"#000\\" fill=\\"none\\"><circle cy=\\"107\\" cx=\\"107\\" r=\\"100\\" stroke-width=\\"14\\"></circle><circle cy=\\"107\\" cx=\\"57\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"107\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"157\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle></svg></button><div class=\\"more-info-box\\"><div class=\\"container\\"><div class=\\"obojobo-draft--components--modal--tab-trap\\"><input class=\\"first-tab\\" type=\\"text\\"><div class=\\"properties\\"><div></div><div><div class=\\"properties--row\\"><label for=\\"oboeditor--components--more-info-box--id-input\\">Id</label><input readonly=\\"\\" type=\\"text\\" id=\\"oboeditor--components--more-info-box--id-input\\" class=\\"id-input\\" value=\\"new-mock-id\\"><div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Copy Id</button></div><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div></div><div class=\\"properties--row\\"><label for=\\"Mock Input\\">Mock Input</label><input id=\\"Mock Input\\" type=\\"text\\" placeholder=\\"\\" maxlength=\\"300\\" value=\\"changed value\\"></div><div class=\\"properties--row\\"><label for=\\"Mock Select\\">Mock Select</label><select id=\\"Mock Select\\" class=\\"select-item\\"><option value=\\"mockSelectValue1\\">Value One</option><option value=\\"mockSelectValue2\\">Value Two</option></select></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Mock Toggle</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Mock Abstract Toggle</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><span class=\\"objectives\\">Objectives:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center objective-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div><div><span class=\\"triggers\\">Triggers:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center trigger-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div><div class=\\"button-bar\\"><div class=\\"obojobo-draft--components--button alt-action is-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Delete</button></div><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Duplicate</button></div></div></div><div class=\\"box-controls\\"><div class=\\"obojobo-draft--components--button is-not-dangerous align-center cancel-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Done</button></div></div><input class=\\"last-tab\\" type=\\"text\\"></div></div></div></div>"`;
 
-exports[`MoreInfoBox More Info Box edits values 4`] = `"<div class=\\"visual-editor--more-info \\"><button class=\\"more-info-button is-open\\" tabindex=\\"0\\" aria-label=\\"Toggle More Info Box\\"><svg viewBox=\\"0 0 214 214\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"#000\\" fill=\\"none\\"><circle cy=\\"107\\" cx=\\"107\\" r=\\"100\\" stroke-width=\\"14\\"></circle><circle cy=\\"107\\" cx=\\"57\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"107\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"157\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle></svg></button><div class=\\"more-info-box\\"><div class=\\"container\\"><div class=\\"obojobo-draft--components--modal--tab-trap\\"><input class=\\"first-tab\\" type=\\"text\\"><div class=\\"properties\\"><div></div><div><div class=\\"properties--row\\"><label for=\\"oboeditor--components--more-info-box--id-input\\">Id</label><input readonly=\\"\\" type=\\"text\\" id=\\"oboeditor--components--more-info-box--id-input\\" class=\\"id-input\\" value=\\"new-mock-id\\"><div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Copy Id</button></div><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div></div><div class=\\"properties--row\\"><label for=\\"Mock Input\\">Mock Input</label><input id=\\"Mock Input\\" type=\\"text\\" placeholder=\\"\\" maxlength=\\"300\\" value=\\"changed value\\"></div><div class=\\"properties--row\\"><label for=\\"Mock Select\\">Mock Select</label><select id=\\"Mock Select\\" class=\\"select-item\\"><option value=\\"mockSelectValue1\\">Value One</option><option value=\\"mockSelectValue2\\">Value Two</option></select></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Mock Toggle</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Mock Abstract Toggle</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><span class=\\"objectives\\">Objectives:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center objective-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div><div><span class=\\"triggers\\">Triggers:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center trigger-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div><div class=\\"button-bar\\"><div class=\\"obojobo-draft--components--button alt-action is-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Delete</button></div><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Duplicate</button></div></div></div><div class=\\"box-controls\\"><div class=\\"obojobo-draft--components--button is-not-dangerous align-center cancel-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Done</button></div></div><input class=\\"last-tab\\" type=\\"text\\"></div></div></div></div>"`;
+exports[`MoreInfoBox More Info Box edits values 4`] = `"<div class=\\"visual-editor--more-info \\"><button class=\\"more-info-button is-open\\" tabindex=\\"0\\" aria-label=\\"Toggle More Info Box\\"><svg viewBox=\\"0 0 214 214\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"#000\\" fill=\\"none\\"><circle cy=\\"107\\" cx=\\"107\\" r=\\"100\\" stroke-width=\\"14\\"></circle><circle cy=\\"107\\" cx=\\"57\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"107\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"157\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle></svg></button><div class=\\"more-info-box\\"><div class=\\"container\\"><div class=\\"obojobo-draft--components--modal--tab-trap\\"><input class=\\"first-tab\\" type=\\"text\\"><div class=\\"properties\\"><div></div><div><div class=\\"properties--row\\"><label for=\\"oboeditor--components--more-info-box--id-input\\">Id</label><input readonly=\\"\\" type=\\"text\\" id=\\"oboeditor--components--more-info-box--id-input\\" class=\\"id-input\\" value=\\"new-mock-id\\"><div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Copy Id</button></div><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div></div><div class=\\"properties--row\\"><label for=\\"Mock Input\\">Mock Input</label><input id=\\"Mock Input\\" type=\\"text\\" placeholder=\\"\\" maxlength=\\"300\\" value=\\"changed value\\"></div><div class=\\"properties--row\\"><label for=\\"Mock Select\\">Mock Select</label><select id=\\"Mock Select\\" class=\\"select-item\\"><option value=\\"mockSelectValue1\\">Value One</option><option value=\\"mockSelectValue2\\">Value Two</option></select></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Mock Toggle</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Mock Abstract Toggle</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><span class=\\"objectives\\">Objectives:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center objective-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div><div><span class=\\"triggers\\">Triggers:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center trigger-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div><div class=\\"button-bar\\"><div class=\\"obojobo-draft--components--button alt-action is-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Delete</button></div><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Duplicate</button></div></div></div><div class=\\"box-controls\\"><div class=\\"obojobo-draft--components--button is-not-dangerous align-center cancel-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Done</button></div></div><input class=\\"last-tab\\" type=\\"text\\"></div></div></div></div>"`;
 
-exports[`MoreInfoBox More Info Box edits values 5`] = `"<div class=\\"visual-editor--more-info \\"><button class=\\"more-info-button is-open\\" tabindex=\\"0\\" aria-label=\\"Toggle More Info Box\\"><svg viewBox=\\"0 0 214 214\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"#000\\" fill=\\"none\\"><circle cy=\\"107\\" cx=\\"107\\" r=\\"100\\" stroke-width=\\"14\\"></circle><circle cy=\\"107\\" cx=\\"57\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"107\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"157\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle></svg></button><div class=\\"more-info-box\\"><div class=\\"container\\"><div class=\\"obojobo-draft--components--modal--tab-trap\\"><input class=\\"first-tab\\" type=\\"text\\"><div class=\\"properties\\"><div></div><div><div class=\\"properties--row\\"><label for=\\"oboeditor--components--more-info-box--id-input\\">Id</label><input readonly=\\"\\" type=\\"text\\" id=\\"oboeditor--components--more-info-box--id-input\\" class=\\"id-input\\" value=\\"new-mock-id\\"><div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Copy Id</button></div><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div></div><div class=\\"properties--row\\"><label for=\\"Mock Input\\">Mock Input</label><input id=\\"Mock Input\\" type=\\"text\\" placeholder=\\"\\" maxlength=\\"300\\" value=\\"changed value\\"></div><div class=\\"properties--row\\"><label for=\\"Mock Select\\">Mock Select</label><select id=\\"Mock Select\\" class=\\"select-item\\"><option value=\\"mockSelectValue1\\">Value One</option><option value=\\"mockSelectValue2\\">Value Two</option></select></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Mock Toggle</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Mock Abstract Toggle</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><span class=\\"objectives\\">Objectives:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center objective-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div><div><span class=\\"triggers\\">Triggers:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center trigger-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div><div class=\\"button-bar\\"><div class=\\"obojobo-draft--components--button alt-action is-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Delete</button></div><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Duplicate</button></div></div></div><div class=\\"box-controls\\"><div class=\\"obojobo-draft--components--button is-not-dangerous align-center cancel-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Done</button></div></div><input class=\\"last-tab\\" type=\\"text\\"></div></div></div></div>"`;
+exports[`MoreInfoBox More Info Box edits values 5`] = `"<div class=\\"visual-editor--more-info \\"><button class=\\"more-info-button is-open\\" tabindex=\\"0\\" aria-label=\\"Toggle More Info Box\\"><svg viewBox=\\"0 0 214 214\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"#000\\" fill=\\"none\\"><circle cy=\\"107\\" cx=\\"107\\" r=\\"100\\" stroke-width=\\"14\\"></circle><circle cy=\\"107\\" cx=\\"57\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"107\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"157\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle></svg></button><div class=\\"more-info-box\\"><div class=\\"container\\"><div class=\\"obojobo-draft--components--modal--tab-trap\\"><input class=\\"first-tab\\" type=\\"text\\"><div class=\\"properties\\"><div></div><div><div class=\\"properties--row\\"><label for=\\"oboeditor--components--more-info-box--id-input\\">Id</label><input readonly=\\"\\" type=\\"text\\" id=\\"oboeditor--components--more-info-box--id-input\\" class=\\"id-input\\" value=\\"new-mock-id\\"><div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Copy Id</button></div><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div></div><div class=\\"properties--row\\"><label for=\\"Mock Input\\">Mock Input</label><input id=\\"Mock Input\\" type=\\"text\\" placeholder=\\"\\" maxlength=\\"300\\" value=\\"changed value\\"></div><div class=\\"properties--row\\"><label for=\\"Mock Select\\">Mock Select</label><select id=\\"Mock Select\\" class=\\"select-item\\"><option value=\\"mockSelectValue1\\">Value One</option><option value=\\"mockSelectValue2\\">Value Two</option></select></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Mock Toggle</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Mock Abstract Toggle</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><span class=\\"objectives\\">Objectives:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center objective-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div><div><span class=\\"triggers\\">Triggers:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center trigger-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div><div class=\\"button-bar\\"><div class=\\"obojobo-draft--components--button alt-action is-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Delete</button></div><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Duplicate</button></div></div></div><div class=\\"box-controls\\"><div class=\\"obojobo-draft--components--button is-not-dangerous align-center cancel-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Done</button></div></div><input class=\\"last-tab\\" type=\\"text\\"></div></div></div></div>"`;
 
 exports[`MoreInfoBox More Info Box edits values 6`] = `"<div class=\\"visual-editor--more-info \\"><button class=\\"more-info-button \\" tabindex=\\"0\\" aria-label=\\"Toggle More Info Box\\"><svg viewBox=\\"0 0 214 214\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"#000\\" fill=\\"none\\"><circle cy=\\"107\\" cx=\\"107\\" r=\\"100\\" stroke-width=\\"14\\"></circle><circle cy=\\"107\\" cx=\\"57\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"107\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"157\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle></svg></button></div>"`;
 
@@ -75,7 +75,7 @@ exports[`MoreInfoBox More Info Box renders with Objective Provider 1`] = `"<div
 
 exports[`MoreInfoBox More Info Box tries to save with error 1`] = `"<div class=\\"visual-editor--more-info \\"><button class=\\"more-info-button is-open\\" tabindex=\\"0\\" aria-label=\\"Toggle More Info Box\\"><svg viewBox=\\"0 0 214 214\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"#000\\" fill=\\"none\\"><circle cy=\\"107\\" cx=\\"107\\" r=\\"100\\" stroke-width=\\"14\\"></circle><circle cy=\\"107\\" cx=\\"57\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"107\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"157\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle></svg></button><div class=\\"more-info-box\\"><div class=\\"container\\"><div class=\\"obojobo-draft--components--modal--tab-trap\\"><input class=\\"first-tab\\" type=\\"text\\"><div class=\\"properties\\"><div></div><div><div class=\\"properties--row\\"><label for=\\"oboeditor--components--more-info-box--id-input\\">Id</label><input readonly=\\"\\" type=\\"text\\" id=\\"oboeditor--components--more-info-box--id-input\\" class=\\"id-input\\" value=\\"changed value\\"><div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Copy Id</button></div><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div></div></div><div><span class=\\"objectives\\">Objectives:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center objective-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div><div><span class=\\"triggers\\">Triggers:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center trigger-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div><div class=\\"button-bar\\"><div class=\\"obojobo-draft--components--button alt-action is-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Delete</button></div><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Duplicate</button></div></div></div><div class=\\"box-controls\\"><p class=\\"error\\">A simple Error</p><div class=\\"obojobo-draft--components--button is-not-dangerous align-center cancel-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Done</button></div></div><input class=\\"last-tab\\" type=\\"text\\"></div></div></div></div>"`;
 
-exports[`MoreInfoBox More Info Box with contentDescriptions 1`] = `"<div class=\\"visual-editor--more-info \\"><button class=\\"more-info-button is-open\\" tabindex=\\"0\\" aria-label=\\"Toggle More Info Box\\"><svg viewBox=\\"0 0 214 214\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"#000\\" fill=\\"none\\"><circle cy=\\"107\\" cx=\\"107\\" r=\\"100\\" stroke-width=\\"14\\"></circle><circle cy=\\"107\\" cx=\\"57\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"107\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"157\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle></svg></button><div class=\\"more-info-box\\"><div class=\\"container\\"><div class=\\"obojobo-draft--components--modal--tab-trap\\"><input class=\\"first-tab\\" type=\\"text\\"><div class=\\"properties\\"><div></div><div><div class=\\"properties--row\\"><label for=\\"oboeditor--components--more-info-box--id-input\\">Id</label><input readonly=\\"\\" type=\\"text\\" id=\\"oboeditor--components--more-info-box--id-input\\" class=\\"id-input\\" value=\\"mock-id\\"><div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Copy Id</button></div><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div></div><div class=\\"properties--row\\"><label for=\\"Mock Input\\">Mock Input</label><input id=\\"Mock Input\\" type=\\"text\\" placeholder=\\"\\" maxlength=\\"300\\" value=\\"value1\\"></div><div class=\\"properties--row\\"><label for=\\"Mock Select\\">Mock Select</label><select id=\\"Mock Select\\" class=\\"select-item\\"><option value=\\"value1\\">Value One</option><option value=\\"value2\\">Value Two</option></select></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Mock Toggle</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Mock Abstract Toggle</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div><label>Mock Button</label><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Mock Name</button></div></div></div><div><span class=\\"objectives\\">Objectives:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center objective-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div><div><span class=\\"triggers\\">Triggers:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center trigger-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div><div class=\\"button-bar\\"><div class=\\"obojobo-draft--components--button alt-action is-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Delete</button></div><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Duplicate</button></div></div></div><div class=\\"box-controls\\"><div class=\\"obojobo-draft--components--button is-not-dangerous align-center cancel-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Done</button></div></div><input class=\\"last-tab\\" type=\\"text\\"></div></div></div></div>"`;
+exports[`MoreInfoBox More Info Box with contentDescriptions 1`] = `"<div class=\\"visual-editor--more-info \\"><button class=\\"more-info-button is-open\\" tabindex=\\"0\\" aria-label=\\"Toggle More Info Box\\"><svg viewBox=\\"0 0 214 214\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"#000\\" fill=\\"none\\"><circle cy=\\"107\\" cx=\\"107\\" r=\\"100\\" stroke-width=\\"14\\"></circle><circle cy=\\"107\\" cx=\\"57\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"107\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"157\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle></svg></button><div class=\\"more-info-box\\"><div class=\\"container\\"><div class=\\"obojobo-draft--components--modal--tab-trap\\"><input class=\\"first-tab\\" type=\\"text\\"><div class=\\"properties\\"><div></div><div><div class=\\"properties--row\\"><label for=\\"oboeditor--components--more-info-box--id-input\\">Id</label><input readonly=\\"\\" type=\\"text\\" id=\\"oboeditor--components--more-info-box--id-input\\" class=\\"id-input\\" value=\\"mock-id\\"><div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Copy Id</button></div><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div></div><div class=\\"properties--row\\"><label for=\\"Mock Input\\">Mock Input</label><input id=\\"Mock Input\\" type=\\"text\\" placeholder=\\"\\" maxlength=\\"300\\" value=\\"value1\\"></div><div class=\\"properties--row\\"><label for=\\"Mock Select\\">Mock Select</label><select id=\\"Mock Select\\" class=\\"select-item\\"><option value=\\"value1\\">Value One</option><option value=\\"value2\\">Value Two</option></select></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Mock Toggle</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Mock Abstract Toggle</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div><label>Mock Button</label><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Mock Name</button></div></div></div><div><span class=\\"objectives\\">Objectives:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center objective-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div><div><span class=\\"triggers\\">Triggers:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center trigger-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div><div class=\\"button-bar\\"><div class=\\"obojobo-draft--components--button alt-action is-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Delete</button></div><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Duplicate</button></div></div></div><div class=\\"box-controls\\"><div class=\\"obojobo-draft--components--button is-not-dangerous align-center cancel-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Done</button></div></div><input class=\\"last-tab\\" type=\\"text\\"></div></div></div></div>"`;
 
 exports[`MoreInfoBox More Info Box with no button bar 1`] = `"<div class=\\"visual-editor--more-info \\"><button class=\\"more-info-button is-open\\" tabindex=\\"0\\" aria-label=\\"Toggle More Info Box\\"><svg viewBox=\\"0 0 214 214\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"#000\\" fill=\\"none\\"><circle cy=\\"107\\" cx=\\"107\\" r=\\"100\\" stroke-width=\\"14\\"></circle><circle cy=\\"107\\" cx=\\"57\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"107\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle><circle cy=\\"107\\" cx=\\"157\\" r=\\"7\\" stroke-width=\\"16\\" fill=\\"#000\\"></circle></svg></button><div class=\\"more-info-box\\"><div class=\\"container\\"><div class=\\"obojobo-draft--components--modal--tab-trap\\"><input class=\\"first-tab\\" type=\\"text\\"><div class=\\"properties\\"><div></div><div><div class=\\"properties--row\\"><label for=\\"oboeditor--components--more-info-box--id-input\\">Id</label><input readonly=\\"\\" type=\\"text\\" id=\\"oboeditor--components--more-info-box--id-input\\" class=\\"id-input\\" value=\\"mock-id\\"><div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Copy Id</button></div><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div></div></div><div><span class=\\"objectives\\">Objectives:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center objective-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div><div><span class=\\"triggers\\">Triggers:</span><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center trigger-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">✎ Edit</button></div></div></div><div class=\\"box-controls\\"><div class=\\"obojobo-draft--components--button is-not-dangerous align-center cancel-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Done</button></div></div><input class=\\"last-tab\\" type=\\"text\\"></div></div></div></div>"`;
 
diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/triggers/__snapshots__/trigger-list-modal.test.js.snap b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/triggers/__snapshots__/trigger-list-modal.test.js.snap
index dab1c8376f..7f537345c2 100644
--- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/triggers/__snapshots__/trigger-list-modal.test.js.snap
+++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/triggers/__snapshots__/trigger-list-modal.test.js.snap
@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TriggerListModal adds a trigger 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">Triggers</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"trigger-list-modal\\"><div class=\\"trigger\\"><label>When</label><select class=\\"select-item\\"><option value=\\"onMount\\">This item is shown</option><option value=\\"onUnmount\\">This item is hidden</option><option value=\\"onNavEnter\\">The student enters the page</option><option value=\\"onNavExit\\">The student leaves the page</option><option value=\\"onStartAttempt\\">An assessment attempt starts</option><option value=\\"onEndAttempt\\">An assessment attempt ends</option><option value=\\"onClick\\">The student clicks the button</option></select><button class=\\"delete-button\\">×</button><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button><div class=\\"action-options\\"><div><label>Item Id</label><input class=\\"input-item\\" value=\\"\\"><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Ignore Navigation Lock</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\" checked=\\"\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Action</button></div></div><div class=\\"trigger\\"><label>When</label><select class=\\"select-item\\"><option value=\\"onMount\\">This item is shown</option><option value=\\"onUnmount\\">This item is hidden</option><option value=\\"onNavEnter\\">The student enters the page</option><option value=\\"onNavExit\\">The student leaves the page</option><option value=\\"onStartAttempt\\">An assessment attempt starts</option><option value=\\"onEndAttempt\\">An assessment attempt ends</option><option value=\\"onClick\\">The student clicks the button</option></select><button class=\\"delete-button\\">×</button><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Action</button></div></div><div class=\\"trigger\\"><label>When</label><select class=\\"select-item\\"><option value=\\"onMount\\">This item is shown</option><option value=\\"onUnmount\\">This item is hidden</option><option value=\\"onNavEnter\\">The student enters the page</option><option value=\\"onNavExit\\">The student leaves the page</option><option value=\\"onStartAttempt\\">An assessment attempt starts</option><option value=\\"onEndAttempt\\">An assessment attempt ends</option><option value=\\"onClick\\">The student clicks the button</option></select><button class=\\"delete-button\\">×</button><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button><div class=\\"action-options\\"><div><label>Item Id</label><input class=\\"input-item\\" value=\\"\\"><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Ignore Navigation Lock</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\" checked=\\"\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Action</button></div></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Trigger</button></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
+exports[`TriggerListModal adds a trigger 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">Triggers</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"trigger-list-modal\\"><div class=\\"trigger\\"><label>When</label><select class=\\"select-item\\"><option value=\\"onMount\\">This item is shown</option><option value=\\"onUnmount\\">This item is hidden</option><option value=\\"onNavEnter\\">The student enters the page</option><option value=\\"onNavExit\\">The student leaves the page</option><option value=\\"onStartAttempt\\">An assessment attempt starts</option><option value=\\"onEndAttempt\\">An assessment attempt ends</option><option value=\\"onClick\\">The student clicks the button</option></select><button class=\\"delete-button\\">×</button><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button><div class=\\"action-options\\"><div><label>Item Id</label><input class=\\"input-item\\" value=\\"\\"><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Ignore Navigation Lock</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\" checked=\\"\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Action</button></div></div><div class=\\"trigger\\"><label>When</label><select class=\\"select-item\\"><option value=\\"onMount\\">This item is shown</option><option value=\\"onUnmount\\">This item is hidden</option><option value=\\"onNavEnter\\">The student enters the page</option><option value=\\"onNavExit\\">The student leaves the page</option><option value=\\"onStartAttempt\\">An assessment attempt starts</option><option value=\\"onEndAttempt\\">An assessment attempt ends</option><option value=\\"onClick\\">The student clicks the button</option></select><button class=\\"delete-button\\">×</button><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Action</button></div></div><div class=\\"trigger\\"><label>When</label><select class=\\"select-item\\"><option value=\\"onMount\\">This item is shown</option><option value=\\"onUnmount\\">This item is hidden</option><option value=\\"onNavEnter\\">The student enters the page</option><option value=\\"onNavExit\\">The student leaves the page</option><option value=\\"onStartAttempt\\">An assessment attempt starts</option><option value=\\"onEndAttempt\\">An assessment attempt ends</option><option value=\\"onClick\\">The student clicks the button</option></select><button class=\\"delete-button\\">×</button><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button><div class=\\"action-options\\"><div><label>Item Id</label><input class=\\"input-item\\" value=\\"\\"><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Ignore Navigation Lock</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\" checked=\\"\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Action</button></div></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Trigger</button></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
 
-exports[`TriggerListModal adds an action 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">Triggers</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"trigger-list-modal\\"><div class=\\"trigger\\"><label>When</label><select class=\\"select-item\\"><option value=\\"onMount\\">This item is shown</option><option value=\\"onUnmount\\">This item is hidden</option><option value=\\"onNavEnter\\">The student enters the page</option><option value=\\"onNavExit\\">The student leaves the page</option><option value=\\"onStartAttempt\\">An assessment attempt starts</option><option value=\\"onEndAttempt\\">An assessment attempt ends</option><option value=\\"onClick\\">The student clicks the button</option></select><button class=\\"delete-button\\">×</button><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button><div class=\\"action-options\\"><div><label>Item Id</label><input class=\\"input-item\\" value=\\"\\"><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Ignore Navigation Lock</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\" checked=\\"\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button><div class=\\"action-options\\"><div><label>Item Id</label><input class=\\"input-item\\" value=\\"\\"><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Ignore Navigation Lock</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\" checked=\\"\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Action</button></div></div><div class=\\"trigger\\"><label>When</label><select class=\\"select-item\\"><option value=\\"onMount\\">This item is shown</option><option value=\\"onUnmount\\">This item is hidden</option><option value=\\"onNavEnter\\">The student enters the page</option><option value=\\"onNavExit\\">The student leaves the page</option><option value=\\"onStartAttempt\\">An assessment attempt starts</option><option value=\\"onEndAttempt\\">An assessment attempt ends</option><option value=\\"onClick\\">The student clicks the button</option></select><button class=\\"delete-button\\">×</button><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Action</button></div></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Trigger</button></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
+exports[`TriggerListModal adds an action 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">Triggers</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"trigger-list-modal\\"><div class=\\"trigger\\"><label>When</label><select class=\\"select-item\\"><option value=\\"onMount\\">This item is shown</option><option value=\\"onUnmount\\">This item is hidden</option><option value=\\"onNavEnter\\">The student enters the page</option><option value=\\"onNavExit\\">The student leaves the page</option><option value=\\"onStartAttempt\\">An assessment attempt starts</option><option value=\\"onEndAttempt\\">An assessment attempt ends</option><option value=\\"onClick\\">The student clicks the button</option></select><button class=\\"delete-button\\">×</button><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button><div class=\\"action-options\\"><div><label>Item Id</label><input class=\\"input-item\\" value=\\"\\"><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Ignore Navigation Lock</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\" checked=\\"\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button><div class=\\"action-options\\"><div><label>Item Id</label><input class=\\"input-item\\" value=\\"\\"><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Ignore Navigation Lock</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\" checked=\\"\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Action</button></div></div><div class=\\"trigger\\"><label>When</label><select class=\\"select-item\\"><option value=\\"onMount\\">This item is shown</option><option value=\\"onUnmount\\">This item is hidden</option><option value=\\"onNavEnter\\">The student enters the page</option><option value=\\"onNavExit\\">The student leaves the page</option><option value=\\"onStartAttempt\\">An assessment attempt starts</option><option value=\\"onEndAttempt\\">An assessment attempt ends</option><option value=\\"onClick\\">The student clicks the button</option></select><button class=\\"delete-button\\">×</button><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Action</button></div></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Trigger</button></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
 
 exports[`TriggerListModal changes action type 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">Triggers</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"trigger-list-modal\\"><div class=\\"trigger\\"><label>When</label><select class=\\"select-item\\"><option value=\\"onMount\\">This item is shown</option><option value=\\"onUnmount\\">This item is hidden</option><option value=\\"onNavEnter\\">The student enters the page</option><option value=\\"onNavExit\\">The student leaves the page</option><option value=\\"onStartAttempt\\">An assessment attempt starts</option><option value=\\"onEndAttempt\\">An assessment attempt ends</option><option value=\\"onClick\\">The student clicks the button</option></select><button class=\\"delete-button\\">×</button><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button></div><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Action</button></div></div><div class=\\"trigger\\"><label>When</label><select class=\\"select-item\\"><option value=\\"onMount\\">This item is shown</option><option value=\\"onUnmount\\">This item is hidden</option><option value=\\"onNavEnter\\">The student enters the page</option><option value=\\"onNavExit\\">The student leaves the page</option><option value=\\"onStartAttempt\\">An assessment attempt starts</option><option value=\\"onEndAttempt\\">An assessment attempt ends</option><option value=\\"onClick\\">The student clicks the button</option></select><button class=\\"delete-button\\">×</button><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Action</button></div></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Trigger</button></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
 
-exports[`TriggerListModal changes action value 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">Triggers</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"trigger-list-modal\\"><div class=\\"trigger\\"><label>When</label><select class=\\"select-item\\"><option value=\\"onMount\\">This item is shown</option><option value=\\"onUnmount\\">This item is hidden</option><option value=\\"onNavEnter\\">The student enters the page</option><option value=\\"onNavExit\\">The student leaves the page</option><option value=\\"onStartAttempt\\">An assessment attempt starts</option><option value=\\"onEndAttempt\\">An assessment attempt ends</option><option value=\\"onClick\\">The student clicks the button</option></select><button class=\\"delete-button\\">×</button><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button><div class=\\"action-options\\"><div><label>Item Id</label><input class=\\"input-item\\" value=\\"1\\"><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Ignore Navigation Lock</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\" checked=\\"\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button><div class=\\"action-options\\"><div><label>Item Id</label><input class=\\"input-item\\" value=\\"10\\"><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Ignore Navigation Lock</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\" checked=\\"\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Action</button></div></div><div class=\\"trigger\\"><label>When</label><select class=\\"select-item\\"><option value=\\"onMount\\">This item is shown</option><option value=\\"onUnmount\\">This item is hidden</option><option value=\\"onNavEnter\\">The student enters the page</option><option value=\\"onNavExit\\">The student leaves the page</option><option value=\\"onStartAttempt\\">An assessment attempt starts</option><option value=\\"onEndAttempt\\">An assessment attempt ends</option><option value=\\"onClick\\">The student clicks the button</option></select><button class=\\"delete-button\\">×</button><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Action</button></div></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Trigger</button></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
+exports[`TriggerListModal changes action value 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">Triggers</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"trigger-list-modal\\"><div class=\\"trigger\\"><label>When</label><select class=\\"select-item\\"><option value=\\"onMount\\">This item is shown</option><option value=\\"onUnmount\\">This item is hidden</option><option value=\\"onNavEnter\\">The student enters the page</option><option value=\\"onNavExit\\">The student leaves the page</option><option value=\\"onStartAttempt\\">An assessment attempt starts</option><option value=\\"onEndAttempt\\">An assessment attempt ends</option><option value=\\"onClick\\">The student clicks the button</option></select><button class=\\"delete-button\\">×</button><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button><div class=\\"action-options\\"><div><label>Item Id</label><input class=\\"input-item\\" value=\\"1\\"><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Ignore Navigation Lock</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\" checked=\\"\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button><div class=\\"action-options\\"><div><label>Item Id</label><input class=\\"input-item\\" value=\\"10\\"><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Ignore Navigation Lock</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\" checked=\\"\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Action</button></div></div><div class=\\"trigger\\"><label>When</label><select class=\\"select-item\\"><option value=\\"onMount\\">This item is shown</option><option value=\\"onUnmount\\">This item is hidden</option><option value=\\"onNavEnter\\">The student enters the page</option><option value=\\"onNavExit\\">The student leaves the page</option><option value=\\"onStartAttempt\\">An assessment attempt starts</option><option value=\\"onEndAttempt\\">An assessment attempt ends</option><option value=\\"onClick\\">The student clicks the button</option></select><button class=\\"delete-button\\">×</button><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Action</button></div></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Trigger</button></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
 
-exports[`TriggerListModal changes trigger 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">Triggers</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"trigger-list-modal\\"><div class=\\"trigger\\"><label>When</label><select class=\\"select-item\\"><option value=\\"onMount\\">This item is shown</option><option value=\\"onUnmount\\">This item is hidden</option><option value=\\"onNavEnter\\">The student enters the page</option><option value=\\"onNavExit\\">The student leaves the page</option><option value=\\"onStartAttempt\\">An assessment attempt starts</option><option value=\\"onEndAttempt\\">An assessment attempt ends</option><option value=\\"onClick\\">The student clicks the button</option></select><button class=\\"delete-button\\">×</button><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button><div class=\\"action-options\\"><div><label>Item Id</label><input class=\\"input-item\\" value=\\"\\"><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Ignore Navigation Lock</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\" checked=\\"\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Action</button></div></div><div class=\\"trigger\\"><label>When</label><select class=\\"select-item\\"><option value=\\"onMount\\">This item is shown</option><option value=\\"onUnmount\\">This item is hidden</option><option value=\\"onNavEnter\\">The student enters the page</option><option value=\\"onNavExit\\">The student leaves the page</option><option value=\\"onStartAttempt\\">An assessment attempt starts</option><option value=\\"onEndAttempt\\">An assessment attempt ends</option><option value=\\"onClick\\">The student clicks the button</option></select><button class=\\"delete-button\\">×</button><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Action</button></div></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Trigger</button></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
+exports[`TriggerListModal changes trigger 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">Triggers</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"trigger-list-modal\\"><div class=\\"trigger\\"><label>When</label><select class=\\"select-item\\"><option value=\\"onMount\\">This item is shown</option><option value=\\"onUnmount\\">This item is hidden</option><option value=\\"onNavEnter\\">The student enters the page</option><option value=\\"onNavExit\\">The student leaves the page</option><option value=\\"onStartAttempt\\">An assessment attempt starts</option><option value=\\"onEndAttempt\\">An assessment attempt ends</option><option value=\\"onClick\\">The student clicks the button</option></select><button class=\\"delete-button\\">×</button><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button><div class=\\"action-options\\"><div><label>Item Id</label><input class=\\"input-item\\" value=\\"\\"><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Ignore Navigation Lock</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\" checked=\\"\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Action</button></div></div><div class=\\"trigger\\"><label>When</label><select class=\\"select-item\\"><option value=\\"onMount\\">This item is shown</option><option value=\\"onUnmount\\">This item is hidden</option><option value=\\"onNavEnter\\">The student enters the page</option><option value=\\"onNavExit\\">The student leaves the page</option><option value=\\"onStartAttempt\\">An assessment attempt starts</option><option value=\\"onEndAttempt\\">An assessment attempt ends</option><option value=\\"onClick\\">The student clicks the button</option></select><button class=\\"delete-button\\">×</button><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Action</button></div></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Trigger</button></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
 
 exports[`TriggerListModal createNewDefaultActionValueObject(assessment:endAttempt) creates a new default action value object 1`] = `
 Object {
@@ -75,6 +75,6 @@ exports[`TriggerListModal deletes an action 1`] = `"<div class=\\"obojobo-draft-
 
 exports[`TriggerListModal deletes trigger 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input type=\\"text\\" aria-label=\\"Start of dialog\\" class=\\"first-tab\\"/><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align:center\\">Triggers</h1><div class=\\"dialog-content\\" style=\\"text-align:center\\"><div class=\\"trigger-list-modal\\"><div class=\\"trigger\\"><label>When</label><select class=\\"select-item\\"><option value=\\"onMount\\">This item is shown</option><option selected=\\"\\" value=\\"onUnmount\\">This item is hidden</option><option value=\\"onNavEnter\\">The student enters the page</option><option value=\\"onNavExit\\">The student leaves the page</option><option value=\\"onStartAttempt\\">An assessment attempt starts</option><option value=\\"onEndAttempt\\">An assessment attempt ends</option><option value=\\"onClick\\">The student clicks the button</option></select><button class=\\"delete-button\\">×</button><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Action</button></div></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Trigger</button></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">OK</button></div></div></div><input type=\\"text\\" aria-label=\\"End of dialog\\" class=\\"last-tab\\"/></div></div></div>"`;
 
-exports[`TriggerListModal renders all options 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input type=\\"text\\" aria-label=\\"Start of dialog\\" class=\\"first-tab\\"/><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align:center\\">Triggers</h1><div class=\\"dialog-content\\" style=\\"text-align:center\\"><div class=\\"trigger-list-modal\\"><div class=\\"trigger\\"><label>When</label><select class=\\"select-item\\"><option selected=\\"\\" value=\\"onMount\\">This item is shown</option><option value=\\"onUnmount\\">This item is hidden</option><option value=\\"onNavEnter\\">The student enters the page</option><option value=\\"onNavExit\\">The student leaves the page</option><option value=\\"onStartAttempt\\">An assessment attempt starts</option><option value=\\"onEndAttempt\\">An assessment attempt ends</option><option value=\\"onClick\\">The student clicks the button</option></select><button class=\\"delete-button\\">×</button><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option selected=\\"\\" value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button><div class=\\"action-options\\"><div><label>Item Id</label><input class=\\"input-item\\" value=\\"\\"/><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Ignore Navigation Lock</span><label class=\\"switch\\"><input type=\\"checkbox\\" class=\\"switch-slider\\" checked=\\"\\"/><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option selected=\\"\\" value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button><div class=\\"action-options\\"><div><label>URL</label><input class=\\"input-item\\" value=\\"\\"/></div></div></div><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option selected=\\"\\" value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button><div class=\\"action-options\\"><div><label>Assessment Id</label><input class=\\"input-item\\" value=\\"\\"/></div></div></div><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option selected=\\"\\" value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button><div class=\\"action-options\\"><div><label>Assessment Id</label><input class=\\"input-item\\" value=\\"\\"/></div></div></div><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option selected=\\"\\" value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button><div class=\\"action-options\\"><div><label>Title</label><input class=\\"input-item\\" value=\\"\\"/></div><div><label>Message</label><input class=\\"input-item\\" value=\\"\\"/></div></div></div><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option selected=\\"\\" value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button><div class=\\"action-options\\"><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Animate Scroll</span><label class=\\"switch\\"><input type=\\"checkbox\\" class=\\"switch-slider\\"/><div class=\\"switch-slider round\\"></div></label></div></div></div><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option selected=\\"\\" value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button><div class=\\"action-options\\"><div><label>Item Id</label><input class=\\"input-item\\" value=\\"\\"/></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Fade Out Other Items</span><label class=\\"switch\\"><input type=\\"checkbox\\" class=\\"switch-slider\\"/><div class=\\"switch-slider round\\"></div></label></div><label>If item not visible on screen</label><select class=\\"select-item\\"><option value=\\"animateScroll\\">Smoothly scroll page to the focussed item</option><option selected=\\"\\" value=\\"jumpScroll\\">Quickly jump page to the focussed item</option><option value=\\"preventScroll\\">Keep the page where it is</option></select></div></div><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option selected=\\"\\" value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Action</button></div></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Trigger</button></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">OK</button></div></div></div><input type=\\"text\\" aria-label=\\"End of dialog\\" class=\\"last-tab\\"/></div></div></div>"`;
+exports[`TriggerListModal renders all options 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input type=\\"text\\" aria-label=\\"Start of dialog\\" class=\\"first-tab\\"/><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align:center\\">Triggers</h1><div class=\\"dialog-content\\" style=\\"text-align:center\\"><div class=\\"trigger-list-modal\\"><div class=\\"trigger\\"><label>When</label><select class=\\"select-item\\"><option selected=\\"\\" value=\\"onMount\\">This item is shown</option><option value=\\"onUnmount\\">This item is hidden</option><option value=\\"onNavEnter\\">The student enters the page</option><option value=\\"onNavExit\\">The student leaves the page</option><option value=\\"onStartAttempt\\">An assessment attempt starts</option><option value=\\"onEndAttempt\\">An assessment attempt ends</option><option value=\\"onClick\\">The student clicks the button</option></select><button class=\\"delete-button\\">×</button><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option selected=\\"\\" value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button><div class=\\"action-options\\"><div><label>Item Id</label><input class=\\"input-item\\" value=\\"\\"/><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Ignore Navigation Lock</span><br/><small></small></div><label class=\\"switch\\"><input type=\\"checkbox\\" class=\\"switch-slider\\" checked=\\"\\"/><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option selected=\\"\\" value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button><div class=\\"action-options\\"><div><label>URL</label><input class=\\"input-item\\" value=\\"\\"/></div></div></div><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option selected=\\"\\" value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button><div class=\\"action-options\\"><div><label>Assessment Id</label><input class=\\"input-item\\" value=\\"\\"/></div></div></div><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option selected=\\"\\" value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button><div class=\\"action-options\\"><div><label>Assessment Id</label><input class=\\"input-item\\" value=\\"\\"/></div></div></div><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option selected=\\"\\" value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button><div class=\\"action-options\\"><div><label>Title</label><input class=\\"input-item\\" value=\\"\\"/></div><div><label>Message</label><input class=\\"input-item\\" value=\\"\\"/></div></div></div><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option selected=\\"\\" value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button><div class=\\"action-options\\"><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Animate Scroll</span><br/><small></small></div><label class=\\"switch\\"><input type=\\"checkbox\\" class=\\"switch-slider\\"/><div class=\\"switch-slider round\\"></div></label></div></div></div><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option selected=\\"\\" value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button><div class=\\"action-options\\"><div><label>Item Id</label><input class=\\"input-item\\" value=\\"\\"/></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Fade Out Other Items</span><br/><small></small></div><label class=\\"switch\\"><input type=\\"checkbox\\" class=\\"switch-slider\\"/><div class=\\"switch-slider round\\"></div></label></div><label>If item not visible on screen</label><select class=\\"select-item\\"><option value=\\"animateScroll\\">Smoothly scroll page to the focussed item</option><option selected=\\"\\" value=\\"jumpScroll\\">Quickly jump page to the focussed item</option><option value=\\"preventScroll\\">Keep the page where it is</option></select></div></div><div class=\\"action\\"><button class=\\"drag-button\\"></button><label>Then</label><select class=\\"select-item\\"><option value=\\"nav:goto\\">Go to</option><option selected=\\"\\" value=\\"nav:prev\\">Go to the previous page</option><option value=\\"nav:next\\">Go to the next page</option><option value=\\"nav:openExternalLink\\">Open a webpage</option><option value=\\"nav:lock\\">Lock navigation</option><option value=\\"nav:unlock\\">Unlock navigation</option><option value=\\"nav:open\\">Open the navigation menu</option><option value=\\"nav:close\\">Close the navigation menu</option><option value=\\"nav:toggle\\">Toggle the navigation menu</option><option value=\\"assessment:startAttempt\\">Start an attempt for</option><option value=\\"assessment:endAttempt\\">End an attempt for</option><option value=\\"viewer:alert\\">Display a popup message</option><option value=\\"viewer:scrollToTop\\">Scroll to the top of the page</option><option value=\\"focus:component\\">Focus on a specific item</option></select><button class=\\"delete-button\\">×</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Action</button></div></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Trigger</button></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">OK</button></div></div></div><input type=\\"text\\" aria-label=\\"End of dialog\\" class=\\"last-tab\\"/></div></div></div>"`;
 
 exports[`TriggerListModal renders if given no triggers 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input type=\\"text\\" aria-label=\\"Start of dialog\\" class=\\"first-tab\\"/><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align:center\\">Triggers</h1><div class=\\"dialog-content\\" style=\\"text-align:center\\"><div class=\\"trigger-list-modal\\"><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">+ Add Trigger</button></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">OK</button></div></div></div><input type=\\"text\\" aria-label=\\"End of dialog\\" class=\\"last-tab\\"/></div></div></div>"`;
diff --git a/packages/obonode/obojobo-chunks-youtube/parse-youtube-url.test.js b/packages/app/obojobo-document-engine/__tests__/oboeditor/util/url-embed-code-check.test.js
similarity index 89%
rename from packages/obonode/obojobo-chunks-youtube/parse-youtube-url.test.js
rename to packages/app/obojobo-document-engine/__tests__/oboeditor/util/url-embed-code-check.test.js
index 3141d31e1d..a9846b01c4 100644
--- a/packages/obonode/obojobo-chunks-youtube/parse-youtube-url.test.js
+++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/util/url-embed-code-check.test.js
@@ -1,9 +1,15 @@
-import { parseYouTubeURL, getStandardizedURLFromVideoId } from './parse-youtube-url'
+import {
+	parseURLOrEmbedCode,
+	getStandardizedURLFromVideoId
+} from 'obojobo-document-engine/src/scripts/oboeditor/util/url-embed-code-check'
+
+const IFRAME_NODE = 'ObojoboDraft.Chunks.IFrame'
+const YOUTUBE_NODE = 'ObojoboDraft.Chunks.YouTube'
 
 // Example list of URLs modified from https://gist.github.com/rodrigoborgesdeoliveira/987683cfbfcc8d800192da1e73adc486
 // Items at the bottom of the list result in "bad" values, but are expected output based on the
 // algorithm
-describe('parseYouTubeURL', () => {
+describe('parseURLOrEmbedCode works as expected for Youtube nodes', () => {
 	test.each`
 		userString                                                                                                                                                                                                                       | videoId                   | standardizedVideoUrl                      | startSeconds | endSeconds
 		${'dQw4w9WgXcQ'}                                                                                                                                                                                                                 | ${'dQw4w9WgXcQ'}          | ${'http://youtu.be/dQw4w9WgXcQ'}          | ${null}      | ${null}
@@ -68,9 +74,9 @@ describe('parseYouTubeURL', () => {
 		${'http://www.youtube.com/user/Scobleizer#p/u/1/1p3vcRhsYGo'}                                                                                                                                                                    | ${'Scobleizer'}           | ${'http://youtu.be/Scobleizer'}           | ${null}      | ${null}
 		${'http://www.youtube.com/user/Scobleizer#p/u/1/Scobleizer?rel=0 '}                                                                                                                                                              | ${'Scobleizer'}           | ${'http://youtu.be/Scobleizer'}           | ${null}      | ${null}
 	`(
-		'parseYouTubeURL("$userString") = {videoId:"$videoId",standardizedVideoUrl:"$standardizedVideoUrl",startSeconds:"$startSeconds",endSeconds:"$endSeconds"}',
+		'parseURLOrEmbedCode("$userString") = {videoId:"$videoId",standardizedVideoUrl:"$standardizedVideoUrl",startSeconds:"$startSeconds",endSeconds:"$endSeconds"}',
 		({ userString, videoId, standardizedVideoUrl, startSeconds, endSeconds }) => {
-			const info = parseYouTubeURL(userString)
+			const info = parseURLOrEmbedCode(userString, YOUTUBE_NODE)
 
 			expect(info.videoId).toBe(videoId)
 			expect(info.standardizedVideoUrl).toBe(standardizedVideoUrl)
@@ -79,6 +85,56 @@ describe('parseYouTubeURL', () => {
 		}
 	)
 
+	test('parseURLOrEmbedCode works as expected for IFrame nodes', () => {
+		let userString = 'https://mock-url.com'
+		let info = parseURLOrEmbedCode(userString, IFRAME_NODE)
+		expect(info).toStrictEqual(new URL(userString))
+
+		userString = 'http://mock-url.com'
+		info = parseURLOrEmbedCode(userString, IFRAME_NODE)
+		expect(info).toStrictEqual(new URL(userString))
+
+		userString = 'https://www.mock-url.com'
+		info = parseURLOrEmbedCode(userString, IFRAME_NODE)
+		expect(info).toStrictEqual(new URL(userString))
+
+		userString = 'http://www.mock-url.com'
+		info = parseURLOrEmbedCode(userString, IFRAME_NODE)
+		expect(info).toStrictEqual(new URL(userString))
+
+		userString = '<iframe width="560" height="315" src="http://mock-url.com">'
+		info = parseURLOrEmbedCode(userString, IFRAME_NODE)
+		expect(info).toStrictEqual(new URL('http://mock-url.com'))
+
+		userString = '<iframe width="560" height="315" src="https://mock-url.com">'
+		info = parseURLOrEmbedCode(userString, IFRAME_NODE)
+		expect(info).toStrictEqual(new URL('https://mock-url.com'))
+
+		userString = 'htxp://mock'
+		info = parseURLOrEmbedCode(userString, IFRAME_NODE)
+		expect(info).toBe(false)
+
+		userString = 'ottttp://mock'
+		info = parseURLOrEmbedCode(userString, IFRAME_NODE)
+		expect(info).toBe(false)
+
+		userString = 'ftp'
+		info = parseURLOrEmbedCode(userString, IFRAME_NODE)
+		expect(info).toBe(false)
+
+		userString = '<iframe width="560" height="315" src="htxp://mock-url.com">'
+		info = parseURLOrEmbedCode(userString, IFRAME_NODE)
+		expect(info).toBe(false)
+
+		userString = 'iframe width="560" height="315" src="htxp://mock-url.com">'
+		info = parseURLOrEmbedCode(userString, IFRAME_NODE)
+		expect(info).toBe(false)
+
+		userString = '<iframe width="560" height="315" src="mock">'
+		info = parseURLOrEmbedCode(userString, IFRAME_NODE)
+		expect(info).toBe(false)
+	})
+
 	test('getStandardizedURLFromVideoId returns "" when passed in falsy values', () => {
 		expect(getStandardizedURLFromVideoId(null)).toBe('')
 		expect(getStandardizedURLFromVideoId(false)).toBe('')
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..2a874e79d3 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/app/obojobo-document-engine/src/scripts/common/components/switch.js b/packages/app/obojobo-document-engine/src/scripts/common/components/switch.js
index 35a5c4282a..c890c99dda 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,9 +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 }) => (
 	<div className="obojobo-draft--components--switch">
-		{title ? <span contentEditable={false}>{title}</span> : null}
+		<div className="text-content">
+			{title ? <span contentEditable={false}>{title}</span> : null}
+			<br />
+			<small>{description && description}</small>
+		</div>
 		<label className="switch">
 			<input
 				className="switch-slider"
diff --git a/packages/app/obojobo-document-engine/src/scripts/common/components/switch.scss b/packages/app/obojobo-document-engine/src/scripts/common/components/switch.scss
index f1692d3df0..c205c601e0 100644
--- a/packages/app/obojobo-document-engine/src/scripts/common/components/switch.scss
+++ b/packages/app/obojobo-document-engine/src/scripts/common/components/switch.scss
@@ -2,7 +2,14 @@
 
 .obojobo-draft--components--switch {
 	position: relative;
-	height: 1.3em;
+
+	//@HACK: Fixes the .info dialog being blurry sometimes in CHROME
+	transform: translate3d(0, 0, 0);
+	z-index: 1;
+
+	.text-content {
+		width: 85%;
+	}
 
 	> span {
 		padding-right: 0.5em;
@@ -11,6 +18,7 @@
 
 	.switch {
 		position: absolute;
+		right: 0;
 		display: inline-block;
 		width: 2.6em;
 		height: 1em;
@@ -86,4 +94,10 @@
 			left: 37%;
 		}
 	}
+
+	small {
+		font-size: 0.8em;
+		color: $color-neutral-text;
+		margin-top: 0;
+	}
 }
diff --git a/packages/obonode/obojobo-chunks-youtube/parse-youtube-url.js b/packages/app/obojobo-document-engine/src/scripts/oboeditor/util/url-embed-code-check.js
similarity index 86%
rename from packages/obonode/obojobo-chunks-youtube/parse-youtube-url.js
rename to packages/app/obojobo-document-engine/src/scripts/oboeditor/util/url-embed-code-check.js
index f95b72894a..24eac46dbc 100644
--- a/packages/obonode/obojobo-chunks-youtube/parse-youtube-url.js
+++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/util/url-embed-code-check.js
@@ -3,6 +3,8 @@ const MIN_SEC_TIME_REGEX = /([0-9]+)m([0-9]+)s$/
 const MIN_TIME_REGEX = /([0-9]+)m$/
 const SEC_TIME_REGEX = /([0-9]+)s$/
 
+const IFRAME_NODE = 'ObojoboDraft.Chunks.IFrame'
+
 const minSecFormatToSeconds = timeString => {
 	if (timeString === null) {
 		return null
@@ -37,7 +39,7 @@ const getStandardizedURLFromVideoId = videoId => {
 	return `${document.location.protocol}//youtu.be/${videoId}`
 }
 
-const parseYouTubeURL = videoIdOrUrlOrEmbedCode => {
+const parseURLOrEmbedCode = (videoIdOrUrlOrEmbedCode, nodeType) => {
 	videoIdOrUrlOrEmbedCode = videoIdOrUrlOrEmbedCode.trim()
 
 	let videoId
@@ -61,12 +63,22 @@ const parseYouTubeURL = videoIdOrUrlOrEmbedCode => {
 		videoIdOrUrlOrEmbedCode = document.location.protocol + videoIdOrUrlOrEmbedCode
 	}
 
-	// Try to parse as a URL
+	// Try to parse as a URL (IFrame checks should stop here)
 	try {
 		url = new URL(videoIdOrUrlOrEmbedCode)
+		if (
+			nodeType === IFRAME_NODE &&
+			url &&
+			(url.protocol === 'http:' || url.protocol === 'https:')
+		) {
+			return url
+		} else if (nodeType === IFRAME_NODE) {
+			return false
+		}
 	} catch (e) {
 		// Assume the user may have pasted a video ID
 		videoId = videoIdOrUrlOrEmbedCode
+		if (nodeType === IFRAME_NODE) return false
 	}
 
 	if (url) {
@@ -105,4 +117,4 @@ const parseYouTubeURL = videoIdOrUrlOrEmbedCode => {
 	}
 }
 
-export { parseYouTubeURL, getStandardizedURLFromVideoId }
+export { parseURLOrEmbedCode, getStandardizedURLFromVideoId }
diff --git a/packages/app/obojobo-document-engine/src/scss/_includes.scss b/packages/app/obojobo-document-engine/src/scss/_includes.scss
index 4ff4afa9cf..d3e1c5cf4b 100644
--- a/packages/app/obojobo-document-engine/src/scss/_includes.scss
+++ b/packages/app/obojobo-document-engine/src/scss/_includes.scss
@@ -1,6 +1,7 @@
 $color-action: #6714bd;
 $color-button-bg: lighten($color-action, 9%);
 $color-action-minor: desaturate(lighten($color-action, 30%), 40%);
+$color-action-hover: #f7e9f5;
 $color-error: #990000;
 $color-dangerous: #d40000;
 $color-dangerous-minor: desaturate($color-dangerous, 20%);
@@ -27,6 +28,8 @@ $color-reward: #ffe65d;
 $color-reward-text: #947d00;
 $color-obojobo-blue: #0d4fa7;
 $color-preview: #af1b5c;
+$color-neutral: #f3f3f3;
+$color-neutral-text: #b4b3b4;
 
 $box-shadow-focus: 0 0 3px 3px $color-browser-focus;
 $box-shadow-overlay: 0 2px 2px $color-shadow;
diff --git a/packages/obonode/obojobo-chunks-iframe/__snapshots__/adapter.test.js.snap b/packages/obonode/obojobo-chunks-iframe/__snapshots__/adapter.test.js.snap
index ded5b98620..8cca1d00f2 100644
--- a/packages/obonode/obojobo-chunks-iframe/__snapshots__/adapter.test.js.snap
+++ b/packages/obonode/obojobo-chunks-iframe/__snapshots__/adapter.test.js.snap
@@ -3,10 +3,11 @@
 exports[`IFrame adapter construct builds without attributes 1`] = `
 Object {
   "autoload": false,
-  "border": false,
+  "contentType": "media",
   "controls": Array [
     "reload",
   ],
+  "controlsChanged": false,
   "fit": "scale",
   "height": null,
   "initialZoom": 1,
@@ -22,10 +23,11 @@ exports[`IFrame adapter toJSON builds a JSON representation 1`] = `
 Object {
   "content": Object {
     "autoload": false,
-    "border": false,
+    "contentType": "media",
     "controls": Array [
       "reload",
     ],
+    "controlsChanged": false,
     "fit": "scale",
     "height": null,
     "initialZoom": 1,
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
new file mode 100644
index 0000000000..ef93df790c
--- /dev/null
+++ b/packages/obonode/obojobo-chunks-iframe/__snapshots__/edit-iframe-modal.test.js.snap
@@ -0,0 +1,8896 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EditIframeModal EditIFrameModal changes hover and click states as expected 1`] = `
+<div
+  className="obojobo-draft--components--modal--simple-dialog"
+>
+  <div
+    className="obojobo-draft--components--modal--dialog "
+    style={null}
+  >
+    <div
+      aria-atomic="true"
+      aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
+      className="obojobo-draft--components--modal--modal"
+      role="dialog"
+      tabIndex="-1"
+    >
+      <input
+        aria-label="Start of dialog"
+        className="first-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+      <div
+        className="content"
+        id="obojobo-draft--components--modal--modal--content"
+      >
+        <h1
+          className="heading"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          Edit Embedded IFrame
+        </h1>
+        <div
+          className="dialog-content"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          <div
+            className="edit-iframe-modal"
+          >
+            <header>
+              <label
+                htmlFor="src-input"
+              >
+                Source:
+              </label>
+              <div>
+                <input
+                  disabled={true}
+                  id="src-input"
+                  value=""
+                />
+                <button
+                  onClick={[Function]}
+                >
+                  Change...
+                </button>
+              </div>
+            </header>
+            <div
+              className="content-type"
+            >
+              <div
+                className="content-type-options-container"
+              >
+                <label
+                  htmlFor="content-type-options"
+                  id="content-type-options-label"
+                >
+                  Content type:
+                </label>
+                <div
+                  id="content-type-options"
+                >
+                  <label
+                    htmlFor="video-or-media"
+                  >
+                    <input
+                      checked={true}
+                      id="video-or-media"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="media"
+                    />
+                    <div>
+                      <div
+                        className="video-or-media-icon"
+                      />
+                      <span>
+                        Video or other media
+                      </span>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="embedded-webpage"
+                  >
+                    <input
+                      checked={false}
+                      id="embedded-webpage"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="webpage"
+                    />
+                    <div>
+                      <div
+                        className="embedded-webpage-icon"
+                      />
+                      <span>
+                        Embedded webpage
+                      </span>
+                    </div>
+                  </label>
+                </div>
+              </div>
+              <small>
+                This helps determine how the embedded content is best displayed
+              </small>
+            </div>
+            <p
+              className="title"
+            >
+              Options
+            </p>
+            <div
+              className="sizing"
+            >
+              <label
+                htmlFor="sizing-options-container"
+              >
+                Sizing
+              </label>
+              <div
+                id="sizing-options-container"
+              >
+                <div
+                  className="sizing-options"
+                >
+                  <label
+                    htmlFor="max-width"
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "backgroundColor": "#e5d9e3",
+                        "color": "#6714bd",
+                      }
+                    }
+                  >
+                    <input
+                      checked={false}
+                      id="max-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="max-width"
+                    />
+                    <div
+                      className="icon max-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - full width
+                      </p>
+                      <p>
+                        Grows up to the largest size (wider thant text)
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="text-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={true}
+                      id="text-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="text-width"
+                    />
+                    <div
+                      className="icon text-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - text width
+                      </p>
+                      <p>
+                        Grows up to the same width as the text
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="fixed-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="fixed-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="fixed"
+                    />
+                    <div
+                      className="icon fixed-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Fixed size
+                      </p>
+                      <p>
+                        Shows at set pixel dimensions
+                      </p>
+                    </div>
+                  </label>
+                </div>
+                <button
+                  onClick={[Function]}
+                >
+                  <span>
+                    Edit dimensions
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              className="loading-container"
+            >
+              <label
+                htmlFor="loading-select"
+              >
+                Loading:
+              </label>
+              <div
+                id="loading-select"
+              >
+                <select
+                  onChange={[Function]}
+                  value={false}
+                >
+                  <option
+                    value={false}
+                  >
+                    Load when student clicks IFrame
+                  </option>
+                  <option
+                    value={true}
+                  >
+                    Load right away (Not recommended)
+                  </option>
+                </select>
+              </div>
+            </div>
+            <div
+              className="title-container"
+            >
+              <label
+                htmlFor="title-input"
+              >
+                Title:
+              </label>
+              <div
+                id="title-input"
+              >
+                <input
+                  onChange={[Function]}
+                  placeholder="E.g.: The difference between speed and velocity"
+                  type="text"
+                  value=""
+                />
+                <small>
+                  This will be shown before the IFrame is loaded
+                </small>
+              </div>
+            </div>
+            <div
+              className="advanced-options-container"
+            >
+              <button
+                className="button-advanced-options"
+                onClick={[Function]}
+              >
+                <span>
+                  Show all options (advanced)
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div
+          className="controls"
+        >
+          <div
+            className="obojobo-draft--components--button alt-action is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[MockFunction]}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
+          <div
+            className="obojobo-draft--components--button is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+      <input
+        aria-label="End of dialog"
+        className="last-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EditIframeModal EditIFrameModal changes hover and click states as expected 2`] = `
+<div
+  className="obojobo-draft--components--modal--simple-dialog"
+>
+  <div
+    className="obojobo-draft--components--modal--dialog "
+    style={null}
+  >
+    <div
+      aria-atomic="true"
+      aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
+      className="obojobo-draft--components--modal--modal"
+      role="dialog"
+      tabIndex="-1"
+    >
+      <input
+        aria-label="Start of dialog"
+        className="first-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+      <div
+        className="content"
+        id="obojobo-draft--components--modal--modal--content"
+      >
+        <h1
+          className="heading"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          Edit Embedded IFrame
+        </h1>
+        <div
+          className="dialog-content"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          <div
+            className="edit-iframe-modal"
+          >
+            <header>
+              <label
+                htmlFor="src-input"
+              >
+                Source:
+              </label>
+              <div>
+                <input
+                  disabled={true}
+                  id="src-input"
+                  value=""
+                />
+                <button
+                  onClick={[Function]}
+                >
+                  Change...
+                </button>
+              </div>
+            </header>
+            <div
+              className="content-type"
+            >
+              <div
+                className="content-type-options-container"
+              >
+                <label
+                  htmlFor="content-type-options"
+                  id="content-type-options-label"
+                >
+                  Content type:
+                </label>
+                <div
+                  id="content-type-options"
+                >
+                  <label
+                    htmlFor="video-or-media"
+                  >
+                    <input
+                      checked={true}
+                      id="video-or-media"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="media"
+                    />
+                    <div>
+                      <div
+                        className="video-or-media-icon"
+                      />
+                      <span>
+                        Video or other media
+                      </span>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="embedded-webpage"
+                  >
+                    <input
+                      checked={false}
+                      id="embedded-webpage"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="webpage"
+                    />
+                    <div>
+                      <div
+                        className="embedded-webpage-icon"
+                      />
+                      <span>
+                        Embedded webpage
+                      </span>
+                    </div>
+                  </label>
+                </div>
+              </div>
+              <small>
+                This helps determine how the embedded content is best displayed
+              </small>
+            </div>
+            <p
+              className="title"
+            >
+              Options
+            </p>
+            <div
+              className="sizing"
+            >
+              <label
+                htmlFor="sizing-options-container"
+              >
+                Sizing
+              </label>
+              <div
+                id="sizing-options-container"
+              >
+                <div
+                  className="sizing-options"
+                >
+                  <label
+                    htmlFor="max-width"
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "backgroundColor": "#e5d9e3",
+                        "color": "#6714bd",
+                      }
+                    }
+                  >
+                    <input
+                      checked={false}
+                      id="max-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="max-width"
+                    />
+                    <div
+                      className="icon max-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - full width
+                      </p>
+                      <p>
+                        Grows up to the largest size (wider thant text)
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="text-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={true}
+                      id="text-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="text-width"
+                    />
+                    <div
+                      className="icon text-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - text width
+                      </p>
+                      <p>
+                        Grows up to the same width as the text
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="fixed-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="fixed-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="fixed"
+                    />
+                    <div
+                      className="icon fixed-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Fixed size
+                      </p>
+                      <p>
+                        Shows at set pixel dimensions
+                      </p>
+                    </div>
+                  </label>
+                </div>
+                <button
+                  onClick={[Function]}
+                >
+                  <span>
+                    Edit dimensions
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              className="loading-container"
+            >
+              <label
+                htmlFor="loading-select"
+              >
+                Loading:
+              </label>
+              <div
+                id="loading-select"
+              >
+                <select
+                  onChange={[Function]}
+                  value={false}
+                >
+                  <option
+                    value={false}
+                  >
+                    Load when student clicks IFrame
+                  </option>
+                  <option
+                    value={true}
+                  >
+                    Load right away (Not recommended)
+                  </option>
+                </select>
+              </div>
+            </div>
+            <div
+              className="title-container"
+            >
+              <label
+                htmlFor="title-input"
+              >
+                Title:
+              </label>
+              <div
+                id="title-input"
+              >
+                <input
+                  onChange={[Function]}
+                  placeholder="E.g.: The difference between speed and velocity"
+                  type="text"
+                  value=""
+                />
+                <small>
+                  This will be shown before the IFrame is loaded
+                </small>
+              </div>
+            </div>
+            <div
+              className="advanced-options-container"
+            >
+              <button
+                className="button-advanced-options"
+                onClick={[Function]}
+              >
+                <span>
+                  Show all options (advanced)
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div
+          className="controls"
+        >
+          <div
+            className="obojobo-draft--components--button alt-action is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[MockFunction]}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
+          <div
+            className="obojobo-draft--components--button is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+      <input
+        aria-label="End of dialog"
+        className="last-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EditIframeModal EditIFrameModal changes hover and click states as expected 3`] = `
+<div
+  className="obojobo-draft--components--modal--simple-dialog"
+>
+  <div
+    className="obojobo-draft--components--modal--dialog "
+    style={null}
+  >
+    <div
+      aria-atomic="true"
+      aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
+      className="obojobo-draft--components--modal--modal"
+      role="dialog"
+      tabIndex="-1"
+    >
+      <input
+        aria-label="Start of dialog"
+        className="first-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+      <div
+        className="content"
+        id="obojobo-draft--components--modal--modal--content"
+      >
+        <h1
+          className="heading"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          Edit Embedded IFrame
+        </h1>
+        <div
+          className="dialog-content"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          <div
+            className="edit-iframe-modal"
+          >
+            <header>
+              <label
+                htmlFor="src-input"
+              >
+                Source:
+              </label>
+              <div>
+                <input
+                  disabled={true}
+                  id="src-input"
+                  value=""
+                />
+                <button
+                  onClick={[Function]}
+                >
+                  Change...
+                </button>
+              </div>
+            </header>
+            <div
+              className="content-type"
+            >
+              <div
+                className="content-type-options-container"
+              >
+                <label
+                  htmlFor="content-type-options"
+                  id="content-type-options-label"
+                >
+                  Content type:
+                </label>
+                <div
+                  id="content-type-options"
+                >
+                  <label
+                    htmlFor="video-or-media"
+                  >
+                    <input
+                      checked={true}
+                      id="video-or-media"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="media"
+                    />
+                    <div>
+                      <div
+                        className="video-or-media-icon"
+                      />
+                      <span>
+                        Video or other media
+                      </span>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="embedded-webpage"
+                  >
+                    <input
+                      checked={false}
+                      id="embedded-webpage"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="webpage"
+                    />
+                    <div>
+                      <div
+                        className="embedded-webpage-icon"
+                      />
+                      <span>
+                        Embedded webpage
+                      </span>
+                    </div>
+                  </label>
+                </div>
+              </div>
+              <small>
+                This helps determine how the embedded content is best displayed
+              </small>
+            </div>
+            <p
+              className="title"
+            >
+              Options
+            </p>
+            <div
+              className="sizing"
+            >
+              <label
+                htmlFor="sizing-options-container"
+              >
+                Sizing
+              </label>
+              <div
+                id="sizing-options-container"
+              >
+                <div
+                  className="sizing-options"
+                >
+                  <label
+                    htmlFor="max-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="max-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="max-width"
+                    />
+                    <div
+                      className="icon max-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - full width
+                      </p>
+                      <p>
+                        Grows up to the largest size (wider thant text)
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="text-width"
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "backgroundColor": "#e5d9e3",
+                        "color": "#6714bd",
+                      }
+                    }
+                  >
+                    <input
+                      checked={true}
+                      id="text-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="text-width"
+                    />
+                    <div
+                      className="icon text-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - text width
+                      </p>
+                      <p>
+                        Grows up to the same width as the text
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="fixed-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="fixed-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="fixed"
+                    />
+                    <div
+                      className="icon fixed-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Fixed size
+                      </p>
+                      <p>
+                        Shows at set pixel dimensions
+                      </p>
+                    </div>
+                  </label>
+                </div>
+                <button
+                  onClick={[Function]}
+                >
+                  <span>
+                    Edit dimensions
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              className="loading-container"
+            >
+              <label
+                htmlFor="loading-select"
+              >
+                Loading:
+              </label>
+              <div
+                id="loading-select"
+              >
+                <select
+                  onChange={[Function]}
+                  value={false}
+                >
+                  <option
+                    value={false}
+                  >
+                    Load when student clicks IFrame
+                  </option>
+                  <option
+                    value={true}
+                  >
+                    Load right away (Not recommended)
+                  </option>
+                </select>
+              </div>
+            </div>
+            <div
+              className="title-container"
+            >
+              <label
+                htmlFor="title-input"
+              >
+                Title:
+              </label>
+              <div
+                id="title-input"
+              >
+                <input
+                  onChange={[Function]}
+                  placeholder="E.g.: The difference between speed and velocity"
+                  type="text"
+                  value=""
+                />
+                <small>
+                  This will be shown before the IFrame is loaded
+                </small>
+              </div>
+            </div>
+            <div
+              className="advanced-options-container"
+            >
+              <button
+                className="button-advanced-options"
+                onClick={[Function]}
+              >
+                <span>
+                  Show all options (advanced)
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div
+          className="controls"
+        >
+          <div
+            className="obojobo-draft--components--button alt-action is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[MockFunction]}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
+          <div
+            className="obojobo-draft--components--button is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+      <input
+        aria-label="End of dialog"
+        className="last-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EditIframeModal EditIFrameModal changes hover and click states as expected 4`] = `
+<div
+  className="obojobo-draft--components--modal--simple-dialog"
+>
+  <div
+    className="obojobo-draft--components--modal--dialog "
+    style={null}
+  >
+    <div
+      aria-atomic="true"
+      aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
+      className="obojobo-draft--components--modal--modal"
+      role="dialog"
+      tabIndex="-1"
+    >
+      <input
+        aria-label="Start of dialog"
+        className="first-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+      <div
+        className="content"
+        id="obojobo-draft--components--modal--modal--content"
+      >
+        <h1
+          className="heading"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          Edit Embedded IFrame
+        </h1>
+        <div
+          className="dialog-content"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          <div
+            className="edit-iframe-modal"
+          >
+            <header>
+              <label
+                htmlFor="src-input"
+              >
+                Source:
+              </label>
+              <div>
+                <input
+                  disabled={true}
+                  id="src-input"
+                  value=""
+                />
+                <button
+                  onClick={[Function]}
+                >
+                  Change...
+                </button>
+              </div>
+            </header>
+            <div
+              className="content-type"
+            >
+              <div
+                className="content-type-options-container"
+              >
+                <label
+                  htmlFor="content-type-options"
+                  id="content-type-options-label"
+                >
+                  Content type:
+                </label>
+                <div
+                  id="content-type-options"
+                >
+                  <label
+                    htmlFor="video-or-media"
+                  >
+                    <input
+                      checked={true}
+                      id="video-or-media"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="media"
+                    />
+                    <div>
+                      <div
+                        className="video-or-media-icon"
+                      />
+                      <span>
+                        Video or other media
+                      </span>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="embedded-webpage"
+                  >
+                    <input
+                      checked={false}
+                      id="embedded-webpage"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="webpage"
+                    />
+                    <div>
+                      <div
+                        className="embedded-webpage-icon"
+                      />
+                      <span>
+                        Embedded webpage
+                      </span>
+                    </div>
+                  </label>
+                </div>
+              </div>
+              <small>
+                This helps determine how the embedded content is best displayed
+              </small>
+            </div>
+            <p
+              className="title"
+            >
+              Options
+            </p>
+            <div
+              className="sizing"
+            >
+              <label
+                htmlFor="sizing-options-container"
+              >
+                Sizing
+              </label>
+              <div
+                id="sizing-options-container"
+              >
+                <div
+                  className="sizing-options"
+                >
+                  <label
+                    htmlFor="max-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="max-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="max-width"
+                    />
+                    <div
+                      className="icon max-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - full width
+                      </p>
+                      <p>
+                        Grows up to the largest size (wider thant text)
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="text-width"
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "backgroundColor": "#e5d9e3",
+                        "color": "#6714bd",
+                      }
+                    }
+                  >
+                    <input
+                      checked={true}
+                      id="text-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="text-width"
+                    />
+                    <div
+                      className="icon text-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - text width
+                      </p>
+                      <p>
+                        Grows up to the same width as the text
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="fixed-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="fixed-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="fixed"
+                    />
+                    <div
+                      className="icon fixed-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Fixed size
+                      </p>
+                      <p>
+                        Shows at set pixel dimensions
+                      </p>
+                    </div>
+                  </label>
+                </div>
+                <button
+                  onClick={[Function]}
+                >
+                  <span>
+                    Edit dimensions
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              className="loading-container"
+            >
+              <label
+                htmlFor="loading-select"
+              >
+                Loading:
+              </label>
+              <div
+                id="loading-select"
+              >
+                <select
+                  onChange={[Function]}
+                  value={false}
+                >
+                  <option
+                    value={false}
+                  >
+                    Load when student clicks IFrame
+                  </option>
+                  <option
+                    value={true}
+                  >
+                    Load right away (Not recommended)
+                  </option>
+                </select>
+              </div>
+            </div>
+            <div
+              className="title-container"
+            >
+              <label
+                htmlFor="title-input"
+              >
+                Title:
+              </label>
+              <div
+                id="title-input"
+              >
+                <input
+                  onChange={[Function]}
+                  placeholder="E.g.: The difference between speed and velocity"
+                  type="text"
+                  value=""
+                />
+                <small>
+                  This will be shown before the IFrame is loaded
+                </small>
+              </div>
+            </div>
+            <div
+              className="advanced-options-container"
+            >
+              <button
+                className="button-advanced-options"
+                onClick={[Function]}
+              >
+                <span>
+                  Show all options (advanced)
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div
+          className="controls"
+        >
+          <div
+            className="obojobo-draft--components--button alt-action is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[MockFunction]}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
+          <div
+            className="obojobo-draft--components--button is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+      <input
+        aria-label="End of dialog"
+        className="last-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EditIframeModal EditIFrameModal changes hover and click states as expected 5`] = `
+<div
+  className="obojobo-draft--components--modal--simple-dialog"
+>
+  <div
+    className="obojobo-draft--components--modal--dialog "
+    style={null}
+  >
+    <div
+      aria-atomic="true"
+      aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
+      className="obojobo-draft--components--modal--modal"
+      role="dialog"
+      tabIndex="-1"
+    >
+      <input
+        aria-label="Start of dialog"
+        className="first-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+      <div
+        className="content"
+        id="obojobo-draft--components--modal--modal--content"
+      >
+        <h1
+          className="heading"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          Edit Embedded IFrame
+        </h1>
+        <div
+          className="dialog-content"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          <div
+            className="edit-iframe-modal"
+          >
+            <header>
+              <label
+                htmlFor="src-input"
+              >
+                Source:
+              </label>
+              <div>
+                <input
+                  disabled={true}
+                  id="src-input"
+                  value=""
+                />
+                <button
+                  onClick={[Function]}
+                >
+                  Change...
+                </button>
+              </div>
+            </header>
+            <div
+              className="content-type"
+            >
+              <div
+                className="content-type-options-container"
+              >
+                <label
+                  htmlFor="content-type-options"
+                  id="content-type-options-label"
+                >
+                  Content type:
+                </label>
+                <div
+                  id="content-type-options"
+                >
+                  <label
+                    htmlFor="video-or-media"
+                  >
+                    <input
+                      checked={true}
+                      id="video-or-media"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="media"
+                    />
+                    <div>
+                      <div
+                        className="video-or-media-icon"
+                      />
+                      <span>
+                        Video or other media
+                      </span>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="embedded-webpage"
+                  >
+                    <input
+                      checked={false}
+                      id="embedded-webpage"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="webpage"
+                    />
+                    <div>
+                      <div
+                        className="embedded-webpage-icon"
+                      />
+                      <span>
+                        Embedded webpage
+                      </span>
+                    </div>
+                  </label>
+                </div>
+              </div>
+              <small>
+                This helps determine how the embedded content is best displayed
+              </small>
+            </div>
+            <p
+              className="title"
+            >
+              Options
+            </p>
+            <div
+              className="sizing"
+            >
+              <label
+                htmlFor="sizing-options-container"
+              >
+                Sizing
+              </label>
+              <div
+                id="sizing-options-container"
+              >
+                <div
+                  className="sizing-options"
+                >
+                  <label
+                    htmlFor="max-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="max-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="max-width"
+                    />
+                    <div
+                      className="icon max-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - full width
+                      </p>
+                      <p>
+                        Grows up to the largest size (wider thant text)
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="text-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={true}
+                      id="text-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="text-width"
+                    />
+                    <div
+                      className="icon text-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - text width
+                      </p>
+                      <p>
+                        Grows up to the same width as the text
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="fixed-width"
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "backgroundColor": "#e5d9e3",
+                        "color": "#6714bd",
+                      }
+                    }
+                  >
+                    <input
+                      checked={false}
+                      id="fixed-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="fixed"
+                    />
+                    <div
+                      className="icon fixed-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Fixed size
+                      </p>
+                      <p>
+                        Shows at set pixel dimensions
+                      </p>
+                    </div>
+                  </label>
+                </div>
+                <button
+                  onClick={[Function]}
+                >
+                  <span>
+                    Edit dimensions
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              className="loading-container"
+            >
+              <label
+                htmlFor="loading-select"
+              >
+                Loading:
+              </label>
+              <div
+                id="loading-select"
+              >
+                <select
+                  onChange={[Function]}
+                  value={false}
+                >
+                  <option
+                    value={false}
+                  >
+                    Load when student clicks IFrame
+                  </option>
+                  <option
+                    value={true}
+                  >
+                    Load right away (Not recommended)
+                  </option>
+                </select>
+              </div>
+            </div>
+            <div
+              className="title-container"
+            >
+              <label
+                htmlFor="title-input"
+              >
+                Title:
+              </label>
+              <div
+                id="title-input"
+              >
+                <input
+                  onChange={[Function]}
+                  placeholder="E.g.: The difference between speed and velocity"
+                  type="text"
+                  value=""
+                />
+                <small>
+                  This will be shown before the IFrame is loaded
+                </small>
+              </div>
+            </div>
+            <div
+              className="advanced-options-container"
+            >
+              <button
+                className="button-advanced-options"
+                onClick={[Function]}
+              >
+                <span>
+                  Show all options (advanced)
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div
+          className="controls"
+        >
+          <div
+            className="obojobo-draft--components--button alt-action is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[MockFunction]}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
+          <div
+            className="obojobo-draft--components--button is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+      <input
+        aria-label="End of dialog"
+        className="last-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EditIframeModal EditIFrameModal changes hover and click states as expected 6`] = `
+<div
+  className="obojobo-draft--components--modal--simple-dialog"
+>
+  <div
+    className="obojobo-draft--components--modal--dialog "
+    style={null}
+  >
+    <div
+      aria-atomic="true"
+      aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
+      className="obojobo-draft--components--modal--modal"
+      role="dialog"
+      tabIndex="-1"
+    >
+      <input
+        aria-label="Start of dialog"
+        className="first-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+      <div
+        className="content"
+        id="obojobo-draft--components--modal--modal--content"
+      >
+        <h1
+          className="heading"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          Edit Embedded IFrame
+        </h1>
+        <div
+          className="dialog-content"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          <div
+            className="edit-iframe-modal"
+          >
+            <header>
+              <label
+                htmlFor="src-input"
+              >
+                Source:
+              </label>
+              <div>
+                <input
+                  disabled={true}
+                  id="src-input"
+                  value=""
+                />
+                <button
+                  onClick={[Function]}
+                >
+                  Change...
+                </button>
+              </div>
+            </header>
+            <div
+              className="content-type"
+            >
+              <div
+                className="content-type-options-container"
+              >
+                <label
+                  htmlFor="content-type-options"
+                  id="content-type-options-label"
+                >
+                  Content type:
+                </label>
+                <div
+                  id="content-type-options"
+                >
+                  <label
+                    htmlFor="video-or-media"
+                  >
+                    <input
+                      checked={true}
+                      id="video-or-media"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="media"
+                    />
+                    <div>
+                      <div
+                        className="video-or-media-icon"
+                      />
+                      <span>
+                        Video or other media
+                      </span>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="embedded-webpage"
+                  >
+                    <input
+                      checked={false}
+                      id="embedded-webpage"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="webpage"
+                    />
+                    <div>
+                      <div
+                        className="embedded-webpage-icon"
+                      />
+                      <span>
+                        Embedded webpage
+                      </span>
+                    </div>
+                  </label>
+                </div>
+              </div>
+              <small>
+                This helps determine how the embedded content is best displayed
+              </small>
+            </div>
+            <p
+              className="title"
+            >
+              Options
+            </p>
+            <div
+              className="sizing"
+            >
+              <label
+                htmlFor="sizing-options-container"
+              >
+                Sizing
+              </label>
+              <div
+                id="sizing-options-container"
+              >
+                <div
+                  className="sizing-options"
+                >
+                  <label
+                    htmlFor="max-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="max-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="max-width"
+                    />
+                    <div
+                      className="icon max-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - full width
+                      </p>
+                      <p>
+                        Grows up to the largest size (wider thant text)
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="text-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={true}
+                      id="text-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="text-width"
+                    />
+                    <div
+                      className="icon text-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - text width
+                      </p>
+                      <p>
+                        Grows up to the same width as the text
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="fixed-width"
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "backgroundColor": "#e5d9e3",
+                        "color": "#6714bd",
+                      }
+                    }
+                  >
+                    <input
+                      checked={false}
+                      id="fixed-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="fixed"
+                    />
+                    <div
+                      className="icon fixed-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Fixed size
+                      </p>
+                      <p>
+                        Shows at set pixel dimensions
+                      </p>
+                    </div>
+                  </label>
+                </div>
+                <button
+                  onClick={[Function]}
+                >
+                  <span>
+                    Edit dimensions
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              className="loading-container"
+            >
+              <label
+                htmlFor="loading-select"
+              >
+                Loading:
+              </label>
+              <div
+                id="loading-select"
+              >
+                <select
+                  onChange={[Function]}
+                  value={false}
+                >
+                  <option
+                    value={false}
+                  >
+                    Load when student clicks IFrame
+                  </option>
+                  <option
+                    value={true}
+                  >
+                    Load right away (Not recommended)
+                  </option>
+                </select>
+              </div>
+            </div>
+            <div
+              className="title-container"
+            >
+              <label
+                htmlFor="title-input"
+              >
+                Title:
+              </label>
+              <div
+                id="title-input"
+              >
+                <input
+                  onChange={[Function]}
+                  placeholder="E.g.: The difference between speed and velocity"
+                  type="text"
+                  value=""
+                />
+                <small>
+                  This will be shown before the IFrame is loaded
+                </small>
+              </div>
+            </div>
+            <div
+              className="advanced-options-container"
+            >
+              <button
+                className="button-advanced-options"
+                onClick={[Function]}
+              >
+                <span>
+                  Show all options (advanced)
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div
+          className="controls"
+        >
+          <div
+            className="obojobo-draft--components--button alt-action is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[MockFunction]}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
+          <div
+            className="obojobo-draft--components--button is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+      <input
+        aria-label="End of dialog"
+        className="last-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EditIframeModal EditIFrameModal component changes New Window 1`] = `
+<div
+  className="obojobo-draft--components--modal--simple-dialog"
+>
+  <div
+    className="obojobo-draft--components--modal--dialog "
+    style={null}
+  >
+    <div
+      aria-atomic="true"
+      aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
+      className="obojobo-draft--components--modal--modal"
+      role="dialog"
+      tabIndex="-1"
+    >
+      <input
+        aria-label="Start of dialog"
+        className="first-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+      <div
+        className="content"
+        id="obojobo-draft--components--modal--modal--content"
+      >
+        <h1
+          className="heading"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          Edit Embedded IFrame
+        </h1>
+        <div
+          className="dialog-content"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          <div
+            className="edit-iframe-modal"
+          >
+            <header>
+              <label
+                htmlFor="src-input"
+              >
+                Source:
+              </label>
+              <div>
+                <input
+                  disabled={true}
+                  id="src-input"
+                  value=""
+                />
+                <button
+                  onClick={[Function]}
+                >
+                  Change...
+                </button>
+              </div>
+            </header>
+            <div
+              className="content-type"
+            >
+              <div
+                className="content-type-options-container"
+              >
+                <label
+                  htmlFor="content-type-options"
+                  id="content-type-options-label"
+                >
+                  Content type:
+                </label>
+                <div
+                  id="content-type-options"
+                >
+                  <label
+                    htmlFor="video-or-media"
+                  >
+                    <input
+                      checked={true}
+                      id="video-or-media"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="media"
+                    />
+                    <div>
+                      <div
+                        className="video-or-media-icon"
+                      />
+                      <span>
+                        Video or other media
+                      </span>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="embedded-webpage"
+                  >
+                    <input
+                      checked={false}
+                      id="embedded-webpage"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="webpage"
+                    />
+                    <div>
+                      <div
+                        className="embedded-webpage-icon"
+                      />
+                      <span>
+                        Embedded webpage
+                      </span>
+                    </div>
+                  </label>
+                </div>
+              </div>
+              <small>
+                This helps determine how the embedded content is best displayed
+              </small>
+            </div>
+            <p
+              className="title"
+            >
+              Options
+            </p>
+            <div
+              className="sizing"
+            >
+              <label
+                htmlFor="sizing-options-container"
+              >
+                Sizing
+              </label>
+              <div
+                id="sizing-options-container"
+              >
+                <div
+                  className="sizing-options"
+                >
+                  <label
+                    htmlFor="max-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="max-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="max-width"
+                    />
+                    <div
+                      className="icon max-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - full width
+                      </p>
+                      <p>
+                        Grows up to the largest size (wider thant text)
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="text-width"
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "backgroundColor": "#e5d9e3",
+                        "color": "#6714bd",
+                      }
+                    }
+                  >
+                    <input
+                      checked={true}
+                      id="text-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="text-width"
+                    />
+                    <div
+                      className="icon text-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - text width
+                      </p>
+                      <p>
+                        Grows up to the same width as the text
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="fixed-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="fixed-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="fixed"
+                    />
+                    <div
+                      className="icon fixed-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Fixed size
+                      </p>
+                      <p>
+                        Shows at set pixel dimensions
+                      </p>
+                    </div>
+                  </label>
+                </div>
+                <button
+                  onClick={[Function]}
+                >
+                  <span>
+                    Edit dimensions
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              className="loading-container"
+            >
+              <label
+                htmlFor="loading-select"
+              >
+                Loading:
+              </label>
+              <div
+                id="loading-select"
+              >
+                <select
+                  onChange={[Function]}
+                  value={false}
+                >
+                  <option
+                    value={false}
+                  >
+                    Load when student clicks IFrame
+                  </option>
+                  <option
+                    value={true}
+                  >
+                    Load right away (Not recommended)
+                  </option>
+                </select>
+              </div>
+            </div>
+            <div
+              className="title-container"
+            >
+              <label
+                htmlFor="title-input"
+              >
+                Title:
+              </label>
+              <div
+                id="title-input"
+              >
+                <input
+                  onChange={[Function]}
+                  placeholder="E.g.: The difference between speed and velocity"
+                  type="text"
+                  value=""
+                />
+                <small>
+                  This will be shown before the IFrame is loaded
+                </small>
+              </div>
+            </div>
+            <div
+              className="advanced-options-container"
+            >
+              <button
+                className="button-advanced-options"
+                onClick={[Function]}
+              >
+                <span>
+                  Close advanced options
+                </span>
+              </button>
+              <div
+                className="advanced-options"
+              >
+                <div
+                  className="fit-container"
+                >
+                  <label
+                    htmlFor="select-fit"
+                  >
+                    Fit:
+                  </label>
+                  <select
+                    id="select-fit"
+                    onChange={[Function]}
+                    value="scale"
+                  >
+                    <option
+                      value="scale"
+                    >
+                      Scale
+                    </option>
+                    <option
+                      value="scroll"
+                    >
+                      Scroll
+                    </option>
+                  </select>
+                </div>
+                <div
+                  className="initial-zoom-container"
+                >
+                  <label
+                    htmlFor="initial-zoom"
+                  >
+                    Initial 
+                    <br />
+                     Zoom:
+                  </label>
+                  <input
+                    id="initial-zoom"
+                    max="1000"
+                    min="0.01"
+                    onChange={[Function]}
+                    placeholder="Decimal Value"
+                    step=".01"
+                    type="number"
+                    value={1}
+                  />
+                </div>
+                <p
+                  className="title"
+                >
+                  Controls
+                </p>
+                <div
+                  className="controls"
+                >
+                  <div
+                    className="border-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Border
+                        </span>
+                        <br />
+                        <small>
+                          Adds a border around your embedded IFrame
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="reload-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Reload
+                        </span>
+                        <br />
+                        <small>
+                          Adds a control option to reload the contents of the IFrame
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={true}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="new-window-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          New Window
+                        </span>
+                        <br />
+                        <small>
+                          Allows the IFrame to be opened in a new window
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="zoom-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Zoom
+                        </span>
+                        <br />
+                        <small>
+                          Allows students to zoom in and out on the IFrame contents
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="controls"
+        >
+          <div
+            className="obojobo-draft--components--button alt-action is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
+          <div
+            className="obojobo-draft--components--button is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+      <input
+        aria-label="End of dialog"
+        className="last-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EditIframeModal EditIFrameModal component changes New Window 2`] = `
+<div
+  className="obojobo-draft--components--modal--simple-dialog"
+>
+  <div
+    className="obojobo-draft--components--modal--dialog "
+    style={null}
+  >
+    <div
+      aria-atomic="true"
+      aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
+      className="obojobo-draft--components--modal--modal"
+      role="dialog"
+      tabIndex="-1"
+    >
+      <input
+        aria-label="Start of dialog"
+        className="first-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+      <div
+        className="content"
+        id="obojobo-draft--components--modal--modal--content"
+      >
+        <h1
+          className="heading"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          Edit Embedded IFrame
+        </h1>
+        <div
+          className="dialog-content"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          <div
+            className="edit-iframe-modal"
+          >
+            <header>
+              <label
+                htmlFor="src-input"
+              >
+                Source:
+              </label>
+              <div>
+                <input
+                  disabled={true}
+                  id="src-input"
+                  value=""
+                />
+                <button
+                  onClick={[Function]}
+                >
+                  Change...
+                </button>
+              </div>
+            </header>
+            <div
+              className="content-type"
+            >
+              <div
+                className="content-type-options-container"
+              >
+                <label
+                  htmlFor="content-type-options"
+                  id="content-type-options-label"
+                >
+                  Content type:
+                </label>
+                <div
+                  id="content-type-options"
+                >
+                  <label
+                    htmlFor="video-or-media"
+                  >
+                    <input
+                      checked={true}
+                      id="video-or-media"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="media"
+                    />
+                    <div>
+                      <div
+                        className="video-or-media-icon"
+                      />
+                      <span>
+                        Video or other media
+                      </span>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="embedded-webpage"
+                  >
+                    <input
+                      checked={false}
+                      id="embedded-webpage"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="webpage"
+                    />
+                    <div>
+                      <div
+                        className="embedded-webpage-icon"
+                      />
+                      <span>
+                        Embedded webpage
+                      </span>
+                    </div>
+                  </label>
+                </div>
+              </div>
+              <small>
+                This helps determine how the embedded content is best displayed
+              </small>
+            </div>
+            <p
+              className="title"
+            >
+              Options
+            </p>
+            <div
+              className="sizing"
+            >
+              <label
+                htmlFor="sizing-options-container"
+              >
+                Sizing
+              </label>
+              <div
+                id="sizing-options-container"
+              >
+                <div
+                  className="sizing-options"
+                >
+                  <label
+                    htmlFor="max-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="max-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="max-width"
+                    />
+                    <div
+                      className="icon max-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - full width
+                      </p>
+                      <p>
+                        Grows up to the largest size (wider thant text)
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="text-width"
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "backgroundColor": "#e5d9e3",
+                        "color": "#6714bd",
+                      }
+                    }
+                  >
+                    <input
+                      checked={true}
+                      id="text-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="text-width"
+                    />
+                    <div
+                      className="icon text-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - text width
+                      </p>
+                      <p>
+                        Grows up to the same width as the text
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="fixed-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="fixed-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="fixed"
+                    />
+                    <div
+                      className="icon fixed-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Fixed size
+                      </p>
+                      <p>
+                        Shows at set pixel dimensions
+                      </p>
+                    </div>
+                  </label>
+                </div>
+                <button
+                  onClick={[Function]}
+                >
+                  <span>
+                    Edit dimensions
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              className="loading-container"
+            >
+              <label
+                htmlFor="loading-select"
+              >
+                Loading:
+              </label>
+              <div
+                id="loading-select"
+              >
+                <select
+                  onChange={[Function]}
+                  value={false}
+                >
+                  <option
+                    value={false}
+                  >
+                    Load when student clicks IFrame
+                  </option>
+                  <option
+                    value={true}
+                  >
+                    Load right away (Not recommended)
+                  </option>
+                </select>
+              </div>
+            </div>
+            <div
+              className="title-container"
+            >
+              <label
+                htmlFor="title-input"
+              >
+                Title:
+              </label>
+              <div
+                id="title-input"
+              >
+                <input
+                  onChange={[Function]}
+                  placeholder="E.g.: The difference between speed and velocity"
+                  type="text"
+                  value=""
+                />
+                <small>
+                  This will be shown before the IFrame is loaded
+                </small>
+              </div>
+            </div>
+            <div
+              className="advanced-options-container"
+            >
+              <button
+                className="button-advanced-options"
+                onClick={[Function]}
+              >
+                <span>
+                  Close advanced options
+                </span>
+              </button>
+              <div
+                className="advanced-options"
+              >
+                <div
+                  className="fit-container"
+                >
+                  <label
+                    htmlFor="select-fit"
+                  >
+                    Fit:
+                  </label>
+                  <select
+                    id="select-fit"
+                    onChange={[Function]}
+                    value="scale"
+                  >
+                    <option
+                      value="scale"
+                    >
+                      Scale
+                    </option>
+                    <option
+                      value="scroll"
+                    >
+                      Scroll
+                    </option>
+                  </select>
+                </div>
+                <div
+                  className="initial-zoom-container"
+                >
+                  <label
+                    htmlFor="initial-zoom"
+                  >
+                    Initial 
+                    <br />
+                     Zoom:
+                  </label>
+                  <input
+                    id="initial-zoom"
+                    max="1000"
+                    min="0.01"
+                    onChange={[Function]}
+                    placeholder="Decimal Value"
+                    step=".01"
+                    type="number"
+                    value={1}
+                  />
+                </div>
+                <p
+                  className="title"
+                >
+                  Controls
+                </p>
+                <div
+                  className="controls"
+                >
+                  <div
+                    className="border-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Border
+                        </span>
+                        <br />
+                        <small>
+                          Adds a border around your embedded IFrame
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="reload-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Reload
+                        </span>
+                        <br />
+                        <small>
+                          Adds a control option to reload the contents of the IFrame
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={true}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="new-window-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          New Window
+                        </span>
+                        <br />
+                        <small>
+                          Allows the IFrame to be opened in a new window
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={true}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="zoom-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Zoom
+                        </span>
+                        <br />
+                        <small>
+                          Allows students to zoom in and out on the IFrame contents
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="controls"
+        >
+          <div
+            className="obojobo-draft--components--button alt-action is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
+          <div
+            className="obojobo-draft--components--button is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+      <input
+        aria-label="End of dialog"
+        className="last-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EditIframeModal EditIFrameModal component changes Reload 1`] = `
+<div
+  className="obojobo-draft--components--modal--simple-dialog"
+>
+  <div
+    className="obojobo-draft--components--modal--dialog "
+    style={null}
+  >
+    <div
+      aria-atomic="true"
+      aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
+      className="obojobo-draft--components--modal--modal"
+      role="dialog"
+      tabIndex="-1"
+    >
+      <input
+        aria-label="Start of dialog"
+        className="first-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+      <div
+        className="content"
+        id="obojobo-draft--components--modal--modal--content"
+      >
+        <h1
+          className="heading"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          Edit Embedded IFrame
+        </h1>
+        <div
+          className="dialog-content"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          <div
+            className="edit-iframe-modal"
+          >
+            <header>
+              <label
+                htmlFor="src-input"
+              >
+                Source:
+              </label>
+              <div>
+                <input
+                  disabled={true}
+                  id="src-input"
+                  value=""
+                />
+                <button
+                  onClick={[Function]}
+                >
+                  Change...
+                </button>
+              </div>
+            </header>
+            <div
+              className="content-type"
+            >
+              <div
+                className="content-type-options-container"
+              >
+                <label
+                  htmlFor="content-type-options"
+                  id="content-type-options-label"
+                >
+                  Content type:
+                </label>
+                <div
+                  id="content-type-options"
+                >
+                  <label
+                    htmlFor="video-or-media"
+                  >
+                    <input
+                      checked={true}
+                      id="video-or-media"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="media"
+                    />
+                    <div>
+                      <div
+                        className="video-or-media-icon"
+                      />
+                      <span>
+                        Video or other media
+                      </span>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="embedded-webpage"
+                  >
+                    <input
+                      checked={false}
+                      id="embedded-webpage"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="webpage"
+                    />
+                    <div>
+                      <div
+                        className="embedded-webpage-icon"
+                      />
+                      <span>
+                        Embedded webpage
+                      </span>
+                    </div>
+                  </label>
+                </div>
+              </div>
+              <small>
+                This helps determine how the embedded content is best displayed
+              </small>
+            </div>
+            <p
+              className="title"
+            >
+              Options
+            </p>
+            <div
+              className="sizing"
+            >
+              <label
+                htmlFor="sizing-options-container"
+              >
+                Sizing
+              </label>
+              <div
+                id="sizing-options-container"
+              >
+                <div
+                  className="sizing-options"
+                >
+                  <label
+                    htmlFor="max-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="max-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="max-width"
+                    />
+                    <div
+                      className="icon max-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - full width
+                      </p>
+                      <p>
+                        Grows up to the largest size (wider thant text)
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="text-width"
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "backgroundColor": "#e5d9e3",
+                        "color": "#6714bd",
+                      }
+                    }
+                  >
+                    <input
+                      checked={true}
+                      id="text-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="text-width"
+                    />
+                    <div
+                      className="icon text-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - text width
+                      </p>
+                      <p>
+                        Grows up to the same width as the text
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="fixed-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="fixed-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="fixed"
+                    />
+                    <div
+                      className="icon fixed-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Fixed size
+                      </p>
+                      <p>
+                        Shows at set pixel dimensions
+                      </p>
+                    </div>
+                  </label>
+                </div>
+                <button
+                  onClick={[Function]}
+                >
+                  <span>
+                    Edit dimensions
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              className="loading-container"
+            >
+              <label
+                htmlFor="loading-select"
+              >
+                Loading:
+              </label>
+              <div
+                id="loading-select"
+              >
+                <select
+                  onChange={[Function]}
+                  value={false}
+                >
+                  <option
+                    value={false}
+                  >
+                    Load when student clicks IFrame
+                  </option>
+                  <option
+                    value={true}
+                  >
+                    Load right away (Not recommended)
+                  </option>
+                </select>
+              </div>
+            </div>
+            <div
+              className="title-container"
+            >
+              <label
+                htmlFor="title-input"
+              >
+                Title:
+              </label>
+              <div
+                id="title-input"
+              >
+                <input
+                  onChange={[Function]}
+                  placeholder="E.g.: The difference between speed and velocity"
+                  type="text"
+                  value=""
+                />
+                <small>
+                  This will be shown before the IFrame is loaded
+                </small>
+              </div>
+            </div>
+            <div
+              className="advanced-options-container"
+            >
+              <button
+                className="button-advanced-options"
+                onClick={[Function]}
+              >
+                <span>
+                  Close advanced options
+                </span>
+              </button>
+              <div
+                className="advanced-options"
+              >
+                <div
+                  className="fit-container"
+                >
+                  <label
+                    htmlFor="select-fit"
+                  >
+                    Fit:
+                  </label>
+                  <select
+                    id="select-fit"
+                    onChange={[Function]}
+                    value="scale"
+                  >
+                    <option
+                      value="scale"
+                    >
+                      Scale
+                    </option>
+                    <option
+                      value="scroll"
+                    >
+                      Scroll
+                    </option>
+                  </select>
+                </div>
+                <div
+                  className="initial-zoom-container"
+                >
+                  <label
+                    htmlFor="initial-zoom"
+                  >
+                    Initial 
+                    <br />
+                     Zoom:
+                  </label>
+                  <input
+                    id="initial-zoom"
+                    max="1000"
+                    min="0.01"
+                    onChange={[Function]}
+                    placeholder="Decimal Value"
+                    step=".01"
+                    type="number"
+                    value={1}
+                  />
+                </div>
+                <p
+                  className="title"
+                >
+                  Controls
+                </p>
+                <div
+                  className="controls"
+                >
+                  <div
+                    className="border-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Border
+                        </span>
+                        <br />
+                        <small>
+                          Adds a border around your embedded IFrame
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="reload-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Reload
+                        </span>
+                        <br />
+                        <small>
+                          Adds a control option to reload the contents of the IFrame
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={true}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="new-window-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          New Window
+                        </span>
+                        <br />
+                        <small>
+                          Allows the IFrame to be opened in a new window
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="zoom-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Zoom
+                        </span>
+                        <br />
+                        <small>
+                          Allows students to zoom in and out on the IFrame contents
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="controls"
+        >
+          <div
+            className="obojobo-draft--components--button alt-action is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
+          <div
+            className="obojobo-draft--components--button is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+      <input
+        aria-label="End of dialog"
+        className="last-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EditIframeModal EditIFrameModal component changes Reload 2`] = `
+<div
+  className="obojobo-draft--components--modal--simple-dialog"
+>
+  <div
+    className="obojobo-draft--components--modal--dialog "
+    style={null}
+  >
+    <div
+      aria-atomic="true"
+      aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
+      className="obojobo-draft--components--modal--modal"
+      role="dialog"
+      tabIndex="-1"
+    >
+      <input
+        aria-label="Start of dialog"
+        className="first-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+      <div
+        className="content"
+        id="obojobo-draft--components--modal--modal--content"
+      >
+        <h1
+          className="heading"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          Edit Embedded IFrame
+        </h1>
+        <div
+          className="dialog-content"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          <div
+            className="edit-iframe-modal"
+          >
+            <header>
+              <label
+                htmlFor="src-input"
+              >
+                Source:
+              </label>
+              <div>
+                <input
+                  disabled={true}
+                  id="src-input"
+                  value=""
+                />
+                <button
+                  onClick={[Function]}
+                >
+                  Change...
+                </button>
+              </div>
+            </header>
+            <div
+              className="content-type"
+            >
+              <div
+                className="content-type-options-container"
+              >
+                <label
+                  htmlFor="content-type-options"
+                  id="content-type-options-label"
+                >
+                  Content type:
+                </label>
+                <div
+                  id="content-type-options"
+                >
+                  <label
+                    htmlFor="video-or-media"
+                  >
+                    <input
+                      checked={true}
+                      id="video-or-media"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="media"
+                    />
+                    <div>
+                      <div
+                        className="video-or-media-icon"
+                      />
+                      <span>
+                        Video or other media
+                      </span>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="embedded-webpage"
+                  >
+                    <input
+                      checked={false}
+                      id="embedded-webpage"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="webpage"
+                    />
+                    <div>
+                      <div
+                        className="embedded-webpage-icon"
+                      />
+                      <span>
+                        Embedded webpage
+                      </span>
+                    </div>
+                  </label>
+                </div>
+              </div>
+              <small>
+                This helps determine how the embedded content is best displayed
+              </small>
+            </div>
+            <p
+              className="title"
+            >
+              Options
+            </p>
+            <div
+              className="sizing"
+            >
+              <label
+                htmlFor="sizing-options-container"
+              >
+                Sizing
+              </label>
+              <div
+                id="sizing-options-container"
+              >
+                <div
+                  className="sizing-options"
+                >
+                  <label
+                    htmlFor="max-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="max-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="max-width"
+                    />
+                    <div
+                      className="icon max-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - full width
+                      </p>
+                      <p>
+                        Grows up to the largest size (wider thant text)
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="text-width"
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "backgroundColor": "#e5d9e3",
+                        "color": "#6714bd",
+                      }
+                    }
+                  >
+                    <input
+                      checked={true}
+                      id="text-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="text-width"
+                    />
+                    <div
+                      className="icon text-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - text width
+                      </p>
+                      <p>
+                        Grows up to the same width as the text
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="fixed-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="fixed-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="fixed"
+                    />
+                    <div
+                      className="icon fixed-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Fixed size
+                      </p>
+                      <p>
+                        Shows at set pixel dimensions
+                      </p>
+                    </div>
+                  </label>
+                </div>
+                <button
+                  onClick={[Function]}
+                >
+                  <span>
+                    Edit dimensions
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              className="loading-container"
+            >
+              <label
+                htmlFor="loading-select"
+              >
+                Loading:
+              </label>
+              <div
+                id="loading-select"
+              >
+                <select
+                  onChange={[Function]}
+                  value={false}
+                >
+                  <option
+                    value={false}
+                  >
+                    Load when student clicks IFrame
+                  </option>
+                  <option
+                    value={true}
+                  >
+                    Load right away (Not recommended)
+                  </option>
+                </select>
+              </div>
+            </div>
+            <div
+              className="title-container"
+            >
+              <label
+                htmlFor="title-input"
+              >
+                Title:
+              </label>
+              <div
+                id="title-input"
+              >
+                <input
+                  onChange={[Function]}
+                  placeholder="E.g.: The difference between speed and velocity"
+                  type="text"
+                  value=""
+                />
+                <small>
+                  This will be shown before the IFrame is loaded
+                </small>
+              </div>
+            </div>
+            <div
+              className="advanced-options-container"
+            >
+              <button
+                className="button-advanced-options"
+                onClick={[Function]}
+              >
+                <span>
+                  Close advanced options
+                </span>
+              </button>
+              <div
+                className="advanced-options"
+              >
+                <div
+                  className="fit-container"
+                >
+                  <label
+                    htmlFor="select-fit"
+                  >
+                    Fit:
+                  </label>
+                  <select
+                    id="select-fit"
+                    onChange={[Function]}
+                    value="scale"
+                  >
+                    <option
+                      value="scale"
+                    >
+                      Scale
+                    </option>
+                    <option
+                      value="scroll"
+                    >
+                      Scroll
+                    </option>
+                  </select>
+                </div>
+                <div
+                  className="initial-zoom-container"
+                >
+                  <label
+                    htmlFor="initial-zoom"
+                  >
+                    Initial 
+                    <br />
+                     Zoom:
+                  </label>
+                  <input
+                    id="initial-zoom"
+                    max="1000"
+                    min="0.01"
+                    onChange={[Function]}
+                    placeholder="Decimal Value"
+                    step=".01"
+                    type="number"
+                    value={1}
+                  />
+                </div>
+                <p
+                  className="title"
+                >
+                  Controls
+                </p>
+                <div
+                  className="controls"
+                >
+                  <div
+                    className="border-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Border
+                        </span>
+                        <br />
+                        <small>
+                          Adds a border around your embedded IFrame
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="reload-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Reload
+                        </span>
+                        <br />
+                        <small>
+                          Adds a control option to reload the contents of the IFrame
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={true}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="new-window-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          New Window
+                        </span>
+                        <br />
+                        <small>
+                          Allows the IFrame to be opened in a new window
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="zoom-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Zoom
+                        </span>
+                        <br />
+                        <small>
+                          Allows students to zoom in and out on the IFrame contents
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="controls"
+        >
+          <div
+            className="obojobo-draft--components--button alt-action is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
+          <div
+            className="obojobo-draft--components--button is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+      <input
+        aria-label="End of dialog"
+        className="last-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EditIframeModal EditIFrameModal component changes Zoom 1`] = `
+<div
+  className="obojobo-draft--components--modal--simple-dialog"
+>
+  <div
+    className="obojobo-draft--components--modal--dialog "
+    style={null}
+  >
+    <div
+      aria-atomic="true"
+      aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
+      className="obojobo-draft--components--modal--modal"
+      role="dialog"
+      tabIndex="-1"
+    >
+      <input
+        aria-label="Start of dialog"
+        className="first-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+      <div
+        className="content"
+        id="obojobo-draft--components--modal--modal--content"
+      >
+        <h1
+          className="heading"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          Edit Embedded IFrame
+        </h1>
+        <div
+          className="dialog-content"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          <div
+            className="edit-iframe-modal"
+          >
+            <header>
+              <label
+                htmlFor="src-input"
+              >
+                Source:
+              </label>
+              <div>
+                <input
+                  disabled={true}
+                  id="src-input"
+                  value=""
+                />
+                <button
+                  onClick={[Function]}
+                >
+                  Change...
+                </button>
+              </div>
+            </header>
+            <div
+              className="content-type"
+            >
+              <div
+                className="content-type-options-container"
+              >
+                <label
+                  htmlFor="content-type-options"
+                  id="content-type-options-label"
+                >
+                  Content type:
+                </label>
+                <div
+                  id="content-type-options"
+                >
+                  <label
+                    htmlFor="video-or-media"
+                  >
+                    <input
+                      checked={true}
+                      id="video-or-media"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="media"
+                    />
+                    <div>
+                      <div
+                        className="video-or-media-icon"
+                      />
+                      <span>
+                        Video or other media
+                      </span>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="embedded-webpage"
+                  >
+                    <input
+                      checked={false}
+                      id="embedded-webpage"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="webpage"
+                    />
+                    <div>
+                      <div
+                        className="embedded-webpage-icon"
+                      />
+                      <span>
+                        Embedded webpage
+                      </span>
+                    </div>
+                  </label>
+                </div>
+              </div>
+              <small>
+                This helps determine how the embedded content is best displayed
+              </small>
+            </div>
+            <p
+              className="title"
+            >
+              Options
+            </p>
+            <div
+              className="sizing"
+            >
+              <label
+                htmlFor="sizing-options-container"
+              >
+                Sizing
+              </label>
+              <div
+                id="sizing-options-container"
+              >
+                <div
+                  className="sizing-options"
+                >
+                  <label
+                    htmlFor="max-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="max-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="max-width"
+                    />
+                    <div
+                      className="icon max-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - full width
+                      </p>
+                      <p>
+                        Grows up to the largest size (wider thant text)
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="text-width"
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "backgroundColor": "#e5d9e3",
+                        "color": "#6714bd",
+                      }
+                    }
+                  >
+                    <input
+                      checked={true}
+                      id="text-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="text-width"
+                    />
+                    <div
+                      className="icon text-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - text width
+                      </p>
+                      <p>
+                        Grows up to the same width as the text
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="fixed-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="fixed-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="fixed"
+                    />
+                    <div
+                      className="icon fixed-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Fixed size
+                      </p>
+                      <p>
+                        Shows at set pixel dimensions
+                      </p>
+                    </div>
+                  </label>
+                </div>
+                <button
+                  onClick={[Function]}
+                >
+                  <span>
+                    Edit dimensions
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              className="loading-container"
+            >
+              <label
+                htmlFor="loading-select"
+              >
+                Loading:
+              </label>
+              <div
+                id="loading-select"
+              >
+                <select
+                  onChange={[Function]}
+                  value={false}
+                >
+                  <option
+                    value={false}
+                  >
+                    Load when student clicks IFrame
+                  </option>
+                  <option
+                    value={true}
+                  >
+                    Load right away (Not recommended)
+                  </option>
+                </select>
+              </div>
+            </div>
+            <div
+              className="title-container"
+            >
+              <label
+                htmlFor="title-input"
+              >
+                Title:
+              </label>
+              <div
+                id="title-input"
+              >
+                <input
+                  onChange={[Function]}
+                  placeholder="E.g.: The difference between speed and velocity"
+                  type="text"
+                  value=""
+                />
+                <small>
+                  This will be shown before the IFrame is loaded
+                </small>
+              </div>
+            </div>
+            <div
+              className="advanced-options-container"
+            >
+              <button
+                className="button-advanced-options"
+                onClick={[Function]}
+              >
+                <span>
+                  Close advanced options
+                </span>
+              </button>
+              <div
+                className="advanced-options"
+              >
+                <div
+                  className="fit-container"
+                >
+                  <label
+                    htmlFor="select-fit"
+                  >
+                    Fit:
+                  </label>
+                  <select
+                    id="select-fit"
+                    onChange={[Function]}
+                    value="scale"
+                  >
+                    <option
+                      value="scale"
+                    >
+                      Scale
+                    </option>
+                    <option
+                      value="scroll"
+                    >
+                      Scroll
+                    </option>
+                  </select>
+                </div>
+                <div
+                  className="initial-zoom-container"
+                >
+                  <label
+                    htmlFor="initial-zoom"
+                  >
+                    Initial 
+                    <br />
+                     Zoom:
+                  </label>
+                  <input
+                    id="initial-zoom"
+                    max="1000"
+                    min="0.01"
+                    onChange={[Function]}
+                    placeholder="Decimal Value"
+                    step=".01"
+                    type="number"
+                    value={1}
+                  />
+                </div>
+                <p
+                  className="title"
+                >
+                  Controls
+                </p>
+                <div
+                  className="controls"
+                >
+                  <div
+                    className="border-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Border
+                        </span>
+                        <br />
+                        <small>
+                          Adds a border around your embedded IFrame
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="reload-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Reload
+                        </span>
+                        <br />
+                        <small>
+                          Adds a control option to reload the contents of the IFrame
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={true}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="new-window-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          New Window
+                        </span>
+                        <br />
+                        <small>
+                          Allows the IFrame to be opened in a new window
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="zoom-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Zoom
+                        </span>
+                        <br />
+                        <small>
+                          Allows students to zoom in and out on the IFrame contents
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="controls"
+        >
+          <div
+            className="obojobo-draft--components--button alt-action is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
+          <div
+            className="obojobo-draft--components--button is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+      <input
+        aria-label="End of dialog"
+        className="last-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EditIframeModal EditIFrameModal component changes Zoom 2`] = `
+<div
+  className="obojobo-draft--components--modal--simple-dialog"
+>
+  <div
+    className="obojobo-draft--components--modal--dialog "
+    style={null}
+  >
+    <div
+      aria-atomic="true"
+      aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
+      className="obojobo-draft--components--modal--modal"
+      role="dialog"
+      tabIndex="-1"
+    >
+      <input
+        aria-label="Start of dialog"
+        className="first-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+      <div
+        className="content"
+        id="obojobo-draft--components--modal--modal--content"
+      >
+        <h1
+          className="heading"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          Edit Embedded IFrame
+        </h1>
+        <div
+          className="dialog-content"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          <div
+            className="edit-iframe-modal"
+          >
+            <header>
+              <label
+                htmlFor="src-input"
+              >
+                Source:
+              </label>
+              <div>
+                <input
+                  disabled={true}
+                  id="src-input"
+                  value=""
+                />
+                <button
+                  onClick={[Function]}
+                >
+                  Change...
+                </button>
+              </div>
+            </header>
+            <div
+              className="content-type"
+            >
+              <div
+                className="content-type-options-container"
+              >
+                <label
+                  htmlFor="content-type-options"
+                  id="content-type-options-label"
+                >
+                  Content type:
+                </label>
+                <div
+                  id="content-type-options"
+                >
+                  <label
+                    htmlFor="video-or-media"
+                  >
+                    <input
+                      checked={true}
+                      id="video-or-media"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="media"
+                    />
+                    <div>
+                      <div
+                        className="video-or-media-icon"
+                      />
+                      <span>
+                        Video or other media
+                      </span>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="embedded-webpage"
+                  >
+                    <input
+                      checked={false}
+                      id="embedded-webpage"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="webpage"
+                    />
+                    <div>
+                      <div
+                        className="embedded-webpage-icon"
+                      />
+                      <span>
+                        Embedded webpage
+                      </span>
+                    </div>
+                  </label>
+                </div>
+              </div>
+              <small>
+                This helps determine how the embedded content is best displayed
+              </small>
+            </div>
+            <p
+              className="title"
+            >
+              Options
+            </p>
+            <div
+              className="sizing"
+            >
+              <label
+                htmlFor="sizing-options-container"
+              >
+                Sizing
+              </label>
+              <div
+                id="sizing-options-container"
+              >
+                <div
+                  className="sizing-options"
+                >
+                  <label
+                    htmlFor="max-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="max-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="max-width"
+                    />
+                    <div
+                      className="icon max-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - full width
+                      </p>
+                      <p>
+                        Grows up to the largest size (wider thant text)
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="text-width"
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "backgroundColor": "#e5d9e3",
+                        "color": "#6714bd",
+                      }
+                    }
+                  >
+                    <input
+                      checked={true}
+                      id="text-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="text-width"
+                    />
+                    <div
+                      className="icon text-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - text width
+                      </p>
+                      <p>
+                        Grows up to the same width as the text
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="fixed-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="fixed-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="fixed"
+                    />
+                    <div
+                      className="icon fixed-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Fixed size
+                      </p>
+                      <p>
+                        Shows at set pixel dimensions
+                      </p>
+                    </div>
+                  </label>
+                </div>
+                <button
+                  onClick={[Function]}
+                >
+                  <span>
+                    Edit dimensions
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              className="loading-container"
+            >
+              <label
+                htmlFor="loading-select"
+              >
+                Loading:
+              </label>
+              <div
+                id="loading-select"
+              >
+                <select
+                  onChange={[Function]}
+                  value={false}
+                >
+                  <option
+                    value={false}
+                  >
+                    Load when student clicks IFrame
+                  </option>
+                  <option
+                    value={true}
+                  >
+                    Load right away (Not recommended)
+                  </option>
+                </select>
+              </div>
+            </div>
+            <div
+              className="title-container"
+            >
+              <label
+                htmlFor="title-input"
+              >
+                Title:
+              </label>
+              <div
+                id="title-input"
+              >
+                <input
+                  onChange={[Function]}
+                  placeholder="E.g.: The difference between speed and velocity"
+                  type="text"
+                  value=""
+                />
+                <small>
+                  This will be shown before the IFrame is loaded
+                </small>
+              </div>
+            </div>
+            <div
+              className="advanced-options-container"
+            >
+              <button
+                className="button-advanced-options"
+                onClick={[Function]}
+              >
+                <span>
+                  Close advanced options
+                </span>
+              </button>
+              <div
+                className="advanced-options"
+              >
+                <div
+                  className="fit-container"
+                >
+                  <label
+                    htmlFor="select-fit"
+                  >
+                    Fit:
+                  </label>
+                  <select
+                    id="select-fit"
+                    onChange={[Function]}
+                    value="scale"
+                  >
+                    <option
+                      value="scale"
+                    >
+                      Scale
+                    </option>
+                    <option
+                      value="scroll"
+                    >
+                      Scroll
+                    </option>
+                  </select>
+                </div>
+                <div
+                  className="initial-zoom-container"
+                >
+                  <label
+                    htmlFor="initial-zoom"
+                  >
+                    Initial 
+                    <br />
+                     Zoom:
+                  </label>
+                  <input
+                    id="initial-zoom"
+                    max="1000"
+                    min="0.01"
+                    onChange={[Function]}
+                    placeholder="Decimal Value"
+                    step=".01"
+                    type="number"
+                    value={1}
+                  />
+                </div>
+                <p
+                  className="title"
+                >
+                  Controls
+                </p>
+                <div
+                  className="controls"
+                >
+                  <div
+                    className="border-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Border
+                        </span>
+                        <br />
+                        <small>
+                          Adds a border around your embedded IFrame
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="reload-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Reload
+                        </span>
+                        <br />
+                        <small>
+                          Adds a control option to reload the contents of the IFrame
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={true}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="new-window-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          New Window
+                        </span>
+                        <br />
+                        <small>
+                          Allows the IFrame to be opened in a new window
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="zoom-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Zoom
+                        </span>
+                        <br />
+                        <small>
+                          Allows students to zoom in and out on the IFrame contents
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={true}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="controls"
+        >
+          <div
+            className="obojobo-draft--components--button alt-action is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
+          <div
+            className="obojobo-draft--components--button is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+      <input
+        aria-label="End of dialog"
+        className="last-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EditIframeModal EditIFrameModal component changes autoload 1`] = `
+<div
+  className="obojobo-draft--components--modal--simple-dialog"
+>
+  <div
+    className="obojobo-draft--components--modal--dialog "
+    style={null}
+  >
+    <div
+      aria-atomic="true"
+      aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
+      className="obojobo-draft--components--modal--modal"
+      role="dialog"
+      tabIndex="-1"
+    >
+      <input
+        aria-label="Start of dialog"
+        className="first-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+      <div
+        className="content"
+        id="obojobo-draft--components--modal--modal--content"
+      >
+        <h1
+          className="heading"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          Edit Embedded IFrame
+        </h1>
+        <div
+          className="dialog-content"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          <div
+            className="edit-iframe-modal"
+          >
+            <header>
+              <label
+                htmlFor="src-input"
+              >
+                Source:
+              </label>
+              <div>
+                <input
+                  disabled={true}
+                  id="src-input"
+                  value=""
+                />
+                <button
+                  onClick={[Function]}
+                >
+                  Change...
+                </button>
+              </div>
+            </header>
+            <div
+              className="content-type"
+            >
+              <div
+                className="content-type-options-container"
+              >
+                <label
+                  htmlFor="content-type-options"
+                  id="content-type-options-label"
+                >
+                  Content type:
+                </label>
+                <div
+                  id="content-type-options"
+                >
+                  <label
+                    htmlFor="video-or-media"
+                  >
+                    <input
+                      checked={true}
+                      id="video-or-media"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="media"
+                    />
+                    <div>
+                      <div
+                        className="video-or-media-icon"
+                      />
+                      <span>
+                        Video or other media
+                      </span>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="embedded-webpage"
+                  >
+                    <input
+                      checked={false}
+                      id="embedded-webpage"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="webpage"
+                    />
+                    <div>
+                      <div
+                        className="embedded-webpage-icon"
+                      />
+                      <span>
+                        Embedded webpage
+                      </span>
+                    </div>
+                  </label>
+                </div>
+              </div>
+              <small>
+                This helps determine how the embedded content is best displayed
+              </small>
+            </div>
+            <p
+              className="title"
+            >
+              Options
+            </p>
+            <div
+              className="sizing"
+            >
+              <label
+                htmlFor="sizing-options-container"
+              >
+                Sizing
+              </label>
+              <div
+                id="sizing-options-container"
+              >
+                <div
+                  className="sizing-options"
+                >
+                  <label
+                    htmlFor="max-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="max-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="max-width"
+                    />
+                    <div
+                      className="icon max-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - full width
+                      </p>
+                      <p>
+                        Grows up to the largest size (wider thant text)
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="text-width"
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "backgroundColor": "#e5d9e3",
+                        "color": "#6714bd",
+                      }
+                    }
+                  >
+                    <input
+                      checked={true}
+                      id="text-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="text-width"
+                    />
+                    <div
+                      className="icon text-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - text width
+                      </p>
+                      <p>
+                        Grows up to the same width as the text
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="fixed-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="fixed-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="fixed"
+                    />
+                    <div
+                      className="icon fixed-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Fixed size
+                      </p>
+                      <p>
+                        Shows at set pixel dimensions
+                      </p>
+                    </div>
+                  </label>
+                </div>
+                <button
+                  onClick={[Function]}
+                >
+                  <span>
+                    Edit dimensions
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              className="loading-container"
+            >
+              <label
+                htmlFor="loading-select"
+              >
+                Loading:
+              </label>
+              <div
+                id="loading-select"
+              >
+                <select
+                  onChange={[Function]}
+                  value={true}
+                >
+                  <option
+                    value={false}
+                  >
+                    Load when student clicks IFrame
+                  </option>
+                  <option
+                    value={true}
+                  >
+                    Load right away (Not recommended)
+                  </option>
+                </select>
+                <small>
+                  <div
+                    className="warning-icon"
+                  />
+                  This option might cause your module to load or run slowly
+                </small>
+              </div>
+            </div>
+            <div
+              className="title-container"
+            >
+              <label
+                htmlFor="title-input"
+              >
+                Title:
+              </label>
+              <div
+                id="title-input"
+              >
+                <input
+                  onChange={[Function]}
+                  placeholder="E.g.: The difference between speed and velocity"
+                  type="text"
+                  value=""
+                />
+                <small>
+                  This will be shown before the IFrame is loaded
+                </small>
+              </div>
+            </div>
+            <div
+              className="advanced-options-container"
+            >
+              <button
+                className="button-advanced-options"
+                onClick={[Function]}
+              >
+                <span>
+                  Show all options (advanced)
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div
+          className="controls"
+        >
+          <div
+            className="obojobo-draft--components--button alt-action is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
+          <div
+            className="obojobo-draft--components--button is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+      <input
+        aria-label="End of dialog"
+        className="last-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EditIframeModal EditIFrameModal component changes autoload 2`] = `
+<div
+  className="obojobo-draft--components--modal--simple-dialog"
+>
+  <div
+    className="obojobo-draft--components--modal--dialog "
+    style={null}
+  >
+    <div
+      aria-atomic="true"
+      aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
+      className="obojobo-draft--components--modal--modal"
+      role="dialog"
+      tabIndex="-1"
+    >
+      <input
+        aria-label="Start of dialog"
+        className="first-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+      <div
+        className="content"
+        id="obojobo-draft--components--modal--modal--content"
+      >
+        <h1
+          className="heading"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          Edit Embedded IFrame
+        </h1>
+        <div
+          className="dialog-content"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          <div
+            className="edit-iframe-modal"
+          >
+            <header>
+              <label
+                htmlFor="src-input"
+              >
+                Source:
+              </label>
+              <div>
+                <input
+                  disabled={true}
+                  id="src-input"
+                  value=""
+                />
+                <button
+                  onClick={[Function]}
+                >
+                  Change...
+                </button>
+              </div>
+            </header>
+            <div
+              className="content-type"
+            >
+              <div
+                className="content-type-options-container"
+              >
+                <label
+                  htmlFor="content-type-options"
+                  id="content-type-options-label"
+                >
+                  Content type:
+                </label>
+                <div
+                  id="content-type-options"
+                >
+                  <label
+                    htmlFor="video-or-media"
+                  >
+                    <input
+                      checked={true}
+                      id="video-or-media"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="media"
+                    />
+                    <div>
+                      <div
+                        className="video-or-media-icon"
+                      />
+                      <span>
+                        Video or other media
+                      </span>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="embedded-webpage"
+                  >
+                    <input
+                      checked={false}
+                      id="embedded-webpage"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="webpage"
+                    />
+                    <div>
+                      <div
+                        className="embedded-webpage-icon"
+                      />
+                      <span>
+                        Embedded webpage
+                      </span>
+                    </div>
+                  </label>
+                </div>
+              </div>
+              <small>
+                This helps determine how the embedded content is best displayed
+              </small>
+            </div>
+            <p
+              className="title"
+            >
+              Options
+            </p>
+            <div
+              className="sizing"
+            >
+              <label
+                htmlFor="sizing-options-container"
+              >
+                Sizing
+              </label>
+              <div
+                id="sizing-options-container"
+              >
+                <div
+                  className="sizing-options"
+                >
+                  <label
+                    htmlFor="max-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="max-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="max-width"
+                    />
+                    <div
+                      className="icon max-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - full width
+                      </p>
+                      <p>
+                        Grows up to the largest size (wider thant text)
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="text-width"
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "backgroundColor": "#e5d9e3",
+                        "color": "#6714bd",
+                      }
+                    }
+                  >
+                    <input
+                      checked={true}
+                      id="text-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="text-width"
+                    />
+                    <div
+                      className="icon text-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - text width
+                      </p>
+                      <p>
+                        Grows up to the same width as the text
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="fixed-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="fixed-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="fixed"
+                    />
+                    <div
+                      className="icon fixed-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Fixed size
+                      </p>
+                      <p>
+                        Shows at set pixel dimensions
+                      </p>
+                    </div>
+                  </label>
+                </div>
+                <button
+                  onClick={[Function]}
+                >
+                  <span>
+                    Edit dimensions
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              className="loading-container"
+            >
+              <label
+                htmlFor="loading-select"
+              >
+                Loading:
+              </label>
+              <div
+                id="loading-select"
+              >
+                <select
+                  onChange={[Function]}
+                  value={false}
+                >
+                  <option
+                    value={false}
+                  >
+                    Load when student clicks IFrame
+                  </option>
+                  <option
+                    value={true}
+                  >
+                    Load right away (Not recommended)
+                  </option>
+                </select>
+              </div>
+            </div>
+            <div
+              className="title-container"
+            >
+              <label
+                htmlFor="title-input"
+              >
+                Title:
+              </label>
+              <div
+                id="title-input"
+              >
+                <input
+                  onChange={[Function]}
+                  placeholder="E.g.: The difference between speed and velocity"
+                  type="text"
+                  value=""
+                />
+                <small>
+                  This will be shown before the IFrame is loaded
+                </small>
+              </div>
+            </div>
+            <div
+              className="advanced-options-container"
+            >
+              <button
+                className="button-advanced-options"
+                onClick={[Function]}
+              >
+                <span>
+                  Show all options (advanced)
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div
+          className="controls"
+        >
+          <div
+            className="obojobo-draft--components--button alt-action is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
+          <div
+            className="obojobo-draft--components--button is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+      <input
+        aria-label="End of dialog"
+        className="last-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EditIframeModal EditIFrameModal component changes border 1`] = `
+<div
+  className="obojobo-draft--components--modal--simple-dialog"
+>
+  <div
+    className="obojobo-draft--components--modal--dialog "
+    style={null}
+  >
+    <div
+      aria-atomic="true"
+      aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
+      className="obojobo-draft--components--modal--modal"
+      role="dialog"
+      tabIndex="-1"
+    >
+      <input
+        aria-label="Start of dialog"
+        className="first-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+      <div
+        className="content"
+        id="obojobo-draft--components--modal--modal--content"
+      >
+        <h1
+          className="heading"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          Edit Embedded IFrame
+        </h1>
+        <div
+          className="dialog-content"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          <div
+            className="edit-iframe-modal"
+          >
+            <header>
+              <label
+                htmlFor="src-input"
+              >
+                Source:
+              </label>
+              <div>
+                <input
+                  disabled={true}
+                  id="src-input"
+                  value=""
+                />
+                <button
+                  onClick={[Function]}
+                >
+                  Change...
+                </button>
+              </div>
+            </header>
+            <div
+              className="content-type"
+            >
+              <div
+                className="content-type-options-container"
+              >
+                <label
+                  htmlFor="content-type-options"
+                  id="content-type-options-label"
+                >
+                  Content type:
+                </label>
+                <div
+                  id="content-type-options"
+                >
+                  <label
+                    htmlFor="video-or-media"
+                  >
+                    <input
+                      checked={true}
+                      id="video-or-media"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="media"
+                    />
+                    <div>
+                      <div
+                        className="video-or-media-icon"
+                      />
+                      <span>
+                        Video or other media
+                      </span>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="embedded-webpage"
+                  >
+                    <input
+                      checked={false}
+                      id="embedded-webpage"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="webpage"
+                    />
+                    <div>
+                      <div
+                        className="embedded-webpage-icon"
+                      />
+                      <span>
+                        Embedded webpage
+                      </span>
+                    </div>
+                  </label>
+                </div>
+              </div>
+              <small>
+                This helps determine how the embedded content is best displayed
+              </small>
+            </div>
+            <p
+              className="title"
+            >
+              Options
+            </p>
+            <div
+              className="sizing"
+            >
+              <label
+                htmlFor="sizing-options-container"
+              >
+                Sizing
+              </label>
+              <div
+                id="sizing-options-container"
+              >
+                <div
+                  className="sizing-options"
+                >
+                  <label
+                    htmlFor="max-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="max-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="max-width"
+                    />
+                    <div
+                      className="icon max-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - full width
+                      </p>
+                      <p>
+                        Grows up to the largest size (wider thant text)
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="text-width"
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "backgroundColor": "#e5d9e3",
+                        "color": "#6714bd",
+                      }
+                    }
+                  >
+                    <input
+                      checked={true}
+                      id="text-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="text-width"
+                    />
+                    <div
+                      className="icon text-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - text width
+                      </p>
+                      <p>
+                        Grows up to the same width as the text
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="fixed-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="fixed-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="fixed"
+                    />
+                    <div
+                      className="icon fixed-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Fixed size
+                      </p>
+                      <p>
+                        Shows at set pixel dimensions
+                      </p>
+                    </div>
+                  </label>
+                </div>
+                <button
+                  onClick={[Function]}
+                >
+                  <span>
+                    Edit dimensions
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              className="loading-container"
+            >
+              <label
+                htmlFor="loading-select"
+              >
+                Loading:
+              </label>
+              <div
+                id="loading-select"
+              >
+                <select
+                  onChange={[Function]}
+                  value={false}
+                >
+                  <option
+                    value={false}
+                  >
+                    Load when student clicks IFrame
+                  </option>
+                  <option
+                    value={true}
+                  >
+                    Load right away (Not recommended)
+                  </option>
+                </select>
+              </div>
+            </div>
+            <div
+              className="title-container"
+            >
+              <label
+                htmlFor="title-input"
+              >
+                Title:
+              </label>
+              <div
+                id="title-input"
+              >
+                <input
+                  onChange={[Function]}
+                  placeholder="E.g.: The difference between speed and velocity"
+                  type="text"
+                  value=""
+                />
+                <small>
+                  This will be shown before the IFrame is loaded
+                </small>
+              </div>
+            </div>
+            <div
+              className="advanced-options-container"
+            >
+              <button
+                className="button-advanced-options"
+                onClick={[Function]}
+              >
+                <span>
+                  Close advanced options
+                </span>
+              </button>
+              <div
+                className="advanced-options"
+              >
+                <div
+                  className="fit-container"
+                >
+                  <label
+                    htmlFor="select-fit"
+                  >
+                    Fit:
+                  </label>
+                  <select
+                    id="select-fit"
+                    onChange={[Function]}
+                    value="scale"
+                  >
+                    <option
+                      value="scale"
+                    >
+                      Scale
+                    </option>
+                    <option
+                      value="scroll"
+                    >
+                      Scroll
+                    </option>
+                  </select>
+                </div>
+                <div
+                  className="initial-zoom-container"
+                >
+                  <label
+                    htmlFor="initial-zoom"
+                  >
+                    Initial 
+                    <br />
+                     Zoom:
+                  </label>
+                  <input
+                    id="initial-zoom"
+                    max="1000"
+                    min="0.01"
+                    onChange={[Function]}
+                    placeholder="Decimal Value"
+                    step=".01"
+                    type="number"
+                    value={1}
+                  />
+                </div>
+                <p
+                  className="title"
+                >
+                  Controls
+                </p>
+                <div
+                  className="controls"
+                >
+                  <div
+                    className="border-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Border
+                        </span>
+                        <br />
+                        <small>
+                          Adds a border around your embedded IFrame
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="reload-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Reload
+                        </span>
+                        <br />
+                        <small>
+                          Adds a control option to reload the contents of the IFrame
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={true}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="new-window-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          New Window
+                        </span>
+                        <br />
+                        <small>
+                          Allows the IFrame to be opened in a new window
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="zoom-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Zoom
+                        </span>
+                        <br />
+                        <small>
+                          Allows students to zoom in and out on the IFrame contents
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="controls"
+        >
+          <div
+            className="obojobo-draft--components--button alt-action is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
+          <div
+            className="obojobo-draft--components--button is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+      <input
+        aria-label="End of dialog"
+        className="last-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EditIframeModal EditIFrameModal component changes border 2`] = `
+<div
+  className="obojobo-draft--components--modal--simple-dialog"
+>
+  <div
+    className="obojobo-draft--components--modal--dialog "
+    style={null}
+  >
+    <div
+      aria-atomic="true"
+      aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
+      className="obojobo-draft--components--modal--modal"
+      role="dialog"
+      tabIndex="-1"
+    >
+      <input
+        aria-label="Start of dialog"
+        className="first-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+      <div
+        className="content"
+        id="obojobo-draft--components--modal--modal--content"
+      >
+        <h1
+          className="heading"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          Edit Embedded IFrame
+        </h1>
+        <div
+          className="dialog-content"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          <div
+            className="edit-iframe-modal"
+          >
+            <header>
+              <label
+                htmlFor="src-input"
+              >
+                Source:
+              </label>
+              <div>
+                <input
+                  disabled={true}
+                  id="src-input"
+                  value=""
+                />
+                <button
+                  onClick={[Function]}
+                >
+                  Change...
+                </button>
+              </div>
+            </header>
+            <div
+              className="content-type"
+            >
+              <div
+                className="content-type-options-container"
+              >
+                <label
+                  htmlFor="content-type-options"
+                  id="content-type-options-label"
+                >
+                  Content type:
+                </label>
+                <div
+                  id="content-type-options"
+                >
+                  <label
+                    htmlFor="video-or-media"
+                  >
+                    <input
+                      checked={true}
+                      id="video-or-media"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="media"
+                    />
+                    <div>
+                      <div
+                        className="video-or-media-icon"
+                      />
+                      <span>
+                        Video or other media
+                      </span>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="embedded-webpage"
+                  >
+                    <input
+                      checked={false}
+                      id="embedded-webpage"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="webpage"
+                    />
+                    <div>
+                      <div
+                        className="embedded-webpage-icon"
+                      />
+                      <span>
+                        Embedded webpage
+                      </span>
+                    </div>
+                  </label>
+                </div>
+              </div>
+              <small>
+                This helps determine how the embedded content is best displayed
+              </small>
+            </div>
+            <p
+              className="title"
+            >
+              Options
+            </p>
+            <div
+              className="sizing"
+            >
+              <label
+                htmlFor="sizing-options-container"
+              >
+                Sizing
+              </label>
+              <div
+                id="sizing-options-container"
+              >
+                <div
+                  className="sizing-options"
+                >
+                  <label
+                    htmlFor="max-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="max-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="max-width"
+                    />
+                    <div
+                      className="icon max-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - full width
+                      </p>
+                      <p>
+                        Grows up to the largest size (wider thant text)
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="text-width"
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "backgroundColor": "#e5d9e3",
+                        "color": "#6714bd",
+                      }
+                    }
+                  >
+                    <input
+                      checked={true}
+                      id="text-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="text-width"
+                    />
+                    <div
+                      className="icon text-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - text width
+                      </p>
+                      <p>
+                        Grows up to the same width as the text
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="fixed-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="fixed-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="fixed"
+                    />
+                    <div
+                      className="icon fixed-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Fixed size
+                      </p>
+                      <p>
+                        Shows at set pixel dimensions
+                      </p>
+                    </div>
+                  </label>
+                </div>
+                <button
+                  onClick={[Function]}
+                >
+                  <span>
+                    Edit dimensions
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              className="loading-container"
+            >
+              <label
+                htmlFor="loading-select"
+              >
+                Loading:
+              </label>
+              <div
+                id="loading-select"
+              >
+                <select
+                  onChange={[Function]}
+                  value={false}
+                >
+                  <option
+                    value={false}
+                  >
+                    Load when student clicks IFrame
+                  </option>
+                  <option
+                    value={true}
+                  >
+                    Load right away (Not recommended)
+                  </option>
+                </select>
+              </div>
+            </div>
+            <div
+              className="title-container"
+            >
+              <label
+                htmlFor="title-input"
+              >
+                Title:
+              </label>
+              <div
+                id="title-input"
+              >
+                <input
+                  onChange={[Function]}
+                  placeholder="E.g.: The difference between speed and velocity"
+                  type="text"
+                  value=""
+                />
+                <small>
+                  This will be shown before the IFrame is loaded
+                </small>
+              </div>
+            </div>
+            <div
+              className="advanced-options-container"
+            >
+              <button
+                className="button-advanced-options"
+                onClick={[Function]}
+              >
+                <span>
+                  Close advanced options
+                </span>
+              </button>
+              <div
+                className="advanced-options"
+              >
+                <div
+                  className="fit-container"
+                >
+                  <label
+                    htmlFor="select-fit"
+                  >
+                    Fit:
+                  </label>
+                  <select
+                    id="select-fit"
+                    onChange={[Function]}
+                    value="scale"
+                  >
+                    <option
+                      value="scale"
+                    >
+                      Scale
+                    </option>
+                    <option
+                      value="scroll"
+                    >
+                      Scroll
+                    </option>
+                  </select>
+                </div>
+                <div
+                  className="initial-zoom-container"
+                >
+                  <label
+                    htmlFor="initial-zoom"
+                  >
+                    Initial 
+                    <br />
+                     Zoom:
+                  </label>
+                  <input
+                    id="initial-zoom"
+                    max="1000"
+                    min="0.01"
+                    onChange={[Function]}
+                    placeholder="Decimal Value"
+                    step=".01"
+                    type="number"
+                    value={1}
+                  />
+                </div>
+                <p
+                  className="title"
+                >
+                  Controls
+                </p>
+                <div
+                  className="controls"
+                >
+                  <div
+                    className="border-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Border
+                        </span>
+                        <br />
+                        <small>
+                          Adds a border around your embedded IFrame
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={true}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="reload-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Reload
+                        </span>
+                        <br />
+                        <small>
+                          Adds a control option to reload the contents of the IFrame
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={true}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="new-window-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          New Window
+                        </span>
+                        <br />
+                        <small>
+                          Allows the IFrame to be opened in a new window
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="zoom-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Zoom
+                        </span>
+                        <br />
+                        <small>
+                          Allows students to zoom in and out on the IFrame contents
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="controls"
+        >
+          <div
+            className="obojobo-draft--components--button alt-action is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
+          <div
+            className="obojobo-draft--components--button is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+      <input
+        aria-label="End of dialog"
+        className="last-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EditIframeModal EditIFrameModal component changes content type 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">Edit Embedded IFrame</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"edit-iframe-modal\\"><header><label for=\\"src-input\\">Source:</label><div><input id=\\"src-input\\" disabled=\\"\\" value=\\"\\"><button>Change...</button></div></header><div class=\\"content-type\\"><div class=\\"content-type-options-container\\"><label id=\\"content-type-options-label\\" for=\\"content-type-options\\">Content type:</label><div id=\\"content-type-options\\"><label for=\\"video-or-media\\"><input id=\\"video-or-media\\" type=\\"radio\\" name=\\"content-type-option\\" value=\\"media\\" checked=\\"\\"><div><div class=\\"video-or-media-icon\\"></div><span>Video or other media</span></div></label><label for=\\"embedded-webpage\\"><input id=\\"embedded-webpage\\" type=\\"radio\\" name=\\"content-type-option\\" value=\\"webpage\\"><div><div class=\\"embedded-webpage-icon\\"></div><span>Embedded webpage</span></div></label></div></div><small>This helps determine how the embedded content is best displayed</small></div><p class=\\"title\\">Options</p><div class=\\"sizing\\"><label for=\\"sizing-options-container\\">Sizing</label><div id=\\"sizing-options-container\\"><div class=\\"sizing-options\\"><label for=\\"max-width\\"><input id=\\"max-width\\" type=\\"radio\\" name=\\"sizing-option\\" value=\\"max-width\\"><div class=\\"icon max-width-icon\\"></div><div class=\\"sizing-description\\"><p class=\\"sizing-title\\">Responsive - full width</p><p>Grows up to the largest size (wider thant text)</p></div></label><label for=\\"text-width\\" style=\\"background-color: rgb(229, 217, 227); color: rgb(103, 20, 189);\\"><input id=\\"text-width\\" type=\\"radio\\" name=\\"sizing-option\\" value=\\"text-width\\" checked=\\"\\"><div class=\\"icon text-width-icon\\"></div><div class=\\"sizing-description\\"><p class=\\"sizing-title\\">Responsive - text width</p><p>Grows up to the same width as the text</p></div></label><label for=\\"fixed-width\\"><input id=\\"fixed-width\\" type=\\"radio\\" name=\\"sizing-option\\" value=\\"fixed\\"><div class=\\"icon fixed-width-icon\\"></div><div class=\\"sizing-description\\"><p class=\\"sizing-title\\">Fixed size</p><p>Shows at set pixel dimensions</p></div></label></div><button><span>Edit dimensions</span></button></div></div><div class=\\"loading-container\\"><label for=\\"loading-select\\">Loading:</label><div id=\\"loading-select\\"><select><option value=\\"false\\">Load when student clicks IFrame</option><option value=\\"true\\">Load right away (Not recommended)</option></select></div></div><div class=\\"title-container\\"><label for=\\"title-input\\">Title:</label><div id=\\"title-input\\"><input type=\\"text\\" placeholder=\\"E.g.: The difference between speed and velocity\\" value=\\"\\"><small>This will be shown before the IFrame is loaded</small></div></div><div class=\\"advanced-options-container\\"><button class=\\"button-advanced-options\\"><span>Show all options (advanced)</span></button></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
+
+exports[`EditIframeModal EditIFrameModal component changes content type 2`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">Edit Embedded IFrame</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"edit-iframe-modal\\"><header><label for=\\"src-input\\">Source:</label><div><input id=\\"src-input\\" disabled=\\"\\" value=\\"\\"><button>Change...</button></div></header><div class=\\"content-type\\"><div class=\\"content-type-options-container\\"><label id=\\"content-type-options-label\\" for=\\"content-type-options\\">Content type:</label><div id=\\"content-type-options\\"><label for=\\"video-or-media\\"><input id=\\"video-or-media\\" type=\\"radio\\" name=\\"content-type-option\\" value=\\"media\\" checked=\\"\\"><div><div class=\\"video-or-media-icon\\"></div><span>Video or other media</span></div></label><label for=\\"embedded-webpage\\"><input id=\\"embedded-webpage\\" type=\\"radio\\" name=\\"content-type-option\\" value=\\"webpage\\"><div><div class=\\"embedded-webpage-icon\\"></div><span>Embedded webpage</span></div></label></div></div><small>This helps determine how the embedded content is best displayed</small></div><p class=\\"title\\">Options</p><div class=\\"sizing\\"><label for=\\"sizing-options-container\\">Sizing</label><div id=\\"sizing-options-container\\"><div class=\\"sizing-options\\"><label for=\\"max-width\\"><input id=\\"max-width\\" type=\\"radio\\" name=\\"sizing-option\\" value=\\"max-width\\"><div class=\\"icon max-width-icon\\"></div><div class=\\"sizing-description\\"><p class=\\"sizing-title\\">Responsive - full width</p><p>Grows up to the largest size (wider thant text)</p></div></label><label for=\\"text-width\\" style=\\"background-color: rgb(229, 217, 227); color: rgb(103, 20, 189);\\"><input id=\\"text-width\\" type=\\"radio\\" name=\\"sizing-option\\" value=\\"text-width\\" checked=\\"\\"><div class=\\"icon text-width-icon\\"></div><div class=\\"sizing-description\\"><p class=\\"sizing-title\\">Responsive - text width</p><p>Grows up to the same width as the text</p></div></label><label for=\\"fixed-width\\"><input id=\\"fixed-width\\" type=\\"radio\\" name=\\"sizing-option\\" value=\\"fixed\\"><div class=\\"icon fixed-width-icon\\"></div><div class=\\"sizing-description\\"><p class=\\"sizing-title\\">Fixed size</p><p>Shows at set pixel dimensions</p></div></label></div><button><span>Edit dimensions</span></button></div></div><div class=\\"loading-container\\"><label for=\\"loading-select\\">Loading:</label><div id=\\"loading-select\\"><select><option value=\\"false\\">Load when student clicks IFrame</option><option value=\\"true\\">Load right away (Not recommended)</option></select></div></div><div class=\\"title-container\\"><label for=\\"title-input\\">Title:</label><div id=\\"title-input\\"><input type=\\"text\\" placeholder=\\"E.g.: The difference between speed and velocity\\" value=\\"\\"><small>This will be shown before the IFrame is loaded</small></div></div><div class=\\"advanced-options-container\\"><button class=\\"button-advanced-options\\"><span>Show all options (advanced)</span></button></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
+
+exports[`EditIframeModal EditIFrameModal component changes content type 3`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">Edit Embedded IFrame</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"edit-iframe-modal\\"><header><label for=\\"src-input\\">Source:</label><div><input id=\\"src-input\\" disabled=\\"\\" value=\\"\\"><button>Change...</button></div></header><div class=\\"content-type\\"><div class=\\"content-type-options-container\\"><label id=\\"content-type-options-label\\" for=\\"content-type-options\\">Content type:</label><div id=\\"content-type-options\\"><label for=\\"video-or-media\\"><input id=\\"video-or-media\\" type=\\"radio\\" name=\\"content-type-option\\" value=\\"media\\"><div><div class=\\"video-or-media-icon\\"></div><span>Video or other media</span></div></label><label for=\\"embedded-webpage\\"><input id=\\"embedded-webpage\\" type=\\"radio\\" name=\\"content-type-option\\" value=\\"webpage\\" checked=\\"\\"><div><div class=\\"embedded-webpage-icon\\"></div><span>Embedded webpage</span></div></label></div></div><small>This helps determine how the embedded content is best displayed</small></div><p class=\\"title\\">Options</p><div class=\\"sizing\\"><label for=\\"sizing-options-container\\">Sizing</label><div id=\\"sizing-options-container\\"><div class=\\"sizing-options\\"><label for=\\"max-width\\"><input id=\\"max-width\\" type=\\"radio\\" name=\\"sizing-option\\" value=\\"max-width\\"><div class=\\"icon max-width-icon\\"></div><div class=\\"sizing-description\\"><p class=\\"sizing-title\\">Responsive - full width</p><p>Grows up to the largest size (wider thant text)</p></div></label><label for=\\"text-width\\" style=\\"background-color: rgb(229, 217, 227); color: rgb(103, 20, 189);\\"><input id=\\"text-width\\" type=\\"radio\\" name=\\"sizing-option\\" value=\\"text-width\\" checked=\\"\\"><div class=\\"icon text-width-icon\\"></div><div class=\\"sizing-description\\"><p class=\\"sizing-title\\">Responsive - text width</p><p>Grows up to the same width as the text</p></div></label><label for=\\"fixed-width\\"><input id=\\"fixed-width\\" type=\\"radio\\" name=\\"sizing-option\\" value=\\"fixed\\"><div class=\\"icon fixed-width-icon\\"></div><div class=\\"sizing-description\\"><p class=\\"sizing-title\\">Fixed size</p><p>Shows at set pixel dimensions</p></div></label></div><button><span>Edit dimensions</span></button></div></div><div class=\\"loading-container\\"><label for=\\"loading-select\\">Loading:</label><div id=\\"loading-select\\"><select><option value=\\"false\\">Load when student clicks IFrame</option><option value=\\"true\\">Load right away (Not recommended)</option></select></div></div><div class=\\"title-container\\"><label for=\\"title-input\\">Title:</label><div id=\\"title-input\\"><input type=\\"text\\" placeholder=\\"E.g.: The difference between speed and velocity\\" value=\\"\\"><small>This will be shown before the IFrame is loaded</small></div></div><div class=\\"advanced-options-container\\"><button class=\\"button-advanced-options\\"><span>Show all options (advanced)</span></button></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
+
+exports[`EditIframeModal EditIFrameModal component changes height 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">Edit Embedded IFrame</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"edit-iframe-modal\\"><header><label for=\\"src-input\\">Source:</label><div><input id=\\"src-input\\" disabled=\\"\\" value=\\"\\"><button>Change...</button></div></header><div class=\\"content-type\\"><div class=\\"content-type-options-container\\"><label id=\\"content-type-options-label\\" for=\\"content-type-options\\">Content type:</label><div id=\\"content-type-options\\"><label for=\\"video-or-media\\"><input id=\\"video-or-media\\" type=\\"radio\\" name=\\"content-type-option\\" value=\\"media\\" checked=\\"\\"><div><div class=\\"video-or-media-icon\\"></div><span>Video or other media</span></div></label><label for=\\"embedded-webpage\\"><input id=\\"embedded-webpage\\" type=\\"radio\\" name=\\"content-type-option\\" value=\\"webpage\\"><div><div class=\\"embedded-webpage-icon\\"></div><span>Embedded webpage</span></div></label></div></div><small>This helps determine how the embedded content is best displayed</small></div><p class=\\"title\\">Options</p><div class=\\"sizing\\"><label for=\\"sizing-options-container\\">Sizing</label><div id=\\"sizing-options-container\\"><div class=\\"sizing-options\\"><label for=\\"max-width\\"><input id=\\"max-width\\" type=\\"radio\\" name=\\"sizing-option\\" value=\\"max-width\\"><div class=\\"icon max-width-icon\\"></div><div class=\\"sizing-description\\"><p class=\\"sizing-title\\">Responsive - full width</p><p>Grows up to the largest size (wider thant text)</p></div></label><label for=\\"text-width\\" style=\\"background-color: rgb(229, 217, 227); color: rgb(103, 20, 189);\\"><input id=\\"text-width\\" type=\\"radio\\" name=\\"sizing-option\\" value=\\"text-width\\" checked=\\"\\"><div class=\\"icon text-width-icon\\"></div><div class=\\"sizing-description\\"><p class=\\"sizing-title\\">Responsive - text width</p><p>Grows up to the same width as the text</p></div></label><label for=\\"fixed-width\\"><input id=\\"fixed-width\\" type=\\"radio\\" name=\\"sizing-option\\" value=\\"fixed\\"><div class=\\"icon fixed-width-icon\\"></div><div class=\\"sizing-description\\"><p class=\\"sizing-title\\">Fixed size</p><p>Shows at set pixel dimensions</p></div></label></div><button><span>Close dimensions</span></button></div></div><div class=\\"dimensions-container\\"><div class=\\"left-padding\\"></div><div class=\\"dimensions\\"><input type=\\"number\\" min=\\"1\\" max=\\"20000\\" step=\\"1\\" placeholder=\\"--\\" aria-label=\\"Width\\" disabled=\\"\\" value=\\"\\"><span class=\\"pixels\\">px <span class=\\"lighter\\">×</span></span><input type=\\"number\\" min=\\"1\\" max=\\"20000\\" step=\\"1\\" placeholder=\\"Height\\" aria-label=\\"Height\\" value=\\"999\\"><span class=\\"pixels\\">px</span></div></div><div class=\\"loading-container\\"><label for=\\"loading-select\\">Loading:</label><div id=\\"loading-select\\"><select><option value=\\"false\\">Load when student clicks IFrame</option><option value=\\"true\\">Load right away (Not recommended)</option></select></div></div><div class=\\"title-container\\"><label for=\\"title-input\\">Title:</label><div id=\\"title-input\\"><input type=\\"text\\" placeholder=\\"E.g.: The difference between speed and velocity\\" value=\\"\\"><small>This will be shown before the IFrame is loaded</small></div></div><div class=\\"advanced-options-container\\"><button class=\\"button-advanced-options\\"><span>Show all options (advanced)</span></button></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
+
+exports[`EditIframeModal EditIFrameModal component changes initial zoom 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">Edit Embedded IFrame</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"edit-iframe-modal\\"><header><label for=\\"src-input\\">Source:</label><div><input id=\\"src-input\\" disabled=\\"\\" value=\\"\\"><button>Change...</button></div></header><div class=\\"content-type\\"><div class=\\"content-type-options-container\\"><label id=\\"content-type-options-label\\" for=\\"content-type-options\\">Content type:</label><div id=\\"content-type-options\\"><label for=\\"video-or-media\\"><input id=\\"video-or-media\\" type=\\"radio\\" name=\\"content-type-option\\" value=\\"media\\" checked=\\"\\"><div><div class=\\"video-or-media-icon\\"></div><span>Video or other media</span></div></label><label for=\\"embedded-webpage\\"><input id=\\"embedded-webpage\\" type=\\"radio\\" name=\\"content-type-option\\" value=\\"webpage\\"><div><div class=\\"embedded-webpage-icon\\"></div><span>Embedded webpage</span></div></label></div></div><small>This helps determine how the embedded content is best displayed</small></div><p class=\\"title\\">Options</p><div class=\\"sizing\\"><label for=\\"sizing-options-container\\">Sizing</label><div id=\\"sizing-options-container\\"><div class=\\"sizing-options\\"><label for=\\"max-width\\"><input id=\\"max-width\\" type=\\"radio\\" name=\\"sizing-option\\" value=\\"max-width\\"><div class=\\"icon max-width-icon\\"></div><div class=\\"sizing-description\\"><p class=\\"sizing-title\\">Responsive - full width</p><p>Grows up to the largest size (wider thant text)</p></div></label><label for=\\"text-width\\" style=\\"background-color: rgb(229, 217, 227); color: rgb(103, 20, 189);\\"><input id=\\"text-width\\" type=\\"radio\\" name=\\"sizing-option\\" value=\\"text-width\\" checked=\\"\\"><div class=\\"icon text-width-icon\\"></div><div class=\\"sizing-description\\"><p class=\\"sizing-title\\">Responsive - text width</p><p>Grows up to the same width as the text</p></div></label><label for=\\"fixed-width\\"><input id=\\"fixed-width\\" type=\\"radio\\" name=\\"sizing-option\\" value=\\"fixed\\"><div class=\\"icon fixed-width-icon\\"></div><div class=\\"sizing-description\\"><p class=\\"sizing-title\\">Fixed size</p><p>Shows at set pixel dimensions</p></div></label></div><button><span>Edit dimensions</span></button></div></div><div class=\\"loading-container\\"><label for=\\"loading-select\\">Loading:</label><div id=\\"loading-select\\"><select><option value=\\"false\\">Load when student clicks IFrame</option><option value=\\"true\\">Load right away (Not recommended)</option></select></div></div><div class=\\"title-container\\"><label for=\\"title-input\\">Title:</label><div id=\\"title-input\\"><input type=\\"text\\" placeholder=\\"E.g.: The difference between speed and velocity\\" value=\\"\\"><small>This will be shown before the IFrame is loaded</small></div></div><div class=\\"advanced-options-container\\"><button class=\\"button-advanced-options\\"><span>Close advanced options</span></button><div class=\\"advanced-options\\"><div class=\\"fit-container\\"><label for=\\"select-fit\\">Fit:</label><select id=\\"select-fit\\"><option value=\\"scale\\">Scale</option><option value=\\"scroll\\">Scroll</option></select></div><div class=\\"initial-zoom-container\\"><label for=\\"initial-zoom\\">Initial <br> Zoom:</label><input id=\\"initial-zoom\\" min=\\"0.01\\" max=\\"1000\\" step=\\".01\\" type=\\"number\\" placeholder=\\"Decimal Value\\" value=\\"333\\"></div><p class=\\"title\\">Controls</p><div class=\\"controls\\"><div class=\\"border-container\\"><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Border</span><br><small>Adds a border around your embedded IFrame</small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div class=\\"reload-container\\"><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Reload</span><br><small>Adds a control option to reload the contents of the IFrame</small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\" checked=\\"\\"><div class=\\"switch-slider round\\"></div></label></div></div><div class=\\"new-window-container\\"><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">New Window</span><br><small>Allows the IFrame to be opened in a new window</small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div class=\\"zoom-container\\"><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Zoom</span><br><small>Allows students to zoom in and out on the IFrame contents</small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
+
+exports[`EditIframeModal EditIFrameModal component changes sizing 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">Edit Embedded IFrame</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"edit-iframe-modal\\"><header><label for=\\"src-input\\">Source:</label><div><input id=\\"src-input\\" disabled=\\"\\" value=\\"\\"><button>Change...</button></div></header><div class=\\"content-type\\"><div class=\\"content-type-options-container\\"><label id=\\"content-type-options-label\\" for=\\"content-type-options\\">Content type:</label><div id=\\"content-type-options\\"><label for=\\"video-or-media\\"><input id=\\"video-or-media\\" type=\\"radio\\" name=\\"content-type-option\\" value=\\"media\\" checked=\\"\\"><div><div class=\\"video-or-media-icon\\"></div><span>Video or other media</span></div></label><label for=\\"embedded-webpage\\"><input id=\\"embedded-webpage\\" type=\\"radio\\" name=\\"content-type-option\\" value=\\"webpage\\"><div><div class=\\"embedded-webpage-icon\\"></div><span>Embedded webpage</span></div></label></div></div><small>This helps determine how the embedded content is best displayed</small></div><p class=\\"title\\">Options</p><div class=\\"sizing\\"><label for=\\"sizing-options-container\\">Sizing</label><div id=\\"sizing-options-container\\"><div class=\\"sizing-options\\"><label for=\\"max-width\\" style=\\"background-color: rgb(229, 217, 227); color: rgb(103, 20, 189);\\"><input id=\\"max-width\\" type=\\"radio\\" name=\\"sizing-option\\" value=\\"max-width\\" checked=\\"\\"><div class=\\"icon max-width-icon\\"></div><div class=\\"sizing-description\\"><p class=\\"sizing-title\\">Responsive - full width</p><p>Grows up to the largest size (wider thant text)</p></div></label><label for=\\"text-width\\"><input id=\\"text-width\\" type=\\"radio\\" name=\\"sizing-option\\" value=\\"text-width\\"><div class=\\"icon text-width-icon\\"></div><div class=\\"sizing-description\\"><p class=\\"sizing-title\\">Responsive - text width</p><p>Grows up to the same width as the text</p></div></label><label for=\\"fixed-width\\"><input id=\\"fixed-width\\" type=\\"radio\\" name=\\"sizing-option\\" value=\\"fixed\\"><div class=\\"icon fixed-width-icon\\"></div><div class=\\"sizing-description\\"><p class=\\"sizing-title\\">Fixed size</p><p>Shows at set pixel dimensions</p></div></label></div><button><span>Edit dimensions</span></button></div></div><div class=\\"loading-container\\"><label for=\\"loading-select\\">Loading:</label><div id=\\"loading-select\\"><select><option value=\\"false\\">Load when student clicks IFrame</option><option value=\\"true\\">Load right away (Not recommended)</option></select></div></div><div class=\\"title-container\\"><label for=\\"title-input\\">Title:</label><div id=\\"title-input\\"><input type=\\"text\\" placeholder=\\"E.g.: The difference between speed and velocity\\" value=\\"\\"><small>This will be shown before the IFrame is loaded</small></div></div><div class=\\"advanced-options-container\\"><button class=\\"button-advanced-options\\"><span>Show all options (advanced)</span></button></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
+
+exports[`EditIframeModal EditIFrameModal component changes width 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">Edit Embedded IFrame</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"edit-iframe-modal\\"><header><label for=\\"src-input\\">Source:</label><div><input id=\\"src-input\\" disabled=\\"\\" value=\\"\\"><button>Change...</button></div></header><div class=\\"content-type\\"><div class=\\"content-type-options-container\\"><label id=\\"content-type-options-label\\" for=\\"content-type-options\\">Content type:</label><div id=\\"content-type-options\\"><label for=\\"video-or-media\\"><input id=\\"video-or-media\\" type=\\"radio\\" name=\\"content-type-option\\" value=\\"media\\" checked=\\"\\"><div><div class=\\"video-or-media-icon\\"></div><span>Video or other media</span></div></label><label for=\\"embedded-webpage\\"><input id=\\"embedded-webpage\\" type=\\"radio\\" name=\\"content-type-option\\" value=\\"webpage\\"><div><div class=\\"embedded-webpage-icon\\"></div><span>Embedded webpage</span></div></label></div></div><small>This helps determine how the embedded content is best displayed</small></div><p class=\\"title\\">Options</p><div class=\\"sizing\\"><label for=\\"sizing-options-container\\">Sizing</label><div id=\\"sizing-options-container\\"><div class=\\"sizing-options\\"><label for=\\"max-width\\"><input id=\\"max-width\\" type=\\"radio\\" name=\\"sizing-option\\" value=\\"max-width\\"><div class=\\"icon max-width-icon\\"></div><div class=\\"sizing-description\\"><p class=\\"sizing-title\\">Responsive - full width</p><p>Grows up to the largest size (wider thant text)</p></div></label><label for=\\"text-width\\" style=\\"background-color: rgb(229, 217, 227); color: rgb(103, 20, 189);\\"><input id=\\"text-width\\" type=\\"radio\\" name=\\"sizing-option\\" value=\\"text-width\\" checked=\\"\\"><div class=\\"icon text-width-icon\\"></div><div class=\\"sizing-description\\"><p class=\\"sizing-title\\">Responsive - text width</p><p>Grows up to the same width as the text</p></div></label><label for=\\"fixed-width\\"><input id=\\"fixed-width\\" type=\\"radio\\" name=\\"sizing-option\\" value=\\"fixed\\"><div class=\\"icon fixed-width-icon\\"></div><div class=\\"sizing-description\\"><p class=\\"sizing-title\\">Fixed size</p><p>Shows at set pixel dimensions</p></div></label></div><button><span>Close dimensions</span></button></div></div><div class=\\"dimensions-container\\"><div class=\\"left-padding\\"></div><div class=\\"dimensions\\"><input type=\\"number\\" min=\\"1\\" max=\\"20000\\" step=\\"1\\" placeholder=\\"--\\" aria-label=\\"Width\\" disabled=\\"\\" value=\\"\\"><span class=\\"pixels\\">px <span class=\\"lighter\\">×</span></span><input type=\\"number\\" min=\\"1\\" max=\\"20000\\" step=\\"1\\" placeholder=\\"Height\\" aria-label=\\"Height\\" value=\\"480\\"><span class=\\"pixels\\">px</span></div></div><div class=\\"loading-container\\"><label for=\\"loading-select\\">Loading:</label><div id=\\"loading-select\\"><select><option value=\\"false\\">Load when student clicks IFrame</option><option value=\\"true\\">Load right away (Not recommended)</option></select></div></div><div class=\\"title-container\\"><label for=\\"title-input\\">Title:</label><div id=\\"title-input\\"><input type=\\"text\\" placeholder=\\"E.g.: The difference between speed and velocity\\" value=\\"\\"><small>This will be shown before the IFrame is loaded</small></div></div><div class=\\"advanced-options-container\\"><button class=\\"button-advanced-options\\"><span>Show all options (advanced)</span></button></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
+
+exports[`EditIframeModal EditIframeModal component changes title 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">Edit Embedded IFrame</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"edit-iframe-modal\\"><header><label for=\\"src-input\\">Source:</label><div><input id=\\"src-input\\" disabled=\\"\\" value=\\"\\"><button>Change...</button></div></header><div class=\\"content-type\\"><div class=\\"content-type-options-container\\"><label id=\\"content-type-options-label\\" for=\\"content-type-options\\">Content type:</label><div id=\\"content-type-options\\"><label for=\\"video-or-media\\"><input id=\\"video-or-media\\" type=\\"radio\\" name=\\"content-type-option\\" value=\\"media\\" checked=\\"\\"><div><div class=\\"video-or-media-icon\\"></div><span>Video or other media</span></div></label><label for=\\"embedded-webpage\\"><input id=\\"embedded-webpage\\" type=\\"radio\\" name=\\"content-type-option\\" value=\\"webpage\\"><div><div class=\\"embedded-webpage-icon\\"></div><span>Embedded webpage</span></div></label></div></div><small>This helps determine how the embedded content is best displayed</small></div><p class=\\"title\\">Options</p><div class=\\"sizing\\"><label for=\\"sizing-options-container\\">Sizing</label><div id=\\"sizing-options-container\\"><div class=\\"sizing-options\\"><label for=\\"max-width\\"><input id=\\"max-width\\" type=\\"radio\\" name=\\"sizing-option\\" value=\\"max-width\\"><div class=\\"icon max-width-icon\\"></div><div class=\\"sizing-description\\"><p class=\\"sizing-title\\">Responsive - full width</p><p>Grows up to the largest size (wider thant text)</p></div></label><label for=\\"text-width\\" style=\\"background-color: rgb(229, 217, 227); color: rgb(103, 20, 189);\\"><input id=\\"text-width\\" type=\\"radio\\" name=\\"sizing-option\\" value=\\"text-width\\" checked=\\"\\"><div class=\\"icon text-width-icon\\"></div><div class=\\"sizing-description\\"><p class=\\"sizing-title\\">Responsive - text width</p><p>Grows up to the same width as the text</p></div></label><label for=\\"fixed-width\\"><input id=\\"fixed-width\\" type=\\"radio\\" name=\\"sizing-option\\" value=\\"fixed\\"><div class=\\"icon fixed-width-icon\\"></div><div class=\\"sizing-description\\"><p class=\\"sizing-title\\">Fixed size</p><p>Shows at set pixel dimensions</p></div></label></div><button><span>Edit dimensions</span></button></div></div><div class=\\"loading-container\\"><label for=\\"loading-select\\">Loading:</label><div id=\\"loading-select\\"><select><option value=\\"false\\">Load when student clicks IFrame</option><option value=\\"true\\">Load right away (Not recommended)</option></select></div></div><div class=\\"title-container\\"><label for=\\"title-input\\">Title:</label><div id=\\"title-input\\"><input type=\\"text\\" placeholder=\\"E.g.: The difference between speed and velocity\\" value=\\"changed\\"><small>This will be shown before the IFrame is loaded</small></div></div><div class=\\"advanced-options-container\\"><button class=\\"button-advanced-options\\"><span>Show all options (advanced)</span></button></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
+
+exports[`EditIframeModal EditIframeModal component mounts as expected 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">Edit Embedded IFrame</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"edit-iframe-modal\\"><header><label for=\\"src-input\\">Source:</label><div><input id=\\"src-input\\" disabled=\\"\\" value=\\"\\"><button>Change...</button></div></header><div class=\\"content-type\\"><div class=\\"content-type-options-container\\"><label id=\\"content-type-options-label\\" for=\\"content-type-options\\">Content type:</label><div id=\\"content-type-options\\"><label for=\\"video-or-media\\"><input id=\\"video-or-media\\" type=\\"radio\\" name=\\"content-type-option\\" value=\\"media\\" checked=\\"\\"><div><div class=\\"video-or-media-icon\\"></div><span>Video or other media</span></div></label><label for=\\"embedded-webpage\\"><input id=\\"embedded-webpage\\" type=\\"radio\\" name=\\"content-type-option\\" value=\\"webpage\\"><div><div class=\\"embedded-webpage-icon\\"></div><span>Embedded webpage</span></div></label></div></div><small>This helps determine how the embedded content is best displayed</small></div><p class=\\"title\\">Options</p><div class=\\"sizing\\"><label for=\\"sizing-options-container\\">Sizing</label><div id=\\"sizing-options-container\\"><div class=\\"sizing-options\\"><label for=\\"max-width\\"><input id=\\"max-width\\" type=\\"radio\\" name=\\"sizing-option\\" value=\\"max-width\\"><div class=\\"icon max-width-icon\\"></div><div class=\\"sizing-description\\"><p class=\\"sizing-title\\">Responsive - full width</p><p>Grows up to the largest size (wider thant text)</p></div></label><label for=\\"text-width\\" style=\\"background-color: rgb(229, 217, 227); color: rgb(103, 20, 189);\\"><input id=\\"text-width\\" type=\\"radio\\" name=\\"sizing-option\\" value=\\"text-width\\" checked=\\"\\"><div class=\\"icon text-width-icon\\"></div><div class=\\"sizing-description\\"><p class=\\"sizing-title\\">Responsive - text width</p><p>Grows up to the same width as the text</p></div></label><label for=\\"fixed-width\\"><input id=\\"fixed-width\\" type=\\"radio\\" name=\\"sizing-option\\" value=\\"fixed\\"><div class=\\"icon fixed-width-icon\\"></div><div class=\\"sizing-description\\"><p class=\\"sizing-title\\">Fixed size</p><p>Shows at set pixel dimensions</p></div></label></div><button><span>Edit dimensions</span></button></div></div><div class=\\"loading-container\\"><label for=\\"loading-select\\">Loading:</label><div id=\\"loading-select\\"><select><option value=\\"false\\">Load when student clicks IFrame</option><option value=\\"true\\">Load right away (Not recommended)</option></select></div></div><div class=\\"title-container\\"><label for=\\"title-input\\">Title:</label><div id=\\"title-input\\"><input type=\\"text\\" placeholder=\\"E.g.: The difference between speed and velocity\\" value=\\"\\"><small>This will be shown before the IFrame is loaded</small></div></div><div class=\\"advanced-options-container\\"><button class=\\"button-advanced-options\\"><span>Show all options (advanced)</span></button></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
+
+exports[`EditIframeModal IFrameProperties component changes fit 1`] = `
+<div
+  className="obojobo-draft--components--modal--simple-dialog"
+>
+  <div
+    className="obojobo-draft--components--modal--dialog "
+    style={null}
+  >
+    <div
+      aria-atomic="true"
+      aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
+      className="obojobo-draft--components--modal--modal"
+      role="dialog"
+      tabIndex="-1"
+    >
+      <input
+        aria-label="Start of dialog"
+        className="first-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+      <div
+        className="content"
+        id="obojobo-draft--components--modal--modal--content"
+      >
+        <h1
+          className="heading"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          Edit Embedded IFrame
+        </h1>
+        <div
+          className="dialog-content"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          <div
+            className="edit-iframe-modal"
+          >
+            <header>
+              <label
+                htmlFor="src-input"
+              >
+                Source:
+              </label>
+              <div>
+                <input
+                  disabled={true}
+                  id="src-input"
+                  value=""
+                />
+                <button
+                  onClick={[Function]}
+                >
+                  Change...
+                </button>
+              </div>
+            </header>
+            <div
+              className="content-type"
+            >
+              <div
+                className="content-type-options-container"
+              >
+                <label
+                  htmlFor="content-type-options"
+                  id="content-type-options-label"
+                >
+                  Content type:
+                </label>
+                <div
+                  id="content-type-options"
+                >
+                  <label
+                    htmlFor="video-or-media"
+                  >
+                    <input
+                      checked={true}
+                      id="video-or-media"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="media"
+                    />
+                    <div>
+                      <div
+                        className="video-or-media-icon"
+                      />
+                      <span>
+                        Video or other media
+                      </span>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="embedded-webpage"
+                  >
+                    <input
+                      checked={false}
+                      id="embedded-webpage"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="webpage"
+                    />
+                    <div>
+                      <div
+                        className="embedded-webpage-icon"
+                      />
+                      <span>
+                        Embedded webpage
+                      </span>
+                    </div>
+                  </label>
+                </div>
+              </div>
+              <small>
+                This helps determine how the embedded content is best displayed
+              </small>
+            </div>
+            <p
+              className="title"
+            >
+              Options
+            </p>
+            <div
+              className="sizing"
+            >
+              <label
+                htmlFor="sizing-options-container"
+              >
+                Sizing
+              </label>
+              <div
+                id="sizing-options-container"
+              >
+                <div
+                  className="sizing-options"
+                >
+                  <label
+                    htmlFor="max-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="max-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="max-width"
+                    />
+                    <div
+                      className="icon max-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - full width
+                      </p>
+                      <p>
+                        Grows up to the largest size (wider thant text)
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="text-width"
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "backgroundColor": "#e5d9e3",
+                        "color": "#6714bd",
+                      }
+                    }
+                  >
+                    <input
+                      checked={true}
+                      id="text-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="text-width"
+                    />
+                    <div
+                      className="icon text-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - text width
+                      </p>
+                      <p>
+                        Grows up to the same width as the text
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="fixed-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="fixed-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="fixed"
+                    />
+                    <div
+                      className="icon fixed-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Fixed size
+                      </p>
+                      <p>
+                        Shows at set pixel dimensions
+                      </p>
+                    </div>
+                  </label>
+                </div>
+                <button
+                  onClick={[Function]}
+                >
+                  <span>
+                    Edit dimensions
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              className="loading-container"
+            >
+              <label
+                htmlFor="loading-select"
+              >
+                Loading:
+              </label>
+              <div
+                id="loading-select"
+              >
+                <select
+                  onChange={[Function]}
+                  value={false}
+                >
+                  <option
+                    value={false}
+                  >
+                    Load when student clicks IFrame
+                  </option>
+                  <option
+                    value={true}
+                  >
+                    Load right away (Not recommended)
+                  </option>
+                </select>
+              </div>
+            </div>
+            <div
+              className="title-container"
+            >
+              <label
+                htmlFor="title-input"
+              >
+                Title:
+              </label>
+              <div
+                id="title-input"
+              >
+                <input
+                  onChange={[Function]}
+                  placeholder="E.g.: The difference between speed and velocity"
+                  type="text"
+                  value=""
+                />
+                <small>
+                  This will be shown before the IFrame is loaded
+                </small>
+              </div>
+            </div>
+            <div
+              className="advanced-options-container"
+            >
+              <button
+                className="button-advanced-options"
+                onClick={[Function]}
+              >
+                <span>
+                  Close advanced options
+                </span>
+              </button>
+              <div
+                className="advanced-options"
+              >
+                <div
+                  className="fit-container"
+                >
+                  <label
+                    htmlFor="select-fit"
+                  >
+                    Fit:
+                  </label>
+                  <select
+                    id="select-fit"
+                    onChange={[Function]}
+                    value="scale"
+                  >
+                    <option
+                      value="scale"
+                    >
+                      Scale
+                    </option>
+                    <option
+                      value="scroll"
+                    >
+                      Scroll
+                    </option>
+                  </select>
+                </div>
+                <div
+                  className="initial-zoom-container"
+                >
+                  <label
+                    htmlFor="initial-zoom"
+                  >
+                    Initial 
+                    <br />
+                     Zoom:
+                  </label>
+                  <input
+                    id="initial-zoom"
+                    max="1000"
+                    min="0.01"
+                    onChange={[Function]}
+                    placeholder="Decimal Value"
+                    step=".01"
+                    type="number"
+                    value={1}
+                  />
+                </div>
+                <p
+                  className="title"
+                >
+                  Controls
+                </p>
+                <div
+                  className="controls"
+                >
+                  <div
+                    className="border-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Border
+                        </span>
+                        <br />
+                        <small>
+                          Adds a border around your embedded IFrame
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="reload-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Reload
+                        </span>
+                        <br />
+                        <small>
+                          Adds a control option to reload the contents of the IFrame
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={true}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="new-window-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          New Window
+                        </span>
+                        <br />
+                        <small>
+                          Allows the IFrame to be opened in a new window
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="zoom-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Zoom
+                        </span>
+                        <br />
+                        <small>
+                          Allows students to zoom in and out on the IFrame contents
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="controls"
+        >
+          <div
+            className="obojobo-draft--components--button alt-action is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
+          <div
+            className="obojobo-draft--components--button is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+      <input
+        aria-label="End of dialog"
+        className="last-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EditIframeModal IFrameProperties component changes fit 2`] = `
+<div
+  className="obojobo-draft--components--modal--simple-dialog"
+>
+  <div
+    className="obojobo-draft--components--modal--dialog "
+    style={null}
+  >
+    <div
+      aria-atomic="true"
+      aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
+      className="obojobo-draft--components--modal--modal"
+      role="dialog"
+      tabIndex="-1"
+    >
+      <input
+        aria-label="Start of dialog"
+        className="first-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+      <div
+        className="content"
+        id="obojobo-draft--components--modal--modal--content"
+      >
+        <h1
+          className="heading"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          Edit Embedded IFrame
+        </h1>
+        <div
+          className="dialog-content"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          <div
+            className="edit-iframe-modal"
+          >
+            <header>
+              <label
+                htmlFor="src-input"
+              >
+                Source:
+              </label>
+              <div>
+                <input
+                  disabled={true}
+                  id="src-input"
+                  value=""
+                />
+                <button
+                  onClick={[Function]}
+                >
+                  Change...
+                </button>
+              </div>
+            </header>
+            <div
+              className="content-type"
+            >
+              <div
+                className="content-type-options-container"
+              >
+                <label
+                  htmlFor="content-type-options"
+                  id="content-type-options-label"
+                >
+                  Content type:
+                </label>
+                <div
+                  id="content-type-options"
+                >
+                  <label
+                    htmlFor="video-or-media"
+                  >
+                    <input
+                      checked={true}
+                      id="video-or-media"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="media"
+                    />
+                    <div>
+                      <div
+                        className="video-or-media-icon"
+                      />
+                      <span>
+                        Video or other media
+                      </span>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="embedded-webpage"
+                  >
+                    <input
+                      checked={false}
+                      id="embedded-webpage"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="webpage"
+                    />
+                    <div>
+                      <div
+                        className="embedded-webpage-icon"
+                      />
+                      <span>
+                        Embedded webpage
+                      </span>
+                    </div>
+                  </label>
+                </div>
+              </div>
+              <small>
+                This helps determine how the embedded content is best displayed
+              </small>
+            </div>
+            <p
+              className="title"
+            >
+              Options
+            </p>
+            <div
+              className="sizing"
+            >
+              <label
+                htmlFor="sizing-options-container"
+              >
+                Sizing
+              </label>
+              <div
+                id="sizing-options-container"
+              >
+                <div
+                  className="sizing-options"
+                >
+                  <label
+                    htmlFor="max-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="max-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="max-width"
+                    />
+                    <div
+                      className="icon max-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - full width
+                      </p>
+                      <p>
+                        Grows up to the largest size (wider thant text)
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="text-width"
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "backgroundColor": "#e5d9e3",
+                        "color": "#6714bd",
+                      }
+                    }
+                  >
+                    <input
+                      checked={true}
+                      id="text-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="text-width"
+                    />
+                    <div
+                      className="icon text-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - text width
+                      </p>
+                      <p>
+                        Grows up to the same width as the text
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="fixed-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="fixed-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="fixed"
+                    />
+                    <div
+                      className="icon fixed-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Fixed size
+                      </p>
+                      <p>
+                        Shows at set pixel dimensions
+                      </p>
+                    </div>
+                  </label>
+                </div>
+                <button
+                  onClick={[Function]}
+                >
+                  <span>
+                    Edit dimensions
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              className="loading-container"
+            >
+              <label
+                htmlFor="loading-select"
+              >
+                Loading:
+              </label>
+              <div
+                id="loading-select"
+              >
+                <select
+                  onChange={[Function]}
+                  value={false}
+                >
+                  <option
+                    value={false}
+                  >
+                    Load when student clicks IFrame
+                  </option>
+                  <option
+                    value={true}
+                  >
+                    Load right away (Not recommended)
+                  </option>
+                </select>
+              </div>
+            </div>
+            <div
+              className="title-container"
+            >
+              <label
+                htmlFor="title-input"
+              >
+                Title:
+              </label>
+              <div
+                id="title-input"
+              >
+                <input
+                  onChange={[Function]}
+                  placeholder="E.g.: The difference between speed and velocity"
+                  type="text"
+                  value=""
+                />
+                <small>
+                  This will be shown before the IFrame is loaded
+                </small>
+              </div>
+            </div>
+            <div
+              className="advanced-options-container"
+            >
+              <button
+                className="button-advanced-options"
+                onClick={[Function]}
+              >
+                <span>
+                  Close advanced options
+                </span>
+              </button>
+              <div
+                className="advanced-options"
+              >
+                <div
+                  className="fit-container"
+                >
+                  <label
+                    htmlFor="select-fit"
+                  >
+                    Fit:
+                  </label>
+                  <select
+                    id="select-fit"
+                    onChange={[Function]}
+                    value="changed"
+                  >
+                    <option
+                      value="scale"
+                    >
+                      Scale
+                    </option>
+                    <option
+                      value="scroll"
+                    >
+                      Scroll
+                    </option>
+                  </select>
+                </div>
+                <div
+                  className="initial-zoom-container"
+                >
+                  <label
+                    htmlFor="initial-zoom"
+                  >
+                    Initial 
+                    <br />
+                     Zoom:
+                  </label>
+                  <input
+                    id="initial-zoom"
+                    max="1000"
+                    min="0.01"
+                    onChange={[Function]}
+                    placeholder="Decimal Value"
+                    step=".01"
+                    type="number"
+                    value={1}
+                  />
+                </div>
+                <p
+                  className="title"
+                >
+                  Controls
+                </p>
+                <div
+                  className="controls"
+                >
+                  <div
+                    className="border-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Border
+                        </span>
+                        <br />
+                        <small>
+                          Adds a border around your embedded IFrame
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="reload-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Reload
+                        </span>
+                        <br />
+                        <small>
+                          Adds a control option to reload the contents of the IFrame
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={true}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="new-window-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          New Window
+                        </span>
+                        <br />
+                        <small>
+                          Allows the IFrame to be opened in a new window
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="zoom-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Zoom
+                        </span>
+                        <br />
+                        <small>
+                          Allows students to zoom in and out on the IFrame contents
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="controls"
+        >
+          <div
+            className="obojobo-draft--components--button alt-action is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
+          <div
+            className="obojobo-draft--components--button is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+      <input
+        aria-label="End of dialog"
+        className="last-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EditIframeModal IFrameProperties component changes fit 3`] = `
+<div
+  className="obojobo-draft--components--modal--simple-dialog"
+>
+  <div
+    className="obojobo-draft--components--modal--dialog "
+    style={null}
+  >
+    <div
+      aria-atomic="true"
+      aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
+      className="obojobo-draft--components--modal--modal"
+      role="dialog"
+      tabIndex="-1"
+    >
+      <input
+        aria-label="Start of dialog"
+        className="first-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+      <div
+        className="content"
+        id="obojobo-draft--components--modal--modal--content"
+      >
+        <h1
+          className="heading"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          Edit Embedded IFrame
+        </h1>
+        <div
+          className="dialog-content"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          <div
+            className="edit-iframe-modal"
+          >
+            <header>
+              <label
+                htmlFor="src-input"
+              >
+                Source:
+              </label>
+              <div>
+                <input
+                  disabled={true}
+                  id="src-input"
+                  value=""
+                />
+                <button
+                  onClick={[Function]}
+                >
+                  Change...
+                </button>
+              </div>
+            </header>
+            <div
+              className="content-type"
+            >
+              <div
+                className="content-type-options-container"
+              >
+                <label
+                  htmlFor="content-type-options"
+                  id="content-type-options-label"
+                >
+                  Content type:
+                </label>
+                <div
+                  id="content-type-options"
+                >
+                  <label
+                    htmlFor="video-or-media"
+                  >
+                    <input
+                      checked={true}
+                      id="video-or-media"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="media"
+                    />
+                    <div>
+                      <div
+                        className="video-or-media-icon"
+                      />
+                      <span>
+                        Video or other media
+                      </span>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="embedded-webpage"
+                  >
+                    <input
+                      checked={false}
+                      id="embedded-webpage"
+                      name="content-type-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="webpage"
+                    />
+                    <div>
+                      <div
+                        className="embedded-webpage-icon"
+                      />
+                      <span>
+                        Embedded webpage
+                      </span>
+                    </div>
+                  </label>
+                </div>
+              </div>
+              <small>
+                This helps determine how the embedded content is best displayed
+              </small>
+            </div>
+            <p
+              className="title"
+            >
+              Options
+            </p>
+            <div
+              className="sizing"
+            >
+              <label
+                htmlFor="sizing-options-container"
+              >
+                Sizing
+              </label>
+              <div
+                id="sizing-options-container"
+              >
+                <div
+                  className="sizing-options"
+                >
+                  <label
+                    htmlFor="max-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="max-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="max-width"
+                    />
+                    <div
+                      className="icon max-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - full width
+                      </p>
+                      <p>
+                        Grows up to the largest size (wider thant text)
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="text-width"
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "backgroundColor": "#e5d9e3",
+                        "color": "#6714bd",
+                      }
+                    }
+                  >
+                    <input
+                      checked={true}
+                      id="text-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="text-width"
+                    />
+                    <div
+                      className="icon text-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Responsive - text width
+                      </p>
+                      <p>
+                        Grows up to the same width as the text
+                      </p>
+                    </div>
+                  </label>
+                  <label
+                    htmlFor="fixed-width"
+                    onClick={[Function]}
+                    style={Object {}}
+                  >
+                    <input
+                      checked={false}
+                      id="fixed-width"
+                      name="sizing-option"
+                      onChange={[Function]}
+                      type="radio"
+                      value="fixed"
+                    />
+                    <div
+                      className="icon fixed-width-icon"
+                    />
+                    <div
+                      className="sizing-description"
+                    >
+                      <p
+                        className="sizing-title"
+                      >
+                        Fixed size
+                      </p>
+                      <p>
+                        Shows at set pixel dimensions
+                      </p>
+                    </div>
+                  </label>
+                </div>
+                <button
+                  onClick={[Function]}
+                >
+                  <span>
+                    Edit dimensions
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              className="loading-container"
+            >
+              <label
+                htmlFor="loading-select"
+              >
+                Loading:
+              </label>
+              <div
+                id="loading-select"
+              >
+                <select
+                  onChange={[Function]}
+                  value={false}
+                >
+                  <option
+                    value={false}
+                  >
+                    Load when student clicks IFrame
+                  </option>
+                  <option
+                    value={true}
+                  >
+                    Load right away (Not recommended)
+                  </option>
+                </select>
+              </div>
+            </div>
+            <div
+              className="title-container"
+            >
+              <label
+                htmlFor="title-input"
+              >
+                Title:
+              </label>
+              <div
+                id="title-input"
+              >
+                <input
+                  onChange={[Function]}
+                  placeholder="E.g.: The difference between speed and velocity"
+                  type="text"
+                  value=""
+                />
+                <small>
+                  This will be shown before the IFrame is loaded
+                </small>
+              </div>
+            </div>
+            <div
+              className="advanced-options-container"
+            >
+              <button
+                className="button-advanced-options"
+                onClick={[Function]}
+              >
+                <span>
+                  Close advanced options
+                </span>
+              </button>
+              <div
+                className="advanced-options"
+              >
+                <div
+                  className="fit-container"
+                >
+                  <label
+                    htmlFor="select-fit"
+                  >
+                    Fit:
+                  </label>
+                  <select
+                    id="select-fit"
+                    onChange={[Function]}
+                    value="scale"
+                  >
+                    <option
+                      value="scale"
+                    >
+                      Scale
+                    </option>
+                    <option
+                      value="scroll"
+                    >
+                      Scroll
+                    </option>
+                  </select>
+                </div>
+                <div
+                  className="initial-zoom-container"
+                >
+                  <label
+                    htmlFor="initial-zoom"
+                  >
+                    Initial 
+                    <br />
+                     Zoom:
+                  </label>
+                  <input
+                    id="initial-zoom"
+                    max="1000"
+                    min="0.01"
+                    onChange={[Function]}
+                    placeholder="Decimal Value"
+                    step=".01"
+                    type="number"
+                    value={1}
+                  />
+                </div>
+                <p
+                  className="title"
+                >
+                  Controls
+                </p>
+                <div
+                  className="controls"
+                >
+                  <div
+                    className="border-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Border
+                        </span>
+                        <br />
+                        <small>
+                          Adds a border around your embedded IFrame
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="reload-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Reload
+                        </span>
+                        <br />
+                        <small>
+                          Adds a control option to reload the contents of the IFrame
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="new-window-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          New Window
+                        </span>
+                        <br />
+                        <small>
+                          Allows the IFrame to be opened in a new window
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    className="zoom-container"
+                  >
+                    <div
+                      className="obojobo-draft--components--switch"
+                    >
+                      <div
+                        className="text-content"
+                      >
+                        <span
+                          contentEditable={false}
+                        >
+                          Zoom
+                        </span>
+                        <br />
+                        <small>
+                          Allows students to zoom in and out on the IFrame contents
+                        </small>
+                      </div>
+                      <label
+                        className="switch"
+                      >
+                        <input
+                          checked={false}
+                          className="switch-slider"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <div
+                          className="switch-slider round"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="controls"
+        >
+          <div
+            className="obojobo-draft--components--button alt-action is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
+          <div
+            className="obojobo-draft--components--button is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+      <input
+        aria-label="End of dialog"
+        className="last-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/obonode/obojobo-chunks-iframe/__snapshots__/editor-component.test.js.snap b/packages/obonode/obojobo-chunks-iframe/__snapshots__/editor-component.test.js.snap
index 3ebca87495..edd483da0c 100644
--- a/packages/obonode/obojobo-chunks-iframe/__snapshots__/editor-component.test.js.snap
+++ b/packages/obonode/obojobo-chunks-iframe/__snapshots__/editor-component.test.js.snap
@@ -64,6 +64,130 @@ exports[`IFrame Editor Node IFrame component 1`] = `
 
 exports[`IFrame Editor Node IFrame component handles tab 1`] = `"<div><div class=\\"obojobo-draft--chunks--iframe viewer pad is-previewing  is-not-bordered is-not-showing  is-controls-enabled  is-missing-src is-not-scaled-up\\" contenteditable=\\"false\\"><div class=\\"editor-container   is-not-selected\\" style=\\"height: 500px; user-select: none;\\"><div class=\\"obojobo-draft--components--button is-not-dangerous align-center delete-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" tabindex=\\"-1\\" contenteditable=\\"false\\">×</button></div><div class=\\"iframe-toolbar\\"><span class=\\"title\\" aria-hidden=\\"true\\" contenteditable=\\"false\\">IFrame missing src attribute</span><div class=\\"obojobo-draft--components--button is-not-dangerous align-center properties-button\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" tabindex=\\"-1\\" contenteditable=\\"false\\">IFrame Properties</button></div></div></div></div></div>"`;
 
+exports[`IFrame Editor Node IFrame opens EditIFrameModal when a src is set 1`] = `
+<div>
+  <div
+    className="obojobo-draft--chunks--iframe viewer pad is-previewing  is-not-bordered is-not-showing  is-controls-enabled  is-not-missing-src is-not-scaled-up"
+    contentEditable={false}
+  >
+    <div
+      className="editor-container   is-not-selected"
+      onClick={[Function]}
+      style={
+        Object {
+          "height": "500px",
+          "userSelect": "none",
+        }
+      }
+    >
+      <div
+        className="obojobo-draft--components--button is-not-dangerous align-center delete-button"
+        contentEditable={false}
+      >
+        <button
+          className="button"
+          contentEditable={false}
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          tabIndex={-1}
+          type="button"
+        >
+          ×
+        </button>
+      </div>
+      <div
+        className="iframe-toolbar"
+      >
+        <span
+          aria-hidden={true}
+          className="title"
+          contentEditable={false}
+        >
+          mock-src
+        </span>
+        <div
+          className="obojobo-draft--components--button is-not-dangerous align-center properties-button"
+          contentEditable={false}
+        >
+          <button
+            className="button"
+            contentEditable={false}
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            tabIndex={-1}
+            type="button"
+          >
+            IFrame Properties
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`IFrame Editor Node IFrame opens NewIFrameModal after onChange... is pressed 1`] = `
+<div>
+  <div
+    className="obojobo-draft--chunks--iframe viewer pad is-previewing  is-not-bordered is-not-showing  is-controls-enabled  is-missing-src is-not-scaled-up"
+    contentEditable={false}
+  >
+    <div
+      className="editor-container   is-not-selected"
+      onClick={[Function]}
+      style={
+        Object {
+          "height": "500px",
+          "userSelect": "none",
+        }
+      }
+    >
+      <div
+        className="obojobo-draft--components--button is-not-dangerous align-center delete-button"
+        contentEditable={false}
+      >
+        <button
+          className="button"
+          contentEditable={false}
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          tabIndex={-1}
+          type="button"
+        >
+          ×
+        </button>
+      </div>
+      <div
+        className="iframe-toolbar"
+      >
+        <span
+          aria-hidden={true}
+          className="title"
+          contentEditable={false}
+        >
+          IFrame missing src attribute
+        </span>
+        <div
+          className="obojobo-draft--components--button is-not-dangerous align-center properties-button"
+          contentEditable={false}
+        >
+          <button
+            className="button"
+            contentEditable={false}
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            tabIndex={-1}
+            type="button"
+          >
+            IFrame Properties
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`IFrame Editor Node IFrame renders with no size correctly 1`] = `
 <div>
   <div
diff --git a/packages/obonode/obojobo-chunks-iframe/__snapshots__/iframe-properties-modal.test.js.snap b/packages/obonode/obojobo-chunks-iframe/__snapshots__/iframe-properties-modal.test.js.snap
index a6a5f50057..988e9bf26f 100644
--- a/packages/obonode/obojobo-chunks-iframe/__snapshots__/iframe-properties-modal.test.js.snap
+++ b/packages/obonode/obojobo-chunks-iframe/__snapshots__/iframe-properties-modal.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`IFrame Properties Modal IFrameProperties component 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">IFrame Properties</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"iframe-properties\\"><div class=\\"info\\"><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--title\\">Title:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--title\\" placeholder=\\"IFrame Title\\" value=\\"\\"></div><div class=\\"source-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--src\\">Source:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--src\\" placeholder=\\"Web Address\\" value=\\"\\"></div></div><div class=\\"options\\"><h2>Options:</h2><div class=\\"sizing-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\">Sizing:</label><select id=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\"><option value=\\"fixed\\">Fixed</option><option value=\\"text-width\\">Text Width</option><option value=\\"max-width\\">Max Width</option></select></div><div><label>Dimensions:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-width\\" name=\\"custom-width\\" min=\\"1\\" max=\\"20000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Width\\" aria-label=\\"Width\\" value=\\"640\\"><span class=\\"px-label\\">px ×</span><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-height\\" min=\\"1\\" max=\\"200000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Height\\" aria-label=\\"Height\\" value=\\"480\\"><span class=\\"px-label\\">px</span></div><div class=\\"border-option-container\\"><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Border</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Autoload</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\">Fit:</label><select id=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\"><option value=\\"scale\\">Scale</option><option value=\\"scroll\\">Scroll</option></select></div><div class=\\"zoom-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\">Initial Zoom:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\" min=\\"0.01\\" max=\\"1000\\" step=\\".01\\" type=\\"number\\" placeholder=\\"Decimal Value\\" value=\\"1\\"></div></div><div class=\\"controls\\"><h2>Controls:</h2><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Reload</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">New Window</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Zoom</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
+exports[`IFrame Properties Modal IFrameProperties component 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">IFrame Properties</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"iframe-properties\\"><div class=\\"info\\"><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--title\\">Title:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--title\\" placeholder=\\"IFrame Title\\" value=\\"\\"></div><div class=\\"source-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--src\\">Source:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--src\\" placeholder=\\"Web Address\\" value=\\"\\"></div></div><div class=\\"options\\"><h2>Options:</h2><div class=\\"sizing-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\">Sizing:</label><select id=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\"><option value=\\"fixed\\">Fixed</option><option value=\\"text-width\\">Text Width</option><option value=\\"max-width\\">Max Width</option></select></div><div><label>Dimensions:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-width\\" name=\\"custom-width\\" min=\\"1\\" max=\\"20000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Width\\" aria-label=\\"Width\\" value=\\"640\\"><span class=\\"px-label\\">px ×</span><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-height\\" min=\\"1\\" max=\\"200000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Height\\" aria-label=\\"Height\\" value=\\"480\\"><span class=\\"px-label\\">px</span></div><div class=\\"border-option-container\\"><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Border</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Autoload</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\">Fit:</label><select id=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\"><option value=\\"scale\\">Scale</option><option value=\\"scroll\\">Scroll</option></select></div><div class=\\"zoom-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\">Initial Zoom:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\" min=\\"0.01\\" max=\\"1000\\" step=\\".01\\" type=\\"number\\" placeholder=\\"Decimal Value\\" value=\\"1\\"></div></div><div class=\\"controls\\"><h2>Controls:</h2><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Reload</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">New Window</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Zoom</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
 
 exports[`IFrame Properties Modal IFrameProperties component changes New Window 1`] = `
 <div
@@ -164,11 +164,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes New Window 1
                 <div
                   className="obojobo-draft--components--switch"
                 >
-                  <span
-                    contentEditable={false}
-                  >
-                    Border
-                  </span>
+                  <div
+                    className="text-content"
+                  >
+                    <span
+                      contentEditable={false}
+                    >
+                      Border
+                    </span>
+                    <br />
+                    <small />
+                  </div>
                   <label
                     className="switch"
                   >
@@ -188,11 +194,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes New Window 1
                 <div
                   className="obojobo-draft--components--switch"
                 >
-                  <span
-                    contentEditable={false}
-                  >
-                    Autoload
-                  </span>
+                  <div
+                    className="text-content"
+                  >
+                    <span
+                      contentEditable={false}
+                    >
+                      Autoload
+                    </span>
+                    <br />
+                    <small />
+                  </div>
                   <label
                     className="switch"
                   >
@@ -260,11 +272,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes New Window 1
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  Reload
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    Reload
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -282,11 +300,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes New Window 1
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  New Window
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    New Window
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -304,11 +328,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes New Window 1
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  Zoom
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    Zoom
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -530,11 +560,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes New Window 2
                 <div
                   className="obojobo-draft--components--switch"
                 >
-                  <span
-                    contentEditable={false}
-                  >
-                    Border
-                  </span>
+                  <div
+                    className="text-content"
+                  >
+                    <span
+                      contentEditable={false}
+                    >
+                      Border
+                    </span>
+                    <br />
+                    <small />
+                  </div>
                   <label
                     className="switch"
                   >
@@ -554,11 +590,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes New Window 2
                 <div
                   className="obojobo-draft--components--switch"
                 >
-                  <span
-                    contentEditable={false}
-                  >
-                    Autoload
-                  </span>
+                  <div
+                    className="text-content"
+                  >
+                    <span
+                      contentEditable={false}
+                    >
+                      Autoload
+                    </span>
+                    <br />
+                    <small />
+                  </div>
                   <label
                     className="switch"
                   >
@@ -626,11 +668,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes New Window 2
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  Reload
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    Reload
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -648,11 +696,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes New Window 2
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  New Window
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    New Window
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -670,11 +724,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes New Window 2
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  Zoom
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    Zoom
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -896,11 +956,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes Reload 1`] =
                 <div
                   className="obojobo-draft--components--switch"
                 >
-                  <span
-                    contentEditable={false}
-                  >
-                    Border
-                  </span>
+                  <div
+                    className="text-content"
+                  >
+                    <span
+                      contentEditable={false}
+                    >
+                      Border
+                    </span>
+                    <br />
+                    <small />
+                  </div>
                   <label
                     className="switch"
                   >
@@ -920,11 +986,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes Reload 1`] =
                 <div
                   className="obojobo-draft--components--switch"
                 >
-                  <span
-                    contentEditable={false}
-                  >
-                    Autoload
-                  </span>
+                  <div
+                    className="text-content"
+                  >
+                    <span
+                      contentEditable={false}
+                    >
+                      Autoload
+                    </span>
+                    <br />
+                    <small />
+                  </div>
                   <label
                     className="switch"
                   >
@@ -992,11 +1064,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes Reload 1`] =
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  Reload
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    Reload
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -1014,11 +1092,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes Reload 1`] =
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  New Window
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    New Window
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -1036,11 +1120,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes Reload 1`] =
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  Zoom
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    Zoom
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -1262,11 +1352,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes Reload 2`] =
                 <div
                   className="obojobo-draft--components--switch"
                 >
-                  <span
-                    contentEditable={false}
-                  >
-                    Border
-                  </span>
+                  <div
+                    className="text-content"
+                  >
+                    <span
+                      contentEditable={false}
+                    >
+                      Border
+                    </span>
+                    <br />
+                    <small />
+                  </div>
                   <label
                     className="switch"
                   >
@@ -1286,11 +1382,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes Reload 2`] =
                 <div
                   className="obojobo-draft--components--switch"
                 >
-                  <span
-                    contentEditable={false}
-                  >
-                    Autoload
-                  </span>
+                  <div
+                    className="text-content"
+                  >
+                    <span
+                      contentEditable={false}
+                    >
+                      Autoload
+                    </span>
+                    <br />
+                    <small />
+                  </div>
                   <label
                     className="switch"
                   >
@@ -1358,11 +1460,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes Reload 2`] =
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  Reload
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    Reload
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -1380,11 +1488,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes Reload 2`] =
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  New Window
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    New Window
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -1402,11 +1516,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes Reload 2`] =
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  Zoom
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    Zoom
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -1628,11 +1748,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes Zoom 1`] = `
                 <div
                   className="obojobo-draft--components--switch"
                 >
-                  <span
-                    contentEditable={false}
-                  >
-                    Border
-                  </span>
+                  <div
+                    className="text-content"
+                  >
+                    <span
+                      contentEditable={false}
+                    >
+                      Border
+                    </span>
+                    <br />
+                    <small />
+                  </div>
                   <label
                     className="switch"
                   >
@@ -1652,11 +1778,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes Zoom 1`] = `
                 <div
                   className="obojobo-draft--components--switch"
                 >
-                  <span
-                    contentEditable={false}
-                  >
-                    Autoload
-                  </span>
+                  <div
+                    className="text-content"
+                  >
+                    <span
+                      contentEditable={false}
+                    >
+                      Autoload
+                    </span>
+                    <br />
+                    <small />
+                  </div>
                   <label
                     className="switch"
                   >
@@ -1724,11 +1856,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes Zoom 1`] = `
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  Reload
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    Reload
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -1746,11 +1884,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes Zoom 1`] = `
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  New Window
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    New Window
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -1768,11 +1912,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes Zoom 1`] = `
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  Zoom
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    Zoom
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -1994,11 +2144,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes Zoom 2`] = `
                 <div
                   className="obojobo-draft--components--switch"
                 >
-                  <span
-                    contentEditable={false}
-                  >
-                    Border
-                  </span>
+                  <div
+                    className="text-content"
+                  >
+                    <span
+                      contentEditable={false}
+                    >
+                      Border
+                    </span>
+                    <br />
+                    <small />
+                  </div>
                   <label
                     className="switch"
                   >
@@ -2018,11 +2174,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes Zoom 2`] = `
                 <div
                   className="obojobo-draft--components--switch"
                 >
-                  <span
-                    contentEditable={false}
-                  >
-                    Autoload
-                  </span>
+                  <div
+                    className="text-content"
+                  >
+                    <span
+                      contentEditable={false}
+                    >
+                      Autoload
+                    </span>
+                    <br />
+                    <small />
+                  </div>
                   <label
                     className="switch"
                   >
@@ -2090,11 +2252,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes Zoom 2`] = `
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  Reload
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    Reload
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -2112,11 +2280,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes Zoom 2`] = `
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  New Window
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    New Window
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -2134,11 +2308,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes Zoom 2`] = `
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  Zoom
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    Zoom
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -2360,11 +2540,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes autoload 1`]
                 <div
                   className="obojobo-draft--components--switch"
                 >
-                  <span
-                    contentEditable={false}
-                  >
-                    Border
-                  </span>
+                  <div
+                    className="text-content"
+                  >
+                    <span
+                      contentEditable={false}
+                    >
+                      Border
+                    </span>
+                    <br />
+                    <small />
+                  </div>
                   <label
                     className="switch"
                   >
@@ -2384,11 +2570,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes autoload 1`]
                 <div
                   className="obojobo-draft--components--switch"
                 >
-                  <span
-                    contentEditable={false}
-                  >
-                    Autoload
-                  </span>
+                  <div
+                    className="text-content"
+                  >
+                    <span
+                      contentEditable={false}
+                    >
+                      Autoload
+                    </span>
+                    <br />
+                    <small />
+                  </div>
                   <label
                     className="switch"
                   >
@@ -2456,11 +2648,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes autoload 1`]
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  Reload
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    Reload
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -2478,11 +2676,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes autoload 1`]
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  New Window
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    New Window
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -2500,11 +2704,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes autoload 1`]
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  Zoom
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    Zoom
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -2726,11 +2936,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes autoload 2`]
                 <div
                   className="obojobo-draft--components--switch"
                 >
-                  <span
-                    contentEditable={false}
-                  >
-                    Border
-                  </span>
+                  <div
+                    className="text-content"
+                  >
+                    <span
+                      contentEditable={false}
+                    >
+                      Border
+                    </span>
+                    <br />
+                    <small />
+                  </div>
                   <label
                     className="switch"
                   >
@@ -2750,11 +2966,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes autoload 2`]
                 <div
                   className="obojobo-draft--components--switch"
                 >
-                  <span
-                    contentEditable={false}
-                  >
-                    Autoload
-                  </span>
+                  <div
+                    className="text-content"
+                  >
+                    <span
+                      contentEditable={false}
+                    >
+                      Autoload
+                    </span>
+                    <br />
+                    <small />
+                  </div>
                   <label
                     className="switch"
                   >
@@ -2822,11 +3044,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes autoload 2`]
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  Reload
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    Reload
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -2844,11 +3072,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes autoload 2`]
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  New Window
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    New Window
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -2866,11 +3100,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes autoload 2`]
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  Zoom
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    Zoom
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -3092,11 +3332,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes border 1`] =
                 <div
                   className="obojobo-draft--components--switch"
                 >
-                  <span
-                    contentEditable={false}
-                  >
-                    Border
-                  </span>
+                  <div
+                    className="text-content"
+                  >
+                    <span
+                      contentEditable={false}
+                    >
+                      Border
+                    </span>
+                    <br />
+                    <small />
+                  </div>
                   <label
                     className="switch"
                   >
@@ -3116,11 +3362,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes border 1`] =
                 <div
                   className="obojobo-draft--components--switch"
                 >
-                  <span
-                    contentEditable={false}
-                  >
-                    Autoload
-                  </span>
+                  <div
+                    className="text-content"
+                  >
+                    <span
+                      contentEditable={false}
+                    >
+                      Autoload
+                    </span>
+                    <br />
+                    <small />
+                  </div>
                   <label
                     className="switch"
                   >
@@ -3188,11 +3440,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes border 1`] =
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  Reload
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    Reload
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -3210,11 +3468,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes border 1`] =
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  New Window
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    New Window
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -3232,11 +3496,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes border 1`] =
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  Zoom
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    Zoom
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -3458,11 +3728,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes border 2`] =
                 <div
                   className="obojobo-draft--components--switch"
                 >
-                  <span
-                    contentEditable={false}
-                  >
-                    Border
-                  </span>
+                  <div
+                    className="text-content"
+                  >
+                    <span
+                      contentEditable={false}
+                    >
+                      Border
+                    </span>
+                    <br />
+                    <small />
+                  </div>
                   <label
                     className="switch"
                   >
@@ -3482,11 +3758,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes border 2`] =
                 <div
                   className="obojobo-draft--components--switch"
                 >
-                  <span
-                    contentEditable={false}
-                  >
-                    Autoload
-                  </span>
+                  <div
+                    className="text-content"
+                  >
+                    <span
+                      contentEditable={false}
+                    >
+                      Autoload
+                    </span>
+                    <br />
+                    <small />
+                  </div>
                   <label
                     className="switch"
                   >
@@ -3554,11 +3836,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes border 2`] =
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  Reload
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    Reload
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -3576,11 +3864,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes border 2`] =
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  New Window
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    New Window
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -3598,11 +3892,17 @@ exports[`IFrame Properties Modal IFrameProperties component changes border 2`] =
               <div
                 className="obojobo-draft--components--switch"
               >
-                <span
-                  contentEditable={false}
+                <div
+                  className="text-content"
                 >
-                  Zoom
-                </span>
+                  <span
+                    contentEditable={false}
+                  >
+                    Zoom
+                  </span>
+                  <br />
+                  <small />
+                </div>
                 <label
                   className="switch"
                 >
@@ -3662,18 +3962,18 @@ exports[`IFrame Properties Modal IFrameProperties component changes border 2`] =
 </div>
 `;
 
-exports[`IFrame Properties Modal IFrameProperties component changes fit 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">IFrame Properties</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"iframe-properties\\"><div class=\\"info\\"><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--title\\">Title:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--title\\" placeholder=\\"IFrame Title\\" value=\\"\\"></div><div class=\\"source-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--src\\">Source:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--src\\" placeholder=\\"Web Address\\" value=\\"\\"></div></div><div class=\\"options\\"><h2>Options:</h2><div class=\\"sizing-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\">Sizing:</label><select id=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\"><option value=\\"fixed\\">Fixed</option><option value=\\"text-width\\">Text Width</option><option value=\\"max-width\\">Max Width</option></select></div><div><label>Dimensions:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-width\\" name=\\"custom-width\\" min=\\"1\\" max=\\"20000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Width\\" aria-label=\\"Width\\" value=\\"640\\"><span class=\\"px-label\\">px ×</span><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-height\\" min=\\"1\\" max=\\"200000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Height\\" aria-label=\\"Height\\" value=\\"480\\"><span class=\\"px-label\\">px</span></div><div class=\\"border-option-container\\"><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Border</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Autoload</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\">Fit:</label><select id=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\"><option value=\\"scale\\">Scale</option><option value=\\"scroll\\">Scroll</option></select></div><div class=\\"zoom-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\">Initial Zoom:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\" min=\\"0.01\\" max=\\"1000\\" step=\\".01\\" type=\\"number\\" placeholder=\\"Decimal Value\\" value=\\"1\\"></div></div><div class=\\"controls\\"><h2>Controls:</h2><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Reload</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">New Window</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Zoom</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
+exports[`IFrame Properties Modal IFrameProperties component changes fit 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">IFrame Properties</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"iframe-properties\\"><div class=\\"info\\"><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--title\\">Title:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--title\\" placeholder=\\"IFrame Title\\" value=\\"\\"></div><div class=\\"source-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--src\\">Source:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--src\\" placeholder=\\"Web Address\\" value=\\"\\"></div></div><div class=\\"options\\"><h2>Options:</h2><div class=\\"sizing-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\">Sizing:</label><select id=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\"><option value=\\"fixed\\">Fixed</option><option value=\\"text-width\\">Text Width</option><option value=\\"max-width\\">Max Width</option></select></div><div><label>Dimensions:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-width\\" name=\\"custom-width\\" min=\\"1\\" max=\\"20000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Width\\" aria-label=\\"Width\\" value=\\"640\\"><span class=\\"px-label\\">px ×</span><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-height\\" min=\\"1\\" max=\\"200000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Height\\" aria-label=\\"Height\\" value=\\"480\\"><span class=\\"px-label\\">px</span></div><div class=\\"border-option-container\\"><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Border</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Autoload</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\">Fit:</label><select id=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\"><option value=\\"scale\\">Scale</option><option value=\\"scroll\\">Scroll</option></select></div><div class=\\"zoom-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\">Initial Zoom:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\" min=\\"0.01\\" max=\\"1000\\" step=\\".01\\" type=\\"number\\" placeholder=\\"Decimal Value\\" value=\\"1\\"></div></div><div class=\\"controls\\"><h2>Controls:</h2><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Reload</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">New Window</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Zoom</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
 
-exports[`IFrame Properties Modal IFrameProperties component changes height 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">IFrame Properties</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"iframe-properties\\"><div class=\\"info\\"><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--title\\">Title:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--title\\" placeholder=\\"IFrame Title\\" value=\\"\\"></div><div class=\\"source-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--src\\">Source:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--src\\" placeholder=\\"Web Address\\" value=\\"\\"></div></div><div class=\\"options\\"><h2>Options:</h2><div class=\\"sizing-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\">Sizing:</label><select id=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\"><option value=\\"fixed\\">Fixed</option><option value=\\"text-width\\">Text Width</option><option value=\\"max-width\\">Max Width</option></select></div><div><label>Dimensions:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-width\\" name=\\"custom-width\\" min=\\"1\\" max=\\"20000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Width\\" aria-label=\\"Width\\" value=\\"640\\"><span class=\\"px-label\\">px ×</span><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-height\\" min=\\"1\\" max=\\"200000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Height\\" aria-label=\\"Height\\" value=\\"999\\"><span class=\\"px-label\\">px</span></div><div class=\\"border-option-container\\"><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Border</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Autoload</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\">Fit:</label><select id=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\"><option value=\\"scale\\">Scale</option><option value=\\"scroll\\">Scroll</option></select></div><div class=\\"zoom-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\">Initial Zoom:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\" min=\\"0.01\\" max=\\"1000\\" step=\\".01\\" type=\\"number\\" placeholder=\\"Decimal Value\\" value=\\"1\\"></div></div><div class=\\"controls\\"><h2>Controls:</h2><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Reload</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">New Window</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Zoom</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
+exports[`IFrame Properties Modal IFrameProperties component changes height 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">IFrame Properties</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"iframe-properties\\"><div class=\\"info\\"><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--title\\">Title:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--title\\" placeholder=\\"IFrame Title\\" value=\\"\\"></div><div class=\\"source-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--src\\">Source:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--src\\" placeholder=\\"Web Address\\" value=\\"\\"></div></div><div class=\\"options\\"><h2>Options:</h2><div class=\\"sizing-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\">Sizing:</label><select id=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\"><option value=\\"fixed\\">Fixed</option><option value=\\"text-width\\">Text Width</option><option value=\\"max-width\\">Max Width</option></select></div><div><label>Dimensions:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-width\\" name=\\"custom-width\\" min=\\"1\\" max=\\"20000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Width\\" aria-label=\\"Width\\" value=\\"640\\"><span class=\\"px-label\\">px ×</span><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-height\\" min=\\"1\\" max=\\"200000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Height\\" aria-label=\\"Height\\" value=\\"999\\"><span class=\\"px-label\\">px</span></div><div class=\\"border-option-container\\"><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Border</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Autoload</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\">Fit:</label><select id=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\"><option value=\\"scale\\">Scale</option><option value=\\"scroll\\">Scroll</option></select></div><div class=\\"zoom-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\">Initial Zoom:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\" min=\\"0.01\\" max=\\"1000\\" step=\\".01\\" type=\\"number\\" placeholder=\\"Decimal Value\\" value=\\"1\\"></div></div><div class=\\"controls\\"><h2>Controls:</h2><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Reload</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">New Window</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Zoom</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
 
-exports[`IFrame Properties Modal IFrameProperties component changes initial zoom 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">IFrame Properties</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"iframe-properties\\"><div class=\\"info\\"><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--title\\">Title:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--title\\" placeholder=\\"IFrame Title\\" value=\\"\\"></div><div class=\\"source-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--src\\">Source:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--src\\" placeholder=\\"Web Address\\" value=\\"\\"></div></div><div class=\\"options\\"><h2>Options:</h2><div class=\\"sizing-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\">Sizing:</label><select id=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\"><option value=\\"fixed\\">Fixed</option><option value=\\"text-width\\">Text Width</option><option value=\\"max-width\\">Max Width</option></select></div><div><label>Dimensions:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-width\\" name=\\"custom-width\\" min=\\"1\\" max=\\"20000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Width\\" aria-label=\\"Width\\" value=\\"640\\"><span class=\\"px-label\\">px ×</span><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-height\\" min=\\"1\\" max=\\"200000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Height\\" aria-label=\\"Height\\" value=\\"480\\"><span class=\\"px-label\\">px</span></div><div class=\\"border-option-container\\"><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Border</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Autoload</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\">Fit:</label><select id=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\"><option value=\\"scale\\">Scale</option><option value=\\"scroll\\">Scroll</option></select></div><div class=\\"zoom-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\">Initial Zoom:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\" min=\\"0.01\\" max=\\"1000\\" step=\\".01\\" type=\\"number\\" placeholder=\\"Decimal Value\\" value=\\"333\\"></div></div><div class=\\"controls\\"><h2>Controls:</h2><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Reload</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">New Window</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Zoom</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
+exports[`IFrame Properties Modal IFrameProperties component changes initial zoom 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">IFrame Properties</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"iframe-properties\\"><div class=\\"info\\"><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--title\\">Title:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--title\\" placeholder=\\"IFrame Title\\" value=\\"\\"></div><div class=\\"source-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--src\\">Source:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--src\\" placeholder=\\"Web Address\\" value=\\"\\"></div></div><div class=\\"options\\"><h2>Options:</h2><div class=\\"sizing-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\">Sizing:</label><select id=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\"><option value=\\"fixed\\">Fixed</option><option value=\\"text-width\\">Text Width</option><option value=\\"max-width\\">Max Width</option></select></div><div><label>Dimensions:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-width\\" name=\\"custom-width\\" min=\\"1\\" max=\\"20000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Width\\" aria-label=\\"Width\\" value=\\"640\\"><span class=\\"px-label\\">px ×</span><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-height\\" min=\\"1\\" max=\\"200000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Height\\" aria-label=\\"Height\\" value=\\"480\\"><span class=\\"px-label\\">px</span></div><div class=\\"border-option-container\\"><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Border</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Autoload</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\">Fit:</label><select id=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\"><option value=\\"scale\\">Scale</option><option value=\\"scroll\\">Scroll</option></select></div><div class=\\"zoom-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\">Initial Zoom:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\" min=\\"0.01\\" max=\\"1000\\" step=\\".01\\" type=\\"number\\" placeholder=\\"Decimal Value\\" value=\\"333\\"></div></div><div class=\\"controls\\"><h2>Controls:</h2><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Reload</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">New Window</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Zoom</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
 
-exports[`IFrame Properties Modal IFrameProperties component changes sizing 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">IFrame Properties</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"iframe-properties\\"><div class=\\"info\\"><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--title\\">Title:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--title\\" placeholder=\\"IFrame Title\\" value=\\"\\"></div><div class=\\"source-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--src\\">Source:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--src\\" placeholder=\\"Web Address\\" value=\\"\\"></div></div><div class=\\"options\\"><h2>Options:</h2><div class=\\"sizing-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\">Sizing:</label><select id=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\"><option value=\\"fixed\\">Fixed</option><option value=\\"text-width\\">Text Width</option><option value=\\"max-width\\">Max Width</option></select></div><div><label>Dimensions:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-width\\" name=\\"custom-width\\" min=\\"1\\" max=\\"20000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Width\\" aria-label=\\"Width\\" value=\\"640\\"><span class=\\"px-label\\">px ×</span><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-height\\" min=\\"1\\" max=\\"200000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Height\\" aria-label=\\"Height\\" value=\\"480\\"><span class=\\"px-label\\">px</span></div><div class=\\"border-option-container\\"><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Border</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Autoload</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\">Fit:</label><select id=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\"><option value=\\"scale\\">Scale</option><option value=\\"scroll\\">Scroll</option></select></div><div class=\\"zoom-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\">Initial Zoom:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\" min=\\"0.01\\" max=\\"1000\\" step=\\".01\\" type=\\"number\\" placeholder=\\"Decimal Value\\" value=\\"1\\"></div></div><div class=\\"controls\\"><h2>Controls:</h2><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Reload</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">New Window</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Zoom</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
+exports[`IFrame Properties Modal IFrameProperties component changes sizing 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">IFrame Properties</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"iframe-properties\\"><div class=\\"info\\"><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--title\\">Title:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--title\\" placeholder=\\"IFrame Title\\" value=\\"\\"></div><div class=\\"source-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--src\\">Source:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--src\\" placeholder=\\"Web Address\\" value=\\"\\"></div></div><div class=\\"options\\"><h2>Options:</h2><div class=\\"sizing-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\">Sizing:</label><select id=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\"><option value=\\"fixed\\">Fixed</option><option value=\\"text-width\\">Text Width</option><option value=\\"max-width\\">Max Width</option></select></div><div><label>Dimensions:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-width\\" name=\\"custom-width\\" min=\\"1\\" max=\\"20000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Width\\" aria-label=\\"Width\\" value=\\"640\\"><span class=\\"px-label\\">px ×</span><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-height\\" min=\\"1\\" max=\\"200000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Height\\" aria-label=\\"Height\\" value=\\"480\\"><span class=\\"px-label\\">px</span></div><div class=\\"border-option-container\\"><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Border</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Autoload</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\">Fit:</label><select id=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\"><option value=\\"scale\\">Scale</option><option value=\\"scroll\\">Scroll</option></select></div><div class=\\"zoom-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\">Initial Zoom:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\" min=\\"0.01\\" max=\\"1000\\" step=\\".01\\" type=\\"number\\" placeholder=\\"Decimal Value\\" value=\\"1\\"></div></div><div class=\\"controls\\"><h2>Controls:</h2><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Reload</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">New Window</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Zoom</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
 
-exports[`IFrame Properties Modal IFrameProperties component changes src 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">IFrame Properties</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"iframe-properties\\"><div class=\\"info\\"><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--title\\">Title:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--title\\" placeholder=\\"IFrame Title\\" value=\\"\\"></div><div class=\\"source-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--src\\">Source:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--src\\" placeholder=\\"Web Address\\" value=\\"changed\\"></div></div><div class=\\"options\\"><h2>Options:</h2><div class=\\"sizing-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\">Sizing:</label><select id=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\"><option value=\\"fixed\\">Fixed</option><option value=\\"text-width\\">Text Width</option><option value=\\"max-width\\">Max Width</option></select></div><div><label>Dimensions:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-width\\" name=\\"custom-width\\" min=\\"1\\" max=\\"20000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Width\\" aria-label=\\"Width\\" value=\\"640\\"><span class=\\"px-label\\">px ×</span><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-height\\" min=\\"1\\" max=\\"200000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Height\\" aria-label=\\"Height\\" value=\\"480\\"><span class=\\"px-label\\">px</span></div><div class=\\"border-option-container\\"><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Border</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Autoload</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\">Fit:</label><select id=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\"><option value=\\"scale\\">Scale</option><option value=\\"scroll\\">Scroll</option></select></div><div class=\\"zoom-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\">Initial Zoom:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\" min=\\"0.01\\" max=\\"1000\\" step=\\".01\\" type=\\"number\\" placeholder=\\"Decimal Value\\" value=\\"1\\"></div></div><div class=\\"controls\\"><h2>Controls:</h2><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Reload</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">New Window</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Zoom</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
+exports[`IFrame Properties Modal IFrameProperties component changes src 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">IFrame Properties</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"iframe-properties\\"><div class=\\"info\\"><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--title\\">Title:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--title\\" placeholder=\\"IFrame Title\\" value=\\"\\"></div><div class=\\"source-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--src\\">Source:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--src\\" placeholder=\\"Web Address\\" value=\\"changed\\"></div></div><div class=\\"options\\"><h2>Options:</h2><div class=\\"sizing-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\">Sizing:</label><select id=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\"><option value=\\"fixed\\">Fixed</option><option value=\\"text-width\\">Text Width</option><option value=\\"max-width\\">Max Width</option></select></div><div><label>Dimensions:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-width\\" name=\\"custom-width\\" min=\\"1\\" max=\\"20000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Width\\" aria-label=\\"Width\\" value=\\"640\\"><span class=\\"px-label\\">px ×</span><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-height\\" min=\\"1\\" max=\\"200000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Height\\" aria-label=\\"Height\\" value=\\"480\\"><span class=\\"px-label\\">px</span></div><div class=\\"border-option-container\\"><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Border</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Autoload</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\">Fit:</label><select id=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\"><option value=\\"scale\\">Scale</option><option value=\\"scroll\\">Scroll</option></select></div><div class=\\"zoom-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\">Initial Zoom:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\" min=\\"0.01\\" max=\\"1000\\" step=\\".01\\" type=\\"number\\" placeholder=\\"Decimal Value\\" value=\\"1\\"></div></div><div class=\\"controls\\"><h2>Controls:</h2><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Reload</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">New Window</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Zoom</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
 
-exports[`IFrame Properties Modal IFrameProperties component changes title 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">IFrame Properties</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"iframe-properties\\"><div class=\\"info\\"><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--title\\">Title:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--title\\" placeholder=\\"IFrame Title\\" value=\\"changed\\"></div><div class=\\"source-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--src\\">Source:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--src\\" placeholder=\\"Web Address\\" value=\\"\\"></div></div><div class=\\"options\\"><h2>Options:</h2><div class=\\"sizing-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\">Sizing:</label><select id=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\"><option value=\\"fixed\\">Fixed</option><option value=\\"text-width\\">Text Width</option><option value=\\"max-width\\">Max Width</option></select></div><div><label>Dimensions:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-width\\" name=\\"custom-width\\" min=\\"1\\" max=\\"20000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Width\\" aria-label=\\"Width\\" value=\\"640\\"><span class=\\"px-label\\">px ×</span><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-height\\" min=\\"1\\" max=\\"200000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Height\\" aria-label=\\"Height\\" value=\\"480\\"><span class=\\"px-label\\">px</span></div><div class=\\"border-option-container\\"><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Border</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Autoload</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\">Fit:</label><select id=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\"><option value=\\"scale\\">Scale</option><option value=\\"scroll\\">Scroll</option></select></div><div class=\\"zoom-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\">Initial Zoom:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\" min=\\"0.01\\" max=\\"1000\\" step=\\".01\\" type=\\"number\\" placeholder=\\"Decimal Value\\" value=\\"1\\"></div></div><div class=\\"controls\\"><h2>Controls:</h2><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Reload</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">New Window</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Zoom</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
+exports[`IFrame Properties Modal IFrameProperties component changes title 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">IFrame Properties</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"iframe-properties\\"><div class=\\"info\\"><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--title\\">Title:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--title\\" placeholder=\\"IFrame Title\\" value=\\"changed\\"></div><div class=\\"source-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--src\\">Source:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--src\\" placeholder=\\"Web Address\\" value=\\"\\"></div></div><div class=\\"options\\"><h2>Options:</h2><div class=\\"sizing-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\">Sizing:</label><select id=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\"><option value=\\"fixed\\">Fixed</option><option value=\\"text-width\\">Text Width</option><option value=\\"max-width\\">Max Width</option></select></div><div><label>Dimensions:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-width\\" name=\\"custom-width\\" min=\\"1\\" max=\\"20000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Width\\" aria-label=\\"Width\\" value=\\"640\\"><span class=\\"px-label\\">px ×</span><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-height\\" min=\\"1\\" max=\\"200000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Height\\" aria-label=\\"Height\\" value=\\"480\\"><span class=\\"px-label\\">px</span></div><div class=\\"border-option-container\\"><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Border</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Autoload</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\">Fit:</label><select id=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\"><option value=\\"scale\\">Scale</option><option value=\\"scroll\\">Scroll</option></select></div><div class=\\"zoom-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\">Initial Zoom:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\" min=\\"0.01\\" max=\\"1000\\" step=\\".01\\" type=\\"number\\" placeholder=\\"Decimal Value\\" value=\\"1\\"></div></div><div class=\\"controls\\"><h2>Controls:</h2><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Reload</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">New Window</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Zoom</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
 
-exports[`IFrame Properties Modal IFrameProperties component changes width 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">IFrame Properties</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"iframe-properties\\"><div class=\\"info\\"><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--title\\">Title:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--title\\" placeholder=\\"IFrame Title\\" value=\\"\\"></div><div class=\\"source-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--src\\">Source:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--src\\" placeholder=\\"Web Address\\" value=\\"\\"></div></div><div class=\\"options\\"><h2>Options:</h2><div class=\\"sizing-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\">Sizing:</label><select id=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\"><option value=\\"fixed\\">Fixed</option><option value=\\"text-width\\">Text Width</option><option value=\\"max-width\\">Max Width</option></select></div><div><label>Dimensions:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-width\\" name=\\"custom-width\\" min=\\"1\\" max=\\"20000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Width\\" aria-label=\\"Width\\" value=\\"600\\"><span class=\\"px-label\\">px ×</span><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-height\\" min=\\"1\\" max=\\"200000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Height\\" aria-label=\\"Height\\" value=\\"480\\"><span class=\\"px-label\\">px</span></div><div class=\\"border-option-container\\"><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Border</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Autoload</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\">Fit:</label><select id=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\"><option value=\\"scale\\">Scale</option><option value=\\"scroll\\">Scroll</option></select></div><div class=\\"zoom-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\">Initial Zoom:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\" min=\\"0.01\\" max=\\"1000\\" step=\\".01\\" type=\\"number\\" placeholder=\\"Decimal Value\\" value=\\"1\\"></div></div><div class=\\"controls\\"><h2>Controls:</h2><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Reload</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">New Window</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Zoom</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
+exports[`IFrame Properties Modal IFrameProperties component changes width 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">IFrame Properties</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"iframe-properties\\"><div class=\\"info\\"><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--title\\">Title:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--title\\" placeholder=\\"IFrame Title\\" value=\\"\\"></div><div class=\\"source-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--src\\">Source:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--src\\" placeholder=\\"Web Address\\" value=\\"\\"></div></div><div class=\\"options\\"><h2>Options:</h2><div class=\\"sizing-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\">Sizing:</label><select id=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\"><option value=\\"fixed\\">Fixed</option><option value=\\"text-width\\">Text Width</option><option value=\\"max-width\\">Max Width</option></select></div><div><label>Dimensions:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-width\\" name=\\"custom-width\\" min=\\"1\\" max=\\"20000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Width\\" aria-label=\\"Width\\" value=\\"600\\"><span class=\\"px-label\\">px ×</span><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-height\\" min=\\"1\\" max=\\"200000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Height\\" aria-label=\\"Height\\" value=\\"480\\"><span class=\\"px-label\\">px</span></div><div class=\\"border-option-container\\"><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Border</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Autoload</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\">Fit:</label><select id=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\"><option value=\\"scale\\">Scale</option><option value=\\"scroll\\">Scroll</option></select></div><div class=\\"zoom-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\">Initial Zoom:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\" min=\\"0.01\\" max=\\"1000\\" step=\\".01\\" type=\\"number\\" placeholder=\\"Decimal Value\\" value=\\"1\\"></div></div><div class=\\"controls\\"><h2>Controls:</h2><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Reload</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">New Window</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Zoom</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
 
-exports[`IFrame Properties Modal IFrameProperties component focuses on first element 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">IFrame Properties</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"iframe-properties\\"><div class=\\"info\\"><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--title\\">Title:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--title\\" placeholder=\\"IFrame Title\\" value=\\"\\"></div><div class=\\"source-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--src\\">Source:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--src\\" placeholder=\\"Web Address\\" value=\\"\\"></div></div><div class=\\"options\\"><h2>Options:</h2><div class=\\"sizing-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\">Sizing:</label><select id=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\"><option value=\\"fixed\\">Fixed</option><option value=\\"text-width\\">Text Width</option><option value=\\"max-width\\">Max Width</option></select></div><div><label>Dimensions:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-width\\" name=\\"custom-width\\" min=\\"1\\" max=\\"20000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Width\\" aria-label=\\"Width\\" value=\\"640\\"><span class=\\"px-label\\">px ×</span><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-height\\" min=\\"1\\" max=\\"200000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Height\\" aria-label=\\"Height\\" value=\\"480\\"><span class=\\"px-label\\">px</span></div><div class=\\"border-option-container\\"><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Border</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Autoload</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\">Fit:</label><select id=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\"><option value=\\"scale\\">Scale</option><option value=\\"scroll\\">Scroll</option></select></div><div class=\\"zoom-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\">Initial Zoom:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\" min=\\"0.01\\" max=\\"1000\\" step=\\".01\\" type=\\"number\\" placeholder=\\"Decimal Value\\" value=\\"1\\"></div></div><div class=\\"controls\\"><h2>Controls:</h2><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Reload</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">New Window</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><span contenteditable=\\"false\\">Zoom</span><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
+exports[`IFrame Properties Modal IFrameProperties component focuses on first element 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">IFrame Properties</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"iframe-properties\\"><div class=\\"info\\"><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--title\\">Title:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--title\\" placeholder=\\"IFrame Title\\" value=\\"\\"></div><div class=\\"source-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--src\\">Source:</label><input type=\\"text\\" id=\\"obojobo-draft--chunks--iframe--properties-modal--src\\" placeholder=\\"Web Address\\" value=\\"\\"></div></div><div class=\\"options\\"><h2>Options:</h2><div class=\\"sizing-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\">Sizing:</label><select id=\\"obojobo-draft--chunks--iframe--properties-model--sizing\\"><option value=\\"fixed\\">Fixed</option><option value=\\"text-width\\">Text Width</option><option value=\\"max-width\\">Max Width</option></select></div><div><label>Dimensions:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-width\\" name=\\"custom-width\\" min=\\"1\\" max=\\"20000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Width\\" aria-label=\\"Width\\" value=\\"640\\"><span class=\\"px-label\\">px ×</span><input id=\\"obojobo-draft--chunks--iframe--properties-modal--custom-height\\" min=\\"1\\" max=\\"200000\\" step=\\"1\\" type=\\"number\\" placeholder=\\"Height\\" aria-label=\\"Height\\" value=\\"480\\"><span class=\\"px-label\\">px</span></div><div class=\\"border-option-container\\"><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Border</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Autoload</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div><div><label for=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\">Fit:</label><select id=\\"obojobo-draft--chunks--iframe--properties-modal--fit\\"><option value=\\"scale\\">Scale</option><option value=\\"scroll\\">Scroll</option></select></div><div class=\\"zoom-option-container\\"><label for=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\">Initial Zoom:</label><input id=\\"obojobo-draft--chunks--iframe--properties-modal--zoom\\" min=\\"0.01\\" max=\\"1000\\" step=\\".01\\" type=\\"number\\" placeholder=\\"Decimal Value\\" value=\\"1\\"></div></div><div class=\\"controls\\"><h2>Controls:</h2><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Reload</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">New Window</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div><div class=\\"obojobo-draft--components--switch\\"><div class=\\"text-content\\"><span contenteditable=\\"false\\">Zoom</span><br><small></small></div><label class=\\"switch\\"><input class=\\"switch-slider\\" type=\\"checkbox\\"><div class=\\"switch-slider round\\"></div></label></div></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
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
new file mode 100644
index 0000000000..91cf37d808
--- /dev/null
+++ b/packages/obonode/obojobo-chunks-iframe/__snapshots__/new-iframe-modal.test.js.snap
@@ -0,0 +1,707 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NewIFrameModal NewIFrameModal component changes src 1`] = `
+<div
+  className="obojobo-draft--components--modal--simple-dialog"
+>
+  <div
+    className="obojobo-draft--components--modal--dialog "
+    style={null}
+  >
+    <div
+      aria-atomic="true"
+      aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
+      className="obojobo-draft--components--modal--modal"
+      role="dialog"
+      tabIndex="-1"
+    >
+      <input
+        aria-label="Start of dialog"
+        className="first-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+      <div
+        className="content"
+        id="obojobo-draft--components--modal--modal--content"
+      >
+        <h1
+          className="heading"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          New Embedded IFrame
+        </h1>
+        <div
+          className="dialog-content"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          <div
+            className="new-iframe-modal"
+          >
+            <header>
+              <p>
+                Paste either an iframe embed code or a URL to embed:
+              </p>
+              <input
+                onChange={[Function]}
+                placeholder="<iframe src=\\"https://example.com\\"/> or \\"https://example.com\\""
+                type="text"
+                value=""
+              />
+            </header>
+            <div
+              className="preview"
+            >
+              <p>
+                Embedded preview:
+              </p>
+              <div
+                className="no-preview"
+              >
+                <span>
+                  Paste a link or embed code above to see the preview
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="controls"
+        >
+          <div
+            className="obojobo-draft--components--button alt-action is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
+          <div
+            className="obojobo-draft--components--button is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Preview is good - Continue...
+            </button>
+          </div>
+        </div>
+      </div>
+      <input
+        aria-label="End of dialog"
+        className="last-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`NewIFrameModal NewIFrameModal component correctly detects content type 1`] = `
+<div
+  className="obojobo-draft--components--modal--simple-dialog"
+>
+  <div
+    className="obojobo-draft--components--modal--dialog "
+    style={null}
+  >
+    <div
+      aria-atomic="true"
+      aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
+      className="obojobo-draft--components--modal--modal"
+      role="dialog"
+      tabIndex="-1"
+    >
+      <input
+        aria-label="Start of dialog"
+        className="first-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+      <div
+        className="content"
+        id="obojobo-draft--components--modal--modal--content"
+      >
+        <h1
+          className="heading"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          New Embedded IFrame
+        </h1>
+        <div
+          className="dialog-content"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          <div
+            className="new-iframe-modal"
+          >
+            <header>
+              <p>
+                Paste either an iframe embed code or a URL to embed:
+              </p>
+              <input
+                onChange={[Function]}
+                placeholder="<iframe src=\\"https://example.com\\"/> or \\"https://example.com\\""
+                type="text"
+                value=""
+              />
+            </header>
+            <div
+              className="preview"
+            >
+              <p>
+                Embedded preview:
+              </p>
+              <div
+                className="no-preview"
+              >
+                <span>
+                  Paste a link or embed code above to see the preview
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="controls"
+        >
+          <div
+            className="obojobo-draft--components--button alt-action is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
+          <div
+            className="obojobo-draft--components--button is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Preview is good - Continue...
+            </button>
+          </div>
+        </div>
+      </div>
+      <input
+        aria-label="End of dialog"
+        className="last-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`NewIFrameModal NewIFrameModal component correctly detects content type 2`] = `
+<div
+  className="obojobo-draft--components--modal--simple-dialog"
+>
+  <div
+    className="obojobo-draft--components--modal--dialog "
+    style={null}
+  >
+    <div
+      aria-atomic="true"
+      aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
+      className="obojobo-draft--components--modal--modal"
+      role="dialog"
+      tabIndex="-1"
+    >
+      <input
+        aria-label="Start of dialog"
+        className="first-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+      <div
+        className="content"
+        id="obojobo-draft--components--modal--modal--content"
+      >
+        <h1
+          className="heading"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          New Embedded IFrame
+        </h1>
+        <div
+          className="dialog-content"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          <div
+            className="new-iframe-modal"
+          >
+            <header>
+              <p>
+                Paste either an iframe embed code or a URL to embed:
+              </p>
+              <input
+                onChange={[Function]}
+                placeholder="<iframe src=\\"https://example.com\\"/> or \\"https://example.com\\""
+                type="text"
+                value=""
+              />
+            </header>
+            <div
+              className="preview"
+            >
+              <p>
+                Embedded preview:
+              </p>
+              <div
+                className="no-preview"
+              >
+                <span>
+                  Paste a link or embed code above to see the preview
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="controls"
+        >
+          <div
+            className="obojobo-draft--components--button alt-action is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
+          <div
+            className="obojobo-draft--components--button is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Preview is good - Continue...
+            </button>
+          </div>
+        </div>
+      </div>
+      <input
+        aria-label="End of dialog"
+        className="last-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`NewIFrameModal NewIFrameModal component focuses on first element 1`] = `
+<div
+  className="obojobo-draft--components--modal--simple-dialog"
+>
+  <div
+    className="obojobo-draft--components--modal--dialog "
+    style={null}
+  >
+    <div
+      aria-atomic="true"
+      aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
+      className="obojobo-draft--components--modal--modal"
+      role="dialog"
+      tabIndex="-1"
+    >
+      <input
+        aria-label="Start of dialog"
+        className="first-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+      <div
+        className="content"
+        id="obojobo-draft--components--modal--modal--content"
+      >
+        <h1
+          className="heading"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          New Embedded IFrame
+        </h1>
+        <div
+          className="dialog-content"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          <div
+            className="new-iframe-modal"
+          >
+            <header>
+              <p>
+                Paste either an iframe embed code or a URL to embed:
+              </p>
+              <input
+                onChange={[Function]}
+                placeholder="<iframe src=\\"https://example.com\\"/> or \\"https://example.com\\""
+                type="text"
+                value=""
+              />
+            </header>
+            <div
+              className="preview"
+            >
+              <p>
+                Embedded preview:
+              </p>
+              <div
+                className="no-preview"
+              >
+                <span>
+                  Paste a link or embed code above to see the preview
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="controls"
+        >
+          <div
+            className="obojobo-draft--components--button alt-action is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
+          <div
+            className="obojobo-draft--components--button is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Preview is good - Continue...
+            </button>
+          </div>
+        </div>
+      </div>
+      <input
+        aria-label="End of dialog"
+        className="last-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`NewIFrameModal NewIFrameModal component mounts as expected 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><h1 class=\\"heading\\" style=\\"text-align: center;\\">New Embedded IFrame</h1><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"new-iframe-modal\\"><header><p>Paste either an iframe embed code or a URL to embed:</p><input type=\\"text\\" placeholder=\\"<iframe src=&quot;https://example.com&quot;/> or &quot;https://example.com&quot;\\" value=\\"\\"></header><div class=\\"preview\\"><p>Embedded preview:</p><div class=\\"no-preview\\"><span>Paste a link or embed code above to see the preview</span></div></div></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">Preview is good - Continue...</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
+
+exports[`NewIFrameModal NewIFrameModal component opens section explaining why the iframe preview is not working 1`] = `
+<div
+  className="obojobo-draft--components--modal--simple-dialog"
+>
+  <div
+    className="obojobo-draft--components--modal--dialog "
+    style={null}
+  >
+    <div
+      aria-atomic="true"
+      aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
+      className="obojobo-draft--components--modal--modal"
+      role="dialog"
+      tabIndex="-1"
+    >
+      <input
+        aria-label="Start of dialog"
+        className="first-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+      <div
+        className="content"
+        id="obojobo-draft--components--modal--modal--content"
+      >
+        <h1
+          className="heading"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          New Embedded IFrame
+        </h1>
+        <div
+          className="dialog-content"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          <div
+            className="new-iframe-modal"
+          >
+            <header>
+              <p>
+                Paste either an iframe embed code or a URL to embed:
+              </p>
+              <input
+                onChange={[Function]}
+                placeholder="<iframe src=\\"https://example.com\\"/> or \\"https://example.com\\""
+                type="text"
+                value="https://mock.com"
+              />
+            </header>
+            <div
+              className="preview"
+            >
+              <p>
+                Embedded preview:
+              </p>
+              <div
+                className="preview-with-iframe"
+              >
+                <iframe />
+                <section>
+                  <p>
+                    Does the preview look good?
+                  </p>
+                  <div
+                    className="preview-not-working"
+                  >
+                    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 &lt;iframe...) and not only the regular URL.
+                  </div>
+                </section>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="controls"
+        >
+          <div
+            className="obojobo-draft--components--button alt-action is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[MockFunction]}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
+          <div
+            className="obojobo-draft--components--button is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Preview is good - Continue...
+            </button>
+          </div>
+        </div>
+      </div>
+      <input
+        aria-label="End of dialog"
+        className="last-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`NewIFrameModal NewIFrameModal shows message after invalid src is typed 1`] = `
+<div
+  className="obojobo-draft--components--modal--simple-dialog"
+>
+  <div
+    className="obojobo-draft--components--modal--dialog "
+    style={null}
+  >
+    <div
+      aria-atomic="true"
+      aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
+      className="obojobo-draft--components--modal--modal"
+      role="dialog"
+      tabIndex="-1"
+    >
+      <input
+        aria-label="Start of dialog"
+        className="first-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+      <div
+        className="content"
+        id="obojobo-draft--components--modal--modal--content"
+      >
+        <h1
+          className="heading"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          New Embedded IFrame
+        </h1>
+        <div
+          className="dialog-content"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          <div
+            className="new-iframe-modal"
+          >
+            <header>
+              <p>
+                Paste either an iframe embed code or a URL to embed:
+              </p>
+              <input
+                onChange={[Function]}
+                placeholder="<iframe src=\\"https://example.com\\"/> or \\"https://example.com\\""
+                type="text"
+                value="mock-src"
+              />
+            </header>
+            <div
+              className="preview"
+            >
+              <p>
+                Embedded preview:
+              </p>
+              <div
+                className="no-preview"
+              >
+                <span>
+                  Make sure you are using a valid URL or an IFrame embed code
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="controls"
+        >
+          <div
+            className="obojobo-draft--components--button alt-action is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
+          <div
+            className="obojobo-draft--components--button is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Preview is good - Continue...
+            </button>
+          </div>
+        </div>
+      </div>
+      <input
+        aria-label="End of dialog"
+        className="last-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/obonode/obojobo-chunks-iframe/adapter.js b/packages/obonode/obojobo-chunks-iframe/adapter.js
index 7ac37f3da0..691333debd 100644
--- a/packages/obonode/obojobo-chunks-iframe/adapter.js
+++ b/packages/obonode/obojobo-chunks-iframe/adapter.js
@@ -4,6 +4,7 @@ import IFrameMediaTypes from './iframe-media-types'
 import IFrameFitTypes from './iframe-fit-types'
 import IFrameControlTypes from './iframe-control-types'
 import IFrameSizingTypes from './iframe-sizing-types'
+import IFrameContentTypes from './iframe-content-types'
 
 const cloneProps = Common.util.cloneProps
 const propsList = [
@@ -12,12 +13,13 @@ const propsList = [
 	'width',
 	'height',
 	'initialZoom',
-	'border',
 	'autoload',
 	'fit',
 	'title',
 	'controls',
-	'sizing'
+	'sizing',
+	'contentType',
+	'controlsChanged'
 ]
 
 export default {
@@ -27,30 +29,27 @@ export default {
 			IFrameMediaTypes.MEDIA
 		])
 
-		let defaultBorder
 		let defaultFit
 		let defaultControls
 
 		switch (model.modelState.type) {
 			case IFrameMediaTypes.WEBPAGE:
-				defaultBorder = true
 				defaultFit = IFrameFitTypes.SCROLL
 				defaultControls = [
 					IFrameControlTypes.ZOOM,
 					IFrameControlTypes.RELOAD,
-					IFrameControlTypes.NEW_WINDOW
+					IFrameControlTypes.NEW_WINDOW,
+					IFrameControlTypes.BORDER
 				]
 				break
 
 			case IFrameMediaTypes.MEDIA:
 			default:
-				defaultBorder = false
 				defaultFit = IFrameFitTypes.SCALE
 				defaultControls = [IFrameControlTypes.RELOAD]
 				break
 		}
 
-		model.setStateProp('border', defaultBorder)
 		model.setStateProp('fit', defaultFit, p => p.toLowerCase(), [
 			IFrameFitTypes.SCROLL,
 			IFrameFitTypes.SCALE
@@ -65,6 +64,8 @@ export default {
 			p.split(',').map(c => c.toLowerCase().replace(/ /g, ''))
 		)
 		model.setStateProp('sizing', IFrameSizingTypes.FIXED)
+		model.setStateProp('contentType', IFrameContentTypes.MEDIA)
+		model.setStateProp('controlsChanged', false)
 	},
 
 	clone(model, clone) {
diff --git a/packages/obonode/obojobo-chunks-iframe/adapter.test.js b/packages/obonode/obojobo-chunks-iframe/adapter.test.js
index 3c6d3f7ce4..0cf9e54417 100644
--- a/packages/obonode/obojobo-chunks-iframe/adapter.test.js
+++ b/packages/obonode/obojobo-chunks-iframe/adapter.test.js
@@ -30,40 +30,6 @@ describe('IFrame adapter', () => {
 		expect(model.modelState).toMatchSnapshot()
 	})
 
-	test('adapter sets modelState.border to true when given attributes border=true (or when border not specified and type="webpage")', () => {
-		model = new MockOboModel({ border: false })
-		IFrameAdapter.construct(model)
-		expect(model.modelState.border).toBe(false)
-
-		model = new MockOboModel({ border: true })
-		IFrameAdapter.construct(model)
-		expect(model.modelState.border).toBe(true)
-
-		model = new MockOboModel({ type: 'webpage' })
-		IFrameAdapter.construct(model)
-		expect(model.modelState.border).toBe(true)
-
-		model = new MockOboModel({ type: 'media' })
-		IFrameAdapter.construct(model)
-		expect(model.modelState.border).toBe(false)
-
-		model = new MockOboModel({ type: 'webpage', border: false })
-		IFrameAdapter.construct(model)
-		expect(model.modelState.border).toBe(false)
-
-		model = new MockOboModel({ type: 'media', border: false })
-		IFrameAdapter.construct(model)
-		expect(model.modelState.border).toBe(false)
-
-		model = new MockOboModel({ type: 'webpage', border: true })
-		IFrameAdapter.construct(model)
-		expect(model.modelState.border).toBe(true)
-
-		model = new MockOboModel({ type: 'media', border: true })
-		IFrameAdapter.construct(model)
-		expect(model.modelState.border).toBe(true)
-	})
-
 	test('adapter sets modelState.fit to "scale" by default, "scale" or "scroll" when specified, "scroll" if not specified (and type="webpage") and "scale" if not specified (and type="media")', () => {
 		model = new MockOboModel({ fit: 'sCroll' })
 		IFrameAdapter.construct(model)
@@ -110,14 +76,14 @@ describe('IFrame adapter', () => {
 		expect(model.modelState.fit).toBe('scale')
 	})
 
-	test('adapter sets modelState.controls to "reload" by default, "zoom,reload,new-window" if not specified (and type="webpage"), "reload" if not specified (and type="media") and lower-cases and trims values if specified', () => {
+	test('adapter sets modelState.controls to "reload" by default, "zoom,reload,new-window,border" if not specified (and type="webpage"), "reload" if not specified (and type="media") and lower-cases and trims values if specified', () => {
 		model = new MockOboModel({})
 		IFrameAdapter.construct(model)
 		expect(model.modelState.controls).toEqual(['reload'])
 
 		model = new MockOboModel({ type: 'webpage' })
 		IFrameAdapter.construct(model)
-		expect(model.modelState.controls).toEqual(['zoom', 'reload', 'new-window'])
+		expect(model.modelState.controls).toEqual(['zoom', 'reload', 'new-window', 'border'])
 
 		model = new MockOboModel({ type: 'media' })
 		IFrameAdapter.construct(model)
diff --git a/packages/obonode/obojobo-chunks-iframe/converter.js b/packages/obonode/obojobo-chunks-iframe/converter.js
index 02f7f888d0..b267ff8037 100644
--- a/packages/obonode/obojobo-chunks-iframe/converter.js
+++ b/packages/obonode/obojobo-chunks-iframe/converter.js
@@ -4,7 +4,7 @@ import IFrameSizingTypes from './iframe-sizing-types'
 /**
  * Generates an Obojobo IFrame from a Slate node.
  * Copies the id, type, and triggers.  The conversion also saves the
- * src, title, type, border, fit, width, height, initalZoom, autoload,
+ * src, title, type, controlsChanged, fit, width, height, initalZoom, autoload,
  * and controlls attributes.
  * @param {Object} node A Slate Node
  * @returns {Object} An Obojobo Iframe node
@@ -21,13 +21,14 @@ const slateToObo = node => {
 			src: node.content.src,
 			title: node.content.title,
 			type: node.content.type,
-			border: node.content.border,
 			fit: node.content.fit,
 			height: node.content.height,
 			initialZoom: node.content.initialZoom,
 			autoload: node.content.autoload,
 			controls: node.content.controls,
-			sizing: node.content.sizing
+			sizing: node.content.sizing,
+			contentType: node.content.contentType,
+			controlsChanged: node.content.controlsChanged
 		})
 	}
 
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..dabd458faa
--- /dev/null
+++ b/packages/obonode/obojobo-chunks-iframe/custom-width-icon.svg
@@ -0,0 +1,40 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 745 713" style="enable-background:new 0 0 745 713;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#724693;}
+	.st1{fill:#B0B0B1;}
+	.st2{enable-background:new    ;}
+	.st3{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M530.3,534.9H197.1c-9.6,0-17.4-7.8-17.4-17.4V186.3c0-9.6,7.8-17.4,17.4-17.4h333.3c9.6,0,17.4,7.8,17.4,17.4
+	v331.3C547.7,527.1,539.9,534.9,530.3,534.9z"/>
+<path class="st1" d="M601.5,129.6H128.7c-6,0-10.8-3.4-10.8-7.7v-9.6c0-4.3,4.8-7.7,10.8-7.7h472.9c6,0,10.8,3.4,10.8,7.7v9.6
+	C612.3,126.1,607.5,129.6,601.5,129.6z"/>
+<path class="st1" d="M277.2,65.5H128.8c-6,0-10.8-3.4-10.8-7.7v-9.6c0-4.3,4.8-7.7,10.8-7.7h148.4c6,0,10.8,3.4,10.8,7.7v9.6
+	C288,62,283.2,65.5,277.2,65.5z"/>
+<path class="st1" d="M601.2,65.5H341.8c-6,0-10.8-3.4-10.8-7.7v-9.6c0-4.3,4.8-7.7,10.8-7.7h259.4c6,0,10.8,3.4,10.8,7.7v9.6
+	C612,62,607.2,65.5,601.2,65.5z"/>
+<path class="st1" d="M373.2,612H129.8c-6,0-10.8-3.4-10.8-7.7v-9.6c0-4.3,4.8-7.7,10.8-7.7h243.4c6,0,10.8,3.4,10.8,7.7v9.6
+	C384,608.6,379.2,612,373.2,612z"/>
+<path class="st1" d="M600.2,610.7H460.3c-6,0-10.8-3.4-10.8-7.7v-9.6c0-4.3,4.8-7.7,10.8-7.7h139.9c6,0,10.8,3.4,10.8,7.7v9.6
+	C611,607.2,606.2,610.7,600.2,610.7z"/>
+<path class="st1" d="M234.2,671.1H129.5c-6,0-10.8-3.4-10.8-7.7v-9.6c0-4.3,4.8-7.7,10.8-7.7h104.7c6,0,10.8,3.4,10.8,7.7v9.6
+	C245,667.7,240.2,671.1,234.2,671.1z"/>
+<path class="st1" d="M601.2,671.1H324.8c-6,0-10.8-3.4-10.8-7.7v-9.6c0-4.3,4.8-7.7,10.8-7.7h276.4c6,0,10.8,3.4,10.8,7.7v9.6
+	C612,667.7,607.2,671.1,601.2,671.1z"/>
+<g class="st2">
+	<path class="st3" d="M314.8,325.1c0.4,0.4,0.7,1.1,0.7,2.1v3.2c0,0.6,0.3,0.9,0.8,0.9c0.4,0,0.8-0.2,1.2-0.5
+		c2.8-2.4,5.6-4.3,8.5-5.6c2.9-1.3,6.4-2,10.6-2c8,0,14.5,2.9,19.4,8.7c4.9,5.8,7.4,14.4,7.4,25.7c0,11.8-2.6,20.6-7.7,26.4
+		c-5.1,5.8-11.8,8.7-20.1,8.7c-3.4,0-6.5-0.5-9.4-1.5c-2.9-1-5.6-2.7-8.2-4.9c-1.1-0.8-1.7-1.3-2-1.3c-0.4,0-0.7,0.6-0.7,1.9v23
+		c0,1.6-0.8,2.4-2.3,2.4h-19.2c-1.5,0-2.3-0.8-2.3-2.5v-82.3c0-1.1,0.2-1.9,0.7-2.3c0.5-0.5,1.4-0.7,2.6-0.7h17.4
+		C313.5,324.4,314.3,324.7,314.8,325.1z M326.4,378.8c4.2,0,7.4-1.7,9.6-5c2.2-3.3,3.3-9,3.3-16.9c0-7.3-1.1-12.5-3.3-15.4
+		c-2.2-2.9-5.4-4.4-9.6-4.4c-3.1,0-5.7,0.8-7.9,2.5c-2.1,1.7-3.2,3.7-3.2,5.9v27.6C318.5,376.9,322.1,378.8,326.4,378.8z"/>
+	<path class="st3" d="M440.3,390c0,0.9-1,1.4-2.9,1.4h-19.8c-2.4,0-4.1-0.8-5.1-2.3l-12-16.3c-0.8-1.1-1.4-1.6-1.7-1.6
+		c-0.4,0-0.9,0.5-1.7,1.5l-12.2,16.4c-1,1.5-2.7,2.3-5.1,2.3h-12.6c-1.1,0-1.9-0.2-2.6-0.5c-0.7-0.3-1-0.8-1-1.5
+		c0-0.9,0.7-2.2,2-3.8l20.8-25.8c0.7-0.8,1.1-1.5,1.1-1.9c0-0.6-0.4-1.3-1.1-2.3l-21.1-27.3c-0.4-0.6-0.7-1.1-0.7-1.6
+		c0-0.7,0.3-1.2,0.8-1.6c0.5-0.4,1.2-0.6,2.1-0.6h18.8c1.3,0,2.4,0.2,3.1,0.5c0.7,0.3,1.3,0.9,1.9,1.8l10.4,14.4
+		c0.4,0.7,0.8,1,1.2,1c0.4,0,0.8-0.3,1.2-1l9.8-14.4c0.6-0.8,1.3-1.4,1.9-1.8c0.7-0.3,1.7-0.5,3-0.5h13.9c1.7,0,2.5,0.5,2.5,1.4
+		c0,0.6-0.3,1.2-0.8,1.9l-19.1,24.5c-0.6,0.7-0.9,1.3-0.9,1.9c0,0.6,0.4,1.3,1.1,2.3l22.9,30.1C439.7,388.2,440.3,389.4,440.3,390z"
+		/>
+</g>
+</svg>
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..dacb944cba
--- /dev/null
+++ b/packages/obonode/obojobo-chunks-iframe/edit-iframe-modal.js
@@ -0,0 +1,430 @@
+import './edit-iframe-modal.scss'
+
+import React from 'react'
+import Common from 'Common'
+
+const { Switch } = Common.components
+const { SimpleDialog } = Common.components.modal
+import IFrameSizingTypes from './iframe-sizing-types'
+import IFrameContentTypes from './iframe-content-types'
+
+class EditIframeModal extends React.Component {
+	constructor(props) {
+		super(props)
+
+		const defaultState = {
+			contentType: IFrameContentTypes.MEDIA,
+			autoload: false,
+			fit: '',
+			initialZoom: 1,
+			src: '',
+			title: '',
+			width: 640,
+			height: 480,
+			controls: '',
+			sizing: IFrameSizingTypes.TEXT_WIDTH,
+			openAdvancedOptions: false,
+			openSizingDimensions: false,
+			controlsChanged: false
+		}
+
+		this.state = {
+			...defaultState,
+			...props.content,
+			sizingMaxWidthStyle: {},
+			sizingTextWidthStyle: {},
+			sizingFixedWidthStyle: {}
+		}
+
+		this.changeBtnRef = React.createRef()
+
+		this.handleFitChange = this.handleFitChange.bind(this)
+		this.handleZoomChange = this.handleZoomChange.bind(this)
+		this.onChangeAutoload = this.onChangeAutoload.bind(this)
+		this.handleWidthChange = this.handleWidthChange.bind(this)
+		this.handleTitleChange = this.handleTitleChange.bind(this)
+		this.handleHeightChange = this.handleHeightChange.bind(this)
+		this.handleSizingChange = this.handleSizingChange.bind(this)
+		this.handleSourceChange = this.handleSourceChange.bind(this)
+		this.openAdvancedOptions = this.openAdvancedOptions.bind(this)
+		this.openSizingDimensions = this.openSizingDimensions.bind(this)
+		this.handleSizingClickStyle = this.handleSizingClickStyle.bind(this)
+		this.handleContentTypeChange = this.handleContentTypeChange.bind(this)
+		this.updateSettingsBasedOnContentType = this.updateSettingsBasedOnContentType.bind(this)
+	}
+
+	componentDidMount() {
+		this.changeBtnRef.current.focus()
+
+		this.updateSettingsBasedOnContentType(this.state.contentType, !this.state.controlsChanged)
+
+		// Setting styles of selected inputs based on props from new-iframe-modal
+		this.handleSizingClickStyle(this.state.sizing)
+	}
+
+	openAdvancedOptions() {
+		this.setState({ openAdvancedOptions: !this.state.openAdvancedOptions })
+	}
+
+	openSizingDimensions() {
+		this.setState({ openSizingDimensions: !this.state.openSizingDimensions })
+	}
+
+	handleSizingClickStyle(sizing) {
+		// color-action: #6714bd;
+		this.setState({
+			sizingMaxWidthStyle:
+				sizing === IFrameSizingTypes.MAX_WIDTH
+					? { backgroundColor: '#e5d9e3', color: '#6714bd' }
+					: {},
+			sizingTextWidthStyle:
+				sizing === IFrameSizingTypes.TEXT_WIDTH
+					? { backgroundColor: '#e5d9e3', color: '#6714bd' }
+					: {},
+			sizingFixedWidthStyle:
+				sizing === IFrameSizingTypes.FIXED ? { backgroundColor: '#e5d9e3', color: '#6714bd' } : {}
+		})
+	}
+
+	updateSettingsBasedOnContentType(contentType, setToDefault) {
+		// Default configuration based on content type selection
+		if (contentType === IFrameContentTypes.MEDIA) {
+			this.setState({
+				fit: setToDefault ? 'scale' : this.state.fit,
+				controls: setToDefault ? 'reload' : this.state.controls
+			})
+		} else {
+			this.setState({
+				fit: setToDefault ? 'scroll' : this.state.fit,
+				controls: setToDefault ? 'reload,new-window,zoom,border' : this.state.controls
+			})
+		}
+	}
+
+	handleControlChange(property, event) {
+		const controls = new Set(this.state.controls.split(','))
+
+		// Use checked value to determine the control string for the changed property
+		// Use controlList values to determine control strings for unchanged properties
+		if (event.target.checked) {
+			controls.add(property)
+		} else {
+			controls.delete(property)
+		}
+
+		this.setState({ controls: [...controls].join(','), controlsChanged: true })
+	}
+
+	onChangeAutoload(event) {
+		this.setState({ autoload: event.target.value === 'true' })
+	}
+
+	handleFitChange(e) {
+		this.setState({ fit: e.target.value })
+	}
+
+	handleZoomChange(e) {
+		this.setState({ initialZoom: e.target.value })
+	}
+
+	handleSizingChange(e) {
+		this.setState({ sizing: e.target.value })
+	}
+
+	handleTitleChange(e) {
+		this.setState({ title: e.target.value })
+	}
+
+	handleWidthChange(e) {
+		this.setState({ width: e.target.value })
+	}
+
+	handleHeightChange(e) {
+		this.setState({ height: e.target.value })
+	}
+
+	handleContentTypeChange(e) {
+		const contentType = e.target.value
+		this.setState({ contentType })
+		this.updateSettingsBasedOnContentType(contentType, true)
+	}
+
+	handleSourceChange(e) {
+		this.props.onCancel()
+		this.props.goBack(e, this.state.src)
+	}
+
+	render() {
+		const controlList = this.state.controls ? this.state.controls.split(',') : []
+
+		const isSizingSetToTextOrMaxWidth =
+			this.state.sizing === IFrameSizingTypes.TEXT_WIDTH ||
+			this.state.sizing === IFrameSizingTypes.MAX_WIDTH
+
+		return (
+			<SimpleDialog
+				cancelOk
+				title="Edit Embedded IFrame"
+				onConfirm={() => this.props.onConfirm(this.state)}
+				onCancel={this.props.onCancel}
+			>
+				<div className="edit-iframe-modal">
+					<header>
+						<label htmlFor="src-input">Source:</label>
+						<div>
+							<input id="src-input" disabled value={this.state.src} />
+							<button ref={this.changeBtnRef} onClick={this.handleSourceChange}>
+								Change...
+							</button>
+						</div>
+					</header>
+					<div className="content-type">
+						<div className="content-type-options-container">
+							<label id="content-type-options-label" htmlFor="content-type-options">
+								Content type:
+							</label>
+							<div id="content-type-options">
+								<label htmlFor="video-or-media">
+									<input
+										id="video-or-media"
+										type="radio"
+										name="content-type-option"
+										value={IFrameContentTypes.MEDIA}
+										checked={this.state.contentType === IFrameContentTypes.MEDIA}
+										onChange={this.handleContentTypeChange}
+									/>
+									<div>
+										<div className="video-or-media-icon"></div>
+										<span>Video or other media</span>
+									</div>
+								</label>
+								<label htmlFor="embedded-webpage">
+									<input
+										id="embedded-webpage"
+										type="radio"
+										name="content-type-option"
+										value={IFrameContentTypes.WEBPAGE}
+										checked={this.state.contentType === IFrameContentTypes.WEBPAGE}
+										onChange={this.handleContentTypeChange}
+									/>
+									<div>
+										<div className="embedded-webpage-icon"></div>
+										<span>Embedded webpage</span>
+									</div>
+								</label>
+							</div>
+						</div>
+						<small>This helps determine how the embedded content is best displayed</small>
+					</div>
+					<p className="title">Options</p>
+					<div className="sizing">
+						<label htmlFor="sizing-options-container">Sizing</label>
+						<div id="sizing-options-container">
+							<div className="sizing-options">
+								<label
+									style={this.state.sizingMaxWidthStyle}
+									htmlFor="max-width"
+									onClick={() => this.handleSizingClickStyle(IFrameSizingTypes.MAX_WIDTH)}
+								>
+									<input
+										id="max-width"
+										type="radio"
+										name="sizing-option"
+										value={IFrameSizingTypes.MAX_WIDTH}
+										checked={this.state.sizing === IFrameSizingTypes.MAX_WIDTH}
+										onChange={this.handleSizingChange}
+									/>
+									<div className="icon max-width-icon"></div>
+									<div className="sizing-description">
+										<p className="sizing-title">Responsive - full width</p>
+										<p>Grows up to the largest size (wider thant text)</p>
+									</div>
+								</label>
+								<label
+									style={this.state.sizingTextWidthStyle}
+									htmlFor="text-width"
+									onClick={() => this.handleSizingClickStyle(IFrameSizingTypes.TEXT_WIDTH)}
+								>
+									<input
+										id="text-width"
+										type="radio"
+										name="sizing-option"
+										value={IFrameSizingTypes.TEXT_WIDTH}
+										checked={this.state.sizing === IFrameSizingTypes.TEXT_WIDTH}
+										onChange={this.handleSizingChange}
+									/>
+									<div className="icon text-width-icon"></div>
+									<div className="sizing-description">
+										<p className="sizing-title">Responsive - text width</p>
+										<p>Grows up to the same width as the text</p>
+									</div>
+								</label>
+								<label
+									style={this.state.sizingFixedWidthStyle}
+									htmlFor="fixed-width"
+									onClick={() => this.handleSizingClickStyle(IFrameSizingTypes.FIXED)}
+								>
+									<input
+										id="fixed-width"
+										type="radio"
+										name="sizing-option"
+										value={IFrameSizingTypes.FIXED}
+										checked={this.state.sizing === IFrameSizingTypes.FIXED}
+										onChange={this.handleSizingChange}
+									/>
+									<div className="icon fixed-width-icon"></div>
+									<div className="sizing-description">
+										<p className="sizing-title">Fixed size</p>
+										<p>Shows at set pixel dimensions</p>
+									</div>
+								</label>
+							</div>
+							<button onClick={this.openSizingDimensions}>
+								{this.state.openSizingDimensions ? (
+									<span>Close dimensions</span>
+								) : (
+									<span>Edit dimensions</span>
+								)}
+							</button>
+						</div>
+					</div>
+					{this.state.openSizingDimensions && (
+						<div className="dimensions-container">
+							<div className="left-padding"></div>
+							<div className="dimensions">
+								<input
+									type="number"
+									min="1"
+									max="20000"
+									step="1"
+									placeholder={isSizingSetToTextOrMaxWidth ? '--' : 'Width'}
+									aria-label="Width"
+									value={isSizingSetToTextOrMaxWidth ? '' : this.state.width}
+									onChange={this.handleWidthChange}
+									disabled={isSizingSetToTextOrMaxWidth}
+								/>
+								<span className="pixels">
+									px <span className="lighter">×</span>
+								</span>
+								<input
+									type="number"
+									min="1"
+									max="20000"
+									step="1"
+									placeholder="Height"
+									aria-label="Height"
+									value={this.state.height}
+									onChange={this.handleHeightChange}
+								/>
+								<span className="pixels">px</span>
+							</div>
+						</div>
+					)}
+					<div className="loading-container">
+						<label htmlFor="loading-select">Loading:</label>
+						<div id="loading-select">
+							<select value={this.state.autoload || false} onChange={this.onChangeAutoload}>
+								<option value={false}>Load when student clicks IFrame</option>
+								<option value={true}>Load right away (Not recommended)</option>
+							</select>
+							{this.state.autoload && (
+								<small>
+									<div className="warning-icon"></div>
+									This option might cause your module to load or run slowly
+								</small>
+							)}
+						</div>
+					</div>
+					<div className="title-container">
+						<label htmlFor="title-input">Title:</label>
+						<div id="title-input">
+							<input
+								type="text"
+								placeholder="E.g.: The difference between speed and velocity"
+								value={this.state.title}
+								onChange={this.handleTitleChange}
+							/>
+							<small>This will be shown before the IFrame is loaded</small>
+						</div>
+					</div>
+					<div className="advanced-options-container">
+						<button className="button-advanced-options" onClick={this.openAdvancedOptions}>
+							{this.state.openAdvancedOptions ? (
+								<span>Close advanced options</span>
+							) : (
+								<span>Show all options (advanced)</span>
+							)}
+						</button>
+						{this.state.openAdvancedOptions && (
+							<div className="advanced-options">
+								<div className="fit-container">
+									<label htmlFor="select-fit">Fit:</label>
+									<select
+										id="select-fit"
+										value={this.state.fit || 'scale'}
+										onChange={this.handleFitChange}
+									>
+										<option value="scale">Scale</option>
+										<option value="scroll">Scroll</option>
+									</select>
+								</div>
+								<div className="initial-zoom-container">
+									<label htmlFor="initial-zoom">
+										Initial <br /> Zoom:
+									</label>
+									<input
+										id="initial-zoom"
+										min="0.01"
+										max="1000"
+										step=".01"
+										type="number"
+										placeholder="Decimal Value"
+										value={this.state.initialZoom}
+										onChange={this.handleZoomChange}
+									/>
+								</div>
+								<p className="title">Controls</p>
+								<div className="controls">
+									<div className="border-container">
+										<Switch
+											title="Border"
+											description="Adds a border around your embedded IFrame"
+											checked={controlList.includes('border')}
+											onChange={this.handleControlChange.bind(this, 'border')}
+										/>
+									</div>
+									<div className="reload-container">
+										<Switch
+											title="Reload"
+											description="Adds a control option to reload the contents of the IFrame"
+											checked={controlList.includes('reload')}
+											onChange={this.handleControlChange.bind(this, 'reload')}
+										/>
+									</div>
+									<div className="new-window-container">
+										<Switch
+											title="New Window"
+											description="Allows the IFrame to be opened in a new window"
+											checked={controlList.includes('new-window')}
+											onChange={this.handleControlChange.bind(this, 'new-window')}
+										/>
+									</div>
+									<div className="zoom-container">
+										<Switch
+											title="Zoom"
+											description="Allows students to zoom in and out on the IFrame contents"
+											checked={controlList.includes('zoom')}
+											onChange={this.handleControlChange.bind(this, 'zoom')}
+										/>
+									</div>
+								</div>
+							</div>
+						)}
+					</div>
+				</div>
+			</SimpleDialog>
+		)
+	}
+}
+
+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..24efc5f37a
--- /dev/null
+++ b/packages/obonode/obojobo-chunks-iframe/edit-iframe-modal.scss
@@ -0,0 +1,398 @@
+@import '~styles/includes';
+
+.edit-iframe-modal {
+	box-sizing: border-box;
+
+	input:focus,
+	select:focus {
+		outline-color: $color-action;
+	}
+
+	header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		text-align: left;
+
+		label {
+			width: 20%;
+		}
+
+		div {
+			width: 80%;
+			display: flex;
+			align-items: center;
+
+			#src-input {
+				@include text-input();
+
+				margin-right: 0.5em;
+				padding: 0.61em;
+				box-sizing: border-box;
+				flex: 1;
+			}
+
+			button {
+				color: $color-action;
+				border: 0.1em solid $color-action;
+				border-radius: 0.4em;
+				background: $color-bg;
+				padding: 0.78em;
+				box-sizing: border-box;
+
+				&:hover {
+					cursor: pointer;
+					color: $color-bg;
+					background-color: $color-action;
+				}
+			}
+		}
+	}
+
+	.content-type {
+		margin: 1em 0;
+		text-align: left;
+
+		.content-type-options-container {
+			text-align: left;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			#content-type-options-label {
+				width: 20%;
+			}
+
+			#content-type-options {
+				width: 80%;
+				display: flex;
+				align-items: center;
+				text-align: center;
+
+				label {
+					display: flex;
+					align-items: center;
+					gap: 1em;
+
+					span {
+						font-size: 0.8em;
+					}
+
+					div {
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+						gap: 0.5em;
+					}
+				}
+
+				label[for='video-or-media'] {
+					cursor: pointer;
+					border: 0.12em solid $color-neutral;
+					border-top-left-radius: 0.2em;
+					border-bottom-left-radius: 0.2em;
+					padding: 0.5em 0.8em 0.5em 0.4em;
+					transition: 0.2s;
+					width: 50%;
+				}
+
+				label[for='embedded-webpage'] {
+					cursor: pointer;
+					border: 0.12em solid $color-neutral;
+					border-top-right-radius: 0.2em;
+					border-bottom-right-radius: 0.2em;
+					padding: 0.5em 0.8em 0.5em 0.4em;
+					transition: 0.2s;
+					width: 50%;
+				}
+
+				label[for='video-or-media']:hover,
+				label[for='embedded-webpage']:hover {
+					border: 0.12em solid $color-action;
+					transition: 0.2s;
+				}
+
+				.video-or-media-icon {
+					background: url('./video-icon.svg') no-repeat center;
+					width: 5.5em;
+					height: 2.75em;
+				}
+
+				.embedded-webpage-icon {
+					background: url('./embeddable-webpage-icon.svg') no-repeat center;
+					width: 5.5em;
+					height: 2.75em;
+				}
+			}
+		}
+
+		small {
+			color: $color-neutral-text;
+			font-size: 0.7em;
+			margin-top: 0.5em;
+			margin-left: 20%;
+			display: block;
+			min-width: 80%;
+		}
+	}
+
+	.title {
+		font-weight: 600;
+		margin: 1em 0;
+	}
+
+	.sizing {
+		margin-bottom: 1em;
+		display: flex;
+		text-align: left;
+
+		label[for='sizing-options-container'] {
+			width: 20%;
+		}
+
+		#sizing-options-container {
+			width: 80%;
+			text-align: left;
+
+			.sizing-options {
+				border-radius: 0.2em;
+				border: 0.12em solid $color-neutral;
+
+				label[for='max-width'],
+				label[for='text-width'],
+				label[for='fixed-width'] {
+					display: flex;
+					align-items: center;
+					gap: 0.9em;
+					text-align: left;
+					cursor: pointer;
+					padding: 0.4em;
+					transition: 0.1s;
+
+					p {
+						font-size: 0.8em;
+						margin: 0;
+					}
+
+					.sizing-title {
+						font-weight: 600;
+					}
+
+					&:hover {
+						transition: 0.1s;
+						background-color: $color-action-hover;
+					}
+				}
+
+				.icon {
+					width: 25%;
+					height: 5em;
+					background-color: $color-bg;
+					border: 0.1em solid $color-neutral;
+					border-radius: 0.2em;
+				}
+
+				.max-width-icon {
+					padding: 0 0.43em;
+					background: url('./max-width-icon.svg') no-repeat center;
+					background-color: $color-bg;
+				}
+
+				.text-width-icon {
+					background: url('./text-width-icon.svg') no-repeat center;
+					background-color: $color-bg;
+				}
+
+				.fixed-width-icon {
+					background: url('./custom-width-icon.svg') no-repeat center;
+					background-color: $color-bg;
+				}
+			}
+
+			button {
+				color: $color-action;
+				background: transparent;
+				border: none;
+				text-decoration: underline;
+
+				&:hover {
+					cursor: pointer;
+					color: $color-action-minor;
+					transition: 0.3s;
+				}
+			}
+		}
+	}
+
+	.dimensions-container {
+		display: flex;
+		align-items: center;
+
+		.left-padding {
+			width: 20%;
+		}
+
+		.dimensions {
+			width: 80%;
+			text-align: left;
+
+			input {
+				@include text-input();
+
+				box-sizing: border-box;
+			}
+
+			.pixels {
+				margin: 0 0.3em;
+
+				.lighter {
+					color: $color-neutral-text;
+				}
+			}
+		}
+	}
+
+	.loading-container {
+		display: flex;
+		margin-top: 1em;
+		text-align: left;
+
+		label[for='loading-select'] {
+			width: 20%;
+			margin-top: 0.4em;
+		}
+
+		#loading-select {
+			width: 80%;
+			text-align: left;
+
+			select {
+				@include select-input();
+
+				font-size: 0.8em;
+				box-sizing: border-box;
+				width: 100%;
+				border: 1px solid $color-shadow;
+			}
+
+			small {
+				display: flex;
+				color: $color-neutral-text;
+				font-size: 0.7em;
+				margin-top: 0.3em;
+
+				.warning-icon {
+					margin-right: 0.5em;
+					width: 1.3em;
+					height: 1.3em;
+					background: url('./warning-icon.svg') no-repeat center;
+				}
+			}
+		}
+	}
+
+	.title-container {
+		display: flex;
+		margin-top: 1em;
+		text-align: left;
+
+		label[for='title-input'] {
+			width: 20%;
+			margin-top: 0.4em;
+		}
+
+		#title-input {
+			width: 80%;
+			text-align: left;
+
+			input {
+				@include text-input();
+
+				padding: 0.7em;
+				box-sizing: border-box;
+				width: 100%;
+			}
+
+			small {
+				color: $color-neutral-text;
+				font-size: 0.7em;
+			}
+		}
+	}
+
+	.advanced-options-container {
+		text-align: center;
+		margin-top: 1em;
+
+		.button-advanced-options {
+			color: $color-action;
+			background: transparent;
+			border: none;
+			text-decoration: underline;
+			font-size: 0.9em;
+
+			&:hover {
+				cursor: pointer;
+				color: $color-action-minor;
+				transition: 0.3s;
+			}
+		}
+
+		.fit-container {
+			display: flex;
+			align-items: center;
+			margin-top: 1em;
+			text-align: left;
+
+			label[for='select-fit'] {
+				width: 20%;
+			}
+
+			#select-fit {
+				@include select-input();
+
+				font-size: 0.8em;
+				box-sizing: border-box;
+				width: 80%;
+				border: 1px solid $color-shadow;
+			}
+		}
+
+		.initial-zoom-container {
+			display: flex;
+			align-items: center;
+			margin-top: 1em;
+			text-align: left;
+
+			label[for='initial-zoom'] {
+				width: 20%;
+			}
+
+			#initial-zoom {
+				@include text-input();
+
+				width: 80%;
+				box-sizing: border-box;
+			}
+		}
+
+		.controls {
+			text-align: left;
+
+			.border-container,
+			.reload-container,
+			.new-window-container,
+			.zoom-container {
+				border: 0.1em solid $color-neutral;
+				padding: 0.7em;
+				border-radius: 0.4em;
+			}
+
+			.reload-container,
+			.new-window-container,
+			.zoom-container {
+				margin: 0.8em 0;
+			}
+		}
+	}
+}
diff --git a/packages/obonode/obojobo-chunks-iframe/edit-iframe-modal.test.js b/packages/obonode/obojobo-chunks-iframe/edit-iframe-modal.test.js
new file mode 100644
index 0000000000..c5ef0167e4
--- /dev/null
+++ b/packages/obonode/obojobo-chunks-iframe/edit-iframe-modal.test.js
@@ -0,0 +1,447 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import TestRenderer from 'react-test-renderer'
+import EditIFrameModal from './edit-iframe-modal'
+import IFrameSizingTypes from './iframe-sizing-types'
+import IFrameContentTypes from './iframe-content-types'
+
+// mock ref.current.focus and ref.current.select on inputs
+const testRendererOptions = {
+	createNodeMock: element => {
+		if (element.type === 'button') {
+			return {
+				focus: () => {},
+				select: () => {}
+			}
+		}
+	}
+}
+
+describe('EditIframeModal', () => {
+	beforeEach(() => {
+		jest.clearAllMocks()
+	})
+
+	test('EditIframeModal component mounts as expected', () => {
+		const component = mount(<EditIFrameModal content={{ src: '' }} />)
+
+		const tree = component.html()
+		expect(tree).toMatchSnapshot()
+	})
+
+	test('EditIframeModal component calls onConfirm from props', () => {
+		const onConfirm = jest.fn()
+
+		const component = mount(<EditIFrameModal content={{ src: '' }} onConfirm={onConfirm} />)
+
+		component
+			.find('button')
+			.at(4)
+			.simulate('click')
+		expect(onConfirm).toHaveBeenCalled()
+	})
+
+	test('EditIframeModal component changes title', () => {
+		const component = mount(<EditIFrameModal content={{ src: '' }} />)
+
+		component
+			.find('input')
+			.at(7)
+			.simulate('change', { target: { value: 'changed' } })
+		expect(component.html()).toMatchSnapshot()
+	})
+
+	test('EditIFrameModal component changes border', () => {
+		const testRenderer = TestRenderer.create(
+			<EditIFrameModal content={{ src: '' }} />,
+			testRendererOptions
+		)
+
+		// Opening advanced options to render special configs.
+		const button = testRenderer.root.findAllByType('button')[2]
+		button.props.onClick()
+
+		// Actual testing starts here.
+		const startState = testRenderer.toJSON()
+		expect(startState).toMatchSnapshot()
+
+		// Locating the switch component for the border input
+		const testInstance = testRenderer.root
+		const borderSwitch = testInstance.findByProps({ title: 'Border' })
+
+		// Executing that switch's onChange
+		borderSwitch.props.onChange({ target: { checked: true } })
+
+		// Capturing the changes
+		const endState = testRenderer.toJSON()
+
+		// Comparing the snapshots
+		expect(endState).toMatchSnapshot()
+		expect(startState).not.toEqual(endState)
+	})
+
+	test('IFrameProperties component changes fit', () => {
+		let testRenderer = TestRenderer.create(
+			<EditIFrameModal content={{ src: '' }} />,
+			testRendererOptions
+		)
+
+		// Opening advanced options to render special configs.
+		let button = testRenderer.root.findAllByType('button')[2]
+		button.props.onClick()
+
+		// Actual testing starts here.
+		let startState = testRenderer.toJSON()
+		expect(startState).toMatchSnapshot()
+
+		const select = testRenderer.root.findByProps({ id: 'select-fit' })
+		select.props.onChange({ target: { value: 'changed' } })
+
+		// Capturing the changes
+		const endState = testRenderer.toJSON()
+
+		// Comparing the snapshots
+		expect(endState).toMatchSnapshot()
+		expect(startState).not.toEqual(endState)
+
+		// Testing if a default scale is set to the component if 'this.state.fit'
+		// is empty/undefined/somehow renders false in a || condition
+		testRenderer = TestRenderer.create(
+			<EditIFrameModal content={{ src: '', fit: '', controlsChanged: true }} />,
+			testRendererOptions
+		)
+
+		button = testRenderer.root.findAllByType('button')[2]
+		button.props.onClick()
+
+		startState = testRenderer.toJSON()
+		expect(startState).toMatchSnapshot()
+	})
+
+	test('EditIFrameModal component changes width', () => {
+		const component = mount(<EditIFrameModal content={{ src: '' }} />)
+
+		// Opening dimensions section to render special dimension inputs.
+		component
+			.find('button')
+			.at(1)
+			.simulate('click')
+
+		// Actual testing starts here.
+		const widthInput = component.find('input').at(7)
+		expect(widthInput.prop('placeholder')).toBe('--')
+		expect(component.state().width).toBe(640)
+
+		widthInput.simulate('change', { target: { value: 600 } })
+		expect(component.state().width).toBe(600)
+		expect(component.html()).toMatchSnapshot()
+	})
+
+	test('EditIFrameModal component changes width according to sizing option', () => {
+		const component = mount(
+			<EditIFrameModal
+				content={{
+					src: '',
+					sizing: IFrameSizingTypes.TEXT_WIDTH
+				}}
+			/>
+		)
+
+		// Opening dimensions section to render special dimension inputs.
+		component
+			.find('button')
+			.at(1)
+			.simulate('click')
+
+		// Actual testing starts here.
+		const widthInput = component.find('input').at(7)
+		expect(widthInput.prop('placeholder')).toBe('--')
+		expect(widthInput.prop('value')).toBe('')
+
+		const radio = component.find('input').at(6)
+		radio.simulate('change', { target: { value: IFrameSizingTypes.FIXED } })
+		expect(component.state().width).toBe(640)
+	})
+
+	test('EditIFrameModal component changes height', () => {
+		const component = mount(<EditIFrameModal content={{ src: '' }} />)
+
+		// Opening dimensions section to render special dimension inputs.
+		component
+			.find('button')
+			.at(1)
+			.simulate('click')
+
+		// Actual testing starts here.
+		const heightInput = component.find('input').at(8)
+		expect(heightInput.prop('placeholder')).toBe('Height')
+		expect(component.state().height).toBe(480)
+
+		heightInput.simulate('change', { target: { value: 999 } })
+		expect(component.state().height).toBe(999)
+		expect(component.html()).toMatchSnapshot()
+	})
+
+	test('EditIFrameModal component changes initial zoom', () => {
+		const component = mount(<EditIFrameModal content={{ src: '' }} />)
+
+		// Opening advanced options to render special configs.
+		component
+			.find('button')
+			.at(2)
+			.simulate('click')
+
+		// Actual testing starts here.
+		const zoomInput = component.find('input').at(8)
+		expect(zoomInput.prop('placeholder')).toBe('Decimal Value')
+		zoomInput.simulate('change', { target: { value: 333 } })
+		expect(component.html()).toMatchSnapshot()
+	})
+
+	test('EditIFrameModal component changes autoload', () => {
+		const testRenderer = TestRenderer.create(
+			<EditIFrameModal content={{ src: '', autoload: true }} />,
+			testRendererOptions
+		)
+
+		const startState = testRenderer.toJSON()
+		expect(startState).toMatchSnapshot()
+
+		// locate the switch component for border input
+		const testInstance = testRenderer.root
+		const autoloadSelect = testInstance.findAllByType('select')[0]
+
+		// execute that switch's onChange
+		autoloadSelect.props.onChange({ target: { value: false } })
+
+		// capture the changes
+		const endState = testRenderer.toJSON()
+
+		// compare the snapshots
+		expect(endState).toMatchSnapshot()
+		expect(startState).not.toEqual(endState)
+	})
+
+	test('EditIFrameModal component changes Reload', () => {
+		const testRenderer = TestRenderer.create(
+			<EditIFrameModal
+				content={{
+					src: ''
+				}}
+			/>,
+			testRendererOptions
+		)
+
+		// Opening advanced options to render special configs.
+		const button = testRenderer.root.findAllByType('button')[2]
+		button.props.onClick()
+
+		// Actual testing starts here.
+		const startState = testRenderer.toJSON()
+		expect(startState).toMatchSnapshot()
+
+		// Locating the switch component for border input
+		const testInstance = testRenderer.root
+		const autoloadSwitch = testInstance.findByProps({ title: 'Reload' })
+
+		// Executing that switch's onChange
+		autoloadSwitch.props.onChange({ target: { checked: true } })
+		expect(testInstance.instance.state.controls).toBe('reload')
+
+		// Capturing the changes
+		const endState = testRenderer.toJSON()
+
+		// Comparing the snapshots
+		expect(endState).toMatchSnapshot()
+
+		expect(startState).not.toEqual(endState)
+
+		// Turning it back off
+		autoloadSwitch.props.onChange({ target: { checked: false } })
+		expect(testInstance.instance.state.controls).toBe('')
+	})
+
+	test('EditIFrameModal component changes New Window', () => {
+		const testRenderer = TestRenderer.create(
+			<EditIFrameModal content={{ src: '' }} />,
+			testRendererOptions
+		)
+
+		// Opening advanced options to render special configs.
+		const button = testRenderer.root.findAllByType('button')[2]
+		button.props.onClick()
+
+		// Actual testing starts here.
+		const startState = testRenderer.toJSON()
+		expect(startState).toMatchSnapshot()
+
+		// Locating the switch component for border input
+		const testInstance = testRenderer.root
+		const autoloadSwitch = testInstance.findByProps({ title: 'New Window' })
+
+		// Executing that switch's onChange
+		autoloadSwitch.props.onChange({ target: { checked: true } })
+
+		// Capturing the changes
+		const endState = testRenderer.toJSON()
+
+		// Comparing the snapshots
+		expect(endState).toMatchSnapshot()
+		expect(startState).not.toEqual(endState)
+	})
+
+	test('EditIFrameModal component changes Zoom', () => {
+		const testRenderer = TestRenderer.create(
+			<EditIFrameModal content={{ src: '' }} />,
+			testRendererOptions
+		)
+
+		// Opening advanced options to render special configs.
+		const button = testRenderer.root.findAllByType('button')[2]
+		button.props.onClick()
+
+		// Actual testing starts here.
+		const startState = testRenderer.toJSON()
+		expect(startState).toMatchSnapshot()
+
+		// Locating the switch component for border input
+		const testInstance = testRenderer.root
+		const autoloadSwitch = testInstance.findByProps({ title: 'Zoom' })
+
+		// Executing that switch's onChange
+		autoloadSwitch.props.onChange({ target: { checked: true } })
+
+		// Capturing the changes
+		const endState = testRenderer.toJSON()
+
+		// Comparing the snapshots
+		expect(endState).toMatchSnapshot()
+		expect(startState).not.toEqual(endState)
+	})
+
+	test('EditIFrameModal component changes sizing', () => {
+		const component = mount(
+			<EditIFrameModal
+				content={{
+					src: '',
+					sizing: IFrameSizingTypes.MAX_WIDTH
+				}}
+			/>
+		)
+
+		component
+			.find('#text-width')
+			.at(0)
+			.simulate('change', { target: { value: 'changed' } })
+		expect(component.html()).toMatchSnapshot()
+	})
+
+	test('EditIFrameModal component changes content type', () => {
+		let component = mount(
+			<EditIFrameModal
+				content={{
+					src: '',
+					contentType: IFrameContentTypes.MEDIA
+				}}
+			/>
+		)
+
+		component
+			.find('#embedded-webpage')
+			.at(0)
+			.simulate('change', { target: { value: IFrameContentTypes.WEBPAGE } })
+		expect(component.html()).toMatchSnapshot()
+
+		component = mount(
+			<EditIFrameModal
+				content={{
+					src: '',
+					contentType: IFrameContentTypes.MEDIA,
+					controlsChanged: true
+				}}
+			/>
+		)
+		expect(component.html()).toMatchSnapshot()
+
+		component = mount(
+			<EditIFrameModal
+				content={{
+					src: '',
+					contentType: IFrameContentTypes.WEBPAGE,
+					controlsChanged: true
+				}}
+			/>
+		)
+
+		component
+			.find('#video-or-media')
+			.at(0)
+			.simulate('change', { target: { value: IFrameContentTypes.MEDIA } })
+		expect(component.html()).toMatchSnapshot()
+	})
+
+	test('EditIFrameModal closes itself and goes back to NewIFrameModal', () => {
+		const onCancel = jest.fn()
+		const goBack = jest.fn()
+
+		const testRenderer = TestRenderer.create(
+			<EditIFrameModal content={{ src: '' }} onCancel={onCancel} goBack={goBack} />,
+			testRendererOptions
+		)
+
+		const button = testRenderer.root.findAllByType('button')[0]
+		button.props.onClick()
+
+		expect(onCancel).toHaveBeenCalled()
+		expect(goBack).toHaveBeenCalled()
+	})
+
+	test('EditIFrameModal changes hover and click states as expected', () => {
+		const onCancel = jest.fn()
+		const goBack = jest.fn()
+
+		const testRenderer = TestRenderer.create(
+			<EditIFrameModal content={{ src: '' }} onCancel={onCancel} goBack={goBack} />,
+			testRendererOptions
+		)
+
+		// Max-width label
+		let label = testRenderer.root.findAllByType('label')[5]
+		label.props.onClick()
+
+		let startState = testRenderer.toJSON()
+		expect(startState).toMatchSnapshot()
+
+		label.props.onClick()
+
+		let endState = testRenderer.toJSON()
+		expect(endState).toMatchSnapshot()
+		expect(startState).not.toEqual(endState)
+
+		// Text-width label
+		label = testRenderer.root.findAllByType('label')[6]
+		label.props.onClick()
+
+		startState = testRenderer.toJSON()
+		expect(startState).toMatchSnapshot()
+
+		label.props.onClick()
+
+		endState = testRenderer.toJSON()
+		expect(endState).toMatchSnapshot()
+		expect(startState).not.toEqual(endState)
+
+		// Fixed width label
+		label = testRenderer.root.findAllByType('label')[7]
+		label.props.onClick()
+
+		startState = testRenderer.toJSON()
+		expect(startState).toMatchSnapshot()
+
+		label.props.onClick()
+
+		endState = testRenderer.toJSON()
+		expect(endState).toMatchSnapshot()
+		expect(startState).not.toEqual(endState)
+	})
+})
diff --git a/packages/obonode/obojobo-chunks-iframe/editor-component.js b/packages/obonode/obojobo-chunks-iframe/editor-component.js
index 399a66c34a..978e121a18 100644
--- a/packages/obonode/obojobo-chunks-iframe/editor-component.js
+++ b/packages/obonode/obojobo-chunks-iframe/editor-component.js
@@ -12,7 +12,8 @@ import {
 	unfreezeEditor
 } 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'
 
@@ -23,13 +24,15 @@ const isOrNot = Common.util.isOrNot
 class IFrame extends React.Component {
 	constructor(props) {
 		super(props)
-		this.focusIframe = this.focusIframe.bind(this)
 		this.deleteNode = this.deleteNode.bind(this)
-		this.showIFramePropertiesModal = this.showIFramePropertiesModal.bind(this)
+		this.focusIframe = this.focusIframe.bind(this)
+		this.returnFocusOnTab = this.returnFocusOnTab.bind(this)
 		this.changeProperties = this.changeProperties.bind(this)
+		this.openNewIframeModal = this.openNewIframeModal.bind(this)
+		this.openEditIframeModal = this.openEditIframeModal.bind(this)
+		this.onCloseAnIFrameModal = this.onCloseAnIFrameModal.bind(this)
 		this.returnFocusOnShiftTab = this.returnFocusOnShiftTab.bind(this)
-		this.returnFocusOnTab = this.returnFocusOnTab.bind(this)
-		this.onCloseIFramePropertiesModal = this.onCloseIFramePropertiesModal.bind(this)
+		this.decideWhichModalToOpen = this.decideWhichModalToOpen.bind(this)
 	}
 
 	focusIframe() {
@@ -41,25 +44,65 @@ class IFrame extends React.Component {
 		})
 	}
 
-	showIFramePropertiesModal(event) {
+	decideWhichModalToOpen(event, src) {
 		event.preventDefault()
 		event.stopPropagation()
+
+		// This function should only be called with the second param 'src'
+		// if the NewIframeModal is opened by the EditIFrameModal (through
+		// the 'Change...' button)
+		if (src) {
+			this.openNewIframeModal(src)
+			return
+		}
+
+		// If IFrame contains a previously set src, opens EditIFrameModal instead
+		// of NewIFrameModal
+		if (this.props.element.content.src) {
+			this.openEditIframeModal(this.props.element.content)
+			return
+		}
+
+		this.openNewIframeModal()
+	}
+
+	openNewIframeModal(src) {
+		const content = Object.assign({}, this.props.element.content)
+		content.src = content.srcToLoad = src
+
 		ModalUtil.show(
-			<IframeProperties
-				content={this.props.element.content}
-				onConfirm={this.changeProperties}
-				onCancel={this.onCloseIFramePropertiesModal}
+			<NewIframeModal
+				content={content}
+				onConfirm={this.openEditIframeModal}
+				onCancel={this.onCloseAnIFrameModal}
 			/>
 		)
 
 		freezeEditor(this.props.editor)
 	}
 
-	onCloseIFramePropertiesModal() {
+	onCloseAnIFrameModal() {
 		ModalUtil.hide()
 		unfreezeEditor(this.props.editor)
 	}
 
+	openEditIframeModal(content) {
+		// Closes new IFrame modal
+		this.onCloseAnIFrameModal()
+
+		// Opens edit IFrame modal
+		ModalUtil.show(
+			<EditIframeModal
+				content={{ ...content }}
+				onConfirm={this.changeProperties}
+				onCancel={this.onCloseAnIFrameModal}
+				goBack={this.decideWhichModalToOpen}
+			/>
+		)
+
+		freezeEditor(this.props.editor)
+	}
+
 	changeProperties(content) {
 		const path = ReactEditor.findPath(this.props.editor, this.props.element)
 		Transforms.setNodes(
@@ -67,7 +110,8 @@ class IFrame extends React.Component {
 			{ content: { ...this.props.element.content, ...content } },
 			{ at: path }
 		)
-		this.onCloseIFramePropertiesModal()
+
+		this.onCloseAnIFrameModal()
 	}
 
 	getTitle(src, title) {
@@ -147,7 +191,7 @@ class IFrame extends React.Component {
 							</span>
 							<Button
 								className="properties-button"
-								onClick={this.showIFramePropertiesModal}
+								onClick={this.decideWhichModalToOpen}
 								onKeyDown={this.returnFocusOnTab}
 								tabIndex={selected ? 0 : -1}
 							>
diff --git a/packages/obonode/obojobo-chunks-iframe/editor-component.test.js b/packages/obonode/obojobo-chunks-iframe/editor-component.test.js
index 97ebd4a563..84e74fdcb9 100644
--- a/packages/obonode/obojobo-chunks-iframe/editor-component.test.js
+++ b/packages/obonode/obojobo-chunks-iframe/editor-component.test.js
@@ -139,7 +139,7 @@ describe('IFrame Editor Node', () => {
 		expect(Transforms.removeNodes).toHaveBeenCalled()
 	})
 
-	test('IFrame component edits properties', () => {
+	test('IFrame component opens modals accordingly', () => {
 		const component = mount(
 			<IFrame
 				element={{
@@ -161,11 +161,18 @@ describe('IFrame Editor Node', () => {
 			/>
 		)
 
+		// Testing opening NewIFrameModal
 		component
 			.find('button')
 			.at(1)
 			.simulate('click')
+		expect(ModalUtil.show).toHaveBeenCalled()
 
+		// Testing opening EditIFrameModal
+		component.instance().openEditIframeModal({
+			src: 'mock-src',
+			srcFormatted: 'mock-formatted-src'
+		})
 		expect(ModalUtil.show).toHaveBeenCalled()
 	})
 
@@ -231,4 +238,45 @@ describe('IFrame Editor Node', () => {
 
 		expect(Transforms.setNodes).toHaveBeenCalled()
 	})
+
+	test('IFrame opens EditIFrameModal when a src is set', () => {
+		const component = renderer.create(
+			<IFrame
+				element={{
+					content: {
+						src: 'mock-src'
+					}
+				}}
+			/>
+		)
+		const button = component.root.findAllByType('button')[1]
+		button.props.onClick({
+			preventDefault: () => {},
+			stopPropagation: () => {}
+		})
+		expect(component.toJSON()).toMatchSnapshot()
+	})
+
+	test('IFrame opens NewIFrameModal after onChange... is pressed', () => {
+		const component = renderer.create(
+			<IFrame
+				element={{
+					content: {
+						controls: '',
+						border: false,
+						initialZoom: 1
+					}
+				}}
+			/>
+		)
+		const button = component.root.findAllByType('button')[1]
+		button.props.onClick(
+			{
+				preventDefault: () => {},
+				stopPropagation: () => {}
+			},
+			'mock-src-to-change'
+		)
+		expect(component.toJSON()).toMatchSnapshot()
+	})
 })
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 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 836 536" style="enable-background:new 0 0 836 536;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#DDDCDD;}
+</style>
+<g>
+	<path class="st0" d="M805.3,12.7c10.2,0,18.4,8.3,18.4,18.4v473.1c0,10.2-8.3,18.4-18.4,18.4H30.2c-10.2,0-18.4-8.3-18.4-18.4V31.2
+		c0-10.2,8.3-18.4,18.4-18.4H805.3 M805.3,6.7H30.2C16.7,6.7,5.7,17.7,5.7,31.2v473.1c0,13.5,10.9,24.4,24.4,24.4h775.1
+		c13.5,0,24.4-10.9,24.4-24.4V31.2C829.7,17.7,818.8,6.7,805.3,6.7L805.3,6.7z"/>
+</g>
+<g>
+	<path class="st0" d="M825,85H9V26.6C9,17.4,16.4,10,25.6,10h773.6c14.2,0,25.7,11.5,25.7,25.7V85z"/>
+</g>
+<rect x="175" y="86" class="st0" width="7" height="438"/>
+<path class="st0" d="M467.2,173H212.8c-2.7,0-4.8-2.2-4.8-4.8v-23.4c0-2.7,2.2-4.8,4.8-4.8h254.4c2.7,0,4.8,2.2,4.8,4.8v23.4
+	C472,170.8,469.8,173,467.2,173z"/>
+<path class="st0" d="M792.2,173H519.8c-2.7,0-4.8-2.2-4.8-4.8v-23.4c0-2.7,2.2-4.8,4.8-4.8h272.4c2.7,0,4.8,2.2,4.8,4.8v23.4
+	C797,170.8,794.8,173,792.2,173z"/>
+<path class="st0" d="M674.2,247H213.8c-2.7,0-4.8-2.2-4.8-4.8v-23.4c0-2.7,2.2-4.8,4.8-4.8h460.4c2.7,0,4.8,2.2,4.8,4.8v23.4
+	C679,244.8,676.8,247,674.2,247z"/>
+<path class="st0" d="M350.2,326H213.8c-2.7,0-4.8-2.2-4.8-4.8v-23.4c0-2.7,2.2-4.8,4.8-4.8h136.4c2.7,0,4.8,2.2,4.8,4.8v23.4
+	C355,323.8,352.8,326,350.2,326z"/>
+<path class="st0" d="M545.2,326H395.8c-2.7,0-4.8-2.2-4.8-4.8v-23.4c0-2.7,2.2-4.8,4.8-4.8h149.4c2.7,0,4.8,2.2,4.8,4.8v23.4
+	C550,323.8,547.8,326,545.2,326z"/>
+<path class="st0" d="M794.2,326H607.8c-2.7,0-4.8-2.2-4.8-4.8v-23.4c0-2.7,2.2-4.8,4.8-4.8h186.4c2.7,0,4.8,2.2,4.8,4.8v23.4
+	C799,323.8,796.8,326,794.2,326z"/>
+<path class="st0" d="M740.2,401H214.8c-2.7,0-4.8-2.2-4.8-4.8v-23.4c0-2.7,2.2-4.8,4.8-4.8h525.4c2.7,0,4.8,2.2,4.8,4.8v23.4
+	C745,398.8,742.8,401,740.2,401z"/>
+<path class="st0" d="M437.2,476H214.8c-2.7,0-4.8-2.2-4.8-4.8v-23.4c0-2.7,2.2-4.8,4.8-4.8h222.4c2.7,0,4.8,2.2,4.8,4.8v23.4
+	C442,473.8,439.8,476,437.2,476z"/>
+</svg>
diff --git a/packages/obonode/obojobo-chunks-iframe/iframe-content-types.js b/packages/obonode/obojobo-chunks-iframe/iframe-content-types.js
new file mode 100644
index 0000000000..72f5b3a309
--- /dev/null
+++ b/packages/obonode/obojobo-chunks-iframe/iframe-content-types.js
@@ -0,0 +1,4 @@
+export default {
+	MEDIA: 'media',
+	WEBPAGE: 'webpage'
+}
diff --git a/packages/obonode/obojobo-chunks-iframe/iframe-control-types.js b/packages/obonode/obojobo-chunks-iframe/iframe-control-types.js
index d9f0e0a152..d4bcb812d6 100644
--- a/packages/obonode/obojobo-chunks-iframe/iframe-control-types.js
+++ b/packages/obonode/obojobo-chunks-iframe/iframe-control-types.js
@@ -1,5 +1,6 @@
 export default {
 	ZOOM: 'zoom',
 	RELOAD: 'reload',
-	NEW_WINDOW: 'new-window'
+	NEW_WINDOW: 'new-window',
+	BORDER: 'border'
 }
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..e5e440f6b4
--- /dev/null
+++ b/packages/obonode/obojobo-chunks-iframe/max-width-icon.svg
@@ -0,0 +1,32 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 745 713" style="enable-background:new 0 0 745 713;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#724693;}
+	.st1{fill:#FFFFFF;}
+	.st2{fill:#B0B0B1;}
+</style>
+<path class="st0" d="M716.6,537H28.4c-9.6,0-17.4-7.8-17.4-17.4V188.4c0-9.6,7.8-17.4,17.4-17.4h688.3c9.6,0,17.4,7.8,17.4,17.4
+	v331.3C734,529.2,726.2,537,716.6,537z"/>
+<path class="st1" d="M28.4,368.5l-5.1-4.7c-2.1-2-2.3-5.3-0.3-7.4l43.4-47.5c2-2.1,5.3-2.3,7.4-0.3l5.1,4.7c2.1,2,2.3,5.3,0.3,7.4
+	l-43.4,47.5C33.9,370.3,30.6,370.4,28.4,368.5z"/>
+<path class="st1" d="M23.2,356.8l4.7-5.1c2-2.1,5.3-2.3,7.4-0.3l47.5,43.5c2.1,2,2.3,5.3,0.3,7.4l-4.7,5.1c-2,2.1-5.3,2.3-7.4,0.3
+	l-47.5-43.5C21.4,362.3,21.2,359,23.2,356.8z"/>
+<path class="st1" d="M712.7,367.1l5.1-4.7c2.1-2,2.3-5.3,0.3-7.4l-43.4-47.5c-2-2.1-5.3-2.3-7.4-0.3l-5.1,4.7
+	c-2.1,2-2.3,5.3-0.3,7.4l43.4,47.5C707.2,369,710.5,369.1,712.7,367.1z"/>
+<path class="st1" d="M717.9,355.5l-4.7-5.1c-2-2.1-5.3-2.3-7.4-0.3l-47.5,43.5c-2.1,2-2.3,5.3-0.3,7.4l4.7,5.1
+	c2,2.1,5.3,2.3,7.4,0.3l47.5-43.5C719.7,361,719.9,357.6,717.9,355.5z"/>
+<path class="st2" d="M601.2,119H127.8c-6,0-10.8-3.4-10.8-7.7v-9.6c0-4.3,4.8-7.7,10.8-7.7h473.4c6,0,10.8,3.4,10.8,7.7v9.6
+	C612,115.6,607.2,119,601.2,119z"/>
+<path class="st2" d="M277.2,57H128.8c-6,0-10.8-3.4-10.8-7.7v-9.6c0-4.3,4.8-7.7,10.8-7.7h148.4c6,0,10.8,3.4,10.8,7.7v9.6
+	C288,53.6,283.2,57,277.2,57z"/>
+<path class="st2" d="M601.2,57H341.8c-6,0-10.8-3.4-10.8-7.7v-9.6c0-4.3,4.8-7.7,10.8-7.7h259.4c6,0,10.8,3.4,10.8,7.7v9.6
+	C612,53.6,607.2,57,601.2,57z"/>
+<path class="st2" d="M373.2,612H129.8c-6,0-10.8-3.4-10.8-7.7v-9.6c0-4.3,4.8-7.7,10.8-7.7h243.4c6,0,10.8,3.4,10.8,7.7v9.6
+	C384,608.6,379.2,612,373.2,612z"/>
+<path class="st2" d="M600.2,610.7H460.3c-6,0-10.8-3.4-10.8-7.7v-9.6c0-4.3,4.8-7.7,10.8-7.7h139.9c6,0,10.8,3.4,10.8,7.7v9.6
+	C611,607.2,606.2,610.7,600.2,610.7z"/>
+<path class="st2" d="M234.2,671.1H129.5c-6,0-10.8-3.4-10.8-7.7v-9.6c0-4.3,4.8-7.7,10.8-7.7h104.7c6,0,10.8,3.4,10.8,7.7v9.6
+	C245,667.7,240.2,671.1,234.2,671.1z"/>
+<path class="st2" d="M601.2,671.1H324.8c-6,0-10.8-3.4-10.8-7.7v-9.6c0-4.3,4.8-7.7,10.8-7.7h276.4c6,0,10.8,3.4,10.8,7.7v9.6
+	C612,667.7,607.2,671.1,601.2,671.1z"/>
+</svg>
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..b237511b1d
--- /dev/null
+++ b/packages/obonode/obojobo-chunks-iframe/new-iframe-modal.js
@@ -0,0 +1,150 @@
+import './new-iframe-modal.scss'
+
+import React, { useEffect, useState, useRef } from 'react'
+import Common from 'Common'
+import IFrameContentTypes from './iframe-content-types'
+const { useDebouncedCallback } = require('use-debounce')
+const { SimpleDialog } = Common.components.modal
+import { parseURLOrEmbedCode } from 'obojobo-document-engine/src/scripts/oboeditor/util/url-embed-code-check'
+
+const SOURCE_CHANGE_DEBOUNCE_MS = 500
+const IFRAME_NODE = 'ObojoboDraft.Chunks.IFrame'
+
+const NewIframeModal = props => {
+	const [content, setContent] = useState({
+		src: props.content.src || '',
+		width: 640,
+		height: 480,
+		srcToLoad: '',
+		contentType: IFrameContentTypes.MEDIA
+	})
+	const [iframeLoaded, setIframeLoaded] = useState(true)
+	const [openPreviewNotWorking, setOpenPreviewNotWorking] = useState(false)
+	const inputRef = useRef(null)
+
+	useEffect(() => {
+		setContent({
+			...content,
+			...props.content
+		})
+
+		if (props.content.src) {
+			// The user clicked on the Change... button (They are coming from
+			// the edit-iframe-modal)
+			handleSourceChange({ target: { value: props.content.src } })
+		}
+
+		focusOnFirstElement()
+	}, [])
+
+	const focusOnFirstElement = () => inputRef.current.focus()
+
+	const debounceOnSourceChange = useDebouncedCallback(src => {
+		// Transform to self-calling function
+		handleSourceToLoad(src)
+	}, SOURCE_CHANGE_DEBOUNCE_MS)
+
+	const handleSourceToLoad = src => {
+		setContent({ ...content, srcToLoad: src })
+	}
+
+	const handleSourceChange = event => {
+		let src = event.target.value
+		let width,
+			height = ''
+
+		if (!parseURLOrEmbedCode(src, IFRAME_NODE)) {
+			setContent({ ...content, src })
+			setIframeLoaded(false)
+			debounceOnSourceChange(src)
+			return
+		}
+
+		const contentType = src.includes('<iframe')
+			? IFrameContentTypes.MEDIA
+			: IFrameContentTypes.WEBPAGE
+
+		if (contentType === IFrameContentTypes.MEDIA) {
+			// Extracting iframe's src address (if detected content type is MEDIA)
+			src = src
+				.split('src="')
+				.pop()
+				.split('"')[0]
+
+			// Extracting width and height
+			width = src
+				.split('width="')
+				.pop()
+				.split('"')[0]
+			height = src
+				.split('height="')
+				.pop()
+				.split('"')[0]
+		}
+
+		setContent({ ...content, src, contentType, width, height })
+		setIframeLoaded(true)
+		debounceOnSourceChange(src)
+	}
+
+	const openPreviewNotWorkingSection = () => setOpenPreviewNotWorking(true)
+
+	const previewContent = (
+		<div className="preview-with-iframe">
+			<iframe src={content.srcToLoad}></iframe>
+			<section>
+				<p>Does the preview look good?</p>
+				{openPreviewNotWorking ? (
+					<div className="preview-not-working">
+						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&apos;s embed code (starting with &lt;iframe...) and not only the regular URL.
+					</div>
+				) : (
+					<button onClick={openPreviewNotWorkingSection}>No, the preview isn&apos;t working</button>
+				)}
+			</section>
+		</div>
+	)
+
+	return (
+		<SimpleDialog
+			cancelOrCustomYes
+			customYes="Preview is good - Continue..."
+			title="New Embedded IFrame"
+			onConfirm={() => props.onConfirm(content)}
+			onCancel={props.onCancel}
+			focusOnFirstElement={focusOnFirstElement}
+		>
+			<div className="new-iframe-modal">
+				<header>
+					<p>Paste either an iframe embed code or a URL to embed:</p>
+					<input
+						type="text"
+						placeholder='<iframe src="https://example.com"/> or "https://example.com"'
+						ref={inputRef}
+						value={content.src || ''}
+						onChange={handleSourceChange}
+					/>
+				</header>
+				<div className="preview">
+					<p>Embedded preview:</p>
+					{content.src && iframeLoaded ? (
+						previewContent
+					) : (
+						<div className="no-preview">
+							{iframeLoaded || content.src === '' ? (
+								<span>Paste a link or embed code above to see the preview</span>
+							) : (
+								<span>Make sure you are using a valid URL or an IFrame embed code</span>
+							)}
+						</div>
+					)}
+				</div>
+			</div>
+		</SimpleDialog>
+	)
+}
+
+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..e9ee863483
--- /dev/null
+++ b/packages/obonode/obojobo-chunks-iframe/new-iframe-modal.scss
@@ -0,0 +1,103 @@
+@import '~styles/includes';
+
+.new-iframe-modal {
+	text-align: center;
+
+	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.6em;
+			box-sizing: border-box;
+
+			&:focus {
+				outline-color: $color-action;
+			}
+		}
+	}
+
+	.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;
+		}
+
+		.no-preview {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background-color: $color-neutral;
+			width: 100%;
+			height: 12em;
+			border-radius: 0.4em;
+			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;
+			}
+
+			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: 2em 0 0.1em 0;
+				}
+
+				button {
+					border: none;
+					color: $color-action;
+					text-decoration: underline;
+					background: transparent;
+					transition: 0.3s;
+					font-family: $font-default;
+
+					&:hover {
+						cursor: pointer;
+						color: $color-action-minor;
+						transition: 0.3s;
+					}
+				}
+
+				.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/new-iframe-modal.test.js b/packages/obonode/obojobo-chunks-iframe/new-iframe-modal.test.js
new file mode 100644
index 0000000000..7810da7c80
--- /dev/null
+++ b/packages/obonode/obojobo-chunks-iframe/new-iframe-modal.test.js
@@ -0,0 +1,181 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import TestRenderer, { act } from 'react-test-renderer'
+import NewIFrameModal from './new-iframe-modal'
+import IFrameContentTypes from './iframe-content-types'
+
+jest.mock('use-debounce', () => ({
+	useDebouncedCallback: cb => {
+		const fn = () => {
+			cb()
+		}
+
+		return fn
+	}
+}))
+
+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(
+			<NewIFrameModal
+				content={{
+					src: '',
+					contentType: IFrameContentTypes.MEDIA
+				}}
+			/>
+		)
+		const tree = component.html()
+		expect(tree).toMatchSnapshot()
+	})
+
+	test('NewIFrameModal component calls onConfirm from props', () => {
+		const onConfirm = jest.fn()
+
+		const component = mount(
+			<NewIFrameModal
+				content={{
+					src: '',
+					contentType: IFrameContentTypes.MEDIA
+				}}
+				onConfirm={onConfirm}
+			/>
+		)
+
+		component
+			.find('button')
+			.at(1)
+			.simulate('click')
+
+		expect(onConfirm).toHaveBeenCalled()
+	})
+
+	test('NewIFrameModal component focuses on first element', () => {
+		const component = TestRenderer.create(
+			<NewIFrameModal
+				content={{
+					src: '',
+					contentType: IFrameContentTypes.MEDIA
+				}}
+			/>,
+			testRendererOptions
+		)
+
+		expect(component.toJSON()).toMatchSnapshot()
+	})
+
+	test('NewIFrameModal component changes src', () => {
+		const component = TestRenderer.create(
+			<NewIFrameModal
+				content={{
+					src: '',
+					contentType: IFrameContentTypes.MEDIA
+				}}
+			/>,
+			testRendererOptions
+		)
+
+		const startState = component.toJSON()
+		const input = component.root.findAllByType('input')[1]
+		act(() => {
+			input.props.onChange({ target: { value: 'https://' } })
+		})
+
+		const endState = component.toJSON()
+		expect(endState).toMatchSnapshot()
+		expect(startState).not.toEqual(endState)
+	})
+
+	test('NewIFrameModal component correctly detects content type', () => {
+		const component = TestRenderer.create(
+			<NewIFrameModal
+				content={{
+					src: '',
+					contentType: IFrameContentTypes.MEDIA
+				}}
+			/>,
+			testRendererOptions
+		)
+		const startState = component.toJSON()
+		const input = component.root.findAllByType('input')[1]
+
+		// Changing the src input to trigger a content type detection (Detection: Media)
+		act(() => {
+			input.props.onChange({ target: { value: "<iframe src='https://www'></iframe>" } })
+		})
+
+		let endState = component.toJSON()
+		expect(endState).toMatchSnapshot()
+		expect(startState).not.toEqual(endState)
+
+		// Changing the src input to trigger a content type detection (Detection: Webpage)
+		act(() => {
+			input.props.onChange({ target: { value: 'https://www' } })
+		})
+
+		endState = component.toJSON()
+		expect(endState).toMatchSnapshot()
+		expect(startState).not.toEqual(endState)
+	})
+
+	test('NewIFrameModal component opens section explaining why the iframe preview is not working', () => {
+		const onConfirm = jest.fn()
+		const onCancel = jest.fn()
+
+		const component = TestRenderer.create(
+			<NewIFrameModal
+				content={{
+					src: 'https://mock.com',
+					contentType: IFrameContentTypes.WEBPAGE
+				}}
+				onConfirm={onConfirm}
+				onCancel={onCancel}
+			/>,
+			testRendererOptions
+		)
+
+		const button = component.root.findAllByType('button')[0]
+		act(() => {
+			button.props.onClick()
+		})
+		expect(component.toJSON()).toMatchSnapshot()
+	})
+
+	test('NewIFrameModal shows message after invalid src is typed', () => {
+		const component = TestRenderer.create(
+			<NewIFrameModal
+				content={{
+					src: 'mock-src',
+					contentType: IFrameContentTypes.WEBPAGE
+				}}
+			/>,
+			testRendererOptions
+		)
+
+		const startState = component.toJSON()
+		const input = component.root.findAllByType('input')[1]
+
+		// Changing empty src input to invalid embed code or url
+		act(() => {
+			input.props.onChange({ target: { value: 'mock-invalid' } })
+		})
+
+		const endState = component.toJSON()
+		expect(endState).toMatchSnapshot()
+		expect(startState).not.toEqual(endState)
+	})
+})
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..807b8b6604
--- /dev/null
+++ b/packages/obonode/obojobo-chunks-iframe/text-width-icon.svg
@@ -0,0 +1,32 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 745 713" style="enable-background:new 0 0 745 713;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#724693;}
+	.st1{fill:#FFFFFF;}
+	.st2{fill:#B0B0B1;}
+</style>
+<path class="st0" d="M594.6,541H134.4c-9.6,0-17.4-7.8-17.4-17.4V179.4c0-9.6,7.8-17.4,17.4-17.4h460.3c9.6,0,17.4,7.8,17.4,17.4
+	v344.3C612,533.2,604.2,541,594.6,541z"/>
+<path class="st1" d="M134.4,366.5l-5.1-4.7c-2.1-2-2.3-5.3-0.3-7.4l43.4-47.5c2-2.1,5.3-2.3,7.4-0.3l5.1,4.7c2.1,2,2.3,5.3,0.3,7.4
+	l-43.4,47.5C139.9,368.3,136.6,368.4,134.4,366.5z"/>
+<path class="st1" d="M129.2,354.8l4.7-5.1c2-2.1,5.3-2.3,7.4-0.3l47.5,43.5c2.1,2,2.3,5.3,0.3,7.4l-4.7,5.1c-2,2.1-5.3,2.3-7.4,0.3
+	l-47.5-43.5C127.4,360.3,127.2,357,129.2,354.8z"/>
+<path class="st1" d="M596.7,367.1l5.1-4.7c2.1-2,2.3-5.3,0.3-7.4l-43.4-47.5c-2-2.1-5.3-2.3-7.4-0.3l-5.1,4.7
+	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"/>
+<path class="st1" d="M601.9,355.5l-4.7-5.1c-2-2.1-5.3-2.3-7.4-0.3l-47.5,43.5c-2.1,2-2.3,5.3-0.3,7.4l4.7,5.1
+	c2,2.1,5.3,2.3,7.4,0.3l47.5-43.5C603.7,361,603.9,357.6,601.9,355.5z"/>
+<path class="st2" d="M601.2,119H127.8c-6,0-10.8-3.4-10.8-7.7v-9.6c0-4.3,4.8-7.7,10.8-7.7h473.4c6,0,10.8,3.4,10.8,7.7v9.6
+	C612,115.6,607.2,119,601.2,119z"/>
+<path class="st2" d="M277.2,57H128.8c-6,0-10.8-3.4-10.8-7.7v-9.6c0-4.3,4.8-7.7,10.8-7.7h148.4c6,0,10.8,3.4,10.8,7.7v9.6
+	C288,53.6,283.2,57,277.2,57z"/>
+<path class="st2" d="M601.2,57H341.8c-6,0-10.8-3.4-10.8-7.7v-9.6c0-4.3,4.8-7.7,10.8-7.7h259.4c6,0,10.8,3.4,10.8,7.7v9.6
+	C612,53.6,607.2,57,601.2,57z"/>
+<path class="st2" d="M373.2,612H129.8c-6,0-10.8-3.4-10.8-7.7v-9.6c0-4.3,4.8-7.7,10.8-7.7h243.4c6,0,10.8,3.4,10.8,7.7v9.6
+	C384,608.6,379.2,612,373.2,612z"/>
+<path class="st2" d="M600.2,610.7H460.3c-6,0-10.8-3.4-10.8-7.7v-9.6c0-4.3,4.8-7.7,10.8-7.7h139.9c6,0,10.8,3.4,10.8,7.7v9.6
+	C611,607.2,606.2,610.7,600.2,610.7z"/>
+<path class="st2" d="M234.2,671.1H129.5c-6,0-10.8-3.4-10.8-7.7v-9.6c0-4.3,4.8-7.7,10.8-7.7h104.7c6,0,10.8,3.4,10.8,7.7v9.6
+	C245,667.7,240.2,671.1,234.2,671.1z"/>
+<path class="st2" d="M601.2,671.1H324.8c-6,0-10.8-3.4-10.8-7.7v-9.6c0-4.3,4.8-7.7,10.8-7.7h276.4c6,0,10.8,3.4,10.8,7.7v9.6
+	C612,667.7,607.2,671.1,601.2,671.1z"/>
+</svg>
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 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 836 536" style="enable-background:new 0 0 836 536;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#DDDCDD;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M805.3,528.7H30.2c-13.5,0-24.4-10.9-24.4-24.4V31.2c0-13.5,10.9-24.4,24.4-24.4h775.1
+		c13.5,0,24.4,10.9,24.4,24.4v473.1C829.7,517.8,818.8,528.7,805.3,528.7z"/>
+</g>
+<path class="st1" d="M474.2,263.4l-107.9-62.3c-3.4-2-7.6,0.5-7.6,4.4l0,124.6c0,3.9,4.2,6.3,7.6,4.4l107.9-62.3
+	C477.6,270.2,477.6,265.3,474.2,263.4z"/>
+</svg>
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..5e89f55c95
--- /dev/null
+++ b/packages/obonode/obojobo-chunks-iframe/warning-icon.svg
@@ -0,0 +1,47 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 507 447" style="enable-background:new 0 0 507 447;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#CDCDCD;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M244.5,14.8L10.6,419.9c-3.7,6.4,0.9,14.4,8.3,14.4h467.8c7.4,0,12-8,8.3-14.4L261.1,14.8
+		C257.4,8.4,248.2,8.4,244.5,14.8z"/>
+</g>
+<g>
+	<path class="st1" d="M270.1,297c-0.5,2.8-1.3,4.7-2.6,5.9c-1.3,1.2-3.5,1.7-6.7,1.7h-18.3c-2.5,0-4.3-0.5-5.2-1.6
+		c-0.9-1-1.6-2.8-2.1-5.4l-13.1-163V134c0-1.8,0.5-3.2,1.6-4.1c1-0.9,2.2-1.4,3.6-1.4H278c1.6,0,2.9,0.6,3.8,1.7
+		c0.9,1.2,1.3,2.5,1,4.1L270.1,297z M281.1,376.5c0,3-0.7,5.1-2.1,6.4c-1.4,1.3-3.8,1.9-7.3,1.9H231c-2.8,0-4.7-0.6-5.9-1.7
+		c-1.2-1.1-1.7-3-1.7-5.5v-42.8c0-4.1,1.7-6.2,5.2-6.2h47.3c3.5,0,5.2,1.8,5.2,5.5V376.5z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/packages/obonode/obojobo-chunks-multiple-choice-assessment/__snapshots__/editor-component.test.js.snap b/packages/obonode/obojobo-chunks-multiple-choice-assessment/__snapshots__/editor-component.test.js.snap
index 1ff52d15b2..941aa37629 100644
--- a/packages/obonode/obojobo-chunks-multiple-choice-assessment/__snapshots__/editor-component.test.js.snap
+++ b/packages/obonode/obojobo-chunks-multiple-choice-assessment/__snapshots__/editor-component.test.js.snap
@@ -30,11 +30,17 @@ exports[`MCAssessment Editor Node MCAssessment builds the expected component 1`]
     <div
       className="obojobo-draft--components--switch"
     >
-      <span
-        contentEditable={false}
+      <div
+        className="text-content"
       >
-        Shuffle Choices
-      </span>
+        <span
+          contentEditable={false}
+        >
+          Shuffle Choices
+        </span>
+        <br />
+        <small />
+      </div>
       <label
         className="switch"
       >
diff --git a/packages/obonode/obojobo-chunks-youtube/youtube-properties-modal.js b/packages/obonode/obojobo-chunks-youtube/youtube-properties-modal.js
index a47421269b..73ea1df6df 100644
--- a/packages/obonode/obojobo-chunks-youtube/youtube-properties-modal.js
+++ b/packages/obonode/obojobo-chunks-youtube/youtube-properties-modal.js
@@ -1,11 +1,15 @@
 import './youtube-properties-modal.scss'
 
 import React from 'react'
-import { parseYouTubeURL, getStandardizedURLFromVideoId } from './parse-youtube-url'
+import {
+	parseURLOrEmbedCode,
+	getStandardizedURLFromVideoId
+} from 'obojobo-document-engine/src/scripts/oboeditor/util/url-embed-code-check'
 import Button from 'obojobo-document-engine/src/scripts/common/components/button'
-
 import SettingsDialog from 'obojobo-document-engine/src/scripts/common/components/modal/settings-dialog'
 
+const YOUTUBE_NODE = 'ObojoboDraft.Chunks.YouTube'
+
 class YouTubeProperties extends React.Component {
 	constructor(props) {
 		super(props)
@@ -82,7 +86,7 @@ class YouTubeProperties extends React.Component {
 	}
 
 	updateStateFromUserInput(userURL) {
-		const videoInfo = parseYouTubeURL(userURL)
+		const videoInfo = parseURLOrEmbedCode(userURL, YOUTUBE_NODE)
 		const url = videoInfo.standardizedVideoUrl
 
 		// If the URL includes time information then we replace the existing start and end times
@@ -155,7 +159,7 @@ class YouTubeProperties extends React.Component {
 
 	getContentFromState() {
 		return {
-			videoId: parseYouTubeURL(this.state.url).videoId,
+			videoId: parseURLOrEmbedCode(this.state.url, YOUTUBE_NODE).videoId,
 			startTime: this.getSecondsFromTimeDisplay(this.state.startTime),
 			endTime: this.getSecondsFromTimeDisplay(this.state.endTime)
 		}