@manuscripts/body-editor 2.7.32 → 2.7.33

package/dist/types/views/figure_editable.d.ts

@@ -14,14 +14,23 @@
  * limitations under the License.
  */
 import { FigureView } from './figure';
+export declare enum figurePositions {
+    left = "half-left",
+    right = "half-right",
+    default = ""
+}
 export declare class FigureEditableView extends FigureView {
     reactTools: HTMLDivElement;
+    positionMenuWrapper: HTMLDivElement;
+    figurePosition: string;
     initialise: () => void;
     updateContents(): void;
     private setSrc;
     private createUnsupportedFormat;
     private createImg;
     private createPlaceholder;
+    createPositionMenuWrapper: () => HTMLDivElement;
+    showPositionMenu: () => void;
 }
 declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<FigureEditableView>;
 export default _default;

package/dist/types/views/figure_element.d.ts

@@ -18,11 +18,8 @@ import { Trackable } from '../types';
 import BlockView from './block_view';
 export declare class FigureElementView extends BlockView<Trackable<FigureElementNode>> {
     private container;
-    private reactTools;
     ignoreMutation: () => boolean;
     createElement: () => void;
-    updateContents(): void;
-    private deleteSupplementNode;
 }
 declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<FigureElementView>;
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "2.7.32",
+  "version": "2.7.33",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -32,7 +32,7 @@
     "@iarna/word-count": "^1.1.2",
     "@manuscripts/json-schema": "2.2.11",
     "@manuscripts/library": "1.3.11",
-    "@manuscripts/style-guide": "2.0.33",
+    "@manuscripts/style-guide": "2.0.34",
     "@manuscripts/track-changes-plugin": "1.9.4",
     "@manuscripts/transform": "3.0.37",
     "@popperjs/core": "^2.11.8",

package/styles/AdvancedEditor.css

@@ -87,6 +87,7 @@
 }
 
 .ProseMirror .figure-block {
+  width: 100%;
   border-color: #000 !important;
   border-style: none !important;
   border-width: 0pt !important;
@@ -105,9 +106,9 @@
 }
 
 .ProseMirror .figure-block > figure {
-  border-color: #000;
-  border-style: none;
-  border-width: 0pt;
+  width: 100%;
+  border: 1px solid #f2f2f2;
+  border-radius: 4px;
   position: relative;
   grid-column: 1/-1;
 }
@@ -151,6 +152,17 @@
   text-align: center !important;
 }
 
+.ProseMirror .figure-block .position-menu {
+  position: absolute;
+  top: 4px;
+  left: calc( 100% + 4px );
+  z-index: 2;
+  cursor: pointer;
+}
+.ProseMirror .box-element .figure-block .position-menu {
+  left: calc( 100% + 20px );
+}
+
 .ProseMirror .block-container.block-box_element {
   grid-template-columns: auto;
 }
@@ -219,9 +231,9 @@
   padding: 0 0 15px;
 }
 .tools-panel {
-  width: 100%;
   position: absolute;
-  top: 0;
+  top: 12px;
+  right: 12px;
   z-index: 3;
 }
 

package/styles/Editor.css

@@ -257,16 +257,25 @@
   align-items: center;
   border-radius: 16px;
   border: 1px dashed #e2e2e2;
+  background-color: #fafafa;
   color: #6e6e6e;
   cursor: pointer;
   display: flex;
   justify-content: center;
   text-align: center;
   padding: 64px 32px;
+  max-width: 210px;
   min-height: 100px;
   white-space: normal;
+
+  font-size: 14px;
+}
+
+.ProseMirror .figure.placeholder a {
+  text-decoration: underline;
 }
 
+
 .ProseMirror .figure.placeholder.over {
   border-color: #bce7f6;
 }
@@ -703,7 +712,7 @@
     .action-gutter {
     pointer-events: visible;
     opacity: 1;
-    z-index: 2;
+    /* z-index: 2; */
 }
 .ProseMirror .block-box_element:hover > .block-gutter {
   opacity: 1;

package/styles/popper.css

@@ -107,20 +107,17 @@
   border-radius: 4px;
   box-shadow: 0 4px 9px 0 rgba(84, 83, 83, 0.3);
   font-size: 14px;
-  overflow: hidden;
-}
-
-.popper .menu .menu-section {
-  padding: 4px 0;
-}
-
-.popper .menu .menu-section:not(:last-child) {
-  border-bottom: 1px solid #e2e2e2;
+  min-width: 208px;
 }
 
 .popper .menu-item {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 4px;
   cursor: pointer;
-  padding: 8px 16px;
+  padding: 16px 8px;
 }
 .popper .menu-item[disabled] {
   cursor: default;
@@ -128,6 +125,7 @@
   pointer-events: none;
 }
 
+.popper .menu-item.selected,
 .popper .menu-item:hover {
   background: #f5fbfc;
 }
@@ -150,6 +148,11 @@
 .popper .context-menu {
   width: auto;
   top: -12px;
+  right: unset;
+}
+
+.popper .position-menu {
+  top: -15px;
 }
 
 .popper .conflict-dropdown {
@@ -245,4 +248,23 @@
   background: #fff;
   width: 368px;
   z-index: 10;
-}
+}
+
+.popper .menu .context-submenu { 
+  position: relative;
+}
+.popper .menu .context-submenu-trigger { 
+  position: relative;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.popper .menu .context-submenu .menu-section {
+  display: none;
+  position: absolute;
+  left: 100%;
+  top: 25px;
+}
+.popper .menu .context-submenu .menu-section.show {
+  display: block;
+}