Refactor: Block Editor

core-web/.claude/settings.json

@@ -7,6 +7,9 @@
             }
         }
     },
+    "env": {
+        "CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS": "1"
+    },
     "enabledPlugins": {
         "nx@nx-claude-plugins": true
     }

core-web/apps/dotcms-block-editor/project.json

@@ -7,13 +7,19 @@
     "tags": ["skip:test", "skip:lint"],
     "targets": {
         "build": {
-            "executor": "@angular-devkit/build-angular:browser-esbuild",
+            "executor": "@angular/build:application",
+            "outputs": ["{options.outputPath.base}"],
             "options": {
-                "outputPath": "dist/apps/dotcms-block-editor",
+                "baseHref": "./",
+                "outputPath": {
+                    "base": "dist/apps/dotcms-block-editor",
+                    "browser": ""
+                },
                 "index": "apps/dotcms-block-editor/src/index.html",
-                "main": "apps/dotcms-block-editor/src/main.ts",
-                "polyfills": "apps/dotcms-block-editor/src/polyfills.ts",
+                "browser": "apps/dotcms-block-editor/src/main.ts",
+                "polyfills": ["apps/dotcms-block-editor/src/polyfills.ts"],
                 "tsConfig": "apps/dotcms-block-editor/tsconfig.app.json",
+                "inlineStyleLanguage": "css",
                 "assets": [
                     "apps/dotcms-block-editor/src/favicon.ico",
                     "apps/dotcms-block-editor/src/assets"
@@ -33,24 +39,29 @@
                     "includePaths": ["libs/dotcms-scss/angular"]
                 },
                 "allowedCommonJsDependencies": ["lodash.isequal", "date-fns"],
-                "vendorChunk": true,
                 "extractLicenses": false,
-                "buildOptimizer": false,
                 "sourceMap": true,
                 "optimization": false,
                 "namedChunks": true
             },
             "configurations": {
+                "development": {
+                    "optimization": false,
+                    "sourceMap": true,
+                    "namedChunks": true,
+                    "extractLicenses": false
+                },
                 "localhost": {
                     "sourceMap": true,
-                    "optimization": false,
-                    "watch": true
+                    "optimization": false
                 },
                 "tomcat": {
-                    "outputPath": "../../tomcat9/webapps/ROOT/dotcms-block-editor",
+                    "outputPath": {
+                        "base": "../../tomcat9/webapps/ROOT/dotcms-block-editor",
+                        "browser": ""
+                    },
                     "sourceMap": true,
-                    "optimization": false,
-                    "watch": true
+                    "optimization": false
                 },
                 "production": {
                     "fileReplacements": [
@@ -64,8 +75,6 @@
                     "sourceMap": false,
                     "namedChunks": false,
                     "extractLicenses": false,
-                    "vendorChunk": false,
-                    "buildOptimizer": true,
                     "budgets": [
                         {
                             "type": "initial",
@@ -85,7 +94,7 @@
         "serve": {
             "executor": "@angular/build:dev-server",
             "options": {
-                "buildTarget": "dotcms-block-editor:build"
+                "buildTarget": "dotcms-block-editor:build:development"
             },
             "configurations": {
                 "production": {
@@ -113,7 +122,7 @@
                 "main": "apps/dotcms-block-editor/src/test.ts",
                 "tsConfig": "apps/dotcms-block-editor/tsconfig.spec.json",
                 "karmaConfig": "apps/dotcms-block-editor/karma.conf.js",
-                "polyfills": "apps/dotcms-block-editor/src/polyfills.ts",
+                "polyfills": ["apps/dotcms-block-editor/src/polyfills.ts"],
                 "styles": [],
                 "scripts": [],
                 "assets": []

core-web/apps/dotcms-block-editor/src/app/app.component.ts

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
+import { EditorComponent } from '@dotcms/new-block-editor';
 
 @Component({
     selector: 'dotcms-root',
     templateUrl: './app.component.html',
     styleUrls: [],
-    standalone: false
+    imports: [EditorComponent],
+    standalone: true
 })
-export class AppComponent {
-    title = 'dotcms-block-editor';
-}
+export class AppComponent {}

core-web/apps/dotcms-block-editor/src/app/app.config.ts

@@ -0,0 +1,31 @@
+import Lara from '@primeuix/themes/lara';
+
+import { provideHttpClient } from '@angular/common/http';
+import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+
+import { providePrimeNG } from 'primeng/config';
+
+/**
+ * PrimeNG is required for components used inside `@dotcms/new-block-editor` (e.g. DataView in
+ * image/video dotCMS pickers). Theme + cssLayer order must match `apps/dotcms-block-editor/src/styles.css`.
+ */
+export const appConfig: ApplicationConfig = {
+    providers: [
+        provideBrowserGlobalErrorListeners(),
+        provideHttpClient(),
+        provideAnimationsAsync(),
+        providePrimeNG({
+            theme: {
+                preset: Lara,
+                options: {
+                    darkModeSelector: '.dark',
+                    cssLayer: {
+                        name: 'primeng',
+                        order: 'tailwind-base, primeng, tailwind-utilities'
+                    }
+                }
+            }
+        })
+    ]
+};

core-web/apps/dotcms-block-editor/src/index.html

@@ -3,9 +3,14 @@
     <head>
         <meta charset="utf-8" />
         <title>DotBlockEditor</title>
-        <base href="/" />
+        <base href="./" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" type="image/x-icon" href="favicon.ico" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap"
+            rel="stylesheet" />
     </head>
     <body>
         <dotcms-root></dotcms-root>

core-web/apps/dotcms-block-editor/src/main.ts

@@ -1,13 +1,12 @@
 import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
 
-import { AppModule } from './app/app.module';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
 import { environment } from './environments/environment';
 
 if (environment.production) {
     enableProdMode();
 }
 
-platformBrowserDynamic()
-    .bootstrapModule(AppModule)
-    .catch((err) => console.error(err));
+bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));