prevwong/craft.js

Indicators not showing.

Opened this issue · 0 comments

Describe the bug
I'm following the Basic Tutorial, and I can't get the indicators to show up. The tutorial doesn't mention the indicators at all, yet they do show up in the demonstration GIFs. I used pretty much the same code as in the basic tutorial, but yet I don't see any indicators on my page.

To Reproduce
Here is the code for the App component:

import {Typography, Paper, Grid} from '@material-ui/core';

import { Toolbox } from '#/components/editor/Toolbox';
import { SettingsPanel } from '#/components/editor/SettingsPanel';
import { Topbar } from '#/components/editor/TopBar';

import { Container } from '#/components/user/Container';
// import { Button } from '#/components/user/Button';
// import { Card } from '#/components/user/Card';
import { Text } from '#/components/user/Text';
import { Editor, Frame, Element } from '@craftjs/core';

export default function App() {
  return (
    <div style={{margin: "0 auto", width: "800px"}}>
      <Typography variant="h5" align="center">A super simple page editor</Typography>
      <Editor 
        resolver={{ Text, Container }}
        indicator={{
          success: '#2d9d78',
        }}
      >
        <Grid container spacing={3} style={{paddingTop: "10px"}}>
          <Topbar />
          <Grid item xs={8}>
            <Frame>
              <Element is={Container} padding={5} background="#eee" canvas>
                <Text
                  text='Hi'
                  fontSize={12}
                />
                <Text
                  text='How are you?'
                  fontSize={14}
                />
                <Element is={Container} padding={4} background='green' canvas>
                  <Text
                    text='Another text'
                    fontSize={16}
                  />
                </Element>
              </Element>
              
            </Frame>
          </Grid>
          <Grid item xs={4}>
            <Paper>
                <Toolbox />
                <SettingsPanel />
            </Paper>          
          </Grid>
        </Grid>
      </Editor>
    </div>
  );
}

Expected behavior
I'd expect the indicators to show up

Screenshots

bandicam.2024-05-30.14-48-40-996.mp4

Your environment

Software Version(s)
craft.js 0.2.6
React 18.2.0
TypeScript 5.2.2
Browser Chrome
npm/Yarn Yarn 1.22.17
Operating System Windows 10