diff --git a/wax-prosemirror-components/src/components/comments/CommentBox.js b/wax-prosemirror-components/src/components/comments/CommentBox.js index 05b730cb2f9a79898ca8bf90ef89ef69a8e5c657..e332f6135d3d6d2466c493a229b4ac102dcc81b6 100644 --- a/wax-prosemirror-components/src/components/comments/CommentBox.js +++ b/wax-prosemirror-components/src/components/comments/CommentBox.js @@ -14,10 +14,10 @@ const CommentBoxStyled = styled.div` flex-direction: column; margin-top: 10px; border: 1px solid #ffab20; - position: absolute; + position: relative; transition: ${({ state }) => 'top 1s, opacity 1.5s, left 1s'}; top: ${props => (props.top ? `${props.top}px` : 0)}; - left: ${props => (props.active ? `${63}%` : `${65}%`)}; + left: ${props => (props.active ? `${-2}%` : `0%`)}; opacity: ${({ state }) => { switch (state) { case 'exited': diff --git a/wax-prosemirror-components/src/components/trackChanges/TrackChangeBox.js b/wax-prosemirror-components/src/components/trackChanges/TrackChangeBox.js index b81aa5ec4122eaf91de33a7d7593bd0073429c8f..09e94e60365d585bf46c49367319e1b6aa0d77a3 100644 --- a/wax-prosemirror-components/src/components/trackChanges/TrackChangeBox.js +++ b/wax-prosemirror-components/src/components/trackChanges/TrackChangeBox.js @@ -10,10 +10,10 @@ const TrackChangeBoxStyled = styled.div` flex-direction: column; margin-top: 10px; border: 1px solid blue; - position: absolute; + position: relative; transition: ${({ state }) => 'top 1s, opacity 1.5s, left 1s'}; top: ${props => (props.top ? `${props.top}px` : 0)}; - left: ${props => (props.active ? `${63}%` : `${65}%`)}; + left: ${props => (props.active ? `${-2}%` : `0%`)}; opacity: ${({ state }) => { switch (state) { case 'exited': diff --git a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js index 24d63cda65504f2597a3c19e814dfb75a1ace120..e2140eb3daf92e0b4b89d5f8e19c79a329581b31 100644 --- a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js +++ b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js @@ -20,6 +20,7 @@ const LayoutWrapper = styled.div` position: relative; bottom: 14px; background: white; + z-index: 999; color: #a3a3a3; font-weight: 600; letter-spacing: 0.15em; @@ -105,7 +106,7 @@ const WaxSurfaceScroll = styled.div` const MainMenuContainer = styled.div` background: #fff; - height: 52px; + min-height: 52px; line-height: 32px; position: relative; user-select: none; @@ -120,7 +121,8 @@ const MainMenuInner = styled.div` position: absolute; right: 0; top: 0; - background: transparent; + height: 100%; + background: #fff; z-index: 9999; div { display: flex; @@ -183,7 +185,7 @@ const CommentsContainer = styled.div` height: 100%; `; -let surfaceHeight = 700; +let surfaceHeight = 500; let notesHeight = 50; const onResizeEnd = arr => { @@ -250,7 +252,7 @@ const EditoriaLayout = ({ editor }) => { <PanelGroup direction="column" panelWidths={[ - { size: surfaceHeight, resize: 'dynamic' }, + { size: surfaceHeight, resize: 'stretch' }, { size: notesHeight, resize: 'stretch' }, ]} onResizeEnd={onResizeEnd} diff --git a/wax-prosemirror-plugins/src/trackChanges/TrackChangePlugin.js b/wax-prosemirror-plugins/src/trackChanges/TrackChangePlugin.js index 2fb5bdcbd4243a4894e6742c953da9de59681c19..367873aaab0f9ab2431e5fc52b584be289f824ec 100644 --- a/wax-prosemirror-plugins/src/trackChanges/TrackChangePlugin.js +++ b/wax-prosemirror-plugins/src/trackChanges/TrackChangePlugin.js @@ -3,13 +3,7 @@ import { Decoration, DecorationSet } from 'prosemirror-view'; import findSelectedChanges from './FindSelectedChanges'; -// import { deactivateAllSelectedChanges } from './helpers'; - export const key = new PluginKey('track'); -export const selectedInsertionSpec = {}; -export const selectedDeletionSpec = {}; -export const selectedChangeFormatSpec = {}; -export const selectedChangeBlockSpec = {}; export default options => { return new Plugin({ @@ -30,18 +24,6 @@ export default options => { selection: { from, to }, } = state; - state.doc.nodesBetween(from, to, (node, pos) => { - if ( - node.attrs.track && - node.attrs.track.find(track => track.type === 'block_change') - ) { - const blockChangeTrack = node.attrs.track.find( - track => track.type === 'block_change', - ); - console.log(blockChangeTrack); - } - }); - let { decos } = this.getState(oldState); if (tr.selectionSet) { @@ -52,40 +34,43 @@ export default options => { const decoType = tr.selection.node ? Decoration.node : Decoration.inline; + + state.doc.nodesBetween(from, to, (node, pos) => { + if ( + node.attrs.track && + node.attrs.track.find(track => track.type === 'block_change') + ) { + const blockChangeTrack = node.attrs.track.find( + track => track.type === 'block_change', + ); + console.log(state.selection, blockChangeTrack, node); + decos = decos.add(tr.doc, [ + decoType(1, 100, { + class: 'selected-block_change', + }), + ]); + } + }); + if (insertion) { decos = decos.add(tr.doc, [ - decoType( - insertion.from, - insertion.to, - { - class: 'selected-insertion', - }, - selectedInsertionSpec, - ), + decoType(insertion.from, insertion.to, { + class: 'selected-insertion', + }), ]); } if (deletion) { decos = decos.add(tr.doc, [ - decoType( - deletion.from, - deletion.to, - { - class: 'selected-deletion', - }, - selectedDeletionSpec, - ), + decoType(deletion.from, deletion.to, { + class: 'selected-deletion', + }), ]); } if (formatChange) { decos = decos.add(tr.doc, [ - decoType( - formatChange.from, - formatChange.to, - { - class: 'selected-format-change', - }, - selectedChangeFormatSpec, - ), + decoType(formatChange.from, formatChange.to, { + class: 'selected-format-change', + }), ]); } } else {