diff --git a/.gitignore b/.gitignore index f6b22d143..ad3c707c0 100644 --- a/.gitignore +++ b/.gitignore @@ -48,3 +48,5 @@ config.prod.json **/assetlinks.prod.json storybook-static/ + +webcomponents/monaco-editor/workers diff --git a/CHANGELOG.md b/CHANGELOG.md index 4d870df2e..9df49f23c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,15 @@ - color - inline-editor +### Web Components: New + +- monaco-editor: v1.0.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/main/webcomponents/monaco-editor/CHANGELOG.md)) + +### Web Components + +- highlight-code: v4.0.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/main/webcomponents/highlight-code/CHANGELOG.md)) +- markdown: v2.1.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/main/webcomponents/markdown/CHANGELOG.md)) + ### Others - utils: v4.10.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/main/utils/utils/CHANGELOG.md)) diff --git a/README.md b/README.md index a62baa77a..c929bb0ca 100644 --- a/README.md +++ b/README.md @@ -98,6 +98,7 @@ If you like the project, you can become a sponsor at [Open Collective](https://o | **Lazy image** | [`@deckdeckgo/lazy-img`](https://www.npmjs.com/package/@deckdeckgo/lazy-img) | [![version](https://img.shields.io/npm/v/@deckdeckgo/lazy-img/latest.svg?color=success)](https://www.npmjs.com/package/@deckdeckgo/lazy-img) | [`README`](webcomponents/lazy-img/README.md) | [`CHANGELOG`](webcomponents/lazy-img/CHANGELOG.md) | | **Math** | [`@deckdeckgo/math`](https://www.npmjs.com/package/@deckdeckgo/math) | [![version](https://img.shields.io/npm/v/@deckdeckgo/math/latest.svg?color=success)](https://www.npmjs.com/package/@deckdeckgo/math) | [`README`](webcomponents/math/README.md) | [`CHANGELOG`](webcomponents/math/CHANGELOG.md) | | **Markdown** | [`@deckdeckgo/markdown`](https://www.npmjs.com/package/@deckdeckgo/markdown) | [![version](https://img.shields.io/npm/v/@deckdeckgo/markdown/latest.svg?color=success)](https://www.npmjs.com/package/@deckdeckgo/markdown) | [`README`](webcomponents/markdown/README.md) | [`CHANGELOG`](webcomponents/markdown/CHANGELOG.md) | +| **Monaco Editor** | [`@deckdeckgo/monaco-editor`](https://www.npmjs.com/package/@deckdeckgo/monaco-editor) | [![version](https://img.shields.io/npm/v/@deckdeckgo/monaco-editor/latest.svg?color=success)](https://www.npmjs.com/package/@deckdeckgo/monaco-editor) | [`README`](webcomponents/monaco-editor/README.md) | [`CHANGELOG`](webcomponents/monaco-editor/CHANGELOG.md) | | **Pager** | [`@deckdeckgo/pager`](https://www.npmjs.com/package/@deckdeckgo/pager) | [![version](https://img.shields.io/npm/v/@deckdeckgo/pager/latest.svg?color=success)](https://www.npmjs.com/package/@deckdeckgo/pager) | [`README`](webcomponents/pager/README.md) | [`CHANGELOG`](webcomponents/pager/CHANGELOG.md) | | **Remote** | [`@deckdeckgo/remote`](https://www.npmjs.com/package/@deckdeckgo/remote) | [![version](https://img.shields.io/npm/v/@deckdeckgo/remote/latest.svg?color=success)](https://www.npmjs.com/package/@deckdeckgo/remote) | [`README`](webcomponents/remote/README.md) | [`CHANGELOG`](webcomponents/remote/CHANGELOG.md) | | **Social Image** | [`@deckdeckgo/social-img`](https://www.npmjs.com/package/@deckdeckgo/social-img) | [![version](https://img.shields.io/npm/v/@deckdeckgo/social-img/latest.svg?color=success)](https://www.npmjs.com/package/@deckdeckgo/social-img) | [`README`](webcomponents/social-img/README.md) | [`CHANGELOG`](webcomponents/social-img/CHANGELOG.md) | diff --git a/package-lock.json b/package-lock.json index 40c956fb1..cd7f5ef2c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -652,6 +652,10 @@ "resolved": "webcomponents/math", "link": true }, + "node_modules/@deckdeckgo/monaco-editor": { + "resolved": "webcomponents/monaco-editor", + "link": true + }, "node_modules/@deckdeckgo/pager": { "resolved": "webcomponents/pager", "link": true @@ -7622,6 +7626,11 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/monaco-editor": { + "version": "0.31.1", + "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.31.1.tgz", + "integrity": "sha512-FYPwxGZAeP6mRRyrr5XTGHD9gRXVjy7GUzF4IPChnyt3fS5WrNxIkS8DNujWf6EQy0Zlzpxw8oTVE+mWI2/D1Q==" + }, "node_modules/mri": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz", @@ -11941,7 +11950,7 @@ }, "webcomponents/highlight-code": { "name": "@deckdeckgo/highlight-code", - "version": "3.6.0", + "version": "4.0.0", "license": "MIT", "dependencies": { "@deckdeckgo/utils": "^2.4.0", @@ -11987,7 +11996,7 @@ "@types/marked": "^3.0.0" }, "peerDependencies": { - "@deckdeckgo/highlight-code": "^3.3.1", + "@deckdeckgo/highlight-code": "^4.0.0", "@deckdeckgo/lazy-img": "^3.1.0" } }, @@ -12003,6 +12012,14 @@ "@types/katex": "^0.11.1" } }, + "webcomponents/monaco-editor": { + "name": "@deckdeckgo/monaco-editor", + "version": "1.0.0", + "license": "MIT", + "dependencies": { + "monaco-editor": "^0.31.1" + } + }, "webcomponents/pager": { "name": "@deckdeckgo/pager", "version": "1.1.0", @@ -12768,6 +12785,12 @@ "katex": "^0.13.18" } }, + "@deckdeckgo/monaco-editor": { + "version": "file:webcomponents/monaco-editor", + "requires": { + "monaco-editor": "^0.31.1" + } + }, "@deckdeckgo/pager": { "version": "file:webcomponents/pager" }, @@ -18489,6 +18512,11 @@ "minimist": "^1.2.5" } }, + "monaco-editor": { + "version": "0.31.1", + "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.31.1.tgz", + "integrity": "sha512-FYPwxGZAeP6mRRyrr5XTGHD9gRXVjy7GUzF4IPChnyt3fS5WrNxIkS8DNujWf6EQy0Zlzpxw8oTVE+mWI2/D1Q==" + }, "mri": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz", diff --git a/remote/package-lock.json b/remote/package-lock.json index 919681511..0c49db624 100644 --- a/remote/package-lock.json +++ b/remote/package-lock.json @@ -6,7 +6,7 @@ "packages": { "": { "name": "deckdeckgo-remote", - "version": "1.15.1", + "version": "1.15.2", "license": "AGPL-3.0-or-later", "dependencies": { "@deckdeckgo/charts": "^2.3.0", @@ -15,9 +15,9 @@ "@deckdeckgo/drag-resize-rotate": "^2.2.1", "@deckdeckgo/editor": "^3.3.0", "@deckdeckgo/elements": "^1.0.0", - "@deckdeckgo/highlight-code": "^3.6.0", + "@deckdeckgo/highlight-code": "^4.0.0", "@deckdeckgo/lazy-img": "^3.2.0", - "@deckdeckgo/markdown": "^2.1.0", + "@deckdeckgo/markdown": "^2.1.1", "@deckdeckgo/math": "^2.1.0", "@deckdeckgo/remote-utils": "^2.0.1", "@deckdeckgo/slide-aspect-ratio": "^3.4.0", @@ -1798,9 +1798,9 @@ "integrity": "sha512-V7PeKdY07IqTdgkgz405fZyViwC2+B7FM9TjjwURcXa2zjkAtwScPPdA0UfOXklvf5DAMhRCbnCcMUVLPp07Tg==" }, "node_modules/@deckdeckgo/highlight-code": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/highlight-code/-/highlight-code-3.6.0.tgz", - "integrity": "sha512-3MUXcnuQwiE3n5v6dsiBWFlfg5st//c8/tvkzuMj+2kejzn5bpW80JlF8zK9tZUNxXNwN0mdtC3L5e+FNsOHZw==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/highlight-code/-/highlight-code-4.0.0.tgz", + "integrity": "sha512-UDMf/eyqRFa2ETDjuyARTPHbhMud6uuhIHDbxTnVOHIaNPj9lZ0lRi9A8pYAQ4wXS6I6GftH3Qkibs1kOdMf1g==", "dependencies": { "@deckdeckgo/utils": "^2.4.0", "prismjs": "^1.25.0" @@ -1812,15 +1812,15 @@ "integrity": "sha512-USOUHpY2pS7uXMm0CE54b9NhfmV0aVUrihGNYNXK3t3wVxFCXfjFP01i9AWw5yOVDors1mzIADM5hR9oCdnG8A==" }, "node_modules/@deckdeckgo/markdown": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/markdown/-/markdown-2.1.0.tgz", - "integrity": "sha512-bpOYwzt9SUetj9VMklyglqDkscCFkdxzvLJTKnULZd3fS8gs1snbDJG0zoksmXhAsrcMNSZQcKPzNqq7i3l62g==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@deckdeckgo/markdown/-/markdown-2.1.1.tgz", + "integrity": "sha512-yiUsGLGekLWYLOYbcv8pzOzu7Dx04u6pbMRz6Xthwu/BtMKvAKcmjbEH8+VgC4TOTszqOo/oUqfjzUBZJnbuSg==", "dependencies": { - "marked": "^2.0.6" + "marked": "^4.0.10" }, "peerDependencies": { - "@deckdeckgo/highlight-code": "^3.2.0", - "@deckdeckgo/lazy-img": "^3.0.0" + "@deckdeckgo/highlight-code": "^4.0.0", + "@deckdeckgo/lazy-img": "^3.1.0" } }, "node_modules/@deckdeckgo/math": { @@ -4388,14 +4388,14 @@ } }, "node_modules/marked": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/marked/-/marked-2.1.3.tgz", - "integrity": "sha512-/Q+7MGzaETqifOMWYEA7HVMaZb4XbcRfaOzcSsHZEith83KGlvaSG33u0SKu89Mj5h+T8V2hM+8O45Qc5XTgwA==", + "version": "4.0.10", + "resolved": "https://registry.npmjs.org/marked/-/marked-4.0.10.tgz", + "integrity": "sha512-+QvuFj0nGgO970fySghXGmuw+Fd0gD2x3+MqCWLIPf5oxdv1Ka6b2q+z9RP01P/IaKPMEramy+7cNy/Lw8c3hw==", "bin": { - "marked": "bin/marked" + "marked": "bin/marked.js" }, "engines": { - "node": ">= 10" + "node": ">= 12" } }, "node_modules/md5.js": { @@ -4662,9 +4662,12 @@ } }, "node_modules/prismjs": { - "version": "1.25.0", - "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.25.0.tgz", - "integrity": "sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg==" + "version": "1.26.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.26.0.tgz", + "integrity": "sha512-HUoH9C5Z3jKkl3UunCyiD5jwk0+Hz0fIgQ2nbwU2Oo/ceuTAQAg+pPVnfdt2TJWRVLcxKh9iuoYDUSc8clb5UQ==", + "engines": { + "node": ">=6" + } }, "node_modules/process-es6": { "version": "0.11.6", @@ -6925,9 +6928,9 @@ } }, "@deckdeckgo/highlight-code": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/highlight-code/-/highlight-code-3.6.0.tgz", - "integrity": "sha512-3MUXcnuQwiE3n5v6dsiBWFlfg5st//c8/tvkzuMj+2kejzn5bpW80JlF8zK9tZUNxXNwN0mdtC3L5e+FNsOHZw==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/highlight-code/-/highlight-code-4.0.0.tgz", + "integrity": "sha512-UDMf/eyqRFa2ETDjuyARTPHbhMud6uuhIHDbxTnVOHIaNPj9lZ0lRi9A8pYAQ4wXS6I6GftH3Qkibs1kOdMf1g==", "requires": { "@deckdeckgo/utils": "^2.4.0", "prismjs": "^1.25.0" @@ -6939,11 +6942,11 @@ "integrity": "sha512-USOUHpY2pS7uXMm0CE54b9NhfmV0aVUrihGNYNXK3t3wVxFCXfjFP01i9AWw5yOVDors1mzIADM5hR9oCdnG8A==" }, "@deckdeckgo/markdown": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/markdown/-/markdown-2.1.0.tgz", - "integrity": "sha512-bpOYwzt9SUetj9VMklyglqDkscCFkdxzvLJTKnULZd3fS8gs1snbDJG0zoksmXhAsrcMNSZQcKPzNqq7i3l62g==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@deckdeckgo/markdown/-/markdown-2.1.1.tgz", + "integrity": "sha512-yiUsGLGekLWYLOYbcv8pzOzu7Dx04u6pbMRz6Xthwu/BtMKvAKcmjbEH8+VgC4TOTszqOo/oUqfjzUBZJnbuSg==", "requires": { - "marked": "^2.0.6" + "marked": "^4.0.10" } }, "@deckdeckgo/math": { @@ -9103,9 +9106,9 @@ } }, "marked": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/marked/-/marked-2.1.3.tgz", - "integrity": "sha512-/Q+7MGzaETqifOMWYEA7HVMaZb4XbcRfaOzcSsHZEith83KGlvaSG33u0SKu89Mj5h+T8V2hM+8O45Qc5XTgwA==" + "version": "4.0.10", + "resolved": "https://registry.npmjs.org/marked/-/marked-4.0.10.tgz", + "integrity": "sha512-+QvuFj0nGgO970fySghXGmuw+Fd0gD2x3+MqCWLIPf5oxdv1Ka6b2q+z9RP01P/IaKPMEramy+7cNy/Lw8c3hw==" }, "md5.js": { "version": "1.3.5", @@ -9321,9 +9324,9 @@ "dev": true }, "prismjs": { - "version": "1.25.0", - "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.25.0.tgz", - "integrity": "sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg==" + "version": "1.26.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.26.0.tgz", + "integrity": "sha512-HUoH9C5Z3jKkl3UunCyiD5jwk0+Hz0fIgQ2nbwU2Oo/ceuTAQAg+pPVnfdt2TJWRVLcxKh9iuoYDUSc8clb5UQ==" }, "process-es6": { "version": "0.11.6", diff --git a/remote/package.json b/remote/package.json index 9bf39789a..a034ff92f 100644 --- a/remote/package.json +++ b/remote/package.json @@ -23,9 +23,9 @@ "@deckdeckgo/drag-resize-rotate": "^2.2.1", "@deckdeckgo/editor": "^3.3.0", "@deckdeckgo/elements": "^1.0.0", - "@deckdeckgo/highlight-code": "^3.6.0", + "@deckdeckgo/highlight-code": "^4.0.0", "@deckdeckgo/lazy-img": "^3.2.0", - "@deckdeckgo/markdown": "^2.1.0", + "@deckdeckgo/markdown": "^2.1.1", "@deckdeckgo/math": "^2.1.0", "@deckdeckgo/remote-utils": "^2.0.1", "@deckdeckgo/slide-aspect-ratio": "^3.4.0", diff --git a/studio/package-lock.json b/studio/package-lock.json index 9be50750e..a03c3aabc 100644 --- a/studio/package-lock.json +++ b/studio/package-lock.json @@ -15,11 +15,12 @@ "@deckdeckgo/drag-resize-rotate": "^2.2.1", "@deckdeckgo/editor": "^5.1.1", "@deckdeckgo/elements": "^1.0.0", - "@deckdeckgo/highlight-code": "^3.4.2", + "@deckdeckgo/highlight-code": "^4.0.0", "@deckdeckgo/laser-pointer": "^1.1.0", "@deckdeckgo/lazy-img": "^3.2.0", - "@deckdeckgo/markdown": "^2.1.0", + "@deckdeckgo/markdown": "^2.1.1", "@deckdeckgo/math": "^2.1.0", + "@deckdeckgo/monaco-editor": "^1.0.0", "@deckdeckgo/remote": "^2.2.0", "@deckdeckgo/slide-aspect-ratio": "^3.4.0", "@deckdeckgo/slide-author": "^2.4.0", @@ -125,6 +126,21 @@ "@deckdeckgo/utils": "^3.0.0" } }, + "../webcomponents/highlight-code": { + "name": "@deckdeckgo/highlight-code", + "version": "4.0.0", + "extraneous": true, + "license": "MIT", + "dependencies": { + "@deckdeckgo/utils": "^2.4.0", + "prismjs": "^1.25.0" + }, + "devDependencies": { + "@deckdeckgo/slide-utils": "^4.0.3", + "@types/prismjs": "^1.16.6", + "node-fetch": "^3.1.1" + } + }, "../webcomponents/inline-editor": { "name": "@deckdeckgo/inline-editor", "version": "5.0.0", @@ -135,6 +151,15 @@ "@deckdeckgo/utils": "^3.0.0" } }, + "../webcomponents/monaco-editor": { + "name": "@deckdeckgo/monaco-editor", + "version": "1.0.0", + "extraneous": true, + "license": "MIT", + "dependencies": { + "monaco-editor": "^0.31.1" + } + }, "node_modules/@babel/code-frame": { "version": "7.16.0", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.0.tgz", @@ -1827,9 +1852,9 @@ } }, "node_modules/@deckdeckgo/highlight-code": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/highlight-code/-/highlight-code-3.6.0.tgz", - "integrity": "sha512-3MUXcnuQwiE3n5v6dsiBWFlfg5st//c8/tvkzuMj+2kejzn5bpW80JlF8zK9tZUNxXNwN0mdtC3L5e+FNsOHZw==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/highlight-code/-/highlight-code-4.0.0.tgz", + "integrity": "sha512-UDMf/eyqRFa2ETDjuyARTPHbhMud6uuhIHDbxTnVOHIaNPj9lZ0lRi9A8pYAQ4wXS6I6GftH3Qkibs1kOdMf1g==", "dependencies": { "@deckdeckgo/utils": "^2.4.0", "prismjs": "^1.25.0" @@ -1859,15 +1884,15 @@ "integrity": "sha512-USOUHpY2pS7uXMm0CE54b9NhfmV0aVUrihGNYNXK3t3wVxFCXfjFP01i9AWw5yOVDors1mzIADM5hR9oCdnG8A==" }, "node_modules/@deckdeckgo/markdown": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/markdown/-/markdown-2.1.0.tgz", - "integrity": "sha512-bpOYwzt9SUetj9VMklyglqDkscCFkdxzvLJTKnULZd3fS8gs1snbDJG0zoksmXhAsrcMNSZQcKPzNqq7i3l62g==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@deckdeckgo/markdown/-/markdown-2.1.1.tgz", + "integrity": "sha512-yiUsGLGekLWYLOYbcv8pzOzu7Dx04u6pbMRz6Xthwu/BtMKvAKcmjbEH8+VgC4TOTszqOo/oUqfjzUBZJnbuSg==", "dependencies": { - "marked": "^2.0.6" + "marked": "^4.0.10" }, "peerDependencies": { - "@deckdeckgo/highlight-code": "^3.2.0", - "@deckdeckgo/lazy-img": "^3.0.0" + "@deckdeckgo/highlight-code": "^4.0.0", + "@deckdeckgo/lazy-img": "^3.1.0" } }, "node_modules/@deckdeckgo/math": { @@ -1879,6 +1904,14 @@ "katex": "^0.13.11" } }, + "node_modules/@deckdeckgo/monaco-editor": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/monaco-editor/-/monaco-editor-1.0.0.tgz", + "integrity": "sha512-+ZCeFtGfUfED24RnW/VjZAryMNY3B7C6uE2aNDVOfM4W+F2x49PJjTDn55p1K0ELecgeGxQstAVZzWbAVXeh3w==", + "dependencies": { + "monaco-editor": "^0.31.1" + } + }, "node_modules/@deckdeckgo/remote": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/@deckdeckgo/remote/-/remote-2.2.0.tgz", @@ -3487,14 +3520,14 @@ } }, "node_modules/marked": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/marked/-/marked-2.1.3.tgz", - "integrity": "sha512-/Q+7MGzaETqifOMWYEA7HVMaZb4XbcRfaOzcSsHZEith83KGlvaSG33u0SKu89Mj5h+T8V2hM+8O45Qc5XTgwA==", + "version": "4.0.10", + "resolved": "https://registry.npmjs.org/marked/-/marked-4.0.10.tgz", + "integrity": "sha512-+QvuFj0nGgO970fySghXGmuw+Fd0gD2x3+MqCWLIPf5oxdv1Ka6b2q+z9RP01P/IaKPMEramy+7cNy/Lw8c3hw==", "bin": { - "marked": "bin/marked" + "marked": "bin/marked.js" }, "engines": { - "node": ">= 10" + "node": ">= 12" } }, "node_modules/merge-stream": { @@ -3521,6 +3554,11 @@ "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", "dev": true }, + "node_modules/monaco-editor": { + "version": "0.31.1", + "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.31.1.tgz", + "integrity": "sha512-FYPwxGZAeP6mRRyrr5XTGHD9gRXVjy7GUzF4IPChnyt3fS5WrNxIkS8DNujWf6EQy0Zlzpxw8oTVE+mWI2/D1Q==" + }, "node_modules/ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", @@ -3692,9 +3730,12 @@ } }, "node_modules/prismjs": { - "version": "1.25.0", - "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.25.0.tgz", - "integrity": "sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg==" + "version": "1.26.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.26.0.tgz", + "integrity": "sha512-HUoH9C5Z3jKkl3UunCyiD5jwk0+Hz0fIgQ2nbwU2Oo/ceuTAQAg+pPVnfdt2TJWRVLcxKh9iuoYDUSc8clb5UQ==", + "engines": { + "node": ">=6" + } }, "node_modules/process-nextick-args": { "version": "2.0.1", @@ -5644,9 +5685,9 @@ } }, "@deckdeckgo/highlight-code": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/highlight-code/-/highlight-code-3.6.0.tgz", - "integrity": "sha512-3MUXcnuQwiE3n5v6dsiBWFlfg5st//c8/tvkzuMj+2kejzn5bpW80JlF8zK9tZUNxXNwN0mdtC3L5e+FNsOHZw==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/highlight-code/-/highlight-code-4.0.0.tgz", + "integrity": "sha512-UDMf/eyqRFa2ETDjuyARTPHbhMud6uuhIHDbxTnVOHIaNPj9lZ0lRi9A8pYAQ4wXS6I6GftH3Qkibs1kOdMf1g==", "requires": { "@deckdeckgo/utils": "^2.4.0", "prismjs": "^1.25.0" @@ -5680,11 +5721,11 @@ "integrity": "sha512-USOUHpY2pS7uXMm0CE54b9NhfmV0aVUrihGNYNXK3t3wVxFCXfjFP01i9AWw5yOVDors1mzIADM5hR9oCdnG8A==" }, "@deckdeckgo/markdown": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/markdown/-/markdown-2.1.0.tgz", - "integrity": "sha512-bpOYwzt9SUetj9VMklyglqDkscCFkdxzvLJTKnULZd3fS8gs1snbDJG0zoksmXhAsrcMNSZQcKPzNqq7i3l62g==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@deckdeckgo/markdown/-/markdown-2.1.1.tgz", + "integrity": "sha512-yiUsGLGekLWYLOYbcv8pzOzu7Dx04u6pbMRz6Xthwu/BtMKvAKcmjbEH8+VgC4TOTszqOo/oUqfjzUBZJnbuSg==", "requires": { - "marked": "^2.0.6" + "marked": "^4.0.10" } }, "@deckdeckgo/math": { @@ -5696,6 +5737,14 @@ "katex": "^0.13.11" } }, + "@deckdeckgo/monaco-editor": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/monaco-editor/-/monaco-editor-1.0.0.tgz", + "integrity": "sha512-+ZCeFtGfUfED24RnW/VjZAryMNY3B7C6uE2aNDVOfM4W+F2x49PJjTDn55p1K0ELecgeGxQstAVZzWbAVXeh3w==", + "requires": { + "monaco-editor": "^0.31.1" + } + }, "@deckdeckgo/remote": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/@deckdeckgo/remote/-/remote-2.2.0.tgz", @@ -7055,9 +7104,9 @@ } }, "marked": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/marked/-/marked-2.1.3.tgz", - "integrity": "sha512-/Q+7MGzaETqifOMWYEA7HVMaZb4XbcRfaOzcSsHZEith83KGlvaSG33u0SKu89Mj5h+T8V2hM+8O45Qc5XTgwA==" + "version": "4.0.10", + "resolved": "https://registry.npmjs.org/marked/-/marked-4.0.10.tgz", + "integrity": "sha512-+QvuFj0nGgO970fySghXGmuw+Fd0gD2x3+MqCWLIPf5oxdv1Ka6b2q+z9RP01P/IaKPMEramy+7cNy/Lw8c3hw==" }, "merge-stream": { "version": "2.0.0", @@ -7080,6 +7129,11 @@ "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", "dev": true }, + "monaco-editor": { + "version": "0.31.1", + "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.31.1.tgz", + "integrity": "sha512-FYPwxGZAeP6mRRyrr5XTGHD9gRXVjy7GUzF4IPChnyt3fS5WrNxIkS8DNujWf6EQy0Zlzpxw8oTVE+mWI2/D1Q==" + }, "ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", @@ -7205,9 +7259,9 @@ "dev": true }, "prismjs": { - "version": "1.25.0", - "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.25.0.tgz", - "integrity": "sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg==" + "version": "1.26.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.26.0.tgz", + "integrity": "sha512-HUoH9C5Z3jKkl3UunCyiD5jwk0+Hz0fIgQ2nbwU2Oo/ceuTAQAg+pPVnfdt2TJWRVLcxKh9iuoYDUSc8clb5UQ==" }, "process-nextick-args": { "version": "2.0.1", diff --git a/studio/package.json b/studio/package.json index a5f623520..f767bd201 100644 --- a/studio/package.json +++ b/studio/package.json @@ -28,11 +28,12 @@ "@deckdeckgo/drag-resize-rotate": "^2.2.1", "@deckdeckgo/editor": "^5.1.1", "@deckdeckgo/elements": "^1.0.0", - "@deckdeckgo/highlight-code": "^3.4.2", + "@deckdeckgo/highlight-code": "^4.0.0", "@deckdeckgo/laser-pointer": "^1.1.0", "@deckdeckgo/lazy-img": "^3.2.0", - "@deckdeckgo/markdown": "^2.1.0", + "@deckdeckgo/markdown": "^2.1.1", "@deckdeckgo/math": "^2.1.0", + "@deckdeckgo/monaco-editor": "^1.0.0", "@deckdeckgo/remote": "^2.2.0", "@deckdeckgo/slide-aspect-ratio": "^3.4.0", "@deckdeckgo/slide-author": "^2.4.0", diff --git a/studio/src/app/components/editor/deck/slide/app-slide-preview/app-slide-preview.tsx b/studio/src/app/components/editor/deck/slide/app-slide-preview/app-slide-preview.tsx index f96614f30..72ac61ab2 100644 --- a/studio/src/app/components/editor/deck/slide/app-slide-preview/app-slide-preview.tsx +++ b/studio/src/app/components/editor/deck/slide/app-slide-preview/app-slide-preview.tsx @@ -67,7 +67,10 @@ export class AppSlidePreview { await this.stickyIOS(selectedElement); this.preview = - isSlide(selectedElement?.parentElement) && SlotUtils.isNodeEditable(selectedElement) && !SlotUtils.isNodeWordCloud(selectedElement); + isSlide(selectedElement?.parentElement) && + SlotUtils.isNodeEditable(selectedElement) && + !SlotUtils.isNodeCode(selectedElement) && + !SlotUtils.isNodeWordCloud(selectedElement); if (this.preview) { this.el.addEventListener('previewAttached', async () => await this.updateSlide(selectedElement.parentElement), {once: true}); diff --git a/studio/src/app/editors/app-deck-editor/app-deck-editor.tsx b/studio/src/app/editors/app-deck-editor/app-deck-editor.tsx index 095c74da5..abff6a4ad 100644 --- a/studio/src/app/editors/app-deck-editor/app-deck-editor.tsx +++ b/studio/src/app/editors/app-deck-editor/app-deck-editor.tsx @@ -29,6 +29,7 @@ import {DeckEditorEvents} from '../../events/editor/editor/deck.editor.events'; import {PollEvents} from '../../events/editor/poll/poll.events'; import {ImageEvents} from '../../events/core/image/image.events'; import {ChartEvents} from '../../events/core/chart/chart.events'; +import {CodeEvents} from '../../events/editor/code/code.events'; import {SlideHelper} from '../../helpers/editor/slide.helper'; @@ -79,12 +80,13 @@ export class AppDeckEditor implements ComponentInterface { @State() private activeIndex: number = 0; - private deckDataEvents: DeckDataEvents = new DeckDataEvents(); - private deckEditorEvents: DeckEditorEvents = new DeckEditorEvents(); - private remoteEvents: RemoteEvents = new RemoteEvents(); - private pollEvents: PollEvents = new PollEvents(); - private imageEvents: ImageEvents = new ImageEvents(); - private chartEvents: ChartEvents = new ChartEvents(); + private readonly deckDataEvents: DeckDataEvents = new DeckDataEvents(); + private readonly deckEditorEvents: DeckEditorEvents = new DeckEditorEvents(); + private readonly remoteEvents: RemoteEvents = new RemoteEvents(); + private readonly pollEvents: PollEvents = new PollEvents(); + private readonly imageEvents: ImageEvents = new ImageEvents(); + private readonly chartEvents: ChartEvents = new ChartEvents(); + private readonly codeEvents: CodeEvents = new CodeEvents(); private editorHelper: SlideHelper = new SlideHelper(); @@ -134,6 +136,7 @@ export class AppDeckEditor implements ComponentInterface { componentWillLoad() { this.imageEvents.init(); this.chartEvents.init(); + this.codeEvents.init(); this.updateEditorToolbarConfig(); } @@ -212,6 +215,7 @@ export class AppDeckEditor implements ComponentInterface { this.pollEvents.destroy(); this.imageEvents.destroy(); this.chartEvents.destroy(); + this.codeEvents.destroy(); await this.remoteEvents.destroy(); diff --git a/studio/src/app/editors/app-doc-editor/app-doc-editor.tsx b/studio/src/app/editors/app-doc-editor/app-doc-editor.tsx index 52d2d321f..660f58f1b 100644 --- a/studio/src/app/editors/app-doc-editor/app-doc-editor.tsx +++ b/studio/src/app/editors/app-doc-editor/app-doc-editor.tsx @@ -22,6 +22,7 @@ import {ImageEvents} from '../../events/core/image/image.events'; import {ChartEvents} from '../../events/core/chart/chart.events'; import {DocDataEvents} from '../../events/editor/doc/doc.data.events'; import {DocImageEvents} from '../../events/editor/doc/doc.image.events'; +import {CodeEvents} from '../../events/editor/code/code.events'; import {ParagraphHelper} from '../../helpers/editor/paragraphHelper'; @@ -50,16 +51,14 @@ export class AppDocEditor implements ComponentInterface { @State() private editorConfig: Partial = { - plugins: [h1, h2, h3, ul, imgStorage, imgUnsplash, imgGif, code, hr], - events: { - updateCustomEvents: ['markdownDidChange', 'wordCloudDidChange', 'codeDidChange', 'mathDidChange', 'imgDidChange'] - } + plugins: [h1, h2, h3, ul, imgStorage, imgUnsplash, imgGif, code, hr] }; private readonly imageEvents: ImageEvents = new ImageEvents(); private readonly chartEvents: ChartEvents = new ChartEvents(); private readonly docDataEvents: DocDataEvents = new DocDataEvents(); private readonly docImageEvents: DocImageEvents = new DocImageEvents(); + private readonly codeEvents: CodeEvents = new CodeEvents(); private readonly paragraphHelper: ParagraphHelper = new ParagraphHelper(); @@ -76,6 +75,7 @@ export class AppDocEditor implements ComponentInterface { async componentDidLoad() { this.imageEvents.init(); this.chartEvents.init(); + this.codeEvents.init(); this.docImageEvents.init(this.containerRef); @@ -85,6 +85,7 @@ export class AppDocEditor implements ComponentInterface { async disconnectedCallback() { this.imageEvents.destroy(); this.chartEvents.destroy(); + this.codeEvents.destroy(); this.docImageEvents.destroy(); @@ -141,10 +142,7 @@ export class AppDocEditor implements ComponentInterface { this.editorConfig = { ...this.editorConfig, lang: i18n.state.lang, - toolbar: {palette: colorStore.state.history.slice(0, 11)}, - events: { - updateCustomEvents: ['markdownDidChange', 'wordCloudDidChange', 'codeDidChange', 'mathDidChange', 'imgDidChange'] - } + toolbar: {palette: colorStore.state.history.slice(0, 11)} }; } diff --git a/studio/src/app/events/editor/code/code.events.ts b/studio/src/app/events/editor/code/code.events.ts new file mode 100644 index 000000000..cb83c103a --- /dev/null +++ b/studio/src/app/events/editor/code/code.events.ts @@ -0,0 +1,80 @@ +import {modalController, OverlayEventDetail} from '@ionic/core'; + +import type {MonacoEditorOptions} from '@deckdeckgo/monaco-editor'; + +export class CodeEvents { + init() { + document.addEventListener('editCode', this.onEditCode); + } + + destroy() { + document.removeEventListener('editCode', this.onEditCode); + } + + private onEditCode = async ({target}: CustomEvent) => { + const highlightCodeElement: HTMLDeckgoHighlightCodeElement = target as HTMLDeckgoHighlightCodeElement; + + this.emitSnapshotParagraph(highlightCodeElement); + + const code: HTMLElement | null = highlightCodeElement.querySelector(':scope > code'); + + const language: string | null = highlightCodeElement.getAttribute('language'); + + const options: MonacoEditorOptions = { + ...(language !== null && language !== '' && {language}) + }; + + const modal: HTMLIonModalElement = await modalController.create({ + component: 'app-code-editor', + componentProps: { + code: code?.innerHTML || '', + options + } + }); + + modal.onDidDismiss().then(async ({data}: OverlayEventDetail) => { + if (!data) { + // User aborted edition + return; + } + + const {code: innerHTML} = data || {code: '\u200B'}; + + if (!code) { + // Should not happen, decgo-highlight-code are always create with a predefined even empty code slot + const slot: HTMLElement = document.createElement('code'); + slot.setAttribute('slot', 'code'); + slot.innerHTML = innerHTML; + + highlightCodeElement.append(slot); + } else { + code.innerHTML = innerHTML; + } + + await highlightCodeElement.load(); + + this.emitCodeDidChange(highlightCodeElement); + }); + + await modal.present(); + }; + + private emitCodeDidChange(target: HTMLElement) { + const didUpdate: CustomEvent = new CustomEvent('codeDidChange', { + bubbles: true, + detail: target + }); + + target.dispatchEvent(didUpdate); + } + + // Copy current paragraph for undo-redo "update" in case of changes + private emitSnapshotParagraph(target: HTMLElement) { + const didUpdate: CustomEvent = new CustomEvent('snapshotParagraph', { + bubbles: true, + detail: target + }); + + target.dispatchEvent(didUpdate); + } +} diff --git a/studio/src/app/modals/editor/app-code-editor/app-code-editor.scss b/studio/src/app/modals/editor/app-code-editor/app-code-editor.scss new file mode 100644 index 000000000..7a5285180 --- /dev/null +++ b/studio/src/app/modals/editor/app-code-editor/app-code-editor.scss @@ -0,0 +1,9 @@ +app-code-editor { + @import "../../../../global/theme/editor/editor-modal"; + + deckgo-monaco-editor { + border: 1px solid #dedede; + display: block; + height: 100%; + } +} diff --git a/studio/src/app/modals/editor/app-code-editor/app-code-editor.tsx b/studio/src/app/modals/editor/app-code-editor/app-code-editor.tsx new file mode 100644 index 000000000..6eb91c5ed --- /dev/null +++ b/studio/src/app/modals/editor/app-code-editor/app-code-editor.tsx @@ -0,0 +1,99 @@ +import {Component, ComponentInterface, Element, Fragment, h, Listen, Prop} from '@stencil/core'; + +import i18n from '../../../stores/i18n.store'; + +import {AppIcon} from '../../../components/core/app-icon/app-icon'; + +import '@deckdeckgo/monaco-editor'; + +import type {MonacoEditorOptions} from '@deckdeckgo/monaco-editor'; + +// @ts-ignore +self.MonacoEnvironment = { + getWorkerUrl: function (_moduleId, label) { + if (label === 'json') { + return './build/json.worker.js'; + } + if (label === 'css' || label === 'scss' || label === 'less') { + return './build/css.worker.js'; + } + if (label === 'html' || label === 'handlebars' || label === 'razor') { + return './build/html.worker.js'; + } + if (label === 'typescript' || label === 'javascript') { + return './build/ts.worker.js'; + } + return './build/editor.worker.js'; + } +}; + +@Component({ + tag: 'app-code-editor', + styleUrl: 'app-code-editor.scss' +}) +export class AppCodeEditor implements ComponentInterface { + @Element() el: HTMLElement; + + @Prop() + code: string; + + @Prop() + options: MonacoEditorOptions; + + private codeEditor: HTMLDeckgoMonacoEditorElement | null; + + componentDidLoad() { + history.pushState({modal: true}, null); + } + + @Listen('popstate', {target: 'window'}) + async handleHardwareBackButton(_e: PopStateEvent) { + await this.closeModal(); + } + + @Listen('editorDidLoad') + onEditorDidLoad() { + setTimeout(async () => await this.codeEditor?.setFocus(), 500); + } + + private async closeModal(data?: {code: string}) { + await (this.el.closest('ion-modal') as HTMLIonModalElement).dismiss(data); + } + + private async save() { + const code: string | undefined = await this.codeEditor?.save(); + await this.closeModal({code}); + } + + render() { + return ( + + + + + await this.closeModal()} aria-label={i18n.state.core.close}> + + + + {i18n.state.editor.code} + + + + + (this.codeEditor = el)} options={this.options}> + + + + + +
+ await this.save()}> + {i18n.state.core.save} + +
+ + + + ); + } +} diff --git a/studio/src/app/plugins/code.plugin.ts b/studio/src/app/plugins/code.plugin.ts index 22e6d311c..ed30d421d 100644 --- a/studio/src/app/plugins/code.plugin.ts +++ b/studio/src/app/plugins/code.plugin.ts @@ -1,24 +1,11 @@ -import {createEmptyElement, StyloPlugin, StyloPluginCreateParagraphsParams, transformParagraph} from '@deckdeckgo/stylo'; +import {StyloPlugin, StyloPluginCreateParagraphsParams} from '@deckdeckgo/stylo'; -const createSlottedCode = (): HTMLElement => { - const code: HTMLElement = document.createElement('code'); - code.setAttribute('slot', 'code'); - return code; -}; +import i18n from '../stores/i18n.store'; + +import {openCodeModal} from '../utils/editor/plugin.utils'; export const code: StyloPlugin = { - text: 'code', + text: i18n.state.editor.code, icon: 'code', - createParagraphs: async ({container, paragraph}: StyloPluginCreateParagraphsParams) => { - const code: HTMLElement = document.createElement('deckgo-highlight-code'); - - code.setAttribute('editable', 'true'); - code.append(createSlottedCode()); - - transformParagraph({ - elements: [code, createEmptyElement({nodeName: 'div'})], - paragraph, - container - }); - } + createParagraphs: (pluginParams: StyloPluginCreateParagraphsParams) => openCodeModal({pluginParams}) }; diff --git a/studio/src/app/utils/editor/plugin.utils.ts b/studio/src/app/utils/editor/plugin.utils.ts index e96b2f1bd..4c2d9f65f 100644 --- a/studio/src/app/utils/editor/plugin.utils.ts +++ b/studio/src/app/utils/editor/plugin.utils.ts @@ -57,3 +57,33 @@ export const openPluginModal = async ({ await modal.present(); }; + +export const openCodeModal = async ({pluginParams}: {pluginParams: StyloPluginCreateParagraphsParams}) => { + const modal: HTMLIonModalElement = await modalController.create({ + component: 'app-code-editor' + }); + + modal.onDidDismiss().then(({data}: OverlayEventDetail) => { + const {container, paragraph} = pluginParams; + + const {code: innerHTML} = data || {code: '\u200B'}; + + const code: HTMLElement = document.createElement('deckgo-highlight-code'); + code.setAttribute('editable', 'true'); + + const slot: HTMLElement = document.createElement('code'); + slot.setAttribute('slot', 'code'); + slot.innerHTML = innerHTML; + + code.append(slot); + + transformParagraph({ + elements: [code, createEmptyElement({nodeName: 'div'})], + paragraph, + container, + focus: 'last' + }); + }); + + await modal.present(); +}; diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts index 79c5e9b8e..796abda33 100644 --- a/studio/src/components.d.ts +++ b/studio/src/components.d.ts @@ -8,6 +8,7 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; import { EventEmitter, JSX } from "@stencil/core"; import { SlideAttributes, SlideTemplate, StorageFile, Template, UnsplashPhoto } from "@deckdeckgo/editor"; import { SelectedElement } from "./app/types/editor/selected-element"; +import { MonacoEditorOptions } from "@deckdeckgo/monaco-editor"; import { PrismLanguage } from "./app/types/editor/prism-language"; import { InitStyleColor } from "./app/utils/editor/color.utils"; import { DeckOrDoc } from "./app/utils/core/dashboard.utils"; @@ -94,6 +95,10 @@ export namespace Components { "codeDidChange": EventEmitter; "selectedElement": HTMLElement; } + interface AppCodeEditor { + "code": string; + "options": MonacoEditorOptions; + } interface AppCodeLanguages { "codeDidChange": EventEmitter; "currentLanguage": PrismLanguage | undefined; @@ -548,6 +553,12 @@ declare global { prototype: HTMLAppCodeElement; new (): HTMLAppCodeElement; }; + interface HTMLAppCodeEditorElement extends Components.AppCodeEditor, HTMLStencilElement { + } + var HTMLAppCodeEditorElement: { + prototype: HTMLAppCodeEditorElement; + new (): HTMLAppCodeEditorElement; + }; interface HTMLAppCodeLanguagesElement extends Components.AppCodeLanguages, HTMLStencilElement { } var HTMLAppCodeLanguagesElement: { @@ -1234,6 +1245,7 @@ declare global { "app-close-menu": HTMLAppCloseMenuElement; "app-cloud-wait": HTMLAppCloudWaitElement; "app-code": HTMLAppCodeElement; + "app-code-editor": HTMLAppCodeEditorElement; "app-code-languages": HTMLAppCodeLanguagesElement; "app-color": HTMLAppColorElement; "app-color-chart": HTMLAppColorChartElement; @@ -1443,6 +1455,10 @@ declare namespace LocalJSX { "codeDidChange"?: EventEmitter; "selectedElement"?: HTMLElement; } + interface AppCodeEditor { + "code"?: string; + "options"?: MonacoEditorOptions; + } interface AppCodeLanguages { "codeDidChange"?: EventEmitter; "currentLanguage"?: PrismLanguage | undefined; @@ -1849,6 +1865,7 @@ declare namespace LocalJSX { "app-close-menu": AppCloseMenu; "app-cloud-wait": AppCloudWait; "app-code": AppCode; + "app-code-editor": AppCodeEditor; "app-code-languages": AppCodeLanguages; "app-color": AppColor; "app-color-chart": AppColorChart; @@ -1985,6 +2002,7 @@ declare module "@stencil/core" { "app-close-menu": LocalJSX.AppCloseMenu & JSXBase.HTMLAttributes; "app-cloud-wait": LocalJSX.AppCloudWait & JSXBase.HTMLAttributes; "app-code": LocalJSX.AppCode & JSXBase.HTMLAttributes; + "app-code-editor": LocalJSX.AppCodeEditor & JSXBase.HTMLAttributes; "app-code-languages": LocalJSX.AppCodeLanguages & JSXBase.HTMLAttributes; "app-color": LocalJSX.AppColor & JSXBase.HTMLAttributes; "app-color-chart": LocalJSX.AppColorChart & JSXBase.HTMLAttributes; diff --git a/studio/stencil.config.ts b/studio/stencil.config.ts index 49ba3b356..d819c19bd 100644 --- a/studio/stencil.config.ts +++ b/studio/stencil.config.ts @@ -38,7 +38,11 @@ export const config: Config = { serviceWorker: { swSrc: 'src/sw.js' }, - copy: [{src: 'robots.txt'}, {src: `${assetLinks}`, dest: `.well-known/assetlinks.json`}] + copy: [ + {src: 'robots.txt'}, + {src: `${assetLinks}`, dest: `.well-known/assetlinks.json`}, + {src: `${__dirname}/node_modules/@deckdeckgo/monaco-editor/workers/`, dest: `${__dirname}/www/build`} + ] } ], globalScript: globalScript, diff --git a/webcomponents/highlight-code/CHANGELOG.md b/webcomponents/highlight-code/CHANGELOG.md index d5d829171..d1c3ed0e7 100644 --- a/webcomponents/highlight-code/CHANGELOG.md +++ b/webcomponents/highlight-code/CHANGELOG.md @@ -1,3 +1,18 @@ +# 4.0.0 (2022-01-23) + +### Breaking Changes + +- component does **not** support an `editable` mode anymore + +i.e. setting the property `editable` to `true` won't turn the shadowed `code` as `contenteditable` anymore! + +Instead, if `editable` is set to `true`, it will only display an "edit" button above (bottom + right) the code. +If the button is triggered, an event `editCode` will be emitted. Edition itself has to be implemented by the consumer. + +### Style + +- lighter `box-shadow` default for host + # 3.6.0 (2021-12-01) ### Fix diff --git a/webcomponents/highlight-code/package.json b/webcomponents/highlight-code/package.json index c032fbd23..d5875e7bf 100644 --- a/webcomponents/highlight-code/package.json +++ b/webcomponents/highlight-code/package.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/highlight-code", - "version": "3.6.0", + "version": "4.0.0", "description": "A Web Component to highlight your code", "main": "dist/index.cjs.js", "module": "dist/index.js", @@ -17,7 +17,7 @@ "LICENSE" ], "scripts": { - "config": "node scripts/config.languages.js && prettier --write ./src/declarations/deckdeckgo-highlight-code-languages.tsx", + "config": "node scripts/config.languages.mjs && prettier --write src/declarations/languages.ts", "build": "npm run config && stencil build --docs", "start": "npm run config && stencil build --dev --watch --serve", "test": "npm run config && stencil test --spec --e2e", diff --git a/webcomponents/highlight-code/scripts/config.languages.js b/webcomponents/highlight-code/scripts/config.languages.mjs similarity index 93% rename from webcomponents/highlight-code/scripts/config.languages.js rename to webcomponents/highlight-code/scripts/config.languages.mjs index d4bb4528d..867da3fcb 100644 --- a/webcomponents/highlight-code/scripts/config.languages.js +++ b/webcomponents/highlight-code/scripts/config.languages.mjs @@ -1,7 +1,7 @@ #!/usr/bin/env node -const fs = require('fs'); -const fetch = require('node-fetch'); +import {writeFile} from 'fs'; +import fetch from 'node-fetch'; const langInterfaces = `export interface DeckdeckgoHighlightCodeLanguageAlias { [index: string]: string; @@ -74,7 +74,7 @@ function getLanguageRequire(language) { export const deckdeckgoHighlightCodeLanguages: DeckdeckgoHighlightCodeLanguages = ${JSON.stringify(filteredLanguages)}`; - fs.writeFile(`./src/declarations/deckdeckgo-highlight-code-languages.tsx`, languagesEnum, 'utf8', (err) => { + writeFile(`./src/declarations/languages.ts`, languagesEnum, 'utf8', (err) => { if (err) return console.log(err); }); } catch (e) { diff --git a/webcomponents/highlight-code/src/components.d.ts b/webcomponents/highlight-code/src/components.d.ts index 7fc4d8fb1..754487613 100644 --- a/webcomponents/highlight-code/src/components.d.ts +++ b/webcomponents/highlight-code/src/components.d.ts @@ -5,14 +5,18 @@ * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; -import { DeckdeckgoHighlightCodeTerminal } from "./declarations/deckdeckgo-highlight-code-terminal"; -import { DeckdeckgoHighlightCodeCarbonTheme } from "./declarations/deckdeckgo-highlight-code-carbon-theme"; +import { DeckdeckgoHighlightCodeTerminal } from "./declarations/terminal"; +import { DeckdeckgoHighlightCodeCarbonTheme } from "./declarations/carbon-theme"; export namespace Components { interface DeckgoHighlightCode { /** - * In case you would like to set the code component as being editable + * Display a button user can click to edit the code. Edition has to find place on the comsumer side, the button emits an event */ "editable": boolean; + /** + * An optional label for the `aria-label` attribute of the editable button + */ + "editableLabel": string; "hide": () => Promise; "hideAll": () => Promise; /** @@ -51,6 +55,9 @@ export namespace Components { */ "theme": DeckdeckgoHighlightCodeCarbonTheme; } + interface DeckgoHighlightCodeEdit { + "label": string; + } } declare global { interface HTMLDeckgoHighlightCodeElement extends Components.DeckgoHighlightCode, HTMLStencilElement { @@ -59,16 +66,27 @@ declare global { prototype: HTMLDeckgoHighlightCodeElement; new (): HTMLDeckgoHighlightCodeElement; }; + interface HTMLDeckgoHighlightCodeEditElement extends Components.DeckgoHighlightCodeEdit, HTMLStencilElement { + } + var HTMLDeckgoHighlightCodeEditElement: { + prototype: HTMLDeckgoHighlightCodeEditElement; + new (): HTMLDeckgoHighlightCodeEditElement; + }; interface HTMLElementTagNameMap { "deckgo-highlight-code": HTMLDeckgoHighlightCodeElement; + "deckgo-highlight-code-edit": HTMLDeckgoHighlightCodeEditElement; } } declare namespace LocalJSX { interface DeckgoHighlightCode { /** - * In case you would like to set the code component as being editable + * Display a button user can click to edit the code. Edition has to find place on the comsumer side, the button emits an event */ "editable"?: boolean; + /** + * An optional label for the `aria-label` attribute of the editable button + */ + "editableLabel"?: string; /** * If you wish to highlight some lines of your code. The lines number should be provided as a number (one line) or numbers separated with coma or dash (many lines), group separated with space. For example: 1 3,5 8 14-17 which highlight lines 1, 3 to 5, 8 and 14 to 17 */ @@ -81,10 +99,6 @@ declare namespace LocalJSX { * Display the number of the lines of code */ "lineNumbers"?: boolean; - /** - * Emitted when the code was edited (see attribute editable). Propagate the root component itself - */ - "onCodeDidChange"?: (event: CustomEvent) => void; /** * Emitted when a language could not be loaded. The component fallback to javascript language to display the code anyway. */ @@ -103,8 +117,13 @@ declare namespace LocalJSX { */ "theme"?: DeckdeckgoHighlightCodeCarbonTheme; } + interface DeckgoHighlightCodeEdit { + "label"?: string; + "onEditCode"?: (event: CustomEvent) => void; + } interface IntrinsicElements { "deckgo-highlight-code": DeckgoHighlightCode; + "deckgo-highlight-code-edit": DeckgoHighlightCodeEdit; } } export { LocalJSX as JSX }; @@ -112,6 +131,7 @@ declare module "@stencil/core" { export namespace JSX { interface IntrinsicElements { "deckgo-highlight-code": LocalJSX.DeckgoHighlightCode & JSXBase.HTMLAttributes; + "deckgo-highlight-code-edit": LocalJSX.DeckgoHighlightCodeEdit & JSXBase.HTMLAttributes; } } } diff --git a/webcomponents/highlight-code/src/components/edit/edit.scss b/webcomponents/highlight-code/src/components/edit/edit.scss new file mode 100644 index 000000000..614220a2a --- /dev/null +++ b/webcomponents/highlight-code/src/components/edit/edit.scss @@ -0,0 +1,37 @@ +:host { + display: block; + + position: absolute; + inset: auto 0 0 auto; +} + +button { + width: 1.6rem; + height: 1.6rem; + display: flex; + justify-content: center; + align-items: center; + margin: 0 16px; + border-radius: 50%; + + background: #f4f5f8; + color: #000000; + + border: 1px solid transparent; + outline: none; + + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12); + + isolation: isolate; + + overflow: hidden; + + cursor: pointer; + + transition: transform 0.15s ease-out; + + &:active { + box-shadow: none; + transform: translateX(1px) translateY(1px); + } +} diff --git a/webcomponents/highlight-code/src/components/edit/edit.tsx b/webcomponents/highlight-code/src/components/edit/edit.tsx new file mode 100644 index 000000000..c5dd1a6d8 --- /dev/null +++ b/webcomponents/highlight-code/src/components/edit/edit.tsx @@ -0,0 +1,29 @@ +import {Component, h, Event, EventEmitter, Prop} from '@stencil/core'; + +/** + * @part edit-button: A CSS :part to access the button + * @part edit-icon: A CSS :part to access the SVG icon rendered within the button + */ +@Component({ + tag: 'deckgo-highlight-code-edit', + styleUrl: 'edit.scss', + shadow: true +}) +export class Edit { + @Prop() + label: string; + + @Event() + editCode: EventEmitter; + + render() { + return ( + + ); + } +} diff --git a/webcomponents/highlight-code/src/components/edit/readme.md b/webcomponents/highlight-code/src/components/edit/readme.md new file mode 100644 index 000000000..695c80b59 --- /dev/null +++ b/webcomponents/highlight-code/src/components/edit/readme.md @@ -0,0 +1,47 @@ +# deckgo-highlight-code-edit + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| -------- | --------- | ----------- | -------- | ----------- | +| `label` | `label` | | `string` | `undefined` | + + +## Events + +| Event | Description | Type | +| ---------- | ----------- | ------------------- | +| `editCode` | | `CustomEvent` | + + +## Shadow Parts + +| Part | Description | +| ---------------------------------------------------------------------------- | ----------- | +| `"edit-button"` | | +| `"edit-button: A CSS :part to access the button"` | | +| `"edit-icon"` | | +| `"edit-icon: A CSS :part to access the SVG icon rendered within the button"` | | + + +## Dependencies + +### Used by + + - [deckgo-highlight-code](../highlight-code) + +### Graph +```mermaid +graph TD; + deckgo-highlight-code --> deckgo-highlight-code-edit + style deckgo-highlight-code-edit fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.scss b/webcomponents/highlight-code/src/components/highlight-code/highlight-code.scss similarity index 92% rename from webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.scss rename to webcomponents/highlight-code/src/components/highlight-code/highlight-code.scss index fc3ca5833..a45a5834a 100644 --- a/webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.scss +++ b/webcomponents/highlight-code/src/components/highlight-code/highlight-code.scss @@ -6,22 +6,6 @@ } } -:host([editable]) { - /** - * @prop --deckgo-editable-cursor: The mouse cursor displayed when hovering the editable element - * @default text - */ - cursor: var(--deckgo-editable-cursor, text); - - code:empty:not(:focus):after { - /** - * @prop --deckgo-highlight-code-empty-text: Place holder in case the editable is set to true - * @default Click to add your code - */ - content: var(--deckgo-highlight-code-empty-text, "Click to add your code"); - } -} - :host(.deckgo-highlight-code-carbon) { /** * @prop --deckgo-highlight-code-carbon-display: The display property of the host container @@ -56,7 +40,7 @@ * @prop --deckgo-highlight-code-carbon-box-shadow: The box-shadow property of the host container * @default rgba(0, 0, 0, 0.55) 0 8px 16px) */ - box-shadow: var(--deckgo-highlight-code-carbon-box-shadow, rgba(0, 0, 0, 0.55) 0 8px 16px); + box-shadow: var(--deckgo-highlight-code-carbon-box-shadow, 0 4px 16px 0 rgba(0, 0, 0, 0.12)); /** * @prop --deckgo-highlight-code-carbon-margin: The margin property of the host container * @default 16px 0 @@ -114,7 +98,7 @@ * @prop --deckgo-highlight-code-ubuntu-box-shadow: The box-shadow property of the host container * @default 2px 4px 10px rgba(0, 0, 0, 0.5) */ - box-shadow: var(--deckgo-highlight-code-ubuntu-box-shadow, 2px 4px 10px rgba(0, 0, 0, 0.5)); + box-shadow: var(--deckgo-highlight-code-ubuntu-box-shadow, 0 4px 16px 0 rgba(0, 0, 0, 0.12)); /** * @prop --deckgo-highlight-code-ubuntu-margin: The margin property of the host container * @default 16px 0 @@ -132,16 +116,16 @@ code { /** - * @prop : Place holder in case the editable is set to true - * @default + * @prop --deckgo-highlight-code-font-family: Ubuntu font family + * @default Ubuntu mono */ font-family: var(--deckgo-highlight-code-font-family, "Ubuntu mono"); > div.line-number { &:before { /** - * @prop : Place holder in case the editable is set to true - * @default + * @prop --deckgo-highlight-code-ubuntu-background: Ubunut line number background + * @default #4c1e3d */ background: var(--deckgo-highlight-code-ubuntu-background, #4c1e3d); } @@ -152,21 +136,20 @@ :host(.deckgo-highlight-code-ubuntu) ::slotted([slot="code"]) { /** - * @prop : Place holder in case the editable is set to true - * @default + * @prop --deckgo-highlight-code-ubuntu-color: Ubuntu color + * @default #ddd */ color: var(--deckgo-highlight-code-ubuntu-color, #ddd); } div.container { /** - * @prop : Place holder in case the editable is set to true - * @default + * @prop --deckgo-highlight-code-color: Ubuntu container color + * @default inherit */ color: var(--deckgo-highlight-code-color, inherit); /** - * @prop : Place holder in case the editable is set to true - * @default + * @prop --deckgo-highlight-code-background: Ubuntu code background */ background: var(--deckgo-highlight-code-background); padding: var(--deckgo-highlight-code-padding, 0 16px); @@ -515,11 +498,6 @@ div.carbon { * @default #ff5f56 */ background: var(--deckgo-highlight-code-carbon-header-button-red-background, #ff5f56); - /** - * @prop --deckgo-highlight-code-carbon-header-button-red-border: The border of the first button of the card header - * @default 0.5px solid #e0443e - */ - border: var(--deckgo-highlight-code-carbon-header-button-red-border, 0.5px solid #e0443e); } &.yellow { @@ -528,11 +506,6 @@ div.carbon { * @default #ffbd2e */ background: var(--deckgo-highlight-code-carbon-header-button-yellow-background, #ffbd2e); - /** - * @prop --deckgo-highlight-code-carbon-header-button-yellow-border: The border of the second button of the card header - * @default 0.5px solid #dea123 - */ - border: var(--deckgo-highlight-code-carbon-header-button-yellow-border, 0.5px solid #dea123); } &.green { @@ -541,11 +514,6 @@ div.carbon { * @default #27c93f */ background: var(--deckgo-highlight-code-carbon-header-button-green-background, #27c93f); - /** - * @prop --deckgo-highlight-code-carbon-header-button-green-border: The color of the third button of the card header - * @default 0.5px solid #1aab29 - */ - border: var(--deckgo-highlight-code-carbon-header-button-green-border, 0.5px solid #1aab29); } } } diff --git a/webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.tsx b/webcomponents/highlight-code/src/components/highlight-code/highlight-code.tsx similarity index 81% rename from webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.tsx rename to webcomponents/highlight-code/src/components/highlight-code/highlight-code.tsx index 1b3d4b99d..2adec07db 100644 --- a/webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.tsx +++ b/webcomponents/highlight-code/src/components/highlight-code/highlight-code.tsx @@ -1,6 +1,5 @@ import {Component, Prop, Watch, Element, Method, EventEmitter, Event, Listen, State, h, Host} from '@stencil/core'; -import {catchTab, debounce, getSelection, moveCursorToEnd} from '@deckdeckgo/utils'; import {DeckDeckGoRevealComponent} from '@deckdeckgo/slide-utils'; import {loadTheme} from '../../utils/themes-loader.utils'; @@ -11,9 +10,9 @@ import {injectRequiredJS, loadMainScript, StateRequiredJS} from '../../utils/inj import {CarbonThemeStyle} from '../styles/carbon-theme.style'; import {HighlightStyle} from '../styles/highlight.style'; -import {DeckdeckgoHighlightCodeCarbonTheme} from '../../declarations/deckdeckgo-highlight-code-carbon-theme'; -import {DeckdeckgoHighlightCodeTerminal} from '../../declarations/deckdeckgo-highlight-code-terminal'; -import {deckdeckgoHighlightCodeLanguages} from '../../declarations/deckdeckgo-highlight-code-languages'; +import {DeckdeckgoHighlightCodeCarbonTheme} from '../../declarations/carbon-theme'; +import {DeckdeckgoHighlightCodeTerminal} from '../../declarations/terminal'; +import {deckdeckgoHighlightCodeLanguages} from '../../declarations/languages'; /** * @slot code - A `` element to highlight @@ -21,10 +20,10 @@ import {deckdeckgoHighlightCodeLanguages} from '../../declarations/deckdeckgo-hi */ @Component({ tag: 'deckgo-highlight-code', - styleUrl: 'deckdeckgo-highlight-code.scss', + styleUrl: 'highlight-code.scss', shadow: true }) -export class DeckdeckgoHighlightCode implements DeckDeckGoRevealComponent { +export class HighlightCode implements DeckDeckGoRevealComponent { @Element() el: HTMLElement; /** @@ -39,12 +38,6 @@ export class DeckdeckgoHighlightCode implements DeckDeckGoRevealComponent { @Event() prismLanguageError: EventEmitter; - /** - * Emitted when the code was edited (see attribute editable). Propagate the root component itself - */ - @Event() - codeDidChange: EventEmitter; - /** * Define the language to be used for the syntax highlighting. The list of supported languages is defined by Prism.js */ @@ -66,10 +59,15 @@ export class DeckdeckgoHighlightCode implements DeckDeckGoRevealComponent { @Prop({reflect: true}) terminal: DeckdeckgoHighlightCodeTerminal = DeckdeckgoHighlightCodeTerminal.CARBON; /** - * In case you would like to set the code component as being editable + * Display a button user can click to edit the code. Edition has to find place on the comsumer side, the button emits an event */ @Prop() editable: boolean = false; + /** + * An optional label for the `aria-label` attribute of the editable button + */ + @Prop() editableLabel: string; + /** * The theme of the selected terminal (applied only in case of carbon) */ @@ -87,8 +85,6 @@ export class DeckdeckgoHighlightCode implements DeckDeckGoRevealComponent { private refContainer!: HTMLDivElement; - private readonly debounceUpdateSlot: () => void; - private highlightGroup: number | undefined = undefined; /** @@ -100,18 +96,8 @@ export class DeckdeckgoHighlightCode implements DeckDeckGoRevealComponent { @State() private highlightRows: {start: number; end: number} | undefined = undefined; - private editFocused: boolean = false; - - constructor() { - this.debounceUpdateSlot = debounce(async () => { - await this.copyCodeToSlot(); - }, 500); - } - - async componentWillLoad() { - await loadGoogleFonts(this.terminal); - - await this.loadTheme(); + componentWillLoad() { + Promise.all([loadGoogleFonts(this.terminal), this.loadTheme()]).then(() => {}); } async componentDidLoad() { @@ -304,62 +290,6 @@ export class DeckdeckgoHighlightCode implements DeckDeckGoRevealComponent { }; } - private async applyCode() { - if (!this.editable) { - return; - } - - this.editFocused = false; - - await this.copyCodeToSlot(); - - this.parseSlottedCode(); - - this.codeDidChange.emit(this.el); - } - - private inputCode() { - if (!this.editable) { - return; - } - - this.debounceUpdateSlot(); - } - - private async copyCodeToSlot() { - const code: HTMLElement | null = this.el.querySelector(":scope > [slot='code']"); - - if (!code) { - return; - } - - // Avoid duplicating new lines on new entries - this.refCode?.querySelectorAll('br')?.forEach((node: HTMLBRElement) => (node.outerHTML = '\u200B')); - - code.innerHTML = this.refCode?.innerText - .replace(/\u200B/g, '') - .replace(/&/g, '&') - .replace(//g, '>') - .replace(/"/g, '"') - .replace(/'/g, '''); - } - - private edit() { - if (!this.editable || this.editFocused) { - return; - } - - if (!this.refCode) { - return; - } - - this.editFocused = true; - - this.refCode.focus(); - moveCursorToEnd(this.refCode); - } - /** * @internal Used when integrated in DeckDeckGo presentations. Call `nextHighlight()`. */ @@ -453,26 +383,6 @@ export class DeckdeckgoHighlightCode implements DeckDeckGoRevealComponent { }; } - @Listen('copy', {target: 'window'}) - onCopyCleanZeroWidthSpaces($event: ClipboardEvent) { - const {target, clipboardData} = $event; - - if (!target || !clipboardData || !this.el.isEqualNode(target as Node)) { - return; - } - - const selection: Selection | null = getSelection(); - - if (!selection) { - return; - } - - $event.preventDefault(); - - const text: string = selection.toString().replace(/\u200B/g, ''); - clipboardData.setData('text/plain', text); - } - render() { const hostClass = { 'deckgo-highlight-code-carbon': this.terminal === DeckdeckgoHighlightCodeTerminal.CARBON, @@ -484,19 +394,16 @@ export class DeckdeckgoHighlightCode implements DeckDeckGoRevealComponent { } return ( - this.edit()}> + {this.renderCarbon()} {this.renderUbuntu()} {this.renderHighlightStyle()}
(this.refContainer = el as HTMLDivElement)}> 0 ? 'highlight' : undefined} - contentEditable={this.editable} - onBlur={async () => await this.applyCode()} - onInput={() => this.inputCode()} - onKeyDown={($event: KeyboardEvent) => catchTab($event)} ref={(el: HTMLElement | null) => (this.refCode = el as HTMLElement)}> + {this.editable && }
); diff --git a/webcomponents/highlight-code/src/components/highlight-code/readme.md b/webcomponents/highlight-code/src/components/highlight-code/readme.md index f9078d5f2..d421ed7ec 100644 --- a/webcomponents/highlight-code/src/components/highlight-code/readme.md +++ b/webcomponents/highlight-code/src/components/highlight-code/readme.md @@ -62,7 +62,8 @@ If you are displaying your code in an Ubuntu terminal, you could also displays a | Property | Attribute | Description | Type | Default | | ---------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -| `editable` | `editable` | In case you would like to set the code component as being editable | `boolean` | `false` | +| `editable` | `editable` | Display a button user can click to edit the code. Edition has to find place on the comsumer side, the button emits an event | `boolean` | `false` | +| `editableLabel` | `editable-label` | An optional label for the `aria-label` attribute of the editable button | `string` | `undefined` | | `highlightLines` | `highlight-lines` | If you wish to highlight some lines of your code. The lines number should be provided as a number (one line) or numbers separated with coma or dash (many lines), group separated with space. For example: 1 3,5 8 14-17 which highlight lines 1, 3 to 5, 8 and 14 to 17 | `string` | `undefined` | | `language` | `language` | Define the language to be used for the syntax highlighting. The list of supported languages is defined by Prism.js | `string` | `'javascript'` | | `lineNumbers` | `line-numbers` | Display the number of the lines of code | `boolean` | `false` | @@ -72,11 +73,10 @@ If you are displaying your code in an Ubuntu terminal, you could also displays a ## Events -| Event | Description | Type | -| --------------------- | ---------------------------------------------------------------------------------------------------------------------- | -------------------------- | -| `codeDidChange` | Emitted when the code was edited (see attribute editable). Propagate the root component itself | `CustomEvent` | -| `prismLanguageError` | Emitted when a language could not be loaded. The component fallback to javascript language to display the code anyway. | `CustomEvent` | -| `prismLanguageLoaded` | Emitted when a language is fetched and loaded | `CustomEvent` | +| Event | Description | Type | +| --------------------- | ---------------------------------------------------------------------------------------------------------------------- | --------------------- | +| `prismLanguageError` | Emitted when a language could not be loaded. The component fallback to javascript language to display the code anyway. | `CustomEvent` | +| `prismLanguageLoaded` | Emitted when a language is fetched and loaded | `CustomEvent` | ## Methods @@ -124,7 +124,7 @@ Type: `Promise` | Name | Description | | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ | -| `--deckgo-editable-cursor` | The mouse cursor displayed when hovering the editable element @default text | +| `--deckgo-highlight-code-background` | Ubuntu code background | | `--deckgo-highlight-code-border-radius` | The border radius of the displayed code | | `--deckgo-highlight-code-carbon-background` | The background property of the host container @default #282a36 | | `--deckgo-highlight-code-carbon-border` | The border property of the host container | @@ -134,19 +134,17 @@ Type: `Promise` | `--deckgo-highlight-code-carbon-display` | The display property of the host container @default block | | `--deckgo-highlight-code-carbon-header-button-border-radius` | The border-radius of a button of the card header @default 50% | | `--deckgo-highlight-code-carbon-header-button-green-background` | The background of the third button of the card header @default #27c93f | -| `--deckgo-highlight-code-carbon-header-button-green-border` | The color of the third button of the card header @default 0.5px solid #1aab29 | | `--deckgo-highlight-code-carbon-header-button-height` | The height of a button of the card header @default 0.75em | | `--deckgo-highlight-code-carbon-header-button-margin` | The margin of a button of the card header @default 0.5em 0.375em 0.5em 0 | | `--deckgo-highlight-code-carbon-header-button-red-background` | The background of the first button of the card header @default #ff5f56 | -| `--deckgo-highlight-code-carbon-header-button-red-border` | The border of the first button of the card header @default 0.5px solid #e0443e | | `--deckgo-highlight-code-carbon-header-button-width` | The width of a button of the card header @default 0.75em | | `--deckgo-highlight-code-carbon-header-button-yellow-background` | The background of the second button of the card header @default #ffbd2e | -| `--deckgo-highlight-code-carbon-header-button-yellow-border` | The border of the second button of the card header @default 0.5px solid #dea123 | | `--deckgo-highlight-code-carbon-header-margin` | The margin property of the card header @default 0 | | `--deckgo-highlight-code-carbon-header-padding` | The padding property of the card header. @default 8px 16px | | `--deckgo-highlight-code-carbon-margin` | The margin property of the host container @default 16px 0 | | `--deckgo-highlight-code-carbon-overflow` | The overflow property of the host container. @default auto | | `--deckgo-highlight-code-carbon-toolbar-display` | The display property of the toolbar container @default bloack | +| `--deckgo-highlight-code-color` | Ubuntu container color @default inherit | | `--deckgo-highlight-code-container-align-items` | The attribute align-items of the code's container | | `--deckgo-highlight-code-container-display` | The attribute display of the code's container @default bloack | | `--deckgo-highlight-code-container-flex-direction` | The attribute flex-direction of the code's container | @@ -155,8 +153,7 @@ Type: `Promise` | `--deckgo-highlight-code-container-width` | The attribute width of the code's container | | `--deckgo-highlight-code-direction` | The direction of the displayed code @default ltr | | `--deckgo-highlight-code-display` | The display property of the code @default block | -| `--deckgo-highlight-code-empty-text` | Place holder in case the editable is set to true @default Click to add your code | -| `--deckgo-highlight-code-font-family` | The family of the font for the code @default monospace | +| `--deckgo-highlight-code-font-family` | Ubuntu font family @default Ubuntu mono | | `--deckgo-highlight-code-font-size` | The size of the font for the code | | `--deckgo-highlight-code-height` | Height property of the shadowed code block @default 100% | | `--deckgo-highlight-code-line-background` | The background of the lines you wish to highlight | @@ -224,6 +221,19 @@ Type: `Promise` | `--deckgo-lowlight-code-line-opacity` | The opacity of the lines you do not wish to highlight @default 0.32 | +## Dependencies + +### Depends on + +- [deckgo-highlight-code-edit](../edit) + +### Graph +```mermaid +graph TD; + deckgo-highlight-code --> deckgo-highlight-code-edit + style deckgo-highlight-code fill:#f9f,stroke:#333,stroke-width:4px +``` + ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/webcomponents/highlight-code/src/declarations/deckdeckgo-highlight-code-carbon-theme.tsx b/webcomponents/highlight-code/src/declarations/carbon-theme.ts similarity index 100% rename from webcomponents/highlight-code/src/declarations/deckdeckgo-highlight-code-carbon-theme.tsx rename to webcomponents/highlight-code/src/declarations/carbon-theme.ts diff --git a/webcomponents/highlight-code/src/declarations/deckdeckgo-highlight-code-languages.tsx b/webcomponents/highlight-code/src/declarations/languages.ts similarity index 100% rename from webcomponents/highlight-code/src/declarations/deckdeckgo-highlight-code-languages.tsx rename to webcomponents/highlight-code/src/declarations/languages.ts diff --git a/webcomponents/highlight-code/src/declarations/deckdeckgo-highlight-code-terminal.tsx b/webcomponents/highlight-code/src/declarations/terminal.ts similarity index 100% rename from webcomponents/highlight-code/src/declarations/deckdeckgo-highlight-code-terminal.tsx rename to webcomponents/highlight-code/src/declarations/terminal.ts diff --git a/webcomponents/highlight-code/src/index.html b/webcomponents/highlight-code/src/index.html index 0bb57891a..bf558d35c 100644 --- a/webcomponents/highlight-code/src/index.html +++ b/webcomponents/highlight-code/src/index.html @@ -31,6 +31,12 @@

Editable:

} + +