Краткое описание проблемы
Я разрабатываю плагин для Discourse, который добавляет кнопку на панель инструментов для открытия модального окна с формой. Я шаг за шагом следовал официальной документации по миграции API DModal, но все еще получаю ошибки импорта модулей и предупреждение «модальное окно требует обновления». Нужна помощь в том, что я упускаю.
Краткое примечание: Я не умею программировать, этот плагин был создан полностью с помощью ИИ.
Текущие ошибки
Ошибка 1 — Импорт модуля:
Uncaught (in promise) Error: Could not find module `discourse/components/modal/lottery-form-modal` imported from `discourse/plugins/discourse-lottery-v3/discourse/initializers/lottery-toolbar`
Ошибка 2 — Предупреждение о легаси-модальном окне:
Error: the 'lottery-form' modal needs updating to work with the latest version of Discourse. See https://meta.discourse.org/t/268057.
Ошибка 3 — Уведомление об устаревании:
Deprecation notice: Defining modals using a controller is no longer supported. Use the component-based API instead. (modal: lottery-form) [deprecated since Discourse 3.1] [removal in Discourse 3.2]
Официальная документация, которой я следовал
Я внимательно изучил и реализовал решения на основе следующих официальных ресурсов:
-
Преобразование модальных окон из легаси-контроллеров в новый компонентный API DModal
- URL:
https://meta.discourse.org/t/268057 - Выполнены все 4 шага: файлы перемещены в
/components/modal/, JS обновлен с расширением Component, шаблон обновлен для использования<DModal>, вызовы show обновлены для использованияmodal.show()
- URL:
-
Использование API DModal для рендеринга модальных окон
- URL:
https://meta.discourse.org/t/268304 - Реализовано DModal с правильными
@closeModal,@titleи именованными блоками
- URL:
-
API плагинов ядра Discourse
- Источник:
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.gjs - Использованы
api.onToolbarCreate()и внедрение сервиса модальных окон
- Источник:
-
Документация разработчика Discourse — Преобразование модальных окон
- URL:
https://github.com/discourse/discourse-developer-docs/blob/main/docs/03-code-internals/10-converting-modals.md - Сверены шаги миграции
- URL:
Что я пытаюсь сделать
- Добавить кнопку на панель инструментов в редакторе
- При нажатии на кнопку открывается модальное окно с формой
- Пользователь заполняет форму и нажимает «Отправить»
- Модальное окно закрывается, а содержимое вставляется в редактор
Что я пробовал
Подход 1: Динамический импорт + сервис модальных окон (текущий)
- Получаю ошибку импорта модуля
Подход 2: showModal() с контроллером
- Получаю предупреждения об устаревании легаси-контроллеров
Подход 3: Статический импорт
- Также пробовал статический импорт, но те же проблемы с разрешением модулей
Структура файлов:
discourse-lottery-v3/
├── plugin.rb
└── assets/javascripts/discourse/
├── initializers/
│ └── lottery-toolbar.js
└── components/modal/
├── lottery-form-modal.js
└── lottery-form-modal.hbs
Код кнопки на панели инструментов:
// assets/javascripts/discourse/initializers/lottery-toolbar.js
import { withPluginApi } from "discourse/lib/plugin-api";
export default {
name: "lottery-toolbar",
initialize() {
withPluginApi("1.0.0", (api) => {
api.onToolbarCreate((toolbar) => {
toolbar.addButton({
id: "lottery-insert",
group: "extras",
icon: "dice",
title: "Insert Lottery",
perform: () => {
const modal = api.container.lookup("service:modal");
// Эта строка вызывает ошибку импорта:
import("discourse/components/modal/lottery-form-modal").then((module) => {
const LotteryFormModal = module.default;
modal.show(LotteryFormModal, { model: {} });
});
}
});
});
});
}
};
Компонент модального окна:
// assets/javascripts/discourse/components/modal/lottery-form-modal.js
import Component from "@ember/component";
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";
export default class LotteryFormModal extends Component {
@tracked inputValue = "";
@action
submit() {
// Обработка отправки формы
this.args.closeModal();
}
}
Шаблон модального окна:
{{! assets/javascripts/discourse/components/modal/lottery-form-modal.hbs }}
<DModal @title="My Modal" @closeModal={{this.args.closeModal}} class="my-modal">
<:body>
<input value={{this.inputValue}} />
</:body>
<:footer>
<button {{on "click" this.submit}}>Submit</button>
</:footer>
</DModal>
Вопросы
Исходя из всего предоставленного кода, ошибок и фоновой информации, как мне следует изменить свой код для правильной реализации функции?
Любые рекомендации по правильному подходу к реализации будут очень кстати.