@kids-reporter/draft-renderer 0.1.0 → 0.2.0

package/lib/draft-renderer.js

@@ -3,127 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = DraftRenderer;
-
-var _draftJs = require("draft-js");
+exports.DraftRenderer = DraftRenderer;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _const = require("./const");
+var _draftJs = require("draft-js");
 
 var _blockRendererFn = require("./block-renderer-fn");
 
-var _entityDecorator = _interopRequireDefault(require("./entity-decorator"));
-
-var _contentType = require("./shared-style/content-type");
-
-var _index = require("./shared-style/index");
-
-var _theme = _interopRequireDefault(require("./theme"));
+var _blockRenderMap = require("./block-render-map");
 
-var _types = require("./types");
-
-var _common = require("./utils/common");
-
-var _post = require("./utils/post");
-
-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; }
+var _index = require("./entity-decorators/index");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const DraftEditorWrapper = _styledComponents.default.div`
-  /* Rich-editor default setting (.RichEditor-root)*/
-  font-family: 'Georgia', serif;
-  text-align: left;
-
-  /* Custom setting */
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  width: 100%;
-  height: 100%;
-  letter-spacing: 0.01em;
-  color: rgba(0, 9, 40, 0.87);
-
-  *:has(.bg) + *:has(.bg) {
-    section {
-      margin-top: 0 !important;
-    }
-  }
-
-  /* Draft built-in buttons' style */
-  .public-DraftStyleDefault-header-two {
-    ${_index.defaultH2Style}
-
-    & + * {
-      ${_index.narrowSpacingBetweenContent}
-    }
-  }
-
-  .public-DraftStyleDefault-ul {
-    ${_index.defaultUlStyle}
-  }
-
-  .public-DraftStyleDefault-ol {
-    ${_index.defaultOlStyle}
-  }
-
-  /* code-block */
-  .public-DraftStyleDefault-pre {
-    overflow: hidden;
-  }
-
-  .alignCenter * {
-    text-align: center;
-  }
-  .alignLeft * {
-    text-align: left;
-  }
-
-  /* image-block: text-around-picture */
-  figure.left {
-    ${({
-  theme
-}) => theme.breakpoint.xl} {
-      ${_index.textAroundPictureStyle};
-      float: left;
-      transform: translateX(calc(-50% - 32px));
-    }
-  }
-
-  figure.right {
-    ${({
-  theme
-}) => theme.breakpoint.xl} {
-      ${_index.textAroundPictureStyle};
-      float: right;
-      transform: translateX(32px);
-    }
-  }
-
-  ${({
-  contentType
-}) => {
-  switch (contentType) {
-    case _types.ValidPostContentType.NORMAL:
-    case _types.ValidPostContentType.ACTIONLIST:
-      return _contentType.NormalStyle;
-
-    case _types.ValidPostContentType.SUMMARY:
-      return _contentType.SummaryStyle;
-
-    case _types.ValidPostContentType.CITATION:
-      return _contentType.CitationStyle;
-
-    default:
-      return _contentType.NormalStyle;
-  }
-}}
-`;
 const customStyleMap = {
   CODE: {
     backgroundColor: 'rgba(0, 0, 0, 0.05)',
@@ -133,102 +26,25 @@ const customStyleMap = {
   }
 };
 
-const customStyleFn = style => {
-  return style.reduce((styles, styleName) => {
-    if (styleName !== null && styleName !== void 0 && styleName.startsWith(_const.CUSTOM_STYLE_PREFIX_FONT_COLOR)) {
-      styles['color'] = styleName.split(_const.CUSTOM_STYLE_PREFIX_FONT_COLOR)[1];
-    }
-
-    if (styleName !== null && styleName !== void 0 && styleName.startsWith(_const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR)) {
-      const highlightColor = styleName.split(_const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR)[1];
-      styles['background'] = `linear-gradient(to top, transparent 25%, ${highlightColor} 25% 75%, transparent 75%)`;
-    }
-
-    return styles;
-  }, {});
-};
-
-const blockStyleFn = (editorState, block) => {
-  var _entity$getData;
-
-  const entityKey = block.getEntityAt(0);
-  const entity = entityKey ? editorState.getCurrentContent().getEntity(entityKey) : null;
-  let result = '';
-  const blockData = block.getData();
-
-  if (blockData) {
-    const textAlign = blockData === null || blockData === void 0 ? void 0 : blockData.get('textAlign');
-
-    if (textAlign === 'center') {
-      result += 'alignCenter ';
-    } else if (textAlign === 'left') {
-      result += 'alignLeft ';
-    }
-  }
-
-  switch (block.getType()) {
-    case 'header-two':
-    case 'header-three':
-    case 'header-four':
-    case 'blockquote':
-      result += 'public-DraftStyleDefault-' + block.getType();
-      break;
-
-    case 'atomic':
-      if ((_entity$getData = entity.getData()) !== null && _entity$getData !== void 0 && _entity$getData.alignment) {
-        // support all atomic block to set alignment
-        result += ' ' + entity.getData().alignment;
-      }
-
-      break;
-
-    default:
-      break;
-  }
-
-  return result;
-};
-
 const blockRendererFn = block => {
   const atomicBlockObj = (0, _blockRendererFn.atomicBlockRenderer)(block);
   return atomicBlockObj;
 };
 
 function DraftRenderer({
-  rawContentBlock,
-  insertRecommend = [],
-  contentType = _types.ValidPostContentType.NORMAL
+  rawContentBlock
 }) {
-  //if `rawContentBlock` has no data, throw error
-  if (!rawContentBlock || !rawContentBlock.blocks || !rawContentBlock.blocks.length) {
-    throw new Error('There is no content in rawContentBlock, please check again.');
-  }
-
-  let contentState; //if `rawContentBlock` data need to insert recommends, use `insertRecommendInContent` utils
-
-  if (insertRecommend.length) {
-    const contentWithRecommend = (0, _post.insertRecommendInContentBlock)(rawContentBlock, insertRecommend);
-    contentState = (0, _draftJs.convertFromRaw)(contentWithRecommend);
-  } else {
-    //if `rawContentBlock` data has no recommends, only remove empty content blocks
-    const contentRemoveEmpty = (0, _common.removeEmptyContentBlock)(rawContentBlock);
-    contentState = (0, _draftJs.convertFromRaw)(contentRemoveEmpty);
-  }
+  const contentState = (0, _draftJs.convertFromRaw)(rawContentBlock);
 
-  const editorState = _draftJs.EditorState.createWithContent(contentState, _entityDecorator.default);
+  const editorState = _draftJs.EditorState.createWithContent(contentState, _index.decorators);
 
-  return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
-    theme: _theme.default
-  }, /*#__PURE__*/_react.default.createElement(DraftEditorWrapper, {
-    contentType: contentType
-  }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
+  return /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
     editorState: editorState,
     customStyleMap: customStyleMap,
-    blockStyleFn: blockStyleFn.bind(null, editorState),
+    blockRenderMap: _blockRenderMap.blockRenderMap,
     blockRendererFn: blockRendererFn,
-    customStyleFn: customStyleFn,
     readOnly: true // eslint-disable-next-line @typescript-eslint/no-empty-function
     ,
     onChange: () => {}
-  })));
+  });
 }

package/lib/entity-decorators/annotation-decorator.js

@@ -9,7 +9,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _sharedStyle = require("../shared-style");
+var _draftJs = require("draft-js");
+
+var _blockRenderMap = require("../block-render-map");
+
+var _index = require("../entity-decorators/index");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -17,128 +21,82 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 annotationArrow = "https://unpkg.com/@kids-reporter/draft-renderer@0.1.0/lib/public/07d1287fd390346af0c15b930148a5e4.png";
-const annotationDefaultSpacing = 8;
-const AnnotationText = _styledComponents.default.span`
-  ${_sharedStyle.defaultLinkStyle};
-`;
 const AnnotationWrapper = _styledComponents.default.span`
   display: inline-block;
   cursor: pointer;
-
-  &:hover ${AnnotationText} {
-    border-bottom: 2px solid #04295e;
-  }
+  color: #27b5f7;
 `;
 const AnnotationBody = _styledComponents.default.div`
-  border-radius: 2px;
-  background-color: #f6f6fb;
-  padding: 12px 24px;
-  margin: 8px 0 32px;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.6;
+  margin-bottom: 10px;
+  border-top: 2px solid #27b5f7;
+  background-color: #fff;
+  padding: 25px 25px;
+`;
+const ArrowIcon = _styledComponents.default.span`
+  margin-left: 3px;
   display: inline-block;
-  text-align: left;
-  width: 100%;
-  color: rgba(0, 9, 40, 0.87);
-
-  ${({
-  theme
-}) => theme.breakpoint.md} {
-    padding: 16px 32px;
+  vertical-align: middle;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border-width: 1px;
+  border-style: solid;
+  position: relative;
+  top: -1px;
+
+  &::before {
+    background-color: #27b5f7;
+    content: '';
+    width: 2px;
+    height: 6.5px;
+    top: 5px;
+    right: 5px;
+    transform: ${props => props.$showContent ? 'rotate(45deg)' : 'rotate(-45deg)'};
+    display: block;
+    position: absolute;
+    transition: transform 200ms ease 0s;
   }
 
-  > * + * {
-    margin: ${annotationDefaultSpacing}px 0 0;
-    min-height: 0.01px; //to make margins between paragraphs effective
-  }
-
-  h2 {
-    ${_sharedStyle.defaultH2Style}
-  }
-
-  ul {
-    ${_sharedStyle.defaultUlStyle}
-    margin-top: ${annotationDefaultSpacing}px;
-
-    > li {
-      ${_sharedStyle.defaultUnorderedListStyle}
-    }
-  }
-
-  ol {
-    ${_sharedStyle.defaultOlStyle}
-    margin-top: ${annotationDefaultSpacing}px;
-
-    > li {
-      ${_sharedStyle.defaultOrderedListStyle}
-    }
-  }
-
-  a {
-    ${_sharedStyle.defaultLinkStyle}
-  }
-
-  blockquote {
-    ${_sharedStyle.defaultBlockQuoteStyle}
+  &::after {
+    background-color: #27b5f7;
+    content: '';
+    width: 2px;
+    height: 6.5px;
+    top: 5px;
+    left: 5px;
+    transform: ${props => props.$showContent ? 'rotate(-45deg)' : 'rotate(45deg)'};
+    display: block;
+    position: absolute;
+    transition: transform 200ms ease 0s;
   }
 `;
-const ArrowIcon = _styledComponents.default.span`
-  width: 24px;
-  height: 24px;
-  background-image: url(${annotationArrow});
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: 24px;
-  margin: auto 4px;
-  transition: transform 0.3s;
-  display: inline-flex;
-  vertical-align: text-top;
-  transform: ${props => props.showContent ? 'rotate(-180deg)' : ''};
-`;
 
 function AnnotationBlock(props) {
   const {
     children: annotated
   } = props;
   const [showContent, setShowContent] = (0, _react.useState)(false);
-  /**
-   * to support k5 old annotation data, check if annotation key exist
-   * k5
-   * {
-   *    text: string,
-   *     annotation: html string,
-   *     draftRawObj: DraftBlocks
-   * }
-   * k6
-   * {
-   *   bodyHTML: string,
-   *   bodyEscapedHTML: string,
-   *   rawContentState: DraftBlocks
-   * }
-   */
-
   const {
-    bodyHTML,
-    annotation
+    rawContentState
   } = props.contentState.getEntity(props.entityKey).getData();
-  const annotationBodyHtml = bodyHTML || annotation.trim();
+  const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
+
+  const editorState = _draftJs.EditorState.createWithContent(contentState, _index.decorators);
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(AnnotationWrapper, {
     onClick: e => {
       e.preventDefault();
       setShowContent(!showContent);
     }
-  }, /*#__PURE__*/_react.default.createElement(AnnotationText, {
-    className: "text"
-  }, annotated), /*#__PURE__*/_react.default.createElement(ArrowIcon, {
-    showContent: showContent
-  })), showContent ? /*#__PURE__*/_react.default.createElement(AnnotationBody, {
-    contentEditable: false,
-    dangerouslySetInnerHTML: {
-      __html: annotationBodyHtml
-    }
-  }) : null);
+  }, /*#__PURE__*/_react.default.createElement("span", null, annotated), /*#__PURE__*/_react.default.createElement(ArrowIcon, {
+    $showContent: showContent
+  })), showContent ? /*#__PURE__*/_react.default.createElement(AnnotationBody, null, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
+    editorState: editorState,
+    blockRenderMap: _blockRenderMap.blockRenderMapForAnnotation,
+    readOnly: true // eslint-disable-next-line @typescript-eslint/no-empty-function
+    ,
+    onChange: () => {}
+  })) : null);
 }
 
 function findAnnotationEntities(contentBlock, callback, contentState) {

package/lib/entity-decorators/index.js

@@ -3,14 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.entityDecorators = void 0;
+Object.defineProperty(exports, "annotationDecorator", {
+  enumerable: true,
+  get: function () {
+    return _annotationDecorator.annotationDecorator;
+  }
+});
+exports.decorators = void 0;
+Object.defineProperty(exports, "linkDecorator", {
+  enumerable: true,
+  get: function () {
+    return _linkDecorator.linkDecorator;
+  }
+});
+
+var _draftJs = require("draft-js");
 
 var _annotationDecorator = require("./annotation-decorator");
 
 var _linkDecorator = require("./link-decorator");
 
-const entityDecorators = {
-  annotationDecorator: _annotationDecorator.annotationDecorator,
-  linkDecorator: _linkDecorator.linkDecorator
-};
-exports.entityDecorators = entityDecorators;
+const decorators = new _draftJs.CompositeDecorator([_annotationDecorator.annotationDecorator, _linkDecorator.linkDecorator]);
+exports.decorators = decorators;

package/lib/entity-decorators/link-decorator.js

@@ -12,15 +12,12 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const LinkWrapper = _styledComponents.default.a`
-  display: inline;
-  border-bottom: 2px solid #ebf02c;
-  letter-spacing: 0.01em;
-  text-align: justify;
-  color: rgba(0, 9, 40, 0.87);
-  padding-bottom: 2px;
+  text-decoration: underline;
+  color: #27b5f7;
+  transition: color 0.1s ease-in;
 
   &:hover {
-    border-bottom: 2px solid #04295e;
+    color: #232323;
   }
 `;
 

package/lib/index.js

@@ -3,28 +3,53 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "DraftRenderer", {
+  enumerable: true,
+  get: function () {
+    return _draftRenderer.DraftRenderer;
+  }
+});
+Object.defineProperty(exports, "atomicBlockRenderer", {
+  enumerable: true,
+  get: function () {
+    return _blockRendererFn.atomicBlockRenderer;
+  }
+});
+Object.defineProperty(exports, "blockRenderMap", {
+  enumerable: true,
+  get: function () {
+    return _blockRenderMap.blockRenderMap;
+  }
+});
+Object.defineProperty(exports, "blockRenderers", {
+  enumerable: true,
+  get: function () {
+    return _blockRenderers.blockRenderers;
+  }
+});
+Object.defineProperty(exports, "decorators", {
+  enumerable: true,
+  get: function () {
+    return _index.decorators;
+  }
+});
 exports.default = void 0;
 
-var _blockRenderers = require("./block-renderers");
-
-var _draftRenderer = _interopRequireDefault(require("./draft-renderer"));
+var _draftRenderer = require("./draft-renderer");
 
-var _entityDecorators = require("./entity-decorators");
+var _blockRendererFn = require("./block-renderer-fn");
 
-var _common = require("./utils/common");
+var _blockRenderMap = require("./block-render-map");
 
-var _post = require("./utils/post");
+var _blockRenderers = require("./block-renderers");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _index = require("./entity-decorators/index");
 
 var _default = {
-  DraftRenderer: _draftRenderer.default,
+  DraftRenderer: _draftRenderer.DraftRenderer,
+  atomicBlockRenderer: _blockRendererFn.atomicBlockRenderer,
+  blockRenderMap: _blockRenderMap.blockRenderMap,
   blockRenderers: _blockRenderers.blockRenderers,
-  entityDecorators: _entityDecorators.entityDecorators,
-  hasContentInRawContentBlock: _common.hasContentInRawContentBlock,
-  removeEmptyContentBlock: _common.removeEmptyContentBlock,
-  getSideIndexEntityData: _post.getSideIndexEntityData,
-  insertRecommendInContentBlock: _post.insertRecommendInContentBlock,
-  getFirstBlockEntityType: _post.getFirstBlockEntityType
+  decorators: _index.decorators
 };
 exports.default = _default;

package/lib/theme/index.js

@@ -21,17 +21,6 @@ const theme = {
     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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kids-reporter/draft-renderer",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -23,9 +23,14 @@
   "license": "MIT",
   "dependencies": {
     "@readr-media/react-image": "1.6.0",
+    "@twreporter/core": "^1.10.0",
+    "babel-loader": "^8.2.5",
     "body-scroll-lock": "3.1.5",
     "draft-js": "^0.11.7",
-    "node-html-parser": "^6.1.5"
+    "html-webpack-plugin": "^5.5.0",
+    "node-html-parser": "^6.1.5",
+    "webpack": "^5.72.1",
+    "webpack-cli": "^4.9.2"
   },
   "peerDependencies": {
     "react": "18.2.0",
@@ -36,9 +41,8 @@
     "lib"
   ],
   "devDependencies": {
-    "@types/draft-js": "^0.11.10",
-    "@types/styled-components": "^5.1.26",
-    "babel-plugin-file-loader": "^2.0.0",
-    "babel-plugin-inline-react-svg": "^2.0.1"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "styled-components": "5.3.5"
   }
 }