새 ProseMirror 편집기에 커스텀 필드가 삽입되지 않습니다

[manut (Manuel Tancoigne)]

Hello!

We have an issue with events custom tags and the new WYSIWYG ProseMirror editor: custom fields filled from the event form are not present in the generated string. It still works as before with the markdown editor.

Steps to reproduce:

1. Enable the Discourse Calendar plugin
2. Add one custom field in plugin configuration
3. Open a form for a new Post
4. Select the ProseMirror editor
5. Create an event with a value for the custom field (Options > Create Event)
6. Validate the event
7. Switch to Markdown editor

What is happening

The custom field is absent from the [event] tag.

What is expected

The custom field should be present in the [event] tag.

Notes

When doing the same but starting with the Markdown editor instead of ProseMirror, the custom field is present in the [event] tag.

[manut (Manuel Tancoigne)]

I investigated a bit what was happening with the toolbarEvent when validating the new event: addText() method seems to receive in both cases the right markup:

[event start="..." status="..." timezone="..." end="..." cf_1="abcd"]\n[/event]

[manut (Manuel Tancoigne)]

If that can help, here is the QUnit test to reproduce the issue:

// plugins/discourse-calendar/test/javascripts/acceptance/post-event-builder-custom-tags-test.js
import { click, find,visit, fillIn } from "@ember/test-helpers";
import { test} from "qunit";
import { acceptance } from "discourse/tests/helpers/qunit-helpers";
import selectKit from "discourse/tests/helpers/select-kit-helper";
import { i18n } from "discourse-i18n";

acceptance("Discourse Calendar - New event form with custom fields", function (needs) {
  needs.user({ admin: true, can_create_discourse_post_event: true });
  needs.settings({
    discourse_local_dates_enabled: true,
    calendar_enabled: true,
    discourse_post_event_enabled: true,
    discourse_post_event_allowed_on_groups: "",
    discourse_post_event_allowed_custom_fields: "my_custom_field",
    coopaname_integration_enabled: false,
  });

  test("filling the form with MD editor fills the custom fields", async function (assert) {
    await ensureEventTagHasFields(assert, 'md');
  });

  test("filling the form with WYSIWYG editor fills the custom fields", async function (assert) {
    await ensureEventTagHasFields(assert, 'wysiwyg');
  });
});

async function ensureEventTagHasFields(assert, editorType){
  await visit("/");
  await click('#create-topic');
  const categoryChooser = selectKit(".category-chooser");
  await categoryChooser.expand();
  await categoryChooser.selectRowByValue(2);

  await switchEditorTo(editorType);

  await click(".toolbar-menu__options-trigger");
  await click(`button[title='${i18n("discourse_post_event.builder_modal.attach")}']`);
  await fillIn('input.custom-field-input', 'some value')
  await click('.d-modal__footer > button');

  await switchEditorTo('md');

  const fields = ['start', 'status', 'timezone', 'myCustomField'];
  const content = await find(".d-editor-input").value;

  fields.forEach((field) => {
    assert.true(content.includes(`${field}="`), `${field} is present in event tag`);
  });
}

async function switchEditorTo(type){
  const editorSwitch = find('button.composer-toggle-switch');
  const isInMarkdown = editorSwitch.attributes['aria-checked'].value === 'false';
  if (isInMarkdown && type === 'wysiwyg' || !isInMarkdown && type === 'md') {
    await click(editorSwitch);
  }
}

[manut (Manuel Tancoigne)]

Of course, remove this line in the test coopaname_integration_enabled: false,

[manut (Manuel Tancoigne)]

같은 기능을 가진 다른 플러그인을 찾지 못해 문제점을 파악하기가 어렵습니다.

폼을 검증할 때 this.args.model.toolbarEvent.addText()에 올바른 텍스트를 전달하고 있습니다.

console.log(TM)를 몇 번 찍어보니 text-manipulation.js#addText()에서 this.convertFromMarkdown(text)가 호출되고 있었습니다. 문제가 여기에서 발생하는 것 같습니다. 어떤 스키마가 강제되고 있는데, 이 스키마에는 사용자 정의 필드가 포함되어 있지 않습니다.

여전히 조사 중입니다 …

[manut (Manuel Tancoigne)]

이 문제는 에디터 확장 프로그램 discourse-calendar/assets/javascripts/discourse/pre-initializers/rich-editor-extension.js에서 비롯됩니다. convertFromMarkdown() 함수에서 사용되는 속성 목록은 EVENT_ATTRIBUTES 상수로 정의되어 있습니다. 이 목록에 사용자 지정 필드를 추가하면 정상적으로 작동합니다.

const EVENT_ATTRIBUTES = {
  // ...
  chatChannelId: { default: null },
  myCustomField: {default: null}
};

해당 파일에는 사용자 지정 필드에 대한 정보가 전혀 없으며, 이 상수에 모든 사용자 지정 필드를 어떻게 추가해야 하는지 모르겠습니다. 이 확장 프로그램은 처리 과정의 초기 단계에서 등록되는 것 같습니다.

새로운 에디터는 비활성화할 수 없어 플러그인이 사용 불가능한 상태이며, 이로 인해 Discourse 3.4에 묶여 있는 상황입니다. 아이디어가 있으시면 알려주시면 감사하겠습니다.

[renato (Renato Atilio)]

맞습니다, 현재 리치 에디터에서는 커스텀 필드를 지원하지 않습니다. 앞으로의 최선의 방향을 조사해 보겠습니다.

@manut

비활성화할 수 없는 새 에디터

비활성화할 수 있습니다. 관리자라면 콘솔을 통해 SiteSettings.rich_editor = false를 설정할 수 있으며, 이러한 경우를 대비해 콘솔은 여전히 최후의 수단으로 사용 가능합니다.

[manut (Manuel Tancoigne)]

답변해 주셔서 감사합니다. 지금은 편집기를 비활성화하겠습니다.