diff --git a/README.md b/README.md index b58ccb9..9f54444 100644 --- a/README.md +++ b/README.md @@ -105,6 +105,14 @@ Consider that this is just a basic example: images are uploaded as soon as they the *upload_admin_post_path*) and it doesn't provide a way to remove images (just deleting them from the editor will not destroy them, you'll need to implement a purge logic for that). +## Javascript API + +Some methods are provided for advanced use cases: + +- `window.getQuillEditors()`: returns all the available Quill editors instances; +- `window.getQuillEditorByIndex(n)`: returns the N-th Quill editor instance; +- `window.getQuillEditorByElementId(id)`: returns the Quill editor instance related to the specified element id (e.g. _article_description_). + ## Development Project created by [Mattia Roccoberton](http://blocknot.es), thanks also to the good guys that opened issues and pull requests from time to time. diff --git a/app/assets/javascripts/activeadmin/quill_editor_input.js b/app/assets/javascripts/activeadmin/quill_editor_input.js index fdafdc9..db89dee 100644 --- a/app/assets/javascripts/activeadmin/quill_editor_input.js +++ b/app/assets/javascripts/activeadmin/quill_editor_input.js @@ -1,3 +1,4 @@ +/* eslint-disable no-undef */ (function () { 'use strict' @@ -87,6 +88,27 @@ } } + // --- public functions -------------------------------------------------------- + window.getQuillEditors = function() { + const editors = document.querySelectorAll('[data-aa-quill-editor]') + let list = [] + + editors.forEach(function(editor) { list.push(editor['_quill-editor']) }) + return list + } + + window.getQuillEditorByIndex = function(index) { + const editors = document.querySelectorAll('[data-aa-quill-editor]') + + return (index >= 0 && index < editors.length) ? editors[index]['_quill-editor'] : null + } + + window.getQuillEditorByElementId = function(id) { + const editor = document.querySelector(`[data-aa-quill-editor]#${id}`) + + return editor ? editor['_quill-editor'] : null + } + // --- events ------------------------------------------------------------------ $(document).ready(initQuillEditors) $(document).on('has_many_add:after', '.has_many_container', initQuillEditors) diff --git a/package.json b/package.json index 5bafb59..12877b3 100644 --- a/package.json +++ b/package.json @@ -9,5 +9,10 @@ "files": [ "app/**/*", "index.js" - ] + ], + "devDependencies": { + "@eslint/js": "^9.22.0", + "eslint": "^9.22.0", + "globals": "^16.0.0" + } } diff --git a/spec/system/quill_js_spec.rb b/spec/system/quill_js_spec.rb index 2ee79c2..ee2e650 100644 --- a/spec/system/quill_js_spec.rb +++ b/spec/system/quill_js_spec.rb @@ -7,4 +7,59 @@ RSpec.describe 'Quill JS' do expect(page.evaluate_script('typeof Quill')).to eq 'function' expect(page.evaluate_script('Quill.version')).to eq(ActiveAdmin::QuillEditor::QUILL_VERSION) end + + describe '.getQuillEditors' do + let(:author) { Author.create!(email: 'some_email@example.com', name: 'John Doe', age: 30) } + let!(:post) { Post.create!(title: 'Test', author: author, description: '') } + + before do + path = edit_admin_post_path(post) + Admin::Posts::EditPage.new(path: path).load + end + + it "returns the available editors", :aggregate_failures do + editors_count = page.evaluate_script('window.getQuillEditors().length') + expect(editors_count).to eq 2 + + expected_element = find('#post_summary > .ql-container') + first_editor = page.evaluate_script('window.getQuillEditors()[0].container') + expect(first_editor).to eq expected_element + + expected_element = find('#post_description > .ql-container') + first_editor = page.evaluate_script('window.getQuillEditors()[1].container') + expect(first_editor).to eq expected_element + end + end + + describe '.getQuillEditorByIndex' do + let(:author) { Author.create!(email: 'some_email@example.com', name: 'John Doe', age: 30) } + let!(:post) { Post.create!(title: 'Test', author: author, description: '') } + + before do + path = edit_admin_post_path(post) + Admin::Posts::EditPage.new(path: path).load + end + + it "returns the expected editor instance" do + expected_element = find('#post_description > .ql-container') + editor = page.evaluate_script('window.getQuillEditorByIndex(1).container') + expect(editor).to eq expected_element + end + end + + describe '.getQuillEditorByElementId' do + let(:author) { Author.create!(email: 'some_email@example.com', name: 'John Doe', age: 30) } + let!(:post) { Post.create!(title: 'Test', author: author, description: '') } + + before do + path = edit_admin_post_path(post) + Admin::Posts::EditPage.new(path: path).load + end + + it "returns the expected editor instance" do + expected_element = find('#post_description > .ql-container') + editor = page.evaluate_script('window.getQuillEditorByElementId("post_description").container') + expect(editor).to eq expected_element + end + end end