How do I drag my saved serialized json into the editor?

[xs-nayeem]

When I export my template, I get the JSON of the template. Now I want to drag that JSON into the editor. Now, only an React Component can be dragged into the editor. How do I drag the JSON in the editor?

[shota-f]

If you have JSON(string), you can use deserialize method in Editor-actions in place you want to load.
This is very simple example.
try:

1. click Save button(probably equivalent to the serialized json you have)
2. click Load button

import { Editor, Frame, useEditor } from "@craftjs/core"
import { FC, useState } from "react"

const TextNode = () => {
  return <div style={{ color: "purple" }}>hello</div>
}

const EditorForSaving: FC<{ setJSONData: (json: string) => void }> = ({
  setJSONData,
}) => {
  const { query } = useEditor()

  return (
    <div style={{ marginBottom: 24, backgroundColor: "#fafafa" }}>
      <h2>Editor for Saving</h2>
      <div>
        <button
          onClick={() => {
            setJSONData(query.serialize())
          }}
        >
          Save
        </button>
      </div>
      <Frame>
        <TextNode />
      </Frame>
    </div>
  )
}

const EditorForLoading: FC<{ jsonData: string }> = ({ jsonData }) => {
  const {
    actions: { deserialize },
  } = useEditor()

  return (
    <div style={{ backgroundColor: "#fff" }}>
      <h2>Editor for Loading</h2>
      <div>
        <button
          onClick={() => {
            if (jsonData) {
              deserialize(jsonData)
            }
          }}
        >
          Load
        </button>
      </div>
      <Frame>
        {
          // loaded in heare
        }
      </Frame>
    </div>
  )
}

export default function Demo() {
  const [jsonData, setJSONData] = useState("")

  return (
    <div>
      <h1>Save and Load example</h1>
      <Editor resolver={{ TextNode }}>
        <EditorForSaving setJSONData={setJSONData} />
      </Editor>
      <Editor resolver={{ TextNode }}>
        <EditorForLoading jsonData={jsonData} />
      </Editor>
    </div>
  )
}

[xs-nayeem]

If you have JSON(string), you can use deserialize method in Editor-actions in place you want to load. This is very simple example. try:

1. click Save button(probably equivalent to the serialized json you have)
2. click Load button

import { Editor, Frame, useEditor } from "@craftjs/core"
import { FC, useState } from "react"

const TextNode = () => {
  return <div style={{ color: "purple" }}>hello</div>
}

const EditorForSaving: FC<{ setJSONData: (json: string) => void }> = ({
  setJSONData,
}) => {
  const { query } = useEditor()

  return (
    <div style={{ marginBottom: 24, backgroundColor: "#fafafa" }}>
      <h2>Editor for Saving</h2>
      <div>
        <button
          onClick={() => {
            setJSONData(query.serialize())
          }}
        >
          Save
        </button>
      </div>
      <Frame>
        <TextNode />
      </Frame>
    </div>
  )
}

const EditorForLoading: FC<{ jsonData: string }> = ({ jsonData }) => {
  const {
    actions: { deserialize },
  } = useEditor()

  return (
    <div style={{ backgroundColor: "#fff" }}>
      <h2>Editor for Loading</h2>
      <div>
        <button
          onClick={() => {
            if (jsonData) {
              deserialize(jsonData)
            }
          }}
        >
          Load
        </button>
      </div>
      <Frame>
        {
          // loaded in heare
        }
      </Frame>
    </div>
  )
}

export default function Demo() {
  const [jsonData, setJSONData] = useState("")

  return (
    <div>
      <h1>Save and Load example</h1>
      <Editor resolver={{ TextNode }}>
        <EditorForSaving setJSONData={setJSONData} />
      </Editor>
      <Editor resolver={{ TextNode }}>
        <EditorForLoading jsonData={jsonData} />
      </Editor>
    </div>
  )
}

@shota-f I can load the JSON on click. There is no problem with that. What I want is, when I save the template as JSON I am showing those JSON as my template in the sidebar. Now I want to drag it from the sidebar to the editor? How do I do that? Every drag element must be in the Editor Resolver. How do i handle that is case of Serialized JSON?

[jorgegonzalez]

Bumping as I have the same question

[xs-nayeem]

Bumping as I have the same question

@jorgegonzalez check out this issue. #316