MD Composer extras

Я сделал так, как вы посоветовали, и скрыл ненужные элементы следующим образом:

// Скрывает ненужные кнопки из расширений редактора Markdown (TC)
.d-editor-button-bar {
    .superscript_button,.subscript_button, .align_center_button,.align_right_button, .align_justify_button {
        display: none;
    }
}

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

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

1 лайк

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

Закрытие через /sub вместо /sup

2 лайка

Просто мысль: можно сделать универсальное решение, использующее переключатели настроек в расширенной версии.

Например, переключатель для плагина bbcode, при этом оба варианта могли бы иметь опции для скрытия кнопок или добавления кнопок на панель. То же самое, если администраторы хотят исключить опции в выпадающем меню :gear:.

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

Например, главное выпадающее меню с иконкой :gear: и выбором цвета.

:gear: .
Вставить опрос
Вставить таблицу
Цвет текста. > Красный
Зеленый
Синий
Оранжевый

Можно также сгруппировать другие опции форматирования в выпадающем меню и/или на панели инструментов, чтобы иметь меню для выбора опции форматирования.

1 лайк

Спасибо, я исправил эту проблему.

2 лайка

Вам очень приятно, и огромное спасибо за быстрый ответ и решение! :vulcan_salute::smiling_face_with_sunglasses::handshake:

Я бы порекомендовал обновить ваш пост-оператора, включив туда инструкцию по установке из опциональной ветки. Я нашел ваши альтернативные ветки «color» и «simple».

В ветке color я внес небольшое изменение в bbcode_color:

в «Desktop\Head» — строка 65 и в «*€Mobile\Head**» — строка 96

“[color=##233]” на “[color=name]”. Я также планирую создать руководство для своего сайта WiP о том, как менять name на colorname.

Шестнадцатеричное значение отличается от того, что было у вас. Просто укажите его как справочную информацию о том, каким оно было.

Я пока новичок в этом и мне нужно будет создать аккаунт на GitHub и научиться делать pull requests.

Большое спасибо за этот простой и функциональный компонент! Очень ценим.

И небольшое предложение: не могли бы вы использовать соглашение Markdown ~~это~~ для зачеркивания вместо более многословного соглашения <s></s>?

1 лайк

Поддерживаю эту идею :slight_smile:

Было бы здорово иметь нативную возможность отображать дополнительные элементы MD-композиции только для конкретных групп. В нашем случае мы хотели бы пока тестировать дополнительные кнопки только для нашего персонала.

Пока я скрыл их, добавив body:not(.staff) к коду Нейтана:

// Скрывает ненужные кнопки из MD Composer Extras TC для пользователей, не являющихся сотрудниками
body:not(.staff) .d-editor-button-bar {
    .superscript_button,.subscript_button, .align_center_button,.align_right_button, .align_justify_button {
        display: none;
    }
}

Следующий уровень — настройка прав доступа для каждой отдельной кнопки. :drooling_face:

2 лайка

@jrgong вы можете сделать это, добавив этот компонент и немного CSS: GitHub - discourse/discourse-groups-css-classes-in-body · GitHub

Вы можете посмотреть разделы моего меню навигации по группам TC в качестве примера CSS — ссылка есть на моей карточке пользователя.

5 лайков

Как это ещё не в ядре? :smiley: Спасибо за то, что поделились, я очень ценю это.

3 лайка

По-прежнему ли верно, что плагин имеет преимущества перед этим компонентом темы?

Я все еще считаю, что плагин лучше, но если предложенные здесь варианты вам подходят, то всё в порядке.

2 лайка

Спасибо за быстрый ответ. Не могли бы вы пояснить почему?

Это просто моё личное мнение, но я считаю, что мы добавили слишком много кнопок в компонент.

Плагин больше ориентирован на базовые функции: система BB-кодов здесь проще ([center] вместо [wrap="center"]), но компонент, безусловно, проще установить.

4 лайка

На всякий случай, если вы этого еще не видели:

image

3 лайка

Я сделал PR :+1:

https://github.com/MonDiscourse/md-composer-extras/pull/12

2 лайка

Можно ли добавить CSS-класс md-composer-extras ко всем кнопкам? Моя цель — скрыть их все сразу для пользователей, не являющихся сотрудниками, что значительно упростит выборку в CSS.

Я не уверен, что это возможно. В примере кода из файла API плагина я не вижу способа добавить своего рода базовый класс для всех этих иконок. Хотя я могу ошибаться.

api.onToolbarCreate(toolbar => {
  toolbar.addButton({
  id: 'pop-text',
  group: 'extras',
  icon: 'bolt',
  action: 'makeItPop',
  title: 'pop_format.title'
  });
 });

К классу <body> применяется класс staff.

Таким образом, вы можете нацелиться на любые кнопки, например:

body:not(.staff) .d-editor-button-bar {
    /* Скрывает всё 
     * (видимые кнопки, включая кнопку всплывающего меню) 
     */
    button, 
    .toolbar-popup-menu-options {
        display: none; 
    }
}
body:not(.staff) .d-editor-button-bar {
    /* Скрывает конкретные кнопки */
    button {    
        /* Кнопки в строке */
        &.align_justify_button, 
        &.align_right_button 
        /* ... */
        {
            display: none;
        }
        
        /* Всплывающее меню */
        &.toolbar-popup-menu-options {
            [data-name="Float left"],
            /* ... */ {
                display: none;
            }
        }
    }
}

Это могло бы помочь?

Кстати, вам может быть интересен этот компонент:

Привет, Arkshine! Это определённо помогает! Тем не менее, на мой взгляд, более эффективным подходом было бы добавить CSS-класс md-composer-extras к каждой кнопке. Таким образом, CSS-правило для скрытия всех элементов станет предельно простым :slight_smile:

Спасибо! Мы, кстати, уже используем это :wink: