Canva freeze (Application becomes unresponsive) when i add section, row or column

[hsb601]

When i am adding section, row or column and move cursor to canva area and point out section then my application become unresponsive and hanged then i closed and open new one added section becomes in working then again i add section or column it goes into unresponsive state when i move cursor on canva this happens.

Reference video

Bug.freeze.canva.mp4

Coding Logic

const addSection = (): void => {
  if (isAddingSection || !editor.value) {
    console.log("Section is already being added or editor not ready.");
    return;
  }

  isAddingSection = true;
  try {
    const wrapper = editor.value.getWrapper();
    if (!wrapper) {
      console.log("Editor wrapper not found.");
      return;
    }

    // Use a pre-defined GrapesJS component type for the section
    // Or keep your custom component definition, but without the placeholder
    // The placeholder is what we'll be adding/removing, which can be a point of failure
    const newSection = wrapper.append({
      type: "section",
      tagName: "section",
      classes: ["gjs-section"],
      style: {
        padding: "20px",
        minHeight: "100px",
        background: "#f8f9fa",
        border: "2px dashed #dee2e6",
        margin: "10px 0",
        position: "relative",
      },
      // Instead of hardcoding components, let's keep it empty initially
      // and use a dedicated function to add the placeholder if needed.
    })[0];

    // Add a placeholder component separately, using a GrapesJS component definition
    if (newSection) {
      const placeholder = newSection.append({
        tagName: "div",
        classes: ["section-placeholder"],
        style: {
          textAlign: "center",
          color: "#6c757d",
          padding: "40px",
          fontSize: "16px",
        },
        components: `
          <p>Section added successfully!</p>
          <p style="font-size: 14px; margin-top: 10px;">Select this section to add row with custom columns</p>
        `,
      })[0];

      editor.value.select(newSection);
      hasContent.value = true;
      console.log("Section added successfully");
      sidebarMode.value = "layers";
    }
  } catch (error) {
    console.error("Error in addSection:", error);
  } finally {
    // We can remove the setTimeout here, as the flag should reset immediately.
    // The delay might be causing issues with a later click event.
    isAddingSection = false;
  }
};

const addRowWithColumns = (columnCount: number): void => {
  // Ensure we have a selected component and an editor instance
  if (!selectedComponent.value || !editor.value) {
    console.log("No component selected or editor not ready.");
    return;
  }

  // Ensure the selected component is a valid container for a row (e.g., a section)
  // This is a safety check to prevent errors
  if (selectedComponent.value.get("tagName") !== "section") {
    console.warn("Can only add a row to a section component.");
    return;
  }

  try {
    const parentComponent = selectedComponent.value;

    // Remove the placeholder directly from the component's components list
    // This is safer than finding and removing it from a separate array.
    const placeholder = parentComponent
      .components()
      .models.find((c: Component) =>
        c.getClasses().includes("section-placeholder")
      );
    if (placeholder) {
      placeholder.remove();
    }

    // GrapesJS has a native flexbox row component ('flex-box') and column components
    // This is a much better approach than manual styling.
    // We'll create a flexbox container with the appropriate styling.
    const columns = Array.from({ length: columnCount }, () => ({
      type: "cell", // Use a 'cell' type, which is designed for flex containers
      style: {
        minHeight: "100px",
        padding: "15px",
        border: "2px dashed #dee2e6",
        backgroundColor: "#f8f9fa",
        // The flex properties will be on the parent 'flex-box' container
      },
      components: [
        {
          tagName: "div",
          style: {
            textAlign: "center",
            color: "#6c757d",
            padding: "30px 10px",
            fontSize: "14px",
          },
          content: "Drop modules here",
        },
      ],
    }));

    // Append the new flex row to the selected section
    const newRow = parentComponent.append({
      type: "flex-box", // Use the native flexbox container
      tagName: "div",
      style: {
        display: "flex",
        flexDirection: "row",
        flexWrap: "nowrap",
        justifyContent: "flex-start",
        alignItems: "stretch",
        gap: "10px", // Use a modern gap property
        minHeight: "100px",
        margin: "10px 0",
        // No need for fontSize: "0" with flexbox
      },
      components: columns,
    })[0];

    // Immediately select the newly created row or its first column
    if (newRow) {
      // It's often better to select the row itself first,
      // and let the user click on a column.
      // Selecting a column might be what's causing the loop.
      editor.value?.select(newRow);
      hasContent.value = true;
      showColumnSelector.value = false;
      console.log(`Row with ${columnCount} columns added successfully`);
    }
  } catch (error) {
    console.error("Error adding flex row with columns:", error);
  }
};