aboutsummaryrefslogtreecommitdiffstats
path: root/packages/react-docs
diff options
context:
space:
mode:
Diffstat (limited to 'packages/react-docs')
-rw-r--r--packages/react-docs/CHANGELOG.json4
-rw-r--r--packages/react-docs/src/components/type_definition.tsx40
2 files changed, 43 insertions, 1 deletions
diff --git a/packages/react-docs/CHANGELOG.json b/packages/react-docs/CHANGELOG.json
index 951ed84e0..0b0d6bdc8 100644
--- a/packages/react-docs/CHANGELOG.json
+++ b/packages/react-docs/CHANGELOG.json
@@ -9,6 +9,10 @@
{
"note": "Added support for rendering nested function types within interface types",
"pr": 519
+ },
+ {
+ "note": "Improve type comment rendering",
+ "pr": 535
}
]
},
diff --git a/packages/react-docs/src/components/type_definition.tsx b/packages/react-docs/src/components/type_definition.tsx
index 7a1c86da5..6d24145a1 100644
--- a/packages/react-docs/src/components/type_definition.tsx
+++ b/packages/react-docs/src/components/type_definition.tsx
@@ -122,7 +122,9 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
</pre>
</div>
<div style={{ maxWidth: 620 }}>
- {customType.comment && <Comment comment={customType.comment} className="py2" />}
+ {customType.comment && (
+ <Comment comment={this._formatComment(customType.comment)} className="py2" />
+ )}
</div>
</div>
);
@@ -132,4 +134,40 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
shouldShowAnchor,
});
}
+ /**
+ * Type definition comments usually describe the type as a whole or the individual
+ * properties within the type. Since TypeDoc just treats these comments simply as
+ * one paragraph, we do some additional formatting so that we can display individual
+ * property comments on their own lines.
+ * E.g:
+ * Interface SomeConfig
+ * {
+ * networkId: number,
+ * derivationPath: string,
+ * }
+ * networkId: The ethereum networkId to set as the chainId from EIP155
+ * derivationPath: Initial derivation path to use e.g 44'/60'/0'
+ *
+ * Each property description should be on a new line.
+ */
+ private _formatComment(text: string) {
+ const NEW_LINE_REGEX = /(\r\n|\n|\r)/gm;
+ const sanitizedText = text.replace(NEW_LINE_REGEX, ' ');
+ const PROPERTY_DESCRIPTION_DIVIDER = ':';
+ if (!_.includes(sanitizedText, PROPERTY_DESCRIPTION_DIVIDER)) {
+ return sanitizedText;
+ }
+ const segments = sanitizedText.split(PROPERTY_DESCRIPTION_DIVIDER);
+ _.each(segments, (s: string, i: number) => {
+ if (i === 0 || i === segments.length - 1) {
+ return;
+ }
+ const words = s.split(' ');
+ const property = words[words.length - 1];
+ words[words.length - 1] = `\n\n${property}`;
+ segments[i] = words.join(' ');
+ });
+ const final = segments.join(PROPERTY_DESCRIPTION_DIVIDER);
+ return final;
+ }
}