Add submit, multiline and maxlength support

l10n/messages.pot

@@ -46,6 +46,10 @@ msgstr ""
 msgid "Frequently used"
 msgstr ""
 
+#: src/components/RichContenteditable/RichContenteditable.vue:254
+msgid "Message limit of {count} characters reached"
+msgstr ""
+
 #: src/components/Modal/Modal.vue:166
 msgid "Next"
 msgstr ""
@@ -120,6 +124,6 @@ msgstr ""
 msgid "Unable to search the group"
 msgstr ""
 
-#: src/components/RichContenteditable/RichContenteditable.vue:126
+#: src/components/RichContenteditable/RichContenteditable.vue:151
 msgid "Write message, @ to mention someone …"
 msgstr ""

package.json

@@ -51,6 +51,7 @@
 		"linkifyjs": "~2.1.9",
 		"md5": "^2.2.1",
 		"regenerator-runtime": "^0.13.5",
+		"string-length": "^4.0.1",
 		"striptags": "^3.1.1",
 		"tributejs": "^5.1.3",
 		"v-click-outside": "^3.0.1",

src/components/RichContenteditable/AutoCompleteResult.vue

@@ -100,7 +100,6 @@ export default {
 
 <style lang="scss" scoped>
 @import '../../fonts/scss/iconfont-vue';
-
 $autocomplete-padding: 10px;
 
 .autocomplete-result {
@@ -118,7 +117,9 @@ $autocomplete-padding: 10px;
 
 	&__icon {
 		position: relative;
+		flex: 0 0 $clickable-area;
 		width: $clickable-area;
+		min-width: $clickable-area;
 		height: $clickable-area;
 		border-radius: $clickable-area;
 		background-color: var(--color-background-darker);
@@ -168,14 +169,23 @@ $autocomplete-padding: 10px;
 
 	&__content {
 		display: flex;
-		flex: 1 1;
+		flex: 1 1 100%;
 		flex-direction: column;
 		justify-content: center;
+		min-width: 0;
 		padding-left: $autocomplete-padding;
 	}
 
+	&__title,
+	&__subline {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
 	&__subline {
 		color: var(--color-text-lighter);
 	}
 }
+
 </style>

src/components/RichContenteditable/RichContenteditable.vue

@@ -33,17 +33,31 @@ This component displays contenteditable div with automated @ autocompletion [at]
 		<RichContenteditable
 			v-model="message"
 			:auto-complete="autoComplete"
+			:maxlength="100"
 			:user-data="userData"
 			placeholder="Try mentioning the user Test01"
-			style="min-height: 100px;" />
+			@submit="onSubmit" />
+		<br>
+
+		<RichContenteditable
+			v-model="message"
+			:auto-complete="autoComplete"
+			:maxlength="400"
+			:multiline="true"
+			:user-data="userData"
+			placeholder="Try mentioning the user Test01"
+			@submit="onSubmit" />
+		<br>
+		<br>
 		{{ JSON.stringify(message) }}
 	</div>
 </template>
 <script>
 export default {
 	data() {
 		return {
-			message: '',
+			message: 'Lorem ipsum dolor sit amet.',
+
 			// You need to provide this for the inline
 			// mention to understand what to display or not.
 			userData: {
@@ -82,6 +96,9 @@ export default {
 		*/
 		autoComplete(search, callback) {
 			callback(Object.values(this.userData))
+		},
+		onSubmit() {
+			alert(this.message)
 		}
 	}
 }
@@ -92,20 +109,28 @@ export default {
 
 <template>
 	<div ref="contenteditable"
-		:class="{'rich-contenteditable__input--empty': isEmptyValue}"
+		v-tooltip="tooltip"
+		:class="{
+			'rich-contenteditable__input--empty': isEmptyValue,
+			'rich-contenteditable__input--multiline': multiLine,
+			'rich-contenteditable__input--overflow': isOverMaxlength,
+		}"
 		:contenteditable="contenteditable"
 		:placeholder="placeholder"
 		aria-multiline="true"
 		class="rich-contenteditable__input"
 		role="textbox"
 		@input="onInput"
 		@keydown.delete="onDelete"
+		@keydown.enter.exact="onEnter"
+		@keydown.ctrl.enter.exact.stop.prevent="onCtrlEnter"
 		@paste="onPaste" />
 </template>
 
 <script>
 import Tribute from 'tributejs/dist/tribute.esm'
 import debounce from 'debounce'
+import stringLength from 'string-length'
 
 import { t } from '../../l10n.js'
 import AutoCompleteResult from './AutoCompleteResult'
@@ -133,13 +158,34 @@ export default {
 			type: Element,
 			default: () => document.body,
 		},
+
+		/**
+		 * Make the contenteditable looks like a textarea or not.
+		 * Default looks like a single-line input.
+		 * This also handle the default enter/shift+enter behaviour.
+		 * if multiLine, enter = newline; otherwise enter = submit
+		 * shift+enter always add a new line. ctrl+enter always submits
+		 */
+		multiLine: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
-		 * Is the content editable
+		 * Is the content editable ?
 		 */
 		contenteditable: {
 			type: Boolean,
 			default: true,
 		},
+
+		/**
+		 * Max allowed length
+		 */
+		maxlength: {
+			type: Number,
+			default: null,
+		},
 	},
 
 	data() {
@@ -169,6 +215,10 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * Is the current trimmed value empty?
+		 * @returns {boolean}
+		 */
 		isEmptyValue() {
 			return !this.localValue || this.localValue.trim() === ''
 		},
@@ -181,6 +231,31 @@ export default {
 			return !!navigator.userAgent.match(/firefox/i)
 		},
 
+		/**
+		 * Is the current value over maxlength?
+		 * @returns {boolean}
+		 */
+		isOverMaxlength() {
+			if (this.isEmptyValue || !this.maxlength) {
+				return false
+			}
+			return stringLength(this.localValue) > this.maxlength
+		},
+
+		/**
+		 * Tooltip to show if characters count is over limit
+		 * @returns {string}
+		 */
+		tooltip() {
+			if (!this.isOverMaxlength) {
+				return null
+			}
+			return {
+				content: t('Message limit of {count} characters reached', { count: this.maxlength }),
+				show: true,
+				trigger: 'manual',
+			}
+		},
 	},
 
 	watch: {
@@ -326,6 +401,32 @@ export default {
 			}
 		},
 
+		/**
+		 * Enter key pressed. Submits if not multiline
+		 * @param {Event} event the keydown event
+		 */
+		onEnter(event) {
+			// Prevent submitting if autocompletion menu
+			// is opened or length is over maxlength
+			if (this.multiLine || this.isOverMaxlength || this.tribute.isActive) {
+				return
+			}
+
+			event.preventDefault()
+			event.stopPropagation()
+			this.$emit('submit', event)
+		},
+		/**
+		 * Ctrl + Enter key pressed
+		 * @param {Event} event the keydown event
+		 */
+		onCtrlEnter(event) {
+			if (this.isOverMaxlength) {
+				return
+			}
+			this.$emit('submit', event)
+		},
+
 		/**
 		 * Debounce the autocomplete function
 		 */
@@ -353,6 +454,8 @@ export default {
 	background-color: var(--color-main-background);
 	font-family: var(--font-face);
 	font-size: inherit;
+	min-height: $clickable-area;
+	max-height: $clickable-area * 5.5;
 
 	// Cannot use :empty because of firefox bug https://bugzilla.mozilla.org/show_bug.cgi?id=1513303
 	&--empty:before {
@@ -369,6 +472,12 @@ export default {
 		border-radius: var(--border-radius);
 		background-color: var(--color-background-dark);
 	}
+
+	&--multiline {
+		min-height: $clickable-area * 3;
+		// No max for mutiline
+		max-height: none;
+	}
 }
 
 </style>