fix(ava-react/ntv): escape and formula phrase support classname and s…

…tyles schema
antvis · Apr 20, 2023 · 9fd6abf · 9fd6abf
1 parent ae6ab06
commit 9fd6abf
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/packages/ava-react/src/NarrativeTextVis/phrases/Phrase.tsx b/packages/ava-react/src/NarrativeTextVis/phrases/Phrase.tsx
@@ -147,14 +147,20 @@ export const Phrase: React.FC<PhraseProps> = ({
 
   // use pre to render escape character
   // 使用 pre 标签渲染特殊转义字符
-  if (isEscapePhrase(phrase)) return <pre>{phrase.value}</pre>;
+  if (isEscapePhrase(phrase))
+    return (
+      <pre className={cx(phrase.className)} style={phrase.styles}>
+        {phrase.value}
+      </pre>
+    );
 
   // use katex to render formula
   // 使用 katex 渲染公式
   if (isFormulaPhrase(phrase))
     return (
       <FormulaWrapper
-        className={`${NTV_PREFIX_CLS}-formula`}
+        className={cx(phrase.className, `${NTV_PREFIX_CLS}-formula`)}
+        style={phrase.styles}
         dangerouslySetInnerHTML={{
           __html: katex.renderToString(phrase.value, {
             throwOnError: false,

diff --git a/playground/src/DevPlayground/NTV/index.tsx b/playground/src/DevPlayground/NTV/index.tsx
@@ -386,6 +386,10 @@ const App = () => {
                       type: 'formula',
                       // eslint-disable-next-line no-useless-escape, quotes
                       value: `c = \\pm\\sqrt{a^2 + b^2}`,
+                      className: 'my-formula',
+                      styles: {
+                        color: 'red',
+                      },
                     },
                   ],
                 },