{"id":13769550,"url":"https://github.com/Aleksst95/header-with-anchor","last_synced_at":"2025-05-11T02:32:42.454Z","repository":{"id":57219617,"uuid":"291049551","full_name":"Aleksst95/header-with-anchor","owner":"Aleksst95","description":"Header Tool with anchor for Editor.js 2.0","archived":false,"fork":true,"pushed_at":"2023-01-07T20:10:49.000Z","size":361,"stargazers_count":9,"open_issues_count":0,"forks_count":4,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-19T05:16:39.184Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"editor-js/header","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Aleksst95.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-28T13:09:04.000Z","updated_at":"2023-01-07T20:10:54.000Z","dependencies_parsed_at":"2023-02-08T00:16:24.220Z","dependency_job_id":null,"html_url":"https://github.com/Aleksst95/header-with-anchor","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aleksst95%2Fheader-with-anchor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aleksst95%2Fheader-with-anchor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aleksst95%2Fheader-with-anchor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aleksst95%2Fheader-with-anchor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Aleksst95","download_url":"https://codeload.github.com/Aleksst95/header-with-anchor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253507147,"owners_count":21919158,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T17:00:28.262Z","updated_at":"2025-05-11T02:32:42.160Z","avatar_url":"https://github.com/Aleksst95.png","language":"JavaScript","funding_links":[],"categories":["Tools"],"sub_categories":["Block Tools"],"readme":"# Heading Tool with anchor\n\n![Version of EditorJS that the plugin is compatible with](https://badgen.net/badge/Editor.js/v2.0/blue)\n\nProvides Headings Blocks with the ability to set an anchor text for the [Editor.js](https://ifmo.su/editor). Forked by [Header Tool](https://github.com/editor-js/header)\n\n## Screenshot\n![header-with-anchor](https://user-images.githubusercontent.com/12189769/91700694-f1998c00-eb7e-11ea-9cfe-4662924afa72.jpg)\n\n## Installation\n\n### Install via NPM\n\nGet the package\n\n```shell\nnpm i --save editorjs-header-with-anchor\n```\n\nInclude module at your application\n\n```javascript\nconst Header = require('editorjs-header-with-anchor');\n```\n\n### Download to your project's source dir\n\n1. Upload folder `dist` from repository\n2. Add `dist/bundle.js` file to your page.\n\n\n## Usage\n\nAdd a new Tool to the `tools` property of the Editor.js initial config.\n\n```javascript\nvar editor = EditorJS({\n  ...\n\n  tools: {\n    ...\n    header: Header,\n  },\n\n  ...\n});\n```\nAvailable characters: all Latin letters, digitals, dash, and underscore.\n\nIn the `cyrToLat` branch, you can find additional functionality: Cyrillic characters are replaced by Latin letters, \nfor example, `ш` to `sch`.\n\nIn the `maxLength` branch, you can find additional functionality: If you want to set the maximum length of the header text, you need to set the `checkHeaderLength` parameter to `TRUE` in the config.\n\nIn the `cyrToLat_with_maxLength` branch, you can find additional features from branches `cyrToLat` and `maxLength` at the same time.\n\nP.S. The anchor value is displayed next to the header block only when there is text in the header block.\n\n## Shortcut\n\nYou can insert this Block by a useful shortcut. Set it up with the `tools[].shortcut` property of the Editor's initial config.\n\n```javascript\nvar editor = EditorJS({\n  ...\n\n  tools: {\n    ...\n    header: {\n      class: Header,\n      shortcut: 'CMD+SHIFT+H',\n    },\n  },\n\n  ...\n});\n```\n\n## Config Params\n\nAll properties are optional.\n\n| Field        | Type       | Description                      |\n| ------------ | ---------- | -------------------------------- |\n| placeholder  | `string`   | header's placeholder string      |\n| levels       | `number[]` | enabled heading levels           |\n| defaultLevel | `number`   | default heading level            |\n| allowAnchor  | `boolean`  | Anchor enabling (default: `true`) |\n| anchorLength  | `number`  | Anchor length (default: `50`)     |\n\n```javascript\nvar editor = EditorJS({\n  ...\n\n  tools: {\n    ...\n    header: {\n      class: Header,\n      config: {\n        placeholder: 'Enter a header',\n        levels: [2, 3, 4],\n        defaultLevel: 3,\n        allowAnchor: true,\n        anchorLength: 100,\n      }\n    }\n  }\n\n  ...\n});\n```\n\n## Output data\n\n| Field  | Type     | Description                                      |\n| ------ | -------- | ------------------------------------------------ |\n| text   | `string` | header's text                                    |\n| level  | `number` | level of header: 1 for H1, 2 for H2 ... 6 for H6 |\n| anchor | `string` | anchor's text                                    |\n\n```json\n{\n  \"type\": \"header\",\n  \"data\": {\n    \"text\": \"Why Telegram is the best messenger\",\n    \"level\": 2,\n    \"anchor\": \"Anchor\"\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAleksst95%2Fheader-with-anchor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAleksst95%2Fheader-with-anchor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAleksst95%2Fheader-with-anchor/lists"}