quill-js-rails-adnan 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: b0612b25ab2b9685353c05213cbef6b27be678456e41f37c0969f232943a3db9
+  data.tar.gz: 69ba25b7eb349ecbbc5d62ab32b027daace6161072269296d26cb74768535057
+SHA512:
+  metadata.gz: 40505b07ed9229098f6de3744bbde58798236ba414a8d1e6e86d22c3c87f480922fd846c07f8e3657c4b769efffa9151525ecdc97fe82f727a0ca010875d15db
+  data.tar.gz: 9510a280959435cc12d80fd5cafe13d9c2fb0f108aa41da6a627ddb55f7734423232f19f5d69bc08155a3d292511eb3f3a51827049e1ca32ae124043fb5fa92a

data/lib/quill-editor.js

@@ -0,0 +1,115 @@
+import { DirectUpload } from "@rails/activestorage"
+import ImageResize from "@taoqf/quill-image-resize-module/image-resize.min";
+import Quill from 'quill/quill';
+export default Quill;
+
+Quill.register('modules/imageResize', ImageResize);
+
+// document.addEventListener("DOMContentLoaded", function (event) {
+//     var quill = new Quill('#editor-container', {
+//         modules: {
+//             toolbar: [
+//                 [{ header: [1, 2, false] }],
+//                 ['bold', 'italic', 'underline'],
+//                 ['image', 'code-block']
+//             ]
+//         },
+//         placeholder: 'Compose an epic...',
+//         theme: 'snow'
+//     });
+//
+//     document.querySelector('form').onsubmit = function () {
+//         var body = document.querySelector('input[class=article-content]');
+//         body.value = quill.root.innerHTML
+//     };
+// });
+
+document.addEventListener("DOMContentLoaded", function (event) {
+    var quill = new Quill('#editor-container', {
+        modules: {
+            toolbar: [
+                [{ header: [1, 2, 3, 4, 5, 6, false] }],
+                [{ color: [] }],
+                [{ size: [] }],
+                [
+                    'bold', 'italic', 'underline', 'strike',
+                    { 'script': 'super'},
+                    { 'script': 'sub' },
+                    'code', 'link'
+                ],
+                ['blockquote', 'code-block', 'image'],
+                [{ list: 'ordered' }, { list: 'bullet' }],
+                [{ align: ['center', 'right', 'justify', false] }],
+                [{ indent: '-1'}, { indent: '+1' }]
+
+
+            ],
+            imageResize: {
+                displaySize: true,
+                displayStyles: {
+                    backgroundColor: 'black',
+                    border: 'none',
+                    color: 'white'
+                },
+                modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
+            }
+        },
+        value: document.querySelector('input[class=article-content]').value,
+        theme: 'snow'
+    });
+
+    document.querySelector('form').onsubmit = function () {
+        var body = document.querySelector('input[class=article-content]');
+        body.value = quill.root.innerHTML
+    };
+
+    // More on this in a bit!
+    quill.getModule('toolbar').addHandler('image', () => {
+        importImage(quill);
+    });
+});
+
+var importImage = function (textEditor) {
+    const input = document.createElement('input');
+    input.setAttribute('type', 'file');
+    input.click();
+
+    input.onchange = () => {
+        const file = input.files[0];
+
+        // Ensure only images are uploaded
+        if (/^image\//.test(file.type)) {
+            uploadImage(textEditor, file);
+        } else {
+            alert('Only images allowed');
+        }
+    };
+};
+
+var uploadImage = function (textEditor, file) {
+    var fd = new FormData();
+    fd.append('blob', file);
+
+    var upload = new DirectUpload(file, '/rails/active_storage/direct_uploads')
+    upload.create((error, blob) => {
+        if (error) {
+            console.log(error)
+        } else {
+            insertImage(
+                textEditor,
+                `/rails/active_storage/blobs/${blob.signed_id}/${blob.filename}`
+            );
+        }
+    });
+};
+
+var insertImage = function (textEditor, fileUrl) {
+    const range = textEditor.getSelection();
+    textEditor.insertEmbed(range.index, 'image', fileUrl);
+};
+
+var icons = Quill.import('ui/icons');
+
+icons['code'] = `<svg class="bi bi-code" width="1.5em" height="1.5em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M5.854 4.146a.5.5 0 010 .708L2.707 8l3.147 3.146a.5.5 0 01-.708.708l-3.5-3.5a.5.5 0 010-.708l3.5-3.5a.5.5 0 01.708 0zm4.292 0a.5.5 0 000 .708L13.293 8l-3.147 3.146a.5.5 0 00.708.708l3.5-3.5a.5.5 0 000-.708l-3.5-3.5a.5.5 0 00-.708 0z" clip-rule="evenodd"/>
+</svg>`;

metadata

@@ -0,0 +1,46 @@
+--- !ruby/object:Gem::Specification
+name: quill-js-rails-adnan
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- Adnan Mustafa
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2021-09-07 00:00:00.000000000 Z
+dependencies: []
+description: Quill is a free, open source WYSIWYG editor built for the modern web.
+  With its modular architecture and expressive API, it is completely customizable
+  to fit any need.
+email: mirzaadnanmustafa@yahoo.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- lib/quill-editor.js
+homepage: https://rubygems.org/gems/quill-js-rails-adnan
+licenses: []
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.0.6
+signing_key: 
+specification_version: 4
+summary: Quill is a free, open source WYSIWYG editor built for the modern web. With
+  its modular architecture and expressive API, it is completely customizable to fit
+  any need.
+test_files: []