Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Attribute expandRootOnLoad in Layers component from @craftjs/layers not working in Basic page editor example #718

Open
jeffquach opened this issue Dec 30, 2024 · 0 comments

Comments

@jeffquach
Copy link

Describe the bug
After following the tutorial to create a basic page editor in the documentation and adding the layers package the expandRootOnLoad attribute doesn't work as expected in the <Layers /> component.

To Reproduce
Steps to reproduce the behavior:

  1. Followed the tutorial outlined here: https://craft.js.org/docs/guides/basic-tutorial.
  2. Made slight modifications to the code to not use material-ui.
  3. Code for the page editor can be viewed below:
import React from 'react';

import { Toolbox } from '../components/Toolbox';
import { SettingsPanel } from '../components/SettingsPanel';
import { Topbar } from '../components/Topbar';
import { Container } from '../components/user/Container';
import { Button } from '../components/user/Button';
import { Card, CardTop, CardBottom } from '../components/user/Card';
import { Text } from '../components/user/Text';
import { Editor, Frame, Element } from "@craftjs/core";
import { Layers } from "@craftjs/layers"

const App: React.FC = () => {
  return (
    <div style={{margin: "0 auto", width: "800px"}}>
      <h2 style={{ textAlign: 'center' }}>A super simple page editor</h2>
      <Editor resolver={{ Card, Button, Text, Container, CardTop, CardBottom }}>
        <Layers
          expandRootOnLoad={true}
        />
        <div>
          <Topbar />
        </div>
        <div style={{ display: 'flex', gap: '24px' }}>
          <div style={{ flex: 1 }}>
            <Frame>
              <Element is={Container} padding={5} background="#eee" canvas>
                <Card /> // Node of type Card
                <Button size="small" variant="outlined" text="Click" /> // Node of type Button, draggable
                <Text fontSize={12} text="Hi world!" /> // Node of type Text, draggable
                <Element is={Container} padding={2} background="#999" canvas> // Canvas Node of type Container, droppable and draggable
                  <Text text="It's me again!" /> // Node of type Text, draggable
                </Element>
              </Element>
            </Frame>
          </div>
          <div style={{ width: '25%' }}>
            <div style={{
              backgroundColor: '#fff',
              boxShadow: '0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)',
              borderRadius: '4px',
              padding: '16px'
            }}>
              <Toolbox />
              <SettingsPanel />
            </div>
          </div>
        </div>
      </Editor>
    </div>
  );
}

export default App;

Expected behavior
The children of the root node in the Layers panel is expected to be visible when using the expandRootOnLoad attribute.

Additional context
Would be great if the tutorial to create a basic page editor didn't rely on an outdated external library such as material-ui.

Your environment

Software Version(s)
@craftjs/core ^0.2.11
@craftjs/layers ^0.2.6
React ^18.2.0
TypeScript ^5.1.6
Browser Brave v1.73.104
npm/Yarn npm 10.5.0
Operating System Ubuntu 24.04.1 LTS
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant