Quill Focus

This package is a Quill.js module that add "Focus mode".

Example

Lorem ipsum dolor sit amet, albucius interpretaris ut vim. Sea id hinc assueverit. Odio moderatius vix at, sed ex appareat honestatis. Populo pericula accusamus eu est. Eos ne alterum antiopam, vitae expetendis sed at. Lucilius tacimates senserit id vim. Ius ea adhuc phaedrum salutandi, minimum perfecto qui no.

An quo graecis suscipit. Ei qui audire efficiantur. Eum ei adhuc graeci. Eam no illud luptatum quaerendum, utinam aeterno postulant ex mel, ea semper verterem inciderint usu.

Eos populo possit interpretaris an. Ex usu docendi apeirian, no quo autem aliquam. Ex atqui mollis percipit duo, nisl semper persius his ne, quot verterem ne vis. Iuvaret facilisi no eos, lucilius temporibus ius ne, pri ut esse numquam. Populo nemore docendi mea in, mel cu tation appareat.

At vidit iudicabit vim, aliquip atomorum pericula sit ut. Vis intellegat conclusionemque ei. Usu ad commodo propriae quaestio, id probo option per. Te numquam vituperatoribus sea, mucius prompta vim id. Ius cu civibus reprehendunt, an eum cibo ponderum.

Duis diceret adipisci et vis, no his quot sensibus. Tamquam accusata duo et, harum assueverit eu eos. Ex nisl temporibus cum, ea nominavi petentium urbanitas qui. Vix modus impedit abhorreant ex, vim tractatos tincidunt no. Unum pertinacia abhorreant his ex, quas partem molestiae in qui.

Quickstart

To install the module, set up an instance of Quill, add a script tag to the focus.js file and register it as a Quill module. Don’t forget to link default focus stylesheet. See example.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Quill-Focus Example</title>

    <link href="https://unpkg.com/quill@latest/dist/quill.snow.css" rel="stylesheet">
    <!-- Link Base Stylesheet -->
    <link href="https://rawgit.com/amka/quill-focus/master/src/focus.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <div id="editor"></div>

        <script src="https://unpkg.com/quill@latest/dist/quill.js"></script>

        <!-- Link Focus module -->
        <script src="https://rawgit.com/amka/quill-focus/master/src/focus.js"></script>
        <script>
            // Don't forget to register module
            Quill.register('modules/focus', Focus)

            var quill = new Quill('#editor', {
                theme: 'snow',
                modules: {
                    // Activate Focus module
                    focus: {
                        focusClass: 'focused-blot' // Defaults to .focused-blot.
                    }
                }
            });
        </script>
    </div>
</body>

</html>

Contributors are welcomed!