diff --git a/wax-prosemirror-components/src/components/Button.js b/wax-prosemirror-components/src/components/Button.js index cb1049ccad5968155f4a940998db55b03d70a1c9..85cf9df094a3b0ca9905ef4ee68277b3a5332bd3 100644 --- a/wax-prosemirror-components/src/components/Button.js +++ b/wax-prosemirror-components/src/components/Button.js @@ -1,3 +1,4 @@ +/* eslint react/prop-types: 0 */ import React, { useContext } from 'react'; import styled from 'styled-components'; import { ButtonStyles } from 'wax-prosemirror-themes'; diff --git a/wax-prosemirror-components/src/components/HeadingsDropDown.js b/wax-prosemirror-components/src/components/HeadingsDropDown.js index d4fdcaea747f914ccf1329ba587303778e7d4258..18d1a5712be65f19f96ec19f5b60fbc4f3df1f6e 100644 --- a/wax-prosemirror-components/src/components/HeadingsDropDown.js +++ b/wax-prosemirror-components/src/components/HeadingsDropDown.js @@ -1,20 +1,21 @@ -import React from "react"; -import styled from "styled-components"; -import { Commands } from "wax-prosemirror-utilities"; -import Dropdown from "react-dropdown"; -import "react-dropdown/style.css"; +/* eslint react/prop-types: 0 */ +import React from 'react'; +import styled from 'styled-components'; +import { Commands } from 'wax-prosemirror-utilities'; +import Dropdown from 'react-dropdown'; +import 'react-dropdown/style.css'; const DropdownStyled = styled(Dropdown)` - display: ${props => (props.select ? "inline-flex" : "none")}; + display: ${props => (props.select ? 'inline-flex' : 'none')}; .Dropdown-control { border: none; } `; const dropDownOptions = [ - { label: "Heading 1", value: "1" }, - { label: "Heading 2", value: "2" }, - { label: "Heading 3", value: "3" } + { label: 'Heading 1', value: '1' }, + { label: 'Heading 2', value: '2' }, + { label: 'Heading 3', value: '3' }, ]; const HeadingsDropDown = ({ dispatch, state, item }) => ( @@ -22,7 +23,7 @@ const HeadingsDropDown = ({ dispatch, state, item }) => ( options={dropDownOptions} onChange={option => { Commands.setBlockType(state.config.schema.nodes.heading, { - level: option.value + level: option.value, })(state, dispatch); }} placeholder="Choose heading" diff --git a/wax-prosemirror-components/src/components/ImageUpload.js b/wax-prosemirror-components/src/components/ImageUpload.js index a82798f3235855db220bd20e96db1b4ec1260e8c..5858b097beb923b13ec39c1b608c3e886e550db6 100644 --- a/wax-prosemirror-components/src/components/ImageUpload.js +++ b/wax-prosemirror-components/src/components/ImageUpload.js @@ -1,5 +1,6 @@ -import React from "react"; -import styled from "styled-components"; +/* eslint react/prop-types: 0 */ +import React from 'react'; +import styled from 'styled-components'; const UploadImage = styled.div` color: #777; diff --git a/wax-prosemirror-components/src/components/TableDropDown.js b/wax-prosemirror-components/src/components/TableDropDown.js index 950c1a53eac116eadc25865e9b744510d41f204f..72c1f5d69c7b1edc3219ca0cd85b91ce00bbceea 100644 --- a/wax-prosemirror-components/src/components/TableDropDown.js +++ b/wax-prosemirror-components/src/components/TableDropDown.js @@ -1,14 +1,15 @@ -import React from "react"; -import styled from "styled-components"; -import * as tablesFn from "prosemirror-tables"; -import Dropdown from "react-dropdown"; -import "react-dropdown/style.css"; +/* eslint react/prop-types: 0 */ +import React from 'react'; +import styled from 'styled-components'; +import * as tablesFn from 'prosemirror-tables'; +import Dropdown from 'react-dropdown'; +import 'react-dropdown/style.css'; const DropdownStyled = styled(Dropdown)` display: inline-flex; cursor: not-allowed; opacity: ${props => (props.select ? 1 : 0.4)}; - pointer-events: ${props => (props.select ? "default" : "none")}; + pointer-events: ${props => (props.select ? 'default' : 'none')}; .Dropdown-control { border: none; } @@ -28,28 +29,29 @@ const DropdownStyled = styled(Dropdown)` `; const dropDownOptions = [ - { label: "add column before", value: "addColumnBefore" }, - { label: "add column after", value: "addColumnAfter" }, - { label: "Delete column", value: "deleteColumn" }, - { label: "Insert row before", value: "addRowBefore" }, - { label: "Insert row after", value: "addRowAfter" }, - { label: "Delete row", value: "deleteRow" }, - { label: "Delete table", value: "deleteTable" }, - { label: "Merge cells", value: "mergeCells" }, - { label: "Split cell", value: "splitCell" }, - { label: "Toggle header column", value: "toggleHeaderColumn" }, - { label: "Toggle header row", value: "toggleHeaderRow" }, - { label: "Toggle header cells", value: "toggleHeaderCell" } + { label: 'add column before', value: 'addColumnBefore' }, + { label: 'add column after', value: 'addColumnAfter' }, + { label: 'Delete column', value: 'deleteColumn' }, + { label: 'Insert row before', value: 'addRowBefore' }, + { label: 'Insert row after', value: 'addRowAfter' }, + { label: 'Delete row', value: 'deleteRow' }, + { label: 'Delete table', value: 'deleteTable' }, + { label: 'Merge cells', value: 'mergeCells' }, + { label: 'Split cell', value: 'splitCell' }, + { label: 'Toggle header column', value: 'toggleHeaderColumn' }, + { label: 'Toggle header row', value: 'toggleHeaderRow' }, + { label: 'Toggle header cells', value: 'toggleHeaderCell' }, ]; const TableDropDown = ({ view: { dispatch, state }, item }) => ( <DropdownStyled options={dropDownOptions} onChange={option => { - tablesFn[option.value](state, dispatch); + item.run(state, dispatch, tablesFn[option.value]); }} placeholder="Table Options" select={item.select && item.select(state)} /> ); + export default TableDropDown; diff --git a/wax-prosemirror-components/src/components/comments/Comment.js b/wax-prosemirror-components/src/components/comments/Comment.js index 6845cc58adf9f372f9d7b21f6b71912bbc87ea2d..c215af8c8a0e474692012968405d2a74041f6531 100644 --- a/wax-prosemirror-components/src/components/comments/Comment.js +++ b/wax-prosemirror-components/src/components/comments/Comment.js @@ -1,3 +1,4 @@ +/* eslint react/prop-types: 0 */ import React, { useState, useRef, useEffect } from 'react'; import { v4 as uuidv4 } from 'uuid'; import { last } from 'lodash'; @@ -43,7 +44,7 @@ export default ({ comment, activeView, user, active }) => { const { current: { value }, } = commentInput; - const { tr, doc } = state; + const { tr } = state; const obj = { content: value, diff --git a/wax-prosemirror-components/src/components/comments/CommentBox.js b/wax-prosemirror-components/src/components/comments/CommentBox.js index d77ee80323133a2ae2d613960d8666dd9d61d81d..05b730cb2f9a79898ca8bf90ef89ef69a8e5c657 100644 --- a/wax-prosemirror-components/src/components/comments/CommentBox.js +++ b/wax-prosemirror-components/src/components/comments/CommentBox.js @@ -1,3 +1,4 @@ +/* eslint react/prop-types: 0 */ import React, { useState, useEffect, useContext, memo } from 'react'; import { TextSelection } from 'prosemirror-state'; import { last, maxBy } from 'lodash'; @@ -27,12 +28,12 @@ const CommentBoxStyled = styled.div` return 0.6; case 'entered': return 1; + default: } }}; `; export default ({ comment, top, dataBox }) => { - console.log('rerender'); const [animate, setAnimate] = useState(false); const { attrs: { id }, diff --git a/wax-prosemirror-components/src/components/comments/CommentBubbleComponent.js b/wax-prosemirror-components/src/components/comments/CommentBubbleComponent.js index 1c8b2fcd02d6a0a10f071265b1451a5f96d17c73..79b2a117e4a22157962d8638ea3769a1ea2e3f97 100644 --- a/wax-prosemirror-components/src/components/comments/CommentBubbleComponent.js +++ b/wax-prosemirror-components/src/components/comments/CommentBubbleComponent.js @@ -1,5 +1,5 @@ -import React, { useLayoutEffect, useState, useContext } from 'react'; -import styled from 'styled-components'; +/* eslint react/prop-types: 0 */ +import React, { useLayoutEffect, useContext } from 'react'; import { Commands, DocumentHelpers } from 'wax-prosemirror-utilities'; import { WaxContext } from 'wax-prosemirror-core'; @@ -32,12 +32,8 @@ const CommentBubbleComponent = ({ const isSelectionComment = () => { const commentMark = activeView.state.schema.marks.comment; const mark = DocumentHelpers.findMark(state, commentMark, true); - const { - selection: { $from, $to }, - doc, - } = state; - //TODO Overlapping comments . for now don't allow + // TODO Overlapping comments . for now don't allow if (mark.length >= 1) return true; return false; }; diff --git a/wax-prosemirror-components/src/components/link/LinkComponent.js b/wax-prosemirror-components/src/components/link/LinkComponent.js index 7fc43a202c8c296700f9298f65e1a0f19462e21c..8c4b32a8d8699758e7ccd677c9af3cd225dd43df 100644 --- a/wax-prosemirror-components/src/components/link/LinkComponent.js +++ b/wax-prosemirror-components/src/components/link/LinkComponent.js @@ -1,7 +1,8 @@ -import React, { useRef, useEffect, useState, useContext } from "react"; -import styled from "styled-components"; -import { WaxContext } from "wax-prosemirror-core"; -import { DocumentHelpers } from "wax-prosemirror-utilities"; +/* eslint react/prop-types: 0 */ +import React, { useRef, useEffect, useState, useContext } from 'react'; +import styled from 'styled-components'; +import { WaxContext } from 'wax-prosemirror-core'; +import { DocumentHelpers } from 'wax-prosemirror-utilities'; const LinkWrapper = styled.div` padding: 20px; @@ -19,25 +20,23 @@ const Button = styled.button` `; const LinkComponent = ({ mark, setPosition, position }) => { - const href = mark ? mark.attrs.href : null, - linkMark = mark ? mark : null, - { view: { main }, activeView } = useContext(WaxContext), - { state, dispatch } = activeView, - ref = useRef(null), - linkInput = useRef(null), - [addButtonText, setButtonText] = useState("Create"), - [lastLinkMark, setLLastLinkMark] = useState(linkMark), - [linkHref, setLinkHref] = useState(href); + const href = mark ? mark.attrs.href : null; + const linkMark = mark ? mark : null; + const { + view: { main }, + activeView, + } = useContext(WaxContext); + const { state, dispatch } = activeView; + const ref = useRef(null); + const linkInput = useRef(null); + const [addButtonText, setButtonText] = useState('Create'); + const [lastLinkMark, setLLastLinkMark] = useState(linkMark); + const [linkHref, setLinkHref] = useState(href); - useEffect( - () => { - const width = ref.current ? ref.current.offsetWidth : 0; - const left = Math.abs(position.left - width / 2); - setLinkText(); - removeMarkIfEmptyHref(); - }, - [ref.current, href] - ); + useEffect(() => { + setLinkText(); + removeMarkIfEmptyHref(); + }, [ref.current, href]); const addLinkHref = () => { const href = linkHref; @@ -50,9 +49,9 @@ const LinkComponent = ({ mark, setPosition, position }) => { mark.to, linkMark.create({ ...((mark && mark.attrs) || {}), - href - }) - ) + href, + }), + ), ); activeView.focus(); }; @@ -63,45 +62,49 @@ const LinkComponent = ({ mark, setPosition, position }) => { }; const handleKeyDown = event => { - if (event.key === "Enter" || event.which === 13) { + if (event.key === 'Enter' || event.which === 13) { addLinkHref(); } }; const updateLinkHref = () => { - const { current: { value } } = linkInput; + const { + current: { value }, + } = linkInput; setLinkHref(value); }; const setLinkText = () => { - if (mark && mark.attrs.href !== "") { - setButtonText("Update"); + if (mark && mark.attrs.href !== '') { + setButtonText('Update'); setLinkHref(mark.attrs.href); } else { - setButtonText("Create"); - setLinkHref(""); + setButtonText('Create'); + setLinkHref(''); if (linkInput.current) linkInput.current.focus(); } }; const removeMarkIfEmptyHref = () => { - const { selection: { $from, $to } } = state; - const PMLinkMark = state.schema.marks["link"]; + const { + selection: { $from, $to }, + } = state; + const PMLinkMark = state.schema.marks['link']; const actualMark = DocumentHelpers.getSelectionMark(state, PMLinkMark); setLLastLinkMark(actualMark); if ( - lastLinkMark.attrs.href === "" && + lastLinkMark.attrs.href === '' && ($from.pos < lastLinkMark.from || $to.pos > lastLinkMark.to) ) { dispatch( state.tr - .setMeta("addToHistory", false) + .setMeta('addToHistory', false) .removeMark( lastLinkMark.from, lastLinkMark.to, - state.schema.marks.link - ) + state.schema.marks.link, + ), ); } }; diff --git a/wax-prosemirror-components/src/components/notes/NoteNumber.js b/wax-prosemirror-components/src/components/notes/NoteNumber.js index aa79ea8c7644ff3cd5bc67b3e89dcf44fc35bfdd..3341978eda376a797e347092c672e92854df9f2f 100644 --- a/wax-prosemirror-components/src/components/notes/NoteNumber.js +++ b/wax-prosemirror-components/src/components/notes/NoteNumber.js @@ -1,5 +1,6 @@ -import React from "react"; -import styled from "styled-components"; +/* eslint react/prop-types: 0 */ +import React from 'react'; +import styled from 'styled-components'; const NoteNumberStyled = styled.div` display: flex; diff --git a/wax-prosemirror-components/src/components/rightArea/BoxList.js b/wax-prosemirror-components/src/components/rightArea/BoxList.js index 10d1d454d041b6bacfc5d33a01716707abc60f61..23e2ab47a3a6fca236f11b694ededc4d75700398 100644 --- a/wax-prosemirror-components/src/components/rightArea/BoxList.js +++ b/wax-prosemirror-components/src/components/rightArea/BoxList.js @@ -1,3 +1,4 @@ +/* eslint react/prop-types: 0 */ import { Mark } from 'prosemirror-model'; import React from 'react'; import CommentBox from '../comments/CommentBox'; diff --git a/wax-prosemirror-components/src/components/rightArea/RightArea.js b/wax-prosemirror-components/src/components/rightArea/RightArea.js index a11ecbbb708743a0a9514d2dad8b82b6523b1f71..b66fa208e103b1ef45964ac047cf50a9df15613f 100644 --- a/wax-prosemirror-components/src/components/rightArea/RightArea.js +++ b/wax-prosemirror-components/src/components/rightArea/RightArea.js @@ -1,11 +1,6 @@ +/* eslint react/prop-types: 0 */ import { Mark } from 'prosemirror-model'; -import React, { - useContext, - useState, - useEffect, - useMemo, - useCallback, -} from 'react'; +import React, { useContext, useState, useMemo, useCallback } from 'react'; import useDeepCompareEffect from 'use-deep-compare-effect'; import { each, uniqBy, sortBy } from 'lodash'; import { WaxContext } from 'wax-prosemirror-core'; diff --git a/wax-prosemirror-components/src/components/trackChanges/TrackChangeBox.js b/wax-prosemirror-components/src/components/trackChanges/TrackChangeBox.js index d2ec7235f617014fde5d83da1c61a40437f3c674..b81aa5ec4122eaf91de33a7d7593bd0073429c8f 100644 --- a/wax-prosemirror-components/src/components/trackChanges/TrackChangeBox.js +++ b/wax-prosemirror-components/src/components/trackChanges/TrackChangeBox.js @@ -1,8 +1,9 @@ -import { Mark } from "prosemirror-model"; -import React, { Fragment, useState, useEffect, useContext } from "react"; -import { Transition } from "react-transition-group"; -import styled from "styled-components"; -import { WaxContext } from "wax-prosemirror-core"; +/* eslint react/prop-types: 0 */ +import { Mark } from 'prosemirror-model'; +import React, { useState, useEffect, useContext } from 'react'; +import { Transition } from 'react-transition-group'; +import styled from 'styled-components'; +import { WaxContext } from 'wax-prosemirror-core'; const TrackChangeBoxStyled = styled.div` display: flex; @@ -10,30 +11,37 @@ const TrackChangeBoxStyled = styled.div` margin-top: 10px; border: 1px solid blue; position: absolute; - transition: ${({ state }) => "top 1s, opacity 1.5s, left 1s"}; + transition: ${({ state }) => 'top 1s, opacity 1.5s, left 1s'}; top: ${props => (props.top ? `${props.top}px` : 0)}; left: ${props => (props.active ? `${63}%` : `${65}%`)}; opacity: ${({ state }) => { switch (state) { - case "exited": + case 'exited': return 0.2; - case "exiting": + case 'exiting': return 0.4; - case "entering": + case 'entering': return 0.6; - case "entered": + case 'entered': return 1; + default: } }}; `; export default ({ trackChange, view, top, dataBox }) => { const [animate, setAnimate] = useState(false); - const { view: { main }, app, activeView } = useContext(WaxContext); + const { + view: { main }, + app, + activeView, + } = useContext(WaxContext); let action; if (trackChange instanceof Mark) { - if ((trackChange.type.name = "format_change")) { - const { attrs: { username, before, after } } = trackChange; + if ((trackChange.type.name = 'format_change')) { + const { + attrs: { username, before, after }, + } = trackChange; action = `User ${username} added ${after[0]}`; } } else { @@ -46,7 +54,7 @@ export default ({ trackChange, view, top, dataBox }) => { }, []); return ( - <Fragment> + <> <Transition in={animate} timeout={1000}> {state => ( <TrackChangeBoxStyled @@ -63,6 +71,6 @@ export default ({ trackChange, view, top, dataBox }) => { </TrackChangeBoxStyled> )} </Transition> - </Fragment> + </> ); }; diff --git a/wax-prosemirror-components/src/components/trackChanges/TrackChangeEnable.js b/wax-prosemirror-components/src/components/trackChanges/TrackChangeEnable.js index 4966c984113a2807d546e6d8a0956a47814c34b6..742f9a9b0765e19d6844c3cf3682e5937d8c1390 100644 --- a/wax-prosemirror-components/src/components/trackChanges/TrackChangeEnable.js +++ b/wax-prosemirror-components/src/components/trackChanges/TrackChangeEnable.js @@ -1,3 +1,4 @@ +/* eslint react/prop-types: 0 */ import React, { useContext, useState } from 'react'; import styled from 'styled-components'; import { ButtonStyles } from 'wax-prosemirror-themes'; diff --git a/wax-prosemirror-services/src/TablesService/EditTableService/TableDropDownOptions.js b/wax-prosemirror-services/src/TablesService/EditTableService/TableDropDownOptions.js index c08f229bb9caad1e51d23ce04f2774f9de1ec743..d487015827e81304ab6657b82022bce028de1569 100644 --- a/wax-prosemirror-services/src/TablesService/EditTableService/TableDropDownOptions.js +++ b/wax-prosemirror-services/src/TablesService/EditTableService/TableDropDownOptions.js @@ -1,20 +1,20 @@ -import React from "react"; -import { v4 as uuidv4 } from "uuid"; -import { injectable } from "inversify"; -import { isEmpty } from "lodash"; -import { TableDropDown } from "wax-prosemirror-components"; -import { addColumnBefore } from "prosemirror-tables"; -import { Commands } from "wax-prosemirror-utilities"; -import Tools from "../../lib/Tools"; +import React from 'react'; +import { v4 as uuidv4 } from 'uuid'; +import { injectable } from 'inversify'; +import { isEmpty } from 'lodash'; +import { TableDropDown } from 'wax-prosemirror-components'; +import { addColumnBefore } from 'prosemirror-tables'; +import { Commands } from 'wax-prosemirror-utilities'; +import Tools from '../../lib/Tools'; @injectable() export default class TableDropDownOptions extends Tools { - title = "Select Options"; - content = "table"; + title = 'Select Options'; + content = 'table'; get run() { - return () => { - return true; + return (state, dispatch, tableFn) => { + tableFn(state, dispatch); }; } diff --git a/wax-prosemirror-services/src/TablesService/InsertTableService/Table.js b/wax-prosemirror-services/src/TablesService/InsertTableService/Table.js index cae1293ff31721cdfcf1022dc4bfd4c26c7faf13..d475193dbfe284fd9fadb835cb9f3400240cd4df 100644 --- a/wax-prosemirror-services/src/TablesService/InsertTableService/Table.js +++ b/wax-prosemirror-services/src/TablesService/InsertTableService/Table.js @@ -1,11 +1,11 @@ -import Tools from "../../lib/Tools"; -import { Commands } from "wax-prosemirror-utilities"; -import { injectable } from "inversify"; -import { icons } from "wax-prosemirror-components"; +import Tools from '../../lib/Tools'; +import { Commands } from 'wax-prosemirror-utilities'; +import { injectable } from 'inversify'; +import { icons } from 'wax-prosemirror-components'; @injectable() export default class Table extends Tools { - title = "Insert table"; + title = 'Insert table'; content = icons.table; get run() { diff --git a/wax-prosemirror-services/src/TrackChangeService/track-changes/trackedTransaction.js b/wax-prosemirror-services/src/TrackChangeService/track-changes/trackedTransaction.js index 43fc3a0fb38a478cb91b1ff980f7f94a8055addd..e452aaad1357c28fd06c74508505efca741627ca 100644 --- a/wax-prosemirror-services/src/TrackChangeService/track-changes/trackedTransaction.js +++ b/wax-prosemirror-services/src/TrackChangeService/track-changes/trackedTransaction.js @@ -14,6 +14,16 @@ import addMarkStep from './helpers/addMarkStep'; import removeMarkStep from './helpers/removeMarkStep'; const trackedTransaction = (tr, state, user) => { + if (!tr.selectionSet) { + const $pos = state.selection.$anchor; + for (let { depth } = $pos; depth > 0; depth--) { + const node = $pos.node(depth); + if (node.type.spec.tableRole === 'table') { + return tr; + } + } + } + if ( !tr.steps.length || (tr.meta && diff --git a/wax-prosemirror-themes/package.json b/wax-prosemirror-themes/package.json index cb35a2db4b95ed62d326d19ce708cca1d5025940..d63550ca5b630d9c39c928c48d7100089cc02874 100644 --- a/wax-prosemirror-themes/package.json +++ b/wax-prosemirror-themes/package.json @@ -1,6 +1,6 @@ { "name": "wax-prosemirror-themes", - "author": "Collaborative Knowledge Foundation", + "author": "Christos Kokosias", "version": "0.0.13", "description": "Wax prosemirror themes", "license": "MIT", diff --git a/wax-prosemirror-utilities/package.json b/wax-prosemirror-utilities/package.json index 5161ee3a4545b5c7d5f1c0c2214b8ba9b814497d..28ea30ba3b99c93dfd1caf72c4d82210e17808e3 100644 --- a/wax-prosemirror-utilities/package.json +++ b/wax-prosemirror-utilities/package.json @@ -1,6 +1,6 @@ { "name": "wax-prosemirror-utilities", - "author": "Collaborative Knowledge Foundation", + "author": "Christos Kokosias", "version": "0.0.13", "description": "Wax prosemirror utilities", "license": "MIT",