JSFiddle - React, Tailwind, and code Playground

by Digvijay Naruka

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.js"></script>
  <div id="editor-container"></div>

JavaScript

// Initialize Quill editor
let quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block'],
    ],
  },
  placeholder: 'Compose an epic...',
  theme: 'snow', // or 'bubble'
});


// Your HTML string from the database
let html = "test <span style='display:none'>Hidden</span>, <span class='excluded'> Random</span><span style='display:none'> both</span> test";

// Split the HTML string by commas
let parts = html.split(',');

// Initialize an empty Delta
let delta = new Delta();

// Process each part separately
parts.forEach((part, index) => {
  // Convert the part to Delta
  let partDelta = quill.clipboard.convert(part.trim());
   console.log(partDelta)
  // Manually process the Delta to handle custom attributes
  partDelta.ops.forEach(op => {
    if (op.insert && typeof op.insert === 'string') {
      // No special processing needed for plain text
    } else if (op.attributes && op.attributes.style) {
      // Handle the 'displayNone' attribute
      if (op.attributes.style.includes('display:none')) {
        op.attributes.displayNone = true;
        delete op.attributes.style; // Clean up the style attribute
      }
    }

    // Handle the 'notSearchable' attribute
    if (op.attributes && op.attributes.class === 'excluded') {
      op.attributes.notSearchable = true;
      delete op.attributes.class; // Clean up the class attribute
    }
  });

  // Add the processed part to the main Delta
  delta = delta.concat(partDelta);

  // After each part, except the last, insert the separator
  if (index < parts.length - 1) {
    delta.insert({ sep: ',' });
  }
});

console.log(delta);

// Set the contents of the Quill editor with the processed Delta
quill.setContents(delta);