diff --git a/CHANGELOG.md b/CHANGELOG.md index 3ac1d28c0..1bc7bcc58 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,11 +28,12 @@ ### Web Components: New -- markdown: v1.1.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/markdown/CHANGELOG.md)) +- markdown: v2.0.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/markdown/CHANGELOG.md)) ### Web Components - core: v8.1.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/core/CHANGELOG.md)) +- highlight-code: v2.2.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/highlight-code/CHANGELOG.md)) - lazy-img: v3.0.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/lazy-img/CHANGELOG.md)) ### Others: New @@ -43,8 +44,9 @@ - deck-utils: v3.2.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/utils/deck/CHANGELOG.md)) - slide-utils: v2.6.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/utils/slide/CHANGELOG.md)) -- starter kit: v7.1.1 ([CHANGELOG](https://github.com/deckgo/starter-kit/blob/master/CHANGELOG.md)) -- studio kit: v7.1.1 ([CHANGELOG](https://github.com/deckgo/studio-kit/blob/master/CHANGELOG.md)) +- starter kit: v7.1.2 ([CHANGELOG](https://github.com/deckgo/starter-kit/blob/master/CHANGELOG.md)) +- studio kit: v7.1.2 ([CHANGELOG](https://github.com/deckgo/studio-kit/blob/master/CHANGELOG.md)) +- utils: v1.7.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/utils/utils/CHANGELOG.md)) diff --git a/README.md b/README.md index e399b10a6..eb8307b58 100644 --- a/README.md +++ b/README.md @@ -112,8 +112,8 @@ Are you interested to contribute to our open source project? That would be aweso | **Cloud** | | ![version](https://img.shields.io/static/v1.svg?label=production&message=v1.1.1&color=success) | [`README`](cloud/README.md) | [`CHANGELOG`](cloud/CHANGELOG.md) | | **Gatsby plugin highlight code** | | [![version](https://img.shields.io/npm/v/gatsby-remark-highlight-code/latest.svg?color=success)](https://www.npmjs.com/package/gatsby-remark-highlight-code) | [`Repo`](https://github.com/deckgo/gatsby-remark-highlight-code/) | [`CHANGELOG`](https://github.com/deckgo/gatsby-remark-highlight-code/blob/master/CHANGELOG.md) | | **Infrastructure** | | | [`README`](infra/README.md) | | -| **Starter kit** | | ![version](https://img.shields.io/static/v1.svg?label=version&message=v7.1.1&color=success) | [`Repo`](http://github.com/deckgo/starter-kit/) | [`CHANGELOG`](https://github.com/deckgo/starter-kit/blob/master/CHANGELOG.md) | -| **Studio kit** | | ![version](https://img.shields.io/static/v1.svg?label=version&message=v7.1.1&color=success) | [`Repo`](http://github.com/deckgo/studio-kit/) | [`CHANGELOG`](https://github.com/deckgo/studio-kit/blob/master/CHANGELOG.md) | +| **Starter kit** | | ![version](https://img.shields.io/static/v1.svg?label=version&message=v7.1.2&color=success) | [`Repo`](http://github.com/deckgo/starter-kit/) | [`CHANGELOG`](https://github.com/deckgo/starter-kit/blob/master/CHANGELOG.md) | +| **Studio kit** | | ![version](https://img.shields.io/static/v1.svg?label=version&message=v7.1.2&color=success) | [`Repo`](http://github.com/deckgo/studio-kit/) | [`CHANGELOG`](https://github.com/deckgo/studio-kit/blob/master/CHANGELOG.md) | | **WAI Lambda** | | | [`Repo`](https://github.com/deckgo/wai-lambda) | | | **Webpack plugins** | [`deckdeckgo-webpack-plugins`](https://www.npmjs.com/package/deckdeckgo-webpack-plugins) | [![version](https://img.shields.io/npm/v/deckdeckgo-webpack-plugins/latest.svg?color=success)](https://www.npmjs.com/package/deckdeckgo-webpack-plugins) | [`README`](webpack/README.md) | [`CHANGELOG`](webpack/CHANGELOG.md) | diff --git a/docs/docs/components/app-components-highlight-code/app-components-highlight-code.md b/docs/docs/components/app-components-highlight-code/app-components-highlight-code.md index cfd3057f2..2932cd90a 100644 --- a/docs/docs/components/app-components-highlight-code/app-components-highlight-code.md +++ b/docs/docs/components/app-components-highlight-code/app-components-highlight-code.md @@ -228,20 +228,20 @@ If the code is displayed as an "ubuntu" terminal card (`terminal` property equal | --deckgo-highlight-code-ubuntu-header-button-height | 12px | The height of a button of the card header. | | --deckgo-highlight-code-ubuntu-header-button-border-radius | 50% | The border-radius of a button of the card header. | | --deckgo-highlight-code-ubuntu-header-button-margin | 0 6px 0 0 | The margin of a button of the card header. | -| --deckgo-highlight-code-carbon-header-button-font-size | 7px | The font-size of a button of the card header. | -| --deckgo-highlight-code-carbon-header-button-color | black | The color of a button of the card header. | -| --deckgo-highlight-code-carbon-header-button-text-shadow | 0px 1px 0px rgba(255, 255, 255, 0.2) | The text-shadow of a button of the card header. | -| --deckgo-highlight-code-carbon-header-button-box-shadow | 0px 0px 1px 0px #41403a, 0px 1px 1px 0px #474642 | The box-shadow of a button of the card header. | -| --deckgo-highlight-code-carbon-header-button-close-background | linear-gradient(#f37458 0%, #de4c12 100%) | The close button background of the card header. | -| --deckgo-highlight-code-carbon-header-button-close-border | | The close button border of the card header. | -| --deckgo-highlight-code-carbon-header-button-minimize-background | linear-gradient(#7d7871 0%, #595953 100%) | The minimize button background of the card header. | -| --deckgo-highlight-code-carbon-header-button-minimize-border | | The minimize button border of the card header. | -| --deckgo-highlight-code-carbon-header-button-maximize-background | linear-gradient(#7d7871 0%, #595953 100%) | The maximize button background of the card header. | -| --deckgo-highlight-code-carbon-header-button-maximize-border | | The maximize button border of the card header. | -| --deckgo-highlight-code-carbon-header-user-color | #d5d0ce | The user's color of the card header. | -| --deckgo-highlight-code-carbon-header-user-font-size | 12px | The user's font-size of the card header. | -| --deckgo-highlight-code-carbon-header-user-line-height | 14px | The user's line-height of the card header. | -| --deckgo-highlight-code-carbon-header-user-margin | 0 0 1px 4px | The user's margin of the card header. | +| --deckgo-highlight-code-ubuntu-header-button-font-size | 7px | The font-size of a button of the card header. | +| --deckgo-highlight-code-ubuntu-header-button-color | black | The color of a button of the card header. | +| --deckgo-highlight-code-ubuntu-header-button-text-shadow | 0px 1px 0px rgba(255, 255, 255, 0.2) | The text-shadow of a button of the card header. | +| --deckgo-highlight-code-ubuntu-header-button-box-shadow | 0px 0px 1px 0px #41403a, 0px 1px 1px 0px #474642 | The box-shadow of a button of the card header. | +| --deckgo-highlight-code-ubuntu-header-button-close-background | linear-gradient(#f37458 0%, #de4c12 100%) | The close button background of the card header. | +| --deckgo-highlight-code-ubuntu-header-button-close-border | | The close button border of the card header. | +| --deckgo-highlight-code-ubuntu-header-button-minimize-background | linear-gradient(#7d7871 0%, #595953 100%) | The minimize button background of the card header. | +| --deckgo-highlight-code-ubuntu-header-button-minimize-border | | The minimize button border of the card header. | +| --deckgo-highlight-code-ubuntu-header-button-maximize-background | linear-gradient(#7d7871 0%, #595953 100%) | The maximize button background of the card header. | +| --deckgo-highlight-code-ubuntu-header-button-maximize-border | | The maximize button border of the card header. | +| --deckgo-highlight-code-ubuntu-header-user-color | #d5d0ce | The user's color of the card header. | +| --deckgo-highlight-code-ubuntu-header-user-font-size | 12px | The user's font-size of the card header. | +| --deckgo-highlight-code-ubuntu-header-user-line-height | 14px | The user's line-height of the card header. | +| --deckgo-highlight-code-ubuntu-header-user-margin | 0 0 1px 4px | The user's margin of the card header. | ### Methods diff --git a/docs/package-lock.json b/docs/package-lock.json index 9094adcbd..5e56e4eaf 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -1096,12 +1096,19 @@ } }, "@deckdeckgo/highlight-code": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@deckdeckgo/highlight-code/-/highlight-code-2.1.1.tgz", - "integrity": "sha512-nNYogbsM/uiNKLPNpiwBsmdi1wmIoidrH8jX6H0I6R1rva3DqtN7VJBrwFiiSBYPE5220LOchQAputmoGkQczQ==", + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/@deckdeckgo/highlight-code/-/highlight-code-2.2.1.tgz", + "integrity": "sha512-58pTwLeq7WiqBePOCWmjD7QkC0hkJph1xzcaOBqIBntS/YuPrP4JXgwdiNwzd4rwmS+U4nUJJrLZ1eZD0/iUQQ==", "requires": { "@deckdeckgo/utils": "1.3.0", "prismjs": "^1.21.0" + }, + "dependencies": { + "@deckdeckgo/utils": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.3.0.tgz", + "integrity": "sha512-QrV3jyqIlL+u1NUqSyMsnIsfORLqBuzEhK2+rGYCT89TLVhnPpOP0b11aP/XvHyJMzG9mZvjadLN/MQ9ls9UGw==" + } } }, "@deckdeckgo/inline-editor": { @@ -1129,9 +1136,9 @@ "integrity": "sha512-Uuwye8ln17PgZYE4TOFfRTQD+3lUu6UFxoLVbutzqf/N7DAkkgvlvb2Asg0yul0lQfM27ocANAKK1LeLvMIcZw==" }, "@deckdeckgo/markdown": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/markdown/-/markdown-1.1.0.tgz", - "integrity": "sha512-uWlC6yETjdUlxDEC1kvOyLQ16LME0J1vXiaADb7HZCyJLBvyS09fyj2lceoo1542koNnZ6vMKPbTwaLkVe19Xw==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/markdown/-/markdown-2.0.0.tgz", + "integrity": "sha512-baynudYCgY82gZ4nd3LHJKpxIsOy40C7tR6+Ea8t77pjvVrSvQzqnzmXrogLWxwV4X+gAOg4mosoaXWwg+1BlA==", "requires": { "marked": "^1.2.3" } @@ -1307,9 +1314,9 @@ "dev": true }, "@deckdeckgo/utils": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.3.0.tgz", - "integrity": "sha512-QrV3jyqIlL+u1NUqSyMsnIsfORLqBuzEhK2+rGYCT89TLVhnPpOP0b11aP/XvHyJMzG9mZvjadLN/MQ9ls9UGw==" + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.7.0.tgz", + "integrity": "sha512-aSc7v4lJeHrJTNKVZQUW8Q+qVNU0JNys5y4aerJ/3cEGyKsvzUqgA4QMI25dgn/Flz8f2gGFjfdqSzIR//zKQQ==" }, "@deckdeckgo/word-cloud": { "version": "1.0.5", diff --git a/docs/package.json b/docs/package.json index 93c24b12a..a89aba9d8 100644 --- a/docs/package.json +++ b/docs/package.json @@ -20,10 +20,10 @@ "@deckdeckgo/deck-utils": "^3.2.1", "@deckdeckgo/demo": "^2.0.1", "@deckdeckgo/drag-resize-rotate": "^2.0.1", - "@deckdeckgo/highlight-code": "^2.1.1", + "@deckdeckgo/highlight-code": "^2.2.1", "@deckdeckgo/inline-editor": "^3.0.2", "@deckdeckgo/lazy-img": "^3.0.0", - "@deckdeckgo/markdown": "^1.1.0", + "@deckdeckgo/markdown": "^2.0.0", "@deckdeckgo/math": "^2.0.3", "@deckdeckgo/qrcode": "^2.0.1", "@deckdeckgo/reveal": "^1.0.0", @@ -44,6 +44,7 @@ "@deckdeckgo/slide-video": "^2.2.2", "@deckdeckgo/slide-youtube": "^2.2.2", "@deckdeckgo/social": "^4.0.0", + "@deckdeckgo/utils": "^1.7.0", "@deckdeckgo/word-cloud": "^1.0.5", "@deckdeckgo/youtube": "^2.0.1", "@ionic/core": "^5.4.4", diff --git a/docs/src/app/pages/docs/components/app-components-highlight-code/app-components-highlight-code.tsx b/docs/src/app/pages/docs/components/app-components-highlight-code/app-components-highlight-code.tsx index d3ad9eea8..3ba643775 100644 --- a/docs/src/app/pages/docs/components/app-components-highlight-code/app-components-highlight-code.tsx +++ b/docs/src/app/pages/docs/components/app-components-highlight-code/app-components-highlight-code.tsx @@ -780,72 +780,72 @@ export class AppComponentsHighlightCode { The margin of a button of the card header. - --deckgo-highlight-code-carbon-header-button-font-size + --deckgo-highlight-code-ubuntu-header-button-font-size 7px The font-size of a button of the card header. - --deckgo-highlight-code-carbon-header-button-color + --deckgo-highlight-code-ubuntu-header-button-color black The color of a button of the card header. - --deckgo-highlight-code-carbon-header-button-text-shadow + --deckgo-highlight-code-ubuntu-header-button-text-shadow 0px 1px 0px rgba(255, 255, 255, 0.2) The text-shadow of a button of the card header. - --deckgo-highlight-code-carbon-header-button-box-shadow + --deckgo-highlight-code-ubuntu-header-button-box-shadow 0px 0px 1px 0px #41403a, 0px 1px 1px 0px #474642 The box-shadow of a button of the card header. - --deckgo-highlight-code-carbon-header-button-close-background + --deckgo-highlight-code-ubuntu-header-button-close-background linear-gradient(#f37458 0%, #de4c12 100%) The close button background of the card header. - --deckgo-highlight-code-carbon-header-button-close-border + --deckgo-highlight-code-ubuntu-header-button-close-border The close button border of the card header. - --deckgo-highlight-code-carbon-header-button-minimize-background + --deckgo-highlight-code-ubuntu-header-button-minimize-background linear-gradient(#7d7871 0%, #595953 100%) The minimize button background of the card header. - --deckgo-highlight-code-carbon-header-button-minimize-border + --deckgo-highlight-code-ubuntu-header-button-minimize-border The minimize button border of the card header. - --deckgo-highlight-code-carbon-header-button-maximize-background + --deckgo-highlight-code-ubuntu-header-button-maximize-background linear-gradient(#7d7871 0%, #595953 100%) The maximize button background of the card header. - --deckgo-highlight-code-carbon-header-button-maximize-border + --deckgo-highlight-code-ubuntu-header-button-maximize-border The maximize button border of the card header. - --deckgo-highlight-code-carbon-header-user-color + --deckgo-highlight-code-ubuntu-header-user-color #d5d0ce The user's color of the card header. - --deckgo-highlight-code-carbon-header-user-font-size + --deckgo-highlight-code-ubuntu-header-user-font-size 12px The user's font-size of the card header. - --deckgo-highlight-code-carbon-header-user-line-height + --deckgo-highlight-code-ubuntu-header-user-line-height 14px The user's line-height of the card header. - --deckgo-highlight-code-carbon-header-user-margin + --deckgo-highlight-code-ubuntu-header-user-margin 0 0 1px 4px The user's margin of the card header. diff --git a/remote/package-lock.json b/remote/package-lock.json index 5626d16ff..923f9dd7c 100644 --- a/remote/package-lock.json +++ b/remote/package-lock.json @@ -1118,12 +1118,19 @@ } }, "@deckdeckgo/highlight-code": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@deckdeckgo/highlight-code/-/highlight-code-2.1.1.tgz", - "integrity": "sha512-nNYogbsM/uiNKLPNpiwBsmdi1wmIoidrH8jX6H0I6R1rva3DqtN7VJBrwFiiSBYPE5220LOchQAputmoGkQczQ==", + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/@deckdeckgo/highlight-code/-/highlight-code-2.2.1.tgz", + "integrity": "sha512-58pTwLeq7WiqBePOCWmjD7QkC0hkJph1xzcaOBqIBntS/YuPrP4JXgwdiNwzd4rwmS+U4nUJJrLZ1eZD0/iUQQ==", "requires": { "@deckdeckgo/utils": "1.3.0", "prismjs": "^1.21.0" + }, + "dependencies": { + "@deckdeckgo/utils": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.3.0.tgz", + "integrity": "sha512-QrV3jyqIlL+u1NUqSyMsnIsfORLqBuzEhK2+rGYCT89TLVhnPpOP0b11aP/XvHyJMzG9mZvjadLN/MQ9ls9UGw==" + } } }, "@deckdeckgo/lazy-img": { @@ -1132,9 +1139,9 @@ "integrity": "sha512-Uuwye8ln17PgZYE4TOFfRTQD+3lUu6UFxoLVbutzqf/N7DAkkgvlvb2Asg0yul0lQfM27ocANAKK1LeLvMIcZw==" }, "@deckdeckgo/markdown": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/markdown/-/markdown-1.1.0.tgz", - "integrity": "sha512-uWlC6yETjdUlxDEC1kvOyLQ16LME0J1vXiaADb7HZCyJLBvyS09fyj2lceoo1542koNnZ6vMKPbTwaLkVe19Xw==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/markdown/-/markdown-2.0.0.tgz", + "integrity": "sha512-baynudYCgY82gZ4nd3LHJKpxIsOy40C7tR6+Ea8t77pjvVrSvQzqnzmXrogLWxwV4X+gAOg4mosoaXWwg+1BlA==", "requires": { "marked": "^1.2.3" } @@ -1315,9 +1322,9 @@ "dev": true }, "@deckdeckgo/utils": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.3.0.tgz", - "integrity": "sha512-QrV3jyqIlL+u1NUqSyMsnIsfORLqBuzEhK2+rGYCT89TLVhnPpOP0b11aP/XvHyJMzG9mZvjadLN/MQ9ls9UGw==" + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.7.0.tgz", + "integrity": "sha512-aSc7v4lJeHrJTNKVZQUW8Q+qVNU0JNys5y4aerJ/3cEGyKsvzUqgA4QMI25dgn/Flz8f2gGFjfdqSzIR//zKQQ==" }, "@deckdeckgo/word-cloud": { "version": "1.0.5", @@ -3369,9 +3376,9 @@ } }, "marked": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/marked/-/marked-1.2.4.tgz", - "integrity": "sha512-6x5TFGCTKSQBLTZtOburGxCxFEBJEGYVLwCMTBCxzvyuisGcC20UNzDSJhCr/cJ/Kmh6ulfJm10g6WWEAJ3kvg==" + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/marked/-/marked-1.2.5.tgz", + "integrity": "sha512-2AlqgYnVPOc9WDyWu7S5DJaEZsfk6dNh/neatQ3IHUW4QLutM/VPSH9lG7bif+XjFWc9K9XR3QvR+fXuECmfdA==" }, "md5.js": { "version": "1.3.5", diff --git a/remote/package.json b/remote/package.json index 5b7b4f605..57fb259ca 100644 --- a/remote/package.json +++ b/remote/package.json @@ -20,9 +20,9 @@ "@deckdeckgo/deck-utils": "^3.2.1", "@deckdeckgo/demo": "^2.0.1", "@deckdeckgo/drag-resize-rotate": "^2.0.1", - "@deckdeckgo/highlight-code": "^2.1.1", + "@deckdeckgo/highlight-code": "^2.2.1", "@deckdeckgo/lazy-img": "^3.0.0", - "@deckdeckgo/markdown": "^1.1.0", + "@deckdeckgo/markdown": "^2.0.0", "@deckdeckgo/math": "^2.0.3", "@deckdeckgo/qrcode": "^2.0.1", "@deckdeckgo/remote-utils": "^1.0.0", @@ -44,7 +44,7 @@ "@deckdeckgo/slide-video": "^2.2.2", "@deckdeckgo/slide-youtube": "^2.2.2", "@deckdeckgo/social": "^4.0.0", - "@deckdeckgo/utils": "^1.3.0", + "@deckdeckgo/utils": "^1.7.0", "@deckdeckgo/word-cloud": "^1.0.5", "@deckdeckgo/youtube": "^2.0.1", "@ionic/core": "^5.4.4", diff --git a/studio/package-lock.json b/studio/package-lock.json index 236733344..a350dfbdf 100644 --- a/studio/package-lock.json +++ b/studio/package-lock.json @@ -1158,12 +1158,19 @@ } }, "@deckdeckgo/highlight-code": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@deckdeckgo/highlight-code/-/highlight-code-2.1.1.tgz", - "integrity": "sha512-nNYogbsM/uiNKLPNpiwBsmdi1wmIoidrH8jX6H0I6R1rva3DqtN7VJBrwFiiSBYPE5220LOchQAputmoGkQczQ==", + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/@deckdeckgo/highlight-code/-/highlight-code-2.2.1.tgz", + "integrity": "sha512-58pTwLeq7WiqBePOCWmjD7QkC0hkJph1xzcaOBqIBntS/YuPrP4JXgwdiNwzd4rwmS+U4nUJJrLZ1eZD0/iUQQ==", "requires": { "@deckdeckgo/utils": "1.3.0", "prismjs": "^1.21.0" + }, + "dependencies": { + "@deckdeckgo/utils": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.3.0.tgz", + "integrity": "sha512-QrV3jyqIlL+u1NUqSyMsnIsfORLqBuzEhK2+rGYCT89TLVhnPpOP0b11aP/XvHyJMzG9mZvjadLN/MQ9ls9UGw==" + } } }, "@deckdeckgo/inline-editor": { @@ -1191,9 +1198,9 @@ "integrity": "sha512-Uuwye8ln17PgZYE4TOFfRTQD+3lUu6UFxoLVbutzqf/N7DAkkgvlvb2Asg0yul0lQfM27ocANAKK1LeLvMIcZw==" }, "@deckdeckgo/markdown": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/markdown/-/markdown-1.1.0.tgz", - "integrity": "sha512-uWlC6yETjdUlxDEC1kvOyLQ16LME0J1vXiaADb7HZCyJLBvyS09fyj2lceoo1542koNnZ6vMKPbTwaLkVe19Xw==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@deckdeckgo/markdown/-/markdown-2.0.1.tgz", + "integrity": "sha512-FZYe59evR8N9Xe+T/Z0km3aA/FeW33tMOaKeje21hbM9iAqdIj00gHx1Ner0wZGdfedNTLtYzJffZYeRbV7ylA==", "requires": { "marked": "^1.2.3" } @@ -1351,9 +1358,9 @@ "dev": true }, "@deckdeckgo/utils": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.3.0.tgz", - "integrity": "sha512-QrV3jyqIlL+u1NUqSyMsnIsfORLqBuzEhK2+rGYCT89TLVhnPpOP0b11aP/XvHyJMzG9mZvjadLN/MQ9ls9UGw==" + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-1.7.0.tgz", + "integrity": "sha512-aSc7v4lJeHrJTNKVZQUW8Q+qVNU0JNys5y4aerJ/3cEGyKsvzUqgA4QMI25dgn/Flz8f2gGFjfdqSzIR//zKQQ==" }, "@deckdeckgo/word-cloud": { "version": "1.0.5", @@ -3213,9 +3220,9 @@ } }, "marked": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/marked/-/marked-1.2.4.tgz", - "integrity": "sha512-6x5TFGCTKSQBLTZtOburGxCxFEBJEGYVLwCMTBCxzvyuisGcC20UNzDSJhCr/cJ/Kmh6ulfJm10g6WWEAJ3kvg==" + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/marked/-/marked-1.2.5.tgz", + "integrity": "sha512-2AlqgYnVPOc9WDyWu7S5DJaEZsfk6dNh/neatQ3IHUW4QLutM/VPSH9lG7bif+XjFWc9K9XR3QvR+fXuECmfdA==" }, "merge-stream": { "version": "2.0.0", diff --git a/studio/package.json b/studio/package.json index 70377220c..3d1186ffc 100644 --- a/studio/package.json +++ b/studio/package.json @@ -24,10 +24,10 @@ "@deckdeckgo/deck-utils": "^3.2.1", "@deckdeckgo/demo": "^2.0.1", "@deckdeckgo/drag-resize-rotate": "^2.0.1", - "@deckdeckgo/highlight-code": "^2.1.1", + "@deckdeckgo/highlight-code": "^2.2.1", "@deckdeckgo/inline-editor": "^3.0.2", "@deckdeckgo/lazy-img": "^3.0.0", - "@deckdeckgo/markdown": "^1.1.0", + "@deckdeckgo/markdown": "^2.0.1", "@deckdeckgo/math": "^2.0.3", "@deckdeckgo/qrcode": "^2.0.1", "@deckdeckgo/remote": "^2.0.1", @@ -45,7 +45,7 @@ "@deckdeckgo/slide-utils": "^2.6.1", "@deckdeckgo/slide-youtube": "^2.2.2", "@deckdeckgo/social": "^4.0.0", - "@deckdeckgo/utils": "^1.3.0", + "@deckdeckgo/utils": "^1.7.0", "@deckdeckgo/word-cloud": "^1.0.5", "@deckdeckgo/youtube": "^2.0.1", "@ionic/core": "^5.4.4", diff --git a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx index 6210cd82c..62127a8f0 100644 --- a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx +++ b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx @@ -162,14 +162,8 @@ export class AppActionsElement { } @Method() - blurSelectedElement(): Promise { - return new Promise(async (resolve) => { - if (this.selectedElement) { - this.selectedElement.blur(); - } - - resolve(); - }); + async blurSelectedElement() { + this.selectedElement?.blur(); } private select(element: HTMLElement, autoOpen: boolean): Promise { @@ -200,17 +194,15 @@ export class AppActionsElement { } @Method() - unSelect(): Promise { - return new Promise(async (resolve) => { - if (this.selectedElement) { - this.selectedElement.removeEventListener('paste', this.cleanOnPaste, true); - await this.detachMoveToolbarOnElement(); + async unSelect() { + if (!this.selectedElement) { + return; + } - await this.reset(); - } + this.selectedElement.removeEventListener('paste', this.cleanOnPaste, true); + await this.detachMoveToolbarOnElement(); - resolve(); - }); + await this.reset(); } private findSelectedElement(element: HTMLElement): Promise { diff --git a/studio/src/app/components/editor/publish/app-publish-edit/app-publish-edit.tsx b/studio/src/app/components/editor/publish/app-publish-edit/app-publish-edit.tsx index 57fc1eee3..8bda84fa4 100644 --- a/studio/src/app/components/editor/publish/app-publish-edit/app-publish-edit.tsx +++ b/studio/src/app/components/editor/publish/app-publish-edit/app-publish-edit.tsx @@ -115,7 +115,7 @@ export class AppPublishEdit { return; } - const slide: HTMLElement = document.querySelector('deckgo-deck > *:first-child'); + const slide: HTMLElement = document.querySelector('app-editor main deckgo-deck > *:first-child'); if (slide?.tagName?.toLowerCase().indexOf('deckgo-slide') > -1) { const contentElement: HTMLElement = slide.querySelector('[slot="content"]'); diff --git a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss new file mode 100644 index 000000000..c3ec49e52 --- /dev/null +++ b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.scss @@ -0,0 +1,73 @@ +@use "../../../../../global/theme/editor/editor-mixin"; + +app-slide-preview { + position: absolute; + top: var(--ios-top, 8px); + right: 8px; + + transition: opacity 0.5s; + + visibility: initial; + opacity: 1; + + &:not(.preview) { + visibility: hidden; + opacity: 0; + } + + article { + position: relative; + + --preview-width: 200px; + + width: var(--preview-width); + height: calc(var(--preview-width) * 9 / 16); + + @media screen and (max-width: 768px) { + --preview-width: 128px; + } + + overflow: hidden; + + @include editor-mixin.panel; + + deckgo-deck { + --slide-padding-start: 4px; + --slide-padding-top: 8px; + --slide-padding-end: 4px; + --slide-padding-bottom: 8px; + + --slide-split-padding-start: 4px; + --slide-split-padding-top: 8px; + --slide-split-padding-end: 4px; + --slide-split-padding-bottom: 8px; + + --deckgo-highlight-code-carbon-header-padding: 2px 8px; + --deckgo-highlight-code-carbon-header-button-width: 2px; + --deckgo-highlight-code-carbon-header-button-height: 2px; + --deckgo-highlight-code-margin: 0 0 4px; + --deckgo-highlight-code-padding: 0 8px; + + --deckgo-highlight-code-carbon-margin: 8px 0; + --deckgo-highlight-code-ubuntu-margin: 8px 0; + + --deckgo-highlight-code-carbon-box-shadow: rgba(0, 0, 0, 0.55) 0 2px 4px; + --deckgo-highlight-code-ubuntu-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5); + + --deckgo-highlight-code-ubuntu-header-height: 8px; + --deckgo-highlight-code-ubuntu-header-button-width: 4px; + --deckgo-highlight-code-ubuntu-header-button-height: 4px; + --deckgo-highlight-code-ubuntu-header-button-span-display: none; + + --deckgo-markdown-container-padding: 4px 8px; + + .deckgo-slide-container { + > * { + margin: 0; + padding: 0; + border-color: transparent; + } + } + } + } +} diff --git a/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx new file mode 100644 index 000000000..b9dc3745c --- /dev/null +++ b/studio/src/app/components/editor/slide/app-slide-preview/app-slide-preview.tsx @@ -0,0 +1,154 @@ +import {Component, h, Host, Listen, State, Event, EventEmitter, Element, Prop} from '@stencil/core'; + +import {cleanContent} from '@deckdeckgo/deck-utils'; +import {debounce, isIOS, isLandscape} from '@deckdeckgo/utils'; + +import {SlotUtils} from '../../../../utils/editor/slot.utils'; + +@Component({ + tag: 'app-slide-preview', + styleUrl: 'app-slide-preview.scss', +}) +export class AppSlidePreview { + @Element() el: HTMLElement; + + @Prop() + deckRef!: HTMLDeckgoDeckElement; + + @State() + private preview: boolean = false; + + @State() + private iosPositionTop: string | undefined = undefined; + + private deckPreviewRef!: HTMLDeckgoDeckElement; + + @Event({bubbles: false}) private previewAttached: EventEmitter; + + private readonly debounceUpdatePreview: () => void; + + constructor() { + this.debounceUpdatePreview = debounce(async () => { + await this.updatePreview(); + }, 500); + } + + @Listen('ionKeyboardDidShow', {target: 'window'}) + onKeyboardDidShow(_$event: CustomEvent<{keyboardHeight: number}>) {} + + componentDidUpdate() { + if (this.preview) { + this.previewAttached.emit(); + } + } + + @Listen('slideDidUpdate', {target: 'document'}) + async onSlideDidUpdate() { + if (this.preview) { + this.debounceUpdatePreview(); + } + } + + @Listen('resetted', {target: 'document'}) + async onResetElement() { + this.preview = false; + } + + @Listen('elementFocus', {target: 'document'}) + async onElementFocus($event: CustomEvent) { + if (!$event || !$event.detail) { + return; + } + + const selectedElement: HTMLElement = $event.detail; + + await this.stickyIOS(selectedElement); + + this.preview = + selectedElement?.parentElement?.nodeName?.toLowerCase().indexOf('deckgo-slide') >= 0 && + SlotUtils.isNodeEditable(selectedElement) && + !SlotUtils.isNodeWordCloud(selectedElement); + + if (this.preview) { + await this.initDeckPreview(); + + this.el.addEventListener('previewAttached', async () => await this.updateSlide(selectedElement.parentElement), {once: true}); + + this.deckRef.addEventListener('keypress', () => this.debounceUpdatePreview(), {passive: true}); + this.deckRef.addEventListener('paste', () => this.debounceUpdatePreview(), {passive: true}); + } else { + this.deckRef.removeEventListener('keypress', () => this.debounceUpdatePreview(), true); + this.deckRef.removeEventListener('paste', () => this.debounceUpdatePreview(), true); + } + } + + private async stickyIOS(selectedElement: HTMLElement) { + if (isIOS()) { + this.iosPositionTop = isLandscape() ? `calc(${selectedElement.offsetTop}px - (128px * 9 / 16) - 32px)` : undefined; + } + } + + async initDeckPreview() { + if (!this.deckRef) { + return; + } + + this.deckPreviewRef?.setAttribute('style', this.deckRef.style.cssText); + + await this.deckPreviewRef?.initSlideSize(); + } + + async updateSlide(slide: HTMLElement | undefined) { + if (!slide) { + return; + } + + const content: string = await cleanContent(slide.outerHTML); + + this.deckPreviewRef.innerHTML = content; + } + + private async blockSlide() { + await this.deckPreviewRef?.blockSlide(true); + } + + private async updatePreview() { + const index = await this.deckRef?.getActiveIndex(); + + if (index < 0) { + return; + } + + const slideElement: HTMLElement | undefined = this.deckRef?.querySelector('.deckgo-slide-container:nth-child(' + (index + 1) + ')'); + + await this.updateSlide(slideElement); + } + + render() { + const style = {...(this.iosPositionTop && {'--ios-top': this.iosPositionTop})}; + + return ( + +
{this.renderPreview()}
+
+ ); + } + + private renderPreview() { + if (!this.preview) { + return undefined; + } + + return ( + (this.deckPreviewRef = el as HTMLDeckgoDeckElement)} + onSlidesDidLoad={() => this.blockSlide()}> + ); + } +} diff --git a/studio/src/app/components/editor/app-slide-warning/app-slide-warning.scss b/studio/src/app/components/editor/slide/app-slide-warning/app-slide-warning.scss similarity index 100% rename from studio/src/app/components/editor/app-slide-warning/app-slide-warning.scss rename to studio/src/app/components/editor/slide/app-slide-warning/app-slide-warning.scss diff --git a/studio/src/app/components/editor/app-slide-warning/app-slide-warning.tsx b/studio/src/app/components/editor/slide/app-slide-warning/app-slide-warning.tsx similarity index 97% rename from studio/src/app/components/editor/app-slide-warning/app-slide-warning.tsx rename to studio/src/app/components/editor/slide/app-slide-warning/app-slide-warning.tsx index e72b3ffbe..1e525ef78 100644 --- a/studio/src/app/components/editor/app-slide-warning/app-slide-warning.tsx +++ b/studio/src/app/components/editor/slide/app-slide-warning/app-slide-warning.tsx @@ -4,9 +4,9 @@ import {popoverController} from '@ionic/core'; import {debounce} from '@deckdeckgo/utils'; -import {ContrastUtils} from '../../../utils/editor/contrast.utils'; -import {NodeUtils} from '../../../utils/editor/node.utils'; -import {SlotUtils} from '../../../utils/editor/slot.utils'; +import {ContrastUtils} from '../../../../utils/editor/contrast.utils'; +import {NodeUtils} from '../../../../utils/editor/node.utils'; +import {SlotUtils} from '../../../../utils/editor/slot.utils'; @Component({ tag: 'app-slide-warning', diff --git a/studio/src/app/handlers/editor/events/deck/deck-events.handler.tsx b/studio/src/app/handlers/editor/events/deck/deck-events.handler.tsx index 4c416784f..c9691b84c 100644 --- a/studio/src/app/handlers/editor/events/deck/deck-events.handler.tsx +++ b/studio/src/app/handlers/editor/events/deck/deck-events.handler.tsx @@ -26,7 +26,7 @@ import {SlideService} from '../../../../services/data/slide/slide.service'; import {DeckAction} from '../../../../utils/editor/deck-action'; export class DeckEventsHandler { - private el: HTMLElement; + private mainRef: HTMLElement; private deckService: DeckService; private slideService: SlideService; @@ -49,54 +49,54 @@ export class DeckEventsHandler { }, 500); } - init(el: HTMLElement): Promise { - return new Promise(async (resolve) => { - this.el = el; - - this.el.addEventListener('input', this.onInputChange, false); - this.el.addEventListener('slideDidChange', this.onSlideChange, false); - this.el.addEventListener('slideDidLoad', this.onSlideDidLoad, false); - this.el.addEventListener('slidesDidLoad', this.onSlidesDidLoad, false); - this.el.addEventListener('slideDelete', this.onSlideDelete, false); - this.el.addEventListener('codeDidChange', this.onCustomEventChange, false); - this.el.addEventListener('mathDidChange', this.onCustomEventChange, false); - this.el.addEventListener('markdownDidChange', this.onCustomEventChange, false); - this.el.addEventListener('wordCloudDidChange', this.onCustomEventChange, false); - this.el.addEventListener('imgDidChange', this.onCustomEventChange, false); - this.el.addEventListener('linkCreated', this.onCustomEventChange, false); - this.el.addEventListener('styleDidChange', this.onCustomEventChange, false); - this.el.addEventListener('drrDidChange', this.onCustomEventChange, false); - this.el.addEventListener('notesDidChange', this.onSlideChange, false); - - if (document) { - document.addEventListener('deckDidChange', this.onDeckChange, false); - document.addEventListener('deckNeedChange', this.onDeckNeedChange, false); - } + async init(el: HTMLElement) { + this.mainRef = el; + + this.mainRef.addEventListener('input', this.onInputChange, false); + this.mainRef.addEventListener('slideDidLoad', this.onSlideDidLoad, false); + this.mainRef.addEventListener('slidesDidLoad', this.onSlidesDidLoad, false); + this.mainRef.addEventListener('codeDidChange', this.onCustomEventChange, false); + this.mainRef.addEventListener('mathDidChange', this.onCustomEventChange, false); + this.mainRef.addEventListener('markdownDidChange', this.onCustomEventChange, false); + this.mainRef.addEventListener('wordCloudDidChange', this.onCustomEventChange, false); + this.mainRef.addEventListener('imgDidChange', this.onCustomEventChange, false); + this.mainRef.addEventListener('linkCreated', this.onCustomEventChange, false); + this.mainRef.addEventListener('drrDidChange', this.onCustomEventChange, false); + this.mainRef.addEventListener('notesDidChange', this.onSlideChange, false); + + if (!document) { + return; + } - resolve(); - }); + document.addEventListener('styleDidChange', this.onCustomEventChange, false); + document.addEventListener('slideDidChange', this.onSlideChange, false); + document.addEventListener('slideDelete', this.onSlideDelete, false); + document.addEventListener('deckDidChange', this.onDeckChange, false); + document.addEventListener('deckNeedChange', this.onDeckNeedChange, false); } destroy() { - this.el.removeEventListener('input', this.onInputChange, true); - this.el.removeEventListener('slideDidChange', this.onSlideChange, true); - this.el.removeEventListener('slideDidLoad', this.onSlideDidLoad, true); - this.el.removeEventListener('slidesDidLoad', this.onSlidesDidLoad, true); - this.el.removeEventListener('slideDelete', this.onSlideDelete, true); - this.el.removeEventListener('codeDidChange', this.onCustomEventChange, true); - this.el.removeEventListener('mathDidChange', this.onCustomEventChange, true); - this.el.removeEventListener('markdownDidChange', this.onCustomEventChange, true); - this.el.removeEventListener('wordCloudDidChange', this.onCustomEventChange, true); - this.el.removeEventListener('imgDidChange', this.onCustomEventChange, true); - this.el.removeEventListener('linkCreated', this.onCustomEventChange, true); - this.el.removeEventListener('styleDidChange', this.onCustomEventChange, true); - this.el.removeEventListener('drrDidChange', this.onCustomEventChange, true); - this.el.removeEventListener('notesDidChange', this.onSlideChange, true); - - if (document) { - document.removeEventListener('deckDidChange', this.onDeckChange, true); - document.removeEventListener('deckNeedChange', this.onDeckNeedChange, true); + this.mainRef.removeEventListener('input', this.onInputChange, true); + this.mainRef.removeEventListener('slideDidLoad', this.onSlideDidLoad, true); + this.mainRef.removeEventListener('slidesDidLoad', this.onSlidesDidLoad, true); + this.mainRef.removeEventListener('codeDidChange', this.onCustomEventChange, true); + this.mainRef.removeEventListener('mathDidChange', this.onCustomEventChange, true); + this.mainRef.removeEventListener('markdownDidChange', this.onCustomEventChange, true); + this.mainRef.removeEventListener('wordCloudDidChange', this.onCustomEventChange, true); + this.mainRef.removeEventListener('imgDidChange', this.onCustomEventChange, true); + this.mainRef.removeEventListener('linkCreated', this.onCustomEventChange, true); + this.mainRef.removeEventListener('drrDidChange', this.onCustomEventChange, true); + this.mainRef.removeEventListener('notesDidChange', this.onSlideChange, true); + + if (!document) { + return; } + + document.removeEventListener('styleDidChange', this.onCustomEventChange, true); + document.removeEventListener('slideDidChange', this.onSlideChange, true); + document.removeEventListener('slideDelete', this.onSlideDelete, true); + document.removeEventListener('deckDidChange', this.onDeckChange, true); + document.removeEventListener('deckNeedChange', this.onDeckNeedChange, true); } private onSlideDidLoad = async ($event: CustomEvent) => { @@ -272,7 +272,7 @@ export class DeckEventsHandler { }; // Retrieve text and background color style randomly generated in the editor - const deckElement: HTMLElement = this.el.querySelector('deckgo-deck'); + const deckElement: HTMLElement = this.mainRef.querySelector('deckgo-deck'); if (deckElement) { const attributes: DeckAttributes = await this.getDeckAttributes(deckElement, false); deck.attributes = attributes; @@ -559,7 +559,7 @@ export class DeckEventsHandler { private deleteSlideElement(): Promise { return new Promise(async (resolve) => { - const deck: HTMLElement = this.el.querySelector('deckgo-deck'); + const deck: HTMLElement = this.mainRef.querySelector('deckgo-deck'); if (!deck) { resolve(); @@ -899,7 +899,7 @@ export class DeckEventsHandler { private slideToLastSlide(): Promise { return new Promise(async (resolve) => { - const deck: HTMLElement = this.el.querySelector('deckgo-deck'); + const deck: HTMLElement = this.mainRef.querySelector('deckgo-deck'); if (!deck || !deck.children || deck.children.length <= 0) { resolve(); @@ -930,7 +930,7 @@ export class DeckEventsHandler { initSlideSize(): Promise { return new Promise(async (resolve) => { - const deck: HTMLDeckgoDeckElement = this.el.querySelector('deckgo-deck'); + const deck: HTMLDeckgoDeckElement = this.mainRef.querySelector('deckgo-deck'); if (!deck) { return; @@ -978,14 +978,14 @@ export class DeckEventsHandler { detail: element, }); - this.el.dispatchEvent(slideDidUpdate); + this.mainRef.dispatchEvent(slideDidUpdate); resolve(); }); } async toggleSlideEditable(editable: boolean) { - const deck: HTMLElement = this.el.querySelector('deckgo-deck'); + const deck: HTMLElement = this.mainRef.querySelector('deckgo-deck'); if (!deck) { return; diff --git a/studio/src/app/handlers/editor/events/editor/editor-events.handler.tsx b/studio/src/app/handlers/editor/events/editor/editor-events.handler.tsx index f05cc8df6..499d47234 100644 --- a/studio/src/app/handlers/editor/events/editor/editor-events.handler.tsx +++ b/studio/src/app/handlers/editor/events/editor/editor-events.handler.tsx @@ -1,11 +1,11 @@ export class EditorEventsHandler { - private el: HTMLElement; + private mainRef: HTMLElement; init(el: HTMLElement): Promise { return new Promise(async (resolve) => { - this.el = el; + this.mainRef = el; - const deck: HTMLElement = this.el.querySelector('deckgo-deck'); + const deck: HTMLElement = this.mainRef.querySelector('deckgo-deck'); if (deck) { deck.addEventListener('keyup', this.onKeyUp, false); @@ -21,7 +21,7 @@ export class EditorEventsHandler { } destroy() { - const deck: HTMLElement = this.el.querySelector('deckgo-deck'); + const deck: HTMLElement = this.mainRef.querySelector('deckgo-deck'); if (deck) { deck.removeEventListener('keyup', this.onKeyUp, true); @@ -47,7 +47,7 @@ export class EditorEventsHandler { private touchToolbar(element: HTMLElement): Promise { return new Promise(async (resolve) => { - const actions: HTMLAppActionsEditorElement = this.el.querySelector('app-actions-editor'); + const actions: HTMLAppActionsEditorElement = this.mainRef.querySelector('app-actions-editor'); if (!actions) { resolve(); @@ -62,7 +62,7 @@ export class EditorEventsHandler { selectDeck(): Promise { return new Promise(async (resolve) => { - const actions: HTMLAppActionsEditorElement = this.el.querySelector('app-actions-editor'); + const actions: HTMLAppActionsEditorElement = this.mainRef.querySelector('app-actions-editor'); if (actions) { await actions.selectDeck(); @@ -78,7 +78,7 @@ export class EditorEventsHandler { blockSlide(blockState: boolean): Promise { return new Promise(async (resolve) => { - const deck: HTMLElement = this.el.querySelector('deckgo-deck'); + const deck: HTMLElement = this.mainRef.querySelector('deckgo-deck'); if (!deck) { resolve(); diff --git a/studio/src/app/pages/core/app-dashboard/app-dashboard.tsx b/studio/src/app/pages/core/app-dashboard/app-dashboard.tsx index 1d53154c9..a03bac1f3 100644 --- a/studio/src/app/pages/core/app-dashboard/app-dashboard.tsx +++ b/studio/src/app/pages/core/app-dashboard/app-dashboard.tsx @@ -252,7 +252,7 @@ export class AppDashboard { private blockSlide($event: CustomEvent): Promise { return new Promise(async (resolve) => { if ($event && $event.target) { - await ($event.target as any).blockSlide(true); + await ($event.target as HTMLDeckgoDeckElement).blockSlide(true); } resolve(); diff --git a/studio/src/app/pages/editor/app-editor/app-editor.scss b/studio/src/app/pages/editor/app-editor/app-editor.scss index 2df7d54d9..6fddff364 100644 --- a/studio/src/app/pages/editor/app-editor/app-editor.scss +++ b/studio/src/app/pages/editor/app-editor/app-editor.scss @@ -21,14 +21,15 @@ ion-nav app-editor ion-content { } app-editor { - @import "../../../../global/theme/editor/editor-deck"; - @import "../../../../global/theme/editor/editor-deck-placeholder"; - @import "../../../../global/theme/editor/editor-deck-social"; @import "../../../../global/theme/editor/editor-deck-header-footer"; - + @import "../../../../global/theme/editor/editor-deck-social"; + @import "../../../../global/theme/editor/editor-deck-transition"; @import "../../../../global/theme/editor/editor-loading"; - @import "../../../../global/theme/editor/editor-deck-transition"; + main { + @import "../../../../global/theme/editor/editor-deck"; + @import "../../../../global/theme/editor/editor-deck-placeholder"; + } @import "node_modules/@deckdeckgo/deck-utils/css/deck"; diff --git a/studio/src/app/pages/editor/app-editor/app-editor.tsx b/studio/src/app/pages/editor/app-editor/app-editor.tsx index e37d6e6da..e0b304f21 100644 --- a/studio/src/app/pages/editor/app-editor/app-editor.tsx +++ b/studio/src/app/pages/editor/app-editor/app-editor.tsx @@ -141,8 +141,8 @@ export class AppEditor { } async init() { - await this.deckEventsHandler.init(this.el); - await this.editorEventsHandler.init(this.el); + await this.deckEventsHandler.init(this.mainRef); + await this.editorEventsHandler.init(this.mainRef); await this.initOffline(); @@ -731,6 +731,7 @@ export class AppEditor { + , (this.actionsEditorRef = el as HTMLAppActionsEditorElement)} diff --git a/studio/src/app/popovers/editor/app-slide-warning-info/app-slide-warning-info.tsx b/studio/src/app/popovers/editor/app-slide-warning-info/app-slide-warning-info.tsx index 68c6044cb..50e42406f 100644 --- a/studio/src/app/popovers/editor/app-slide-warning-info/app-slide-warning-info.tsx +++ b/studio/src/app/popovers/editor/app-slide-warning-info/app-slide-warning-info.tsx @@ -40,7 +40,7 @@ export class AppSlideWarningInfo { return (

Overflow

-

Part of your content seems to be placed outside the slide's safe area (16/9).

+

Part of your content may be placed outside the slide's safe area (16/9).

It may not be visible on all display sizes.

); diff --git a/studio/src/app/popovers/editor/style/app-deck-style/app-deck-style.tsx b/studio/src/app/popovers/editor/style/app-deck-style/app-deck-style.tsx index 1dcf28860..b287cbff0 100644 --- a/studio/src/app/popovers/editor/style/app-deck-style/app-deck-style.tsx +++ b/studio/src/app/popovers/editor/style/app-deck-style/app-deck-style.tsx @@ -29,7 +29,7 @@ export class AppDeck { private imageHelper: ImageHelper; async componentWillLoad() { - this.deckElement = document ? document.querySelector('deckgo-deck') : undefined; + this.deckElement = document?.querySelector('app-editor main deckgo-deck'); this.imageHelper = new ImageHelper(this.deckDidChange, this.blockSlide, this.signIn); } diff --git a/studio/src/app/utils/editor/parse-elements.utils.tsx b/studio/src/app/utils/editor/parse-elements.utils.tsx index 19fe95213..524c7ceb8 100644 --- a/studio/src/app/utils/editor/parse-elements.utils.tsx +++ b/studio/src/app/utils/editor/parse-elements.utils.tsx @@ -14,7 +14,7 @@ export class ParseElementsUtils { } if (element.nodeType === 3) { - resolve(element.textContent + '\n'); + resolve(element.textContent); return; } diff --git a/studio/src/app/utils/editor/slot.utils.tsx b/studio/src/app/utils/editor/slot.utils.tsx index 2246c9118..141a6097d 100644 --- a/studio/src/app/utils/editor/slot.utils.tsx +++ b/studio/src/app/utils/editor/slot.utils.tsx @@ -47,12 +47,12 @@ export class SlotUtils { return selectedElement?.nodeName?.toLowerCase() === SlotType.DRAG_RESIZE_ROTATE; } - static isNodeEditable(element: HTMLElement): boolean { + static isNodeEditable(element?: HTMLElement): boolean { return ( - element.nodeName.toLowerCase() === SlotType.CODE || - element.nodeName.toLowerCase() === SlotType.MATH || - element.nodeName.toLowerCase() === SlotType.WORD_CLOUD || - element.nodeName.toLowerCase() === SlotType.MARKDOWN + element?.nodeName?.toLowerCase() === SlotType.CODE || + element?.nodeName?.toLowerCase() === SlotType.MATH || + element?.nodeName?.toLowerCase() === SlotType.WORD_CLOUD || + element?.nodeName?.toLowerCase() === SlotType.MARKDOWN ); } } diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts index 6c3c2d922..c86015b4e 100644 --- a/studio/src/components.d.ts +++ b/studio/src/components.d.ts @@ -389,6 +389,9 @@ export namespace Components { } interface AppSlideNavigate { } + interface AppSlidePreview { + "deckRef": HTMLDeckgoDeckElement; + } interface AppSlideWarning { } interface AppSlideWarningInfo { @@ -1077,6 +1080,12 @@ declare global { prototype: HTMLAppSlideNavigateElement; new (): HTMLAppSlideNavigateElement; }; + interface HTMLAppSlidePreviewElement extends Components.AppSlidePreview, HTMLStencilElement { + } + var HTMLAppSlidePreviewElement: { + prototype: HTMLAppSlidePreviewElement; + new (): HTMLAppSlidePreviewElement; + }; interface HTMLAppSlideWarningElement extends Components.AppSlideWarning, HTMLStencilElement { } var HTMLAppSlideWarningElement: { @@ -1259,6 +1268,7 @@ declare global { "app-share-options": HTMLAppShareOptionsElement; "app-signin": HTMLAppSigninElement; "app-slide-navigate": HTMLAppSlideNavigateElement; + "app-slide-preview": HTMLAppSlidePreviewElement; "app-slide-warning": HTMLAppSlideWarningElement; "app-slide-warning-info": HTMLAppSlideWarningInfoElement; "app-slot-type": HTMLAppSlotTypeElement; @@ -1703,6 +1713,10 @@ declare namespace LocalJSX { interface AppSlideNavigate { "onReorder"?: (event: CustomEvent) => void; } + interface AppSlidePreview { + "deckRef": HTMLDeckgoDeckElement; + "onPreviewAttached"?: (event: CustomEvent) => void; + } interface AppSlideWarning { } interface AppSlideWarningInfo { @@ -1846,6 +1860,7 @@ declare namespace LocalJSX { "app-share-options": AppShareOptions; "app-signin": AppSignin; "app-slide-navigate": AppSlideNavigate; + "app-slide-preview": AppSlidePreview; "app-slide-warning": AppSlideWarning; "app-slide-warning-info": AppSlideWarningInfo; "app-slot-type": AppSlotType; @@ -1973,6 +1988,7 @@ declare module "@stencil/core" { "app-share-options": LocalJSX.AppShareOptions & JSXBase.HTMLAttributes; "app-signin": LocalJSX.AppSignin & JSXBase.HTMLAttributes; "app-slide-navigate": LocalJSX.AppSlideNavigate & JSXBase.HTMLAttributes; + "app-slide-preview": LocalJSX.AppSlidePreview & JSXBase.HTMLAttributes; "app-slide-warning": LocalJSX.AppSlideWarning & JSXBase.HTMLAttributes; "app-slide-warning-info": LocalJSX.AppSlideWarningInfo & JSXBase.HTMLAttributes; "app-slot-type": LocalJSX.AppSlotType & JSXBase.HTMLAttributes; diff --git a/utils/utils/CHANGELOG.md b/utils/utils/CHANGELOG.md index 9d9bf6438..58d1a7176 100644 --- a/utils/utils/CHANGELOG.md +++ b/utils/utils/CHANGELOG.md @@ -1,3 +1,36 @@ + + +# 1.7.0 (2020-11-21) + +### Features + +- isLandscape and isPortrait + + + +# 1.6.0 (2020-11-20) + +### Fix + +- is mobile based on matchMedia +- isIos including new iPads + + + +# 1.5.0 (2020-11-20) + +### Fix + +- update is mobile + + + +# 1.4.0 (2020-11-20) + +### Fix + +- detection iPad for iOS >= 13 + # 1.3.0 (2020-08-15) diff --git a/utils/utils/package-lock.json b/utils/utils/package-lock.json index c2e6f5f07..8f7b00e92 100644 --- a/utils/utils/package-lock.json +++ b/utils/utils/package-lock.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/utils", - "version": "1.3.0", + "version": "1.7.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/utils/utils/package.json b/utils/utils/package.json index 72e158016..ea7485605 100644 --- a/utils/utils/package.json +++ b/utils/utils/package.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/utils", - "version": "1.3.0", + "version": "1.7.0", "author": "David Dal Busco", "description": "A collection of utils methods and functions developed for DeckDeckGo", "license": "MIT", diff --git a/utils/utils/src/utils/utils.ts b/utils/utils/src/utils/utils.ts index 486a3c1f8..529a85a19 100644 --- a/utils/utils/src/utils/utils.ts +++ b/utils/utils/src/utils/utils.ts @@ -16,22 +16,12 @@ export function debounce(func: Function, timeout?: number) { }; } -// Source: http://detectmobilebrowsers.com export function isMobile(): boolean { - if (!window || !navigator) { + if (!window) { return false; } - const a: string = navigator.userAgent || navigator.vendor || (window as any).opera; - - return ( - /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test( - a - ) || - /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test( - a.substr(0, 4) - ) - ); + return window.matchMedia('(any-pointer:coarse)').matches; } export function isIOS(): boolean { @@ -41,7 +31,7 @@ export function isIOS(): boolean { const a: string = navigator.userAgent || navigator.vendor || (window as any).opera; - return /iPad|iPhone|iPod/i.test(a); + return /iPhone|iPod/i.test(a) || isIPad(); } export function isIPad(): boolean { @@ -51,7 +41,13 @@ export function isIPad(): boolean { const a: string = navigator.userAgent || navigator.vendor || (window as any).opera; - return /iPad/i.test(a); + // iOS 12 and below + if (/iPad/i.test(a)) { + return true; + } + + // iOS 13+ + return /Macintosh/i.test(a) && isMobile(); } export function isFullscreen(): boolean { @@ -80,3 +76,17 @@ export function isRTL(): boolean { const htmlDir: string | null = document.documentElement.getAttribute('dir'); return htmlDir !== null && htmlDir === 'rtl'; } + +// Source: Ionic ionic-framework/angular/src/providers/platform.ts + +export function isLandscape(): boolean { + return !isPortrait(); +} + +export function isPortrait(): boolean { + if (!window) { + return false; + } + + return window.matchMedia && window.matchMedia('(orientation: portrait)').matches; +} diff --git a/webcomponents/highlight-code/CHANGELOG.md b/webcomponents/highlight-code/CHANGELOG.md index 7997889df..2ebe62d8b 100644 --- a/webcomponents/highlight-code/CHANGELOG.md +++ b/webcomponents/highlight-code/CHANGELOG.md @@ -1,3 +1,16 @@ +# 2.2.1 (2020-11-19) + +### Style + +- cursor text if set as editable + +# 2.2.0 (2020-11-19) + +### Style + +- new style to hide characters in ubuntu bar buttons +- ubuntu styling options variables renamed + # 2.1.1 (2020-10-23) ### Fix diff --git a/webcomponents/highlight-code/package-lock.json b/webcomponents/highlight-code/package-lock.json index f4d714d5d..9d9c862d7 100644 --- a/webcomponents/highlight-code/package-lock.json +++ b/webcomponents/highlight-code/package-lock.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/highlight-code", - "version": "2.1.1", + "version": "2.2.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/webcomponents/highlight-code/package.json b/webcomponents/highlight-code/package.json index 20199d408..5c9e1143f 100644 --- a/webcomponents/highlight-code/package.json +++ b/webcomponents/highlight-code/package.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/highlight-code", - "version": "2.1.1", + "version": "2.2.1", "description": "A Web Component to highlight your code", "main": "dist/index.cjs.js", "module": "dist/index.js", diff --git a/webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.scss b/webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.scss index 2c3f8294a..7a9e8bb59 100644 --- a/webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.scss +++ b/webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.scss @@ -18,6 +18,10 @@ } :host([editable]) { + div.deckgo-highlight-code-container { + cursor: text; + } + code:empty:not(:focus):after { content: var(--deckgo-highlight-code-empty-text, "Click to add your code"); } @@ -259,38 +263,46 @@ div.ubuntu { align-items: center; justify-content: center; - width: var(--deckgo-highlight-code-carbon-header-button-width, 12px); - height: var(--deckgo-highlight-code-carbon-header-button-height, 12px); - border-radius: var(--deckgo-highlight-code-carbon-header-button-border-radius, 50%); - margin: var(--deckgo-highlight-code-carbon-header-button-margin, 0 4px 0 0); + width: var(--deckgo-highlight-code-ubuntu-header-button-width, 12px); + height: var(--deckgo-highlight-code-ubuntu-header-button-height, 12px); + border-radius: var(--deckgo-highlight-code-ubuntu-header-button-border-radius, 50%); + margin: var(--deckgo-highlight-code-ubuntu-header-button-margin, 0 4px 0 0); - font-size: var(--deckgo-highlight-code-carbon-header-button-font-size, 7px); + font-size: var(--deckgo-highlight-code-ubuntu-header-button-font-size, 7px); - color: var(--deckgo-highlight-code-carbon-header-button-color, black); + color: var(--deckgo-highlight-code-ubuntu-header-button-color, black); - text-shadow: var(--deckgo-highlight-code-carbon-header-button-text-shadow, 0px 1px 0px rgba(255, 255, 255, 0.2)); - box-shadow: var(--deckgo-highlight-code-carbon-header-button-box-shadow, 0px 0px 1px 0px #41403a, 0px 1px 1px 0px #474642); + text-shadow: var(--deckgo-highlight-code-ubuntu-header-button-text-shadow, 0px 1px 0px rgba(255, 255, 255, 0.2)); + box-shadow: var(--deckgo-highlight-code-ubuntu-header-button-box-shadow, 0px 0px 1px 0px #41403a, 0px 1px 1px 0px #474642); &.close { - background: var(--deckgo-highlight-code-carbon-header-button-close-background, linear-gradient(#f37458 0%, #de4c12 100%)); - border: var(--deckgo-highlight-code-carbon-header-button-close-border); + background: var(--deckgo-highlight-code-ubuntu-header-button-close-background, linear-gradient(#f37458 0%, #de4c12 100%)); + border: var(--deckgo-highlight-code-ubuntu-header-button-close-border); } &.minimize { - background: var(--deckgo-highlight-code-carbon-header-button-minimize-background, linear-gradient(#7d7871 0%, #595953 100%)); - border: var(--deckgo-highlight-code-carbon-header-button-minimize-border); + background: var(--deckgo-highlight-code-ubuntu-header-button-minimize-background, linear-gradient(#7d7871 0%, #595953 100%)); + border: var(--deckgo-highlight-code-ubuntu-header-button-minimize-border); } &.maximize { - background: var(--deckgo-highlight-code-carbon-header-button-maximize-background, linear-gradient(#7d7871 0%, #595953 100%)); - border: var(--deckgo-highlight-code-carbon-header-button-maximize-border); + background: var(--deckgo-highlight-code-ubuntu-header-button-maximize-background, linear-gradient(#7d7871 0%, #595953 100%)); + border: var(--deckgo-highlight-code-ubuntu-header-button-maximize-border); + } + + &.close, + &.minimize, + &.maximize { + span { + display: var(--deckgo-highlight-code-ubuntu-header-button-span-display, inherit); + } } } > p { - color: var(--deckgo-highlight-code-carbon-header-user-color, #d5d0ce); - font-size: var(--deckgo-highlight-code-carbon-header-user-font-size, 12px); - line-height: var(--deckgo-highlight-code-carbon-header-user-line-height, 14px); - margin: var(--deckgo-highlight-code-carbon-header-user-margin, 0 0 1px 4px); + color: var(--deckgo-highlight-code-ubuntu-header-user-color, #d5d0ce); + font-size: var(--deckgo-highlight-code-ubuntu-header-user-font-size, 12px); + line-height: var(--deckgo-highlight-code-ubuntu-header-user-line-height, 14px); + margin: var(--deckgo-highlight-code-ubuntu-header-user-margin, 0 0 1px 4px); } } diff --git a/webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.tsx b/webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.tsx index 73a882509..1c96f396f 100644 --- a/webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.tsx +++ b/webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.tsx @@ -675,6 +675,10 @@ export class DeckdeckgoHighlightCode { private renderUbuntuCircle(mode: 'close' | 'minimize' | 'maximize') { const symbol: string = mode === 'close' ? '✕' : mode === 'minimize' ? '─' : '◻'; - return
; + return ( +
+ +
+ ); } } diff --git a/webcomponents/highlight-code/src/declarations/deckdeckgo-highlight-code-languages.tsx b/webcomponents/highlight-code/src/declarations/deckdeckgo-highlight-code-languages.tsx index 659bf0090..d5c86d3e5 100644 --- a/webcomponents/highlight-code/src/declarations/deckdeckgo-highlight-code-languages.tsx +++ b/webcomponents/highlight-code/src/declarations/deckdeckgo-highlight-code-languages.tsx @@ -171,6 +171,7 @@ export const deckdeckgoHighlightCodeLanguages: DeckdeckgoHighlightCodeLanguages powershell: {title: 'PowerShell'}, processing: {title: 'Processing'}, prolog: {title: 'Prolog'}, + promql: {title: 'PromQL'}, properties: {title: '.properties'}, protobuf: {title: 'Protocol Buffers'}, pug: {title: 'Pug', require: ['markup']}, diff --git a/webcomponents/markdown/CHANGELOG.md b/webcomponents/markdown/CHANGELOG.md index 6fd9647c0..f0dbb5767 100644 --- a/webcomponents/markdown/CHANGELOG.md +++ b/webcomponents/markdown/CHANGELOG.md @@ -1,3 +1,22 @@ +# 2.0.1 (2020-11-21) + +### Style + +- editable after placeholder + +# 2.0.0 (2020-11-20) + +### Features + +- image width and height can be provided as "width:100px,height:20px" + +# 1.1.1 (2020-11-19) + +### Style + +- cursor text if set as editable +- editable zone clickable on the all width + # 1.1.0 (2020-11-16) ### Features diff --git a/webcomponents/markdown/package-lock.json b/webcomponents/markdown/package-lock.json index bcb1aeb9b..ad7d12cc4 100644 --- a/webcomponents/markdown/package-lock.json +++ b/webcomponents/markdown/package-lock.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/markdown", - "version": "1.1.0", + "version": "2.0.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/webcomponents/markdown/package.json b/webcomponents/markdown/package.json index 53e4f6e47..9c6919388 100644 --- a/webcomponents/markdown/package.json +++ b/webcomponents/markdown/package.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/markdown", - "version": "1.1.0", + "version": "2.0.1", "description": "A Web Component to render markdown to HTML", "main": "dist/index.cjs.js", "module": "dist/index.js", diff --git a/webcomponents/markdown/src/components/markdown/deckdeckgo-markdown.scss b/webcomponents/markdown/src/components/markdown/deckdeckgo-markdown.scss index e3afdd24b..a55c8474e 100644 --- a/webcomponents/markdown/src/components/markdown/deckdeckgo-markdown.scss +++ b/webcomponents/markdown/src/components/markdown/deckdeckgo-markdown.scss @@ -10,13 +10,18 @@ } :host([editable]) { + div.deckgo-markdown-container { + cursor: text; + } + div.markdown:empty:not(:focus):after { - content: var(--deckgo-markdown-empty-text, "Click to add content using Markdown"); + content: var(--deckgo-markdown-empty-text, "Click to add markdown content"); font-size: var(--deckgo-markdown-empty-font-size, 1.4em); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); + width: 100%; } } @@ -24,6 +29,7 @@ ::slotted([slot="markdown"]) { display: inline-block; white-space: pre-wrap; + width: 100%; } div.markdown {