Bladeren bron

Merge branch 'master' into i/6381

Marek Lewandowski 5 jaren geleden
bovenliggende
commit
e7122598fd

+ 72 - 0
docs/assets/snippet-styles.css

@@ -109,6 +109,78 @@ It breaks CKEditor 5 (see how <p><code>[]</code></p> looks). */
 	margin-bottom: 0;
 }
 
+/* warning notification */
+
+.main__notification.notice {
+	position: fixed;
+	max-width: 650px;
+	border: 1px solid #e4e4e4;
+	border-left-color: #f9c669;
+	border-left-width: 3px;
+	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
+	/* override .notice class' margins and paddings */
+	padding: 20px 40px 20px 20px;
+	margin: 0;
+	/* elevate the warning above the editor's toolbars */
+	z-index: 99999999;
+	animation: fadeIn .3s ease-in-out forwards;
+}
+
+/* class chaining for style overriding */
+.formatted .main__notification-title {
+	font-weight: bold;
+	font-size: 16px;
+	padding: 0;
+	margin: 0;
+}
+
+.main__notification-body {
+	margin-top: 10px;
+}
+
+.main__notification-body p {
+  margin-bottom: 0.3em;
+}
+
+.main__notification-body p:last-child {
+	margin-bottom: 0;
+}
+
+.main__notification-close {
+	position: absolute;
+	top: 0;
+	right: 0;
+	padding: 10px;
+	/* reset default button styling */
+	background: none;
+	border: none;
+	box-shadow: none;
+	line-height: 1;
+	transition: background 150ms ease;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	cursor: pointer;
+}
+
+.main__notification-close:hover {
+	background: #eee;
+}
+
+.main__notification-close:active:focus {
+	outline: none;
+}
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
 /* examples/builds/inline-editor.html */
 .live-snippet .image-style-left, .live-snippet .image-style-right {
 	float: left;

+ 104 - 1
docs/assets/snippet.js

@@ -3,7 +3,110 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* globals window, document */
+/* globals window, document, setTimeout */
+
+// Show clipboard input notification when user tries to paste a content from MS Word or Google Docs.
+setTimeout( () => {
+	// Don't show the warning notification in "Paste from Office" and "Paste from Google Docs" demos.
+	if ( window.preventPasteFromOfficeNotification ) {
+		return;
+	}
+
+	const editables = document.querySelectorAll( '.ck-content' );
+	const googleDocsMatch = /id=("|')docs-internal-guid-[-0-9a-f]+("|')/i;
+	const msWordMatch1 = /<meta\s*name="?generator"?\s*content="?microsoft\s*word\s*\d+"?\/?>/i;
+	const msWordMatch2 = /xmlns:o="urn:schemas-microsoft-com/i;
+
+	// A state variable that indicates if the clipboard notification has been seen.
+	// We use the variable for displaying the notification only once per demo.
+	let hasNotificationBeenSeen = false;
+
+	editables.forEach( editable => {
+		const editor = editable.ckeditorInstance;
+
+		if ( !editor ) {
+			return;
+		}
+
+		editor.plugins.get( 'Clipboard' ).listenTo( editor.editing.view.document, 'clipboardInput', ( evt, data ) => {
+			const htmlString = data.dataTransfer.getData( 'text/html' );
+			const match = msWordMatch1.test( htmlString ) ||
+				msWordMatch2.test( htmlString ) ||
+				googleDocsMatch.test( htmlString );
+
+			if ( match && !hasNotificationBeenSeen ) {
+				createClipboardInputNotification();
+				hasNotificationBeenSeen = true;
+			}
+		} );
+	} );
+}, 3000 );
+
+// The notification should contain the links to the demos where user can test rich formatting from.
+function createClipboardInputNotification() {
+	const title = 'Hello!';
+	const message = `
+
+	<p>We detected that you tried to paste content from <strong>Microsoft Word</strong> or <strong>Google Docs</strong>.</p>
+	<p>Please bear in mind that the editor demo to which you try to paste does not have all the features enabled.
+		Due to that, unsupported formatting is being stripped.</p>
+	<p>Check out the <a href="/docs/ckeditor5/latest/features/pasting/paste-from-word.html">Paste from Word</a> or
+	<a href="/docs/ckeditor5/latest/pasting/paste-from-google-docs.html">Paste from Google Docs</a>
+	demos for the best experience.</p>`;
+
+	window.createNotification( title, message );
+}
+
+/**
+* Creates a notification and appends it to the `.main__content` element.
+*
+* @param {String} title A title of the notification.
+* @param {String} message A message to display in the notification.
+*
+* @returns {Object} A notification element.
+*/
+window.createNotification = function( title, message ) {
+	const notificationTemplate = `
+		<h3 class="main__notification-title">${ title }</h3>
+		<div class="main__notification-body">
+			${ message }
+		</div>
+	`;
+
+	const notification = document.createElement( 'div' );
+	const close = document.createElement( 'button' );
+
+	close.classList.add( 'main__notification-close' );
+	close.innerText = '✕';
+	close.setAttribute( 'aria-label', 'Close the notification' );
+
+	notification.classList.add( 'main__notification', 'notice' );
+	notification.innerHTML = notificationTemplate;
+	// ATM we support only top-right position.
+	notification.style.top = window.getViewportTopOffsetConfig() + 10 + 'px';
+	notification.style.right = '10px';
+	notification.appendChild( close );
+
+	const activeNotifications = document.querySelectorAll( '.main__notification' );
+
+	// Translate the position of multiple notifications (just in case).
+	if ( activeNotifications.length > 0 ) {
+		const moveOffset = activeNotifications.length * 10;
+
+		notification.style.top = parseInt( notification.style.top ) + moveOffset + 'px';
+		notification.style.right = parseInt( notification.style.right ) + moveOffset + 'px';
+	}
+
+	// Append notification to the `.main__content` element.
+	const main = document.querySelector( '.main__content' );
+	main.appendChild( notification );
+
+	close.addEventListener( 'click', () => {
+		main.removeChild( notification );
+	} );
+
+	return notification;
+};
 
 /**
  * Returns the `config.toolbar.viewportTopOffset` config value for editors using floating toolbars that

+ 3 - 3
docs/builds/guides/frameworks/overview.md

@@ -18,7 +18,7 @@ When checking how to integrate CKEditor 5 with your framework you can follow the
 
 1. **Check whether an [official integration](#official-wysiwyg-editor-integrations) exists.**
 
-	There are three official integrations so far: for {@link builds/guides/frameworks/react React}, {@link builds/guides/frameworks/angular Angular 2+}, and for {@link builds/guides/frameworks/vuejs Vue.js}.
+	There are three official integrations so far: for {@link builds/guides/frameworks/react React}, {@link builds/guides/frameworks/angular Angular}, and for {@link builds/guides/frameworks/vuejs Vue.js}.
 2. **If not, search for community-driven integrations.** Most of them are available on [npm](https://www.npmjs.com/).
 3. **If none exists, integrate CKEditor 5 with your framework by yourself.**
 
@@ -28,7 +28,7 @@ When checking how to integrate CKEditor 5 with your framework you can follow the
 
 There are three official integrations so far:
 
-* {@link builds/guides/frameworks/angular CKEditor 5 rich-text editor for Angular 2+}
+* {@link builds/guides/frameworks/angular CKEditor 5 rich-text editor for Angular}
 * {@link builds/guides/frameworks/react CKEditor 5 rich-text editor for React}
 * {@link builds/guides/frameworks/vuejs CKEditor 5 rich-text editor for Vue.js}
 
@@ -44,7 +44,7 @@ Check out a [sweet screencast of CKEditor 5 with real-time collaborative editing
 
 ## Compatibility with Ionic and Cordova
 
-CKEditor 5 is compatible with [Ionic framework](https://ionicframework.com/) and [Cordova](https://cordova.apache.org/). However, Ionic disables `user-select` by default, what [blocks typing via the virtual keyboard](https://github.com/ckeditor/ckeditor5/issues/701). It's required to set this property to `text` on the CKEditor component. Just update your stylesheet with the following code:
+CKEditor 5 is compatible with [Ionic framework](https://ionicframework.com/) and [Cordova](https://cordova.apache.org/). However, by default Ionic disables `user-select`, which [blocks typing via the virtual keyboard](https://github.com/ckeditor/ckeditor5/issues/701). It is required to set this property to `text` on the CKEditor component. Just update your stylesheet with the following code:
 
 ```css
 ckeditor {

+ 146 - 146
docs/builds/guides/integration/content-styles.md

@@ -48,8 +48,8 @@ Below there is a full list of content styles used by the editor features. You ca
 
 ```css
 /*
- * CKEditor 5 (v16.0.0) content styles.
- * Generated on Thu, 13 Feb 2020 14:40:38 GMT.
+ * CKEditor 5 (v17.0.0) content styles.
+ * Generated on Fri, 13 Mar 2020 13:27:10 GMT.
  * For more information, check out https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/content-styles.html
  */
 
@@ -64,6 +64,150 @@ Below there is a full list of content styles used by the editor features. You ca
 	--ck-todo-list-checkmark-size: 16px;
 }
 
+/* ckeditor5-image/theme/imageresize.css */
+.ck-content .image.image_resized {
+	max-width: 100%;
+	display: block;
+	box-sizing: border-box;
+}
+/* ckeditor5-image/theme/imageresize.css */
+.ck-content .image.image_resized img {
+	width: 100%;
+}
+/* ckeditor5-image/theme/imageresize.css */
+.ck-content .image.image_resized > figcaption {
+	display: block;
+}
+/* ckeditor5-basic-styles/theme/code.css */
+.ck-content code {
+	background-color: hsla(0, 0%, 78%, 0.3);
+	padding: .15em;
+	border-radius: 2px;
+}
+/* ckeditor5-image/theme/image.css */
+.ck-content .image {
+	display: table;
+	clear: both;
+	text-align: center;
+	margin: 1em auto;
+}
+/* ckeditor5-image/theme/image.css */
+.ck-content .image > img {
+	display: block;
+	margin: 0 auto;
+	max-width: 100%;
+	min-width: 50px;
+}
+/* ckeditor5-image/theme/imagestyle.css */
+.ck-content .image-style-side,
+.ck-content .image-style-align-left,
+.ck-content .image-style-align-center,
+.ck-content .image-style-align-right {
+	max-width: 50%;
+}
+/* ckeditor5-image/theme/imagestyle.css */
+.ck-content .image-style-side {
+	float: right;
+	margin-left: var(--ck-image-style-spacing);
+}
+/* ckeditor5-image/theme/imagestyle.css */
+.ck-content .image-style-align-left {
+	float: left;
+	margin-right: var(--ck-image-style-spacing);
+}
+/* ckeditor5-image/theme/imagestyle.css */
+.ck-content .image-style-align-center {
+	margin-left: auto;
+	margin-right: auto;
+}
+/* ckeditor5-image/theme/imagestyle.css */
+.ck-content .image-style-align-right {
+	float: right;
+	margin-left: var(--ck-image-style-spacing);
+}
+/* ckeditor5-page-break/theme/pagebreak.css */
+.ck-content .page-break {
+	position: relative;
+	clear: both;
+	padding: 5px 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+/* ckeditor5-page-break/theme/pagebreak.css */
+.ck-content .page-break::after {
+	content: '';
+	position: absolute;
+	border-bottom: 2px dashed hsl(0, 0%, 77%);
+	width: 100%;
+}
+/* ckeditor5-page-break/theme/pagebreak.css */
+.ck-content .page-break__label {
+	position: relative;
+	z-index: 1;
+	padding: .3em .6em;
+	display: block;
+	text-transform: uppercase;
+	border: 1px solid hsl(0, 0%, 77%);
+	border-radius: 2px;
+	font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
+	font-size: 0.75em;
+	font-weight: bold;
+	color: hsl(0, 0%, 20%);
+	background: #fff;
+	box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15);
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+/* ckeditor5-block-quote/theme/blockquote.css */
+.ck-content blockquote {
+	overflow: hidden;
+	padding-right: 1.5em;
+	padding-left: 1.5em;
+	margin-left: 0;
+	margin-right: 0;
+	font-style: italic;
+	border-left: solid 5px hsl(0, 0%, 80%);
+}
+/* ckeditor5-block-quote/theme/blockquote.css */
+.ck-content[dir="rtl"] blockquote {
+	border-left: 0;
+	border-right: solid 5px hsl(0, 0%, 80%);
+}
+/* ckeditor5-media-embed/theme/mediaembed.css */
+.ck-content .media {
+	clear: both;
+	margin: 1em 0;
+	display: block;
+	min-width: 15em;
+}
+/* ckeditor5-table/theme/table.css */
+.ck-content .table {
+	margin: 1em auto;
+	display: table;
+}
+/* ckeditor5-table/theme/table.css */
+.ck-content .table table {
+	border-collapse: collapse;
+	border-spacing: 0;
+	width: 100%;
+	height: 100%;
+	border: 1px double hsl(0, 0%, 70%);
+}
+/* ckeditor5-table/theme/table.css */
+.ck-content .table table td,
+.ck-content .table table th {
+	min-width: 2em;
+	padding: .4em;
+	border-color: hsl(0, 0%, 75%);
+}
+/* ckeditor5-table/theme/table.css */
+.ck-content .table table th {
+	font-weight: bold;
+	background: hsla(0, 0%, 0%, 5%);
+}
 /* ckeditor5-list/theme/todolist.css */
 .ck-content .todo-list {
 	list-style: none;
@@ -131,59 +275,6 @@ Below there is a full list of content styles used by the editor features. You ca
 .ck-content .todo-list .todo-list__label .todo-list__label__description {
 	vertical-align: middle;
 }
-/* ckeditor5-media-embed/theme/mediaembed.css */
-.ck-content .media {
-	clear: both;
-	margin: 1em 0;
-	display: block;
-	min-width: 15em;
-}
-/* ckeditor5-basic-styles/theme/code.css */
-.ck-content code {
-	background-color: hsla(0, 0%, 78%, 0.3);
-	padding: .15em;
-	border-radius: 2px;
-}
-/* ckeditor5-block-quote/theme/blockquote.css */
-.ck-content blockquote {
-	overflow: hidden;
-	padding-right: 1.5em;
-	padding-left: 1.5em;
-	margin-left: 0;
-	margin-right: 0;
-	font-style: italic;
-	border-left: solid 5px hsl(0, 0%, 80%);
-}
-/* ckeditor5-block-quote/theme/blockquote.css */
-.ck-content[dir="rtl"] blockquote {
-	border-left: 0;
-	border-right: solid 5px hsl(0, 0%, 80%);
-}
-/* ckeditor5-table/theme/table.css */
-.ck-content .table {
-	margin: 1em auto;
-	display: table;
-}
-/* ckeditor5-table/theme/table.css */
-.ck-content .table table {
-	border-collapse: collapse;
-	border-spacing: 0;
-	width: 100%;
-	height: 100%;
-	border: 1px double hsl(0, 0%, 70%);
-}
-/* ckeditor5-table/theme/table.css */
-.ck-content .table table td,
-.ck-content .table table th {
-	min-width: 2em;
-	padding: .4em;
-	border-color: hsl(0, 0%, 85%);
-}
-/* ckeditor5-table/theme/table.css */
-.ck-content .table table th {
-	font-weight: bold;
-	background: hsl(0, 0%, 98%);
-}
 /* ckeditor5-image/theme/imagecaption.css */
 .ck-content .image > figcaption {
 	display: table-caption;
@@ -195,34 +286,6 @@ Below there is a full list of content styles used by the editor features. You ca
 	font-size: .75em;
 	outline-offset: -1px;
 }
-/* ckeditor5-image/theme/image.css */
-.ck-content .image {
-	display: table;
-	clear: both;
-	text-align: center;
-	margin: 1em auto;
-}
-/* ckeditor5-image/theme/image.css */
-.ck-content .image > img {
-	display: block;
-	margin: 0 auto;
-	max-width: 100%;
-	min-width: 50px;
-}
-/* ckeditor5-image/theme/imageresize.css */
-.ck-content .image.image_resized {
-	max-width: 100%;
-	display: block;
-	box-sizing: border-box;
-}
-/* ckeditor5-image/theme/imageresize.css */
-.ck-content .image.image_resized img {
-	width: 100%;
-}
-/* ckeditor5-image/theme/imageresize.css */
-.ck-content .image.image_resized > figcaption {
-	display: block;
-}
 /* ckeditor5-highlight/theme/highlight.css */
 .ck-content .marker-yellow {
 	background-color: var(--ck-highlight-marker-yellow);
@@ -249,69 +312,6 @@ Below there is a full list of content styles used by the editor features. You ca
 	color: var(--ck-highlight-pen-green);
 	background-color: transparent;
 }
-/* ckeditor5-image/theme/imagestyle.css */
-.ck-content .image-style-side,
-.ck-content .image-style-align-left,
-.ck-content .image-style-align-center,
-.ck-content .image-style-align-right {
-	max-width: 50%;
-}
-/* ckeditor5-image/theme/imagestyle.css */
-.ck-content .image-style-side {
-	float: right;
-	margin-left: var(--ck-image-style-spacing);
-}
-/* ckeditor5-image/theme/imagestyle.css */
-.ck-content .image-style-align-left {
-	float: left;
-	margin-right: var(--ck-image-style-spacing);
-}
-/* ckeditor5-image/theme/imagestyle.css */
-.ck-content .image-style-align-center {
-	margin-left: auto;
-	margin-right: auto;
-}
-/* ckeditor5-image/theme/imagestyle.css */
-.ck-content .image-style-align-right {
-	float: right;
-	margin-left: var(--ck-image-style-spacing);
-}
-/* ckeditor5-page-break/theme/pagebreak.css */
-.ck-content .page-break {
-	position: relative;
-	clear: both;
-	padding: 5px 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-/* ckeditor5-page-break/theme/pagebreak.css */
-.ck-content .page-break::after {
-	content: '';
-	position: absolute;
-	border-bottom: 2px dashed hsl(0, 0%, 77%);
-	width: 100%;
-}
-/* ckeditor5-page-break/theme/pagebreak.css */
-.ck-content .page-break__label {
-	position: relative;
-	z-index: 1;
-	padding: .3em .6em;
-	display: block;
-	text-transform: uppercase;
-	border: 1px solid hsl(0, 0%, 77%);
-	border-radius: 2px;
-	font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
-	font-size: 0.75em;
-	font-weight: bold;
-	color: hsl(0, 0%, 20%);
-	background: #fff;
-	box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15);
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
 /* ckeditor5-horizontal-line/theme/horizontalline.css */
 .ck-content hr {
 	border-width: 1px 0 0;

+ 2 - 0
scripts/docs/content-styles/ckeditor.js

@@ -42,6 +42,7 @@ import RestrictedEditingMode from '@ckeditor/ckeditor5-restricted-editing/src/re
 import Table from '@ckeditor/ckeditor5-table/src/table';
 import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
 import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties';
+import TableSelection from '@ckeditor/ckeditor5-table/src/tableselection';
 import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
 import Font from '@ckeditor/ckeditor5-font/src/font';
 import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';
@@ -87,6 +88,7 @@ ClassicEditor.builtinPlugins = [
 	Table,
 	TableProperties,
 	TableCellProperties,
+	TableSelection,
 	TableToolbar,
 	Font,
 	Highlight,

File diff suppressed because it is too large
+ 327 - 303
yarn.lock