@manuscripts/body-editor 3.16.3 → 3.17.0

package/src/views/pullquote_element.ts

@@ -24,10 +24,13 @@ import { setCommentSelection } from '../plugins/comments'
 import BlockView from './block_view'
 import { createNodeOrElementView } from './creators'
 import ReactSubView from './ReactSubView'
+import { HorizontalPositionMenu } from '../lib/position-menu'
 
 export class PullquoteElementView extends BlockView<PullquoteElementNode> {
   public elementType = 'aside'
   contextMenu: HTMLElement
+  container: HTMLDivElement
+  private positionMenu: HorizontalPositionMenu
 
   public ignoreMutation = () => true
   public stopEvent = () => true
@@ -51,7 +54,10 @@ export class PullquoteElementView extends BlockView<PullquoteElementNode> {
     this.contentDOM.className = 'block'
     this.contentDOM.classList.add('pullquote')
 
-    this.dom.appendChild(this.contentDOM)
+    this.container = document.createElement('div')
+    this.container.classList.add('container')
+    this.container.appendChild(this.contentDOM)
+    this.dom.appendChild(this.container)
 
     // Add click event listener to handle comment marker clicks
     this.dom.addEventListener('click', this.handleClick)
@@ -96,11 +102,37 @@ export class PullquoteElementView extends BlockView<PullquoteElementNode> {
     return undefined
   }
 
+  public updateContents() {
+    super.updateContents()
+    this.addTools()
+  }
+
   public destroy = () => {
     // Clean up event listener
     this.dom.removeEventListener('click', this.handleClick)
     super.destroy()
   }
+
+  protected addTools() {
+    this.addPositionMenu()
+  }
+
+  protected addPositionMenu() {
+    if (!this.positionMenu) {
+      this.positionMenu = new HorizontalPositionMenu(
+        this,
+        this.updateHorizontalPosition,
+        this.container
+      )
+    }
+    this.positionMenu.create()
+  }
+
+  private updateHorizontalPosition(horizontalPosition: string) {
+    const tr = this.view.state.tr
+    tr.setNodeAttribute(this.getPos(), 'type', horizontalPosition)
+    this.view.dispatch(tr)
+  }
 }
 
 export default createNodeOrElementView(PullquoteElementView, 'aside')

package/src/views/table_element.ts

@@ -18,15 +18,48 @@ import { TableElementNode } from '@manuscripts/transform'
 
 import BlockView from './block_view'
 import { createNodeView } from './creators'
+import { HorizontalPositionMenu } from '../lib/position-menu'
 
 export class TableElementView extends BlockView<TableElementNode> {
   public elementType = 'figure'
+  container: HTMLDivElement
+  private positionMenu: HorizontalPositionMenu
 
   public createElement = () => {
     this.contentDOM = document.createElement('figure')
     this.contentDOM.classList.add('block')
     this.contentDOM.setAttribute('id', this.node.attrs.id)
-    this.dom.appendChild(this.contentDOM)
+
+    this.container = document.createElement('div')
+    this.container.classList.add('container')
+    this.container.appendChild(this.contentDOM)
+    this.dom.appendChild(this.container)
+  }
+
+  public updateContents() {
+    super.updateContents()
+    this.addTools()
+  }
+
+  protected addTools() {
+    this.addPositionMenu()
+  }
+
+  protected addPositionMenu() {
+    if (!this.positionMenu) {
+      this.positionMenu = new HorizontalPositionMenu(
+        this,
+        this.updateHorizontalPosition,
+        this.container
+      )
+    }
+    this.positionMenu.create()
+  }
+
+  private updateHorizontalPosition(horizontalPosition: string) {
+    const tr = this.view.state.tr
+    tr.setNodeAttribute(this.getPos(), 'type', horizontalPosition)
+    this.view.dispatch(tr)
   }
 }
 

package/styles/AdvancedEditor.css

@@ -302,9 +302,7 @@
   border-radius: var(--focus-outline-radius);
 }
 
-.ProseMirror .block-figure_element .position-menu,
-.ProseMirror .block-image_element .position-menu,
-ProseMirror .block-embed .position-menu {
+.ProseMirror .position-menu {
   position: absolute;
   top: 8px;
   right: 21px;
@@ -514,7 +512,7 @@ ProseMirror .block-embed .position-menu {
   left: 100%;
 }
 .figure-block > div.comment-marker {
-  position:absolute;
+  position: absolute;
   top: 1px;
   left: unset;
   right: -25px;
@@ -1614,7 +1612,6 @@ th:hover > .table-context-menu-button,
   display: block;
 }
 
-
 .ProseMirror .ext-link-editor-container .close-button:focus-visible,
 .ProseMirror .ext-link-editor-container .remove-button:focus-visible,
 .ProseMirror .ext-link-editor-container .icon-button:focus-visible {
@@ -1683,7 +1680,7 @@ th:hover > .table-context-menu-button,
   cursor: pointer;
 }
 
-.ProseMirror .accessibility_element_input:focus{
+.ProseMirror .accessibility_element_input:focus {
   outline: none;
 }
 
@@ -2125,8 +2122,8 @@ th:hover > .table-context-menu-button,
  * If we later block editing these titles, this padding can go away.
  */
 .ProseMirror .abstracts .block-section .block-section_title h1,
-.ProseMirror .abstracts .block-trans_abstract .block-section_title h1{
-  padding-right:  150px;
+.ProseMirror .abstracts .block-trans_abstract .block-section_title h1 {
+  padding-right: 150px;
 }
 
 .ProseMirror .add-trans-abstract {

package/styles/Editor.css

@@ -1,6 +1,6 @@
 :root {
   --body-side-margin: 65px;
-  --focus-outline-color: #3DADFF;
+  --focus-outline-color: #3dadff;
   --focus-outline-offset: 2px;
   --focus-outline-radius: 3px;
 }
@@ -83,7 +83,7 @@
   content: '— ';
 }
 
-.ProseMirror .block-container > .block.pullquote {
+.ProseMirror .block-container > .container > .block.pullquote {
   padding: 0 0 7px 48px;
 }
 .ProseMirror .pullquote {
@@ -328,7 +328,7 @@
 
 .ProseMirror .caption-title[element-label]::before,
 .ProseMirror .caption-description > [element-label]::before {
-  content: attr(element-label)":";
+  content: attr(element-label) ':';
 }
 
 .ProseMirror .caption-title:not(:has(.placeholder-text)) {
@@ -339,11 +339,14 @@
   display: block;
 }
 
-.ProseMirror .caption-description, .ProseMirror .caption-description[element-label] > p:first-child {
+.ProseMirror .caption-description,
+.ProseMirror .caption-description[element-label] > p:first-child {
   display: inline;
 }
 
-.ProseMirror .caption-description, .ProseMirror .caption-title, .ProseMirror .element-label {
+.ProseMirror .caption-description,
+.ProseMirror .caption-title,
+.ProseMirror .element-label {
   font-size: 14px;
   outline: none;
   margin: 0;
@@ -709,6 +712,7 @@
   z-index: 2;
 }
 
+.ProseMirror .block-container > .container > .block,
 .ProseMirror .block-container > .block {
   margin: 0;
   z-index: 1;