feat: add alert block custom inline reuse block-note vanillajs example

Author: m-risto

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

@@ -40,6 +40,7 @@ export class AlertBlockExample {
       props: {
         type: 'warning',
       },
+      content: 'Hallo Welt.',
     },
   ];
   options: BlockNoteEditorOptionsType<

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

@@ -1,148 +1,102 @@
-import {
-  BlockFromConfig,
-  BlockNoteEditor,
-  createBlockSpec,
-  Props,
-  PropSchema,
-} from '@blocknote/core';
-import {
-  lucideAlertTriangle,
-  lucideCheckCircle,
-  lucideCircleOff,
-  lucideInfo,
-} from '@ng-icons/lucide';
+import { createBlockSpec, defaultProps } from '@blocknote/core';
 
-// The types of alerts that users can choose from.
-export const alertTypes = [
-  {
-    title: 'Warning',
-    value: 'warning',
-    icon: lucideAlertTriangle,
+// The types of alerts that users can choose from
+const alertTypes = {
+  warning: {
+    icon: '⚠️',
     color: '#e69819',
-    backgroundColor: {
-      light: '#fff6e6',
-      dark: '#805d20',
-    },
+    backgroundColor: '#fff6e6',
   },
-  {
-    title: 'Error',
-    value: 'error',
-    icon: lucideCircleOff,
+  error: {
+    icon: '⛔',
     color: '#d80d0d',
-    backgroundColor: {
-      light: '#ffe6e6',
-      dark: '#802020',
-    },
+    backgroundColor: '#ffe6e6',
   },
-  {
-    title: 'Info',
-    value: 'info',
-    icon: lucideInfo,
+  info: {
+    icon: 'ℹ️',
     color: '#507aff',
-    backgroundColor: {
-      light: '#e6ebff',
-      dark: '#203380',
-    },
+    backgroundColor: '#e6ebff',
   },
-  {
-    title: 'Success',
-    value: 'success',
-    icon: lucideCheckCircle,
+  success: {
+    icon: '✅',
     color: '#0bc10b',
-    backgroundColor: {
-      light: '#e6ffe6',
-      dark: '#208020',
-    },
+    backgroundColor: '#e6ffe6',
   },
-] as const;
+};
 
-export const alertPropSchema = {
-  type: {
-    default: 'warning',
-    values: alertTypes.map((type) => type.value),
+export const alertBlock = createBlockSpec(
+  {
+    type: 'alert',
+    propSchema: {
+      textAlignment: defaultProps.textAlignment,
+      textColor: defaultProps.textColor,
+      type: {
+        default: 'warning',
+        values: ['warning', 'error', 'info', 'success'] as const,
+      },
+    },
+    content: 'inline',
   },
-} satisfies PropSchema;
-
-export const alertBlockConfig = {
-  type: 'alert' as const,
-  propSchema: alertPropSchema,
-  content: 'inline',
-} as const;
-
-const alertRender = (
-  block: BlockFromConfig<typeof alertBlockConfig, any, any>,
-  editor: BlockNoteEditor<any, any, any>
-) => {
-  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);
-  if (!alertType) {
-    return {
-      dom: div,
-    };
+  {
+    render: (block, editor) => {
+      const alert = document.createElement('div');
+      alert.className = 'alert';
+      alert.style.width = '100%';
+      alert.style.display = 'flex';
+      alert.style.backgroundColor =
+        alertTypes[block.props.type].backgroundColor;
+
+      const dropdown = document.createElement('select');
+      dropdown.contentEditable = 'false';
+      dropdown.addEventListener('change', () => {
+        editor.updateBlock(block, {
+          type: 'alert',
+          props: { type: dropdown.value as keyof typeof alertTypes },
+        });
+      });
+      dropdown.options.add(
+        new Option(
+          alertTypes['warning'].icon,
+          'warning',
+          block.props.type === 'warning',
+          block.props.type === 'warning'
+        )
+      );
+      dropdown.options.add(
+        new Option(
+          alertTypes['error'].icon,
+          'error',
+          block.props.type === 'error',
+          block.props.type === 'error'
+        )
+      );
+      dropdown.options.add(
+        new Option(
+          alertTypes['info'].icon,
+          'info',
+          block.props.type === 'info',
+          block.props.type === 'info'
+        )
+      );
+      dropdown.options.add(
+        new Option(
+          alertTypes['success'].icon,
+          'success',
+          block.props.type === 'success',
+          block.props.type === 'success'
+        )
+      );
+      alert.appendChild(dropdown);
+
+      const inlineContent = document.createElement('div');
+      inlineContent.style.flexGrow = '1';
+
+      alert.appendChild(inlineContent);
+
+      return {
+        dom: alert,
+        contentDOM: inlineContent,
+      };
+    },
   }
-  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,
-  };
-};
-
-export const alertParse = (
-  element: HTMLElement
-): Partial<Props<typeof alertBlockConfig.propSchema>> | undefined => {
-  return undefined;
-};
-
-export const alertBlock = createBlockSpec(alertBlockConfig, {
-  render: alertRender,
-  parse: alertParse,
-});
+);