Uhuu Docs

Appearance

Markdown Dialog ​

The markdown dialog allows users to edit text content with markdown formatting capabilities.

video

Parameters ​

The editDialog method is configured with the following options for markdown editing:

  • type: Set to 'markdown' to indicate that the editor should open with markdown editing capabilities.
  • path: Specifies the data path for the markdown content to be edited. In this example, 'description' is the path within the payload.

This setup enables a simple and intuitive way to handle markdown-based content, allowing users to add headings, bullet points, and other markdown features within the Uhuu editor.

Example Setup ​

Consider the following JSON payload in the template:

json
{ 
    "title": "Project Documentation",
    "description": "## Overview\nThis project is designed to...",
    "notes": "Remember to check the requirements."
}

In your template, you can set up an markdown field as follows:

js
import ReactMarkdown from 'react-markdown';

export default ({ payload }) => {
  return (
    <div onClick={() => $uhuu.editDialog({ path: 'description', type: 'markdown' })}>
      <ReactMarkdown>{payload.description}</ReactMarkdown>
    </div>
  );
}

This dialog is especially useful for sections of a template that require rich text, such as descriptions, detailed content areas, or styled notes.

Example Usage ​

Here's an example of how to configure $uhuu.editDialog for editing markdown content:

js
$uhuu.editDialog({
  path: 'description',
  type: 'markdown'
});

This call will open a markdown editor dialog, allowing users to format the description field with markdown syntax. The updated markdown content is saved to the specified path in the payload once the dialog is closed.