@kids-reporter/draft-renderer

@mirrormedia/lilith-core ·

Installation

yarn install

Introduction

本套件是由 @mirrormedia/lilith-draft-editor 將其 maintain 的 buttons 對應的 block renderers 和 entity decorators 的邏輯 decouple， 以應用在 Next.js 專案以及 CMS 上。

Development

在開發順序上，一開始各網站會有一套 default 的 block renderers 和 entity decorators，這些預設的 components 將會被 export 給 lilith-draft-editor 使用並在 CMS 上呈現出各 button 新增的 content。

For Next.js to use

在各網站開發時，工程師將因應設計將會針對 block renderers 和 entity decorators 修改樣式，因此會在各個網站的資料夾中修改網站專屬的 block renderers 和 entity decorators，這個套件將直接用在該 Next.js 專案上，當作 React component 直接使用，只要帶入 CMS 上拿到的 draft.js 相關的 contentBlock 的資料即可呈現樣式。

除了 block renderers 和 entity decorators 等檔案可以針對 block type 修改之外，built-in 的 draft.js block type 可以透過 src/website/${website}/draft-renderer.tsx中的 styled-components DraftEditorWrapper 中的 css 來修改

  /* Draft built-in buttons' style */
  .public-DraftStyleDefault-header-two {
  }
  .public-DraftStyleDefault-header-three {
  }
  .public-DraftStyleDefault-header-four {
  }
  .public-DraftStyleDefault-blockquote {
  }
  .public-DraftStyleDefault-ul {
  }
  .public-DraftStyleDefault-unorderedListItem {
  }
  .public-DraftStyleDefault-ol {
  }
  .public-DraftStyleDefault-orderedListItem {
  }
  /* code-block */
  .public-DraftStyleDefault-pre {
  }

修改完成後修改 package version, 跑 yarn build 和 npm publish 即可以發布新版套件並在 Next.js 中 yarn install 使用。

For CMS to use

在特定網站的 block renderers 和 entity decorators 改動之後，為了保持 CMS 上的 draft-editorn 所見即所得呈現和 Next.js 端同樣的樣式， 在完成 npm publish 後需要到 packages/draft-editor 去更新 @mirrormedia/lilith-draft-renderer 的版本，並依照該套件的 README.md 的指示在該網站的 CMS 中測試。

File Structure

在 src 資料夾下有兩大類的檔案

1. 共用的 draft.js 程式碼： 主要是 draft.js button UI, draft-converter 和其他 helper function
2. 各網站客製化的改動：

依照各網站需求修改src/website/${website}/中的檔案

• block-renderer : 在既有(注 1)的 block-renderer 上附加可編輯的 wrapper，僅有部分 block renderers 適用
• selector: 依照各網站 keystone list 來調整 photo, video 和 post 的 gql query
• draft-editor: 主要 export 出 RichTextEditor 的檔案，實際使用在 lilith-core 對應的 webiste 中，可直接決定 RichTextEditor 樣式(注 2)

*注 1: lilith-draft-editor 各個 buttons 對應的 block-renderers, entity-decorators 會 maintain 在 lilith-draft-renderer，由各網站 Next.js 專案開發人員實作，在本專案中會直接將 lilith-draft-renderer 中定義好的 block-renderers, entity-decorators 直接使用(除了少數需要再編輯的 block-renderer，參考 src/website/${website}/block-renderer中的 editor wrapper component)。

*注 2: 雖然各個網站都 maintain 了一個 draft-editor，可以自行決定 import 進來的 buttons，不過因為 lilith-core 中實作 disalbedButtons 的功能，所以目前一率將所有的 buttons 加入 RichTextEditor 中，由 lilith-(mirrormedia|readr|mesh|editools) 來控制所使用的 buttons。

Build

yarn build

Publish

npm run publish

在 publish 前，請根據 conventional commits 的規範，將 package.json#version 升版。

Notable Details

For those files under views/ folder, we transpile them specifically.

For those files under views/ folder, we transpile them by babel according to different configuation. The specific babel configuration is .views.babelrc.js. In .views.babelrc.js, we tell babel not to transpile import and export es6 codes into commonJS codes. The Keystone server won't start server well if those files under views/ are transpiled into commonJS codes.