diff --git a/css/calendar.scss b/css/calendar.scss index ae20147350..1f8eb00360 100644 --- a/css/calendar.scss +++ b/css/calendar.scss @@ -29,3 +29,4 @@ @import 'import.scss'; @import 'print.scss'; @import 'public.scss'; +@import 'props-linkify-links.scss'; diff --git a/css/props-linkify-links.scss b/css/props-linkify-links.scss new file mode 100644 index 0000000000..42e94ac831 --- /dev/null +++ b/css/props-linkify-links.scss @@ -0,0 +1,25 @@ +.property-text__input--linkify { + flex-basis: min-content; +} + +.linkify-links { + border: 2px solid var(--color-border-maxcontrast); + border-radius: var(--border-radius-large); + cursor: text; + width: 100% !important; + box-sizing: border-box; + margin-top: 1px !important; + padding: 12px; + white-space: pre-line; + overflow: auto; + line-height: normal; + word-break: break-word; + display: inline-block; + vertical-align: top; + max-height: 16em; + max-height: calc(100vh - 500px); + + a.linkified::after { + content: ' ↗'; + } +} diff --git a/package-lock.json b/package-lock.json index 1e6ee7db0b..dc921dcf45 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39,6 +39,7 @@ "css-color-names": "^1.0.1", "debounce": "^1.2.1", "jstz": "^2.1.1", + "linkifyjs": "^4.1.1", "lodash": "^4.17.21", "md5": "^2.3.0", "p-limit": "^4.0.0", @@ -11952,10 +11953,9 @@ } }, "node_modules/linkifyjs": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.0.2.tgz", - "integrity": "sha512-/VSoCZiglX0VMsXmL5PN3lRg45M86lrD9PskdkA2abWaTKap1bIcJ11LS4EE55bcUl9ZOR4eZ792UtQ9E/5xLA==", - "peer": true + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.1.1.tgz", + "integrity": "sha512-zFN/CTVmbcVef+WaDXT63dNzzkfRBKT1j464NJQkV7iSgJU0sLBus9W0HBwnXK13/hf168pbrx/V/bjEHOXNHA==" }, "node_modules/loader-runner": { "version": "4.3.0", @@ -26602,10 +26602,9 @@ "requires": {} }, "linkifyjs": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.0.2.tgz", - "integrity": "sha512-/VSoCZiglX0VMsXmL5PN3lRg45M86lrD9PskdkA2abWaTKap1bIcJ11LS4EE55bcUl9ZOR4eZ792UtQ9E/5xLA==", - "peer": true + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.1.1.tgz", + "integrity": "sha512-zFN/CTVmbcVef+WaDXT63dNzzkfRBKT1j464NJQkV7iSgJU0sLBus9W0HBwnXK13/hf168pbrx/V/bjEHOXNHA==" }, "loader-runner": { "version": "4.3.0", diff --git a/package.json b/package.json index e5e78ff4ac..726d5343d3 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,7 @@ "css-color-names": "^1.0.1", "debounce": "^1.2.1", "jstz": "^2.1.1", + "linkifyjs": "^4.1.1", "lodash": "^4.17.21", "md5": "^2.3.0", "p-limit": "^4.0.0", diff --git a/src/components/Editor/Properties/PropertyText.vue b/src/components/Editor/Properties/PropertyText.vue index 202021896a..420f716f38 100644 --- a/src/components/Editor/Properties/PropertyText.vue +++ b/src/components/Editor/Properties/PropertyText.vue @@ -30,17 +30,22 @@ :class="{ 'property-text__icon--hidden': !showIcon }" />
-