From 115890ff1e30225fb2086386eb1249cb25963f61 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Mon, 18 Jan 2021 13:09:52 +0200
Subject: [PATCH] plugin state
---
editors/editoria/src/layout/EditorElements.js | 8 +++
.../src/trackChanges/HideShowPlugin.js | 65 ++++++++++++++++++-
2 files changed, 70 insertions(+), 3 deletions(-)
diff --git a/editors/editoria/src/layout/EditorElements.js b/editors/editoria/src/layout/EditorElements.js
index e08120c55..9dca9e2d9 100644
--- a/editors/editoria/src/layout/EditorElements.js
+++ b/editors/editoria/src/layout/EditorElements.js
@@ -248,6 +248,14 @@ export default css`
height: 100%;
}
+ .insertion .show-insertion {
+ color: black;
+ }
+
+ .deletion .hide-deletion {
+ display: none;
+ }
+
li[data-track]::before,
li [data-track]::before {
left: -5px;
diff --git a/wax-prosemirror-plugins/src/trackChanges/HideShowPlugin.js b/wax-prosemirror-plugins/src/trackChanges/HideShowPlugin.js
index 67e2b3778..c1201f593 100644
--- a/wax-prosemirror-plugins/src/trackChanges/HideShowPlugin.js
+++ b/wax-prosemirror-plugins/src/trackChanges/HideShowPlugin.js
@@ -6,19 +6,78 @@ import { DocumentHelpers } from 'wax-prosemirror-utilities';
const hideShowPlugin = new PluginKey('hideShowPlugin');
+const getTrackChanges = state => {
+ const finalTracks = [];
+ const allInlineNodes = DocumentHelpers.findInlineNodes(state.doc);
+ allInlineNodes.map(node => {
+ if (node.node.marks.length > 0) {
+ node.node.marks.filter(mark => {
+ if (
+ mark.type.name === 'insertion' ||
+ mark.type.name === 'deletion' ||
+ mark.type.name === 'format_change'
+ ) {
+ mark.pos = node.pos;
+ finalTracks.push(mark);
+ }
+ });
+ }
+ });
+ return finalTracks;
+};
+
export default props => {
return new Plugin({
key: hideShowPlugin,
state: {
- init: (_, state) => {},
+ init: (_, state) => {
+ return DecorationSet.empty;
+ },
apply(tr, prev, _, newState) {
- console.log('in apply');
+ let decorations;
+ let createdDecorations = DecorationSet.empty;
+ const allMatches = getTrackChanges(newState);
+ console.log('in apply', allMatches);
+ if (allMatches.length > 0) {
+ decorations = allMatches.map((result, index) => {
+ if (result.type.name === 'insertion') {
+ const position = DocumentHelpers.findMarkPosition(
+ newState,
+ result.pos,
+ 'insertion',
+ );
+
+ return Decoration.inline(position.from, position.to, {
+ class: 'show-insertion',
+ });
+ }
+ if (result.type.name === 'deletion') {
+ const position = DocumentHelpers.findMarkPosition(
+ newState,
+ result.pos,
+ 'deletion',
+ );
+
+ return Decoration.inline(position.from, position.to, {
+ class: 'hide-deletion',
+ });
+ }
+ });
+ createdDecorations = DecorationSet.create(newState.doc, decorations);
+ }
+ return {
+ createdDecorations,
+ allMatches,
+ };
},
},
props: {
decorations: state => {
const hideShowPluginState = state && hideShowPlugin.getState(state);
- // return hideShowPluginState.createDecoration;
+ return hideShowPluginState.createdDecorations;
+ },
+ hideShow: show => {
+ console.log(show);
},
},
});
--
GitLab