adds some pictures to the descriptions

package-lock.json

@@ -41,6 +41,7 @@
 				"mocha": "^10.2.0",
 				"nyc": "^15.1.0",
 				"ts-loader": "^9.4.2",
+				"url-loader": "^4.1.1",
 				"webpack": "^5.75.0",
 				"webpack-cli": "^4.10.0",
 				"webpack-dev-server": "^4.11.1"
@@ -1964,6 +1965,15 @@
 			"integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
 			"dev": true
 		},
+		"node_modules/big.js": {
+			"version": "5.2.2",
+			"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+			"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+			"dev": true,
+			"engines": {
+				"node": "*"
+			}
+		},
 		"node_modules/binary-extensions": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -3280,6 +3290,15 @@
 			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
 			"dev": true
 		},
+		"node_modules/emojis-list": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+			"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+			"dev": true,
+			"engines": {
+				"node": ">= 4"
+			}
+		},
 		"node_modules/encodeurl": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@@ -4872,6 +4891,20 @@
 				"node": ">=6.11.5"
 			}
 		},
+		"node_modules/loader-utils": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+			"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+			"dev": true,
+			"dependencies": {
+				"big.js": "^5.2.2",
+				"emojis-list": "^3.0.0",
+				"json5": "^2.1.2"
+			},
+			"engines": {
+				"node": ">=8.9.0"
+			}
+		},
 		"node_modules/locate-path": {
 			"version": "6.0.0",
 			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -7309,6 +7342,33 @@
 				"punycode": "^2.1.0"
 			}
 		},
+		"node_modules/url-loader": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
+			"integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==",
+			"dev": true,
+			"dependencies": {
+				"loader-utils": "^2.0.0",
+				"mime-types": "^2.1.27",
+				"schema-utils": "^3.0.0"
+			},
+			"engines": {
+				"node": ">= 10.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"file-loader": "*",
+				"webpack": "^4.0.0 || ^5.0.0"
+			},
+			"peerDependenciesMeta": {
+				"file-loader": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/use-composed-ref": {
 			"version": "1.3.0",
 			"resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz",
@@ -9590,6 +9650,12 @@
 			"integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
 			"dev": true
 		},
+		"big.js": {
+			"version": "5.2.2",
+			"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+			"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+			"dev": true
+		},
 		"binary-extensions": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -10601,6 +10667,12 @@
 			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
 			"dev": true
 		},
+		"emojis-list": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+			"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+			"dev": true
+		},
 		"encodeurl": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@@ -11760,6 +11832,17 @@
 			"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
 			"integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg=="
 		},
+		"loader-utils": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+			"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+			"dev": true,
+			"requires": {
+				"big.js": "^5.2.2",
+				"emojis-list": "^3.0.0",
+				"json5": "^2.1.2"
+			}
+		},
 		"locate-path": {
 			"version": "6.0.0",
 			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -13590,6 +13673,17 @@
 				"punycode": "^2.1.0"
 			}
 		},
+		"url-loader": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
+			"integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==",
+			"dev": true,
+			"requires": {
+				"loader-utils": "^2.0.0",
+				"mime-types": "^2.1.27",
+				"schema-utils": "^3.0.0"
+			}
+		},
 		"use-composed-ref": {
 			"version": "1.3.0",
 			"resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz",

package.json

@@ -15,6 +15,7 @@
 		"mocha": "^10.2.0",
 		"nyc": "^15.1.0",
 		"ts-loader": "^9.4.2",
+		"url-loader": "^4.1.1",
 		"webpack": "^5.75.0",
 		"webpack-cli": "^4.10.0",
 		"webpack-dev-server": "^4.11.1",

src/frontend/custom.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+    const content:string;
+    export default content;
+}

src/frontend/demo_editor.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import {SimpleGrid, Text, Title, Stack, Center, Switch, Group, Space, Blockquote} from "@mantine/core";
+import {SimpleGrid, Text, Title, Stack, Center, Switch, Group, Space, Blockquote, Image} from "@mantine/core";
 
 import {PrimitiveRegistry} from "../onion/primitive_delta";
 import {mockUuid} from "../onion/test_helpers";
@@ -10,6 +10,7 @@ import {newManualRenderer, ManualRendererProps} from "./manual_renderer";
 import {makeInfoHoverCardIcon} from "./help_icons";
 import {MdOutlineDraw} from "react-icons/md";
 import {Actionblock, Resultblock} from "./blocks";
+import editor from './assets/editor.svg';
 
 export const demo_Editor_description =
     <>
@@ -27,6 +28,8 @@ export const demo_Editor_description =
             Again, any action in the Rountangle Editor results in a set of primitive deltas (shown in the center) that are applied to the (empty) state graph (on the right).
             Note that this state graph is no longer (directly) editable. The current model state is visualized in the Rountangle Editor from which the user interaction originated.
         </Text>
+        <Image src={editor}/>
+        <Space h="10px"/>
         <Actionblock>
             1. Create a rountangle!
         </Actionblock>

src/frontend/demo_pd.tsx

@@ -12,13 +12,14 @@ import {
     Card,
     CloseButton,
     Divider,
-    Space
+    Space, Image
 } from "@mantine/core";
 
 import {PrimitiveRegistry} from "../onion/primitive_delta";
 import {mockUuid} from "../onion/test_helpers";
 import {GrContactInfo} from "react-icons/all";
 import {Actionblock, Resultblock} from "./blocks";
+import pdImage from './assets/pd.svg';
 
 export const demo_PD_description =
     <>
@@ -31,8 +32,10 @@ export const demo_PD_description =
         <Text>
             "State" shows the state graph, which represents the state of our model. If you now e.g. click with the right
             mouse button on a free area in the canvas, then this action is converted into a "Delta". The set of deltas
-            is then in turn applied to the state grap, resulting in the visualization of a new node.
+            is then in turn applied to the state graph, resulting in the visualization of a new node. The following image visualizes this.
         </Text>
+        <Image src={pdImage}/>
+        <Space h="10px"/>
         <Actionblock>
             1. Click with your right mouse button into the "State" canvas!
         </Actionblock>

webpack.config.js

@@ -15,6 +15,10 @@ module.exports = {
         test: /\.css$/i,
         use: ["style-loader", "css-loader"],
       },
+      {
+        test: /\.svg$/,
+        use: 'url-loader'
+      },
     ],
   },
   resolve: {