DatoCMS Character Counter Plugin

\n );\n}\n","deleted","label","children",[],[154],{"_102":174,"_95":175,"_155":176,"_157":-5,"_158":137,"_159":177,"_161":162,"_104":178,"_99":179,"_164":180,"_166":181,"_168":22,"_169":-5,"_170":182,"_98":183},"30ac0644-c3b4-11f0-80dd-42dde27851f2","README.md","019a917e-148a-77d2-89fb-070334d87b04",14,["D",1763383912619],1,"file","# DatoCMS Character Counter Plugin\n\nA DatoCMS plugin that automatically shows a character counter on fields that are configured to have validations on length.\n\n## Features\n\n- **Automatic activation**: The plugin automatically attaches to fields with length validators\n- **Manual installation**: Can also be manually added to fields\n- **Multiple field types**: Supports string, text, and structured_text field types\n- **Smart counting**: For structured text, counts only the actual text content (not markup)\n\n## Supported Field Types\n\n- Single-line string\n- Multiple-paragraph text\n- Structured text\n\n## How it works\n\nThe plugin uses the `overrideFieldExtensions` hook to automatically add a character counter addon to fields that:\n1. Are one of the supported field types (string, text, or structured_text)\n2. Have length validation configured\n3. Don't already have the character counter addon installed\n\nThe counter displays the current character count in a small, unobtrusive format below the field.\n\n## Implementation\n\nBased on the official [DatoCMS character-counter plugin](https://github.com/datocms/plugins/tree/master/character-counter).\n",[],[175],{"_102":185,"_95":186,"_155":187,"_157":-5,"_158":137,"_159":188,"_161":162,"_104":189,"_99":190,"_164":165,"_166":191,"_168":22,"_169":-5,"_170":192,"_98":193},"9ee270e8-c3b5-11f0-b203-42dde27851f2","client.tsx","019a917e-148a-77d2-89fb-085751017340",15,["D",1763384527049],4,"/** @jsxImportSource https://esm.sh/react */\nimport { StrictMode } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\nimport {\n connect,\n type FieldType,\n} from \"https://esm.sh/datocms-plugin-sdk\";\nimport FieldExtension from \"./FieldExtension.tsx\";\n\nconst FIELDS_TYPES: FieldType[] = [\"string\", \"text\", \"structured_text\"];\n\nconst container = document.getElementById(\"app\");\nconst root = createRoot(container!);\n\nfunction render(component: React.ReactNode): void {\n root.render({component});\n}\n\nconnect({\n overrideFieldExtensions(field) {\n if (\n !FIELDS_TYPES.includes(field.attributes.field_type as FieldType)\n ) {\n return;\n }\n\n if (!(\"length\" in field.attributes.validators)) {\n return;\n }\n\n if (\n field.attributes.appearance.addons.find(\n (addon) => addon.field_extension === \"character-count\"\n )\n ) {\n return;\n }\n\n return {\n addons: [\n {\n id: \"character-count\",\n initialHeight: 0,\n },\n ],\n };\n },\n manualFieldExtensions() {\n return [\n {\n id: \"character-count\",\n name: \"Character counter\",\n type: \"addon\",\n fieldTypes: FIELDS_TYPES,\n configurable: false,\n initialHeight: 0,\n },\n ];\n },\n renderFieldExtension(_id, ctx) {\n render();\n },\n});\n",[],[186],{"_102":195,"_95":196,"_155":197,"_157":-5,"_158":137,"_159":136,"_161":162,"_104":198,"_99":179,"_164":199,"_166":200,"_168":22,"_169":-5,"_170":201,"_98":202},"a3eec50a-c3b5-11f0-87ec-42dde27851f2","http.tsx","019a917e-148a-77d2-89fb-0fa1a00a694c",["D",1763384535524],"http","const CLIENT_MODULE = import.meta.url.replace(\"http.tsx\", \"client.tsx\");\n\nconst html = `\n\n \n \n \n DatoCMS Character Counter Plugin\n \n \n \n

\n \n \n\n`;\n\nexport default async function (req: Request): Promise {\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });\n}\n",[],[196],"files",[152,173,184,194],"counts",{"_207":32,"_208":179,"_209":32,"_210":211},"pulls","branches","forks","envVars",{"_212":32,"_213":32},"count","emptyCount","contents",[216,219,222,225],{"_102":153,"_95":154,"_155":156,"_157":-5,"_158":137,"_159":160,"_161":162,"_104":217,"_99":32,"_164":165,"_166":167,"_168":22,"_169":-5,"_98":218},["D",1763383893093],[154],{"_102":174,"_95":175,"_155":176,"_157":-5,"_158":137,"_159":177,"_161":162,"_104":220,"_99":179,"_164":180,"_166":181,"_168":22,"_169":-5,"_98":221},["D",1763383912619],[175],{"_102":185,"_95":186,"_155":187,"_157":-5,"_158":137,"_159":188,"_161":162,"_104":223,"_99":190,"_164":165,"_166":191,"_168":22,"_169":-5,"_98":224},["D",1763384527049],[186],{"_102":195,"_95":196,"_155":197,"_157":-5,"_158":137,"_159":136,"_161":162,"_104":226,"_99":179,"_164":199,"_166":200,"_168":22,"_169":-5,"_98":227},["D",1763384535524],[196],"upstreamProject",{"_102":144,"_95":230,"_110":231,"_112":232,"_108":109,"_23":233},"react-spa-starter","Minimal React SPA example built in Val Town","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/f0f7dcce-d342-468d-92be-481bb6870700/square512",{"_93":234,"_129":235},"jxnblk","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/fca87e60-4ad1-453c-af10-2782c6823400/square512","upstreamBranch",{"_102":140,"_104":238,"_239":240,"_95":43,"_138":144,"_99":136,"_139":-5,"_141":-5,"_241":242,"_106":-5,"_149":22,"_108":109,"_148":234,"_16":146,"_147":230},["D",1743170677719],"updatedAt",["D",1743175177856],"lockfileKey","1744741827351-esm.town_v_jxnblk_react-spa-starter@16-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.remixes",{"_93":94,"_95":96,"_100":249,"_209":254,"_255":256},{"_102":103,"_95":96,"_104":250,"_106":-5,"_107":22,"_108":109,"_110":111,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":251,"_131":252,"_134":253,"_149":22},["D",1763377550416],{"_93":94,"_129":130},{"_93":94,"_133":130,"_14":113},{"_99":136,"_95":43,"_102":137,"_138":103,"_139":140,"_141":136,"_142":109,"_143":144,"_145":146,"_147":96,"_148":94},[],"upstream",{"_102":144,"_95":230,"_110":231,"_112":232,"_108":109,"_23":257},{"_93":234,"_129":235},"actionData","errors"]

sistrall

datocms-plugin-character-counter-example