8
0
Просмотр исходного кода

Docs: Reverted the mentions feature guide to master.

Aleksander Nowodzinski 6 лет назад
Родитель
Сommit
91bb4bd090

+ 1 - 3
packages/ckeditor5-mention/docs/_snippets/features/build-mention-source.js

@@ -6,10 +6,8 @@
 /* globals window */
 
 import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
-import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
-import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
 import Mention from '@ckeditor/ckeditor5-mention/src/mention';
 
-ClassicEditor.builtinPlugins.push( Underline, Strikethrough, Mention );
+ClassicEditor.builtinPlugins.push( Mention );
 
 window.ClassicEditor = ClassicEditor;

+ 2 - 141
packages/ckeditor5-mention/docs/_snippets/features/mention.html

@@ -1,142 +1,3 @@
-<div class="snippet-mention">
-	<ul class="snippet-mention__posts">
-		<li>
-			<img src="../assets/img/m_1.jpg" alt="avatar" class="photo">
-			<div class="message">
-				<strong>Charles Flores</strong>
-				<span class="bullet">•</span>
-				<a class="mailto-user" href="mailto:cflores@example.com">@cflores</a>
-				<span class="bullet">•</span>
-				<span class="time">2 hours ago</span>
-				<p class="post-content">
-					Thanks for another <a class="mention" data-mention="#yummy" href="https://example.com/social/yummy">#yummy</a> recipe,
-					<a class="mention" data-mention="@dwilliams" href="mailto:dwilliams@example.com">@dwilliams</a>!
-					Makes me <a class="mention" data-mention="#hungry" href="https://example.com/social/hungry">#hungry</a>
-					just looking at the photos 😋. Definitely adding it to my TODO list for our next
-					<a class="mention" data-mention="#mediterranean" href="https://example.com/social/mediterranean">#mediterranean</a> potluck.
-				</p>
-			</div>
-		</li>
-		<li>
-			<img src="../assets/img/w_1.jpg" alt="avatar" class="photo">
-			<div class="message">
-				<strong>Mildred Wilson</strong>
-				<span class="bullet">•</span>
-				<a class="mailto-user" href="mailto:mwilson@example.com">@mwilson</a>
-				<span class="bullet">•</span>
-				<span class="time">4 hours ago</span>
-				<p class="post-content">
-					Really appreciate the <a class="mention" data-mention="#vegetarian" href="https://example.com/social/vegetarian">#vegetarian</a>
-					and <a class="mention" data-mention="#vegan" href="https://example.com/social/vegan">#vegan</a> variations of your recipes.
-					So thoughtful of you! 🌱
-				</p>
-			</div>
-		</li>
-	</ul>
-	<div class="snippet-mention__editor">
-		<p>
-			I agree with <a href="mwilson@example.com" class="mention" data-mention="@mwilson">@mwilson</a> 👍.
-			It’s so nice of you to always be providing a few options to try! I love
-			<a href="https://example.com/social/greek" class="mention" data-mention="#greek">#greek</a> cuisine with a modern twist,
-			this one will be perfect to try.
-		</p>
-	</div>
-
-	<button class="snippet-mention-send" type="button">Send</button>
-
-	<style>
-		/* ---- Chat styles ---------------------------------------------------------------------- */
-
-		ul.snippet-mention__posts {
-			border: 1px solid var(--ck-color-base-border);
-			border-top-left-radius: var(--ck-border-radius);
-			border-top-right-radius: var(--ck-border-radius);
-			border-bottom: none;
-			margin: 1em 0 0;
-			padding: 1em;
-			list-style-position: inside;
-		}
-
-		ul.snippet-mention__posts li {
-			display: flex;
-		}
-
-		ul.snippet-mention__posts li.new-post {
-			animation: highlight 600ms ease-out;
-		}
-
-		ul.snippet-mention__posts li + li {
-			margin-top: 1em;
-		}
-
-		.snippet-mention__posts li .photo {
-			border-radius: 100%;
-			height: 40px;
-			margin-right: 1.5em;
-		}
-
-		.snippet-mention__posts li .time {
-			color: #b7b7b7;
-			font-size: .9em;
-		}
-
-		.snippet-mention__posts li .bullet {
-			padding-left: 5px;
-			padding-right: 5px;
-			color: #b7b7b7;
-		}
-
-		@keyframes highlight {
-			0% {
-				background-color: yellow;
-			}
-
-			100% {
-				background-color: white;
-			}
-		}
-
-		/* ---- Editor styles ---------------------------------------------------------------------- */
-
-		.snippet-mention__editor + .ck.ck-editor {
-			margin-top: 0;
-		}
-
-		.snippet-mention__editor + .ck.ck-editor .ck.ck-toolbar {
-			border-top-left-radius: 0;
-			border-top-right-radius: 0;
-		}
-
-		/* ---- Mention styles ---------------------------------------------------------------------- */
-
-		.ck-mentions .snippet-mention__item {
-			display: block;
-		}
-
-		.ck-mentions .snippet-mention__item img {
-			border-radius: 100%;
-			height: 30px;
-		}
-
-		.ck-mentions .snippet-mention__item span {
-			margin-left: .5em;
-		}
-
-		.ck-mentions .snippet-mention__item.ck-on .snippet-mention__item__user-name {
-			color: var(--ck-color-base-background);
-		}
-
-		.ck-mentions .snippet-mention__item .snippet-mention__item__full-name {
-			color: #aaa;
-		}
-
-		.ck-content .mention {
-			background: unset;
-		}
-
-		.snippet-mention .ck.ck-content a,
-		.snippet-mention .snippet-mention__posts a {
-			color: #1b3af2;
-		}
-	</style>
+<div id="snippet-mention">
+	<p>Hello <span class="mention" data-mention="@Ted">@Ted</span>.</p>
 </div>

+ 3 - 180
packages/ckeditor5-mention/docs/_snippets/features/mention.js

@@ -8,12 +8,11 @@
 import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
 
 ClassicEditor
-	.create( document.querySelector( '.snippet-mention__editor' ), {
+	.create( document.querySelector( '#snippet-mention' ), {
 		cloudServices: CS_CONFIG,
-		extraPlugins: [ MentionCustomization ],
 		toolbar: {
 			items: [
-				'bold', 'italic', 'underline', 'strikethrough', '|', 'link', '|', 'undo', 'redo'
+				'heading', '|', 'bold', 'italic', '|', 'undo', 'redo'
 			],
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 		},
@@ -21,190 +20,14 @@ ClassicEditor
 			feeds: [
 				{
 					marker: '@',
-					feed: [
-						{ id: '@cflores', userId: '1', avatar: 'm_1', name: 'Charles Flores' },
-						{ id: '@gjackson', userId: '2', avatar: 'm_2', name: 'Gerald Jackson' },
-						{ id: '@wreed', userId: '3', avatar: 'm_3', name: 'Wayne Reed' },
-						{ id: '@lgarcia', userId: '4', avatar: 'm_4', name: 'Louis Garcia' },
-						{ id: '@rwilson', userId: '5', avatar: 'm_5', name: 'Roy Wilson' },
-						{ id: '@mnelson', userId: '6', avatar: 'm_6', name: 'Matthew Nelson' },
-						{ id: '@rwilliams', userId: '7', avatar: 'm_7', name: 'Randy Williams' },
-						{ id: '@ajohnson', userId: '8', avatar: 'm_8', name: 'Albert Johnson' },
-						{ id: '@sroberts', userId: '9', avatar: 'm_9', name: 'Steve Roberts' },
-						{ id: '@kevans', userId: '10', avatar: 'm_10', name: 'Kevin Evans' },
-						{ id: '@mwilson', userId: '11', avatar: 'w_1', name: 'Mildred Wilson' },
-						{ id: '@mnelson', userId: '12', avatar: 'w_2', name: 'Melissa Nelson' },
-						{ id: '@kallen', userId: '13', avatar: 'w_3', name: 'Kathleen Allen' },
-						{ id: '@myoung', userId: '14', avatar: 'w_4', name: 'Mary Young' },
-						{ id: '@arogers', userId: '15', avatar: 'w_5', name: 'Ashley Rogers' },
-						{ id: '@dgriffin', userId: '16', avatar: 'w_6', name: 'Debra Griffin' },
-						{ id: '@dwilliams', userId: '17', avatar: 'w_7', name: 'Denise Williams' },
-						{ id: '@ajames', userId: '18', avatar: 'w_8', name: 'Amy James' },
-						{ id: '@randerson', userId: '19', avatar: 'w_9', name: 'Ruby Anderson' },
-						{ id: '@wlee', userId: '20', avatar: 'w_10', name: 'Wanda Lee' }
-					],
-					itemRenderer: customItemRenderer
-				},
-				{
-					marker: '#',
-					feed: [
-						'#american',
-						'#asian',
-						'#baking',
-						'#breakfast',
-						'#cake',
-						'#caribbean',
-						'#chinese',
-						'#chocolate',
-						'#cooking',
-						'#dairy',
-						'#delicious',
-						'#delish',
-						'#dessert',
-						'#desserts',
-						'#dinner',
-						'#eat',
-						'#eating',
-						'#eggs',
-						'#fish',
-						'#food',
-						'#foodgasm',
-						'#foodie',
-						'#foodporn',
-						'#foods',
-						'#french',
-						'#fresh',
-						'#fusion',
-						'#glutenfree',
-						'#greek',
-						'#grilling',
-						'#halal',
-						'#homemade',
-						'#hot',
-						'#hungry',
-						'#icecream',
-						'#indian',
-						'#italian',
-						'#japanese',
-						'#keto',
-						'#korean',
-						'#lactosefree',
-						'#lunch',
-						'#meat',
-						'#mediterranean',
-						'#mexican',
-						'#moroccan',
-						'#nom',
-						'#nomnom',
-						'#paleo',
-						'#poultry',
-						'#snack',
-						'#spanish',
-						'#sugarfree',
-						'#sweet',
-						'#sweettooth',
-						'#tasty',
-						'#thai',
-						'#vegan',
-						'#vegetarian',
-						'#vietnamese',
-						'#yum',
-						'#yummy'
-					]
+					feed: [ '@Barney', '@Lily', '@Marshall', '@Robin', '@Ted' ]
 				}
 			]
 		}
 	} )
 	.then( editor => {
 		window.editor = editor;
-
-		document.querySelector( '.snippet-mention-send' ).addEventListener( 'click', () => {
-			const clone = document.querySelector( '.snippet-mention__posts li' ).cloneNode( true );
-
-			clone.classList.add( 'new-post' );
-			clone.querySelector( 'img' ).src = '../assets/img/m_0.jpg';
-			clone.querySelector( 'strong' ).textContent = 'CKEditor User';
-			clone.querySelector( 'a.mailto-user' ).textContent = '@ckeditor';
-			clone.querySelector( '.time' ).textContent = 'now';
-			clone.querySelector( '.post-content' ).innerHTML = editor.getData();
-
-			document.querySelector( '.snippet-mention__posts' ).appendChild( clone );
-		} );
 	} )
 	.catch( err => {
 		console.error( err.stack );
 	} );
-
-function MentionCustomization( editor ) {
-	// The upcast converter will convert view <a class="mention" href="">
-	// elements to the model 'mention' text attribute.
-	editor.conversion.for( 'upcast' ).elementToAttribute( {
-		view: {
-			name: 'a',
-			key: 'data-mention',
-			classes: 'mention',
-			attributes: {
-				href: true
-			}
-		},
-		model: {
-			key: 'mention',
-			value: viewItem => {
-				// The mention feature expects that the mention attribute value
-				// in the model is a plain object with a set of additional attributes.
-				// In order to create a proper object use the toMentionAttribute() helper method:
-				return editor.plugins.get( 'Mention' ).toMentionAttribute( viewItem );
-			}
-		},
-		converterPriority: 'high'
-	} );
-
-	// Downcast the model 'mention' text attribute to a view <a> element.
-	editor.conversion.for( 'downcast' ).attributeToElement( {
-		model: 'mention',
-		view: ( modelAttributeValue, viewWriter ) => {
-			// Do not convert empty attributes (lack of value means no mention).
-			if ( !modelAttributeValue ) {
-				return;
-			}
-
-			let href;
-
-			if ( modelAttributeValue.id[ 0 ] === '@' ) {
-				href = `mailto:${ modelAttributeValue.id.slice( 1 ) }@example.com`;
-			} else {
-				href = `https://example.com/social/${ modelAttributeValue.id.slice( 1 ) }`;
-			}
-
-			return viewWriter.createAttributeElement( 'a', {
-				class: 'mention',
-				'data-mention': modelAttributeValue.id,
-				href
-			} );
-		},
-		converterPriority: 'high'
-	} );
-}
-
-function customItemRenderer( item ) {
-	const itemElement = document.createElement( 'span' );
-	const avatar = document.createElement( 'img' );
-	const userNameElement = document.createElement( 'span' );
-	const fullNameElement = document.createElement( 'span' );
-
-	itemElement.classList.add( 'snippet-mention__item' );
-
-	avatar.src = `../assets/img/${ item.avatar }.jpg`;
-
-	userNameElement.classList.add( 'snippet-mention__item__user-name' );
-	userNameElement.textContent = item.id;
-
-	fullNameElement.classList.add( 'snippet-mention__item__full-name' );
-	fullNameElement.textContent = item.name;
-
-	itemElement.appendChild( avatar );
-	itemElement.appendChild( userNameElement );
-	itemElement.appendChild( fullNameElement );
-
-	return itemElement;
-}