Поддержка HTML в модальном диалоге

Здравствуйте,

На странице категории, когда пользователь не может создать тему, я использую баннер с текстом и ссылкой на тему об уровнях доверия.
Screenshot 2022-12-09 at 9.09.29

HTML-код в баннере отображается корректно.

Однако при клике на + New Topic модальное окно не обрабатывает HTML-теги.

Было бы здорово, если бы модальное окно также поддерживало HTML, как это делал ранее используемый модальный компонент Bootbox.

Спасибо :slightly_smiling_face:

3 лайка

@pmusaraj предоставил решение, поддерживающее HTML-контент здесь.

4 лайка

Привет, Тим,

Спасибо за подсказку :slightly_smiling_face: Я изменил это через modifyClass, но считаю, что было бы разумно сделать этот диалог htmlSafe в ядре, поскольку баннер категории также обрабатывает HTML.

import { htmlSafe } from "@ember/template";

export default {
  name: "dialog-html-support",

  initialize() {
    withPluginApi("0.8.7", (api) => {
      api.modifyClass("component:d-navigation", {
        pluginId: "dialog-html-support",
        
        actions: {
          clickCreateTopicButton() {
            if (this.categoryReadOnlyBanner && !this.hasDraft) {
              this.dialog.alert({
                message: htmlSafe(this.categoryReadOnlyBanner),
              });
            } else {
              this.createTopic();
            }
          },
        },
      });
    });
  },
};
3 лайка

Привет, команда!

По поводу настройки ниже я хотел бы запросить возможность использовать ссылку. В моём случае категорию может просматривать любой, однако для создания и ответа на темы необходимо состоять в группе.

"Текст баннера, когда пользователь не может создать тему в этой категории: "

Поэтому я пытался использовать текст вроде:

Чтобы участвовать, нужно «Подать заявку в группу».

К сожалению, эта настройка поддерживает только обычный текст без ссылок. Не могли бы вы рассмотреть возможность её изменения?

2 лайка

Я перенёс ваш пост в эту тему, чтобы собрать все запросы на это изменение в одном месте. :+1:

2 лайка

Спасибо, Jammydodger!

Иногда бывает сложно понять, где лучше разместить сообщение. Discourse — огромная платформа, и это не обязательно плохо; однако это может иногда пугать тех из нас, кто ещё относительно новичок.

Но именно здесь ваша замечательная команда и сообщество чаще всего оказываются незаменимыми в оказании помощи всем!

2 лайка

Привет, Дон и @TimJensen, решит ли это решение проблему с разметкой Markdown, как в моём примере ниже? Использовать нужно:

Чтобы принять участие в категории, вам нужно [Подать заявку](/g/groupname/members).

Также, полагаю, потребуется создать компонент темы. В какой раздел мне это нужно добавить?


РЕДАКТ:
Хм… сейчас добавление JS-файла может быть немного выше моего текущего уровня навыков. :sad_but_relieved_face: Мне понадобится немного руководства, чтобы успешно это сделать.

1 лайк

Привет, Дэн,

Баннер поддерживает HTML. Эта тема касается диалогового окна, которое появляется при нажатии кнопки «Создать тему».

Нет, поддерживается только HTML. Ваш пример будет выглядеть примерно так :arrow_down_small:

Чтобы участвовать в категории, необходимо <a href="/g/groupname/members">подать заявку</a>.

Это должно работать в Header для поддержки HTML в диалоге. :slightly_smiling_face:

<script type="text/discourse-plugin" version="0.8">
  const { htmlSafe } = require("@ember/template");

  api.modifyClass("component:d-navigation", {
    pluginId: "dialog-html-support",
        
    actions: {
      clickCreateTopicButton() {
        if (this.categoryReadOnlyBanner && !this.hasDraft) {
          this.dialog.alert({
            message: htmlSafe(this.categoryReadOnlyBanner),
          });
        } else {
          this.createTopic();
        }
      },
    },
  });
</script>
3 лайка

Круто, значит, всё, что мне нужно сделать, — это использовать HTML вместо Markdown.

Так что баннер будет работать, если кто-то попытается ответить и/или создать новую тему в категории? Если я правильно понимаю, ваш запрос касается кнопки «Новая тема» и компонента темы?

С вашим JS вы просто создадите новый компонент темы и загрузите файл *.js? Нужно ли что-то ещё в CSS и других частях? Или это сработает сразу?

А если я хочу диалог перед кнопкой ссылки, что мне нужно сделать с точки зрения кода? Извините, я всё ещё учусь.

1 лайк

Просто создайте новый компонент в админ-панели и вставьте код выше в раздел Общие > Заголовок. Это позволит обрабатывать HTML в модальном окне при нажатии кнопки «Новая тема». :slightly_smiling_face:

Демонстрация

Без кода
Как видите, баннер поддерживает HTML, но при нажатии кнопки «Новая тема» модальное окно (диалог) его не поддерживает.

Запись экрана 2023-01-24 в 12.16.13|видео


С кодом
Запись экрана 2023-01-24 в 12.17.10|видео


Не совсем понял, что вы имеете в виду под :arrow_down_small:

2 лайка

Спасибо за объяснение, куда нужно добавить код для исправления HTML.

На самом деле ваше первое видео идеально отвечает на мой вопрос и проясняет всё. Текст диалога перед кнопкой ссылки такой же, как и в процедуре Markdown. (В первом видео это показано, когда всё не работает без вставленного кода). Я тоже пропустил это в вашем примере кода :facepalm:

Например:

Чтобы принять участие “markdown”
Чтобы принять участие “html”

Огромное спасибо за помощь и просвещение.

Дэн

2 лайка

Приносим извинения за задержку, друзья, это должно всё исправить: FIX: Allow HTML in category read-only dialog by pmusaraj · Pull Request #20349 · discourse/discourse · GitHub

4 лайка

Эта тема была автоматически закрыта через 2 дня. Новые ответы больше не допускаются.