@lowdefy/docs-content 0.0.0-experimental-20260710073520

package/content/input-blocks/paragraphinput.md

@@ -0,0 +1,1664 @@
+# ParagraphInput
+
+Editable paragraph text with copyable and ellipsis support.
+
+```yaml
+- id: basic_default
+  type: ParagraphInput
+  properties:
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          basic_default: Click the edit icon to start editing this paragraph. Changes are
+            saved when you press Enter or click away.
+- id: basic_editable_object
+  type: ParagraphInput
+  properties:
+    editable: {}
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          basic_editable_object: This paragraph uses an editable object configuration with defaults.
+- id: basic_not_editable
+  type: ParagraphInput
+  properties:
+    editable: false
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          basic_not_editable: This paragraph has editing explicitly disabled and cannot be
+            modified.
+- id: basic_empty
+  type: ParagraphInput
+  properties:
+    editable: true
+- id: basic_long
+  type: ParagraphInput
+  properties:
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          basic_long: This is a longer paragraph to demonstrate how ParagraphInput handles
+            multi-line content. When you click the edit icon, a text area
+            appears allowing you to modify all of the text. The editable
+            paragraph is useful for inline content editing scenarios where users
+            should be able to quickly update descriptive text without navigating
+            to a separate form.
+```
+
+```yaml
+- id: tooltip_short
+  type: ParagraphInput
+  properties:
+    editable:
+      tooltip: Edit
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          tooltip_short: Hover over the edit icon to see a short tooltip.
+- id: tooltip_descriptive
+  type: ParagraphInput
+  properties:
+    editable:
+      tooltip: Click to edit this paragraph content
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          tooltip_descriptive: Hover over the edit icon to see a descriptive tooltip.
+- id: tooltip_instructional
+  type: ParagraphInput
+  properties:
+    editable:
+      tooltip: Double-click or press Enter to save changes
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          tooltip_instructional: Tooltip with editing instructions.
+```
+
+```yaml
+- id: icon_highlight
+  type: ParagraphInput
+  properties:
+    editable:
+      icon: AiOutlineHighlight
+      tooltip: Highlight to edit
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          icon_highlight: This paragraph uses a highlight icon instead of the default edit
+            icon.
+- id: icon_form
+  type: ParagraphInput
+  properties:
+    editable:
+      icon: AiOutlineForm
+      tooltip: Open editor
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          icon_form: Form edit icon on this paragraph.
+- id: icon_edit
+  type: ParagraphInput
+  properties:
+    editable:
+      icon: AiOutlineEdit
+      tooltip: Edit paragraph
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          icon_edit: Explicit edit icon with tooltip.
+- id: icon_custom_color
+  type: ParagraphInput
+  properties:
+    editable:
+      icon:
+        name: AiOutlineEdit
+        color: "#1677ff"
+      tooltip: Edit in blue
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          icon_custom_color: Custom colored edit icon.
+```
+
+```yaml
+- id: maxlen_20
+  type: ParagraphInput
+  properties:
+    editable:
+      maxLength: 20
+      tooltip: Limited to 20 characters
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          maxlen_20: Max 20 characters.
+- id: maxlen_50
+  type: ParagraphInput
+  properties:
+    editable:
+      maxLength: 50
+      tooltip: Max 50 characters
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          maxlen_50: This input is limited to 50 characters when editing.
+- id: maxlen_100
+  type: ParagraphInput
+  properties:
+    editable:
+      maxLength: 100
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          maxlen_100: Limited to 100 characters when editing.
+- id: maxlen_200
+  type: ParagraphInput
+  properties:
+    editable:
+      maxLength: 200
+      tooltip: Limited to 200 characters
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          maxlen_200: This paragraph allows up to 200 characters. It provides ample space
+            for short descriptions while still enforcing a reasonable limit.
+```
+
+```yaml
+- id: autosize_true
+  type: ParagraphInput
+  properties:
+    editable:
+      autoSize: true
+      tooltip: Auto-sizing text area
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          autosize_true: This paragraph uses autoSize true so the text area automatically
+            grows to fit the content when editing. Try clicking the edit icon to
+            see the text area expand.
+- id: autosize_min_max
+  type: ParagraphInput
+  properties:
+    editable:
+      autoSize:
+        minRows: 2
+        maxRows: 6
+      tooltip: 2-6 rows auto-size
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          autosize_min_max: AutoSize with minimum 2 rows and maximum 6 rows. The text area
+            will start at 2 rows and grow up to 6 rows as you type more content.
+- id: autosize_min_only
+  type: ParagraphInput
+  properties:
+    editable:
+      autoSize:
+        minRows: 3
+      tooltip: Minimum 3 rows
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          autosize_min_only: AutoSize with a minimum of 3 rows. The text area will always
+            be at least 3 rows tall.
+- id: autosize_max_only
+  type: ParagraphInput
+  properties:
+    editable:
+      autoSize:
+        maxRows: 4
+      tooltip: Maximum 4 rows
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          autosize_max_only: AutoSize with a maximum of 4 rows. Content beyond 4 rows will scroll.
+```
+
+```yaml
+- id: editing_true
+  type: ParagraphInput
+  properties:
+    editable:
+      editing: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          editing_true: This paragraph starts in editing mode immediately.
+- id: editing_false
+  type: ParagraphInput
+  properties:
+    editable:
+      editing: false
+      tooltip: Click to start editing
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          editing_false: This paragraph starts in display mode. Click the icon to edit.
+```
+
+```yaml
+- id: editable_full
+  type: ParagraphInput
+  properties:
+    editable:
+      icon: AiOutlineEdit
+      tooltip: Edit this paragraph
+      maxLength: 150
+      autoSize:
+        minRows: 2
+        maxRows: 8
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          editable_full: Fully configured editable paragraph with icon, tooltip,
+            maxLength, and autoSize.
+- id: editable_icon_tooltip_max
+  type: ParagraphInput
+  properties:
+    editable:
+      icon: AiOutlineHighlight
+      tooltip: Highlight to edit (max 100 chars)
+      maxLength: 100
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          editable_icon_tooltip_max: Custom icon with tooltip and character limit.
+- id: editable_autosize_maxlen
+  type: ParagraphInput
+  properties:
+    editable:
+      autoSize: true
+      maxLength: 250
+      tooltip: Auto-sizing with 250 char limit
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          editable_autosize_maxlen: Auto-sizing text area with a 250 character limit. This
+            is useful for description fields where you want the input to be
+            comfortable but bounded.
+```
+
+```yaml
+- id: type_default
+  type: ParagraphInput
+  properties:
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          type_default: Default type paragraph text. This is the standard appearance.
+- id: type_secondary
+  type: ParagraphInput
+  properties:
+    type: secondary
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          type_secondary: Secondary type paragraph text. Used for less prominent content.
+- id: type_success
+  type: ParagraphInput
+  properties:
+    type: success
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          type_success: Success type paragraph text. Indicates a positive outcome or valid
+            state.
+- id: type_warning
+  type: ParagraphInput
+  properties:
+    type: warning
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          type_warning: Warning type paragraph text. Draws attention to potential issues.
+- id: type_danger
+  type: ParagraphInput
+  properties:
+    type: danger
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          type_danger: Danger type paragraph text. Highlights errors or destructive
+            information.
+```
+
+```yaml
+- id: style_strong
+  type: ParagraphInput
+  properties:
+    strong: true
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          style_strong: Strong (bold) paragraph text.
+- id: style_italic
+  type: ParagraphInput
+  properties:
+    italic: true
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          style_italic: Italic paragraph text.
+- id: style_underline
+  type: ParagraphInput
+  properties:
+    underline: true
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          style_underline: Underlined paragraph text.
+- id: style_delete
+  type: ParagraphInput
+  properties:
+    delete: true
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          style_delete: Deleted (strikethrough) paragraph text.
+- id: style_mark
+  type: ParagraphInput
+  properties:
+    mark: true
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          style_mark: Marked (highlighted) paragraph text.
+```
+
+```yaml
+- id: combo_strong_italic
+  type: ParagraphInput
+  properties:
+    strong: true
+    italic: true
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          combo_strong_italic: Strong and italic combined paragraph.
+- id: combo_underline_mark
+  type: ParagraphInput
+  properties:
+    underline: true
+    mark: true
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          combo_underline_mark: Underline and mark combined paragraph.
+- id: combo_strong_underline
+  type: ParagraphInput
+  properties:
+    strong: true
+    underline: true
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          combo_strong_underline: Strong and underline combined paragraph.
+- id: combo_strong_italic_underline
+  type: ParagraphInput
+  properties:
+    strong: true
+    italic: true
+    underline: true
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          combo_strong_italic_underline: Strong, italic, and underline combined paragraph.
+- id: combo_all_styles
+  type: ParagraphInput
+  properties:
+    strong: true
+    italic: true
+    underline: true
+    mark: true
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          combo_all_styles: All text styles applied together.
+```
+
+```yaml
+- id: type_success_strong
+  type: ParagraphInput
+  properties:
+    type: success
+    strong: true
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          type_success_strong: Success type with strong (bold) styling.
+- id: type_warning_italic
+  type: ParagraphInput
+  properties:
+    type: warning
+    italic: true
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          type_warning_italic: Warning type with italic styling.
+- id: type_danger_underline
+  type: ParagraphInput
+  properties:
+    type: danger
+    underline: true
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          type_danger_underline: Danger type with underline styling.
+- id: type_secondary_mark
+  type: ParagraphInput
+  properties:
+    type: secondary
+    mark: true
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          type_secondary_mark: Secondary type with mark (highlight) styling.
+- id: type_success_strong_italic
+  type: ParagraphInput
+  properties:
+    type: success
+    strong: true
+    italic: true
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          type_success_strong_italic: Success type with strong and italic styles combined.
+```
+
+```yaml
+- id: copyable_true
+  type: ParagraphInput
+  properties:
+    copyable: true
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          copyable_true: Click the copy icon to copy this paragraph text to your clipboard.
+- id: copyable_false
+  type: ParagraphInput
+  properties:
+    copyable: false
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          copyable_false: This paragraph does not have a copy button.
+```
+
+```yaml
+- id: copyable_text_different
+  type: ParagraphInput
+  properties:
+    copyable:
+      text: This is the custom copied text, not the displayed text.
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          copyable_text_different: Displayed text differs from copied text.
+- id: copyable_text_url
+  type: ParagraphInput
+  properties:
+    copyable:
+      text: https://lowdefy.com
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          copyable_text_url: Click copy to get a URL instead of this visible text.
+- id: copyable_text_code
+  type: ParagraphInput
+  properties:
+    copyable:
+      text: const greeting = "Hello, World!";
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          copyable_text_code: Copy this block to get a code snippet.
+```
+
+```yaml
+- id: copyable_tooltips_array
+  type: ParagraphInput
+  properties:
+    copyable:
+      tooltips:
+        - Click to copy
+        - Copied!
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          copyable_tooltips_array: Custom tooltips before and after copying.
+- id: copyable_tooltips_single
+  type: ParagraphInput
+  properties:
+    copyable:
+      tooltips: Copy this paragraph
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          copyable_tooltips_single: Single tooltip string for copy action.
+- id: copyable_tooltips_descriptive
+  type: ParagraphInput
+  properties:
+    copyable:
+      tooltips:
+        - Copy paragraph to clipboard
+        - Successfully copied to clipboard!
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          copyable_tooltips_descriptive: Descriptive copy tooltips for user guidance.
+```
+
+```yaml
+- id: copyable_icon_single
+  type: ParagraphInput
+  properties:
+    copyable:
+      icon: AiOutlineSnippets
+      tooltips:
+        - Copy snippet
+        - Snippet copied!
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          copyable_icon_single: Custom copy icon on this paragraph.
+- id: copyable_icon_array
+  type: ParagraphInput
+  properties:
+    copyable:
+      icon:
+        - AiOutlineCopy
+        - AiOutlineCheck
+      tooltips:
+        - Copy text
+        - Text copied!
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          copyable_icon_array: Different icons before and after copying.
+- id: copyable_icon_colored
+  type: ParagraphInput
+  properties:
+    copyable:
+      icon:
+        name: AiOutlineCopy
+        color: "#1677ff"
+      tooltips:
+        - Copy
+        - Done!
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          copyable_icon_colored: Colored copy icon.
+```
+
+```yaml
+- id: copyable_full
+  type: ParagraphInput
+  properties:
+    copyable:
+      text: Custom text for clipboard
+      icon:
+        - AiOutlineCopy
+        - AiOutlineCheck
+      tooltips:
+        - Copy custom text
+        - Custom text copied!
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          copyable_full: Fully configured copyable paragraph.
+```
+
+```yaml
+- id: ellipsis_true
+  type: ParagraphInput
+  properties:
+    ellipsis: true
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          ellipsis_true: This is a very long paragraph that should be truncated with an
+            ellipsis when it overflows a single line. The text continues beyond
+            the visible area and the ellipsis indicator will show that there is
+            more content available. This demonstrates the basic boolean ellipsis
+            behavior where the text is clipped at one line by default.
+- id: ellipsis_false
+  type: ParagraphInput
+  properties:
+    ellipsis: false
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          ellipsis_false: This paragraph has ellipsis disabled and will display all text
+            regardless of length. The content will wrap naturally across
+            multiple lines without any truncation applied.
+```
+
+```yaml
+- id: ellipsis_rows_1
+  type: ParagraphInput
+  properties:
+    ellipsis:
+      rows: 1
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          ellipsis_rows_1: This paragraph is limited to 1 row. Any text beyond the first
+            line will be hidden and replaced with an ellipsis indicator. This
+            demonstrates row-limited truncation for compact paragraph displays
+            in space-constrained layouts.
+- id: ellipsis_rows_2
+  type: ParagraphInput
+  properties:
+    ellipsis:
+      rows: 2
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          ellipsis_rows_2: This paragraph is limited to 2 rows. The text will display
+            across two lines before being truncated with an ellipsis. This is
+            useful for paragraph previews where you want to show a brief excerpt
+            of longer content. Additional text beyond two lines is hidden from
+            view.
+- id: ellipsis_rows_3
+  type: ParagraphInput
+  properties:
+    ellipsis:
+      rows: 3
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          ellipsis_rows_3: This paragraph is limited to 3 rows. It allows more content to
+            be visible compared to fewer rows, but still provides truncation for
+            very long paragraphs. This setting is a good balance between showing
+            enough content for context while keeping the layout compact. Any
+            remaining text beyond three lines will be truncated with an
+            ellipsis.
+- id: ellipsis_rows_5
+  type: ParagraphInput
+  properties:
+    ellipsis:
+      rows: 5
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          ellipsis_rows_5: This paragraph is limited to 5 rows. It provides a generous
+            preview of the content while still enforcing a maximum height. This
+            is appropriate for longer descriptions, article excerpts, or
+            detailed explanations where you want to show a substantial portion
+            of the text before truncation kicks in. The ellipsis appears after
+            the fifth line, indicating there is additional content that has been
+            clipped. Users can see enough context to decide whether to expand or
+            interact further with the content.
+```
+
+```yaml
+- id: ellipsis_expandable_2
+  type: ParagraphInput
+  properties:
+    ellipsis:
+      rows: 2
+      expandable: true
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          ellipsis_expandable_2: This paragraph can be expanded. Click the expand link to
+            reveal the full content. The expandable feature allows users to see
+            a preview and then choose to read more. This is a common pattern for
+            long content sections where space is limited but the full text
+            should still be accessible to interested readers.
+- id: ellipsis_expandable_3
+  type: ParagraphInput
+  properties:
+    ellipsis:
+      rows: 3
+      expandable: true
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          ellipsis_expandable_3: Expandable paragraph with 3 visible rows before
+            truncation. Users can click to expand and see the full content. This
+            is useful for displaying longer descriptions or articles where the
+            initial preview should provide more context. The expand control
+            provides a smooth reading experience for content that may be too
+            long to display in full by default in a constrained layout.
+- id: ellipsis_expandable_1
+  type: ParagraphInput
+  properties:
+    ellipsis:
+      rows: 1
+      expandable: true
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          ellipsis_expandable_1: Single row with expand. This is compact but still allows
+            users to access the full content by clicking the expand link. Useful
+            for tight layouts like cards or sidebars.
+```
+
+```yaml
+- id: ellipsis_suffix_author
+  type: ParagraphInput
+  properties:
+    ellipsis:
+      rows: 2
+      suffix: " /Lowdefy Docs"
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          ellipsis_suffix_author: This paragraph has a custom suffix appended after the
+            ellipsis. The suffix text is always visible even when the content is
+            truncated. This can be used to show important information like a
+            date or author that should remain visible.
+- id: ellipsis_suffix_expandable
+  type: ParagraphInput
+  properties:
+    ellipsis:
+      rows: 2
+      expandable: true
+      suffix: " [Read more]"
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          ellipsis_suffix_expandable: This paragraph has both expandable and suffix
+            features combined. The suffix is always shown and the user can
+            expand to read the full content. This provides a rich reading
+            experience with metadata always visible at the end of the truncated
+            preview text.
+- id: ellipsis_suffix_date
+  type: ParagraphInput
+  properties:
+    ellipsis:
+      rows: 2
+      suffix: " -- 2026-03-10"
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          ellipsis_suffix_date: A news article excerpt that shows a date suffix. The date
+            remains visible regardless of how much content is truncated,
+            ensuring the reader always knows when the content was published.
+```
+
+```yaml
+- id: disabled_basic
+  type: ParagraphInput
+  properties:
+    disabled: true
+    editable: false
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          disabled_basic: This paragraph is disabled and cannot be edited.
+- id: disabled_with_copyable
+  type: ParagraphInput
+  properties:
+    disabled: true
+    copyable: true
+    editable: false
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          disabled_with_copyable: Disabled paragraph that is still copyable.
+- id: disabled_styled
+  type: ParagraphInput
+  properties:
+    disabled: true
+    strong: true
+    editable: false
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          disabled_styled: Disabled paragraph with strong style.
+- id: disabled_with_type
+  type: ParagraphInput
+  properties:
+    disabled: true
+    type: secondary
+    editable: false
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          disabled_with_type: Disabled paragraph with secondary type.
+- id: disabled_warning
+  type: ParagraphInput
+  properties:
+    disabled: true
+    type: warning
+    editable: false
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          disabled_warning: Disabled paragraph with warning type.
+- id: disabled_danger_italic
+  type: ParagraphInput
+  properties:
+    disabled: true
+    type: danger
+    italic: true
+    editable: false
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          disabled_danger_italic: Disabled paragraph with danger type and italic style.
+```
+
+```yaml
+- id: default_short
+  type: ParagraphInput
+  properties:
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          default_short: Short default value.
+- id: default_long
+  type: ParagraphInput
+  properties:
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          default_long: This is a longer default value that spans multiple words and
+            demonstrates how ParagraphInput handles pre-populated content. Users
+            can click the edit icon to modify this text. The paragraph displays
+            the full content by default.
+- id: default_with_styles
+  type: ParagraphInput
+  properties:
+    strong: true
+    italic: true
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          default_with_styles: Default value with strong and italic styles applied.
+- id: default_with_type
+  type: ParagraphInput
+  properties:
+    type: success
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          default_with_type: Default value displayed as success type.
+- id: default_empty
+  type: ParagraphInput
+  properties:
+    editable: true
+- id: default_multiline
+  type: ParagraphInput
+  properties:
+    editable:
+      autoSize: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          default_multiline: First paragraph of content. Second paragraph of content.
+            Third paragraph of content. This shows how ParagraphInput handles
+            multi-line default values with natural line wrapping across the
+            available width.
+```
+
+```yaml
+- id: style_custom_bg
+  type: ParagraphInput
+  style:
+    .element:
+      padding: 12
+      borderRadius: 8
+  properties:
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          style_custom_bg: Custom background color via inline style.
+- id: style_custom_border
+  type: ParagraphInput
+  style:
+    .element:
+      border: 1px solid
+      padding: 16
+      borderRadius: 8
+  properties:
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          style_custom_border: Custom border and padding via inline style.
+- id: style_custom_text_color
+  type: ParagraphInput
+  style:
+    .element:
+      color: "#722ed1"
+      fontSize: 16
+  properties:
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          style_custom_text_color: Custom purple text color.
+- id: style_full_custom
+  type: ParagraphInput
+  style:
+    .element:
+      border: 2px solid
+      borderRadius: 12
+      color: "#d46b08"
+      fontSize: 16
+      padding: 16
+  properties:
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          style_full_custom: Fully customized with background, border, padding, and text color.
+- id: style_card_like
+  type: ParagraphInput
+  style:
+    .element:
+      boxShadow: 0 2px 8px rgba(0, 0, 0, 0.1)
+      borderRadius: 8
+      padding: 20
+  properties:
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          style_card_like: This paragraph is styled like a card with shadow, padding, and
+            rounded corners. It demonstrates how inline styles can transform the
+            appearance significantly.
+```
+
+```yaml
+- id: class_rounded
+  type: ParagraphInput
+  class: rounded-lg bg-bg-layout p-4
+  properties:
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          class_rounded: Tailwind classes for rounded corners, blue background, and padding.
+- id: class_shadow
+  type: ParagraphInput
+  class: shadow-md p-4 rounded-lg
+  properties:
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          class_shadow: Tailwind shadow, padding, and rounded corners.
+- id: class_border
+  type: ParagraphInput
+  class: border border-border rounded-lg p-4
+  properties:
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          class_border: Tailwind border with rounded corners.
+- id: class_gradient_bg
+  type: ParagraphInput
+  class: bg-gradient-to-r from-primary/10 to-primary/5 p-4 rounded-lg
+  properties:
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          class_gradient_bg: Tailwind gradient background with padding and rounded corners.
+```
+
+```yaml
+- id: theme_color_text
+  type: ParagraphInput
+  properties:
+    editable: true
+    theme:
+      colorText: "#531dab"
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          theme_color_text: Custom text color using colorText token.
+- id: theme_font_serif
+  type: ParagraphInput
+  properties:
+    editable: true
+    theme:
+      fontFamily: '"Georgia", "Times New Roman", serif'
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          theme_font_serif: Serif font family applied to this paragraph. Georgia and Times
+            New Roman.
+- id: theme_font_size_24
+  type: ParagraphInput
+  properties:
+    editable: true
+    theme:
+      fontSize: 24
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          theme_font_size_24: Extra large font size (24px) paragraph.
+- id: theme_weight_900
+  type: ParagraphInput
+  properties:
+    strong: true
+    editable: true
+    theme:
+      fontWeightStrong: 900
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          theme_weight_900: Heavy font weight (900) on strong paragraph.
+- id: theme_combined_elegant
+  type: ParagraphInput
+  properties:
+    strong: true
+    editable: true
+    theme:
+      colorText: "#1d39c4"
+      fontFamily: '"Palatino Linotype", "Book Antiqua", serif'
+      fontSize: 16
+      fontWeightStrong: 700
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          theme_combined_elegant: Elegant styling with custom colors and typography.
+```
+
+```yaml
+- id: feat_editable_copyable
+  type: ParagraphInput
+  properties:
+    editable: true
+    copyable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          feat_editable_copyable: This paragraph is both editable and copyable.
+- id: feat_editable_copyable_configured
+  type: ParagraphInput
+  properties:
+    editable:
+      tooltip: Edit paragraph
+      maxLength: 200
+    copyable:
+      tooltips:
+        - Copy text
+        - Copied!
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          feat_editable_copyable_configured: Fully configured editable and copyable paragraph.
+```
+
+```yaml
+- id: feat_copyable_success
+  type: ParagraphInput
+  properties:
+    type: success
+    copyable: true
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          feat_copyable_success: Copyable success paragraph.
+- id: feat_copyable_warning
+  type: ParagraphInput
+  properties:
+    type: warning
+    copyable:
+      tooltips:
+        - Copy warning text
+        - Copied!
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          feat_copyable_warning: Copyable warning paragraph.
+- id: feat_copyable_danger
+  type: ParagraphInput
+  properties:
+    type: danger
+    copyable: true
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          feat_copyable_danger: Copyable danger paragraph.
+```
+
+```yaml
+- id: feat_ellipsis_strong
+  type: ParagraphInput
+  properties:
+    strong: true
+    ellipsis:
+      rows: 2
+      expandable: true
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          feat_ellipsis_strong: Strong styled paragraph with ellipsis truncation. This
+            demonstrates how text styles are preserved even when the content is
+            truncated. The bold styling applies to both the visible and hidden
+            portions of the text.
+- id: feat_ellipsis_italic_mark
+  type: ParagraphInput
+  properties:
+    italic: true
+    mark: true
+    ellipsis:
+      rows: 2
+      expandable: true
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          feat_ellipsis_italic_mark: Italic and marked paragraph with ellipsis. This
+            combination shows that multiple text decorations work together with
+            the ellipsis feature. Users can expand to see the full styled
+            content.
+- id: feat_ellipsis_danger
+  type: ParagraphInput
+  properties:
+    type: danger
+    ellipsis:
+      rows: 2
+      expandable: true
+    editable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          feat_ellipsis_danger: Danger type paragraph with ellipsis. The red color is
+            maintained on the truncated text and the expand link. This is useful
+            for warning messages that may be long but should still show the
+            danger styling prominently.
+```
+
+```yaml
+- id: feat_edit_copy_ellipsis
+  type: ParagraphInput
+  properties:
+    editable:
+      tooltip: Edit this text
+    copyable:
+      tooltips:
+        - Copy to clipboard
+        - Copied!
+    ellipsis:
+      rows: 2
+      expandable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          feat_edit_copy_ellipsis: This paragraph shows edit, copy, and ellipsis expand
+            controls together. All three interaction modes are available
+            simultaneously, giving the user full control over the paragraph
+            content. They can edit inline, copy to clipboard, and expand to read
+            the full text.
+```
+
+```yaml
+- id: full_success
+  type: ParagraphInput
+  properties:
+    type: success
+    strong: true
+    editable:
+      icon: AiOutlineEdit
+      tooltip: Edit this paragraph
+      maxLength: 300
+      autoSize: true
+    copyable:
+      tooltips:
+        - Copy paragraph
+        - Paragraph copied!
+    ellipsis:
+      rows: 2
+      expandable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          full_success: This is a fully featured paragraph with editable, copyable, strong
+            styling, success type, and ellipsis truncation with expandable
+            content. It demonstrates how all features of ParagraphInput work
+            together seamlessly.
+- id: full_warning
+  type: ParagraphInput
+  properties:
+    type: warning
+    italic: true
+    editable:
+      tooltip: Edit warning text
+      maxLength: 250
+      autoSize:
+        minRows: 2
+        maxRows: 6
+    copyable:
+      text: Custom copied warning text
+      tooltips:
+        - Copy warning
+        - Warning copied!
+    ellipsis:
+      rows: 2
+      expandable: true
+      suffix: " [Warning]"
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          full_warning: A warning paragraph with italic styling, copy support with custom
+            text, editable configuration, and ellipsis with a suffix. This shows
+            a complex combination of all available ParagraphInput features
+            working in harmony.
+- id: full_themed
+  type: ParagraphInput
+  properties:
+    strong: true
+    editable:
+      tooltip: Edit themed paragraph
+      maxLength: 200
+      autoSize: true
+    copyable:
+      tooltips:
+        - Copy themed text
+        - Copied!
+    ellipsis:
+      rows: 2
+      expandable: true
+    theme:
+      colorText: "#722ed1"
+      fontFamily: '"Georgia", serif'
+      fontSize: 16
+      fontWeightStrong: 700
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          full_themed: Fully featured paragraph with custom theme token overrides. Purple
+            text color, serif font, and heavy bold weight combined with
+            editable, copyable, and ellipsis features for a complete
+            demonstration.
+- id: full_danger_card
+  type: ParagraphInput
+  class: border border-border bg-bg-layout p-4 rounded-lg
+  properties:
+    type: danger
+    strong: true
+    editable:
+      icon: AiOutlineEdit
+      tooltip: Edit error message
+      maxLength: 500
+      autoSize:
+        minRows: 2
+        maxRows: 10
+    copyable:
+      icon:
+        - AiOutlineCopy
+        - AiOutlineCheck
+      tooltips:
+        - Copy error details
+        - Error details copied!
+    ellipsis:
+      rows: 2
+      expandable: true
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          full_danger_card: A danger-styled paragraph in a card-like layout. The
+            combination of danger type, strong text, Tailwind CSS classes for
+            the container, and full editable and copyable configuration creates
+            a visually distinct error message that can be edited and copied.
+- id: full_article_preview
+  type: ParagraphInput
+  class: shadow-sm p-4 rounded-lg
+  properties:
+    editable:
+      tooltip: Edit article preview
+      autoSize: true
+    copyable:
+      text: https://lowdefy.com/articles/example
+      tooltips:
+        - Copy article link
+        - Link copied!
+    ellipsis:
+      rows: 3
+      expandable: true
+      suffix: " -- by Lowdefy Team"
+    theme:
+      fontFamily: '"Georgia", serif'
+      fontSize: 15
+      lineHeight: 1.8
+  events:
+    onMount:
+      - id: set_default
+        type: SetState
+        params:
+          full_article_preview: An article preview paragraph that demonstrates a
+            real-world use case. The paragraph shows a truncated preview with an
+            author suffix, expandable content, and the ability to edit inline.
+            The serif font and relaxed line height create a pleasant reading
+            experience typical of content management interfaces.
+```
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `code` | boolean | `false` | Apply code style. |
+| `copyable` | boolean \| object | `false` | Provide copy text button. |
+| `copyable.text` | string | - | Paragraph text to copy when clicked. |
+| `copyable.icon` | string \| object \| array | - | Copy icon, can be an array or two icons for before and after clicked. |
+| `copyable.tooltips` | string \| array | - | Tooltip text, can be an array or two strings for before and after clicked. |
+| `delete` | boolean | `false` | Apply deleted (strikethrough) style. |
+| `disabled` | boolean | `false` | Apply disabled style. |
+| `editable` | boolean \| object | `true` | Allow paragraph editing when true, editable settings can be provided with editable object. |
+| `editable.icon` | string \| object | - | Edit icon. |
+| `editable.tooltip` | string | - | Edit tooltip text. |
+| `editable.editing` | boolean | - | Control editing state. |
+| `editable.maxLength` | number | - | Max length of text area input. |
+| `editable.autoSize` | boolean \| object | `false` | Auto size the text area height when editing. |
+| `editable.autoSize.minRows` | number | - | Minimum number of rows for the text area. |
+| `editable.autoSize.maxRows` | number | - | Maximum number of rows for the text area. |
+| `ellipsis` | boolean \| object | `false` | Display ellipsis when text overflows a single line. |
+| `ellipsis.rows` | number | - | Max rows of content. |
+| `ellipsis.expandable` | boolean | - | Expand hidden content when clicked. |
+| `ellipsis.suffix` | string | - | Suffix of ellipses content. |
+| `italic` | boolean | `false` | Apply italic style. |
+| `mark` | boolean | `false` | Apply marked (highlighted) style. |
+| `strong` | boolean | `false` | Apply strong (bold) style. |
+| `type` | string | `"default"` | Additional types. Don't specify for default. Enum: `success`, `default`, `secondary`, `warning`, `danger`. |
+| `underline` | boolean | `false` | Apply underline style. |
+| `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design typography tokens](https://ant.design/components/typography#design-token). |
+| `theme.titleMarginBottom` | string | `"0.5em"` | Margin bottom for title elements. |
+| `theme.titleMarginTop` | string | `"1.2em"` | Margin top for title elements. |
+| `theme.colorText` | string | - | Default text color. |
+| `theme.colorTextSecondary` | string | - | Text color for secondary type. |
+| `theme.colorSuccess` | string | - | Text color for success type. |
+| `theme.colorWarning` | string | - | Text color for warning type. |
+| `theme.colorError` | string | - | Text color for danger type. |
+| `theme.colorLink` | string | - | Color for links within typography. |
+| `theme.colorLinkHover` | string | - | Color for links on hover. |
+| `theme.colorLinkActive` | string | - | Color for links when active. |
+| `theme.colorTextDescription` | string | - | Color for description text. |
+| `theme.colorTextDisabled` | string | - | Color for disabled text. |
+| `theme.fontFamily` | string | - | Font family for typography text. |
+| `theme.fontSize` | number | `14` | Base font size. |
+| `theme.fontSizeLG` | number | `16` | Large font size. |
+| `theme.fontSizeSM` | number | `14` | Small font size. |
+| `theme.fontWeightStrong` | number | `600` | Font weight for strong text. |
+| `theme.lineHeight` | number | `1.5714` | Base line height. |
+
+| Event | Event Data | Description |
+| --- | --- | --- |
+| `onExpand` | \- | Trigger action when ellipse expand is clicked. |
+| `onCopy` | `{ value }` | Trigger action when copy text is clicked. |
+| `onChange` | `{ value }` | Trigger action when paragraph is changed. |
+
+| Key | Target |
+| --- | --- |
+| `/block` | Outer block wrapper (always available). |
+| `/element` | The ParagraphInput element. |
+| `/copyableIcon` | The copyable icon in the ParagraphInput. |
+| `/editableIcon` | The editable icon in the ParagraphInput. |
+
+No slots defined.