@youcan/ui-vue3/src/components/RichText/utils.ts

YouCan Vue3 components library

import Quill from 'quill';

export function replaceIcons(customIcons: { [key: string]: any }): void {
  const icons = Quill.import('ui/icons') as { [key: string]: string };

  icons.undo = '';
  icons.redo = '';
  icons.customImage = '';
  for (const key in icons) {
    // eslint-disable-next-line no-prototype-builtins
    if (customIcons.hasOwnProperty(key)) {
      icons[key] = customIcons[key];
    }
  }
}

export function styleColorPickerDropdown() {
  const elementToAppendTo = document.querySelectorAll('.ql-picker-item[data-value="transparent"]');
  elementToAppendTo.forEach((element) => {
    const redLineSpan = document.createElement('span');
    redLineSpan.classList.add('red-line');
    element.appendChild(redLineSpan);
  });
}

export function handleRtl(quill: Quill | null) {
  const divElement = document.querySelector('.ql-editor') as HTMLElement;
  divElement.style.textAlign = 'right';
  if (quill) {
    quill.format('direction', 'rtl');
    quill.format('align', 'right');
  }
}