diff options
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/react-docs/CHANGELOG.json | 4 | ||||
| -rw-r--r-- | packages/react-docs/src/components/type_definition.tsx | 40 |
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; + } } |