scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-09-20 23:16:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add insert ability for code in content block [SCI-7055]

Browse source
This commit is contained in:
Anton 2022-08-17 13:40:35 +02:00
parent 4f312bf329
commit 5677e45e0c
2 changed files with 25 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
app/javascript/vue/label_template/container.vue
View file

@ -48,7 +48,9 @@
<div class="title">
{{ i18n.t('label_templates.show.content_title', { format: labelTemplate.attributes.language_type.toUpperCase() }) }}
</div>
<InsertFieldDropdown :labelTemplate="labelTemplate" />
<InsertFieldDropdown :labelTemplate="labelTemplate"
@insertField="insertField"
/>
</div>
<template v-if="editingContent">
<div class="label-textarea-container">
@ -73,7 +75,7 @@
</div>
</div>
</template>
<div v-else class="label-view-container" :title="i18n.t('label_templates.show.view_content_tooltip')" @click="editingContent = true">{{ labelTemplate.attributes.content}}
<div v-else class="label-view-container" :title="i18n.t('label_templates.show.view_content_tooltip')" @click="enableContentEdit">{{ labelTemplate.attributes.content}}
<i class="fas fa-pen"></i>
</div>
</div>
@ -108,7 +110,8 @@
editingName: false,
editingDescription: false,
editingContent: false,
newContent: ''
newContent: '',
cursorPos: 0
}
},
components: {InlineEdit, InsertFieldDropdown},
@ -119,6 +122,14 @@
})
},
methods: {
enableContentEdit() {
this.editingContent = true
this.$nextTick(() => {
this.$refs.contentInput.focus();
$(this.$refs.contentInput).prop('selectionStart', this.cursorPos)
$(this.$refs.contentInput).prop('selectionEnd', this.cursorPos)
});
},
updateName(newName) {
$.ajax({
url: this.labelTemplate.attributes.urls.update,
@ -140,6 +151,7 @@
});
},
updateContent() {
this.cursorPos = $(this.$refs.contentInput).prop('selectionStart')
$.ajax({
url: this.labelTemplate.attributes.urls.update,
type: 'PATCH',
@ -150,6 +162,13 @@
}
});
},
insertField(field) {
this.enableContentEdit();
let textBefore = this.newContent.substring(0, this.cursorPos);
let textAfter = this.newContent.substring(this.cursorPos, this.newContent.length);
this.newContent = textBefore + field + textAfter;
this.cursorPos = this.cursorPos + field.length;
}
}
}
</script>

3
app/javascript/vue/label_template/insert_field_dropdown.vue
View file

@ -22,6 +22,7 @@
:data-template="tooltipTemplate"
class="field-element"
:title="i18n.t('label_templates.show.insert_dropdown.field_code', {code: field.tag})"
@click="$emit('insertField', field.tag)"
>
{{ field.key }}
<i class="fas fa-plus-square"></i>
@ -35,6 +36,7 @@
:data-template="tooltipTemplate"
class="field-element"
:title="i18n.t('label_templates.show.insert_dropdown.field_code', {code: field.tag})"
@click="$emit('insertField', field.tag)"
>
{{ field.key }}
<i class="fas fa-plus-square"></i>
@ -49,6 +51,7 @@
:data-template="tooltipTemplate"
class="field-element"
:title="i18n.t('label_templates.show.insert_dropdown.field_code', {code: field.tag})"
@click="$emit('insertField', field.tag)"
>
{{ field.key }}
<i class="fas fa-plus-square"></i>