From 6fc996468c2f755ef36430d396026e5ed50a4ecd Mon Sep 17 00:00:00 2001 From: Yangshun Tay Date: Sun, 15 Dec 2019 18:03:56 -0800 Subject: [PATCH] Prettify docs files (#2275) Summary: **Summary** Prettier can also be used to format more than just JS files, it can format Markdown files too. Instead of using Flow parser for all files in `prettier.config.js`, we can just limit Flow parser for JS files and let Prettier find the default parsers for the various file formats. Hence I tweaked the Prettier config and added overrides for: - JS format - Use Flow parser - Markdown format - Restrict to 80 characters so that it's easier to read I then ran Prettier on all the docs. I've added a `prettier:diff` command into the `lint-docs` step, ran alongside with Alex that will fail when there are unformatted docs. It's not part of the CI step as I think that might be a bit too strict given that some people (including myself) edit docs in the GitHub UI and that might cause formatting issues which can be fixed by running the `format-docs` command every now and then. The formatting is only restricted to the docs now and not code as it's potentially dangerous to format code that gets synced with internal FB repos. **Test Plan** Load website. Pull Request resolved: https://github.com/facebook/draft-js/pull/2275 Reviewed By: mrkev Differential Revision: D18807420 Pulled By: yangshun fbshipit-source-id: b3f34282c2a2cad8e89cd90e8f3f6b3860b747fc --- docs/APIReference-APIMigration.md | 93 ++++++++----------- docs/APIReference-CharacterMetadata.md | 4 +- docs/APIReference-ContentBlock.md | 40 ++++---- docs/APIReference-ContentState.md | 13 ++- docs/APIReference-Data-Conversion.md | 3 +- docs/APIReference-Editor.md | 5 +- docs/APIReference-EditorState.md | 37 ++++---- docs/APIReference-Entity.md | 2 +- docs/APIReference-KeyBindingUtil.md | 2 +- docs/APIReference-Modifier.md | 2 +- docs/APIReference-SelectionState.md | 6 +- docs/Advanced-Topics-Custom-Block-Render.md | 36 +++---- docs/Advanced-Topics-Decorators.md | 26 ++++-- ...nced-Topics-EditorState-Race-Conditions.md | 20 ++-- docs/Advanced-Topics-Entities.md | 27 +++--- docs/Advanced-Topics-Inline-Styles.md | 8 +- docs/Advanced-Topics-Issues-and-Pitfalls.md | 5 +- docs/Overview.md | 26 ++---- docs/QuickStart-API-Basics.md | 11 ++- docs/QuickStart-Rich-Styling.md | 8 +- package.json | 4 +- prettier.config.js | 15 ++- website/README.md | 8 ++ 23 files changed, 210 insertions(+), 191 deletions(-) diff --git a/docs/APIReference-APIMigration.md b/docs/APIReference-APIMigration.md index 1f92e2253f..462d020516 100644 --- a/docs/APIReference-APIMigration.md +++ b/docs/APIReference-APIMigration.md @@ -11,9 +11,9 @@ to the `ContentState` record. This API improvement unlocks the path for many benefits that will be available in v0.11: -* DraftEntity instances and storage will be immutable. -* DraftEntity will no longer be globally accessible. -* Any changes to entity data will trigger a re-render. +- DraftEntity instances and storage will be immutable. +- DraftEntity will no longer be globally accessible. +- Any changes to entity data will trigger a re-render. ## Quick Overview @@ -24,21 +24,15 @@ Here is a quick list of what has been changed and how to update your application **Old Syntax** ```js -const entityKey = Entity.create( - urlType, - 'IMMUTABLE', - {src: urlValue}, -); +const entityKey = Entity.create(urlType, 'IMMUTABLE', {src: urlValue}); ``` **New Syntax** ```js -const contentStateWithEntity = contentState.createEntity( - urlType, - 'IMMUTABLE', - {src: urlValue}, -); +const contentStateWithEntity = contentState.createEntity(urlType, 'IMMUTABLE', { + src: urlValue, +}); const entityKey = contentStateWithEntity.getLastCreatedEntityKey(); ``` @@ -65,7 +59,8 @@ const entityInstance = contentState.getEntity(entityKey); ```js const compositeDecorator = new CompositeDecorator([ { - strategy: (contentBlock, callback) => exampleFindTextRange(contentBlock, callback), + strategy: (contentBlock, callback) => + exampleFindTextRange(contentBlock, callback), component: ExampleTokenComponent, }, ]); @@ -76,11 +71,9 @@ const compositeDecorator = new CompositeDecorator([ ```js const compositeDecorator = new CompositeDecorator([ { - strategy: ( - contentBlock, - callback, - contentState - ) => exampleFindTextRange(contentBlock, callback, contentState), + strategy: (contentBlock, callback, contentState) => ( + contentBlock, callback, contentState + ), component: ExampleTokenComponent, }, ]); @@ -88,24 +81,21 @@ const compositeDecorator = new CompositeDecorator([ Note that ExampleTokenComponent will receive contentState as a prop. -Why does the 'contentState' get passed into the decorator strategy now? Because we may need it if our strategy is to find certain entities in the contentBlock: +Why does the 'contentState' get passed into the decorator strategy now? Because we may need it if our strategy is to find certain entities in the contentBlock: ```js const mutableEntityStrategy = function(contentBlock, callback, contentState) { - contentBlock.findEntityRanges( - (character) => { - const entityKey = character.getEntity(); - if (entityKey === null) { - return false; - } - // To look for certain types of entities, - // or entities with a certain mutability, - // you may need to get the entity from contentState. - // In this example we get only mutable entities. - return contentState.getEntity(entityKey).getMutability() === 'MUTABLE'; - }, - callback, - ); + contentBlock.findEntityRanges(character => { + const entityKey = character.getEntity(); + if (entityKey === null) { + return false; + } + // To look for certain types of entities, + // or entities with a certain mutability, + // you may need to get the entity from contentState. + // In this example we get only mutable entities. + return contentState.getEntity(entityKey).getMutability() === 'MUTABLE'; + }, callback); }; ``` @@ -115,34 +105,25 @@ const mutableEntityStrategy = function(contentBlock, callback, contentState) { ```js function findLinkEntities(contentBlock, callback) { - contentBlock.findEntityRanges( - (character) => { - const entityKey = character.getEntity(); - return ( - entityKey !== null && - Entity.get(entityKey).getType() === 'LINK' - ); - }, - callback, - ); -}; + contentBlock.findEntityRanges(character => { + const entityKey = character.getEntity(); + return entityKey !== null && Entity.get(entityKey).getType() === 'LINK'; + }, callback); +} ``` **New Syntax** ```js function findLinkEntities(contentBlock, callback, contentState) { - contentBlock.findEntityRanges( - (character) => { - const entityKey = character.getEntity(); - return ( - entityKey !== null && - contentState.getEntity(entityKey).getType() === 'LINK' - ); - }, - callback, - ); -}; + contentBlock.findEntityRanges(character => { + const entityKey = character.getEntity(); + return ( + entityKey !== null && + contentState.getEntity(entityKey).getType() === 'LINK' + ); + }, callback); +} ``` ## More Information diff --git a/docs/APIReference-CharacterMetadata.md b/docs/APIReference-CharacterMetadata.md index aa34f9ef25..42c40a1e61 100644 --- a/docs/APIReference-CharacterMetadata.md +++ b/docs/APIReference-CharacterMetadata.md @@ -26,7 +26,7 @@ for information on how `CharacterMetadata` is used within `ContentBlock`. ## Overview -*Static Methods* +_Static Methods_ -*Methods* +_Methods_