DatoCMS Character Counter Plugin

\n );\n}\n","deleted","label","children",[],[155],{"_103":175,"_95":176,"_156":177,"_158":-5,"_159":138,"_160":178,"_162":163,"_105":179,"_100":180,"_165":181,"_167":182,"_169":22,"_170":-5,"_171":183,"_98":184},"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",[],[176],{"_103":186,"_95":187,"_156":188,"_158":-5,"_159":138,"_160":189,"_162":163,"_105":190,"_100":191,"_165":166,"_167":192,"_169":22,"_170":-5,"_171":193,"_98":194},"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",[],[187],{"_103":196,"_95":99,"_156":197,"_158":-5,"_159":138,"_160":137,"_162":163,"_105":198,"_100":180,"_165":199,"_167":200,"_169":22,"_170":-5,"_171":201,"_98":202},"a3eec50a-c3b5-11f0-87ec-42dde27851f2","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",[],[99],"files",[153,174,185,195],"counts",{"_207":32,"_208":180,"_209":32,"_210":211},"pulls","branches","forks","envVars",{"_212":32,"_213":32},"count","emptyCount","contents",[],{"_103":196,"_159":138,"_156":197,"_95":99,"_167":200,"_165":199,"_100":180,"_158":-5,"_105":217,"_160":137,"_170":-5,"_98":218},["D",1763384535524],[99],"upstreamProject",{"_103":145,"_95":221,"_111":222,"_113":223,"_109":110,"_23":224},"react-spa-starter","Minimal React SPA example built in Val Town","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/f0f7dcce-d342-468d-92be-481bb6870700/square512",{"_93":225,"_130":226},"jxnblk","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/fca87e60-4ad1-453c-af10-2782c6823400/square512","upstreamBranch",{"_103":141,"_105":229,"_230":231,"_95":43,"_139":145,"_100":137,"_140":-5,"_142":-5,"_232":233,"_107":-5,"_150":22,"_109":110,"_149":225,"_16":147,"_148":221},["D",1743170677719],"updatedAt",["D",1743175177856],"lockfileKey","1744741827351-esm.town_v_jxnblk_react-spa-starter@16-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.code.$",{"_93":94,"_95":96,"_97":43,"_100":-7,"_98":99,"_101":240,"_151":245,"_203":258,"_181":259,"_214":262,"_263":264,"_267":-5,"_268":189,"_269":32,"_270":271},{"_103":104,"_95":96,"_105":241,"_107":-5,"_108":22,"_109":110,"_111":112,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":242,"_132":243,"_135":244,"_150":22},["D",1763377550416],{"_93":94,"_130":131},{"_93":94,"_134":131,"_14":114},{"_100":137,"_95":43,"_103":138,"_139":104,"_140":141,"_142":137,"_143":110,"_144":145,"_146":147,"_148":96,"_149":94},[246,249,252,255],{"_103":154,"_95":155,"_156":157,"_158":-5,"_159":138,"_160":161,"_162":163,"_105":164,"_100":32,"_165":166,"_167":168,"_169":22,"_170":-5,"_171":247,"_98":248},[],[155],{"_103":175,"_95":176,"_156":177,"_158":-5,"_159":138,"_160":178,"_162":163,"_105":179,"_100":180,"_165":181,"_167":182,"_169":22,"_170":-5,"_171":250,"_98":251},[],[176],{"_103":186,"_95":187,"_156":188,"_158":-5,"_159":138,"_160":189,"_162":163,"_105":190,"_100":191,"_165":166,"_167":192,"_169":22,"_170":-5,"_171":253,"_98":254},[],[187],{"_103":196,"_95":99,"_156":197,"_158":-5,"_159":138,"_160":137,"_162":163,"_105":198,"_100":180,"_165":199,"_167":200,"_169":22,"_170":-5,"_171":256,"_98":257},[],[99],[246,249,252,255],{"_103":196,"_159":138,"_156":197,"_95":99,"_167":200,"_165":199,"_100":180,"_158":-5,"_105":260,"_160":137,"_170":-5,"_98":261},["D",1763384535524],[99],[],"upstream",{"_103":141,"_105":265,"_230":266,"_95":43,"_139":145,"_100":137,"_140":-5,"_142":-5,"_232":233,"_107":-5,"_150":22,"_109":110,"_149":225,"_16":147,"_148":221},["D",1743170677719],["D",1743175177856],"pull","ahead","behind","templates",[],"actionData","errors"]

sistrall

datocms-plugin-character-counter-example