Merge branch 'editoria-fixes' into 'master'

Editoria fixes

See merge request !276

wax-prosemirror-components/index.js

 export { default as Overlay } from './src/components/Overlay';
 export { default as Button } from './src/components/Button';
 export { default as icons } from './src/icons/icons';
-export { default as TableDropDown } from './src/components/TableDropDown';
+export { default as TableDropDown } from './src/components/tables/TableDropDown';
 export { default as ImageUpload } from './src/components/images/ImageUpload';
 export { default as TitleButton } from './src/components/TitleButton';
 export { default as LeftMenuTitle } from './src/components/LeftMenuTitle';

wax-prosemirror-components/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.42",
   "description": "Wax prosemirror UI components",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "files": [
     "dist"
   ],

wax-prosemirror-components/src/components/findAndReplace/ExpandedFindAndReplaceComponent.js

@@ -135,7 +135,7 @@ const PreviousNextContainer = styled.div`
   }
 `;
 
-const PreviousNextButton = styled.span`
+const IconWrapper = styled.span`
   &:focus {
     outline: none;
   }
@@ -333,15 +333,20 @@ const ExpandedFindAndReplaceComponent = ({
         <ButtonReplace onClick={replace}>Replace</ButtonReplace>
         <ButtonReplaceAll onClick={replaceAll}>Replace All</ButtonReplaceAll>
         <PreviousNextContainer>
-          <StyledIcon
-            name="navigatePrevious"
+          <IconWrapper
             onClick={() => findPreviousMatch(searchValue, matchCaseOption)}
-          />
-
-          <StyledIcon
-            name="navigateNext"
+            role="button"
+            tabIndex="0"
+          >
+            <StyledIcon name="navigatePrevious" />
+          </IconWrapper>
+          <IconWrapper
             onClick={() => findNextMatch(searchValue, matchCaseOption)}
-          />
+            role="button"
+            tabIndex="0"
+          >
+            <StyledIcon name="navigateNext" />
+          </IconWrapper>
         </PreviousNextContainer>
       </ControlContainer>
     </Wrapper>

wax-prosemirror-components/src/components/TableDropDown.js → wax-prosemirror-components/src/components/tables/TableDropDown.js

 /* eslint react/prop-types: 0 */
-import React, { useMemo, useContext, useState } from 'react';
-import { TextSelection } from 'prosemirror-state';
+import React, { useMemo, useContext, useState, useEffect } from 'react';
 import styled from 'styled-components';
 import * as tablesFn from 'prosemirror-tables';
 import { WaxContext } from 'wax-prosemirror-core';
@@ -37,26 +36,35 @@ 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' },
-];
-
 const TableDropDown = ({ item }) => {
+  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' },
+  ];
+
   const { activeView } = useContext(WaxContext);
   const [selectedOption, setSelectedOption] = useState('');
+  const appliedDropDownOptions = [];
 
+  dropDownOptions.forEach(option => {
+    if (tablesFn[option.value](activeView.state)) {
+      appliedDropDownOptions.push(option);
+    }
+  });
   const isDisabled = item.select(activeView.state);
+
+  useEffect(() => {}, [selectedOption]);
+
   const TableDropDownComponent = useMemo(
     () => (
       <DropdownStyled
@@ -72,12 +80,12 @@ const TableDropDown = ({ item }) => {
             activeView.focus();
           });
         }}
-        options={dropDownOptions}
+        options={appliedDropDownOptions}
         placeholder="Table Options"
         select={isDisabled}
       />
     ),
-    [isDisabled, selectedOption],
+    [isDisabled, selectedOption, appliedDropDownOptions],
   );
 
   return TableDropDownComponent;

wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsComponent.js

@@ -244,7 +244,7 @@ const TrackChangeOptionsComponent = ({
         {inlineTracks + blockTracks} SUGGESTIONS
       </TotalSuggestions>
       <ToolsContainer>{renderTools()}</ToolsContainer>
-      <AcceptRejectAll
+      {/* <AcceptRejectAll
         onMouseEnter={() => setIsShownTrack(true)}
         onMouseLeave={() => setIsShownTrack(false)}
       >
@@ -265,12 +265,12 @@ const TrackChangeOptionsComponent = ({
             </AcceptRejectAllRow>
           </AcceptRejectAllControls>
         )}
-      </AcceptRejectAll>
-      <TotalComments>{comments} COMMENTS</TotalComments>
+      </AcceptRejectAll> */}
+      {/* <TotalComments>{comments} COMMENTS</TotalComments>
       <ShowComments>
         <span>Show comments</span>
         <StyledToggleOn name="toggleOn" />
-      </ShowComments>
+      </ShowComments> */}
     </Wrapper>
   );
 };

wax-prosemirror-core/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.42",
   "description": "Wax prosemirror core",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "files": [
     "dist"
   ],

wax-prosemirror-plugins/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.42",
   "description": "Wax prosemirror plugins",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "files": [
     "dist"
   ],

wax-prosemirror-schema/index.js

@@ -14,7 +14,6 @@ export { default as sourceMark } from './src/marks/sourceMark';
 export { default as commentMark } from './src/marks/commentMark';
 export { default as mathSelectMark } from './src/marks/mathSelectMark';
 export { default as highlightMark } from './src/marks/highlightMark';
-export { default as transformMark } from './src/marks/transformMark';
 export { default as customtagInlineMark } from './src/marks/customTagInlineMark';
 /*
 LIST OF TRACK CHANGES MARKS

wax-prosemirror-schema/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.42",
   "description": "Wax prosemirror schema",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "files": [
     "dist"
   ],

wax-prosemirror-schema/src/marks/transformMark.js

-const transform = {
-  excludes: 'transformCase',
-
-  attrs: {
-    style: { default: null },
-  },
-  inclusive: false,
-  parseDOM: [
-    {
-      tag: 'transform',
-      getAttrs(hook, next) {
-        Object.assign(hook, {
-          style: hook.dom.getAttribute('style'),
-        });
-        next();
-      },
-    },
-  ],
-  toDOM(hook, next) {
-    hook.value = ['transform', hook.node.attrs, 0]; // eslint-disable-line no-param-reassign
-    next();
-  },
-};
-
-export default transform;

wax-prosemirror-services/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.42",
   "description": "Wax prosemirror services",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "files": [
     "dist"
   ],

wax-prosemirror-services/src/TransformService/TransformService.js

-import { transformMark } from 'wax-prosemirror-schema';
 import TransformTool from './TransformTool';
 import Service from '../Service';
 
 export default class TransformService extends Service {
   register() {
     this.container.bind('TransformTool').to(TransformTool);
-    const createMark = this.container.get('CreateMark');
-    createMark(
-      {
-        transform: transformMark,
-      },
-      { toWaxSchema: true },
-    );
   }
 }

wax-prosemirror-services/src/TransformService/TransformTool.js

+/* eslint-disable no-unused-expressions */
 import React from 'react';
 import { TransformCaseComponent } from 'wax-prosemirror-components';
 import { isEmpty } from 'lodash';
@@ -8,6 +9,55 @@ import Tools from '../lib/Tools';
 // eslint-disable-next-line no-unused-vars
 import titleCase from './titleCase';
 
+const upperLowerCase = (state, dispatch, casing) => {
+  // grab the current transaction and selection
+  let { tr } = state;
+  const { selection } = tr;
+  const marksAdd = [];
+
+  state.doc.nodesBetween(selection.from, selection.to, (node, position) => {
+    if (node.marks.length > 0) {
+      node.marks.forEach(item => {
+        marksAdd.push({
+          name: item.type.name,
+          type: item.type,
+          pos: DocumentHelpers.findMark(state, item.type, true),
+          attrs: item.attrs,
+        });
+      });
+    }
+
+    // we only processing text, must be a selection
+    if (!node.isTextblock || selection.from === selection.to) return;
+
+    // calculate the section to replace
+    const startPosition = Math.max(position + 1, selection.from);
+    const endPosition = Math.min(position + node.nodeSize, selection.to);
+
+    // grab the content
+    const substringFrom = Math.max(0, selection.from - position - 1);
+    const substringTo = Math.max(0, selection.to - position - 1);
+    const updatedText = node.textContent.substring(substringFrom, substringTo);
+
+    // set the casing
+    const textNode =
+      casing === 'upperCase'
+        ? state.schema.text(updatedText.toUpperCase())
+        : state.schema.text(updatedText.toLocaleLowerCase());
+
+    // replace
+    tr = tr.replaceWith(startPosition, endPosition, textNode);
+  });
+
+  marksAdd.forEach(item => {
+    item.pos.forEach(markPos => {
+      tr.addMark(markPos.from, markPos.to, item.type.create(item.attrs));
+    });
+  });
+
+  dispatch(tr.scrollIntoView());
+};
+
 class TransformTool extends Tools {
   title = 'Transform';
   icon = 'transformCase';
@@ -24,50 +74,68 @@ class TransformTool extends Tools {
       } = state;
 
       const { tr } = state;
-      const selectionTr = state.tr.selection;
-      const marksAdd = [
-        {
-          name: '',
-          pos: [],
-          attrs: {},
-        },
-      ];
-      let isAddMark = false;
+      const { selection } = state.tr;
+      const marksAdd = [];
 
       switch (textCase) {
         case 'upperCase':
-          dispatch(
-            state.tr.addMark(
-              $from.pos,
-              $to.pos,
-              state.schema.marks.transform.create({
-                style: 'text-transform: uppercase',
-              }),
-            ),
-          );
+          upperLowerCase(state, dispatch, 'upperCase');
           break;
         case 'lowerCase':
-          dispatch(
-            state.tr.addMark(
-              $from.pos,
-              $to.pos,
-              state.schema.marks.transform.create({
-                style: 'text-transform: lowercase',
-              }),
-            ),
-          );
+          upperLowerCase(state, dispatch, 'lowerCase');
           break;
-        case 'sentenceCase':
-          dispatch(
-            state.tr.addMark(
-              $from.pos,
-              $to.pos,
-              state.schema.marks.transform.create({
-                style: 'text-transform: capitalize',
-              }),
-            ),
-          );
+        case 'sentenceCase': {
+          state.doc.nodesBetween($from.pos, $to.pos, (node, position) => {
+            if (node.marks.length > 0) {
+              node.marks.forEach(item => {
+                marksAdd.push({
+                  name: item.type.name,
+                  type: item.type,
+                  pos: DocumentHelpers.findMark(state, item.type, true),
+                  attrs: item.attrs,
+                });
+              });
+            }
+
+            if (node.type.name !== 'code_block') {
+              if (!node.isTextblock || $from.pos === $to.pos) return;
+              const startPosition = Math.max(position + 1, $from.pos);
+              const endPosition = Math.min(
+                position + node.nodeSize,
+                selection.to,
+              );
+              const substringFrom = Math.max(0, $from.pos - position - 1);
+              const substringTo = Math.max(0, selection.to - position - 1);
+
+              const updatedText = node.textContent.substring(
+                substringFrom,
+                substringTo,
+              );
+              if (updatedText.length > 0) {
+                const rg = /(^\w{1}|\.\s*\w{1})/gi;
+
+                const textNode = state.schema.text(
+                  updatedText.replace(rg, toReplace => {
+                    return toReplace.toUpperCase();
+                  }),
+                );
+                tr.replaceWith(startPosition, endPosition, textNode);
+              }
+            }
+          });
+
+          marksAdd.forEach(item => {
+            item.pos.forEach(markPos => {
+              tr.addMark(
+                markPos.from,
+                markPos.to,
+                item.type.create(item.attrs),
+              );
+            });
+          });
+          dispatch(tr);
           break;
+        }
         case 'titleCase':
           state.doc.nodesBetween($from.pos, $to.pos, (node, position) => {
             if (node.marks.length > 0) {
@@ -86,10 +154,10 @@ class TransformTool extends Tools {
               const startPosition = Math.max(position + 1, $from.pos);
               const endPosition = Math.min(
                 position + node.nodeSize,
-                selectionTr.to,
+                selection.to,
               );
               const substringFrom = Math.max(0, $from.pos - position - 1);
-              const substringTo = Math.max(0, selectionTr.to - position - 1);
+              const substringTo = Math.max(0, selection.to - position - 1);
 
               const updatedText = node.textContent.substring(
                 substringFrom,
@@ -100,22 +168,20 @@ class TransformTool extends Tools {
                 tr.replaceWith(startPosition, endPosition, textNode);
               }
             }
-            isAddMark = true;
           });
 
-          if (isAddMark) {
-            marksAdd.forEach(item => {
-              if (item.name !== 'transform') {
-                item.pos.forEach(markPos => {
-                  tr.addMark(
-                    markPos.from,
-                    markPos.to,
-                    item.type.create(item.attrs),
-                  );
-                });
-              }
-            });
-          }
+          marksAdd.forEach(item => {
+            if (item.name !== 'transform') {
+              item.pos.forEach(markPos => {
+                tr.addMark(
+                  markPos.from,
+                  markPos.to,
+                  item.type.create(item.attrs),
+                );
+              });
+            }
+          });
+
           dispatch(tr);
 
           break;

wax-prosemirror-utilities/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.42",
   "description": "Wax prosemirror utilities",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "files": [
     "dist"
   ],