Custom Code unable to be used if user clicks save without entering any text #33

Activity

1. Baki995 commented on Nov 26, 2024

   

   Baki995

   on Nov 26, 2024

   More actions

   I fixed it on this way

   const editor = grapesjs.init({

   `plugins: [
       'grapesjs-custom-code'
   ],
   pluginsOpts: {
       'grapesjs-custom-code': {
               propsCustomCode: {
                   components: {},
               },
               commandCustomCode: {
                   handleSave() {
                       const keyCustomCode = 'custom-code-plugin__code';
                       const { target, em } = this;
                       const code = this.getCodeViewer().getContent();
                       target?.set(keyCustomCode, code);
                       // eslint-disable-next-line
                       editor.Modal.close();
                       em.getSelected().view.render(); // this is important part
                   },
               }
       }
   }
   

   });

   And created the new type with the same id to rewrite logic

   editor.Components.addType('custom-code', {

       `view: {
           onRender({ el }) {
               setTimeout(() => {
                   if (el.offsetHeight === 0) { // no content or without height. It should be clickable 
                       const defaultEl = document.createElement('p');
                       defaultEl.classList.add('p-4', 'border', 'border-dark');
                       defaultEl.textContent = 'Default embed code placeholder';
                       el.appendChild(defaultEl);
                   }
               }, 500); // If we have some script with src, then we should wait for load
           },
       },
   });`