improve designer docs to not hard code cdn versions

source/nodejs/adaptivecards-designer-app/src/app.ts

@@ -3,6 +3,7 @@
 import * as monaco from "monaco-editor";
 import * as markdownit from "markdown-it";
 import * as ACDesigner from "adaptivecards-designer";
+import * as Adaptive from "adaptivecards";
 import "adaptivecards-designer/dist/adaptivecards-designer.css";
 import "./app.css";
 
@@ -50,49 +51,49 @@ window.onload = function() {
 	hostContainers.push(new ACDesigner.BotFrameworkContainer("Bot Framework Other Channels (Image render)", "containers/bf-image-container.css"));
 	hostContainers.push(new ACDesigner.ToastContainer("Windows Notifications (Preview)", "containers/toast-container.css"));
 
-    let designer = new ACDesigner.CardDesigner(hostContainers);
+	let designer = new ACDesigner.CardDesigner(hostContainers);
+	designer.sampleCatalogueUrl = window.location.origin + "/sample-catalogue.json";
+	designer.attachTo(document.getElementById("designerRootHost"));
 
-    designer.sampleCatalogueUrl = window.location.origin + "/sample-catalogue.json";
-    designer.attachTo(document.getElementById("designerRootHost"));
-
-    /* Uncomment to test a custom palette item example
-    let exampleSnippet = new ACDesigner.SnippetPaletteItem("Custom", "Example");
-    exampleSnippet.snippet = {
-        type: "ColumnSet",
-        columns: [
-            {
-                width: "auto",
-                items: [
-                    {
-                        type: "Image",
-                        size: "Small",
-                        style: "Person",
-                        url: "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg"
-                    }
-                ]
-            },
-            {
-                width: "stretch",
-                items: [
-                    {
-                        type: "TextBlock",
-                        text: "John Doe",
-                        weight: "Bolder",
-                        wrap: true
-                    },
-                    {
-                        type: "TextBlock",
-                        spacing: "None",
-                        text: "Additional information",
-                        wrap: true
-                    }
-                ]
-            }
-        ]
-    };
+	/* Uncomment to test a custom palette item example
 
-    designer.customPaletteItems = [ exampleSnippet ];
-    */
+  let exampleSnippet = new ACDesigner.SnippetPaletteItem("Custom", "Example");
+  exampleSnippet.snippet = {
+      type: "ColumnSet",
+      columns: [
+          {
+              width: "auto",
+              items: [
+                  {
+                      type: "Image",
+                      size: "Small",
+                      style: "Person",
+                      url: "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg"
+                  }
+              ]
+          },
+          {
+              width: "stretch",
+              items: [
+                  {
+                      type: "TextBlock",
+                      text: "John Doe",
+                      weight: "Bolder",
+                      wrap: true
+                  },
+                  {
+                      type: "TextBlock",
+                      spacing: "None",
+                      text: "Additional information",
+                      wrap: true
+                  }
+              ]
+          }
+      ]
+  };
+
+  designer.customPaletteItems = [ exampleSnippet ];
+  */
 
 	designer.monacoModuleLoaded(monaco);
 

source/nodejs/adaptivecards-designer/README.md

@@ -38,11 +38,15 @@ To load the designer component you have 2 options:
 <!-- REQUIRED: monaco-editor is required for the designer to work -->
 <script src="https://unpkg.com/[email protected]/min/vs/loader.js"></script>
 
-<!-- DESIGNER OPTION A: Card Designer + Standard Hosts -->
-<script src="https://unpkg.com/[email protected]/dist/adaptivecards-designer.min.js"></script>
+<!-- DESIGNER OPTION A: Card Designer + Standard Hosts 
+	(replace <VERSION> with the version you want to load, or "latest" for latest)
+-->
+<script src="https://unpkg.com/adaptivecards-designer@<VERSION>/dist/adaptivecards-designer.min.js"></script>
 
-<!-- DESIGNER OPTION B: Standalone Card Designer, without standard Hosts -->
-<!--<script src="https://unpkg.com/[email protected]/dist/adaptivecards-designer-standalone.min.js"></script>-->
+<!-- DESIGNER OPTION B: Standalone Card Designer, without standard Hosts 
+	(replace <VERSION> with the version you want to load, or "latest" for latest)
+	<script src="https://unpkg.com/adaptivecards-designer@<VERSION>/dist/adaptivecards-designer-standalone.min.js"></script>
+-->
 
 <script type="text/javascript">
 	window.onload = function() {
@@ -56,7 +60,8 @@ To load the designer component you have 2 options:
 
 		// The designer requires various CSS and image assets to work properly, 
 		// If you've loaded the script from a CDN it needs to know where these assets are located
-		designer.assetPath = "https://unpkg.com/[email protected]/dist";
+		// Use the same <VERSION> that you used above
+		designer.assetPath = "https://unpkg.com/adaptivecards-designer@<VERSION>/dist";
 
 		// Initialize monaco-editor for the JSON-editor pane. The simplest way to do this is use the code below
 		require.config({ paths: { 'vs': 'https://unpkg.com/[email protected]/min/vs' } });
@@ -235,5 +240,13 @@ For advanced configuration of the designer use the following APIs.
 			]
 		}
 	);
+
+	/* Modify the Element toolbox (BEFORE designer attached) */ 
+	Adaptive.AdaptiveCard.elementTypeRegistry.unregisterType("RichTextBlock");
+	ACDesigner.CardDesignerSurface.cardElementPeerRegistry.unregisterPeer(Adaptive.RichTextBlock);
+
+	/* Modify the Actions flyout (AFTER designer attached) */
+	Adaptive.AdaptiveCard.actionTypeRegistry.unregisterType("Action.ToggleVisibility");
+	ACDesigner.CardDesignerSurface.actionPeerRegistry.unregisterPeer(Adaptive.ToggleVisibilityAction);	
 };
 ```