إنتقل إلى المحتوى الرئيسي

التثبيت

ثبّت @powerduck/md-editor باستخدام مدير الحزم الذي تفضله.

npm install @powerduck/md-editor
yarn add @powerduck/md-editor
pnpm add @powerduck/md-editor

مسارات الاستيراد​

تعرّف الحزمة تصديرات المسارات الفرعية صراحةً في package.json:

مسار الاستيرادالمحتوى
@powerduck/md-editorنقطة الدخول الرئيسية: الصنف MarkdownEditor وجميع الأدوات المساعدة والأنواع والدوال المستقلة.
@powerduck/md-editor/reactمسار React الفرعي: المكوّن MarkdownEditorReact والنوعان MarkdownEditorProps وMarkdownEditorHandle.
@powerduck/md-editor/dist/style.cssملف تنسيق المحرر المبني؛ يجب استيراده مرة واحدة.
@powerduck/md-editor/styles/tokens.cssخصائص CSS المخصصة الأصلية لرموز التصميم.

تُنشر الحزمة كوحدة ECMAScript ("type": "module") ببناءين: dist/index.mjs لـ ESM وdist/index.cjs لـ CommonJS. تُنتج تعريفات الأنواع في dist/index.d.ts.

// Vanilla JS main entry
import { MarkdownEditor, renderMarkdown } from '@powerduck/md-editor';
import '@powerduck/md-editor/dist/style.css';
// React subpath
import { MarkdownEditorReact, type MarkdownEditorHandle } from '@powerduck/md-editor/react';
import '@powerduck/md-editor/dist/style.css';

الاعتماديات النظيرة​

تُعلن react وreact-dom كاعتماديات نظيرة اختيارية (>=17). تحتاج إليهما فقط عند استيراد المسار الفرعي ./react:

npm install react react-dom

لا يعتمد الصنف MarkdownEditor المستقل عن الأطر ولا الدالة المستقلة renderMarkdown على React، لذا يعملان في أي مشروع متصفح دون تثبيته.

دعم TypeScript​

تتضمن الحزمة تعريفات الأنواع، ولا تحتاج إلى حزم @types/* إضافية. تتيح نقطة الدخول الرئيسية MarkdownEditorOptions وEditorMode وEditorTheme وToolbarConfig وRendererOptions وجميع الأنواع المساعدة. ويتيح المسار ./react النوعين MarkdownEditorProps وMarkdownEditorHandle.

import { MarkdownEditor, type MarkdownEditorOptions } from '@powerduck/md-editor';
import type { MarkdownEditorHandle } from '@powerduck/md-editor/react';

الآثار الجانبية لملفات CSS​

تُعلّم ملفات *.css في package.json بأنها ذات آثار جانبية، كي لا تحذفها أدوات التجميع أثناء tree-shaking. استورد dist/style.css مرة واحدة في نقطة دخول التطبيق؛ فهو يجمع تنسيق واجهة المحرر والمعاينة عبر github-markdown-css وتنسيق KaTeX وجميع الإضافات.

الخطوات التالية​