Всем привет! Сегодня добавил новый компонент - Table, а к нему еще TableRow и TableCell. Не сложно догадаться, что это для создания таблиц. Но есть момент: таблицы могут быть не только статическими (с набитыми вручную строками/колонками), но и динамическими - для вывода данных из ListView.То есть можно сформировать выборку данных по API и вывести их в таблицу. Вот для примера быстренько накидал страницу вывода команд: https://prisma-cms.com/teams/, можете изучить структуру. Чтобы проще было, записал видео: Вообще задачка оказалась немного нетривиальной, потому что тегу tr нельзя задать бордер, а они нужны для того, чтобы в визуальном редакторе было видно имеющиеся строки, выделить, удалить и т.п. Пришлось клепать обертки с дисплей flex. В общем, в визуальном редакторе, все колонки будут иметь одинаковую пропорциональную ширину, даже если вы четко укажите другую ширину. Но в обычном выводе эти обертки отсутствуют, а выводится четкая структура table-tbody-tr-td, так что там уже ваши дополнительные атрибуты установленные будут учитываться как положено.

Опять комментарий не туда улетел:) Надо уже поправить эту багу.

Никто комментарий так и не хочет написать:)

Всем привет! Сегодня я покажу как можно оживлять формы в prisma-cms. Только сразу уточню, что для этого уже потребуется немного попрограммировать, то есть мы будем расширять имеющийся функционал, точнее просто добавим одну кнопку. Задача следующая: есть Услуги и есть Категории услуг. Вот надо в форму создания Услуги добавить возможность задавать Категорию. Для этого у нас практически все есть во фронт-редакторе "из коробки": EditableObject позволяет создавать/редактировать объекты, а Query+Connector позволяет в форму добавить список Категорий. Но список Категорий-то мы получим, но как нам сделать, чтобы мы могли по клику указывать эту Категорию Услуге? Для этого нам надо создать свою кнопку Категории, чтобы по клику и выполнялось нужное нам действие. Вот посмотрите как это выглядит, а ниже я покажу рабочий код и объясню его. Итак, как вы видели в ролике, у нас обычный текстовый вывод менялся на компонент SetServiceCategory. Вот его код: Про основные моменты, касающиеся базового компонента фронт-редактора, написано здесь: Добавление кастомных компонентов в @prisma-cms/front-editor. Так же напомню, что есть специальное расширение для редактора VS Code: Расширение prisma-cms для редактора VS Code. Ускоряем процесс программирования. А мы сосредоточимся сейчас на самом главном - методе renderChildren(), который и выводит нашу новую кнопку. Саму кнопку найти в этом коде не сложно, но нам важнее разобраться с ее обертками - ObjectContext.Consumer и EditableObjectContext.Consumer. ObjectContext.Consumer позволяет получить данные текущего объекта. В нашем случае это объект Категория на каждой итерации вывода данных Категорий, полученных в запросе. Подробнее об этом читайте пор ObjectView и ListView. EditableObjectContext.Consumer позволяет получить данные редактируемого объекта, и не только данные, но и методы создания редактируемых полей, проверки может ли быть объект редактируемым, его измененные данные и метод обновления его данных. Читайте подробней про EditableObject. Таким образом, на каждой итерации вывода массива Категорий, мы получаем данные этой Категории (id и name) и проверяем выбрана эта Категория или нет (если выбрана, кнопку делаем жирной). А по клику через updateObject(), полученный из EditableObjectContext.Consumer, мы обновляем наш объект Услуги, то есть задаем ей Категорию. Здесь следует четко понимать, что на самом деле мы еще не обновляем в этот момент Услугу, а только задаем ей новое свойство. При этом Услуга еще в режиме Черновик. Реальное же обновление будет выполнено по клику на кнопку Сохранить (красная дискета), вот тогда данные будут отправлены на сервер, и если все ОК, то Услуга будет сохранена.

Всем привет! Сегодня новый очень интересный материал: индивидуальное оформление топиков средствами фронт-редактора. С этим новым функционалом каждый топик можно буквально превратить в самостоятельный лендинг. К примеру, можно вот легко вставить видео: Или сделать какую-либо выборку данных и визуализировать ее. В данном случае я сделаю выборку трех последних комментариев и выведу это в VerticalTimeline. И что самое интересное, это выборка в дальнейшем будет постоянно обновляться. Попробуйте добавить свой комментарий :) Что еще приятно, можно довольно легко кастомизировать свои формы. К примеру вот так я быстро добавил в форму создания топика поле выбора блога, в который будет размещен топик. А вот так я добавил кастомные поля для редактирования самого топика. В конце, правда, при отправке данных на сервер получаем ошибку, но это все потому что в схеме не прописаны еще кастомные поля, то есть остается только в схему добавить новые поля и все, новые данные будут сохраняться. По сути данный функционал - это продолжение прошлого анонса, в котором я писал про то, что в самом редакторе появились кнопки добавления дочерних элементов внутри самих компонентов редактора. Как я и писал, функционал этот экспериментальный, но он активно выливается в очень интересные решения, при чем значительно превосходящие даже мои ожидания :) Я не думал, что так быстро получу такой результат. В данной реализации добавляется специальный компонент, который имеет два режима работы: 1. В режиме редактирования шаблона через сам редактор шаблона. 2. В режиме состояния editable компонента EditableObject. В нашем случае EditableObject - это топик. Так вот, когда мы не в режиме редактирования шаблона, а просто в самом топике, и когда его редактируем, то внутренние изменения компонентов вносятся не в шаблонизацию, а в сам ObjectEditable (повторюсь, у нас это сейчас топик, но это может быть любой другой объект, хоть пользователь, хоть проект, хоть что). То есть шаблонизация - это для программиста, а писать топики - это уже для конечного пользователя или менеджера. В дальнейшем можно будет добавить массу новых нужных блоков со своей логикой (включая логику вложенности блоков), предустановленными настройками и т.п. При этом на каждом отдельном сайте можно создавать свои наборы блоков, чтобы контент-менеджерам было проще. Напомню, кастомные компоненты редактора добавить совсем не сложно. Тильда отдыхает:) UPD: Не пытайтесь увидеть новый редактор при редактировании своих старых статей. А то были уже замечены...)) Я для старых топиков оставил старый редактор. На новый перевести их было бы не сложно, но, считаю, это не нужно. Если хотите поиграться с новым редактором, просто создайте черновик и не сохраняйте статью.

Всем привет! Сегодня написал свое первое расширение для редактора Visual Studio Code. Задача была простая - добавить сниппет для быстрого создания кастомных компонентов для фронт-редактора. Вот что в итоге получилось: https://youtu.be/8-_LYX5qFB8 Вообще, как мне кажется, здесь вопрос не только ускорения процесса разработки, но и помощь в организации заготовок. Если за пример брать тот же Component для фронт-редактора, сниппет которого представлен в видео, то его класс сейчас насчитывает более 3200 строк кода:). Да, этот код нельзя назвать оптимальным и такие большие классы совсем не часто встречаются, но тем не менее. В любом случае, когда расширяешь подобный класс, конечно же далеко не все методы надо переопределять, а о многих из них даже и знать не обязательно. Тем не менее какие-то могут быть полезными и часто используемыми. Вот за счет создания и использования таких сниппетов можно помочь в написании своих кастомных классов, в которых сразу будут прописаны наиболее часто используемые методы и свойства. Я буду добавлять такие сниппеты в это расширение и обновляя его в редакторе всегда будут актуальные наработки под рукой. Если что, исходники расширения здесь: https://github.com/prisma-cms/vscode-extension

Всем привет! В прошлой статье я писал про методы EditorComponent::canBeParent(parent) и EditorComponent::canBeChild(child), которые позволяют на уровне компонентов фронт-редактора решать какие компоненты могут быть дочерними или родительскими. И вот сегодня я добавил новый экспериментальный функционал - вывод кнопок добавления доступных компонентов внутри самих компонентов. То есть когда вы в редакторе кликаете какой-либо компонент (и он становится активным), в нем появляются кнопки добавления дочерних компонентов, при чем только тех, которые могут стать дочерними конкретно для этого компонента. Это очень удобно, когда компоненты проработаны хорошо и в них четко пропрописаны взаимоотношения с другими компонентами. В таком случае, находясь в каком-то компоненте, не надо искать доступные для него в правой панели (тем более что там функция искать доступные для него не реализована, а обратное действие, то есть при перетаскивании компонента из правой панели в основной части будет видно, куда его можно закинуть). То есть если вас интересует конкретный компонент на странице и доступные для него дочерние, теперь искать не надо, они сразу доступны внутри этого компонента. Вот как это работает: https://youtu.be/0LrtOfYZPK4 Функционал я определил как экспериментальный, но это просто потому что с интерфейсами надо будет еще подумать, в конечных узких компонентах на странице не очень удобная портянка получается (как это видно на видео), поэтому я еще думаю как лучше сделать, чтобы было поудобней (думаю выводить их внизу страницы (завести еще одну панель)), но в целом сам принцип работы и его функционал вполне так боевой уже и конечно же и в будущем останется.

Всем привет! Как я и обещал ранее, в редакторе теперь в кнопках компонентов, которые были описаны в справочных статьях, теперь добавляются ссылки на эти справочные статьи. http://joxi.ru/RmzYKQaSYQW9kr Теперь, при работе с ним, вы всегда можете оперативно перейти на статьи по интересуемым компонентам. Еще один плюс к удобству в пользовании фронт-редактором:)