feat: add saving and loading

Author: FMuks

docs/src/app/app.routes.ts

@@ -12,6 +12,9 @@ import {
 import {
   RemovingDefaultBlocksPage
 } from '../pages/examples/basic/removing-default-blocks/removing-default-blocks.page';
+import {
+  SavingAndLoadingPage
+} from '../pages/examples/backend/saving-and-loading/saving-and-loading.page';
 
 export const appRoutes: Route[] = [
   { path: '', redirectTo: 'overview', pathMatch: 'full' },
@@ -21,7 +24,6 @@ export const appRoutes: Route[] = [
     component: ExamplesPage,
     children: [
       { path: '', redirectTo: 'basic/minimal', pathMatch: 'full' },
-
       { path: 'basic/minimal', component: BasicSetupPage },
       { path: 'basic/blocks-json', component: BlocksJsonPage },
       {
@@ -36,6 +38,7 @@ export const appRoutes: Route[] = [
         path: 'basic/removing-default-blocks',
         component: RemovingDefaultBlocksPage,
       },
+      { path: 'backend/saving-and-loading', component: SavingAndLoadingPage },
       {
         path: 'custom/alert-block',
         component: AlertBlockPage,

docs/src/pages/examples/backend/saving-and-loading/saving-and-loading.example.ts

@@ -0,0 +1,77 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { BnaEditorComponent } from '@dytab/block-note-angular';
+import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
+import {
+  Block, BlockNoteEditor,
+  PartialBlock
+} from '@blocknote/core';
+
+@Component({
+  selector: 'bna-saving-and-loading-example',
+  standalone: true,
+  imports: [CommonModule, BnaEditorComponent, HlmButtonDirective],
+  template: `
+    <bna-editor [initialContent]="initialContent" (contentChanged)="saveToStorage($event)" />
+  `,
+})
+export class SavingAndLoadingExample implements OnInit {
+  initialContent = this.loadFromStorage();
+
+  ngOnInit(): void {
+    BlockNoteEditor.create({ initialContent: this.initialContent });
+  }
+
+  saveToStorage(jsonBlocks: Block[]) {
+    // Save contents to local storage. You might want to debounce this or replace
+    // with a call to your API / database.
+    localStorage.setItem("editorContent", JSON.stringify(jsonBlocks));
+  }
+
+  private loadFromStorage() {
+    // Gets the previously stored editor contents.
+    const storageString = localStorage.getItem("editorContent");
+    return storageString
+      ? (JSON.parse(storageString) as PartialBlock[])
+      : undefined;
+  }
+}
+
+export const savingAndLoadingExampleCode = `import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { BnaEditorComponent } from '@dytab/block-note-angular';
+import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
+import {
+  Block, BlockNoteEditor,
+  PartialBlock
+} from '@blocknote/core';
+
+@Component({
+  selector: 'bna-saving-and-loading-example',
+  standalone: true,
+  imports: [CommonModule, BnaEditorComponent, HlmButtonDirective],
+  template: \`
+    <bna-editor [initialContent]="initialContent" (contentChanged)="saveToStorage($event)" />
+  \`,
+})
+export class SavingAndLoadingExample implements OnInit {
+  initialContent = this.loadFromStorage();
+
+  ngOnInit(): void {
+    BlockNoteEditor.create({ initialContent: this.initialContent });
+  }
+
+  saveToStorage(jsonBlocks: Block[]) {
+    // Save contents to local storage. You might want to debounce this or replace
+    // with a call to your API / database.
+    localStorage.setItem("editorContent", JSON.stringify(jsonBlocks));
+  }
+
+  private loadFromStorage() {
+    // Gets the previously stored editor contents.
+    const storageString = localStorage.getItem("editorContent");
+    return storageString
+      ? (JSON.parse(storageString) as PartialBlock[])
+      : undefined;
+  }
+}`;

docs/src/pages/examples/backend/saving-and-loading/saving-and-loading.page.ts

@@ -0,0 +1,57 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import {
+  HlmTabsComponent,
+  HlmTabsContentDirective,
+  HlmTabsListComponent,
+  HlmTabsTriggerDirective,
+} from '@spartan-ng/ui-tabs-helm';
+import { hlmP } from '@spartan-ng/ui-typography-helm';
+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 {
+  SavingAndLoadingExample,
+  savingAndLoadingExampleCode,
+} from './saving-and-loading.example';
+
+@Component({
+  standalone: true,
+  imports: [
+    CommonModule,
+    SectionIntroComponent,
+    DemoBoxComponent,
+    HlmTabsComponent,
+    HlmTabsListComponent,
+    HlmTabsContentDirective,
+    HlmTabsTriggerDirective,
+    TabsComponent,
+    CodeComponent,
+    SavingAndLoadingExample,
+    Highlight,
+  ],
+  template: `
+    <bna-section-intro name="Saving & Loading">
+      <p class="${hlmP} mb-8">
+        This example shows how to save the editor contents to local storage whenever a change is made, and load the saved contents when the editor is created.
+        <br><br>
+        You can replace the <code>saveToStorage</code> and <code>loadFromStorage</code> functions with calls to your backend or database.
+        <br><br>
+        <b>Try it out:</b> Try typing in the editor and reloading the page!
+      </p>
+    </bna-section-intro>
+    <hlm-tabs tab="preview">
+      <bna-example-tabs firstTab="Preview" secondTab="Code">
+        <bna-demo-box firstTab>
+          <bna-saving-and-loading-example />
+        </bna-demo-box>
+        <bna-code [code]="exampleCode" secondTab />
+      </bna-example-tabs>
+    </hlm-tabs>
+  `,
+})
+export class SavingAndLoadingPage{
+  exampleCode = savingAndLoadingExampleCode;
+}

docs/src/pages/examples/examples.page.ts

@@ -43,6 +43,12 @@ import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
         class="justify-start"
         >Default Schema Showcase</a
       >
+
+      Backend
+      <a hlmBtn variant="ghost" routerLink="backend/saving-and-loading" class="justify-start"
+      >Saving & Loading</a
+      >
+
       Custom
       <a
         hlmBtn
@@ -51,6 +57,7 @@ import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
         routerLink="custom/alert-block"
         >Alert Block</a
       >
+
       Interoperability
       <a
         hlmBtn

libs/block-note-angular/src/lib/block-note-editor/bna-editor.component.ts

@@ -16,7 +16,7 @@ import {
   defaultStyleSpecs,
   DefaultSuggestionItem,
   getDefaultSlashMenuItems,
-  InlineContentSpecs,
+  InlineContentSpecs, PartialBlock,
   StyleSpecs
 } from '@blocknote/core';
 import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
@@ -80,7 +80,7 @@ import {
   templateUrl: './bna-editor.component.html'
 })
 export class BnaEditorComponent implements OnChanges{
-  initialContent = input<Block[]>();
+  initialContent = input<Block[] | PartialBlock[]>();
   blockSpecs = input<BlockSpecs>();
   inlineContentSpecs = input<InlineContentSpecs>();
   styleSpecs = input<StyleSpecs>();