import type { CustomFont } from 'src/types'; import { create_quill, editor_css, editor_js, quill_bubble_css, quill_snow_css, quill_js, } from '../constants/editor'; export const getFontName = (font: string) => { return font.toLowerCase().replace(/\s/g, '-'); }; interface CreateHtmlArgs { initialHtml?: string; placeholder: string; toolbar: string; libraries: 'local' | 'cdn'; theme: 'snow' | 'bubble'; editorId: string; containerId: string; color: string; backgroundColor: string; placeholderColor: string; customStyles: string[]; fonts: Array; defaultFontFamily?: string; customJS?: string; } const Inital_Args = { initialHtml: '', placeholder: 'write here', toolbar: 'false', libraries: 'local', theme: 'snow', editorId: 'editor-container', containerId: 'standalone-container', color: 'black', backgroundColor: 'white', placeholderColor: 'rgba(0,0,0,0.6)', customStyles: [], fonts: [], customJS: '', } as CreateHtmlArgs; export const createHtml = (args: CreateHtmlArgs = Inital_Args) => { return ` ${ args.theme === 'bubble' ? quill_bubble_css(args.libraries === 'cdn') : quill_snow_css(args.libraries === 'cdn') } ${editor_css( args.editorId, args.containerId, args.color, args.backgroundColor, args.placeholderColor, args.fonts, args.defaultFontFamily )} ${ args.customStyles && args.customStyles .map((style) => { return style.toLocaleLowerCase().trim().startsWith('`; }) .join('\n') }

${args.initialHtml}

${quill_js(args.libraries === 'cdn')} ${create_quill( args.editorId, args.toolbar, args.placeholder, args.theme, args.fonts.map((f) => getFontName(f.name)), args.customJS ? args.customJS : '' )} ${editor_js} `; };