Wondering what’s next for npm?Check out our public roadmap! »

@voicehub/quill-autoformat

0.2.19 • Public • Published

This is a fork of https://github.com/weavy/quill-autoformat.

This fork in addition, supports static-code, which is just a inline code block which is not editable after it has been created.

The static code block can be created by simply typing a backtick (`), then your content, and then another backtick.

The difference with this block is that it can not be edited afterwards. The intention is to use it for formatting purposes, where the content is not actually code, but parameters which are statically defined. This feature makes it very handy to not have the user changing the contents of the block.

Quill Autoformat

Module for transforming and formatting text as you type or paste in Quill. Using RegExp to find and trigger transformations for text such as links, mentions, hashtags or emojis. Out of the box support for:

  • Links
  • Hashtags
  • Mentions
  • Static Code Block (in this fork)

Note: Requires Quill 2.0

Usage

To add quill-autoformat to your Quill, simply add the javascript after quill or import it in your project. Use the provided quill-formats or define your own parchments.

<body>
  ...
  <form action="#" method="get">
    <div id="editor-container"></div>
  </form>
  ...
  <script src="/path/to/quill.min.js"></script> 
  <script src="/path/to/quill-autoformat.js"></script> 
  <script>
    var editor = new Quill('#editor-container', {
      modules: {
        autoformat: true
      }
    });
  </script> 
  ...
</body>

Transforms

You can specify as many transforms as you like, just give each transform a unique name. Three transforms are enabled by default; hashtag, mention and link. Just set the default types to false to disable them or change any property you like to a custom value.

Each transform may have the following properties:

transform: {
   trigger:     RegExp, // RegExp for matching text input characters to trigger the match. Defaults to /./ which is matching any character
   find:        RegExp, // Global RegExp to search for in the text
   extract:     RegExp, // Additional RegExp to finetune and override the found text match
   transform:   String || Function, // String or function passed to String.replace() to rewrite find/extract results
   insert:      String || {...}, // Insert name string or embed insert object.
   format:      String || {...} // Format name string or attributes object.
 }

Reference

Default Options

Specify one option or more to override defaults.

var editor = new Quill('#editor-container', {
  modules: {
    autoformat: {
      staticcode: {
        trigger: /[\s.,;:!?]/,
        find: /`([^`\n\r]+)`/i,
        extract: /`([^`\n\r]+)`/i,
        transform: '$1',
        insert: 'staticcode',
      },
      hashtag: {
        trigger: /[\s.,;:!?]/,
        find: /(?:^|\s)#[^\s.,;:!?]+/i,
        extract: /#([^\s.,;:!?]+)/i,
        transform: '$1',
        insert: 'hashtag'
      },
      mention: {
        trigger: /[\s.,;:!?]/,
        find: /(?:^|\s)@[^\s.,;:!?]+/i,
        extract: /@([^\s.,;:!?]+)/i,
        transform: '$1',
        insert: 'mention'
      },
      link: {
        trigger: /[\s]/,
        find: /https?:\/\/[\S]+|(www\.[\S]+)/gi,
        transform: function (value, noProtocol) { // value == match[0], noProtocol == match[1]
          return noProtocol ? "http://" + value : value;
        },
        format: 'link'
      }
    }
  }
});

Install

npm i @voicehub/quill-autoformat

DownloadsWeekly Downloads

0

Version

0.2.19

License

MIT

Unpacked Size

52.6 kB

Total Files

15

Last publish

Collaborators

  • avatar