hebrew-markdown-react

Hebrew-friendly Markdown Editor for React (RTL, Preview, KaTeX, Syntax Highlighting)

React wrapper for the Hebrew Markdown Editor
A modern, RTL-friendly Markdown editor with live preview, math rendering, and Apple-inspired design — now as a reusable React component.

---

📸 Screenshot

---

✨ Features

• ✅ Full Hebrew (RTL) support
• ✅ Live Markdown preview
• ✅ Toolbar with formatting actions
• ✅ Multiple view modes (editor / preview / split)
• ✅ Theme selection + Dark/Light mode
• ✅ Math expressions with KaTeX
• ✅ Syntax highlighting for code blocks
• ✅ Word & character count
• ✅ Export as .md
• ✅ Print the document

---

🔗 Demo

👉 Live Storybook Demo

---

📦 Installation

npm install hebrew-markdown-react

Peer dependencies (make sure you already have these installed):

npm install react react-dom

---

🚀 Usage

Import the component and use it in your app:

import { HebrewMarkdownEditor } from "hebrew-markdown-react";
import { useState } from "react";

export default function App() {
  const [value, setValue] = useState("# שלום עולם 👋");

  return (
    <div style={{ height: '80vh', width: '100%' }}>
      <HebrewMarkdownEditor
        value={value}
        onChange={(val) => setValue(val)}
        onSave={(val) => console.log("Saved:", val)}
        showCredits={false}
      />
    </div>
  );
}

Setting Initial View Mode

You can set the initial view mode using the VIEW_MODES constant for type safety:

import { HebrewMarkdownEditor, VIEW_MODES } from "hebrew-markdown-react";
import { useState } from "react";

export default function App() {
  const [value, setValue] = useState("# שלום עולם 👋");

  return (
    <div style={{ height: '80vh', width: '100%' }}>
      <HebrewMarkdownEditor
        value={value}
        onChange={(val) => setValue(val)}
        viewMode={VIEW_MODES.EDITOR_ONLY}
      />
    </div>
  );
}

Available view modes:

• VIEW_MODES.SPLIT - Split view (default)
• VIEW_MODES.EDITOR_ONLY - Editor only
• VIEW_MODES.PREVIEW_ONLY - Preview only

---

⚙️ Props

Prop	Type	Default	Description
value	string	""	The markdown content of the editor.
onChange	(content: string) => void	–	Callback fired on every content change.
onSave	(content: string) => void	undefined	If provided, shows a "Save" button in the toolbar and is called when the user saves (Ctrl+S or button).
height	string	"100%"	The height of the editor container (e.g., "500px", "80vh"). The component fills its parent by default.
className	string	""	Custom CSS class to apply to the root hmr-container element for custom styling.
viewMode	'split' | 'editor-only' | 'preview-only'	'split'	The initial view mode of the editor.
showCredits	boolean	true	Show credit link in the status bar.

---

🎨 Custom Styling

You can override the default styles by targeting the prefixed CSS classes. The root container has the class hmr-container.

Here's an example of how to change the toolbar background and the primary color:

/* your-custom-styles.css */
.my-custom-editor .hmr-toolbar {
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
}

.my-custom-editor {
  --hmr-primary: #ff5722; /* Change the primary color */
}

Then, apply your custom class via the className prop:

import "./your-custom-styles.css";

<HebrewMarkdownEditor
  className="my-custom-editor"
  value={value}
  onChange={setValue}
/>

---

Development

• Requires Node.js 20.19.0 or higher (see .nvmrc)

nvm use

• Install dependencies:

npm install

---

📖 Storybook

Run Storybook locally to explore and play with the editor:

npm run storybook

---

🤝 Contributing

Contributions are welcome! 🚀

1. Fork the repo
2. Create a branch (git checkout -b feature/awesome)
3. Commit changes (git commit -m "Add awesome feature")
4. Push (git push origin feature/awesome)
5. Open a Pull Request

---

📃 License

This project is licensed under the MIT License. See the LICENSE file for details.

---

👤 Authors

• Dor Pascal – Creator of the original Hebrew Markdown Editor
• Ariel Benesh – Creator of the React wrapper (hebrew-markdown-react)