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