@kids-reporter/draft-renderer 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/lib/draft-renderer.js +4 -4
  2. package/lib/entity-decorators/anchor.js +34 -0
  3. package/lib/entity-decorators/index.js +14 -1
  4. package/lib/entity-decorators/inner-anchor.js +34 -0
  5. package/lib/index.js +26 -5
  6. package/package.json +1 -1
package/lib/draft-renderer.js CHANGED
@@ -14,7 +14,7 @@ var _index2 = require("./utils/index");
14
14
  var _styledComponents = require("styled-components");
15
15
  var _blockRendererFn = require("./block-renderer-fn");
16
16
  var _customStyleFn = require("./custom-style-fn");
17
- var _index3 = require("./entity-decorators/index");
17
+ var _entityDecorators = require("./entity-decorators");
18
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
19
  const blockRendererFn = block => {
20
20
  const atomicBlockObj = (0, _blockRendererFn.atomicBlockRenderer)(block);
@@ -31,7 +31,7 @@ function DraftRenderer({
31
31
  fontSizeLevel = FontSizeLevel.NORMAL
32
32
  }) {
33
33
  const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
34
- const editorState = _draftJs.EditorState.createWithContent(contentState, _index3.decorator);
34
+ const editorState = _draftJs.EditorState.createWithContent(contentState, _entityDecorators.decorator);
35
35
  return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
36
36
  theme: {
37
37
  themeColor,
@@ -56,7 +56,7 @@ function ArticleIntroductionDraftRenderer({
56
56
  fontSizeLevel = FontSizeLevel.NORMAL
57
57
  }) {
58
58
  const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
59
- const editorState = _draftJs.EditorState.createWithContent(contentState, _index3.decorator);
59
+ const editorState = _draftJs.EditorState.createWithContent(contentState, _entityDecorators.decorator);
60
60
  return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
61
61
  theme: {
62
62
  themeColor,
@@ -78,7 +78,7 @@ function ProjectContentDraftRenderer({
78
78
  fontSizeLevel = FontSizeLevel.NORMAL
79
79
  }) {
80
80
  const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
81
- const editorState = _draftJs.EditorState.createWithContent(contentState, _index3.decorator);
81
+ const editorState = _draftJs.EditorState.createWithContent(contentState, _entityDecorators.decorator);
82
82
  return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
83
83
  theme: {
84
84
  themeColor,
package/lib/entity-decorators/anchor.js ADDED
@@ -0,0 +1,34 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.findAnchorEntities = exports.anchorDecorator = exports.ANCHOR_ENTITY_TYPE = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
9
+ const ANCHOR_ENTITY_TYPE = 'TOC_ANCHOR';
10
+ exports.ANCHOR_ENTITY_TYPE = ANCHOR_ENTITY_TYPE;
11
+ const findAnchorEntities = (contentBlock, callback, contentState) => {
12
+ contentBlock.findEntityRanges(character => {
13
+ const entityKey = character.getEntity();
14
+ return entityKey !== null && contentState.getEntity(entityKey).getType() === ANCHOR_ENTITY_TYPE;
15
+ }, callback);
16
+ };
17
+ exports.findAnchorEntities = findAnchorEntities;
18
+ const Anchor = props => {
19
+ var _contentState$getEnti;
20
+ const {
21
+ children,
22
+ contentState,
23
+ entityKey
24
+ } = props;
25
+ 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;
26
+ return /*#__PURE__*/_react.default.createElement("span", {
27
+ id: `anchor-${key}`
28
+ }, children);
29
+ };
30
+ const anchorDecorator = {
31
+ strategy: findAnchorEntities,
32
+ component: Anchor
33
+ };
34
+ exports.anchorDecorator = anchorDecorator;
package/lib/entity-decorators/index.js CHANGED
@@ -3,6 +3,12 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
+ Object.defineProperty(exports, "ANCHOR_ENTITY_TYPE", {
7
+ enumerable: true,
8
+ get: function () {
9
+ return _anchor.ANCHOR_ENTITY_TYPE;
10
+ }
11
+ });
6
12
  Object.defineProperty(exports, "annotationDecorator", {
7
13
  enumerable: true,
8
14
  get: function () {
@@ -10,6 +16,12 @@ Object.defineProperty(exports, "annotationDecorator", {
10
16
  }
11
17
  });
12
18
  exports.decorator = void 0;
19
+ Object.defineProperty(exports, "findAnchorEntities", {
20
+ enumerable: true,
21
+ get: function () {
22
+ return _anchor.findAnchorEntities;
23
+ }
24
+ });
13
25
  Object.defineProperty(exports, "linkDecorator", {
14
26
  enumerable: true,
15
27
  get: function () {
@@ -19,5 +31,6 @@ Object.defineProperty(exports, "linkDecorator", {
19
31
  var _draftJs = require("draft-js");
20
32
  var _annotationDecorator = require("./annotation-decorator");
21
33
  var _linkDecorator = require("./link-decorator");
22
- const decorator = new _draftJs.CompositeDecorator([_annotationDecorator.annotationDecorator, _linkDecorator.linkDecorator]);
34
+ var _anchor = require("./anchor");
35
+ const decorator = new _draftJs.CompositeDecorator([_annotationDecorator.annotationDecorator, _linkDecorator.linkDecorator, _anchor.anchorDecorator]);
23
36
  exports.decorator = decorator;
package/lib/entity-decorators/inner-anchor.js ADDED
@@ -0,0 +1,34 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.findAnchorEntities = exports.anchorDecorator = exports.ANCHOR_ENTITY_TYPE = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
9
+ const ANCHOR_ENTITY_TYPE = 'ANCHOR';
10
+ exports.ANCHOR_ENTITY_TYPE = ANCHOR_ENTITY_TYPE;
11
+ const findAnchorEntities = (contentBlock, callback, contentState) => {
12
+ contentBlock.findEntityRanges(character => {
13
+ const entityKey = character.getEntity();
14
+ return entityKey !== null && contentState.getEntity(entityKey).getType() === ANCHOR_ENTITY_TYPE;
15
+ }, callback);
16
+ };
17
+ exports.findAnchorEntities = findAnchorEntities;
18
+ const Anchor = props => {
19
+ var _contentState$getEnti;
20
+ const {
21
+ children,
22
+ contentState,
23
+ entityKey
24
+ } = props;
25
+ 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;
26
+ return /*#__PURE__*/_react.default.createElement("span", {
27
+ id: id
28
+ }, children);
29
+ };
30
+ const anchorDecorator = {
31
+ strategy: findAnchorEntities,
32
+ component: Anchor
33
+ };
34
+ exports.anchorDecorator = anchorDecorator;
package/lib/index.js CHANGED
@@ -3,6 +3,12 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
+ Object.defineProperty(exports, "ANCHOR_ENTITY_TYPE", {
7
+ enumerable: true,
8
+ get: function () {
9
+ return _entityDecorators.ANCHOR_ENTITY_TYPE;
10
+ }
11
+ });
6
12
  Object.defineProperty(exports, "ArticleBodyDraftRenderer", {
7
13
  enumerable: true,
8
14
  get: function () {
@@ -27,6 +33,12 @@ Object.defineProperty(exports, "ProjectContentDraftRenderer", {
27
33
  return _draftRenderer.ProjectContentDraftRenderer;
28
34
  }
29
35
  });
36
+ Object.defineProperty(exports, "annotationDecorator", {
37
+ enumerable: true,
38
+ get: function () {
39
+ return _entityDecorators.annotationDecorator;
40
+ }
41
+ });
30
42
  Object.defineProperty(exports, "atomicBlockRenderer", {
31
43
  enumerable: true,
32
44
  get: function () {
@@ -46,18 +58,24 @@ Object.defineProperty(exports, "customStyleFn", {
46
58
  return _customStyleFn.customStyleFn;
47
59
  }
48
60
  });
49
- Object.defineProperty(exports, "decorator", {
61
+ exports.default = void 0;
62
+ Object.defineProperty(exports, "findAnchorEntities", {
50
63
  enumerable: true,
51
64
  get: function () {
52
- return _index2.decorator;
65
+ return _entityDecorators.findAnchorEntities;
66
+ }
67
+ });
68
+ Object.defineProperty(exports, "linkDecorator", {
69
+ enumerable: true,
70
+ get: function () {
71
+ return _entityDecorators.linkDecorator;
53
72
  }
54
73
  });
55
- exports.default = void 0;
56
74
  var _index = _interopRequireDefault(require("./block-render-maps/index"));
57
75
  var _draftRenderer = require("./draft-renderer");
58
76
  var _blockRendererFn = require("./block-renderer-fn");
59
77
  var _blockRenderers = require("./block-renderers");
60
- var _index2 = require("./entity-decorators/index");
78
+ var _entityDecorators = require("./entity-decorators");
61
79
  var _customStyleFn = require("./custom-style-fn");
62
80
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
63
81
  const blockRenderMap = _index.default.content;
@@ -71,6 +89,9 @@ var _default = {
71
89
  blockRenderMap: _index.default.content,
72
90
  blockRenderers: _blockRenderers.blockRenderers,
73
91
  customStyleFn: _customStyleFn.customStyleFn,
74
- decorator: _index2.decorator
92
+ annotationDecorator: _entityDecorators.annotationDecorator,
93
+ linkDecorator: _entityDecorators.linkDecorator,
94
+ findAnchorEntities: _entityDecorators.findAnchorEntities,
95
+ ANCHOR_ENTITY_TYPE: _entityDecorators.ANCHOR_ENTITY_TYPE
75
96
  };
76
97
  exports.default = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kids-reporter/draft-renderer",
3
- "version": "1.0.1",
3
+ "version": "1.0.3",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {