refactor(style-editor): restructure style editor schema handling and …

core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/style-editor/dot-style-editor-builder.component.ts

@@ -26,14 +26,9 @@ import {
     DotMessageService
 } from '@dotcms/data-access';
 import { DotCMSContentType, DotMessageSeverity, DotMessageType } from '@dotcms/dotcms-models';
+import { StyleEditorFieldSchema, StyleEditorFormSchema } from '@dotcms/types/internal';
 import { DotMessagePipe } from '@dotcms/ui';
-import {
-    StyleEditorField,
-    StyleEditorFieldSchema,
-    StyleEditorFormSchema,
-    defineStyleEditorSchema,
-    styleEditorField
-} from '@dotcms/uve';
+import { StyleEditorField, defineStyleEditorSchema, styleEditorField } from '@dotcms/uve/internal';
 
 import { DotStyleEditorSectionComponent } from './dot-style-editor-section.component';
 import {

core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/style-editor/dot-style-editor-field-form.component.ts

@@ -20,8 +20,8 @@ import { SelectModule } from 'primeng/select';
 import { SelectButtonModule } from 'primeng/selectbutton';
 
 import { DotMessageService } from '@dotcms/data-access';
+import { StyleEditorFieldType } from '@dotcms/types/internal';
 import { DotMessagePipe } from '@dotcms/ui';
-import { StyleEditorFieldType } from '@dotcms/uve';
 
 import { BuilderField, BuilderOption, FIELD_TYPE_OPTIONS, toLabelIdentifier } from './models';
 

core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/style-editor/models.ts

@@ -1,4 +1,4 @@
-import { StyleEditorFieldType } from '@dotcms/uve';
+import { StyleEditorFieldType } from '@dotcms/types/internal';
 
 export interface BuilderOption {
     label: string;

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-palette/components/dot-uve-style-editor-form/components/uve-style-editor-field-checkbox-group/uve-style-editor-field-checkbox-group.component.ts

@@ -3,7 +3,7 @@ import { ControlContainer, ReactiveFormsModule } from '@angular/forms';
 
 import { Checkbox } from 'primeng/checkbox';
 
-import { StyleEditorFieldSchema, StyleEditorRadioOptionObject } from '@dotcms/uve';
+import { StyleEditorFieldSchema, StyleEditorRadioOptionObject } from '@dotcms/types/internal';
 
 @Component({
     selector: 'dot-uve-style-editor-field-checkbox-group',

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-palette/components/dot-uve-style-editor-form/components/uve-style-editor-field-dropdown/uve-style-editor-field-dropdown.component.ts

@@ -1,9 +1,9 @@
-import { Component, input, inject, computed } from '@angular/core';
+import { Component, computed, inject, input } from '@angular/core';
 import { ControlContainer, ReactiveFormsModule } from '@angular/forms';
 
 import { Select } from 'primeng/select';
 
-import { StyleEditorFieldSchema, StyleEditorRadioOptionObject } from '@dotcms/uve';
+import { StyleEditorFieldSchema, StyleEditorRadioOptionObject } from '@dotcms/types/internal';
 
 @Component({
     selector: 'dot-uve-style-editor-field-dropdown',

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-palette/components/dot-uve-style-editor-form/components/uve-style-editor-field-input/uve-style-editor-field-input.component.ts

@@ -1,10 +1,10 @@
-import { Component, input, inject } from '@angular/core';
+import { Component, inject, input } from '@angular/core';
 import { ControlContainer, ReactiveFormsModule } from '@angular/forms';
 
 import { InputTextModule } from 'primeng/inputtext';
 
+import { StyleEditorFieldSchema } from '@dotcms/types/internal';
 import { DotMessagePipe } from '@dotcms/ui';
-import { StyleEditorFieldSchema } from '@dotcms/uve';
 
 @Component({
     selector: 'dot-uve-style-editor-field-input',

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-palette/components/dot-uve-style-editor-form/components/uve-style-editor-field-radio/uve-style-editor-field-radio.component.ts

@@ -1,9 +1,9 @@
-import { Component, input, inject, computed } from '@angular/core';
+import { Component, computed, inject, input } from '@angular/core';
 import { ControlContainer, ReactiveFormsModule } from '@angular/forms';
 
 import { RadioButtonModule } from 'primeng/radiobutton';
 
-import { StyleEditorFieldSchema, StyleEditorRadioOptionObject } from '@dotcms/uve';
+import { StyleEditorFieldSchema, StyleEditorRadioOptionObject } from '@dotcms/types/internal';
 
 @Component({
     selector: 'dot-uve-style-editor-field-radio',

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-palette/components/dot-uve-style-editor-form/dot-uve-style-editor-form.component.ts

@@ -23,7 +23,7 @@ import { debounce, distinctUntilChanged, filter, map, mergeMap, tap } from 'rxjs
 
 import { DotMessageService } from '@dotcms/data-access';
 import { StyleEditorProperties } from '@dotcms/types';
-import { StyleEditorFormSchema } from '@dotcms/uve';
+import { StyleEditorFormSchema } from '@dotcms/types/internal';
 
 import { UveStyleEditorFieldCheckboxGroupComponent } from './components/uve-style-editor-field-checkbox-group/uve-style-editor-field-checkbox-group.component';
 import { UveStyleEditorFieldDropdownComponent } from './components/uve-style-editor-field-dropdown/uve-style-editor-field-dropdown.component';

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-palette/components/dot-uve-style-editor-form/services/style-editor-form-builder.service.ts

@@ -3,11 +3,11 @@ import { AbstractControl, FormBuilder, FormControl, FormGroup } from '@angular/f
 
 import { StyleEditorProperties } from '@dotcms/types';
 import {
-    StyleEditorCheckboxDefaultValue,
     StyleEditorFieldSchema,
     StyleEditorFormSchema,
     StyleEditorSectionSchema
-} from '@dotcms/uve';
+} from '@dotcms/types/internal';
+import { StyleEditorCheckboxDefaultValue } from '@dotcms/uve/internal';
 
 import { STYLE_EDITOR_FIELD_TYPES } from '../../../../../../shared/consts';
 

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.ts

@@ -56,10 +56,9 @@ import {
 } from '@dotcms/dotcms-models';
 import { DotResultsSeoToolComponent } from '@dotcms/portlets/dot-ema/ui';
 import { DotCMSPage, DotCMSURLContentMap, DotCMSUVEAction, UVE_MODE } from '@dotcms/types';
-import { __DOTCMS_UVE_EVENT__ } from '@dotcms/types/internal';
+import { StyleEditorFormSchema, __DOTCMS_UVE_EVENT__ } from '@dotcms/types/internal';
 import { DotCopyContentModalService, DotMessagePipe } from '@dotcms/ui';
 import { WINDOW, isEqual } from '@dotcms/utils';
-import { StyleEditorFormSchema } from '@dotcms/uve';
 import { getContentletsInContainer } from '@dotcms/uve/internal';
 
 import { DotUveContentletQuickEditComponent } from './components/dot-uve-contentlet-quick-edit/dot-uve-contentlet-quick-edit.component';

core-web/libs/portlets/edit-ema/portlet/src/lib/services/dot-uve-actions-handler/dot-uve-actions-handler.service.ts

@@ -1,7 +1,7 @@
 import { tapResponse } from '@ngrx/operators';
 import { Observable, of } from 'rxjs';
 
-import { Injectable, inject } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 
 import { MessageService } from 'primeng/api';
 
@@ -14,9 +14,8 @@ import {
     DotCMSInlineEditingType,
     DotCMSUVEAction
 } from '@dotcms/types';
-import { __DOTCMS_UVE_EVENT__ } from '@dotcms/types/internal';
+import { __DOTCMS_UVE_EVENT__, StyleEditorFormSchema } from '@dotcms/types/internal';
 import { DotCopyContentModalService } from '@dotcms/ui';
-import { StyleEditorFormSchema } from '@dotcms/uve';
 
 import { DotBlockEditorSidebarComponent } from '../../components/dot-block-editor-sidebar/dot-block-editor-sidebar.component';
 import { DotEmaDialogComponent } from '../../components/dot-ema-dialog/dot-ema-dialog.component';

core-web/libs/portlets/edit-ema/portlet/src/lib/shared/consts.ts

@@ -1,6 +1,6 @@
 import { DotDeviceListItem, FeaturedFlags } from '@dotcms/dotcms-models';
 import { DotCMSViewAsPersona } from '@dotcms/types';
-import { StyleEditorFieldType } from '@dotcms/uve';
+import { StyleEditorFieldType } from '@dotcms/types/internal';
 
 import { CommonErrors } from './enums';
 import { CommonErrorsInfo } from './models';

core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/models.ts

@@ -1,6 +1,6 @@
 import { DotDeviceListItem, SeoMetaTags, SeoMetaTagsResult } from '@dotcms/dotcms-models';
 import { DotCMSViewAsPersona } from '@dotcms/types';
-import { StyleEditorFormSchema } from '@dotcms/uve';
+import { StyleEditorFormSchema } from '@dotcms/types/internal';
 
 import {
     Container,

core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/withEditor.ts

@@ -9,8 +9,8 @@ import {
     SeoMetaTagsResult
 } from '@dotcms/dotcms-models';
 import { UVE_MODE } from '@dotcms/types';
+import { StyleEditorFormSchema } from '@dotcms/types/internal';
 import { WINDOW } from '@dotcms/utils';
-import { StyleEditorFormSchema } from '@dotcms/uve';
 
 import { PageData, PageDataContainer, ReloadEditorContent } from './models';
 

core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.ts

@@ -7,27 +7,33 @@ import { take } from 'rxjs/operators';
 import { DotPropertiesService } from '@dotcms/data-access';
 import { FeaturedFlags } from '@dotcms/dotcms-models';
 
-import { WithFlagsState } from './models';
+import { UVEFlags, WithFlagsState } from './models';
 
 import { UVEState } from '../../models';
 
 /**
  *
- * @description This feature is used to handle the fetch of flags
+ * @description Loads feature flags from configuration, then forces `FEATURE_FLAG_UVE_STYLE_EDITOR` to `true`.
  * @export
  * @return {*}
  */
-export function withFlags(flags: FeaturedFlags[]) {
+export function withFlags(featureFlagKeys: FeaturedFlags[]) {
     return signalStoreFeature(
         { state: type<UVEState>() },
         withState<WithFlagsState>({ flags: {} }),
         withHooks({
             onInit: (store) => {
                 const propertiesService = inject(DotPropertiesService);
+
                 propertiesService
-                    .getFeatureFlags(flags)
+                    .getFeatureFlags(featureFlagKeys)
                     .pipe(take(1))
-                    .subscribe((flags) => {
+                    .subscribe((fetchedFlags) => {
+                        // TODO: Remove this, only harcoded until the PR that fix is merged
+                        const flags: UVEFlags = { ...(fetchedFlags as unknown as UVEFlags) };
+
+                        flags[FeaturedFlags.FEATURE_FLAG_UVE_STYLE_EDITOR] = true;
+
                         patchState(store, { flags });
                     });
             }

core-web/libs/portlets/edit-ema/portlet/src/lib/store/models.ts

@@ -8,7 +8,7 @@ import {
     SeoMetaTagsResult
 } from '@dotcms/dotcms-models';
 import { DotCMSPage } from '@dotcms/types';
-import { StyleEditorFormSchema } from '@dotcms/uve';
+import { StyleEditorFormSchema } from '@dotcms/types/internal';
 
 import { UVEFlags } from './features/flags/models';
 

core-web/libs/sdk/angular/src/lib/services/dotcms-editable-page.service.ts

@@ -11,6 +11,7 @@ import {
     DotCMSExtendedPageResponse
 } from '@dotcms/types';
 import { createUVESubscription, getUVEState, initUVE, updateNavigation } from '@dotcms/uve';
+import { registerStyleEditorSchemas } from '@dotcms/uve/internal';
 
 @Injectable({
     providedIn: 'root'
@@ -82,6 +83,10 @@ export class DotCMSEditablePageService {
             updateNavigation(pageURI);
         }
 
+        if (response?.styleEditorSchemas?.length) {
+            registerStyleEditorSchemas(response.styleEditorSchemas);
+        }
+
         const unsubscribeUVEChanges = this.#listenUVEChanges();
 
         return this.#response$.pipe(