Jko-crowdin-lib NPM

CKEditor整合Crowdin多語系管理套件

此套件整合了Crowdin的多語系管理功能，能在頁面上載入相對應的內容文件，並且提供了CKEditor的編輯功能，能讓使用者在該內容區做即時的預覽更新內容，實現有如Crowdin In Context的即時編輯功能，但更多樣的是擁有CKEditor這樣強大的編輯器，讓內容更新不再只是單純的文字編輯，而是提供更多樣式的可能性！

功能特色：

CKEditor編輯功能：透過CKEditor，你可以在頁面中輕鬆進行所見即所得的編輯，有別於一般的純文字編輯，CKEditor內提供了多樣式的選擇，讓畫面更加豐富。
Crowdin多語系管理：套件內整合了Crowdin多語系管理功能，實現了把網頁內容儲存在Crowdin上的目標，讓使用者只需花費管理Crowdin的成本就能夠實現頁面編輯的功能。
一鍵更新至Crowdin 完成編輯後，只需點擊一個按鈕，您的內容就會即時更新至Crowdin的文件中。這項功能節省了手動上傳、同步的時間，確保翻譯團隊能夠立即取得最新版本的文件，提高工作效率。
- CKEditor套件功能可參考 CKEditor5-custom-build
- 目前該功能僅提供文件的編輯內容，開發人員可以參考Crowdin API文件製作對應的API，實現一件更新功能。

如何使用：

使用此套件須在React架構下進行，因為套件本身是個Hooks功能，必須要特別注意在Server Side的環境下需要額外處理載入問題，因為開發此套件的需求是要在Server Side的環境下運作，下面範例就會在NextJs 12 / Page Route的條件下進行：

安裝 jko-crowdin-lib
```
yarn add jko-crowdin-lib
```

載入套件

 function Home() {
   const [useHook, setUseHook] = useState({});

   const loadPackage = async () => {
     const { useEditor } = await import('jko-crowdin-lib');
     return useEditor;
   };

   useEffect(() => {
     loadPackage().then(customHook =>
       setUseHook({
         useEditor: customHook,
       }),
     );
   }, []);
   const { useEditor } = useHook;
   if (useEditor) {
     return <Component messages={messages} useEditor={useEditor} />;
   }
   return null;
 }

有別於一般直接載入的方式，因為在Server Side的環境下載入Hook會造成錯誤，所以我們這邊把載入的做放在 useEffect 內進行，當功能載入後更新 useState 的變數，當確定取得hook功能後再進入頁面中。

功能應用：
```
 const { e, getEditData } = useEditor({
   project: process.env.PROJECT_NAME,
   file: process.env.FILE_NAME,
   distributions: process.env.DISTRIBUTIONS,
   token: process.env.TOKEN,
 });

 return (
   <div>{e("content-key")}</div>
 )
```
上述程式碼需要額外提供四個變數，功能是透過這些變數去Crowdin取得對應的內容文案，不需開發者額外透過API取得文件資料，以下說明：
- PROJECT_NAME：Crowdin上的Project名稱。
- FILE_NAME：Project上的文件檔路徑，通常是 '/{file}/{document}.json' 的形式。
- DISTRIBUTIONS：可以在Crowdin後台的 Translations / Over-The-Air Content Delivery 內取得 distributions hash。
- TOKEN：取得方式 https://crowdin.com/settings#api-key
當上述內容完成後，我們可以看到e (Editor)這個function，這個命名是比照在 i18n 內 t的命名邏輯(Translate)，帶入Crowdin上對應的 KEY 值後，就會自動把文字內容帶入CKEditor內，這樣就可以開始編輯了！
取得更新資料：
另外我們可以找到 getEditData 這個function，它可以幫助我們取得整個頁面的更新資料，可參考下面的程式碼：
```
{
 'article-1-line-1': {
   id: 11016,
   value: "<p>文章一</p>"
 },
 'article-1-line-2': {
   id: 11018,
   value: "<p>文章二</p>"
 },
 '__update__': ['article-1-line-2']
}
```
可以看到每個 KEY 都是對應 e 上所帶入的 KEY 值，而每個 KEY 都會對應他在 Crowdin 上的編號與內容，在後續 Crowdin Release 的功能上會使用到，最底下 __update__ 這筆陣列就會列出有哪幾個 KEY 室友進行編輯過的，開發者可以直接篩選出有編輯過的欄位進行更新。