GrapesJS PDF Reader

Doesn't work in jsfiddle

by artur_arseniev

HTML

<script src="https://unpkg.com/grapesjs"></script>
<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
<script src="https://unpkg.com/grapesjs-blocks-basic"></script>
<div id="gjs">
  <div style="padding: 25px">Hello world!</div>
</div>

CSS

body, html {
  margin: 0;
  height: 100%;
}

Babel + JSX

const pdfViewerPlugin = editor => {
  const type = 'pdf-viewer';
  
  editor.DomComponents.addType(type, {
      extend: 'image',
      model: {
        defaults: {
            tagName: 'iframe',
            resizable: true,
            void: false,
            src: '',
            style: { 
              height: '300px', 
              width: 'auto' 
            },
        }
      },
      view: {
        tagName: 'div',
        updateSrc() {
          const { model, el } = this;
          const iframe = el.querySelector('iframe');
          iframe && iframe.setAttribute('src', model.get('src'));
        },
        onRender({ el, model }) {
          const src = model.get('src');
          el.innerHTML = `<iframe style="width: 100%; height: 100%; pointer-events: none" src="${src}"></iframe>`;
        }
      },
    })

    editor.on('canvas:dragdata', (dataTransfer, result) => {
      const files = dataTransfer.files || [];

      for (let i = 0; i < files.length; i++) {
        const file = files[i];

        if (file.type == 'application/pdf') {
          result.content.push({ type, file })
        }
      }
    })  
};

const editor = grapesjs.init({
	container: '#gjs',
  fromElement: true,
  height: '100%',
  storageManager: false,
  plugins: ['gjs-blocks-basic', pdfViewerPlugin]
});