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.html

@@ -1 +1 @@
-<dot-block-editor />
+<dot-block-editor [value]="demoContent" />

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

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

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

@@ -0,0 +1,27 @@
+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'
+                }
+            }
+        })
+    ]
+};

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

@@ -0,0 +1,41 @@
+/** Default HTML shown when the editor loads (demo / onboarding). */
+export const EDITOR_DEMO_CONTENT = `
+      <h1>Block Editor</h1>
+      <p>Welcome! Type <strong>/</strong> anywhere to open the block menu and insert content.</p>
+
+      <h2>Text blocks</h2>
+      <p>Regular paragraph text. You can write <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
+      <blockquote><p>A blockquote stands out from the rest of the content — great for callouts or citations.</p></blockquote>
+      <pre><code>const greet = (name: string) => \`Hello, \${name}!\`;
+console.log(greet('World'));</code></pre>
+
+      <h2>Lists</h2>
+      <ul>
+        <li>Bullet item one</li>
+        <li>Bullet item two</li>
+        <li>Bullet item three</li>
+      </ul>
+      <ol>
+        <li>First ordered item</li>
+        <li>Second ordered item</li>
+        <li>Third ordered item</li>
+      </ol>
+
+      <h2>Links</h2>
+      <p>Click once to select a link, double-click to edit it. Try it: <a href="https://tiptap.dev">Tiptap docs</a> or <a href="https://angular.dev">Angular docs</a>. You can also paste a URL directly and it will auto-link.</p>
+
+      <h2>Table</h2>
+      <table>
+        <thead>
+          <tr><th>Feature</th><th>Status</th><th>Notes</th></tr>
+        </thead>
+        <tbody>
+          <tr><td>Slash menu</td><td>✅ Done</td><td>Type / to trigger</td></tr>
+          <tr><td>Drag &amp; drop</td><td>✅ Done</td><td>Grab the handle on the left</td></tr>
+          <tr><td>Tables</td><td>✅ Done</td><td>Resizable columns</td></tr>
+          <tr><td>Links</td><td>✅ Done</td><td>Autolink + dialog</td></tr>
+          <tr><td>Images</td><td>✅ Done</td><td>URL or file upload</td></tr>
+          <tr><td>Video</td><td>✅ Done</td><td>URL or file upload</td></tr>
+        </tbody>
+      </table>
+    `;

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));

core-web/apps/dotcms-block-editor/src/styles.css

@@ -1,7 +1,3 @@
 @import 'tailwindcss';
 @import 'tailwindcss-primeui';
-
-.p-dialog-mask.p-component-overlay.p-dialog-mask-scrollblocker {
-    background-color: transparent;
-    backdrop-filter: none;
-}
+@plugin "@tailwindcss/typography";

core-web/apps/dotcms-block-editor/tsconfig.app.json

@@ -5,7 +5,11 @@
         "types": [],
         "target": "ES2022",
         "useDefineForClassFields": false,
-        "moduleResolution": "bundler"
+        "module": "preserve",
+        "moduleResolution": "bundler",
+        "resolvePackageJsonExports": true,
+        "incremental": true,
+        "esModuleInterop": true
     },
     "files": ["src/main.ts", "src/polyfills.ts"],
     "exclude": ["**/*.stories.ts", "**/*.stories.js"]

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

@@ -16,13 +16,32 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 
 import { catchError, take, takeUntil, tap } from 'rxjs/operators';
 
-// Services
-import { getEditorBlockOptions } from '@dotcms/block-editor';
 import { DotHttpErrorManagerService, DotMessageService } from '@dotcms/data-access';
 import { DotCMSContentTypeField, DotDialogActions, DotFieldVariable } from '@dotcms/dotcms-models';
 
 import { DotFieldVariablesService } from '../fields/dot-content-type-fields-variables/services/dot-field-variables.service';
 
+const BLOCK_OPTIONS: { label: string; code: string }[] = [
+    { label: 'AI Content', code: 'aiContentPrompt' },
+    { label: 'AI Image', code: 'aiImagePrompt' },
+    { label: 'Blockquote', code: 'blockquote' },
+    { label: 'Code Block', code: 'codeBlock' },
+    { label: 'Contentlet', code: 'dotContent' },
+    { label: 'Grid (2 columns)', code: 'gridBlock' },
+    { label: 'Heading 1', code: 'heading1' },
+    { label: 'Heading 2', code: 'heading2' },
+    { label: 'Heading 3', code: 'heading3' },
+    { label: 'Heading 4', code: 'heading4' },
+    { label: 'Heading 5', code: 'heading5' },
+    { label: 'Heading 6', code: 'heading6' },
+    { label: 'Horizontal Line', code: 'horizontalRule' },
+    { label: 'Image', code: 'image' },
+    { label: 'List Ordered', code: 'orderedList' },
+    { label: 'List Unordered', code: 'bulletList' },
+    { label: 'Table', code: 'table' },
+    { label: 'Video', code: 'video' }
+];
+
 /* Uncomment this when Content Assets variable is ready
 const BLOCK_EDITOR_ASSETS = [
     { label: 'Youtube Videos', code: 'videos'},
@@ -54,7 +73,7 @@ export class DotBlockEditorSettingsComponent implements OnInit, OnDestroy, OnCha
         allowedBlocks: {
             label: 'Allowed Blocks',
             placeholder: 'Select Blocks',
-            options: getEditorBlockOptions(),
+            options: BLOCK_OPTIONS,
             key: 'allowedBlocks',
             variable: null
         }

core-web/apps/dotcms-ui/src/style.css

@@ -1,5 +1,6 @@
 @import 'tailwindcss';
 @import 'tailwindcss-primeui';
+@plugin "@tailwindcss/typography";
 @import './daisyui-theme.css';
 
 :root {

core-web/libs/dotcms-scss/angular/styles.scss

@@ -106,14 +106,6 @@ However this is for the dragula we use in the angular components the one in the
     user-select: none !important;
 }
 
-code {
-    color: $color-accessible-text-purple !important;
-    background-color: $color-accessible-text-purple-bg;
-    padding: $spacing-0 $spacing-1;
-    font-family: $font-code;
-    line-break: anywhere;
-}
-
 .dot-mask {
     background-color: transparent;
     backdrop-filter: none;

core-web/libs/edit-content/src/lib/fields/dot-edit-content-block-editor/dot-edit-content-block-editor.component.html

@@ -16,7 +16,7 @@
             [languageId]="$languageId()"
             [formControlName]="field.variable"
             [contentlet]="$contentlet()"
-            [hasFieldError]="fieldHasError"
+            [hasError]="fieldHasError"
             [field]="field" />
     </dot-card-field-content>
 </dot-card-field>

core-web/libs/edit-content/src/lib/fields/dot-edit-content-block-editor/dot-edit-content-block-editor.component.ts

@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { ControlContainer, ReactiveFormsModule } from '@angular/forms';
 
-import { BlockEditorModule } from '@dotcms/block-editor';
 import { DotCMSContentlet, DotCMSContentTypeField } from '@dotcms/dotcms-models';
+import { DotCMSEditorComponent } from '@dotcms/new-block-editor';
 
 import { DotEditContentStore } from '../../store/edit-content.store';
 import { DotCardFieldContentComponent } from '../dot-card-field/components/dot-card-field-content.component';
@@ -18,7 +18,7 @@ import { BaseWrapperField } from '../shared/base-wrapper-field';
         DotCardFieldContentComponent,
         DotCardFieldLabelComponent,
 
-        BlockEditorModule
+        DotCMSEditorComponent
     ],
     templateUrl: './dot-edit-content-block-editor.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,