[ { "path": ".editorconfig", "content": "root = false\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\nend_of_line = lf\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n" }, { "path": ".eslintignore", "content": "node_modules\n*.d.ts\nsrc/components/tools/paragraph\nsrc/polyfills.ts\n" }, { "path": ".eslintrc", "content": "{\n \"extends\": [\n \"codex/ts\"\n ],\n \"globals\": {\n \"Node\": true,\n \"Range\": true,\n \"HTMLElement\": true,\n \"HTMLDivElement\": true,\n \"Element\": true,\n \"Selection\": true,\n \"SVGElement\": true,\n \"Text\": true,\n \"InsertPosition\": true,\n \"PropertyKey\": true,\n \"MouseEvent\": true,\n \"TouchEvent\": true,\n \"KeyboardEvent\": true,\n \"ClipboardEvent\": true,\n \"DragEvent\": true,\n \"Event\": true,\n \"EventTarget\": true,\n \"Document\": true,\n \"NodeList\": true,\n \"File\": true,\n \"FileList\": true,\n \"MutationRecord\": true,\n \"AddEventListenerOptions\": true,\n \"DataTransfer\": true,\n \"DOMRect\": true,\n \"ClientRect\": true,\n \"ArrayLike\": true,\n \"InputEvent\": true,\n \"unknown\": true,\n \"requestAnimationFrame\": true,\n \"navigator\": true\n },\n \"rules\": {\n \"jsdoc/require-returns-type\": \"off\",\n \"@typescript-eslint/strict-boolean-expressions\": \"warn\",\n \"@typescript-eslint/consistent-type-imports\": \"error\",\n \"@typescript-eslint/consistent-type-exports\": \"error\"\n },\n \"overrides\": [\n {\n \"files\": [\n \"tsconfig.json\",\n \"package.json\",\n \"tsconfig.*.json\",\n \"tslint.json\"\n ],\n \"rules\": {\n \"quotes\": [1, \"double\"],\n \"semi\": [1, \"never\"],\n }\n }\n ]\n}\n" }, { "path": ".github/CODE_OF_CONDUCT.md", "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as\ncontributors and maintainers pledge to making participation in our project and\nour community a harassment-free experience for everyone, regardless of age, body\nsize, disability, ethnicity, sex characteristics, gender identity and expression,\nlevel of experience, education, socio-economic status, nationality, personal\nappearance, race, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment\ninclude:\n\n* Using welcoming and inclusive language\n* Being respectful of differing viewpoints and experiences\n* Gracefully accepting constructive criticism\n* Focusing on what is best for the community\n* Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n* The use of sexualized language or imagery and unwelcome sexual attention or\n advances\n* Trolling, insulting/derogatory comments, and personal or political attacks\n* Public or private harassment\n* Publishing others' private information, such as a physical or electronic\n address, without explicit permission\n* Other conduct which could reasonably be considered inappropriate in a\n professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable\nbehavior and are expected to take appropriate and fair corrective action in\nresponse to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or\nreject comments, commits, code, wiki edits, issues, and other contributions\nthat are not aligned to this Code of Conduct, or to ban temporarily or\npermanently any contributor for other behaviors that they deem inappropriate,\nthreatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces\nwhen an individual is representing the project or its community. Examples of\nrepresenting a project or community include using an official project e-mail\naddress, posting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event. Representation of a project may be\nfurther defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported by contacting the project team at team@codex.so. All\ncomplaints will be reviewed and investigated and will result in a response that\nis deemed necessary and appropriate to the circumstances. The project team is\nobligated to maintain confidentiality with regard to the reporter of an incident.\nFurther details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good\nfaith may face temporary or permanent repercussions as determined by other\nmembers of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,\navailable at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html\n\n[homepage]: https://www.contributor-covenant.org\n\nFor answers to common questions about this code of conduct, see\nhttps://www.contributor-covenant.org/faq\n" }, { "path": ".github/FUNDING.yml", "content": "# These are supported funding model platforms\n\npatreon: editorjs\nopen_collective: editorjs\ncustom: https://codex.so/donate" }, { "path": ".github/ISSUE_TEMPLATE/bug_report.md", "content": "---\nname: Bug report\nabout: Create a report to help us improve Editor.js\ntitle: \"\"\nlabels: bug\nassignees: ''\n\n---\n\nDescribe a bug.\n\nSteps to reproduce:\n1. Go to …\n2. Click on …\n3. …\n\nExpected behavior:\n\nScreenshots:\n\nDevice, Browser, OS:\n\nEditor.js version:\n\nPlugins you use with their versions:\n\n\n" }, { "path": ".github/ISSUE_TEMPLATE/config.yml", "content": "blank_issues_enabled: false\ncontact_links:\n - name: Team\n url: mailto:team@codex.so\n about: Direct team contact.\n - name: 💬 Discussions\n url: https://github.com/codex-team/editor.js/discussions\n about: Use discussions if you have an issue draft, an idea for improvement or for asking questions.\n - name: Editor.js Telegram chat\n url: https://t.me/codex_editor\n about: Telegram chat for Editor.js users communication." }, { "path": ".github/ISSUE_TEMPLATE/general_issue.md", "content": "---\nname: General Issue\nabout: Well-designed, algorithmized feature/idea/improvement issue for Editor.js\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\nThe question.\n\nWhy and how the question has come up.\n\n\n" }, { "path": ".github/workflows/bump-version-on-merge-next.yml", "content": "name: Bump version on merge\n\n# Caution:\n# the use of \"pull_request_target\" trigger allows to successfully\n# run workflow even when triggered from a fork. The trigger grants\n# access to repo's secrets and gives write permission to the runner.\n# This can be used to run malicious code on untrusted PR, so, please\n# DO NOT checkout any PR's ongoing commits (aka github.event.pull_request.head.sha)\n# while using this trigger.\non:\n pull_request_target:\n branches:\n - next\n types: [closed]\n\njobs:\n # If pull request was merged then we should check for a package version update\n check-for-no-version-changing:\n if: github.event.pull_request.merged == true\n runs-on: ubuntu-latest\n permissions:\n actions: write\n steps:\n # Checkout to target branch\n - uses: actions/checkout@v2\n with:\n fetch-depth: 0\n\n # Get package new version name\n - name: Get package info\n id: packageNew\n uses: codex-team/action-nodejs-package-info@v1\n\n # Checkout to the base commit before merge\n - name: Checkout to the base commit before merge\n run: git checkout ${{ github.event.pull_request.base.sha }}\n\n # Get package old version name\n - name: Get package info\n id: packageOld\n uses: codex-team/action-nodejs-package-info@v1\n\n # Stop workflow and do not bump version if it was changed already\n - name: Stop workflow if version was changed already\n if: steps.packageOld.outputs.version != steps.packageNew.outputs.version\n run: |\n curl -L \\\n -X POST \\\n -H \"Accept: application/vnd.github+json\" \\\n -H \"Authorization: Bearer ${{ secrets.GITHUB_TOKEN }}\" \\\n -H \"X-GitHub-Api-Version: 2022-11-28\" \\\n https://api.github.com/repos/${{ github.repository }}/actions/runs/${{ github.run_id }}/cancel\n\n bump-version:\n needs: check-for-no-version-changing\n runs-on: ubuntu-latest\n permissions:\n contents: write\n pull-requests: write\n steps:\n # Checkout to target branch\n - uses: actions/checkout@v2\n\n # Setup node environment\n - uses: actions/setup-node@v1\n with:\n node-version: 16\n\n # Bump version to the next prerelease (patch) with rc suffix\n - name: Suggest the new version\n run: yarn version --prerelease --preid rc --no-git-tag-version\n\n # Get package new version name\n - name: Get package info\n id: package\n uses: codex-team/action-nodejs-package-info@v1\n\n # Create pull request with changes\n - name: Create Pull Request\n uses: peter-evans/create-pull-request@v3\n with:\n commit-message: Bump version\n committer: github-actions \n author: github-actions \n branch: auto-bump-version\n base: ${{ steps.vars.outputs.base_branch }}\n delete-branch: true\n title: \"Bump version up to ${{ steps.package.outputs.version }}\"\n body: |\n Auto-generated bump version suggestion because of PR:\n **${{ github.event.pull_request.title }}** #${{ github.event.pull_request.number }}\n" }, { "path": ".github/workflows/create-a-release-draft.yml", "content": "name: Create a release draft\n\n# Caution:\n# the use of \"pull_request_target\" trigger allows to successfully\n# run workflow even when triggered from a fork. The trigger grants\n# access to repo's secrets and gives write permission to the runner.\n# This can be used to run malicious code on untrusted PR, so, please\n# DO NOT checkout any PR's ongoing commits (aka github.event.pull_request.head.sha)\n# while using this trigger.\non:\n pull_request_target:\n branches:\n - next\n types: [closed]\n\njobs:\n # If pull request was merged then we should check for a package version update\n check-version-changing:\n if: github.event.pull_request.merged == true\n runs-on: ubuntu-latest\n permissions:\n actions: write\n steps:\n - uses: actions/setup-node@v3\n with:\n node-version: 16\n # Checkout to target branch\n - uses: actions/checkout@v2\n with:\n fetch-depth: 0\n\n # Get package new version name\n - name: Get package info\n id: packageNew\n uses: codex-team/action-nodejs-package-info@v1\n\n # Checkout to the base commit before merge\n - name: Checkout to the base commit before merge\n run: git checkout ${{ github.event.pull_request.base.sha }}\n\n # Get package old version name\n - name: Get package info\n id: packageOld\n uses: codex-team/action-nodejs-package-info@v1\n\n # Stop workflow if version was not changed\n - name: Stop workflow if version was not changed\n if: steps.packageOld.outputs.version == steps.packageNew.outputs.version\n run: |\n curl -L \\\n -X POST \\\n -H \"Accept: application/vnd.github+json\" \\\n -H \"Authorization: Bearer ${{ secrets.GITHUB_TOKEN }}\" \\\n -H \"X-GitHub-Api-Version: 2022-11-28\" \\\n https://api.github.com/repos/${{ github.repository }}/actions/runs/${{ github.run_id }}/cancel\n\n # Create a new draft release\n release-draft:\n needs: check-version-changing\n runs-on: ubuntu-latest\n permissions:\n contents: write\n steps:\n # Checkout to target branch\n - uses: actions/checkout@v2\n with:\n # Pull submodules\n submodules: 'recursive'\n\n # Setup node environment\n - uses: actions/setup-node@v1\n with:\n node-version: 16\n\n # Prepare, build and publish project\n - name: Install dependencies\n run: yarn\n\n # Build Editor.js\n - name: Build output files\n run: yarn build\n\n # Get package version name\n - name: Get package info\n id: package\n uses: codex-team/action-nodejs-package-info@v1\n\n - name: Create Release\n id: create_release\n uses: actions/create-release@v1\n env:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n with:\n tag_name: v${{ steps.package.outputs.version }}\n release_name: v${{ steps.package.outputs.version }}\n\n # Fill release description from pull request body name\n body: \"${{ github.event.pull_request.title }} #${{ github.event.pull_request.number }}\"\n\n # Save as a draft release\n draft: true\n\n # If version name contains \"-rc\" suffix than mark a \"pre-release\" checkbox\n prerelease: ${{ contains(steps.package.outputs.version, '-rc') }}\n\n # Build and upload target Editor.js UMD build to release as artifact\n - name: Upload Release Asset\n uses: actions/upload-release-asset@v1\n env:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n with:\n upload_url: ${{ steps.create_release.outputs.upload_url }}\n asset_path: dist/editorjs.umd.js\n asset_name: editorjs.umd.js\n asset_content_type: application/javascript\n\n # Build and upload target Editor.js MJS build to release as artifact\n - name: Upload Release Asset\n uses: actions/upload-release-asset@v1\n env:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n with:\n upload_url: ${{ steps.create_release.outputs.upload_url }}\n asset_path: dist/editorjs.mjs\n asset_name: editorjs.mjs\n asset_content_type: application/javascript\n\n # Send a notification message\n - name: Send a message\n uses: codex-team/action-codexbot-notify@v1\n with:\n webhook: ${{ secrets.CODEX_BOT_WEBHOOK_FRONTEND }}\n 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!'\n parse_mode: 'markdown'\n disable_web_page_preview: true\n" }, { "path": ".github/workflows/cypress.yml", "content": "name: Cypress\n\non: [pull_request]\n\njobs:\n run-tests:\n strategy:\n matrix:\n browser: [firefox, chrome, edge]\n\n runs-on: ubuntu-22.04\n steps:\n - uses: actions/checkout@v4\n - uses: actions/setup-node@v3\n with:\n node-version: 18\n\n - name: Setup Firefox\n if: matrix.browser == 'firefox'\n uses: browser-actions/setup-firefox@v1\n with:\n firefox-version: '115.0esr'\n\n - uses: cypress-io/github-action@v6\n with:\n config: video=false\n browser: ${{ matrix.browser }}\n build: yarn build:test\n" }, { "path": ".github/workflows/eslint.yml", "content": "name: ESLint CodeX\n\non: [pull_request]\n\njobs:\n lint:\n name: ESlint\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v2\n\n - uses: actions/setup-node@v3\n with:\n node-version: 18\n\n - name: Cache dependencies\n uses: actions/cache@v4\n with:\n path: ~/.npm\n key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}\n restore-keys: |\n ${{ runner.os }}-node-\n\n - run: yarn\n - run: yarn lint\n" }, { "path": ".github/workflows/publish-package-to-npm.yml", "content": "name: Publish package to NPM\n\non:\n release:\n types:\n - published\n\njobs:\n publish:\n runs-on: ubuntu-latest\n steps:\n # Checkout to target branch\n - uses: actions/checkout@v4\n with:\n # Pull submodules\n submodules: 'recursive'\n\n - name: Get package info\n id: package\n uses: codex-team/action-nodejs-package-info@v1\n\n # Setup node environment\n - uses: actions/setup-node@v1\n with:\n node-version: 16\n registry-url: https://registry.npmjs.org/\n\n # Prepare, build and publish project\n - name: Install dependencies\n run: yarn\n\n - name: Build output files\n run: yarn build\n\n - name: Publish the package with a NEXT tag\n run: yarn publish --access=public --tag=next\n env:\n NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}\n\n - name: Add LATEST tag for the published package if this is not a prerelease version\n if: github.event.release.prerelease != true\n run: npm dist-tag add ${{ steps.package.outputs.name }}@${{ steps.package.outputs.version }} latest\n env:\n NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}\n\n notify:\n needs: publish\n runs-on: ubuntu-latest\n env:\n GITHUB_LINK: ${{ github.server_url }}/${{ github.repository }}/releases/tag/${{ github.ref_name }}\n steps:\n # Checkout to target branch\n - uses: actions/checkout@v4\n\n - name: Get package info\n id: package\n uses: codex-team/action-nodejs-package-info@v1\n\n - name: Send a message\n uses: codex-team/action-codexbot-notify@v1\n with:\n webhook: ${{ secrets.CODEX_BOT_NOTIFY_EDITORJS_PUBLIC_CHAT }}\n message: '📦 [${{ steps.package.outputs.name }} ${{ steps.package.outputs.version }}](${{ env.GITHUB_LINK }}) was published'\n parse_mode: 'markdown'\n disable_web_page_preview: true\n" }, { "path": ".gitignore", "content": "# --- proj files ---\n.DS_Store\nThumbs.db\n/.idea/\n/*.sublime-project\n/*.sublime-workspace\n\nnode_modules/*\n\nnpm-debug.log\nyarn-error.log\n\ntest/cypress/screenshots\ntest/cypress/videos\n\ndist/\n\ncoverage/\n.nyc_output/\n.vscode/launch.json\n" }, { "path": ".npmignore", "content": "*\n!/dist/**/*\n!/types/**/*\n!/LICENSE\n!/README.md\n!/package.json\n" }, { "path": ".nvmrc", "content": "v18.20.1\n" }, { "path": ".postcssrc.yml", "content": "plugins:\n # Apply custom property sets via @apply rule\n # https://github.com/pascalduez/postcss-apply\n postcss-apply: {}\n\n # Convert modern CSS into something most browsers can understand\n # https://github.com/csstools/postcss-preset-env\n postcss-preset-env:\n # Polyfill CSS features\n # https://github.com/csstools/postcss-preset-env#stage\n #\n # List of features with levels: https://cssdb.org/\n stage: 0\n\n # Define polyfills based on browsers you are supporting\n # https://github.com/csstools/postcss-preset-env#browsers\n browsers:\n - 'last 2 versions'\n - '> 1%'\n\n # Instruct all plugins to omit pre-polyfilled CSS\n # https://github.com/csstools/postcss-preset-env#preserve\n preserve: false\n\n # Nested rules unwrapper\n # https://github.com/postcss/postcss-nested\n #\n # As you know 'postcss-preset-env' plugin has an ability to process\n # 'postcss-nesting' feature but it does not work with BEM\n # Report: https://github.com/csstools/postcss-preset-env/issues/40\n postcss-nested: {}\n" }, { "path": ".stylelintrc", "content": "{\n \"rules\": {\n \"at-rule-empty-line-before\": [\n \"always\",\n {\n except: [\n \"blockless-after-same-name-blockless\",\n \"first-nested\",\n ],\n ignore: [\n \"after-comment\"\n ],\n }\n ],\n \"at-rule-name-case\": \"lower\",\n \"at-rule-name-space-after\": \"always-single-line\",\n \"at-rule-semicolon-newline-after\": \"always\",\n \"block-closing-brace-empty-line-before\": \"never\",\n \"block-closing-brace-newline-after\": \"always\",\n \"block-closing-brace-newline-before\": \"always-multi-line\",\n \"block-closing-brace-space-before\": \"always-single-line\",\n \"block-no-empty\": true,\n \"block-opening-brace-newline-after\": \"always-multi-line\",\n \"block-opening-brace-space-after\": \"always-single-line\",\n \"block-opening-brace-space-before\": \"always\",\n \"color-hex-case\": \"lower\",\n \"color-hex-length\": \"short\",\n \"color-no-invalid-hex\": true,\n \"comment-empty-line-before\": [\n \"always\",\n {\n except: [\n \"first-nested\"\n ],\n ignore: [\n \"stylelint-commands\"\n ],\n }\n ],\n \"comment-no-empty\": true,\n \"comment-whitespace-inside\": \"always\",\n \"custom-property-empty-line-before\": [\n \"always\",\n {\n except: [\n \"after-custom-property\",\n \"first-nested\",\n ],\n ignore: [\n \"after-comment\",\n \"inside-single-line-block\",\n ],\n }\n ],\n \"declaration-bang-space-after\": \"never\",\n \"declaration-bang-space-before\": \"always\",\n \"declaration-block-no-duplicate-properties\": [\n true,\n {\n ignore: [\n \"consecutive-duplicates-with-different-values\"\n ],\n }\n ],\n \"declaration-block-no-redundant-longhand-properties\": true,\n \"declaration-block-no-shorthand-property-overrides\": true,\n \"declaration-block-semicolon-newline-after\": \"always-multi-line\",\n \"declaration-block-semicolon-space-after\": \"always-single-line\",\n \"declaration-block-semicolon-space-before\": \"never\",\n \"declaration-block-single-line-max-declarations\": 1,\n \"declaration-block-trailing-semicolon\": \"always\",\n \"declaration-colon-newline-after\": \"always-multi-line\",\n \"declaration-colon-space-after\": \"always-single-line\",\n \"declaration-colon-space-before\": \"never\",\n \"declaration-empty-line-before\": [\n \"always\",\n {\n except: [\n \"after-declaration\",\n \"first-nested\",\n ],\n ignore: [\n \"after-comment\",\n \"inside-single-line-block\",\n ],\n }\n ],\n \"font-family-no-duplicate-names\": true,\n \"function-calc-no-unspaced-operator\": true,\n \"function-comma-newline-after\": \"always-multi-line\",\n \"function-comma-space-after\": \"always-single-line\",\n \"function-comma-space-before\": \"never\",\n \"function-linear-gradient-no-nonstandard-direction\": true,\n \"function-max-empty-lines\": 0,\n \"function-name-case\": \"lower\",\n \"function-parentheses-newline-inside\": \"always-multi-line\",\n \"function-parentheses-space-inside\": \"never-single-line\",\n \"function-whitespace-after\": \"always\",\n \"indentation\": 4,\n \"keyframe-declaration-no-important\": true,\n \"length-zero-no-unit\": true,\n \"max-empty-lines\": 1,\n \"media-feature-colon-space-after\": \"always\",\n \"media-feature-colon-space-before\": \"never\",\n \"media-feature-name-case\": \"lower\",\n \"media-feature-name-no-unknown\": true,\n \"media-feature-parentheses-space-inside\": \"never\",\n \"media-feature-range-operator-space-after\": \"always\",\n \"media-feature-range-operator-space-before\": \"always\",\n \"media-query-list-comma-newline-after\": \"always-multi-line\",\n \"media-query-list-comma-space-after\": \"always-single-line\",\n \"media-query-list-comma-space-before\": \"never\",\n \"no-empty-source\": true,\n \"no-eol-whitespace\": true,\n \"no-extra-semicolons\": true,\n \"no-invalid-double-slash-comments\": true,\n \"no-missing-end-of-source-newline\": true,\n \"number-leading-zero\": \"always\",\n \"number-no-trailing-zeros\": true,\n \"property-case\": \"lower\",\n \"property-no-unknown\": true,\n \"rule-empty-line-before\": [\n \"always-multi-line\",\n {\n except: [\n \"first-nested\"\n ],\n ignore: [\n \"after-comment\"\n ],\n }\n ],\n \"selector-attribute-brackets-space-inside\": \"never\",\n \"selector-attribute-operator-space-after\": \"never\",\n \"selector-attribute-operator-space-before\": \"never\",\n \"selector-combinator-space-after\": \"always\",\n \"selector-combinator-space-before\": \"always\",\n \"selector-descendant-combinator-no-non-space\": true,\n \"selector-list-comma-newline-after\": \"always\",\n \"selector-list-comma-space-before\": \"never\",\n \"selector-max-empty-lines\": 0,\n \"selector-pseudo-class-case\": \"lower\",\n \"selector-pseudo-class-no-unknown\": true,\n \"selector-pseudo-class-parentheses-space-inside\": \"never\",\n \"selector-pseudo-element-case\": \"lower\",\n \"selector-pseudo-element-colon-notation\": \"double\",\n \"selector-pseudo-element-no-unknown\": true,\n \"selector-type-case\": \"lower\",\n \"selector-type-no-unknown\": true,\n \"shorthand-property-no-redundant-values\": true,\n \"string-no-newline\": true,\n \"unit-case\": \"lower\",\n \"unit-no-unknown\": true,\n \"value-list-comma-newline-after\": \"always-multi-line\",\n \"value-list-comma-space-after\": \"always-single-line\",\n \"value-list-comma-space-before\": \"never\",\n \"value-list-max-empty-lines\": 0,\n },\n}\n" }, { "path": ".vscode/settings.json", "content": "{\n \"cSpell.words\": [\n \"autofocused\",\n \"Behaviour\",\n \"cacheable\",\n \"childs\",\n \"codexteam\",\n \"colspan\",\n \"contenteditable\",\n \"contentless\",\n \"Convertable\",\n \"cssnano\",\n \"cssnext\",\n \"Debouncer\",\n \"devserver\",\n \"editorjs\",\n \"entrypoints\",\n \"Flippable\",\n \"GRAMMARLY\",\n \"hsablonniere\",\n \"intellij\",\n \"keydown\",\n \"keydowns\",\n \"Kilian\",\n \"mergeable\",\n \"movetostart\",\n \"nofollow\",\n \"opencollective\",\n \"preconfigured\",\n \"resetors\",\n \"rowspan\",\n \"selectall\",\n \"sometool\",\n \"stylelint\",\n \"textareas\",\n \"twitterwidget\",\n \"typeof\",\n \"Unmergeable\",\n \"viewports\"\n ]\n}\n" }, { "path": "CODEOWNERS", "content": "* @neSpecc @gohabereg @TatianaFomina @ilyamore88\n\n" }, { "path": "LICENSE", "content": " Apache License\n Version 2.0, January 2004\n http://www.apache.org/licenses/\n\n TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n 1. Definitions.\n\n \"License\" shall mean the terms and conditions for use, reproduction,\n and distribution as defined by Sections 1 through 9 of this document.\n\n \"Licensor\" shall mean the copyright owner or entity authorized by\n the copyright owner that is granting the License.\n\n \"Legal Entity\" shall mean the union of the acting entity and all\n other entities that control, are controlled by, or are under common\n control with that entity. For the purposes of this definition,\n \"control\" means (i) the power, direct or indirect, to cause the\n direction or management of such entity, whether by contract or\n otherwise, or (ii) ownership of fifty percent (50%) or more of the\n outstanding shares, or (iii) beneficial ownership of such entity.\n\n \"You\" (or \"Your\") shall mean an individual or Legal Entity\n exercising permissions granted by this License.\n\n \"Source\" form shall mean the preferred form for making modifications,\n including but not limited to software source code, documentation\n source, and configuration files.\n\n \"Object\" form shall mean any form resulting from mechanical\n transformation or translation of a Source form, including but\n not limited to compiled object code, generated documentation,\n and conversions to other media types.\n\n \"Work\" shall mean the work of authorship, whether in Source or\n Object form, made available under the License, as indicated by a\n copyright notice that is included in or attached to the work\n (an example is provided in the Appendix below).\n\n \"Derivative Works\" shall mean any work, whether in Source or Object\n form, that is based on (or derived from) the Work and for which the\n editorial revisions, annotations, elaborations, or other modifications\n represent, as a whole, an original work of authorship. For the purposes\n of this License, Derivative Works shall not include works that remain\n separable from, or merely link (or bind by name) to the interfaces of,\n the Work and Derivative Works thereof.\n\n \"Contribution\" shall mean any work of authorship, including\n the original version of the Work and any modifications or additions\n to that Work or Derivative Works thereof, that is intentionally\n submitted to Licensor for inclusion in the Work by the copyright owner\n or by an individual or Legal Entity authorized to submit on behalf of\n the copyright owner. For the purposes of this definition, \"submitted\"\n means any form of electronic, verbal, or written communication sent\n to the Licensor or its representatives, including but not limited to\n communication on electronic mailing lists, source code control systems,\n and issue tracking systems that are managed by, or on behalf of, the\n Licensor for the purpose of discussing and improving the Work, but\n excluding communication that is conspicuously marked or otherwise\n designated in writing by the copyright owner as \"Not a Contribution.\"\n\n \"Contributor\" shall mean Licensor and any individual or Legal Entity\n on behalf of whom a Contribution has been received by Licensor and\n subsequently incorporated within the Work.\n\n 2. Grant of Copyright License. Subject to the terms and conditions of\n this License, each Contributor hereby grants to You a perpetual,\n worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n copyright license to reproduce, prepare Derivative Works of,\n publicly display, publicly perform, sublicense, and distribute the\n Work and such Derivative Works in Source or Object form.\n\n 3. Grant of Patent License. Subject to the terms and conditions of\n this License, each Contributor hereby grants to You a perpetual,\n worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n (except as stated in this section) patent license to make, have made,\n use, offer to sell, sell, import, and otherwise transfer the Work,\n where such license applies only to those patent claims licensable\n by such Contributor that are necessarily infringed by their\n Contribution(s) alone or by combination of their Contribution(s)\n with the Work to which such Contribution(s) was submitted. If You\n institute patent litigation against any entity (including a\n cross-claim or counterclaim in a lawsuit) alleging that the Work\n or a Contribution incorporated within the Work constitutes direct\n or contributory patent infringement, then any patent licenses\n granted to You under this License for that Work shall terminate\n as of the date such litigation is filed.\n\n 4. Redistribution. You may reproduce and distribute copies of the\n Work or Derivative Works thereof in any medium, with or without\n modifications, and in Source or Object form, provided that You\n meet the following conditions:\n\n (a) You must give any other recipients of the Work or\n Derivative Works a copy of this License; and\n\n (b) You must cause any modified files to carry prominent notices\n stating that You changed the files; and\n\n (c) You must retain, in the Source form of any Derivative Works\n that You distribute, all copyright, patent, trademark, and\n attribution notices from the Source form of the Work,\n excluding those notices that do not pertain to any part of\n the Derivative Works; and\n\n (d) If the Work includes a \"NOTICE\" text file as part of its\n distribution, then any Derivative Works that You distribute must\n include a readable copy of the attribution notices contained\n within such NOTICE file, excluding those notices that do not\n pertain to any part of the Derivative Works, in at least one\n of the following places: within a NOTICE text file distributed\n as part of the Derivative Works; within the Source form or\n documentation, if provided along with the Derivative Works; or,\n within a display generated by the Derivative Works, if and\n wherever such third-party notices normally appear. The contents\n of the NOTICE file are for informational purposes only and\n do not modify the License. You may add Your own attribution\n notices within Derivative Works that You distribute, alongside\n or as an addendum to the NOTICE text from the Work, provided\n that such additional attribution notices cannot be construed\n as modifying the License.\n\n You may add Your own copyright statement to Your modifications and\n may provide additional or different license terms and conditions\n for use, reproduction, or distribution of Your modifications, or\n for any such Derivative Works as a whole, provided Your use,\n reproduction, and distribution of the Work otherwise complies with\n the conditions stated in this License.\n\n 5. Submission of Contributions. Unless You explicitly state otherwise,\n any Contribution intentionally submitted for inclusion in the Work\n by You to the Licensor shall be under the terms and conditions of\n this License, without any additional terms or conditions.\n Notwithstanding the above, nothing herein shall supersede or modify\n the terms of any separate license agreement you may have executed\n with Licensor regarding such Contributions.\n\n 6. Trademarks. This License does not grant permission to use the trade\n names, trademarks, service marks, or product names of the Licensor,\n except as required for reasonable and customary use in describing the\n origin of the Work and reproducing the content of the NOTICE file.\n\n 7. Disclaimer of Warranty. Unless required by applicable law or\n agreed to in writing, Licensor provides the Work (and each\n Contributor provides its Contributions) on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n implied, including, without limitation, any warranties or conditions\n of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n PARTICULAR PURPOSE. You are solely responsible for determining the\n appropriateness of using or redistributing the Work and assume any\n risks associated with Your exercise of permissions under this License.\n\n 8. Limitation of Liability. In no event and under no legal theory,\n whether in tort (including negligence), contract, or otherwise,\n unless required by applicable law (such as deliberate and grossly\n negligent acts) or agreed to in writing, shall any Contributor be\n liable to You for damages, including any direct, indirect, special,\n incidental, or consequential damages of any character arising as a\n result of this License or out of the use or inability to use the\n Work (including but not limited to damages for loss of goodwill,\n work stoppage, computer failure or malfunction, or any and all\n other commercial damages or losses), even if such Contributor\n has been advised of the possibility of such damages.\n\n 9. Accepting Warranty or Additional Liability. While redistributing\n the Work or Derivative Works thereof, You may choose to offer,\n and charge a fee for, acceptance of support, warranty, indemnity,\n or other liability obligations and/or rights consistent with this\n License. However, in accepting such obligations, You may act only\n on Your own behalf and on Your sole responsibility, not on behalf\n of any other Contributor, and only if You agree to indemnify,\n defend, and hold each Contributor harmless for any liability\n incurred by, or claims asserted against, such Contributor by reason\n of your accepting any such warranty or additional liability.\n\n END OF TERMS AND CONDITIONS\n\n Copyright © 2015-present CodeX\n\n Licensed under the Apache License, Version 2.0 (the \"License\");\n you may not use this file except in compliance with the License.\n You may obtain a copy of the License at\n\n http://www.apache.org/licenses/LICENSE-2.0\n\n Unless required by applicable law or agreed to in writing, software\n distributed under the License is distributed on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n See the License for the specific language governing permissions and\n limitations under the License.\n" }, { "path": "README.md", "content": "

\n \n \n \n \n \"Editor.js\n \n \n

\n\n

\n editorjs.io |\n documentation |\n changelog\n \n

\n\n

\n \n \"npm\"/\n \n \n \"Minzipped\n \n \n \"Backers\n \n \n \"Sponsors\n \n

\n\n## About\n\nEditor.js is an open-source text editor offering a variety of features to help users create and format content efficiently. It has a modern, block-style interface that allows users to easily add and arrange different types of content, such as text, images, lists, quotes, etc. Each Block is provided via a separate plugin making Editor.js extremely flexible.\n\nEditor.js outputs a clean JSON data instead of heavy HTML markup. Use it in Web, iOS, Android, AMP, Instant Articles, speech readers, AI chatbots — everywhere. Easy to sanitize, extend and integrate with your logic. \n\n- 😍  Modern UI out of the box\n- 💎  Clean JSON output\n- ⚙️  Well-designed API\n- 🛍  Various Tools available\n- 💌  Free and open source\n\n\n \"Editor.js\n \n\n## Installation\n\nIt's quite simple:\n\n1. Install Editor.js \n2. Install tools you need\n3. Initialize Editor's instance\n\nInstall using NPM, Yarn, or [CDN](https://www.jsdelivr.com/package/npm/@editorjs/editorjs):\n\n```bash\nnpm i @editorjs/editorjs\n```\n\nChoose and install tools:\n\n- [Heading](https://github.com/editor-js/header)\n- [Quote](https://github.com/editor-js/quote)\n- [Image](https://github.com/editor-js/image) \n- [Simple Image](https://github.com/editor-js/simple-image) (without backend requirement)\n- [Nested List](https://github.com/editor-js/nested-list)\n- [Checklist](https://github.com/editor-js/checklist)\n- [Link embed](https://github.com/editor-js/link)\n- [Embeds](https://github.com/editor-js/embed) (YouTube, Twitch, Vimeo, Gfycat, Instagram, Twitter, etc)\n- [Table](https://github.com/editor-js/table)\n- [Delimiter](https://github.com/editor-js/delimiter)\n- [Warning](https://github.com/editor-js/warning)\n- [Code](https://github.com/editor-js/code)\n- [Raw HTML](https://github.com/editor-js/raw)\n- [Attaches](https://github.com/editor-js/attaches)\n- [Marker](https://github.com/editor-js/marker)\n- [Inline Code](https://github.com/editor-js/inline-code)\n\nSee the [😎 Awesome Editor.js](https://github.com/editor-js/awesome-editorjs) list for more tools.\n\nInitialize the Editor:\n\n```html\n
\n```\n\n```javascript\nimport EditorJS from '@editorjs/editorjs'\n\nconst editor = new EditorJS({\n tools: {\n // ... your tools\n }\n})\n````\n\nSee details about [Installation](https://editorjs.io/getting-started/) and [Configuration](https://editorjs.io/configuration/) at the documentation.\n\n### Saving Data\n\nCall `editor.save()` and handle returned Promise with saved data.\n\n```javascript\nconst data = await editor.save()\n```\n\n### Example\n\nTake a look at the [example.html](example/example.html) to view more detailed examples.\n\n\n## Roadmap\n\n\n\n- Unified Toolbars\n - [x] Block Tunes moved left\n - [x] Toolbox becomes vertical\n - [x] Ability to display several Toolbox buttons by the single Tool\n - [x] Block Tunes become vertical\n - [x] Block Tunes support nested menus\n - [x] Block Tunes support separators \n - [x] Conversion Menu added to the Block Tunes\n - [x] Unified Toolbar supports hints \n - [x] Conversion Toolbar uses Unified Toolbar\n - [x] Inline Toolbar uses Unified Toolbar\n- Collaborative editing\n - [ ] Implement Inline Tools JSON format\n - [ ] Operations Observer, Executor, Manager, Transformer\n - [ ] Implement Undo/Redo Manager\n - [ ] Implement Tools API changes\n - [ ] Implement Server and communication\n - [ ] Update basic tools to fit the new API\n- Other features\n - [ ] Blocks drag'n'drop\n - [ ] New cross-block selection\n - [ ] New cross-block caret moving\n- Ecosystem improvements\n - [x] CodeX Icons — the way to unify all tools and core icons\n - [x] New Homepage and Docs\n - [x] @editorjs/create-tool for Tools bootstrapping\n - [ ] Editor.js DevTools — stand for core and tools development\n - [ ] Editor.js Design System\n - [ ] Editor.js Preset Env\n - [ ] Editor.js ToolKit\n - [ ] New core bundle system\n - [ ] New documentation and guides\n\n\n \n \n \n \"Support\n \n\n\n
\n\n## Like Editor.js?\n\nYou can support project improvement and development of new features with a donation to our team.\n\n[Donate via OpenCollective](https://opencollective.com/editorjs)\n\\\n[Donate via Crypto](https://codex.so/donate)\n\\\n[Donate via Patreon](https://www.patreon.com/editorjs)\n\n### Why donate\n\nDonations to open-source products have several advantages for your business:\n\n- If your business relies on Editor.js, you'll probably want it to be maintained\n- It helps Editor.js to evolve and get the new features\n- We can support contributors and the community around the project. You'll receive well organized docs, guides, etc.\n- We need to pay for our infrastructure and maintain public resources (domain names, homepages, docs, etc). Supporting it guarantees you to access any resources at the time you need them.\n- You can advertise by adding your brand assets and mentions on our public resources\n\n\n### Sponsors\n\nSupport us by becoming a sponsor. Your logo will show up here with a link to your website.\n\n

\n \n \"Mister\n \n \n \"UPLUCID,\n \n \n \"Kane\n \n \n \"Content\n \n

\n\n[Become a Sponsor](https://opencollective.com/editorjs/contribute/sir-8679/checkout)\n\n### Backers\n Thank you to all our backers\n\n\n\n[Become a Backer](https://opencollective.com/editorjs/contribute/backer-8632/checkout)\n\n### Contributors\n\nThis project exists thanks to all the people who contribute. \n\n

\n\n### Need something special?\n\nHire CodeX experts to resolve technical challenges and match your product requirements. \n\n- Resolve a problem that has high value for you\n- Implement a new feature required by your business\n- Help with integration or tool development\n- Provide any consultation\n\nContact us via team@codex.so and share your details\n\n## Community\n\n- [Official Tools](https://github.com/editor-js)\n- [Awesome Editor.js](https://github.com/editor-js/awesome-editorjs)\n- [Good First Tasks](https://github.com/codex-team/editor.js/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+task%22)\n- [Contributing](https://editorjs.io/contributing/)\n- [Telegram Chat](https://t.me/codex_editor)\n\n# About CodeX\n\n\n\nCodeX is a team of digital specialists around the world interested in building high-quality open source products on a global market. We are [open](https://codex.so/join) for young people who want to constantly improve their skills and grow professionally with experiments in cutting-edge technologies.\n\n| 🌐 | Join 👋 | Twitter | Instagram |\n| -- | -- | -- | -- |\n| [codex.so](https://codex.so) | [codex.so/join](https://codex.so/join) |[@codex_team](http://twitter.com/codex_team) | [@codex_team](http://instagram.com/codex_team/) |\n" }, { "path": "cypress.config.ts", "content": "import { defineConfig } from 'cypress';\nimport path from 'node:path';\nimport vitePreprocessor from 'cypress-vite';\n\nexport default defineConfig({\n env: {\n NODE_ENV: 'test',\n },\n fixturesFolder: 'test/cypress/fixtures',\n screenshotsFolder: 'test/cypress/screenshots',\n video: false,\n videosFolder: 'test/cypress/videos',\n e2e: {\n // We've imported your old cypress plugins here.\n // You may want to clean this up later by importing these.\n setupNodeEvents(on, config) {\n on('file:preprocessor', vitePreprocessor({\n configFile: path.resolve(__dirname, './vite.config.test.js'),\n }));\n\n /**\n * Plugin for cypress that adds better terminal output for easier debugging.\n * Prints cy commands, browser console logs, cy.request and cy.intercept data. Great for your pipelines.\n * https://github.com/archfz/cypress-terminal-report\n */\n require('cypress-terminal-report/src/installLogsPrinter')(on);\n\n require('@cypress/code-coverage/task')(on, config);\n },\n specPattern: 'test/cypress/tests/**/*.cy.{js,jsx,ts,tsx}',\n supportFile: 'test/cypress/support/index.ts',\n },\n 'retries': {\n // Configure retry attempts for `cypress run`\n 'runMode': 2,\n // Configure retry attempts for `cypress open`\n 'openMode': 0,\n },\n});\n" }, { "path": "docs/CHANGELOG.md", "content": "# Changelog\n\n### 2.31.5\n\n- `Fix` - Handle __Ctrl + click__ on links with inline styles applied (e.g., bold, italic)\n\n### 2.31.4\n\n- `Fix` - Prevent inline-toolbar re-renders when linked text is selected\n\n### 2.31.3\n\n- `Fix` - Prevent text formatting removal when applying link\n\n### 2.31.2\n\n- `Fix` - Prevent link removal when applying bold to linked text\n\n### 2.31.1\n\n- `Fix` - Prevent the warning from appearing when `readOnly` mode is initially set to `true`\n\n### 2.31.0\n\n- `New` - Inline tools (those with `isReadOnlySupported` specified) can now be used in read-only mode\n- `New` - Inline tools (those with `isReadOnlySupported` specified) shortcuts now work in read-only mode\n- `Improvement` - Block manager passes target tool config to the `conversionConfig.import` method on conversion\n- `Fix` - Fix selection of first block in read-only initialization with \"autofocus=true\"\n- `Fix` - Incorrect caret position after blocks merging in Safari\n- `Fix` - Several toolbox items exported by the one tool have the same shortcut displayed in toolbox\n- `Improvement` - The current block reference will be updated in read-only mode when blocks are clicked\n- `Fix` - codex-notifier and codex-tooltip moved from devDependencies to dependencies in package.json to solve type errors\n- `Fix` - Handle whitespace input in empty placeholder elements to prevent caret from moving unexpectedly to the end of the placeholder\n- `Fix` - Fix the memory leak issue in `Shortcuts` class\n- `Fix` - Fix when / overides selected text outside of the editor\n- `DX` - Tools submodules removed from the repository\n- `Improvement` - Shift + Down/Up will allow to select next/previous line instead of Inline Toolbar flipping\n- `Improvement` - The API `caret.setToBlock()` offset now works across the entire block content, not just the first or last node.\n- `Improvement` - The API `blocks.renderFromHTML()` became async and now can be awaited.\n- `Fix` - `blocks.renderFromHTML()` — Error \"Can't find a Block to remove.\" fixed\n- `Fix` - The API `.clear()` index invalidation fixed\n\n\n\n### 2.30.7\n\n- `Fix` - Link insertion in Safari fixed\n\n### 2.30.6\n\n- `Fix` – Fix the display of ‘Convert To’ near blocks that do not have the ‘conversionConfig.export’ rule specified\n- `Fix` – The Plus button does not appear when the editor is loaded in an iframe in Chrome\n- `Fix` - Prevent inline toolbar from closing in nested instance of editor\n\n### 2.30.5\n\n– `Fix` – Fix exported types\n\n### 2.30.4\n\n- `Fix` - Tool's exporting types added\n\n### 2.30.3\n\n- `Fix` – I18n in nested popover\n\n### 2.30.2\n\n- `Fix` – The onChange callback won't be fired when editor is initialized in the Read-Only mode\n- `Fix` – Convert To supports i18n again\n- `Fix` – Prevent form submit on inline tool click\n\n### 2.30.1\n\n- `Fix` – Remove fake selection after multiple \"convert to\" inline tool toggles\n\n### 2.30.0\n\n- `New` – Block Tunes now supports nesting items\n- `New` – Block Tunes now supports separator items\n- `New` – *Menu Config* – New item type – HTML\n- `New` – *Menu Config* – Default and HTML items now support hints\n- `New` – Inline Toolbar has new look 💅\n- `New` – Inline Tool's `render()` now supports [Menu Config](https://editorjs.io/menu-config/) format\n- `New` – *ToolsAPI* – All installed block tools now accessible via ToolsAPI `getBlockTools()` method\n- `New` – *SelectionAPI* – Exposed methods `save()` and `restore()` that allow to save selection to be able to temporally move focus away, methods `setFakeBackground()` and `removeFakeBackground()` that allow to immitate selection while focus moved away\n- `New` – *BlocksAPI* – Exposed `getBlockByElement()` method that helps find block by any child html element\n- `New` – \"Convert to\" control is now also available in Block Tunes\n- `New` — Editor.js now supports contenteditable placeholders out of the box. Just add `data-placeholder` or `data-placeholder-active` attribute to make it work. The first one will work like native placeholder while the second one will show placeholder only when block is current.\n- `Improvement` — Now Paragraph placeholder will be shown for the current paragraph, not only the first one.\n- `Improvement` - The API `blocks.update` now accepts `tunes` data as optional third argument and makes `data` - block data as optional.\n- `Improvement` — The ability to merge blocks of different types (if both tools provide the conversionConfig)\n- `Improvement` - The API `blocks.convert()` now returns the new block API\n- `Improvement` - The API `caret.setToBlock()` now can accept either BlockAPI or block index or block id\n- `Improvement` – *MenuConfig* – `TunesMenuConfig` type is deprecated, use the `MenuConfig` instead\n– `Improvement` — *Types* — `BlockToolConstructorOptions` type improved, `block` and `config` are not optional anymore\n- `Improvement` - The Plus button and Block Tunes toggler are now better aligned with large line-height blocks, such as Headings\n- `Improvement` — Creating links on Android devices: now the mobile keyboard will have an \"Enter\" key for accepting the inserted link.\n- `Improvement` — Placeholders will stay visible on inputs focus.\n– `Refactoring` – Switched to Vite as Cypress bundler\n- `Fix` — `onChange` will be called when removing the entire text within a descendant element of a block.\n- `Fix` - Unexpected new line on Enter press with selected block without caret\n- `Fix` - Search input autofocus loosing after Block Tunes opening\n- `Fix` - Block removing while Enter press on Block Tunes\n- `Fix` – Unwanted scroll on first typing on iOS devices\n- `Fix` - Unwanted soft line break on Enter press after period and space (\". |\") on iOS devices\n- `Fix` - Caret lost after block conversion on mobile devices.\n- `Fix` - Caret lost after Backspace at the start of block when previoius block is not convertable\n– `Fix` — Deleting whitespaces at the start/end of the block\n- `Fix` — The problem caused by missed \"import type\" in block mutation event types resolved\n\n### 2.29.1\n\n- `Fix` — Toolbox wont be shown when Slash pressed with along with Shift or Alt\n- `Fix` — Toolbox will be opened when Slash pressed in non-US keyboard layout where there is no physical '/' key.\n\n### 2.29.0\n\n- `New` — Editor Config now has the `style.nonce` attribute that could be used to allowlist editor style tag for Content Security Policy \"style-src\"\n- `New` — Toolbox now will be opened by '/' in empty Block instead of Tab\n- `New` — Block Tunes now will be opened by 'CMD+/' instead of Tab in non-empty block\n- `New` — Tab now will navigate through Blocks. In last block Tab will navigate to the next input on page.\n- `Fix` — Passing an empty array via initial data or `blocks.render()` won't break the editor\n- `Fix` — Layout did not shrink when a large document cleared in Chrome\n- `Fix` — Multiple Tooltip elements creation fixed\n- `Fix` — When the focusing Block is out of the viewport, the page will be scrolled.\n- `Fix` - Compiler error \"This import is never used as a value and must use 'import type'...\" fixed\n- `Fix` — `blocks.render()` won't lead the `onChange` call in Safari\n- `Fix` — Editor wrapper element growing on the Inline Toolbar close\n- `Fix` — Fix errors thrown by clicks on a document when the editor is being initialized\n- `Fix` — Caret losing on Mobile Devices when adding a block via Toolbox or via Backspace at the beginning of a Block\n- `Improvement` — Now you can set focus via arrows/Tab to \"contentless\" (decorative) blocks like Delimiter which have no inputs.\n- `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.\n- `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\n- `Improvement` - Now the `data-mutation-free` also allows to skip \"characterData\" mutations (eg. text content change)\n- `Refactoring` — `ce-block--focused` class toggling removed as unused.\n\n### 2.28.2\n\n- `Fix` — Get rid of redundant logs from the build\n\n### 2.28.1\n\n- `Fix` — Some Block were be skipped on saving after pasting them as HTML\n\n### 2.28.0\n\n- `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.\n- `New` - The `blocks.convert(blockId, newType)` API method was added. It allows to convert existing Block to a Block of another type.\n- `New` - The `blocks.insertMany()` API method added. It allows to insert several Blocks to the specified index.\n- `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.\n- `Improvement` - The Delete keydown will work like a Backspace when several Blocks are selected.\n- `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.\n- `Improvement` - Tools shortcuts could be used to convert one Block to another.\n- `Improvement` - Tools shortcuts displayed in the Conversion Toolbar\n- `Improvement` - Initialization Loader has been removed.\n- `Improvement` - Selection style won't override your custom style for `::selection` outside the editor.\n- `Improvement` - Performance optimizations: initialization speed increased, `blocks.render()` API method optimized. Big documents will be displayed faster.\n- `Improvement` - \"Editor saving\" log removed\n- `Improvement` - \"I'm ready\" log removed\n- `Improvement` - The stub-block style is simplified.\n- `Improvement` - If some Block's tool throws an error during construction, we will show Stub block instead of skipping it during render\n- `Improvement` - Call of `blocks.clear()` now will trigger onChange with \"block-removed\" event for all removed blocks.\n- `Improvement` - The `blocks.clear()` now can be awaited.\n- `Improvement` - `BlockMutationType` and `BlockMutationEvent` types exported\n- `Improvement` - `blocks.update(id, data)` now can accept partial data object — it will update only passed properties, others will remain the same.\n- `Improvement` - `blocks.update(id, data)` now will trigger onChange with only `block-change` event.\n- `Improvement` - `blocks.update(id, data)` will return a promise with BlockAPI object of the changed block.\n\n\n### 2.27.2\n\n- `Fix` - `onChange` won't be called when element with data-mutation-free changes some attribute\n\n### 2.27.1\n\n- `Fix` - `onChange` will be called on removing the whole text in a block\n\n### 2.27.0\n\n- `New` — *Toolbar API* — Added a new method for toggling the toolbox.\n- `New` — Added types for block mutation events\n- `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.\n- `Improvement` — *Toolbox* — Number of `close()` method calls optimized.\n- `Improvement` — The `onChange` callback can be muted if all mutations contain nodes with the `data-mutation-free` attribute.\n- `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.\n- `Improvement` — The block mutation handler is now called on every block change (including background changes), instead of only when a block is focused\n- `Improvement` — Number of caret saving method calls optimized for Block Tunes opening/closing.\n- `Improvement` — Package size reduced by removing redundant files.\n- `Refactoring` — Switched from Webpack to Vite as the build system.\n- `Refactoring` — *Dependencies* — Upgraded Cypress to v12 and related libraries to the latest versions.\n- `Refactoring` — *Dependencies* — Upgraded TypeScript to v5.\n- `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.\n- `Refactoring` — All events in common editor Event Bus now have own type declarations.\n- `Refactoring` — Removed the block mutation observer from blocks and attached a single observer to the editor's blocks wrapper element.\n- `Refactoring` — Removed the debounce from the block mutation handler and used batching instead.\n- `Refactoring` — Refactored the popover class for better performance and maintenance.\n- `Fix` — The `onChange` callback won't trigger when block tunes are opened or closed.\n- `Fix` — Resolved a compiler error caused by importing the `BlockToolData` type.\n- `Fix` — Resolved a problem where the document would scroll to the beginning after moving a block above the viewport.\n- `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.\n- `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.\n- `CI` — Ubuntu container is now used for Edge tests runner.\n- `CI` — Node 16 is used for GitHib Actions.\n\n### 2.26.5\n\n- `Fix` — *Types* — Remove unnecessary import that creates a dependency on the `cypress`.\n\n### 2.26.4\n\n- `Improvement` — *Menu Config* — Property `label` renamed to `title`.\n\n### 2.26.3\n\n- `Fix` — *Paste Module* — fix for a problem with specifying of `pasteConfig().tags` in upper case [#2208](https://github.com/codex-team/editor.js/issues/2208).\n\n### 2.26.2\n\n- `Fix` — *Menu Config* — Installed tunes are rendered above default tunes again.\n\n### 2.26.1\n\n- `Improvement` — *Menu Config* — Now it becomes possible to create toggle groups.\n\n### 2.26.0\n\n- `New` — *UI* — Block Tunes became vertical just like the Toolbox 🤩\n- `New` — *Block Tunes API* — Now `render()` method of a Block Tune can return config with just icon, label and callback instead of custom HTML. This improvement is a key to the new straightforward way of configuring tune's appearance in Block Tunes menu.\n- `New` — *Tools API* — As well as `render()` in `Tunes API`, Tool's `renderSettings()` now also supports new configuration format.\n- `New` — *UI* — Meet the new icons from [CodeX Icons](https://github.com/codex-team/icons) pack 🛍 💝\n- `New` — *BlocksAPI* — the `blocks.insert()` method now also have the optional `id` param. If passed, this id will be used instead of the generated one.\n- `Deprecated` — *Styles API* — CSS classes `.cdx-settings-button` and `.cdx-settings-button--active` are not recommended to use. Consider configuring your block settings with new JSON API instead.\n- `Fix` — Wrong element not highlighted anymore when popover opened.\n- `Fix` — When Tunes Menu open keydown events can not be handled inside plugins.\n- `Fix` — If a Tool specifies some tags to substitute on paste, all attributes of that tags will be removed before passing them to the tool. Possible XSS vulnerability fixed.\n- `Fix` — Pasting from Microsoft Word to Chrome (Mac OS) fixed. Now if there are no image-tools connected, regular text content will be pasted.\n- `Fix` — Workaround for the HTMLJanitor bug with Tables (https://github.com/guardian/html-janitor/issues/3) added\n- `Fix` — Toolbox shortcuts appearance and execution fixed [#2112](https://github.com/codex-team/editor.js/issues/2112)\n- `Fix` — Inline Tools click handling on mobile devices improved\n- `Improvement` — *Tools API* — `pasteConfig().tags` now support sanitizing configuration. It allows you to leave some explicitly specified attributes for pasted content.\n- `Improvement` — *CodeStyle* — [CodeX ESLint Config](https://github.com/codex-team/eslint-config) has bee updated. All ESLint/Spelling issues resolved\n- `Improvement` — *ToolsAPI* — The `icon` property of the `toolbox` getter became optional.\n\n\n### 2.25.0\n\n- `New` — *Tools API* — Introducing new feature — toolbox now can have multiple entries for one tool!
\nDue to that API changes: tool's `toolbox` getter now can return either a single config item or an array of config items\n- `New` — *Blocks API* — `composeBlockData()` method was added.\n\n### 2.24.4\n\n- `Fix` — Keyboard selection by word [#2045](https://github.com/codex-team/editor.js/issues/2045)\n\n### 2.24.3\n\n- `Fix` — Issue with toolbox preventing text selection fixed\n\n### 2.24.2\n\n- `Fix` — Scrolling issue when opening toolbox on mobile fixed\n- `Fix` — Typo in toolbox empty placeholder fixed\n- `Fix` — The issue with scroll jumping on block hovering have fixed [2036](https://github.com/codex-team/editor.js/issues/2036)\n- `Improvement` — *Dev Example Page* - Add popup example page\n- `Improvement` — *UI* - The Toolbox will restore the internal scroll on every opening\n\n### 2.24.1\n\n— `Fix` — The I18n of Tools` titles at the Toolbox now works correctly [#2030](https://github.com/codex-team/editor.js/issues/2030)\n\n### 2.24.0\n\n- `New` — *UI* — The Toolbox became vertical 🥳\n- `Improvement` — *UI* — the Plus button will always be shown (previously, it appears only for empty blocks)\n- `Improvement` — *Dev Example Page* - Server added to allow opening example page on other devices in network.\n- `Fix` — `UI` — the Toolbar won't move on hover at mobile viewports. Resolves [#1972](https://github.com/codex-team/editor.js/issues/1972)\n- `Fix` — `OnChange` event invocation after block insertion. [#1997](https://github.com/codex-team/editor.js/issues/1997)\n- `Fix` — `ReadOnly` — the `readonly.isEnabled` API getter now works correctly after `readonly.toggle()` calling. Resolves [#1822](https://github.com/codex-team/editor.js/issues/1822)\n- `Fix` — `Paste` — the inline HTML tags now will be preserved on pasting. [#1686](https://github.com/codex-team/editor.js/pull/1686)\n\n### 2.23.2\n\n— `Fix` — Crash on initialization in the read-only mode [#1968](https://github.com/codex-team/editor.js/issues/1968)\n\n### 2.23.1\n\n— `Fix` — Incorrect release tag fixed\n\n### 2.23.0\n\n- `Improvement` — *EditorConfig* — The `onChange` callback now accepts two arguments: EditorJS API and the CustomEvent with `type` and `detail` allowing to determine what happened with a Block\n- `New` — *Block API* — The new `dispatchChange()` method allows to manually trigger the 'onChange' callback. Useful when Tool made a state mutation that is invisible for editor core.\n- `Improvement` — *UI* — Block Tunes toggler moved to the left\n- `Improvement` — *UI* — Block Actions (BT toggler + Plus Button) will appear on block hovering instead of click\n- `Improvement` — *UI* — Block Tunes toggler icon and Plus button icon updated\n- `Improvement` — *Dev Example Page* — The menu with helpful buttons added to the bottom of the screen\n- `Improvement` — *Dev Example Page* — The 'dark' theme added. Now we can code at night more comfortably.\n- `Improvement` — *Rectangle Selection* — paint optimized\n- `Fix` — *Rectangle Selection* — the first click after RS was not clear selection state. Now does.\n- `Improvement` — *Blocks API* — toolbar moving logic removed from `blocks.move()` and `blocks.swap()` methods. Instead, you should use Toolbar API (it was used by MoveUp and MoveDown tunes, they were updated).\n- `New` — *Blocks API* — The `getBlockIndex()` method added\n- `New` — *Blocks API* — the `insert()` method now has the `replace: boolean` parameter\n- `New` — *Blocks API* — the `insert()` method now returns the inserted `Block API`\n- `New` — *Listeners API* — the `on()` method now returns the listener id.\n- `New` — *Listeners API* — the new `offById()` method added\n- `New` — `API` — The new `UiApi` section was added. It allows accessing some editor UI nodes and methods.\n- `Refactoring` — Toolbox became a standalone class instead of a Module. It can be accessed only through the Toolbar module.\n- `Refactoring` — CI flow optimized.\n- `Fix` - Recognize async `onPaste` handlers in tools [#1803](https://github.com/codex-team/editor.js/issues/1803).\n- `Fix` — Fire onChange event for native inputs [#1750](https://github.com/codex-team/editor.js/issues/1750)\n\n### 2.22.3\n\n- `Fix` — Tool config is passed to `prepare` method [editor-js/embed#68](https://github.com/editor-js/embed/issues/68)\n\n### 2.22.2\n\n- `Improvement` — Inline Toolbar might be used for any contenteditable element inside Editor.js zone\n- `Improvement` *Tunes API* - Tunes now can provide sanitize configuration\n- `Fix` *Tunes API* - Tune config now passed to constructor under `config` property\n- `Fix` *Types* - Add common type for internal and external Tools configuration\n- `Fix` — Block's destroy method is called on block deletion\n- `Fix` - Fix jump to the button of editor zone on CBS\n\n### 2.22.1\n\n- `Fix` — I18n for internal Block Tunes [#1661](https://github.com/codex-team/editor.js/issues/1661)\n\n### 2.22.0\n\n- `New` - `onChange` callback now receive Block API object of affected block\n- `New` - API method `blocks.update(id, data)` added.\n\n### 2.21.0\n\n- `New` - Blocks now have unique ids [#873](https://github.com/codex-team/editor.js/issues/873)\n\n### 2.20.2\n\n- `Fix` — Append default Tunes if user tunes are provided for Block Tool [#1640](https://github.com/codex-team/editor.js/issues/1640)\n- `Fix` - Prevent the leak of codex-tooltip when Editor.js is destroyed [#1475](https://github.com/codex-team/editor.js/issues/1475).\n- `Refactoring` - Notifier module now is a util.\n\n### 2.20.1\n\n- `Fix` - Create a new block when clicked at the bottom [#1588](https://github.com/codex-team/editor.js/issues/1588).\n- `Fix` — Fix sanitization problem with Inline Tools [#1631](https://github.com/codex-team/editor.js/issues/1631)\n- `Fix` — Fix copy in FireFox [1625](https://github.com/codex-team/editor.js/issues/1625)\n- `Refactoring` - The Sanitizer module is util now.\n- `Refactoring` - Tooltip module is util now.\n- `Refactoring` — Refactoring based on LGTM [#1577](https://github.com/codex-team/editor.js/issues/1577).\n- `Refactoring` — Refactoring based on ESLint [#1636](https://github.com/codex-team/editor.js/issues/1636).\n\n### 2.20.0\n\n- `New` — [Block Tunes API](block-tunes.md) added\n\n### 2.19.3\n\n- `Fix` — Ignore error raised by Shortcut module\n\n### 2.19.2\n\n- `New` - `toolbar.toggleBlockSettings()` API method added [#1442](https://github.com/codex-team/editor.js/issues/1421).\n- `Improvements` - A generic type for Tool config added [#1516](https://github.com/codex-team/editor.js/issues/1516)\n- `Improvements` - Remove unused `force` option in `Caret.navigateNext()` and `Caret.navigatePrevious()` [#857](https://github.com/codex-team/editor.js/issues/857#issuecomment-770363438).\n- `Improvements` - Remove bundles from the repo [#1541](https://github.com/codex-team/editor.js/pull/1541).\n- `Improvements` - Document will be scrolled when blocks are selected with `SHIFT+UP` or `SHIFT+DOWN` [#1447](https://github.com/codex-team/editor.js/issues/1447)\n- `Improvements` - The caret will be set on editor copy/paste [#1470](https://github.com/codex-team/editor.js/pull/1470)\n- `Improvements` - Added generic types to OutputBlockData [#1551](https://github.com/codex-team/editor.js/issues/1551).\n- `Fix` - Fix BlockManager.setCurrentBlockByChildNode() with multiple Editor.js instances [#1503](https://github.com/codex-team/editor.js/issues/1503).\n- `Fix` - Fix an unstable block cut process [#1489](https://github.com/codex-team/editor.js/issues/1489).\n- `Fix` - Type definition of the Sanitizer config: the sanitize function now contains param definition [#1491](https://github.com/codex-team/editor.js/pull/1491).\n- `Fix` - Fix unexpected behavior on an empty link pasting [#1348](https://github.com/codex-team/editor.js/issues/1348).\n- `Fix` - Fix SanitizerConfig type definition [#1513](https://github.com/codex-team/editor.js/issues/1513)\n- `Refactoring` - The Listeners module now is a util.\n- `Refactoring` - The Events module now is a util.\n- `Fix` - Editor Config now immutable [#1552](https://github.com/codex-team/editor.js/issues/1552).\n- `Refactoring` - Shortcuts module is util now.\n- `Fix` - Fix bubbling on BlockManagers' listener [#1433](https://github.com/codex-team/editor.js/issues/1433).\n\n\n### 2.19.1\n\n- `Improvements` - The [Cypress](https://www.cypress.io) was integrated as the end-to-end testing framework\n- `Improvements` - Native `typeof`replaced with custom utils methods\n- `Improvements` - Bind shortcuts listeners on the editor wrapper instead of document [#1391](https://github.com/codex-team/editor.js/issues/1391)\n- `Fix` - The problem with destroy() method [#1380](https://github.com/codex-team/editor.js/issues/1380).\n- `Fix` - add getter keyword to `block.mergeable` method [#1415](https://github.com/codex-team/editor.js/issues/1415).\n- `Fix` — Fix problem with entering to Editor.js by Tab key [#1393](https://github.com/codex-team/editor.js/issues/1393)\n- `Fix` - Sanitize pasted block data [#1396](https://github.com/codex-team/editor.js/issues/1396).\n- `Fix` - Unnecessary block creation after arrow navigation at last non-default block[#1414](https://github.com/codex-team/editor.js/issues/1414)\n\n### 2.19\n\n- `New` - Read-only mode 🥳 [#837](https://github.com/codex-team/editor.js/issues/837)\n- `New` - RTL mode added [#670](https://github.com/codex-team/editor.js/issues/670)\n- `New` - Allows users to provide common `inlineToolbar` property which will be used for all tools whose `inlineToolbar` property is set to `true`. It can be overridden by the tool's own `inlineToolbar` property. Also, inline tools will be ordered according to the order of the inline tools in array provided in the `inlineToolbar` property. [#1056](https://github.com/codex-team/editor.js/issues/1056)\n- `New` - Tool's `reset` static method added to the API to clean up any data added by Tool on initialization\n- `Improvements` - The `initialBlock` property of Editor config is deprecated. Use the `defaultBlock` instead. [#993](https://github.com/codex-team/editor.js/issues/993)\n- `Improvements` - BlockAPI `call()` method now returns the result of calling method, thus allowing it to expose arbitrary data as needed [#1205](https://github.com/codex-team/editor.js/pull/1205)\n- `Improvements` - Useless log about missed i18n section has been removed [#1269](https://github.com/codex-team/editor.js/issues/1269)\n- `Improvements` - Allowed to set `false` as `toolbox` config in order to hide Toolbox button [#1221](https://github.com/codex-team/editor.js/issues/1221)\n- `Fix` — Fix problem with types usage [#1183](https://github.com/codex-team/editor.js/issues/1183)\n- `Fix` - Fixed issue with Spam clicking the \"Click to tune\" button duplicates the icons on FireFox. [#1273](https://github.com/codex-team/editor.js/issues/1273)\n- `Fix` - Fixed issue with `editor.blocks.delete(index)` method which throws an error when Editor.js is not focused, even after providing a valid index. [#1182](https://github.com/codex-team/editor.js/issues/1182)\n- `Fix` - Fixed the issue of toolbar not disappearing on entering input in Chinese, Hindi and some other languages. [#1196](https://github.com/codex-team/editor.js/issues/1196)\n- `Fix` - Do not stop events propagation if not needed (essential for React synthetic events) [#1051](https://github.com/codex-team/editor.js/issues/1051) [#946](https://github.com/codex-team/editor.js/issues/946)\n- `Fix` - Tool's `destroy` method is not invoked when `editor.destroy()` is called. [#1047](https://github.com/codex-team/editor.js/issues/1047)\n- `Fix` - Fixed issue with enter key in inputs and textareas [#920](https://github.com/codex-team/editor.js/issues/920)\n- `Fix` - blocks.getBlockByIndex() API method now returns void for indexes out of range [#1270](https://github.com/codex-team/editor.js/issues/1270)\n- `Fix` - Fixed the `Tab` key behavior when the caret is not set inside contenteditable element, but the block is selected [#1302](https://github.com/codex-team/editor.js/issues/1302).\n- `Fix` - Fixed the `onChange` callback issue. This method didn't be called for native inputs before some contenteditable element changed [#843](https://github.com/codex-team/editor.js/issues/843)\n- `Fix` - Fixed the `onChange` callback issue. This method didn't be called after the callback throws an exception [#1339](https://github.com/codex-team/editor.js/issues/1339)\n- `Fix` - The internal `shortcut` getter of Tools classes will work now.\n- `Deprecated` — The Inline Tool `clear()` method is deprecated because the new instance of Inline Tools will be created on every showing of the Inline Toolbar\n\n### 2.18\n\n- `New` *I18n API* — Ability to provide internalization for Editor.js core and tools. [#751](https://github.com/codex-team/editor.js/issues/751)\n- `New` — Block API that allows you to access certain Block properties and methods\n- `Improvements` - TSLint (deprecated) replaced with ESLint, old config changed to [CodeX ESLint Config](https://github.com/codex-team/eslint-config).\n- `Improvements` - Fix many code-style issues, add missed annotations.\n- `Improvements` - Adjusted GitHub action for ESLint.\n- `Improvements` - Blocks API: if `blocks.delete` method is called, but no Block is selected, show warning instead of throwing an error [#1102](https://github.com/codex-team/editor.js/issues/1102)\n- `Improvements` - Blocks API: allow deletion of blocks by specifying block index via `blocks.delete(index)`.\n- `Improvements` - UX: Navigate next Block from the last non-initial one creates new initial Block now [#1103](https://github.com/codex-team/editor.js/issues/1103)\n- `Improvements` - Improve performance of DOM traversing at the `isEmpty()` method [#1095](https://github.com/codex-team/editor.js/issues/1095)\n- `Improvements` - CODE OF CONDUCT added\n- `Improvements` - Disabled useCapture flag for a block keydown handling. That will allow plugins to override keydown and stop event propagation, for example, to make own Tab behavior.\n- `Improvements` - All modules now might have `destroy` method called on Editor.js destroy\n- `Improvements` - Block settings can contain text inputs, focus will be restored after settings closed [#1090](https://github.com/codex-team/editor.js/issues/1090)\n- `Fix` - Editor's styles won't be appended to the `` when another instance have already do that [#1079](https://github.com/codex-team/editor.js/issues/1079)\n- `Fix` - Fixed wrong toolbar icon centering in Firefox [#1120](https://github.com/codex-team/editor.js/pull/1120)\n- `Fix` - Toolbox: Tool's order in Toolbox now saved in accordance with `tools` object keys order [#1073](https://github.com/codex-team/editor.js/issues/1073)\n- `Fix` - Setting `autofocus` config property to `true` cause adding `.ce-block--focused` for the autofocused block [#1073](https://github.com/codex-team/editor.js/issues/1124)\n- `Fix` - Public getter `shortcut` now works for Inline Tools [#1132](https://github.com/codex-team/editor.js/issues/1132)\n- `Fix` - `CMD+A` handler removed after Editor.js destroy [#1133](https://github.com/codex-team/editor.js/issues/1133)\n\n> *Breaking changes* `blocks.getBlockByIndex` method now returns BlockAPI object. To access old value, use BlockAPI.holder property\n\n### 2.17\n\n- `Improvements` - Editor's [onchange callback](https://editorjs.io/configuration#editor-modifications-callback) now accepts an API as a parameter\n- `Fix` - Some mistakes are fixed in [installation.md](installation.md)\n- `Fix` - Fixed multiple paste callback triggering in a case when several editors are instantiated [#1011](https://github.com/codex-team/editor.js/issues/1011)\n- `Fix` - Fixed inline toolbar flipper activation on closing conversion toolbar [#995](https://github.com/codex-team/editor.js/issues/995)\n- `Improvements` - New window tab is opened by clicking on anchor with ctrl [#1057](https://github.com/codex-team/editor.js/issues/1057)\n- `Fix` - Fix block-tune buttons alignment in some CSS-resetors that forces `box-sizing: border-box` rule [#1003](https://github.com/codex-team/editor.js/issues/1003)\n- `Improvements` - New style of a Block Settings button. Focused block background removed.\n- `New` — Add in-house copy-paste support through `application/x-editor-js` mime-type\n- `New` Block [lifecycle hook](tools.md#block-lifecycle-hooks) `moved`\n- `Deprecated` — [`blocks.swap(fromIndex, toIndex)`](api.md) method is deprecated. Use `blocks.move(toIndex, fromIndex)` instead.\n- `Fix` — Improve plain text paste [#1012](https://github.com/codex-team/editor.js/issues/1012)\n- `Fix` — Fix multiline paste [#1015](https://github.com/codex-team/editor.js/issues/1015)\n\n\n### 2.16.1\n\n- `Fix` — Fix Firefox bug with incorrect height and cursor position of empty content editable elements [#947](https://github.com/codex-team/editor.js/issues/947) [#876](https://github.com/codex-team/editor.js/issues/876) [#608](https://github.com/codex-team/editor.js/issues/608) [#876](https://github.com/codex-team/editor.js/issues/876)\n- `Fix` — Set initial hidden Inline Toolbar position [#979](https://github.com/codex-team/editor.js/issues/979)\n- `Fix` — Fix issue with CodeX.Tooltips TypeScript definitions [#978](https://github.com/codex-team/editor.js/issues/978)\n- `Fix` — Fix some issues with Inline and Tunes toolbars.\n- `Fix` - Fix `minHeight` option with zero-value issue [#724](https://github.com/codex-team/editor.js/issues/724)\n- `Improvements` — Disable Conversion Toolbar if there are no Tools to convert [#984](https://github.com/codex-team/editor.js/issues/984)\n\n### 2.16\n\n- `Improvements` — Inline Toolbar design improved\n- `Improvements` — Conversion Toolbar now included in the Inline Toolbar [#853](https://github.com/codex-team/editor.js/issues/853)\n- `Improvements` — All buttons now have beautiful Tooltips provided by [CodeX Tooltips](https://github.com/codex-team/codex.tooltips)\n- `New` — new Tooltips API for displaying tooltips near your custom elements\n- `New` *API* — Block [lifecycle hooks](tools.md#block-lifecycle-hooks)\n- `New` *Inline Tools API* — Ability to specify Tool's title via `title` static getter.\n- `Fix` — On selection from end to start backspace is working as expected now [#869](https://github.com/codex-team/editor.js/issues/869)\n- `Fix` — Fix flipper with empty dom iterator [#926](https://github.com/codex-team/editor.js/issues/926)\n- `Fix` — Normalize node before walking through children at `isEmpty` method [#943](https://github.com/codex-team/editor.js/issues/943)\n- `Fix` — Fixed Grammarly conflict [#779](https://github.com/codex-team/editor.js/issues/779)\n- `Improvements` — Module Listeners now correctly removes events with options [#904](https://github.com/codex-team/editor.js/pull/904)\n- `Improvements` — Styles API: `.cdx-block` default vertical margins decreased from 0.7 to 0.4 ems.\n- `Fix` — Fixed `getRangeCount` call if range count is 0 [#938](https://github.com/codex-team/editor.js/issues/938)\n- `New` — Log levels now available to suppress Editor.js console messages [#962](https://github.com/codex-team/editor.js/issues/962)\n- `Fix` — Fixed wrong navigation on block deletion\n\n### 2.15.1\n\n- `Refactoring` — Constants of tools settings separated by internal and external to correspond API\n- `Refactoring` — Created universal Flipper class that responses for navigation by keyboard inside of any Toolbars\n- `Fix` — First CMD+A on block with now uses default behaviour. Fixed problem with second CMD+A after selection clearing [#827](https://github.com/codex-team/editor.js/issues/827)\n- `Improvements` — Style of inline selection and selected blocks improved\n- `Fix` - Fixed problem when property 'observer' in modificationObserver is not defined\n\n### 2.15\n\n- `New` — New [`blocks.insert()`](api.md) API method [#715](https://github.com/codex-team/editor.js/issues/715).\n- `New` *Conversion Toolbar* — Ability to convert one block to another [#704](https://github.com/codex-team/editor.js/issues/704)\n- `New` *Cross-block selection* — Ability to select multiple blocks by mouse and with SHIFT+ARROWS [#703](https://github.com/codex-team/editor.js/issues/703)\n- `Deprecated` — [`blocks.insertNewBlock()`](api.md) method is deprecated. Use `blocks.insert()` instead.\n- `Improvements` — Inline Toolbar now works on mobile devices [#706](https://github.com/codex-team/editor.js/issues/706)\n- `Improvements` — Toolbar looks better on mobile devices [#706](https://github.com/codex-team/editor.js/issues/706)\n- `Improvements` — Now `pasteConfig` can return `false` to disable paste handling on your Tool [#801](https://github.com/codex-team/editor.js/issues/801)\n- `Fix` — EditorConfig's `onChange` callback now fires when native inputs\\` content has been changed [#794](https://github.com/codex-team/editor.js/issues/794)\n- `Fix` — Resolve bug with deleting leading new lines [#726](https://github.com/codex-team/editor.js/issues/726)\n- `Fix` — Fix inline link Tool to support different link types like `mailto` and `tel` [#809](https://github.com/codex-team/editor.js/issues/809)\n- `Fix` — Added `typeof` util method to check exact object type [#805](https://github.com/codex-team/editor.js/issues/805)\n- `Fix` — Remove internal `enableLineBreaks` option from external Tool settings type description [#825](https://github.com/codex-team/editor.js/pull/825)\n\n### 2.14\n\n- `Fix` *Config* — User config now has higher priority than internal settings [#771](https://github.com/codex-team/editor.js/issues/771)\n- `New` — Ability to work with Block Actions and Inline Toolbar from the keyboard by Tab. [#705](https://github.com/codex-team/editor.js/issues/705)\n- `Fix` — Fix error thrown by click on the empty editor after `blocks.clear()` method calling [#761](https://github.com/codex-team/editor.js/issues/761)\n- `Fix` — Fix placeholder property appearance. Now you can assign it via `placeholder` property of EditorConfig. [#714](https://github.com/codex-team/editor.js/issues/714)\n- `Fix` — Add API shorthands to TS types [#788](https://github.com/codex-team/editor.js/issues/788)\n\n### 2.13\n\n- `Improvements` *BlockSelection* — Block Selection allows to select single editable element via CMD+A\n- `New` *API* — Added [API methods](api.md) to open and close inline toolbar [#665](https://github.com/codex-team/editor.js/issues/665)\n- `New` *Config* - Added new property in EditorConfig `holder`, use this property for append Editor instead `holderId`. `holder` property now support reference on dom element. [#696](https://github.com/codex-team/editor.js/issues/696)\n- `Deprecated` *Config* - `holderId` property now is deprecated and will removed in next major release. Use `holder` instead.\n- `Fix` *Types* — Fixed error with `codex-notifier` package [#713](https://github.com/codex-team/editor.js/issues/713)\n- `Improvements` — Close inline toolbar after creating a new link.\n- `New` *Config* — Option `minHeight` for customizing Editor's bottom zone height added.\n\n### 2.12.4\n\n- `Improvements` — CodeX.Shortcuts version updated to the v1.1 [#684](https://github.com/codex-team/editor.js/issues/684)\n- `Fix` — Do not start multi-block selection on Toolbox and Inline Toolbar [#646](https://github.com/codex-team/editor.js/issues/646)\n- `Fix` — Minor fixes of caret behaviour [#663](https://github.com/codex-team/editor.js/issues/663)\n- `Fix` — Fix inline-link icon position in Firefox [#674](https://github.com/codex-team/editor.js/issues/674)\n\n### 2.12.3\n\n- `Fix` — Make Toolbox tooltip position font-size independent\n\n### 2.12.2\n\n- New *Inline Tools* — pass tool settings from configuration to Tool constructor\n\n### 2.12.1\n\n- `Fix` — Fix processing `color-mod` function in styles\n\n### 2.12.0\n\n- `New` *API* - new `blocks` API method `renderFromHTML`\n\n### 2.11.11\n\n- `New` — Add ability to pass configuration for internal Tools\n\n### 2.11.10\n\n- `Fix` - Fix editor view on mobile devices\n\n### 2.11.9\n\n- `Fix` - Fix inline toolbar buttons margin. Update dependencies list. Update tools for example page.\n\n### 2.11.8\n\n- `Fix` — Block tunes margins now better works with more than 3 buttons\n\n### 2.11.7\n\n- `Fix` *Paste* — Fix pasting into non-initial Blocks\n\n### 2.11.6\n\n- `Fix` *Paste* — Polyfill for Microsoft Edge\n\n### 2.11.5\n\n- `Fix` *RectangleSelection* — Redesign of the scrolling zones\n\n### 2.11.4\n\n- `Fix` - Clear focus when click is outside the Editor instance\n\n### 2.11.3\n\n- `Fix` — Fix CMD+A Selection on multiple Editor instances\n\n### 2.11.2\n\n- `Improvements` — Docs updated and common enhancements\n\n### 2.11.1\n\n- `Fix` *RectangleSelection* — Selection is available only for the main mouse button\n\n### 2.11.0\n\n- `New` — Add API methods shorthands\n\n### 2.10.0\n\n- `New` — Rename from CodeX Editor to Editor.js\n\n### 2.9.5\n\n- `New` — Toolbox now have beautiful helpers with Tool names and shortcuts\n\n### 2.9.4\n\n- `Improvements` — Prevent navigating back on Firefox when Block is removing by backspace\n\n### 2.9.3\n\n- `Fix` — Handle paste only on initial Block\n\n### 2.9.2\n\n- `New` — Blocks selected with Rectangle Selection can be also removed, copied or cut\n\n### 2.9.1\n\n- `Improvements` — Migrate from `postcss-cssnext` to `postcss-preset-env` and disable `postcss-custom-properties` which conflicts with `postcss-preset-env`\n\n### 2.9.0\n\n- `New` *RectangleSelection* — Ability to select Block or several Blocks with mouse\n\n### 2.8.1\n\n- `Fix` *Caret* — Fix \"History back\" call on backspace in Firefox\n\n### 2.8.0\n\n- `Improvements` *API* — Added [API methods](api.md#caretapi) to manage caret position\n\n### 2.7.32\n\n- `Improvements` *Types* — TypeScript types sre updated\n\n### 2.7.31\n\n- `Fix` — Caret now goes through elements without `type` attribute\n\n### 2.7.30\n\n- `Fix` — Fixed selection behavior when text has modifiers form Inline Toolbar\n\n### 2.7.29\n\n- `Fix` — cmd+x works only for custom selection now\n\n### 2.7.28\n\n- `New` [Tools Validation](https://github.com/codex-team/editor.js/blob/master/docs/tools.md#validate-optional) is added.\n\n### 2.2.27\n\n- `New` *Mobile view* — Editor now adopted for mobile devices\n- `New` *Narrow mode* — Editor now adopted for narrow containers\n\n### 2.2.26\n\n- `Improvements` *Caret* — Improvements of the caret behaviour: arrows, backspace and enter keys better handling.\n\n### 2.2.25\n\n- `New` *Autofocus* — Now you can set focus at Editor after page has been loaded\n\n### 2.2.24\n\n- `Improvements` *Paste* handling — minor paste handling improvements\n\n### 2.2.23\n\n- `New` *Shortcuts* — copy and cut Blocks selected by CMD+A\n\n### 2.2—2.7\n\n- `New` *Sanitize API* — [Sanitize Config](https://github.com/codex-team/editor.js/blob/master/docs/tools.md#automatic-sanitize) of `Block Tools` now automatically extends by tags of `Inline Tools` that is enabled by current Tool by `inlineToolbar` option. You don't need more to specify `a, b, mark, code` manually. This feature will be added to fields that supports inline markup.\n- `New` *Block Selection* — Ability to select Block by `CMD+A`, and the whole Editor by double `CMD+A`. After that, you can copy (`CMD+C`), remove (`Backspace`) or clear (`Enter`) selected Blocks.\n- `New` *[Styles API](https://github.com/codex-team/editor.js/blob/master/types/api/styles.d.ts)* — Added `button` class for stylization of any buttons provided by Tools with one unified style.\n- `New` *[Notifier API](https://github.com/codex-team/editor.js/blob/master/docs/api.md#notifierapi)* — methods for showing user notifications: on success, errors, warnings, etc.\n- `New` *Block Tool* — [Table](http://github.com/editor-js/table) constructor 💪\n- `New` If one of the Tools is unavailable on Editor initialization, its Blocks will be rendered with *Dummy Block*, describing that user can not edit content of this Block. Dummy Blocks can be moved, removed and saved as normal Blocks. So saved data won't be lost if one of the Tools is failed\n- `New` [Public TS-types](https://github.com/codex-team/editor.js/tree/master/types) are presented.\n- `Changes` *Tools API* — options `irreplaceable` and `contentless` was removed.\n- `Changes` *Tools API* — [Paste API](https://github.com/codex-team/editor.js/blob/master/docs/tools.md#paste-handling): tags, patterns and mime-types now should be specified by Tool's `pasteConfig` static property. Custom Paste Event should be handled by `onPaste(event)` that should not be static from now.\n- `Changes` *Tools API* — options `displayInToolbox ` and `toolboxIcon` was removed. Use [`toolbox`](https://github.com/codex-team/editor.js/blob/master/docs/tools.md#internal-tool-settings) instead, that should return object with `icon` and `title` field, or `false` if Tool should not be placed at the Toolbox. Also, there are a way to override `toolbox {icon, title}` settings provided by Tool with you own settings at the Initial Config.\n- `Improvements` — All Projects code now on TypeScript\n- `Improvements` — NPM package size decreased from 1300kb to 422kb\n- `Improvements` — Bundle size decreased from 438kb to 252kb\n- `Improvements` — `Inline Toolbar`: when you add a Link to the selected fragment, Editor will highlight this fragment even when Caret is placed into the URL-input.\n- `Improvements` — Block Settings won't be shown near empty Blocks of `initialType` by default. You should click on them instead.\n- `Improvements` — `onChange`-callback now will be fired even with children attributes changing.\n- `Improvements` — HTMLJanitor package was updated due to found vulnerability\n- `Improvements` — Logging improved: now all Editor's logs will be preceded by beautiful label with current Editor version.\n- `Improvements` — Internal `isEmpty` checking was improved for Blocks with many children nodes (200 and more)\n- `Improvements` — Paste improvements: tags that can be substituted by Tool now will matched even on deep-level of pasted DOM three.\n- `Improvements` — There is no more «unavailable» sound on copying Block by `CMD+C` on macOS\n- `Improvements` — Dozens of bugfixes and small improvements\n\nSee a whole [Changelog](/docs/)\n\n### 2.1-beta changelog\n\n- `New` *Tools API* — support pasted content via drag-n-drop or from the Buffer. See [documentation](https://github.com/codex-team/editor.js/blob/master/docs/tools.md#paste-handling) and [example](https://github.com/editor-js/simple-image/blob/master/src/index.js#L177) at the Simple Image Tool.\n- `New` *Tools API* — new `sanitize` getter for Tools for automatic HTML sanitizing of returned data. See [documentation](https://github.com/codex-team/editor.js/blob/master/docs/tools.md#sanitize) and [example](https://github.com/editor-js/paragraph/blob/master/src/index.js#L121) at the Paragraph Tool\n- `New` Added `onChange`-callback, fired after any modifications at the Editor. See [documentation](https://github.com/codex-team/editor.js/blob/master/docs/installation.md#features).\n- `New` New Inline Tool example — [Marker](https://github.com/editor-js/marker)\n- `New` New Inline Tool example — [Code](https://github.com/editor-js/code)\n- `New` New [Editor.js PHP](http://github.com/codex-team/codex.editor.backend) — example of server-side implementation with HTML purifying and data validation.\n- `Improvements` - Improvements of Toolbar's position calculation.\n- `Improvements` — Improved zero-configuration initialization.\n- and many little improvements.\n" }, { "path": "docs/api.md", "content": "# Editor.js API\n\n---\nMost actual API described by [this interface](../types/api/index.d.ts).\n\n---\n📃 See official API documentation [https://editorjs.io/api](https://editorjs.io/api)\n\n---\n\nTools have access to the public methods provided by Editor.js API Module. Plugin and Tune Developers\ncan use Editor\\`s API as they want.\n\n## Block API\n\nAPI for certain Block methods and properties. You can access it through `editor.api.block.getBlockByIndex` method or get it form `block` property of [Tool constructor](../types/tools/block-tool.d.ts) argument.\n\n`name: string` — Block's Tool name (key, specified in `tools` property of initial configuration)\n\n`config: ToolConfig` — Tool config passed on Editor initialization\n\n`holder: HTMLElement` — HTML Element that wraps Tool's HTML content\n\n`isEmpty: boolean` — `true` if Block has any editable content\n\n`selected: boolean` - `true` if Block is selected with Cross-Block Selection\n\n`set stretched(state: boolean)` — set Block's stretch state\n\n`stretched: boolean` — `true` if Block is stretched\n\n`call(methodName: string, param?: object): void` — method to call any Tool's instance methods with checks and error handlers under-the-hood. For example, [Block lifecycle hooks](./tools.md#block-lifecycle-hooks)\n\n`save(): Promise` — returns data saved from current Block's state, including Tool name and saving exec time\n\n`validate(data: BlockToolData): Promise` — calls Tool's validate method if exists\n\n`dispatchChange(): void` - Allows to say Editor that Block was changed. Used to manually trigger Editor's 'onChange' callback. Can be useful for block changes invisible for editor core.\n\n## Api object description\n\nCommon API interface.\n\n```js\nexport interface API {\n blocks: IBlocksAPI;\n caret: ICaretAPI;\n sanitizer: ISanitizerAPI;\n toolbar: IToolbarAPI;\n // ...\n }\n ```\n\n#### BlocksAPI\n\nMethods that working with Blocks\n\n`render(data)` - render passed JSON data\n\n`renderFromHTML(data)` - parse and render passed HTML string (*not for production use*)\n\n`swap(fromIndex, toIndex)` - swaps two Blocks by their positions (deprecated:\nuse 'move' instead)\n\n`move(toIndex, fromIndex)` - moves block from one index to another position.\n`fromIndex` will be the current block's index by default.\n\n`delete(blockIndex?: Number)` - deletes Block with passed index\n\n`getCurrentBlockIndex()` - current Block index\n\n`getBlockByIndex(index: Number)` - returns Block API object by passed index\n\n`getBlocksCount()` - returns Blocks count\n\n`stretchBlock(index: number, status: boolean)` - _Deprecated. Use Block API interface instead._ make Block stretched.\n\n`insertNewBlock()` - __Deprecated__ insert new Block after working place\n\n`insert(type?: string, data?: BlockToolData, config?: ToolConfig, index?: number, needToFocus?: boolean)` - insert new Block with passed parameters\n\n`update(id: string, data?: BlockToolData, tunes?: {[name: string]: BlockTuneData})` - updates block data and block tunes for the block with passed id\n\n#### SanitizerAPI\n\n`clean(taintString, config)` - method uses HTMLJanitor to clean taint string.\n\nEditor.js provides basic config without attributes, but you can inherit by passing your own config.\n\nIf Tool enables inline-tools, we get it's sanitizing rules and merge with your passed custom rules.\n\nUsage:\n\n```js\nlet taintString = '

BlockWithText

'\nlet customConfig = {\n b: true,\n p: {\n style: true,\n },\n}\nthis.api.sanitizer.clean(taintString, customConfig);\n```\n\n### ToolbarAPI\n\nMethods that working with Toolbar\n\n`open()` - opens toolbar\n\n`close()` - closes toolbar, toolbox and blockSettings if they are opened\n\n### InlineToolbarAPI\n\nMethods that works with inline toolbar\n\n`open()` - opens inline toolbar, (opens for the current selection)\n\n`close()` - closes inline toolbar\n\n### ListenerAPI\n\nMethods that allows to work with DOM listener. Useful when you forgot to remove listener. Module collects all listeners and destroys automatically\n\n`on(element: HTMLElement, eventType: string, handler: Function, useCapture?: boolean)` - add event listener to HTML element\n\n`off(element: HTMLElement, eventType: string, handler: Function)` - remove event handler from HTML element\n\n\n### CaretAPI\n\nMethods to manage caret position.\n\nEach method accept `position` and `offset` parameters. `Offset` should be used to shift caret by passed amount of characters.\n\n`Position` can be one of the following values:\n\n| Value | Description\n| --------- | -----------\n| `start` | Caret will be set at the Block's beginning\n| `end` | Caret will be set at the Block end\n| `default` | More or less emulates browser behaviour, in most cases behaves as `start`\n\nEach method returns `boolean` value: true if caret is set successfully or false otherwise (e.g. when there is no Block at index);\n\n`setToFirstBlock(position?: 'end'|'start'|'default', offset?: number): boolean;` — set caret to the first Block\n\n`setToLastBlock(position?: 'end'|'start'|'default', offset?: number): boolean;` — set caret to the last Block\n\n`setToNextBlock(position?: 'end'|'start'|'default', offset?: number): boolean;` — set caret to the next Block\n\n`setToPreviousBlock(position?: 'end'|'start'|'default', offset?: number): boolean;` — set caret to the previous Block\n\n`setToBlock(index: number, position?: 'end'|'start'|'default', offset?: number): boolean;` — set caret to the Block by passed `index`\n\n`focus(atEnd?: boolean): boolean;` — set caret to the Editor. If `atEnd` is true, set it at the end.\n\n### NotifierAPI\n\nIf you need to show any messages for success or failure events you can use notifications module.\n\nCall on target Editor:\n\n```javascript\nlet editor = new EditorJS({\n onReady: () => {\n editor.notifier.show({\n message: 'Editor is ready!'\n });\n },\n});\n```\n\nIn Tool's class:\n\n```javascript\nthis.api.notifier.show({\n message: 'Cannot upload image. Wrong mime-type.',\n style: 'error',\n});\n```\n\n![](assets/14fcdbe4-d6eb-41d4-b66e-e0e86ccf1a4b.jpg)\n\n\nCheck out [`codex-notifier` package page](https://github.com/codex-team/js-notifier) on GitHub to find docs, params and examples.\n\n### Destroy API\n\nIf there are necessity to remove Editor.js instance from the page you can use `destroy()` method.\n\nIt makes following steps:\n\n1. Clear the holder element by setting it\\`s innerHTML to empty string\n\n2. Remove all event listeners related to Editor.js\n\n3. Delete all properties from instance object and set it\\`s prototype to `null`\n\nAfter executing the `destroy` method, editor inctance becomes an empty object. This way you will free occupied JS Heap on your page.\n\n### Tooltip API\n\nMethods for showing Tooltip helper near your elements. Parameters are the same as in [CodeX Tooltips](http://github.com/codex-team/codex.tooltips) lib.\n\n#### Show\n\nMethod shows tooltip with custom content on passed element\n\n```js\nthis.api.tooltip.show(element, content, options);\n```\n\n| parameter | type | description |\n| -- | -- | -- |\n| `element` | _HTMLElement_ | Tooltip will be showed near this element |\n| `content` | _String_ or _Node_ | Content that will be appended to the Tooltip |\n| `options` | _Object_ | Some displaying options, see below |\n\nAvailable showing options\n\n| name | type | action |\n| -- | -- | -- |\n| placement | `top`, `bottom`, `left`, `right` | Where to place the tooltip. Default value is `bottom' |\n| marginTop | _Number_ | Offset above the tooltip with `top` placement |\n| marginBottom | _Number_ | Offset below the tooltip with `bottom` placement |\n| marginLeft | _Number_ | Offset at left from the tooltip with `left` placement |\n| marginRight | _Number_ | Offset at right from the tooltip with `right` placement |\n| delay | _Number_ | Delay before showing, in ms. Default is `70` |\n| hidingDelay | _Number_ | Delay before hiding, in ms. Default is `0` |\n\n#### Hide\n\nMethod hides the Tooltip.\n\n```js\nthis.api.tooltip.hide();\n```\n\n#### onHover\n\nDecorator for showing tooltip near some element by \"mouseenter\" and hide by \"mouseleave\".\n\n```js\nthis.api.tooltip.onHover(element, content, options);\n```\n\n### API Shorthands\n\nEditor`s API provides some shorthands for API methods.\n\n| Alias | Method |\n| ------ | --------------- |\n| `clear` | `blocks.clear` |\n| `render` | `blocks.render` |\n| `focus` | `caret.focus` |\n| `save` | `saver.save` |\n\n> Example\n\n```javascript\nconst editor = EditorJS();\n\neditor.focus();\neditor.save();\n```\n\n" }, { "path": "docs/block-tunes.md", "content": "# Block Tunes\n\nSimilar with [Tools](tools.md) represented Blocks, you can create Block Tunes and connect it to particular Tool or for all Tools.\n\nBlock Tunes allows you to set any additional options to Blocks. For example, with corresponded Block Tunes you can mark Block as «spoiler», give it an anchor, set a background, and so on.\n\n## Base structure\n\nTune's class should have the `isTune` property (static getter) set to `true`.\n\nBlock Tune must implement the `render()` method which returns an HTML Element that will be appended to the Block Settings panel.\n\n- `render()` — create a button\n\nAlso, you can provide optional methods\n\n- `wrap()` — wraps Block content with own HTML elements\n- `save()` — save Tunes state on Editor's save\n\nAt the constructor of Tune's class exemplar you will receive an object with following parameters:\n\n| Parameter | Description |\n| --------- | ----------- |\n| api | Editor's [API](api.md) obejct |\n| config | Configuration of Block Tool Tune is connected to (might be useful in some cases) |\n| block | [Block API](api.md#block-api) methods for block Tune is connected to |\n| data | Saved Tune data |\n\n---\n\n### render(): HTMLElement\n\nMethod that returns button to append to the block settings area\n\n#### Parameters\n\nMethod does not accept any parameters\n\n#### Return value\n\ntype | description |\n-- | -- |\n`HTMLElement` | element that will be added to the block settings area |\n\n---\n\n### wrap(blockContent: HTMLElement): HTMLElement\n\nMethod that accepts Block's content and wrap it with your own layout.\nMight be useful if you want to modify Block appearance.\n\n```javascript\nclass Tune {\n wrap(blockContent) {\n const myWrapper = document.createElement('div');\n\n myWrapper.append(blockContent);\n\n return myWrapper;\n }\n}\n```\n\n#### Parameters\n\nname | type | description |\n-- |-- | -- |\nblockContent | HTMLElement | Block's content (might be wrapped by other Tunes) |\n\n#### Return value\n\n| type | description |\n| -- | -- |\n| HTMLElement | Your element that wraps block content |\n\n---\n\n### save()\n\nMethod should return Tune's state you want to save to Editor's output\n\n#### Parameters\n\nNo parameters\n\n#### Return value\n\ntype | description |\n-- | -- |\n`any` | any data you want to save |\n\n---\n\n### static prepare()\n\nIf you need to prepare some data for Tune (eg. load external script, create HTML nodes in the document, etc) you can use the static `prepare()` method.\n\nIt accepts tunes config passed on Editor's initialization as an argument:\n\n\n```javascript\nclass Tune {\n static prepare(config) {\n loadScript();\n insertNodes();\n ...\n }\n}\n```\n\n#### Parameters\n\ntype | description |\n-- | -- |\n`object` | your Tune configuration |\n\n\n#### Return value\n\nNo return value\n\n---\n\n### static reset()\n\nOn Editor destroy you can use an opposite method `reset` to clean up all prepared data:\n\n```javascript\nclass Tune {\n static reset() {\n cleanUpScripts();\n deleteNodes();\n ...\n }\n}\n```\n\n#### Parameters\n\nNo parameters\n\n#### Return value\n\nNo return value\n\n---\n\n### static get sanitize()\n\nIf your Tune inserts any HTML markup into Block's content you need to provide sanitize configuration, so your HTML is not trimmed on save.\n\nPlease see more information at [sanitizer page](sanitizer.md).\n\n\n```javascript\nclass Tune {\n static get sanitize() {\n return {\n sup: true\n }\n }\n}\n```\n\n## Format\n\nTunes data is saved to `tunes` property of output object:\n\n```\n{\n blocks: [\n {\n type: 'paragraph',\n data: {\n text: 'This is paragraph with Tune'\n },\n tunes: {\n 'my-tune-name': {},\n favorite: true,\n anchor: 'might be string'\n }\n }\n ]\n}\n```\n" }, { "path": "docs/caret.md", "content": "# Editor.js Caret Module\n\nThe `Caret` module contains methods working with caret. Uses [Range](https://developer.mozilla.org/en-US/docs/Web/API/Range) methods to navigate caret\nbetween blocks. \n\nCaret class implements basic Module class that holds User configuration\nand default Editor.js instances\n\n## Properties\n\n## Methods\n\n### setToBlock\n\n```javascript\nCaret.setToBlock(block, position, offset)\n```\n\n> Method gets Block instance and puts caret to the text node with offset\n\n#### params\n\n| Param | Type | Description|\n| -------------|------ |:-------------:|\n| block | Object | Block instance that BlockManager created|\n| position | String | Can be 'start', 'end' or 'default'. Other values will be treated as 'default'. Shows position of the caret regarding to the Block.|\n| offset | Number | caret offset regarding to the text node (Default: 0)|\n\n\n### setToTheLastBlock\n\n```javascript\nCaret.setToTheLastBlock()\n```\n\n> sets Caret at the end of last Block\nIf last block is not empty, inserts another empty Block which is passed as initial\n" }, { "path": "docs/installation.md", "content": "# Installation Guide\n\nThere are few steps to run Editor.js on your site.\n\n1. [Load Editor's core](#load-editors-core)\n2. [Load Tools](#load-tools)\n3. [Initialize Editor's instance](#create-editor-instance)\n\n## Load Editor's core\n\nFirstly you need to get Editor.js itself. It is a [minified script](../dist/editor.js) with minimal available\n\nChoose the most usable method of getting an Editor for you.\n\n- Node package\n- Source from CDN\n- Local file from a project\n\n### Node.js\n\nInstall the package via NPM or Yarn\n\n```shell\nnpm i @editorjs/editorjs\n```\n\nInclude module at your application\n\n```javascript\nimport EditorJS from '@editorjs/editorjs';\n```\n\n### Use from CDN\n\nYou can load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@editorjs/editorjs).\n\n`https://cdn.jsdelivr.net/npm/@editorjs/editorjs@2.10.0`\n\nThen require this script.\n\n```html\n\n```\n\n### Save sources to project\n\nCopy [editor.js](../dist/editor.js) file to your project and load it.\n\n```html\n\n```\n\n## Load Tools\n\nEach Block at the Editor.js represented by [Tools](tools.md). There are simple external scripts with their own logic. You'll probably want to use several Block Tools that should be connected.\n\nFor example, check out our [Header](https://github.com/editor-js/header) Tool that represents heading blocks.\n\nYou can install the Header Tool via the same ways as an Editor (Node.js, CDN, local file).\n\nCheck [Editor.js's community](https://github.com/editor-js/) to see Tools examples.\n\n**Example:** use Header from CDN\n\n```html\n\n```\n\n## Create Editor instance\n\nCreate an instance of Editor.js and pass [Configuration Object](../src/types-internal/editor-config.ts).\nAt least the `holder` option is required.\n\n```html\n
\n```\n\nYou can create a simple Editor only with a default Paragraph Tool by passing a string with element's Id (wrapper for Editor) as a configuration param or use default `editorjs`.\n\n```javascript\nvar editor = new EditorJS(); /** Zero-configuration */\n\n// equals\n\nvar editor = new EditorJS('editorjs');\n````\n\nOr pass a whole settings object.\n\n```javascript\nvar editor = new EditorJS({\n /**\n * Create a holder for the Editor and pass its ID\n */\n holder : 'editorjs',\n\n /**\n * Available Tools list.\n * Pass Tool's class or Settings object for each Tool you want to use\n */\n tools: {\n header: {\n class: Header,\n inlineToolbar : true\n },\n // ...\n },\n\n /**\n * Previously saved data that should be rendered\n */\n data: {}\n});\n```\n\n## Ready callback\n\nEditor.js needs a bit of time to initialize. It is an asynchronous action so it won't block execution of your main script.\n\nIf you need to know when the editor instance is ready you can use one of the following ways:\n\n##### Pass `onReady` property to the configuration object.\n\nIt must be a function:\n\n```javascript\nvar editor = new EditorJS({\n // Other configuration properties\n\n /**\n * onReady callback\n */\n onReady: () => {console.log('Editor.js is ready to work!')}\n});\n```\n\n#### Use `isReady` promise.\n\nAfter you create a new `EditorJS` object it will contain `isReady` property.\nIt is a Promise object that resolves when the editor will be ready to work and rejected otherwise.\nIf there is an error during initialization `isReady` promise will be rejected with an error message.\n\n```javascript\nvar editor = new EditorJS();\n\neditor.isReady\n .then(() => {\n /** Do anything you need after editor initialization */\n })\n .catch((reason) => {\n console.log(`Editor.js initialization failed because of ${reason}`)\n });\n```\n\nYou can use `async/await` to keep your code looking synchronous:\n\n```javascript\nvar editor = new EditorJS();\n\ntry {\n await editor.isReady;\n /** Do anything you need after editor initialization */\n} catch (reason) {\n console.log(`Editor.js initialization failed because of ${reason}`)\n}\n```\n\n\n## Saving Data\n\nCall `editor.saver.save()` and handle returned Promise with saved data.\n\n```javascript\neditor.saver.save()\n .then((savedData) => {\n console.log(savedData);\n });\n```\n\n## Features\n\nAlso, Editor.js provides useful methods to work with Editor's state.\n\n```javascript\nvar editor = new EditorJS({\n // Other configuration properties\n\n /**\n * onReady callback\n */\n onReady: () => {console.log('Editor.js is ready to work!')},\n\n /**\n * onChange callback\n * Accepts CustomEvent describing what happened\n */\n onChange: (editorAPI, event) => {console.log('Now I know that Editor\\'s content changed!')}\n});\n```\n\n## Example\n\nTake a look at the [example.html](../example/example.html) to view more detailed examples.\n" }, { "path": "docs/releases.md", "content": "# Branches, versions and releases — complete guideline\n\n## Branches\n\nThe project has two main branches: `master` and `next`.\n\nBranch `master` contains the latest stable version of the editor.\nThe latest version published to NPM available by default or by the tag `latest`.\n\nBranch `next` used for development the next (release candidate) version of the editor.\nIt may contain bug fixes, improvements or features. This version is available in NPM by `next` tag.\n\n## Versions\n\nWe use [semantic versioning](https://semver.org) as a main guide for naming updates.\n\n`..`\n\nYou need to bump the part of version according the changes:\n\n- `patch` — for bug fixes, docs updates, code style fixes and other changes which do not affect the result project bundle\n- `minor` — for new features with no backward compatibility problems.\n- `major` — for breaking changes without backward compatibility with the api of the previous version of the project.\n\nPre-release versions may contain additional `-rc.*` suffix.\n\n## Release publishing\n\nDrafts for new releases are created automatically via [create-a-release-draft.yml](.github/workflows/create-a-release-draft.yml)\nworkflow when pull request to `next` branch was merged with an updated version in the package.json file.\n\nThere is a [workflow](.github/workflows/publish-package-to-npm.yml) that fired on a new release publishing on GitHub.\n\nUse target version changelog as a description.\n\n![](assets/57267bab-f2f0-411b-a9d1-69abee6abab5.jpg)\n\nThen you can publish the release and wait for package publishing via action.\n\nThis package version will be published to NPM with default `latest` tag.\n\n### Release candidate publishing\n\nIf you want to publish release candidate version, use suffix `-rc.*` for package\nversion in package.json file and in tag on releases page. Workflow will detect it and mark a release as \"pre-release\".\n\n![](assets/796de9eb-bbe0-485c-bc8f-9a4cb76641b7.jpg)\n\nThis package version will be published to NPM with `next` tag.\n\nStable version: `2.19.0`\nRelease candidate: `2.19.1-rc.0`, `2.19.1-rc.1`, ...\nNext version: `2.19.1`\n\n## Auto-bump version\n\nAfter each PR merge to the `next` branch [bump-version-on-merge-next.yml](.github/workflows/bump-version-on-merge-next.yml)\nworkflow will check if a package version was updated. If there is no update then it will open a new PR with a next\nprerelease version.\n\n### How it works\n\nThe command for bumping a version will be running in a workflow.\n\n`yarn version --prerelease --preid rc --no-git-tag-version`\n\nPrerelease version will be bumped or a new prerelease patch will be created:\n\n- `2.19.1` -> `2.19.2-rc.0`\n- `2.19.2-rc.0` -> `2.19.2-rc.1`\n\n### Change version\n\nYou can edit version (and PR name of course) if you need to publish not a pre-release version or any other.\n\nIf the next update is planned to raise the minor version (`2.19.1` -> `2.20.0`), then change it before version update merge.\n\n- `2.19.1` will be bumped to `2.19.2-rc.0` be default, change `2.19.2-rc.0` to `2.20.0-rc.0`\n\n### Ignore update\n\nIf you do not need to upgrade and publish the update with the merged pull request (docs update or any other non-important changes),\nyou can close the pull request generated by the workflow.\n\n## Example pipeline\n\nLet's imagine that package version is `2.19.0` and you want to add some bug fixes and publish an update as `2.19.1`.\n\n1. Merge a single update or a few pulls with fixes to the default branch `next`.\n2. Workflow [bump-version-on-merge-next.yml](.github/workflows/bump-version-on-merge-next.yml) will bump the version up\nto `2.19.1-rc.0` in the package.json and open a new pull request.\n3. After bump version PR merge, the workflow [create-a-release-draft.yml](.github/workflows/create-a-release-draft.yml)\nwill automatically create a draft release on GitHub.\n4. Check this new draft release on the releases page. Check tag `v2.19.1-rc.0` and notice \"This is pre-release\" checkbox\nif it should be for a release candidate versions. Then publish that release.\n5. [Workflow](.github/workflows/publish-package-to-npm.yml) will automatically push the package to NPM with tag `next`.\n6. When you ready to publish a release, remove suffix from version name in package.json (`2.19.1-rc.0` -> `v2.19.1`)\nin pull request from workflow [bump-version-on-merge-next.yml](.github/workflows/bump-version-on-merge-next.yml).\nFollow steps 3-5 with workflows and publish a new version as `latest` update.\n7. Merge branch `next` to `master` and save sources for history.\n" }, { "path": "docs/sanitizer.md", "content": "# Editor.js Sanitizer Module\n\nThe `Sanitizer` module represents a set of methods that clears taint strings.\nUses lightweight npm package with simple API [html-janitor](https://www.npmjs.com/package/html-janitor)\n\n## Methods \n\n### clean\n\n```javascript\nclean(taintString, customConfig)\n```\n\n> Cleans up the passed taint string\n \n#### params\n\n| Param | Type | Description|\n| -------------|------ |:-------------:|\n| taintString | String | string that needs to be cleaned|\n| customConfig | Object | Can be passed new config per usage (Default: uses default configuration)|\n\n" }, { "path": "docs/toolbar-settings.md", "content": "# Editor.js Toolbar Block Settings Module\n\nToolbar Module has space for Block settings. Settings divided into:\n - space for plugin's settings, that is described by «Plugin»'s Developer\n - space for default settings. This option is also can be implemented and expanded\n\nThey difference between zones is that the first option is specified by plugin\nand each Block can have different options, when second option is for every Block\nregardless to the plugin's option.\n\n### Let's look the examples:\n\n«Plugin»'s Developers need to expand «renderSettings» method that returns HTML.\nEvery user action will be handled by itself. So, you can easily write\ncallbacks that switches your content or makes better. For more information\nread [Tools](tools.md).\n\n---\n\n«Tune»'s Developers need to implement core-provided interface to develop\ntunes that will be appeared in Toolbar default settings zone.\n\nTunes must expand two important methods:\n - `render()` - returns HTML and it is appended to the default settings zone\n - `save()` - extracts important information to be saved\n\nNo restrictions. Handle user action by yourself\n\nCreate Class that implements block-tune.ts\n\nYour Tune's constructor gets argument as object and it includes:\n - {Object} api - object contains public methods from modules. @see [API](api.md)\n - {Object} settings - settings contains block default state.\nThis object could have information about cover, anchor and so on.\n\nExample on TypeScript:\n\n```js\n\nimport IBlockTune from './block-tune';\n\nexport default class YourCustomTune implements IBlockTune {\n\n public constructor({api, settings}) {\n this.api = api;\n this.settings = settings;\n }\n\n render() {\n let someHTML = '...';\n return someHTML;\n }\n\n save() {\n // Return the important data that needs to be saved\n return object\n }\n\n someMethod() {\n // moves current block down\n this.api.blocks.moveDown();\n }\n}\n```\n\nExample on ES6\n\n```js\nexport default class YourCustomTune {\n\n constructor({api, settings}) {\n this.api = api;\n this.settings = settings;\n }\n\n render() {\n let someHTML = '...';\n return someHTML;\n }\n\n save() {\n // Return the important data that needs to be saved\n return object\n }\n\n someMethod() {\n // moves current block down\n this.api.blocks.moveDown();\n }\n}\n```\n" }, { "path": "docs/tools-inline.md", "content": "# Tools for the Inline Toolbar\n\nSimilar with [Tools](tools.md) represented Blocks, you can create Tools for the Inline Toolbar. It will work with \nselected fragment of text. The simplest example is `bold` or `italic` Tools.\n\n## Base structure\n\nFirst of all, Tool's class should have a `isInline` property (static getter) set as `true`. \n\nAfter that Inline Tool should implement next methods.\n\n- `render()` — create a button\n- `surround()` — works with selected range\n- `checkState()` — get Tool's activated state by selected range\n\nAlso, you can provide optional methods\n\n- `renderActions()` — create additional element below the buttons\n- `clear()` — clear Tool's stuff on opening/closing of Inline Toolbar\n- `sanitize()` — sanitizer configuration\n\nAt the constructor of Tool's class exemplar you will accept an object with the [API](api.md) as a parameter.\n\n---\n\n### render()\n\nMethod that returns button to append at the Inline Toolbar\n\n#### Parameters\n\nMethod does not accept any parameters\n\n#### Return value\n\ntype | description | \n-- | -- |\n`HTMLElement` | element that will be added to the Inline Toolbar |\n\n---\n\n### surround(range: Range)\n\nMethod that accepts selected range and wrap it somehow\n\n#### Parameters\n\nname | type | description | \n-- |-- | -- |\nrange | Range | first range of current Selection |\n\n#### Return value\n\nThere is no return value\n\n---\n\n### checkState(selection: Selection)\n\nGet Selection and detect if Tool was applied. For example, after that Tool can highlight button or show some details.\n\n#### Parameters\n\nname | type | description | \n-- |-- | -- |\nselection | Selection | current Selection |\n\n#### Return value\n\ntype | description | \n-- | -- |\n`Boolean` | `true` if Tool is active, otherwise `false` |\n\n---\n\n### renderActions()\n\nOptional method that returns additional Element with actions. \nFor example, input for the 'link' tool or textarea for the 'comment' tool. \nIt will be places below the buttons list at Inline Toolbar.\n\n#### Parameters\n\nMethod does not accept any parameters\n\n#### Return value\n\ntype | description | \n-- | -- |\n`HTMLElement` | element that will be added to the Inline Toolbar |\n\n---\n\n### clear()\n\nOptional method that will be called on opening/closing of Inline Toolbar. \nCan contain logic for clearing Tool's stuff, such as inputs, states and other.\n\n#### Parameters\n\nMethod does not accept any parameters\n\n#### Return value\n\nMethod should not return a value. \n\n### static get sanitize()\n\nWe recommend to specify the Sanitizer config that corresponds with inline tags that is used by your Tool. \nIn that case, your config will be merged with sanitizer configuration of Block Tool \nthat is using the Inline Toolbar with your Tool.\n\nExample:\n\nIf your Tool wrapps selected text with `` tag, the sanitizer config should looks like this:\n\n```js\nstatic get sanitize() {\n return {\n b: {} // {} means clean all attributes. true — leave all attributes\n }\n}\n``` \n\nRead more about Sanitizer configuration at the [Tools#sanitize](tools.md#sanitize)\n\n### Specifying a title\n\nYou can pass your Tool's title via `title` static getter. It can be used, for example, in the Tooltip with \nicon description that appears by hover. \n\n```ts\nexport default class BoldInlineTool implements InlineTool {\n /**\n * Specifies Tool as Inline Toolbar Tool\n *\n * @return {boolean}\n */\n public static isInline = true;\n\n /**\n * Title for hover-tooltip\n */\n public static title: string = 'Bold';\n\n // ... other methods\n}\n```\n" }, { "path": "docs/tools.md", "content": "# Editor.js Tools\n\nEditor.js is a block-oriented editor. It means that entry composed with the list of `Blocks` of different types: `Texts`, `Headers`, `Images`, `Quotes` etc.\n\n`Tool` — is a class that provide custom `Block` type. All Tools represented by `Plugins`.\n\nEach Tool should have an installation guide.\n\n## Tool class structure\n\n### constructor()\n\nEach Tool's instance called with an params object.\n\n| Param | Type | Description |\n| ------ | ------------------------------------------------------ | ----------------------------------------------- |\n| api | [`IAPI`](../types/index.d.ts) | Editor.js's API methods |\n| config | [`ToolConfig`](../types/tools/tool-config.d.ts) | Special configuration params passed in «config» |\n| data | [`BlockToolData`](../types/tools/block-tool-data.d.ts) | Data to be rendered in this Tool |\n| block | [`BlockAPI`](../types/api/block.d.ts) | Block's API methods |\n\n[iapi-link]: ../src/types-internal/api.ts\n\n#### Example\n\n```javascript\nconstructor({data, config, api}) {\n this.data = data;\n this.api = api;\n this.config = config;\n // ...\n}\n```\n\n### render()\n\nMethod that returns Tool's element {HTMLElement} that will be placed into Editor.\n\n### save()\n\nProcess Tool's element created by `render()` function in DOM and return Block's data.\n\n### validate(data: BlockToolData): boolean|Promise\\ _optional_\n\nAllows to check correctness of Tool's data. If data didn't pass the validation it won't be saved. Receives Tool's `data` as input param and returns `boolean` result of validation.\n\n### merge() _optional_\n\nMethod that specifies how to merge two `Blocks` of the same type, for example on `Backspace` keypress.\nMethod does accept data object in same format as the `Render` and it should provide logic how to combine new\ndata with the currently stored value.\n\n## Internal Tool Settings\n\nOptions that Tool can specify. All settings should be passed as static properties of Tool's class.\n\n| Name | Type | Default Value | Description |\n| -- | -- | -- | -- |\n| `toolbox` | _Object_ | `undefined` | Pass the `icon` and the `title` there to display this `Tool` in the Editor's `Toolbox`
`icon` - HTML string with icon for the Toolbox
`title` - title to be displayed at the Toolbox.

May contain an array of `{icon, title, data}` to display the several variants of the tool, for example \"Ordered list\", \"Unordered list\". See details at [the documentation](https://editorjs.io/tools-api#toolbox) |\n| `enableLineBreaks` | _Boolean_ | `false` | With this option, Editor.js won't handle Enter keydowns. Can be helpful for Tools like `` where line breaks should be handled by default behaviour. |\n| `isInline` | _Boolean_ | `false` | Describes Tool as a [Tool for the Inline Toolbar](tools-inline.md) |\n| `isTune` | _Boolean_ | `false` | Describes Tool as a [Block Tune](block-tunes.md) |\n| `sanitize` | _Object_ | `undefined` | Config for automatic sanitizing of saved data. See [Sanitize](#sanitize) section. |\n| `conversionConfig` | _Object_ | `undefined` | Config allows Tool to specify how it can be converted into/from another Tool. See [Conversion config](#conversion-config) section. |\n\n## User configuration\n\nAll Tools can be configured by users. You can set up some of available settings along with Tool's class\nto the `tools` property of Editor Config.\n\n```javascript\nvar editor = new EditorJS({\n holder : 'editorjs',\n tools: {\n text: {\n class: Text,\n inlineToolbar : true,\n // other settings..\n },\n header: Header\n },\n defaultBlock : 'text',\n});\n```\n\nThere are few options available by Editor.js.\n\n| Name | Type | Default Value | Description |\n| -- | -- | -- | -- |\n| `inlineToolbar` | _Boolean/Array_ | `false` | Pass `true` to enable the Inline Toolbar with all Tools, or pass an array with specified Tools list |\n| `config` | _Object_ | `null` | User's configuration for Plugin.\n\n## Tool prepare and reset\n\nIf you need to prepare some data for Tool (eg. load external script, create HTML nodes in the document, etc) you can use static prepare method.\n\nIt accepts tools config passed on Editor's initialization as an argument:\n\n```javascript\nclass Tool {\n static prepare(config) {\n loadScript();\n insertNodes();\n ...\n }\n}\n```\n\nOn Editor destroy you can use an opposite method `reset` to clean up all prepared data:\n\n```javascript\nclass Tool {\n static reset() {\n cleanUpScripts();\n deleteNodes();\n ...\n }\n}\n```\n\nBoth methods might be async.\n\n## Paste handling\n\nEditor.js handles paste on Blocks and provides API for Tools to process the pasted data.\n\nWhen user pastes content into Editor, pasted content will be splitted into blocks.\n\n1. If plain text will be pasted, it will be splitted by new line characters\n2. If HTML string will be pasted, it will be splitted by block tags\n\nAlso Editor API allows you to define your own pasting scenario. You can either:\n\n1. Specify **HTML tags**, that can be represented by your Tool. For example, Image Tool can handle `` tags.\nIf tags you specified will be found on content pasting, your Tool will be rendered.\n2. Specify **RegExp** for pasted strings. If pattern has been matched, your Tool will be rendered.\n3. Specify **MIME type** or **extensions** of files that can be handled by your Tool on pasting by drag-n-drop or from clipboard.\n\nFor each scenario, you should do 2 next things:\n\n1. Define static getter `pasteConfig` in Tool class. Specify handled patterns there.\n2. Define public method `onPaste` that will handle PasteEvent to process pasted data.\n\n### HTML tags handling\n\nTo handle pasted HTML elements object returned from `pasteConfig` getter should contain following field:\n\n| Name | Type | Description |\n| -- | -- | -- |\n| `tags` | `String[]` | _Optional_. Should contain all tag names you want to be extracted from pasted data and processed by your `onPaste` method |\n\nFor correct work you MUST provide `onPaste` handler at least for `defaultBlock` Tool.\n\n#### Example\n\nHeader Tool can handle `H1`-`H6` tags using paste handling API\n\n```javascript\nstatic get pasteConfig() {\n return {\n tags: ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'],\n }\n}\n```\n\n**Note. Same tag can be handled by one (first specified) Tool only.**\n\n**Note. All attributes of pasted tag will be removed. To leave some attribute, you should explicitly specify them. Se below**\n\nLet's suppose you want to leave the 'src' attribute when handle pasting of the `img` tags. Your config should look like this:\n\n```javascript\nstatic get pasteConfig() {\n return {\n tags: [\n {\n img: {\n src: true\n }\n }\n ],\n }\n}\n```\n\n[Read more](https://editorjs.io/sanitizer) about the sanitizing configuration.\n\n### RegExp patterns handling\n\nYour Tool can analyze text by RegExp patterns to substitute pasted string with data you want. Object returned from `pasteConfig` getter should contain following field to use patterns:\n\n| Name | Type | Description |\n| -- | -- | -- |\n| `patterns` | `Object` | _Optional_. `patterns` object contains RegExp patterns with their names as object's keys |\n\n**Note** Editor will check pattern's full match, so don't forget to handle all available chars in there.\n\nPattern will be processed only if paste was on `defaultBlock` Tool and pasted string length is less than 450 characters.\n\n> Example\n\nYou can handle YouTube links and insert embeded video instead:\n\n```javascript\nstatic get pasteConfig() {\n return {\n patterns: {\n youtube: /http(?:s?):\\/\\/(?:www\\.)?youtu(?:be\\.com\\/watch\\?v=|\\.be\\/)([\\w\\-\\_]*)(&(amp;)?[\\w\\?‌​=]*)?/\n },\n }\n}\n```\n\n### Files pasting\n\nYour Tool can handle files pasted or dropped into the Editor.\n\nTo handle file you should provide `files` property in your `pasteConfig` configuration object.\n\n`files` property is an object with the following fields:\n\n| Name | Type | Description |\n| ---- | ---- | ----------- |\n| `extensions` | `string[]` | _Optional_ Array of extensions your Tool can handle |\n| `mimeTypes` | `sring[]` | _Optional_ Array of MIME types your Tool can handle |\n\nExample\n\n```javascript\nstatic get pasteConfig() {\n return {\n files: {\n mimeTypes: ['image/png'],\n extensions: ['json']\n }\n }\n}\n```\n\n### Pasted data handling\n\nIf you registered some paste substitutions in `pasteConfig` property, you **should** provide `onPaste` callback in your Tool class.\n`onPaste` should be public non-static method. It accepts custom _PasteEvent_ object as argument.\n\nPasteEvent is an alias for three types of events - `tag`, `pattern` and `file`. You can get the type from _PasteEvent_ object's `type` property.\nEach of these events provide `detail` property with info about pasted content.\n\n| Type | Detail |\n| ----- | ------ |\n| `tag` | `data` - pasted HTML element |\n| `pattern` | `key` - matched pattern key you specified in `pasteConfig` object
`data` - pasted string |\n| `file` | `file` - pasted file |\n\nExample\n\n```javascript\nonPaste (event) {\n switch (event.type) {\n case 'tag':\n const element = event.detail.data;\n\n this.handleHTMLPaste(element);\n break;\n\n case 'pattern':\n const text = event.detail.data;\n const key = event.detail.key;\n\n this.handlePatternPaste(key, text);\n break;\n\n case 'file':\n const file = event.detail.file;\n\n this.handleFilePaste(file);\n break;\n }\n}\n```\n\n### Disable paste handling\n\nIf you need to disable paste handling on your Tool for some reason, you can provide `false` as `pasteConfig` value.\nThat way paste event won't be processed if fired on your Tool:\n\n```javascript\nstatic get pasteConfig {\n return false;\n}\n```\n\n## Sanitize \n\nEditor.js provides [API](sanitizer.md) to clean taint strings.\nUse it manually at the `save()` method or or pass `sanitizer` config to do it automatically.\n\n### Sanitizer Configuration\n\nThe example of sanitizer configuration\n\n```javascript\nlet sanitizerConfig = {\n b: true, // leave \n p: true, // leave

\n}\n```\n\nKeys of config object is tags and the values is a rules.\n\n#### Rule\n\nRule can be boolean, object or function. Object is a dictionary of rules for tag's attributes.\n\nYou can set `true`, to allow tag with all attributes or `false|{}` to remove all attributes,\nbut leave tag.\n\nAlso you can pass special attributes that you want to leave.\n\n```javascript\na: {\n href: true\n}\n```\n\nIf you want to use a custom handler, use should specify a function\nthat returns a rule.\n\n```javascript\nb: function(el) {\n return !el.textContent.includes('bad text');\n}\n```\n\nor\n\n```javascript\na: function(el) {\n let anchorHref = el.getAttribute('href');\n if (anchorHref && anchorHref.substring(0, 4) === 'http') {\n return {\n href: true,\n target: '_blank'\n }\n } else {\n return {\n href: true\n }\n }\n}\n```\n\n### Manual sanitize\n\nCall API method `sanitizer.clean()` at the save method for each field in returned data.\n\n```javascript\nsave() {\n return {\n text: this.api.sanitizer.clean(taintString, sanitizerConfig)\n }\n}\n```\n\n### Automatic sanitize\n\nIf you pass the sanitizer config as static getter, Editor.js will automatically sanitize your saved data.\n\nNote that if your Tool is allowed to use the Inline Toolbar, we will get sanitizing rules for each Inline Tool\nand merge with your passed config.\n\nYou can define rules for each field\n\n```javascript\nstatic get sanitize() {\n return {\n text: {},\n items: {\n b: true, // leave \n a: false, // remove \n }\n }\n}\n```\n\nDon't forget to set the rule for each embedded subitems otherwise they will\nnot be sanitized.\n\nif you want to sanitize everything and get data without any tags, use `{}` or just\nignore field in case if you want to get pure HTML\n\n```javascript\nstatic get sanitize() {\n return {\n text: {},\n items: {}, // this rules will be used for all properties of this object\n // or\n items: {\n // other objects here won't be sanitized\n subitems: {\n // leave and in subitems\n a: true,\n b: true,\n }\n }\n }\n}\n```\n\n## Conversion config \n\nEditor.js has a Conversion Toolbar that allows user to convert one Block to another.\n\n![](assets/6c1f708b-a30c-4ffd-a427-5b59a1a472e0.jpg)\n\n1. You can add ability to your Tool to be converted. Specify «export» property of `conversionConfig`.\n2. You can add ability to convert other Tools to your Tool. Specify «import» property of `conversionConfig`.\n\nConversion Toolbar will be shown only near Blocks that specified an «export» rule, when user selected almost all block's content.\nThis Toolbar will contain only Tools that specified an «import» rule.\n\nExample:\n\n```js\nclass Header {\n constructor(){\n this.data = {\n text: '',\n level: 2\n }\n }\n\n /**\n * Rules specified how our Tool can be converted to/from other Tool.\n */\n static get conversionConfig() {\n return {\n export: 'text', // this property of tool data will be used as string to pass to other tool\n import: 'text' // to this property imported string will be passed\n };\n }\n}\n```\n\n### Your Tool -> other Tool\n\nThe «export» field specifies how to represent your Tool's data as a string to pass it to other tool.\n\nIt can be a `String` or a `Function`.\n\n`String` means a key of your Tool data object that should be used as string to export.\n\n`Function` is a method that accepts your Tool data and compose a string to export from it. See example below:\n\n```js\nclass ListTool {\n constructor(){\n this.data = {\n items: [\n 'Fisrt item',\n 'Second item',\n 'Third item'\n ],\n type: 'ordered'\n }\n }\n\n static get conversionConfig() {\n return {\n export: (data) => {\n return data.items.join('.'); // in this example, all list items will be concatenated to an export string\n },\n // ... import rule\n };\n }\n}\n```\n\n### Other Tool -> your Tool\n\nThe «import» rule specifies how to create your Tool's data object from the string created by original block.\n\nIt can be a `String` or a `Function`.\n\n`String` means the key in tool data that will be filled by an exported string.\nFor example, `import: 'text'` means that `constructor` of your block will accept a `data` object with `text` property filled with string composed by original block.\n\n`Function` allows you to specify own logic, how a string should be converted to your tool data. For example:\n\n```js\nclass ListTool {\n constructor(data){\n this.data = data || {\n items: [],\n type: 'unordered'\n }\n }\n\n static get conversionConfig() {\n return {\n // ... export rule\n\n /**\n * In this example, List Tool creates items by splitting original text by a dot symbol.\n */\n import: (string) => {\n const items = string.split('.');\n\n return {\n items: items.filter( (text) => text.trim() !== ''),\n type: 'unordered'\n };\n }\n };\n }\n}\n```\n\n## Block Lifecycle hooks\n\n### `rendered()`\n\nCalled after Block contents is added to the page\n\n### `updated()`\n\nCalled each time Block contents is updated\n\n### `removed()`\n\nCalled after Block contents is removed from the page but before Block instance deleted\n\n### `moved(MoveEvent)`\n\nCalled after Block was moved. `MoveEvent` contains `fromIndex` and `toIndex`\nrespectively.\n" }, { "path": "docs/usage.md", "content": "# So how to use Editor.js\n\n## Basics\n\nEditor.js is a Block-Styled editor. Blocks is a structural units, of which the Entry is composed. \nFor example, `Paragraph`, `Heading`, `Image`, `Video`, `List` are Blocks. Each Block is represented by a Plugin. \nWe have [many](http://github.com/editor-js/) ready-to-use Plugins and the [simple API](tools.md) for creation new ones.\n\nSo how to use the Editor after [Installation](installation.md).\n\n- Create new Blocks by Enter or with the Plus Button\n- Press `TAB` or click on the Plus Button to view the Toolbox\n- Press `TAB` again to leaf Toolbox and select a Block you need. Then press Enter.\n\n\n ![](https://github.com/editor-js/list/raw/master/assets/example.gif)\n \n- Select text fragment and apply a style or insert a link from the Inline Toolbar\n\n![](assets/7ccbcfcd-1c49-4674-bea7-71021468a1bd.jpg)\n\n- Use «three-dots» button on the right to open Block Settings. From here, you can move and delete a Block \nor apply Tool's settings, if it provided. For example, set a Heading level or List style.\n\n![](assets/01a55381-46cd-47c7-b92e-34765434f2ca.jpg) \n\n## Shortcuts\n\nWe really appreciate shortcuts. So there are few presets. \n\nAction | Shortcut | Restrictions\n-- | -- | --\n`TAB` | Show/leaf a Toolbox. | On empty block\n`SHIFT+TAB` | Leaf back a Toolbox. | While Toolbox is opened\n`ENTER` | Create a Block | While Toolbox is opened and some Tool is selected\n`CMD+B` | Bold style | On selection\n`CMD+I` | Italic style | On selection\n`CMD+K` | Insert a link | On selection\n \nAlso we support shortcuts on the all type of Tools. Specify a shortcut with the Tools configuration. For example:\n\n```js\nvar editor = new EditorJS({\n //...\n tools: {\n header: {\n class: Header,\n shortcut: 'CMD+SHIFT+H'\n },\n list: {\n class: List,\n shortcut: 'CMD+SHIFT+L'\n }\n }\n //...\n });\n\n```\n\n## Autofocus\n\nIf you want to focus Editor after page has been loaded, you can enable autofocus by passing `autofocus` to the initial config\n\n\n```js\nvar editor = new EditorJS({\n //...\n autofocus: true\n //...\n });\n\n```\n\n## Holder\nThe `holder` property supports an id or a reference to dom element.\n\n```js\nvar editor = new EditorJS({\n holder: document.querySelector('.editor'),\n})\n\nvar editor2 = new EditorJS({\n holder: 'codex-editor' // like document.getElementById('codex-editor')\n})\n```\n\n\n\n## Placeholder\n\nBy default Editor\\`s placeholder is empty.\n\nYou can pass your own placeholder via `placeholder` field:\n\n\n```js\nvar editor = new EditorJS({\n //...\n placeholder: 'My awesome placeholder'\n //...\n });\n\n```\n\nIf you are using your custom `Initial Block`, `placeholder` property is passed in `config` to your Tool constructor.\n\n## Log level\n\nYou can specify log level for Editor.js console messages via `logLevel` property of configuration:\n\n```js\nvar editor = new EditorJS({\n //...\n logLevel: 'WARN'\n //..\n})\n```\n\nPossible values:\n\n| Value | Description |\n| ----- | ---------------------------- |\n| `VERBOSE` | Show all messages |\n| `INFO` | Show info and debug messages |\n| `WARN` | Show errors and warns only |\n| `ERROR` | Show errors only |\n \n" }, { "path": "example/example-i18n.html", "content": "\n\n\n\n \n Editor.js 🤩🧦🤨 example\n \n \n \n \n\n\n

\n
\n Editor.js 🤩🧦🤨\n\n
\n Plugins\n Usage\n Configuration\n API\n
\n
\n
\n
\n
\n No core bundle file found. Run yarn build\n
\n\n
\n editor.save()\n
\n
\n
\n 
\n\n    
\n      Made by CodeX\n    
\n  
\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"
  },
  {
    "path": "example/example-multiple.html",
    "content": "\n\n \n \n \n   \n   Editor.js 🤩🧦🤨 example: Multiple instances\n   \n   \n \n \n   
\n     
\n       Editor.js 🤩🧦🤨\n\n       
\n         Plugins\n         Usage\n         Configuration\n         API\n       
\n     
\n     
\n       
\n         No core bundle file found. Run yarn build\n       
\n      
\n        
\n        
\n      
\n     
\n     
\n       
\n         Made by CodeX\n       
\n     
\n   
\n\n   \n   \n   \n\n   \n   \n \n \n"
  },
  {
    "path": "example/example-popup.html",
    "content": "\n\n \n \n \n   \n   Editor.js 🤩🧦🤨 example: Popup\n   \n   \n \n \n   
\n     
\n       Editor.js 🤩🧦🤨\n\n       
\n         Plugins\n         Usage\n         Configuration\n         API\n       
\n     
\n     
\n       
\n         No core bundle file found. Run yarn build\n       
\n       
\n         
Base concepts
\n         
\n           Editor.js is a block-style editor for rich media stories. It outputs clean data in JSON instead of heavy HTML markup. And more important thing is that Editor.js is designed to be API extendable and pluggable.\n         
\n         
\n           So there are a few key features:\n         
\n         
    \n           
  • Clean data output
    • \n           
  • API pluggable
    • \n           
  • Open source
    • \n         
\n         
\n           What does it mean block-styled\n         
\n         
\n           In other editors, the workspace is provided by single contenteditable element in where you can create different HTML markup. All of us saw permanent bugs with moving text fragments or scaling images, while page parts are jumping and twitches. Or highlighting big parts of the text in the case when you just want to make few words to be a heading or bold.\n         
\n         
\n           The Editor.js workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor's Core.\n         
\n         
\n           At the same time, most useful features as arrow-navigation, copy & paste, cross block selection, and others works almost as in the familiar editors.\n         
\n         
\n           What is clean data\n         
\n         
\n           But the more interesting thing is, as mentioned above, that Editor.js returns clean data instead of HTML-markup. Take a look at the example.\n         
\n         
\n           If our entry consists of few paragraphs and a heading, in popular Medium editor after saving we will have something like this:\n         
\n         
\n           As you can see, there are only data we need: a list of structural Blocks with their content description.\n         
\n         
\n           You can use this data to easily render in Web, native mobile/desktop application, pass to Audio Readers, create templates for Facebook Instant Articles, AMP, RSS, create chat-bots, and many others.\n         
\n         
\n           Also, the clean data can be useful for backend processing: sanitizing, validation, injecting an advertising or other stuff, extracting Headings, make covers for social networks from Image Blocks, and other.\n         
\n         
\n           API pluggable?\n         
\n         
\n           A key value of the Editor is the API. All main functional units of the editor — Blocks, Inline Formatting Tools, Block Tunes — are provided by external plugins that use Editor's API.\n         
\n         
\n           We decide to extract all these Tools to separate scripts to make Editor's Core more abstract and make API more powerful. Any challenges and tasks you are facing can be implemented by your own plugins using the API.\n         
\n         
\n           At the same time, API is created to be easy-to-understand and simple-to-use.\n         
\n         
\n           Open Source, so?\n         
\n         
\n           Editor.js is more than just an editor. It is a big open-source community of developers and contributors. Anyone can suggest an improvement or a bug fix. Anyone can create new cool API features and plugins.\n         
\n         
\n           We will support each developer of Editor.js plugins: the best solutions will be collected to the Awesome List and promoted to the community. Together we can create a big suite of different Blocks, Inline Tools, Block Tunes that can hit a wide specter of tasks.\n         
\n         
\n           Thanks for your interest. Hope you enjoy Editor.js.\n         
\n       
\n      
\n        
\n        
\n            
\n        
\n      
\n     
\n     
\n       
\n         Made by CodeX\n       
\n     
\n   
\n\n   \n   \n   \n\n   \n   \n \n \n"
  },
  {
    "path": "example/example-rtl.html",
    "content": "\n\n\n\n  \n  Editor.js RTL example\n  \n  \n  \n  \n\n\n
\n  
\n    Editor.js 🤩🧦🤨\n\n    
\n      Plugins\n      Usage\n      Configuration\n      API\n    
\n  
\n  
\n    
\n    
\n      No core bundle file found. Run yarn build\n    
\n    
\n      No submodules found. Run yarn pull_tools && yarn tools:update\n    
\n    
\n      editor.save()\n    
\n  
\n  
\n    
\n\n    
\n      Made by CodeX\n    
\n  
\n
\n\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n\n\n\n\n\n\n\n\n"
  },
  {
    "path": "example/example.html",
    "content": "\n\n\n  \n  Editor.js 🤩🧦🤨 example\n  \n  \n  \n  \n\n\n  
\n    
\n      Editor.js 🤩🧦🤨\n\n      
\n        Plugins\n        Usage\n        Configuration\n        API\n      
\n    
\n    
\n      
\n\n      
\n        editor.save()\n      
\n\n      
\n        Readonly:\n        \n          Off\n        \n        
\n          toggle\n        
\n      
\n    
\n    
\n      
\n\n      
\n        Made by CodeX\n      
\n    
\n  
\n\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n\n  \n  \n\n  \n  \n\n\n"
  },
  {
    "path": "index.html",
    "content": "\n\n\n  \n  Editor.js 🤩🧦🤨 example\n  \n  \n  \n  \n\n\n  \n  
\n    
\n      Editor.js 🤩🧦🤨\n\n      
\n        Plugins\n        Usage\n        Configuration\n        API\n      
\n    
\n    
\n      
\n      
\n        editor.save()\n      
\n      
\n        
\n          Readonly:\n          \n            Off\n          \n           \n          
\n            toggle\n          
\n        
\n        
\n          
\n            Show\n            blocks boundaries\n          
\n        
\n        
\n          
\n            Enable\n            thin mode\n          
\n        
\n        
\n          
\n          
\n        
\n      
\n    
\n    
\n      
\n\n      
\n        Made by CodeX\n      
\n    
\n  
\n\n\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n\n  \n  \n\n\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"@editorjs/editorjs\",\n  \"version\": \"2.31.5\",\n  \"description\": \"Editor.js — open source block-style WYSIWYG editor with JSON output\",\n  \"main\": \"dist/editorjs.umd.js\",\n  \"module\": \"dist/editorjs.mjs\",\n  \"types\": \"./types/index.d.ts\",\n  \"keywords\": [\n    \"codex editor\",\n    \"text editor\",\n    \"editor\",\n    \"editor.js\",\n    \"editorjs\",\n    \"wysiwyg\"\n  ],\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"build\": \"vite build --mode production\",\n    \"build:test\": \"vite build --mode test\",\n    \"lint\": \"eslint src/ --ext .ts && yarn lint:tests\",\n    \"lint:errors\": \"eslint src/ --ext .ts --quiet\",\n    \"lint:fix\": \"eslint src/ --ext .ts --fix\",\n    \"lint:tests\": \"eslint test/ --ext .ts\",\n    \"test:e2e\": \"yarn build:test && cypress run\",\n    \"test:e2e:open\": \"yarn build:test && cypress open\"\n  },\n  \"author\": \"CodeX\",\n  \"license\": \"Apache-2.0\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/codex-team/editor.js.git\"\n  },\n  \"devDependencies\": {\n    \"@babel/register\": \"^7.21.0\",\n    \"@codexteam/icons\": \"0.3.2\",\n    \"@codexteam/shortcuts\": \"^1.1.1\",\n    \"@cypress/code-coverage\": \"^3.10.3\",\n    \"@editorjs/code\": \"^2.7.0\",\n    \"@editorjs/delimiter\": \"^1.2.0\",\n    \"@editorjs/header\": \"^2.8.8\",\n    \"@editorjs/paragraph\": \"^2.11.6\",\n    \"@editorjs/simple-image\": \"^1.4.1\",\n    \"@types/node\": \"^18.15.11\",\n    \"chai-subset\": \"^1.6.0\",\n    \"core-js\": \"3.30.0\",\n    \"cypress\": \"^13.13.3\",\n    \"cypress-intellij-reporter\": \"^0.0.7\",\n    \"cypress-plugin-tab\": \"^1.0.5\",\n    \"cypress-terminal-report\": \"^5.3.2\",\n    \"cypress-vite\": \"^1.5.0\",\n    \"eslint\": \"^8.37.0\",\n    \"eslint-config-codex\": \"^1.7.1\",\n    \"eslint-plugin-chai-friendly\": \"^0.7.2\",\n    \"eslint-plugin-cypress\": \"2.12.1\",\n    \"html-janitor\": \"^2.0.4\",\n    \"nanoid\": \"^4.0.2\",\n    \"postcss-apply\": \"^0.12.0\",\n    \"postcss-nested\": \"4.1.2\",\n    \"postcss-preset-env\": \"^8.3.0\",\n    \"rollup-plugin-license\": \"^3.0.1\",\n    \"stylelint\": \"^15.4.0\",\n    \"tslint\": \"^6.1.1\",\n    \"typescript\": \"5.0.3\",\n    \"vite\": \"^4.2.1\",\n    \"vite-plugin-css-injected-by-js\": \"^3.1.0\"\n  },\n  \"collective\": {\n    \"type\": \"opencollective\",\n    \"url\": \"https://opencollective.com/editorjs\"\n  },\n  \"dependencies\": {\n    \"@editorjs/caret\": \"^1.0.1\",\n    \"codex-notifier\": \"^1.1.2\",\n    \"codex-tooltip\": \"^1.0.5\"\n  }\n}\n"
  },
  {
    "path": "public/assets/demo.css",
    "content": "/**\n * Styles for the example page\n */\n\n:root {\n  --color-bg-main: #fff;\n  --color-border-light: #E8E8EB;\n  --color-text-main: #000;\n}\n\n.dark-mode {\n  --color-border-light: rgba(255, 255, 255,.08);\n  --color-bg-main: #1c1e24;\n  --color-text-main: #737886;\n}\n\n\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n  font-size: 14px;\n  line-height: 1.5em;\n  margin: 0;\n  background: var(--color-bg-main);\n  color: var(--color-text-main);\n}\n\n.ce-example {\n  font-size: 16.2px;\n}\n\n.ce-example__header {\n  border-bottom: 1px solid var(--color-border-light);\n  height: 50px;\n  line-height: 50px;\n  display: flex;\n  padding: 0 30px;\n  margin-bottom: 30px;\n  flex-wrap: wrap;\n}\n\n.ce-example__header a {\n  color: inherit;\n  text-decoration: none;\n}\n\n.ce-example__header-logo {\n  font-weight: bold;\n}\n\n.ce-example__header-menu {\n  margin-left: auto;\n}\n\n@media all and (max-width: 730px){\n  .ce-example__header-menu {\n    margin-left: 0;\n    margin-top: 10px;\n    flex-basis: 100%;\n    font-size: 14px;\n  }\n}\n\n.ce-example__header-menu a {\n  margin-left: 20px;\n}\n\n@media all and (max-width: 730px){\n  .ce-example__header-menu a {\n    margin-left: 0;\n    margin-right: 15px;\n  }\n}\n\n.ce-example__content {\n  max-width: 1100px;\n  margin: 0 auto;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.thin-mode .ce-example__content {\n  max-width: 500px;\n  border-left: 1px solid #eee;\n  border-right: 1px solid #eee;\n  padding: 0 15px;\n}\n\n.ce-example__output {\n  background: #1B202B;\n  overflow-x: auto;\n  padding: 0 30px 80px;\n}\n\n.ce-example__output-content {\n  max-width: 650px;\n  margin: 30px auto;\n  color: #ABADC3;\n  font-family: 'PT Mono', Menlo, Monaco, Consolas, Courier New, monospace;\n  font-size: 13.3px;\n}\n\n.ce-example__output-content:empty {\n  display: none;\n}\n\n.ce-example__button {\n  display: block;\n  margin: 50px auto;\n  max-width: 180px;\n  background: #4A9DF8;\n  padding: 17px 30px;\n  box-shadow: 0 22px 18px -4px rgba(137, 207, 255, 0.77);\n  transition: all 150ms ease;\n  cursor: pointer;\n  border-radius: 31px;\n  color: #fff;\n  font-family: 'PT Mono', Menlo, Monaco, Consolas, Courier New, monospace;\n  text-align: center;\n}\n\n.ce-example__button:hover {\n  background: #3D8DE5;\n  transform: translateY(2px);\n  box-shadow: 0 20px 15px -4px rgba(137, 207, 255, 0.77);\n}\n\n.ce-example__output-footer {\n  padding: 30px 0;\n  font-size: 14.2px;\n  letter-spacing: 0.3px;\n  text-align: center;\n}\n\n.ce-example__output-footer a {\n  color: #fff;\n  text-decoration: none;\n}\n\n.ce-example__statusbar {\n  display: flex;\n  align-items: center;\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  left: 0;\n  background: var(--color-bg-main);\n  border-radius: 8px 8px 0 0;\n  border-top: 1px solid var(--color-border-light);\n  box-shadow: 0 2px 6px var(--color-border-light);\n  font-size: 13px;\n  padding: 8px 15px;\n  z-index: 1;\n  user-select: none;\n}\n\n@media (max-width: 768px) {\n  .ce-example__statusbar {\n    display: none;\n  }\n}\n\n.ce-example__statusbar-item:not(:last-of-type)::after {\n  content: '|';\n  color: #ddd;\n  margin: 0 15px 0 12px;\n}\n\n.ce-example__statusbar-item--right {\n  margin-left: auto;\n}\n\n.ce-example__statusbar-button {\n  display: inline-block;\n  padding: 3px 12px;\n  transition: all 150ms ease;\n  cursor: pointer;\n  border-radius: 31px;\n  background: #eff1f4;\n  text-align: center;\n  user-select: none;\n}\n\n.ce-example__statusbar-button:hover {\n  background: #e0e4eb;\n}\n\n.ce-example__statusbar-button-primary {\n  background: #4A9DF8;\n  color: #fff;\n  box-shadow: 0 7px 8px -4px rgba(137, 207, 255, 0.77);\n  font-family: 'PT Mono', Menlo, Monaco, Consolas, Courier New, monospace;\n}\n\n.ce-example__statusbar {\n  --toggler-size: 20px;\n}\n\n.ce-example__statusbar-toggler {\n  position: relative;\n  background: #7b8799;\n  border-radius: 20px;\n  padding: 2px;\n  width: calc(var(--toggler-size) * 2.2);\n  cursor: pointer;\n  user-select: none;\n}\n\n.ce-example__statusbar-toggler::before {\n  display: block;\n  content: '';\n  width: var(--toggler-size);\n  height: var(--toggler-size);\n  background: #fff;\n  border-radius: 50%;\n  transition: transform 100ms ease-in;\n}\n\n.ce-example__statusbar-toggler::after {\n  --moon-size: calc(var(--toggler-size) * 0.5);\n  content: '';\n  position: absolute;\n  top: 5px;\n  right: 5px;\n  height: var(--moon-size);\n  width: var(--moon-size);\n  box-shadow: calc(var(--moon-size) * 0.25 * -1) calc(var(--moon-size) * 0.18) 0 calc(var(--moon-size) * 0.05) white;\n  border-radius: 50%;\n}\n\n@media all and (max-width: 730px){\n  .ce-example__header,\n  .ce-example__content{\n    padding: 0 20px;\n  }\n}\n\n/**\n * JSON highlighter\n */\n.sc_attr {\n  color: rgb(148, 162, 192);\n}\n.sc_key {\n  color: rgb(190, 213, 255);\n}\n.sc_toolname {\n  color: rgb(15, 205, 251);\n}\n.sc_tag {\n  color: rgb(4, 131, 216);\n}\n.sc_bool {\n  color: rgb(247, 60, 173);\n}\n\n.ce-example .ce-block:first-of-type h1.ce-header{\n  font-size: 50px;\n}\n\n.ce-example-multiple {\n  display: grid;\n  grid-template-columns: calc(50% - 15px) calc(50% - 15px);\n  gap: 30px;\n  padding: 30px;\n}\n\n.ce-example-multiple > div {\n  background: #fff;\n  border-radius: 7px;\n  padding: 30px;\n}\n\n\n/**\n * Styles for the popup example page\n */\n.ce-example--popup {\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.ce-example--popup .ce-example__content {\n  flex-grow: 2;\n}\n\n.ce-example-popup__overlay {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: #00000085;\n}\n\n.ce-example-popup__popup {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%,-50%);\n  width: 800px;\n  max-width: 100%;\n  max-height: 90vh;\n  background: white;\n  padding: 20px;\n  border-radius: 8px;\n  overflow: auto;\n  box-sizing: border-box;\n}\n\n@media all and (max-width: 730px){\n  .ce-example-popup__popup {\n    top: 10px;\n    left: 10px;\n    width: calc(100% - 20px);\n    height: calc(100% - 20px);\n    transform: none;\n    max-height: none;\n\n  }\n}\n\n.show-block-boundaries .ce-block {\n  box-shadow: inset 0 0 0 1px #eff2f5;\n}\n\n.show-block-boundaries .ce-block__content {\n  box-shadow: 0 0 0 1px rgba(224, 231, 241, 0.61) inset;\n}\n.show-block-boundaries #showBlocksBoundariesButton span,\n.thin-mode #enableThinModeButton span {\n  font-size: 0;\n  vertical-align: bottom;\n}\n\n.show-block-boundaries #showBlocksBoundariesButton span::before,\n.thin-mode #enableThinModeButton span::before {\n  content: attr(data-toggled-text);\n  display: inline;\n  font-size: 13px;\n}\n\n\n\n/**\n * Dark theme overrides\n */\n.dark-mode img {\n  opacity: 0.5;\n}\n\n.dark-mode .cdx-simple-image__picture--with-border,\n.dark-mode .cdx-input {\n  border-color: var(--color-border-light);\n}\n\n.dark-mode .ce-example__button {\n  box-shadow: 0 24px 18px -14px rgba(4, 154, 255, 0.24);\n}\n\n.dark-mode .ce-example__output {\n  background-color: #17191f;\n}\n\n.dark-mode .inline-code {\n  background-color: rgba(53, 56, 68, 0.62);\n  color: #727683;\n}\n\n.dark-mode a {\n  color: #959ba8;\n}\n\n.dark-mode .ce-example__statusbar-toggler,\n.dark-mode .ce-example__statusbar-button {\n  background-color: #343842;\n}\n\n.dark-mode .ce-example__statusbar-toggler::before {\n  transform: translateX(calc(var(--toggler-size) * 2.2 - var(--toggler-size)));\n}\n\n.dark-mode .ce-example__statusbar-toggler::after {\n  content: '*';\n  right: auto;\n  left: 6px;\n  top: 7px;\n  color: #fff;\n  box-shadow: none;\n  font-size: 32px;\n}\n\n.dark-mode.show-block-boundaries .ce-block,\n.dark-mode.show-block-boundaries .ce-block__content {\n  box-shadow: 0 0 0 1px rgba(128, 144, 159, 0.09) inset;\n}\n\n.dark-mode.thin-mode .ce-example__content{\n  border-color: var(--color-border-light);\n}\n\n.dark-mode .ce-example__statusbar-item:not(:last-of-type)::after {\n  color: var(--color-border-light);\n}\n\n.dark-mode .ce-block--selected .ce-block__content,\n.dark-mode ::selection{\n  background-color: rgba(57, 68, 84, 0.57);\n}\n\n.dark-mode .ce-toolbox__button,\n.dark-mode .ce-toolbar__settings-btn,\n.dark-mode .ce-toolbar__plus {\n  color: inherit;\n}\n\n.dark-mode .ce-stub {\n  opacity: 0.3;\n}\n"
  },
  {
    "path": "public/assets/json-preview.js",
    "content": "/**\n * Module to compose output JSON preview\n */\nconst cPreview = (function (module) {\n  /**\n   * Shows JSON in pretty preview\n   * @param {object} output - what to show\n   * @param {Element} holder - where to show\n   */\n  module.show = function(output, holder) {\n    /** Make JSON pretty */\n    output = JSON.stringify( output, null, 4 );\n    /** Encode HTML entities */\n    output = encodeHTMLEntities( output );\n    /** Stylize! */\n    output = stylize( output );\n    holder.innerHTML = output;\n  };\n\n  /**\n   * Converts '>', '<', '&' symbols to entities\n   */\n  function encodeHTMLEntities(string) {\n    return string.replace(/&/g, '&').replace(//g, '>');\n  }\n\n  /**\n   * Some styling magic\n   */\n  function stylize(string) {\n    /** Stylize JSON keys */\n    string = string.replace( /\"(\\w+)\"\\s?:/g, '\"$1\" :');\n    /** Stylize tool names */\n    string = string.replace( /\"(paragraph|quote|list|header|link|code|image|delimiter|raw|checklist|table|embed|warning)\"/g, '\"$1\"');\n    /** Stylize HTML tags */\n    string = string.replace( /(<[\\/a-z]+(>)?)/gi, '$1' );\n    /** Stylize strings */\n    string = string.replace( /\"([^\"]+)\"/gi, '\"$1\"' );\n    /** Boolean/Null */\n    string = string.replace( /\\b(true|false|null)\\b/gi, '$1' );\n    return string;\n  }\n\n  return module;\n})({});\n"
  },
  {
    "path": "src/codex.ts",
    "content": "'use strict';\n\nimport type { EditorConfig } from '../types';\n\n/**\n * Apply polyfills\n */\nimport '@babel/register';\n\nimport './components/polyfills';\nimport Core from './components/core';\nimport * as _ from './components/utils';\nimport { destroy as destroyTooltip } from './components/utils/tooltip';\n\ndeclare const VERSION: string;\n\n/**\n * Editor.js\n *\n * @license Apache-2.0\n * @see Editor.js \n * @author CodeX Team \n */\nexport default class EditorJS {\n  /**\n   * Promise that resolves when core modules are ready and UI is rendered on the page\n   */\n  public isReady: Promise;\n\n  /**\n   * Stores destroy method implementation.\n   * Clear heap occupied by Editor and remove UI components from the DOM.\n   */\n  public destroy: () => void;\n\n  /** Editor version */\n  public static get version(): string {\n    return VERSION;\n  }\n\n  /**\n   * @param {EditorConfig|string|undefined} [configuration] - user configuration\n   */\n  constructor(configuration?: EditorConfig|string) {\n    /**\n     * Set default onReady function\n     */\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    let onReady = (): void => {};\n\n    /**\n     * If `onReady` was passed in `configuration` then redefine onReady function\n     */\n    if (_.isObject(configuration) && _.isFunction(configuration.onReady)) {\n      onReady = configuration.onReady;\n    }\n\n    /**\n     * Create a Editor.js instance\n     */\n    const editor = new Core(configuration);\n\n    /**\n     * We need to export isReady promise in the constructor\n     * as it can be used before other API methods are exported\n     *\n     * @type {Promise}\n     */\n    this.isReady = editor.isReady.then(() => {\n      this.exportAPI(editor);\n      /**\n       * @todo pass API as an argument. It will allow to use Editor's API when editor is ready\n       */\n      onReady();\n    });\n  }\n\n  /**\n   * Export external API methods\n   *\n   * @param {Core} editor — Editor's instance\n   */\n  public exportAPI(editor: Core): void {\n    const fieldsToExport = [ 'configuration' ];\n    const destroy = (): void => {\n      Object.values(editor.moduleInstances)\n        .forEach((moduleInstance) => {\n          if (_.isFunction(moduleInstance.destroy)) {\n            moduleInstance.destroy();\n          }\n          moduleInstance.listeners.removeAll();\n        });\n\n      destroyTooltip();\n\n      editor = null;\n\n      for (const field in this) {\n        if (Object.prototype.hasOwnProperty.call(this, field)) {\n          delete this[field];\n        }\n      }\n\n      Object.setPrototypeOf(this, null);\n    };\n\n    fieldsToExport.forEach((field) => {\n      this[field] = editor[field];\n    });\n\n    this.destroy = destroy;\n\n    Object.setPrototypeOf(this, editor.moduleInstances.API.methods);\n\n    delete this.exportAPI;\n\n    const shorthands = {\n      blocks: {\n        clear: 'clear',\n        render: 'render',\n      },\n      caret: {\n        focus: 'focus',\n      },\n      events: {\n        on: 'on',\n        off: 'off',\n        emit: 'emit',\n      },\n      saver: {\n        save: 'save',\n      },\n    };\n\n    Object.entries(shorthands)\n      .forEach(([key, methods]) => {\n        Object.entries(methods)\n          .forEach(([name, alias]) => {\n            this[alias] = editor.moduleInstances.API.methods[key][name];\n          });\n      });\n  }\n}\n"
  },
  {
    "path": "src/components/__module.ts",
    "content": "import type { EditorModules } from '../types-internal/editor-modules';\nimport type { EditorConfig } from '../../types';\nimport type { ModuleConfig } from '../types-internal/module-config';\nimport Listeners from './utils/listeners';\nimport type EventsDispatcher from './utils/events';\nimport type { EditorEventMap } from './events';\n\n/**\n * The type  of the Module generic.\n * It describes the structure of nodes used in modules.\n */\nexport type ModuleNodes = object;\n\n/**\n * @abstract\n * @class      Module\n * @classdesc  All modules inherits from this class.\n * @typedef {Module} Module\n * @property {object} config - Editor user settings\n * @property {EditorModules} Editor - List of Editor modules\n */\nexport default class Module> {\n  /**\n   * Each module can provide some UI elements that will be stored in this property\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  public nodes: T = {} as any;\n\n  /**\n   * Editor modules list\n   *\n   * @type {EditorModules}\n   */\n  protected Editor: EditorModules;\n\n  /**\n   * Editor configuration object\n   *\n   * @type {EditorConfig}\n   */\n  protected config: EditorConfig;\n\n  /**\n   * Editor event dispatcher class\n   */\n  protected eventsDispatcher: EventsDispatcher;\n\n  /**\n   * Util for bind/unbind DOM event listeners\n   */\n  protected listeners: Listeners = new Listeners();\n\n  /**\n   * This object provides methods to push into set of listeners that being dropped when read-only mode is enabled\n   */\n  protected readOnlyMutableListeners = {\n    /**\n     * Assigns event listener on DOM element and pushes into special array that might be removed\n     *\n     * @param {EventTarget} element - DOM Element\n     * @param {string} eventType - Event name\n     * @param {Function} handler - Event handler\n     * @param {boolean|AddEventListenerOptions} options - Listening options\n     */\n    on: (\n      element: EventTarget,\n      eventType: string,\n      handler: (event: Event) => void,\n      options: boolean | AddEventListenerOptions = false\n    ): void => {\n      this.mutableListenerIds.push(\n        this.listeners.on(element, eventType, handler, options)\n      );\n    },\n\n    /**\n     * Clears all mutable listeners\n     */\n    clearAll: (): void => {\n      for (const id of this.mutableListenerIds) {\n        this.listeners.offById(id);\n      }\n\n      this.mutableListenerIds = [];\n    },\n  };\n\n  /**\n   * The set of listener identifiers which will be dropped in read-only mode\n   */\n  private mutableListenerIds: string[] = [];\n\n  /**\n   * @class\n   * @param options - Module options\n   * @param options.config - Module config\n   * @param options.eventsDispatcher - Common event bus\n   */\n  constructor({ config, eventsDispatcher }: ModuleConfig) {\n    if (new.target === Module) {\n      throw new TypeError('Constructors for abstract class Module are not allowed.');\n    }\n\n    this.config = config;\n    this.eventsDispatcher = eventsDispatcher;\n  }\n\n  /**\n   * Editor modules setter\n   *\n   * @param {EditorModules} Editor - Editor's Modules\n   */\n  public set state(Editor: EditorModules) {\n    this.Editor = Editor;\n  }\n\n  /**\n   * Remove memorized nodes\n   */\n  public removeAllNodes(): void {\n    for (const key in this.nodes) {\n      const node = this.nodes[key];\n\n      if (node instanceof HTMLElement) {\n        node.remove();\n      }\n    }\n  }\n\n  /**\n   * Returns true if current direction is RTL (Right-To-Left)\n   */\n  protected get isRtl(): boolean {\n    return this.config.i18n.direction === 'rtl';\n  }\n}\n"
  },
  {
    "path": "src/components/block/api.ts",
    "content": "import type Block from './index';\nimport type { BlockToolData, ToolConfig, ToolboxConfigEntry } from '../../../types/tools';\nimport type { SavedData } from '../../../types/data-formats';\nimport type { BlockAPI as BlockAPIInterface } from '../../../types/api';\n\n/**\n * Constructs new BlockAPI object\n *\n * @class\n * @param {Block} block - Block to expose\n */\nfunction BlockAPI(\n  block: Block\n): void {\n  const blockAPI: BlockAPIInterface = {\n    /**\n     * Block id\n     *\n     * @returns {string}\n     */\n    get id(): string {\n      return block.id;\n    },\n    /**\n     * Tool name\n     *\n     * @returns {string}\n     */\n    get name(): string {\n      return block.name;\n    },\n\n    /**\n     * Tool config passed on Editor's initialization\n     *\n     * @returns {ToolConfig}\n     */\n    get config(): ToolConfig {\n      return block.config;\n    },\n\n    /**\n     * .ce-block element, that wraps plugin contents\n     *\n     * @returns {HTMLElement}\n     */\n    get holder(): HTMLElement {\n      return block.holder;\n    },\n\n    /**\n     * True if Block content is empty\n     *\n     * @returns {boolean}\n     */\n    get isEmpty(): boolean {\n      return block.isEmpty;\n    },\n\n    /**\n     * True if Block is selected with Cross-Block selection\n     *\n     * @returns {boolean}\n     */\n    get selected(): boolean {\n      return block.selected;\n    },\n\n    /**\n     * Set Block's stretch state\n     *\n     * @param {boolean} state — state to set\n     */\n    set stretched(state: boolean) {\n      block.stretched = state;\n    },\n\n    /**\n     * True if Block is stretched\n     *\n     * @returns {boolean}\n     */\n    get stretched(): boolean {\n      return block.stretched;\n    },\n\n    /**\n     * True if Block has inputs to be focused\n     */\n    get focusable(): boolean {\n      return block.focusable;\n    },\n\n    /**\n     * Call Tool method with errors handler under-the-hood\n     *\n     * @param {string} methodName - method to call\n     * @param {object} param - object with parameters\n     * @returns {unknown}\n     */\n    call(methodName: string, param?: object): unknown {\n      return block.call(methodName, param);\n    },\n\n    /**\n     * Save Block content\n     *\n     * @returns {Promise}\n     */\n    save(): Promise {\n      return block.save();\n    },\n\n    /**\n     * Validate Block data\n     *\n     * @param {BlockToolData} data - data to validate\n     * @returns {Promise}\n     */\n    validate(data: BlockToolData): Promise {\n      return block.validate(data);\n    },\n\n    /**\n     * Allows to say Editor that Block was changed. Used to manually trigger Editor's 'onChange' callback\n     * Can be useful for block changes invisible for editor core.\n     */\n    dispatchChange(): void {\n      block.dispatchChange();\n    },\n\n    /**\n     * Tool could specify several entries to be displayed at the Toolbox (for example, \"Heading 1\", \"Heading 2\", \"Heading 3\")\n     * This method returns the entry that is related to the Block (depended on the Block data)\n     */\n    getActiveToolboxEntry(): Promise {\n      return block.getActiveToolboxEntry();\n    },\n  };\n\n  Object.setPrototypeOf(this, blockAPI);\n}\n\nexport default BlockAPI;\n"
  },
  {
    "path": "src/components/block/index.ts",
    "content": "import type {\n  BlockAPI as BlockAPIInterface,\n  BlockTool as IBlockTool,\n  BlockToolData,\n  BlockTune as IBlockTune,\n  SanitizerConfig,\n  ToolConfig,\n  ToolboxConfigEntry,\n  PopoverItemParams\n} from '../../../types';\n\nimport type { SavedData } from '../../../types/data-formats';\nimport $, { toggleEmptyMark } from '../dom';\nimport * as _ from '../utils';\nimport type ApiModules from '../modules/api';\nimport BlockAPI from './api';\nimport SelectionUtils from '../selection';\nimport type BlockToolAdapter from '../tools/block';\n\nimport type BlockTuneAdapter from '../tools/tune';\nimport type { BlockTuneData } from '../../../types/block-tunes/block-tune-data';\nimport type ToolsCollection from '../tools/collection';\nimport EventsDispatcher from '../utils/events';\nimport type { TunesMenuConfigItem } from '../../../types/tools';\nimport { isMutationBelongsToElement } from '../utils/mutations';\nimport type { EditorEventMap } from '../events';\nimport { FakeCursorAboutToBeToggled, FakeCursorHaveBeenSet, RedactorDomChanged } from '../events';\nimport type { RedactorDomChangedPayload } from '../events/RedactorDomChanged';\nimport { convertBlockDataToString, isSameBlockData } from '../utils/blocks';\nimport { PopoverItemType } from '@/types/utils/popover/popover-item-type';\n\n/**\n * Interface describes Block class constructor argument\n */\ninterface BlockConstructorOptions {\n  /**\n   * Block's id. Should be passed for existed block, and omitted for a new one.\n   */\n  id?: string;\n\n  /**\n   * Initial Block data\n   */\n  data: BlockToolData;\n\n  /**\n   * Tool object\n   */\n  tool: BlockToolAdapter;\n\n  /**\n   * Editor's API methods\n   */\n  api: ApiModules;\n\n  /**\n   * This flag indicates that the Block should be constructed in the read-only mode.\n   */\n  readOnly: boolean;\n\n  /**\n   * Tunes data for current Block\n   */\n  tunesData: { [name: string]: BlockTuneData };\n}\n\n/**\n * @class Block\n * @classdesc This class describes editor`s block, including block`s HTMLElement, data and tool\n * @property {BlockTool} tool — current block tool (Paragraph, for example)\n * @property {object} CSS — block`s css classes\n */\n\n/**\n * Available Block Tool API methods\n */\nexport enum BlockToolAPI {\n  /**\n   * @todo remove method in 3.0.0\n   * @deprecated — use 'rendered' hook instead\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  APPEND_CALLBACK = 'appendCallback',\n  RENDERED = 'rendered',\n  MOVED = 'moved',\n  UPDATED = 'updated',\n  REMOVED = 'removed',\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  ON_PASTE = 'onPaste',\n}\n\n/**\n * Names of events used in Block\n */\ninterface BlockEvents {\n  'didMutated': Block,\n}\n\n/**\n * @classdesc Abstract Block class that contains Block information, Tool name and Tool class instance\n * @property {BlockTool} tool - Tool instance\n * @property {HTMLElement} holder - Div element that wraps block content with Tool's content. Has `ce-block` CSS class\n * @property {HTMLElement} pluginsContent - HTML content that returns by Tool's render function\n */\nexport default class Block extends EventsDispatcher {\n  /**\n   * CSS classes for the Block\n   *\n   * @returns {{wrapper: string, content: string}}\n   */\n  public static get CSS(): { [name: string]: string } {\n    return {\n      wrapper: 'ce-block',\n      wrapperStretched: 'ce-block--stretched',\n      content: 'ce-block__content',\n      selected: 'ce-block--selected',\n      dropTarget: 'ce-block--drop-target',\n    };\n  }\n\n  /**\n   * Block unique identifier\n   */\n  public id: string;\n\n  /**\n   * Block Tool`s name\n   */\n  public readonly name: string;\n\n  /**\n   * Instance of the Tool Block represents\n   */\n  public readonly tool: BlockToolAdapter;\n\n  /**\n   * User Tool configuration\n   */\n  public readonly settings: ToolConfig;\n\n  /**\n   * Wrapper for Block`s content\n   */\n  public readonly holder: HTMLDivElement;\n\n  /**\n   * Tunes used by Tool\n   */\n  public readonly tunes: ToolsCollection;\n\n  /**\n   * Tool's user configuration\n   */\n  public readonly config: ToolConfig;\n\n  /**\n   * Cached inputs\n   */\n  private cachedInputs: HTMLElement[] = [];\n\n  /**\n   * We'll store a reference to the tool's rendered element to access it later\n   */\n  private toolRenderedElement: HTMLElement | null = null;\n\n  /**\n   * Tool class instance\n   */\n  private readonly toolInstance: IBlockTool;\n\n  /**\n   * User provided Block Tunes instances\n   */\n  private readonly tunesInstances: Map = new Map();\n\n  /**\n   * Editor provided Block Tunes instances\n   */\n  private readonly defaultTunesInstances: Map = new Map();\n\n  /**\n   * If there is saved data for Tune which is not available at the moment,\n   * we will store it here and provide back on save so data is not lost\n   */\n  private unavailableTunesData: { [name: string]: BlockTuneData } = {};\n\n  /**\n   * Focused input index\n   *\n   * @type {number}\n   */\n  private inputIndex = 0;\n\n  /**\n   * Common editor event bus\n   */\n  private readonly editorEventBus: EventsDispatcher | null = null;\n\n  /**\n   * Link to editor dom change callback. Used to remove listener on remove\n   */\n  private redactorDomChangedCallback: (payload: RedactorDomChangedPayload) => void;\n\n  /**\n   * Current block API interface\n   */\n  private readonly blockAPI: BlockAPIInterface;\n\n  /**\n   * @param options - block constructor options\n   * @param [options.id] - block's id. Will be generated if omitted.\n   * @param options.data - Tool's initial data\n   * @param options.tool — block's tool\n   * @param options.api - Editor API module for pass it to the Block Tunes\n   * @param options.readOnly - Read-Only flag\n   * @param [eventBus] - Editor common event bus. Allows to subscribe on some Editor events. Could be omitted when \"virtual\" Block is created. See BlocksAPI@composeBlockData.\n   */\n  constructor({\n    id = _.generateBlockId(),\n    data,\n    tool,\n    readOnly,\n    tunesData,\n  }: BlockConstructorOptions, eventBus?: EventsDispatcher) {\n    super();\n    this.name = tool.name;\n    this.id = id;\n    this.settings = tool.settings;\n    this.config = tool.settings.config || {};\n    this.editorEventBus = eventBus || null;\n    this.blockAPI = new BlockAPI(this);\n\n    this.tool = tool;\n    this.toolInstance = tool.create(data, this.blockAPI, readOnly);\n\n    /**\n     * @type {BlockTuneAdapter[]}\n     */\n    this.tunes = tool.tunes;\n\n    this.composeTunes(tunesData);\n\n    this.holder = this.compose();\n\n    /**\n     * Bind block events in RIC for optimizing of constructing process time\n     */\n    window.requestIdleCallback(() => {\n      /**\n       * Start watching block mutations\n       */\n      this.watchBlockMutations();\n\n      /**\n       * Mutation observer doesn't track changes in \"\" and \"