plataforma-fundacao-componentes 2.25.4 → 2.25.6
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/dist/components/textEditor/TextEditor.d.ts +19 -20
- package/dist/components/textEditor/components/textEditorColorPicker/TextEditorColorPicker.d.ts +11 -11
- package/dist/components/textEditor/components/textEditorHeaderButton/TextEditorHeaderButton.d.ts +7 -11
- package/dist/components/textEditor/components/textEditorInput/TextEditorHeaderInput.d.ts +10 -12
- package/dist/components/textEditor/components/textEditorMenuButton/TextEditorMenuButton.d.ts +3 -9
- package/dist/components/textEditor/components/textEditorTitleChoser/TextEditorTitleChoser.d.ts +10 -10
- package/dist/components/textEditor/components/textEditorUrlCreator/TextEditorUrlCreator.d.ts +11 -11
- package/dist/index.css +114 -114
- package/dist/index.js +184 -191
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +184 -191
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -10988,16 +10988,19 @@ function TextEditorHeaderInput(props) {
|
|
|
10988
10988
|
var getInputProps = function getInputProps() {
|
|
10989
10989
|
return {
|
|
10990
10990
|
onFocus: function onFocus(evt) {
|
|
10991
|
-
document.getElementById(inputLabelId)
|
|
10991
|
+
var el = document.getElementById(inputLabelId);
|
|
10992
|
+
el.classList.add('top');
|
|
10992
10993
|
if (typeof props.onFocus === 'function') props.onFocus(evt);
|
|
10993
10994
|
},
|
|
10994
|
-
onBlur: function onBlur(
|
|
10995
|
+
onBlur: function onBlur() {
|
|
10996
|
+
var el = document.getElementById(inputLabelId);
|
|
10995
10997
|
if (!props.value) {
|
|
10996
|
-
|
|
10998
|
+
el.classList.remove('top');
|
|
10997
10999
|
}
|
|
10998
11000
|
},
|
|
10999
11001
|
onChange: function onChange(evt) {
|
|
11000
|
-
|
|
11002
|
+
var _props$onChange;
|
|
11003
|
+
(_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, evt);
|
|
11001
11004
|
evt.stopPropagation();
|
|
11002
11005
|
},
|
|
11003
11006
|
className: getMergedClassNames([rootClassName$2y + "-input", props.className || '']),
|
|
@@ -11009,56 +11012,42 @@ function TextEditorHeaderInput(props) {
|
|
|
11009
11012
|
}
|
|
11010
11013
|
};
|
|
11011
11014
|
};
|
|
11012
|
-
return
|
|
11015
|
+
return React$1__default.createElement("div", {
|
|
11013
11016
|
className: rootClassName$2y
|
|
11014
|
-
},
|
|
11017
|
+
}, React$1__default.createElement("div", {
|
|
11015
11018
|
id: inputLabelId,
|
|
11016
11019
|
className: getMergedClassNames([rootClassName$2y + "-label", props.value ? 'top' : ''])
|
|
11017
|
-
}, props.label),
|
|
11020
|
+
}, props.label), React$1__default.createElement("input", Object.assign({}, getInputProps())));
|
|
11018
11021
|
}
|
|
11019
|
-
TextEditorHeaderInput.propTypes = {
|
|
11020
|
-
onChange: propTypes.func,
|
|
11021
|
-
label: propTypes.string,
|
|
11022
|
-
value: propTypes.oneOfType([propTypes.number, propTypes.string]),
|
|
11023
|
-
onEnter: propTypes.func
|
|
11024
|
-
};
|
|
11025
11022
|
TextEditorHeaderInput.defaultProps = {
|
|
11026
11023
|
onChange: function onChange() {}
|
|
11027
11024
|
};
|
|
11028
11025
|
|
|
11029
11026
|
var rootClassName$2z = 'text-editor-menu-button';
|
|
11030
11027
|
function TextEditorMenuButton(props) {
|
|
11031
|
-
return
|
|
11028
|
+
return React$1__default.createElement("button", Object.assign({}, props, {
|
|
11032
11029
|
className: getMergedClassNames([props.className || '', rootClassName$2z])
|
|
11033
11030
|
}));
|
|
11034
11031
|
}
|
|
11035
|
-
TextEditorMenuButton.propTypes = {
|
|
11036
|
-
onClick: propTypes.func,
|
|
11037
|
-
disabled: propTypes.bool
|
|
11038
|
-
};
|
|
11039
11032
|
|
|
11040
11033
|
var rootClassName$2A = 'text-editor-color-picker';
|
|
11041
11034
|
var colorClassName = rootClassName$2A + "-color-button";
|
|
11042
11035
|
var defaultColors = ['#121212', '#323c32', '#5a645a', '#828a82', '#33820d', '#3fa110'];
|
|
11043
|
-
|
|
11044
|
-
return
|
|
11036
|
+
function ColorButton(props) {
|
|
11037
|
+
return React$1__default.createElement("button", {
|
|
11045
11038
|
disabled: props.disabled,
|
|
11046
11039
|
className: colorClassName,
|
|
11047
11040
|
onClick: function onClick() {
|
|
11048
|
-
return props.
|
|
11041
|
+
return props.onPick(props.color);
|
|
11049
11042
|
},
|
|
11050
11043
|
style: {
|
|
11051
11044
|
backgroundColor: props.color
|
|
11052
11045
|
}
|
|
11053
11046
|
});
|
|
11054
|
-
}
|
|
11055
|
-
ColorButton.propTypes = {
|
|
11056
|
-
color: propTypes.string,
|
|
11057
|
-
onClick: propTypes.func,
|
|
11058
|
-
disabled: propTypes.bool
|
|
11059
|
-
};
|
|
11047
|
+
}
|
|
11060
11048
|
var timeOutID = null;
|
|
11061
11049
|
function TextEditorColorPicker(props) {
|
|
11050
|
+
var _window$localStorage$;
|
|
11062
11051
|
var _useState = React$1.useState(''),
|
|
11063
11052
|
hexa = _useState[0],
|
|
11064
11053
|
setHexa = _useState[1];
|
|
@@ -11068,21 +11057,24 @@ function TextEditorColorPicker(props) {
|
|
|
11068
11057
|
previousSelection = _useState3[0],
|
|
11069
11058
|
setPreviousSelection = _useState3[1];
|
|
11070
11059
|
React$1.useEffect(function () {
|
|
11071
|
-
|
|
11060
|
+
var _props$atualColor;
|
|
11061
|
+
setHexa((_props$atualColor = props.atualColor) != null ? _props$atualColor : '');
|
|
11072
11062
|
}, [props.atualColor]);
|
|
11073
11063
|
React$1.useEffect(function () {
|
|
11064
|
+
var selection = window.getSelection();
|
|
11074
11065
|
if (props.opened) {
|
|
11075
|
-
|
|
11076
|
-
anchorNode =
|
|
11077
|
-
|
|
11078
|
-
|
|
11079
|
-
|
|
11080
|
-
|
|
11081
|
-
|
|
11082
|
-
|
|
11083
|
-
|
|
11084
|
-
|
|
11085
|
-
|
|
11066
|
+
if (selection) {
|
|
11067
|
+
var anchorNode = selection.anchorNode,
|
|
11068
|
+
anchorOffset = selection.anchorOffset,
|
|
11069
|
+
focusNode = selection.focusNode,
|
|
11070
|
+
focusOffset = selection.focusOffset;
|
|
11071
|
+
setPreviousSelection({
|
|
11072
|
+
anchorNode: anchorNode,
|
|
11073
|
+
anchorOffset: anchorOffset,
|
|
11074
|
+
focusNode: focusNode,
|
|
11075
|
+
focusOffset: focusOffset
|
|
11076
|
+
});
|
|
11077
|
+
}
|
|
11086
11078
|
var el = document.querySelector("#" + id + " input:nth-of-type(2)");
|
|
11087
11079
|
if (el) {
|
|
11088
11080
|
el.focus();
|
|
@@ -11092,49 +11084,51 @@ function TextEditorColorPicker(props) {
|
|
|
11092
11084
|
}
|
|
11093
11085
|
}
|
|
11094
11086
|
}, [props.opened]);
|
|
11095
|
-
var lastUsedColors = JSON.parse(window.localStorage.getItem('lastUsedColors')) || ['', '', '', '', '', ''];
|
|
11087
|
+
var lastUsedColors = JSON.parse((_window$localStorage$ = window.localStorage.getItem('lastUsedColors')) != null ? _window$localStorage$ : '') || ['', '', '', '', '', ''];
|
|
11096
11088
|
var submitColor = function submitColor(color) {
|
|
11097
|
-
|
|
11089
|
+
var _window$getSelection;
|
|
11090
|
+
(_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.setBaseAndExtent(previousSelection.anchorNode, previousSelection.anchorOffset, previousSelection.focusNode, previousSelection.focusOffset);
|
|
11098
11091
|
props.onChange(color);
|
|
11099
11092
|
};
|
|
11100
11093
|
var handleSubmit = function handleSubmit() {
|
|
11094
|
+
var _window$getSelection2;
|
|
11101
11095
|
if (!validaHexadecimalColor(hexa)) return;
|
|
11102
|
-
window.getSelection().setBaseAndExtent(previousSelection.anchorNode, previousSelection.anchorOffset, previousSelection.focusNode, previousSelection.focusOffset);
|
|
11096
|
+
(_window$getSelection2 = window.getSelection()) === null || _window$getSelection2 === void 0 ? void 0 : _window$getSelection2.setBaseAndExtent(previousSelection.anchorNode, previousSelection.anchorOffset, previousSelection.focusNode, previousSelection.focusOffset);
|
|
11103
11097
|
props.onChange(hexa);
|
|
11104
11098
|
var arr = [hexa, lastUsedColors[0] || '', lastUsedColors[1] || '', lastUsedColors[2] || '', lastUsedColors[3] || '', lastUsedColors[4] || ''];
|
|
11105
11099
|
setTimeout(function () {
|
|
11106
11100
|
window.localStorage.setItem('lastUsedColors', JSON.stringify(arr));
|
|
11107
11101
|
}, 250);
|
|
11108
11102
|
};
|
|
11109
|
-
return
|
|
11103
|
+
return React$1__default.createElement("div", {
|
|
11110
11104
|
id: id,
|
|
11111
11105
|
className: rootClassName$2A
|
|
11112
|
-
},
|
|
11106
|
+
}, React$1__default.createElement("div", {
|
|
11113
11107
|
className: rootClassName$2A + "-colors"
|
|
11114
11108
|
}, defaultColors.map(function (color, index) {
|
|
11115
|
-
return
|
|
11109
|
+
return React$1__default.createElement(ColorButton, {
|
|
11116
11110
|
key: index,
|
|
11117
11111
|
color: color,
|
|
11118
|
-
|
|
11112
|
+
onPick: function onPick(color) {
|
|
11119
11113
|
return submitColor(color);
|
|
11120
11114
|
}
|
|
11121
11115
|
});
|
|
11122
|
-
})),
|
|
11116
|
+
})), React$1__default.createElement("div", {
|
|
11123
11117
|
className: rootClassName$2A + "-colors"
|
|
11124
11118
|
}, lastUsedColors.map(function (color, index) {
|
|
11125
|
-
return
|
|
11119
|
+
return React$1__default.createElement(ColorButton, {
|
|
11126
11120
|
key: index,
|
|
11127
11121
|
disabled: color === '',
|
|
11128
11122
|
color: color,
|
|
11129
|
-
|
|
11123
|
+
onPick: function onPick(color) {
|
|
11130
11124
|
return submitColor(color);
|
|
11131
11125
|
}
|
|
11132
11126
|
});
|
|
11133
|
-
})),
|
|
11127
|
+
})), React$1__default.createElement("div", {
|
|
11134
11128
|
className: rootClassName$2A + "-hexa-row"
|
|
11135
|
-
},
|
|
11129
|
+
}, React$1__default.createElement("div", {
|
|
11136
11130
|
className: rootClassName$2A + "-picker-col"
|
|
11137
|
-
},
|
|
11131
|
+
}, React$1__default.createElement("input", {
|
|
11138
11132
|
value: hexa,
|
|
11139
11133
|
onChange: function onChange(evt) {
|
|
11140
11134
|
evt.stopPropagation();
|
|
@@ -11145,15 +11139,15 @@ function TextEditorColorPicker(props) {
|
|
|
11145
11139
|
}, 200);
|
|
11146
11140
|
},
|
|
11147
11141
|
className: rootClassName$2A + "-color-picker",
|
|
11148
|
-
type:
|
|
11149
|
-
})),
|
|
11150
|
-
label:
|
|
11142
|
+
type: 'color'
|
|
11143
|
+
})), React$1__default.createElement(TextEditorHeaderInput, {
|
|
11144
|
+
label: 'Hexadecimal',
|
|
11151
11145
|
onChange: function onChange(evt) {
|
|
11152
11146
|
return setHexa(formatHexadecimalColor(evt.target.value));
|
|
11153
11147
|
},
|
|
11154
11148
|
value: hexa,
|
|
11155
11149
|
onEnter: handleSubmit
|
|
11156
|
-
}),
|
|
11150
|
+
}), React$1__default.createElement(TextEditorMenuButton, {
|
|
11157
11151
|
disabled: !validaHexadecimalColor(hexa),
|
|
11158
11152
|
onClick: handleSubmit,
|
|
11159
11153
|
style: {
|
|
@@ -11161,29 +11155,21 @@ function TextEditorColorPicker(props) {
|
|
|
11161
11155
|
}
|
|
11162
11156
|
}, "OK")));
|
|
11163
11157
|
}
|
|
11164
|
-
TextEditorColorPicker.propTypes = {
|
|
11165
|
-
onChange: propTypes.func,
|
|
11166
|
-
atualColor: propTypes.string,
|
|
11167
|
-
opened: propTypes.bool
|
|
11168
|
-
};
|
|
11169
11158
|
TextEditorColorPicker.defaultProps = {
|
|
11170
11159
|
onChange: function onChange() {}
|
|
11171
11160
|
};
|
|
11172
11161
|
|
|
11162
|
+
var _excluded$2 = ["icon", "active"];
|
|
11173
11163
|
var rootClassName$2B = 'text-editor-header-button';
|
|
11174
|
-
function TextEditorHeaderButton(
|
|
11175
|
-
|
|
11176
|
-
|
|
11177
|
-
|
|
11178
|
-
|
|
11179
|
-
|
|
11164
|
+
function TextEditorHeaderButton(_ref) {
|
|
11165
|
+
var _props$className;
|
|
11166
|
+
var icon = _ref.icon,
|
|
11167
|
+
active = _ref.active,
|
|
11168
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
11169
|
+
return React$1__default.createElement("button", Object.assign({
|
|
11170
|
+
className: getMergedClassNames([rootClassName$2B, active ? 'active' : '', (_props$className = props.className) != null ? _props$className : ''])
|
|
11171
|
+
}, props), icon);
|
|
11180
11172
|
}
|
|
11181
|
-
TextEditorHeaderButton.propTypes = {
|
|
11182
|
-
icon: propTypes.object,
|
|
11183
|
-
onClick: propTypes.func,
|
|
11184
|
-
active: propTypes.bool,
|
|
11185
|
-
disabled: propTypes.bool
|
|
11186
|
-
};
|
|
11187
11173
|
|
|
11188
11174
|
var rootClassName$2C = 'text-editor-title-choser';
|
|
11189
11175
|
function TextEditorTitleChoser(props) {
|
|
@@ -11193,18 +11179,20 @@ function TextEditorTitleChoser(props) {
|
|
|
11193
11179
|
previousSelection = _useState2[0],
|
|
11194
11180
|
setPreviousSelection = _useState2[1];
|
|
11195
11181
|
React$1.useEffect(function () {
|
|
11182
|
+
var selection = window.getSelection();
|
|
11196
11183
|
if (props.opened) {
|
|
11197
|
-
|
|
11198
|
-
anchorNode =
|
|
11199
|
-
|
|
11200
|
-
|
|
11201
|
-
|
|
11202
|
-
|
|
11203
|
-
|
|
11204
|
-
|
|
11205
|
-
|
|
11206
|
-
|
|
11207
|
-
|
|
11184
|
+
if (selection) {
|
|
11185
|
+
var anchorNode = selection.anchorNode,
|
|
11186
|
+
anchorOffset = selection.anchorOffset,
|
|
11187
|
+
focusNode = selection.focusNode,
|
|
11188
|
+
focusOffset = selection.focusOffset;
|
|
11189
|
+
setPreviousSelection({
|
|
11190
|
+
anchorNode: anchorNode,
|
|
11191
|
+
anchorOffset: anchorOffset,
|
|
11192
|
+
focusNode: focusNode,
|
|
11193
|
+
focusOffset: focusOffset
|
|
11194
|
+
});
|
|
11195
|
+
}
|
|
11208
11196
|
var el = document.querySelector("#" + id + " button");
|
|
11209
11197
|
if (el) {
|
|
11210
11198
|
el.focus();
|
|
@@ -11215,28 +11203,25 @@ function TextEditorTitleChoser(props) {
|
|
|
11215
11203
|
}
|
|
11216
11204
|
}, [props.opened]);
|
|
11217
11205
|
var handleChange = function handleChange(text) {
|
|
11218
|
-
|
|
11206
|
+
var _window$getSelection;
|
|
11207
|
+
(_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.setBaseAndExtent(previousSelection.anchorNode, previousSelection.anchorOffset, previousSelection.focusNode, previousSelection.focusOffset);
|
|
11219
11208
|
if (typeof props.onChange === 'function') {
|
|
11220
11209
|
props.onChange(text);
|
|
11221
11210
|
}
|
|
11222
11211
|
};
|
|
11223
|
-
return
|
|
11212
|
+
return React$1__default.createElement("div", {
|
|
11224
11213
|
className: rootClassName$2C,
|
|
11225
11214
|
id: id
|
|
11226
|
-
},
|
|
11215
|
+
}, React$1__default.createElement("button", {
|
|
11227
11216
|
onClick: function onClick() {
|
|
11228
11217
|
return handleChange('H1');
|
|
11229
11218
|
}
|
|
11230
|
-
},
|
|
11219
|
+
}, React$1__default.createElement("h1", null, "T\xEDtulo")), React$1__default.createElement("button", {
|
|
11231
11220
|
onClick: function onClick() {
|
|
11232
11221
|
return handleChange('H6');
|
|
11233
11222
|
}
|
|
11234
|
-
},
|
|
11223
|
+
}, React$1__default.createElement("h6", null, "Texto")));
|
|
11235
11224
|
}
|
|
11236
|
-
TextEditorTitleChoser.propTypes = {
|
|
11237
|
-
onChange: propTypes.func,
|
|
11238
|
-
opened: propTypes.bool
|
|
11239
|
-
};
|
|
11240
11225
|
TextEditorTitleChoser.defaultProps = {
|
|
11241
11226
|
onChange: function onChange() {}
|
|
11242
11227
|
};
|
|
@@ -11262,6 +11247,7 @@ function TextEditorUrlCreator(props) {
|
|
|
11262
11247
|
setUpdating = _useState6[1];
|
|
11263
11248
|
React$1.useEffect(function () {
|
|
11264
11249
|
if (props.opened) {
|
|
11250
|
+
var _window$getSelection, _selection$anchorNode;
|
|
11265
11251
|
var selection = window.getSelection();
|
|
11266
11252
|
var anchorNode = selection.anchorNode,
|
|
11267
11253
|
anchorOffset = selection.anchorOffset,
|
|
@@ -11273,13 +11259,15 @@ function TextEditorUrlCreator(props) {
|
|
|
11273
11259
|
focusNode: focusNode,
|
|
11274
11260
|
focusOffset: focusOffset
|
|
11275
11261
|
});
|
|
11276
|
-
if (window.getSelection().toString().length) {
|
|
11277
|
-
|
|
11262
|
+
if ((_window$getSelection = window.getSelection()) !== null && _window$getSelection !== void 0 && _window$getSelection.toString().length) {
|
|
11263
|
+
var _window$getSelection$, _window$getSelection2;
|
|
11264
|
+
setTextValue((_window$getSelection$ = (_window$getSelection2 = window.getSelection()) === null || _window$getSelection2 === void 0 ? void 0 : _window$getSelection2.toString()) != null ? _window$getSelection$ : '');
|
|
11278
11265
|
}
|
|
11279
|
-
var aux = selection.anchorNode.parentElement;
|
|
11280
|
-
while (
|
|
11266
|
+
var aux = (_selection$anchorNode = selection.anchorNode) === null || _selection$anchorNode === void 0 ? void 0 : _selection$anchorNode.parentElement;
|
|
11267
|
+
while (aux && aux.getAttribute('id') !== props.editorId) {
|
|
11281
11268
|
if (aux.tagName === 'A') {
|
|
11282
|
-
|
|
11269
|
+
var _aux$getAttribute;
|
|
11270
|
+
setUrlValue((_aux$getAttribute = aux.getAttribute('href')) != null ? _aux$getAttribute : '');
|
|
11283
11271
|
setNewTab(aux.getAttribute('target') === '_blank');
|
|
11284
11272
|
setUpdating(true);
|
|
11285
11273
|
break;
|
|
@@ -11296,60 +11284,57 @@ function TextEditorUrlCreator(props) {
|
|
|
11296
11284
|
}
|
|
11297
11285
|
}, [props.opened]);
|
|
11298
11286
|
var handleSubmit = function handleSubmit() {
|
|
11287
|
+
var _window$getSelection3;
|
|
11299
11288
|
if (!urlValue || !textValue) return;
|
|
11300
|
-
window.getSelection().setBaseAndExtent(previousSelection.anchorNode, previousSelection.anchorOffset, previousSelection.focusNode, previousSelection.focusOffset);
|
|
11289
|
+
(_window$getSelection3 = window.getSelection()) === null || _window$getSelection3 === void 0 ? void 0 : _window$getSelection3.setBaseAndExtent(previousSelection.anchorNode, previousSelection.anchorOffset, previousSelection.focusNode, previousSelection.focusOffset);
|
|
11301
11290
|
props.onChange(textValue, urlValue, newTab);
|
|
11302
11291
|
};
|
|
11303
|
-
return
|
|
11292
|
+
return React$1__default.createElement("div", {
|
|
11304
11293
|
id: id,
|
|
11305
11294
|
className: rootClassName$2D
|
|
11306
|
-
},
|
|
11295
|
+
}, React$1__default.createElement(Row$1, {
|
|
11307
11296
|
className: rootClassName$2D + "-url-row"
|
|
11308
|
-
},
|
|
11309
|
-
label:
|
|
11297
|
+
}, React$1__default.createElement(TextEditorHeaderInput, {
|
|
11298
|
+
label: 'Url',
|
|
11310
11299
|
value: urlValue,
|
|
11311
11300
|
onChange: function onChange(evt) {
|
|
11312
11301
|
return setUrlValue(evt.target.value);
|
|
11313
11302
|
},
|
|
11314
11303
|
onEnter: handleSubmit
|
|
11315
|
-
})),
|
|
11304
|
+
})), React$1__default.createElement(Row$1, {
|
|
11316
11305
|
className: rootClassName$2D + "-text-row"
|
|
11317
|
-
},
|
|
11318
|
-
label:
|
|
11306
|
+
}, React$1__default.createElement(TextEditorHeaderInput, {
|
|
11307
|
+
label: 'Texto',
|
|
11319
11308
|
value: textValue,
|
|
11320
11309
|
onChange: function onChange(evt) {
|
|
11321
11310
|
return setTextValue(evt.target.value);
|
|
11322
11311
|
},
|
|
11323
11312
|
onEnter: handleSubmit
|
|
11324
|
-
})),
|
|
11313
|
+
})), React$1__default.createElement(Row$1, {
|
|
11325
11314
|
className: rootClassName$2D + "-new-tab-row"
|
|
11326
|
-
},
|
|
11315
|
+
}, React$1__default.createElement(Checkbox$1, {
|
|
11327
11316
|
value: newTab,
|
|
11328
11317
|
onChange: function onChange(value) {
|
|
11329
11318
|
return setNewTab(value);
|
|
11330
11319
|
}
|
|
11331
|
-
}),
|
|
11320
|
+
}), React$1__default.createElement("span", {
|
|
11332
11321
|
onClick: function onClick() {
|
|
11333
11322
|
return setNewTab(!newTab);
|
|
11334
11323
|
}
|
|
11335
|
-
}, "Nova Guia")),
|
|
11324
|
+
}, "Nova Guia")), React$1__default.createElement(Row$1, {
|
|
11336
11325
|
className: rootClassName$2D + "-ok-row"
|
|
11337
|
-
},
|
|
11326
|
+
}, React$1__default.createElement(TextEditorMenuButton, {
|
|
11338
11327
|
disabled: !urlValue || !textValue,
|
|
11339
11328
|
onClick: handleSubmit
|
|
11340
11329
|
}, isUpdating ? 'Atualizar' : 'OK')));
|
|
11341
11330
|
}
|
|
11342
|
-
TextEditorUrlCreator.propTypes = {
|
|
11343
|
-
opened: propTypes.bool,
|
|
11344
|
-
onChange: propTypes.func,
|
|
11345
|
-
editorId: propTypes.string
|
|
11346
|
-
};
|
|
11347
11331
|
TextEditorUrlCreator.defaultProps = {
|
|
11348
11332
|
onChange: function onChange() {}
|
|
11349
11333
|
};
|
|
11350
11334
|
|
|
11351
11335
|
var rootClassName$2E = 'component-text-editor';
|
|
11352
11336
|
function TextEditor(props) {
|
|
11337
|
+
var _cursor$foreColor;
|
|
11353
11338
|
var _useState = React$1.useState(getUniqueKey()),
|
|
11354
11339
|
id = _useState[0];
|
|
11355
11340
|
var _useState2 = React$1.useState(false),
|
|
@@ -11388,11 +11373,13 @@ function TextEditor(props) {
|
|
|
11388
11373
|
var selection = window.getSelection();
|
|
11389
11374
|
if (!selection || !selection.anchorNode) return;
|
|
11390
11375
|
var aux = selection.anchorNode.parentElement;
|
|
11391
|
-
while (!aux.hasAttribute('class'
|
|
11376
|
+
while (aux && !((_aux = aux) !== null && _aux !== void 0 && _aux.hasAttribute('class'))) {
|
|
11377
|
+
var _aux;
|
|
11392
11378
|
if (aux.tagName === 'A') {
|
|
11393
11379
|
isLink = true;
|
|
11394
11380
|
} else if (aux.tagName === 'FONT') {
|
|
11395
|
-
|
|
11381
|
+
var _aux$getAttribute;
|
|
11382
|
+
fore = (_aux$getAttribute = aux.getAttribute('color')) != null ? _aux$getAttribute : '';
|
|
11396
11383
|
}
|
|
11397
11384
|
aux = aux.parentElement;
|
|
11398
11385
|
}
|
|
@@ -11408,25 +11395,28 @@ function TextEditor(props) {
|
|
|
11408
11395
|
justifyFull: document.queryCommandState('justifyFull')
|
|
11409
11396
|
}));
|
|
11410
11397
|
};
|
|
11411
|
-
var handleChange = function handleChange(
|
|
11398
|
+
var handleChange = function handleChange() {
|
|
11412
11399
|
var editor = document.querySelector("#" + id);
|
|
11413
11400
|
if (typeof props.onChange === 'function') props.onChange(editor.innerHTML, String(editor.innerText).trim().replace(/\n/g, ' '));
|
|
11414
11401
|
};
|
|
11415
11402
|
var handlePaste = function handlePaste(evt) {
|
|
11416
11403
|
evt.preventDefault();
|
|
11417
|
-
var text =
|
|
11404
|
+
var text = (evt.originalEvent || evt).clipboardData.getData('text/plain');
|
|
11418
11405
|
if (document.queryCommandSupported('insertText')) {
|
|
11419
11406
|
document.execCommand('insertText', false, text);
|
|
11420
11407
|
} else {
|
|
11421
|
-
var
|
|
11422
|
-
range.
|
|
11423
|
-
|
|
11424
|
-
|
|
11425
|
-
|
|
11426
|
-
|
|
11427
|
-
|
|
11428
|
-
|
|
11429
|
-
|
|
11408
|
+
var _document$getSelectio;
|
|
11409
|
+
var range = (_document$getSelectio = document.getSelection()) === null || _document$getSelectio === void 0 ? void 0 : _document$getSelectio.getRangeAt(0);
|
|
11410
|
+
if (range) {
|
|
11411
|
+
range.deleteContents();
|
|
11412
|
+
var textNode = document.createTextNode(text);
|
|
11413
|
+
range.insertNode(textNode);
|
|
11414
|
+
range.selectNodeContents(textNode);
|
|
11415
|
+
range.collapse(false);
|
|
11416
|
+
var selection = window.getSelection();
|
|
11417
|
+
selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
|
|
11418
|
+
selection === null || selection === void 0 ? void 0 : selection.addRange(range);
|
|
11419
|
+
}
|
|
11430
11420
|
}
|
|
11431
11421
|
};
|
|
11432
11422
|
React$1.useEffect(function () {
|
|
@@ -11434,28 +11424,29 @@ function TextEditor(props) {
|
|
|
11434
11424
|
editor.addEventListener('input', handleChange);
|
|
11435
11425
|
editor.addEventListener('paste', handlePaste);
|
|
11436
11426
|
return function () {
|
|
11437
|
-
editor.
|
|
11427
|
+
editor.removeEventListener('paste', handlePaste);
|
|
11438
11428
|
editor.removeEventListener('input', handleChange);
|
|
11439
11429
|
};
|
|
11440
11430
|
}, []);
|
|
11441
11431
|
React$1.useEffect(function () {
|
|
11442
11432
|
var editor = document.querySelector("#" + id);
|
|
11443
11433
|
if (editor.innerHTML.toString() !== props.value) {
|
|
11444
|
-
|
|
11434
|
+
var _props$value;
|
|
11435
|
+
editor.innerHTML = (_props$value = props.value) != null ? _props$value : '';
|
|
11445
11436
|
}
|
|
11446
11437
|
}, [props.value]);
|
|
11447
|
-
return
|
|
11438
|
+
return React$1__default.createElement("div", {
|
|
11448
11439
|
className: rootClassName$2E + "-outer"
|
|
11449
|
-
}, !props.hideTopLabel &&
|
|
11440
|
+
}, !props.hideTopLabel && React$1__default.createElement("div", {
|
|
11450
11441
|
className: getMergedClassNames([rootClassName$2E + "-top-label", props.disabled ? 'disabled' : '', props.error ? 'error' : ''])
|
|
11451
|
-
}, props.topLabel),
|
|
11442
|
+
}, props.topLabel), React$1__default.createElement("div", Object.assign({}, getProps()), React$1__default.createElement("div", {
|
|
11452
11443
|
className: rootClassName$2E + "-header"
|
|
11453
|
-
},
|
|
11444
|
+
}, React$1__default.createElement("div", {
|
|
11454
11445
|
className: rootClassName$2E + "-left-content"
|
|
11455
|
-
},
|
|
11446
|
+
}, React$1__default.createElement(DropdownMenu, {
|
|
11456
11447
|
opened: fontOpened,
|
|
11457
11448
|
setOpened: setFontOpened,
|
|
11458
|
-
content:
|
|
11449
|
+
content: React$1__default.createElement(TextEditorTitleChoser, {
|
|
11459
11450
|
opened: fontOpened,
|
|
11460
11451
|
onChange: function onChange(title) {
|
|
11461
11452
|
if (title === void 0) {
|
|
@@ -11465,144 +11456,146 @@ function TextEditor(props) {
|
|
|
11465
11456
|
setFontOpened(false);
|
|
11466
11457
|
}
|
|
11467
11458
|
})
|
|
11468
|
-
},
|
|
11459
|
+
}, React$1__default.createElement(TextEditorHeaderButton, {
|
|
11469
11460
|
disabled: props.disabled,
|
|
11470
11461
|
onClick: function onClick() {
|
|
11471
|
-
|
|
11462
|
+
var _document$querySelect;
|
|
11463
|
+
(_document$querySelect = document.querySelector("#" + id)) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.focus();
|
|
11472
11464
|
setFontOpened(!fontOpened);
|
|
11473
11465
|
},
|
|
11474
|
-
icon:
|
|
11475
|
-
})),
|
|
11466
|
+
icon: React$1__default.createElement(FontIcon, null)
|
|
11467
|
+
})), React$1__default.createElement(DropdownMenu, {
|
|
11476
11468
|
opened: fontColorOpened,
|
|
11477
11469
|
setOpened: setFontColorOpened,
|
|
11478
|
-
content:
|
|
11470
|
+
content: React$1__default.createElement(TextEditorColorPicker, {
|
|
11479
11471
|
opened: fontColorOpened,
|
|
11480
|
-
atualColor: cursor.foreColor,
|
|
11472
|
+
atualColor: (_cursor$foreColor = cursor.foreColor) != null ? _cursor$foreColor : '',
|
|
11481
11473
|
onChange: function onChange(color) {
|
|
11474
|
+
var _document$querySelect2;
|
|
11482
11475
|
format('foreColor', color);
|
|
11483
11476
|
setFontColorOpened(false);
|
|
11484
|
-
document.querySelector("#" + id).focus();
|
|
11477
|
+
(_document$querySelect2 = document.querySelector("#" + id)) === null || _document$querySelect2 === void 0 ? void 0 : _document$querySelect2.focus();
|
|
11485
11478
|
}
|
|
11486
11479
|
})
|
|
11487
|
-
},
|
|
11480
|
+
}, React$1__default.createElement(TextEditorHeaderButton, {
|
|
11488
11481
|
disabled: props.disabled,
|
|
11489
11482
|
onClick: function onClick() {
|
|
11490
|
-
|
|
11483
|
+
var _document$querySelect3;
|
|
11484
|
+
(_document$querySelect3 = document.querySelector("#" + id)) === null || _document$querySelect3 === void 0 ? void 0 : _document$querySelect3.focus();
|
|
11491
11485
|
setFontColorOpened(!fontColorOpened);
|
|
11492
11486
|
},
|
|
11493
|
-
icon:
|
|
11487
|
+
icon: React$1__default.createElement(FontColorIcon, {
|
|
11494
11488
|
gota: cursor.foreColor
|
|
11495
11489
|
})
|
|
11496
|
-
})),
|
|
11490
|
+
})), React$1__default.createElement(TextEditorHeaderButton, {
|
|
11497
11491
|
disabled: props.disabled,
|
|
11498
11492
|
active: cursor.bold,
|
|
11499
|
-
icon:
|
|
11493
|
+
icon: React$1__default.createElement(BoldIcon, null),
|
|
11500
11494
|
onClick: function onClick() {
|
|
11495
|
+
var _document$querySelect4;
|
|
11501
11496
|
format('bold');
|
|
11502
|
-
document.querySelector("#" + id).focus();
|
|
11497
|
+
(_document$querySelect4 = document.querySelector("#" + id)) === null || _document$querySelect4 === void 0 ? void 0 : _document$querySelect4.focus();
|
|
11503
11498
|
}
|
|
11504
|
-
}),
|
|
11499
|
+
}), React$1__default.createElement(TextEditorHeaderButton, {
|
|
11505
11500
|
disabled: props.disabled,
|
|
11506
11501
|
active: cursor.italic,
|
|
11507
|
-
icon:
|
|
11502
|
+
icon: React$1__default.createElement(ItalicIcon, null),
|
|
11508
11503
|
onClick: function onClick() {
|
|
11504
|
+
var _document$querySelect5;
|
|
11509
11505
|
format('italic');
|
|
11510
|
-
document.querySelector("#" + id).focus();
|
|
11506
|
+
(_document$querySelect5 = document.querySelector("#" + id)) === null || _document$querySelect5 === void 0 ? void 0 : _document$querySelect5.focus();
|
|
11511
11507
|
}
|
|
11512
|
-
}),
|
|
11508
|
+
}), React$1__default.createElement(TextEditorHeaderButton, {
|
|
11513
11509
|
disabled: props.disabled,
|
|
11514
11510
|
active: cursor.underline,
|
|
11515
|
-
icon:
|
|
11511
|
+
icon: React$1__default.createElement(UnderlineIcon, null),
|
|
11516
11512
|
onClick: function onClick() {
|
|
11513
|
+
var _document$querySelect6;
|
|
11517
11514
|
format('underline');
|
|
11518
|
-
document.querySelector("#" + id).focus();
|
|
11515
|
+
(_document$querySelect6 = document.querySelector("#" + id)) === null || _document$querySelect6 === void 0 ? void 0 : _document$querySelect6.focus();
|
|
11519
11516
|
}
|
|
11520
|
-
}),
|
|
11517
|
+
}), React$1__default.createElement(DropdownMenu, {
|
|
11521
11518
|
opened: linkOpened,
|
|
11522
11519
|
setOpened: setLinkOpened,
|
|
11523
|
-
content:
|
|
11520
|
+
content: React$1__default.createElement(TextEditorUrlCreator, {
|
|
11524
11521
|
editorId: id,
|
|
11525
11522
|
opened: linkOpened,
|
|
11526
11523
|
onChange: function onChange(text, link, newTab) {
|
|
11524
|
+
var _document$querySelect7;
|
|
11527
11525
|
format('insertHTML', "<a href=\"" + link + "\"" + (newTab ? 'target="_blank"' : '') + ">" + text + "</a>");
|
|
11528
11526
|
setLinkOpened(false);
|
|
11529
|
-
document.querySelector("#" + id).focus();
|
|
11527
|
+
(_document$querySelect7 = document.querySelector("#" + id)) === null || _document$querySelect7 === void 0 ? void 0 : _document$querySelect7.focus();
|
|
11530
11528
|
}
|
|
11531
11529
|
})
|
|
11532
|
-
},
|
|
11530
|
+
}, React$1__default.createElement(TextEditorHeaderButton, {
|
|
11533
11531
|
disabled: props.disabled,
|
|
11534
11532
|
active: cursor.link,
|
|
11535
11533
|
onClick: function onClick() {
|
|
11536
|
-
|
|
11534
|
+
var _document$querySelect8;
|
|
11535
|
+
(_document$querySelect8 = document.querySelector("#" + id)) === null || _document$querySelect8 === void 0 ? void 0 : _document$querySelect8.focus();
|
|
11537
11536
|
setLinkOpened(!linkOpened);
|
|
11538
11537
|
},
|
|
11539
|
-
icon:
|
|
11540
|
-
})),
|
|
11538
|
+
icon: React$1__default.createElement(LinkIcon, null)
|
|
11539
|
+
})), React$1__default.createElement(TextEditorHeaderButton, {
|
|
11541
11540
|
disabled: props.disabled,
|
|
11542
11541
|
active: cursor.justifyLeft,
|
|
11543
|
-
icon:
|
|
11542
|
+
icon: React$1__default.createElement(AlignLeftIcon, null),
|
|
11544
11543
|
onClick: function onClick() {
|
|
11544
|
+
var _document$querySelect9;
|
|
11545
11545
|
format('justifyLeft');
|
|
11546
|
-
document.querySelector("#" + id).focus();
|
|
11546
|
+
(_document$querySelect9 = document.querySelector("#" + id)) === null || _document$querySelect9 === void 0 ? void 0 : _document$querySelect9.focus();
|
|
11547
11547
|
}
|
|
11548
|
-
}),
|
|
11548
|
+
}), React$1__default.createElement(TextEditorHeaderButton, {
|
|
11549
11549
|
disabled: props.disabled,
|
|
11550
11550
|
active: cursor.justifyFull,
|
|
11551
|
-
icon:
|
|
11551
|
+
icon: React$1__default.createElement(AlignJustifyIcon, null),
|
|
11552
11552
|
onClick: function onClick() {
|
|
11553
|
+
var _document$querySelect10;
|
|
11553
11554
|
format('justifyFull');
|
|
11554
|
-
document.querySelector("#" + id).focus();
|
|
11555
|
+
(_document$querySelect10 = document.querySelector("#" + id)) === null || _document$querySelect10 === void 0 ? void 0 : _document$querySelect10.focus();
|
|
11555
11556
|
}
|
|
11556
|
-
}),
|
|
11557
|
+
}), React$1__default.createElement(TextEditorHeaderButton, {
|
|
11557
11558
|
disabled: props.disabled,
|
|
11558
11559
|
active: cursor.justifyCenter,
|
|
11559
|
-
icon:
|
|
11560
|
+
icon: React$1__default.createElement(AlignCenterIcon, null),
|
|
11560
11561
|
onClick: function onClick() {
|
|
11562
|
+
var _document$querySelect11;
|
|
11561
11563
|
format('justifyCenter');
|
|
11562
|
-
document.querySelector("#" + id).focus();
|
|
11564
|
+
(_document$querySelect11 = document.querySelector("#" + id)) === null || _document$querySelect11 === void 0 ? void 0 : _document$querySelect11.focus();
|
|
11563
11565
|
}
|
|
11564
|
-
}),
|
|
11566
|
+
}), React$1__default.createElement(TextEditorHeaderButton, {
|
|
11565
11567
|
disabled: props.disabled,
|
|
11566
11568
|
active: cursor.justifyRight,
|
|
11567
|
-
icon:
|
|
11569
|
+
icon: React$1__default.createElement(AlignRightIcon, null),
|
|
11568
11570
|
onClick: function onClick() {
|
|
11571
|
+
var _document$querySelect12;
|
|
11569
11572
|
format('justifyRight');
|
|
11570
|
-
document.querySelector("#" + id).focus();
|
|
11573
|
+
(_document$querySelect12 = document.querySelector("#" + id)) === null || _document$querySelect12 === void 0 ? void 0 : _document$querySelect12.focus();
|
|
11571
11574
|
}
|
|
11572
|
-
})),
|
|
11575
|
+
})), React$1__default.createElement("div", {
|
|
11573
11576
|
className: rootClassName$2E + "-right-content"
|
|
11574
|
-
},
|
|
11577
|
+
}, React$1__default.createElement(TextEditorHeaderButton, {
|
|
11575
11578
|
disabled: props.disabled,
|
|
11576
|
-
icon:
|
|
11579
|
+
icon: React$1__default.createElement(UndoIcon, null),
|
|
11577
11580
|
onClick: function onClick() {
|
|
11578
11581
|
return format('undo');
|
|
11579
11582
|
}
|
|
11580
|
-
}),
|
|
11583
|
+
}), React$1__default.createElement(TextEditorHeaderButton, {
|
|
11581
11584
|
disabled: props.disabled,
|
|
11582
|
-
icon:
|
|
11585
|
+
icon: React$1__default.createElement(RedoIcon, null),
|
|
11583
11586
|
onClick: function onClick() {
|
|
11584
11587
|
return format('redo');
|
|
11585
11588
|
}
|
|
11586
|
-
}))),
|
|
11589
|
+
}))), React$1__default.createElement("div", {
|
|
11587
11590
|
id: id,
|
|
11588
11591
|
className: rootClassName$2E + "-editor",
|
|
11589
11592
|
contentEditable: !props.disabled,
|
|
11590
11593
|
onClick: verifyCursor,
|
|
11591
11594
|
onKeyUp: verifyCursor
|
|
11592
|
-
})), !props.hideHelperText &&
|
|
11595
|
+
})), !props.hideHelperText && React$1__default.createElement("div", {
|
|
11593
11596
|
className: getMergedClassNames([rootClassName$2E + "-helper-text", props.disabled ? 'disabled' : '', props.error ? 'error' : ''])
|
|
11594
11597
|
}, props.helperText));
|
|
11595
11598
|
}
|
|
11596
|
-
TextEditor.propTypes = {
|
|
11597
|
-
disabled: propTypes.bool,
|
|
11598
|
-
value: propTypes.string,
|
|
11599
|
-
onChange: propTypes.func,
|
|
11600
|
-
topLabel: propTypes.oneOfType([propTypes.string, propTypes.object]),
|
|
11601
|
-
helperText: propTypes.oneOfType([propTypes.string, propTypes.object]),
|
|
11602
|
-
hideTopLabel: propTypes.bool,
|
|
11603
|
-
hideHelperText: propTypes.bool,
|
|
11604
|
-
error: propTypes.bool
|
|
11605
|
-
};
|
|
11606
11599
|
TextEditor.defaultProps = {
|
|
11607
11600
|
disabled: false,
|
|
11608
11601
|
value: '',
|