feat: add ssr example

apps/api/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.base.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

apps/api/jest.config.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: 'api',
+  preset: '../../jest.preset.js',
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../../coverage/apps/api',
+};

apps/api/project.json

@@ -0,0 +1,33 @@
+{
+  "name": "api",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/api/src",
+  "projectType": "application",
+  "tags": [],
+  "targets": {
+    "serve": {
+      "executor": "@nx/js:node",
+      "defaultConfiguration": "development",
+      "dependsOn": ["build"],
+      "options": {
+        "buildTarget": "api:build",
+        "runBuildTargetDependencies": false
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "api:build:development"
+        },
+        "production": {
+          "buildTarget": "api:build:production"
+        }
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "apps/api/jest.config.ts"
+      }
+    }
+  }
+}

apps/api/src/app/app.controller.ts

@@ -0,0 +1,13 @@
+import { Body, Controller, Post } from '@nestjs/common';
+import { AppService } from './app.service';
+import { Block } from '@blocknote/core';
+
+@Controller()
+export class AppController {
+  constructor(private readonly appService: AppService) {}
+
+  @Post('/test-html')
+  getTestHtml(@Body() body: Block[]) {
+    return this.appService.getTestHtml(body);
+  }
+}

apps/api/src/app/app.module.ts

@@ -0,0 +1,11 @@
+import { Module } from '@nestjs/common';
+
+import { AppController } from './app.controller';
+import { AppService } from './app.service';
+
+@Module({
+  imports: [],
+  controllers: [AppController],
+  providers: [AppService],
+})
+export class AppModule {}

apps/api/src/app/app.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@nestjs/common';
+import { Block } from '@blocknote/core';
+import { ServerBlockNoteEditor } from '@blocknote/server-util';
+
+let serverBlockNoteEditor: ServerBlockNoteEditor;
+eval(`import('@blocknote/server-util')`).then((module: any) => {
+  serverBlockNoteEditor = module.ServerBlockNoteEditor;
+});
+
+@Injectable()
+export class AppService {
+  async getTestHtml(body: Block[]) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      const editor = serverBlockNoteEditor!.create({});
+      return await editor.blocksToFullHTML(body);
+  }
+}

apps/api/src/main.ts

@@ -0,0 +1,23 @@
+/**
+ * This is not a production server yet!
+ * This is only a minimal backend to get started.
+ */
+
+import { Logger } from '@nestjs/common';
+import { NestFactory } from '@nestjs/core';
+
+import { AppModule } from './app/app.module';
+
+async function bootstrap() {
+  const app = await NestFactory.create(AppModule);
+  const globalPrefix = 'api';
+  app.setGlobalPrefix(globalPrefix);
+  app.enableCors();
+  const port = process.env.PORT || 3000;
+  await app.listen(port);
+  Logger.log(
+    `🚀 Application is running on: http://localhost:${port}/${globalPrefix}`
+  );
+}
+
+bootstrap();

apps/api/tsconfig.app.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["node"],
+    "emitDecoratorMetadata": true,
+    "target": "es2021"
+  },
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"],
+  "include": ["src/**/*.ts"]
+}

apps/api/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "compilerOptions": {
+    "esModuleInterop": true
+  }
+}

apps/api/tsconfig.spec.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

apps/api/webpack.config.js

@@ -0,0 +1,19 @@
+const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
+const { join } = require('path');
+
+module.exports = {
+  output: {
+    path: join(__dirname, '../../dist/apps/api'),
+  },
+  plugins: [
+    new NxAppWebpackPlugin({
+      target: 'node',
+      compiler: 'tsc',
+      main: './src/main.ts',
+      tsConfig: './tsconfig.app.json',
+      assets: ['./src/assets'],
+      optimization: false,
+      outputHashing: 'none',
+    }),
+  ],
+};

apps/docs/jest.config.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 export default {
   displayName: 'docs',
-  preset: '../jest.preset.js',
+  preset: '../../jest.preset.js',
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
   coverageDirectory: '../coverage/docs',
   transform: {

apps/docs/src/app/app.config.ts

@@ -2,6 +2,7 @@ import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { provideHighlightOptions } from 'ngx-highlightjs';
 import { appRoutes } from './app.routes';
+import { provideHttpClient } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -15,5 +16,6 @@ export const appConfig: ApplicationConfig = {
         css: () => import('highlight.js/lib/languages/css'),
       },
     }),
+    provideHttpClient(),
   ],
 };

apps/docs/src/pages/examples/backend/server-side-rendering/server-side-rendering.example.ts

@@ -0,0 +1,54 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { HlmButtonDirective } from '@dytab/ui';
+import { BnaEditorComponent } from '@dytab/ngx-blocknote';
+import { HttpClient } from '@angular/common/http';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'bna-server-side-rendering-example',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    BnaEditorComponent,
+    HlmButtonDirective,
+  ],
+  template: `
+    <button type="button" hlmBtn size="sm" type (click)="logSSR()">
+      Log SSR
+    </button>
+    <bna-editor [formControl]="control" />
+    SSR Output
+    <div class="bg">{{ssrContent}}</div>
+  `,
+})
+export class ServerSideRenderingExample {
+  ssrContent = '';
+  control = new FormControl([
+    {
+      type: 'paragraph',
+      content: 'Welcome to this demo!',
+    },
+    {
+      type: 'paragraph',
+      content: 'Try to get the html result',
+    },
+  ]);
+
+  constructor(private httpClient: HttpClient) {}
+
+  logSSR() {
+    this.httpClient
+      .post('http://localhost:3000/api/test-html', this.control.value, {
+        responseType: 'text',
+      })
+      .subscribe((result) => {
+        console.log(result);
+        this.ssrContent = result;
+      });
+  }
+}
+
+export const uploadFileExampleCode = `
+TO BE ADDED`;

apps/docs/src/pages/examples/backend/server-side-rendering/server-side-rendering.page.ts

@@ -0,0 +1,53 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import {
+  hlmP,
+  HlmTabsComponent,
+  HlmTabsContentDirective,
+  HlmTabsListComponent,
+  HlmTabsTriggerDirective,
+} from '@dytab/ui';
+import { Highlight } from 'ngx-highlightjs';
+import { CodeComponent } from '../../../../shared/code/code.component';
+import { DemoBoxComponent } from '../../../../shared/layout/demo-box.component';
+import { TabsComponent } from '../../../../shared/layout/example-tabs.component';
+import { SectionIntroComponent } from '../../../../shared/layout/section-intro.component';
+import {
+  ServerSideRenderingExample,
+  uploadFileExampleCode,
+} from './server-side-rendering.example';
+
+@Component({
+  standalone: true,
+  imports: [
+    CommonModule,
+    SectionIntroComponent,
+    DemoBoxComponent,
+    HlmTabsComponent,
+    HlmTabsListComponent,
+    HlmTabsContentDirective,
+    HlmTabsTriggerDirective,
+    TabsComponent,
+    CodeComponent,
+    ServerSideRenderingExample,
+    Highlight,
+  ],
+  template: `
+    <bna-section-intro name="Server Side Rendering">
+      <p class="${hlmP} mb-8">
+        This example only works locally with the running server from apps/api.
+      </p>
+    </bna-section-intro>
+    <hlm-tabs tab="preview">
+      <bna-example-tabs firstTab="Preview" secondTab="Code">
+        <bna-demo-box firstTab>
+          <bna-server-side-rendering-example />
+        </bna-demo-box>
+        <bna-code [code]="exampleCode" secondTab />
+      </bna-example-tabs>
+    </hlm-tabs>
+  `,
+})
+export class ServerSideRenderingPage {
+  exampleCode = uploadFileExampleCode;
+}

apps/docs/src/pages/examples/shared/examples.ts

@@ -18,6 +18,7 @@ import { FormattingSideMenuButtonsPage } from '../ui-components/formatting-side-
 import { FormattingToolbarButtonsPage } from '../ui-components/formatting-toolbar-buttons/formatting-toolbar-buttons.page';
 import { Example, ExampleGroup } from './example.type';
 import { FormPage } from '../basic/form/form.page';
+import { ServerSideRenderingPage } from '../backend/server-side-rendering/server-side-rendering.page';
 
 //This will be added to The app routes and also to the links in the examples
 export const exampleLinks: Example[] = [
@@ -75,6 +76,12 @@ export const exampleLinks: Example[] = [
     name: 'Upload Files',
     component: UploadFilePage,
   },
+  {
+    groupName: 'Backend',
+    url: 'backend/server-side-rendering',
+    name: 'Server Side Rendering',
+    component: ServerSideRenderingPage,
+  },
   {
     groupName: 'Custom',
     url: 'custom/alert-block',

nx.json

@@ -87,6 +87,14 @@
         "previewTargetName": "preview",
         "serveStaticTargetName": "serve-static"
       }
+    },
+    {
+      "plugin": "@nx/webpack/plugin",
+      "options": {
+        "buildTargetName": "build",
+        "serveTargetName": "serve",
+        "previewTargetName": "preview"
+      }
     }
   ],
   "generators": {