Puck은 Measured에서 제작한 React용 오픈 소스 비주얼 편집기로, builder.io, WordPress 및 기타 WYSIWYG 도구에 대한 자체 호스팅 대안입니다.

GitHub에서 별 5,000개를 축하합니다! 훌륭한 커뮤니티에 감사드립니다!

Puck v0.16은 헤드라인 권한 API와 삶의 질 향상을 도입한 대규모 릴리스입니다. 이 작업을 완료하는 데 시간이 좀 걸렸습니다. 여러분의 인내와 지원에 감사드립니다.

• 권한: 새로운 권한 및 해결권한 API를 통해 복제, 드래그, 삭제와 같은 Puck 기능을 전환합니다.
• 작업 표시줄 재정의: actionBar 재정의를 사용하여 사용자 정의 작업 표시줄을 만들거나 새로운 구성 요소를 사용하여 기본 작업 표시줄을 확장합니다.
• iframe 스타일 삽입: iframe 문서에 액세스하여 스타일을 직접 삽입하거나 새로운 iframe 재정의를 통해 다른 변경 작업을 수행합니다. 또한 일반적인 Emotion 사용 사례를 위한 감정 캐시 플러그인도 도입했습니다.
• 기록 주입: 일련의 새로운 API를 통해 실행 취소/다시 실행 기록을 주입합니다
• 액션에 반응: onAction 콜백을 통해 Puck이 전달한 액션에 반응합니다.
• 선택적 필드: 선택적 소품은 정의될 수 있으므로 더 이상 필드에서 정의할 필요가 없습니다.

지금 업그레이드하거나 다음을 시작하세요.

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 prop을 통해 또는 usePuck().history의 setHistory 및 setHistoryIndex 함수를 통해 동적으로 자신만의 실행 취소/재실행 기록을 제공하세요.

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

export function Editor() {
  return (
    
  );
}

행동에 반응

onAction API를 사용하면 Puck의 내부 작업이 전달될 때 이에 반응할 수 있습니다.

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

주요 변경 사항

역사.데이터는 이제 역사.상태입니다.

usePuck 기록 API를 사용하면 이제 데이터 이름이 상태로 변경됩니다.

History.id는 이제 선택 사항입니다(TypeScript).

usePuck 기록 API ID를 사용할 때 이제 선택 사항입니다. Puck은 항상 ID를 생성하지만 TypeScript가 불평할 수 있습니다.

이제 리졸버에서 비어 있는 경우 lastData가 {} 대신 null로 반환됩니다.

resolveData 또는solveFields 함수에 제공된 lastData 옵션을 사용하고 이전 데이터가 없는 경우 이제 lastData는 {} 대신 null이 됩니다.

전체 변경 내역

특징

• 구성요소 컨트롤 추가를 위한 actionBar 재정의 추가(48ec0d7)
• 자동 RSC 내보내기 추가, /rsc 번들 교체(d21eba6)
• Drawer.Item에 isDisabled 소품 추가(cad95b8)
• 퍽 후크(01703a9)를 사용할 일반 유형 추가
• 스타일 주입을 위한 iframe 재정의 추가(7cac376)
• Puck에initialHistory 소품 추가(54b5a87)
• 상태 변경을 추적하고 이에 반응하는 onAction API를 추가합니다(c7007ac)
• 권한 API 추가(a43914d)
• Emotion 캐시 삽입을 위한 플러그인 추가(f8a88b9)
• resolvePermissions API 추가(f0655f0)
• iframe 구성에 waitForStyles 옵션 추가(bc81d9c)
• 새 항목이 삽입되면 analyzeData를 호출합니다. (3298831)
• 선택적 소품에 대한 필드를 필수로 지정하지 않음(5a219ef)
• 재정의에 사용할 ActionBar 구성 요소 내보내기(04fd6c5)
• 사용자 구성(50045bb)에서 데이터 유형 추론
• 기록 유형에서 ID를 선택 사항으로 설정(주요 변경)(d917229)
• ES 모듈 빌드 제공(ff9076b)
• history.data의 이름을 History.state로 바꿉니다(주요 변경 사항)(b09244c)
• iframe 로드가 500ms를 초과하면 스피너 표시(cfecf54)
• 사용Puck 기록 API 간소화(c8b2807)
• "다음" 레시피를 [email protected](60fe631)로 업그레이드

버그 수정

• Puck 404를 방지하려면 다음 레시피에 파비콘을 추가하세요(2c52d27)
• 외부 필드에 누락된 readOnly 상태 추가(bf1449d)
• 항상 구성요소 삽입 기록 기록(88c5ab6)
• 다음 레시피에서 경로를 캐시/편집하지 않음(94f16b2)
• 양식에 퍽이 사용된 경우 버튼을 제출하지 마세요(f761e5f)
• 데모 유형이 TypeScript@5(958dc25)를 만족하는지 확인하세요.
• 누락된 플러그인 유형 내보내기(eb42734)
• 데이터의 구성요소가 구성에서 누락된 경우 충돌 수정(0daf478)
• Mantine(538cb05)과 같은 일부 프레임워크에 대한 iframe CSS의 복원력을 향상합니다.
• 구성 및 데이터 유형을 더욱 강력하게 만듭니다(6bcf555)
• 일부 프레임워크에서 플러그인을 사용할 때 무한 루프 방지(3870871)
• tailwind가 뷰포트 확대/축소 선택과 충돌하는 것을 방지합니다(9151255)
• 리믹스 레시피에서 본문 여백 제거(0898b26)
• 앱 상태를 통해 변경되면 표시 영역 크기 조정(14419ec)
• 동일한 유형의 항목 간 전환 시 필드 해결(a3518ca)
• 리졸버에서 빈 객체 대신 lastData를 null로 반환(주요 변경 사항)(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