Skip to content

Commit

Permalink
Merge pull request #7577 from ckeditor/i/6722-code-2SCM
Browse files Browse the repository at this point in the history
Refactor the way 2SCM support multiple attributes. Enable it for code.
  • Loading branch information
jodator authored Jul 22, 2020
2 parents 266dfda + cbb714f commit bbd0d6d
Show file tree
Hide file tree
Showing 11 changed files with 492 additions and 514 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions packages/ckeditor5-basic-styles/docs/features/basic-styles.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,18 @@ By default, each feature can upcast more than one type of the content. Here's th
| {@link module:basic-styles/subscript~Subscript} | `<sub>`, `<* style="vertical-align: sub">` |
| {@link module:basic-styles/superscript~Superscript} | `<sup>`, `<* style="vertical-align: super">` |

## Typing around inline code

CKEditor 5 allows for typing both at inner and outer boundaries of code to make the editing easier for the users.

**To type inside a code element**, move the caret to its (start or end) boundary. As long as the code remains highlighted (by default: less transparent gray), typing and applying formatting will be done within its boundaries:

{@img assets/img/typing-inside-code.gif 770 The animation showing typing inside the code element in CKEditor 5 rich text editor.}

**To type before or after a code element**, move the caret to its boundary, then press the Arrow key (<kbd>→</kbd> or <kbd>←</kbd>) once. The code is no longer highlighted and whatever text you type or formatting you apply will not be enclosed by the code element:

{@img assets/img/typing-after-code.gif 770 The animation showing typing after the code element in CKEditor 5 rich text editor.}

## Installation

To add the basic styles features to your editor install the [`@ckeditor/ckeditor5-basic-styles`](https://www.npmjs.com/package/@ckeditor/ckeditor5-basic-styles) package:
Expand Down
1 change: 1 addition & 0 deletions packages/ckeditor5-basic-styles/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
],
"dependencies": {
"@ckeditor/ckeditor5-core": "^20.0.0",
"@ckeditor/ckeditor5-typing": "^20.0.0",
"@ckeditor/ckeditor5-ui": "^20.0.0"
},
"devDependencies": {
Expand Down
16 changes: 16 additions & 0 deletions packages/ckeditor5-basic-styles/src/code/codeediting.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,11 @@

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import AttributeCommand from '../attributecommand';
import TwoStepCaretMovement from '@ckeditor/ckeditor5-typing/src/twostepcaretmovement';
import setupHighlight from '@ckeditor/ckeditor5-typing/src/utils/inlinehighlight';

const CODE = 'code';
const HIGHLIGHT_CLASS = 'ck-code_selected';

/**
* The code editing feature.
Expand All @@ -28,6 +31,13 @@ export default class CodeEditing extends Plugin {
return 'CodeEditing';
}

/**
* @inheritDoc
*/
static get requires() {
return [ TwoStepCaretMovement ];
}

/**
* @inheritDoc
*/
Expand All @@ -53,5 +63,11 @@ export default class CodeEditing extends Plugin {

// Create code command.
editor.commands.add( CODE, new AttributeCommand( editor, CODE ) );

// Enable two-step caret movement for `code` attribute.
editor.plugins.get( TwoStepCaretMovement ).registerAttribute( CODE );

// Setup highlight over selected element.
setupHighlight( editor, CODE, 'code', HIGHLIGHT_CLASS );
}
}
35 changes: 35 additions & 0 deletions packages/ckeditor5-basic-styles/tests/code/codeediting.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ import AttributeCommand from '../../src/attributecommand';

import { getData as getModelData, setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
import { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';
import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';

/* global document */

describe( 'CodeEditing', () => {
let editor, model;
Expand Down Expand Up @@ -100,4 +103,36 @@ describe( 'CodeEditing', () => {
expect( getViewData( editor.editing.view, { withoutSelection: true } ) ).to.equal( '<p><code>foo</code>bar</p>' );
} );
} );

it( 'should add `ck-code_selected` class when caret enters the element', () => {
// Put selection before the link element.
setModelData( editor.model, '<paragraph>foo[]<$text code="true">ba</$text>r</paragraph>' );

// So let's simulate the `keydown` event.
editor.editing.view.document.fire( 'keydown', {
keyCode: keyCodes.arrowright,
preventDefault: () => {},
domTarget: document.body
} );

expect( getViewData( editor.editing.view ) ).to.equal(
'<p>foo<code class="ck-code_selected">{}ba</code>r</p>'
);
} );

it( 'should remove `ck-code_selected` class when caret leaves the element', () => {
// Put selection before the link element.
setModelData( editor.model, '<paragraph>foo<$text code="true">ba[]</$text>r</paragraph>' );

// So let's simulate the `keydown` event.
editor.editing.view.document.fire( 'keydown', {
keyCode: keyCodes.arrowright,
preventDefault: () => {},
domTarget: document.body
} );

expect( getViewData( editor.editing.view ) ).to.equal(
'<p>foo<code>ba</code>{}r</p>'
);
} );
} );
4 changes: 4 additions & 0 deletions packages/ckeditor5-basic-styles/theme/code.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,7 @@
padding: .15em;
border-radius: 2px;
}

.ck .ck-code_selected {
background-color: hsla(0, 0%, 78%, 0.5);
}
Loading

0 comments on commit bbd0d6d

Please sign in to comment.