Meilisearch客户端完美改造

Dreamfine

已于 2023-10-07 11:49:04 修改

阅读量166

点赞数

文章标签：前端 html javascript

于 2023-10-05 18:13:10 首次发布

本文链接：https://blog.csdn.net/Dreamfine/article/details/133582518

版权

关键部分：原来Body部分显示有问题，对\n视而不见。

改造：

  // Used in Banner
  typo15: {
    tag: 'span',
    style: css`
      font-size: 15px;
      font-weight: 300;
      line-height: 25px;
      display: inline-block;
    `,
  },
  // Used in Body
  typoBody: {
    tag: 'span',
    style: css`
      font-size: 15px;
      font-weight: 300;
      line-height: 25px;
      white-space: pre-wrap;
    `,
  },


...


const Highlight = connectHighlight(
  ({ highlight, attribute, hit, indexContextValue, ...props }) => {
    const parsedHit = highlight({
      highlightProperty: '_highlightResult',
      attribute,
      hit,
    })

    return (
      <Typography variant="typoBody" {...props}>
        {parsedHit.map((part, index) =>
          part.isHighlighted ? (
            <mark key={index}>{part.value}</mark>
          ) : (
            <span key={index}>{part.value}</span>
          )
        )}
      </Typography>
    )
  }
)

其它改造不说了，没什么惊喜。