Add support for different preview image formats

- This allows png alongside the default svg format. It is necessary when using a custom font, because diagrams.net includes the whole font in svg data-urls which are consequently too large. Using png preview serves as a workaround for this problem.

README.md

@@ -31,7 +31,7 @@ You can also provide a [configuration](#Configuration) to the element, but it is
 ## Configuration
 
 You can provide an optional configuration. See the example bellow.
-https://github.com/JiriLojda/integration-diagrams-net/blob/7b6c360b4c68aec62fa28b3593b9e77dbdb1bbd1/src/constants/readmeSnippets.ts#L3-L13
+https://github.com/JiriLojda/integration-diagrams-net/blob/7b6c360b4c68aec62fa28b3593b9e77dbdb1bbd1/src/constants/readmeSnippets.ts#L3-L14
 
 ## Deploy
 
@@ -46,7 +46,15 @@ Netlify has made this easy. If you click the deploy button below, it will guide
 ## Saved value
 
 This is an example of a value saved in the custom element that can be used on your site. Keep in mind that it is serialized into string.
-https://github.com/JiriLojda/integration-diagrams-net/blob/7b6c360b4c68aec62fa28b3593b9e77dbdb1bbd1/src/constants/readmeSnippets.ts#L15-L22
+https://github.com/JiriLojda/integration-diagrams-net/blob/7b6c360b4c68aec62fa28b3593b9e77dbdb1bbd1/src/constants/readmeSnippets.ts#L16-L23
+
+# Known Issues
+
+## Value is too large for Kontent.ai with a custom font used in the diagram.
+
+When using the `previewImageFormat: "svg"` and a custom font in the diagram, diagrams.net includes the whole font in the data-url for preview.
+This makes it (and the value as the data-url is saved as well) too large.
+To avoid the problem, set `previewImageFormat: "png"` in your configuration. Png's don't have this problem, but are usually bigger so the svg is the default.
 
 # Contributing
 

src/constants/readmeSnippets.ts

@@ -1,10 +1,11 @@
 import { Config, Value } from "../useCustomElementContext";
 
-export const exampleConfiguration: Config = {
+export const exampleConfiguration: Required<Config> = {
   previewBorder: { // if defined, show a border around the diagram preview
     color: "#000000", // border color
     weight: 1, // border width
   },
+  previewImageFormat: "png", // one of "svg" or "png". Set this to png when you use custom font as diagrams.net includes the font in the generated preview data-url which makes it too large.
   configuration: { // diagrams.net configuration, see https://www.diagrams.net/doc/faq/configure-diagram-editor for available keys
     colorNames: {
       "000000": "Our color",
@@ -14,7 +15,7 @@ export const exampleConfiguration: Config = {
 
 export const exampleValue: Value = {
   xml: "...", // the diagram in xml format used by diagrams.net
-  dataUrl: "...", // data url of svg preview of the diagram for preview
+  dataUrl: "...", // data-url of svg preview of the diagram for preview
   dimensions: { // dimensions of the diagram calculated by diagrams.net
     width: 100,
     height: 100,

src/handleDiagramsEvent.ts

@@ -25,7 +25,7 @@ export const handleDiagramsEvent = ({ config, editorWindowOrigin, editorWindow,
     const sendExportMessage = () => {
       postMessage({
         action: "export",
-        format: "svg",
+        format: config?.previewImageFormat,
       });
     };
 
@@ -94,7 +94,7 @@ export const handleDiagramsEvent = ({ config, editorWindowOrigin, editorWindow,
 
 type ExportMessage = Readonly<{
   action: "export";
-  format: "svg";
+  format: "svg" | "png" | undefined;
 }>;
 
 type LoadMessage = Readonly<{

src/useCustomElementContext.tsx

@@ -15,6 +15,7 @@ export type Config = Readonly<{
     color: string;
     weight: number;
   }>;
+  previewImageFormat?: "svg" | "png"; // svg is the default
   configuration?: Readonly<Record<string, unknown>>;
 }>;
 
@@ -75,6 +76,7 @@ const isStrictlyConfig: (v: unknown) => v is Config = tg.ObjectOf({
     color: tg.isString,
     weight: tg.isNumber,
   })),
+  previewImageFormat: tg.ValueOf(["svg", "png"] as const),
   configuration: tg.OptionalOf(tg.isObject),
 });