Custom widgets - prefix name contract to model fix

Author: JMach1

src/components/custom-widget/customWidgetModelBinder.publish.ts

@@ -3,15 +3,12 @@ import { Contract } from "@paperbits/common";
 import { CustomWidgetModel } from "./customWidgetModel";
 import { CustomWidgetContract } from "./customWidgetContract";
 import { widgetName } from "./constants";
+import { customWidgetPrefixName, customWidgetRemovePrefixName } from "./ko/utils";
 
 export class CustomWidgetModelBinder implements IModelBinder<CustomWidgetModel> {
-    public canHandleModel(model: unknown): boolean {
-        return model instanceof CustomWidgetModel;
-    }
-
     public async contractToModel(contract: CustomWidgetContract): Promise<CustomWidgetModel> {
         const model = new CustomWidgetModel();
-        model.name = contract.name ?? "";
+        model.name = customWidgetPrefixName(contract.name) ?? "";
         model.displayName = contract.displayName || contract.widgetDisplayName;
         model.customInputValue = contract.customInputValue ?? "{}";
         model.instanceId = contract.instanceKey;
@@ -22,7 +19,7 @@ export class CustomWidgetModelBinder implements IModelBinder<CustomWidgetModel>
     public modelToContract(model: CustomWidgetModel): Contract {
         return {
             type: widgetName,
-            name: model.name,
+            name: customWidgetRemovePrefixName(model.name),
             displayName: model.displayName,
             customInputValue: model.customInputValue,
             instanceKey: model.instanceId,

src/components/custom-widget/customWidgetModelBinder.ts

@@ -3,15 +3,12 @@ import { Contract } from "@paperbits/common";
 import { CustomWidgetModel } from "./customWidgetModel";
 import { CustomWidgetContract } from "./customWidgetContract";
 import { widgetName } from "./constants";
+import { customWidgetPrefixName, customWidgetRemovePrefixName } from "./ko/utils";
 
 export class CustomWidgetModelBinder implements IModelBinder<CustomWidgetModel> {
-    public canHandleModel(model: unknown, widgetName: string): boolean {
-        return model instanceof CustomWidgetModel && model["name"] == widgetName;
-    }
-
     public async contractToModel(contract: CustomWidgetContract): Promise<CustomWidgetModel> {
         const model = new CustomWidgetModel();
-        model.name = contract.name ?? "";
+        model.name = customWidgetPrefixName(contract.name) ?? "";
         model.displayName = contract.displayName || contract.widgetDisplayName;
         model.customInputValue = contract.customInputValue ?? "{}";
         model.instanceId = contract.instanceKey;
@@ -22,7 +19,7 @@ export class CustomWidgetModelBinder implements IModelBinder<CustomWidgetModel>
     public modelToContract(model: CustomWidgetModel): Contract {
         return {
             type: widgetName,
-            name: model.name,
+            name: customWidgetRemovePrefixName(model.name),
             displayName: model.displayName,
             customInputValue: model.customInputValue,
             instanceKey: model.instanceId,

src/components/custom-widget/ko/utils.ts

@@ -15,13 +15,17 @@ export const customWidgetPrefixName = (name: string): string => {
     return customWidgetNamePrefix + name;
 }
 
+export const customWidgetRemovePrefixName = (name: string): string => {
+    return name.startsWith(customWidgetNamePrefix) ? name.replace(customWidgetNamePrefix, "") : name; // replace first occurrence only
+}
+
 export async function buildWidgetSource(
     blobStorage: MapiBlobStorage,
     model: CustomWidgetModel,
     environment: Environment,
     filePath: string,
 ): Promise<{ override: string | null, src: string }> {
-    const name = model.name.startsWith(customWidgetNamePrefix) ? model.name.replace(customWidgetNamePrefix, "") : model.name;
+    const name = customWidgetRemovePrefixName(model.name);
 
     // check is necessary during publishing as window.sessionStorage.getItem throws "DOMException {}  node:internal/process/promises:279"
     const developmentSrc = environment !== "publishing"