@pareto-engineering/design-system 4.0.0-alpha.39 → 4.0.0-alpha.41
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/cjs/a/People/common/Person/Person.js +4 -4
- package/dist/cjs/a/People/styles.scss +10 -4
- package/dist/cjs/b/Card/common/Group/Group.js +1 -1
- package/dist/cjs/f/fields/EditorInput/EditorInput.js +191 -0
- package/dist/cjs/f/fields/EditorInput/common/Toolbar.js +193 -0
- package/dist/cjs/f/fields/EditorInput/common/TreeViewPlugin.js +19 -0
- package/dist/cjs/f/fields/EditorInput/common/index.js +20 -0
- package/dist/cjs/f/fields/EditorInput/index.js +13 -0
- package/dist/cjs/f/fields/EditorInput/styles.scss +119 -0
- package/dist/cjs/f/fields/QueryCombobox/common/Combobox/Combobox.js +1 -1
- package/dist/cjs/f/fields/QueryCombobox/styles.scss +4 -1
- package/dist/cjs/f/fields/index.js +8 -1
- package/dist/es/a/People/common/Person/Person.js +4 -4
- package/dist/es/a/People/styles.scss +10 -4
- package/dist/es/b/Card/common/Group/Group.js +1 -1
- package/dist/es/f/fields/EditorInput/EditorInput.js +186 -0
- package/dist/es/f/fields/EditorInput/common/Toolbar.js +182 -0
- package/dist/es/f/fields/EditorInput/common/TreeViewPlugin.js +11 -0
- package/dist/es/f/fields/EditorInput/common/index.js +2 -0
- package/dist/es/f/fields/EditorInput/index.js +2 -0
- package/dist/es/f/fields/EditorInput/styles.scss +119 -0
- package/dist/es/f/fields/QueryCombobox/common/Combobox/Combobox.js +1 -1
- package/dist/es/f/fields/QueryCombobox/styles.scss +4 -1
- package/dist/es/f/fields/index.js +2 -1
- package/package.json +5 -3
- package/src/stories/a/People.stories.jsx +20 -0
- package/src/stories/f/EditorInput.stories.jsx +88 -0
- package/src/ui/a/People/common/Person/Person.jsx +4 -4
- package/src/ui/a/People/styles.scss +10 -4
- package/src/ui/b/Card/common/Group/Group.jsx +1 -1
- package/src/ui/f/fields/EditorInput/EditorInput.jsx +237 -0
- package/src/ui/f/fields/EditorInput/common/Toolbar.jsx +254 -0
- package/src/ui/f/fields/EditorInput/common/TreeViewPlugin.jsx +16 -0
- package/src/ui/f/fields/EditorInput/common/index.jsx +2 -0
- package/src/ui/f/fields/EditorInput/index.js +2 -0
- package/src/ui/f/fields/EditorInput/styles.scss +119 -0
- package/src/ui/f/fields/QueryCombobox/common/Combobox/Combobox.jsx +1 -0
- package/src/ui/f/fields/QueryCombobox/styles.scss +4 -1
- package/src/ui/f/fields/index.js +1 -0
- package/tests/__snapshots__/Storyshots.test.js.snap +703 -4
|
@@ -15,6 +15,12 @@ Object.defineProperty(exports, "ChoicesInput", {
|
|
|
15
15
|
return _ChoicesInput.ChoicesInput;
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
|
+
Object.defineProperty(exports, "EditorInput", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function () {
|
|
21
|
+
return _EditorInput.EditorInput;
|
|
22
|
+
}
|
|
23
|
+
});
|
|
18
24
|
Object.defineProperty(exports, "LinkInput", {
|
|
19
25
|
enumerable: true,
|
|
20
26
|
get: function () {
|
|
@@ -72,4 +78,5 @@ var _QueryCombobox = require("./QueryCombobox");
|
|
|
72
78
|
var _QuerySelect = require("./QuerySelect");
|
|
73
79
|
var _Checkbox = require("./Checkbox");
|
|
74
80
|
var _QueryChoices = require("./QueryChoices");
|
|
75
|
-
var _LinkInput = require("./LinkInput");
|
|
81
|
+
var _LinkInput = require("./LinkInput");
|
|
82
|
+
var _EditorInput = require("./EditorInput");
|
|
@@ -30,9 +30,9 @@ const Person = ({
|
|
|
30
30
|
alt: `${name}, ${role}`
|
|
31
31
|
}), /*#__PURE__*/React.createElement("div", {
|
|
32
32
|
className: "details"
|
|
33
|
-
}, /*#__PURE__*/React.createElement("p", {
|
|
33
|
+
}, name && /*#__PURE__*/React.createElement("p", {
|
|
34
34
|
className: "name"
|
|
35
|
-
}, name), /*#__PURE__*/React.createElement("p", {
|
|
35
|
+
}, name), role && /*#__PURE__*/React.createElement("p", {
|
|
36
36
|
className: "role"
|
|
37
37
|
}, role)));
|
|
38
38
|
Person.propTypes = {
|
|
@@ -55,11 +55,11 @@ Person.propTypes = {
|
|
|
55
55
|
/**
|
|
56
56
|
* The person's name
|
|
57
57
|
*/
|
|
58
|
-
name: PropTypes.string
|
|
58
|
+
name: PropTypes.string,
|
|
59
59
|
/**
|
|
60
60
|
* The person's role
|
|
61
61
|
*/
|
|
62
|
-
role: PropTypes.string
|
|
62
|
+
role: PropTypes.string,
|
|
63
63
|
/**
|
|
64
64
|
* The base color of the person's component
|
|
65
65
|
*/
|
|
@@ -11,7 +11,9 @@ $default-padding:var(--u);
|
|
|
11
11
|
$default-horizontal-margin: .5em;
|
|
12
12
|
|
|
13
13
|
$default-grid-gap: 1em;
|
|
14
|
-
$default-
|
|
14
|
+
$default-margin: 1.5rem;
|
|
15
|
+
$default-image-margin: var(--default-image-margin, #{$default-margin});
|
|
16
|
+
$default-color: var(--default-color, var(--grey));
|
|
15
17
|
|
|
16
18
|
.#{bem.$base}.people {
|
|
17
19
|
display: grid;
|
|
@@ -29,18 +31,22 @@ $default-image-padding: 1.5rem;
|
|
|
29
31
|
.image {
|
|
30
32
|
border-radius: $default-border-radius;
|
|
31
33
|
height: var(--image-size);
|
|
32
|
-
margin-right: $default-image-
|
|
34
|
+
margin-right: $default-image-margin;
|
|
33
35
|
width: var(--image-size);
|
|
34
36
|
}
|
|
35
37
|
|
|
36
38
|
.details {
|
|
37
39
|
align-items: flex-start;
|
|
38
|
-
color:
|
|
40
|
+
color: $default-color;
|
|
39
41
|
display: flex;
|
|
40
42
|
flex-direction: column;
|
|
41
43
|
|
|
44
|
+
p:only-child {
|
|
45
|
+
margin: 0;
|
|
46
|
+
}
|
|
47
|
+
|
|
42
48
|
.name {
|
|
43
|
-
color:
|
|
49
|
+
color: $default-color;
|
|
44
50
|
margin-bottom: .1em;
|
|
45
51
|
}
|
|
46
52
|
|
|
@@ -23,7 +23,7 @@ const Group = ({
|
|
|
23
23
|
import("./styles.scss");
|
|
24
24
|
}, []);
|
|
25
25
|
const Wrapper = type === 'snap-scroller' ? SnapScroller : 'div';
|
|
26
|
-
const wrapperProps = type === 'snap-scroller' ? {
|
|
26
|
+
const wrapperProps = type === 'snap-scroller' && desktopType !== 'snap-scroller' ? {
|
|
27
27
|
noScrollOnDesktop: true
|
|
28
28
|
} : {};
|
|
29
29
|
return /*#__PURE__*/React.createElement(Wrapper, _extends({
|
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
/* @pareto-engineering/generator-front 1.0.12 */
|
|
2
|
+
/* eslint-disable import/no-extraneous-dependencies -- required here */
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { useInsertionEffect, memo } from 'react';
|
|
5
|
+
import { useFormikContext } from 'formik';
|
|
6
|
+
import { LexicalComposer } from '@lexical/react/LexicalComposer';
|
|
7
|
+
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
|
|
8
|
+
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
|
|
9
|
+
import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
|
|
10
|
+
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
|
|
11
|
+
import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
|
|
12
|
+
import { ListPlugin } from '@lexical/react/LexicalListPlugin';
|
|
13
|
+
import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin';
|
|
14
|
+
import { AutoLinkNode, LinkNode } from '@lexical/link';
|
|
15
|
+
import { ListItemNode, ListNode } from '@lexical/list';
|
|
16
|
+
import PropTypes from 'prop-types';
|
|
17
|
+
import styleNames from '@pareto-engineering/bem/exports';
|
|
18
|
+
|
|
19
|
+
// Local Definitions
|
|
20
|
+
|
|
21
|
+
import { FormLabel, FormDescription, InputWrapper } from "../../common";
|
|
22
|
+
import { Toolbar, TreeViewPlugin } from "./common";
|
|
23
|
+
const baseClassName = styleNames.base;
|
|
24
|
+
const componentClassName = 'editor-input';
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* This is the component description.
|
|
28
|
+
*/
|
|
29
|
+
const EditorInput = ({
|
|
30
|
+
id,
|
|
31
|
+
className: userClassName,
|
|
32
|
+
style,
|
|
33
|
+
name,
|
|
34
|
+
label,
|
|
35
|
+
// validate,
|
|
36
|
+
resize,
|
|
37
|
+
color,
|
|
38
|
+
rows,
|
|
39
|
+
optional,
|
|
40
|
+
labelColor,
|
|
41
|
+
description,
|
|
42
|
+
disabled,
|
|
43
|
+
labelSpan,
|
|
44
|
+
desktopLabelSpan,
|
|
45
|
+
inputSpan,
|
|
46
|
+
desktopInputSpan,
|
|
47
|
+
showDebugger
|
|
48
|
+
// ...otherProps
|
|
49
|
+
}) => {
|
|
50
|
+
useInsertionEffect(() => {
|
|
51
|
+
import("./styles.scss");
|
|
52
|
+
}, []);
|
|
53
|
+
const formik = useFormikContext();
|
|
54
|
+
const setInitialValue = () => {
|
|
55
|
+
const value = formik.values[name];
|
|
56
|
+
return value || undefined;
|
|
57
|
+
};
|
|
58
|
+
const onChange = state => {
|
|
59
|
+
formik.setValues({
|
|
60
|
+
...formik.values,
|
|
61
|
+
[name]: JSON.stringify(state)
|
|
62
|
+
});
|
|
63
|
+
};
|
|
64
|
+
const initialConfig = {
|
|
65
|
+
nameSpace: name,
|
|
66
|
+
editable: !disabled,
|
|
67
|
+
editorState: setInitialValue(),
|
|
68
|
+
theme: {
|
|
69
|
+
text: {
|
|
70
|
+
italic: 'italic',
|
|
71
|
+
strikethrough: 'strikethrough',
|
|
72
|
+
underline: 'underlined'
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
nodes: [AutoLinkNode, LinkNode, ListNode, ListItemNode]
|
|
76
|
+
};
|
|
77
|
+
return /*#__PURE__*/React.createElement(LexicalComposer, {
|
|
78
|
+
initialConfig: initialConfig
|
|
79
|
+
}, /*#__PURE__*/React.createElement(FormLabel, {
|
|
80
|
+
name: name,
|
|
81
|
+
color: labelColor,
|
|
82
|
+
optional: optional,
|
|
83
|
+
columnSpan: labelSpan,
|
|
84
|
+
desktopColumnSpan: desktopLabelSpan
|
|
85
|
+
// {...otherProps}
|
|
86
|
+
}, label), /*#__PURE__*/React.createElement(InputWrapper, {
|
|
87
|
+
id: id,
|
|
88
|
+
className: [baseClassName, componentClassName, userClassName, `y-${color}`, disabled && 'disabled'].filter(e => e).join(' '),
|
|
89
|
+
style: {
|
|
90
|
+
...style,
|
|
91
|
+
'--resize': resize,
|
|
92
|
+
'--rows': `${rows}em`
|
|
93
|
+
},
|
|
94
|
+
columnSpan: inputSpan,
|
|
95
|
+
desktopColumnSpan: desktopInputSpan
|
|
96
|
+
}, !disabled && /*#__PURE__*/React.createElement(Toolbar, null), /*#__PURE__*/React.createElement(RichTextPlugin, {
|
|
97
|
+
contentEditable: /*#__PURE__*/React.createElement(ContentEditable, {
|
|
98
|
+
id: name,
|
|
99
|
+
className: "content-editable"
|
|
100
|
+
})
|
|
101
|
+
}), /*#__PURE__*/React.createElement(OnChangePlugin, {
|
|
102
|
+
onChange: onChange
|
|
103
|
+
}), /*#__PURE__*/React.createElement(LinkPlugin, null), /*#__PURE__*/React.createElement(ListPlugin, null), /*#__PURE__*/React.createElement(TabIndentationPlugin, null), /*#__PURE__*/React.createElement(HistoryPlugin, null), /*#__PURE__*/React.createElement(FormDescription, {
|
|
104
|
+
className: "s-1",
|
|
105
|
+
description: description,
|
|
106
|
+
name: name
|
|
107
|
+
}), showDebugger && /*#__PURE__*/React.createElement(TreeViewPlugin, null)));
|
|
108
|
+
};
|
|
109
|
+
EditorInput.propTypes = {
|
|
110
|
+
/**
|
|
111
|
+
* The HTML id for this element
|
|
112
|
+
*/
|
|
113
|
+
id: PropTypes.string,
|
|
114
|
+
/**
|
|
115
|
+
* The HTML class names for this element
|
|
116
|
+
*/
|
|
117
|
+
className: PropTypes.string,
|
|
118
|
+
/**
|
|
119
|
+
* The React-written, css properties for this element.
|
|
120
|
+
*/
|
|
121
|
+
style: PropTypes.objectOf(PropTypes.string),
|
|
122
|
+
/**
|
|
123
|
+
* The input name (html - and Formik state)
|
|
124
|
+
*/
|
|
125
|
+
name: PropTypes.string.isRequired,
|
|
126
|
+
/**
|
|
127
|
+
* The input label
|
|
128
|
+
*/
|
|
129
|
+
label: PropTypes.string.isRequired,
|
|
130
|
+
/**
|
|
131
|
+
* The input value validator function
|
|
132
|
+
*/
|
|
133
|
+
// validate:PropTypes.func,
|
|
134
|
+
|
|
135
|
+
/**
|
|
136
|
+
* The number of rows int the text area
|
|
137
|
+
*/
|
|
138
|
+
rows: PropTypes.number,
|
|
139
|
+
/**
|
|
140
|
+
* Color of the text
|
|
141
|
+
*/
|
|
142
|
+
color: PropTypes.string,
|
|
143
|
+
/**
|
|
144
|
+
* Label base color
|
|
145
|
+
*/
|
|
146
|
+
labelColor: PropTypes.string,
|
|
147
|
+
/**
|
|
148
|
+
* Text area description
|
|
149
|
+
*/
|
|
150
|
+
description: PropTypes.string,
|
|
151
|
+
/**
|
|
152
|
+
* Whether the text area should be disabled
|
|
153
|
+
*/
|
|
154
|
+
disabled: PropTypes.bool,
|
|
155
|
+
/**
|
|
156
|
+
* Whether the input is optional or not
|
|
157
|
+
*/
|
|
158
|
+
optional: PropTypes.bool,
|
|
159
|
+
/**
|
|
160
|
+
* The number of columns the label should span
|
|
161
|
+
*/
|
|
162
|
+
labelSpan: PropTypes.number,
|
|
163
|
+
/**
|
|
164
|
+
* The number of columns the input should span
|
|
165
|
+
*/
|
|
166
|
+
inputSpan: PropTypes.number,
|
|
167
|
+
/**
|
|
168
|
+
* The number of columns the label should span on desktop
|
|
169
|
+
*/
|
|
170
|
+
desktopLabelSpan: PropTypes.number,
|
|
171
|
+
/**
|
|
172
|
+
* The number of columns the input should span on desktop
|
|
173
|
+
*/
|
|
174
|
+
desktopInputSpan: PropTypes.number,
|
|
175
|
+
/**
|
|
176
|
+
* The resize property of the text area
|
|
177
|
+
*/
|
|
178
|
+
resize: PropTypes.oneOf(['none', 'both', 'horizontal', 'vertical'])
|
|
179
|
+
};
|
|
180
|
+
EditorInput.defaultProps = {
|
|
181
|
+
rows: 10,
|
|
182
|
+
disabled: false,
|
|
183
|
+
color: 'paragraph',
|
|
184
|
+
resize: 'vertical'
|
|
185
|
+
};
|
|
186
|
+
export default /*#__PURE__*/memo(EditorInput);
|
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
/* eslint-disable import/no-extraneous-dependencies -- required here */
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { useEffect, useState, useCallback } from 'react';
|
|
4
|
+
import { $getSelection, $isRangeSelection, FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, UNDO_COMMAND, REDO_COMMAND } from 'lexical';
|
|
5
|
+
import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND, $isListNode, ListNode } from '@lexical/list';
|
|
6
|
+
import { $isAtNodeEnd } from '@lexical/selection';
|
|
7
|
+
import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
|
|
8
|
+
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
|
|
9
|
+
import { mergeRegister, $getNearestNodeOfType } from '@lexical/utils';
|
|
10
|
+
import styleNames from '@pareto-engineering/bem/exports';
|
|
11
|
+
const baseClassName = styleNames.base;
|
|
12
|
+
const componentClassName = 'toolbar';
|
|
13
|
+
const getSelectedNode = selection => {
|
|
14
|
+
const {
|
|
15
|
+
anchor,
|
|
16
|
+
focus
|
|
17
|
+
} = selection;
|
|
18
|
+
const anchorNode = selection.anchor.getNode();
|
|
19
|
+
const focusNode = selection.focus.getNode();
|
|
20
|
+
if (anchorNode === focusNode) {
|
|
21
|
+
return anchorNode;
|
|
22
|
+
}
|
|
23
|
+
const isBackward = selection.isBackward();
|
|
24
|
+
if (isBackward) {
|
|
25
|
+
return $isAtNodeEnd(focus) ? anchorNode : focusNode;
|
|
26
|
+
}
|
|
27
|
+
return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
|
|
28
|
+
};
|
|
29
|
+
const Toolbar = () => {
|
|
30
|
+
const [editor] = useLexicalComposerContext();
|
|
31
|
+
const [isBold, setIsBold] = useState(false);
|
|
32
|
+
const [isItalic, setIsItalic] = useState(false);
|
|
33
|
+
const [isStrikethrough, setIsStrikethrough] = useState(false);
|
|
34
|
+
const [blockType, setBlockType] = useState('paragraph');
|
|
35
|
+
const [isLink, setIsLink] = useState(false);
|
|
36
|
+
const [isUnderline, setIsUnderline] = useState(false);
|
|
37
|
+
const formatBulletList = () => {
|
|
38
|
+
if (blockType !== 'ul') {
|
|
39
|
+
editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND);
|
|
40
|
+
} else {
|
|
41
|
+
editor.dispatchCommand(REMOVE_LIST_COMMAND);
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
const formatNumberedList = () => {
|
|
45
|
+
if (blockType !== 'ol') {
|
|
46
|
+
editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND);
|
|
47
|
+
} else {
|
|
48
|
+
editor.dispatchCommand(REMOVE_LIST_COMMAND);
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
const formatLink = useCallback(() => {
|
|
52
|
+
if (!isLink) {
|
|
53
|
+
// eslint-disable-next-line no-alert
|
|
54
|
+
const path = prompt('Enter the full URL. Ex: https://www.example.com');
|
|
55
|
+
editor.dispatchCommand(TOGGLE_LINK_COMMAND, path);
|
|
56
|
+
} else {
|
|
57
|
+
editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
|
|
58
|
+
}
|
|
59
|
+
}, [editor, isLink]);
|
|
60
|
+
const updateToolbar = useCallback(() => {
|
|
61
|
+
const selection = $getSelection();
|
|
62
|
+
|
|
63
|
+
// Check list selection
|
|
64
|
+
if ($isRangeSelection(selection)) {
|
|
65
|
+
const anchorNode = selection.anchor.getNode();
|
|
66
|
+
const element = anchorNode.getKey() === 'root' ? anchorNode : anchorNode.getTopLevelElementOrThrow();
|
|
67
|
+
if ($isListNode(element)) {
|
|
68
|
+
const parentList = $getNearestNodeOfType(anchorNode, ListNode);
|
|
69
|
+
const type = parentList ? parentList.getTag() : element.getTag();
|
|
70
|
+
setBlockType(type);
|
|
71
|
+
} else {
|
|
72
|
+
setBlockType(element);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
// Check selection text styles
|
|
76
|
+
setIsBold(selection.hasFormat('bold'));
|
|
77
|
+
setIsItalic(selection.hasFormat('italic'));
|
|
78
|
+
setIsStrikethrough(selection.hasFormat('strikethrough'));
|
|
79
|
+
setIsUnderline(selection.hasFormat('underline'));
|
|
80
|
+
setIsLink(selection.hasFormat('link'));
|
|
81
|
+
|
|
82
|
+
// Check links
|
|
83
|
+
const node = getSelectedNode(selection);
|
|
84
|
+
const parent = node.getParent();
|
|
85
|
+
if ($isLinkNode(parent) || $isLinkNode(node)) {
|
|
86
|
+
setIsLink(true);
|
|
87
|
+
} else {
|
|
88
|
+
setIsLink(false);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}, [editor]);
|
|
92
|
+
useEffect(() => mergeRegister(editor.registerUpdateListener(({
|
|
93
|
+
editorState
|
|
94
|
+
}) => {
|
|
95
|
+
editorState.read(() => {
|
|
96
|
+
updateToolbar();
|
|
97
|
+
});
|
|
98
|
+
})), [updateToolbar, editor]);
|
|
99
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
100
|
+
className: `${baseClassName} ${componentClassName}`
|
|
101
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
102
|
+
className: "group"
|
|
103
|
+
}, /*#__PURE__*/React.createElement("button", {
|
|
104
|
+
type: "button",
|
|
105
|
+
className: isBold ? 'active' : undefined,
|
|
106
|
+
onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')
|
|
107
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
108
|
+
className: "icon"
|
|
109
|
+
}, "|")), /*#__PURE__*/React.createElement("button", {
|
|
110
|
+
type: "button",
|
|
111
|
+
className: isItalic ? 'active' : undefined,
|
|
112
|
+
onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')
|
|
113
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
114
|
+
className: "icon"
|
|
115
|
+
}, "}")), /*#__PURE__*/React.createElement("button", {
|
|
116
|
+
type: "button",
|
|
117
|
+
className: isUnderline ? 'active' : undefined,
|
|
118
|
+
onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline')
|
|
119
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
120
|
+
className: "icon"
|
|
121
|
+
}, "~")), /*#__PURE__*/React.createElement("button", {
|
|
122
|
+
type: "button",
|
|
123
|
+
className: isStrikethrough ? 'active' : undefined,
|
|
124
|
+
onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')
|
|
125
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
126
|
+
className: "icon"
|
|
127
|
+
}, "?")), /*#__PURE__*/React.createElement("button", {
|
|
128
|
+
type: "button",
|
|
129
|
+
className: isLink ? 'active' : undefined,
|
|
130
|
+
onClick: () => formatLink()
|
|
131
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
132
|
+
className: "icon"
|
|
133
|
+
}, "]")), /*#__PURE__*/React.createElement("button", {
|
|
134
|
+
type: "button",
|
|
135
|
+
className: blockType === 'ul' ? 'active' : undefined,
|
|
136
|
+
onClick: () => formatBulletList()
|
|
137
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
138
|
+
className: "icon"
|
|
139
|
+
}, ".")), /*#__PURE__*/React.createElement("button", {
|
|
140
|
+
type: "button",
|
|
141
|
+
className: blockType === 'ol' ? 'active' : undefined,
|
|
142
|
+
onClick: () => formatNumberedList()
|
|
143
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
144
|
+
className: "icon"
|
|
145
|
+
}, "-"))), /*#__PURE__*/React.createElement("div", {
|
|
146
|
+
className: "group"
|
|
147
|
+
}, /*#__PURE__*/React.createElement("button", {
|
|
148
|
+
type: "button",
|
|
149
|
+
onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'left')
|
|
150
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
151
|
+
className: "icon"
|
|
152
|
+
}, "^")), /*#__PURE__*/React.createElement("button", {
|
|
153
|
+
type: "button",
|
|
154
|
+
onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'center')
|
|
155
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
156
|
+
className: "icon"
|
|
157
|
+
}, "_")), /*#__PURE__*/React.createElement("button", {
|
|
158
|
+
type: "button",
|
|
159
|
+
onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'right')
|
|
160
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
161
|
+
className: "icon"
|
|
162
|
+
}, "`")), /*#__PURE__*/React.createElement("button", {
|
|
163
|
+
type: "button",
|
|
164
|
+
onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'justify')
|
|
165
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
166
|
+
className: "icon"
|
|
167
|
+
}, "{"))), /*#__PURE__*/React.createElement("div", {
|
|
168
|
+
className: "group"
|
|
169
|
+
}, /*#__PURE__*/React.createElement("button", {
|
|
170
|
+
type: "button",
|
|
171
|
+
onClick: () => editor.dispatchCommand(UNDO_COMMAND)
|
|
172
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
173
|
+
className: "icon"
|
|
174
|
+
}, "\\")), /*#__PURE__*/React.createElement("button", {
|
|
175
|
+
type: "button",
|
|
176
|
+
className: "flip",
|
|
177
|
+
onClick: () => editor.dispatchCommand(REDO_COMMAND)
|
|
178
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
179
|
+
className: "icon"
|
|
180
|
+
}, "\\"))));
|
|
181
|
+
};
|
|
182
|
+
export default Toolbar;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
|
|
3
|
+
import { TreeView } from '@lexical/react/LexicalTreeView';
|
|
4
|
+
const TreeViewPlugin = () => {
|
|
5
|
+
const [editor] = useLexicalComposerContext();
|
|
6
|
+
return /*#__PURE__*/React.createElement(TreeView, {
|
|
7
|
+
viewClassName: "tree-view-output",
|
|
8
|
+
editor: editor
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
export default TreeViewPlugin;
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
/* @pareto-engineering/generator-front 1.0.12 */
|
|
2
|
+
/* stylelint-disable max-nesting-depth -- required here */
|
|
3
|
+
|
|
4
|
+
@use "@pareto-engineering/bem";
|
|
5
|
+
@use "@pareto-engineering/styles/src/mixins";
|
|
6
|
+
@use "@pareto-engineering/styles/src/globals" as *;
|
|
7
|
+
|
|
8
|
+
$default-gap: calc(var(--gap) / 2);
|
|
9
|
+
$default-padding: .55em .75em;
|
|
10
|
+
$default-border: 1px solid var(--outline-inputs);
|
|
11
|
+
$default-input-border-radius: var(--theme-default-input-border-radius);
|
|
12
|
+
$default-border: var(--theme-default-input-border);
|
|
13
|
+
$focus-border: var(--theme-focus-input-border);
|
|
14
|
+
$active-background: var(--hard-background-inputs);
|
|
15
|
+
$default-background: var(--background-inputs);
|
|
16
|
+
$disabled-background: var(--background-inputs-30);
|
|
17
|
+
|
|
18
|
+
.#{bem.$base}.editor-input {
|
|
19
|
+
&.#{bem.$base}.input-wrapper {
|
|
20
|
+
display: flex;
|
|
21
|
+
flex-direction: column;
|
|
22
|
+
|
|
23
|
+
> .#{bem.$base}.toolbar {
|
|
24
|
+
display: flex;
|
|
25
|
+
gap: $default-gap;
|
|
26
|
+
margin-bottom: .25em;
|
|
27
|
+
|
|
28
|
+
> .group {
|
|
29
|
+
> button {
|
|
30
|
+
background: $default-background;
|
|
31
|
+
border: $default-border;
|
|
32
|
+
padding: $default-padding;
|
|
33
|
+
|
|
34
|
+
&.active {
|
|
35
|
+
background-color: $active-background;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.flip {
|
|
41
|
+
transform: scaleX(-1);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&:not(.disabled) {
|
|
46
|
+
&:hover,
|
|
47
|
+
&:focus,
|
|
48
|
+
&:active {
|
|
49
|
+
> .textarea {
|
|
50
|
+
border: $focus-border;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
&.disabled {
|
|
56
|
+
> .textarea {
|
|
57
|
+
background: $disabled-background;
|
|
58
|
+
color: var(--metadata);
|
|
59
|
+
cursor: not-allowed;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
> .content-editable {
|
|
64
|
+
background: $default-background;
|
|
65
|
+
border: $default-border;
|
|
66
|
+
border-radius: $default-input-border-radius;
|
|
67
|
+
color: var(--y);
|
|
68
|
+
height: var(--rows);
|
|
69
|
+
outline: none;
|
|
70
|
+
overflow: auto;
|
|
71
|
+
padding: $default-padding;
|
|
72
|
+
resize: var(--resize);
|
|
73
|
+
width: 100%;
|
|
74
|
+
|
|
75
|
+
li:has(ol, ul) {
|
|
76
|
+
list-style-type: none;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
p,
|
|
80
|
+
span,
|
|
81
|
+
strong,
|
|
82
|
+
em,
|
|
83
|
+
li {
|
|
84
|
+
&.underlined {
|
|
85
|
+
text-decoration: underline;
|
|
86
|
+
|
|
87
|
+
&.strikethrough {
|
|
88
|
+
text-decoration: underline line-through;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
&.strikethrough {
|
|
93
|
+
text-decoration: line-through;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
&.italic {
|
|
97
|
+
font-style: italic;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
:first-child {
|
|
102
|
+
margin-top: 0;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
&::placeholder {
|
|
106
|
+
color: var(--metadata);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
> .tree-view-output {
|
|
112
|
+
background: $default-background;
|
|
113
|
+
border: $default-border;
|
|
114
|
+
border-radius: $default-input-border-radius;
|
|
115
|
+
max-height: 20em;
|
|
116
|
+
overflow: auto;
|
|
117
|
+
padding: $default-padding;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
@@ -93,7 +93,7 @@ const Combobox = ({
|
|
|
93
93
|
desktopColumnSpan: desktopLabelSpan
|
|
94
94
|
}), label), /*#__PURE__*/React.createElement(InputWrapper, _extends({
|
|
95
95
|
id: id,
|
|
96
|
-
className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
|
|
96
|
+
className: [baseClassName, componentClassName, userClassName, `y-${color}`].filter(e => e).join(' '),
|
|
97
97
|
style: style,
|
|
98
98
|
ref: parentRef
|
|
99
99
|
}, getComboboxProps(), {
|
|
@@ -14,7 +14,9 @@ $default-border: var(--theme-default-input-border);
|
|
|
14
14
|
$hover-border: var(--theme-hover-input-border);
|
|
15
15
|
$focus-border: var(--theme-focus-input-border);
|
|
16
16
|
$default-background: var(--background-inputs);
|
|
17
|
+
$on-default-background: var(--paragraph);
|
|
17
18
|
$disabled-background: var(--background-inputs-30);
|
|
19
|
+
$on-disabled-background: var(--on-background-inputs-30);
|
|
18
20
|
|
|
19
21
|
.#{bem.$base}.combobox,
|
|
20
22
|
.#{bem.$base}.multiple-combobox {
|
|
@@ -74,7 +76,7 @@ $disabled-background: var(--background-inputs-30);
|
|
|
74
76
|
background: $default-background;
|
|
75
77
|
border: $default-border;
|
|
76
78
|
border-radius: calc(var(--theme-default-border-radius) / 2);
|
|
77
|
-
color:
|
|
79
|
+
color: $on-default-background;
|
|
78
80
|
outline: none;
|
|
79
81
|
padding: $default-input-padding;
|
|
80
82
|
|
|
@@ -84,6 +86,7 @@ $disabled-background: var(--background-inputs-30);
|
|
|
84
86
|
|
|
85
87
|
&:disabled {
|
|
86
88
|
background-color: $disabled-background;
|
|
89
|
+
color: $on-disabled-background;
|
|
87
90
|
}
|
|
88
91
|
|
|
89
92
|
&:not(:disabled) {
|
|
@@ -7,4 +7,5 @@ export { QueryCombobox } from "./QueryCombobox";
|
|
|
7
7
|
export { QuerySelect } from "./QuerySelect";
|
|
8
8
|
export { Checkbox } from "./Checkbox";
|
|
9
9
|
export { QueryChoices } from "./QueryChoices";
|
|
10
|
-
export { LinkInput } from "./LinkInput";
|
|
10
|
+
export { LinkInput } from "./LinkInput";
|
|
11
|
+
export { EditorInput } from "./EditorInput";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pareto-engineering/design-system",
|
|
3
|
-
"version": "4.0.0-alpha.
|
|
3
|
+
"version": "4.0.0-alpha.41",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/es/index.js",
|
|
@@ -50,7 +50,8 @@
|
|
|
50
50
|
"style-loader": "^3.3.2"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@
|
|
53
|
+
"@lexical/react": "^0.11.3",
|
|
54
|
+
"@pareto-engineering/assets": "^4.0.0-alpha.40",
|
|
54
55
|
"@pareto-engineering/bem": "^4.0.0-alpha.20",
|
|
55
56
|
"@pareto-engineering/styles": "^4.0.0-alpha.39",
|
|
56
57
|
"@pareto-engineering/utils": "^4.0.0-alpha.33",
|
|
@@ -58,6 +59,7 @@
|
|
|
58
59
|
"downshift": "^6.1.12",
|
|
59
60
|
"formik": "^2.2.9",
|
|
60
61
|
"hamburgers": "^1.2.1",
|
|
62
|
+
"lexical": "^0.11.3",
|
|
61
63
|
"lodash": "^4.17.21",
|
|
62
64
|
"prop-types": "^15.8.1",
|
|
63
65
|
"react": "^18.2.0",
|
|
@@ -68,5 +70,5 @@
|
|
|
68
70
|
"relay-test-utils": "^15.0.0"
|
|
69
71
|
},
|
|
70
72
|
"browserslist": "> 2%",
|
|
71
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "d02bcd514202331d31637ec62653fb2ce4f33c93"
|
|
72
74
|
}
|