I need some help, I want to know how can I preserve the styles I write inside addNodeVIew?. Please let me know. Also let me know if there is any better approach for the same.

[Rohan-FE-Solytics]

`addNodeView() {
return ({ editor, node: nodeViewNode, getPos }) => {
let tempNoders = nodeViewNode;
// const cellMinWidth = 150;
const dom = document.createElement('div');

  // Apply styles to the wrapper directly
  dom.style.overflowX = 'auto'; // Enable horizontal scrolling
  dom.style.maxWidth = '70vw';
  dom.style.position = 'relative';
  dom.style.cursor = 'grab';
  dom.className = 'tableWrapper';

  const table = document.createElement('table');
  table.style.tableLayout = 'auto';
  table.style.width = '100%'; // Allow the table to grow based on its content
  // table.style.minWidth = `${nodeViewNode.childCount * cellMinWidth}px`; // Ensure the table has a minimum width
  table.style.position = 'relative';

  table.style.borderRadius = '4px';
  table.style.overflow = 'hidden'; // Ensure the contents respect the border-radius
  table.style.margin = '0 auto'; // Center the table horizontally within its container
  table.style.borderSpacing = '0';
  table.style.border = '1px solid #84AFEF; ';

  const colgroup = table.appendChild(document.createElement('colgroup'));
  updateColumns(nodeViewNode, colgroup, table);

  const tbody = table.appendChild(document.createElement('tbody'));

  dom.appendChild(table); // Append the table directly to dom

  // Add CSS to ensure the table has the default cursor style
  const style = document.createElement('style');
  style.textContent = `
    .tableWrapper table {
      cursor: default; /* Make sure the table itself does not have the grab cursor */
    }
  `;
  document.head.appendChild(style);

  return {
    dom,
    contentDOM: tbody,
    ignoreMutation: (mutation) =>
      mutation.type === 'attributes' &&
      (mutation.target === table || colgroup.contains(mutation.target)),
    update: (node) => {
      console.log('event 2');
      if (node.type !== nodeViewNode.type) {
        console.log('Node type mismatch!');
        return false;
      }

      tempNoders = node;
      updateColumns(tempNoders, colgroup, table);

      return true;
    },
    stopEvent: (event) => {
      console.log('event stopper in extention');
      if (event.type === 'dragend') {
        // Handle drag end (optional logic)
        return false;
      }
      // Prevent events from affecting dragging
      return !(event.type.startsWith('drag') || event.type === 'mousedown');
    },
  };
};

},`

I want to save the styles mentioned here when I setContent as html. Thanks

[litingyes]

I think you can add unique class name for the dom and only save the class, styles are stored in edtior view