-
Notifications
You must be signed in to change notification settings - Fork 148
/
Copy pathblocks.ts
248 lines (229 loc) · 8.6 KB
/
blocks.ts
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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
import type { Editor, BlockProperties } from 'grapesjs';
import { PluginOptions } from '.';
export default function(editor: Editor, opts: Required<PluginOptions>) {
const bm = editor.Blocks;
let tableStyleStr = '';
let cellStyleStr = '';
let tableStyle = opts.tableStyle || {};
let cellStyle = opts.cellStyle || {};
const addBlock = (id: string, blockDef: BlockProperties) => {
opts.blocks.indexOf(id)! >= 0 && editor.Blocks.add(id, {
select: true,
...blockDef,
...opts.block(id),
});
}
for (let prop in tableStyle){
tableStyleStr += `${prop}: ${tableStyle[prop]}; `;
}
for (let prop in cellStyle){
cellStyleStr += `${prop}: ${cellStyle[prop]}; `;
}
addBlock('sect100', {
label: '1 Section',
media: `<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M2 20h20V4H2v16Zm-1 0V4a1 1 0 0 1 1-1h20a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1Z"/>
</svg>`,
content: `
<table style="${tableStyleStr}">
<tr>
<td style="${cellStyleStr}"></td>
</tr>
</table>
`,
});
addBlock('sect50', {
label: '1/2 Section',
media: `<svg viewBox="0 0 23 24">
<path fill="currentColor" d="M2 20h8V4H2v16Zm-1 0V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1ZM13 20h8V4h-8v16Zm-1 0V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-8a1 1 0 0 1-1-1Z"/>
</svg>`,
content: `
<table style="${tableStyleStr}">
<tr>
<td style="${cellStyleStr} width: 50%"></td>
<td style="${cellStyleStr} width: 50%"></td>
</tr>
</table>
`,
});
addBlock('sect30', {
label: '1/3 Section',
media: `<svg viewBox="0 0 23 24">
<path fill="currentColor" d="M2 20h4V4H2v16Zm-1 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1ZM17 20h4V4h-4v16Zm-1 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1ZM9.5 20h4V4h-4v16Zm-1 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1Z"/>
</svg>`,
content: `
<table style="${tableStyleStr}">
<tr>
<td style="${cellStyleStr} width: 33.3333%"></td>
<td style="${cellStyleStr} width: 33.3333%"></td>
<td style="${cellStyleStr} width: 33.3333%"></td>
</tr>
</table>
`,
});
addBlock('sect37', {
label: '3/7 Section',
media: `<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M2 20h5V4H2v16Zm-1 0V4a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1ZM10 20h12V4H10v16Zm-1 0V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H10a1 1 0 0 1-1-1Z"></path>
</svg>`,
content: `
<table style="${tableStyleStr}">
<tr>
<td style="${cellStyleStr} width:30%"></td>
<td style="${cellStyleStr} width:70%"></td>
</tr>
</table>
`,
});
addBlock('button', {
label: 'Button',
media: `<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M20 20.5C20 21.3 19.3 22 18.5 22H13C12.6 22 12.3 21.9 12 21.6L8 17.4L8.7 16.6C8.9 16.4 9.2 16.3 9.5 16.3H9.7L12 18V9C12 8.4 12.4 8 13 8S14 8.4 14 9V13.5L15.2 13.6L19.1 15.8C19.6 16 20 16.6 20 17.1V20.5M20 2H4C2.9 2 2 2.9 2 4V12C2 13.1 2.9 14 4 14H8V12H4V4H20V12H18V14H20C21.1 14 22 13.1 22 12V4C22 2.9 21.1 2 20 2Z" />
</svg>`,
content: '<a class="button">Button</a>',
});
addBlock('divider', {
label: 'Divider',
media: `<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M21 18H2V20H21V18M19 10V14H4V10H19M20 8H3C2.45 8 2 8.45 2 9V15C2 15.55 2.45 16 3 16H20C20.55 16 21 15.55 21 15V9C21 8.45 20.55 8 20 8M21 4H2V6H21V4Z" />
</svg>`,
content: `
<table style="width: 100%; margin-top: 10px; margin-bottom: 10px;">
<tr>
<td class="divider"></td>
</tr>
</table>
<style>
.divider {
background-color: rgba(0, 0, 0, 0.1);
height: 1px;
}
</style>
`,
});
addBlock('text', {
label: 'Text',
media: `<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M18.5,4L19.66,8.35L18.7,8.61C18.25,7.74 17.79,6.87 17.26,6.43C16.73,6 16.11,6 15.5,6H13V16.5C13,17 13,17.5 13.33,17.75C13.67,18 14.33,18 15,18V19H9V18C9.67,18 10.33,18 10.67,17.75C11,17.5 11,17 11,16.5V6H8.5C7.89,6 7.27,6 6.74,6.43C6.21,6.87 5.75,7.74 5.3,8.61L4.34,8.35L5.5,4H18.5Z" />
</svg>`,
activate: true,
content: {
type: 'text',
content: 'Insert your text here',
style: { padding: '10px' },
},
});
addBlock('text-sect', {
label: 'Text Section',
media: `<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20M4,6V18H20V6H4M6,9H18V11H6V9M6,13H16V15H6V13Z" />
</svg>`,
content: `
<h1 class="heading">Insert title here</h1>
<p class="paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
`,
});
addBlock('image', {
label: 'Image',
media: `<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M21,3H3C2,3 1,4 1,5V19A2,2 0 0,0 3,21H21C22,21 23,20 23,19V5C23,4 22,3 21,3M5,17L8.5,12.5L11,15.5L14.5,11L19,17H5Z" />
</svg>`,
activate: true,
content: {
type:'image',
style: { color:'black' },
},
});
addBlock('quote', {
label: 'Quote',
media: `<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M14,17H17L19,13V7H13V13H16M6,17H9L11,13V7H5V13H8L6,17Z" />
</svg>`,
content: '<blockquote class="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit</blockquote>',
});
addBlock('link', {
label: 'Link',
media: `<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M3.9,12C3.9,10.29 5.29,8.9 7,8.9H11V7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12M8,13H16V11H8V13M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.71 18.71,15.1 17,15.1H13V17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7Z"></path>
</svg>`,
content: {
type: 'link',
content: 'Link',
style: { color:'#3b97e3' }
},
});
addBlock('link-block', {
label: 'Link Block',
media: `<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M3.9,12C3.9,10.29 5.29,8.9 7,8.9H11V7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12M8,13H16V11H8V13M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.71 18.71,15.1 17,15.1H13V17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7Z"></path>
</svg>`,
content: {
type: 'link',
editable: false,
droppable: true,
style: {
display: 'inline-block',
padding: '5px',
'min-height': '50px',
'min-width': '50px'
}
},
});
const gridItem =
`<table class="grid-item-card">
<tr>
<td class="grid-item-card-cell">
<img class="grid-item-image" src="https://via.placeholder.com/250x150/78c5d6/fff/" alt="Image"/>
<table class="grid-item-card-body">
<tr>
<td class="grid-item-card-content">
<h1 class="card-title">Title here</h1>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</td>
</tr>
</table>
</td>
</tr>
</table>`;
addBlock('grid-items', {
label: 'Grid Items',
media: `<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M3,11H11V3H3M3,21H11V13H3M13,21H21V13H13M13,3V11H21V3"/>
</svg>`,
content: `
<table class="grid-item-row">
<tr>
<td class="grid-item-cell2-l">${gridItem}</td>
<td class="grid-item-cell2-r">${gridItem}</td>
</tr>
</table>
`,
});
const listItem =
`<table class="list-item">
<tr>
<td class="list-item-cell">
<table class="list-item-content">
<tr class="list-item-row">
<td class="list-cell-left">
<img class="list-item-image" src="https://via.placeholder.com/150/78c5d6/fff" alt="Image"/>
</td>
<td class="list-cell-right">
<h1 class="card-title">Title here</h1>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</td>
</tr>
</table>
</td>
</tr>
</table>`;
addBlock('list-items', {
label: 'List Items',
media: `<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M2 14H8V20H2M16 8H10V10H16M2 10H8V4H2M10 4V6H22V4M10 20H16V18H10M10 16H22V14H10"/>
</svg>`,
content: listItem + listItem,
});
};