GrapesJS / grapesjs

Free and Open source Web Builder Framework. Next generation tool for building templates without coding
https://grapesjs.com
BSD 3-Clause "New" or "Revised" License
22.36k stars 4.05k forks source link

BUG: getJS not working #5297

Closed FahemAhmad closed 1 year ago

FahemAhmad commented 1 year ago

GrapesJS version

What browser are you using?

Version 115.0.5790.171 (Official Build) (64-bit)

Reproducible demo link

https://codesandbox.io/s/1r0w2pk1vl?file=/index.html

Describe the bug

How to reproduce the bug?

  1. ... Add this form type and form block

What is the expected behavior? ... On getJS, i want the relevant js code inside the editor, i am not sure if my expectation is correct, if it is not, please let me know how can i achieve this

What is the current behavior? ... getJS({component}) is returning empty strings ''

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

// yourcode here
  Components.addType(typeForm, {
    isComponent: (el) => el.tagName == "FORM",

    model: {
      defaults: {
        tagName: "form",
        droppable: ":not(form)",
        draggable: ":not(form)",
        attributes: { method: "post" },
        traits: [
          {
            type: "select",
            name: "method",
            options: [
              { value: "get", name: "GET" },
              { value: "post", name: "POST" },
            ],
          },
          {
            name: "action",
          },
        ],
      },
    },

    view: {
      events: {
        submit: async function (this: any, e: Event) {
          const formData = new FormData(e.target as HTMLFormElement);
          const formValues: any = {};
          formData.forEach((value, key) => {
            formValues[key] = value;
          });

          let res = await api.post("/projects/testing", formValues);
          console.log("res", res);
        }, // Bind the function to the current context
      } as any,
    },
  });

// storage manager code  onStore: (data: any, editor: any) => {
          const pagesHtml = editor.Pages.getAll().map((page: any) => {
            const component = page.getMainComponent();

            console.log("component", editor.getJs({ component }));
            return {
              title: page.id,
              html: editor.getHtml({ component }),
              css: editor.getCss({ component }),
              js: editor.getJs({ component }),
            };
          });

          return { id: projectId, data, pagesHtml };
        },
      },

@ar

Code of Conduct

artf commented 1 year ago

The getJs returns the JS of your component model (the one you would place inside model.defaults.script), not the component view. Please read carefully Components & JS