From 9e405670ca13cc821f5b9a944f7331888a3d42fa Mon Sep 17 00:00:00 2001 From: thecodrr Date: Mon, 20 Jun 2022 10:52:20 +0500 Subject: [PATCH] fix: replace action sheet with custom implementation --- .../dist/components/actionsheet/index.d.ts | 2 +- .../dist/components/actionsheet/index.js | 140 +++-- packages/editor/dist/components/button.d.ts | 3 +- packages/editor/dist/components/button.js | 55 +- .../dist/components/inlineinput/index.d.ts | 1 + .../dist/components/menu/menubutton.d.ts | 1 + .../editor/dist/components/menu/menubutton.js | 2 +- .../dist/components/menu/menuseparator.d.ts | 1 + .../editor/dist/components/menu/types.d.ts | 1 + .../dist/components/popuppresenter/index.d.ts | 5 +- .../dist/components/popuppresenter/index.js | 13 +- .../editor/dist/components/toggle/index.d.ts | 1 + .../dist/extensions/attachment/component.d.ts | 1 + .../dist/extensions/codeblock/component.d.ts | 1 + .../dist/extensions/codeblock/component.js | 20 +- .../dist/extensions/embed/component.d.ts | 1 + .../dist/extensions/image/component.d.ts | 1 + .../extensions/outlinelist/component.d.ts | 1 + .../extensions/outlinelistitem/component.d.ts | 1 + .../extensions/react/reactportalprovider.d.ts | 2 +- .../dist/extensions/taskitem/component.d.ts | 1 + .../dist/extensions/tasklist/component.d.ts | 1 + .../dist/toolbar/components/counter.d.ts | 1 + .../editor/dist/toolbar/components/counter.js | 2 +- .../editor/dist/toolbar/components/icon.d.ts | 1 + .../dist/toolbar/components/moretools.d.ts | 1 + .../dist/toolbar/components/moretools.js | 9 +- .../dist/toolbar/components/splitbutton.js | 2 +- .../dist/toolbar/components/toolbargroup.d.ts | 6 +- .../dist/toolbar/components/toolbutton.js | 4 +- .../dist/toolbar/floatingmenus/index.d.ts | 1 + packages/editor/dist/toolbar/icons.js | 235 +++----- .../dist/toolbar/popups/cellproperties.d.ts | 1 + .../dist/toolbar/popups/colorpicker.d.ts | 1 + .../editor/dist/toolbar/popups/colorpicker.js | 2 +- .../dist/toolbar/popups/embedpopup.d.ts | 1 + .../dist/toolbar/popups/imageproperties.d.ts | 1 + .../dist/toolbar/popups/imageupload.d.ts | 1 + .../editor/dist/toolbar/popups/imageupload.js | 2 +- .../editor/dist/toolbar/popups/linkpopup.d.ts | 1 + .../dist/toolbar/popups/searchreplace.d.ts | 1 + .../dist/toolbar/popups/tablepopup.d.ts | 1 + packages/editor/dist/toolbar/toolbar.d.ts | 1 + .../editor/dist/toolbar/tools/alignment.d.ts | 1 + packages/editor/dist/toolbar/tools/block.d.ts | 1 + packages/editor/dist/toolbar/tools/block.js | 2 +- .../editor/dist/toolbar/tools/colors.d.ts | 1 + packages/editor/dist/toolbar/tools/font.d.ts | 1 + .../editor/dist/toolbar/tools/headings.d.ts | 1 + .../editor/dist/toolbar/tools/inline.d.ts | 1 + packages/editor/dist/toolbar/tools/lists.d.ts | 1 + packages/editor/dist/toolbar/tools/table.d.ts | 1 + .../dist/toolbar/tools/textdirection.d.ts | 1 + packages/editor/dist/toolbar/tools/utils.d.ts | 1 + packages/editor/package-lock.json | 512 ++---------------- packages/editor/package.json | 11 +- .../src/components/action-sheet/index.tsx | 214 ++++++-- packages/editor/src/components/button.tsx | 65 ++- .../src/components/menu/menu-button.tsx | 2 +- .../src/components/popup-presenter/index.tsx | 18 +- .../src/extensions/code-block/component.tsx | 22 +- .../src/extensions/list-item/list-item.ts | 3 - .../src/extensions/outline-list/component.tsx | 15 +- packages/editor/src/index.ts | 8 +- .../editor/src/toolbar/components/counter.tsx | 2 +- .../src/toolbar/components/more-tools.tsx | 9 +- .../src/toolbar/components/split-button.tsx | 2 +- .../src/toolbar/components/tool-button.tsx | 5 +- .../src/toolbar/floating-menus/index.tsx | 7 - .../src/toolbar/popups/color-picker.tsx | 2 +- .../src/toolbar/popups/image-upload.tsx | 2 +- packages/editor/src/toolbar/tools/block.tsx | 2 +- packages/editor/src/toolbar/tools/image.tsx | 19 +- 73 files changed, 612 insertions(+), 850 deletions(-) diff --git a/packages/editor/dist/components/actionsheet/index.d.ts b/packages/editor/dist/components/actionsheet/index.d.ts index 09b4627e5..c172db20d 100644 --- a/packages/editor/dist/components/actionsheet/index.d.ts +++ b/packages/editor/dist/components/actionsheet/index.d.ts @@ -8,4 +8,4 @@ export declare type ActionSheetPresenterProps = { focusOnRender?: boolean; title?: string; }; -export declare function ActionSheetPresenter(props: PropsWithChildren): JSX.Element; +export declare function ActionSheetPresenter(props: PropsWithChildren): JSX.Element | null; diff --git a/packages/editor/dist/components/actionsheet/index.js b/packages/editor/dist/components/actionsheet/index.js index c594d47d5..6937f9e0f 100644 --- a/packages/editor/dist/components/actionsheet/index.js +++ b/packages/editor/dist/components/actionsheet/index.js @@ -25,15 +25,24 @@ var __read = (this && this.__read) || function (o, n) { } return ar; }; -import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; +import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; import React, { useCallback, useRef, useState } from "react"; import { useTheme } from "emotion-theming"; -import Sheet from "react-modal-sheet"; -import { Button, Flex, Text } from "rebass"; +import { Box, Button, Flex, Text } from "rebass"; import { Icon } from "../../toolbar/components/icon"; import { Icons } from "../../toolbar/icons"; import { MenuButton } from "../menu/menu-button"; import { MenuSeparator } from "../menu/menu-separator"; +import Modal from "react-modal"; +import { motion, useMotionValue, useTransform, useAnimation, } from "framer-motion"; +var AnimatedFlex = motion(Flex); +var TRANSITION = { + type: "spring", + stiffness: 300, + damping: 30, + mass: 0.2, + duration: 300, +}; function useHistory(initial) { var _a = __read(useState(initial), 2), current = _a[0], setCurrent = _a[1]; var _b = __read(useState(false), 2), canGoBack = _b[0], setCanGoBack = _b[1]; @@ -58,45 +67,98 @@ function useHistory(initial) { return { current: current, goBack: goBack, navigate: navigate, canGoBack: canGoBack }; } export function ActionSheetPresenter(props) { - var isOpen = props.isOpen, title = props.title, items = props.items, onClose = props.onClose, _a = props.blocking, blocking = _a === void 0 ? true : _a, _b = props.focusOnRender, focusOnRender = _b === void 0 ? true : _b, children = props.children; + var _a; + var isOpen = props.isOpen, title = props.title, items = props.items, onClose = props.onClose, _b = props.blocking, blocking = _b === void 0 ? true : _b, _c = props.focusOnRender, focusOnRender = _c === void 0 ? true : _c, children = props.children; var theme = useTheme(); var contentRef = useRef(); var focusedElement = useRef(); - // hijack the back button temporarily for a more native experience - // on mobile phones. - var onPopState = useCallback(function (e) { - if (onClose) { - onClose(); - e.preventDefault(); - return true; - } - }, [isOpen, onClose]); - return (_jsxs(Sheet, __assign({ isOpen: isOpen, onClose: onClose || (function () { }), springConfig: { - stiffness: 300, - damping: 30, - mass: 0.2, - duration: 300, - }, onOpenStart: function () { - var _a; - window.addEventListener("popstate", onPopState); - window.addEventListener("beforeunload", onPopState); - if (focusOnRender) { - focusedElement.current = - document.activeElement || undefined; - (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); - } - }, onCloseEnd: function () { - var _a; - window.removeEventListener("popstate", onPopState); - window.removeEventListener("beforeunload", onPopState); - if (focusOnRender) { - (_a = focusedElement.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); - } - } }, { children: [_jsxs(Sheet.Container, __assign({ style: { - borderTopLeftRadius: 15, - borderTopRightRadius: 15, - boxShadow: theme.shadows.menu, - } }, { children: [_jsx(Sheet.Header, { disableDrag: !onClose }), _jsxs(Sheet.Content, { children: [_jsx("div", { id: "action-sheet-focus", ref: function (ref) { return (contentRef.current = ref || undefined); }, tabIndex: -1 }), _jsx(ContentContainer, __assign({ items: items, title: title, onClose: onClose }, { children: children }))] })] })), blocking ? (_jsx(Sheet.Backdrop, { style: { border: "none" }, onTap: onClose })) : (_jsx(_Fragment, {}))] }))); + var y = useMotionValue(0); + var opacity = useTransform(y, [0, ((_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || window.innerHeight], [1, 0]); + var animation = useAnimation(); + var onBeforeClose = useCallback(function () { + var _a; + var height = ((_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || window.innerHeight; + setTimeout(function () { + onClose === null || onClose === void 0 ? void 0 : onClose(); + }, TRANSITION.duration - 50); + animation.start({ + transition: TRANSITION, + y: height + 100, + }); + }, [animation, onClose, contentRef.current]); + if (!isOpen) + return null; + return (_jsx(Modal, __assign({ contentRef: function (ref) { return (contentRef.current = ref); }, className: "bottom-sheet-presenter", role: "menu", isOpen: isOpen, appElement: document.body, shouldCloseOnEsc: blocking, shouldReturnFocusAfterClose: focusOnRender, shouldCloseOnOverlayClick: blocking, shouldFocusAfterRender: focusOnRender, ariaHideApp: blocking, preventScroll: blocking, onRequestClose: function () { return onBeforeClose(); }, portalClassName: "bottom-sheet-presenter-portal", onAfterOpen: function () { + animation.start({ transition: TRANSITION, y: 0 }); + }, overlayElement: function (props, contentEl) { + return (_jsxs(Box, __assign({}, props, { + //@ts-ignore + style: __assign(__assign({}, props.style), { + // position: blocking ? "initial" : "fixed", + zIndex: 1000, backgroundColor: "unset" }), tabIndex: -1 }, { children: [_jsx(motion.div, { style: { + height: "100%", + width: "100%", + opacity: opacity, + position: "absolute", + backgroundColor: blocking ? "var(--overlay)" : "transparent", + }, tabIndex: -1 }), contentEl] }))); + }, contentElement: function (props, children) { return (_jsx(Box, __assign({}, props, { style: {}, sx: { + // top: 0, + left: 0, + right: 0, + bottom: 0, + display: "flex", + width: "auto", + height: "fit-content", + position: "fixed", + backgroundColor: "transparent", + padding: 0, + zIndex: 0, + outline: 0, + isolation: "isolate", + } }, { children: children }))); } }, { children: _jsxs(AnimatedFlex, __assign({ animate: animation, style: { y: y }, initial: { y: 1000 }, sx: { + bg: "background", + borderTopLeftRadius: 15, + borderTopRightRadius: 15, + boxShadow: theme.shadows.menu, + flex: 1, + flexDirection: "column", + } }, { children: [_jsx(AnimatedFlex, __assign({ drag: "y", + // @ts-ignore + onDrag: function (_, _a) { + var delta = _a.delta; + y.set(Math.max(y.get() + delta.y, 0)); + }, + // @ts-ignore + onDragEnd: function (_, _a) { + var velocity = _a.velocity; + if (velocity.y >= 500) { + onClose === null || onClose === void 0 ? void 0 : onClose(); + return; + } + var sheetEl = contentRef.current; + var contentHeight = sheetEl.offsetHeight; + var threshold = 30; + var closingHeight = (contentHeight * threshold) / 100; + if (y.get() >= closingHeight) { + onBeforeClose(); + } + else { + animation.start({ transition: TRANSITION, y: 0 }); + } + }, onAnimationComplete: function () { + console.log("ED!"); + }, dragConstraints: { top: 0, bottom: 0 }, dragMomentum: false, dragElastic: false, sx: { + bg: "transparent", + alignItems: "center", + justifyContent: "center", + p: 2, + } }, { children: _jsx(Box, { id: "pill", sx: { + backgroundColor: "hover", + width: 60, + height: 8, + borderRadius: 100, + } }) })), _jsx(ContentContainer, __assign({ items: items, title: title, onClose: onClose }, { children: children }))] })) }))); } function ContentContainer(props) { var _a; diff --git a/packages/editor/dist/components/button.d.ts b/packages/editor/dist/components/button.d.ts index c709903b8..14d40d032 100644 --- a/packages/editor/dist/components/button.d.ts +++ b/packages/editor/dist/components/button.d.ts @@ -1,2 +1,3 @@ +/// import { ButtonProps } from "rebass"; -export default function Button(props: ButtonProps): JSX.Element; +export declare function Button(props: ButtonProps): JSX.Element; diff --git a/packages/editor/dist/components/button.js b/packages/editor/dist/components/button.js index 4f16dcd23..3a331b19a 100644 --- a/packages/editor/dist/components/button.js +++ b/packages/editor/dist/components/button.js @@ -11,26 +11,45 @@ var __assign = (this && this.__assign) || function () { }; import { jsx as _jsx } from "react/jsx-runtime"; import { useCallback, useRef } from "react"; +import { useEffect } from "react"; import { Button as RebassButton } from "rebass"; -export default function Button(props) { +export function Button(props) { + var buttonRef = useRef(); var touchStartTime = useRef(0); - var onTouchEnd = useCallback(function (e) { - e.preventDefault(); - var now = Date.now(); - setTimeout(function () { - if (touchStartTime.current === 0) - return; - if (now - touchStartTime.current > 300) - return; - //@ts-ignore - props.onClick(e); - }, 1); - }, []); - var onTouchStart = useCallback(function (e) { - touchStartTime.current = Date.now(); + useEffect(function () { + if (!buttonRef.current) + return; + buttonRef.current.addEventListener("mousedown", onMouseDown, { + passive: false, + capture: true, + }); + return function () { + var _a; + (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("mousedown", onMouseDown, { + capture: true, + }); + }; + }, [buttonRef.current]); + var onMouseDown = useCallback(function (e) { + console.log("Preventing"); e.preventDefault(); }, []); - return (_jsx(RebassButton, __assign({}, props, { onClick: props.onClick, onMouseDown: function (e) { return e.preventDefault(); }, onTouchEnd: onTouchEnd, onTouchMove: function () { - touchStartTime.current = 0; - }, onTouchStart: onTouchStart }))); + // const onTouchEnd = useCallback((e) => { + // e.preventDefault(); + // const now = Date.now(); + // setTimeout(() => { + // if (touchStartTime.current === 0) return; + // if (now - touchStartTime.current > 300) return; + // //@ts-ignore + // props.onClick(e); + // }, 1); + // }, []); + // const onTouchStart = useCallback((e) => { + // touchStartTime.current = Date.now(); + // e.preventDefault(); + // }, []); + return (_jsx(RebassButton, __assign({}, props, { ref: function (ref) { + buttonRef.current = ref; + // props.ref = ref; + }, onClick: props.onClick, onMouseDown: function () { } }))); } diff --git a/packages/editor/dist/components/inlineinput/index.d.ts b/packages/editor/dist/components/inlineinput/index.d.ts index 6fe199c28..d9936bb07 100644 --- a/packages/editor/dist/components/inlineinput/index.d.ts +++ b/packages/editor/dist/components/inlineinput/index.d.ts @@ -1,3 +1,4 @@ +/// import { InputProps } from "@rebass/forms"; import { FlexProps } from "rebass"; declare type LabelInputProps = InputProps & { diff --git a/packages/editor/dist/components/menu/menubutton.d.ts b/packages/editor/dist/components/menu/menubutton.d.ts index 08c28f9f0..11b6437af 100644 --- a/packages/editor/dist/components/menu/menubutton.d.ts +++ b/packages/editor/dist/components/menu/menubutton.d.ts @@ -1,3 +1,4 @@ +/// import { MenuButton } from "./types"; declare type MenuButtonProps = { item: MenuButton; diff --git a/packages/editor/dist/components/menu/menubutton.js b/packages/editor/dist/components/menu/menubutton.js index d4bfdd996..39aa4286c 100644 --- a/packages/editor/dist/components/menu/menubutton.js +++ b/packages/editor/dist/components/menu/menubutton.js @@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () { import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; import { useRef } from "react"; import { Flex, Text } from "rebass"; -import Button from "../button"; +import { Button } from "../button"; import { Icon } from "../../toolbar/components/icon"; import { Icons } from "../../toolbar/icons"; import { useToolbarLocation } from "../../toolbar/stores/toolbar-store"; diff --git a/packages/editor/dist/components/menu/menuseparator.d.ts b/packages/editor/dist/components/menu/menuseparator.d.ts index 64c18f323..14ee7a7d6 100644 --- a/packages/editor/dist/components/menu/menuseparator.d.ts +++ b/packages/editor/dist/components/menu/menuseparator.d.ts @@ -1 +1,2 @@ +/// export declare function MenuSeparator(): JSX.Element; diff --git a/packages/editor/dist/components/menu/types.d.ts b/packages/editor/dist/components/menu/types.d.ts index 2a7e56262..82ecdffe2 100644 --- a/packages/editor/dist/components/menu/types.d.ts +++ b/packages/editor/dist/components/menu/types.d.ts @@ -1,3 +1,4 @@ +/// import { IconNames } from "../../toolbar/icons"; declare type MenuItemComponentProps = { onClick?: (e?: any) => void; diff --git a/packages/editor/dist/components/popuppresenter/index.d.ts b/packages/editor/dist/components/popuppresenter/index.d.ts index 869d13772..1d11d6603 100644 --- a/packages/editor/dist/components/popuppresenter/index.d.ts +++ b/packages/editor/dist/components/popuppresenter/index.d.ts @@ -2,6 +2,7 @@ import { PropsWithChildren } from "react"; import { PositionOptions } from "../../utils/position"; import { Theme } from "@notesnook/theme"; import React from "react"; +import { ResponsivePresenterProps } from "../responsive"; export declare type PopupPresenterProps = { isOpen: boolean; onClose: () => void; @@ -10,7 +11,7 @@ export declare type PopupPresenterProps = { focusOnRender?: boolean; movable?: boolean; }; -export declare function PopupPresenter(props: PropsWithChildren): JSX.Element; +export declare function PopupPresenter(props: PropsWithChildren): JSX.Element | null; export declare type PopupWrapperProps = { id: string; group: string; @@ -23,6 +24,6 @@ export declare function PopupWrapper(props: PopupWrapperProps): null; declare type ShowPopupOptions = { theme: Theme; popup: (closePopup: () => void) => React.ReactNode; -} & Partial; +} & Partial; export declare function showPopup(options: ShowPopupOptions): void; export {}; diff --git a/packages/editor/dist/components/popuppresenter/index.js b/packages/editor/dist/components/popuppresenter/index.js index 3c8ce5b4a..e83005d72 100644 --- a/packages/editor/dist/components/popuppresenter/index.js +++ b/packages/editor/dist/components/popuppresenter/index.js @@ -30,7 +30,8 @@ import { ThemeProvider } from "emotion-theming"; import { getPopupContainer, getToolbarElement } from "../../toolbar/utils/dom"; import { useToolbarStore } from "../../toolbar/stores/toolbar-store"; import { EditorContext, usePopupRenderer, } from "./popuprenderer"; -export function PopupPresenter(props) { +import { ResponsivePresenter } from "../responsive"; +function _PopupPresenter(props) { var isOpen = props.isOpen, position = props.position, onClose = props.onClose, _a = props.blocking, blocking = _a === void 0 ? true : _a, _b = props.focusOnRender, focusOnRender = _b === void 0 ? true : _b, children = props.children; var contentRef = useRef(); var observerRef = useRef(); @@ -136,6 +137,14 @@ export function PopupPresenter(props) { }, } }, { children: children }))); } +export function PopupPresenter(props) { + // HACK: we don't want to render the popup presenter for no reason + // including it's effects etc. so we just wrap it and return null + // if the popup is closed. + if (!props.isOpen) + return null; + return _jsx(_PopupPresenter, __assign({}, props)); +} export function PopupWrapper(props) { var id = props.id, group = props.group, position = props.position, renderPopup = props.renderPopup, isOpen = props.isOpen, onClosed = props.onClosed, presenterProps = __rest(props, ["id", "group", "position", "renderPopup", "isOpen", "onClosed"]); var closePopup = useToolbarStore(function (store) { return store.closePopup; }); @@ -189,7 +198,7 @@ export function showPopup(options) { function hide() { ReactDOM.unmountComponentAtNode(getPopupContainer()); } - ReactDOM.render(_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(PopupPresenter, __assign({ isOpen: true, onClose: hide, position: { + ReactDOM.render(_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(ResponsivePresenter, __assign({ isOpen: true, onClose: hide, position: { target: getToolbarElement(), isTargetAbsolute: true, location: "below", diff --git a/packages/editor/dist/components/toggle/index.d.ts b/packages/editor/dist/components/toggle/index.d.ts index d6e492445..38abf648a 100644 --- a/packages/editor/dist/components/toggle/index.d.ts +++ b/packages/editor/dist/components/toggle/index.d.ts @@ -1,3 +1,4 @@ +/// import { ToggleProps } from "react-toggle"; import "react-toggle/style.css"; export declare function Toggle(props: ToggleProps): JSX.Element; diff --git a/packages/editor/dist/extensions/attachment/component.d.ts b/packages/editor/dist/extensions/attachment/component.d.ts index 1585e67b8..ea57c55f9 100644 --- a/packages/editor/dist/extensions/attachment/component.d.ts +++ b/packages/editor/dist/extensions/attachment/component.d.ts @@ -1,3 +1,4 @@ +/// import { AttachmentWithProgress } from "./attachment"; import { SelectionBasedReactNodeViewProps } from "../react"; export declare function AttachmentComponent(props: SelectionBasedReactNodeViewProps): JSX.Element; diff --git a/packages/editor/dist/extensions/codeblock/component.d.ts b/packages/editor/dist/extensions/codeblock/component.d.ts index 54e13f8bb..e46355fa2 100644 --- a/packages/editor/dist/extensions/codeblock/component.d.ts +++ b/packages/editor/dist/extensions/codeblock/component.d.ts @@ -1,3 +1,4 @@ +/// import "prism-themes/themes/prism-dracula.min.css"; import { CodeBlockAttributes } from "./code-block"; import { ReactNodeViewProps } from "../react/types"; diff --git a/packages/editor/dist/extensions/codeblock/component.js b/packages/editor/dist/extensions/codeblock/component.js index 42a765f77..784a22df8 100644 --- a/packages/editor/dist/extensions/codeblock/component.js +++ b/packages/editor/dist/extensions/codeblock/component.js @@ -66,13 +66,14 @@ import { useEffect, useRef, useState } from "react"; import { isLanguageLoaded, loadLanguage } from "./loader"; import { refractor } from "refractor/lib/core"; import "prism-themes/themes/prism-dracula.min.css"; -import { Button, Flex, Text } from "rebass"; +import { Flex, Text } from "rebass"; import Languages from "./languages.json"; import { Input } from "@rebass/forms"; import { Icon } from "../../toolbar/components/icon"; import { Icons } from "../../toolbar/icons"; import { ResponsivePresenter } from "../../components/responsive"; import { Popup } from "../../toolbar/components/popup"; +import { Button } from "../../components/button"; export function CodeblockComponent(props) { var editor = props.editor, updateAttributes = props.updateAttributes, node = props.node, forwardRef = props.forwardRef; var _a = node === null || node === void 0 ? void 0 : node.attrs, language = _a.language, indentLength = _a.indentLength, indentType = _a.indentType, caretPosition = _a.caretPosition; @@ -141,7 +142,18 @@ export function CodeblockComponent(props) { mr: 1, bg: isOpen ? "codeSelection" : "transparent", ":hover": { bg: "codeSelection" }, - }, onClick: function () { return setIsOpen(true); }, title: "Change language" }, { children: _jsx(Text, __assign({ variant: "subBody", spellCheck: false, sx: { color: "codeFg" } }, { children: (languageDefinition === null || languageDefinition === void 0 ? void 0 : languageDefinition.title) || "Plaintext" })) }))] }))] })), _jsx(ResponsivePresenter, __assign({ isOpen: isOpen, onClose: function () { return setIsOpen(false); }, mobile: "sheet", desktop: "menu", position: { + }, onClick: function () { + setIsOpen(true); + }, title: "Change language" }, { children: _jsx(Text, __assign({ variant: "subBody", spellCheck: false, sx: { color: "codeFg" } }, { children: (languageDefinition === null || languageDefinition === void 0 ? void 0 : languageDefinition.title) || "Plaintext" })) }))] }))] })), _jsx(ResponsivePresenter, __assign({ isOpen: isOpen, onClose: function () { + setIsOpen(false); + // NOTE: for some reason the language selection action sheet + // does not return focus to the last focused position after + // closing. We have to set focusOnRender=false & manually + // restore focus. I think this has something to do with custom + // node views. + // TRY: perhaps use SelectionBasedReactNodeView? + editor.commands.focus(); + }, focusOnRender: false, mobile: "sheet", desktop: "menu", position: { target: toolbarRef.current || undefined, align: "end", isTargetAbsolute: true, @@ -161,7 +173,9 @@ function LanguageSelector(props) { width: ["auto", 300], overflowY: "auto", bg: "background", - } }, { children: [_jsx(Input, { autoFocus: true, placeholder: "Search languages", sx: { + } }, { children: [_jsx(Input, { onFocus: function () { + console.log("EHLLO!"); + }, autoFocus: true, placeholder: "Search languages", sx: { width: "auto", position: "sticky", top: 0, diff --git a/packages/editor/dist/extensions/embed/component.d.ts b/packages/editor/dist/extensions/embed/component.d.ts index 6b4aa04c8..65b1ee648 100644 --- a/packages/editor/dist/extensions/embed/component.d.ts +++ b/packages/editor/dist/extensions/embed/component.d.ts @@ -1,3 +1,4 @@ +/// import { EmbedAlignmentOptions, EmbedAttributes } from "./embed"; import { SelectionBasedReactNodeViewProps } from "../react"; export declare function EmbedComponent(props: SelectionBasedReactNodeViewProps): JSX.Element; diff --git a/packages/editor/dist/extensions/image/component.d.ts b/packages/editor/dist/extensions/image/component.d.ts index 4e3970cae..0ae7c84cd 100644 --- a/packages/editor/dist/extensions/image/component.d.ts +++ b/packages/editor/dist/extensions/image/component.d.ts @@ -1,3 +1,4 @@ +/// import { ImageAlignmentOptions, ImageAttributes } from "./image"; import { SelectionBasedReactNodeViewProps } from "../react"; export declare function ImageComponent(props: SelectionBasedReactNodeViewProps): JSX.Element; diff --git a/packages/editor/dist/extensions/outlinelist/component.d.ts b/packages/editor/dist/extensions/outlinelist/component.d.ts index 4e37de99d..2e64b6e02 100644 --- a/packages/editor/dist/extensions/outlinelist/component.d.ts +++ b/packages/editor/dist/extensions/outlinelist/component.d.ts @@ -1,3 +1,4 @@ +/// import { ReactNodeViewProps } from "../react"; import { OutlineListAttributes } from "./outline-list"; export declare function OutlineListComponent(props: ReactNodeViewProps): JSX.Element; diff --git a/packages/editor/dist/extensions/outlinelistitem/component.d.ts b/packages/editor/dist/extensions/outlinelistitem/component.d.ts index ceb4e3fd3..26d37f4a2 100644 --- a/packages/editor/dist/extensions/outlinelistitem/component.d.ts +++ b/packages/editor/dist/extensions/outlinelistitem/component.d.ts @@ -1,2 +1,3 @@ +/// import { ReactNodeViewProps } from "../react"; export declare function OutlineListItemComponent(props: ReactNodeViewProps): JSX.Element; diff --git a/packages/editor/dist/extensions/react/reactportalprovider.d.ts b/packages/editor/dist/extensions/react/reactportalprovider.d.ts index 62e1d0f5c..b3df1ee34 100644 --- a/packages/editor/dist/extensions/react/reactportalprovider.d.ts +++ b/packages/editor/dist/extensions/react/reactportalprovider.d.ts @@ -23,7 +23,7 @@ export declare class PortalProvider extends React.Component import { ReactNodeViewProps } from "../react"; import { TaskItemAttributes } from "./task-item"; export declare function TaskItemComponent(props: ReactNodeViewProps): JSX.Element; diff --git a/packages/editor/dist/extensions/tasklist/component.d.ts b/packages/editor/dist/extensions/tasklist/component.d.ts index 117e0bb94..5cc94955c 100644 --- a/packages/editor/dist/extensions/tasklist/component.d.ts +++ b/packages/editor/dist/extensions/tasklist/component.d.ts @@ -1,3 +1,4 @@ +/// import { ReactNodeViewProps } from "../react"; import { TaskListAttributes } from "./task-list"; export declare function TaskListComponent(props: ReactNodeViewProps): JSX.Element; diff --git a/packages/editor/dist/toolbar/components/counter.d.ts b/packages/editor/dist/toolbar/components/counter.d.ts index 824fbbcda..1cf4a9015 100644 --- a/packages/editor/dist/toolbar/components/counter.d.ts +++ b/packages/editor/dist/toolbar/components/counter.d.ts @@ -1,3 +1,4 @@ +/// export declare type CounterProps = { title: string; onIncrease: () => void; diff --git a/packages/editor/dist/toolbar/components/counter.js b/packages/editor/dist/toolbar/components/counter.js index f31b7a0d8..682495755 100644 --- a/packages/editor/dist/toolbar/components/counter.js +++ b/packages/editor/dist/toolbar/components/counter.js @@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () { }; import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; import { Flex, Text } from "rebass"; -import Button from "../../components/button"; +import { Button } from "../../components/button"; import { ToolButton } from "./tool-button"; export function Counter(props) { var title = props.title, onDecrease = props.onDecrease, onIncrease = props.onIncrease, onReset = props.onReset, value = props.value; diff --git a/packages/editor/dist/toolbar/components/icon.d.ts b/packages/editor/dist/toolbar/components/icon.d.ts index b93bea97a..2cf292b4a 100644 --- a/packages/editor/dist/toolbar/components/icon.d.ts +++ b/packages/editor/dist/toolbar/components/icon.d.ts @@ -1,3 +1,4 @@ +/// import { Theme } from "@notesnook/theme"; import { SchemeColors } from "@notesnook/theme/dist/theme/colorscheme"; import { FlexProps } from "rebass"; diff --git a/packages/editor/dist/toolbar/components/moretools.d.ts b/packages/editor/dist/toolbar/components/moretools.d.ts index b66ef7eb6..76d87de17 100644 --- a/packages/editor/dist/toolbar/components/moretools.d.ts +++ b/packages/editor/dist/toolbar/components/moretools.d.ts @@ -1,3 +1,4 @@ +/// import { ToolProps } from "../types"; import { ToolId } from "../tools"; declare type MoreToolsProps = ToolProps & { diff --git a/packages/editor/dist/toolbar/components/moretools.js b/packages/editor/dist/toolbar/components/moretools.js index 500d98d1f..e53313de4 100644 --- a/packages/editor/dist/toolbar/components/moretools.js +++ b/packages/editor/dist/toolbar/components/moretools.js @@ -46,8 +46,13 @@ export function MoreTools(props) { yOffset: isBottom ? 10 : 5, }, focusOnRender: false, blocking: false, renderPopup: function () { return (_jsx(ToolbarGroup, { tools: tools, editor: editor, sx: { flex: 1, - px: isBottom ? 0 : 1, - height: "50px", + p: 1, + // TODO: we cannot put a fix height here + // since it differs from platform to platform. + // perhaps we can use a expose a custom css class + // or extend the theme. + // px: isBottom ? 0 : 1, + // height: "50px", boxShadow: "menu", bg: "background", borderRadius: "default", diff --git a/packages/editor/dist/toolbar/components/splitbutton.js b/packages/editor/dist/toolbar/components/splitbutton.js index 03d2657a8..3a697199d 100644 --- a/packages/editor/dist/toolbar/components/splitbutton.js +++ b/packages/editor/dist/toolbar/components/splitbutton.js @@ -27,7 +27,7 @@ import { Icons } from "../icons"; import { Icon } from "./icon"; import { ToolButton } from "./tool-button"; import { useToolbarLocation } from "../stores/toolbar-store"; -import Button from "../../components/button"; +import { Button } from "../../components/button"; export function SplitButton(props) { var children = props.children, toggled = props.toggled, onOpen = props.onOpen, toolButtonProps = __rest(props, ["children", "toggled", "onOpen"]); var ref = useRef(null); diff --git a/packages/editor/dist/toolbar/components/toolbargroup.d.ts b/packages/editor/dist/toolbar/components/toolbargroup.d.ts index 559edaead..4e13e964c 100644 --- a/packages/editor/dist/toolbar/components/toolbargroup.d.ts +++ b/packages/editor/dist/toolbar/components/toolbargroup.d.ts @@ -3,8 +3,8 @@ import { ToolbarGroupDefinition, ToolButtonVariant } from "../types"; import { FlexProps } from "rebass"; import { Editor } from "@tiptap/core"; export declare type ToolbarGroupProps = FlexProps & { - tools: ToolbarGroupDefinition; - editor: Editor; - variant?: ToolButtonVariant; + tools: ToolbarGroupDefinition; + editor: Editor; + variant?: ToolButtonVariant; }; export declare function ToolbarGroup(props: ToolbarGroupProps): JSX.Element; diff --git a/packages/editor/dist/toolbar/components/toolbutton.js b/packages/editor/dist/toolbar/components/toolbutton.js index da88b3920..7aa98ce4d 100644 --- a/packages/editor/dist/toolbar/components/toolbutton.js +++ b/packages/editor/dist/toolbar/components/toolbutton.js @@ -22,11 +22,11 @@ var __rest = (this && this.__rest) || function (s, e) { }; import { jsx as _jsx } from "react/jsx-runtime"; import { Icons } from "../icons"; -import Button from "../../components/button"; +import { Button } from "../../components/button"; import { Icon } from "./icon"; export function ToolButton(props) { var id = props.id, icon = props.icon, iconSize = props.iconSize, iconColor = props.iconColor, toggled = props.toggled, sx = props.sx, buttonRef = props.buttonRef, _a = props.variant, variant = _a === void 0 ? "normal" : _a, buttonProps = __rest(props, ["id", "icon", "iconSize", "iconColor", "toggled", "sx", "buttonRef", "variant"]); - return (_jsx(Button, __assign({ ref: buttonRef, tabIndex: -1, id: "tool-".concat(id), sx: __assign({ flexShrink: 0, p: variant === "small" ? "small" : 1, borderRadius: variant === "small" ? "small" : "default", m: 0, bg: toggled ? "hover" : "transparent", mr: variant === "small" ? 0 : 1, ":hover": { bg: ["transparent", "hover"] }, ":last-of-type": { + return (_jsx(Button, __assign({ ref: buttonRef, tabIndex: -1, id: "tool-".concat(id || icon), sx: __assign({ flexShrink: 0, p: variant === "small" ? "small" : 1, borderRadius: variant === "small" ? "small" : "default", m: 0, bg: toggled ? "hover" : "transparent", mr: variant === "small" ? 0 : 1, ":hover": { bg: ["transparent", "hover"] }, ":active": { bg: "hover" }, ":last-of-type": { mr: 0, } }, sx), onMouseDown: function (e) { return e.preventDefault(); } }, buttonProps, { children: _jsx(Icon, { path: Icons[icon], color: iconColor || "icon", size: iconSize || variant === "small" ? "medium" : "big" }) }))); } diff --git a/packages/editor/dist/toolbar/floatingmenus/index.d.ts b/packages/editor/dist/toolbar/floatingmenus/index.d.ts index 62d6f695a..b02c024c2 100644 --- a/packages/editor/dist/toolbar/floatingmenus/index.d.ts +++ b/packages/editor/dist/toolbar/floatingmenus/index.d.ts @@ -1,2 +1,3 @@ +/// import { FloatingMenuProps } from "./types"; export declare function EditorFloatingMenus(props: FloatingMenuProps): JSX.Element; diff --git a/packages/editor/dist/toolbar/icons.js b/packages/editor/dist/toolbar/icons.js index ba42952ff..17a234a15 100644 --- a/packages/editor/dist/toolbar/icons.js +++ b/packages/editor/dist/toolbar/icons.js @@ -1,158 +1,81 @@ -import { - mdiAttachment, - mdiBorderHorizontal, - mdiCheck, - mdiChevronDown, - mdiCodeBraces, - mdiCodeTags, - mdiDotsVertical, - mdiFormatAlignCenter, - mdiFormatAlignJustify, - mdiFormatAlignLeft, - mdiFormatAlignRight, - mdiFormatBold, - mdiFormatClear, - mdiFormatColorHighlight, - mdiFormatColorText, - mdiFormatItalic, - mdiFormatListBulleted, - mdiFormatListNumbered, - mdiFormatQuoteClose, - mdiFormatStrikethrough, - mdiFormatSubscript, - mdiFormatSuperscript, - mdiFormatTextdirectionLToR, - mdiFormatTextdirectionRToL, - mdiFormatUnderline, - mdiImage, - mdiInvertColorsOff, - mdiLinkPlus, - mdiLoading, - mdiTable, - mdiTableBorder, - mdiTableRowPlusAfter, - mdiTableRowPlusBefore, - mdiTableRowRemove, - mdiTableColumnPlusAfter, - mdiTableColumnPlusBefore, - mdiTableColumnRemove, - mdiUploadOutline, - mdiPlus, - mdiFormatColorFill, - mdiClose, - mdiSortDescending, - mdiArrowExpandRight, - mdiArrowExpandLeft, - mdiArrowExpandDown, - mdiArrowExpandUp, - mdiTableMergeCells, - mdiTableSplitCell, - mdiDeleteOutline, - mdiDownloadOutline, - mdiFormatListCheckbox, - mdiDrag, - mdiCheckboxMarkedOutline, - mdiChevronUp, - mdiArrowUp, - mdiArrowDown, - mdiRegex, - mdiFormatLetterCase, - mdiFormatLetterMatches, - mdiMoviePlusOutline, - mdiLink, - mdiChevronRight, - mdiTableColumnWidth, - mdiTableRowHeight, - mdiMinus, - mdiPaletteOutline, - mdiCircle, - mdiChevronLeft, - mdiTableCog, - mdiTableOff, - mdiRectangle, - mdiArrowLeft, -} from "@mdi/js"; +import { mdiAttachment, mdiBorderHorizontal, mdiCheck, mdiChevronDown, mdiCodeBraces, mdiCodeTags, mdiDotsVertical, mdiFormatAlignCenter, mdiFormatAlignJustify, mdiFormatAlignLeft, mdiFormatAlignRight, mdiFormatBold, mdiFormatClear, mdiFormatColorHighlight, mdiFormatColorText, mdiFormatItalic, mdiFormatListBulleted, mdiFormatListNumbered, mdiFormatQuoteClose, mdiFormatStrikethrough, mdiFormatSubscript, mdiFormatSuperscript, mdiFormatTextdirectionLToR, mdiFormatTextdirectionRToL, mdiFormatUnderline, mdiImage, mdiInvertColorsOff, mdiLinkPlus, mdiLoading, mdiTable, mdiTableBorder, mdiTableRowPlusAfter, mdiTableRowPlusBefore, mdiTableRowRemove, mdiTableColumnPlusAfter, mdiTableColumnPlusBefore, mdiTableColumnRemove, mdiUploadOutline, mdiPlus, mdiFormatColorFill, mdiClose, mdiSortDescending, mdiArrowExpandRight, mdiArrowExpandLeft, mdiArrowExpandDown, mdiArrowExpandUp, mdiTableMergeCells, mdiTableSplitCell, mdiDeleteOutline, mdiDownloadOutline, mdiFormatListCheckbox, mdiDrag, mdiCheckboxMarkedOutline, mdiChevronUp, mdiArrowUp, mdiArrowDown, mdiRegex, mdiFormatLetterCase, mdiFormatLetterMatches, mdiMoviePlusOutline, mdiLink, mdiChevronRight, mdiTableColumnWidth, mdiTableRowHeight, mdiMinus, mdiPaletteOutline, mdiCircle, mdiChevronLeft, mdiTableCog, mdiTableOff, mdiRectangle, mdiImageEditOutline, mdiArrowLeft, } from "@mdi/js"; export var Icons = { - bold: mdiFormatBold, - italic: mdiFormatItalic, - underline: mdiFormatUnderline, - strikethrough: mdiFormatStrikethrough, - code: mdiCodeTags, - alignCenter: mdiFormatAlignCenter, - alignLeft: mdiFormatAlignLeft, - alignRight: mdiFormatAlignRight, - alignJustify: mdiFormatAlignJustify, - subscript: mdiFormatSubscript, - superscript: mdiFormatSuperscript, - horizontalRule: mdiBorderHorizontal, - codeblock: mdiCodeBraces, - blockquote: mdiFormatQuoteClose, - formatClear: mdiFormatClear, - ltr: mdiFormatTextdirectionLToR, - rtl: mdiFormatTextdirectionRToL, - numberedList: mdiFormatListNumbered, - bulletList: mdiFormatListBulleted, - highlight: mdiFormatColorHighlight, - textColor: mdiFormatColorText, - link: mdiLinkPlus, - url: mdiLink, - image: mdiImage, - imageSettings: mdiImageEditOutline, - colorClear: mdiInvertColorsOff, - check: mdiCheck, - checkbox: mdiCheckboxMarkedOutline, - loading: mdiLoading, - more: mdiDotsVertical, - upload: mdiUploadOutline, - attachment: mdiAttachment, - table: mdiTable, - rowProperties: mdiTableRowHeight, - insertRowBelow: mdiTableRowPlusAfter, - insertRowAbove: mdiTableRowPlusBefore, - moveRowDown: mdiArrowExpandDown, - moveRowUp: mdiArrowExpandUp, - deleteRow: mdiTableRowRemove, - toggleHeaderRow: mdiTableBorder, - columnProperties: mdiTableColumnWidth, - insertColumnRight: mdiTableColumnPlusAfter, - insertColumnLeft: mdiTableColumnPlusBefore, - moveColumnRight: mdiArrowExpandRight, - moveColumnLeft: mdiArrowExpandLeft, - deleteColumn: mdiTableColumnRemove, - cellProperties: mdiRectangle, - cellBorderColor: - "M4 24q-.825 0-1.412-.587Q2 22.825 2 22q0-.825.588-1.413Q3.175 20 4 20h16q.825 0 1.413.587Q22 21.175 22 22q0 .825-.587 1.413Q20.825 24 20 24Zm1-6q-.425 0-.713-.288Q4 17.425 4 17v-2.325q0-.2.075-.388q.075-.187.225-.337l8.75-8.75l3.75 3.75l-8.75 8.75q-.15.15-.337.225q-.188.075-.388.075Zm1-2h.9L14 8.95L13.05 8L6 15.1Zm11.925-8.15l-3.75-3.75l1.8-1.8q.275-.3.7-.288q.425.013.7.288l2.35 2.35q.275.275.275.688q0 .412-.275.712ZM6 16Z", - backgroundColor: mdiFormatColorFill, - borderColor: - "M4 24q-.825 0-1.412-.587Q2 22.825 2 22q0-.825.588-1.413Q3.175 20 4 20h16q.825 0 1.413.587Q22 21.175 22 22q0 .825-.587 1.413Q20.825 24 20 24Zm1-6q-.425 0-.713-.288Q4 17.425 4 17v-2.325q0-.2.075-.388q.075-.187.225-.337l8.75-8.75l3.75 3.75l-8.75 8.75q-.15.15-.337.225q-.188.075-.388.075Zm1-2h.9L14 8.95L13.05 8L6 15.1Zm11.925-8.15l-3.75-3.75l1.8-1.8q.275-.3.7-.288q.425.013.7.288l2.35 2.35q.275.275.275.688q0 .412-.275.712ZM6 16Z", - sortDesc: mdiSortDescending, - deleteTable: mdiTableOff, - mergeCells: mdiTableMergeCells, - splitCells: mdiTableSplitCell, - checklist: mdiFormatListCheckbox, - dragHandle: mdiDrag, - previousMatch: mdiArrowUp, - nextMatch: mdiArrowDown, - replaceOne: - "m5.4 5.42 3.48 3.5 3.43-3.43-1.08-1.08-1.57 1.55V3.5a.8.8 0 0 1 .76-.81h2.35v-1.5h-2.35a2.29 2.29 0 0 0-2.28 2.3v2.5L6.48 4.33Zm10.3 2.77c.3.48.7.72 1.25.72.61 0 1.1-.26 1.45-.78.37-.51.55-1.2.55-2.05 0-.8-.15-1.41-.46-1.87a1.51 1.51 0 0 0-1.33-.68c-.63 0-1.11.3-1.45.9h-.02V1.19h-1.37v7.6h1.37v-.6Zm-.03-1.64v-.52c0-.39.09-.7.27-.93a.83.83 0 0 1 .69-.36.76.76 0 0 1 .67.36c.16.24.24.57.24 1 0 .5-.09.9-.26 1.18a.8.8 0 0 1-.73.42.76.76 0 0 1-.63-.33 1.32 1.32 0 0 1-.25-.82zm-1.35 12.82c-.4.23-.97.35-1.71.35-.87 0-1.58-.27-2.12-.82a2.9 2.9 0 0 1-.8-2.12c0-1 .28-1.8.86-2.37a3.12 3.12 0 0 1 2.31-.87c.67 0 1.16.1 1.46.28v1.54a1.95 1.95 0 0 0-1.23-.42c-.5 0-.9.15-1.2.46-.29.3-.43.72-.43 1.26 0 .52.14.93.42 1.23.28.3.67.44 1.16.44.43 0 .86-.14 1.28-.43zm-7.73-8.91L5.05 12v9.27l1.54 1.54h10.82l1.54-1.54V12l-1.54-1.54zm0 1.54h10.82v9.27H6.59Z", - replaceAll: - "M16.53 4.22c.22-.45.52-.68.92-.68.36 0 .64.17.83.52.2.34.3.81.3 1.4a3.1 3.1 0 0 1-.35 1.57c-.22.39-.53.59-.91.59-.35 0-.61-.19-.79-.55h-.01v.45h-.87V1.77h.87v2.45h.01zm-.02 1.6a1.14 1.14 0 0 0 .15.63c.1.17.24.25.4.25.2 0 .35-.1.46-.32a2 2 0 0 0 .17-.9c0-.32-.05-.57-.15-.75-.1-.18-.24-.27-.43-.27-.17 0-.32.09-.43.27a1.3 1.3 0 0 0-.17.7ZM5.6 11.56l-3.1-3.1.97-.97 1.47 1.46v-2.2A2.03 2.03 0 0 1 6.96 4.7h3.43v1.32H6.96a.72.72 0 0 0-.68.73l.01 2.19 1.39-1.38.96.96-3.04 3.04Zm7.65-4.04h.94v-2.5c0-1.18-.46-1.78-1.38-1.78-.2 0-.41.04-.66.1a2.11 2.11 0 0 0-.56.25v.97c.34-.3.71-.44 1.1-.44.38 0 .57.23.57.68l-.88.16c-.74.12-1.11.59-1.11 1.4 0 .38.09.7.27.92a.9.9 0 0 0 .74.35c.42 0 .74-.24.96-.7h.01zm0-1.98v.28a1.1 1.1 0 0 1-.17.64.54.54 0 0 1-.46.25.4.4 0 0 1-.32-.14.56.56 0 0 1-.11-.36c0-.33.16-.51.48-.57l.59-.1zM9.82 19.21h-.94v-.6h-.02c-.21.46-.53.7-.96.7a.9.9 0 0 1-.74-.35 1.47 1.47 0 0 1-.27-.92c0-.8.38-1.28 1.12-1.4l.87-.15c0-.46-.19-.69-.57-.69-.38 0-.75.15-1.1.45v-.98c.14-.09.33-.17.57-.24.24-.07.46-.1.66-.1.92 0 1.38.59 1.38 1.78zm-.94-1.7v-.29l-.58.1c-.33.06-.49.25-.49.57 0 .15.04.27.12.36a.4.4 0 0 0 .32.14.54.54 0 0 0 .46-.25c.11-.17.17-.38.17-.63zm4.24 1.8c.47 0 .83-.09 1.08-.26v-1.03a1.32 1.32 0 0 1-.8.3.9.9 0 0 1-.74-.31c-.17-.22-.26-.5-.26-.88s.1-.68.28-.9a.94.94 0 0 1 .75-.32c.28 0 .54.1.77.3v-1.1c-.19-.12-.5-.19-.91-.19-.61 0-1.1.2-1.47.62-.36.4-.54.97-.54 1.68 0 .61.17 1.11.5 1.5.35.4.8.59 1.34.59zM2.5 13.46 3.96 12h13.16l1.46 1.46v7.3l-1.46 1.47H3.96L2.5 20.77Zm1.46 0v7.3h13.16v-7.3Zm4.39-2.92L9.8 9.08h10.23l1.46 1.46v7.3l-1.46 1.47v-8.77z", - caseSensitive: mdiFormatLetterCase, - wholeWord: mdiFormatLetterMatches, - regex: mdiRegex, - embed: mdiMoviePlusOutline, - palette: mdiPaletteOutline, - tableSettings: mdiTableCog, - plus: mdiPlus, - minus: mdiMinus, - close: mdiClose, - delete: mdiDeleteOutline, - download: mdiDownloadOutline, - chevronDown: mdiChevronDown, - chevronUp: mdiChevronUp, - chevronRight: mdiChevronRight, - chevronLeft: mdiChevronLeft, - circle: mdiCircle, - arrowLeft: mdiArrowLeft, - none: "", + bold: mdiFormatBold, + italic: mdiFormatItalic, + underline: mdiFormatUnderline, + strikethrough: mdiFormatStrikethrough, + code: mdiCodeTags, + alignCenter: mdiFormatAlignCenter, + alignLeft: mdiFormatAlignLeft, + alignRight: mdiFormatAlignRight, + alignJustify: mdiFormatAlignJustify, + subscript: mdiFormatSubscript, + superscript: mdiFormatSuperscript, + horizontalRule: mdiBorderHorizontal, + codeblock: mdiCodeBraces, + blockquote: mdiFormatQuoteClose, + formatClear: mdiFormatClear, + ltr: mdiFormatTextdirectionLToR, + rtl: mdiFormatTextdirectionRToL, + numberedList: mdiFormatListNumbered, + bulletList: mdiFormatListBulleted, + highlight: mdiFormatColorHighlight, + textColor: mdiFormatColorText, + link: mdiLinkPlus, + url: mdiLink, + image: mdiImage, + imageSettings: mdiImageEditOutline, + colorClear: mdiInvertColorsOff, + check: mdiCheck, + checkbox: mdiCheckboxMarkedOutline, + loading: mdiLoading, + more: mdiDotsVertical, + upload: mdiUploadOutline, + attachment: mdiAttachment, + table: mdiTable, + rowProperties: mdiTableRowHeight, + insertRowBelow: mdiTableRowPlusAfter, + insertRowAbove: mdiTableRowPlusBefore, + moveRowDown: mdiArrowExpandDown, + moveRowUp: mdiArrowExpandUp, + deleteRow: mdiTableRowRemove, + toggleHeaderRow: mdiTableBorder, + columnProperties: mdiTableColumnWidth, + insertColumnRight: mdiTableColumnPlusAfter, + insertColumnLeft: mdiTableColumnPlusBefore, + moveColumnRight: mdiArrowExpandRight, + moveColumnLeft: mdiArrowExpandLeft, + deleteColumn: mdiTableColumnRemove, + cellProperties: mdiRectangle, + cellBorderColor: "M4 24q-.825 0-1.412-.587Q2 22.825 2 22q0-.825.588-1.413Q3.175 20 4 20h16q.825 0 1.413.587Q22 21.175 22 22q0 .825-.587 1.413Q20.825 24 20 24Zm1-6q-.425 0-.713-.288Q4 17.425 4 17v-2.325q0-.2.075-.388q.075-.187.225-.337l8.75-8.75l3.75 3.75l-8.75 8.75q-.15.15-.337.225q-.188.075-.388.075Zm1-2h.9L14 8.95L13.05 8L6 15.1Zm11.925-8.15l-3.75-3.75l1.8-1.8q.275-.3.7-.288q.425.013.7.288l2.35 2.35q.275.275.275.688q0 .412-.275.712ZM6 16Z", + backgroundColor: mdiFormatColorFill, + borderColor: "M4 24q-.825 0-1.412-.587Q2 22.825 2 22q0-.825.588-1.413Q3.175 20 4 20h16q.825 0 1.413.587Q22 21.175 22 22q0 .825-.587 1.413Q20.825 24 20 24Zm1-6q-.425 0-.713-.288Q4 17.425 4 17v-2.325q0-.2.075-.388q.075-.187.225-.337l8.75-8.75l3.75 3.75l-8.75 8.75q-.15.15-.337.225q-.188.075-.388.075Zm1-2h.9L14 8.95L13.05 8L6 15.1Zm11.925-8.15l-3.75-3.75l1.8-1.8q.275-.3.7-.288q.425.013.7.288l2.35 2.35q.275.275.275.688q0 .412-.275.712ZM6 16Z", + sortDesc: mdiSortDescending, + deleteTable: mdiTableOff, + mergeCells: mdiTableMergeCells, + splitCells: mdiTableSplitCell, + checklist: mdiFormatListCheckbox, + dragHandle: mdiDrag, + previousMatch: mdiArrowUp, + nextMatch: mdiArrowDown, + replaceOne: "m5.4 5.42 3.48 3.5 3.43-3.43-1.08-1.08-1.57 1.55V3.5a.8.8 0 0 1 .76-.81h2.35v-1.5h-2.35a2.29 2.29 0 0 0-2.28 2.3v2.5L6.48 4.33Zm10.3 2.77c.3.48.7.72 1.25.72.61 0 1.1-.26 1.45-.78.37-.51.55-1.2.55-2.05 0-.8-.15-1.41-.46-1.87a1.51 1.51 0 0 0-1.33-.68c-.63 0-1.11.3-1.45.9h-.02V1.19h-1.37v7.6h1.37v-.6Zm-.03-1.64v-.52c0-.39.09-.7.27-.93a.83.83 0 0 1 .69-.36.76.76 0 0 1 .67.36c.16.24.24.57.24 1 0 .5-.09.9-.26 1.18a.8.8 0 0 1-.73.42.76.76 0 0 1-.63-.33 1.32 1.32 0 0 1-.25-.82zm-1.35 12.82c-.4.23-.97.35-1.71.35-.87 0-1.58-.27-2.12-.82a2.9 2.9 0 0 1-.8-2.12c0-1 .28-1.8.86-2.37a3.12 3.12 0 0 1 2.31-.87c.67 0 1.16.1 1.46.28v1.54a1.95 1.95 0 0 0-1.23-.42c-.5 0-.9.15-1.2.46-.29.3-.43.72-.43 1.26 0 .52.14.93.42 1.23.28.3.67.44 1.16.44.43 0 .86-.14 1.28-.43zm-7.73-8.91L5.05 12v9.27l1.54 1.54h10.82l1.54-1.54V12l-1.54-1.54zm0 1.54h10.82v9.27H6.59Z", + replaceAll: "M16.53 4.22c.22-.45.52-.68.92-.68.36 0 .64.17.83.52.2.34.3.81.3 1.4a3.1 3.1 0 0 1-.35 1.57c-.22.39-.53.59-.91.59-.35 0-.61-.19-.79-.55h-.01v.45h-.87V1.77h.87v2.45h.01zm-.02 1.6a1.14 1.14 0 0 0 .15.63c.1.17.24.25.4.25.2 0 .35-.1.46-.32a2 2 0 0 0 .17-.9c0-.32-.05-.57-.15-.75-.1-.18-.24-.27-.43-.27-.17 0-.32.09-.43.27a1.3 1.3 0 0 0-.17.7ZM5.6 11.56l-3.1-3.1.97-.97 1.47 1.46v-2.2A2.03 2.03 0 0 1 6.96 4.7h3.43v1.32H6.96a.72.72 0 0 0-.68.73l.01 2.19 1.39-1.38.96.96-3.04 3.04Zm7.65-4.04h.94v-2.5c0-1.18-.46-1.78-1.38-1.78-.2 0-.41.04-.66.1a2.11 2.11 0 0 0-.56.25v.97c.34-.3.71-.44 1.1-.44.38 0 .57.23.57.68l-.88.16c-.74.12-1.11.59-1.11 1.4 0 .38.09.7.27.92a.9.9 0 0 0 .74.35c.42 0 .74-.24.96-.7h.01zm0-1.98v.28a1.1 1.1 0 0 1-.17.64.54.54 0 0 1-.46.25.4.4 0 0 1-.32-.14.56.56 0 0 1-.11-.36c0-.33.16-.51.48-.57l.59-.1zM9.82 19.21h-.94v-.6h-.02c-.21.46-.53.7-.96.7a.9.9 0 0 1-.74-.35 1.47 1.47 0 0 1-.27-.92c0-.8.38-1.28 1.12-1.4l.87-.15c0-.46-.19-.69-.57-.69-.38 0-.75.15-1.1.45v-.98c.14-.09.33-.17.57-.24.24-.07.46-.1.66-.1.92 0 1.38.59 1.38 1.78zm-.94-1.7v-.29l-.58.1c-.33.06-.49.25-.49.57 0 .15.04.27.12.36a.4.4 0 0 0 .32.14.54.54 0 0 0 .46-.25c.11-.17.17-.38.17-.63zm4.24 1.8c.47 0 .83-.09 1.08-.26v-1.03a1.32 1.32 0 0 1-.8.3.9.9 0 0 1-.74-.31c-.17-.22-.26-.5-.26-.88s.1-.68.28-.9a.94.94 0 0 1 .75-.32c.28 0 .54.1.77.3v-1.1c-.19-.12-.5-.19-.91-.19-.61 0-1.1.2-1.47.62-.36.4-.54.97-.54 1.68 0 .61.17 1.11.5 1.5.35.4.8.59 1.34.59zM2.5 13.46 3.96 12h13.16l1.46 1.46v7.3l-1.46 1.47H3.96L2.5 20.77Zm1.46 0v7.3h13.16v-7.3Zm4.39-2.92L9.8 9.08h10.23l1.46 1.46v7.3l-1.46 1.47v-8.77z", + caseSensitive: mdiFormatLetterCase, + wholeWord: mdiFormatLetterMatches, + regex: mdiRegex, + embed: mdiMoviePlusOutline, + palette: mdiPaletteOutline, + tableSettings: mdiTableCog, + plus: mdiPlus, + minus: mdiMinus, + close: mdiClose, + delete: mdiDeleteOutline, + download: mdiDownloadOutline, + chevronDown: mdiChevronDown, + chevronUp: mdiChevronUp, + chevronRight: mdiChevronRight, + chevronLeft: mdiChevronLeft, + circle: mdiCircle, + arrowLeft: mdiArrowLeft, + none: "", }; diff --git a/packages/editor/dist/toolbar/popups/cellproperties.d.ts b/packages/editor/dist/toolbar/popups/cellproperties.d.ts index ea38c5212..d116c136d 100644 --- a/packages/editor/dist/toolbar/popups/cellproperties.d.ts +++ b/packages/editor/dist/toolbar/popups/cellproperties.d.ts @@ -1,3 +1,4 @@ +/// import { Editor } from "@tiptap/core"; declare type CellPropertiesProps = { editor: Editor; diff --git a/packages/editor/dist/toolbar/popups/colorpicker.d.ts b/packages/editor/dist/toolbar/popups/colorpicker.d.ts index 1732d8d8f..4995db1ea 100644 --- a/packages/editor/dist/toolbar/popups/colorpicker.d.ts +++ b/packages/editor/dist/toolbar/popups/colorpicker.d.ts @@ -1,3 +1,4 @@ +/// export declare const DEFAULT_COLORS: string[]; declare type ColorPickerProps = { colors?: string[]; diff --git a/packages/editor/dist/toolbar/popups/colorpicker.js b/packages/editor/dist/toolbar/popups/colorpicker.js index 64acc1c51..07e7ccc5b 100644 --- a/packages/editor/dist/toolbar/popups/colorpicker.js +++ b/packages/editor/dist/toolbar/popups/colorpicker.js @@ -33,7 +33,7 @@ import { Icons } from "../icons"; import { useState } from "react"; import tinycolor from "tinycolor2"; import { HexColorPicker } from "react-colorful"; -import Button from "../../components/button"; +import { Button } from "../../components/button"; export var DEFAULT_COLORS = [ "#e91e63", "#9c27b0", diff --git a/packages/editor/dist/toolbar/popups/embedpopup.d.ts b/packages/editor/dist/toolbar/popups/embedpopup.d.ts index fab7400ed..14571c5c5 100644 --- a/packages/editor/dist/toolbar/popups/embedpopup.d.ts +++ b/packages/editor/dist/toolbar/popups/embedpopup.d.ts @@ -1,3 +1,4 @@ +/// import { EmbedAlignmentOptions, EmbedAttributes, EmbedSizeOptions } from "../../extensions/embed"; declare type Embed = Required & EmbedAlignmentOptions; export declare type EmbedPopupProps = { diff --git a/packages/editor/dist/toolbar/popups/imageproperties.d.ts b/packages/editor/dist/toolbar/popups/imageproperties.d.ts index f44695dc4..608647e46 100644 --- a/packages/editor/dist/toolbar/popups/imageproperties.d.ts +++ b/packages/editor/dist/toolbar/popups/imageproperties.d.ts @@ -1,3 +1,4 @@ +/// import { ImageAlignmentOptions, ImageSizeOptions } from "../../extensions/image"; import { Editor } from "@tiptap/core"; export declare type ImagePropertiesProps = ImageSizeOptions & ImageAlignmentOptions & { diff --git a/packages/editor/dist/toolbar/popups/imageupload.d.ts b/packages/editor/dist/toolbar/popups/imageupload.d.ts index e3de4740d..306f74f64 100644 --- a/packages/editor/dist/toolbar/popups/imageupload.d.ts +++ b/packages/editor/dist/toolbar/popups/imageupload.d.ts @@ -1,3 +1,4 @@ +/// import { ImageAttributes } from "../../extensions/image"; export declare type ImageUploadPopupProps = { onInsert: (image: ImageAttributes) => void; diff --git a/packages/editor/dist/toolbar/popups/imageupload.js b/packages/editor/dist/toolbar/popups/imageupload.js index 25573977a..ae29c649a 100644 --- a/packages/editor/dist/toolbar/popups/imageupload.js +++ b/packages/editor/dist/toolbar/popups/imageupload.js @@ -65,7 +65,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; import { Input } from "@rebass/forms"; import { useState } from "react"; import { Flex } from "rebass"; -import Button from "../../components/button"; +import { Button } from "../../components/button"; import { Popup } from "../components/popup"; export function ImageUploadPopup(props) { var _this = this; diff --git a/packages/editor/dist/toolbar/popups/linkpopup.d.ts b/packages/editor/dist/toolbar/popups/linkpopup.d.ts index 74840bb54..8d58e678d 100644 --- a/packages/editor/dist/toolbar/popups/linkpopup.d.ts +++ b/packages/editor/dist/toolbar/popups/linkpopup.d.ts @@ -1,3 +1,4 @@ +/// export declare type LinkPopupProps = { text?: string; href?: string; diff --git a/packages/editor/dist/toolbar/popups/searchreplace.d.ts b/packages/editor/dist/toolbar/popups/searchreplace.d.ts index f6d3e95a8..74cbb2e62 100644 --- a/packages/editor/dist/toolbar/popups/searchreplace.d.ts +++ b/packages/editor/dist/toolbar/popups/searchreplace.d.ts @@ -1,3 +1,4 @@ +/// import { Editor } from "@tiptap/core"; export declare type SearchReplacePopupProps = { editor: Editor; diff --git a/packages/editor/dist/toolbar/popups/tablepopup.d.ts b/packages/editor/dist/toolbar/popups/tablepopup.d.ts index a341d20d3..0e35ac702 100644 --- a/packages/editor/dist/toolbar/popups/tablepopup.d.ts +++ b/packages/editor/dist/toolbar/popups/tablepopup.d.ts @@ -1,3 +1,4 @@ +/// declare type TableSize = { columns: number; rows: number; diff --git a/packages/editor/dist/toolbar/toolbar.d.ts b/packages/editor/dist/toolbar/toolbar.d.ts index cf146d053..3b0a7f532 100644 --- a/packages/editor/dist/toolbar/toolbar.d.ts +++ b/packages/editor/dist/toolbar/toolbar.d.ts @@ -1,3 +1,4 @@ +/// import { Theme } from "@notesnook/theme"; import { Editor } from "@tiptap/core"; import { ToolbarLocation } from "./stores/toolbar-store"; diff --git a/packages/editor/dist/toolbar/tools/alignment.d.ts b/packages/editor/dist/toolbar/tools/alignment.d.ts index 3a4575749..6e121e63e 100644 --- a/packages/editor/dist/toolbar/tools/alignment.d.ts +++ b/packages/editor/dist/toolbar/tools/alignment.d.ts @@ -1,3 +1,4 @@ +/// import { ToolProps } from "../types"; export declare function AlignCenter(props: ToolProps): JSX.Element; export declare function AlignLeft(props: ToolProps): JSX.Element; diff --git a/packages/editor/dist/toolbar/tools/block.d.ts b/packages/editor/dist/toolbar/tools/block.d.ts index ae3b2d914..9ab2e4d50 100644 --- a/packages/editor/dist/toolbar/tools/block.d.ts +++ b/packages/editor/dist/toolbar/tools/block.d.ts @@ -1,2 +1,3 @@ +/// import { ToolProps } from "../types"; export declare function InsertBlock(props: ToolProps): JSX.Element; diff --git a/packages/editor/dist/toolbar/tools/block.js b/packages/editor/dist/toolbar/tools/block.js index cd1450b23..a3e0f736f 100644 --- a/packages/editor/dist/toolbar/tools/block.js +++ b/packages/editor/dist/toolbar/tools/block.js @@ -35,7 +35,7 @@ import { useIsMobile, useToolbarLocation } from "../stores/toolbar-store"; import { ResponsivePresenter, } from "../../components/responsive"; import { showPopup } from "../../components/popup-presenter"; import { ImageUploadPopup } from "../popups/image-upload"; -import Button from "../../components/button"; +import { Button } from "../../components/button"; export function InsertBlock(props) { var buttonRef = useRef(); var _a = __read(useState(false), 2), isOpen = _a[0], setIsOpen = _a[1]; diff --git a/packages/editor/dist/toolbar/tools/colors.d.ts b/packages/editor/dist/toolbar/tools/colors.d.ts index 5dc6d7a1c..2914912f8 100644 --- a/packages/editor/dist/toolbar/tools/colors.d.ts +++ b/packages/editor/dist/toolbar/tools/colors.d.ts @@ -1,3 +1,4 @@ +/// import { Editor } from "@tiptap/core"; import { ToolProps } from "../types"; declare type ColorToolProps = ToolProps & { diff --git a/packages/editor/dist/toolbar/tools/font.d.ts b/packages/editor/dist/toolbar/tools/font.d.ts index d5becf75c..e7818addd 100644 --- a/packages/editor/dist/toolbar/tools/font.d.ts +++ b/packages/editor/dist/toolbar/tools/font.d.ts @@ -1,3 +1,4 @@ +/// import { ToolProps } from "../types"; export declare function FontSize(props: ToolProps): JSX.Element; export declare function FontFamily(props: ToolProps): JSX.Element; diff --git a/packages/editor/dist/toolbar/tools/headings.d.ts b/packages/editor/dist/toolbar/tools/headings.d.ts index 931208a7c..e237b7e5f 100644 --- a/packages/editor/dist/toolbar/tools/headings.d.ts +++ b/packages/editor/dist/toolbar/tools/headings.d.ts @@ -1,2 +1,3 @@ +/// import { ToolProps } from "../types"; export declare function Headings(props: ToolProps): JSX.Element; diff --git a/packages/editor/dist/toolbar/tools/inline.d.ts b/packages/editor/dist/toolbar/tools/inline.d.ts index 9d3097a67..87ad73d07 100644 --- a/packages/editor/dist/toolbar/tools/inline.d.ts +++ b/packages/editor/dist/toolbar/tools/inline.d.ts @@ -1,3 +1,4 @@ +/// import { ToolProps } from "../types"; export declare function Italic(props: ToolProps): JSX.Element; export declare function Strikethrough(props: ToolProps): JSX.Element; diff --git a/packages/editor/dist/toolbar/tools/lists.d.ts b/packages/editor/dist/toolbar/tools/lists.d.ts index 4c198c62a..50718c842 100644 --- a/packages/editor/dist/toolbar/tools/lists.d.ts +++ b/packages/editor/dist/toolbar/tools/lists.d.ts @@ -1,3 +1,4 @@ +/// import { ToolProps } from "../types"; export declare function NumberedList(props: ToolProps): JSX.Element; export declare function BulletList(props: ToolProps): JSX.Element; diff --git a/packages/editor/dist/toolbar/tools/table.d.ts b/packages/editor/dist/toolbar/tools/table.d.ts index ddb7cd8a0..8a7280fd5 100644 --- a/packages/editor/dist/toolbar/tools/table.d.ts +++ b/packages/editor/dist/toolbar/tools/table.d.ts @@ -1,3 +1,4 @@ +/// import { ToolProps } from "../types"; export declare function TableSettings(props: ToolProps): JSX.Element | null; export declare function RowProperties(props: ToolProps): JSX.Element; diff --git a/packages/editor/dist/toolbar/tools/textdirection.d.ts b/packages/editor/dist/toolbar/tools/textdirection.d.ts index 233172ba1..a625990f0 100644 --- a/packages/editor/dist/toolbar/tools/textdirection.d.ts +++ b/packages/editor/dist/toolbar/tools/textdirection.d.ts @@ -1,3 +1,4 @@ +/// import { ToolProps } from "../types"; export declare function RightToLeft(props: ToolProps): JSX.Element; export declare function LeftToRight(props: ToolProps): JSX.Element; diff --git a/packages/editor/dist/toolbar/tools/utils.d.ts b/packages/editor/dist/toolbar/tools/utils.d.ts index 173fe5f55..2aaf4fe1f 100644 --- a/packages/editor/dist/toolbar/tools/utils.d.ts +++ b/packages/editor/dist/toolbar/tools/utils.d.ts @@ -1,3 +1,4 @@ +/// import { Editor } from "@tiptap/core"; import { MenuButton } from "../../components/menu/types"; import { ToolProps } from "../types"; diff --git a/packages/editor/package-lock.json b/packages/editor/package-lock.json index 35eafac93..3685e4ece 100644 --- a/packages/editor/package-lock.json +++ b/packages/editor/package-lock.json @@ -36,31 +36,22 @@ "@tiptap/react": "^2.0.0-beta.109", "@tiptap/starter-kit": "^2.0.0-beta.185", "detect-indent": "^7.0.0", - "detect-indentation": "^5.20.0", "emotion-theming": "^10.0.19", - "esm-loader": "^0.1.0", - "highlight.js": "^11.5.1", "lowlight": "^2.6.1", "prism-themes": "^1.9.0", - "prismjs": "^1.28.0", "prosemirror-tables": "^1.1.1", - "prosemirror-utils": "^0.9.6", + "prosemirror-utils": "github:atlassian/prosemirror-utils", "prosemirror-view": "^1.24.1", "re-resizable": "^6.9.9", - "react-color": "^2.19.3", "react-colorful": "^5.5.1", "react-modal": "^3.14.4", - "react-modal-sheet": "github:thecodrr/react-action-sheet", - "react-spring-bottom-sheet": "^3.4.0", "react-toggle": "^4.1.2", - "reactjs-popup": "^2.0.5", "rebass": "^4.0.7", "redent": "^4.0.0", "refractor": "^4.7.0", "shortid": "^2.2.16", "strip-indent": "^4.0.0", "tinycolor2": "^1.4.2", - "tippy.js": "^6.3.7", "zustand": "^3.7.2" }, "devDependencies": { @@ -2386,14 +2377,6 @@ "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==", "dev": true }, - "node_modules/@icons/material": { - "version": "0.2.4", - "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz", - "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==", - "peerDependencies": { - "react": "*" - } - }, "node_modules/@istanbuljs/load-nyc-config": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz", @@ -3175,11 +3158,6 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, - "node_modules/@juggle/resize-observer": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.3.1.tgz", - "integrity": "sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw==" - }, "node_modules/@mdi/js": { "version": "6.7.96", "resolved": "https://registry.npmjs.org/@mdi/js/-/js-6.7.96.tgz", @@ -3355,33 +3333,6 @@ "url": "https://opencollective.com/popperjs" } }, - "node_modules/@reach/portal": { - "version": "0.13.2", - "resolved": "https://registry.npmjs.org/@reach/portal/-/portal-0.13.2.tgz", - "integrity": "sha512-g74BnCdtuTGthzzHn2cWW+bcyIYb0iIE/yRsm89i8oNzNgpopbkh9UY8TPbhNlys52h7U60s4kpRTmcq+JqsTA==", - "dependencies": { - "@reach/utils": "0.13.2", - "tslib": "^2.1.0" - }, - "peerDependencies": { - "react": "^16.8.0 || 17.x", - "react-dom": "^16.8.0 || 17.x" - } - }, - "node_modules/@reach/utils": { - "version": "0.13.2", - "resolved": "https://registry.npmjs.org/@reach/utils/-/utils-0.13.2.tgz", - "integrity": "sha512-3ir6cN60zvUrwjOJu7C6jec/samqAeyAB12ZADK+qjnmQPdzSYldrFWwDVV5H0WkhbYXR3uh+eImu13hCetNPQ==", - "dependencies": { - "@types/warning": "^3.0.0", - "tslib": "^2.1.0", - "warning": "^4.0.3" - }, - "peerDependencies": { - "react": "^16.8.0 || 17.x", - "react-dom": "^16.8.0 || 17.x" - } - }, "node_modules/@rebass/forms": { "version": "4.0.6", "resolved": "https://registry.npmjs.org/@rebass/forms/-/forms-4.0.6.tgz", @@ -4952,11 +4903,6 @@ "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz", "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==" }, - "node_modules/@types/warning": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz", - "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA==" - }, "node_modules/@types/webpack": { "version": "4.41.32", "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.32.tgz", @@ -5377,28 +5323,6 @@ "@xtuc/long": "4.2.2" } }, - "node_modules/@xstate/react": { - "version": "1.6.3", - "resolved": "https://registry.npmjs.org/@xstate/react/-/react-1.6.3.tgz", - "integrity": "sha512-NCUReRHPGvvCvj2yLZUTfR0qVp6+apc8G83oXSjN4rl89ZjyujiKrTff55bze/HrsvCsP/sUJASf2n0nzMF1KQ==", - "dependencies": { - "use-isomorphic-layout-effect": "^1.0.0", - "use-subscription": "^1.3.0" - }, - "peerDependencies": { - "@xstate/fsm": "^1.0.0", - "react": "^16.8.0 || ^17.0.0", - "xstate": "^4.11.0" - }, - "peerDependenciesMeta": { - "@xstate/fsm": { - "optional": true - }, - "xstate": { - "optional": true - } - } - }, "node_modules/@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", @@ -5581,6 +5505,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/ansi-escapes/node_modules/type-fest": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", + "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/ansi-html": { "version": "0.0.7", "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz", @@ -6596,11 +6532,6 @@ "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", "dev": true }, - "node_modules/body-scroll-lock": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz", - "integrity": "sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==" - }, "node_modules/bonjour": { "version": "3.5.0", "resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz", @@ -8704,17 +8635,6 @@ "node": ">=12.20" } }, - "node_modules/detect-indentation": { - "version": "5.20.0", - "resolved": "https://registry.npmjs.org/detect-indentation/-/detect-indentation-5.20.0.tgz", - "integrity": "sha512-nm/f3Pc8ESNfq5WV9x1wSZlzXrBopcjsRLmQahHqBqV8M1XgU3oWhj4xSJuMT5m0I7La7Z4G6983g7bigP6rmg==", - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://bevry.me/fund" - } - }, "node_modules/detect-newline": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz", @@ -10156,11 +10076,6 @@ "node": ">=6" } }, - "node_modules/esm-loader": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/esm-loader/-/esm-loader-0.1.0.tgz", - "integrity": "sha512-/VsE4Frht1edcIXlSELlnWLrbCWJbxRBd7NOXFb78Tb6kwM5t0ditLkoryBinHXaZ5DJAKdLUEtgfmSg57hwzQ==" - }, "node_modules/espree": { "version": "7.3.1", "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz", @@ -10948,14 +10863,6 @@ "readable-stream": "^2.3.6" } }, - "node_modules/focus-trap": { - "version": "6.9.3", - "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-6.9.3.tgz", - "integrity": "sha512-sUXiHx0QbF8SQMZGdxpu8V8zPcXx0BkU6Fj7t14csEknkcH1pnxorhhh1PfSaGjJj6gj3yiBRPxBV/qoHege3w==", - "dependencies": { - "tabbable": "^5.3.3" - } - }, "node_modules/follow-redirects": { "version": "1.15.1", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz", @@ -15438,12 +15345,8 @@ "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" - }, - "node_modules/lodash-es": { - "version": "4.17.21", - "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", - "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", + "dev": true }, "node_modules/lodash._reinterpolate": { "version": "3.0.0", @@ -15632,11 +15535,6 @@ "node": ">=0.10.0" } }, - "node_modules/material-colors": { - "version": "1.2.6", - "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz", - "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==" - }, "node_modules/md5.js": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", @@ -18783,14 +18681,6 @@ "resolved": "https://registry.npmjs.org/prism-themes/-/prism-themes-1.9.0.tgz", "integrity": "sha512-tX2AYsehKDw1EORwBps+WhBFKc2kxfoFpQAjxBndbZKr4fRmMkv47XN0BghC/K1qwodB1otbe4oF23vUTFDokw==" }, - "node_modules/prismjs": { - "version": "1.28.0", - "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.28.0.tgz", - "integrity": "sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw==", - "engines": { - "node": ">=6" - } - }, "node_modules/process": { "version": "0.11.10", "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", @@ -18960,13 +18850,12 @@ } }, "node_modules/prosemirror-utils": { - "version": "0.9.6", - "resolved": "https://registry.npmjs.org/prosemirror-utils/-/prosemirror-utils-0.9.6.tgz", - "integrity": "sha512-UC+j9hQQ1POYfMc5p7UFxBTptRiGPR7Kkmbl3jVvU8VgQbkI89tR/GK+3QYC8n+VvBZrtAoCrJItNhWSxX3slA==", + "version": "1.0.0-0", + "resolved": "git+ssh://git@github.com/atlassian/prosemirror-utils.git#1b97ff08f1bbaea781f205744588a3dfd228b0d1", + "license": "Apache-2.0", "peerDependencies": { "prosemirror-model": "^1.0.0", - "prosemirror-state": "^1.0.1", - "prosemirror-tables": "^0.9.1" + "prosemirror-state": "^1.0.1" } }, "node_modules/prosemirror-view": { @@ -19246,23 +19135,6 @@ "node": ">=10" } }, - "node_modules/react-color": { - "version": "2.19.3", - "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz", - "integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==", - "dependencies": { - "@icons/material": "^0.2.4", - "lodash": "^4.17.15", - "lodash-es": "^4.17.15", - "material-colors": "^1.2.1", - "prop-types": "^15.5.10", - "reactcss": "^1.2.0", - "tinycolor2": "^1.4.1" - }, - "peerDependencies": { - "react": "*" - } - }, "node_modules/react-colorful": { "version": "5.5.1", "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.5.1.tgz", @@ -19428,15 +19300,6 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, - "node_modules/react-merge-refs": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-1.1.0.tgz", - "integrity": "sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==", - "funding": { - "type": "github", - "url": "https://github.com/sponsors/gregberge" - } - }, "node_modules/react-modal": { "version": "3.15.1", "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.15.1.tgz", @@ -19455,21 +19318,6 @@ "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18" } }, - "node_modules/react-modal-sheet": { - "version": "1.5.1", - "resolved": "git+ssh://git@github.com/thecodrr/react-action-sheet.git#141f48c87e0abdb75cc742a61d0f76168c16091c", - "license": "MIT", - "dependencies": { - "react-merge-refs": "1.1.0" - }, - "engines": { - "node": ">=10" - }, - "peerDependencies": { - "framer-motion": ">=2", - "react": ">=16" - } - }, "node_modules/react-refresh": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", @@ -19616,37 +19464,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/react-spring": { - "version": "8.0.27", - "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz", - "integrity": "sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==", - "dependencies": { - "@babel/runtime": "^7.3.1", - "prop-types": "^15.5.8" - }, - "peerDependencies": { - "react": ">= 16.8.0", - "react-dom": ">= 16.8.0" - } - }, - "node_modules/react-spring-bottom-sheet": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/react-spring-bottom-sheet/-/react-spring-bottom-sheet-3.4.0.tgz", - "integrity": "sha512-zKwTymxrTRMHPjfBiMw8reQlWoVqlCGMTefmMYkAlBvR7n3hBe5sntuQJAEjmrAnA+cLSGp44mtmgBtT2ksL5Q==", - "dependencies": { - "@juggle/resize-observer": "^3.2.0", - "@reach/portal": "^0.13.0", - "@xstate/react": "^1.2.0", - "body-scroll-lock": "^3.1.5", - "focus-trap": "^6.2.2", - "react-spring": "^8.0.27", - "react-use-gesture": "^8.0.1", - "xstate": "^4.15.1" - }, - "peerDependencies": { - "react": "^16.14.0 || 17" - } - }, "node_modules/react-toggle": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.1.2.tgz", @@ -19660,35 +19477,6 @@ "react-dom": ">= 15.3.0 < 18" } }, - "node_modules/react-use-gesture": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/react-use-gesture/-/react-use-gesture-8.0.1.tgz", - "integrity": "sha512-CXzUNkulUdgouaAlvAsC5ZVo0fi9KGSBSk81WrE4kOIcJccpANe9zZkAYr5YZZhqpicIFxitsrGVS4wmoMun9A==", - "deprecated": "This package is no longer maintained. Please use @use-gesture/react instead", - "peerDependencies": { - "react": ">= 16.8.0" - } - }, - "node_modules/reactcss": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz", - "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==", - "dependencies": { - "lodash": "^4.0.1" - } - }, - "node_modules/reactjs-popup": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.5.tgz", - "integrity": "sha512-b5hv9a6aGsHEHXFAgPO5s1Jw1eSkopueyUVxQewGdLgqk2eW0IVXZrPRpHR629YcgIpC2oxtX8OOZ8a7bQJbxA==", - "engines": { - "node": ">=10" - }, - "peerDependencies": { - "react": ">=16", - "react-dom": ">=16" - } - }, "node_modules/read-pkg": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", @@ -22437,11 +22225,6 @@ "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==", "dev": true }, - "node_modules/tabbable": { - "version": "5.3.3", - "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz", - "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==" - }, "node_modules/table": { "version": "6.8.0", "resolved": "https://registry.npmjs.org/table/-/table-6.8.0.tgz", @@ -23153,10 +22936,12 @@ } }, "node_modules/type-fest": { - "version": "0.21.3", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", - "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==", + "version": "0.13.1", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz", + "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">=10" }, @@ -23612,38 +23397,6 @@ "node": ">=0.10.0" } }, - "node_modules/use-isomorphic-layout-effect": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz", - "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==", - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/use-subscription": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.7.0.tgz", - "integrity": "sha512-87x6MjiIVE/BWqtxfiRvM6jfvGudN+UeVOnWi7qKYp2c0YJn5+Z5Jt0kZw6Tt+8hs7kw/BWo2WBhizJSAZsQJA==", - "dependencies": { - "use-sync-external-store": "^1.1.0" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, - "node_modules/use-sync-external-store": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.1.0.tgz", - "integrity": "sha512-SEnieB2FPKEVne66NpXPd1Np4R1lTNKfjuy3XdIoPQKYBAFdzbzSZlSn1KJZUiihQLQC5Znot4SBz1EOTBwQAQ==", - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/util": { "version": "0.11.1", "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz", @@ -25700,15 +25453,6 @@ "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==", "dev": true }, - "node_modules/xstate": { - "version": "4.32.1", - "resolved": "https://registry.npmjs.org/xstate/-/xstate-4.32.1.tgz", - "integrity": "sha512-QYUd+3GkXZ8i6qdixnOn28bL3EvA++LONYL/EMWwKlFSh/hiLndJ8YTnz77FDs+JUXcwU7NZJg7qoezoRHc4GQ==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/xstate" - } - }, "node_modules/xtend": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", @@ -27405,12 +27149,6 @@ "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==", "dev": true }, - "@icons/material": { - "version": "0.2.4", - "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz", - "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==", - "requires": {} - }, "@istanbuljs/load-nyc-config": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz", @@ -28021,11 +27759,6 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, - "@juggle/resize-observer": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.3.1.tgz", - "integrity": "sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw==" - }, "@mdi/js": { "version": "6.7.96", "resolved": "https://registry.npmjs.org/@mdi/js/-/js-6.7.96.tgz", @@ -28143,25 +27876,6 @@ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz", "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==" }, - "@reach/portal": { - "version": "0.13.2", - "resolved": "https://registry.npmjs.org/@reach/portal/-/portal-0.13.2.tgz", - "integrity": "sha512-g74BnCdtuTGthzzHn2cWW+bcyIYb0iIE/yRsm89i8oNzNgpopbkh9UY8TPbhNlys52h7U60s4kpRTmcq+JqsTA==", - "requires": { - "@reach/utils": "0.13.2", - "tslib": "^2.1.0" - } - }, - "@reach/utils": { - "version": "0.13.2", - "resolved": "https://registry.npmjs.org/@reach/utils/-/utils-0.13.2.tgz", - "integrity": "sha512-3ir6cN60zvUrwjOJu7C6jec/samqAeyAB12ZADK+qjnmQPdzSYldrFWwDVV5H0WkhbYXR3uh+eImu13hCetNPQ==", - "requires": { - "@types/warning": "^3.0.0", - "tslib": "^2.1.0", - "warning": "^4.0.3" - } - }, "@rebass/forms": { "version": "4.0.6", "resolved": "https://registry.npmjs.org/@rebass/forms/-/forms-4.0.6.tgz", @@ -29367,11 +29081,6 @@ "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz", "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==" }, - "@types/warning": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz", - "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA==" - }, "@types/webpack": { "version": "4.41.32", "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.32.tgz", @@ -29708,15 +29417,6 @@ "@xtuc/long": "4.2.2" } }, - "@xstate/react": { - "version": "1.6.3", - "resolved": "https://registry.npmjs.org/@xstate/react/-/react-1.6.3.tgz", - "integrity": "sha512-NCUReRHPGvvCvj2yLZUTfR0qVp6+apc8G83oXSjN4rl89ZjyujiKrTff55bze/HrsvCsP/sUJASf2n0nzMF1KQ==", - "requires": { - "use-isomorphic-layout-effect": "^1.0.0", - "use-subscription": "^1.3.0" - } - }, "@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", @@ -29854,6 +29554,14 @@ "dev": true, "requires": { "type-fest": "^0.21.3" + }, + "dependencies": { + "type-fest": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", + "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==", + "dev": true + } } }, "ansi-html": { @@ -30675,11 +30383,6 @@ } } }, - "body-scroll-lock": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz", - "integrity": "sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==" - }, "bonjour": { "version": "3.5.0", "resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz", @@ -32351,11 +32054,6 @@ "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-7.0.0.tgz", "integrity": "sha512-/6kJlmVv6RDFPqaHC/ZDcU8bblYcoph2dUQ3kB47QqhkUEqXe3VZPELK9BaEMrC73qu+wn0AQ7iSteceN+yuMw==" }, - "detect-indentation": { - "version": "5.20.0", - "resolved": "https://registry.npmjs.org/detect-indentation/-/detect-indentation-5.20.0.tgz", - "integrity": "sha512-nm/f3Pc8ESNfq5WV9x1wSZlzXrBopcjsRLmQahHqBqV8M1XgU3oWhj4xSJuMT5m0I7La7Z4G6983g7bigP6rmg==" - }, "detect-newline": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz", @@ -33440,11 +33138,6 @@ "integrity": "sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==", "dev": true }, - "esm-loader": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/esm-loader/-/esm-loader-0.1.0.tgz", - "integrity": "sha512-/VsE4Frht1edcIXlSELlnWLrbCWJbxRBd7NOXFb78Tb6kwM5t0ditLkoryBinHXaZ5DJAKdLUEtgfmSg57hwzQ==" - }, "espree": { "version": "7.3.1", "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz", @@ -34086,14 +33779,6 @@ "readable-stream": "^2.3.6" } }, - "focus-trap": { - "version": "6.9.3", - "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-6.9.3.tgz", - "integrity": "sha512-sUXiHx0QbF8SQMZGdxpu8V8zPcXx0BkU6Fj7t14csEknkcH1pnxorhhh1PfSaGjJj6gj3yiBRPxBV/qoHege3w==", - "requires": { - "tabbable": "^5.3.3" - } - }, "follow-redirects": { "version": "1.15.1", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz", @@ -37490,12 +37175,8 @@ "lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" - }, - "lodash-es": { - "version": "4.17.21", - "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", - "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", + "dev": true }, "lodash._reinterpolate": { "version": "3.0.0", @@ -37657,11 +37338,6 @@ "object-visit": "^1.0.0" } }, - "material-colors": { - "version": "1.2.6", - "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz", - "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==" - }, "md5.js": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", @@ -40221,11 +39897,6 @@ "resolved": "https://registry.npmjs.org/prism-themes/-/prism-themes-1.9.0.tgz", "integrity": "sha512-tX2AYsehKDw1EORwBps+WhBFKc2kxfoFpQAjxBndbZKr4fRmMkv47XN0BghC/K1qwodB1otbe4oF23vUTFDokw==" }, - "prismjs": { - "version": "1.28.0", - "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.28.0.tgz", - "integrity": "sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw==" - }, "process": { "version": "0.11.10", "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", @@ -40382,9 +40053,8 @@ } }, "prosemirror-utils": { - "version": "0.9.6", - "resolved": "https://registry.npmjs.org/prosemirror-utils/-/prosemirror-utils-0.9.6.tgz", - "integrity": "sha512-UC+j9hQQ1POYfMc5p7UFxBTptRiGPR7Kkmbl3jVvU8VgQbkI89tR/GK+3QYC8n+VvBZrtAoCrJItNhWSxX3slA==", + "version": "git+ssh://git@github.com/atlassian/prosemirror-utils.git#1b97ff08f1bbaea781f205744588a3dfd228b0d1", + "from": "prosemirror-utils@github:atlassian/prosemirror-utils", "requires": {} }, "prosemirror-view": { @@ -40612,20 +40282,6 @@ "whatwg-fetch": "^3.4.1" } }, - "react-color": { - "version": "2.19.3", - "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz", - "integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==", - "requires": { - "@icons/material": "^0.2.4", - "lodash": "^4.17.15", - "lodash-es": "^4.17.15", - "material-colors": "^1.2.1", - "prop-types": "^15.5.10", - "reactcss": "^1.2.0", - "tinycolor2": "^1.4.1" - } - }, "react-colorful": { "version": "5.5.1", "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.5.1.tgz", @@ -40759,11 +40415,6 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, - "react-merge-refs": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-1.1.0.tgz", - "integrity": "sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==" - }, "react-modal": { "version": "3.15.1", "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.15.1.tgz", @@ -40775,13 +40426,6 @@ "warning": "^4.0.3" } }, - "react-modal-sheet": { - "version": "git+ssh://git@github.com/thecodrr/react-action-sheet.git#141f48c87e0abdb75cc742a61d0f76168c16091c", - "from": "react-modal-sheet@https://github.com/thecodrr/react-action-sheet.git", - "requires": { - "react-merge-refs": "1.1.0" - } - }, "react-refresh": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", @@ -40899,30 +40543,6 @@ } } }, - "react-spring": { - "version": "8.0.27", - "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz", - "integrity": "sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==", - "requires": { - "@babel/runtime": "^7.3.1", - "prop-types": "^15.5.8" - } - }, - "react-spring-bottom-sheet": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/react-spring-bottom-sheet/-/react-spring-bottom-sheet-3.4.0.tgz", - "integrity": "sha512-zKwTymxrTRMHPjfBiMw8reQlWoVqlCGMTefmMYkAlBvR7n3hBe5sntuQJAEjmrAnA+cLSGp44mtmgBtT2ksL5Q==", - "requires": { - "@juggle/resize-observer": "^3.2.0", - "@reach/portal": "^0.13.0", - "@xstate/react": "^1.2.0", - "body-scroll-lock": "^3.1.5", - "focus-trap": "^6.2.2", - "react-spring": "^8.0.27", - "react-use-gesture": "^8.0.1", - "xstate": "^4.15.1" - } - }, "react-toggle": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.1.2.tgz", @@ -40931,26 +40551,6 @@ "classnames": "^2.2.5" } }, - "react-use-gesture": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/react-use-gesture/-/react-use-gesture-8.0.1.tgz", - "integrity": "sha512-CXzUNkulUdgouaAlvAsC5ZVo0fi9KGSBSk81WrE4kOIcJccpANe9zZkAYr5YZZhqpicIFxitsrGVS4wmoMun9A==", - "requires": {} - }, - "reactcss": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz", - "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==", - "requires": { - "lodash": "^4.0.1" - } - }, - "reactjs-popup": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.5.tgz", - "integrity": "sha512-b5hv9a6aGsHEHXFAgPO5s1Jw1eSkopueyUVxQewGdLgqk2eW0IVXZrPRpHR629YcgIpC2oxtX8OOZ8a7bQJbxA==", - "requires": {} - }, "read-pkg": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", @@ -43184,11 +42784,6 @@ "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==", "dev": true }, - "tabbable": { - "version": "5.3.3", - "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz", - "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==" - }, "table": { "version": "6.8.0", "resolved": "https://registry.npmjs.org/table/-/table-6.8.0.tgz", @@ -43722,10 +43317,12 @@ "dev": true }, "type-fest": { - "version": "0.21.3", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", - "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==", - "dev": true + "version": "0.13.1", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz", + "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==", + "dev": true, + "optional": true, + "peer": true }, "type-is": { "version": "1.6.18", @@ -44057,26 +43654,6 @@ "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==", "dev": true }, - "use-isomorphic-layout-effect": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz", - "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==", - "requires": {} - }, - "use-subscription": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.7.0.tgz", - "integrity": "sha512-87x6MjiIVE/BWqtxfiRvM6jfvGudN+UeVOnWi7qKYp2c0YJn5+Z5Jt0kZw6Tt+8hs7kw/BWo2WBhizJSAZsQJA==", - "requires": { - "use-sync-external-store": "^1.1.0" - } - }, - "use-sync-external-store": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.1.0.tgz", - "integrity": "sha512-SEnieB2FPKEVne66NpXPd1Np4R1lTNKfjuy3XdIoPQKYBAFdzbzSZlSn1KJZUiihQLQC5Znot4SBz1EOTBwQAQ==", - "requires": {} - }, "util": { "version": "0.11.1", "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz", @@ -45790,11 +45367,6 @@ "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==", "dev": true }, - "xstate": { - "version": "4.32.1", - "resolved": "https://registry.npmjs.org/xstate/-/xstate-4.32.1.tgz", - "integrity": "sha512-QYUd+3GkXZ8i6qdixnOn28bL3EvA++LONYL/EMWwKlFSh/hiLndJ8YTnz77FDs+JUXcwU7NZJg7qoezoRHc4GQ==" - }, "xtend": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", diff --git a/packages/editor/package.json b/packages/editor/package.json index cc563451e..4ce44ad1c 100644 --- a/packages/editor/package.json +++ b/packages/editor/package.json @@ -32,31 +32,22 @@ "@tiptap/react": "^2.0.0-beta.109", "@tiptap/starter-kit": "^2.0.0-beta.185", "detect-indent": "^7.0.0", - "detect-indentation": "^5.20.0", "emotion-theming": "^10.0.19", - "esm-loader": "^0.1.0", - "highlight.js": "^11.5.1", "lowlight": "^2.6.1", "prism-themes": "^1.9.0", - "prismjs": "^1.28.0", "prosemirror-tables": "^1.1.1", - "prosemirror-utils": "^0.9.6", + "prosemirror-utils": "github:atlassian/prosemirror-utils", "prosemirror-view": "^1.24.1", "re-resizable": "^6.9.9", - "react-color": "^2.19.3", "react-colorful": "^5.5.1", "react-modal": "^3.14.4", - "react-modal-sheet": "github:thecodrr/react-action-sheet", - "react-spring-bottom-sheet": "^3.4.0", "react-toggle": "^4.1.2", - "reactjs-popup": "^2.0.5", "rebass": "^4.0.7", "redent": "^4.0.0", "refractor": "^4.7.0", "shortid": "^2.2.16", "strip-indent": "^4.0.0", "tinycolor2": "^1.4.2", - "tippy.js": "^6.3.7", "zustand": "^3.7.2" }, "devDependencies": { diff --git a/packages/editor/src/components/action-sheet/index.tsx b/packages/editor/src/components/action-sheet/index.tsx index 00dd7a78e..458fd5c98 100644 --- a/packages/editor/src/components/action-sheet/index.tsx +++ b/packages/editor/src/components/action-sheet/index.tsx @@ -1,18 +1,34 @@ import React, { PropsWithChildren, useCallback, useRef, useState } from "react"; import { MenuItem } from "../menu/types"; import { useTheme } from "emotion-theming"; -import Sheet from "react-modal-sheet"; import { Theme } from "@notesnook/theme"; -import { Button, Flex, Text } from "rebass"; +import { Box, Button, Flex, Text } from "rebass"; import { Icon } from "../../toolbar/components/icon"; import { Icons } from "../../toolbar/icons"; import { MenuButton } from "../menu/menu-button"; import { MenuSeparator } from "../menu/menu-separator"; +import Modal from "react-modal"; +import { + motion, + PanInfo, + useMotionValue, + animate, + useTransform, + useAnimation, +} from "framer-motion"; +const AnimatedFlex = motion(Flex); type ActionSheetHistoryItem = { title?: string; items?: MenuItem[]; }; +const TRANSITION = { + type: "spring", + stiffness: 300, + damping: 30, + mass: 0.2, + duration: 300, +}; function useHistory(initial: T) { const [current, setCurrent] = useState(initial); @@ -64,73 +80,159 @@ export function ActionSheetPresenter( const contentRef = useRef(); const focusedElement = useRef(); - // hijack the back button temporarily for a more native experience - // on mobile phones. - const onPopState = useCallback( - (e: PopStateEvent | BeforeUnloadEvent) => { - if (onClose) { - onClose(); - e.preventDefault(); - return true; - } - }, - [isOpen, onClose] + const y = useMotionValue(0); + const opacity = useTransform( + y, + [0, contentRef.current?.offsetHeight || window.innerHeight], + [1, 0] ); + const animation = useAnimation(); + const onBeforeClose = useCallback(() => { + const height = contentRef.current?.offsetHeight || window.innerHeight; + setTimeout(() => { + onClose?.(); + }, TRANSITION.duration - 50); + animation.start({ + transition: TRANSITION, + y: height + 100, + }); + }, [animation, onClose, contentRef.current]); + + if (!isOpen) return null; return ( - (contentRef.current = ref)} + className={"bottom-sheet-presenter"} + role="menu" isOpen={isOpen} - onClose={onClose || (() => {})} - springConfig={{ - stiffness: 300, - damping: 30, - mass: 0.2, - duration: 300, + appElement={document.body} + shouldCloseOnEsc={blocking} + shouldReturnFocusAfterClose={focusOnRender} + shouldCloseOnOverlayClick={blocking} + shouldFocusAfterRender={focusOnRender} + ariaHideApp={blocking} + preventScroll={blocking} + onRequestClose={() => onBeforeClose()} + portalClassName={"bottom-sheet-presenter-portal"} + onAfterOpen={() => { + animation.start({ transition: TRANSITION, y: 0 }); }} - onOpenStart={() => { - window.addEventListener("popstate", onPopState); - window.addEventListener("beforeunload", onPopState); - - if (focusOnRender) { - focusedElement.current = - (document.activeElement as HTMLElement) || undefined; - contentRef.current?.focus({ preventScroll: true }); - } - }} - onCloseEnd={() => { - window.removeEventListener("popstate", onPopState); - window.removeEventListener("beforeunload", onPopState); - if (focusOnRender) { - focusedElement.current?.focus({ preventScroll: true }); - } + overlayElement={(props, contentEl) => { + return ( + + + {contentEl} + + ); }} + contentElement={(props, children) => ( + + {children} + + )} > - - - -
(contentRef.current = ref || undefined)} - tabIndex={-1} - /> - - {children} - - - + { + y.set(Math.max(y.get() + delta.y, 0)); + }} + // @ts-ignore + onDragEnd={(_, { velocity }: PanInfo) => { + if (velocity.y >= 500) { + onClose?.(); + return; + } + const sheetEl = contentRef.current as HTMLDivElement; + const contentHeight = sheetEl.offsetHeight; + const threshold = 30; + const closingHeight = (contentHeight * threshold) / 100; - {blocking ? ( - - ) : ( - <> - )} - + if (y.get() >= closingHeight) { + onBeforeClose(); + } else { + animation.start({ transition: TRANSITION, y: 0 }); + } + }} + onAnimationComplete={() => { + console.log("ED!"); + }} + dragConstraints={{ top: 0, bottom: 0 }} + dragMomentum={false} + dragElastic={false} + sx={{ + bg: "transparent", + alignItems: "center", + justifyContent: "center", + p: 2, + }} + > + + + + {children} + + + ); } diff --git a/packages/editor/src/components/button.tsx b/packages/editor/src/components/button.tsx index 73fdad904..12c037e7f 100644 --- a/packages/editor/src/components/button.tsx +++ b/packages/editor/src/components/button.tsx @@ -1,35 +1,62 @@ import React, { useCallback, useRef } from "react"; +import { useEffect } from "react"; import { Button as RebassButton, ButtonProps } from "rebass"; -export default function Button(props: ButtonProps) { +export function Button(props: ButtonProps) { + const buttonRef = useRef(); const touchStartTime = useRef(0); - const onTouchEnd = useCallback((e) => { + useEffect(() => { + if (!buttonRef.current) return; + + buttonRef.current.addEventListener("mousedown", onMouseDown, { + passive: false, + capture: true, + }); + + return () => { + buttonRef.current?.removeEventListener("mousedown", onMouseDown, { + capture: true, + }); + }; + }, [buttonRef.current]); + + const onMouseDown = useCallback((e: MouseEvent) => { + console.log("Preventing"); e.preventDefault(); - const now = Date.now(); - setTimeout(() => { - if (touchStartTime.current === 0) return; - if (now - touchStartTime.current > 300) return; - //@ts-ignore - props.onClick(e); - }, 1); }, []); - const onTouchStart = useCallback((e) => { - touchStartTime.current = Date.now(); - e.preventDefault(); - }, []); + // const onTouchEnd = useCallback((e) => { + // e.preventDefault(); + // const now = Date.now(); + // setTimeout(() => { + // if (touchStartTime.current === 0) return; + // if (now - touchStartTime.current > 300) return; + // //@ts-ignore + // props.onClick(e); + // }, 1); + // }, []); + + // const onTouchStart = useCallback((e) => { + // touchStartTime.current = Date.now(); + // e.preventDefault(); + // }, []); return ( e.preventDefault()} - onTouchEnd={onTouchEnd} - onTouchMove={() => { - touchStartTime.current = 0; + ref={(ref) => { + buttonRef.current = ref; + // props.ref = ref; }} - onTouchStart={onTouchStart} + onClick={props.onClick} + onMouseDown={() => {}} + // onTouchEnd={() => {}} + // onTouchMove={() => {}} + // // { + // // touchStartTime.current = 0; + // // }} + // onTouchStart={() => {}} /> ); } diff --git a/packages/editor/src/components/menu/menu-button.tsx b/packages/editor/src/components/menu/menu-button.tsx index b0725a75d..d52331ab9 100644 --- a/packages/editor/src/components/menu/menu-button.tsx +++ b/packages/editor/src/components/menu/menu-button.tsx @@ -1,6 +1,6 @@ import { useRef } from "react"; import { Flex, Text } from "rebass"; -import Button from "../button"; +import { Button } from "../button"; import { Icon } from "../../toolbar/components/icon"; import { Icons } from "../../toolbar/icons"; import { useToolbarLocation } from "../../toolbar/stores/toolbar-store"; diff --git a/packages/editor/src/components/popup-presenter/index.tsx b/packages/editor/src/components/popup-presenter/index.tsx index 4debac680..70199eda9 100644 --- a/packages/editor/src/components/popup-presenter/index.tsx +++ b/packages/editor/src/components/popup-presenter/index.tsx @@ -20,6 +20,7 @@ import { PopupRenderer, usePopupRenderer, } from "./popuprenderer"; +import { ResponsivePresenter, ResponsivePresenterProps } from "../responsive"; export type PopupPresenterProps = { isOpen: boolean; @@ -30,7 +31,7 @@ export type PopupPresenterProps = { movable?: boolean; }; -export function PopupPresenter(props: PropsWithChildren) { +function _PopupPresenter(props: PropsWithChildren) { const { isOpen, position, @@ -207,6 +208,15 @@ export function PopupPresenter(props: PropsWithChildren) { ); } +export function PopupPresenter(props: PropsWithChildren) { + // HACK: we don't want to render the popup presenter for no reason + // including it's effects etc. so we just wrap it and return null + // if the popup is closed. + if (!props.isOpen) return null; + + return <_PopupPresenter {...props} />; +} + export type PopupWrapperProps = { id: string; group: string; @@ -296,7 +306,7 @@ export function PopupWrapper(props: PopupWrapperProps) { type ShowPopupOptions = { theme: Theme; popup: (closePopup: () => void) => React.ReactNode; -} & Partial; +} & Partial; export function showPopup(options: ShowPopupOptions) { const { theme, popup, ...props } = options; @@ -306,7 +316,7 @@ export function showPopup(options: ShowPopupOptions) { ReactDOM.render( - {popup(hide)} - + , getPopupContainer() ); diff --git a/packages/editor/src/extensions/code-block/component.tsx b/packages/editor/src/extensions/code-block/component.tsx index d95f32c00..a8aa629b7 100644 --- a/packages/editor/src/extensions/code-block/component.tsx +++ b/packages/editor/src/extensions/code-block/component.tsx @@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react"; import { isLanguageLoaded, loadLanguage } from "./loader"; import { refractor } from "refractor/lib/core"; import "prism-themes/themes/prism-dracula.min.css"; -import { Button, Flex, Text } from "rebass"; +import { Flex, Text } from "rebass"; import Languages from "./languages.json"; import { Input } from "@rebass/forms"; import { Icon } from "../../toolbar/components/icon"; @@ -11,6 +11,7 @@ import { CodeBlockAttributes } from "./code-block"; import { ReactNodeViewProps } from "../react/types"; import { ResponsivePresenter } from "../../components/responsive"; import { Popup } from "../../toolbar/components/popup"; +import { Button } from "../../components/button"; export function CodeblockComponent( props: ReactNodeViewProps @@ -115,7 +116,9 @@ export function CodeblockComponent( bg: isOpen ? "codeSelection" : "transparent", ":hover": { bg: "codeSelection" }, }} - onClick={() => setIsOpen(true)} + onClick={() => { + setIsOpen(true); + }} title="Change language" > setIsOpen(false)} + onClose={() => { + setIsOpen(false); + // NOTE: for some reason the language selection action sheet + // does not return focus to the last focused position after + // closing. We have to set focusOnRender=false & manually + // restore focus. I think this has something to do with custom + // node views. + // TRY: perhaps use SelectionBasedReactNodeView? + editor.commands.focus(); + }} + focusOnRender={false} mobile="sheet" desktop="menu" position={{ @@ -176,6 +189,9 @@ function LanguageSelector(props: LanguageSelectorProps) { }} > { + console.log("EHLLO!"); + }} autoFocus placeholder="Search languages" sx={{ diff --git a/packages/editor/src/extensions/list-item/list-item.ts b/packages/editor/src/extensions/list-item/list-item.ts index 10ffbc773..f79ef953b 100644 --- a/packages/editor/src/extensions/list-item/list-item.ts +++ b/packages/editor/src/extensions/list-item/list-item.ts @@ -1,7 +1,4 @@ import { ListItem as TiptapListItem } from "@tiptap/extension-list-item"; -import { EditorState } from "prosemirror-state"; -import { NodeType } from "prosemirror-model"; -import { findParentNodeOfType, hasParentNodeOfType } from "prosemirror-utils"; import { onBackspacePressed } from "./commands"; export const ListItem = TiptapListItem.extend({ diff --git a/packages/editor/src/extensions/outline-list/component.tsx b/packages/editor/src/extensions/outline-list/component.tsx index b572bf67f..ee141d7fb 100644 --- a/packages/editor/src/extensions/outline-list/component.tsx +++ b/packages/editor/src/extensions/outline-list/component.tsx @@ -1,18 +1,7 @@ -import { Box, Flex, Text } from "rebass"; +import { Text } from "rebass"; import { ReactNodeViewProps } from "../react"; -import { Node } from "prosemirror-model"; -import { - findParentNodeClosestToPos, - findChildren, - getNodeType, -} from "@tiptap/core"; -import { Icon } from "../../toolbar/components/icon"; -import { Icons } from "../../toolbar/icons"; -import { useEffect, useMemo, useState } from "react"; -import { Input } from "@rebass/forms"; -import { TaskItemNode } from "../task-item"; +import { useMemo } from "react"; import { OutlineListAttributes } from "./outline-list"; -import { findParentNodeOfTypeClosestToPos } from "prosemirror-utils"; import { OutlineListItem } from "../outline-list-item"; export function OutlineListComponent( diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts index 073b745e3..db23e3345 100644 --- a/packages/editor/src/index.ts +++ b/packages/editor/src/index.ts @@ -153,7 +153,13 @@ const useTiptap = ( ] ); - const editor = useEditor({ ...defaultOptions, ...restOptions }, deps); + const editor = useEditor( + { + ...defaultOptions, + ...restOptions, + }, + deps + ); /** * Add editor to global for use in React Native. diff --git a/packages/editor/src/toolbar/components/counter.tsx b/packages/editor/src/toolbar/components/counter.tsx index b3638a881..b747efec2 100644 --- a/packages/editor/src/toolbar/components/counter.tsx +++ b/packages/editor/src/toolbar/components/counter.tsx @@ -1,5 +1,5 @@ import { Flex, Text } from "rebass"; -import Button from "../../components/button"; +import { Button } from "../../components/button"; import { ToolButton } from "./tool-button"; export type CounterProps = { diff --git a/packages/editor/src/toolbar/components/more-tools.tsx b/packages/editor/src/toolbar/components/more-tools.tsx index acb3f22e3..58e55a237 100644 --- a/packages/editor/src/toolbar/components/more-tools.tsx +++ b/packages/editor/src/toolbar/components/more-tools.tsx @@ -47,8 +47,13 @@ export function MoreTools(props: MoreToolsProps) { editor={editor} sx={{ flex: 1, - px: isBottom ? 0 : 1, - height: "50px", + p: 1, + // TODO: we cannot put a fix height here + // since it differs from platform to platform. + // perhaps we can use a expose a custom css class + // or extend the theme. + // px: isBottom ? 0 : 1, + // height: "50px", boxShadow: "menu", bg: "background", borderRadius: "default", diff --git a/packages/editor/src/toolbar/components/split-button.tsx b/packages/editor/src/toolbar/components/split-button.tsx index 77ce6b81e..e7e13311b 100644 --- a/packages/editor/src/toolbar/components/split-button.tsx +++ b/packages/editor/src/toolbar/components/split-button.tsx @@ -9,7 +9,7 @@ import { PopupWrapperProps, } from "../../components/popup-presenter"; import { PositionOptions } from "../../utils/position"; -import Button from "../../components/button"; +import { Button } from "../../components/button"; export type SplitButtonProps = ToolButtonProps & { onOpen: () => void }; export function SplitButton(props: PropsWithChildren) { diff --git a/packages/editor/src/toolbar/components/tool-button.tsx b/packages/editor/src/toolbar/components/tool-button.tsx index 5c7534521..113eeef10 100644 --- a/packages/editor/src/toolbar/components/tool-button.tsx +++ b/packages/editor/src/toolbar/components/tool-button.tsx @@ -5,7 +5,7 @@ import React from "react"; import { ButtonProps } from "rebass"; import { IconNames, Icons } from "../icons"; import { ToolButtonVariant } from "../types"; -import Button from "../../components/button"; +import { Button } from "../../components/button"; import { Icon } from "./icon"; export type ToolButtonProps = ButtonProps & { @@ -33,7 +33,7 @@ export function ToolButton(props: ToolButtonProps) {