Browse Source

Added to all-features a case with decorators and images.

Kamil Piechaczek 5 years ago
parent
commit
052032c508
3 changed files with 74 additions and 0 deletions
  1. 32 0
      tests/manual/all-features.html
  2. 26 0
      tests/manual/all-features.js
  3. 16 0
      tests/manual/all-features.md

+ 32 - 0
tests/manual/all-features.html

@@ -157,6 +157,38 @@ function bar() {
 			</tbody>
 			</tbody>
 		</table>
 		</table>
 	</figure>
 	</figure>
+
+	<hr>
+
+	<h2>Link images + Link decorators</h2>
+
+	<table>
+		<tr>
+			<td>Linked text</td>
+			<td>Linked image (<code>figure > a > img</code>)</td>
+			<td>Linked image (<code>a > img</code>)</td>
+		</tr>
+		<tr>
+			<td>
+				<p>
+					<a href="https://cksource.com" target="_blank" rel="noopener noreferrer" download="download">https://cksource.com</a>
+				</p>
+			</td>
+			<td>
+				<figure class="image">
+					<a class="gallery" href="https://cksource.com">
+						<img src="sample.jpg" alt="bar">
+					</a>
+					<figcaption>Caption</figcaption>
+				</figure>
+			</td>
+			<td>
+				<a class="gallery" href="https://cksource.com" target="_blank" rel="noopener noreferrer" download="download">
+					<img src="sample.jpg" alt="bar">
+				</a>
+			</td>
+		</tr>
+	</table>
 </div>
 </div>
 
 
 <style>
 <style>

+ 26 - 0
tests/manual/all-features.js

@@ -117,6 +117,32 @@ ClassicEditor
 					minimumCharacters: 1
 					minimumCharacters: 1
 				}
 				}
 			]
 			]
+		},
+		link: {
+			decorators: {
+				isExternal: {
+					mode: 'manual',
+					label: 'Open in a new tab',
+					attributes: {
+						target: '_blank',
+						rel: 'noopener noreferrer'
+					}
+				},
+				isDownloadable: {
+					mode: 'manual',
+					label: 'Downloadable',
+					attributes: {
+						download: 'download'
+					}
+				},
+				isGallery: {
+					mode: 'manual',
+					label: 'Gallery link',
+					attributes: {
+						class: 'gallery'
+					}
+				}
+			}
 		}
 		}
 	} )
 	} )
 	.then( editor => {
 	.then( editor => {

+ 16 - 0
tests/manual/all-features.md

@@ -4,6 +4,8 @@
 
 
 It should contain as many features as we developed. By resizing your viewport you can observe whether grouping toolbar items work.
 It should contain as many features as we developed. By resizing your viewport you can observe whether grouping toolbar items work.
 
 
+---
+
 ## Editor
 ## Editor
 
 
 There should be "two pages" with two sections per each page. Pages should be separated by the page break feature.
 There should be "two pages" with two sections per each page. Pages should be separated by the page break feature.
@@ -20,16 +22,30 @@ There should be "two pages" with two sections per each page. Pages should be sep
 
 
 **Code blocks in the table** - in the table (4x3), in the second and fourth columns should be visible code snippets.
 **Code blocks in the table** - in the table (4x3), in the second and fourth columns should be visible code snippets.
 
 
+**Horizontal line** - There is the `<hr>` in the source HTML. It should be displayed in the editor.
+
+**Link images + Link decorators** - in the table (3x2), there be a link and two linked images that uses the manual decorators feature:
+
+  - Left column: a plain text with two decorators enabled: `Open in a new tab`, `Downloadable`
+  - Middle column: an image with the caption that is a `Gallery link`
+  - Right column: an image without the caption with enabled all decorators (listed above)
+  
+---
+
 ## Action buttons
 ## Action buttons
 
 
 - Clear editor - calls `editor.setData( '' )`
 - Clear editor - calls `editor.setData( '' )`
 - Open print preview - opens the print preview window
 - Open print preview - opens the print preview window
 - Turn on/off read-only mode - toggle read-only mode
 - Turn on/off read-only mode - toggle read-only mode
 
 
+---
+
 ## Console
 ## Console
 
 
 Wordcount plugin logs into the console number of characters and words in the editor's data.
 Wordcount plugin logs into the console number of characters and words in the editor's data.
 
 
+---
+
 ## Additional
 ## Additional
 
 
 - Empty editor should display a placeholder: `'Type the content here!'`
 - Empty editor should display a placeholder: `'Type the content here!'`