Html-react-parser: يجب استبعاد خيار القطع

شكرا على فكرةdanielimmke!

لسوء الحظ ، ليس من السهل الاحتفاظ بالمسافة البيضاء داخل عنصر <pre> . السبب هو أن <pre> يسمح بصياغة المحتوى ، مما يعقد عملية التنفيذ.

على سبيل المثال ، كيف يمكننا التعامل مع ما يلي؟

const parse = require('html-react-parser');

parse(`
  <pre>
    hello <em>world <span>!</span> </em>
  </pre>
`, { trim: true });

سيقوم محلل html-dom-parser بتحليل كل عنصر ( <pre> ، <em> ، <span> ):

const { htmlToDOM } = require('html-react-parser');

htmlToDOM(`
  <pre>
    hello <em>world <span>!</span> </em>
  </pre>
`);

انظر عرض Repl.it.

شكرًا على الرد السريع - ربما تكون هناك طريقة عامة أفضل للتعامل مع هذا الأمر بعد ذلك. ما زلت بحاجة إلى إجراء trim: true لمعظم المحتوى الخاص بي ، ولكن ربما يمكنني إضافة خيار لجعل المحلل يتجاهل الجزء الداخلي من عنصر معين (يمكن أن يجتاز المحدد) ولا يحاول تحليل / تغيير أي شيء بداخله . لست متأكدًا مما إذا كان هذا ممكنًا حاليًا مع الخيارات المتاحة.

أنا أستخدم هذا داخل مشروع Gatsby ويتم استخدام <pre> بشكل أساسي لتنسيق الكود ، لذا فإن تحليله ليس مثاليًا بالتأكيد. إنها حالة متطرفة ولكن يمكنني رؤية الكثير من الأشخاص الآخرين يركضون إليها أيضًا.

في الواقع هناك طريقة لتعطيل trim لعناصر <pre> باستخدام خيار الاستبدال :

import parse, { domToReact } from 'html-react-parser';

const html = `
  <pre>
    <span>Whitespace is
      <strong>preserved</strong>!
    </span>
  </pre>
`;

const options = {
  replace: ({ name, children }) => {
    if (name === 'pre') {
      return domToReact(children, options);
    }
  },
};

parse(html, { ...options, trim: true });

انظر عرض CodeSandbox .

شكرا ، سأحاول ذلك بدلا من ذلك.