Light Dark System

Remarkd Editor

<zn-remarkd-editor> | ZnRemarkdEditor
Since 1.0 experimental

A Notion-style block editor for remarkd content. Blocks render inline; click one to edit its source.

zn-remarkd-editor is a Notion-style editor for remarkd content. The document is a list of blocks rendered inline with remarkd — there is no separate preview. Click a block to edit its raw remarkd source in place; it re-renders when you click away (or press Escape / Ctrl+Enter). The value is always plain remarkd source, submitted with the surrounding form. 

<zn-remarkd-editor
  name="content"
  value="# Product Guide

This is a paragraph with **strong text**, __emphasis__, and a [link](https://example.com).

- [ ] Draft the guide
- [x] Review the output

NOTE: Click any block to edit its source."
></zn-remarkd-editor>

Examples

Adding and Moving Blocks

Hover a block to reveal its gutter actions: add a block below it, or grab the handle to drag the block somewhere else in the document. Clicking the empty area at the end of the document starts a new block. A block committed empty is removed. 

<zn-remarkd-editor
  name="content"
  value="Hover me to see the block actions."
></zn-remarkd-editor>

Images

Adding an image shows a zn-file drop area inline, at the point in the document where the image will go. Choosing a file uploads it straight away: the file’s metadata is POSTed to the attachment-url endpoint, which must respond with {uploadPath, uploadUrl}; the file is then PUT to uploadUrl and the returned uploadPath is embedded as the image URL. Dropping an image file straight onto the editor uploads it directly. attachment-url is required for image support. 

<zn-remarkd-editor name="content" attachment-url="/upload"></zn-remarkd-editor>

Remarkd Blocks

Remarkd’s block syntax — hints, containers, code fences — renders with the official remarkd styles. Fenced content stays a single block, blank lines and all. 

<zn-remarkd-editor name="content" value="TIP: Hint blocks are remarkd-specific.

====
An example **container** block.
====

```
a code fence

with a blank line inside
```"
></zn-remarkd-editor>

Form Integration

zn-remarkd-editor is a form control; its remarkd source is submitted under name, and required is supported.


Submit 
<form class="remarkd-editor-form">
  <zn-remarkd-editor name="content" required value="Edit me, then submit."></zn-remarkd-editor>
  <br />
  <zn-button type="submit" color="success">Submit</zn-button>
</form>

<script type="module">
  const form = document.querySelector('.remarkd-editor-form');

  await customElements.whenDefined('zn-button');
  await customElements.whenDefined('zn-remarkd-editor');

  form.addEventListener('submit', (e) => {
    e.preventDefault();
    const data = Object.fromEntries(new FormData(form));
    alert('Submitted!\n\n' + JSON.stringify(data, null, 2));
  });
</script>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.1.64/dist/components/remarkd-editor/remarkd-editor.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.1.64/dist/components/remarkd-editor/remarkd-editor.js';

To import this component using a bundler:

import '@kubex/zinc/dist/components/remarkd-editor/remarkd-editor.js';

Properties

Name Description Reflects Type Default
name The name of the control, submitted as part of form data. string ''
value The current remarkd source. string ''
defaultValue The default value — used when resetting the form. string ''
placeholder Placeholder shown when the document is empty. string 'Type something…'
attachmentUrl
attachment-url 		Endpoint for image uploads — required for image support. Posting the file metadata here must return {uploadPath, uploadUrl}; the file is then PUT to uploadUrl and the returned uploadPath is embedded as the image URL. string ''
required Makes the editor required for form submission. boolean false
readonly Makes the editor read-only. boolean false
disabled Disables the editor. boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
zn-input Emitted on each keystroke while editing a block. -
zn-change Emitted when a block edit is committed and the value changes. -

Learn more about events.

Methods

Name Description Arguments
focus() Starts editing the first block, or a new block if the document is empty. -
blur() Commits any in-progress block edit. -

Learn more about methods.

Parts

Name Description
base The component’s base wrapper.
toolbar The always-visible block-insert toolbar.
block A rendered block wrapper.
rendered The rendered remarkd output of a block.
input The textarea shown while editing a block.
slash-menu The context menu opened by typing ”/” in a block.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <zn-button>
  • <zn-button-group>
  • <zn-dialog>
  • <zn-example>
  • <zn-file>
  • <zn-icon>
  • <zn-tooltip>