@tailor-cms/ce-quill-html-edit 0.0.6 → 0.1.0

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

@@ -1,69 +0,0 @@
-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.js

@@ -1,54 +0,0 @@
-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.js

@@ -1,84 +0,0 @@
-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.js

@@ -1,31 +0,0 @@
-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();
-    }
-}