Merge pull request #34 from Simple2B/svyat/fix/quill-js

Svyat/fix/quill js

app/static/js/quillValueToInput.d.ts

@@ -0,0 +1 @@
+export declare function initQuillValueToInput(): void;

app/templates/book/add_section_modal.html

@@ -12,7 +12,7 @@
       method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
       {{ form_hidden_tag() }}
       <input type="hidden" name="collection_id" id="collection_id" value="{{sub_collection.id if sub_collection else collection.id}}" />
-      <input type="hidden" name="about" id="about" />
+      <input type="hidden" name="about" id="new-section-input" />
       <!-- Modal header -->
       <div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
         <h3 class="text-xl font-semibold text-gray-900 dark:text-white"> Add Section </h3>
@@ -30,7 +30,7 @@
       <div class="p-6 pt-0 space-y-6">
         <div class="w-full max-w-6xl mx-auto rounded-xl bg-gray-50 dark:bg-gray-600 shadow-lg text-white-900">
           <div class="overflow-hidden rounded-md bg-gray-50 [&>*]:dark:bg-gray-600 text-black [&>*]:!border-none [&>*]:!stroke-black dark:text-white dark:[&>*]:!stroke-white">
-            <div id="editor" class="dark:text-white h-80"></div>
+            <div id="new-section" class="quill-editor dark:text-white h-80"></div>
           </div>
         </div>
       </div>

app/templates/book/edit_interpretation_modal.html

@@ -11,7 +11,7 @@
       method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
       {{ form_hidden_tag() }}
       <input type="hidden" name="interpretation_id" id="interpretation_id" value="{{interpretation.id}}" />
-      <input type="hidden" name="text" id="about" value={{interpretation.text}} />
+      <input type="hidden" name="text" id="interpretation-text-input" value={{interpretation.text}} />
 
       <!-- Modal header -->
       <div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
@@ -30,7 +30,7 @@
       <div class="p-6 pt-0 space-y-6">
         <div class="w-full max-w-6xl mx-auto rounded-xl bg-gray-50 dark:bg-gray-600 shadow-lg text-white-900">
           <div class="overflow-hidden rounded-md bg-gray-50 [&>*]:dark:bg-gray-600 text-black [&>*]:!border-none [&>*]:!stroke-black dark:text-white dark:[&>*]:!stroke-white">
-            <div id="editor" class="dark:text-white h-80">
+            <div id="interpretation-text" class="quill-editor dark:text-white h-80">
               {{ interpretation.text|safe }}
             </div>
           </div>

app/templates/book/edit_section_modal.html

@@ -11,7 +11,7 @@
       method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
       {{ form_hidden_tag() }}
       <input type="hidden" name="section_id" id="section_id" value="{{section.id}}" />
-      <input type="hidden" name="about" id="about" />
+      <input type="hidden" name="about" id="new-section-about-input" />
 
       <!-- Modal header -->
       <div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
@@ -30,7 +30,7 @@
       <div class="p-6 pt-0 space-y-6">
         <div class="w-full max-w-6xl mx-auto rounded-xl bg-gray-50 dark:bg-gray-600 shadow-lg text-white-900">
           <div class="overflow-hidden rounded-md bg-gray-50 [&>*]:dark:bg-gray-600 text-black [&>*]:!border-none [&>*]:!stroke-black dark:text-white dark:[&>*]:!stroke-white">
-            <div id="editor" class="dark:text-white h-80">
+            <div id="new-section-about" class="quill-editor dark:text-white h-80">
               {{ section.about|safe }}
             </div>
           </div>

app/templates/book/interpretation_view.html

@@ -48,7 +48,7 @@
           <!-- prettier-ignore -->
           <dt class="flex w-full mb-1 text-gray-500 md:text-lg dark:text-gray-400 flex-col">
             <div class="ql-snow">
-              <div class="ql-interpretation-editor ql-editor">
+              <div class="ql-editor">
                 {{ section.about|safe }}
               </div>
             </div>
@@ -74,7 +74,7 @@
       <input type="hidden" name="section_id" id="section_id" value="{{section.id}}" />
       <input type="hidden" name="label" id="label" value="{{section.label}}" />
 
-      <input type="hidden" name="text" id="interpretation-text" />
+      <input type="hidden" name="text" id="interpretation-text-input" />
       <!-- Form body -->
       <div class="p-6 space-y-6">
         <div class="grid gap-6">
@@ -86,7 +86,7 @@
       <div class="p-6 pt-0 space-y-6">
         <div class="w-full max-w-6xl mx-auto rounded-xl bg-gray-50 dark:bg-gray-600 shadow-lg text-white-900">
           <div class="overflow-hidden rounded-md bg-gray-50 [&>*]:dark:bg-gray-600 text-black [&>*]:!border-none [&>*]:!stroke-black dark:text-white dark:[&>*]:!stroke-white">
-            <div id="interpretation-editor" class="dark:text-white h-64"></div>
+            <div id="interpretation-text" class="quill-editor dark:text-white h-64"></div>
           </div>
         </div>
       </div>

src/initQuill.ts

@@ -8,24 +8,21 @@ export function initQuill() {
     [{indent: '-1'}, {indent: '+1'}],
     ['clean'],
   ];
-  const editorElement = document.querySelector('#editor');
-  if (editorElement) {
-    var quill = new Quill('#editor', {
+  const qlEditors: NodeListOf<HTMLElement> =
+    document.querySelectorAll('.quill-editor');
+  qlEditors.forEach(el => {
+    const quillElementId = el.id;
+    if (!quillElementId) {
+      console.error(
+        'Please set attribute id to element with class .quill-editor',
+      );
+      return;
+    }
+    new Quill('#' + quillElementId, {
       theme: 'snow',
       modules: {
         toolbar: toolbarOptions,
       },
     });
-  }
-  const interpretationEditorElement = document.querySelector(
-    '#interpretation-editor',
-  );
-  if (interpretationEditorElement) {
-    var quill = new Quill('#interpretation-editor', {
-      theme: 'snow',
-      modules: {
-        toolbar: toolbarOptions,
-      },
-    });
-  }
+  });
 }

src/main.ts

@@ -3,12 +3,12 @@ import {initBooks} from './books';
 import {initContributors} from './contributors';
 import {initWallet} from './wallet';
 import {initQuill} from './initQuill';
-import {initQuillValueToTextArea} from './quill_value_to_textarea';
+import {initQuillValueToInput} from './quillValueToInput';
 
 document.addEventListener('DOMContentLoaded', () => {
   initBooks();
   initContributors();
   initQuill();
-  initQuillValueToTextArea();
+  initQuillValueToInput();
   initWallet();
 });

src/quillValueToInput.ts

@@ -0,0 +1,29 @@
+const quillValueToInput = (quillElementId: string): undefined => {
+  const inputElement: HTMLInputElement = document.querySelector(
+    `#${quillElementId}-input`,
+  );
+  if (!inputElement) {
+    return;
+  }
+  const qlEditor: HTMLElement = document.querySelector('#' + quillElementId);
+  const editorContent = qlEditor.innerHTML;
+  inputElement.value = editorContent;
+  return undefined;
+};
+
+export function initQuillValueToInput() {
+  const qlEditors: NodeListOf<HTMLElement> =
+    document.querySelectorAll('.quill-editor');
+  qlEditors.forEach(el => {
+    const quillElementId = el.id;
+    if (!quillElementId) {
+      console.error(
+        'Please set attribute id to element with class .quill-editor',
+      );
+      return;
+    }
+    el.addEventListener('DOMSubtreeModified', () => {
+      quillValueToInput(quillElementId);
+    });
+  });
+}

src/quill_value_to_textarea.ts

@@ -1,40 +0,0 @@
-const quill_value_to_textarea = (): undefined => {
-  const aboutInput: HTMLInputElement = document.querySelector('#about');
-  const qlEditor: HTMLElement = document.querySelector('.ql-editor');
-  const editorContent = qlEditor.innerHTML;
-  aboutInput.value = editorContent;
-  return undefined;
-};
-const quill_interpretation_to_textarea = (): undefined => {
-  const interpretationTextInput: HTMLInputElement = document.querySelector(
-    '#interpretation-text',
-  );
-  const qlInterpretationEditor: HTMLElement = document.querySelector(
-    '#interpretation-editor',
-  );
-  const editorContent = qlInterpretationEditor.innerHTML;
-  console.log('editorContent', editorContent);
-  interpretationTextInput.value = editorContent;
-  return undefined;
-};
-
-export function initQuillValueToTextArea() {
-  const qlEditor: HTMLElement = document.querySelector('.ql-editor');
-
-  if (qlEditor) {
-    qlEditor.addEventListener('DOMSubtreeModified', () => {
-      quill_value_to_textarea();
-    });
-  }
-
-  //
-  const qlInterpretationEditor: HTMLElement = document.querySelector(
-    '#interpretation-editor',
-  );
-
-  if (qlInterpretationEditor) {
-    qlInterpretationEditor.addEventListener('DOMSubtreeModified', () => {
-      quill_interpretation_to_textarea();
-    });
-  }
-}