Puck — это визуальный редактор с открытым исходным кодом для React, созданный Measured — автономная альтернатива builder.io, WordPress и другим инструментам WYSIWYG.

Мы отмечаем 5000 звезд на GitHub! Спасибо нашему замечательному сообществу!

Puck v0.16 — это большой релиз, в котором представлен API разрешений для заголовков и, как вы уже догадались, улучшения качества жизни. На создание этого потребовалось некоторое время, и мы ценим ваше терпение и поддержку.

• Разрешения: переключайте такие функции Puck, как дублирование, перетаскивание и удаление, с помощью новых разрешений и API разрешения разрешений.
• Переопределение панели действий: создавайте собственные панели действий, используя переопределение actionBar, или расширяйте панель по умолчанию, используя новый компонент .
• Внедрение стиля iframe: доступ к документу iframe для непосредственного внедрения стилей или внесения других изменений с помощью нового переопределения iframe. Мы также представили плагин кеширования эмоций для общего сценария использования Emotion.
• Внедрение истории: добавление истории отмены/повтора с помощью ряда новых API
• Реакция на действия: реакция на действия, отправленные Puck через обратный вызов onAction.
• Необязательные поля: дополнительные реквизиты больше не требуется определять в полях, поскольку они могут быть определены

Обновите сегодня или начните с:

npx create-puck-app@latest

Разрешения

Разрешения позволяют переключать основные функции Puck глобально, для каждого компонента или динамически. Огромное спасибо @xaviemirmon за его усилия.

export function Editor() {
  return (
    
  );
}

Переопределение панели действий

Новое переопределение actionBar позволяет создавать настраиваемое наложение панели действий или расширять стандартное наложение с помощью компонента :

const overrides = {
  actionBar: ({ children }) => (
    
      {/* Render default actions */}
      {children}

      {/* Render new actions */}
      
         console.log("Clicked!")}>
          ★
        
      
    
  ),
};

внедрение стиля iframe

Переопределение iframe позволяет получить доступ к документу iframe, что позволяет вставлять стили в заголовок:

const overrides = {
  iframe: ({ children, document }) => {
    useEffect(() => {
      if (document) {
        document.body.setAttribute("style", "background: hotpink;");
      }
    }, [document]);

    return {children}>;
  },
};

Новый плагин кеширования эмоций использует этот API для создания кеша эмоций внутри iframe, что упрощает использование Puck с любой библиотекой компонентов на основе эмоций.

Внедрение истории

Используйте новые API-интерфейсы внедрения истории, чтобы предоставить собственную историю отмены/повтора с помощью свойства InitialHistory или динамически с помощью функций setHistories и setHistoryIndex из usePuck().history.

const historyState = {
  data: {
    root: {
      props: { title: "My History" },
    },
  },
};

export function Editor() {
  return (
    
  );
}

Реагировать на действия

API onAction позволяет вам реагировать на внутренние действия Puck по мере их отправки:

export function Editor() {
  return (
     {
        if (action.type === "insert") {
          console.log("New component was inserted", appState);
        }
      }}
    />
  );
}

Критические изменения

History.data теперь называется History.state.

При использовании API истории usePuck данные теперь переименовываются в состояние.

History.id теперь необязателен (TypeScript)

При использовании API истории usePuck идентификатор теперь не является обязательным. Puck всегда генерирует идентификатор, но TypeScript может жаловаться.

LastData теперь возвращается как null вместо {}, если в преобразователях пусто.

При использовании опции LastData, предоставленной для функцийsolveData илиsolveFields, и предыдущих данных нет, значение LastData теперь будет нулевым, а не {}.

Полный список изменений

Функции

• добавить переопределение actionBar для добавления элементов управления компонентом (48ec0d7)
• добавить автоматический экспорт RSC, заменив пакет /rsc (d21eba6)
• добавить свойство isDisabled в Drawer.Item (cad95b8)
• добавить общий тип для использования крючка UsePuck (01703a9)
• добавить переопределение iframe для внедрения стилей (7cac376)
• добавить реквизит InitialHistory в Puck (54b5a87)
• добавить API onAction для отслеживания и реагирования на изменения состояния (c7007ac)
• добавить API разрешений (a43914d)
• добавить плагин для внедрения кеша эмоций (f8a88b9)
• добавить API разрешения разрешений (f0655f0)
• добавить параметр waitForStyles в конфигурацию iframe (bc81d9c)
• вызовитеsolveData при вставке нового элемента (3298831)
• не указывать поля для необязательных реквизитов (5a219ef)
• экспортировать компонент ActionBar для использования в переопределениях (04fd6c5)
• определить тип данных из конфигурации пользователя (50045bb)
• сделать идентификатор необязательным в типе истории (КРАТКОЕ ИЗМЕНЕНИЕ) (d917229)
• предоставьте сборку модуля ES (ff9076b)
• переименуйте History.data в History.state (КРАТКОЕ ИЗМЕНЕНИЕ) (b09244c)
• показывать счетчик, если загрузка iframe превышает 500 мс (cfecf54)
• оптимизировать API истории использования Puck (c8b2807)
• обновить "следующий" рецепт до [email protected] (60fe631)

Исправления ошибок

• добавьте значок к следующему рецепту, чтобы предотвратить Puck 404 (2c52d27)
• добавить отсутствующее состояние readOnly во внешние поля (bf1449d)
• всегда записывать историю при вставке компонента (88c5ab6)
• не кэшировать/редактировать маршрут в следующем рецепте (94f16b2)
• не отправлять кнопки, если в форме используется Puck (f761e5f)
• убедитесь, что демонстрационные типы удовлетворяют требованиям TypeScript@5 (958dc25)
• экспортировать отсутствующий тип плагина (eb42734)
• исправлен сбой, если компонент в данных отсутствует в конфигурации (0daf478)
• улучшение устойчивости CSS iframe для некоторых фреймворков, таких как Mantine (538cb05)
• сделать типы конфигурации и данных более надежными (6bcf555)
• предотвратить бесконечный цикл при использовании плагинов с некоторыми фреймворками (3870871)
• предотвратить конфликт Tailwind с выбором масштабирования видового экрана (9151255)
• удалить поля тела в рецепте ремикса (0898b26)
• изменить размер области просмотра при изменении состояния приложения (14419ec)
• разрешить поля при переключении между элементами одного типа (a3518ca)
• возвратить LastData как нулевой вместо пустого объекта в преобразователях (КРАТКОЕ ИЗМЕНЕНИЕ) (648eb92)
• показывать предупреждение, если стили анализатора заголовков не загружены (4e7110b)
• используйте правильный цвет в метках FieldLabel (b0469a1)

Новые участники

• @mkilpatrick внесли свой первый вклад в https://github.com/measuredco/puck/pull/505
• @nova4u сделали свой первый вклад в https://github.com/measuredco/puck/pull/538
• @antonmalyavkin сделали свой первый вклад в https://github.com/measuredco/puck/pull/585

Полный журнал изменений: https://github.com/measuredco/puck/compare/v0.15.0...v0.16.0