Skip to content

Commit ded1cb4

Browse files
MadinventorZerojonocrbuddhajjigaexkevinparkwilliamdyoon
committed
Dynamically creating codepreview in generatecode
Co-authored-by: jonocr <[email protected]> Co-authored-by: buddhajjigae <[email protected]> Co-authored-by: xkevinpark <[email protected]> Co-authored-by: williamdyoon <[email protected]>
1 parent 569907a commit ded1cb4

File tree

6 files changed

+85
-63
lines changed

6 files changed

+85
-63
lines changed

‎app/src/components/bottom/CodePreview.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useContext, useState, useRef, useEffect } from 'react';
22
import StateContext from '../../context/context';
33
import AceEditor from 'react-ace';
4+
import 'ace-builds/src-min-noconflict/ext-searchbox';
45
import 'ace-builds/src-noconflict/mode-javascript';
56
import 'ace-builds/src-noconflict/theme-monokai';
67
import 'ace-builds/src-noconflict/theme-github';
@@ -38,7 +39,7 @@ const CodePreview: React.FC<{
3839
<div
3940
ref={wrapper}
4041
style={{
41-
height: '100%',
42+
height: '40vh',
4243
maxWidth: '100%',
4344
justifyContent: 'center',
4445
}}

‎app/src/components/left/HTMLPanel.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ const HTMLPanel = (props): JSX.Element => {
142142
};
143143

144144
const handleCreateElement = useCallback((e) => {
145-
if(e.key === 'Enter') {
145+
if(e.key === 'Enter' && e.target.tagName !== "TEXTAREA") {
146146
e.preventDefault();
147147
document.getElementById('submitButton').click();
148148
}

‎app/src/components/right/ComponentPanel.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ const ComponentPanel = ({isThemeLight}): JSX.Element => {
109109
};
110110

111111
const keyBindCreateComponent = useCallback((e) => {
112-
if(e.key === 'Enter') {
112+
if(e.key === 'Enter' && e.target.tagName !== "TEXTAREA") {
113113
e.preventDefault();
114114
document.getElementById('addComponentButton').click();
115115
}

‎app/src/containers/RightContainer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -341,7 +341,7 @@ const RightContainer = ({ isThemeLight }): JSX.Element => {
341341
? handleRedo()
342342
: // Delete HTML tag off canvas
343343
// Caret
344-
e.key === 'Backspace' && e.ctrlKey
344+
e.key === 'Backspace' && e.target.tagName !== "TEXTAREA" && e.target.tagName !== "INPUT"
345345
? handleDelete()
346346
: // Save
347347
(e.key === 's' && e.ctrlKey && e.shiftKey) ||

‎app/src/context/HTMLTypes.tsx

Lines changed: 31 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -48,21 +48,6 @@ const HTMLTypes: HTMLType[] = [
4848
placeHolderLong: '',
4949
icon: FormIcon
5050
},
51-
{
52-
id: 3,
53-
tag: 'li',
54-
name: 'List',
55-
style: { color: 'purple' },
56-
placeHolderShort: (
57-
<ul>
58-
<li>item 1</li>
59-
<li>item 2</li>
60-
<li>item 3</li>
61-
</ul>
62-
),
63-
placeHolderLong: '',
64-
icon: ListIcon
65-
},
6651
{
6752
id: 4,
6853
tag: 'button',
@@ -135,6 +120,37 @@ const HTMLTypes: HTMLType[] = [
135120
placeHolderShort: <label>Label</label>,
136121
placeHolderLong: '',
137122
icon: HeaderIcon
123+
},
124+
{
125+
id: 3,
126+
tag: 'li',
127+
name: 'List',
128+
style: { color: 'purple' },
129+
placeHolderShort: (
130+
<ul>
131+
<li>item 1</li>
132+
<li>item 2</li>
133+
<li>item 3</li>
134+
</ul>
135+
),
136+
placeHolderLong: '',
137+
icon: ListIcon
138+
},
139+
{
140+
id: 14,
141+
tag: 'ol',
142+
name: 'Ordered List',
143+
placeHolderShort: 'ol',
144+
placeHolderLong: '',
145+
icon: ListIcon
146+
},
147+
{
148+
id: 15,
149+
tag: 'ul',
150+
name: 'Unordered List',
151+
placeHolderShort: 'ul',
152+
placeHolderLong: '',
153+
icon: ListIcon
138154
}
139155
];
140156

‎app/src/helperFunctions/generateCode.ts

Lines changed: 49 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { element } from 'prop-types';
12
import {
23
Component,
34
State,
@@ -63,58 +64,72 @@ const generateUnformattedCode = (
6364
links = true;
6465
child.name = components.find(
6566
(comp: Component) => comp.id === child.typeId
66-
).name;
67-
return child;
68-
}
69-
});
70-
return enrichedChildren;
67+
).name;
68+
return child;
69+
}
70+
});
71+
return enrichedChildren;
72+
};
73+
// Caret Start
74+
// Raised formatStyles so that it is declared before it is referenced. It was backwards.
75+
// format styles stored in object to match React inline style format
76+
const formatStyles = (styleObj: any) => {
77+
if (Object.keys(styleObj).length === 0) return ``;
78+
const formattedStyles = [];
79+
for (let i in styleObj) {
80+
const styleString = i + ': ' + "'" + styleObj[i] + "'";
81+
formattedStyles.push(styleString);
82+
}
83+
return ' style={{' + formattedStyles.join(',') + '}}';
84+
};
85+
86+
// function to dynamically add classes, ids, and styles to an element if it exists.
87+
const elementTagDetails = (childElement: object) => {
88+
let customizationDetails = "";
89+
if (childElement.childId) customizationDetails += (' ' + `id=${childElement.childId}`);
90+
if (childElement.attributes && childElement.attributes.cssClasses) customizationDetails += (' ' + `className=${childElement.attributes.cssClasses}`);
91+
if (childElement.style && Object.keys(childElement.style).length > 0) customizationDetails +=(' ' + formatStyles(childElement));
92+
return customizationDetails;
7193
};
94+
7295
// write all code that will be under the "return" of the component
7396
const writeNestedElements = (enrichedChildren: any) => {
7497
return `${enrichedChildren
7598
.map((child: any) => {
7699
console.log("What is in this child", child);
77-
const childId = child.childId;
78-
const childStyle = child.style;
79-
const innerText = child.attributes.compText;
80-
const classRender = child.attributes.cssClasses;
100+
let innerText = '';
101+
if (child.attributes && child.attributes.compText) innerText = child.attributes.compText;
81102
if (child.type === 'Component') {
82-
return `<${child.name}${formatStyles(child.style)} />`;
103+
return `<${child.name} ${elementTagDetails(child)} />`;
83104
} else if (child.type === 'HTML Element') {
84105
if (child.tag === 'img') {
85-
return `<${child.tag} src=""${formatStyles(child.style)} />`;
106+
return `<${child.tag} src="" ${elementTagDetails(child)}/>`;
86107
} else if (child.tag === 'a') {
87-
return `<${child.tag} href=""${formatStyles(child.style)}>[LINK]</${child.tag}>`;
108+
return `<${child.tag} href=""${elementTagDetails(child)}>${innerText}</${child.tag}>`;
88109
} else if (child.tag === 'div') {
89-
return `<${child.tag} className=${classRender} id=${childId} style=${childStyle} ${formatStyles(child.style)}>${innerText}${writeNestedElements(child.children)}
90-
</${child.tag}>`;
110+
return `<${child.tag}${elementTagDetails(child)}>${innerText}\n${writeNestedElements(child.children)}</${child.tag}>`;
91111
} else if (child.tag === 'h1') {
92-
return `<${child.tag} className=${classRender} id=${childId} style=${childStyle} ${formatStyles(child.style)}>${innerText}</${child.tag}>`;
112+
return `<${child.tag}${elementTagDetails(child)}>${innerText}</${child.tag}>`;
93113
} else if (child.tag === 'h2') {
94-
return `<${child.tag} className=${classRender} id=${childId} style=${childStyle} ${formatStyles(child.style)}>${innerText}</${child.tag}>`;
114+
return `<${child.tag}${elementTagDetails(child)}>${innerText}</${child.tag}>`;
95115
} else if (child.tag === 'form') {
96-
return `<${child.tag} className=${classRender} id=${childId} style=${childStyle} ${formatStyles(child.style)}>
97-
${innerText}
98-
${writeNestedElements(child.children)}
99-
</${child.tag}>`;
100-
}
101-
// Caret Start
102-
else if (child.tag === 'input') {
103-
return `<${child.tag} className=${classRender} id=${childId} style=${childStyle} ${formatStyles(child.style)}></${child.tag}>`;
116+
return `<${child.tag}${elementTagDetails(child)}>${innerText}\n${writeNestedElements(child.children)}</${child.tag}>`;
117+
} else if (child.tag === 'input') {
118+
return `<${child.tag}${elementTagDetails(child)}></${child.tag}>`;
104119
} else if (child.tag === 'label') {
105-
return `<${child.tag} className=${classRender} id=${childId} style=${childStyle} ${formatStyles(child.style)}>${innerText}</${child.tag}>`;
106-
}
107-
// Caret End
108-
else if (child.tag === 'p') {
109-
return `<${child.tag} className=${classRender} id=${childId} style=${childStyle} ${formatStyles(child.style)}>${innerText}</${child.tag}>`;
120+
return `<${child.tag}${elementTagDetails(child)}>${innerText}</${child.tag}>`;
121+
} else if (child.tag === 'p') {
122+
return `<${child.tag}${elementTagDetails(child)}>${innerText}</${child.tag}>`;
123+
} else if (child.tag === 'ol') {
124+
return `<${child.tag} ${elementTagDetails(child)}>${innerText}\n${writeNestedElements(child.children)}</${child.tag}>`;
125+
} else if (child.tag === 'ul') {
126+
return `<${child.tag} ${elementTagDetails(child)}>${innerText}\n${writeNestedElements(child.children)}</${child.tag}>`;
110127
} else if (child.tag === 'li') {
111-
return `<ul${formatStyles(child.style)}><li>item 1</li>
112-
<li>item 2</li>
113-
<li>item 3</li></ul>`;
128+
return `<${child.tag} ${elementTagDetails(child)}></${child.tag}>`;
114129
} else if (child.tag === 'button') {
115-
return `<${child.tag} className=${classRender} id=${childId} style=${childStyle} ${formatStyles(child.style)}>${innerText}</${child.tag}>`;
130+
return `<${child.tag}${elementTagDetails(child)}>${innerText}</${child.tag}>`;
116131
} else if (child.tag !== 'separator') {
117-
return `<${child.tag} className=${classRender} id=${childId} style=${childStyle} ${formatStyles(child.style)}>${innerText}</${child.tag}>`;
132+
return `<${child.tag}${elementTagDetails(child)}>${innerText}</${child.tag}>`;
118133
}
119134
}
120135
// route links are for gatsby.js and next.js feature. if the user creates a route link and then switches projects, generate code for a normal link instead
@@ -133,16 +148,6 @@ const generateUnformattedCode = (
133148
.join('\n')}`;
134149
};
135150

136-
// format styles stored in object to match React inline style format
137-
const formatStyles = (styleObj: any) => {
138-
if (Object.keys(styleObj).length === 0) return ``;
139-
const formattedStyles = [];
140-
for (let i in styleObj) {
141-
const styleString = i + ': ' + "'" + styleObj[i] + "'";
142-
formattedStyles.push(styleString);
143-
}
144-
return ' style={{' + formattedStyles.join(',') + '}}';
145-
};
146151

147152
const enrichedChildren: any = getEnrichedChildren(currentComponent);
148153

0 commit comments

Comments
 (0)