Add support for incoming rich text (#23913)
This commit is contained in:
		
					parent
					
						
							
								af578e8ce0
							
						
					
				
			
			
				commit
				
					
						3a6451c867
					
				
			
		
					 4 changed files with 85 additions and 27 deletions
				
			
		|  | @ -23,3 +23,4 @@ | ||||||
| @import 'mastodon/dashboard'; | @import 'mastodon/dashboard'; | ||||||
| @import 'mastodon/rtl'; | @import 'mastodon/rtl'; | ||||||
| @import 'mastodon/accessibility'; | @import 'mastodon/accessibility'; | ||||||
|  | @import 'mastodon/rich_text'; | ||||||
|  |  | ||||||
							
								
								
									
										64
									
								
								app/javascript/styles/mastodon/rich_text.scss
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										64
									
								
								app/javascript/styles/mastodon/rich_text.scss
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,64 @@ | ||||||
|  | .status__content__text, | ||||||
|  | .e-content, | ||||||
|  | .reply-indicator__content { | ||||||
|  |   pre, | ||||||
|  |   blockquote { | ||||||
|  |     margin-bottom: 20px; | ||||||
|  |     white-space: pre-wrap; | ||||||
|  |     unicode-bidi: plaintext; | ||||||
|  | 
 | ||||||
|  |     &:last-child { | ||||||
|  |       margin-bottom: 0; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   blockquote { | ||||||
|  |     padding-left: 10px; | ||||||
|  |     border-left: 3px solid $darker-text-color; | ||||||
|  |     color: $darker-text-color; | ||||||
|  |     white-space: normal; | ||||||
|  | 
 | ||||||
|  |     p:last-child { | ||||||
|  |       margin-bottom: 0; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   & > ul, | ||||||
|  |   & > ol { | ||||||
|  |     margin-bottom: 20px; | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   b, | ||||||
|  |   strong { | ||||||
|  |     font-weight: 700; | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   em, | ||||||
|  |   i { | ||||||
|  |     font-style: italic; | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   ul, | ||||||
|  |   ol { | ||||||
|  |     margin-left: 2em; | ||||||
|  | 
 | ||||||
|  |     p { | ||||||
|  |       margin: 0; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   ul { | ||||||
|  |     list-style-type: disc; | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   ol { | ||||||
|  |     list-style-type: decimal; | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .reply-indicator__content { | ||||||
|  |   blockquote { | ||||||
|  |     border-left-color: $inverted-text-color; | ||||||
|  |     color: $inverted-text-color; | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | @ -51,29 +51,22 @@ class Sanitize | ||||||
|     end |     end | ||||||
| 
 | 
 | ||||||
|     UNSUPPORTED_ELEMENTS_TRANSFORMER = lambda do |env| |     UNSUPPORTED_ELEMENTS_TRANSFORMER = lambda do |env| | ||||||
|       return unless %w(h1 h2 h3 h4 h5 h6 blockquote pre ul ol li).include?(env[:node_name]) |       return unless %w(h1 h2 h3 h4 h5 h6).include?(env[:node_name]) | ||||||
| 
 | 
 | ||||||
|       current_node = env[:node] |       current_node = env[:node] | ||||||
| 
 | 
 | ||||||
|       case env[:node_name] |       current_node.name = 'strong' | ||||||
|       when 'li' |       current_node.wrap('<p></p>') | ||||||
|         current_node.traverse do |node| |  | ||||||
|           next unless %w(p ul ol li).include?(node.name) |  | ||||||
| 
 |  | ||||||
|           node.add_next_sibling('<br>') if node.next_sibling |  | ||||||
|           node.replace(node.children) unless node.text? |  | ||||||
|         end |  | ||||||
|       else |  | ||||||
|         current_node.name = 'p' |  | ||||||
|       end |  | ||||||
|     end |     end | ||||||
| 
 | 
 | ||||||
|     MASTODON_STRICT ||= freeze_config( |     MASTODON_STRICT ||= freeze_config( | ||||||
|       elements: %w(p br span a), |       elements: %w(p br span a del pre blockquote code b strong u i em ul ol li), | ||||||
| 
 | 
 | ||||||
|       attributes: { |       attributes: { | ||||||
|         'a' => %w(href rel class), |         'a' => %w(href rel class), | ||||||
|         'span' => %w(class), |         'span' => %w(class), | ||||||
|  |         'ol' => %w(start reversed), | ||||||
|  |         'li' => %w(value), | ||||||
|       }, |       }, | ||||||
| 
 | 
 | ||||||
|       add_attributes: { |       add_attributes: { | ||||||
|  |  | ||||||
|  | @ -6,24 +6,16 @@ describe Sanitize::Config do | ||||||
|   describe '::MASTODON_STRICT' do |   describe '::MASTODON_STRICT' do | ||||||
|     subject { Sanitize::Config::MASTODON_STRICT } |     subject { Sanitize::Config::MASTODON_STRICT } | ||||||
| 
 | 
 | ||||||
|     it 'converts h1 to p' do |     it 'converts h1 to p strong' do | ||||||
|       expect(Sanitize.fragment('<h1>Foo</h1>', subject)).to eq '<p>Foo</p>' |       expect(Sanitize.fragment('<h1>Foo</h1>', subject)).to eq '<p><strong>Foo</strong></p>' | ||||||
|     end |     end | ||||||
| 
 | 
 | ||||||
|     it 'converts ul to p' do |     it 'keeps ul' do | ||||||
|       expect(Sanitize.fragment('<p>Check out:</p><ul><li>Foo</li><li>Bar</li></ul>', subject)).to eq '<p>Check out:</p><p>Foo<br>Bar</p>' |       expect(Sanitize.fragment('<p>Check out:</p><ul><li>Foo</li><li>Bar</li></ul>', subject)).to eq '<p>Check out:</p><ul><li>Foo</li><li>Bar</li></ul>' | ||||||
|     end |     end | ||||||
| 
 | 
 | ||||||
|     it 'converts p inside ul' do |     it 'keeps start and reversed attributes of ol' do | ||||||
|       expect(Sanitize.fragment('<ul><li><p>Foo</p><p>Bar</p></li><li>Baz</li></ul>', subject)).to eq '<p>Foo<br>Bar<br>Baz</p>' |       expect(Sanitize.fragment('<p>Check out:</p><ol start="3" reversed=""><li>Foo</li><li>Bar</li></ol>', subject)).to eq '<p>Check out:</p><ol start="3" reversed=""><li>Foo</li><li>Bar</li></ol>' | ||||||
|     end |  | ||||||
| 
 |  | ||||||
|     it 'converts ul inside ul' do |  | ||||||
|       expect(Sanitize.fragment('<ul><li>Foo</li><li><ul><li>Bar</li><li>Baz</li></ul></li></ul>', subject)).to eq '<p>Foo<br>Bar<br>Baz</p>' |  | ||||||
|     end |  | ||||||
| 
 |  | ||||||
|     it 'keep links in lists' do |  | ||||||
|       expect(Sanitize.fragment('<p>Check out:</p><ul><li><a href="https://joinmastodon.org" rel="nofollow noopener noreferrer" target="_blank">joinmastodon.org</a></li><li>Bar</li></ul>', subject)).to eq '<p>Check out:</p><p><a href="https://joinmastodon.org" rel="nofollow noopener noreferrer" target="_blank">joinmastodon.org</a><br>Bar</p>' |  | ||||||
|     end |     end | ||||||
| 
 | 
 | ||||||
|     it 'removes a without href' do |     it 'removes a without href' do | ||||||
|  | @ -45,5 +37,13 @@ describe Sanitize::Config do | ||||||
|     it 'keeps a with href' do |     it 'keeps a with href' do | ||||||
|       expect(Sanitize.fragment('<a href="http://example.com">Test</a>', subject)).to eq '<a href="http://example.com" rel="nofollow noopener noreferrer" target="_blank">Test</a>' |       expect(Sanitize.fragment('<a href="http://example.com">Test</a>', subject)).to eq '<a href="http://example.com" rel="nofollow noopener noreferrer" target="_blank">Test</a>' | ||||||
|     end |     end | ||||||
|  | 
 | ||||||
|  |     it 'removes a with unparsable href' do | ||||||
|  |       expect(Sanitize.fragment('<a href=" https://google.fr">Test</a>', subject)).to eq 'Test' | ||||||
|  |     end | ||||||
|  | 
 | ||||||
|  |     it 'keeps a with supported scheme and no host' do | ||||||
|  |       expect(Sanitize.fragment('<a href="dweb:/a/foo">Test</a>', subject)).to eq '<a href="dweb:/a/foo" rel="nofollow noopener noreferrer" target="_blank">Test</a>' | ||||||
|  |     end | ||||||
|   end |   end | ||||||
| end | end | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue