Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Commit

Permalink
Merge pull request #78 from ckeditor/t/ckeditor5/436
Browse files Browse the repository at this point in the history
Feature: Enabled code block autoformatting with the `` ``` `` sequence. Closes ckeditor/ckeditor5#5672.
  • Loading branch information
jodator authored Nov 26, 2019
2 parents 9543ea7 + b76a53c commit fb2d1b5
Show file tree
Hide file tree
Showing 7 changed files with 85 additions and 3 deletions.
5 changes: 4 additions & 1 deletion docs/_snippets/features/autoformat.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,12 @@

import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';

ClassicEditor
.create( document.querySelector( '#snippet-autoformat' ), {
plugins: ClassicEditor.builtinPlugins.concat( [ Code ] ),
plugins: ClassicEditor.builtinPlugins.concat( [ Code, CodeBlock ] ),
toolbar: {
items: [
'heading',
Expand All @@ -27,6 +28,8 @@ ClassicEditor
'indent',
'|',
'blockQuote',
'codeBlock',
'|',
'undo',
'redo'
],
Expand Down
1 change: 1 addition & 0 deletions docs/features/autoformat.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ The following block formatting options are available:
* Numbered list – Start a line with `1.` or `1)` followed by a space.
* Headings – Start a line with `#` or `##` or `###` followed by a space to create a heading 1, heading 2 or heading 3 (up to heading 6 if {@link module:heading/heading~HeadingConfig#options} defines more headings).
* Block quote – Start a line with `>` followed by a space.
* Code block – Start a line with `` ``` ``.

## Inline formatting

Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"devDependencies": {
"@ckeditor/ckeditor5-basic-styles": "^15.0.0",
"@ckeditor/ckeditor5-block-quote": "^15.0.0",
"@ckeditor/ckeditor5-code-block": "^0.0.1",
"@ckeditor/ckeditor5-editor-classic": "^15.0.0",
"@ckeditor/ckeditor5-engine": "^15.0.0",
"@ckeditor/ckeditor5-enter": "^15.0.0",
Expand Down
16 changes: 16 additions & 0 deletions src/autoformat.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export default class Autoformat extends Plugin {
this._addBasicStylesAutoformats();
this._addHeadingAutoformats();
this._addBlockQuoteAutoformats();
this._addCodeBlockAutoformats();
}

/**
Expand Down Expand Up @@ -152,6 +153,21 @@ export default class Autoformat extends Plugin {
new BlockAutoformatEditing( this.editor, /^>\s$/, 'blockQuote' );
}
}

/**
* Adds autoformatting related to {@link module:code-block/codeblock~CodeBlock}.
*
* When typed:
* - `` ``` `` – A paragraph will be changed to a code block.
*
* @private
*/
_addCodeBlockAutoformats() {
if ( this.editor.commands.get( 'codeBlock' ) ) {
// eslint-disable-next-line no-new
new BlockAutoformatEditing( this.editor, /^```$/, 'codeBlock' );
}
}
}

// Helper function for getting `InlineAutoformatEditing` callbacks that checks if command is enabled.
Expand Down
58 changes: 58 additions & 0 deletions tests/autoformat.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import BoldEditing from '@ckeditor/ckeditor5-basic-styles/src/bold/boldediting';
import CodeEditing from '@ckeditor/ckeditor5-basic-styles/src/code/codeediting';
import ItalicEditing from '@ckeditor/ckeditor5-basic-styles/src/italic/italicediting';
import BlockQuoteEditing from '@ckeditor/ckeditor5-block-quote/src/blockquoteediting';
import CodeBlockEditing from '@ckeditor/ckeditor5-code-block/src/codeblockediting';
import Enter from '@ckeditor/ckeditor5-enter/src/enter';
import ShiftEnter from '@ckeditor/ckeditor5-enter/src/shiftenter';

Expand Down Expand Up @@ -40,6 +41,7 @@ describe( 'Autoformat', () => {
ItalicEditing,
CodeEditing,
BlockQuoteEditing,
CodeBlockEditing,
ShiftEnter
]
} )
Expand Down Expand Up @@ -288,6 +290,53 @@ describe( 'Autoformat', () => {
} );
} );

describe( 'Code block', () => {
it( 'should replace triple grave accents with a code block', () => {
setData( model, '<paragraph>``[]</paragraph>' );
model.change( writer => {
writer.insertText( '`', doc.selection.getFirstPosition() );
} );

expect( getData( model ) ).to.equal( '<codeBlock language="plaintext">[]</codeBlock>' );
} );

it( 'should not replace triple grave accents when already in a code block', () => {
setData( model, '<codeBlock language="plaintext">``[]</codeBlock>' );
model.change( writer => {
writer.insertText( '`', doc.selection.getFirstPosition() );
} );

expect( getData( model ) ).to.equal( '<codeBlock language="plaintext">```[]</codeBlock>' );
} );

it( 'should not replace triple grave accents when inside heading', () => {
setData( model, '<heading1>``[]</heading1>' );
model.change( writer => {
writer.insertText( '`', doc.selection.getFirstPosition() );
} );

expect( getData( model ) ).to.equal( '<heading1>```[]</heading1>' );
} );

it( 'should not replace triple grave accents when inside numbered list', () => {
setData( model, '<listItem listIndent="0" listType="numbered">1. ``[]</listItem>' );
model.change( writer => {
writer.insertText( '`', doc.selection.getFirstPosition() );
} );

expect( getData( model ) ).to.equal( '<listItem listIndent="0" listType="numbered">1. ```[]</listItem>' );
} );

it( 'should not replace triple grave accents when inside buletted list', () => {
setData( model, '<listItem listIndent="0" listType="bulleted">1. ``[]</listItem>' );
model.change( writer => {
writer.insertText( '`', doc.selection.getFirstPosition() );
} );

expect( getData( model ) ).to.equal( '<listItem listIndent="0" listType="bulleted">1. ```[]</listItem>' );
} );
} );

describe( 'Inline autoformat', () => {
it( 'should replace both "**" with bold', () => {
setData( model, '<paragraph>**foobar*[]</paragraph>' );
Expand Down Expand Up @@ -454,6 +503,15 @@ describe( 'Autoformat', () => {
expect( getData( model ) ).to.equal( '<paragraph>> []</paragraph>' );
} );

it( 'should not replace "```" with code block', () => {
setData( model, '<paragraph>``[]</paragraph>' );
model.change( writer => {
writer.insertText( '`', doc.selection.getFirstPosition() );
} );

expect( getData( model ) ).to.equal( '<paragraph>```[]</paragraph>' );
} );

it( 'should use only configured headings', () => {
return VirtualTestEditor
.create( {
Expand Down
5 changes: 3 additions & 2 deletions tests/manual/autoformat.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,13 @@ import Undo from '@ckeditor/ckeditor5-undo/src/undo';
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 CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
import ShiftEnter from '@ckeditor/ckeditor5-enter/src/shiftenter';

ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Enter, Typing, Paragraph, Undo, Bold, Italic, Code, Heading, List, Autoformat, BlockQuote, ShiftEnter ],
toolbar: [ 'heading', '|', 'numberedList', 'bulletedList', 'blockQuote', 'bold', 'italic', 'code', 'undo', 'redo' ]
plugins: [ Enter, Typing, Paragraph, Undo, Bold, Italic, Code, Heading, List, Autoformat, BlockQuote, CodeBlock, ShiftEnter ],
toolbar: [ 'heading', '|', 'numberedList', 'bulletedList', 'blockQuote', 'codeBlock', 'bold', 'italic', 'code', 'undo', 'redo' ]
} )
.then( editor => {
window.editor = editor;
Expand Down
2 changes: 2 additions & 0 deletions tests/manual/autoformat.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@

1. Type ``` `foobar` ``` to mark as code `foobar`. ``` ` ``` should be removed.

1. Type `` ``` `` in a new line to create an empty code block. `` ``` `` 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. 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.
Expand Down

0 comments on commit fb2d1b5

Please sign in to comment.