Răsfoiți Sursa

Added support for backtick and code.

Kamil Piechaczek 8 ani în urmă
părinte
comite
fd91b90c07

+ 19 - 11
packages/ckeditor5-autoformat/src/autoformat.js

@@ -36,16 +36,17 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  * * `## ` – will create Heading 2,
  * * `## ` – will create Heading 2,
  * * `### ` – will create Heading 3.
  * * `### ` – will create Heading 3.
  *
  *
- * ## Bold and italic
+ * ## Bold, italic and code
  *
  *
- * You can apply bold or italic to a text by typing Markdown formatting:
+ * You can apply bold, italic and code to a text by typing Markdown formatting:
  *
  *
- * * `**foo bar**` or `__foo bar__` – will bold the text.
- * * `*foo bar*` or `_foo bar_` – will italicize the text.
+ * * `**foo bar**` or `__foo bar__` – will bold the text,
+ * * `*foo bar*` or `_foo bar_` – will italicize the text,
+ * * ``` `foo bar` ``` – will mark the text as code.
  *
  *
  * NOTE: Remember to add proper features to the editor configuration. Autoformatting will be enabled only for the
  * NOTE: Remember to add proper features to the editor configuration. Autoformatting will be enabled only for the
  * commands that are included in the actual configuration. For example: `bold` autoformatting will not work if there is no
  * commands that are included in the actual configuration. For example: `bold` autoformatting will not work if there is no
- * `bold` command registered in the editor.
+ * `Bold` command registered in the editor.
  *
  *
  * @extends module:core/plugin~Plugin
  * @extends module:core/plugin~Plugin
  */
  */
@@ -91,14 +92,15 @@ export default class Autoformat extends Plugin {
 	}
 	}
 
 
 	/**
 	/**
-	 * Adds autoformatting related to the {@link module:basic-styles/bold~Bold} and
-	 * {@link module:basic-styles/italic~Italic}.
+	 * Adds autoformatting related to the {@link module:basic-styles/bold~Bold},
+	 * {@link module:basic-styles/italic~Italic} and {@link module:basic-styles/code~Code}.
 	 *
 	 *
 	 * When typed:
 	 * When typed:
-	 * - `**foobar**` – `**` characters are removed and `foobar` is set to bold.
-	 * - `__foobar__` – `__` characters are removed and `foobar` is set to bold.
-	 * - `*foobar*` – `*` characters are removed and `foobar` is set to italic.
-	 * - `_foobar_` – `_` characters are removed and `foobar` is set to italic.
+	 * - `**foobar**` – `**` characters are removed and `foobar` is set to bold,
+	 * - `__foobar__` – `__` characters are removed and `foobar` is set to bold,
+	 * - `*foobar*` – `*` characters are removed and `foobar` is set to italic,
+	 * - `_foobar_` – `_` characters are removed and `foobar` is set to italic,
+	 * - ``` `foobar` – ``` ` ``` characters are removed and `foobar` is set to code.
 	 *
 	 *
 	 * @private
 	 * @private
 	 */
 	 */
@@ -121,6 +123,12 @@ export default class Autoformat extends Plugin {
 			new InlineAutoformatEngine( this.editor, /(?:^|[^_])(_)([^_]+)(_)$/g, 'italic' );
 			new InlineAutoformatEngine( this.editor, /(?:^|[^_])(_)([^_]+)(_)$/g, 'italic' );
 			/* eslint-enable no-new */
 			/* eslint-enable no-new */
 		}
 		}
+
+		if ( commands.get( 'code' ) ) {
+			/* eslint-disable no-new */
+			new InlineAutoformatEngine( this.editor, /(`)([^`]+)(`)$/g, 'code' );
+			/* eslint-enable no-new */
+		}
 	}
 	}
 
 
 	/**
 	/**

+ 36 - 7
packages/ckeditor5-autoformat/tests/autoformat.js

@@ -9,6 +9,7 @@ import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import ListEngine from '@ckeditor/ckeditor5-list/src/listengine';
 import ListEngine from '@ckeditor/ckeditor5-list/src/listengine';
 import HeadingEngine from '@ckeditor/ckeditor5-heading/src/headingengine';
 import HeadingEngine from '@ckeditor/ckeditor5-heading/src/headingengine';
 import BoldEngine from '@ckeditor/ckeditor5-basic-styles/src/boldengine';
 import BoldEngine from '@ckeditor/ckeditor5-basic-styles/src/boldengine';
+import CodeEngine from '@ckeditor/ckeditor5-basic-styles/src/codeengine';
 import ItalicEngine from '@ckeditor/ckeditor5-basic-styles/src/italicengine';
 import ItalicEngine from '@ckeditor/ckeditor5-basic-styles/src/italicengine';
 import BlockQuoteEngine from '@ckeditor/ckeditor5-block-quote/src/blockquoteengine';
 import BlockQuoteEngine from '@ckeditor/ckeditor5-block-quote/src/blockquoteengine';
 import Enter from '@ckeditor/ckeditor5-enter/src/enter';
 import Enter from '@ckeditor/ckeditor5-enter/src/enter';
@@ -28,7 +29,17 @@ describe( 'Autoformat', () => {
 	beforeEach( () => {
 	beforeEach( () => {
 		return VirtualTestEditor
 		return VirtualTestEditor
 			.create( {
 			.create( {
-				plugins: [ Enter, Paragraph, Autoformat, ListEngine, HeadingEngine, BoldEngine, ItalicEngine, BlockQuoteEngine ]
+				plugins: [
+					Enter,
+					Paragraph,
+					Autoformat,
+					ListEngine,
+					HeadingEngine,
+					BoldEngine,
+					ItalicEngine,
+					CodeEngine,
+					BlockQuoteEngine
+				]
 			} )
 			} )
 			.then( newEditor => {
 			.then( newEditor => {
 				editor = newEditor;
 				editor = newEditor;
@@ -205,7 +216,7 @@ describe( 'Autoformat', () => {
 	} );
 	} );
 
 
 	describe( 'Inline autoformat', () => {
 	describe( 'Inline autoformat', () => {
-		it( 'should replace both `**` with bold', () => {
+		it( 'should replace both "**" with bold', () => {
 			setData( doc, '<paragraph>**foobar*[]</paragraph>' );
 			setData( doc, '<paragraph>**foobar*[]</paragraph>' );
 			doc.enqueueChanges( () => {
 			doc.enqueueChanges( () => {
 				batch.insert( doc.selection.getFirstPosition(), '*' );
 				batch.insert( doc.selection.getFirstPosition(), '*' );
@@ -214,7 +225,7 @@ describe( 'Autoformat', () => {
 			expect( getData( doc ) ).to.equal( '<paragraph><$text bold="true">foobar</$text>[]</paragraph>' );
 			expect( getData( doc ) ).to.equal( '<paragraph><$text bold="true">foobar</$text>[]</paragraph>' );
 		} );
 		} );
 
 
-		it( 'should replace both `*` with italic', () => {
+		it( 'should replace both "*" with italic', () => {
 			setData( doc, '<paragraph>*foobar[]</paragraph>' );
 			setData( doc, '<paragraph>*foobar[]</paragraph>' );
 			doc.enqueueChanges( () => {
 			doc.enqueueChanges( () => {
 				batch.insert( doc.selection.getFirstPosition(), '*' );
 				batch.insert( doc.selection.getFirstPosition(), '*' );
@@ -223,7 +234,16 @@ describe( 'Autoformat', () => {
 			expect( getData( doc ) ).to.equal( '<paragraph><$text italic="true">foobar</$text>[]</paragraph>' );
 			expect( getData( doc ) ).to.equal( '<paragraph><$text italic="true">foobar</$text>[]</paragraph>' );
 		} );
 		} );
 
 
-		it( 'nothing should be replaces when typing `*`', () => {
+		it( 'should replace both "`" with code', () => {
+			setData( doc, '<paragraph>`foobar[]</paragraph>' );
+			doc.enqueueChanges( () => {
+				batch.insert( doc.selection.getFirstPosition(), '`' );
+			} );
+
+			expect( getData( doc ) ).to.equal( '<paragraph><$text code="true">foobar</$text>[]</paragraph>' );
+		} );
+
+		it( 'nothing should be replaces when typing "*"', () => {
 			setData( doc, '<paragraph>foobar[]</paragraph>' );
 			setData( doc, '<paragraph>foobar[]</paragraph>' );
 			doc.enqueueChanges( () => {
 			doc.enqueueChanges( () => {
 				batch.insert( doc.selection.getFirstPosition(), '*' );
 				batch.insert( doc.selection.getFirstPosition(), '*' );
@@ -300,7 +320,7 @@ describe( 'Autoformat', () => {
 			expect( getData( doc ) ).to.equal( '<paragraph>## []</paragraph>' );
 			expect( getData( doc ) ).to.equal( '<paragraph>## []</paragraph>' );
 		} );
 		} );
 
 
-		it( 'should not replace both `**` with bold', () => {
+		it( 'should not replace both "**" with bold', () => {
 			setData( doc, '<paragraph>**foobar*[]</paragraph>' );
 			setData( doc, '<paragraph>**foobar*[]</paragraph>' );
 			doc.enqueueChanges( () => {
 			doc.enqueueChanges( () => {
 				batch.insert( doc.selection.getFirstPosition(), '*' );
 				batch.insert( doc.selection.getFirstPosition(), '*' );
@@ -309,7 +329,7 @@ describe( 'Autoformat', () => {
 			expect( getData( doc ) ).to.equal( '<paragraph>**foobar**[]</paragraph>' );
 			expect( getData( doc ) ).to.equal( '<paragraph>**foobar**[]</paragraph>' );
 		} );
 		} );
 
 
-		it( 'should not replace both `*` with italic', () => {
+		it( 'should not replace both "*" with italic', () => {
 			setData( doc, '<paragraph>*foobar[]</paragraph>' );
 			setData( doc, '<paragraph>*foobar[]</paragraph>' );
 			doc.enqueueChanges( () => {
 			doc.enqueueChanges( () => {
 				batch.insert( doc.selection.getFirstPosition(), '*' );
 				batch.insert( doc.selection.getFirstPosition(), '*' );
@@ -318,7 +338,16 @@ describe( 'Autoformat', () => {
 			expect( getData( doc ) ).to.equal( '<paragraph>*foobar*[]</paragraph>' );
 			expect( getData( doc ) ).to.equal( '<paragraph>*foobar*[]</paragraph>' );
 		} );
 		} );
 
 
-		it( 'should not replace `>` with block quote', () => {
+		it( 'should not replace both "`" with code', () => {
+			setData( doc, '<paragraph>`foobar[]</paragraph>' );
+			doc.enqueueChanges( () => {
+				batch.insert( doc.selection.getFirstPosition(), '`' );
+			} );
+
+			expect( getData( doc ) ).to.equal( '<paragraph>`foobar`[]</paragraph>' );
+		} );
+
+		it( 'should not replace ">" with block quote', () => {
 			setData( doc, '<paragraph>>[]</paragraph>' );
 			setData( doc, '<paragraph>>[]</paragraph>' );
 			doc.enqueueChanges( () => {
 			doc.enqueueChanges( () => {
 				batch.insert( doc.selection.getFirstPosition(), ' ' );
 				batch.insert( doc.selection.getFirstPosition(), ' ' );

+ 3 - 2
packages/ckeditor5-autoformat/tests/manual/autoformat.js

@@ -15,12 +15,13 @@ import Heading from '@ckeditor/ckeditor5-heading/src/heading';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import Undo from '@ckeditor/ckeditor5-undo/src/undo';
 import Undo from '@ckeditor/ckeditor5-undo/src/undo';
 import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
 import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
+import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
 import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
 import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
 
 
 ClassicEditor
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 	.create( document.querySelector( '#editor' ), {
-		plugins: [ Enter, Typing, Paragraph, Undo, Bold, Italic, Heading, List, Autoformat, BlockQuote ],
-		toolbar: [ 'headings', 'numberedList', 'bulletedList', 'blockQuote', 'bold', 'italic', 'undo', 'redo' ]
+		plugins: [ Enter, Typing, Paragraph, Undo, Bold, Italic, Code, Heading, List, Autoformat, BlockQuote ],
+		toolbar: [ 'headings', 'numberedList', 'bulletedList', 'blockQuote', 'bold', 'italic', 'code', 'undo', 'redo' ]
 	} )
 	} )
 	.then( editor => {
 	.then( editor => {
 		window.editor = editor;
 		window.editor = editor;

+ 3 - 1
packages/ckeditor5-autoformat/tests/manual/autoformat.md

@@ -4,7 +4,7 @@
 
 
 1. Type `*` or `-` and the press space in an empty paragraph to replace it with a list item.
 1. Type `*` or `-` and the press space in an empty paragraph to replace it with a list item.
 
 
-1. Type `> ` and press the space in an empty paragraph to replace it with a block quote.
+1. Type `>` and press the space in an empty paragraph to replace it with a block quote.
 
 
 1. Type a number from the range **1-3** to replace an empty paragraph with a numbered list item.
 1. Type a number from the range **1-3** to replace an empty paragraph with a numbered list item.
 
 
@@ -12,6 +12,8 @@
 
 
 1. Type `**foobar**`/`__foobar__` to bold `foobar`. `**`/`__` should be removed.
 1. Type `**foobar**`/`__foobar__` to bold `foobar`. `**`/`__` should be removed.
 
 
+1. Type ``` `foobar` ``` to mark as code `foobar`. ```  ` ``` should be removed.
+
 1. For every autoformat pattern: Undo until you'll see just the pattern (e.g. `- `). Typing should be then possible without triggering the autoformatting again.
 1. For every autoformat pattern: Undo until you'll see just the pattern (e.g. `- `). Typing should be then possible without triggering the autoformatting again.
 
 
 1. Typing a different pattern in an already converted block **must not** trigger the autoformatting. For example, typing `- ` in a heading should not convert a heading to a list.
 1. Typing a different pattern in an already converted block **must not** trigger the autoformatting. For example, typing `- ` in a heading should not convert a heading to a list.