DatoCMS Character Counter Plugin

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_231":232,"_233":234},"routes/_app.x.$handle.$name",{"_98":97,"_32":45,"_106":86,"_27":107,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":119,"_120":121,"_122":25,"_123":124,"_125":58,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":58,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",12,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","client.tsx","latestPath","fileId","019aa0e8-e924-717e-ae85-8e9fe70435c0","name","fileType","script","content","/** @jsxImportSource https://esm.sh/react */\nimport { StrictMode } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\nimport { connect, type FieldType } from \"https://esm.sh/datocms-plugin-sdk\";\nimport ConfigScreen from \"./entrypoints/ConfigScreen\";\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 renderConfigScreen(ctx) {\n console.log(\"renderConfigScreen\");\n return render();\n },\n});","/** @jsxImportSource https://esm.sh/react */\nimport { StrictMode } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\nimport { connect, type FieldType } from \"https://esm.sh/datocms-plugin-sdk\";\nimport ConfigScreen from \"./entrypoints/ConfigScreen.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 renderConfigScreen(ctx) {\n console.log(\"renderConfigScreen\");\n return render();\n },\n});","createdAt",["D",1763636483511],"branchVersion","branchId","9d936d9a-c5ff-11f0-8d60-42dde27851f2","id","9d916c70-c5ff-11f0-8d60-42dde27851f2","datocms-plugin-reactive-plugin-example",["D",1763636209930],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","75e35405-1466-4543-bff5-1b566e657400","pinnedFileId","019aa0e8-e924-717e-ae85-913ccdc3050f","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","248aeede-d9fb-4c63-b9a6-3277842689e9","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_105":101},"org",{"_98":97,"_99":-5,"_100":101,"_18":54,"_102":103,"_104":25},"branch",{"_13":85,"_32":86,"_43":42,"_87":44,"_88":89,"_90":85,"_91":50,"_92":93,"_94":64,"_95":45,"_96":97},"isOwned",16,"main","projectId","forkedBranchId","60826e08-c3a5-11f0-8bea-42dde27851f2","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","607fcc8e-c3a5-11f0-8bea-42dde27851f2","forkedProjectOrgId","projectName","userHandle","sistrall","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yVVdmWEIzSmtYY2VjM0R6bHRaV2NUY2tvN2QuanBlZyJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":227,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":58,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":228,"_80":229,"_82":230,"_84":25},"tree",[188,191,192,193,194],"files",[188,189,190,191,192,193,194],"counts",{"_178":62,"_179":148,"_180":62,"_181":182,"_183":184},"contents",[140,141,142,143,144],"upstreamProject",{"_43":93,"_32":137,"_52":138,"_53":-5,"_49":50,"_78":139},"upstreamBranch",{"_43":89,"_38":130,"_131":132,"_32":86,"_87":93,"_13":133,"_88":134,"_90":85,"_135":136,"_47":-5,"_84":25,"_49":50,"_96":97,"_63":64,"_95":137},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1763377550416],"updatedAt",["D",1763650642363],20,"95ca739c-0bdd-11f0-8dac-569c3dd06744","lockfileKey","1763384697397-esm.town_v_sistrall_datocms-plugin-character-counter-example@16-main","datocms-plugin-character-counter-example","Val.town porting of the character-counter plugin",{"_98":97,"_105":101},{"_43":171,"_32":172,"_30":173,"_147":-5,"_41":42,"_40":174,"_149":58,"_38":175,"_13":148,"_33":176,"_35":-5,"_24":25,"_153":-5,"_27":177},{"_43":165,"_32":166,"_30":167,"_147":-5,"_41":42,"_40":148,"_149":58,"_38":168,"_13":62,"_33":34,"_35":169,"_24":25,"_153":-5,"_27":170},{"_43":159,"_32":160,"_30":161,"_147":-5,"_41":42,"_40":148,"_149":58,"_38":162,"_13":62,"_33":20,"_35":163,"_24":25,"_153":-5,"_27":164},{"_43":155,"_32":28,"_30":31,"_147":-5,"_41":42,"_40":14,"_149":25,"_38":156,"_13":157,"_33":34,"_35":37,"_24":25,"_153":-5,"_27":158},{"_43":145,"_32":146,"_30":56,"_147":-5,"_41":42,"_40":148,"_149":58,"_38":150,"_13":62,"_33":151,"_35":152,"_24":25,"_153":-5,"_27":154},"9d958ae4-c5ff-11f0-8d60-42dde27851f2","http.tsx","parentId",1,"latest",["D",1763636209930],"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","label",[146],"40b04d2c-c600-11f0-b1c2-42dde27851f2",["D",1763636483511],2,[28],"9d958332-c5ff-11f0-8d60-42dde27851f2","README.md","019aa0e8-e924-717e-ae85-88371b93aba0",["D",1763636209930],"# 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",[160],"9d9573c4-c5ff-11f0-8d60-42dde27851f2","FieldExtension.tsx","019aa0e8-e924-717e-ae85-85c6dd317989",["D",1763636209930],"/** @jsxImportSource https://esm.sh/react */\nimport type { RenderFieldExtensionCtx } from \"https://esm.sh/datocms-plugin-sdk\";\nimport { Canvas } from \"https://esm.sh/datocms-react-ui\";\nimport { get } from \"https://esm.sh/lodash-es\";\nimport {\n type Node,\n isText,\n} from \"https://esm.sh/datocms-structured-text-slate-utils\";\n\ntype Props = {\n ctx: RenderFieldExtensionCtx;\n};\n\nfunction visit(\n nodes: Node[],\n test: (x: Node) => x is X,\n callback: (node: X) => void\n): void {\n nodes.forEach((node) => {\n if (test(node)) {\n callback(node);\n }\n\n if (\"children\" in node) {\n visit(node.children as any as Node[], test, callback);\n }\n });\n}\n\nfunction getCharCount(value: unknown, fieldType: string) {\n if ([\"string\", \"text\"].includes(fieldType)) {\n return (value as null | string)?.length || 0;\n }\n\n if (fieldType === \"structured_text\") {\n if (!value) {\n return 0;\n }\n\n let counter = 0;\n\n visit(value as Node[], isText, (textNode) => {\n counter += textNode.text.length;\n });\n\n return counter;\n }\n\n throw new Error(\"This should not happen\");\n}\n\nexport default function FieldExtension({ ctx }: Props) {\n const charCount = getCharCount(\n get(ctx.formValues, ctx.fieldPath),\n ctx.field.attributes.field_type\n );\n\n const wrapperStyle = {\n fontSize: \"var(--font-size-s)\",\n color: \"var(--light-body-color)\",\n };\n\n return (\n

\n );\n}\n",[166],"cbb55c6a-c5ff-11f0-9a5c-42dde27851f2","entrypoints","c913c2e4-c5ff-11f0-8b55-42dde27851f2",3,["D",1763636287340],"directory",[172],"pulls","branches","forks","envVars",{"_185":62,"_187":62},"connections",{"_185":62,"_186":62},"count","unfilledCount","emptyCount",{"_43":171,"_32":172,"_30":173,"_147":-5,"_41":42,"_40":174,"_149":58,"_38":224,"_13":148,"_33":176,"_35":-5,"_24":25,"_153":-5,"_196":225,"_27":226},{"_43":216,"_32":217,"_30":218,"_147":173,"_41":42,"_40":219,"_149":25,"_38":220,"_13":157,"_33":34,"_35":221,"_24":25,"_153":-5,"_196":222,"_27":223},{"_43":208,"_32":209,"_30":210,"_147":173,"_41":42,"_40":211,"_149":25,"_38":212,"_13":174,"_33":20,"_35":213,"_24":25,"_153":-5,"_196":214,"_27":215},{"_43":165,"_32":166,"_30":167,"_147":-5,"_41":42,"_40":148,"_149":58,"_38":205,"_13":62,"_33":34,"_35":169,"_24":25,"_153":-5,"_196":206,"_27":207},{"_43":159,"_32":160,"_30":161,"_147":-5,"_41":42,"_40":148,"_149":58,"_38":202,"_13":62,"_33":20,"_35":163,"_24":25,"_153":-5,"_196":203,"_27":204},{"_43":155,"_32":28,"_30":31,"_147":-5,"_41":42,"_40":14,"_149":25,"_38":199,"_13":157,"_33":34,"_35":37,"_24":25,"_153":-5,"_196":200,"_27":201},{"_43":145,"_32":146,"_30":56,"_147":-5,"_41":42,"_40":148,"_149":58,"_38":195,"_13":62,"_33":151,"_35":152,"_24":25,"_153":-5,"_196":197,"_27":198},["D",1763636209930],"children",[],[146],["D",1763636483511],[],[28],["D",1763636209930],[],[160],["D",1763636209930],[],[166],"27111c34-c600-11f0-b302-42dde27851f2","styles.module.css","1ff107ac-c600-11f0-a380-42dde27851f2",9,["D",1763636440607],".inspector {\n margin-top: var(--spacing-l);\n}",[],[172,209],"28381266-c600-11f0-bff6-42dde27851f2","ConfigScreen.tsx","d4793722-c5ff-11f0-bda3-42dde27851f2",10,["D",1763636442546],"import type { RenderConfigScreenCtx } from \"https://esm.sh/datocms-plugin-sdk\";\nimport {\n Button,\n Canvas,\n ContextInspector,\n FieldGroup,\n Form,\n TextInput,\n} from \"https://esm.sh/datocms-react-ui\";\nimport { useState } from \"https://esm.sh/react\";\nimport s from \"./styles.module.css\";\n\ntype Props = {\n ctx: RenderConfigScreenCtx;\n};\n\nexport default function ConfigScreen({ ctx }: Props) {\n const [testValue, setTestValue] = useState(\"\");\n const parameters = ctx.plugin.attributes.parameters;\n\n const updateParameters = async (newParams: Record) => {\n if (!ctx.currentRole.meta.final_permissions.can_edit_schema) {\n await ctx.alert(\"You do not have permission to edit plugin parameters.\");\n return;\n }\n await ctx.updatePluginParameters(newParams);\n await ctx.notice(\"Plugin parameters successfully updated!\");\n };\n\n const handleManualUpdate = async (e: React.FormEvent) => {\n e.preventDefault();\n await updateParameters({ ...parameters, testValue });\n setTestValue(\"\");\n };\n\n const handleRandomUpdate = async () => {\n const randomValue = Math.random().toString(36).substring(7);\n await updateParameters({ ...parameters, randomValue });\n };\n\n const handleReset = async () => {\n await updateParameters({});\n };\n\n return (\n

\n );\n}",[],[172,217],["D",1763636287340],[189,190],[172],["D",1763636209930],{"_98":97,"_105":101},{"_98":97,"_99":-5,"_100":101,"_18":54,"_102":103,"_104":25},{"_13":85,"_32":86,"_43":42,"_87":44,"_88":89,"_90":85,"_91":50,"_92":93,"_94":64,"_95":45,"_96":97},"ctx",{"_78":-5,"_127":264,"_265":266,"_267":268,"_269":25,"_270":25,"_271":25,"_272":58,"_273":-5,"_274":-7,"_275":-7,"_276":62,"_277":25,"_278":25,"_279":-5,"_280":25,"_281":25,"_282":25,"_283":-5},"ENV",{"_235":236,"_237":238,"_239":86,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

QA: Reactivity Test

Current Parameters:

Diff · v12