Fix embedding of macros

frontend/src/app/core/setup/global-dynamic-components.const.ts

@@ -1,9 +1,5 @@
 import { OptionalBootstrapDefinition } from 'core-app/core/setup/globals/dynamic-bootstrapper';
 import { appBaseSelector, ApplicationBaseComponent } from 'core-app/core/routing/base/application-base.component';
-import {
-  EmbeddedTablesMacroComponent,
-  wpEmbeddedTableMacroSelector,
-} from 'core-app/features/work-packages/components/wp-table/embedded/embedded-tables-macro.component';
 import {
   ColorsAutocompleterComponent,
   colorsAutocompleterSelector,
@@ -102,22 +98,10 @@ import {
   BacklogsPageComponent,
   backlogsPageComponentSelector,
 } from 'core-app/features/backlogs/backlogs-page/backlogs-page.component';
-import {
-  attributeValueMacro,
-  AttributeValueMacroComponent,
-} from 'core-app/shared/components/fields/macros/attribute-value-macro.component';
-import {
-  attributeLabelMacro,
-  AttributeLabelMacroComponent,
-} from 'core-app/shared/components/fields/macros/attribute-label-macro.component';
 import {
   AttributeHelpTextComponent,
   attributeHelpTextSelector,
 } from 'core-app/shared/components/attribute-help-texts/attribute-help-text.component';
-import {
-  quickInfoMacroSelector,
-  WorkPackageQuickinfoMacroComponent,
-} from 'core-app/shared/components/fields/macros/work-package-quickinfo-macro.component';
 import { SpotSwitchComponent, spotSwitchSelector } from 'core-app/spot/components/switch/switch.component';
 import { BackupComponent, backupSelector } from 'core-app/core/setup/globals/components/admin/backup.component';
 import {
@@ -208,7 +192,6 @@ export const globalDynamicComponents:OptionalBootstrapDefinition[] = [
   { selector: appBaseSelector, cls: ApplicationBaseComponent },
   { selector: attributeHelpTextSelector, cls: AttributeHelpTextComponent },
   { selector: staticAttributeHelpTextSelector, cls: StaticAttributeHelpTextComponent },
-  { selector: wpEmbeddedTableMacroSelector, cls: EmbeddedTablesMacroComponent, embeddable: true },
   { selector: colorsAutocompleterSelector, cls: ColorsAutocompleterComponent },
   { selector: zenModeComponentSelector, cls: ZenModeButtonComponent },
   { selector: attachmentsSelector, cls: OpAttachmentsComponent, embeddable: true },
@@ -247,9 +230,6 @@ export const globalDynamicComponents:OptionalBootstrapDefinition[] = [
   { selector: opCalendarSidemenuSelector, cls: CalendarSidemenuComponent },
   { selector: triggerActionsEntryComponentSelector, cls: TriggerActionsEntryComponent, embeddable: true },
   { selector: backlogsPageComponentSelector, cls: BacklogsPageComponent },
-  { selector: attributeValueMacro, cls: AttributeValueMacroComponent, embeddable: true },
-  { selector: attributeLabelMacro, cls: AttributeLabelMacroComponent, embeddable: true },
-  { selector: quickInfoMacroSelector, cls: WorkPackageQuickinfoMacroComponent, embeddable: true },
   { selector: editableQueryPropsSelector, cls: EditableQueryPropsComponent },
   { selector: backupSelector, cls: BackupComponent },
   { selector: opInAppNotificationBellSelector, cls: InAppNotificationBellComponent },

frontend/src/app/features/work-packages/components/wp-table/embedded/embedded-tables-macro.component.ts

@@ -26,34 +26,31 @@
 // See COPYRIGHT and LICENSE files for more details.
 // ++    Ng1FieldControlsWrapper,
 
-import { Component, ElementRef } from '@angular/core';
-import { WorkPackageTableConfigurationObject } from 'core-app/features/work-packages/components/wp-table/wp-table-configuration';
-
-export const wpEmbeddedTableMacroSelector = 'macro.embedded-table';
+import { Component, ElementRef, Input } from '@angular/core';
+import {
+  WorkPackageTableConfigurationObject,
+} from 'core-app/features/work-packages/components/wp-table/wp-table-configuration';
+import { populateInputsFromDataset } from 'core-app/shared/components/dataset-inputs';
 
 @Component({
-  selector: wpEmbeddedTableMacroSelector,
   template: `
     <wp-embedded-table-entry [queryProps]="queryProps"
                              [configuration]="configuration">
     </wp-embedded-table-entry>
   `,
 })
 export class EmbeddedTablesMacroComponent {
-  // noinspection JSUnusedGlobalSymbols
-  public queryProps:any;
+  @Input() public queryProps:object;
 
   public configuration:WorkPackageTableConfigurationObject = {
     actionsColumnEnabled: false,
     columnMenuEnabled: false,
     contextMenuEnabled: false,
   };
 
-  constructor(readonly elementRef:ElementRef) {
-  }
-
-  ngOnInit() {
-    const element = this.elementRef.nativeElement;
-    this.queryProps = JSON.parse(element.dataset.queryProps);
+  constructor(
+    readonly elementRef:ElementRef,
+  ) {
+    populateInputsFromDataset(this);
   }
 }

frontend/src/app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.component.ts

@@ -26,10 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import {
-  ChangeDetectionStrategy,
-  Component, ElementRef, Input, OnInit, ViewChild,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
 import { HalResource } from 'core-app/features/hal/resources/hal-resource';
 import { HalResourceService } from 'core-app/features/hal/services/hal-resource.service';
@@ -38,6 +35,7 @@ import { filter, takeUntil } from 'rxjs/operators';
 import { ToastService } from 'core-app/shared/components/toaster/toast.service';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import {
+  ICKEditorMacroType,
   ICKEditorType,
 } from 'core-app/shared/components/editor/components/ckeditor/ckeditor-setup.service';
 import { OpCkeditorComponent } from 'core-app/shared/components/editor/components/ckeditor/op-ckeditor.component';
@@ -64,7 +62,7 @@ export class CkeditorAugmentedTextareaComponent extends UntilDestroyedMixin impl
 
   @Input() public previewContext:string;
 
-  @Input() public macros:boolean;
+  @Input() public macros:ICKEditorMacroType;
 
   @Input() public resource?:object;
 
@@ -131,8 +129,10 @@ export class CkeditorAugmentedTextareaComponent extends UntilDestroyedMixin impl
       resource: this.halResource,
       previewContext: this.previewContext,
     };
-    if (!this.macros || this.readOnly) {
+    if (this.readOnly) {
       this.context.macros = 'none';
+    } else if (this.macros) {
+      this.context.macros = this.macros;
     }
 
     this.registerFormSubmitListener();

frontend/src/app/shared/components/fields/macros/attribute-label-macro.component.ts

@@ -37,7 +37,9 @@ import {
 } from '@angular/core';
 import { HalResource } from 'core-app/features/hal/resources/hal-resource';
 import { SchemaCacheService } from 'core-app/core/schemas/schema-cache.service';
-import { HalResourceEditingService } from 'core-app/shared/components/fields/edit/services/hal-resource-editing.service';
+import {
+  HalResourceEditingService,
+} from 'core-app/shared/components/fields/edit/services/hal-resource-editing.service';
 import { DisplayFieldService } from 'core-app/shared/components/fields/display/display-field.service';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import {
@@ -47,10 +49,7 @@ import {
 import { capitalize } from 'core-app/shared/helpers/string-helpers';
 import { firstValueFrom } from 'rxjs';
 
-export const attributeLabelMacro = 'macro.macro--attribute-label';
-
 @Component({
-  selector: attributeLabelMacro,
   templateUrl: './attribute-label-macro.html',
   styleUrls: ['./attribute-macro.sass'],
   changeDetection: ChangeDetectionStrategy.OnPush,

frontend/src/app/shared/components/fields/macros/attribute-value-macro.component.ts

@@ -38,7 +38,9 @@ import {
 } from '@angular/core';
 import { HalResource } from 'core-app/features/hal/resources/hal-resource';
 import { SchemaCacheService } from 'core-app/core/schemas/schema-cache.service';
-import { HalResourceEditingService } from 'core-app/shared/components/fields/edit/services/hal-resource-editing.service';
+import {
+  HalResourceEditingService,
+} from 'core-app/shared/components/fields/edit/services/hal-resource-editing.service';
 import { DisplayFieldService } from 'core-app/shared/components/fields/display/display-field.service';
 import { IFieldSchema } from 'core-app/shared/components/fields/field.base';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
@@ -48,10 +50,7 @@ import {
 } from 'core-app/shared/components/fields/macros/attribute-model-loader.service';
 import { firstValueFrom } from 'rxjs';
 
-export const attributeValueMacro = 'macro.macro--attribute-value';
-
 @Component({
-  selector: attributeValueMacro,
   templateUrl: './attribute-value-macro.html',
   styleUrls: ['./attribute-macro.sass'],
   changeDetection: ChangeDetectionStrategy.OnPush,

frontend/src/app/shared/components/fields/macros/work-package-quickinfo-macro.component.ts

@@ -38,17 +38,18 @@ import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
 import { Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { SchemaCacheService } from 'core-app/core/schemas/schema-cache.service';
-import { HalResourceEditingService } from 'core-app/shared/components/fields/edit/services/hal-resource-editing.service';
+import {
+  HalResourceEditingService,
+} from 'core-app/shared/components/fields/edit/services/hal-resource-editing.service';
 import { DisplayFieldService } from 'core-app/shared/components/fields/display/display-field.service';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { WorkPackageResource } from 'core-app/features/hal/resources/work-package-resource';
-import { CombinedDateDisplayField } from 'core-app/shared/components/fields/display/field-types/combined-date-display.field';
+import {
+  CombinedDateDisplayField,
+} from 'core-app/shared/components/fields/display/field-types/combined-date-display.field';
 import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
 
-export const quickInfoMacroSelector = 'macro.macro--wp-quickinfo';
-
 @Component({
-  selector: quickInfoMacroSelector,
   templateUrl: './work-package-quickinfo-macro.html',
   styleUrls: ['./work-package-quickinfo-macro.sass'],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -83,8 +84,8 @@ export class WorkPackageQuickinfoMacroComponent {
     readonly displayField:DisplayFieldService,
     readonly pathHelper:PathHelperService,
     readonly I18n:I18nService,
-    readonly cdRef:ChangeDetectorRef) {
-
+    readonly cdRef:ChangeDetectorRef,
+  ) {
   }
 
   ngOnInit() {

frontend/src/app/shared/components/fields/openproject-fields.module.ts

@@ -26,7 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { APP_INITIALIZER, NgModule } from '@angular/core';
+import { APP_INITIALIZER, Injector, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { OpenprojectModalModule } from 'core-app/shared/components/modal/modal.module';
 import { OpenprojectEditorModule } from 'core-app/shared/components/editor/openproject-editor.module';
@@ -39,34 +39,73 @@ import { DisplayFieldService } from 'core-app/shared/components/fields/display/d
 import { initializeCoreEditFields } from 'core-app/shared/components/fields/edit/edit-field.initializer';
 import { initializeCoreDisplayFields } from 'core-app/shared/components/fields/display/display-field.initializer';
 import { FloatEditFieldComponent } from 'core-app/shared/components/fields/edit/field-types/float-edit-field.component';
-import { MultiSelectEditFieldComponent } from 'core-app/shared/components/fields/edit/field-types/multi-select-edit-field.component';
-import { EditFormPortalComponent } from 'core-app/shared/components/fields/edit/editing-portal/edit-form-portal.component';
-import { SelectAutocompleterRegisterService } from 'core-app/shared/components/fields/edit/field-types/select-edit-field/select-autocompleter-register.service';
+import {
+  MultiSelectEditFieldComponent,
+} from 'core-app/shared/components/fields/edit/field-types/multi-select-edit-field.component';
+import {
+  EditFormPortalComponent,
+} from 'core-app/shared/components/fields/edit/editing-portal/edit-form-portal.component';
+import {
+  SelectAutocompleterRegisterService,
+} from 'core-app/shared/components/fields/edit/field-types/select-edit-field/select-autocompleter-register.service';
 import { EditFormComponent } from 'core-app/shared/components/fields/edit/edit-form/edit-form.component';
-import { WorkPackageEditFieldComponent } from 'core-app/shared/components/fields/edit/field-types/work-package-edit-field.component';
-import { EditableAttributeFieldComponent } from 'core-app/shared/components/fields/edit/field/editable-attribute-field.component';
-import { ProjectStatusEditFieldComponent } from 'core-app/shared/components/fields/edit/field-types/project-status-edit-field.component';
-import { PlainFormattableEditFieldComponent } from 'core-app/shared/components/fields/edit/field-types/plain-formattable-edit-field.component';
-import { TimeEntryWorkPackageEditFieldComponent } from 'core-app/shared/components/fields/edit/field-types/te-work-package-edit-field.component';
+import {
+  WorkPackageEditFieldComponent,
+} from 'core-app/shared/components/fields/edit/field-types/work-package-edit-field.component';
+import {
+  EditableAttributeFieldComponent,
+} from 'core-app/shared/components/fields/edit/field/editable-attribute-field.component';
+import {
+  ProjectStatusEditFieldComponent,
+} from 'core-app/shared/components/fields/edit/field-types/project-status-edit-field.component';
+import {
+  PlainFormattableEditFieldComponent,
+} from 'core-app/shared/components/fields/edit/field-types/plain-formattable-edit-field.component';
+import {
+  TimeEntryWorkPackageEditFieldComponent,
+} from 'core-app/shared/components/fields/edit/field-types/te-work-package-edit-field.component';
 import { AttributeValueMacroComponent } from 'core-app/shared/components/fields/macros/attribute-value-macro.component';
 import { AttributeLabelMacroComponent } from 'core-app/shared/components/fields/macros/attribute-label-macro.component';
-import { WorkPackageQuickinfoMacroComponent } from 'core-app/shared/components/fields/macros/work-package-quickinfo-macro.component';
+import {
+  WorkPackageQuickinfoMacroComponent,
+} from 'core-app/shared/components/fields/macros/work-package-quickinfo-macro.component';
 import { DisplayFieldComponent } from 'core-app/shared/components/fields/display/display-field.component';
-import { OpenprojectAutocompleterModule } from 'core-app/shared/components/autocompleter/openproject-autocompleter.module';
-import { BooleanEditFieldModule } from 'core-app/shared/components/fields/edit/field-types/boolean-edit-field/boolean-edit-field.module';
-import { IntegerEditFieldModule } from 'core-app/shared/components/fields/edit/field-types/integer-edit-field/integer-edit-field.module';
-import { TextEditFieldModule } from 'core-app/shared/components/fields/edit/field-types/text-edit-field/text-edit-field.module';
-import { DateEditFieldModule } from 'core-app/shared/components/fields/edit/field-types/date-edit-field/date-edit-field.module';
-import { SelectEditFieldModule } from 'core-app/shared/components/fields/edit/field-types/select-edit-field/select-edit-field.module';
-import { FormattableEditFieldModule } from 'core-app/shared/components/fields/edit/field-types/formattable-edit-field/formattable-edit-field.module';
-import { EditFieldControlsModule } from 'core-app/shared/components/fields/edit/field-controls/edit-field-controls.module';
+import {
+  OpenprojectAutocompleterModule,
+} from 'core-app/shared/components/autocompleter/openproject-autocompleter.module';
+import {
+  BooleanEditFieldModule,
+} from 'core-app/shared/components/fields/edit/field-types/boolean-edit-field/boolean-edit-field.module';
+import {
+  IntegerEditFieldModule,
+} from 'core-app/shared/components/fields/edit/field-types/integer-edit-field/integer-edit-field.module';
+import {
+  TextEditFieldModule,
+} from 'core-app/shared/components/fields/edit/field-types/text-edit-field/text-edit-field.module';
+import {
+  DateEditFieldModule,
+} from 'core-app/shared/components/fields/edit/field-types/date-edit-field/date-edit-field.module';
+import {
+  SelectEditFieldModule,
+} from 'core-app/shared/components/fields/edit/field-types/select-edit-field/select-edit-field.module';
+import {
+  FormattableEditFieldModule,
+} from 'core-app/shared/components/fields/edit/field-types/formattable-edit-field/formattable-edit-field.module';
+import {
+  EditFieldControlsModule,
+} from 'core-app/shared/components/fields/edit/field-controls/edit-field-controls.module';
 import { ProjectEditFieldComponent } from './edit/field-types/project-edit-field.component';
-import { HoursDurationEditFieldComponent } from 'core-app/shared/components/fields/edit/field-types/hours-duration-edit-field.component';
+import {
+  HoursDurationEditFieldComponent,
+} from 'core-app/shared/components/fields/edit/field-types/hours-duration-edit-field.component';
 import { UserEditFieldComponent } from './edit/field-types/user-edit-field.component';
-import { DaysDurationEditFieldComponent } from 'core-app/shared/components/fields/edit/field-types/days-duration-edit-field.component';
+import {
+  DaysDurationEditFieldComponent,
+} from 'core-app/shared/components/fields/edit/field-types/days-duration-edit-field.component';
 import { CombinedDateEditFieldComponent } from './edit/field-types/combined-date-edit-field.component';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { FormsModule } from '@angular/forms';
+import { registerCustomElement } from 'core-app/shared/helpers/angular/custom-elements.helper';
 
 @NgModule({
   imports: [
@@ -131,4 +170,9 @@ import { FormsModule } from '@angular/forms';
   ],
 })
 export class OpenprojectFieldsModule {
+  constructor(injector:Injector) {
+    registerCustomElement('opce-macro-attribute-value', AttributeValueMacroComponent, { injector });
+    registerCustomElement('opce-macro-attribute-label', AttributeLabelMacroComponent, { injector });
+    registerCustomElement('opce-macro-wp-quickinfo', WorkPackageQuickinfoMacroComponent, { injector });
+  }
 }

lib/open_project/text_formatting/filters/macros/embedded_table.rb

@@ -28,6 +28,7 @@
 
 module OpenProject::TextFormatting::Filters::Macros
   module EmbeddedTable
+    CUSTOM_ELEMENT = 'opce-macro-embedded-table'.freeze
     HTML_CLASS = 'embedded-table'.freeze
 
     module_function
@@ -36,7 +37,8 @@ def identifier
       HTML_CLASS
     end
 
-    def apply(macro, result:, context:)
+    def apply(macro, **)
+      macro.name = CUSTOM_ELEMENT
       macro['class'] = macro['class'].gsub('op-uc-placeholder', '').squish
     end
 

lib/open_project/text_formatting/matchers/attribute_macros.rb

@@ -59,9 +59,8 @@ def self.process_match(m, _matched_string, _context)
         }
         type = m[2].downcase
 
-        ApplicationController.helpers.content_tag :macro,
+        ApplicationController.helpers.content_tag "opce-macro-attribute-#{type}",
                                                   '',
-                                                  class: "macro--attribute-#{type}",
                                                   data: macro_attributes
       end
     end

lib/open_project/text_formatting/matchers/link_handlers/work_packages.rb

@@ -58,9 +58,8 @@ def call
       private
 
       def render_work_package_macro(wp_id, detailed: false)
-        ApplicationController.helpers.content_tag :macro,
+        ApplicationController.helpers.content_tag 'opce-macro-wp-quickinfo',
                                                   '',
-                                                  class: "macro--wp-quickinfo",
                                                   data: { id: wp_id, detailed: }
       end
 

lib/primer/open_project/forms/rich_text_area.html.erb

@@ -5,6 +5,7 @@
   <%= angular_component_tag 'opce-ckeditor-augmented-textarea',
                             inputs: {
                               textareaSelector: "##{builder.field_id(@input.name)}",
+                              macros: 'resource',
                               turboMode: true
                             }
   %>

modules/meeting/app/components/meeting_agenda_items/item_component/show_component.html.erb

@@ -74,7 +74,7 @@
       grid.with_area(:notes, tag: :div) do
         if @meeting_agenda_item.notes.present?
           render(Primer::Box.new(color: :subtle, mt: 1)) do
-            ::OpenProject::TextFormatting::Renderer.format_text(@meeting_agenda_item.notes)
+            format_text(@meeting_agenda_item, :notes)
           end
         end
       end

spec/features/work_packages/details/markdown/activity_comments_spec.rb

@@ -246,7 +246,7 @@
         comment_field.submit_by_click
 
         wp_page.expect_comment text: "Single ##{work_package2.id}"
-        expect(page).to have_selector('.user-comment .macro--wp-quickinfo', count: 2)
+        expect(page).to have_selector('.user-comment opce-macro-wp-quickinfo', count: 2)
         expect(page).to have_selector('.user-comment .work-package--quickinfo.preview-trigger', count: 2)
       end
     end