disable certain tools in notes

wax-prosemirror-components/src/components/ImageUpload.js

@@ -3,6 +3,8 @@ import React from 'react';
 import styled from 'styled-components';
 
 const UploadImage = styled.div`
+  opacity: ${props => (props.select ? 1 : 0.4)};
+  pointer-events: ${props => (props.select ? 'default' : 'none')};
   color: #777;
   display: inline-flex;
   padding: 0px 10px;
@@ -15,20 +17,23 @@ const UploadImage = styled.div`
     display: none;
   }
 `;
-const ImageUpload = ({ item, fileUpload }) => (
-  <UploadImage>
-    <label
-      className="custom-file-upload"
-      title="upload image"
-      htmlFor="file-upload"
-    >
-      {item.content}
-      <input
-        id="file-upload"
-        onChange={e => fileUpload(e.target.files[0])}
-        type="file"
-      />
-    </label>
-  </UploadImage>
-);
+const ImageUpload = ({ item, fileUpload, view }) => {
+  const { activeViewId } = useContext(WaxContext);
+  return (
+    <UploadImage select={item.select && item.select(view.state, activeViewId)}>
+      <label
+        className="custom-file-upload"
+        title="upload image"
+        htmlFor="file-upload"
+      >
+        {item.content}
+        <input
+          id="file-upload"
+          onChange={e => fileUpload(e.target.files[0])}
+          type="file"
+        />
+      </label>
+    </UploadImage>
+  );
+};
 export default ImageUpload;

wax-prosemirror-layouts/dist/index.js

+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = require('react');
+var React__default = _interopDefault(React);
+var styled = require('styled-components');
+var styled__default = _interopDefault(styled);
+var PanelGroup = _interopDefault(require('react-panelgroup'));
+var waxProsemirrorComponents = require('wax-prosemirror-components');
+var waxProsemirrorServices = require('wax-prosemirror-services');
+var waxProsemirrorThemes = require('wax-prosemirror-themes');
+var waxProsemirrorUtilities = require('wax-prosemirror-utilities');
+var waxProsemirrorCore = require('wax-prosemirror-core');
+
+function _taggedTemplateLiteral(strings, raw) {
+  if (!raw) {
+    raw = strings.slice(0);
+  }
+
+  return Object.freeze(Object.defineProperties(strings, {
+    raw: {
+      value: Object.freeze(raw)
+    }
+  }));
+}
+
+function _templateObject() {
+  var data = _taggedTemplateLiteral(["\n  .ProseMirror {\n    counter-reset: footnote;\n    font-family: ", ";\n    &:focus {\n      outline: none;\n    }\n  }\n\n  .ProseMirror .wax-selection-marker {\n    background: #0a78ff;\n    color: white;\n  }\n\n  .ProseMirror footnote {\n    font-size: 0;\n    display: inline-block;\n    text-align: center;\n    width: 17px;\n    height: 17px;\n    background: black;\n    color: white;\n    cursor: pointer;\n  }\n\n  .ProseMirror footnote::after {\n    content: counter(footnote);\n    position: relative;\n    bottom: 2px;\n    font-size: 16px;\n    counter-increment: footnote;\n  }\n\n  hr {\n    padding: 2px 10px;\n    border: none;\n    margin: 1em 0;\n  }\n\n  hr:after {\n    content: '';\n    display: block;\n    height: 1px;\n    background-color: silver;\n    line-height: 2px;\n  }\n\n  ul,\n  ol {\n    padding-left: 30px;\n  }\n\n  blockquote {\n    padding-left: 1em;\n    border-left: 3px solid #eee;\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  img {\n    cursor: default;\n  }\n\n  sup,\n  sub {\n    line-height: 0;\n  }\n\n  /* Tables */\n\n  table {\n    border-collapse: initial;\n    border-spacing: 0;\n    border-width: 0 thin thin 0;\n    border: 1px solid #eee;\n    table-layout: fixed;\n    width: 100%;\n    margin: 0;\n    overflow: hidden;\n    page-break-inside: avoid;\n  }\n\n  th,\n  td {\n    border: 1px solid #eee;\n    /*width: 200px;*/\n    padding: 2px 5px;\n    vertical-align: top;\n    box-sizing: border-box;\n    position: relative;\n  }\n\n  .tableWrapper {\n    overflow-x: auto;\n  }\n\n  .column-resize-handle {\n    position: absolute;\n    right: -2px;\n    top: 0;\n    bottom: 0;\n    width: 4px;\n    z-index: 20;\n    background-color: #adf;\n    pointer-events: none;\n  }\n\n  .ProseMirror.resize-cursor {\n    cursor: ew-resize;\n    cursor: col-resize;\n  }\n  /* Give selected cells a blue overlay */\n  .selectedCell:after {\n    z-index: 2;\n    position: absolute;\n    content: '';\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    background: rgba(200, 200, 255, 0.4);\n    pointer-events: none;\n  }\n\n  /* placeholder */\n  .empty-node::before {\n    color: #aaa;\n    float: left;\n    font-style: italic;\n    pointer-events: none;\n    height: 0;\n  }\n\n  p.empty-node:first-child::before {\n    content: attr(data-content);\n  }\n\n  /* invisible characters */\n  .invisible {\n    pointer-events: none;\n    user-select: none;\n  }\n\n  .invisible:before {\n    caret-color: inherit;\n    color: gray;\n    display: inline-block;\n    font-weight: 400;\n    font-style: normal;\n    line-height: 1em;\n    width: 0;\n  }\n\n  .invisible--space:before {\n    content: '\xB7';\n  }\n\n  .invisible--break:before {\n    content: '\xAC';\n  }\n\n  .invisible--par:after {\n    content: '\xB6';\n  }\n\n  span.deletion {\n    text-decoration: line-through;\n    color: red;\n    footnote {\n      background: red;\n    }\n  }\n\n  span.insertion {\n    color: blue;\n  }\n\n  .selected-insertion,\n  .selected-deletion,\n  .selected-format-change,\n  .selected-block-change {\n    background-color: #fffacf;\n  }\n\n  .format-change {\n    border-bottom: 2px solid blue;\n  }\n\n  [data-track] {\n    position: relative;\n  }\n\n  [data-track]::before {\n    content: '';\n    position: absolute;\n    border-left: 2px solid blue;\n    left: -10px;\n    height: 100%;\n  }\n\n  li[data-track]::before,\n  li [data-track]::before {\n    left: -5px;\n  }\n\n  span.comment {\n    border-bottom: 2px solid #ffab20;\n    border-radius: 3px 3px 0 0;\n\n    .active-comment {\n      background-color: #ffab20;\n    }\n  }\n"]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+/* All styles regarding ProseMirror surface and elements */
+
+var EditorElements = styled.css(_templateObject(), function (props) {
+  return props.theme.fontReading;
+});
+
+function _templateObject12() {
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 35%;\n  height: 100%;\n"]);
+
+  _templateObject12 = function _templateObject12() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject11() {
+  var data = _taggedTemplateLiteral(["\n  counter-reset: footnote-view;\n  display: flex;\n  flex-direction: column;\n  padding: 0 0 10px 5px;\n  height: 100%;\n  width: 65%;\n  position: relative;\n"]);
+
+  _templateObject11 = function _templateObject11() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject10() {
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  overflow-y: scroll;\n  position: absolute;\n"]);
+
+  _templateObject10 = function _templateObject10() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject9() {
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  > div {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    margin-top: 15px;\n    button {\n      display: flex;\n      flex-direction: column;\n      font-family: ", ";\n      margin-left: 5%;\n      width: 90%;\n    }\n    [data-name='Display'] {\n      border-right: none;\n    }\n  }\n"]);
+
+  _templateObject9 = function _templateObject9() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject8() {
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  width: 14%;\n  height: 98%;\n"]);
+
+  _templateObject8 = function _templateObject8() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject7() {
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n  background: transparent;\n  z-index: 9999;\n  div {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n"]);
+
+  _templateObject7 = function _templateObject7() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject6() {
+  var data = _taggedTemplateLiteral(["\n  background: #fff;\n  height: 52px;\n  line-height: 32px;\n  position: relative;\n  user-select: none;\n  border-bottom: 2px solid #ecedf1;\n"]);
+
+  _templateObject6 = function _templateObject6() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject5() {
+  var data = _taggedTemplateLiteral(["\n  bottom: 0;\n  left: 0;\n  overflow: auto;\n  position: absolute;\n  display: flex;\n  right: 0;\n  top: 0;\n  box-sizing: border-box;\n  padding: 0 2px 2px 2px;\n  height: 100%;\n  ", ";\n"]);
+
+  _templateObject5 = function _templateObject5() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject4() {
+  var data = _taggedTemplateLiteral(["\n  width: 65%;\n  height: 100%;\n  .ProseMirror {\n    -moz-box-shadow: 0 0 8px #ecedf1;\n    -webkit-box-shadow: 0 0 8px #ecedf1;\n    box-shadow: 0 0 8px #ecedf1;\n    min-height: 90%;\n    padding: 40px;\n  }\n"]);
+
+  _templateObject4 = function _templateObject4() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject3() {
+  var data = _taggedTemplateLiteral(["\n  flex: 1;\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n"]);
+
+  _templateObject3 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject2() {
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  width: 100%;\n"]);
+
+  _templateObject2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject$1() {
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  .divider {\n    &:before {\n      content: 'Notes';\n      position: relative;\n      bottom: 14px;\n      background: white;\n      color: #a3a3a3;\n      font-weight: 600;\n      letter-spacing: 0.15em;\n    }\n    &:after {\n      color: #a3a3a3;\n      content: '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . ';\n      float: left;\n      font-weight: 400;\n      white-space: nowrap;\n      width: 0;\n      position: relative;\n      bottom: 14px;\n    }\n  }\n"]);
+
+  _templateObject$1 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var LayoutWrapper = styled__default.div(_templateObject$1());
+var LeftMenuSurfaceContainer = styled__default.div(_templateObject2());
+var WaxSurfaceContainer = styled__default.div(_templateObject3());
+var EditorContainer = styled__default.div(_templateObject4());
+var WaxSurfaceScroll = styled__default.div(_templateObject5(), EditorElements);
+var MainMenuContainer = styled__default.div(_templateObject6());
+var MainMenuInner = styled__default.div(_templateObject7());
+var SideMenuContainer = styled__default.div(_templateObject8());
+var SideMenuInner = styled__default.div(_templateObject9(), function (props) {
+  return props.theme.fontInterface;
+});
+var NotesAreaContainer = styled__default.div(_templateObject10());
+var NotesContainer = styled__default.div(_templateObject11());
+var CommentsContainer = styled__default.div(_templateObject12());
+var surfaceHeight = 700;
+var notesHeight = 50;
+
+var onResizeEnd = function onResizeEnd(arr) {
+  surfaceHeight = arr[0].size;
+  notesHeight = arr[1].size;
+};
+
+var hasNotes = function hasNotes(main) {
+  var notes = waxProsemirrorUtilities.DocumentHelpers.findChildrenByType(main.state.doc, main.state.schema.nodes.footnote, true);
+  return notes;
+};
+
+var LeftSideBar = waxProsemirrorServices.componentPlugin('leftSideBar');
+var RightSideBar = waxProsemirrorServices.componentPlugin('rightSideBar');
+var TopBar = waxProsemirrorServices.componentPlugin('topBar');
+var NotesArea = waxProsemirrorServices.componentPlugin('notesArea');
+var RightArea = waxProsemirrorServices.componentPlugin('rightArea');
+var WaxOverlays = waxProsemirrorServices.componentPlugin('waxOverlays');
+
+var withNotes = function withNotes() {
+  return /*#__PURE__*/React__default.createElement(NotesAreaContainer, null, /*#__PURE__*/React__default.createElement(NotesContainer, {
+    id: "notes-container"
+  }, /*#__PURE__*/React__default.createElement(NotesArea, null)), /*#__PURE__*/React__default.createElement(CommentsContainer, null, /*#__PURE__*/React__default.createElement(RightArea, {
+    area: "notes"
+  })));
+};
+
+var EditoriaLayout = function EditoriaLayout(_ref) {
+  var editor = _ref.editor;
+
+  var _useContext = React.useContext(waxProsemirrorCore.WaxContext),
+      main = _useContext.view.main;
+
+  var AreasWithNotes = null;
+
+  if (main) {
+    var notes = hasNotes(main);
+    if (notes.length) AreasWithNotes = withNotes();
+  }
+
+  return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
+    theme: waxProsemirrorThemes.cokoTheme
+  }, /*#__PURE__*/React__default.createElement(LayoutWrapper, null, /*#__PURE__*/React__default.createElement(MainMenuContainer, null, /*#__PURE__*/React__default.createElement(MainMenuInner, null, /*#__PURE__*/React__default.createElement(TopBar, null))), /*#__PURE__*/React__default.createElement(LeftMenuSurfaceContainer, null, /*#__PURE__*/React__default.createElement(SideMenuContainer, null, /*#__PURE__*/React__default.createElement(SideMenuInner, null, /*#__PURE__*/React__default.createElement(LeftSideBar, null))), /*#__PURE__*/React__default.createElement(PanelGroup, {
+    direction: "column",
+    panelWidths: [{
+      size: surfaceHeight,
+      resize: 'dynamic'
+    }, {
+      size: notesHeight,
+      resize: 'stretch'
+    }],
+    onResizeEnd: onResizeEnd
+  }, /*#__PURE__*/React__default.createElement(WaxSurfaceContainer, null, /*#__PURE__*/React__default.createElement(WaxSurfaceScroll, {
+    className: "wax-surface-scroll"
+  }, /*#__PURE__*/React__default.createElement(EditorContainer, null, editor), /*#__PURE__*/React__default.createElement(CommentsContainer, null, /*#__PURE__*/React__default.createElement(RightArea, {
+    area: "main"
+  }))), /*#__PURE__*/React__default.createElement(RightSideBar, null)), AreasWithNotes)), /*#__PURE__*/React__default.createElement(waxProsemirrorComponents.InfoArea, null), /*#__PURE__*/React__default.createElement(WaxOverlays, null)));
+};
+
+exports.EditoriaLayout = EditoriaLayout;
+//# sourceMappingURL=index.js.map

wax-prosemirror-layouts/dist/index.js.map

+{"version":3,"file":"index.js","sources":["../../node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js","../src/layouts/EditorElements.js","../src/layouts/EditoriaLayout.js"],"sourcesContent":["export default function _taggedTemplateLiteral(strings, raw) {\n  if (!raw) {\n    raw = strings.slice(0);\n  }\n\n  return Object.freeze(Object.defineProperties(strings, {\n    raw: {\n      value: Object.freeze(raw)\n    }\n  }));\n}","import { css } from 'styled-components';\n\n/* All styles regarding ProseMirror surface and elements */\n\nexport default css`\n  .ProseMirror {\n    counter-reset: footnote;\n    font-family: ${props => props.theme.fontReading};\n    &:focus {\n      outline: none;\n    }\n  }\n\n  .ProseMirror .wax-selection-marker {\n    background: #0a78ff;\n    color: white;\n  }\n\n  .ProseMirror footnote {\n    font-size: 0;\n    display: inline-block;\n    text-align: center;\n    width: 17px;\n    height: 17px;\n    background: black;\n    color: white;\n    cursor: pointer;\n  }\n\n  .ProseMirror footnote::after {\n    content: counter(footnote);\n    position: relative;\n    bottom: 2px;\n    font-size: 16px;\n    counter-increment: footnote;\n  }\n\n  hr {\n    padding: 2px 10px;\n    border: none;\n    margin: 1em 0;\n  }\n\n  hr:after {\n    content: '';\n    display: block;\n    height: 1px;\n    background-color: silver;\n    line-height: 2px;\n  }\n\n  ul,\n  ol {\n    padding-left: 30px;\n  }\n\n  blockquote {\n    padding-left: 1em;\n    border-left: 3px solid #eee;\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  img {\n    cursor: default;\n  }\n\n  sup,\n  sub {\n    line-height: 0;\n  }\n\n  /* Tables */\n\n  table {\n    border-collapse: initial;\n    border-spacing: 0;\n    border-width: 0 thin thin 0;\n    border: 1px solid #eee;\n    table-layout: fixed;\n    width: 100%;\n    margin: 0;\n    overflow: hidden;\n    page-break-inside: avoid;\n  }\n\n  th,\n  td {\n    border: 1px solid #eee;\n    /*width: 200px;*/\n    padding: 2px 5px;\n    vertical-align: top;\n    box-sizing: border-box;\n    position: relative;\n  }\n\n  .tableWrapper {\n    overflow-x: auto;\n  }\n\n  .column-resize-handle {\n    position: absolute;\n    right: -2px;\n    top: 0;\n    bottom: 0;\n    width: 4px;\n    z-index: 20;\n    background-color: #adf;\n    pointer-events: none;\n  }\n\n  .ProseMirror.resize-cursor {\n    cursor: ew-resize;\n    cursor: col-resize;\n  }\n  /* Give selected cells a blue overlay */\n  .selectedCell:after {\n    z-index: 2;\n    position: absolute;\n    content: '';\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    background: rgba(200, 200, 255, 0.4);\n    pointer-events: none;\n  }\n\n  /* placeholder */\n  .empty-node::before {\n    color: #aaa;\n    float: left;\n    font-style: italic;\n    pointer-events: none;\n    height: 0;\n  }\n\n  p.empty-node:first-child::before {\n    content: attr(data-content);\n  }\n\n  /* invisible characters */\n  .invisible {\n    pointer-events: none;\n    user-select: none;\n  }\n\n  .invisible:before {\n    caret-color: inherit;\n    color: gray;\n    display: inline-block;\n    font-weight: 400;\n    font-style: normal;\n    line-height: 1em;\n    width: 0;\n  }\n\n  .invisible--space:before {\n    content: '·';\n  }\n\n  .invisible--break:before {\n    content: '¬';\n  }\n\n  .invisible--par:after {\n    content: '¶';\n  }\n\n  span.deletion {\n    text-decoration: line-through;\n    color: red;\n    footnote {\n      background: red;\n    }\n  }\n\n  span.insertion {\n    color: blue;\n  }\n\n  .selected-insertion,\n  .selected-deletion,\n  .selected-format-change,\n  .selected-block-change {\n    background-color: #fffacf;\n  }\n\n  .format-change {\n    border-bottom: 2px solid blue;\n  }\n\n  [data-track] {\n    position: relative;\n  }\n\n  [data-track]::before {\n    content: '';\n    position: absolute;\n    border-left: 2px solid blue;\n    left: -10px;\n    height: 100%;\n  }\n\n  li[data-track]::before,\n  li [data-track]::before {\n    left: -5px;\n  }\n\n  span.comment {\n    border-bottom: 2px solid #ffab20;\n    border-radius: 3px 3px 0 0;\n\n    .active-comment {\n      background-color: #ffab20;\n    }\n  }\n`;\n","import React, { useContext } from 'react';\nimport styled, { ThemeProvider } from 'styled-components';\nimport PanelGroup from 'react-panelgroup';\nimport { InfoArea } from 'wax-prosemirror-components';\nimport { componentPlugin } from 'wax-prosemirror-services';\nimport { cokoTheme } from 'wax-prosemirror-themes';\nimport { DocumentHelpers } from 'wax-prosemirror-utilities';\nimport { WaxContext } from 'wax-prosemirror-core';\nimport EditorElements from './EditorElements';\n\nconst LayoutWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  .divider {\n    &:before {\n      content: 'Notes';\n      position: relative;\n      bottom: 14px;\n      background: white;\n      color: #a3a3a3;\n      font-weight: 600;\n      letter-spacing: 0.15em;\n    }\n    &:after {\n      color: #a3a3a3;\n      content: '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . '\n        '. . . . . . . . . . . . . . . . . . . . ';\n      float: left;\n      font-weight: 400;\n      white-space: nowrap;\n      width: 0;\n      position: relative;\n      bottom: 14px;\n    }\n  }\n`;\n\nconst LeftMenuSurfaceContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  width: 100%;\n`;\n\nconst WaxSurfaceContainer = styled.div`\n  flex: 1;\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n`;\n\nconst EditorContainer = styled.div`\n  width: 65%;\n  height: 100%;\n  .ProseMirror {\n    -moz-box-shadow: 0 0 8px #ecedf1;\n    -webkit-box-shadow: 0 0 8px #ecedf1;\n    box-shadow: 0 0 8px #ecedf1;\n    min-height: 90%;\n    padding: 40px;\n  }\n`;\n\nconst WaxSurfaceScroll = styled.div`\n  bottom: 0;\n  left: 0;\n  overflow: auto;\n  position: absolute;\n  display: flex;\n  right: 0;\n  top: 0;\n  box-sizing: border-box;\n  padding: 0 2px 2px 2px;\n  height: 100%;\n  ${EditorElements};\n`;\n\nconst MainMenuContainer = styled.div`\n  background: #fff;\n  height: 52px;\n  line-height: 32px;\n  position: relative;\n  user-select: none;\n  border-bottom: 2px solid #ecedf1;\n`;\nconst MainMenuInner = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n  background: transparent;\n  z-index: 9999;\n  div {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n`;\n\nconst SideMenuContainer = styled.div`\n  display: flex;\n  width: 14%;\n  height: 98%;\n`;\n\nconst SideMenuInner = styled.div`\n  display: flex;\n  width: 100%;\n  > div {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    margin-top: 15px;\n    button {\n      display: flex;\n      flex-direction: column;\n      font-family: ${props => props.theme.fontInterface};\n      margin-left: 5%;\n      width: 90%;\n    }\n    [data-name='Display'] {\n      border-right: none;\n    }\n  }\n`;\n\nconst NotesAreaContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  overflow-y: scroll;\n  position: absolute;\n`;\n\nconst NotesContainer = styled.div`\n  counter-reset: footnote-view;\n  display: flex;\n  flex-direction: column;\n  padding: 0 0 10px 5px;\n  height: 100%;\n  width: 65%;\n  position: relative;\n`;\n\nconst CommentsContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 35%;\n  height: 100%;\n`;\n\nlet surfaceHeight = 700;\nlet notesHeight = 50;\n\nconst onResizeEnd = arr => {\n  surfaceHeight = arr[0].size;\n  notesHeight = arr[1].size;\n};\n\nconst hasNotes = main => {\n  const notes = DocumentHelpers.findChildrenByType(\n    main.state.doc,\n    main.state.schema.nodes.footnote,\n    true,\n  );\n  return notes;\n};\n\nconst LeftSideBar = componentPlugin('leftSideBar');\nconst RightSideBar = componentPlugin('rightSideBar');\nconst TopBar = componentPlugin('topBar');\nconst NotesArea = componentPlugin('notesArea');\nconst RightArea = componentPlugin('rightArea');\nconst WaxOverlays = componentPlugin('waxOverlays');\n\nconst withNotes = () => {\n  return (\n    <NotesAreaContainer>\n      <NotesContainer id=\"notes-container\">\n        <NotesArea />\n      </NotesContainer>\n      <CommentsContainer>\n        <RightArea area=\"notes\" />\n      </CommentsContainer>\n    </NotesAreaContainer>\n  );\n};\n\nconst EditoriaLayout = ({ editor }) => {\n  const {\n    view: { main },\n  } = useContext(WaxContext);\n  let AreasWithNotes = null;\n\n  if (main) {\n    const notes = hasNotes(main);\n    if (notes.length) AreasWithNotes = withNotes();\n  }\n\n  return (\n    <ThemeProvider theme={cokoTheme}>\n      <LayoutWrapper>\n        <MainMenuContainer>\n          <MainMenuInner>\n            <TopBar />\n          </MainMenuInner>\n        </MainMenuContainer>\n\n        <LeftMenuSurfaceContainer>\n          <SideMenuContainer>\n            <SideMenuInner>\n              <LeftSideBar />\n            </SideMenuInner>\n          </SideMenuContainer>\n\n          <PanelGroup\n            direction=\"column\"\n            panelWidths={[\n              { size: surfaceHeight, resize: 'dynamic' },\n              { size: notesHeight, resize: 'stretch' },\n            ]}\n            onResizeEnd={onResizeEnd}\n          >\n            <WaxSurfaceContainer>\n              <WaxSurfaceScroll className=\"wax-surface-scroll\">\n                <EditorContainer>{editor}</EditorContainer>\n                <CommentsContainer>\n                  <RightArea area=\"main\" />\n                </CommentsContainer>\n              </WaxSurfaceScroll>\n              <RightSideBar />\n            </WaxSurfaceContainer>\n            {AreasWithNotes}\n          </PanelGroup>\n        </LeftMenuSurfaceContainer>\n        <InfoArea />\n        <WaxOverlays />\n      </LayoutWrapper>\n    </ThemeProvider>\n  );\n};\n\nexport default EditoriaLayout;\n"],"names":["_taggedTemplateLiteral","strings","raw","slice","Object","freeze","defineProperties","value","css","props","theme","fontReading","LayoutWrapper","styled","div","LeftMenuSurfaceContainer","WaxSurfaceContainer","EditorContainer","WaxSurfaceScroll","EditorElements","MainMenuContainer","MainMenuInner","SideMenuContainer","SideMenuInner","fontInterface","NotesAreaContainer","NotesContainer","CommentsContainer","surfaceHeight","notesHeight","onResizeEnd","arr","size","hasNotes","main","notes","DocumentHelpers","findChildrenByType","state","doc","schema","nodes","footnote","LeftSideBar","componentPlugin","RightSideBar","TopBar","NotesArea","RightArea","WaxOverlays","withNotes","React","EditoriaLayout","editor","useContext","WaxContext","view","AreasWithNotes","length","ThemeProvider","cokoTheme","resize","InfoArea"],"mappings":"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"}
\ No newline at end of file

wax-prosemirror-plugins/dist/index.js

+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var prosemirrorState = require('prosemirror-state');
+var prosemirrorView = require('prosemirror-view');
+var lodash = require('lodash');
+var waxProsemirrorUtilities = require('wax-prosemirror-utilities');
+var hljs = _interopDefault(require('highlight.js/lib/core'));
+var prosemirrorHighlightjs = require('prosemirror-highlightjs');
+
+function deactivateAllSelectedChanges(tr) {
+  const pluginState = {
+    decos: prosemirrorView.DecorationSet.empty
+  };
+  return tr.setMeta(key, pluginState).setMeta('track', true);
+} // From https://discuss.prosemirror.net/t/expanding-the-selection-to-the-active-mark/478/2 with some bugs fixed
+
+function getFromToMark(doc, pos, mark) {
+  const $pos = doc.resolve(pos),
+        parent = $pos.parent;
+  const start = parent.childAfter($pos.parentOffset);
+
+  if (!start.node) {
+    return null;
+  }
+
+  let startIndex = $pos.index(),
+      startPos = $pos.start() + start.offset;
+
+  while (startIndex > 0 && mark.isInSet(parent.child(startIndex - 1).marks)) {
+    startPos -= parent.child(--startIndex).nodeSize;
+  }
+
+  let endIndex = $pos.index() + 1,
+      endPos = $pos.start() + start.offset + start.node.nodeSize;
+
+  while (endIndex < parent.childCount && mark.isInSet(parent.child(endIndex).marks)) {
+    endPos += parent.child(endIndex++).nodeSize;
+  }
+
+  return {
+    from: startPos,
+    to: endPos
+  };
+}
+
+const findSelectedChanges = state => {
+  const selection = state.selection,
+        selectedChanges = {
+    insertion: false,
+    deletion: false,
+    formatChange: false
+  };
+  let insertionPos = false,
+      deletionPos = false,
+      formatChangePos = false,
+      insertionMark,
+      deletionMark,
+      formatChangeMark,
+      insertionSize,
+      deletionSize,
+      formatChangeSize;
+
+  if (selection.empty) {
+    const resolvedPos = state.doc.resolve(selection.from),
+          marks = resolvedPos.marks();
+
+    if (marks) {
+      insertionMark = marks.find(mark => mark.type.name === 'insertion' && !mark.attrs.approved);
+
+      if (insertionMark) {
+        insertionPos = selection.from;
+      }
+
+      deletionMark = marks.find(mark => mark.type.name === 'deletion');
+
+      if (deletionMark) {
+        deletionPos = selection.from;
+      }
+
+      formatChangeMark = marks.find(mark => mark.type.name === 'format_change');
+
+      if (formatChangeMark) {
+        formatChangePos = selection.from;
+      }
+    }
+  } else {
+    state.doc.nodesBetween(selection.from, selection.to, (node, pos) => {
+      if (pos < selection.from) {
+        return true;
+      }
+
+      if (!insertionMark) {
+        insertionMark = node.attrs.track ? node.attrs.track.find(trackAttr => trackAttr.type === 'insertion') : node.marks.find(mark => mark.type.name === 'insertion' && !mark.attrs.approved);
+
+        if (insertionMark) {
+          insertionPos = pos;
+
+          if (!node.isInline) {
+            insertionSize = node.nodeSize;
+          }
+        }
+      }
+
+      if (!deletionMark) {
+        deletionMark = node.attrs.track ? node.attrs.track.find(trackAttr => trackAttr.type === 'deletion') : node.marks.find(mark => mark.type.name === 'deletion');
+
+        if (deletionMark) {
+          deletionPos = pos;
+
+          if (!node.isInline) {
+            deletionSize = node.nodeSize;
+          }
+        }
+      }
+
+      if (!formatChangeMark) {
+        formatChangeMark = node.marks.find(mark => mark.type.name === 'format_change');
+
+        if (formatChangeMark) {
+          formatChangePos = pos;
+
+          if (!node.isInline) {
+            formatChangeSize = node.nodeSize;
+          }
+        }
+      }
+    });
+  }
+
+  if (insertionMark) {
+    selectedChanges.insertion = insertionSize ? {
+      from: insertionPos,
+      to: insertionPos + insertionSize
+    } : getFromToMark(state.doc, insertionPos, insertionMark);
+  }
+
+  if (deletionMark) {
+    selectedChanges.deletion = deletionSize ? {
+      from: deletionPos,
+      to: deletionPos + deletionSize
+    } : getFromToMark(state.doc, deletionPos, deletionMark);
+  }
+
+  if (formatChangeMark) {
+    selectedChanges.formatChange = formatChangeSize ? {
+      from: formatChangePos,
+      to: formatChangePos + formatChangeSize
+    } : getFromToMark(state.doc, formatChangePos, formatChangeMark);
+  }
+
+  return selectedChanges;
+};
+
+const key = new prosemirrorState.PluginKey('track');
+const selectedInsertionSpec = {};
+const selectedDeletionSpec = {};
+const selectedChangeFormatSpec = {};
+var TrackChangePlugin = (options => {
+  return new prosemirrorState.Plugin({
+    key,
+    state: {
+      init(config, state) {
+        const userIds = ['33'];
+        state.doc.descendants(node => {
+          if (node.attrs.track) {
+            node.attrs.track.forEach(track => {
+              if (!userIds.includes(track.user) && track.user !== 0) {
+                userIds.push(track.user);
+              }
+            });
+          } else {
+            node.marks.forEach(mark => {
+              if (['deletion', 'insertion', 'format_change'].includes(mark.type.name) && !userIds.includes(mark.attrs.user) && mark.attrs.user !== 0) {
+                userIds.push(mark.attrs.user);
+              }
+            });
+          }
+        });
+        return {
+          decos: prosemirrorView.DecorationSet.empty
+        };
+      },
+
+      apply(tr, prev, oldState, state) {
+        const meta = tr.getMeta(key);
+
+        if (meta) {
+          // There has been an update, return values from meta instead
+          // of previous values
+          return meta;
+        }
+
+        let {
+          decos
+        } = this.getState(oldState);
+
+        if (tr.selectionSet) {
+          const {
+            insertion,
+            deletion,
+            formatChange
+          } = findSelectedChanges(state);
+          decos = prosemirrorView.DecorationSet.empty;
+          const decoType = tr.selection.node ? prosemirrorView.Decoration.node : prosemirrorView.Decoration.inline;
+
+          if (insertion) {
+            decos = decos.add(tr.doc, [decoType(insertion.from, insertion.to, {
+              class: 'selected-insertion'
+            }, selectedInsertionSpec)]);
+          }
+
+          if (deletion) {
+            decos = decos.add(tr.doc, [decoType(deletion.from, deletion.to, {
+              class: 'selected-deletion'
+            }, selectedDeletionSpec)]);
+          }
+
+          if (formatChange) {
+            decos = decos.add(tr.doc, [decoType(formatChange.from, formatChange.to, {
+              class: 'selected-format-change'
+            }, selectedChangeFormatSpec)]);
+          }
+        } else {
+          decos = decos.map(tr.mapping, tr.doc);
+        }
+
+        return {
+          decos
+        };
+      }
+
+    },
+    props: {
+      decorations(state) {
+        const {
+          decos
+        } = this.getState(state);
+        return decos;
+      },
+
+      handleDOMEvents: {
+        focus: (view, _event) => {
+          view.dispatch(deactivateAllSelectedChanges(view.state.tr));
+        }
+      }
+    }
+  });
+});
+
+const commentPlugin = new prosemirrorState.PluginKey('commentPlugin');
+
+const getComment = state => {
+  const commentMark = state.schema.marks.comment;
+  const commentOnSelection = waxProsemirrorUtilities.DocumentHelpers.findFragmentedMark(state, commentMark); // Don't allow Active comment if selection is not collapsed
+
+  if (state.selection.from !== state.selection.to && commentOnSelection && commentOnSelection.attrs.conversation.length) {
+    return;
+  }
+
+  if (commentOnSelection) {
+    const commentNodes = waxProsemirrorUtilities.DocumentHelpers.findChildrenByMark(state.doc, commentMark, true);
+    const allCommentsWithSameId = [];
+    commentNodes.map(node => {
+      node.node.marks.filter(mark => {
+        if (mark.type.name === 'comment' && commentOnSelection.attrs.id === mark.attrs.id) {
+          allCommentsWithSameId.push(node);
+        }
+      });
+    });
+
+    if (allCommentsWithSameId.length > 1) {
+      const minPos = lodash.minBy(allCommentsWithSameId, 'pos');
+      const maxPos = lodash.maxBy(allCommentsWithSameId, 'pos');
+      return {
+        from: minPos.pos,
+        to: maxPos.pos + lodash.last(allCommentsWithSameId).node.nodeSize,
+        attrs: commentOnSelection.attrs,
+        contained: commentOnSelection.contained
+      };
+    }
+  }
+
+  return commentOnSelection;
+};
+
+var CommentPlugin = (props => {
+  return new prosemirrorState.Plugin({
+    key: commentPlugin,
+    state: {
+      init: (_, state) => {
+        return {
+          comment: getComment(state)
+        };
+      },
+
+      apply(tr, prev, _, newState) {
+        const comment = getComment(newState);
+        let createDecoration;
+
+        if (comment) {
+          createDecoration = prosemirrorView.DecorationSet.create(newState.doc, [prosemirrorView.Decoration.inline(comment.from, comment.to, {
+            class: 'active-comment'
+          })]);
+        }
+
+        return {
+          comment,
+          createDecoration
+        };
+      }
+
+    },
+    props: {
+      decorations: state => {
+        const commentPluginState = state && commentPlugin.getState(state);
+        return commentPluginState.createDecoration;
+      },
+      setCommentActive: state => {}
+    }
+  });
+});
+
+const WaxSelectionPlugin = new prosemirrorState.Plugin({
+  state: {
+    init(config, instance) {
+      return {
+        deco: prosemirrorView.DecorationSet.empty
+      };
+    },
+
+    apply(transaction, state, prevEditorState, editorState) {
+      const sel = transaction.curSelection; // TODO fix the selection when a note is present.
+
+      let flag = false;
+      const difference = sel.$to.pos - sel.$from.pos;
+      editorState.doc.nodesBetween(sel.$from.pos, sel.$to.pos, (node, from) => {
+        if (node.type.name === 'footnote') flag = true;
+      });
+
+      if (sel && !flag) {
+        const decos = [prosemirrorView.Decoration.inline(sel.$from.pos, sel.$to.pos, {
+          class: 'wax-selection-marker'
+        })];
+        const deco = prosemirrorView.DecorationSet.create(editorState.doc, decos);
+        return {
+          deco
+        };
+      }
+
+      return state;
+    }
+
+  },
+  props: {
+    decorations(state) {
+      if (state && this.getState(state)) {
+        return this.getState(state).deco;
+      }
+
+      return null;
+    }
+
+  }
+});
+
+const highlightPlugin = (nodeTypes = ['code_block']) => {
+  return new prosemirrorState.Plugin({
+    state: {
+      init(_, instance) {
+        const content = prosemirrorHighlightjs.getHighlightDecorations(instance.doc, hljs, nodeTypes, () => undefined);
+        return prosemirrorView.DecorationSet.create(instance.doc, content);
+      },
+
+      apply(tr, set, state) {
+        if (!tr.docChanged) {
+          return set.map(tr.mapping, tr.doc);
+        }
+
+        const {
+          selection: {
+            $from,
+            $to
+          },
+          doc
+        } = state;
+        let codeBlock = false;
+        doc.nodesBetween($from.pos, $to.pos, (node, from) => {
+          if (node.type.name === 'code_block') {
+            codeBlock = true;
+          }
+        });
+
+        if (codeBlock) {
+          const content = prosemirrorHighlightjs.getHighlightDecorations(tr.doc, hljs, nodeTypes, () => undefined);
+          return prosemirrorView.DecorationSet.create(tr.doc, content);
+        }
+
+        return set.map(tr.mapping, tr.doc);
+      }
+
+    },
+    props: {
+      decorations(state) {
+        return this.getState(state);
+      }
+
+    }
+  });
+};
+
+exports.CommentPlugin = CommentPlugin;
+exports.TrackChangePlugin = TrackChangePlugin;
+exports.WaxSelectionPlugin = WaxSelectionPlugin;
+exports.highlightPlugin = highlightPlugin;
+//# sourceMappingURL=index.js.map

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

@@ -14,6 +14,11 @@ class CodeBlockTool extends Tools {
     };
   }
 
+  select = (state, activeViewId) => {
+    if (activeViewId !== 'main') return false;
+    return true;
+  };
+
   get enable() {
     return state => {
       return setBlockType(state.config.schema.nodes.code_block)(state);

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

@@ -15,6 +15,11 @@ class Author extends Tools {
     };
   }
 
+  select = (state, activeViewId) => {
+    if (activeViewId !== 'main') return false;
+    return true;
+  };
+
   get enable() {
     return state => {
       return Commands.setBlockType(state.config.schema.nodes.author)(state);

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

@@ -15,6 +15,11 @@ class EpigraphPoetry extends Tools {
     };
   }
 
+  select = (state, activeViewId) => {
+    if (activeViewId !== 'main') return false;
+    return true;
+  };
+
   get enable() {
     return state => {
       return Commands.setBlockType(state.config.schema.nodes.epigraphPoetry)(

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

@@ -16,6 +16,11 @@ class EpigraphProse extends Tools {
     };
   }
 
+  select = (state, activeViewId) => {
+    if (activeViewId !== 'main') return false;
+    return true;
+  };
+
   get enable() {
     return state => {
       return Commands.setBlockType(state.config.schema.nodes.epigraphProse)(

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

@@ -17,6 +17,11 @@ class Heading1 extends Tools {
     };
   }
 
+  select = (state, activeViewId) => {
+    if (activeViewId !== 'main') return false;
+    return true;
+  };
+
   get enable() {
     return state => {
       return Commands.setBlockType(state.config.schema.nodes.heading, {

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

@@ -17,6 +17,11 @@ class Heading2 extends Tools {
     };
   }
 
+  select = (state, activeViewId) => {
+    if (activeViewId !== 'main') return false;
+    return true;
+  };
+
   get enable() {
     return state => {
       return Commands.setBlockType(state.config.schema.nodes.heading, {

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

@@ -17,6 +17,11 @@ class Heading3 extends Tools {
     };
   }
 
+  select = (state, activeViewId) => {
+    if (activeViewId !== 'main') return false;
+    return true;
+  };
+
   get enable() {
     return state => {
       return Commands.setBlockType(state.config.schema.nodes.heading, {