diff options
Diffstat (limited to 'app/assets/javascripts/static_site_editor/components/edit_area.vue')
-rw-r--r-- | app/assets/javascripts/static_site_editor/components/edit_area.vue | 45 |
1 files changed, 40 insertions, 5 deletions
diff --git a/app/assets/javascripts/static_site_editor/components/edit_area.vue b/app/assets/javascripts/static_site_editor/components/edit_area.vue index dff21d919a9..e9efef40632 100644 --- a/app/assets/javascripts/static_site_editor/components/edit_area.vue +++ b/app/assets/javascripts/static_site_editor/components/edit_area.vue @@ -2,12 +2,16 @@ import RichContentEditor from '~/vue_shared/components/rich_content_editor/rich_content_editor.vue'; import PublishToolbar from './publish_toolbar.vue'; import EditHeader from './edit_header.vue'; +import UnsavedChangesConfirmDialog from './unsaved_changes_confirm_dialog.vue'; +import parseSourceFile from '~/static_site_editor/services/parse_source_file'; +import { EDITOR_TYPES } from '~/vue_shared/components/rich_content_editor/constants'; export default { components: { RichContentEditor, PublishToolbar, EditHeader, + UnsavedChangesConfirmDialog, }, props: { title: { @@ -30,26 +34,57 @@ export default { }, data() { return { - editableContent: this.content, saveable: false, + parsedSource: parseSourceFile(this.content), + editorMode: EDITOR_TYPES.wysiwyg, }; }, computed: { + editableContent() { + return this.parsedSource.editable; + }, + editableKey() { + return this.isWysiwygMode ? 'body' : 'raw'; + }, + isWysiwygMode() { + return this.editorMode === EDITOR_TYPES.wysiwyg; + }, modified() { - return this.content !== this.editableContent; + return this.isWysiwygMode + ? this.parsedSource.isModifiedBody() + : this.parsedSource.isModifiedRaw(); }, }, methods: { + syncSource() { + if (this.isWysiwygMode) { + this.parsedSource.syncBody(); + return; + } + + this.parsedSource.syncRaw(); + }, + onModeChange(mode) { + this.editorMode = mode; + this.syncSource(); + }, onSubmit() { - this.$emit('submit', { content: this.editableContent }); + this.syncSource(); + this.$emit('submit', { content: this.editableContent.raw }); }, }, }; </script> <template> - <div class="d-flex flex-grow-1 flex-column"> + <div class="d-flex flex-grow-1 flex-column h-100"> <edit-header class="py-2" :title="title" /> - <rich-content-editor v-model="editableContent" class="mb-9" /> + <rich-content-editor + v-model="editableContent[editableKey]" + :initial-edit-type="editorMode" + class="mb-9 h-100" + @modeChange="onModeChange" + /> + <unsaved-changes-confirm-dialog :modified="modified" /> <publish-toolbar class="gl-fixed gl-left-0 gl-bottom-0 gl-w-full" :return-url="returnUrl" |