Use format-library in gutenberg-mobile #12249

koke · 2018-11-23T14:30:07Z

Fixes wordpress-mobile/gutenberg-mobile#221

This PR reuses the existing logic for the format buttons in @wordpress/format-library instead of our custom solution added in Aztec.

Moreover, it adds a React Native custom modal component to the format-library Link component which handles creating and editing links. It also create a RN version of URLInput.

This is what it looks like (Not as nice as the mockup yet wordpress-mobile/gutenberg-mobile#221 (comment) but I think we can iterate on it):

To test

Check out the gutenberg-mobile PR at wordpress-mobile/gutenberg-mobile#275. Try to use the formatting bar on paragraphs and headings.

packages/editor/src/components/rich-text/format-toolbar/index.native.js

packages/format-library/src/default-formats.native.js

Tug · 2018-12-17T13:37:20Z

packages/format-library/src/link/modal.native.js

+			>
+				<View style={ { ...styles.content, borderColor: 'rgba(0, 0, 0, 0.1)' } }>
+					<View style={ styles.head }>
+						<Button


We can't reuse Button from @wordpress/components as they currently have hardcoded styles and it's outside of the scope of this PR to refactor it imo.
Let's use Button from react-native in the meantime even though we might not be able to style them as much as we'd like (wrap text)

Tug · 2018-12-18T15:50:16Z

This is ready for review!
Pinging @daniloercoli @iseulde and @hypest, if one of you has some time to give it a 👀.
Also, any idea why CircleCI isn't running on this branch? Edit: it seems CircleCI doesn't run for branches that are not based on master

etoledom · 2019-01-23T14:15:05Z

@koke @Tug - I'm working on the images setting, and it uses a bottom-sheet very similar to the one you are developing here.

I'm taking as a base the link/modal.native.js and trying to create a generic-reusable bottom-sheet with the header and styles already set, since it seems like we will be using it in quite a few places.

I created a bottom-sheet.js component but I'm not sure where to place it in the project.
Any ideas?

cc @hypest

koke · 2019-01-23T14:35:03Z

I thought most of the work was done by react-native-modal. What is different from Modal in BottomSheet?

Tug · 2019-01-23T14:37:36Z

@etoledom I gave it a thought actually when writing this component and I think we could create a mobile only component at @wordpress/editor/components/bottom-sheet/index.native.js or maybe even @wordpress/editor/components/mobile/bottom-sheet/index.native.js to be extra clear that it's a mobile component.

etoledom · 2019-01-23T14:43:28Z

I thought most of the work was done by react-native-modal. What is different from Modal in BottomSheet?

@koke - It's true that most of the hard work is done by Modal. The idea of BottomSheet is to share the base style of our own version of that modal, so it is easier to implement on different parts of the app.

@Tug - That sounds good, I'll give it a try 👍

Tug · 2019-01-23T14:43:52Z

@koke react-native-modal brings us animations, as well as helper as to how to position the modal. It doesn't have anything about the styling (white background, margin, a drag handle...) or the actions buttons (red Remove, blue Done). In short, a lot of what we have here could be refactor in a reusable component.

gziolo · 2019-02-07T10:34:17Z

The changes applied to web look good. At this point, we have a format library covered with basic e2e tests so this would be caught as a regression :)

I will leave the final ✅ to the mobile team as those changes mostly impact Aztec integration.

If you have any specific question regarding RichText and Format APU @iseulde is the best person to ask, I can try to help, too.

koke · 2019-02-15T14:52:27Z

I can't approve since I'm the original PR author, but I'd say this looks good enough.
and let's create issues for everything we found in the reviews

hypest · 2019-02-18T14:27:41Z

We've given the "go ahead with merge" for the parent PR over at the gutenberg-mobile repo, capturing the known issues that will be worked on in follow PRs (see here). Will merge this and iterate.

ellatrix · 2019-02-21T13:00:06Z

@koke @hypest This commit removed underline registration. Could you please add it back?

gziolo · 2019-02-21T13:19:13Z

We should also add a simple e2e test which checks whether all format controls are displayed in the UI to prevent it from happing in the future. Actually, there is an open PR which would cover it indirectly #13455. So we might want to land PR from @tjnicolaides first and figure out the next steps.

ellatrix · 2019-02-21T13:26:56Z

This one is not added to the UI. It's only a shortcut. It should get an e2e test, yes.

hypest · 2019-02-21T13:43:43Z

👋 @iseulde , right, apparently we missed copying it over in https://github.com/WordPress/gutenberg/blob/master/packages/format-library/src/default-formats.js#L18

hypest · 2019-02-21T13:46:04Z

I can open a PR but, unfortunately don't have the bandwidth to properly test it (we're wrangling the release of v1.0 of gutenberg-mobile), is that OK @iseulde ?

* Store current selection in RichText state * Make native RichText use format-library This is a work in progress. Sometimes it works, sometimes it doesn't, I haven't figured out the right way to wire the RichText structure into Aztec * Fix bad merge * Don't use applyRecord for now * Missing newlines * Do not change lastContent on formatChange, let the component rerender and update record. Also minor cleanup * Make sure the component rerenders when isSelected changes so FormatToolbar is removed * Make a simple version of Link that displays on mobile * Rerender on selection change to update record * Make it update onFormatChange when url changes * Cleanup changes in Heading and Paragraph * Remove unnecessary components and styles added while testing * Improve link editing UI * Fix adding a new url without a selection * Fix editing the text part of the url * Fill modal URL to current value * Pressing Remove dismisses the popup. Improve styles * Bring back multilineTag prop * Remove unused param in shouldComponentUpdate * Remove withBlockEditContext for now, it will need a better refactor to properly deal with focus from Aztec * Temporary fix for whitespace in HTML, will need to be addressed later * Make sure end is always greater than start for the text selection * Remove unsupported css property * Disable autoCapitalize and autoCorrect for URLInput * Fix lint errors in mobile and in rnmobile/rich-text-formats * Use a template string to generate html for Aztec in RichText * Preprocess the HTML value before sending it to Aztec, removing whitespaces in the process * Use custom button instead of native provided by react-native * Add some padding to our custom button * Send active formats to RCTAztecView so we can type new words in a format * Handle multiple formats with format placeholder * Cleanup applyFormat * Make applyFormat support applying multiple formats at once * Keep formatting when onSelectionChange is emitted without changes * Keep the same order of formats * Prevent inserting anything other that a formatting element from the link modal * Make sure wrapping tags returned by aztec are removed so it's not added to formats * Improve styling of the modal * Make sure we don't pass undefined values in activeFormats * Update formatPlaceholder when user decides to unselect a format in an existing formatted text * Update props.value on format change * Force update native view onFormatChange by not setting this.lastContent * Handle inserting a link * Fix updating format properties * Expand link selection automatically so we can edit a link without selecting it explicitly * Force an aztec text refresh on format change so we make sure the active formats are in sync * Add comment and make the code more consistent for debugging * Make sure we don't use format ref inside the placeholder formats * Make sure we don't use format ref inside the placeholder formats * Do not try to call valueToFormat on format change without selection * Fix editing link url * Add the ability to remove a link without selection * Do not remove trailing whitespace characters * Unescape spaces coming from Aztec * Fix code styling issues * Pick the formats of the first char when in text start * Fix lint errors * RichText value may be undefined * Update lastEventCount on enter and selection changes * Update ModalLinkUI to avoid the keyboard * Lint fixes

koke added the Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) label Nov 23, 2018

koke requested review from daniloercoli, hypest and mzorz November 23, 2018 14:30

koke mentioned this pull request Nov 23, 2018

Use format-library for the formatting bar wordpress-mobile/gutenberg-mobile#275

Merged

ellatrix reviewed Nov 26, 2018

View reviewed changes

packages/editor/src/components/rich-text/format-toolbar/index.native.js Show resolved Hide resolved

ellatrix reviewed Nov 26, 2018

View reviewed changes

packages/format-library/src/default-formats.native.js Show resolved Hide resolved

Tug force-pushed the rnmobile/rich-text-formats branch 2 times, most recently from 5b04b44 to 1747389 Compare November 27, 2018 12:09

Tug self-assigned this Dec 6, 2018

Tug changed the base branch from master to mobile December 13, 2018 22:06

Tug force-pushed the rnmobile/rich-text-formats branch 3 times, most recently from e9e2419 to d877d6e Compare December 14, 2018 11:53

Tug reviewed Dec 17, 2018

View reviewed changes

Tug mentioned this pull request Dec 18, 2018

Feature/set remove link interface android wordpress-mobile/react-native-aztec#99

Closed

Tug force-pushed the rnmobile/rich-text-formats branch from 99bc5cd to 878ab76 Compare December 18, 2018 14:57

Tug changed the base branch from mobile to master December 19, 2018 10:50

Tug force-pushed the rnmobile/rich-text-formats branch 3 times, most recently from 91dfbd8 to 8fb02d7 Compare December 19, 2018 16:14

Tug mentioned this pull request Dec 21, 2018

Use a view props instead to update the currently selected formats wordpress-mobile/react-native-aztec#105

Closed

Tug force-pushed the rnmobile/rich-text-formats branch from f3188d9 to 0c85a37 Compare December 23, 2018 22:49

Tug mentioned this pull request Dec 24, 2018

Write new text in multiple formats #13087

Closed

hypest removed the request for review from gziolo February 6, 2019 15:52

hypest and others added 6 commits February 8, 2019 11:35

Merge branch 'master' into rnmobile/rich-text-formats

c843c20

Merge branch 'master' into rnmobile/rich-text-formats

07482c4

Update lastEventCount on enter and selection changes

18f1795

Merge branch 'master' into rnmobile/rich-text-formats

4147731

Update ModalLinkUI to avoid the keyboard

f21f491

Lint fixes

5d85b48

Merge branch 'master' into rnmobile/rich-text-formats

e90a843

hypest merged commit 99f31cd into master Feb 18, 2019

hypest deleted the rnmobile/rich-text-formats branch February 18, 2019 14:28

This was referenced Feb 21, 2019

Underline text when cmd + u is pressed #13117

Merged

Underlining text using the keyboard shortcut does not work consistently in major browsers #13034

Closed

hypest mentioned this pull request Feb 21, 2019

Reinstate "underline" in default formats list #14008

Merged

5 tasks

youknowriad added this to the 5.2 (Gutenberg) milestone Mar 4, 2019

ellatrix mentioned this pull request Mar 4, 2019

Bump plugin version to 5.2.0-rc.1 #14210

Merged

ellatrix mentioned this pull request Mar 13, 2019

RichText: change value to have separate keys for line and object formats #13948

Merged

5 tasks

Tug mentioned this pull request Mar 13, 2019

Use last gutenberg changes including the editor and block-editor packages refactoring wordpress-mobile/gutenberg-mobile#731

Merged

tyxla mentioned this pull request Aug 31, 2022

Lodash: Remove completely from @wordpress/format-library package #43738

Merged

dcalhoun mentioned this pull request Jan 8, 2024

[RNMobile] Fix losing undo/redo history when using non-breaking space HTML entity #57652

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use format-library in gutenberg-mobile #12249

Use format-library in gutenberg-mobile #12249

koke commented Nov 23, 2018 •

edited by Tug

Loading

Tug Dec 17, 2018

Tug commented Dec 18, 2018 •

edited

Loading

etoledom commented Jan 23, 2019

koke commented Jan 23, 2019

Tug commented Jan 23, 2019

etoledom commented Jan 23, 2019

Tug commented Jan 23, 2019

gziolo commented Feb 7, 2019 •

edited

Loading

koke commented Feb 15, 2019

hypest commented Feb 18, 2019

ellatrix commented Feb 21, 2019

gziolo commented Feb 21, 2019

ellatrix commented Feb 21, 2019

hypest commented Feb 21, 2019

hypest commented Feb 21, 2019

Use format-library in gutenberg-mobile #12249

Use format-library in gutenberg-mobile #12249

Conversation

koke commented Nov 23, 2018 • edited by Tug Loading

To test

Tug Dec 17, 2018

Choose a reason for hiding this comment

Tug commented Dec 18, 2018 • edited Loading

etoledom commented Jan 23, 2019

koke commented Jan 23, 2019

Tug commented Jan 23, 2019

etoledom commented Jan 23, 2019

Tug commented Jan 23, 2019

gziolo commented Feb 7, 2019 • edited Loading

koke commented Feb 15, 2019

hypest commented Feb 18, 2019

ellatrix commented Feb 21, 2019

gziolo commented Feb 21, 2019

ellatrix commented Feb 21, 2019

hypest commented Feb 21, 2019

hypest commented Feb 21, 2019

koke commented Nov 23, 2018 •

edited by Tug

Loading

Tug commented Dec 18, 2018 •

edited

Loading

gziolo commented Feb 7, 2019 •

edited

Loading