-
-
-
{{newValue || placeholder}}
-
- {{ error }}
-
+
+
+
+
+ {{newValue || placeholder}}
+
+
+
+ {{ editing && error ? error : timestamp }}
-
-
-
-
-
-
-
-
@@ -42,6 +51,7 @@
attributeName: { type: String, required: true },
characterLimit: { type: Number },
characterMinLimit: { type: Number },
+ timestamp: { type: String},
placeholder: { type: String },
autofocus: { type: Boolean, default: false },
saveOnEnter: { type: Boolean, default: true },
@@ -49,8 +59,7 @@
multilinePaste: { type: Boolean, default: false },
smartAnnotation: { type: Boolean, default: false },
editOnload: { type: Boolean, default: false },
- defaultValue: { type: String, default: '' },
- customClasses: { type: Array, default: () => [] }
+ defaultValue: { type: String, default: '' }
},
data() {
return {
@@ -60,7 +69,7 @@
}
},
mixins: [UtilsMixin],
- created( ){
+ created() {
this.newValue = this.value || '';
},
mounted() {
@@ -70,16 +79,22 @@
}
},
watch: {
+ newValue() {
+ if (this.newValue.length === 0 && this.editing) {
+ this.focus();
+ this.setCaretPosition();
+ }
+ },
autofocus() {
this.handleAutofocus();
- },
- value() {
- this.newValue = this.value;
}
},
computed: {
isBlank() {
- return this.newValue.length === 0
+ return this.newValue.length === 0;
+ },
+ isContentDefault() {
+ return this.newValue === this.defaultValue;
},
error() {
if(!this.allowBlank && this.isBlank) {
@@ -118,7 +133,6 @@
},
handleBlur() {
if ($('.atwho-view:visible').length) return;
-
if (this.allowBlank || !this.isBlank) {
this.$nextTick(this.update);
} else {
@@ -128,21 +142,47 @@
focus() {
this.$nextTick(() => {
if (!this.$refs.input) return;
-
this.$refs.input.focus();
- this.resize();
});
},
+ // Fixing Firefox specific caret placement issue
+ setCaretPosition() {
+ const range = document.createRange();
+ const sel = window.getSelection();
+ range.setStart(this.$refs.input, 0);
+ range.collapse(true);
+ sel.removeAllRanges();
+ sel.addRange(range);
+ },
+ setCaretAtEnd() {
+ if (this.isBlank || this.isContentDefault) return;
+
+ const el = this.$refs.input;
+ let range = document.createRange();
+ range.selectNodeContents(el);
+ range.collapse(false);
+
+ let selection = window.getSelection();
+ selection.removeAllRanges();
+ selection.addRange(range);
+ },
enableEdit(e) {
if (e && $(e.target).hasClass('atwho-user-popover')) return;
if (e && $(e.target).hasClass('sa-link')) return;
if (e && $(e.target).parent().hasClass('atwho-inserted')) return;
this.editing = true;
- this.focus();
this.$nextTick(() => {
- if (this.$refs.input.value === this.defaultValue) {
- this.$refs.input.select();
+ this.focus();
+ this.$refs.input.innerText = this.newValue;
+
+ // Select whole content if it is default
+ if (this.isContentDefault) {
+ let range = document.createRange();
+ range.selectNodeContents(this.$refs.input);
+ let selection = window.getSelection();
+ selection.removeAllRanges();
+ selection.addRange(range);
}
if (this.smartAnnotation) {
SmartAnnotation.init($(this.$refs.input), false);
@@ -156,40 +196,57 @@
this.$emit('editingDisabled');
},
handlePaste(e) {
+ e.preventDefault();
this.dirty = true;
- if (!this.multilinePaste) return;
- let lines = (e.originalEvent || e).clipboardData.getData('text/plain').split(/[\n\r]/);
- lines = lines.filter((l) => l).map((l) => l.trim());
+ const clipboardData = (e.clipboardData || window.clipboardData).getData("text");
+ let lines = clipboardData.split(/[\n\r]/).filter((l) => l).map((l) => l.trim());
+
+ const selection = window.getSelection();
+ if (!selection.rangeCount) return;
- if (lines.length > 1) {
- this.newValue = lines[0];
- this.$emit('multilinePaste', lines);
- this.update();
- }
+ selection.deleteFromDocument();
+
+ let textNode = document.createTextNode(lines[0]);
+ selection.getRangeAt(0).insertNode(textNode);
+
+ let range = document.createRange();
+ range.setStart(textNode, textNode.length);
+ range.setEnd(textNode, textNode.length);
+
+ this.$nextTick(() => {
+ this.newValue = e.target.textContent;
+ selection.removeAllRanges();
+ selection.addRange(range);
+
+ // Handle multi-line paste
+ if (this.multilinePaste && lines.length > 1) {
+ this.$emit('multilinePaste', lines);
+ this.update();
+ }
+ });
},
- handleInput() {
+ handleInput(e) {
this.dirty = true;
- if (!this.allowNewLine) {
- this.newValue = this.newValue.replace(/^[\n\r]+|[\n\r]+$/g, '');
- }
- this.$nextTick(this.resize);
+
+ const sel = document.getSelection();
+ const offset = sel.anchorOffset;
+
+ this.newValue = this.allowNewLine ? e.target.textContent : e.target.textContent.replace(/^[\n\r]+|[\n\r]+$/g, '');
+
+ sel.collapse(sel.anchorNode, offset);
},
handleKeypress(e) {
if (e.key == 'Escape') {
this.cancelEdit();
} else if (e.key == 'Enter' && this.saveOnEnter) {
+ e.preventDefault()
this.update();
} else {
+ if (!this.error) this.$emit('error-cleared');
this.dirty = true;
}
},
- resize() {
- if (!this.$refs.input) return;
-
- this.$refs.input.style.height = "auto";
- this.$refs.input.style.height = (this.$refs.input.scrollHeight) + "px";
- },
update() {
if (!this.dirty && !this.isBlank) {
this.editing = false;
@@ -198,8 +255,8 @@
if(this.error) return;
if(!this.$refs.input) return;
- this.newValue = this.$refs.input.value // Fix for smart annotation
- this.newValue = this.newValue.trim();
+
+ this.newValue = this.$refs.input.innerText.trim() // Fix for smart annotation
this.editing = false;
this.$emit('editingDisabled');
this.$emit('update', this.newValue);
diff --git a/config/locales/en.yml b/config/locales/en.yml
index d3955b7c3..41673a71a 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -989,6 +989,7 @@ en:
show:
breadcrumb_index: 'Label templates'
name_error_prefix: 'Label template name'
+ name_placeholder: 'Enter label template name'
description_error_prefix: 'Label template description'
description_title: 'Template description'
description_placeholder: 'Enter the template description (optional)'
@@ -2918,6 +2919,7 @@ en:
added_by: "Created by:"
keywords: "Keywords:"
authors: "Authors:"
+ authors_list: "authors list"
no_authors: "No authors"
add_authors: "+ Add authors"
add_keywords: "+ Add keywords"
@@ -3118,6 +3120,7 @@ en:
error: "Table name can't be empty"
table_name: "Table name"
checklist:
+ placeholder: 'Enter checklist name'
default_name: 'Checklist %{position}'
checklist_name: "Checklist name"
empty_checklist: 'Doesn’t contain any checklist items'
diff --git a/public/images/icon_small/edit.svg b/public/images/icon_small/edit.svg
new file mode 100644
index 000000000..87741e38d
--- /dev/null
+++ b/public/images/icon_small/edit.svg
@@ -0,0 +1,4 @@
+