@lowdefy/blocks-markdown 5.6.0 → 6.0.0

package/dist/blocks/Markdown/gallery.yaml

@@ -0,0 +1,313 @@
+# 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: Headings
+  fullWidth: true
+  blocks:
+    - id: headings_all
+      type: Markdown
+      properties:
+        content: |
+          # Heading 1
+          ## Heading 2
+          ### Heading 3
+          #### Heading 4
+          ##### Heading 5
+          ###### Heading 6
+
+- title: Bold, Italic and Strikethrough
+  fullWidth: true
+  blocks:
+    - id: format_bold
+      type: Markdown
+      properties:
+        content: |
+          **This entire line is bold text.**
+
+          Use double asterisks for **bold words** in a sentence.
+    - id: format_italic
+      type: Markdown
+      properties:
+        content: |
+          *This entire line is italic text.*
+
+          Use single asterisks for *italic words* in a sentence.
+    - id: format_strikethrough
+      type: Markdown
+      properties:
+        content: |
+          ~~This text has been removed.~~
+
+          The old price was ~~$99.99~~ and the new price is **$49.99**.
+    - id: format_combined
+      type: Markdown
+      properties:
+        content: |
+          Combine formatting: ***bold and italic***, **bold with ~~strikethrough~~**, and *italic with ~~strikethrough~~*.
+
+          You can also nest them: **This is bold, and *this part is bold italic*.**
+
+- title: Unordered Lists
+  fullWidth: true
+  blocks:
+    - id: list_unordered_simple
+      type: Markdown
+      properties:
+        content: |
+          - Apples
+          - Bananas
+          - Cherries
+          - Dates
+    - id: list_unordered_nested
+      type: Markdown
+      properties:
+        content: |
+          - Fruits
+            - Apples
+            - Bananas
+              - Cavendish
+              - Plantain
+            - Cherries
+          - Vegetables
+            - Carrots
+            - Peas
+
+- title: Ordered Lists
+  fullWidth: true
+  blocks:
+    - id: list_ordered_simple
+      type: Markdown
+      properties:
+        content: |
+          1. First step
+          2. Second step
+          3. Third step
+          4. Fourth step
+    - id: list_ordered_nested
+      type: Markdown
+      properties:
+        content: |
+          1. Plan the project
+             1. Define requirements
+             2. Create timeline
+          2. Build the app
+             1. Set up environment
+             2. Write configuration
+             3. Test locally
+          3. Deploy to production
+
+- title: Task Lists
+  fullWidth: true
+  blocks:
+    - id: task_list
+      type: Markdown
+      properties:
+        content: |
+          **Project Checklist:**
+
+          - [x] Set up repository
+          - [x] Install dependencies
+          - [x] Create lowdefy.yaml
+          - [ ] Add authentication
+          - [ ] Configure database
+          - [ ] Deploy to production
+
+- title: Inline Links
+  fullWidth: true
+  blocks:
+    - id: links_inline
+      type: Markdown
+      properties:
+        content: |
+          Visit [Lowdefy](https://lowdefy.com) for more information.
+
+          Check the [documentation](https://docs.lowdefy.com "Lowdefy Docs") with a tooltip title.
+
+          Auto-linked URL: https://lowdefy.com
+    - id: links_reference
+      type: Markdown
+      properties:
+        content: |
+          Reference-style links are useful for readability:
+
+          [Lowdefy][1] is a config-driven framework. Read the [docs][docs-link] to get started. See the [GitHub repo][2] for source code.
+
+          [1]: https://lowdefy.com
+          [docs-link]: https://docs.lowdefy.com
+          [2]: https://github.com/lowdefy/lowdefy
+
+- title: Images
+  fullWidth: true
+  blocks:
+    - id: image_basic
+      type: Markdown
+      properties:
+        content: |
+          An inline image:
+
+          ![Lowdefy Logo](/logo_example.png "Lowdefy Logo")
+
+          Images can also use reference-style links:
+
+          ![Alt text][logo]
+
+          [logo]: /logo_example.png
+
+- title: Blockquotes
+  fullWidth: true
+  blocks:
+    - id: quote_simple
+      type: Markdown
+      properties:
+        content: |
+          > Configuration is the new code. Define your entire application with simple, readable YAML.
+    - id: quote_with_formatting
+      type: Markdown
+      properties:
+        content: |
+          > **Important:** Blockquotes can contain other formatting.
+          >
+          > - Bullet points work inside quotes
+          > - So does **bold** and *italic* text
+          >
+          > They can span multiple paragraphs.
+    - id: quote_nested
+      type: Markdown
+      properties:
+        content: |
+          > This is a top-level quote.
+          >
+          > > This is a nested quote inside the first one.
+          > >
+          > > > And this is nested even deeper.
+
+- title: Horizontal Rules
+  fullWidth: true
+  blocks:
+    - id: hr_example
+      type: Markdown
+      properties:
+        content: |
+          Content above the first rule.
+
+          ---
+
+          Content between the rules. You can use three hyphens, asterisks, or underscores.
+
+          ***
+
+          Content after the second rule.
+
+          ___
+
+          Final content below.
+
+- title: Tables
+  fullWidth: true
+  blocks:
+    - id: table_basic
+      type: Markdown
+      properties:
+        content: |
+          | Property | Type | Default | Description |
+          | --- | --- | --- | --- |
+          | content | string | - | Markdown content to render |
+          | skipHtml | boolean | false | Skip rendering HTML in markdown |
+    - id: table_aligned
+      type: Markdown
+      properties:
+        content: |
+          | Left Aligned | Center Aligned | Right Aligned |
+          | :--- | :---: | ---: |
+          | Row 1 Col 1 | Row 1 Col 2 | $10.00 |
+          | Row 2 Col 1 | Row 2 Col 2 | $25.50 |
+          | Row 3 Col 1 | Row 3 Col 2 | $99.99 |
+          | **Total** | | **$135.49** |
+
+- title: Combined Content
+  fullWidth: true
+  blocks:
+    - id: combined_document
+      type: Markdown
+      properties:
+        content: |
+          ## Project Overview
+
+          This document demonstrates how multiple markdown elements combine into a cohesive document.
+
+          ### Features
+
+          The application supports the following capabilities:
+
+          | Feature | Status | Priority |
+          | --- | --- | --- |
+          | Authentication | Complete | High |
+          | Dashboard | In Progress | High |
+          | Reports | Planned | Medium |
+
+          ### Getting Started
+
+          1. Clone the repository
+          2. Install dependencies
+          3. Configure your `lowdefy.yaml` file
+
+          > **Note:** Make sure you have Node.js 18 or later installed before starting.
+
+          For more details, visit the [documentation](https://docs.lowdefy.com).
+
+          ---
+
+          *Last updated: March 2026*
+
+- title: skipHtml Property
+  fullWidth: true
+  blocks:
+    - id: skip_html_false
+      type: Markdown
+      properties:
+        content: |
+          **skipHtml: false (default)**
+
+          HTML tags like <b>bold</b> are escaped and shown as text: `<b>bold</b>`
+
+          The Markdown block escapes HTML by default for security.
+    - id: skip_html_true
+      type: Markdown
+      properties:
+        skipHtml: true
+        content: |
+          **skipHtml: true**
+
+          With skipHtml enabled, any HTML tags like <b>bold</b> or <div>divs</div> are completely removed from the output rather than being shown as escaped text.
+
+- title: Style Override
+  fullWidth: true
+  blocks:
+    - id: style_element
+      type: Markdown
+      style:
+        .element:
+          backgroundColor: var(--ant-color-primary-bg)
+          padding: 16
+          borderRadius: 8
+          border: 1px solid var(--ant-color-primary-border)
+      properties:
+        content: |
+          ### Styled Container
+
+          The `element` style key applies CSS to the outer wrapper div. Use it to add background colors, padding, borders, and other container-level styles.
+
+          - Custom background color
+          - Rounded corners
+          - Border styling

package/dist/blocks/Markdown/tests/Markdown.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: markdown
+type: Box
+
+blocks:
+  - id: markdown_basic
+    type: Markdown
+    properties:
+      content: Hello **world**
+
+  - id: markdown_heading
+    type: Markdown
+    properties:
+      content: '# Heading One'
+
+  - id: markdown_list
+    type: Markdown
+    properties:
+      content: |
+        - Item one
+        - Item two
+        - Item three
+
+  - id: markdown_link
+    type: Markdown
+    properties:
+      content: '[Lowdefy](https://lowdefy.com)'
+
+  - id: markdown_gfm_table
+    type: Markdown
+    properties:
+      content: |
+        | Col A | Col B |
+        | ----- | ----- |
+        | 1     | 2     |
+
+  - id: markdown_code
+    type: Markdown
+    properties:
+      content: 'Inline `code` here'
+
+  - id: markdown_empty
+    type: Markdown

package/dist/blocks/Markdown/tests.yaml

@@ -0,0 +1,162 @@
+# 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: Markdown
+- 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: Markdown
+  properties:
+    content: |
+      # One
+      ## Two
+      ### Three
+      #### Four
+      ##### Five
+      ###### Six
+    style:
+      border: '1px solid blue'
+- id: properties.content = table
+  type: Markdown
+  properties:
+    content: |
+      ### Table
+
+      | A | B | C |
+      |---:|:---:|:---|
+      | one | two | three |
+      | 123 | 345 | 34892 |
+      | true | false | none |
+
+- id: properties.skipHtml = false
+  type: Markdown
+  properties:
+    skipHtml: false
+    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.skipHtml = true
+  type: Markdown
+  properties:
+    skipHtml: true
+    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: Markdown
+  properties:
+    content: |
+      ### Code
+
+      Default
+      ```
+        <a href="">Default style</a>
+      ```
+
+      Html
+      ```html
+        <a href="">html style</a>
+      ```
+
+      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: Markdown
+  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>

package/dist/blocks/MarkdownWithCode/MarkdownWithCode.js

@@ -19,7 +19,6 @@ import { theme as antdTheme } from 'antd';
 import ReactMarkdown from 'react-markdown';
 import gfm from 'remark-gfm';
 import markdownStyles from '../../style.module.css';
-import codeblockStyles from '../../codeblock.module.css';
 // See https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/393 for esm issue.
 import { github, a11yDark } from 'react-syntax-highlighter/dist/cjs/styles/hljs/index.js';
 import javascript from 'react-syntax-highlighter/dist/cjs/languages/hljs/javascript.js';