Enable selector box in the right panel while selecting a particular component on the canvas

When the user click on that component on the canvas, at the same time, we get few setting components like Typography, Margin, Appearance in right panel under Customization. But If I want to show that same name of the draggable component (like ‘Text’ or ‘Container’)that I clicked on the canvas, How can I do that ???

Below is the default code, that is used in order to enable of rendering corresponding setting component of a particular draggable component like Typography, Margin, etc. What I need to add in order to enable a feature so that name of the clicked or selected component appears on the top of right panel. Please help me to enable this feature.

import React from 'react';
import { useEditor } from '@craftjs/core';
export * from './ToolbarItem';
export * from './ToolbarSection';
export * from './ToolbarTextInput';
export * from './ToolbarDropdown';
export * from './ToolbarFontInput';

export const Toolbar = () => {
  const { active, related } = useEditor((state) => ({
    active: state.events.selected,
    related:
      state.events.selected && state.nodes[state.events.selected].related,
  }));

  return (
    <div className="py-0 h-screen">
      {active && related.toolbar && React.createElement(related.toolbar)}
      {!active && (
        <div
          className="px-5 py-2 flex flex-col items-center h-full justify-center text-center"
          style={{
            color: 'rgba(255, 255, 255, 1)',
            fontSize: '11px',
          }}
        >
          <h2 className="pb-1 ">Click on a component to start editing.</h2>
          <h2 className="">
            You could also double click on the layers below to edit their names,
            like in Photoshop
          </h2>
        </div>
      )}
    </div>
  );
};

[ankri]

What I need to add in order to enable a feature so that name of the clicked or selected component appears on the top of right panel. Please help me to enable this feature.

The top right of which panel? Because in the basic example the component name is displayed in the top right:

See: Selected Button on the top right of the SettingsPanel. The corresponding code is here

[ankri]

Hi!

I’m not sure whether I understand you correctly. Do you want to display the component’s name in the Editor/Canvas, like this (ComplexSection)? Taken from the landing page example from craft.js.org

This is achieved by rendering a floating box in RenderNode.tsx