craft.js

craft.js copied to clipboard

Describe the bug create element then use redo() , undo() not work

Here my code

** I tried UserElement has <Element/> or no**

Your environment

Software	Version(s)
craft.js	0.2.0-beta.3
React	17.0.1
TypeScript
Browser	chrome
npm/Yarn	yarn
Operating System	win 10

Fixed when remove StrictMode

when Frame data loaded from server , undo , redo also error

Not just undo /redo.

This basic app below won't work with <React.StrictMode> (which is generated by default with create-react-app). No errors, dragging doesn't work. Without <React.StrictMode> the app works as expected.

"@craftjs/core": "^0.3.0-alpha.4",

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

// App.tsx
import { Editor, Frame, Element } from '@craftjs/core';
import React, {CSSProperties} from 'react';

import { Container } from './components/Container';
import { Text } from './components/Text';

export default function App() {
  const pageStyles: CSSProperties = {
    display: 'flex',
    height: '100vh',
    flexDirection: 'row',
  };

  return (
    <div className="App">
      <Editor resolver={{ Text, Container }}>
        <Frame>
          <div style={pageStyles}>
            <Element canvas is={Container}>
              <Text fontSize={20} text="Hi world!" />
              <Text fontSize={20} text="Boom" />
            </Element>
          </div>
        </Frame>
      </Editor>
    </div>
  );
}

// ./components/Text.tsx
import { useNode } from '@craftjs/core';
import React from 'react';

export const Text = ({ text, ...props }: any) => {
  const {
    connectors: { connect, drag },
  } = useNode();

  return (
    <div {...props} ref={(ref) => connect(drag(ref!))}>
      <p>{text}</p>
    </div>
  );
};

// ./components/Container.tsx
import { useNode } from '@craftjs/core';
import React from 'react';

export const Container = ({ children, ...props }: any) => {
  const {
    connectors: { connect, drag },
  } = useNode();

  const styles = {
    background: '#eeeeee',
    flexGrow: 1,
    margin: '5px 0',
    padding: `5px`,
  };

  return (
    <div {...props} ref={(ref) => connect(drag(ref!))} style={styles}>
      {children}
    </div>
  );
};