@opositatest/markdown-text-editor

Rich-text editor that serializes content as Markdown. Ships as a self-contained Web Component and as a React component.

Demo

Supported content

The editor currently focuses on text-first rich content that serializes cleanly to Markdown.

• Paragraphs
• Headings (H1, H2, H3)
• Bullet lists
• Numbered lists
• Checklists
• Toggle lists
• Block quotes
• Code blocks
• Links
• Inline styles: bold, italic, underline, strikethrough, and inline code
• Display math blocks written in LaTeX

Math / LaTeX blocks

The package includes a custom math block on top of the default BlockNote schema. It renders display formulas with KaTeX and stores them as fenced display-math blocks in Markdown:

$$
\int_0^1 x^2 dx = \frac{1}{3}
$$

In the editor UI, the math block is available from the slash menu and can be found with queries such as /math, /latex, /katex, or /formula.

Scope note

This package documents and supports the text-oriented authoring experience above, including the custom math block. Advanced upstream BlockNote media and table flows are not currently part of the documented surface of this package.

Web Component

Load via CDN (no build step required):

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@opositatest/markdown-text-editor/dist/editor.css"
/>
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@opositatest/markdown-text-editor/dist/editor.js"
></script>

Usage

<form>
  <markdown-text-editor
    name="body"
    value="Initial content"
    placeholder="Write here…"
    width="100%"
    height="320px"
    required
  ></markdown-text-editor>
</form>

Attributes

| Attribute | Type | Description | | ------------- | ------- | -------------------------------------- | | name | string | Field name for form submission | | value | string | Initial Markdown value | | placeholder | string | Placeholder text shown when empty | | width | string | CSS width for the editor container | | height | string | CSS height for the editor container | | disabled | boolean | Disables the editor | | readonly | boolean | Makes the editor read-only | | required | boolean | Participates in native form validation |

width and height accept any valid CSS size, such as 320px, 40rem, or 100%.

Properties

| Property | Type | Description | | ------------------ | ------- | --------------------------- | | element.value | string | Get or set Markdown content | | element.width | string | Get or set CSS width | | element.height | string | Get or set CSS height | | element.disabled | boolean | Get or set disabled state | | element.readOnly | boolean | Get or set read-only state |

Methods

| Method | Description | | -------------------- | ----------------------------------- | | focus() | Focus the editor | | getMarkdown() | Returns current content as Markdown | | setMarkdown(value) | Replaces editor content |

Events

| Event | Fires when | | -------- | ------------------------------------ | | input | On every content change (keystroke) | | change | On blur if value changed since focus | | ready | Once the editor has initialized |

Form integration

required participates in native browser form validation via ElementInternals (with a hidden-input fallback for browsers that don't support it). The field value is submitted with the form using the name attribute.

React Component

npm install @opositatest/markdown-text-editor

import { MarkdownTextEditor } from "@opositatest/markdown-text-editor";
import "@opositatest/markdown-text-editor/style";

<MarkdownTextEditor defaultValue="Hello" width="100%" height="320px" />;

Props

| Prop | Type | Description | | -------------- | -------------------------------------------- | -------------------------------------------- | | value | string | Controlled Markdown value | | defaultValue | string | Uncontrolled initial value | | onChange | (value: string) => void | Called on every content change | | onReady | (handle: MarkdownTextEditorHandle) => void | Called once editor has initialized | | placeholder | string | Placeholder text shown when empty | | width | string | CSS width for the editor container | | height | string | CSS height for the editor container | | disabled | boolean | Disables the editor | | readonly | boolean | Makes the editor read-only | | className | string | Additional CSS class on the editor container |

width and height accept any valid CSS size, such as 320px, 40rem, or 100%.

Imperative handle (via ref)

import { useRef } from 'react'
import { MarkdownTextEditor, type TMarkdownTextEditorHandle } from '@opositatest/markdown-text-editor'

const ref = useRef<TMarkdownTextEditorHandle>(null)

<MarkdownTextEditor ref={ref} defaultValue="Hello" onChange={setValue} />

| Method | Description | | -------------------- | ----------------------------------- | | ref.focus() | Focus the editor | | ref.getMarkdown() | Returns current content as Markdown | | ref.setMarkdown(v) | Replaces editor content |

Styling

The component does not use Shadow DOM, so all its elements are part of the regular DOM and can be targeted freely from the host page's CSS.

CSS custom properties

These properties are defined on the markdown-text-editor element and can be overridden at any level:

| Property | Default | Description | | ----------------- | -------------------------- | ---------------------------------- | | --border-color | rgba(15, 23, 42, 0.09) | Border of the editor field | | --heading-color | #0f172a | Text color inside the editor |

/* Override for all instances */
markdown-text-editor {
  --border-color: #d1d5db;
  --heading-color: #1f2937;
}

/* Override for a specific instance */
#my-editor {
  --border-color: #6366f1;
}

Targeting component classes

Use these stable class names to override layout, size, fonts, or other visual properties:

| Selector | Description | | ------------------------------------- | ----------------------------------- | | .markdown-text-editor__field | Editor container (border, radius, background) | | .markdown-text-editor__field .bn-editor | Inner editing area (padding, min-height, font-size) | | .bn-container .bn-editor | BlockNote root (font-family, line-height) |

/* Adjust editor size and typography */
.markdown-text-editor__field .bn-editor {
  min-height: 400px;
  font-size: 15px;
  line-height: 1.6;
}

/* Remove border radius */
.markdown-text-editor__field {
  border-radius: 0.25rem;
}

Package exports

| Export | Description | | ----------------------------------------- | ----------------------------------- | | @opositatest/markdown-text-editor | React component + types | | @opositatest/markdown-text-editor/input | Self-contained Web Component bundle | | @opositatest/markdown-text-editor/style | CSS stylesheet |

Browser support

Requires browsers with support for Custom Elements v1 and ElementInternals. All modern browsers (Chrome 77+, Firefox 98+, Safari 16.4+) are supported.

Peer dependencies (React component only)

react >= 19, react-dom >= 19