Comments (1)
I found a solution using React state mgmt.
Here it is using simpler components to demonstrate:
MyText.jsx:
import { useNode, useEditor } from '@craftjs/core';
import ContentEditable from 'react-contenteditable';
export const MyText = ({ text, setText }) => {
const {
connectors: { connect },
} = useNode();
const { enabled } = useEditor((state) => ({
enabled: state.options.enabled,
}));
return (
<ContentEditable
innerRef={connect}
html={text}
disabled={!enabled}
onChange={(e) => setText(e.target.value)}
tagName="h2"
style={{
width: '100%',
color: '#000000',
fontSize: '16px', // Adjusted for better visibility
}}
/>
);
};
Text.craft = {
props: {
text: 'Edit Me',
color: '#FFFFFF',
},
displayName: 'Text',
};
MyContainer.jsx
import React, { useState, useEffect } from 'react';
import { useNode, Element } from '@craftjs/core';
import { MyText } from './MyText.jsx';
export const MyContainer = ({ buttonList: initialButtonList }) => {
const {
connectors: { connect, drag },
} = useNode();
// State to track text values of buttons
const [buttonList, setButtonList] = useState(initialButtonList);
// Function to handle text change
const handleTextChange = (text, index) => {
const newList = buttonList.map((button, idx) => {
if (idx === index) {
return { ...button, text: text };
}
return button;
});
setButtonList(newList);
};
return (
<div ref={connect} style={{ display: 'flex', flexDirection: 'column', gap: '10px', padding: '20px', backgroundColor: '#f0f0f0' }}>
{buttonList.map((button, index) => (
<div key={index} style={{ display: 'flex' }}>
<MyText text={button.text} setText={(text) => handleTextChange(text, index)} />
</div>
))}
</div>
);
};
MyContainer.craft = {
props: {
buttonList: [
{ text: 'Button 1', backgroundColor: '#007BFF', textColor: '#FFFFFF' },
{ text: 'Button 2', backgroundColor: '#28a745', textColor: '#FFFFFF' }
],
},
isCanvas: true,
displayName: 'Container',
};
And in my toolbox:
<MyContainer buttonList={[
{ text: 'Dynamic Button', backgroundColor: '#007BFF', textColor: '#FFFFFF' },
{ text: 'Another Button', backgroundColor: '#666666', textColor: '#FFFFFF' }
]} />
from craft.js.
Related Issues (20)
- How to delete a linked node? HOT 7
- How to make connections two components HOT 3
- Update a Node's prop without polluting editor state history HOT 1
- How to add a custom component to the bottom of the page by clicking on the left side HOT 2
- https://dynamics.sorce.interno/datagrid/forms_dynamic
- Multiple frames inside of an editor HOT 2
- User Component name doesn't change when specified in config HOT 1
- Nested elements are created as Linked Nodes instead of child nodes HOT 1
- How do I drag my saved serialized json into the editor? HOT 4
- The rollup packaging of the Craft.js project was successful, but when used, it reported an error "Buffer is not defined."
- Cancel drop HOT 2
- How do i get my html markup HOT 2
- Craft.js with React version 17 or 18 HOT 2
- Customizeable drag and drop HOT 1
- Rollup cache is published to NPM
- Avoid animation of the element snapping back to its origin position when element is dropped. HOT 1
- Something like maxlength or max content restrictions
- Question: can I load html into the editor instead of manually build? HOT 1
- Drag and drop does not work in the tutorial HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from craft.js.