diff --git a/editors/demo/src/OEN/OEN.js b/editors/demo/src/OEN/OEN.js index 667960f6166f4f593cfe6e8502674f4c2f624b87..29b6c46c7aead79e89f1f25a9061220787e0c772 100644 --- a/editors/demo/src/OEN/OEN.js +++ b/editors/demo/src/OEN/OEN.js @@ -44,9 +44,9 @@ const Oen = () => { value={val} // readonly layout={OenLayout} - onChange={debounce(source => { - console.log(JSON.stringify(source)); - }, 200)} + // onChange={debounce(source => { + // console.log(JSON.stringify(source)); + // }, 200)} user={user} /> ); diff --git a/wax-prosemirror-components/src/components/OEN/OENToolGroup.js b/wax-prosemirror-components/src/components/OEN/OENToolGroup.js index fba1e2316912ab3567ee871b49fba46be288b3ed..61452a4589a8ddfa019204e2a4fd7b60186af58c 100644 --- a/wax-prosemirror-components/src/components/OEN/OENToolGroup.js +++ b/wax-prosemirror-components/src/components/OEN/OENToolGroup.js @@ -1,7 +1,9 @@ import React, { useContext, useMemo } from 'react'; import styled, { css } from 'styled-components'; import { WaxContext } from 'wax-prosemirror-core'; +import { wrapIn } from 'prosemirror-commands'; import { v4 as uuidv4 } from 'uuid'; +import { liftTarget, findWrapping } from 'prosemirror-transform'; import MenuButton from '../../ui/buttons/MenuButton'; const activeStyles = css` @@ -68,14 +70,55 @@ const OENToolGroup = ({ item }) => { key={uuidv4()} label={tool.displayName} onMouseDown={() => { - item.run( - activeView.state, - activeView.dispatch, - tool.className, - ); - // setTimeout(() => { - // main.focus(); - // }); + const { from, to } = main.state.selection; + let isInOenContainer = false; + + main.state.doc.nodesBetween(from, to, (node, pos) => { + if (node.type.name === 'oen_container') { + isInOenContainer = true; + } + }); + + if (isInOenContainer) { + const range = main.state.selection.$from.blockRange( + main.state.selection.$to, + ); + const target = range && liftTarget(range); + if (target == null) return false; + main.dispatch(main.state.tr.lift(range, target)); + + const newRange = main.state.selection.$from.blockRange( + main.state.selection.$to, + ); + const wrapping = + newRange && + findWrapping( + newRange, + state.config.schema.nodes.oen_container, + { + class: tool.className, + }, + ); + if (!wrapping) return false; + main.dispatch( + main.state.tr + .wrap(newRange, wrapping) + .scrollIntoView(), + ); + } else { + const node = + tool.className === 'section' + ? 'oen_section' + : 'oen_container'; + + wrapIn(main.state.config.schema.nodes[node], { + class: tool.className, + })(main.state, main.dispatch); + } + + setTimeout(() => { + main.focus(); + }); }} title={tool.displayName} /> diff --git a/wax-prosemirror-services/src/OENContainersService/OENContainersTool.js b/wax-prosemirror-services/src/OENContainersService/OENContainersTool.js index 9bb6dd7fcd5a513a7109dd56961e810c1bd0fa5e..395dd09ea21d8e5990317c098e335c799f8cf7f5 100644 --- a/wax-prosemirror-services/src/OENContainersService/OENContainersTool.js +++ b/wax-prosemirror-services/src/OENContainersService/OENContainersTool.js @@ -10,38 +10,7 @@ export default class OENContainersTool extends Tools { name = 'OENContainersTool'; get run() { - return (state, dispatch, className) => { - const { from, to } = state.selection; - let isInOenContainer = false; - - state.doc.nodesBetween(from, to, (node, pos) => { - if (node.type.name === 'oen_container') { - isInOenContainer = true; - } - }); - - if (isInOenContainer) { - const { $from, $to } = state.selection; - const range = $from.blockRange($to); - const target = range && liftTarget(range); - if (target == null) return false; - dispatch(state.tr.lift(range, target)); - // const wrapping = - // range && - // findWrapping(range, state.config.schema.nodes.oen_container, { - // class: className, - // }); - // if (!wrapping) return false; - // if (dispatch) dispatch(state.tr.wrap(range, wrapping).scrollIntoView()); - } else { - const node = className === 'section' ? 'oen_section' : 'oen_container'; - - wrapIn(state.config.schema.nodes[node], { class: className })( - state, - dispatch, - ); - } - }; + return (state, dispatch, className) => {}; } select = (state, activeViewId) => {