@devdojo/markdownx

MarkdownX

Usage

There are a few ways that you can use the MarkdownX editor. You can use the CDN link and then create a new MarkdownX editor from any textarea element, or you can use the npm package and import MarkdownX in any JavaScript or TypeScript file.

Using the CDN

<script src="https://unpkg.com/@devdojo/markdownx"></script>
<script>
    let myEditor = new MarkdownX('#my-textarea');
</script>

Using npm

npm install @devdojo/markdownx

import MarkdownX from '@devdojo/markdownx';

let myEditor = new MarkdownX('#my-textarea');

How Slash Commands Work

The slash command system in MarkdownX is designed to provide a Notion-like experience for adding different types of content blocks to your markdown editor.

Here's how it works:

Triggering the Slash Menu When you type a forward slash (/) in the editor, it triggers the slash command menu. The slashDropdown.ts module handles the display and interaction with this menu. The menu appears at the current cursor position and shows a list of available blocks.

Block Selection and Filtering As you type after the slash, the menu filters in real-time to show only blocks matching your input.

Each block in the dropdown shows:

• An icon
• A title (like "Heading", "Link", "Image")
• A short description of what the block does

You can navigate through the menu items using arrow keys or your mouse. When you select a block (by clicking or pressing Enter), the corresponding block's selected() method is called.

Block Implementation Each block (like text, heading, link, etc.) is implemented as a separate TypeScript file in the /src/blocks directory.

All blocks extend the MarkdownXBlockBase abstract class

Each block has properties like:

• id: Unique identifier for the block
• icon: SVG icon to display in the menu
• title: Display name
• description: Short explanation
• display: Whether it's an "inline" or "block" level element

Implement two required methods

• selected(): What happens when the block is selected from the slash menu
• toolbarClick(): What happens when the block is selected from the toolbar

Block Actions

When a block is selected, it can:

Simply insert text at the current cursor position (like headings) Open a modal dialog for more complex interactions (like image, link, or embeds) Modify the current line or add new lines For example, when you select the "Text" block, it simply adds plain text at the cursor position. But when you select "Link", it opens a modal dialog where you can enter the URL and link text.

Block Registration All blocks are imported in the blocks.ts file and then made available to the MarkdownX system. The main MarkdownX object then:

Makes these blocks available through the slash command menu Provides methods like getBlockFromId() to retrieve specific blocks Handles the integration between the editor, the slash menu, and the blocks This modular approach makes it easy to add new block types to the system by simply creating a new block file that follows the same pattern.