How to use the quill/dist/quill.min.js.import function in quill

To help you get started, we’ve selected a few quill examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github clay / clay-kiln / inputs / wysiwyg.vue View on Github external
getPrevComponent, getNextComponent, getParentComponent, getComponentEl, getFieldEl
  } from '../lib/utils/component-elements';
  import { shouldBeRequired, getValidationError } from '../lib/forms/field-helpers';
  import label from '../lib/utils/label';
  import { sanitizeInlineHTML, sanitizeMultiComponentHTML, sanitizeBlockHTML } from './wysiwyg-sanitize';
  import { splitParagraphs, matchComponents, generatePasteRules } from './wysiwyg-paste';
  import {
    renderDeltas, generateDeltas, deltaEndsWith, matchLineBreak, matchParagraphs
  } from './wysiwyg-deltas';
  import { getNewlinesBeforeCaret, getLastOffsetWithNewlines } from './wysiwyg-caret';
  import { parsePhraseButton, parseFormats, createPhraseBlots } from './wysiwyg-phrase';
  import attachedButton from './attached-button.vue';
  import { DynamicEvents } from './mixins';

  const Delta = Quill.import('delta'),
    Clipboard = Quill.import('modules/clipboard'),
    Link = Quill.import('formats/link'),
    originalLinkSanitize = Link.sanitize,
    errorColor = '#f44336';

  // store references for multi-paragraph paste here.
  // this way, the paste function can set these, and they can be checked
  // AFTER the generated deltas have been pasted in.
  let firstComponentToUpdate,
    otherComponentsToUpdate;

  /**
   * handle multi-paragraph paste
   * @param  {array} components      of matched components
   * @param  {object} quill
   * @param  {object} current
   * @param  {array} elementMatchers
github clay / clay-kiln / inputs / wysiwyg-phrase.js View on Github external
import _ from 'lodash';
import Quill from 'quill/dist/quill.min.js';

const Inline = Quill.import('blots/inline'),
  toolbarIcons = Quill.import('ui/icons');

/**
 * parse button configs for phrases
 * note: a phrase with no class or custom button will just be a string
 * @param  {string|object} button
 * @return {string}
 */
export function parsePhraseButton(button) {
  if (_.isObject(button) && button.phrase) {
    return button.phrase.class ? `phrase-${button.phrase.class}` : 'phrase';
  } else {
    return button; // note: 'phrase' might be the button
  }
}

/**
github clay / clay-kiln / inputs / wysiwyg.vue View on Github external
import {
    getPrevComponent, getNextComponent, getParentComponent, getComponentEl, getFieldEl
  } from '../lib/utils/component-elements';
  import { shouldBeRequired, getValidationError } from '../lib/forms/field-helpers';
  import label from '../lib/utils/label';
  import { sanitizeInlineHTML, sanitizeMultiComponentHTML, sanitizeBlockHTML } from './wysiwyg-sanitize';
  import { splitParagraphs, matchComponents, generatePasteRules } from './wysiwyg-paste';
  import {
    renderDeltas, generateDeltas, deltaEndsWith, matchLineBreak, matchParagraphs
  } from './wysiwyg-deltas';
  import { getNewlinesBeforeCaret, getLastOffsetWithNewlines } from './wysiwyg-caret';
  import { parsePhraseButton, parseFormats, createPhraseBlots } from './wysiwyg-phrase';
  import attachedButton from './attached-button.vue';
  import { DynamicEvents } from './mixins';

  const Delta = Quill.import('delta'),
    Clipboard = Quill.import('modules/clipboard'),
    Link = Quill.import('formats/link'),
    originalLinkSanitize = Link.sanitize,
    errorColor = '#f44336';

  // store references for multi-paragraph paste here.
  // this way, the paste function can set these, and they can be checked
  // AFTER the generated deltas have been pasted in.
  let firstComponentToUpdate,
    otherComponentsToUpdate;

  /**
   * handle multi-paragraph paste
   * @param  {array} components      of matched components
   * @param  {object} quill
   * @param  {object} current
github clay / clay-kiln / inputs / wysiwyg.vue View on Github external
} from '../lib/utils/component-elements';
  import { shouldBeRequired, getValidationError } from '../lib/forms/field-helpers';
  import label from '../lib/utils/label';
  import { sanitizeInlineHTML, sanitizeMultiComponentHTML, sanitizeBlockHTML } from './wysiwyg-sanitize';
  import { splitParagraphs, matchComponents, generatePasteRules } from './wysiwyg-paste';
  import {
    renderDeltas, generateDeltas, deltaEndsWith, matchLineBreak, matchParagraphs
  } from './wysiwyg-deltas';
  import { getNewlinesBeforeCaret, getLastOffsetWithNewlines } from './wysiwyg-caret';
  import { parsePhraseButton, parseFormats, createPhraseBlots } from './wysiwyg-phrase';
  import attachedButton from './attached-button.vue';
  import { DynamicEvents } from './mixins';

  const Delta = Quill.import('delta'),
    Clipboard = Quill.import('modules/clipboard'),
    Link = Quill.import('formats/link'),
    originalLinkSanitize = Link.sanitize,
    errorColor = '#f44336';

  // store references for multi-paragraph paste here.
  // this way, the paste function can set these, and they can be checked
  // AFTER the generated deltas have been pasted in.
  let firstComponentToUpdate,
    otherComponentsToUpdate;

  /**
   * handle multi-paragraph paste
   * @param  {array} components      of matched components
   * @param  {object} quill
   * @param  {object} current
   * @param  {array} elementMatchers
   * @param  {array} textMatchers
github clay / clay-kiln / inputs / wysiwyg-phrase.js View on Github external
import _ from 'lodash';
import Quill from 'quill/dist/quill.min.js';

const Inline = Quill.import('blots/inline'),
  toolbarIcons = Quill.import('ui/icons');

/**
 * parse button configs for phrases
 * note: a phrase with no class or custom button will just be a string
 * @param  {string|object} button
 * @return {string}
 */
export function parsePhraseButton(button) {
  if (_.isObject(button) && button.phrase) {
    return button.phrase.class ? `phrase-${button.phrase.class}` : 'phrase';
  } else {
    return button; // note: 'phrase' might be the button
  }
}
github clay / clay-kiln / inputs / wysiwyg-deltas.js View on Github external
import Quill from 'quill/dist/quill.min.js';
import _ from 'lodash';

const Delta = Quill.import('delta');

/**
 * parse out paragraphs into line breaks,
 * then remove extraneous opening/closing tags and other line breaks
 * @param  {string} html
 * @return {string}
 */
function removeParagraphs(html) {
  return html.replace(/&lt;\/p&gt;<p>/ig, '<br>').replace(/&lt;\/?p&gt;/ig, '').replace(/<br>/ig, '');
}

/**
 * render deltas as html string
 * @param  {object} deltas
 * @return {string}
 */</p>