Issue #5083Opened April 29, 2023by DanavsSite0 reactions

BUG: Blocks are not draggable to canvas

Question

GrapesJS version

  • I confirm to use the latest version of GrapesJS

What browser are you using?

Tauri

Reproducible demo link

**

Describe the bug

How to reproduce the bug? 1. 2. ...

What is the expected behavior? ...

What is the current behavior? ...

If is necessary to execute some code in order to reproduce the bug, paste it here below:

"use client"

import { useEffect, useRef, useState } from "react"
import { usePathname, useSearchParams } from "next/navigation"
import { Project, ProjectsAtom } from "@/atoms/projects"
import { useAtom } from "jotai"
import grapesjs, { Editor } from 'grapesjs'
import 'grapesjs/dist/css/grapes.min.css'
export default function Project() {
  const ref = useRef(null)
  const i = useSearchParams()
  const [projects, setProjects] = useAtom(ProjectsAtom)
  const [project,setProj]= useState<Project>()
  const [editor,setEditor]= useState<any>()

  useEffect(() => {
    setProj(projects.find((el) => el.id == i.get("id")))
  }, [projects])
  useEffect(() => {
    const e = grapesjs.init({
      container:"#co",
      fromElement: true,
      blockManager: {
        appendTo: '#blocks',
      },
      
})
setEditor(e)
editor.BlockManager.add('my-first-block', {
  label: 'Simple block',
  content: `<div class="my-block margin-only" 
  style="box-sizing: border-box; height: 100px; margin: 10vh 0 0 0; text-align: center;">
  This is a simple block 2</div>`,
});
console.log("================================")
  }, [])
  return (
    <>
    <div id="blocks"></div>
    <div id={"co"}>

    </div>
    </>
  )
}

Code of Conduct

  • I agree to follow this project's Code of Conduct

Answers (3)

DanavsSiteApril 30, 20230 reactions

2023-04-29 14_34_31-Greenshot

DanavsSiteMay 1, 20230 reactions

i just found out its because of webview2.Support for webview2??!

artfMay 2, 20230 reactions

I think this is more related to some Tauri configuration instead of GrapesJS as we're using the native HTML5 drag and drop

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.