@pie-element/explicit-constructed-response 6.12.2-next.23 → 6.12.2-next.28

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.
@@ -29,6 +29,8 @@ var _styles = require("@material-ui/core/styles");
29
29
 
30
30
  var _OutlinedInput = _interopRequireDefault(require("@material-ui/core/OutlinedInput"));
31
31
 
32
+ var _slateReact = require("slate-react");
33
+
32
34
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
33
35
 
34
36
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -37,10 +39,6 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
37
39
 
38
40
  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
39
41
 
40
- var findSlateNode = function findSlateNode(key) {
41
- return window.document.querySelector('[data-key="' + key + '"]');
42
- };
43
-
44
42
  var ECRToolbar = /*#__PURE__*/function (_React$Component) {
45
43
  (0, _inherits2["default"])(ECRToolbar, _React$Component);
46
44
 
@@ -59,7 +57,7 @@ var ECRToolbar = /*#__PURE__*/function (_React$Component) {
59
57
  (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
60
58
  markup: ''
61
59
  });
62
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onDone", function () {
60
+ (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onDone", function (e) {
63
61
  var newValue = _this.state.markup;
64
62
  var _this$props = _this.props,
65
63
  node = _this$props.node,
@@ -72,6 +70,15 @@ var ECRToolbar = /*#__PURE__*/function (_React$Component) {
72
70
  value: newValue
73
71
  });
74
72
 
73
+ var domNode = _slateReact.ReactEditor.toDOMNode(editor, node);
74
+
75
+ var slateWrapperForNode = domNode === null || domNode === void 0 ? void 0 : domNode.closest('[data-slate-wrapper]');
76
+
77
+ if (e !== null && e !== void 0 && e.relatedTarget && e.relatedTarget.closest('[data-slate-wrapper]') === slateWrapperForNode) {
78
+ // no need to call the blur function if the click is on the slate editor
79
+ return;
80
+ }
81
+
75
82
  editor && editor.apply({
76
83
  type: 'set_node',
77
84
  path: nodePath,
@@ -97,24 +104,26 @@ var ECRToolbar = /*#__PURE__*/function (_React$Component) {
97
104
  key: "componentDidMount",
98
105
  value: function componentDidMount() {
99
106
  var _this$props2 = this.props,
107
+ editor = _this$props2.editor,
100
108
  correctChoice = _this$props2.correctChoice,
101
109
  node = _this$props2.node;
102
110
  var choice = correctChoice || {};
103
- var domNode = findSlateNode(node.key);
111
+
112
+ var domNode = _slateReact.ReactEditor.toDOMNode(editor, node);
104
113
 
105
114
  if (domNode) {
106
- //eslint-disable-next-line
115
+ // eslint-disable-next-line
107
116
  var domNodeRect = domNode.getBoundingClientRect();
108
- var editor = domNode.closest('[data-slate-editor]');
109
- var editorRect = editor.getBoundingClientRect();
117
+ var editorDOM = domNode.closest('[data-slate-editor]');
118
+ var editorRect = editorDOM.getBoundingClientRect();
110
119
  var top = domNodeRect.top - editorRect.top;
111
120
  var left = domNodeRect.left - editorRect.left;
112
121
  this.setState({
113
122
  markup: choice.label,
114
123
  toolbarStyle: {
115
124
  position: 'absolute',
116
- top: "".concat(top + domNodeRect.height + 20, "px"),
117
- left: "".concat(left + 20, "px"),
125
+ top: "".concat(top + domNodeRect.height - 1, "px"),
126
+ left: "".concat(left + 17, "px"),
118
127
  width: domNodeRect.width
119
128
  }
120
129
  });
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/ecr-toolbar.jsx"],"names":["findSlateNode","key","window","document","querySelector","ECRToolbar","markup","newValue","state","props","node","nodePath","editor","onToolbarDone","onChangeResponse","update","data","value","apply","type","path","properties","newProperties","e","setState","target","correctChoice","choice","domNode","domNodeRect","getBoundingClientRect","closest","editorRect","top","left","label","toolbarStyle","position","height","width","classes","maxLengthPerChoiceEnabled","inputProps","maxLength","backgroundColor","input","onChange","onDone","React","Component","PropTypes","object","array","func","isRequired","bool","StyledECRToolbar","theme","respArea","palette","common","white","padding","errorInput","border","error","main"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\n\nconst findSlateNode = (key) => {\n return window.document.querySelector('[data-key=\"' + key + '\"]');\n};\n\nexport class ECRToolbar extends React.Component {\n static propTypes = {\n correctChoice: PropTypes.object,\n classes: PropTypes.object,\n node: PropTypes.object,\n nodePath: PropTypes.array,\n onDone: PropTypes.func,\n onChangeResponse: PropTypes.func.isRequired,\n onToolbarDone: PropTypes.func.isRequired,\n editor: PropTypes.object,\n maxLengthPerChoiceEnabled: PropTypes.bool,\n };\n\n state = {\n markup: '',\n };\n\n componentDidMount() {\n const { correctChoice, node } = this.props;\n const choice = correctChoice || {};\n\n const domNode = findSlateNode(node.key);\n\n if (domNode) {\n //eslint-disable-next-line\n const domNodeRect = domNode.getBoundingClientRect();\n const editor = domNode.closest('[data-slate-editor]');\n const editorRect = editor.getBoundingClientRect();\n const top = domNodeRect.top - editorRect.top;\n const left = domNodeRect.left - editorRect.left;\n\n this.setState({\n markup: choice.label,\n toolbarStyle: {\n position: 'absolute',\n top: `${top + domNodeRect.height + 20}px`,\n left: `${left + 20}px`,\n width: domNodeRect.width,\n },\n });\n }\n }\n\n onDone = () => {\n const { markup: newValue } = this.state;\n const { node, nodePath, editor, onToolbarDone, onChangeResponse } = this.props;\n const update = { ...node.data, value: newValue };\n\n editor && editor.apply({\n type: 'set_node',\n path: nodePath,\n properties: {\n data: node.data\n },\n newProperties: { data: update }\n });\n\n onToolbarDone(true);\n onChangeResponse(newValue);\n };\n\n onChange = (e) => this.setState({ markup: e.target.value });\n\n render() {\n const { classes, node, maxLengthPerChoiceEnabled } = this.props;\n const { markup, toolbarStyle } = this.state;\n const inputProps = maxLengthPerChoiceEnabled ? {} : { maxLength: 25 };\n\n return (\n <div\n style={{\n ...toolbarStyle,\n backgroundColor: '#E0E1E6',\n }}\n >\n <OutlinedInput\n style={{ width: '100%' }}\n autoFocus\n labelWidth={0}\n classes={{\n input: classes.input,\n }}\n onChange={this.onChange}\n onBlur={this.onDone}\n value={markup || node?.data?.value || ''}\n inputProps={inputProps}\n />\n </div>\n );\n }\n}\n\nconst StyledECRToolbar = withStyles((theme) => ({\n respArea: {\n backgroundColor: theme.palette.common.white,\n },\n input: {\n backgroundColor: theme.palette.common.white,\n padding: '10px 20px 10px 10px',\n },\n errorInput: {\n border: `2px solid ${theme.palette.error.main}`,\n },\n}))(ECRToolbar);\n\nexport default StyledECRToolbar;\n"],"file":"ecr-toolbar.js"}
1
+ {"version":3,"sources":["../src/ecr-toolbar.jsx"],"names":["ECRToolbar","markup","e","newValue","state","props","node","nodePath","editor","onToolbarDone","onChangeResponse","update","data","value","domNode","ReactEditor","toDOMNode","slateWrapperForNode","closest","relatedTarget","apply","type","path","properties","newProperties","setState","target","correctChoice","choice","domNodeRect","getBoundingClientRect","editorDOM","editorRect","top","left","label","toolbarStyle","position","height","width","classes","maxLengthPerChoiceEnabled","inputProps","maxLength","backgroundColor","input","onChange","onDone","React","Component","PropTypes","object","array","func","isRequired","bool","StyledECRToolbar","theme","respArea","palette","common","white","padding","errorInput","border","error","main"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\nimport { ReactEditor } from 'slate-react';\n\nexport class ECRToolbar extends React.Component {\n static propTypes = {\n correctChoice: PropTypes.object,\n classes: PropTypes.object,\n node: PropTypes.object,\n nodePath: PropTypes.array,\n onDone: PropTypes.func,\n onChangeResponse: PropTypes.func.isRequired,\n onToolbarDone: PropTypes.func.isRequired,\n editor: PropTypes.object,\n maxLengthPerChoiceEnabled: PropTypes.bool,\n };\n\n state = {\n markup: '',\n };\n\n componentDidMount() {\n const { editor, correctChoice, node } = this.props;\n const choice = correctChoice || {};\n\n const domNode = ReactEditor.toDOMNode(editor, node);\n\n if (domNode) {\n // eslint-disable-next-line\n const domNodeRect = domNode.getBoundingClientRect();\n const editorDOM = domNode.closest('[data-slate-editor]');\n const editorRect = editorDOM.getBoundingClientRect();\n const top = domNodeRect.top - editorRect.top;\n const left = domNodeRect.left - editorRect.left;\n\n this.setState({\n markup: choice.label,\n toolbarStyle: {\n position: 'absolute',\n top: `${top + domNodeRect.height - 1}px`,\n left: `${left + 17}px`,\n width: domNodeRect.width,\n },\n });\n }\n }\n\n onDone = (e) => {\n const { markup: newValue } = this.state;\n const { node, nodePath, editor, onToolbarDone, onChangeResponse } = this.props;\n const update = { ...node.data, value: newValue };\n\n const domNode = ReactEditor.toDOMNode(editor, node);\n const slateWrapperForNode = domNode?.closest('[data-slate-wrapper]')\n\n if (e?.relatedTarget && e.relatedTarget.closest('[data-slate-wrapper]') === slateWrapperForNode) {\n // no need to call the blur function if the click is on the slate editor\n return;\n }\n\n editor && editor.apply({\n type: 'set_node',\n path: nodePath,\n properties: {\n data: node.data\n },\n newProperties: { data: update }\n });\n\n onToolbarDone(true);\n onChangeResponse(newValue);\n };\n\n onChange = (e) => this.setState({ markup: e.target.value });\n\n render() {\n const { classes, node, maxLengthPerChoiceEnabled } = this.props;\n const { markup, toolbarStyle } = this.state;\n const inputProps = maxLengthPerChoiceEnabled ? {} : { maxLength: 25 };\n\n return (\n <div\n style={{\n ...toolbarStyle,\n backgroundColor: '#E0E1E6',\n }}\n >\n <OutlinedInput\n style={{ width: '100%' }}\n autoFocus\n labelWidth={0}\n classes={{\n input: classes.input,\n }}\n onChange={this.onChange}\n onBlur={this.onDone}\n value={markup || node?.data?.value || ''}\n inputProps={inputProps}\n />\n </div>\n );\n }\n}\n\nconst StyledECRToolbar = withStyles((theme) => ({\n respArea: {\n backgroundColor: theme.palette.common.white,\n },\n input: {\n backgroundColor: theme.palette.common.white,\n padding: '10px 20px 10px 10px',\n },\n errorInput: {\n border: `2px solid ${theme.palette.error.main}`,\n },\n}))(ECRToolbar);\n\nexport default StyledECRToolbar;\n"],"file":"ecr-toolbar.js"}
@@ -9,6 +9,7 @@
9
9
  "@material-ui/icons": "^3.0.1",
10
10
  "@pie-framework/pie-configure-events": "^1.3.0",
11
11
  "@pie-lib/pie-toolbox": "next",
12
+ "slate-react": "0.99.0",
12
13
  "classnames": "^2.2.6",
13
14
  "debug": "^3.1.0",
14
15
  "lodash": "^4.17.15",
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "repository": "pie-framework/pie-elements",
7
- "version": "6.12.2-next.23+65ac8f40d",
7
+ "version": "6.12.2-next.28+c876b82cf",
8
8
  "description": "",
9
9
  "scripts": {
10
10
  "postpublish": "../../scripts/postpublish"
@@ -21,7 +21,7 @@
21
21
  },
22
22
  "author": "",
23
23
  "license": "ISC",
24
- "gitHead": "65ac8f40dfede379d8e437a95d3a3a29bb4dae7b",
24
+ "gitHead": "c876b82cfd1310885081b6d568923ab59d28fae4",
25
25
  "main": "lib/index.js",
26
26
  "module": "src/index.js",
27
27
  "exports": {