You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -64,12 +64,12 @@ The next step is to set up a `template` to link `code-input` to your syntax-high
64
64
65
65
-*Highlight.js:*
66
66
```js
67
-
codeInput.registerTemplate("syntax-highlighted", codeInput.templates.hljs(hljs, [] /* Array of plugins (see below) */));
67
+
codeInput.registerTemplate("syntax-highlighted", newcodeInput.templates.Hljs(hljs, [] /* Array of plugins (see below) */));
68
68
```
69
69
70
70
-*Prism.js:*
71
71
```js
72
-
codeInput.registerTemplate("syntax-highlighted", codeInput.templates.prism(Prism, [] /* Array of plugins (see below) */));
72
+
codeInput.registerTemplate("syntax-highlighted", newcodeInput.templates.Prism(Prism, [] /* Array of plugins (see below) */));
73
73
```
74
74
75
75
-*Custom:*
@@ -106,7 +106,7 @@ The next step is to set up a `template` to link `code-input` to your syntax-high
106
106
<!--...-->
107
107
<script>
108
108
codeInput.registerTemplate("syntax-highlighted",
109
-
codeInput.templates.hljs(
109
+
newcodeInput.templates.Hljs(
110
110
hljs,
111
111
[
112
112
newcodeInput.plugins.Autodetect(),
@@ -122,13 +122,13 @@ The next step is to set up a `template` to link `code-input` to your syntax-high
122
122
To see a full list of plugins and their functions, please see [plugins/README.md](./plugins/README.md).
123
123
124
124
### 4. Using the component
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!
125
+
Now that you have registered a template, you can use the custom `<code-input>` element in HTML. I recommend it surrounds a fallback `<textarea code-input-fallback>` element which will be used instead when JavaScript support is absent, and will pass its attributes to the `<code-input>` element otherwise, as shown below. 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!
> ⚠️ 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.
Copy file name to clipboardExpand all lines: code-input.css
+50-21Lines changed: 50 additions & 21 deletions
Original file line number
Diff line number
Diff line change
@@ -12,6 +12,9 @@ code-input {
12
12
top:0;
13
13
left:0;
14
14
15
+
color: black;
16
+
background-color: white;
17
+
15
18
/* Normal inline styles */
16
19
margin:8px;
17
20
--padding:16px;
@@ -38,8 +41,9 @@ code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, co
38
41
margin:0px!important;
39
42
padding:var(--padding,16px)!important;
40
43
border:0;
41
-
min-width:calc(100%-var(--padding) *2);
42
-
min-height:calc(100%-var(--padding) *2);
44
+
min-width:calc(100%-var(--padding,16px) *2);
45
+
min-height:calc(100%-var(--padding,16px) *2);
46
+
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. */
content:"Use codeInput.registerTemplate to set up.";
140
+
content:"No-JavaScript fallback. For highlighting and plugins: as a user use a newer browser/enable JavaScript support; as a developer use codeInput.registerTemplate.";
Copy file name to clipboardExpand all lines: code-input.d.ts
+11-21Lines changed: 11 additions & 21 deletions
Original file line number
Diff line number
Diff line change
@@ -91,7 +91,7 @@ export namespace plugins {
91
91
* Create an auto-close brackets plugin to pass into a template
92
92
* @param {Object} bracketPairs Opening brackets mapped to closing brackets, default and example {"(": ")", "[": "]", "{": "}", '"': '"'}. All brackets must only be one character.
93
93
*/
94
-
constructor(bracketPairs: Object);
94
+
constructor(bracketPairs?: Object);
95
95
}
96
96
// ESM-SUPPORT-END-PLUGIN-auto-close-brackets Do not (re)move this - it's needed for ESM generation
97
97
@@ -103,9 +103,9 @@ export namespace plugins {
103
103
classAutocompleteextendsPlugin{
104
104
/**
105
105
* Pass in a function to create a plugin that displays the popup that takes in (popup element, textarea, textarea.selectionEnd).
106
-
* @param {(popupElement: HTMLElement, textarea: HTMLTextAreaElement, selectionEnd: number) => void} updatePopupCallback a function to display the popup that takes in (popup element, textarea, textarea.selectionEnd).
106
+
* @param {(popupElement: HTMLElement, textarea: HTMLTextAreaElement, selectionEnd: number, selectionStart?: number) => void} updatePopupCallback a function to display the popup that takes in (popup element, textarea, textarea.selectionEnd).
* Create a debounced update plugin to pass into a template.
132
-
* @param {Number} delayMs Delay, in ms, to wait until updating the syntax highlighting
133
-
*/
134
-
constructor(delayMs: number);
135
-
}
136
-
// E doesn't exist? SM-SUPPORT-END-PLUGIN-debounce-update Do not (re)move this - it's needed for ESM generation
137
-
138
123
// ESM-SUPPORT-START-PLUGIN-find-and-replace Do not (re)move this - it's needed for ESM generation
139
124
/**
140
125
* Add Find-and-Replace (Ctrl+F for find, Ctrl+H for replace by default) functionality to the code editor.
@@ -189,10 +174,15 @@ export namespace plugins {
189
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)`.
190
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.
* Show a search-like dialog prompting line number.
@@ -217,7 +207,7 @@ export namespace plugins {
217
207
* @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.
218
208
* @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.
* @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".
271
261
* @returns {TokenSelectorCallbacks} A new TokenSelectorCallbacks instance that encodes this behaviour.
0 commit comments