javascript in the value in react-quill/react-quill-with-table

Question

It seems like, by default content is sanitized in react-quill/react-quill-with-table, So if there is java script in the value then quill is replacing it by <p> tag. Below is part of the code:

import Quill from 'quill';
import ReactQuill from 'react-quill-with-table'
import 'react-quill-with-table/dist/quill.snow.css';
....
const ele = useRef('editor');
const content = '<table><tr><td>Hello,</td><td>World!</td></tr><tr><td>Hi</td><td>Welcome</td></tr></table><script>alert("test");</script>';

const modules = {
    toolbar: {
        container: '#toolbar',
        handlers: {
            //handler function
        }
    },
    clipboard: {
      matchVisual: false
    },
    sanitize: false,
  };

return (
    <div className="editor" style={{ backgroundColor: '#fff', minHeight: '300px' }}>
      <ReactQuill
          ref={ele}
          theme="snow"
          value={content}
          modules={modules}
        />
    </div>
  );

and its like, above content gets translated to : "<table><tbody><tr><td data-row="1">Hello,</td><td data-row="1">World!</td></tr><tr><td data-row="2">Hi</td><td data-row="2">Welcome</td></tr></tbody></table><p>alert("test");</p>"

How I can allow Java script in the quill editor.

I tried using sanitize to false in modules section, but still value getting sanitize and below approach not working.

const allowScriptTags = (html) => {
  const doc = new DOMParser().parseFromString(html, 'text/html');
  const scriptTags = doc.getElementsByTagName('script');
  for (let i = 0; i < scriptTags.length; i++) {
    scriptTags[i].parentNode.removeChild(scriptTags[i]);
  }
  return doc.documentElement.innerHTML;
};

Quill.register('modules/sanitize', {
  allowedTags: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre', 'a', 'ul', 'ol', 'li', 'hr', 'br', 'div', 'span', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'strong', 'em', 's', 'u', 'strike'],
  allowedAttributes: {
    a: ['href', 'target', 'rel'],
    table: ['class'],
    td: ['colspan', 'rowspan', 'style'],
    th: ['colspan', 'rowspan', 'style'],
    img: ['src', 'alt'],
  },
  transform: (node) => {
    if (node.tagName === 'script') {
      return allowScriptTags(node.outerHTML);
    }
  },
});

score 0 · Answer 1 · answered Jul 31 '23 at 15:00

function insertTableFromXML(rowCount: number, colCount: number) {
    if (row > 0 && col > 0) {
      const table = document.createElement('table');
      const tbody = document.createElement('tbody');
      for (let i = 0; i < rowCount; i++) {
        const row = document.createElement('tr');
    
        for (let j = 0; j < colCount; j++) {
          const cell = document.createElement('td');
          cell.textContent = `Row ${i + 1}, Column ${j + 1}`;
          row.appendChild(cell);
        }
    
        tbody.appendChild(row);
      }
    
      table.appendChild(tbody);
    
      // Вставляем таблицу в текущую позицию курсора с помощью библиотеки quill
      const quill = ref.current?.getEditor();
      if (quill) {
        const range = quill.getSelection();
        if (range) {
          quill.clipboard.dangerouslyPasteHTML(
            range.index,
            `<table>${table.innerHTML}</table>`
          );
        }
      }
    }
    else {
      alert('chose you table size')
    }
    
  }

I am created a function witch create me a table and insert it into quill

javascript in the value in react-quill/react-quill-with-table

1 Answers1