Нажмите, чтобы редактировать

:information_source: Краткое описание При клике в текстовое поле редактора выделяется соответствующая строка в панели предпросмотра, и наоборот.
:hammer_and_wrench: Ссылка на репозиторий https://github.com/thijsbrilleman/discourse-click-to-edit
:open_book: Руководство по установке Как установить плагины в Discourse

click-to-edit - 1080WebShareName-2

Возможности

При клике в текстовое поле редактора выделяется соответствующая строка в панели предпросмотра, и наоборот.

28 лайков

Отличное дополнение к базовому редактору Discourse. Спасибо за создание.

5 лайков

Кажется, это то, что должно быть приветствоваться PR, хотя у меня нет в этом голоса.

6 лайков

Привет :waving_hand: Спасибо, это действительно круто :tada: Я просто думаю, что было бы здорово сделать это в виде компонента темы. :slightly_smiling_face:

7 лайков

На iPad это работает не очень хорошо, потому что при вводе текста выделяется весь текст. Это выглядит очень странно.

3 лайка

Спасибо, и я согласен. Изучу этот вопрос, как только появится время. Вы всегда можете отправить pull request.

В настоящее время это запланированное поведение, но я, конечно, открыт для лучших идей. Какой визуальный сигнал вы бы порекомендовали?

2 лайка

Это будет отображаться как вставленный текст, когда что-то действительно выбрано. Затем последуют действие и ответ.

Любопытно, почему это плагин, а не компонент темы? Все эти токены ведь можно генерировать на стороне клиента, верно?

Кстати, отличная работа. Мне нравится, что вы используете номера строк, которые вставляет движок Markdown.

4 лайка

Спасибо, Сэм.

Как вы, возможно, заметили, атрибуты data-ln присутствуют в готовом HTML, который генерируется и хранится на сервере.

Я реализовал это поведение, чтобы позже мог расширить плагин и обеспечить надежное вставку/редактирование фрагментов со страницы просмотра темы, аналогично кнопке редактирования, показанной ниже (но более надежное):

Прошел год с тех пор, как я это написал, но, насколько я помню, для этого в файле plugin.rb необходима строка

register_asset "vendor/javascripts/markdown-it-line-numbers.js", :vendored_pretty_text

чтобы расширение MarkdownIt также выполнялось на стороне сервера при генерации HTML.

Однако у меня не нашлось времени для реализации расширенной функции редактирования, поэтому, если это требование будет снято, возможно, его можно будет преобразовать в компонент.

5 лайков

@sam Я изучаю возможность превращения этого в компонент темы, но не могу понять, как заставить этот код выполняться в контексте плагина markdownit:

// javascripts/lib/discourse-markdown/initialize_markdownit_plugin.js:

export function setup(helper) {
    helper.registerPlugin(markdownitLineNumbers); // markdownitLineNumbers уже доступен
}

У меня есть подозрение, что строка в плагине, которую я написал ранее, также добавляет некоторую клиентскую магию:

# plugin.rb

register_asset "vendor/javascripts/markdown-it-line-numbers.js", :vendored_pretty_text`

Не могли бы вы подсказать?

Не уверен, пингану команду.

2 лайка

Я полагаю, это связано с тем, что в настоящее время это ограничено только областью действия плагинов. Это работало бы без этой проверки. (Этот код был добавлен в этом коммите)

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/static/markdown-it/features.js#L5

Я хотел интегрировать нумерацию строк для другого компонента, но не хотел создавать плагин, поэтому отказался от этой идеи. Было бы здорово, если бы функции Markdown поддерживались в компонентах тем!

Кстати, отличная функция, которую вы предложили здесь — очень здорово. :+1: :rocket:

4 лайка

Ах да, теперь всё понятно.

Судя по этому коду, возможно вручную внедрить плагин Markdown из компонента темы во время выполнения, но это будет довольно кривое решение. Я подожду решения основной команды, прежде чем пытаться его реализовать.

4 лайка

Наш конвейер Markdown работает как на стороне клиента (для предпросмотра), так и на стороне сервера (для предварительного рендеринга HTML постов). Именно поэтому он спроектирован исключительно для плагинов — только они могут внедрять код на стороне сервера.

Теперь… этот случай довольно необычен, так как расширение требуется только в редакторе, а не на сервере. Поэтому реализация через компонент темы должна быть вполне осуществима.

У вас уже есть какая-то конкретная стратегия для этого?

5 лайков

Похоже, это могло бы заинтересовать многих. В длинном посте бывает сложно найти нужное место. Не стоит ли это пометить как pr-welcome?

5 лайков

Переопределите эту функцию в исходной кодовой базе:

// discourse/app/assets/javascripts/discourse/app/components/d-editor.js
async cachedCookAsync(text, options) {
  this._cachedCookFunction ||= await generateCookFunction(options || {});
  return await this._cachedCookFunction(text);
}

с помощью инициализатора компонента темы:

export default {
  name: "d-editor-cached-cook-async-override",
  initialize() {
    const dEditor = require("discourse/components/d-editor").default;
    dEditor.reopen({
      cachedCookAsync(text, options) {
        // здесь продублируйте код, чтобы вернуть изменённую функцию cook
      },
    });
  },
};

Это означало бы довольно много дублирования кода, если вообще сработает. Грязно, очень грязно.

4 лайка

Хм, да, согласен — определённо не идеально. Дублирование кода может оказаться даже невозможным, потому что модули markdown-it загружаются асинхронно и не входят в систему модулей AMD, к которой темы и плагины имеют прямой доступ. :thinking:

Создание системы, позволяющей темам добавлять клиентские преобразования Markdown, могло бы быть интересным, хотя сценарии использования довольно ограничены. В 99% случаев люди хотят, чтобы преобразования Markdown применялись и на стороне сервера.

Поэтому, на мой взгляд, на данный момент использование плагина, вероятно, является лучшим подходом.

5 лайков

Интересно, стоит ли применять такой вид оформления в любом случае?

Например:

<p data-source-line="0">.....</p>

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

Простая реализация почти не добавляет лишнего веса, но позволяет нам удалить кучу исходного кода.

7 лайков

У нас это уже было в прошлом (за флагом), но затем было удалено в этом коммите. Я нашёл этот скриншот из внутренних обсуждений о данной функции:

Т.е. проблема с производительностью была в коде синхронизации прокрутки, а не в добавлении номеров строк :ok_hand:

Так что у меня нет возражений против внедрения data-source-line в ядро, если только это будет добавлено только в режиме предпросмотра. Это то, чем вы, @pipkin, хотели бы заняться и создать PR?

4 лайка

С радостью! Счастлив иметь возможность что-то вернуть вам, ребята.

6 лайков