Skip to content

Conversation

@diegoreymendez
Copy link
Contributor

@diegoreymendez diegoreymendez commented Feb 22, 2018

Description:

This PR re-engineers captions in order to support a wider range of caption options (they could potentially be used for more than images now).

The old architecture was also causing some trouble when combining links with captions, which this PR will allow us to solve more elegantly.

To see the problem, simply go to develop and try setting a link for a captioned image. The link is applied to the caption text too and there's no easy fix for it.

Additional details:

Captions are now editable inline too, which is a good thing.

Captions now support links!

Demo:

Updated:

captions

Testing:

Just try to break captions in whatever way you deem possible. Don't hesitate to take your time to test this PR, as it includes important architectural changes to the way captions work.

@diegoreymendez diegoreymendez changed the title WIP: captions + links fix Captions reengineering. Mar 13, 2018
@diegoreymendez diegoreymendez added this to the Next Stable milestone Mar 13, 2018
@diegoreymendez diegoreymendez self-assigned this Mar 13, 2018
Copy link
Contributor

@jleandroperez jleandroperez left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love these changes @diegoreymendez !!!. Found a minor, tiny glitch:

  1. Launch Empty Editor
  2. Insert Image
  3. Open Image's Properties
  4. Type a Caption snippet
  5. Switch to HTML. Verify there's a figcaption tag
  6. Back to WYSIWYG mode. Open the Image's Properties

Result:
The Caption field is empty

@@ -0,0 +1,39 @@
import UIKit

extension Dictionary where Key == NSAttributedStringKey, Value == Any {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Magic


/// Internal convenience helper. Returns the internal string as a NSString instance
///
var foundationString: NSString {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was sure this was already somewhere else

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jleandroperez if you look a bit lower down in the PR you will see that Diego is just moving this around.

}



Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extra newlines!

}
}


Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extra Newline

@diegoreymendez
Copy link
Contributor Author

Thanks for the feedback!

let linkInfo = richTextView.linkInfo(for: attachment)
let linkRange = linkInfo?.range
let linkURL = linkInfo?.url
let linkUpdateRange = linkRange ?? richTextView.textStorage.ranges(forAttachment: attachment).first!
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we sure we want to use the ! on this line?

@SergioEstevao
Copy link
Contributor

Look like the UI Tests are failing. Not sure if this PR is to blame for that.

@diegoreymendez
Copy link
Contributor Author

The UI tests have been failing on and off, in a not very consistent manner. It seems like they're very sensitive to not only change, but also how the simulator is set up.

I was planning (if we agree) to tackle that separately because I've been seeing that behavior event before this PR.

@SergioEstevao
Copy link
Contributor

While in general this PR is working very well I want to raise the following issues:

  • You can delete an image attachment, and the caption stays there. Calypso deletes everything.
  • When you do that we get <figure> and <figcaption> elements orphan on the HTML view.

Copy link
Contributor

@SergioEstevao SergioEstevao left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just want to be sure if the issues that I found are not blockers for merging this functionality.

@SergioEstevao
Copy link
Contributor

Another issue that I found is the presentation of caption, it looks we are adding a lot of paragraph spacing between the image and the caption.

This make it look that the caption is not attached to the image.

@diegoreymendez
Copy link
Contributor Author

@jleandroperez - Can you try again? I found an issue with some paragraph-separators that were being lost on conversion.

@diegoreymendez
Copy link
Contributor Author

@SergioEstevao - I'll try to reduce the spacing and add a specific style to captions. Please hold tight.

Copy link
Contributor

@jleandroperez jleandroperez left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Amazing work Diego, behaves as advertised!!!

:shipit:

@diegoreymendez
Copy link
Contributor Author

@SergioEstevao - This PR now styles captions differently. Also when pressing enter in the middle of a caption, the style will be removed for the right-hand text.

@SergioEstevao, @jleandroperez - Can I ask you for another run?

@diegoreymendez
Copy link
Contributor Author

PS: right now the caption styling is defined by FigcaptionFormatter. I'm planning to make it easier in an upcoming PR for the client App to customize this.

@SergioEstevao
Copy link
Contributor

@diegoreymendez from my tests, it looks that now if you add a link to an image <a> it breaks the [caption] processor and you end up with figure and figcaption elements on the final HTML.

@diegoreymendez
Copy link
Contributor Author

Very nice find, changes are up and ready for review.

Copy link
Contributor

@SergioEstevao SergioEstevao left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent work @diegoreymendez. I will sort our the link bug on a separate issue and PR.

@diegoreymendez
Copy link
Contributor Author

Thanks @SergioEstevao !

@diegoreymendez diegoreymendez merged commit d189a47 into develop Mar 20, 2018
@diegoreymendez diegoreymendez deleted the try/captions-and-links-option-b branch March 20, 2018 17:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants