release v2.3.2

README.md

@@ -10,20 +10,14 @@
 ![license](https://img.shields.io/github/license/jin-yufeng/mp-html)
 [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
-## news
-1. 欢迎加入 `QQ` 交流群：`699734691`  
-   ![group](https://6874-html-foe72-1259071903.tcb.qcloud.la/assets/group.jpg?sign=5ccc928839526992be4f7187c5a65d54&t=1648800665)  
-2. 示例微信小程序 `富文本插件` 添加 `获取组件包` 功能 [详细](https://jin-yufeng.gitee.io/mp-html/#/overview/quickstart?id=mp)  
-   ![富文本插件](https://6874-html-foe72-1259071903.tcb.qcloud.la/assets/case/%E5%AF%8C%E6%96%87%E6%9C%AC%E6%8F%92%E4%BB%B6.jpg?sign=d58f89bcd2b9e4341f35a2bacfeb076c&t=1648800697)
-
 ## 功能介绍
 - 支持在多个主流的小程序平台和 `uni-app` 中使用
 - 支持丰富的标签（包括 `table`、`video`、`svg` 等）
 - 支持丰富的事件效果（自动预览图片、链接处理等）
 - 支持设置占位图（加载中、出错时、预览时）
 - 支持锚点跳转、长按复制等丰富功能
 - 支持大部分 *html* 实体
-- 丰富的插件（关键词搜索、内容 **编辑** 等）
+- 丰富的插件（关键词搜索、内容编辑、`latex` 公式等）
 - 效率高、容错性强且轻量化（`≈25KB`，`9KB gzipped`）
 
 查看 [功能介绍](https://jin-yufeng.gitee.io/mp-html/#/overview/feature) 了解更多
@@ -202,22 +196,23 @@
 | style | 匹配 style 标签中的样式 |
 | txv-video | 使用腾讯视频 |
 | img-cache | 图片缓存 by [@PentaTea](https://github.com/PentaTea) |
+| latex | 渲染 latex 公式 by [@Zeng-J](https://github.com/Zeng-J) |
 
 查看 [插件](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin) 了解更多
 
 ## 使用案例
 
 | 官方示例 | 欢喜商城 | 多么生活 | 全品作业小助手 | 米兔旅行 | 食法查 |
 |:---:|:---:|:---:|:---:|:---:|:---:|
-| ![富文本插件](https://6874-html-foe72-1259071903.tcb.qcloud.la/assets/case/%E5%AF%8C%E6%96%87%E6%9C%AC%E6%8F%92%E4%BB%B6.jpg?sign=d58f89bcd2b9e4341f35a2bacfeb076c&t=1648800697) | ![欢喜商城](https://6874-html-foe72-1259071903.tcb.qcloud.la/assets/case/%E6%AC%A2%E5%96%9C%E5%95%86%E5%9F%8E.png?sign=7a43951b960b9d4357bbfd1a14e00517&t=1648800783) | ![多么生活](https://6874-html-foe72-1259071903.tcb.qcloud.la/assets/case/%E5%A4%9A%E4%B9%88%E7%94%9F%E6%B4%BB.jpg?sign=20ace45a0de175749b8641f9faaedd99&t=1648800796) | ![全品作业小助手](https://6874-html-foe72-1259071903.tcb.qcloud.la/assets/case/%E5%85%A8%E5%93%81%E4%BD%9C%E4%B8%9A%E5%B0%8F%E5%8A%A9%E6%89%8B.jpg?sign=a72d0d0d10aade51ccf6c40bdd512d0d&t=1648800808) | ![米兔旅行](https://6874-html-foe72-1259071903.tcb.qcloud.la/assets/case/%E7%B1%B3%E5%85%94%E6%97%85%E8%A1%8C.png?sign=30a1076ff47cbf16574676e99ef38f5c&t=1648800822) | ![食法查](https://6874-html-foe72-1259071903.tcb.qcloud.la/assets/case/%E9%A3%9F%E6%B3%95%E6%9F%A5.png?sign=8439ce23400d333c9ef9ae1b9f6870bc&t=1648800833) |
+| ![富文本插件](docs/assets/case/富文本插件.jpg) | ![欢喜商城](docs/assets/case/欢喜商城.png) | ![多么生活](docs/assets/case/多么生活.jpg) | ![全品作业小助手](docs/assets/case/全品作业小助手.jpg) | ![米兔旅行](docs/assets/case/米兔旅行.png) | ![食法查](docs/assets/case/食法查.png) |
 
 | 微慕 | 古典文学名著阅读 | 程序员技术之旅 | 典典博客 | Geek 时代 | 备忘录与记事本 |
 |:---:|:---:|:---:|:---:|:---:|:---:|
-| ![微慕](https://6874-html-foe72-1259071903.tcb.qcloud.la/assets/case/%E5%BE%AE%E6%85%95.jpg?sign=e6e748130bce0666348490ee5b8e9b18&t=1648800882) | ![古典文学名著阅读](https://6874-html-foe72-1259071903.tcb.qcloud.la/assets/case/%E5%8F%A4%E5%85%B8%E6%96%87%E5%AD%A6%E5%90%8D%E8%91%97%E9%98%85%E8%AF%BB.jpg?sign=1878b24fe48a6295a7dc68b5f96d6793&t=1648800892) | ![程序员技术之旅](https://6874-html-foe72-1259071903.tcb.qcloud.la/assets/case/%E7%A8%8B%E5%BA%8F%E5%91%98%E6%8A%80%E6%9C%AF%E4%B9%8B%E6%97%85.jpg?sign=112c3a6576be60cecf14cd848c87a9e4&t=1648800907) | ![典典博客](https://6874-html-foe72-1259071903.tcb.qcloud.la/assets/case/%E5%85%B8%E5%85%B8%E5%8D%9A%E5%AE%A2.jpg?sign=c847015206b62acb1439902c99482b19&t=1648800923) | ![Geek时代](https://6874-html-foe72-1259071903.tcb.qcloud.la/assets/case/Geek%E6%97%B6%E4%BB%A3.jpg?sign=4edb794fca522123748b12a9dc071b84&t=1648800937) | ![备忘录与记事本](https://6874-html-foe72-1259071903.tcb.qcloud.la/assets/case/%E5%A4%87%E5%BF%98%E5%BD%95%E4%B8%8E%E8%AE%B0%E4%BA%8B%E6%9C%AC.jpg?sign=363f2ee0876ad1a19153ce2cfc131488&t=1648800951) |
+| ![微慕](docs/assets/case/微慕.jpg) | ![古典文学名著阅读](docs/assets/case/古典文学名著阅读.jpg) | ![程序员技术之旅](docs/assets/case/程序员技术之旅.jpg) | ![典典博客](docs/assets/case/典典博客.jpg) | ![Geek时代](docs/assets/case/Geek时代.jpg) | ![备忘录与记事本](docs/assets/case/备忘录与记事本.jpg) |
 
 | 优秀笔记 | 365 刷题 | 同城共享书 | 技术源 share | 周仙神 | 你的代码写的真棒 |
 |:---:|:---:|:---:|:---:|:---:|:---:|
-| ![优秀笔记](https://6874-html-foe72-1259071903.tcb.qcloud.la/assets/case/%E4%BC%98%E7%A7%80%E7%AC%94%E8%AE%B0.jpg?sign=b8609db92f77a7ccdbecc30a099f49a0&t=1648800969) | ![365刷题](https://6874-html-foe72-1259071903.tcb.qcloud.la/assets/case/365%E5%88%B7%E9%A2%98.jpg?sign=c5dc0a8c2fd683d75216e2ae69ac9318&t=1648800982) | ![同城共享书](https://6874-html-foe72-1259071903.tcb.qcloud.la/assets/case/%E5%90%8C%E5%9F%8E%E5%85%B1%E4%BA%AB%E4%B9%A6.jpg?sign=bef1c6052405a1df83d6b14c486c23dd&t=1648800995) | ![技术源share](https://6874-html-foe72-1259071903.tcb.qcloud.la/assets/case/%E6%8A%80%E6%9C%AF%E6%BA%90share.jpg?sign=6a53a717a67f9a1d10beb23c5d982362&t=1648801059) | ![周仙神](https://6874-html-foe72-1259071903.tcb.qcloud.la/assets/case/%E5%91%A8%E4%BB%99%E7%A5%9E.png?sign=5bbb226921eabe92a3b7db9a6299436f&t=1648801009) | ![你的代码写的真棒](https://6874-html-foe72-1259071903.tcb.qcloud.la/assets/case/%E4%BD%A0%E7%9A%84%E4%BB%A3%E7%A0%81%E5%86%99%E7%9A%84%E7%9C%9F%E6%A3%92.jpg?sign=631ca57da7c4b28aef6b785fdcc596cd&t=1648801020) |
+| ![优秀笔记](docs/assets/case/优秀笔记.jpg) | ![365刷题](docs/assets/case/365刷题.jpg) | ![同城共享书](docs/assets/case/同城共享书.jpg) | ![技术源share](docs/assets/case/技术源share.jpg) | ![周仙神](docs/assets/case/周仙神.png) | ![你的代码写的真棒](docs/assets/case/你的代码写的真棒.jpg) |
 
 以上排名不分先后，更多可见 [使用案例收集](https://github.com/jin-yufeng/mp-html/issues/27)（欢迎添加）  
 
@@ -226,10 +221,23 @@
   您可以免费的使用（包括商用）、复制或修改本组件 [MIT License](https://github.com/jin-yufeng/mp-html/blob/master/LICENSE)  
   在用于生产环境前务必经过充分测试，由插件 `bug` 带来的损失概不负责（可以自行修改源码）  
 
+- 联系  
+  欢迎加入 `QQ` 交流群：`699734691`  
+  ![group](docs/assets/group.jpg)  
+
 - 支持  
-  ![支持](https://6874-html-foe72-1259071903.tcb.qcloud.la/assets/sponsor.png?sign=a33f2ed22c74c9cfccfda6deebef108b&t=1648801034)   
+  ![支持](docs/assets/sponsor.png)   
 
 ## 更新日志
+- v2.3.2 (20220813)
+  1. `A` 增加 [latex](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#latex) 插件，可以渲染数学公式 [详细](https://github.com/jin-yufeng/mp-html/pull/447) by [@Zeng-J](https://github.com/Zeng-J)
+  2. `U` 优化根节点下有很多标签的长内容渲染速度
+  3. `U` `highlight` 插件适配 `lang-xxx` 格式
+  4. `F` 修复了 `table` 标签设置 `border` 属性后可能无法修改边框样式的问题 [详细](https://github.com/jin-yufeng/mp-html/pull/439) by [@zouxingjie](https://github.com/zouxingjie)
+  5. `F` 修复了 `editable` 插件输入连续空格无效的问题
+  6. `F` 修复了 `uni-app` 包 `vue3` 图片设置 `inline` 会报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/438)
+  7. `F` 修复了 `uni-app` 包 `vue3` 使用 `table` 可能报错的问题
+
 - v2.3.1 (20220520)
   1. `U` `uni-app` 包 `app` 端支持使用本地图片
   2. `U` 优化了微信小程序 `selectable` 属性在 `ios` 端的处理 [详细](https://jin-yufeng.gitee.io/mp-html/#/basic/prop#selectable)
@@ -240,21 +248,6 @@
   7. `F` 修复了原生包个别情况下可能报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/428)
   8. `F` 修复了 `editable` 插件 `uni-app` 包的 `app` 端插入视频无法预览的问题
 
-- v2.3.0 (20220401)
-  1. `A` 增加了 `play` 事件，音视频播放时触发，可用于与页面其他音视频进行互斥播放 [详细](https://jin-yufeng.gitee.io/mp-html/#/basic/event#play)
-  2. `U` `show-img-menu` 属性支持控制预览时是否长按弹出菜单
-  3. `U` 优化 `wxs` 处理，提高渲染性能 [详细](https://developers.weixin.qq.com/community/develop/article/doc/0006cc2b204740f601bd43fa25a413)  
-  4. `U` `video` 标签支持 `object-fit` 属性
-  5. `U` 增加支持一些常用实体编码 [详细](https://github.com/jin-yufeng/mp-html/issues/418)
-  6. `F` 修复了图片仅设置高度可能不显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/410)
-  7. `F` 修复了 `video` 标签高度设置为 `auto` 不显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/411)
-  8. `F` 修复了使用 `grid` 布局时可能样式错误的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/413)
-  9. `F` 修复了含有合并单元格的表格部分情况下显示异常的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/417)
-  10. `F` 修复了百度小程序使用 `br` 标签可能部分不显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/409)
-  11. `F` 修复了 `editable` 插件连续插入内容时顺序不正确的问题
-  12. `F` 修复了 `uni-app` 包 `vue3` 使用 `audio` 插件报错的问题
-  13. `F` 修复了 `uni-app` 包 `highlight` 插件使用自定义的 `prism.min.js` 报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/416)
-
   从 `1.x` 的升级方法可见 [更新指南](https://jin-yufeng.gitee.io/mp-html/#/changelog/changelog?id=v200)
 
 查看 [更新日志](https://jin-yufeng.gitee.io/mp-html/#/changelog/changelog) 了解更多

dist/uni-app/components/mp-html/mp-html.vue

@@ -12,7 +12,7 @@
 
 <script>
 /**
- * mp-html v2.3.1
+ * mp-html v2.3.2
  * @description 富文本组件
  * @tutorial https://github.com/jin-yufeng/mp-html
  * @property {String} container-style 容器的样式

dist/uni-app/components/mp-html/parser.js

@@ -138,6 +138,26 @@ function decodeEntity (str, amp) {
   return str
 }
 
+/**
+ * @description 合并多个块级标签，加快长内容渲染
+ * @param {Array} nodes 要合并的标签数组
+ */
+function mergeNodes (nodes) {
+  let i = nodes.length - 1
+  for (let j = i; j >= -1; j--) {
+    if (j === -1 || nodes[j].c || !nodes[j].name || (nodes[j].name !== 'div' && nodes[j].name !== 'p' && nodes[j].name[0] !== 'h') || (nodes[j].attrs.style || '').includes('inline')) {
+      if (i - j >= 5) {
+        nodes.splice(j + 1, i - j, {
+          name: 'div',
+          attrs: {},
+          children: nodes.slice(j + 1, i + 1)
+        })
+      }
+      i = j - 1
+    }
+  }
+}
+
 /**
  * @description html 解析器
  * @param {Object} vm 组件实例
@@ -170,6 +190,9 @@ Parser.prototype.parse = function (content) {
   while (this.stack.length) {
     this.popNode()
   }
+  if (this.nodes.length > 50) {
+    mergeNodes(this.nodes)
+  }
   return this.nodes
 }
 
@@ -788,6 +811,8 @@ Parser.prototype.popNode = function () {
     let padding = parseFloat(attrs.cellpadding)
     let spacing = parseFloat(attrs.cellspacing)
     const border = parseFloat(attrs.border)
+    const bordercolor = styleObj['border-color']
+    const borderstyle = styleObj['border-style']
     if (node.c) {
       // padding 和 spacing 默认 2
       if (isNaN(padding)) {
@@ -798,7 +823,7 @@ Parser.prototype.popNode = function () {
       }
     }
     if (border) {
-      attrs.style += ';border:' + border + 'px solid gray'
+      attrs.style += `;border:${border}px ${borderstyle || 'solid'} ${bordercolor || 'gray'}`
     }
     if (node.flag && node.c) {
       // 有 colspan 或 rowspan 且含有链接的表格通过 grid 布局实现
@@ -848,7 +873,7 @@ Parser.prototype.popNode = function () {
               }
               style = style.substr(0, start) + style.substr(end)
             }
-            style += (border ? `;border:${border}px solid gray` + (spacing ? '' : ';border-right:0;border-bottom:0') : '') + (padding ? `;padding:${padding}px` : '')
+            style = (border ? `;border:${border}px ${borderstyle || 'solid'} ${bordercolor || 'gray'}` + (spacing ? '' : ';border-right:0;border-bottom:0') : '') + (padding ? `;padding:${padding}px` : '') + ';' + style
             // 处理列合并
             if (td.attrs.colspan) {
               style += `;grid-column-start:${col};grid-column-end:${col + parseInt(td.attrs.colspan)}`
@@ -901,7 +926,7 @@ Parser.prototype.popNode = function () {
             const td = nodes[i]
             if (td.name === 'th' || td.name === 'td') {
               if (border) {
-                td.attrs.style = `border:${border}px solid gray;${td.attrs.style || ''}`
+                td.attrs.style = `border:${border}px ${borderstyle || 'solid'} ${bordercolor || 'gray'};${td.attrs.style || ''}`
               }
               if (padding) {
                 td.attrs.style = `padding:${padding}px;${td.attrs.style || ''}`
@@ -957,7 +982,7 @@ Parser.prototype.popNode = function () {
       for (let i = node.children.length; i--;) {
         const child = node.children[i]
         // #ifdef (MP-WEIXIN || MP-QQ || APP-PLUS || MP-360) && VUE3
-        if (child.name && (config.inlineTags[child.name] || (child.attrs.style || '').includes('inline')) && !child.c) {
+        if (child.name && (config.inlineTags[child.name] || ((child.attrs.style || '').includes('inline') && child.children)) && !child.c) {
           traversal(child)
         }
         // #endif
@@ -990,22 +1015,8 @@ Parser.prototype.popNode = function () {
     node.f = ';max-width:100%'
   }
 
-  // 优化长内容加载速度
   if (children.length >= 50 && node.c && !(styleObj.display || '').includes('flex')) {
-    let i = children.length - 1
-    for (let j = i; j >= -1; j--) {
-      // 合并多个块级标签
-      if (j === -1 || children[j].c || !children[j].name || (children[j].name !== 'div' && children[j].name !== 'p' && children[j].name[0] !== 'h') || (children[j].attrs.style || '').includes('inline')) {
-        if (i - j >= 5) {
-          children.splice(j + 1, i - j, {
-            name: 'div',
-            attrs: {},
-            children: node.children.slice(j + 1, i + 1)
-          })
-        }
-        i = j - 1
-      }
-    }
+    mergeNodes(children)
   }
   // #endif
 
@@ -1055,7 +1066,15 @@ Parser.prototype.onText = function (text) {
       }
     }
     // 去除含有换行符的空串
-    if (trim === ' ' && flag) return
+    if (trim === ' ') {
+      if (flag) return
+      // #ifdef VUE3
+      else {
+        const parent = this.stack[this.stack.length - 1]
+        if (parent && parent.name[0] === 't') return
+      }
+      // #endif
+    }
     text = trim
   }
   const node = Object.create(null)

docs/README.md

@@ -10,12 +10,6 @@
 ![license](https://img.shields.io/github/license/jin-yufeng/mp-html)
 [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
-## 📰 news :id=news
-1. 欢迎加入 *QQ* 交流群：*699734691*  
-   ![group](assets/group.jpg)  
-2. 示例微信小程序 *富文本插件* 添加 *获取组件包* 功能 [详细](overview/quickstart?id=mp)  
-   ![富文本插件](assets/case/富文本插件.jpg)
-
 ## 📢 概况 :id=overview
 显示动态 *html* 富文本是很多应用必要的需求，小程序平台不支持 *dom* 操作使得这成为一个难题，其自带的 *rich-text* 组件支持的标签少且屏蔽所有事件，难以实际应用。因此就有了这样一个能够便捷的在小程序平台上处理富文本的组件，还支持丰富的扩展功能。  
 
@@ -26,7 +20,7 @@
 - 支持设置占位图（加载中、出错时、预览时）
 - 支持锚点跳转、长按复制等丰富功能
 - 支持大部分 *html* 实体
-- 丰富的插件（关键词搜索、内容 **编辑** 等）
+- 丰富的插件（关键词搜索、内容编辑、*latex* 公式 等）
 - 效率高、容错性强且轻量化（*≈25KB*，*9KB gzipped*）
 
 查看 [功能介绍](overview/feature) 了解更多
@@ -47,7 +41,8 @@
 
 以上排名不分先后，更多可见 [使用案例收集](https://github.com/jin-yufeng/mp-html/issues/27)（欢迎添加）  
 
-## 🎈 赞赏支持 :id=sponsor
+## 🎈 联系与支持 :id=sponsor
+![group](assets/group.jpg)
 ![支持](assets/sponsor.png)
 
 ## 📃 许可 :id=license

docs/_coverpage.md

@@ -1,6 +1,6 @@
 ![logo](assets/logo/logo.png)
 
-# mp-html <small>2.3.1</small>
+# mp-html <small>2.3.2</small>
 
 > 一个强大的小程序富文本组件
 

docs/advanced/develop.md

@@ -71,6 +71,8 @@ console.log('这不是微信平台')
 修改完成后，可按以下步骤生成新的组件包  
 在 *mp-html* 文件夹下执行：  
 
+?> 以下命令需要在组件包根目录下执行，即包含 [package.json](https://github.com/jin-yufeng/mp-html/blob/master/package.json) 的目录（如果通过 *npm* 获取就是 *node_modules/mp-html*）
+
 1. 安装依赖  
    ```bash
    # 通过 npm 安装