Rendering a Navbar with dynamic menu items (e.g. Home, Blog) about craft.js HOT 1 CLOSED

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',
};

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',
};

<MyContainer buttonList={[
                    { text: 'Dynamic Button', backgroundColor: '#007BFF', textColor: '#FFFFFF' },
              { text: 'Another Button', backgroundColor: '#666666', textColor: '#FFFFFF' }
    ]} />