Welcome to mirror list, hosted at ThFree Co, Russian Federation.

gitlab.com/gitlab-org/gitlab-foss.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
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.vue190
1 files changed, 0 insertions, 190 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
deleted file mode 100644
index 2f2efe290ec..00000000000
--- a/app/assets/javascripts/static_site_editor/components/edit_area.vue
+++ /dev/null
@@ -1,190 +0,0 @@
-<script>
-import { EDITOR_TYPES } from '~/static_site_editor/rich_content_editor/constants';
-import RichContentEditor from '~/static_site_editor/rich_content_editor/rich_content_editor.vue';
-import parseSourceFile from '~/static_site_editor/services/parse_source_file';
-import imageRepository from '../image_repository';
-import formatter from '../services/formatter';
-import renderImage from '../services/renderers/render_image';
-import templater from '../services/templater';
-import EditDrawer from './edit_drawer.vue';
-import EditHeader from './edit_header.vue';
-import PublishToolbar from './publish_toolbar.vue';
-import UnsavedChangesConfirmDialog from './unsaved_changes_confirm_dialog.vue';
-
-export default {
- components: {
- RichContentEditor,
- PublishToolbar,
- EditHeader,
- EditDrawer,
- UnsavedChangesConfirmDialog,
- },
- props: {
- title: {
- type: String,
- required: true,
- },
- content: {
- type: String,
- required: true,
- },
- savingChanges: {
- type: Boolean,
- required: true,
- },
- returnUrl: {
- type: String,
- required: false,
- default: '',
- },
- branch: {
- type: String,
- required: true,
- },
- baseUrl: {
- type: String,
- required: true,
- },
- mounts: {
- type: Array,
- required: true,
- },
- project: {
- type: String,
- required: true,
- },
- imageRoot: {
- type: String,
- required: true,
- },
- },
- data() {
- return {
- formattedMarkdown: null,
- parsedSource: parseSourceFile(this.preProcess(true, this.content)),
- editorMode: EDITOR_TYPES.wysiwyg,
- hasMatter: false,
- isDrawerOpen: false,
- isModified: false,
- isSaveable: false,
- };
- },
- imageRepository: imageRepository(),
- computed: {
- editableContent() {
- return this.parsedSource.content(this.isWysiwygMode);
- },
- editableMatter() {
- return this.isDrawerOpen ? this.parsedSource.matter() : {};
- },
- hasSettings() {
- return this.hasMatter && this.isWysiwygMode;
- },
- isWysiwygMode() {
- return this.editorMode === EDITOR_TYPES.wysiwyg;
- },
- customRenderers() {
- const imageRenderer = renderImage.build(
- this.mounts,
- this.project,
- this.branch,
- this.baseUrl,
- this.$options.imageRepository,
- );
- return {
- image: [imageRenderer],
- };
- },
- },
- created() {
- this.refreshEditHelpers();
- },
- methods: {
- preProcess(isWrap, value) {
- const formattedContent = formatter(value);
- const templatedContent = isWrap
- ? templater.wrap(formattedContent)
- : templater.unwrap(formattedContent);
- return templatedContent;
- },
- refreshEditHelpers() {
- const { isModified, hasMatter, isMatterValid } = this.parsedSource;
- this.isModified = isModified();
- this.hasMatter = hasMatter();
- const hasValidMatter = this.hasMatter ? isMatterValid() : true;
- this.isSaveable = this.isModified && hasValidMatter;
- },
- onDrawerOpen() {
- this.isDrawerOpen = true;
- this.refreshEditHelpers();
- },
- onDrawerClose() {
- this.isDrawerOpen = false;
- this.refreshEditHelpers();
- },
- onInputChange(newVal) {
- this.parsedSource.syncContent(newVal, this.isWysiwygMode);
- this.refreshEditHelpers();
- },
- onModeChange(mode) {
- this.editorMode = mode;
-
- const preProcessedContent = this.preProcess(this.isWysiwygMode, this.editableContent);
- this.$refs.editor.resetInitialValue(preProcessedContent);
- },
- onUpdateSettings(settings) {
- this.parsedSource.syncMatter(settings);
- },
- onUploadImage({ file, imageUrl }) {
- this.$options.imageRepository.add(file, imageUrl);
- },
- onSubmit() {
- const preProcessedContent = this.preProcess(false, this.parsedSource.content());
- this.$emit('submit', {
- formattedMarkdown: this.formattedMarkdown,
- content: preProcessedContent,
- images: this.$options.imageRepository.getAll(),
- });
- },
- onEditorLoad({ formattedMarkdown }) {
- this.formattedMarkdown = formattedMarkdown;
- },
- },
-};
-</script>
-<template>
- <div class="d-flex flex-grow-1 flex-column h-100">
- <edit-header class="py-2" :title="title" />
- <edit-drawer
- v-if="hasMatter"
- :is-open="isDrawerOpen"
- :settings="editableMatter"
- @close="onDrawerClose"
- @updateSettings="onUpdateSettings"
- />
- <rich-content-editor
- ref="editor"
- :content="editableContent"
- :initial-edit-type="editorMode"
- :image-root="imageRoot"
- :options="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ {
- customRenderers,
- } /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */"
- class="mb-9 pb-6 h-100"
- @modeChange="onModeChange"
- @input="onInputChange"
- @uploadImage="onUploadImage"
- @load="onEditorLoad"
- />
- <unsaved-changes-confirm-dialog :modified="isSaveable" />
- <publish-toolbar
- class="gl-fixed gl-left-0 gl-bottom-0 gl-w-full"
- :has-settings="hasSettings"
- :return-url="returnUrl"
- :saveable="isSaveable"
- :saving-changes="savingChanges"
- @editSettings="onDrawerOpen"
- @submit="onSubmit"
- />
- </div>
-</template>