166 | {value && value !== defValue && (
167 |
handleChange('')}
171 | />
172 | )}
173 |
176 |
177 | );
178 | }
179 | break;
180 | case 'composite':
181 | {
182 | const compositeProp = prop as PropertyComposite;
183 | inputToRender = (
184 |
187 | {compositeProp.getProperties().map((prop) => (
188 |
189 | ))}
190 |
191 | );
192 | }
193 | break;
194 | case 'stack':
195 | {
196 | const stackProp = prop as PropertyStack;
197 | const layers = stackProp.getLayers();
198 | const isTextShadow = stackProp.getName() === 'text-shadow';
199 | inputToRender = (
200 |
206 | {layers.map((layer) => (
207 |
208 |
209 |
layer.move(layer.getIndex() - 1)}
212 | >
213 |
214 |
215 |
layer.move(layer.getIndex() + 1)}
218 | >
219 |
220 |
221 |
224 |
234 | {isTextShadow && 'T'}
235 |
236 |
layer.remove()}>
237 |
238 |
239 |
240 | {layer.isSelected() && (
241 |
242 | {stackProp.getProperties().map((prop) => (
243 |
244 | ))}
245 |
246 | )}
247 |
248 | ))}
249 |
250 | );
251 | }
252 | break;
253 | }
254 |
255 | return (
256 |
260 |
261 |
{prop.getLabel()}
262 | {canClear && (
263 |
266 | )}
267 | {type === 'stack' && (
268 |
(prop as PropertyStack).addLayer({}, { at: 0 })}
272 | >
273 |
274 |
275 | )}
276 |
277 | {inputToRender}
278 |
279 | );
280 | }
281 |
--------------------------------------------------------------------------------
/src/components/TraitPropertyField.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { useEditor } from '@grapesjs/react';
3 | import Button from '@mui/material/Button';
4 | import Checkbox from '@mui/material/Checkbox';
5 | import FormControl from '@mui/material/FormControl';
6 | import InputAdornment from '@mui/material/InputAdornment';
7 | import MenuItem from '@mui/material/MenuItem';
8 | import Select from '@mui/material/Select';
9 | import TextField from '@mui/material/TextField';
10 | import type { Trait } from 'grapesjs';
11 | import { ROUND_BORDER_COLOR, cx } from './common';
12 |
13 | interface StylePropertyFieldProps extends React.HTMLProps
{
14 | trait: Trait;
15 | }
16 |
17 | export default function TraitPropertyField({
18 | trait,
19 | ...rest
20 | }: StylePropertyFieldProps) {
21 | const editor = useEditor();
22 | const handleChange = (value: string) => {
23 | trait.setValue(value);
24 | };
25 |
26 | const onChange = (ev: any) => {
27 | handleChange(ev.target.value);
28 | };
29 |
30 | const handleButtonClick = () => {
31 | const command = trait.get('command');
32 | if (command) {
33 | typeof command === 'string'
34 | ? editor.runCommand(command)
35 | : command(editor, trait);
36 | }
37 | };
38 |
39 | const type = trait.getType();
40 | const defValue = trait.getDefault() || trait.attributes.placeholder;
41 | const value = trait.getValue();
42 | const valueWithDef = typeof value !== 'undefined' ? value : defValue;
43 |
44 | let inputToRender = (
45 |
52 | );
53 |
54 | switch (type) {
55 | case 'select':
56 | {
57 | inputToRender = (
58 |
59 |
69 |
70 | );
71 | }
72 | break;
73 | case 'color':
74 | {
75 | inputToRender = (
76 |
85 |
89 | handleChange(ev.target.value)}
94 | />
95 |
96 |
97 | ),
98 | }}
99 | />
100 | );
101 | }
102 | break;
103 | case 'checkbox':
104 | {
105 | inputToRender = (
106 | trait.setValue(ev.target.checked)}
109 | size="small"
110 | />
111 | );
112 | }
113 | break;
114 | case 'button':
115 | {
116 | inputToRender = (
117 |
120 | );
121 | }
122 | break;
123 | }
124 |
125 | return (
126 |
127 |
128 |
{trait.getLabel()}
129 |
130 | {inputToRender}
131 |
16 |
17 | M4yours Editor
18 |
19 |
20 | {({ selected, select, devices }) => (
21 |
22 |
29 |
30 | )}
31 |
32 |
33 |
34 |
35 |
36 |
37 | );
38 | }
39 |
--------------------------------------------------------------------------------
/src/components/headers/TopbarButtons.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { useEditor } from '@grapesjs/react';
3 | import {
4 | mdiArrowULeftTop,
5 | mdiArrowURightTop,
6 | mdiBorderRadius,
7 | mdiFullscreen,
8 | mdiXml,
9 | mdiEyeOutline
10 | } from '@mdi/js';
11 | import Icon from '@mdi/react';
12 | import { useEffect, useState } from 'react';
13 | import { BTN_CLS, MAIN_BORDER_COLOR, cx, BTN_TOP_CLS } from '../common';
14 |
15 | interface CommandButton {
16 | id: string;
17 | iconPath: string;
18 | options?: Record;
19 | disabled?: () => boolean;
20 | }
21 |
22 | export default function TopbarButtons({
23 | className,
24 | }: React.HTMLAttributes) {
25 | const editor = useEditor();
26 | const [, setUpdateCounter] = useState(0);
27 | const { UndoManager, Commands } = editor;
28 | const cmdButtons: CommandButton[] = [
29 | // {
30 | // id: 'core:component-outline',
31 | // iconPath: mdiBorderRadius,
32 | // },
33 | // {
34 | // id: 'core:fullscreen',
35 | // iconPath: mdiFullscreen,
36 | // options: { target: '#root' },
37 | // },
38 | // {
39 | // id: 'core:open-code',
40 | // iconPath: mdiXml,
41 | // },
42 | {
43 | id: 'core:undo',
44 | iconPath: mdiArrowULeftTop,
45 | disabled: () => !UndoManager.hasUndo(),
46 | },
47 | {
48 | id: 'core:redo',
49 | iconPath: mdiArrowURightTop,
50 | disabled: () => !UndoManager.hasRedo(),
51 | },
52 | {
53 | id: 'core:preview',
54 | iconPath: mdiEyeOutline ,
55 | },
56 | ];
57 |
58 | useEffect(() => {
59 | const cmdEvent = 'run stop';
60 | const updateEvent = 'update';
61 | const updateCounter = () => setUpdateCounter((value) => value + 1);
62 | const onCommand = (id: string) => {
63 | cmdButtons.find((btn) => btn.id === id) && updateCounter();
64 | };
65 | editor.on(cmdEvent, onCommand);
66 | editor.on(updateEvent, updateCounter);
67 |
68 | return () => {
69 | editor.off(cmdEvent, onCommand);
70 | editor.off(updateEvent, updateCounter);
71 | };
72 | }, []);
73 |
74 | return (
75 |
76 | {cmdButtons.map(({ id, iconPath, disabled, options = {} }) => (
77 |
95 | ))}
96 |
97 | );
98 | }
99 |
--------------------------------------------------------------------------------
/src/components/home/index.tsx:
--------------------------------------------------------------------------------
1 | import type { NextPage } from "next";
2 | import Link from "next/link";
3 |
4 | const HomeCom: NextPage = () => {
5 | return (
6 |
7 |
8 |
9 |
10 |
18 |
19 |
20 | M4yours Editor
21 |
22 |
23 |
28 |
29 |
30 |
31 |
{`Drag and Drop `}
32 |
33 | {Array.from(mapCategoryBlocks).map(([category, blocks]) => (
34 |
35 |
36 | {category}
37 |
38 |
39 | {blocks.map((block) => (
40 |
dragStart(block, ev.nativeEvent)}
49 | onDragEnd={() => dragStop(false)}
50 | >
51 |
55 |
59 | {block.getLabel()}
60 |
61 |
62 | ))}
63 |
64 |
65 | ))}
66 |
33 | {Array.from(mapCategoryBlocks).map(([category, blocks]) => (
34 |
35 |
36 | My Component
37 |
38 |
39 | {blocks.map((block) => (
40 |
dragStart(block, ev.nativeEvent)}
49 | onDragEnd={() => dragStop(false)}
50 | >
51 |
55 |
59 | {block.getLabel()}
60 |
61 |
62 | ))}
63 |
64 |
65 | ))}
66 |
12 |
13 |
14 |
15 |
20 |
21 |
Services
22 |
23 |
Pricing
24 |
29 |
30 |
Portfolio
31 |
Contact us
32 |
About us
33 |
34 |
35 |
36 |
41 |
Search...
42 |
43 |
44 | Register / Login
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 | © 2000-2021, All Rights Reserved
53 |
54 |
55 |
56 |
57 |
FAQ
58 |
59 |
Account
60 |
Manage Deliveries
61 |
Orders
62 |
Payments
63 |
Returns
64 |
65 |
66 |
67 |
Support
68 |
69 |
Contact us
70 |
Online Chat
71 |
Whatsapp
72 |
Telegram
73 |
Ticketing
74 |
75 |
76 |
77 |
About
78 |
79 |
About us
80 |
Blog
81 |
Careers
82 |
Jobs
83 |
In Press
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 | {`We ara a lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat... `}
94 | Read More
95 |
96 |
97 |
98 |
99 |
104 |
105 |
106 |
111 |
112 |
113 |
118 |
119 |
120 |
125 |
126 |
127 |
132 |
133 |
134 |
135 |
136 |
})
31 |