Merge branch '215121-add-wysiwyg-documentation' into 'master'

Enable Static Site Editor WYSIWYG + documentation

See merge request gitlab-org/gitlab!31099

app/assets/javascripts/static_site_editor/components/edit_area.vue

 <script>
-import { GlFormTextarea } 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 PublishToolbar from '../components/publish_toolbar.vue';
 import EditHeader from '../components/edit_header.vue';
 
 export default {
   components: {
-    GlFormTextarea,
     RichContentEditor,
     PublishToolbar,
     EditHeader,
   },
-  mixins: [glFeatureFlagsMixin()],
   props: {
     title: {
       type: String,
@@ -55,8 +49,7 @@ export default {
 <template>
   <div class="d-flex flex-grow-1 flex-column">
     <edit-header class="py-2" :title="title" />
-    <rich-content-editor v-if="glFeatures.richContentEditor" v-model="editableContent" />
-    <gl-form-textarea v-else v-model="editableContent" class="h-100 shadow-none" />
+    <rich-content-editor v-model="editableContent" class="mb-9" />
     <publish-toolbar
       class="gl-fixed gl-left-0 gl-bottom-0 gl-w-full"
       :return-url="returnUrl"

app/controllers/projects/static_site_editor_controller.rb

@@ -10,10 +10,6 @@ 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

changelogs/unreleased/215121-add-wysiwyg-documentation.yml

+---
+title: Add WYSIWYG editor to the Static Site Editor
+merge_request: 31099
+author:
+type: added

doc/user/project/static_site_editor/index.md

@@ -5,7 +5,8 @@ description: "The static site editor enables users to edit content on static web
 
 # Static Site Editor
 
-> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/28758) in GitLab 12.10.
+> - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/28758) in GitLab 12.10.
+> - WYSIWYG editor [introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/214559) in GitLab 13.0.
 
 Static Site Editor enables users to edit content on static websites without
 prior knowledge of the underlying templating language, site architecture, or
@@ -44,7 +45,7 @@ When clicking it, GitLab will open up an editor window from which the content
 can be directly edited. When you're ready, you can submit your changes in a
 click of a button:
 
-![Static Site Editor](img/static_site_editor_v12_10.png)
+![Static Site Editor](img/wysiwyg_editor_v13_0.png)
 
 When an editor submits their changes, in the background, GitLab automatically
 creates a new branch, commits their changes, and opens a merge request. The
@@ -79,7 +80,8 @@ company and a new feature has been added to the company product.
 1. You are assigned the task of updating the documentation.
 1. You visit a page and see content that needs to be edited.
 1. Click the **Edit this page** button on the production site.
-1. The file is opened in the Static Site Editor.
+1. The file is opened in the Static Site Editor in **WYSIWYG** mode. If you wish to edit the raw Markdown
+   instead, you can toggle the **Markdown** mode in the bottom-right corner.
 1. You edit the file right there and click **Submit changes**.
 1. A new merge request is automatically created and you assign it to your colleague for review.
 

spec/frontend/static_site_editor/components/edit_area_spec.js

@@ -15,9 +15,6 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
 
   const buildWrapper = (propsData = {}) => {
     wrapper = shallowMount(EditArea, {
-      provide: {
-        glFeatures: { richContentEditor: true },
-      },
       propsData: {
         title,
         content,