@@ -11,24 +11,27 @@ export namespace Endgine {
11
11
export type callback = ( src : string , options ?: Options ) => Result ;
12
12
}
13
13
14
+ /** The HTML element for highlighting code fragments. */
14
15
export default class HTMLCodeBlockElement extends HTMLElement {
15
16
/**
16
17
* Returns the result of highlighting the received source code string.
17
18
* Before running `customElements.define()`,
18
19
* you need to assign it directly to `HTMLCodeBlockElement.highlight`.
19
20
* @param src - Source code string for highlight
20
21
* @param options - Option for highlight
21
- * @returns - Object of the highlight result
22
+ * @return - Object of the highlight result
22
23
*/
23
- static highlight : Endgine . callback = ( ) => {
24
+ static highlight : Endgine . callback = ( src : string , options : any ) => {
24
25
throw new TypeError ( 'The syntax highlighting engine is not set to `HTMLCodeBlockElement.highlight`.' ) ;
26
+ return { markup : '' } ;
25
27
} ;
26
28
27
29
/** Slot elements for Shadow DOM content */
28
30
#slots = ( ( ) => {
29
31
/**
30
32
* @param name - The value of name attribute for the slot element
31
- * @returns - The slot element
33
+ * @param id - The value of id attribute for the slot element
34
+ * @return - The slot element
32
35
*/
33
36
const mkslot = ( name : string , id ?: string ) => {
34
37
const slot = document . createElement ( 'slot' ) ;
@@ -67,10 +70,13 @@ export default class HTMLCodeBlockElement extends HTMLElement {
67
70
/** Click event handler of copy button */
68
71
#onClickButton = ( ( ) => {
69
72
let key = - 1 ;
70
- const copy = ( ) : Promise < void > => {
71
- const value = this . #value. replace ( / \n $ / , '' ) ;
72
-
73
- if ( navigator . clipboard ) {
73
+ /**
74
+ * Write to the clipboard.
75
+ * @param value - String to be saved to the clipboard
76
+ * @return - A promise
77
+ */
78
+ const copy = ( value : string ) : Promise < void > => {
79
+ if ( navigator . clipboard ) {
74
80
return navigator . clipboard . writeText ( value ) ;
75
81
}
76
82
@@ -84,21 +90,26 @@ export default class HTMLCodeBlockElement extends HTMLElement {
84
90
textarea . remove ( ) ;
85
91
r ( ) ;
86
92
} ) ;
87
- }
93
+ } ;
88
94
89
95
return async ( ) => {
96
+ const value = this . #value. replace ( / \n $ / , '' ) ;
97
+
90
98
clearTimeout ( key ) ;
91
99
92
- await copy ( ) ;
100
+ await copy ( value ) ;
93
101
94
102
this . #copyButton. textContent = 'Copied!' ;
95
103
key = window . setTimeout ( ( ) => {
96
104
this . #copyButton. textContent = 'Copy' ;
97
105
} , 1500 ) ;
98
106
} ;
99
107
} ) ( ) ;
100
- /** Outputs the resulting syntax-highlighted markup to the DOM. */
101
- #render = function ( this : HTMLCodeBlockElement ) {
108
+ /**
109
+ * Outputs the resulting syntax-highlighted markup to the DOM.
110
+ * @param this - instance
111
+ */
112
+ #render = function ( this : HTMLCodeBlockElement ) {
102
113
if ( ! this . parentNode ) {
103
114
return ;
104
115
}
@@ -109,7 +120,7 @@ export default class HTMLCodeBlockElement extends HTMLElement {
109
120
}
110
121
111
122
return this . #value;
112
- } ) ( )
123
+ } ) ( ) ;
113
124
114
125
/** The resulting syntax-highlighted markup */
115
126
const { markup} = HTMLCodeBlockElement . highlight ( src , {
@@ -128,7 +139,7 @@ export default class HTMLCodeBlockElement extends HTMLElement {
128
139
this . append ( this . #codeWrap) ;
129
140
}
130
141
131
- /** @returns - Syntax Highlighted Source Code */
142
+ /** @return - Syntax Highlighted Source Code */
132
143
get value ( ) {
133
144
return this . #value;
134
145
}
@@ -140,7 +151,7 @@ export default class HTMLCodeBlockElement extends HTMLElement {
140
151
141
152
/**
142
153
* The name of code block
143
- * @returns - The value of the label attribute
154
+ * @return - The value of the label attribute
144
155
*/
145
156
get label ( ) {
146
157
return this . #label;
@@ -160,7 +171,7 @@ export default class HTMLCodeBlockElement extends HTMLElement {
160
171
161
172
/**
162
173
* Language Mode
163
- * @returns - The value of the language attribute
174
+ * @return - The value of the language attribute
164
175
*/
165
176
get language ( ) {
166
177
return this . #language;
@@ -180,7 +191,7 @@ export default class HTMLCodeBlockElement extends HTMLElement {
180
191
181
192
/**
182
193
* Flag to display the UI
183
- * @returns - With or without controls attribute
194
+ * @return - With or without controls attribute
184
195
* */
185
196
get controls ( ) {
186
197
return this . #controls;
@@ -207,9 +218,9 @@ export default class HTMLCodeBlockElement extends HTMLElement {
207
218
}
208
219
209
220
attributeChangedCallback (
210
- attrName : string ,
211
- oldValue : string ,
212
- newValue : string ,
221
+ attrName : string ,
222
+ oldValue : string ,
223
+ newValue : string ,
213
224
) {
214
225
if ( oldValue === newValue ) {
215
226
return ;
@@ -294,7 +305,7 @@ export default class HTMLCodeBlockElement extends HTMLElement {
294
305
span . textContent = 'Code Block' ;
295
306
296
307
return span ;
297
- } ) ( )
308
+ } ) ( ) ;
298
309
const container = ( ( ) => {
299
310
const div = document . createElement ( 'div' ) ;
300
311
0 commit comments