@kids-reporter/draft-renderer 1.0.4 → 1.0.6

package/lib/draft-renderer.js

@@ -3,11 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ArticleBodyDraftRenderer = void 0;
-exports.ArticleIntroductionDraftRenderer = ArticleIntroductionDraftRenderer;
-exports.DraftRenderer = DraftRenderer;
-exports.ProjectContentDraftRenderer = ProjectContentDraftRenderer;
-var _react = _interopRequireDefault(require("react"));
+exports.ProjectContentDraftRenderer = exports.DraftRenderer = exports.ArticleIntroductionDraftRenderer = exports.ArticleBodyDraftRenderer = void 0;
+var _react = _interopRequireWildcard(require("react"));
 var _index = _interopRequireDefault(require("./block-render-maps/index"));
 var _draftJs = require("draft-js");
 var _index2 = require("./utils/index");
@@ -16,6 +13,8 @@ var _blockRendererFn = require("./block-renderer-fn");
 var _customStyleFn = require("./custom-style-fn");
 var _entityDecorators = require("./entity-decorators");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const blockRendererFn = block => {
   const atomicBlockObj = (0, _blockRendererFn.atomicBlockRenderer)(block);
   return atomicBlockObj;
@@ -25,17 +24,30 @@ var FontSizeLevel = /*#__PURE__*/function (FontSizeLevel) {
   FontSizeLevel["LARGE"] = "large";
   return FontSizeLevel;
 }(FontSizeLevel || {});
-function DraftRenderer({
+const DraftRenderer = ({
   rawContentState,
   themeColor = _index2.ThemeColorEnum.RED,
-  fontSizeLevel = FontSizeLevel.NORMAL
-}) {
+  fontSizeLevel = FontSizeLevel.NORMAL,
+  initiallyScrollTo = '',
+  offsetTop = 0
+}) => {
   const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
   const editorState = _draftJs.EditorState.createWithContent(contentState, _entityDecorators.decorator);
+  const scrollToElement = hash => {
+    const anchor = document.querySelector(hash);
+    anchor && window.scrollTo({
+      top: anchor.offsetTop - offsetTop,
+      behavior: 'instant'
+    });
+  };
+  (0, _react.useEffect)(() => {
+    initiallyScrollTo && scrollToElement(initiallyScrollTo);
+  }, []);
   return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
     theme: {
       themeColor,
-      fontSizeLevel
+      fontSizeLevel,
+      offsetTop
     }
   }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
     editorState: editorState,
@@ -47,13 +59,14 @@ function DraftRenderer({
     ,
     onChange: () => {}
   }));
-}
+};
+exports.DraftRenderer = DraftRenderer;
 const ArticleBodyDraftRenderer = exports.ArticleBodyDraftRenderer = DraftRenderer;
-function ArticleIntroductionDraftRenderer({
+const ArticleIntroductionDraftRenderer = ({
   rawContentState,
   themeColor = _index2.ThemeColorEnum.RED,
   fontSizeLevel = FontSizeLevel.NORMAL
-}) {
+}) => {
   const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
   const editorState = _draftJs.EditorState.createWithContent(contentState, _entityDecorators.decorator);
   return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
@@ -70,12 +83,13 @@ function ArticleIntroductionDraftRenderer({
     ,
     onChange: () => {}
   }));
-}
-function ProjectContentDraftRenderer({
+};
+exports.ArticleIntroductionDraftRenderer = ArticleIntroductionDraftRenderer;
+const ProjectContentDraftRenderer = ({
   rawContentState,
   themeColor = _index2.ThemeColorEnum.BLUE,
   fontSizeLevel = FontSizeLevel.NORMAL
-}) {
+}) => {
   const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
   const editorState = _draftJs.EditorState.createWithContent(contentState, _entityDecorators.decorator);
   return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
@@ -93,4 +107,5 @@ function ProjectContentDraftRenderer({
     ,
     onChange: () => {}
   }));
-}
+};
+exports.ProjectContentDraftRenderer = ProjectContentDraftRenderer;

package/lib/entity-decorators/anchor.js

@@ -3,17 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.findAnchorEntities = exports.anchorDecorator = exports.ANCHOR_ENTITY_TYPE = void 0;
+exports.anchorDecorator = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _entity = require("../utils/entity");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const ANCHOR_ENTITY_TYPE = exports.ANCHOR_ENTITY_TYPE = 'TOC_ANCHOR';
-const findAnchorEntities = (contentBlock, callback, contentState) => {
-  contentBlock.findEntityRanges(character => {
-    const entityKey = character.getEntity();
-    return entityKey !== null && contentState.getEntity(entityKey).getType() === ANCHOR_ENTITY_TYPE;
-  }, callback);
-};
-exports.findAnchorEntities = findAnchorEntities;
 const Anchor = props => {
   var _contentState$getEnti;
   const {
@@ -21,12 +14,12 @@ const Anchor = props => {
     contentState,
     entityKey
   } = props;
-  const key = contentState === null || contentState === void 0 || (_contentState$getEnti = contentState.getEntity(entityKey)) === null || _contentState$getEnti === void 0 || (_contentState$getEnti = _contentState$getEnti.getData()) === null || _contentState$getEnti === void 0 ? void 0 : _contentState$getEnti.anchorKey;
+  const id = contentState === null || contentState === void 0 || (_contentState$getEnti = contentState.getEntity(entityKey)) === null || _contentState$getEnti === void 0 || (_contentState$getEnti = _contentState$getEnti.getData()) === null || _contentState$getEnti === void 0 ? void 0 : _contentState$getEnti.anchorID;
   return /*#__PURE__*/_react.default.createElement("span", {
-    id: `anchor-${key}`
+    id: id
   }, children);
 };
 const anchorDecorator = exports.anchorDecorator = {
-  strategy: findAnchorEntities,
+  strategy: (0, _entity.findEntitiesByType)(_entity.ENTITY.Anchor),
   component: Anchor
 };

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

@@ -7,8 +7,9 @@ exports.annotationDecorator = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _draftJs = require("draft-js");
-var _index = _interopRequireDefault(require("../block-render-maps/index"));
-var _index2 = require("../entity-decorators/index");
+var _blockRenderMaps = _interopRequireDefault(require("../block-render-maps"));
+var _entityDecorators = require("../entity-decorators");
+var _entity = require("../utils/entity");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -71,7 +72,7 @@ function AnnotationBlock(props) {
     rawContentState
   } = props.contentState.getEntity(props.entityKey).getData();
   const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
-  const editorState = _draftJs.EditorState.createWithContent(contentState, _index2.decorator);
+  const editorState = _draftJs.EditorState.createWithContent(contentState, _entityDecorators.decorator);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(AnnotationWrapper, {
     onClick: e => {
       e.preventDefault();
@@ -81,20 +82,14 @@ function AnnotationBlock(props) {
     $showContent: showContent
   })), showContent ? /*#__PURE__*/_react.default.createElement(AnnotationBody, null, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
     editorState: editorState,
-    blockRenderMap: _index.default.annotation,
+    blockRenderMap: _blockRenderMaps.default.annotation,
     readOnly: true
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     ,
     onChange: () => {}
   })) : null);
 }
-function findAnnotationEntities(contentBlock, callback, contentState) {
-  contentBlock.findEntityRanges(character => {
-    const entityKey = character.getEntity();
-    return entityKey !== null && contentState.getEntity(entityKey).getType() === 'ANNOTATION';
-  }, callback);
-}
 const annotationDecorator = exports.annotationDecorator = {
-  strategy: findAnnotationEntities,
+  strategy: (0, _entity.findEntitiesByType)(_entity.ENTITY.Annotation),
   component: AnnotationBlock
 };

package/lib/entity-decorators/index.js

@@ -3,12 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "ANCHOR_ENTITY_TYPE", {
-  enumerable: true,
-  get: function () {
-    return _anchor.ANCHOR_ENTITY_TYPE;
-  }
-});
 Object.defineProperty(exports, "annotationDecorator", {
   enumerable: true,
   get: function () {
@@ -16,12 +10,6 @@ Object.defineProperty(exports, "annotationDecorator", {
   }
 });
 exports.decorator = void 0;
-Object.defineProperty(exports, "findAnchorEntities", {
-  enumerable: true,
-  get: function () {
-    return _anchor.findAnchorEntities;
-  }
-});
 Object.defineProperty(exports, "linkDecorator", {
   enumerable: true,
   get: function () {
@@ -31,5 +19,6 @@ Object.defineProperty(exports, "linkDecorator", {
 var _draftJs = require("draft-js");
 var _annotationDecorator = require("./annotation-decorator");
 var _linkDecorator = require("./link-decorator");
+var _tocAnchor = require("./toc-anchor");
 var _anchor = require("./anchor");
-const decorator = exports.decorator = new _draftJs.CompositeDecorator([_annotationDecorator.annotationDecorator, _linkDecorator.linkDecorator, _anchor.anchorDecorator]);
+const decorator = exports.decorator = new _draftJs.CompositeDecorator([_annotationDecorator.annotationDecorator, _linkDecorator.linkDecorator, _tocAnchor.tocAnchorDecorator, _anchor.anchorDecorator]);

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

@@ -5,33 +5,45 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.linkDecorator = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _entity = require("../utils/entity");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const LinkWrapper = _styledComponents.default.a`
   text-decoration: underline;
   color: #27b5f7;
   transition: color 0.1s ease-in;
+  cursor: pointer;
 
   &:hover {
     color: #232323;
   }
 `;
-function findLinkEntities(contentBlock, callback, contentState) {
-  contentBlock.findEntityRanges(character => {
-    const entityKey = character.getEntity();
-    return entityKey !== null && contentState.getEntity(entityKey).getType() === 'LINK';
-  }, callback);
-}
-const linkDecorator = exports.linkDecorator = {
-  strategy: findLinkEntities,
-  component: Link
-};
-function Link(props) {
+const Link = props => {
   const {
     url
   } = props.contentState.getEntity(props.entityKey).getData();
-  return /*#__PURE__*/_react.default.createElement(LinkWrapper, {
+  const theme = (0, _styledComponents.useTheme)();
+
+  // Handling for internal/external links, internal links start with '#'
+  const linkProps = url.match(/^#/) ? {
+    onClick: () => {
+      const anchor = document.querySelector(url);
+      if (anchor) {
+        window.scrollTo({
+          top: anchor.offsetTop - (theme === null || theme === void 0 ? void 0 : theme.offsetTop),
+          behavior: 'smooth'
+        });
+      }
+    }
+  } : {
     href: url,
-    target: "_blank"
-  }, props.children);
-}
+    target: '_blank'
+  };
+  return /*#__PURE__*/_react.default.createElement(LinkWrapper, linkProps, props.children);
+};
+const linkDecorator = exports.linkDecorator = {
+  strategy: (0, _entity.findEntitiesByType)(_entity.ENTITY.Link),
+  component: Link
+};

package/lib/entity-decorators/toc-anchor.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tocAnchorDecorator = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _entity = require("../utils/entity");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const TOCAnchor = props => {
+  var _contentState$getEnti;
+  const {
+    children,
+    contentState,
+    entityKey
+  } = props;
+  const key = contentState === null || contentState === void 0 || (_contentState$getEnti = contentState.getEntity(entityKey)) === null || _contentState$getEnti === void 0 || (_contentState$getEnti = _contentState$getEnti.getData()) === null || _contentState$getEnti === void 0 ? void 0 : _contentState$getEnti.anchorKey;
+  return /*#__PURE__*/_react.default.createElement("span", {
+    id: `toc-anchor-${key}`
+  }, children);
+};
+const tocAnchorDecorator = exports.tocAnchorDecorator = {
+  strategy: (0, _entity.findEntitiesByType)(_entity.ENTITY.TOCAnchor),
+  component: TOCAnchor
+};

package/lib/index.js

@@ -3,12 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "ANCHOR_ENTITY_TYPE", {
-  enumerable: true,
-  get: function () {
-    return _entityDecorators.ANCHOR_ENTITY_TYPE;
-  }
-});
 Object.defineProperty(exports, "ArticleBodyDraftRenderer", {
   enumerable: true,
   get: function () {
@@ -27,6 +21,12 @@ Object.defineProperty(exports, "DraftRenderer", {
     return _draftRenderer.DraftRenderer;
   }
 });
+Object.defineProperty(exports, "ENTITY", {
+  enumerable: true,
+  get: function () {
+    return _entity.ENTITY;
+  }
+});
 Object.defineProperty(exports, "ProjectContentDraftRenderer", {
   enumerable: true,
   get: function () {
@@ -59,10 +59,10 @@ Object.defineProperty(exports, "customStyleFn", {
   }
 });
 exports.default = void 0;
-Object.defineProperty(exports, "findAnchorEntities", {
+Object.defineProperty(exports, "findEntitiesByType", {
   enumerable: true,
   get: function () {
-    return _entityDecorators.findAnchorEntities;
+    return _entity.findEntitiesByType;
   }
 });
 Object.defineProperty(exports, "linkDecorator", {
@@ -76,6 +76,7 @@ var _draftRenderer = require("./draft-renderer");
 var _blockRendererFn = require("./block-renderer-fn");
 var _blockRenderers = require("./block-renderers");
 var _entityDecorators = require("./entity-decorators");
+var _entity = require("./utils/entity");
 var _customStyleFn = require("./custom-style-fn");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const blockRenderMap = exports.blockRenderMap = _index.default.content;
@@ -90,6 +91,6 @@ var _default = exports.default = {
   customStyleFn: _customStyleFn.customStyleFn,
   annotationDecorator: _entityDecorators.annotationDecorator,
   linkDecorator: _entityDecorators.linkDecorator,
-  findAnchorEntities: _entityDecorators.findAnchorEntities,
-  ANCHOR_ENTITY_TYPE: _entityDecorators.ANCHOR_ENTITY_TYPE
+  ENTITY: _entity.ENTITY,
+  findEntitiesByType: _entity.findEntitiesByType
 };

package/lib/utils/entity.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findEntitiesByType = exports.ENTITY = void 0;
+let ENTITY = exports.ENTITY = /*#__PURE__*/function (ENTITY) {
+  ENTITY["Link"] = "LINK";
+  ENTITY["Annotation"] = "ANNOTATION";
+  ENTITY["Anchor"] = "ANCHOR";
+  ENTITY["TOCAnchor"] = "TOC_ANCHOR";
+  return ENTITY;
+}({});
+const findEntitiesByType = type => {
+  return (contentBlock, callback, contentState) => {
+    contentBlock.findEntityRanges(character => {
+      const entityKey = character.getEntity();
+      return entityKey !== null && contentState.getEntity(entityKey).getType() === type;
+    }, callback);
+  };
+};
+exports.findEntitiesByType = findEntitiesByType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kids-reporter/draft-renderer",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "",
   "main": "lib/index.js",
   "scripts": {