Skip to content

Commit 44fc73b

Browse files
heppokofrontendheppokofrontend
committed
⚙️ v1.0.0
1 parent df04c88 commit 44fc73b

12 files changed

+128
-75
lines changed

‎dist/class/HTMLCodeBlockElement.d.ts

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,44 @@
1-
import { HLJSApi, HighlightOptions } from 'highlight.js';
1+
export declare namespace Endgine {
2+
type Options = {
3+
/** Language Mode Name */
4+
language: string;
5+
};
6+
type Result = {
7+
markup: string;
8+
};
9+
export type callback = (src: string, options?: Options) => Result;
10+
export {};
11+
}
12+
/** The HTML element for highlighting code fragments. */
213
export default class HTMLCodeBlockElement extends HTMLElement {
314
#private;
4-
/**
5-
* A library for performing syntax highlighting.
6-
* Before running `customElements.define()`,
7-
* you need to assign it directly to `HTMLCodeBlockElement.endgine`.
8-
* Currently, only highlight.js is assumed.
9-
*/
10-
static endgine: HLJSApi;
1115
/**
1216
* Returns the result of highlighting the received source code string.
17+
* Before running `customElements.define()`,
18+
* you need to assign it directly to `HTMLCodeBlockElement.highlight`.
1319
* @param src - Source code string for highlight
14-
* @param options - Option for library of highlight
15-
* @returns - Object of the highlight result
20+
* @param options - Option for highlight
21+
* @return - Object of the highlight result
1622
*/
17-
static highlight(src: string, options: HighlightOptions): {
18-
value: string;
19-
};
20-
/** @returns - Syntax Highlighted Source Code */
21-
get value(): string;
22-
set value(src: string);
23+
static highlight: Endgine.callback;
24+
/** @return - Syntax Highlighted Source Code */
25+
get value(): any;
26+
set value(src: any);
2327
/**
2428
* The name of code block
25-
* @returns - The value of the label attribute
29+
* @return - The value of the label attribute
2630
*/
27-
get label(): string;
28-
set label(value: string);
31+
get label(): any;
32+
set label(value: any);
2933
/**
3034
* Language Mode
31-
* @returns - The value of the language attribute
35+
* @return - The value of the language attribute
3236
*/
3337
get language(): any;
3438
set language(value: any);
3539
/**
3640
* Flag to display the UI
37-
* @returns - With or without controls attribute
41+
* @return - With or without controls attribute
3842
* */
3943
get controls(): boolean;
4044
set controls(value: boolean);

‎dist/class/HTMLCodeBlockElement.js

Lines changed: 57 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,25 @@
11
"use strict";
22
Object.defineProperty(exports, "__esModule", { value: true });
3+
/** The HTML element for highlighting code fragments. */
34
class HTMLCodeBlockElement extends HTMLElement {
4-
/**
5-
* A library for performing syntax highlighting.
6-
* Before running `customElements.define()`,
7-
* you need to assign it directly to `HTMLCodeBlockElement.endgine`.
8-
* Currently, only highlight.js is assumed.
9-
*/
10-
static endgine;
115
/**
126
* Returns the result of highlighting the received source code string.
7+
* Before running `customElements.define()`,
8+
* you need to assign it directly to `HTMLCodeBlockElement.highlight`.
139
* @param src - Source code string for highlight
14-
* @param options - Option for library of highlight
15-
* @returns - Object of the highlight result
10+
* @param options - Option for highlight
11+
* @return - Object of the highlight result
1612
*/
17-
static highlight(src, options) {
18-
const { endgine } = HTMLCodeBlockElement;
19-
if (!endgine) {
20-
throw new Error('The syntax highlighting engine is not set to `HTMLCodeBlockElement.endgine`.');
21-
}
22-
if (
23-
// Verifying the existence of a language
24-
options?.language &&
25-
endgine.getLanguage(options.language)) {
26-
return endgine.highlight(src, options);
27-
}
28-
return endgine.highlightAuto(src);
29-
}
13+
static highlight = (src, options) => {
14+
throw new TypeError('The syntax highlighting engine is not set to `HTMLCodeBlockElement.highlight`.');
15+
return { markup: '' };
16+
};
17+
/** Slot elements for Shadow DOM content */
3018
#slots = (() => {
3119
/**
3220
* @param name - The value of name attribute for the slot element
33-
* @returns - The slot element
21+
* @param id - The value of id attribute for the slot element
22+
* @return - The slot element
3423
*/
3524
const mkslot = (name, id) => {
3625
const slot = document.createElement('slot');
@@ -46,9 +35,13 @@ class HTMLCodeBlockElement extends HTMLElement {
4635
code: mkslot('code'),
4736
};
4837
})();
38+
/** Pure DOM content */
4939
#a11yName;
40+
/** Pure DOM content */
5041
#copyButton;
42+
/** Pure DOM content */
5143
#codeBlock;
44+
/** Pure DOM content */
5245
#codeWrap;
5346
/** Actual value of the accessor `value` */
5447
#value = '';
@@ -61,27 +54,53 @@ class HTMLCodeBlockElement extends HTMLElement {
6154
/** Click event handler of copy button */
6255
#onClickButton = (() => {
6356
let key = -1;
64-
const textarea = document.createElement('textarea');
65-
return () => {
57+
/**
58+
* Write to the clipboard.
59+
* @param value - String to be saved to the clipboard
60+
* @return - A promise
61+
*/
62+
const copy = (value) => {
63+
if (navigator.clipboard) {
64+
return navigator.clipboard.writeText(value);
65+
}
66+
return new Promise((r) => {
67+
const textarea = document.createElement('textarea');
68+
textarea.value = value;
69+
document.body.append(textarea);
70+
textarea.select();
71+
document.execCommand('copy');
72+
textarea.remove();
73+
r();
74+
});
75+
};
76+
return async () => {
77+
const value = this.#value.replace(/\n$/, '');
6678
clearTimeout(key);
67-
textarea.value = this.#value.replace(/\n$/, '');
68-
document.body.append(textarea);
69-
textarea.select();
70-
document.execCommand('copy');
71-
textarea.remove();
79+
await copy(value);
80+
this.#copyButton.classList.add('--copied');
7281
this.#copyButton.textContent = 'Copied!';
7382
key = window.setTimeout(() => {
83+
this.#copyButton.classList.remove('--copied');
7484
this.#copyButton.textContent = 'Copy';
7585
}, 1500);
7686
};
7787
})();
78-
/** Outputs the resulting syntax-highlighted markup to the DOM. */
88+
/**
89+
* Outputs the resulting syntax-highlighted markup to the DOM.
90+
* @param this - instance
91+
*/
7992
#render = function () {
8093
if (!this.parentNode) {
8194
return;
8295
}
96+
const src = (() => {
97+
if (/[^\n]\n$/.test(this.#value)) {
98+
return `${this.#value}\n`;
99+
}
100+
return this.#value;
101+
})();
83102
/** The resulting syntax-highlighted markup */
84-
const { value: markup } = HTMLCodeBlockElement.highlight(this.#value, {
103+
const { markup } = HTMLCodeBlockElement.highlight(src, {
85104
language: this.#language,
86105
});
87106
// initialize
@@ -95,22 +114,17 @@ class HTMLCodeBlockElement extends HTMLElement {
95114
this.append(this.#copyButton);
96115
this.append(this.#codeWrap);
97116
};
98-
/** @returns - Syntax Highlighted Source Code */
117+
/** @return - Syntax Highlighted Source Code */
99118
get value() {
100119
return this.#value;
101120
}
102121
set value(src) {
103-
if (/\n$/.test(src)) {
104-
this.#value = `${src}\n`;
105-
}
106-
else {
107-
this.#value = src;
108-
}
122+
this.#value = String(src);
109123
this.#render();
110124
}
111125
/**
112126
* The name of code block
113-
* @returns - The value of the label attribute
127+
* @return - The value of the label attribute
114128
*/
115129
get label() {
116130
return this.#label;
@@ -128,7 +142,7 @@ class HTMLCodeBlockElement extends HTMLElement {
128142
}
129143
/**
130144
* Language Mode
131-
* @returns - The value of the language attribute
145+
* @return - The value of the language attribute
132146
*/
133147
get language() {
134148
return this.#language;
@@ -146,7 +160,7 @@ class HTMLCodeBlockElement extends HTMLElement {
146160
}
147161
/**
148162
* Flag to display the UI
149-
* @returns - With or without controls attribute
163+
* @return - With or without controls attribute
150164
* */
151165
get controls() {
152166
return this.#controls;
@@ -250,7 +264,7 @@ class HTMLCodeBlockElement extends HTMLElement {
250264
/* -------------------------------------------------------------------------
251265
* Hard private props initialize
252266
* ---------------------------------------------------------------------- */
253-
this.#value = (this.textContent || '').replace(/^\n/, '');
267+
this.#value = (this.textContent || '').replace(/^\n/, '').replace(/\n$/, '');
254268
this.#label = a11yName.textContent || '';
255269
this.#language = this.getAttribute('language') || '';
256270
this.#controls = this.getAttribute('controls') !== null;

‎dist/index.all.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
33
exports.HTMLCodeBlockElement = void 0;
44
const highlight_js_1 = require("highlight.js");
55
const HTMLCodeBlockElement_1 = require("./class/HTMLCodeBlockElement");
6+
const highlight_1 = require("./utils/highlight");
67
require("./utils/add-style");
7-
HTMLCodeBlockElement_1.default.endgine = highlight_js_1.default;
8+
HTMLCodeBlockElement_1.default.highlight = highlight_1.mkHighlightCallback(highlight_js_1.default);
89
customElements.define('code-block', HTMLCodeBlockElement_1.default);
910
exports.HTMLCodeBlockElement = HTMLCodeBlockElement_1.default;

‎dist/index.common.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
33
exports.HTMLCodeBlockElement = void 0;
44
const common_1 = require("highlight.js/lib/common");
55
const HTMLCodeBlockElement_1 = require("./class/HTMLCodeBlockElement");
6+
const highlight_1 = require("./utils/highlight");
67
require("./utils/add-style");
7-
HTMLCodeBlockElement_1.default.endgine = common_1.default;
8+
HTMLCodeBlockElement_1.default.highlight = highlight_1.mkHighlightCallback(common_1.default);
89
customElements.define('code-block', HTMLCodeBlockElement_1.default);
910
exports.HTMLCodeBlockElement = HTMLCodeBlockElement_1.default;

‎dist/index.core.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
33
exports.HTMLCodeBlockElement = void 0;
44
const core_1 = require("highlight.js/lib/core");
55
const HTMLCodeBlockElement_1 = require("./class/HTMLCodeBlockElement");
6+
const highlight_1 = require("./utils/highlight");
67
require("./utils/add-style");
7-
HTMLCodeBlockElement_1.default.endgine = core_1.default;
8+
HTMLCodeBlockElement_1.default.highlight = highlight_1.mkHighlightCallback(core_1.default);
89
customElements.define('code-block', HTMLCodeBlockElement_1.default);
910
exports.HTMLCodeBlockElement = HTMLCodeBlockElement_1.default;

‎dist/utils/highlight.d.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { HLJSApi, HighlightOptions } from 'highlight.js';
2+
/**
3+
* Callback maker for highlight.js
4+
* @param endgine - A library for performing syntax highlighting.
5+
* @return - A function for HTMLCodeBlockElement.highlight
6+
*/
7+
export declare const mkHighlightCallback: (endgine: HLJSApi) => (src: string, options?: HighlightOptions | undefined) => {
8+
markup: string;
9+
};

‎dist/utils/highlight.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
"use strict";
2+
Object.defineProperty(exports, "__esModule", { value: true });
3+
exports.mkHighlightCallback = void 0;
4+
/**
5+
* Callback maker for highlight.js
6+
* @param endgine - A library for performing syntax highlighting.
7+
* @return - A function for HTMLCodeBlockElement.highlight
8+
*/
9+
const mkHighlightCallback = (endgine) => (src, options) => {
10+
const hljs = endgine;
11+
if (
12+
// Verifying the existence of a language
13+
options?.language &&
14+
hljs.getLanguage(options.language)) {
15+
return {
16+
markup: hljs.highlight(src, options).value,
17+
};
18+
}
19+
return {
20+
markup: hljs.highlightAuto(src).value,
21+
};
22+
};
23+
exports.mkHighlightCallback = mkHighlightCallback;

‎lib/html-code-block-element.all.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/html-code-block-element.common.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/html-code-block-element.core.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)