From 7ae6590350a3629efb850e17a1e76aa8344fcf5a Mon Sep 17 00:00:00 2001 From: thecodrr Date: Sun, 17 Apr 2022 07:22:15 +0500 Subject: [PATCH] updates --- .../editor/dist/components/menu/index.d.ts | 1 + packages/editor/dist/components/menu/index.js | 1 + .../editor/dist/components/menu/menu.d.ts | 21 + packages/editor/dist/components/menu/menu.js | 234 ++ .../editor/dist/components/menu/menuitem.d.ts | 11 + .../editor/dist/components/menu/menuitem.js | 49 + .../editor/dist/components/menu/types.d.ts | 17 + packages/editor/dist/components/menu/types.js | 20 + .../editor/dist/components/menu/useMenu.d.ts | 28 + .../editor/dist/components/menu/useMenu.js | 161 + .../editor/dist/components/toggle/index.d.ts | 4 + .../editor/dist/components/toggle/index.js | 18 + .../extensions/bulletlist/bulletlist.d.ts | 1 + .../dist/extensions/bulletlist/bulletlist.js | 19 + .../dist/extensions/bulletlist/index.d.ts | 3 + .../dist/extensions/bulletlist/index.js | 3 + .../dist/extensions/fontsize/fontsize.d.ts | 22 + .../dist/extensions/fontsize/fontsize.js | 49 + .../dist/extensions/fontsize/index.d.ts | 3 + .../editor/dist/extensions/fontsize/index.js | 3 + .../dist/extensions/image/component.d.ts | 4 + .../editor/dist/extensions/image/component.js | 129 + .../editor/dist/extensions/image/image.d.ts | 33 + .../editor/dist/extensions/image/image.js | 108 + .../editor/dist/extensions/image/index.d.ts | 1 + .../editor/dist/extensions/image/index.js | 1 + .../dist/extensions/orderedlist/index.d.ts | 3 + .../dist/extensions/orderedlist/index.js | 3 + .../extensions/orderedlist/orderedlist.d.ts | 1 + .../extensions/orderedlist/orderedlist.js | 19 + .../dist/extensions/tablecell/index.d.ts | 3 + .../editor/dist/extensions/tablecell/index.js | 3 + .../dist/extensions/tablecell/tablecell.d.ts | 1 + .../dist/extensions/tablecell/tablecell.js | 37 + .../dist/extensions/textdirection/index.d.ts | 3 + .../dist/extensions/textdirection/index.js | 3 + .../textdirection/textdirection.d.ts | 19 + .../extensions/textdirection/textdirection.js | 43 + packages/editor/dist/index.d.ts | 6 + packages/editor/dist/index.js | 108 + .../dist/toolbar/components/dropdown.d.ts | 8 + .../dist/toolbar/components/dropdown.js | 42 + .../editor/dist/toolbar/components/icon.d.ts | 14 + .../editor/dist/toolbar/components/icon.js | 41 + .../editor/dist/toolbar/components/popup.d.ts | 17 + .../editor/dist/toolbar/components/popup.js | 45 + .../dist/toolbar/components/toolbutton.d.ts | 13 + .../dist/toolbar/components/toolbutton.js | 32 + .../dist/toolbar/floatingmenus/index.d.ts | 3 + .../dist/toolbar/floatingmenus/index.js | 16 + .../dist/toolbar/floatingmenus/table.d.ts | 4 + .../dist/toolbar/floatingmenus/table.js | 427 +++ .../dist/toolbar/floatingmenus/types.d.ts | 4 + .../dist/toolbar/floatingmenus/types.js | 1 + packages/editor/dist/toolbar/icons.d.ts | 50 + packages/editor/dist/toolbar/icons.js | 50 + packages/editor/dist/toolbar/index.d.ts | 2 + packages/editor/dist/toolbar/index.js | 2 + packages/editor/dist/toolbar/menus/index.d.ts | 3 + packages/editor/dist/toolbar/menus/index.js | 16 + packages/editor/dist/toolbar/menus/table.d.ts | 3 + packages/editor/dist/toolbar/menus/table.js | 21 + packages/editor/dist/toolbar/menus/types.d.ts | 4 + packages/editor/dist/toolbar/menus/types.js | 1 + packages/editor/dist/toolbar/toolbar.d.ts | 8 + packages/editor/dist/toolbar/toolbar.js | 45 + .../editor/dist/toolbar/tools/alignment.d.ts | 25 + .../editor/dist/toolbar/tools/alignment.js | 65 + packages/editor/dist/toolbar/tools/block.d.ts | 42 + packages/editor/dist/toolbar/tools/block.js | 220 ++ .../editor/dist/toolbar/tools/colors.d.ts | 28 + packages/editor/dist/toolbar/tools/colors.js | 182 + packages/editor/dist/toolbar/tools/font.d.ts | 16 + packages/editor/dist/toolbar/tools/font.js | 69 + .../editor/dist/toolbar/tools/headings.d.ts | 10 + .../editor/dist/toolbar/tools/headings.js | 51 + packages/editor/dist/toolbar/tools/index.d.ts | 42 + packages/editor/dist/toolbar/tools/index.js | 41 + .../editor/dist/toolbar/tools/inline.d.ts | 43 + packages/editor/dist/toolbar/tools/inline.js | 176 + packages/editor/dist/toolbar/tools/lists.d.ts | 32 + packages/editor/dist/toolbar/tools/lists.js | 151 + .../dist/toolbar/tools/textdirection.d.ts | 19 + .../dist/toolbar/tools/textdirection.js | 49 + packages/editor/dist/toolbar/types.d.ts | 12 + packages/editor/dist/toolbar/types.js | 4 + packages/editor/hooks/useTiptap.ts | 28 - packages/editor/package-lock.json | 2951 ++++++++++++++++- packages/editor/package.json | 44 +- packages/editor/src/components/menu/index.ts | 1 + packages/editor/src/components/menu/menu.tsx | 377 +++ .../editor/src/components/menu/menuitem.tsx | 121 + packages/editor/src/components/menu/types.ts | 37 + .../editor/src/components/menu/useMenu.ts | 296 ++ .../editor/src/components/toggle/index.tsx | 46 + .../src/extensions/bullet-list/bullet-list.ts | 21 + .../src/extensions/bullet-list/index.ts | 5 + .../src/extensions/font-size/font-size.ts | 72 + .../editor/src/extensions/font-size/index.ts | 5 + .../editor/src/extensions/image/component.tsx | 265 ++ packages/editor/src/extensions/image/image.ts | 140 + packages/editor/src/extensions/image/index.ts | 1 + .../src/extensions/ordered-list/index.ts | 5 + .../extensions/ordered-list/ordered-list.ts | 21 + .../editor/src/extensions/table-cell/index.ts | 5 + .../src/extensions/table-cell/table-cell.ts | 38 + .../src/extensions/text-direction/index.ts | 5 + .../text-direction/text-direction.ts | 63 + .../{utils/index.ts => src/global.d.ts} | 0 packages/editor/src/index.ts | 94 + .../src/toolbar/components/dropdown.tsx | 60 + .../editor/src/toolbar/components/icon.tsx | 69 + .../editor/src/toolbar/components/popup.tsx | 69 + .../src/toolbar/components/tool-button.tsx | 51 + .../src/toolbar/floating-menus/index.tsx | 11 + .../src/toolbar/floating-menus/table.tsx | 605 ++++ .../src/toolbar/floating-menus/types.ts | 2 + packages/editor/src/toolbar/icons.ts | 102 + packages/editor/src/toolbar/index.ts | 3 + packages/editor/src/toolbar/toolbar.tsx | 67 + .../editor/src/toolbar/tools/alignment.tsx | 56 + packages/editor/src/toolbar/tools/block.tsx | 257 ++ packages/editor/src/toolbar/tools/colors.tsx | 250 ++ packages/editor/src/toolbar/tools/font.tsx | 78 + .../editor/src/toolbar/tools/headings.tsx | 53 + packages/editor/src/toolbar/tools/index.ts | 61 + packages/editor/src/toolbar/tools/inline.tsx | 197 ++ packages/editor/src/toolbar/tools/lists.tsx | 192 ++ .../src/toolbar/tools/text-direction.tsx | 44 + packages/editor/src/toolbar/types.ts | 14 + packages/editor/toolbar.md | 72 + packages/editor/tsconfig.json | 121 +- 132 files changed, 10214 insertions(+), 206 deletions(-) create mode 100644 packages/editor/dist/components/menu/index.d.ts create mode 100644 packages/editor/dist/components/menu/index.js create mode 100644 packages/editor/dist/components/menu/menu.d.ts create mode 100644 packages/editor/dist/components/menu/menu.js create mode 100644 packages/editor/dist/components/menu/menuitem.d.ts create mode 100644 packages/editor/dist/components/menu/menuitem.js create mode 100644 packages/editor/dist/components/menu/types.d.ts create mode 100644 packages/editor/dist/components/menu/types.js create mode 100644 packages/editor/dist/components/menu/useMenu.d.ts create mode 100644 packages/editor/dist/components/menu/useMenu.js create mode 100644 packages/editor/dist/components/toggle/index.d.ts create mode 100644 packages/editor/dist/components/toggle/index.js create mode 100644 packages/editor/dist/extensions/bulletlist/bulletlist.d.ts create mode 100644 packages/editor/dist/extensions/bulletlist/bulletlist.js create mode 100644 packages/editor/dist/extensions/bulletlist/index.d.ts create mode 100644 packages/editor/dist/extensions/bulletlist/index.js create mode 100644 packages/editor/dist/extensions/fontsize/fontsize.d.ts create mode 100644 packages/editor/dist/extensions/fontsize/fontsize.js create mode 100644 packages/editor/dist/extensions/fontsize/index.d.ts create mode 100644 packages/editor/dist/extensions/fontsize/index.js create mode 100644 packages/editor/dist/extensions/image/component.d.ts create mode 100644 packages/editor/dist/extensions/image/component.js create mode 100644 packages/editor/dist/extensions/image/image.d.ts create mode 100644 packages/editor/dist/extensions/image/image.js create mode 100644 packages/editor/dist/extensions/image/index.d.ts create mode 100644 packages/editor/dist/extensions/image/index.js create mode 100644 packages/editor/dist/extensions/orderedlist/index.d.ts create mode 100644 packages/editor/dist/extensions/orderedlist/index.js create mode 100644 packages/editor/dist/extensions/orderedlist/orderedlist.d.ts create mode 100644 packages/editor/dist/extensions/orderedlist/orderedlist.js create mode 100644 packages/editor/dist/extensions/tablecell/index.d.ts create mode 100644 packages/editor/dist/extensions/tablecell/index.js create mode 100644 packages/editor/dist/extensions/tablecell/tablecell.d.ts create mode 100644 packages/editor/dist/extensions/tablecell/tablecell.js create mode 100644 packages/editor/dist/extensions/textdirection/index.d.ts create mode 100644 packages/editor/dist/extensions/textdirection/index.js create mode 100644 packages/editor/dist/extensions/textdirection/textdirection.d.ts create mode 100644 packages/editor/dist/extensions/textdirection/textdirection.js create mode 100644 packages/editor/dist/index.d.ts create mode 100644 packages/editor/dist/index.js create mode 100644 packages/editor/dist/toolbar/components/dropdown.d.ts create mode 100644 packages/editor/dist/toolbar/components/dropdown.js create mode 100644 packages/editor/dist/toolbar/components/icon.d.ts create mode 100644 packages/editor/dist/toolbar/components/icon.js create mode 100644 packages/editor/dist/toolbar/components/popup.d.ts create mode 100644 packages/editor/dist/toolbar/components/popup.js create mode 100644 packages/editor/dist/toolbar/components/toolbutton.d.ts create mode 100644 packages/editor/dist/toolbar/components/toolbutton.js create mode 100644 packages/editor/dist/toolbar/floatingmenus/index.d.ts create mode 100644 packages/editor/dist/toolbar/floatingmenus/index.js create mode 100644 packages/editor/dist/toolbar/floatingmenus/table.d.ts create mode 100644 packages/editor/dist/toolbar/floatingmenus/table.js create mode 100644 packages/editor/dist/toolbar/floatingmenus/types.d.ts create mode 100644 packages/editor/dist/toolbar/floatingmenus/types.js create mode 100644 packages/editor/dist/toolbar/icons.d.ts create mode 100644 packages/editor/dist/toolbar/icons.js create mode 100644 packages/editor/dist/toolbar/index.d.ts create mode 100644 packages/editor/dist/toolbar/index.js create mode 100644 packages/editor/dist/toolbar/menus/index.d.ts create mode 100644 packages/editor/dist/toolbar/menus/index.js create mode 100644 packages/editor/dist/toolbar/menus/table.d.ts create mode 100644 packages/editor/dist/toolbar/menus/table.js create mode 100644 packages/editor/dist/toolbar/menus/types.d.ts create mode 100644 packages/editor/dist/toolbar/menus/types.js create mode 100644 packages/editor/dist/toolbar/toolbar.d.ts create mode 100644 packages/editor/dist/toolbar/toolbar.js create mode 100644 packages/editor/dist/toolbar/tools/alignment.d.ts create mode 100644 packages/editor/dist/toolbar/tools/alignment.js create mode 100644 packages/editor/dist/toolbar/tools/block.d.ts create mode 100644 packages/editor/dist/toolbar/tools/block.js create mode 100644 packages/editor/dist/toolbar/tools/colors.d.ts create mode 100644 packages/editor/dist/toolbar/tools/colors.js create mode 100644 packages/editor/dist/toolbar/tools/font.d.ts create mode 100644 packages/editor/dist/toolbar/tools/font.js create mode 100644 packages/editor/dist/toolbar/tools/headings.d.ts create mode 100644 packages/editor/dist/toolbar/tools/headings.js create mode 100644 packages/editor/dist/toolbar/tools/index.d.ts create mode 100644 packages/editor/dist/toolbar/tools/index.js create mode 100644 packages/editor/dist/toolbar/tools/inline.d.ts create mode 100644 packages/editor/dist/toolbar/tools/inline.js create mode 100644 packages/editor/dist/toolbar/tools/lists.d.ts create mode 100644 packages/editor/dist/toolbar/tools/lists.js create mode 100644 packages/editor/dist/toolbar/tools/textdirection.d.ts create mode 100644 packages/editor/dist/toolbar/tools/textdirection.js create mode 100644 packages/editor/dist/toolbar/types.d.ts create mode 100644 packages/editor/dist/toolbar/types.js delete mode 100644 packages/editor/hooks/useTiptap.ts create mode 100644 packages/editor/src/components/menu/index.ts create mode 100644 packages/editor/src/components/menu/menu.tsx create mode 100644 packages/editor/src/components/menu/menuitem.tsx create mode 100644 packages/editor/src/components/menu/types.ts create mode 100644 packages/editor/src/components/menu/useMenu.ts create mode 100644 packages/editor/src/components/toggle/index.tsx create mode 100644 packages/editor/src/extensions/bullet-list/bullet-list.ts create mode 100644 packages/editor/src/extensions/bullet-list/index.ts create mode 100644 packages/editor/src/extensions/font-size/font-size.ts create mode 100644 packages/editor/src/extensions/font-size/index.ts create mode 100644 packages/editor/src/extensions/image/component.tsx create mode 100644 packages/editor/src/extensions/image/image.ts create mode 100644 packages/editor/src/extensions/image/index.ts create mode 100644 packages/editor/src/extensions/ordered-list/index.ts create mode 100644 packages/editor/src/extensions/ordered-list/ordered-list.ts create mode 100644 packages/editor/src/extensions/table-cell/index.ts create mode 100644 packages/editor/src/extensions/table-cell/table-cell.ts create mode 100644 packages/editor/src/extensions/text-direction/index.ts create mode 100644 packages/editor/src/extensions/text-direction/text-direction.ts rename packages/editor/{utils/index.ts => src/global.d.ts} (100%) create mode 100644 packages/editor/src/index.ts create mode 100644 packages/editor/src/toolbar/components/dropdown.tsx create mode 100644 packages/editor/src/toolbar/components/icon.tsx create mode 100644 packages/editor/src/toolbar/components/popup.tsx create mode 100644 packages/editor/src/toolbar/components/tool-button.tsx create mode 100644 packages/editor/src/toolbar/floating-menus/index.tsx create mode 100644 packages/editor/src/toolbar/floating-menus/table.tsx create mode 100644 packages/editor/src/toolbar/floating-menus/types.ts create mode 100644 packages/editor/src/toolbar/icons.ts create mode 100644 packages/editor/src/toolbar/index.ts create mode 100644 packages/editor/src/toolbar/toolbar.tsx create mode 100644 packages/editor/src/toolbar/tools/alignment.tsx create mode 100644 packages/editor/src/toolbar/tools/block.tsx create mode 100644 packages/editor/src/toolbar/tools/colors.tsx create mode 100644 packages/editor/src/toolbar/tools/font.tsx create mode 100644 packages/editor/src/toolbar/tools/headings.tsx create mode 100644 packages/editor/src/toolbar/tools/index.ts create mode 100644 packages/editor/src/toolbar/tools/inline.tsx create mode 100644 packages/editor/src/toolbar/tools/lists.tsx create mode 100644 packages/editor/src/toolbar/tools/text-direction.tsx create mode 100644 packages/editor/src/toolbar/types.ts create mode 100644 packages/editor/toolbar.md diff --git a/packages/editor/dist/components/menu/index.d.ts b/packages/editor/dist/components/menu/index.d.ts new file mode 100644 index 000000000..c6bb7b61b --- /dev/null +++ b/packages/editor/dist/components/menu/index.d.ts @@ -0,0 +1 @@ +export { MenuPresenter } from "./menu"; diff --git a/packages/editor/dist/components/menu/index.js b/packages/editor/dist/components/menu/index.js new file mode 100644 index 000000000..c6bb7b61b --- /dev/null +++ b/packages/editor/dist/components/menu/index.js @@ -0,0 +1 @@ +export { MenuPresenter } from "./menu"; diff --git a/packages/editor/dist/components/menu/menu.d.ts b/packages/editor/dist/components/menu/menu.d.ts new file mode 100644 index 000000000..63ae319a8 --- /dev/null +++ b/packages/editor/dist/components/menu/menu.d.ts @@ -0,0 +1,21 @@ +import { PropsWithChildren } from "react"; +import { FlexProps } from "rebass"; +import { MenuOptions } from "./useMenu"; +import { MenuItem as MenuItemType } from "./types"; +declare type MenuProps = MenuContainerProps & { + items: MenuItemType[]; + closeMenu: () => void; +}; +export declare function Menu(props: MenuProps): JSX.Element; +declare type MenuContainerProps = FlexProps & { + title?: string; +}; +declare type MenuPresenterProps = MenuContainerProps & { + items: MenuItemType[]; + options: MenuOptions; + isOpen: boolean; + onClose: () => void; + className?: string; +}; +export declare function MenuPresenter(props: PropsWithChildren): JSX.Element; +export {}; diff --git a/packages/editor/dist/components/menu/menu.js b/packages/editor/dist/components/menu/menu.js new file mode 100644 index 000000000..c40de8f4f --- /dev/null +++ b/packages/editor/dist/components/menu/menu.js @@ -0,0 +1,234 @@ +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +var __rest = (this && this.__rest) || function (s, e) { + var t = {}; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) + t[p] = s[p]; + if (s != null && typeof Object.getOwnPropertySymbols === "function") + for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { + if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) + t[p[i]] = s[p[i]]; + } + return t; +}; +import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; +import { useCallback, useRef, useEffect, useState, } from "react"; +import { Box, Flex, Text } from "rebass"; +import { getPosition } from "./useMenu"; +// import { FlexScrollContainer } from "../scrollcontainer"; +import MenuItem from "./menuitem"; +// import { useMenuTrigger, useMenu, getPosition } from "../../hooks/useMenu"; +import Modal from "react-modal"; +// import { store as selectionStore } from "../../stores/selectionstore"; +function useMenuFocus(items, onAction, onClose) { + var _a = useState(-1), focusIndex = _a[0], setFocusIndex = _a[1]; + var _b = useState(false), isSubmenuOpen = _b[0], setIsSubmenuOpen = _b[1]; + var moveItemIntoView = useCallback(function (index) { + var item = items[index]; + if (!item) + return; + var element = document.getElementById(item.key); + if (!element) + return; + element.scrollIntoView({ + behavior: "auto", + }); + }, [items]); + var onKeyDown = useCallback(function (e) { + var isSeperator = function (i) { var _a, _b; return items && (((_a = items[i]) === null || _a === void 0 ? void 0 : _a.type) === "seperator" || ((_b = items[i]) === null || _b === void 0 ? void 0 : _b.isDisabled)); }; + var moveDown = function (i) { return (i < items.length - 1 ? ++i : 0); }; + var moveUp = function (i) { return (i > 0 ? --i : items.length - 1); }; + var hasSubmenu = function (i) { var _a; return items && ((_a = items[i]) === null || _a === void 0 ? void 0 : _a.hasSubmenu); }; + var openSubmenu = function (index) { + if (!hasSubmenu(index)) + return; + setIsSubmenuOpen(true); + }; + var closeSubmenu = function (index) { + if (!hasSubmenu(index)) + return; + setIsSubmenuOpen(false); + }; + setFocusIndex(function (i) { + var nextIndex = i; + switch (e.key) { + case "ArrowUp": + if (isSubmenuOpen) + break; + nextIndex = moveUp(i); + while (isSeperator(nextIndex)) { + nextIndex = moveUp(nextIndex); + } + break; + case "ArrowDown": + if (isSubmenuOpen) + break; + nextIndex = moveDown(i); + while (isSeperator(nextIndex)) { + nextIndex = moveDown(nextIndex); + } + break; + case "ArrowRight": + openSubmenu(i); + break; + case "ArrowLeft": + closeSubmenu(i); + break; + case "Enter": + onAction && onAction(e); + break; + case "Escape": + onClose && onClose(e); + break; + default: + break; + } + if (nextIndex !== i) + moveItemIntoView(nextIndex); + return nextIndex; + }); + }, [items, isSubmenuOpen, moveItemIntoView, onAction]); + useEffect(function () { + window.addEventListener("keydown", onKeyDown); + return function () { + window.removeEventListener("keydown", onKeyDown); + }; + }, [onKeyDown]); + return { focusIndex: focusIndex, setFocusIndex: setFocusIndex, isSubmenuOpen: isSubmenuOpen, setIsSubmenuOpen: setIsSubmenuOpen }; +} +export function Menu(props) { + var _a; + var items = props.items, title = props.title, closeMenu = props.closeMenu, containerProps = __rest(props, ["items", "title", "closeMenu"]); + var hoverTimeout = useRef(); + var onAction = useCallback(function (e, item) { + e.stopPropagation(); + if (closeMenu) + closeMenu(); + if (item.onClick) { + item.onClick(); + } + }, [closeMenu]); + var _b = useMenuFocus(items, function (e) { + var item = items[focusIndex]; + if (item) + onAction(e, item); + }, function () { return closeMenu(); }), focusIndex = _b.focusIndex, setFocusIndex = _b.setFocusIndex, isSubmenuOpen = _b.isSubmenuOpen, setIsSubmenuOpen = _b.setIsSubmenuOpen; + var subMenuRef = useRef(null); + useEffect(function () { + var item = items[focusIndex]; + if (!item || !subMenuRef.current) + return; + var menuItemElement = document.getElementById(item.key); + if (!menuItemElement) + return; + if (!isSubmenuOpen) { + subMenuRef.current.style.visibility = "hidden"; + return; + } + var _a = getPosition(subMenuRef.current, { + yOffset: menuItemElement.offsetHeight, + target: menuItemElement, + location: "right", + }), top = _a.top, left = _a.left; + subMenuRef.current.style.visibility = "visible"; + subMenuRef.current.style.top = "".concat(top, "px"); + subMenuRef.current.style.left = "".concat(left, "px"); + }, [isSubmenuOpen, focusIndex, items]); + return (_jsxs(_Fragment, { children: [_jsx(MenuContainer, __assign({}, containerProps, { children: items.map(function (item, index) { return (_jsx(MenuItem, { item: item, onClick: function (e) { + var _a; + if ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) { + setFocusIndex(index); + setIsSubmenuOpen(true); + } + else + onAction(e, item); + }, isFocused: focusIndex === index, onMouseEnter: function () { + var _a; + if (item.isDisabled) { + setFocusIndex(-1); + return; + } + if (hoverTimeout.current) + clearTimeout(hoverTimeout.current); + setFocusIndex(index); + setIsSubmenuOpen(false); + if ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) { + hoverTimeout.current = setTimeout(function () { + setIsSubmenuOpen(true); + }, 500); + } + }, onMouseLeave: function () { + if (hoverTimeout.current) + clearTimeout(hoverTimeout.current); + } }, item.key)); }) })), isSubmenuOpen && (_jsx(Flex, __assign({ ref: subMenuRef, style: { visibility: "hidden" }, sx: { + position: "absolute", + } }, { children: _jsx(Menu, { items: ((_a = items[focusIndex]) === null || _a === void 0 ? void 0 : _a.items) || [], closeMenu: closeMenu }) })))] })); +} +function MenuContainer(props) { + var children = props.children, title = props.title, sx = props.sx, flexProps = __rest(props, ["children", "title", "sx"]); + return (_jsxs(Box, __assign({ className: "menuContainer", as: "ul", tabIndex: -1, sx: __assign({ bg: "background", py: 1, display: "flex", flexDirection: "column", position: "relative", listStyle: "none", padding: 0, margin: 0, borderRadius: "default", boxShadow: "menu", border: "1px solid var(--border)", width: 220 }, sx) }, flexProps, { children: [title && (_jsx(Text, __assign({ sx: { + fontFamily: "body", + fontSize: "subtitle", + color: "primary", + py: "8px", + px: 3, + borderBottom: "1px solid", + borderBottomColor: "border", + wordWrap: "break-word", + } }, { children: title }))), children] }))); +} +export function MenuPresenter(props) { + var className = props.className, options = props.options, items = props.items, isOpen = props.isOpen, onClose = props.onClose, children = props.children, containerProps = __rest(props, ["className", "options", "items", "isOpen", "onClose", "children"]); + // const { isOpen, closeMenu } = useMenuTrigger(); + // const { items, } = useMenu(); + var position = options.position, type = options.type; + var isAutocomplete = type === "autocomplete"; + var contentRef = useRef(); + useEffect(function () { + if (!contentRef.current || !position) + return; + var menu = contentRef.current; + var menuPosition = getPosition(menu, position); + menu.style.top = menuPosition.top + "px"; + menu.style.left = menuPosition.left + "px"; + }, [position]); + return (_jsx(Modal, __assign({ contentRef: function (ref) { return (contentRef.current = ref); }, className: className || "menuContainer", role: "menu", isOpen: isOpen, appElement: document.body, shouldCloseOnEsc: true, shouldReturnFocusAfterClose: true, shouldCloseOnOverlayClick: true, shouldFocusAfterRender: !isAutocomplete, ariaHideApp: !isAutocomplete, preventScroll: !isAutocomplete, onRequestClose: onClose, portalClassName: className || "menuPresenter", onAfterOpen: function (obj) { + if (!obj || !position) + return; + var menu = obj.contentEl; + var menuPosition = getPosition(menu, position); + menu.style.top = menuPosition.top + "px"; + menu.style.left = menuPosition.left + "px"; + }, overlayElement: function (props, contentEl) { + return (_jsx(Box, __assign({}, props, { style: __assign(__assign({}, props.style), { position: isAutocomplete ? "initial" : "fixed", zIndex: 1000, backgroundColor: isAutocomplete ? "transparent" : "unset" }) }, { children: contentEl }))); + }, contentElement: function (props, children) { return (_jsx(Box, __assign({}, props, { style: {}, sx: { + top: 0, + left: 0, + right: 0, + bottom: 0, + display: "flex", + width: "fit-content", + height: "fit-content", + position: "absolute", + backgroundColor: undefined, + padding: 0, + zIndex: 0, + outline: 0, + isolation: "isolate", + } }, { children: children }))); }, style: { + content: {}, + overlay: { + zIndex: 999, + background: "transparent", + }, + } }, { children: props.children ? (props.children) : (_jsx(Menu, __assign({ items: items, closeMenu: onClose }, containerProps))) }))); +} diff --git a/packages/editor/dist/components/menu/menuitem.d.ts b/packages/editor/dist/components/menu/menuitem.d.ts new file mode 100644 index 000000000..9270bbd0e --- /dev/null +++ b/packages/editor/dist/components/menu/menuitem.d.ts @@ -0,0 +1,11 @@ +/// +import { MenuItem } from "./types"; +declare type MenuItemProps = { + item: MenuItem; + isFocused: boolean; + onMouseEnter: () => void; + onMouseLeave: () => void; + onClick: React.MouseEventHandler; +}; +declare function MenuItem(props: MenuItemProps): JSX.Element; +export default MenuItem; diff --git a/packages/editor/dist/components/menu/menuitem.js b/packages/editor/dist/components/menu/menuitem.js new file mode 100644 index 000000000..4d0f0d936 --- /dev/null +++ b/packages/editor/dist/components/menu/menuitem.js @@ -0,0 +1,49 @@ +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; +// import { Check, ChevronRight, Pro } from "../icons"; +import { useRef } from "react"; +import { Flex, Box, Text, Button } from "rebass"; +import { Icon } from "../../toolbar/components/icon"; +import { Icons } from "../../toolbar/icons"; +function MenuItem(props) { + var item = props.item, isFocused = props.isFocused, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, onClick = props.onClick; + var title = item.title, key = item.key, + // color, + icon = item.icon, + // iconColor, + type = item.type, tooltip = item.tooltip, isDisabled = item.isDisabled, isChecked = item.isChecked, hasSubmenu = item.hasSubmenu, Component = item.component, modifier = item.modifier; + var itemRef = useRef(null); + if (type === "seperator") + return (_jsx(Box, { as: "li", sx: { + width: "95%", + height: "0.5px", + bg: "border", + my: 2, + alignSelf: "center", + } }, key)); + return (_jsx(Flex, __assign({ as: "li", sx: { flex: 1, flexDirection: "column" }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, { children: _jsx(Button, __assign({ id: key, "data-test-id": "menuitem-".concat(key), ref: itemRef, tabIndex: -1, variant: "menuitem", title: tooltip, disabled: isDisabled, onClick: onClick, sx: { + bg: isFocused ? "hover" : "transparent", + display: "flex", + alignItems: "center", + justifyContent: "space-between", + } }, { children: Component ? (_jsx(Component, {})) : (_jsxs(_Fragment, { children: [_jsxs(Flex, { children: [icon && (_jsx(Icon, { path: Icons[icon], color: "text", size: 15, sx: { mr: 2 } })), _jsx(Text, __assign({ as: "span", sx: { + fontFamily: "body", + fontSize: "menu", + color: "text", + } }, { children: title }))] }), _jsxs(Flex, { children: [isChecked && _jsx(Icon, { path: Icons.check, size: 14 }), modifier && (_jsx(Text, __assign({ as: "span", sx: { + fontFamily: "body", + fontSize: "menu", + color: "fontTertiary", + } }, { children: modifier })))] })] })) }), key) }))); +} +export default MenuItem; diff --git a/packages/editor/dist/components/menu/types.d.ts b/packages/editor/dist/components/menu/types.d.ts new file mode 100644 index 000000000..b654f7de1 --- /dev/null +++ b/packages/editor/dist/components/menu/types.d.ts @@ -0,0 +1,17 @@ +/// +import { IconNames } from "../../toolbar/icons"; +export declare type MenuItem = { + type: "menuitem" | "seperator"; + key: string; + component?: (props: any) => JSX.Element; + onClick?: () => void; + title?: string; + icon?: IconNames; + tooltip?: string; + isDisabled?: boolean; + isHidden?: boolean; + isChecked?: boolean; + hasSubmenu?: boolean; + modifier?: string; + items?: MenuItem[]; +}; diff --git a/packages/editor/dist/components/menu/types.js b/packages/editor/dist/components/menu/types.js new file mode 100644 index 000000000..3c9704885 --- /dev/null +++ b/packages/editor/dist/components/menu/types.js @@ -0,0 +1,20 @@ +// export type ResolverFunction = ( +// data: any, +// item: MenuItem +// ) => T; +// export type Resolvable = T | ResolverFunction; +// export type MenuItem = { +// type: "menuitem" | "seperator"; +// key: string; +// component?: Resolvable<(props: any) => JSX.Element, TData>; +// onClick?: (data: TData, item: MenuItem) => void; +// title?: Resolvable; +// icon?: Resolvable; +// tooltip?: Resolvable; +// disabled?: Resolvable; +// hidden?: Resolvable; +// checked?: Resolvable; +// modifier?: Resolvable; +// items?: Resolvable[], TData>; +// }; +export {}; diff --git a/packages/editor/dist/components/menu/useMenu.d.ts b/packages/editor/dist/components/menu/useMenu.d.ts new file mode 100644 index 000000000..18974886d --- /dev/null +++ b/packages/editor/dist/components/menu/useMenu.d.ts @@ -0,0 +1,28 @@ +declare type PositionData = { + x: number; + y: number; + actualX: number; + actualY: number; + width?: number; + height?: number; +}; +export declare type MenuOptions = { + type: "autocomplete" | "menu"; + position?: PositionOptions; +}; +declare type PositionOptions = { + target?: HTMLElement | "mouse"; + isTargetAbsolute?: boolean; + location?: "right" | "left" | "below" | "top"; + align?: "center" | "start" | "end"; + yOffset?: number; + xOffset?: number; + yAnchor?: HTMLElement; + parent?: HTMLElement | Element; +}; +export declare function getPosition(element: HTMLElement, options: PositionOptions): { + top: number; + left: number; +}; +export declare function getElementPosition(element: HTMLElement, absolute: boolean): PositionData; +export {}; diff --git a/packages/editor/dist/components/menu/useMenu.js b/packages/editor/dist/components/menu/useMenu.js new file mode 100644 index 000000000..e6c5b4cef --- /dev/null +++ b/packages/editor/dist/components/menu/useMenu.js @@ -0,0 +1,161 @@ +var mousePosition = { x: 0, y: 0, actualX: 0, actualY: 0 }; +window.addEventListener("mousemove", function (e) { + var _a = getMousePosition(e), x = _a.x, y = _a.y, actualX = _a.actualX, actualY = _a.actualY; + mousePosition.x = x; + mousePosition.y = y; + mousePosition.actualX = actualX; + mousePosition.actualY = actualY; +}); +export function getPosition(element, options) { + var _a = options || {}, _b = _a.target, target = _b === void 0 ? "mouse" : _b, _c = _a.isTargetAbsolute, isTargetAbsolute = _c === void 0 ? false : _c, _d = _a.location, location = _d === void 0 ? undefined : _d, _e = _a.yOffset, yOffset = _e === void 0 ? 0 : _e, _f = _a.xOffset, xOffset = _f === void 0 ? 0 : _f, _g = _a.align, align = _g === void 0 ? "start" : _g, _h = _a.parent, parent = _h === void 0 ? document.body : _h, yAnchor = _a.yAnchor; + var _j = target === "mouse" + ? mousePosition + : getElementPosition(target, isTargetAbsolute), x = _j.x, y = _j.y, width = _j.width, height = _j.height, actualX = _j.actualX, actualY = _j.actualY; + var elementWidth = element.offsetWidth; + var elementHeight = element.offsetHeight; + var windowWidth = parent.clientWidth; + var windowHeight = parent.clientHeight - 20; + var position = { top: 0, left: 0 }; + if (windowWidth - actualX < elementWidth) { + var xDiff = actualX - x; + position.left = windowWidth - elementWidth; + position.left -= xDiff; + } + else { + position.left = x; + } + if (width) { + if (location === "right") + position.left += width; + else if (location === "left") + position.left -= elementWidth; + } + if (windowHeight - actualY < elementHeight) { + var yDiff = actualY - y; + position.top = windowHeight - elementHeight; + position.top -= yDiff; + } + else { + position.top = y; + } + if (height) { + if (location === "below") + position.top += height; + else if (location === "top") + position.top -= height; + } + if (target !== "mouse" && align === "center" && elementWidth > 0) { + position.left -= elementWidth / 2 - target.clientWidth / 2; + } + // Adjust menu height + if (elementHeight > windowHeight - position.top) { + element.style.maxHeight = "".concat(windowHeight - 20, "px"); + } + if (yAnchor) { + var anchorY = getElementPosition(yAnchor, isTargetAbsolute); + position.top = anchorY.actualY - elementHeight; + } + position.top = position.top < 0 ? 0 : position.top; + position.left = position.left < 0 ? 0 : position.left; + position.top += yOffset; + position.left += xOffset; + return position; +} +function getMousePosition(e) { + var posx = 0; + var posy = 0; + if (!e && window.event) + e = window.event; + if (e.pageX || e.pageY) { + posx = e.pageX; + posy = e.pageY; + } + else if (e.clientX || e.clientY) { + posx = + e.clientX + + document.body.scrollLeft + + document.documentElement.scrollLeft; + posy = + e.clientY + document.body.scrollTop + document.documentElement.scrollTop; + } + return { + x: posx, + y: posy, + actualY: posy, + actualX: posx, + }; +} +export function getElementPosition(element, absolute) { + var rect = element.getBoundingClientRect(); + var position = { + x: element.offsetLeft, + y: element.offsetTop, + width: rect.width, + height: rect.height, + actualY: rect.y, + actualX: rect.x, + }; + if (absolute) { + position.x = position.actualX; + position.y = position.actualY; + } + return position; +} +// function mapMenuItems( +// items: MenuItem[], +// data: TData +// ): ResolvedMenuItem[] { +// return items.reduce((prev, item) => { +// const { key, onClick: _onClick, disabled, hidden, checked, type } = item; +// const isHidden = resolveProp(hidden, data, item); +// if (isHidden) return prev; +// const isSeperator = type === "seperator"; +// if (isSeperator) { +// prev.push({ isSeperator: true }); +// return prev; +// } +// const title = resolveProp(item.title, data, item); +// const icon = resolveProp(item.icon, data, item); +// const isChecked = resolveProp(checked, data, item); +// const isDisabled = resolveProp(disabled, data, item); +// const items = resolveProp(item.items, data, item); +// const modifier = resolveProp(item.modifier, data, item); +// const onClick = +// typeof _onClick === "function" && _onClick.bind(this, data, item); +// const tooltip = +// isDisabled || resolveProp(item.tooltip, data, item) || title; +// const hasSubmenu = items?.length > 0; +// const menuItem: ResolvedMenuItem = { +// type, +// title, +// key, +// onClick, +// tooltip, +// isChecked, +// isDisabled: !!isDisabled, +// isHidden, +// hasSubmenu, +// icon, +// modifier: modifier?.join("+"), +// }; +// if (hasSubmenu) +// menuItem.items = mapMenuItems(items, { ...data, parent: menuItem }); +// prev.push(menuItem); +// return prev; +// }, []); +// } +// function resolveProp( +// prop: Resolvable, +// data: any, +// item: MenuItem +// ): T { +// if (typeof prop === "function" && (prop as any).isReactComponent) { +// return prop as T; +// } +// return isResolverFunction(prop) ? prop(data, item) : prop; +// } +// function isResolverFunction( +// prop: any +// ): prop is ResolverFunction { +// return typeof prop === "function"; +// } diff --git a/packages/editor/dist/components/toggle/index.d.ts b/packages/editor/dist/components/toggle/index.d.ts new file mode 100644 index 000000000..38abf648a --- /dev/null +++ b/packages/editor/dist/components/toggle/index.d.ts @@ -0,0 +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/components/toggle/index.js b/packages/editor/dist/components/toggle/index.js new file mode 100644 index 000000000..841af64ee --- /dev/null +++ b/packages/editor/dist/components/toggle/index.js @@ -0,0 +1,18 @@ +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; +import ReactToggle from "react-toggle"; +import "react-toggle/style.css"; +var css = ".react-toggle {\n display: flex;\n align-items: center;\n }\n \n .react-toggle-thumb {\n box-shadow: none;\n }\n \n .react-toggle-track {\n width: 30px;\n height: 18px;\n }\n \n .react-toggle-thumb {\n width: 16px;\n height: 16px;\n top: 0px;\n left: 1px;\n margin-top: 1px;\n }\n \n .react-toggle--checked .react-toggle-thumb {\n left: 13px;\n border-color: var(--primary);\n }\n \n .react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {\n box-shadow: none;\n }\n \n .react-toggle--focus .react-toggle-thumb {\n box-shadow: none;\n }\n "; +export function Toggle(props) { + return (_jsxs(_Fragment, { children: [_jsx("style", { children: css }), _jsx(ReactToggle, __assign({ size: 20, onChange: function () { }, icons: false }, props))] })); +} diff --git a/packages/editor/dist/extensions/bulletlist/bulletlist.d.ts b/packages/editor/dist/extensions/bulletlist/bulletlist.d.ts new file mode 100644 index 000000000..803ad33bd --- /dev/null +++ b/packages/editor/dist/extensions/bulletlist/bulletlist.d.ts @@ -0,0 +1 @@ +export declare const BulletList: import("@tiptap/core").Node; diff --git a/packages/editor/dist/extensions/bulletlist/bulletlist.js b/packages/editor/dist/extensions/bulletlist/bulletlist.js new file mode 100644 index 000000000..c06e64356 --- /dev/null +++ b/packages/editor/dist/extensions/bulletlist/bulletlist.js @@ -0,0 +1,19 @@ +import TiptapBulletList from "@tiptap/extension-bullet-list"; +export var BulletList = TiptapBulletList.extend({ + addAttributes: function () { + return { + listType: { + default: null, + parseHTML: function (element) { return element.style.listStyleType; }, + renderHTML: function (attributes) { + if (!attributes.listType) { + return {}; + } + return { + style: "list-style-type: ".concat(attributes.listType), + }; + }, + }, + }; + }, +}); diff --git a/packages/editor/dist/extensions/bulletlist/index.d.ts b/packages/editor/dist/extensions/bulletlist/index.d.ts new file mode 100644 index 000000000..c732326f2 --- /dev/null +++ b/packages/editor/dist/extensions/bulletlist/index.d.ts @@ -0,0 +1,3 @@ +import { BulletList } from "./bullet-list"; +export * from "./bullet-list"; +export default BulletList; diff --git a/packages/editor/dist/extensions/bulletlist/index.js b/packages/editor/dist/extensions/bulletlist/index.js new file mode 100644 index 000000000..c732326f2 --- /dev/null +++ b/packages/editor/dist/extensions/bulletlist/index.js @@ -0,0 +1,3 @@ +import { BulletList } from "./bullet-list"; +export * from "./bullet-list"; +export default BulletList; diff --git a/packages/editor/dist/extensions/fontsize/fontsize.d.ts b/packages/editor/dist/extensions/fontsize/fontsize.d.ts new file mode 100644 index 000000000..5725a7a40 --- /dev/null +++ b/packages/editor/dist/extensions/fontsize/fontsize.d.ts @@ -0,0 +1,22 @@ +import { Extension } from "@tiptap/core"; +import "@tiptap/extension-text-style"; +declare type FontSizeOptions = { + types: string[]; + defaultFontSize: number; +}; +declare module "@tiptap/core" { + interface Commands { + fontSize: { + /** + * Set the font family + */ + setFontSize: (fontSize: string) => ReturnType; + /** + * Unset the font family + */ + unsetFontSize: () => ReturnType; + }; + } +} +export declare const FontSize: Extension; +export {}; diff --git a/packages/editor/dist/extensions/fontsize/fontsize.js b/packages/editor/dist/extensions/fontsize/fontsize.js new file mode 100644 index 000000000..c0cf6ef0d --- /dev/null +++ b/packages/editor/dist/extensions/fontsize/fontsize.js @@ -0,0 +1,49 @@ +import { Extension } from "@tiptap/core"; +import "@tiptap/extension-text-style"; +export var FontSize = Extension.create({ + name: "fontSize", + defaultOptions: { + types: ["textStyle"], + defaultFontSize: 16, + }, + addGlobalAttributes: function () { + return [ + { + types: this.options.types, + attributes: { + fontSize: { + default: "".concat(this.options.defaultFontSize, "px"), + parseHTML: function (element) { return element.style.fontSize; }, + renderHTML: function (attributes) { + if (!attributes.fontSize) { + return {}; + } + return { + style: "font-size: ".concat(attributes.fontSize), + }; + }, + }, + }, + }, + ]; + }, + addCommands: function () { + return { + setFontSize: function (fontSize) { + return function (_a) { + var chain = _a.chain; + return chain().setMark("textStyle", { fontSize: fontSize }).run(); + }; + }, + unsetFontSize: function () { + return function (_a) { + var chain = _a.chain; + return chain() + .setMark("textStyle", { fontSize: null }) + .removeEmptyTextStyle() + .run(); + }; + }, + }; + }, +}); diff --git a/packages/editor/dist/extensions/fontsize/index.d.ts b/packages/editor/dist/extensions/fontsize/index.d.ts new file mode 100644 index 000000000..0424657fa --- /dev/null +++ b/packages/editor/dist/extensions/fontsize/index.d.ts @@ -0,0 +1,3 @@ +import { FontSize } from "./font-size"; +export * from "./font-size"; +export default FontSize; diff --git a/packages/editor/dist/extensions/fontsize/index.js b/packages/editor/dist/extensions/fontsize/index.js new file mode 100644 index 000000000..0424657fa --- /dev/null +++ b/packages/editor/dist/extensions/fontsize/index.js @@ -0,0 +1,3 @@ +import { FontSize } from "./font-size"; +export * from "./font-size"; +export default FontSize; diff --git a/packages/editor/dist/extensions/image/component.d.ts b/packages/editor/dist/extensions/image/component.d.ts new file mode 100644 index 000000000..4b7879864 --- /dev/null +++ b/packages/editor/dist/extensions/image/component.d.ts @@ -0,0 +1,4 @@ +/// +import { ImageProps } from "rebass"; +import { NodeViewProps } from "@tiptap/react"; +export declare function ImageComponent(props: ImageProps & NodeViewProps): JSX.Element; diff --git a/packages/editor/dist/extensions/image/component.js b/packages/editor/dist/extensions/image/component.js new file mode 100644 index 000000000..5a9163dd2 --- /dev/null +++ b/packages/editor/dist/extensions/image/component.js @@ -0,0 +1,129 @@ +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; +import { Box, Flex, Image, Text } from "rebass"; +import { NodeViewWrapper } from "@tiptap/react"; +import { ThemeProvider } from "emotion-theming"; +import { Resizable } from "re-resizable"; +import { ToolButton } from "../../toolbar/components/tool-button"; +import { useCallback, useEffect, useRef, useState } from "react"; +import { Popup } from "../../toolbar/components/popup"; +import { Toggle } from "../../components/toggle"; +import { Input } from "@rebass/forms"; +export function ImageComponent(props) { + var _a = props.node + .attrs, src = _a.src, alt = _a.alt, title = _a.title, width = _a.width, height = _a.height, align = _a.align, float = _a.float; + var editor = props.editor, updateAttributes = props.updateAttributes; + var imageRef = useRef(); + var isActive = editor.isActive("image", { src: src }); + var _b = useState(), isToolbarVisible = _b[0], setIsToolbarVisible = _b[1]; + var theme = editor.storage.theme; + useEffect(function () { + setIsToolbarVisible(isActive); + }, [isActive]); + return (_jsx(NodeViewWrapper, { children: _jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Box, __assign({ sx: { + display: float ? "block" : "flex", + justifyContent: float + ? "stretch" + : align === "center" + ? "center" + : align === "left" + ? "start" + : "end", + } }, { children: _jsxs(Resizable, __assign({ style: { + float: float ? (align === "left" ? "left" : "right") : "none", + }, size: { + height: height || "auto", + width: width || "auto", + }, maxWidth: "100%", onResizeStop: function (e, direction, ref, d) { + updateAttributes({ + width: ref.clientWidth, + height: ref.clientHeight, + }); + }, lockAspectRatio: true }, { children: [_jsx(Flex, __assign({ sx: { position: "relative", justifyContent: "end" } }, { children: isToolbarVisible && (_jsx(ImageToolbar, { editor: editor, float: float, align: align, height: height || 0, width: width || 0 })) })), _jsx(Image, __assign({ ref: imageRef, src: src, alt: alt, title: title, width: "100%", height: "100%", sx: { + border: isActive + ? "2px solid var(--primary)" + : "2px solid transparent", + borderRadius: "default", + } }, props))] })) })) })) })); +} +function ImageToolbar(props) { + var editor = props.editor, float = props.float, height = props.height, width = props.width; + var _a = useState(false), isOpen = _a[0], setIsOpen = _a[1]; + var onSizeChange = useCallback(function (newWidth, newHeight) { + var size = newWidth + ? { + width: newWidth, + height: newWidth * (height / width), + } + : newHeight + ? { + width: newHeight * (width / height), + height: newHeight, + } + : { + width: 0, + height: 0, + }; + editor.chain().setImageSize(size).run(); + }, [width, height]); + return (_jsxs(Flex, __assign({ sx: { + flexDirection: "column", + position: "absolute", + top: -40, + mb: 2, + zIndex: 9999, + alignItems: "end", + } }, { children: [_jsxs(Flex, __assign({ sx: { + bg: "background", + boxShadow: "menu", + flexWrap: "nowrap", + borderRadius: "default", + mb: 2, + } }, { children: [_jsxs(Flex, __assign({ className: "toolbar-group", sx: { + pr: 1, + mr: 1, + borderRight: "1px solid var(--border)", + ":last-of-type": { mr: 0, pr: 0, borderRight: "none" }, + } }, { children: [_jsx(ToolButton, { toggled: false, title: "Align left", id: "alignLeft", icon: "alignLeft", onClick: function () { + return editor.chain().focus().setImageAlignment({ align: "left" }).run(); + } }), float ? null : (_jsx(ToolButton, { toggled: false, title: "Align center", id: "alignCenter", icon: "alignCenter", onClick: function () { + return editor + .chain() + .focus() + .setImageAlignment({ align: "center" }) + .run(); + } })), _jsx(ToolButton, { toggled: false, title: "Align right", id: "alignRight", icon: "alignRight", onClick: function () { + return editor.chain().focus().setImageAlignment({ align: "right" }).run(); + } })] })), _jsx(Flex, __assign({ className: "toolbar-group", sx: { + pr: 1, + mr: 1, + borderRight: "1px solid var(--border)", + ":last-of-type": { mr: 0, pr: 0, borderRight: "none" }, + } }, { children: _jsx(ToolButton, { toggled: isOpen, title: "Image properties", id: "imageProperties", icon: "more", onClick: function () { return setIsOpen(function (s) { return !s; }); } }) }))] })), isOpen && (_jsx(Popup, __assign({ title: "Image properties", action: { + icon: "close", + onClick: function () { + setIsOpen(false); + }, + } }, { children: _jsxs(Flex, __assign({ sx: { width: 200, flexDirection: "column", p: 1 } }, { children: [_jsxs(Flex, __assign({ sx: { justifyContent: "space-between", alignItems: "center" } }, { children: [_jsx(Text, __assign({ variant: "body" }, { children: "Floating?" })), _jsx(Toggle, { checked: float, onClick: function () { + return editor + .chain() + .setImageAlignment({ float: !float, align: "left" }) + .run(); + } })] })), _jsxs(Flex, __assign({ sx: { alignItems: "center", mt: 2 } }, { children: [_jsx(Input, { type: "number", placeholder: "Width", value: width, sx: { + mr: 2, + p: 1, + fontSize: "body", + }, onChange: function (e) { return onSizeChange(e.target.valueAsNumber); } }), _jsx(Input, { type: "number", placeholder: "Height", value: height, sx: { p: 1, fontSize: "body" }, onChange: function (e) { + return onSizeChange(undefined, e.target.valueAsNumber); + } })] }))] })) })))] }))); +} diff --git a/packages/editor/dist/extensions/image/image.d.ts b/packages/editor/dist/extensions/image/image.d.ts new file mode 100644 index 000000000..7423a7ac4 --- /dev/null +++ b/packages/editor/dist/extensions/image/image.d.ts @@ -0,0 +1,33 @@ +import { Node } from "@tiptap/core"; +export interface ImageOptions { + inline: boolean; + allowBase64: boolean; + HTMLAttributes: Record; +} +export declare type ImageAttributes = Partial & { + src: string; + alt?: string; + title?: string; +}; +export declare type ImageAlignmentOptions = { + float?: boolean; + align?: "center" | "left" | "right"; +}; +export declare type ImageSizeOptions = { + width: number; + height: number; +}; +declare module "@tiptap/core" { + interface Commands { + image: { + /** + * Add an image + */ + setImage: (options: ImageAttributes) => ReturnType; + setImageAlignment: (options: ImageAlignmentOptions) => ReturnType; + setImageSize: (options: ImageSizeOptions) => ReturnType; + }; + } +} +export declare const inputRegex: RegExp; +export declare const ImageNode: Node; diff --git a/packages/editor/dist/extensions/image/image.js b/packages/editor/dist/extensions/image/image.js new file mode 100644 index 000000000..915061016 --- /dev/null +++ b/packages/editor/dist/extensions/image/image.js @@ -0,0 +1,108 @@ +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +import { Node, nodeInputRule, mergeAttributes } from "@tiptap/core"; +import { ReactNodeViewRenderer } from "@tiptap/react"; +import { ImageComponent } from "./component"; +export var inputRegex = /(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/; +export var ImageNode = Node.create({ + name: "image", + addOptions: function () { + return { + inline: false, + allowBase64: false, + HTMLAttributes: {}, + }; + }, + inline: function () { + return this.options.inline; + }, + group: function () { + return this.options.inline ? "inline" : "block"; + }, + draggable: true, + addAttributes: function () { + return { + src: { + default: null, + }, + alt: { + default: null, + }, + title: { + default: null, + }, + width: { default: null }, + height: { default: null }, + float: { + default: false, + }, + align: { default: "left" }, + }; + }, + parseHTML: function () { + return [ + { + tag: this.options.allowBase64 + ? "img[src]" + : 'img[src]:not([src^="data:"])', + }, + ]; + }, + renderHTML: function (_a) { + var HTMLAttributes = _a.HTMLAttributes; + return [ + "img", + mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), + ]; + }, + addNodeView: function () { + return ReactNodeViewRenderer(ImageComponent); + }, + addCommands: function () { + var _this = this; + return { + setImage: function (options) { + return function (_a) { + var commands = _a.commands; + return commands.insertContent({ + type: _this.name, + attrs: options, + }); + }; + }, + setImageAlignment: function (options) { + return function (_a) { + var commands = _a.commands; + return commands.updateAttributes(_this.name, __assign({}, options)); + }; + }, + setImageSize: function (options) { + return function (_a) { + var commands = _a.commands; + return commands.updateAttributes(_this.name, __assign({}, options)); + }; + }, + }; + }, + addInputRules: function () { + return [ + nodeInputRule({ + find: inputRegex, + type: this.type, + getAttributes: function (match) { + var alt = match[2], src = match[3], title = match[4]; + return { src: src, alt: alt, title: title }; + }, + }), + ]; + }, +}); diff --git a/packages/editor/dist/extensions/image/index.d.ts b/packages/editor/dist/extensions/image/index.d.ts new file mode 100644 index 000000000..0aa9b4bbd --- /dev/null +++ b/packages/editor/dist/extensions/image/index.d.ts @@ -0,0 +1 @@ +export * from "./image"; diff --git a/packages/editor/dist/extensions/image/index.js b/packages/editor/dist/extensions/image/index.js new file mode 100644 index 000000000..0aa9b4bbd --- /dev/null +++ b/packages/editor/dist/extensions/image/index.js @@ -0,0 +1 @@ +export * from "./image"; diff --git a/packages/editor/dist/extensions/orderedlist/index.d.ts b/packages/editor/dist/extensions/orderedlist/index.d.ts new file mode 100644 index 000000000..e5d88c387 --- /dev/null +++ b/packages/editor/dist/extensions/orderedlist/index.d.ts @@ -0,0 +1,3 @@ +import { OrderedList } from "./ordered-list"; +export * from "./ordered-list"; +export default OrderedList; diff --git a/packages/editor/dist/extensions/orderedlist/index.js b/packages/editor/dist/extensions/orderedlist/index.js new file mode 100644 index 000000000..e5d88c387 --- /dev/null +++ b/packages/editor/dist/extensions/orderedlist/index.js @@ -0,0 +1,3 @@ +import { OrderedList } from "./ordered-list"; +export * from "./ordered-list"; +export default OrderedList; diff --git a/packages/editor/dist/extensions/orderedlist/orderedlist.d.ts b/packages/editor/dist/extensions/orderedlist/orderedlist.d.ts new file mode 100644 index 000000000..16afc3a43 --- /dev/null +++ b/packages/editor/dist/extensions/orderedlist/orderedlist.d.ts @@ -0,0 +1 @@ +export declare const OrderedList: import("@tiptap/core").Node; diff --git a/packages/editor/dist/extensions/orderedlist/orderedlist.js b/packages/editor/dist/extensions/orderedlist/orderedlist.js new file mode 100644 index 000000000..c62d47936 --- /dev/null +++ b/packages/editor/dist/extensions/orderedlist/orderedlist.js @@ -0,0 +1,19 @@ +import TiptapOrderedList from "@tiptap/extension-ordered-list"; +export var OrderedList = TiptapOrderedList.extend({ + addAttributes: function () { + return { + listType: { + default: null, + parseHTML: function (element) { return element.style.listStyleType; }, + renderHTML: function (attributes) { + if (!attributes.listType) { + return {}; + } + return { + style: "list-style-type: ".concat(attributes.listType), + }; + }, + }, + }; + }, +}); diff --git a/packages/editor/dist/extensions/tablecell/index.d.ts b/packages/editor/dist/extensions/tablecell/index.d.ts new file mode 100644 index 000000000..a85cac945 --- /dev/null +++ b/packages/editor/dist/extensions/tablecell/index.d.ts @@ -0,0 +1,3 @@ +import { TableCell } from "./table-cell"; +export * from "./table-cell"; +export default TableCell; diff --git a/packages/editor/dist/extensions/tablecell/index.js b/packages/editor/dist/extensions/tablecell/index.js new file mode 100644 index 000000000..a85cac945 --- /dev/null +++ b/packages/editor/dist/extensions/tablecell/index.js @@ -0,0 +1,3 @@ +import { TableCell } from "./table-cell"; +export * from "./table-cell"; +export default TableCell; diff --git a/packages/editor/dist/extensions/tablecell/tablecell.d.ts b/packages/editor/dist/extensions/tablecell/tablecell.d.ts new file mode 100644 index 000000000..16c4d1e28 --- /dev/null +++ b/packages/editor/dist/extensions/tablecell/tablecell.d.ts @@ -0,0 +1 @@ +export declare const TableCell: import("@tiptap/core").Node; diff --git a/packages/editor/dist/extensions/tablecell/tablecell.js b/packages/editor/dist/extensions/tablecell/tablecell.js new file mode 100644 index 000000000..b45ffdfa4 --- /dev/null +++ b/packages/editor/dist/extensions/tablecell/tablecell.js @@ -0,0 +1,37 @@ +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +import TiptapTableCell from "@tiptap/extension-table-cell"; +export var TableCell = TiptapTableCell.extend({ + addAttributes: function () { + var _a; + return __assign(__assign({}, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)), { backgroundColor: addStyleAttribute("backgroundColor", "background-color"), color: addStyleAttribute("color", "color"), borderWidth: addStyleAttribute("borderWidth", "border-width", "px"), borderStyle: addStyleAttribute("borderStyle", "border-style"), borderColor: addStyleAttribute("borderColor", "border-color") }); + }, +}); +function addStyleAttribute(name, cssName, unit) { + return { + default: null, + parseHTML: function (element) { + var _a; + return unit + ? (_a = element.style[name]) === null || _a === void 0 ? void 0 : _a.toString().replace(unit, "") + : element.style[name]; + }, + renderHTML: function (attributes) { + if (!attributes[name]) { + return {}; + } + return { + style: "".concat(cssName, ": ").concat(attributes[name]).concat(unit || ""), + }; + }, + }; +} diff --git a/packages/editor/dist/extensions/textdirection/index.d.ts b/packages/editor/dist/extensions/textdirection/index.d.ts new file mode 100644 index 000000000..ea2fee63c --- /dev/null +++ b/packages/editor/dist/extensions/textdirection/index.d.ts @@ -0,0 +1,3 @@ +import { TextDirection } from "./text-direction"; +export * from "./text-direction"; +export default TextDirection; diff --git a/packages/editor/dist/extensions/textdirection/index.js b/packages/editor/dist/extensions/textdirection/index.js new file mode 100644 index 000000000..ea2fee63c --- /dev/null +++ b/packages/editor/dist/extensions/textdirection/index.js @@ -0,0 +1,3 @@ +import { TextDirection } from "./text-direction"; +export * from "./text-direction"; +export default TextDirection; diff --git a/packages/editor/dist/extensions/textdirection/textdirection.d.ts b/packages/editor/dist/extensions/textdirection/textdirection.d.ts new file mode 100644 index 000000000..a29fdf91d --- /dev/null +++ b/packages/editor/dist/extensions/textdirection/textdirection.d.ts @@ -0,0 +1,19 @@ +import { Extension } from "@tiptap/core"; +import "@tiptap/extension-text-style"; +declare type TextDirectionOptions = { + types: string[]; + defaultDirection: TextDirections; +}; +declare type TextDirections = "ltr" | "rtl"; +declare module "@tiptap/core" { + interface Commands { + textDirection: { + /** + * Set the font family + */ + setTextDirection: (direction: TextDirections) => ReturnType; + }; + } +} +export declare const TextDirection: Extension; +export {}; diff --git a/packages/editor/dist/extensions/textdirection/textdirection.js b/packages/editor/dist/extensions/textdirection/textdirection.js new file mode 100644 index 000000000..91d334519 --- /dev/null +++ b/packages/editor/dist/extensions/textdirection/textdirection.js @@ -0,0 +1,43 @@ +import { Extension } from "@tiptap/core"; +import "@tiptap/extension-text-style"; +export var TextDirection = Extension.create({ + name: "textDirection", + defaultOptions: { + types: ["paragraph", "heading"], + defaultDirection: "ltr", + }, + addGlobalAttributes: function () { + return [ + { + types: this.options.types, + attributes: { + textDirection: { + default: this.options.defaultDirection, + parseHTML: function (element) { return element.dir; }, + renderHTML: function (attributes) { + if (!attributes.textDirection) { + return {}; + } + return { + dir: attributes.textDirection, + }; + }, + }, + }, + }, + ]; + }, + addCommands: function () { + var _this = this; + return { + setTextDirection: function (direction) { + return function (_a) { + var commands = _a.commands; + return _this.options.types.every(function (type) { + return commands.updateAttributes(type, { textDirection: direction }); + }); + }; + }, + }; + }, +}); diff --git a/packages/editor/dist/index.d.ts b/packages/editor/dist/index.d.ts new file mode 100644 index 000000000..626f5581d --- /dev/null +++ b/packages/editor/dist/index.d.ts @@ -0,0 +1,6 @@ +/// +import { EditorOptions } from "@tiptap/react"; +import Toolbar from "./toolbar"; +import { ThemeConfig } from "@notesnook/theme/dist/theme/types"; +declare const useTiptap: (options?: Partial, deps?: import("react").DependencyList | undefined) => import("@tiptap/react").Editor | null; +export { useTiptap, Toolbar }; diff --git a/packages/editor/dist/index.js b/packages/editor/dist/index.js new file mode 100644 index 000000000..f0a8daa6b --- /dev/null +++ b/packages/editor/dist/index.js @@ -0,0 +1,108 @@ +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +var __rest = (this && this.__rest) || function (s, e) { + var t = {}; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) + t[p] = s[p]; + if (s != null && typeof Object.getOwnPropertySymbols === "function") + for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { + if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) + t[p[i]] = s[p[i]]; + } + return t; +}; +import CharacterCount from "@tiptap/extension-character-count"; +import Placeholder from "@tiptap/extension-placeholder"; +import Underline from "@tiptap/extension-underline"; +import { useEditor } from "@tiptap/react"; +import StarterKit from "@tiptap/starter-kit"; +import { useMemo } from "react"; +import { EditorView } from "prosemirror-view"; +import Toolbar from "./toolbar"; +import TextAlign from "@tiptap/extension-text-align"; +import Subscript from "@tiptap/extension-subscript"; +import Superscript from "@tiptap/extension-superscript"; +import FontSize from "./extensions/font-size"; +import TextDirection from "./extensions/text-direction"; +import TextStyle from "@tiptap/extension-text-style"; +import FontFamily from "@tiptap/extension-font-family"; +import BulletList from "./extensions/bullet-list"; +import OrderedList from "./extensions/ordered-list"; +import Highlight from "@tiptap/extension-highlight"; +import Color from "@tiptap/extension-color"; +import Link from "@tiptap/extension-link"; +import Table from "@tiptap/extension-table"; +import TableRow from "@tiptap/extension-table-row"; +import TableCell from "./extensions/table-cell"; +import TableHeader from "@tiptap/extension-table-header"; +import { ImageNode } from "./extensions/image"; +import { useTheme } from "@notesnook/theme"; +EditorView.prototype.updateState = function updateState(state) { + if (!this.docView) + return; // This prevents the matchesNode error on hot reloads + this.updateStateInner(state, this.state.plugins != state.plugins); +}; +var useTiptap = function (options, deps) { + if (options === void 0) { options = {}; } + var theme = options.theme, accent = options.accent, scale = options.scale, onCreate = options.onCreate, restOptions = __rest(options, ["theme", "accent", "scale", "onCreate"]); + var defaultOptions = useMemo(function () { return ({ + extensions: [ + TextStyle, + StarterKit, + CharacterCount, + Underline, + Subscript, + Superscript, + FontSize, + TextDirection, + FontFamily, + BulletList, + OrderedList, + Link, + ImageNode, + Table.configure({ + resizable: true, + allowTableNodeSelection: true, + }), + TableRow, + TableCell, + TableHeader, + Highlight.configure({ + multicolor: true, + }), + Color, + TextAlign.configure({ + types: ["heading", "paragraph"], + alignments: ["left", "right", "center", "justify"], + defaultAlignment: "left", + }), + Placeholder.configure({ + placeholder: "Start writing your note...", + }), + ], + onCreate: function (_a) { + var editor = _a.editor; + if (theme && accent && scale) { + editor.storage.theme = useTheme({ theme: theme, accent: accent, scale: scale }); + } + if (onCreate) + onCreate({ editor: editor }); + }, + }); }, [theme, accent, scale, onCreate]); + var editor = useEditor(__assign(__assign({}, defaultOptions), restOptions), deps); + /** + * Add editor to global for use in React Native. + */ + global.editor = editor; + return editor; +}; +export { useTiptap, Toolbar }; diff --git a/packages/editor/dist/toolbar/components/dropdown.d.ts b/packages/editor/dist/toolbar/components/dropdown.d.ts new file mode 100644 index 000000000..74f67791b --- /dev/null +++ b/packages/editor/dist/toolbar/components/dropdown.d.ts @@ -0,0 +1,8 @@ +/// +import { MenuItem } from "../../components/menu/types"; +declare type DropdownProps = { + selectedItem: string | JSX.Element; + items: MenuItem[]; +}; +export declare function Dropdown(props: DropdownProps): JSX.Element; +export {}; diff --git a/packages/editor/dist/toolbar/components/dropdown.js b/packages/editor/dist/toolbar/components/dropdown.js new file mode 100644 index 000000000..d7b2b968a --- /dev/null +++ b/packages/editor/dist/toolbar/components/dropdown.js @@ -0,0 +1,42 @@ +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; +import { useRef, useState } from "react"; +import { Button, Text } from "rebass"; +import { Icon } from "./icon"; +import { Icons } from "../icons"; +import { MenuPresenter } from "../../components/menu/menu"; +export function Dropdown(props) { + var items = props.items, selectedItem = props.selectedItem; + var buttonRef = useRef(null); + var _a = useState(false), isOpen = _a[0], setIsOpen = _a[1]; + return (_jsxs(_Fragment, { children: [_jsxs(Button, __assign({ ref: buttonRef, sx: { + p: 1, + m: 0, + bg: isOpen ? "hover" : "transparent", + mr: 1, + display: "flex", + alignItems: "center", + ":hover": { bg: "hover" }, + ":last-of-type": { + mr: 0, + }, + }, onClick: function () { return setIsOpen(function (s) { return !s; }); } }, { children: [typeof selectedItem === "string" ? (_jsx(Text, __assign({ sx: { fontSize: 12, mr: 1, color: "text" } }, { children: selectedItem }))) : (selectedItem), _jsx(Icon, { path: Icons.chevronDown, size: 16, color: "text" })] })), _jsx(MenuPresenter, { options: { + type: "menu", + position: { + target: buttonRef.current || undefined, + isTargetAbsolute: true, + location: "below", + yOffset: 5, + }, + }, isOpen: isOpen, items: items, onClose: function () { return setIsOpen(false); } })] })); +} diff --git a/packages/editor/dist/toolbar/components/icon.d.ts b/packages/editor/dist/toolbar/components/icon.d.ts new file mode 100644 index 000000000..1c7258431 --- /dev/null +++ b/packages/editor/dist/toolbar/components/icon.d.ts @@ -0,0 +1,14 @@ +/// +import { SchemeColors } from "@notesnook/theme/dist/theme/colorscheme"; +import { FlexProps } from "rebass"; +declare type IconProps = { + title?: string; + path: string; + size?: number; + color?: keyof SchemeColors; + stroke?: string; + rotate?: boolean; +}; +export declare type NNIconProps = FlexProps & IconProps; +export declare function Icon(props: NNIconProps): JSX.Element; +export {}; diff --git a/packages/editor/dist/toolbar/components/icon.js b/packages/editor/dist/toolbar/components/icon.js new file mode 100644 index 000000000..c9a8f6af4 --- /dev/null +++ b/packages/editor/dist/toolbar/components/icon.js @@ -0,0 +1,41 @@ +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +var __rest = (this && this.__rest) || function (s, e) { + var t = {}; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) + t[p] = s[p]; + if (s != null && typeof Object.getOwnPropertySymbols === "function") + for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { + if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) + t[p[i]] = s[p[i]]; + } + return t; +}; +import { jsx as _jsx } from "react/jsx-runtime"; +import MDIIcon from "@mdi/react"; +import { useTheme } from "emotion-theming"; +import { Flex } from "rebass"; +function MDIIconWrapper(_a) { + var title = _a.title, path = _a.path, _b = _a.size, size = _b === void 0 ? 24 : _b, _c = _a.color, color = _c === void 0 ? "icon" : _c, stroke = _a.stroke, rotate = _a.rotate; + var theme = useTheme(); + var themedColor = theme.colors + ? theme.colors[color] + : color; + return (_jsx(MDIIcon, { title: title, path: path, size: size + "px", style: { + strokeWidth: stroke || "0px", + stroke: themedColor, + }, color: themedColor, spin: rotate })); +} +export function Icon(props) { + var sx = props.sx, title = props.title, color = props.color, size = props.size, stroke = props.stroke, rotate = props.rotate, path = props.path, restProps = __rest(props, ["sx", "title", "color", "size", "stroke", "rotate", "path"]); + return (_jsx(Flex, __assign({ sx: __assign({ flexShrink: 0, justifyContent: "center", alignItems: "center" }, sx) }, restProps, { children: _jsx(MDIIconWrapper, { title: title, path: path, rotate: rotate, color: color, stroke: stroke, size: size }) }))); +} diff --git a/packages/editor/dist/toolbar/components/popup.d.ts b/packages/editor/dist/toolbar/components/popup.d.ts new file mode 100644 index 000000000..a5be83a3e --- /dev/null +++ b/packages/editor/dist/toolbar/components/popup.d.ts @@ -0,0 +1,17 @@ +import { ButtonProps } from "rebass"; +import { IconNames } from "../icons"; +import { PropsWithChildren } from "react"; +import { SchemeColors } from "@notesnook/theme/dist/theme/colorscheme"; +declare type PopupProps = { + title?: string; + action?: PopupButtonProps; +}; +export declare function Popup(props: PropsWithChildren): JSX.Element; +declare type PopupButtonProps = ButtonProps & { + text?: string; + loading?: boolean; + icon?: IconNames; + iconSize?: number; + iconColor?: keyof SchemeColors; +}; +export {}; diff --git a/packages/editor/dist/toolbar/components/popup.js b/packages/editor/dist/toolbar/components/popup.js new file mode 100644 index 000000000..292dfbe9b --- /dev/null +++ b/packages/editor/dist/toolbar/components/popup.js @@ -0,0 +1,45 @@ +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +var __rest = (this && this.__rest) || function (s, e) { + var t = {}; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) + t[p] = s[p]; + if (s != null && typeof Object.getOwnPropertySymbols === "function") + for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { + if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) + t[p[i]] = s[p[i]]; + } + return t; +}; +import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; +import { Button, Flex, Text } from "rebass"; +import { Icon } from "./icon"; +import { Icons } from "../icons"; +export function Popup(props) { + var title = props.title, action = props.action, children = props.children; + return (_jsxs(Flex, __assign({ sx: { + bg: "background", + flexDirection: "column", + borderRadius: "default", + border: "1px solid var(--border)", + boxShadow: "menu", + } }, { children: [title && (_jsxs(Flex, __assign({ sx: { + justifyContent: "space-between", + alignItems: "center", + mx: 1, + mt: 1, + } }, { children: [_jsx(Text, __assign({ variant: "subtitle" }, { children: title })), action && (_jsx(PopupButton, __assign({ "data-test-id": "popup-no", color: "text" }, action)))] }))), children] }))); +} +function PopupButton(props) { + var text = props.text, loading = props.loading, icon = props.icon, iconColor = props.iconColor, iconSize = props.iconSize, restProps = __rest(props, ["text", "loading", "icon", "iconColor", "iconSize"]); + return (_jsx(Button, __assign({ variant: "dialog", sx: { p: 1, px: 2 } }, restProps, { children: loading ? (_jsx(Icon, { path: Icons.loading, size: 16, rotate: true, color: "primary" })) : icon ? (_jsx(Icon, { path: Icons[icon], size: iconSize || 18, color: iconColor || "icon" })) : (text) }))); +} diff --git a/packages/editor/dist/toolbar/components/toolbutton.d.ts b/packages/editor/dist/toolbar/components/toolbutton.d.ts new file mode 100644 index 000000000..934abc304 --- /dev/null +++ b/packages/editor/dist/toolbar/components/toolbutton.d.ts @@ -0,0 +1,13 @@ +import { SchemeColors } from "@notesnook/theme/dist/theme/colorscheme"; +import React from "react"; +import { ButtonProps } from "rebass"; +import { IconNames } from "../icons"; +declare type ToolButtonProps = ButtonProps & { + icon: IconNames; + iconColor?: keyof SchemeColors; + iconSize?: number; + toggled: boolean; + buttonRef?: React.Ref; +}; +export declare function ToolButton(props: ToolButtonProps): JSX.Element; +export {}; diff --git a/packages/editor/dist/toolbar/components/toolbutton.js b/packages/editor/dist/toolbar/components/toolbutton.js new file mode 100644 index 000000000..6df824fe5 --- /dev/null +++ b/packages/editor/dist/toolbar/components/toolbutton.js @@ -0,0 +1,32 @@ +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +var __rest = (this && this.__rest) || function (s, e) { + var t = {}; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) + t[p] = s[p]; + if (s != null && typeof Object.getOwnPropertySymbols === "function") + for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { + if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) + t[p[i]] = s[p[i]]; + } + return t; +}; +import { jsx as _jsx } from "react/jsx-runtime"; +import { Button } from "rebass"; +import { Icons } from "../icons"; +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, buttonProps = __rest(props, ["id", "icon", "iconSize", "iconColor", "toggled", "sx", "buttonRef"]); + return (_jsx(Button, __assign({ ref: buttonRef, tabIndex: -1, id: "tool-".concat(id), sx: __assign({ p: 1, m: 0, bg: toggled ? "hover" : "transparent", mr: 1, ":hover": { bg: "hover" }, ":last-of-type": { + mr: 0, + } }, sx) }, buttonProps, { children: _jsx(Icon, { path: Icons[icon], color: iconColor || "text", size: iconSize || 18 }) }))); +} diff --git a/packages/editor/dist/toolbar/floatingmenus/index.d.ts b/packages/editor/dist/toolbar/floatingmenus/index.d.ts new file mode 100644 index 000000000..b02c024c2 --- /dev/null +++ b/packages/editor/dist/toolbar/floatingmenus/index.d.ts @@ -0,0 +1,3 @@ +/// +import { FloatingMenuProps } from "./types"; +export declare function EditorFloatingMenus(props: FloatingMenuProps): JSX.Element; diff --git a/packages/editor/dist/toolbar/floatingmenus/index.js b/packages/editor/dist/toolbar/floatingmenus/index.js new file mode 100644 index 000000000..c3e948034 --- /dev/null +++ b/packages/editor/dist/toolbar/floatingmenus/index.js @@ -0,0 +1,16 @@ +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; +import { TableRowFloatingMenu, TableColumnFloatingMenu } from "./table"; +export function EditorFloatingMenus(props) { + return (_jsxs(_Fragment, { children: [_jsx(TableRowFloatingMenu, __assign({}, props)), _jsx(TableColumnFloatingMenu, __assign({}, props))] })); +} diff --git a/packages/editor/dist/toolbar/floatingmenus/table.d.ts b/packages/editor/dist/toolbar/floatingmenus/table.d.ts new file mode 100644 index 000000000..f3f0a5d3f --- /dev/null +++ b/packages/editor/dist/toolbar/floatingmenus/table.d.ts @@ -0,0 +1,4 @@ +/// +import { FloatingMenuProps } from "./types"; +export declare function TableRowFloatingMenu(props: FloatingMenuProps): JSX.Element | null; +export declare function TableColumnFloatingMenu(props: FloatingMenuProps): JSX.Element | null; diff --git a/packages/editor/dist/toolbar/floatingmenus/table.js b/packages/editor/dist/toolbar/floatingmenus/table.js new file mode 100644 index 000000000..99581ec79 --- /dev/null +++ b/packages/editor/dist/toolbar/floatingmenus/table.js @@ -0,0 +1,427 @@ +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; + return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (_) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; +import { Slider } from "@rebass/forms"; +import { useEffect, useRef, useState } from "react"; +import { Flex, Text } from "rebass"; +import { MenuPresenter } from "../../components/menu/menu"; +import { Popup } from "../components/popup"; +import { ToolButton } from "../components/tool-button"; +import { ColorPicker, DEFAULT_COLORS } from "../tools/colors"; +import { selectedRect } from "prosemirror-tables"; +export function TableRowFloatingMenu(props) { + var editor = props.editor; + var theme = editor.storage.theme; + var _a = useState(null), position = _a[0], setPosition = _a[1]; + var _b = useState(false), isMenuOpen = _b[0], setIsMenuOpen = _b[1]; + useEffect(function () { + var _a; + if (!editor.isActive("tableRow")) + return; + var $from = editor.state.selection.$from; + var selectedNode = $from.node(); + var pos = selectedNode.isTextblock ? $from.before() : $from.pos; + var currentRow = (_a = editor.view.nodeDOM(pos)) === null || _a === void 0 ? void 0 : _a.closest("tr"); + if (!currentRow) + return; + setPosition(function (old) { + if ((old === null || old === void 0 ? void 0 : old.target) === currentRow) + return old; + return { + isTargetAbsolute: true, + location: "left", + xOffset: -5, + target: currentRow, + // parent: editor.view.dom as HTMLElement, + }; + }); + }, [editor.state.selection]); + if (!position) + return null; + return (_jsxs(MenuPresenter, __assign({ isOpen: true, items: [], onClose: function () { }, options: { + type: "autocomplete", + position: position, + } }, { children: [_jsxs(Flex, __assign({ sx: { + bg: "background", + flexWrap: "nowrap", + borderRadius: "default", + opacity: isMenuOpen ? 1 : 0.3, + ":hover": { + opacity: 1, + }, + } }, { children: [_jsx(ToolButton, { toggled: isMenuOpen, title: "Row properties", id: "properties", icon: "more", onClick: function () { return setIsMenuOpen(true); }, iconSize: 16, sx: { mr: 0, p: "3px", borderRadius: "small" } }), _jsx(ToolButton, { toggled: false, title: "Insert row below", id: "insertRowBelow", icon: "insertRowBelow", onClick: function () { return editor.chain().focus().addRowAfter().run(); }, sx: { mr: 0, p: "3px", borderRadius: "small" }, iconSize: 16 })] })), _jsx(MenuPresenter, { isOpen: isMenuOpen, onClose: function () { + setIsMenuOpen(false); + editor.commands.focus(); + }, options: { + type: "menu", + position: {}, + }, items: [ + { + key: "addRowAbove", + type: "menuitem", + title: "Add row above", + onClick: function () { return editor.chain().focus().addRowBefore().run(); }, + icon: "insertRowAbove", + }, + { + key: "moveRowUp", + type: "menuitem", + title: "Move row up", + onClick: function () { return moveRowUp(editor); }, + icon: "moveRowUp", + }, + { + key: "moveRowDown", + type: "menuitem", + title: "Move row down", + onClick: function () { return moveRowDown(editor); }, + icon: "moveRowDown", + }, + { + key: "deleteRow", + type: "menuitem", + title: "Delete row", + onClick: function () { return editor.chain().focus().deleteRow().run(); }, + icon: "deleteRow", + }, + ] })] }))); +} +export function TableColumnFloatingMenu(props) { + var _this = this; + var editor = props.editor; + var _a = useState(null), position = _a[0], setPosition = _a[1]; + var _b = useState(false), isMenuOpen = _b[0], setIsMenuOpen = _b[1]; + var _c = useState(false), showCellProps = _c[0], setShowCellProps = _c[1]; + var _d = useState(null), menuPosition = _d[0], setMenuPosition = _d[1]; + useEffect(function () { + var _a; + if (!editor.isActive("tableRow")) + return; + var $from = editor.state.selection.$from; + var selectedNode = $from.node(); + var pos = selectedNode.isTextblock ? $from.before() : $from.pos; + var currentCell = (_a = editor.view.nodeDOM(pos)) === null || _a === void 0 ? void 0 : _a.closest("td,th"); + var currentTable = currentCell === null || currentCell === void 0 ? void 0 : currentCell.closest("table"); + if (!currentCell || !currentTable) + return; + setPosition(function (old) { + if ((old === null || old === void 0 ? void 0 : old.target) === currentCell) + return old; + return { + isTargetAbsolute: true, + location: "top", + align: "center", + yAnchor: currentTable, + yOffset: -2, + target: currentCell, + }; + }); + }, [editor.state.selection]); + if (!position) + return null; + return (_jsxs(MenuPresenter, __assign({ isOpen: true, items: [], onClose: function () { }, options: { + type: "autocomplete", + position: position, + } }, { children: [_jsxs(Flex, __assign({ sx: { + bg: "background", + flexWrap: "nowrap", + borderRadius: "default", + opacity: isMenuOpen || showCellProps ? 1 : 0.3, + ":hover": { + opacity: 1, + }, + } }, { children: [_jsx(ToolButton, { toggled: isMenuOpen, title: "Column properties", id: "properties", icon: "more", onClick: function () { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) { + return [2 /*return*/, setIsMenuOpen(true)]; + }); }); }, iconSize: 16, sx: { mr: 0, p: "3px", borderRadius: "small" } }), _jsx(ToolButton, { toggled: false, title: "Insert column right", id: "insertColumnRight", icon: "insertColumnRight", onClick: function () { return editor.chain().focus().addColumnAfter().run(); }, sx: { mr: 0, p: "3px", borderRadius: "small" }, iconSize: 16 })] })), _jsx(MenuPresenter, { isOpen: isMenuOpen, onClose: function () { + setIsMenuOpen(false); + editor.commands.focus(); + }, options: { + type: "menu", + position: {}, + }, items: [ + { + key: "addColumnAbove", + type: "menuitem", + title: "Add column left", + onClick: function () { return editor.chain().focus().addColumnBefore().run(); }, + icon: "insertColumnLeft", + }, + { + key: "moveColumnLeft", + type: "menuitem", + title: "Move column left", + onClick: function () { return moveColumnLeft(editor); }, + icon: "moveColumnLeft", + }, + { + key: "moveColumnRight", + type: "menuitem", + title: "Move column right", + onClick: function () { return moveColumnRight(editor); }, + icon: "moveColumnRight", + }, + { + key: "deleteColumn", + type: "menuitem", + title: "Delete column", + onClick: function () { return editor.chain().focus().deleteColumn().run(); }, + icon: "deleteColumn", + }, + { + key: "sortDesc", + type: "menuitem", + title: "Sort descending", + onClick: function () { }, + icon: "sortDesc", + }, + { + key: "cellProperties", + type: "menuitem", + title: "Cell properties", + onClick: function () { + setShowCellProps(true); + setMenuPosition({ + target: position.target || undefined, + isTargetAbsolute: true, + yOffset: 10, + location: "below", + }); + }, + icon: "cellProperties", + }, + ] }), _jsx(MenuPresenter, __assign({ isOpen: showCellProps, onClose: function () { + setShowCellProps(false); + editor.commands.focus(); + }, options: { + type: "menu", + position: menuPosition || {}, + }, items: [] }, { children: _jsx(CellProperties, { editor: editor, onClose: function () { return setShowCellProps(false); } }) }))] }))); +} +function CellProperties(props) { + var editor = props.editor, onClose = props.onClose; + var attributes = editor.getAttributes("tableCell"); + console.log(attributes); + return (_jsx(Popup, __assign({ title: "Cell properties", action: { + icon: "close", + iconColor: "error", + onClick: onClose, + } }, { children: _jsxs(Flex, __assign({ sx: { flexDirection: "column", width: 200, px: 1, mb: 2 } }, { children: [_jsx(ColorPickerTool, { color: attributes.backgroundColor, title: "Background color", icon: "backgroundColor", onColorChange: function (color) { + return editor.commands.setCellAttribute("backgroundColor", color); + } }), _jsx(ColorPickerTool, { color: attributes.color, title: "Text color", icon: "textColor", onColorChange: function (color) { + return editor.commands.setCellAttribute("color", color); + } }), _jsx(ColorPickerTool, { color: attributes.borderColor, title: "Border color", icon: "borderColor", onColorChange: function (color) { + return editor.commands.setCellAttribute("borderColor", color); + } }), _jsxs(Flex, __assign({ sx: { flexDirection: "column" } }, { children: [_jsxs(Flex, __assign({ sx: { + justifyContent: "space-between", + alignItems: "center", + mt: 1, + } }, { children: [_jsx(Text, __assign({ variant: "body" }, { children: "Border width" })), _jsxs(Text, __assign({ variant: "body" }, { children: [attributes.borderWidth || 1, "px"] }))] })), _jsx(Slider, { min: 1, max: 5, value: attributes.borderWidth || 1, onChange: function (e) { + editor.commands.setCellAttribute("borderWidth", e.target.valueAsNumber); + } })] }))] })) }))); +} +function ColorPickerTool(props) { + var color = props.color, title = props.title, icon = props.icon, onColorChange = props.onColorChange; + var _a = useState(false), isOpen = _a[0], setIsOpen = _a[1]; + var buttonRef = useRef(null); + return (_jsxs(_Fragment, { children: [_jsxs(Flex, __assign({ sx: { justifyContent: "space-between", alignItems: "center", mt: 1 } }, { children: [_jsx(Text, __assign({ variant: "body" }, { children: title })), _jsx(ToolButton, { buttonRef: buttonRef, toggled: isOpen, title: title, id: icon, icon: icon, iconSize: 16, sx: { + p: "2.5px", + borderRadius: "small", + backgroundColor: color || "transparent", + ":hover": { bg: color, filter: "brightness(90%)" }, + }, onClick: function () { return setIsOpen(true); } })] })), _jsx(MenuPresenter, __assign({ isOpen: isOpen, onClose: function () { return setIsOpen(false); }, items: [], options: { + type: "menu", + position: { + target: buttonRef.current || undefined, + location: "below", + align: "center", + isTargetAbsolute: true, + yOffset: 5, + }, + } }, { children: _jsx(Flex, __assign({ sx: { + flexDirection: "column", + bg: "background", + boxShadow: "menu", + border: "1px solid var(--border)", + borderRadius: "default", + p: 1, + width: 160, + } }, { children: _jsx(ColorPicker, { colors: DEFAULT_COLORS, color: color, onClear: function () { return onColorChange(); }, onChange: function (color) { return onColorChange(color); } }) })) }))] })); +} +/** + * Done: + * insertTable + * + * addRowBefore + * addRowAfter + * deleteRow + * + * addColumnBefore + * addColumnAfter + * deleteColumn + * + * setCellAttribute + * + * deleteTable + * + * mergeCells + * splitCell + * mergeOrSplit + * + * toggleHeaderColumn + * toggleHeaderRow + * toggleHeaderCell + * fixTables + * goToNextCell + * goToPreviousCell + */ +function moveColumnRight(editor) { + var tr = editor.state.tr; + var rect = selectedRect(editor.state); + if (rect.right === rect.map.width) + return; + var transaction = moveColumn(tr, rect, rect.left, rect.left + 1); + if (!transaction) + return; + editor.view.dispatch(transaction); +} +function moveColumnLeft(editor) { + var tr = editor.state.tr; + var rect = selectedRect(editor.state); + if (rect.left === 0) + return; + var transaction = moveColumn(tr, rect, rect.left, rect.left - 1); + if (!transaction) + return; + editor.view.dispatch(transaction); +} +function moveRowDown(editor) { + var tr = editor.state.tr; + var rect = selectedRect(editor.state); + if (rect.top + 1 === rect.map.height) + return; + var transaction = moveRow(tr, rect, rect.top, rect.top + 1); + if (!transaction) + return; + editor.view.dispatch(transaction); +} +function moveRowUp(editor) { + var tr = editor.state.tr; + var rect = selectedRect(editor.state); + if (rect.top === 0) + return; + var transaction = moveRow(tr, rect, rect.top, rect.top - 1); + if (!transaction) + return; + editor.view.dispatch(transaction); +} +function moveColumn(tr, rect, from, to) { + var fromCells = getColumnCells(rect, from); + var toCells = getColumnCells(rect, to); + return moveCells(tr, rect, fromCells, toCells); +} +function getColumnCells(_a, col) { + var map = _a.map, table = _a.table; + var cells = []; + for (var row = 0; row < map.height;) { + var index = row * map.width + col; + if (index >= map.map.length) + break; + var pos = map.map[index]; + var cell = table.nodeAt(pos); + if (!cell) + continue; + cells.push({ cell: cell, pos: pos }); + row += cell.attrs.rowspan; + console.log(cell.textContent); + } + return cells; +} +function moveRow(tr, rect, from, to) { + var fromCells = getRowCells(rect, from); + var toCells = getRowCells(rect, to); + return moveCells(tr, rect, fromCells, toCells); +} +function getRowCells(_a, row) { + var map = _a.map, table = _a.table; + var cells = []; + for (var col = 0, index = row * map.width; col < map.width; col++, index++) { + if (index >= map.map.length) + break; + var pos = map.map[index]; + var cell = table.nodeAt(pos); + if (!cell) + continue; + cells.push({ cell: cell, pos: pos }); + col += cell.attrs.colspan - 1; + } + return cells; +} +function moveCells(tr, rect, fromCells, toCells) { + if (fromCells.length !== toCells.length) + return; + var mapStart = tr.mapping.maps.length; + for (var i = 0; i < toCells.length; ++i) { + var fromCell = fromCells[i]; + var toCell = toCells[i]; + var fromStart = tr.mapping + .slice(mapStart) + .map(rect.tableStart + fromCell.pos); + var fromEnd = fromStart + fromCell.cell.nodeSize; + var fromSlice = tr.doc.slice(fromStart, fromEnd); + var toStart = tr.mapping + .slice(mapStart) + .map(rect.tableStart + toCell.pos); + var toEnd = toStart + toCell.cell.nodeSize; + var toSlice = tr.doc.slice(toStart, toEnd); + tr.replace(toStart, toEnd, fromSlice); + fromStart = tr.mapping.slice(mapStart).map(rect.tableStart + fromCell.pos); + fromEnd = fromStart + fromCell.cell.nodeSize; + tr.replace(fromStart, fromEnd, toSlice); + } + return tr; +} diff --git a/packages/editor/dist/toolbar/floatingmenus/types.d.ts b/packages/editor/dist/toolbar/floatingmenus/types.d.ts new file mode 100644 index 000000000..ce475de33 --- /dev/null +++ b/packages/editor/dist/toolbar/floatingmenus/types.d.ts @@ -0,0 +1,4 @@ +import { Editor } from "@tiptap/core"; +export declare type FloatingMenuProps = { + editor: Editor; +}; diff --git a/packages/editor/dist/toolbar/floatingmenus/types.js b/packages/editor/dist/toolbar/floatingmenus/types.js new file mode 100644 index 000000000..cb0ff5c3b --- /dev/null +++ b/packages/editor/dist/toolbar/floatingmenus/types.js @@ -0,0 +1 @@ +export {}; diff --git a/packages/editor/dist/toolbar/icons.d.ts b/packages/editor/dist/toolbar/icons.d.ts new file mode 100644 index 000000000..c3d34b14a --- /dev/null +++ b/packages/editor/dist/toolbar/icons.d.ts @@ -0,0 +1,50 @@ +export declare const Icons: { + bold: string; + italic: string; + underline: string; + strikethrough: string; + code: string; + alignCenter: string; + alignLeft: string; + alignRight: string; + alignJustify: string; + subscript: string; + superscript: string; + horizontalRule: string; + codeblock: string; + blockquote: string; + formatClear: string; + ltr: string; + rtl: string; + numberedList: string; + bulletList: string; + highlight: string; + textColor: string; + link: string; + image: string; + chevronDown: string; + colorClear: string; + check: string; + loading: string; + more: string; + upload: string; + attachment: string; + table: string; + insertRowBelow: string; + insertRowAbove: string; + moveRowDown: string; + moveRowUp: string; + deleteRow: string; + toggleHeaderRow: string; + insertColumnRight: string; + insertColumnLeft: string; + moveColumnRight: string; + moveColumnLeft: string; + deleteColumn: string; + cellProperties: string; + backgroundColor: string; + borderColor: string; + close: string; + sortDesc: string; +}; +export declare type IconNames = keyof typeof Icons; diff --git a/packages/editor/dist/toolbar/icons.js b/packages/editor/dist/toolbar/icons.js new file mode 100644 index 000000000..239b62ef3 --- /dev/null +++ b/packages/editor/dist/toolbar/icons.js @@ -0,0 +1,50 @@ +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, mdiTableRowPlusBefore, mdiTableRowRemove, mdiTableColumnPlusBefore, mdiTableColumnRemove, mdiUploadOutline, mdiPlus, mdiSquareRoundedBadgeOutline, mdiFormatColorFill, mdiBorderAllVariant, mdiClose, mdiSortDescending, mdiArrowExpandRight, mdiArrowExpandLeft, mdiArrowExpandDown, mdiArrowExpandUp, } 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, + image: mdiImage, + chevronDown: mdiChevronDown, + colorClear: mdiInvertColorsOff, + check: mdiCheck, + loading: mdiLoading, + more: mdiDotsVertical, + upload: mdiUploadOutline, + attachment: mdiAttachment, + table: mdiTable, + insertRowBelow: mdiPlus, + insertRowAbove: mdiTableRowPlusBefore, + moveRowDown: mdiArrowExpandDown, + moveRowUp: mdiArrowExpandUp, + deleteRow: mdiTableRowRemove, + toggleHeaderRow: mdiTableBorder, + insertColumnRight: mdiPlus, + insertColumnLeft: mdiTableColumnPlusBefore, + moveColumnRight: mdiArrowExpandRight, + moveColumnLeft: mdiArrowExpandLeft, + deleteColumn: mdiTableColumnRemove, + cellProperties: mdiSquareRoundedBadgeOutline, + backgroundColor: mdiFormatColorFill, + borderColor: mdiBorderAllVariant, + close: mdiClose, + sortDesc: mdiSortDescending, +}; diff --git a/packages/editor/dist/toolbar/index.d.ts b/packages/editor/dist/toolbar/index.d.ts new file mode 100644 index 000000000..868030ec7 --- /dev/null +++ b/packages/editor/dist/toolbar/index.d.ts @@ -0,0 +1,2 @@ +import { Toolbar } from "./toolbar"; +export default Toolbar; diff --git a/packages/editor/dist/toolbar/index.js b/packages/editor/dist/toolbar/index.js new file mode 100644 index 000000000..868030ec7 --- /dev/null +++ b/packages/editor/dist/toolbar/index.js @@ -0,0 +1,2 @@ +import { Toolbar } from "./toolbar"; +export default Toolbar; diff --git a/packages/editor/dist/toolbar/menus/index.d.ts b/packages/editor/dist/toolbar/menus/index.d.ts new file mode 100644 index 000000000..b02c024c2 --- /dev/null +++ b/packages/editor/dist/toolbar/menus/index.d.ts @@ -0,0 +1,3 @@ +/// +import { FloatingMenuProps } from "./types"; +export declare function EditorFloatingMenus(props: FloatingMenuProps): JSX.Element; diff --git a/packages/editor/dist/toolbar/menus/index.js b/packages/editor/dist/toolbar/menus/index.js new file mode 100644 index 000000000..a2c6d9441 --- /dev/null +++ b/packages/editor/dist/toolbar/menus/index.js @@ -0,0 +1,16 @@ +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime"; +import { TableRowFloatingMenu } from "./table"; +export function EditorFloatingMenus(props) { + return (_jsx(_Fragment, { children: _jsx(TableRowFloatingMenu, __assign({}, props)) })); +} diff --git a/packages/editor/dist/toolbar/menus/table.d.ts b/packages/editor/dist/toolbar/menus/table.d.ts new file mode 100644 index 000000000..6885ef0a3 --- /dev/null +++ b/packages/editor/dist/toolbar/menus/table.d.ts @@ -0,0 +1,3 @@ +/// +import { FloatingMenuProps } from "./types"; +export declare function TableRowFloatingMenu(props: FloatingMenuProps): JSX.Element; diff --git a/packages/editor/dist/toolbar/menus/table.js b/packages/editor/dist/toolbar/menus/table.js new file mode 100644 index 000000000..3baca99af --- /dev/null +++ b/packages/editor/dist/toolbar/menus/table.js @@ -0,0 +1,21 @@ +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +import { jsx as _jsx } from "react/jsx-runtime"; +import { FloatingMenu } from "@tiptap/react"; +import { Flex, Text } from "rebass"; +export function TableRowFloatingMenu(props) { + var editor = props.editor; + return (_jsx(FloatingMenu, __assign({ editor: editor, shouldShow: function (_a) { + var editor = _a.editor, state = _a.state; + return editor.isActive("tableRow") && state.selection.empty; + } }, { children: _jsx(Flex, __assign({ sx: { bg: "background" } }, { children: _jsx(Text, { children: "Hello" }) })) }))); +} diff --git a/packages/editor/dist/toolbar/menus/types.d.ts b/packages/editor/dist/toolbar/menus/types.d.ts new file mode 100644 index 000000000..ce475de33 --- /dev/null +++ b/packages/editor/dist/toolbar/menus/types.d.ts @@ -0,0 +1,4 @@ +import { Editor } from "@tiptap/core"; +export declare type FloatingMenuProps = { + editor: Editor; +}; diff --git a/packages/editor/dist/toolbar/menus/types.js b/packages/editor/dist/toolbar/menus/types.js new file mode 100644 index 000000000..cb0ff5c3b --- /dev/null +++ b/packages/editor/dist/toolbar/menus/types.js @@ -0,0 +1 @@ +export {}; diff --git a/packages/editor/dist/toolbar/toolbar.d.ts b/packages/editor/dist/toolbar/toolbar.d.ts new file mode 100644 index 000000000..50fc87fa2 --- /dev/null +++ b/packages/editor/dist/toolbar/toolbar.d.ts @@ -0,0 +1,8 @@ +/// +import { ThemeConfig } from "@notesnook/theme/dist/theme/types"; +import { Editor } from "@tiptap/core"; +declare type ToolbarProps = ThemeConfig & { + editor: Editor | null; +}; +export declare function Toolbar(props: ToolbarProps): JSX.Element | null; +export {}; diff --git a/packages/editor/dist/toolbar/toolbar.js b/packages/editor/dist/toolbar/toolbar.js new file mode 100644 index 000000000..ba9e1508a --- /dev/null +++ b/packages/editor/dist/toolbar/toolbar.js @@ -0,0 +1,45 @@ +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; +import { useTheme } from "@notesnook/theme"; +import { Flex } from "rebass"; +import { findToolById } from "./tools"; +import { ThemeProvider } from "emotion-theming"; +import { EditorFloatingMenus } from "./floating-menus"; +export function Toolbar(props) { + var editor = props.editor, theme = props.theme, accent = props.accent, scale = props.scale; + var themeProperties = useTheme({ accent: accent, theme: theme, scale: scale }); + var tools = [ + ["bold", "italic", "underline", "strikethrough", "code"], + ["fontSize", "fontFamily", "headings"], + ["alignLeft", "alignCenter", "alignRight", "alignJustify"], + ["subscript", "superscript", "horizontalRule"], + ["codeblock", "blockquote"], + ["formatClear", "ltr", "rtl"], + ["numberedList", "bulletList"], + ["link", "image", "attachment", "table"], + ["textColor", "highlight"], + ]; + if (!editor) + return null; + return (_jsxs(ThemeProvider, __assign({ theme: themeProperties }, { children: [_jsx(Flex, __assign({ sx: { flexWrap: "wrap" } }, { children: tools.map(function (tools) { + return (_jsx(Flex, __assign({ className: "toolbar-group", sx: { + pr: 2, + mr: 2, + borderRight: "1px solid var(--border)", + ":last-of-type": { mr: 0, pr: 0, borderRight: "none" }, + } }, { children: tools.map(function (toolId) { + var Component = findToolById(toolId).render; + return _jsx(Component, { editor: editor }); + }) }))); + }) })), _jsx(EditorFloatingMenus, { editor: editor })] }))); +} diff --git a/packages/editor/dist/toolbar/tools/alignment.d.ts b/packages/editor/dist/toolbar/tools/alignment.d.ts new file mode 100644 index 000000000..3e93ca384 --- /dev/null +++ b/packages/editor/dist/toolbar/tools/alignment.d.ts @@ -0,0 +1,25 @@ +/// +import { ITool, ToolProps } from "../types"; +import { ToolId } from "."; +import { IconNames } from "../icons"; +declare class AlignmentTool implements ITool { + readonly id: TId; + readonly title: TTitle; + private readonly alignment; + private readonly icon; + constructor(id: TId, title: TTitle, alignment: "left" | "right" | "center" | "justify", icon: IconNames); + render: (props: ToolProps) => JSX.Element; +} +export declare class AlignCenter extends AlignmentTool { + constructor(); +} +export declare class AlignRight extends AlignmentTool { + constructor(); +} +export declare class AlignLeft extends AlignmentTool { + constructor(); +} +export declare class AlignJustify extends AlignmentTool { + constructor(); +} +export {}; diff --git a/packages/editor/dist/toolbar/tools/alignment.js b/packages/editor/dist/toolbar/tools/alignment.js new file mode 100644 index 000000000..706356f12 --- /dev/null +++ b/packages/editor/dist/toolbar/tools/alignment.js @@ -0,0 +1,65 @@ +var __extends = (this && this.__extends) || (function () { + var extendStatics = function (d, b) { + extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; + return extendStatics(d, b); + }; + return function (d, b) { + if (typeof b !== "function" && b !== null) + throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); + }; +})(); +import { jsx as _jsx } from "react/jsx-runtime"; +import { ToolButton } from "../components/tool-button"; +var AlignmentTool = /** @class */ (function () { + function AlignmentTool(id, title, alignment, icon) { + var _this = this; + this.id = id; + this.title = title; + this.alignment = alignment; + this.icon = icon; + this.render = function (props) { + var editor = props.editor; + return (_jsx(ToolButton, { title: _this.title, id: _this.id, icon: _this.icon, onClick: function () { + return editor.chain().focus().setTextAlign(_this.alignment).run(); + }, toggled: editor.isActive({ textAlign: _this.alignment }) })); + }; + } + return AlignmentTool; +}()); +var AlignCenter = /** @class */ (function (_super) { + __extends(AlignCenter, _super); + function AlignCenter() { + return _super.call(this, "alignCenter", "Align center", "center", "alignCenter") || this; + } + return AlignCenter; +}(AlignmentTool)); +export { AlignCenter }; +var AlignRight = /** @class */ (function (_super) { + __extends(AlignRight, _super); + function AlignRight() { + return _super.call(this, "alignRight", "Align right", "right", "alignRight") || this; + } + return AlignRight; +}(AlignmentTool)); +export { AlignRight }; +var AlignLeft = /** @class */ (function (_super) { + __extends(AlignLeft, _super); + function AlignLeft() { + return _super.call(this, "alignLeft", "Align left", "left", "alignLeft") || this; + } + return AlignLeft; +}(AlignmentTool)); +export { AlignLeft }; +var AlignJustify = /** @class */ (function (_super) { + __extends(AlignJustify, _super); + function AlignJustify() { + return _super.call(this, "alignJustify", "Justify", "justify", "alignJustify") || this; + } + return AlignJustify; +}(AlignmentTool)); +export { AlignJustify }; diff --git a/packages/editor/dist/toolbar/tools/block.d.ts b/packages/editor/dist/toolbar/tools/block.d.ts new file mode 100644 index 000000000..8e859de0a --- /dev/null +++ b/packages/editor/dist/toolbar/tools/block.d.ts @@ -0,0 +1,42 @@ +/// +import { ITool, ToolProps } from "../types"; +import { Editor } from "@tiptap/core"; +import { ToolId } from "."; +import { IconNames } from "../icons"; +declare class BlockTool implements ITool { + readonly id: TId; + readonly title: string; + private readonly icon; + private readonly command; + constructor(id: TId, title: string, icon: IconNames, command: (editor: Editor) => boolean); + render: (props: ToolProps) => JSX.Element; +} +export declare class HorizontalRule extends BlockTool { + constructor(); +} +export declare class CodeBlock extends BlockTool { + constructor(); +} +export declare class Blockquote extends BlockTool { + constructor(); +} +export declare class Image implements ITool { + id: ToolId; + title: string; + render: (props: ToolProps) => JSX.Element; +} +export declare class Attachment extends BlockTool { + constructor(); +} +export declare class Table implements ITool { + id: ToolId; + title: string; + private MAX_COLUMNS; + private MAX_ROWS; + private MIN_COLUMNS; + private MIN_ROWS; + render: (props: ToolProps) => JSX.Element; + private getCellLocation; + private isCellHighlighted; +} +export {}; diff --git a/packages/editor/dist/toolbar/tools/block.js b/packages/editor/dist/toolbar/tools/block.js new file mode 100644 index 000000000..18d9b3767 --- /dev/null +++ b/packages/editor/dist/toolbar/tools/block.js @@ -0,0 +1,220 @@ +var __extends = (this && this.__extends) || (function () { + var extendStatics = function (d, b) { + extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; + return extendStatics(d, b); + }; + return function (d, b) { + if (typeof b !== "function" && b !== null) + throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); + }; +})(); +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; +import { ToolButton } from "../components/tool-button"; +import { Icons } from "../icons"; +import { MenuPresenter } from "../../components/menu/menu"; +import { useEffect, useRef, useState } from "react"; +import { Dropdown } from "../components/dropdown"; +import { Icon } from "../components/icon"; +import { Box, Button, Flex, Text } from "rebass"; +import { Popup } from "../components/popup"; +var BlockTool = /** @class */ (function () { + function BlockTool(id, title, icon, command) { + var _this = this; + this.id = id; + this.title = title; + this.icon = icon; + this.command = command; + this.render = function (props) { + var editor = props.editor; + return (_jsx(ToolButton, { id: _this.id, title: _this.title, icon: _this.icon, onClick: function () { return _this.command(editor); }, toggled: editor.isActive(_this.id) })); + }; + } + return BlockTool; +}()); +var HorizontalRule = /** @class */ (function (_super) { + __extends(HorizontalRule, _super); + function HorizontalRule() { + return _super.call(this, "horizontalRule", "Horizontal rule", "horizontalRule", function (editor) { + return editor.chain().focus().setHorizontalRule().run(); + }) || this; + } + return HorizontalRule; +}(BlockTool)); +export { HorizontalRule }; +var CodeBlock = /** @class */ (function (_super) { + __extends(CodeBlock, _super); + function CodeBlock() { + return _super.call(this, "codeblock", "Codeblock", "codeblock", function (editor) { + return editor.chain().focus().toggleCodeBlock().run(); + }) || this; + } + return CodeBlock; +}(BlockTool)); +export { CodeBlock }; +var Blockquote = /** @class */ (function (_super) { + __extends(Blockquote, _super); + function Blockquote() { + return _super.call(this, "blockquote", "Blockquote", "blockquote", function (editor) { + return editor.chain().focus().toggleBlockquote().run(); + }) || this; + } + return Blockquote; +}(BlockTool)); +export { Blockquote }; +var Image = /** @class */ (function () { + function Image() { + this.id = "image"; + this.title = "Image"; + this.render = function (props) { + var editor = props.editor; + return (_jsx(_Fragment, { children: _jsx(Dropdown, { selectedItem: _jsx(Icon, { path: Icons.image, size: 16 }), items: [ + { + key: "upload-from-disk", + type: "menuitem", + title: "Upload from disk", + icon: "upload", + onClick: function () { }, + }, + { + key: "upload-from-url", + type: "menuitem", + title: "Attach from URL", + icon: "link", + onClick: function () { }, + }, + ] }) })); + }; + } + return Image; +}()); +export { Image }; +var Attachment = /** @class */ (function (_super) { + __extends(Attachment, _super); + function Attachment() { + return _super.call(this, "attachment", "Attachment", "attachment", function (editor) { + return false; + }) || this; + } + return Attachment; +}(BlockTool)); +export { Attachment }; +var Table = /** @class */ (function () { + function Table() { + var _this = this; + this.id = "table"; + this.title = "Table"; + this.MAX_COLUMNS = 20; + this.MAX_ROWS = 20; + this.MIN_COLUMNS = 4; + this.MIN_ROWS = 4; + this.render = function (props) { + var editor = props.editor; + var _a = useState(false), isOpen = _a[0], setIsOpen = _a[1]; + var ref = useRef(null); + var _b = useState({ + column: 0, + row: 0, + }), cellLocation = _b[0], setCellLocation = _b[1]; + var _c = useState({ + columns: _this.MIN_COLUMNS, + rows: _this.MIN_ROWS, + }), tableSize = _c[0], setTableSize = _c[1]; + useEffect(function () { + setTableSize(function (old) { + var columns = old.columns, rows = old.rows; + var column = cellLocation.column, row = cellLocation.row; + var isDecrease = row === rows - 2 || column === columns - 2; + var rowFactor = Number(row === rows || row === rows - 2); + var columnFactor = Number(column === columns || column === columns - 2); + return { + columns: isDecrease + ? Math.max(column + columnFactor, _this.MIN_COLUMNS) + : Math.min(old.columns + columnFactor, _this.MAX_COLUMNS), + rows: isDecrease + ? Math.max(row + rowFactor, _this.MIN_ROWS) + : Math.min(old.rows + rowFactor, _this.MAX_ROWS), + }; + }); + }, [cellLocation]); + return (_jsxs(Flex, __assign({ ref: ref }, { children: [_jsxs(Button, __assign({ sx: { + p: 1, + m: 0, + bg: isOpen ? "hover" : "transparent", + mr: 1, + display: "flex", + alignItems: "center", + ":hover": { bg: "hover" }, + ":last-of-type": { + mr: 0, + }, + }, onClick: function () { return setIsOpen(function (s) { return !s; }); } }, { children: [_jsx(Icon, { path: Icons.table, color: "text", size: 18 }), _jsx(Icon, { path: Icons.chevronDown, color: "text", size: 18 })] })), _jsx(MenuPresenter, __assign({ isOpen: isOpen, onClose: function () { return setIsOpen(false); }, items: [], options: { + type: "menu", + position: { + target: ref.current || undefined, + isTargetAbsolute: true, + location: "below", + yOffset: 5, + }, + } }, { children: _jsx(Popup, { children: _jsxs(Flex, __assign({ sx: { p: 1, flexDirection: "column", alignItems: "center" } }, { children: [_jsx(Box, __assign({ sx: { + display: "grid", + gridTemplateColumns: "1fr ".repeat(tableSize.columns), + gap: "3px", + bg: "background", + } }, { children: Array(tableSize.columns * tableSize.rows) + .fill(0) + .map(function (_, index) { return (_jsx(Box, { width: 15, height: 15, sx: { + border: "1px solid var(--disabled)", + borderRadius: "2px", + bg: _this.isCellHighlighted(index, cellLocation, tableSize) + ? "disabled" + : "transparent", + ":hover": { + bg: "disabled", + }, + }, onMouseEnter: function () { + setCellLocation(_this.getCellLocation(index, tableSize)); + }, onClick: function () { + editor + .chain() + .focus() + .insertTable({ + cols: cellLocation.column, + rows: cellLocation.row, + }) + .run(); + setIsOpen(false); + } })); }) })), _jsxs(Text, __assign({ variant: "body", sx: { mt: 1 } }, { children: [cellLocation.column, "x", cellLocation.row] }))] })) }) }))] }))); + }; + } + Table.prototype.getCellLocation = function (index, tableSize) { + var cellIndex = index + 1; + var column = cellIndex % tableSize.columns; + var row = cellIndex / tableSize.columns; + var flooredRow = Math.floor(row); + row = row === flooredRow ? row : flooredRow + 1; + return { column: column ? column : tableSize.columns, row: row }; + }; + Table.prototype.isCellHighlighted = function (index, currentCellLocation, tableSize) { + var cellLocation = this.getCellLocation(index, tableSize); + return (cellLocation.row <= currentCellLocation.row && + cellLocation.column <= currentCellLocation.column); + }; + return Table; +}()); +export { Table }; diff --git a/packages/editor/dist/toolbar/tools/colors.d.ts b/packages/editor/dist/toolbar/tools/colors.d.ts new file mode 100644 index 000000000..0584f5fbc --- /dev/null +++ b/packages/editor/dist/toolbar/tools/colors.d.ts @@ -0,0 +1,28 @@ +/// +import { ITool, ToolProps } from "../types"; +import { Editor } from "@tiptap/core"; +import { ToolId } from "."; +import { IconNames } from "../icons"; +export declare const DEFAULT_COLORS: string[]; +declare class ColorTool implements ITool { + readonly id: ToolId; + readonly title: string; + private readonly icon; + private readonly onColorChange; + constructor(id: ToolId, title: string, icon: IconNames, onColorChange: (editor: Editor, color?: string) => void); + render: (props: ToolProps) => JSX.Element; +} +export declare class Highlight extends ColorTool { + constructor(); +} +export declare class TextColor extends ColorTool { + constructor(); +} +declare type ColorPickerProps = { + colors: string[]; + color: string; + onClear: () => void; + onChange: (color: string) => void; +}; +export declare function ColorPicker(props: ColorPickerProps): JSX.Element; +export {}; diff --git a/packages/editor/dist/toolbar/tools/colors.js b/packages/editor/dist/toolbar/tools/colors.js new file mode 100644 index 000000000..e3d273488 --- /dev/null +++ b/packages/editor/dist/toolbar/tools/colors.js @@ -0,0 +1,182 @@ +var __extends = (this && this.__extends) || (function () { + var extendStatics = function (d, b) { + extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; + return extendStatics(d, b); + }; + return function (d, b) { + if (typeof b !== "function" && b !== null) + throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); + }; +})(); +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; +import { Box, Button, Flex, Text } from "rebass"; +import { Input } from "@rebass/forms"; +import { Icon } from "../components/icon"; +import { Icons } from "../icons"; +import { ToolButton } from "../components/tool-button"; +import { MenuPresenter } from "../../components/menu/menu"; +import { useRef, useState } from "react"; +import tinycolor from "tinycolor2"; +export var DEFAULT_COLORS = [ + "#f44336", + "#e91e63", + "#9c27b0", + "#673ab7", + "#3f51b5", + "#2196f3", + "#03a9f4", + "#00bcd4", + "#009688", + "#4caf50", + "#8bc34a", + "#cddc39", + "#ffeb3b", + "#ffc107", +]; +var ColorTool = /** @class */ (function () { + function ColorTool(id, title, icon, onColorChange) { + var _this = this; + this.id = id; + this.title = title; + this.icon = icon; + this.onColorChange = onColorChange; + this.render = function (props) { + var editor = props.editor; + var _a = useState(false), isOpen = _a[0], setIsOpen = _a[1]; + var attrs = editor.getAttributes(_this.id === "highlight" ? "highlight" : "textStyle"); + var ref = useRef(null); + var isActive = editor.isActive(_this.id === "highlight" ? "highlight" : "textStyle", { color: /\W+/gm }); + return (_jsxs(Flex, __assign({ ref: ref }, { children: [_jsx(ToolButton, { title: _this.title, id: _this.id, icon: _this.icon, onClick: function () { }, toggled: false, sx: { mr: 0, bg: isActive ? attrs.color : "transparent" } }), _jsx(Button, __assign({ sx: { + p: 0, + m: 0, + bg: "transparent", + ":hover": { bg: "hover" }, + ":last-of-type": { + mr: 0, + }, + }, onClick: function () { return setIsOpen(function (s) { return !s; }); } }, { children: _jsx(Icon, { path: Icons.chevronDown, color: "text", size: 18 }) })), _jsx(MenuPresenter, __assign({ isOpen: isOpen, onClose: function () { return setIsOpen(false); }, items: [], + // sx={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", p: 1 }} + options: { + type: "menu", + position: { + target: ref.current || undefined, + isTargetAbsolute: true, + location: "below", + align: "center", + yOffset: 5, + }, + } }, { children: _jsx(Flex, __assign({ sx: { + flexDirection: "column", + bg: "background", + boxShadow: "menu", + border: "1px solid var(--border)", + borderRadius: "default", + p: 1, + width: 160, + } }, { children: _jsx(ColorPicker, { colors: DEFAULT_COLORS, color: attrs.color, onClear: function () { return _this.onColorChange(editor); }, onChange: function (color) { return _this.onColorChange(editor, color); } }) })) }))] }))); + }; + } + return ColorTool; +}()); +var Highlight = /** @class */ (function (_super) { + __extends(Highlight, _super); + function Highlight() { + return _super.call(this, "highlight", "Highlight", "highlight", function (editor, color) { + return color + ? editor.chain().focus().toggleHighlight({ color: color }).run() + : editor.chain().focus().unsetHighlight().run(); + }) || this; + } + return Highlight; +}(ColorTool)); +export { Highlight }; +var TextColor = /** @class */ (function (_super) { + __extends(TextColor, _super); + function TextColor() { + return _super.call(this, "textColor", "Text color", "textColor", function (editor, color) { + return color + ? editor.chain().focus().setColor(color).run() + : editor.chain().focus().unsetColor().run(); + }) || this; + } + return TextColor; +}(ColorTool)); +export { TextColor }; +export function ColorPicker(props) { + var colors = props.colors, color = props.color, onClear = props.onClear, onChange = props.onChange; + var _a = useState(tinycolor(color || colors[0]).toHexString()), currentColor = _a[0], setCurrentColor = _a[1]; + return (_jsxs(_Fragment, { children: [_jsx(Flex, __assign({ sx: { + width: "100%", + height: 50, + bg: currentColor, + mb: 1, + borderRadius: "default", + alignItems: "center", + justifyContent: "center", + } }, { children: _jsx(Text, __assign({ sx: { + fontSize: "subheading", + color: tinycolor(currentColor).isDark() ? "white" : "black", + } }, { children: currentColor })) })), _jsxs(Box, __assign({ sx: { + display: "grid", + gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr", + } }, { children: [colors.map(function (color) { return (_jsx(Box, { sx: { + bg: color, + width: 25, + height: 25, + m: "2px", + borderRadius: "default", + cursor: "pointer", + ":hover": { + filter: "brightness(85%)", + }, + }, onClick: function () { + setCurrentColor(color); + onChange(color); + } })); }), _jsx(Flex, __assign({ sx: { + width: 25, + height: 25, + m: "2px", + borderRadius: "default", + cursor: "pointer", + alignItems: "center", + justifyContent: "center", + ":hover": { + filter: "brightness(85%)", + }, + }, onClick: onClear }, { children: _jsx(Icon, { path: Icons.colorClear, size: 18 }) }))] })), _jsxs(Flex, __assign({ sx: { + mt: 1, + borderRadius: "default", + } }, { children: [_jsx(Input, { placeholder: "#000000", sx: { + p: 1, + m: 0, + fontSize: "body", + border: "none", + borderWidth: 0, + }, value: currentColor, maxLength: 7, onChange: function (e) { + var value = e.target.value; + if (!value) + return; + setCurrentColor(value); + } }), _jsx(Button, __assign({ sx: { + bg: "transparent", + p: 1, + ":hover": { bg: "hover" }, + cursor: "pointer", + }, onClick: function () { return onChange(currentColor); } }, { children: _jsx(Icon, { path: Icons.check, color: "text", size: 18 }) }))] }))] })); +} diff --git a/packages/editor/dist/toolbar/tools/font.d.ts b/packages/editor/dist/toolbar/tools/font.d.ts new file mode 100644 index 000000000..180bbba6e --- /dev/null +++ b/packages/editor/dist/toolbar/tools/font.d.ts @@ -0,0 +1,16 @@ +/// +import { ITool, ToolProps } from "../types"; +import { ToolId } from "."; +export declare class FontSize implements ITool { + title: string; + id: ToolId; + private defaultFontSizes; + render: (props: ToolProps) => JSX.Element; +} +export declare class FontFamily implements ITool { + title: string; + id: ToolId; + private fontFamilies; + render: (props: ToolProps) => JSX.Element; + private toMenuItems; +} diff --git a/packages/editor/dist/toolbar/tools/font.js b/packages/editor/dist/toolbar/tools/font.js new file mode 100644 index 000000000..8f23058ea --- /dev/null +++ b/packages/editor/dist/toolbar/tools/font.js @@ -0,0 +1,69 @@ +import { jsx as _jsx } from "react/jsx-runtime"; +import { Dropdown } from "../components/dropdown"; +var FontSize = /** @class */ (function () { + function FontSize() { + var _this = this; + this.title = "Font size"; + this.id = "fontSize"; + this.defaultFontSizes = [ + 12, 14, 16, 18, 20, 24, 28, 32, 36, 42, 48, 60, 72, 100, + ]; + this.render = function (props) { + var editor = props.editor; + var currentFontSize = _this.defaultFontSizes.find(function (size) { + return editor.isActive("textStyle", { fontSize: "".concat(size, "px") }); + }) || 16; + return (_jsx(Dropdown, { selectedItem: "".concat(currentFontSize, "px"), items: _this.defaultFontSizes.map(function (size) { return ({ + key: "".concat(size, "px"), + type: "menuitem", + title: "".concat(size, "px"), + isChecked: size === currentFontSize, + onClick: function () { return editor.chain().focus().setFontSize("".concat(size, "px")).run(); }, + }); }) })); + }; + } + return FontSize; +}()); +export { FontSize }; +var FontFamily = /** @class */ (function () { + function FontFamily() { + var _this = this; + this.title = "Font family"; + this.id = "fontFamily"; + this.fontFamilies = { + System: "Open Sans", + Serif: "serif", + Monospace: "monospace", + }; + this.render = function (props) { + var _a, _b; + var editor = props.editor; + var currentFontFamily = ((_b = (_a = Object.entries(_this.fontFamilies) + .find(function (_a) { + var key = _a[0], value = _a[1]; + return editor.isActive("textStyle", { fontFamily: value }); + })) === null || _a === void 0 ? void 0 : _a.map(function (a) { return a; })) === null || _b === void 0 ? void 0 : _b.at(0)) || "System"; + return (_jsx(Dropdown, { selectedItem: currentFontFamily, items: _this.toMenuItems(editor, currentFontFamily) })); + }; + } + FontFamily.prototype.toMenuItems = function (editor, currentFontFamily) { + var menuItems = []; + var _loop_1 = function (key) { + var value = this_1.fontFamilies[key]; + menuItems.push({ + key: key, + type: "menuitem", + title: key, + isChecked: key === currentFontFamily, + onClick: function () { return editor.chain().focus().setFontFamily(value).run(); }, + }); + }; + var this_1 = this; + for (var key in this.fontFamilies) { + _loop_1(key); + } + return menuItems; + }; + return FontFamily; +}()); +export { FontFamily }; diff --git a/packages/editor/dist/toolbar/tools/headings.d.ts b/packages/editor/dist/toolbar/tools/headings.d.ts new file mode 100644 index 000000000..e3afa3d71 --- /dev/null +++ b/packages/editor/dist/toolbar/tools/headings.d.ts @@ -0,0 +1,10 @@ +/// +import { ITool, ToolProps } from "../types"; +import { ToolId } from "."; +export declare class Headings implements ITool { + title: string; + id: ToolId; + private defaultLevels; + render: (props: ToolProps) => JSX.Element; + private toMenuItems; +} diff --git a/packages/editor/dist/toolbar/tools/headings.js b/packages/editor/dist/toolbar/tools/headings.js new file mode 100644 index 000000000..68d053a12 --- /dev/null +++ b/packages/editor/dist/toolbar/tools/headings.js @@ -0,0 +1,51 @@ +var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) { + if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { + if (ar || !(i in from)) { + if (!ar) ar = Array.prototype.slice.call(from, 0, i); + ar[i] = from[i]; + } + } + return to.concat(ar || Array.prototype.slice.call(from)); +}; +import { jsx as _jsx } from "react/jsx-runtime"; +import { Dropdown } from "../components/dropdown"; +var Headings = /** @class */ (function () { + function Headings() { + var _this = this; + this.title = "Headings"; + this.id = "headings"; + this.defaultLevels = [1, 2, 3, 4, 5, 6]; + this.render = function (props) { + var editor = props.editor; + var currentHeadingLevel = _this.defaultLevels.find(function (level) { + return editor.isActive("heading", { level: level }); + }); + return (_jsx(Dropdown, { selectedItem: currentHeadingLevel ? "Heading ".concat(currentHeadingLevel) : "Paragraph", items: _this.toMenuItems(editor, currentHeadingLevel) })); + }; + } + Headings.prototype.toMenuItems = function (editor, currentHeadingLevel) { + var menuItems = this.defaultLevels.map(function (level) { return ({ + type: "menuitem", + key: "heading-".concat(level), + title: "Heading ".concat(level), + isChecked: level === currentHeadingLevel, + onClick: function () { + return editor + .chain() + .focus() + .setHeading({ level: level }) + .run(); + }, + }); }); + var paragraph = { + key: "paragraph", + type: "menuitem", + title: "Paragraph", + isChecked: !currentHeadingLevel, + onClick: function () { return editor.chain().focus().setParagraph().run(); }, + }; + return __spreadArray([paragraph], menuItems, true); + }; + return Headings; +}()); +export { Headings }; diff --git a/packages/editor/dist/toolbar/tools/index.d.ts b/packages/editor/dist/toolbar/tools/index.d.ts new file mode 100644 index 000000000..e6defa4f1 --- /dev/null +++ b/packages/editor/dist/toolbar/tools/index.d.ts @@ -0,0 +1,42 @@ +import { ITool } from "../types"; +import { Bold, Italic, Underline, Strikethrough, Code, Subscript, Superscript, ClearFormatting, Link } from "./inline"; +import { FontSize, FontFamily } from "./font"; +import { AlignCenter, AlignLeft, AlignRight, AlignJustify } from "./alignment"; +import { Blockquote, CodeBlock, HorizontalRule, Image, Attachment, Table } from "./block"; +import { Headings } from "./headings"; +import { NumberedList, BulletList } from "./lists"; +import { LeftToRight, RightToLeft } from "./text-direction"; +import { Highlight, TextColor } from "./colors"; +declare const tools: { + bold: Bold; + italic: Italic; + underline: Underline; + strikethrough: Strikethrough; + code: Code; + formatClear: ClearFormatting; + alignCenter: AlignCenter; + alignRight: AlignRight; + alignLeft: AlignLeft; + alignJustify: AlignJustify; + subscript: Subscript; + superscript: Superscript; + fontSize: FontSize; + fontFamily: FontFamily; + horizontalRule: HorizontalRule; + codeblock: CodeBlock; + blockquote: Blockquote; + headings: Headings; + ltr: LeftToRight; + rtl: RightToLeft; + numberedList: NumberedList; + bulletList: BulletList; + textColor: TextColor; + highlight: Highlight; + link: Link; + image: Image; + attachment: Attachment; + table: Table; +}; +export declare type ToolId = keyof typeof tools; +export declare function findToolById(id: ToolId): ITool; +export {}; diff --git a/packages/editor/dist/toolbar/tools/index.js b/packages/editor/dist/toolbar/tools/index.js new file mode 100644 index 000000000..966bbe561 --- /dev/null +++ b/packages/editor/dist/toolbar/tools/index.js @@ -0,0 +1,41 @@ +import { Bold, Italic, Underline, Strikethrough, Code, Subscript, Superscript, ClearFormatting, Link, } from "./inline"; +import { FontSize, FontFamily } from "./font"; +import { AlignCenter, AlignLeft, AlignRight, AlignJustify } from "./alignment"; +import { Blockquote, CodeBlock, HorizontalRule, Image, Attachment, Table, } from "./block"; +import { Headings } from "./headings"; +import { NumberedList, BulletList } from "./lists"; +import { LeftToRight, RightToLeft } from "./text-direction"; +import { Highlight, TextColor } from "./colors"; +var tools = { + bold: new Bold(), + italic: new Italic(), + underline: new Underline(), + strikethrough: new Strikethrough(), + code: new Code(), + formatClear: new ClearFormatting(), + alignCenter: new AlignCenter(), + alignRight: new AlignRight(), + alignLeft: new AlignLeft(), + alignJustify: new AlignJustify(), + subscript: new Subscript(), + superscript: new Superscript(), + fontSize: new FontSize(), + fontFamily: new FontFamily(), + horizontalRule: new HorizontalRule(), + codeblock: new CodeBlock(), + blockquote: new Blockquote(), + headings: new Headings(), + ltr: new LeftToRight(), + rtl: new RightToLeft(), + numberedList: new NumberedList(), + bulletList: new BulletList(), + textColor: new TextColor(), + highlight: new Highlight(), + link: new Link(), + image: new Image(), + attachment: new Attachment(), + table: new Table(), +}; +export function findToolById(id) { + return tools[id]; +} diff --git a/packages/editor/dist/toolbar/tools/inline.d.ts b/packages/editor/dist/toolbar/tools/inline.d.ts new file mode 100644 index 000000000..9a24bfb0f --- /dev/null +++ b/packages/editor/dist/toolbar/tools/inline.d.ts @@ -0,0 +1,43 @@ +/// +import { ITool, ToolProps } from "../types"; +import { ToolId } from "."; +import { IconNames } from "../icons"; +declare class InlineTool implements ITool { + readonly id: TId; + readonly title: string; + private readonly icon; + constructor(id: TId, title: string, icon: IconNames); + render: (props: ToolProps) => JSX.Element; +} +export declare class Italic extends InlineTool { + constructor(); +} +export declare class Strikethrough extends InlineTool { + constructor(); +} +export declare class Underline extends InlineTool { + constructor(); +} +export declare class Code extends InlineTool { + constructor(); +} +export declare class Bold extends InlineTool { + constructor(); +} +export declare class Subscript extends InlineTool { + constructor(); +} +export declare class Superscript extends InlineTool { + constructor(); +} +export declare class ClearFormatting implements ITool { + id: ToolId; + title: string; + render: (props: ToolProps) => JSX.Element; +} +export declare class Link implements ITool { + id: ToolId; + title: string; + render: (props: ToolProps) => JSX.Element; +} +export {}; diff --git a/packages/editor/dist/toolbar/tools/inline.js b/packages/editor/dist/toolbar/tools/inline.js new file mode 100644 index 000000000..c57586ce1 --- /dev/null +++ b/packages/editor/dist/toolbar/tools/inline.js @@ -0,0 +1,176 @@ +var __extends = (this && this.__extends) || (function () { + var extendStatics = function (d, b) { + extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; + return extendStatics(d, b); + }; + return function (d, b) { + if (typeof b !== "function" && b !== null) + throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); + }; +})(); +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; +import { ToolButton } from "../components/tool-button"; +import { MenuPresenter } from "../../components/menu/menu"; +import { useRef, useState } from "react"; +import { Flex } from "rebass"; +import { Input } from "@rebass/forms"; +import { Popup } from "../components/popup"; +var InlineTool = /** @class */ (function () { + function InlineTool(id, title, icon) { + var _this = this; + this.id = id; + this.title = title; + this.icon = icon; + this.render = function (props) { + var editor = props.editor; + return (_jsx(ToolButton, { title: _this.title, id: _this.id, icon: _this.icon, onClick: function () { return editor.chain().focus().toggleMark(_this.id).run(); }, toggled: editor.isActive(_this.id) })); + }; + } + return InlineTool; +}()); +var Italic = /** @class */ (function (_super) { + __extends(Italic, _super); + function Italic() { + return _super.call(this, "italic", "Italic", "italic") || this; + } + return Italic; +}(InlineTool)); +export { Italic }; +var Strikethrough = /** @class */ (function (_super) { + __extends(Strikethrough, _super); + function Strikethrough() { + return _super.call(this, "strikethrough", "Strikethrough", "strikethrough") || this; + } + return Strikethrough; +}(InlineTool)); +export { Strikethrough }; +var Underline = /** @class */ (function (_super) { + __extends(Underline, _super); + function Underline() { + return _super.call(this, "underline", "Underline", "underline") || this; + } + return Underline; +}(InlineTool)); +export { Underline }; +var Code = /** @class */ (function (_super) { + __extends(Code, _super); + function Code() { + return _super.call(this, "code", "Code", "code") || this; + } + return Code; +}(InlineTool)); +export { Code }; +var Bold = /** @class */ (function (_super) { + __extends(Bold, _super); + function Bold() { + return _super.call(this, "bold", "Bold", "bold") || this; + } + return Bold; +}(InlineTool)); +export { Bold }; +var Subscript = /** @class */ (function (_super) { + __extends(Subscript, _super); + function Subscript() { + return _super.call(this, "subscript", "Subscript", "subscript") || this; + } + return Subscript; +}(InlineTool)); +export { Subscript }; +var Superscript = /** @class */ (function (_super) { + __extends(Superscript, _super); + function Superscript() { + return _super.call(this, "superscript", "Superscript", "superscript") || this; + } + return Superscript; +}(InlineTool)); +export { Superscript }; +var ClearFormatting = /** @class */ (function () { + function ClearFormatting() { + var _this = this; + this.id = "formatClear"; + this.title = "Clear all formatting"; + this.render = function (props) { + var editor = props.editor; + return (_jsx(ToolButton, { title: _this.title, id: _this.id, icon: "formatClear", onClick: function () { + return editor.chain().focus().clearNodes().unsetAllMarks().run(); + }, toggled: false })); + }; + } + return ClearFormatting; +}()); +export { ClearFormatting }; +var Link = /** @class */ (function () { + function Link() { + var _this = this; + this.id = "link"; + this.title = "Link"; + this.render = function (props) { + var editor = props.editor; + var buttonRef = useRef(null); + var targetRef = useRef(); + var _a = useState(false), isOpen = _a[0], setIsOpen = _a[1]; + var _b = useState(), href = _b[0], setHref = _b[1]; + var _c = useState(), text = _c[0], setText = _c[1]; + var currentUrl = editor.getAttributes("link").href; + var isEditing = !!currentUrl; + return (_jsxs(_Fragment, { children: [_jsx(ToolButton, { ref: buttonRef, title: _this.title, id: _this.id, icon: "link", onClick: function () { + if (isEditing) + setHref(currentUrl); + var _a = editor.state.selection, from = _a.from, to = _a.to, $from = _a.$from; + var selectedNode = $from.node(); + var pos = selectedNode.isTextblock ? $from.before() : $from.pos; + var domNode = editor.view.nodeDOM(pos); + targetRef.current = domNode; + var selectedText = isEditing + ? selectedNode.textContent + : editor.state.doc.textBetween(from, to); + setText(selectedText); + setIsOpen(true); + }, toggled: isOpen || !!isEditing }), _jsx(MenuPresenter, __assign({ options: { + type: "menu", + position: { + target: targetRef.current || buttonRef.current || undefined, + isTargetAbsolute: true, + location: "below", + yOffset: 5, + }, + }, isOpen: isOpen, items: [], onClose: function () { + editor.commands.focus(); + setIsOpen(false); + } }, { children: _jsx(Popup, __assign({ title: isEditing ? "Edit link" : "Insert link", action: { + text: isEditing ? "Edit" : "Insert", + onClick: function () { + if (!href) + return; + var commandChain = editor + .chain() + .focus() + .extendMarkRange("link") + .setLink({ href: href, target: "_blank" }); + if (text) + commandChain = commandChain.insertContent(text).focus(); + commandChain.run(); + setIsOpen(false); + }, + } }, { children: _jsxs(Flex, __assign({ sx: { p: 1, width: 300, flexDirection: "column" } }, { children: [_jsx(Input, { type: "text", placeholder: "Link text", value: text, onChange: function (e) { return setText(e.target.value); } }), _jsx(Input, { type: "url", sx: { mt: 1 }, autoFocus: true, placeholder: "https://example.com/", value: href, onChange: function (e) { return setHref(e.target.value); } })] })) })) }))] })); + }; + } + return Link; +}()); +export { Link }; diff --git a/packages/editor/dist/toolbar/tools/lists.d.ts b/packages/editor/dist/toolbar/tools/lists.d.ts new file mode 100644 index 000000000..05e58e754 --- /dev/null +++ b/packages/editor/dist/toolbar/tools/lists.d.ts @@ -0,0 +1,32 @@ +/// +import { ITool, ToolProps } from "../types"; +import { Editor } from "@tiptap/core"; +import { ToolId } from "."; +import { IconNames } from "../icons"; +declare type ListSubType = { + items: string[]; + title: string; + type: TListStyleTypes; +}; +declare type ListOptions = { + icon: IconNames; + type: "bulletList" | "orderedList"; + onClick: (editor: Editor) => void; + subTypes: ListSubType[]; +}; +declare class ListTool implements ITool { + readonly id: ToolId; + readonly title: string; + private readonly options; + constructor(id: ToolId, title: string, options: ListOptions); + render: (props: ToolProps) => JSX.Element; +} +declare type NumberedListStyleTypes = "lower-roman" | "upper-roman" | "lower-greek" | "lower-alpha" | "upper-alpha" | "decimal"; +export declare class NumberedList extends ListTool { + constructor(); +} +declare type BulletListStyleTypes = "circle" | "square" | "disc"; +export declare class BulletList extends ListTool { + constructor(); +} +export {}; diff --git a/packages/editor/dist/toolbar/tools/lists.js b/packages/editor/dist/toolbar/tools/lists.js new file mode 100644 index 000000000..4fbabeb1d --- /dev/null +++ b/packages/editor/dist/toolbar/tools/lists.js @@ -0,0 +1,151 @@ +var __extends = (this && this.__extends) || (function () { + var extendStatics = function (d, b) { + extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; + return extendStatics(d, b); + }; + return function (d, b) { + if (typeof b !== "function" && b !== null) + throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); + }; +})(); +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; +import { Box, Button, Flex } from "rebass"; +import { Icon } from "../components/icon"; +import { Icons } from "../icons"; +import { ToolButton } from "../components/tool-button"; +import { MenuPresenter } from "../../components/menu/menu"; +import { useRef, useState } from "react"; +var ListTool = /** @class */ (function () { + function ListTool(id, title, options) { + var _this = this; + this.id = id; + this.title = title; + this.options = options; + this.render = function (props) { + var editor = props.editor; + var _a = useState(false), isOpen = _a[0], setIsOpen = _a[1]; + var ref = useRef(null); + var isActive = editor.isActive(_this.options.type); + return (_jsxs(Flex, __assign({ ref: ref }, { children: [_jsx(ToolButton, { title: _this.title, id: _this.id, icon: _this.options.icon, onClick: function () { return _this.options.onClick(editor); }, toggled: isActive, sx: { mr: 0 } }), _jsx(Button, __assign({ sx: { + p: 0, + m: 0, + bg: "transparent", + ":hover": { bg: "hover" }, + ":last-of-type": { + mr: 0, + }, + }, onClick: function () { return setIsOpen(function (s) { return !s; }); } }, { children: _jsx(Icon, { path: Icons.chevronDown, color: "text", size: 18 }) })), _jsx(MenuPresenter, { isOpen: isOpen, onClose: function () { return setIsOpen(false); }, items: _this.options.subTypes.map(function (item) { return ({ + key: item.type, + tooltip: item.title, + type: "menuitem", + component: function () { return _jsx(ListThumbnail, { listStyleType: item.type }); }, + onClick: function () { + var chain = editor.chain().focus(); + if (!isActive) { + if (_this.options.type === "bulletList") + chain = chain.toggleBulletList(); + else + chain = chain.toggleOrderedList(); + } + return chain + .updateAttributes(_this.options.type, { listType: item.type }) + .run(); + }, + }); }), sx: { display: "grid", gridTemplateColumns: "1fr 1fr 1fr", p: 1 }, options: { + type: "menu", + position: { + target: ref.current || undefined, + isTargetAbsolute: true, + location: "below", + yOffset: 5, + }, + } })] }))); + }; + } + return ListTool; +}()); +var NumberedList = /** @class */ (function (_super) { + __extends(NumberedList, _super); + function NumberedList() { + var options = { + type: "orderedList", + icon: "numberedList", + onClick: function (editor) { return editor.chain().focus().toggleOrderedList().run(); }, + subTypes: [ + { type: "decimal", title: "Decimal", items: ["1", "2", "3"] }, + { type: "upper-alpha", title: "Upper alpha", items: ["A", "B", "C"] }, + { type: "lower-alpha", title: "Lower alpha", items: ["a", "b", "c"] }, + { + type: "upper-roman", + title: "Upper Roman", + items: ["I", "II", "III"], + }, + { + type: "lower-roman", + title: "Lower Roman", + items: ["i", "ii", "iii"], + }, + { type: "lower-greek", title: "Lower Greek", items: ["α", "β", "γ"] }, + ], + }; + return _super.call(this, "numberedList", "Numbered list", options) || this; + } + return NumberedList; +}(ListTool)); +export { NumberedList }; +var BulletList = /** @class */ (function (_super) { + __extends(BulletList, _super); + function BulletList() { + var options = { + type: "bulletList", + icon: "bulletList", + onClick: function (editor) { return editor.chain().focus().toggleOrderedList().run(); }, + subTypes: [ + { type: "disc", title: "Decimal", items: ["1", "2", "3"] }, + { type: "circle", title: "Upper alpha", items: ["A", "B", "C"] }, + { type: "square", title: "Lower alpha", items: ["a", "b", "c"] }, + ], + }; + return _super.call(this, "bulletList", "Bullet list", options) || this; + } + return BulletList; +}(ListTool)); +export { BulletList }; +function ListThumbnail(props) { + var listStyleType = props.listStyleType; + return (_jsx(Flex, __assign({ as: "ul", sx: { + flexDirection: "column", + flex: 1, + p: 0, + listStyleType: listStyleType, + } }, { children: [0, 0, 0].map(function () { return (_jsx(Box, __assign({ as: "li", sx: { + display: "list-item", + color: "text", + fontSize: 8, + mb: "1px", + } }, { children: _jsx(Flex, __assign({ sx: { + alignItems: "center", + } }, { children: _jsx(Box, { sx: { + width: "100%", + flexShrink: 0, + height: 4, + bg: "#cbcbcb", + borderRadius: "2px", + } }) })) }))); }) }))); +} diff --git a/packages/editor/dist/toolbar/tools/textdirection.d.ts b/packages/editor/dist/toolbar/tools/textdirection.d.ts new file mode 100644 index 000000000..7a5bf3f3d --- /dev/null +++ b/packages/editor/dist/toolbar/tools/textdirection.d.ts @@ -0,0 +1,19 @@ +/// +import { ITool, ToolProps } from "../types"; +import { ToolId } from "."; +import { IconNames } from "../icons"; +declare class TextDirectionTool implements ITool { + readonly id: TId; + readonly title: TTitle; + private readonly icon; + private readonly direction; + constructor(id: TId, title: TTitle, icon: IconNames, direction: "ltr" | "rtl"); + render: (props: ToolProps) => JSX.Element; +} +export declare class LeftToRight extends TextDirectionTool { + constructor(); +} +export declare class RightToLeft extends TextDirectionTool { + constructor(); +} +export {}; diff --git a/packages/editor/dist/toolbar/tools/textdirection.js b/packages/editor/dist/toolbar/tools/textdirection.js new file mode 100644 index 000000000..b99fe4a72 --- /dev/null +++ b/packages/editor/dist/toolbar/tools/textdirection.js @@ -0,0 +1,49 @@ +var __extends = (this && this.__extends) || (function () { + var extendStatics = function (d, b) { + extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; + return extendStatics(d, b); + }; + return function (d, b) { + if (typeof b !== "function" && b !== null) + throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); + }; +})(); +import { jsx as _jsx } from "react/jsx-runtime"; +import { ToolButton } from "../components/tool-button"; +var TextDirectionTool = /** @class */ (function () { + function TextDirectionTool(id, title, icon, direction) { + var _this = this; + this.id = id; + this.title = title; + this.icon = icon; + this.direction = direction; + this.render = function (props) { + var editor = props.editor; + return (_jsx(ToolButton, { title: _this.title, id: _this.id, icon: _this.icon, onClick: function () { + return editor.chain().focus().setTextDirection(_this.direction).run(); + }, toggled: editor.isActive({ textDirection: _this.direction }) })); + }; + } + return TextDirectionTool; +}()); +var LeftToRight = /** @class */ (function (_super) { + __extends(LeftToRight, _super); + function LeftToRight() { + return _super.call(this, "ltr", "Left-to-right", "ltr", "ltr") || this; + } + return LeftToRight; +}(TextDirectionTool)); +export { LeftToRight }; +var RightToLeft = /** @class */ (function (_super) { + __extends(RightToLeft, _super); + function RightToLeft() { + return _super.call(this, "rtl", "Right-to-left", "rtl", "rtl") || this; + } + return RightToLeft; +}(TextDirectionTool)); +export { RightToLeft }; diff --git a/packages/editor/dist/toolbar/types.d.ts b/packages/editor/dist/toolbar/types.d.ts new file mode 100644 index 000000000..8c3282031 --- /dev/null +++ b/packages/editor/dist/toolbar/types.d.ts @@ -0,0 +1,12 @@ +/// +import { Editor } from "@tiptap/core"; +import { ToolId } from "./tools"; +export declare type ToolProps = { + editor: Editor; +}; +export interface ITool { + id: ToolId; + title: string; + description?: string; + render(props: ToolProps): JSX.Element; +} diff --git a/packages/editor/dist/toolbar/types.js b/packages/editor/dist/toolbar/types.js new file mode 100644 index 000000000..9e6994e55 --- /dev/null +++ b/packages/editor/dist/toolbar/types.js @@ -0,0 +1,4 @@ +export {}; +// export interface ToolConstructor { +// new (editor: Editor): ITool; +// } diff --git a/packages/editor/hooks/useTiptap.ts b/packages/editor/hooks/useTiptap.ts deleted file mode 100644 index fb7273bee..000000000 --- a/packages/editor/hooks/useTiptap.ts +++ /dev/null @@ -1,28 +0,0 @@ -import CharacterCount from "@tiptap/extension-character-count"; -import Placeholder from "@tiptap/extension-placeholder"; -import { EditorOptions, useEditor } from "@tiptap/react"; -import StarterKit from "@tiptap/starter-kit"; -import { useMemo } from "react"; - -export const useTiptap = (options: Partial = {}, deps?: any) => { - const defaultOptions = useMemo>( - () => ({ - extensions: [ - StarterKit, - CharacterCount, - Placeholder.configure({ - placeholder: "Start writing your note...", - }), - ], - }), - [] - ); - - const editor = useEditor({ ...defaultOptions, ...options }, deps); - - /** - * Add editor to global for use in React Native. - */ - global.editor = editor; - return editor; -}; diff --git a/packages/editor/package-lock.json b/packages/editor/package-lock.json index 99e40e329..f6019d7fe 100644 --- a/packages/editor/package-lock.json +++ b/packages/editor/package-lock.json @@ -8,16 +8,77 @@ "name": "notesnook-editor", "version": "0.0.1", "dependencies": { + "@mdi/js": "^6.6.96", + "@mdi/react": "^1.5.0", + "@notesnook/theme": "file:../themeprovider", + "@rebass/forms": "^4.0.6", "@tiptap/extension-character-count": "^2.0.0-beta.24", + "@tiptap/extension-color": "^2.0.0-beta.9", + "@tiptap/extension-font-family": "^2.0.0-beta.21", + "@tiptap/extension-highlight": "^2.0.0-beta.33", "@tiptap/extension-history": "^2.0.0-beta.21", + "@tiptap/extension-horizontal-rule": "^2.0.0-beta.31", + "@tiptap/extension-link": "^2.0.0-beta.36", "@tiptap/extension-placeholder": "^2.0.0-beta.45", + "@tiptap/extension-subscript": "^2.0.0-beta.10", + "@tiptap/extension-superscript": "^2.0.0-beta.10", + "@tiptap/extension-table": "^2.0.0-beta.48", + "@tiptap/extension-table-cell": "^2.0.0-beta.20", + "@tiptap/extension-table-header": "^2.0.0-beta.22", + "@tiptap/extension-table-row": "^2.0.0-beta.19", + "@tiptap/extension-text-align": "^2.0.0-beta.29", + "@tiptap/extension-text-style": "^2.0.0-beta.23", + "@tiptap/extension-underline": "^2.0.0-beta.23", "@tiptap/react": "^2.0.0-beta.98", - "@tiptap/starter-kit": "^2.0.0-beta.150" + "@tiptap/starter-kit": "^2.0.0-beta.150", + "@types/rebass": "^4.0.10", + "@types/rebass__forms": "^4.0.6", + "emotion-theming": "^10.0.19", + "prosemirror-tables": "^1.1.1", + "re-resizable": "^6.9.5", + "react-color": "^2.19.3", + "react-modal": "^3.14.4", + "react-toggle": "^4.1.2", + "reactjs-popup": "^2.0.5", + "rebass": "^4.0.7", + "tinycolor2": "^1.4.2", + "tippy.js": "^6.3.7", + "zustand": "^3.7.2" }, "devDependencies": { "@types/node": "^16.11.11", "@types/react": "^17.0.37", + "@types/react-color": "^3.0.6", "@types/react-dom": "^17.0.11", + "@types/react-modal": "^3.13.1", + "@types/react-toggle": "^4.0.3", + "@types/tinycolor2": "^1.4.3", + "react": "^17.0.2", + "react-dom": "^17.0.2", + "react-scripts": "4.0.3", + "typescript": "^4.5.2", + "typescript-plugin-css-modules": "^3.4.0", + "web-vitals": "^1.1.2" + } + }, + "../themeprovider": { + "name": "@notesnook/theme", + "version": "0.0.1", + "dependencies": { + "@rebass/forms": "^4.0.6", + "@types/rebass": "^4.0.10", + "@types/rebass__forms": "^4.0.6", + "emotion-theming": "^10.0.19", + "rebass": "^4.0.7", + "tinycolor2": "^1.4.2" + }, + "devDependencies": { + "@types/node": "^16.11.11", + "@types/react": "^17.0.37", + "@types/react-color": "^3.0.6", + "@types/react-dom": "^17.0.11", + "@types/react-modal": "^3.13.1", + "@types/tinycolor2": "^1.4.3", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", @@ -41,7 +102,6 @@ "version": "7.16.7", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz", "integrity": "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==", - "dev": true, "dependencies": { "@babel/highlight": "^7.16.7" }, @@ -306,7 +366,6 @@ "version": "7.16.7", "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz", "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==", - "dev": true, "dependencies": { "@babel/types": "^7.16.7" }, @@ -424,7 +483,6 @@ "version": "7.16.7", "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz", "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==", - "dev": true, "engines": { "node": ">=6.9.0" } @@ -471,7 +529,6 @@ "version": "7.16.10", "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.10.tgz", "integrity": "sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==", - "dev": true, "dependencies": { "@babel/helper-validator-identifier": "^7.16.7", "chalk": "^2.0.0", @@ -1855,7 +1912,6 @@ "version": "7.17.8", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.8.tgz", "integrity": "sha512-dQpEpK0O9o6lj6oPu0gRDbbnk+4LeHlNcBpspf6Olzt3GIX4P1lWF1gS+pHLDFlaJvbR6q7jCfQ08zA4QJBnmA==", - "dev": true, "dependencies": { "regenerator-runtime": "^0.13.4" }, @@ -1915,7 +1971,6 @@ "version": "7.17.0", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz", "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==", - "dev": true, "dependencies": { "@babel/helper-validator-identifier": "^7.16.7", "to-fast-properties": "^2.0.0" @@ -1961,6 +2016,195 @@ "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==", "dev": true }, + "node_modules/@emotion/core": { + "version": "10.3.1", + "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.3.1.tgz", + "integrity": "sha512-447aUEjPIm0MnE6QYIaFz9VQOHSXf4Iu6EWOIqq11EAPqinkSZmfymPTmlOE3QjLv846lH4JVZBUOtwGbuQoww==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "@emotion/cache": "^10.0.27", + "@emotion/css": "^10.0.27", + "@emotion/serialize": "^0.11.15", + "@emotion/sheet": "0.9.4", + "@emotion/utils": "0.11.3" + }, + "peerDependencies": { + "react": ">=16.3.0" + } + }, + "node_modules/@emotion/core/node_modules/@emotion/cache": { + "version": "10.0.29", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz", + "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==", + "dependencies": { + "@emotion/sheet": "0.9.4", + "@emotion/stylis": "0.8.5", + "@emotion/utils": "0.11.3", + "@emotion/weak-memoize": "0.2.5" + } + }, + "node_modules/@emotion/core/node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + }, + "node_modules/@emotion/core/node_modules/@emotion/serialize": { + "version": "0.11.16", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz", + "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==", + "dependencies": { + "@emotion/hash": "0.8.0", + "@emotion/memoize": "0.7.4", + "@emotion/unitless": "0.7.5", + "@emotion/utils": "0.11.3", + "csstype": "^2.5.7" + } + }, + "node_modules/@emotion/core/node_modules/@emotion/sheet": { + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz", + "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==" + }, + "node_modules/@emotion/core/node_modules/@emotion/utils": { + "version": "0.11.3", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", + "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==" + }, + "node_modules/@emotion/core/node_modules/csstype": { + "version": "2.6.20", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz", + "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==" + }, + "node_modules/@emotion/css": { + "version": "10.0.27", + "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz", + "integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==", + "dependencies": { + "@emotion/serialize": "^0.11.15", + "@emotion/utils": "0.11.3", + "babel-plugin-emotion": "^10.0.27" + } + }, + "node_modules/@emotion/css/node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + }, + "node_modules/@emotion/css/node_modules/@emotion/serialize": { + "version": "0.11.16", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz", + "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==", + "dependencies": { + "@emotion/hash": "0.8.0", + "@emotion/memoize": "0.7.4", + "@emotion/unitless": "0.7.5", + "@emotion/utils": "0.11.3", + "csstype": "^2.5.7" + } + }, + "node_modules/@emotion/css/node_modules/@emotion/utils": { + "version": "0.11.3", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", + "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==" + }, + "node_modules/@emotion/css/node_modules/csstype": { + "version": "2.6.20", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz", + "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==" + }, + "node_modules/@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" + }, + "node_modules/@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "dependencies": { + "@emotion/memoize": "0.7.4" + } + }, + "node_modules/@emotion/is-prop-valid/node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + }, + "node_modules/@emotion/memoize": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz", + "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==" + }, + "node_modules/@emotion/styled": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.3.0.tgz", + "integrity": "sha512-GgcUpXBBEU5ido+/p/mCT2/Xx+Oqmp9JzQRuC+a4lYM4i4LBBn/dWvc0rQ19N9ObA8/T4NWMrPNe79kMBDJqoQ==", + "dependencies": { + "@emotion/styled-base": "^10.3.0", + "babel-plugin-emotion": "^10.0.27" + }, + "peerDependencies": { + "@emotion/core": "^10.0.27", + "react": ">=16.3.0" + } + }, + "node_modules/@emotion/styled-base": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.3.0.tgz", + "integrity": "sha512-PBRqsVKR7QRNkmfH78hTSSwHWcwDpecH9W6heujWAcyp2wdz/64PP73s7fWS1dIPm8/Exc8JAzYS8dEWXjv60w==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "@emotion/is-prop-valid": "0.8.8", + "@emotion/serialize": "^0.11.15", + "@emotion/utils": "0.11.3" + }, + "peerDependencies": { + "@emotion/core": "^10.0.28", + "react": ">=16.3.0" + } + }, + "node_modules/@emotion/styled-base/node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + }, + "node_modules/@emotion/styled-base/node_modules/@emotion/serialize": { + "version": "0.11.16", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz", + "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==", + "dependencies": { + "@emotion/hash": "0.8.0", + "@emotion/memoize": "0.7.4", + "@emotion/unitless": "0.7.5", + "@emotion/utils": "0.11.3", + "csstype": "^2.5.7" + } + }, + "node_modules/@emotion/styled-base/node_modules/@emotion/utils": { + "version": "0.11.3", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", + "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==" + }, + "node_modules/@emotion/styled-base/node_modules/csstype": { + "version": "2.6.20", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz", + "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==" + }, + "node_modules/@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "node_modules/@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, + "node_modules/@emotion/weak-memoize": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", + "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==" + }, "node_modules/@eslint/eslintrc": { "version": "0.4.3", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz", @@ -2087,6 +2331,14 @@ "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", @@ -2826,6 +3078,16 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, + "node_modules/@mdi/js": { + "version": "6.6.96", + "resolved": "https://registry.npmjs.org/@mdi/js/-/js-6.6.96.tgz", + "integrity": "sha512-ke9PN5DjPCOlMfhioxeZYADz8Yiz6v47W0IYRza01SSJD7y1EwESVpwFnnFUso+eCoWtE1CO9cTIvQF6sEreuA==" + }, + "node_modules/@mdi/react": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@mdi/react/-/react-1.5.0.tgz", + "integrity": "sha512-NztRgUxSYD+ImaKN94Tg66VVVqXj4SmlDGzZoz48H9riJ+Awha56sfXH2fegw819NWo7KI3oeS1Es0lNQqwr0w==" + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -2861,6 +3123,10 @@ "node": ">= 8" } }, + "node_modules/@notesnook/theme": { + "resolved": "../themeprovider", + "link": true + }, "node_modules/@npmcli/fs": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-1.1.1.tgz", @@ -2976,6 +3242,43 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@rebass/forms": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/@rebass/forms/-/forms-4.0.6.tgz", + "integrity": "sha512-20dHAlb5V0Na2HxCr73Jjoc4hD1ElimmlBpQtclXMoXUsjJ7ORdCNL1S9R54MX5f7iU2VrLGHU42eL7+nONNPQ==", + "dependencies": { + "reflexbox": "^4.0.6" + } + }, + "node_modules/@rebass/forms/node_modules/react": { + "version": "16.14.0", + "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", + "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/@rebass/forms/node_modules/reflexbox": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/reflexbox/-/reflexbox-4.0.6.tgz", + "integrity": "sha512-UNUL4YoJEXAPjRKHuty1tuOk+LV1nDJ2KYViDcH7lYm5yU3AQ+EKNXxPU3E14bQNK/pE09b1hYl+ZKdA94tWLQ==", + "dependencies": { + "@emotion/core": "^10.0.0", + "@emotion/styled": "^10.0.0", + "@styled-system/css": "^5.0.0", + "@styled-system/should-forward-prop": "^5.0.0", + "styled-system": "^5.0.0" + }, + "peerDependencies": { + "react": "^16.8.6" + } + }, "node_modules/@rollup/plugin-node-resolve": { "version": "7.1.3", "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz", @@ -3049,6 +3352,118 @@ "@sinonjs/commons": "^1.7.0" } }, + "node_modules/@styled-system/background": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/background/-/background-5.1.2.tgz", + "integrity": "sha512-jtwH2C/U6ssuGSvwTN3ri/IyjdHb8W9X/g8Y0JLcrH02G+BW3OS8kZdHphF1/YyRklnrKrBT2ngwGUK6aqqV3A==", + "dependencies": { + "@styled-system/core": "^5.1.2" + } + }, + "node_modules/@styled-system/border": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/@styled-system/border/-/border-5.1.5.tgz", + "integrity": "sha512-JvddhNrnhGigtzWRCVuAHepniyVi6hBlimxWDVAdcTuk7aRn9BYJUwfHslURtwYFsF5FoEs8Zmr1oZq2M1AP0A==", + "dependencies": { + "@styled-system/core": "^5.1.2" + } + }, + "node_modules/@styled-system/color": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/color/-/color-5.1.2.tgz", + "integrity": "sha512-1kCkeKDZkt4GYkuFNKc7vJQMcOmTl3bJY3YBUs7fCNM6mMYJeT1pViQ2LwBSBJytj3AB0o4IdLBoepgSgGl5MA==", + "dependencies": { + "@styled-system/core": "^5.1.2" + } + }, + "node_modules/@styled-system/core": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/core/-/core-5.1.2.tgz", + "integrity": "sha512-XclBDdNIy7OPOsN4HBsawG2eiWfCcuFt6gxKn1x4QfMIgeO6TOlA2pZZ5GWZtIhCUqEPTgIBta6JXsGyCkLBYw==", + "dependencies": { + "object-assign": "^4.1.1" + } + }, + "node_modules/@styled-system/css": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/@styled-system/css/-/css-5.1.5.tgz", + "integrity": "sha512-XkORZdS5kypzcBotAMPBoeckDs9aSZVkvrAlq5K3xP8IMAUek+x2O4NtwoSgkYkWWzVBu6DGdFZLR790QWGG+A==" + }, + "node_modules/@styled-system/flexbox": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/flexbox/-/flexbox-5.1.2.tgz", + "integrity": "sha512-6hHV52+eUk654Y1J2v77B8iLeBNtc+SA3R4necsu2VVinSD7+XY5PCCEzBFaWs42dtOEDIa2lMrgL0YBC01mDQ==", + "dependencies": { + "@styled-system/core": "^5.1.2" + } + }, + "node_modules/@styled-system/grid": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/grid/-/grid-5.1.2.tgz", + "integrity": "sha512-K3YiV1KyHHzgdNuNlaw8oW2ktMuGga99o1e/NAfTEi5Zsa7JXxzwEnVSDSBdJC+z6R8WYTCYRQC6bkVFcvdTeg==", + "dependencies": { + "@styled-system/core": "^5.1.2" + } + }, + "node_modules/@styled-system/layout": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/layout/-/layout-5.1.2.tgz", + "integrity": "sha512-wUhkMBqSeacPFhoE9S6UF3fsMEKFv91gF4AdDWp0Aym1yeMPpqz9l9qS/6vjSsDPF7zOb5cOKC3tcKKOMuDCPw==", + "dependencies": { + "@styled-system/core": "^5.1.2" + } + }, + "node_modules/@styled-system/position": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/position/-/position-5.1.2.tgz", + "integrity": "sha512-60IZfMXEOOZe3l1mCu6sj/2NAyUmES2kR9Kzp7s2D3P4qKsZWxD1Se1+wJvevb+1TP+ZMkGPEYYXRyU8M1aF5A==", + "dependencies": { + "@styled-system/core": "^5.1.2" + } + }, + "node_modules/@styled-system/shadow": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/shadow/-/shadow-5.1.2.tgz", + "integrity": "sha512-wqniqYb7XuZM7K7C0d1Euxc4eGtqEe/lvM0WjuAFsQVImiq6KGT7s7is+0bNI8O4Dwg27jyu4Lfqo/oIQXNzAg==", + "dependencies": { + "@styled-system/core": "^5.1.2" + } + }, + "node_modules/@styled-system/should-forward-prop": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/@styled-system/should-forward-prop/-/should-forward-prop-5.1.5.tgz", + "integrity": "sha512-+rPRomgCGYnUIaFabDoOgpSDc4UUJ1KsmlnzcEp0tu5lFrBQKgZclSo18Z1URhaZm7a6agGtS5Xif7tuC2s52Q==", + "dependencies": { + "@emotion/is-prop-valid": "^0.8.1", + "@emotion/memoize": "^0.7.1", + "styled-system": "^5.1.5" + } + }, + "node_modules/@styled-system/space": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/space/-/space-5.1.2.tgz", + "integrity": "sha512-+zzYpR8uvfhcAbaPXhH8QgDAV//flxqxSjHiS9cDFQQUSznXMQmxJegbhcdEF7/eNnJgHeIXv1jmny78kipgBA==", + "dependencies": { + "@styled-system/core": "^5.1.2" + } + }, + "node_modules/@styled-system/typography": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/typography/-/typography-5.1.2.tgz", + "integrity": "sha512-BxbVUnN8N7hJ4aaPOd7wEsudeT7CxarR+2hns8XCX1zp0DFfbWw4xYa/olA0oQaqx7F1hzDg+eRaGzAJbF+jOg==", + "dependencies": { + "@styled-system/core": "^5.1.2" + } + }, + "node_modules/@styled-system/variant": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/@styled-system/variant/-/variant-5.1.5.tgz", + "integrity": "sha512-Yn8hXAFoWIro8+Q5J8YJd/mP85Teiut3fsGVR9CAxwgNfIAiqlYxsk5iHU7VHJks/0KjL4ATSjmbtCDC/4l1qw==", + "dependencies": { + "@styled-system/core": "^5.1.2", + "@styled-system/css": "^5.1.5" + } + }, "node_modules/@surma/rollup-plugin-off-main-thread": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-1.4.2.tgz", @@ -3402,6 +3817,19 @@ "@tiptap/core": "^2.0.0-beta.1" } }, + "node_modules/@tiptap/extension-color": { + "version": "2.0.0-beta.9", + "resolved": "https://registry.npmjs.org/@tiptap/extension-color/-/extension-color-2.0.0-beta.9.tgz", + "integrity": "sha512-c8zcaNCdwUwbgrutfsG7LD9KH7ZvDVwKOZHbOL4gMSwdH9s+6r1ThRFLEbKgHIJlTa2jd96qoo+lVfj1Qwp7ww==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.0.0-beta.1", + "@tiptap/extension-text-style": "^2.0.0-beta.1" + } + }, "node_modules/@tiptap/extension-document": { "version": "2.0.0-beta.15", "resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-2.0.0-beta.15.tgz", @@ -3447,6 +3875,19 @@ "@tiptap/core": "^2.0.0-beta.1" } }, + "node_modules/@tiptap/extension-font-family": { + "version": "2.0.0-beta.21", + "resolved": "https://registry.npmjs.org/@tiptap/extension-font-family/-/extension-font-family-2.0.0-beta.21.tgz", + "integrity": "sha512-5KVCtuEBf1QyZxs/IOL0CPDtB5X3rk8QdDB8fB+UlASa6c/Dq59Uo2aObGOgAWNDdY0Vd9MmuDTvnJKP2LI2Ng==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.0.0-beta.1", + "@tiptap/extension-text-style": "^2.0.0-beta.1" + } + }, "node_modules/@tiptap/extension-gapcursor": { "version": "2.0.0-beta.34", "resolved": "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-2.0.0-beta.34.tgz", @@ -3487,6 +3928,18 @@ "@tiptap/core": "^2.0.0-beta.1" } }, + "node_modules/@tiptap/extension-highlight": { + "version": "2.0.0-beta.33", + "resolved": "https://registry.npmjs.org/@tiptap/extension-highlight/-/extension-highlight-2.0.0-beta.33.tgz", + "integrity": "sha512-TXyMiCcY5a0w5UFax350xU+T79GKJw2XwJ6Punc6sY2RRRgKaEbN1ZF0JCdQhQvD1ooKImHzCRYR8Pldb0xgfg==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.0.0-beta.1" + } + }, "node_modules/@tiptap/extension-history": { "version": "2.0.0-beta.21", "resolved": "https://registry.npmjs.org/@tiptap/extension-history/-/extension-history-2.0.0-beta.21.tgz", @@ -3530,6 +3983,23 @@ "@tiptap/core": "^2.0.0-beta.1" } }, + "node_modules/@tiptap/extension-link": { + "version": "2.0.0-beta.36", + "resolved": "https://registry.npmjs.org/@tiptap/extension-link/-/extension-link-2.0.0-beta.36.tgz", + "integrity": "sha512-jV0EBM/QPfR4e5FG5OPHZARnYS+CL8yhCzHO4J1Nb1i/+vRY9QpPVBruZABBwt+J+PMdq6t/6vvIXejCR3wyAg==", + "dependencies": { + "linkifyjs": "^3.0.5", + "prosemirror-model": "^1.16.1", + "prosemirror-state": "^1.3.4" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.0.0-beta.1" + } + }, "node_modules/@tiptap/extension-list-item": { "version": "2.0.0-beta.20", "resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-2.0.0-beta.20.tgz", @@ -3595,6 +4065,82 @@ "@tiptap/core": "^2.0.0-beta.1" } }, + "node_modules/@tiptap/extension-subscript": { + "version": "2.0.0-beta.10", + "resolved": "https://registry.npmjs.org/@tiptap/extension-subscript/-/extension-subscript-2.0.0-beta.10.tgz", + "integrity": "sha512-er8/1lp0Rb+SKwEioW0w4oVf3EkdQZ0WS/5kPBG4W0DncfUMT+bw5de76S3kRL9PLZ9UShAL7wuXtuiSi5QsMw==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.0.0-beta.1" + } + }, + "node_modules/@tiptap/extension-superscript": { + "version": "2.0.0-beta.10", + "resolved": "https://registry.npmjs.org/@tiptap/extension-superscript/-/extension-superscript-2.0.0-beta.10.tgz", + "integrity": "sha512-TUUBS8XsD2MorGORYVlhGDH7wcc9diSbHscD4Dnz8pKWVR0JPUd/od4h5qSffDzAOKxtphTiX9LOFWk6zVooKg==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.0.0-beta.1" + } + }, + "node_modules/@tiptap/extension-table": { + "version": "2.0.0-beta.48", + "resolved": "https://registry.npmjs.org/@tiptap/extension-table/-/extension-table-2.0.0-beta.48.tgz", + "integrity": "sha512-Hcx3kOBQyazQ3dV0Oq4zKIl1og4EqUuZ5nEWxwcb8HgxSUYIhAJQ7pujPZiRLfkoFy92oVwmh9KhBRfQqRkUpQ==", + "dependencies": { + "prosemirror-tables": "^1.1.1", + "prosemirror-view": "^1.23.6" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.0.0-beta.1" + } + }, + "node_modules/@tiptap/extension-table-cell": { + "version": "2.0.0-beta.20", + "resolved": "https://registry.npmjs.org/@tiptap/extension-table-cell/-/extension-table-cell-2.0.0-beta.20.tgz", + "integrity": "sha512-IllQyxLQvgm1FAewz3U+DkgNHRthmuVrtUQnG6la45qdUOLCOrpFbRRaQ1LJ/BpbvZ2Xs1o2yAa97BqZOPwovQ==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.0.0-beta.1" + } + }, + "node_modules/@tiptap/extension-table-header": { + "version": "2.0.0-beta.22", + "resolved": "https://registry.npmjs.org/@tiptap/extension-table-header/-/extension-table-header-2.0.0-beta.22.tgz", + "integrity": "sha512-nMrghrfl+ZS4EDixs3lgXnHw1Q+ECyTugpRvS36rP7b8GFp3GXm9DfbIAUzwGGfcq1D7DwRnJUDM6ARdWXyw0w==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.0.0-beta.1" + } + }, + "node_modules/@tiptap/extension-table-row": { + "version": "2.0.0-beta.19", + "resolved": "https://registry.npmjs.org/@tiptap/extension-table-row/-/extension-table-row-2.0.0-beta.19.tgz", + "integrity": "sha512-ldEVDpIUX7ZqbViTy4c/RfyNGRv++O/r3A/Ivuon1PykaDDTbPlp5JM89FunAD39cLAbo2HKtweqdmzCMlZsqA==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.0.0-beta.1" + } + }, "node_modules/@tiptap/extension-text": { "version": "2.0.0-beta.15", "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-2.0.0-beta.15.tgz", @@ -3607,11 +4153,34 @@ "@tiptap/core": "^2.0.0-beta.1" } }, + "node_modules/@tiptap/extension-text-align": { + "version": "2.0.0-beta.29", + "resolved": "https://registry.npmjs.org/@tiptap/extension-text-align/-/extension-text-align-2.0.0-beta.29.tgz", + "integrity": "sha512-FNGpl0tVtgG7AK9kVWF/+CGYHta05NpoME4/j6+vhNlZLBNXRA+AKg7W5T8UxmtaC9yGoJsBs2X8M9eCxWVaEQ==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.0.0-beta.1" + } + }, "node_modules/@tiptap/extension-text-style": { "version": "2.0.0-beta.23", "resolved": "https://registry.npmjs.org/@tiptap/extension-text-style/-/extension-text-style-2.0.0-beta.23.tgz", "integrity": "sha512-h/7o//RB4WRrLKWV7E5eFk7tZnfjH0Wt9klixOmvTmus6dm00a7r6wTuaT1GNjfPOgClP3K185lTA5rrdgrxRA==", - "peer": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.0.0-beta.1" + } + }, + "node_modules/@tiptap/extension-underline": { + "version": "2.0.0-beta.23", + "resolved": "https://registry.npmjs.org/@tiptap/extension-underline/-/extension-underline-2.0.0-beta.23.tgz", + "integrity": "sha512-pMjFH/NpFWLd2XQQa5rG9rGVQ9mu3ygdtu6VGfJ3aAjzBiyLXDKhE4biIFWyFsr8zLpp7DjwbrmLV0UGvbG1WQ==", "funding": { "type": "github", "url": "https://github.com/sponsors/ueberdosis" @@ -3754,6 +4323,15 @@ "@types/node": "*" } }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/html-minifier-terser": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz", @@ -3822,8 +4400,7 @@ "node_modules/@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", - "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==", - "dev": true + "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==" }, "node_modules/@types/prettier": { "version": "2.4.4", @@ -3834,8 +4411,7 @@ "node_modules/@types/prop-types": { "version": "15.7.4", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz", - "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==", - "dev": true + "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==" }, "node_modules/@types/prosemirror-commands": { "version": "1.0.4", @@ -3940,13 +4516,22 @@ "version": "17.0.43", "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.43.tgz", "integrity": "sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==", - "dev": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", "csstype": "^3.0.2" } }, + "node_modules/@types/react-color": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/@types/react-color/-/react-color-3.0.6.tgz", + "integrity": "sha512-OzPIO5AyRmLA7PlOyISlgabpYUa3En74LP8mTMa0veCA719SvYQov4WLMsHvCgXP+L+KI9yGhYnqZafVGG0P4w==", + "dev": true, + "dependencies": { + "@types/react": "*", + "@types/reactcss": "*" + } + }, "node_modules/@types/react-dom": { "version": "17.0.14", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.14.tgz", @@ -3956,6 +4541,54 @@ "@types/react": "*" } }, + "node_modules/@types/react-modal": { + "version": "3.13.1", + "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.13.1.tgz", + "integrity": "sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/react-toggle": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/@types/react-toggle/-/react-toggle-4.0.3.tgz", + "integrity": "sha512-57QdMWeeQdRjM2/p+udgYerxUbSkmeUIW18kwUttcci6GHkgxoqCsDZfRtsCsAHcvvM5VBQdtDUEgLWo2e87mA==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/reactcss": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/@types/reactcss/-/reactcss-1.2.6.tgz", + "integrity": "sha512-qaIzpCuXNWomGR1Xq8SCFTtF4v8V27Y6f+b9+bzHiv087MylI/nTCqqdChNeWS7tslgROmYB7yeiruWX7WnqNg==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/rebass": { + "version": "4.0.10", + "resolved": "https://registry.npmjs.org/@types/rebass/-/rebass-4.0.10.tgz", + "integrity": "sha512-Bp9Y2Bc7wrZr2NYHrqWOVRHdL5I5CRIaOiG9hlnwHH5hFRf8/FJsiJmCMsBhlsma312Jc6xWL+XUtSnfio+wOA==", + "dependencies": { + "@types/react": "*", + "@types/styled-components": "*", + "@types/styled-system": "*", + "@types/styled-system__css": "*" + } + }, + "node_modules/@types/rebass__forms": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/@types/rebass__forms/-/rebass__forms-4.0.6.tgz", + "integrity": "sha512-FuC2ibEY447g5lYwkzIVdxJBR+jSUpOclo9xl0b9pPwB2R33tA71DkUXcGwWPcgHRQQitith2o3hUnle++Vdcg==", + "dependencies": { + "@types/react": "*", + "@types/rebass": "*", + "@types/styled-system": "*" + } + }, "node_modules/@types/resolve": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz", @@ -3968,8 +4601,7 @@ "node_modules/@types/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", - "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", - "dev": true + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" }, "node_modules/@types/source-list-map": { "version": "0.1.2", @@ -3983,12 +4615,44 @@ "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==", "dev": true }, + "node_modules/@types/styled-components": { + "version": "5.1.25", + "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.25.tgz", + "integrity": "sha512-fgwl+0Pa8pdkwXRoVPP9JbqF0Ivo9llnmsm+7TCI330kbPIFd9qv1Lrhr37shf4tnxCOSu+/IgqM7uJXLWZZNQ==", + "dependencies": { + "@types/hoist-non-react-statics": "*", + "@types/react": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/styled-system": { + "version": "5.1.15", + "resolved": "https://registry.npmjs.org/@types/styled-system/-/styled-system-5.1.15.tgz", + "integrity": "sha512-1uls4wipZn8FtYFZ7upRVFDoEeOXTQTs2zuyOZPn02T6rjIxtvj2P2lG5qsxXHhKuKsu3thveCZrtaeLE/ibLg==", + "dependencies": { + "csstype": "^3.0.2" + } + }, + "node_modules/@types/styled-system__css": { + "version": "5.0.16", + "resolved": "https://registry.npmjs.org/@types/styled-system__css/-/styled-system__css-5.0.16.tgz", + "integrity": "sha512-Cji5miCIpR27m8yzH6y3cLU6106N4GVyPgUhBQ4nL7VxgoeAtRdAriKdGTnRgJzSpT3HyB7h5G//cDWOl0M1jQ==", + "dependencies": { + "csstype": "^3.0.2" + } + }, "node_modules/@types/tapable": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz", "integrity": "sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==", "dev": true }, + "node_modules/@types/tinycolor2": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/@types/tinycolor2/-/tinycolor2-1.4.3.tgz", + "integrity": "sha512-Kf1w9NE5HEgGxCRyIcRXR/ZYtDv0V8FVPtYHwLxl0O+maGX0erE77pQlD0gpP+/KByMZ87mOA79SjifhSB3PjQ==", + "dev": true + }, "node_modules/@types/uglify-js": { "version": "3.13.1", "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.13.1.tgz", @@ -4634,7 +5298,6 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, "dependencies": { "color-convert": "^1.9.0" }, @@ -5164,6 +5827,75 @@ "object.assign": "^4.1.0" } }, + "node_modules/babel-plugin-emotion": { + "version": "10.2.2", + "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.2.2.tgz", + "integrity": "sha512-SMSkGoqTbTyUTDeuVuPIWifPdUGkTk1Kf9BWRiXIOIcuyMfsdp2EjeiiFvOzX8NOBvEh/ypKYvUh2rkgAJMCLA==", + "dependencies": { + "@babel/helper-module-imports": "^7.0.0", + "@emotion/hash": "0.8.0", + "@emotion/memoize": "0.7.4", + "@emotion/serialize": "^0.11.16", + "babel-plugin-macros": "^2.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^1.0.5", + "find-root": "^1.1.0", + "source-map": "^0.5.7" + } + }, + "node_modules/babel-plugin-emotion/node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + }, + "node_modules/babel-plugin-emotion/node_modules/@emotion/serialize": { + "version": "0.11.16", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz", + "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==", + "dependencies": { + "@emotion/hash": "0.8.0", + "@emotion/memoize": "0.7.4", + "@emotion/unitless": "0.7.5", + "@emotion/utils": "0.11.3", + "csstype": "^2.5.7" + } + }, + "node_modules/babel-plugin-emotion/node_modules/@emotion/utils": { + "version": "0.11.3", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", + "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==" + }, + "node_modules/babel-plugin-emotion/node_modules/babel-plugin-macros": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz", + "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==", + "dependencies": { + "@babel/runtime": "^7.7.2", + "cosmiconfig": "^6.0.0", + "resolve": "^1.12.0" + } + }, + "node_modules/babel-plugin-emotion/node_modules/cosmiconfig": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz", + "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==", + "dependencies": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.1.0", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.7.2" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/babel-plugin-emotion/node_modules/csstype": { + "version": "2.6.20", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz", + "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==" + }, "node_modules/babel-plugin-istanbul": { "version": "6.1.1", "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz", @@ -5284,6 +6016,11 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=" + }, "node_modules/babel-plugin-syntax-object-rest-spread": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", @@ -5493,7 +6230,6 @@ "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", "dev": true, - "optional": true, "engines": { "node": ">=8" } @@ -5931,7 +6667,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", - "dev": true, "engines": { "node": ">=6" } @@ -6011,7 +6746,6 @@ "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, "dependencies": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -6056,7 +6790,6 @@ "url": "https://paulmillr.com/funding/" } ], - "optional": true, "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", @@ -6211,6 +6944,11 @@ "node": ">=0.10.0" } }, + "node_modules/classnames": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" + }, "node_modules/clean-css": { "version": "4.2.4", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.4.tgz", @@ -6309,7 +7047,6 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, "dependencies": { "color-name": "1.1.3" } @@ -6317,8 +7054,7 @@ "node_modules/color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", - "dev": true + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" }, "node_modules/color-string": { "version": "1.9.0", @@ -6519,7 +7255,6 @@ "version": "1.8.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz", "integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==", - "dev": true, "dependencies": { "safe-buffer": "~5.1.1" } @@ -6539,6 +7274,18 @@ "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=", "dev": true }, + "node_modules/copy-anything": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz", + "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==", + "dev": true, + "dependencies": { + "is-what": "^3.14.1" + }, + "funding": { + "url": "https://github.com/sponsors/mesqueeb" + } + }, "node_modules/copy-concurrently": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz", @@ -6850,6 +7597,15 @@ "webpack": "^4.27.0 || ^5.0.0" } }, + "node_modules/css-parse": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/css-parse/-/css-parse-2.0.0.tgz", + "integrity": "sha1-pGjuZnwW2BzPBcWMONKpfHgNv9Q=", + "dev": true, + "dependencies": { + "css": "^2.0.0" + } + }, "node_modules/css-prefers-color-scheme": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz", @@ -6887,6 +7643,16 @@ "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==", "dev": true }, + "node_modules/css-selector-tokenizer": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.3.tgz", + "integrity": "sha512-jWQv3oCEL5kMErj4wRnK/OPoBi0D+P1FR2cDCKYPaMeD2eW3/mttav8HT4hT1CKopiJI/psEULjkClhvJo4Lvg==", + "dev": true, + "dependencies": { + "cssesc": "^3.0.0", + "fastparse": "^1.1.2" + } + }, "node_modules/css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -7160,8 +7926,7 @@ "node_modules/csstype": { "version": "3.0.11", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz", - "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==", - "dev": true + "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==" }, "node_modules/cyclist": { "version": "1.0.1", @@ -7842,9 +8607,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.103", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.103.tgz", - "integrity": "sha512-c/uKWR1Z/W30Wy/sx3dkZoj4BijbXX85QKWu9jJfjho3LBAXNEGAEW3oWiGb+dotA6C6BzCTxL2/aLes7jlUeg==", + "version": "1.4.104", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.104.tgz", + "integrity": "sha512-2kjoAyiG7uMyGRM9mx25s3HAzmQG2ayuYXxsFmYugHSDcwxREgLtscZvbL1JcW9S/OemeQ3f/SG6JhDwpnCclQ==", "dev": true }, "node_modules/elliptic": { @@ -7895,6 +8660,20 @@ "node": ">= 4" } }, + "node_modules/emotion-theming": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/emotion-theming/-/emotion-theming-10.3.0.tgz", + "integrity": "sha512-mXiD2Oj7N9b6+h/dC6oLf9hwxbtKHQjoIqtodEyL8CpkN4F3V4IK/BT4D0C7zSs4BBFOu4UlPJbvvBLa88SGEA==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "@emotion/weak-memoize": "0.2.5", + "hoist-non-react-statics": "^3.3.0" + }, + "peerDependencies": { + "@emotion/core": "^10.0.27", + "react": ">=16.3.0" + } + }, "node_modules/encodeurl": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", @@ -7977,7 +8756,6 @@ "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", - "dev": true, "dependencies": { "is-arrayish": "^0.2.1" } @@ -8097,7 +8875,6 @@ "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", - "dev": true, "engines": { "node": ">=0.8.0" } @@ -8417,9 +9194,9 @@ } }, "node_modules/eslint-plugin-import": { - "version": "2.25.4", - "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.25.4.tgz", - "integrity": "sha512-/KJBASVFxpu0xg1kIBn9AUa8hQVnszpwgE7Ld0lKAlx7Ie87yzEzCgSkekt+le/YVhiaosO4Y14GDAOc41nfxA==", + "version": "2.26.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz", + "integrity": "sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==", "dev": true, "dependencies": { "array-includes": "^3.1.4", @@ -8427,14 +9204,14 @@ "debug": "^2.6.9", "doctrine": "^2.1.0", "eslint-import-resolver-node": "^0.3.6", - "eslint-module-utils": "^2.7.2", + "eslint-module-utils": "^2.7.3", "has": "^1.0.3", - "is-core-module": "^2.8.0", + "is-core-module": "^2.8.1", "is-glob": "^4.0.3", - "minimatch": "^3.0.4", + "minimatch": "^3.1.2", "object.values": "^1.1.5", - "resolve": "^1.20.0", - "tsconfig-paths": "^3.12.0" + "resolve": "^1.22.0", + "tsconfig-paths": "^3.14.1" }, "engines": { "node": ">=4" @@ -9130,6 +9907,11 @@ "url": "https://github.com/sindresorhus/execa?sponsor=1" } }, + "node_modules/exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=" + }, "node_modules/exit": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz", @@ -9522,6 +10304,17 @@ "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=", "dev": true }, + "node_modules/fast-memoize": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz", + "integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw==" + }, + "node_modules/fastparse": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz", + "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==", + "dev": true + }, "node_modules/fastq": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz", @@ -9683,6 +10476,11 @@ "node": ">=6" } }, + "node_modules/find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, "node_modules/find-up": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", @@ -10035,8 +10833,7 @@ "node_modules/function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", - "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", - "dev": true + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" }, "node_modules/functional-red-black-tree": { "version": "1.0.1", @@ -10044,6 +10841,54 @@ "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=", "dev": true }, + "node_modules/generic-names": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/generic-names/-/generic-names-1.0.3.tgz", + "integrity": "sha1-LXhqEhruUIh2eWk56OO/+DbCCRc=", + "dev": true, + "dependencies": { + "loader-utils": "^0.2.16" + } + }, + "node_modules/generic-names/node_modules/big.js": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz", + "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==", + "dev": true, + "engines": { + "node": "*" + } + }, + "node_modules/generic-names/node_modules/emojis-list": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz", + "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=", + "dev": true, + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/generic-names/node_modules/json5": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz", + "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=", + "dev": true, + "bin": { + "json5": "lib/cli.js" + } + }, + "node_modules/generic-names/node_modules/loader-utils": { + "version": "0.2.17", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz", + "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=", + "dev": true, + "dependencies": { + "big.js": "^3.1.3", + "emojis-list": "^2.0.0", + "json5": "^0.5.0", + "object-assign": "^4.0.1" + } + }, "node_modules/gensync": { "version": "1.0.0-beta.2", "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", @@ -10272,7 +11117,6 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", - "dev": true, "dependencies": { "function-bind": "^1.1.1" }, @@ -10293,7 +11137,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true, "engines": { "node": ">=4" } @@ -10472,6 +11315,19 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/hoist-non-react-statics/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -10924,6 +11780,19 @@ "node": ">= 4" } }, + "node_modules/image-size": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz", + "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=", + "dev": true, + "optional": true, + "bin": { + "image-size": "bin/image-size.js" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/immer": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz", @@ -10934,6 +11803,12 @@ "url": "https://opencollective.com/immer" } }, + "node_modules/immutable": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz", + "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==", + "dev": true + }, "node_modules/import-cwd": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz", @@ -10950,7 +11825,6 @@ "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", - "dev": true, "dependencies": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" @@ -10966,7 +11840,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", - "dev": true, "engines": { "node": ">=4" } @@ -11166,8 +12039,7 @@ "node_modules/is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", - "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=", - "dev": true + "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=" }, "node_modules/is-bigint": { "version": "1.0.4", @@ -11186,7 +12058,6 @@ "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", "dev": true, - "optional": true, "dependencies": { "binary-extensions": "^2.0.0" }, @@ -11258,7 +12129,6 @@ "version": "2.8.1", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz", "integrity": "sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==", - "dev": true, "dependencies": { "has": "^1.0.3" }, @@ -11605,6 +12475,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-what": { + "version": "3.14.1", + "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz", + "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==", + "dev": true + }, "node_modules/is-windows": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz", @@ -13731,8 +14607,7 @@ "node_modules/json-parse-even-better-errors": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", - "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", - "dev": true + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==" }, "node_modules/json-schema-traverse": { "version": "0.4.1", @@ -13841,6 +14716,42 @@ "webpack-sources": "^1.1.0" } }, + "node_modules/less": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/less/-/less-4.1.2.tgz", + "integrity": "sha512-EoQp/Et7OSOVu0aJknJOtlXZsnr8XE8KwuzTHOLeVSEx8pVWUICc8Q0VYRHgzyjX78nMEyC/oztWFbgyhtNfDA==", + "dev": true, + "dependencies": { + "copy-anything": "^2.0.1", + "parse-node-version": "^1.0.1", + "tslib": "^2.3.0" + }, + "bin": { + "lessc": "bin/lessc" + }, + "engines": { + "node": ">=6" + }, + "optionalDependencies": { + "errno": "^0.1.1", + "graceful-fs": "^4.1.2", + "image-size": "~0.5.0", + "make-dir": "^2.1.0", + "mime": "^1.4.1", + "needle": "^2.5.2", + "source-map": "~0.6.0" + } + }, + "node_modules/less/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "optional": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", @@ -13863,11 +14774,24 @@ "node": ">= 0.8.0" } }, + "node_modules/lilconfig": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.5.tgz", + "integrity": "sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg==", + "dev": true, + "engines": { + "node": ">=10" + } + }, "node_modules/lines-and-columns": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", - "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", - "dev": true + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" + }, + "node_modules/linkifyjs": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-3.0.5.tgz", + "integrity": "sha512-1Y9XQH65eQKA9p2xtk+zxvnTeQBG7rdAXSkUG97DmuI/Xhji9uaUzaWxRj6rf9YC0v8KKHkxav7tnLX82Sz5Fg==" }, "node_modules/loader-runner": { "version": "2.4.0", @@ -13907,8 +14831,12 @@ "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "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==" }, "node_modules/lodash._reinterpolate": { "version": "3.0.0", @@ -13916,6 +14844,12 @@ "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=", "dev": true }, + "node_modules/lodash.camelcase": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz", + "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=", + "dev": true + }, "node_modules/lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -14071,6 +15005,11 @@ "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", @@ -14523,6 +15462,34 @@ "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=", "dev": true }, + "node_modules/needle": { + "version": "2.9.1", + "resolved": "https://registry.npmjs.org/needle/-/needle-2.9.1.tgz", + "integrity": "sha512-6R9fqJ5Zcmf+uYaFgdIHmLwNldn5HbK8L5ybn7Uz+ylX/rnOsSp1AHcvQSrCaFN+qNM1wpymHqD7mVasEOlHGQ==", + "dev": true, + "optional": true, + "dependencies": { + "debug": "^3.2.6", + "iconv-lite": "^0.4.4", + "sax": "^1.2.4" + }, + "bin": { + "needle": "bin/needle" + }, + "engines": { + "node": ">= 4.4.x" + } + }, + "node_modules/needle/node_modules/debug": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", + "dev": true, + "optional": true, + "dependencies": { + "ms": "^2.1.1" + } + }, "node_modules/negotiator": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz", @@ -15223,7 +16190,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", - "dev": true, "dependencies": { "callsites": "^3.0.0" }, @@ -15248,7 +16214,6 @@ "version": "5.2.0", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", - "dev": true, "dependencies": { "@babel/code-frame": "^7.0.0", "error-ex": "^1.3.1", @@ -15262,6 +16227,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/parse-node-version": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz", + "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==", + "dev": true, + "engines": { + "node": ">= 0.10" + } + }, "node_modules/parse5": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz", @@ -15344,8 +16318,7 @@ "node_modules/path-parse": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", - "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", - "dev": true + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" }, "node_modules/path-to-regexp": { "version": "0.1.7", @@ -15357,7 +16330,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", - "dev": true, "engines": { "node": ">=8" } @@ -15939,6 +16911,38 @@ "node": ">=6.0.0" } }, + "node_modules/postcss-filter-plugins": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/postcss-filter-plugins/-/postcss-filter-plugins-3.0.1.tgz", + "integrity": "sha512-tRKbW4wWBEkSSFuJtamV2wkiV9rj6Yy7P3Y13+zaynlPEEZt8EgYKn3y/RBpMeIhNmHXFlSdzofml65hD5OafA==", + "dev": true, + "dependencies": { + "postcss": "^6.0.14" + } + }, + "node_modules/postcss-filter-plugins/node_modules/postcss": { + "version": "6.0.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", + "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", + "dev": true, + "dependencies": { + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" + }, + "engines": { + "node": ">=4.0.0" + } + }, + "node_modules/postcss-filter-plugins/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/postcss-flexbugs-fixes": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.2.1.tgz", @@ -15993,6 +16997,100 @@ "node": ">=6.0.0" } }, + "node_modules/postcss-icss-keyframes": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/postcss-icss-keyframes/-/postcss-icss-keyframes-0.2.1.tgz", + "integrity": "sha1-gMRFXgESsPL5w8Bax1FQYruf8pU=", + "dev": true, + "dependencies": { + "icss-utils": "^3.0.1", + "postcss": "^6.0.2", + "postcss-value-parser": "^3.3.0" + } + }, + "node_modules/postcss-icss-keyframes/node_modules/icss-utils": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-3.0.1.tgz", + "integrity": "sha1-7nDTroysOMa+XtkehRsn7tNDrQ8=", + "dev": true, + "dependencies": { + "postcss": "^6.0.2" + } + }, + "node_modules/postcss-icss-keyframes/node_modules/postcss": { + "version": "6.0.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", + "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", + "dev": true, + "dependencies": { + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" + }, + "engines": { + "node": ">=4.0.0" + } + }, + "node_modules/postcss-icss-keyframes/node_modules/postcss-value-parser": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", + "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", + "dev": true + }, + "node_modules/postcss-icss-keyframes/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/postcss-icss-selectors": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/postcss-icss-selectors/-/postcss-icss-selectors-2.0.3.tgz", + "integrity": "sha1-J/oa/Kq2xgLIZsuymPMhjpvBybM=", + "dev": true, + "dependencies": { + "css-selector-tokenizer": "^0.7.0", + "generic-names": "^1.0.2", + "icss-utils": "^3.0.1", + "lodash": "^4.17.4", + "postcss": "^6.0.2" + } + }, + "node_modules/postcss-icss-selectors/node_modules/icss-utils": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-3.0.1.tgz", + "integrity": "sha1-7nDTroysOMa+XtkehRsn7tNDrQ8=", + "dev": true, + "dependencies": { + "postcss": "^6.0.2" + } + }, + "node_modules/postcss-icss-selectors/node_modules/postcss": { + "version": "6.0.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", + "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", + "dev": true, + "dependencies": { + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" + }, + "engines": { + "node": ">=4.0.0" + } + }, + "node_modules/postcss-icss-selectors/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/postcss-image-set-function": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-3.0.1.tgz", @@ -17052,7 +18150,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -17062,8 +18159,7 @@ "node_modules/prop-types/node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/prosemirror-commands": { "version": "1.2.2", @@ -17141,6 +18237,18 @@ "prosemirror-transform": "^1.0.0" } }, + "node_modules/prosemirror-tables": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.1.1.tgz", + "integrity": "sha512-LmCz4jrlqQZRsYRDzCRYf/pQ5CUcSOyqZlAj5kv67ZWBH1SVLP2U9WJEvQfimWgeRlIz0y0PQVqO1arRm1+woA==", + "dependencies": { + "prosemirror-keymap": "^1.1.2", + "prosemirror-model": "^1.8.1", + "prosemirror-state": "^1.3.1", + "prosemirror-transform": "^1.2.1", + "prosemirror-view": "^1.13.3" + } + }, "node_modules/prosemirror-transform": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.4.2.tgz", @@ -17385,6 +18493,18 @@ "node": ">= 0.8" } }, + "node_modules/re-resizable": { + "version": "6.9.5", + "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.5.tgz", + "integrity": "sha512-Q4+K8gOPbUBmbJCa0qfoVXBGnCwkAJrZ9KUca4GDn5FmxyV2HtLrBz7u43uUOb0y7xKbwcfuftweiOCIDEiCQA==", + "dependencies": { + "fast-memoize": "^2.5.1" + }, + "peerDependencies": { + "react": "^16.13.1 || ^17.0.0", + "react-dom": "^16.13.1 || ^17.0.0" + } + }, "node_modules/react": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", @@ -17414,6 +18534,23 @@ "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-dev-utils": { "version": "11.0.4", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz", @@ -17566,6 +18703,29 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true }, + "node_modules/react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, + "node_modules/react-modal": { + "version": "3.14.4", + "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.14.4.tgz", + "integrity": "sha512-8surmulejafYCH9wfUmFyj4UfbSJwjcgbS9gf3oOItu4Hwd6ivJyVBETI0yHRhpJKCLZMUtnhzk76wXTsNL6Qg==", + "dependencies": { + "exenv": "^1.2.0", + "prop-types": "^15.7.2", + "react-lifecycles-compat": "^3.0.0", + "warning": "^4.0.3" + }, + "engines": { + "node": ">=8" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.0 || ^16 || ^17", + "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17" + } + }, "node_modules/react-refresh": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", @@ -17699,6 +18859,39 @@ "semver": "bin/semver" } }, + "node_modules/react-toggle": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.1.2.tgz", + "integrity": "sha512-4Ohw31TuYQdhWfA6qlKafeXx3IOH7t4ZHhmRdwsm1fQREwOBGxJT+I22sgHqR/w8JRdk+AeMCJXPImEFSrNXow==", + "dependencies": { + "classnames": "^2.2.5" + }, + "peerDependencies": { + "prop-types": ">= 15.3.0 < 18", + "react": ">= 15.3.0 < 18", + "react-dom": ">= 15.3.0 < 18" + } + }, + "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", @@ -17778,7 +18971,6 @@ "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", "dev": true, - "optional": true, "dependencies": { "picomatch": "^2.2.1" }, @@ -17786,6 +18978,43 @@ "node": ">=8.10.0" } }, + "node_modules/rebass": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/rebass/-/rebass-4.0.7.tgz", + "integrity": "sha512-GJot6j6Qcr7jk1QIgf9qBoud75CGRpN8pGcEo98TSp4KNSWV01ZLvGwFKGI35oEBuNs+lpEd3+pnwkQUTSFytg==", + "dependencies": { + "reflexbox": "^4.0.6" + } + }, + "node_modules/rebass/node_modules/react": { + "version": "16.14.0", + "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", + "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/rebass/node_modules/reflexbox": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/reflexbox/-/reflexbox-4.0.6.tgz", + "integrity": "sha512-UNUL4YoJEXAPjRKHuty1tuOk+LV1nDJ2KYViDcH7lYm5yU3AQ+EKNXxPU3E14bQNK/pE09b1hYl+ZKdA94tWLQ==", + "dependencies": { + "@emotion/core": "^10.0.0", + "@emotion/styled": "^10.0.0", + "@styled-system/css": "^5.0.0", + "@styled-system/should-forward-prop": "^5.0.0", + "styled-system": "^5.0.0" + }, + "peerDependencies": { + "react": "^16.8.6" + } + }, "node_modules/recursive-readdir": { "version": "2.2.2", "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz", @@ -17831,8 +19060,7 @@ "node_modules/regenerator-runtime": { "version": "0.13.9", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", - "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==", - "dev": true + "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" }, "node_modules/regenerator-transform": { "version": "0.14.5", @@ -18031,11 +19259,16 @@ "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=", "dev": true }, + "node_modules/reserved-words": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/reserved-words/-/reserved-words-0.1.2.tgz", + "integrity": "sha1-AKCUD5jNUBrqqsMWQR2a3FKzGrE=", + "dev": true + }, "node_modules/resolve": { "version": "1.18.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.18.1.tgz", "integrity": "sha512-lDfCPaMKfOJXjy0dPayzPdF1phampNWr3qFCjAu+rw/qbQmr5jWH5xN2hwh9QKfw9E5v4hwV7A+jrCmL8yjjqA==", - "dev": true, "dependencies": { "is-core-module": "^2.0.0", "path-parse": "^1.0.6" @@ -18415,8 +19648,7 @@ "node_modules/safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" }, "node_modules/safe-regex": { "version": "1.1.0", @@ -18733,6 +19965,23 @@ "integrity": "sha512-vTxrZz4dX5W86M6oVWVdOVe72ZiPs41Oi7Z6Km4W5Turyz28mrXSJhhEBZoRtzJWIv3833WKVwLSDWWkEfupMg==", "dev": true }, + "node_modules/sass": { + "version": "1.50.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.50.0.tgz", + "integrity": "sha512-cLsD6MEZ5URXHStxApajEh7gW189kkjn4Rc8DQweMyF+o5HF5nfEz8QYLMlPsTOD88DknatTmBWkOcw5/LnJLQ==", + "dev": true, + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/sass-loader": { "version": "10.2.1", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.2.1.tgz", @@ -19439,7 +20688,6 @@ "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -20002,6 +21250,26 @@ "webpack": "^4.0.0 || ^5.0.0" } }, + "node_modules/styled-system": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-5.1.5.tgz", + "integrity": "sha512-7VoD0o2R3RKzOzPK0jYrVnS8iJdfkKsQJNiLRDjikOpQVqQHns/DXWaPZOH4tIKkhAT7I6wIsy9FWTWh2X3q+A==", + "dependencies": { + "@styled-system/background": "^5.1.2", + "@styled-system/border": "^5.1.5", + "@styled-system/color": "^5.1.2", + "@styled-system/core": "^5.1.2", + "@styled-system/flexbox": "^5.1.2", + "@styled-system/grid": "^5.1.2", + "@styled-system/layout": "^5.1.2", + "@styled-system/position": "^5.1.2", + "@styled-system/shadow": "^5.1.2", + "@styled-system/space": "^5.1.2", + "@styled-system/typography": "^5.1.2", + "@styled-system/variant": "^5.1.5", + "object-assign": "^4.1.1" + } + }, "node_modules/stylehacks": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz", @@ -20030,11 +21298,77 @@ "node": ">=8" } }, + "node_modules/stylus": { + "version": "0.54.8", + "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.54.8.tgz", + "integrity": "sha512-vr54Or4BZ7pJafo2mpf0ZcwA74rpuYCZbxrHBsH8kbcXOwSfvBFwsRfpGO5OD5fhG5HDCFW737PKaawI7OqEAg==", + "dev": true, + "dependencies": { + "css-parse": "~2.0.0", + "debug": "~3.1.0", + "glob": "^7.1.6", + "mkdirp": "~1.0.4", + "safer-buffer": "^2.1.2", + "sax": "~1.2.4", + "semver": "^6.3.0", + "source-map": "^0.7.3" + }, + "bin": { + "stylus": "bin/stylus" + }, + "engines": { + "node": "*" + } + }, + "node_modules/stylus/node_modules/debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "dev": true, + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/stylus/node_modules/mkdirp": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", + "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", + "dev": true, + "bin": { + "mkdirp": "bin/cmd.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/stylus/node_modules/ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", + "dev": true + }, + "node_modules/stylus/node_modules/semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true, + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/stylus/node_modules/source-map": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", + "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==", + "dev": true, + "engines": { + "node": ">= 8" + } + }, "node_modules/supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, "dependencies": { "has-flag": "^3.0.0" }, @@ -20605,6 +21939,14 @@ "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", "dev": true }, + "node_modules/tinycolor2": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz", + "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==", + "engines": { + "node": "*" + } + }, "node_modules/tippy.js": { "version": "6.3.7", "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz", @@ -20629,7 +21971,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true, "engines": { "node": ">=4" } @@ -20895,6 +22236,104 @@ "node": ">=4.2.0" } }, + "node_modules/typescript-plugin-css-modules": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/typescript-plugin-css-modules/-/typescript-plugin-css-modules-3.4.0.tgz", + "integrity": "sha512-2MdjfSg4MGex1csCWRUwKD+MpgnvcvLLr9bSAMemU/QYGqBsXdez0cc06H/fFhLtRoKJjXg6PSTur3Gy1Umhpw==", + "dev": true, + "dependencies": { + "dotenv": "^10.0.0", + "icss-utils": "^5.1.0", + "less": "^4.1.1", + "lodash.camelcase": "^4.3.0", + "postcss": "^8.3.0", + "postcss-filter-plugins": "^3.0.1", + "postcss-icss-keyframes": "^0.2.1", + "postcss-icss-selectors": "^2.0.3", + "postcss-load-config": "^3.0.1", + "reserved-words": "^0.1.2", + "sass": "^1.32.13", + "stylus": "^0.54.8", + "tsconfig-paths": "^3.9.0" + }, + "peerDependencies": { + "typescript": ">=3.0.0" + } + }, + "node_modules/typescript-plugin-css-modules/node_modules/dotenv": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz", + "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==", + "dev": true, + "engines": { + "node": ">=10" + } + }, + "node_modules/typescript-plugin-css-modules/node_modules/icss-utils": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", + "dev": true, + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, + "node_modules/typescript-plugin-css-modules/node_modules/postcss": { + "version": "8.4.12", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz", + "integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + } + ], + "dependencies": { + "nanoid": "^3.3.1", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/typescript-plugin-css-modules/node_modules/postcss-load-config": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz", + "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==", + "dev": true, + "dependencies": { + "lilconfig": "^2.0.5", + "yaml": "^1.10.2" + }, + "engines": { + "node": ">= 10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + "peerDependencies": { + "postcss": ">=8.0.9", + "ts-node": ">=9.0.0" + }, + "peerDependenciesMeta": { + "postcss": { + "optional": true + }, + "ts-node": { + "optional": true + } + } + }, "node_modules/unbox-primitive": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz", @@ -21358,6 +22797,14 @@ "makeerror": "1.0.12" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/watchpack": { "version": "1.7.5", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz", @@ -23269,7 +24716,6 @@ "version": "1.10.2", "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", - "dev": true, "engines": { "node": ">= 6" } @@ -23329,6 +24775,22 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zustand": { + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.7.2.tgz", + "integrity": "sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==", + "engines": { + "node": ">=12.7.0" + }, + "peerDependencies": { + "react": ">=16.8" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + } + } } }, "dependencies": { @@ -23345,7 +24807,6 @@ "version": "7.16.7", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz", "integrity": "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==", - "dev": true, "requires": { "@babel/highlight": "^7.16.7" } @@ -23546,7 +25007,6 @@ "version": "7.16.7", "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz", "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==", - "dev": true, "requires": { "@babel/types": "^7.16.7" } @@ -23636,8 +25096,7 @@ "@babel/helper-validator-identifier": { "version": "7.16.7", "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz", - "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==", - "dev": true + "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==" }, "@babel/helper-validator-option": { "version": "7.16.7", @@ -23672,7 +25131,6 @@ "version": "7.16.10", "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.10.tgz", "integrity": "sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==", - "dev": true, "requires": { "@babel/helper-validator-identifier": "^7.16.7", "chalk": "^2.0.0", @@ -24595,7 +26053,6 @@ "version": "7.17.8", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.8.tgz", "integrity": "sha512-dQpEpK0O9o6lj6oPu0gRDbbnk+4LeHlNcBpspf6Olzt3GIX4P1lWF1gS+pHLDFlaJvbR6q7jCfQ08zA4QJBnmA==", - "dev": true, "requires": { "regenerator-runtime": "^0.13.4" } @@ -24643,7 +26100,6 @@ "version": "7.17.0", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz", "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==", - "dev": true, "requires": { "@babel/helper-validator-identifier": "^7.16.7", "to-fast-properties": "^2.0.0" @@ -24677,6 +26133,192 @@ "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==", "dev": true }, + "@emotion/core": { + "version": "10.3.1", + "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.3.1.tgz", + "integrity": "sha512-447aUEjPIm0MnE6QYIaFz9VQOHSXf4Iu6EWOIqq11EAPqinkSZmfymPTmlOE3QjLv846lH4JVZBUOtwGbuQoww==", + "requires": { + "@babel/runtime": "^7.5.5", + "@emotion/cache": "^10.0.27", + "@emotion/css": "^10.0.27", + "@emotion/serialize": "^0.11.15", + "@emotion/sheet": "0.9.4", + "@emotion/utils": "0.11.3" + }, + "dependencies": { + "@emotion/cache": { + "version": "10.0.29", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz", + "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==", + "requires": { + "@emotion/sheet": "0.9.4", + "@emotion/stylis": "0.8.5", + "@emotion/utils": "0.11.3", + "@emotion/weak-memoize": "0.2.5" + } + }, + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + }, + "@emotion/serialize": { + "version": "0.11.16", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz", + "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==", + "requires": { + "@emotion/hash": "0.8.0", + "@emotion/memoize": "0.7.4", + "@emotion/unitless": "0.7.5", + "@emotion/utils": "0.11.3", + "csstype": "^2.5.7" + } + }, + "@emotion/sheet": { + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz", + "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==" + }, + "@emotion/utils": { + "version": "0.11.3", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", + "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==" + }, + "csstype": { + "version": "2.6.20", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz", + "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==" + } + } + }, + "@emotion/css": { + "version": "10.0.27", + "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz", + "integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==", + "requires": { + "@emotion/serialize": "^0.11.15", + "@emotion/utils": "0.11.3", + "babel-plugin-emotion": "^10.0.27" + }, + "dependencies": { + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + }, + "@emotion/serialize": { + "version": "0.11.16", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz", + "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==", + "requires": { + "@emotion/hash": "0.8.0", + "@emotion/memoize": "0.7.4", + "@emotion/unitless": "0.7.5", + "@emotion/utils": "0.11.3", + "csstype": "^2.5.7" + } + }, + "@emotion/utils": { + "version": "0.11.3", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", + "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==" + }, + "csstype": { + "version": "2.6.20", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz", + "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==" + } + } + }, + "@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" + }, + "@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "requires": { + "@emotion/memoize": "0.7.4" + }, + "dependencies": { + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + } + } + }, + "@emotion/memoize": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz", + "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==" + }, + "@emotion/styled": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.3.0.tgz", + "integrity": "sha512-GgcUpXBBEU5ido+/p/mCT2/Xx+Oqmp9JzQRuC+a4lYM4i4LBBn/dWvc0rQ19N9ObA8/T4NWMrPNe79kMBDJqoQ==", + "requires": { + "@emotion/styled-base": "^10.3.0", + "babel-plugin-emotion": "^10.0.27" + } + }, + "@emotion/styled-base": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.3.0.tgz", + "integrity": "sha512-PBRqsVKR7QRNkmfH78hTSSwHWcwDpecH9W6heujWAcyp2wdz/64PP73s7fWS1dIPm8/Exc8JAzYS8dEWXjv60w==", + "requires": { + "@babel/runtime": "^7.5.5", + "@emotion/is-prop-valid": "0.8.8", + "@emotion/serialize": "^0.11.15", + "@emotion/utils": "0.11.3" + }, + "dependencies": { + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + }, + "@emotion/serialize": { + "version": "0.11.16", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz", + "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==", + "requires": { + "@emotion/hash": "0.8.0", + "@emotion/memoize": "0.7.4", + "@emotion/unitless": "0.7.5", + "@emotion/utils": "0.11.3", + "csstype": "^2.5.7" + } + }, + "@emotion/utils": { + "version": "0.11.3", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", + "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==" + }, + "csstype": { + "version": "2.6.20", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz", + "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==" + } + } + }, + "@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, + "@emotion/weak-memoize": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", + "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==" + }, "@eslint/eslintrc": { "version": "0.4.3", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz", @@ -24779,6 +26421,12 @@ "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", @@ -25356,6 +27004,16 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, + "@mdi/js": { + "version": "6.6.96", + "resolved": "https://registry.npmjs.org/@mdi/js/-/js-6.6.96.tgz", + "integrity": "sha512-ke9PN5DjPCOlMfhioxeZYADz8Yiz6v47W0IYRza01SSJD7y1EwESVpwFnnFUso+eCoWtE1CO9cTIvQF6sEreuA==" + }, + "@mdi/react": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@mdi/react/-/react-1.5.0.tgz", + "integrity": "sha512-NztRgUxSYD+ImaKN94Tg66VVVqXj4SmlDGzZoz48H9riJ+Awha56sfXH2fegw819NWo7KI3oeS1Es0lNQqwr0w==" + }, "@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -25382,6 +27040,28 @@ "fastq": "^1.6.0" } }, + "@notesnook/theme": { + "version": "file:../themeprovider", + "requires": { + "@rebass/forms": "^4.0.6", + "@types/node": "^16.11.11", + "@types/react": "^17.0.37", + "@types/react-color": "^3.0.6", + "@types/react-dom": "^17.0.11", + "@types/react-modal": "^3.13.1", + "@types/rebass": "^4.0.10", + "@types/rebass__forms": "^4.0.6", + "@types/tinycolor2": "^1.4.3", + "emotion-theming": "^10.0.19", + "react": "^17.0.2", + "react-dom": "^17.0.2", + "react-scripts": "4.0.3", + "rebass": "^4.0.7", + "tinycolor2": "^1.4.2", + "typescript": "^4.5.2", + "web-vitals": "^1.1.2" + } + }, "@npmcli/fs": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-1.1.1.tgz", @@ -25448,6 +27128,39 @@ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz", "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==" }, + "@rebass/forms": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/@rebass/forms/-/forms-4.0.6.tgz", + "integrity": "sha512-20dHAlb5V0Na2HxCr73Jjoc4hD1ElimmlBpQtclXMoXUsjJ7ORdCNL1S9R54MX5f7iU2VrLGHU42eL7+nONNPQ==", + "requires": { + "reflexbox": "^4.0.6" + }, + "dependencies": { + "react": { + "version": "16.14.0", + "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", + "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", + "peer": true, + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2" + } + }, + "reflexbox": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/reflexbox/-/reflexbox-4.0.6.tgz", + "integrity": "sha512-UNUL4YoJEXAPjRKHuty1tuOk+LV1nDJ2KYViDcH7lYm5yU3AQ+EKNXxPU3E14bQNK/pE09b1hYl+ZKdA94tWLQ==", + "requires": { + "@emotion/core": "^10.0.0", + "@emotion/styled": "^10.0.0", + "@styled-system/css": "^5.0.0", + "@styled-system/should-forward-prop": "^5.0.0", + "styled-system": "^5.0.0" + } + } + } + }, "@rollup/plugin-node-resolve": { "version": "7.1.3", "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz", @@ -25508,6 +27221,118 @@ "@sinonjs/commons": "^1.7.0" } }, + "@styled-system/background": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/background/-/background-5.1.2.tgz", + "integrity": "sha512-jtwH2C/U6ssuGSvwTN3ri/IyjdHb8W9X/g8Y0JLcrH02G+BW3OS8kZdHphF1/YyRklnrKrBT2ngwGUK6aqqV3A==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/border": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/@styled-system/border/-/border-5.1.5.tgz", + "integrity": "sha512-JvddhNrnhGigtzWRCVuAHepniyVi6hBlimxWDVAdcTuk7aRn9BYJUwfHslURtwYFsF5FoEs8Zmr1oZq2M1AP0A==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/color": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/color/-/color-5.1.2.tgz", + "integrity": "sha512-1kCkeKDZkt4GYkuFNKc7vJQMcOmTl3bJY3YBUs7fCNM6mMYJeT1pViQ2LwBSBJytj3AB0o4IdLBoepgSgGl5MA==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/core": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/core/-/core-5.1.2.tgz", + "integrity": "sha512-XclBDdNIy7OPOsN4HBsawG2eiWfCcuFt6gxKn1x4QfMIgeO6TOlA2pZZ5GWZtIhCUqEPTgIBta6JXsGyCkLBYw==", + "requires": { + "object-assign": "^4.1.1" + } + }, + "@styled-system/css": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/@styled-system/css/-/css-5.1.5.tgz", + "integrity": "sha512-XkORZdS5kypzcBotAMPBoeckDs9aSZVkvrAlq5K3xP8IMAUek+x2O4NtwoSgkYkWWzVBu6DGdFZLR790QWGG+A==" + }, + "@styled-system/flexbox": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/flexbox/-/flexbox-5.1.2.tgz", + "integrity": "sha512-6hHV52+eUk654Y1J2v77B8iLeBNtc+SA3R4necsu2VVinSD7+XY5PCCEzBFaWs42dtOEDIa2lMrgL0YBC01mDQ==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/grid": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/grid/-/grid-5.1.2.tgz", + "integrity": "sha512-K3YiV1KyHHzgdNuNlaw8oW2ktMuGga99o1e/NAfTEi5Zsa7JXxzwEnVSDSBdJC+z6R8WYTCYRQC6bkVFcvdTeg==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/layout": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/layout/-/layout-5.1.2.tgz", + "integrity": "sha512-wUhkMBqSeacPFhoE9S6UF3fsMEKFv91gF4AdDWp0Aym1yeMPpqz9l9qS/6vjSsDPF7zOb5cOKC3tcKKOMuDCPw==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/position": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/position/-/position-5.1.2.tgz", + "integrity": "sha512-60IZfMXEOOZe3l1mCu6sj/2NAyUmES2kR9Kzp7s2D3P4qKsZWxD1Se1+wJvevb+1TP+ZMkGPEYYXRyU8M1aF5A==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/shadow": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/shadow/-/shadow-5.1.2.tgz", + "integrity": "sha512-wqniqYb7XuZM7K7C0d1Euxc4eGtqEe/lvM0WjuAFsQVImiq6KGT7s7is+0bNI8O4Dwg27jyu4Lfqo/oIQXNzAg==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/should-forward-prop": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/@styled-system/should-forward-prop/-/should-forward-prop-5.1.5.tgz", + "integrity": "sha512-+rPRomgCGYnUIaFabDoOgpSDc4UUJ1KsmlnzcEp0tu5lFrBQKgZclSo18Z1URhaZm7a6agGtS5Xif7tuC2s52Q==", + "requires": { + "@emotion/is-prop-valid": "^0.8.1", + "@emotion/memoize": "^0.7.1", + "styled-system": "^5.1.5" + } + }, + "@styled-system/space": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/space/-/space-5.1.2.tgz", + "integrity": "sha512-+zzYpR8uvfhcAbaPXhH8QgDAV//flxqxSjHiS9cDFQQUSznXMQmxJegbhcdEF7/eNnJgHeIXv1jmny78kipgBA==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/typography": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/typography/-/typography-5.1.2.tgz", + "integrity": "sha512-BxbVUnN8N7hJ4aaPOd7wEsudeT7CxarR+2hns8XCX1zp0DFfbWw4xYa/olA0oQaqx7F1hzDg+eRaGzAJbF+jOg==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/variant": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/@styled-system/variant/-/variant-5.1.5.tgz", + "integrity": "sha512-Yn8hXAFoWIro8+Q5J8YJd/mP85Teiut3fsGVR9CAxwgNfIAiqlYxsk5iHU7VHJks/0KjL4ATSjmbtCDC/4l1qw==", + "requires": { + "@styled-system/core": "^5.1.2", + "@styled-system/css": "^5.1.5" + } + }, "@surma/rollup-plugin-off-main-thread": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-1.4.2.tgz", @@ -25713,6 +27538,12 @@ "prosemirror-state": "^1.3.4" } }, + "@tiptap/extension-color": { + "version": "2.0.0-beta.9", + "resolved": "https://registry.npmjs.org/@tiptap/extension-color/-/extension-color-2.0.0-beta.9.tgz", + "integrity": "sha512-c8zcaNCdwUwbgrutfsG7LD9KH7ZvDVwKOZHbOL4gMSwdH9s+6r1ThRFLEbKgHIJlTa2jd96qoo+lVfj1Qwp7ww==", + "requires": {} + }, "@tiptap/extension-document": { "version": "2.0.0-beta.15", "resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-2.0.0-beta.15.tgz", @@ -25738,6 +27569,12 @@ "tippy.js": "^6.3.7" } }, + "@tiptap/extension-font-family": { + "version": "2.0.0-beta.21", + "resolved": "https://registry.npmjs.org/@tiptap/extension-font-family/-/extension-font-family-2.0.0-beta.21.tgz", + "integrity": "sha512-5KVCtuEBf1QyZxs/IOL0CPDtB5X3rk8QdDB8fB+UlASa6c/Dq59Uo2aObGOgAWNDdY0Vd9MmuDTvnJKP2LI2Ng==", + "requires": {} + }, "@tiptap/extension-gapcursor": { "version": "2.0.0-beta.34", "resolved": "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-2.0.0-beta.34.tgz", @@ -25759,6 +27596,12 @@ "integrity": "sha512-nR6W/3rjnZH1Swo7tGBoYsmO6xMvu9MGq6jlm3WVHCB7B3CsrRvCkTwGjVIbKTaZC4bQfx5gvAUpQFvwuU+M5w==", "requires": {} }, + "@tiptap/extension-highlight": { + "version": "2.0.0-beta.33", + "resolved": "https://registry.npmjs.org/@tiptap/extension-highlight/-/extension-highlight-2.0.0-beta.33.tgz", + "integrity": "sha512-TXyMiCcY5a0w5UFax350xU+T79GKJw2XwJ6Punc6sY2RRRgKaEbN1ZF0JCdQhQvD1ooKImHzCRYR8Pldb0xgfg==", + "requires": {} + }, "@tiptap/extension-history": { "version": "2.0.0-beta.21", "resolved": "https://registry.npmjs.org/@tiptap/extension-history/-/extension-history-2.0.0-beta.21.tgz", @@ -25782,6 +27625,16 @@ "integrity": "sha512-vejGe2ra4K5ipFOn1U9viqF9X9nPTX8WSJpSOux+9UbKjHpANy7bz69tp66OIi/Wh5L/MMDc+luH/04qfVnpZw==", "requires": {} }, + "@tiptap/extension-link": { + "version": "2.0.0-beta.36", + "resolved": "https://registry.npmjs.org/@tiptap/extension-link/-/extension-link-2.0.0-beta.36.tgz", + "integrity": "sha512-jV0EBM/QPfR4e5FG5OPHZARnYS+CL8yhCzHO4J1Nb1i/+vRY9QpPVBruZABBwt+J+PMdq6t/6vvIXejCR3wyAg==", + "requires": { + "linkifyjs": "^3.0.5", + "prosemirror-model": "^1.16.1", + "prosemirror-state": "^1.3.4" + } + }, "@tiptap/extension-list-item": { "version": "2.0.0-beta.20", "resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-2.0.0-beta.20.tgz", @@ -25816,17 +27669,67 @@ "integrity": "sha512-2dmCgtesuDdivM/54Q+Y6Tc3JbGz1SkHP6c62piuqBiYLWg3xa16zChZOhfN8szbbQlBgLT6XRTDt3c2Ux+Dug==", "requires": {} }, + "@tiptap/extension-subscript": { + "version": "2.0.0-beta.10", + "resolved": "https://registry.npmjs.org/@tiptap/extension-subscript/-/extension-subscript-2.0.0-beta.10.tgz", + "integrity": "sha512-er8/1lp0Rb+SKwEioW0w4oVf3EkdQZ0WS/5kPBG4W0DncfUMT+bw5de76S3kRL9PLZ9UShAL7wuXtuiSi5QsMw==", + "requires": {} + }, + "@tiptap/extension-superscript": { + "version": "2.0.0-beta.10", + "resolved": "https://registry.npmjs.org/@tiptap/extension-superscript/-/extension-superscript-2.0.0-beta.10.tgz", + "integrity": "sha512-TUUBS8XsD2MorGORYVlhGDH7wcc9diSbHscD4Dnz8pKWVR0JPUd/od4h5qSffDzAOKxtphTiX9LOFWk6zVooKg==", + "requires": {} + }, + "@tiptap/extension-table": { + "version": "2.0.0-beta.48", + "resolved": "https://registry.npmjs.org/@tiptap/extension-table/-/extension-table-2.0.0-beta.48.tgz", + "integrity": "sha512-Hcx3kOBQyazQ3dV0Oq4zKIl1og4EqUuZ5nEWxwcb8HgxSUYIhAJQ7pujPZiRLfkoFy92oVwmh9KhBRfQqRkUpQ==", + "requires": { + "prosemirror-tables": "^1.1.1", + "prosemirror-view": "^1.23.6" + } + }, + "@tiptap/extension-table-cell": { + "version": "2.0.0-beta.20", + "resolved": "https://registry.npmjs.org/@tiptap/extension-table-cell/-/extension-table-cell-2.0.0-beta.20.tgz", + "integrity": "sha512-IllQyxLQvgm1FAewz3U+DkgNHRthmuVrtUQnG6la45qdUOLCOrpFbRRaQ1LJ/BpbvZ2Xs1o2yAa97BqZOPwovQ==", + "requires": {} + }, + "@tiptap/extension-table-header": { + "version": "2.0.0-beta.22", + "resolved": "https://registry.npmjs.org/@tiptap/extension-table-header/-/extension-table-header-2.0.0-beta.22.tgz", + "integrity": "sha512-nMrghrfl+ZS4EDixs3lgXnHw1Q+ECyTugpRvS36rP7b8GFp3GXm9DfbIAUzwGGfcq1D7DwRnJUDM6ARdWXyw0w==", + "requires": {} + }, + "@tiptap/extension-table-row": { + "version": "2.0.0-beta.19", + "resolved": "https://registry.npmjs.org/@tiptap/extension-table-row/-/extension-table-row-2.0.0-beta.19.tgz", + "integrity": "sha512-ldEVDpIUX7ZqbViTy4c/RfyNGRv++O/r3A/Ivuon1PykaDDTbPlp5JM89FunAD39cLAbo2HKtweqdmzCMlZsqA==", + "requires": {} + }, "@tiptap/extension-text": { "version": "2.0.0-beta.15", "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-2.0.0-beta.15.tgz", "integrity": "sha512-S3j2+HyV2gsXZP8Wg/HA+YVXQsZ3nrXgBM9HmGAxB0ESOO50l7LWfip0f3qcw1oRlh5H3iLPkA6/f7clD2/TFA==", "requires": {} }, + "@tiptap/extension-text-align": { + "version": "2.0.0-beta.29", + "resolved": "https://registry.npmjs.org/@tiptap/extension-text-align/-/extension-text-align-2.0.0-beta.29.tgz", + "integrity": "sha512-FNGpl0tVtgG7AK9kVWF/+CGYHta05NpoME4/j6+vhNlZLBNXRA+AKg7W5T8UxmtaC9yGoJsBs2X8M9eCxWVaEQ==", + "requires": {} + }, "@tiptap/extension-text-style": { "version": "2.0.0-beta.23", "resolved": "https://registry.npmjs.org/@tiptap/extension-text-style/-/extension-text-style-2.0.0-beta.23.tgz", "integrity": "sha512-h/7o//RB4WRrLKWV7E5eFk7tZnfjH0Wt9klixOmvTmus6dm00a7r6wTuaT1GNjfPOgClP3K185lTA5rrdgrxRA==", - "peer": true, + "requires": {} + }, + "@tiptap/extension-underline": { + "version": "2.0.0-beta.23", + "resolved": "https://registry.npmjs.org/@tiptap/extension-underline/-/extension-underline-2.0.0-beta.23.tgz", + "integrity": "sha512-pMjFH/NpFWLd2XQQa5rG9rGVQ9mu3ygdtu6VGfJ3aAjzBiyLXDKhE4biIFWyFsr8zLpp7DjwbrmLV0UGvbG1WQ==", "requires": {} }, "@tiptap/react": { @@ -25947,6 +27850,15 @@ "@types/node": "*" } }, + "@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "requires": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "@types/html-minifier-terser": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz", @@ -26015,8 +27927,7 @@ "@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", - "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==", - "dev": true + "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==" }, "@types/prettier": { "version": "2.4.4", @@ -26027,8 +27938,7 @@ "@types/prop-types": { "version": "15.7.4", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz", - "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==", - "dev": true + "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==" }, "@types/prosemirror-commands": { "version": "1.0.4", @@ -26133,13 +28043,22 @@ "version": "17.0.43", "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.43.tgz", "integrity": "sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==", - "dev": true, "requires": { "@types/prop-types": "*", "@types/scheduler": "*", "csstype": "^3.0.2" } }, + "@types/react-color": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/@types/react-color/-/react-color-3.0.6.tgz", + "integrity": "sha512-OzPIO5AyRmLA7PlOyISlgabpYUa3En74LP8mTMa0veCA719SvYQov4WLMsHvCgXP+L+KI9yGhYnqZafVGG0P4w==", + "dev": true, + "requires": { + "@types/react": "*", + "@types/reactcss": "*" + } + }, "@types/react-dom": { "version": "17.0.14", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.14.tgz", @@ -26149,6 +28068,54 @@ "@types/react": "*" } }, + "@types/react-modal": { + "version": "3.13.1", + "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.13.1.tgz", + "integrity": "sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, + "@types/react-toggle": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/@types/react-toggle/-/react-toggle-4.0.3.tgz", + "integrity": "sha512-57QdMWeeQdRjM2/p+udgYerxUbSkmeUIW18kwUttcci6GHkgxoqCsDZfRtsCsAHcvvM5VBQdtDUEgLWo2e87mA==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, + "@types/reactcss": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/@types/reactcss/-/reactcss-1.2.6.tgz", + "integrity": "sha512-qaIzpCuXNWomGR1Xq8SCFTtF4v8V27Y6f+b9+bzHiv087MylI/nTCqqdChNeWS7tslgROmYB7yeiruWX7WnqNg==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, + "@types/rebass": { + "version": "4.0.10", + "resolved": "https://registry.npmjs.org/@types/rebass/-/rebass-4.0.10.tgz", + "integrity": "sha512-Bp9Y2Bc7wrZr2NYHrqWOVRHdL5I5CRIaOiG9hlnwHH5hFRf8/FJsiJmCMsBhlsma312Jc6xWL+XUtSnfio+wOA==", + "requires": { + "@types/react": "*", + "@types/styled-components": "*", + "@types/styled-system": "*", + "@types/styled-system__css": "*" + } + }, + "@types/rebass__forms": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/@types/rebass__forms/-/rebass__forms-4.0.6.tgz", + "integrity": "sha512-FuC2ibEY447g5lYwkzIVdxJBR+jSUpOclo9xl0b9pPwB2R33tA71DkUXcGwWPcgHRQQitith2o3hUnle++Vdcg==", + "requires": { + "@types/react": "*", + "@types/rebass": "*", + "@types/styled-system": "*" + } + }, "@types/resolve": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz", @@ -26161,8 +28128,7 @@ "@types/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", - "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", - "dev": true + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" }, "@types/source-list-map": { "version": "0.1.2", @@ -26176,12 +28142,44 @@ "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==", "dev": true }, + "@types/styled-components": { + "version": "5.1.25", + "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.25.tgz", + "integrity": "sha512-fgwl+0Pa8pdkwXRoVPP9JbqF0Ivo9llnmsm+7TCI330kbPIFd9qv1Lrhr37shf4tnxCOSu+/IgqM7uJXLWZZNQ==", + "requires": { + "@types/hoist-non-react-statics": "*", + "@types/react": "*", + "csstype": "^3.0.2" + } + }, + "@types/styled-system": { + "version": "5.1.15", + "resolved": "https://registry.npmjs.org/@types/styled-system/-/styled-system-5.1.15.tgz", + "integrity": "sha512-1uls4wipZn8FtYFZ7upRVFDoEeOXTQTs2zuyOZPn02T6rjIxtvj2P2lG5qsxXHhKuKsu3thveCZrtaeLE/ibLg==", + "requires": { + "csstype": "^3.0.2" + } + }, + "@types/styled-system__css": { + "version": "5.0.16", + "resolved": "https://registry.npmjs.org/@types/styled-system__css/-/styled-system__css-5.0.16.tgz", + "integrity": "sha512-Cji5miCIpR27m8yzH6y3cLU6106N4GVyPgUhBQ4nL7VxgoeAtRdAriKdGTnRgJzSpT3HyB7h5G//cDWOl0M1jQ==", + "requires": { + "csstype": "^3.0.2" + } + }, "@types/tapable": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz", "integrity": "sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==", "dev": true }, + "@types/tinycolor2": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/@types/tinycolor2/-/tinycolor2-1.4.3.tgz", + "integrity": "sha512-Kf1w9NE5HEgGxCRyIcRXR/ZYtDv0V8FVPtYHwLxl0O+maGX0erE77pQlD0gpP+/KByMZ87mOA79SjifhSB3PjQ==", + "dev": true + }, "@types/uglify-js": { "version": "3.13.1", "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.13.1.tgz", @@ -26690,7 +28688,6 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, "requires": { "color-convert": "^1.9.0" } @@ -27106,6 +29103,74 @@ "object.assign": "^4.1.0" } }, + "babel-plugin-emotion": { + "version": "10.2.2", + "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.2.2.tgz", + "integrity": "sha512-SMSkGoqTbTyUTDeuVuPIWifPdUGkTk1Kf9BWRiXIOIcuyMfsdp2EjeiiFvOzX8NOBvEh/ypKYvUh2rkgAJMCLA==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@emotion/hash": "0.8.0", + "@emotion/memoize": "0.7.4", + "@emotion/serialize": "^0.11.16", + "babel-plugin-macros": "^2.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^1.0.5", + "find-root": "^1.1.0", + "source-map": "^0.5.7" + }, + "dependencies": { + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + }, + "@emotion/serialize": { + "version": "0.11.16", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz", + "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==", + "requires": { + "@emotion/hash": "0.8.0", + "@emotion/memoize": "0.7.4", + "@emotion/unitless": "0.7.5", + "@emotion/utils": "0.11.3", + "csstype": "^2.5.7" + } + }, + "@emotion/utils": { + "version": "0.11.3", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", + "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==" + }, + "babel-plugin-macros": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz", + "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==", + "requires": { + "@babel/runtime": "^7.7.2", + "cosmiconfig": "^6.0.0", + "resolve": "^1.12.0" + } + }, + "cosmiconfig": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz", + "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==", + "requires": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.1.0", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.7.2" + } + }, + "csstype": { + "version": "2.6.20", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz", + "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==" + } + } + }, "babel-plugin-istanbul": { "version": "6.1.1", "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz", @@ -27200,6 +29265,11 @@ "@babel/helper-define-polyfill-provider": "^0.3.1" } }, + "babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=" + }, "babel-plugin-syntax-object-rest-spread": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", @@ -27372,8 +29442,7 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", - "dev": true, - "optional": true + "dev": true }, "bindings": { "version": "1.5.0", @@ -27740,8 +29809,7 @@ "callsites": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", - "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", - "dev": true + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==" }, "camel-case": { "version": "4.1.2", @@ -27796,7 +29864,6 @@ "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, "requires": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -27826,7 +29893,6 @@ "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", "dev": true, - "optional": true, "requires": { "anymatch": "~3.1.2", "braces": "~3.0.2", @@ -27952,6 +30018,11 @@ } } }, + "classnames": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" + }, "clean-css": { "version": "4.2.4", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.4.tgz", @@ -28033,7 +30104,6 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, "requires": { "color-name": "1.1.3" } @@ -28041,8 +30111,7 @@ "color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", - "dev": true + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" }, "color-string": { "version": "1.9.0", @@ -28206,7 +30275,6 @@ "version": "1.8.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz", "integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==", - "dev": true, "requires": { "safe-buffer": "~5.1.1" } @@ -28223,6 +30291,15 @@ "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=", "dev": true }, + "copy-anything": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz", + "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==", + "dev": true, + "requires": { + "is-what": "^3.14.1" + } + }, "copy-concurrently": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz", @@ -28478,6 +30555,15 @@ "semver": "^7.3.2" } }, + "css-parse": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/css-parse/-/css-parse-2.0.0.tgz", + "integrity": "sha1-pGjuZnwW2BzPBcWMONKpfHgNv9Q=", + "dev": true, + "requires": { + "css": "^2.0.0" + } + }, "css-prefers-color-scheme": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz", @@ -28506,6 +30592,16 @@ "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==", "dev": true }, + "css-selector-tokenizer": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.3.tgz", + "integrity": "sha512-jWQv3oCEL5kMErj4wRnK/OPoBi0D+P1FR2cDCKYPaMeD2eW3/mttav8HT4hT1CKopiJI/psEULjkClhvJo4Lvg==", + "dev": true, + "requires": { + "cssesc": "^3.0.0", + "fastparse": "^1.1.2" + } + }, "css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -28718,8 +30814,7 @@ "csstype": { "version": "3.0.11", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz", - "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==", - "dev": true + "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==" }, "cyclist": { "version": "1.0.1", @@ -29268,9 +31363,9 @@ "dev": true }, "electron-to-chromium": { - "version": "1.4.103", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.103.tgz", - "integrity": "sha512-c/uKWR1Z/W30Wy/sx3dkZoj4BijbXX85QKWu9jJfjho3LBAXNEGAEW3oWiGb+dotA6C6BzCTxL2/aLes7jlUeg==", + "version": "1.4.104", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.104.tgz", + "integrity": "sha512-2kjoAyiG7uMyGRM9mx25s3HAzmQG2ayuYXxsFmYugHSDcwxREgLtscZvbL1JcW9S/OemeQ3f/SG6JhDwpnCclQ==", "dev": true }, "elliptic": { @@ -29314,6 +31409,16 @@ "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==", "dev": true }, + "emotion-theming": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/emotion-theming/-/emotion-theming-10.3.0.tgz", + "integrity": "sha512-mXiD2Oj7N9b6+h/dC6oLf9hwxbtKHQjoIqtodEyL8CpkN4F3V4IK/BT4D0C7zSs4BBFOu4UlPJbvvBLa88SGEA==", + "requires": { + "@babel/runtime": "^7.5.5", + "@emotion/weak-memoize": "0.2.5", + "hoist-non-react-statics": "^3.3.0" + } + }, "encodeurl": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", @@ -29380,7 +31485,6 @@ "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", - "dev": true, "requires": { "is-arrayish": "^0.2.1" } @@ -29480,8 +31584,7 @@ "escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", - "dev": true + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" }, "escodegen": { "version": "2.0.0", @@ -29818,9 +31921,9 @@ } }, "eslint-plugin-import": { - "version": "2.25.4", - "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.25.4.tgz", - "integrity": "sha512-/KJBASVFxpu0xg1kIBn9AUa8hQVnszpwgE7Ld0lKAlx7Ie87yzEzCgSkekt+le/YVhiaosO4Y14GDAOc41nfxA==", + "version": "2.26.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz", + "integrity": "sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==", "dev": true, "requires": { "array-includes": "^3.1.4", @@ -29828,14 +31931,14 @@ "debug": "^2.6.9", "doctrine": "^2.1.0", "eslint-import-resolver-node": "^0.3.6", - "eslint-module-utils": "^2.7.2", + "eslint-module-utils": "^2.7.3", "has": "^1.0.3", - "is-core-module": "^2.8.0", + "is-core-module": "^2.8.1", "is-glob": "^4.0.3", - "minimatch": "^3.0.4", + "minimatch": "^3.1.2", "object.values": "^1.1.5", - "resolve": "^1.20.0", - "tsconfig-paths": "^3.12.0" + "resolve": "^1.22.0", + "tsconfig-paths": "^3.14.1" }, "dependencies": { "debug": { @@ -30211,6 +32314,11 @@ "strip-final-newline": "^2.0.0" } }, + "exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=" + }, "exit": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz", @@ -30537,6 +32645,17 @@ "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=", "dev": true }, + "fast-memoize": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz", + "integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw==" + }, + "fastparse": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz", + "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==", + "dev": true + }, "fastq": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz", @@ -30667,6 +32786,11 @@ "pkg-dir": "^3.0.0" } }, + "find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, "find-up": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", @@ -30944,8 +33068,7 @@ "function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", - "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", - "dev": true + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" }, "functional-red-black-tree": { "version": "1.0.1", @@ -30953,6 +33076,47 @@ "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=", "dev": true }, + "generic-names": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/generic-names/-/generic-names-1.0.3.tgz", + "integrity": "sha1-LXhqEhruUIh2eWk56OO/+DbCCRc=", + "dev": true, + "requires": { + "loader-utils": "^0.2.16" + }, + "dependencies": { + "big.js": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz", + "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==", + "dev": true + }, + "emojis-list": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz", + "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=", + "dev": true + }, + "json5": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz", + "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=", + "dev": true + }, + "loader-utils": { + "version": "0.2.17", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz", + "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=", + "dev": true, + "requires": { + "big.js": "^3.1.3", + "emojis-list": "^2.0.0", + "json5": "^0.5.0", + "object-assign": "^4.0.1" + } + } + } + }, "gensync": { "version": "1.0.0-beta.2", "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", @@ -31126,7 +33290,6 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", - "dev": true, "requires": { "function-bind": "^1.1.1" } @@ -31140,8 +33303,7 @@ "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=" }, "has-symbols": { "version": "1.0.3", @@ -31273,6 +33435,21 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + }, + "dependencies": { + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + } + } + }, "hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -31633,12 +33810,25 @@ "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==", "dev": true }, + "image-size": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz", + "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=", + "dev": true, + "optional": true + }, "immer": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz", "integrity": "sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA==", "dev": true }, + "immutable": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz", + "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==", + "dev": true + }, "import-cwd": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz", @@ -31652,7 +33842,6 @@ "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", - "dev": true, "requires": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" @@ -31661,8 +33850,7 @@ "resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", - "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", - "dev": true + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==" } } }, @@ -31817,8 +34005,7 @@ "is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", - "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=", - "dev": true + "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=" }, "is-bigint": { "version": "1.0.4", @@ -31834,7 +34021,6 @@ "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", "dev": true, - "optional": true, "requires": { "binary-extensions": "^2.0.0" } @@ -31888,7 +34074,6 @@ "version": "2.8.1", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz", "integrity": "sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==", - "dev": true, "requires": { "has": "^1.0.3" } @@ -32124,6 +34309,12 @@ "call-bind": "^1.0.2" } }, + "is-what": { + "version": "3.14.1", + "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz", + "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==", + "dev": true + }, "is-windows": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz", @@ -33735,8 +35926,7 @@ "json-parse-even-better-errors": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", - "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", - "dev": true + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==" }, "json-schema-traverse": { "version": "0.4.1", @@ -33825,6 +36015,33 @@ "webpack-sources": "^1.1.0" } }, + "less": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/less/-/less-4.1.2.tgz", + "integrity": "sha512-EoQp/Et7OSOVu0aJknJOtlXZsnr8XE8KwuzTHOLeVSEx8pVWUICc8Q0VYRHgzyjX78nMEyC/oztWFbgyhtNfDA==", + "dev": true, + "requires": { + "copy-anything": "^2.0.1", + "errno": "^0.1.1", + "graceful-fs": "^4.1.2", + "image-size": "~0.5.0", + "make-dir": "^2.1.0", + "mime": "^1.4.1", + "needle": "^2.5.2", + "parse-node-version": "^1.0.1", + "source-map": "~0.6.0", + "tslib": "^2.3.0" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "optional": true + } + } + }, "leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", @@ -33841,11 +36058,21 @@ "type-check": "~0.4.0" } }, + "lilconfig": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.5.tgz", + "integrity": "sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg==", + "dev": true + }, "lines-and-columns": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", - "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", - "dev": true + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" + }, + "linkifyjs": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-3.0.5.tgz", + "integrity": "sha512-1Y9XQH65eQKA9p2xtk+zxvnTeQBG7rdAXSkUG97DmuI/Xhji9uaUzaWxRj6rf9YC0v8KKHkxav7tnLX82Sz5Fg==" }, "loader-runner": { "version": "2.4.0", @@ -33876,8 +36103,12 @@ "lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "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==" }, "lodash._reinterpolate": { "version": "3.0.0", @@ -33885,6 +36116,12 @@ "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=", "dev": true }, + "lodash.camelcase": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz", + "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=", + "dev": true + }, "lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -34017,6 +36254,11 @@ "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", @@ -34384,6 +36626,30 @@ "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=", "dev": true }, + "needle": { + "version": "2.9.1", + "resolved": "https://registry.npmjs.org/needle/-/needle-2.9.1.tgz", + "integrity": "sha512-6R9fqJ5Zcmf+uYaFgdIHmLwNldn5HbK8L5ybn7Uz+ylX/rnOsSp1AHcvQSrCaFN+qNM1wpymHqD7mVasEOlHGQ==", + "dev": true, + "optional": true, + "requires": { + "debug": "^3.2.6", + "iconv-lite": "^0.4.4", + "sax": "^1.2.4" + }, + "dependencies": { + "debug": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", + "dev": true, + "optional": true, + "requires": { + "ms": "^2.1.1" + } + } + } + }, "negotiator": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz", @@ -34938,7 +37204,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", - "dev": true, "requires": { "callsites": "^3.0.0" } @@ -34960,7 +37225,6 @@ "version": "5.2.0", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", - "dev": true, "requires": { "@babel/code-frame": "^7.0.0", "error-ex": "^1.3.1", @@ -34968,6 +37232,12 @@ "lines-and-columns": "^1.1.6" } }, + "parse-node-version": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz", + "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==", + "dev": true + }, "parse5": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz", @@ -35035,8 +37305,7 @@ "path-parse": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", - "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", - "dev": true + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" }, "path-to-regexp": { "version": "0.1.7", @@ -35047,8 +37316,7 @@ "path-type": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", - "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", - "dev": true + "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==" }, "pbkdf2": { "version": "3.1.2", @@ -35513,6 +37781,34 @@ "postcss-values-parser": "^2.0.0" } }, + "postcss-filter-plugins": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/postcss-filter-plugins/-/postcss-filter-plugins-3.0.1.tgz", + "integrity": "sha512-tRKbW4wWBEkSSFuJtamV2wkiV9rj6Yy7P3Y13+zaynlPEEZt8EgYKn3y/RBpMeIhNmHXFlSdzofml65hD5OafA==", + "dev": true, + "requires": { + "postcss": "^6.0.14" + }, + "dependencies": { + "postcss": { + "version": "6.0.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", + "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", + "dev": true, + "requires": { + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, "postcss-flexbugs-fixes": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.2.1.tgz", @@ -35558,6 +37854,92 @@ "postcss": "^7.0.2" } }, + "postcss-icss-keyframes": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/postcss-icss-keyframes/-/postcss-icss-keyframes-0.2.1.tgz", + "integrity": "sha1-gMRFXgESsPL5w8Bax1FQYruf8pU=", + "dev": true, + "requires": { + "icss-utils": "^3.0.1", + "postcss": "^6.0.2", + "postcss-value-parser": "^3.3.0" + }, + "dependencies": { + "icss-utils": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-3.0.1.tgz", + "integrity": "sha1-7nDTroysOMa+XtkehRsn7tNDrQ8=", + "dev": true, + "requires": { + "postcss": "^6.0.2" + } + }, + "postcss": { + "version": "6.0.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", + "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", + "dev": true, + "requires": { + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" + } + }, + "postcss-value-parser": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", + "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", + "dev": true + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, + "postcss-icss-selectors": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/postcss-icss-selectors/-/postcss-icss-selectors-2.0.3.tgz", + "integrity": "sha1-J/oa/Kq2xgLIZsuymPMhjpvBybM=", + "dev": true, + "requires": { + "css-selector-tokenizer": "^0.7.0", + "generic-names": "^1.0.2", + "icss-utils": "^3.0.1", + "lodash": "^4.17.4", + "postcss": "^6.0.2" + }, + "dependencies": { + "icss-utils": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-3.0.1.tgz", + "integrity": "sha1-7nDTroysOMa+XtkehRsn7tNDrQ8=", + "dev": true, + "requires": { + "postcss": "^6.0.2" + } + }, + "postcss": { + "version": "6.0.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", + "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", + "dev": true, + "requires": { + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, "postcss-image-set-function": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-3.0.1.tgz", @@ -36439,7 +38821,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "requires": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -36449,8 +38830,7 @@ "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" } } }, @@ -36530,6 +38910,18 @@ "prosemirror-transform": "^1.0.0" } }, + "prosemirror-tables": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.1.1.tgz", + "integrity": "sha512-LmCz4jrlqQZRsYRDzCRYf/pQ5CUcSOyqZlAj5kv67ZWBH1SVLP2U9WJEvQfimWgeRlIz0y0PQVqO1arRm1+woA==", + "requires": { + "prosemirror-keymap": "^1.1.2", + "prosemirror-model": "^1.8.1", + "prosemirror-state": "^1.3.1", + "prosemirror-transform": "^1.2.1", + "prosemirror-view": "^1.13.3" + } + }, "prosemirror-transform": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.4.2.tgz", @@ -36731,6 +39123,14 @@ } } }, + "re-resizable": { + "version": "6.9.5", + "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.5.tgz", + "integrity": "sha512-Q4+K8gOPbUBmbJCa0qfoVXBGnCwkAJrZ9KUca4GDn5FmxyV2HtLrBz7u43uUOb0y7xKbwcfuftweiOCIDEiCQA==", + "requires": { + "fast-memoize": "^2.5.1" + } + }, "react": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", @@ -36754,6 +39154,20 @@ "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-dev-utils": { "version": "11.0.4", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz", @@ -36877,6 +39291,22 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, + "react-modal": { + "version": "3.14.4", + "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.14.4.tgz", + "integrity": "sha512-8surmulejafYCH9wfUmFyj4UfbSJwjcgbS9gf3oOItu4Hwd6ivJyVBETI0yHRhpJKCLZMUtnhzk76wXTsNL6Qg==", + "requires": { + "exenv": "^1.2.0", + "prop-types": "^15.7.2", + "react-lifecycles-compat": "^3.0.0", + "warning": "^4.0.3" + } + }, "react-refresh": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", @@ -36984,6 +39414,28 @@ } } }, + "react-toggle": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.1.2.tgz", + "integrity": "sha512-4Ohw31TuYQdhWfA6qlKafeXx3IOH7t4ZHhmRdwsm1fQREwOBGxJT+I22sgHqR/w8JRdk+AeMCJXPImEFSrNXow==", + "requires": { + "classnames": "^2.2.5" + } + }, + "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", @@ -37054,11 +39506,43 @@ "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", "dev": true, - "optional": true, "requires": { "picomatch": "^2.2.1" } }, + "rebass": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/rebass/-/rebass-4.0.7.tgz", + "integrity": "sha512-GJot6j6Qcr7jk1QIgf9qBoud75CGRpN8pGcEo98TSp4KNSWV01ZLvGwFKGI35oEBuNs+lpEd3+pnwkQUTSFytg==", + "requires": { + "reflexbox": "^4.0.6" + }, + "dependencies": { + "react": { + "version": "16.14.0", + "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", + "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", + "peer": true, + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2" + } + }, + "reflexbox": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/reflexbox/-/reflexbox-4.0.6.tgz", + "integrity": "sha512-UNUL4YoJEXAPjRKHuty1tuOk+LV1nDJ2KYViDcH7lYm5yU3AQ+EKNXxPU3E14bQNK/pE09b1hYl+ZKdA94tWLQ==", + "requires": { + "@emotion/core": "^10.0.0", + "@emotion/styled": "^10.0.0", + "@styled-system/css": "^5.0.0", + "@styled-system/should-forward-prop": "^5.0.0", + "styled-system": "^5.0.0" + } + } + } + }, "recursive-readdir": { "version": "2.2.2", "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz", @@ -37097,8 +39581,7 @@ "regenerator-runtime": { "version": "0.13.9", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", - "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==", - "dev": true + "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" }, "regenerator-transform": { "version": "0.14.5", @@ -37256,11 +39739,16 @@ "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=", "dev": true }, + "reserved-words": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/reserved-words/-/reserved-words-0.1.2.tgz", + "integrity": "sha1-AKCUD5jNUBrqqsMWQR2a3FKzGrE=", + "dev": true + }, "resolve": { "version": "1.18.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.18.1.tgz", "integrity": "sha512-lDfCPaMKfOJXjy0dPayzPdF1phampNWr3qFCjAu+rw/qbQmr5jWH5xN2hwh9QKfw9E5v4hwV7A+jrCmL8yjjqA==", - "dev": true, "requires": { "is-core-module": "^2.0.0", "path-parse": "^1.0.6" @@ -37560,8 +40048,7 @@ "safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" }, "safe-regex": { "version": "1.1.0", @@ -37819,6 +40306,17 @@ "integrity": "sha512-vTxrZz4dX5W86M6oVWVdOVe72ZiPs41Oi7Z6Km4W5Turyz28mrXSJhhEBZoRtzJWIv3833WKVwLSDWWkEfupMg==", "dev": true }, + "sass": { + "version": "1.50.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.50.0.tgz", + "integrity": "sha512-cLsD6MEZ5URXHStxApajEh7gW189kkjn4Rc8DQweMyF+o5HF5nfEz8QYLMlPsTOD88DknatTmBWkOcw5/LnJLQ==", + "dev": true, + "requires": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + } + }, "sass-loader": { "version": "10.2.1", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.2.1.tgz", @@ -38401,8 +40899,7 @@ "source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" }, "source-map-js": { "version": "1.0.2", @@ -38859,6 +41356,26 @@ "schema-utils": "^2.7.0" } }, + "styled-system": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-5.1.5.tgz", + "integrity": "sha512-7VoD0o2R3RKzOzPK0jYrVnS8iJdfkKsQJNiLRDjikOpQVqQHns/DXWaPZOH4tIKkhAT7I6wIsy9FWTWh2X3q+A==", + "requires": { + "@styled-system/background": "^5.1.2", + "@styled-system/border": "^5.1.5", + "@styled-system/color": "^5.1.2", + "@styled-system/core": "^5.1.2", + "@styled-system/flexbox": "^5.1.2", + "@styled-system/grid": "^5.1.2", + "@styled-system/layout": "^5.1.2", + "@styled-system/position": "^5.1.2", + "@styled-system/shadow": "^5.1.2", + "@styled-system/space": "^5.1.2", + "@styled-system/typography": "^5.1.2", + "@styled-system/variant": "^5.1.5", + "object-assign": "^4.1.1" + } + }, "stylehacks": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz", @@ -38883,11 +41400,61 @@ } } }, + "stylus": { + "version": "0.54.8", + "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.54.8.tgz", + "integrity": "sha512-vr54Or4BZ7pJafo2mpf0ZcwA74rpuYCZbxrHBsH8kbcXOwSfvBFwsRfpGO5OD5fhG5HDCFW737PKaawI7OqEAg==", + "dev": true, + "requires": { + "css-parse": "~2.0.0", + "debug": "~3.1.0", + "glob": "^7.1.6", + "mkdirp": "~1.0.4", + "safer-buffer": "^2.1.2", + "sax": "~1.2.4", + "semver": "^6.3.0", + "source-map": "^0.7.3" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "dev": true, + "requires": { + "ms": "2.0.0" + } + }, + "mkdirp": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", + "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", + "dev": true + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", + "dev": true + }, + "semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true + }, + "source-map": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", + "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==", + "dev": true + } + } + }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, "requires": { "has-flag": "^3.0.0" } @@ -39328,6 +41895,11 @@ "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", "dev": true }, + "tinycolor2": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz", + "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==" + }, "tippy.js": { "version": "6.3.7", "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz", @@ -39351,8 +41923,7 @@ "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true + "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=" }, "to-object-path": { "version": "0.3.0", @@ -39557,6 +42128,63 @@ "integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==", "dev": true }, + "typescript-plugin-css-modules": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/typescript-plugin-css-modules/-/typescript-plugin-css-modules-3.4.0.tgz", + "integrity": "sha512-2MdjfSg4MGex1csCWRUwKD+MpgnvcvLLr9bSAMemU/QYGqBsXdez0cc06H/fFhLtRoKJjXg6PSTur3Gy1Umhpw==", + "dev": true, + "requires": { + "dotenv": "^10.0.0", + "icss-utils": "^5.1.0", + "less": "^4.1.1", + "lodash.camelcase": "^4.3.0", + "postcss": "^8.3.0", + "postcss-filter-plugins": "^3.0.1", + "postcss-icss-keyframes": "^0.2.1", + "postcss-icss-selectors": "^2.0.3", + "postcss-load-config": "^3.0.1", + "reserved-words": "^0.1.2", + "sass": "^1.32.13", + "stylus": "^0.54.8", + "tsconfig-paths": "^3.9.0" + }, + "dependencies": { + "dotenv": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz", + "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==", + "dev": true + }, + "icss-utils": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", + "dev": true, + "requires": {} + }, + "postcss": { + "version": "8.4.12", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz", + "integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==", + "dev": true, + "requires": { + "nanoid": "^3.3.1", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + } + }, + "postcss-load-config": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz", + "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==", + "dev": true, + "requires": { + "lilconfig": "^2.0.5", + "yaml": "^1.10.2" + } + } + } + }, "unbox-primitive": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz", @@ -39935,6 +42563,14 @@ "makeerror": "1.0.12" } }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchpack": { "version": "1.7.5", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz", @@ -41512,8 +44148,7 @@ "yaml": { "version": "1.10.2", "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", - "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", - "dev": true + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==" }, "yargs": { "version": "15.4.1", @@ -41557,6 +44192,12 @@ "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==", "dev": true + }, + "zustand": { + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.7.2.tgz", + "integrity": "sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==", + "requires": {} } } } diff --git a/packages/editor/package.json b/packages/editor/package.json index 936b8d688..a43993456 100644 --- a/packages/editor/package.json +++ b/packages/editor/package.json @@ -2,25 +2,61 @@ "name": "notesnook-editor", "version": "0.0.1", "private": true, - "main": "./", + "main": "./dist/index.js", "dependencies": { - "@tiptap/extension-history": "^2.0.0-beta.21", + "@mdi/js": "^6.6.96", + "@mdi/react": "^1.5.0", + "@notesnook/theme": "file:../themeprovider", + "@rebass/forms": "^4.0.6", "@tiptap/extension-character-count": "^2.0.0-beta.24", + "@tiptap/extension-color": "^2.0.0-beta.9", + "@tiptap/extension-font-family": "^2.0.0-beta.21", + "@tiptap/extension-highlight": "^2.0.0-beta.33", + "@tiptap/extension-history": "^2.0.0-beta.21", + "@tiptap/extension-horizontal-rule": "^2.0.0-beta.31", + "@tiptap/extension-link": "^2.0.0-beta.36", "@tiptap/extension-placeholder": "^2.0.0-beta.45", + "@tiptap/extension-subscript": "^2.0.0-beta.10", + "@tiptap/extension-superscript": "^2.0.0-beta.10", + "@tiptap/extension-table": "^2.0.0-beta.48", + "@tiptap/extension-table-cell": "^2.0.0-beta.20", + "@tiptap/extension-table-header": "^2.0.0-beta.22", + "@tiptap/extension-table-row": "^2.0.0-beta.19", + "@tiptap/extension-text-align": "^2.0.0-beta.29", + "@tiptap/extension-text-style": "^2.0.0-beta.23", + "@tiptap/extension-underline": "^2.0.0-beta.23", "@tiptap/react": "^2.0.0-beta.98", - "@tiptap/starter-kit": "^2.0.0-beta.150" + "@tiptap/starter-kit": "^2.0.0-beta.150", + "@types/rebass": "^4.0.10", + "@types/rebass__forms": "^4.0.6", + "emotion-theming": "^10.0.19", + "prosemirror-tables": "^1.1.1", + "re-resizable": "^6.9.5", + "react-color": "^2.19.3", + "react-modal": "^3.14.4", + "react-toggle": "^4.1.2", + "reactjs-popup": "^2.0.5", + "rebass": "^4.0.7", + "tinycolor2": "^1.4.2", + "tippy.js": "^6.3.7", + "zustand": "^3.7.2" }, "devDependencies": { "@types/node": "^16.11.11", "@types/react": "^17.0.37", + "@types/react-color": "^3.0.6", "@types/react-dom": "^17.0.11", + "@types/react-modal": "^3.13.1", + "@types/react-toggle": "^4.0.3", + "@types/tinycolor2": "^1.4.3", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", "typescript": "^4.5.2", + "typescript-plugin-css-modules": "^3.4.0", "web-vitals": "^1.1.2" }, "scripts": { - "build": "react-scripts build" + "build": "tsc" } } diff --git a/packages/editor/src/components/menu/index.ts b/packages/editor/src/components/menu/index.ts new file mode 100644 index 000000000..c6bb7b61b --- /dev/null +++ b/packages/editor/src/components/menu/index.ts @@ -0,0 +1 @@ +export { MenuPresenter } from "./menu"; diff --git a/packages/editor/src/components/menu/menu.tsx b/packages/editor/src/components/menu/menu.tsx new file mode 100644 index 000000000..a58eb3f61 --- /dev/null +++ b/packages/editor/src/components/menu/menu.tsx @@ -0,0 +1,377 @@ +import React, { + useCallback, + useRef, + useEffect, + useState, + PropsWithChildren, +} from "react"; +import ReactDOM from "react-dom"; +import { Box, Flex, FlexProps, Text } from "rebass"; +import { getPosition, MenuOptions } from "./useMenu"; +// import { FlexScrollContainer } from "../scrollcontainer"; +import MenuItem from "./menuitem"; +import { MenuItem as MenuItemType /*ResolvedMenuItem*/ } from "./types"; +// import { useMenuTrigger, useMenu, getPosition } from "../../hooks/useMenu"; +import Modal from "react-modal"; +import { ThemeProvider } from "emotion-theming"; +// import { store as selectionStore } from "../../stores/selectionstore"; + +function useMenuFocus( + items: MenuItemType[], + onAction: (event: KeyboardEvent) => void, + onClose: (event: KeyboardEvent) => void +) { + const [focusIndex, setFocusIndex] = useState(-1); + const [isSubmenuOpen, setIsSubmenuOpen] = useState(false); + + const moveItemIntoView = useCallback( + (index) => { + const item = items[index]; + if (!item) return; + const element = document.getElementById(item.key); + if (!element) return; + element.scrollIntoView({ + behavior: "auto", + }); + }, + [items] + ); + + const onKeyDown = useCallback( + (e: KeyboardEvent) => { + const isSeperator = (i: number) => + items && (items[i]?.type === "seperator" || items[i]?.isDisabled); + const moveDown = (i: number) => (i < items.length - 1 ? ++i : 0); + const moveUp = (i: number) => (i > 0 ? --i : items.length - 1); + const hasSubmenu = (i: number) => items && items[i]?.hasSubmenu; + const openSubmenu = (index: number) => { + if (!hasSubmenu(index)) return; + setIsSubmenuOpen(true); + }; + + const closeSubmenu = (index: number) => { + if (!hasSubmenu(index)) return; + setIsSubmenuOpen(false); + }; + + setFocusIndex((i) => { + let nextIndex = i; + + switch (e.key) { + case "ArrowUp": + if (isSubmenuOpen) break; + nextIndex = moveUp(i); + while (isSeperator(nextIndex)) { + nextIndex = moveUp(nextIndex); + } + break; + case "ArrowDown": + if (isSubmenuOpen) break; + nextIndex = moveDown(i); + while (isSeperator(nextIndex)) { + nextIndex = moveDown(nextIndex); + } + break; + case "ArrowRight": + openSubmenu(i); + break; + case "ArrowLeft": + closeSubmenu(i); + break; + case "Enter": + onAction && onAction(e); + break; + case "Escape": + onClose && onClose(e); + break; + default: + break; + } + if (nextIndex !== i) moveItemIntoView(nextIndex); + + return nextIndex; + }); + }, + [items, isSubmenuOpen, moveItemIntoView, onAction] + ); + + useEffect(() => { + window.addEventListener("keydown", onKeyDown); + return () => { + window.removeEventListener("keydown", onKeyDown); + }; + }, [onKeyDown]); + + return { focusIndex, setFocusIndex, isSubmenuOpen, setIsSubmenuOpen }; +} + +type MenuProps = MenuContainerProps & { + items: MenuItemType[]; + closeMenu: () => void; +}; + +export function Menu(props: MenuProps) { + const { items, title, closeMenu, ...containerProps } = props; + const hoverTimeout = useRef(); + const onAction = useCallback( + (e, item) => { + e.stopPropagation(); + if (closeMenu) closeMenu(); + if (item.onClick) { + item.onClick(); + } + }, + [closeMenu] + ); + + const { focusIndex, setFocusIndex, isSubmenuOpen, setIsSubmenuOpen } = + useMenuFocus( + items, + (e) => { + const item = items[focusIndex]; + if (item) onAction(e, item); + }, + () => closeMenu() + ); + + const subMenuRef = useRef(null); + useEffect(() => { + const item = items[focusIndex]; + if (!item || !subMenuRef.current) return; + + const menuItemElement = document.getElementById(item.key); + if (!menuItemElement) return; + + if (!isSubmenuOpen) { + subMenuRef.current.style.visibility = "hidden"; + return; + } + + const { top, left } = getPosition(subMenuRef.current, { + yOffset: menuItemElement.offsetHeight, + target: menuItemElement, + location: "right", + }); + + subMenuRef.current.style.visibility = "visible"; + subMenuRef.current.style.top = `${top}px`; + subMenuRef.current.style.left = `${left}px`; + }, [isSubmenuOpen, focusIndex, items]); + + return ( + <> + + {items.map((item, index) => ( + { + if (item.items?.length) { + setFocusIndex(index); + setIsSubmenuOpen(true); + } else onAction(e, item); + }} + isFocused={focusIndex === index} + onMouseEnter={() => { + if (item.isDisabled) { + setFocusIndex(-1); + return; + } + + if (hoverTimeout.current) clearTimeout(hoverTimeout.current); + setFocusIndex(index); + setIsSubmenuOpen(false); + if (item.items?.length) { + hoverTimeout.current = setTimeout(() => { + setIsSubmenuOpen(true); + }, 500); + } + }} + onMouseLeave={() => { + if (hoverTimeout.current) clearTimeout(hoverTimeout.current); + }} + /> + ))} + + {isSubmenuOpen && ( + + + + )} + + ); +} + +type MenuContainerProps = FlexProps & { + title?: string; +}; +function MenuContainer(props: PropsWithChildren) { + const { children, title, sx, ...flexProps } = props; + + return ( + + {title && ( + + {title} + + )} + {children} + {/* {children} */} + + ); +} + +type MenuPresenterProps = MenuContainerProps & { + items: MenuItemType[]; + options: MenuOptions; + isOpen: boolean; + onClose: () => void; + className?: string; +}; +export function MenuPresenter(props: PropsWithChildren) { + const { + className, + options, + items, + isOpen, + onClose, + children, + ...containerProps + } = props; + // const { isOpen, closeMenu } = useMenuTrigger(); + // const { items, } = useMenu(); + const { position, type } = options; + const isAutocomplete = type === "autocomplete"; + const contentRef = useRef(); + + useEffect(() => { + if (!contentRef.current || !position) return; + const menu = contentRef.current; + const menuPosition = getPosition(menu, position); + menu.style.top = menuPosition.top + "px"; + menu.style.left = menuPosition.left + "px"; + }, [position]); + + return ( + (contentRef.current = ref)} + className={className || "menuContainer"} + role="menu" + isOpen={isOpen} + appElement={document.body} + shouldCloseOnEsc + shouldReturnFocusAfterClose + shouldCloseOnOverlayClick + shouldFocusAfterRender={!isAutocomplete} + ariaHideApp={!isAutocomplete} + preventScroll={!isAutocomplete} + onRequestClose={onClose} + portalClassName={className || "menuPresenter"} + onAfterOpen={(obj) => { + if (!obj || !position) return; + const { contentEl: menu } = obj; + const menuPosition = getPosition(menu, position); + menu.style.top = menuPosition.top + "px"; + menu.style.left = menuPosition.left + "px"; + }} + overlayElement={(props, contentEl) => { + return ( + { + // if (!(e.target instanceof HTMLElement)) return; + // console.log(e.target.closest(".ReactModal__Content")); + // if (e.target.closest(".ReactModal__Content")) return; + // onClose(); + // }} + // onContextMenu={(e) => { + // e.preventDefault(); + // onClose(); + // }} + > + {contentEl} + + ); + }} + contentElement={(props, children) => ( + + {children} + + )} + style={{ + content: {}, + overlay: { + zIndex: 999, + background: "transparent", + }, + }} + > + {props.children ? ( + props.children + ) : ( + + )} + + ); +} diff --git a/packages/editor/src/components/menu/menuitem.tsx b/packages/editor/src/components/menu/menuitem.tsx new file mode 100644 index 000000000..9f9b6556d --- /dev/null +++ b/packages/editor/src/components/menu/menuitem.tsx @@ -0,0 +1,121 @@ +// import { Check, ChevronRight, Pro } from "../icons"; +import { useRef } from "react"; +import { Flex, Box, Text, Button } from "rebass"; +import { Icon } from "../../toolbar/components/icon"; +import { Icons } from "../../toolbar/icons"; +import { MenuItem /*ResolvedMenuItem*/ } from "./types"; + +type MenuItemProps = { + // item: ResolvedMenuItem; + item: MenuItem; + isFocused: boolean; + onMouseEnter: () => void; + onMouseLeave: () => void; + onClick: React.MouseEventHandler; +}; + +function MenuItem(props: MenuItemProps) { + const { item, isFocused, onMouseEnter, onMouseLeave, onClick } = props; + const { + title, + key, + // color, + icon, + // iconColor, + type, + tooltip, + isDisabled, + isChecked, + hasSubmenu, + component: Component, + modifier, + } = item; + const itemRef = useRef(null); + + if (type === "seperator") + return ( + + ); + + return ( + + + + ); +} +export default MenuItem; diff --git a/packages/editor/src/components/menu/types.ts b/packages/editor/src/components/menu/types.ts new file mode 100644 index 000000000..4a5284e4d --- /dev/null +++ b/packages/editor/src/components/menu/types.ts @@ -0,0 +1,37 @@ +// export type ResolverFunction = ( +// data: any, +// item: MenuItem +// ) => T; +// export type Resolvable = T | ResolverFunction; +// export type MenuItem = { +// type: "menuitem" | "seperator"; +// key: string; +// component?: Resolvable<(props: any) => JSX.Element, TData>; +// onClick?: (data: TData, item: MenuItem) => void; +// title?: Resolvable; +// icon?: Resolvable; +// tooltip?: Resolvable; +// disabled?: Resolvable; +// hidden?: Resolvable; +// checked?: Resolvable; +// modifier?: Resolvable; +// items?: Resolvable[], TData>; +// }; + +import { IconNames } from "../../toolbar/icons"; + +export type MenuItem = { + type: "menuitem" | "seperator"; + key: string; + component?: (props: any) => JSX.Element; + onClick?: () => void; + title?: string; + icon?: IconNames; + tooltip?: string; + isDisabled?: boolean; + isHidden?: boolean; + isChecked?: boolean; + hasSubmenu?: boolean; + modifier?: string; + items?: MenuItem[]; +}; diff --git a/packages/editor/src/components/menu/useMenu.ts b/packages/editor/src/components/menu/useMenu.ts new file mode 100644 index 000000000..f7fd02554 --- /dev/null +++ b/packages/editor/src/components/menu/useMenu.ts @@ -0,0 +1,296 @@ +import create from "zustand"; +import shallow from "zustand/shallow"; +import { + MenuItem, + // Resolvable, + // ResolvedMenuItem, + // ResolverFunction, +} from "./types"; + +type PositionData = { + x: number; + y: number; + actualX: number; + actualY: number; + width?: number; + height?: number; +}; + +const mousePosition: PositionData = { x: 0, y: 0, actualX: 0, actualY: 0 }; +window.addEventListener("mousemove", (e) => { + const { x, y, actualX, actualY } = getMousePosition(e); + mousePosition.x = x; + mousePosition.y = y; + mousePosition.actualX = actualX; + mousePosition.actualY = actualY; +}); + +export type MenuOptions = { + type: "autocomplete" | "menu"; + position?: PositionOptions; +}; +// interface IMenuStore { +// isOpen?: boolean; +// // items?: ResolvedMenuItem[]; +// items?: MenuItem[]; +// title?: string; +// options?: MenuOptions; +// //data?: any; + +// // open: (items: MenuItem[], data: TData) => void; +// open: (items: MenuItem[]) => void; +// close: () => void; +// } + +// const useMenuStore = create((set) => ({ +// isOpen: false, +// items: [], +// title: undefined, +// options: undefined, +// // data: undefined, +// // open: (items: MenuItem[], data: TData) => +// // set((state) => { +// // state.isOpen = true; +// // state.items = mapMenuItems(items, data); +// // // state.data = data; +// // }), +// open: (items: MenuItem[], options?: MenuOptions) => +// set((state) => { +// state.isOpen = true; +// state.items = items.filter((item) => !item.isHidden); +// state.options = options; +// // state.data = data; +// }), +// close: () => +// set((state) => { +// state.isOpen = false; +// state.items = []; +// state.options = undefined; +// // state.data = undefined; +// state.title = undefined; +// }), +// })); + +// export function useMenuTrigger() { +// const isOpen = useMenuStore((store) => store.isOpen); +// const [open, close] = useMenuStore( +// (store) => [store.open, store.close], +// shallow +// ); + +// return { +// openMenu: open, +// closeMenu: close, +// isOpen, +// }; +// } + +// export function useMenu() { +// const [items, options] = useMenuStore((store) => [ +// store.items, +// store.options, +// ]); +// return { items, options }; +// } + +type PositionOptions = { + target?: HTMLElement | "mouse"; + isTargetAbsolute?: boolean; + location?: "right" | "left" | "below" | "top"; + align?: "center" | "start" | "end"; + yOffset?: number; + xOffset?: number; + yAnchor?: HTMLElement; + parent?: HTMLElement | Element; +}; +export function getPosition( + element: HTMLElement, + options: PositionOptions +): { top: number; left: number } { + const { + target = "mouse", + isTargetAbsolute = false, + location = undefined, + yOffset = 0, + xOffset = 0, + align = "start", + parent = document.body, + yAnchor, + } = options || {}; + + const { x, y, width, height, actualX, actualY } = + target === "mouse" + ? mousePosition + : getElementPosition(target, isTargetAbsolute); + + const elementWidth = element.offsetWidth; + const elementHeight = element.offsetHeight; + + const windowWidth = parent.clientWidth; + const windowHeight = parent.clientHeight - 20; + + let position = { top: 0, left: 0 }; + + if (windowWidth - actualX < elementWidth) { + const xDiff = actualX - x; + position.left = windowWidth - elementWidth; + position.left -= xDiff; + } else { + position.left = x; + } + + if (width) { + if (location === "right") position.left += width; + else if (location === "left") position.left -= elementWidth; + } + + if (windowHeight - actualY < elementHeight) { + const yDiff = actualY - y; + position.top = windowHeight - elementHeight; + position.top -= yDiff; + } else { + position.top = y; + } + + if (height) { + if (location === "below") position.top += height; + else if (location === "top") position.top -= height; + } + + if (target !== "mouse" && align === "center" && elementWidth > 0) { + position.left -= elementWidth / 2 - target.clientWidth / 2; + } + + // Adjust menu height + if (elementHeight > windowHeight - position.top) { + element.style.maxHeight = `${windowHeight - 20}px`; + } + + if (yAnchor) { + const anchorY = getElementPosition(yAnchor, isTargetAbsolute); + position.top = anchorY.actualY - elementHeight; + } + + position.top = position.top < 0 ? 0 : position.top; + position.left = position.left < 0 ? 0 : position.left; + position.top += yOffset; + position.left += xOffset; + + return position; +} + +function getMousePosition(e: MouseEvent) { + var posx = 0; + var posy = 0; + + if (!e && window.event) e = window.event as MouseEvent; + + if (e.pageX || e.pageY) { + posx = e.pageX; + posy = e.pageY; + } else if (e.clientX || e.clientY) { + posx = + e.clientX + + document.body.scrollLeft + + document.documentElement.scrollLeft; + posy = + e.clientY + document.body.scrollTop + document.documentElement.scrollTop; + } + + return { + x: posx, + y: posy, + actualY: posy, + actualX: posx, + }; +} + +export function getElementPosition( + element: HTMLElement, + absolute: boolean +): PositionData { + const rect = element.getBoundingClientRect(); + const position: PositionData = { + x: element.offsetLeft, + y: element.offsetTop, + width: rect.width, + height: rect.height, + actualY: rect.y, + actualX: rect.x, + }; + if (absolute) { + position.x = position.actualX; + position.y = position.actualY; + } + return position; +} + +// function mapMenuItems( +// items: MenuItem[], +// data: TData +// ): ResolvedMenuItem[] { +// return items.reduce((prev, item) => { +// const { key, onClick: _onClick, disabled, hidden, checked, type } = item; + +// const isHidden = resolveProp(hidden, data, item); +// if (isHidden) return prev; + +// const isSeperator = type === "seperator"; +// if (isSeperator) { +// prev.push({ isSeperator: true }); +// return prev; +// } + +// const title = resolveProp(item.title, data, item); +// const icon = resolveProp(item.icon, data, item); +// const isChecked = resolveProp(checked, data, item); +// const isDisabled = resolveProp(disabled, data, item); +// const items = resolveProp(item.items, data, item); +// const modifier = resolveProp(item.modifier, data, item); +// const onClick = +// typeof _onClick === "function" && _onClick.bind(this, data, item); + +// const tooltip = +// isDisabled || resolveProp(item.tooltip, data, item) || title; +// const hasSubmenu = items?.length > 0; + +// const menuItem: ResolvedMenuItem = { +// type, +// title, +// key, +// onClick, +// tooltip, + +// isChecked, +// isDisabled: !!isDisabled, +// isHidden, +// hasSubmenu, +// icon, +// modifier: modifier?.join("+"), +// }; + +// if (hasSubmenu) +// menuItem.items = mapMenuItems(items, { ...data, parent: menuItem }); + +// prev.push(menuItem); + +// return prev; +// }, []); +// } + +// function resolveProp( +// prop: Resolvable, +// data: any, +// item: MenuItem +// ): T { +// if (typeof prop === "function" && (prop as any).isReactComponent) { +// return prop as T; +// } +// return isResolverFunction(prop) ? prop(data, item) : prop; +// } + +// function isResolverFunction( +// prop: any +// ): prop is ResolverFunction { +// return typeof prop === "function"; +// } diff --git a/packages/editor/src/components/toggle/index.tsx b/packages/editor/src/components/toggle/index.tsx new file mode 100644 index 000000000..78a28dcfc --- /dev/null +++ b/packages/editor/src/components/toggle/index.tsx @@ -0,0 +1,46 @@ +import ReactToggle, { ToggleProps } from "react-toggle"; +import "react-toggle/style.css"; + +const css = `.react-toggle { + display: flex; + align-items: center; + } + + .react-toggle-thumb { + box-shadow: none; + } + + .react-toggle-track { + width: 30px; + height: 18px; + } + + .react-toggle-thumb { + width: 16px; + height: 16px; + top: 0px; + left: 1px; + margin-top: 1px; + } + + .react-toggle--checked .react-toggle-thumb { + left: 13px; + border-color: var(--primary); + } + + .react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb { + box-shadow: none; + } + + .react-toggle--focus .react-toggle-thumb { + box-shadow: none; + } + `; +export function Toggle(props: ToggleProps) { + return ( + <> + + {}} icons={false} {...props} /> + + ); +} diff --git a/packages/editor/src/extensions/bullet-list/bullet-list.ts b/packages/editor/src/extensions/bullet-list/bullet-list.ts new file mode 100644 index 000000000..d611f8402 --- /dev/null +++ b/packages/editor/src/extensions/bullet-list/bullet-list.ts @@ -0,0 +1,21 @@ +import TiptapBulletList from "@tiptap/extension-bullet-list"; + +export const BulletList = TiptapBulletList.extend({ + addAttributes() { + return { + listType: { + default: null, + parseHTML: (element) => element.style.listStyleType, + renderHTML: (attributes) => { + if (!attributes.listType) { + return {}; + } + + return { + style: `list-style-type: ${attributes.listType}`, + }; + }, + }, + }; + }, +}); diff --git a/packages/editor/src/extensions/bullet-list/index.ts b/packages/editor/src/extensions/bullet-list/index.ts new file mode 100644 index 000000000..f164090c5 --- /dev/null +++ b/packages/editor/src/extensions/bullet-list/index.ts @@ -0,0 +1,5 @@ +import { BulletList } from "./bullet-list"; + +export * from "./bullet-list"; + +export default BulletList; diff --git a/packages/editor/src/extensions/font-size/font-size.ts b/packages/editor/src/extensions/font-size/font-size.ts new file mode 100644 index 000000000..edd9f4fb1 --- /dev/null +++ b/packages/editor/src/extensions/font-size/font-size.ts @@ -0,0 +1,72 @@ +import { Extension } from "@tiptap/core"; +import "@tiptap/extension-text-style"; + +type FontSizeOptions = { + types: string[]; + defaultFontSize: number; +}; + +declare module "@tiptap/core" { + interface Commands { + fontSize: { + /** + * Set the font family + */ + setFontSize: (fontSize: string) => ReturnType; + /** + * Unset the font family + */ + unsetFontSize: () => ReturnType; + }; + } +} + +export const FontSize = Extension.create({ + name: "fontSize", + + defaultOptions: { + types: ["textStyle"], + defaultFontSize: 16, + }, + + addGlobalAttributes() { + return [ + { + types: this.options.types, + attributes: { + fontSize: { + default: `${this.options.defaultFontSize}px`, + parseHTML: (element) => element.style.fontSize, + renderHTML: (attributes) => { + if (!attributes.fontSize) { + return {}; + } + + return { + style: `font-size: ${attributes.fontSize}`, + }; + }, + }, + }, + }, + ]; + }, + + addCommands() { + return { + setFontSize: + (fontSize) => + ({ chain }) => { + return chain().setMark("textStyle", { fontSize }).run(); + }, + unsetFontSize: + () => + ({ chain }) => { + return chain() + .setMark("textStyle", { fontSize: null }) + .removeEmptyTextStyle() + .run(); + }, + }; + }, +}); diff --git a/packages/editor/src/extensions/font-size/index.ts b/packages/editor/src/extensions/font-size/index.ts new file mode 100644 index 000000000..2882e207b --- /dev/null +++ b/packages/editor/src/extensions/font-size/index.ts @@ -0,0 +1,5 @@ +import { FontSize } from "./font-size"; + +export * from "./font-size"; + +export default FontSize; diff --git a/packages/editor/src/extensions/image/component.tsx b/packages/editor/src/extensions/image/component.tsx new file mode 100644 index 000000000..69c8a3c05 --- /dev/null +++ b/packages/editor/src/extensions/image/component.tsx @@ -0,0 +1,265 @@ +import { Box, Flex, Image, ImageProps, Text } from "rebass"; +import { NodeViewWrapper, NodeViewProps, FloatingMenu } from "@tiptap/react"; +import { + ImageAlignmentOptions, + ImageAttributes, + ImageSizeOptions, +} from "./image"; +import { ThemeConfig } from "@notesnook/theme/dist/theme/types"; +import { ThemeProvider } from "emotion-theming"; +import { Theme, useTheme } from "@notesnook/theme"; +import { Resizable } from "re-resizable"; +import { ToolButton } from "../../toolbar/components/tool-button"; +import { findToolById, ToolId } from "../../toolbar/tools"; +import { Editor } from "@tiptap/core"; +import { useCallback, useEffect, useRef, useState } from "react"; +import { MenuPresenter } from "../../components/menu/menu"; +import { Popup } from "../../toolbar/components/popup"; +import { Toggle } from "../../components/toggle"; +import { Input } from "@rebass/forms"; + +export function ImageComponent(props: ImageProps & NodeViewProps) { + const { src, alt, title, width, height, align, float } = props.node + .attrs as ImageAttributes & ImageAlignmentOptions; + + const { editor, updateAttributes } = props; + const imageRef = useRef(); + const isActive = editor.isActive("image", { src }); + const [isToolbarVisible, setIsToolbarVisible] = useState(); + const theme = editor.storage.theme as Theme; + + useEffect(() => { + setIsToolbarVisible(isActive); + }, [isActive]); + + return ( + + + + { + updateAttributes({ + width: ref.clientWidth, + height: ref.clientHeight, + }); + }} + lockAspectRatio={true} + > + + {isToolbarVisible && ( + + )} + + {alt} + + + + + ); +} + +type ImageToolbarProps = ImageAlignmentOptions & + Required & { + editor: Editor; + }; + +function ImageToolbar(props: ImageToolbarProps) { + const { editor, float, height, width } = props; + const [isOpen, setIsOpen] = useState(false); + + const onSizeChange = useCallback( + (newWidth?: number, newHeight?: number) => { + const size: ImageSizeOptions = newWidth + ? { + width: newWidth, + height: newWidth * (height / width), + } + : newHeight + ? { + width: newHeight * (width / height), + height: newHeight, + } + : { + width: 0, + height: 0, + }; + + editor.chain().setImageSize(size).run(); + }, + [width, height] + ); + + return ( + + + + + editor.chain().focus().setImageAlignment({ align: "left" }).run() + } + /> + {float ? null : ( + + editor + .chain() + .focus() + .setImageAlignment({ align: "center" }) + .run() + } + /> + )} + + editor.chain().focus().setImageAlignment({ align: "right" }).run() + } + /> + + + setIsOpen((s) => !s)} + /> + + + + {isOpen && ( + { + setIsOpen(false); + }, + }} + > + + + Floating? + + editor + .chain() + .setImageAlignment({ float: !float, align: "left" }) + .run() + } + /> + + + onSizeChange(e.target.valueAsNumber)} + /> + + onSizeChange(undefined, e.target.valueAsNumber) + } + /> + + + + )} + + ); +} diff --git a/packages/editor/src/extensions/image/image.ts b/packages/editor/src/extensions/image/image.ts new file mode 100644 index 000000000..e1b80b8fb --- /dev/null +++ b/packages/editor/src/extensions/image/image.ts @@ -0,0 +1,140 @@ +import { Node, nodeInputRule, mergeAttributes } from "@tiptap/core"; +import { ReactNodeViewRenderer } from "@tiptap/react"; +import { ImageComponent } from "./component"; + +export interface ImageOptions { + inline: boolean; + allowBase64: boolean; + HTMLAttributes: Record; +} + +export type ImageAttributes = Partial & { + src: string; + alt?: string; + title?: string; +}; + +export type ImageAlignmentOptions = { + float?: boolean; + align?: "center" | "left" | "right"; +}; + +export type ImageSizeOptions = { + width: number; + height: number; +}; + +declare module "@tiptap/core" { + interface Commands { + image: { + /** + * Add an image + */ + setImage: (options: ImageAttributes) => ReturnType; + setImageAlignment: (options: ImageAlignmentOptions) => ReturnType; + setImageSize: (options: ImageSizeOptions) => ReturnType; + }; + } +} + +export const inputRegex = /(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/; + +export const ImageNode = Node.create({ + name: "image", + + addOptions() { + return { + inline: false, + allowBase64: false, + HTMLAttributes: {}, + }; + }, + + inline() { + return this.options.inline; + }, + + group() { + return this.options.inline ? "inline" : "block"; + }, + + draggable: true, + + addAttributes() { + return { + src: { + default: null, + }, + alt: { + default: null, + }, + title: { + default: null, + }, + width: { default: null }, + height: { default: null }, + float: { + default: false, + }, + align: { default: "left" }, + }; + }, + + parseHTML() { + return [ + { + tag: this.options.allowBase64 + ? "img[src]" + : 'img[src]:not([src^="data:"])', + }, + ]; + }, + + renderHTML({ HTMLAttributes }) { + return [ + "img", + mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), + ]; + }, + + addNodeView() { + return ReactNodeViewRenderer(ImageComponent); + }, + + addCommands() { + return { + setImage: + (options) => + ({ commands }) => { + return commands.insertContent({ + type: this.name, + attrs: options, + }); + }, + setImageAlignment: + (options) => + ({ commands }) => { + return commands.updateAttributes(this.name, { ...options }); + }, + setImageSize: + (options) => + ({ commands }) => { + return commands.updateAttributes(this.name, { ...options }); + }, + }; + }, + + addInputRules() { + return [ + nodeInputRule({ + find: inputRegex, + type: this.type, + getAttributes: (match) => { + const [, , alt, src, title] = match; + + return { src, alt, title }; + }, + }), + ]; + }, +}); diff --git a/packages/editor/src/extensions/image/index.ts b/packages/editor/src/extensions/image/index.ts new file mode 100644 index 000000000..0aa9b4bbd --- /dev/null +++ b/packages/editor/src/extensions/image/index.ts @@ -0,0 +1 @@ +export * from "./image"; diff --git a/packages/editor/src/extensions/ordered-list/index.ts b/packages/editor/src/extensions/ordered-list/index.ts new file mode 100644 index 000000000..7ef46798c --- /dev/null +++ b/packages/editor/src/extensions/ordered-list/index.ts @@ -0,0 +1,5 @@ +import { OrderedList } from "./ordered-list"; + +export * from "./ordered-list"; + +export default OrderedList; diff --git a/packages/editor/src/extensions/ordered-list/ordered-list.ts b/packages/editor/src/extensions/ordered-list/ordered-list.ts new file mode 100644 index 000000000..e14847d3e --- /dev/null +++ b/packages/editor/src/extensions/ordered-list/ordered-list.ts @@ -0,0 +1,21 @@ +import TiptapOrderedList from "@tiptap/extension-ordered-list"; + +export const OrderedList = TiptapOrderedList.extend({ + addAttributes() { + return { + listType: { + default: null, + parseHTML: (element) => element.style.listStyleType, + renderHTML: (attributes) => { + if (!attributes.listType) { + return {}; + } + + return { + style: `list-style-type: ${attributes.listType}`, + }; + }, + }, + }; + }, +}); diff --git a/packages/editor/src/extensions/table-cell/index.ts b/packages/editor/src/extensions/table-cell/index.ts new file mode 100644 index 000000000..512bb46bf --- /dev/null +++ b/packages/editor/src/extensions/table-cell/index.ts @@ -0,0 +1,5 @@ +import { TableCell } from "./table-cell"; + +export * from "./table-cell"; + +export default TableCell; diff --git a/packages/editor/src/extensions/table-cell/table-cell.ts b/packages/editor/src/extensions/table-cell/table-cell.ts new file mode 100644 index 000000000..7f1386667 --- /dev/null +++ b/packages/editor/src/extensions/table-cell/table-cell.ts @@ -0,0 +1,38 @@ +import TiptapTableCell from "@tiptap/extension-table-cell"; +import { Attribute } from "@tiptap/core"; + +export const TableCell = TiptapTableCell.extend({ + addAttributes() { + return { + ...this.parent?.(), + backgroundColor: addStyleAttribute("backgroundColor", "background-color"), + color: addStyleAttribute("color", "color"), + borderWidth: addStyleAttribute("borderWidth", "border-width", "px"), + borderStyle: addStyleAttribute("borderStyle", "border-style"), + borderColor: addStyleAttribute("borderColor", "border-color"), + }; + }, +}); + +function addStyleAttribute( + name: keyof CSSStyleDeclaration, + cssName: string, + unit?: string +): Partial { + return { + default: null, + parseHTML: (element) => + unit + ? element.style[name]?.toString().replace(unit, "") + : element.style[name], + renderHTML: (attributes) => { + if (!attributes[name as string]) { + return {}; + } + + return { + style: `${cssName}: ${attributes[name as string]}${unit || ""}`, + }; + }, + }; +} diff --git a/packages/editor/src/extensions/text-direction/index.ts b/packages/editor/src/extensions/text-direction/index.ts new file mode 100644 index 000000000..f2c9d7991 --- /dev/null +++ b/packages/editor/src/extensions/text-direction/index.ts @@ -0,0 +1,5 @@ +import { TextDirection } from "./text-direction"; + +export * from "./text-direction"; + +export default TextDirection; diff --git a/packages/editor/src/extensions/text-direction/text-direction.ts b/packages/editor/src/extensions/text-direction/text-direction.ts new file mode 100644 index 000000000..a40ffddf7 --- /dev/null +++ b/packages/editor/src/extensions/text-direction/text-direction.ts @@ -0,0 +1,63 @@ +import { Extension } from "@tiptap/core"; +import "@tiptap/extension-text-style"; + +type TextDirectionOptions = { + types: string[]; + defaultDirection: TextDirections; +}; + +type TextDirections = "ltr" | "rtl"; +declare module "@tiptap/core" { + interface Commands { + textDirection: { + /** + * Set the font family + */ + setTextDirection: (direction: TextDirections) => ReturnType; + }; + } +} + +export const TextDirection = Extension.create({ + name: "textDirection", + + defaultOptions: { + types: ["paragraph", "heading"], + defaultDirection: "ltr", + }, + + addGlobalAttributes() { + return [ + { + types: this.options.types, + attributes: { + textDirection: { + default: this.options.defaultDirection, + parseHTML: (element) => element.dir, + renderHTML: (attributes) => { + if (!attributes.textDirection) { + return {}; + } + + return { + dir: attributes.textDirection, + }; + }, + }, + }, + }, + ]; + }, + + addCommands() { + return { + setTextDirection: + (direction) => + ({ commands }) => { + return this.options.types.every((type) => + commands.updateAttributes(type, { textDirection: direction }) + ); + }, + }; + }, +}); diff --git a/packages/editor/utils/index.ts b/packages/editor/src/global.d.ts similarity index 100% rename from packages/editor/utils/index.ts rename to packages/editor/src/global.d.ts diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts new file mode 100644 index 000000000..3c7b0a07e --- /dev/null +++ b/packages/editor/src/index.ts @@ -0,0 +1,94 @@ +import CharacterCount from "@tiptap/extension-character-count"; +import Placeholder from "@tiptap/extension-placeholder"; +import Underline from "@tiptap/extension-underline"; +import { EditorOptions, useEditor } from "@tiptap/react"; +import StarterKit from "@tiptap/starter-kit"; +import { useMemo } from "react"; +import { EditorView } from "prosemirror-view"; +import Toolbar from "./toolbar"; +import TextAlign from "@tiptap/extension-text-align"; +import Subscript from "@tiptap/extension-subscript"; +import Superscript from "@tiptap/extension-superscript"; +import FontSize from "./extensions/font-size"; +import TextDirection from "./extensions/text-direction"; +import TextStyle from "@tiptap/extension-text-style"; +import FontFamily from "@tiptap/extension-font-family"; +import BulletList from "./extensions/bullet-list"; +import OrderedList from "./extensions/ordered-list"; +import Highlight from "@tiptap/extension-highlight"; +import Color from "@tiptap/extension-color"; +import Link from "@tiptap/extension-link"; +import Table from "@tiptap/extension-table"; +import TableRow from "@tiptap/extension-table-row"; +import TableCell from "./extensions/table-cell"; +import TableHeader from "@tiptap/extension-table-header"; +import { ImageNode } from "./extensions/image"; +import { ThemeConfig } from "@notesnook/theme/dist/theme/types"; +import { useTheme } from "@notesnook/theme"; + +EditorView.prototype.updateState = function updateState(state) { + if (!(this as any).docView) return; // This prevents the matchesNode error on hot reloads + (this as any).updateStateInner(state, this.state.plugins != state.plugins); +}; + +const useTiptap = ( + options: Partial = {}, + deps?: React.DependencyList +) => { + const { theme, accent, scale, onCreate, ...restOptions } = options; + const defaultOptions = useMemo>( + () => ({ + extensions: [ + TextStyle, + StarterKit, + CharacterCount, + Underline, + Subscript, + Superscript, + FontSize, + TextDirection, + FontFamily, + BulletList, + OrderedList, + Link, + ImageNode, + Table.configure({ + resizable: true, + allowTableNodeSelection: true, + }), + TableRow, + TableCell, + TableHeader, + Highlight.configure({ + multicolor: true, + }), + Color, + TextAlign.configure({ + types: ["heading", "paragraph"], + alignments: ["left", "right", "center", "justify"], + defaultAlignment: "left", + }), + Placeholder.configure({ + placeholder: "Start writing your note...", + }), + ], + onCreate: ({ editor }) => { + if (theme && accent && scale) { + editor.storage.theme = useTheme({ theme, accent, scale }); + } + if (onCreate) onCreate({ editor }); + }, + }), + [theme, accent, scale, onCreate] + ); + + const editor = useEditor({ ...defaultOptions, ...restOptions }, deps); + + /** + * Add editor to global for use in React Native. + */ + global.editor = editor; + return editor; +}; + +export { useTiptap, Toolbar }; diff --git a/packages/editor/src/toolbar/components/dropdown.tsx b/packages/editor/src/toolbar/components/dropdown.tsx new file mode 100644 index 000000000..2add61e7f --- /dev/null +++ b/packages/editor/src/toolbar/components/dropdown.tsx @@ -0,0 +1,60 @@ +import { useRef, useState } from "react"; +import { Button, Flex, Text } from "rebass"; +import { Icon } from "./icon"; +import { Icons } from "../icons"; +import { MenuPresenter } from "../../components/menu/menu"; +import { MenuItem } from "../../components/menu/types"; + +type DropdownProps = { + selectedItem: string | JSX.Element; + items: MenuItem[]; +}; +export function Dropdown(props: DropdownProps) { + const { items, selectedItem } = props; + const buttonRef = useRef(null); + const [isOpen, setIsOpen] = useState(false); + + return ( + <> + + setIsOpen(false)} + /> + + ); +} diff --git a/packages/editor/src/toolbar/components/icon.tsx b/packages/editor/src/toolbar/components/icon.tsx new file mode 100644 index 000000000..b1b64f23a --- /dev/null +++ b/packages/editor/src/toolbar/components/icon.tsx @@ -0,0 +1,69 @@ +import MDIIcon from "@mdi/react"; +import { Theme } from "@notesnook/theme"; +import { SchemeColors } from "@notesnook/theme/dist/theme/colorscheme"; +import { useTheme } from "emotion-theming"; +import { Flex, FlexProps } from "rebass"; + +type IconProps = { + title?: string; + path: string; + size?: number; + color?: keyof SchemeColors; + stroke?: string; + rotate?: boolean; +}; +function MDIIconWrapper({ + title, + path, + size = 24, + color = "icon", + stroke, + rotate, +}: IconProps) { + const theme: Theme = useTheme(); + + const themedColor: string = theme.colors + ? (theme.colors[color] as string) + : color; + + return ( + + ); +} + +export type NNIconProps = FlexProps & IconProps; + +export function Icon(props: NNIconProps) { + const { sx, title, color, size, stroke, rotate, path, ...restProps } = props; + + return ( + + + + ); +} diff --git a/packages/editor/src/toolbar/components/popup.tsx b/packages/editor/src/toolbar/components/popup.tsx new file mode 100644 index 000000000..a307724d1 --- /dev/null +++ b/packages/editor/src/toolbar/components/popup.tsx @@ -0,0 +1,69 @@ +import { Button, ButtonProps, Flex, Text } from "rebass"; +import { Icon } from "./icon"; +import { IconNames, Icons } from "../icons"; +import { PropsWithChildren } from "react"; +import { SchemeColors } from "@notesnook/theme/dist/theme/colorscheme"; + +type PopupProps = { + title?: string; + action?: PopupButtonProps; +}; + +export function Popup(props: PropsWithChildren) { + const { title, action, children } = props; + + return ( + + {title && ( + + {title} + {action && ( + + )} + + )} + {children} + + ); +} + +type PopupButtonProps = ButtonProps & { + text?: string; + loading?: boolean; + icon?: IconNames; + iconSize?: number; + iconColor?: keyof SchemeColors; +}; +function PopupButton(props: PopupButtonProps) { + const { text, loading, icon, iconColor, iconSize, ...restProps } = props; + return ( + + ); +} diff --git a/packages/editor/src/toolbar/components/tool-button.tsx b/packages/editor/src/toolbar/components/tool-button.tsx new file mode 100644 index 000000000..c16c9e3eb --- /dev/null +++ b/packages/editor/src/toolbar/components/tool-button.tsx @@ -0,0 +1,51 @@ +import { SchemeColors } from "@notesnook/theme/dist/theme/colorscheme"; +import React from "react"; +import { Button, ButtonProps } from "rebass"; +import { IconNames, Icons } from "../icons"; +import { Icon } from "./icon"; + +type ToolButtonProps = ButtonProps & { + icon: IconNames; + iconColor?: keyof SchemeColors; + iconSize?: number; + toggled: boolean; + buttonRef?: React.Ref; +}; +export function ToolButton(props: ToolButtonProps) { + const { + id, + icon, + iconSize, + iconColor, + toggled, + sx, + buttonRef, + ...buttonProps + } = props; + + return ( + + ); +} diff --git a/packages/editor/src/toolbar/floating-menus/index.tsx b/packages/editor/src/toolbar/floating-menus/index.tsx new file mode 100644 index 000000000..2f6cbcc1e --- /dev/null +++ b/packages/editor/src/toolbar/floating-menus/index.tsx @@ -0,0 +1,11 @@ +import { TableRowFloatingMenu, TableColumnFloatingMenu } from "./table"; +import { FloatingMenuProps } from "./types"; + +export function EditorFloatingMenus(props: FloatingMenuProps) { + return ( + <> + + + + ); +} diff --git a/packages/editor/src/toolbar/floating-menus/table.tsx b/packages/editor/src/toolbar/floating-menus/table.tsx new file mode 100644 index 000000000..30fdff05f --- /dev/null +++ b/packages/editor/src/toolbar/floating-menus/table.tsx @@ -0,0 +1,605 @@ +import { Theme } from "@notesnook/theme"; +import { Slider } from "@rebass/forms"; +import { Editor, findParentNodeClosestToPos } from "@tiptap/core"; +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { Flex, Text } from "rebass"; +import { MenuPresenter } from "../../components/menu/menu"; +import { getElementPosition, MenuOptions } from "../../components/menu/useMenu"; +import { Popup } from "../components/popup"; +import { ToolButton } from "../components/tool-button"; +import { IconNames } from "../icons"; +import { ColorPicker, DEFAULT_COLORS } from "../tools/colors"; +import { FloatingMenuProps } from "./types"; +import { selectedRect, TableMap, TableRect } from "prosemirror-tables"; +import { Transaction } from "prosemirror-state"; + +export function TableRowFloatingMenu(props: FloatingMenuProps) { + const { editor } = props; + const theme = editor.storage.theme as Theme; + const [position, setPosition] = useState( + null + ); + const [isMenuOpen, setIsMenuOpen] = useState(false); + + useEffect(() => { + if (!editor.isActive("tableRow")) return; + + let { $from } = editor.state.selection; + + const selectedNode = $from.node(); + const pos = selectedNode.isTextblock ? $from.before() : $from.pos; + + const currentRow = (editor.view.nodeDOM(pos) as HTMLElement)?.closest("tr"); + if (!currentRow) return; + setPosition((old) => { + if (old?.target === currentRow) return old; + + return { + isTargetAbsolute: true, + location: "left", + xOffset: -5, + target: currentRow, + // parent: editor.view.dom as HTMLElement, + }; + }); + }, [editor.state.selection]); + + if (!position) return null; + + return ( + {}} + options={{ + type: "autocomplete", + position, + }} + > + + setIsMenuOpen(true)} + iconSize={16} + sx={{ mr: 0, p: "3px", borderRadius: "small" }} + /> + editor.chain().focus().addRowAfter().run()} + sx={{ mr: 0, p: "3px", borderRadius: "small" }} + iconSize={16} + /> + + + { + setIsMenuOpen(false); + editor.commands.focus(); + }} + options={{ + type: "menu", + position: {}, + }} + items={[ + { + key: "addRowAbove", + type: "menuitem", + title: "Add row above", + onClick: () => editor.chain().focus().addRowBefore().run(), + icon: "insertRowAbove", + }, + { + key: "moveRowUp", + type: "menuitem", + title: "Move row up", + onClick: () => moveRowUp(editor), + icon: "moveRowUp", + }, + { + key: "moveRowDown", + type: "menuitem", + title: "Move row down", + onClick: () => moveRowDown(editor), + icon: "moveRowDown", + }, + { + key: "deleteRow", + type: "menuitem", + title: "Delete row", + onClick: () => editor.chain().focus().deleteRow().run(), + icon: "deleteRow", + }, + ]} + /> + + ); +} + +export function TableColumnFloatingMenu(props: FloatingMenuProps) { + const { editor } = props; + const [position, setPosition] = useState( + null + ); + const [isMenuOpen, setIsMenuOpen] = useState(false); + const [showCellProps, setShowCellProps] = useState(false); + const [menuPosition, setMenuPosition] = useState< + MenuOptions["position"] | null + >(null); + + useEffect(() => { + if (!editor.isActive("tableRow")) return; + + let { $from } = editor.state.selection; + + const selectedNode = $from.node(); + const pos = selectedNode.isTextblock ? $from.before() : $from.pos; + + const currentCell = (editor.view.nodeDOM(pos) as HTMLElement)?.closest( + "td,th" + ); + const currentTable = currentCell?.closest("table"); + + if (!currentCell || !currentTable) return; + + setPosition((old) => { + if (old?.target === currentCell) return old; + + return { + isTargetAbsolute: true, + location: "top", + align: "center", + yAnchor: currentTable, + yOffset: -2, + target: currentCell as HTMLElement, + }; + }); + }, [editor.state.selection]); + + if (!position) return null; + + return ( + {}} + options={{ + type: "autocomplete", + position, + }} + > + + setIsMenuOpen(true)} + iconSize={16} + sx={{ mr: 0, p: "3px", borderRadius: "small" }} + /> + editor.chain().focus().addColumnAfter().run()} + sx={{ mr: 0, p: "3px", borderRadius: "small" }} + iconSize={16} + /> + + + { + setIsMenuOpen(false); + editor.commands.focus(); + }} + options={{ + type: "menu", + position: {}, + }} + items={[ + { + key: "addColumnAbove", + type: "menuitem", + title: "Add column left", + onClick: () => editor.chain().focus().addColumnBefore().run(), + icon: "insertColumnLeft", + }, + { + key: "moveColumnLeft", + type: "menuitem", + title: "Move column left", + onClick: () => moveColumnLeft(editor), + icon: "moveColumnLeft", + }, + { + key: "moveColumnRight", + type: "menuitem", + title: "Move column right", + onClick: () => moveColumnRight(editor), + icon: "moveColumnRight", + }, + { + key: "deleteColumn", + type: "menuitem", + title: "Delete column", + onClick: () => editor.chain().focus().deleteColumn().run(), + icon: "deleteColumn", + }, + { + key: "sortDesc", + type: "menuitem", + title: "Sort descending", + onClick: () => {}, + icon: "sortDesc", + }, + { + key: "cellProperties", + type: "menuitem", + title: "Cell properties", + onClick: () => { + setShowCellProps(true); + setMenuPosition({ + target: position.target || undefined, + isTargetAbsolute: true, + yOffset: 10, + location: "below", + }); + }, + icon: "cellProperties", + }, + ]} + /> + + { + setShowCellProps(false); + editor.commands.focus(); + }} + options={{ + type: "menu", + position: menuPosition || {}, + }} + items={[]} + > + setShowCellProps(false)} + /> + + + ); +} + +type CellPropertiesProps = { editor: Editor; onClose: () => void }; +function CellProperties(props: CellPropertiesProps) { + const { editor, onClose } = props; + const attributes = editor.getAttributes("tableCell"); + console.log(attributes); + return ( + + + + editor.commands.setCellAttribute("backgroundColor", color) + } + /> + + editor.commands.setCellAttribute("color", color) + } + /> + + editor.commands.setCellAttribute("borderColor", color) + } + /> + + + Border width + {attributes.borderWidth || 1}px + + { + editor.commands.setCellAttribute( + "borderWidth", + e.target.valueAsNumber + ); + }} + /> + + + + ); +} +type ColorPickerToolProps = { + color: string; + title: string; + icon: IconNames; + onColorChange: (color?: string) => void; +}; +function ColorPickerTool(props: ColorPickerToolProps) { + const { color, title, icon, onColorChange } = props; + const [isOpen, setIsOpen] = useState(false); + const buttonRef = useRef(null); + + return ( + <> + + {title} + setIsOpen(true)} + /> + + + setIsOpen(false)} + items={[]} + options={{ + type: "menu", + position: { + target: buttonRef.current || undefined, + location: "below", + align: "center", + isTargetAbsolute: true, + yOffset: 5, + }, + }} + > + + onColorChange()} + onChange={(color) => onColorChange(color)} + /> + + + + ); +} + +/** + * Done: + * insertTable + * + * addRowBefore + * addRowAfter + * deleteRow + * + * addColumnBefore + * addColumnAfter + * deleteColumn + * + * setCellAttribute + * + * deleteTable + * + * mergeCells + * splitCell + * mergeOrSplit + * + * toggleHeaderColumn + * toggleHeaderRow + * toggleHeaderCell + * fixTables + * goToNextCell + * goToPreviousCell + */ + +function moveColumnRight(editor: Editor) { + const { tr } = editor.state; + const rect = selectedRect(editor.state); + if (rect.right === rect.map.width) return; + + const transaction = moveColumn(tr, rect, rect.left, rect.left + 1); + if (!transaction) return; + + editor.view.dispatch(transaction); +} + +function moveColumnLeft(editor: Editor) { + const { tr } = editor.state; + const rect = selectedRect(editor.state); + if (rect.left === 0) return; + + const transaction = moveColumn(tr, rect, rect.left, rect.left - 1); + if (!transaction) return; + + editor.view.dispatch(transaction); +} + +function moveRowDown(editor: Editor) { + const { tr } = editor.state; + const rect = selectedRect(editor.state); + if (rect.top + 1 === rect.map.height) return; + + const transaction = moveRow(tr, rect, rect.top, rect.top + 1); + if (!transaction) return; + + editor.view.dispatch(transaction); +} + +function moveRowUp(editor: Editor) { + const { tr } = editor.state; + const rect = selectedRect(editor.state); + if (rect.top === 0) return; + + const transaction = moveRow(tr, rect, rect.top, rect.top - 1); + if (!transaction) return; + + editor.view.dispatch(transaction); +} + +function moveColumn( + tr: Transaction, + rect: TableRect, + from: number, + to: number +) { + let fromCells = getColumnCells(rect, from); + let toCells = getColumnCells(rect, to); + + return moveCells(tr, rect, fromCells, toCells); +} + +function getColumnCells({ map, table }: TableRect, col: number) { + let cells = []; + for (let row = 0; row < map.height; ) { + let index = row * map.width + col; + if (index >= map.map.length) break; + + let pos = map.map[index]; + + let cell = table.nodeAt(pos); + if (!cell) continue; + cells.push({ cell, pos }); + + row += cell.attrs.rowspan; + console.log(cell.textContent); + } + + return cells; +} + +function moveRow( + tr: Transaction, + rect: TableRect, + from: number, + to: number +) { + let fromCells = getRowCells(rect, from); + let toCells = getRowCells(rect, to); + return moveCells(tr, rect, fromCells, toCells); +} + +function getRowCells({ map, table }: TableRect, row: number) { + let cells = []; + for (let col = 0, index = row * map.width; col < map.width; col++, index++) { + if (index >= map.map.length) break; + + let pos = map.map[index]; + let cell = table.nodeAt(pos); + + if (!cell) continue; + cells.push({ cell, pos }); + + col += cell.attrs.colspan - 1; + } + + return cells; +} + +function moveCells( + tr: Transaction, + rect: TableRect, + fromCells: any[], + toCells: any[] +) { + if (fromCells.length !== toCells.length) return; + let mapStart = tr.mapping.maps.length; + + for (let i = 0; i < toCells.length; ++i) { + const fromCell = fromCells[i]; + const toCell = toCells[i]; + + let fromStart = tr.mapping + .slice(mapStart) + .map(rect.tableStart + fromCell.pos); + let fromEnd = fromStart + fromCell.cell.nodeSize; + const fromSlice = tr.doc.slice(fromStart, fromEnd); + + const toStart = tr.mapping + .slice(mapStart) + .map(rect.tableStart + toCell.pos); + const toEnd = toStart + toCell.cell.nodeSize; + const toSlice = tr.doc.slice(toStart, toEnd); + + tr.replace(toStart, toEnd, fromSlice); + + fromStart = tr.mapping.slice(mapStart).map(rect.tableStart + fromCell.pos); + fromEnd = fromStart + fromCell.cell.nodeSize; + tr.replace(fromStart, fromEnd, toSlice); + } + + return tr; +} diff --git a/packages/editor/src/toolbar/floating-menus/types.ts b/packages/editor/src/toolbar/floating-menus/types.ts new file mode 100644 index 000000000..7e3bdf5b4 --- /dev/null +++ b/packages/editor/src/toolbar/floating-menus/types.ts @@ -0,0 +1,2 @@ +import { Editor } from "@tiptap/core"; +export type FloatingMenuProps = { editor: Editor }; diff --git a/packages/editor/src/toolbar/icons.ts b/packages/editor/src/toolbar/icons.ts new file mode 100644 index 000000000..b9e08115d --- /dev/null +++ b/packages/editor/src/toolbar/icons.ts @@ -0,0 +1,102 @@ +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, + mdiSquareRoundedBadgeOutline, + mdiFormatColorFill, + mdiBorderAllVariant, + mdiClose, + mdiSortDescending, + mdiArrowExpandRight, + mdiArrowExpandLeft, + mdiArrowExpandDown, + mdiArrowExpandUp, +} from "@mdi/js"; + +export const 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, + image: mdiImage, + chevronDown: mdiChevronDown, + colorClear: mdiInvertColorsOff, + check: mdiCheck, + loading: mdiLoading, + more: mdiDotsVertical, + upload: mdiUploadOutline, + attachment: mdiAttachment, + table: mdiTable, + insertRowBelow: mdiPlus, + insertRowAbove: mdiTableRowPlusBefore, + moveRowDown: mdiArrowExpandDown, + moveRowUp: mdiArrowExpandUp, + deleteRow: mdiTableRowRemove, + toggleHeaderRow: mdiTableBorder, + insertColumnRight: mdiPlus, + insertColumnLeft: mdiTableColumnPlusBefore, + moveColumnRight: mdiArrowExpandRight, + moveColumnLeft: mdiArrowExpandLeft, + deleteColumn: mdiTableColumnRemove, + cellProperties: mdiSquareRoundedBadgeOutline, + backgroundColor: mdiFormatColorFill, + borderColor: mdiBorderAllVariant, + close: mdiClose, + sortDesc: mdiSortDescending, +}; + +export type IconNames = keyof typeof Icons; diff --git a/packages/editor/src/toolbar/index.ts b/packages/editor/src/toolbar/index.ts new file mode 100644 index 000000000..f989b1228 --- /dev/null +++ b/packages/editor/src/toolbar/index.ts @@ -0,0 +1,3 @@ +import { Toolbar } from "./toolbar"; + +export default Toolbar; diff --git a/packages/editor/src/toolbar/toolbar.tsx b/packages/editor/src/toolbar/toolbar.tsx new file mode 100644 index 000000000..976afb80a --- /dev/null +++ b/packages/editor/src/toolbar/toolbar.tsx @@ -0,0 +1,67 @@ +import { useTheme } from "@notesnook/theme"; +import { ThemeConfig } from "@notesnook/theme/dist/theme/types"; +import { Editor } from "@tiptap/core"; +import { Flex } from "rebass"; +import { findToolById, ToolId } from "./tools"; +import { ThemeProvider } from "emotion-theming"; +import { EditorFloatingMenus } from "./floating-menus"; + +// type Colors = { +// text: string; +// background: string; +// bgSecondary: string; +// primary: string; +// hover: string; +// border: string; +// }; + +type ToolbarDefinition = ToolId[][]; + +type ToolbarProps = ThemeConfig & { + editor: Editor | null; + // tools: ToolbarDefinition; + // colors: Colors; +}; +export function Toolbar(props: ToolbarProps) { + const { editor, theme, accent, scale } = props; + const themeProperties = useTheme({ accent, theme, scale }); + + const tools: ToolbarDefinition = [ + ["bold", "italic", "underline", "strikethrough", "code"], + ["fontSize", "fontFamily", "headings"], + ["alignLeft", "alignCenter", "alignRight", "alignJustify"], + ["subscript", "superscript", "horizontalRule"], + ["codeblock", "blockquote"], + ["formatClear", "ltr", "rtl"], + ["numberedList", "bulletList"], + ["link", "image", "attachment", "table"], + ["textColor", "highlight"], + ]; + + if (!editor) return null; + return ( + + + {tools.map((tools) => { + return ( + + {tools.map((toolId) => { + const { render: Component } = findToolById(toolId); + return ; + })} + + ); + })} + + + + ); +} diff --git a/packages/editor/src/toolbar/tools/alignment.tsx b/packages/editor/src/toolbar/tools/alignment.tsx new file mode 100644 index 000000000..9813a5f74 --- /dev/null +++ b/packages/editor/src/toolbar/tools/alignment.tsx @@ -0,0 +1,56 @@ +import { ITool, ToolProps } from "../types"; +import { Editor } from "@tiptap/core"; +import { ToolButton } from "../components/tool-button"; +import { ToolId } from "."; +import { IconNames, Icons } from "../icons"; + +class AlignmentTool + implements ITool +{ + constructor( + readonly id: TId, + readonly title: TTitle, + private readonly alignment: "left" | "right" | "center" | "justify", + private readonly icon: IconNames + ) {} + + render = (props: ToolProps) => { + const { editor } = props; + + return ( + + editor.chain().focus().setTextAlign(this.alignment).run() + } + toggled={editor.isActive({ textAlign: this.alignment })} + /> + ); + }; +} + +export class AlignCenter extends AlignmentTool { + constructor() { + super("alignCenter", "Align center", "center", "alignCenter"); + } +} + +export class AlignRight extends AlignmentTool { + constructor() { + super("alignRight", "Align right", "right", "alignRight"); + } +} + +export class AlignLeft extends AlignmentTool { + constructor() { + super("alignLeft", "Align left", "left", "alignLeft"); + } +} + +export class AlignJustify extends AlignmentTool { + constructor() { + super("alignJustify", "Justify", "justify", "alignJustify"); + } +} diff --git a/packages/editor/src/toolbar/tools/block.tsx b/packages/editor/src/toolbar/tools/block.tsx new file mode 100644 index 000000000..4e560fc8a --- /dev/null +++ b/packages/editor/src/toolbar/tools/block.tsx @@ -0,0 +1,257 @@ +import { ITool, ToolProps } from "../types"; +import { Editor } from "@tiptap/core"; +import { ToolButton } from "../components/tool-button"; +import { ToolId } from "."; +import { IconNames, Icons } from "../icons"; +import { MenuPresenter } from "../../components/menu/menu"; +import { useEffect, useRef, useState } from "react"; +import { Dropdown } from "../components/dropdown"; +import { Icon } from "../components/icon"; +import { Box, Button, Flex, Text } from "rebass"; +import { Popup } from "../components/popup"; + +class BlockTool implements ITool { + constructor( + readonly id: TId, + readonly title: string, + private readonly icon: IconNames, + private readonly command: (editor: Editor) => boolean + ) {} + + render = (props: ToolProps) => { + const { editor } = props; + + return ( + this.command(editor)} + toggled={editor.isActive(this.id)} + /> + ); + }; +} + +export class HorizontalRule extends BlockTool { + constructor() { + super("horizontalRule", "Horizontal rule", "horizontalRule", (editor) => + editor.chain().focus().setHorizontalRule().run() + ); + } +} + +export class CodeBlock extends BlockTool { + constructor() { + super("codeblock", "Codeblock", "codeblock", (editor) => + editor.chain().focus().toggleCodeBlock().run() + ); + } +} + +export class Blockquote extends BlockTool { + constructor() { + super("blockquote", "Blockquote", "blockquote", (editor) => + editor.chain().focus().toggleBlockquote().run() + ); + } +} + +export class Image implements ITool { + id: ToolId = "image"; + title: string = "Image"; + + render = (props: ToolProps) => { + const { editor } = props; + return ( + <> + } + items={[ + { + key: "upload-from-disk", + type: "menuitem", + title: "Upload from disk", + icon: "upload", + onClick: () => {}, + }, + { + key: "upload-from-url", + type: "menuitem", + title: "Attach from URL", + icon: "link", + onClick: () => {}, + }, + ]} + /> + + ); + }; +} + +export class Attachment extends BlockTool { + constructor() { + super("attachment", "Attachment", "attachment", (editor) => { + return false; + }); + } +} + +type CellLocation = { column: number; row: number }; +type TableSize = { columns: number; rows: number }; +export class Table implements ITool { + id: ToolId = "table"; + title: string = "Table"; + private MAX_COLUMNS = 20; + private MAX_ROWS = 20; + + private MIN_COLUMNS = 4; + private MIN_ROWS = 4; + + render = (props: ToolProps) => { + const { editor } = props; + const [isOpen, setIsOpen] = useState(false); + const ref = useRef(null); + const [cellLocation, setCellLocation] = useState({ + column: 0, + row: 0, + }); + const [tableSize, setTableSize] = useState({ + columns: this.MIN_COLUMNS, + rows: this.MIN_ROWS, + }); + + useEffect(() => { + setTableSize((old) => { + const { columns, rows } = old; + const { column, row } = cellLocation; + + let isDecrease = row === rows - 2 || column === columns - 2; + + let rowFactor = Number(row === rows || row === rows - 2); + let columnFactor = Number(column === columns || column === columns - 2); + + return { + columns: isDecrease + ? Math.max(column + columnFactor, this.MIN_COLUMNS) + : Math.min(old.columns + columnFactor, this.MAX_COLUMNS), + rows: isDecrease + ? Math.max(row + rowFactor, this.MIN_ROWS) + : Math.min(old.rows + rowFactor, this.MAX_ROWS), + }; + }); + }, [cellLocation]); + + return ( + + + setIsOpen(false)} + items={[]} + options={{ + type: "menu", + position: { + target: ref.current || undefined, + isTargetAbsolute: true, + location: "below", + yOffset: 5, + }, + }} + > + + + + {Array(tableSize.columns * tableSize.rows) + .fill(0) + .map((_, index) => ( + { + setCellLocation(this.getCellLocation(index, tableSize)); + }} + onClick={() => { + editor + .chain() + .focus() + .insertTable({ + cols: cellLocation.column, + rows: cellLocation.row, + }) + .run(); + setIsOpen(false); + }} + /> + ))} + + + {cellLocation.column}x{cellLocation.row} + + + + + + ); + }; + + private getCellLocation(index: number, tableSize: TableSize): CellLocation { + const cellIndex = index + 1; + const column = cellIndex % tableSize.columns; + let row = cellIndex / tableSize.columns; + const flooredRow = Math.floor(row); + row = row === flooredRow ? row : flooredRow + 1; + + return { column: column ? column : tableSize.columns, row }; + } + + private isCellHighlighted( + index: number, + currentCellLocation: CellLocation, + tableSize: TableSize + ) { + const cellLocation = this.getCellLocation(index, tableSize); + return ( + cellLocation.row <= currentCellLocation.row && + cellLocation.column <= currentCellLocation.column + ); + } +} diff --git a/packages/editor/src/toolbar/tools/colors.tsx b/packages/editor/src/toolbar/tools/colors.tsx new file mode 100644 index 000000000..a33206c9f --- /dev/null +++ b/packages/editor/src/toolbar/tools/colors.tsx @@ -0,0 +1,250 @@ +import { ITool, ToolProps } from "../types"; +import { Editor } from "@tiptap/core"; +import { ToolId } from "."; +import { Dropdown } from "../components/dropdown"; +import { MenuItem } from "../../components/menu/types"; +import { Box, Button, Flex, Text } from "rebass"; +import { Input } from "@rebass/forms"; +import { Icon } from "../components/icon"; +import { IconNames, Icons } from "../icons"; +import { ToolButton } from "../components/tool-button"; +import { MenuPresenter } from "../../components/menu/menu"; +import { useRef, useState } from "react"; +import tinycolor from "tinycolor2"; + +export const DEFAULT_COLORS = [ + "#f44336", + "#e91e63", + "#9c27b0", + "#673ab7", + "#3f51b5", + "#2196f3", + "#03a9f4", + "#00bcd4", + "#009688", + "#4caf50", + "#8bc34a", + "#cddc39", + "#ffeb3b", + "#ffc107", +]; + +class ColorTool implements ITool { + constructor( + readonly id: ToolId, + readonly title: string, + private readonly icon: IconNames, + private readonly onColorChange: (editor: Editor, color?: string) => void + ) {} + + render = (props: ToolProps) => { + const { editor } = props; + const [isOpen, setIsOpen] = useState(false); + const attrs = editor.getAttributes( + this.id === "highlight" ? "highlight" : "textStyle" + ); + const ref = useRef(null); + const isActive = editor.isActive( + this.id === "highlight" ? "highlight" : "textStyle", + { color: /\W+/gm } + ); + + return ( + + {}} + toggled={false} + sx={{ mr: 0, bg: isActive ? attrs.color : "transparent" }} + /> + + setIsOpen(false)} + items={[]} + // sx={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", p: 1 }} + options={{ + type: "menu", + position: { + target: ref.current || undefined, + isTargetAbsolute: true, + location: "below", + align: "center", + yOffset: 5, + }, + }} + > + + this.onColorChange(editor)} + onChange={(color) => this.onColorChange(editor, color)} + /> + + + + ); + }; +} + +export class Highlight extends ColorTool { + constructor() { + super("highlight", "Highlight", "highlight", (editor, color) => + color + ? editor.chain().focus().toggleHighlight({ color }).run() + : editor.chain().focus().unsetHighlight().run() + ); + } +} + +export class TextColor extends ColorTool { + constructor() { + super("textColor", "Text color", "textColor", (editor, color) => + color + ? editor.chain().focus().setColor(color).run() + : editor.chain().focus().unsetColor().run() + ); + } +} + +type ColorPickerProps = { + colors: string[]; + color: string; + onClear: () => void; + onChange: (color: string) => void; +}; +export function ColorPicker(props: ColorPickerProps) { + const { colors, color, onClear, onChange } = props; + const [currentColor, setCurrentColor] = useState( + tinycolor(color || colors[0]).toHexString() + ); + + return ( + <> + + + {currentColor} + + + + {colors.map((color) => ( + { + setCurrentColor(color); + onChange(color); + }} + /> + ))} + + + + + + { + const { value } = e.target; + if (!value) return; + setCurrentColor(value); + }} + /> + + + + ); +} diff --git a/packages/editor/src/toolbar/tools/font.tsx b/packages/editor/src/toolbar/tools/font.tsx new file mode 100644 index 000000000..1c7fba065 --- /dev/null +++ b/packages/editor/src/toolbar/tools/font.tsx @@ -0,0 +1,78 @@ +import { ITool, ToolProps } from "../types"; +import { Dropdown } from "../components/dropdown"; +import { ToolId } from "."; +import { MenuItem } from "../../components/menu/types"; +import { Editor } from "@tiptap/core"; + +export class FontSize implements ITool { + title = "Font size"; + id: ToolId = "fontSize"; + private defaultFontSizes = [ + 12, 14, 16, 18, 20, 24, 28, 32, 36, 42, 48, 60, 72, 100, + ]; + + render = (props: ToolProps) => { + const { editor } = props; + const currentFontSize = + this.defaultFontSizes.find((size) => + editor.isActive("textStyle", { fontSize: `${size}px` }) + ) || 16; + + return ( + ({ + key: `${size}px`, + type: "menuitem", + title: `${size}px`, + isChecked: size === currentFontSize, + onClick: () => editor.chain().focus().setFontSize(`${size}px`).run(), + }))} + /> + ); + }; +} + +export class FontFamily implements ITool { + title = "Font family"; + id: ToolId = "fontFamily"; + private fontFamilies = { + System: "Open Sans", + Serif: "serif", + Monospace: "monospace", + }; + + render = (props: ToolProps) => { + const { editor } = props; + + const currentFontFamily = + Object.entries(this.fontFamilies) + .find(([key, value]) => + editor.isActive("textStyle", { fontFamily: value }) + ) + ?.map((a) => a) + ?.at(0) || "System"; + + return ( + + ); + }; + + private toMenuItems(editor: Editor, currentFontFamily: string): MenuItem[] { + const menuItems: MenuItem[] = []; + for (const key in this.fontFamilies) { + const value = this.fontFamilies[key as keyof typeof this.fontFamilies]; + menuItems.push({ + key, + type: "menuitem", + title: key, + isChecked: key === currentFontFamily, + onClick: () => editor.chain().focus().setFontFamily(value).run(), + }); + } + return menuItems; + } +} diff --git a/packages/editor/src/toolbar/tools/headings.tsx b/packages/editor/src/toolbar/tools/headings.tsx new file mode 100644 index 000000000..d4dd9da26 --- /dev/null +++ b/packages/editor/src/toolbar/tools/headings.tsx @@ -0,0 +1,53 @@ +import { ITool, ToolProps } from "../types"; +import { Editor } from "@tiptap/core"; +import { ToolId } from "."; +import { Dropdown } from "../components/dropdown"; +import { MenuItem } from "../../components/menu/types"; + +export class Headings implements ITool { + title = "Headings"; + id: ToolId = "headings"; + private defaultLevels = [1, 2, 3, 4, 5, 6]; + + render = (props: ToolProps) => { + const { editor } = props; + + const currentHeadingLevel = this.defaultLevels.find((level) => + editor.isActive("heading", { level }) + ); + return ( + + ); + }; + + private toMenuItems( + editor: Editor, + currentHeadingLevel?: number + ): MenuItem[] { + const menuItems: MenuItem[] = this.defaultLevels.map((level) => ({ + type: "menuitem", + key: `heading-${level}`, + title: `Heading ${level}`, + isChecked: level === currentHeadingLevel, + onClick: () => + editor + .chain() + .focus() + .setHeading({ level: level as any }) + .run(), + })); + const paragraph: MenuItem = { + key: "paragraph", + type: "menuitem", + title: "Paragraph", + isChecked: !currentHeadingLevel, + onClick: () => editor.chain().focus().setParagraph().run(), + }; + return [paragraph, ...menuItems]; + } +} diff --git a/packages/editor/src/toolbar/tools/index.ts b/packages/editor/src/toolbar/tools/index.ts new file mode 100644 index 000000000..a55fb78a5 --- /dev/null +++ b/packages/editor/src/toolbar/tools/index.ts @@ -0,0 +1,61 @@ +import { ITool } from "../types"; +import { + Bold, + Italic, + Underline, + Strikethrough, + Code, + Subscript, + Superscript, + ClearFormatting, + Link, +} from "./inline"; +import { FontSize, FontFamily } from "./font"; +import { AlignCenter, AlignLeft, AlignRight, AlignJustify } from "./alignment"; +import { + Blockquote, + CodeBlock, + HorizontalRule, + Image, + Attachment, + Table, +} from "./block"; +import { Headings } from "./headings"; +import { NumberedList, BulletList } from "./lists"; +import { LeftToRight, RightToLeft } from "./text-direction"; +import { Highlight, TextColor } from "./colors"; + +const tools = { + bold: new Bold(), + italic: new Italic(), + underline: new Underline(), + strikethrough: new Strikethrough(), + code: new Code(), + formatClear: new ClearFormatting(), + alignCenter: new AlignCenter(), + alignRight: new AlignRight(), + alignLeft: new AlignLeft(), + alignJustify: new AlignJustify(), + subscript: new Subscript(), + superscript: new Superscript(), + fontSize: new FontSize(), + fontFamily: new FontFamily(), + horizontalRule: new HorizontalRule(), + codeblock: new CodeBlock(), + blockquote: new Blockquote(), + headings: new Headings(), + ltr: new LeftToRight(), + rtl: new RightToLeft(), + numberedList: new NumberedList(), + bulletList: new BulletList(), + textColor: new TextColor(), + highlight: new Highlight(), + link: new Link(), + image: new Image(), + attachment: new Attachment(), + table: new Table(), +}; +export type ToolId = keyof typeof tools; +export function findToolById(id: ToolId): ITool { + return tools[id]; +} diff --git a/packages/editor/src/toolbar/tools/inline.tsx b/packages/editor/src/toolbar/tools/inline.tsx new file mode 100644 index 000000000..5131fd6e9 --- /dev/null +++ b/packages/editor/src/toolbar/tools/inline.tsx @@ -0,0 +1,197 @@ +import { ITool, ToolProps } from "../types"; +import { Editor } from "@tiptap/core"; +import { ToolButton } from "../components/tool-button"; +import { ToolId } from "."; +import { MenuPresenter } from "../../components/menu/menu"; +import { useRef, useState } from "react"; +import { Flex, Text } from "rebass"; +import { Input } from "@rebass/forms"; +import { Popup } from "../components/popup"; +import { FloatingMenu } from "@tiptap/react"; +import { IconNames } from "../icons"; + +class InlineTool implements ITool { + constructor( + readonly id: TId, + readonly title: string, + private readonly icon: IconNames + ) {} + + render = (props: ToolProps) => { + const { editor } = props; + return ( + editor.chain().focus().toggleMark(this.id).run()} + toggled={editor.isActive(this.id)} + /> + ); + }; +} + +export class Italic extends InlineTool { + constructor() { + super("italic", "Italic", "italic"); + } +} + +export class Strikethrough extends InlineTool { + constructor() { + super("strikethrough", "Strikethrough", "strikethrough"); + } +} + +export class Underline extends InlineTool { + constructor() { + super("underline", "Underline", "underline"); + } +} + +export class Code extends InlineTool { + constructor() { + super("code", "Code", "code"); + } +} + +export class Bold extends InlineTool { + constructor() { + super("bold", "Bold", "bold"); + } +} + +export class Subscript extends InlineTool { + constructor() { + super("subscript", "Subscript", "subscript"); + } +} + +export class Superscript extends InlineTool { + constructor() { + super("superscript", "Superscript", "superscript"); + } +} + +export class ClearFormatting implements ITool { + id: ToolId = "formatClear"; + title = "Clear all formatting"; + + render = (props: ToolProps) => { + const { editor } = props; + + return ( + + editor.chain().focus().clearNodes().unsetAllMarks().run() + } + toggled={false} + /> + ); + }; +} + +export class Link implements ITool { + id: ToolId = "link"; + title = "Link"; + + render = (props: ToolProps) => { + const { editor } = props; + const buttonRef = useRef(null); + const targetRef = useRef(); + const [isOpen, setIsOpen] = useState(false); + const [href, setHref] = useState(); + const [text, setText] = useState(); + const currentUrl = editor.getAttributes("link").href; + const isEditing = !!currentUrl; + + return ( + <> + { + if (isEditing) setHref(currentUrl); + + let { from, to, $from } = editor.state.selection; + + const selectedNode = $from.node(); + const pos = selectedNode.isTextblock ? $from.before() : $from.pos; + + const domNode = editor.view.nodeDOM(pos) as HTMLElement; + targetRef.current = domNode; + + const selectedText = isEditing + ? selectedNode.textContent + : editor.state.doc.textBetween(from, to); + + setText(selectedText); + setIsOpen(true); + }} + toggled={isOpen || !!isEditing} + /> + { + editor.commands.focus(); + setIsOpen(false); + }} + > + { + if (!href) return; + + let commandChain = editor + .chain() + .focus() + .extendMarkRange("link") + .setLink({ href, target: "_blank" }); + if (text) + commandChain = commandChain.insertContent(text).focus(); + + commandChain.run(); + setIsOpen(false); + }, + }} + // negativeButton={{ text: "Cancel", onClick: () => setIsOpen(false) }} + > + + setText(e.target.value)} + /> + setHref(e.target.value)} + /> + + + + + ); + }; +} diff --git a/packages/editor/src/toolbar/tools/lists.tsx b/packages/editor/src/toolbar/tools/lists.tsx new file mode 100644 index 000000000..182975e1f --- /dev/null +++ b/packages/editor/src/toolbar/tools/lists.tsx @@ -0,0 +1,192 @@ +import { ITool, ToolProps } from "../types"; +import { Editor } from "@tiptap/core"; +import { ToolId } from "."; +import { Dropdown } from "../components/dropdown"; +import { MenuItem } from "../../components/menu/types"; +import { Box, Button, Flex, Text } from "rebass"; +import { Icon } from "../components/icon"; +import { IconNames, Icons } from "../icons"; +import { ToolButton } from "../components/tool-button"; +import { MenuPresenter } from "../../components/menu/menu"; +import { useRef, useState } from "react"; + +type ListSubType = { + items: string[]; + title: string; + type: TListStyleTypes; +}; +type ListOptions = { + icon: IconNames; + type: "bulletList" | "orderedList"; + onClick: (editor: Editor) => void; + subTypes: ListSubType[]; +}; +class ListTool implements ITool { + constructor( + readonly id: ToolId, + readonly title: string, + private readonly options: ListOptions + ) {} + + render = (props: ToolProps) => { + const { editor } = props; + const [isOpen, setIsOpen] = useState(false); + const ref = useRef(null); + const isActive = editor.isActive(this.options.type); + + return ( + + this.options.onClick(editor)} + toggled={isActive} + sx={{ mr: 0 }} + /> + + setIsOpen(false)} + items={this.options.subTypes.map((item) => ({ + key: item.type, + tooltip: item.title, + type: "menuitem", + component: () => , + onClick: () => { + let chain = editor.chain().focus(); + + if (!isActive) { + if (this.options.type === "bulletList") + chain = chain.toggleBulletList(); + else chain = chain.toggleOrderedList(); + } + + return chain + .updateAttributes(this.options.type, { listType: item.type }) + .run(); + }, + }))} + sx={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", p: 1 }} + options={{ + type: "menu", + position: { + target: ref.current || undefined, + isTargetAbsolute: true, + location: "below", + yOffset: 5, + }, + }} + /> + + ); + }; +} + +type NumberedListStyleTypes = + | "lower-roman" + | "upper-roman" + | "lower-greek" + | "lower-alpha" + | "upper-alpha" + | "decimal"; +export class NumberedList extends ListTool { + constructor() { + const options: ListOptions = { + type: "orderedList", + icon: "numberedList", + onClick: (editor) => editor.chain().focus().toggleOrderedList().run(), + subTypes: [ + { type: "decimal", title: "Decimal", items: ["1", "2", "3"] }, + { type: "upper-alpha", title: "Upper alpha", items: ["A", "B", "C"] }, + { type: "lower-alpha", title: "Lower alpha", items: ["a", "b", "c"] }, + { + type: "upper-roman", + title: "Upper Roman", + items: ["I", "II", "III"], + }, + { + type: "lower-roman", + title: "Lower Roman", + items: ["i", "ii", "iii"], + }, + { type: "lower-greek", title: "Lower Greek", items: ["α", "β", "γ"] }, + ], + }; + super("numberedList", "Numbered list", options); + } +} + +type BulletListStyleTypes = "circle" | "square" | "disc"; +export class BulletList extends ListTool { + constructor() { + const options: ListOptions = { + type: "bulletList", + icon: "bulletList", + onClick: (editor) => editor.chain().focus().toggleOrderedList().run(), + subTypes: [ + { type: "disc", title: "Decimal", items: ["1", "2", "3"] }, + { type: "circle", title: "Upper alpha", items: ["A", "B", "C"] }, + { type: "square", title: "Lower alpha", items: ["a", "b", "c"] }, + ], + }; + super("bulletList", "Bullet list", options); + } +} + +type ListThumbnailProps = { listStyleType: string }; +function ListThumbnail(props: ListThumbnailProps) { + const { listStyleType } = props; + return ( + + {[0, 0, 0].map(() => ( + + + + + + ))} + + ); +} diff --git a/packages/editor/src/toolbar/tools/text-direction.tsx b/packages/editor/src/toolbar/tools/text-direction.tsx new file mode 100644 index 000000000..d058efc9b --- /dev/null +++ b/packages/editor/src/toolbar/tools/text-direction.tsx @@ -0,0 +1,44 @@ +import { ITool, ToolProps } from "../types"; +import { Editor } from "@tiptap/core"; +import { ToolButton } from "../components/tool-button"; +import { ToolId } from "."; +import { IconNames } from "../icons"; + +class TextDirectionTool + implements ITool +{ + constructor( + readonly id: TId, + readonly title: TTitle, + private readonly icon: IconNames, + private readonly direction: "ltr" | "rtl" + ) {} + + render = (props: ToolProps) => { + const { editor } = props; + + return ( + + editor.chain().focus().setTextDirection(this.direction).run() + } + toggled={editor.isActive({ textDirection: this.direction })} + /> + ); + }; +} + +export class LeftToRight extends TextDirectionTool { + constructor() { + super("ltr", "Left-to-right", "ltr", "ltr"); + } +} + +export class RightToLeft extends TextDirectionTool { + constructor() { + super("rtl", "Right-to-left", "rtl", "rtl"); + } +} diff --git a/packages/editor/src/toolbar/types.ts b/packages/editor/src/toolbar/types.ts new file mode 100644 index 000000000..a5145277a --- /dev/null +++ b/packages/editor/src/toolbar/types.ts @@ -0,0 +1,14 @@ +import { Editor } from "@tiptap/core"; +import { ToolId } from "./tools"; + +export type ToolProps = { editor: Editor }; +export interface ITool { + id: ToolId; + title: string; + description?: string; + render(props: ToolProps): JSX.Element; +} + +// export interface ToolConstructor { +// new (editor: Editor): ITool; +// } diff --git a/packages/editor/toolbar.md b/packages/editor/toolbar.md new file mode 100644 index 000000000..03546cefd --- /dev/null +++ b/packages/editor/toolbar.md @@ -0,0 +1,72 @@ +Features: + +1. Cross-platform +2. Able to render at the top & the bottom + 1. Aligns & adjusts different elements based on where it's located +3. 4 different types of interaction elements: + 1. Dropdown + 2. Popup + 3. Bottom action sheet (mobile only) + 4. Sidebar +4. The toolbar will be extensible allowing plugins to add tools into it. + +API Design: + +1. All the tools will be defined in a seperate file +2. Each tool will implement the `ITool` interface +3. The `ITool` interface defines: + 1. The name + 2. Type: "block" | "inline" etc. + 3. Help text/description + 4. The action +4. Each tool will take the `Editor` instance from its constructor +5. The `action` needs to be pure i.e., it should perform the exact same action on the same data. +6. All the tools classes will be exported from the `index.ts` file + +The Toolbar: + +1. The toolbar will be React rendered taking a tool definition from its props & the location. +2. Based on the tool definition, the toolbar will render different items. +3. The icon for each tool will be derived from the tool definition + 1. We will need an icon resolver that will take an icon name & find the icon associated with it. + 2. To this purpose, we should have an icon dictionary which the client can import & use. +4. This toolbar will be exported for the client to render. + +Interaction Elements: + +1. Inside the `action` of each tool, the action will have full control over what to render & where. +2. The action should take the rendered `HTMLElement` as reference +3. In case of dropdown: + 1. We can use the menu from the app & move it into a module + 2. This menu can then be reshaped to act as a dropdown +4. In case of bottom sheet: + 1. We should use [react-spring-bottom-sheet](https://github.com/stipsan/react-spring-bottom-sheet) + 2. Since bottom sheet will serve multiple purposes (not just a list of items), it should be possible + to render anything in it. +5. In case of popup: TBD +6. In case of side bar: TBD + +Total Tools: + +- [x] bold italic underline strikethrough inlinecode +- [x] fontselect (50% done) +- [x] blockquote (styling left) +- [x] codeblock +- [x] fontsizeselect (50% done) +- [x] formatselect (50% done) +- [x] alignleft aligncenter alignright alignjustify +- [] outdent indent +- [x] subscript superscript +- [x] numlist +- [x] bullist +- [] checklist +- [x] forecolor backcolor +- [x] removeformat +- [x] hr +- [x] link +- [x] image +- [x] attachment +- [] media +- [] table +- [x] ltr rtl +- [] searchreplace diff --git a/packages/editor/tsconfig.json b/packages/editor/tsconfig.json index a5898bd5c..87fc5c90b 100644 --- a/packages/editor/tsconfig.json +++ b/packages/editor/tsconfig.json @@ -1,23 +1,106 @@ { - "$schema": "https://json.schemastore.org/tsconfig", - "display": "tiptap editor", "compilerOptions": { - "lib": ["dom", "dom.iterable", "esnext"], - "module": "esnext", - "target": "es5", - "allowJs": true, - "allowSyntheticDefaultImports": true, - "esModuleInterop": true, - "forceConsistentCasingInFileNames": true, - "isolatedModules": true, - "jsx": "react-jsx", - "moduleResolution": "node", - "noEmit": true, - "noFallthroughCasesInSwitch": true, - "resolveJsonModule": true, - "skipLibCheck": true, - "strict": true, - "outDir": "dist" + /* Visit https://aka.ms/tsconfig.json to read more about this file */ + + /* Projects */ + // "incremental": true, /* Enable incremental compilation */ + // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ + // "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */ + // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */ + // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ + // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ + + /* Language and Environment */ + "target": "ES5" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */, + "lib": [ + "DOM", + "DOM.Iterable", + "ESNext" + ] /* Specify a set of bundled library declaration files that describe the target runtime environment. */, + "jsx": "react-jsx" /* Specify what JSX code is generated. */, + // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ + // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ + // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */ + // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ + // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */ + // "reactNamespace": "", /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */ + // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ + // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ + + /* Modules */ + "module": "ESNext" /* Specify what module code is generated. */, + // "rootDir": "./", /* Specify the root folder within your source files. */ + "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */, + // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ + // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ + // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ + // "typeRoots": [], /* Specify multiple folders that act like `./node_modules/@types`. */ + // "types": [], /* Specify type package names to be included without being referenced in a source file. */ + // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ + "resolveJsonModule": true /* Enable importing .json files */, + // "noResolve": true, /* Disallow `import`s, `require`s or ``s from expanding the number of files TypeScript should add to a project. */ + + /* JavaScript Support */ + "allowJs": true /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */, + // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ + // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */ + + /* Emit */ + "declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */, + // "declarationMap": true, /* Create sourcemaps for d.ts files. */ + // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ + // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ + // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */ + "outDir": "./dist" /* Specify an output folder for all emitted files. */, + // "removeComments": true, /* Disable emitting comments. */ + // "noEmit": true, /* Disable emitting files from a compilation. */ + // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ + // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types */ + // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ + // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ + // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ + // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ + // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ + // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ + // "newLine": "crlf", /* Set the newline character for emitting files. */ + // "stripInternal": true, /* Disable emitting declarations that have `@internal` in their JSDoc comments. */ + // "noEmitHelpers": true, /* Disable generating custom helper functions like `__extends` in compiled output. */ + // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ + // "preserveConstEnums": true, /* Disable erasing `const enum` declarations in generated code. */ + // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ + // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ + + /* Interop Constraints */ + "isolatedModules": true /* Ensure that each file can be safely transpiled without relying on other imports. */, + "allowSyntheticDefaultImports": true /* Allow 'import x from y' when a module doesn't have a default export. */, + "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */, + // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ + "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */, + + /* Type Checking */ + "strict": true /* Enable all strict type-checking options. */, + // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied `any` type.. */ + // "strictNullChecks": true, /* When type checking, take into account `null` and `undefined`. */ + // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ + // "strictBindCallApply": true, /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */ + // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ + // "noImplicitThis": true, /* Enable error reporting when `this` is given the type `any`. */ + // "useUnknownInCatchVariables": true, /* Type catch clause variables as 'unknown' instead of 'any'. */ + // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ + // "noUnusedLocals": true, /* Enable error reporting when a local variables aren't read. */ + // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read */ + // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ + // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ + "noFallthroughCasesInSwitch": true /* Enable error reporting for fallthrough cases in switch statements. */, + // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ + // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ + // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type */ + // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ + // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ + + /* Completeness */ + // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ + "skipLibCheck": true /* Skip type checking all .d.ts files. */ }, - "include": ["src", "hooks", "utils"] + "include": ["src/"] }