把飞书云文档变成 HTML 邮件：问题挑战与解决历程｜得物技术_AI阅读总结 — 包阅AI

{    block_id: string;    parent_id: string;    children: string[];    block_type: BlockType;    page?: { ... };    text?: { ... };    heading1?: { ... };    ordered?: { ... };    table?: { ... };    ...}[];

import { CSSProperties } from 'react';
const isUnitlessNumber: Record<string, boolean> = {    fontWeight: true,  lineClamp: true,  lineHeight: true,  
    fillOpacity: true,  floodOpacity: true,  stopOpacity: true,  };
const cssPropertyPrefixes = ['Webkit', 'ms', 'Moz', 'O'];
Object.keys(isUnitlessNumber).forEach(property => {  cssPropertyPrefixes.forEach(prefix => {    isUnitlessNumber[`${prefix}${property.charAt(0).toUpperCase()}${property.substring(1)}`] =      isUnitlessNumber[property];  });});
export { isUnitlessNumber };
export function addCSSPropertyUnit<T extends keyof CSSProperties>(property: T, value: CSSProperties[T]) {  if (typeof value === 'number' && !isUnitlessNumber[property]) {        return `${value}px`;  }  return value;}

export function convertCSSPropertiesToInlineStyle(style: CSSProperties) {  const upperCaseReg = /[A-Z]/g;
  const inlineStyle = Object.keys(style)    .map(      property =>        `${property.replace(          upperCaseReg,          matchLetter => `-${matchLetter.toLowerCase()}`,        )}: ${addCSSPropertyUnit(property as keyof CSSProperties, style[property])};`,    )    .join(' ');
  if (inlineStyle) {    return `style="${inlineStyle}"`;  }
  return '';}
export function createInlineStyles<T extends string>(styles: { [P in T]: CSSProperties }) {  const inlineStyles = {} as { [P in T]: string };
  Object.keys(styles).forEach(name => {    inlineStyles[name] = convertCSSPropertiesToInlineStyle(styles[name]);  });
  return inlineStyles;}

case BlockType.HEADING1: {  const blockH1 = block as HeadingBlock;  const align = blockH1.heading1.style.align;  const styles = makeHeadingStyles({ type: block.block_type, align });  text += `<div ${styles.headingStyles}>${transpileTextElements(    blockH1.block_id,    blockH1.heading1.elements,    isPreview,  )}</div>`;    text += renderChildBlocks(blockH1.block_id);  break;}

export function makeHeadingStyles(params: MakeHeadingStylesParams) {  const { type, align } = params;  const basicStyle: CSSProperties = {    lineHeight: 1.4,    letterSpacing: '-.02em',    fontWeight: 500,    color: '#1f2329',    textAlign: getTextAlignStyle(align || 1),  };
  let headingStyles: CSSProperties = {};  switch (type) {    case BlockType.HEADING1:      headingStyles = {        fontSize: 26,        marginTop: 26,        marginBottom: 10,        ...basicStyle,      };      break;      
    return createInlineStyles<'headingStyles'>({ headingStyles: headingStyles });}

export function isEmptyTextBlock(block: DocBlockText | undefined) {  if (文档块的类型为text且不为空 || 文档块类型不为text) {返回false；}  else {返回true;}}
export function processBlocks(blocks: DocBlock[]) {  const blockDepths = {};   const blockOrder = {};   function calcBlockFields(block: DocBlock, depth: number) {    blockDepths[block.block_id] = depth;            if (文本块类型为 ordered) {      1. 找到同级兄弟节点列表 brotherBlocks 与同类型同级兄弟节点列表 similarBrotherBlocks；      2. 找到当前节点在上述两个列表中的索引 brotherBlocksIndex，similarBrotherBlocksIndex；      3. 找到兄弟节点列表中的前一个节点 prevBrotherBlock。以及同类兄弟列表的前一个节点 prevSimilarBrotherBlock；
      if (当前节点是兄弟节点列表中的第一个节点 || 当前节点是同类兄弟节点列表中的第一个节点 || 前一个兄弟节点不是同类兄弟节点，且前一个兄弟节点是非空的文本块) {        blockOrder[block.block_id] = 1;      } else {        blockOrder[block.block_id] = 上一个同类兄弟的编号 + 1      }    }    递归处理子节点。如果当前节点的类型为 grid_column、tabel_cell、callout、quoter_container 的时候，深度重置为 1(calcBlockFields(childrenBlock, 1))，其他情况 calcBlockFields(childrenBlock, depth + 1);  }    从根节点开始递归处理。calcBlockFields(rootBlock, 0);  将记录的序号和深度（blockOrder, blockDepths）添加到每个节点中（block.depth, block.order）;}

export const listMarkRender = (type: ListType, block: DocBlock) => {  const { depth = 1, order = 1 } = block;
  if (type === ListType.BULLET) {    const styles = makeMarkerStyles(ListType.BULLET);    let marker: string;    marker = 按照深度，每三个一循环，依次为 '•'、'◦'、'▪'；    return `<span ${styles.markContainerStyle}>${marker}</span>`;  } else {    const styles = makeMarkerStyles(ListType.ORDERED);    let markerGenerator: (num: number) => number | string;    markerGenerator = 按照深度，每三个一循环，依次为数字、数字转小写字母、数字转罗马数字；    return `<span ${styles.markContainerStyle}>${markerGenerator(order)}.</span>`;  }};

const tableRenderer: BlockRenderer = (block, renderSpecifyBlock) => {  const blockTable = block as TableBlock;  const children = blockTable.table.cells;  const tableStyles = makeTableStyles();
  const { column_size, row_size, column_width, merge_info } = blockTable.table.property;    const totalWidth = column_width.reduce((acc, cur) => acc + cur, 0);  let text = `    <div ${tableStyles.tableWrapperStyles}>      <table width="${totalWidth}" ${tableStyles.tableStyles}>    `;    const processed = Array.from({ length: row_size }, () => Array(column_size).fill(false));  let mergeIndex = 0;     for (let i = 0; i < row_size; i++) {    text += '<tr>';    for (let j = 0; j < column_size; ) {      从 merge_info[mergeIndex] 获取当前合并信息 col_span 与 row_span，确保 col_span 和 row_span 至少为 1；                  if (!processed[i][j]) {        const tDStyles = makeTDStyles(column_width[j]);        const colspanAttr = col_span > 1 ? `colspan="${col_span}"` : '';        const rowspanAttr = row_span > 1 ? `rowspan="${row_span}"` : '';        text += `          <td valign="top" width="${column_width[j]}" ${colspanAttr} ${rowspanAttr} ${          tDStyles.tDStyles        }>            // 与之前的文档块直接渲染所有的子节点不同，表格需要在单元格内精准的渲染对应的 table cell 块，所以此处使用 renderSpecifyBlock 方法。            ${renderSpecifyBlock(children[i * column_size + j])}          </td>          `;                for (let m = i; m < Math.min(i + row_span, row_size); m++) {          for (let n = j; n < Math.min(j + col_span, column_size); n++) {            processed[m][n] = true;          }        }        j += col_span;         mergeIndex += col_span;       } else {        j++;        mergeIndex++;      }    }    text += '</tr>';  }  text += '</table></div>';
  return text;};

const tableCellRenderer: BlockRenderer = (block, isPreview, renderChildBlocks, _blocks) => {  const styles = makeTableCellStyles();
  return `    <div ${styles.tableCellWrapperStyle}>      ${renderChildBlocks(block.block_id, true)}    </div>`;};

function findNodeById(blocks: DocBlock[], id: string) {  return blocks.find(b => b.block_id === id);}
function checkIsInTable(blocks: DocBlock[], parentId: string) {  const parentNode = findNodeById(blocks, parentId);  if (parentNode) {    if (WRAPPERS_LIKE_TABLE.includes(parentNode.block_type)) {      return true;    }    return checkIsInTable(blocks, parentNode.parent_id);  }  return false;}

function restrictImageSize(  width: number,  height: number,  maxWidth: number = 820,  maxHeight: number = 780,): [number, number] {    if (width >= height - 50) {    if (width > maxWidth) {      return [maxWidth, Math.ceil(height * divide(maxWidth, width))];    }  } else {    if (height > maxHeight) {      return [Math.ceil(width * divide(maxHeight, height)), maxHeight];    }  }  return [width, height];}

const imageRenderer: BlockRenderer = (block, isPreview, _renderChildBlocks, blocks) => {  let text = '';  const blockImage = block as DocBlockImage;  const align = blockImage.image.align;  const src = `"${    isPreview ? blockImage.image.base64Url : `\$\{${blockImage.block_id}\}` // 实际发送时，用 ${block_id} 作为占位符，给到服务端填充图片附件地址。  }"`;  const [width] = restrictImageSize(blockImage.image.width, blockImage.image.height);  const isInTable = checkIsInTable(blocks, blockImage.parent_id);  const styles = makeImageStyles({ width, align, isInTable });
  text += `    <div ${styles.imgWrapperStyle}>      <img width="${isInTable ? '100%' : width}" ${styles.imgStyle} src=${src}>    </div>`;
  return text;};

elements.forEach(element => {  const textStyles = element.text_run?.text_element_style;  const elementSplit = (element.text_run?.content || '')    .replaceAll('&', '&amp;')    .replaceAll('<', '&lt;')    .replaceAll('>', '&gt;')    .replaceAll('"', '&quot;')    .replaceAll("'", '&#39;')    .match(/(.*?\n|.+)/g);  elementSplit &&    elementSplit.forEach(line => {      codeList.push({        text_run: {          content: line,          text_element_style: textStyles as TextElementStyle,        },      });    });});

const groupingCodeList = (list: TextElement[] = []) => {  const result: TextElement[][] = [];  let currentGroup: TextElement[] = [];
  list.forEach(item => {        currentGroup.push(item);        if (item.text_run?.content.includes('\n')) {      result.push(currentGroup);      currentGroup = [];    }  });
    if (currentGroup.length > 0) {    result.push(currentGroup);  }
  return result;};

const codeRenderer: BlockRenderer = (block, isPreview, renderChildBlocks, _blocks) => {  const styles = makeCodeStyles();
  const blockCode = block as DocBlockCode;  const codeLanguage = blockCode.code.style.language || 0;
    const codeList: TextElement[] = [];  const elements = blockCode.code.elements;
    上文中提到的对elements的处理...
  const groupedCodeLines = groupingCodeList(codeList);    const codeTr = groupedCodeLines    .map((line, index) => {      return `      <tr bgcolor="f5f6f7">        <td width="46" align="right" valign="top">          <pre ${styles.codeIndexStyles}>${index + 1}</pre>        </td>        <td>          <pre ${styles.codePreStyles}>${transpileTextElements(blockCode.block_id, line, isPreview,)}</pre>        </td>      </tr>      `;    })    .join('');
  const emptyTr = `    <tr bgcolor="f5f6f7">      <td width="46" align="right"><span>&nbsp;</span></td>      <td><pre ${styles.codePreStyles}>&nbsp;</pre></td>    </tr>    `;
  let text = `  <div ${styles.codeWrapperStyles}>    <table width="100%" ${styles.codeTableStyles}>      ${emptyTr}      ${codeTr}      ${emptyTr}    </table>  </div>  `;text += renderChildBlocks(blockCode.block_id, false);return text;};

const equationCoefficient = 8.421;
const enrichEquationElements: BlockPreprocessor = async (blocks, isPreview) => {  if (!window.MathJax) {    await loadScript('https://cdn.dewu.com/node-common/bc7b5cfc-1c7c-e649-710a-929f109e505e.js');  }
  const equationSVGList: SvgObj[] = [];   const equationElementList: TextElement[] = []; 
  blocks.forEach(block => {    const elements = getBlockElements(block);    let equationIndex = 0;
    elements.forEach(textEl => {            if (textEl.equation) {        equationElementList.push(textEl);        const equationId = `${block.block_id}_equation_${++equationIndex}`;        const svgEl = window.MathJax.tex2svg(textEl.equation.content).children[0];
                const svgHeight = svgEl的ex高度 * equationCoefficient;        const svgWidth = svgEl的ex宽度 * equationCoefficient;
        textEl.equation.svgHTML = svgEl.outerHTML;        textEl.equation.imageHeight = svgHeight;        textEl.equation.imageWidth = svgWidth;        textEl.equation.id = equationId;
        equationSVGList.push({          id: equationId,          svg: svgEl.outerHTML,          height: svgHeight,          width: svgWidth,        });      }    });  });
    if (!isPreview) {    OSS 上传配置...        const res = await allSvgsToImgThenUpload(equationSVGList);    equationElementList.forEach(element => {      从res中找到当前公式元素对应的图片，放入element.equation.imageUrl中    });  }};

function allSvgsToImgThenUpload(svgObjList: SvgObj[]) {    const conversionPromises = svgObjList.map(svgObj => svgToImgThenUpload(svgObj));
    return Promise.all(conversionPromises);}

function svgToImgThenUpload(svgObj: SvgObj): Promise<{ id: string; url: string }> {  return new Promise((resolve, reject) => {    const { width, height, id } = svgObj;    const svgString = svgObj.svg;    if (!width || !height) {      reject(`公式svg大小获取失败: ${id}`);      return;    }
        const encodedString = encodeURIComponent(svgString).replace(/'/g, '%27').replace(/"/g, '%22');    const dataUrl = 'data:image/svg+xml,' + encodedString;
        const image = new Image();    image.onload = () => {      const canvas = document.createElement('canvas');            canvas.width = width * 3;      canvas.height = height * 3;      canvas.style.width = `${width * 2}px`;      canvas.style.height = `${height * 2}px`;      const ctx = canvas.getContext('2d');
      ctx && ctx.drawImage(image, 0, 0, width * 3, height * 3);            canvas.toBlob(async blob => {        创建 File 对象并上传 CDN，返回 CDN 链接;      }, 'image/png');    };
    image.onerror = reject;    image.src = dataUrl;  });}