Merge branch 'next' into pr/2491

.github/workflows/create-a-release-draft.yml

@@ -36,11 +36,10 @@ jobs:
 
       # Stop workflow if version was not changed
       - name: Stop workflow if version was not changed
-        uses: actions/github-script@v3
+        uses: styfle/cancel-workflow-action@0.12.0
         if: steps.packageOld.outputs.version == steps.packageNew.outputs.version
         with:
-          script: |
-            core.setFailed('No version changes. ${{ steps.packageOld.outputs.version }}')
+          workflow_id: ${{ github.run_id }}
 
   # Create a new draft release
   release-draft:
@@ -118,4 +117,4 @@ jobs:
           webhook: ${{ secrets.CODEX_BOT_WEBHOOK_FRONTEND }}
           message: '🦥 [Draft release v${{ steps.package.outputs.version }}](${{ steps.create_release.outputs.html_url }}) for package [${{ steps.package.outputs.name }}](${{ steps.package.outputs.npmjs-link }}) has been created. Add changelog and publish it!'
           parse_mode: 'markdown'
-          disable_web_page_preview: true
+          disable_web_page_preview: true

.github/workflows/publish-package-to-npm.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       # Checkout to target branch
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           # Pull submodules
           submodules: 'recursive'
@@ -46,9 +46,11 @@ jobs:
   notify:
     needs: publish
     runs-on: ubuntu-latest
+    env:
+      GITHUB_LINK: ${{ github.server_url }}/${{ github.repository }}/releases/tag/${{ github.ref_name }}
     steps:
       # Checkout to target branch
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Get package info
         id: package
@@ -58,6 +60,6 @@ jobs:
         uses: codex-team/action-codexbot-notify@v1
         with:
           webhook: ${{ secrets.CODEX_BOT_NOTIFY_EDITORJS_PUBLIC_CHAT }}
-          message: '📦 [${{ steps.package.outputs.name }}](${{ steps.package.outputs.npmjs-link }}) ${{ steps.package.outputs.version }} was published'
+          message: '📦 [${{ steps.package.outputs.name }} ${{ steps.package.outputs.version }}](${{ env.GITHUB_LINK }}) was published'
           parse_mode: 'markdown'
-          disable_web_page_preview: true
+          disable_web_page_preview: true

docs/CHANGELOG.md

@@ -2,11 +2,23 @@
 
 ### 2.29.0
 
+- `New` — Editor Config now has the `style.nonce` attribute that could be used to allowlist editor style tag for Content Security Policy "style-src"
 - `Fix` — Passing an empty array via initial data or `blocks.render()` won't break the editor
 - `Fix` — Layout did not shrink when a large document cleared in Chrome
 - `Fix` — Multiple Tooltip elements creation fixed
 - `Fix` — When the focusing Block is out of the viewport, the page will be scrolled.
-- `Fix` - Resolve multple compiler errors from not importing as type
+- `Fix` - Compiler error "This import is never used as a value and must use 'import type'..." fixed
+- `Fix` — `blocks.render()` won't lead the `onChange` call in Safari
+- `Fix` — Editor wrapper element growing on the Inline Toolbar close
+- `Fix` — Fix errors thrown by clicks on a document when the editor is being initialized
+
+### 2.28.2
+
+- `Fix` — Get rid of redundant logs from the build
+
+### 2.28.1
+
+- `Fix` — Some Block were be skipped on saving after pasting them as HTML
 
 ### 2.28.0
 
@@ -32,6 +44,7 @@
 - `Improvement` - `blocks.update(id, data)` now will trigger onChange with only `block-change` event.
 - `Improvement` - `blocks.update(id, data)` will return a promise with BlockAPI object of the changed block.
 
+
 ### 2.27.2
 
 - `Fix` - `onChange` won't be called when element with data-mutation-free changes some attribute

docs/installation.md

@@ -69,7 +69,7 @@ Check [Editor.js's community](https://github.com/editor-js/) to see Tools exampl
 ## Create Editor instance
 
 Create an instance of Editor.js and pass [Configuration Object](../src/types-internal/editor-config.ts).
-At least the `holderId` option is required.
+At least the `holder` option is required.
 
 ```html
 <div id="editorjs"></div>
@@ -92,7 +92,7 @@ var editor = new EditorJS({
     /**
      * Create a holder for the Editor and pass its ID
      */
-    holderId : 'editorjs',
+    holder : 'editorjs',
 
     /**
      * Available Tools list.

docs/tools.md

@@ -70,7 +70,7 @@ to the `tools` property of Editor Config.
 
 ```javascript
 var editor = new EditorJS({
-  holderId : 'editorjs',
+  holder : 'editorjs',
   tools: {
     text: {
       class: Text,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/editorjs",
-  "version": "2.29.0-rc.1",
+  "version": "2.29.0-rc.6",
   "description": "Editor.js — Native JS, based on API and Open Source",
   "main": "dist/editorjs.umd.js",
   "module": "dist/editorjs.mjs",
@@ -44,7 +44,7 @@
     "@editorjs/code": "^2.7.0",
     "@editorjs/delimiter": "^1.2.0",
     "@editorjs/header": "^2.7.0",
-    "@editorjs/paragraph": "^2.10.0",
+    "@editorjs/paragraph": "^2.11.3",
     "@editorjs/simple-image": "^1.4.1",
     "@types/node": "^18.15.11",
     "chai-subset": "^1.6.0",

src/components/dom.ts

@@ -52,7 +52,7 @@ export default class Dom {
    * @param  {object} [attributes] - any attributes
    * @returns {HTMLElement}
    */
-  public static make(tagName: string, classNames: string | string[] = null, attributes: object = {}): HTMLElement {
+  public static make(tagName: string, classNames: string | string[] | null = null, attributes: object = {}): HTMLElement {
     const el = document.createElement(tagName);
 
     if (Array.isArray(classNames)) {

src/components/modules/blockManager.ts

@@ -399,7 +399,16 @@ export default class BlockManager extends Module {
     });
 
     try {
-      block.call(BlockToolAPI.ON_PASTE, pasteEvent);
+      /**
+       * We need to call onPaste after Block will be ready
+       * because onPaste could change tool's root element, and we need to do that after block.watchBlockMutations() bound
+       * to detect tool root element change
+       *
+       * @todo make this.insert() awaitable and remove requestIdleCallback
+       */
+      window.requestIdleCallback(() => {
+        block.call(BlockToolAPI.ON_PASTE, pasteEvent);
+      });
     } catch (e) {
       _.log(`${toolName}: onPaste callback call is failed`, 'error', e);
     }
@@ -735,7 +744,11 @@ export default class BlockManager extends Module {
    * @param {Node} childNode - node to get Block by
    * @returns {Block}
    */
-  public getBlockByChildNode(childNode: Node): Block {
+  public getBlockByChildNode(childNode: Node): Block | undefined {
+    if (!childNode || childNode instanceof Node === false) {
+      return undefined;
+    }
+
     /**
      * If node is Text TextNode
      */

src/components/modules/crossBlockSelection.ts

@@ -187,6 +187,13 @@ export default class CrossBlockSelection extends Module {
   private onMouseOver = (event: MouseEvent): void => {
     const { BlockManager, BlockSelection } = this.Editor;
 
+    /**
+     * Probably, editor is not initialized yet
+     */
+    if (event.relatedTarget === null && event.target === null) {
+      return;
+    }
+
     const relatedBlock = BlockManager.getBlockByChildNode(event.relatedTarget as Node) || this.lastSelectedBlock;
     const targetBlock = BlockManager.getBlockByChildNode(event.target as Node);
 

src/components/modules/toolbar/blockSettings.ts

@@ -13,7 +13,10 @@ import Popover, { PopoverEvent } from '../../utils/popover';
  * HTML Elements that used for BlockSettings
  */
 interface BlockSettingsNodes {
-  wrapper: HTMLElement;
+  /**
+   * Block Settings wrapper. Undefined when before "make" method called
+   */
+  wrapper: HTMLElement | undefined;
 }
 
 /**

src/components/modules/toolbar/index.ts

@@ -32,12 +32,12 @@ import { BlockHovered } from '../../events/BlockHovered';
  * HTML Elements used for Toolbar UI
  */
 interface ToolbarNodes {
-  wrapper: HTMLElement;
-  content: HTMLElement;
-  actions: HTMLElement;
+  wrapper: HTMLElement | undefined;
+  content: HTMLElement | undefined;
+  actions: HTMLElement | undefined;
 
-  plusButton: HTMLElement;
-  settingsToggler: HTMLElement;
+  plusButton: HTMLElement | undefined;
+  settingsToggler: HTMLElement | undefined;
 }
 /**
  *
@@ -316,7 +316,7 @@ export default class Toolbar extends Module<ToolbarNodes> {
       return;
     }
 
-    this.nodes.wrapper.classList.remove(this.CSS.toolbarOpened);
+    this.nodes.wrapper?.classList.remove(this.CSS.toolbarOpened);
 
     /** Close components */
     this.blockActions.hide();

src/components/modules/toolbar/inline.ts

@@ -17,16 +17,16 @@ import { IconChevronDown } from '@codexteam/icons';
  * Inline Toolbar elements
  */
 interface InlineToolbarNodes {
-  wrapper: HTMLElement;
-  togglerAndButtonsWrapper: HTMLElement;
-  buttons: HTMLElement;
-  conversionToggler: HTMLElement;
-  conversionTogglerContent: HTMLElement;
+  wrapper: HTMLElement | undefined;
+  togglerAndButtonsWrapper: HTMLElement | undefined;
+  buttons: HTMLElement | undefined;
+  conversionToggler: HTMLElement | undefined;
+  conversionTogglerContent: HTMLElement | undefined;
   /**
    * Zone below the buttons where Tools can create additional actions by 'renderActions()' method
    * For example, input for the 'link' tool or textarea for the 'comment' tool
    */
-  actions: HTMLElement;
+  actions: HTMLElement | undefined;
 }
 
 /**
@@ -238,6 +238,10 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
    * @param {Node} node — node to check
    */
   public containsNode(node: Node): boolean {
+    if (this.nodes.wrapper === undefined) {
+      return false;
+    }
+
     return this.nodes.wrapper.contains(node);
   }
 
@@ -379,8 +383,8 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
       this.CSS.inlineToolbarRightOriented
     );
 
-    this.nodes.wrapper.style.left = 'unset';
-    this.nodes.wrapper.style.top = 'unset';
+    this.nodes.wrapper.style.left = '0';
+    this.nodes.wrapper.style.top = '0';
   }
 
   /**

src/components/modules/ui.ts

@@ -150,12 +150,20 @@ export default class UI extends Module<UINodes> {
      */
     if (!readOnlyEnabled) {
       /**
-       * Unbind all events
+       * Postpone events binding to the next tick to make sure all ui elements are ready
        */
-      this.enableModuleBindings();
+      window.requestIdleCallback(() => {
+        /**
+         * Bind events for the UI elements
+         */
+        this.enableModuleBindings();
+      }, {
+        timeout: 2000,
+      });
     } else {
       /**
-       * Bind events for the UI elements
+       * Unbind all events
+       *
        */
       this.disableModuleBindings();
     }
@@ -294,6 +302,15 @@ export default class UI extends Module<UINodes> {
       textContent: styles.toString(),
     });
 
+    /**
+     * If user enabled Content Security Policy, he can pass nonce through the config
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce
+     */
+    if (this.config.style && !_.isEmpty(this.config.style) && this.config.style.nonce) {
+      tag.setAttribute('nonce', this.config.style.nonce);
+    }
+
     /**
      * Append styles at the top of HEAD tag
      */
@@ -624,8 +641,8 @@ export default class UI extends Module<UINodes> {
      * But allow clicking inside Block Settings.
      * Also, do not process clicks on the Block Settings Toggler, because it has own click listener
      */
-    const isClickedInsideBlockSettings = this.Editor.BlockSettings.nodes.wrapper.contains(target);
-    const isClickedInsideBlockSettingsToggler = this.Editor.Toolbar.nodes.settingsToggler.contains(target);
+    const isClickedInsideBlockSettings = this.Editor.BlockSettings.nodes.wrapper?.contains(target);
+    const isClickedInsideBlockSettingsToggler = this.Editor.Toolbar.nodes.settingsToggler?.contains(target);
     const doNotProcess = isClickedInsideBlockSettings || isClickedInsideBlockSettingsToggler;
 
     if (this.Editor.BlockSettings.opened && !doNotProcess) {

test/cypress/tests/copy-paste.cy.ts

@@ -1,8 +1,10 @@
 import Header from '@editorjs/header';
 import Image from '@editorjs/simple-image';
 import * as _ from '../../../src/components/utils';
-import { BlockTool, BlockToolData } from '../../../types';
+import { BlockTool, BlockToolData, OutputData } from '../../../types';
 import $ from '../../../src/components/dom';
+import type EditorJS from '../../../types/index';
+
 
 describe('Copy pasting from Editor', function () {
   context('pasting', function () {
@@ -111,7 +113,7 @@ describe('Copy pasting from Editor', function () {
         tools: {
           header: Header,
         },
-      });
+      }).as('editorInstance');
 
       cy.get('[data-cy=editorjs]')
         .get('div.ce-block')
@@ -121,13 +123,38 @@ describe('Copy pasting from Editor', function () {
           'text/html': '<h2>First block</h2><p>Second block</p>',
         });
 
+      /**
+       * Check inserted blocks
+       */
       cy.get('[data-cy=editorjs]')
         .get('h2.ce-header')
         .should('contain', 'First block');
 
       cy.get('[data-cy=editorjs]')
         .get('div.ce-paragraph')
         .should('contain', 'Second block');
+
+      /**
+       * Check saved data as well
+       */
+      cy.get<EditorJS>('@editorInstance')
+        .then(async (editor) => {
+          cy.wrap<OutputData>(await editor.save())
+            .then((data) => {
+              /**
+               * <h2> has been correctly saved
+               */
+              expect(data.blocks[0].type).to.eq('header');
+              expect(data.blocks[0].data.text).to.eq('First block');
+              expect(data.blocks[0].data.level).to.eq(2);
+
+              /**
+               * <p> has been correctly saved
+               */
+              expect(data.blocks[1].type).to.eq('paragraph');
+              expect(data.blocks[1].data.text).to.eq('Second block');
+            });
+        });
     });
 
     it('should parse pattern', function () {