diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js
index 05e3769fa96b75c92e5f9d7da34c363eb9bbea20..58e26fb8cf0939141047a8e97f1609070ce149dc 100644
--- a/editors/demo/src/HHMI/HHMI.js
+++ b/editors/demo/src/HHMI/HHMI.js
@@ -30,17 +30,144 @@ const initialValue = {
content: [
{
type: 'text',
- text: ' ',
+ text:
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros turpis, imperdiet viverra purus eget, ferment',
+ },
+ ],
+ },
+ {
+ type: 'paragraph',
+ attrs: {
+ id: '',
+ class: 'paragraph',
+ track: [],
+ group: '',
+ viewid: '',
+ },
+ content: [
+ {
+ type: 'text',
+ text:
+ 'um porttitor dui. Etiam quis venenatis risus, sit amet bibendum turpis. this is an addition Vestibulum non nibh at dolor sodales euismod. Maecenas mattis nulla in eros pretium, eu commodo sem sagittis. Nam eu v',
+ },
+ ],
+ },
+ {
+ type: 'math_display',
+ content: [
+ {
+ type: 'text',
+ text: 'x+y = 1',
+ },
+ ],
+ },
+ {
+ type: 'paragraph',
+ attrs: {
+ id: '',
+ class: 'paragraph',
+ track: [],
+ group: '',
+ viewid: '',
+ },
+ content: [
+ {
+ type: 'text',
+ text:
+ 'arius justo. Nullam volutpat diam sit amet nunc aliquam convallis. Aliquam non eleifend dolor. Cras in urna lacinia, tempor tellus non, ',
+ },
+ ],
+ },
+ {
+ type: 'question_wrapper',
+ attrs: {
+ class: 'question',
+ },
+ content: [
+ {
+ type: 'multiple_choice',
+ attrs: {
+ id: '7b6a992f-8a12-44b5-9112-67bfd80e053c',
+ },
+ content: [
+ {
+ type: 'text',
+ text: 'r ljjfljs dfljsdl jklkfj sr wrw',
+ },
+ ],
+ },
+ {
+ type: 'multiple_choice',
+ attrs: {
+ id: '92c98be1-41a5-4c4c-bbba-747635df8878',
+ },
+ content: [
+ {
+ type: 'text',
+ text: 'fwefwrewr wwrrwe',
+ },
+ ],
+ },
+ {
+ type: 'multiple_choice',
+ attrs: {
+ id: 'd51e74fb-a571-416e-82aa-2aef36f4218c',
+ },
+ content: [
+ {
+ type: 'text',
+ text: 'da;lf kfsdf l;',
+ },
+ {
+ type: 'math_inline',
+ content: [
+ {
+ type: 'text',
+ text: ' x+y=5',
+ },
+ ],
+ },
+ {
+ type: 'text',
+ text: ' fk dfs;ldkf',
+ },
+ ],
+ },
+ {
+ type: 'multiple_choice',
+ attrs: {
+ id: '03c71f12-3d95-4da8-8b13-71d77f3ce6a1',
+ },
+ content: [
+ {
+ type: 'text',
+ text: 'q f fwe r ',
+ },
+ {
+ type: 'math_inline',
+ content: [
+ {
+ type: 'text',
+ text:
+ ' A = \\begin{bmatrix} x & y \\\\ z & w \\end{bmatrix} ',
+ },
+ ],
+ },
+ {
+ type: 'text',
+ text: ' f’d fsd;f skf lfsd’fls f’fsdl',
+ },
+ ],
},
{
type: 'multiple_choice',
attrs: {
- id: '206bda35-858e-422d-a90d-164b7f460eb0',
+ id: '6e42010c-7c2d-4a55-a556-0691ac3e7d39',
},
content: [
{
type: 'text',
- text: 'sss',
+ text: 'erw wr wrwer',
},
],
},
diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestion.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestion.js
index 246b1bab0ef10a27552dfe89ced9706a2796aab2..99c378f1bc0a3733c143e69340622150989d6af0 100644
--- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestion.js
+++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestion.js
@@ -3,6 +3,7 @@ import { Tools } from 'wax-prosemirror-services';
import { Fragment } from 'prosemirror-model';
import { v4 as uuidv4 } from 'uuid';
+let a = true;
@injectable()
class MultipleChoiceQuestion extends Tools {
title = 'Add Multiple Choice Question';
@@ -11,19 +12,56 @@ class MultipleChoiceQuestion extends Tools {
get run() {
return (state, dispatch) => {
- const { empty, $from, $to } = state.selection;
- let content = Fragment.empty;
- if (!empty && $from.sameParent($to) && $from.parent.inlineContent)
- content = $from.parent.content.cut(
- $from.parentOffset,
- $to.parentOffset,
- );
-
- const footnote = state.config.schema.nodes.multiple_choice.create(
- { id: uuidv4() },
- content,
- );
- dispatch(state.tr.replaceSelectionWith(footnote));
+ console.log(state);
+ const { from, to } = state.selection;
+ const { tr } = state;
+
+ state.schema.nodes.question_wrapper.spec.atom = false;
+
+ setTimeout(() => {
+ state.doc.nodesBetween(from, to, (node, pos) => {
+ if (node.type.name === 'question_wrapper') {
+ const { empty, $from, $to } = state.selection;
+ let content = Fragment.empty;
+ if (!empty && $from.sameParent($to) && $from.parent.inlineContent)
+ content = $from.parent.content.cut(
+ $from.parentOffset,
+ $to.parentOffset,
+ );
+
+ const answerOption = state.config.schema.nodes.multiple_choice.create(
+ { id: uuidv4() },
+ content,
+ );
+ dispatch(tr.replaceSelectionWith(answerOption));
+ } else {
+ tr.setBlockType(
+ from,
+ to,
+ state.config.schema.nodes.question_wrapper,
+ {
+ class: 'question',
+ },
+ );
+ if (!tr.steps.length) return false;
+ const { empty, $from, $to } = state.selection;
+ let content = Fragment.empty;
+ if (!empty && $from.sameParent($to) && $from.parent.inlineContent)
+ content = $from.parent.content.cut(
+ $from.parentOffset,
+ $to.parentOffset,
+ );
+
+ const answerOption = state.config.schema.nodes.multiple_choice.create(
+ { id: uuidv4() },
+ content,
+ );
+ dispatch(tr.replaceSelectionWith(answerOption));
+ // dispatch(state.tr.replaceSelectionWith(footnote));
+ }
+ });
+ state.schema.nodes.question_wrapper.spec.atom = true;
+ });
};
}
diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestionService.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestionService.js
index 0deff73db9cfcab1534e4cce32cc36cde2937fd0..589f9e4b78efccbda6cd364619d42910488c9f76 100644
--- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestionService.js
+++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestionService.js
@@ -15,6 +15,31 @@ class MultipleChoiceQuestionService extends Service {
multiple_choice: multipleChoiceNode,
});
+ createNode({
+ question_wrapper: {
+ group: 'block',
+ // atom: true,
+ content: 'inline*',
+ attrs: {
+ class: { default: 'paragraph' },
+ },
+ parseDOM: [
+ {
+ tag: 'p.question',
+ getAttrs(dom) {
+ return {
+ id: dom.dataset.id,
+ class: dom.getAttribute('class'),
+ };
+ },
+ },
+ ],
+ toDOM(node) {
+ return ['p', node.attrs, 0];
+ },
+ },
+ });
+
const addPortal = this.container.get('AddPortal');
addPortal({ nodeView, component: QuestionComponent, context: this.app });
}
diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/EditorComponent.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/EditorComponent.js
index f47b0bf7128f2ffb8586b5edf8711f981000013a..04043120bee5181314c3a511cecd321ca3d19ec8 100644
--- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/EditorComponent.js
+++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/EditorComponent.js
@@ -15,11 +15,21 @@ const EditorComponent = ({ node, view, getPos }) => {
const context = useContext(WaxContext);
let questionView;
const questionId = node.attrs.id;
+ const isEditable = context.view.main.props.editable(editable => {
+ return editable;
+ });
+
+ console.log(context.activeViewId);
+ console.log('node', node.attrs.id);
+ if (context.activeViewId === node.attrs.id) {
+ console.log('sss');
+ }
useEffect(() => {
questionView = new EditorView(
{ mount: editorRef.current },
{
+ editable: () => isEditable,
state: EditorState.create({
doc: node,
plugins: [keymap(createKeyBindings()), ...context.app.getPlugins()],
@@ -35,6 +45,11 @@ const EditorComponent = ({ node, view, getPos }) => {
if (questionView.hasFocus()) questionView.focus();
},
},
+ handleKeyDown: (editoView, keyEvent) => {
+ if (keyEvent.key === 'Enter') {
+ console.log('create new');
+ }
+ },
attributes: {
spellcheck: 'false',
@@ -49,6 +64,7 @@ const EditorComponent = ({ node, view, getPos }) => {
},
questionId,
);
+ questionView.focus();
}, []);
const dispatchTransaction = tr => {
diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/QuestionComponent.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/QuestionComponent.js
index 052f54c19b0c6d89d2caf7a8efdc748e16b93733..8d12be66b6c9e6a1a09369a136be79680c4d8fe3 100644
--- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/QuestionComponent.js
+++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/QuestionComponent.js
@@ -1,33 +1,65 @@
/* eslint-disable react-hooks/exhaustive-deps */
-import React, { useRef, useState } from 'react';
+import React, { useContext, useRef, useState } from 'react';
import styled from 'styled-components';
-
+import { TextSelection } from 'prosemirror-state';
+import { WaxContext } from 'wax-prosemirror-core';
import EditorComponent from './EditorComponent';
const QuestionWrapper = styled.div`
- border: 1px solid black;
display: flex;
flex-direction: column;
+ &:before {
+ bottom: -20px;
+ content: 'Answer ' counter(question-item-multiple);
+ counter-increment: question-item-multiple;
+ position: relative;
+ }
`;
-const Question = styled.div`
+const QuestionWrapperInner = styled.div`
+ border: 1px solid #a5a1a2;
+ border-radius: 4px;
display: flex;
- flex-direction: row;
+ flex-direction: column;
+ padding: 4px;
+`;
- input {
- position: relative;
- top: 5px;
- width: 4%;
+const CorrectLabel = styled.span`
+ margin-left: auto;
+`;
+
+const ChooseAnswer = styled.div`
+ border: 1px solid #a5a1a2;
+ border-radius: 4px;
+ display: flex;
+ flex-direction: row;
+ height: 25px;
+ margin-left: auto;
+ padding: 4px;
+ >div: first-of-type {
+ padding-right: 4px;
}
+`;
+
+const YesNoContainer = styled.div`
+ bottom: 3px;
+ color: #a5a1a2;
+ position: relative;
+`;
+
+const Question = styled.div`
+ display: flex;
+ flex-direction: row;
.ProseMirror {
background: #ebebf0;
padding: 5px;
- width: 96%;
+ width: 90%;
}
`;
export default ({ node, view, getPos }) => {
+ const context = useContext(WaxContext);
const [showExplanation, setShowExplanation] = useState(false);
const [explanationValue, setExplanationValue] = useState('');
const explanationRef = useRef(null);
@@ -40,22 +72,44 @@ export default ({ node, view, getPos }) => {
setShowExplanation(!showExplanation);
};
+ const handleKeyDown = e => {
+ if (e.key === 'Backspace') {
+ context.view.main.dispatch(
+ context.view.main.state.tr.setSelection(
+ new TextSelection(context.view.main.state.tr.doc.resolve(0)),
+ ),
+ );
+ }
+ };
+
+ const removeOption = () => {};
+
+ const setNoYesValues = () => {};
+
return (
<QuestionWrapper>
- <Question>
- <input type="checkbox" />
- <EditorComponent node={node} view={view} getPos={getPos} />
- </Question>
- <button onClick={clickMe}>Show Explanation</button>
- {showExplanation && (
- <input
- type="text"
- ref={explanationRef}
- onChange={onChangeExplanationInput}
- placeholder="type your explanation"
- value={explanationValue}
- ></input>
- )}
+ <CorrectLabel>Correct?</CorrectLabel>
+ <QuestionWrapperInner>
+ <Question>
+ <EditorComponent node={node} view={view} getPos={getPos} />
+ <ChooseAnswer>
+ <YesNoContainer onClick={setNoYesValues}>No</YesNoContainer>
+ <YesNoContainer onClick={setNoYesValues}>Yes</YesNoContainer>
+ </ChooseAnswer>
+ </Question>
+ <button onClick={clickMe}>Show Explanation</button>
+ {showExplanation && (
+ <input
+ type="text"
+ onKeyDown={handleKeyDown}
+ ref={explanationRef}
+ onChange={onChangeExplanationInput}
+ placeholder="type your explanation"
+ value={explanationValue}
+ ></input>
+ )}
+ <button onClick={removeOption}> X </button>
+ </QuestionWrapperInner>
</QuestionWrapper>
);
};
diff --git a/editors/demo/src/HHMI/layout/EditorElements.js b/editors/demo/src/HHMI/layout/EditorElements.js
index 378569c0010d8fbd9319915d925b15686b7e2c90..f1aa9388fe145cef7f9b9ebc2d5bf1c989a6feb2 100644
--- a/editors/demo/src/HHMI/layout/EditorElements.js
+++ b/editors/demo/src/HHMI/layout/EditorElements.js
@@ -13,7 +13,7 @@ const fontWriting = css`
export default css`
.ProseMirror {
background: white;
- counter-reset: footnote;
+ counter-reset: multiple-question;
line-height: 1.6;
${fontWriting}
@@ -45,27 +45,10 @@ export default css`
}
div[contenteditable='false'] {
- // pointer-events: none;
- // user-select: none;
- }
-
- /* .ProseMirror title {
- display: inline;
- font-size: 14px;
- } */
-
- hr {
- border: none;
- margin: 1em 0;
- padding: 2px 10px;
- }
-
- hr:after {
- background-color: silver;
- content: '';
- display: block;
- height: 1px;
- line-height: 2px;
+ .math-src {
+ pointer-events: none;
+ user-select: none;
+ }
}
ul,
@@ -112,6 +95,21 @@ export default css`
}
}
+ .question {
+ border: 1px solid green;
+ counter-reset: question-item-multiple;
+ margin: 38px;
+ padding: 20px;
+
+ &:before {
+ bottom: 45px;
+ content: 'Answer Group ' counter(multiple-question) '.';
+ counter-increment: multiple-question;
+ position: relative;
+ right: 20px;
+ }
+ }
+
sup,
sub {
line-height: 0;
diff --git a/editors/demo/src/HHMI/layout/HhmiLayout.js b/editors/demo/src/HHMI/layout/HhmiLayout.js
index 3b411ae485c21d94c32d4becc38b1bfdc4f7bade..fc036fddac106ba2bbe54740a10a5ce0e17676f8 100644
--- a/editors/demo/src/HHMI/layout/HhmiLayout.js
+++ b/editors/demo/src/HHMI/layout/HhmiLayout.js
@@ -64,7 +64,7 @@ const EditorArea = styled.div`
const WaxSurfaceScroll = styled.div`
box-sizing: border-box;
display: flex;
- height: 100%;
+ height: 88%;
overflow-y: auto;
position: fixed;
top: 95px;
diff --git a/wax-prosemirror-components/src/components/EditorInfo/CounterInfo/EditorInfoTool.js b/wax-prosemirror-components/src/components/EditorInfo/CounterInfo/EditorInfoTool.js
index a29e7c0e73ba091867f20b69601d22a4f261405b..1b2b6f6e6732b74bf77031625df41150c419bb20 100644
--- a/wax-prosemirror-components/src/components/EditorInfo/CounterInfo/EditorInfoTool.js
+++ b/wax-prosemirror-components/src/components/EditorInfo/CounterInfo/EditorInfoTool.js
@@ -175,12 +175,12 @@ const EditorInfoTool = ({ view: { state }, item }) => {
}
});
setBlockLevelNodes(blockLevelCount);
- allBlockNodes.forEach(value => {
- value.node.forEach(imgs => {
- if (imgs.type.name === 'image') {
+ allBlockNodes.forEach(nodes => {
+ nodes.node.forEach(node => {
+ if (node.type.name === 'image') {
imgCounts += 1;
}
- if (imgs.type.name === 'footnote') {
+ if (node.type.groups.includes('notes')) {
footNoteCount += 1;
}
});
diff --git a/wax-prosemirror-components/src/components/textHighlight/TextHighlightingTool.js b/wax-prosemirror-components/src/components/textHighlight/TextHighlightingTool.js
index 21c013352fa477ab982c684a106bd392efe05568..1b9d641d1ba7da9077817d5d947d1d3aecebb8d3 100644
--- a/wax-prosemirror-components/src/components/textHighlight/TextHighlightingTool.js
+++ b/wax-prosemirror-components/src/components/textHighlight/TextHighlightingTool.js
@@ -31,12 +31,12 @@ const TextHighlightComponent = styled.div`
flex-direction: column;
`;
const Highlighter = styled.div`
- min-width: 25px;
+ border: 1px solid gray;
+ cursor: pointer;
+ display: inline-grid;
height: 25px;
margin: 5px;
- display: inline-grid;
- cursor: pointer;
- border: 1px solid gray;
+ min-width: 25px;
`;
const TextHighlightingTool = ({ view: { dispatch, state }, item }) => {
@@ -56,7 +56,10 @@ const TextHighlightingTool = ({ view: { dispatch, state }, item }) => {
];
const ref = useRef();
- const { activeViewId, activeView } = useContext(WaxContext);
+ const { activeViewId, activeView, view } = useContext(WaxContext);
+ const isEditable = view.main.props.editable(editable => {
+ return editable;
+ });
useOnClickOutside(ref, () => setIsOpen(false));
@@ -94,7 +97,8 @@ const TextHighlightingTool = ({ view: { dispatch, state }, item }) => {
item.run(state, dispatch, color);
};
- const isDisabled = !select(state, activeViewId, activeView);
+ let isDisabled = !select(state, activeViewId, activeView);
+ if (!isEditable) isDisabled = true;
const MenuButtonComponent = useMemo(
() => (
diff --git a/wax-prosemirror-components/src/components/transformCase/TransformCaseComponent.js b/wax-prosemirror-components/src/components/transformCase/TransformCaseComponent.js
index 16bfc266eb13656426930bd3b574bee7c7266926..5a9c9c35ce9c99db92e7bd4bcf3b12be32558fb1 100644
--- a/wax-prosemirror-components/src/components/transformCase/TransformCaseComponent.js
+++ b/wax-prosemirror-components/src/components/transformCase/TransformCaseComponent.js
@@ -43,8 +43,12 @@ const TransformCaseComponent = ({ view: { state }, item }) => {
const { icon, title, select } = item;
const [isOpen, setIsOpen] = useState(false);
const ref = useRef();
- const { activeViewId, activeView } = useContext(WaxContext);
- const isDisabled = !select(state, activeViewId, activeView);
+ const { activeViewId, activeView, view } = useContext(WaxContext);
+ const isEditable = view.main.props.editable(editable => {
+ return editable;
+ });
+ let isDisabled = !select(state, activeViewId, activeView);
+ if (!isEditable) isDisabled = true;
useOnClickOutside(ref, () => setIsOpen(false));
diff --git a/wax-prosemirror-core/src/PortalContext.js b/wax-prosemirror-core/src/PortalContext.js
index 193cc1d36f4e603db1d233bc8d162664e2afdf83..ee6cbc72095e7451adba5c1f62f36abb16274737 100644
--- a/wax-prosemirror-core/src/PortalContext.js
+++ b/wax-prosemirror-core/src/PortalContext.js
@@ -40,7 +40,7 @@ export default props => {
});
},
});
-
+ console.log(portal);
return (
<PortalContext.Provider
value={{
diff --git a/wax-prosemirror-core/src/helpers/TransformPasted.js b/wax-prosemirror-core/src/helpers/TransformPasted.js
index 884d4a1099d1ae4c21b8e270d2684aa1b2785cdd..d8e3ea42581e503cb4dd771e97fe289ca1e617f1 100644
--- a/wax-prosemirror-core/src/helpers/TransformPasted.js
+++ b/wax-prosemirror-core/src/helpers/TransformPasted.js
@@ -1,46 +1,52 @@
+/* eslint-disable array-callback-return */
+/* eslint-disable no-param-reassign */
import { forEach } from 'lodash';
import { v4 as uuidv4 } from 'uuid';
import { DocumentHelpers } from 'wax-prosemirror-utilities';
const transformPasted = (slice, view) => {
const { content } = slice;
- const commentNodes = DocumentHelpers.findChildrenByMark(
- content,
- view.state.schema.marks.comment,
- true,
- );
-
- const notes = DocumentHelpers.findChildrenByType(
- content,
- view.state.schema.nodes.footnote,
- true,
- );
-
- const allComments = [];
-
- commentNodes.map(node => {
- node.node.marks.map(comment => {
- if (comment.type.name === 'comment') {
- allComments.push(comment);
- }
+ if (view.state.schema.marks.comment) {
+ const commentNodes = DocumentHelpers.findChildrenByMark(
+ content,
+ view.state.schema.marks.comment,
+ true,
+ );
+
+ const allComments = [];
+
+ commentNodes.map(node => {
+ node.node.marks.map(comment => {
+ if (comment.type.name === 'comment') {
+ allComments.push(comment);
+ }
+ });
});
- });
- const groupedCommentsById = allComments.reduce((obj, mark) => {
- obj[mark.attrs.id] = [...(obj[mark.attrs.id] || []), mark];
- return obj;
- }, {});
+ const groupedCommentsById = allComments.reduce((obj, mark) => {
+ obj[mark.attrs.id] = [...(obj[mark.attrs.id] || []), mark];
+ return obj;
+ }, {});
- forEach(Object.keys(groupedCommentsById), key => {
- const id = uuidv4();
- forEach(groupedCommentsById[key], comment => {
- comment.attrs.id = id;
+ forEach(Object.keys(groupedCommentsById), key => {
+ const id = uuidv4();
+ forEach(groupedCommentsById[key], comment => {
+ comment.attrs.id = id;
+ });
});
- });
+ }
- notes.forEach(note => {
- note.node.attrs.id = uuidv4();
- });
+ if (view.state.schema.nodes.footnote) {
+ const notes = DocumentHelpers.findChildrenByType(
+ content,
+ view.state.schema.nodes.footnote,
+ true,
+ );
+
+ notes.forEach(note => {
+ note.node.attrs.id = uuidv4();
+ });
+ }
return slice;
};
diff --git a/wax-prosemirror-plugins/src/math/helpers/collapse-math-cmd.js b/wax-prosemirror-plugins/src/math/helpers/collapse-math-cmd.js
new file mode 100644
index 0000000000000000000000000000000000000000..057688ea8306cd3799da39ea91b9936f5163b113
--- /dev/null
+++ b/wax-prosemirror-plugins/src/math/helpers/collapse-math-cmd.js
@@ -0,0 +1,60 @@
+/* eslint-disable */
+import { TextSelection } from 'prosemirror-state';
+/**
+ * A ProseMirror command for determining whether to exit a math block, based on
+ * specific conditions. Normally called when the user has
+ *
+ * @param outerView The main ProseMirror EditorView containing this math node.
+ * @param dir Used to indicate desired cursor position upon closing a math node.
+ * When set to -1, cursor will be placed BEFORE the math node.
+ * When set to +1, cursor will be placed AFTER the math node.
+ * @param borderMode An exit condition based on cursor position and direction.
+ * @param requireEmptySelection When TRUE, only exit the math node when the
+ * (inner) selection is empty.
+ * @returns A new ProseMirror command based on the input configuration.
+ */
+export function collapseMathCmd(
+ outerView,
+ dir,
+ requireOnBorder,
+ requireEmptySelection = true,
+) {
+ // create a new ProseMirror command based on the input conditions
+ return (innerState, dispatch) => {
+ // get selection info
+ let outerState = outerView.state;
+ let { to: outerTo, from: outerFrom } = outerState.selection;
+ let { to: innerTo, from: innerFrom } = innerState.selection;
+ // only exit math node when selection is empty
+ if (requireEmptySelection && innerTo !== innerFrom) {
+ return false;
+ }
+ let currentPos = dir > 0 ? innerTo : innerFrom;
+ // when requireOnBorder is TRUE, collapse only when cursor
+ // is about to leave the bounds of the math node
+ if (requireOnBorder) {
+ // (subtract two from nodeSize to account for start and end tokens)
+ let nodeSize = innerState.doc.nodeSize - 2;
+ // early return if exit conditions not met
+ if (dir > 0 && currentPos < nodeSize) {
+ return false;
+ }
+ if (dir < 0 && currentPos > 0) {
+ return false;
+ }
+ }
+ // all exit conditions met, so close the math node by moving the cursor outside
+ if (dispatch) {
+ // set outer selection to be outside of the nodeview
+ let targetPos = dir > 0 ? outerTo : outerFrom;
+ outerView.dispatch(
+ outerState.tr.setSelection(
+ TextSelection.create(outerState.doc, targetPos),
+ ),
+ );
+ // must return focus to the outer view, otherwise no cursor will appear
+ outerView.focus();
+ }
+ return true;
+ };
+}
diff --git a/wax-prosemirror-plugins/src/math/math-nodeview.js b/wax-prosemirror-plugins/src/math/math-nodeview.js
index 1f9241d3a76acc1d6e9b99fc20945a819da44be3..48e209e7c04d137ccd6694535eeb4abc5be3f37d 100644
--- a/wax-prosemirror-plugins/src/math/math-nodeview.js
+++ b/wax-prosemirror-plugins/src/math/math-nodeview.js
@@ -10,6 +10,8 @@ import {
} from 'prosemirror-commands';
// katex
import katex, { ParseError } from 'katex';
+import { collapseMathCmd } from './helpers/collapse-math-cmd';
+
export class MathView {
// == Lifecycle ===================================== //
/**
@@ -21,12 +23,13 @@ export class MathView {
* @option tagName HTML tag name to use for this NodeView. If none is provided,
* will use the node name with underscores converted to hyphens.
*/
- constructor(node, view, getPos, options = {}, onDestroy) {
+ constructor(node, view, getPos, options = {}, mathPluginKey, onDestroy) {
// store arguments
this._node = node;
this._outerView = view;
this._getPos = getPos;
this._onDestroy = onDestroy && onDestroy.bind(this);
+ this._mathPluginKey = mathPluginKey;
// editing state
this.cursorSide = 'start';
this._isEditing = false;
@@ -63,7 +66,7 @@ export class MathView {
this._mathSrcElt.remove();
delete this._mathSrcElt;
}
- delete this.dom;
+ this.dom.remove();
}
/**
* Ensure focus on the inner editor whenever this node has focus.
@@ -197,6 +200,7 @@ export class MathView {
}
}
openEditor() {
+ var _a;
if (this._innerView) {
throw Error('inner view should not exist!');
}
@@ -231,21 +235,21 @@ export class MathView {
return true;
},
),
- Enter: newlineInCode,
- 'Ctrl-Enter': (state, dispatch) => {
- let { to } = this._outerView.state.selection;
- let outerState = this._outerView.state;
- // place cursor outside of math node
- this._outerView.dispatch(
- outerState.tr.setSelection(
- TextSelection.create(outerState.doc, to),
- ),
- );
- // must return focus to the outer view,
- // otherwise no cursor will appear
+ 'Ctrl-Backspace': (state, dispatch, tr_inner) => {
+ // delete math node and focus the outer view
+ this._outerView.dispatch(this._outerView.state.tr.insertText(''));
this._outerView.focus();
return true;
},
+ Enter: chainCommands(
+ newlineInCode,
+ collapseMathCmd(this._outerView, +1, false),
+ ),
+ 'Ctrl-Enter': collapseMathCmd(this._outerView, +1, false),
+ ArrowLeft: collapseMathCmd(this._outerView, -1, true),
+ ArrowRight: collapseMathCmd(this._outerView, +1, true),
+ ArrowUp: collapseMathCmd(this._outerView, -1, true),
+ ArrowDown: collapseMathCmd(this._outerView, +1, true),
}),
],
}),
@@ -254,10 +258,25 @@ export class MathView {
// focus element
let innerState = this._innerView.state;
this._innerView.focus();
- // determine cursor position
- let pos = this.cursorSide == 'start' ? 0 : this._node.nodeSize - 2;
+ // request outer cursor position before math node was selected
+ let maybePos =
+ (_a = this._mathPluginKey.getState(this._outerView.state)) === null ||
+ _a === void 0
+ ? void 0
+ : _a.prevCursorPos;
+ if (maybePos === null || maybePos === undefined) {
+ console.error(
+ '[prosemirror-math] Error: Unable to fetch math plugin state from key.',
+ );
+ }
+ let prevCursorPos = maybePos !== null && maybePos !== void 0 ? maybePos : 0;
+ // compute position that cursor should appear within the expanded math node
+ let innerPos =
+ prevCursorPos <= this._getPos() ? 0 : this._node.nodeSize - 2;
this._innerView.dispatch(
- innerState.tr.setSelection(TextSelection.create(innerState.doc, pos)),
+ innerState.tr.setSelection(
+ TextSelection.create(innerState.doc, innerPos),
+ ),
);
this._isEditing = true;
}
diff --git a/wax-prosemirror-plugins/src/math/math-plugin.js b/wax-prosemirror-plugins/src/math/math-plugin.js
index aebe23521d4daf4ea5197ed2b59fac12b33d714d..54055c8e0f4ee44229446436c6274a70ace43d97 100644
--- a/wax-prosemirror-plugins/src/math/math-plugin.js
+++ b/wax-prosemirror-plugins/src/math/math-plugin.js
@@ -1,18 +1,22 @@
/* eslint-disable */
import { Plugin as ProsePlugin, PluginKey } from 'prosemirror-state';
import { MathView } from './math-nodeview';
+// uniquely identifies the prosemirror-math plugin
+const MATH_PLUGIN_KEY = new PluginKey('prosemirror-math');
/**
* Returns a function suitable for passing as a field in `EditorProps.nodeViews`.
* @param displayMode TRUE for block math, FALSE for inline math.
* @see https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews
*/
-function createMathView(displayMode) {
+export function createMathView(displayMode) {
return (node, view, getPos) => {
/** @todo is this necessary?
* Docs says that for any function proprs, the current plugin instance
* will be bound to `this`. However, the typings don't reflect this.
*/
- let pluginState = mathPluginKey.getState(view.state);
+ console.log('ho', MATH_PLUGIN_KEY);
+
+ let pluginState = MATH_PLUGIN_KEY.getState(view.state);
if (!pluginState) {
throw new Error('no math plugin!');
}
@@ -23,6 +27,7 @@ function createMathView(displayMode) {
view,
getPos,
{ katexOptions: { displayMode, macros: pluginState.macros } },
+ MATH_PLUGIN_KEY,
() => {
nodeViews.splice(nodeViews.indexOf(nodeView));
},
@@ -31,30 +36,29 @@ function createMathView(displayMode) {
return nodeView;
};
}
-let mathPluginKey = new PluginKey('prosemirror-math');
let mathPluginSpec = {
- key: mathPluginKey,
+ key: MATH_PLUGIN_KEY,
state: {
init(config, instance) {
return {
macros: {},
activeNodeViews: [],
+ prevCursorPos: 0,
};
},
apply(tr, value, oldState, newState) {
- /** @todo (8/21/20)
- * since new state has not been fully applied yet, we don't yet have
- * information about any new MathViews that were created by this transaction.
- * As a result, the cursor position may be wrong for any newly created math blocks.
- */
- let pluginState = mathPluginKey.getState(oldState);
- if (pluginState) {
- for (let mathView of pluginState.activeNodeViews) {
- mathView.updateCursorPos(newState);
- }
- }
- return value;
+ // produce updated state field for this plugin
+ return {
+ // these values are left unchanged
+ activeNodeViews: value.activeNodeViews,
+ macros: value.macros,
+ // update with the second-most recent cursor pos
+ prevCursorPos: oldState.selection.from,
+ };
},
+ /** @todo (8/21/20) implement serialization for math plugin */
+ // toJSON(value) { },
+ // fromJSON(config, value, state){ return {}; }
},
props: {
nodeViews: {
@@ -63,6 +67,7 @@ let mathPluginSpec = {
},
},
};
+
const mathPlugin = new ProsePlugin(mathPluginSpec);
export default mathPlugin;
diff --git a/wax-prosemirror-plugins/src/math/math-select.js b/wax-prosemirror-plugins/src/math/math-select.js
index 25989cb3d845525bf4f6971f3c2125ad3620fc52..04741a1ca3176ab37cc1ffc0230fc6839c796e4a 100644
--- a/wax-prosemirror-plugins/src/math/math-select.js
+++ b/wax-prosemirror-plugins/src/math/math-select.js
@@ -10,7 +10,7 @@ import { DecorationSet, Decoration } from 'prosemirror-view';
* @param arg Should be either a Transaction or an EditorState,
* although any object with `selection` and `doc` will work.
*/
-let checkSelection = arg => {
+const checkSelection = arg => {
let { from, to } = arg.selection;
let content = arg.selection.content().content;
let result = [];
@@ -63,4 +63,5 @@ const mathSelectPlugin = new ProsePlugin({
},
},
});
+
export default mathSelectPlugin;
diff --git a/wax-prosemirror-schema/src/nodes/footNoteNode.js b/wax-prosemirror-schema/src/nodes/footNoteNode.js
index 625f0b44c28519f5bb8132c47cfdc962086a460a..38b81a21152e0da673594aed101e39f5805db182 100644
--- a/wax-prosemirror-schema/src/nodes/footNoteNode.js
+++ b/wax-prosemirror-schema/src/nodes/footNoteNode.js
@@ -1,5 +1,5 @@
const footnote = {
- group: 'inline',
+ group: 'notes, inline',
content: 'inline*',
inline: true,
atom: true,
diff --git a/wax-prosemirror-services/src/MathService/MathService.js b/wax-prosemirror-services/src/MathService/MathService.js
index 3f3ca8ac72799e1142e276333096402ac4b59f8b..2f0927b2b7efeac8e07e9a93c6d1a5270168dd14 100644
--- a/wax-prosemirror-services/src/MathService/MathService.js
+++ b/wax-prosemirror-services/src/MathService/MathService.js
@@ -14,6 +14,7 @@ class MathService extends Service {
boot() {
this.app.PmPlugins.add('mathplugin', mathPlugin);
this.app.PmPlugins.add('mathselectplugin', mathSelectPlugin);
+
const schema = this.container.get('Schema');
const rules = this.container.get('Rules');
const newRules = [
diff --git a/wax-prosemirror-services/src/PortalService/PortalService.js b/wax-prosemirror-services/src/PortalService/PortalService.js
index a8d3c629d812f2fdc226243fc764b9ce254c1fb5..abd1a7d814a68dd75e27a98fe942039f62313994 100644
--- a/wax-prosemirror-services/src/PortalService/PortalService.js
+++ b/wax-prosemirror-services/src/PortalService/PortalService.js
@@ -23,9 +23,8 @@ class PortalService extends Service {
this.container.bind('AddPortal').toFactory(context => {
return portal => {
- const schemaInstance = context.container.get('Portals');
-
- schemaInstance.addPortal(portal);
+ const portalInstance = context.container.get('Portals');
+ portalInstance.addPortal(portal);
};
});
}
diff --git a/wax-prosemirror-services/src/SchemaService/Node.js b/wax-prosemirror-services/src/SchemaService/Node.js
index ae38bf3dbca268f657cad94109b33c2512f2284d..b9d9e6e31723746cdc9de32b653acc25b25d5e62 100644
--- a/wax-prosemirror-services/src/SchemaService/Node.js
+++ b/wax-prosemirror-services/src/SchemaService/Node.js
@@ -1,17 +1,17 @@
-import { isPlainObject } from "lodash";
-import ParseRule from "./ParseRule";
-import Middleware from "../lib/Middleware";
+import { isPlainObject } from 'lodash';
+import ParseRule from './ParseRule';
+import Middleware from '../lib/Middleware';
export default class Node {
- name = "";
+ name = '';
importer = {};
atom = false;
inline = false;
isolating = false;
draggable = false;
- group = "";
- content = "";
+ group = '';
+ content = '';
_attrs = {};
_parseRules = [];
@@ -73,7 +73,7 @@ export default class Node {
hooks = hook;
});
return hooks.value;
- }
+ },
};
}
}
diff --git a/wax-prosemirror-utilities/src/commands/Commands.js b/wax-prosemirror-utilities/src/commands/Commands.js
index d57270a90ea8027b3fc7628ee608e6f79caefddc..533dd89cf8a9d4f9d72d9d415675ba32cb999888 100644
--- a/wax-prosemirror-utilities/src/commands/Commands.js
+++ b/wax-prosemirror-utilities/src/commands/Commands.js
@@ -133,7 +133,7 @@ const createComment = (state, dispatch, group, viewid) => {
let footnote = false;
let footnoteNode;
state.doc.nodesBetween($from.pos, $to.pos, (node, from) => {
- if (node.type.name === 'footnote') {
+ if (node.type.groups.includes('notes')) {
footnote = true;
footnoteNode = node;
}
@@ -204,7 +204,7 @@ const createCommentOnFootnote = (state, dispatch, group, viewid) => {
ranges.push({
start,
end,
- footnote: contentNode.type.name === 'footnote',
+ footnote: contentNode.type.groups.includes('notes'),
});
});
diff --git a/wax-prosemirror-utilities/src/document/DocumentHelpers.js b/wax-prosemirror-utilities/src/document/DocumentHelpers.js
index 563f74f869adfd2ded213e643ab9b8ebcff2e8f6..8014665be31e56a5a762b4c7428b187dcb5e3114 100644
--- a/wax-prosemirror-utilities/src/document/DocumentHelpers.js
+++ b/wax-prosemirror-utilities/src/document/DocumentHelpers.js
@@ -208,7 +208,7 @@ export const findMatches = (doc, searchValue, matchCase) => {
});
eachRight(allNodes, (node, index) => {
- if (node.node.type.name === 'footnote') {
+ if (node.node.type.groups.includes('notes')) {
allNodes.splice(index + 1, node.node.childCount);
}
});