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/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 }" />
4
+ && findLinks(this.value).length > 0
+ },
+ linkifyMinHeight() {
+ return this.rows > 1 ? '68px' : '48px'
+ },
+ },
+ data() {
+ return {
+ textareaHasFocus: false,
+ }
+ },
+
+ methods: {
+ handleShowTextarea(evt) {
+
+ if (this.isReadOnly || this.linkifyLinks === false) {
+ // do nothing
+ return
+ }
+ if (evt.target && evt.target.tagName === 'A') {
+ // a link was clicked, do nothing
+ return
+ }
+ if (this.textareaHasFocus === true) {
+ // the textarea is shown already, should never happen
+ console.error('this.textareaHasFocus is true but click event is dispatched on div')
+ return
+ }
+
+ const parent = evt.currentTarget.parentElement
+ this.textareaHasFocus = true
+
+ this.$nextTick(() => {
+ if (parent && parent.firstElementChild) {
+ const textarea = parent.firstElementChild
+ textarea.focus()
+ if (this.value && this.value.length > 64) {
+ textarea.selectionStart = textarea.selectionEnd = 0
+ } else {
+ textarea.selectionStart = textarea.selectionEnd = 64
+ }
+ }
+ })
+ },
+
+ /**
+ * @param {boolean} hasFocus
+ */
+ handleToggleTextareaFocus(hasFocus) {
+ if (this.linkifyLinks === false) {
+ // do nothing
+ return
+ }
+ this.textareaHasFocus = hasFocus
+ },
+ },
+}
diff --git a/src/views/EditSidebar.vue b/src/views/EditSidebar.vue
index c47d8b79c0..6435ef0a72 100644
--- a/src/views/EditSidebar.vue
+++ b/src/views/EditSidebar.vue
@@ -127,10 +127,12 @@