@squiz/formatted-text-editor 0.0.0-rbv2-20240530041851

package/lib/hooks/useExpandedSelection.d.ts

@@ -0,0 +1,23 @@
+import { Selection } from '@remirror/core';
+import { Mark, MarkType } from 'remirror';
+export type ExpandedSelection = {
+    selection: Selection;
+    marks: Mark[];
+};
+/**
+ * Returns a single range that is either:
+ * 1. The current selection if the current selection does not contain any of the indicated marks.
+ * 2. An expanded version of the current selection if the range contains any of the indicated marks.
+ *
+ * For example, given the content:
+ *
+ * <strong>Bold</strong> regular <u>underline</u> <u>more underline</u>
+ *
+ * If the marks passed in are 'bold' and 'underline' and the text "old regular under" is selected
+ * the returned range will be "Bold regular underline".
+ *
+ * @param {(MarkType|string)[]} markTypes
+ *
+ * @return {ExpandedSelection}
+ */
+export declare const useExpandedSelection: (markTypes: (MarkType | string)[]) => ExpandedSelection;

package/lib/hooks/useExpandedSelection.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExpandedSelection = void 0;
+const remirror_1 = require("remirror");
+const react_1 = require("@remirror/react");
+/**
+ * Returns a single range that is either:
+ * 1. The current selection if the current selection does not contain any of the indicated marks.
+ * 2. An expanded version of the current selection if the range contains any of the indicated marks.
+ *
+ * For example, given the content:
+ *
+ * <strong>Bold</strong> regular <u>underline</u> <u>more underline</u>
+ *
+ * If the marks passed in are 'bold' and 'underline' and the text "old regular under" is selected
+ * the returned range will be "Bold regular underline".
+ *
+ * @param {(MarkType|string)[]} markTypes
+ *
+ * @return {ExpandedSelection}
+ */
+const useExpandedSelection = (markTypes) => {
+    const { doc, selection } = (0, react_1.useEditorState)();
+    const ranges = [];
+    markTypes.forEach((markType) => {
+        ranges.push(...(0, remirror_1.getMarkRanges)(selection, markType));
+    });
+    if (ranges.length === 0) {
+        return { selection, marks: [] };
+    }
+    // work out the start position of the first link and end position of the last link in the selection.
+    const from = Math.min(selection.from, ...ranges.map((range) => range.from));
+    const to = Math.max(selection.to, ...ranges.map((range) => range.to));
+    const marks = ranges.map((range) => range.mark);
+    return { selection: (0, remirror_1.getTextSelection)({ from, to }, doc), marks };
+};
+exports.useExpandedSelection = useExpandedSelection;

package/lib/hooks/useExtensionNames.d.ts

@@ -0,0 +1 @@
+export declare const useExtensionNames: () => Record<string, true>;

package/lib/hooks/useExtensionNames.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExtensionNames = void 0;
+const react_1 = require("@remirror/react");
+const react_2 = require("react");
+const useExtensionNames = () => {
+    const { manager } = (0, react_1.useRemirrorContext)();
+    return (0, react_2.useMemo)(() => {
+        const extensionNames = {};
+        manager.extensions.forEach((extension) => {
+            extensionNames[extension.name] = true;
+        });
+        return extensionNames;
+    }, [manager]);
+};
+exports.useExtensionNames = useExtensionNames;

package/lib/hooks/useFocus.d.ts

@@ -0,0 +1,8 @@
+import { FocusEvent, FocusEventHandler, RefObject } from 'react';
+declare const useFocus: (initialState: boolean) => {
+    handleFocus: (event: FocusEvent) => void;
+    handleBlur: FocusEventHandler<HTMLDivElement>;
+    isVisible: boolean;
+    wrapperRef: RefObject<HTMLDivElement>;
+};
+export default useFocus;

package/lib/hooks/useFocus.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const useFocus = (initialState) => {
+    const wrapperRef = (0, react_1.createRef)();
+    const [isVisible, setIsVisible] = (0, react_1.useState)(initialState);
+    const handleFocus = (0, react_1.useCallback)((event) => {
+        // Ignore elements flagged to be ignored, this allows us to add extra, clickable, elements
+        // without triggering a focus, such as action menus.
+        if (!event.target?.classList?.contains('fte-ignore') && !event.target?.closest('.fte-ignore')) {
+            setIsVisible(true);
+        }
+    }, [wrapperRef]);
+    const handleBlur = (0, react_1.useCallback)((event) => {
+        // React event bubbling is interesting, it bubbles up the React tree rather than the DOM tree.
+        // The tree deviates when rendering portals (eg. for modals).
+        //
+        // Only hide the toolbar if:
+        // 1. We are blurring a node in the editor **DOM** tree.
+        // 2. We are focusing on something that is not in the editor DOM tree
+        //    (elements in the portal won't be in the tree but don't influence the focus state per #1).
+        //
+        // This avoids the scenario where an element in a portal is blurred and another one in the portal focused.
+        // Without this logic the blur and focus handlers are called (in that order). The impact of these handlers being
+        // called is that the "isFocused" state changes inconsistently. This state changing then causes subtle issues.
+        // eg. unable to drill down in resource browser, toolbar appearing/disappearing.
+        //
+        // Ideally we would instead solely seeing if the "relatedTarget" is in the React tree. This isn't easily
+        // identifiable however without reaching into React internals.
+        //
+        // An assumption here is that anything in a portal will only blur to another element that is also in the portal
+        // (and therefore still in our React tree resulting in the element still effectively being focused).
+        const isBlurringEditor = wrapperRef.current?.contains(event.target);
+        const isFocusedInEditor = wrapperRef.current?.contains(event.relatedTarget);
+        // Detect if the blur event happens when the related/clicked target is the floating popover
+        const isClickingFloatingToolbar = !!event.relatedTarget?.closest('.squiz-fte-scope__floating-popover');
+        if (isBlurringEditor && !isFocusedInEditor && !isClickingFloatingToolbar) {
+            setIsVisible(false);
+        }
+    }, [wrapperRef]);
+    return { handleFocus, handleBlur, isVisible, wrapperRef };
+};
+exports.default = useFocus;