8
0
فهرست منبع

Docs [WIP]: Extended the mention demo in the feature guide.

Aleksander Nowodzinski 6 سال پیش
والد
کامیت
1ff513d597
24فایلهای تغییر یافته به همراه324 افزوده شده و 6 حذف شده
  1. 3 1
      packages/ckeditor5-mention/docs/_snippets/features/build-mention-source.js
  2. 141 2
      packages/ckeditor5-mention/docs/_snippets/features/mention.html
  3. 180 3
      packages/ckeditor5-mention/docs/_snippets/features/mention.js
  4. BIN
      packages/ckeditor5-mention/docs/assets/img/m_0.jpg
  5. BIN
      packages/ckeditor5-mention/docs/assets/img/m_1.jpg
  6. BIN
      packages/ckeditor5-mention/docs/assets/img/m_10.jpg
  7. BIN
      packages/ckeditor5-mention/docs/assets/img/m_2.jpg
  8. BIN
      packages/ckeditor5-mention/docs/assets/img/m_3.jpg
  9. BIN
      packages/ckeditor5-mention/docs/assets/img/m_4.jpg
  10. BIN
      packages/ckeditor5-mention/docs/assets/img/m_5.jpg
  11. BIN
      packages/ckeditor5-mention/docs/assets/img/m_6.jpg
  12. BIN
      packages/ckeditor5-mention/docs/assets/img/m_7.jpg
  13. BIN
      packages/ckeditor5-mention/docs/assets/img/m_8.jpg
  14. BIN
      packages/ckeditor5-mention/docs/assets/img/m_9.jpg
  15. BIN
      packages/ckeditor5-mention/docs/assets/img/w_1.jpg
  16. BIN
      packages/ckeditor5-mention/docs/assets/img/w_10.jpg
  17. BIN
      packages/ckeditor5-mention/docs/assets/img/w_2.jpg
  18. BIN
      packages/ckeditor5-mention/docs/assets/img/w_3.jpg
  19. BIN
      packages/ckeditor5-mention/docs/assets/img/w_4.jpg
  20. BIN
      packages/ckeditor5-mention/docs/assets/img/w_5.jpg
  21. BIN
      packages/ckeditor5-mention/docs/assets/img/w_6.jpg
  22. BIN
      packages/ckeditor5-mention/docs/assets/img/w_7.jpg
  23. BIN
      packages/ckeditor5-mention/docs/assets/img/w_8.jpg
  24. BIN
      packages/ckeditor5-mention/docs/assets/img/w_9.jpg

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

@@ -6,8 +6,10 @@
 /* globals window */
 /* globals window */
 
 
 import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
 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';
 import Mention from '@ckeditor/ckeditor5-mention/src/mention';
 
 
-ClassicEditor.builtinPlugins.push( Mention );
+ClassicEditor.builtinPlugins.push( Underline, Strikethrough, Mention );
 
 
 window.ClassicEditor = ClassicEditor;
 window.ClassicEditor = ClassicEditor;

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

@@ -1,3 +1,142 @@
-<div id="snippet-mention">
-	<p>Hello <span class="mention" data-mention="@Ted">@Ted</span>.</p>
+<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>
 </div>

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

@@ -8,11 +8,12 @@
 import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
 import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
 
 
 ClassicEditor
 ClassicEditor
-	.create( document.querySelector( '#snippet-mention' ), {
+	.create( document.querySelector( '.snippet-mention__editor' ), {
 		cloudServices: CS_CONFIG,
 		cloudServices: CS_CONFIG,
+		extraPlugins: [ MentionCustomization ],
 		toolbar: {
 		toolbar: {
 			items: [
 			items: [
-				'heading', '|', 'bold', 'italic', '|', 'undo', 'redo'
+				'bold', 'italic', 'underline', 'strikethrough', '|', 'link', '|', 'undo', 'redo'
 			],
 			],
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 		},
 		},
@@ -20,14 +21,190 @@ ClassicEditor
 			feeds: [
 			feeds: [
 				{
 				{
 					marker: '@',
 					marker: '@',
-					feed: [ '@Barney', '@Lily', '@Marshall', '@Robin', '@Ted' ]
+					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'
+					]
 				}
 				}
 			]
 			]
 		}
 		}
 	} )
 	} )
 	.then( editor => {
 	.then( editor => {
 		window.editor = 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 => {
 	.catch( err => {
 		console.error( err.stack );
 		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;
+}

BIN
packages/ckeditor5-mention/docs/assets/img/m_0.jpg


BIN
packages/ckeditor5-mention/docs/assets/img/m_1.jpg


BIN
packages/ckeditor5-mention/docs/assets/img/m_10.jpg


BIN
packages/ckeditor5-mention/docs/assets/img/m_2.jpg


BIN
packages/ckeditor5-mention/docs/assets/img/m_3.jpg


BIN
packages/ckeditor5-mention/docs/assets/img/m_4.jpg


BIN
packages/ckeditor5-mention/docs/assets/img/m_5.jpg


BIN
packages/ckeditor5-mention/docs/assets/img/m_6.jpg


BIN
packages/ckeditor5-mention/docs/assets/img/m_7.jpg


BIN
packages/ckeditor5-mention/docs/assets/img/m_8.jpg


BIN
packages/ckeditor5-mention/docs/assets/img/m_9.jpg


BIN
packages/ckeditor5-mention/docs/assets/img/w_1.jpg


BIN
packages/ckeditor5-mention/docs/assets/img/w_10.jpg


BIN
packages/ckeditor5-mention/docs/assets/img/w_2.jpg


BIN
packages/ckeditor5-mention/docs/assets/img/w_3.jpg


BIN
packages/ckeditor5-mention/docs/assets/img/w_4.jpg


BIN
packages/ckeditor5-mention/docs/assets/img/w_5.jpg


BIN
packages/ckeditor5-mention/docs/assets/img/w_6.jpg


BIN
packages/ckeditor5-mention/docs/assets/img/w_7.jpg


BIN
packages/ckeditor5-mention/docs/assets/img/w_8.jpg


BIN
packages/ckeditor5-mention/docs/assets/img/w_9.jpg