Commit ba317657 authored by GuiΩ's avatar GuiΩ
Browse files

feat(QuestionEditor): Tab inserts tabulation

create a CodeEditor component
parent 7dfd6df2
<template lang="pug">
textarea(
:value="value"
cols="50"
rows="20"
spellcheck="false"
@keydown="handleKeyDown($event)"
@input="handleInput($event)"
)
</template>
<script>
export default {
name: "CodeEditor",
props: {
value: 2,
tabsize: {
type: Number,
default: 2
},
},
methods: {
handleInput(event) {
this.$emit('input', event.target.value)
},
handleKeyDown(event) {
let textarea = event.target;
let start = textarea.selectionStart;
let end = textarea.selectionEnd;
let lineStart = textarea.value.substring(0,start).lastIndexOf("\n")
switch (event.key) {
case 'Tab':
event.preventDefault();
// event.stopPropagation()
if (event.shiftKey) { // Shift + Tab
for (let i=0; i < this.tabsize; i++) {
if (textarea.value.charAt(lineStart + 1) === ' ') {
textarea.value = textarea.value.substr(0, lineStart + 1) + textarea.value.substr(lineStart + 2);
if (start > lineStart + 1)
start -= 1;
if (end > lineStart + 1)
end -= 1;
}
}
textarea.selectionStart = start;
textarea.selectionEnd = end;
} else { // Tab
let newVal = textarea.value.substring(0, start);
for (let i = 0; i < this.tabsize; i++)
newVal += ' ';
newVal += textarea.value.substring(end);
textarea.value = newVal;
textarea.selectionStart = start + this.tabsize;
textarea.selectionEnd = textarea.selectionStart;
}
this.$emit('input', textarea.value);
break;
case 'Enter':
event.preventDefault();
let spaces = "\n";
let length = 1;
while (textarea.value.charAt(lineStart + length) === ' ') {
length += 1;
spaces += ' ';
}
textarea.value = textarea.value.substring(0, start) + spaces + textarea.value.substring(end);
textarea.selectionStart = start + length;
textarea.selectionEnd = textarea.selectionStart;
this.$emit('input', textarea.value);
}
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
......@@ -32,10 +32,10 @@ Events:
data-testid="latexlog"
@click="$emit('message', errors.latexlog[0])"
) Voir le log LaTeX
textarea#code(v-model="question.code" cols="50" rows="20")/
code-editor#code(v-model="question.code")/
tr
td
label(for="avalider">Demande de validation)
label(for="avalider") Demande de validation
td
.information(v-if="! validationPossible") Il faut positionner la question dans chacun des thémes avant de pouvoir demander sa validation.
.error(v-if="errors && errors.avalider" data-testid="avalider-error") {{ errors.avalider.join('\n') }}
......@@ -67,6 +67,7 @@ Events:
</template>
<script>
import CodeEditor from "@/components/CodeEditor";
import ThemeTree from "@/components/ThemeTree";
import VModal from 'vue-js-modal';
import Vue from 'vue';
......@@ -75,7 +76,7 @@ Vue.use(VModal, { name: 'modal'});
export default {
name: 'QuestionEditor',
components: {ThemeTree},
components: {CodeEditor, ThemeTree},
data: () => {
return {
question: {themes: [], positions: {}},
......@@ -160,7 +161,6 @@ export default {
}
#code-panel {
}
#themes-panel {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment