@lowdefy/blocks-markdown 5.5.1 → 6.0.0

package/dist/blocks/DangerousMarkdown/gallery.yaml

@@ -0,0 +1,229 @@
+# 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 Markdown
+  blocks:
+    - id: basic_text
+      type: DangerousMarkdown
+      properties:
+        content: |
+          ## DangerousMarkdown
+
+          This block renders markdown **and** allows embedded HTML to be rendered inline.
+
+          Regular markdown features like **bold**, *italic*, ~~strikethrough~~, and [links](https://lowdefy.com) all work as expected.
+
+          - Unordered list item
+          - Another item
+
+          1. Ordered item one
+          2. Ordered item two
+
+- title: Inline HTML Styling
+  blocks:
+    - id: html_colored_text
+      type: DangerousMarkdown
+      properties:
+        content: |
+          Text with <span style="color: #1890ff; font-weight: bold;">blue bold</span> and <span style="color: #52c41a;">green</span> and <span style="color: #ff4d4f; text-decoration: underline;">red underlined</span> inline HTML.
+
+          Use <span style="background-color: #ffffb8; padding: 0 4px;">highlighted text</span> to draw attention to specific words.
+
+          Mix markdown **bold** with <span style="font-style: italic; color: #722ed1;">HTML italic purple</span> seamlessly.
+    - id: html_styled_div
+      type: DangerousMarkdown
+      properties:
+        content: |
+          <div style="padding: 16px; background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%); border-radius: 8px; border: 1px solid #91d5ff;">
+            <strong style="font-size: 16px;">Styled Container</strong>
+            <p style="margin: 8px 0 0 0; color: #0050b3;">HTML divs with gradients, borders, and custom spacing render inside DangerousMarkdown.</p>
+          </div>
+
+- title: Mixed Markdown and HTML
+  fullWidth: true
+  blocks:
+    - id: mixed_content
+      type: DangerousMarkdown
+      properties:
+        content: |
+          ## Project Status Report
+
+          Here is a summary with **markdown headings** and HTML elements combined:
+
+          <div style="display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0;">
+            <div style="flex: 1; min-width: 150px; padding: 12px; background: #f6ffed; border: 1px solid #b7eb8f; border-radius: 6px; text-align: center;">
+              <div style="font-size: 24px; font-weight: bold; color: #52c41a;">12</div>
+              <div style="color: #389e0d;">Completed</div>
+            </div>
+            <div style="flex: 1; min-width: 150px; padding: 12px; background: #e6f7ff; border: 1px solid #91d5ff; border-radius: 6px; text-align: center;">
+              <div style="font-size: 24px; font-weight: bold; color: #1890ff;">5</div>
+              <div style="color: #096dd9;">In Progress</div>
+            </div>
+            <div style="flex: 1; min-width: 150px; padding: 12px; background: #fff7e6; border: 1px solid #ffd591; border-radius: 6px; text-align: center;">
+              <div style="font-size: 24px; font-weight: bold; color: #fa8c16;">3</div>
+              <div style="color: #d48806;">Pending</div>
+            </div>
+          </div>
+
+          > **Note:** The cards above use HTML `div` elements with inline styles for layout.
+
+          Regular markdown continues below the HTML blocks without issue.
+
+- title: HTML Tables with Styling
+  fullWidth: true
+  blocks:
+    - id: html_table_styled
+      type: DangerousMarkdown
+      properties:
+        content: |
+          <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
+            <thead>
+              <tr style="background: #fafafa;">
+                <th style="border: 1px solid #d9d9d9; padding: 10px 16px; text-align: left;">Feature</th>
+                <th style="border: 1px solid #d9d9d9; padding: 10px 16px; text-align: left;">Markdown</th>
+                <th style="border: 1px solid #d9d9d9; padding: 10px 16px; text-align: left;">DangerousMarkdown</th>
+                <th style="border: 1px solid #d9d9d9; padding: 10px 16px; text-align: left;">MarkdownWithCode</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td style="border: 1px solid #d9d9d9; padding: 10px 16px;">Basic markdown</td>
+                <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #52c41a;">Yes</td>
+                <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #52c41a;">Yes</td>
+                <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #52c41a;">Yes</td>
+              </tr>
+              <tr style="background: #fafafa;">
+                <td style="border: 1px solid #d9d9d9; padding: 10px 16px;">Inline HTML</td>
+                <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #ff4d4f;">No</td>
+                <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #52c41a;">Yes</td>
+                <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #ff4d4f;">No</td>
+              </tr>
+              <tr>
+                <td style="border: 1px solid #d9d9d9; padding: 10px 16px;">Code highlighting</td>
+                <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #ff4d4f;">No</td>
+                <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #ff4d4f;">No</td>
+                <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #52c41a;">Yes</td>
+              </tr>
+              <tr style="background: #fafafa;">
+                <td style="border: 1px solid #d9d9d9; padding: 10px 16px;">DOMPurify sanitization</td>
+                <td style="border: 1px solid #d9d9d9; padding: 10px 16px;">N/A</td>
+                <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #52c41a;">Yes</td>
+                <td style="border: 1px solid #d9d9d9; padding: 10px 16px;">N/A</td>
+              </tr>
+            </tbody>
+          </table>
+
+- title: Callout Boxes
+  blocks:
+    - id: callout_info
+      type: DangerousMarkdown
+      properties:
+        content: |
+          <div style="padding: 12px 16px; background-color: #e6f7ff; border-left: 4px solid #1890ff; border-radius: 0 6px 6px 0; margin-bottom: 8px;">
+            <strong>Info:</strong> This is an informational callout created with HTML inside DangerousMarkdown.
+          </div>
+    - id: callout_success
+      type: DangerousMarkdown
+      properties:
+        content: |
+          <div style="padding: 12px 16px; background-color: #f6ffed; border-left: 4px solid #52c41a; border-radius: 0 6px 6px 0; margin-bottom: 8px;">
+            <strong>Success:</strong> Your deployment completed without errors.
+          </div>
+    - id: callout_warning
+      type: DangerousMarkdown
+      properties:
+        content: |
+          <div style="padding: 12px 16px; background-color: #fffbe6; border-left: 4px solid #faad14; border-radius: 0 6px 6px 0; margin-bottom: 8px;">
+            <strong>Warning:</strong> Only render trusted content with DangerousMarkdown. Never pass user input directly.
+          </div>
+    - id: callout_error
+      type: DangerousMarkdown
+      properties:
+        content: |
+          <div style="padding: 12px 16px; background-color: #fff1f0; border-left: 4px solid #ff4d4f; border-radius: 0 6px 6px 0;">
+            <strong>Error:</strong> Connection to the database failed. Check your credentials and try again.
+          </div>
+
+- title: Badge-like Elements
+  blocks:
+    - id: badges_status
+      type: DangerousMarkdown
+      properties:
+        content: |
+          **Deployment Status:**
+
+          <span style="display: inline-block; padding: 2px 10px; background: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; border-radius: 10px; font-size: 12px; margin-right: 6px;">Active</span>
+          <span style="display: inline-block; padding: 2px 10px; background: #fff7e6; color: #fa8c16; border: 1px solid #ffd591; border-radius: 10px; font-size: 12px; margin-right: 6px;">Pending</span>
+          <span style="display: inline-block; padding: 2px 10px; background: #fff1f0; color: #ff4d4f; border: 1px solid #ffa39e; border-radius: 10px; font-size: 12px; margin-right: 6px;">Failed</span>
+          <span style="display: inline-block; padding: 2px 10px; background: #f0f0f0; color: #8c8c8c; border: 1px solid #d9d9d9; border-radius: 10px; font-size: 12px;">Archived</span>
+    - id: badges_tags
+      type: DangerousMarkdown
+      properties:
+        content: |
+          **Technology Stack:**
+
+          <span style="display: inline-block; padding: 3px 10px; background: #e6f7ff; color: #096dd9; border-radius: 4px; font-size: 12px; font-weight: 500; margin: 2px 4px 2px 0;">React</span>
+          <span style="display: inline-block; padding: 3px 10px; background: #f9f0ff; color: #531dab; border-radius: 4px; font-size: 12px; font-weight: 500; margin: 2px 4px 2px 0;">Next.js</span>
+          <span style="display: inline-block; padding: 3px 10px; background: #fff0f6; color: #c41d7f; border-radius: 4px; font-size: 12px; font-weight: 500; margin: 2px 4px 2px 0;">MongoDB</span>
+          <span style="display: inline-block; padding: 3px 10px; background: #fcffe6; color: #5b8c00; border-radius: 4px; font-size: 12px; font-weight: 500; margin: 2px 4px 2px 0;">YAML</span>
+
+- title: DOMPurifyOptions
+  blocks:
+    - id: dompurify_default
+      type: DangerousMarkdown
+      properties:
+        content: |
+          By default, DOMPurify removes dangerous elements like `<script>` and `<iframe>`.
+
+          This `<iframe>` tag will **not** render: <iframe src="https://example.com"></iframe>
+
+          Standard HTML like <b>bold</b> and <em>emphasis</em> still works.
+    - id: dompurify_custom
+      type: DangerousMarkdown
+      properties:
+        DOMPurifyOptions:
+          ALLOWED_TAGS:
+            - b
+            - i
+            - em
+            - strong
+            - p
+            - br
+          ALLOWED_ATTR: []
+        content: |
+          With restricted DOMPurifyOptions, only specific tags are allowed.
+
+          <b>Bold works</b> and <i>italic works</i>.
+
+          But <span style="color: red;">styled spans</span> are stripped because `span` is not in ALLOWED_TAGS and `style` is not in ALLOWED_ATTR.
+
+- title: Style Override
+  blocks:
+    - id: style_element
+      type: DangerousMarkdown
+      style:
+        .element:
+          backgroundColor: '#fff7e6'
+          padding: 16
+          borderRadius: 8
+          border: '1px solid #ffd591'
+      properties:
+        content: |
+          ### Styled Container
+
+          The `element` style key applies CSS to the outer wrapper `div`.
+
+          <div style="padding: 8px 12px; background: white; border-radius: 4px; border: 1px solid #ffe58f;">
+            Combine <b>container styles</b> with <b>inline HTML styles</b> for rich layouts.
+          </div>

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

@@ -0,0 +1,34 @@
+# 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: dangerousmarkdown
+type: Box
+
+blocks:
+  - id: dangerousmarkdown_basic
+    type: DangerousMarkdown
+    properties:
+      content: Hello **dangerous** world
+
+  - id: dangerousmarkdown_html
+    type: DangerousMarkdown
+    properties:
+      content: '<div class="custom-div">HTML content</div>'
+
+  - id: dangerousmarkdown_mixed
+    type: DangerousMarkdown
+    properties:
+      content: |
+        # Heading
+        <span style="color: red;">Red text</span>

package/dist/blocks/DangerousMarkdown/tests.yaml

@@ -0,0 +1,149 @@
+# 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: DangerousMarkdown
+- id: properties.content
+  type: Box
+  properties:
+    content: |
+      # One Heading
+
+      A paragraph with *emphasis* and **strong importance**.
+
+      > A block quote with ~strikethrough~ and a URL: https://reactjs.org.
+
+      #### Link
+
+      [A link to Lowdefy](https://lowdefy.com)
+
+      # Two
+
+      * Lists
+      * [ ] todo
+      * [x] done
+
+      A table:
+
+      | a | b |
+      | - | - |
+
+- id: properties.style and headings
+  type: DangerousMarkdown
+  properties:
+    content: |
+      # One
+      ## Two
+      ### Three
+      #### Four
+      ##### Five
+      ###### Six
+    style:
+      border: '1px solid blue'
+- id: properties.content = table
+  type: DangerousMarkdown
+  properties:
+    content: |
+      ### Table
+
+      | A | B | C |
+      |---:|:---:|:---|
+      | one | two | three |
+      | 123 | 345 | 34892 |
+      | true | false | none |
+
+- id: properties.content DangerousHtml
+  type: DangerousMarkdown
+  properties:
+    content: |
+      ### Link
+
+      <a href="https://lowdefy.com">Lowdefy link</a>
+
+      <font size="+10">Description</font>
+
+      ### Bad HTML
+
+      <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.content with code
+  type: DangerousMarkdown
+  properties:
+    content: |
+      ### Code
+
+      Default
+      ```
+        <a href="https://lowdefy.com">Default style</a>
+      ```
+
+      Html
+      ```html
+        <a href="">html style</a>
+        <script>
+          alert('script tag');
+        </script>
+      ```
+
+      Json
+      ```json
+        {
+          "obj": "one",
+          "list": [
+            1,
+            2
+          ]
+        }
+      ```
+
+      Bad HTML
+      ```html
+      <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-iframe
+  type: DangerousMarkdown
+  properties:
+    content: |
+      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: DangerousMarkdown
+  properties:
+    DOMPurifyOptions:
+      ADD_TAGS:
+        - iframe
+    content: |
+      ## 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>