diff --git a/src/rich_text_editor/index.ts b/src/rich_text_editor/index.ts index 285e403e9..996368f88 100644 --- a/src/rich_text_editor/index.ts +++ b/src/rich_text_editor/index.ts @@ -41,7 +41,7 @@ import { Module } from '../abstract'; import { Debounced, Model } from '../common'; import ComponentView from '../dom_components/view/ComponentView'; import EditorModel from '../editor/model/Editor'; -import { removeEl } from '../utils/dom'; +import { createEl, cx, removeEl } from '../utils/dom'; import { hasWin, isDef, on } from '../utils/mixins'; import defaults, { RichTextEditorConfig } from './config/config'; import RichTextEditor, { RichTextEditorAction } from './model/RichTextEditor'; @@ -116,6 +116,7 @@ export default class RichTextEditorModule extends Module this.__trgCustom(), 0); if (!hasWin()) return this; - const toolbar = document.createElement('div'); - toolbar.className = `${ppfx}rte-toolbar ${ppfx}one-bg`; + const toolbar = createEl('div', { + class: cx(`${ppfx}rte-toolbar`, !isCustom && `${ppfx}one-bg`), + }); this.toolbar = toolbar; - this.initRte(document.createElement('div')); + this.initRte(createEl('div')); //Avoid closing on toolbar clicking on(toolbar, 'mousedown', e => e.stopPropagation()); diff --git a/src/utils/dom.ts b/src/utils/dom.ts index bfc8d9299..4da47c8c1 100644 --- a/src/utils/dom.ts +++ b/src/utils/dom.ts @@ -9,6 +9,10 @@ type vNode = { type ChildHTML = HTMLElement | string; +type ClassNameInputType = string | number | boolean | null | undefined; + +type ClassNameInput = ClassNameInputType | Array; + const KEY_TAG = 'tag'; const KEY_ATTR = 'attributes'; const KEY_CHILD = 'children'; @@ -22,6 +26,11 @@ export const removeEl = (el?: HTMLElement) => { parent && parent.removeChild(el); }; +export function cx(...inputs: ClassNameInput[]): string { + const inp = Array.isArray(inputs[0]) ? inputs[0] : [...inputs]; + return inp.filter(Boolean).join(' '); +} + export const find = (el: HTMLElement, query: string) => el.querySelectorAll(query); export const attrUp = (el?: HTMLElement, attrs: ObjectAny = {}) =>