Browse Source

Improved the demo in the docs a bit.

Piotrek Koszuliński 5 years ago
parent
commit
82ef1dc680

+ 24 - 2
packages/ckeditor5-html-embed/docs/_snippets/features/html-embed.html

@@ -1,2 +1,24 @@
-<div id="snippet-html-embed">
-</div>
+<p>
+	<b>Value of the <code>"htmlEmbed.showPreviews"</code></b>:
+	<input type="radio" id="raw-html-previews-enabled" name="mode" value="enabled" checked><label for="raw-html-previews-enabled"><code>true</code></label>
+	<input type="radio" id="raw-html-previews-disabled" name="mode" value="disabled"><label for="raw-html-previews-disabled"><code>false</code></label>
+</p>
+
+<textarea id="snippet-html-embed">
+	&lt;h2>CKEditor 5 on socials&lt;/h2>
+	&lt;div class="raw-html-embed">&lt;blockquote class="twitter-tweet">&lt;p lang="en" dir="ltr">Keeping CKEditor 5 integrations tidy and free of bugs 🐛 The new release for the official &lt;a href="https://twitter.com/hashtag/Angular?src=hash&amp;ref_src=twsrc%5Etfw">#Angular&lt;/a> WYSIWYG editor component works with Angular 9.1 and above. &lt;a href="https://t.co/Umag7F9dq0">https://t.co/Umag7F9dq0&lt;/a> &lt;a href="https://t.co/cIPy5fFSDn">pic.twitter.com/cIPy5fFSDn&lt;/a>&lt;/p>&mdash; CKEditor Ecosystem (@ckeditor) &lt;a href="https://twitter.com/ckeditor/status/1318575258153160707?ref_src=twsrc%5Etfw">October 20, 2020&lt;/a>&lt;/blockquote> &lt;script async src="https://platform.twitter.com/widgets.js" charset="utf-8">&lt;/script>&lt;/div>
+	&lt;div class="raw-html-embed">&lt;iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/DgM5DfAPQTI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>&lt;/iframe>&lt;/div>
+
+	&lt;p>Psst, we're tracking ya!&lt;/p>
+	&lt;div class="raw-html-embed">&lt;!-- Google Analytics -->
+&lt;script>
+(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+ga('create', 'UA-XXXXX-Y', 'auto');
+ga('send', 'pageview');
+&lt;/script>
+&lt;!-- End Google Analytics -->&lt;/div>
+</textarea>

+ 49 - 13
packages/ckeditor5-html-embed/docs/_snippets/features/html-embed.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* globals window, document, console */
+/* globals window, document */
 
 import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
 import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
@@ -11,8 +11,50 @@ import HtmlEmbed from '@ckeditor/ckeditor5-html-embed/src/htmlembed';
 
 ClassicEditor.builtinPlugins.push( HtmlEmbed );
 
-ClassicEditor
-	.create( document.querySelector( '#snippet-html-embed' ), {
+const previewsModeButton = document.getElementById( 'raw-html-previews-enabled' );
+const noPreviewsModeButton = document.getElementById( 'raw-html-previews-disabled' );
+
+previewsModeButton.addEventListener( 'change', handleModeChange );
+noPreviewsModeButton.addEventListener( 'change', handleModeChange );
+
+startMode( document.querySelector( 'input[name="mode"]:checked' ).value );
+
+async function handleModeChange( evt ) {
+	await startMode( evt.target.value );
+}
+
+async function startMode( selectedMode ) {
+	if ( selectedMode === 'enabled' ) {
+		await startEnabledPreviewsMode();
+	} else {
+		await startDisabledPreviewsMode();
+	}
+}
+
+async function startEnabledPreviewsMode() {
+	await reloadEditor( {
+		htmlEmbed: {
+			showPreviews: true,
+			sanitizeHtml( rawHtml ) {
+				return {
+					html: rawHtml,
+					hasChanged: false
+				};
+			}
+		}
+	} );
+}
+
+async function startDisabledPreviewsMode() {
+	await reloadEditor();
+}
+
+async function reloadEditor( config = {} ) {
+	if ( window.editor ) {
+		await window.editor.destroy();
+	}
+
+	config = Object.assign( config, {
 		toolbar: {
 			items: [
 				'heading',
@@ -25,15 +67,12 @@ ClassicEditor
 				'outdent',
 				'indent',
 				'|',
-				'alignment',
-				'|',
-				'horizontalLine',
 				'blockQuote',
 				'link',
 				'imageUpload',
 				'mediaEmbed',
-				'htmlEmbed',
 				'insertTable',
+				'htmlEmbed',
 				'|',
 				'undo',
 				'redo'
@@ -58,10 +97,7 @@ ClassicEditor
 			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
 		},
 		cloudServices: CS_CONFIG
-	} )
-	.then( editor => {
-		window.editor = editor;
-	} )
-	.catch( err => {
-		console.error( err.stack );
 	} );
+
+	window.editor = await ClassicEditor.create( document.querySelector( '#snippet-html-embed' ), config );
+}

+ 138 - 138
packages/ckeditor5-html-embed/tests/manual/htmlembed.html

@@ -1,157 +1,157 @@
 <head>
-    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; media-src http://techslides.com/; connect-src 'self' https://cksource.com http://*.cke-cs.com; script-src 'self' https://cksource.com; img-src * data:; style-src 'self' 'unsafe-inline'; frame-src *">
+	<meta http-equiv="Content-Security-Policy" content="default-src 'none'; media-src http://techslides.com/; connect-src 'self' https://cksource.com http://*.cke-cs.com; script-src 'self' https://cksource.com; img-src * data:; style-src 'self' 'unsafe-inline'; frame-src *">
 </head>
 
 <p>
-    <b>Value of the <code>"htmlEmbed.showPreviews"</code></b>:
-    <input type="radio" id="mode-enabled" name="mode" value="enabled" checked><label for="mode-enabled"><code>true</code></label>
-    <input type="radio" id="mode-disabled" name="mode" value="disabled"><label for="mode-disabled"><code>false</code></label>
+	<b>Value of the <code>"htmlEmbed.showPreviews"</code></b>:
+	<input type="radio" id="raw-html-previews-enabled" name="mode" value="enabled" checked><label for="raw-html-previews-enabled"><code>true</code></label>
+	<input type="radio" id="raw-html-previews-disabled" name="mode" value="disabled"><label for="raw-html-previews-disabled"><code>false</code></label>
 </p>
 
 <div id="editor">
-    <h3><code>&lt;video&gt;</code> tag as HTML snippet</h3>
-        <div class="raw-html-embed">
-            <video width="320" height="240" controls>
-                <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
-                <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
-                Your browser does not support the video tag.
-            </video>
-        </div>
+	<h3><code>&lt;video&gt;</code> tag as HTML snippet</h3>
+		<div class="raw-html-embed">
+			<video width="320" height="240" controls>
+				<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
+				<source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
+				Your browser does not support the video tag.
+			</video>
+		</div>
 
 
-    <h3><code>&lt;audio&gt;</code> tag as HTML snippet</h3>
-        <div class="raw-html-embed">
-            <audio controls>
-                <source src="http://techslides.com/demos/samples/sample.ogg" type="audio/ogg">
-                <source src="http://techslides.com/demos/samples/sample.mp3" type="audio/mpeg">
-                Your browser does not support the audio tag.
-            </audio>
-        </div>
+	<h3><code>&lt;audio&gt;</code> tag as HTML snippet</h3>
+		<div class="raw-html-embed">
+			<audio controls>
+				<source src="http://techslides.com/demos/samples/sample.ogg" type="audio/ogg">
+				<source src="http://techslides.com/demos/samples/sample.mp3" type="audio/mpeg">
+				Your browser does not support the audio tag.
+			</audio>
+		</div>
 
 
-    <h3><code>&lt;picture&gt;</code> tag as HTML snippet</h3>
-        <div class="raw-html-embed">
-            <picture>
-                <source media="(min-width: 1200px)" srcset="http://techslides.com/demos/samples/sample.jpg">
-                <source media="(min-width: 650px)" srcset="http://techslides.com/demos/samples/sample.png">
-                <img src="http://techslides.com/demos/samples/sample.gif">
-            </picture>
-        </div>
+	<h3><code>&lt;picture&gt;</code> tag as HTML snippet</h3>
+		<div class="raw-html-embed">
+			<picture>
+				<source media="(min-width: 1200px)" srcset="http://techslides.com/demos/samples/sample.jpg">
+				<source media="(min-width: 650px)" srcset="http://techslides.com/demos/samples/sample.png">
+				<img src="http://techslides.com/demos/samples/sample.gif">
+			</picture>
+		</div>
 
-    <h3><code>&lt;iframe&gt;</code> tag as HTML snippet</h3>
-        <div class="raw-html-embed">
-            <iframe src="http://techslides.com/demos/samples/sample.txt"></iframe>
-        </div>
+	<h3><code>&lt;iframe&gt;</code> tag as HTML snippet</h3>
+		<div class="raw-html-embed">
+			<iframe src="http://techslides.com/demos/samples/sample.txt"></iframe>
+		</div>
 
 
-    <h3><code>&lt;table&gt;</code> tag as HTML snippet (code coverage report)</h3>
-    <div class="raw-html-embed">
-        <table class="coverage-summary">
-            <thead>
-            <tr>
-                <th data-col="file" data-fmt="html" data-html="true" class="file">File</th>
-                <th data-col="pic" data-type="number" data-fmt="html" data-html="true" class="pic"></th>
-                <th data-col="statements" data-type="number" data-fmt="pct" class="pct">Statements</th>
-                <th data-col="statements_raw" data-type="number" data-fmt="html" class="abs"></th>
-                <th data-col="branches" data-type="number" data-fmt="pct" class="pct">Branches</th>
-                <th data-col="branches_raw" data-type="number" data-fmt="html" class="abs"></th>
-                <th data-col="functions" data-type="number" data-fmt="pct" class="pct">Functions</th>
-                <th data-col="functions_raw" data-type="number" data-fmt="html" class="abs"></th>
-                <th data-col="lines" data-type="number" data-fmt="pct" class="pct">Lines</th>
-                <th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr>
-                <td class="file high" data-value="htmlembed.js">htmlembed.js</td>
-                <td data-value="100" class="pic high">
-                    <div class="chart">
-                        <div class="cover-fill cover-full" style="width: 100%"></div>
-                        <div class="cover-empty" style="width: 0%"></div>
-                    </div>
-                </td>
-                <td data-value="100" class="pct high">100%</td>
-                <td data-value="2" class="abs high">2/2</td>
-                <td data-value="100" class="pct high">100%</td>
-                <td data-value="0" class="abs high">0/0</td>
-                <td data-value="100" class="pct high">100%</td>
-                <td data-value="2" class="abs high">2/2</td>
-                <td data-value="100" class="pct high">100%</td>
-                <td data-value="2" class="abs high">2/2</td>
-            </tr>
+	<h3><code>&lt;table&gt;</code> tag as HTML snippet (code coverage report)</h3>
+	<div class="raw-html-embed">
+		<table class="coverage-summary">
+			<thead>
+			<tr>
+				<th data-col="file" data-fmt="html" data-html="true" class="file">File</th>
+				<th data-col="pic" data-type="number" data-fmt="html" data-html="true" class="pic"></th>
+				<th data-col="statements" data-type="number" data-fmt="pct" class="pct">Statements</th>
+				<th data-col="statements_raw" data-type="number" data-fmt="html" class="abs"></th>
+				<th data-col="branches" data-type="number" data-fmt="pct" class="pct">Branches</th>
+				<th data-col="branches_raw" data-type="number" data-fmt="html" class="abs"></th>
+				<th data-col="functions" data-type="number" data-fmt="pct" class="pct">Functions</th>
+				<th data-col="functions_raw" data-type="number" data-fmt="html" class="abs"></th>
+				<th data-col="lines" data-type="number" data-fmt="pct" class="pct">Lines</th>
+				<th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
+			</tr>
+			</thead>
+			<tbody>
+			<tr>
+				<td class="file high" data-value="htmlembed.js">htmlembed.js</td>
+				<td data-value="100" class="pic high">
+					<div class="chart">
+						<div class="cover-fill cover-full" style="width: 100%"></div>
+						<div class="cover-empty" style="width: 0%"></div>
+					</div>
+				</td>
+				<td data-value="100" class="pct high">100%</td>
+				<td data-value="2" class="abs high">2/2</td>
+				<td data-value="100" class="pct high">100%</td>
+				<td data-value="0" class="abs high">0/0</td>
+				<td data-value="100" class="pct high">100%</td>
+				<td data-value="2" class="abs high">2/2</td>
+				<td data-value="100" class="pct high">100%</td>
+				<td data-value="2" class="abs high">2/2</td>
+			</tr>
 
-            <tr>
-                <td class="file high" data-value="htmlembedediting.js">htmlembedediting.js</td>
-                <td data-value="100" class="pic high">
-                    <div class="chart">
-                        <div class="cover-fill cover-full" style="width: 100%"></div>
-                        <div class="cover-empty" style="width: 0%"></div>
-                    </div>
-                </td>
-                <td data-value="100" class="pct high">100%</td>
-                <td data-value="81" class="abs high">81/81</td>
-                <td data-value="100" class="pct high">100%</td>
-                <td data-value="18" class="abs high">18/18</td>
-                <td data-value="100" class="pct high">100%</td>
-                <td data-value="19" class="abs high">19/19</td>
-                <td data-value="100" class="pct high">100%</td>
-                <td data-value="81" class="abs high">81/81</td>
-            </tr>
+			<tr>
+				<td class="file high" data-value="htmlembedediting.js">htmlembedediting.js</td>
+				<td data-value="100" class="pic high">
+					<div class="chart">
+						<div class="cover-fill cover-full" style="width: 100%"></div>
+						<div class="cover-empty" style="width: 0%"></div>
+					</div>
+				</td>
+				<td data-value="100" class="pct high">100%</td>
+				<td data-value="81" class="abs high">81/81</td>
+				<td data-value="100" class="pct high">100%</td>
+				<td data-value="18" class="abs high">18/18</td>
+				<td data-value="100" class="pct high">100%</td>
+				<td data-value="19" class="abs high">19/19</td>
+				<td data-value="100" class="pct high">100%</td>
+				<td data-value="81" class="abs high">81/81</td>
+			</tr>
 
-            <tr>
-                <td class="file high" data-value="inserthtmlembedcommand.js">inserthtmlembedcommand.js</td>
-                <td data-value="100" class="pic high">
-                    <div class="chart">
-                        <div class="cover-fill cover-full" style="width: 100%"></div>
-                        <div class="cover-empty" style="width: 0%"></div>
-                    </div>
-                </td>
-                <td data-value="100" class="pct high">100%</td>
-                <td data-value="18" class="abs high">18/18</td>
-                <td data-value="100" class="pct high">100%</td>
-                <td data-value="8" class="abs high">8/8</td>
-                <td data-value="100" class="pct high">100%</td>
-                <td data-value="7" class="abs high">7/7</td>
-                <td data-value="100" class="pct high">100%</td>
-                <td data-value="18" class="abs high">18/18</td>
-            </tr>
+			<tr>
+				<td class="file high" data-value="inserthtmlembedcommand.js">inserthtmlembedcommand.js</td>
+				<td data-value="100" class="pic high">
+					<div class="chart">
+						<div class="cover-fill cover-full" style="width: 100%"></div>
+						<div class="cover-empty" style="width: 0%"></div>
+					</div>
+				</td>
+				<td data-value="100" class="pct high">100%</td>
+				<td data-value="18" class="abs high">18/18</td>
+				<td data-value="100" class="pct high">100%</td>
+				<td data-value="8" class="abs high">8/8</td>
+				<td data-value="100" class="pct high">100%</td>
+				<td data-value="7" class="abs high">7/7</td>
+				<td data-value="100" class="pct high">100%</td>
+				<td data-value="18" class="abs high">18/18</td>
+			</tr>
 
-            <tr>
-                <td class="file high" data-value="htmlembedui.js">htmlembedui.js</td>
-                <td data-value="100" class="pic high">
-                    <div class="chart">
-                        <div class="cover-fill cover-full" style="width: 100%"></div>
-                        <div class="cover-empty" style="width: 0%"></div>
-                    </div>
-                </td>
-                <td data-value="100" class="pct high">100%</td>
-                <td data-value="15" class="abs high">15/15</td>
-                <td data-value="100" class="pct high">100%</td>
-                <td data-value="0" class="abs high">0/0</td>
-                <td data-value="100" class="pct high">100%</td>
-                <td data-value="3" class="abs high">3/3</td>
-                <td data-value="100" class="pct high">100%</td>
-                <td data-value="15" class="abs high">15/15</td>
-            </tr>
+			<tr>
+				<td class="file high" data-value="htmlembedui.js">htmlembedui.js</td>
+				<td data-value="100" class="pic high">
+					<div class="chart">
+						<div class="cover-fill cover-full" style="width: 100%"></div>
+						<div class="cover-empty" style="width: 0%"></div>
+					</div>
+				</td>
+				<td data-value="100" class="pct high">100%</td>
+				<td data-value="15" class="abs high">15/15</td>
+				<td data-value="100" class="pct high">100%</td>
+				<td data-value="0" class="abs high">0/0</td>
+				<td data-value="100" class="pct high">100%</td>
+				<td data-value="3" class="abs high">3/3</td>
+				<td data-value="100" class="pct high">100%</td>
+				<td data-value="15" class="abs high">15/15</td>
+			</tr>
 
-            <tr>
-                <td class="file high" data-value="updatehtmlembedcommand.js">updatehtmlembedcommand.js</td>
-                <td data-value="100" class="pic high">
-                    <div class="chart">
-                        <div class="cover-fill cover-full" style="width: 100%"></div>
-                        <div class="cover-empty" style="width: 0%"></div>
-                    </div>
-                </td>
-                <td data-value="100" class="pct high">100%</td>
-                <td data-value="13" class="abs high">13/13</td>
-                <td data-value="100" class="pct high">100%</td>
-                <td data-value="4" class="abs high">4/4</td>
-                <td data-value="100" class="pct high">100%</td>
-                <td data-value="4" class="abs high">4/4</td>
-                <td data-value="100" class="pct high">100%</td>
-                <td data-value="13" class="abs high">13/13</td>
-            </tr>
-            </tbody>
-        </table>
-    </div>
+			<tr>
+				<td class="file high" data-value="updatehtmlembedcommand.js">updatehtmlembedcommand.js</td>
+				<td data-value="100" class="pic high">
+					<div class="chart">
+						<div class="cover-fill cover-full" style="width: 100%"></div>
+						<div class="cover-empty" style="width: 0%"></div>
+					</div>
+				</td>
+				<td data-value="100" class="pct high">100%</td>
+				<td data-value="13" class="abs high">13/13</td>
+				<td data-value="100" class="pct high">100%</td>
+				<td data-value="4" class="abs high">4/4</td>
+				<td data-value="100" class="pct high">100%</td>
+				<td data-value="4" class="abs high">4/4</td>
+				<td data-value="100" class="pct high">100%</td>
+				<td data-value="13" class="abs high">13/13</td>
+			</tr>
+			</tbody>
+		</table>
+	</div>
 </div>

+ 4 - 4
packages/ckeditor5-html-embed/tests/manual/htmlembed.js

@@ -12,11 +12,11 @@ import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articleplugi
 import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
 import HtmlEmbed from '../../src/htmlembed';
 
-const restrictedModeButton = document.getElementById( 'mode-enabled' );
-const standardModeButton = document.getElementById( 'mode-disabled' );
+const previewsModeButton = document.getElementById( 'raw-html-previews-enabled' );
+const noPreviewsModeButton = document.getElementById( 'raw-html-previews-disabled' );
 
-restrictedModeButton.addEventListener( 'change', handleModeChange );
-standardModeButton.addEventListener( 'change', handleModeChange );
+previewsModeButton.addEventListener( 'change', handleModeChange );
+noPreviewsModeButton.addEventListener( 'change', handleModeChange );
 
 startMode( document.querySelector( 'input[name="mode"]:checked' ).value );