Merge branch 'sse-uneditable-block-ux' into 'master'

Uneditable block spacing and minor listener refactor

See merge request gitlab-org/gitlab!37087

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

@@ -73,15 +73,23 @@ export default {
     },
   },
   beforeDestroy() {
-    removeCustomEventListener(
-      this.editorApi,
-      CUSTOM_EVENTS.openAddImageModal,
-      this.onOpenAddImageModal,
-    );
-
-    this.editorApi.eventManager.removeEventHandler('changeMode', this.onChangeMode);
+    this.removeListeners();
   },
   methods: {
+    addListeners(editorApi) {
+      addCustomEventListener(editorApi, CUSTOM_EVENTS.openAddImageModal, this.onOpenAddImageModal);
+
+      editorApi.eventManager.listen('changeMode', this.onChangeMode);
+    },
+    removeListeners() {
+      removeCustomEventListener(
+        this.editorApi,
+        CUSTOM_EVENTS.openAddImageModal,
+        this.onOpenAddImageModal,
+      );
+
+      this.editorApi.eventManager.removeEventHandler('changeMode', this.onChangeMode);
+    },
     resetInitialValue(newVal) {
       this.editorInstance.invoke('setMarkdown', newVal);
     },
@@ -92,13 +100,8 @@ export default {
       this.editorApi = editorApi;
 
       registerHTMLToMarkdownRenderer(editorApi);
-      addCustomEventListener(
-        this.editorApi,
-        CUSTOM_EVENTS.openAddImageModal,
-        this.onOpenAddImageModal,
-      );
 
-      this.editorApi.eventManager.listen('changeMode', this.onChangeMode);
+      this.addListeners(editorApi);
     },
     onOpenAddImageModal() {
       this.$refs.addImageModal.show();

app/assets/javascripts/vue_shared/components/rich_content_editor/services/renderers/build_uneditable_token.js

@@ -13,7 +13,7 @@ const buildUneditableOpenToken = (tagType = TAG_TYPES.block) =>
   buildToken('openTag', tagType, {
     attributes: { contenteditable: false },
     classNames: [
-      'gl-px-4 gl-py-2 gl-opacity-5 gl-bg-gray-100 gl-user-select-none gl-cursor-not-allowed',
+      'gl-px-4 gl-py-2 gl-my-5 gl-opacity-5 gl-bg-gray-100 gl-user-select-none gl-cursor-not-allowed',
     ],
   });
 

spec/frontend/vue_shared/components/rich_content_editor/services/renderers/mock_data.js

@@ -18,7 +18,7 @@ const buildMockUneditableOpenToken = type => {
     tagName: type,
     attributes: { contenteditable: false },
     classNames: [
-      'gl-px-4 gl-py-2 gl-opacity-5 gl-bg-gray-100 gl-user-select-none gl-cursor-not-allowed',
+      'gl-px-4 gl-py-2 gl-my-5 gl-opacity-5 gl-bg-gray-100 gl-user-select-none gl-cursor-not-allowed',
     ],
   };
 };