feat: alert now shows icon and style depending from alert type

Author: m-risto

docs/src/pages/examples/custom/alert-block/alert-block.example.ts

@@ -1,13 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import {
-  BlockConfig,
   BlockNoteEditor,
   BlockSpecs,
-  InlineContentSchema,
-  StyleSchema,
   defaultBlockSpecs,
-  insertOrUpdateBlock, DefaultSuggestionItem
+  DefaultSuggestionItem,
+  insertOrUpdateBlock,
 } from '@blocknote/core';
 import { BnaEditorComponent } from '@dytab/block-note-angular';
 import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
@@ -21,40 +19,47 @@ import { alertBlock } from './alert-block';
     [initialContent]="initialContent"
     [blockSpecs]="blockSpecs"
     [inputSlashMenuItems]="suggestionItem"
-  />`
+  />`,
 })
-export class AlertBlockExample{
+export class AlertBlockExample {
   initialContent = [
     {
-      type: 'alert'
-    }
+      type: 'alert',
+      props: {
+        type: 'warning',
+      },
+    },
     //TODO: remove cast
   ] as any;
   blockSpecs: BlockSpecs = {
     ...defaultBlockSpecs,
-    alert: alertBlock
+    alert: alertBlock,
   };
-  insertAlert = (editor: BlockNoteEditor): Omit<DefaultSuggestionItem, 'key'> => ({
-    title: "Alert",
+  insertAlert = (
+    editor: BlockNoteEditor
+  ): Omit<DefaultSuggestionItem, 'key'> => ({
+    title: 'Alert',
     onItemClick: () => {
       insertOrUpdateBlock(editor, {
-        type: "alert" as never,
+        type: 'alert' as never,
       });
     },
     badge: 'BAFD',
     subtext: 'SUBTEXT',
     aliases: [
-      "alert",
-      "notification",
-      "emphasize",
-      "warning",
-      "error",
-      "info",
-      "success",
+      'alert',
+      'notification',
+      'emphasize',
+      'warning',
+      'error',
+      'info',
+      'success',
     ],
-    group: "Other",
+    group: 'Other',
   });
-  suggestionItem: Array<(editor: BlockNoteEditor) => Omit<DefaultSuggestionItem, 'key'>> = [this.insertAlert]
+  suggestionItem: Array<
+    (editor: BlockNoteEditor) => Omit<DefaultSuggestionItem, 'key'>
+  > = [this.insertAlert];
 }
 
 export const alertBlockExampleCode = `import { CommonModule } from '@angular/common';

docs/src/pages/examples/custom/alert-block/alert-block.ts

@@ -1,26 +1,136 @@
-import { BlockNoteEditor, insertOrUpdateBlock } from '@blocknote/core';
 import {
   BlockFromConfig,
+  BlockNoteEditor,
   createBlockSpec,
   Props,
   PropSchema,
 } from '@blocknote/core';
-import { schema } from '@angular-devkit/core';
+import {
+  lucideAlertTriangle,
+  lucideCheckCircle,
+  lucideCircleOff,
+  lucideInfo,
+} from '@ng-icons/lucide';
+
+// The types of alerts that users can choose from.
+export const alertTypes = [
+  {
+    title: 'Warning',
+    value: 'warning',
+    icon: lucideAlertTriangle,
+    color: '#e69819',
+    backgroundColor: {
+      light: '#fff6e6',
+      dark: '#805d20',
+    },
+  },
+  {
+    title: 'Error',
+    value: 'error',
+    icon: lucideCircleOff,
+    color: '#d80d0d',
+    backgroundColor: {
+      light: '#ffe6e6',
+      dark: '#802020',
+    },
+  },
+  {
+    title: 'Info',
+    value: 'info',
+    icon: lucideInfo,
+    color: '#507aff',
+    backgroundColor: {
+      light: '#e6ebff',
+      dark: '#203380',
+    },
+  },
+  {
+    title: 'Success',
+    value: 'success',
+    icon: lucideCheckCircle,
+    color: '#0bc10b',
+    backgroundColor: {
+      light: '#e6ffe6',
+      dark: '#208020',
+    },
+  },
+] as const;
 
-export const alertPropSchema = {} satisfies PropSchema;
+export const alertPropSchema = {
+  type: {
+    default: 'warning',
+    values: alertTypes.map((type) => type.value),
+  },
+} satisfies PropSchema;
 
 export const alertBlockConfig = {
   type: 'alert' as const,
   propSchema: alertPropSchema,
-  content: 'none',
+  content: 'inline',
 } as const;
 
 const alertRender = (
   block: BlockFromConfig<typeof alertBlockConfig, any, any>,
   editor: BlockNoteEditor<any, any, any>
 ) => {
-  const div = document.createElement('p');
-  div.textContent = 'Alert';
+  const div = document.createElement('div');
+  div.style.width = '100%';
+  div.style.padding = '4px 8px';
+  div.style.display = 'flex';
+  div.style.alignItems = 'center';
+  const alertType = alertTypes.find((type) => type.value === block.props.type);
+  console.log(block, alertType);
+  if (!alertType) {
+    return {
+      dom: div,
+    };
+  }
+  div.style.color = alertType.color;
+  div.style.backgroundColor = alertType.backgroundColor.light;
+
+  // Create a select element.
+  const selectElement = document.createElement('select');
+
+  // Populate the select element with options.
+  alertTypes.forEach((alertType) => {
+    const option = document.createElement('option');
+
+    option.value = alertType.value;
+    option.text = alertType.title;
+
+    // Mark the current alertType as selected in the dropdown.
+    if (alertType.value === block.props.type) {
+      option.selected = true;
+    }
+
+    selectElement.appendChild(option);
+  });
+
+  // Handle the change event.
+  selectElement.addEventListener('change', (event: Event) => {
+    const target = event.target as HTMLSelectElement;
+    editor.updateBlock(block, {
+      type: 'alert',
+      props: { type: target.value },
+    });
+  });
+
+  // Style the dropdown
+  selectElement.style.position = 'absolute';
+  selectElement.style.right = '100px';
+
+  // Add the select element to the div.
+  div.appendChild(selectElement);
+
+  const iconElement = document.createElement('span');
+  iconElement.innerHTML = alertType.icon;
+  iconElement.style.marginRight = '8px';
+  div.appendChild(iconElement);
+
+  const textElement = document.createElement('span');
+  textElement.classList.add('inline-content');
+  textElement.textContent = 'Hello world';
+  div.appendChild(textElement);
 
   return {
     dom: div,