@manuscripts/body-editor 2.8.48 → 2.8.52

package/dist/es/views/block_view.js

@@ -16,14 +16,18 @@
 import { addTrackChangesAttributes } from '../lib/track-changes-utils';
 import { BaseNodeView } from './base_node_view';
 export default class BlockView extends BaseNodeView {
+    constructor() {
+        super(...arguments);
+        this.gutter = {};
+    }
     initialise() {
         this.createDOM();
         this.createGutter('block-gutter', this.gutterButtons().filter(Boolean));
         this.createElement();
-        this.createGutter('action-gutter', this.actionGutterButtons().filter(Boolean));
         this.updateContents();
     }
     updateContents() {
+        this.createGutter('action-gutter', this.actionGutterButtons().filter(Boolean));
         super.updateContents();
         this.updateClasses();
         this.updatePlaceholder();
@@ -56,13 +60,16 @@ export default class BlockView extends BaseNodeView {
         this.dom.classList.add(`block-${this.node.type.name}`);
     }
     createGutter(className, buttons) {
-        const gutter = document.createElement('div');
-        gutter.setAttribute('contenteditable', 'false');
-        gutter.classList.add(className);
+        if (this.gutter[className]) {
+            this.gutter[className].remove();
+        }
+        this.gutter[className] = document.createElement('div');
+        this.gutter[className].setAttribute('contenteditable', 'false');
+        this.gutter[className].classList.add(className);
         for (const button of buttons) {
-            gutter.appendChild(button);
+            this.gutter[className].appendChild(button);
         }
-        this.dom.appendChild(gutter);
+        this.dom.appendChild(this.gutter[className]);
     }
     gutterButtons() {
         return [];

package/dist/es/views/editable_block.js

@@ -13,13 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { schema, } from '@manuscripts/transform';
-import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
+import { schema } from '@manuscripts/transform';
 import { ContextMenu, contextMenuBtnClass } from '../lib/context-menu';
-const isNotNull = (a) => a !== null;
-const hasParent = ($pos, type) => {
-    return !!findParentNodeOfTypeClosestToPos($pos, type);
-};
+import { hasParent, isNotNull } from '../lib/utils';
 export const EditableBlock = (Base) => {
     return class extends Base {
         constructor() {

package/dist/es/views/figure_editable.js

@@ -29,6 +29,7 @@ import { createElement } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { FigureOptions, } from '../components/views/FigureDropdown';
 import { groupFiles } from '../lib/files';
+import { isDeleted } from '../lib/track-changes-utils';
 import { updateNodeAttrs } from '../lib/view';
 import { createEditableNodeView } from './creators';
 import { FigureView } from './figure';
@@ -43,10 +44,10 @@ export var figurePositions;
 export class FigureEditableView extends FigureView {
     constructor() {
         super(...arguments);
-        this.initialise = () => {
-            this.createDOM();
-            this.updateContents();
-        };
+        this.upload = (file) => __awaiter(this, void 0, void 0, function* () {
+            const result = yield this.props.fileManagement.upload(file);
+            this.setSrc(result.id);
+        });
         this.setSrc = (src) => {
             const { tr } = this.view.state;
             const pos = this.getPos();
@@ -162,14 +163,17 @@ export class FigureEditableView extends FigureView {
             this.props.popper.show(this.positionMenuWrapper, ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu', 'position-menu']), 'left', false);
         };
     }
+    initialise() {
+        this.upload = this.upload.bind(this);
+        this.createDOM();
+        this.updateContents();
+    }
     updateContents() {
-        var _a;
         super.updateContents();
-        const attrs = this.node.attrs;
-        const src = attrs.src;
+        const src = this.node.attrs.src;
         const files = this.props.getFiles();
         const file = src && files.filter((f) => f.id === src)[0];
-        this.figurePosition = attrs.type;
+        this.figurePosition = this.node.attrs.type;
         this.container.innerHTML = '';
         const can = this.props.getCapabilities();
         const link = file && this.props.fileManagement.previewLink(file);
@@ -178,37 +182,13 @@ export class FigureEditableView extends FigureView {
             : file
                 ? this.createUnsupportedFormat(file.name)
                 : this.createPlaceholder();
-        let handleDownload;
-        let handleUpload;
-        let handleReplace;
-        let handleDetach;
-        if (src) {
-            if (file) {
-                handleDownload = () => {
-                    this.props.fileManagement.download(file);
-                };
-            }
-            handleDetach = () => {
-                this.setSrc('');
-            };
-        }
-        if (can.replaceFile) {
-            handleReplace = (file) => {
-                this.setSrc(file.id);
-            };
-        }
-        if (can.uploadFile) {
-            const upload = (file) => __awaiter(this, void 0, void 0, function* () {
-                const result = yield this.props.fileManagement.upload(file);
-                this.setSrc(result.id);
-            });
-            handleUpload = figureUploader(upload);
+        if (can.uploadFile && !isDeleted(this.node)) {
             const handlePlaceholderClick = (event) => {
                 const target = event.target;
                 if (target.dataset && target.dataset.action) {
                     return;
                 }
-                const triggerUpload = figureUploader(upload);
+                const triggerUpload = figureUploader(this.upload);
                 triggerUpload();
             };
             img.addEventListener('click', handlePlaceholderClick);
@@ -238,12 +218,46 @@ export class FigureEditableView extends FigureView {
             img.addEventListener('drop', (e) => __awaiter(this, void 0, void 0, function* () {
                 if (e.dataTransfer && e.dataTransfer.files.length) {
                     e.preventDefault();
-                    yield upload(e.dataTransfer.files[0]);
+                    yield this.upload(e.dataTransfer.files[0]);
                 }
             }));
         }
         this.container.innerHTML = '';
         this.container.appendChild(img);
+        this.addTools();
+    }
+    addTools() {
+        this.manageReactTools();
+        this.container.appendChild(this.createPositionMenuWrapper());
+    }
+    manageReactTools() {
+        var _a;
+        let handleDownload;
+        let handleUpload;
+        let handleReplace;
+        let handleDetach;
+        const src = this.node.attrs.src;
+        const files = this.props.getFiles();
+        const file = src && files.filter((f) => f.id === src)[0];
+        const can = this.props.getCapabilities();
+        if (src) {
+            if (file) {
+                handleDownload = () => {
+                    this.props.fileManagement.download(file);
+                };
+            }
+            handleDetach = () => {
+                this.setSrc('');
+            };
+        }
+        if (can.replaceFile) {
+            handleReplace = (file) => {
+                this.setSrc(file.id);
+            };
+        }
+        if (can.uploadFile) {
+            handleUpload = figureUploader(this.upload);
+        }
         (_a = this.reactTools) === null || _a === void 0 ? void 0 : _a.remove();
         if (this.props.dispatch && this.props.theme) {
             const files = this.props.getFiles();
@@ -259,7 +273,6 @@ export class FigureEditableView extends FigureView {
             this.reactTools = ReactSubView(this.props, FigureOptions, componentProps, this.node, this.getPos, this.view);
             this.dom.insertBefore(this.reactTools, this.dom.firstChild);
         }
-        this.container.appendChild(this.createPositionMenuWrapper());
     }
 }
 export default createEditableNodeView(FigureEditableView);

package/dist/es/views/pullquote_element.js

@@ -13,18 +13,51 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { ContextMenu } from '@manuscripts/style-guide';
+import { schema } from '@manuscripts/transform';
+import { findChildrenByType } from 'prosemirror-utils';
 import BlockView from './block_view';
 import { createNodeOrElementView } from './creators';
+import ReactSubView from './ReactSubView';
 export class PullquoteElementView extends BlockView {
     constructor() {
         super(...arguments);
         this.elementType = 'aside';
+        this.ignoreMutation = () => true;
+        this.stopEvent = () => true;
         this.createElement = () => {
             this.contentDOM = document.createElement(this.elementType);
             this.contentDOM.className = 'block';
             this.contentDOM.classList.add('pullquote');
             this.dom.appendChild(this.contentDOM);
         };
+        this.actionGutterButtons = () => {
+            const contextMenu = this.addFigureContextMenu();
+            return contextMenu ? [contextMenu] : [];
+        };
+        this.addFigureContextMenu = () => {
+            const can = this.props.getCapabilities();
+            const componentProps = {
+                actions: [],
+            };
+            if (can.editArticle) {
+                componentProps.actions.push({
+                    label: 'Add Image',
+                    action: () => this.handleAddFigure(),
+                    icon: 'AddFigure',
+                    disabled: !!findChildrenByType(this.node, schema.nodes.quote_image)
+                        .length,
+                });
+                this.contextMenu = ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu']);
+                return this.contextMenu;
+            }
+            return undefined;
+        };
+    }
+    handleAddFigure() {
+        const tr = this.view.state.tr;
+        tr.insert(this.getPos() + 1, schema.nodes.quote_image.create());
+        this.view.dispatch(tr);
     }
 }
 export default createNodeOrElementView(PullquoteElementView, 'aside');

package/dist/es/views/quote_image_editable.js

@@ -0,0 +1,67 @@
+/*!
+ * © 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 { plusIcon } from '../icons';
+import { addTrackChangesAttributes, addTrackChangesClassNames, isDeleted, } from '../lib/track-changes-utils';
+import { createEditableNodeView } from './creators';
+import { FigureEditableView } from './figure_editable';
+export class QuoteImageEditableView extends FigureEditableView {
+    constructor() {
+        super(...arguments);
+        this.createPlaceholder = () => {
+            const element = document.createElement('div');
+            element.classList.add('figure', 'placeholder');
+            const instructions = document.createElement('div');
+            instructions.classList.add('instructions');
+            instructions.innerHTML = `${plusIcon}<div>Drag or click here to upload image</div>`;
+            element.appendChild(instructions);
+            return element;
+        };
+    }
+    createDOM() {
+        this.dom = document.createElement('figure');
+        this.container = document.createElement('div');
+        this.container.className = 'pullquote-figure';
+        this.container.contentEditable = 'false';
+        this.dom.appendChild(this.container);
+    }
+    addTools() {
+        if (!this.closeButton) {
+            const closeButton = document.createElement('button');
+            closeButton.innerHTML = plusIcon;
+            closeButton.classList.add('figure-remove-button', 'button-reset');
+            closeButton.addEventListener('click', () => {
+                if (this.node.attrs.src) {
+                    this.setSrc('');
+                }
+                else {
+                    const { tr } = this.view.state;
+                    tr.delete(this.getPos(), this.getPos() + this.node.nodeSize);
+                    this.view.dispatch(tr);
+                }
+            });
+            this.closeButton = closeButton;
+        }
+    }
+    updateContents() {
+        super.updateContents();
+        if (!isDeleted(this.node)) {
+            this.container.appendChild(this.closeButton);
+        }
+        addTrackChangesAttributes(this.node.attrs, this.dom);
+        addTrackChangesClassNames(this.node.attrs, this.dom);
+    }
+}
+export default createEditableNodeView(QuoteImageEditableView);

package/dist/types/icons.d.ts

@@ -5,3 +5,4 @@ export declare const editIcon: string;
 export declare const sectionCategoryIcon: string;
 export declare const scrollIcon: string;
 export declare const lockIcon: string;
+export declare const plusIcon: string;

package/dist/types/lib/utils.d.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { BibliographyItemAttrs, BibliographyItemType, ManuscriptNode, ManuscriptNodeType } from '@manuscripts/transform';
-import { Node as ProseMirrorNode, NodeType } from 'prosemirror-model';
+import { Node as ProseMirrorNode, NodeType, ResolvedPos } from 'prosemirror-model';
 import { EditorState, Selection } from 'prosemirror-state';
 export declare function iterateChildren(node: ManuscriptNode, recurse?: boolean): Iterable<ManuscriptNode>;
 export declare const getMatchingChild: (parent: ManuscriptNode, matcher: (node: ManuscriptNode) => boolean, deep?: boolean) => ManuscriptNode | undefined;
@@ -28,6 +28,8 @@ export declare const isChildOfNodeTypes: (doc: ManuscriptNode, pos: number, pare
 export declare const isSelectionInNode: (state: EditorState, targetNode: ProseMirrorNode) => boolean;
 export declare const isSelectionInBody: (state: EditorState) => boolean;
 export declare const createHeader: (typeName: string, text: string) => HTMLHeadingElement;
+export declare const isNotNull: <T>(a: T | null) => a is T;
+export declare const hasParent: ($pos: ResolvedPos, type: ManuscriptNodeType) => boolean;
 export declare const shouldRenderField: (field: string, type: BibliographyItemType) => boolean;
 export declare const cleanItemValues: (item: BibliographyItemAttrs) => BibliographyItemAttrs;
 export declare const isBodyLocked: (state: EditorState) => boolean;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "2.8.48";
+export declare const VERSION = "2.8.52";
 export declare const MATHJAX_VERSION = "3.2.2";

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

@@ -23,6 +23,7 @@ export default class BlockView<BlockNode extends ManuscriptNode> extends BaseNod
     updatePlaceholder(): void;
     createElement(): void;
     createDOM(): void;
+    gutter: Record<string, HTMLElement>;
     createGutter(className: string, buttons: HTMLElement[]): void;
     gutterButtons(): HTMLElement[];
     actionGutterButtons(): HTMLElement[];

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

@@ -27,6 +27,7 @@ declare const _default: (props: import("../configs/ManuscriptsEditor").EditorPro
     updatePlaceholder(): void;
     createElement(): void;
     createDOM(): void;
+    gutter: Record<string, HTMLElement>;
     createGutter(className: string, buttons: HTMLElement[]): void;
     dom: HTMLElement;
     contentDOM?: HTMLElement | undefined;

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

@@ -27,6 +27,7 @@ declare const _default: (props: import("../configs/ManuscriptsEditor").EditorPro
     updatePlaceholder(): void;
     createElement(): void;
     createDOM(): void;
+    gutter: Record<string, HTMLElement>;
     createGutter(className: string, buttons: HTMLElement[]): void;
     dom: HTMLElement;
     contentDOM?: HTMLElement | undefined;

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

@@ -30,6 +30,7 @@ export declare const EditableBlock: <T extends Constructor<BlockView<import("pro
         updatePlaceholder(): void;
         createElement(): void;
         createDOM(): void;
+        gutter: Record<string, HTMLElement>;
         createGutter(className: string, buttons: HTMLElement[]): void;
         dom: HTMLElement;
         contentDOM?: HTMLElement | undefined;

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

@@ -27,6 +27,7 @@ declare const _default: (props: import("../configs/ManuscriptsEditor").EditorPro
     updatePlaceholder(): void;
     createElement(): void;
     createDOM(): void;
+    gutter: Record<string, HTMLElement>;
     createGutter(className: string, buttons: HTMLElement[]): void;
     dom: HTMLElement;
     contentDOM?: HTMLElement | undefined;

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

@@ -23,12 +23,15 @@ export declare class FigureEditableView extends FigureView {
     reactTools: HTMLDivElement;
     positionMenuWrapper: HTMLDivElement;
     figurePosition: string;
-    initialise: () => void;
+    initialise(): void;
+    upload: (file: File) => Promise<void>;
     updateContents(): void;
-    private setSrc;
+    protected addTools(): void;
+    private manageReactTools;
+    protected setSrc: (src: string) => void;
     private createUnsupportedFormat;
-    private createImg;
-    private createPlaceholder;
+    protected createImg: (src: string) => HTMLImageElement;
+    protected createPlaceholder: () => HTMLDivElement;
     createPositionMenuWrapper: () => HTMLDivElement;
     showPositionMenu: () => void;
 }

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

@@ -27,6 +27,7 @@ declare const _default: (props: import("../configs/ManuscriptsEditor").EditorPro
     updatePlaceholder(): void;
     createElement(): void;
     createDOM(): void;
+    gutter: Record<string, HTMLElement>;
     createGutter(className: string, buttons: HTMLElement[]): void;
     dom: HTMLElement;
     contentDOM?: HTMLElement | undefined;

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

@@ -34,6 +34,7 @@ declare const _default: (props: import("../configs/ManuscriptsEditor").EditorPro
     updatePlaceholder(): void;
     createElement(): void;
     createDOM(): void;
+    gutter: Record<string, HTMLElement>;
     createGutter(className: string, buttons: HTMLElement[]): void;
     dom: HTMLElement;
     contentDOM?: HTMLElement | undefined;

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

@@ -27,6 +27,7 @@ declare const _default: (props: import("../configs/ManuscriptsEditor").EditorPro
     updatePlaceholder(): void;
     createElement(): void;
     createDOM(): void;
+    gutter: Record<string, HTMLElement>;
     createGutter(className: string, buttons: HTMLElement[]): void;
     dom: HTMLElement;
     contentDOM?: HTMLElement | undefined;

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

@@ -27,6 +27,7 @@ declare const _default: (props: import("../configs/ManuscriptsEditor").EditorPro
     updatePlaceholder(): void;
     createElement(): void;
     createDOM(): void;
+    gutter: Record<string, HTMLElement>;
     createGutter(className: string, buttons: HTMLElement[]): void;
     dom: HTMLElement;
     contentDOM?: HTMLElement | undefined;

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

@@ -27,6 +27,7 @@ declare const _default: (props: import("../configs/ManuscriptsEditor").EditorPro
     updatePlaceholder(): void;
     createElement(): void;
     createDOM(): void;
+    gutter: Record<string, HTMLElement>;
     createGutter(className: string, buttons: HTMLElement[]): void;
     dom: HTMLElement;
     contentDOM?: HTMLElement | undefined;

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

@@ -17,7 +17,13 @@ import { PullquoteElementNode } from '@manuscripts/transform';
 import BlockView from './block_view';
 export declare class PullquoteElementView extends BlockView<PullquoteElementNode> {
     elementType: string;
+    contextMenu: HTMLElement;
+    ignoreMutation: () => boolean;
+    stopEvent: () => boolean;
     createElement: () => void;
+    handleAddFigure(): void;
+    actionGutterButtons: () => HTMLElement[];
+    addFigureContextMenu: () => HTMLElement | undefined;
 }
 declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps) => import("../types").NodeViewCreator<PullquoteElementView>;
 export default _default;

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

@@ -27,6 +27,7 @@ declare const _default: (props: import("../configs/ManuscriptsEditor").EditorPro
     updatePlaceholder(): void;
     createElement(): void;
     createDOM(): void;
+    gutter: Record<string, HTMLElement>;
     createGutter(className: string, buttons: HTMLElement[]): void;
     dom: HTMLElement;
     contentDOM?: HTMLElement | undefined;

package/dist/types/views/quote_image_editable.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 { FigureEditableView } from './figure_editable';
+export declare class QuoteImageEditableView extends FigureEditableView {
+    closeButton: HTMLButtonElement;
+    isInPullQuote: boolean;
+    createDOM(): void;
+    addTools(): void;
+    updateContents(): void;
+    protected createPlaceholder: () => HTMLDivElement;
+}
+declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<QuoteImageEditableView>;
+export default _default;

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

@@ -27,6 +27,7 @@ declare const _default: (props: import("../configs/ManuscriptsEditor").EditorPro
     updatePlaceholder(): void;
     createElement(): void;
     createDOM(): void;
+    gutter: Record<string, HTMLElement>;
     createGutter(className: string, buttons: HTMLElement[]): void;
     dom: HTMLElement;
     contentDOM?: HTMLElement | undefined;

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

@@ -27,6 +27,7 @@ declare const _default: (props: import("../configs/ManuscriptsEditor").EditorPro
     updatePlaceholder(): void;
     createElement(): void;
     createDOM(): void;
+    gutter: Record<string, HTMLElement>;
     createGutter(className: string, buttons: HTMLElement[]): void;
     dom: HTMLElement;
     contentDOM?: HTMLElement | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "2.8.48",
+  "version": "2.8.52",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -32,9 +32,9 @@
     "@iarna/word-count": "^1.1.2",
     "@manuscripts/json-schema": "2.2.11",
     "@manuscripts/library": "1.3.14",
-    "@manuscripts/style-guide": "2.1.9",
+    "@manuscripts/style-guide": "2.1.10",
     "@manuscripts/track-changes-plugin": "1.10.4",
-    "@manuscripts/transform": "3.0.57",
+    "@manuscripts/transform": "3.0.59",
     "@popperjs/core": "^2.11.8",
     "astrocite-eutils": "^0.16.4",
     "codemirror": "^5.58.1",