diff --git a/frontend/src/app/core/setup/global-dynamic-components.const.ts b/frontend/src/app/core/setup/global-dynamic-components.const.ts
index d19aa8d9bc6d..2afe03addc3d 100644
--- a/frontend/src/app/core/setup/global-dynamic-components.const.ts
+++ b/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 },
diff --git a/frontend/src/app/features/work-packages/components/wp-table/embedded/embedded-tables-macro.component.ts b/frontend/src/app/features/work-packages/components/wp-table/embedded/embedded-tables-macro.component.ts
index 9f4d5748b26b..4d2e3172a738 100644
--- a/frontend/src/app/features/work-packages/components/wp-table/embedded/embedded-tables-macro.component.ts
+++ b/frontend/src/app/features/work-packages/components/wp-table/embedded/embedded-tables-macro.component.ts
@@ -26,13 +26,13 @@
 // 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">
@@ -40,8 +40,7 @@ export const wpEmbeddedTableMacroSelector = 'macro.embedded-table';
   `,
 })
 export class EmbeddedTablesMacroComponent {
-  // noinspection JSUnusedGlobalSymbols
-  public queryProps:any;
+  @Input() public queryProps:object;
 
   public configuration:WorkPackageTableConfigurationObject = {
     actionsColumnEnabled: false,
@@ -49,11 +48,9 @@ export class EmbeddedTablesMacroComponent {
     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);
   }
 }
diff --git a/frontend/src/app/features/work-packages/openproject-work-packages.module.ts b/frontend/src/app/features/work-packages/openproject-work-packages.module.ts
index 650b52fe2777..ae56a5892833 100644
--- a/frontend/src/app/features/work-packages/openproject-work-packages.module.ts
+++ b/frontend/src/app/features/work-packages/openproject-work-packages.module.ts
@@ -26,155 +26,366 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import {
-  Injector,
-  NgModule,
-  CUSTOM_ELEMENTS_SCHEMA,
-} from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, Injector, NgModule } from '@angular/core';
 import { OpSharedModule } from 'core-app/shared/shared.module';
 import { OpenprojectFieldsModule } from 'core-app/shared/components/fields/openproject-fields.module';
 import { OpenprojectModalModule } from 'core-app/shared/components/modal/modal.module';
 import { HookService } from 'core-app/features/plugins/hook-service';
-import { WorkPackageEmbeddedTableComponent } from 'core-app/features/work-packages/components/wp-table/embedded/wp-embedded-table.component';
-import { WorkPackageEmbeddedTableEntryComponent } from 'core-app/features/work-packages/components/wp-table/embedded/wp-embedded-table-entry.component';
-import { WorkPackageTablePaginationComponent } from 'core-app/features/work-packages/components/wp-table/table-pagination/wp-table-pagination.component';
-import { WorkPackageTimelineTableController } from 'core-app/features/work-packages/components/wp-table/timeline/container/wp-timeline-container.directive';
-import { WorkPackageInlineCreateComponent } from 'core-app/features/work-packages/components/wp-inline-create/wp-inline-create.component';
-import { OpTypesContextMenuDirective } from 'core-app/shared/components/op-context-menu/handlers/op-types-context-menu.directive';
-import { OpColumnsContextMenu } from 'core-app/shared/components/op-context-menu/handlers/op-columns-context-menu.directive';
-import { OpSettingsMenuDirective } from 'core-app/shared/components/op-context-menu/handlers/op-settings-dropdown-menu.directive';
-import { WorkPackageStatusDropdownDirective } from 'core-app/shared/components/op-context-menu/handlers/wp-status-dropdown-menu.directive';
-import { WorkPackageCreateSettingsMenuDirective } from 'core-app/shared/components/op-context-menu/handlers/wp-create-settings-menu.directive';
-import { WorkPackageSingleContextMenuDirective } from 'core-app/shared/components/op-context-menu/wp-context-menu/wp-single-context-menu';
-import { WorkPackageTimelineHeaderController } from 'core-app/features/work-packages/components/wp-table/timeline/header/wp-timeline-header.directive';
-import { WorkPackageTableTimelineRelations } from 'core-app/features/work-packages/components/wp-table/timeline/global-elements/wp-timeline-relations.directive';
-import { WorkPackageTableTimelineStaticElements } from 'core-app/features/work-packages/components/wp-table/timeline/global-elements/wp-timeline-static-elements.directive';
-import { WorkPackageTableTimelineGrid } from 'core-app/features/work-packages/components/wp-table/timeline/grid/wp-timeline-grid.directive';
-import { WorkPackageTimelineButtonComponent } from 'core-app/features/work-packages/components/wp-buttons/wp-timeline-toggle-button/wp-timeline-toggle-button.component';
-import { WorkPackageOverviewTabComponent } from 'core-app/features/work-packages/components/wp-single-view-tabs/overview-tab/overview-tab.component';
-import { WorkPackageStatusButtonComponent } from 'core-app/features/work-packages/components/wp-buttons/wp-status-button/wp-status-button.component';
-import { WorkPackageReplacementLabelComponent } from 'core-app/features/work-packages/components/wp-edit/wp-edit-field/wp-replacement-label.component';
-import { NewestActivityOnOverviewComponent } from 'core-app/features/work-packages/components/wp-single-view-tabs/activity-panel/activity-on-overview.component';
-import { WorkPackageActivityTabComponent } from 'core-app/features/work-packages/components/wp-single-view-tabs/activity-panel/activity-tab.component';
+import {
+  WorkPackageEmbeddedTableComponent,
+} from 'core-app/features/work-packages/components/wp-table/embedded/wp-embedded-table.component';
+import {
+  WorkPackageEmbeddedTableEntryComponent,
+} from 'core-app/features/work-packages/components/wp-table/embedded/wp-embedded-table-entry.component';
+import {
+  WorkPackageTablePaginationComponent,
+} from 'core-app/features/work-packages/components/wp-table/table-pagination/wp-table-pagination.component';
+import {
+  WorkPackageTimelineTableController,
+} from 'core-app/features/work-packages/components/wp-table/timeline/container/wp-timeline-container.directive';
+import {
+  WorkPackageInlineCreateComponent,
+} from 'core-app/features/work-packages/components/wp-inline-create/wp-inline-create.component';
+import {
+  OpTypesContextMenuDirective,
+} from 'core-app/shared/components/op-context-menu/handlers/op-types-context-menu.directive';
+import {
+  OpColumnsContextMenu,
+} from 'core-app/shared/components/op-context-menu/handlers/op-columns-context-menu.directive';
+import {
+  OpSettingsMenuDirective,
+} from 'core-app/shared/components/op-context-menu/handlers/op-settings-dropdown-menu.directive';
+import {
+  WorkPackageStatusDropdownDirective,
+} from 'core-app/shared/components/op-context-menu/handlers/wp-status-dropdown-menu.directive';
+import {
+  WorkPackageCreateSettingsMenuDirective,
+} from 'core-app/shared/components/op-context-menu/handlers/wp-create-settings-menu.directive';
+import {
+  WorkPackageSingleContextMenuDirective,
+} from 'core-app/shared/components/op-context-menu/wp-context-menu/wp-single-context-menu';
+import {
+  WorkPackageTimelineHeaderController,
+} from 'core-app/features/work-packages/components/wp-table/timeline/header/wp-timeline-header.directive';
+import {
+  WorkPackageTableTimelineRelations,
+} from 'core-app/features/work-packages/components/wp-table/timeline/global-elements/wp-timeline-relations.directive';
+import {
+  WorkPackageTableTimelineStaticElements,
+} from 'core-app/features/work-packages/components/wp-table/timeline/global-elements/wp-timeline-static-elements.directive';
+import {
+  WorkPackageTableTimelineGrid,
+} from 'core-app/features/work-packages/components/wp-table/timeline/grid/wp-timeline-grid.directive';
+import {
+  WorkPackageTimelineButtonComponent,
+} from 'core-app/features/work-packages/components/wp-buttons/wp-timeline-toggle-button/wp-timeline-toggle-button.component';
+import {
+  WorkPackageOverviewTabComponent,
+} from 'core-app/features/work-packages/components/wp-single-view-tabs/overview-tab/overview-tab.component';
+import {
+  WorkPackageStatusButtonComponent,
+} from 'core-app/features/work-packages/components/wp-buttons/wp-status-button/wp-status-button.component';
+import {
+  WorkPackageReplacementLabelComponent,
+} from 'core-app/features/work-packages/components/wp-edit/wp-edit-field/wp-replacement-label.component';
+import {
+  NewestActivityOnOverviewComponent,
+} from 'core-app/features/work-packages/components/wp-single-view-tabs/activity-panel/activity-on-overview.component';
+import {
+  WorkPackageActivityTabComponent,
+} from 'core-app/features/work-packages/components/wp-single-view-tabs/activity-panel/activity-tab.component';
 import { OpenprojectAttachmentsModule } from 'core-app/shared/components/attachments/openproject-attachments.module';
-import { WpCustomActionComponent } from 'core-app/features/work-packages/components/wp-custom-actions/wp-custom-actions/wp-custom-action.component';
-import { WpCustomActionsComponent } from 'core-app/features/work-packages/components/wp-custom-actions/wp-custom-actions.component';
-import { WorkPackageRelationsTabComponent } from 'core-app/features/work-packages/components/wp-single-view-tabs/relations-tab/relations-tab.component';
-import { WorkPackageRelationsComponent } from 'core-app/features/work-packages/components/wp-relations/wp-relations.component';
-import { WorkPackageRelationsGroupComponent } from 'core-app/features/work-packages/components/wp-relations/wp-relations-group/wp-relations-group.component';
-import { WorkPackageRelationRowComponent } from 'core-app/features/work-packages/components/wp-relations/wp-relation-row/wp-relation-row.component';
-import { WorkPackageRelationsCreateComponent } from 'core-app/features/work-packages/components/wp-relations/wp-relations-create/wp-relations-create.component';
-import { WorkPackageRelationsHierarchyComponent } from 'core-app/features/work-packages/components/wp-relations/wp-relations-hierarchy/wp-relations-hierarchy.directive';
-import { WorkPackageCreateButtonComponent } from 'core-app/features/work-packages/components/wp-buttons/wp-create-button/wp-create-button.component';
-import { WorkPackageFilterButtonComponent } from 'core-app/features/work-packages/components/wp-buttons/wp-filter-button/wp-filter-button.component';
-import { WorkPackageDetailsViewButtonComponent } from 'core-app/features/work-packages/components/wp-buttons/wp-details-view-button/wp-details-view-button.component';
-import { WorkPackageFoldToggleButtonComponent } from 'core-app/features/work-packages/components/wp-buttons/wp-fold-toggle-button/wp-fold-toggle-button.component';
-import { WpTableConfigurationModalComponent } from 'core-app/features/work-packages/components/wp-table/configuration-modal/wp-table-configuration.modal';
-import { WpTableConfigurationColumnsTabComponent } from 'core-app/features/work-packages/components/wp-table/configuration-modal/tabs/columns-tab.component';
-import { WpTableConfigurationDisplaySettingsTabComponent } from 'core-app/features/work-packages/components/wp-table/configuration-modal/tabs/display-settings-tab.component';
-import { WpTableConfigurationFiltersTab } from 'core-app/features/work-packages/components/wp-table/configuration-modal/tabs/filters-tab.component';
-import { WpTableConfigurationSortByTabComponent } from 'core-app/features/work-packages/components/wp-table/configuration-modal/tabs/sort-by-tab.component';
-import { WpTableConfigurationTimelinesTabComponent } from 'core-app/features/work-packages/components/wp-table/configuration-modal/tabs/timelines-tab.component';
-import { WpTableConfigurationHighlightingTabComponent } from 'core-app/features/work-packages/components/wp-table/configuration-modal/tabs/highlighting-tab.component';
-import { WpTableConfigurationRelationSelectorComponent } from 'core-app/features/work-packages/components/wp-table/configuration-modal/wp-table-configuration-relation-selector';
-import { WorkPackageWatchersTabComponent } from 'core-app/features/work-packages/components/wp-single-view-tabs/watchers-tab/watchers-tab.component';
-import { WorkPackageWatcherEntryComponent } from 'core-app/features/work-packages/components/wp-single-view-tabs/watchers-tab/wp-watcher-entry.component';
-import { WorkPackageNewSplitViewComponent } from 'core-app/features/work-packages/components/wp-new/wp-new-split-view.component';
-import { WorkPackageNewFullViewComponent } from 'core-app/features/work-packages/components/wp-new/wp-new-full-view.component';
-import { EmbeddedTablesMacroComponent } from 'core-app/features/work-packages/components/wp-table/embedded/embedded-tables-macro.component';
+import {
+  WpCustomActionComponent,
+} from 'core-app/features/work-packages/components/wp-custom-actions/wp-custom-actions/wp-custom-action.component';
+import {
+  WpCustomActionsComponent,
+} from 'core-app/features/work-packages/components/wp-custom-actions/wp-custom-actions.component';
+import {
+  WorkPackageRelationsTabComponent,
+} from 'core-app/features/work-packages/components/wp-single-view-tabs/relations-tab/relations-tab.component';
+import {
+  WorkPackageRelationsComponent,
+} from 'core-app/features/work-packages/components/wp-relations/wp-relations.component';
+import {
+  WorkPackageRelationsGroupComponent,
+} from 'core-app/features/work-packages/components/wp-relations/wp-relations-group/wp-relations-group.component';
+import {
+  WorkPackageRelationRowComponent,
+} from 'core-app/features/work-packages/components/wp-relations/wp-relation-row/wp-relation-row.component';
+import {
+  WorkPackageRelationsCreateComponent,
+} from 'core-app/features/work-packages/components/wp-relations/wp-relations-create/wp-relations-create.component';
+import {
+  WorkPackageRelationsHierarchyComponent,
+} from 'core-app/features/work-packages/components/wp-relations/wp-relations-hierarchy/wp-relations-hierarchy.directive';
+import {
+  WorkPackageCreateButtonComponent,
+} from 'core-app/features/work-packages/components/wp-buttons/wp-create-button/wp-create-button.component';
+import {
+  WorkPackageFilterButtonComponent,
+} from 'core-app/features/work-packages/components/wp-buttons/wp-filter-button/wp-filter-button.component';
+import {
+  WorkPackageDetailsViewButtonComponent,
+} from 'core-app/features/work-packages/components/wp-buttons/wp-details-view-button/wp-details-view-button.component';
+import {
+  WorkPackageFoldToggleButtonComponent,
+} from 'core-app/features/work-packages/components/wp-buttons/wp-fold-toggle-button/wp-fold-toggle-button.component';
+import {
+  WpTableConfigurationModalComponent,
+} from 'core-app/features/work-packages/components/wp-table/configuration-modal/wp-table-configuration.modal';
+import {
+  WpTableConfigurationColumnsTabComponent,
+} from 'core-app/features/work-packages/components/wp-table/configuration-modal/tabs/columns-tab.component';
+import {
+  WpTableConfigurationDisplaySettingsTabComponent,
+} from 'core-app/features/work-packages/components/wp-table/configuration-modal/tabs/display-settings-tab.component';
+import {
+  WpTableConfigurationFiltersTab,
+} from 'core-app/features/work-packages/components/wp-table/configuration-modal/tabs/filters-tab.component';
+import {
+  WpTableConfigurationSortByTabComponent,
+} from 'core-app/features/work-packages/components/wp-table/configuration-modal/tabs/sort-by-tab.component';
+import {
+  WpTableConfigurationTimelinesTabComponent,
+} from 'core-app/features/work-packages/components/wp-table/configuration-modal/tabs/timelines-tab.component';
+import {
+  WpTableConfigurationHighlightingTabComponent,
+} from 'core-app/features/work-packages/components/wp-table/configuration-modal/tabs/highlighting-tab.component';
+import {
+  WpTableConfigurationRelationSelectorComponent,
+} from 'core-app/features/work-packages/components/wp-table/configuration-modal/wp-table-configuration-relation-selector';
+import {
+  WorkPackageWatchersTabComponent,
+} from 'core-app/features/work-packages/components/wp-single-view-tabs/watchers-tab/watchers-tab.component';
+import {
+  WorkPackageWatcherEntryComponent,
+} from 'core-app/features/work-packages/components/wp-single-view-tabs/watchers-tab/wp-watcher-entry.component';
+import {
+  WorkPackageNewSplitViewComponent,
+} from 'core-app/features/work-packages/components/wp-new/wp-new-split-view.component';
+import {
+  WorkPackageNewFullViewComponent,
+} from 'core-app/features/work-packages/components/wp-new/wp-new-full-view.component';
+import {
+  EmbeddedTablesMacroComponent,
+} from 'core-app/features/work-packages/components/wp-table/embedded/embedded-tables-macro.component';
 import { OpenprojectEditorModule } from 'core-app/shared/components/editor/openproject-editor.module';
-import { WorkPackageTableSumsRowController } from 'core-app/features/work-packages/components/wp-table/wp-table-sums-row/wp-table-sums-row.directive';
-import { ExternalQueryConfigurationComponent } from 'core-app/features/work-packages/components/wp-table/external-configuration/external-query-configuration.component';
-import { ExternalQueryConfigurationService } from 'core-app/features/work-packages/components/wp-table/external-configuration/external-query-configuration.service';
-import { ExternalRelationQueryConfigurationComponent } from 'core-app/features/work-packages/components/wp-table/external-configuration/external-relation-query-configuration.component';
-import { ExternalRelationQueryConfigurationService } from 'core-app/features/work-packages/components/wp-table/external-configuration/external-relation-query-configuration.service';
-import { WorkPackagesListInvalidQueryService } from 'core-app/features/work-packages/components/wp-list/wp-list-invalid-query.service';
+import {
+  WorkPackageTableSumsRowController,
+} from 'core-app/features/work-packages/components/wp-table/wp-table-sums-row/wp-table-sums-row.directive';
+import {
+  ExternalQueryConfigurationComponent,
+} from 'core-app/features/work-packages/components/wp-table/external-configuration/external-query-configuration.component';
+import {
+  ExternalQueryConfigurationService,
+} from 'core-app/features/work-packages/components/wp-table/external-configuration/external-query-configuration.service';
+import {
+  ExternalRelationQueryConfigurationComponent,
+} from 'core-app/features/work-packages/components/wp-table/external-configuration/external-relation-query-configuration.component';
+import {
+  ExternalRelationQueryConfigurationService,
+} from 'core-app/features/work-packages/components/wp-table/external-configuration/external-relation-query-configuration.service';
+import {
+  WorkPackagesListInvalidQueryService,
+} from 'core-app/features/work-packages/components/wp-list/wp-list-invalid-query.service';
 import { SchemaCacheService } from 'core-app/core/schemas/schema-cache.service';
-import { WorkPackageWatchersService } from 'core-app/features/work-packages/components/wp-single-view-tabs/watchers-tab/wp-watchers.service';
-import { WorkPackagesActivityService } from 'core-app/features/work-packages/components/wp-single-view-tabs/activity-panel/wp-activity.service';
+import {
+  WorkPackageWatchersService,
+} from 'core-app/features/work-packages/components/wp-single-view-tabs/watchers-tab/wp-watchers.service';
+import {
+  WorkPackagesActivityService,
+} from 'core-app/features/work-packages/components/wp-single-view-tabs/activity-panel/wp-activity.service';
 import { WorkPackageResource } from 'core-app/features/hal/resources/work-package-resource';
-import { WorkPackageChildrenQueryComponent } from 'core-app/features/work-packages/components/wp-relations/embedded/children/wp-children-query.component';
-import { WpRelationInlineAddExistingComponent } from 'core-app/features/work-packages/components/wp-relations/embedded/inline/add-existing/wp-relation-inline-add-existing.component';
-import { WorkPackageRelationQueryComponent } from 'core-app/features/work-packages/components/wp-relations/embedded/relations/wp-relation-query.component';
+import {
+  WorkPackageChildrenQueryComponent,
+} from 'core-app/features/work-packages/components/wp-relations/embedded/children/wp-children-query.component';
+import {
+  WpRelationInlineAddExistingComponent,
+} from 'core-app/features/work-packages/components/wp-relations/embedded/inline/add-existing/wp-relation-inline-add-existing.component';
+import {
+  WorkPackageRelationQueryComponent,
+} from 'core-app/features/work-packages/components/wp-relations/embedded/relations/wp-relation-query.component';
 import { WorkPackagesBaseComponent } from 'core-app/features/work-packages/routing/wp-base/wp--base.component';
-import { WorkPackageSplitViewComponent } from 'core-app/features/work-packages/routing/wp-split-view/wp-split-view.component';
-import { WorkPackagesFullViewComponent } from 'core-app/features/work-packages/routing/wp-full-view/wp-full-view.component';
+import {
+  WorkPackageSplitViewComponent,
+} from 'core-app/features/work-packages/routing/wp-split-view/wp-split-view.component';
+import {
+  WorkPackagesFullViewComponent,
+} from 'core-app/features/work-packages/routing/wp-full-view/wp-full-view.component';
 import { QueryFiltersService } from 'core-app/features/work-packages/components/wp-query/query-filters.service';
-import { WorkPackageCardViewComponent } from 'core-app/features/work-packages/components/wp-card-view/wp-card-view.component';
-import { WorkPackageRelationsService } from 'core-app/features/work-packages/components/wp-relations/wp-relations.service';
+import {
+  WorkPackageCardViewComponent,
+} from 'core-app/features/work-packages/components/wp-card-view/wp-card-view.component';
+import {
+  WorkPackageRelationsService,
+} from 'core-app/features/work-packages/components/wp-relations/wp-relations.service';
 import { OpenprojectBcfModule } from 'core-app/features/bim/bcf/openproject-bcf.module';
-import { WorkPackageRelationsAutocompleteComponent } from 'core-app/features/work-packages/components/wp-relations/wp-relations-create/wp-relations-autocomplete/wp-relations-autocomplete.component';
-import { CustomDateActionAdminComponent } from 'core-app/features/work-packages/components/wp-custom-actions/date-action/custom-date-action-admin.component';
-import { WorkPackagesTableConfigMenuComponent } from 'core-app/features/work-packages/components/wp-table/config-menu/config-menu.component';
-import { WorkPackageViewToggleButtonComponent } from 'core-app/features/work-packages/components/wp-buttons/wp-view-toggle-button/work-package-view-toggle-button.component';
-import { WorkPackageViewDropdownMenuDirective } from 'core-app/shared/components/op-context-menu/handlers/wp-view-dropdown-menu.directive';
+import {
+  WorkPackageRelationsAutocompleteComponent,
+} from 'core-app/features/work-packages/components/wp-relations/wp-relations-create/wp-relations-autocomplete/wp-relations-autocomplete.component';
+import {
+  CustomDateActionAdminComponent,
+} from 'core-app/features/work-packages/components/wp-custom-actions/date-action/custom-date-action-admin.component';
+import {
+  WorkPackagesTableConfigMenuComponent,
+} from 'core-app/features/work-packages/components/wp-table/config-menu/config-menu.component';
+import {
+  WorkPackageViewToggleButtonComponent,
+} from 'core-app/features/work-packages/components/wp-buttons/wp-view-toggle-button/work-package-view-toggle-button.component';
+import {
+  WorkPackageViewDropdownMenuDirective,
+} from 'core-app/shared/components/op-context-menu/handlers/wp-view-dropdown-menu.directive';
 import { HalEventsService } from 'core-app/features/hal/services/hal-events.service';
 import { OpenprojectProjectsModule } from 'core-app/features/projects/openproject-projects.module';
-import { WorkPackageNotificationService } from 'core-app/features/work-packages/services/notifications/work-package-notification.service';
-import { WorkPackageEditActionsBarComponent } from 'core-app/features/work-packages/components/edit-actions-bar/wp-edit-actions-bar.component';
+import {
+  WorkPackageNotificationService,
+} from 'core-app/features/work-packages/services/notifications/work-package-notification.service';
+import {
+  WorkPackageEditActionsBarComponent,
+} from 'core-app/features/work-packages/components/edit-actions-bar/wp-edit-actions-bar.component';
 import { HalResource } from 'core-app/features/hal/resources/hal-resource';
 import { WorkPackageChangeset } from 'core-app/features/work-packages/components/wp-edit/work-package-changeset';
-import { WorkPackageSingleCardComponent } from 'core-app/features/work-packages/components/wp-card-view/wp-single-card/wp-single-card.component';
-import { WorkPackageListViewComponent } from 'core-app/features/work-packages/routing/wp-list-view/wp-list-view.component';
-import { PartitionedQuerySpacePageComponent } from 'core-app/features/work-packages/routing/partitioned-query-space-page/partitioned-query-space-page.component';
-import { WorkPackageViewPageComponent } from 'core-app/features/work-packages/routing/wp-view-page/wp-view-page.component';
-import { WorkPackageSettingsButtonComponent } from 'core-app/features/work-packages/components/wp-buttons/wp-settings-button/wp-settings-button.component';
+import {
+  WorkPackageSingleCardComponent,
+} from 'core-app/features/work-packages/components/wp-card-view/wp-single-card/wp-single-card.component';
+import {
+  WorkPackageListViewComponent,
+} from 'core-app/features/work-packages/routing/wp-list-view/wp-list-view.component';
+import {
+  PartitionedQuerySpacePageComponent,
+} from 'core-app/features/work-packages/routing/partitioned-query-space-page/partitioned-query-space-page.component';
+import {
+  WorkPackageViewPageComponent,
+} from 'core-app/features/work-packages/routing/wp-view-page/wp-view-page.component';
+import {
+  WorkPackageSettingsButtonComponent,
+} from 'core-app/features/work-packages/components/wp-buttons/wp-settings-button/wp-settings-button.component';
 import { BackButtonComponent } from 'core-app/features/work-packages/components/back-routing/back-button.component';
 import { WorkPackagesTableComponent } from 'core-app/features/work-packages/components/wp-table/wp-table.component';
-import { WorkPackageGroupToggleDropdownMenuDirective } from 'core-app/shared/components/op-context-menu/handlers/wp-group-toggle-dropdown-menu.directive';
-import { OpenprojectAutocompleterModule } from 'core-app/shared/components/autocompleter/openproject-autocompleter.module';
+import {
+  WorkPackageGroupToggleDropdownMenuDirective,
+} from 'core-app/shared/components/op-context-menu/handlers/wp-group-toggle-dropdown-menu.directive';
+import {
+  OpenprojectAutocompleterModule,
+} from 'core-app/shared/components/autocompleter/openproject-autocompleter.module';
 import { OpWpTabsModule } from 'core-app/features/work-packages/components/wp-tabs/wp-tabs.module';
-import { EditFieldControlsModule } from 'core-app/shared/components/fields/edit/field-controls/edit-field-controls.module';
+import {
+  EditFieldControlsModule,
+} from 'core-app/shared/components/fields/edit/field-controls/edit-field-controls.module';
 import { WpTableExportModalComponent } from 'core-app/shared/components/modals/export-modal/wp-table-export.modal';
-import { WpButtonMacroModalComponent } from 'core-app/shared/components/modals/editor/macro-wp-button-modal/wp-button-macro.modal';
+import {
+  WpButtonMacroModalComponent,
+} from 'core-app/shared/components/modals/editor/macro-wp-button-modal/wp-button-macro.modal';
 import { QuerySharingModalComponent } from 'core-app/shared/components/modals/share-modal/query-sharing.modal';
 import { SaveQueryModalComponent } from 'core-app/shared/components/modals/save-modal/save-query.modal';
 import { QuerySharingFormComponent } from 'core-app/shared/components/modals/share-modal/query-sharing-form.component';
 import { WpDestroyModalComponent } from 'core-app/shared/components/modals/wp-destroy-modal/wp-destroy.modal';
-import { WorkPackageTypeStatusComponent } from 'core-app/features/work-packages/components/wp-type-status/wp-type-status.component';
-import { WorkPackageIsolatedQuerySpaceDirective } from 'core-app/features/work-packages/directives/query-space/wp-isolated-query-space.directive';
-import { WorkPackageBreadcrumbParentComponent } from 'core-app/features/work-packages/components/wp-breadcrumb/wp-breadcrumb-parent.component';
-import { WorkPackageSubjectComponent } from 'core-app/features/work-packages/components/wp-subject/wp-subject.component';
-import { WorkPackageBreadcrumbComponent } from 'core-app/features/work-packages/components/wp-breadcrumb/wp-breadcrumb.component';
+import {
+  WorkPackageTypeStatusComponent,
+} from 'core-app/features/work-packages/components/wp-type-status/wp-type-status.component';
+import {
+  WorkPackageIsolatedQuerySpaceDirective,
+} from 'core-app/features/work-packages/directives/query-space/wp-isolated-query-space.directive';
+import {
+  WorkPackageBreadcrumbParentComponent,
+} from 'core-app/features/work-packages/components/wp-breadcrumb/wp-breadcrumb-parent.component';
+import {
+  WorkPackageSubjectComponent,
+} from 'core-app/features/work-packages/components/wp-subject/wp-subject.component';
+import {
+  WorkPackageBreadcrumbComponent,
+} from 'core-app/features/work-packages/components/wp-breadcrumb/wp-breadcrumb.component';
 import { UserLinkComponent } from 'core-app/shared/components/user-link/user-link.component';
-import { WorkPackageCommentComponent } from 'core-app/features/work-packages/components/work-package-comment/work-package-comment.component';
-import { WorkPackageWatcherButtonComponent } from 'core-app/features/work-packages/components/wp-watcher-button/wp-watcher-button.component';
-import { WorkPackageCommentFieldComponent } from 'core-app/features/work-packages/components/work-package-comment/wp-comment-field.component';
+import {
+  WorkPackageCommentComponent,
+} from 'core-app/features/work-packages/components/work-package-comment/work-package-comment.component';
+import {
+  WorkPackageWatcherButtonComponent,
+} from 'core-app/features/work-packages/components/wp-watcher-button/wp-watcher-button.component';
+import {
+  WorkPackageCommentFieldComponent,
+} from 'core-app/features/work-packages/components/work-package-comment/wp-comment-field.component';
 import { WpResizerDirective } from 'core-app/shared/components/resizer/resizer/wp-resizer.component';
 import {
   GroupDescriptor,
   WorkPackageSingleViewComponent,
 } from 'core-app/features/work-packages/components/wp-single-view/wp-single-view.component';
-import { WorkPackageIsolatedGraphQuerySpaceDirective } from 'core-app/features/work-packages/directives/query-space/wp-isolated-graph-query-space.directive';
-import { RevisionActivityComponent } from 'core-app/features/work-packages/components/wp-activity/revision/revision-activity.component';
-import { WorkPackageCopySplitViewComponent } from 'core-app/features/work-packages/components/wp-copy/wp-copy-split-view.component';
-import { WorkPackageFormAttributeGroupComponent } from 'core-app/features/work-packages/components/wp-form-group/wp-attribute-group.component';
+import {
+  RevisionActivityComponent,
+} from 'core-app/features/work-packages/components/wp-activity/revision/revision-activity.component';
+import {
+  WorkPackageCopySplitViewComponent,
+} from 'core-app/features/work-packages/components/wp-copy/wp-copy-split-view.component';
+import {
+  WorkPackageFormAttributeGroupComponent,
+} from 'core-app/features/work-packages/components/wp-form-group/wp-attribute-group.component';
 import { WorkPackagesGridComponent } from 'core-app/features/work-packages/components/wp-grid/wp-grid.component';
-import { ActivityEntryComponent } from 'core-app/features/work-packages/components/wp-activity/activity-entry.component';
+import {
+  ActivityEntryComponent,
+} from 'core-app/features/work-packages/components/wp-activity/activity-entry.component';
 import { ActivityLinkComponent } from 'core-app/features/work-packages/components/wp-activity/activity-link.component';
-import { UserActivityComponent } from 'core-app/features/work-packages/components/wp-activity/user/user-activity.component';
-import { WorkPackageSplitViewToolbarComponent } from 'core-app/features/work-packages/components/wp-details/wp-details-toolbar.component';
-import { WorkPackageCopyFullViewComponent } from 'core-app/features/work-packages/components/wp-copy/wp-copy-full-view.component';
+import {
+  UserActivityComponent,
+} from 'core-app/features/work-packages/components/wp-activity/user/user-activity.component';
+import {
+  WorkPackageSplitViewToolbarComponent,
+} from 'core-app/features/work-packages/components/wp-details/wp-details-toolbar.component';
+import {
+  WorkPackageCopyFullViewComponent,
+} from 'core-app/features/work-packages/components/wp-copy/wp-copy-full-view.component';
 import { OpenprojectTabsModule } from 'core-app/shared/components/tabs/openproject-tabs.module';
 import { TimeEntryChangeset } from 'core-app/features/work-packages/helpers/time-entries/time-entry-changeset';
 
 import { OpAttachmentsComponent } from 'core-app/shared/components/attachments/attachments.component';
-import { QueryFiltersComponent } from 'core-app/features/work-packages/components/filters/query-filters/query-filters.component';
-import { FilterDateTimesValueComponent } from 'core-app/features/work-packages/components/filters/filter-date-times-value/filter-date-times-value.component';
-import { FilterSearchableMultiselectValueComponent } from 'core-app/features/work-packages/components/filters/filter-searchable-multiselect-value/filter-searchable-multiselect-value.component';
-import { QueryFilterComponent } from 'core-app/features/work-packages/components/filters/query-filter/query-filter.component';
-import { FilterDatesValueComponent } from 'core-app/features/work-packages/components/filters/filter-dates-value/filter-dates-value.component';
-import { FilterStringValueComponent } from 'core-app/features/work-packages/components/filters/filter-string-value/filter-string-value.component';
-import { FilterProjectComponent } from 'core-app/features/work-packages/components/filters/filter-project/filter-project.component';
-import { FilterDateValueComponent } from 'core-app/features/work-packages/components/filters/filter-date-value/filter-date-value.component';
-import { FilterDateTimeValueComponent } from 'core-app/features/work-packages/components/filters/filter-date-time-value/filter-date-time-value.component';
-import { FilterToggledMultiselectValueComponent } from 'core-app/features/work-packages/components/filters/filter-toggled-multiselect-value/filter-toggled-multiselect-value.component';
-import { WorkPackageFilterByTextInputComponent } from 'core-app/features/work-packages/components/filters/quick-filter-by-text-input/quick-filter-by-text-input.component';
-import { FilterIntegerValueComponent } from 'core-app/features/work-packages/components/filters/filter-integer-value/filter-integer-value.component';
-import { WorkPackageFilterContainerComponent } from 'core-app/features/work-packages/components/filters/filter-container/filter-container.directive';
-import { FilterBooleanValueComponent } from 'core-app/features/work-packages/components/filters/filter-boolean-value/filter-boolean-value.component';
-import { WorkPackageMarkNotificationButtonComponent } from 'core-app/features/work-packages/components/wp-buttons/wp-mark-notification-button/work-package-mark-notification-button.component';
-import { WorkPackageFilesTabComponent } from 'core-app/features/work-packages/components/wp-single-view-tabs/files-tab/op-files-tab.component';
+import {
+  QueryFiltersComponent,
+} from 'core-app/features/work-packages/components/filters/query-filters/query-filters.component';
+import {
+  FilterDateTimesValueComponent,
+} from 'core-app/features/work-packages/components/filters/filter-date-times-value/filter-date-times-value.component';
+import {
+  FilterSearchableMultiselectValueComponent,
+} from 'core-app/features/work-packages/components/filters/filter-searchable-multiselect-value/filter-searchable-multiselect-value.component';
+import {
+  QueryFilterComponent,
+} from 'core-app/features/work-packages/components/filters/query-filter/query-filter.component';
+import {
+  FilterDatesValueComponent,
+} from 'core-app/features/work-packages/components/filters/filter-dates-value/filter-dates-value.component';
+import {
+  FilterStringValueComponent,
+} from 'core-app/features/work-packages/components/filters/filter-string-value/filter-string-value.component';
+import {
+  FilterProjectComponent,
+} from 'core-app/features/work-packages/components/filters/filter-project/filter-project.component';
+import {
+  FilterDateValueComponent,
+} from 'core-app/features/work-packages/components/filters/filter-date-value/filter-date-value.component';
+import {
+  FilterDateTimeValueComponent,
+} from 'core-app/features/work-packages/components/filters/filter-date-time-value/filter-date-time-value.component';
+import {
+  FilterToggledMultiselectValueComponent,
+} from 'core-app/features/work-packages/components/filters/filter-toggled-multiselect-value/filter-toggled-multiselect-value.component';
+import {
+  WorkPackageFilterByTextInputComponent,
+} from 'core-app/features/work-packages/components/filters/quick-filter-by-text-input/quick-filter-by-text-input.component';
+import {
+  FilterIntegerValueComponent,
+} from 'core-app/features/work-packages/components/filters/filter-integer-value/filter-integer-value.component';
+import {
+  WorkPackageFilterContainerComponent,
+} from 'core-app/features/work-packages/components/filters/filter-container/filter-container.directive';
+import {
+  FilterBooleanValueComponent,
+} from 'core-app/features/work-packages/components/filters/filter-boolean-value/filter-boolean-value.component';
+import {
+  WorkPackageMarkNotificationButtonComponent,
+} from 'core-app/features/work-packages/components/wp-buttons/wp-mark-notification-button/work-package-mark-notification-button.component';
+import {
+  WorkPackageFilesTabComponent,
+} from 'core-app/features/work-packages/components/wp-single-view-tabs/files-tab/op-files-tab.component';
 import { WorkPackagesQueryViewService } from 'core-app/features/work-packages/components/wp-list/wp-query-view.service';
 import isNewResource from 'core-app/features/hal/helpers/is-new-resource';
 import { OpenprojectStoragesModule } from 'core-app/shared/components/storages/openproject-storages.module';
@@ -182,16 +393,31 @@ import { FileLinksResourceService } from 'core-app/core/state/file-links/file-li
 import { StoragesResourceService } from 'core-app/core/state/storages/storages.service';
 import { StorageFilesResourceService } from 'core-app/core/state/storage-files/storage-files.service';
 import { ProjectStoragesResourceService } from 'core-app/core/state/project-storages/project-storages.service';
-import { OpBaselineModalComponent } from 'core-app/features/work-packages/components/wp-baseline/baseline-modal/baseline-modal.component';
-import { OpBaselineComponent } from 'core-app/features/work-packages/components/wp-baseline/baseline/baseline.component';
-import { OpBaselineLoadingComponent } from 'core-app/features/work-packages/components/wp-baseline/baseline-loading/baseline-loading.component';
-import { OpBaselineLegendsComponent } from 'core-app/features/work-packages/components/wp-baseline/baseline-legends/baseline-legends.component';
+import {
+  OpBaselineModalComponent,
+} from 'core-app/features/work-packages/components/wp-baseline/baseline-modal/baseline-modal.component';
+import {
+  OpBaselineComponent,
+} from 'core-app/features/work-packages/components/wp-baseline/baseline/baseline.component';
+import {
+  OpBaselineLoadingComponent,
+} from 'core-app/features/work-packages/components/wp-baseline/baseline-loading/baseline-loading.component';
+import {
+  OpBaselineLegendsComponent,
+} from 'core-app/features/work-packages/components/wp-baseline/baseline-legends/baseline-legends.component';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { WorkPackageTimerButtonComponent } from 'core-app/features/work-packages/components/wp-timer-button/wp-timer-button.component';
+import {
+  WorkPackageTimerButtonComponent,
+} from 'core-app/features/work-packages/components/wp-timer-button/wp-timer-button.component';
 import { OpenprojectTimeEntriesModule } from 'core-app/shared/components/time_entries/openproject-time-entries.module';
 import { RecentItemsService } from 'core-app/core/recent-items.service';
-import { WorkPackageShareButtonComponent } from 'core-app/features/work-packages/components/wp-buttons/wp-share-button/wp-share-button.component';
-import { WorkPackageShareModalComponent } from 'core-app/features/work-packages/components/wp-share-modal/wp-share.modal';
+import {
+  WorkPackageShareButtonComponent,
+} from 'core-app/features/work-packages/components/wp-buttons/wp-share-button/wp-share-button.component';
+import {
+  WorkPackageShareModalComponent,
+} from 'core-app/features/work-packages/components/wp-share-modal/wp-share.modal';
+import { registerCustomElement } from 'core-app/shared/helpers/angular/custom-elements.helper';
 
 @NgModule({
   imports: [
@@ -471,6 +697,8 @@ export class OpenprojectWorkPackagesModule {
 
   constructor(injector:Injector) {
     OpenprojectWorkPackagesModule.bootstrapAttributeGroups(injector);
+
+    registerCustomElement('opce-macro-embedded-table', EmbeddedTablesMacroComponent, { injector });
   }
 
   // The static property prevents running the function
diff --git a/frontend/src/app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.component.ts b/frontend/src/app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.component.ts
index 9edd40b4135a..a8c1a3d12f97 100644
--- a/frontend/src/app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.component.ts
+++ b/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();
diff --git a/frontend/src/app/shared/components/fields/macros/attribute-label-macro.component.ts b/frontend/src/app/shared/components/fields/macros/attribute-label-macro.component.ts
index 6a085fb5644a..ce6df3f5a31b 100644
--- a/frontend/src/app/shared/components/fields/macros/attribute-label-macro.component.ts
+++ b/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,
diff --git a/frontend/src/app/shared/components/fields/macros/attribute-value-macro.component.ts b/frontend/src/app/shared/components/fields/macros/attribute-value-macro.component.ts
index ee20119a94eb..ffd771cc2e5c 100644
--- a/frontend/src/app/shared/components/fields/macros/attribute-value-macro.component.ts
+++ b/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,
diff --git a/frontend/src/app/shared/components/fields/macros/work-package-quickinfo-macro.component.ts b/frontend/src/app/shared/components/fields/macros/work-package-quickinfo-macro.component.ts
index 3d3367dd4889..c222bffb81a9 100644
--- a/frontend/src/app/shared/components/fields/macros/work-package-quickinfo-macro.component.ts
+++ b/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() {
diff --git a/frontend/src/app/shared/components/fields/openproject-fields.module.ts b/frontend/src/app/shared/components/fields/openproject-fields.module.ts
index 6f7927ffddd6..39af27a23b1d 100644
--- a/frontend/src/app/shared/components/fields/openproject-fields.module.ts
+++ b/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 });
+  }
 }
diff --git a/lib/open_project/text_formatting/filters/macros/embedded_table.rb b/lib/open_project/text_formatting/filters/macros/embedded_table.rb
index 6e5eb98021f7..8096ff63d25a 100644
--- a/lib/open_project/text_formatting/filters/macros/embedded_table.rb
+++ b/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
 
diff --git a/lib/open_project/text_formatting/matchers/attribute_macros.rb b/lib/open_project/text_formatting/matchers/attribute_macros.rb
index 5b2b8dc8218a..6481f46f50f1 100644
--- a/lib/open_project/text_formatting/matchers/attribute_macros.rb
+++ b/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
diff --git a/lib/open_project/text_formatting/matchers/link_handlers/work_packages.rb b/lib/open_project/text_formatting/matchers/link_handlers/work_packages.rb
index e1ce8a3544f0..298df6a8817f 100644
--- a/lib/open_project/text_formatting/matchers/link_handlers/work_packages.rb
+++ b/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
 
diff --git a/lib/primer/open_project/forms/rich_text_area.html.erb b/lib/primer/open_project/forms/rich_text_area.html.erb
index 59de2c09804a..3b4747379769 100644
--- a/lib/primer/open_project/forms/rich_text_area.html.erb
+++ b/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
                             }
   %>
diff --git a/modules/meeting/app/components/meeting_agenda_items/item_component/show_component.html.erb b/modules/meeting/app/components/meeting_agenda_items/item_component/show_component.html.erb
index fadd8b5277ec..7fd101a92740 100644
--- a/modules/meeting/app/components/meeting_agenda_items/item_component/show_component.html.erb
+++ b/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
diff --git a/spec/features/work_packages/details/markdown/activity_comments_spec.rb b/spec/features/work_packages/details/markdown/activity_comments_spec.rb
index 05e015a29614..d87fc7ea6a5f 100644
--- a/spec/features/work_packages/details/markdown/activity_comments_spec.rb
+++ b/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
diff --git a/spec/features/wysiwyg/macros/quicklink_macros_spec.rb b/spec/features/wysiwyg/macros/quicklink_macros_spec.rb
index 2228ee625e28..3187382b0bd1 100644
--- a/spec/features/wysiwyg/macros/quicklink_macros_spec.rb
+++ b/spec/features/wysiwyg/macros/quicklink_macros_spec.rb
@@ -71,7 +71,7 @@
     # Expect output widget
     within('#content') do
       expected_macro_text = "#{work_package.type.name.upcase} ##{work_package.id}: My subject"
-      expect(page).to have_selector('macro', text: expected_macro_text)
+      expect(page).to have_selector('opce-macro-wp-quickinfo', text: expected_macro_text)
       expect(page).to have_selector('span', text: work_package.type.name.upcase)
       expect(page).to have_selector('.work-package--quickinfo.preview-trigger', text: "##{work_package.id}")
       expect(page).to have_selector('span', text: 'My subject')
@@ -93,7 +93,7 @@
     within('#content') do
       expected_macro_text = "#{work_package.status.name}#{work_package.type.name.upcase} " \
                             "##{work_package.id}: My subject (01/01/2020 - 02/01/2020)"
-      expect(page).to have_selector('macro', text: expected_macro_text)
+      expect(page).to have_selector('opce-macro-wp-quickinfo', text: expected_macro_text)
       expect(page).to have_selector('span', text: work_package.status.name)
       expect(page).to have_selector('span', text: work_package.type.name.upcase)
       expect(page).to have_selector('.work-package--quickinfo.preview-trigger', text: "##{work_package.id}")
@@ -162,12 +162,12 @@
     click_on 'Save'
 
     within('#content') do
-      expect(page).to have_selector('macro', text: /No dates$/)
-      expect(page).to have_selector('macro', text: 'Start date only (01/01/2020 - no finish date)')
-      expect(page).to have_selector('macro', text: 'End date only (no start date - 12/31/2020)')
-      expect(page).to have_selector('macro', text: 'Both dates (01/01/2020 - 12/31/2020)')
-      expect(page).to have_selector('macro', text: 'Milestone with date (01/01/2020)')
-      expect(page).to have_selector('macro', text: /Milestone without date$/)
+      expect(page).to have_selector('opce-macro-wp-quickinfo', text: /No dates$/)
+      expect(page).to have_selector('opce-macro-wp-quickinfo', text: 'Start date only (01/01/2020 - no finish date)')
+      expect(page).to have_selector('opce-macro-wp-quickinfo', text: 'End date only (no start date - 12/31/2020)')
+      expect(page).to have_selector('opce-macro-wp-quickinfo', text: 'Both dates (01/01/2020 - 12/31/2020)')
+      expect(page).to have_selector('opce-macro-wp-quickinfo', text: 'Milestone with date (01/01/2020)')
+      expect(page).to have_selector('opce-macro-wp-quickinfo', text: /Milestone without date$/)
     end
   end
 end
diff --git a/spec/lib/open_project/text_formatting/markdown/attribute_macros_spec.rb b/spec/lib/open_project/text_formatting/markdown/attribute_macros_spec.rb
index 143ba65dd9d5..4ad7efdcdc31 100644
--- a/spec/lib/open_project/text_formatting/markdown/attribute_macros_spec.rb
+++ b/spec/lib/open_project/text_formatting/markdown/attribute_macros_spec.rb
@@ -56,16 +56,16 @@
             <a class="op-uc-link_permalink icon-link op-uc-link" aria-hidden="true" href="#my-headline"></a>
           </h1>
           <p class="op-uc-p">
-            Inline reference to WP by ID: <macro class="macro--attribute-label" data-model="workPackage" data-id="1234" data-attribute="subject"></macro>
+            Inline reference to WP by ID: <opce-macro-attribute-label data-model="workPackage" data-id="1234" data-attribute="subject"></opce-macro-attribute-label>
           </p>
           <p class="op-uc-p">
-            Inline reference to WP by subject: <macro class="macro--attribute-label" data-model="workPackage" data-id="Some subject" data-attribute="Some custom field with spaces"></macro>
+            Inline reference to WP by subject: <opce-macro-attribute-label data-model="workPackage" data-id="Some subject" data-attribute="Some custom field with spaces"></opce-macro-attribute-label>
           </p>
           <p class="op-uc-p">
-            Inline reference to project: <macro class="macro--attribute-label" data-model="project" data-attribute="status"></macro>
+            Inline reference to project: <opce-macro-attribute-label data-model="project" data-attribute="status"></opce-macro-attribute-label>
           </p>
           <p class="op-uc-p">
-            Inline reference to project with id: <macro class="macro--attribute-label" data-model="project" data-id="some id" data-attribute="status"></macro>
+            Inline reference to project with id: <opce-macro-attribute-label data-model="project" data-id="some id" data-attribute="status"></opce-macro-attribute-label>
           </p>
         EXPECTED
       end
@@ -95,16 +95,16 @@
             <a class="op-uc-link_permalink icon-link op-uc-link" aria-hidden="true" href="#my-headline"></a>
           </h1>
           <p class="op-uc-p">
-            Inline reference to WP by ID: <macro class="macro--attribute-value" data-model="workPackage" data-id="1234" data-attribute="subject"></macro>
+            Inline reference to WP by ID: <opce-macro-attribute-value data-model="workPackage" data-id="1234" data-attribute="subject"></opce-macro-attribute-value>
           </p>
           <p class="op-uc-p">
-            Inline reference to WP by subject: <macro class="macro--attribute-value" data-model="workPackage" data-id="Some subject" data-attribute="Some custom field with spaces"></macro>
+            Inline reference to WP by subject: <opce-macro-attribute-value data-model="workPackage" data-id="Some subject" data-attribute="Some custom field with spaces"></opce-macro-attribute-value>
           </p>
           <p class="op-uc-p">
-            Inline reference to project: <macro class="macro--attribute-value" data-model="project" data-attribute="status"></macro>
+            Inline reference to project: <opce-macro-attribute-value data-model="project" data-attribute="status"></opce-macro-attribute-value>
           </p>
           <p class="op-uc-p">
-            Inline reference to project with id: <macro class="macro--attribute-value" data-model="project" data-id="some id" data-attribute="status"></macro>
+            Inline reference to project with id: <opce-macro-attribute-value data-model="project" data-id="some id" data-attribute="status"></opce-macro-attribute-value>
           </p>
         EXPECTED
       end
diff --git a/spec/lib/open_project/text_formatting/markdown/embedded_table_macro_spec.rb b/spec/lib/open_project/text_formatting/markdown/embedded_table_macro_spec.rb
index 9fa9dd255949..231266c2f274 100644
--- a/spec/lib/open_project/text_formatting/markdown/embedded_table_macro_spec.rb
+++ b/spec/lib/open_project/text_formatting/markdown/embedded_table_macro_spec.rb
@@ -37,16 +37,14 @@
     let(:raw) do
       <<~RAW
         <macro class="embedded-table op-uc-placeholder"
-               data-query-props="{&quot;columns[]&quot;:[&quot;id&quot;,&quot;subject&quot;,&quot;type&quot;,&quot;status&quot;,&quot;assignee&quot;,&quot;updatedAt&quot;],&quot;showSums&quot;:false,&quot;timelineVisible&quot;:false,&quot;highlightingMode&quot;:&quot;inline&quot;,&quot;highlightedAttributes[]&quot;:[&quot;/api/v3/queries/columns/status&quot;,&quot;/api/v3/queries/columns/priority&quot;,&quot;/api/v3/queries/columns/dueDate&quot;],&quot;showHierarchies&quot;:true,&quot;groupBy&quot;:&quot;&quot;,&quot;filters&quot;:&quot;[{&quot;status&quot;:{&quot;operator&quot;:&quot;o&quot;,&quot;values&quot;:[]}}]&quot;,&quot;sortBy&quot;:&quot;[[&quot;id&quot;,&quot;asc&quot;]]&quot;}">
-        </macro>
+               data-query-props="{&quot;columns[]&quot;:[&quot;id&quot;,&quot;subject&quot;,&quot;type&quot;,&quot;status&quot;,&quot;assignee&quot;,&quot;updatedAt&quot;],&quot;showSums&quot;:false,&quot;timelineVisible&quot;:false,&quot;highlightingMode&quot;:&quot;inline&quot;,&quot;highlightedAttributes[]&quot;:[&quot;/api/v3/queries/columns/status&quot;,&quot;/api/v3/queries/columns/priority&quot;,&quot;/api/v3/queries/columns/dueDate&quot;],&quot;showHierarchies&quot;:true,&quot;groupBy&quot;:&quot;&quot;,&quot;filters&quot;:&quot;[{&quot;status&quot;:{&quot;operator&quot;:&quot;o&quot;,&quot;values&quot;:[]}}]&quot;,&quot;sortBy&quot;:&quot;[[&quot;id&quot;,&quot;asc&quot;]]&quot;}"></macro>
       RAW
     end
 
     let(:expected) do
       <<~EXPECTED
         <p class="op-uc-p">
-          <macro class="embedded-table"
-                 data-query-props='{"columns[]":["id","subject","type","status","assignee","updatedAt"],"showSums":false,"timelineVisible":false,"highlightingMode":"inline","highlightedAttributes[]":["/api/v3/queries/columns/status","/api/v3/queries/columns/priority","/api/v3/queries/columns/dueDate"],"showHierarchies":true,"groupBy":"","filters":"[{"status":{"operator":"o","values":[]}}]","sortBy":"[["id","asc"]]"}'><br>
+          <opce-macro-embedded-table class="embedded-table" data-query-props='{"columns[]":["id","subject","type","status","assignee","updatedAt"],"showSums":false,"timelineVisible":false,"highlightingMode":"inline","highlightedAttributes[]":["/api/v3/queries/columns/status","/api/v3/queries/columns/priority","/api/v3/queries/columns/dueDate"],"showHierarchies":true,"groupBy":"","filters":"[{"status":{"operator":"o","values":[]}}]","sortBy":"[["id","asc"]]"}'></opce-macro-embedded-table>
         </p>
       EXPECTED
     end
diff --git a/spec/lib/open_project/text_formatting/markdown/in_tool_links_spec.rb b/spec/lib/open_project/text_formatting/markdown/in_tool_links_spec.rb
index f78665fe342a..97dafaa8d625 100644
--- a/spec/lib/open_project/text_formatting/markdown/in_tool_links_spec.rb
+++ b/spec/lib/open_project/text_formatting/markdown/in_tool_links_spec.rb
@@ -295,9 +295,8 @@
 
       describe 'double hash work_package link' do
         let(:work_package_link) do
-          content_tag :macro,
+          content_tag 'opce-macro-wp-quickinfo',
                       '',
-                      class: "macro--wp-quickinfo",
                       data: { id: '1234', detailed: 'false' }
         end
 
@@ -308,9 +307,8 @@
 
       describe 'triple hash work_package link' do
         let(:work_package_link) do
-          content_tag :macro,
+          content_tag 'opce-macro-wp-quickinfo',
                       '',
-                      class: "macro--wp-quickinfo",
                       data: { id: '1234', detailed: 'true' }
         end
 
diff --git a/spec/requests/api/v3/work_packages/show_resource_spec.rb b/spec/requests/api/v3/work_packages/show_resource_spec.rb
index 7b34239060f3..ec8c0d2a2a32 100644
--- a/spec/requests/api/v3/work_packages/show_resource_spec.rb
+++ b/spec/requests/api/v3/work_packages/show_resource_spec.rb
@@ -123,7 +123,7 @@
 
             # resolves links
             expect(subject['html'])
-              .to have_selector("macro.macro--wp-quickinfo[data-id='#{other_wp.id}']")
+              .to have_selector("opce-macro-wp-quickinfo[data-id='#{other_wp.id}']")
             # resolves macros, e.g. toc
             expect(subject['html'])
               .to have_selector('.op-uc-toc--list-item', text: "OpenProject Masterplan for 2015")