/
converters.js
126 lines (103 loc) · 3.64 KB
/
converters.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
/**
* @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
/**
* @module image/image/converters
*/
import first from '@ckeditor/ckeditor5-utils/src/first';
import { getViewImgFromWidget } from './utils';
/**
* Returns a function that converts the image view representation:
*
* <figure class="image"><img src="..." alt="..."></img></figure>
*
* to the model representation:
*
* <image src="..." alt="..."></image>
*
* The entire content of the `<figure>` element except the first `<img>` is being converted as children
* of the `<image>` model element.
*
* @returns {Function}
*/
export function viewFigureToModel() {
return dispatcher => {
dispatcher.on( 'element:figure', converter );
};
function converter( evt, data, conversionApi ) {
// Do not convert if this is not an "image figure".
if ( !conversionApi.consumable.test( data.viewItem, { name: true, classes: 'image' } ) ) {
return;
}
// Find an image element inside the figure element.
const viewImage = getViewImgFromWidget( data.viewItem );
// Do not convert if image element is absent, is missing src attribute or was already converted.
if ( !viewImage || !viewImage.hasAttribute( 'src' ) || !conversionApi.consumable.test( viewImage, { name: true } ) ) {
return;
}
// Convert view image to model image.
const conversionResult = conversionApi.convertItem( viewImage, data.modelCursor );
// Get image element from conversion result.
const modelImage = first( conversionResult.modelRange.getItems() );
// When image wasn't successfully converted then finish conversion.
if ( !modelImage ) {
return;
}
// Convert rest of the figure element's children as an image children.
conversionApi.convertChildren( data.viewItem, modelImage );
conversionApi.updateConversionResult( modelImage, data );
}
}
/**
* Converter used to convert the `srcset` model image attribute to the `srcset`, `sizes` and `width` attributes in the view.
*
* @returns {Function}
*/
export function srcsetAttributeConverter() {
return dispatcher => {
dispatcher.on( 'attribute:srcset:image', converter );
};
function converter( evt, data, conversionApi ) {
if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
return;
}
const writer = conversionApi.writer;
const figure = conversionApi.mapper.toViewElement( data.item );
const img = getViewImgFromWidget( figure );
if ( data.attributeNewValue === null ) {
const srcset = data.attributeOldValue;
if ( srcset.data ) {
writer.removeAttribute( 'srcset', img );
writer.removeAttribute( 'sizes', img );
if ( srcset.width ) {
writer.removeAttribute( 'width', img );
}
}
} else {
const srcset = data.attributeNewValue;
if ( srcset.data ) {
writer.setAttribute( 'srcset', srcset.data, img );
// Always outputting `100vw`. See https://github.com/ckeditor/ckeditor5-image/issues/2.
writer.setAttribute( 'sizes', '100vw', img );
if ( srcset.width ) {
writer.setAttribute( 'width', srcset.width, img );
}
}
}
}
}
export function modelToViewAttributeConverter( attributeKey ) {
return dispatcher => {
dispatcher.on( `attribute:${ attributeKey }:image`, converter );
};
function converter( evt, data, conversionApi ) {
if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
return;
}
const viewWriter = conversionApi.writer;
const figure = conversionApi.mapper.toViewElement( data.item );
const img = getViewImgFromWidget( figure );
viewWriter.setAttribute( data.attributeKey, data.attributeNewValue || '', img );
}
}