@mirrormedia/lilith-draft-editor

3.0.6 • Public • Published

Installation

yarn install

Development

@mirrormedia/lilith-draft-editor export @mirrormedia/lilith-core 所需要的 RichTextEditor,而 @mirrormedia/lilith-core 則是被 @mirrormedia/lilith-(mirrormedia|readr|mesh|editools) 所使用,因此在開發上會以各網站的角度去切入,在本套件中修改 editor 相關的程式碼,並在 lilith-(mirrormedia|readr|mesh|editools) 中測試開發狀況。

舉 lilith-mirrormedia 為例,要修改 mirrormedia 相關的 RichTextEditor 需要在 packages/lilith-draft-editor 中進行改動,改動完之後跑 yarn build 產生 transpiled 後的程式碼,若 packages/lilith-draft-editor 有修改 package.json 中的套件版本時,則需要同時修改 packages/core 中 import @mirrormedia/lilith-draft-editor 的版本; 同理,若是因此 packages/core 有修改版本號的話也需要跑 yarn buildpackages/mirrormedia 也同樣需要修改 import @mirrormedia/lilith-core 的版本。

因為 lilith-mirrormedia, lilith-core, lilith-draft-editor 都在 monorepo 中,yarn workspaces 會為 lilith-core, lilith-draft-editor pkg 建立 soft link,將 node_modules/@mirrormedia/lilith-core 指到 packages/corenode_modules/@mirrormedia/lilith-draft-editor 指到 packages/draft-editor,所以 yarn build 產生的新的程式碼,可以不需要透過 npm publish 和 yarn install 的方式,立即讓 lilith-mirrormedia, lilith-core 使用。

等到確定程式碼修改完畢後,我們再將最新的程式碼上傳(npm publish)到 npm registry 去,讓 lilith-editools 的 CI/CD 可以下載到最新的版本。

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

  • 元件裡的 import React from 'react' 為必要的,避免 babel transpile 後,無法抓取的 react 依賴的問題。

Readme

Keywords

Package Sidebar

Install

npm i @mirrormedia/lilith-draft-editor

Weekly Downloads

60

Version

3.0.6

License

MIT

Unpacked Size

624 kB

Total Files

108

Last publish

Collaborators

  • bibibobobi
  • hcchien
  • nickhsine
  • kjwen
  • caesar-wh-lee
  • v61265
  • erase2004
  • xuanchang
  • dyfu95