Проблемы с подключением модуля quill-better-table для quill в JavaScriptComponent

Вопросы и проблемы
#1

Здравствуйте
В рамках проекта повсеместно используется JavaScriptComponent с текстовым редактором Quill.
Возникла необходимость использования таблиц в этом редакторе.
Выбор пал на quill-better-table.
Для тестирования был создан html файл (исходный код ниже) который полностью работает.

Спойлер 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Study project</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div>
      <button id="insert-table">Insert Table</button>
    </div>
    <div id="editor" style="height: 300px"></div>

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/quill/2.0.0-dev.3/quill.min.js"
      type="text/javascript"
    ></script>
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/quill/2.0.0-dev.3/quill.snow.min.css"
      rel="stylesheet"
    />
    <link
      href="https://unpkg.com/quill-better-table@1.2.8/dist/quill-better-table.css"
      rel="stylesheet"
    />

    <script
      src="https://unpkg.com/quill-better-table@1.2.10/dist/quill-better-table.min.js"
      type="text/javascript"
    ></script>

    <script>
      var toolbarOptions = [
        [{ header: [2, 3, 4, false] }],
        ["bold"],
        [{ list: "ordered" }, { list: "bullet" }],
        ["link"],

        ["clean"],
      ];

      Quill.register(
        {
          "modules/better-table": quillBetterTable,
        },
        true
      );

      var quill = new Quill("#editor", {
        theme: "snow",
        placeholder: "Compose an epic...",
        formats: ["link", "list", "header", "bold"],
        modules: {
          toolbar: toolbarOptions,
          "better-table": {
            operationMenu: {
              items: {
                unmergeCells: {
                  text: "Another unmerge cells name",
                },
              },
              color: {
                colors: ["green", "red", "yellow", "blue", "white"],
                text: "Background Colors:",
              },
            },
          },
        },
      });

      quill.on("text-change", function (delta, old, source) {
        if (source === "user") {
          // snow.updateContents(delta, "api");
          // updateOutput();
        }
      });

      let tableModule = quill.getModule("better-table");
      document.body.querySelector("#insert-table").onclick = () => {
        tableModule.insertTable(3, 3);
      };
    </script>
  </body>
</html>

При попытке внедрить этот код в проект получаю следующую ошибку

Спойлер

Снимок экрана 2022-12-13 в 19.17.56

В build.gradle была добавлена зависимость

implementation 'org.webjars.npm:quill-better-table:1.2.10'

В блоке dependencies внутри jsComponent пробовал разные варианты ( в том числе взять исходный код модуля и положить его рядом с коннектором )

<dependencies>
    <dependency path="webjar://quill:dist/quill.js"/>
    <dependency path="webjar://quill:dist/quill.snow.css"/>
    <dependency path="webjar://quill-better-table:dist/quill-better-table.min.js"/>
    <dependency path="webjar://quill-better-table:dist/quill-better-table.js"/>
    <dependency path="webjar://quill-better-table:dist/quill-better-table.css"/>
    <dependency path="vaadin://quill/quill-better-table.js"/>
    <dependency path="vaadin://quill/quill-better-table.min.js"/>
    <dependency path="vaadin://quill/quill-connector.js"/>
    <dependency path="vaadin://quill/quill-style.css"/>
</dependencies>

Так же пробовал взять теги link и script из первого примера и добавить их при создании элемента внутри файла коннектора

    var connector = this;
    var element = connector.getElement();
    element.innerHTML = `
        <div>
         <style>
            [contenteditable] {
              -webkit-user-select: text;
              user-select: text;
            }
          .....
          <link ....>
          <script ....>
          .....
          <div id="${connector.getState().data.options.editorId}" style="width: 100%; height: ${connector.getState().data.options.height};"></div>
        </div>
      `;

Ошибка возникает при добавление в конструктор редактора в блок modules следующего кода:

        var quill = new Quill(`#${connector.getState().data.options.editorId}`, {
            theme: "snow",
            formats: formats,
            modules: {
                toolbar: toolbarOptions,
                'better-table': {
                    operationMenu: {
                        items: {
                            unmergeCells: {
                                text: "Another unmerge cells name",
                            },
                        },
                        color: {
                            colors: ["green", "red", "yellow", "blue", "white"],
                            text: "Background Colors:",
                        },
                    },
                }
            },
        });
#3

Добрый день.

Без демо проекта сложно сказать в чем конкретно причина у вас. Поэтому поделюсь некоторыми наблюдениями:

  1. Вы одновременно подключаете и *.min.js и обычный.js файлы (еще и те же зависимости из папки VAADIN)
  2. В element.innerHTML Вы добавляете <style>, <link> и <script>. Эти элементы нельзя добавлять в произвольные места страницы.
  3. Из вашего кода не понятно какая версия quill используется. better-table работает с версией 2.0.0.
  4. Судя по документации better-table, этот модуль нужно зарегистрировать в Quill

У меня получилось заставить работать better-table, прикладываю код снипетты.

Зависимости:

implementation 'org.webjars.npm:quill:2.0.0-dev.4'
implementation 'org.webjars.npm:quill-better-table:1.2.10'

Дескриптор экрана

<layout>
    <vbox spacing="true">
        <jsComponent id="quill"
                     initFunctionName="com_company_demo_QuillTextEditor"
                     stylename="quill-editor"
                     height="200px" width="400px">
            <dependencies>
                <dependency path="webjar://quill:dist/quill.js"/>
                <dependency path="webjar://quill:dist/quill.snow.css"/>
                <dependency path="webjar://quill-better-table:dist/quill-better-table.js"/>
                <dependency path="webjar://quill-better-table:dist/quill-better-table.css"/>
                <dependency path="vaadin://quill/quill-connector.js"/>
            </dependencies>
        </jsComponent>

        <hbox spacing="true">
            <button id="insertTableBtn" caption="Insert Table" icon="TABLE"/>
        </hbox>
    </vbox>
</layout>

Контроллер экрана

@Autowired
private JavaScriptComponent quill;

@Subscribe("insertTableBtn")
public void onInsertTableBtnClick(Button.ClickEvent event) {
    quill.callFunction("insertTable");
}

JS коннектор

com_company_demo_QuillTextEditor = function () {
    let connector =  this;
    let element = connector.getElement();
    element.innerHTML = "<div id=\"editor\"></div>";

    Quill.register({
      'modules/better-table': quillBetterTable
    }, true);

    const quill = new Quill('#editor', {
      theme: 'snow',
      modules: {
        table: false,  // disable table module
        'better-table': {
          operationMenu: {
            items: {
              unmergeCells: {
                text: 'Another unmerge cells name'
              }
            },
            color: {
              colors: ['#fff', 'red', 'rgb(0, 0, 0)'],  // colors in operationMenu
              text: 'Background Colors'  // subtitle
            }
          }
        }
      }
    });

    connector.insertTable = function() {
      let tableModule = quill.getModule('better-table');
      tableModule.insertTable(3, 3);
    }
}

Результат

Screenshot 2022-12-15 at 12.05.34

Глеб

2 симпатии