@webcoder49/code-input 2.2.1 → 2.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/README.md +10 -4
  2. package/code-input.css +92 -19
  3. package/code-input.d.ts +94 -13
  4. package/code-input.js +114 -40
  5. package/code-input.min.css +1 -1
  6. package/code-input.min.js +1 -1
  7. package/package.json +1 -1
  8. package/plugins/README.md +7 -0
  9. package/plugins/auto-close-brackets.js +23 -7
  10. package/plugins/auto-close-brackets.min.js +1 -1
  11. package/plugins/autocomplete.js +4 -2
  12. package/plugins/autocomplete.min.js +1 -1
  13. package/plugins/find-and-replace.js +142 -42
  14. package/plugins/find-and-replace.min.js +1 -1
  15. package/plugins/go-to-line.js +24 -2
  16. package/plugins/go-to-line.min.js +1 -1
  17. package/plugins/indent.js +121 -7
  18. package/plugins/indent.min.js +1 -1
  19. package/plugins/prism-line-numbers.css +10 -9
  20. package/plugins/prism-line-numbers.min.css +1 -1
  21. package/plugins/select-token-callbacks.js +289 -0
  22. package/plugins/select-token-callbacks.min.js +1 -0
  23. package/plugins/special-chars.css +1 -1
  24. package/plugins/special-chars.js +10 -8
  25. package/plugins/special-chars.min.css +1 -1
  26. package/plugins/special-chars.min.js +1 -1
  27. package/tests/hljs.html +2 -1
  28. package/tests/i18n.html +197 -0
  29. package/tests/prism-match-braces-compatibility.js +215 -0
  30. package/tests/prism-match-braces-compatibility.min.js +1 -0
  31. package/tests/prism.html +7 -8
  32. package/tests/tester.js +90 -19
  33. package/tests/tester.min.js +7 -4
package/README.md CHANGED
@@ -15,7 +15,7 @@
15
15
  ---
16
16
 
17
17
  ## What does it do?
18
- **`code-input`** lets you **turn any ordinary JavaScript syntax-highlighting theme and program into customisable syntax-highlighted textareas** using an HTML custom element. It uses vanilla CSS to superimpose a `textarea` on a `pre code` block, then handles indentations, scrolling and fixes any resulting bugs with JavaScript. To see how it works in more detail, please see [this CSS-Tricks article](https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code/ "Creating an Editable Textarea That Supports Syntax-Highlighted Code") I wrote.
18
+ **`code-input`** lets you **turn any ordinary JavaScript syntax-highlighting theme and program into customisable syntax-highlighted textareas** using an HTML custom element. It uses vanilla CSS to superimpose a `textarea` on a `pre code` block, then handles indentations, scrolling and fixes any resulting bugs with JavaScript. To see how it works behind the scenes (not how to use this library), please see [this CSS-Tricks article](https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code/ "Creating an Editable Textarea That Supports Syntax-Highlighted Code") I wrote.
19
19
 
20
20
  ## What are the advantages of using code-input, and what can it be used for?
21
21
  Unlike other front-end code-editor projects, the simplicity of how `code-input` works means it is **highly customisable**. As it is not a full-featured editor, you can **choose what features you want it to include, and use your favourite syntax-highlighting algorithms and themes**.
@@ -28,6 +28,8 @@ The `<code-input>` element works like a `<textarea>` and therefore **works in HT
28
28
 
29
29
  ## [`code-input` also supports TypeScript (click)](https://github.com/WebCoder49/code-input-for-typescript)
30
30
 
31
+ **You can follow the instructions below, or use the starter code available [here for highlight.js](https://codepen.io/WebCoder49/pen/vYMpMoJ?editors=1100) and [here for Prism.js](https://codepen.io/WebCoder49/pen/ExzNRyb?editors=1100).**
32
+
31
33
  `code-input` is designed to be **both easy to use and customisable**. Here's how to use it to create syntax-highlighted textareas:
32
34
 
33
35
  ### 1. Import `code-input`
@@ -52,8 +54,8 @@ From JSDelivr CDN (click)
52
54
 
53
55
  ```html
54
56
  <!--In the <head>-->
55
- <script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.0/code-input.min.js"></script>
56
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.0/code-input.min.css">
57
+ <script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.5/code-input.min.js"></script>
58
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.5/code-input.min.css">
57
59
  ```
58
60
  </details>
59
61
 
@@ -115,10 +117,12 @@ The next step is to set up a `template` to link `code-input` to your syntax-high
115
117
  </script>
116
118
  ```
117
119
 
120
+ > ⚠️ Unfortunately placing multiple plugins of the same type in a template can currently cause errors and undefined behaviour, even if such a configuration makes logical sense. [This is issue #118](https://github.com/WebCoder49/code-input/issues/118) and will be fixed as soon as possible - if you'd like to help and have the time you're welcome, but it's also at the top of the maintainer's To-Do list.
121
+
118
122
  To see a full list of plugins and their functions, please see [plugins/README.md](./plugins/README.md).
119
123
 
120
124
  ### 4. Using the component
121
- Now that you have registered a template, you can use the custom `<code-input>` element in HTML. If you have more than one template registered, you need to add the template name as the `template` attribute. With the element, using the `language` attribute will add a `language-{value}` class to the `pre code` block. You can now use HTML attributes and events to make your element as simple or interactive as you like!
125
+ Now that you have registered a template, you can use the custom `<code-input>` element in HTML. If you have more than one template registered, you need to add the template name as the `template` attribute. With the element, using the `language` attribute will add a `language-{value}` class to the `pre code` block. You can now use HTML attributes and events, as well as CSS styles, to make your element as simple or interactive as you like, as if it were a `textarea` element!
122
126
  ```HTML
123
127
  <code-input language="HTML"></code-input>
124
128
  ```
@@ -127,6 +131,8 @@ Now that you have registered a template, you can use the custom `<code-input>` e
127
131
  <code-input language="HTML" placeholder="Type code here" template="syntax-highlighted" onchange="console.log('Your code is', this.value)">&lt; href='https://github.com/WebCoder49/code-input'>code-input&lt;/a></code-input>
128
132
  ```
129
133
 
134
+ > ⚠️ At the moment, you need to set the `--padding` property rather than `padding` for a `code-input` element's CSS. All other properties should work as normal.
135
+
130
136
  ## Contributing
131
137
  If you have any features you would like to add to `code-input` as plugins or core functionality, or have found any bugs, please [open an issue](https://github.com/WebCoder49/code-input/issues) or [fork and submit a pull request](https://github.com/WebCoder49/code-input/fork)! All contributions to this open-source project will be greatly appreciated. You can see [more info in our `CONTRIBUTING.md` file](CONTRIBUTING.md).
132
138
 
package/code-input.css CHANGED
@@ -30,10 +30,7 @@ code-input {
30
30
 
31
31
 
32
32
  code-input:not(.code-input_loaded) {
33
- margin: 0px!important;
34
- margin-bottom: calc(-1 * var(--padding, 16px))!important;
35
33
  padding: var(--padding, 16px)!important;
36
- border: 0;
37
34
  }
38
35
 
39
36
  code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, code-input.code-input_pre-element-styled pre {
@@ -41,14 +38,16 @@ code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, co
41
38
  margin: 0px!important;
42
39
  padding: var(--padding, 16px)!important;
43
40
  border: 0;
44
- min-width: calc(100% - var(--padding, 16px) * 2);
45
- min-height: calc(100% - var(--padding, 16px) * 2);
41
+ min-width: calc(100% - var(--padding) * 2);
42
+ min-height: calc(100% - var(--padding) * 2);
43
+ box-sizing: content-box; /* Make height, width work consistently no matter the box-sizing of ancestors; dialogs can be styled as wanted so are excluded. */
46
44
  overflow: hidden;
47
45
  resize: none;
48
46
  grid-row: 1;
49
47
  grid-column: 1;
50
48
  display: block;
51
49
  }
50
+
52
51
  code-input:not(.code-input_pre-element-styled) pre code, code-input.code-input_pre-element-styled pre {
53
52
  height: max-content;
54
53
  width: max-content;
@@ -68,8 +67,23 @@ code-input textarea, code-input pre, code-input pre * {
68
67
  font-family: inherit!important;
69
68
  line-height: inherit!important;
70
69
  tab-size: inherit!important;
70
+ text-align: inherit!important;
71
71
  }
72
72
 
73
+ /* Make changing the text direction propogate */
74
+ code-input textarea[dir=auto] + pre {
75
+ unicode-bidi: plaintext;
76
+ }
77
+
78
+ code-input textarea[dir=ltr] + pre {
79
+ direction: ltr;
80
+ }
81
+
82
+ code-input textarea[dir=rtl] + pre {
83
+ direction: rtl;
84
+ }
85
+
86
+
73
87
  code-input textarea, code-input pre {
74
88
  /* In the same place */
75
89
  grid-column: 1;
@@ -85,13 +99,6 @@ code-input pre {
85
99
  z-index: 0;
86
100
  }
87
101
 
88
- code-input:not(.code-input_loaded) pre, code-input:not(.code-input_loaded) textarea {
89
- opacity: 0;
90
- }
91
- code-input:not(.code-input_loaded)::before {
92
- color: #ccc;
93
- }
94
-
95
102
  /* Make textarea almost completely transparent, except for caret and placeholder */
96
103
 
97
104
  code-input textarea {
@@ -111,21 +118,43 @@ code-input textarea, code-input pre {
111
118
  word-wrap: normal;
112
119
  }
113
120
 
114
- /* No resize on textarea; stop outline */
121
+ /* No resize on textarea; transfer outline on focus to code-input element */
115
122
  code-input textarea {
116
123
  resize: none;
117
124
  outline: none!important;
118
125
  }
126
+ code-input:has(textarea:focus):not(.code-input_mouse-focused) {
127
+ outline: 2px solid black;
128
+ }
119
129
 
120
- code-input:not(.code-input_registered)::before {
130
+ /* Before registering give a hint about how to register. */
131
+ code-input:not(.code-input_registered) {
132
+ overflow: hidden;
133
+ display: block;
134
+ box-sizing: border-box; /* Include padding in width/height */
135
+ }
136
+
137
+ code-input:not(.code-input_registered)::after {
121
138
  /* Display message to register */
122
139
  content: "Use codeInput.registerTemplate to set up.";
123
140
  display: block;
124
- color: grey;
141
+ position: absolute;
142
+ bottom: var(--padding);
143
+ left: var(--padding);
144
+ width: calc(100% - 2 * var(--padding));
145
+
146
+ border-top: 1px solid grey;
147
+ outline: var(--padding) solid white;
148
+ background-color: white;
149
+ }
150
+
151
+ code-input:not(.code-input_loaded) pre, code-input:not(.code-input_loaded) textarea {
152
+ opacity: 0;
125
153
  }
126
154
 
127
155
  /* Contains dialog boxes that might appear as the result of a plugin.
128
156
  Sticks to the top of the code-input element */
157
+
129
158
  code-input .code-input_dialog-container {
130
159
  z-index: 2;
131
160
 
@@ -133,11 +162,55 @@ code-input .code-input_dialog-container {
133
162
  grid-row: 1;
134
163
  grid-column: 1;
135
164
 
136
- top: 0px;
165
+ top: 0;
137
166
  left: 0;
167
+
168
+ margin: 0;
169
+ padding: 0;
138
170
  width: 100%;
139
171
  height: 0;
140
172
 
141
- /* Dialog boxes' text is left-aligned */
142
- text-align: left;
143
- }
173
+ /* Dialog boxes' text is based on text-direction */
174
+ text-align: inherit;
175
+ }
176
+ [dir=rtl] code-input .code-input_dialog-container, code-input[dir=rtl] .code-input_dialog-container {
177
+ left: unset;
178
+ right: 0;
179
+ }
180
+
181
+ /* Instructions specific to keyboard navigation set by plugins that override Tab functionality. */
182
+ code-input .code-input_dialog-container .code-input_keyboard-navigation-instructions {
183
+ top: 0;
184
+ left: 0;
185
+
186
+ display: block;
187
+ position: absolute;
188
+ background-color: black;
189
+ color: white;
190
+ padding: 2px;
191
+ padding-left: 10px;
192
+ margin: 0;
193
+ text-wrap: balance;
194
+ overflow: hidden;
195
+ text-overflow: ellipsis;
196
+ width: calc(100% - 12px);
197
+ max-height: 3em;
198
+ }
199
+ code-input:has(pre[dir=rtl]) .code-input_dialog-container .code-input_keyboard-navigation-instructions {
200
+ left: unset;
201
+ right: 0;
202
+ }
203
+
204
+ code-input:not(:has(textarea:focus)) .code-input_dialog-container .code-input_keyboard-navigation-instructions,
205
+ code-input.code-input_mouse-focused .code-input_dialog-container .code-input_keyboard-navigation-instructions,
206
+ code-input .code-input_dialog-container .code-input_keyboard-navigation-instructions:empty {
207
+ /* When not keyboard-focused / no instructions don't show instructions */
208
+ display: none;
209
+ }
210
+
211
+ /* Things with padding when instructions are present */
212
+ code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused) textarea,
213
+ code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused):not(.code-input_pre-element-styled) pre code,
214
+ code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused).code-input_pre-element-styled pre {
215
+ padding-top: calc(var(--padding) + 3em)!important;
216
+ }
package/code-input.d.ts CHANGED
@@ -96,7 +96,7 @@ export namespace plugins {
96
96
  class Autocomplete extends Plugin {
97
97
  /**
98
98
  * Pass in a function to create a plugin that displays the popup that takes in (popup element, textarea, textarea.selectionEnd).
99
- * @param {function} updatePopupCallback a function to display the popup that takes in (popup element, textarea, textarea.selectionEnd).
99
+ * @param {(popupElement: HTMLElement, textarea: HTMLTextAreaElement, selectionEnd: number) => void} updatePopupCallback a function to display the popup that takes in (popup element, textarea, textarea.selectionEnd).
100
100
  */
101
101
  constructor(updatePopupCallback: (popupElem: HTMLElement, textarea: HTMLTextAreaElement, selectionEnd: number) => void);
102
102
  }
@@ -132,14 +132,36 @@ export namespace plugins {
132
132
  * Create a find-and-replace command plugin to pass into a template
133
133
  * @param {boolean} useCtrlF Should Ctrl+F be overriden for find-and-replace find functionality? If not, you can trigger it yourself using (instance of this plugin)`.showPrompt(code-input element, false)`.
134
134
  * @param {boolean} useCtrlH Should Ctrl+H be overriden for find-and-replace replace functionality? If not, you can trigger it yourself using (instance of this plugin)`.showPrompt(code-input element, true)`.
135
+ * @param {Object} instructionTranslations: user interface string keys mapped to translated versions for localisation. Look at the find-and-replace.js source code for the English text.
135
136
  */
136
- constructor(useCtrlF?: boolean, useCtrlH?: boolean);
137
+ constructor(useCtrlF?: boolean, useCtrlH?: boolean,
138
+ instructionTranslations?: {
139
+ start?: string;
140
+ none?: string;
141
+ oneFound?: string;
142
+ matchIndex?: (index: Number, count: Number) => string;
143
+ error?: (message: string) => string;
144
+ infiniteLoopError?: string;
145
+ closeDialog?: string;
146
+ findPlaceholder?: string;
147
+ findCaseSensitive?: string;
148
+ findRegExp?: string;
149
+ replaceTitle?: string;
150
+ replacePlaceholder?: string;
151
+ findNext?: string;
152
+ findPrevious?: string;
153
+ replaceActionShort?: string;
154
+ replaceAction?: string;
155
+ replaceAllActionShort?: string;
156
+ replaceAllAction?: string
157
+ }
158
+ );
137
159
  /**
138
160
  * Show a find-and-replace dialog.
139
161
  * @param {codeInput.CodeInput} codeInputElement the `<code-input>` element.
140
162
  * @param {boolean} replacePartExpanded whether the replace part of the find-and-replace dialog should be expanded
141
163
  */
142
- showPrompt(codeInput: CodeInput, replacePartExpanded: boolean): void;
164
+ showPrompt(codeInputElement: CodeInput, replacePartExpanded: boolean): void;
143
165
  }
144
166
 
145
167
  /**
@@ -150,8 +172,13 @@ export namespace plugins {
150
172
  /**
151
173
  * Create a go-to-line command plugin to pass into a template
152
174
  * @param {boolean} useCtrlG Should Ctrl+G be overriden for go-to-line functionality? If not, you can trigger it yourself using (instance of this plugin)`.showPrompt(code-input element)`.
175
+ * @param {Object} instructionTranslations: user interface string keys mapped to translated versions for localisation. Look at the go-to-line.js source code for the English text.
153
176
  */
154
- constructor(useCtrlG: boolean);
177
+ constructor(useCtrlG: boolean,
178
+ instructionTranslations?: {
179
+ closeDialog?: string;
180
+ input?: string;
181
+ });
155
182
  /**
156
183
  * Show a search-like dialog prompting line number.
157
184
  * @param {codeInput.CodeInput} codeInput the `<code-input>` element.
@@ -167,11 +194,65 @@ export namespace plugins {
167
194
  class Indent extends Plugin {
168
195
  /**
169
196
  * Create an indentation plugin to pass into a template
170
- * @param {Boolean} defaultSpaces Should the Tab key enter spaces rather than tabs? Defaults to false.
197
+ * @param {boolean} defaultSpaces Should the Tab key enter spaces rather than tabs? Defaults to false.
171
198
  * @param {Number} numSpaces How many spaces is each tab character worth? Defaults to 4.
172
199
  * @param {Object} bracketPairs Opening brackets mapped to closing brackets, default and example {"(": ")", "[": "]", "{": "}"}. All brackets must only be one character, and this can be left as null to remove bracket-based indentation behaviour.
200
+ * @param {boolean} escTabToChangeFocus Whether pressing the Escape key before (Shift+)Tab should make this keypress focus on a different element (Tab's default behaviour). You should always either enable this or use this plugin's disableTabIndentation and enableTabIndentation methods linked to other keyboard shortcuts, for accessibility.
201
+ * @param {Object} instructionTranslations: user interface string keys mapped to translated versions for localisation. Look at the go-to-line.js source code for the English text.
173
202
  */
174
- constructor(defaultSpaces?: boolean, numSpaces?: Number, bracketPairs?: Object);
203
+ constructor(defaultSpaces?: boolean, numSpaces?: Number, bracketPairs?: Object, escTabToChangeFocus?: boolean, instructionTranslations?: {
204
+ tabForIndentation?: string;
205
+ tabForNavigation?: string;
206
+ });
207
+ }
208
+
209
+ /**
210
+ * Make tokens in the <pre><code> element that are included within the selected text of the <code-input>
211
+ * gain a CSS class while selected, or trigger JavaScript callbacks.
212
+ * Files: select-token-callbacks.js
213
+ */
214
+ class SelectTokenCallbacks extends Plugin {
215
+ /**
216
+ * Set up the behaviour of tokens text-selected in the `<code-input>` element, and the exact definition of a token being text-selected.
217
+ *
218
+ * All parameters are optional. If you provide no arguments to the constructor, this will dynamically apply the "code-input_select-token-callbacks_selected" class to selected tokens only, for you to style via CSS.
219
+ *
220
+ * @param {codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks} tokenSelectorCallbacks What to do with text-selected tokens. See docstrings for the TokenSelectorCallbacks class.
221
+ * @param {boolean} onlyCaretNotSelection If true, tokens will only be marked as selected when no text is selected but rather the caret is inside them (start of selection == end of selection). Default false.
222
+ * @param {boolean} caretAtStartIsSelected Whether the caret or text selection's end being just before the first character of a token means said token is selected. Default true.
223
+ * @param {boolean} caretAtEndIsSelected Whether the caret or text selection's start being just after the last character of a token means said token is selected. Default true.
224
+ * @param {boolean} createSubTokens Whether temporary `<span>` elements should be created inside partially-selected tokens containing just the selected text and given the selected class. Default false.
225
+ * @param {boolean} partiallySelectedTokensAreSelected Whether tokens for which only some of their text is selected should be treated as selected. Default true.
226
+ * @param {boolean} parentTokensAreSelected Whether all parent tokens of selected tokens should be treated as selected. Default true.
227
+ */
228
+ constructor(tokenSelectorCallbacks?: codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks, onlyCaretNotSelection?: boolean, caretAtStartIsSelected?: boolean, caretAtEndIsSelected?: boolean, createSubTokens?: boolean, partiallySelectedTokensAreSelected?: boolean, parentTokensAreSelected?: boolean);
229
+ }
230
+
231
+ namespace SelectTokenCallbacks {
232
+ /**
233
+ * A data structure specifying what should be done with tokens when they are selected, and also allows for previously selected
234
+ * tokens to be dealt with each time the selection changes. See the constructor and the createClassSynchronisation static method.
235
+ */
236
+ class TokenSelectorCallbacks {
237
+ /**
238
+ * Pass any callbacks you want to customise the behaviour of selected tokens via JavaScript.
239
+ *
240
+ * (If the behaviour you want is just differently styling selected tokens _via CSS_, you should probably use the createClassSynchronisation static method.)
241
+ * @param {(token: HTMLElement) => void} tokenSelectedCallback Runs multiple times when the text selection inside the code-input changes, each time inputting a single (part of the highlighted `<pre><code>`) token element that is selected in the new text selection.
242
+ * @param {(tokenContainer: HTMLElement) => void} selectChangedCallback Each time the text selection inside the code-input changes, runs once before any tokenSelectedCallback calls, inputting the highlighted `<pre><code>`'s `<code>` element that contains all token elements.
243
+ */
244
+ constructor(tokenSelectedCallback: (token: HTMLElement) => void, selectChangedCallback: (tokenContainer: HTMLElement) => void);
245
+
246
+ /**
247
+ * Use preset callbacks which ensure all tokens in the selected text range in the `<code-input>`, and only such tokens, are given a certain CSS class.
248
+ *
249
+ * (If the behaviour you want requires more complex behaviour or JavaScript, you should use TokenSelectorCallbacks' constructor.)
250
+ *
251
+ * @param {string} selectedClass The CSS class that will be present on tokens only when they are part of the selected text in the `<code-input>` element. Defaults to "code-input_select-token-callbacks_selected".
252
+ * @returns {TokenSelectorCallbacks} A new TokenSelectorCallbacks instance that encodes this behaviour.
253
+ */
254
+ static createClassSynchronisation(selectedClass: string): codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks;
255
+ }
175
256
  }
176
257
 
177
258
  /**
@@ -183,7 +264,7 @@ export namespace plugins {
183
264
  * Create a special characters plugin instance.
184
265
  * Default = covers many non-renderable ASCII characters.
185
266
  * @param {Boolean} colorInSpecialChars Whether or not to give special characters custom background colors based on their hex code
186
- * @param {Boolean} inheritTextColor If `colorInSpecialChars` is false, forces the color of the hex code to inherit from syntax highlighting. Otherwise, the base color of the `pre code` element is used to give contrast to the small characters.
267
+ * @param {Boolean} inheritTextColor If `inheritTextColor` is false, forces the color of the hex code to inherit from syntax highlighting. Otherwise, the base color of the `pre code` element is used to give contrast to the small characters.
187
268
  * @param {RegExp} specialCharRegExp The regular expression which matches special characters
188
269
  */
189
270
  constructor(colorInSpecialChars?: boolean, inheritTextColor?: boolean, specialCharRegExp?: RegExp);
@@ -210,7 +291,7 @@ export class Template {
210
291
  *
211
292
  * Constructor to create a custom template instance. Pass this into `codeInput.registerTemplate` to use it.
212
293
  * I would strongly recommend using the built-in simpler template `codeInput.templates.prism` or `codeInput.templates.hljs`.
213
- * @param {Function} highlight - a callback to highlight the code, that takes an HTML `<code>` element inside a `<pre>` element as a parameter
294
+ * @param {(codeElement: HTMLElement) => void} highlight - a callback to highlight the code, that takes an HTML `<code>` element inside a `<pre>` element as a parameter
214
295
  * @param {boolean} preElementStyled - is the `<pre>` element CSS-styled as well as the `<code>` element? If true, `<pre>` element's scrolling is synchronised; if false, `<code>` element's scrolling is synchronised.
215
296
  * @param {boolean} isCode - is this for writing code? If true, the code-input's lang HTML attribute can be used, and the `<code>` element will be given the class name 'language-[lang attribute's value]'.
216
297
  * @param {false} includeCodeInputInHighlightFunc - Setting this to true passes the `<code-input>` element as a second argument to the highlight function.
@@ -218,13 +299,13 @@ export class Template {
218
299
  * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.Plugin`
219
300
  * @returns template object
220
301
  */
221
- constructor(highlight?: (code: HTMLElement) => void, preElementStyled?: boolean, isCode?: boolean, includeCodeInputInHighlightFunc?: false, autoDisableDuplicateSearching?: boolean, plugins?: Plugin[])
302
+ constructor(highlight?: (codeElement: HTMLElement) => void, preElementStyled?: boolean, isCode?: boolean, includeCodeInputInHighlightFunc?: false, autoDisableDuplicateSearching?: boolean, plugins?: Plugin[])
222
303
  /**
223
304
  * **When `includeCodeInputInHighlightFunc` is `true`, `highlight` takes two parameters: the `<pre><code>` element, and the `<code-input>` element.**
224
305
  *
225
306
  * Constructor to create a custom template instance. Pass this into `codeInput.registerTemplate` to use it.
226
307
  * I would strongly recommend using the built-in simpler template `codeInput.templates.prism` or `codeInput.templates.hljs`.
227
- * @param {Function} highlight - a callback to highlight the code, that takes an HTML `<code>` element inside a `<pre>` element as a parameter
308
+ * @param {(codeElement: HTMLElement, codeInput: CodeInput) => void} highlight - a callback to highlight the code, that takes an HTML `<code>` element inside a `<pre>` element as a parameter
228
309
  * @param {boolean} preElementStyled - is the `<pre>` element CSS-styled as well as the `<code>` element? If true, `<pre>` element's scrolling is synchronised; if false, `<code>` element's scrolling is synchronised.
229
310
  * @param {boolean} isCode - is this for writing code? If true, the code-input's lang HTML attribute can be used, and the `<code>` element will be given the class name 'language-[lang attribute's value]'.
230
311
  * @param {true} includeCodeInputInHighlightFunc - Setting this to true passes the `<code-input>` element as a second argument to the highlight function.
@@ -232,7 +313,7 @@ export class Template {
232
313
  * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.Plugin`
233
314
  * @returns template object
234
315
  */
235
- constructor(highlight?: (code: HTMLElement, codeInput: CodeInput) => void, preElementStyled?: boolean, isCode?: boolean, includeCodeInputInHighlightFunc?: true, autoDisableDuplicateSearching?: boolean, plugins?: Plugin[])
316
+ constructor(highlight?: (codeElement: HTMLElement, codeInput: CodeInput) => void, preElementStyled?: boolean, isCode?: boolean, includeCodeInputInHighlightFunc?: true, autoDisableDuplicateSearching?: boolean, plugins?: Plugin[])
236
317
  highlight: Function
237
318
  preElementStyled: boolean
238
319
  isCode: boolean
@@ -286,7 +367,7 @@ export namespace templates {
286
367
  /**
287
368
  * Constructor to create a proof-of-concept template that shows text in a repeating series of colors.
288
369
  * @param {string[]} rainbowColors - An array of CSS colors, in the order each color will be shown
289
- * @param {string} delimiter - The character used to split up parts of text where each part is a different colour (e.g. "" = characters, " " = words)
370
+ * @param {string} delimiter - The character used to split up parts of text where each part is a different color (e.g. "" = characters, " " = words)
290
371
  * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
291
372
  * @returns template object
292
373
  */
@@ -305,4 +386,4 @@ export class CodeInput extends HTMLElement { }
305
386
  * @param {string} templateName - the name to register the template under
306
387
  * @param {Object} template - a Template object instance - see `codeInput.templates`
307
388
  */
308
- export function registerTemplate(templateName: string, template: Template): void;
389
+ export function registerTemplate(templateName: string, template: Template): void;