-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
/
codeblock.js
171 lines (161 loc) · 6.22 KB
/
codeblock.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
/**
* @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
/**
* @module code-block/codeblock
*/
import { Plugin } from 'ckeditor5/src/core';
import CodeBlockEditing from './codeblockediting';
import CodeBlockUI from './codeblockui';
/**
* The code block plugin.
*
* For more information about this feature check the {@glink api/code-block package page} and the
* {@glink features/code-blocks code block feature guide}.
*
* This is a "glue" plugin that loads the {@link module:code-block/codeblockediting~CodeBlockEditing code block editing feature}
* and the {@link module:code-block/codeblockui~CodeBlockUI code block UI feature}.
*
* @extends module:core/plugin~Plugin
*/
export default class CodeBlock extends Plugin {
/**
* @inheritDoc
*/
static get requires() {
return [ CodeBlockEditing, CodeBlockUI ];
}
/**
* @inheritDoc
*/
static get pluginName() {
return 'CodeBlock';
}
}
/**
* The configuration of the {@link module:code-block/codeblock~CodeBlock} feature.
*
* Read more in {@link module:code-block/codeblock~CodeBlockConfig}.
*
* @member {module:code-block/codeblock~CodeBlockConfig} module:core/editor/editorconfig~EditorConfig#codeBlock
*/
/**
* The configuration of the {@link module:code-block/codeblock~CodeBlock code block feature}.
*
* ClassicEditor
* .create( editorElement, {
* codeBlock: ... // The code block feature configuration.
* } )
* .then( ... )
* .catch( ... );
*
* See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
*
* @interface CodeBlockConfig
*/
/**
* The code block language descriptor. See {@link module:code-block/codeblock~CodeBlockConfig#languages} to learn more.
*
* {
* language: 'javascript',
* label: 'JavaScript'
* }
*
* @typedef {Object} module:code-block/codeblock~CodeBlockLanguageDefinition
* @property {String} language The name of the language that will be stored in the model attribute. Also, when `class`
* is not specified, it will be used to create the CSS class associated with the language (prefixed by "language-").
* @property {String} label The human–readable label associated with the language and displayed in the UI.
* @property {String} [class] The CSS class associated with the language. When not specified the `language`
* property is used to create a class prefixed by "language-".
*/
/**
* The list of code languages available in the user interface to choose for a particular code block.
*
* The language of the code block is represented as a CSS class (by default prefixed by "language-") set on the
* `<code>` element, both when editing and in the editor data. The CSS class associated with the language
* can be used by third–party code syntax highlighters to detect and apply the correct highlighting.
*
* For instance, this language configuration:
*
* ClassicEditor
* .create( document.querySelector( '#editor' ), {
* codeBlock: {
* languages: [
* // ...
* { language: 'javascript', label: 'JavaScript' },
* // ...
* ]
* }
* } )
* .then( ... )
* .catch( ... );
*
* will result in the following structure of JavaScript code blocks in the editor editing and data:
*
* <pre><code class="language-javascript">window.alert( 'Hello world!' )</code></pre>
*
* You can customize the CSS class by specifying an optional `class` property in the language definition.
* You can set **multiple classes** but **only the first one** will be used as defining language class:
*
* ClassicEditor
* .create( document.querySelector( '#editor' ), {
* codeBlock: {
* languages: [
* // Do not render the CSS class for the plain text code blocks.
* { language: 'plaintext', label: 'Plain text', class: '' },
*
* // Use the "php-code" class for PHP code blocks.
* { language: 'php', label: 'PHP', class: 'php-code' },
*
* // Use the "js" class for JavaScript code blocks.
* // Note that only the first ("js") class will determine the language of the block when loading data.
* { language: 'javascript', label: 'JavaScript', class: 'js javascript js-code' },
*
* // Python code blocks will have the default "language-python" CSS class.
* { language: 'python', label: 'Python' }
* ]
* }
* } )
* .then( ... )
* .catch( ... );
*
* The default value of the language configuration is as follows:
*
* languages: [
* { language: 'plaintext', label: 'Plain text' }, // The default language.
* { language: 'c', label: 'C' },
* { language: 'cs', label: 'C#' },
* { language: 'cpp', label: 'C++' },
* { language: 'css', label: 'CSS' },
* { language: 'diff', label: 'Diff' },
* { language: 'html', label: 'HTML' },
* { language: 'java', label: 'Java' },
* { language: 'javascript', label: 'JavaScript' },
* { language: 'php', label: 'PHP' },
* { language: 'python', label: 'Python' },
* { language: 'ruby', label: 'Ruby' },
* { language: 'typescript', label: 'TypeScript' },
* { language: 'xml', label: 'XML' }
* ]
*
* **Note**: The first language defined in the configuration is considered the default one. This means it will be
* applied to code blocks loaded from the data that have no CSS `class` specified (or no matching `class` in the configuration).
* It will also be used when creating new code blocks using the main UI button. By default it is "Plain text".
*
* @member {Array.<module:code-block/codeblock~CodeBlockLanguageDefinition>} module:code-block/codeblock~CodeBlockConfig#languages
*/
/**
* A sequence of characters inserted or removed from the code block lines when its indentation
* is changed by the user, for instance, using <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> keys.
*
* The default value is a single tab character (" ", `\u0009` in Unicode).
*
* This configuration is used by `indentCodeBlock` and `outdentCodeBlock` commands (instances of
* {@link module:code-block/indentcodeblockcommand~IndentCodeBlockCommand}).
*
* **Note**: Setting this configuration to `false` will disable the code block indentation commands
* and associated keystrokes.
*
* @member {String} module:code-block/codeblock~CodeBlockConfig#indentSequence
*/