Editor.Markdown

A WYSIWYG Markdown editor component.

Demo

React

Vue

Usage

React

import { useState } from 'react';
import { Editor } from '@fintech-sandpit/ui/react';

const [value, setValue] = useState('### Lorem ipsum\nLorem ipsum dolor sit amet, consectetur adipiscing elit.');

return (
  <Editor.Markdown
    value={value}
    onChange={setValue}
  />
);

Vue

<script setup lang="ts">
import { ref } from 'vue';
import { Editor } from '@fintech-sandpit/ui/vue';

const value = ref('### Lorem ipsum\nLorem ipsum dolor sit amet, consectetur adipiscing elit.');
</script>

<template>
  <Editor.Markdown v-model="value" />
</template>

Props

React

Name	Type	Default	Description
value	string	—	The Markdown content (controlled)
defaultValue	string	—	The Markdown content (uncontrolled)
disabled	boolean	false	Whether the editor is disabled

Vue

Name	Type	Default	Description
model-value	string	—	The Markdown content (controlled) 1
default-value	string	—	The Markdown content (uncontrolled)
disabled	boolean	false	Whether the editor is disabled

1. Can be used with the v-model directive for two-way binding.

Events

React

Name	Type	Description
onChange	(value: string) => void	Callback fired when the Markdown content changes

Vue

Name	Payload	Description
update:model-value	string	Event emitted when the Markdown content changes