{"id":31051532,"url":"https://github.com/skchawala/editorjs-text-style","last_synced_at":"2026-04-19T05:35:20.037Z","repository":{"id":314468009,"uuid":"1055641708","full_name":"skchawala/editorjs-text-style","owner":"skchawala","description":"An EditorJS inline tool for customizing font size and font family — lightweight, configurable, and easy to use.","archived":false,"fork":false,"pushed_at":"2025-09-13T09:29:43.000Z","size":275,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-31T10:29:02.352Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/skchawala.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-12T15:12:29.000Z","updated_at":"2025-09-25T11:17:22.000Z","dependencies_parsed_at":"2025-09-12T18:07:11.613Z","dependency_job_id":"edad450a-4d56-4eea-a38b-a07a8bf86660","html_url":"https://github.com/skchawala/editorjs-text-style","commit_stats":null,"previous_names":["skchawala/editorjs-text-style"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/skchawala/editorjs-text-style","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skchawala%2Feditorjs-text-style","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skchawala%2Feditorjs-text-style/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skchawala%2Feditorjs-text-style/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skchawala%2Feditorjs-text-style/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skchawala","download_url":"https://codeload.github.com/skchawala/editorjs-text-style/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skchawala%2Feditorjs-text-style/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31996445,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T20:23:30.271Z","status":"online","status_checked_at":"2026-04-19T02:00:07.110Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":"2025-09-15T00:28:16.716Z","updated_at":"2026-04-19T05:35:20.015Z","avatar_url":"https://github.com/skchawala.png","language":"TypeScript","funding_links":[],"categories":["Tools"],"sub_categories":["Block Tools"],"readme":"# EditorJS Text Style Tool\n\n✍️ An EditorJS inline tool for customizing **font size** and **font family** — lightweight, configurable, and easy to use.\n\n## Demo\n\n![EditorJS Text Style Demo](./public/demo.gif)\n\n---\n\n## Features\n\n- 🎨 Change **font size** inline\n- 🅰️ Switch **font family**\n- ⚡ Plug \u0026 Play with EditorJS\n- 🔧 Fully configurable (define your own sizes and families)\n- 🪶 Lightweight, no extra dependencies\n\n---\n\n## Installation\n\nInstall via npm or yarn:\n\n```bash\nnpm install @skchawala/editorjs-text-style\n```\n\n### or\n\n```bash\nyarn add @skchawala/editorjs-text-style\n```\n\n## 🚀 Usage\n\n```bash\nimport EditorJS from \"@editorjs/editorjs\";\nimport TextStyleTool from \"@skchawala/editorjs-text-style\";\n\nconst editor = new EditorJS({\n  holder: \"editorjs\",\n  autofocus: true,\n  tools: {\n    textStyle: {\n      class: TextStyleTool,\n      config: {\n        fontSizeEnabled: true,\n        fontFamilyEnabled: true,\n        fontSizes: [\n          { label: \"12px\", value: \"12px\" },\n          { label: \"14px\", value: \"14px\" },\n          { label: \"16px\", value: \"16px\" },\n          { label: \"18px\", value: \"18px\" },\n          { label: \"20px\", value: \"20px\" },\n        ],\n        fontFamilies: [\n          { label: \"Arial\", value: \"Arial\" },\n          { label: \"Georgia\", value: \"Georgia\" },\n          { label: \"Courier New\", value: \"Courier New\" },\n          { label: \"Verdana\", value: \"Verdana\" },\n        ],\n        defaultFontSize: \"20px\",\n        defaultFontFamily: \"Verdana\",\n      },\n    },\n  },\n});\n```\n\n## ⚙️ Configuration Options\n\n| Option              | Type                 | Default               | Description                                            |\n| ------------------- | -------------------- | --------------------- | ------------------------------------------------------ |\n| `fontSizeEnabled`   | `boolean`            | `true`                | Enable or disable font size dropdown                   |\n| `fontFamilyEnabled` | `boolean`            | `true`                | Enable or disable font family dropdown                 |\n| `fontSizes`         | `FontSizeOption[]`   | Predefined set        | Custom array of font size options `{ label, value }`   |\n| `fontFamilies`      | `FontFamilyOption[]` | Predefined set        | Custom array of font family options `{ label, value }` |\n| `defaultFontSize`   | `string`             | `\"16px\"`              | Default font size applied when no selection is made    |\n| `defaultFontFamily` | `string`             | `\"Inter, sans-serif\"` | Default font family applied                            |\n\n## 🛠️ Output Data\n\n```bash\n\u003cp\u003e\n  This is \u003cspan class=\"cdx-text-style\" style=\"font-size: 20px; font-family: Verdana;\"\u003estyled text\u003c/span\u003e inside Editor.js.\n\u003c/p\u003e\n```\n\n## 📜 Changelog\n\nYou can find the full list of changes in the [CHANGELOG.md](./CHANGELOG.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskchawala%2Feditorjs-text-style","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskchawala%2Feditorjs-text-style","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskchawala%2Feditorjs-text-style/lists"}