@kids-reporter/draft-editor 0.1.0

package/lib/entity-decorator.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _draftJs = require("draft-js");
+
+var _draftRenderer = _interopRequireDefault(require("@kids-reporter/draft-renderer"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const {
+  annotationDecorator,
+  linkDecorator
+} = _draftRenderer.default.entityDecorators;
+const decorators = new _draftJs.CompositeDecorator([annotationDecorator, linkDecorator]);
+var _default = decorators;
+exports.default = _default;

package/lib/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _draftEditor = _interopRequireDefault(require("./draft-editor"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  DraftEditor: _draftEditor.default
+};
+exports.default = _default;

package/lib/modifier.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Modifier = void 0;
+
+var _draftJs = require("draft-js");
+
+var _immutable = require("immutable");
+
+const Modifier = { ..._draftJs.Modifier
+};
+/* 
+    This method is specified for custom inline style such as 'FONT_COLOR_#ffffff'.
+    For this kind of inline style there may be more than one style name 'FONT_COLOR_#ffffff', 'FONT_COLOR_#000000'.
+    To prevent any nested specific inline style got rendered after the outer inline style being removed, 
+    clear all specific inline styles when custom inline style is applied or removed.
+
+    Since getCurrentInlineStyle only return the inline style the starting position contains,
+    loop through all char of blocks to remove all nested inline styles.
+
+    Reference: https://github.com/facebook/draft-js/blob/main/src/model/transaction/ContentStateInlineStyle.js#L39-L88
+  */
+
+exports.Modifier = Modifier;
+
+Modifier.removeInlineStyleByPrefix = (contentState, selectionState, inlineStylePrefix) => {
+  const blockMap = contentState.getBlockMap();
+  const startKey = selectionState.getStartKey();
+  const startOffset = selectionState.getStartOffset();
+  const endKey = selectionState.getEndKey();
+  const endOffset = selectionState.getEndOffset(); // loop through all selected blocks and every block chars to remove specific inline style
+
+  const newBlocks = blockMap.skipUntil((_, k) => k === startKey).takeUntil((_, k) => k === endKey).concat((0, _immutable.Map)([[endKey, blockMap.get(endKey)]])).map((block, blockKey) => {
+    let sliceStart;
+    let sliceEnd;
+
+    if (startKey === endKey) {
+      sliceStart = startOffset;
+      sliceEnd = endOffset;
+    } else {
+      sliceStart = blockKey === startKey ? startOffset : 0;
+      sliceEnd = blockKey === endKey ? endOffset : block.getLength();
+    }
+
+    let chars = block.getCharacterList();
+    let current;
+
+    while (sliceStart < sliceEnd) {
+      current = chars.get(sliceStart);
+      const inlineStyle = current.getStyle().find(styleName => styleName.startsWith(inlineStylePrefix));
+
+      if (inlineStyle) {
+        chars = chars.set(sliceStart, _draftJs.CharacterMetadata.removeStyle(current, inlineStyle));
+      }
+
+      sliceStart++;
+    }
+
+    return block.set('characterList', chars);
+  });
+  return contentState.merge({
+    blockMap: blockMap.merge(newBlocks),
+    selectionBefore: selectionState,
+    selectionAfter: selectionState
+  });
+};

package/lib/theme/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.theme = exports.mediaSize = exports.default = void 0;
+const mediaSize = {
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 960,
+  xl: 1200,
+  xxl: 1400
+};
+exports.mediaSize = mediaSize;
+const theme = {
+  breakpoint: {
+    xs: `@media (min-width: ${mediaSize.xs}px)`,
+    sm: `@media (min-width: ${mediaSize.sm}px)`,
+    md: `@media (min-width: ${mediaSize.md}px)`,
+    lg: `@media (min-width: ${mediaSize.lg}px)`,
+    xl: `@media (min-width: ${mediaSize.xl}px)`,
+    xxl: `@media (min-width: ${mediaSize.xxl}px)`
+  },
+  fontSize: {
+    xs: 'font-size: 14px;',
+    sm: 'font-size: 16px;',
+    md: 'font-size: 18px;',
+    lg: 'font-size: 24px;',
+    xl: 'font-size: 28px;'
+  },
+  margin: {
+    default: 'margin: 32px auto;',
+    narrow: 'margin: 16px auto;'
+  }
+};
+exports.theme = theme;
+var _default = theme;
+exports.default = _default;

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@kids-reporter/draft-editor",
+  "version": "0.1.0",
+  "description": "",
+  "main": "lib/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "make dev",
+    "build": "make build",
+    "clean": "make clean",
+    "build-lib": "make build-lib"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/@kids-reporter/cms.git",
+    "directory": "packages/draft-editor"
+  },
+  "keywords": [
+    "react",
+    "readr",
+    "draft.js",
+    "draft.js buttons"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "draft-js": "^0.11.7",
+    "@kids-reporter/draft-renderer": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "styled-components": "5.3.5",
+    "@keystone-6/core": "5.2.0",
+    "@keystone-ui/button": "^7.0.2",
+    "@keystone-ui/fields": "^7.2.0",
+    "@keystone-ui/modals": "^6.0.3"
+  },
+  "files": [
+    "lib"
+  ]
+}