A block-styled editor with clean JSON output

Can't use by node.js import in Next.js

When I try to use by way of a Node.js import, I get an "ReferenceError: window is not defined" error in the browser and can't use it at all.

It works fine when I load it by CDN in the head.

• [ ] Create rows on render, by default each row have 1 column
• [ ] Add ability to drag-n-drop block to the left or to the right of other block, creating several columns layout
• [ ] Add id to each block to saved data blocks property
• [ ] Add layout property to saved data object.

The layout should describe layout scheme of Blocks by their ids. For example

[---1---]
[---2---]
[ 3 ][ 4 ]
[---5---]

should be described as

[1, 2, [3, 4], 5]

Hi,

is it possible to import custom HTML into EditorJS on initialization?

For example - I have already existing HTML page, for which I need some WYSIWYG functionality.

Currently when I do:

<div id="page-content">
   <p>Hello</p>
   <p>World</p>
</div>

var editor = new EditorJS({
	holder : 'page-content'
});

then existing content of element "page-content" is ignored, and editor is just appended at the end (e.g. page bottom). Creates new empty space rather than importing two existing <p> nodes - Hello and World.

So it seems that EditosJS can only load supplied data of JSON blocks on initialization and cannot load any custom HTML contents. Is that correct or did I miss something .. ?

I also looked over plugins - could not find any plugin for importing/parsing/loading supplied HTML.

Thank you.

Hey, It would be great if editor assigned unique id for each block. This would help to keep references, add links to other blocks. This probably would introduce breaking changes, discussion would be needed before implementing.

I have fork where I plan to do more changes, one of them is uids https://github.com/floatas/editor.js/commit/36c1f61ed66689bf9237ae3f37cc7e76e0658cb9

It would be great if blocks could be arranged in columns. Here is an example from Notion, where dragging a block to the left or right edge of another block positions them in a column layout.

While dragging:

The result:

I'm trying to translate the editor tooltips and names to Portuguese, but the docs don't specify a way to do that, and in fact, it doesn't seem possible at the moment.

Can this be done?

By nesting Editor.js, it can design layouts more flexibly. I fixed some event handlers to nest Editor.js.

Demo https://codesandbox.io/s/editor-js-grid-nest-ro2uz?fontsize=14&hidenavigation=1&theme=dark

When editing documents collaboratively, we usually need a unique id to save and identify the current block. This PR is modified and resubmitted based on this #1333 , because this PR is no longer maintained

I'm adressing #873 with this PR.

Tested Features:

• Existing data: If your previous block does not have an "id" property, it will create a new unique id
• Existing data: If your previous block does have an "id" property, it will keep the existing unique id
• Existing data: If a block gets changed the "id" property stays the same
• Insert New Block: It will create a new unique id
• Copy & Paste blocks: It will create a new unique ids per copied block
• Move Blocks (Up/Down): It will keep the existing unique id

Important Note:

If you "transform/transition" an existing block to another block it will receive a NEW unique id

We wanted to use EditorJS with customElements (we use lit-html internally). Our reasons behind this is because we wanted to isolate the editor styles away from the main dom so that our CMS styles don't make the editor content look strange. This way we can also customize the CSS nicely so that the end user looks at the formatting and text with about the same styles as they would on the frontend.

We previously used a Iframe for this (which still works), but we would like to avoid that if possible.

With the editor in the customElement, we get errors like these:

Here is the code that creates the customElement:

import '@editorjs/editorjs/dist/editor.js';
import {LitElement, html, css} from 'lit-element';


class HTMLEngine {
  constructor(inputEl, templateSelector, editorConfig) {
    this.inputEl = inputEl;
    this.editorConfig = editorConfig;
  }

  read() {
    let doc = new DOMParser().parseFromString(this.inputEl.value, 'text/html');
    var dataTemplate = doc.querySelector('[data-editor-data]');
    if (dataTemplate) {
      var jsonData = dataTemplate.dataset.editorData;
      return JSON.parse(jsonData);
    }
    return null;
  }

  write(outputData) {
    var editorData = JSON.stringify(outputData);
    var renderedBlocks = '';
    outputData.blocks.forEach((block) => {
      renderedBlocks += this.renderBlock(block);
    });
    this.inputEl.value = `<template data-editor-data='${editorData}'></template>
      ${renderedBlocks}`;
  }

  renderBlock(block) {
    return this.editorConfig.tools[block.type].HTMLGenerator(block.data) + '\n';
  }
}


class OstinatoEditorWidget extends LitElement {
  static get properties() {
    return {
      saveTo: { type: String },
      editorConfig: { type: String },
      editorFramePath: { type: String },
    }
  }

  constructor() {
    super();
    this.saveTo = '';
    this.editorConfig = '';
    this.editorFramePath = '';
  }

  connectedCallback() {
    super.connectedCallback();
    this.saveToEl = document.querySelector(this.saveTo);
    // Now import our editor config.
    import(this.editorConfig).then((m) => {
      this.config = m.editorConfig;
      this.engine = new HTMLEngine(
        this.saveToEl,
        '[editorjs-data]',
        this.config);
      this.initEditor();
    });
  }

  initEditor() {
    this.config.data = this.engine.read();
    this.config.holder = this.shadowRoot.getElementById('editor');

    this.config.onChange = function() {
      this.editor.save().then((outputData) => {
        if (outputData) this.engine.write(outputData);
      });
    }.bind(this);

    console.log(this.config);

    this.editor = new EditorJS(this.config);
  }

  static get styles() {
    return css`
      :host {
        display: block;
        width: 100%;
      }

      #editor {
        width: 100%;
        box-shadow: 0 0 1px 2px #e3e3e3;
      }
    `;
  }

  render() {
    return html`
      <div id="editor"></div>
    `;
  }
}

customElements.define('ostinato-editor-widget', OstinatoEditorWidget);

And this is how we are using the element:

{% load staticfiles %}

<textarea name="{{ widget.name }}"
  {% include "django/forms/widgets/attrs.html" %}
  style="display: none;">{% if widget.value %}{{ widget.value }}{% endif %}</textarea>

<ostinato-editor-widget
  saveTo='[name="{{ widget.name }}"]'
  editorConfig="{{ config_module }}">
</ostinato-editor-widget>

Edit: Oh and here is the config that is used.

export const editorConfig = {
  initialBlock: "paragraph",
  minHeight: "400px",
  autoFocus: true,

  tools: {
    header: {
      class: Header,
      config: {
        placeholder: 'Header Text'
      },
      shortcut: 'CMD+SHIFT+H',
      HTMLGenerator: (data) => `<h${data.level}>${data.text}</h${data.level}>`,
    },

    paragraph: {
      class: Paragraph,
      shortcut: 'CMD+SHIFT+P',
      HTMLGenerator: (data) => `<p>${data.text}</p>`,
    },

    list: {
      class: List,
      inlineToolbar: true,
      shortcut: 'CMD+SHIFT+L',
      HTMLGenerator: (data) => {
        let tagname = data.style.charAt(0) + 'l';
        var renderItem = (item) => { return `<li>${item}</li>`; }
        var items = '';
        data.items.forEach((item) => { items += renderItem(item); });
        return `<${tagname}>${items}</${tagname}>`;
      },
    },

    quote: {
      class: Quote,
      inlineToolbar: true,
      config: {
        quotePlaceholder: 'Enter a quote',
        captionPlaceholder: 'Caption or Author',
      },
      shortcut: 'CMD+SHIFT+O',
      HTMLGenerator: (data) => {
        return `<blockquote style="quote-${data.alignment}">
          <p class="quote-text">${data.text}</p>
          <p class="quote-caption">${data.caption}</p>
        </blockquote>`;
      },
    },

    warning: {
      class: Warning,
      inlineToolbar: true,
      shortcut: 'CMD+SHIFT+W',
      config: {
        titlePlaceholder: 'Warning Title',
        messagePlaceholder: 'Warning Message',
      },
      HTMLGenerator: (data) => {
        return `<div class="warning">
            <p class="warning-title">${data.title}</p>
            <p class="warning-message">${data.message}</p>
          </div>`;
      },
    },

    marker: {
      class:  Marker,
      shortcut: 'CMD+SHIFT+M'
    },

    code: {
      class:  CodeTool,
      shortcut: 'CMD+SHIFT+C',
      HTMLGenerator: (data) => { return `<code>${data.code}</code>`; }
    },

    delimiter: {
      class: Delimiter,
      HTMLGenerator: () => { return `<div class="ce-delimiter"></div>` }
    },

    inlineCode: {
      class: InlineCode,
      shortcut: 'CMD+SHIFT+C'
    },

    table: {
      class: Table,
      inlineToolbar: true,
      shortcut: 'CMD+ALT+T',
      HTMLGenerator: (data) => {
        var rows = '';
        data.content.forEach((row) => {
          var cells = '';
          row.forEach((cell) => { cells += '<td>' + cell + '</td>'; })
          rows += '<tr>' + cells + '</tr>';
        });
        return '<table>' + rows + '</table>';
      }
    },
  },
};

Editor.js is an awesome project, both in design and implementation.

But I need to nesting a block in other block.

So I hope that you can divide blocks into container blocks and leaf blocks.

• Updates block tunes to use popover component. As a temporary solution, non-default block tunes are rendered as before and inserted to special area inside the popover.
• New getter blockSettings (naming could be discussed) is added to tunes interface. It allows to configure the way tune is displayed in the popover.

Describe a bug.

If I click enter in somewhere in the block, a new block gets created from the caret position.

However for the source block which got split, does not get a "block-changed" event.

Steps to reproduce:

1. Go to … Add some text to paragraph block.
2. Click on … Click enter somewhere in middle of the text. A new block with content from the caret position get created
3. …

Expected behavior:

• Block Added event for new block. ✅
• Block Changed event for the block which got split. ❌

From the source code, only a insert operation is invoked which results in "block-added" event.

https://github.com/codex-team/editor.js/blob/43032ebaac6a8b9a67c9bf2ada5adc0f8592d546/src/components/modules/blockManager.ts#L479 Screenshots:

Device, Browser, OS:

Editor.js version: 2.26.4

Plugins you use with their versions:

The plus sign to show the toolbar is only visible when one hovers over a block which is fine for blocks that are already filled. But is there a way to to keep it visible for the next/new block, with no need to hover over it?

Describe a bug.

Steps to reproduce:

1. Go to https://editorjs.io/
2. Click on Caption Input on Image
3. Press Tab it is opening the Menu

Expected behavior: It should not open the menu

Screenshots:

https://user-images.githubusercontent.com/2174170/209351479-aad24e35-1007-41ca-8b33-897d395d2221.mov

Device, Browser, OS: Chrome

Editor.js version: v2.26.4

Plugins you use with their versions:

When I convert a paragraph to a header, for example, it strips all html tags.. including ones that should be saved by sanitize. Bold, italics, underline, links, and any other expected HTML gets stripped. This happens across all conversions that I've tested.

Steps to reproduce:

1. Go to editorjs.io
2. Select any paragraph block that has alternative formatting (inline code, marker, links, etc)
3. Convert it to a heading or quote, using the option available within the inline toolbar (on the left). You'll notice that all html tags are stripped and links, etc are lost.

Expected behavior: html tags should be preserved and interpreted by the rules defined in the Tool Class it is transforming into. Perhaps ideally, it runs through the onPaste and/or Sanitize functions... rather than stripping all html.

Screenshots: easy to reproduce on editorjs.io

Device, Browser, OS: Macbook Pro, Mac OS 11.7, Chrome Version 108.0.5359.124 (Official Build) (x86_64)

Editor.js version: @latest as of 12/22/22

Plugins you use with their versions: Easily reproducable on editorjs.io

Thank you!!

Describe a bug.

Steps to reproduce: When I tried to release my app, the type check failed with following errors:

error TS1371: This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'.
1 import {BlockToolData} from '../tools';
node_modules/@editorjs/editorjs/types/configs/conversion-config.ts:1:9 - error TS1444: 'BlockToolData' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
1 import {BlockToolData} from '../tools';
          ~~~~~~~~~~~~~
Found 2 errors in the same file, starting at: node_modules/@editorjs/editorjs/types/configs/conversion-config.ts:1
ERROR: "type-check" exited with 1.

Expected behavior:

Screenshots: https://ibb.co/6vdy38T

Device, Browser, OS: Debian linux, Vite 2.9.9

Editor.js version: 2.26.4

Plugins you use with their versions: "@editorjs/header": "^2.6.2", "@editorjs/list": "^1.7.0", "@editorjs/paragraph": "^2.8.0", "@editorjs/table": "^2.1.0", "@editorjs/underline": "^1.0.0"

The question.

How to differentiate Block Update (vs) Block insert / delete.

Why and how the question has come up.

When block is updated using block.update(id, BlockToolData) - EditorJS onChange api gets called twice. once with blocked-removed and later with block-added events.

block-removed and block-added events are also fired when the blocks are deleted / added to the EditorJS instance.

Hence, from the onChange response, it is not possible to differentiate if block's content is updated or a new block is added / existing block is removed.