@lowdefy/blocks-basic 0.0.0-experimental-20260927140906 → 0.0.0-experimental-20260928062533

package/dist/blocks/Anchor/meta.js

@@ -76,10 +76,12 @@
             },
             href: {
                 type: 'string',
+                urlKind: 'href',
                 description: 'The href to link to when the anchor link is clicked.'
             },
             url: {
                 type: 'string',
+                urlKind: 'url',
                 description: 'External url to link to when the anchor link is clicked.'
             },
             rel: {

package/dist/blocks/ClickableHtml/ClickableHtml.js

@@ -18,8 +18,10 @@ import { withBlockDefaults, HtmlComponent } from '@lowdefy/block-utils';
 // (data-event="onEditClick" → events.onEditClick), so every target in the
 // markup has its own action chain. Its other data-* attributes are the event
 // object. HtmlComponent finds the target, including inside data-popover
-// content, and prevents the element's default action.
+// content, and prevents the element's default action. Only the events listed
+// in properties.dataEvents fire, since the markup can hold data.
 const ClickableHtml = ({ blockId, classNames, events, properties, methods, styles })=>/*#__PURE__*/ React.createElement(HtmlComponent, {
+        dataEvents: properties.dataEvents,
         div: true,
         events: events,
         html: properties.html,

package/dist/blocks/ClickableHtml/gallery.yaml

@@ -16,6 +16,9 @@
     - id: buttons_basic
       type: ClickableHtml
       properties:
+        dataEvents:
+          - onSmallClick
+          - onLargeClick
         html: '<p>Pick a size: <button data-event="onSmallClick">Small</button> <button data-event="onLargeClick">Large</button></p>'
       events:
         onSmallClick:
@@ -44,6 +47,8 @@
     - id: list_rows
       type: ClickableHtml
       properties:
+        dataEvents:
+          - onRowClick
         html: '<ul style="list-style: none; padding: 0; margin: 0;"><li data-event="onRowClick" data-record-id="rec_1" style="padding: 8px; cursor: pointer; border-bottom: 1px solid var(--ant-color-border);">First record</li><li data-event="onRowClick" data-record-id="rec_2" style="padding: 8px; cursor: pointer; border-bottom: 1px solid var(--ant-color-border);">Second record</li><li data-event="onRowClick" data-record-id="rec_3" style="padding: 8px; cursor: pointer;">Third record</li></ul>'
       events:
         onRowClick:
@@ -69,6 +74,8 @@
     - id: mixed_content
       type: ClickableHtml
       properties:
+        dataEvents:
+          - onCommentClick
         html: '<p>This <a href="https://lowdefy.com" target="_blank">link</a> navigates normally, but <a href="#" data-event="onCommentClick" data-thread-id="t_9">this one</a> fires onCommentClick instead.</p>'
       events:
         onCommentClick:
@@ -99,6 +106,9 @@
           border: 1px solid var(--ant-color-border)
           background: var(--ant-color-bg-container)
       properties:
+        dataEvents:
+          - onEditClick
+          - onRemoveClick
         html: '<h4 style="margin: 0 0 8px 0;">Card</h4><p style="margin: 0 0 8px 0; color: var(--ant-color-text-secondary);">Yours to change or remove until tomorrow.</p><button data-event="onEditClick">Edit</button> <button data-event="onRemoveClick">Remove</button>'
       events:
         onEditClick:
@@ -117,6 +127,11 @@
     - id: row_actions
       type: ClickableHtml
       properties:
+        dataEvents:
+          - onEdit
+          - onDuplicate
+          - name: onDelete
+            confirm: Delete invoice INV-042?
         html: '<p>Invoice INV-042 <i data-icon="edit" data-event="onEdit" data-id="42" data-tooltip="Edit" style="cursor: pointer"></i> <span data-popover="more" style="cursor: pointer"><i data-icon="more-vertical"></i></span></p><div data-popover-content="more" hidden><p data-event="onDuplicate" data-id="42" style="cursor: pointer; margin: 0 0 8px"><i data-icon="copy"></i> Duplicate</p><p data-event="onDelete" data-id="42" style="cursor: pointer; margin: 0; color: var(--ant-color-error)"><i data-icon="delete"></i> Delete</p></div>'
       events:
         onEdit:
@@ -150,6 +165,10 @@
     - id: confirm_actions
       type: ClickableHtml
       properties:
+        dataEvents:
+          - name: onDelete
+            confirm: true
+          - onArchive
         html: '<p>INV-2026-0042 <i data-icon="delete" data-event="onDelete" data-id="42" data-tooltip="Delete" data-confirm="Delete invoice INV-2026-0042?" style="cursor: pointer; color: var(--ant-color-error)"></i> <span data-event="onArchive" data-id="42" data-confirm style="cursor: pointer; color: var(--ant-color-primary)">Archive</span></p>'
       events:
         onDelete:

package/dist/blocks/ClickableHtml/meta.js

@@ -25,9 +25,14 @@
             message: 'Content is sanitised with DOMPurify, so <style>, <script> and inline event handlers are removed before render. Clicks are wired through data-event attributes instead of inline handlers.',
             see: 'display-blocks/clickablehtml'
         },
+        {
+            id: 'clickable-html-data-events',
+            message: 'List every event the HTML fires in properties.dataEvents: a data-event whose name is not listed does nothing. HTML built from user or request data must escape that data, so the data cannot add data-event elements of its own: _nunjucks escapes {{ values }} unless they are marked safe, while _string.concat and _js do not escape.',
+            see: 'display-blocks/clickablehtml'
+        },
         {
             id: 'clickable-html-confirm-destructive',
-            message: 'Add data-confirm="Delete this row?" to a data-event element whose event deletes or changes data, so a stray click cannot fire it. Only OK fires the event.',
+            message: 'Give an event that deletes or changes data confirm in dataEvents ({ name: onDelete, confirm: "Delete this row?" }), so every click on it asks first and only OK fires it. data-confirm="Delete this row?" on the element asks too, but only where the markup says so.',
             see: 'concepts/html-attributes'
         }
     ],
@@ -41,9 +46,47 @@
         type: 'object',
         additionalProperties: false,
         properties: {
+            dataEvents: {
+                type: 'array',
+                description: 'The events the HTML may fire. A data-event whose name is not listed does nothing, and a click on it logs a console warning; with no dataEvents the HTML fires no events. List an event by name, or as { name, confirm } to make every click on it ask first.',
+                items: {
+                    oneOf: [
+                        {
+                            type: 'string',
+                            description: 'An event name, as written in data-event.'
+                        },
+                        {
+                            type: 'object',
+                            additionalProperties: false,
+                            required: [
+                                'name'
+                            ],
+                            properties: {
+                                name: {
+                                    type: 'string',
+                                    description: 'An event name, as written in data-event.'
+                                },
+                                confirm: {
+                                    oneOf: [
+                                        {
+                                            type: 'boolean',
+                                            description: 'Ask before the event fires, whatever the HTML says, with the element\'s data-confirm message or "Are you sure?".'
+                                        },
+                                        {
+                                            type: 'string',
+                                            minLength: 1,
+                                            description: 'Ask before the event fires, whatever the HTML says, with this message.'
+                                        }
+                                    ]
+                                }
+                            }
+                        }
+                    ]
+                }
+            },
             html: {
                 type: 'string',
-                description: 'Content to be rendered as Html. An element with a data-event attribute fires the event it names when clicked (data-event="onEditClick" fires events.onEditClick), and its default browser action is prevented. The event object holds the element\'s other data-* attributes with snake_case keys, so data-event="onEditClick" data-record-id="42" gives { record_id: "42" }. Targets that are not links or buttons become keyboard focusable, and Enter or Space clicks them. A data-event inside popover content fires too, then closes the popover. A link with data-event fires the event and does not navigate. data-confirm="Delete this row?" on a data-event element asks first: only OK fires the event (bare data-confirm asks "Are you sure?"). All Html block attributes work too: data-icon, data-tooltip, data-popover, data-page-id links, data-new-tab, data-tag, data-status, data-time, data-format, data-avatar, data-copy, data-truncate and data-tone. See the HTML attributes docs page.',
+                description: 'Content to be rendered as Html. An element with a data-event attribute fires the event it names when clicked (data-event="onEditClick" fires events.onEditClick), if dataEvents lists it, and its default browser action is prevented. The event object holds the element\'s other data-* attributes with snake_case keys, so data-event="onEditClick" data-record-id="42" gives { record_id: "42" }. Targets that are not links or buttons become keyboard focusable, and Enter or Space clicks them. A data-event inside popover content fires too, then closes the popover. A link with data-event fires the event and does not navigate. data-confirm="Delete this row?" on a data-event element asks first: only OK fires the event (bare data-confirm asks "Are you sure?"). Escape user and request data in the HTML, so it cannot add data-event elements of its own. All Html block attributes work too: data-icon, data-tooltip, data-popover, data-page-id links, data-new-tab, data-tag, data-status, data-time, data-format, data-avatar, data-copy, data-truncate and data-tone. See the HTML attributes docs page.',
                 docs: {
                     displayType: 'text-area'
                 }

package/dist/blocks/ClickableHtml/tests/ClickableHtml.e2e.yaml

@@ -18,6 +18,9 @@ blocks:
   - id: clickable_basic
     type: ClickableHtml
     properties:
+      dataEvents:
+        - onGreetClick
+        - onWaveClick
       html: '<p>Hello <button data-event="onGreetClick" data-user-id="u_1">World</button> <button data-event="onWaveClick" data-user-id="u_2">Wave</button></p>'
     events:
       onGreetClick:
@@ -71,6 +74,8 @@ blocks:
   - id: clickable_confirm
     type: ClickableHtml
     properties:
+      dataEvents:
+        - onDelete
       html: '<button id="confirm_delete" data-event="onDelete" data-row-id="7" data-confirm="Delete row 7?">Delete</button> <button id="proto_event" data-event="__proto__">Proto</button>'
     events:
       onDelete:
@@ -95,3 +100,89 @@ blocks:
                   key: delete_count
                   default: 0
           - '</span>'
+
+  - id: clickable_allowlist
+    type: ClickableHtml
+    properties:
+      dataEvents:
+        - onListedClick
+      html: '<span id="listed_target" data-event="onListedClick">Listed</span> <span id="unlisted_target" data-event="onUnlistedClick">Unlisted</span>'
+    events:
+      onListedClick:
+        - id: set_listed
+          type: SetState
+          params:
+            allowlist_fired: listed
+      onUnlistedClick:
+        - id: set_unlisted
+          type: SetState
+          params:
+            allowlist_fired: unlisted
+
+  - id: clickable_declared_confirm
+    type: ClickableHtml
+    properties:
+      dataEvents:
+        - name: onRemove
+          confirm: Remove row 3?
+      html: '<button id="declared_remove" data-event="onRemove" data-row-id="3">Remove</button>'
+    events:
+      onRemove:
+        - id: set_removed
+          type: SetState
+          params:
+            removed_row:
+              _event: row_id
+
+  - id: clickable_refresh
+    type: ClickableHtml
+    properties:
+      dataEvents:
+        - onRefreshSoon
+        - onRefreshDelete
+      html:
+        _string.concat:
+          - '<button id="refresh_soon" data-event="onRefreshSoon">Refresh soon</button><p id="refresh_count">Refreshed '
+          - _state:
+              key: refresh_count
+              default: 0
+          - '</p><button id="refresh_delete" data-event="onRefreshDelete" data-id="5" data-confirm="Delete 5?">Delete</button> <span id="refresh_more" data-popover="more">More</span><div data-popover-content="more" hidden><span class="refresh-menu">Menu after '
+          - _state:
+              key: refresh_count
+              default: 0
+          - '</span></div>'
+    events:
+      onRefreshSoon:
+        - id: wait
+          type: Wait
+          params:
+            ms: 1000
+        - id: refresh
+          type: SetState
+          params:
+            refresh_count: 1
+      onRefreshDelete:
+        - id: set_refresh_deleted
+          type: SetState
+          params:
+            refresh_deleted:
+              _event: id
+
+  - id: clickable_events_result
+    type: Html
+    properties:
+      html:
+        _string.concat:
+          - '<span id="allowlist_fired">'
+          - _state:
+              key: allowlist_fired
+              default: ''
+          - '</span><span id="removed_row">'
+          - _state:
+              key: removed_row
+              default: ''
+          - '</span><span id="refresh_deleted">'
+          - _state:
+              key: refresh_deleted
+              default: ''
+          - '</span>'

package/dist/blocks/ClickableHtml/tests.yaml

@@ -16,6 +16,8 @@
 - id: properties.html
   type: ClickableHtml
   properties:
+    dataEvents:
+      - onGoClick
     html: |
       <p>Plain markup <button data-event="onGoClick" data-item-id="1">Go</button></p>
 - id: properties.html-no-events
@@ -26,6 +28,8 @@
 - id: properties.html-bad-code
   type: ClickableHtml
   properties:
+    dataEvents:
+      - onOkClick
     html: |
       <button data-event="onOkClick" onclick="alert('inline handler stripped')">Ok</button>
       <script>alert('script tag');</script>
@@ -33,3 +37,12 @@
   type: ClickableHtml
   properties:
     html: 0
+- id: properties.dataEvents
+  type: ClickableHtml
+  properties:
+    dataEvents:
+      - onEditClick
+      - name: onDeleteClick
+        confirm: Delete this row?
+    html: |
+      <p><button data-event="onEditClick">Edit</button> <button data-event="onDeleteClick">Delete</button></p>

package/dist/blocks/Html/tests/Html.e2e.yaml

@@ -65,3 +65,4 @@ blocks:
         <div data-popover-content="more" hidden><b class="enh-popover-body">Popover body</b></div>
         <a id="enh_page_link" data-page-id="clickablehtml" data-url-query="tab=a">Clickable</a>
         <a id="enh_dot_link" href="/.//evil.example/x" data-link>Dot link</a>
+        <span id="enh_copy_long" data-copy="npm install lowdefy-package-with-a-long-name --save-dev">Install</span>

package/dist/blocks/Img/meta.js

@@ -28,6 +28,7 @@
         properties: {
             src: {
                 type: 'string',
+                urlKind: 'src',
                 description: 'The image URL.'
             },
             alt: {
@@ -69,6 +70,7 @@
             },
             srcSet: {
                 type: 'string',
+                urlKind: 'srcSet',
                 description: 'Possible image sources for the user agent to use, strings separated by commas.',
                 docs: {
                     displayType: 'text-area'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/blocks-basic",
-  "version": "0.0.0-experimental-20260927140906",
+  "version": "0.0.0-experimental-20260928062533",
   "license": "Apache-2.0",
   "description": "Basic html Lowdefy blocks.",
   "homepage": "https://lowdefy.com",
@@ -45,8 +45,8 @@
     "dist/*"
   ],
   "dependencies": {
-    "@lowdefy/block-utils": "0.0.0-experimental-20260927140906",
-    "@lowdefy/helpers": "0.0.0-experimental-20260927140906",
+    "@lowdefy/block-utils": "0.0.0-experimental-20260928062533",
+    "@lowdefy/helpers": "0.0.0-experimental-20260928062533",
     "dompurify": "3.4.13"
   },
   "peerDependencies": {
@@ -54,8 +54,8 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@lowdefy/block-dev-e2e": "0.0.0-experimental-20260927140906",
-    "@lowdefy/e2e-utils": "0.0.0-experimental-20260927140906",
+    "@lowdefy/block-dev-e2e": "0.0.0-experimental-20260928062533",
+    "@lowdefy/e2e-utils": "0.0.0-experimental-20260928062533",
     "@playwright/test": "1.59.1",
     "@swc/cli": "0.8.1",
     "@swc/core": "1.15.32",