Skip to main content

format

Description​

Optional. Controls how the message content is rendered in the comments widget

Usage​

format?: "text" | "markdown" | Component<{
    content: string;  
}>;

Parameters​

  • "text" (default) – renders the message content as plain text

  • "markdown" – renders the message content using Markdown syntax

  • Component – a custom Svelte component that receives the message content through the content prop which is a string

Examples​

Rendering message's content as text​

<script>
  import { Comments } from '@svar-ui/svelte-comments';

  const value = [
    {
      id: "1",
      content: "Hello, world!",
      author:{ id: 1, name: "John Doe" },
      date: new Date(),
    },
  ];
</script>

<Comments {value} format="text" />

Rendering message's content in markdown format​

<script>
  import { Comments } from '@svar-ui/svelte-comments';

  const value = [
    {
      id: "1",
      content: "Hello, **world**",
      author:{ id: 1, name: "John Doe" },
      date: new Date(),
    },
  ];
</script>

<Comments {value} format="markdown" />

Rendering message's content in custom format​

<script>
  import { Comments } from '@svar-ui/svelte-comments';

  const value = [
    {
      id: "1", 
      content: "Hello @[John](user:1), check this link: {link|https://example.com|Click here}",
      date: new Date()
    }
  ];

  // Custom formatter that handles @mentions and custom link syntax
  const customFormat = (text) => {
    // Convert @mentions: @[Name](user:id) -> <a href="/users/id">Name</a>
    return text.replace(/@\[(.*?)\]\(user:(\d+)\)/g, 
      '<a href="/users/$2">$1</a>');    
  };

</script>

<Comments {value} format={customFormat} />