ASHBE

Another shitty block editor.

Development

• npm i
• npm run dev

Visit http://127.0.0.1:5173/

Unit Testing

• npm run test

e2e Testing

Run app in test mode first (set to run on port 3000 in test mode), then call cypress:run to start the actual tests.

• npm run cypress:ci:start
• npm run cypress:run

Publishing

• npm run build
• npm publish

Use

npm install @tomnez/ashbe

In your app:

import BlockCore from '@tomnez/ashbe';
import '/node_modules/@tomnez/ashbe/dist/style.css'; // will fix this soon

// Sample data
const blockData = {
  blocks: [
    {
      id: crypto.randomUUID(),
      type: 'header1',
      data: {
        text: 'New Note',
      },
    },
    {
      id: crypto.randomUUID(),
      type: 'paragraph',
      data: {
        text: 'Paragraph <b>1</b> contents.',
      },
    },
    {
      id: crypto.randomUUID(),
      type: 'paragraph',
      data: {
        text: 'Paragraph <code>2 contents</code> ooh code.',
      },
    },
    {
      id: crypto.randomUUID(),
      type: 'paragraph',
      data: {
        text: 'Paragraph 3 contents.',
      },
    },
  ],
};

const options = {
  blockData,
  containerSelector: '#editor',
  onSave: (/** blockData */) => {
    // Save updated blockData
  },
  onImageDrop: async (imageData) => {
    const response = await fetch('/upload', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ image: imageData })
    });

    return response.data.imageUrl;
  },
};

editor = new BlockCore(options);
editor.init();

// destroy will call `onSave` a final time and remove DOM nodes, listeners, etc:
editor.destroy();