Быстрый хайлайт

Разработка
48

Да, @satonotdead, я думаю, что эта тема немного ушла в сторону… Возможно, её стоит сократить, оставив только предложение добавить кнопку подсветки в всплывающее окно редактирования/цитирования.

Поэтому я создал компонент темы Highlighter Composer Button для очень конкретной и ограниченной цели: нажатие кнопки в панели инструментов редактора для вставки <mark>этот</mark>, а также добавил сочетание клавиш Ctrl-H для удобства.

Существуют ещё два других компонента кнопок редактора, которые позволяют вставлять код на лету для добавления фона и цвета текста. Однако эти два варианта были для меня менее удобны по двум причинам:

  1. Они требуют ручного ввода цветов в вставляемый код, чтобы работать.

  2. Они не всегда корректно взаимодействуют с другими элементами, которые я использую в своих сообщениях, например, с прокручиваемыми блоками контента:

discourse-highlighter-vs-colour-vs-bolor-bg
discourse-highlighter-vs-colour-vs-bolor-bg3072×1465 297 KB

49

Хочешь немного раскрыть, как ты сделал эти прокручиваемые блоки :face_with_peeking_eye:

50

Конечно, @Jagster, это компонент темы…

Я стилизую блоки следующим образом…

/* Тень для прокручиваемого блока контента */

.scrollable-content {
    border-left: none !important;
    background-color: var(--secondary) !important;
    padding: 1em 0.5em 1em 1em !important;
    box-shadow: 0 1.36px 8.896px #c4b59d, 0 0 1px !important;
    border-radius: 4px !important;
    margin: 0 8.896px !important;
}

.scrollable-content-inner {
    padding-right: 15px !important;
}

.scrollable-content-inner h1,
.scrollable-content-inner h2,
.scrollable-content-inner h3,
.scrollable-content-inner h4,
.scrollable-content-inner h5,
.scrollable-content-inner h6 {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
}
51

К сожалению, я не смогу использовать это на Meta… :stuck_out_tongue:

52

@satonotdead извините за это! Я начал здесь обдумывать способы улучшения композера, что, кстати, тоже нахожу полезным. Лично я не убеждён в идее из оригинального поста добавить опцию выделения рядом с цитированием и быстрым редактированием при выборе текста в читаемом посте. На мой взгляд, эту функцию логичнее разместить в композере.

Здесь также есть общие предложения о различных способах форматирования текста с помощью Markdown, включая различные компоненты тем, созданные за эти годы.

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

Discourse Shared Edits мог бы использовать что-то подобное, чтобы при совместном редактировании было понятно, кто какой текст внёс. Но, думаю, ценность этого ограничена, и это тоже может привести к хаосу.

Отлично! Я установил это на своём личном сайте, и всё работает хорошо. Хорошая работа!

53

Точно, @tobiaseigen! Мы используем маркеры когда читаем, чтобы быстро выделить части текста.

Я представляю это так: я использую функцию быстрого редактирования, где в мини-окне редактирования могу ввести теги вокруг выделенного текста, который хочу изменить…

<mark>какой-то текст</mark>

Как вы думаете, сработает ли, если я сделаю копию компонента темы “Highlighter” и изменю код в файле api-setup.js, чтобы разместить кнопку маркера (или нажать H) в PluginOutlet

quote-button-after

Код api-setup.js 
import { apiInitializer } from "discourse/lib/api";
import loadScript from "discourse/lib/load-script";
import I18n from "I18n";

async function applyHighlight(element) {
  const highlights = element.querySelectorAll("mark");
  if (!highlights.length) {
    return;
  }
}

export default apiInitializer("0.11.1", (api) => {
  const { iconNode } = require("discourse-common/lib/icon-library");
  let icon = iconNode("highlighter");
  const currentLocale = I18n.currentLocale();
  // I18n.translations[currentLocale].js.highlight_button_title = I18n.t(themePrefix("composer_highlight_button_title"));
  // I18n.translations[currentLocale].js.composer.highlight_button_text = I18n.t(themePrefix("composer_highlight_button_text"));
  I18n.translations[currentLocale].js.highlight_button_title = "Выделить текст";
  I18n.translations[currentLocale].js.composer.this = "это";
  // I18n.translations[currentLocale].js.composer.highlight_button_text = "Выделить текст";

  api.modifyClass("controller:composer", {
    pluginId: "highlight",
    actions: {
      highlightButton() {
        this.get("toolbarEvent").applySurround("\n" + `<mark>` + "\n</mark>\n");
      },
    },
  });

  // добавить кнопку на панель инструментов
  api.onToolbarCreate((toolbar) => {
    toolbar.addButton({
      id: "composer_highlight_button",
      group: "extras",
      icon: "highlighter",
      shortcut: "H",
      preventFocus: true,
      trimLeading: true,
      title: "highlight_button_title",
      // perform: e => e.applySurround('<span>[wrap=highlight]', '[/wrap]</span>', 'this')
      perform: (e) => e.applySurround("<mark>", "</mark>", "this"),
    });
  });

  api.decorateCookedElement(
    async (elem, helper) => {
      const id = helper ? `post_${helper.getModel().id}` : "composer";
      applyHighlight(elem, id);
    },
    { id: "wrap-mark" }
  );
});

Или это пустая трата времени!?"}

54

Понятно. Я понимаю, чего вы хотите добиться.

Если вы сможете реализовать это в компоненте темы, то пожалуйста, действуйте. Я не программист, поэтому не знаю, как именно это сделать.

55

И вставка, и удаление

И <ins>вставка</ins>, и <del>удаление</del>

Теперь я также должен включить их в компоненты темы кнопок Composer (просто потому, что, как говорит @Lilly, — «гаджеты — это круто!»

Эй! HTML Formatting Tags

56

Для меня это может быть формой более точной закладки.

Интересно, можно ли расширить систему закладок, чтобы она запоминала выделенные фрагменты текста?

57

Очень интересная мысль…