@tailor-cms/ce-quill-html-edit 0.0.3 → 0.0.5

package/dist/components/theme/index.js

@@ -0,0 +1,157 @@
+import IconPicker from 'quill/ui/icon-picker';
+import Picker from 'quill/ui/picker';
+import Quill from 'quill';
+import SnowTheme from 'quill/themes/snow';
+import tippy from 'tippy.js';
+import mdiIcons, { getMdiIcon } from './toolbar-icons.ts';
+import ColorPicker from './ui/color-picker.ts';
+import ImageEmbed from './modules/image-embed.ts';
+const colors = [
+    '#000000',
+    '#e60000',
+    '#ff9900',
+    '#ffff00',
+    '#008a00',
+    '#0066cc',
+    '#9933ff',
+    '#ffffff',
+    '#facccc',
+    '#ffebcc',
+    '#ffffcc',
+    '#cce8cc',
+    '#cce0f5',
+    '#ebd6ff',
+    '#bbbbbb',
+    '#f06666',
+    '#ffc266',
+    '#ffff66',
+    '#66b966',
+    '#66a3e0',
+    '#c285ff',
+    '#888888',
+    '#a10000',
+    '#b26b00',
+    '#b2b200',
+    '#006100',
+    '#0047b2',
+    '#6b24b2',
+    '#444444',
+    '#5c0000',
+    '#663d00',
+    '#666600',
+    '#003700',
+    '#002966',
+    '#3d1466',
+];
+const reQuillControl = /^ql-/;
+const createTooltip = (input, showDelay = 350) => {
+    const isPicker = input instanceof Picker;
+    const reference = isPicker ? input.container : input;
+    const title = isPicker ? input.select.dataset.title : input.dataset.title;
+    tippy(reference, {
+        content: title || '',
+        appendTo: 'parent',
+        placement: 'bottom',
+        delay: [showDelay, 0],
+        trigger: 'click focus',
+        onShow: () => {
+            if (reference.classList.contains('ql-expanded'))
+                return false;
+        },
+    });
+};
+export default () => {
+    var _a;
+    Quill.register(`modules/${ImageEmbed.NAME}`, ImageEmbed, true);
+    const { toolbar } = SnowTheme.DEFAULTS.modules;
+    return _a = class TailorTheme extends SnowTheme {
+            extendToolbar(toolbar) {
+                super.extendToolbar(toolbar);
+                this.pickers.forEach((picker) => createTooltip(picker));
+            }
+            buildButtons(buttons) {
+                buttons.forEach((it) => {
+                    buildButton(it);
+                    createTooltip(it);
+                });
+            }
+            buildPickers(selects, icons) {
+                const filteredSelects = Array.from(selects);
+                const background = remove(filteredSelects, (it) => it.classList.contains('ql-background'));
+                const color = remove(filteredSelects, (it) => it.classList.contains('ql-color'));
+                const align = remove(filteredSelects, (it) => it.classList.contains('ql-align'));
+                super.buildPickers(filteredSelects, icons);
+                if (background) {
+                    fillSelect(background, colors, '#ffffff');
+                    this.pickers.push(new ColorPicker(this.quill, {
+                        type: 'background',
+                        select: background,
+                        label: getMdiIcon('background'),
+                    }));
+                }
+                if (color) {
+                    fillSelect(color, colors, '#000000');
+                    this.pickers.push(new ColorPicker(this.quill, {
+                        type: 'color',
+                        select: color,
+                        label: getMdiIcon('color'),
+                    }));
+                }
+                if (align) {
+                    const icons = mapKeys(mdiIcons.align, (_key, icon) => getMdiIcon('align', icon));
+                    this.pickers.push(new IconPicker(align, icons));
+                }
+            }
+        },
+        Object.defineProperty(_a, "NAME", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'tailor'
+        }),
+        Object.defineProperty(_a, "DEFAULTS", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                modules: {
+                    toolbar,
+                    [ImageEmbed.NAME]: true,
+                },
+            }
+        }),
+        _a;
+};
+function buildButton(button) {
+    let name = Array.from(button.classList).find((it) => reQuillControl.test(it));
+    if (!name)
+        return;
+    name = name.replace(reQuillControl, '');
+    if (name === 'direction') {
+        button.innerHTML = getMdiIcon(name, '') + getMdiIcon(name, 'rtl');
+        return;
+    }
+    button.innerHTML = getMdiIcon(name, button.value);
+}
+function fillSelect(select, values, defaultValue = '') {
+    values.forEach((value) => {
+        const option = document.createElement('option');
+        if (value === defaultValue) {
+            option.setAttribute('selected', 'selected');
+        }
+        else {
+            option.setAttribute('value', value);
+        }
+        select.appendChild(option);
+    });
+}
+function mapKeys(obj, cb) {
+    return Object.entries(obj).reduce((acc, [key, value]) => {
+        value = cb(value, key);
+        return Object.assign(acc, { [key]: value });
+    }, {});
+}
+function remove(arr, cb) {
+    const index = arr.findIndex(cb);
+    return arr.splice(index, 1)[0];
+}

package/dist/components/theme/modules/image-embed.d.ts

@@ -0,0 +1,5 @@
+import Quill, { Module } from 'quill';
+export default class ImageEmbed extends Module {
+    static NAME: string;
+    constructor(quill: Quill, options?: {});
+}

package/dist/components/theme/modules/image-embed.js

@@ -0,0 +1,18 @@
+import { Module } from 'quill';
+import ImageEmbedTooltip from '../ui/image-embed-tooltip';
+class ImageEmbed extends Module {
+    constructor(quill, options = {}) {
+        super(quill, options);
+        const { bounds } = quill.options;
+        const tooltip = new ImageEmbedTooltip(quill, bounds, options);
+        const toolbar = quill.getModule('toolbar');
+        toolbar.handlers.image = () => tooltip.show();
+    }
+}
+Object.defineProperty(ImageEmbed, "NAME", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: 'imageEmbed'
+});
+export default ImageEmbed;

package/dist/components/theme/toolbar-icons.d.ts

@@ -0,0 +1,3 @@
+declare const mdiIcons: Record<string, string | Record<string, string>>;
+export default mdiIcons;
+export declare function getMdiIcon(name: string, value?: string): string;

package/dist/components/theme/toolbar-icons.js

@@ -0,0 +1,69 @@
+const isString = (arg) => typeof arg === 'string';
+const mdiIcons = {
+    undo: 'undo',
+    redo: 'redo',
+    align: {
+        '': 'format-align-left',
+        center: 'format-align-center',
+        right: 'format-align-right',
+        justify: 'format-align-justify',
+    },
+    background: 'format-color-highlight',
+    blockquote: 'format-quote-close',
+    bold: 'format-bold',
+    clean: 'format-clear',
+    code: 'code-tags',
+    'code-block': 'code-tags',
+    color: 'format-color-text',
+    direction: {
+        '': 'format-pilcrow-arrow-right',
+        rtl: 'format-pilcrow-arrow-left',
+    },
+    formula: 'function-variant',
+    header: {
+        1: 'format-header-1',
+        2: 'format-header-2',
+    },
+    italic: 'format-italic',
+    image: 'image-plus',
+    indent: {
+        '+1': 'format-indent-increase',
+        '-1': 'format-indent-decrease',
+    },
+    link: 'link',
+    list: {
+        bullet: 'format-list-bulleted',
+        check: 'format-list-checks',
+        ordered: 'format-list-numbered',
+    },
+    script: {
+        sub: 'format-subscript',
+        super: 'format-superscript',
+    },
+    strike: 'format-strikethrough',
+    table: 'table-plus',
+    underline: 'format-underline',
+    video: 'video-plus',
+};
+export default mdiIcons;
+const textColor = `
+  <span style="position: relative;">
+    <i class="icon mdi-format-color-text mdi v-icon notranslate v-theme--default"></i>
+    <i class="icon mdi-color-helper mdi v-icon notranslate v-theme--default" style="position: absolute; top: 0; left: 0;"></i>
+  </span>
+`;
+const bgColor = `
+  <span style="position: relative;">
+    <i class="icon mdi-format-color-highlight mdi v-icon notranslate v-theme--default"></i>
+    <i class="icon mdi-color-helper mdi v-icon notranslate v-theme--default" style="position: absolute; top:0; left: 0;"></i>
+  </span>
+`;
+export function getMdiIcon(name, value = '') {
+    if (name === 'color')
+        return textColor;
+    if (name === 'background')
+        return bgColor;
+    const icon = mdiIcons[name];
+    const code = isString(icon) ? icon : icon[value];
+    return `<span class="icon mdi mdi-${code}"></span>`;
+}

package/dist/components/theme/ui/color-picker.d.ts

@@ -0,0 +1,16 @@
+import './color-picker.scss';
+import ColorPicker from 'quill/ui/color-picker';
+import Quill from 'quill';
+interface ColorPickerOptions {
+    type: string;
+    select: HTMLSelectElement;
+    label: string;
+}
+export default class ExtendedColorPicker extends ColorPicker {
+    options: HTMLElement;
+    readonly quill: Quill;
+    readonly type: string;
+    constructor(quill: Quill, options: ColorPickerOptions);
+    buildPicker(): void;
+}
+export {};

package/dist/components/theme/ui/color-picker.js

@@ -0,0 +1,54 @@
+import './color-picker.scss';
+import ColorPicker from 'quill/ui/color-picker';
+import Quill from 'quill';
+const className = (...names) => names.join(' ');
+export default class ExtendedColorPicker extends ColorPicker {
+    constructor(quill, options) {
+        super(options.select, options.label);
+        Object.defineProperty(this, "quill", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.quill = quill;
+        this.type = options.type;
+    }
+    buildPicker() {
+        super.buildPicker();
+        const btnReset = createButton({ icon: 'mdi-water-off', text: 'None' });
+        btnReset.className = className('picker-item__none');
+        btnReset.addEventListener('click', () => {
+            this.quill.format(this.type, null, Quill.sources.USER);
+            this.close();
+        });
+        const colorOptions = wrapOptions(this.options);
+        colorOptions.className = className('picker-colors');
+        this.options.appendChild(btnReset);
+        this.options.appendChild(colorOptions);
+    }
+}
+function wrapOptions({ children }) {
+    const container = document.createElement('div');
+    Array.from(children).forEach((option) => container.appendChild(option));
+    return container;
+}
+function createButton({ icon, text }) {
+    const btn = document.createElement('span');
+    btn.tabIndex = 0;
+    btn.setAttribute('role', 'button');
+    btn.appendChild(createIcon(icon));
+    btn.innerHTML += text;
+    return btn;
+}
+function createIcon(name) {
+    const icon = document.createElement('span');
+    icon.className = className('icon', 'mdi', name);
+    return icon;
+}

package/dist/components/theme/ui/image-embed-tooltip.d.ts

@@ -0,0 +1,15 @@
+import './image-embed-tooltip.scss';
+import Quill from 'quill';
+import Tooltip from './tooltip.ts';
+export default class ImageEmbedTooltip extends Tooltip {
+    static TEMPLATE: string;
+    readonly padding: string;
+    readonly textbox: HTMLInputElement | null;
+    readonly btnAction: HTMLAnchorElement | null;
+    constructor(quill: Quill, bounds: HTMLElement, { spacing }?: {
+        spacing?: number | undefined;
+    });
+    listen(): void;
+    show(): void;
+    embedImage(): void;
+}

package/dist/components/theme/ui/image-embed-tooltip.js

@@ -0,0 +1,84 @@
+import './image-embed-tooltip.scss';
+import Keyboard from 'quill/modules/keyboard';
+import Quill from 'quill';
+import Tooltip from './tooltip.ts';
+class ImageEmbedTooltip extends Tooltip {
+    constructor(quill, bounds, { spacing = 0 } = {}) {
+        super(quill, bounds);
+        Object.defineProperty(this, "padding", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "textbox", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "btnAction", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.padding = ' '.repeat(spacing);
+        this.textbox = this.root.querySelector('input.url');
+        this.btnAction = this.root.querySelector('a.action');
+        this.listen();
+    }
+    listen() {
+        this.btnAction?.addEventListener('click', () => this.embedImage());
+        this.textbox?.addEventListener('keydown', (e) => {
+            if (Keyboard.match(e, { key: 'enter' })) {
+                this.embedImage();
+                e.preventDefault();
+            }
+            else if (Keyboard.match(e, { key: 'escape' })) {
+                this.hide();
+                e.preventDefault();
+            }
+        });
+    }
+    show() {
+        super.show();
+        this.root.classList.add('ql-image-embed');
+        this.textbox?.select();
+    }
+    embedImage() {
+        const url = this.textbox?.value;
+        if (!url)
+            return;
+        const { quill } = this;
+        const range = quill.getSelection(true);
+        if (range) {
+            const { padding } = this;
+            const source = Quill.sources.USER;
+            let offset = range.index + range.length;
+            quill.insertText(offset, padding, source);
+            offset += padding.length;
+            quill.insertEmbed(offset, 'image', url, source);
+            offset += 1;
+            quill.insertText(offset, padding, source);
+            offset += padding.length;
+            quill.setSelection(offset, source);
+        }
+        if (this.textbox)
+            this.textbox.value = '';
+        this.hide();
+    }
+}
+Object.defineProperty(ImageEmbedTooltip, "TEMPLATE", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: `
+    <div class="controls">
+      <label>Enter image url:</label>
+      <input class="url" type="text">
+      <a class="action">Save</a>
+    </div>
+  `
+});
+export default ImageEmbedTooltip;

package/dist/components/theme/ui/tooltip.d.ts

@@ -0,0 +1,9 @@
+import Quill from 'quill';
+import Tooltip from 'quill/ui/tooltip';
+export default class ExtendedTooltip extends Tooltip {
+    isOpen: boolean;
+    constructor(quill: Quill, bounds: HTMLElement);
+    show(): void;
+    hide(): void;
+    _onClick(e: Event): void;
+}

package/dist/components/theme/ui/tooltip.js

@@ -0,0 +1,31 @@
+import Tooltip from 'quill/ui/tooltip';
+export default class ExtendedTooltip extends Tooltip {
+    constructor(quill, bounds) {
+        super(quill, bounds);
+        Object.defineProperty(this, "isOpen", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this._onClick = this._onClick.bind(this);
+        this.isOpen = false;
+    }
+    show() {
+        super.show();
+        this.isOpen = true;
+        setTimeout(() => document.body.addEventListener('mousedown', (e) => this._onClick(e)), 0);
+        const bounds = this.quill.getBounds(this.quill.selection.savedRange);
+        if (bounds)
+            this.position(bounds);
+    }
+    hide() {
+        super.hide();
+        this.isOpen = false;
+        document.body.removeEventListener('mousedown', (e) => this._onClick(e));
+    }
+    _onClick(e) {
+        if (this.isOpen && e.target && !this.root.contains(e.target))
+            this.hide();
+    }
+}