Skip to main content

format

format​

format: string | ((text: string) => string)

this property controls how the message content is rendered. It can take a preset value of "text" or "markdown", or a custom formatting function. The default value is "text".

Usage​

Rendering message's content as text​

<script>
  import { Comments } from 'wx-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 'wx-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 'wx-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} />