Merge pull request #55 from blocknotes/api/quill-editor-query-functions

API: Quill editor query functions

Author: blocknotes

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.

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)

package.json

@@ -9,5 +9,10 @@
   "files": [
     "app/**/*",
     "index.js"
-  ]
+  ],
+  "devDependencies": {
+    "@eslint/js": "^9.22.0",
+    "eslint": "^9.22.0",
+    "globals": "^16.0.0"
+  }
 }

spec/system/quill_js_spec.rb

@@ -7,4 +7,59 @@
     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: '[email protected]', 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: '[email protected]', 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: '[email protected]', 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