docs(ava/ntv): add ntv-schema phrase type description & demo

site/.dumi/global.ts

@@ -36,6 +36,7 @@ if (window) {
     (window as any).avaReact = require('../../packages/ava-react/src');
 
     require('antd/lib/alert/style/index.css');
+    require('katex/dist/katex.min.css');
 }
 
 

site/docs/guide/ntv/ntv-schema.zh.md

@@ -17,19 +17,21 @@ import { NarrativeTextSpec } from '@antv/ava';
 
 ## 结构介绍
 
-![ntv-schema](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*r_AtT5YHFvgAAAAAAAAAAAAADmJ7AQ/original)
+![ntv-schema](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*iKn_RIyeOi8AAAAAAAAAAAAADmJ7AQ/original)
 
 从结构层看：
 - 整套解读结构称为 narrative，包括一个题目（headline）和多个章节（section）；
 - 每个章节有多个段落（paragraph）构成，段落有标题类（heading）、正文类（normal）、列表类（bullets）和自定义类型；
 - 每个段落又由多个短语（phrase）构成。
 
-而短语层则体现出“数据描述文本”和普通文本的最大差别。短语（phrase）分为三种：text、entity 和 custom。
-- text 就是普通纯文本；
-- entity 是具有数据含义的短语，将数据映射为文本，是解读文本可视化的主要内容；
-- custom 则是一种提供给用户自定义的短语插槽，当前常被用于实现一些短语级别的交互。
+而短语层则体现出“数据描述文本”和普通文本的最大差别。短语（phrase）分为五种：
+1. text 普通纯文本内容，支持配置属性 bold 加粗、italic 斜体、underline 下划线，以及 url 传入超链接；
+2. escape 转义字符；
+3. formula 数学公式，对应 katex 语法。备注：如使用 `NarrativeTextVis` 组件渲染含 formula 的内容，需要自行引入 css cdn 资源，详情见 [katex 官方网站](https://katex.org/)；
+4. entity 是具有数据含义的短语，将数据映射为文本，是解读文本可视化的主要内容；
+5. custom 则是一种提供给用户自定义的短语插槽，当前常被用于实现一些短语级别的交互。
 
-以下是所有类型为 Entity 的短语一览：
+以下是所有类型为 Entity 的短语一览，其他短语类型效果与使用参考 demo [其他短语类型](../../../examples/ntv/basic/#extra-phrases)。
 
 <Playground path="ntv/basic/demo/entity-phrases.tsx" ></Playground>
 

site/examples/ntv/basic/demo/extra-phrases.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import ReactDOM from 'react-dom';
+import { NarrativeTextVis } from '@antv/ava-react';
+
+import type { NarrativeTextSpec } from '@antv/ava';
+
+// 在使用代码中，需要加入类似下面的方式的样式引用从而支持渲染正确的公式样式
+// import 'katex/dist/katex.min.css';
+
+const spec: NarrativeTextSpec = {
+  sections: [
+    {
+      paragraphs: [
+        {
+          type: 'normal',
+          phrases: [
+            {
+              type: 'text',
+              value: '在 text 中的转义字符字符 \r\n 无效，后面是 escape 类型短语，换行：',
+            },
+            {
+              type: 'escape',
+              value: '\n',
+            },
+            {
+              type: 'text',
+              value: '回车',
+            },
+            {
+              type: 'escape',
+              value: '\r',
+            },
+          ],
+        },
+        {
+          type: 'normal',
+          phrases: [
+            {
+              type: 'text',
+              value: '渲染公式：',
+            },
+            {
+              type: 'formula',
+              // eslint-disable-next-line no-useless-escape, quotes
+              value: `c = \\pm\\sqrt{a^2 + b^2}`,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+ReactDOM.render(<NarrativeTextVis spec={spec} />, document.getElementById('container'));

site/examples/ntv/basic/demo/meta.json

@@ -20,6 +20,14 @@
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*rZbuSrxJJ58AAAAAAAAAAAAADmJ7AQ/original"
     },
+    {
+      "filename": "extra-phrases.tsx",
+      "title": {
+        "en": "Extra Phrases",
+        "zh": "其他短语类型"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ujvNSL7X4fEAAAAAAAAAAAAADmJ7AQ/original"
+    },
     {
       "filename": "theme.tsx",
       "title": {

site/package.json

@@ -42,6 +42,7 @@
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.3",
     "insert-css": "^2.0.0",
+    "katex": "^0.16.4",
     "lodash": "^4.17.21",
     "mockjs": "^1.1.0",
     "moment": "^2.29.4",