Replace edit area with rich content editor

Replaced the edit area with the rich content editor component

app/assets/javascripts/static_site_editor/pages/home.vue

@@ -2,6 +2,8 @@
 import { mapState, mapGetters, mapActions } from 'vuex';
 import { GlSkeletonLoader } from '@gitlab/ui';
 
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import RichContentEditor from '~/vue_shared/components/rich_content_editor/rich_content_editor.vue';
 import EditArea from '../components/edit_area.vue';
 import EditHeader from '../components/edit_header.vue';
 import SavedChangesMessage from '../components/saved_changes_message.vue';
@@ -11,6 +13,7 @@ import SubmitChangesError from '../components/submit_changes_error.vue';
 
 export default {
   components: {
+    RichContentEditor,
     EditArea,
     EditHeader,
     InvalidContentMessage,
@@ -19,6 +22,7 @@ export default {
     PublishToolbar,
     SubmitChangesError,
   },
+  mixins: [glFeatureFlagsMixin()],
   computed: {
     ...mapState([
       'content',
@@ -76,7 +80,14 @@ export default {
           @dismiss="dismissSubmitChangesError"
         />
         <edit-header class="w-75 align-self-center py-2" :title="title" />
+        <rich-content-editor
+          v-if="glFeatures.richContentEditor"
+          class="w-75 gl-align-self-center"
+          :value="content"
+          @input="setContent"
+        />
         <edit-area
+          v-else
           class="w-75 h-100 shadow-none align-self-center"
           :value="content"
           @input="setContent"

app/assets/javascripts/vue_shared/components/rich_content_editor/constants.js

@@ -23,3 +23,5 @@ export const EDITOR_OPTIONS = {
 export const EDITOR_TYPES = {
   wysiwyg: 'wysiwyg',
 };
+
+export const EDITOR_HEIGHT = '100%';

app/assets/javascripts/vue_shared/components/rich_content_editor/rich_content_editor.vue

@@ -2,7 +2,7 @@
 import 'codemirror/lib/codemirror.css';
 import '@toast-ui/editor/dist/toastui-editor.css';
 
-import { EDITOR_OPTIONS, EDITOR_TYPES } from './constants';
+import { EDITOR_OPTIONS, EDITOR_TYPES, EDITOR_HEIGHT } from './constants';
 
 export default {
   components: {
@@ -16,6 +16,26 @@ export default {
       type: String,
       required: true,
     },
+    options: {
+      type: Object,
+      required: false,
+      default: () => EDITOR_OPTIONS,
+    },
+    initialEditType: {
+      type: String,
+      required: false,
+      default: EDITOR_TYPES.wysiwyg,
+    },
+    height: {
+      type: String,
+      required: false,
+      default: EDITOR_HEIGHT,
+    },
+  },
+  computed: {
+    editorOptions() {
+      return { ...EDITOR_OPTIONS, ...this.options };
+    },
   },
   methods: {
     onContentChanged() {
@@ -25,16 +45,15 @@ export default {
       return this.$refs.editor.invoke('getMarkdown');
     },
   },
-  editorOptions: EDITOR_OPTIONS,
-  initialEditType: EDITOR_TYPES.wysiwyg,
 };
 </script>
 <template>
   <toast-editor
     ref="editor"
-    :initial-edit-type="$options.initialEditType"
     :initial-value="value"
-    :options="$options.editorOptions"
+    :options="editorOptions"
+    :initial-edit-type="initialEditType"
+    :height="height"
     @change="onContentChanged"
   />
 </template>

app/controllers/projects/static_site_editor_controller.rb

@@ -10,6 +10,10 @@ class Projects::StaticSiteEditorController < Projects::ApplicationController
   before_action :assign_ref_and_path, only: [:show]
   before_action :authorize_edit_tree!, only: [:show]
 
+  before_action do
+    push_frontend_feature_flag(:rich_content_editor)
+  end
+
   def show
     @config = Gitlab::StaticSiteEditor::Config.new(@repository, @ref, @path, params[:return_url])
   end

spec/frontend/__mocks__/@toast-ui/vue-editor/index.js

@@ -10,6 +10,9 @@ export const Editor = {
     initialEditType: {
       type: String,
     },
+    height: {
+      type: String,
+    },
   },
   render(h) {
     return h('div');

spec/frontend/static_site_editor/pages/home_spec.js

@@ -5,7 +5,7 @@ import { GlSkeletonLoader } from '@gitlab/ui';
 import createState from '~/static_site_editor/store/state';
 
 import Home from '~/static_site_editor/pages/home.vue';
-import EditArea from '~/static_site_editor/components/edit_area.vue';
+import RichContentEditor from '~/vue_shared/components/rich_content_editor/rich_content_editor.vue';
 import EditHeader from '~/static_site_editor/components/edit_header.vue';
 import InvalidContentMessage from '~/static_site_editor/components/invalid_content_message.vue';
 import PublishToolbar from '~/static_site_editor/components/publish_toolbar.vue';
@@ -71,10 +71,13 @@ describe('static_site_editor/pages/home', () => {
     wrapper = shallowMount(Home, {
       localVue,
       store,
+      provide: {
+        glFeatures: { richContentEditor: true },
+      },
     });
   };
 
-  const findEditArea = () => wrapper.find(EditArea);
+  const findRichContentEditor = () => wrapper.find(RichContentEditor);
   const findEditHeader = () => wrapper.find(EditHeader);
   const findInvalidContentMessage = () => wrapper.find(InvalidContentMessage);
   const findPublishToolbar = () => wrapper.find(PublishToolbar);
@@ -103,8 +106,8 @@ describe('static_site_editor/pages/home', () => {
   });
 
   describe('when content is not loaded', () => {
-    it('does not render edit area', () => {
-      expect(findEditArea().exists()).toBe(false);
+    it('does not render rich content editor', () => {
+      expect(findRichContentEditor().exists()).toBe(false);
     });
 
     it('does not render edit header', () => {
@@ -129,8 +132,8 @@ describe('static_site_editor/pages/home', () => {
       buildWrapper();
     });
 
-    it('renders the edit area', () => {
-      expect(findEditArea().exists()).toBe(true);
+    it('renders the rich content editor', () => {
+      expect(findRichContentEditor().exists()).toBe(true);
     });
 
     it('renders the edit header', () => {
@@ -141,8 +144,8 @@ describe('static_site_editor/pages/home', () => {
       expect(findSkeletonLoader().exists()).toBe(false);
     });
 
-    it('passes page content to edit area', () => {
-      expect(findEditArea().props('value')).toBe(content);
+    it('passes page content to the rich content editor', () => {
+      expect(findRichContentEditor().props('value')).toBe(content);
     });
 
     it('passes page title to edit header', () => {
@@ -228,11 +231,11 @@ describe('static_site_editor/pages/home', () => {
     expect(loadContentActionMock).toHaveBeenCalled();
   });
 
-  it('dispatches setContent action when edit area emits input event', () => {
+  it('dispatches setContent action when rich content editor emits input event', () => {
     buildContentLoadedStore();
     buildWrapper();
 
-    findEditArea().vm.$emit('input', sourceContent);
+    findRichContentEditor().vm.$emit('input', sourceContent);
 
     expect(setContentActionMock).toHaveBeenCalledWith(expect.anything(), sourceContent, undefined);
   });

spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_spec.js

@@ -50,6 +50,10 @@ describe('Rich Content Editor', () => {
     it('has the correct initial edit type', () => {
       expect(findEditor().props().initialEditType).toBe('wysiwyg');
     });
+
+    it('has the correct height', () => {
+      expect(findEditor().props().height).toBe('100%');
+    });
   });
 
   describe('when content is changed', () => {