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: script-props is invalid #3638

Closed momu-2016 closed 3 years ago

momu-2016 commented 3 years ago

Hi!@artf,Thanks for your great work! I follow the https://grapesjs.com/docs/modules/Components-js.html#passing-properties-to-scripts,but when i select the value,The script was not executed,Looking forward to some suggestions,thank you so much!

export default function (editor, opt = {}) {
  const c = opt;
  const domc = editor.DomComponents;
  const defaultType = domc.getType("default");
  const defaultView = defaultType.view;
  const TYPE = "test";
  const script = function (props) {
    alert("Hi");
  };
  editor.Components.addType(TYPE, {
    model: {
      defaults: {
        script,
        stitle: "value1",
        'script-props': ['stitle'],
        traits: [
          {
            type: "select",
            name: "stitle",
            changeProp: true,
            options: [
              { value: "value1", name: "Value 1" },
              { value: "value2", name: "Value 2" },
            ],
          },
        ],
      },
      Component(el) {
        if (el.getAttribute && el.getAttribute("data-gjs-type") == TYPE) {
          return {
            type: TYPE,
          };
        }
      },
    },
    view: defaultView.extend({}),
  });
}

`

artf commented 3 years ago

Seems to work all properly here: https://jsfiddle.net/rp7wa58h/ Anyway, you don't need the view if you don't use it, and the same for isComponent (which is misspelled in your example and placed in the wrong place), data-gjs-type is already used, by default, in the same way automatically by the editor