From d5b459f5ee0df98da605ae1eb9046c5fba626879 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Thu, 31 Mar 2022 22:21:11 +0300
Subject: [PATCH] update option text
---
editors/demo/src/HHMI/HHMI.js | 2 +-
.../components/DropDownComponent.js | 5 +--
.../components/MatchingContainerComponent.js | 45 +++++++++++++------
.../components/MatchingOptionComponent.js | 2 +-
4 files changed, 35 insertions(+), 19 deletions(-)
diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js
index 01e244d5e..8aa1e6446 100644
--- a/editors/demo/src/HHMI/HHMI.js
+++ b/editors/demo/src/HHMI/HHMI.js
@@ -54,7 +54,7 @@ const Hhmi = () => {
value={t}
readonly={readOnly}
layout={HhmiLayout}
- onChange={source => console.log(source)}
+ // onChange={source => console.log(source)}
/>
</>
);
diff --git a/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js b/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
index 5b9697036..5b99e1e08 100644
--- a/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
+++ b/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
@@ -39,8 +39,7 @@ const DropdownStyled = styled(Dropdown)`
}
`;
-const DropComponent = ({ options }) => {
- console.log(options);
+const DropComponent = ({ getPos, node, view }) => {
const context = useContext(WaxContext);
const {
pmViews: { main },
@@ -75,7 +74,7 @@ const DropComponent = ({ options }) => {
<DropdownStyled
key={uuidv4()}
onChange={option => onChange(option)}
- options={options}
+ options={[]}
placeholder="Select option"
select
value="Select option"
diff --git a/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js b/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js
index 14dfd9721..e7bd2da50 100644
--- a/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js
+++ b/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js
@@ -118,6 +118,7 @@ export default ({ node, view, getPos }) => {
pmViews: { main },
} = context;
const [options, setOptions] = useState(node.attrs.options);
+ const [optionText, setOptionText] = useState('');
const [addingOption, setAddingOption] = useState(false);
const addOptionRef = useRef(null);
@@ -129,31 +130,44 @@ export default ({ node, view, getPos }) => {
const readOnly = !isEditable;
- const addOption = () => {
- if (addOptionRef.current.value.trim() === '') return;
- const obj = { label: addOptionRef.current.value, key: uuidv4() };
- setOptions(prevOptions => [...prevOptions, obj]);
- setAddingOption(true);
- setTimeout(() => {
- setAddingOption(false);
- });
- };
-
useEffect(() => {
const allNodes = getNodes(main);
if (!addingOption) return;
allNodes.forEach(singleNode => {
if (singleNode.node.attrs.id === node.attrs.id) {
main.dispatch(
- main.state.tr.setNodeMarkup(getPos(), undefined, {
- ...singleNode.node.attrs,
- options,
- }),
+ main.state.tr
+ .setMeta('addToHistory', false)
+ .setNodeMarkup(getPos(), undefined, {
+ ...singleNode.node.attrs,
+ options,
+ }),
);
}
});
}, [options]);
+ const addOption = () => {
+ if (addOptionRef.current.value.trim() === '') return;
+ const obj = { label: addOptionRef.current.value, key: uuidv4() };
+ setOptions(prevOptions => [...prevOptions, obj]);
+ setAddingOption(true);
+ setTimeout(() => {
+ setAddingOption(false);
+ });
+ setOptionText('');
+ };
+
+ const updateOptionText = () => {
+ setOptionText(addOptionRef.current.value);
+ };
+
+ const handleKeyDown = event => {
+ if (event.key === 'Enter' || event.which === 13) {
+ addOption();
+ }
+ };
+
const removeOption = key => {
setOptions(options.filter(option => option.key !== key));
setAddingOption(true);
@@ -195,9 +209,12 @@ export default ({ node, view, getPos }) => {
</OptionArea>
<AddOption>
<input
+ onChange={updateOptionText}
+ onKeyPress={handleKeyDown}
placeholder="Type an option ..."
ref={addOptionRef}
type="text"
+ value={optionText}
/>
<button onClick={addOption} type="button">
Add Option
diff --git a/wax-prosemirror-services/src/MatchingService/components/MatchingOptionComponent.js b/wax-prosemirror-services/src/MatchingService/components/MatchingOptionComponent.js
index 0f492adc6..c2f6a1d34 100644
--- a/wax-prosemirror-services/src/MatchingService/components/MatchingOptionComponent.js
+++ b/wax-prosemirror-services/src/MatchingService/components/MatchingOptionComponent.js
@@ -106,7 +106,7 @@ export default ({ node, view, getPos }) => {
)}
<EditorComponent getPos={getPos} node={node} view={view} />
<DropDownContainer>
- <DropDownComponent options={options} />
+ <DropDownComponent getPos={getPos} node={node} view={view} />
</DropDownContainer>
</Option>
);
--
GitLab