@pie-lib/editable-html-tip-tap 1.0.21-next.6057 → 1.1.0-next.2
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.
- package/CHANGELOG.md +36 -0
- package/package.json +7 -17
- package/lib/components/CharacterPicker.js +0 -190
- package/lib/components/CharacterPicker.js.map +0 -1
- package/lib/components/EditableHtml.js +0 -317
- package/lib/components/EditableHtml.js.map +0 -1
- package/lib/components/MenuBar.js +0 -662
- package/lib/components/MenuBar.js.map +0 -1
- package/lib/components/TiptapContainer.js +0 -206
- package/lib/components/TiptapContainer.js.map +0 -1
- package/lib/components/characters/characterUtils.js +0 -378
- package/lib/components/characters/characterUtils.js.map +0 -1
- package/lib/components/characters/custom-popper.js +0 -44
- package/lib/components/characters/custom-popper.js.map +0 -1
- package/lib/components/common/done-button.js +0 -34
- package/lib/components/common/done-button.js.map +0 -1
- package/lib/components/common/toolbar-buttons.js +0 -144
- package/lib/components/common/toolbar-buttons.js.map +0 -1
- package/lib/components/icons/CssIcon.js +0 -25
- package/lib/components/icons/CssIcon.js.map +0 -1
- package/lib/components/icons/RespArea.js +0 -72
- package/lib/components/icons/RespArea.js.map +0 -1
- package/lib/components/icons/TableIcons.js +0 -53
- package/lib/components/icons/TableIcons.js.map +0 -1
- package/lib/components/icons/TextAlign.js +0 -157
- package/lib/components/icons/TextAlign.js.map +0 -1
- package/lib/components/image/AltDialog.js +0 -98
- package/lib/components/image/AltDialog.js.map +0 -1
- package/lib/components/image/ImageToolbar.js +0 -137
- package/lib/components/image/ImageToolbar.js.map +0 -1
- package/lib/components/image/InsertImageHandler.js +0 -138
- package/lib/components/image/InsertImageHandler.js.map +0 -1
- package/lib/components/media/MediaDialog.js +0 -595
- package/lib/components/media/MediaDialog.js.map +0 -1
- package/lib/components/media/MediaToolbar.js +0 -74
- package/lib/components/media/MediaToolbar.js.map +0 -1
- package/lib/components/media/MediaWrapper.js +0 -67
- package/lib/components/media/MediaWrapper.js.map +0 -1
- package/lib/components/respArea/DragInTheBlank/DragInTheBlank.js +0 -79
- package/lib/components/respArea/DragInTheBlank/DragInTheBlank.js.map +0 -1
- package/lib/components/respArea/DragInTheBlank/choice.js +0 -242
- package/lib/components/respArea/DragInTheBlank/choice.js.map +0 -1
- package/lib/components/respArea/ExplicitConstructedResponse.js +0 -118
- package/lib/components/respArea/ExplicitConstructedResponse.js.map +0 -1
- package/lib/components/respArea/InlineDropdown.js +0 -137
- package/lib/components/respArea/InlineDropdown.js.map +0 -1
- package/lib/components/respArea/ToolbarIcon.js +0 -81
- package/lib/components/respArea/ToolbarIcon.js.map +0 -1
- package/lib/constants.js +0 -11
- package/lib/constants.js.map +0 -1
- package/lib/extensions/component.js +0 -288
- package/lib/extensions/component.js.map +0 -1
- package/lib/extensions/css.js +0 -217
- package/lib/extensions/css.js.map +0 -1
- package/lib/extensions/custom-toolbar-wrapper.js +0 -94
- package/lib/extensions/custom-toolbar-wrapper.js.map +0 -1
- package/lib/extensions/extended-table.js +0 -26
- package/lib/extensions/extended-table.js.map +0 -1
- package/lib/extensions/image.js +0 -85
- package/lib/extensions/image.js.map +0 -1
- package/lib/extensions/index.js +0 -42
- package/lib/extensions/index.js.map +0 -1
- package/lib/extensions/math.js +0 -299
- package/lib/extensions/math.js.map +0 -1
- package/lib/extensions/media.js +0 -238
- package/lib/extensions/media.js.map +0 -1
- package/lib/extensions/responseArea.js +0 -438
- package/lib/extensions/responseArea.js.map +0 -1
- package/lib/index.js +0 -30
- package/lib/index.js.map +0 -1
- package/lib/styles/editorContainerStyles.js +0 -137
- package/lib/styles/editorContainerStyles.js.map +0 -1
- package/lib/theme.js +0 -8
- package/lib/theme.js.map +0 -1
- package/lib/utils/size.js +0 -26
- package/lib/utils/size.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,42 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [1.1.0-next.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html-tip-tap@1.1.0-next.1...@pie-lib/editable-html-tip-tap@1.1.0-next.2) (2026-01-26)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @pie-lib/editable-html-tip-tap
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
# 1.1.0-next.1 (2026-01-26)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Bug Fixes
|
|
18
|
+
|
|
19
|
+
* bumped versions [PD-5141] ([c2a8c1b](https://github.com/pie-framework/pie-lib/commit/c2a8c1ba27a86f73d32c1e53279b5fcadb52d7d7))
|
|
20
|
+
* fix the update attributes code in the image extension [PD-5141] ([6e95af5](https://github.com/pie-framework/pie-lib/commit/6e95af50c9b2446f0b200a52b4f33866e5363380))
|
|
21
|
+
* fixed circular dependencies and bumped versions, plus image upload handling [PD-5141] ([7b5fbc9](https://github.com/pie-framework/pie-lib/commit/7b5fbc9126446916d42d6b3597232a231567b2d8))
|
|
22
|
+
* fixed import [PD-5141] ([5ca0f0b](https://github.com/pie-framework/pie-lib/commit/5ca0f0bd05cc04e178e672d67f6e0b1127a3a36d))
|
|
23
|
+
* fixed some of the issues [PD-5141] ([46326ec](https://github.com/pie-framework/pie-lib/commit/46326ecef920698e942a47c6fc756b9e16878797))
|
|
24
|
+
* fixed some responseArea problems and general tip-tap improvements [PD-5141] ([eab7870](https://github.com/pie-framework/pie-lib/commit/eab7870d0e1a24bf5868c058f2a7522d68870a04))
|
|
25
|
+
* fixed toolbar not focusing [PD-5141] ([cc01875](https://github.com/pie-framework/pie-lib/commit/cc01875fee48b853f49e9f37ab343d1013cc2372))
|
|
26
|
+
* implemented read only mode, fixed highlighting [PD-5141] ([6f14213](https://github.com/pie-framework/pie-lib/commit/6f14213d24381428fe7b44dfe6ec0c76801ed532))
|
|
27
|
+
* made sure characterpicker is over the editor ([921c6d3](https://github.com/pie-framework/pie-lib/commit/921c6d31baf2ce14a59d6a3222124753ebd91482))
|
|
28
|
+
* made sure displayed plugins are customizable [PD-5141] ([ceac403](https://github.com/pie-framework/pie-lib/commit/ceac40359f611a24cc44261dda0d1318a77ac5e9))
|
|
29
|
+
* made sure inline-dropdown works properly, fixed pluginprops use [PD-5141] ([0516164](https://github.com/pie-framework/pie-lib/commit/05161642349eb9cc0a088211b8fc17e4c0c9a94c))
|
|
30
|
+
* made sure insert special characters works properly [PD-5409] ([5a61688](https://github.com/pie-framework/pie-lib/commit/5a61688c7327112bb1f5cb557f3c84dfc9f084f9))
|
|
31
|
+
* made sure onChange is called when needed [PD-5141] ([f1e737c](https://github.com/pie-framework/pie-lib/commit/f1e737c6aa5aada6645d29b7139116dd13316103))
|
|
32
|
+
* new versioning and published mask-markup and math-input [PD-5141] ([9c7e825](https://github.com/pie-framework/pie-lib/commit/9c7e8252a7de293b0f1d836f305511e53b28b8a6))
|
|
33
|
+
* refactored tip-tap editor, made sure response area works [PD-5141] ([e97d80a](https://github.com/pie-framework/pie-lib/commit/e97d80a28eb97f86d85ba7525ce5936314e76abc))
|
|
34
|
+
* removed faulty import [PD-5141] ([efb7db1](https://github.com/pie-framework/pie-lib/commit/efb7db12c9637f01bb5e9459adadcde0f31aa7d1))
|
|
35
|
+
* removed horizontal line, fixed math and characters dialog positioning [PD-5141] ([7df8a11](https://github.com/pie-framework/pie-lib/commit/7df8a1151d420333303b9efb48e864b403a0cbb4))
|
|
36
|
+
* updated tip-tap with mui instead of material-ui [PD-5141] ([880d3ab](https://github.com/pie-framework/pie-lib/commit/880d3ab1d63aa12c7e975c882f50624200565737))
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
6
42
|
## [11.21.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@11.17.2...@pie-lib/editable-html@11.21.1) (2025-10-22)
|
|
7
43
|
|
|
8
44
|
**Note:** Version bump only for package @pie-lib/editable-html
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pie-lib/editable-html-tip-tap",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0-next.2",
|
|
4
4
|
"description": "",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -12,11 +12,11 @@
|
|
|
12
12
|
"@dnd-kit/utilities": "3.2.2",
|
|
13
13
|
"@mui/icons-material": "^7.3.4",
|
|
14
14
|
"@mui/material": "^7.3.4",
|
|
15
|
-
"@pie-lib/drag": "
|
|
16
|
-
"@pie-lib/math-input": "
|
|
17
|
-
"@pie-lib/math-rendering": "
|
|
18
|
-
"@pie-lib/math-toolbar": "1.
|
|
19
|
-
"@pie-lib/render-ui": "
|
|
15
|
+
"@pie-lib/drag": "3.1.0-next.2",
|
|
16
|
+
"@pie-lib/math-input": "7.1.0-next.1",
|
|
17
|
+
"@pie-lib/math-rendering": "4.1.0-next.1",
|
|
18
|
+
"@pie-lib/math-toolbar": "2.1.0-next.2",
|
|
19
|
+
"@pie-lib/render-ui": "5.1.0-next.2",
|
|
20
20
|
"@tiptap/core": "3.0.9",
|
|
21
21
|
"@tiptap/extension-character-count": "3.0.9",
|
|
22
22
|
"@tiptap/extension-color": "3.0.9",
|
|
@@ -43,16 +43,6 @@
|
|
|
43
43
|
"react-attr-converter": "^0.3.1",
|
|
44
44
|
"react-jss": "^8.6.1",
|
|
45
45
|
"react-portal": "^4.2.0",
|
|
46
|
-
"slate": "^0.36.2",
|
|
47
|
-
"slate-dev-environment": "^0.2.0",
|
|
48
|
-
"slate-edit-list": "^0.11.3",
|
|
49
|
-
"slate-edit-table": "^0.17.0",
|
|
50
|
-
"slate-html-serializer": "^0.6.12",
|
|
51
|
-
"slate-plain-serializer": "^0.5.26",
|
|
52
|
-
"slate-prop-types": "^0.4.38",
|
|
53
|
-
"slate-react": "^0.14.3",
|
|
54
|
-
"slate-schema-violations": "^0.1.39",
|
|
55
|
-
"slate-soft-break": "^0.8.1",
|
|
56
46
|
"tippy.js": "latest",
|
|
57
47
|
"to-style": "^1.3.3"
|
|
58
48
|
},
|
|
@@ -67,6 +57,6 @@
|
|
|
67
57
|
"publishConfig": {
|
|
68
58
|
"access": "public"
|
|
69
59
|
},
|
|
70
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "04c639af6e49d1881bf3244ebb3940171c26bd3e",
|
|
71
61
|
"scripts": {}
|
|
72
62
|
}
|
|
@@ -1,190 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.CharacterIcon = void 0;
|
|
9
|
-
exports.CharacterPicker = CharacterPicker;
|
|
10
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
-
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
12
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
14
|
-
var _reactDom = _interopRequireDefault(require("react-dom"));
|
|
15
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
16
|
-
var _get = _interopRequireDefault(require("lodash/get"));
|
|
17
|
-
var _mathToolbar = require("@pie-lib/math-toolbar");
|
|
18
|
-
var _customPopper = _interopRequireDefault(require("./characters/custom-popper"));
|
|
19
|
-
var _characterUtils = require("./characters/characterUtils");
|
|
20
|
-
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
21
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
22
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
23
|
-
var CharacterIcon = exports.CharacterIcon = function CharacterIcon(_ref) {
|
|
24
|
-
var letter = _ref.letter;
|
|
25
|
-
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
26
|
-
style: {
|
|
27
|
-
fontSize: '24px',
|
|
28
|
-
lineHeight: '24px'
|
|
29
|
-
}
|
|
30
|
-
}, letter);
|
|
31
|
-
};
|
|
32
|
-
CharacterIcon.propTypes = {
|
|
33
|
-
letter: _propTypes["default"].string
|
|
34
|
-
};
|
|
35
|
-
function CharacterPicker(_ref2) {
|
|
36
|
-
var _opts$characters;
|
|
37
|
-
var editor = _ref2.editor,
|
|
38
|
-
opts = _ref2.opts,
|
|
39
|
-
onClose = _ref2.onClose;
|
|
40
|
-
if (!(opts !== null && opts !== void 0 && (_opts$characters = opts.characters) !== null && _opts$characters !== void 0 && _opts$characters.length)) {
|
|
41
|
-
return null;
|
|
42
|
-
}
|
|
43
|
-
var containerRef = (0, _react.useRef)(null);
|
|
44
|
-
var _useState = (0, _react.useState)({
|
|
45
|
-
top: 0,
|
|
46
|
-
left: 0
|
|
47
|
-
}),
|
|
48
|
-
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
49
|
-
position = _useState2[0],
|
|
50
|
-
setPosition = _useState2[1];
|
|
51
|
-
var _useState3 = (0, _react.useState)(null),
|
|
52
|
-
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
53
|
-
popover = _useState4[0],
|
|
54
|
-
setPopover = _useState4[1];
|
|
55
|
-
var configToUse = (0, _react.useMemo)(function () {
|
|
56
|
-
if (!opts) return _characterUtils.spanishConfig;
|
|
57
|
-
switch (true) {
|
|
58
|
-
case opts.language === 'spanish':
|
|
59
|
-
return _characterUtils.spanishConfig;
|
|
60
|
-
case opts.language === 'special':
|
|
61
|
-
return _characterUtils.specialConfig;
|
|
62
|
-
default:
|
|
63
|
-
return opts;
|
|
64
|
-
}
|
|
65
|
-
}, [opts]);
|
|
66
|
-
var layoutForCharacters = (0, _react.useMemo)(function () {
|
|
67
|
-
return configToUse.characters.reduce(function (obj, arr) {
|
|
68
|
-
if (arr.length >= obj.columns) {
|
|
69
|
-
obj.columns = arr.length;
|
|
70
|
-
}
|
|
71
|
-
return obj;
|
|
72
|
-
}, {
|
|
73
|
-
rows: configToUse.characters.length,
|
|
74
|
-
columns: 0
|
|
75
|
-
});
|
|
76
|
-
}, [configToUse]);
|
|
77
|
-
var closePopOver = function closePopOver() {
|
|
78
|
-
return setPopover(null);
|
|
79
|
-
};
|
|
80
|
-
(0, _react.useEffect)(function () {
|
|
81
|
-
return function () {
|
|
82
|
-
closePopOver();
|
|
83
|
-
};
|
|
84
|
-
}, []);
|
|
85
|
-
(0, _react.useEffect)(function () {
|
|
86
|
-
if (!editor) return;
|
|
87
|
-
|
|
88
|
-
// Calculate position relative to selection
|
|
89
|
-
var editorDOM = editor.options.element;
|
|
90
|
-
var editorRect = editorDOM.getBoundingClientRect();
|
|
91
|
-
var bodyRect = document.body.getBoundingClientRect();
|
|
92
|
-
var from = editor.state.selection.from;
|
|
93
|
-
var start = editor.view.coordsAtPos(from);
|
|
94
|
-
var top = editorRect.top + Math.abs(bodyRect.top) + editorRect.height + 60;
|
|
95
|
-
if (editorRect.y > containerRef.current.offsetHeight) {
|
|
96
|
-
top = top - (containerRef.current.offsetHeight + editorRect.height) - 80;
|
|
97
|
-
}
|
|
98
|
-
setPosition({
|
|
99
|
-
// top: start.top + Math.abs(bodyRect.top) - containerRef.current.offsetHeight - 10 + additionalTopOffset, // shift above
|
|
100
|
-
top: top,
|
|
101
|
-
left: start.left
|
|
102
|
-
});
|
|
103
|
-
var handleClickOutside = function handleClickOutside(e) {
|
|
104
|
-
if (containerRef.current && !containerRef.current.contains(e.target) && !editor.view.dom.contains(e.target)) {
|
|
105
|
-
onClose();
|
|
106
|
-
}
|
|
107
|
-
};
|
|
108
|
-
document.addEventListener('mousedown', handleClickOutside);
|
|
109
|
-
return function () {
|
|
110
|
-
return document.removeEventListener('mousedown', handleClickOutside);
|
|
111
|
-
};
|
|
112
|
-
}, [editor, onClose]);
|
|
113
|
-
var renderPopOver = function renderPopOver(event, el) {
|
|
114
|
-
return setPopover({
|
|
115
|
-
anchorEl: event.currentTarget,
|
|
116
|
-
el: el
|
|
117
|
-
});
|
|
118
|
-
};
|
|
119
|
-
var handleChange = function handleChange(val) {
|
|
120
|
-
if (typeof val === 'string') {
|
|
121
|
-
editor.chain().focus().insertContent(val).run();
|
|
122
|
-
}
|
|
123
|
-
};
|
|
124
|
-
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_reactDom["default"].createPortal(/*#__PURE__*/_react["default"].createElement("div", {
|
|
125
|
-
ref: containerRef,
|
|
126
|
-
className: "insert-character-dialog",
|
|
127
|
-
style: {
|
|
128
|
-
position: 'absolute',
|
|
129
|
-
top: "".concat(position.top, "px"),
|
|
130
|
-
left: "".concat(position.left, "px"),
|
|
131
|
-
maxWidth: '500px',
|
|
132
|
-
zIndex: 99
|
|
133
|
-
}
|
|
134
|
-
}, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_mathToolbar.PureToolbar, {
|
|
135
|
-
keyPadCharacterRef: opts.keyPadCharacterRef,
|
|
136
|
-
setKeypadInteraction: opts.setKeypadInteraction,
|
|
137
|
-
autoFocus: true,
|
|
138
|
-
noDecimal: true,
|
|
139
|
-
hideInput: true,
|
|
140
|
-
noLatexHandling: true,
|
|
141
|
-
hideDoneButtonBackground: true,
|
|
142
|
-
layoutForKeyPad: layoutForCharacters,
|
|
143
|
-
additionalKeys: configToUse.characters.reduce(function (arr, n) {
|
|
144
|
-
arr = [].concat((0, _toConsumableArray2["default"])(arr), (0, _toConsumableArray2["default"])(n.map(function (k) {
|
|
145
|
-
return _objectSpread({
|
|
146
|
-
name: (0, _get["default"])(k, 'name') || k,
|
|
147
|
-
write: (0, _get["default"])(k, 'write') || k,
|
|
148
|
-
label: (0, _get["default"])(k, 'label') || k,
|
|
149
|
-
category: 'character',
|
|
150
|
-
extraClass: 'character',
|
|
151
|
-
extraProps: _objectSpread(_objectSpread({}, k.extraProps || {}), {}, {
|
|
152
|
-
style: _objectSpread(_objectSpread({}, (k.extraProps || {}).style), {}, {
|
|
153
|
-
border: '1px solid #000'
|
|
154
|
-
})
|
|
155
|
-
})
|
|
156
|
-
}, configToUse.hasPreview ? {
|
|
157
|
-
actions: {
|
|
158
|
-
onMouseEnter: function onMouseEnter(ev) {
|
|
159
|
-
return renderPopOver(ev, k);
|
|
160
|
-
},
|
|
161
|
-
onMouseLeave: closePopOver
|
|
162
|
-
}
|
|
163
|
-
} : {});
|
|
164
|
-
})));
|
|
165
|
-
return arr;
|
|
166
|
-
}, []),
|
|
167
|
-
keypadMode: "language",
|
|
168
|
-
onChange: handleChange,
|
|
169
|
-
onDone: onClose
|
|
170
|
-
}))), document.body), popover && /*#__PURE__*/_reactDom["default"].createPortal(/*#__PURE__*/_react["default"].createElement(_customPopper["default"], {
|
|
171
|
-
onClose: closePopOver,
|
|
172
|
-
anchorEl: popover.anchorEl
|
|
173
|
-
}, /*#__PURE__*/_react["default"].createElement("div", null, popover.el.label), /*#__PURE__*/_react["default"].createElement("div", {
|
|
174
|
-
style: {
|
|
175
|
-
fontSize: 20,
|
|
176
|
-
lineHeight: '20px'
|
|
177
|
-
}
|
|
178
|
-
}, popover.el.description), /*#__PURE__*/_react["default"].createElement("div", {
|
|
179
|
-
style: {
|
|
180
|
-
fontSize: 20,
|
|
181
|
-
lineHeight: '20px'
|
|
182
|
-
}
|
|
183
|
-
}, popover.el.unicode)), document.body));
|
|
184
|
-
}
|
|
185
|
-
CharacterPicker.propTypes = {
|
|
186
|
-
editor: _propTypes["default"].object,
|
|
187
|
-
opts: _propTypes["default"].object,
|
|
188
|
-
onClose: _propTypes["default"].func.isRequired
|
|
189
|
-
};
|
|
190
|
-
//# sourceMappingURL=CharacterPicker.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CharacterPicker.js","names":["_react","_interopRequireWildcard","require","_reactDom","_interopRequireDefault","_propTypes","_get","_mathToolbar","_customPopper","_characterUtils","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","CharacterIcon","exports","_ref","letter","createElement","style","fontSize","lineHeight","propTypes","PropTypes","string","CharacterPicker","_ref2","_opts$characters","editor","opts","onClose","characters","containerRef","useRef","_useState","useState","top","left","_useState2","_slicedToArray2","position","setPosition","_useState3","_useState4","popover","setPopover","configToUse","useMemo","spanishConfig","language","specialConfig","layoutForCharacters","reduce","obj","arr","columns","rows","closePopOver","useEffect","editorDOM","options","element","editorRect","getBoundingClientRect","bodyRect","document","body","from","state","selection","start","view","coordsAtPos","Math","abs","height","y","current","offsetHeight","handleClickOutside","contains","target","dom","addEventListener","removeEventListener","renderPopOver","event","el","anchorEl","currentTarget","handleChange","val","chain","focus","insertContent","run","Fragment","ReactDOM","createPortal","ref","className","concat","maxWidth","zIndex","PureToolbar","keyPadCharacterRef","setKeypadInteraction","autoFocus","noDecimal","hideInput","noLatexHandling","hideDoneButtonBackground","layoutForKeyPad","additionalKeys","_toConsumableArray2","map","k","name","write","label","category","extraClass","extraProps","border","hasPreview","actions","onMouseEnter","ev","onMouseLeave","keypadMode","onChange","onDone","description","unicode","object","func","isRequired"],"sources":["../../src/components/CharacterPicker.jsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport get from 'lodash/get';\n\nimport { PureToolbar } from '@pie-lib/math-toolbar';\n\nimport CustomPopper from './characters/custom-popper';\nimport { spanishConfig, specialConfig } from './characters/characterUtils';\n\nconst CharacterIcon = ({ letter }) => (\n <div\n style={{\n fontSize: '24px',\n lineHeight: '24px',\n }}\n >\n {letter}\n </div>\n);\n\nCharacterIcon.propTypes = {\n letter: PropTypes.string,\n};\n\nexport function CharacterPicker({ editor, opts, onClose }) {\n if (!opts?.characters?.length) {\n return null;\n }\n\n const containerRef = useRef(null);\n const [position, setPosition] = useState({ top: 0, left: 0 });\n const [popover, setPopover] = useState(null);\n\n const configToUse = useMemo(() => {\n if (!opts) return spanishConfig;\n\n switch (true) {\n case opts.language === 'spanish':\n return spanishConfig;\n case opts.language === 'special':\n return specialConfig;\n default:\n return opts;\n }\n }, [opts]);\n\n const layoutForCharacters = useMemo(\n () =>\n configToUse.characters.reduce(\n (obj, arr) => {\n if (arr.length >= obj.columns) {\n obj.columns = arr.length;\n }\n\n return obj;\n },\n { rows: configToUse.characters.length, columns: 0 },\n ),\n [configToUse],\n );\n\n const closePopOver = () => setPopover(null);\n\n useEffect(\n () => () => {\n closePopOver();\n },\n [],\n );\n\n useEffect(() => {\n if (!editor) return;\n\n // Calculate position relative to selection\n const editorDOM = editor.options.element;\n const editorRect = editorDOM.getBoundingClientRect();\n const bodyRect = document.body.getBoundingClientRect();\n const { from } = editor.state.selection;\n const start = editor.view.coordsAtPos(from);\n\n let top = editorRect.top + Math.abs(bodyRect.top) + editorRect.height + 60;\n\n if (editorRect.y > containerRef.current.offsetHeight) {\n top = top - (containerRef.current.offsetHeight + editorRect.height) - 80;\n }\n\n setPosition({\n // top: start.top + Math.abs(bodyRect.top) - containerRef.current.offsetHeight - 10 + additionalTopOffset, // shift above\n top: top,\n left: start.left,\n });\n\n const handleClickOutside = (e) => {\n if (containerRef.current && !containerRef.current.contains(e.target) && !editor.view.dom.contains(e.target)) {\n onClose();\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [editor, onClose]);\n\n const renderPopOver = (event, el) => setPopover({ anchorEl: event.currentTarget, el });\n\n const handleChange = (val) => {\n if (typeof val === 'string') {\n editor\n .chain()\n .focus()\n .insertContent(val)\n .run();\n }\n };\n\n return (\n <>\n {ReactDOM.createPortal(\n <div\n ref={containerRef}\n className=\"insert-character-dialog\"\n style={{\n position: 'absolute',\n top: `${position.top}px`,\n left: `${position.left}px`,\n maxWidth: '500px',\n zIndex: 99,\n }}\n >\n <div>\n <PureToolbar\n keyPadCharacterRef={opts.keyPadCharacterRef}\n setKeypadInteraction={opts.setKeypadInteraction}\n autoFocus\n noDecimal\n hideInput\n noLatexHandling\n hideDoneButtonBackground\n layoutForKeyPad={layoutForCharacters}\n additionalKeys={configToUse.characters.reduce((arr, n) => {\n arr = [\n ...arr,\n ...n.map((k) => ({\n name: get(k, 'name') || k,\n write: get(k, 'write') || k,\n label: get(k, 'label') || k,\n category: 'character',\n extraClass: 'character',\n extraProps: {\n ...(k.extraProps || {}),\n style: {\n ...(k.extraProps || {}).style,\n border: '1px solid #000',\n },\n },\n ...(configToUse.hasPreview\n ? {\n actions: {\n onMouseEnter: (ev) => renderPopOver(ev, k),\n onMouseLeave: closePopOver,\n },\n }\n : {}),\n })),\n ];\n\n return arr;\n }, [])}\n keypadMode=\"language\"\n onChange={handleChange}\n onDone={onClose}\n />\n </div>\n </div>,\n document.body,\n )}\n {popover &&\n ReactDOM.createPortal(\n <CustomPopper onClose={closePopOver} anchorEl={popover.anchorEl}>\n <div>{popover.el.label}</div>\n <div style={{ fontSize: 20, lineHeight: '20px' }}>{popover.el.description}</div>\n <div style={{ fontSize: 20, lineHeight: '20px' }}>{popover.el.unicode}</div>\n </CustomPopper>,\n document.body,\n )}\n </>\n );\n}\n\nCharacterPicker.propTypes = {\n editor: PropTypes.object,\n opts: PropTypes.object,\n onClose: PropTypes.func.isRequired,\n};\n\nexport { CharacterIcon };\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,317 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports["default"] = exports.EditableHtml = void 0;
|
|
9
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
|
-
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
11
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
12
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
14
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
15
|
-
var _react2 = require("@tiptap/react");
|
|
16
|
-
var _starterKit = _interopRequireDefault(require("@tiptap/starter-kit"));
|
|
17
|
-
var _extensionTextStyle = require("@tiptap/extension-text-style");
|
|
18
|
-
var _extensionCharacterCount = require("@tiptap/extension-character-count");
|
|
19
|
-
var _extensionSuperscript = _interopRequireDefault(require("@tiptap/extension-superscript"));
|
|
20
|
-
var _extensionSubscript = _interopRequireDefault(require("@tiptap/extension-subscript"));
|
|
21
|
-
var _extensionTextAlign = _interopRequireDefault(require("@tiptap/extension-text-align"));
|
|
22
|
-
var _extensionImage = _interopRequireDefault(require("@tiptap/extension-image"));
|
|
23
|
-
var _styles = require("@mui/material/styles");
|
|
24
|
-
var _extendedTable = _interopRequireDefault(require("../extensions/extended-table"));
|
|
25
|
-
var _extensionTableRow = require("@tiptap/extension-table-row");
|
|
26
|
-
var _extensionTableCell = require("@tiptap/extension-table-cell");
|
|
27
|
-
var _extensionTableHeader = require("@tiptap/extension-table-header");
|
|
28
|
-
var _responseArea = require("../extensions/responseArea");
|
|
29
|
-
var _math = require("../extensions/math");
|
|
30
|
-
var _image = require("../extensions/image");
|
|
31
|
-
var _media = require("../extensions/media");
|
|
32
|
-
var _css = require("../extensions/css");
|
|
33
|
-
var _TiptapContainer = _interopRequireDefault(require("./TiptapContainer"));
|
|
34
|
-
var _size = require("../utils/size");
|
|
35
|
-
var _extensions = require("../extensions");
|
|
36
|
-
var _excluded = ["customPlugins"];
|
|
37
|
-
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
38
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
39
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
40
|
-
var defaultToolbarOpts = {
|
|
41
|
-
position: 'bottom',
|
|
42
|
-
alignment: 'left',
|
|
43
|
-
alwaysVisible: false,
|
|
44
|
-
showDone: true,
|
|
45
|
-
doneOn: 'blur'
|
|
46
|
-
};
|
|
47
|
-
var defaultResponseAreaProps = {
|
|
48
|
-
options: {},
|
|
49
|
-
respAreaToolbar: function respAreaToolbar() {},
|
|
50
|
-
onHandleAreaChange: function onHandleAreaChange() {}
|
|
51
|
-
};
|
|
52
|
-
var DEFAULT_ACTIVE_PLUGINS = ['bold', 'italic', 'underline', 'strikethrough', 'code', 'bulleted-list', 'numbered-list', 'image', 'math', 'languageCharacters', 'text-align', 'table', 'video', 'audio', 'responseArea', 'superscript', 'subscript', 'css', 'h3', 'undo', 'redo'];
|
|
53
|
-
var cssVariables = {
|
|
54
|
-
'--white': '#fff',
|
|
55
|
-
'--black': '#2e2b29',
|
|
56
|
-
'--black-contrast': '#110f0e',
|
|
57
|
-
'--gray-1': 'rgba(61, 37, 20, .05)',
|
|
58
|
-
'--gray-2': 'rgba(61, 37, 20, .08)',
|
|
59
|
-
'--gray-3': 'rgba(61, 37, 20, .12)',
|
|
60
|
-
'--gray-4': 'rgba(53, 38, 28, .3)',
|
|
61
|
-
'--gray-5': 'rgba(28, 25, 23, .6)',
|
|
62
|
-
'--green': '#22c55e',
|
|
63
|
-
'--purple': '#6a00f5',
|
|
64
|
-
'--purple-contrast': '#5800cc',
|
|
65
|
-
'--purple-light': 'rgba(88, 5, 255, .05)',
|
|
66
|
-
'--yellow-contrast': '#facc15',
|
|
67
|
-
'--yellow': 'rgba(250, 204, 21, .4)',
|
|
68
|
-
'--yellow-light': '#fffae5',
|
|
69
|
-
'--red': '#ff5c33',
|
|
70
|
-
'--red-light': '#ffebe5',
|
|
71
|
-
'--shadow': "0px 12px 33px 0px rgba(0, 0, 0, .06),\n 0px 3.618px 9.949px 0px rgba(0, 0, 0, .04)"
|
|
72
|
-
};
|
|
73
|
-
var EditableHtml = exports.EditableHtml = function EditableHtml(props) {
|
|
74
|
-
var _ref = props.pluginProps || {},
|
|
75
|
-
showParagraphs = _ref.showParagraphs,
|
|
76
|
-
separateParagraphs = _ref.separateParagraphs;
|
|
77
|
-
var _useState = (0, _react.useState)([]),
|
|
78
|
-
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
79
|
-
pendingImages = _useState2[0],
|
|
80
|
-
setPendingImages = _useState2[1];
|
|
81
|
-
var _useState3 = (0, _react.useState)(false),
|
|
82
|
-
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
83
|
-
scheduled = _useState4[0],
|
|
84
|
-
setScheduled = _useState4[1];
|
|
85
|
-
var toolbarOpts = props.toolbarOpts;
|
|
86
|
-
var toolbarOptsToUse = _objectSpread(_objectSpread({}, defaultToolbarOpts), toolbarOpts);
|
|
87
|
-
var activePluginsToUse = (0, _react.useMemo)(function () {
|
|
88
|
-
var _ref3, _props$responseAreaPr;
|
|
89
|
-
var _ref2 = props.pluginProps || {},
|
|
90
|
-
customPlugins = _ref2.customPlugins,
|
|
91
|
-
otherPluginProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
|
|
92
|
-
customPlugins = customPlugins || [];
|
|
93
|
-
var filteredActivePlugins = (_ref3 = props.activePlugins || DEFAULT_ACTIVE_PLUGINS) === null || _ref3 === void 0 ? void 0 : _ref3.filter(function (pluginName) {
|
|
94
|
-
var pluginInfo = otherPluginProps[pluginName] || {};
|
|
95
|
-
return !pluginInfo || !pluginInfo.disabled;
|
|
96
|
-
});
|
|
97
|
-
return (0, _extensions.buildExtensions)(filteredActivePlugins, customPlugins, {
|
|
98
|
-
math: {},
|
|
99
|
-
textAlign: {},
|
|
100
|
-
html: {},
|
|
101
|
-
extraCSSRules: props.extraCSSRules || {},
|
|
102
|
-
image: {},
|
|
103
|
-
toolbar: {},
|
|
104
|
-
table: {},
|
|
105
|
-
responseArea: {
|
|
106
|
-
type: (_props$responseAreaPr = props.responseAreaProps) === null || _props$responseAreaPr === void 0 ? void 0 : _props$responseAreaPr.type
|
|
107
|
-
},
|
|
108
|
-
languageCharacters: props.languageCharactersProps,
|
|
109
|
-
keyPadCharacterRef: {},
|
|
110
|
-
setKeypadInteraction: {},
|
|
111
|
-
media: {}
|
|
112
|
-
});
|
|
113
|
-
}, [props]);
|
|
114
|
-
var extensions = [_extensionTextStyle.TextStyleKit, _extensionCharacterCount.CharacterCount.configure({
|
|
115
|
-
limit: props.charactersLimit || 1000000
|
|
116
|
-
}), _starterKit["default"], _extendedTable["default"], _extensionTableRow.TableRow, _extensionTableHeader.TableHeader, _extensionTableCell.TableCell, _responseArea.ResponseAreaExtension.configure(props.responseAreaProps), _responseArea.ExplicitConstructedResponseNode.configure(props.responseAreaProps), _responseArea.DragInTheBlankNode.configure(props.responseAreaProps), _responseArea.InlineDropdownNode.configure(props.responseAreaProps), _math.MathNode.configure({
|
|
117
|
-
toolbarOpts: toolbarOptsToUse
|
|
118
|
-
}), _extensionSubscript["default"], _extensionSuperscript["default"], _extensionTextAlign["default"].configure({
|
|
119
|
-
types: ['heading', 'paragraph'],
|
|
120
|
-
alignments: ['left', 'right', 'center']
|
|
121
|
-
}), _extensionImage["default"], _image.ImageUploadNode.configure({
|
|
122
|
-
toolbarOpts: toolbarOptsToUse,
|
|
123
|
-
imageHandling: {
|
|
124
|
-
disableImageAlignmentButtons: props.disableImageAlignmentButtons,
|
|
125
|
-
onDone: function onDone() {
|
|
126
|
-
var _props$onDone;
|
|
127
|
-
return (_props$onDone = props.onDone) === null || _props$onDone === void 0 ? void 0 : _props$onDone.call(props, editor.getHTML());
|
|
128
|
-
},
|
|
129
|
-
onDelete: props.imageSupport && props.imageSupport["delete"] && function (node, done) {
|
|
130
|
-
var src = node.attrs.src;
|
|
131
|
-
props.imageSupport["delete"](src, function (e) {
|
|
132
|
-
var newPendingImages = pendingImages.filter(function (img) {
|
|
133
|
-
return img.key !== node.key;
|
|
134
|
-
});
|
|
135
|
-
var newState = {
|
|
136
|
-
pendingImages: newPendingImages,
|
|
137
|
-
scheduled: scheduled && newPendingImages.length === 0 ? false : scheduled
|
|
138
|
-
};
|
|
139
|
-
setPendingImages(newState.pendingImages);
|
|
140
|
-
setScheduled(newState.scheduled);
|
|
141
|
-
done();
|
|
142
|
-
});
|
|
143
|
-
},
|
|
144
|
-
insertImageRequested: props.imageSupport && function (addedImage, getHandler) {
|
|
145
|
-
var onFinish = function onFinish(result) {
|
|
146
|
-
var _cb;
|
|
147
|
-
var cb;
|
|
148
|
-
if (scheduled && result) {
|
|
149
|
-
// finish editing only on success
|
|
150
|
-
cb = props.onChange;
|
|
151
|
-
}
|
|
152
|
-
var newPendingImages = pendingImages.filter(function (img) {
|
|
153
|
-
return img.key !== addedImage.key;
|
|
154
|
-
});
|
|
155
|
-
var newState = {
|
|
156
|
-
pendingImages: newPendingImages
|
|
157
|
-
};
|
|
158
|
-
if (newPendingImages.length === 0) {
|
|
159
|
-
newState.scheduled = false;
|
|
160
|
-
}
|
|
161
|
-
setPendingImages(newState.pendingImages);
|
|
162
|
-
setScheduled(newState.scheduled);
|
|
163
|
-
(_cb = cb) === null || _cb === void 0 || _cb(editor.getHTML());
|
|
164
|
-
};
|
|
165
|
-
var callback = function callback() {
|
|
166
|
-
/**
|
|
167
|
-
* The handler is the object through which the outer context
|
|
168
|
-
* communicates file upload events like: fileChosen, cancel, progress
|
|
169
|
-
*/
|
|
170
|
-
var handler = getHandler(onFinish);
|
|
171
|
-
props.imageSupport.add(handler);
|
|
172
|
-
};
|
|
173
|
-
setPendingImages([].concat((0, _toConsumableArray2["default"])(pendingImages), [addedImage]));
|
|
174
|
-
callback();
|
|
175
|
-
},
|
|
176
|
-
maxImageWidth: props.maxImageWidth,
|
|
177
|
-
maxImageHeight: props.maxImageHeight
|
|
178
|
-
},
|
|
179
|
-
limit: 3
|
|
180
|
-
}), _media.Media.configure({
|
|
181
|
-
uploadSoundSupport: props.uploadSoundSupport
|
|
182
|
-
}), _css.CSSMark.configure({
|
|
183
|
-
extraCSSRules: props.extraCSSRules
|
|
184
|
-
})];
|
|
185
|
-
var editor = (0, _react2.useEditor)({
|
|
186
|
-
extensions: extensions,
|
|
187
|
-
immediatelyRender: false,
|
|
188
|
-
editorProps: {
|
|
189
|
-
handleKeyDown: function handleKeyDown(view, event) {
|
|
190
|
-
if (props.onKeyDown) {
|
|
191
|
-
return props.onKeyDown(event);
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
// Return false to let default behavior continue
|
|
195
|
-
return false;
|
|
196
|
-
}
|
|
197
|
-
},
|
|
198
|
-
editable: !props.disabled,
|
|
199
|
-
content: props.markup,
|
|
200
|
-
onUpdate: function onUpdate(_ref4) {
|
|
201
|
-
var editor = _ref4.editor,
|
|
202
|
-
transaction = _ref4.transaction;
|
|
203
|
-
if (transaction.isDone) {
|
|
204
|
-
var _props$onChange;
|
|
205
|
-
(_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, editor.getHTML());
|
|
206
|
-
}
|
|
207
|
-
},
|
|
208
|
-
onBlur: function onBlur(_ref5) {
|
|
209
|
-
var editor = _ref5.editor;
|
|
210
|
-
var respAreaToolbarActive = editor.isActive('inline_dropdown') || editor.isActive('explicit_constructed_response');
|
|
211
|
-
if (respAreaToolbarActive) {
|
|
212
|
-
return;
|
|
213
|
-
}
|
|
214
|
-
if (props.markup !== editor.getHTML()) {
|
|
215
|
-
var _props$onChange2;
|
|
216
|
-
(_props$onChange2 = props.onChange) === null || _props$onChange2 === void 0 || _props$onChange2.call(props, editor.getHTML());
|
|
217
|
-
}
|
|
218
|
-
if (toolbarOptsToUse.doneOn === 'blur') {
|
|
219
|
-
var _props$onDone2;
|
|
220
|
-
(_props$onDone2 = props.onDone) === null || _props$onDone2 === void 0 || _props$onDone2.call(props, editor.getHTML());
|
|
221
|
-
}
|
|
222
|
-
}
|
|
223
|
-
}, [props.charactersLimit]);
|
|
224
|
-
(0, _react.useEffect)(function () {
|
|
225
|
-
editor === null || editor === void 0 || editor.setEditable(!props.disabled);
|
|
226
|
-
}, [props.disabled, editor]);
|
|
227
|
-
(0, _react.useEffect)(function () {
|
|
228
|
-
if (!editor) {
|
|
229
|
-
return;
|
|
230
|
-
}
|
|
231
|
-
if (props.markup !== editor.getHTML()) {
|
|
232
|
-
editor.commands.setContent(props.markup, false); // false = don’t emit update
|
|
233
|
-
}
|
|
234
|
-
}, [props.markup, editor]);
|
|
235
|
-
(0, _react.useEffect)(function () {
|
|
236
|
-
Object.entries(cssVariables).forEach(function (_ref6) {
|
|
237
|
-
var _ref7 = (0, _slicedToArray2["default"])(_ref6, 2),
|
|
238
|
-
key = _ref7[0],
|
|
239
|
-
value = _ref7[1];
|
|
240
|
-
document.documentElement.style.setProperty(key, value);
|
|
241
|
-
});
|
|
242
|
-
}, []);
|
|
243
|
-
var editorState = (0, _react2.useEditorState)({
|
|
244
|
-
editor: editor,
|
|
245
|
-
selector: function selector(ctx) {
|
|
246
|
-
var _ctx$editor;
|
|
247
|
-
return {
|
|
248
|
-
isFocused: (_ctx$editor = ctx.editor) === null || _ctx$editor === void 0 ? void 0 : _ctx$editor.isFocused
|
|
249
|
-
};
|
|
250
|
-
}
|
|
251
|
-
});
|
|
252
|
-
var sizeStyle = (0, _react.useMemo)(function () {
|
|
253
|
-
var minWidth = props.minWidth,
|
|
254
|
-
width = props.width,
|
|
255
|
-
maxWidth = props.maxWidth,
|
|
256
|
-
minHeight = props.minHeight,
|
|
257
|
-
height = props.height,
|
|
258
|
-
maxHeight = props.maxHeight;
|
|
259
|
-
return {
|
|
260
|
-
width: (0, _size.valueToSize)(width),
|
|
261
|
-
minWidth: (0, _size.valueToSize)(minWidth),
|
|
262
|
-
maxWidth: (0, _size.valueToSize)(maxWidth),
|
|
263
|
-
height: (0, _size.valueToSize)(height),
|
|
264
|
-
minHeight: (0, _size.valueToSize)(minHeight),
|
|
265
|
-
maxHeight: (0, _size.valueToSize)(maxHeight)
|
|
266
|
-
};
|
|
267
|
-
}, [props]);
|
|
268
|
-
return /*#__PURE__*/_react["default"].createElement(_TiptapContainer["default"], (0, _extends2["default"])({}, _objectSpread(_objectSpread({}, props), {}, {
|
|
269
|
-
activePlugins: activePluginsToUse,
|
|
270
|
-
toolbarOpts: toolbarOptsToUse
|
|
271
|
-
}), {
|
|
272
|
-
editorState: editorState,
|
|
273
|
-
editor: editor
|
|
274
|
-
}), editor && /*#__PURE__*/_react["default"].createElement(StyledEditorContent, {
|
|
275
|
-
style: {
|
|
276
|
-
minHeight: sizeStyle.minHeight,
|
|
277
|
-
height: sizeStyle.height,
|
|
278
|
-
maxHeight: sizeStyle.maxHeight
|
|
279
|
-
},
|
|
280
|
-
showParagraph: showParagraphs && !showParagraphs.disabled,
|
|
281
|
-
separateParagraph: separateParagraphs && !separateParagraphs.disabled,
|
|
282
|
-
editor: editor
|
|
283
|
-
}));
|
|
284
|
-
};
|
|
285
|
-
var StyledEditorContent = (0, _styles.styled)(_react2.EditorContent, {
|
|
286
|
-
shouldForwardProp: function shouldForwardProp(prop) {
|
|
287
|
-
return !['showParagraph', 'separateParagraph'].includes(prop);
|
|
288
|
-
}
|
|
289
|
-
})(function (_ref8) {
|
|
290
|
-
var showParagraph = _ref8.showParagraph,
|
|
291
|
-
separateParagraph = _ref8.separateParagraph;
|
|
292
|
-
return {
|
|
293
|
-
outline: 'none !important',
|
|
294
|
-
'& .ProseMirror': _objectSpread(_objectSpread({
|
|
295
|
-
padding: '5px',
|
|
296
|
-
maxHeight: '500px',
|
|
297
|
-
outline: 'none !important',
|
|
298
|
-
position: 'initial',
|
|
299
|
-
'& > p': {
|
|
300
|
-
margin: '0'
|
|
301
|
-
}
|
|
302
|
-
}, showParagraph && {
|
|
303
|
-
'& > p:has(+ p)::after': {
|
|
304
|
-
display: 'block',
|
|
305
|
-
content: '"¶"',
|
|
306
|
-
fontSize: '1em',
|
|
307
|
-
color: '#146EB3'
|
|
308
|
-
}
|
|
309
|
-
}), separateParagraph && {
|
|
310
|
-
'& > div:has(+ div)': {
|
|
311
|
-
marginBottom: '1em'
|
|
312
|
-
}
|
|
313
|
-
})
|
|
314
|
-
};
|
|
315
|
-
});
|
|
316
|
-
var _default = exports["default"] = EditableHtml;
|
|
317
|
-
//# sourceMappingURL=EditableHtml.js.map
|