@kids-reporter/cms-core 0.1.0

package/README.md

@@ -0,0 +1,42 @@
+# [@mirrormedia/lilith-core](https://www.npmjs.com/package/@mirrormedia/lilith-core) · ![npm version](https://img.shields.io/npm/v/@mirrormedia/lilith-core.svg?style=flat)
+
+### Installation
+
+`yarn install`
+
+### Development
+
+`@mirrormedia/lilith-core` 被 `@mirrormedia/lilith-(vision|mesh|editools)` 所依賴，因此，在開發 lilith-core 的程式碼時，
+可以透過 lilith-(vision|mesh|editools) 來協助開發。
+
+舉 lilith-editools 為例，
+我們可以先起 lilith-editools server，接著修改 lilith-core 的程式碼，
+修改到一個階段，想要測試，便在 `packages/core` 底下跑 `yarn build`，產生新的 transpiled 程式碼。
+因為 lilith-editools 和 lilith-core 都在 monorepo 中，yarn workspaces 會為 lilith-core pkg 建立 soft link，
+將 `node_modules/@mirrormedia/lilith-core` 指到 `packages/core`，所以 `yarn build` 產生的新的程式碼，
+可以不需要透過 npm publish 和 yarn install 的方式，立即讓 lilith-editools 使用。
+等到確定程式碼修改完畢後，我們再將最新的程式碼上傳(`npm publish`)到 npm registry 去，讓 lilith-editools 的 CI/CD 可以下載到最新的版本。
+
+#### After v1.2.6
+
+使用 `@mirrormedia/lilith-core` 的 richTextEditor 時，需要帶入 `website` 的參數以便 `@mirrormedia/lilith-core` 引用的對應網站的 draft-editor 版本，
+在新增 keystone 的情況下，可以暫時填入既有的 `website` 值先快速建立，日後若有需求可以再另外新增 website 在 `@mirrormedia/lilith-core`, `@mirrormedia/lilith-draft-editor` 和 `@mirrormedia/lilith-renderer` 中。
+
+### 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/custom-fields/rich-text-editor/index.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.richTextEditor = void 0;
+
+var _types = require("@keystone-6/core/types");
+
+var _core = require("@keystone-6/core");
+
+const richTextEditor = ({
+  defaultValue = null,
+  disabledButtons = [],
+  ...config
+} = {}) => meta => {
+  var _config$db;
+
+  if (config.isIndexed === 'unique') {
+    throw Error("isIndexed: 'unique' is not a supported option for field type textEditor");
+  }
+
+  const resolve = val => val === null && meta.provider === 'postgresql' ? 'DbNull' : val;
+
+  return (0, _types.jsonFieldTypePolyfilledForSQLite)(meta.provider, { ...config,
+    input: {
+      create: {
+        arg: _core.graphql.arg({
+          type: _core.graphql.JSON
+        }),
+
+        resolve(val) {
+          return resolve(val === undefined ? defaultValue : val);
+        }
+
+      },
+      update: {
+        arg: _core.graphql.arg({
+          type: _core.graphql.JSON
+        }),
+        resolve
+      }
+    },
+    output: _core.graphql.field({
+      type: _core.graphql.JSON
+    }),
+    views: `@kids-reporter/cms-core/lib/custom-fields/rich-text-editor/views/index`,
+    getAdminMeta: () => ({
+      defaultValue,
+      disabledButtons
+    })
+  }, {
+    default: defaultValue === null ? undefined : {
+      kind: 'literal',
+      value: JSON.stringify(defaultValue)
+    },
+    map: (_config$db = config.db) === null || _config$db === void 0 ? void 0 : _config$db.map
+  });
+};
+
+exports.richTextEditor = richTextEditor;

package/lib/custom-fields/rich-text-editor/views/index.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.controller = exports.Field = exports.Cell = exports.CardValue = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@keystone-ui/core");
+
+var _fields = require("@keystone-ui/fields");
+
+var _components = require("@keystone-6/core/admin-ui/components");
+
+var _draftJs = require("draft-js");
+
+var _draftEditor = _interopRequireDefault(require("@kids-reporter/draft-editor"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// eslint-disable-line
+// import { RichTextEditor, decorators } from '@mirrormedia/lilith-draft-editor'
+const {
+  RichTextEditor,
+  decorators
+} = _draftEditor.default.DraftEditor;
+
+const Field = ({
+  field,
+  value,
+  onChange,
+  autoFocus // eslint-disable-line
+
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_fields.FieldContainer, null, /*#__PURE__*/_react.default.createElement(_fields.FieldLabel, null, field.label, /*#__PURE__*/_react.default.createElement(_core.Stack, null, /*#__PURE__*/_react.default.createElement(RichTextEditor, {
+    disabledButtons: field.disabledButtons,
+    editorState: value,
+    onChange: editorState => onChange === null || onChange === void 0 ? void 0 : onChange(editorState)
+  }))));
+};
+
+exports.Field = Field;
+
+const Cell = ({
+  item,
+  field,
+  linkTo
+}) => {
+  const value = item[field.path] + '';
+  return linkTo ? /*#__PURE__*/_react.default.createElement(_components.CellLink, linkTo, value) : /*#__PURE__*/_react.default.createElement(_components.CellContainer, null, value);
+};
+
+exports.Cell = Cell;
+Cell.supportsLinkTo = true;
+
+const CardValue = ({
+  item,
+  field
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_fields.FieldContainer, null, /*#__PURE__*/_react.default.createElement(_fields.FieldLabel, null, field.label), item[field.path]);
+};
+
+exports.CardValue = CardValue;
+
+const controller = config => {
+  var _config$fieldMeta;
+
+  return {
+    disabledButtons: ((_config$fieldMeta = config.fieldMeta) === null || _config$fieldMeta === void 0 ? void 0 : _config$fieldMeta.disabledButtons) ?? [],
+    path: config.path,
+    label: config.label,
+    graphqlSelection: config.path,
+    defaultValue: _draftJs.EditorState.createEmpty(decorators),
+    deserialize: data => {
+      const rawContentState = data[config.path];
+
+      if (rawContentState === null) {
+        return _draftJs.EditorState.createEmpty(decorators);
+      }
+
+      try {
+        const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
+
+        const editorState = _draftJs.EditorState.createWithContent(contentState, decorators);
+
+        return editorState;
+      } catch (err) {
+        console.error(err);
+        return _draftJs.EditorState.createEmpty(decorators);
+      }
+    },
+    serialize: editorState => {
+      if (!editorState) {
+        return {
+          [config.path]: null
+        };
+      }
+
+      try {
+        const rawContentState = (0, _draftJs.convertToRaw)(editorState.getCurrentContent());
+        return {
+          [config.path]: rawContentState
+        };
+      } catch (err) {
+        console.error(err);
+        return {
+          [config.path]: null
+        };
+      }
+    }
+  };
+};
+
+exports.controller = controller;

package/lib/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.utils = exports.default = exports.customFields = void 0;
+
+var _manualOrderRelationship = _interopRequireDefault(require("./utils/manual-order-relationship"));
+
+var _draftConverter = _interopRequireDefault(require("@kids-reporter/draft-editor/lib/draft-converter"));
+
+var _richTextEditor = require("./custom-fields/rich-text-editor");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const customFields = {
+  draftConverter: _draftConverter.default,
+  richTextEditor: _richTextEditor.richTextEditor
+};
+exports.customFields = customFields;
+const utils = {
+  addManualOrderRelationshipFields: _manualOrderRelationship.default
+};
+exports.utils = utils;
+var _default = {
+  customFields,
+  utils
+};
+exports.default = _default;

package/lib/utils/manual-order-relationship.js

@@ -0,0 +1,242 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@keystone-6/core");
+
+var _fields = require("@keystone-6/core/fields");
+
+/**
+ * For `relationship` field, KeystoneJS won't take user input order into account.
+ * Therefore, after the create/update operation is done,
+ * the order of relationship items maybe not be the same order as the user input order.
+ *
+ * This function
+ * - adds monitoring fields in the list
+ * - adds virtual fields in the list. These virtual fields could return relationship items in order.
+ * - decorate `list.hooks.resolveInput` to record the user input order in the monitoring fields
+ *
+ * For example, if we have two lists like
+ *  ```
+ *  const User = {
+ *    fields: {
+ *      name: text(),
+ *    }
+ *  }
+ *
+ *  const Post = {
+ *    fields: {
+ *      title: text(),
+ *      content: text(),
+ *      authors: relationship({ref: 'User', many: true})
+ *    }
+ *  }
+ *  ```
+ *
+ *  if we want to snapshot the authors input order, we can use this function like
+ *  ```
+ *  const postList = addManualOrderRelationshipFields([
+ *    {
+ *      fieldName: 'manualOrderOfAuthors',
+ *      fieldLabel: 'authors 手動排序結果',
+ *      targetFieldName: 'authors', // the target field to record the user input order
+ *      targetListName: 'User', // relationship list name
+ *      targetListLabelField: 'name', // refer to `User.fields.name`
+ *    }
+ *  ])(Post)
+ *  ```
+ *
+ *  `addManualOrderRelationshipFields` will create another JSON field `manualOrderOfAuthors` and virtual field `authorsInInputOrder` in the list,
+ *  and decorate `list.hooks.resolveInput` to record the update/create operation,
+ *  if the operation modifies the order of the relationship field.
+ *
+ *  `authorsInInputOrder` is a virtual field, which means its value is computed on-the-fly, not stored in the database. This virtual field combines relationship field `authors` and monitoring field `manualOrderOfAuthors` to sort the authors in specific input order.
+ */
+function addManualOrderRelationshipFields(manualOrderFields = [], list) {
+  var _list$hooks;
+
+  manualOrderFields.forEach(mo => {
+    var _list$fields;
+
+    if (!((_list$fields = list.fields) !== null && _list$fields !== void 0 && _list$fields[mo.fieldName])) {
+      list.fields[mo.fieldName] = (0, _fields.json)({
+        label: mo.fieldLabel,
+        ui: {
+          itemView: {
+            fieldMode: 'read'
+          }
+        }
+      });
+    } // add virtual field definition
+
+
+    addVirtualFieldToReturnItemsInInputOrder(list, mo);
+  }); // decorate `resolveInput` hook
+
+  list.hooks = list.hooks || {};
+  const originResolveInput = (_list$hooks = list.hooks) === null || _list$hooks === void 0 ? void 0 : _list$hooks.resolveInput;
+
+  list.hooks.resolveInput = async props => {
+    let resolvedData = props.resolvedData;
+
+    if (typeof originResolveInput === 'function') {
+      resolvedData = await originResolveInput(props);
+    }
+
+    const {
+      item,
+      context
+    } = props; // check if create/update item has the fields
+    // we want to monitor
+
+    for (let i = 0; i < manualOrderFields.length; i++) {
+      var _resolvedData;
+
+      const {
+        targetFieldName,
+        fieldName,
+        targetListName,
+        targetListLabelField
+      } = manualOrderFields[i]; // if create/update operation creates/modifies the `${targetFieldName}` field
+
+      if ((_resolvedData = resolvedData) !== null && _resolvedData !== void 0 && _resolvedData[targetFieldName]) {
+        var _resolvedData$targetF3, _resolvedData$targetF4;
+
+        let currentOrder = []; // update operation due to `item` not being `undefiend`
+
+        if (item) {
+          var _resolvedData$targetF, _resolvedData$targetF2;
+
+          const previousOrder = Array.isArray(item[fieldName]) ? item[fieldName] : []; // user disconnects/removes some relationship items.
+
+          const disconnectIds = ((_resolvedData$targetF = resolvedData[targetFieldName]) === null || _resolvedData$targetF === void 0 ? void 0 : (_resolvedData$targetF2 = _resolvedData$targetF.disconnect) === null || _resolvedData$targetF2 === void 0 ? void 0 : _resolvedData$targetF2.map(obj => obj.id.toString())) || []; // filtered out to-be-disconnected relationship items
+
+          currentOrder = previousOrder.filter(({
+            id
+          }) => {
+            return disconnectIds.indexOf(id) === -1;
+          });
+        } // user connects/adds some relationship item.
+
+
+        const connectedIds = ((_resolvedData$targetF3 = resolvedData[targetFieldName]) === null || _resolvedData$targetF3 === void 0 ? void 0 : (_resolvedData$targetF4 = _resolvedData$targetF3.connect) === null || _resolvedData$targetF4 === void 0 ? void 0 : _resolvedData$targetF4.map(obj => obj.id.toString())) || [];
+
+        if (connectedIds.length > 0) {
+          // Query relationship items from the database.
+          // Therefore, we can have other fields to record in the monitoring field
+          const sfToConnect = await context.db[targetListName].findMany({
+            where: {
+              id: {
+                in: connectedIds
+              }
+            }
+          }); // Database query results are not sorted.
+          // We need to sort them by ourselves.
+
+          for (let i = 0; i < connectedIds.length; i++) {
+            const sf = sfToConnect.find(obj => {
+              return `${obj.id}` === connectedIds[i];
+            });
+
+            if (sf) {
+              currentOrder.push({
+                id: sf.id.toString(),
+                [targetListLabelField]: sf[targetListLabelField]
+              });
+            }
+          }
+        } // records the order in the monitoring field
+
+
+        resolvedData[fieldName] = currentOrder;
+      }
+    }
+
+    return resolvedData;
+  };
+
+  return list;
+}
+/**
+ *  This functiona adds the virtual field onto Keystone6 `list` object.
+ *  For instance, if we want to use monitoring field `manualOrderOfAuthors`
+ *  to monitor relationship field `authors` in the `post` list object.
+ *
+ *  We could write
+ *  ```
+ *    addVirtualFieldToReturnItemsInInputOrder(post, {
+ *      fieldName: 'manualOrderOfAuthors', // monitoring field
+ *      targetFieldName: 'authors', // monitored field
+ *      targetListName: 'Author' // relationship list
+ *    })
+ *  ```
+ *  after executing,
+ *  `post` list will have `authorsInInputOrder` virtual field.
+ *
+ *  Return value of this virtual field will follow
+ *  `graphql.list(lists.Author.types.output)` GraphQL schema.
+ *
+ *  And the GQL resolver will be defined in `resolve` function.
+ */
+
+
+function addVirtualFieldToReturnItemsInInputOrder(list, manualOrderField) {
+  const virtualFieldName = `${manualOrderField.targetFieldName}InInputOrder`;
+  list.fields[virtualFieldName] = (0, _fields.virtual)({
+    field: lists => {
+      var _lists$manualOrderFie;
+
+      return _core.graphql.field({
+        type: _core.graphql.list(lists === null || lists === void 0 ? void 0 : (_lists$manualOrderFie = lists[manualOrderField.targetListName]) === null || _lists$manualOrderFie === void 0 ? void 0 : _lists$manualOrderFie.types.output),
+
+        async resolve(item, args, context) {
+          var _context$db;
+
+          const manualOrderFieldValue = (item === null || item === void 0 ? void 0 : item[manualOrderField.fieldName]) || [];
+
+          if (!Array.isArray(manualOrderFieldValue)) {
+            return [];
+          } // collect ids from relationship items
+
+
+          const ids = manualOrderFieldValue.map(value => value.id); // query items from database
+
+          const unorderedItems = await ((_context$db = context.db) === null || _context$db === void 0 ? void 0 : _context$db[manualOrderField.targetListName].findMany({
+            where: {
+              id: {
+                in: ids
+              }
+            }
+          }));
+          const orderedItems = []; // sort items according to input order
+
+          manualOrderFieldValue.forEach(value => {
+            const writer = unorderedItems.find(ui => `${ui === null || ui === void 0 ? void 0 : ui.id}` === `${value === null || value === void 0 ? void 0 : value.id}`);
+
+            if (writer) {
+              orderedItems.push(writer);
+            }
+          });
+          return orderedItems;
+        }
+
+      });
+    },
+    ui: {
+      // keystone somehow needs `ui.query` even we "hidden" the field in the next two lines.
+      query: `{ id, ${manualOrderField.targetFieldName} }`,
+      itemView: {
+        fieldMode: 'hidden'
+      },
+      createView: {
+        fieldMode: 'hidden'
+      }
+    }
+  });
+}
+
+var _default = addManualOrderRelationshipFields;
+exports.default = _default;

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@kids-reporter/cms-core",
+  "version": "0.1.0",
+  "description": "",
+  "main": "lib/index.js",
+  "types": "src/index.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "make build",
+    "clean": "make clean"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kids-reporter/cms.git",
+    "directory": "packages/core"
+  },
+  "keywords": [
+    "KeystoneJS",
+    "Keystone 6",
+    "CMS",
+    "Content Management System",
+    "Rich text editor",
+    "react",
+    "draft-js"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "@keystone-6/core": "5.2.0"
+  },
+  "dependencies": {
+    "@google-cloud/storage": "^5.18.0",
+    "@keystone-ui/button": "^7.0.2",
+    "@keystone-ui/fields": "^7.2.0",
+    "@keystone-ui/modals": "^6.0.3",
+    "@twreporter/errors": "^1.1.1",
+    "@kids-reporter/draft-editor": "0.1.0",
+    "axios": "^0.26.0",
+    "draft-convert": "^2.1.12",
+    "draft-js": "^0.11.7",
+    "htmlparser2": "^7.2.0",
+    "immutable": "^4.0.0",
+    "lodash": "^4.17.21",
+    "shortid": "^2.2.16",
+    "styled-components": "5.3.5",
+    "zlib": "^1.0.5"
+  },
+  "files": [
+    "lib",
+    "src",
+    "types"
+  ]
+}

package/src/custom-fields/rich-text-editor/index.ts

@@ -0,0 +1,62 @@
+import {
+  BaseListTypeInfo,
+  JSONValue,
+  FieldTypeFunc,
+  CommonFieldConfig,
+  jsonFieldTypePolyfilledForSQLite,
+} from '@keystone-6/core/types'
+import { graphql } from '@keystone-6/core'
+
+export type JsonFieldConfig<
+  ListTypeInfo extends BaseListTypeInfo
+> = CommonFieldConfig<ListTypeInfo> & {
+  defaultValue?: JSONValue
+  db?: { map?: string }
+  disabledButtons: string[]
+}
+
+export const richTextEditor = <ListTypeInfo extends BaseListTypeInfo>({
+  defaultValue = null,
+  disabledButtons = [],
+  ...config
+}: JsonFieldConfig<ListTypeInfo> = {}): FieldTypeFunc<ListTypeInfo> => (
+  meta
+) => {
+  if ((config as any).isIndexed === 'unique') {
+    throw Error(
+      "isIndexed: 'unique' is not a supported option for field type textEditor"
+    )
+  }
+
+  const resolve = (val: JSONValue | undefined) =>
+    val === null && meta.provider === 'postgresql' ? 'DbNull' : val
+
+  return jsonFieldTypePolyfilledForSQLite(
+    meta.provider,
+    {
+      ...config,
+      input: {
+        create: {
+          arg: graphql.arg({ type: graphql.JSON }),
+          resolve(val) {
+            return resolve(val === undefined ? defaultValue : val)
+          },
+        },
+        update: { arg: graphql.arg({ type: graphql.JSON }), resolve },
+      },
+      output: graphql.field({ type: graphql.JSON }),
+      views: `@kids-reporter/cms-core/lib/custom-fields/rich-text-editor/views/index`,
+      getAdminMeta: () => ({ defaultValue, disabledButtons }),
+    },
+    {
+      default:
+        defaultValue === null
+          ? undefined
+          : {
+              kind: 'literal',
+              value: JSON.stringify(defaultValue),
+            },
+      map: config.db?.map,
+    }
+  )
+}

package/src/custom-fields/rich-text-editor/views/index.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import { jsx, Stack } from '@keystone-ui/core'; // eslint-disable-line
+import { FieldContainer, FieldLabel } from '@keystone-ui/fields'
+import {
+  CardValueComponent,
+  CellComponent,
+  FieldController,
+  FieldControllerConfig,
+  FieldProps,
+  JSONValue,
+} from '@keystone-6/core/types'
+import { CellContainer, CellLink } from '@keystone-6/core/admin-ui/components'
+import { EditorState, convertFromRaw, convertToRaw } from 'draft-js'
+// import { RichTextEditor, decorators } from '@mirrormedia/lilith-draft-editor'
+import de from '@kids-reporter/draft-editor'
+
+const { RichTextEditor, decorators } = de.DraftEditor
+export const Field = ({
+  field,
+  value,
+  onChange,
+  autoFocus, // eslint-disable-line
+}: FieldProps<typeof controller>) => {
+  return (
+    <FieldContainer>
+      <FieldLabel>
+        {field.label}
+        <Stack>
+          <RichTextEditor
+            disabledButtons={field.disabledButtons}
+            editorState={value}
+            onChange={(editorState) => onChange?.(editorState)}
+          />
+        </Stack>
+      </FieldLabel>
+    </FieldContainer>
+  )
+}
+
+export const Cell: CellComponent = ({ item, field, linkTo }) => {
+  const value = item[field.path] + ''
+  return linkTo ? (
+    <CellLink {...linkTo}>{value}</CellLink>
+  ) : (
+    <CellContainer>{value}</CellContainer>
+  )
+}
+Cell.supportsLinkTo = true
+
+export const CardValue: CardValueComponent = ({ item, field }) => {
+  return (
+    <FieldContainer>
+      <FieldLabel>{field.label}</FieldLabel>
+      {item[field.path]}
+    </FieldContainer>
+  )
+}
+
+export const controller = (
+  config: FieldControllerConfig<{ disabledButtons: string[] }>
+): FieldController<EditorState, JSONValue> & { disabledButtons: string[] } => {
+  return {
+    disabledButtons: config.fieldMeta?.disabledButtons ?? [],
+    path: config.path,
+    label: config.label,
+    graphqlSelection: config.path,
+    defaultValue: EditorState.createEmpty(decorators),
+    deserialize: (data) => {
+      const rawContentState = data[config.path]
+      if (rawContentState === null) {
+        return EditorState.createEmpty(decorators)
+      }
+      try {
+        const contentState = convertFromRaw(rawContentState)
+        const editorState = EditorState.createWithContent(
+          contentState,
+          decorators
+        )
+        return editorState
+      } catch (err) {
+        console.error(err)
+        return EditorState.createEmpty(decorators)
+      }
+    },
+    serialize: (editorState: EditorState) => {
+      if (!editorState) {
+        return { [config.path]: null }
+      }
+
+      try {
+        const rawContentState = convertToRaw(editorState.getCurrentContent())
+        return {
+          [config.path]: rawContentState,
+        }
+      } catch (err) {
+        console.error(err)
+        return { [config.path]: null }
+      }
+    },
+  }
+}

package/src/index.ts

@@ -0,0 +1,17 @@
+import addManualOrderRelationshipFields from './utils/manual-order-relationship'
+import draftConverter from '@kids-reporter/draft-editor/lib/draft-converter'
+import { richTextEditor } from './custom-fields/rich-text-editor'
+
+export const customFields = {
+  draftConverter,
+  richTextEditor,
+}
+
+export const utils = {
+  addManualOrderRelationshipFields,
+}
+
+export default {
+  customFields,
+  utils,
+}

package/src/utils/manual-order-relationship.ts

@@ -0,0 +1,233 @@
+import { BaseItem } from '@keystone-6/core/types'
+import { ListConfig, graphql } from '@keystone-6/core'
+import { json, virtual } from '@keystone-6/core/fields'
+
+type ManualOrderFieldConfig = {
+  fieldName: string
+  fieldLabel?: string
+  targetFieldName: string
+  targetListName: string
+  targetListLabelField: string
+}
+
+/**
+ * For `relationship` field, KeystoneJS won't take user input order into account.
+ * Therefore, after the create/update operation is done,
+ * the order of relationship items maybe not be the same order as the user input order.
+ *
+ * This function
+ * - adds monitoring fields in the list
+ * - adds virtual fields in the list. These virtual fields could return relationship items in order.
+ * - decorate `list.hooks.resolveInput` to record the user input order in the monitoring fields
+ *
+ * For example, if we have two lists like
+ *  ```
+ *  const User = {
+ *    fields: {
+ *      name: text(),
+ *    }
+ *  }
+ *
+ *  const Post = {
+ *    fields: {
+ *      title: text(),
+ *      content: text(),
+ *      authors: relationship({ref: 'User', many: true})
+ *    }
+ *  }
+ *  ```
+ *
+ *  if we want to snapshot the authors input order, we can use this function like
+ *  ```
+ *  const postList = addManualOrderRelationshipFields([
+ *    {
+ *      fieldName: 'manualOrderOfAuthors',
+ *      fieldLabel: 'authors 手動排序結果',
+ *      targetFieldName: 'authors', // the target field to record the user input order
+ *      targetListName: 'User', // relationship list name
+ *      targetListLabelField: 'name', // refer to `User.fields.name`
+ *    }
+ *  ])(Post)
+ *  ```
+ *
+ *  `addManualOrderRelationshipFields` will create another JSON field `manualOrderOfAuthors` and virtual field `authorsInInputOrder` in the list,
+ *  and decorate `list.hooks.resolveInput` to record the update/create operation,
+ *  if the operation modifies the order of the relationship field.
+ *
+ *  `authorsInInputOrder` is a virtual field, which means its value is computed on-the-fly, not stored in the database. This virtual field combines relationship field `authors` and monitoring field `manualOrderOfAuthors` to sort the authors in specific input order.
+ */
+function addManualOrderRelationshipFields(
+  manualOrderFields: ManualOrderFieldConfig[] = [],
+  list: ListConfig<any, any>
+) {
+  manualOrderFields.forEach((mo) => {
+    if (!list.fields?.[mo.fieldName]) {
+      list.fields[mo.fieldName] = json({
+        label: mo.fieldLabel,
+        ui: {
+          itemView: {
+            fieldMode: 'read',
+          },
+        },
+      })
+    }
+
+    // add virtual field definition
+    addVirtualFieldToReturnItemsInInputOrder(list, mo)
+  })
+
+  // decorate `resolveInput` hook
+  list.hooks = list.hooks || {}
+  const originResolveInput = list.hooks?.resolveInput
+  list.hooks.resolveInput = async (props) => {
+    let resolvedData = props.resolvedData
+
+    if (typeof originResolveInput === 'function') {
+      resolvedData = await originResolveInput(props)
+    }
+
+    const { item, context } = props
+
+    // check if create/update item has the fields
+    // we want to monitor
+    for (let i = 0; i < manualOrderFields.length; i++) {
+      const {
+        targetFieldName,
+        fieldName,
+        targetListName,
+        targetListLabelField,
+      } = manualOrderFields[i]
+
+      // if create/update operation creates/modifies the `${targetFieldName}` field
+      if (resolvedData?.[targetFieldName]) {
+        let currentOrder: { id: string }[] = []
+
+        // update operation due to `item` not being `undefiend`
+        if (item) {
+          const previousOrder: { id: string }[] = Array.isArray(item[fieldName])
+            ? item[fieldName]
+            : []
+
+          // user disconnects/removes some relationship items.
+          const disconnectIds =
+            resolvedData[
+              targetFieldName
+            ]?.disconnect?.map((obj: { id: number }) => obj.id.toString()) || []
+
+          // filtered out to-be-disconnected relationship items
+          currentOrder = previousOrder.filter(({ id }: { id: string }) => {
+            return disconnectIds.indexOf(id) === -1
+          })
+        }
+
+        // user connects/adds some relationship item.
+        const connectedIds =
+          resolvedData[targetFieldName]?.connect?.map((obj: { id: number }) =>
+            obj.id.toString()
+          ) || []
+
+        if (connectedIds.length > 0) {
+          // Query relationship items from the database.
+          // Therefore, we can have other fields to record in the monitoring field
+          const sfToConnect = await context.db[targetListName].findMany({
+            where: { id: { in: connectedIds } },
+          })
+
+          // Database query results are not sorted.
+          // We need to sort them by ourselves.
+          for (let i = 0; i < connectedIds.length; i++) {
+            const sf = sfToConnect.find((obj) => {
+              return `${obj.id}` === connectedIds[i]
+            })
+            if (sf) {
+              currentOrder.push({
+                id: sf.id.toString(),
+                [targetListLabelField]: sf[targetListLabelField],
+              })
+            }
+          }
+        }
+
+        // records the order in the monitoring field
+        resolvedData[fieldName] = currentOrder
+      }
+    }
+    return resolvedData
+  }
+  return list
+}
+
+/**
+ *  This functiona adds the virtual field onto Keystone6 `list` object.
+ *  For instance, if we want to use monitoring field `manualOrderOfAuthors`
+ *  to monitor relationship field `authors` in the `post` list object.
+ *
+ *  We could write
+ *  ```
+ *    addVirtualFieldToReturnItemsInInputOrder(post, {
+ *      fieldName: 'manualOrderOfAuthors', // monitoring field
+ *      targetFieldName: 'authors', // monitored field
+ *      targetListName: 'Author' // relationship list
+ *    })
+ *  ```
+ *  after executing,
+ *  `post` list will have `authorsInInputOrder` virtual field.
+ *
+ *  Return value of this virtual field will follow
+ *  `graphql.list(lists.Author.types.output)` GraphQL schema.
+ *
+ *  And the GQL resolver will be defined in `resolve` function.
+ */
+function addVirtualFieldToReturnItemsInInputOrder(
+  list: ListConfig<any, any>,
+  manualOrderField: ManualOrderFieldConfig
+) {
+  const virtualFieldName = `${manualOrderField.targetFieldName}InInputOrder`
+  list.fields[virtualFieldName] = virtual({
+    field: (lists) => {
+      return graphql.field({
+        type: graphql.list(
+          lists?.[manualOrderField.targetListName]?.types.output
+        ),
+        async resolve(item: Record<string, unknown>, args, context) {
+          const manualOrderFieldValue = item?.[manualOrderField.fieldName] || []
+          if (!Array.isArray(manualOrderFieldValue)) {
+            return []
+          }
+
+          // collect ids from relationship items
+          const ids = manualOrderFieldValue.map((value) => value.id)
+
+          // query items from database
+          const unorderedItems = await context.db?.[
+            manualOrderField.targetListName
+          ].findMany({
+            where: { id: { in: ids } },
+          })
+
+          const orderedItems: BaseItem[] = []
+
+          // sort items according to input order
+          manualOrderFieldValue.forEach((value) => {
+            const writer = unorderedItems.find(
+              (ui) => `${ui?.id}` === `${value?.id}`
+            )
+            if (writer) {
+              orderedItems.push(writer)
+            }
+          })
+
+          return orderedItems
+        },
+      })
+    },
+    ui: {
+      // keystone somehow needs `ui.query` even we "hidden" the field in the next two lines.
+      query: `{ id, ${manualOrderField.targetFieldName} }`,
+      itemView: { fieldMode: 'hidden' },
+      createView: { fieldMode: 'hidden' },
+    },
+  })
+}
+
+export default addManualOrderRelationshipFields