MarkdownEditor

Split-pane markdown editor with local Markdown/React preview and optional Clicky-backed format previews. Hosts can pass previewEndpoint for the standard Clicky format= contract or loadPreview for custom conversion.

Source

Import

import { MarkdownEditor } from "@flanksource/clicky-ui/data";

Demos

Local Preview · Open in Storybook

Clicky Backed Preview · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
buildPreviewUrl	(…) => string	—	Build a URL for remote preview requests instead of `previewEndpoint`.
className	string	—	Classes applied to the component root.
clickyData	(…) => …	—	Local Clicky document for the React preview, or a mapper from markdown.
defaultPreviewFormat	enum	—	Initial active preview format for uncontrolled usage.
defaultValue	string	—	Initial markdown source for uncontrolled usage.
disabled	boolean	false	Disable editing and preview refresh.
editorClassName	string	—	Classes applied to the textarea.
label	ReactNode	Markdown	Editor label.
loadPreview	(…) => …	—	Custom loader for host-specific markdown conversion. Return `undefined` for a format to leave it on the local preview — Clicky's `format=` contract has no `react`, so hosts commonly convert every other format remotely.
minHeight	string | number	420	Minimum height for both editor and preview panes.
onChange	(…) => void	—	Called whenever the editor source changes.
onPreviewFormatChange	(…) => void	—	Called when the active preview format changes.
placeholder	string	Write markdown...	Textarea placeholder.
previewClassName	string	—	Classes applied to the preview body.
previewDebounceMs	number	350	Debounce interval for remote preview requests.
previewEndpoint	string	—	Clicky endpoint that accepts markdown and a `format=` query parameter.
previewFormat	enum	—	Controlled active preview format.
previewFormats	readonly ("html" | "json" | "markdown" | "pdf" | "csv" | "excel" | "react")[]	—	Preview formats to expose in the toolbar.
previewHeaders	MarkdownEditorPreviewHeaders	—	Extra headers for remote previews.
previewMethod	enum	POST	HTTP method for `previewEndpoint`; POST sends the markdown body.
readOnly	boolean	false	Render the source as read-only.
toolbar	ReactNode	—	Extra toolbar content rendered after the built-in actions.
value	string	—	Controlled markdown source.