forked from SparkDevNetwork/Rock
-
Notifications
You must be signed in to change notification settings - Fork 12
Expand file tree
/
Copy pathrockimage.ts
More file actions
178 lines (152 loc) · 4.9 KB
/
rockimage.ts
File metadata and controls
178 lines (152 loc) · 4.9 KB
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
import EditorImage, { ImageConfig, ImageData, ImageUpload } from "@editorjs/image"
import { API, BlockToolConstructorOptions } from "@editorjs/editorjs";
/**
* The save data for the RockImage block.
*/
interface RockImageData extends ImageData {
/** This is the legacy URL used by the previous simple image tool. */
url?: string;
file?: {
/** The URL used to display the image. */
url: string,
/** The identifier of the image if it was uploaded into Rock. */
fileId?: number;
}
}
/**
* The configuration options for the RockImage block.
*/
interface RockImageConfig extends ImageConfig {
/** The binary file type unique identifier to use when uploading. */
binaryFileType?: string;
};
/**
* Upload a file to Rock and return the link to view it with.
*
* @param file The file to be uploaded.
*/
async function uploadByFile(file: File, fileTypeGuid: string): Promise<ImageUpload> {
const data = new FormData();
data.append("file", file);
return await $.ajax({
url: `/FileUploader.ashx?isBinaryFile=1&fileTypeGuid=${fileTypeGuid}`,
type: 'POST',
contentType: false,
data: data,
processData: false,
cache: false,
dataType: 'json'
}).then(function (uploadedFile) {
if (uploadedFile.Id && uploadedFile.FileName) {
return {
success: true,
file: {
url: `/GetImage.ashx?guid=${uploadedFile.Guid}`,
fileId: uploadedFile.Id
}
}
}
else {
return {
success: false,
file: {
url: ""
}
};
}
});
}
/**
* Upload by URL. In this case we just return the URL itself.
*
* @param url The URL of the image.
*/
function uploadByUrl(url: string): Promise<ImageUpload> {
return new Promise((resolve, reject) => {
resolve({
success: true,
file: {
url: url
}
});
});
}
/**
* Extended implementation of the standard EditorJS image tool. This is updated
* to work specifically with Rock.
*/
export class RockImage extends EditorImage {
/**
* Creates a new instance of the RockImage block tool.
*
* @param config The initialization data.
*/
constructor(config: BlockToolConstructorOptions<RockImageData, RockImageConfig>) {
/* Use unsecured file type unless the user specifies one. */
const binaryFileType = config.config?.binaryFileType || "C1142570-8CD6-4A20-83B1-ACB47C1CD377";
config.config = config.config || {};
/* Override the uploader to use our custom Rock uploader. */
config.config.uploader = {
uploadByUrl: uploadByUrl,
uploadByFile: function (file: File) { return uploadByFile(file, binaryFileType); }
};
config.data = config.data || {};
/* Convert legacy URL. */
if (config.data.url !== undefined && config.data.file === undefined) {
config.data.file = {
url: config.data.url
};
delete config.data.url;
}
super(config);
}
/**
* Render the settings tune that lets the user configure the block.
*
* @returns The HTML element that contains our actions.
*/
public renderSettings() {
let settings = super.renderSettings();
if (!Array.isArray(settings)) {
settings = [settings];
}
/* Remove the withBorder and withBackground actions. They don't make
* sense in our use case. */
for (let i = 0; i < settings.length; ) {
const child = settings[i];
if (child.name === "withBorder" || child.name === "withBackground") {
settings.splice(i, 1);
}
else {
i++;
}
}
return settings;
}
/**
* Get the save data for the block.
*
* @param blockWrapper The HTML element that contains all our content.
* @returns Our save data.
*/
public save(blockWrapper: HTMLDivElement) {
const data = <RockImageData>super.save(blockWrapper);
/* Ensure we have an empty url string if no upload performed. */
data.file = data.file || { url: "" };
data.file.url = data.file.url ?? "";
/* Remove values we don't use. */
delete data.withBackground;
delete data.withBorder;
return data;
}
/**
* Checks if the data that describes this block's contents should be
* included in the editor's save data.
*
* @param savedData The data generated by the save method.
* @returns true if this block should be included in the editor's save data; false otherwise.
*/
public validate(savedData: RockImageData) {
return savedData.file!.url !== "";
}
}