Skip to content
Snippets Groups Projects
Commit 394bb22c authored by Christos's avatar Christos
Browse files

Merge branch 'react-peer-dependency' into 'master'

React peer dependency

See merge request !129
parents 21836e89 febf8b8f
No related branches found
No related tags found
1 merge request!129React peer dependency
Showing
with 150 additions and 197 deletions
......@@ -15,8 +15,6 @@
"@fortawesome/react-fontawesome": "^0.0.17",
"lodash": "^4.17.4",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-dropdown": "^1.6.2",
"react-transition-group": "^4.3.0",
"styled-components": "^4.2.0",
......@@ -25,5 +23,9 @@
"prosemirror-state": "^1.3.2",
"wax-prosemirror-core": "^0.0.10",
"wax-prosemirror-utilities": "^0.0.10"
},
"peerDependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
}
......@@ -22,7 +22,7 @@ export default ({ comment, activeView, user }) => {
const handleKeyDown = event => {
if (event.key === 'Enter' || event.which === 13) {
saveComment();
saveComment(event);
}
};
......@@ -74,7 +74,7 @@ export default ({ comment, activeView, user }) => {
};
const resolveComment = event => {
event.stopPropagation();
if (event) event.stopPropagation();
let maxPos = comment.pos;
let minPos = comment.pos;
......
import React, { useState, useEffect, useContext } from 'react';
import { TextSelection } from 'prosemirror-state';
import { last } from 'lodash';
import { last, maxBy } from 'lodash';
import { Transition } from 'react-transition-group';
import styled from 'styled-components';
......@@ -59,18 +59,19 @@ export default ({ comment, top, dataBox }) => {
const setCommentActive = () => {
const viewId = comment.attrs.viewid;
let maxPos = comment.pos;
const allCommentsWithSameId = DocumentHelpers.findAllMarksWithSameId(view[viewId].state, comment);
allCommentsWithSameId.forEach(singleComment => {
const markPosition = DocumentHelpers.findMarkPosition(view[viewId], singleComment.pos, 'comment');
if (markPosition.to > maxPos) maxPos = markPosition.to;
});
if (active) {
view[viewId].focus();
return false;
}
const allCommentsWithSameId = DocumentHelpers.findAllMarksWithSameId(view[viewId].state, comment);
if (!active && allCommentsWithSameId.length > 1) maxPos += last(allCommentsWithSameId).node.nodeSize;
const maxPos = maxBy(allCommentsWithSameId, 'pos');
maxPos.pos += last(allCommentsWithSameId).node.nodeSize;
view[viewId].dispatch(
view[viewId].state.tr.setSelection(new TextSelection(view[viewId].state.tr.doc.resolve(maxPos, maxPos))),
view[viewId].state.tr.setSelection(new TextSelection(view[viewId].state.tr.doc.resolve(maxPos.pos, maxPos.pos))),
);
view[viewId].focus();
......
......@@ -25,8 +25,6 @@
"prosemirror-state": "^1.3.2",
"prosemirror-transform": "^1.2.3",
"prosemirror-view": "^1.13.11",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"reflect-metadata": "^0.1.13",
"styled-components": "^4.2.0",
"uuid": "^7.0.3",
......@@ -36,5 +34,9 @@
"devDependencies": {
"mocha": "^3.4.2",
"prosemirror-test-builder": "^1.0.1"
},
"peerDependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
}
......@@ -3,8 +3,9 @@ import {
MenuService,
RulesService,
ShortCutsService,
LayoutService
} from "wax-prosemirror-services";
LayoutService,
OverlayService,
} from 'wax-prosemirror-services';
export default {
services: [
......@@ -12,6 +13,7 @@ export default {
new RulesService(),
new ShortCutsService(),
new LayoutService(),
new MenuService()
]
new MenuService(),
new OverlayService(),
],
};
......@@ -10,8 +10,6 @@
"build": "BABEL_ENV=production rollup -c"
},
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-panelgroup": "^1.0.10",
"styled-components": "^4.2.0",
"wax-prosemirror-core": "^0.0.10",
......@@ -19,5 +17,9 @@
"wax-prosemirror-themes": "^0.0.10",
"wax-prosemirror-services": "^0.0.10",
"wax-prosemirror-utilities": "^0.0.10"
},
"peerDependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
}
import { getFromToMark } from "./helpers";
import { getFromToMark } from './helpers';
const findSelectedChanges = state => {
const selection = state.selection,
selectedChanges = {
insertion: false,
deletion: false,
formatChange: false
formatChange: false,
};
let insertionPos = false,
deletionPos = false,
......@@ -21,17 +21,15 @@ const findSelectedChanges = state => {
const resolvedPos = state.doc.resolve(selection.from),
marks = resolvedPos.marks();
if (marks) {
insertionMark = marks.find(
mark => mark.type.name === "insertion" && !mark.attrs.approved
);
insertionMark = marks.find(mark => mark.type.name === 'insertion' && !mark.attrs.approved);
if (insertionMark) {
insertionPos = selection.from;
}
deletionMark = marks.find(mark => mark.type.name === "deletion");
deletionMark = marks.find(mark => mark.type.name === 'deletion');
if (deletionMark) {
deletionPos = selection.from;
}
formatChangeMark = marks.find(mark => mark.type.name === "format_change");
formatChangeMark = marks.find(mark => mark.type.name === 'format_change');
if (formatChangeMark) {
formatChangePos = selection.from;
}
......@@ -43,10 +41,8 @@ const findSelectedChanges = state => {
}
if (!insertionMark) {
insertionMark = node.attrs.track
? node.attrs.track.find(trackAttr => trackAttr.type === "insertion")
: node.marks.find(
mark => mark.type.name === "insertion" && !mark.attrs.approved
);
? node.attrs.track.find(trackAttr => trackAttr.type === 'insertion')
: node.marks.find(mark => mark.type.name === 'insertion' && !mark.attrs.approved);
if (insertionMark) {
insertionPos = pos;
if (!node.isInline) {
......@@ -56,8 +52,8 @@ const findSelectedChanges = state => {
}
if (!deletionMark) {
deletionMark = node.attrs.track
? node.attrs.track.find(trackAttr => trackAttr.type === "deletion")
: node.marks.find(mark => mark.type.name === "deletion");
? node.attrs.track.find(trackAttr => trackAttr.type === 'deletion')
: node.marks.find(mark => mark.type.name === 'deletion');
if (deletionMark) {
deletionPos = pos;
if (!node.isInline) {
......@@ -66,9 +62,7 @@ const findSelectedChanges = state => {
}
}
if (!formatChangeMark) {
formatChangeMark = node.marks.find(
mark => mark.type.name === "format_change"
);
formatChangeMark = node.marks.find(mark => mark.type.name === 'format_change');
if (formatChangeMark) {
formatChangePos = pos;
if (!node.isInline) {
......
import { Plugin, PluginKey } from "prosemirror-state";
import { Decoration, DecorationSet } from "prosemirror-view";
import { Plugin, PluginKey } from 'prosemirror-state';
import { Decoration, DecorationSet } from 'prosemirror-view';
import { findSelectedChanges } from "./FindSelectedChanges";
import { deactivateAllSelectedChanges } from "./helpers";
import { findSelectedChanges } from './FindSelectedChanges';
import { deactivateAllSelectedChanges } from './helpers';
export const key = new PluginKey("track");
export const key = new PluginKey('track');
export const selectedInsertionSpec = {};
export const selectedDeletionSpec = {};
export const selectedChangeFormatSpec = {};
......@@ -15,7 +15,7 @@ export default options => {
key,
state: {
init(config, state) {
const userIds = ["33"];
const userIds = ['33'];
state.doc.descendants(node => {
if (node.attrs.track) {
node.attrs.track.forEach(track => {
......@@ -26,9 +26,7 @@ export default options => {
} else {
node.marks.forEach(mark => {
if (
["deletion", "insertion", "format_change"].includes(
mark.type.name
) &&
['deletion', 'insertion', 'format_change'].includes(mark.type.name) &&
!userIds.includes(mark.attrs.user) &&
mark.attrs.user !== 0
) {
......@@ -39,7 +37,7 @@ export default options => {
});
return {
decos: DecorationSet.empty
decos: DecorationSet.empty,
};
},
apply(tr, prev, oldState, state) {
......@@ -53,23 +51,19 @@ export default options => {
let { decos } = this.getState(oldState);
if (tr.selectionSet) {
const { insertion, deletion, formatChange } = findSelectedChanges(
state
);
const { insertion, deletion, formatChange } = findSelectedChanges(state);
decos = DecorationSet.empty;
const decoType = tr.selection.node
? Decoration.node
: Decoration.inline;
const decoType = tr.selection.node ? Decoration.node : Decoration.inline;
if (insertion) {
decos = decos.add(tr.doc, [
decoType(
insertion.from,
insertion.to,
{
class: "selected-insertion"
class: 'selected-insertion',
},
selectedInsertionSpec
)
selectedInsertionSpec,
),
]);
}
if (deletion) {
......@@ -78,10 +72,10 @@ export default options => {
deletion.from,
deletion.to,
{
class: "selected-deletion"
class: 'selected-deletion',
},
selectedDeletionSpec
)
selectedDeletionSpec,
),
]);
}
if (formatChange) {
......@@ -90,19 +84,19 @@ export default options => {
formatChange.from,
formatChange.to,
{
class: "selected-format-change"
class: 'selected-format-change',
},
selectedChangeFormatSpec
)
selectedChangeFormatSpec,
),
]);
}
} else {
decos = decos.map(tr.mapping, tr.doc);
}
return {
decos
decos,
};
}
},
},
props: {
decorations(state) {
......@@ -112,8 +106,8 @@ export default options => {
handleDOMEvents: {
focus: (view, _event) => {
view.dispatch(deactivateAllSelectedChanges(view.state.tr));
}
}
}
},
},
},
});
};
//TODO Write the node in WaxSchema
const footnote = {
group: "inline",
content: "inline*",
group: 'inline',
content: 'inline*',
inline: true,
atom: true,
// atom: true,
attrs: {
id: { default: "" }
id: { default: '' },
},
toDOM: node => {
return ["footnote", node.attrs, 0];
return ['footnote', node.attrs, 0];
},
parseDOM: [
{
tag: "footnote",
tag: 'footnote',
getAttrs(dom) {
return {
id: dom.getAttribute("id")
id: dom.getAttribute('id'),
};
}
}
]
},
},
],
};
export default footnote;
export {
default as componentPlugin
} from "./src/LayoutService/components/componentPlugin";
export { default as LayoutService } from "./src/LayoutService/LayoutService";
export { default as MenuService } from "./src/MenuService/MenuService";
export { default as LinkService } from "./src/LinkService/LinkService";
export {
default as PlaceholderService
} from "./src/PlaceholderService/PlaceholderService";
export { default as ImageService } from "./src/ImageService/ImageService";
export { default as RulesService } from "./src/RulesService/RulesService";
export { default as SchemaService } from "./src/SchemaService/SchemaService";
export { default as componentPlugin } from './src/LayoutService/components/componentPlugin';
export { default as LayoutService } from './src/LayoutService/LayoutService';
export { default as MenuService } from './src/MenuService/MenuService';
export { default as LinkService } from './src/LinkService/LinkService';
export { default as PlaceholderService } from './src/PlaceholderService/PlaceholderService';
export { default as OverlayService } from './src/OverlayService/OverlayService';
export { default as ImageService } from './src/ImageService/ImageService';
export { default as RulesService } from './src/RulesService/RulesService';
export { default as SchemaService } from './src/SchemaService/SchemaService';
export {
default as ShortCutsService
} from "./src/ShortCutsService/ShortCutsService";
export { default as ShortCutsService } from './src/ShortCutsService/ShortCutsService';
export { default as OverlayService } from "./src/OverlayService/OverlayService";
export { default as Tool } from "./src/lib/Tools";
export {
default as TrackChangeService
} from "./src/TrackChangeService/TrackChangeService";
export { default as Tool } from './src/lib/Tools';
export { default as TrackChangeService } from './src/TrackChangeService/TrackChangeService';
export {
default as trackedTransaction
} from "./src/TrackChangeService/track-changes/trackedTransaction";
export { default as trackedTransaction } from './src/TrackChangeService/track-changes/trackedTransaction';
/*
All Elements services
*/
export { default as BaseService } from "./src/BaseService/BaseService";
export {
default as InlineAnnotationsService
} from "./src/InlineAnnotations/InlineAnnotationsService";
export { default as ListsService } from "./src/ListsService/ListsService";
export { default as TablesService } from "./src/TablesService/TablesService";
export {
default as TextBlockLevelService
} from "./src/TextBlockLevel/TextBlockLevelService";
export {
default as DisplayBlockLevelService
} from "./src/DisplayBlockLevel/DisplayBlockLevelService";
export { default as NoteService } from "./src/NoteService/NoteService";
export {
default as CommentsService
} from "./src/CommentsService/CommentsService";
export { default as BaseService } from './src/BaseService/BaseService';
export { default as InlineAnnotationsService } from './src/InlineAnnotations/InlineAnnotationsService';
export { default as ListsService } from './src/ListsService/ListsService';
export { default as TablesService } from './src/TablesService/TablesService';
export { default as TextBlockLevelService } from './src/TextBlockLevel/TextBlockLevelService';
export { default as DisplayBlockLevelService } from './src/DisplayBlockLevel/DisplayBlockLevelService';
export { default as NoteService } from './src/NoteService/NoteService';
export { default as CommentsService } from './src/CommentsService/CommentsService';
/*
ToolGroups
*/
export {
default as BaseToolGroupService
} from "./src/WaxToolGroups/BaseToolGroupService/BaseToolGroupService";
export {
default as AnnotationToolGroupService
} from "./src/WaxToolGroups/AnnotationToolGroupService/AnnotationToolGroupService";
export {
default as ListToolGroupService
} from "./src/WaxToolGroups/ListToolGroupService/ListToolGroupService";
export {
default as ImageToolGroupService
} from "./src/WaxToolGroups/ImageToolGroupService/ImageToolGroupService";
export {
default as TableToolGroupService
} from "./src/WaxToolGroups/TableToolGroupService/TableToolGroupService";
export {
default as DisplayToolGroupService
} from "./src/WaxToolGroups/DisplayToolGroupService/DisplayToolGroupService";
export {
default as TextToolGroupService
} from "./src/WaxToolGroups/TextToolGroupService/TextToolGroupService";
export {
default as NoteToolGroupService
} from "./src/WaxToolGroups/NoteToolGroupService/NoteToolGroupService";
export { default as BaseToolGroupService } from './src/WaxToolGroups/BaseToolGroupService/BaseToolGroupService';
export { default as AnnotationToolGroupService } from './src/WaxToolGroups/AnnotationToolGroupService/AnnotationToolGroupService';
export { default as ListToolGroupService } from './src/WaxToolGroups/ListToolGroupService/ListToolGroupService';
export { default as ImageToolGroupService } from './src/WaxToolGroups/ImageToolGroupService/ImageToolGroupService';
export { default as TableToolGroupService } from './src/WaxToolGroups/TableToolGroupService/TableToolGroupService';
export { default as DisplayToolGroupService } from './src/WaxToolGroups/DisplayToolGroupService/DisplayToolGroupService';
export { default as TextToolGroupService } from './src/WaxToolGroups/TextToolGroupService/TextToolGroupService';
export { default as NoteToolGroupService } from './src/WaxToolGroups/NoteToolGroupService/NoteToolGroupService';
......@@ -12,11 +12,13 @@
"dependencies": {
"inversify": "^5.0.1",
"inversify-inject-decorators": "^3.1.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"styled-components": "^4.2.0",
"wax-prosemirror-components": "^0.0.10",
"wax-prosemirror-core": "^0.0.10",
"wax-prosemirror-layouts": "^0.0.10"
},
"peerDependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
}
import Service from "../Service";
import { LinkComponent } from "wax-prosemirror-components";
import { linkMark } from "wax-prosemirror-schema";
import LinkTool from "./LinkTool";
import { OverlayService } from "../..";
import Service from '../Service';
import { LinkComponent } from 'wax-prosemirror-components';
import { linkMark } from 'wax-prosemirror-schema';
import LinkTool from './LinkTool';
// import { OverlayService } from '../..';
export default class LinkService extends Service {
name = "LinkService";
name = 'LinkService';
boot() {
const createOverlay = this.container.get("CreateOverlay");
const createOverlay = this.container.get('CreateOverlay');
createOverlay(
LinkComponent,
{},
{
markType: "link",
markType: 'link',
followCursor: false,
selection: false
}
selection: false,
},
);
}
register() {
this.container.bind("Link").to(LinkTool);
const createMark = this.container.get("CreateMark");
this.container.bind('Link').to(LinkTool);
const createMark = this.container.get('CreateMark');
createMark(
{
link: linkMark
link: linkMark,
},
{ toWaxSchema: true }
{ toWaxSchema: true },
);
}
dependencies = [new OverlayService()];
// dependencies = [new OverlayService()];
}
import React, { useEffect, useRef, useContext } from "react";
import { EditorView } from "prosemirror-view";
import { EditorState } from "prosemirror-state";
import { StepMap } from "prosemirror-transform";
import { baseKeymap } from "prosemirror-commands";
import { keymap } from "prosemirror-keymap";
import { undo, redo } from "prosemirror-history";
import { WaxContext } from "wax-prosemirror-core";
import { Commands } from "wax-prosemirror-utilities";
import { NoteEditorContainer } from "wax-prosemirror-components";
import { DocumentHelpers } from "wax-prosemirror-utilities";
import { filter } from "lodash";
import transformPasted from "./helpers/TransformPasted";
import React, { useEffect, useRef, useContext } from 'react';
import { EditorView } from 'prosemirror-view';
import { EditorState } from 'prosemirror-state';
import { StepMap } from 'prosemirror-transform';
import { baseKeymap } from 'prosemirror-commands';
import { keymap } from 'prosemirror-keymap';
import { undo, redo } from 'prosemirror-history';
import { WaxContext } from 'wax-prosemirror-core';
import { Commands } from 'wax-prosemirror-utilities';
import { NoteEditorContainer } from 'wax-prosemirror-components';
import { DocumentHelpers } from 'wax-prosemirror-utilities';
import { filter } from 'lodash';
import transformPasted from './helpers/TransformPasted';
export default ({ node, view }) => {
const editorRef = useRef();
......@@ -22,21 +22,17 @@ export default ({ node, view }) => {
{
state: EditorState.create({
doc: node,
plugins: [keymap(createKeyBindings()), ...context.app.getPlugins()]
plugins: [keymap(createKeyBindings()), ...context.app.getPlugins()],
}),
// This is the magic part
dispatchTransaction: tr => {
let { state, transactions } = noteView.state.applyTransaction(tr);
noteView.updateState(state);
const allNotes = DocumentHelpers.findChildrenByType(
view.state.doc,
view.state.schema.nodes.footnote,
true
);
const allNotes = DocumentHelpers.findChildrenByType(view.state.doc, view.state.schema.nodes.footnote, true);
const noteFound = filter(allNotes, {
node: { attrs: { id: noteId } }
node: { attrs: { id: noteId } },
});
//Set everytime the active view into context
......@@ -44,17 +40,15 @@ export default ({ node, view }) => {
context.updateView({}, noteId);
}, 20);
if (!tr.getMeta("fromOutside")) {
if (!tr.getMeta('fromOutside')) {
let outerTr = view.state.tr,
offsetMap = StepMap.offset(noteFound[0].pos + 1);
for (let i = 0; i < transactions.length; i++) {
let steps = transactions[i].steps;
for (let j = 0; j < steps.length; j++)
outerTr.step(steps[j].map(offsetMap));
for (let j = 0; j < steps.length; j++) outerTr.step(steps[j].map(offsetMap));
}
if (outerTr.docChanged)
view.dispatch(outerTr.setMeta("outsideView", "notes"));
if (outerTr.docChanged) view.dispatch(outerTr.setMeta('outsideView', 'notes'));
}
},
handleDOMEvents: {
......@@ -65,20 +59,20 @@ export default ({ node, view }) => {
// footnote is node-selected (and thus DOM-selected) when
// the parent editor is focused.
if (noteView.hasFocus()) noteView.focus();
}
},
},
transformPasted: slice => {
return transformPasted(slice, noteView);
}
}
},
},
);
//Set Each note into Wax's Context
context.updateView(
{
[noteId]: noteView
[noteId]: noteView,
},
noteId
noteId,
);
if (context.view[noteId]) {
context.view[noteId].focus();
......@@ -95,12 +89,9 @@ export default ({ node, view }) => {
const getKeys = () => {
return {
"Mod-z": () => undo(view.state, view.dispatch),
"Mod-y": () => redo(view.state, view.dispatch),
"Mod-u": () =>
Commands.markActive(noteView.state.config.schema.marks.underline)(
noteView.state
)
'Mod-z': () => undo(view.state, view.dispatch),
'Mod-y': () => redo(view.state, view.dispatch),
'Mod-u': () => Commands.markActive(noteView.state.config.schema.marks.underline)(noteView.state),
};
};
......@@ -115,9 +106,7 @@ export default ({ node, view }) => {
endB += overlap;
}
context.view[noteId].dispatch(
state.tr
.replace(start, endB, node.slice(start, endA))
.setMeta("fromOutside", true)
state.tr.replace(start, endB, node.slice(start, endA)).setMeta('fromOutside', true),
);
}
}
......
......@@ -96,7 +96,6 @@ const findAllMarksWithSameId = (state, mark) => {
return allMarksWithSameId;
};
// TODO Also find fragmented marks
const findMarkPosition = (activeView, initialPos, markType) => {
const $pos = activeView.state.tr.doc.resolve(initialPos);
const { parent } = $pos;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment