{"_id":"@autokinesis/react-markdown-editor","name":"@autokinesis/react-markdown-editor","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@autokinesis/react-markdown-editor","version":"0.0.1","type":"module","main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"}},"sideEffects":["**/*.css"],"scripts":{"build":"tsc -p tsconfig.json && mkdir -p dist/styles && cp src/styles/editor.css dist/styles/editor.css","prepublishOnly":"npm run build"},"peerDependencies":{"react":">=18"},"dependencies":{"react-markdown":"^10.1.0","rehype-highlight":"^7.0.2","remark-gfm":"^4.0.1"},"_id":"@autokinesis/react-markdown-editor@0.0.1","description":"React markdown editor + preview components with light/dark themes, syntax highlighting, admonitions, and customizable styles.","_nodeVersion":"20.19.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-9Ch1OYY7BoSRQlTrPRV3SYN5XiY5hslpAgG4xCBImnuzYS56M0DNO7yLyVjGTD/iNGHEsoiOTJihDHLEUIpJyA==","shasum":"efaf30fb37b7d9708c67a0fb107e92c4cefc037f","tarball":"https://registry.npmjs.org/@autokinesis/react-markdown-editor/-/react-markdown-editor-0.0.1.tgz","fileCount":11,"unpackedSize":54676,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEJi2G/gjWIvt7wGuzjlLmrZetzEyBSN5F2dAOfP8FYiAiA9FZWHBE0LdE0xn/ZL5KqU0GUMRqvad+eyKGoojZnOuA=="}]},"_npmUser":{"name":"chinniraja","email":"mr.chinniraja53@gmail.com"},"directories":{},"maintainers":[{"name":"chinniraja","email":"mr.chinniraja53@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-markdown-editor_0.0.1_1770954748264_0.16102643864091037"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-13T03:52:28.197Z","0.0.1":"2026-02-13T03:52:28.427Z","modified":"2026-02-13T03:52:28.688Z"},"maintainers":[{"name":"chinniraja","email":"mr.chinniraja53@gmail.com"}],"description":"React markdown editor + preview components with light/dark themes, syntax highlighting, admonitions, and customizable styles.","readme":"# @autokinesis/react-markdown-editor\n\nReact markdown editor + preview components with light/dark themes, syntax highlighting, admonitions, and customizable styles.\n\n## Install\n\n```bash\nnpm install @autokinesis/react-markdown-editor\n```\n\nPeer dependency:\n\n- `react >= 18`\n\n## Exports\n\n- `Editor` (alias of `MarkdownEditor`): combined toolbar + textarea\n- `EditorToolbar` (alias of `MarkdownEditorToolbar`): standalone toolbar\n- `EditorTextarea` (alias of `MarkdownEditorTextarea`): standalone textarea\n- `Preview`: markdown renderer\n\nTypes:\n\n- `MarkdownTheme`\n- `MarkdownEditorProps`\n- `MarkdownEditorToolbarProps`\n- `MarkdownEditorTextareaProps`\n- `PreviewProps`\n\n## Quick Start (Combined Editor + Preview)\n\n```tsx\nimport { useState } from 'react'\nimport { Editor, Preview } from '@autokinesis/react-markdown-editor'\n\nexport default function Page() {\n  const [markdown, setMarkdown] = useState('# Hello')\n\n  return (\n    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>\n      <Editor value={markdown} onChange={setMarkdown} theme=\"dark\" />\n      <Preview doc={markdown} theme=\"dark\" />\n    </div>\n  )\n}\n```\n\n## Independent Composition (Toolbar and Textarea Separately)\n\nUse this when your app header/layout controls where the toolbar should render.\n\n```tsx\nimport { useRef, useState } from 'react'\nimport { EditorToolbar, EditorTextarea, Preview } from '@autokinesis/react-markdown-editor'\n\nexport default function ComposedEditor() {\n  const [markdown, setMarkdown] = useState('')\n  const textareaRef = useRef<HTMLTextAreaElement>(null)\n\n  return (\n    <>\n      <EditorToolbar\n        value={markdown}\n        onChange={setMarkdown}\n        targetRef={textareaRef}\n        theme=\"dark\"\n      />\n\n      <EditorTextarea\n        ref={textareaRef}\n        value={markdown}\n        onChange={setMarkdown}\n        theme=\"dark\"\n        placeholder=\"Write markdown...\"\n      />\n\n      <Preview doc={markdown} theme=\"dark\" />\n    </>\n  )\n}\n```\n\n## Standalone Preview\n\n```tsx\nimport { Preview } from '@autokinesis/react-markdown-editor'\n\n<Preview doc={markdownText} theme=\"light\" />\n```\n\n## Theme\n\n`theme` is supported on editor and preview components:\n\n- `light`\n- `dark`\n\n## Admonition Syntax\n\nSupported admonition input format is **generic tag syntax only**:\n\n```html\n<admonition kind=\"warning\" type=\"block\" title=\"Warning\">\nPlain text with **bold** and `inline code`.\n</admonition>\n\n<admonition kind=\"risk\" type=\"outline\" title=\"Risk\">\n- Full markdown works in outline mode\n- Lists, tables, fenced code blocks, etc.\n</admonition>\n```\n\nSupported `kind` values:\n\n- `warning`\n- `tip`\n- `note`\n- `critical`\n- `risk`\n- `ai-consideration`\n- `assumption`\n- `decision`\n- `dependency`\n\nSupported `type` values:\n\n- `block`\n- `outline`\n\n## Styling and Customization\n\nYou can customize appearance by:\n\n1. Passing `className` and scoping overrides:\n\n```tsx\n<Preview doc={doc} className=\"my-preview\" theme=\"dark\" />\n```\n\n```css\n.my-preview .ak-codeblock__lang {\n  border-radius: 999px;\n}\n```\n\n2. Overriding CSS variables (`--ak-*`) at wrapper level.\n\n3. Targeting package classnames directly (examples):\n\n- `.ak-editor__toolbar`\n- `.ak-editor__textarea`\n- `.ak-markdown`\n- `.ak-admonition`\n- `.ak-codeblock`\n- `.ak-codeblock__lang`\n\n## Notes\n\n- Syntax highlighting is enabled for fenced code blocks.\n- Language pill appears only when a language is explicitly provided in fenced blocks.\n- Unknown/blocked image URLs render an inline fallback label.\n","readmeFilename":"README.md","_rev":"1-d616c5cf62ef1f2a474f33bf0302ed5a"}