dmonphx
0 Followers · 0 Following
  • Joined on 2026-02-19
Repositories Projects Packages Public Activity Starred Repositories

@phoenix-tekhne/milkdown-editor (0.3.0)

Published 2026-05-28 07:22:37 -07:00 by dmonphx

Installation

@phoenix-tekhne:registry=https://gitrepo.cstudiosinc.com/api/packages/dmonphx/npm/
npm install @phoenix-tekhne/milkdown-editor@0.3.0
"@phoenix-tekhne/milkdown-editor": "0.3.0"

About this package

@phoenix-tekhne/milkdown-editor

Rich text editor with Markdown support for Phoenix Tekhne.

Overview

A full-featured markdown editor built on Milkdown with Phoenix Tekhne theme integration. Supports real-time preview, collaborative editing, and accessibility compliance (WCAG 2.1 AA).

Components

MilkdownEditor

Main editor component with toolbar and plugin system.

import { MilkdownEditor } from "@phoenix-tekhne/milkdown-editor";
import "@phoenix-tekhne/milkdown-editor/styles";

function Editor() {
  return (
    <MilkdownEditor
      initialValue="# Hello World"
      onChange={(markdown) => console.log(markdown)}
      placeholder="Start writing..."
    />
  );
}

Toolbar

Standalone toolbar component.

import { Toolbar } from "@phoenix-tekhne/milkdown-editor";

<Toolbar
  onBold={() => {}}
  onItalic={() => {}}
  // ... other actions
/>;

Features

  • Markdown Support: Full CommonMark + GFM syntax
  • Live Preview: Side-by-side or inline preview modes
  • Toolbar: Rich formatting controls
  • Plugins: Extensible plugin system
  • Accessibility: WCAG 2.1 AA compliant
  • Theming: Phoenix Tekhne design tokens integration
  • Collaboration: Real-time editing support (via providers)

Installation

npm install @phoenix-tekhne/milkdown-editor

Peer Dependencies

{
  "@milkdown/core": ">=7.3.0",
  "@milkdown/ctx": ">=7.3.0",
  "@milkdown/plugin-listener": ">=7.3.0",
  "@milkdown/preset-commonmark": ">=7.3.0",
  "@milkdown/preset-gfm": ">=7.3.0",
  "@milkdown/prose": ">=7.3.0",
  "@milkdown/react": ">=7.3.0",
  "@milkdown/theme-nord": ">=7.3.0",
  "react": ">=19.0.0",
  "react-dom": ">=19.0.0"
}

Usage

Basic

<MilkdownEditor
  initialValue="# Markdown Content"
  onChange={(value) => setContent(value)}
/>

With Config

<MilkdownEditor
  initialValue={content}
  placeholder="Write something..."
  readOnly={false}
  showToolbar={true}
  onChange={(value) => console.log(value)}
  onFocus={() => console.log("focused")}
  onBlur={() => console.log("blurred")}
/>

Documentation

Contributing

See AGENTS.md in repository root for contribution guidelines.

License

MIT - Phoenix Inceptions Media LLC

Dependencies

Dependencies

ID Version
@milkdown/plugin-cursor ^7.3.6
@milkdown/plugin-history ^7.3.6
@milkdown/plugin-listener ^7.3.6
@milkdown/plugin-prism ^7.3.6
@milkdown/preset-commonmark ^7.3.6
@milkdown/preset-gfm ^7.3.6
@milkdown/prose ^7.3.6
@milkdown/react ^7.3.6
@milkdown/transformer ^7.3.6
@milkdown/utils ^7.3.6
clsx ^2.1.1
emoji-picker-react ^4.18.0
lucide-react ^0.475.0

Development Dependencies

ID Version
@milkdown/core ^7.3.6
@milkdown/ctx ^7.3.6
@milkdown/theme-nord ^7.3.6
@storybook/react ^10.4.0
@storybook/react-vite ^10.4.0
@testing-library/jest-dom ^6.9.1
@testing-library/react ^16.3.2
@types/node ^22.15.17
@types/react ^19.2.14
@types/react-dom ^19.2.3
@vitejs/plugin-react ^4.4.1
happy-dom ^20.8.3
react ^19.2.4
react-dom ^19.2.4
storybook ^10.4.0
typescript ^5.8.3
vite ^6.0.0
vite-plugin-dts ^4.5.4
vitest ^3.0.0

Peer Dependencies

ID Version
@milkdown/core >=7.3.0
@milkdown/ctx >=7.3.0
@milkdown/plugin-listener >=7.3.0
@milkdown/preset-commonmark >=7.3.0
@milkdown/preset-gfm >=7.3.0
@milkdown/prose >=7.3.0
@milkdown/react >=7.3.0
@milkdown/theme-nord >=7.3.0
react >=19.0.0
react-dom >=19.0.0

Keywords

milkdown editor markdown rich-text phoenix-tekhne accessibility wcag react
Details
npm
2026-05-28 07:22:37 -07:00
5
Phoenix Inceptions Media LLC
Project Site
MIT
latest
17 KiB
Assets (1)
milkdown-editor-0.3.0.tgz 17 KiB
Versions (1) View all
0.3.0 2026-05-28