<html>
    <head>
        <title>Quill Test</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta charset="utf-8">

        <!-- Style -->
        <link rel="stylesheet" href="//cdn.quilljs.com/1.3.6/quill.snow.css">
        <link rel="stylesheet" href="//cdn.quilljs.com/1.3.6/quill.bubble.css">

        <style>
            ng-quill-editor .ql-container {
                height: 150px;
            }

            ng-quill-editor.ng-invalid .ql-container {
                border: 1px dashed red;
            }

            .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14"]::before {
                content: '14';
            }

            .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16"]::before {
                content: '16';
            }

            .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18"]::before {
                content: '18';
            }
        </style>

        <!-- Scripts -->
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.7/angular.min.js"></script>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.7/angular-sanitize.min.js"></script>
        <script type="text/javascript" src="//cdn.quilljs.com/1.3.6/quill.js"></script>
        <script type="text/javascript" src="src/ng-quill.js"></script>
        <script>

          // declare a module and load quillModule
          var myAppModule = angular.module('quillTest', ['ngQuill'])
          myAppModule.config(['ngQuillConfigProvider', function (ngQuillConfigProvider) {
            ngQuillConfigProvider.set(null, null, 'custom placeholder')
          }])
          myAppModule.controller('AppCtrl', [
            '$scope',
            '$timeout',
            function ($scope, $timeout) {
              $scope.title = 'Quill works'
              $scope.requiredModel = ''
              $scope.modelJSONString = JSON.stringify([
                { insert: 'Hello ' },
                { insert: 'World!', attributes: { bold: true } },
                { insert: '\n' }
              ])
              $timeout(function () {
                $scope.modelJSONString = JSON.stringify([
                { insert: 'World!', attributes: { bold: true } },
                { insert: '\n' }
              ])
              }, 2000)
              $scope.model = ''
              $scope.required = 'required'
              $scope.modelJSON = { ops: [
                { insert: 'Hello ' },
                { insert: 'World!', attributes: { bold: true } },
                { insert: '\n' }
              ]}
              $scope.changeJSON = function () {
                $scope.modelJSON = $scope.modelJSON ? $scope.modelJSON : { ops: [] }
                const modelJSON = JSON.parse(JSON.stringify($scope.modelJSON))
                modelJSON.ops.unshift({ insert: 'Changed! ' })
                $scope.modelJSON = modelJSON
              }
              $scope.modelText = 'Hello World'
              $scope.readOnly = false
              $scope.test = ''
              $scope.customOptions = [{
                import: 'attributors/style/size',
                whitelist: ['14', '16', '18', 'small', 'large', 'huge']
              }]
              $scope.customTag = [{
                  import: 'blots/block',
                  toRegister: {key: 'tagName', value: 'DIV'}
              }]
              $scope.customModules = {
                toolbar: [
                  [{'size': [false, '14', '16', '18']}]
                ]
              }
              $scope.backgroundColor = 'gray'

              $timeout(function () {
                $scope.title += ' awsome!!!'
              }, 2000)

              $scope.editorCreated = function (editor) {
                console.log(editor)
              }
              $scope.contentChanged = function (editor, html, text, content, delta, oldDelta, source) {
                console.log('editor: ', editor, 'html: ', html, 'text:', text, 'content:', content, 'delta: ', delta, 'oldDelta:', oldDelta, 'source:', source)
              }
              $scope.selectionChanged = function (editor, range, oldRange, source) {
                console.log('editor: ', editor, 'range: ', range, 'oldRange:', oldRange, 'source:', source)
              }
              $scope.onFocus = function (editor, source) {
                console.log('focus: ', editor, 'source:', source)
              }
              $scope.onBlur = function (editor, source) {
                console.log('blur: ', editor, 'source:', source)
              }
            }
          ])
        </script>
    </head>
    <body ng-app="quillTest" ng-controller="AppCtrl">
        <h3>Default editor + PreserveWhitespac + Callbacks/Outputs in JS console + track-changes="all"</h3>
        <pre><code>{{title}}</code></pre>
        <ng-quill-editor bounds="self" ng-model="title" placeholder="'override default placeholder'" on-editor-created="editorCreated(editor)" on-content-changed="contentChanged(
          editor,
          html,
          text,
          content,
          delta,
          oldDelta,
          source
        )" on-selection-changed="selectionChanged(editor, range, oldRange, source)" on-focus="onFocus(editor, source)" on-blur="onBlur(editor, source)" preserve-whitespace="true" track-changes="all"></ng-quill-editor>

        <h3>Default editor + Callbacks/Outputs in JS console and empty init model + Object-Format</h3>
        <button ng-click="changeJSON()">Change the model!</button>
        <pre><code>{{modelJSON}}</code></pre>
        <ng-quill-editor format="object" custom-options="customTag" ng-model="modelJSON" placeholder="'override default placeholder'" on-editor-created="editorCreated(editor)" on-content-changed="contentChanged(
          editor,
          html,
          text,
          content,
          delta,
          oldDelta,
          source
        )" on-selection-changed="selectionChanged(editor, range, oldRange, source)"></ng-quill-editor>

        <h3>Bubble editor + Text-format</h3>
        <pre><code>{{modelText}}</code></pre>
        <button ng-click="modelText = '';">clear</button>
        <ng-quill-editor format="text" theme="bubble" ng-model="modelText"></ng-quill-editor>

        <h3>Bubble editor + JSONString-format</h3>
        <pre><code>{{modelJSONString}}</code></pre>
        <ng-quill-editor format="json" theme="bubble" ng-model="modelJSONString"></ng-quill-editor>

        <h3>Editor without toolbar + min- and max-length and ngModule</h3>
        <button ng-click="readOnly = !readOnly;">toggle readOnly</button>
        <button ng-click="placeholder = placeholder ? placeholder + '!' : '!'">toggle placeholder</button>
        readonly: {{readOnly}}
        <form name="form">
            <ng-quill-editor ng-model="title" placeholder="placeholder" read-only="readOnly" max-length="5" min-length="2" modules="{toolbar: false}"></ng-quill-editor>
            form invalid?: {{form.$invalid}}
        </form>

        <h3>Editor without toolbar + required and ngModule</h3>
        <button ng-click="required = required ? '' : 'required';">toggle required</button> {{ !!required }}
        <form name="form">
            <ng-quill-editor ng-model="requiredModel" required="{{required}}" modules="{toolbar: false}"></ng-quill-editor>
            form invalid?: {{form.$invalid}}
        </form>

        <h3>Set Styles</h3>
        <button ng-click="backgroundColor = backgroundColor ? '' : 'gray'">toggle Backgroundcolor</button>
        <ng-quill-editor ng-model="title" styles="{backgroundColor: backgroundColor}"></ng-quill-editor>

        <h3>ng-quill - custom toolbar (position: bottom)</h3>
        <ng-quill-editor
            ng-model="title"
            placeholder="''"
            custom-toolbar-position="bottom"
        >
          <ng-quill-toolbar>
              <div id="ng-quill-toolbar">
                  <span class="ql-formats">
                      <button class="ql-bold" ng-attr-title="{{'Bold'}}"></button>
                  </span>
                  <span class="ql-formats">
                      <select class="ql-align" ng-attr-title="{{'Aligment'}}">
                          <option selected></option>
                          <option value="center"></option>
                          <option value="right"></option>
                          <option value="justify"></option>
                      </select>
                      <select class="ql-align">
                          <option selected></option>
                          <option value="center"></option>
                          <option value="right"></option>
                          <option value="justify"></option>
                      </select>
                  </span>
              </div>
          </ng-quill-toolbar>
      </ng-quill-editor>

      <!-- <h3>Custom font sizes</h3>
      <ng-quill-editor ng-model="title" custom-options="customOptions" modules="customModules"></ng-quill-editor> -->
    </body>
</html>