diff --git a/README.md b/README.md index 7c81e0b..8d71ad3 100644 --- a/README.md +++ b/README.md @@ -48,12 +48,14 @@ yarn add mandoo-editor pnpm add mandoo-editor ``` -Then import the styles once (e.g. in your root layout): +> **⚠️ Required — add this import wherever you use the editor:** ```tsx -import "mandoo-editor/styles"; +import 'mandoo-editor/styles'; ``` +Add it in your layout, page, or component — wherever `MandooEditor` is rendered. Without it the editor has no styling. + --- ## Quick Start @@ -115,6 +117,50 @@ ref.current?.clear(); // clear content --- +## Form Integration + +MandooEditor outputs HTML or Markdown. There are two ways to use it in a form: + +### Option 1 — `name` prop (native forms, FormData, Server Actions) + +Add a `name` prop and a hidden `` is automatically rendered. Works with any form library or native HTML form submission. + +```tsx +// Native HTML form +
+ + + + +// Next.js Server Action +async function save(formData: FormData) { + 'use server'; + const content = formData.get('content'); // ← HTML or Markdown +} + +
+ + + +``` + +### Option 2 — `onChange` (controlled state, react-hook-form, Zustand…) + +```tsx +// useState +const [content, setContent] = useState(''); + + +// react-hook-form +const { setValue } = useForm(); + setValue('content', v)} outputFormat="markdown" /> + +// Zustand / Redux + dispatch(setContent(v))} /> +``` + +--- + ## Feature Flags Disable any toolbar button by setting its flag to `false`: @@ -310,7 +356,7 @@ import type { | | | | -------------- | ------------------------------------------------------------------------------------------------ | | 🌍 **Website** | [mandooeditor.markrahimi.com](https://mandooeditor.markrahimi.com) | -| 📦 **npm** | [npmjs.com/package/mandoo-editor](https://www.npmjs.com/package/mandoo-editor) | +| 📦 **npm** | [npmjs.com/package/mandoo-editor](https://www.npmjs.com/package/mandoo-editor) | | 🐙 **GitHub** | [github.com/markrahimi/mandoo-editor](https://github.com/markrahimi/mandoo-editor) | | 🐛 **Issues** | [github.com/markrahimi/mandoo-editor/issues](https://github.com/markrahimi/mandoo-editor/issues) | | ☕ **Support** | [ko-fi.com/markrahimi](https://ko-fi.com/E1E11W0EQP) | diff --git a/src/MandooEditor.tsx b/src/MandooEditor.tsx index 4f4c64d..71b4129 100644 --- a/src/MandooEditor.tsx +++ b/src/MandooEditor.tsx @@ -8,7 +8,7 @@ import React, { useImperativeHandle, forwardRef, } from 'react'; -import styles from './styles/mandoo.module.css'; + import Toolbar from './toolbar/Toolbar'; import VisualEditor from './editor/VisualEditor'; import TextEditor from './editor/TextEditor'; @@ -43,6 +43,7 @@ const MandooEditor = forwardRef(function features: featuresProp, media, plugins = {}, + name, height = DEFAULT_HEIGHT, className, }, @@ -241,19 +242,19 @@ const MandooEditor = forwardRef(function return (
{/* Tools bar: Add Media + Tab buttons */} -
-
+
+
{features.media && ( @@ -332,7 +333,7 @@ const MandooEditor = forwardRef(function
{/* Editor wrap */} -
+
{activeTab === 'block' ? ( (function )}
+ {/* Hidden input for native form / FormData / server actions integration */} + {name && ( + + )} + {/* ── Watermark ─────────────────────────────────────────────────────── */}