@lowdefy/blocks-basic 5.6.0 → 6.1.0

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

@@ -0,0 +1,33 @@
+# 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: dangeroushtml
+type: Box
+
+blocks:
+  - id: dangeroushtml_basic
+    type: DangerousHtml
+    properties:
+      html: <p>Basic dangerous HTML content</p>
+
+  - id: dangeroushtml_iframe
+    type: DangerousHtml
+    properties:
+      html: <iframe src="about:blank" title="Test iframe"></iframe>
+      DOMPurifyOptions:
+        ADD_TAGS:
+          - iframe
+        ADD_ATTR:
+          - src
+          - title

package/dist/blocks/DangerousHtml/tests.yaml

@@ -0,0 +1,83 @@
+# 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: DangerousHtml
+- id: properties.html
+  type: Html
+  properties:
+    html: |
+      <div style="background: green; padding: 10px;">Content green background</div>
+- id: properties.style
+  type: DangerousHtml
+  properties:
+    style:
+      background: yellow
+      padding: 10
+    html: |
+      <div>properties.style yellow background</div>
+- id: properties.html-styled
+  type: DangerousHtml
+  properties:
+    style:
+      background: yellow
+      padding: 10
+    html: |
+      <div style="background: green; padding: 10px;">Content green background and properties.style yellow background</div>
+- id: properties.html-iframe
+  type: DangerousHtml
+  properties:
+    html: |
+      No additional ADD_TAGS:
+      <iframe width="560" height="315" src="https://www.youtube.com/embed/7N7GWdlQJlU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+- id: properties.html-DOMPurifyOptions.ADD_TAGS-iframe
+  type: DangerousHtml
+  properties:
+    DOMPurifyOptions:
+      ADD_TAGS:
+        - iframe
+    html: |
+      With iframe ADD_TAGS:
+      <iframe width="560" height="315" src="https://www.youtube.com/embed/7N7GWdlQJlU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+- id: properties.html-bad-code
+  type: DangerousHtml
+  properties:
+    html: |
+      <h1>Link<h1>
+
+      <a href="https://lowdefy.com">Lowdefy link</a>
+
+      <font size="+10">Description</font>
+
+      <h1>Bad HTML</h1>
+
+      <div onmouseover="alert('alpha')">
+        <a href="javascript:alert('bravo')">delta</a>
+        <img src="x" onerror="alert('charlie')">
+        <iframe src="javascript:alert('delta')"></iframe>
+        <math>
+          <mi xlink:href="data:x,<script>alert('echo')</script>"></mi>
+        </math>
+      </div>
+      <script>
+        alert('script tag');
+      </script>
+- id: properties.html is number 0
+  type: DangerousHtml
+  properties:
+    html: 0
+- id: properties.html is boolean false
+  type: DangerousHtml
+  properties:
+    html: false

package/dist/blocks/Dynamic/Dynamic.js

@@ -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.
+*/ import React from 'react';
+import { withBlockDefaults } from '@lowdefy/block-utils';
+// Server-resolved container. The server fills the content slot at page get by
+// calling the configured api endpoint — by the time config reaches the client,
+// content holds the resolved blocks (or the fallback blocks on failure).
+const Dynamic = ({ blockId, classNames, content, events, methods, styles })=>{
+    return /*#__PURE__*/ React.createElement("div", {
+        id: blockId,
+        "data-testid": blockId,
+        onClick: ()=>methods.triggerEvent({
+                name: 'onClick'
+            }),
+        className: classNames?.element,
+        style: {
+            outline: 'none',
+            cursor: events.onClick && 'pointer',
+            ...styles?.element
+        }
+    }, content.content && content.content());
+};
+export default withBlockDefaults(Dynamic);

package/dist/blocks/Dynamic/e2e.js

@@ -0,0 +1,16 @@
+/*
+  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.
+*/ // Dynamic renders a plain container div like Box — same e2e surface.
+export { default } from '../Box/e2e.js';

package/dist/blocks/Dynamic/meta.js

@@ -0,0 +1,76 @@
+/*
+  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: 'container',
+    icons: [],
+    valueType: null,
+    slots: {
+        content: 'Server-resolved blocks — filled at page get, do not define in config.',
+        fallback: 'Blocks rendered when resolution fails and required is false.'
+    },
+    cssKeys: {
+        element: 'The Dynamic element.'
+    },
+    events: {
+        onClick: 'Trigger actions when the Dynamic container is clicked.'
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            endpointId: {
+                type: 'string',
+                description: 'Required. The api endpoint that resolves this block content at page get. InternalApi endpoints are recommended.'
+            },
+            params: {
+                type: 'object',
+                description: 'Static values passed to the endpoint payload as params. Operators are not allowed — read runtime values in the endpoint routine with _payload, _user or _secret.'
+            },
+            required: {
+                type: 'boolean',
+                default: false,
+                description: 'When true, a resolution failure fails the whole page request instead of rendering the fallback slot.'
+            },
+            types: {
+                type: 'object',
+                description: 'Extra block, action and operator types the endpoint may return, so build includes them in the client bundle.',
+                additionalProperties: false,
+                properties: {
+                    blocks: {
+                        type: 'array',
+                        items: {
+                            type: 'string'
+                        },
+                        description: 'Block types the endpoint may return.'
+                    },
+                    actions: {
+                        type: 'array',
+                        items: {
+                            type: 'string'
+                        },
+                        description: 'Action types the endpoint may return.'
+                    },
+                    operators: {
+                        type: 'array',
+                        items: {
+                            type: 'string'
+                        },
+                        description: 'Client operator types the endpoint may return.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/Html/gallery.yaml

@@ -0,0 +1,239 @@
+# 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: Basic HTML
+  blocks:
+    - id: basic_paragraph
+      type: Html
+      properties:
+        html: '<p>This is a paragraph rendered safely with the Html block.</p>'
+    - id: basic_heading
+      type: Html
+      properties:
+        html: '<h3>Safe Heading</h3><p>The Html block sanitizes content to prevent XSS attacks.</p>'
+    - id: basic_headings_all
+      type: Html
+      properties:
+        html: '<h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6>'
+    - id: basic_line_break
+      type: Html
+      properties:
+        html: '<p>First line<br />Second line<br />Third line</p>'
+    - id: basic_hr
+      type: Html
+      properties:
+        html: '<p>Content above</p><hr /><p>Content below the horizontal rule</p>'
+
+- title: Text Formatting
+  blocks:
+    - id: text_bold
+      type: Html
+      properties:
+        html: '<p>Text with <strong>bold</strong> and <b>also bold</b> formatting.</p>'
+    - id: text_italic
+      type: Html
+      properties:
+        html: '<p>Text with <em>italic</em> and <i>also italic</i> formatting.</p>'
+    - id: text_underline
+      type: Html
+      properties:
+        html: '<p>Text with <u>underline</u> formatting.</p>'
+    - id: text_strikethrough
+      type: Html
+      properties:
+        html: '<p>Text with <s>strikethrough</s> and <del>deleted</del> formatting.</p>'
+    - id: text_combined
+      type: Html
+      properties:
+        html: '<p>Text with <strong><em>bold italic</em></strong>, <strong><u>bold underline</u></strong>, and <em><u>italic underline</u></em>.</p>'
+    - id: text_small
+      type: Html
+      properties:
+        html: '<p>Normal text and <small>small text</small> together.</p>'
+    - id: text_sub_sup
+      type: Html
+      properties:
+        html: '<p>H<sub>2</sub>O is water. E=mc<sup>2</sup> is relativity.</p>'
+    - id: text_mark
+      type: Html
+      properties:
+        html: '<p>This sentence has <mark>highlighted text</mark> using the mark tag.</p>'
+
+- title: Lists
+  blocks:
+    - id: list_unordered
+      type: Html
+      properties:
+        html: '<ul><li>First item</li><li>Second item</li><li>Third item</li></ul>'
+    - id: list_ordered
+      type: Html
+      properties:
+        html: '<ol><li>Step one</li><li>Step two</li><li>Step three</li></ol>'
+    - id: list_nested
+      type: Html
+      properties:
+        html: '<ul><li>Parent item<ul><li>Child item 1</li><li>Child item 2</li></ul></li><li>Another parent item<ul><li>Another child</li></ul></li></ul>'
+    - id: list_ordered_nested
+      type: Html
+      properties:
+        html: '<ol><li>First item<ol><li>Sub-item A</li><li>Sub-item B</li></ol></li><li>Second item</li><li>Third item</li></ol>'
+
+- title: Styled Inline Elements
+  blocks:
+    - id: styled_colored_text
+      type: Html
+      properties:
+        html: '<p><span style="color: var(--ant-color-primary);">Primary text</span>, <span style="color: var(--ant-color-success);">success text</span>, <span style="color: var(--ant-color-error);">error text</span>, and <span style="color: var(--ant-color-warning);">warning text</span>.</p>'
+    - id: styled_background
+      type: Html
+      properties:
+        html: '<p><span style="background: var(--ant-color-primary-bg); padding: 2px 6px; border-radius: 3px;">Primary highlight</span> and <span style="background: var(--ant-color-success-bg); padding: 2px 6px; border-radius: 3px;">Success highlight</span>.</p>'
+    - id: styled_sizes
+      type: Html
+      properties:
+        html: '<p><span style="font-size: 12px;">Small text</span>, <span style="font-size: 16px;">Normal text</span>, <span style="font-size: 20px;">Large text</span>, <span style="font-size: 24px;">Extra large</span>.</p>'
+
+- title: Blockquotes
+  blocks:
+    - id: blockquote_simple
+      type: Html
+      properties:
+        html: '<blockquote>A simple blockquote with default styling.</blockquote>'
+    - id: blockquote_styled
+      type: Html
+      properties:
+        html: '<blockquote style="border-left: 4px solid var(--ant-color-primary); padding-left: 16px; margin: 0; color: var(--ant-color-text-secondary);">This is a styled blockquote with a primary color left border accent and subdued text color.</blockquote>'
+    - id: blockquote_attribution
+      type: Html
+      properties:
+        html: '<blockquote style="border-left: 4px solid var(--ant-color-border); padding-left: 16px; margin: 0;"><p style="margin: 0 0 4px 0; font-style: italic; color: var(--ant-color-text-secondary);">"The best way to predict the future is to invent it."</p><footer style="color: var(--ant-color-text-tertiary); font-size: 13px;">-- Alan Kay</footer></blockquote>'
+
+- title: Code Blocks
+  blocks:
+    - id: code_inline
+      type: Html
+      properties:
+        html: '<p>Use the <code style="background: var(--ant-color-fill-tertiary); padding: 2px 6px; border-radius: 4px; font-family: monospace;">Html</code> block for safe HTML rendering.</p>'
+    - id: code_block
+      type: Html
+      properties:
+        html: |
+          <pre style="background: var(--ant-color-bg-elevated); color: var(--ant-color-text); padding: 16px; border-radius: 6px; overflow-x: auto; font-family: monospace; font-size: 14px; border: 1px solid var(--ant-color-border);"><code>function greet(name) {
+            return "Hello, " + name + "!";
+          }</code></pre>
+    - id: code_multi_inline
+      type: Html
+      properties:
+        html: '<p>Set <code style="background: var(--ant-color-fill-tertiary); padding: 2px 6px; border-radius: 4px; font-family: monospace;">type</code> to <code style="background: var(--ant-color-fill-tertiary); padding: 2px 6px; border-radius: 4px; font-family: monospace;">Html</code> and provide the <code style="background: var(--ant-color-fill-tertiary); padding: 2px 6px; border-radius: 4px; font-family: monospace;">html</code> property.</p>'
+
+- title: Links
+  blocks:
+    - id: link_basic
+      type: Html
+      properties:
+        html: '<p>Visit <a href="https://lowdefy.com">Lowdefy</a> for more information.</p>'
+    - id: link_styled
+      type: Html
+      properties:
+        html: '<p><a href="https://lowdefy.com" style="color: var(--ant-color-primary); text-decoration: none; font-weight: bold;">Primary styled link</a> within a paragraph.</p>'
+    - id: link_multiple
+      type: Html
+      properties:
+        html: '<p>Resources: <a href="https://lowdefy.com">Home</a> | <a href="https://docs.lowdefy.com">Docs</a> | <a href="https://github.com/lowdefy/lowdefy">GitHub</a></p>'
+
+- title: Nested Elements
+  blocks:
+    - id: nested_section
+      type: Html
+      properties:
+        html: '<div><h4>Section Title</h4><p>A paragraph with a <a href="https://lowdefy.com">safe link</a> inside it.</p><hr /><p>Content below the horizontal rule.</p></div>'
+    - id: nested_formatted_list
+      type: Html
+      properties:
+        html: '<div><h4>Features</h4><ul><li><strong>Fast:</strong> Optimized rendering</li><li><strong>Safe:</strong> XSS protection built-in</li><li><strong>Flexible:</strong> Supports many HTML tags</li></ul></div>'
+    - id: nested_mixed
+      type: Html
+      properties:
+        html: '<div><p>This block mixes <strong>bold</strong>, <em>italic</em>, and <code style="background: var(--ant-color-fill-tertiary); padding: 2px 4px; border-radius: 3px;">code</code> formatting.</p><blockquote style="border-left: 3px solid var(--ant-color-border); padding-left: 12px; margin: 12px 0; color: var(--ant-color-text-secondary);">It also includes a blockquote with <strong>bold text</strong>.</blockquote><ol><li>And a numbered list</li><li>With multiple items</li></ol></div>'
+
+- title: Tables
+  blocks:
+    - id: table_simple
+      type: Html
+      properties:
+        html: '<table style="width: 100%; border-collapse: collapse;"><thead><tr><th style="border: 1px solid var(--ant-color-border); padding: 8px; background: var(--ant-color-fill-quaternary); text-align: left;">Feature</th><th style="border: 1px solid var(--ant-color-border); padding: 8px; background: var(--ant-color-fill-quaternary); text-align: left;">Status</th></tr></thead><tbody><tr><td style="border: 1px solid var(--ant-color-border); padding: 8px;">Html block</td><td style="border: 1px solid var(--ant-color-border); padding: 8px;">Safe</td></tr><tr><td style="border: 1px solid var(--ant-color-border); padding: 8px;">DangerousHtml</td><td style="border: 1px solid var(--ant-color-border); padding: 8px;">Powerful</td></tr></tbody></table>'
+
+- title: Style Overrides
+  blocks:
+    - id: style_padded
+      type: Html
+      style:
+        .element:
+          padding: 20
+          background: var(--ant-color-primary-bg)
+          borderRadius: 8
+      properties:
+        html: '<p style="margin: 0;">Content inside a styled Html container with primary background.</p>'
+    - id: style_bordered
+      type: Html
+      style:
+        .element:
+          border: 2px solid var(--ant-color-primary)
+          padding: 16
+          borderRadius: 8
+      properties:
+        html: '<p style="margin: 0;">Content with a primary color border applied via style override.</p>'
+    - id: style_shadow
+      type: Html
+      style:
+        .element:
+          padding: 20
+          borderRadius: 12
+          boxShadow: var(--ant-box-shadow)
+          background: var(--ant-color-bg-container)
+      properties:
+        html: '<h4 style="margin: 0 0 8px 0;">Elevated Html Block</h4><p style="margin: 0; color: var(--ant-color-text-secondary);">An Html block styled with box-shadow for an elevated card look.</p>'
+    - id: style_max_width
+      type: Html
+      style:
+        .element:
+          maxWidth: 350
+          margin: 0 auto
+          textAlign: center
+          padding: 16
+          background: var(--ant-color-success-bg)
+          borderRadius: 8
+      properties:
+        html: '<p style="margin: 0; color: var(--ant-color-success); font-weight: bold;">Centered and constrained width.</p>'
+    - id: style_left_accent
+      type: Html
+      style:
+        .element:
+          borderLeft: 4px solid var(--ant-color-warning)
+          paddingLeft: 16
+          paddingTop: 8
+          paddingBottom: 8
+      properties:
+        html: '<p style="margin: 0; color: var(--ant-color-warning); font-weight: 500;">Warning accent border on the left side.</p>'
+    - id: style_elevated
+      type: Html
+      style:
+        .element:
+          background: var(--ant-color-bg-elevated)
+          color: var(--ant-color-text)
+          padding: 20
+          borderRadius: 8
+          border: 1px solid var(--ant-color-border)
+      properties:
+        html: '<h4 style="margin: 0 0 8px 0;">Elevated Block</h4><p style="margin: 0;">Uses bg-elevated token for a surface that adapts to light and dark mode.</p>'

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

@@ -0,0 +1,56 @@
+# 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: html
+type: Box
+
+blocks:
+  - id: html_basic
+    type: Html
+    properties:
+      html: <p>Hello World</p>
+
+  - id: html_styled
+    type: Html
+    properties:
+      html: <p>Styled content</p>
+      style:
+        backgroundColor: rgb(240, 240, 240)
+        padding: 10px
+
+  - id: html_complex
+    type: Html
+    properties:
+      html: |
+        <div>
+          <h1>Title</h1>
+          <p>Paragraph with <strong>bold</strong> text</p>
+        </div>
+
+  - id: html_sanitized
+    type: Html
+    properties:
+      html: <p>Safe content</p><script>alert('xss')</script>
+
+  - id: html_selection
+    type: Html
+    properties:
+      html: <p>Select this text to trigger event</p>
+    events:
+      onTextSelection:
+        - id: set_selection
+          type: SetState
+          params:
+            selected_text:
+              _event: selectedText

package/dist/blocks/Html/tests.yaml

@@ -0,0 +1,75 @@
+# 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: Html
+- id: properties.html
+  type: Html
+  properties:
+    html: |
+      <div style="background: green; padding: 10px;">Content green background</div>
+- id: properties.style
+  type: Html
+  properties:
+    style:
+      background: yellow
+      padding: 10
+    html: |
+      <div>properties.style yellow background</div>
+- id: properties.html-styled
+  type: Html
+  properties:
+    style:
+      background: yellow
+      padding: 10
+    html: |
+      <div style="background: green; padding: 10px;">Content green background and properties.style yellow background</div>
+- id: properties.html-iframe
+  type: Html
+  properties:
+    html: |
+      An iframe:
+      <iframe width="560" height="315" src="https://www.youtube.com/embed/7N7GWdlQJlU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+- id: properties.html-bad-code
+  type: Html
+  properties:
+    html: |
+      <h1>Link<h1>
+
+      <a href="https://lowdefy.com">Lowdefy link</a>
+
+      <font size="+10">Description</font>
+
+      <h1>Bad HTML</h1>
+
+      <div onmouseover="alert('alpha')">
+        <a href="javascript:alert('bravo')">delta</a>
+        <img src="x" onerror="alert('charlie')">
+        <iframe src="javascript:alert('delta')"></iframe>
+        <math>
+          <mi xlink:href="data:x,<script>alert('echo')</script>"></mi>
+        </math>
+      </div>
+      <script>
+        alert('script tag');
+      </script>
+
+- id: properties.html is number 0
+  type: Html
+  properties:
+    html: 0
+- id: properties.html is boolean false
+  type: Html
+  properties:
+    html: false