Merge pull request #15277 from opf/fix/move-dropdowns-into-top-layer

Fix/move dropdowns into top layer
opf · Apr 16, 2024 · 538f733 · 538f733
2 parents 1f65b10 + 4abe814
commit 538f733
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 2 deletions.
diff --git a/...ts/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.component.ts b/...ts/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.component.ts
@@ -64,6 +64,8 @@ export class CkeditorAugmentedTextareaComponent extends UntilDestroyedMixin impl
 
   @Input() public macros:ICKEditorMacroType;
 
+  @Input() public removePlugins:string[] = [];
+
   @Input() public resource?:object;
 
   @Input() public turboMode = false;
@@ -130,6 +132,7 @@ export class CkeditorAugmentedTextareaComponent extends UntilDestroyedMixin impl
       type: this.editorType,
       resource: this.halResource,
       previewContext: this.previewContext,
+      removePlugins: this.removePlugins,
     };
     if (this.readOnly) {
       this.context.macros = 'none';

diff --git a/frontend/src/app/shared/components/editor/components/ckeditor/ckeditor-setup.service.ts b/frontend/src/app/shared/components/editor/components/ckeditor/ckeditor-setup.service.ts
@@ -31,6 +31,7 @@ export class CKEditorSetupService {
 
   public initialize() {
     this.prefetch = this.load();
+    this.watchTopLayer();
   }
 
   /**
@@ -45,7 +46,8 @@ export class CKEditorSetupService {
    * @returns {Promise<ICKEditorWatchdog>}
    */
   public async create(
-    wrapper:HTMLElement, context:ICKEditorContext,
+    wrapper:HTMLElement,
+    context:ICKEditorContext,
     initialData:string|null = null,
   ):Promise<ICKEditorWatchdog> {
     // Load the bundle and the matching locale, if found.
@@ -62,6 +64,7 @@ export class CKEditorSetupService {
 
     const config = {
       openProject: this.createConfig(context),
+      removePlugins: context.removePlugins,
       initialData,
       language: {
         ui: uiLocale,
@@ -144,4 +147,31 @@ export class CKEditorSetupService {
       pluginContext: window.OpenProject.pluginContext.value,
     };
   }
+
+  private watchTopLayer() {
+    const targetClassNames = ['ck-body-wrapper', 'ck-inspector-'];
+
+    const observer = new MutationObserver((mutations) => {
+      const dialog = document.querySelector('dialog[open]');
+      if (!dialog) {
+        return;
+      }
+
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (!(node instanceof HTMLElement)) {
+            return;
+          }
+
+          if (targetClassNames.some((className) => node.classList.contains(className))) {
+            dialog.append(node);
+          }
+        });
+      });
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+    });
+  }
 }
diff --git a/lib/primer/open_project/forms/rich_text_area.html.erb b/lib/primer/open_project/forms/rich_text_area.html.erb
@@ -6,7 +6,8 @@
                             inputs: @rich_text_options.reverse_merge(
                               {
                                 textareaSelector: "##{builder.field_id(@input.name)}",
-                                macros: 'resource',
+                                removePlugins: ["CodeBlock"],
+                                macros: false,
                                 turboMode: true
                               }
                             )