Merge branch 'buttons' into 'master'

Buttons

See merge request !171

wax-prosemirror-components/src/ui/buttons/MenuButton.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { css } from 'styled-components';
+
+import Icon from './Icon';
+
+const activeStyles = css`
+  background: gray;
+  color: white;
+
+  > svg {
+    fill: white;
+  }
+
+  &:hover {
+    background: gray;
+  }
+`;
+
+const disabledStyles = css`
+  cursor: not-allowed;
+
+  > svg {
+    fill: gainsboro;
+  }
+
+  &:hover {
+    background: none;
+  }
+`;
+
+const Wrapper = styled.button.attrs(props => ({
+  title: props.title,
+  type: 'button',
+}))`
+  background: none;
+  border: none;
+  border-radius: 2px;
+  cursor: pointer;
+  height: 28px;
+  outline: none;
+  padding: 2px;
+  transition: all 0.1s ease-in;
+
+  > svg {
+    transition: all 0.1s ease-in;
+  }
+
+  &:hover {
+    background: gainsboro;
+  }
+
+  ${props => props.active && activeStyles}
+  ${props => props.disabled && disabledStyles}
+`;
+
+const StyledIcon = styled(Icon)`
+  height: 24px;
+  width: 24px;
+`;
+
+const Label = styled.span`
+  margin: 0 8px;
+  ${props => props.hasIcon && `margin: 0 8px 0 4px;`}
+`;
+
+const MenuButton = props => {
+  const {
+    active,
+    className,
+    disabled,
+    iconName,
+    label,
+    title,
+    onMouseDown,
+  } = props;
+
+  return (
+    <Wrapper
+      active={active}
+      className={className}
+      disabled={disabled}
+      onMouseDown={onMouseDown}
+      title={title}
+    >
+      {iconName && (
+        <StyledIcon active={active} disabled={disabled} name={iconName} />
+      )}
+
+      {label && <Label hasIcon={!!iconName}>{label}</Label>}
+    </Wrapper>
+  );
+};
+
+MenuButton.propTypes = {
+  active: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool.isRequired,
+  iconName: PropTypes.string,
+  label: PropTypes.string,
+  title: PropTypes.string,
+};
+
+MenuButton.defaultProps = {
+  iconName: null,
+  label: null,
+  title: null,
+};
+
+export default MenuButton;

wax-prosemirror-components/src/ui/tabs/BlockElement.js

@@ -14,22 +14,22 @@ const Box = styled.div`
   background: gray;
 `;
 
-const Label = styled(Button)``;
+const StyledButton = styled(Button)``;
 
 const BlockElement = props => {
-  const { item, onClick } = props;
+  const { item, onClick, view } = props;
 
   return (
     <Wrapper onClick={onClick}>
       <Box />
-      <Label item={item} />
+      <StyledButton item={item} view={view} />
     </Wrapper>
   );
 };
 
 BlockElement.propTypes = {
   item: PropTypes.shape({
-    content: PropTypes.string,
+    label: PropTypes.string,
   }).isRequired,
 };
 

wax-prosemirror-components/src/ui/tabs/BlockElementGroup.js

@@ -4,15 +4,32 @@ import styled from 'styled-components';
 import BlockElement from './BlockElement';
 
 const Wrapper = styled.div``;
-const GroupName = styled.div``;
+
+const GroupName = styled.div`
+  margin-bottom: 4px;
+  font-size: 14px;
+  text-transform: uppercase;
+`;
+
+const ListWrapper = styled.div`
+  > div:not(:last-child) {
+    margin-bottom: 4px;
+  }
+`;
 
 const BlockElementGroup = props => {
-  const { groupName, items } = props;
+  const { groupName, items, view } = props;
 
   return (
     <Wrapper>
       <GroupName>{groupName}</GroupName>
-      {items && items.map(item => <BlockElement item={item} />)}
+
+      <ListWrapper>
+        {items &&
+          items.map(item => (
+            <BlockElement key={item.name} item={item} view={view} />
+          ))}
+      </ListWrapper>
     </Wrapper>
   );
 };

wax-prosemirror-components/src/ui/tabs/BlockLevelTools.js

@@ -5,19 +5,26 @@ import styled from 'styled-components';
 import BlockElementGroup from './BlockElementGroup';
 
 const Wrapper = styled.div`
+  padding: 8px;
+
   > div:not(:last-child) {
     margin-bottom: 8px;
   }
 `;
 
 const BlockLevelTools = props => {
-  const { groups } = props;
+  const { groups, view } = props;
 
   return (
     <Wrapper>
       {groups &&
         groups.map(group => (
-          <BlockElementGroup groupName={group.groupName} items={group.items} />
+          <BlockElementGroup
+            groupName={group.groupName}
+            key={group.groupName}
+            items={group.items}
+            view={view}
+          />
         ))}
     </Wrapper>
   );
@@ -29,7 +36,7 @@ BlockLevelTools.propTypes = {
       groupName: PropTypes.string,
       items: PropTypes.arrayOf(
         PropTypes.shape({
-          content: PropTypes.string,
+          label: PropTypes.string,
         }),
       ),
     }),

wax-prosemirror-components/src/ui/tabs/Tabs.js

 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
+import Icon from '../buttons/Icon';
 
 const Wrapper = styled.div`
   display: flex;
@@ -10,7 +11,6 @@ const Wrapper = styled.div`
 const Tabs = styled.div`
   display: flex;
   flex-direction: column;
-  margin-right: 10px;
 `;
 
 const activeTab = css`
@@ -18,23 +18,26 @@ const activeTab = css`
 `;
 
 const Tab = styled.div`
-  height: 50px;
-  width: 50px;
-  background: papayawhip;
-  margin-bottom: 5px;
+  background: gainsboro;
+  padding: 8px;
+  margin: 0 4px 4px 4px;
   cursor: pointer;
 
+  &:first-child {
+    margin-top: 4px;
+  }
+
   ${props => props.active && activeTab}
 
   &:hover {
-    background: gray;
+    background: silver;
   }
 `;
 
 const Content = styled.div`
   width: 100%;
   height: 100%;
-  border: 1px solid gray;
+  background: gainsboro;
 `;
 
 const TabsPane = props => {
@@ -52,7 +55,7 @@ const TabsPane = props => {
             key={tab.id}
             onClick={() => setTabDisplay(tab.id)}
           >
-            {tab.displayName}
+            <Icon name={tab.icon} />
           </Tab>
         ))}
       </Tabs>

wax-prosemirror-core/package.json

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

wax-prosemirror-core/src/Wax.js

 /* eslint react/prop-types: 0 */
 import React, { useEffect, useState } from 'react';
 import debounce from 'lodash/debounce';
-import styled from 'styled-components';
 
 import { DOMSerializer, DOMParser } from 'prosemirror-model';
 
@@ -43,12 +42,6 @@ const createPlaceholder = placeholder => {
   return Placeholder({ content: placeholder });
 };
 
-const LayoutWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 99%;
-`;
-
 const Wax = props => {
   let finalPlugins = [];
   const [application, setApplication] = useState();
@@ -125,24 +118,23 @@ const Wax = props => {
   const WaxRender = Layout.layoutComponent;
 
   return (
-    <LayoutWrapper className={`${className}`}>
-      <WaxProvider app={application}>
-        <WaxView
-          autoFocus={autoFocus}
-          readonly={readonly}
-          options={WaxOptions}
-          placeholder={placeholder}
-          fileUpload={fileUpload}
-          onBlur={onBlur || (v => true)}
-          onChange={finalOnChange || (v => true)}
-          debug={debug}
-          TrackChange={TrackChange}
-          user={user}
-        >
-          {({ editor }) => <WaxRender editor={editor} />}
-        </WaxView>
-      </WaxProvider>
-    </LayoutWrapper>
+    <WaxProvider app={application}>
+      <WaxView
+        autoFocus={autoFocus}
+        readonly={readonly}
+        options={WaxOptions}
+        placeholder={placeholder}
+        fileUpload={fileUpload}
+        onBlur={onBlur || (v => true)}
+        onChange={finalOnChange || (v => true)}
+        debug={debug}
+        TrackChange={TrackChange}
+        user={user}
+      >
+        {({ editor }) => <WaxRender className={className} editor={editor} />}
+      </WaxView>
+    </WaxProvider>
   );
 };
+
 export default Wax;

wax-prosemirror-layouts/package.json

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

wax-prosemirror-layouts/src/layouts/EditoriaLayout.js

 import React, { useContext } from 'react';
-import styled, { ThemeProvider } from 'styled-components';
+import styled, { css, ThemeProvider } from 'styled-components';
 import PanelGroup from 'react-panelgroup';
 import { InfoArea } from 'wax-prosemirror-components';
 import { componentPlugin } from 'wax-prosemirror-services';
@@ -8,12 +8,7 @@ import { DocumentHelpers } from 'wax-prosemirror-utilities';
 import { WaxContext } from 'wax-prosemirror-core';
 import EditorElements from './EditorElements';
 
-const LayoutWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
+const divider = css`
   .divider {
     &:before {
       content: 'Notes';
@@ -61,124 +56,71 @@ const LayoutWrapper = styled.div`
   }
 `;
 
-const LeftMenuSurfaceContainer = styled.div`
+const Wrapper = styled.div`
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+
   height: 100%;
   width: 100%;
+  overflow: hidden;
+
+  ${divider}
 `;
 
-const WaxSurfaceContainer = styled.div`
-  flex: 1;
-  position: relative;
-  z-index: 1;
+const Main = styled.div`
   display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
+  flex-grow: 1;
 `;
 
-const EditorContainer = styled.div`
-  width: 65%;
-  height: 100%;
-  .ProseMirror {
-    -moz-box-shadow: 0 0 8px #ecedf1;
-    -webkit-box-shadow: 0 0 8px #ecedf1;
-    box-shadow: 0 0 8px #ecedf1;
-    min-height: 90%;
-    padding: 30px 30px 30px 30px;
-    @media (max-width: 600px) {
-      padding: 65px 10px 10px 10px;
-    }
-  }
-  @media (max-width: 600px) {
-    width: 95%;
+const TopMenu = styled.div`
+  display: flex;
+  justify-content: center;
+  min-height: 40px;
+  user-select: none;
+  border-bottom: 2px solid #ecedf1;
+
+  > div:not(:last-child) {
+    border-right: 1px solid #ecedf1;
   }
 `;
 
+const SideMenu = styled.div`
+  border-right: 1px solid #ecedf1;
+  min-width: 250px;
+  height: 100%;
+`;
+
+const EditorArea = styled.div`
+  flex-grow: 1;
+`;
+
 const WaxSurfaceScroll = styled.div`
-  bottom: 0;
-  left: 0;
-  overflow: auto;
-  position: absolute;
+  overflow-y: auto;
   display: flex;
-  right: 0;
-  top: 0;
   box-sizing: border-box;
   padding: 0 2px 2px 2px;
   height: 100%;
+  width: 100%;
+
   ${EditorElements};
 `;
 
-const MainMenuContainer = styled.div`
-  background: #fff;
-  min-height: 52px;
-  line-height: 32px;
-  position: relative;
-  width: 100%;
-  user-select: none;
-  border-bottom: 2px solid #ecedf1;
-  @media (max-width: 600px) {
-    position: absolute;
-    /* width: 100%; */
-    font-size: 10px;
-    min-height: 72px;
-    line-height: 0px;
-  }
-`;
-const MainMenuInner = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
+const EditorContainer = styled.div`
+  width: 65%;
   height: 100%;
-  background: #fff;
-  z-index: 9999;
-  div {
-    align-items: center;
-    justify-content: center;
-    @media (max-width: 600px) {
-      justify-content: start;
-    }
-  }
-`;
 
-const SideMenuContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  width: 14%;
-  height: 98%;
-  @media (max-width: 600px) {
-    display: none;
+  .ProseMirror {
+    box-shadow: 0 0 8px #ecedf1;
+    min-height: 90%;
+    padding: 40px;
   }
 `;
 
-const SideMenuInner = styled.div`
+const CommentsContainer = styled.div`
   display: flex;
-  width: 100%;
-  > div {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    margin-top: 35px;
-    button {
-      display: flex;
-      flex-direction: column;
-      font-family: ${props => props.theme.fontInterface};
-      margin-left: 5%;
-      width: 90%;
-    }
-    [data-name='Display'] {
-      border-right: none;
-    }
-  }
+  flex-direction: column;
+  width: 35%;
+  height: 100%;
 `;
 
 const NotesAreaContainer = styled.div`
@@ -198,19 +140,6 @@ const NotesContainer = styled.div`
   height: 100%;
   width: 65%;
   position: relative;
-  @media (max-width: 600px) {
-    width: 100%;
-  }
-`;
-
-const CommentsContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 35%;
-  height: 100%;
-  @media (max-width: 600px) {
-    width: auto;
-  }
 `;
 
 let surfaceHeight = 700;
@@ -231,75 +160,65 @@ const hasNotes = main => {
 };
 
 const LeftSideBar = componentPlugin('leftSideBar');
-const RightSideBar = componentPlugin('rightSideBar');
+// const RightSideBar = componentPlugin('rightSideBar');
 const TopBar = componentPlugin('topBar');
 const NotesArea = componentPlugin('notesArea');
 const RightArea = componentPlugin('rightArea');
 const WaxOverlays = componentPlugin('waxOverlays');
 
-const withNotes = () => {
-  return (
-    <NotesAreaContainer>
-      <NotesContainer id="notes-container">
-        <NotesArea />
-      </NotesContainer>
-      <CommentsContainer>
-        <RightArea area="notes" />
-      </CommentsContainer>
-    </NotesAreaContainer>
-  );
-};
-
 const EditoriaLayout = ({ editor }) => {
   const {
     view: { main },
   } = useContext(WaxContext);
-  let AreasWithNotes = null;
 
-  if (main) {
-    const notes = hasNotes(main);
-    if (notes.length) AreasWithNotes = withNotes();
-  }
+  const notes = main && hasNotes(main);
+  const showNotes = notes && !!notes.length && notes.length > 0;
 
   return (
     <ThemeProvider theme={cokoTheme}>
-      <LayoutWrapper>
-        <MainMenuContainer>
-          <MainMenuInner>
-            <TopBar />
-          </MainMenuInner>
-        </MainMenuContainer>
-
-        <LeftMenuSurfaceContainer>
-          <SideMenuContainer>
-            <SideMenuInner>
-              <LeftSideBar />
-            </SideMenuInner>
-          </SideMenuContainer>
-
-          <PanelGroup
-            direction="column"
-            panelWidths={[
-              { size: surfaceHeight, resize: 'dynamic' },
-              { size: notesHeight, resize: 'stretch' },
-            ]}
-            onResizeEnd={onResizeEnd}
-          >
-            <WaxSurfaceContainer>
-              <WaxSurfaceScroll className="wax-surface-scroll">
+      <Wrapper>
+        <TopMenu>
+          <TopBar />
+        </TopMenu>
+
+        <Main>
+          <SideMenu>
+            <LeftSideBar />
+          </SideMenu>
+
+          <EditorArea>
+            <PanelGroup
+              direction="column"
+              panelWidths={[
+                { size: surfaceHeight, resize: 'stretch' },
+                { size: notesHeight, resize: 'stretch' },
+              ]}
+              onResizeEnd={onResizeEnd}
+            >
+              <WaxSurfaceScroll>
                 <EditorContainer>{editor}</EditorContainer>
                 <CommentsContainer>
                   <RightArea area="main" />
                 </CommentsContainer>
               </WaxSurfaceScroll>
-              <RightSideBar />
-            </WaxSurfaceContainer>
-            {AreasWithNotes}
-          </PanelGroup>
-        </LeftMenuSurfaceContainer>
+
+              {showNotes && (
+                <NotesAreaContainer>
+                  <NotesContainer id="notes-container">
+                    <NotesArea />
+                  </NotesContainer>
+                  <CommentsContainer>
+                    <RightArea area="notes" />
+                  </CommentsContainer>
+                </NotesAreaContainer>
+              )}
+            </PanelGroup>
+          </EditorArea>
+        </Main>
+
         <InfoArea />
         <WaxOverlays />
-      </LayoutWrapper>
+      </Wrapper>
     </ThemeProvider>
   );
 };

wax-prosemirror-plugins/package.json

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

wax-prosemirror-schema/package.json

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

wax-prosemirror-services/index.js

@@ -41,3 +41,5 @@ export { default as TextToolGroupService } from './src/WaxToolGroups/TextToolGro
 export { default as NoteToolGroupService } from './src/WaxToolGroups/NoteToolGroupService/NoteToolGroupService';
 export { default as CodeBlockToolGroupService } from './src/WaxToolGroups/CodeBlockToolGroupService/CodeBlockToolGroupService';
 export { default as TrackChangeToolGroupService } from './src/WaxToolGroups/TrackChangeToolGroupService/TrackChangeToolGroupService';
+
+export { default as DisplayTextToolGroupService } from './src/WaxToolGroups/DisplayTextToolGroupService/DisplayTextToolGroupService';

wax-prosemirror-services/package.json

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

wax-prosemirror-services/src/BaseService/RedoService/Redo.js

 import { redo } from 'prosemirror-history';
 import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
 import Tools from '../../lib/Tools';
 
 export default
 @injectable()
 class Redo extends Tools {
-  title = 'Redo last undone change';
-  content = icons.redo;
+  title = 'Redo';
+  icon = 'redo';
   onlyOnMain = true;
   name = 'Redo';
 

wax-prosemirror-services/src/BaseService/UndoService/Undo.js

 import { undo } from 'prosemirror-history';
 import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
 import Tools from '../../lib/Tools';
 
 export default
 @injectable()
 class Undo extends Tools {
-  title = 'Undo last change';
-  content = icons.undo;
+  title = 'Undo';
+  icon = 'undo';
   onlyOnMain = true;
   name = 'Undo';
 

wax-prosemirror-services/src/CodeBlockService/CodeBlockTool.js

 import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
 import { setBlockType } from 'prosemirror-commands';
 import Tools from '../lib/Tools';
 
 @injectable()
 class CodeBlockTool extends Tools {
   title = 'Insert Code Block';
-  content = icons.code_block;
+  icon = 'codeBlock';
   name = 'CodeBlockTool';
 
   get run() {

wax-prosemirror-services/src/DisplayBlockLevel/AuthorService/Author.js

@@ -5,7 +5,7 @@ import Tools from '../../lib/Tools';
 @injectable()
 class Author extends Tools {
   title = 'Change to Author';
-  content = 'Author';
+  label = 'Author';
   name = 'Author';
 
   get run() {

wax-prosemirror-services/src/DisplayBlockLevel/EpigraphPoetryService/EpigraphPoetry.js

@@ -5,7 +5,7 @@ import Tools from '../../lib/Tools';
 @injectable()
 class EpigraphPoetry extends Tools {
   title = 'Change to Epigraph Poetry';
-  content = 'Epigraph Poetry';
+  label = 'Epigraph Poetry';
   name = 'EpigraphPoetry';
 
   get run() {

wax-prosemirror-services/src/DisplayBlockLevel/EpigraphProseService/EpigraphProse.js

@@ -6,7 +6,7 @@ export default
 @injectable()
 class EpigraphProse extends Tools {
   title = 'Change to Epigraph Prose';
-  content = 'Epigraph Prose';
+  label = 'Epigraph Prose';
   name = 'EpigraphProse';
 
   get run() {

wax-prosemirror-services/src/DisplayBlockLevel/HeadingService/Heading1.js

@@ -6,7 +6,7 @@ export default
 @injectable()
 class Heading1 extends Tools {
   title = 'Change to heading level 1';
-  content = 'Heading 1';
+  label = 'Heading 1';
   name = 'Heading1';
 
   get run() {