@squiz/formatted-text-editor 2.3.0 → 2.4.0

package/lib/utils/createToolbarPositioner.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createToolbarPositioner = void 0;
+const extensions_1 = require("remirror/extensions");
+const remirror_1 = require("remirror");
+const getCursorRect_1 = require("./getCursorRect");
+/* istanbul ignore next */
+const createToolbarPositioner = ({ types }) => {
+    // Inspired by "createMarkPositioner".
+    // See: https://github.com/remirror/remirror/blob/107cba/packages/remirror__extension-positioner/src/core-positioners.ts#L267
+    return extensions_1.Positioner.create({
+        hasChanged: extensions_1.hasStateChanged,
+        getActive: (props) => {
+            const { state, view } = props;
+            try {
+                const selection = (0, remirror_1.getTextSelection)(state.selection, state.doc);
+                const cursor = { from: view.coordsAtPos(selection.from), to: view.coordsAtPos(selection.to) };
+                const data = {
+                    isSelectionInView: (0, extensions_1.isPositionVisible)((0, getCursorRect_1.getCursorRect)(cursor.from), view.dom) ||
+                        (0, extensions_1.isPositionVisible)((0, getCursorRect_1.getCursorRect)(cursor.to), view.dom),
+                    cursor: cursor,
+                    visible: false,
+                    marks: {},
+                };
+                data.visible = !selection.empty && data.isSelectionInView;
+                types.forEach((type) => {
+                    const markRange = (0, remirror_1.getMarkRange)(selection.$from, type, selection.$to);
+                    if (!markRange) {
+                        data.marks[type] = { isActive: false, isExclusivelyActive: false };
+                        return;
+                    }
+                    // exclusively active =
+                    //   the entire selection has the mark applied.
+                    // active =
+                    //   at least part of the selection has the mark applied. "getMarkRanges" will return an empty array
+                    //   if this isn't the case. if there is no selection the cursor must be within the bounds of the mark,
+                    //   not on the edges.
+                    const isExclusivelyActive = selection.empty
+                        ? selection.from > markRange.from && selection.to < markRange.to
+                        : selection.from >= markRange.from && selection.to <= markRange.to;
+                    const isActive = selection.empty ? selection.from > markRange.from && selection.to < markRange.to : true;
+                    // the toolbar will be visible if there is either a selection, or we are within the bounds of a mark
+                    // we have formatting tools for.
+                    data.visible = data.visible || isExclusivelyActive;
+                    data.marks[type] = { isExclusivelyActive, isActive };
+                });
+                return data.visible ? [data] : extensions_1.Positioner.EMPTY;
+            }
+            catch {
+                return extensions_1.Positioner.EMPTY;
+            }
+        },
+        getPosition: (props) => {
+            const { element, data, view } = props;
+            const { cursor, visible } = data;
+            const { from, to } = cursor;
+            const parent = element.offsetParent ?? view.dom;
+            const parentRect = parent.getBoundingClientRect();
+            const height = Math.abs(to.bottom - from.top);
+            // Hack to get JSDOM to work, positioning doesn't work great here.
+            if (isNaN(parentRect.top)) {
+                return {
+                    rect: new DOMRect(0, 0, 0, 0),
+                    y: 0,
+                    x: 0,
+                    height: 0,
+                    width: 0,
+                    visible: false,
+                };
+            }
+            // True when the selection spans multiple lines.
+            const spansMultipleLines = height > from.bottom - from.top;
+            // The position furthest to the left.
+            const leftmost = Math.min(from.left, to.left);
+            // The position nearest the top.
+            const topmost = Math.min(from.top, to.top);
+            const bottommost = Math.max(from.bottom, to.bottom);
+            const left = parent.scrollLeft + (spansMultipleLines ? to.left - parentRect.left : leftmost - parentRect.left);
+            const top = parent.scrollTop + topmost - parentRect.top;
+            const width = spansMultipleLines ? 1 : Math.abs(from.left - to.right);
+            const rect = new DOMRect(spansMultipleLines ? to.left : leftmost, topmost, width, height);
+            // Get header toolbar by class inside the current element/editor
+            const headerToolbar = element.parentElement?.getElementsByClassName('header-toolbar')?.[0];
+            const headerBarRects = headerToolbar?.getBoundingClientRect();
+            const headerBarHeight = headerBarRects?.height ?? 0;
+            const headerBarBottom = (headerBarRects?.top ?? 0) + headerBarHeight;
+            // If floating toolbar will overlap fixed toolbar, set position to under selection
+            const isOverlapping = headerBarBottom + headerBarHeight > topmost;
+            // This is a good bottom position instead of it being on top of the toolbar when there is an overlap
+            const bottomPosition = parent.scrollTop + bottommost - parentRect.top + 62;
+            const y = isOverlapping ? bottomPosition : top;
+            return { rect, y, x: left, height, width, visible };
+        },
+    });
+};
+exports.createToolbarPositioner = createToolbarPositioner;

package/lib/utils/getCursorRect.d.ts

@@ -0,0 +1,2 @@
+import { Coords } from 'remirror';
+export declare const getCursorRect: (coords: Coords) => DOMRect;

package/lib/utils/getCursorRect.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCursorRect = void 0;
+const getCursorRect = (coords) => {
+    return new DOMRect(coords.left, coords.top, 1, coords.top - coords.bottom);
+};
+exports.getCursorRect = getCursorRect;

package/lib/utils/getMarkNamesByGroup.d.ts

@@ -0,0 +1,2 @@
+import { EditorSchema, ExtensionTagType } from '@remirror/core';
+export declare const getMarkNamesByGroup: (schema: EditorSchema, group: ExtensionTagType) => string[];

package/lib/utils/getMarkNamesByGroup.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMarkNamesByGroup = void 0;
+const getMarkNamesByGroup = (schema, group) => {
+    return Object.values(schema.marks)
+        .filter((mark) => mark.spec.group?.includes(group))
+        .map((mark) => mark.name);
+};
+exports.getMarkNamesByGroup = getMarkNamesByGroup;

package/lib/utils/getNodeNamesByGroup.d.ts

@@ -0,0 +1,2 @@
+import { EditorSchema, ExtensionTagType } from '@remirror/core';
+export declare const getNodeNamesByGroup: (schema: EditorSchema, group: ExtensionTagType) => string[];

package/lib/utils/getNodeNamesByGroup.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNodeNamesByGroup = void 0;
+const getNodeNamesByGroup = (schema, group) => {
+    return Object.values(schema.nodes)
+        .filter((node) => node.spec.group?.includes(group))
+        .map((node) => node.name);
+};
+exports.getNodeNamesByGroup = getNodeNamesByGroup;

package/lib/utils/getShortcutSymbol.d.ts

@@ -0,0 +1 @@
+export declare const getShortcutSymbol: () => string;

package/lib/utils/getShortcutSymbol.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getShortcutSymbol = void 0;
+const getShortcutSymbol = () => {
+    // If we can detect Mac then we return "⌘" otherwise default to "Ctrl"
+    return window.navigator.userAgent.toLowerCase().indexOf('mac') > -1 ? '⌘' : 'Ctrl';
+};
+exports.getShortcutSymbol = getShortcutSymbol;

package/lib/utils/undefinedIfEmpty.d.ts

@@ -0,0 +1 @@
+export declare const undefinedIfEmpty: <T extends object>(object: T) => T | undefined;

package/lib/utils/undefinedIfEmpty.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.undefinedIfEmpty = void 0;
+const undefinedIfEmpty = (object) => {
+    return Object.keys(object).length > 0 ? object : undefined;
+};
+exports.undefinedIfEmpty = undefinedIfEmpty;

package/lib/utils/validation.d.ts

@@ -0,0 +1,3 @@
+export declare const noEmptySpacesValidation: (value: string | undefined) => "Empty space is not allowed" | undefined;
+export declare const hasProperties: <T>(message: string, properties: (keyof T)[]) => (value: T) => string | undefined;
+export declare const regexDataURI: RegExp;

package/lib/utils/validation.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.regexDataURI = exports.hasProperties = exports.noEmptySpacesValidation = void 0;
+const noEmptySpacesValidation = (value) => {
+    if (value && !(value.trim().length > 0)) {
+        return 'Empty space is not allowed';
+    }
+};
+exports.noEmptySpacesValidation = noEmptySpacesValidation;
+const hasProperties = (message, properties) => (value) => {
+    if (!value || properties.filter((property) => value[property]).length !== properties.length) {
+        return message;
+    }
+};
+exports.hasProperties = hasProperties;
+exports.regexDataURI = /^data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@/?%\s]*)$/i;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,