diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 3cb084c9..00000000 --- a/.babelrc +++ /dev/null @@ -1,19 +0,0 @@ -{ - "presets": [ - ["@babel/preset-env", { - "modules": "umd", - "useBuiltIns": "entry", - "corejs": 3 - }] - ], - "plugins": [ - "babel-plugin-add-module-exports", - "babel-plugin-class-display-name", - "@babel/plugin-transform-runtime" - ], - "env": { - "test": { - "plugins": [ "istanbul" ] - } - } -} diff --git a/.eslintrc b/.eslintrc index ef566548..41bddb05 100644 --- a/.eslintrc +++ b/.eslintrc @@ -31,6 +31,8 @@ "ClientRect": true, "ArrayLike": true, "InputEvent": true, - "unknown": true + "unknown": true, + "requestAnimationFrame": true, + "navigator": true } } diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml index 78639a6c..d7b90d07 100644 --- a/.github/FUNDING.yml +++ b/.github/FUNDING.yml @@ -1,5 +1,5 @@ # These are supported funding model platforms -github: neSpecc patreon: editorjs open_collective: editorjs +custom: https://codex.so/donate \ No newline at end of file diff --git a/.github/workflows/bump-version-on-merge-next.yml b/.github/workflows/bump-version-on-merge-next.yml index d1e94ea0..3cfa5e1c 100644 --- a/.github/workflows/bump-version-on-merge-next.yml +++ b/.github/workflows/bump-version-on-merge-next.yml @@ -11,6 +11,8 @@ jobs: check-for-no-version-changing: if: github.event.pull_request.merged == true runs-on: ubuntu-latest + permissions: + actions: write steps: # Checkout to target branch - uses: actions/checkout@v2 @@ -32,16 +34,22 @@ jobs: uses: codex-team/action-nodejs-package-info@v1 # Stop workflow and do not bump version if it was changed already - - name: Stop workflow and do not bump version if it was changed already - uses: actions/github-script@v3 + - name: Stop workflow if version was changed already if: steps.packageOld.outputs.version != steps.packageNew.outputs.version - with: - script: | - core.setFailed('Version was changed! ${{ steps.packageOld.outputs.version }} -> ${{ steps.packageNew.outputs.version }}') + run: | + curl -L \ + -X POST \ + -H "Accept: application/vnd.github+json" \ + -H "Authorization: Bearer ${{ secrets.GITHUB_TOKEN }}" \ + -H "X-GitHub-Api-Version: 2022-11-28" \ + https://api.github.com/repos/${{ github.repository }}/actions/runs/${{ github.run_id }}/cancel bump-version: needs: check-for-no-version-changing runs-on: ubuntu-latest + permissions: + contents: write + pull-requests: write steps: # Checkout to target branch - uses: actions/checkout@v2 @@ -49,8 +57,7 @@ jobs: # Setup node environment - uses: actions/setup-node@v1 with: - node-version: 15 - registry-url: https://registry.npmjs.org/ + node-version: 16 # Bump version to the next prerelease (patch) with rc suffix - name: Suggest the new version diff --git a/.github/workflows/create-a-release-draft.yml b/.github/workflows/create-a-release-draft.yml index 4016b7b8..c4c5d332 100644 --- a/.github/workflows/create-a-release-draft.yml +++ b/.github/workflows/create-a-release-draft.yml @@ -11,7 +11,12 @@ jobs: check-version-changing: if: github.event.pull_request.merged == true runs-on: ubuntu-latest + permissions: + actions: write steps: + - uses: actions/setup-node@v3 + with: + node-version: 16 # Checkout to target branch - uses: actions/checkout@v2 with: @@ -33,16 +38,21 @@ jobs: # Stop workflow if version was not changed - name: Stop workflow if version was not changed - uses: actions/github-script@v3 if: steps.packageOld.outputs.version == steps.packageNew.outputs.version - with: - script: | - core.setFailed('No version changes. ${{ steps.packageOld.outputs.version }}') + run: | + curl -L \ + -X POST \ + -H "Accept: application/vnd.github+json" \ + -H "Authorization: Bearer ${{ secrets.GITHUB_TOKEN }}" \ + -H "X-GitHub-Api-Version: 2022-11-28" \ + https://api.github.com/repos/${{ github.repository }}/actions/runs/${{ github.run_id }}/cancel # Create a new draft release release-draft: needs: check-version-changing runs-on: ubuntu-latest + permissions: + contents: write steps: # Checkout to target branch - uses: actions/checkout@v2 @@ -53,8 +63,7 @@ jobs: # Setup node environment - uses: actions/setup-node@v1 with: - node-version: 14.17.0 - registry-url: https://registry.npmjs.org/ + node-version: 16 # Prepare, build and publish project - name: Install dependencies @@ -87,16 +96,27 @@ jobs: # If version name contains "-rc" suffix than mark a "pre-release" checkbox prerelease: ${{ contains(steps.package.outputs.version, '-rc') }} - # Build and upload target Editor.js build to release as artifact + # Build and upload target Editor.js UMD build to release as artifact - name: Upload Release Asset uses: actions/upload-release-asset@v1 env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: upload_url: ${{ steps.create_release.outputs.upload_url }} - asset_path: dist/editor.js - asset_name: editor.js + asset_path: dist/editorjs.umd.js + asset_name: editorjs.umd.js asset_content_type: application/javascript + + # Build and upload target Editor.js MJS build to release as artifact + - name: Upload Release Asset + uses: actions/upload-release-asset@v1 + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + with: + upload_url: ${{ steps.create_release.outputs.upload_url }} + asset_path: dist/editorjs.mjs + asset_name: editorjs.mjs + asset_content_type: application/javascript # Send a notification message - name: Send a message @@ -105,4 +125,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 \ No newline at end of file diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml index ee311b35..3d9c50a1 100644 --- a/.github/workflows/cypress.yml +++ b/.github/workflows/cypress.yml @@ -1,36 +1,21 @@ -name: Tests +name: Cypress + on: [pull_request] + jobs: - firefox: - runs-on: ubuntu-latest - container: - image: cypress/browsers:node14.17.0-chrome88-ff89 - options: --user 1001 - steps: - - uses: actions/checkout@v2 - - run: yarn ci:pull_paragraph - - uses: cypress-io/github-action@v2 - with: - config: video=false - browser: firefox - build: yarn build - chrome: + run-tests: + strategy: + matrix: + browser: [firefox, chrome, edge] + runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 - - run: yarn ci:pull_paragraph - - uses: cypress-io/github-action@v2 + - uses: actions/setup-node@v3 + with: + node-version: 16 + - uses: actions/checkout@v3 + - uses: cypress-io/github-action@v5 with: config: video=false - browser: chrome - build: yarn build - edge: - runs-on: windows-latest - steps: - - uses: actions/checkout@v2 - - run: yarn ci:pull_paragraph - - uses: cypress-io/github-action@v2 - with: - config: video=false - browser: edge - build: yarn build + browser: ${{ matrix.browser }} + build: yarn build:test diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml index 052c6835..47d1e3a9 100644 --- a/.github/workflows/eslint.yml +++ b/.github/workflows/eslint.yml @@ -19,6 +19,5 @@ jobs: ${{ runner.OS }}-build- ${{ runner.OS }}- - - run: yarn install - + - run: yarn - run: yarn lint diff --git a/.github/workflows/publish-package-to-npm.yml b/.github/workflows/publish-package-to-npm.yml index a614f700..41d5131e 100644 --- a/.github/workflows/publish-package-to-npm.yml +++ b/.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' @@ -22,7 +22,7 @@ jobs: # Setup node environment - uses: actions/setup-node@v1 with: - node-version: 14.17.0 + node-version: 16 registry-url: https://registry.npmjs.org/ # Prepare, build and publish project @@ -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 \ No newline at end of file diff --git a/.gitmodules b/.gitmodules index ad185a9e..66320775 100644 --- a/.gitmodules +++ b/.gitmodules @@ -16,9 +16,6 @@ [submodule "example/tools/simple-image"] path = example/tools/simple-image url = https://github.com/editor-js/simple-image -[submodule "src/tools/paragraph"] - path = src/tools/paragraph - url = https://github.com/editor-js/paragraph [submodule "example/tools/marker"] path = example/tools/marker url = https://github.com/editor-js/marker diff --git a/.npmignore b/.npmignore index 98ed3edf..c549183e 100644 --- a/.npmignore +++ b/.npmignore @@ -1,22 +1,6 @@ -.idea -.github -docs -example -src -test -.babelrc -.editorconfig -.eslintignore -.eslintrc -.git -.gitmodules -.jshintrc -.postcssrc.yml -.stylelintrc -CODEOWNERS -cypress.json -tsconfig.json -tslint.json -webpack.config.js -yarn.lock -devserver.js +* +!/dist/**/* +!/types/**/* +!/LICENSE +!/README.md +!/package.json diff --git a/.postcssrc.yml b/.postcssrc.yml index b2a67d58..c52a3b2a 100644 --- a/.postcssrc.yml +++ b/.postcssrc.yml @@ -1,8 +1,4 @@ plugins: - # Consumes files by @import rule - # https://github.com/postcss/postcss-import - postcss-import: {} - # Apply custom property sets via @apply rule # https://github.com/pascalduez/postcss-apply postcss-apply: {} @@ -26,16 +22,6 @@ plugins: # https://github.com/csstools/postcss-preset-env#preserve preserve: false - # Enable or disable specific polyfills - # https://github.com/csstools/postcss-preset-env#features - # - # List of available plugins - # https://github.com/csstools/postcss-preset-env/blob/master/src/lib/plugins-by-id.js - features: - # Modify colors using the color-mod() function in CSS - # https://github.com/jonathantneal/postcss-color-mod-function - color-mod-function: {} - # Nested rules unwrapper # https://github.com/postcss/postcss-nested # @@ -43,7 +29,3 @@ plugins: # 'postcss-nesting' feature but it does not work with BEM # Report: https://github.com/csstools/postcss-preset-env/issues/40 postcss-nested: {} - - # Compression tool - # https://github.com/cssnano/cssnano - cssnano: {} diff --git a/.vscode/settings.json b/.vscode/settings.json index 8b3ac96d..5d01b0ef 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -8,6 +8,7 @@ "colspan", "contenteditable", "contentless", + "Convertable", "cssnano", "cssnext", "Debouncer", @@ -34,6 +35,7 @@ "textareas", "twitterwidget", "typeof", + "Unmergeable", "viewports" ] } diff --git a/cypress.config.ts b/cypress.config.ts new file mode 100644 index 00000000..ed8fa795 --- /dev/null +++ b/cypress.config.ts @@ -0,0 +1,33 @@ +import { defineConfig } from 'cypress'; + +export default defineConfig({ + env: { + NODE_ENV: 'test', + }, + fixturesFolder: 'test/cypress/fixtures', + screenshotsFolder: 'test/cypress/screenshots', + video: false, + videosFolder: 'test/cypress/videos', + e2e: { + // We've imported your old cypress plugins here. + // You may want to clean this up later by importing these. + setupNodeEvents(on, config) { + /** + * Plugin for cypress that adds better terminal output for easier debugging. + * Prints cy commands, browser console logs, cy.request and cy.intercept data. Great for your pipelines. + * https://github.com/archfz/cypress-terminal-report + */ + require('cypress-terminal-report/src/installLogsPrinter')(on); + + require('./test/cypress/plugins/index.ts')(on, config); + }, + specPattern: 'test/cypress/tests/**/*.cy.{js,jsx,ts,tsx}', + supportFile: 'test/cypress/support/index.ts', + }, + 'retries': { + // Configure retry attempts for `cypress run` + 'runMode': 2, + // Configure retry attempts for `cypress open` + 'openMode': 0, + }, +}); diff --git a/cypress.json b/cypress.json deleted file mode 100644 index 2bed0b88..00000000 --- a/cypress.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "env": { - "NODE_ENV": "test" - }, - "fixturesFolder": "test/cypress/fixtures", - "integrationFolder": "test/cypress/tests", - "screenshotsFolder": "test/cypress/screenshots", - "videosFolder": "test/cypress/videos", - "supportFile": "test/cypress/support/index.ts", - "pluginsFile": "test/cypress/plugins/index.ts" -} diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 6da828b7..0a1108fc 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -1,9 +1,98 @@ # Changelog +### 2.29.1 + +- `Fix` — Toolbox wont be shown when Slash pressed with along with Shift or Alt +- `Fix` — Toolbox will be opened when Slash pressed in non-US keyboard layout where there is no physical '/' key. + +### 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" +- `New` — Toolbox now will be opened by '/' in empty Block instead of Tab +- `New` — Block Tunes now will be opened by 'CMD+/' instead of Tab in non-empty block +- `New` — Tab now will navigate through Blocks. In last block Tab will navigate to the next input on page. +- `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` - 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 +- `Fix` — Caret losing on Mobile Devices when adding a block via Toolbox or via Backspace at the beginning of a Block +- `Improvement` — Now you can set focus via arrows/Tab to "contentless" (decorative) blocks like Delimiter which have no inputs. +- `Improvement` — Inline Toolbar sometimes opened in an incorrect position. Now it will be aligned by the left side of the selected text. And won't overflow the right side of the text column. +- `Improvement` - Now the `data-mutation-free` supports deep nesting, so you can mark some element with it to prevent the onChange call caused by child element mutating +- `Improvement` - Now the `data-mutation-free` also allows to skip "characterData" mutations (eg. text content change) +- `Refactoring` — `ce-block--focused` class toggling removed as unused. + +### 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 + +- `New` - Block ids now displayed in DOM via a data-id attribute. Could be useful for plugins that want to access a Block's element by id. +- `New` - The `blocks.convert(blockId, newType)` API method was added. It allows to convert existing Block to a Block of another type. +- `New` - The `blocks.insertMany()` API method added. It allows to insert several Blocks to the specified index. +- `Improvement` - The Delete keydown at the end of the Block will now work opposite a Backspace at the start. Next Block will be removed (if empty) or merged with the current one. +- `Improvement` - The Delete keydown will work like a Backspace when several Blocks are selected. +- `Improvement` - If we have two empty Blocks, and press Backspace at the start of the second one, the previous will be removed instead of the current. +- `Improvement` - Tools shortcuts could be used to convert one Block to another. +- `Improvement` - Tools shortcuts displayed in the Conversion Toolbar +- `Improvement` - Initialization Loader has been removed. +- `Improvement` - Selection style won't override your custom style for `::selection` outside the editor. +- `Improvement` - Performance optimizations: initialization speed increased, `blocks.render()` API method optimized. Big documents will be displayed faster. +- `Improvement` - "Editor saving" log removed +- `Improvement` - "I'm ready" log removed +- `Improvement` - The stub-block style is simplified. +- `Improvement` - If some Block's tool throws an error during construction, we will show Stub block instead of skipping it during render +- `Improvement` - Call of `blocks.clear()` now will trigger onChange with "block-removed" event for all removed blocks. +- `Improvement` - The `blocks.clear()` now can be awaited. +- `Improvement` - `BlockMutationType` and `BlockMutationEvent` types exported +- `Improvement` - `blocks.update(id, data)` now can accept partial data object — it will update only passed properties, others will remain the same. +- `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 + +### 2.27.1 + +- `Fix` - `onChange` will be called on removing the whole text in a block + ### 2.27.0 -- `Refactoring` — Popover class refactored. +- `New` — *Toolbar API* — Added a new method for toggling the toolbox. +- `New` — Added types for block mutation events +- `New` — Batching added to the `onChange` callback. Now the second argument can contain an array of CustomEvents as well as a single one. Multiple changes made in a short period of time will be batched under a single `onChange` call. - `Improvement` — *Toolbox* — Number of `close()` method calls optimized. +- `Improvement` — The `onChange` callback can be muted if all mutations contain nodes with the `data-mutation-free` attribute. +- `Improvement` — Pressing "Enter" at the end of a Block won't lead to redundant `block-changed` event triggering. Only `block-added` event will be dispatched. +- `Improvement` — The block mutation handler is now called on every block change (including background changes), instead of only when a block is focused +- `Improvement` — Number of caret saving method calls optimized for Block Tunes opening/closing. +- `Improvement` — Package size reduced by removing redundant files. +- `Refactoring` — Switched from Webpack to Vite as the build system. +- `Refactoring` — *Dependencies* — Upgraded Cypress to v12 and related libraries to the latest versions. +- `Refactoring` — *Dependencies* — Upgraded TypeScript to v5. +- `Refactoring` — `EventDispatcher` types improved. Now we can pass `EventsMap` via generic to specify a map of event names and their payloads that can be used in a particular EventDispatcher instance. +- `Refactoring` — All events in common editor Event Bus now have own type declarations. +- `Refactoring` — Removed the block mutation observer from blocks and attached a single observer to the editor's blocks wrapper element. +- `Refactoring` — Removed the debounce from the block mutation handler and used batching instead. +- `Refactoring` — Refactored the popover class for better performance and maintenance. +- `Fix` — The `onChange` callback won't trigger when block tunes are opened or closed. +- `Fix` — Resolved a compiler error caused by importing the `BlockToolData` type. +- `Fix` — Resolved a problem where the document would scroll to the beginning after moving a block above the viewport. +- `Fix`- Fixed several bugs caused by browser extensions — Removed the search for a block's container in the DOM on saving and kept it in memory instead, updating it when the tool changes a container element. +- `Fix` — *ToolsAPI* — `pasteConfig` getter with `false` value could be used to disable paste handling by Editor.js core. Could be useful if your tool has its own paste handler. +- `CI` — Ubuntu container is now used for Edge tests runner. +- `CI` — Node 16 is used for GitHib Actions. ### 2.26.5 @@ -44,6 +133,7 @@ - `Improvement` — *CodeStyle* — [CodeX ESLint Config](https://github.com/codex-team/eslint-config) has bee updated. All ESLint/Spelling issues resolved - `Improvement` — *ToolsAPI* — The `icon` property of the `toolbox` getter became optional. + ### 2.25.0 - `New` — *Tools API* — Introducing new feature — toolbox now can have multiple entries for one tool!
diff --git a/docs/api.md b/docs/api.md index 3f009185..3111cbf8 100644 --- a/docs/api.md +++ b/docs/api.md @@ -180,7 +180,7 @@ this.api.notifier.show({ }); ``` -![](https://capella.pics/14fcdbe4-d6eb-41d4-b66e-e0e86ccf1a4b.jpg) +![](assets/14fcdbe4-d6eb-41d4-b66e-e0e86ccf1a4b.jpg) Check out [`codex-notifier` package page](https://github.com/codex-team/js-notifier) on GitHub to find docs, params and examples. @@ -203,8 +203,6 @@ After executing the `destroy` method, editor inctance becomes an empty object. T Methods for showing Tooltip helper near your elements. Parameters are the same as in [CodeX Tooltips](http://github.com/codex-team/codex.tooltips) lib. -![](https://capella.pics/00e7094a-fdb9-429b-8015-9c56f19b4ef5.jpg) - #### Show Method shows tooltip with custom content on passed element diff --git a/docs/assets/01a55381-46cd-47c7-b92e-34765434f2ca.jpg b/docs/assets/01a55381-46cd-47c7-b92e-34765434f2ca.jpg new file mode 100644 index 00000000..cd81469f Binary files /dev/null and b/docs/assets/01a55381-46cd-47c7-b92e-34765434f2ca.jpg differ diff --git a/docs/assets/14fcdbe4-d6eb-41d4-b66e-e0e86ccf1a4b.jpg b/docs/assets/14fcdbe4-d6eb-41d4-b66e-e0e86ccf1a4b.jpg new file mode 100644 index 00000000..803ac028 Binary files /dev/null and b/docs/assets/14fcdbe4-d6eb-41d4-b66e-e0e86ccf1a4b.jpg differ diff --git a/docs/assets/57267bab-f2f0-411b-a9d1-69abee6abab5.jpg b/docs/assets/57267bab-f2f0-411b-a9d1-69abee6abab5.jpg new file mode 100644 index 00000000..beb554a8 Binary files /dev/null and b/docs/assets/57267bab-f2f0-411b-a9d1-69abee6abab5.jpg differ diff --git a/docs/assets/6c1f708b-a30c-4ffd-a427-5b59a1a472e0.jpg b/docs/assets/6c1f708b-a30c-4ffd-a427-5b59a1a472e0.jpg new file mode 100644 index 00000000..a0018baa Binary files /dev/null and b/docs/assets/6c1f708b-a30c-4ffd-a427-5b59a1a472e0.jpg differ diff --git a/docs/assets/796de9eb-bbe0-485c-bc8f-9a4cb76641b7.jpg b/docs/assets/796de9eb-bbe0-485c-bc8f-9a4cb76641b7.jpg new file mode 100644 index 00000000..b05ac15a Binary files /dev/null and b/docs/assets/796de9eb-bbe0-485c-bc8f-9a4cb76641b7.jpg differ diff --git a/docs/assets/79ce946a-d636-41cd-aa96-d3bc5ecfde03.jpg b/docs/assets/79ce946a-d636-41cd-aa96-d3bc5ecfde03.jpg new file mode 100644 index 00000000..8430c5f9 Binary files /dev/null and b/docs/assets/79ce946a-d636-41cd-aa96-d3bc5ecfde03.jpg differ diff --git a/docs/assets/7ccbcfcd-1c49-4674-bea7-71021468a1bd.jpg b/docs/assets/7ccbcfcd-1c49-4674-bea7-71021468a1bd.jpg new file mode 100644 index 00000000..f5960e89 Binary files /dev/null and b/docs/assets/7ccbcfcd-1c49-4674-bea7-71021468a1bd.jpg differ diff --git a/docs/installation.md b/docs/installation.md index 6d90c635..6ee6b19a 100644 --- a/docs/installation.md +++ b/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
@@ -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. diff --git a/docs/releases.md b/docs/releases.md index 675aaac6..a0fc44d7 100644 --- a/docs/releases.md +++ b/docs/releases.md @@ -33,7 +33,7 @@ There is a [workflow](.github/workflows/publish-package-to-npm.yml) that fired o Use target version changelog as a description. -![](https://capella.pics/57267bab-f2f0-411b-a9d1-69abee6abab5.jpg) +![](assets/57267bab-f2f0-411b-a9d1-69abee6abab5.jpg) Then you can publish the release and wait for package publishing via action. @@ -44,7 +44,7 @@ This package version will be published to NPM with default `latest` tag. If you want to publish release candidate version, use suffix `-rc.*` for package version in package.json file and in tag on releases page. Workflow will detect it and mark a release as "pre-release". -![](https://capella.pics/796de9eb-bbe0-485c-bc8f-9a4cb76641b7.jpg) +![](assets/796de9eb-bbe0-485c-bc8f-9a4cb76641b7.jpg) This package version will be published to NPM with `next` tag. diff --git a/docs/tools-inline.md b/docs/tools-inline.md index d76e3530..604a5e4c 100644 --- a/docs/tools-inline.md +++ b/docs/tools-inline.md @@ -129,8 +129,6 @@ Read more about Sanitizer configuration at the [Tools#sanitize](tools.md#sanitiz You can pass your Tool's title via `title` static getter. It can be used, for example, in the Tooltip with icon description that appears by hover. -![](https://capella.pics/00e7094a-fdb9-429b-8015-9c56f19b4ef5.jpg) - ```ts export default class BoldInlineTool implements InlineTool { /** diff --git a/docs/tools.md b/docs/tools.md index 7df5ceb6..7cc4fd21 100644 --- a/docs/tools.md +++ b/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, @@ -410,7 +410,7 @@ static get sanitize() { Editor.js has a Conversion Toolbar that allows user to convert one Block to another. -![](https://capella.pics/6c1f708b-a30c-4ffd-a427-5b59a1a472e0.jpg) +![](assets/6c1f708b-a30c-4ffd-a427-5b59a1a472e0.jpg) 1. You can add ability to your Tool to be converted. Specify «export» property of `conversionConfig`. 2. You can add ability to convert other Tools to your Tool. Specify «import» property of `conversionConfig`. diff --git a/docs/usage.md b/docs/usage.md index 5bb43c08..f1fb4dd9 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -17,12 +17,12 @@ So how to use the Editor after [Installation](installation.md). - Select text fragment and apply a style or insert a link from the Inline Toolbar -![](https://capella.pics/7ccbcfcd-1c49-4674-bea7-71021468a1bd.jpg) +![](assets/7ccbcfcd-1c49-4674-bea7-71021468a1bd.jpg) - Use «three-dots» button on the right to open Block Settings. From here, you can move and delete a Block or apply Tool's settings, if it provided. For example, set a Heading level or List style. -![](https://capella.pics/01a55381-46cd-47c7-b92e-34765434f2ca.jpg) +![](assets/01a55381-46cd-47c7-b92e-34765434f2ca.jpg) ## Shortcuts diff --git a/example/example-dev.html b/example/example-dev.html index f8687184..c1d38997 100644 --- a/example/example-dev.html +++ b/example/example-dev.html @@ -10,8 +10,8 @@ Editor.js 🤩🧦🤨 example - - + + @@ -107,7 +107,7 @@ - + + + @@ -61,7 +61,7 @@ - + + diff --git a/example/example-popup.html b/example/example-popup.html index 2579d27b..e59fd6cd 100644 --- a/example/example-popup.html +++ b/example/example-popup.html @@ -9,7 +9,7 @@ Editor.js 🤩🧦🤨 example: Popup - + @@ -111,7 +111,7 @@ - + diff --git a/example/example-rtl.html b/example/example-rtl.html index 298381dc..abeab23b 100644 --- a/example/example-rtl.html +++ b/example/example-rtl.html @@ -9,8 +9,8 @@ Editor.js RTL example - - + + @@ -70,7 +70,7 @@ - + + + diff --git a/index.html b/index.html new file mode 100644 index 00000000..31b8c2b8 --- /dev/null +++ b/index.html @@ -0,0 +1,413 @@ + + + + + Editor.js 🤩🧦🤨 example + + + + + + + +
+
+ + +
+ Plugins + Usage + Configuration + API +
+
+
+
+
+ editor.save() +
+
+
+ Readonly: + + Off + +   +
+ toggle +
+
+
+
+ Show + blocks boundaries +
+
+
+
+ Enable + thin mode +
+
+
+
+
+
+
+
+
+ 

+
+      

+        Made by CodeX
+      

+    

+  

+
+
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+
+  
+  
+
+  
+  
+
+
diff --git a/package.json b/package.json
index 2ed6dba1..d00b8af2 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,9 @@
 {
   "name": "@editorjs/editorjs",
-  "version": "2.27.0-rc.0",
+  "version": "2.29.1",
   "description": "Editor.js — Native JS, based on API and Open Source",
-  "main": "dist/editor.js",
+  "main": "dist/editorjs.umd.js",
+  "module": "dist/editorjs.mjs",
   "types": "./types/index.d.ts",
   "keywords": [
     "codex editor",
@@ -12,16 +13,13 @@
     "editorjs"
   ],
   "scripts": {
-    "clear": "rimraf dist && mkdirp dist",
-    "build": "yarn clear && yarn build:webpack:prod",
-    "build:dev": "yarn clear && yarn build:webpack:dev",
-    "build:webpack:dev": "webpack --mode development --progress --display-error-details --display-entrypoints --watch",
-    "build:webpack:prod": "webpack --mode production",
+    "dev": "vite",
+    "build": "vite build --mode production",
+    "build:test": "vite build --mode test",
     "lint": "eslint src/ --ext .ts && yarn lint:tests",
     "lint:errors": "eslint src/ --ext .ts --quiet",
     "lint:fix": "eslint src/ --ext .ts --fix",
     "lint:tests": "eslint test/ --ext .ts",
-    "ci:pull_paragraph": "git submodule update --init ./src/tools/paragraph",
     "pull_tools": "git submodule update --init --recursive",
     "_tools:checkout": "git submodule foreach \"git checkout master || git checkout main\"",
     "_tools:pull": "git submodule foreach git pull",
@@ -29,8 +27,8 @@
     "_tools:build": "git submodule foreach yarn build",
     "_tools:make": "yarn _tools:yarn && yarn _tools:build",
     "tools:update": "yarn _tools:checkout && yarn _tools:pull && yarn _tools:make",
-    "test:e2e": "yarn build && cypress run",
-    "test:e2e:open": "yarn build && cypress open",
+    "test:e2e": "yarn build:test && cypress run",
+    "test:e2e:open": "yarn build:test && cypress open",
     "devserver:start": "yarn build && node ./devserver.js"
   },
   "author": "CodeX",
@@ -40,64 +38,42 @@
     "url": "git+https://github.com/codex-team/editor.js.git"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/plugin-transform-runtime": "^7.9.0",
-    "@babel/polyfill": "^7.8.7",
-    "@babel/preset-env": "^7.9.5",
-    "@babel/preset-typescript": "^7.13.0",
-    "@babel/register": "^7.9.0",
-    "@babel/runtime": "^7.9.2",
+    "@babel/register": "^7.21.0",
+    "@codexteam/icons": "^0.3.0",
     "@codexteam/shortcuts": "^1.1.1",
-    "@cypress/code-coverage": "^3.9.2",
-    "@cypress/webpack-preprocessor": "^5.6.0",
+    "@cypress/code-coverage": "^3.10.3",
     "@editorjs/code": "^2.7.0",
     "@editorjs/delimiter": "^1.2.0",
-    "@editorjs/header": "^2.6.1",
+    "@editorjs/header": "^2.7.0",
+    "@editorjs/paragraph": "^2.11.3",
     "@editorjs/simple-image": "^1.4.1",
-    "@types/node": "^14.14.35",
-    "@types/webpack": "^4.41.12",
-    "@types/webpack-env": "^1.15.2",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-add-module-exports": "^1.0.0",
-    "babel-plugin-class-display-name": "^2.1.0",
-    "babel-plugin-istanbul": "^6.0.0",
-    "core-js": "3.6.5",
-    "css-loader": "^3.5.3",
-    "cssnano": "^4.1.10",
-    "cypress": "^6.8.0",
-    "cypress-intellij-reporter": "^0.0.6",
-    "eslint": "^8.28.0",
+    "@types/node": "^18.15.11",
+    "chai-subset": "^1.6.0",
+    "codex-notifier": "^1.1.2",
+    "codex-tooltip": "^1.0.5",
+    "core-js": "3.30.0",
+    "cypress": "^12.9.0",
+    "cypress-intellij-reporter": "^0.0.7",
+    "cypress-plugin-tab": "^1.0.5",
+    "cypress-terminal-report": "^5.3.2",
+    "eslint": "^8.37.0",
     "eslint-config-codex": "^1.7.1",
-    "eslint-loader": "^4.0.2",
     "eslint-plugin-chai-friendly": "^0.7.2",
-    "eslint-plugin-cypress": "^2.12.1",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "license-webpack-plugin": "^2.1.4",
-    "mkdirp": "^1.0.4",
+    "eslint-plugin-cypress": "2.12.1",
+    "html-janitor": "^2.0.4",
+    "nanoid": "^4.0.2",
     "postcss-apply": "^0.12.0",
-    "postcss-import": "^12.0.1",
-    "postcss-loader": "^3.0.0",
-    "postcss-nested": "^4.1.2",
-    "postcss-nested-ancestors": "^2.0.0",
-    "postcss-preset-env": "^6.6.0",
-    "rimraf": "^3.0.2",
-    "stylelint": "^13.3.3",
-    "terser-webpack-plugin": "^2.3.6",
-    "ts-loader": "^7.0.1",
+    "postcss-nested": "4.1.2",
+    "postcss-preset-env": "^8.3.0",
+    "rollup-plugin-license": "^3.0.1",
+    "stylelint": "^15.4.0",
     "tslint": "^6.1.1",
-    "typescript": "3.8.3",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "typescript": "5.0.3",
+    "vite": "^4.2.1",
+    "vite-plugin-css-injected-by-js": "^3.1.0"
   },
   "collective": {
     "type": "opencollective",
     "url": "https://opencollective.com/editorjs"
-  },
-  "dependencies": {
-    "@codexteam/icons": "0.1.0",
-    "codex-notifier": "^1.1.2",
-    "codex-tooltip": "^1.0.5",
-    "html-janitor": "^2.0.4",
-    "nanoid": "^3.1.22"
   }
 }
diff --git a/example/assets/codex2x.png b/public/assets/codex2x.png
similarity index 100%
rename from example/assets/codex2x.png
rename to public/assets/codex2x.png
diff --git a/example/assets/demo.css b/public/assets/demo.css
similarity index 100%
rename from example/assets/demo.css
rename to public/assets/demo.css
diff --git a/example/assets/json-preview.js b/public/assets/json-preview.js
similarity index 100%
rename from example/assets/json-preview.js
rename to public/assets/json-preview.js
diff --git a/src/codex.ts b/src/codex.ts
index 730e5b09..df3f56d6 100644
--- a/src/codex.ts
+++ b/src/codex.ts
@@ -7,20 +7,19 @@ import { EditorConfig } from '../types';
  */
 import '@babel/register';
 
-import 'components/polyfills';
+import './components/polyfills';
 import Core from './components/core';
 import * as _ from './components/utils';
+import { destroy as destroyTooltip } from './components/utils/tooltip';
 
 declare const VERSION: string;
 
 /**
  * Editor.js
  *
- * Short Description (눈_눈;)
- *
- * @version 2.18.0
  * @license Apache-2.0
- * @author CodeX-Team 
+ * @see Editor.js 
+ * @author CodeX Team 
  */
 export default class EditorJS {
   /**
@@ -69,6 +68,9 @@ export default class EditorJS {
      */
     this.isReady = editor.isReady.then(() => {
       this.exportAPI(editor);
+      /**
+       * @todo pass API as an argument. It will allow to use Editor's API when editor is ready
+       */
       onReady();
     });
   }
@@ -89,6 +91,8 @@ export default class EditorJS {
           moduleInstance.listeners.removeAll();
         });
 
+      destroyTooltip();
+
       editor = null;
 
       for (const field in this) {
diff --git a/src/components/__module.ts b/src/components/__module.ts
index c5391422..4ad521ad 100644
--- a/src/components/__module.ts
+++ b/src/components/__module.ts
@@ -3,6 +3,7 @@ import { EditorConfig } from '../../types';
 import { ModuleConfig } from '../types-internal/module-config';
 import Listeners from './utils/listeners';
 import EventsDispatcher from './utils/events';
+import { EditorEventMap } from './events';
 
 /**
  * The type  of the Module generic.
@@ -42,7 +43,7 @@ export default class Module>
   /**
    * Editor event dispatcher class
    */
-  protected eventsDispatcher: EventsDispatcher;
+  protected eventsDispatcher: EventsDispatcher;
 
   /**
    * Util for bind/unbind DOM event listeners
diff --git a/src/components/block-tunes/block-tune-move-up.ts b/src/components/block-tunes/block-tune-move-up.ts
index 53d6dd54..ad15993a 100644
--- a/src/components/block-tunes/block-tune-move-up.ts
+++ b/src/components/block-tunes/block-tune-move-up.ts
@@ -82,7 +82,7 @@ export default class MoveUpTune implements BlockTune {
     if (previousBlockCoords.top > 0) {
       scrollUpOffset = Math.abs(currentBlockCoords.top) - Math.abs(previousBlockCoords.top);
     } else {
-      scrollUpOffset = window.innerHeight - Math.abs(currentBlockCoords.top) + Math.abs(previousBlockCoords.top);
+      scrollUpOffset = Math.abs(currentBlockCoords.top) + previousBlockCoords.height;
     }
     // document.getElementById('editorjs').parentElement.scrollBy(0, -1 * scrollUpOffset);
     window.scrollBy(0, -1 * scrollUpOffset);
diff --git a/src/components/block/api.ts b/src/components/block/api.ts
index d760ab63..589c6e73 100644
--- a/src/components/block/api.ts
+++ b/src/components/block/api.ts
@@ -84,6 +84,13 @@ function BlockAPI(
       return block.stretched;
     },
 
+    /**
+     * True if Block has inputs to be focused
+     */
+    get focusable(): boolean {
+      return block.focusable;
+    },
+
     /**
      * Call Tool method with errors handler under-the-hood
      *
diff --git a/src/components/block/index.ts b/src/components/block/index.ts
index 8bed7fce..493f9657 100644
--- a/src/components/block/index.ts
+++ b/src/components/block/index.ts
@@ -22,6 +22,10 @@ import { BlockTuneData } from '../../../types/block-tunes/block-tune-data';
 import ToolsCollection from '../tools/collection';
 import EventsDispatcher from '../utils/events';
 import { TunesMenuConfigItem } from '../../../types/tools';
+import { isMutationBelongsToElement } from '../utils/mutations';
+import { EditorEventMap, FakeCursorAboutToBeToggled, FakeCursorHaveBeenSet, RedactorDomChanged } from '../events';
+import { RedactorDomChangedPayload } from '../events/RedactorDomChanged';
+import { convertBlockDataToString } from '../utils/blocks';
 
 /**
  * Interface describes Block class constructor argument
@@ -84,9 +88,11 @@ export enum BlockToolAPI {
 }
 
 /**
- * Names of events supported by Block class
+ * Names of events used in Block
  */
-type BlockEvents = 'didMutated';
+interface BlockEvents {
+  'didMutated': Block,
+}
 
 /**
  * @classdesc Abstract Block class that contains Block information, Tool name and Tool class instance
@@ -105,7 +111,6 @@ export default class Block extends EventsDispatcher {
       wrapper: 'ce-block',
       wrapperStretched: 'ce-block--stretched',
       content: 'ce-block__content',
-      focused: 'ce-block--focused',
       selected: 'ce-block--selected',
       dropTarget: 'ce-block--drop-target',
     };
@@ -153,6 +158,11 @@ export default class Block extends EventsDispatcher {
    */
   private cachedInputs: HTMLElement[] = [];
 
+  /**
+   * We'll store a reference to the tool's rendered element to access it later
+   */
+  private toolRenderedElement: HTMLElement | null = null;
+
   /**
    * Tool class instance
    */
@@ -187,53 +197,14 @@ export default class Block extends EventsDispatcher {
   private inputIndex = 0;
 
   /**
-   * Mutation observer to handle DOM mutations
-   *
-   * @type {MutationObserver}
+   * Common editor event bus
    */
-  private mutationObserver: MutationObserver;
+  private readonly editorEventBus: EventsDispatcher | null = null;
 
   /**
-   * Debounce Timer
-   *
-   * @type {number}
+   * Link to editor dom change callback. Used to remove listener on remove
    */
-  private readonly modificationDebounceTimer = 450;
-
-  /**
-   * Is fired when DOM mutation has been happened
-   */
-  private didMutated = _.debounce((mutationsOrInputEvent: MutationRecord[] | InputEvent = []): void => {
-    const shouldFireUpdate = mutationsOrInputEvent instanceof InputEvent ||
-      !mutationsOrInputEvent.some(({
-        addedNodes = [],
-        removedNodes,
-      }) => {
-        return [...Array.from(addedNodes), ...Array.from(removedNodes)]
-          .some(node => $.isElement(node) && (node as HTMLElement).dataset.mutationFree === 'true');
-      });
-
-    /**
-     * In case some mutation free elements are added or removed, do not trigger didMutated event
-     */
-    if (!shouldFireUpdate) {
-      return;
-    }
-
-    /**
-     * Drop cache
-     */
-    this.cachedInputs = [];
-
-    /**
-     * Update current input
-     */
-    this.updateCurrentInput();
-
-    this.call(BlockToolAPI.UPDATED);
-
-    this.emit('didMutated', this);
-  }, this.modificationDebounceTimer);
+  private redactorDomChangedCallback: (payload: RedactorDomChangedPayload) => void;
 
   /**
    * Current block API interface
@@ -241,12 +212,13 @@ export default class Block extends EventsDispatcher {
   private readonly blockAPI: BlockAPIInterface;
 
   /**
-   * @param {object} options - block constructor options
-   * @param {string} [options.id] - block's id. Will be generated if omitted.
-   * @param {BlockToolData} options.data - Tool's initial data
-   * @param {BlockTool} options.tool — block's tool
+   * @param options - block constructor options
+   * @param [options.id] - block's id. Will be generated if omitted.
+   * @param options.data - Tool's initial data
+   * @param options.tool — block's tool
    * @param options.api - Editor API module for pass it to the Block Tunes
-   * @param {boolean} options.readOnly - Read-Only flag
+   * @param options.readOnly - Read-Only flag
+   * @param [eventBus] - Editor common event bus. Allows to subscribe on some Editor events. Could be omitted when "virtual" Block is created. See BlocksAPI@composeBlockData.
    */
   constructor({
     id = _.generateBlockId(),
@@ -255,7 +227,7 @@ export default class Block extends EventsDispatcher {
     api,
     readOnly,
     tunesData,
-  }: BlockConstructorOptions) {
+  }: BlockConstructorOptions, eventBus?: EventsDispatcher) {
     super();
 
     this.name = tool.name;
@@ -263,10 +235,9 @@ export default class Block extends EventsDispatcher {
     this.settings = tool.settings;
     this.config = tool.settings.config || {};
     this.api = api;
+    this.editorEventBus = eventBus || null;
     this.blockAPI = new BlockAPI(this);
 
-    this.mutationObserver = new MutationObserver(this.didMutated);
-
     this.tool = tool;
     this.toolInstance = tool.create(data, this.blockAPI, readOnly);
 
@@ -278,6 +249,22 @@ export default class Block extends EventsDispatcher {
     this.composeTunes(tunesData);
 
     this.holder = this.compose();
+
+    /**
+     * Bind block events in RIC for optimizing of constructing process time
+     */
+    window.requestIdleCallback(() => {
+      /**
+       * Start watching block mutations
+       */
+      this.watchBlockMutations();
+
+      /**
+       * Mutation observer doesn't track changes in "" and "