@manuscripts/body-editor 2.8.30 → 2.8.31

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

@@ -0,0 +1,26 @@
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { AltTitlesSectionNode } from '@manuscripts/transform';
+import { Trackable } from '../types';
+import BlockView from './block_view';
+export declare class AltTitleSectionView extends BlockView<Trackable<AltTitlesSectionNode>> {
+    private container;
+    ignoreMutation: () => boolean;
+    createElement: () => void;
+    createClosingPanel(): HTMLDivElement;
+}
+declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<AltTitleSectionView>;
+export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "2.8.30",
+  "version": "2.8.31",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -34,7 +34,7 @@
     "@manuscripts/library": "1.3.13",
     "@manuscripts/style-guide": "2.1.6",
     "@manuscripts/track-changes-plugin": "1.10.2",
-    "@manuscripts/transform": "3.0.52",
+    "@manuscripts/transform": "3.0.53",
     "@popperjs/core": "^2.11.8",
     "astrocite-eutils": "^0.16.4",
     "codemirror": "^5.58.1",

package/styles/AdvancedEditor.css

@@ -1,3 +1,22 @@
+* {
+  scroll-behavior: smooth;
+}
+
+.button-reset {
+  border: none;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  overflow: visible;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: normal;
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+  -webkit-appearance: none;
+}
+
 .ProseMirror
   > div.body
   section:not(.toc)
@@ -614,7 +633,8 @@ span.comment-marker {
 
 /* Insert */
 .tracking-visible .ProseMirror .inserted,
-.tracking-visible .ProseMirror .block-award[data-track-op='insert'] span, .tracking-visible .ProseMirror a.link[data-track-op='wrap_with_node'] {
+.tracking-visible .ProseMirror .block-award[data-track-op='insert'] span,
+.tracking-visible .ProseMirror a.link[data-track-op='wrap_with_node'] {
   background: var(--inserted-pending-bg-color);
   color: var(--inserted-pending-color);
   text-decoration: underline;
@@ -733,10 +753,18 @@ figure.block:has(.equation.selected-suggestion) {
   box-shadow: inset 3px 0 0 var(--inserted-pending-color);
 }
 
-.tracking-visible .selected-suggestion[data-track-status='pending'][data-track-op='insert'] .block,
-.tracking-visible .selected-suggestion [data-track-status='pending'][data-track-op='insert'] .block,
-.tracking-visible .selected-suggestion[data-track-op='wrap_with_node'][data-track-status='pending'] .block {
-  box-shadow: inset 6px 0 0 var(--inserted-pending-color), inset 9px 0 0 var(--inserted-pending-bg-color) !important;
+.tracking-visible
+  .selected-suggestion[data-track-status='pending'][data-track-op='insert']
+  .block,
+.tracking-visible
+  .selected-suggestion
+  [data-track-status='pending'][data-track-op='insert']
+  .block,
+.tracking-visible
+  .selected-suggestion[data-track-op='wrap_with_node'][data-track-status='pending']
+  .block {
+  box-shadow: inset 6px 0 0 var(--inserted-pending-color),
+    inset 9px 0 0 var(--inserted-pending-bg-color) !important;
   animation: fadeOutBackground 3s forwards;
   --fade-color: var(--inserted-pending-bg-color);
 }
@@ -782,10 +810,12 @@ figure.block:has(.equation.selected-suggestion) {
 
 .tracking-visible .selected-suggestion[data-track-op='set_attrs'] .block,
 .tracking-visible .selected-suggestion [data-track-op='set_attrs'] .block,
-.tracking-visible .block:has(figure.selected-suggestion[data-track-op='set_attrs']),
+.tracking-visible
+  .block:has(figure.selected-suggestion[data-track-op='set_attrs']),
 .tracking-visible .selected-suggestion[data-track-op='node_split'] .block,
 .tracking-visible figure.block:has(.equation.set_attrs.selected-suggestion) {
-  box-shadow: inset 6px 0 0 var(--updated-border-color), inset 9px 0 0 var(--updated-bg-color) !important;
+  box-shadow: inset 6px 0 0 var(--updated-border-color),
+    inset 9px 0 0 var(--updated-bg-color) !important;
   animation: fadeOutBackground 3s forwards;
   --fade-color: var(--updated-bg-color);
 }
@@ -972,20 +1002,81 @@ figure.block:has(.equation.selected-suggestion) {
   color: #6e6e6e;
 }
 
-* {
-  scroll-behavior: smooth;
-}
-
 .ProseMirror li.ProseMirror-selectednode:after {
   content: none;
 }
 .manuscript-title {
   margin-bottom: 20px;
+  position: relative;
 }
+
 .ProseMirror .manuscript-title.empty-node .article-titles::before {
   content: attr(data-placeholder);
 }
 
+.alt-title-text {
+  border-radius: 4px;
+  border: 1px solid #e2e2e2;
+  padding: 8px 16px;
+}
+
+.manuscript-alt-title {
+  display: block;
+  margin: 13px 0 13px;
+}
+@keyframes alt-titles-in {
+  from {
+    opacity: 0;
+    margin-top: -2rem;
+  }
+
+  to {
+    margin-top: 0;
+    opacity: 1;
+  }
+}
+.ProseMirror .block-alt_titles {
+  display: none;
+}
+.ProseMirror .block-alt_titles.alt-titles-section-open {
+  display: contents; /* covering the sides to prevent cursor setting into the parent block element */
+}
+/* covering the sides to prevent cursor setting into the parent block element */
+.alt-titles-section {
+  opacity: 1;
+  animation-name: alt-titles-in;
+  animation-duration: 0.45s;
+  padding: 0 calc(var(--body-side-margin) - 12px);
+}
+.alt-titles-closing-panel {
+  border-bottom: 1px solid #e2e2e2;
+  position: relative;
+  padding-top: 0.2rem;
+  margin: 1rem calc(var(--body-side-margin) - 12px) 0;
+}
+.alt-titles-closing-button {
+  position: absolute;
+  cursor: pointer;
+  right: 0;
+  top: 50%;
+  transform: translate(100%, -50%) scaleY(-1);
+  background: #fff;
+  z-index: 2;
+}
+.alt-title-label {
+  font-size: 18px;
+  margin-bottom: 5px;
+  text-transform: capitalize;
+  color: #6e6e6e;
+  line-height: 1.3;
+}
+.alt-titles-open {
+  position: absolute;
+  right: var(--body-side-margin);
+  transform: translateX(100%);
+  bottom: 0;
+  cursor: pointer;
+}
 .ProseMirror .table-context-menu-button svg {
   margin: 4px;
   pointer-events: none;

package/styles/Editor.css

@@ -1,3 +1,6 @@
+:root {
+  --body-side-margin: 65px;
+}
 .ProseMirror.manuscript-editor {
   font-size: 16px;
   line-height: 1.5;
@@ -136,13 +139,13 @@
 .ProseMirror tr th {
   border-top: 1px solid #000;
   border-bottom: 1px solid #000;
-  background: #E2E2E2;
+  background: #e2e2e2;
   text-align: left;
   font-weight: bold;
 }
 
 .ProseMirror tr th:not(:last-child) {
-  border-right: 1px solid #C9C9C9;
+  border-right: 1px solid #c9c9c9;
 }
 
 .ProseMirror tr td {
@@ -272,7 +275,6 @@
   text-decoration: underline;
 }
 
-
 .ProseMirror .figure.placeholder.over {
   border-color: #bce7f6;
 }
@@ -626,16 +628,22 @@
 .ProseMirror .block-container.block-affiliations {
   grid-template-columns: 52px auto 100px !important;
 }
-.ProseMirror .block-container.block-section, .ProseMirror .block-container.block-graphical_abstract_section {
+.ProseMirror .block-container.block-section,
+.ProseMirror .block-container.block-graphical_abstract_section {
   position: relative;
   display: grid;
   grid-template-columns: auto;
 }
-.ProseMirror .block-container.block-section section, .ProseMirror .block-container.block-graphical_abstract_section section {
+.ProseMirror .block-container.block-section section,
+.ProseMirror .block-container.block-graphical_abstract_section section {
   position: relative;
 }
 
-.ProseMirror .block-container:not(.block-section, .block-graphical_abstract_section):hover {
+.ProseMirror
+  .block-container:not(
+    .block-section,
+    .block-graphical_abstract_section
+  ):hover {
   z-index: 2;
 }
 
@@ -698,17 +706,25 @@
 }
 
 .ProseMirror
-  .block-container:not(.block-section, .block-box_element, .block-graphical_abstract_section):hover
+  .block-container:not(
+    .block-section,
+    .block-box_element,
+    .block-graphical_abstract_section
+  ):hover
   .block-gutter {
   opacity: 1;
   z-index: 2;
 }
 
 .ProseMirror:not(.ProseMirror-focused.popper-open)
-  .block-container:not(.block-section, .block-box_element, .block-graphical_abstract_section):hover
-    .action-gutter {
-    pointer-events: visible;
-    opacity: 1;
+  .block-container:not(
+    .block-section,
+    .block-box_element,
+    .block-graphical_abstract_section
+  ):hover
+  .action-gutter {
+  pointer-events: visible;
+  opacity: 1;
 }
 
 .ProseMirror .block-box_element:hover > .block-gutter {
@@ -1046,7 +1062,7 @@
 .ProseMirror .footnote-marker-selected:not(.selected-suggestion) {
   text-decoration: underline;
   background-color: #f2fbfc;
-  border-color:  #0d79d0;
+  border-color: #0d79d0;
 }
 .ProseMirror .table-footer p {
   margin-bottom: 0;
@@ -1081,7 +1097,8 @@
   font-size: 28px;
   font-weight: 700;
   line-height: 1.43;
-  padding-left: 65px;
+  padding-left: var(--body-side-margin);
+  padding-right: var(--body-side-margin);
 }
 .highlight {
   background-color: #ffeebf !important;