@lowdefy/blocks-markdown 5.6.0 → 6.1.0

package/dist/blocks/MarkdownWithCode/gallery.yaml

@@ -0,0 +1,407 @@
+# 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: Inline Code
+  fullWidth: true
+  blocks:
+    - id: inline_basic
+      type: MarkdownWithCode
+      properties:
+        content: |
+          Use the `MarkdownWithCode` block to render code with syntax highlighting.
+
+          Set properties with `properties.content` and use backticks for `inline code`.
+    - id: inline_in_context
+      type: MarkdownWithCode
+      properties:
+        content: |
+          Install with `npm install lowdefy` or `pnpm add lowdefy`.
+
+          The config file is called `lowdefy.yaml` and lives in your project root.
+
+          Run `npx lowdefy@4 dev` to start the dev server on `http://localhost:3000`.
+
+- title: YAML
+  fullWidth: true
+  blocks:
+    - id: code_yaml
+      type: MarkdownWithCode
+      properties:
+        content: |
+          ```yaml
+          lowdefy: 4.0.0
+
+          pages:
+            - id: home
+              type: PageHeaderMenu
+              properties:
+                title: My Application
+              blocks:
+                - id: welcome_title
+                  type: Title
+                  properties:
+                    content: Welcome
+                    level: 2
+                - id: user_form
+                  type: Card
+                  properties:
+                    title: User Information
+                  blocks:
+                    - id: name_input
+                      type: TextInput
+                      properties:
+                        label:
+                          title: Full Name
+                    - id: email_input
+                      type: TextInput
+                      properties:
+                        label:
+                          title: Email Address
+                    - id: submit_button
+                      type: Button
+                      properties:
+                        title: Submit
+                        type: primary
+                      events:
+                        onClick:
+                          - id: validate
+                            type: Validate
+          ```
+
+- title: JavaScript
+  fullWidth: true
+  blocks:
+    - id: code_javascript
+      type: MarkdownWithCode
+      properties:
+        content: |
+          ```javascript
+          function buildConnections({ components, context }) {
+            const connections = components.connections ?? [];
+
+            connections.forEach((connection) => {
+              if (!connection.id) {
+                throw new Error('Connection id is missing.');
+              }
+              if (!connection.type) {
+                throw new Error(`Connection "${connection.id}" does not have a type.`);
+              }
+            });
+
+            return components;
+          }
+
+          export default buildConnections;
+          ```
+
+- title: JSON
+  fullWidth: true
+  blocks:
+    - id: code_json
+      type: MarkdownWithCode
+      properties:
+        content: |
+          ```json
+          {
+            "name": "@lowdefy/blocks-antd",
+            "version": "4.0.0",
+            "description": "Ant Design blocks for Lowdefy",
+            "main": "dist/index.js",
+            "types": [
+              {
+                "typeName": "Button",
+                "category": "display"
+              },
+              {
+                "typeName": "TextInput",
+                "category": "input"
+              },
+              {
+                "typeName": "Card",
+                "category": "container"
+              }
+            ],
+            "dependencies": {
+              "antd": "^6.0.0",
+              "react": "^19.0.0"
+            }
+          }
+          ```
+
+- title: Python
+  fullWidth: true
+  blocks:
+    - id: code_python
+      type: MarkdownWithCode
+      properties:
+        content: |
+          ```python
+          import json
+          from pathlib import Path
+
+
+          class ConfigLoader:
+              """Load and validate Lowdefy configuration files."""
+
+              def __init__(self, config_path: str):
+                  self.config_path = Path(config_path)
+                  self.config = {}
+
+              def load(self) -> dict:
+                  with open(self.config_path) as f:
+                      self.config = json.load(f)
+                  return self.config
+
+              def validate(self) -> bool:
+                  required_keys = ["lowdefy", "pages"]
+                  return all(key in self.config for key in required_keys)
+
+
+          if __name__ == "__main__":
+              loader = ConfigLoader("lowdefy.json")
+              config = loader.load()
+              print(f"Valid: {loader.validate()}")
+          ```
+
+- title: TypeScript
+  fullWidth: true
+  blocks:
+    - id: code_typescript
+      type: MarkdownWithCode
+      properties:
+        content: |
+          ```typescript
+          interface BlockMeta {
+            category: 'display' | 'input' | 'container' | 'list';
+            icons: string[];
+            styles: string[];
+          }
+
+          interface BlockComponent<P = Record<string, unknown>> {
+            blockId: string;
+            properties: P;
+            methods: {
+              setState: (state: Record<string, unknown>) => void;
+              triggerEvent: (event: { name: string }) => Promise<void>;
+            };
+          }
+
+          function createBlock<P>(
+            render: (props: BlockComponent<P>) => JSX.Element,
+            meta: BlockMeta
+          ): typeof render & { meta: BlockMeta } {
+            const block = render as typeof render & { meta: BlockMeta };
+            block.meta = meta;
+            return block;
+          }
+          ```
+
+- title: HTML and XML
+  fullWidth: true
+  blocks:
+    - id: code_html
+      type: MarkdownWithCode
+      properties:
+        content: |
+          ```html
+          <!DOCTYPE html>
+          <html lang="en">
+            <head>
+              <meta charset="UTF-8" />
+              <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+              <title>Lowdefy App</title>
+              <link rel="stylesheet" href="/styles.css" />
+            </head>
+            <body>
+              <div id="root">
+                <header class="app-header">
+                  <h1>My Application</h1>
+                  <nav>
+                    <a href="/dashboard">Dashboard</a>
+                    <a href="/settings">Settings</a>
+                  </nav>
+                </header>
+                <main class="content"></main>
+              </div>
+              <script src="/bundle.js"></script>
+            </body>
+          </html>
+          ```
+
+- title: Nunjucks Templates
+  fullWidth: true
+  blocks:
+    - id: code_nunjucks
+      type: MarkdownWithCode
+      properties:
+        content: |
+          ```nunjucks
+          {# Lowdefy docs page template #}
+          _ref:
+            path: templates/general.yaml.njk
+            vars:
+              pageId: {{ pageId }}
+              pageTitle: {{ pageTitle }}
+              section: {{ section }}
+              fullWidth: true
+              content:
+                - id: intro
+                  type: Markdown
+                  properties:
+                    content: |
+                      {{ description }}
+                {% for example in examples %}
+                - id: example_{{ loop.index }}
+                  type: {{ example.block_type }}
+                  properties:
+                    {{ example.properties | dump | safe }}
+                {% endfor %}
+          ```
+
+- title: Mixed Content with Code
+  fullWidth: true
+  blocks:
+    - id: mixed_tutorial
+      type: MarkdownWithCode
+      properties:
+        content: |
+          ## Building a Form with Lowdefy
+
+          Follow these steps to create a simple contact form.
+
+          ### 1. Create the Page
+
+          Start by defining a page in your `lowdefy.yaml`:
+
+          ```yaml
+          pages:
+            - id: contact
+              type: PageHeaderMenu
+              properties:
+                title: Contact Us
+          ```
+
+          ### 2. Add Form Fields
+
+          Add input blocks inside the page:
+
+          ```yaml
+              blocks:
+                - id: name
+                  type: TextInput
+                  properties:
+                    label:
+                      title: Your Name
+                - id: message
+                  type: TextArea
+                  properties:
+                    label:
+                      title: Message
+          ```
+
+          ### 3. Handle Submission
+
+          Use an action to process the form data:
+
+          ```javascript
+          // The _state operator accesses form values
+          // _state.name returns the value of the "name" TextInput
+          // _state.message returns the value of the "message" TextArea
+          ```
+
+          > **Tip:** Use the `Validate` action before `Request` to ensure all required fields are filled in.
+
+          For the complete guide, see the [Lowdefy documentation](https://docs.lowdefy.com).
+
+- title: Multiple Languages Side by Side
+  fullWidth: true
+  blocks:
+    - id: multi_language
+      type: MarkdownWithCode
+      properties:
+        content: |
+          ### Configuration vs Code
+
+          The same logic expressed in YAML config and JavaScript:
+
+          **Lowdefy YAML:**
+          ```yaml
+          - id: greeting
+            type: Paragraph
+            properties:
+              content:
+                _if:
+                  test:
+                    _state: logged_in
+                  then:
+                    _string.concat:
+                      - 'Welcome back, '
+                      - _state: username
+                      - '!'
+                  else: Please log in to continue.
+          ```
+
+          **Equivalent JavaScript:**
+          ```javascript
+          function getGreeting(state) {
+            if (state.logged_in) {
+              return `Welcome back, ${state.username}!`;
+            }
+            return 'Please log in to continue.';
+          }
+          ```
+
+- title: skipHtml Property
+  fullWidth: true
+  blocks:
+    - id: skip_html_false
+      type: MarkdownWithCode
+      properties:
+        content: |
+          **skipHtml: false (default)**
+
+          HTML tags like `<b>` are escaped and shown as text in the output. This is the default, safe behavior.
+    - id: skip_html_true
+      type: MarkdownWithCode
+      properties:
+        skipHtml: true
+        content: |
+          **skipHtml: true**
+
+          With skipHtml enabled, any HTML tags like <b>bold</b> are completely removed from the output rather than shown as escaped text.
+
+- title: Style Override
+  fullWidth: true
+  blocks:
+    - id: style_element
+      type: MarkdownWithCode
+      style:
+        .element:
+          backgroundColor: var(--ant-color-success-bg)
+          padding: 16
+          borderRadius: 8
+          border: 1px solid var(--ant-color-success-border)
+      properties:
+        content: |
+          ### Styled Code Container
+
+          The `element` style key wraps the entire block:
+
+          ```yaml
+          style:
+            .element:
+              backgroundColor: var(--ant-color-success-bg)
+              padding: 16
+              borderRadius: 8
+          ```

package/dist/blocks/MarkdownWithCode/tests/MarkdownWithCode.e2e.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: markdownwithcode
+type: Box
+
+blocks:
+  - id: markdownwithcode_basic
+    type: MarkdownWithCode
+    properties:
+      content: Hello **world**
+
+  - id: markdownwithcode_codeblock
+    type: MarkdownWithCode
+    properties:
+      content: |
+        ```javascript
+        const x = 1;
+        ```
+
+  - id: markdownwithcode_inline
+    type: MarkdownWithCode
+    properties:
+      content: 'Use `console.log` for debugging'

package/dist/blocks/MarkdownWithCode/tests.yaml

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

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/blocks-markdown",
-  "version": "5.6.0",
+  "version": "6.1.0",
   "license": "Apache-2.0",
   "description": "Lowdefy markdown blocks.",
   "homepage": "https://lowdefy.com",
@@ -40,8 +40,8 @@
     "dist/*"
   ],
   "dependencies": {
-    "@lowdefy/block-utils": "5.6.0",
-    "dompurify": "3.2.4",
+    "@lowdefy/block-utils": "6.1.0",
+    "dompurify": "3.4.13",
     "react-markdown": "8.0.7",
     "react-syntax-highlighter": "15.5.0",
     "rehype-raw": "6.1.1",
@@ -53,11 +53,11 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@lowdefy/block-dev-e2e": "5.6.0",
-    "@lowdefy/e2e-utils": "5.6.0",
-    "@playwright/test": "1.50.1",
-    "@swc/cli": "0.8.0",
-    "@swc/core": "1.15.18",
+    "@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",
     "copyfiles": "2.4.1"
   },
   "publishConfig": {
@@ -66,7 +66,7 @@
   "scripts": {
     "build": "swc src --out-dir dist --config-file ../../../../.swcrc --cli-config-file ../../../../.swc-cli.json && pnpm copyfiles",
     "clean": "rm -rf dist",
-    "copyfiles": "copyfiles -u 1 \"./src/**/*\" dist -e \"./src/**/*.js\" -e \"./src/**/*.yaml\" -e \"./src/**/*.snap\"",
+    "copyfiles": "copyfiles -u 1 \"./src/**/*\" dist -e \"./src/**/*.js\" -e \"./src/**/*.snap\"",
     "e2e": "playwright test --config e2e/playwright.config.js",
     "e2e:ui": "playwright test --config e2e/playwright.config.js --ui"
   }