Skip to content

Commit

Permalink
Move text editor variant to separate component
Browse files Browse the repository at this point in the history
  • Loading branch information
guerler committed Jan 14, 2025
1 parent 77938af commit 6d5f7af
Show file tree
Hide file tree
Showing 2 changed files with 122 additions and 89 deletions.
119 changes: 119 additions & 0 deletions client/src/components/Markdown/Editor/TextEditor.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
<template>
<div id="columns" class="d-flex">
<FlexPanel side="left">
<MarkdownToolBox :steps="steps" @insert="insertMarkdown" />
</FlexPanel>
<div id="center" class="overflow-auto w-100">
<div class="markdown-editor h-100">
<div class="unified-panel-header" unselectable="on">
<div class="unified-panel-header-inner">
<div class="panel-header-buttons">
<slot name="buttons" />
<b-button
v-b-tooltip.hover.bottom
title="Help"
variant="link"
role="button"
@click="onHelp">
<FontAwesomeIcon icon="question" />
</b-button>
</div>
<div class="my-1">
{{ title }}
</div>
</div>
</div>
<div class="unified-panel-body d-flex">
<textarea
id="workflow-report-editor"
ref="text-area"
v-model="content"
class="markdown-textarea"
@input="onUpdate" />
</div>
</div>
</div>
<MarkdownHelpModal ref="help" :mode="mode" />
</div>
</template>

<script>
import { library } from "@fortawesome/fontawesome-svg-core";

Check failure on line 41 in client/src/components/Markdown/Editor/TextEditor.vue

View workflow job for this annotation

GitHub Actions / client-unit-test (18)

Run autofix to sort these imports!
import { faQuestion } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import BootstrapVue from "bootstrap-vue";
import FlexPanel from "@/components/Panels/FlexPanel";
import _ from "underscore";
import Vue from "vue";
import MarkdownHelpModal from "@/components/Markdown/MarkdownHelpModal";
import MarkdownToolBox from "@/components/Markdown/MarkdownToolBox";
Vue.use(BootstrapVue);
library.add(faQuestion);
const FENCE = "```";
export default {
components: {
FlexPanel,
FontAwesomeIcon,
MarkdownHelpModal,
MarkdownToolBox,
},
props: {
markdownText: {
type: String,
default: null,
},
steps: {
type: Object,
default: null,
},
title: {
type: String,
default: null,
},
mode: {
type: String,
default: "report",
},
},
data() {
return {
content: this.markdownText,
};
},
watch: {
markdownText() {
const textArea = this.$refs["text-area"];
const textCursor = textArea.selectionEnd;
this.content = this.markdownText;
Vue.nextTick(() => {
textArea.selectionEnd = textCursor;
textArea.focus();
});
},
},
methods: {
insertMarkdown(markdown) {
markdown = markdown.replace(")(", ", ");
markdown = `${FENCE}galaxy\n${markdown}\n${FENCE}\n`;
const textArea = this.$refs["text-area"];
textArea.focus();
const cursorPosition = textArea.selectionStart;
let newContent = this.content.substr(0, cursorPosition);
newContent += `\r\n${markdown.trim()}\r\n`;
newContent += this.content.substr(cursorPosition);
this.$emit("update", newContent);
},
onUpdate: _.debounce(function (e) {
this.$emit("update", this.content);
}, 300),
onHelp() {
this.$refs.help.showMarkdownHelp();
},
},
};
</script>
92 changes: 3 additions & 89 deletions client/src/components/Markdown/MarkdownEditor.vue
Original file line number Diff line number Diff line change
@@ -1,66 +1,15 @@
<template>
<div id="columns" class="d-flex">
<FlexPanel side="left">
<MarkdownToolBox :steps="steps" @insert="insertMarkdown" />
</FlexPanel>
<div id="center" class="overflow-auto w-100">
<div class="markdown-editor h-100">
<div class="unified-panel-header" unselectable="on">
<div class="unified-panel-header-inner">
<div class="panel-header-buttons">
<slot name="buttons" />
<b-button
v-b-tooltip.hover.bottom
title="Help"
variant="link"
role="button"
@click="onHelp">
<FontAwesomeIcon icon="question" />
</b-button>
</div>
<div class="my-1">
{{ title }}
</div>
</div>
</div>
<div class="unified-panel-body d-flex">
<textarea
id="workflow-report-editor"
ref="text-area"
v-model="content"
class="markdown-textarea"
@input="onUpdate" />
</div>
</div>
</div>
<MarkdownHelpModal ref="help" :mode="mode" />
<TextEditor :title="title" :markdown-text="markdownText" :steps="steps" :mode="mode" />
</div>
</template>

<script>
import { library } from "@fortawesome/fontawesome-svg-core";
import { faQuestion } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import BootstrapVue from "bootstrap-vue";
import FlexPanel from "components/Panels/FlexPanel";
import _ from "underscore";
import Vue from "vue";
import MarkdownHelpModal from "./MarkdownHelpModal";
import MarkdownToolBox from "./MarkdownToolBox";
Vue.use(BootstrapVue);
library.add(faQuestion);
const FENCE = "```";
import TextEditor from "./Editor/TextEditor.vue";
export default {
components: {
FlexPanel,
FontAwesomeIcon,
MarkdownHelpModal,
MarkdownToolBox,
TextEditor,
},
props: {
markdownText: {
Expand All @@ -80,40 +29,5 @@ export default {
default: "report",
},
},
data() {
return {
content: this.markdownText,
};
},
watch: {
markdownText() {
const textArea = this.$refs["text-area"];
const textCursor = textArea.selectionEnd;
this.content = this.markdownText;
Vue.nextTick(() => {
textArea.selectionEnd = textCursor;
textArea.focus();
});
},
},
methods: {
insertMarkdown(markdown) {
markdown = markdown.replace(")(", ", ");
markdown = `${FENCE}galaxy\n${markdown}\n${FENCE}\n`;
const textArea = this.$refs["text-area"];
textArea.focus();
const cursorPosition = textArea.selectionStart;
let newContent = this.content.substr(0, cursorPosition);
newContent += `\r\n${markdown.trim()}\r\n`;
newContent += this.content.substr(cursorPosition);
this.$emit("update", newContent);
},
onUpdate: _.debounce(function (e) {
this.$emit("update", this.content);
}, 300),
onHelp() {
this.$refs.help.showMarkdownHelp();
},
},
};
</script>

0 comments on commit 6d5f7af

Please sign in to comment.