@kids-reporter/draft-editor 0.1.0

package/README.md

@@ -0,0 +1,51 @@
+# [@mirrormedia/lilith-core](https://www.npmjs.com/package/@mirrormedia/lilith-draft-editor) · ![npm version](https://img.shields.io/npm/v/@mirrormedia/lilith-draft-editor.svg?style=flat)
+
+### 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 build`， `packages/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/core` 而 `node_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
+
+#### 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.

package/lib/.selector/align-selector.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AlignSelector = AlignSelector;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _fields = require("@keystone-ui/fields");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Label = _styledComponents.default.label`
+  display: block;
+  margin: 10px 0;
+  font-weight: 600;
+`;
+const AlignSelect = (0, _styledComponents.default)(_fields.Select)`
+  ${({
+  menuHeight
+}) => {
+  return `margin-bottom: ${menuHeight}px;`;
+}}
+`;
+
+function AlignSelector(props) {
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [menuHeight, setMenuHeight] = (0, _react.useState)(0);
+  const {
+    align,
+    options,
+    onChange,
+    onOpen
+  } = props;
+  (0, _react.useEffect)(() => {
+    const selectMenu = document.querySelector('.css-nabggt-menu');
+
+    if (selectMenu) {
+      const styles = window.getComputedStyle(selectMenu);
+      const margin = parseFloat(styles['marginTop']) + parseFloat(styles['marginBottom']);
+      setMenuHeight(selectMenu.offsetHeight + margin);
+    } else {
+      setMenuHeight(0);
+    }
+
+    if (isOpen && onOpen) {
+      onOpen();
+    }
+  }, [isOpen]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Label, {
+    htmlFor: "alignment"
+  }, "\u5C0D\u9F4A"), /*#__PURE__*/_react.default.createElement(AlignSelect, {
+    id: "alignment" // default align === undefined
+    ,
+    value: options.find(option => option.value === align),
+    options: options,
+    onChange: option => {
+      onChange(option.value);
+    },
+    onMenuOpen: () => setIsOpen(true),
+    onMenuClose: () => setIsOpen(false),
+    menuHeight: menuHeight
+  }));
+}

package/lib/.selector/audio-selector.js

@@ -0,0 +1,268 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AudioSelector = AudioSelector;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _modals = require("@keystone-ui/modals");
+
+var _apollo = require("@keystone-6/core/admin-ui/apollo");
+
+var _searchBox = require("./search-box");
+
+var _pagination = require("./pagination");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const AudioSearchBox = (0, _styledComponents.default)(_searchBox.SearchBox)`
+  margin-top: 10px;
+`;
+const AudioSelectionWrapper = _styledComponents.default.div`
+  overflow: auto;
+  margin-top: 10px;
+`;
+const AudioGridsWrapper = _styledComponents.default.div`
+  display: flex;
+  flex-wrap: wrap;
+  overflow: auto;
+`;
+const AudioGridWrapper = _styledComponents.default.div`
+  flex: 0 0 50%;
+  cursor: pointer;
+  padding: 0 10px 10px;
+`;
+const AudioMetaGridsWrapper = _styledComponents.default.div`
+  display: flex;
+  flex-wrap: wrap;
+  overflow: auto;
+`;
+const AudioMetaGridWrapper = _styledComponents.default.div`
+  flex: 0 0 50%;
+  cursor: pointer;
+  padding: 0 10px 10px;
+`;
+const Audio = _styledComponents.default.audio`
+  width: 100%;
+`;
+const AudioName = _styledComponents.default.p`
+  text-align: center;
+`;
+const SeparationLine = _styledComponents.default.div`
+  border: #e1e5e9 1px solid;
+  margin-top: 10px;
+  margin-bottom: 10px;
+`;
+const AudioSelected = _styledComponents.default.div`
+  height: 1.4rem;
+`;
+const ErrorWrapper = _styledComponents.default.div`
+  & * {
+    margin: 0;
+  }
+`;
+
+function AudiosGrids(props) {
+  const {
+    audios,
+    selected,
+    onSelect
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(AudioGridsWrapper, null, audios.map(audio => {
+    return /*#__PURE__*/_react.default.createElement(AudioGrid, {
+      key: audio.id,
+      isSelected: selected === null || selected === void 0 ? void 0 : selected.includes(audio),
+      onSelect: () => onSelect(audio),
+      audio: audio
+    });
+  }));
+}
+
+function AudioGrid(props) {
+  var _audio$file;
+
+  const {
+    audio,
+    onSelect,
+    isSelected
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(AudioGridWrapper, {
+    key: audio === null || audio === void 0 ? void 0 : audio.id,
+    onClick: () => onSelect(audio)
+  }, /*#__PURE__*/_react.default.createElement(AudioSelected, null, isSelected ? /*#__PURE__*/_react.default.createElement("i", {
+    className: "fas fa-check-circle"
+  }) : null), /*#__PURE__*/_react.default.createElement(Audio, {
+    controls: true
+  }, /*#__PURE__*/_react.default.createElement("source", {
+    src: audio === null || audio === void 0 ? void 0 : audio.url
+  }), /*#__PURE__*/_react.default.createElement("source", {
+    src: audio === null || audio === void 0 ? void 0 : (_audio$file = audio.file) === null || _audio$file === void 0 ? void 0 : _audio$file.url
+  })), /*#__PURE__*/_react.default.createElement(AudioName, null, audio === null || audio === void 0 ? void 0 : audio.name));
+}
+
+function AudioMetaGrids(props) {
+  const {
+    audioMetas
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(AudioMetaGridsWrapper, null, audioMetas.map(audioMeta => {
+    var _audioMeta$audio;
+
+    return /*#__PURE__*/_react.default.createElement(AudioMetaGrid, {
+      key: audioMeta === null || audioMeta === void 0 ? void 0 : (_audioMeta$audio = audioMeta.audio) === null || _audioMeta$audio === void 0 ? void 0 : _audioMeta$audio.id,
+      audioMeta: audioMeta
+    });
+  }));
+}
+
+function AudioMetaGrid(props) {
+  var _audio$file2;
+
+  const {
+    audioMeta
+  } = props;
+  const {
+    audio
+  } = audioMeta;
+  return /*#__PURE__*/_react.default.createElement(AudioMetaGridWrapper, null, /*#__PURE__*/_react.default.createElement(Audio, {
+    controls: true
+  }, /*#__PURE__*/_react.default.createElement("source", {
+    src: audio === null || audio === void 0 ? void 0 : audio.url
+  }), /*#__PURE__*/_react.default.createElement("source", {
+    src: audio === null || audio === void 0 ? void 0 : (_audio$file2 = audio.file) === null || _audio$file2 === void 0 ? void 0 : _audio$file2.url
+  })), /*#__PURE__*/_react.default.createElement(AudioName, null, audio === null || audio === void 0 ? void 0 : audio.name));
+}
+
+const AudiosQuery = (0, _apollo.gql)`
+  query Audios($searchText: String!, $take: Int, $skip: Int) {
+    audioFilesCount(where: { name: { contains: $searchText } })
+    audioFiles(
+      where: { name: { contains: $searchText } }
+      take: $take
+      skip: $skip
+    ) {
+      id
+      name
+      url
+      file {
+        url
+      }
+    }
+  }
+`;
+
+function AudioSelector(props) {
+  const [queryAudios, {
+    loading,
+    error,
+    data: {
+      audioFiles = [],
+      audioFilesCount = 0
+    } = {}
+  }] = (0, _apollo.useLazyQuery)(AudiosQuery, {
+    fetchPolicy: 'no-cache'
+  });
+  const [currentPage, setCurrentPage] = (0, _react.useState)(0); // page starts with 1, 0 is used to detect initialization
+
+  const [searchText, setSearchText] = (0, _react.useState)('');
+  const [selected, setSelected] = (0, _react.useState)([]);
+  const pageSize = 6;
+  const {
+    onChange
+  } = props;
+
+  const onSave = () => {
+    onChange(selected);
+  };
+
+  const onCancel = () => {
+    onChange([]);
+  };
+
+  const onSearchBoxChange = async searchInput => {
+    setSearchText(searchInput);
+    setCurrentPage(1);
+  };
+
+  const onAudiosGridSelect = audioEntity => {
+    setSelected(selected => {
+      const filterdSelected = selected.filter(ele => {
+        var _ele$audio;
+
+        return ((_ele$audio = ele.audio) === null || _ele$audio === void 0 ? void 0 : _ele$audio.id) !== audioEntity.id;
+      }); // deselect the audio
+
+      if (filterdSelected.length !== selected.length) {
+        return filterdSelected;
+      } // single select
+
+
+      return [{
+        audio: audioEntity
+      }];
+    });
+  };
+
+  const selectedAudios = selected.map(ele => {
+    return ele.audio;
+  });
+  (0, _react.useEffect)(() => {
+    if (currentPage !== 0) {
+      queryAudios({
+        variables: {
+          searchText: searchText,
+          skip: (currentPage - 1) * pageSize,
+          take: pageSize
+        }
+      });
+    }
+  }, [currentPage, searchText]);
+
+  let searchResult = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(AudiosGrids, {
+    audios: audioFiles,
+    selected: selectedAudios,
+    onSelect: onAudiosGridSelect
+  }), /*#__PURE__*/_react.default.createElement(_pagination.Pagination, {
+    currentPage: currentPage,
+    total: audioFilesCount,
+    pageSize: pageSize,
+    onChange: pageIndex => {
+      setCurrentPage(pageIndex);
+    }
+  }));
+
+  if (loading) {
+    searchResult = /*#__PURE__*/_react.default.createElement("p", null, "searching...");
+  }
+
+  if (error) {
+    searchResult = /*#__PURE__*/_react.default.createElement(ErrorWrapper, null, /*#__PURE__*/_react.default.createElement("h3", null, "Errors occurs in the `audios` query"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Message:"), /*#__PURE__*/_react.default.createElement("div", null, error.message), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Stack:"), /*#__PURE__*/_react.default.createElement("div", null, error.stack), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Query:"), /*#__PURE__*/_react.default.createElement("pre", null, AudiosQuery.loc.source.body)));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
+    isOpen: true
+  }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
+    title: "Select audio",
+    actions: {
+      cancel: {
+        label: 'Cancel',
+        action: onCancel
+      },
+      confirm: {
+        label: 'Confirm',
+        action: onSave
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(AudioSearchBox, {
+    onChange: onSearchBoxChange
+  }), /*#__PURE__*/_react.default.createElement(AudioSelectionWrapper, null, /*#__PURE__*/_react.default.createElement("div", null, searchResult), !!selected.length && /*#__PURE__*/_react.default.createElement(SeparationLine, null), /*#__PURE__*/_react.default.createElement(AudioMetaGrids, {
+    audioMetas: selected
+  })))));
+}