How to create custom link components that prompts users to type link/choose link similar to Images Component Modal

[edwardjiawei]

Image Components have logic to call Modal and prompt user's interaction for options/configuration of image url.

Would like to do similar to link components for link URL. It might be convenient for other components like Form components for business users to drag and type information in single flow.

How to achieve that, and the related handler in the codebase?

[daniel-farina]

I'm also looking in to this trying to get familiar with the code. Once we figure it out we could make some plugins a lot more powerful. Please let me know if you figure it out. We should make a little manual for it.

[artf]

Hi guys try to check out this #286

[edwardjiawei]

Sound good enough for my case. I have similar intention with #286

      var dynamicValue;
      model.set('content', dynamicValue);

[artf]

Great, I close this then

[edwardjiawei]

Actually I having issues for doStuff (#286) not get called if I adding to view in my (src/components.js) placeholders plugins.

Can you help me to look into the design.html that wired them up together.

But I have trouble to filter out which is the custom text/TextPlaceHolder (grapes-plugin-placeholder) and which is the text components (grapes-blocks-basic). Maybe also guide/code the custom link block and change the dropdown field to text input (For allows users to type their link in one flow).

I guess I doing something wrong in the plugins, can you help?

src/blocks.js

 editor.on('block:drag:stop', function(model) {
  //if I change the type in block contents: {type: 'custom-type', content: 'text', activeonrender:1}, the text changes according to prompt but only after page refresh (how to initiate refresh manually?)
   if(model.attributes.type == 'custom-type' || model.attributes.type =='text' ){
     model.setContent('promptValue')
     //refresh

[artf]

I'd avoid doing this with the block event listener, custom component is the way to go. Your doStuff is not working just because you didn't tell when to trigger it. You're missing this in your component view (components.js):

...
view: defaultView.extend({
      events: {
        'click': 'handleClick'
      },

     init() { 
       // The 'active' is triggered by the 'activeOnRender' you've used inside your block
       this.listenTo(this.model, 'active', this.doStuff);
     },

     doStuff() {...}
     ...

[krunal039]

@edwardjiawei @daniel-farina any luck with above? I am also looking for sample

[edwardjiawei]

@krunal039 See my plugin and how to use it / create similar flow, no much info than the how to create components in Wiki. No cleanup and might got some bad practice. Mine is simple text, and you have to migrate it to insert HTML. Bad practice that I use last time I tries is listen for the drag event for the particular components or I forgot to commit.

https://github.com/edwardjiawei/grapesjs-plugin-placeholder/commit/da55a2fad7b8ec757e0512d0f3b61eb8cc324ca0

[krunal039]

@edwardjiawei thanks for quick reply but I still struggle can you please point to specific code/line and I can have look?

[telliott22]

I've created a modal allows the user to input their href and link text, but how do I update the model?

If I use jQuery it only updates the view, and doesn't save the changes. If I create a new component with the new values, it's inserted outside of the parent element.

Am I missing a trick here?

Thanks, T

[artf]

@telliott22

const model = editor.getSelected();
model.setAttributes({href: ...});
...

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.