瀏覽代碼

Provide support for decorators' names.

Mateusz Samsel 6 年之前
父節點
當前提交
9c3a301395

+ 8 - 9
packages/ckeditor5-link/src/linkediting.js

@@ -10,7 +10,7 @@
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import LinkCommand from './linkcommand';
 import UnlinkCommand from './unlinkcommand';
-import { createLinkElement, ensureSafeUrl, getLocalizedDecorators } from './utils';
+import { createLinkElement, ensureSafeUrl, getLocalizedDecorators, getNormalizedDecorators } from './utils';
 import AutomaticDecorators from './utils/automaticdecorators';
 import ManualDecorator from './utils/manualdecorator';
 import bindTwoStepCaretToAttribute from '@ckeditor/ckeditor5-engine/src/utils/bindtwostepcarettoattribute';
@@ -77,7 +77,7 @@ export default class LinkEditing extends Plugin {
 		editor.commands.add( 'link', new LinkCommand( editor ) );
 		editor.commands.add( 'unlink', new UnlinkCommand( editor ) );
 
-		const linkDecorators = getLocalizedDecorators( editor );
+		const linkDecorators = getLocalizedDecorators( editor.t, getNormalizedDecorators( editor ) );
 
 		this._enableAutomaticDecorators( linkDecorators.filter( item => item.mode === DECORATOR_AUTOMATIC ) );
 		this._enableManualDecorators( linkDecorators.filter( item => item.mode === DECORATOR_MANUAL ) );
@@ -108,6 +108,7 @@ export default class LinkEditing extends Plugin {
 		// Adds default decorator for external links.
 		if ( editor.config.get( 'link.addTargetToExternalLinks' ) ) {
 			automaticDecorators.add( {
+				id: 'linkDecoratorIsExternal',
 				mode: DECORATOR_AUTOMATIC,
 				callback: url => EXTERNAL_LINKS_REGEXP.test( url ),
 				attributes: {
@@ -145,21 +146,19 @@ export default class LinkEditing extends Plugin {
 		const command = editor.commands.get( 'link' );
 		const manualDecorators = command.manualDecorators;
 
-		manualDecoratorDefinitions.forEach( ( decorator, index ) => {
-			const decoratorName = `linkManualDecorator${ index }`;
-
-			editor.model.schema.extend( '$text', { allowAttributes: decoratorName } );
+		manualDecoratorDefinitions.forEach( decorator => {
+			editor.model.schema.extend( '$text', { allowAttributes: decorator.id } );
 
 			// Keeps reference to manual decorator to decode its name to attributes during downcast.
-			manualDecorators.add( new ManualDecorator( Object.assign( { id: decoratorName }, decorator ) ) );
+			manualDecorators.add( new ManualDecorator( decorator ) );
 
 			editor.conversion.for( 'downcast' ).attributeToElement( {
-				model: decoratorName,
+				model: decorator.id,
 				view: ( manualDecoratorName, writer ) => {
 					if ( manualDecoratorName ) {
 						const element = writer.createAttributeElement(
 							'a',
-							manualDecorators.get( decoratorName ).attributes,
+							manualDecorators.get( decorator.id ).attributes,
 							{
 								priority: 5
 							}

+ 36 - 16
packages/ckeditor5-link/src/utils.js

@@ -68,26 +68,46 @@ function isSafeUrl( url ) {
  * **Note**: Only the few most commonly used labels are translated automatically. Other labels should be manually
  * translated in the {@link module:link/link~LinkConfig#decorators `config.link.decorators`} configuration.
  *
- * @param {module:core/editor/editor~Editor} editor An editor instance
+ * @param {module:utils/locale~Locale#t} t shorthand for {@link module:utils/locale~Locale#t Locale#t}
+ * @param {Array.<module:link/link~LinkDecoratorAutomaticDefinition|module:link/link~LinkDecoratorManualDefinition>} decorators reference
+ * where labels' values should be localized.
  * @returns {Array.<module:link/link~LinkDecoratorAutomaticDefinition|module:link/link~LinkDecoratorManualDefinition>}
  */
-export function getLocalizedDecorators( editor ) {
-	const t = editor.t;
+export function getLocalizedDecorators( t, decorators ) {
+	const localizedDecoratorsLabels = {
+		'Open in a new tab': t( 'Open in a new tab' ),
+		'Downloadable': t( 'Downloadable' )
+	};
+
+	decorators.forEach( decorator => {
+		if ( decorator.label && localizedDecoratorsLabels[ decorator.label ] ) {
+			decorator.label = localizedDecoratorsLabels[ decorator.label ];
+		}
+		return decorator;
+	} );
+
+	return decorators;
+}
+
+/**
+ * Converts Obj of decorators to Array of decorators with nice identifiers.
+ *
+ * @param {module:core/editor/editor~Editor} editor
+ */
+export function getNormalizedDecorators( editor ) {
 	const decorators = editor.config.get( 'link.decorators' );
+	const retArray = [];
 
 	if ( decorators ) {
-		const localizedDecoratorsLabels = {
-			'Open in a new tab': t( 'Open in a new tab' ),
-			'Downloadable': t( 'Downloadable' )
-		};
-
-		return decorators.map( decorator => {
-			if ( decorator.label && localizedDecoratorsLabels[ decorator.label ] ) {
-				decorator.label = localizedDecoratorsLabels[ decorator.label ];
-			}
-			return decorator;
-		} );
-	} else {
-		return [];
+		for ( const [ key, value ] of Object.entries( decorators ) ) {
+			const decorator = Object.assign(
+				{},
+				value,
+				{ id: `linkDecorator${ key }` }
+			);
+			retArray.push( decorator );
+		}
 	}
+
+	return retArray;
 }

+ 11 - 11
packages/ckeditor5-link/tests/manual/linkdecorator.js

@@ -21,8 +21,8 @@ ClassicEditor
 		plugins: [ Link, Typing, Paragraph, Clipboard, Undo, Enter ],
 		toolbar: [ 'link', 'undo', 'redo' ],
 		link: {
-			decorators: [
-				{
+			decorators: {
+				IxExternal: {
 					mode: 'manual',
 					label: 'Open in new window',
 					attributes: {
@@ -30,21 +30,21 @@ ClassicEditor
 						rel: 'noopener noreferrer'
 					}
 				},
-				{
+				IsDownloadable: {
 					mode: 'manual',
 					label: 'Downloadable',
 					attributes: {
 						download: 'download'
 					}
 				},
-				{
+				IsGallery: {
 					mode: 'manual',
 					label: 'Gallery link',
 					attributes: {
 						class: 'gallery'
 					}
 				}
-			]
+			}
 		}
 	} )
 	.then( editor => {
@@ -63,30 +63,30 @@ ClassicEditor
 		plugins: [ Link, Typing, Paragraph, Clipboard, Undo, Enter ],
 		toolbar: [ 'link', 'undo', 'redo' ],
 		link: {
-			decorators: [
-				{
+			decorators: {
+				IsTelephone: {
 					mode: 'automatic',
 					callback: url => url.startsWith( 'tel:' ),
 					attributes: {
 						class: 'phone'
 					}
 				},
-				{
+				IsInternal: {
 					mode: 'automatic',
 					callback: url => url.startsWith( '#' ),
 					attributes: {
 						class: 'internal'
 					}
 				}
-			],
-			targetDecorator: true
+			},
+			addTargetToExternalLinks: true
 		}
 	} )
 	.then( editor => {
 		if ( !window.editors ) {
 			window.editors = {};
 		}
-		window.editors.autoamticDecorators = editor;
+		window.editors.automaticDecorators = editor;
 	} )
 	.catch( err => {
 		console.error( err.stack );