/**
 * 预览富文本内容组件
 * @description
 * 1、编辑器生成的html不包含布局样式，例如代码块和引语块样式，需要自行美化；
 * 2、编辑器生成的html中，空段落为一对空的p标签，需要设置最低高度才能正常展示连续的换行；
 * 3、编辑器生成的html中，空格即为普通的空格，需要设置 white-space: pre-wrap; 才能正常展示连续的空格；
 */

import React, { useLayoutEffect } from 'react';
import Prism from 'prismjs'; // 代码块高亮插件
import 'braft-editor/dist/output.css'; // 富文本编辑器内置的输出样式
import "./Preview.less";

// 避免换行符被过滤掉
Prism.hooks.add('before-highlight', function (env) {
  env.code = env.element.innerText;
});
var Preview = function Preview(_ref) {
  var _ref$html = _ref.html,
    html = _ref$html === void 0 ? '' : _ref$html,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? '' : _ref$className,
    style = _ref.style;
  // 设置代码块样式高亮
  var setCodeStyle = function setCodeStyle() {
    var elements = document.querySelectorAll('.m-editor-preview.braft-output-content pre');

    // 当预览内容中包含代码块，则动态引入代码块高亮的主题样式
    if (elements.length) {
      import("./prism-theme.css");

      // 给每个代码块添加class
      elements.forEach(function (element) {
        element.classList.add('language-js');
      });
      Prism.highlightAll();
    }
  };
  useLayoutEffect(function () {
    // 加定时器是因为富文本编辑器预览时打开的是弹窗，需要等待弹窗渲染完成后再进行高亮
    setTimeout(setCodeStyle);
  }, [html]);
  return /*#__PURE__*/React.createElement("div", {
    className: "m-editor-preview braft-output-content ".concat(className),
    style: style,
    dangerouslySetInnerHTML: {
      __html: html
    }
  });
};
export default Preview;