import 'lextrix/snow.css';
// import 'lextrix/bubble.css';
// import 'lextrix/slate.css';
// import 'lextrix/dawn.css';

import Lextrix from 'lextrix';
import 'lextrix/snow.css';
 
const mount = document.createElement('div');
document.getElementById('wrapper').appendChild(mount);
 
new Lextrix(mount, {
  theme: 'snow',
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline'],
      [{ header: [1, 2, false] }],
      ['link', 'clean'],
    ],
  },
});

async function switchTheme(wrapper, editor, newTheme) {
  const contents = editor.getContents();
  await loadThemeCss(newTheme); // your helper — swap link href
 
  wrapper.replaceChildren();
  const mount = document.createElement('div');
  wrapper.appendChild(mount);
 
  return new Lextrix(mount, {
    theme: newTheme,
    modules: { toolbar: toolbarFor(newTheme) },
  }).setContents(contents);
}

'use client';
 
import { useEffect, useRef, useState } from 'react';
import Lextrix from 'lextrix';
import 'lextrix/snow.css';
 
export function ThemedEditor({ theme }: { theme: 'snow' | 'bubble' | 'slate' | 'dawn' }) {
  const wrapperRef = useRef<HTMLDivElement>(null);
 
  useEffect(() => {
    const wrapper = wrapperRef.current;
    if (!wrapper) return;
 
    void import(`lextrix/${theme}.css`); // ensure CSS loaded in bundler
 
    const mount = document.createElement('div');
    wrapper.appendChild(mount);
 
    const editor = new Lextrix(mount, { theme, modules: { toolbar: [['bold', 'italic']] } });
 
    return () => wrapper.replaceChildren();
  }, [theme]);
 
  return <div ref={wrapperRef} />;
}