Merge pull request #17 from u8array/feat/zpl-content-validation

Feat/zpl content validation

Author: u8array

src/components/Canvas/BarcodeObject.tsx

@@ -66,7 +66,11 @@ export function BarcodeObject({
       bwipjs.toCanvas(canvas, opts as unknown as Parameters<typeof bwipjs.toCanvas>[1]);
       barcodeCanvas = canvas;
     } catch (e) {
-      errorMsg = e instanceof Error ? e.message : String(e);
+      const raw = e instanceof Error ? e.message : String(e);
+      // bwip-js prefixes its errors like `bwip-js: bwipp.code39badCharacter: ...`
+      // Strip the library/identifier head so the placeholder shows only the
+      // human-readable reason.
+      errorMsg = raw.replace(/^bwip-js:\s*/i, '').replace(/^bwipp\.[^:]+:\s*/i, '');
     }
   }
 
@@ -589,9 +593,13 @@ export function BarcodeObject({
       <Text
         x={6}
         y={6}
+        width={fbW - 12}
+        height={fbH - 12}
+        wrap="word"
+        ellipsis
         text={errorMsg ? `⚠ ${errorMsg}` : obj.type}
         fontSize={Math.max(dotsToPx(10, scale, dpmm), 8)}
-        fill="#374151"
+        fill={errorMsg ? "#b91c1c" : "#374151"}
       />
     </Group>
   );

src/components/Canvas/bwipHelpers.ts

@@ -204,7 +204,15 @@ export function buildBwipOptions(
     case "codabar":
     case "plessey": {
       const p = obj.props;
-      opts = { bcid, text: p.content || "0", scale: scale1D, height: 10 };
+      // Code39/Codabar/Plessey only encode uppercase letters. Zebra firmware
+      // (and Labelary) silently uppercase lowercase input; bwip-js does not and
+      // throws instead, which would crash the canvas for any imported ZPL with
+      // lowercase content. Uppercase here so the lib matches firmware behaviour
+      // without rewriting the user's source.
+      const needsUpper = obj.type === "code39" || obj.type === "codabar" || obj.type === "plessey";
+      const raw = p.content || "0";
+      const text = needsUpper ? raw.toUpperCase() : raw;
+      opts = { bcid, text, scale: scale1D, height: 10 };
       break;
     }
     case "msi": {
@@ -221,9 +229,10 @@ export function buildBwipOptions(
     }
     case "logmars": {
       const p = obj.props;
+      // LOGMARS is a Code39 subset; same uppercase rule applies.
       opts = {
         bcid,
-        text: p.content || "0",
+        text: (p.content || "0").toUpperCase(),
         scale: scale1D,
         height: 10,
         includecheck: true,

src/registry/aztec.tsx

@@ -1,7 +1,7 @@
 import type { ObjectTypeDefinition } from "../types/ObjectType";
 import { useT } from "../lib/useT";
 import { inputCls, labelCls } from "../components/Properties/styles";
-import { fieldPos } from "./zplHelpers";
+import { fieldPos, fdField } from "./zplHelpers";
 
 export interface AztecProps {
   content: string;
@@ -27,7 +27,7 @@ export const aztec: ObjectTypeDefinition<AztecProps> = {
     return [
       fieldPos(obj),
       `^B0N,${p.magnification},N,N,N,N`,
-      `^FD${p.content}^FS`,
+      fdField(p.content),
     ].join("");
   },
 

src/registry/barcode1d.tsx

@@ -1,8 +1,9 @@
 import type { ObjectTypeDefinition, ObjectGroup, LabelObjectBase } from '../types/ObjectType';
 import { useT } from '../lib/useT';
 import { inputCls, labelCls } from '../components/Properties/styles';
-import { fieldPos } from './zplHelpers';
+import { fieldPos, fdField } from './zplHelpers';
 import { commitHeightTransform } from './transformHelpers';
+import { filterContent, type ContentSpec } from './contentSpec';
 
 export interface Barcode1DProps {
   content: string;
@@ -16,7 +17,6 @@ interface Barcode1DConfig {
   label: string;
   icon: string;
   defaultContent: string;
-  contentMaxLength?: number;
   hasCheckDigit: boolean;
   /** Build the ZPL barcode command (e.g. `^BUN,100,Y,N,N`). */
   zplCommand: (p: Barcode1DProps) => string;
@@ -34,6 +34,8 @@ interface Barcode1DConfig {
   heightLocked?: boolean;
   /** See {@link ObjectTypeDefinition.interpretationLocked}. */
   interpretationLocked?: boolean;
+  /** Restrict allowed input characters; see {@link ContentSpec}. */
+  contentSpec?: ContentSpec;
 }
 
 interface BarcodeLocale {
@@ -77,7 +79,7 @@ export function createBarcode1D(config: Barcode1DConfig): ObjectTypeDefinition<B
         byCmd,
         fieldPos(obj),
         config.zplCommand(p),
-        `^FD${p.content}^FS`,
+        fdField(p.content),
       ].filter(Boolean).join('');
     },
 
@@ -92,9 +94,9 @@ export function createBarcode1D(config: Barcode1DConfig): ObjectTypeDefinition<B
             <input
               className={inputCls}
               value={p.content}
-              maxLength={config.contentMaxLength}
+              maxLength={config.contentSpec?.maxLength}
               placeholder={loc.placeholder}
-              onChange={(e) => onChange({ content: e.target.value })}
+              onChange={(e) => onChange({ content: filterContent(e.target.value, config.contentSpec) })}
             />
           </div>
 

src/registry/codabar.tsx

@@ -8,6 +8,7 @@ export const codabar = createBarcode1D({
   hasCheckDigit: true,
   localeKey: "codabar",
   group: 'code-1d',
+  contentSpec: { charset: '0-9A-Da-d\\-$:/.+' },
   zplCommand: (p) => {
     const interp = p.printInterpretation ? "Y" : "N";
     const check = p.checkDigit ? "Y" : "N";

src/registry/codablock.tsx

@@ -1,7 +1,7 @@
 import type { ObjectTypeDefinition } from "../types/ObjectType";
 import { useT } from "../lib/useT";
 import { inputCls, labelCls } from "../components/Properties/styles";
-import { fieldPos } from "./zplHelpers";
+import { fieldPos, fdField } from "./zplHelpers";
 import { commitStacked2DTransform } from "./transformHelpers";
 
 export interface CodablockProps {
@@ -32,7 +32,7 @@ export const codablock: ObjectTypeDefinition<CodablockProps> = {
       `^BY${p.moduleWidth}`,
       fieldPos(obj),
       `^BBN,${p.rowHeight},${p.securityLevel}`,
-      `^FD${p.content}^FS`,
+      fdField(p.content),
     ]
       .filter(Boolean)
       .join("");

src/registry/code11.tsx

@@ -8,6 +8,7 @@ export const code11 = createBarcode1D({
   hasCheckDigit: true,
   localeKey: "code11",
   group: 'code-1d',
+  contentSpec: { charset: '0-9\\-' },
   zplCommand: (p) => {
     const interp = p.printInterpretation ? "Y" : "N";
     const check = p.checkDigit ? "Y" : "N";

src/registry/code128.tsx

@@ -1,7 +1,7 @@
 import type { ObjectTypeDefinition } from '../types/ObjectType';
 import { useT } from '../lib/useT';
 import { inputCls, labelCls } from '../components/Properties/styles';
-import { fieldPos } from './zplHelpers';
+import { fieldPos, fdField } from './zplHelpers';
 import { commitHeightTransform } from './transformHelpers';
 
 export interface Code128Props {
@@ -35,7 +35,7 @@ export const code128: ObjectTypeDefinition<Code128Props> = {
       `^BY${p.moduleWidth}`,
       fieldPos(obj),
       `^BCN,${p.height},${interp},N,${check}`,
-      `^FD${p.content}^FS`,
+      fdField(p.content),
     ].filter(Boolean).join('');
   },
 

src/registry/code39.tsx

@@ -1,8 +1,11 @@
 import type { ObjectTypeDefinition } from '../types/ObjectType';
 import { useT } from '../lib/useT';
 import { inputCls, labelCls } from '../components/Properties/styles';
-import { fieldPos } from './zplHelpers';
+import { fieldPos, fdField } from './zplHelpers';
 import { commitHeightTransform } from './transformHelpers';
+import { filterContent, type ContentSpec } from './contentSpec';
+
+const code39Spec: ContentSpec = { charset: '0-9A-Za-z\\-. $/+%' };
 
 export interface Code39Props {
   content: string;
@@ -35,7 +38,7 @@ export const code39: ObjectTypeDefinition<Code39Props> = {
       `^BY${p.moduleWidth}`,
       fieldPos(obj),
       `^B3N,${check},${p.height},${interp},N`,
-      `^FD${p.content}^FS`,
+      fdField(p.content),
     ].filter(Boolean).join('');
   },
 
@@ -49,7 +52,7 @@ export const code39: ObjectTypeDefinition<Code39Props> = {
           <input
             className={inputCls}
             value={p.content}
-            onChange={(e) => onChange({ content: e.target.value })}
+            onChange={(e) => onChange({ content: filterContent(e.target.value, code39Spec) })}
           />
         </div>
 

src/registry/contentSpec.ts

@@ -0,0 +1,30 @@
+/**
+ * Per-symbology content rules. Applied on input so the canvas preview
+ * (bwip-js) does not throw on characters the renderer rejects.
+ *
+ * Case normalisation is intentionally not done here: the source ZPL
+ * is preserved verbatim, and `bwipHelpers` uppercases at the lib call
+ * site for the symbologies that require it.
+ */
+export interface ContentSpec {
+  /** Character-class body (no surrounding `[]`), e.g. `0-9` or `0-9A-Z\\-. $/+%`. */
+  charset: string;
+  maxLength?: number;
+}
+
+const rejectCache = new WeakMap<ContentSpec, RegExp>();
+
+function rejectPattern(spec: ContentSpec): RegExp {
+  let re = rejectCache.get(spec);
+  if (!re) {
+    re = new RegExp(`[^${spec.charset}]`, 'g');
+    rejectCache.set(spec, re);
+  }
+  return re;
+}
+
+export function filterContent(raw: string, spec?: ContentSpec): string {
+  if (!spec) return raw;
+  const filtered = raw.replace(rejectPattern(spec), '');
+  return spec.maxLength ? filtered.slice(0, spec.maxLength) : filtered;
+}