لقد قمت ببناء محرر Markdown مباشر بدون استخدام أي مكتبات

لست بحاجة إلى مكتبات ضخمة لبناء محرر Markdown. لقد قمت ببناء نسخة تعمل في حوالي 40 سطرًا من الكود. يقوم المحرر بتحويل النص إلى HTML فورياً أثناء الكتابة.

تتبع العملية خمس خطوات محددة:

  1. معالجة رموز HTML (Escape HTML characters) يجب عليك استبدال الرموز مثل < و > أولاً. هذا يمنع هجمات XSS الناتجة عن وسوم البرمجة (script tags). إذا تخطيت هذه الخطوة، سيكون المحرر الخاص بك غير آمن.

  2. حماية كتل الكود (Protect code blocks) استخرج كتل الكود واستبدلها بعلامات مؤقتة (placeholders). يضمن ذلك عدم تداخل قواعد التنسيق الخاصة بك مع الكود الموجود داخل العينة.

  3. معالجة قواعد الكتل (Process block rules) قم بالمرور على كل سطر من النص.

  • استخدم # لإنشاء وسوم h1.
  • استخدم - لإنشاء عناصر القائمة.
  • استخدم > لإنشاء الاقتباسات. قم بتجميع أسطر القائمة في وسم ul واحد.
  1. تطبيق التعبيرات النمطية (Apply inline regex) استخدم التعبيرات النمطية (regular expressions) للتعامل مع أنماط النصوص.
  • حوّل text إلى وسوم strong.
  • حوّل text إلى وسوم anchor. الترتيب مهم؛ قم بمعالجة النص العريض (bold) قبل المائل (italics) لتجنب الأخطاء.
  1. العرض المباشر (Live render) أعد عرض المحتوى بالكامل عند كل ضغطة مفتاح. لغة Markdown صغيرة وسريعة التحليل (parse). هذا يخلق تأثير الشاشة المنقسمة الفوري.

المنطق بسيط: المعالجة (Escape)، الحماية، قواعد الكتل، التعبيرات النمطية، ثم العرض.

جرب المحرر المباشر هنا: https://dev48v.infy.uk/solve/day11-markdown-editor.html

المصدر: https://dev.to/dev48v/i-built-a-live-markdown-editor-with-no-library-40-lines-3ln9