@squiz/formatted-text-editor 1.12.0-alpha.9 → 1.12.1-alpha.0

package/lib/ui/Inputs/Select/Select.d.ts

@@ -0,0 +1,12 @@
+export type SelectOptions = Record<string, SelectOption>;
+export type SelectOption = {
+    label: string;
+};
+export type SelectProps = {
+    name: string;
+    label?: string;
+    value?: string;
+    options: SelectOptions;
+    onChange?: (value: string) => void;
+};
+export declare const Select: ({ name, label, value, onChange, options }: SelectProps) => JSX.Element;

package/lib/ui/Inputs/Select/Select.js

@@ -0,0 +1,23 @@
+import { Listbox } from '@headlessui/react';
+import React, { useState } from 'react';
+import clsx from 'clsx';
+import ExpandMoreRoundedIcon from '@mui/icons-material/ExpandMoreRounded';
+import ExpandLessRoundedIcon from '@mui/icons-material/ExpandLessRounded';
+export const Select = ({ name, label, value, onChange, options }) => {
+    const [selectedOption, setSelectedOptions] = useState(value ? options[value] : null);
+    const handleChange = (value) => {
+        setSelectedOptions(options[value]);
+        onChange?.(value);
+    };
+    return (React.createElement(Listbox, { value: value, name: name, "aria-labelledby": name, onChange: handleChange }, ({ open }) => (React.createElement(React.Fragment, null,
+        label && React.createElement(Listbox.Label, { className: "squiz-fte-form-label" }, label),
+        React.createElement("div", { className: "relative text-md text-gray-800" },
+            React.createElement(Listbox.Button, { className: "w-full cursor-default rounded border-2 border-gray-300 bg-white py-2 pl-3 pr-10 focus:border-blue-300 focus:outline-none" },
+                React.createElement("span", { className: "flex items-center" },
+                    React.createElement("span", { className: "block truncate" },
+                        selectedOption?.label,
+                        "\u00A0")),
+                React.createElement("span", { className: "pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2" }, !open ? (React.createElement(ExpandMoreRoundedIcon, { className: "text-gray-500", "aria-hidden": "true" })) : (React.createElement(ExpandLessRoundedIcon, { className: "text-gray-500", "aria-hidden": "true" })))),
+            React.createElement(Listbox.Options, { className: "absolute z-10 mt-1 w-full overflow-auto rounded border-2 border-gray-300 bg-white" }, Object.entries(options).map(([key, option]) => (React.createElement(Listbox.Option, { key: key, value: key, className: ({ active }) => clsx(active ? 'bg-gray-100' : 'bg-white', 'relative cursor-default select-none flex hover:bg-gray-100 py-2 px-3') },
+                React.createElement("span", { className: "block truncate" }, option.label))))))))));
+};

package/lib/ui/Inputs/Text/TextInput.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const TextInput: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
+    label?: string | undefined;
+} & React.RefAttributes<HTMLInputElement>>;

package/lib/ui/Inputs/Text/TextInput.js

@@ -0,0 +1,7 @@
+import React, { forwardRef } from 'react';
+const TextInputInternal = ({ name, label, ...rest }, ref) => {
+    return (React.createElement(React.Fragment, null,
+        label && (React.createElement("label", { htmlFor: name, className: "squiz-fte-form-label" }, label)),
+        React.createElement("input", { ref: ref, id: name, name: name, type: "text", className: "squiz-fte-form-control", ...rest })));
+};
+export const TextInput = forwardRef(TextInputInternal);

package/lib/ui/Modal/FormModal.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement } from 'react';
+import { ModalProps } from './Modal';
+type FormModalProps = Omit<ModalProps, 'onSubmit'>;
+declare const FormModal: (props: FormModalProps) => ReactElement;
+export default FormModal;

package/lib/ui/Modal/FormModal.js

@@ -0,0 +1,11 @@
+import React, { createRef } from 'react';
+import Modal from './Modal';
+const FormModal = (props) => {
+    const ref = createRef();
+    const handleSubmit = () => {
+        const form = ref.current?.querySelector('form');
+        form?.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
+    };
+    return React.createElement(Modal, { ref: ref, ...props, onSubmit: handleSubmit });
+};
+export default FormModal;

package/lib/ui/Modal/Modal.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactElement } from 'react';
+export type ModalProps = {
+    title: string;
+    children: ReactElement;
+    onCancel: () => void;
+    onSubmit?: () => void;
+    className?: string;
+};
+declare const _default: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/lib/ui/Modal/Modal.js

@@ -0,0 +1,48 @@
+import React, { forwardRef, useEffect, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import { FocusTrap } from '@mui/base';
+const Modal = ({ children, title, onCancel, onSubmit, className }, ref) => {
+    const container = useMemo(() => {
+        const element = document.createElement('div');
+        element.classList.add('squiz-fte-scope');
+        return element;
+    }, []);
+    const keydown = (e) => {
+        if (e.key === 'Escape') {
+            onCancel();
+        }
+        if (e.key === 'Enter') {
+            onSubmit && onSubmit();
+        }
+    };
+    // register key listeners for Enter/Escape on key up so the editor doesn't handle the event as well
+    useEffect(() => {
+        window.addEventListener('keyup', keydown);
+        return () => window.removeEventListener('keyup', keydown);
+    }, []);
+    // add/remove the modal container from the DOM and focus on the first input
+    useEffect(() => {
+        const firstInput = container.querySelector('input:not([type=hidden])');
+        document.body.appendChild(container);
+        firstInput?.focus();
+        return () => {
+            document.body.removeChild(container);
+        };
+    }, [container]);
+    return createPortal(React.createElement(React.Fragment, null,
+        React.createElement(FocusTrap, { open: true },
+            React.createElement("div", { ref: ref, className: `squiz-fte-modal-wrapper ${className ? className : ''}`, tabIndex: -1 },
+                React.createElement("div", { className: "w-modal-sm my-6 mx-auto" },
+                    React.createElement("div", { className: "squiz-fte-modal" },
+                        React.createElement("div", { className: "squiz-fte-modal-header p-6 pb-2" },
+                            React.createElement("h2", { className: "font-semibold text-gray-900 text-heading-2" }, title),
+                            React.createElement("button", { className: "ml-auto -mr-3 -mt-3 bg-transparent border-0 text-gray-600 font-semibold outline-none focus:outline-none hover:text-color-gray-800", onClick: onCancel, "aria-label": "Close" },
+                                React.createElement(CloseRoundedIcon, null))),
+                        React.createElement("div", { className: "squiz-fte-modal-content" }, children),
+                        React.createElement("div", { className: "squiz-fte-modal-footer p-6 pt-3" },
+                            React.createElement("button", { className: "squiz-fte-modal-footer__button bg-gray-200 text-gray-700 mr-2 hover:bg-gray-300", type: "button", onClick: onCancel, "aria-label": "Cancel" }, "Cancel"),
+                            onSubmit && (React.createElement("button", { className: "squiz-fte-modal-footer__button bg-blue-300 text-white hover:bg-blue-400", type: "button", onClick: onSubmit, "aria-label": "Apply" }, "Apply"))))))),
+        React.createElement("div", { className: "opacity-25 fixed inset-0 z-40 bg-black" })), container);
+};
+export default forwardRef(Modal);

package/lib/ui/ToolbarButton/ToolbarButton.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 type ToolbarButtonProps = {
     handleOnClick: () => void;
-    isDisabled: boolean;
+    isDisabled?: boolean;
     isActive: boolean;
     icon: ReactElement;
     label: string;

package/lib/ui/ToolbarButton/ToolbarButton.js

@@ -1,5 +1,5 @@
 import React from 'react';
 const ToolbarButton = ({ handleOnClick, isDisabled, isActive, icon, label }) => {
-    return (React.createElement("button", { "aria-label": label, title: label, type: "button", onClick: handleOnClick, disabled: isDisabled, className: `btn toolbar-button ${isActive ? 'is-active' : ''}` }, icon));
+    return (React.createElement("button", { "aria-label": label, title: label, type: "button", onClick: handleOnClick, disabled: isDisabled, className: `squiz-fte-btn toolbar-button ${isActive ? 'is-active' : ''}` }, icon));
 };
 export default ToolbarButton;

package/lib/ui/ToolbarDropdown/ToolbarDropdown.d.ts

@@ -0,0 +1,6 @@
+type ToolbarDropdownProps = {
+    children: JSX.Element | JSX.Element[];
+    label: string;
+};
+declare const ToolbarDropdown: ({ children, label }: ToolbarDropdownProps) => JSX.Element;
+export default ToolbarDropdown;

package/lib/ui/ToolbarDropdown/ToolbarDropdown.js

@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+const ToolbarDropdown = ({ children, label }) => {
+    const [isOpen, setOpen] = useState(false);
+    const handleDropDown = () => {
+        setOpen(!isOpen);
+    };
+    const handleBlur = (event) => {
+        if (event.relatedTarget?.id !== 'dropdownMenuButton' && !event.target?.className.includes('is-active')) {
+            isOpen && handleDropDown();
+        }
+    };
+    return (React.createElement("div", { className: "toolbar-dropdown", onBlur: handleBlur },
+        React.createElement("button", { id: "dropdownHoverButton", className: "toolbar-dropdown__button", onClick: handleDropDown },
+            React.createElement("span", { className: "toolbar-dropdown__label" }, label),
+            React.createElement(ExpandMoreIcon, { className: "toolbar-dropdown__icon", "aria-hidden": "true" })),
+        React.createElement("div", { id: "dropdown", className: `toolbar-dropdown__menu z-10 ${isOpen ? 'block' : 'hidden'} bg-white divide-y w-169` },
+            React.createElement("ul", { "aria-labelledby": "dropdownHoverButton", onClick: handleDropDown }, children))));
+};
+export default ToolbarDropdown;

package/lib/ui/ToolbarDropdownButton/ToolbarDropdownButton.d.ts

@@ -0,0 +1,9 @@
+type DropdownButtonProps = {
+    children?: JSX.Element;
+    handleOnClick: () => void;
+    isDisabled: boolean;
+    isActive: boolean;
+    label: string;
+};
+declare const DropdownButton: ({ children, handleOnClick, isDisabled, isActive, label }: DropdownButtonProps) => JSX.Element;
+export default DropdownButton;

package/lib/ui/ToolbarDropdownButton/ToolbarDropdownButton.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import CheckIcon from '@mui/icons-material/Check';
+const DropdownButton = ({ children, handleOnClick, isDisabled, isActive, label }) => {
+    return (React.createElement("button", { "aria-label": label, id: "dropdownMenuButton", title: label, type: "button", onClick: handleOnClick, disabled: isDisabled, className: `btn dropdown-button ${isActive ? 'is-active' : ''}` },
+        React.createElement("span", null, children || label),
+        isActive && React.createElement(CheckIcon, { className: "dropdown-button-icon" })));
+};
+export default DropdownButton;

package/lib/utils/createToolbarPositioner.d.ts

@@ -0,0 +1,18 @@
+import { Positioner } from 'remirror/extensions';
+import { Coords } from 'remirror';
+export type ToolbarPositionerProps = {
+    types: string[];
+};
+export type ToolbarPositionerRange = {
+    isSelectionInView: boolean;
+    visible: boolean;
+    marks: Record<string, {
+        isExclusivelyActive: boolean;
+        isActive: boolean;
+    }>;
+    cursor: {
+        from: Coords;
+        to: Coords;
+    };
+};
+export declare const createToolbarPositioner: ({ types }: ToolbarPositionerProps) => Positioner<ToolbarPositionerRange>;

package/lib/utils/createToolbarPositioner.js

@@ -0,0 +1,81 @@
+import { hasStateChanged, isPositionVisible, Positioner } from 'remirror/extensions';
+import { getMarkRange, getTextSelection } from 'remirror';
+import { getCursorRect } from './getCursorRect';
+/* istanbul ignore next */
+export const createToolbarPositioner = ({ types }) => {
+    // Inspired by "createMarkPositioner".
+    // See: https://github.com/remirror/remirror/blob/107cba/packages/remirror__extension-positioner/src/core-positioners.ts#L267
+    return Positioner.create({
+        hasChanged: hasStateChanged,
+        getActive: (props) => {
+            const { state, view } = props;
+            try {
+                const selection = getTextSelection(state.selection, state.doc);
+                const cursor = { from: view.coordsAtPos(selection.from), to: view.coordsAtPos(selection.to) };
+                const data = {
+                    isSelectionInView: isPositionVisible(getCursorRect(cursor.from), view.dom) ||
+                        isPositionVisible(getCursorRect(cursor.to), view.dom),
+                    cursor: cursor,
+                    visible: false,
+                    marks: {},
+                };
+                data.visible = !selection.empty && data.isSelectionInView;
+                types.forEach((type) => {
+                    const markRange = 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] : Positioner.EMPTY;
+            }
+            catch {
+                return 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 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);
+            return { rect, y: top, x: left, height, width, visible };
+        },
+    });
+};

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,3 @@
+export const getCursorRect = (coords) => {
+    return new DOMRect(coords.left, coords.top, 1, coords.top - coords.bottom);
+};

package/package.json

@@ -1,43 +1,51 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.12.0-alpha.9",
+  "version": "1.12.1-alpha.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
-    "dev": "vite",
+    "build": "vite build",
     "clean": "rimraf ./lib",
     "compile": "npm run clean && npm run compile:styles && npm run compile:code",
     "compile:code": "tsc",
     "compile:styles": "node build.js",
+    "dev": "vite",
     "preview": "vite preview",
-    "build": "vite build",
     "test": "jest",
-    "test:watch": "jest --watch",
-    "test:e2e": "vite build && vite preview --port 8080 & cypress open"
+    "test:e2e": "vite build && vite preview --port 8080 & cypress open",
+    "test:watch": "jest --watch"
   },
-  "files": [
-    "lib/**"
-  ],
   "dependencies": {
+    "@headlessui/react": "1.7.11",
     "@mui/icons-material": "5.11.0",
-    "@remirror/react": "2.0.25"
+    "@remirror/react": "2.0.25",
+    "clsx": "1.2.1",
+    "react-hook-form": "7.43.2"
   },
   "devDependencies": {
     "@testing-library/cypress": "9.0.0",
     "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "12.1.5",
+    "@testing-library/react": "14.0.0",
+    "@testing-library/user-event": "14.4.3",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
     "@vitejs/plugin-react": "3.0.0",
+    "autoprefixer": "10.4.13",
     "cypress": "12.5.1",
-    "eslint-config-prettier": "8.6.0",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-react": "7.32.2",
+    "jest": "29.4.1",
     "jest-environment-jsdom": "29.4.1",
+    "jest-remirror": "2.1.3",
+    "postcss": "8.4.21",
+    "postcss-nested": "6.0.0",
+    "postcss-prefix-selector": "1.16.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rimraf": "4.1.2",
+    "tailwindcss": "3.2.6",
+    "ts-jest": "29.0.5",
     "typescript": "4.9.3",
     "vite": "4.0.0"
   },
@@ -57,5 +65,6 @@
   },
   "volta": {
     "node": "16.19.0"
-  }
-}
+  },
+  "gitHead": "4a0c81e76ca50706d137dee82869e3ea7844376e"
+}

package/postcss.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: [
+    require('tailwindcss'),
+    require('autoprefixer'),
+    require('postcss-nested'),
+    require('postcss-prefix-selector')({
+      prefix: '.squiz-fte-scope',
+      exclude: ['.squiz-fte-scope__floating-popover'],
+      includeFiles: ['./src/index.scss'],
+    }),
+  ],
+};

package/src/Editor/Editor.mock.tsx

@@ -0,0 +1,43 @@
+import { Remirror, useRemirror, useRemirrorContext } from '@remirror/react';
+import React from 'react';
+import { Toolbar, FloatingToolbar } from '../EditorToolbar';
+import { Extensions } from '../Extensions/Extensions';
+
+type MockEditorProps = {
+  setContent?: any;
+};
+
+/**
+ * @deprecated Use "renderWithEditor" and render the specific component being tested instead.
+ */
+export const MockEditor = ({ setContent }: MockEditorProps) => {
+  const { manager, state, setState } = useRemirror({
+    extensions: Extensions,
+    selection: 'start',
+    stringHandler: 'html',
+  });
+
+  const Component = () => {
+    setContent && setContent.mockImplementation(useRemirrorContext().setContent);
+    return null;
+  };
+
+  const handleChange = (parameter: { state: any }) => {
+    setState(parameter.state);
+  };
+
+  return (
+    <Remirror
+      manager={manager}
+      onChange={handleChange}
+      placeholder="Write something"
+      label="Text editor"
+      state={state}
+      autoRender="start"
+    >
+      <Toolbar />
+      <Component />
+      <FloatingToolbar />
+    </Remirror>
+  );
+};