From f6da5d8ac4c1700e0a4b81605a0178d62c2170a4 Mon Sep 17 00:00:00 2001
From: Stephan Tittel <stephan.tittel@tu-darmstadt.de>
Date: Tue, 9 Apr 2024 13:04:20 +0200
Subject: [PATCH] improved plugin registration

---
 demo/index.html          |  13 +-
 package-lock.json        | 324 +++++++++++++++++++++++----------------
 package.json             |   8 +-
 src/config.ts            |   3 +-
 src/exports.ts           |   2 +-
 src/form.ts              |   8 +-
 src/node.ts              |  18 +--
 src/plugin.ts            |  49 +++---
 src/plugins/leaflet.ts   | 167 +++++++++++---------
 src/property-template.ts |   4 +-
 src/property.ts          |  32 ++--
 src/styles.css           |   1 +
 12 files changed, 351 insertions(+), 278 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index cc0d737..fa13ec0 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -17,6 +17,9 @@
   </script>
   <script type="module">
     import '@ulb-darmstadt/shacl-form/form-default.js'
+    import { registerPlugin } from '@ulb-darmstadt/shacl-form/form-default.js'
+    import { LeafletPlugin } from '@ulb-darmstadt/shacl-form/plugins/leaflet.js'
+    registerPlugin(new LeafletPlugin({ datatype: 'http://www.opengis.net/ont/geosparql#wktLiteral' }))
   </script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/vs.min.css">
   <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
@@ -187,13 +190,9 @@ <h1>&lt;shacl-form&gt; demo</h1>
     <fieldset id="shacl-output" class="mt-1"><legend>Output generated by the form</legend><pre></pre></fieldset>
     <script type="module">
 //      import { MapboxPlugin } from '@ulb-darmstadt/shacl-form/plugins/mapbox.js'
-      import { LeafletPlugin } from '@ulb-darmstadt/shacl-form/plugins/leaflet.js'
       
       setTimeout(async () => {
         const form = document.getElementById("shacl-form")
-//        form.registerPlugin(new MapboxPlugin({ datatype: 'http://www.opengis.net/ont/geosparql#wktLiteral' }, 'pk.eyJ1IjoiaHViZXJtb3NlciIsImEiOiJja3c2NDI2MXAwbWx0MnVudnJiOGV6NjRqIn0.va4IWkUk-USoL2Z8FylNzA'))
-        form.registerPlugin(new LeafletPlugin({ datatype: 'http://www.opengis.net/ont/geosparql#wktLiteral' }))
-
         const shapes = document.getElementById("shacl-shape-input")
         const data = document.getElementById("shacl-data-input")
         const output = document.getElementById("shacl-output")
@@ -235,14 +234,8 @@ <h1>&lt;shacl-form&gt; demo</h1>
       <fieldset><legend>Generated viewer</legend><shacl-form id="shacl-form" data-collapse="open" data-view data-value-subject="http://example.org/4f2a8de3-9fc8-40a9-9237-d5964520ec54"></shacl-form></fieldset>
     </div>
     <script type="module">
-      // import { MapboxPlugin } from '@ulb-darmstadt/shacl-form/plugins/mapbox.js'
-      import { LeafletPlugin } from '@ulb-darmstadt/shacl-form/plugins/leaflet.js'
-      
       setTimeout(async () => {
         const form = document.getElementById("shacl-form")
-        // form.registerPlugin(new MapboxPlugin({ datatype: 'http://www.opengis.net/ont/geosparql#wktLiteral' }, 'pk.eyJ1IjoiaHViZXJtb3NlciIsImEiOiJja3c2NDI2MXAwbWx0MnVudnJiOGV6NjRqIn0.va4IWkUk-USoL2Z8FylNzA'))
-        form.registerPlugin(new LeafletPlugin({ datatype: 'http://www.opengis.net/ont/geosparql#wktLiteral' }))
-
         const shapes = document.getElementById("shacl-shape-input")
         const data = document.getElementById("shacl-data-input")
         form.setClassInstanceProvider((clazz) => { 
diff --git a/package-lock.json b/package-lock.json
index 2842618..27e49ee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@ulb-darmstadt/shacl-form",
-    "version": "1.4.0",
+    "version": "1.4.3",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "@ulb-darmstadt/shacl-form",
-            "version": "1.4.0",
+            "version": "1.4.3",
             "license": "MIT",
             "dependencies": {
                 "@mapbox/mapbox-gl-draw": "^1.4.3",
@@ -14,17 +14,17 @@
                 "bootstrap": "^5.3.3",
                 "jsonld": "^8.3.2",
                 "leaflet": "^1.9.4",
-                "leaflet-draw": "^1.0.4",
+                "leaflet-editable": "^1.2.0",
                 "leaflet.fullscreen": "^3.0.1",
                 "mapbox-gl": "^3.2.0",
-                "n3": "^1.17.2",
+                "n3": "^1.17.3",
                 "rdf-validate-shacl": "^0.5.3",
                 "uuid": "^9.0.1"
             },
             "devDependencies": {
                 "@types/jsonld": "^1.5.13",
-                "@types/leaflet": "^1.9.8",
-                "@types/leaflet-draw": "^1.0.11",
+                "@types/leaflet": "^1.9.9",
+                "@types/leaflet-editable": "^1.2.6",
                 "@types/leaflet.fullscreen": "^3.0.2",
                 "@types/mapbox__mapbox-gl-draw": "^1.4.6",
                 "@types/n3": "^1.16.4",
@@ -542,18 +542,18 @@
             "dev": true
         },
         "node_modules/@types/leaflet": {
-            "version": "1.9.8",
-            "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.8.tgz",
-            "integrity": "sha512-EXdsL4EhoUtGm2GC2ZYtXn+Fzc6pluVgagvo2VC1RHWToLGlTRwVYoDpqS/7QXa01rmDyBjJk3Catpf60VMkwg==",
+            "version": "1.9.9",
+            "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.9.tgz",
+            "integrity": "sha512-o0qD9ReJzWpGNIAY0O32NkpfM6rhV4sxnwVkz7x7Ah4Zy9sP+2T9Q3byccL5la1ZX416k+qiyvt8ksBavPPY7A==",
             "dev": true,
             "dependencies": {
                 "@types/geojson": "*"
             }
         },
-        "node_modules/@types/leaflet-draw": {
-            "version": "1.0.11",
-            "resolved": "https://registry.npmjs.org/@types/leaflet-draw/-/leaflet-draw-1.0.11.tgz",
-            "integrity": "sha512-dyedtNm3aSmnpi6FM6VSl28cQuvP+MD7pgpXyO3Q1ZOCvrJKmzaDq0P3YZTnnBs61fQCKSnNYmbvCkDgFT9FHQ==",
+        "node_modules/@types/leaflet-editable": {
+            "version": "1.2.6",
+            "resolved": "https://registry.npmjs.org/@types/leaflet-editable/-/leaflet-editable-1.2.6.tgz",
+            "integrity": "sha512-8K1QEDiWZvbShO0bcT4UxjkUJRx0Szp7PXewYxi9AjKNMttM9lxKTbioKm8t4ieZQlqmM+DTd8yUliMoAbA/Cw==",
             "dev": true,
             "dependencies": {
                 "@types/leaflet": "*"
@@ -1139,13 +1139,13 @@
             }
         },
         "node_modules/body-parser": {
-            "version": "1.20.1",
-            "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
-            "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
+            "version": "1.20.2",
+            "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
+            "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
             "dev": true,
             "dependencies": {
                 "bytes": "3.1.2",
-                "content-type": "~1.0.4",
+                "content-type": "~1.0.5",
                 "debug": "2.6.9",
                 "depd": "2.0.0",
                 "destroy": "1.2.0",
@@ -1153,7 +1153,7 @@
                 "iconv-lite": "0.4.24",
                 "on-finished": "2.4.1",
                 "qs": "6.11.0",
-                "raw-body": "2.5.1",
+                "raw-body": "2.5.2",
                 "type-is": "~1.6.18",
                 "unpipe": "1.0.0"
             },
@@ -1321,14 +1321,19 @@
             }
         },
         "node_modules/call-bind": {
-            "version": "1.0.5",
-            "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz",
-            "integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==",
+            "version": "1.0.7",
+            "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+            "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
             "dev": true,
             "dependencies": {
+                "es-define-property": "^1.0.0",
+                "es-errors": "^1.3.0",
                 "function-bind": "^1.1.2",
-                "get-intrinsic": "^1.2.1",
-                "set-function-length": "^1.1.1"
+                "get-intrinsic": "^1.2.4",
+                "set-function-length": "^1.2.1"
+            },
+            "engines": {
+                "node": ">= 0.4"
             },
             "funding": {
                 "url": "https://github.com/sponsors/ljharb"
@@ -1547,9 +1552,9 @@
             }
         },
         "node_modules/cookie": {
-            "version": "0.5.0",
-            "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
-            "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+            "version": "0.6.0",
+            "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+            "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
             "dev": true,
             "engines": {
                 "node": ">= 0.6"
@@ -1651,17 +1656,20 @@
             }
         },
         "node_modules/define-data-property": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz",
-            "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+            "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
             "dev": true,
             "dependencies": {
-                "get-intrinsic": "^1.2.1",
-                "gopd": "^1.0.1",
-                "has-property-descriptors": "^1.0.0"
+                "es-define-property": "^1.0.0",
+                "es-errors": "^1.3.0",
+                "gopd": "^1.0.1"
             },
             "engines": {
                 "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
             }
         },
         "node_modules/define-lazy-prop": {
@@ -1785,6 +1793,27 @@
                 "node": ">=4"
             }
         },
+        "node_modules/es-define-property": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+            "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+            "dev": true,
+            "dependencies": {
+                "get-intrinsic": "^1.2.4"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/es-errors": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+            "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+            "dev": true,
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
         "node_modules/es-module-lexer": {
             "version": "1.3.1",
             "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.3.1.tgz",
@@ -1910,17 +1939,17 @@
             "dev": true
         },
         "node_modules/express": {
-            "version": "4.18.2",
-            "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
-            "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
+            "version": "4.19.2",
+            "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
+            "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
             "dev": true,
             "dependencies": {
                 "accepts": "~1.3.8",
                 "array-flatten": "1.1.1",
-                "body-parser": "1.20.1",
+                "body-parser": "1.20.2",
                 "content-disposition": "0.5.4",
                 "content-type": "~1.0.4",
-                "cookie": "0.5.0",
+                "cookie": "0.6.0",
                 "cookie-signature": "1.0.6",
                 "debug": "2.6.9",
                 "depd": "2.0.0",
@@ -2179,16 +2208,20 @@
             "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg=="
         },
         "node_modules/get-intrinsic": {
-            "version": "1.2.2",
-            "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz",
-            "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==",
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+            "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
             "dev": true,
             "dependencies": {
+                "es-errors": "^1.3.0",
                 "function-bind": "^1.1.2",
                 "has-proto": "^1.0.1",
                 "has-symbols": "^1.0.3",
                 "hasown": "^2.0.0"
             },
+            "engines": {
+                "node": ">= 0.4"
+            },
             "funding": {
                 "url": "https://github.com/sponsors/ljharb"
             }
@@ -2288,21 +2321,21 @@
             }
         },
         "node_modules/has-property-descriptors": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
-            "integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==",
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+            "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
             "dev": true,
             "dependencies": {
-                "get-intrinsic": "^1.2.2"
+                "es-define-property": "^1.0.0"
             },
             "funding": {
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
         "node_modules/has-proto": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
-            "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
+            "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
             "dev": true,
             "engines": {
                 "node": ">= 0.4"
@@ -2879,10 +2912,10 @@
             "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
             "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
         },
-        "node_modules/leaflet-draw": {
-            "version": "1.0.4",
-            "resolved": "https://registry.npmjs.org/leaflet-draw/-/leaflet-draw-1.0.4.tgz",
-            "integrity": "sha512-rsQ6saQO5ST5Aj6XRFylr5zvarWgzWnrg46zQ1MEOEIHsppdC/8hnN8qMoFvACsPvTioAuysya/TVtog15tyAQ=="
+        "node_modules/leaflet-editable": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/leaflet-editable/-/leaflet-editable-1.2.0.tgz",
+            "integrity": "sha512-wG11JwpL8zqIbypTop6xCRGagMuWw68ihYu4uqrqc5Ep0wnEJeyob7NB2Rt5t74Oih4rwJ3OfwaGbzdowOGfYQ=="
         },
         "node_modules/leaflet.fullscreen": {
             "version": "3.0.1",
@@ -3179,9 +3212,9 @@
             "integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw=="
         },
         "node_modules/n3": {
-            "version": "1.17.2",
-            "resolved": "https://registry.npmjs.org/n3/-/n3-1.17.2.tgz",
-            "integrity": "sha512-BxSM52wYFqXrbQQT5WUEzKUn6qpYV+2L4XZLfn3Gblz2kwZ09S+QxC33WNdVEQy2djenFL8SNkrjejEKlvI6+Q==",
+            "version": "1.17.3",
+            "resolved": "https://registry.npmjs.org/n3/-/n3-1.17.3.tgz",
+            "integrity": "sha512-ZHc24eZi2GIJcJQVxtL6NT3g+mTHRNeTVfXWELzeUOirqLrh2AAyg0nfYZ/kryJWKFSCgO37DGB6Ok3qmGgEcA==",
             "dependencies": {
                 "queue-microtask": "^1.1.2",
                 "readable-stream": "^4.0.0"
@@ -3628,9 +3661,9 @@
             }
         },
         "node_modules/raw-body": {
-            "version": "2.5.1",
-            "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
-            "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
+            "version": "2.5.2",
+            "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
+            "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
             "dev": true,
             "dependencies": {
                 "bytes": "3.1.2",
@@ -4116,15 +4149,17 @@
             }
         },
         "node_modules/set-function-length": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz",
-            "integrity": "sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==",
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+            "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
             "dev": true,
             "dependencies": {
-                "define-data-property": "^1.1.1",
-                "get-intrinsic": "^1.2.1",
+                "define-data-property": "^1.1.4",
+                "es-errors": "^1.3.0",
+                "function-bind": "^1.1.2",
+                "get-intrinsic": "^1.2.4",
                 "gopd": "^1.0.1",
-                "has-property-descriptors": "^1.0.0"
+                "has-property-descriptors": "^1.0.2"
             },
             "engines": {
                 "node": ">= 0.4"
@@ -4184,14 +4219,18 @@
             }
         },
         "node_modules/side-channel": {
-            "version": "1.0.4",
-            "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
-            "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+            "version": "1.0.6",
+            "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
+            "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
             "dev": true,
             "dependencies": {
-                "call-bind": "^1.0.0",
-                "get-intrinsic": "^1.0.2",
-                "object-inspect": "^1.9.0"
+                "call-bind": "^1.0.7",
+                "es-errors": "^1.3.0",
+                "get-intrinsic": "^1.2.4",
+                "object-inspect": "^1.13.1"
+            },
+            "engines": {
+                "node": ">= 0.4"
             },
             "funding": {
                 "url": "https://github.com/sponsors/ljharb"
@@ -5705,18 +5744,18 @@
             "dev": true
         },
         "@types/leaflet": {
-            "version": "1.9.8",
-            "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.8.tgz",
-            "integrity": "sha512-EXdsL4EhoUtGm2GC2ZYtXn+Fzc6pluVgagvo2VC1RHWToLGlTRwVYoDpqS/7QXa01rmDyBjJk3Catpf60VMkwg==",
+            "version": "1.9.9",
+            "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.9.tgz",
+            "integrity": "sha512-o0qD9ReJzWpGNIAY0O32NkpfM6rhV4sxnwVkz7x7Ah4Zy9sP+2T9Q3byccL5la1ZX416k+qiyvt8ksBavPPY7A==",
             "dev": true,
             "requires": {
                 "@types/geojson": "*"
             }
         },
-        "@types/leaflet-draw": {
-            "version": "1.0.11",
-            "resolved": "https://registry.npmjs.org/@types/leaflet-draw/-/leaflet-draw-1.0.11.tgz",
-            "integrity": "sha512-dyedtNm3aSmnpi6FM6VSl28cQuvP+MD7pgpXyO3Q1ZOCvrJKmzaDq0P3YZTnnBs61fQCKSnNYmbvCkDgFT9FHQ==",
+        "@types/leaflet-editable": {
+            "version": "1.2.6",
+            "resolved": "https://registry.npmjs.org/@types/leaflet-editable/-/leaflet-editable-1.2.6.tgz",
+            "integrity": "sha512-8K1QEDiWZvbShO0bcT4UxjkUJRx0Szp7PXewYxi9AjKNMttM9lxKTbioKm8t4ieZQlqmM+DTd8yUliMoAbA/Cw==",
             "dev": true,
             "requires": {
                 "@types/leaflet": "*"
@@ -6208,13 +6247,13 @@
             "dev": true
         },
         "body-parser": {
-            "version": "1.20.1",
-            "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
-            "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
+            "version": "1.20.2",
+            "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
+            "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
             "dev": true,
             "requires": {
                 "bytes": "3.1.2",
-                "content-type": "~1.0.4",
+                "content-type": "~1.0.5",
                 "debug": "2.6.9",
                 "depd": "2.0.0",
                 "destroy": "1.2.0",
@@ -6222,7 +6261,7 @@
                 "iconv-lite": "0.4.24",
                 "on-finished": "2.4.1",
                 "qs": "6.11.0",
-                "raw-body": "2.5.1",
+                "raw-body": "2.5.2",
                 "type-is": "~1.6.18",
                 "unpipe": "1.0.0"
             },
@@ -6327,14 +6366,16 @@
             "dev": true
         },
         "call-bind": {
-            "version": "1.0.5",
-            "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz",
-            "integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==",
+            "version": "1.0.7",
+            "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+            "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
             "dev": true,
             "requires": {
+                "es-define-property": "^1.0.0",
+                "es-errors": "^1.3.0",
                 "function-bind": "^1.1.2",
-                "get-intrinsic": "^1.2.1",
-                "set-function-length": "^1.1.1"
+                "get-intrinsic": "^1.2.4",
+                "set-function-length": "^1.2.1"
             }
         },
         "caniuse-lite": {
@@ -6500,9 +6541,9 @@
             "dev": true
         },
         "cookie": {
-            "version": "0.5.0",
-            "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
-            "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+            "version": "0.6.0",
+            "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+            "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
             "dev": true
         },
         "cookie-signature": {
@@ -6572,14 +6613,14 @@
             }
         },
         "define-data-property": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz",
-            "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+            "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
             "dev": true,
             "requires": {
-                "get-intrinsic": "^1.2.1",
-                "gopd": "^1.0.1",
-                "has-property-descriptors": "^1.0.0"
+                "es-define-property": "^1.0.0",
+                "es-errors": "^1.3.0",
+                "gopd": "^1.0.1"
             }
         },
         "define-lazy-prop": {
@@ -6672,6 +6713,21 @@
             "integrity": "sha512-ZtUjZO6l5mwTHvc1L9+1q5p/R3wTopcfqMW8r5t8SJSKqeVI/LtajORwRFEKpEFuekjD0VBjwu1HMxL4UalIRw==",
             "dev": true
         },
+        "es-define-property": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+            "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+            "dev": true,
+            "requires": {
+                "get-intrinsic": "^1.2.4"
+            }
+        },
+        "es-errors": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+            "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+            "dev": true
+        },
         "es-module-lexer": {
             "version": "1.3.1",
             "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.3.1.tgz",
@@ -6771,17 +6827,17 @@
             }
         },
         "express": {
-            "version": "4.18.2",
-            "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
-            "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
+            "version": "4.19.2",
+            "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
+            "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
             "dev": true,
             "requires": {
                 "accepts": "~1.3.8",
                 "array-flatten": "1.1.1",
-                "body-parser": "1.20.1",
+                "body-parser": "1.20.2",
                 "content-disposition": "0.5.4",
                 "content-type": "~1.0.4",
-                "cookie": "0.5.0",
+                "cookie": "0.6.0",
                 "cookie-signature": "1.0.6",
                 "debug": "2.6.9",
                 "depd": "2.0.0",
@@ -6978,11 +7034,12 @@
             "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg=="
         },
         "get-intrinsic": {
-            "version": "1.2.2",
-            "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz",
-            "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==",
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+            "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
             "dev": true,
             "requires": {
+                "es-errors": "^1.3.0",
                 "function-bind": "^1.1.2",
                 "has-proto": "^1.0.1",
                 "has-symbols": "^1.0.3",
@@ -7060,18 +7117,18 @@
             "dev": true
         },
         "has-property-descriptors": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
-            "integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==",
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+            "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
             "dev": true,
             "requires": {
-                "get-intrinsic": "^1.2.2"
+                "es-define-property": "^1.0.0"
             }
         },
         "has-proto": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
-            "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
+            "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
             "dev": true
         },
         "has-symbols": {
@@ -7456,10 +7513,10 @@
             "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
             "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
         },
-        "leaflet-draw": {
-            "version": "1.0.4",
-            "resolved": "https://registry.npmjs.org/leaflet-draw/-/leaflet-draw-1.0.4.tgz",
-            "integrity": "sha512-rsQ6saQO5ST5Aj6XRFylr5zvarWgzWnrg46zQ1MEOEIHsppdC/8hnN8qMoFvACsPvTioAuysya/TVtog15tyAQ=="
+        "leaflet-editable": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/leaflet-editable/-/leaflet-editable-1.2.0.tgz",
+            "integrity": "sha512-wG11JwpL8zqIbypTop6xCRGagMuWw68ihYu4uqrqc5Ep0wnEJeyob7NB2Rt5t74Oih4rwJ3OfwaGbzdowOGfYQ=="
         },
         "leaflet.fullscreen": {
             "version": "3.0.1",
@@ -7700,9 +7757,9 @@
             "integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw=="
         },
         "n3": {
-            "version": "1.17.2",
-            "resolved": "https://registry.npmjs.org/n3/-/n3-1.17.2.tgz",
-            "integrity": "sha512-BxSM52wYFqXrbQQT5WUEzKUn6qpYV+2L4XZLfn3Gblz2kwZ09S+QxC33WNdVEQy2djenFL8SNkrjejEKlvI6+Q==",
+            "version": "1.17.3",
+            "resolved": "https://registry.npmjs.org/n3/-/n3-1.17.3.tgz",
+            "integrity": "sha512-ZHc24eZi2GIJcJQVxtL6NT3g+mTHRNeTVfXWELzeUOirqLrh2AAyg0nfYZ/kryJWKFSCgO37DGB6Ok3qmGgEcA==",
             "requires": {
                 "queue-microtask": "^1.1.2",
                 "readable-stream": "^4.0.0"
@@ -8014,9 +8071,9 @@
             "dev": true
         },
         "raw-body": {
-            "version": "2.5.1",
-            "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
-            "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
+            "version": "2.5.2",
+            "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
+            "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
             "dev": true,
             "requires": {
                 "bytes": "3.1.2",
@@ -8400,15 +8457,17 @@
             }
         },
         "set-function-length": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz",
-            "integrity": "sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==",
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+            "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
             "dev": true,
             "requires": {
-                "define-data-property": "^1.1.1",
-                "get-intrinsic": "^1.2.1",
+                "define-data-property": "^1.1.4",
+                "es-errors": "^1.3.0",
+                "function-bind": "^1.1.2",
+                "get-intrinsic": "^1.2.4",
                 "gopd": "^1.0.1",
-                "has-property-descriptors": "^1.0.0"
+                "has-property-descriptors": "^1.0.2"
             }
         },
         "setimmediate": {
@@ -8453,14 +8512,15 @@
             "dev": true
         },
         "side-channel": {
-            "version": "1.0.4",
-            "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
-            "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+            "version": "1.0.6",
+            "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
+            "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
             "dev": true,
             "requires": {
-                "call-bind": "^1.0.0",
-                "get-intrinsic": "^1.0.2",
-                "object-inspect": "^1.9.0"
+                "call-bind": "^1.0.7",
+                "es-errors": "^1.3.0",
+                "get-intrinsic": "^1.2.4",
+                "object-inspect": "^1.13.1"
             }
         },
         "signal-exit": {
diff --git a/package.json b/package.json
index 8fccfd9..50bb7bb 100644
--- a/package.json
+++ b/package.json
@@ -32,8 +32,8 @@
     },
     "devDependencies": {
         "@types/jsonld": "^1.5.13",
-        "@types/leaflet": "^1.9.8",
-        "@types/leaflet-draw": "^1.0.11",
+        "@types/leaflet": "^1.9.9",
+        "@types/leaflet-editable": "^1.2.6",
         "@types/leaflet.fullscreen": "^3.0.2",
         "@types/mapbox__mapbox-gl-draw": "^1.4.6",
         "@types/n3": "^1.16.4",
@@ -53,10 +53,10 @@
         "bootstrap": "^5.3.3",
         "jsonld": "^8.3.2",
         "leaflet": "^1.9.4",
-        "leaflet-draw": "^1.0.4",
+        "leaflet-editable": "^1.2.0",
         "leaflet.fullscreen": "^3.0.1",
         "mapbox-gl": "^3.2.0",
-        "n3": "^1.17.2",
+        "n3": "^1.17.3",
         "rdf-validate-shacl": "^0.5.3",
         "uuid": "^9.0.1"
     }
diff --git a/src/config.ts b/src/config.ts
index dbce6d2..2c28403 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,7 +1,7 @@
 import { Prefixes, Store } from 'n3'
 import { Term } from '@rdfjs/types'
 import { PREFIX_SHACL, RDF_PREDICATE_TYPE, SHAPES_GRAPH } from './constants'
-import { ClassInstanceProvider, Plugins } from './plugin'
+import { ClassInstanceProvider } from './plugin'
 import { Loader } from './loader'
 import { Theme } from './theme'
 
@@ -26,7 +26,6 @@ export class Config {
     loader = new Loader(this)
     classInstanceProvider: ClassInstanceProvider | undefined
     prefixes: Prefixes = {}
-    plugins = new Plugins()
     editMode = true
 
     dataGraph = new Store()
diff --git a/src/exports.ts b/src/exports.ts
index 1222040..4bbbeae 100644
--- a/src/exports.ts
+++ b/src/exports.ts
@@ -1,6 +1,6 @@
 export { Theme, InputListEntry, Editor } from './theme'
 export { Loader } from './loader'
 export { Config } from './config'
-export { Plugin } from './plugin'
+export { Plugin, registerPlugin } from './plugin'
 export { ShaclPropertyTemplate } from './property-template'
 export { findLabel } from './util'
diff --git a/src/form.ts b/src/form.ts
index 4847482..809d960 100644
--- a/src/form.ts
+++ b/src/form.ts
@@ -1,6 +1,6 @@
 import { ShaclNode } from './node'
 import { Config } from './config'
-import { ClassInstanceProvider, Plugin, PluginOptions } from './plugin'
+import { ClassInstanceProvider, Plugin, listPlugins, registerPlugin } from './plugin'
 import { Quad, Store, NamedNode, DataFactory } from 'n3'
 import { RDF_PREDICATE_TYPE, SHACL_OBJECT_NODE_SHAPE, SHACL_PREDICATE_TARGET_CLASS, SHAPES_GRAPH } from './constants'
 import { Editor, Theme } from './theme'
@@ -60,7 +60,7 @@ export class ShaclForm extends HTMLElement {
                     this.config.theme.apply(this.form)
                     // adopt stylesheets from theme and plugins
                     const styles: CSSStyleSheet[] = [ this.config.theme.stylesheet ]
-                    for (const plugin of this.config.plugins.list()) {
+                    for (const plugin of listPlugins()) {
                         if (plugin.stylesheet) {
                             styles.push(plugin.stylesheet)
                         }
@@ -117,8 +117,8 @@ export class ShaclForm extends HTMLElement {
         return graph
     }
 
-    public registerPlugin(plugin: Plugin, options?: PluginOptions) {
-        this.config.plugins.register(plugin)
+    public registerPlugin(plugin: Plugin) {
+        registerPlugin(plugin)
         this.initialize()
     }
 
diff --git a/src/node.ts b/src/node.ts
index ec6c7d8..c36431a 100644
--- a/src/node.ts
+++ b/src/node.ts
@@ -27,21 +27,17 @@ export class ShaclNode extends HTMLElement {
                     nodeKind = spec[0] as NamedNode
                 }
             }
-            if (nodeKind === undefined && config.attributes.valuesNamespace) {
+            // if nodeKind is not set, but a value namespace is configured or if nodeKind is sh:IRI, then create a NamedNode
+            if ((nodeKind === undefined && config.attributes.valuesNamespace) || nodeKind?.id === `${PREFIX_SHACL}IRI`) {
                 // no requirements on node type, so create a NamedNode and use configured value namespace
                 nodeId = DataFactory.namedNode(config.attributes.valuesNamespace + uuidv4())
-            }
-            else if (nodeKind?.id === `${PREFIX_SHACL}IRI`) {
-                nodeId = DataFactory.namedNode(config.attributes.valuesNamespace + uuidv4())
-            }
-            else {
-                // default to BlankNode
+            } else {
+                // otherwise create a BlankNode
                 nodeId = DataFactory.blankNode(uuidv4())
             }
         }
         this.nodeId = nodeId
         this.dataset.nodeId = this.nodeId.id
-
         
         const quads = config.shapesGraph.getQuads(shaclSubject, null, null, SHAPES_GRAPH)
         let list: Term[] | undefined
@@ -66,7 +62,11 @@ export class ShaclNode extends HTMLElement {
                             console.warn('ignoring unknown group reference', groupRef[0])
                         }
                     }
-                    parent.appendChild(new ShaclProperty(quad.object as NamedNode | BlankNode, config, this.nodeId, valueSubject))
+                    const property = new ShaclProperty(quad.object as NamedNode | BlankNode, config, this.nodeId, valueSubject)
+                    // do not add empty properties (i.e. properties with no instances). This can be the case e.g. in viewer mode when there is no data for the respective property.
+                    if (property.childElementCount > 0) {
+                        parent.appendChild(property)
+                    }
                     break;
                 case `${PREFIX_SHACL}and`:
                     // inheritance via sh:and
diff --git a/src/plugin.ts b/src/plugin.ts
index 441b759..f235eb4 100644
--- a/src/plugin.ts
+++ b/src/plugin.ts
@@ -1,35 +1,34 @@
 import { ShaclPropertyTemplate } from './property-template'
 import { Term } from '@rdfjs/types'
 
-export class Plugins {
-    private plugins: Record<string, Plugin> = {}
-    
-    register(plugin: Plugin) {
-        if (plugin.predicate === undefined && plugin.datatype === undefined) {
-            console.warn('not registering plugin because it does neither define "predicate" nor "datatype"', plugin)
-        } else {
-            this.plugins[`${plugin.predicate}^${plugin.datatype}`] = plugin
-        }
+// store plugins in module scope so that they apply to all shacl-form elements
+const plugins: Record<string, Plugin> = {}
+
+export function registerPlugin(plugin: Plugin) {
+    if (plugin.predicate === undefined && plugin.datatype === undefined) {
+        console.warn('not registering plugin because it does neither define "predicate" nor "datatype"', plugin)
+    } else {
+        plugins[`${plugin.predicate}^${plugin.datatype}`] = plugin
     }
+}
 
-    list(): Plugin[] {
-        return Object.entries(this.plugins).map((value: [_: string, plugin: Plugin]) => { return value[1] })
-    }
+export function listPlugins(): Plugin[] {
+    return Object.entries(plugins).map((value: [_: string, plugin: Plugin]) => { return value[1] })
+}
 
-    find(predicate: string | undefined, datatype: string | undefined): Plugin | undefined {
-        // first try to find plugin with matching predicate and datatype
-        let plugin = this.plugins[`${predicate}^${datatype}`]
-        if (plugin) {
-            return plugin
-        }
-        // now prefer predicate over datatype
-        plugin = this.plugins[`${predicate}^${undefined}`]
-        if (plugin) {
-            return plugin
-        }
-        // last, try to find plugin with matching datatype
-        return this.plugins[`${undefined}^${datatype}`]
+export function findPlugin(predicate: string | undefined, datatype: string | undefined): Plugin | undefined {
+    // first try to find plugin with matching predicate and datatype
+    let plugin = plugins[`${predicate}^${datatype}`]
+    if (plugin) {
+        return plugin
+    }
+    // now prefer predicate over datatype
+    plugin = plugins[`${predicate}^${undefined}`]
+    if (plugin) {
+        return plugin
     }
+    // last, try to find plugin with matching datatype
+    return plugins[`${undefined}^${datatype}`]
 }
 
 export type PluginOptions = {
diff --git a/src/plugins/leaflet.ts b/src/plugins/leaflet.ts
index 52ec28f..a3087ac 100644
--- a/src/plugins/leaflet.ts
+++ b/src/plugins/leaflet.ts
@@ -1,9 +1,8 @@
 import * as L from 'leaflet'
+import 'leaflet-editable/src/Leaflet.Editable.js'
 import leafletCss from 'leaflet/dist/leaflet.css'
 import leafletFullscreenCss from 'leaflet.fullscreen/Control.FullScreen.css'
-import leafletDrawCss from 'leaflet-draw/dist/leaflet.draw.css'
 import 'leaflet.fullscreen/Control.FullScreen.js'
-import 'leaflet-draw/dist/leaflet.draw.js'
 import { Term } from '@rdfjs/types'
 
 import { Plugin, PluginOptions } from '../plugin'
@@ -18,64 +17,99 @@ const css = `
 #shaclMapDialog .closeButton:hover { background-color: #FFF }
 #shaclMapDialog .hint { position: absolute; right: 60px; top: 3px; z-index: 1; padding: 4px 6px; background-color: #FFFA; border-radius: 4px; z-index: 1000; pointer-events: none; }
 .leaflet-container { min-height: 300px; }
-.leaflet-draw-toolbar a { background-image: linear-gradient(transparent, transparent), url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiCiAgIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIKICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiCiAgIHZpZXdCb3g9IjAgMCA2MDAgNjAiCiAgIGhlaWdodD0iNjAiCiAgIHdpZHRoPSI2MDAiCiAgIGlkPSJzdmc0MjI1IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlua3NjYXBlOnZlcnNpb249IjAuOTEgcjEzNzI1IgogICBzb2RpcG9kaTpkb2NuYW1lPSJzcHJpdGVzaGVldC5zdmciCiAgIGlua3NjYXBlOmV4cG9ydC1maWxlbmFtZT0iL2hvbWUvZnB1Z2EvZGV2ZWxvcG1lbnQvdXBzdHJlYW0vaWNhcnRvLkxlYWZsZXQuZHJhdy9zcmMvaW1hZ2VzL3Nwcml0ZXNoZWV0LTJ4LnBuZyIKICAgaW5rc2NhcGU6ZXhwb3J0LXhkcGk9IjkwIgogICBpbmtzY2FwZTpleHBvcnQteWRwaT0iOTAiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTQyNTgiPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgICAgPGRjOnRpdGxlIC8+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxkZWZzCiAgICAgaWQ9ImRlZnM0MjU2IiAvPgogIDxzb2RpcG9kaTpuYW1lZHZpZXcKICAgICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiCiAgICAgYm9yZGVyb3BhY2l0eT0iMSIKICAgICBvYmplY3R0b2xlcmFuY2U9IjEwIgogICAgIGdyaWR0b2xlcmFuY2U9IjEwIgogICAgIGd1aWRldG9sZXJhbmNlPSIxMCIKICAgICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMCIKICAgICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTkyMCIKICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSIxMDU2IgogICAgIGlkPSJuYW1lZHZpZXc0MjU0IgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBpbmtzY2FwZTp6b29tPSIxLjMxMDE4NTIiCiAgICAgaW5rc2NhcGU6Y3g9IjIzNy41NjkyOCIKICAgICBpbmtzY2FwZTpjeT0iNy4yNDE5NjIxIgogICAgIGlua3NjYXBlOndpbmRvdy14PSIxOTIwIgogICAgIGlua3NjYXBlOndpbmRvdy15PSIyNCIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9InN2ZzQyMjUiIC8+CiAgPGcKICAgICBpZD0iZW5hYmxlZCIKICAgICBzdHlsZT0iZmlsbDojNDY0NjQ2O2ZpbGwtb3BhY2l0eToxIj4KICAgIDxnCiAgICAgICBpZD0icG9seWxpbmUiCiAgICAgICBzdHlsZT0iZmlsbDojNDY0NjQ2O2ZpbGwtb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgZD0ibSAxOCwzNiAwLDYgNiwwIDAsLTYgLTYsMCB6IG0gNCw0IC0yLDAgMCwtMiAyLDAgMCwyIHoiCiAgICAgICAgIGlkPSJwYXRoNDIyOSIKICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzQ2NDY0NjtmaWxsLW9wYWNpdHk6MSIgLz4KICAgICAgPHBhdGgKICAgICAgICAgZD0ibSAzNiwxOCAwLDYgNiwwIDAsLTYgLTYsMCB6IG0gNCw0IC0yLDAgMCwtMiAyLDAgMCwyIHoiCiAgICAgICAgIGlkPSJwYXRoNDIzMSIKICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzQ2NDY0NjtmaWxsLW9wYWNpdHk6MSIgLz4KICAgICAgPHBhdGgKICAgICAgICAgZD0ibSAyMy4xNDIsMzkuMTQ1IC0yLjI4NSwtMi4yOSAxNiwtMTUuOTk4IDIuMjg1LDIuMjg1IHoiCiAgICAgICAgIGlkPSJwYXRoNDIzMyIKICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzQ2NDY0NjtmaWxsLW9wYWNpdHk6MSIgLz4KICAgIDwvZz4KICAgIDxwYXRoCiAgICAgICBpZD0icG9seWdvbiIKICAgICAgIGQ9Ik0gMTAwLDI0LjU2NSA5Ny45MDQsMzkuMzk1IDgzLjA3LDQyIDc2LDI4Ljc3MyA4Ni40NjMsMTggWiIKICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiCiAgICAgICBzdHlsZT0iZmlsbDojNDY0NjQ2O2ZpbGwtb3BhY2l0eToxIiAvPgogICAgPHBhdGgKICAgICAgIGlkPSJyZWN0YW5nbGUiCiAgICAgICBkPSJtIDE0MCwyMCAyMCwwIDAsMjAgLTIwLDAgeiIKICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiCiAgICAgICBzdHlsZT0iZmlsbDojNDY0NjQ2O2ZpbGwtb3BhY2l0eToxIiAvPgogICAgPHBhdGgKICAgICAgIGlkPSJjaXJjbGUiCiAgICAgICBkPSJtIDIyMSwzMCBjIDAsNi4wNzggLTQuOTI2LDExIC0xMSwxMSAtNi4wNzQsMCAtMTEsLTQuOTIyIC0xMSwtMTEgMCwtNi4wNzQgNC45MjYsLTExIDExLC0xMSA2LjA3NCwwIDExLDQuOTI2IDExLDExIHoiCiAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIgogICAgICAgc3R5bGU9ImZpbGw6IzQ2NDY0NjtmaWxsLW9wYWNpdHk6MSIgLz4KICAgIDxwYXRoCiAgICAgICBpZD0ibWFya2VyIgogICAgICAgZD0ibSAyNzAsMTkgYyAtNC45NzEsMCAtOSw0LjAyOSAtOSw5IDAsNC45NzEgNS4wMDEsMTIgOSwxNCA0LjAwMSwtMiA5LC05LjAyOSA5LC0xNCAwLC00Ljk3MSAtNC4wMjksLTkgLTksLTkgeiBtIDAsMTIuNSBjIC0yLjQ4NCwwIC00LjUsLTIuMDE0IC00LjUsLTQuNSAwLC0yLjQ4NCAyLjAxNiwtNC41IDQuNSwtNC41IDIuNDg1LDAgNC41LDIuMDE2IDQuNSw0LjUgMCwyLjQ4NiAtMi4wMTUsNC41IC00LjUsNC41IHoiCiAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIgogICAgICAgc3R5bGU9ImZpbGw6IzQ2NDY0NjtmaWxsLW9wYWNpdHk6MSIgLz4KICAgIDxnCiAgICAgICBpZD0iZWRpdCIKICAgICAgIHN0eWxlPSJmaWxsOiM0NjQ2NDY7ZmlsbC1vcGFjaXR5OjEiPgogICAgICA8cGF0aAogICAgICAgICBkPSJtIDMzNywzMC4xNTYgMCwwLjQwNyAwLDUuNjA0IGMgMCwxLjY1OCAtMS4zNDQsMyAtMywzIGwgLTEwLDAgYyAtMS42NTUsMCAtMywtMS4zNDIgLTMsLTMgbCAwLC0xMCBjIDAsLTEuNjU3IDEuMzQ1LC0zIDMsLTMgbCA2LjM0NSwwIDMuMTksLTMuMTcgLTkuNTM1LDAgYyAtMy4zMTMsMCAtNiwyLjY4NyAtNiw2IGwgMCwxMCBjIDAsMy4zMTMgMi42ODcsNiA2LDYgbCAxMCwwIGMgMy4zMTQsMCA2LC0yLjY4NyA2LC02IGwgMCwtOC44MDkgLTMsMi45NjgiCiAgICAgICAgIGlkPSJwYXRoNDI0MCIKICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzQ2NDY0NjtmaWxsLW9wYWNpdHk6MSIgLz4KICAgICAgPHBhdGgKICAgICAgICAgZD0ibSAzMzguNzIsMjQuNjM3IC04Ljg5Miw4Ljg5MiAtMi44MjgsMCAwLC0yLjgyOSA4Ljg5LC04Ljg5IHoiCiAgICAgICAgIGlkPSJwYXRoNDI0MiIKICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzQ2NDY0NjtmaWxsLW9wYWNpdHk6MSIgLz4KICAgICAgPHBhdGgKICAgICAgICAgZD0ibSAzMzguNjk3LDE3LjgyNiA0LDAgMCw0IC00LDAgeiIKICAgICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoLTAuNzA2OTgzMzYsLTAuNzA3MjMwMTgsMC43MDcyMzAxOCwtMC43MDY5ODMzNiw1NjcuNTU5MTcsMjc0Ljc4MjczKSIKICAgICAgICAgaWQ9InBhdGg0MjQ0IgogICAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIgogICAgICAgICBzdHlsZT0iZmlsbDojNDY0NjQ2O2ZpbGwtb3BhY2l0eToxIiAvPgogICAgPC9nPgogICAgPGcKICAgICAgIGlkPSJyZW1vdmUiCiAgICAgICBzdHlsZT0iZmlsbDojNDY0NjQ2O2ZpbGwtb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgZD0ibSAzODEsNDIgMTgsMCAwLC0xOCAtMTgsMCAwLDE4IHogbSAxNCwtMTYgMiwwIDAsMTQgLTIsMCAwLC0xNCB6IG0gLTQsMCAyLDAgMCwxNCAtMiwwIDAsLTE0IHogbSAtNCwwIDIsMCAwLDE0IC0yLDAgMCwtMTQgeiBtIC00LDAgMiwwIDAsMTQgLTIsMCAwLC0xNCB6IgogICAgICAgICBpZD0icGF0aDQyNDciCiAgICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiCiAgICAgICAgIHN0eWxlPSJmaWxsOiM0NjQ2NDY7ZmlsbC1vcGFjaXR5OjEiIC8+CiAgICAgIDxwYXRoCiAgICAgICAgIGQ9Im0gMzk1LDIwIDAsLTQgLTEwLDAgMCw0IC02LDAgMCwyIDIyLDAgMCwtMiAtNiwwIHogbSAtMiwwIC02LDAgMCwtMiA2LDAgMCwyIHoiCiAgICAgICAgIGlkPSJwYXRoNDI0OSIKICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzQ2NDY0NjtmaWxsLW9wYWNpdHk6MSIgLz4KICAgIDwvZz4KICA8L2c+CiAgPGcKICAgICBpZD0iZGlzYWJsZWQiCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIwLDApIgogICAgIHN0eWxlPSJmaWxsOiNiYmJiYmIiPgogICAgPHVzZQogICAgICAgeGxpbms6aHJlZj0iI2VkaXQiCiAgICAgICBpZD0iZWRpdC1kaXNhYmxlZCIKICAgICAgIHg9IjAiCiAgICAgICB5PSIwIgogICAgICAgd2lkdGg9IjEwMCUiCiAgICAgICBoZWlnaHQ9IjEwMCUiIC8+CiAgICA8dXNlCiAgICAgICB4bGluazpocmVmPSIjcmVtb3ZlIgogICAgICAgaWQ9InJlbW92ZS1kaXNhYmxlZCIKICAgICAgIHg9IjAiCiAgICAgICB5PSIwIgogICAgICAgd2lkdGg9IjEwMCUiCiAgICAgICBoZWlnaHQ9IjEwMCUiIC8+CiAgPC9nPgogIDxwYXRoCiAgICAgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzQ2NDY0NjtzdHJva2Utd2lkdGg6MjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIgogICAgIGlkPSJjaXJjbGUtMyIKICAgICBkPSJtIDU4MS42NTcyNSwzMCBjIDAsNi4wNzggLTQuOTI2LDExIC0xMSwxMSAtNi4wNzQsMCAtMTEsLTQuOTIyIC0xMSwtMTEgMCwtNi4wNzQgNC45MjYsLTExIDExLC0xMSA2LjA3NCwwIDExLDQuOTI2IDExLDExIHoiCiAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz4KPC9zdmc+Cg==); }
 .fullscreen-icon { background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjYgNTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIwLjYgMzYuN0gxNmEuOS45IDAgMCAxLS44LS44di00LjVjMC0uMi4yLS40LjQtLjRoMS40Yy4zIDAgLjUuMi41LjR2M2gzYy4yIDAgLjQuMi40LjV2MS40YzAgLjItLjIuNC0uNC40em0tOS45LS44di00LjVjMC0uMi0uMi0uNC0uNC0uNEg4LjljLS4zIDAtLjUuMi0uNS40djNoLTNjLS4yIDAtLjQuMi0uNC41djEuNGMwIC4yLjIuNC40LjRIMTBjLjQgMCAuOC0uNC44LS44em0wIDEwLjdWNDJjMC0uNC0uNC0uOC0uOC0uOEg1LjRjLS4yIDAtLjQuMi0uNC40djEuNGMwIC4zLjIuNS40LjVoM3YzYzAgLjIuMi40LjUuNGgxLjRjLjIgMCAuNC0uMi40LS40em02LjkgMHYtM2gzYy4yIDAgLjQtLjIuNC0uNXYtMS40YzAtLjItLjItLjQtLjQtLjRIMTZjLS40IDAtLjguNC0uOC44djQuNWMwIC4yLjIuNC40LjRoMS40Yy4zIDAgLjUtLjIuNS0uNHpNNSAxMC4zVjUuOWMwLS41LjQtLjkuOS0uOWg0LjRjLjIgMCAuNC4yLjQuNFY3YzAgLjItLjIuNC0uNC40aC0zdjNjMCAuMi0uMi40LS40LjRINS40YS40LjQgMCAwIDEtLjQtLjR6bTEwLjMtNC45VjdjMCAuMi4yLjQuNC40aDN2M2MwIC4yLjIuNC40LjRoMS41Yy4yIDAgLjQtLjIuNC0uNFY1LjljMC0uNS0uNC0uOS0uOS0uOWgtNC40Yy0uMiAwLS40LjItLjQuNHptNS4zIDkuOUgxOWMtLjIgMC0uNC4yLS40LjR2M2gtM2MtLjIgMC0uNC4yLS40LjR2MS41YzAgLjIuMi40LjQuNGg0LjRjLjUgMCAuOS0uNC45LS45di00LjRjMC0uMi0uMi0uNC0uNC0uNHptLTkuOSA1LjNWMTljMC0uMi0uMi0uNC0uNC0uNGgtM3YtM2MwLS4yLS4yLS40LS40LS40SDUuNGMtLjIgMC0uNC4yLS40LjR2NC40YzAgLjUuNC45LjkuOWg0LjRjLjIgMCAuNC0uMi40LS40eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+); }
-.leaflet-marker-icon { margin: -1px; font-size: 0; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=); }
-.leaflet-marker-shadow { display: none; }
 #shaclMapDialogContainer { width:100%; height: 100%; }
 `
 const dialogTemplate = `
 <dialog id="shaclMapDialog" onclick="event.target==this && this.close()">
 <div id="shaclMapDialogContainer"></div>
-<div class="hint">&#x24D8; Draw a polygon or point, then close dialog</div>
+<div class="hint">&#x24D8; Draw a polygon or marker, then close dialog</div>
 <button class="closeButton" type="button" onclick="this.parentElement.close()">&#x2715;</button>
 </dialog>`
 
+const defaultCenter = { lng: 8.657238961696038, lat: 49.87627570549512 }
+const attribution = '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+const tileSource = 'https://tile.openstreetmap.de/{z}/{x}/{y}.png'
+// const tileSource = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
+
+const markerIcon = L.icon({
+    iconUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=',
+    shadowUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAApCAQAAAACach9AAACMUlEQVR4Ae3ShY7jQBAE0Aoz/f9/HTMzhg1zrdKUrJbdx+Kd2nD8VNudfsL/Th///dyQN2TH6f3y/BGpC379rV+S+qqetBOxImNQXL8JCAr2V4iMQXHGNJxeCfZXhSRBcQMfvkOWUdtfzlLgAENmZDcmo2TVmt8OSM2eXxBp3DjHSMFutqS7SbmemzBiR+xpKCNUIRkdkkYxhAkyGoBvyQFEJEefwSmmvBfJuJ6aKqKWnAkvGZOaZXTUgFqYULWNSHUckZuR1HIIimUExutRxwzOLROIG4vKmCKQt364mIlhSyzAf1m9lHZHJZrlAOMMztRRiKimp/rpdJDc9Awry5xTZCte7FHtuS8wJgeYGrex28xNTd086Dik7vUMscQOa8y4DoGtCCSkAKlNwpgNtphjrC6MIHUkR6YWxxs6Sc5xqn222mmCRFzIt8lEdKx+ikCtg91qS2WpwVfBelJCiQJwvzixfI9cxZQWgiSJelKnwBElKYtDOb2MFbhmUigbReQBV0Cg4+qMXSxXSyGUn4UbF8l+7qdSGnTC0XLCmahIgUHLhLOhpVCtw4CzYXvLQWQbJNmxoCsOKAxSgBJno75avolkRw8iIAFcsdc02e9iyCd8tHwmeSSoKTowIgvscSGZUOA7PuCN5b2BX9mQM7S0wYhMNU74zgsPBj3HU7wguAfnxxjFQGBE6pwN+GjME9zHY7zGp8wVxMShYX9NXvEWD3HbwJf4giO4CFIQxXScH1/TM+04kkBiAAAAAElFTkSuQmCC',
+
+    iconSize:     [25, 41], // size of the icon
+    shadowSize:   [41, 41], // size of the shadow
+    iconAnchor:   [12, 41], // point of the icon which will correspond to marker's location
+    shadowAnchor: [14, 41],  // the same for the shadow
+    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
+})
+
 export class LeafletPlugin extends Plugin {
     map: L.Map | undefined
-    drawLayer: L.FeatureGroup | undefined
     currentEditor: Editor | undefined
+    createdGeometry: Geometry | undefined
+    displayedShape: L.Polygon | L.Marker | undefined
 
     constructor(options: PluginOptions) {
-        super(options, leafletCss + '\n' + leafletFullscreenCss + '\n' + leafletDrawCss + '\n' + css)
+        super(options, leafletCss + '\n' + leafletFullscreenCss + '\n' + css)
     }
 
     initEditMode(form: HTMLElement): HTMLDialogElement {
         form.insertAdjacentHTML('beforeend', dialogTemplate)
         const container = form.querySelector('#shaclMapDialogContainer') as HTMLElement
         this.map = L.map(container, {
-            attributionControl: false,
             fullscreenControl: true,
-            layers: [
-                L.tileLayer('https://tile.openstreetmap.de/{z}/{x}/{y}.png'),
-                // L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'),
-            ],
+            editable: true,
+            layers: [ L.tileLayer(tileSource) ],
             zoom: 5,
             maxBounds: worldBounds,
-            center: { lng: 8.657238961696038, lat: 49.87627570549512 }
+            center: defaultCenter
         })
+        this.map.attributionControl.addAttribution(attribution)
 
-        this.drawLayer = L.featureGroup().addTo(this.map)
-        this.map.addControl(new L.Control.Draw({
-            edit: {
-                featureGroup: this.drawLayer,
-                edit: false,
-                remove: false
-            },
-            draw: {
-                polygon: { allowIntersection: false },
-                rectangle: false,
-                polyline: false,
-                circlemarker: false,
-                circle: false
+        const EditControl = L.Control.extend({ options: { position: 'topleft', callback: null, kind: '', html: '' },
+            onAdd: function (map: L.Map) {
+                let container = L.DomUtil.create('div', 'leaflet-control leaflet-bar')
+                let link = L.DomUtil.create('a', '', container)
+                link.href = '#';
+                link.title = 'Create a new ' + this.options.kind;
+                link.innerHTML = this.options.html;
+                L.DomEvent.on(link, 'click', L.DomEvent.stop).on(link, 'click', () => {
+                    // @ts-ignore
+                    window.LAYER = this.options.callback.call(map.editTools)
+                }, this)
+                return container
             }
-        }))
-    
-        this.map.on(L.Draw.Event.DRAWSTART, () => {
-            this.drawLayer?.clearLayers()
         })
-        this.map.on(L.Draw.Event.CREATED, (event) => {
-            this.drawLayer?.addLayer(event.layer)
+        this.map.addControl(new (EditControl.extend({
+            options: {
+                callback: () => {
+                    this.displayedShape?.remove()
+                    this.displayedShape = this.map?.editTools.startPolygon()
+                },
+                kind: 'polygon',
+                html: '▰'
+            }
+        }))())
+        this.map.addControl(new (EditControl.extend({
+            options: {
+                callback: () => {
+                    this.displayedShape?.remove()
+                    this.displayedShape = this.map?.editTools.startMarker(undefined, { icon: markerIcon })
+                },
+                kind: 'marker',
+                html: '•'
+            }
+        }))())
+        this.map.on('editable:drawing:end', () => {
+            if (this.displayedShape instanceof L.Marker) {
+                const pos = this.displayedShape.getLatLng()
+                this.createdGeometry = { type: 'Point', coordinates: [pos.lng, pos.lat] }
+            } else if (this.displayedShape instanceof L.Polygon) {
+                const positions = this.displayedShape.getLatLngs() as L.LatLng[][]
+                this.createdGeometry = { type: 'Polygon', coordinates: [positions[0].map((pos) => { return [ pos.lng, pos.lat ] })] }
+            } else {
+                this.createdGeometry = undefined
+            }
         })
 
         const dialog = form.querySelector('#shaclMapDialog') as HTMLDialogElement
@@ -85,24 +119,9 @@ export class LeafletPlugin extends Plugin {
             document.body.style.top = ''
             window.scrollTo(0, parseInt(scrollY || '0') * -1)
             // set wkt in editor
-            const features = this.drawLayer?.getLayers()
-            if (features?.length && this.currentEditor) {
-                let geometry: Geometry | undefined
-                //@ts-ignore
-                if (features[0].editing?.latlngs?.length) {
-                    //@ts-ignore
-                    geometry = { type: 'Polygon', coordinates: [features[0].editing?.latlngs[0][0].map((pos) => { return [ pos.lng, pos.lat ] })] }
-                //@ts-ignore
-                } else if (features[0].editing?._marker?._latlng) {
-                    //@ts-ignore
-                    const pos = features[0].editing?._marker?._latlng
-                    geometry = { type: 'Point', coordinates: [pos.lng, pos.lat] }
-                }
-                if (geometry) {
-                    const wkt = geometryToWkt(geometry)
-                    this.currentEditor.value = wkt
-                    this.currentEditor.dispatchEvent(new Event('change', { bubbles: true }))
-                }
+            if (this.currentEditor && this.createdGeometry) {
+                this.currentEditor.value = geometryToWkt(this.createdGeometry)
+                this.currentEditor.dispatchEvent(new Event('change', { bubbles: true }))
             }
         })
         return dialog
@@ -118,15 +137,13 @@ export class LeafletPlugin extends Plugin {
         button.classList.add('open-map-button')
         button.onclick = () => {
             this.currentEditor = instance.querySelector('.editor') as Editor
-            this.drawLayer?.clearLayers()
-            const wkt = this.currentEditor.value || ''
-            const geometry = wktToGeometry(wkt)
-            this.drawAndZoomToGeometry(geometry, this.drawLayer!, this.map!)
+            this.createdGeometry = undefined
+            this.displayedShape?.remove()
+            this.drawAndZoomToGeometry(wktToGeometry(this.currentEditor.value || ''), this.map!)
 
             document.body.style.top = `-${window.scrollY}px`
             document.body.style.position = 'fixed'
             dialog.showModal()
-            setTimeout(() => { this.map?.invalidateSize()})
         }
         const instance = fieldFactory(template, value || null)
         instance.appendChild(button)
@@ -137,34 +154,34 @@ export class LeafletPlugin extends Plugin {
         const container = document.createElement('div')
         const geometry = wktToGeometry(value.value)
         if (geometry?.coordinates?.length) {
-            // wait for container to be available in DOM
-            setTimeout(() => {
-                const map = L.map(container, {
-                    attributionControl: false,
-                    fullscreenControl: true,
-                    layers: [
-                        L.tileLayer('https://tile.openstreetmap.de/{z}/{x}/{y}.png'),
-                        // L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'),
-                    ],
-                    zoom: 5,
-                    maxBounds: worldBounds
-                })
-                const drawLayer = L.featureGroup().addTo(map)
-                this.drawAndZoomToGeometry(geometry, drawLayer, map)
+            const map = L.map(container, {
+                fullscreenControl: true,
+                layers: [ L.tileLayer(tileSource) ],
+                zoom: 5,
+                center: defaultCenter,
+                maxBounds: worldBounds
             })
+            map.attributionControl.addAttribution(attribution)
+            this.drawAndZoomToGeometry(geometry, map)
         }
         return container
     }
 
-    drawAndZoomToGeometry(geometry: Geometry | undefined, drawLayer: L.LayerGroup, map: L.Map) {
+    drawAndZoomToGeometry(geometry: Geometry | undefined, map: L.Map) {
+        setTimeout(() => { map.invalidateSize() })
         if (geometry?.type === 'Point') {
             const coords = { lng: geometry.coordinates[0], lat: geometry.coordinates[1] }
-            L.marker(coords).addTo(drawLayer)
+            this.displayedShape = L.marker(coords, { icon: markerIcon }).addTo(map)
             map.setView(coords, 15, { animate: false })
-
         } else if (geometry?.type === 'Polygon') {
-            const polygon =  L.polygon(geometry.coordinates[0].map((pos) => { return { lng: pos[0], lat: pos[1] }})).addTo(drawLayer!)
-            setTimeout(() => { map.fitBounds(polygon.getBounds(), { animate: false }) }, 100)
+            const coords = geometry.coordinates[0].map((pos) => { return { lng: pos[0], lat: pos[1] }})
+            const polygon =  L.polygon(coords).addTo(map)
+            this.displayedShape = polygon
+            map.fitBounds(polygon.getBounds(), { animate: false })
+            setTimeout(() => {
+                map.fitBounds(polygon.getBounds(), { animate: false })
+                map.setView(polygon.getCenter(), undefined, { animate: false })
+            }, 1)
         } else {
             map.setZoom(5)
         }
diff --git a/src/property-template.ts b/src/property-template.ts
index 6d4a463..14c13ef 100644
--- a/src/property-template.ts
+++ b/src/property-template.ts
@@ -20,7 +20,7 @@ const mappers: Record<string, (template: ShaclPropertyTemplate, term: Term) => v
     [`${PREFIX_SHACL}minExclusive`]: (template, term) => { template.minExclusive = parseInt(term.value) },
     [`${PREFIX_SHACL}maxExclusive`]: (template, term) => { template.maxExclusive = parseInt(term.value) },
     [`${PREFIX_SHACL}pattern`]:      (template, term) => { template.pattern = term.value },
-    [`${PREFIX_SHACL}order`]:        (template, term) => { template.order = term.value },
+    [`${PREFIX_SHACL}order`]:        (template, term) => { template.order = parseInt(term.value) },
     [`${PREFIX_DASH}singleLine`]:    (template, term) => { template.singleLine = term.value === 'true' },
     [`${PREFIX_SHACL}and`]:          (template, term) => { template.shaclAnd = term.value },
     [`${PREFIX_SHACL}in`]:           (template, term) => { template.shaclIn = term.value },
@@ -65,7 +65,7 @@ export class ShaclPropertyTemplate  {
     singleLine: boolean | undefined
     defaultValue: Term | undefined
     pattern: string | undefined
-    order: string | undefined
+    order: number | undefined
     nodeKind: NamedNode | undefined
     shaclAnd: string | undefined
     shaclIn: string | undefined
diff --git a/src/property.ts b/src/property.ts
index bbd8b5a..84ca95b 100644
--- a/src/property.ts
+++ b/src/property.ts
@@ -8,6 +8,7 @@ import { Config } from './config'
 import { ShaclPropertyTemplate } from './property-template'
 import { Editor, fieldFactory } from './theme'
 import { toRDF } from './serialize'
+import { findPlugin } from './plugin'
 
 export class ShaclProperty extends HTMLElement {
     template: ShaclPropertyTemplate
@@ -18,8 +19,8 @@ export class ShaclProperty extends HTMLElement {
         this.template = new ShaclPropertyTemplate(config.shapesGraph.getQuads(shaclSubject, null, null, SHAPES_GRAPH), nodeId, config)
         this.dataset.nodeId = this.template.nodeId.id
 
-        if (this.template.order) {
-            this.style.order = this.template.order
+        if (this.template.order !== undefined) {
+            this.style.order = `${this.template.order}`
         }
 
         if (config.editMode) {
@@ -61,18 +62,21 @@ export class ShaclProperty extends HTMLElement {
         }
 
         if (this.template.extendedShapes?.length && this.template.config.attributes.collapse !== null && (!this.template.maxCount || this.template.maxCount > 1)) {
-            const collapsible = this
-            collapsible.classList.add('collapsible')
-            if (this.template.config.attributes.collapse === 'open') {
-                collapsible.classList.add('open')
+            // in view mode, show collapsible only when we have something to show
+            if (config.editMode || this.childElementCount > 0) {
+                const collapsible = this
+                collapsible.classList.add('collapsible')
+                if (this.template.config.attributes.collapse === 'open') {
+                    collapsible.classList.add('open')
+                }
+                const activator = document.createElement('h1')
+                activator.classList.add('activator')
+                activator.innerText = this.template.label
+                activator.addEventListener('click', () => {
+                    collapsible.classList.toggle('open')
+                })
+                this.prepend(activator)
             }
-            const activator = document.createElement('h1')
-            activator.classList.add('activator')
-            activator.innerText = this.template.label
-            activator.addEventListener('click', () => {
-                collapsible.classList.toggle('open')
-            })
-            this.prepend(activator)
         }
     }
 
@@ -144,7 +148,7 @@ export function createPropertyInstance(template: ShaclPropertyTemplate, value?:
             instance.appendChild(new ShaclNode(node, template.config, value as NamedNode | BlankNode | undefined, template.nodeKind, template.label))
         }
     } else {
-        const plugin = template.config.plugins.find(template.path, template.datatype?.value)
+        const plugin = findPlugin(template.path, template.datatype?.value)
         if (plugin) {
             if (template.config.editMode) {
                 instance = plugin.createEditor(template, value)
diff --git a/src/styles.css b/src/styles.css
index 4172690..ba20869 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -14,6 +14,7 @@ shacl-property:not(.may-add) > .add-button { display: none; }
 shacl-property:not(.may-remove) > .property-instance > .remove-button:not(.persistent) { visibility: hidden; }
 shacl-property:not(.may-remove) > .shacl-or-constraint > .remove-button:not(.persistent) { visibility: hidden; }
 .shacl-group { margin-bottom: 1em; padding-bottom: 1em; }
+.mode-view .shacl-group:not(:has(shacl-property)) { display: none; }
 .property-instance, .shacl-or-constraint { display: flex; align-items: flex-start; padding: 4px 0; width: 100%; position: relative; }
 .shacl-or-constraint label { display: inline-block; word-break: break-word; width: var(--label-width); line-height: 1em; padding-top: 0.15em; padding-right: 1em; flex-shrink: 0; position: relative; }
 .property-instance label[title] { cursor: help; text-decoration: underline dashed #AAA; }