@lowdefy/blocks-basic 6.0.0 → 6.1.0

package/dist/blocks/ClickableHtml/ClickableHtml.js

@@ -0,0 +1,53 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React from 'react';
+import { withBlockDefaults, HtmlComponent } from '@lowdefy/block-utils';
+// dataset keys are camelCase (data-record-id → recordId); config authors
+// write the attributes in kebab-case, so hand them back as snake_case.
+function toSnakeCase(key) {
+    return key.replace(/[A-Z]/g, (match)=>`_${match.toLowerCase()}`);
+}
+const ClickableHtml = ({ blockId, classNames, events, properties, methods, styles })=>{
+    // Each clickable element names the event it fires in its data-event
+    // attribute (data-event="onEditClick" → events.onEditClick), so every
+    // target in the markup has its own action chain. Its other data-*
+    // attributes are the event object.
+    function onClick(clickEvent) {
+        const target = clickEvent.target.closest('[data-event]');
+        if (!target || !clickEvent.currentTarget.contains(target)) return;
+        const { event: name, ...data } = target.dataset;
+        if (!name) return;
+        clickEvent.preventDefault();
+        const event = {};
+        Object.keys(data).forEach((key)=>{
+            event[toSnakeCase(key)] = data[key];
+        });
+        methods.triggerEvent({
+            name,
+            event
+        });
+    }
+    return /*#__PURE__*/ React.createElement(HtmlComponent, {
+        div: true,
+        events: events,
+        html: properties.html,
+        id: blockId,
+        methods: methods,
+        className: classNames?.element,
+        style: styles?.element,
+        onClick: onClick
+    });
+};
+export default withBlockDefaults(ClickableHtml);

package/dist/blocks/ClickableHtml/e2e.js

@@ -0,0 +1,23 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import { createBlockHelper, escapeId } from '@lowdefy/e2e-utils';
+import { expect } from '@playwright/test';
+const locator = (page, blockId)=>page.locator(`#${escapeId(blockId)}`);
+export default createBlockHelper({
+    locator,
+    expect: {
+        containsText: (page, blockId, text)=>expect(locator(page, blockId)).toContainText(text)
+    }
+});

package/dist/blocks/ClickableHtml/gallery.yaml

@@ -0,0 +1,113 @@
+# Copyright 2020-2026 Lowdefy, Inc
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+- title: A named event per button
+  blocks:
+    - id: buttons_basic
+      type: ClickableHtml
+      properties:
+        html: '<p>Pick a size: <button data-event="onSmallClick">Small</button> <button data-event="onLargeClick">Large</button></p>'
+      events:
+        onSmallClick:
+          - id: set_small
+            type: SetState
+            params:
+              buttons_basic_selected: small
+        onLargeClick:
+          - id: set_large
+            type: SetState
+            params:
+              buttons_basic_selected: large
+    - id: buttons_basic_result
+      type: Html
+      properties:
+        html:
+          _string.concat:
+            - '<p>State: <code>'
+            - _state:
+                key: buttons_basic_selected
+                default: 'nothing yet'
+            - '</code></p>'
+
+- title: Data attributes are the event object
+  blocks:
+    - id: list_rows
+      type: ClickableHtml
+      properties:
+        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:
+          - id: set_clicked
+            type: SetState
+            params:
+              list_rows_clicked:
+                _event: true
+    - id: list_rows_result
+      type: Html
+      properties:
+        html:
+          _string.concat:
+            - '<p>Last event: <code>'
+            - _json.stringify:
+                _state:
+                  key: list_rows_clicked
+                  default: {}
+            - '</code></p>'
+
+- title: Links and plain markup are left to the browser
+  blocks:
+    - id: mixed_content
+      type: ClickableHtml
+      properties:
+        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:
+          - id: set_mixed
+            type: SetState
+            params:
+              mixed_content_thread:
+                _event: thread_id
+    - id: mixed_content_result
+      type: Html
+      properties:
+        html:
+          _string.concat:
+            - '<p>Thread: <code>'
+            - _state:
+                key: mixed_content_thread
+                default: 'none'
+            - '</code></p>'
+
+- title: Style Overrides
+  blocks:
+    - id: style_card
+      type: ClickableHtml
+      style:
+        .element:
+          padding: 16
+          borderRadius: 8
+          border: 1px solid var(--ant-color-border)
+          background: var(--ant-color-bg-container)
+      properties:
+        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:
+          - id: set_card_edit
+            type: SetState
+            params:
+              style_card_action: edit
+        onRemoveClick:
+          - id: set_card_remove
+            type: SetState
+            params:
+              style_card_action: remove

package/dist/blocks/ClickableHtml/meta.js

@@ -0,0 +1,40 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ export default {
+    category: 'display',
+    icons: [],
+    valueType: null,
+    cssKeys: {
+        element: 'The Html element.'
+    },
+    // Each clickable element names its event in a data-event attribute, so the
+    // event names this block fires are authored in its html.
+    events: {
+        onTextSelection: 'Trigger action when text is selected and pass selected text to the event object.'
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            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" }.',
+                docs: {
+                    displayType: 'text-area'
+                }
+            }
+        }
+    }
+};

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

@@ -0,0 +1,69 @@
+# Copyright 2020-2026 Lowdefy, Inc
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+id: clickablehtml
+type: Box
+
+blocks:
+  - id: clickable_basic
+    type: ClickableHtml
+    properties:
+      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:
+        - id: set_greeted
+          type: SetState
+          params:
+            clicked:
+              event: greet
+              user_id:
+                _event: user_id
+      onWaveClick:
+        - id: set_waved
+          type: SetState
+          params:
+            clicked:
+              event: wave
+              user_id:
+                _event: user_id
+
+  - id: clickable_result
+    type: Html
+    properties:
+      html:
+        _string.concat:
+          - '<span id="clicked_event">'
+          - _state:
+              key: clicked.event
+              default: ''
+          - '</span><span id="clicked_user_id">'
+          - _state:
+              key: clicked.user_id
+              default: ''
+          - '</span>'
+
+  - id: clickable_no_event
+    type: ClickableHtml
+    properties:
+      html: '<p><button>Plain button</button></p>'
+    events:
+      onPlainClick:
+        - id: set_plain
+          type: SetState
+          params:
+            plain_clicked: true
+
+  - id: clickable_sanitized
+    type: ClickableHtml
+    properties:
+      html: <p>Safe content</p><script>alert('xss')</script>

package/dist/blocks/ClickableHtml/tests.yaml

@@ -0,0 +1,35 @@
+# Copyright 2020-2026 Lowdefy, Inc
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+- id: default
+  type: ClickableHtml
+- id: properties.html
+  type: ClickableHtml
+  properties:
+    html: |
+      <p>Plain markup <button data-event="onGoClick" data-item-id="1">Go</button></p>
+- id: properties.html-no-events
+  type: ClickableHtml
+  properties:
+    html: |
+      <p>No data-event here, clicks do nothing.</p>
+- id: properties.html-bad-code
+  type: ClickableHtml
+  properties:
+    html: |
+      <button data-event="onOkClick" onclick="alert('inline handler stripped')">Ok</button>
+      <script>alert('script tag');</script>
+- id: properties.html is number 0
+  type: ClickableHtml
+  properties:
+    html: 0

package/dist/blocks.js

@@ -14,6 +14,7 @@
   limitations under the License.
 */ export { default as Anchor } from './blocks/Anchor/Anchor.js';
 export { default as Box } from './blocks/Box/Box.js';
+export { default as ClickableHtml } from './blocks/ClickableHtml/ClickableHtml.js';
 export { default as DangerousHtml } from './blocks/DangerousHtml/DangerousHtml.js';
 export { default as Dynamic } from './blocks/Dynamic/Dynamic.js';
 export { default as Html } from './blocks/Html/Html.js';

package/dist/e2e.js

@@ -14,6 +14,7 @@
   limitations under the License.
 */ export { default as Anchor } from './blocks/Anchor/e2e.js';
 export { default as Box } from './blocks/Box/e2e.js';
+export { default as ClickableHtml } from './blocks/ClickableHtml/e2e.js';
 export { default as DangerousHtml } from './blocks/DangerousHtml/e2e.js';
 export { default as Dynamic } from './blocks/Dynamic/e2e.js';
 export { default as Html } from './blocks/Html/e2e.js';

package/dist/metas.js

@@ -14,6 +14,7 @@
   limitations under the License.
 */ export { default as Anchor } from './blocks/Anchor/meta.js';
 export { default as Box } from './blocks/Box/meta.js';
+export { default as ClickableHtml } from './blocks/ClickableHtml/meta.js';
 export { default as DangerousHtml } from './blocks/DangerousHtml/meta.js';
 export { default as Dynamic } from './blocks/Dynamic/meta.js';
 export { default as Html } from './blocks/Html/meta.js';

package/package.json

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