diff --git a/packages/editor/dist/components/actionsheet/index.js b/packages/editor/dist/components/actionsheet/index.js index ea4b031ae..a082d6cf2 100644 --- a/packages/editor/dist/components/actionsheet/index.js +++ b/packages/editor/dist/components/actionsheet/index.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -9,6 +10,29 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { + Object.defineProperty(o, "default", { enumerable: true, value: v }); +}) : function(o, v) { + o["default"] = v; +}); +var __importStar = (this && this.__importStar) || function (mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); + __setModuleDefault(result, mod); + return result; +}; var __read = (this && this.__read) || function (o, n) { var m = typeof Symbol === "function" && o[Symbol.iterator]; if (!m) return o; @@ -25,17 +49,22 @@ var __read = (this && this.__read) || function (o, n) { } return ar; }; -import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; -import React, { useCallback, useRef, useState, useEffect, } from "react"; -import { useTheme } from "emotion-theming"; -import { Box, Button, Flex, Text } from "rebass"; -import { Icon } from "../../toolbar/components/icon"; -import { Icons } from "../../toolbar/icons"; -import { MenuButton } from "../menu/menu-button"; -import { MenuSeparator } from "../menu/menu-separator"; -import Modal from "react-modal"; -import { motion, useMotionValue, useTransform, useAnimation, } from "framer-motion"; -var AnimatedFlex = motion(Flex); +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.ActionSheetPresenter = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var react_1 = __importStar(require("react")); +var emotion_theming_1 = require("emotion-theming"); +var rebass_1 = require("rebass"); +var icon_1 = require("../../toolbar/components/icon"); +var icons_1 = require("../../toolbar/icons"); +var menubutton_1 = require("../menu/menubutton"); +var menuseparator_1 = require("../menu/menuseparator"); +var react_modal_1 = __importDefault(require("react-modal")); +var framer_motion_1 = require("framer-motion"); +var AnimatedFlex = (0, framer_motion_1.motion)(rebass_1.Flex); var TRANSITION = { type: "spring", stiffness: 300, @@ -44,10 +73,10 @@ var TRANSITION = { duration: 300, }; function useHistory(initial) { - var _a = __read(useState(initial), 2), current = _a[0], setCurrent = _a[1]; - var _b = __read(useState(false), 2), canGoBack = _b[0], setCanGoBack = _b[1]; - var stack = useRef([initial]); - var goBack = useCallback(function () { + var _a = __read((0, react_1.useState)(initial), 2), current = _a[0], setCurrent = _a[1]; + var _b = __read((0, react_1.useState)(false), 2), canGoBack = _b[0], setCanGoBack = _b[1]; + var stack = (0, react_1.useRef)([initial]); + var goBack = (0, react_1.useCallback)(function () { if (!canGoBack) return; var prev = stack.current.pop(); @@ -55,7 +84,7 @@ function useHistory(initial) { if (stack.current.length <= 1) setCanGoBack(false); }, [canGoBack]); - var navigate = useCallback(function (state) { + var navigate = (0, react_1.useCallback)(function (state) { console.log("NAVI", state); setCurrent(function (prev) { if (prev) @@ -66,15 +95,15 @@ function useHistory(initial) { }, []); return { current: current, goBack: goBack, navigate: navigate, canGoBack: canGoBack }; } -export function ActionSheetPresenter(props) { +function ActionSheetPresenter(props) { var _a; var isOpen = props.isOpen, title = props.title, items = props.items, onClose = props.onClose, _b = props.blocking, blocking = _b === void 0 ? true : _b, _c = props.focusOnRender, focusOnRender = _c === void 0 ? true : _c, _d = props.draggable, draggable = _d === void 0 ? true : _d, children = props.children; - var theme = useTheme(); - var contentRef = useRef(); - var y = useMotionValue(0); - var opacity = useTransform(y, [0, ((_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || window.innerHeight], [1, 0]); - var animation = useAnimation(); - var onBeforeClose = useCallback(function () { + var theme = (0, emotion_theming_1.useTheme)(); + var contentRef = (0, react_1.useRef)(); + var y = (0, framer_motion_1.useMotionValue)(0); + var opacity = (0, framer_motion_1.useTransform)(y, [0, ((_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || window.innerHeight], [1, 0]); + var animation = (0, framer_motion_1.useAnimation)(); + var onBeforeClose = (0, react_1.useCallback)(function () { var _a; var height = ((_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || window.innerHeight; setTimeout(function () { @@ -85,11 +114,11 @@ export function ActionSheetPresenter(props) { y: height + 100, }); }, [animation, onClose, contentRef.current]); - var handleBackPress = useCallback(function (event) { + var handleBackPress = (0, react_1.useCallback)(function (event) { event.preventDefault(); onBeforeClose(); }, [onBeforeClose]); - useEffect(function () { + (0, react_1.useEffect)(function () { // Note: this is a custom event implemented on the React Native // side to handle back button when action sheet is opened. window.addEventListener("handleBackPress", handleBackPress); @@ -99,19 +128,19 @@ export function ActionSheetPresenter(props) { }, [handleBackPress]); if (!isOpen) return null; - return (_jsx(Modal, __assign({ contentRef: function (ref) { return (contentRef.current = ref); }, className: "bottom-sheet-presenter", role: "menu", isOpen: isOpen, appElement: document.body, shouldCloseOnEsc: blocking, shouldReturnFocusAfterClose: focusOnRender, shouldCloseOnOverlayClick: blocking, shouldFocusAfterRender: focusOnRender, ariaHideApp: blocking, preventScroll: blocking, onRequestClose: function () { return onBeforeClose(); }, portalClassName: "bottom-sheet-presenter-portal", onAfterOpen: function () { + return ((0, jsx_runtime_1.jsx)(react_modal_1.default, __assign({ contentRef: function (ref) { return (contentRef.current = ref); }, className: "bottom-sheet-presenter", role: "menu", isOpen: isOpen, appElement: document.body, shouldCloseOnEsc: blocking, shouldReturnFocusAfterClose: focusOnRender, shouldCloseOnOverlayClick: blocking, shouldFocusAfterRender: focusOnRender, ariaHideApp: blocking, preventScroll: blocking, onRequestClose: function () { return onBeforeClose(); }, portalClassName: "bottom-sheet-presenter-portal", onAfterOpen: function () { animation.start({ transition: TRANSITION, y: 0 }); }, overlayElement: function (props, contentEl) { - return (_jsxs(Box, __assign({}, props, { + return ((0, jsx_runtime_1.jsxs)(rebass_1.Box, __assign({}, props, { //@ts-ignore - style: __assign(__assign({}, props.style), { position: blocking ? "fixed" : "sticky", zIndex: 1000, backgroundColor: !blocking ? "transparent" : "unset" }), tabIndex: -1 }, { children: [blocking && (_jsx(motion.div, { id: "action-sheet-overlay", style: { + style: __assign(__assign({}, props.style), { position: blocking ? "fixed" : "sticky", zIndex: 1000, backgroundColor: !blocking ? "transparent" : "unset" }), tabIndex: -1 }, { children: [blocking && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { id: "action-sheet-overlay", style: { height: "100%", width: "100%", opacity: opacity, position: "absolute", backgroundColor: "var(--overlay)", }, tabIndex: -1 })), contentEl] }))); - }, contentElement: function (props, children) { return (_jsx(Box, __assign({}, props, { style: {}, sx: { + }, contentElement: function (props, children) { return ((0, jsx_runtime_1.jsx)(rebass_1.Box, __assign({}, props, { style: {}, sx: { // top: 0, left: 0, right: 0, @@ -125,14 +154,14 @@ export function ActionSheetPresenter(props) { zIndex: 0, outline: 0, isolation: "isolate", - } }, { children: children }))); } }, { children: _jsxs(AnimatedFlex, __assign({ animate: animation, style: { y: y }, initial: { y: 1000 }, sx: { + } }, { children: children }))); } }, { children: (0, jsx_runtime_1.jsxs)(AnimatedFlex, __assign({ animate: animation, style: { y: y }, initial: { y: 1000 }, sx: { bg: "background", borderTopLeftRadius: 15, borderTopRightRadius: 15, boxShadow: theme.shadows.menu, flex: 1, flexDirection: "column", - } }, { children: [draggable && (_jsx(AnimatedFlex, __assign({ drag: "y", + } }, { children: [draggable && ((0, jsx_runtime_1.jsx)(AnimatedFlex, __assign({ drag: "y", // @ts-ignore onDrag: function (_, _a) { var delta = _a.delta; @@ -160,13 +189,14 @@ export function ActionSheetPresenter(props) { alignItems: "center", justifyContent: "center", p: 2, - } }, { children: _jsx(Box, { id: "pill", sx: { + } }, { children: (0, jsx_runtime_1.jsx)(rebass_1.Box, { id: "pill", sx: { backgroundColor: "hover", width: 60, height: 8, borderRadius: 100, - } }) }))), _jsx(ContentContainer, __assign({ items: items, title: title, onClose: onClose }, { children: children }))] })) }))); + } }) }))), (0, jsx_runtime_1.jsx)(ContentContainer, __assign({ items: items, title: title, onClose: onClose }, { children: children }))] })) }))); } +exports.ActionSheetPresenter = ActionSheetPresenter; function ContentContainer(props) { var _a; var title = props.title, items = props.items, onClose = props.onClose, children = props.children; @@ -174,16 +204,16 @@ function ContentContainer(props) { title: title, items: items, }), current = _b.current, goBack = _b.goBack, canGoBack = _b.canGoBack, navigate = _b.navigate; - return (_jsxs(Flex, __assign({ sx: { flexDirection: "column" } }, { children: [canGoBack || (current === null || current === void 0 ? void 0 : current.title) ? (_jsxs(Flex, __assign({ id: "header", sx: { alignItems: "center", mx: 0, mb: 1 } }, { children: [canGoBack && (_jsx(Button, __assign({ variant: "icon", sx: { p: 1, ml: 1 }, onClick: goBack }, { children: _jsx(Icon, { path: Icons.arrowLeft, size: "big" }) }))), (current === null || current === void 0 ? void 0 : current.title) && (_jsx(Text, __assign({ variant: "title", sx: { ml: 1, fontSize: "title" } }, { children: current === null || current === void 0 ? void 0 : current.title })))] }))) : null, children + return ((0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ sx: { flexDirection: "column" } }, { children: [canGoBack || (current === null || current === void 0 ? void 0 : current.title) ? ((0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ id: "header", sx: { alignItems: "center", mx: 0, mb: 1 } }, { children: [canGoBack && ((0, jsx_runtime_1.jsx)(rebass_1.Button, __assign({ variant: "icon", sx: { p: 1, ml: 1 }, onClick: goBack }, { children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { path: icons_1.Icons.arrowLeft, size: "big" }) }))), (current === null || current === void 0 ? void 0 : current.title) && ((0, jsx_runtime_1.jsx)(rebass_1.Text, __assign({ variant: "title", sx: { ml: 1, fontSize: "title" } }, { children: current === null || current === void 0 ? void 0 : current.title })))] }))) : null, children ? children : (_a = current === null || current === void 0 ? void 0 : current.items) === null || _a === void 0 ? void 0 : _a.map(function (item) { if (item.isHidden) return null; switch (item.type) { case "separator": - return _jsx(MenuSeparator, {}, item.key); + return (0, jsx_runtime_1.jsx)(menuseparator_1.MenuSeparator, {}, item.key); case "button": - return (_jsx(MenuButton, { item: item, onClick: function (e) { + return ((0, jsx_runtime_1.jsx)(menubutton_1.MenuButton, { item: item, onClick: function (e) { if (item.menu) { navigate(item.menu); } @@ -196,7 +226,7 @@ function ContentContainer(props) { } } }, item.key)); case "popup": - return (_jsx(React.Fragment, { children: _jsx(item.component, { onClick: onClose }) }, item.key)); + return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)(item.component, { onClick: onClose }) }, item.key)); } })] }))); } diff --git a/packages/editor/dist/components/button.js b/packages/editor/dist/components/button.js index e87565c69..71eadcbe4 100644 --- a/packages/editor/dist/components/button.js +++ b/packages/editor/dist/components/button.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -9,13 +10,15 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; -import { jsx as _jsx } from "react/jsx-runtime"; -import { forwardRef, useCallback, useRef } from "react"; -import { useEffect } from "react"; -import { Button as RebassButton } from "rebass"; -export var Button = forwardRef(function (props, forwardedRef) { - var buttonRef = useRef(); - useEffect(function () { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.Button = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var react_1 = require("react"); +var react_2 = require("react"); +var rebass_1 = require("rebass"); +exports.Button = (0, react_1.forwardRef)(function (props, forwardedRef) { + var buttonRef = (0, react_1.useRef)(); + (0, react_2.useEffect)(function () { if (!buttonRef.current) return; buttonRef.current.addEventListener("mousedown", onMouseDown, { @@ -29,10 +32,10 @@ export var Button = forwardRef(function (props, forwardedRef) { }); }; }, []); - var onMouseDown = useCallback(function (e) { + var onMouseDown = (0, react_1.useCallback)(function (e) { e.preventDefault(); }, []); - return (_jsx(RebassButton, __assign({}, props, { ref: function (ref) { + return ((0, jsx_runtime_1.jsx)(rebass_1.Button, __assign({}, props, { ref: function (ref) { buttonRef.current = ref; if (typeof forwardedRef === "function") forwardedRef(ref); diff --git a/packages/editor/dist/components/inlineinput/index.js b/packages/editor/dist/components/inlineinput/index.js index 9da0383b7..d0bfa349e 100644 --- a/packages/editor/dist/components/inlineinput/index.js +++ b/packages/editor/dist/components/inlineinput/index.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -20,18 +21,21 @@ var __rest = (this && this.__rest) || function (s, e) { } return t; }; -import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; -import { Input } from "@rebass/forms"; -import { Flex, Text } from "rebass"; -export function InlineInput(props) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.InlineInput = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var forms_1 = require("@rebass/forms"); +var rebass_1 = require("rebass"); +function InlineInput(props) { var label = props.label, containerProps = props.containerProps, sx = props.sx, inputProps = __rest(props, ["label", "containerProps", "sx"]); - return (_jsxs(Flex, __assign({}, containerProps, { sx: __assign(__assign({ flex: 1 }, containerProps === null || containerProps === void 0 ? void 0 : containerProps.sx), { outline: "1px solid var(--border)", p: 2, borderRadius: "default", ":focus-within": { + return ((0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({}, containerProps, { sx: __assign(__assign({ flex: 1 }, containerProps === null || containerProps === void 0 ? void 0 : containerProps.sx), { outline: "1px solid var(--border)", p: 2, borderRadius: "default", ":focus-within": { outlineColor: "primary", outlineWidth: "1.8px", - } }) }, { children: [_jsx(Input, __assign({ variant: "clean", sx: __assign(__assign({}, sx), { p: 0 }) }, inputProps)), _jsx(Text, __assign({ variant: "body", sx: { + } }) }, { children: [(0, jsx_runtime_1.jsx)(forms_1.Input, __assign({ variant: "clean", sx: __assign(__assign({}, sx), { p: 0 }) }, inputProps)), (0, jsx_runtime_1.jsx)(rebass_1.Text, __assign({ variant: "body", sx: { flexShrink: 0, color: "fontTertiary", borderLeft: "1px solid var(--border)", pl: 1, } }, { children: label }))] }))); } +exports.InlineInput = InlineInput; diff --git a/packages/editor/dist/components/menu/index.js b/packages/editor/dist/components/menu/index.js index 9ab865fe3..551201750 100644 --- a/packages/editor/dist/components/menu/index.js +++ b/packages/editor/dist/components/menu/index.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -20,18 +21,20 @@ var __rest = (this && this.__rest) || function (s, e) { } return t; }; -import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; -import { useCallback, useRef, useEffect, } from "react"; -import { Box, Flex, Text } from "rebass"; -import { getPosition } from "../../utils/position"; -import { useFocus } from "./use-focus"; -import { MenuSeparator } from "./menu-separator"; -import { MenuButton } from "./menu-button"; -import { PopupPresenter as _PopupPresenter, } from "../popup-presenter"; -export function Menu(props) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.MenuPresenter = exports.Menu = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var react_1 = require("react"); +var rebass_1 = require("rebass"); +var position_1 = require("../../utils/position"); +var usefocus_1 = require("./usefocus"); +var menuseparator_1 = require("./menuseparator"); +var menubutton_1 = require("./menubutton"); +var popuppresenter_1 = require("../popuppresenter"); +function Menu(props) { var _a = props.items, items = _a === void 0 ? [] : _a, title = props.title, onClose = props.onClose, containerProps = __rest(props, ["items", "title", "onClose"]); - var hoverTimeout = useRef(); - var onAction = useCallback(function (e, item) { + var hoverTimeout = (0, react_1.useRef)(); + var onAction = (0, react_1.useCallback)(function (e, item) { e === null || e === void 0 ? void 0 : e.stopPropagation(); if (item.onClick) { item.onClick(); @@ -39,14 +42,14 @@ export function Menu(props) { if (onClose) onClose(); }, [onClose]); - var _b = useFocus(items, function (e) { + var _b = (0, usefocus_1.useFocus)(items, function (e) { var item = items[focusIndex]; if (item) onAction(e, item); }, function () { return onClose(); }), focusIndex = _b.focusIndex, setFocusIndex = _b.setFocusIndex, isSubmenuOpen = _b.isSubmenuOpen, setIsSubmenuOpen = _b.setIsSubmenuOpen; var focusedItem = items[focusIndex]; - var subMenuRef = useRef(null); - useEffect(function () { + var subMenuRef = (0, react_1.useRef)(null); + (0, react_1.useEffect)(function () { var item = items[focusIndex]; if (!item || !subMenuRef.current) return; @@ -57,7 +60,7 @@ export function Menu(props) { subMenuRef.current.style.visibility = "hidden"; return; } - var _a = getPosition(subMenuRef.current, { + var _a = (0, position_1.getPosition)(subMenuRef.current, { // yOffset: menuItemElement.offsetHeight, target: menuItemElement, location: "right", @@ -66,14 +69,14 @@ export function Menu(props) { 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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MenuContainer, __assign({}, containerProps, { children: items.map(function (item, index) { if (item.isHidden) return null; switch (item.type) { case "separator": - return _jsx(MenuSeparator, {}, item.key); + return (0, jsx_runtime_1.jsx)(menuseparator_1.MenuSeparator, {}, item.key); case "button": - return (_jsx(MenuButton, { item: item, onClick: function (e) { + return ((0, jsx_runtime_1.jsx)(menubutton_1.MenuButton, { item: item, onClick: function (e) { if (item.menu) { setFocusIndex(index); setIsSubmenuOpen(true); @@ -99,15 +102,16 @@ export function Menu(props) { clearTimeout(hoverTimeout.current); } }, item.key)); case "popup": - return _jsx(item.component, { onClick: function (e) { return onAction(e, item); } }); + return (0, jsx_runtime_1.jsx)(item.component, { onClick: function (e) { return onAction(e, item); } }); } - }) })), (focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.type) === "button" && (focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.menu) && isSubmenuOpen && (_jsx(Flex, __assign({ ref: subMenuRef, style: { visibility: "hidden" }, sx: { + }) })), (focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.type) === "button" && (focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.menu) && isSubmenuOpen && ((0, jsx_runtime_1.jsx)(rebass_1.Flex, __assign({ ref: subMenuRef, style: { visibility: "hidden" }, sx: { position: "absolute", - } }, { children: _jsx(Menu, { items: focusedItem.menu.items, onClose: onClose }) })))] })); + } }, { children: (0, jsx_runtime_1.jsx)(Menu, { items: focusedItem.menu.items, onClose: onClose }) })))] })); } +exports.Menu = Menu; 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)", minWidth: 220 }, sx) }, flexProps, { children: [title && (_jsx(Text, __assign({ sx: { + return ((0, jsx_runtime_1.jsxs)(rebass_1.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)", minWidth: 220 }, sx) }, flexProps, { children: [title && ((0, jsx_runtime_1.jsx)(rebass_1.Text, __assign({ sx: { fontFamily: "body", fontSize: "subtitle", color: "primary", @@ -118,7 +122,8 @@ function MenuContainer(props) { wordWrap: "break-word", } }, { children: title }))), children] }))); } -export function MenuPresenter(props) { +function MenuPresenter(props) { var _a = props.items, items = _a === void 0 ? [] : _a, restProps = __rest(props, ["items"]); - return (_jsx(_PopupPresenter, __assign({}, restProps, { children: props.children ? props.children : _jsx(Menu, __assign({ items: items }, restProps)) }))); + return ((0, jsx_runtime_1.jsx)(popuppresenter_1.PopupPresenter, __assign({}, restProps, { children: props.children ? props.children : (0, jsx_runtime_1.jsx)(Menu, __assign({ items: items }, restProps)) }))); } +exports.MenuPresenter = MenuPresenter; diff --git a/packages/editor/dist/components/menu/menubutton.js b/packages/editor/dist/components/menu/menubutton.js index c9537ab55..5fe8caa80 100644 --- a/packages/editor/dist/components/menu/menubutton.js +++ b/packages/editor/dist/components/menu/menubutton.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -9,20 +10,22 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; -import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; -import { useRef } from "react"; -import { Flex, Text } from "rebass"; -import { Icon } from "../../toolbar/components/icon"; -import { Icons } from "../../toolbar/icons"; -import { useToolbarLocation } from "../../toolbar/stores/toolbar-store"; -import { Button } from "../button"; -export function MenuButton(props) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.MenuButton = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var react_1 = require("react"); +var rebass_1 = require("rebass"); +var icon_1 = require("../../toolbar/components/icon"); +var icons_1 = require("../../toolbar/icons"); +var toolbarstore_1 = require("../../toolbar/stores/toolbarstore"); +var button_1 = require("../button"); +function MenuButton(props) { var item = props.item, isFocused = props.isFocused, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, onClick = props.onClick; var title = item.title, key = item.key, icon = item.icon, tooltip = item.tooltip, isDisabled = item.isDisabled, isChecked = item.isChecked, menu = item.menu, modifier = item.modifier; - var itemRef = useRef(null); - var toolbarLocation = useToolbarLocation(); + var itemRef = (0, react_1.useRef)(null); + var toolbarLocation = (0, toolbarstore_1.useToolbarLocation)(); var isBottom = toolbarLocation === "bottom"; - return (_jsx(Flex, __assign({ as: "li", sx: { flexShrink: 0, flexDirection: "column" }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, { children: _jsxs(Button, __assign({ id: key, "data-test-id": "MenuButton-".concat(key), ref: itemRef, tabIndex: -1, variant: "menuitem", title: tooltip, disabled: isDisabled, onClick: onClick, sx: { + return ((0, jsx_runtime_1.jsx)(rebass_1.Flex, __assign({ as: "li", sx: { flexShrink: 0, flexDirection: "column" }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, { children: (0, jsx_runtime_1.jsxs)(button_1.Button, __assign({ id: key, "data-test-id": "MenuButton-".concat(key), ref: itemRef, tabIndex: -1, variant: "menuitem", title: tooltip, disabled: isDisabled, onClick: onClick, sx: { bg: isFocused && !isBottom ? "hover" : "transparent", display: "flex", alignItems: "center", @@ -30,9 +33,10 @@ export function MenuButton(props) { ":hover": { bg: isBottom ? "transparent" : "hover", }, - } }, { children: [_jsxs(Flex, { children: [icon && (_jsx(Icon, { path: Icons[icon], color: "text", size: "medium", sx: { mr: 2 } })), _jsx(Text, __assign({ as: "span", variant: "body", sx: { fontSize: "inherit" } }, { children: title }))] }), isChecked || menu || modifier ? (_jsxs(Flex, __assign({ sx: { ml: 4 } }, { children: [isChecked && _jsx(Icon, { path: Icons.check, size: 14 }), menu && _jsx(Icon, { path: Icons.chevronRight, size: 14 }), modifier && (_jsx(Text, __assign({ as: "span", sx: { + } }, { children: [(0, jsx_runtime_1.jsxs)(rebass_1.Flex, { children: [icon && ((0, jsx_runtime_1.jsx)(icon_1.Icon, { path: icons_1.Icons[icon], color: "text", size: "medium", sx: { mr: 2 } })), (0, jsx_runtime_1.jsx)(rebass_1.Text, __assign({ as: "span", variant: "body", sx: { fontSize: "inherit" } }, { children: title }))] }), isChecked || menu || modifier ? ((0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ sx: { ml: 4 } }, { children: [isChecked && (0, jsx_runtime_1.jsx)(icon_1.Icon, { path: icons_1.Icons.check, size: 14 }), menu && (0, jsx_runtime_1.jsx)(icon_1.Icon, { path: icons_1.Icons.chevronRight, size: 14 }), modifier && ((0, jsx_runtime_1.jsx)(rebass_1.Text, __assign({ as: "span", sx: { fontFamily: "body", fontSize: "menu", color: "fontTertiary", } }, { children: modifier })))] }))) : null] }), key) }))); } +exports.MenuButton = MenuButton; diff --git a/packages/editor/dist/components/menu/menuseparator.js b/packages/editor/dist/components/menu/menuseparator.js index 8e610c345..f664ce2b7 100644 --- a/packages/editor/dist/components/menu/menuseparator.js +++ b/packages/editor/dist/components/menu/menuseparator.js @@ -1,7 +1,10 @@ -import { jsx as _jsx } from "react/jsx-runtime"; -import { Box } from "rebass"; -export function MenuSeparator() { - return (_jsx(Box, { as: "li", sx: { +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.MenuSeparator = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var rebass_1 = require("rebass"); +function MenuSeparator() { + return ((0, jsx_runtime_1.jsx)(rebass_1.Box, { as: "li", sx: { width: "95%", height: "0.5px", bg: "border", @@ -9,3 +12,4 @@ export function MenuSeparator() { alignSelf: "center", } })); } +exports.MenuSeparator = MenuSeparator; diff --git a/packages/editor/dist/components/menu/types.js b/packages/editor/dist/components/menu/types.js index cb0ff5c3b..c8ad2e549 100644 --- a/packages/editor/dist/components/menu/types.js +++ b/packages/editor/dist/components/menu/types.js @@ -1 +1,2 @@ -export {}; +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); diff --git a/packages/editor/dist/components/menu/usefocus.js b/packages/editor/dist/components/menu/usefocus.js index 452c61c97..47fe8cdb8 100644 --- a/packages/editor/dist/components/menu/usefocus.js +++ b/packages/editor/dist/components/menu/usefocus.js @@ -1,3 +1,4 @@ +"use strict"; var __read = (this && this.__read) || function (o, n) { var m = typeof Symbol === "function" && o[Symbol.iterator]; if (!m) return o; @@ -14,11 +15,13 @@ var __read = (this && this.__read) || function (o, n) { } return ar; }; -import { useCallback, useEffect, useState } from "react"; -export function useFocus(items, onAction, onClose) { - var _a = __read(useState(-1), 2), focusIndex = _a[0], setFocusIndex = _a[1]; - var _b = __read(useState(false), 2), isSubmenuOpen = _b[0], setIsSubmenuOpen = _b[1]; - var moveItemIntoView = useCallback(function (index) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.useFocus = void 0; +var react_1 = require("react"); +function useFocus(items, onAction, onClose) { + var _a = __read((0, react_1.useState)(-1), 2), focusIndex = _a[0], setFocusIndex = _a[1]; + var _b = __read((0, react_1.useState)(false), 2), isSubmenuOpen = _b[0], setIsSubmenuOpen = _b[1]; + var moveItemIntoView = (0, react_1.useCallback)(function (index) { var item = items[index]; if (!item) return; @@ -29,7 +32,7 @@ export function useFocus(items, onAction, onClose) { behavior: "auto", }); }, [items]); - var onKeyDown = useCallback(function (e) { + var onKeyDown = (0, react_1.useCallback)(function (e) { var as = function (i) { return items[i]; }; var isSeperator = function (i) { var _a, _b; @@ -88,7 +91,7 @@ export function useFocus(items, onAction, onClose) { return nextIndex; }); }, [items, isSubmenuOpen, moveItemIntoView, onAction]); - useEffect(function () { + (0, react_1.useEffect)(function () { window.addEventListener("keydown", onKeyDown); return function () { window.removeEventListener("keydown", onKeyDown); @@ -96,3 +99,4 @@ export function useFocus(items, onAction, onClose) { }, [onKeyDown]); return { focusIndex: focusIndex, setFocusIndex: setFocusIndex, isSubmenuOpen: isSubmenuOpen, setIsSubmenuOpen: setIsSubmenuOpen }; } +exports.useFocus = useFocus; diff --git a/packages/editor/dist/components/popuppresenter/index.js b/packages/editor/dist/components/popuppresenter/index.js index 60d2b98d6..b60d0d5cd 100644 --- a/packages/editor/dist/components/popuppresenter/index.js +++ b/packages/editor/dist/components/popuppresenter/index.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -20,34 +21,39 @@ var __rest = (this && this.__rest) || function (s, e) { } return t; }; -import { jsx as _jsx } from "react/jsx-runtime"; -import { useCallback, useRef, useEffect, } from "react"; -import { Box } from "rebass"; -import { getPosition } from "../../utils/position"; -import Modal from "react-modal"; -import ReactDOM from "react-dom"; -import { ThemeProvider } from "emotion-theming"; -import { getPopupContainer, getToolbarElement } from "../../toolbar/utils/dom"; -import { useIsMobile, useToolbarStore, } from "../../toolbar/stores/toolbar-store"; -import { EditorContext, usePopupRenderer, } from "./popuprenderer"; -import { ResponsivePresenter } from "../responsive"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.showPopup = exports.PopupWrapper = exports.PopupPresenter = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var react_1 = require("react"); +var rebass_1 = require("rebass"); +var position_1 = require("../../utils/position"); +var react_modal_1 = __importDefault(require("react-modal")); +var react_dom_1 = __importDefault(require("react-dom")); +var emotion_theming_1 = require("emotion-theming"); +var dom_1 = require("../../toolbar/utils/dom"); +var toolbarstore_1 = require("../../toolbar/stores/toolbarstore"); +var popuprenderer_1 = require("./popuprenderer"); +var responsive_1 = require("../responsive"); function _PopupPresenter(props) { var isOpen = props.isOpen, position = props.position, onClose = props.onClose, _a = props.blocking, blocking = _a === void 0 ? true : _a, _b = props.focusOnRender, focusOnRender = _b === void 0 ? true : _b, children = props.children; - var isMobile = useIsMobile(); - var contentRef = useRef(); - var observerRef = useRef(); - var repositionPopup = useCallback(function () { + var isMobile = (0, toolbarstore_1.useIsMobile)(); + var contentRef = (0, react_1.useRef)(); + var observerRef = (0, react_1.useRef)(); + var repositionPopup = (0, react_1.useCallback)(function () { if (!contentRef.current || !position) return; var popup = contentRef.current; - var popupPosition = getPosition(popup, position); + var popupPosition = (0, position_1.getPosition)(popup, position); popup.style.top = popupPosition.top + "px"; popup.style.left = popupPosition.left + "px"; }, [position]); - useEffect(function () { + (0, react_1.useEffect)(function () { repositionPopup(); }, [position]); - useEffect(function () { + (0, react_1.useEffect)(function () { function onWindowResize() { repositionPopup(); } @@ -56,7 +62,7 @@ function _PopupPresenter(props) { window.removeEventListener("resize", onWindowResize); }; }, []); - var attachMoveHandlers = useCallback(function () { + var attachMoveHandlers = (0, react_1.useCallback)(function () { if (!contentRef.current || !isOpen) return; var movableBar = contentRef.current.querySelector(".movable"); @@ -85,7 +91,7 @@ function _PopupPresenter(props) { movableBar.addEventListener("mousedown", mouseDown); window.addEventListener("mouseup", mouseUp); }, [isOpen]); - var handleResize = useCallback(function () { + var handleResize = (0, react_1.useCallback)(function () { var popup = contentRef.current; if (!popup) return; @@ -111,17 +117,17 @@ function _PopupPresenter(props) { }); observerRef.current.observe(popup, { box: "border-box" }); }, [isMobile]); - return (_jsx(Modal, __assign({ contentRef: function (ref) { return (contentRef.current = ref); }, className: "popup-presenter", role: "menu", isOpen: isOpen, appElement: document.body, shouldCloseOnEsc: true, shouldReturnFocusAfterClose: true, shouldCloseOnOverlayClick: true, shouldFocusAfterRender: focusOnRender, ariaHideApp: blocking, preventScroll: blocking, onRequestClose: onClose, portalClassName: "popup-presenter-portal", onAfterOpen: function (obj) { + return ((0, jsx_runtime_1.jsx)(react_modal_1.default, __assign({ contentRef: function (ref) { return (contentRef.current = ref); }, className: "popup-presenter", role: "menu", isOpen: isOpen, appElement: document.body, shouldCloseOnEsc: true, shouldReturnFocusAfterClose: true, shouldCloseOnOverlayClick: true, shouldFocusAfterRender: focusOnRender, ariaHideApp: blocking, preventScroll: blocking, onRequestClose: onClose, portalClassName: "popup-presenter-portal", onAfterOpen: function (obj) { if (!obj || !position) return; repositionPopup(); handleResize(); attachMoveHandlers(); }, onAfterClose: function () { var _a; return (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }, overlayElement: function (props, contentEl) { - return (_jsx(Box, __assign({}, props, { + return ((0, jsx_runtime_1.jsx)(rebass_1.Box, __assign({}, props, { //@ts-ignore style: __assign(__assign({}, props.style), { position: !blocking ? "initial" : "fixed", zIndex: 1000, backgroundColor: !blocking ? "transparent" : "unset" }) }, { children: contentEl }))); - }, contentElement: function (props, children) { return (_jsx(Box, __assign({}, props, { style: {}, + }, contentElement: function (props, children) { return ((0, jsx_runtime_1.jsx)(rebass_1.Box, __assign({}, props, { style: {}, // TODO onMouseDown={(e) => { // console.log(e); // }} @@ -147,66 +153,67 @@ function _PopupPresenter(props) { }, } }, { children: children }))); } -export function PopupPresenter(props) { +function PopupPresenter(props) { // HACK: we don't want to render the popup presenter for no reason // including it's effects etc. so we just wrap it and return null // if the popup is closed. if (!props.isOpen) return null; - return _jsx(_PopupPresenter, __assign({}, props)); + return (0, jsx_runtime_1.jsx)(_PopupPresenter, __assign({}, props)); } -export function PopupWrapper(props) { +exports.PopupPresenter = PopupPresenter; +function PopupWrapper(props) { var id = props.id, group = props.group, position = props.position, renderPopup = props.renderPopup, isOpen = props.isOpen, onClosed = props.onClosed, autoCloseOnUnmount = props.autoCloseOnUnmount, presenterProps = __rest(props, ["id", "group", "position", "renderPopup", "isOpen", "onClosed", "autoCloseOnUnmount"]); - var PopupRenderer = usePopupRenderer(); - var isPopupOpen = useToolbarStore(function (store) { return !!store.openedPopups[id]; }); - var openPopup = useToolbarStore(function (store) { return store.openPopup; }); - var closePopup = useToolbarStore(function (store) { return store.closePopup; }); - var closePopupGroup = useToolbarStore(function (store) { return store.closePopupGroup; }); - var isBottom = useToolbarStore(function (store) { return store.toolbarLocation === "bottom"; }); + var PopupRenderer = (0, popuprenderer_1.usePopupRenderer)(); + var isPopupOpen = (0, toolbarstore_1.useToolbarStore)(function (store) { return !!store.openedPopups[id]; }); + var openPopup = (0, toolbarstore_1.useToolbarStore)(function (store) { return store.openPopup; }); + var closePopup = (0, toolbarstore_1.useToolbarStore)(function (store) { return store.closePopup; }); + var closePopupGroup = (0, toolbarstore_1.useToolbarStore)(function (store) { return store.closePopupGroup; }); + var isBottom = (0, toolbarstore_1.useToolbarStore)(function (store) { return store.toolbarLocation === "bottom"; }); if (isBottom) group = "popup"; - useEffect(function () { + (0, react_1.useEffect)(function () { if (isOpen) openPopup({ id: id, group: group }); else closePopup(id); }, [isOpen, id, group, openPopup, closePopup]); - useEffect(function () { + (0, react_1.useEffect)(function () { if (!autoCloseOnUnmount) return; return function () { PopupRenderer === null || PopupRenderer === void 0 ? void 0 : PopupRenderer.closePopup(id); }; }, [autoCloseOnUnmount, id]); - useEffect(function () { + (0, react_1.useEffect)(function () { if (!isPopupOpen) onClosed === null || onClosed === void 0 ? void 0 : onClosed(); }, [isPopupOpen]); - useEffect(function () { + (0, react_1.useEffect)(function () { if (isPopupOpen) { closePopupGroup(group, [id]); } }, [onClosed, isPopupOpen, closePopupGroup, id, group]); - useEffect(function () { + (0, react_1.useEffect)(function () { if (!isOpen) closePopup(id); }, [isOpen, id, group, closePopup]); - useEffect(function () { + (0, react_1.useEffect)(function () { if (PopupRenderer && isPopupOpen) { PopupRenderer.openPopup(id, function Popup(_a) { var id = _a.id; - var isPopupOpen = useToolbarStore(function (store) { return !!store.openedPopups[id]; }); - useEffect(function () { + var isPopupOpen = (0, toolbarstore_1.useToolbarStore)(function (store) { return !!store.openedPopups[id]; }); + (0, react_1.useEffect)(function () { if (!isPopupOpen) { PopupRenderer.closePopup(id); } }, [isPopupOpen]); - return (_jsx(PopupPresenter, __assign({ isOpen: isPopupOpen, onClose: function () { return closePopup(id); }, position: position, blocking: true, focusOnRender: true }, presenterProps, { children: _jsx(Box, __assign({ sx: { + return ((0, jsx_runtime_1.jsx)(PopupPresenter, __assign({ isOpen: isPopupOpen, onClose: function () { return closePopup(id); }, position: position, blocking: true, focusOnRender: true }, presenterProps, { children: (0, jsx_runtime_1.jsx)(rebass_1.Box, __assign({ sx: { boxShadow: "menu", borderRadius: "default", overflow: "hidden", // width, - } }, { children: _jsx(EditorContext.Consumer, { children: function () { + } }, { children: (0, jsx_runtime_1.jsx)(popuprenderer_1.EditorContext.Consumer, { children: function () { return renderPopup(function () { return PopupRenderer.closePopup(id); }); } }) })) }), id)); }); @@ -214,17 +221,19 @@ export function PopupWrapper(props) { }, [PopupRenderer, isPopupOpen]); return null; } -export function showPopup(options) { +exports.PopupWrapper = PopupWrapper; +function showPopup(options) { var theme = options.theme, popup = options.popup, props = __rest(options, ["theme", "popup"]); function hide() { - ReactDOM.unmountComponentAtNode(getPopupContainer()); + react_dom_1.default.unmountComponentAtNode((0, dom_1.getPopupContainer)()); } - ReactDOM.render(_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(ResponsivePresenter, __assign({ isOpen: true, onClose: hide, position: { - target: getToolbarElement(), + react_dom_1.default.render((0, jsx_runtime_1.jsx)(emotion_theming_1.ThemeProvider, __assign({ theme: theme }, { children: (0, jsx_runtime_1.jsx)(responsive_1.ResponsivePresenter, __assign({ isOpen: true, onClose: hide, position: { + target: (0, dom_1.getToolbarElement)(), isTargetAbsolute: true, location: "below", align: "end", yOffset: 10, - }, blocking: true, focusOnRender: true }, props, { children: popup(hide) })) })), getPopupContainer()); + }, blocking: true, focusOnRender: true }, props, { children: popup(hide) })) })), (0, dom_1.getPopupContainer)()); return hide; } +exports.showPopup = showPopup; diff --git a/packages/editor/dist/components/popuppresenter/popuprenderer.js b/packages/editor/dist/components/popuppresenter/popuprenderer.js index d40b6f9dd..f13b717ba 100644 --- a/packages/editor/dist/components/popuppresenter/popuprenderer.js +++ b/packages/editor/dist/components/popuppresenter/popuprenderer.js @@ -1,3 +1,4 @@ +"use strict"; var __extends = (this && this.__extends) || (function () { var extendStatics = function (d, b) { extendStatics = Object.setPrototypeOf || @@ -24,6 +25,29 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { + Object.defineProperty(o, "default", { enumerable: true, value: v }); +}) : function(o, v) { + o["default"] = v; +}); +var __importStar = (this && this.__importStar) || function (mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); + __setModuleDefault(result, mod); + return result; +}; var __read = (this && this.__read) || function (o, n) { var m = typeof Symbol === "function" && o[Symbol.iterator]; if (!m) return o; @@ -49,10 +73,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) { } return to.concat(ar || Array.prototype.slice.call(from)); }; -import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; -import React, { useContext } from "react"; -export var PopupRendererContext = React.createContext(null); -export var EditorContext = React.createContext(null); +Object.defineProperty(exports, "__esModule", { value: true }); +exports.useEditorContext = exports.usePopupRenderer = exports.PopupRenderer = exports.EditorContext = exports.PopupRendererContext = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var react_1 = __importStar(require("react")); +exports.PopupRendererContext = react_1.default.createContext(null); +exports.EditorContext = react_1.default.createContext(null); var PopupRenderer = /** @class */ (function (_super) { __extends(PopupRenderer, _super); function PopupRenderer() { @@ -85,17 +111,19 @@ var PopupRenderer = /** @class */ (function (_super) { return _this; } PopupRenderer.prototype.render = function () { - return (_jsxs(PopupRendererContext.Provider, __assign({ value: this }, { children: [this.props.children, _jsxs(EditorContext.Provider, __assign({ value: this.props.editor }, { children: [this.state.popups.map(function (_a) { + return ((0, jsx_runtime_1.jsxs)(exports.PopupRendererContext.Provider, __assign({ value: this }, { children: [this.props.children, (0, jsx_runtime_1.jsxs)(exports.EditorContext.Provider, __assign({ value: this.props.editor }, { children: [this.state.popups.map(function (_a) { var id = _a.id, Popup = _a.popup; - return _jsx(Popup, { id: id }, id); - }), _jsx("div", { id: "popup-container" })] }))] }))); + return (0, jsx_runtime_1.jsx)(Popup, { id: id }, id); + }), (0, jsx_runtime_1.jsx)("div", { id: "popup-container" })] }))] }))); }; return PopupRenderer; -}(React.Component)); -export { PopupRenderer }; -export function usePopupRenderer() { - return useContext(PopupRendererContext); +}(react_1.default.Component)); +exports.PopupRenderer = PopupRenderer; +function usePopupRenderer() { + return (0, react_1.useContext)(exports.PopupRendererContext); } -export function useEditorContext() { - return useContext(EditorContext); +exports.usePopupRenderer = usePopupRenderer; +function useEditorContext() { + return (0, react_1.useContext)(exports.EditorContext); } +exports.useEditorContext = useEditorContext; diff --git a/packages/editor/dist/components/responsive/index.js b/packages/editor/dist/components/responsive/index.js index 23b6fa224..d490514a8 100644 --- a/packages/editor/dist/components/responsive/index.js +++ b/packages/editor/dist/components/responsive/index.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -20,30 +21,36 @@ var __rest = (this && this.__rest) || function (s, e) { } return t; }; -import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime"; -import { useIsMobile, } from "../../toolbar/stores/toolbar-store"; -import { ActionSheetPresenter, } from "../action-sheet"; -import { MenuPresenter } from "../menu"; -export function ResponsiveContainer(props) { - var isMobile = useIsMobile(); +Object.defineProperty(exports, "__esModule", { value: true }); +exports.ResponsivePresenter = exports.MobileOnly = exports.DesktopOnly = exports.ResponsiveContainer = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var toolbarstore_1 = require("../../toolbar/stores/toolbarstore"); +var actionsheet_1 = require("../actionsheet"); +var menu_1 = require("../menu"); +function ResponsiveContainer(props) { + var isMobile = (0, toolbarstore_1.useIsMobile)(); if (isMobile) return props.mobile || null; else return props.desktop || null; } -export function DesktopOnly(props) { - return _jsx(ResponsiveContainer, { desktop: _jsx(_Fragment, { children: props.children }) }); +exports.ResponsiveContainer = ResponsiveContainer; +function DesktopOnly(props) { + return (0, jsx_runtime_1.jsx)(ResponsiveContainer, { desktop: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children }) }); } -export function MobileOnly(props) { - return _jsx(ResponsiveContainer, { mobile: _jsx(_Fragment, { children: props.children }) }); +exports.DesktopOnly = DesktopOnly; +function MobileOnly(props) { + return (0, jsx_runtime_1.jsx)(ResponsiveContainer, { mobile: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children }) }); } -export function ResponsivePresenter(props) { +exports.MobileOnly = MobileOnly; +function ResponsivePresenter(props) { var _a = props.mobile, mobile = _a === void 0 ? "menu" : _a, _b = props.desktop, desktop = _b === void 0 ? "menu" : _b, restProps = __rest(props, ["mobile", "desktop"]); - var isMobile = useIsMobile(); + var isMobile = (0, toolbarstore_1.useIsMobile)(); if (isMobile && mobile === "sheet") - return _jsx(ActionSheetPresenter, __assign({}, restProps)); + return (0, jsx_runtime_1.jsx)(actionsheet_1.ActionSheetPresenter, __assign({}, restProps)); else if (mobile === "menu" || desktop === "menu") - return _jsx(MenuPresenter, __assign({}, restProps)); + return (0, jsx_runtime_1.jsx)(menu_1.MenuPresenter, __assign({}, restProps)); else - return props.isOpen ? _jsx(_Fragment, { children: props.children }) : null; + return props.isOpen ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children }) : null; } +exports.ResponsivePresenter = ResponsivePresenter; diff --git a/packages/editor/dist/components/tabs/index.js b/packages/editor/dist/components/tabs/index.js index 941466ad4..fd202ee67 100644 --- a/packages/editor/dist/components/tabs/index.js +++ b/packages/editor/dist/components/tabs/index.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -9,6 +10,29 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { + Object.defineProperty(o, "default", { enumerable: true, value: v }); +}) : function(o, v) { + o["default"] = v; +}); +var __importStar = (this && this.__importStar) || function (mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); + __setModuleDefault(result, mod); + return result; +}; var __read = (this && this.__read) || function (o, n) { var m = typeof Symbol === "function" && o[Symbol.iterator]; if (!m) return o; @@ -25,24 +49,27 @@ var __read = (this && this.__read) || function (o, n) { } return ar; }; -import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; -import React, { Children, useMemo, useState } from "react"; -import { Button, Flex } from "rebass"; -export function Tab(props) { - return _jsx(_Fragment, { children: props.children }); +Object.defineProperty(exports, "__esModule", { value: true }); +exports.Tabs = exports.Tab = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var react_1 = __importStar(require("react")); +var rebass_1 = require("rebass"); +function Tab(props) { + return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children }); } -export function Tabs(props) { +exports.Tab = Tab; +function Tabs(props) { var activeIndex = props.activeIndex, children = props.children, containerProps = props.containerProps, onTabChanged = props.onTabChanged; - var _a = __read(useState(activeIndex || 0), 2), activeTab = _a[0], setActiveTab = _a[1]; - var tabs = useMemo(function () { - return Children.map(children, function (child) { - if (React.isValidElement(child)) + var _a = __read((0, react_1.useState)(activeIndex || 0), 2), activeTab = _a[0], setActiveTab = _a[1]; + var tabs = (0, react_1.useMemo)(function () { + return react_1.Children.map(children, function (child) { + if (react_1.default.isValidElement(child)) return { title: child.props.title, component: child }; }); }, [children]); - return (_jsxs(Flex, __assign({ sx: { flexDirection: "column" } }, { children: [_jsx(Flex, __assign({ sx: { + return ((0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ sx: { flexDirection: "column" } }, { children: [(0, jsx_runtime_1.jsx)(rebass_1.Flex, __assign({ sx: { mb: 1, - } }, { children: tabs === null || tabs === void 0 ? void 0 : tabs.map(function (tab, index) { return (_jsx(Button, __assign({ sx: { + } }, { children: tabs === null || tabs === void 0 ? void 0 : tabs.map(function (tab, index) { return ((0, jsx_runtime_1.jsx)(rebass_1.Button, __assign({ sx: { flex: 1, p: 0, py: 1, @@ -61,5 +88,6 @@ export function Tabs(props) { }, onClick: function () { setActiveTab(index); onTabChanged === null || onTabChanged === void 0 ? void 0 : onTabChanged(index); - } }, { children: tab.title }), index.toString())); }) })), _jsx(Flex, __assign({}, containerProps, { children: tabs && tabs[activeTab].component }))] }))); + } }, { children: tab.title }), index.toString())); }) })), (0, jsx_runtime_1.jsx)(rebass_1.Flex, __assign({}, containerProps, { children: tabs && tabs[activeTab].component }))] }))); } +exports.Tabs = Tabs; diff --git a/packages/editor/dist/extensions.js b/packages/editor/dist/extensions.js index 04757fdce..76b45dbd7 100644 --- a/packages/editor/dist/extensions.js +++ b/packages/editor/dist/extensions.js @@ -1,30 +1,32 @@ -import "@tiptap/extension-character-count"; -import "@tiptap/extension-placeholder"; -import "@tiptap/extension-underline"; -import "@tiptap/starter-kit"; -import "@tiptap/extension-text-align"; -import "@tiptap/extension-subscript"; -import "@tiptap/extension-superscript"; -import "./extensions/font-size"; -import "./extensions/text-direction"; -import "@tiptap/extension-text-style"; -import "@tiptap/extension-font-family"; -import "./extensions/bullet-list"; -import "./extensions/ordered-list"; -import "@tiptap/extension-highlight"; -import "@tiptap/extension-color"; -import "@tiptap/extension-table-row"; -import "./extensions/table-cell"; -import "@tiptap/extension-table-header"; -import "./extensions/image"; -import "./extensions/attachment"; -import "./extensions/task-list"; -import "./extensions/task-item"; -import "./extensions/drop-cursor"; -import "./extensions/search-replace"; -import "./extensions/embed"; -import "./extensions/code-block"; -import "./extensions/list-item"; -import "./extensions/outline-list"; -import "./extensions/outline-list-item"; -import "./extensions/table"; +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +require("@tiptap/extension-character-count"); +require("@tiptap/extension-placeholder"); +require("@tiptap/extension-underline"); +require("@tiptap/starter-kit"); +require("@tiptap/extension-text-align"); +require("@tiptap/extension-subscript"); +require("@tiptap/extension-superscript"); +require("./extensions/fontsize"); +require("./extensions/textdirection"); +require("@tiptap/extension-text-style"); +require("@tiptap/extension-font-family"); +require("./extensions/bulletlist"); +require("./extensions/orderedlist"); +require("@tiptap/extension-highlight"); +require("@tiptap/extension-color"); +require("@tiptap/extension-table-row"); +require("./extensions/tablecell"); +require("@tiptap/extension-table-header"); +require("./extensions/image"); +require("./extensions/attachment"); +require("./extensions/tasklist"); +require("./extensions/taskitem"); +require("./extensions/dropcursor"); +require("./extensions/searchreplace"); +require("./extensions/embed"); +require("./extensions/codeblock"); +require("./extensions/listitem"); +require("./extensions/outlinelist"); +require("./extensions/outlinelistitem"); +require("./extensions/table"); diff --git a/packages/editor/dist/extensions/attachment/attachment.js b/packages/editor/dist/extensions/attachment/attachment.js index 6b2e8a9fe..5f639d352 100644 --- a/packages/editor/dist/extensions/attachment/attachment.js +++ b/packages/editor/dist/extensions/attachment/attachment.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -20,10 +21,12 @@ var __values = (this && this.__values) || function(o) { }; throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined."); }; -import { Node, mergeAttributes, findChildren } from "@tiptap/core"; -import { createSelectionBasedNodeView } from "../react"; -import { AttachmentComponent } from "./component"; -export var AttachmentNode = Node.create({ +Object.defineProperty(exports, "__esModule", { value: true }); +exports.getDataAttribute = exports.AttachmentNode = void 0; +var core_1 = require("@tiptap/core"); +var react_1 = require("../react"); +var component_1 = require("./component"); +exports.AttachmentNode = core_1.Node.create({ name: "attachment", content: "inline*", marks: "", @@ -63,11 +66,11 @@ export var AttachmentNode = Node.create({ var HTMLAttributes = _a.HTMLAttributes; return [ "span", - mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), + (0, core_1.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes), ]; }, addNodeView: function () { - return createSelectionBasedNodeView(AttachmentComponent, { + return (0, react_1.createSelectionBasedNodeView)(component_1.AttachmentComponent, { shouldUpdate: function (_a, _b) { var prev = _a.attrs; var next = _b.attrs; @@ -110,7 +113,7 @@ export var AttachmentNode = Node.create({ var e_1, _b; var state = _a.state, tr = _a.tr, dispatch = _a.dispatch; var hash = options.hash, progress = options.progress, type = options.type; - var attachments = findChildren(state.doc, function (node) { + var attachments = (0, core_1.findChildren)(state.doc, function (node) { return (node.type.name === _this.name || node.type.name === "image") && node.attrs.hash === hash; }); @@ -149,7 +152,7 @@ export var AttachmentNode = Node.create({ // ]; // }, }); -export function getDataAttribute(name, def) { +function getDataAttribute(name, def) { return { default: def, parseHTML: function (element) { return element.dataset[name]; }, @@ -164,3 +167,4 @@ export function getDataAttribute(name, def) { }, }; } +exports.getDataAttribute = getDataAttribute; diff --git a/packages/editor/dist/extensions/attachment/component.js b/packages/editor/dist/extensions/attachment/component.js index 4bba46e18..89979d868 100644 --- a/packages/editor/dist/extensions/attachment/component.js +++ b/packages/editor/dist/extensions/attachment/component.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -9,19 +10,21 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; -import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; -import { Box, Text } from "rebass"; -import { useRef } from "react"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.AttachmentComponent = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var rebass_1 = require("rebass"); +var react_1 = require("react"); // import { MenuPresenter } from "../../components/menu/menu"; -import { Icon } from "../../toolbar/components/icon"; -import { Icons } from "../../toolbar/icons"; -import { ToolbarGroup } from "../../toolbar/components/toolbar-group"; -import { DesktopOnly } from "../../components/responsive"; -export function AttachmentComponent(props) { +var icon_1 = require("../../toolbar/components/icon"); +var icons_1 = require("../../toolbar/icons"); +var toolbargroup_1 = require("../../toolbar/components/toolbargroup"); +var responsive_1 = require("../../components/responsive"); +function AttachmentComponent(props) { var editor = props.editor, node = props.node, selected = props.selected; var _a = node.attrs, hash = _a.hash, filename = _a.filename, size = _a.size, progress = _a.progress; - var elementRef = useRef(); - return (_jsx(_Fragment, { children: _jsxs(Box, __assign({ ref: elementRef, as: "span", contentEditable: false, variant: "body", sx: { + var elementRef = (0, react_1.useRef)(); + return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(rebass_1.Box, __assign({ ref: elementRef, as: "span", contentEditable: false, variant: "body", sx: { display: "inline-flex", position: "relative", justifyContent: "center", @@ -37,18 +40,18 @@ export function AttachmentComponent(props) { ":hover": { bg: "hover", }, - }, title: filename }, { children: [_jsx(Icon, { path: Icons.attachment, size: 14 }), _jsx(Text, __assign({ as: "span", sx: { + }, title: filename }, { children: [(0, jsx_runtime_1.jsx)(icon_1.Icon, { path: icons_1.Icons.attachment, size: 14 }), (0, jsx_runtime_1.jsx)(rebass_1.Text, __assign({ as: "span", sx: { ml: "small", fontSize: "body", whiteSpace: "nowrap", textOverflow: "ellipsis", overflow: "hidden", - } }, { children: filename })), _jsx(Text, __assign({ as: "span", sx: { + } }, { children: filename })), (0, jsx_runtime_1.jsx)(rebass_1.Text, __assign({ as: "span", sx: { ml: 1, fontSize: "0.65rem", color: "fontTertiary", flexShrink: 0, - } }, { children: progress ? "".concat(progress, "%") : formatBytes(size) })), _jsx(DesktopOnly, { children: selected && (_jsx(ToolbarGroup, { editor: editor, tools: ["removeAttachment", "downloadAttachment"], sx: { + } }, { children: progress ? "".concat(progress, "%") : formatBytes(size) })), (0, jsx_runtime_1.jsx)(responsive_1.DesktopOnly, { children: selected && ((0, jsx_runtime_1.jsx)(toolbargroup_1.ToolbarGroup, { editor: editor, tools: ["removeAttachment", "downloadAttachment"], sx: { boxShadow: "menu", borderRadius: "default", bg: "background", @@ -56,6 +59,7 @@ export function AttachmentComponent(props) { top: -35, } })) })] })) })); } +exports.AttachmentComponent = AttachmentComponent; function formatBytes(bytes, decimals) { if (decimals === void 0) { decimals = 1; } if (bytes === 0) diff --git a/packages/editor/dist/extensions/attachment/index.js b/packages/editor/dist/extensions/attachment/index.js index 9f9f38860..13ebc3eca 100644 --- a/packages/editor/dist/extensions/attachment/index.js +++ b/packages/editor/dist/extensions/attachment/index.js @@ -1 +1,17 @@ -export * from "./attachment"; +"use strict"; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __exportStar = (this && this.__exportStar) || function(m, exports) { + for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); +}; +Object.defineProperty(exports, "__esModule", { value: true }); +__exportStar(require("./attachment"), exports); diff --git a/packages/editor/dist/extensions/bulletlist/bulletlist.js b/packages/editor/dist/extensions/bulletlist/bulletlist.js index c06e64356..6ee9c5669 100644 --- a/packages/editor/dist/extensions/bulletlist/bulletlist.js +++ b/packages/editor/dist/extensions/bulletlist/bulletlist.js @@ -1,5 +1,11 @@ -import TiptapBulletList from "@tiptap/extension-bullet-list"; -export var BulletList = TiptapBulletList.extend({ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.BulletList = void 0; +var extension_bullet_list_1 = __importDefault(require("@tiptap/extension-bullet-list")); +exports.BulletList = extension_bullet_list_1.default.extend({ addAttributes: function () { return { listType: { diff --git a/packages/editor/dist/extensions/bulletlist/index.js b/packages/editor/dist/extensions/bulletlist/index.js index c732326f2..ab6009d4e 100644 --- a/packages/editor/dist/extensions/bulletlist/index.js +++ b/packages/editor/dist/extensions/bulletlist/index.js @@ -1,3 +1,19 @@ -import { BulletList } from "./bullet-list"; -export * from "./bullet-list"; -export default BulletList; +"use strict"; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __exportStar = (this && this.__exportStar) || function(m, exports) { + for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); +}; +Object.defineProperty(exports, "__esModule", { value: true }); +var bulletlist_1 = require("./bulletlist"); +__exportStar(require("./bulletlist"), exports); +exports.default = bulletlist_1.BulletList; diff --git a/packages/editor/dist/extensions/codeblock/codeblock.js b/packages/editor/dist/extensions/codeblock/codeblock.js index a12aac476..446b156ee 100644 --- a/packages/editor/dist/extensions/codeblock/codeblock.js +++ b/packages/editor/dist/extensions/codeblock/codeblock.js @@ -1,3 +1,4 @@ +"use strict"; var __read = (this && this.__read) || function (o, n) { var m = typeof Symbol === "function" && o[Symbol.iterator]; if (!m) return o; @@ -34,20 +35,25 @@ var __values = (this && this.__values) || function(o) { }; throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined."); }; -import { findParentNodeClosestToPos } from "@tiptap/core"; -import { Node, textblockTypeInputRule, mergeAttributes } from "@tiptap/core"; -import { Plugin, PluginKey, TextSelection, } from "prosemirror-state"; -import { CodeblockComponent } from "./component"; -import { HighlighterPlugin } from "./highlighter"; -import { createNodeView } from "../react"; -import detectIndent from "detect-indent"; -import redent from "redent"; -import stripIndent from "strip-indent"; -export var backtickInputRegex = /^```([a-z]+)?[\s\n]$/; -export var tildeInputRegex = /^~~~([a-z]+)?[\s\n]$/; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.toCodeLines = exports.getLines = exports.toCaretPosition = exports.CodeBlock = exports.tildeInputRegex = exports.backtickInputRegex = void 0; +var core_1 = require("@tiptap/core"); +var core_2 = require("@tiptap/core"); +var prosemirror_state_1 = require("prosemirror-state"); +var component_1 = require("./component"); +var highlighter_1 = require("./highlighter"); +var react_1 = require("../react"); +var detect_indent_1 = __importDefault(require("detect-indent")); +var redent_1 = __importDefault(require("redent")); +var strip_indent_1 = __importDefault(require("strip-indent")); +exports.backtickInputRegex = /^```([a-z]+)?[\s\n]$/; +exports.tildeInputRegex = /^~~~([a-z]+)?[\s\n]$/; var ZERO_WIDTH_SPACE = "\u200b"; var NEWLINE = "\n"; -export var CodeBlock = Node.create({ +exports.CodeBlock = core_2.Node.create({ name: "codeblock", addOptions: function () { return { @@ -148,7 +154,7 @@ export var CodeBlock = Node.create({ var HTMLAttributes = _a.HTMLAttributes; return [ "pre", - mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), + (0, core_2.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes), ["code", {}, 0], ]; }, @@ -220,7 +226,7 @@ export var CodeBlock = Node.create({ if ($anchor.parent.type.name !== _this.name) { return false; } - var codeblock = findParentNodeClosestToPos($anchor, function (node) { return node.type.name === _this.type.name; }); + var codeblock = (0, core_1.findParentNodeClosestToPos)($anchor, function (node) { return node.type.name === _this.type.name; }); if (!codeblock) return false; return editor.commands.setTextSelection({ @@ -376,15 +382,15 @@ export var CodeBlock = Node.create({ }, addInputRules: function () { return [ - textblockTypeInputRule({ - find: backtickInputRegex, + (0, core_2.textblockTypeInputRule)({ + find: exports.backtickInputRegex, type: this.type, getAttributes: function (match) { return ({ language: match[1], }); }, }), - textblockTypeInputRule({ - find: tildeInputRegex, + (0, core_2.textblockTypeInputRule)({ + find: exports.tildeInputRegex, type: this.type, getAttributes: function (match) { return ({ language: match[1], @@ -397,8 +403,8 @@ export var CodeBlock = Node.create({ return [ // this plugin creates a code block for pasted content from VS Code // we can also detect the copied code language - new Plugin({ - key: new PluginKey("codeBlockVSCodeHandler"), + new prosemirror_state_1.Plugin({ + key: new prosemirror_state_1.PluginKey("codeBlockVSCodeHandler"), props: { handlePaste: function (view, event) { if (!event.clipboardData) { @@ -440,11 +446,11 @@ export var CodeBlock = Node.create({ }, }, }), - HighlighterPlugin({ name: this.name, defaultLanguage: "txt" }), + (0, highlighter_1.HighlighterPlugin)({ name: this.name, defaultLanguage: "txt" }), ]; }, addNodeView: function () { - return createNodeView(CodeblockComponent, { + return (0, react_1.createNodeView)(component_1.CodeblockComponent, { contentDOMFactory: function () { var content = document.createElement("div"); content.classList.add("node-content-wrapper"); @@ -463,10 +469,10 @@ export var CodeBlock = Node.create({ }); }, }); -export function toCaretPosition(selection, lines) { +function toCaretPosition(selection, lines) { var e_4, _a; var $from = selection.$from, $to = selection.$to, $head = selection.$head; - if ($from.parent.type.name !== CodeBlock.name) + if ($from.parent.type.name !== exports.CodeBlock.name) return; lines = lines || getLines($from.parent); try { @@ -493,10 +499,12 @@ export function toCaretPosition(selection, lines) { } return; } -export function getLines(node) { +exports.toCaretPosition = toCaretPosition; +function getLines(node) { var lines = node.attrs.lines; return lines || []; } +exports.getLines = getLines; function exitOnTripleEnter(editor, $from) { var isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2; var endsWithDoubleNewline = $from.parent.textContent.endsWith("\n\n"); @@ -537,7 +545,7 @@ function getNewline($from, options) { indentation: indent({ amount: indentLength, type: options.type }), }; } -export function toCodeLines(code, pos) { +function toCodeLines(code, pos) { var positions = []; var start = 0; var from = pos + 1; @@ -567,6 +575,7 @@ export function toCodeLines(code, pos) { } return positions; } +exports.toCodeLines = toCodeLines; function getSelectedLines(lines, selection) { var $from = selection.$from, $to = selection.$to; return lines.filter(function (line) { @@ -576,7 +585,7 @@ function getSelectedLines(lines, selection) { }); } function parseIndentation(node) { - if (node.type.name !== CodeBlock.name) + if (node.type.name !== exports.CodeBlock.name) return undefined; var _a = node.attrs, indentType = _a.indentType, indentLength = _a.indentLength; return { @@ -605,14 +614,14 @@ function compareCaretPosition(prev, next) { function withSelection(tr, callback) { var _a = tr.selection, $anchor = _a.$anchor, $head = _a.$head; callback(tr); - tr.setSelection(new TextSelection(tr.doc.resolve(tr.mapping.map($anchor.pos)), tr.doc.resolve(tr.mapping.map($head.pos)))); + tr.setSelection(new prosemirror_state_1.TextSelection(tr.doc.resolve(tr.mapping.map($anchor.pos)), tr.doc.resolve(tr.mapping.map($head.pos)))); return true; } function fixIndentation(code, indent) { - var _a = indent || detectIndent(code), amount = _a.amount, _b = _a.type, type = _b === void 0 ? "space" : _b; - var fixed = redent(code, amount, { + var _a = indent || (0, detect_indent_1.default)(code), amount = _a.amount, _b = _a.type, type = _b === void 0 ? "space" : _b; + var fixed = (0, redent_1.default)(code, amount, { includeEmptyLines: false, indent: type === "space" ? " " : "\t", }); - return { code: stripIndent(fixed), amount: amount, type: type }; + return { code: (0, strip_indent_1.default)(fixed), amount: amount, type: type }; } diff --git a/packages/editor/dist/extensions/codeblock/component.js b/packages/editor/dist/extensions/codeblock/component.js index e40598fa4..8ec17e24a 100644 --- a/packages/editor/dist/extensions/codeblock/component.js +++ b/packages/editor/dist/extensions/codeblock/component.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -61,40 +62,45 @@ var __read = (this && this.__read) || function (o, n) { } return ar; }; -import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; -import { useEffect, useRef, useState } from "react"; -import { isLanguageLoaded, loadLanguage } from "./loader"; -import { refractor } from "refractor/lib/core"; -import { Flex, Text } from "rebass"; -import Languages from "./languages.json"; -import { Input } from "@rebass/forms"; -import { Icon } from "../../toolbar/components/icon"; -import { Icons } from "../../toolbar/icons"; -import { ResponsivePresenter } from "../../components/responsive"; -import { Popup } from "../../toolbar/components/popup"; -import { Button } from "../../components/button"; -export function CodeblockComponent(props) { +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.CodeblockComponent = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var react_1 = require("react"); +var loader_1 = require("./loader"); +var core_1 = require("refractor/lib/core"); +var rebass_1 = require("rebass"); +var languages_json_1 = __importDefault(require("./languages.json")); +var forms_1 = require("@rebass/forms"); +var icon_1 = require("../../toolbar/components/icon"); +var icons_1 = require("../../toolbar/icons"); +var responsive_1 = require("../../components/responsive"); +var popup_1 = require("../../toolbar/components/popup"); +var button_1 = require("../../components/button"); +function CodeblockComponent(props) { var editor = props.editor, updateAttributes = props.updateAttributes, node = props.node, forwardRef = props.forwardRef; var _a = node === null || node === void 0 ? void 0 : node.attrs, language = _a.language, indentLength = _a.indentLength, indentType = _a.indentType, caretPosition = _a.caretPosition; - var _b = __read(useState(false), 2), isOpen = _b[0], setIsOpen = _b[1]; + var _b = __read((0, react_1.useState)(false), 2), isOpen = _b[0], setIsOpen = _b[1]; // const [caretPosition, setCaretPosition] = useState(); - var toolbarRef = useRef(null); - var languageDefinition = Languages.find(function (l) { var _a; return l.filename === language || ((_a = l.alias) === null || _a === void 0 ? void 0 : _a.some(function (a) { return a === language; })); }); - useEffect(function () { + var toolbarRef = (0, react_1.useRef)(null); + var languageDefinition = languages_json_1.default.find(function (l) { var _a; return l.filename === language || ((_a = l.alias) === null || _a === void 0 ? void 0 : _a.some(function (a) { return a === language; })); }); + (0, react_1.useEffect)(function () { (function () { return __awaiter(this, void 0, void 0, function () { var syntax; return __generator(this, function (_a) { switch (_a.label) { case 0: - if (!language || !languageDefinition || isLanguageLoaded(language)) + if (!language || !languageDefinition || (0, loader_1.isLanguageLoaded)(language)) return [2 /*return*/]; - return [4 /*yield*/, loadLanguage(languageDefinition.filename)]; + return [4 /*yield*/, (0, loader_1.loadLanguage)(languageDefinition.filename)]; case 1: syntax = _a.sent(); if (!syntax) return [2 /*return*/]; - refractor.register(syntax); + core_1.refractor.register(syntax); updateAttributes({ language: languageDefinition.filename, }); @@ -104,11 +110,11 @@ export function CodeblockComponent(props) { }); })(); }, [language]); - return (_jsxs(_Fragment, { children: [_jsxs(Flex, __assign({ sx: { + return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ sx: { flexDirection: "column", borderRadius: "default", overflow: "hidden", - } }, { children: [_jsx(Text, { ref: forwardRef, as: "pre", sx: { + } }, { children: [(0, jsx_runtime_1.jsx)(rebass_1.Text, { ref: forwardRef, as: "pre", sx: { "div, span.token, span.line-number-widget, span.line-number::before": { fontFamily: "monospace", fontSize: "code", @@ -124,26 +130,26 @@ export function CodeblockComponent(props) { px: 2, pt: 2, pb: 1, - }, spellCheck: false }), _jsxs(Flex, __assign({ ref: toolbarRef, contentEditable: false, sx: { + }, spellCheck: false }), (0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ ref: toolbarRef, contentEditable: false, sx: { bg: "codeBg", alignItems: "center", justifyContent: "end", borderTop: "1px solid var(--codeBorder)", - } }, { children: [caretPosition ? (_jsxs(Text, __assign({ variant: "subBody", sx: { mr: 2, color: "codeFg" } }, { children: ["Line ", caretPosition.line, ", Column ", caretPosition.column, " ", caretPosition.selected + } }, { children: [caretPosition ? ((0, jsx_runtime_1.jsxs)(rebass_1.Text, __assign({ variant: "subBody", sx: { mr: 2, color: "codeFg" } }, { children: ["Line ", caretPosition.line, ", Column ", caretPosition.column, " ", caretPosition.selected ? "(".concat(caretPosition.selected, " selected)") - : ""] }))) : null, _jsx(Button, __assign({ variant: "icon", sx: { p: 1, mr: 1, ":hover": { bg: "codeSelection" } }, title: "Toggle indentation mode", onClick: function () { + : ""] }))) : null, (0, jsx_runtime_1.jsx)(button_1.Button, __assign({ variant: "icon", sx: { p: 1, mr: 1, ":hover": { bg: "codeSelection" } }, title: "Toggle indentation mode", onClick: function () { editor.commands.changeCodeBlockIndentation({ type: indentType === "space" ? "tab" : "space", amount: indentLength, }); - } }, { children: _jsxs(Text, __assign({ variant: "subBody", sx: { color: "codeFg" } }, { children: [indentType === "space" ? "Spaces" : "Tabs", ": ", indentLength] })) })), _jsx(Button, __assign({ variant: "icon", sx: { + } }, { children: (0, jsx_runtime_1.jsxs)(rebass_1.Text, __assign({ variant: "subBody", sx: { color: "codeFg" } }, { children: [indentType === "space" ? "Spaces" : "Tabs", ": ", indentLength] })) })), (0, jsx_runtime_1.jsx)(button_1.Button, __assign({ variant: "icon", sx: { p: 1, mr: 1, bg: isOpen ? "codeSelection" : "transparent", ":hover": { bg: "codeSelection" }, }, onClick: function () { setIsOpen(true); - }, title: "Change language" }, { children: _jsx(Text, __assign({ variant: "subBody", spellCheck: false, sx: { color: "codeFg" } }, { children: (languageDefinition === null || languageDefinition === void 0 ? void 0 : languageDefinition.title) || "Plaintext" })) }))] }))] })), _jsx(ResponsivePresenter, __assign({ isOpen: isOpen, onClose: function () { + }, title: "Change language" }, { children: (0, jsx_runtime_1.jsx)(rebass_1.Text, __assign({ variant: "subBody", spellCheck: false, sx: { color: "codeFg" } }, { children: (languageDefinition === null || languageDefinition === void 0 ? void 0 : languageDefinition.title) || "Plaintext" })) }))] }))] })), (0, jsx_runtime_1.jsx)(responsive_1.ResponsivePresenter, __assign({ isOpen: isOpen, onClose: function () { setIsOpen(false); // NOTE: for some reason the language selection action sheet // does not return focus to the last focused position after @@ -158,21 +164,22 @@ export function CodeblockComponent(props) { isTargetAbsolute: true, location: "top", yOffset: 5, - }, title: "Change code block language" }, { children: _jsx(LanguageSelector, { selectedLanguage: (languageDefinition === null || languageDefinition === void 0 ? void 0 : languageDefinition.filename) || "Plaintext", onLanguageSelected: function (language) { + }, title: "Change code block language" }, { children: (0, jsx_runtime_1.jsx)(LanguageSelector, { selectedLanguage: (languageDefinition === null || languageDefinition === void 0 ? void 0 : languageDefinition.filename) || "Plaintext", onLanguageSelected: function (language) { updateAttributes({ language: language }); setIsOpen(false); }, onClose: function () { return setIsOpen(false); } }) }))] })); } +exports.CodeblockComponent = CodeblockComponent; function LanguageSelector(props) { var onLanguageSelected = props.onLanguageSelected, selectedLanguage = props.selectedLanguage, onClose = props.onClose; - var _a = __read(useState(Languages), 2), languages = _a[0], setLanguages = _a[1]; - return (_jsx(Popup, __assign({ title: "Select language", onClose: onClose }, { children: _jsxs(Flex, __assign({ sx: { + var _a = __read((0, react_1.useState)(languages_json_1.default), 2), languages = _a[0], setLanguages = _a[1]; + return ((0, jsx_runtime_1.jsx)(popup_1.Popup, __assign({ title: "Select language", onClose: onClose }, { children: (0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ sx: { flexDirection: "column", height: 200, width: ["auto", 300], overflowY: "auto", bg: "background", - } }, { children: [_jsx(Input, { onFocus: function () { + } }, { children: [(0, jsx_runtime_1.jsx)(forms_1.Input, { onFocus: function () { console.log("EHLLO!"); }, autoFocus: true, placeholder: "Search languages", sx: { width: "auto", @@ -184,22 +191,22 @@ function LanguageSelector(props) { zIndex: 999, }, onChange: function (e) { if (!e.target.value) - return setLanguages(Languages); + return setLanguages(languages_json_1.default); var query = e.target.value.toLowerCase(); - setLanguages(Languages.filter(function (lang) { + setLanguages(languages_json_1.default.filter(function (lang) { var _a; return (lang.title.toLowerCase().indexOf(query) > -1 || ((_a = lang.alias) === null || _a === void 0 ? void 0 : _a.some(function (alias) { return alias.toLowerCase().indexOf(query) > -1; }))); })); - } }), _jsx(Flex, __assign({ sx: { + } }), (0, jsx_runtime_1.jsx)(rebass_1.Flex, __assign({ sx: { flexDirection: "column", pt: 1, mt: 1, - } }, { children: languages.map(function (lang) { return (_jsxs(Button, __assign({ variant: "menuitem", sx: { + } }, { children: languages.map(function (lang) { return ((0, jsx_runtime_1.jsxs)(button_1.Button, __assign({ variant: "menuitem", sx: { textAlign: "left", py: 1, display: "flex", justifyContent: "space-between", alignItems: "center", - }, onClick: function () { return onLanguageSelected(lang.filename); } }, { children: [_jsx(Text, __assign({ variant: "body" }, { children: lang.title })), selectedLanguage === lang.filename ? (_jsx(Icon, { path: Icons.check, size: "small" })) : lang.alias ? (_jsx(Text, __assign({ variant: "subBody", sx: { fontSize: "10px" } }, { children: lang.alias.slice(0, 3).join(", ") }))) : null] }), lang.title)); }) }))] })) }))); + }, onClick: function () { return onLanguageSelected(lang.filename); } }, { children: [(0, jsx_runtime_1.jsx)(rebass_1.Text, __assign({ variant: "body" }, { children: lang.title })), selectedLanguage === lang.filename ? ((0, jsx_runtime_1.jsx)(icon_1.Icon, { path: icons_1.Icons.check, size: "small" })) : lang.alias ? ((0, jsx_runtime_1.jsx)(rebass_1.Text, __assign({ variant: "subBody", sx: { fontSize: "10px" } }, { children: lang.alias.slice(0, 3).join(", ") }))) : null] }), lang.title)); }) }))] })) }))); } diff --git a/packages/editor/dist/extensions/codeblock/highlighter.js b/packages/editor/dist/extensions/codeblock/highlighter.js index a25cb0534..44503613e 100644 --- a/packages/editor/dist/extensions/codeblock/highlighter.js +++ b/packages/editor/dist/extensions/codeblock/highlighter.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -45,11 +46,13 @@ var __values = (this && this.__values) || function(o) { }; throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined."); }; -import { Plugin, PluginKey } from "prosemirror-state"; -import { Decoration, DecorationSet } from "prosemirror-view"; -import { findChildren } from "@tiptap/core"; -import { refractor } from "refractor/lib/core"; -import { toCaretPosition, toCodeLines, } from "./code-block"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.HighlighterPlugin = void 0; +var prosemirror_state_1 = require("prosemirror-state"); +var prosemirror_view_1 = require("prosemirror-view"); +var core_1 = require("@tiptap/core"); +var core_2 = require("refractor/lib/core"); +var codeblock_1 = require("./codeblock"); function parseNodes(nodes, className) { if (className === void 0) { className = []; } return nodes.reduce(function (result, node) { @@ -94,9 +97,9 @@ function getLineDecoration(from, line, total, isActive) { // Android Composition API (aka the virtual keyboard) doesn't behave well // with Decoration widgets so we have to resort to inline line numbers. isAndroid()) { - return Decoration.inline(from, from + 1, attributes, spec); + return prosemirror_view_1.Decoration.inline(from, from + 1, attributes, spec); } - return Decoration.widget(from, function () { + return prosemirror_view_1.Decoration.widget(from, function () { var element = document.createElement("span"); element.classList.add("line-number-widget"); if (isActive) @@ -113,11 +116,11 @@ function getLineDecoration(from, line, total, isActive) { function getDecorations(_a) { var doc = _a.doc, name = _a.name, defaultLanguage = _a.defaultLanguage, caretPosition = _a.caretPosition; var decorations = []; - var languages = refractor.listLanguages(); - findChildren(doc, function (node) { return node.type.name === name; }).forEach(function (block) { + var languages = core_2.refractor.listLanguages(); + (0, core_1.findChildren)(doc, function (node) { return node.type.name === name; }).forEach(function (block) { var e_1, _a; var code = block.node.textContent; - var lines = toCodeLines(code, block.pos); + var lines = (0, codeblock_1.toCodeLines)(code, block.pos); try { for (var _b = __values(lines || []), _c = _b.next(); !_c.done; _c = _b.next()) { var line = _c.value; @@ -136,7 +139,7 @@ function getDecorations(_a) { } var language = block.node.attrs.language || defaultLanguage; var nodes = languages.includes(language) - ? getHighlightNodes(refractor.highlight(code, language)) + ? getHighlightNodes(core_2.refractor.highlight(code, language)) : null; if (!nodes) return; @@ -144,7 +147,7 @@ function getDecorations(_a) { parseNodes(nodes).forEach(function (node) { var to = from + node.text.length; if (node.classes.length) { - var decoration = Decoration.inline(from, to, { + var decoration = prosemirror_view_1.Decoration.inline(from, to, { class: node.classes.join(" "), }); decorations.push(decoration); @@ -152,23 +155,23 @@ function getDecorations(_a) { from = to; }); }); - return DecorationSet.create(doc, decorations); + return prosemirror_view_1.DecorationSet.create(doc, decorations); } -export function HighlighterPlugin(_a) { +function HighlighterPlugin(_a) { var name = _a.name, defaultLanguage = _a.defaultLanguage; - var key = new PluginKey("highlighter"); - return new Plugin({ + var key = new prosemirror_state_1.PluginKey("highlighter"); + return new prosemirror_state_1.Plugin({ key: key, state: { init: function () { - return DecorationSet.empty; + return prosemirror_view_1.DecorationSet.empty; }, apply: function (transaction, decorationSet, oldState, newState) { var oldNodeName = oldState.selection.$head.parent.type.name; var newNodeName = newState.selection.$head.parent.type.name; - var oldNodes = findChildren(oldState.doc, function (node) { return node.type.name === name; }); - var newNodes = findChildren(newState.doc, function (node) { return node.type.name === name; }); - var position = toCaretPosition(newState.selection); + var oldNodes = (0, core_1.findChildren)(oldState.doc, function (node) { return node.type.name === name; }); + var newNodes = (0, core_1.findChildren)(newState.doc, function (node) { return node.type.name === name; }); + var position = (0, codeblock_1.toCaretPosition)(newState.selection); // const isDocChanged = // transaction.docChanged && // // TODO @@ -214,15 +217,15 @@ export function HighlighterPlugin(_a) { var selectionChanged = (nextState.selection.$from.parent.type.name === name || prevState.selection.$from.parent.type.name === name) && prevState.selection.$from.pos !== nextState.selection.$from.pos; - findChildren(nextState.doc, function (node) { return node.type.name === name; }).forEach(function (block) { + (0, core_1.findChildren)(nextState.doc, function (node) { return node.type.name === name; }).forEach(function (block) { var node = block.node, pos = block.pos; var attributes = __assign({}, node.attrs); if (docChanged) { - var lines = toCodeLines(node.textContent, pos); + var lines = (0, codeblock_1.toCodeLines)(node.textContent, pos); attributes.lines = lines.slice(); } if (selectionChanged) { - var position = toCaretPosition(nextState.selection, docChanged ? toCodeLines(node.textContent, pos) : undefined); + var position = (0, codeblock_1.toCaretPosition)(nextState.selection, docChanged ? (0, codeblock_1.toCodeLines)(node.textContent, pos) : undefined); attributes.caretPosition = position; } if (docChanged || selectionChanged) { @@ -234,6 +237,7 @@ export function HighlighterPlugin(_a) { }, }); } +exports.HighlighterPlugin = HighlighterPlugin; /** * When `position` is undefined, all active line decorations * are reset (e.g. when you focus out of the code block). diff --git a/packages/editor/dist/extensions/codeblock/index.js b/packages/editor/dist/extensions/codeblock/index.js index 80ea37c7c..63156ab53 100644 --- a/packages/editor/dist/extensions/codeblock/index.js +++ b/packages/editor/dist/extensions/codeblock/index.js @@ -1 +1,17 @@ -export * from "./code-block"; +"use strict"; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __exportStar = (this && this.__exportStar) || function(m, exports) { + for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); +}; +Object.defineProperty(exports, "__esModule", { value: true }); +__exportStar(require("./codeblock"), exports); diff --git a/packages/editor/dist/extensions/codeblock/loader.js b/packages/editor/dist/extensions/codeblock/loader.js index 3f5fb87bc..3ce51329f 100644 --- a/packages/editor/dist/extensions/codeblock/loader.js +++ b/packages/editor/dist/extensions/codeblock/loader.js @@ -1,3 +1,4 @@ +"use strict"; 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) { @@ -34,11 +35,14 @@ var __generator = (this && this.__generator) || function (thisArg, body) { if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; } }; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.loadLanguage = exports.isLanguageLoaded = void 0; var loadedLanguages = {}; -export function isLanguageLoaded(name) { +function isLanguageLoaded(name) { return !!loadedLanguages[name]; } -export function loadLanguage(shortName) { +exports.isLanguageLoaded = isLanguageLoaded; +function loadLanguage(shortName) { return __awaiter(this, void 0, void 0, function () { var url, result; return __generator(this, function (_a) { @@ -56,6 +60,7 @@ export function loadLanguage(shortName) { }); }); } +exports.loadLanguage = loadLanguage; function loadScript(id, url) { return __awaiter(this, void 0, void 0, function () { return __generator(this, function (_a) { diff --git a/packages/editor/dist/extensions/codemark/codemark.js b/packages/editor/dist/extensions/codemark/codemark.js index 964f47374..5fe411ca0 100644 --- a/packages/editor/dist/extensions/codemark/codemark.js +++ b/packages/editor/dist/extensions/codemark/codemark.js @@ -1,8 +1,14 @@ -import { Extension } from "@tiptap/core"; -import codemark from "prosemirror-codemark"; -export var Codemark = Extension.create({ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.Codemark = void 0; +var core_1 = require("@tiptap/core"); +var prosemirror_codemark_1 = __importDefault(require("prosemirror-codemark")); +exports.Codemark = core_1.Extension.create({ name: "codemarkPlugin", addProseMirrorPlugins: function () { - return codemark({ markType: this.editor.schema.marks.code }); + return (0, prosemirror_codemark_1.default)({ markType: this.editor.schema.marks.code }); }, }); diff --git a/packages/editor/dist/extensions/codemark/index.js b/packages/editor/dist/extensions/codemark/index.js index 8c4911b98..402f6b358 100644 --- a/packages/editor/dist/extensions/codemark/index.js +++ b/packages/editor/dist/extensions/codemark/index.js @@ -1,2 +1,20 @@ -export * from "./code-mark"; -export { Codemark as default } from "./code-mark"; +"use strict"; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __exportStar = (this && this.__exportStar) || function(m, exports) { + for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.default = void 0; +__exportStar(require("./codemark"), exports); +var codemark_1 = require("./codemark"); +Object.defineProperty(exports, "default", { enumerable: true, get: function () { return codemark_1.Codemark; } }); diff --git a/packages/editor/dist/extensions/dropcursor/dropcursor.js b/packages/editor/dist/extensions/dropcursor/dropcursor.js index 4ab92e676..f983df8f9 100644 --- a/packages/editor/dist/extensions/dropcursor/dropcursor.js +++ b/packages/editor/dist/extensions/dropcursor/dropcursor.js @@ -1,6 +1,9 @@ -import { Extension } from "@tiptap/core"; -import { dropCursor } from "./drop-cursor.pm"; -export var Dropcursor = Extension.create({ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.Dropcursor = void 0; +var core_1 = require("@tiptap/core"); +var dropcursor_pm_1 = require("./dropcursor.pm"); +exports.Dropcursor = core_1.Extension.create({ name: "dropCursor", addOptions: function () { return { @@ -10,6 +13,6 @@ export var Dropcursor = Extension.create({ }; }, addProseMirrorPlugins: function () { - return [dropCursor(this.options)]; + return [(0, dropcursor_pm_1.dropCursor)(this.options)]; }, }); diff --git a/packages/editor/dist/extensions/dropcursor/dropcursor.pm.js b/packages/editor/dist/extensions/dropcursor/dropcursor.pm.js index d4c42d088..f618634c4 100644 --- a/packages/editor/dist/extensions/dropcursor/dropcursor.pm.js +++ b/packages/editor/dist/extensions/dropcursor/dropcursor.pm.js @@ -1,5 +1,8 @@ -import { Plugin } from "prosemirror-state"; -import { dropPoint } from "prosemirror-transform"; +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.dropCursor = void 0; +var prosemirror_state_1 = require("prosemirror-state"); +var prosemirror_transform_1 = require("prosemirror-transform"); // :: (options: ?Object) → Plugin // Create a plugin that, when added to a ProseMirror instance, // causes a decoration to show up at the drop position when something @@ -20,14 +23,15 @@ import { dropPoint } from "prosemirror-transform"; // // class:: ?string // A CSS class name to add to the cursor element. -export function dropCursor(options) { +function dropCursor(options) { if (options === void 0) { options = {}; } - return new Plugin({ + return new prosemirror_state_1.Plugin({ view: function (editorView) { return new DropCursorView(editorView, options); }, }); } +exports.dropCursor = dropCursor; var DropCursorView = /** @class */ (function () { function DropCursorView(editorView, options) { var _this = this; @@ -153,7 +157,7 @@ var DropCursorView = /** @class */ (function () { if (pos && !disabled) { var target = pos.pos; if (this.editorView.dragging && this.editorView.dragging.slice) { - var point = dropPoint(this.editorView.state.doc, target, this.editorView.dragging.slice); + var point = (0, prosemirror_transform_1.dropPoint)(this.editorView.state.doc, target, this.editorView.dragging.slice); if (!point) return this.setCursor(null); target = point; diff --git a/packages/editor/dist/extensions/dropcursor/index.js b/packages/editor/dist/extensions/dropcursor/index.js index 8b3d7693d..8a45ee72f 100644 --- a/packages/editor/dist/extensions/dropcursor/index.js +++ b/packages/editor/dist/extensions/dropcursor/index.js @@ -1,3 +1,19 @@ -import { Dropcursor } from "./drop-cursor"; -export * from "./drop-cursor"; -export default Dropcursor; +"use strict"; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __exportStar = (this && this.__exportStar) || function(m, exports) { + for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); +}; +Object.defineProperty(exports, "__esModule", { value: true }); +var dropcursor_1 = require("./dropcursor"); +__exportStar(require("./dropcursor"), exports); +exports.default = dropcursor_1.Dropcursor; diff --git a/packages/editor/dist/extensions/embed/component.js b/packages/editor/dist/extensions/embed/component.js index 3efb26afa..23c2f5e13 100644 --- a/packages/editor/dist/extensions/embed/component.js +++ b/packages/editor/dist/extensions/embed/component.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -9,20 +10,22 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; -import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; -import { Box, Flex } from "rebass"; -import { Resizable } from "re-resizable"; -import { useRef } from "react"; -import { DesktopOnly } from "../../components/responsive"; -import { ToolbarGroup } from "../../toolbar/components/toolbar-group"; -export function EmbedComponent(props) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.EmbedComponent = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var rebass_1 = require("rebass"); +var re_resizable_1 = require("re-resizable"); +var react_1 = require("react"); +var responsive_1 = require("../../components/responsive"); +var toolbargroup_1 = require("../../toolbar/components/toolbargroup"); +function EmbedComponent(props) { var editor = props.editor, updateAttributes = props.updateAttributes, selected = props.selected, node = props.node; - var embedRef = useRef(); + var embedRef = (0, react_1.useRef)(); var _a = node.attrs, src = _a.src, width = _a.width, height = _a.height, align = _a.align; - return (_jsx(_Fragment, { children: _jsx(Box, __assign({ sx: { + return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(rebass_1.Box, __assign({ sx: { display: "flex", justifyContent: align === "center" ? "center" : align === "left" ? "start" : "end", - } }, { children: _jsxs(Resizable, __assign({ enable: { + } }, { children: (0, jsx_runtime_1.jsxs)(re_resizable_1.Resizable, __assign({ enable: { bottom: editor.isEditable, left: editor.isEditable, right: editor.isEditable, @@ -39,7 +42,7 @@ export function EmbedComponent(props) { width: ref.clientWidth, height: ref.clientHeight, }); - }, lockAspectRatio: true }, { children: [_jsx(Flex, __assign({ width: "100%", sx: { + }, lockAspectRatio: true }, { children: [(0, jsx_runtime_1.jsx)(rebass_1.Flex, __assign({ width: "100%", sx: { position: "relative", justifyContent: "end", borderTop: editor.isEditable @@ -52,12 +55,12 @@ export function EmbedComponent(props) { ":hover": { borderColor: "border", }, - } }, { children: _jsx(DesktopOnly, { children: selected && (_jsx(Flex, __assign({ sx: { position: "relative", justifyContent: "end" } }, { children: _jsx(Flex, __assign({ sx: { + } }, { children: (0, jsx_runtime_1.jsx)(responsive_1.DesktopOnly, { children: selected && ((0, jsx_runtime_1.jsx)(rebass_1.Flex, __assign({ sx: { position: "relative", justifyContent: "end" } }, { children: (0, jsx_runtime_1.jsx)(rebass_1.Flex, __assign({ sx: { position: "absolute", top: -40, mb: 2, alignItems: "end", - } }, { children: _jsx(ToolbarGroup, { editor: editor, tools: [ + } }, { children: (0, jsx_runtime_1.jsx)(toolbargroup_1.ToolbarGroup, { editor: editor, tools: [ "embedAlignLeft", "embedAlignCenter", "embedAlignRight", @@ -66,10 +69,11 @@ export function EmbedComponent(props) { boxShadow: "menu", borderRadius: "default", bg: "background", - } }) })) }))) }) })), _jsx(Box, __assign({ as: "iframe", ref: embedRef, src: src, width: "100%", height: "100%", sx: { + } }) })) }))) }) })), (0, jsx_runtime_1.jsx)(rebass_1.Box, __assign({ as: "iframe", ref: embedRef, src: src, width: "100%", height: "100%", sx: { border: selected ? "2px solid var(--primary)" : "2px solid transparent", borderRadius: "default", } }, props))] })) })) })); } +exports.EmbedComponent = EmbedComponent; diff --git a/packages/editor/dist/extensions/embed/embed.js b/packages/editor/dist/extensions/embed/embed.js index aab2ecb03..33a029a35 100644 --- a/packages/editor/dist/extensions/embed/embed.js +++ b/packages/editor/dist/extensions/embed/embed.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -9,10 +10,12 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; -import { Node, mergeAttributes } from "@tiptap/core"; -import { createSelectionBasedNodeView, } from "../react"; -import { EmbedComponent } from "./component"; -export var EmbedNode = Node.create({ +Object.defineProperty(exports, "__esModule", { value: true }); +exports.EmbedNode = void 0; +var core_1 = require("@tiptap/core"); +var react_1 = require("../react"); +var component_1 = require("./component"); +exports.EmbedNode = core_1.Node.create({ name: "embed", content: "", marks: "", @@ -46,11 +49,11 @@ export var EmbedNode = Node.create({ var HTMLAttributes = _a.HTMLAttributes; return [ "iframe", - mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), + (0, core_1.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes), ]; }, addNodeView: function () { - return createSelectionBasedNodeView(EmbedComponent); + return (0, react_1.createSelectionBasedNodeView)(component_1.EmbedComponent); }, addCommands: function () { var _this = this; diff --git a/packages/editor/dist/extensions/embed/index.js b/packages/editor/dist/extensions/embed/index.js index 12b3c5295..edd6e1a43 100644 --- a/packages/editor/dist/extensions/embed/index.js +++ b/packages/editor/dist/extensions/embed/index.js @@ -1 +1,17 @@ -export * from "./embed"; +"use strict"; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __exportStar = (this && this.__exportStar) || function(m, exports) { + for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); +}; +Object.defineProperty(exports, "__esModule", { value: true }); +__exportStar(require("./embed"), exports); diff --git a/packages/editor/dist/extensions/fontsize/fontsize.js b/packages/editor/dist/extensions/fontsize/fontsize.js index c0cf6ef0d..dea9e9912 100644 --- a/packages/editor/dist/extensions/fontsize/fontsize.js +++ b/packages/editor/dist/extensions/fontsize/fontsize.js @@ -1,6 +1,9 @@ -import { Extension } from "@tiptap/core"; -import "@tiptap/extension-text-style"; -export var FontSize = Extension.create({ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.FontSize = void 0; +var core_1 = require("@tiptap/core"); +require("@tiptap/extension-text-style"); +exports.FontSize = core_1.Extension.create({ name: "fontSize", defaultOptions: { types: ["textStyle"], diff --git a/packages/editor/dist/extensions/fontsize/index.js b/packages/editor/dist/extensions/fontsize/index.js index 0424657fa..f466a7472 100644 --- a/packages/editor/dist/extensions/fontsize/index.js +++ b/packages/editor/dist/extensions/fontsize/index.js @@ -1,3 +1,19 @@ -import { FontSize } from "./font-size"; -export * from "./font-size"; -export default FontSize; +"use strict"; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __exportStar = (this && this.__exportStar) || function(m, exports) { + for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); +}; +Object.defineProperty(exports, "__esModule", { value: true }); +var fontsize_1 = require("./fontsize"); +__exportStar(require("./fontsize"), exports); +exports.default = fontsize_1.FontSize; diff --git a/packages/editor/dist/extensions/image/component.js b/packages/editor/dist/extensions/image/component.js index 2ef69da29..feef3a5ca 100644 --- a/packages/editor/dist/extensions/image/component.js +++ b/packages/editor/dist/extensions/image/component.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -45,18 +46,20 @@ var __generator = (this && this.__generator) || function (thisArg, body) { 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 { Box, Flex, Image } from "rebass"; -import { Resizable } from "re-resizable"; -import { useEffect, useRef } from "react"; -import { DesktopOnly } from "../../components/responsive"; -import { ToolbarGroup } from "../../toolbar/components/toolbar-group"; -export function ImageComponent(props) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.ImageComponent = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var rebass_1 = require("rebass"); +var re_resizable_1 = require("re-resizable"); +var react_1 = require("react"); +var responsive_1 = require("../../components/responsive"); +var toolbargroup_1 = require("../../toolbar/components/toolbargroup"); +function ImageComponent(props) { var _this = this; var editor = props.editor, updateAttributes = props.updateAttributes, node = props.node, selected = props.selected; var _a = node.attrs, src = _a.src, alt = _a.alt, title = _a.title, width = _a.width, height = _a.height, align = _a.align, float = _a.float; - var imageRef = useRef(); - useEffect(function () { + var imageRef = (0, react_1.useRef)(); + (0, react_1.useEffect)(function () { (function () { return __awaiter(_this, void 0, void 0, function () { var _a; return __generator(this, function (_b) { @@ -73,7 +76,7 @@ export function ImageComponent(props) { }); }); })(); }, [src, imageRef]); - return (_jsx(_Fragment, { children: _jsx(Box, __assign({ sx: { + return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(rebass_1.Box, __assign({ sx: { display: float ? "block" : "flex", justifyContent: float ? "stretch" @@ -85,7 +88,7 @@ export function ImageComponent(props) { ":hover .drag-handle, :active .drag-handle": { opacity: 1, }, - } }, { children: _jsxs(Resizable, __assign({ enable: { + } }, { children: (0, jsx_runtime_1.jsxs)(re_resizable_1.Resizable, __assign({ enable: { bottom: editor.isEditable, left: editor.isEditable, right: editor.isEditable, @@ -105,7 +108,7 @@ export function ImageComponent(props) { width: ref.clientWidth, height: ref.clientHeight, }); - }, lockAspectRatio: true }, { children: [_jsx(Flex, __assign({ width: "100%", "data-drag-handle": true, draggable: true, sx: { + }, lockAspectRatio: true }, { children: [(0, jsx_runtime_1.jsx)(rebass_1.Flex, __assign({ width: "100%", "data-drag-handle": true, draggable: true, sx: { position: "relative", justifyContent: "end", borderTop: editor.isEditable @@ -118,12 +121,12 @@ export function ImageComponent(props) { ":hover": { borderColor: "border", }, - } }, { children: _jsx(DesktopOnly, { children: selected && (_jsx(Flex, __assign({ sx: { position: "relative", justifyContent: "end" } }, { children: _jsx(Flex, __assign({ sx: { + } }, { children: (0, jsx_runtime_1.jsx)(responsive_1.DesktopOnly, { children: selected && ((0, jsx_runtime_1.jsx)(rebass_1.Flex, __assign({ sx: { position: "relative", justifyContent: "end" } }, { children: (0, jsx_runtime_1.jsx)(rebass_1.Flex, __assign({ sx: { position: "absolute", top: -40, mb: 2, alignItems: "end", - } }, { children: _jsx(ToolbarGroup, { editor: editor, tools: [ + } }, { children: (0, jsx_runtime_1.jsx)(toolbargroup_1.ToolbarGroup, { editor: editor, tools: [ "imageAlignLeft", "imageAlignCenter", "imageAlignRight", @@ -132,7 +135,7 @@ export function ImageComponent(props) { boxShadow: "menu", borderRadius: "default", bg: "background", - } }) })) }))) }) })), _jsx(Image, __assign({ "data-drag-image": true, ref: imageRef, alt: alt, src: "/placeholder.svg", title: title, width: "100%", height: "100%", sx: { + } }) })) }))) }) })), (0, jsx_runtime_1.jsx)(rebass_1.Image, __assign({ "data-drag-image": true, ref: imageRef, alt: alt, src: "/placeholder.svg", title: title, width: "100%", height: "100%", sx: { bg: "bgSecondary", border: selected ? "2px solid var(--primary)" @@ -140,6 +143,7 @@ export function ImageComponent(props) { borderRadius: "default", } }, props))] })) })) })); } +exports.ImageComponent = ImageComponent; function dataUriToBlobURL(dataurl) { return __awaiter(this, void 0, void 0, function () { var response, blob; diff --git a/packages/editor/dist/extensions/image/image.js b/packages/editor/dist/extensions/image/image.js index 7b716f123..6b0996a44 100644 --- a/packages/editor/dist/extensions/image/image.js +++ b/packages/editor/dist/extensions/image/image.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -36,12 +37,14 @@ var __read = (this && this.__read) || function (o, n) { } return ar; }; -import { Node, nodeInputRule, mergeAttributes, findChildren, } from "@tiptap/core"; -import { getDataAttribute } from "../attachment"; -import { createSelectionBasedNodeView, } from "../react"; -import { ImageComponent } from "./component"; -export var inputRegex = /(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/; -export var ImageNode = Node.create({ +Object.defineProperty(exports, "__esModule", { value: true }); +exports.ImageNode = exports.inputRegex = void 0; +var core_1 = require("@tiptap/core"); +var attachment_1 = require("../attachment"); +var react_1 = require("../react"); +var component_1 = require("./component"); +exports.inputRegex = /(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/; +exports.ImageNode = core_1.Node.create({ name: "image", addOptions: function () { return { @@ -70,12 +73,12 @@ export var ImageNode = Node.create({ }, width: { default: null }, height: { default: null }, - float: getDataAttribute("float", false), - align: getDataAttribute("align", "left"), - hash: getDataAttribute("hash"), - filename: getDataAttribute("filename"), - type: getDataAttribute("mime"), - size: getDataAttribute("size"), + float: (0, attachment_1.getDataAttribute)("float", false), + align: (0, attachment_1.getDataAttribute)("align", "left"), + hash: (0, attachment_1.getDataAttribute)("hash"), + filename: (0, attachment_1.getDataAttribute)("filename"), + type: (0, attachment_1.getDataAttribute)("mime"), + size: (0, attachment_1.getDataAttribute)("size"), }; }, parseHTML: function () { @@ -89,11 +92,11 @@ export var ImageNode = Node.create({ var HTMLAttributes = _a.HTMLAttributes; return [ "img", - mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), + (0, core_1.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes), ]; }, addNodeView: function () { - return createSelectionBasedNodeView(ImageComponent); + return (0, react_1.createSelectionBasedNodeView)(component_1.ImageComponent); }, addCommands: function () { var _this = this; @@ -130,7 +133,7 @@ export var ImageNode = Node.create({ : null; if (!query) return false; - var images = findChildren(state.doc, function (node) { + var images = (0, core_1.findChildren)(state.doc, function (node) { return node.type.name === _this.name && node.attrs[query.key] === query.value; }); @@ -158,8 +161,8 @@ export var ImageNode = Node.create({ }, addInputRules: function () { return [ - nodeInputRule({ - find: inputRegex, + (0, core_1.nodeInputRule)({ + find: exports.inputRegex, type: this.type, getAttributes: function (match) { var _a = __read(match, 5), alt = _a[2], src = _a[3], title = _a[4]; diff --git a/packages/editor/dist/extensions/image/index.js b/packages/editor/dist/extensions/image/index.js index 0aa9b4bbd..e537e41bc 100644 --- a/packages/editor/dist/extensions/image/index.js +++ b/packages/editor/dist/extensions/image/index.js @@ -1 +1,17 @@ -export * from "./image"; +"use strict"; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __exportStar = (this && this.__exportStar) || function(m, exports) { + for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); +}; +Object.defineProperty(exports, "__esModule", { value: true }); +__exportStar(require("./image"), exports); diff --git a/packages/editor/dist/extensions/listitem/commands.js b/packages/editor/dist/extensions/listitem/commands.js index f70910ddf..3a0ae5af8 100644 --- a/packages/editor/dist/extensions/listitem/commands.js +++ b/packages/editor/dist/extensions/listitem/commands.js @@ -1,7 +1,10 @@ -import { findParentNodeOfType, hasParentNodeOfType } from "prosemirror-utils"; +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.onBackspacePressed = void 0; +var prosemirror_utils_1 = require("prosemirror-utils"); // WORKAROUND: if we're at the start of a list item, we need to either // backspace directly to an empty list item above, or outdent this node -export function onBackspacePressed(editor, name, type) { +function onBackspacePressed(editor, name, type) { var selection = editor.state.selection; var empty = selection.empty, $from = selection.$from; if (!empty || @@ -24,11 +27,12 @@ export function onBackspacePressed(editor, name, type) { return editor.chain().joinBackward().joinBackward().run(); } } +exports.onBackspacePressed = onBackspacePressed; function isInside(name, type, state) { var $from = state.selection.$from; var node = type || state.schema.nodes[name]; var paragraph = state.schema.nodes.paragraph; - return (hasParentNodeOfType(node)(state.selection) && + return ((0, prosemirror_utils_1.hasParentNodeOfType)(node)(state.selection) && $from.parent.type === paragraph); } function isFirstChildOfParent(state) { @@ -38,7 +42,7 @@ function isFirstChildOfParent(state) { : true; } var isFirstOfType = function (type, state) { - var block = findParentNodeOfType(type)(state.selection); + var block = (0, prosemirror_utils_1.findParentNodeOfType)(type)(state.selection); if (!block) return false; var pos = block.pos; @@ -46,7 +50,7 @@ var isFirstOfType = function (type, state) { return !resolved.nodeBefore; }; function isListItemEmpty(type, state) { - var block = findParentNodeOfType(type)(state.selection); + var block = (0, prosemirror_utils_1.findParentNodeOfType)(type)(state.selection); if (!block) return false; var node = block.node; diff --git a/packages/editor/dist/extensions/listitem/index.js b/packages/editor/dist/extensions/listitem/index.js index 24950c4f2..87fab5e24 100644 --- a/packages/editor/dist/extensions/listitem/index.js +++ b/packages/editor/dist/extensions/listitem/index.js @@ -1 +1,17 @@ -export * from "./list-item"; +"use strict"; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __exportStar = (this && this.__exportStar) || function(m, exports) { + for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); +}; +Object.defineProperty(exports, "__esModule", { value: true }); +__exportStar(require("./listitem"), exports); diff --git a/packages/editor/dist/extensions/listitem/listitem.js b/packages/editor/dist/extensions/listitem/listitem.js index bf174417c..88b59970a 100644 --- a/packages/editor/dist/extensions/listitem/listitem.js +++ b/packages/editor/dist/extensions/listitem/listitem.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -9,15 +10,17 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; -import { ListItem as TiptapListItem } from "@tiptap/extension-list-item"; -import { onBackspacePressed } from "./commands"; -export var ListItem = TiptapListItem.extend({ +Object.defineProperty(exports, "__esModule", { value: true }); +exports.ListItem = void 0; +var extension_list_item_1 = require("@tiptap/extension-list-item"); +var commands_1 = require("./commands"); +exports.ListItem = extension_list_item_1.ListItem.extend({ addKeyboardShortcuts: function () { var _this = this; var _a; return __assign(__assign({}, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)), { Backspace: function (_a) { var editor = _a.editor; - return onBackspacePressed(editor, _this.name, _this.type); + return (0, commands_1.onBackspacePressed)(editor, _this.name, _this.type); } }); }, }); diff --git a/packages/editor/dist/extensions/math/index.js b/packages/editor/dist/extensions/math/index.js index 1331fdb01..599726672 100644 --- a/packages/editor/dist/extensions/math/index.js +++ b/packages/editor/dist/extensions/math/index.js @@ -1,2 +1,7 @@ -export { MathInline } from "./math-inline"; -export { MathBlock } from "./math-block"; +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.MathBlock = exports.MathInline = void 0; +var mathinline_1 = require("./mathinline"); +Object.defineProperty(exports, "MathInline", { enumerable: true, get: function () { return mathinline_1.MathInline; } }); +var mathblock_1 = require("./mathblock"); +Object.defineProperty(exports, "MathBlock", { enumerable: true, get: function () { return mathblock_1.MathBlock; } }); diff --git a/packages/editor/dist/extensions/math/mathblock.js b/packages/editor/dist/extensions/math/mathblock.js index 42ebb0312..08d3ce163 100644 --- a/packages/editor/dist/extensions/math/mathblock.js +++ b/packages/editor/dist/extensions/math/mathblock.js @@ -1,7 +1,10 @@ -import { Node, mergeAttributes } from "@tiptap/core"; -import { inputRules } from "prosemirror-inputrules"; -import { insertMathNode, makeBlockMathInputRule, REGEX_BLOCK_MATH_DOLLARS, } from "./plugin"; -export var MathBlock = Node.create({ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.MathBlock = void 0; +var core_1 = require("@tiptap/core"); +var prosemirror_inputrules_1 = require("prosemirror-inputrules"); +var plugin_1 = require("./plugin"); +exports.MathBlock = core_1.Node.create({ name: "mathBlock", group: "block math", content: "text*", @@ -18,7 +21,7 @@ export var MathBlock = Node.create({ var HTMLAttributes = _a.HTMLAttributes; return [ "div", - mergeAttributes({ class: "math-display math-node" }, HTMLAttributes), + (0, core_1.mergeAttributes)({ class: "math-display math-node" }, HTMLAttributes), 0, ]; }, @@ -28,14 +31,14 @@ export var MathBlock = Node.create({ insertMathBlock: function () { return function (_a) { var state = _a.state, dispatch = _a.dispatch, view = _a.view; - return insertMathNode(_this.type)(state, dispatch, view); + return (0, plugin_1.insertMathNode)(_this.type)(state, dispatch, view); }; }, }; }, addProseMirrorPlugins: function () { - var inputRulePlugin = inputRules({ - rules: [makeBlockMathInputRule(REGEX_BLOCK_MATH_DOLLARS, this.type)], + var inputRulePlugin = (0, prosemirror_inputrules_1.inputRules)({ + rules: [(0, plugin_1.makeBlockMathInputRule)(plugin_1.REGEX_BLOCK_MATH_DOLLARS, this.type)], }); return [inputRulePlugin]; }, diff --git a/packages/editor/dist/extensions/math/mathinline.js b/packages/editor/dist/extensions/math/mathinline.js index 763a53e53..a1b8df859 100644 --- a/packages/editor/dist/extensions/math/mathinline.js +++ b/packages/editor/dist/extensions/math/mathinline.js @@ -1,7 +1,10 @@ -import { Node, mergeAttributes } from "@tiptap/core"; -import { inputRules } from "prosemirror-inputrules"; -import { makeInlineMathInputRule, REGEX_INLINE_MATH_DOLLARS, mathPlugin, insertMathNode, } from "./plugin"; -export var MathInline = Node.create({ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.MathInline = void 0; +var core_1 = require("@tiptap/core"); +var prosemirror_inputrules_1 = require("prosemirror-inputrules"); +var plugin_1 = require("./plugin"); +exports.MathInline = core_1.Node.create({ name: "mathInline", group: "inline math", content: "text*", @@ -19,7 +22,7 @@ export var MathInline = Node.create({ var HTMLAttributes = _a.HTMLAttributes; return [ "span", - mergeAttributes({ class: "math-inline math-node" }, HTMLAttributes), + (0, core_1.mergeAttributes)({ class: "math-inline math-node" }, HTMLAttributes), 0, ]; }, @@ -29,15 +32,15 @@ export var MathInline = Node.create({ insertMathInline: function () { return function (_a) { var state = _a.state, dispatch = _a.dispatch, view = _a.view; - return insertMathNode(_this.type)(state, dispatch, view); + return (0, plugin_1.insertMathNode)(_this.type)(state, dispatch, view); }; }, }; }, addProseMirrorPlugins: function () { - var inputRulePlugin = inputRules({ - rules: [makeInlineMathInputRule(REGEX_INLINE_MATH_DOLLARS, this.type)], + var inputRulePlugin = (0, prosemirror_inputrules_1.inputRules)({ + rules: [(0, plugin_1.makeInlineMathInputRule)(plugin_1.REGEX_INLINE_MATH_DOLLARS, this.type)], }); - return [mathPlugin, inputRulePlugin]; + return [plugin_1.mathPlugin, inputRulePlugin]; }, }); diff --git a/packages/editor/dist/extensions/math/plugin/commands/collapse-math-cmd.d.ts b/packages/editor/dist/extensions/math/plugin/commands/collapse-math-cmd.d.ts deleted file mode 100644 index a3210bd68..000000000 --- a/packages/editor/dist/extensions/math/plugin/commands/collapse-math-cmd.d.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Command } from "prosemirror-state"; -import { EditorView } from "prosemirror-view"; -/** - * A ProseMirror command for determining whether to exit a math block, based on - * specific conditions. Normally called when the user has - * - * @param outerView The main ProseMirror EditorView containing this math node. - * @param dir Used to indicate desired cursor position upon closing a math node. - * When set to -1, cursor will be placed BEFORE the math node. - * When set to +1, cursor will be placed AFTER the math node. - * @param borderMode An exit condition based on cursor position and direction. - * @param requireEmptySelection When TRUE, only exit the math node when the - * (inner) selection is empty. - * @returns A new ProseMirror command based on the input configuration. - */ -export declare function collapseMathNode(outerView: EditorView, dir: 1 | -1, requireOnBorder: boolean, requireEmptySelection?: boolean): Command; diff --git a/packages/editor/dist/extensions/math/plugin/commands/collapse-math-cmd.js b/packages/editor/dist/extensions/math/plugin/commands/collapse-math-cmd.js deleted file mode 100644 index 70502e16b..000000000 --- a/packages/editor/dist/extensions/math/plugin/commands/collapse-math-cmd.js +++ /dev/null @@ -1,51 +0,0 @@ -import { TextSelection } from "prosemirror-state"; -/** - * A ProseMirror command for determining whether to exit a math block, based on - * specific conditions. Normally called when the user has - * - * @param outerView The main ProseMirror EditorView containing this math node. - * @param dir Used to indicate desired cursor position upon closing a math node. - * When set to -1, cursor will be placed BEFORE the math node. - * When set to +1, cursor will be placed AFTER the math node. - * @param borderMode An exit condition based on cursor position and direction. - * @param requireEmptySelection When TRUE, only exit the math node when the - * (inner) selection is empty. - * @returns A new ProseMirror command based on the input configuration. - */ -export function collapseMathNode(outerView, dir, requireOnBorder, requireEmptySelection) { - if (requireEmptySelection === void 0) { requireEmptySelection = true; } - // create a new ProseMirror command based on the input conditions - return function (innerState, dispatch) { - // get selection info - var outerState = outerView.state; - var _a = outerState.selection, outerTo = _a.to, outerFrom = _a.from; - var _b = innerState.selection, innerTo = _b.to, innerFrom = _b.from; - // only exit math node when selection is empty - if (requireEmptySelection && innerTo !== innerFrom) { - return false; - } - var currentPos = dir > 0 ? innerTo : innerFrom; - // when requireOnBorder is TRUE, collapse only when cursor - // is about to leave the bounds of the math node - if (requireOnBorder) { - // (subtract two from nodeSize to account for start and end tokens) - var nodeSize = innerState.doc.nodeSize - 2; - // early return if exit conditions not met - if (dir > 0 && currentPos < nodeSize) { - return false; - } - if (dir < 0 && currentPos > 0) { - return false; - } - } - // all exit conditions met, so close the math node by moving the cursor outside - if (dispatch) { - // set outer selection to be outside of the nodeview - var targetPos = dir > 0 ? outerTo : outerFrom; - outerView.dispatch(outerState.tr.setSelection(TextSelection.create(outerState.doc, targetPos))); - // must return focus to the outer view, otherwise no cursor will appear - outerView.focus(); - } - return true; - }; -} diff --git a/packages/editor/dist/extensions/math/plugin/commands/collapsemathnode.js b/packages/editor/dist/extensions/math/plugin/commands/collapsemathnode.js index 70502e16b..98dbe1c45 100644 --- a/packages/editor/dist/extensions/math/plugin/commands/collapsemathnode.js +++ b/packages/editor/dist/extensions/math/plugin/commands/collapsemathnode.js @@ -1,4 +1,7 @@ -import { TextSelection } from "prosemirror-state"; +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.collapseMathNode = void 0; +var prosemirror_state_1 = require("prosemirror-state"); /** * A ProseMirror command for determining whether to exit a math block, based on * specific conditions. Normally called when the user has @@ -12,7 +15,7 @@ import { TextSelection } from "prosemirror-state"; * (inner) selection is empty. * @returns A new ProseMirror command based on the input configuration. */ -export function collapseMathNode(outerView, dir, requireOnBorder, requireEmptySelection) { +function collapseMathNode(outerView, dir, requireOnBorder, requireEmptySelection) { if (requireEmptySelection === void 0) { requireEmptySelection = true; } // create a new ProseMirror command based on the input conditions return function (innerState, dispatch) { @@ -42,10 +45,11 @@ export function collapseMathNode(outerView, dir, requireOnBorder, requireEmptySe if (dispatch) { // set outer selection to be outside of the nodeview var targetPos = dir > 0 ? outerTo : outerFrom; - outerView.dispatch(outerState.tr.setSelection(TextSelection.create(outerState.doc, targetPos))); + outerView.dispatch(outerState.tr.setSelection(prosemirror_state_1.TextSelection.create(outerState.doc, targetPos))); // must return focus to the outer view, otherwise no cursor will appear outerView.focus(); } return true; }; } +exports.collapseMathNode = collapseMathNode; diff --git a/packages/editor/dist/extensions/math/plugin/commands/insert-math-cmd.d.ts b/packages/editor/dist/extensions/math/plugin/commands/insert-math-cmd.d.ts deleted file mode 100644 index 4d8ba65ba..000000000 --- a/packages/editor/dist/extensions/math/plugin/commands/insert-math-cmd.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Command } from "prosemirror-state"; -import { NodeType } from "prosemirror-model"; -/** - * Returns a new command that can be used to inserts a new math node at the - * user's current document position, provided that the document schema actually - * allows a math node to be placed there. - * - * @param mathNodeType An instance for either your math_inline or math_display - * NodeType. Must belong to the same schema that your EditorState uses! - * @param initialText (optional) The initial source content for the math editor. - */ -export declare function insertMathNode(mathNodeType: NodeType, initialText?: string): Command; diff --git a/packages/editor/dist/extensions/math/plugin/commands/insert-math-cmd.js b/packages/editor/dist/extensions/math/plugin/commands/insert-math-cmd.js deleted file mode 100644 index 554814a3a..000000000 --- a/packages/editor/dist/extensions/math/plugin/commands/insert-math-cmd.js +++ /dev/null @@ -1,27 +0,0 @@ -import { NodeSelection } from "prosemirror-state"; -//////////////////////////////////////////////////////////////////////////////// -/** - * Returns a new command that can be used to inserts a new math node at the - * user's current document position, provided that the document schema actually - * allows a math node to be placed there. - * - * @param mathNodeType An instance for either your math_inline or math_display - * NodeType. Must belong to the same schema that your EditorState uses! - * @param initialText (optional) The initial source content for the math editor. - */ -export function insertMathNode(mathNodeType, initialText) { - if (initialText === void 0) { initialText = ""; } - return function (state, dispatch) { - var $from = state.selection.$from, index = $from.index(); - if (!$from.parent.canReplaceWith(index, index, mathNodeType)) { - return false; - } - if (dispatch) { - var mathNode = mathNodeType.create({}, initialText ? state.schema.text(initialText) : null); - var tr = state.tr.replaceSelectionWith(mathNode); - tr = tr.setSelection(NodeSelection.create(tr.doc, $from.pos)); - dispatch(tr); - } - return true; - }; -} diff --git a/packages/editor/dist/extensions/math/plugin/commands/insertmathnode.js b/packages/editor/dist/extensions/math/plugin/commands/insertmathnode.js index 554814a3a..e9c86a6db 100644 --- a/packages/editor/dist/extensions/math/plugin/commands/insertmathnode.js +++ b/packages/editor/dist/extensions/math/plugin/commands/insertmathnode.js @@ -1,4 +1,7 @@ -import { NodeSelection } from "prosemirror-state"; +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.insertMathNode = void 0; +var prosemirror_state_1 = require("prosemirror-state"); //////////////////////////////////////////////////////////////////////////////// /** * Returns a new command that can be used to inserts a new math node at the @@ -9,7 +12,7 @@ import { NodeSelection } from "prosemirror-state"; * NodeType. Must belong to the same schema that your EditorState uses! * @param initialText (optional) The initial source content for the math editor. */ -export function insertMathNode(mathNodeType, initialText) { +function insertMathNode(mathNodeType, initialText) { if (initialText === void 0) { initialText = ""; } return function (state, dispatch) { var $from = state.selection.$from, index = $from.index(); @@ -19,9 +22,10 @@ export function insertMathNode(mathNodeType, initialText) { if (dispatch) { var mathNode = mathNodeType.create({}, initialText ? state.schema.text(initialText) : null); var tr = state.tr.replaceSelectionWith(mathNode); - tr = tr.setSelection(NodeSelection.create(tr.doc, $from.pos)); + tr = tr.setSelection(prosemirror_state_1.NodeSelection.create(tr.doc, $from.pos)); dispatch(tr); } return true; }; } +exports.insertMathNode = insertMathNode; diff --git a/packages/editor/dist/extensions/math/plugin/commands/move-cursor-cmd.js b/packages/editor/dist/extensions/math/plugin/commands/move-cursor-cmd.js index 2421f67fd..94e98199c 100644 --- a/packages/editor/dist/extensions/math/plugin/commands/move-cursor-cmd.js +++ b/packages/editor/dist/extensions/math/plugin/commands/move-cursor-cmd.js @@ -1,4 +1,7 @@ -import { TextSelection } from "prosemirror-state"; +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.nudgeCursorBackCmd = exports.nudgeCursorForwardCmd = exports.nudgeCursorCmd = void 0; +var prosemirror_state_1 = require("prosemirror-state"); //////////////////////////////////////////////////////////////////////////////// /** * Some browsers (cough firefox cough) don't properly handle cursor movement on @@ -6,7 +9,7 @@ import { TextSelection } from "prosemirror-state"; * * @see https://bugzilla.mozilla.org/show_bug.cgi?id=1252108 */ -export function nudgeCursorCmd(dir) { +function nudgeCursorCmd(dir) { return function (innerState, dispatch) { var _a = innerState.selection, to = _a.to, from = _a.from; // compute target position @@ -16,10 +19,11 @@ export function nudgeCursorCmd(dir) { var nodeSize = innerState.doc.nodeSize; var targetPos = Math.max(0, Math.min(nodeSize, currentPos + increment)); if (dispatch) { - dispatch(innerState.tr.setSelection(TextSelection.create(innerState.doc, targetPos))); + dispatch(innerState.tr.setSelection(prosemirror_state_1.TextSelection.create(innerState.doc, targetPos))); } return true; }; } -export var nudgeCursorForwardCmd = nudgeCursorCmd(+1); -export var nudgeCursorBackCmd = nudgeCursorCmd(-1); +exports.nudgeCursorCmd = nudgeCursorCmd; +exports.nudgeCursorForwardCmd = nudgeCursorCmd(+1); +exports.nudgeCursorBackCmd = nudgeCursorCmd(-1); diff --git a/packages/editor/dist/extensions/math/plugin/index.js b/packages/editor/dist/extensions/math/plugin/index.js index bb3ad0ec5..551d7bf05 100644 --- a/packages/editor/dist/extensions/math/plugin/index.js +++ b/packages/editor/dist/extensions/math/plugin/index.js @@ -1,18 +1,49 @@ +"use strict"; /*--------------------------------------------------------- * Author: Benjamin R. Bray * License: MIT (see LICENSE in project root for details) *--------------------------------------------------------*/ +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __exportStar = (this && this.__exportStar) || function(m, exports) { + for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.mathSerializer = exports.insertMathNode = exports.mathSelectPlugin = exports.REGEX_INLINE_MATH_DOLLARS_ESCAPED = exports.REGEX_INLINE_MATH_DOLLARS = exports.REGEX_BLOCK_MATH_DOLLARS = exports.makeInlineMathInputRule = exports.makeBlockMathInputRule = exports.mathBackspaceCmd = exports.createMathSchema = exports.mathSchemaSpec = exports.createMathView = exports.mathPlugin = exports.MathView = void 0; // core functionality -export { MathView } from "./math-node-view"; -export { mathPlugin, createMathView, } from "./math-plugin"; -export { mathSchemaSpec, createMathSchema } from "./math-schema"; +var math_nodeview_1 = require("./math-nodeview"); +Object.defineProperty(exports, "MathView", { enumerable: true, get: function () { return math_nodeview_1.MathView; } }); +var math_plugin_1 = require("./math-plugin"); +Object.defineProperty(exports, "mathPlugin", { enumerable: true, get: function () { return math_plugin_1.mathPlugin; } }); +Object.defineProperty(exports, "createMathView", { enumerable: true, get: function () { return math_plugin_1.createMathView; } }); +var math_schema_1 = require("./math-schema"); +Object.defineProperty(exports, "mathSchemaSpec", { enumerable: true, get: function () { return math_schema_1.mathSchemaSpec; } }); +Object.defineProperty(exports, "createMathSchema", { enumerable: true, get: function () { return math_schema_1.createMathSchema; } }); // recommended plugins -export { mathBackspaceCmd } from "./plugins/math-backspace"; -export { makeBlockMathInputRule, makeInlineMathInputRule, REGEX_BLOCK_MATH_DOLLARS, REGEX_INLINE_MATH_DOLLARS, REGEX_INLINE_MATH_DOLLARS_ESCAPED, } from "./plugins/math-input-rules"; +var math_backspace_1 = require("./plugins/math-backspace"); +Object.defineProperty(exports, "mathBackspaceCmd", { enumerable: true, get: function () { return math_backspace_1.mathBackspaceCmd; } }); +var math_inputrules_1 = require("./plugins/math-inputrules"); +Object.defineProperty(exports, "makeBlockMathInputRule", { enumerable: true, get: function () { return math_inputrules_1.makeBlockMathInputRule; } }); +Object.defineProperty(exports, "makeInlineMathInputRule", { enumerable: true, get: function () { return math_inputrules_1.makeInlineMathInputRule; } }); +Object.defineProperty(exports, "REGEX_BLOCK_MATH_DOLLARS", { enumerable: true, get: function () { return math_inputrules_1.REGEX_BLOCK_MATH_DOLLARS; } }); +Object.defineProperty(exports, "REGEX_INLINE_MATH_DOLLARS", { enumerable: true, get: function () { return math_inputrules_1.REGEX_INLINE_MATH_DOLLARS; } }); +Object.defineProperty(exports, "REGEX_INLINE_MATH_DOLLARS_ESCAPED", { enumerable: true, get: function () { return math_inputrules_1.REGEX_INLINE_MATH_DOLLARS_ESCAPED; } }); // optional / experimental plugins -export { mathSelectPlugin } from "./plugins/math-select"; +var math_select_1 = require("./plugins/math-select"); +Object.defineProperty(exports, "mathSelectPlugin", { enumerable: true, get: function () { return math_select_1.mathSelectPlugin; } }); // commands -export { insertMathNode } from "./commands/insert-math-node"; +var insertmathnode_1 = require("./commands/insertmathnode"); +Object.defineProperty(exports, "insertMathNode", { enumerable: true, get: function () { return insertmathnode_1.insertMathNode; } }); // utilities -export { mathSerializer } from "./utils/text-serializer"; -export * from "./utils/types"; +var text_serializer_1 = require("./utils/text-serializer"); +Object.defineProperty(exports, "mathSerializer", { enumerable: true, get: function () { return text_serializer_1.mathSerializer; } }); +__exportStar(require("./utils/types"), exports); diff --git a/packages/editor/dist/extensions/math/plugin/math-nodeview.js b/packages/editor/dist/extensions/math/plugin/math-nodeview.js index 0160fbfa0..2c547f58c 100644 --- a/packages/editor/dist/extensions/math/plugin/math-nodeview.js +++ b/packages/editor/dist/extensions/math/plugin/math-nodeview.js @@ -1,13 +1,16 @@ +"use strict"; /*--------------------------------------------------------- * Author: Benjamin R. Bray * License: MIT (see LICENSE in project root for details) *--------------------------------------------------------*/ -import { EditorState, TextSelection, } from "prosemirror-state"; -import { EditorView, } from "prosemirror-view"; -import { StepMap } from "prosemirror-transform"; -import { keymap } from "prosemirror-keymap"; -import { newlineInCode, chainCommands, deleteSelection, } from "prosemirror-commands"; -import { collapseMathNode } from "./commands/collapse-math-node"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.MathView = void 0; +var prosemirror_state_1 = require("prosemirror-state"); +var prosemirror_view_1 = require("prosemirror-view"); +var prosemirror_transform_1 = require("prosemirror-transform"); +var prosemirror_keymap_1 = require("prosemirror-keymap"); +var prosemirror_commands_1 = require("prosemirror-commands"); +var collapsemathnode_1 = require("./commands/collapsemathnode"); var MathView = /** @class */ (function () { // == Lifecycle ===================================== // /** @@ -178,7 +181,7 @@ var MathView = /** @class */ (function () { var _a = this._innerView.state.applyTransaction(tr), state = _a.state, transactions = _a.transactions; this._innerView.updateState(state); if (!tr.getMeta("fromOutside")) { - var outerTr = this._outerView.state.tr, offsetMap = StepMap.offset(this._getPos() + 1); + var outerTr = this._outerView.state.tr, offsetMap = prosemirror_transform_1.StepMap.offset(this._getPos() + 1); for (var i = 0; i < transactions.length; i++) { var steps = transactions[i].steps; for (var j = 0; j < steps.length; j++) { @@ -202,18 +205,18 @@ var MathView = /** @class */ (function () { if (!this._mathSrcElt) throw new Error("_mathSrcElt does not exist!"); // create a nested ProseMirror view - this._innerView = new EditorView(this._mathSrcElt, { - state: EditorState.create({ + this._innerView = new prosemirror_view_1.EditorView(this._mathSrcElt, { + state: prosemirror_state_1.EditorState.create({ doc: this._node, plugins: [ - keymap({ + (0, prosemirror_keymap_1.keymap)({ Tab: function (state, dispatch) { if (dispatch) { dispatch(state.tr.insertText("\t")); } return true; }, - Backspace: chainCommands(deleteSelection, function (state, dispatch, tr_inner) { + Backspace: (0, prosemirror_commands_1.chainCommands)(prosemirror_commands_1.deleteSelection, function (state, dispatch, tr_inner) { // default backspace behavior for non-empty selections if (!state.selection.empty) { return false; @@ -233,12 +236,12 @@ var MathView = /** @class */ (function () { // this._outerView.focus(); // return true; // }, - Enter: chainCommands(newlineInCode, collapseMathNode(this._outerView, +1, false)), - "Ctrl-Enter": collapseMathNode(this._outerView, +1, false), - ArrowLeft: collapseMathNode(this._outerView, -1, true), - ArrowRight: collapseMathNode(this._outerView, +1, true), - ArrowUp: collapseMathNode(this._outerView, -1, true), - ArrowDown: collapseMathNode(this._outerView, +1, true), + Enter: (0, prosemirror_commands_1.chainCommands)(prosemirror_commands_1.newlineInCode, (0, collapsemathnode_1.collapseMathNode)(this._outerView, +1, false)), + "Ctrl-Enter": (0, collapsemathnode_1.collapseMathNode)(this._outerView, +1, false), + ArrowLeft: (0, collapsemathnode_1.collapseMathNode)(this._outerView, -1, true), + ArrowRight: (0, collapsemathnode_1.collapseMathNode)(this._outerView, +1, true), + ArrowUp: (0, collapsemathnode_1.collapseMathNode)(this._outerView, -1, true), + ArrowDown: (0, collapsemathnode_1.collapseMathNode)(this._outerView, +1, true), }), ], }), @@ -255,7 +258,7 @@ var MathView = /** @class */ (function () { var prevCursorPos = maybePos !== null && maybePos !== void 0 ? maybePos : 0; // compute position that cursor should appear within the expanded math node var innerPos = prevCursorPos <= this._getPos() ? 0 : this._node.nodeSize - 2; - this._innerView.dispatch(innerState.tr.setSelection(TextSelection.create(innerState.doc, innerPos))); + this._innerView.dispatch(innerState.tr.setSelection(prosemirror_state_1.TextSelection.create(innerState.doc, innerPos))); this._isEditing = true; }; /** @@ -277,4 +280,4 @@ var MathView = /** @class */ (function () { }; return MathView; }()); -export { MathView }; +exports.MathView = MathView; diff --git a/packages/editor/dist/extensions/math/plugin/math-plugin.js b/packages/editor/dist/extensions/math/plugin/math-plugin.js index 0cee5e45e..b2a8f9ba1 100644 --- a/packages/editor/dist/extensions/math/plugin/math-plugin.js +++ b/packages/editor/dist/extensions/math/plugin/math-plugin.js @@ -1,18 +1,21 @@ +"use strict"; /*--------------------------------------------------------- * Author: Benjamin R. Bray * License: MIT (see LICENSE in project root for details) *--------------------------------------------------------*/ -import { Plugin as ProsePlugin, PluginKey, } from "prosemirror-state"; -import { MathView } from "./math-node-view"; -import { KatexRenderer } from "./renderers/katex"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.mathPlugin = exports.createMathView = void 0; +var prosemirror_state_1 = require("prosemirror-state"); +var math_nodeview_1 = require("./math-nodeview"); +var katex_1 = require("./renderers/katex"); // uniquely identifies the prosemirror-math plugin -var MATH_PLUGIN_KEY = new PluginKey("prosemirror-math"); +var MATH_PLUGIN_KEY = new prosemirror_state_1.PluginKey("prosemirror-math"); /** * Returns a function suitable for passing as a field in `EditorProps.nodeViews`. * @param inline TRUE for block math, FALSE for inline math. * @see https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews */ -export function createMathView(inline) { +function createMathView(inline) { return function (node, view, getPos) { /** @todo is this necessary? * Docs says that for any function proprs, the current plugin instance @@ -24,9 +27,9 @@ export function createMathView(inline) { } var nodeViews = pluginState.activeNodeViews; // set up NodeView - var nodeView = new MathView(node, view, getPos, { + var nodeView = new math_nodeview_1.MathView(node, view, getPos, { className: inline ? "math-inline" : "math-block", - renderer: inline ? KatexRenderer.inline : KatexRenderer.block, + renderer: inline ? katex_1.KatexRenderer.inline : katex_1.KatexRenderer.block, tagName: inline ? "span" : "div", }, MATH_PLUGIN_KEY, function () { nodeViews.splice(nodeViews.indexOf(nodeView)); @@ -35,6 +38,7 @@ export function createMathView(inline) { return nodeView; }; } +exports.createMathView = createMathView; var mathPluginSpec = { key: MATH_PLUGIN_KEY, state: { @@ -68,4 +72,4 @@ var mathPluginSpec = { }, }, }; -export var mathPlugin = new ProsePlugin(mathPluginSpec); +exports.mathPlugin = new prosemirror_state_1.Plugin(mathPluginSpec); diff --git a/packages/editor/dist/extensions/math/plugin/math-schema.js b/packages/editor/dist/extensions/math/plugin/math-schema.js index b8384789e..640d1a87f 100644 --- a/packages/editor/dist/extensions/math/plugin/math-schema.js +++ b/packages/editor/dist/extensions/math/plugin/math-schema.js @@ -1,3 +1,4 @@ +"use strict"; /*--------------------------------------------------------- * Author: Benjamin R. Bray * License: MIT (see LICENSE in project root for details) @@ -38,16 +39,18 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) { } return to.concat(ar || Array.prototype.slice.call(from)); }; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.extendMathSchemaSpec = exports.createMathSchema = exports.mathSchemaSpec = void 0; // prosemirror imports -import { Schema, } from "prosemirror-model"; -import { defaultBlockMathParseRules, defaultInlineMathParseRules, } from "./plugins/math-paste-rules"; +var prosemirror_model_1 = require("prosemirror-model"); +var math_paste_rules_1 = require("./plugins/math-paste-rules"); //////////////////////////////////////////////////////////// // force typescript to infer generic type arguments for SchemaSpec function createSchemaSpec(spec) { return spec; } // bare minimum ProseMirror schema for working with math nodes -export var mathSchemaSpec = createSchemaSpec({ +exports.mathSchemaSpec = createSchemaSpec({ nodes: { // :: NodeSpec top-level document node doc: { @@ -67,7 +70,7 @@ export var mathSchemaSpec = createSchemaSpec({ inline: true, atom: true, toDOM: function () { return ["math-inline", { class: "math-node" }, 0]; }, - parseDOM: __spreadArray([{ tag: "math-inline" }], __read(defaultInlineMathParseRules), false), + parseDOM: __spreadArray([{ tag: "math-inline" }], __read(math_paste_rules_1.defaultInlineMathParseRules), false), }, math_display: { group: "block math", @@ -75,7 +78,7 @@ export var mathSchemaSpec = createSchemaSpec({ atom: true, code: true, toDOM: function () { return ["math-display", { class: "math-node" }, 0]; }, - parseDOM: __spreadArray([{ tag: "math-display" }], __read(defaultBlockMathParseRules), false), + parseDOM: __spreadArray([{ tag: "math-display" }], __read(math_paste_rules_1.defaultBlockMathParseRules), false), }, text: { group: "inline", @@ -93,9 +96,10 @@ export var mathSchemaSpec = createSchemaSpec({ /** * Use the prosemirror-math default SchemaSpec to create a new Schema. */ -export function createMathSchema() { - return new Schema(mathSchemaSpec); +function createMathSchema() { + return new prosemirror_model_1.Schema(exports.mathSchemaSpec); } +exports.createMathSchema = createMathSchema; /** * Create a new SchemaSpec by adding math nodes to an existing spec. @@ -107,8 +111,9 @@ export function createMathSchema() { * @param baseSpec The SchemaSpec to extend. Must specify a `marks` field, and * must be a raw object (not an OrderedMap). */ -export function extendMathSchemaSpec(baseSpec) { - var nodes = __assign(__assign({}, baseSpec.nodes), mathSchemaSpec.nodes); - var marks = __assign(__assign({}, baseSpec.marks), mathSchemaSpec.marks); +function extendMathSchemaSpec(baseSpec) { + var nodes = __assign(__assign({}, baseSpec.nodes), exports.mathSchemaSpec.nodes); + var marks = __assign(__assign({}, baseSpec.marks), exports.mathSchemaSpec.marks); return { nodes: nodes, marks: marks, topNode: baseSpec.topNode }; } +exports.extendMathSchemaSpec = extendMathSchemaSpec; diff --git a/packages/editor/dist/extensions/math/plugin/plugins/math-backspace.js b/packages/editor/dist/extensions/math/plugin/plugins/math-backspace.js index 23646606f..85d630a36 100644 --- a/packages/editor/dist/extensions/math/plugin/plugins/math-backspace.js +++ b/packages/editor/dist/extensions/math/plugin/plugins/math-backspace.js @@ -1,5 +1,8 @@ -import { NodeSelection } from "prosemirror-state"; -export var mathBackspaceCmd = function (state, dispatch) { +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.mathBackspaceCmd = void 0; +var prosemirror_state_1 = require("prosemirror-state"); +var mathBackspaceCmd = function (state, dispatch) { // check node before var $from = state.selection.$from; var nodeBefore = $from.nodeBefore; @@ -11,7 +14,7 @@ export var mathBackspaceCmd = function (state, dispatch) { var index = $from.index($from.depth); var $beforePos = state.doc.resolve($from.posAtIndex(index - 1)); if (dispatch) { - dispatch(state.tr.setSelection(new NodeSelection($beforePos))); + dispatch(state.tr.setSelection(new prosemirror_state_1.NodeSelection($beforePos))); } return true; } @@ -23,3 +26,4 @@ export var mathBackspaceCmd = function (state, dispatch) { } return false; }; +exports.mathBackspaceCmd = mathBackspaceCmd; diff --git a/packages/editor/dist/extensions/math/plugin/plugins/math-inputrules.js b/packages/editor/dist/extensions/math/plugin/plugins/math-inputrules.js index 6b4868f8f..26d1c485f 100644 --- a/packages/editor/dist/extensions/math/plugin/plugins/math-inputrules.js +++ b/packages/editor/dist/extensions/math/plugin/plugins/math-inputrules.js @@ -1,31 +1,34 @@ +"use strict"; /*--------------------------------------------------------- * Author: Benjamin R. Bray * License: MIT (see LICENSE in project root for details) *--------------------------------------------------------*/ -import { InputRule } from "prosemirror-inputrules"; -import { NodeSelection } from "prosemirror-state"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.makeBlockMathInputRule = exports.makeInlineMathInputRule = exports.REGEX_BLOCK_MATH_DOLLARS = exports.REGEX_INLINE_MATH_DOLLARS_ESCAPED = exports.REGEX_INLINE_MATH_DOLLARS = void 0; +var prosemirror_inputrules_1 = require("prosemirror-inputrules"); +var prosemirror_state_1 = require("prosemirror-state"); //////////////////////////////////////////////////////////// // ---- Inline Input Rules ------------------------------ // // simple input rule for inline math -export var REGEX_INLINE_MATH_DOLLARS = /\$\$(.+)\$\$/; //new RegExp("\$(.+)\$", "i"); +exports.REGEX_INLINE_MATH_DOLLARS = /\$\$(.+)\$\$/; //new RegExp("\$(.+)\$", "i"); // negative lookbehind regex notation allows for escaped \$ delimiters // (requires browser supporting ECMA2018 standard -- currently only Chrome / FF) // (see https://javascript.info/regexp-lookahead-lookbehind) -export var REGEX_INLINE_MATH_DOLLARS_ESCAPED = (function () { +exports.REGEX_INLINE_MATH_DOLLARS_ESCAPED = (function () { // attempt to create regex with negative lookbehind try { return new RegExp("(? * ``` */ -export var wikipediaBlockMathParseRule = { +exports.wikipediaBlockMathParseRule = { tag: "dl", getAttrs: function (p) { var dl = p; @@ -165,7 +168,7 @@ export var wikipediaBlockMathParseRule = { * * ``` */ -export var wikipediaInlineMathParseRule = { +exports.wikipediaInlineMathParseRule = { tag: "span", getAttrs: function (p) { var span = p; @@ -185,9 +188,9 @@ export var wikipediaInlineMathParseRule = { }; // -- MathJax ------------------------------------------- // //////////////////////////////////////////////////////////// -export var defaultInlineMathParseRules = [ - wikipediaInlineMathParseRule, +exports.defaultInlineMathParseRules = [ + exports.wikipediaInlineMathParseRule, ]; -export var defaultBlockMathParseRules = [ - wikipediaBlockMathParseRule, +exports.defaultBlockMathParseRules = [ + exports.wikipediaBlockMathParseRule, ]; diff --git a/packages/editor/dist/extensions/math/plugin/plugins/math-select.js b/packages/editor/dist/extensions/math/plugin/plugins/math-select.js index c5a81288c..68ad02e4a 100644 --- a/packages/editor/dist/extensions/math/plugin/plugins/math-select.js +++ b/packages/editor/dist/extensions/math/plugin/plugins/math-select.js @@ -1,10 +1,13 @@ +"use strict"; /*--------------------------------------------------------- * Author: Benjamin R. Bray * License: MIT (see LICENSE in project root for details) *--------------------------------------------------------*/ +Object.defineProperty(exports, "__esModule", { value: true }); +exports.mathSelectPlugin = void 0; // prosemirror imports -import { Plugin as ProsePlugin, } from "prosemirror-state"; -import { DecorationSet, Decoration } from "prosemirror-view"; +var prosemirror_state_1 = require("prosemirror-state"); +var prosemirror_view_1 = require("prosemirror-view"); //////////////////////////////////////////////////////////// /** * Uses the selection to determine which math_select decorations @@ -29,9 +32,9 @@ var checkSelection = function (arg) { } return true; }); - return DecorationSet.create(arg.doc, result.map(function (_a) { + return prosemirror_view_1.DecorationSet.create(arg.doc, result.map(function (_a) { var start = _a.start, end = _a.end; - return Decoration.node(start, end, { class: "math-select" }); + return prosemirror_view_1.Decoration.node(start, end, { class: "math-select" }); })); }; /** @@ -44,7 +47,7 @@ var checkSelection = function (arg) { * * @todo (6/13/20) math selection rectangles are not quite even with text */ -export var mathSelectPlugin = new ProsePlugin({ +exports.mathSelectPlugin = new prosemirror_state_1.Plugin({ state: { init: function (config, partialState) { return checkSelection(partialState); @@ -59,7 +62,7 @@ export var mathSelectPlugin = new ProsePlugin({ }, props: { decorations: function (state) { - return mathSelectPlugin.getState(state); + return exports.mathSelectPlugin.getState(state); }, }, }); diff --git a/packages/editor/dist/extensions/math/plugin/renderers/katex.js b/packages/editor/dist/extensions/math/plugin/renderers/katex.js index ba719b03a..c0189ba4c 100644 --- a/packages/editor/dist/extensions/math/plugin/renderers/katex.js +++ b/packages/editor/dist/extensions/math/plugin/renderers/katex.js @@ -1,16 +1,22 @@ -import katex from "katex"; +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.KatexRenderer = void 0; +var katex_1 = __importDefault(require("katex")); // Chemistry formulas support -import "katex/contrib/mhchem/mhchem"; -export var KatexRenderer = { +require("katex/contrib/mhchem/mhchem"); +exports.KatexRenderer = { inline: function (text, element) { - katex.render(text, element, { + katex_1.default.render(text, element, { displayMode: false, globalGroup: true, throwOnError: false, }); }, block: function (text, element) { - katex.render(text, element, { + katex_1.default.render(text, element, { displayMode: true, globalGroup: true, throwOnError: false, diff --git a/packages/editor/dist/extensions/math/plugin/renderers/types.js b/packages/editor/dist/extensions/math/plugin/renderers/types.js index cb0ff5c3b..c8ad2e549 100644 --- a/packages/editor/dist/extensions/math/plugin/renderers/types.js +++ b/packages/editor/dist/extensions/math/plugin/renderers/types.js @@ -1 +1,2 @@ -export {}; +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); diff --git a/packages/editor/dist/extensions/math/plugin/utils/text-serializer.js b/packages/editor/dist/extensions/math/plugin/utils/text-serializer.js index 8ba3753ba..7b7c2a335 100644 --- a/packages/editor/dist/extensions/math/plugin/utils/text-serializer.js +++ b/packages/editor/dist/extensions/math/plugin/utils/text-serializer.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -9,6 +10,8 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.mathSerializer = void 0; var ProseMirrorTextSerializer = /** @class */ (function () { function ProseMirrorTextSerializer(fns, base) { // use base serializer as a fallback @@ -63,7 +66,7 @@ var ProseMirrorTextSerializer = /** @class */ (function () { }; return ProseMirrorTextSerializer; }()); -export var mathSerializer = new ProseMirrorTextSerializer({ +exports.mathSerializer = new ProseMirrorTextSerializer({ nodes: { math_inline: function (node) { return "$".concat(node.textContent, "$"); }, math_display: function (node) { return "\n\n$$\n".concat(node.textContent, "\n$$"); }, diff --git a/packages/editor/dist/extensions/math/plugin/utils/types.js b/packages/editor/dist/extensions/math/plugin/utils/types.js index cb0ff5c3b..c8ad2e549 100644 --- a/packages/editor/dist/extensions/math/plugin/utils/types.js +++ b/packages/editor/dist/extensions/math/plugin/utils/types.js @@ -1 +1,2 @@ -export {}; +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); diff --git a/packages/editor/dist/extensions/orderedlist/index.js b/packages/editor/dist/extensions/orderedlist/index.js index e5d88c387..868ebaf66 100644 --- a/packages/editor/dist/extensions/orderedlist/index.js +++ b/packages/editor/dist/extensions/orderedlist/index.js @@ -1,3 +1,19 @@ -import { OrderedList } from "./ordered-list"; -export * from "./ordered-list"; -export default OrderedList; +"use strict"; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __exportStar = (this && this.__exportStar) || function(m, exports) { + for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); +}; +Object.defineProperty(exports, "__esModule", { value: true }); +var orderedlist_1 = require("./orderedlist"); +__exportStar(require("./orderedlist"), exports); +exports.default = orderedlist_1.OrderedList; diff --git a/packages/editor/dist/extensions/orderedlist/orderedlist.js b/packages/editor/dist/extensions/orderedlist/orderedlist.js index c62d47936..e39e7ff00 100644 --- a/packages/editor/dist/extensions/orderedlist/orderedlist.js +++ b/packages/editor/dist/extensions/orderedlist/orderedlist.js @@ -1,5 +1,11 @@ -import TiptapOrderedList from "@tiptap/extension-ordered-list"; -export var OrderedList = TiptapOrderedList.extend({ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.OrderedList = void 0; +var extension_ordered_list_1 = __importDefault(require("@tiptap/extension-ordered-list")); +exports.OrderedList = extension_ordered_list_1.default.extend({ addAttributes: function () { return { listType: { diff --git a/packages/editor/dist/extensions/outlinelist/component.js b/packages/editor/dist/extensions/outlinelist/component.js index 4d1c225a1..a35c5e882 100644 --- a/packages/editor/dist/extensions/outlinelist/component.js +++ b/packages/editor/dist/extensions/outlinelist/component.js @@ -1,16 +1,19 @@ -import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime"; -import { Text } from "rebass"; -import { useMemo } from "react"; -import { OutlineListItem } from "../outline-list-item"; -export function OutlineListComponent(props) { +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.OutlineListComponent = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var rebass_1 = require("rebass"); +var react_1 = require("react"); +var outlinelistitem_1 = require("../outlinelistitem"); +function OutlineListComponent(props) { var editor = props.editor, getPos = props.getPos, node = props.node, updateAttributes = props.updateAttributes, forwardRef = props.forwardRef; var collapsed = node.attrs.collapsed; - var isNested = useMemo(function () { + var isNested = (0, react_1.useMemo)(function () { var _a; var pos = editor.state.doc.resolve(getPos()); - return ((_a = pos.parent) === null || _a === void 0 ? void 0 : _a.type.name) === OutlineListItem.name; + return ((_a = pos.parent) === null || _a === void 0 ? void 0 : _a.type.name) === outlinelistitem_1.OutlineListItem.name; }, []); - return (_jsx(_Fragment, { children: _jsx(Text, { className: "outline-list", as: "div", ref: forwardRef, sx: { + return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(rebass_1.Text, { className: "outline-list", as: "div", ref: forwardRef, sx: { ul: { display: collapsed ? "none" : "block", paddingInlineStart: 0, @@ -20,3 +23,4 @@ export function OutlineListComponent(props) { }, } }) })); } +exports.OutlineListComponent = OutlineListComponent; diff --git a/packages/editor/dist/extensions/outlinelist/index.js b/packages/editor/dist/extensions/outlinelist/index.js index 5aec1c8aa..493cabb6c 100644 --- a/packages/editor/dist/extensions/outlinelist/index.js +++ b/packages/editor/dist/extensions/outlinelist/index.js @@ -1 +1,17 @@ -export * from "./outline-list"; +"use strict"; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __exportStar = (this && this.__exportStar) || function(m, exports) { + for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); +}; +Object.defineProperty(exports, "__esModule", { value: true }); +__exportStar(require("./outlinelist"), exports); diff --git a/packages/editor/dist/extensions/outlinelist/outlinelist.js b/packages/editor/dist/extensions/outlinelist/outlinelist.js index 0c39baf1e..193404c13 100644 --- a/packages/editor/dist/extensions/outlinelist/outlinelist.js +++ b/packages/editor/dist/extensions/outlinelist/outlinelist.js @@ -1,9 +1,12 @@ -import { Node, mergeAttributes, wrappingInputRule } from "@tiptap/core"; -import { createNodeView } from "../react"; -import { OutlineListComponent } from "./component"; -export var inputRegex = /^\s*(-o)\s$/; +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.OutlineList = exports.inputRegex = void 0; +var core_1 = require("@tiptap/core"); +var react_1 = require("../react"); +var component_1 = require("./component"); +exports.inputRegex = /^\s*(-o)\s$/; var outlineListItemName = "outlineListItem"; -export var OutlineList = Node.create({ +exports.OutlineList = core_1.Node.create({ name: "outlineList", addOptions: function () { return { @@ -36,7 +39,7 @@ export var OutlineList = Node.create({ var HTMLAttributes = _a.HTMLAttributes; return [ "ul", - mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { + (0, core_1.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes, { "data-type": this.name, }), 0, @@ -61,15 +64,15 @@ export var OutlineList = Node.create({ }, addInputRules: function () { return [ - wrappingInputRule({ - find: inputRegex, + (0, core_1.wrappingInputRule)({ + find: exports.inputRegex, type: this.type, }), ]; }, addNodeView: function () { var _this = this; - return createNodeView(OutlineListComponent, { + return (0, react_1.createNodeView)(component_1.OutlineListComponent, { contentDOMFactory: function () { var content = document.createElement("ul"); content.classList.add("".concat(_this.name.toLowerCase(), "-content-wrapper")); diff --git a/packages/editor/dist/extensions/outlinelistitem/component.js b/packages/editor/dist/extensions/outlinelistitem/component.js index 894660ffb..0eca89271 100644 --- a/packages/editor/dist/extensions/outlinelistitem/component.js +++ b/packages/editor/dist/extensions/outlinelistitem/component.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -25,22 +26,24 @@ var __read = (this && this.__read) || function (o, n) { } return ar; }; -import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; -import { Box, Flex, Text } from "rebass"; -import { Icon } from "../../toolbar/components/icon"; -import { Icons } from "../../toolbar/icons"; -import { findChildren, } from "@tiptap/core"; -import { OutlineList } from "../outline-list/outline-list"; -export function OutlineListItemComponent(props) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.OutlineListItemComponent = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var rebass_1 = require("rebass"); +var icon_1 = require("../../toolbar/components/icon"); +var icons_1 = require("../../toolbar/icons"); +var core_1 = require("@tiptap/core"); +var outlinelist_1 = require("../outline-list/outlinelist"); +function OutlineListItemComponent(props) { var _a, _b; var editor = props.editor, updateAttributes = props.updateAttributes, node = props.node, getPos = props.getPos, forwardRef = props.forwardRef; - var isNested = ((_a = node.lastChild) === null || _a === void 0 ? void 0 : _a.type.name) === OutlineList.name; + var isNested = ((_a = node.lastChild) === null || _a === void 0 ? void 0 : _a.type.name) === outlinelist_1.OutlineList.name; var isCollapsed = isNested && ((_b = node.lastChild) === null || _b === void 0 ? void 0 : _b.attrs.collapsed); - return (_jsxs(Flex, { children: [_jsxs(Flex, __assign({ className: "outline", sx: { + return ((0, jsx_runtime_1.jsxs)(rebass_1.Flex, { children: [(0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ className: "outline", sx: { flexDirection: "column", alignItems: "center", mt: "3px", - } }, { children: [isNested ? (_jsx(Icon, { path: isCollapsed ? Icons.chevronRight : Icons.chevronDown, title: isCollapsed + } }, { children: [isNested ? ((0, jsx_runtime_1.jsx)(icon_1.Icon, { path: isCollapsed ? icons_1.Icons.chevronRight : icons_1.Icons.chevronDown, title: isCollapsed ? "Click to uncollapse list" : "Click to collapse list", sx: { cursor: "pointer", @@ -52,12 +55,12 @@ export function OutlineListItemComponent(props) { fill: "var(--checked) !important", }, }, size: 18, onMouseDown: function (e) { return e.preventDefault(); }, onClick: function () { - var _a = __read(findChildren(node, function (node) { return node.type.name === OutlineList.name; }), 1), subList = _a[0]; + var _a = __read((0, core_1.findChildren)(node, function (node) { return node.type.name === outlinelist_1.OutlineList.name; }), 1), subList = _a[0]; if (!subList) return; var pos = subList.pos; editor.commands.toggleOutlineCollapse(pos + getPos() + 1, !isCollapsed); - } })) : (_jsx(Icon, { path: Icons.circle, size: 18, sx: { transform: "scale(0.4)" } })), isNested && !isCollapsed && (_jsx(Box, { sx: { + } })) : ((0, jsx_runtime_1.jsx)(icon_1.Icon, { path: icons_1.Icons.circle, size: 18, sx: { transform: "scale(0.4)" } })), isNested && !isCollapsed && ((0, jsx_runtime_1.jsx)(rebass_1.Box, { sx: { flex: 1, width: 1, mt: 2, @@ -70,9 +73,10 @@ export function OutlineListItemComponent(props) { backgroundColor: "fontTertiary", width: 4, }, - }, contentEditable: false }))] })), _jsx(Text, { as: "li", ref: forwardRef, sx: { + }, contentEditable: false }))] })), (0, jsx_runtime_1.jsx)(rebass_1.Text, { as: "li", ref: forwardRef, sx: { pl: 2, listStyleType: "none", flex: 1, } })] })); } +exports.OutlineListItemComponent = OutlineListItemComponent; diff --git a/packages/editor/dist/extensions/outlinelistitem/index.js b/packages/editor/dist/extensions/outlinelistitem/index.js index 1b1e56bc7..81ad99aa5 100644 --- a/packages/editor/dist/extensions/outlinelistitem/index.js +++ b/packages/editor/dist/extensions/outlinelistitem/index.js @@ -1 +1,17 @@ -export * from "./outline-list-item"; +"use strict"; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __exportStar = (this && this.__exportStar) || function(m, exports) { + for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); +}; +Object.defineProperty(exports, "__esModule", { value: true }); +__exportStar(require("./outlinelistitem"), exports); diff --git a/packages/editor/dist/extensions/outlinelistitem/outlinelistitem.js b/packages/editor/dist/extensions/outlinelistitem/outlinelistitem.js index b9e7179af..ac1e5684b 100644 --- a/packages/editor/dist/extensions/outlinelistitem/outlinelistitem.js +++ b/packages/editor/dist/extensions/outlinelistitem/outlinelistitem.js @@ -1,3 +1,4 @@ +"use strict"; var __read = (this && this.__read) || function (o, n) { var m = typeof Symbol === "function" && o[Symbol.iterator]; if (!m) return o; @@ -14,13 +15,15 @@ var __read = (this && this.__read) || function (o, n) { } return ar; }; -import { Node, mergeAttributes, findChildren } from "@tiptap/core"; -import { findParentNodeOfTypeClosestToPos } from "prosemirror-utils"; -import { onBackspacePressed } from "../list-item/commands"; -import { OutlineList } from "../outline-list/outline-list"; -import { createNodeView } from "../react"; -import { OutlineListItemComponent } from "./component"; -export var OutlineListItem = Node.create({ +Object.defineProperty(exports, "__esModule", { value: true }); +exports.OutlineListItem = void 0; +var core_1 = require("@tiptap/core"); +var prosemirror_utils_1 = require("prosemirror-utils"); +var commands_1 = require("../list-item/commands"); +var outlinelist_1 = require("../outline-list/outlinelist"); +var react_1 = require("../react"); +var component_1 = require("./component"); +exports.OutlineListItem = core_1.Node.create({ name: "outlineListItem", addOptions: function () { return { @@ -40,7 +43,7 @@ export var OutlineListItem = Node.create({ var HTMLAttributes = _a.HTMLAttributes; return [ "li", - mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { + (0, core_1.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes, { "data-type": this.name, }), 0, @@ -72,7 +75,7 @@ export var OutlineListItem = Node.create({ "Shift-Tab": function () { return _this.editor.commands.liftListItem(_this.name); }, Backspace: function (_a) { var editor = _a.editor; - return onBackspacePressed(editor, _this.name, _this.type); + return (0, commands_1.onBackspacePressed)(editor, _this.name, _this.type); }, }; }, @@ -90,7 +93,7 @@ export var OutlineListItem = Node.create({ }; }, addNodeView: function () { - return createNodeView(OutlineListItemComponent, { + return (0, react_1.createNodeView)(component_1.OutlineListItemComponent, { contentDOMFactory: true, // wrapperFactory: () => document.createElement("li"), }); @@ -100,13 +103,13 @@ function findSublist(editor, type) { var _a, _b; var selection = editor.state.selection; var $from = selection.$from; - var listItem = findParentNodeOfTypeClosestToPos($from, type); + var listItem = (0, prosemirror_utils_1.findParentNodeOfTypeClosestToPos)($from, type); if (!listItem) return false; - var _c = __read(findChildren(listItem.node, function (node) { return node.type.name === OutlineList.name; }), 1), subList = _c[0]; + var _c = __read((0, core_1.findChildren)(listItem.node, function (node) { return node.type.name === outlinelist_1.OutlineList.name; }), 1), subList = _c[0]; if (!subList) return false; - var isNested = ((_a = subList === null || subList === void 0 ? void 0 : subList.node) === null || _a === void 0 ? void 0 : _a.type.name) === OutlineList.name; + var isNested = ((_a = subList === null || subList === void 0 ? void 0 : subList.node) === null || _a === void 0 ? void 0 : _a.type.name) === outlinelist_1.OutlineList.name; var isCollapsed = (_b = subList === null || subList === void 0 ? void 0 : subList.node) === null || _b === void 0 ? void 0 : _b.attrs.collapsed; var subListPos = listItem.pos + subList.pos + 1; return { isCollapsed: isCollapsed, isNested: isNested, subListPos: subListPos }; diff --git a/packages/editor/dist/extensions/react/eventdispatcher.js b/packages/editor/dist/extensions/react/eventdispatcher.js index 1c1be43cf..a1f9b8311 100644 --- a/packages/editor/dist/extensions/react/eventdispatcher.js +++ b/packages/editor/dist/extensions/react/eventdispatcher.js @@ -1,3 +1,6 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.createDispatch = exports.EventDispatcher = void 0; var EventDispatcher = /** @class */ (function () { function EventDispatcher() { this.listeners = {}; @@ -27,12 +30,12 @@ var EventDispatcher = /** @class */ (function () { }; return EventDispatcher; }()); -export { EventDispatcher }; +exports.EventDispatcher = EventDispatcher; /** * Creates a dispatch function that can be called inside ProseMirror Plugin * to notify listeners about that plugin's state change. */ -export function createDispatch(eventDispatcher) { +function createDispatch(eventDispatcher) { return function (eventName, data) { if (!eventName) { throw new Error("event name is required!"); @@ -43,3 +46,4 @@ export function createDispatch(eventDispatcher) { eventDispatcher.emit(event, data); }; } +exports.createDispatch = createDispatch; diff --git a/packages/editor/dist/extensions/react/index.js b/packages/editor/dist/extensions/react/index.js index db315768f..1b463e88c 100644 --- a/packages/editor/dist/extensions/react/index.js +++ b/packages/editor/dist/extensions/react/index.js @@ -1,6 +1,22 @@ -export * from "./react-node-view"; -export * from "./types"; -export * from "./react-portal-provider"; -export * from "./selection-based-react-node-view"; -export * from "./plugin"; -export * from "./event-dispatcher"; +"use strict"; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __exportStar = (this && this.__exportStar) || function(m, exports) { + for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); +}; +Object.defineProperty(exports, "__esModule", { value: true }); +__exportStar(require("./reactnodeview"), exports); +__exportStar(require("./types"), exports); +__exportStar(require("./reactportalprovider"), exports); +__exportStar(require("./selectionbasedreactnodeview"), exports); +__exportStar(require("./plugin"), exports); +__exportStar(require("./eventdispatcher"), exports); diff --git a/packages/editor/dist/extensions/react/plugin.js b/packages/editor/dist/extensions/react/plugin.js index 7a737165e..940b26d20 100644 --- a/packages/editor/dist/extensions/react/plugin.js +++ b/packages/editor/dist/extensions/react/plugin.js @@ -1,5 +1,8 @@ -import { Plugin, PluginKey } from "prosemirror-state"; -import { Extension } from "@tiptap/core"; +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.NodeViewSelectionNotifier = exports.NodeViewSelectionNotifierPlugin = exports.stateKey = exports.ReactNodeViewState = void 0; +var prosemirror_state_1 = require("prosemirror-state"); +var core_1 = require("@tiptap/core"); var ReactNodeViewState = /** @class */ (function () { function ReactNodeViewState() { this.changeHandlers = []; @@ -16,9 +19,9 @@ var ReactNodeViewState = /** @class */ (function () { }; return ReactNodeViewState; }()); -export { ReactNodeViewState }; -export var stateKey = new PluginKey("reactNodeView"); -export var NodeViewSelectionNotifierPlugin = new Plugin({ +exports.ReactNodeViewState = ReactNodeViewState; +exports.stateKey = new prosemirror_state_1.PluginKey("reactNodeView"); +exports.NodeViewSelectionNotifierPlugin = new prosemirror_state_1.Plugin({ state: { init: function () { return new ReactNodeViewState(); @@ -27,9 +30,9 @@ export var NodeViewSelectionNotifierPlugin = new Plugin({ return pluginState; }, }, - key: stateKey, + key: exports.stateKey, view: function (view) { - var pluginState = stateKey.getState(view.state); + var pluginState = exports.stateKey.getState(view.state); return { update: function (view) { var _a = view.state.selection, from = _a.from, to = _a.to; @@ -38,8 +41,8 @@ export var NodeViewSelectionNotifierPlugin = new Plugin({ }; }, }); -export var NodeViewSelectionNotifier = Extension.create({ +exports.NodeViewSelectionNotifier = core_1.Extension.create({ addProseMirrorPlugins: function () { - return [NodeViewSelectionNotifierPlugin]; + return [exports.NodeViewSelectionNotifierPlugin]; }, }); diff --git a/packages/editor/dist/extensions/react/reactnodeview.js b/packages/editor/dist/extensions/react/reactnodeview.js index 53052e337..29e66fff7 100644 --- a/packages/editor/dist/extensions/react/reactnodeview.js +++ b/packages/editor/dist/extensions/react/reactnodeview.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -34,11 +35,13 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) { } return to.concat(ar || Array.prototype.slice.call(from)); }; -import { jsx as _jsx } from "react/jsx-runtime"; -import { NodeSelection } from "prosemirror-state"; -import { ThemeProvider } from "emotion-theming"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.createNodeView = exports.ReactNodeView = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var prosemirror_state_1 = require("prosemirror-state"); +var emotion_theming_1 = require("emotion-theming"); // @ts-ignore -import { __serializeForClipboard } from "prosemirror-view"; +var prosemirror_view_1 = require("prosemirror-view"); var ReactNodeView = /** @class */ (function () { function ReactNodeView(node, editor, getPos, options) { var _this = this; @@ -128,7 +131,7 @@ var ReactNodeView = /** @class */ (function () { return null; var theme = this.editor.storage.theme; var pos = this.getPos(); - return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(this.options.component, __assign({}, props, { editor: this.editor, getPos: this.getPos, node: this.node, forwardRef: forwardRef, updateAttributes: function (attr) { return _this.updateAttributes(attr, pos); } })) }))); + return ((0, jsx_runtime_1.jsx)(emotion_theming_1.ThemeProvider, __assign({ theme: theme }, { children: (0, jsx_runtime_1.jsx)(this.options.component, __assign({}, props, { editor: this.editor, getPos: this.getPos, node: this.node, forwardRef: forwardRef, updateAttributes: function (attr) { return _this.updateAttributes(attr, pos); } })) }))); }; ReactNodeView.prototype.updateAttributes = function (attributes, pos) { var _this = this; @@ -190,7 +193,7 @@ var ReactNodeView = /** @class */ (function () { } // we need to tell ProseMirror that we want to move the whole node // so we create a NodeSelection - var selection = NodeSelection.create(view.state.doc, this.getPos()); + var selection = prosemirror_state_1.NodeSelection.create(view.state.doc, this.getPos()); var transaction = view.state.tr.setSelection(selection); view.dispatch(transaction); (_g = event.dataTransfer) === null || _g === void 0 ? void 0 : _g.setDragImage(dragImage, x, y); @@ -221,7 +224,7 @@ var ReactNodeView = /** @class */ (function () { var isEditable = this.editor.isEditable; var isDragging = this.isDragging; var isDraggable = !!this.node.type.spec.draggable; - var isSelectable = NodeSelection.isSelectable(this.node); + var isSelectable = prosemirror_state_1.NodeSelection.isSelectable(this.node); var isCopyEvent = event.type === "copy"; var isPasteEvent = event.type === "paste"; var isCutEvent = event.type === "cut"; @@ -345,14 +348,15 @@ var ReactNodeView = /** @class */ (function () { }; return ReactNodeView; }()); -export { ReactNodeView }; -export function createNodeView(component, options) { +exports.ReactNodeView = ReactNodeView; +function createNodeView(component, options) { return function (_a) { var node = _a.node, getPos = _a.getPos, editor = _a.editor; var _getPos = function () { return (typeof getPos === "boolean" ? -1 : getPos()); }; return new ReactNodeView(node, editor, _getPos, __assign(__assign({}, options), { component: component })).init(); }; } +exports.createNodeView = createNodeView; // function isiOS(): boolean { // return ( // [ @@ -372,7 +376,7 @@ function forceHandleDrag(event, editor) { return; var view = editor.view; var slice = view.state.selection.content(); - var _a = __serializeForClipboard(view, slice), dom = _a.dom, text = _a.text; + var _a = (0, prosemirror_view_1.__serializeForClipboard)(view, slice), dom = _a.dom, text = _a.text; event.dataTransfer.clearData(); event.dataTransfer.setData("Text", text); event.dataTransfer.setData("text/plain", text); diff --git a/packages/editor/dist/extensions/react/reactportalprovider.js b/packages/editor/dist/extensions/react/reactportalprovider.js index 3edc5dbfc..47a36204e 100644 --- a/packages/editor/dist/extensions/react/reactportalprovider.js +++ b/packages/editor/dist/extensions/react/reactportalprovider.js @@ -1,3 +1,4 @@ +"use strict"; var __extends = (this && this.__extends) || (function () { var extendStatics = function (d, b) { extendStatics = Object.setPrototypeOf || @@ -24,6 +25,29 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { + Object.defineProperty(o, "default", { enumerable: true, value: v }); +}) : function(o, v) { + o["default"] = v; +}); +var __importStar = (this && this.__importStar) || function (mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); + __setModuleDefault(result, mod); + return result; +}; var __read = (this && this.__read) || function (o, n) { var m = typeof Symbol === "function" && o[Symbol.iterator]; if (!m) return o; @@ -40,10 +64,12 @@ var __read = (this && this.__read) || function (o, n) { } return ar; }; -import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; -import React, { useContext } from "react"; -import { createPortal, unstable_renderSubtreeIntoContainer, unmountComponentAtNode, } from "react-dom"; -import { EventDispatcher } from "./event-dispatcher"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.PortalRenderer = exports.PortalProvider = exports.usePortalProvider = exports.PortalProviderAPI = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var react_1 = __importStar(require("react")); +var react_dom_1 = require("react-dom"); +var eventdispatcher_1 = require("./eventdispatcher"); var PortalProviderAPI = /** @class */ (function (_super) { __extends(PortalProviderAPI, _super); function PortalProviderAPI() { @@ -59,7 +85,7 @@ var PortalProviderAPI = /** @class */ (function (_super) { children: children, }); var wrappedChildren = children(); - unstable_renderSubtreeIntoContainer(this.context, wrappedChildren, container); + (0, react_dom_1.unstable_renderSubtreeIntoContainer)(this.context, wrappedChildren, container); }; // TODO: until https://product-fabric.atlassian.net/browse/ED-5013 // we (unfortunately) need to re-render to pass down any updated context. @@ -74,19 +100,20 @@ var PortalProviderAPI = /** @class */ (function (_super) { // Both Prosemirror and React remove the elements asynchronously, and in edge // cases Prosemirror beats React try { - unmountComponentAtNode(container); + (0, react_dom_1.unmountComponentAtNode)(container); } catch (error) { // IGNORE console.error(error); } }; return PortalProviderAPI; -}(EventDispatcher)); -export { PortalProviderAPI }; -var PortalProviderContext = React.createContext(undefined); -export function usePortalProvider() { - return useContext(PortalProviderContext); +}(eventdispatcher_1.EventDispatcher)); +exports.PortalProviderAPI = PortalProviderAPI; +var PortalProviderContext = react_1.default.createContext(undefined); +function usePortalProvider() { + return (0, react_1.useContext)(PortalProviderContext); } +exports.usePortalProvider = usePortalProvider; var PortalProvider = /** @class */ (function (_super) { __extends(PortalProvider, _super); function PortalProvider(props) { @@ -95,15 +122,15 @@ var PortalProvider = /** @class */ (function (_super) { return _this; } PortalProvider.prototype.render = function () { - return (_jsxs(PortalProviderContext.Provider, __assign({ value: this.portalProviderAPI }, { children: [this.props.children, _jsx(PortalRenderer, { portalProviderAPI: this.portalProviderAPI })] }))); + return ((0, jsx_runtime_1.jsxs)(PortalProviderContext.Provider, __assign({ value: this.portalProviderAPI }, { children: [this.props.children, (0, jsx_runtime_1.jsx)(PortalRenderer, { portalProviderAPI: this.portalProviderAPI })] }))); }; PortalProvider.prototype.componentDidUpdate = function () { this.portalProviderAPI.forceUpdate(); }; PortalProvider.displayName = "PortalProvider"; return PortalProvider; -}(React.Component)); -export { PortalProvider }; +}(react_1.default.Component)); +exports.PortalProvider = PortalProvider; var PortalRenderer = /** @class */ (function (_super) { __extends(PortalRenderer, _super); function PortalRenderer(props) { @@ -116,11 +143,11 @@ var PortalRenderer = /** @class */ (function (_super) { } PortalRenderer.prototype.render = function () { var portals = this.state.portals; - return (_jsx(_Fragment, { children: Array.from(portals.entries()).map(function (_a) { + return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Array.from(portals.entries()).map(function (_a) { var _b = __read(_a, 2), container = _b[0], children = _b[1]; - return createPortal(children, container); + return (0, react_dom_1.createPortal)(children, container); }) })); }; return PortalRenderer; -}(React.Component)); -export { PortalRenderer }; +}(react_1.default.Component)); +exports.PortalRenderer = PortalRenderer; diff --git a/packages/editor/dist/extensions/react/selectionbasedreactnodeview.js b/packages/editor/dist/extensions/react/selectionbasedreactnodeview.js index 9c7bb8b47..e4564a57c 100644 --- a/packages/editor/dist/extensions/react/selectionbasedreactnodeview.js +++ b/packages/editor/dist/extensions/react/selectionbasedreactnodeview.js @@ -1,3 +1,4 @@ +"use strict"; var __extends = (this && this.__extends) || (function () { var extendStatics = function (d, b) { extendStatics = Object.setPrototypeOf || @@ -24,12 +25,14 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; -import { jsx as _jsx } from "react/jsx-runtime"; -import { DecorationSet } from "prosemirror-view"; -import { NodeSelection } from "prosemirror-state"; -import { stateKey as SelectionChangePluginKey, } from "./plugin"; -import { ReactNodeView } from "./react-node-view"; -import { ThemeProvider } from "emotion-theming"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.createSelectionBasedNodeView = exports.SelectionBasedNodeView = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var prosemirror_view_1 = require("prosemirror-view"); +var prosemirror_state_1 = require("prosemirror-state"); +var plugin_1 = require("./plugin"); +var reactnodeview_1 = require("./reactnodeview"); +var emotion_theming_1 = require("emotion-theming"); /** * A ReactNodeView that handles React components sensitive * to selection changes. @@ -75,7 +78,7 @@ var SelectionBasedNodeView = /** @class */ (function (_super) { return pos < from && to < posEnd; }; _this.isSelectedNode = function (selection) { - if (selection instanceof NodeSelection) { + if (selection instanceof prosemirror_state_1.NodeSelection) { var _a = _this.editor.view.state.selection, from = _a.from, to = _a.to; return (selection.node === _this.node || // If nodes are not the same object, we check if they are referring to the same document node @@ -96,11 +99,11 @@ var SelectionBasedNodeView = /** @class */ (function (_super) { return (_this.isSelectedNode(selection) || _this.isNodeInsideSelection(from, to)); }; _this.onSelectionChange = function () { - _this.update(_this.node, [], DecorationSet.empty); + _this.update(_this.node, [], prosemirror_view_1.DecorationSet.empty); }; _this.updatePos(); _this.oldSelection = editor.view.state.selection; - _this.selectionChangeState = SelectionChangePluginKey.getState(_this.editor.view.state); + _this.selectionChangeState = plugin_1.stateKey.getState(_this.editor.view.state); _this.selectionChangeState.subscribe(_this.onSelectionChange); return _this; } @@ -112,7 +115,7 @@ var SelectionBasedNodeView = /** @class */ (function (_super) { var theme = this.editor.storage.theme; var isSelected = this.editor.isEditable && (this.insideSelection() || this.nodeInsideSelection()); - return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(this.options.component, __assign({}, props, { editor: this.editor, getPos: this.getPos, node: this.node, forwardRef: forwardRef, selected: isSelected, updateAttributes: function (attr) { return _this.updateAttributes(attr, _this.pos); } })) }))); + return ((0, jsx_runtime_1.jsx)(emotion_theming_1.ThemeProvider, __assign({ theme: theme }, { children: (0, jsx_runtime_1.jsx)(this.options.component, __assign({}, props, { editor: this.editor, getPos: this.getPos, node: this.node, forwardRef: forwardRef, selected: isSelected, updateAttributes: function (attr) { return _this.updateAttributes(attr, _this.pos); } })) }))); }; /** * Update current node's start and end positions. @@ -146,8 +149,8 @@ var SelectionBasedNodeView = /** @class */ (function (_super) { var from = selection.from, to = selection.to; var oldFrom = oldSelection.from, oldTo = oldSelection.to; if (this.node.type.spec.selectable) { - var newNodeSelection = selection instanceof NodeSelection && selection.from === this.pos; - var oldNodeSelection = oldSelection instanceof NodeSelection && oldSelection.from === this.pos; + var newNodeSelection = selection instanceof prosemirror_state_1.NodeSelection && selection.from === this.pos; + var oldNodeSelection = oldSelection instanceof prosemirror_state_1.NodeSelection && oldSelection.from === this.pos; if ((newNodeSelection && !oldNodeSelection) || (oldNodeSelection && !newNodeSelection)) { return true; @@ -169,12 +172,13 @@ var SelectionBasedNodeView = /** @class */ (function (_super) { _super.prototype.destroy.call(this); }; return SelectionBasedNodeView; -}(ReactNodeView)); -export { SelectionBasedNodeView }; -export function createSelectionBasedNodeView(component, options) { +}(reactnodeview_1.ReactNodeView)); +exports.SelectionBasedNodeView = SelectionBasedNodeView; +function createSelectionBasedNodeView(component, options) { return function (_a) { var node = _a.node, getPos = _a.getPos, editor = _a.editor; var _getPos = function () { return (typeof getPos === "boolean" ? -1 : getPos()); }; return new SelectionBasedNodeView(node, editor, _getPos, __assign(__assign({}, options), { component: component })).init(); }; } +exports.createSelectionBasedNodeView = createSelectionBasedNodeView; diff --git a/packages/editor/dist/extensions/react/types.js b/packages/editor/dist/extensions/react/types.js index cb0ff5c3b..c8ad2e549 100644 --- a/packages/editor/dist/extensions/react/types.js +++ b/packages/editor/dist/extensions/react/types.js @@ -1 +1,2 @@ -export {}; +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); diff --git a/packages/editor/dist/extensions/searchreplace/index.js b/packages/editor/dist/extensions/searchreplace/index.js index 8a016dad8..00ce5837b 100644 --- a/packages/editor/dist/extensions/searchreplace/index.js +++ b/packages/editor/dist/extensions/searchreplace/index.js @@ -1 +1,17 @@ -export * from "./search-replace"; +"use strict"; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __exportStar = (this && this.__exportStar) || function(m, exports) { + for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); +}; +Object.defineProperty(exports, "__esModule", { value: true }); +__exportStar(require("./searchreplace"), exports); diff --git a/packages/editor/dist/extensions/searchreplace/searchreplace.js b/packages/editor/dist/extensions/searchreplace/searchreplace.js index 0edaff4f2..fca8e9bba 100644 --- a/packages/editor/dist/extensions/searchreplace/searchreplace.js +++ b/packages/editor/dist/extensions/searchreplace/searchreplace.js @@ -1,3 +1,4 @@ +"use strict"; var __values = (this && this.__values) || function(o) { var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0; if (m) return m.call(o); @@ -9,9 +10,11 @@ var __values = (this && this.__values) || function(o) { }; throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined."); }; -import { Extension } from "@tiptap/core"; -import { Decoration, DecorationSet } from "prosemirror-view"; -import { Plugin, PluginKey, TextSelection, } from "prosemirror-state"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.SearchReplace = void 0; +var core_1 = require("@tiptap/core"); +var prosemirror_view_1 = require("prosemirror-view"); +var prosemirror_state_1 = require("prosemirror-state"); var updateView = function (state, dispatch) { return dispatch(state.tr); }; var regex = function (s, settings) { var enableRegex = settings.enableRegex, matchCase = settings.matchCase, matchWholeWord = settings.matchWholeWord; @@ -24,7 +27,7 @@ var regex = function (s, settings) { function searchDocument(doc, searchResultClass, searchTerm) { var e_1, _a, e_2, _b, e_3, _c; if (!searchTerm) - return { decorationSet: DecorationSet.empty, results: [] }; + return { decorationSet: prosemirror_view_1.DecorationSet.empty, results: [] }; var decorations = []; var results = []; var index = 0; @@ -85,7 +88,7 @@ function searchDocument(doc, searchResultClass, searchTerm) { try { for (var results_1 = __values(results), results_1_1 = results_1.next(); !results_1_1.done; results_1_1 = results_1.next()) { var _e = results_1_1.value, from = _e.from, to = _e.to; - decorations.push(Decoration.inline(from, to, { class: searchResultClass })); + decorations.push(prosemirror_view_1.Decoration.inline(from, to, { class: searchResultClass })); } } catch (e_3_1) { e_3 = { error: e_3_1 }; } @@ -96,7 +99,7 @@ function searchDocument(doc, searchResultClass, searchTerm) { finally { if (e_3) throw e_3.error; } } return { - decorationSet: DecorationSet.create(doc, decorations), + decorationSet: prosemirror_view_1.DecorationSet.create(doc, decorations), results: results, }; } @@ -118,7 +121,7 @@ var replaceAll = function (replaceTerm, results, tr) { } return tr; }; -export var SearchReplace = Extension.create({ +exports.SearchReplace = core_1.Extension.create({ name: "searchreplace", addOptions: function () { return { @@ -214,7 +217,7 @@ export var SearchReplace = Extension.create({ to: tr.mapping.map(to_2), }); commands.focus(); - tr.setSelection(new TextSelection(tr.doc.resolve(nextResult.from), tr.doc.resolve(nextResult.to))); + tr.setSelection(new prosemirror_state_1.TextSelection(tr.doc.resolve(nextResult.from), tr.doc.resolve(nextResult.to))); } dispatch(tr); results.splice(index, 1); @@ -249,13 +252,13 @@ export var SearchReplace = Extension.create({ }, addProseMirrorPlugins: function () { var _this = this; - var key = new PluginKey("searchreplace"); + var key = new prosemirror_state_1.PluginKey("searchreplace"); return [ - new Plugin({ + new prosemirror_state_1.Plugin({ key: key, state: { init: function () { - return DecorationSet.empty; + return prosemirror_view_1.DecorationSet.empty; }, apply: function (_a) { var doc = _a.doc, docChanged = _a.docChanged, setSelection = _a.setSelection; @@ -269,7 +272,7 @@ export var SearchReplace = Extension.create({ _this.storage.results = results; return decorationSet; } - return DecorationSet.empty; + return prosemirror_view_1.DecorationSet.empty; }, }, props: { diff --git a/packages/editor/dist/extensions/table/actions.js b/packages/editor/dist/extensions/table/actions.js index 0b0d49ac9..73b1df59b 100644 --- a/packages/editor/dist/extensions/table/actions.js +++ b/packages/editor/dist/extensions/table/actions.js @@ -1,7 +1,10 @@ -import { selectedRect } from "prosemirror-tables"; +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.moveRowUp = exports.moveRowDown = exports.moveColumnRight = exports.moveColumnLeft = void 0; +var prosemirror_tables_1 = require("prosemirror-tables"); function moveColumnRight(editor) { var tr = editor.state.tr; - var rect = selectedRect(editor.state); + var rect = (0, prosemirror_tables_1.selectedRect)(editor.state); if (rect.right === rect.map.width) return; var transaction = moveColumn(tr, rect, rect.left, rect.left + 1); @@ -9,9 +12,10 @@ function moveColumnRight(editor) { return; editor.view.dispatch(transaction); } +exports.moveColumnRight = moveColumnRight; function moveColumnLeft(editor) { var tr = editor.state.tr; - var rect = selectedRect(editor.state); + var rect = (0, prosemirror_tables_1.selectedRect)(editor.state); if (rect.left === 0) return; var transaction = moveColumn(tr, rect, rect.left, rect.left - 1); @@ -19,9 +23,10 @@ function moveColumnLeft(editor) { return; editor.view.dispatch(transaction); } +exports.moveColumnLeft = moveColumnLeft; function moveRowDown(editor) { var tr = editor.state.tr; - var rect = selectedRect(editor.state); + var rect = (0, prosemirror_tables_1.selectedRect)(editor.state); if (rect.top + 1 === rect.map.height) return; var transaction = moveRow(tr, rect, rect.top, rect.top + 1); @@ -29,9 +34,10 @@ function moveRowDown(editor) { return; editor.view.dispatch(transaction); } +exports.moveRowDown = moveRowDown; function moveRowUp(editor) { var tr = editor.state.tr; - var rect = selectedRect(editor.state); + var rect = (0, prosemirror_tables_1.selectedRect)(editor.state); if (rect.top === 0) return; var transaction = moveRow(tr, rect, rect.top, rect.top - 1); @@ -39,6 +45,7 @@ function moveRowUp(editor) { return; editor.view.dispatch(transaction); } +exports.moveRowUp = moveRowUp; function moveColumn(tr, rect, from, to) { var fromCells = getColumnCells(rect, from); var toCells = getColumnCells(rect, to); @@ -104,4 +111,3 @@ function moveCells(tr, rect, fromCells, toCells) { } return tr; } -export { moveColumnLeft, moveColumnRight, moveRowDown, moveRowUp }; diff --git a/packages/editor/dist/extensions/table/component.js b/packages/editor/dist/extensions/table/component.js index 399f949f6..56c063287 100644 --- a/packages/editor/dist/extensions/table/component.js +++ b/packages/editor/dist/extensions/table/component.js @@ -1,3 +1,4 @@ +"use strict"; var __extends = (this && this.__extends) || (function () { var extendStatics = function (d, b) { extendStatics = Object.setPrototypeOf || @@ -24,32 +25,35 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; -import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; -import { Flex } from "rebass"; -import { SelectionBasedNodeView, } from "../react"; -import { useEffect, useRef } from "react"; -import { updateColumnsOnResize } from "prosemirror-tables"; -import { InsertColumnRight, InsertRowBelow, RowProperties, TableProperties, } from "../../toolbar/tools/table"; -import { getToolDefinition } from "../../toolbar/tool-definitions"; -import { getPosition } from "../../utils/position"; -import { findSelectedDOMNode } from "../../toolbar/utils/prosemirror"; -import { DesktopOnly } from "../../components/responsive"; -export function TableComponent(props) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.TableNodeView = exports.TableComponent = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var rebass_1 = require("rebass"); +var react_1 = require("../react"); +var react_2 = require("react"); +var prosemirror_tables_1 = require("prosemirror-tables"); +var table_1 = require("../../toolbar/tools/table"); +var tooldefinitions_1 = require("../../toolbar/tooldefinitions"); +var position_1 = require("../../utils/position"); +var prosemirror_1 = require("../../toolbar/utils/prosemirror"); +var responsive_1 = require("../../components/responsive"); +function TableComponent(props) { var editor = props.editor, node = props.node, forwardRef = props.forwardRef; - var colgroupRef = useRef(null); - var tableRef = useRef(); + var colgroupRef = (0, react_2.useRef)(null); + var tableRef = (0, react_2.useRef)(); var selected = editor.isActive("table"); - useEffect(function () { + (0, react_2.useEffect)(function () { if (!colgroupRef.current || !tableRef.current) return; - updateColumnsOnResize(node, colgroupRef.current, tableRef.current, 50); + (0, prosemirror_tables_1.updateColumnsOnResize)(node, colgroupRef.current, tableRef.current, 50); }, [node]); - return (_jsxs(_Fragment, { children: [_jsx(DesktopOnly, { children: selected && (_jsxs(_Fragment, { children: [_jsx(TableRowToolbar, { editor: editor, table: tableRef.current }), _jsx(TableColumnToolbar, { editor: editor, table: tableRef.current })] })) }), _jsx("div", __assign({ className: "tableWrapper" }, { children: _jsx("table", __assign({ ref: function (ref) { + return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(responsive_1.DesktopOnly, { children: selected && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TableRowToolbar, { editor: editor, table: tableRef.current }), (0, jsx_runtime_1.jsx)(TableColumnToolbar, { editor: editor, table: tableRef.current })] })) }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "tableWrapper" }, { children: (0, jsx_runtime_1.jsx)("table", __assign({ ref: function (ref) { forwardRef === null || forwardRef === void 0 ? void 0 : forwardRef(ref); tableRef.current = ref || undefined; - } }, { children: _jsx("colgroup", { ref: colgroupRef }) })) }))] })); + } }, { children: (0, jsx_runtime_1.jsx)("colgroup", { ref: colgroupRef }) })) }))] })); } -export function TableNodeView(editor) { +exports.TableComponent = TableComponent; +function TableNodeView(editor) { var TableNode = /** @class */ (function (_super) { __extends(TableNode, _super); function TableNode(node, cellMinWidth) { @@ -73,20 +77,21 @@ export function TableNodeView(editor) { return _this; } return TableNode; - }(SelectionBasedNodeView)); + }(react_1.SelectionBasedNodeView)); return TableNode; } +exports.TableNodeView = TableNodeView; function TableRowToolbar(props) { var editor = props.editor; - var rowToolsRef = useRef(null); - useEffect(function () { + var rowToolsRef = (0, react_2.useRef)(null); + (0, react_2.useEffect)(function () { if (!rowToolsRef.current) { return; } - var currentRow = findSelectedDOMNode(editor, ["tableRow"]); + var currentRow = (0, prosemirror_1.findSelectedDOMNode)(editor, ["tableRow"]); if (!currentRow) return; - var pos = getPosition(rowToolsRef.current, { + var pos = (0, position_1.getPosition)(rowToolsRef.current, { location: "left", target: currentRow, align: "start", @@ -96,7 +101,7 @@ function TableRowToolbar(props) { rowToolsRef.current.style.top = "".concat(pos.top, "px"); rowToolsRef.current.style.left = "".concat(pos.left, "px"); }, [editor.state.selection, rowToolsRef.current]); - return (_jsxs(Flex, __assign({ ref: rowToolsRef, sx: { + return ((0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ ref: rowToolsRef, sx: { zIndex: 999, top: 0, left: 0, @@ -108,23 +113,23 @@ function TableRowToolbar(props) { ":hover": { opacity: 1, }, - } }, { children: [_jsx(RowProperties, __assign({}, getToolDefinition("rowProperties"), { icon: "more", variant: "small", editor: editor })), _jsx(InsertRowBelow, __assign({}, getToolDefinition("insertRowBelow"), { editor: editor, variant: "small" }))] }))); + } }, { children: [(0, jsx_runtime_1.jsx)(table_1.RowProperties, __assign({}, (0, tooldefinitions_1.getToolDefinition)("rowProperties"), { icon: "more", variant: "small", editor: editor })), (0, jsx_runtime_1.jsx)(table_1.InsertRowBelow, __assign({}, (0, tooldefinitions_1.getToolDefinition)("insertRowBelow"), { editor: editor, variant: "small" }))] }))); } function TableColumnToolbar(props) { var editor = props.editor, table = props.table; - var columnToolsRef = useRef(null); - useEffect(function () { + var columnToolsRef = (0, react_2.useRef)(null); + (0, react_2.useEffect)(function () { if (!columnToolsRef.current || !table) { return; } - var currentCell = findSelectedDOMNode(editor, [ + var currentCell = (0, prosemirror_1.findSelectedDOMNode)(editor, [ "tableCell", "tableHeader", ]); if (!currentCell) return; // tableRef.current - var pos = getPosition(columnToolsRef.current, { + var pos = (0, position_1.getPosition)(columnToolsRef.current, { location: "top", align: "center", target: currentCell, @@ -134,7 +139,7 @@ function TableColumnToolbar(props) { columnToolsRef.current.style.left = "".concat(pos.left, "px"); columnToolsRef.current.style.top = "".concat(pos.top, "px"); }, [editor.state.selection, columnToolsRef.current, table]); - return (_jsxs(Flex, __assign({ ref: columnToolsRef, sx: { + return ((0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ ref: columnToolsRef, sx: { zIndex: 999, top: 0, left: 0, @@ -146,5 +151,5 @@ function TableColumnToolbar(props) { ":hover": { opacity: 1, }, - } }, { children: [_jsx(TableProperties, { editor: editor, title: "tableProperties", icon: "more", variant: "small" }), _jsx(InsertColumnRight, __assign({}, getToolDefinition("insertColumnRight"), { editor: editor, variant: "small", icon: "plus" }))] }))); + } }, { children: [(0, jsx_runtime_1.jsx)(table_1.TableProperties, { editor: editor, title: "tableProperties", icon: "more", variant: "small" }), (0, jsx_runtime_1.jsx)(table_1.InsertColumnRight, __assign({}, (0, tooldefinitions_1.getToolDefinition)("insertColumnRight"), { editor: editor, variant: "small", icon: "plus" }))] }))); } diff --git a/packages/editor/dist/extensions/table/index.js b/packages/editor/dist/extensions/table/index.js index 0e948df9e..4590e5f03 100644 --- a/packages/editor/dist/extensions/table/index.js +++ b/packages/editor/dist/extensions/table/index.js @@ -1 +1,17 @@ -export * from "./table"; +"use strict"; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __exportStar = (this && this.__exportStar) || function(m, exports) { + for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); +}; +Object.defineProperty(exports, "__esModule", { value: true }); +__exportStar(require("./table"), exports); diff --git a/packages/editor/dist/extensions/table/table.js b/packages/editor/dist/extensions/table/table.js index 1b0810ee3..a99e03e86 100644 --- a/packages/editor/dist/extensions/table/table.js +++ b/packages/editor/dist/extensions/table/table.js @@ -1,3 +1,4 @@ +"use strict"; var __read = (this && this.__read) || function (o, n) { var m = typeof Symbol === "function" && o[Symbol.iterator]; if (!m) return o; @@ -23,25 +24,27 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) { } return to.concat(ar || Array.prototype.slice.call(from)); }; -import { Table as TiptapTable } from "@tiptap/extension-table"; -import { columnResizing, tableEditing } from "prosemirror-tables"; -import { TableNodeView } from "./component"; -export var Table = TiptapTable.extend({ +Object.defineProperty(exports, "__esModule", { value: true }); +exports.Table = void 0; +var extension_table_1 = require("@tiptap/extension-table"); +var prosemirror_tables_1 = require("prosemirror-tables"); +var component_1 = require("./component"); +exports.Table = extension_table_1.Table.extend({ addProseMirrorPlugins: function () { var isResizable = this.options.resizable && this.editor.isEditable; return __spreadArray(__spreadArray([], __read((isResizable ? [ - columnResizing({ + (0, prosemirror_tables_1.columnResizing)({ handleWidth: this.options.handleWidth, cellMinWidth: this.options.cellMinWidth, - View: TableNodeView(this.editor), + View: (0, component_1.TableNodeView)(this.editor), // TODO: PR for @types/prosemirror-tables // @ts-ignore (incorrect type) lastColumnResizable: this.options.lastColumnResizable, }), ] : [])), false), [ - tableEditing({ + (0, prosemirror_tables_1.tableEditing)({ allowTableNodeSelection: this.options.allowTableNodeSelection, }), ], false); diff --git a/packages/editor/dist/extensions/tablecell/index.js b/packages/editor/dist/extensions/tablecell/index.js index a85cac945..452274449 100644 --- a/packages/editor/dist/extensions/tablecell/index.js +++ b/packages/editor/dist/extensions/tablecell/index.js @@ -1,3 +1,19 @@ -import { TableCell } from "./table-cell"; -export * from "./table-cell"; -export default TableCell; +"use strict"; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __exportStar = (this && this.__exportStar) || function(m, exports) { + for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); +}; +Object.defineProperty(exports, "__esModule", { value: true }); +var tablecell_1 = require("./tablecell"); +__exportStar(require("./tablecell"), exports); +exports.default = tablecell_1.TableCell; diff --git a/packages/editor/dist/extensions/tablecell/tablecell.js b/packages/editor/dist/extensions/tablecell/tablecell.js index b45ffdfa4..1f798891c 100644 --- a/packages/editor/dist/extensions/tablecell/tablecell.js +++ b/packages/editor/dist/extensions/tablecell/tablecell.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -9,8 +10,13 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; -import TiptapTableCell from "@tiptap/extension-table-cell"; -export var TableCell = TiptapTableCell.extend({ +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.TableCell = void 0; +var extension_table_cell_1 = __importDefault(require("@tiptap/extension-table-cell")); +exports.TableCell = extension_table_cell_1.default.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") }); diff --git a/packages/editor/dist/extensions/taskitem/component.js b/packages/editor/dist/extensions/taskitem/component.js index 7da869672..6ee2c01e6 100644 --- a/packages/editor/dist/extensions/taskitem/component.js +++ b/packages/editor/dist/extensions/taskitem/component.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -20,17 +21,19 @@ var __values = (this && this.__values) || function(o) { }; throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined."); }; -import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; -import { Flex, Text } from "rebass"; -import { Icon } from "../../toolbar/components/icon"; -import { Icons } from "../../toolbar/icons"; -import { findChildren, } from "@tiptap/core"; -import { useCallback } from "react"; -import { TaskItemNode } from "./task-item"; -export function TaskItemComponent(props) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.TaskItemComponent = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var rebass_1 = require("rebass"); +var icon_1 = require("../../toolbar/components/icon"); +var icons_1 = require("../../toolbar/icons"); +var core_1 = require("@tiptap/core"); +var react_1 = require("react"); +var taskitem_1 = require("./taskitem"); +function TaskItemComponent(props) { var editor = props.editor, updateAttributes = props.updateAttributes, node = props.node, getPos = props.getPos, forwardRef = props.forwardRef; var checked = props.node.attrs.checked; - var toggle = useCallback(function () { + var toggle = (0, react_1.useCallback)(function () { if (!editor.isEditable) return false; updateAttributes({ checked: !checked }); @@ -42,11 +45,11 @@ export function TaskItemComponent(props) { }); return true; }, [editor, getPos, node, checked]); - return (_jsx(_Fragment, { children: _jsxs(Flex, __assign({ "data-drag-image": true, sx: { + return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ "data-drag-image": true, sx: { ":hover > .dragHandle": { opacity: editor.isEditable ? 1 : 0, }, - } }, { children: [_jsx(Icon, { className: "dragHandle", draggable: "true", "data-drag-handle": true, path: Icons.dragHandle, sx: { + } }, { children: [(0, jsx_runtime_1.jsx)(icon_1.Icon, { className: "dragHandle", draggable: "true", "data-drag-handle": true, path: icons_1.Icons.dragHandle, sx: { opacity: [1, 1, 0], alignSelf: "start", mr: 2, @@ -55,7 +58,7 @@ export function TaskItemComponent(props) { ".icon:hover path": { fill: "var(--checked) !important", }, - }, size: 20 }), _jsx(Icon, { path: checked ? Icons.check : "", stroke: "1px", sx: { + }, size: 20 }), (0, jsx_runtime_1.jsx)(icon_1.Icon, { path: checked ? icons_1.Icons.check : "", stroke: "1px", sx: { border: "2px solid", borderColor: checked ? "checked" : "icon", borderRadius: "default", @@ -72,15 +75,16 @@ export function TaskItemComponent(props) { }, onMouseDown: function (e) { e.preventDefault(); toggle(); - }, color: checked ? "checked" : "icon", size: 13 }), _jsx(Text, { as: "div", ref: forwardRef, sx: { + }, color: checked ? "checked" : "icon", size: 13 }), (0, jsx_runtime_1.jsx)(rebass_1.Text, { as: "div", ref: forwardRef, sx: { textDecorationLine: checked ? "line-through" : "none", color: checked ? "var(--checked)" : "var(--text)", flex: 1, } })] })) })); } +exports.TaskItemComponent = TaskItemComponent; function toggleChildren(node, tr, toggleState, parentPos) { var e_1, _a; - var children = findChildren(node, function (node) { return node.type.name === TaskItemNode.name; }); + var children = (0, core_1.findChildren)(node, function (node) { return node.type.name === taskitem_1.TaskItemNode.name; }); try { for (var children_1 = __values(children), children_1_1 = children_1.next(); !children_1_1.done; children_1_1 = children_1.next()) { var pos = children_1_1.value.pos; @@ -108,7 +112,7 @@ function getChildren(node, parentPos) { return children; } function areAllChecked(node) { - var children = findChildren(node, function (node) { return node.type.name === TaskItemNode.name; }); + var children = (0, core_1.findChildren)(node, function (node) { return node.type.name === taskitem_1.TaskItemNode.name; }); if (children.length <= 0) return undefined; return children.every(function (node) { return node.node.attrs.checked; }); diff --git a/packages/editor/dist/extensions/taskitem/index.js b/packages/editor/dist/extensions/taskitem/index.js index 3518ff3b2..088000612 100644 --- a/packages/editor/dist/extensions/taskitem/index.js +++ b/packages/editor/dist/extensions/taskitem/index.js @@ -1 +1,17 @@ -export * from "./task-item"; +"use strict"; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __exportStar = (this && this.__exportStar) || function(m, exports) { + for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); +}; +Object.defineProperty(exports, "__esModule", { value: true }); +__exportStar(require("./taskitem"), exports); diff --git a/packages/editor/dist/extensions/taskitem/taskitem.js b/packages/editor/dist/extensions/taskitem/taskitem.js index 95d8164a3..983e3ba24 100644 --- a/packages/editor/dist/extensions/taskitem/taskitem.js +++ b/packages/editor/dist/extensions/taskitem/taskitem.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -9,12 +10,14 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; -import { mergeAttributes } from "@tiptap/core"; -import { onBackspacePressed } from "../list-item/commands"; -import { TaskItem } from "@tiptap/extension-task-item"; -import { TaskItemComponent } from "./component"; -import { createNodeView } from "../react"; -export var TaskItemNode = TaskItem.extend({ +Object.defineProperty(exports, "__esModule", { value: true }); +exports.TaskItemNode = void 0; +var core_1 = require("@tiptap/core"); +var commands_1 = require("../list-item/commands"); +var extension_task_item_1 = require("@tiptap/extension-task-item"); +var component_1 = require("./component"); +var react_1 = require("../react"); +exports.TaskItemNode = extension_task_item_1.TaskItem.extend({ draggable: true, addAttributes: function () { return { @@ -32,7 +35,7 @@ export var TaskItemNode = TaskItem.extend({ var node = _a.node, HTMLAttributes = _a.HTMLAttributes; return [ "li", - mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { + (0, core_1.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes, { class: "checklist--item", }), 0, @@ -61,11 +64,11 @@ export var TaskItemNode = TaskItem.extend({ var _a; return __assign(__assign({}, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)), { Backspace: function (_a) { var editor = _a.editor; - return onBackspacePressed(editor, _this.name, _this.type); + return (0, commands_1.onBackspacePressed)(editor, _this.name, _this.type); } }); }, addNodeView: function () { - return createNodeView(TaskItemComponent, { + return (0, react_1.createNodeView)(component_1.TaskItemComponent, { contentDOMFactory: true, wrapperFactory: function () { return document.createElement("li"); }, shouldUpdate: function (_a, _b) { diff --git a/packages/editor/dist/extensions/tasklist/component.js b/packages/editor/dist/extensions/tasklist/component.js index 19006a2d5..56abb7a04 100644 --- a/packages/editor/dist/extensions/tasklist/component.js +++ b/packages/editor/dist/extensions/tasklist/component.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -36,26 +37,28 @@ var __values = (this && this.__values) || function(o) { }; throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined."); }; -import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime"; -import { Box, Flex, Text } from "rebass"; -import { findChildren, getNodeType, } from "@tiptap/core"; -import { Icon } from "../../toolbar/components/icon"; -import { Icons } from "../../toolbar/icons"; -import { useEffect, useMemo, useState } from "react"; -import { Input } from "@rebass/forms"; -import { TaskItemNode } from "../task-item"; -import { findParentNodeOfTypeClosestToPos } from "prosemirror-utils"; -export function TaskListComponent(props) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.TaskListComponent = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var rebass_1 = require("rebass"); +var core_1 = require("@tiptap/core"); +var icon_1 = require("../../toolbar/components/icon"); +var icons_1 = require("../../toolbar/icons"); +var react_1 = require("react"); +var forms_1 = require("@rebass/forms"); +var taskitem_1 = require("../taskitem"); +var prosemirror_utils_1 = require("prosemirror-utils"); +function TaskListComponent(props) { var editor = props.editor, getPos = props.getPos, node = props.node, updateAttributes = props.updateAttributes, forwardRef = props.forwardRef; - var taskItemType = getNodeType(TaskItemNode.name, editor.schema); + var taskItemType = (0, core_1.getNodeType)(taskitem_1.TaskItemNode.name, editor.schema); var _a = node.attrs, title = _a.title, collapsed = _a.collapsed; - var _b = __read(useState({ checked: 0, total: 0, percentage: 0 }), 2), stats = _b[0], setStats = _b[1]; - var parentTaskItem = useMemo(function () { + var _b = __read((0, react_1.useState)({ checked: 0, total: 0, percentage: 0 }), 2), stats = _b[0], setStats = _b[1]; + var parentTaskItem = (0, react_1.useMemo)(function () { var pos = editor.state.doc.resolve(getPos()); - return findParentNodeOfTypeClosestToPos(pos, taskItemType); + return (0, prosemirror_utils_1.findParentNodeOfTypeClosestToPos)(pos, taskItemType); }, []); var nested = !!parentTaskItem; - useEffect(function () { + (0, react_1.useEffect)(function () { if (!parentTaskItem) return; var node = parentTaskItem.node, pos = parentTaskItem.pos; @@ -67,21 +70,21 @@ export function TaskListComponent(props) { return true; }); }, [node, parentTaskItem]); - useEffect(function () { - var children = findChildren(node, function (node) { return node.type.name === TaskItemNode.name; }); + (0, react_1.useEffect)(function () { + var children = (0, core_1.findChildren)(node, function (node) { return node.type.name === taskitem_1.TaskItemNode.name; }); var checked = children.filter(function (node) { return node.node.attrs.checked; }).length; var total = children.length; var percentage = Math.round((checked / total) * 100); setStats({ checked: checked, total: total, percentage: percentage }); }, [nested, node]); - return (_jsxs(_Fragment, { children: [_jsx(Flex, __assign({ sx: { + return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(rebass_1.Flex, __assign({ sx: { flexDirection: "column", ":hover > div > .toggleSublist": { opacity: 1 }, - } }, { children: nested ? (_jsxs(Flex, __assign({ sx: { + } }, { children: nested ? ((0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ sx: { position: "absolute", top: 0, right: 0, - }, contentEditable: false }, { children: [collapsed && (_jsxs(Text, __assign({ variant: "body", sx: { color: "fontTertiary", mr: 35 } }, { children: [stats.checked, "/", stats.total] }))), _jsx(Icon, { className: "toggleSublist", path: collapsed ? Icons.chevronDown : Icons.chevronUp, sx: { + }, contentEditable: false }, { children: [collapsed && ((0, jsx_runtime_1.jsxs)(rebass_1.Text, __assign({ variant: "body", sx: { color: "fontTertiary", mr: 35 } }, { children: [stats.checked, "/", stats.total] }))), (0, jsx_runtime_1.jsx)(icon_1.Icon, { className: "toggleSublist", path: collapsed ? icons_1.Icons.chevronDown : icons_1.Icons.chevronUp, sx: { opacity: collapsed ? 1 : 0, position: "absolute", right: 0, @@ -93,7 +96,7 @@ export function TaskListComponent(props) { }, }, size: 20, onClick: function () { updateAttributes({ collapsed: !collapsed }); - } })] }))) : (_jsxs(Flex, __assign({ sx: { + } })] }))) : ((0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ sx: { position: "relative", bg: "bgSecondary", py: 1, @@ -102,7 +105,7 @@ export function TaskListComponent(props) { alignItems: "center", justifyContent: "end", overflow: "hidden", - }, contentEditable: false }, { children: [_jsx(Box, { sx: { + }, contentEditable: false }, { children: [(0, jsx_runtime_1.jsx)(rebass_1.Box, { sx: { height: "100%", width: "".concat(stats.percentage, "%"), position: "absolute", @@ -110,9 +113,9 @@ export function TaskListComponent(props) { zIndex: 0, left: 0, transition: "width 250ms ease-out", - } }), _jsx(Input, { readOnly: !editor.isEditable, value: title || "", variant: "clean", sx: { p: 0, px: 2, zIndex: 1, color: "fontTertiary" }, placeholder: "Untitled", onChange: function (e) { + } }), (0, jsx_runtime_1.jsx)(forms_1.Input, { readOnly: !editor.isEditable, value: title || "", variant: "clean", sx: { p: 0, px: 2, zIndex: 1, color: "fontTertiary" }, placeholder: "Untitled", onChange: function (e) { updateAttributes({ title: e.target.value }); - } }), _jsxs(Flex, __assign({ sx: { flexShrink: 0, pr: 2 } }, { children: [_jsx(Icon, { path: Icons.checkbox, size: 15, color: "fontTertiary" }), _jsxs(Text, __assign({ variant: "body", sx: { ml: 1, color: "fontTertiary" } }, { children: [stats.checked, "/", stats.total] }))] }))] }))) })), _jsx(Text, { as: "div", ref: forwardRef, sx: { + } }), (0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ sx: { flexShrink: 0, pr: 2 } }, { children: [(0, jsx_runtime_1.jsx)(icon_1.Icon, { path: icons_1.Icons.checkbox, size: 15, color: "fontTertiary" }), (0, jsx_runtime_1.jsxs)(rebass_1.Text, __assign({ variant: "body", sx: { ml: 1, color: "fontTertiary" } }, { children: [stats.checked, "/", stats.total] }))] }))] }))) })), (0, jsx_runtime_1.jsx)(rebass_1.Text, { as: "div", ref: forwardRef, sx: { ul: { display: collapsed ? "none" : "block", paddingInlineStart: 0, @@ -125,9 +128,10 @@ export function TaskListComponent(props) { }, } })] })); } +exports.TaskListComponent = TaskListComponent; function areAllChecked(node, pos, doc) { var e_1, _a; - var children = findChildren(node, function (node) { return node.type.name === TaskItemNode.name; }); + var children = (0, core_1.findChildren)(node, function (node) { return node.type.name === taskitem_1.TaskItemNode.name; }); try { for (var children_1 = __values(children), children_1_1 = children_1.next(); !children_1_1.done; children_1_1 = children_1.next()) { var child = children_1_1.value; diff --git a/packages/editor/dist/extensions/tasklist/index.js b/packages/editor/dist/extensions/tasklist/index.js index 291e035cb..bbc38c126 100644 --- a/packages/editor/dist/extensions/tasklist/index.js +++ b/packages/editor/dist/extensions/tasklist/index.js @@ -1 +1,17 @@ -export * from "./task-list"; +"use strict"; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __exportStar = (this && this.__exportStar) || function(m, exports) { + for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); +}; +Object.defineProperty(exports, "__esModule", { value: true }); +__exportStar(require("./tasklist"), exports); diff --git a/packages/editor/dist/extensions/tasklist/tasklist.js b/packages/editor/dist/extensions/tasklist/tasklist.js index e0cb62d03..cc6cea69e 100644 --- a/packages/editor/dist/extensions/tasklist/tasklist.js +++ b/packages/editor/dist/extensions/tasklist/tasklist.js @@ -1,8 +1,11 @@ -import { mergeAttributes } from "@tiptap/core"; -import { TaskList } from "@tiptap/extension-task-list"; -import { createNodeView } from "../react"; -import { TaskListComponent } from "./component"; -export var TaskListNode = TaskList.extend({ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.TaskListNode = void 0; +var core_1 = require("@tiptap/core"); +var extension_task_list_1 = require("@tiptap/extension-task-list"); +var react_1 = require("../react"); +var component_1 = require("./component"); +exports.TaskListNode = extension_task_list_1.TaskList.extend({ addAttributes: function () { return { collapsed: { @@ -46,7 +49,7 @@ export var TaskListNode = TaskList.extend({ var HTMLAttributes = _a.HTMLAttributes; return [ "ul", - mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { + (0, core_1.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes, { class: "checklist", }), 0, @@ -78,7 +81,7 @@ export var TaskListNode = TaskList.extend({ }, addNodeView: function () { var _this = this; - return createNodeView(TaskListComponent, { + return (0, react_1.createNodeView)(component_1.TaskListComponent, { contentDOMFactory: function () { var content = document.createElement("ul"); content.classList.add("".concat(_this.name.toLowerCase(), "-content-wrapper")); diff --git a/packages/editor/dist/extensions/textdirection/index.js b/packages/editor/dist/extensions/textdirection/index.js index ea2fee63c..e3d121469 100644 --- a/packages/editor/dist/extensions/textdirection/index.js +++ b/packages/editor/dist/extensions/textdirection/index.js @@ -1,3 +1,19 @@ -import { TextDirection } from "./text-direction"; -export * from "./text-direction"; -export default TextDirection; +"use strict"; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __exportStar = (this && this.__exportStar) || function(m, exports) { + for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); +}; +Object.defineProperty(exports, "__esModule", { value: true }); +var textdirection_1 = require("./textdirection"); +__exportStar(require("./textdirection"), exports); +exports.default = textdirection_1.TextDirection; diff --git a/packages/editor/dist/extensions/textdirection/textdirection.js b/packages/editor/dist/extensions/textdirection/textdirection.js index 91d334519..75e5c02e2 100644 --- a/packages/editor/dist/extensions/textdirection/textdirection.js +++ b/packages/editor/dist/extensions/textdirection/textdirection.js @@ -1,6 +1,9 @@ -import { Extension } from "@tiptap/core"; -import "@tiptap/extension-text-style"; -export var TextDirection = Extension.create({ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.TextDirection = void 0; +var core_1 = require("@tiptap/core"); +require("@tiptap/extension-text-style"); +exports.TextDirection = core_1.Extension.create({ name: "textDirection", defaultOptions: { types: ["paragraph", "heading"], diff --git a/packages/editor/dist/hooks/useRefValue.js b/packages/editor/dist/hooks/useRefValue.js index 253549414..5a728b9cc 100644 --- a/packages/editor/dist/hooks/useRefValue.js +++ b/packages/editor/dist/hooks/useRefValue.js @@ -1,8 +1,12 @@ -import { useEffect, useRef } from "react"; -export function useRefValue(value) { - var refValue = useRef(value); - useEffect(function () { +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.useRefValue = void 0; +var react_1 = require("react"); +function useRefValue(value) { + var refValue = (0, react_1.useRef)(value); + (0, react_1.useEffect)(function () { refValue.current = value; }, [value]); return refValue; } +exports.useRefValue = useRefValue; diff --git a/packages/editor/dist/index.js b/packages/editor/dist/index.js index 24644e49c..5c2876507 100644 --- a/packages/editor/dist/index.js +++ b/packages/editor/dist/index.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -9,6 +10,20 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __exportStar = (this && this.__exportStar) || function(m, exports) { + for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); +}; 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) @@ -20,47 +35,53 @@ var __rest = (this && this.__rest) || function (s, e) { } return t; }; -import "./extensions"; -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 { useEffect, useMemo, useRef } 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 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 { AttachmentNode } from "./extensions/attachment"; -import { TaskListNode } from "./extensions/task-list"; -import { TaskItemNode } from "./extensions/task-item"; -import { Dropcursor } from "./extensions/drop-cursor"; -import { SearchReplace } from "./extensions/search-replace"; -import { EmbedNode } from "./extensions/embed"; -import { CodeBlock } from "./extensions/code-block"; -import { ListItem } from "./extensions/list-item"; -import { Link } from "@tiptap/extension-link"; -import { Codemark } from "./extensions/code-mark"; -import { MathInline, MathBlock } from "./extensions/math"; -import { NodeViewSelectionNotifier, usePortalProvider, } from "./extensions/react"; -import { OutlineList } from "./extensions/outline-list"; -import { OutlineListItem } from "./extensions/outline-list-item"; -import { Table } from "./extensions/table"; -import { useIsMobile } from "./toolbar/stores/toolbar-store"; -EditorView.prototype.updateState = function updateState(state) { +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.Toolbar = exports.useTiptap = void 0; +require("./extensions"); +var extension_character_count_1 = __importDefault(require("@tiptap/extension-character-count")); +var extension_placeholder_1 = __importDefault(require("@tiptap/extension-placeholder")); +var extension_underline_1 = __importDefault(require("@tiptap/extension-underline")); +var react_1 = require("@tiptap/react"); +var starter_kit_1 = __importDefault(require("@tiptap/starter-kit")); +var react_2 = require("react"); +var prosemirror_view_1 = require("prosemirror-view"); +var toolbar_1 = __importDefault(require("./toolbar")); +exports.Toolbar = toolbar_1.default; +var extension_text_align_1 = __importDefault(require("@tiptap/extension-text-align")); +var extension_subscript_1 = __importDefault(require("@tiptap/extension-subscript")); +var extension_superscript_1 = __importDefault(require("@tiptap/extension-superscript")); +var fontsize_1 = __importDefault(require("./extensions/fontsize")); +var textdirection_1 = __importDefault(require("./extensions/textdirection")); +var extension_text_style_1 = __importDefault(require("@tiptap/extension-text-style")); +var extension_font_family_1 = __importDefault(require("@tiptap/extension-font-family")); +var bulletlist_1 = __importDefault(require("./extensions/bulletlist")); +var orderedlist_1 = __importDefault(require("./extensions/orderedlist")); +var extension_highlight_1 = __importDefault(require("@tiptap/extension-highlight")); +var extension_color_1 = __importDefault(require("@tiptap/extension-color")); +var extension_table_row_1 = __importDefault(require("@tiptap/extension-table-row")); +var tablecell_1 = __importDefault(require("./extensions/tablecell")); +var extension_table_header_1 = __importDefault(require("@tiptap/extension-table-header")); +var image_1 = require("./extensions/image"); +var attachment_1 = require("./extensions/attachment"); +var tasklist_1 = require("./extensions/tasklist"); +var taskitem_1 = require("./extensions/taskitem"); +var dropcursor_1 = require("./extensions/dropcursor"); +var searchreplace_1 = require("./extensions/searchreplace"); +var embed_1 = require("./extensions/embed"); +var codeblock_1 = require("./extensions/codeblock"); +var listitem_1 = require("./extensions/listitem"); +var extension_link_1 = require("@tiptap/extension-link"); +var codemark_1 = require("./extensions/codemark"); +var math_1 = require("./extensions/math"); +var react_3 = require("./extensions/react"); +var outlinelist_1 = require("./extensions/outlinelist"); +var outlinelistitem_1 = require("./extensions/outlinelistitem"); +var table_1 = require("./extensions/table"); +var toolbarstore_1 = require("./toolbar/stores/toolbarstore"); +prosemirror_view_1.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); @@ -69,14 +90,14 @@ var useTiptap = function (options, deps) { if (options === void 0) { options = {}; } if (deps === void 0) { deps = []; } var theme = options.theme, onDownloadAttachment = options.onDownloadAttachment, onOpenAttachmentPicker = options.onOpenAttachmentPicker, restOptions = __rest(options, ["theme", "onDownloadAttachment", "onOpenAttachmentPicker"]); - var PortalProviderAPI = usePortalProvider(); - var isMobile = useIsMobile(); - var defaultOptions = useMemo(function () { return ({ + var PortalProviderAPI = (0, react_3.usePortalProvider)(); + var isMobile = (0, toolbarstore_1.useIsMobile)(); + var defaultOptions = (0, react_2.useMemo)(function () { return ({ extensions: [ - NodeViewSelectionNotifier, - SearchReplace, - TextStyle, - StarterKit.configure({ + react_3.NodeViewSelectionNotifier, + searchreplace_1.SearchReplace, + extension_text_style_1.default, + starter_kit_1.default.configure({ dropcursor: false, codeBlock: false, listItem: false, @@ -87,54 +108,54 @@ var useTiptap = function (options, deps) { newGroupDelay: 1000, }, }), - Dropcursor.configure({ + dropcursor_1.Dropcursor.configure({ class: "drop-cursor", }), - CharacterCount, - Underline, - Subscript, - Superscript, - FontSize, - TextDirection, - FontFamily, - BulletList, - OrderedList, - TaskItemNode.configure({ nested: true }), - TaskListNode, - Link.configure({ openOnClick: !isMobile }), - Table.configure({ + extension_character_count_1.default, + extension_underline_1.default, + extension_subscript_1.default, + extension_superscript_1.default, + fontsize_1.default, + textdirection_1.default, + extension_font_family_1.default, + bulletlist_1.default, + orderedlist_1.default, + taskitem_1.TaskItemNode.configure({ nested: true }), + tasklist_1.TaskListNode, + extension_link_1.Link.configure({ openOnClick: !isMobile }), + table_1.Table.configure({ resizable: true, allowTableNodeSelection: true, cellMinWidth: 50, }), - TableRow, - TableCell, - TableHeader, - Highlight.configure({ + extension_table_row_1.default, + tablecell_1.default, + extension_table_header_1.default, + extension_highlight_1.default.configure({ multicolor: true, }), - CodeBlock, - Color, - TextAlign.configure({ + codeblock_1.CodeBlock, + extension_color_1.default, + extension_text_align_1.default.configure({ types: ["heading", "paragraph"], alignments: ["left", "right", "center", "justify"], defaultAlignment: "left", }), - Placeholder.configure({ + extension_placeholder_1.default.configure({ placeholder: "Start writing your note...", }), - ImageNode, - EmbedNode, - AttachmentNode.configure({ + image_1.ImageNode, + embed_1.EmbedNode, + attachment_1.AttachmentNode.configure({ onDownloadAttachment: onDownloadAttachment, onOpenAttachmentPicker: onOpenAttachmentPicker, }), - OutlineListItem, - OutlineList, - ListItem, - Codemark, - MathInline, - MathBlock, + outlinelistitem_1.OutlineListItem, + outlinelist_1.OutlineList, + listitem_1.ListItem, + codemark_1.Codemark, + math_1.MathInline, + math_1.MathBlock, ], onBeforeCreate: function (_a) { var editor = _a.editor; @@ -151,16 +172,16 @@ var useTiptap = function (options, deps) { PortalProviderAPI, isMobile, ]); - var editor = useEditor(__assign(__assign({}, defaultOptions), restOptions), deps); - var editorRef = useRef(editor); - useEffect(function () { + var editor = (0, react_1.useEditor)(__assign(__assign({}, defaultOptions), restOptions), deps); + var editorRef = (0, react_2.useRef)(editor); + (0, react_2.useEffect)(function () { editorRef.current = editor; if (editor && !editor.current) Object.defineProperty(editor, "current", { get: function () { return editorRef.current; }, }); }, [editor]); - useEffect(function () { + (0, react_2.useEffect)(function () { function onDragEnter(event) { if (!!(editor === null || editor === void 0 ? void 0 : editor.view.dragging)) { event.preventDefault(); @@ -174,7 +195,7 @@ var useTiptap = function (options, deps) { }, [editor === null || editor === void 0 ? void 0 : editor.view.dom]); return editor; }; -export { useTiptap, Toolbar }; -export * from "./types"; -export * from "./extensions/react"; -export * from "./toolbar/tool-definitions"; +exports.useTiptap = useTiptap; +__exportStar(require("./types"), exports); +__exportStar(require("./extensions/react"), exports); +__exportStar(require("./toolbar/tooldefinitions"), exports); diff --git a/packages/editor/dist/toolbar/components/counter.js b/packages/editor/dist/toolbar/components/counter.js index 1ba7e4b07..133d006ff 100644 --- a/packages/editor/dist/toolbar/components/counter.js +++ b/packages/editor/dist/toolbar/components/counter.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -9,23 +10,28 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; -import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; -import React from "react"; -import { Flex, Text } from "rebass"; -import { Button } from "../../components/button"; -import { ToolButton } from "./tool-button"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.Counter = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var react_1 = __importDefault(require("react")); +var rebass_1 = require("rebass"); +var button_1 = require("../../components/button"); +var toolbutton_1 = require("./toolbutton"); function _Counter(props) { var title = props.title, onDecrease = props.onDecrease, onIncrease = props.onIncrease, onReset = props.onReset, value = props.value; - return (_jsxs(Flex, __assign({ sx: { + return ((0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ sx: { alignItems: "center", mr: 1, ":last-of-type": { mr: 0, }, - } }, { children: [_jsx(ToolButton, { toggled: false, title: "Decrease ".concat(title), icon: "minus", variant: "small", onClick: onDecrease }), _jsx(Button, __assign({ sx: { + } }, { children: [(0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, { toggled: false, title: "Decrease ".concat(title), icon: "minus", variant: "small", onClick: onDecrease }), (0, jsx_runtime_1.jsx)(button_1.Button, __assign({ sx: { bg: "transparent", - }, onClick: onReset }, { children: _jsx(Text, __assign({ variant: "body", sx: { fontSize: "subBody", mx: 1, textAlign: "center" }, title: "Reset ".concat(title) }, { children: value })) })), _jsx(ToolButton, { toggled: false, title: "Increase ".concat(title), icon: "plus", variant: "small", onClick: onIncrease })] }))); + }, onClick: onReset }, { children: (0, jsx_runtime_1.jsx)(rebass_1.Text, __assign({ variant: "body", sx: { fontSize: "subBody", mx: 1, textAlign: "center" }, title: "Reset ".concat(title) }, { children: value })) })), (0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, { toggled: false, title: "Increase ".concat(title), icon: "plus", variant: "small", onClick: onIncrease })] }))); } -export var Counter = React.memo(_Counter, function (prev, next) { +exports.Counter = react_1.default.memo(_Counter, function (prev, next) { return prev.value === next.value; }); diff --git a/packages/editor/dist/toolbar/components/dropdown.js b/packages/editor/dist/toolbar/components/dropdown.js index 9a7ff0c5a..c376d2781 100644 --- a/packages/editor/dist/toolbar/components/dropdown.js +++ b/packages/editor/dist/toolbar/components/dropdown.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -25,22 +26,24 @@ var __read = (this && this.__read) || function (o, n) { } return ar; }; -import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; -import { useRef, useState } from "react"; -import { Button, Text } from "rebass"; -import { Icon } from "./icon"; -import { Icons } from "../icons"; -import { useIsMobile, useToolbarLocation } from "../stores/toolbar-store"; -import { MenuPresenter } from "../../components/menu"; -import { getToolbarElement } from "../utils/dom"; -export function Dropdown(props) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.Dropdown = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var react_1 = require("react"); +var rebass_1 = require("rebass"); +var icon_1 = require("./icon"); +var icons_1 = require("../icons"); +var toolbarstore_1 = require("../stores/toolbarstore"); +var menu_1 = require("../../components/menu"); +var dom_1 = require("../utils/dom"); +function Dropdown(props) { var items = props.items, selectedItem = props.selectedItem, buttonRef = props.buttonRef, menuWidth = props.menuWidth; - var internalRef = useRef(); - var _a = __read(useState(false), 2), isOpen = _a[0], setIsOpen = _a[1]; - var toolbarLocation = useToolbarLocation(); - var isMobile = useIsMobile(); + var internalRef = (0, react_1.useRef)(); + var _a = __read((0, react_1.useState)(false), 2), isOpen = _a[0], setIsOpen = _a[1]; + var toolbarLocation = (0, toolbarstore_1.useToolbarLocation)(); + var isMobile = (0, toolbarstore_1.useIsMobile)(); var isBottom = toolbarLocation === "bottom"; - return (_jsxs(_Fragment, { children: [_jsxs(Button, __assign({ ref: function (ref) { + return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(rebass_1.Button, __assign({ ref: function (ref) { internalRef.current = ref; if (buttonRef) buttonRef.current = ref; @@ -55,9 +58,9 @@ export function Dropdown(props) { ":last-of-type": { mr: 0, }, - }, onClick: function () { return setIsOpen(function (s) { return !s; }); }, onMouseDown: function (e) { return e.preventDefault(); } }, { children: [typeof selectedItem === "string" ? (_jsx(Text, __assign({ sx: { fontSize: "subBody", mr: 1, color: "text" } }, { children: selectedItem }))) : (selectedItem), _jsx(Icon, { path: isBottom ? Icons.chevronUp : Icons.chevronDown, size: "small", color: "text" })] })), _jsx(MenuPresenter, { isOpen: isOpen, items: items, onClose: function () { return setIsOpen(false); }, position: { + }, onClick: function () { return setIsOpen(function (s) { return !s; }); }, onMouseDown: function (e) { return e.preventDefault(); } }, { children: [typeof selectedItem === "string" ? ((0, jsx_runtime_1.jsx)(rebass_1.Text, __assign({ sx: { fontSize: "subBody", mr: 1, color: "text" } }, { children: selectedItem }))) : (selectedItem), (0, jsx_runtime_1.jsx)(icon_1.Icon, { path: isBottom ? icons_1.Icons.chevronUp : icons_1.Icons.chevronDown, size: "small", color: "text" })] })), (0, jsx_runtime_1.jsx)(menu_1.MenuPresenter, { isOpen: isOpen, items: items, onClose: function () { return setIsOpen(false); }, position: { target: isBottom - ? getToolbarElement() + ? (0, dom_1.getToolbarElement)() : internalRef.current || "mouse", isTargetAbsolute: true, location: isBottom ? "top" : "below", @@ -73,3 +76,4 @@ export function Dropdown(props) { alignItems: isBottom ? "center" : "unset", } })] })); } +exports.Dropdown = Dropdown; diff --git a/packages/editor/dist/toolbar/components/icon.js b/packages/editor/dist/toolbar/components/icon.js index 866db2346..814a33c0b 100644 --- a/packages/editor/dist/toolbar/components/icon.js +++ b/packages/editor/dist/toolbar/components/icon.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -20,22 +21,28 @@ var __rest = (this && this.__rest) || function (s, e) { } return t; }; -import { jsx as _jsx } from "react/jsx-runtime"; -import MDIIcon from "@mdi/react"; -import { useTheme } from "emotion-theming"; -import { Flex } from "rebass"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.Icon = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var react_1 = __importDefault(require("@mdi/react")); +var emotion_theming_1 = require("emotion-theming"); +var rebass_1 = require("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 theme = (0, emotion_theming_1.useTheme)(); var themedColor = theme.colors ? theme.colors[color] : color; - return (_jsx(MDIIcon, { className: "icon", title: title, path: path, size: typeof size === "string" ? "".concat(theme.iconSizes[size], "px") : "".concat(size, "px"), style: { + return ((0, jsx_runtime_1.jsx)(react_1.default, { className: "icon", title: title, path: path, size: typeof size === "string" ? "".concat(theme.iconSizes[size], "px") : "".concat(size, "px"), style: { strokeWidth: stroke || "0px", stroke: themedColor, }, color: themedColor, spin: rotate })); } -export function Icon(props) { +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 }) }))); + return ((0, jsx_runtime_1.jsx)(rebass_1.Flex, __assign({ sx: __assign({ flexShrink: 0, justifyContent: "center", alignItems: "center" }, sx) }, restProps, { children: (0, jsx_runtime_1.jsx)(MDIIconWrapper, { title: title, path: path, rotate: rotate, color: color, stroke: stroke, size: size }) }))); } +exports.Icon = Icon; diff --git a/packages/editor/dist/toolbar/components/moretools.js b/packages/editor/dist/toolbar/components/moretools.js index 66188f7fa..e58df6b92 100644 --- a/packages/editor/dist/toolbar/components/moretools.js +++ b/packages/editor/dist/toolbar/components/moretools.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -25,26 +26,28 @@ var __read = (this && this.__read) || function (o, n) { } return ar; }; -import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; -import { useRef, useState } from "react"; -import { PopupWrapper } from "../../components/popup-presenter"; -import { ToolButton } from "../components/tool-button"; -import { useToolbarLocation } from "../stores/toolbar-store"; -import { getToolbarElement } from "../utils/dom"; -import { ToolbarGroup } from "./toolbar-group"; -export function MoreTools(props) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.MoreTools = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var react_1 = require("react"); +var popuppresenter_1 = require("../../components/popuppresenter"); +var toolbutton_1 = require("../components/toolbutton"); +var toolbarstore_1 = require("../stores/toolbarstore"); +var dom_1 = require("../utils/dom"); +var toolbargroup_1 = require("./toolbargroup"); +function MoreTools(props) { var popupId = props.popupId, editor = props.editor, tools = props.tools, autoCloseOnUnmount = props.autoCloseOnUnmount; - var toolbarLocation = useToolbarLocation(); + var toolbarLocation = (0, toolbarstore_1.useToolbarLocation)(); var isBottom = toolbarLocation === "bottom"; - var buttonRef = useRef(); - var _a = __read(useState(false), 2), isOpen = _a[0], setIsOpen = _a[1]; - return (_jsxs(_Fragment, { children: [_jsx(ToolButton, __assign({}, props, { toggled: isOpen, buttonRef: buttonRef, onClick: function () { return setIsOpen(function (s) { return !s; }); } })), _jsx(PopupWrapper, { isOpen: isOpen, group: "toolbarGroup", id: popupId, onClosed: function () { return setIsOpen(false); }, position: { + var buttonRef = (0, react_1.useRef)(); + var _a = __read((0, react_1.useState)(false), 2), isOpen = _a[0], setIsOpen = _a[1]; + return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({}, props, { toggled: isOpen, buttonRef: buttonRef, onClick: function () { return setIsOpen(function (s) { return !s; }); } })), (0, jsx_runtime_1.jsx)(popuppresenter_1.PopupWrapper, { isOpen: isOpen, group: "toolbarGroup", id: popupId, onClosed: function () { return setIsOpen(false); }, position: { isTargetAbsolute: true, - target: isBottom ? getToolbarElement() : buttonRef.current || "mouse", + target: isBottom ? (0, dom_1.getToolbarElement)() : buttonRef.current || "mouse", align: "center", location: isBottom ? "top" : "below", yOffset: isBottom ? 10 : 5, - }, autoCloseOnUnmount: autoCloseOnUnmount, focusOnRender: false, blocking: false, renderPopup: function () { return (_jsx(ToolbarGroup, { tools: tools, editor: editor, sx: { + }, autoCloseOnUnmount: autoCloseOnUnmount, focusOnRender: false, blocking: false, renderPopup: function () { return ((0, jsx_runtime_1.jsx)(toolbargroup_1.ToolbarGroup, { tools: tools, editor: editor, sx: { flex: 1, p: 1, boxShadow: "menu", @@ -54,3 +57,4 @@ export function MoreTools(props) { maxWidth: "95vw", } })); } })] })); } +exports.MoreTools = MoreTools; diff --git a/packages/editor/dist/toolbar/components/popup.js b/packages/editor/dist/toolbar/components/popup.js index 68e251c26..b98e3e7c5 100644 --- a/packages/editor/dist/toolbar/components/popup.js +++ b/packages/editor/dist/toolbar/components/popup.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -9,14 +10,16 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; -import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; -import { Button, Flex, Text } from "rebass"; -import { Icon } from "./icon"; -import { Icons } from "../icons"; -import { DesktopOnly, MobileOnly } from "../../components/responsive"; -export function Popup(props) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.Popup = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var rebass_1 = require("rebass"); +var icon_1 = require("./icon"); +var icons_1 = require("../icons"); +var responsive_1 = require("../../components/responsive"); +function Popup(props) { var title = props.title, onClose = props.onClose, action = props.action, children = props.children; - return (_jsxs(_Fragment, { children: [_jsx(DesktopOnly, { children: _jsxs(Flex, __assign({ sx: { + return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(responsive_1.DesktopOnly, { children: (0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ sx: { overflow: "hidden", bg: "background", flexDirection: "column", @@ -24,15 +27,16 @@ export function Popup(props) { // border: "1px solid var(--border)", boxShadow: "menu", minWidth: 200, - } }, { children: [title && (_jsxs(Flex, __assign({ className: "movable", sx: { + } }, { children: [title && ((0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ className: "movable", sx: { justifyContent: "space-between", alignItems: "center", p: 2, - } }, { children: [_jsx(Text, __assign({ variant: "title" }, { children: title })), _jsx(Button, __assign({ variant: "tool", sx: { p: 0, bg: "transparent" }, onClick: onClose }, { children: _jsx(Icon, { path: Icons.close, size: "big" }) }))] }))), children, title && action && (_jsx(Flex, __assign({ sx: { justifyContent: "end" }, bg: "bgSecondary", p: 1, px: 2, mt: 2 }, { children: _jsx(Button, __assign({ variant: "dialog", onClick: action.disabled || action.loading ? undefined : action.onClick, disabled: action.disabled || action.loading }, { children: action.loading ? (_jsx(Icon, { path: Icons.loading, rotate: true, size: "medium" })) : (action.title) })) })))] })) }), _jsxs(MobileOnly, { children: [children, action && (_jsx(Button, __assign({ variant: "primary", sx: { + } }, { children: [(0, jsx_runtime_1.jsx)(rebass_1.Text, __assign({ variant: "title" }, { children: title })), (0, jsx_runtime_1.jsx)(rebass_1.Button, __assign({ variant: "tool", sx: { p: 0, bg: "transparent" }, onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { path: icons_1.Icons.close, size: "big" }) }))] }))), children, title && action && ((0, jsx_runtime_1.jsx)(rebass_1.Flex, __assign({ sx: { justifyContent: "end" }, bg: "bgSecondary", p: 1, px: 2, mt: 2 }, { children: (0, jsx_runtime_1.jsx)(rebass_1.Button, __assign({ variant: "dialog", onClick: action.disabled || action.loading ? undefined : action.onClick, disabled: action.disabled || action.loading }, { children: action.loading ? ((0, jsx_runtime_1.jsx)(icon_1.Icon, { path: icons_1.Icons.loading, rotate: true, size: "medium" })) : (action.title) })) })))] })) }), (0, jsx_runtime_1.jsxs)(responsive_1.MobileOnly, { children: [children, action && ((0, jsx_runtime_1.jsx)(rebass_1.Button, __assign({ variant: "primary", sx: { alignSelf: "stretch", mb: 1, mt: 2, mx: 1, py: 2, - }, onClick: action.disabled ? undefined : action === null || action === void 0 ? void 0 : action.onClick, disabled: action.disabled }, { children: action.loading ? (_jsx(Icon, { path: Icons.loading, rotate: true, size: "medium" })) : (action.title) })))] })] })); + }, onClick: action.disabled ? undefined : action === null || action === void 0 ? void 0 : action.onClick, disabled: action.disabled }, { children: action.loading ? ((0, jsx_runtime_1.jsx)(icon_1.Icon, { path: icons_1.Icons.loading, rotate: true, size: "medium" })) : (action.title) })))] })] })); } +exports.Popup = Popup; diff --git a/packages/editor/dist/toolbar/components/splitbutton.js b/packages/editor/dist/toolbar/components/splitbutton.js index 9303df153..dadabc1b5 100644 --- a/packages/editor/dist/toolbar/components/splitbutton.js +++ b/packages/editor/dist/toolbar/components/splitbutton.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -20,24 +21,29 @@ var __rest = (this && this.__rest) || function (s, e) { } return t; }; -import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; -import { useRef } from "react"; -import { Flex } from "rebass"; -import { Icons } from "../icons"; -import { Icon } from "./icon"; -import { ToolButton } from "./tool-button"; -import { useToolbarLocation } from "../stores/toolbar-store"; -import { Button } from "../../components/button"; -import React from "react"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.SplitButton = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var react_1 = require("react"); +var rebass_1 = require("rebass"); +var icons_1 = require("../icons"); +var icon_1 = require("./icon"); +var toolbutton_1 = require("./toolbutton"); +var toolbarstore_1 = require("../stores/toolbarstore"); +var button_1 = require("../../components/button"); +var react_2 = __importDefault(require("react")); function _SplitButton(props) { var children = props.children, toggled = props.toggled, onOpen = props.onOpen, toolButtonProps = __rest(props, ["children", "toggled", "onOpen"]); - var ref = useRef(null); - var toolbarLocation = useToolbarLocation(); - return (_jsxs(_Fragment, { children: [_jsxs(Flex, __assign({ ref: ref, sx: { + var ref = (0, react_1.useRef)(null); + var toolbarLocation = (0, toolbarstore_1.useToolbarLocation)(); + return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ ref: ref, sx: { borderRadius: "default", bg: toggled ? "hover" : "transparent", ":hover": { bg: "hover" }, - } }, { children: [_jsx(ToolButton, __assign({}, toolButtonProps, { toggled: toggled })), _jsx(Button, __assign({ sx: { + } }, { children: [(0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({}, toolButtonProps, { toggled: toggled })), (0, jsx_runtime_1.jsx)(button_1.Button, __assign({ sx: { p: 0, m: 0, bg: toggled ? "hover" : "transparent", @@ -45,8 +51,8 @@ function _SplitButton(props) { ":last-of-type": { mr: 0, }, - }, onClick: onOpen }, { children: _jsx(Icon, { path: toolbarLocation === "bottom" ? Icons.chevronUp : Icons.chevronDown, color: "text", size: "small" }) }))] })), children] })); + }, onClick: onOpen }, { children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { path: toolbarLocation === "bottom" ? icons_1.Icons.chevronUp : icons_1.Icons.chevronDown, color: "text", size: "small" }) }))] })), children] })); } -export var SplitButton = React.memo(_SplitButton, function (prev, next) { +exports.SplitButton = react_2.default.memo(_SplitButton, function (prev, next) { return prev.toggled === next.toggled; }); diff --git a/packages/editor/dist/toolbar/components/toolbargroup.js b/packages/editor/dist/toolbar/components/toolbargroup.js index b969c71eb..d0fe78557 100644 --- a/packages/editor/dist/toolbar/components/toolbargroup.js +++ b/packages/editor/dist/toolbar/components/toolbargroup.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -20,21 +21,24 @@ var __rest = (this && this.__rest) || function (s, e) { } return t; }; -import { jsx as _jsx } from "react/jsx-runtime"; -import { findTool } from "../tools"; -import { Flex } from "rebass"; -import { MoreTools } from "./more-tools"; -import { getToolDefinition } from "../tool-definitions"; -export function ToolbarGroup(props) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.ToolbarGroup = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var tools_1 = require("../tools"); +var rebass_1 = require("rebass"); +var moretools_1 = require("./moretools"); +var tooldefinitions_1 = require("../tooldefinitions"); +function ToolbarGroup(props) { var tools = props.tools, editor = props.editor, force = props.force, selectedNode = props.selectedNode, flexProps = __rest(props, ["tools", "editor", "force", "selectedNode"]); - return (_jsx(Flex, __assign({ className: "toolbar-group" }, flexProps, { children: tools.map(function (toolId) { + return ((0, jsx_runtime_1.jsx)(rebass_1.Flex, __assign({ className: "toolbar-group" }, flexProps, { children: tools.map(function (toolId) { if (Array.isArray(toolId)) { - return (_jsx(MoreTools, { title: "More", icon: "more", popupId: toolId.join(""), tools: toolId, editor: editor }, "more-tools")); + return ((0, jsx_runtime_1.jsx)(moretools_1.MoreTools, { title: "More", icon: "more", popupId: toolId.join(""), tools: toolId, editor: editor }, "more-tools")); } else { - var Component = findTool(toolId); - var toolDefinition = getToolDefinition(toolId); - return (_jsx(Component, __assign({ editor: editor, force: force, selectedNode: selectedNode }, toolDefinition), toolDefinition.title)); + var Component = (0, tools_1.findTool)(toolId); + var toolDefinition = (0, tooldefinitions_1.getToolDefinition)(toolId); + return ((0, jsx_runtime_1.jsx)(Component, __assign({ editor: editor, force: force, selectedNode: selectedNode }, toolDefinition), toolDefinition.title)); } }) }))); } +exports.ToolbarGroup = ToolbarGroup; diff --git a/packages/editor/dist/toolbar/components/toolbutton.d.ts b/packages/editor/dist/toolbar/components/toolbutton.d.ts index 8d67be87b..74e32eb1e 100644 --- a/packages/editor/dist/toolbar/components/toolbutton.d.ts +++ b/packages/editor/dist/toolbar/components/toolbutton.d.ts @@ -14,8 +14,8 @@ export declare type ToolButtonProps = ButtonProps & { }; export declare const ToolButton: React.NamedExoticComponent | undefined; variant?: ToolButtonVariant | undefined; diff --git a/packages/editor/dist/toolbar/components/toolbutton.js b/packages/editor/dist/toolbar/components/toolbutton.js index 23a40379b..30090fb10 100644 --- a/packages/editor/dist/toolbar/components/toolbutton.js +++ b/packages/editor/dist/toolbar/components/toolbutton.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -20,16 +21,21 @@ var __rest = (this && this.__rest) || function (s, e) { } return t; }; -import { jsx as _jsx } from "react/jsx-runtime"; -import React from "react"; -import { Icons } from "../icons"; -import { Button } from "../../components/button"; -import { Icon } from "./icon"; -export var ToolButton = React.memo(function ToolButton(props) { +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.ToolButton = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var react_1 = __importDefault(require("react")); +var icons_1 = require("../icons"); +var button_1 = require("../../components/button"); +var icon_1 = require("./icon"); +exports.ToolButton = react_1.default.memo(function ToolButton(props) { var id = props.id, icon = props.icon, iconSize = props.iconSize, iconColor = props.iconColor, toggled = props.toggled, sx = props.sx, buttonRef = props.buttonRef, _a = props.variant, variant = _a === void 0 ? "normal" : _a, buttonProps = __rest(props, ["id", "icon", "iconSize", "iconColor", "toggled", "sx", "buttonRef", "variant"]); - return (_jsx(Button, __assign({ ref: buttonRef, tabIndex: -1, id: "tool-".concat(id || icon), sx: __assign({ flexShrink: 0, p: variant === "small" ? "small" : 1, borderRadius: variant === "small" ? "small" : "default", m: 0, bg: toggled ? "hover" : "transparent", mr: variant === "small" ? 0 : 1, ":hover": { bg: ["transparent", "hover"] }, ":active": { bg: "hover" }, ":last-of-type": { + return ((0, jsx_runtime_1.jsx)(button_1.Button, __assign({ ref: buttonRef, tabIndex: -1, id: "tool-".concat(id || icon), sx: __assign({ flexShrink: 0, p: variant === "small" ? "small" : 1, borderRadius: variant === "small" ? "small" : "default", m: 0, bg: toggled ? "hover" : "transparent", mr: variant === "small" ? 0 : 1, ":hover": { bg: ["transparent", "hover"] }, ":active": { bg: "hover" }, ":last-of-type": { mr: 0, - } }, sx), onMouseDown: function (e) { return e.preventDefault(); } }, buttonProps, { children: _jsx(Icon, { path: Icons[icon], color: iconColor || "icon", size: iconSize || (variant === "small" ? "medium" : "big") }) }))); + } }, sx), onMouseDown: function (e) { return e.preventDefault(); } }, buttonProps, { children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { path: icons_1.Icons[icon], color: iconColor || "icon", size: iconSize || (variant === "small" ? "medium" : "big") }) }))); }, function (prev, next) { return prev.toggled === next.toggled; }); diff --git a/packages/editor/dist/toolbar/floatingmenus/hoverpopup/index.js b/packages/editor/dist/toolbar/floatingmenus/hoverpopup/index.js index 242147ed9..cc709f466 100644 --- a/packages/editor/dist/toolbar/floatingmenus/hoverpopup/index.js +++ b/packages/editor/dist/toolbar/floatingmenus/hoverpopup/index.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -9,17 +10,19 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; -import { jsx as _jsx } from "react/jsx-runtime"; -import { useEffect, useRef } from "react"; -import { showPopup } from "../../../components/popup-presenter"; -import { LinkHoverPopupHandler } from "./link"; -var handlers = __assign({}, LinkHoverPopupHandler); +Object.defineProperty(exports, "__esModule", { value: true }); +exports.HoverPopupHandler = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var react_1 = require("react"); +var popuppresenter_1 = require("../../../components/popuppresenter"); +var link_1 = require("./link"); +var handlers = __assign({}, link_1.LinkHoverPopupHandler); var HOVER_TIMEOUT = 500; -export function HoverPopupHandler(props) { +function HoverPopupHandler(props) { var editor = props.editor; - var hoverTimeoutId = useRef(); - var activePopup = useRef(); - useEffect(function () { + var hoverTimeoutId = (0, react_1.useRef)(); + var activePopup = (0, react_1.useRef)(); + (0, react_1.useEffect)(function () { function onMouseOver(e) { if (!e.target || !(e.target instanceof HTMLElement) || @@ -49,8 +52,8 @@ export function HoverPopupHandler(props) { var node = editor.current.view.state.doc.nodeAt(pos); if (!node) return; - var hidePopup = showPopup({ - popup: function () { return (_jsx(PopupHandler, { editor: editor, selectedNode: { + var hidePopup = (0, popuppresenter_1.showPopup)({ + popup: function () { return ((0, jsx_runtime_1.jsx)(PopupHandler, { editor: editor, selectedNode: { node: node, from: pos, to: pos + node.nodeSize, @@ -75,3 +78,4 @@ export function HoverPopupHandler(props) { }, []); return null; } +exports.HoverPopupHandler = HoverPopupHandler; diff --git a/packages/editor/dist/toolbar/floatingmenus/hoverpopup/link.js b/packages/editor/dist/toolbar/floatingmenus/hoverpopup/link.js index 688b0be4d..69503c1bd 100644 --- a/packages/editor/dist/toolbar/floatingmenus/hoverpopup/link.js +++ b/packages/editor/dist/toolbar/floatingmenus/hoverpopup/link.js @@ -1,5 +1,8 @@ -import { jsx as _jsx } from "react/jsx-runtime"; -import { ToolbarGroup } from "../../components/toolbar-group"; +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.LinkHoverPopupHandler = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var toolbargroup_1 = require("../../components/toolbargroup"); function LinkHoverPopup(props) { var editor = props.editor, selectedNode = props.selectedNode; var node = selectedNode.node; @@ -7,11 +10,11 @@ function LinkHoverPopup(props) { node.marks.length <= 0 || !node.marks.some(function (mark) { return mark.type.name === "link"; })) return null; - return (_jsx(ToolbarGroup, { force: true, tools: ["openLink", "editLink", "removeLink"], editor: editor, selectedNode: selectedNode, sx: { + return ((0, jsx_runtime_1.jsx)(toolbargroup_1.ToolbarGroup, { force: true, tools: ["openLink", "editLink", "removeLink"], editor: editor, selectedNode: selectedNode, sx: { bg: "background", boxShadow: "menu", borderRadius: "default", p: 1, } })); } -export var LinkHoverPopupHandler = { a: LinkHoverPopup }; +exports.LinkHoverPopupHandler = { a: LinkHoverPopup }; diff --git a/packages/editor/dist/toolbar/floatingmenus/index.js b/packages/editor/dist/toolbar/floatingmenus/index.js index 4da653a3a..4b776d751 100644 --- a/packages/editor/dist/toolbar/floatingmenus/index.js +++ b/packages/editor/dist/toolbar/floatingmenus/index.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -9,9 +10,12 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; -import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; -import { HoverPopupHandler } from "./hover-popup"; -import { SearchReplaceFloatingMenu } from "./search-replace"; -export function EditorFloatingMenus(props) { - return (_jsxs(_Fragment, { children: [_jsx(SearchReplaceFloatingMenu, __assign({}, props)), _jsx(HoverPopupHandler, __assign({}, props))] })); +Object.defineProperty(exports, "__esModule", { value: true }); +exports.EditorFloatingMenus = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var hoverpopup_1 = require("./hoverpopup"); +var searchreplace_1 = require("./searchreplace"); +function EditorFloatingMenus(props) { + return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(searchreplace_1.SearchReplaceFloatingMenu, __assign({}, props)), (0, jsx_runtime_1.jsx)(hoverpopup_1.HoverPopupHandler, __assign({}, props))] })); } +exports.EditorFloatingMenus = EditorFloatingMenus; diff --git a/packages/editor/dist/toolbar/floatingmenus/searchreplace.js b/packages/editor/dist/toolbar/floatingmenus/searchreplace.js index d2285373e..2d319020a 100644 --- a/packages/editor/dist/toolbar/floatingmenus/searchreplace.js +++ b/packages/editor/dist/toolbar/floatingmenus/searchreplace.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -9,18 +10,21 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; -import { jsx as _jsx } from "react/jsx-runtime"; -import { SearchReplacePopup } from "../popups/search-replace"; -import { ResponsivePresenter, } from "../../components/responsive"; -import { getToolbarElement } from "../utils/dom"; -export function SearchReplaceFloatingMenu(props) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.SearchReplaceFloatingMenu = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var searchreplace_1 = require("../popups/searchreplace"); +var responsive_1 = require("../../components/responsive"); +var dom_1 = require("../utils/dom"); +function SearchReplaceFloatingMenu(props) { var editor = props.editor; var isSearching = editor.storage.searchreplace.isSearching; - return (_jsx(ResponsivePresenter, __assign({ mobile: "sheet", desktop: "menu", isOpen: isSearching, onClose: function () { return editor.commands.endSearch(); }, position: { - target: getToolbarElement(), + return ((0, jsx_runtime_1.jsx)(responsive_1.ResponsivePresenter, __assign({ mobile: "sheet", desktop: "menu", isOpen: isSearching, onClose: function () { return editor.commands.endSearch(); }, position: { + target: (0, dom_1.getToolbarElement)(), isTargetAbsolute: true, location: "below", align: "end", yOffset: 5, - }, blocking: false, focusOnRender: false, draggable: false }, { children: _jsx(SearchReplacePopup, { editor: editor }) }))); + }, blocking: false, focusOnRender: false, draggable: false }, { children: (0, jsx_runtime_1.jsx)(searchreplace_1.SearchReplacePopup, { editor: editor }) }))); } +exports.SearchReplaceFloatingMenu = SearchReplaceFloatingMenu; diff --git a/packages/editor/dist/toolbar/floatingmenus/types.js b/packages/editor/dist/toolbar/floatingmenus/types.js index cb0ff5c3b..c8ad2e549 100644 --- a/packages/editor/dist/toolbar/floatingmenus/types.js +++ b/packages/editor/dist/toolbar/floatingmenus/types.js @@ -1 +1,2 @@ -export {}; +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); diff --git a/packages/editor/dist/toolbar/icons.js b/packages/editor/dist/toolbar/icons.js index bba64ebb4..ce8be5603 100644 --- a/packages/editor/dist/toolbar/icons.js +++ b/packages/editor/dist/toolbar/icons.js @@ -1,93 +1,96 @@ -import { mdiAttachment, mdiBorderHorizontal, mdiCheck, mdiChevronDown, mdiCodeBraces, mdiCodeTags, mdiDotsVertical, mdiFormatAlignCenter, mdiFormatAlignJustify, mdiFormatAlignLeft, mdiFormatAlignRight, mdiFormatBold, mdiFormatClear, mdiFormatColorHighlight, mdiFormatColorText, mdiFormatItalic, mdiFormatListBulleted, mdiFormatListNumbered, mdiFormatQuoteClose, mdiFormatStrikethrough, mdiFormatSubscript, mdiFormatSuperscript, mdiFormatTextdirectionLToR, mdiFormatTextdirectionRToL, mdiFormatUnderline, mdiImage, mdiInvertColorsOff, mdiLinkPlus, mdiLoading, mdiTable, mdiTableBorder, mdiTableRowPlusAfter, mdiTableRowPlusBefore, mdiTableRowRemove, mdiTableColumnPlusAfter, mdiTableColumnPlusBefore, mdiTableColumnRemove, mdiUploadOutline, mdiPlus, mdiFormatColorFill, mdiClose, mdiSortDescending, mdiArrowExpandRight, mdiArrowExpandLeft, mdiArrowExpandDown, mdiArrowExpandUp, mdiTableMergeCells, mdiTableSplitCell, mdiDeleteOutline, mdiDownloadOutline, mdiFormatListCheckbox, mdiDrag, mdiCheckboxMarkedOutline, mdiChevronUp, mdiArrowUp, mdiArrowDown, mdiRegex, mdiFormatLetterCase, mdiFormatLetterMatches, mdiMoviePlusOutline, mdiLink, mdiChevronRight, mdiTableColumnWidth, mdiTableRowHeight, mdiMinus, mdiPaletteOutline, mdiCircle, mdiChevronLeft, mdiTableCog, mdiTableOff, mdiRectangle, mdiImageEditOutline, mdiArrowLeft, mdiMovieCogOutline, mdiLinkOff, mdiOpenInNew, mdiCameraOutline, mdiMathIntegral, mdiFunctionVariant, mdiFileTreeOutline, } from "@mdi/js"; -export var Icons = { - bold: mdiFormatBold, - italic: mdiFormatItalic, - underline: mdiFormatUnderline, - strikethrough: mdiFormatStrikethrough, - code: mdiCodeTags, +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.Icons = void 0; +var js_1 = require("@mdi/js"); +exports.Icons = { + bold: js_1.mdiFormatBold, + italic: js_1.mdiFormatItalic, + underline: js_1.mdiFormatUnderline, + strikethrough: js_1.mdiFormatStrikethrough, + code: js_1.mdiCodeTags, codeRemove: "M3.62109375 1.83837892 2.26318358 3.13037107 6.46289063 7.536621 1.9995117 12l6.0000003 6 1.40039025-1.400391L4.80029295 12l3.0292968-3.0292965 7.0283205 7.371093-.2578125.2578125L16.000488 18l.224121-.224121 4.3125 4.52490225 1.35791025-1.29492225-4.34326125-4.55712825L22.000488 12l-6-6-1.40039025 1.40039063L19.19970675 12l-3.016113 3.016113L9.156738 7.6435545l.24316425-.24316387L7.999512 6l-.2109375.2109375Z", - 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, - linkRemove: mdiLinkOff, - openLink: mdiOpenInNew, + alignCenter: js_1.mdiFormatAlignCenter, + alignLeft: js_1.mdiFormatAlignLeft, + alignRight: js_1.mdiFormatAlignRight, + alignJustify: js_1.mdiFormatAlignJustify, + subscript: js_1.mdiFormatSubscript, + superscript: js_1.mdiFormatSuperscript, + horizontalRule: js_1.mdiBorderHorizontal, + codeblock: js_1.mdiCodeBraces, + blockquote: js_1.mdiFormatQuoteClose, + formatClear: js_1.mdiFormatClear, + ltr: js_1.mdiFormatTextdirectionLToR, + rtl: js_1.mdiFormatTextdirectionRToL, + numberedList: js_1.mdiFormatListNumbered, + bulletList: js_1.mdiFormatListBulleted, + highlight: js_1.mdiFormatColorHighlight, + textColor: js_1.mdiFormatColorText, + link: js_1.mdiLinkPlus, + linkRemove: js_1.mdiLinkOff, + openLink: js_1.mdiOpenInNew, linkEdit: "m19 14 1.28 1.28c.22.21.22.56 0 .77l-1 1L17.23 15l1-1c.11-.11.25-.17.39-.17s.27.06.38.17m-.3 3.63-6.06 6.07h-2.06v-2.06l6.07-6.06zM7 7h4v2H7c-1.6568542 0-3 1.343146-3 3s1.3431458 3 3 3h4v2H7c-2.7614237 0-5-2.238576-5-5 0-2.7614237 2.2385763-5 5-5m10 0c2.761424 0 5 2.2385763 5 5h-2c0-1.656854-1.343146-3-3-3h-4V7h4m-9 4h8v2H8v-2", linkSettings: "M7 7h4v2H7c-1.6568542 0-3 1.343146-3 3s1.3431458 3 3 3h4v2H7c-2.7614237 0-5-2.238576-5-5 0-2.7614237 2.2385763-5 5-5m10 0c2.761424 0 5 2.2385763 5 5h-2c0-1.656854-1.343146-3-3-3h-4V7h4m-9 4h8v2H8v-2m15.119777 8.323608-1.07-.82c.02-.17.04-.33.04-.5 0-.17-.01-.33-.04-.5l1.06-.82c.09258-.07939.117526-.212463.06-.32l-1-1.73c-.06-.13-.19-.13-.33-.13l-1.22.5c-.28-.18-.54-.35-.85-.47l-.19-1.32c-.01-.12-.12-.21-.24-.21h-2c-.12 0-.23.09-.25.21l-.19 1.32c-.3.13-.59.29-.85.47l-1.24-.5c-.11 0-.24 0-.31.13l-1 1.73c-.06.11-.04.24.06.32l1.06.82c-.03989.33214-.03989.66786 0 1l-1.06.82c-.09258.07939-.117526.212462-.06.32l1 1.73c.06.13.19.13.31.13l1.24-.5c.26.18.54.35.85.47l.19 1.32c.02.12.12.21.25.21h2c.12 0 .23-.09.25-.21l.19-1.32c.3-.13.56-.29.84-.47l1.22.5c.14 0 .27 0 .34-.13l1-1.73c.05753-.107538.03258-.240607-.06-.32m-4.78.18c-.83 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.66 1.5-1.5 1.5z", - url: mdiLink, - image: mdiImage, - imageSettings: mdiImageEditOutline, - colorClear: mdiInvertColorsOff, - check: mdiCheck, - checkbox: mdiCheckboxMarkedOutline, - loading: mdiLoading, - more: mdiDotsVertical, - upload: mdiUploadOutline, - camera: mdiCameraOutline, - attachment: mdiAttachment, - table: mdiTable, - rowProperties: mdiTableRowHeight, - insertRowBelow: mdiTableRowPlusAfter, - insertRowAbove: mdiTableRowPlusBefore, - moveRowDown: mdiArrowExpandDown, - moveRowUp: mdiArrowExpandUp, - deleteRow: mdiTableRowRemove, - toggleHeaderRow: mdiTableBorder, - columnProperties: mdiTableColumnWidth, - insertColumnRight: mdiTableColumnPlusAfter, - insertColumnLeft: mdiTableColumnPlusBefore, - moveColumnRight: mdiArrowExpandRight, - moveColumnLeft: mdiArrowExpandLeft, - deleteColumn: mdiTableColumnRemove, - cellProperties: mdiRectangle, + url: js_1.mdiLink, + image: js_1.mdiImage, + imageSettings: js_1.mdiImageEditOutline, + colorClear: js_1.mdiInvertColorsOff, + check: js_1.mdiCheck, + checkbox: js_1.mdiCheckboxMarkedOutline, + loading: js_1.mdiLoading, + more: js_1.mdiDotsVertical, + upload: js_1.mdiUploadOutline, + camera: js_1.mdiCameraOutline, + attachment: js_1.mdiAttachment, + table: js_1.mdiTable, + rowProperties: js_1.mdiTableRowHeight, + insertRowBelow: js_1.mdiTableRowPlusAfter, + insertRowAbove: js_1.mdiTableRowPlusBefore, + moveRowDown: js_1.mdiArrowExpandDown, + moveRowUp: js_1.mdiArrowExpandUp, + deleteRow: js_1.mdiTableRowRemove, + toggleHeaderRow: js_1.mdiTableBorder, + columnProperties: js_1.mdiTableColumnWidth, + insertColumnRight: js_1.mdiTableColumnPlusAfter, + insertColumnLeft: js_1.mdiTableColumnPlusBefore, + moveColumnRight: js_1.mdiArrowExpandRight, + moveColumnLeft: js_1.mdiArrowExpandLeft, + deleteColumn: js_1.mdiTableColumnRemove, + cellProperties: js_1.mdiRectangle, cellBorderColor: "M4 24q-.825 0-1.412-.587Q2 22.825 2 22q0-.825.588-1.413Q3.175 20 4 20h16q.825 0 1.413.587Q22 21.175 22 22q0 .825-.587 1.413Q20.825 24 20 24Zm1-6q-.425 0-.713-.288Q4 17.425 4 17v-2.325q0-.2.075-.388q.075-.187.225-.337l8.75-8.75l3.75 3.75l-8.75 8.75q-.15.15-.337.225q-.188.075-.388.075Zm1-2h.9L14 8.95L13.05 8L6 15.1Zm11.925-8.15l-3.75-3.75l1.8-1.8q.275-.3.7-.288q.425.013.7.288l2.35 2.35q.275.275.275.688q0 .412-.275.712ZM6 16Z", - backgroundColor: mdiFormatColorFill, + backgroundColor: js_1.mdiFormatColorFill, borderColor: "M4 24q-.825 0-1.412-.587Q2 22.825 2 22q0-.825.588-1.413Q3.175 20 4 20h16q.825 0 1.413.587Q22 21.175 22 22q0 .825-.587 1.413Q20.825 24 20 24Zm1-6q-.425 0-.713-.288Q4 17.425 4 17v-2.325q0-.2.075-.388q.075-.187.225-.337l8.75-8.75l3.75 3.75l-8.75 8.75q-.15.15-.337.225q-.188.075-.388.075Zm1-2h.9L14 8.95L13.05 8L6 15.1Zm11.925-8.15l-3.75-3.75l1.8-1.8q.275-.3.7-.288q.425.013.7.288l2.35 2.35q.275.275.275.688q0 .412-.275.712ZM6 16Z", - sortDesc: mdiSortDescending, - deleteTable: mdiTableOff, - mergeCells: mdiTableMergeCells, - splitCells: mdiTableSplitCell, - checklist: mdiFormatListCheckbox, - dragHandle: mdiDrag, - previousMatch: mdiArrowUp, - nextMatch: mdiArrowDown, + sortDesc: js_1.mdiSortDescending, + deleteTable: js_1.mdiTableOff, + mergeCells: js_1.mdiTableMergeCells, + splitCells: js_1.mdiTableSplitCell, + checklist: js_1.mdiFormatListCheckbox, + dragHandle: js_1.mdiDrag, + previousMatch: js_1.mdiArrowUp, + nextMatch: js_1.mdiArrowDown, replaceOne: "m5.4 5.42 3.48 3.5 3.43-3.43-1.08-1.08-1.57 1.55V3.5a.8.8 0 0 1 .76-.81h2.35v-1.5h-2.35a2.29 2.29 0 0 0-2.28 2.3v2.5L6.48 4.33Zm10.3 2.77c.3.48.7.72 1.25.72.61 0 1.1-.26 1.45-.78.37-.51.55-1.2.55-2.05 0-.8-.15-1.41-.46-1.87a1.51 1.51 0 0 0-1.33-.68c-.63 0-1.11.3-1.45.9h-.02V1.19h-1.37v7.6h1.37v-.6Zm-.03-1.64v-.52c0-.39.09-.7.27-.93a.83.83 0 0 1 .69-.36.76.76 0 0 1 .67.36c.16.24.24.57.24 1 0 .5-.09.9-.26 1.18a.8.8 0 0 1-.73.42.76.76 0 0 1-.63-.33 1.32 1.32 0 0 1-.25-.82zm-1.35 12.82c-.4.23-.97.35-1.71.35-.87 0-1.58-.27-2.12-.82a2.9 2.9 0 0 1-.8-2.12c0-1 .28-1.8.86-2.37a3.12 3.12 0 0 1 2.31-.87c.67 0 1.16.1 1.46.28v1.54a1.95 1.95 0 0 0-1.23-.42c-.5 0-.9.15-1.2.46-.29.3-.43.72-.43 1.26 0 .52.14.93.42 1.23.28.3.67.44 1.16.44.43 0 .86-.14 1.28-.43zm-7.73-8.91L5.05 12v9.27l1.54 1.54h10.82l1.54-1.54V12l-1.54-1.54zm0 1.54h10.82v9.27H6.59Z", replaceAll: "M16.53 4.22c.22-.45.52-.68.92-.68.36 0 .64.17.83.52.2.34.3.81.3 1.4a3.1 3.1 0 0 1-.35 1.57c-.22.39-.53.59-.91.59-.35 0-.61-.19-.79-.55h-.01v.45h-.87V1.77h.87v2.45h.01zm-.02 1.6a1.14 1.14 0 0 0 .15.63c.1.17.24.25.4.25.2 0 .35-.1.46-.32a2 2 0 0 0 .17-.9c0-.32-.05-.57-.15-.75-.1-.18-.24-.27-.43-.27-.17 0-.32.09-.43.27a1.3 1.3 0 0 0-.17.7ZM5.6 11.56l-3.1-3.1.97-.97 1.47 1.46v-2.2A2.03 2.03 0 0 1 6.96 4.7h3.43v1.32H6.96a.72.72 0 0 0-.68.73l.01 2.19 1.39-1.38.96.96-3.04 3.04Zm7.65-4.04h.94v-2.5c0-1.18-.46-1.78-1.38-1.78-.2 0-.41.04-.66.1a2.11 2.11 0 0 0-.56.25v.97c.34-.3.71-.44 1.1-.44.38 0 .57.23.57.68l-.88.16c-.74.12-1.11.59-1.11 1.4 0 .38.09.7.27.92a.9.9 0 0 0 .74.35c.42 0 .74-.24.96-.7h.01zm0-1.98v.28a1.1 1.1 0 0 1-.17.64.54.54 0 0 1-.46.25.4.4 0 0 1-.32-.14.56.56 0 0 1-.11-.36c0-.33.16-.51.48-.57l.59-.1zM9.82 19.21h-.94v-.6h-.02c-.21.46-.53.7-.96.7a.9.9 0 0 1-.74-.35 1.47 1.47 0 0 1-.27-.92c0-.8.38-1.28 1.12-1.4l.87-.15c0-.46-.19-.69-.57-.69-.38 0-.75.15-1.1.45v-.98c.14-.09.33-.17.57-.24.24-.07.46-.1.66-.1.92 0 1.38.59 1.38 1.78zm-.94-1.7v-.29l-.58.1c-.33.06-.49.25-.49.57 0 .15.04.27.12.36a.4.4 0 0 0 .32.14.54.54 0 0 0 .46-.25c.11-.17.17-.38.17-.63zm4.24 1.8c.47 0 .83-.09 1.08-.26v-1.03a1.32 1.32 0 0 1-.8.3.9.9 0 0 1-.74-.31c-.17-.22-.26-.5-.26-.88s.1-.68.28-.9a.94.94 0 0 1 .75-.32c.28 0 .54.1.77.3v-1.1c-.19-.12-.5-.19-.91-.19-.61 0-1.1.2-1.47.62-.36.4-.54.97-.54 1.68 0 .61.17 1.11.5 1.5.35.4.8.59 1.34.59zM2.5 13.46 3.96 12h13.16l1.46 1.46v7.3l-1.46 1.47H3.96L2.5 20.77Zm1.46 0v7.3h13.16v-7.3Zm4.39-2.92L9.8 9.08h10.23l1.46 1.46v7.3l-1.46 1.47v-8.77z", replace: "M21 4.5000005V14.25a1.5000007 1.5000005 0 0 1-1.500007 1.500005h-8.999996v1.49999a.74999993.74999995 0 0 1-.459373.693747.79687482.79687478 0 0 1-.290624.056263.77812509.77812509 0 0 1-.534375-.215621l-2.25-2.25a.759375.759375 0 0 1 0-1.068763l2.25-2.25a.7875.7875 0 0 1 .824999-.159371.74999993.74999995 0 0 1 .459373.693745V14.25h8.999996V4.5000005H9.0000007v.7499997a.75000036.75000039 0 0 1-1.5000007 0v-.7499997A1.5000007 1.5000005 0 0 1 9.0000007 3H19.499993A1.5000007 1.5000005 0 0 1 21 4.5000005ZM15.750007 18.000005a.74999993.74999995 0 0 0-.750014.749995v.749995H4.5000007V9.7500002h9.0000063v1.5000048a.759375.759375 0 0 0 .459381.693745.79687482.79687478 0 0 0 .290612.05631.77812509.77812509 0 0 0 .534372-.215621l2.25-2.2500079a.759375.759375 0 0 0 0-1.06875l-2.25-2.25a.76875023.76875019 0 0 0-.824984-.1594227.74999993.74999995 0 0 0-.459381.6937502v1.4999978H4.5000007A1.5000007 1.5000005 0 0 0 3 9.7500002v9.7499948A1.5000007 1.5000005 0 0 0 4.5000007 21H14.999993A1.5000007 1.5000005 0 0 0 16.5 19.499995V18.75a.74999993.74999995 0 0 0-.749993-.749995z", attachmentSettings: "m24.0138 20.223188-1.07-.82c.02-.17.04-.33.04-.5 0-.17-.01-.33-.04-.5l1.06-.82c.09258-.07939.117526-.212463.06-.32l-1-1.73c-.06-.13-.19-.13-.33-.13l-1.22.5c-.28-.18-.54-.35-.85-.47l-.19-1.32c-.01-.12-.12-.21-.24-.21h-2c-.12 0-.23.09-.25.21l-.19 1.32c-.3.13-.59.29-.85.47l-1.24-.5c-.11 0-.24 0-.31.13l-1 1.73c-.06.11-.04.24.06.32l1.06.82c-.03989.33214-.03989.66786 0 1l-1.06.82c-.09258.07939-.117526.212463-.06.32l1 1.73c.06.13.19.13.31.13l1.24-.5c.26.18.54.35.85.47l.19 1.32c.02.12.12.21.25.21h2c.12 0 .23-.09.25-.21l.19-1.32c.3-.13.56-.29.84-.47l1.22.5c.14 0 .27 0 .34-.13l1-1.73c.05753-.107537.03258-.240606-.06-.32m-4.78.18c-.83 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.66 1.5-1.5 1.5zM16.61 13.5c-.8.35-1.5.86-2.07 1.5H9.5c-3.3333319 0-3.3333319-5 0-5H17v1.5H9.5c-.55 0-1 .45-1 1s.45 1 1 1h7.11m-13.11-1c0-2.21 1.79-4 4-4H18c2.434718-.00632 3.435847 3.121347 1.45 4.53.6.04 1.18.17 1.72.38.52-.67.83-1.5.83-2.41 0-2.21-1.79-4-4-4H7.5C4.46 7 2 9.46 2 12.5S4.46 18 7.5 18h5.59c.09-.53.25-1.03.46-1.5H7.5c-2.21 0-4-1.79-4-4", - caseSensitive: mdiFormatLetterCase, - wholeWord: mdiFormatLetterMatches, - regex: mdiRegex, - embed: mdiMoviePlusOutline, - embedSettings: mdiMovieCogOutline, - palette: mdiPaletteOutline, - tableSettings: mdiTableCog, - math: mdiFunctionVariant, - mathBlock: mdiMathIntegral, - outlineList: mdiFileTreeOutline, - plus: mdiPlus, - minus: mdiMinus, - close: mdiClose, - delete: mdiDeleteOutline, - download: mdiDownloadOutline, - chevronDown: mdiChevronDown, - chevronUp: mdiChevronUp, - chevronRight: mdiChevronRight, - chevronLeft: mdiChevronLeft, - circle: mdiCircle, - arrowLeft: mdiArrowLeft, + caseSensitive: js_1.mdiFormatLetterCase, + wholeWord: js_1.mdiFormatLetterMatches, + regex: js_1.mdiRegex, + embed: js_1.mdiMoviePlusOutline, + embedSettings: js_1.mdiMovieCogOutline, + palette: js_1.mdiPaletteOutline, + tableSettings: js_1.mdiTableCog, + math: js_1.mdiFunctionVariant, + mathBlock: js_1.mdiMathIntegral, + outlineList: js_1.mdiFileTreeOutline, + plus: js_1.mdiPlus, + minus: js_1.mdiMinus, + close: js_1.mdiClose, + delete: js_1.mdiDeleteOutline, + download: js_1.mdiDownloadOutline, + chevronDown: js_1.mdiChevronDown, + chevronUp: js_1.mdiChevronUp, + chevronRight: js_1.mdiChevronRight, + chevronLeft: js_1.mdiChevronLeft, + circle: js_1.mdiCircle, + arrowLeft: js_1.mdiArrowLeft, none: "", }; diff --git a/packages/editor/dist/toolbar/index.js b/packages/editor/dist/toolbar/index.js index 868030ec7..f8741e8dd 100644 --- a/packages/editor/dist/toolbar/index.js +++ b/packages/editor/dist/toolbar/index.js @@ -1,2 +1,4 @@ -import { Toolbar } from "./toolbar"; -export default Toolbar; +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +var toolbar_1 = require("./toolbar"); +exports.default = toolbar_1.Toolbar; diff --git a/packages/editor/dist/toolbar/popups/cellproperties.js b/packages/editor/dist/toolbar/popups/cellproperties.js index c585ad979..340d155f6 100644 --- a/packages/editor/dist/toolbar/popups/cellproperties.js +++ b/packages/editor/dist/toolbar/popups/cellproperties.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -9,25 +10,28 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; -import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; -import { Box } from "rebass"; -import { Tab, Tabs } from "../../components/tabs"; -import { Icon } from "../components/icon"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.CellProperties = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var rebass_1 = require("rebass"); +var tabs_1 = require("../../components/tabs"); +var icon_1 = require("../components/icon"); // import { MenuPresenter } from "../../components/menu/menu"; -import { Popup } from "../components/popup"; -import { Icons } from "../icons"; -import { ColorPicker } from "./color-picker"; -export function CellProperties(props) { +var popup_1 = require("../components/popup"); +var icons_1 = require("../icons"); +var colorpicker_1 = require("./colorpicker"); +function CellProperties(props) { var editor = props.editor, onClose = props.onClose; var attributes = editor.getAttributes("tableCell"); - return (_jsx(Popup, __assign({ title: "Cell properties", onClose: onClose }, { children: _jsxs(Tabs, __assign({ activeIndex: 0 }, { children: [_jsxs(Tab, __assign({ title: _jsx(Icon, { title: "Cell background color", path: Icons.backgroundColor, size: 16 }) }, { children: [_jsx(Box, { mt: 2 }), _jsx(ColorPicker, { expanded: true, color: attributes.backgroundColor, onChange: function (color) { + return ((0, jsx_runtime_1.jsx)(popup_1.Popup, __assign({ title: "Cell properties", onClose: onClose }, { children: (0, jsx_runtime_1.jsxs)(tabs_1.Tabs, __assign({ activeIndex: 0 }, { children: [(0, jsx_runtime_1.jsxs)(tabs_1.Tab, __assign({ title: (0, jsx_runtime_1.jsx)(icon_1.Icon, { title: "Cell background color", path: icons_1.Icons.backgroundColor, size: 16 }) }, { children: [(0, jsx_runtime_1.jsx)(rebass_1.Box, { mt: 2 }), (0, jsx_runtime_1.jsx)(colorpicker_1.ColorPicker, { expanded: true, color: attributes.backgroundColor, onChange: function (color) { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.commands.setCellAttribute("backgroundColor", color); }, onClear: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.commands.setCellAttribute("backgroundColor", undefined); - } })] })), _jsxs(Tab, __assign({ title: _jsx(Icon, { title: "Cell text color", path: Icons.textColor, size: 16 }) }, { children: [_jsx(Box, { mt: 2 }), _jsx(ColorPicker, { expanded: true, color: attributes.color, onChange: function (color) { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.commands.setCellAttribute("color", color); }, onClear: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.commands.setCellAttribute("color", undefined); } })] })), _jsxs(Tab, __assign({ title: _jsx(Icon, { title: "Cell border color", path: Icons.cellBorderColor, size: 16 }) }, { children: [_jsx(Box, { mt: 2 }), _jsx(ColorPicker, { expanded: true, color: attributes.borderColor, onChange: function (color) { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.commands.setCellAttribute("borderColor", color); }, onClear: function () { + } })] })), (0, jsx_runtime_1.jsxs)(tabs_1.Tab, __assign({ title: (0, jsx_runtime_1.jsx)(icon_1.Icon, { title: "Cell text color", path: icons_1.Icons.textColor, size: 16 }) }, { children: [(0, jsx_runtime_1.jsx)(rebass_1.Box, { mt: 2 }), (0, jsx_runtime_1.jsx)(colorpicker_1.ColorPicker, { expanded: true, color: attributes.color, onChange: function (color) { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.commands.setCellAttribute("color", color); }, onClear: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.commands.setCellAttribute("color", undefined); } })] })), (0, jsx_runtime_1.jsxs)(tabs_1.Tab, __assign({ title: (0, jsx_runtime_1.jsx)(icon_1.Icon, { title: "Cell border color", path: icons_1.Icons.cellBorderColor, size: 16 }) }, { children: [(0, jsx_runtime_1.jsx)(rebass_1.Box, { mt: 2 }), (0, jsx_runtime_1.jsx)(colorpicker_1.ColorPicker, { expanded: true, color: attributes.borderColor, onChange: function (color) { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.commands.setCellAttribute("borderColor", color); }, onClear: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.commands.setCellAttribute("borderColor", undefined); } })] }))] })) }))); } +exports.CellProperties = CellProperties; diff --git a/packages/editor/dist/toolbar/popups/colorpicker.js b/packages/editor/dist/toolbar/popups/colorpicker.js index 452ea213b..3426bcf6f 100644 --- a/packages/editor/dist/toolbar/popups/colorpicker.js +++ b/packages/editor/dist/toolbar/popups/colorpicker.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -25,17 +26,22 @@ var __read = (this && this.__read) || function (o, n) { } return ar; }; -import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; -import { Box, Flex, Text } from "rebass"; -import { Input } from "@rebass/forms"; -import { Icon } from "../components/icon"; -import { Icons } from "../icons"; -import { useCallback, useEffect, useRef, useState } from "react"; -import tinycolor from "tinycolor2"; -import { HexColorPicker } from "react-colorful"; -import { Button } from "../../components/button"; -import { debounce } from "../../utils/debounce"; -export var DEFAULT_COLORS = [ +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.ColorPicker = exports.DEFAULT_COLORS = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var rebass_1 = require("rebass"); +var forms_1 = require("@rebass/forms"); +var icon_1 = require("../components/icon"); +var icons_1 = require("../icons"); +var react_1 = require("react"); +var tinycolor2_1 = __importDefault(require("tinycolor2")); +var react_colorful_1 = require("react-colorful"); +var button_1 = require("../../components/button"); +var debounce_1 = require("../../utils/debounce"); +exports.DEFAULT_COLORS = [ "#e91e63", "#9c27b0", "#673ab7", @@ -52,22 +58,22 @@ export var DEFAULT_COLORS = [ "#f44336", ]; var PALETTE_SIZE = [35, 35, 25]; -export function ColorPicker(props) { - var _a = props.colors, colors = _a === void 0 ? DEFAULT_COLORS : _a, color = props.color, onClear = props.onClear, onChange = props.onChange, title = props.title, onClose = props.onClose, expanded = props.expanded; - var ref = useRef(); - var _b = __read(useState(expanded || false), 2), isPickerOpen = _b[0], setIsPickerOpen = _b[1]; - var _c = __read(useState(tinycolor(color || colors[0]).toHexString()), 2), currentColor = _c[0], setCurrentColor = _c[1]; - var tColor = tinycolor(currentColor); - useEffect(function () { +function ColorPicker(props) { + var _a = props.colors, colors = _a === void 0 ? exports.DEFAULT_COLORS : _a, color = props.color, onClear = props.onClear, onChange = props.onChange, title = props.title, onClose = props.onClose, expanded = props.expanded; + var ref = (0, react_1.useRef)(); + var _b = __read((0, react_1.useState)(expanded || false), 2), isPickerOpen = _b[0], setIsPickerOpen = _b[1]; + var _c = __read((0, react_1.useState)((0, tinycolor2_1.default)(color || colors[0]).toHexString()), 2), currentColor = _c[0], setCurrentColor = _c[1]; + var tColor = (0, tinycolor2_1.default)(currentColor); + (0, react_1.useEffect)(function () { if (!ref.current) return; if (isPickerOpen) ref.current.focus({ preventScroll: true }); }, [isPickerOpen]); - var onColorChange = useCallback(debounce(function (color) { + var onColorChange = (0, react_1.useCallback)((0, debounce_1.debounce)(function (color) { onChange(color); }, 500), [onChange]); - return (_jsxs(Flex, __assign({ ref: ref, tabIndex: -1, sx: { + return ((0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ ref: ref, tabIndex: -1, sx: { bg: "background", flexDirection: "column", ".react-colorful": { @@ -79,17 +85,17 @@ export function ColorPicker(props) { }, width: ["calc(100vw - 20px)", 250], // width: ["auto", 250], - } }, { children: [onClose && (_jsxs(Box, __assign({ sx: { + } }, { children: [onClose && ((0, jsx_runtime_1.jsxs)(rebass_1.Box, __assign({ sx: { display: ["none", "flex"], justifyContent: "space-between", p: 2, pb: isPickerOpen ? 2 : 0, //pb: 0, alignItems: "center", - }, onClick: onClose }, { children: [_jsx(Text, __assign({ variant: "title" }, { children: title })), _jsx(Button, __assign({ variant: "icon", sx: { p: 0 } }, { children: _jsx(Icon, { path: Icons.close, size: "big" }) }))] }))), isPickerOpen ? (_jsxs(_Fragment, { children: [_jsx(HexColorPicker, { onChange: function (color) { + }, onClick: onClose }, { children: [(0, jsx_runtime_1.jsx)(rebass_1.Text, __assign({ variant: "title" }, { children: title })), (0, jsx_runtime_1.jsx)(button_1.Button, __assign({ variant: "icon", sx: { p: 0 } }, { children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { path: icons_1.Icons.close, size: "big" }) }))] }))), isPickerOpen ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_colorful_1.HexColorPicker, { onChange: function (color) { setCurrentColor(color); onColorChange(color); - }, onTouchEnd: function () { return onChange(currentColor); }, onMouseUp: function () { return onChange(currentColor); } }), _jsx(Input, { variant: "clean", placeholder: "#000000", spellCheck: false, sx: { + }, onTouchEnd: function () { return onChange(currentColor); }, onMouseUp: function () { return onChange(currentColor); } }), (0, jsx_runtime_1.jsx)(forms_1.Input, { variant: "clean", placeholder: "#000000", spellCheck: false, sx: { my: 2, p: 0, borderRadius: 0, @@ -101,16 +107,16 @@ export function ColorPicker(props) { var value = e.target.value; if (!value) return; - if (tinycolor(value, { format: "hex" }).isValid()) { + if ((0, tinycolor2_1.default)(value, { format: "hex" }).isValid()) { setCurrentColor(value); onChange(value); } - } })] })) : null, _jsxs(Flex, { children: [_jsxs(Flex, __assign({ className: "hide-scrollbar", sx: { + } })] })) : null, (0, jsx_runtime_1.jsxs)(rebass_1.Flex, { children: [(0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ className: "hide-scrollbar", sx: { flex: 1, p: 1, overflowX: ["auto", "hidden"], flexWrap: ["nowrap", "wrap"], - } }, { children: [_jsx(Button, __assign({ variant: "icon", sx: { + } }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, __assign({ variant: "icon", sx: { flexShrink: 0, width: PALETTE_SIZE, height: PALETTE_SIZE, @@ -118,7 +124,7 @@ export function ColorPicker(props) { boxShadow: "menu", p: 0, ml: [2, 2, 1], - }, onClick: onClear }, { children: _jsx(Icon, { path: Icons.colorClear, color: "text", size: 15 }) })), _jsx(Button, __assign({ variant: "secondary", sx: { + }, onClick: onClear }, { children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { path: icons_1.Icons.colorClear, color: "text", size: 15 }) })), (0, jsx_runtime_1.jsx)(button_1.Button, __assign({ variant: "secondary", sx: { flexShrink: 0, bg: currentColor, width: PALETTE_SIZE, @@ -127,7 +133,7 @@ export function ColorPicker(props) { // boxShadow: "menu", p: 0, ml: [2, 2, 1], - }, onClick: function () { return setIsPickerOpen(function (s) { return !s; }); } }, { children: _jsx(Icon, { path: Icons.palette, color: tColor.isDark() ? "static" : "icon", size: 18 }) })), colors.map(function (color) { return (_jsx(Button, { variant: "secondary", sx: { + }, onClick: function () { return setIsPickerOpen(function (s) { return !s; }); } }, { children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { path: icons_1.Icons.palette, color: tColor.isDark() ? "static" : "icon", size: 18 }) })), colors.map(function (color) { return ((0, jsx_runtime_1.jsx)(button_1.Button, { variant: "secondary", sx: { flex: "0 0 auto", bg: color, width: PALETTE_SIZE, @@ -139,5 +145,6 @@ export function ColorPicker(props) { }, onClick: function () { setCurrentColor(color); onChange(color); - } }, color)); })] })), onClose && (_jsx(Button, __assign({ variant: "icon", sx: { display: ["block", "none"], px: 2 }, onClick: onClose }, { children: _jsx(Icon, { path: Icons.close, size: "big" }) })))] })] }))); + } }, color)); })] })), onClose && ((0, jsx_runtime_1.jsx)(button_1.Button, __assign({ variant: "icon", sx: { display: ["block", "none"], px: 2 }, onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { path: icons_1.Icons.close, size: "big" }) })))] })] }))); } +exports.ColorPicker = ColorPicker; diff --git a/packages/editor/dist/toolbar/popups/embedpopup.js b/packages/editor/dist/toolbar/popups/embedpopup.js index e4756d8bf..99fbb171b 100644 --- a/packages/editor/dist/toolbar/popups/embedpopup.js +++ b/packages/editor/dist/toolbar/popups/embedpopup.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -25,22 +26,24 @@ var __read = (this && this.__read) || function (o, n) { } return ar; }; -import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime"; -import { Flex, Text } from "rebass"; -import { useCallback, useEffect, useState } from "react"; -import { Popup } from "../components/popup"; -import { Input, Textarea } from "@rebass/forms"; -import { convertUrlToEmbedUrl } from "@social-embed/lib"; -import { InlineInput } from "../../components/inline-input"; -import { Tabs, Tab } from "../../components/tabs"; -export function EmbedPopup(props) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.EmbedPopup = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var rebass_1 = require("rebass"); +var react_1 = require("react"); +var popup_1 = require("../components/popup"); +var forms_1 = require("@rebass/forms"); +var lib_1 = require("@social-embed/lib"); +var inlineinput_1 = require("../../components/inlineinput"); +var tabs_1 = require("../../components/tabs"); +function EmbedPopup(props) { var onClose = props.onClose, onSizeChanged = props.onSizeChanged, onSourceChanged = props.onSourceChanged, title = props.title, embed = props.embed; - var _a = __read(useState((embed === null || embed === void 0 ? void 0 : embed.width) || 300), 2), width = _a[0], setWidth = _a[1]; - var _b = __read(useState((embed === null || embed === void 0 ? void 0 : embed.height) || 150), 2), height = _b[0], setHeight = _b[1]; - var _c = __read(useState((embed === null || embed === void 0 ? void 0 : embed.src) || ""), 2), src = _c[0], setSrc = _c[1]; - var _d = __read(useState("url"), 2), embedSource = _d[0], setEmbedSource = _d[1]; - var _e = __read(useState(null), 2), error = _e[0], setError = _e[1]; - var onSizeChange = useCallback(function (newWidth, newHeight) { + var _a = __read((0, react_1.useState)((embed === null || embed === void 0 ? void 0 : embed.width) || 300), 2), width = _a[0], setWidth = _a[1]; + var _b = __read((0, react_1.useState)((embed === null || embed === void 0 ? void 0 : embed.height) || 150), 2), height = _b[0], setHeight = _b[1]; + var _c = __read((0, react_1.useState)((embed === null || embed === void 0 ? void 0 : embed.src) || ""), 2), src = _c[0], setSrc = _c[1]; + var _d = __read((0, react_1.useState)("url"), 2), embedSource = _d[0], setEmbedSource = _d[1]; + var _e = __read((0, react_1.useState)(null), 2), error = _e[0], setError = _e[1]; + var onSizeChange = (0, react_1.useCallback)(function (newWidth, newHeight) { var size = newWidth ? { width: newWidth, @@ -60,10 +63,10 @@ export function EmbedPopup(props) { if (onSizeChanged) onSizeChanged(size); }, [width, height]); - useEffect(function () { + (0, react_1.useEffect)(function () { onSourceChanged && onSourceChanged(src); }, [onSourceChanged, src]); - return (_jsx(Popup, __assign({ title: title, onClose: function () { return onClose(); }, action: { + return ((0, jsx_runtime_1.jsx)(popup_1.Popup, __assign({ title: title, onClose: function () { return onClose(); }, action: { title: title, onClick: function () { setError(null); @@ -85,7 +88,7 @@ export function EmbedPopup(props) { if (heightValue && !isNaN(parseInt(heightValue))) _height = parseInt(heightValue); } - var convertedUrl = convertUrlToEmbedUrl(_src); + var convertedUrl = (0, lib_1.convertUrlToEmbedUrl)(_src); if (!!convertedUrl) _src = convertedUrl; onClose({ @@ -94,18 +97,19 @@ export function EmbedPopup(props) { src: _src, }); }, - } }, { children: _jsxs(Flex, __assign({ sx: { flexDirection: "column", width: ["auto", 300] } }, { children: [error && (_jsxs(Text, __assign({ variant: "error", sx: { + } }, { children: (0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ sx: { flexDirection: "column", width: ["auto", 300] } }, { children: [error && ((0, jsx_runtime_1.jsxs)(rebass_1.Text, __assign({ variant: "error", sx: { bg: "errorBg", color: "error", p: 1, borderRadius: "default", - } }, { children: ["Error: ", error] }))), _jsxs(Tabs, __assign({ activeIndex: 0, containerProps: { sx: { mx: 1, flexDirection: "column" } }, onTabChanged: function (index) { return setEmbedSource(index === 0 ? "url" : "code"); } }, { children: [_jsxs(Tab, __assign({ title: "From URL" }, { children: [_jsx(Input, { placeholder: "Enter embed source URL", value: src, autoFocus: true, onChange: function (e) { return setSrc(e.target.value); }, autoCapitalize: "none", sx: { fontSize: "body" } }), _jsxs(Flex, __assign({ sx: { alignItems: "center", mt: 1 } }, { children: [_jsx(InlineInput, { containerProps: { sx: { mr: 1 } }, label: "width", type: "number", placeholder: "Width", value: width, sx: { + } }, { children: ["Error: ", error] }))), (0, jsx_runtime_1.jsxs)(tabs_1.Tabs, __assign({ activeIndex: 0, containerProps: { sx: { mx: 1, flexDirection: "column" } }, onTabChanged: function (index) { return setEmbedSource(index === 0 ? "url" : "code"); } }, { children: [(0, jsx_runtime_1.jsxs)(tabs_1.Tab, __assign({ title: "From URL" }, { children: [(0, jsx_runtime_1.jsx)(forms_1.Input, { placeholder: "Enter embed source URL", value: src, autoFocus: true, onChange: function (e) { return setSrc(e.target.value); }, autoCapitalize: "none", sx: { fontSize: "body" } }), (0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ sx: { alignItems: "center", mt: 1 } }, { children: [(0, jsx_runtime_1.jsx)(inlineinput_1.InlineInput, { containerProps: { sx: { mr: 1 } }, label: "width", type: "number", placeholder: "Width", value: width, sx: { mr: 1, fontSize: "body", - }, onChange: function (e) { return onSizeChange(e.target.valueAsNumber); } }), _jsx(InlineInput, { label: "height", type: "number", placeholder: "Height", value: height, sx: { fontSize: "body" }, onChange: function (e) { + }, onChange: function (e) { return onSizeChange(e.target.valueAsNumber); } }), (0, jsx_runtime_1.jsx)(inlineinput_1.InlineInput, { label: "height", type: "number", placeholder: "Height", value: height, sx: { fontSize: "body" }, onChange: function (e) { return onSizeChange(undefined, e.target.valueAsNumber); - } })] }))] })), _jsx(Tab, __assign({ title: "From code" }, { children: _jsx(Textarea, { autoFocus: true, variant: "forms.input", sx: { fontSize: "subBody", fontFamily: "monospace" }, minHeight: [200, 100], onChange: function (e) { return setSrc(e.target.value); }, placeholder: "Paste embed code here. Only iframes are supported." }) }))] }))] })) }))); + } })] }))] })), (0, jsx_runtime_1.jsx)(tabs_1.Tab, __assign({ title: "From code" }, { children: (0, jsx_runtime_1.jsx)(forms_1.Textarea, { autoFocus: true, variant: "forms.input", sx: { fontSize: "subBody", fontFamily: "monospace" }, minHeight: [200, 100], onChange: function (e) { return setSrc(e.target.value); }, placeholder: "Paste embed code here. Only iframes are supported." }) }))] }))] })) }))); } +exports.EmbedPopup = EmbedPopup; function getAttribute(document, id) { var element = document.querySelector("[".concat(id, "]")); if (!element) diff --git a/packages/editor/dist/toolbar/popups/imageproperties.js b/packages/editor/dist/toolbar/popups/imageproperties.js index dd0f37411..017f3f5b2 100644 --- a/packages/editor/dist/toolbar/popups/imageproperties.js +++ b/packages/editor/dist/toolbar/popups/imageproperties.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -9,15 +10,17 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; -import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; -import { Flex, Text } from "rebass"; -import { useCallback } from "react"; -import { Popup } from "../components/popup"; -import { Checkbox } from "@rebass/forms"; -import { InlineInput } from "../../components/inline-input"; -export function ImageProperties(props) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.ImageProperties = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var rebass_1 = require("rebass"); +var react_1 = require("react"); +var popup_1 = require("../components/popup"); +var forms_1 = require("@rebass/forms"); +var inlineinput_1 = require("../../components/inlineinput"); +function ImageProperties(props) { var height = props.height, width = props.width, float = props.float, editor = props.editor, onClose = props.onClose; - var onSizeChange = useCallback(function (newWidth, newHeight) { + var onSizeChange = (0, react_1.useCallback)(function (newWidth, newHeight) { var size = newWidth ? { width: newWidth, @@ -34,12 +37,13 @@ export function ImageProperties(props) { }; editor.chain().setImageSize(size).run(); }, [width, height]); - return (_jsx(Popup, __assign({ title: "Image properties", onClose: onClose }, { children: _jsxs(Flex, __assign({ sx: { width: ["auto", 300], flexDirection: "column", p: 1 } }, { children: [_jsxs(Flex, __assign({ sx: { justifyContent: "space-between", alignItems: "center" } }, { children: [_jsx(Text, __assign({ variant: "body" }, { children: "Floating?" })), _jsx(Checkbox, { checked: float, onClick: function () { + return ((0, jsx_runtime_1.jsx)(popup_1.Popup, __assign({ title: "Image properties", onClose: onClose }, { children: (0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ sx: { width: ["auto", 300], flexDirection: "column", p: 1 } }, { children: [(0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ sx: { justifyContent: "space-between", alignItems: "center" } }, { children: [(0, jsx_runtime_1.jsx)(rebass_1.Text, __assign({ variant: "body" }, { children: "Floating?" })), (0, jsx_runtime_1.jsx)(forms_1.Checkbox, { checked: float, onClick: function () { return editor .chain() .setImageAlignment({ float: !float, align: "left" }) .run(); - } })] })), _jsxs(Flex, __assign({ sx: { alignItems: "center", mt: 2 } }, { children: [_jsx(InlineInput, { label: "width", type: "number", value: width, containerProps: { + } })] })), (0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ sx: { alignItems: "center", mt: 2 } }, { children: [(0, jsx_runtime_1.jsx)(inlineinput_1.InlineInput, { label: "width", type: "number", value: width, containerProps: { sx: { mr: 1 }, - }, onChange: function (e) { return onSizeChange(e.target.valueAsNumber); } }), _jsx(InlineInput, { label: "height", type: "number", value: height, onChange: function (e) { return onSizeChange(undefined, e.target.valueAsNumber); } })] }))] })) }))); + }, onChange: function (e) { return onSizeChange(e.target.valueAsNumber); } }), (0, jsx_runtime_1.jsx)(inlineinput_1.InlineInput, { label: "height", type: "number", value: height, onChange: function (e) { return onSizeChange(undefined, e.target.valueAsNumber); } })] }))] })) }))); } +exports.ImageProperties = ImageProperties; diff --git a/packages/editor/dist/toolbar/popups/imageupload.js b/packages/editor/dist/toolbar/popups/imageupload.js index a0839695e..fa96b7daa 100644 --- a/packages/editor/dist/toolbar/popups/imageupload.js +++ b/packages/editor/dist/toolbar/popups/imageupload.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -61,18 +62,20 @@ var __read = (this && this.__read) || function (o, n) { } return ar; }; -import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; -import { Input } from "@rebass/forms"; -import { useState } from "react"; -import { Flex, Text } from "rebass"; -import { Popup } from "../components/popup"; -export function ImageUploadPopup(props) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.ImageUploadPopup = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var forms_1 = require("@rebass/forms"); +var react_1 = require("react"); +var rebass_1 = require("rebass"); +var popup_1 = require("../components/popup"); +function ImageUploadPopup(props) { var _this = this; var onInsert = props.onInsert, onClose = props.onClose; - var _a = __read(useState(false), 2), isDownloading = _a[0], setIsDownloading = _a[1]; - var _b = __read(useState(), 2), error = _b[0], setError = _b[1]; - var _c = __read(useState(""), 2), url = _c[0], setUrl = _c[1]; - return (_jsx(Popup, __assign({ title: "Insert image from URL", onClose: onClose, action: { + var _a = __read((0, react_1.useState)(false), 2), isDownloading = _a[0], setIsDownloading = _a[1]; + var _b = __read((0, react_1.useState)(), 2), error = _b[0], setError = _b[1]; + var _c = __read((0, react_1.useState)(""), 2), url = _c[0], setUrl = _c[1]; + return ((0, jsx_runtime_1.jsx)(popup_1.Popup, __assign({ title: "Insert image from URL", onClose: onClose, action: { loading: isDownloading, title: "Insert image", disabled: !url, @@ -118,15 +121,15 @@ export function ImageUploadPopup(props) { } }); }); }, - } }, { children: _jsxs(Flex, __assign({ sx: { px: 1, flexDirection: "column", width: ["auto", 350] } }, { children: [_jsx(Input, { type: "url", autoFocus: true, placeholder: "Paste Image URL here", value: url, onChange: function (e) { + } }, { children: (0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ sx: { px: 1, flexDirection: "column", width: ["auto", 350] } }, { children: [(0, jsx_runtime_1.jsx)(forms_1.Input, { type: "url", autoFocus: true, placeholder: "Paste Image URL here", value: url, onChange: function (e) { setUrl(e.target.value); setError(undefined); - } }), error ? (_jsxs(Text, __assign({ variant: "error", sx: { + } }), error ? ((0, jsx_runtime_1.jsxs)(rebass_1.Text, __assign({ variant: "error", sx: { bg: "errorBg", mt: 1, p: 1, borderRadius: "default", - } }, { children: ["Failed to download image: ", error.toLowerCase(), "."] }))) : (_jsx(Text, __assign({ variant: "subBody", sx: { + } }, { children: ["Failed to download image: ", error.toLowerCase(), "."] }))) : ((0, jsx_runtime_1.jsx)(rebass_1.Text, __assign({ variant: "subBody", sx: { bg: "shade", color: "primary", mt: 1, @@ -134,6 +137,7 @@ export function ImageUploadPopup(props) { borderRadius: "default", } }, { children: "To protect your privacy, we will download the image & add it to your attachments." })))] })) }))); } +exports.ImageUploadPopup = ImageUploadPopup; function toDataURL(blob) { return new Promise(function (resolve, reject) { var reader = new FileReader(); diff --git a/packages/editor/dist/toolbar/popups/linkpopup.js b/packages/editor/dist/toolbar/popups/linkpopup.js index dd3b39fd6..96f3297e7 100644 --- a/packages/editor/dist/toolbar/popups/linkpopup.js +++ b/packages/editor/dist/toolbar/popups/linkpopup.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -25,17 +26,20 @@ var __read = (this && this.__read) || function (o, n) { } return ar; }; -import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; -import { Input } from "@rebass/forms"; -import { useState } from "react"; -import { Flex } from "rebass"; -import { Popup } from "../components/popup"; -export function LinkPopup(props) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.LinkPopup = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var forms_1 = require("@rebass/forms"); +var react_1 = require("react"); +var rebass_1 = require("rebass"); +var popup_1 = require("../components/popup"); +function LinkPopup(props) { var _text = props.text, _href = props.href, _a = props.isEditing, isEditing = _a === void 0 ? false : _a, onDone = props.onDone, onClose = props.onClose; - var _b = __read(useState(_href || ""), 2), href = _b[0], setHref = _b[1]; - var _c = __read(useState(_text || ""), 2), text = _c[0], setText = _c[1]; - return (_jsx(Popup, __assign({ title: isEditing ? "Edit link" : "Insert link", onClose: onClose, action: { + var _b = __read((0, react_1.useState)(_href || ""), 2), href = _b[0], setHref = _b[1]; + var _c = __read((0, react_1.useState)(_text || ""), 2), text = _c[0], setText = _c[1]; + return ((0, jsx_runtime_1.jsx)(popup_1.Popup, __assign({ title: isEditing ? "Edit link" : "Insert link", onClose: onClose, action: { title: isEditing ? "Save edits" : "Insert link", onClick: function () { return onDone({ text: text, href: href }); }, - } }, { children: _jsxs(Flex, __assign({ sx: { p: 1, flexDirection: "column", width: ["auto", 250] } }, { 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); } })] })) }))); + } }, { children: (0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ sx: { p: 1, flexDirection: "column", width: ["auto", 250] } }, { children: [(0, jsx_runtime_1.jsx)(forms_1.Input, { type: "text", placeholder: "Link text", value: text, onChange: function (e) { return setText(e.target.value); } }), (0, jsx_runtime_1.jsx)(forms_1.Input, { type: "url", sx: { mt: 1 }, autoFocus: true, placeholder: "https://example.com/", value: href, onChange: function (e) { return setHref(e.target.value); } })] })) }))); } +exports.LinkPopup = LinkPopup; diff --git a/packages/editor/dist/toolbar/popups/searchreplace.js b/packages/editor/dist/toolbar/popups/searchreplace.js index 48ed63c71..846f396ad 100644 --- a/packages/editor/dist/toolbar/popups/searchreplace.js +++ b/packages/editor/dist/toolbar/popups/searchreplace.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -25,35 +26,37 @@ var __read = (this && this.__read) || function (o, n) { } return ar; }; -import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; -import { Input } from "@rebass/forms"; -import { useCallback, useEffect, useRef, useState } from "react"; -import { Flex, Text } from "rebass"; -import { ToolButton } from "../components/tool-button"; -export function SearchReplacePopup(props) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.SearchReplacePopup = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var forms_1 = require("@rebass/forms"); +var react_1 = require("react"); +var rebass_1 = require("rebass"); +var toolbutton_1 = require("../components/toolbutton"); +function SearchReplacePopup(props) { var editor = props.editor; var _a = editor.storage .searchreplace, selectedText = _a.selectedText, results = _a.results; - var _b = __read(useState(false), 2), isReplacing = _b[0], setIsReplacing = _b[1]; - var _c = __read(useState(false), 2), isExpanded = _c[0], setIsExpanded = _c[1]; - var _d = __read(useState(false), 2), matchCase = _d[0], setMatchCase = _d[1]; - var _e = __read(useState(false), 2), matchWholeWord = _e[0], setMatchWholeWord = _e[1]; - var _f = __read(useState(false), 2), enableRegex = _f[0], setEnableRegex = _f[1]; - var replaceText = useRef(""); - var searchInputRef = useRef(); - var search = useCallback(function (term) { + var _b = __read((0, react_1.useState)(false), 2), isReplacing = _b[0], setIsReplacing = _b[1]; + var _c = __read((0, react_1.useState)(false), 2), isExpanded = _c[0], setIsExpanded = _c[1]; + var _d = __read((0, react_1.useState)(false), 2), matchCase = _d[0], setMatchCase = _d[1]; + var _e = __read((0, react_1.useState)(false), 2), matchWholeWord = _e[0], setMatchWholeWord = _e[1]; + var _f = __read((0, react_1.useState)(false), 2), enableRegex = _f[0], setEnableRegex = _f[1]; + var replaceText = (0, react_1.useRef)(""); + var searchInputRef = (0, react_1.useRef)(); + var search = (0, react_1.useCallback)(function (term) { editor.commands.search(term, { matchCase: matchCase, enableRegex: enableRegex, matchWholeWord: matchWholeWord, }); }, [matchCase, enableRegex, matchWholeWord]); - useEffect(function () { + (0, react_1.useEffect)(function () { if (!searchInputRef.current) return; search(searchInputRef.current.value); }, [search, matchCase, matchWholeWord, enableRegex]); - useEffect(function () { + (0, react_1.useEffect)(function () { if (selectedText) { if (searchInputRef.current) { var input_1 = searchInputRef.current; @@ -65,13 +68,13 @@ export function SearchReplacePopup(props) { search(selectedText); } }, [selectedText, search]); - return (_jsx(Flex, __assign({ sx: { + return ((0, jsx_runtime_1.jsx)(rebass_1.Flex, __assign({ sx: { p: 1, bg: "background", flexDirection: "column", boxShadow: ["none", "menu"], borderRadius: [0, "default"], - } }, { children: _jsxs(Flex, { children: [_jsxs(Flex, __assign({ sx: { flexDirection: "column", flex: 1, width: ["auto", 300], mr: 1 } }, { children: [_jsxs(Flex, __assign({ sx: { + } }, { children: (0, jsx_runtime_1.jsxs)(rebass_1.Flex, { children: [(0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ sx: { flexDirection: "column", flex: 1, width: ["auto", 300], mr: 1 } }, { children: [(0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ sx: { flex: 1, position: "relative", alignItems: "center", @@ -86,24 +89,25 @@ export function SearchReplacePopup(props) { ":hover": { outlineColor: "primary", }, - } }, { children: [_jsx(Input, { variant: "clean", defaultValue: selectedText, ref: searchInputRef, autoFocus: true, placeholder: "Find", sx: { p: 0 }, onChange: function (e) { + } }, { children: [(0, jsx_runtime_1.jsx)(forms_1.Input, { variant: "clean", defaultValue: selectedText, ref: searchInputRef, autoFocus: true, placeholder: "Find", sx: { p: 0 }, onChange: function (e) { search(e.target.value); - } }), _jsxs(Flex, __assign({ sx: { + } }), (0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ sx: { flexShrink: 0, mr: 0, alignItems: "center", - } }, { children: [_jsx(ToolButton, { sx: { + } }, { children: [(0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, { sx: { mr: 0, - }, toggled: isExpanded, title: "Expand", id: "expand", icon: isExpanded ? "chevronRight" : "chevronLeft", onClick: function () { return setIsExpanded(function (s) { return !s; }); }, iconSize: "medium" }), isExpanded && (_jsxs(_Fragment, { children: [_jsx(ToolButton, { sx: { + }, toggled: isExpanded, title: "Expand", id: "expand", icon: isExpanded ? "chevronRight" : "chevronLeft", onClick: function () { return setIsExpanded(function (s) { return !s; }); }, iconSize: "medium" }), isExpanded && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, { sx: { mr: 0, - }, toggled: matchCase, title: "Match case", id: "matchCase", icon: "caseSensitive", onClick: function () { return setMatchCase(function (s) { return !s; }); }, iconSize: "medium" }), _jsx(ToolButton, { sx: { + }, toggled: matchCase, title: "Match case", id: "matchCase", icon: "caseSensitive", onClick: function () { return setMatchCase(function (s) { return !s; }); }, iconSize: "medium" }), (0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, { sx: { mr: 0, - }, toggled: matchWholeWord, title: "Match whole word", id: "matchWholeWord", icon: "wholeWord", onClick: function () { return setMatchWholeWord(function (s) { return !s; }); }, iconSize: "medium" }), _jsx(ToolButton, { sx: { + }, toggled: matchWholeWord, title: "Match whole word", id: "matchWholeWord", icon: "wholeWord", onClick: function () { return setMatchWholeWord(function (s) { return !s; }); }, iconSize: "medium" }), (0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, { sx: { mr: 0, - }, toggled: enableRegex, title: "Enable regex", id: "enableRegex", icon: "regex", onClick: function () { return setEnableRegex(function (s) { return !s; }); }, iconSize: "medium" })] })), _jsxs(Text, __assign({ variant: "subBody", sx: { + }, toggled: enableRegex, title: "Enable regex", id: "enableRegex", icon: "regex", onClick: function () { return setEnableRegex(function (s) { return !s; }); }, iconSize: "medium" })] })), (0, jsx_runtime_1.jsxs)(rebass_1.Text, __assign({ variant: "subBody", sx: { flexShrink: 0, borderLeft: "1px solid var(--border)", color: "fontTertiary", px: 1, - } }, { children: [results ? "".concat(results.length) : "0", isExpanded ? "" : " results"] }))] }))] })), isReplacing && (_jsx(Input, { sx: { mt: 1, p: "7px" }, placeholder: "Replace", onChange: function (e) { return (replaceText.current = e.target.value); } }))] })), _jsxs(Flex, __assign({ sx: { flexDirection: "column" } }, { children: [_jsxs(Flex, __assign({ sx: { alignItems: "center", height: "33.2px" } }, { children: [_jsx(ToolButton, { toggled: isReplacing, title: "Toggle replace", id: "toggleReplace", icon: "replace", onClick: function () { return setIsReplacing(function (s) { return !s; }); }, sx: { mr: 0 }, iconSize: "big" }), _jsx(ToolButton, { toggled: false, title: "Previous match", id: "previousMatch", icon: "previousMatch", onClick: function () { return editor.commands.moveToPreviousResult(); }, sx: { mr: 0 }, iconSize: "big" }), _jsx(ToolButton, { toggled: false, title: "Next match", id: "nextMatch", icon: "nextMatch", onClick: function () { return editor.commands.moveToNextResult(); }, sx: { mr: 0 }, iconSize: "big" }), _jsx(ToolButton, { toggled: false, title: "Close", id: "close", icon: "close", onClick: function () { return editor.chain().focus().endSearch().run(); }, sx: { mr: 0 }, iconSize: "big" })] })), isReplacing && (_jsxs(Flex, __assign({ sx: { alignItems: "center", height: "33.2px", mt: 1 } }, { children: [_jsx(ToolButton, { toggled: false, title: "Replace", id: "replace", icon: "replaceOne", onClick: function () { return editor.commands.replace(replaceText.current); }, sx: { mr: 0 }, iconSize: 18 }), _jsx(ToolButton, { toggled: false, title: "Replace all", id: "replaceAll", icon: "replaceAll", onClick: function () { return editor.commands.replaceAll(replaceText.current); }, sx: { mr: 0 }, iconSize: 18 })] })))] }))] }) }))); + } }, { children: [results ? "".concat(results.length) : "0", isExpanded ? "" : " results"] }))] }))] })), isReplacing && ((0, jsx_runtime_1.jsx)(forms_1.Input, { sx: { mt: 1, p: "7px" }, placeholder: "Replace", onChange: function (e) { return (replaceText.current = e.target.value); } }))] })), (0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ sx: { flexDirection: "column" } }, { children: [(0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ sx: { alignItems: "center", height: "33.2px" } }, { children: [(0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, { toggled: isReplacing, title: "Toggle replace", id: "toggleReplace", icon: "replace", onClick: function () { return setIsReplacing(function (s) { return !s; }); }, sx: { mr: 0 }, iconSize: "big" }), (0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, { toggled: false, title: "Previous match", id: "previousMatch", icon: "previousMatch", onClick: function () { return editor.commands.moveToPreviousResult(); }, sx: { mr: 0 }, iconSize: "big" }), (0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, { toggled: false, title: "Next match", id: "nextMatch", icon: "nextMatch", onClick: function () { return editor.commands.moveToNextResult(); }, sx: { mr: 0 }, iconSize: "big" }), (0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, { toggled: false, title: "Close", id: "close", icon: "close", onClick: function () { return editor.chain().focus().endSearch().run(); }, sx: { mr: 0 }, iconSize: "big" })] })), isReplacing && ((0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ sx: { alignItems: "center", height: "33.2px", mt: 1 } }, { children: [(0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, { toggled: false, title: "Replace", id: "replace", icon: "replaceOne", onClick: function () { return editor.commands.replace(replaceText.current); }, sx: { mr: 0 }, iconSize: 18 }), (0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, { toggled: false, title: "Replace all", id: "replaceAll", icon: "replaceAll", onClick: function () { return editor.commands.replaceAll(replaceText.current); }, sx: { mr: 0 }, iconSize: 18 })] })))] }))] }) }))); } +exports.SearchReplacePopup = SearchReplacePopup; diff --git a/packages/editor/dist/toolbar/popups/tablepopup.js b/packages/editor/dist/toolbar/popups/tablepopup.js index 9d83d2f31..66ba1de45 100644 --- a/packages/editor/dist/toolbar/popups/tablepopup.js +++ b/packages/editor/dist/toolbar/popups/tablepopup.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -25,30 +26,32 @@ var __read = (this && this.__read) || function (o, n) { } return ar; }; -import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; -import { Box, Flex, Text } from "rebass"; -import { useEffect, useState } from "react"; -import { Popup } from "../components/popup"; -import { useIsMobile } from "../stores/toolbar-store"; -import { InlineInput } from "../../components/inline-input"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.TablePopup = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var rebass_1 = require("rebass"); +var react_1 = require("react"); +var popup_1 = require("../components/popup"); +var toolbarstore_1 = require("../stores/toolbarstore"); +var inlineinput_1 = require("../../components/inlineinput"); var MAX_COLUMNS = 20; var MAX_ROWS = 20; var MIN_COLUMNS = 10; var MIN_ROWS = 6; -export function TablePopup(props) { - var isMobile = useIsMobile(); +function TablePopup(props) { + var isMobile = (0, toolbarstore_1.useIsMobile)(); var autoExpand = !isMobile; var cellSize = isMobile ? 30 : 15; var onInsertTable = props.onInsertTable; - var _a = __read(useState({ + var _a = __read((0, react_1.useState)({ column: 0, row: 0, }), 2), cellLocation = _a[0], setCellLocation = _a[1]; - var _b = __read(useState({ + var _b = __read((0, react_1.useState)({ columns: MIN_COLUMNS, rows: MIN_ROWS, }), 2), tableSize = _b[0], setTableSize = _b[1]; - useEffect(function () { + (0, react_1.useEffect)(function () { if (!autoExpand) return; setTableSize(function (old) { @@ -67,7 +70,7 @@ export function TablePopup(props) { }; }); }, [cellLocation, autoExpand]); - return (_jsx(Popup, __assign({ action: { + return ((0, jsx_runtime_1.jsx)(popup_1.Popup, __assign({ action: { title: !cellLocation.column || !cellLocation.row ? "Please set a table size" : "Insert a ".concat(cellLocation.column, " x ").concat(cellLocation.row, " table"), @@ -78,7 +81,7 @@ export function TablePopup(props) { rows: cellLocation.row, }); }, - } }, { children: _jsxs(Flex, __assign({ sx: { px: 1, pt: 1, flexDirection: "column", alignItems: "center" } }, { children: [_jsx(Box, __assign({ sx: { + } }, { children: (0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ sx: { px: 1, pt: 1, flexDirection: "column", alignItems: "center" } }, { children: [(0, jsx_runtime_1.jsx)(rebass_1.Box, __assign({ sx: { display: "grid", gridTemplateColumns: "repeat(".concat(tableSize.columns, ", minmax(").concat(cellSize, "px, 1fr))"), gap: "small", @@ -95,7 +98,7 @@ export function TablePopup(props) { setCellLocation(getCellLocation(parseInt(index), tableSize)); } }, { children: Array(tableSize.columns * tableSize.rows) .fill(0) - .map(function (_, index) { return (_jsx(Box, { "data-index": index, height: cellSize || 15, sx: { + .map(function (_, index) { return ((0, jsx_runtime_1.jsx)(rebass_1.Box, { "data-index": index, height: cellSize || 15, sx: { border: "1px solid var(--disabled)", borderRadius: "small", bg: isCellHighlighted(index, cellLocation, tableSize) @@ -110,17 +113,18 @@ export function TablePopup(props) { columns: cellLocation.column, rows: cellLocation.row, }); - } }, index)); }) })), _jsxs(Flex, __assign({ sx: { + } }, index)); }) })), (0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ sx: { display: ["flex", "none", "none"], mt: 1, alignItems: "center", justifyContent: "center", - } }, { children: [_jsx(InlineInput, { containerProps: { sx: { mr: 1 } }, label: "columns", placeholder: "".concat(cellLocation.column, " columns"), type: "number", value: cellLocation.column, onChange: function (e) { + } }, { children: [(0, jsx_runtime_1.jsx)(inlineinput_1.InlineInput, { containerProps: { sx: { mr: 1 } }, label: "columns", placeholder: "".concat(cellLocation.column, " columns"), type: "number", value: cellLocation.column, onChange: function (e) { setCellLocation(function (l) { return (__assign(__assign({}, l), { column: e.target.valueAsNumber || 0 })); }); - } }), _jsx(InlineInput, { label: "rows", placeholder: "".concat(cellLocation.row, " rows"), type: "number", value: cellLocation.row, onChange: function (e) { + } }), (0, jsx_runtime_1.jsx)(inlineinput_1.InlineInput, { label: "rows", placeholder: "".concat(cellLocation.row, " rows"), type: "number", value: cellLocation.row, onChange: function (e) { setCellLocation(function (l) { return (__assign(__assign({}, l), { row: e.target.valueAsNumber || 0 })); }); - } })] })), _jsxs(Text, __assign({ variant: "body", sx: { mt: 1, display: ["none", "block", "block"] } }, { children: [cellLocation.column, " x ", cellLocation.row] }))] })) }))); + } })] })), (0, jsx_runtime_1.jsxs)(rebass_1.Text, __assign({ variant: "body", sx: { mt: 1, display: ["none", "block", "block"] } }, { children: [cellLocation.column, " x ", cellLocation.row] }))] })) }))); } +exports.TablePopup = TablePopup; function getCellLocation(index, tableSize) { var cellIndex = index + 1; var column = cellIndex % tableSize.columns; diff --git a/packages/editor/dist/toolbar/stores/toolbarstore.js b/packages/editor/dist/toolbar/stores/toolbarstore.js index 2ada77d41..cc0656c9c 100644 --- a/packages/editor/dist/toolbar/stores/toolbarstore.js +++ b/packages/editor/dist/toolbar/stores/toolbarstore.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -9,8 +10,13 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; -import create from "zustand"; -export var useToolbarStore = create(function (set, get) { return ({ +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.useIsMobile = exports.useToolbarLocation = exports.useToolbarStore = void 0; +var zustand_1 = __importDefault(require("zustand")); +exports.useToolbarStore = (0, zustand_1.default)(function (set, get) { return ({ isMobile: false, openedPopups: {}, setIsMobile: function (isMobile) { @@ -48,9 +54,11 @@ export var useToolbarStore = create(function (set, get) { return ({ }); }, }); }); -export function useToolbarLocation() { - return useToolbarStore(function (store) { return store.toolbarLocation; }); +function useToolbarLocation() { + return (0, exports.useToolbarStore)(function (store) { return store.toolbarLocation; }); } -export function useIsMobile() { - return useToolbarStore(function (store) { return store.isMobile; }); +exports.useToolbarLocation = useToolbarLocation; +function useIsMobile() { + return (0, exports.useToolbarStore)(function (store) { return store.isMobile; }); } +exports.useIsMobile = useIsMobile; diff --git a/packages/editor/dist/toolbar/toolbar.js b/packages/editor/dist/toolbar/toolbar.js index 777d09064..9674507b9 100644 --- a/packages/editor/dist/toolbar/toolbar.js +++ b/packages/editor/dist/toolbar/toolbar.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -9,32 +10,35 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; -import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; -import { Flex } from "rebass"; -import { ThemeProvider } from "emotion-theming"; -import { EditorFloatingMenus } from "./floating-menus"; -import { DEFAULT_TOOLS } from "./tool-definitions"; -import { useEffect } from "react"; -import { useToolbarStore, } from "./stores/toolbar-store"; -import { ToolbarGroup } from "./components/toolbar-group"; -import { EditorContext, PopupRenderer, } from "../components/popup-presenter/popuprenderer"; -export function Toolbar(props) { - var editor = props.editor, theme = props.theme, location = props.location, isMobile = props.isMobile, _a = props.tools, tools = _a === void 0 ? DEFAULT_TOOLS : _a; - var setIsMobile = useToolbarStore(function (store) { return store.setIsMobile; }); - var setToolbarLocation = useToolbarStore(function (store) { return store.setToolbarLocation; }); - useEffect(function () { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.Toolbar = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var rebass_1 = require("rebass"); +var emotion_theming_1 = require("emotion-theming"); +var floatingmenus_1 = require("./floatingmenus"); +var tooldefinitions_1 = require("./tooldefinitions"); +var react_1 = require("react"); +var toolbarstore_1 = require("./stores/toolbarstore"); +var toolbargroup_1 = require("./components/toolbargroup"); +var popuprenderer_1 = require("../components/popup-presenter/popuprenderer"); +function Toolbar(props) { + var editor = props.editor, theme = props.theme, location = props.location, isMobile = props.isMobile, _a = props.tools, tools = _a === void 0 ? tooldefinitions_1.DEFAULT_TOOLS : _a; + var setIsMobile = (0, toolbarstore_1.useToolbarStore)(function (store) { return store.setIsMobile; }); + var setToolbarLocation = (0, toolbarstore_1.useToolbarStore)(function (store) { return store.setToolbarLocation; }); + (0, react_1.useEffect)(function () { setIsMobile(isMobile || false); setToolbarLocation(location); }, [isMobile, location]); if (!editor) return null; - return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(EditorContext.Provider, __assign({ value: editor }, { children: _jsxs(PopupRenderer, __assign({ editor: editor }, { children: [_jsx(Flex, __assign({ className: "editor-toolbar", sx: { flexWrap: ["nowrap", "wrap"], overflowX: ["auto", "hidden"] } }, { children: tools.map(function (tools) { - return (_jsx(ToolbarGroup, { tools: tools, editor: editor, sx: { + return ((0, jsx_runtime_1.jsx)(emotion_theming_1.ThemeProvider, __assign({ theme: theme }, { children: (0, jsx_runtime_1.jsx)(popuprenderer_1.EditorContext.Provider, __assign({ value: editor }, { children: (0, jsx_runtime_1.jsxs)(popuprenderer_1.PopupRenderer, __assign({ editor: editor }, { children: [(0, jsx_runtime_1.jsx)(rebass_1.Flex, __assign({ className: "editor-toolbar", sx: { flexWrap: ["nowrap", "wrap"], overflowX: ["auto", "hidden"] } }, { children: tools.map(function (tools) { + return ((0, jsx_runtime_1.jsx)(toolbargroup_1.ToolbarGroup, { tools: tools, editor: editor, sx: { flexShrink: 0, pr: 2, mr: 2, borderRight: "1px solid var(--border)", ":last-of-type": { mr: 0, pr: 0, borderRight: "none" }, } }, tools.join(""))); - }) })), _jsx(EditorFloatingMenus, { editor: editor })] })) })) }))); + }) })), (0, jsx_runtime_1.jsx)(floatingmenus_1.EditorFloatingMenus, { editor: editor })] })) })) }))); } +exports.Toolbar = Toolbar; diff --git a/packages/editor/dist/toolbar/tooldefinitions.d.ts b/packages/editor/dist/toolbar/tooldefinitions.d.ts index c9d7776e9..88e97b56c 100644 --- a/packages/editor/dist/toolbar/tooldefinitions.d.ts +++ b/packages/editor/dist/toolbar/tooldefinitions.d.ts @@ -1,5 +1,5 @@ import { ToolbarDefinition, ToolDefinition } from "./types"; import { ToolId } from "./tools"; export declare function getToolDefinition(id: ToolId): ToolDefinition; -export declare function getAllTools(): Record<"bold" | "italic" | "underline" | "strikethrough" | "code" | "codeRemove" | "alignCenter" | "alignLeft" | "alignRight" | "alignJustify" | "subscript" | "superscript" | "ltr" | "rtl" | "numberedList" | "bulletList" | "highlight" | "textColor" | "openLink" | "linkSettings" | "imageSettings" | "rowProperties" | "insertRowBelow" | "insertRowAbove" | "moveRowDown" | "moveRowUp" | "deleteRow" | "columnProperties" | "insertColumnRight" | "insertColumnLeft" | "moveColumnRight" | "moveColumnLeft" | "deleteColumn" | "cellProperties" | "cellBorderColor" | "deleteTable" | "mergeCells" | "splitCells" | "attachmentSettings" | "embedSettings" | "tableSettings" | "math" | "fontSize" | "fontFamily" | "removeAttachment" | "downloadAttachment" | "clearformatting" | "addLink" | "editLink" | "removeLink" | "insertBlock" | "headings" | "imageAlignCenter" | "imageAlignLeft" | "imageAlignRight" | "imageProperties" | "embedAlignCenter" | "embedAlignLeft" | "embedAlignRight" | "embedProperties" | "cellBackgroundColor" | "cellTextColor" | "cellBorderWidth", ToolDefinition>; +export declare function getAllTools(): Record<"fontSize" | "underline" | "bold" | "bulletList" | "code" | "italic" | "subscript" | "superscript" | "fontFamily" | "highlight" | "removeAttachment" | "downloadAttachment" | "deleteColumn" | "deleteRow" | "deleteTable" | "mergeCells" | "ltr" | "rtl" | "strikethrough" | "codeRemove" | "alignCenter" | "alignLeft" | "alignRight" | "alignJustify" | "numberedList" | "textColor" | "openLink" | "linkSettings" | "imageSettings" | "rowProperties" | "insertRowBelow" | "insertRowAbove" | "moveRowDown" | "moveRowUp" | "columnProperties" | "insertColumnRight" | "insertColumnLeft" | "moveColumnRight" | "moveColumnLeft" | "cellProperties" | "cellBorderColor" | "splitCells" | "attachmentSettings" | "embedSettings" | "tableSettings" | "math" | "clearformatting" | "addLink" | "editLink" | "removeLink" | "insertBlock" | "headings" | "imageAlignCenter" | "imageAlignLeft" | "imageAlignRight" | "imageProperties" | "embedAlignCenter" | "embedAlignLeft" | "embedAlignRight" | "embedProperties" | "cellBackgroundColor" | "cellTextColor" | "cellBorderWidth", ToolDefinition>; export declare const DEFAULT_TOOLS: ToolbarDefinition; diff --git a/packages/editor/dist/toolbar/tooldefinitions.js b/packages/editor/dist/toolbar/tooldefinitions.js index 409281f81..b3a381896 100644 --- a/packages/editor/dist/toolbar/tooldefinitions.js +++ b/packages/editor/dist/toolbar/tooldefinitions.js @@ -1,3 +1,6 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.DEFAULT_TOOLS = exports.getAllTools = exports.getToolDefinition = void 0; var tools = { bold: { icon: "bold", @@ -291,13 +294,15 @@ var tools = { conditional: true, }, }; -export function getToolDefinition(id) { +function getToolDefinition(id) { return tools[id]; } -export function getAllTools() { +exports.getToolDefinition = getToolDefinition; +function getAllTools() { return tools; } -export var DEFAULT_TOOLS = [ +exports.getAllTools = getAllTools; +exports.DEFAULT_TOOLS = [ [ "insertBlock", "tableSettings", diff --git a/packages/editor/dist/toolbar/tools/alignment.js b/packages/editor/dist/toolbar/tools/alignment.js index 7de0cb967..c7418a4a0 100644 --- a/packages/editor/dist/toolbar/tools/alignment.js +++ b/packages/editor/dist/toolbar/tools/alignment.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -20,21 +21,27 @@ var __rest = (this && this.__rest) || function (s, e) { } return t; }; -import { jsx as _jsx } from "react/jsx-runtime"; -import { ToolButton } from "../components/tool-button"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.AlignJustify = exports.AlignRight = exports.AlignLeft = exports.AlignCenter = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var toolbutton_1 = require("../components/toolbutton"); function AlignmentTool(props) { var editor = props.editor, alignment = props.alignment, toolProps = __rest(props, ["editor", "alignment"]); - return (_jsx(ToolButton, __assign({}, toolProps, { onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().setTextAlign(alignment).run(); }, toggled: editor.isActive({ textAlign: alignment }) }))); + return ((0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({}, toolProps, { onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().setTextAlign(alignment).run(); }, toggled: editor.isActive({ textAlign: alignment }) }))); } -export function AlignCenter(props) { - return _jsx(AlignmentTool, __assign({ alignment: "center" }, props)); +function AlignCenter(props) { + return (0, jsx_runtime_1.jsx)(AlignmentTool, __assign({ alignment: "center" }, props)); } -export function AlignLeft(props) { - return _jsx(AlignmentTool, __assign({ alignment: "left" }, props)); +exports.AlignCenter = AlignCenter; +function AlignLeft(props) { + return (0, jsx_runtime_1.jsx)(AlignmentTool, __assign({ alignment: "left" }, props)); } -export function AlignRight(props) { - return _jsx(AlignmentTool, __assign({ alignment: "right" }, props)); +exports.AlignLeft = AlignLeft; +function AlignRight(props) { + return (0, jsx_runtime_1.jsx)(AlignmentTool, __assign({ alignment: "right" }, props)); } -export function AlignJustify(props) { - return _jsx(AlignmentTool, __assign({ alignment: "justify" }, props)); +exports.AlignRight = AlignRight; +function AlignJustify(props) { + return (0, jsx_runtime_1.jsx)(AlignmentTool, __assign({ alignment: "justify" }, props)); } +exports.AlignJustify = AlignJustify; diff --git a/packages/editor/dist/toolbar/tools/attachment.js b/packages/editor/dist/toolbar/tools/attachment.js index 964391fde..4935853c9 100644 --- a/packages/editor/dist/toolbar/tools/attachment.js +++ b/packages/editor/dist/toolbar/tools/attachment.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -9,28 +10,33 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; -import { jsx as _jsx } from "react/jsx-runtime"; -import { ToolButton } from "../components/tool-button"; -import { MoreTools } from "../components/more-tools"; -import { useToolbarLocation } from "../stores/toolbar-store"; -import { findSelectedNode } from "../utils/prosemirror"; -export function AttachmentSettings(props) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.RemoveAttachment = exports.DownloadAttachment = exports.AttachmentSettings = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var toolbutton_1 = require("../components/toolbutton"); +var moretools_1 = require("../components/moretools"); +var toolbarstore_1 = require("../stores/toolbarstore"); +var prosemirror_1 = require("../utils/prosemirror"); +function AttachmentSettings(props) { var editor = props.editor; - var isBottom = useToolbarLocation() === "bottom"; + var isBottom = (0, toolbarstore_1.useToolbarLocation)() === "bottom"; if (!editor.isActive("attachment") || !isBottom) return null; - return (_jsx(MoreTools, __assign({}, props, { autoCloseOnUnmount: true, popupId: "attachmentSettings", tools: [] }))); + return ((0, jsx_runtime_1.jsx)(moretools_1.MoreTools, __assign({}, props, { autoCloseOnUnmount: true, popupId: "attachmentSettings", tools: [] }))); } -export function DownloadAttachment(props) { +exports.AttachmentSettings = AttachmentSettings; +function DownloadAttachment(props) { var editor = props.editor; - return (_jsx(ToolButton, __assign({}, props, { toggled: false, onClick: function () { + return ((0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({}, props, { toggled: false, onClick: function () { var _a; - var attachmentNode = findSelectedNode(editor, "attachment"); + var attachmentNode = (0, prosemirror_1.findSelectedNode)(editor, "attachment"); var attachment = ((attachmentNode === null || attachmentNode === void 0 ? void 0 : attachmentNode.attrs) || {}); (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().downloadAttachment(attachment).run(); } }))); } -export function RemoveAttachment(props) { +exports.DownloadAttachment = DownloadAttachment; +function RemoveAttachment(props) { var editor = props.editor; - return (_jsx(ToolButton, __assign({}, props, { toggled: false, onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().removeAttachment().run(); } }))); + return ((0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({}, props, { toggled: false, onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().removeAttachment().run(); } }))); } +exports.RemoveAttachment = RemoveAttachment; diff --git a/packages/editor/dist/toolbar/tools/block.js b/packages/editor/dist/toolbar/tools/block.js index 8dce0e1d8..defa207b7 100644 --- a/packages/editor/dist/toolbar/tools/block.js +++ b/packages/editor/dist/toolbar/tools/block.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -25,24 +26,26 @@ var __read = (this && this.__read) || function (o, n) { } return ar; }; -import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; -import { Icons } from "../icons"; -import { useMemo, useRef, useState } from "react"; -import { Icon } from "../components/icon"; -import { EmbedPopup } from "../popups/embed-popup"; -import { TablePopup } from "../popups/table-popup"; -import { useIsMobile, useToolbarLocation } from "../stores/toolbar-store"; -import { ResponsivePresenter } from "../../components/responsive"; -import { showPopup } from "../../components/popup-presenter"; -import { ImageUploadPopup } from "../popups/image-upload"; -import { Button } from "../../components/button"; -export function InsertBlock(props) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.InsertBlock = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var icons_1 = require("../icons"); +var react_1 = require("react"); +var icon_1 = require("../components/icon"); +var embedpopup_1 = require("../popups/embedpopup"); +var tablepopup_1 = require("../popups/tablepopup"); +var toolbarstore_1 = require("../stores/toolbarstore"); +var responsive_1 = require("../../components/responsive"); +var popuppresenter_1 = require("../../components/popuppresenter"); +var imageupload_1 = require("../popups/imageupload"); +var button_1 = require("../../components/button"); +function InsertBlock(props) { var editor = props.editor; - var buttonRef = useRef(null); - var _a = __read(useState(false), 2), isOpen = _a[0], setIsOpen = _a[1]; - var toolbarLocation = useToolbarLocation(); - var isMobile = useIsMobile(); - var menuItems = useMemo(function () { + var buttonRef = (0, react_1.useRef)(null); + var _a = __read((0, react_1.useState)(false), 2), isOpen = _a[0], setIsOpen = _a[1]; + var toolbarLocation = (0, toolbarstore_1.useToolbarLocation)(); + var isMobile = (0, toolbarstore_1.useIsMobile)(); + var menuItems = (0, react_1.useMemo)(function () { return [ tasklist(editor), outlinelist(editor), @@ -56,7 +59,7 @@ export function InsertBlock(props) { table(editor), ]; }, [isMobile]); - return (_jsxs(_Fragment, { children: [_jsx(Button, __assign({ ref: buttonRef, sx: { + return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, __assign({ ref: buttonRef, sx: { p: 1, m: 0, bg: isOpen ? "hover" : "transparent", @@ -67,13 +70,14 @@ export function InsertBlock(props) { ":last-of-type": { mr: 0, }, - }, onMouseDown: function (e) { return e.preventDefault(); }, onClick: function () { return setIsOpen(function (s) { return !s; }); } }, { children: _jsx(Icon, { path: Icons.plus, size: 18, color: "primary" }) })), _jsx(ResponsivePresenter, { desktop: "menu", mobile: "sheet", title: "Choose a block to insert", isOpen: isOpen, items: menuItems, onClose: function () { return setIsOpen(false); }, position: { + }, onMouseDown: function (e) { return e.preventDefault(); }, onClick: function () { return setIsOpen(function (s) { return !s; }); } }, { children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { path: icons_1.Icons.plus, size: 18, color: "primary" }) })), (0, jsx_runtime_1.jsx)(responsive_1.ResponsivePresenter, { desktop: "menu", mobile: "sheet", title: "Choose a block to insert", isOpen: isOpen, items: menuItems, onClose: function () { return setIsOpen(false); }, position: { target: buttonRef.current || undefined, isTargetAbsolute: true, location: toolbarLocation === "bottom" ? "top" : "below", yOffset: 5, } })] })); } +exports.InsertBlock = InsertBlock; var horizontalRule = function (editor) { return ({ key: "hr", type: "button", @@ -144,7 +148,7 @@ var table = function (editor) { return ({ { key: "table-size-selector", type: "popup", - component: function (props) { return (_jsx(TablePopup, { onInsertTable: function (size) { + component: function (props) { return ((0, jsx_runtime_1.jsx)(tablepopup_1.TablePopup, { onInsertTable: function (size) { var _a, _b; (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().insertTable({ rows: size.rows, @@ -169,7 +173,7 @@ var embedMobile = function (editor) { return ({ type: "popup", component: function (_a) { var onClick = _a.onClick; - return (_jsx(EmbedPopup, { title: "Insert embed", onClose: function (embed) { + return ((0, jsx_runtime_1.jsx)(embedpopup_1.EmbedPopup, { title: "Insert embed", onClose: function (embed) { var _a; if (!embed) return onClick === null || onClick === void 0 ? void 0 : onClick(); @@ -189,9 +193,9 @@ var embedDesktop = function (editor) { return ({ onClick: function () { if (!editor) return; - showPopup({ + (0, popuppresenter_1.showPopup)({ theme: editor.storage.theme, - popup: function (hide) { return (_jsx(EmbedPopup, { title: "Insert embed", onClose: function (embed) { + popup: function (hide) { return ((0, jsx_runtime_1.jsx)(embedpopup_1.EmbedPopup, { title: "Insert embed", onClose: function (embed) { var _a; if (!embed) return hide(); @@ -238,7 +242,7 @@ var uploadImageFromURLMobile = function (editor) { return ({ type: "popup", component: function (_a) { var onClick = _a.onClick; - return (_jsx(ImageUploadPopup, { onInsert: function (image) { + return ((0, jsx_runtime_1.jsx)(imageupload_1.ImageUploadPopup, { onInsert: function (image) { var _a; (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().insertImage(image).run(); onClick === null || onClick === void 0 ? void 0 : onClick(); @@ -258,9 +262,9 @@ var uploadImageFromURL = function (editor) { return ({ onClick: function () { if (!editor) return; - showPopup({ + (0, popuppresenter_1.showPopup)({ theme: editor.storage.theme, - popup: function (hide) { return (_jsx(ImageUploadPopup, { onInsert: function (image) { + popup: function (hide) { return ((0, jsx_runtime_1.jsx)(imageupload_1.ImageUploadPopup, { onInsert: function (image) { var _a; (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().insertImage(image).run(); hide(); diff --git a/packages/editor/dist/toolbar/tools/colors.js b/packages/editor/dist/toolbar/tools/colors.js index d5951834f..ae5883f57 100644 --- a/packages/editor/dist/toolbar/tools/colors.js +++ b/packages/editor/dist/toolbar/tools/colors.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -9,6 +10,29 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { + Object.defineProperty(o, "default", { enumerable: true, value: v }); +}) : function(o, v) { + o["default"] = v; +}); +var __importStar = (this && this.__importStar) || function (mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); + __setModuleDefault(result, mod); + return result; +}; 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) @@ -36,58 +60,65 @@ var __read = (this && this.__read) || function (o, n) { } return ar; }; -import { jsx as _jsx } from "react/jsx-runtime"; -import React, { useState } from "react"; -import tinycolor from "tinycolor2"; -import { PopupWrapper } from "../../components/popup-presenter"; -import { config } from "../../utils/config"; -import { SplitButton } from "../components/split-button"; -import { ColorPicker } from "../popups/color-picker"; -import { useToolbarLocation } from "../stores/toolbar-store"; -import { getToolbarElement } from "../utils/dom"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.TextColor = exports.Highlight = exports.ColorTool = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var react_1 = __importStar(require("react")); +var tinycolor2_1 = __importDefault(require("tinycolor2")); +var popuppresenter_1 = require("../../components/popuppresenter"); +var config_1 = require("../../utils/config"); +var splitbutton_1 = require("../components/splitbutton"); +var colorpicker_1 = require("../popups/colorpicker"); +var toolbarstore_1 = require("../stores/toolbarstore"); +var dom_1 = require("../utils/dom"); // TODO test rerendering function _ColorTool(props) { var editor = props.editor, onColorChange = props.onColorChange, getActiveColor = props.getActiveColor, title = props.title, cacheKey = props.cacheKey, toolProps = __rest(props, ["editor", "onColorChange", "getActiveColor", "title", "cacheKey"]); - var activeColor = getActiveColor() || config.get(cacheKey); - var tColor = tinycolor(activeColor); - var isBottom = useToolbarLocation() === "bottom"; - var _a = __read(useState(false), 2), isOpen = _a[0], setIsOpen = _a[1]; - return (_jsx(SplitButton, __assign({}, toolProps, { iconColor: activeColor && tColor.isDark() ? "static" : "icon", sx: { + var activeColor = getActiveColor() || config_1.config.get(cacheKey); + var tColor = (0, tinycolor2_1.default)(activeColor); + var isBottom = (0, toolbarstore_1.useToolbarLocation)() === "bottom"; + var _a = __read((0, react_1.useState)(false), 2), isOpen = _a[0], setIsOpen = _a[1]; + return ((0, jsx_runtime_1.jsx)(splitbutton_1.SplitButton, __assign({}, toolProps, { iconColor: activeColor && tColor.isDark() ? "static" : "icon", sx: { mr: 0, bg: activeColor || "transparent", ":hover": { bg: activeColor ? tColor.darken(5).toRgbString() : "transparent", }, - }, onOpen: function () { return setIsOpen(function (s) { return !s; }); }, toggled: isOpen, onClick: function () { return onColorChange(activeColor); } }, { children: _jsx(PopupWrapper, { isOpen: isOpen, id: props.icon, group: "color", position: { + }, onOpen: function () { return setIsOpen(function (s) { return !s; }); }, toggled: isOpen, onClick: function () { return onColorChange(activeColor); } }, { children: (0, jsx_runtime_1.jsx)(popuppresenter_1.PopupWrapper, { isOpen: isOpen, id: props.icon, group: "color", position: { isTargetAbsolute: true, - target: getToolbarElement(), + target: (0, dom_1.getToolbarElement)(), align: isBottom ? "center" : "end", location: isBottom ? "top" : "below", yOffset: 10, - }, focusOnRender: false, blocking: false, renderPopup: function (close) { return (_jsx(ColorPicker, { color: activeColor, onClear: function () { + }, focusOnRender: false, blocking: false, renderPopup: function (close) { return ((0, jsx_runtime_1.jsx)(colorpicker_1.ColorPicker, { color: activeColor, onClear: function () { onColorChange(); - config.set(cacheKey, null); + config_1.config.set(cacheKey, null); }, onChange: function (color) { onColorChange(color); - config.set(cacheKey, color); + config_1.config.set(cacheKey, color); }, onClose: close, title: title })); } }) }))); } -export var ColorTool = React.memo(_ColorTool, function () { return true; }); -export function Highlight(props) { +exports.ColorTool = react_1.default.memo(_ColorTool, function () { return true; }); +function Highlight(props) { var editor = props.editor; - return (_jsx(ColorTool, __assign({}, props, { cacheKey: "highlight", getActiveColor: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.getAttributes("highlight").color; }, title: "Background color", onColorChange: function (color) { + return ((0, jsx_runtime_1.jsx)(exports.ColorTool, __assign({}, props, { cacheKey: "highlight", getActiveColor: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.getAttributes("highlight").color; }, title: "Background color", onColorChange: function (color) { var _a, _b; return color ? (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().toggleHighlight({ color: color }).run() : (_b = editor.current) === null || _b === void 0 ? void 0 : _b.chain().focus().unsetHighlight().run(); } }))); } -export function TextColor(props) { +exports.Highlight = Highlight; +function TextColor(props) { var editor = props.editor; - return (_jsx(ColorTool, __assign({}, props, { cacheKey: "textColor", getActiveColor: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.getAttributes("textStyle").color; }, title: "Text color", onColorChange: function (color) { + return ((0, jsx_runtime_1.jsx)(exports.ColorTool, __assign({}, props, { cacheKey: "textColor", getActiveColor: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.getAttributes("textStyle").color; }, title: "Text color", onColorChange: function (color) { var _a, _b; return color ? (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().setColor(color).run() : (_b = editor.current) === null || _b === void 0 ? void 0 : _b.chain().focus().unsetColor().run(); } }))); } +exports.TextColor = TextColor; diff --git a/packages/editor/dist/toolbar/tools/embed.js b/packages/editor/dist/toolbar/tools/embed.js index 903da19d9..b6a02c547 100644 --- a/packages/editor/dist/toolbar/tools/embed.js +++ b/packages/editor/dist/toolbar/tools/embed.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -25,55 +26,62 @@ var __read = (this && this.__read) || function (o, n) { } return ar; }; -import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; -import { ToolButton } from "../components/tool-button"; -import { useMemo, useRef, useState } from "react"; -import { ResponsivePresenter } from "../../components/responsive"; -import { MoreTools } from "../components/more-tools"; -import { useToolbarLocation } from "../stores/toolbar-store"; -import { findSelectedNode } from "../utils/prosemirror"; -import { EmbedPopup } from "../popups/embed-popup"; -export function EmbedSettings(props) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.EmbedProperties = exports.EmbedAlignCenter = exports.EmbedAlignRight = exports.EmbedAlignLeft = exports.EmbedSettings = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var toolbutton_1 = require("../components/toolbutton"); +var react_1 = require("react"); +var responsive_1 = require("../../components/responsive"); +var moretools_1 = require("../components/moretools"); +var toolbarstore_1 = require("../stores/toolbarstore"); +var prosemirror_1 = require("../utils/prosemirror"); +var embedpopup_1 = require("../popups/embedpopup"); +function EmbedSettings(props) { var editor = props.editor; - var isBottom = useToolbarLocation() === "bottom"; + var isBottom = (0, toolbarstore_1.useToolbarLocation)() === "bottom"; if (!editor.isActive("embed") || !isBottom) return null; - return (_jsx(MoreTools, __assign({}, props, { autoCloseOnUnmount: true, popupId: "embedSettings", tools: [] }))); + return ((0, jsx_runtime_1.jsx)(moretools_1.MoreTools, __assign({}, props, { autoCloseOnUnmount: true, popupId: "embedSettings", tools: [] }))); } -export function EmbedAlignLeft(props) { +exports.EmbedSettings = EmbedSettings; +function EmbedAlignLeft(props) { var editor = props.editor; - return (_jsx(ToolButton, __assign({}, props, { toggled: false, onClick: function () { + return ((0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({}, props, { toggled: false, onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().setEmbedAlignment({ align: "left" }).run(); } }))); } -export function EmbedAlignRight(props) { +exports.EmbedAlignLeft = EmbedAlignLeft; +function EmbedAlignRight(props) { var editor = props.editor; - return (_jsx(ToolButton, __assign({}, props, { toggled: false, onClick: function () { + return ((0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({}, props, { toggled: false, onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().setEmbedAlignment({ align: "right" }).run(); } }))); } -export function EmbedAlignCenter(props) { +exports.EmbedAlignRight = EmbedAlignRight; +function EmbedAlignCenter(props) { var editor = props.editor; - return (_jsx(ToolButton, __assign({}, props, { toggled: false, onClick: function () { + return ((0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({}, props, { toggled: false, onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().setEmbedAlignment({ align: "center" }).run(); } }))); } +exports.EmbedAlignCenter = EmbedAlignCenter; // TODO: stop re-rendering -export function EmbedProperties(props) { +function EmbedProperties(props) { var editor = props.editor; - var _a = __read(useState(false), 2), isOpen = _a[0], setIsOpen = _a[1]; - var buttonRef = useRef(); + var _a = __read((0, react_1.useState)(false), 2), isOpen = _a[0], setIsOpen = _a[1]; + var buttonRef = (0, react_1.useRef)(); // TODO: improve perf by deferring this until user opens the popup - var embedNode = useMemo(function () { return findSelectedNode(editor, "embed"); }, []); + var embedNode = (0, react_1.useMemo)(function () { return (0, prosemirror_1.findSelectedNode)(editor, "embed"); }, []); var embed = ((embedNode === null || embedNode === void 0 ? void 0 : embedNode.attrs) || {}); - return (_jsxs(_Fragment, { children: [_jsx(ToolButton, __assign({ buttonRef: buttonRef, toggled: isOpen }, props, { onClick: function () { return setIsOpen(function (s) { return !s; }); } })), _jsx(ResponsivePresenter, __assign({ isOpen: isOpen, desktop: "menu", mobile: "sheet", onClose: function () { return setIsOpen(false); }, blocking: true, focusOnRender: false, position: { + return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({ buttonRef: buttonRef, toggled: isOpen }, props, { onClick: function () { return setIsOpen(function (s) { return !s; }); } })), (0, jsx_runtime_1.jsx)(responsive_1.ResponsivePresenter, __assign({ isOpen: isOpen, desktop: "menu", mobile: "sheet", onClose: function () { return setIsOpen(false); }, blocking: true, focusOnRender: false, position: { target: buttonRef.current || "mouse", align: "start", location: "below", yOffset: 10, isTargetAbsolute: true, - } }, { children: _jsx(EmbedPopup, { title: "Embed properties", onClose: function () { return setIsOpen(false); }, embed: embed, onSourceChanged: function (src) { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.commands.setEmbedSource(src); }, onSizeChanged: function (size) { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.commands.setEmbedSize(size); } }) }))] })); + } }, { children: (0, jsx_runtime_1.jsx)(embedpopup_1.EmbedPopup, { title: "Embed properties", onClose: function () { return setIsOpen(false); }, embed: embed, onSourceChanged: function (src) { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.commands.setEmbedSource(src); }, onSizeChanged: function (size) { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.commands.setEmbedSize(size); } }) }))] })); } +exports.EmbedProperties = EmbedProperties; diff --git a/packages/editor/dist/toolbar/tools/font.js b/packages/editor/dist/toolbar/tools/font.js index a5eea4131..ec7549525 100644 --- a/packages/editor/dist/toolbar/tools/font.js +++ b/packages/editor/dist/toolbar/tools/font.js @@ -1,3 +1,4 @@ +"use strict"; var __read = (this && this.__read) || function (o, n) { var m = typeof Symbol === "function" && o[Symbol.iterator]; if (!m) return o; @@ -14,23 +15,25 @@ var __read = (this && this.__read) || function (o, n) { } return ar; }; -import { jsx as _jsx } from "react/jsx-runtime"; -import { Dropdown } from "../components/dropdown"; -import { useCallback, useMemo } from "react"; -import { Counter } from "../components/counter"; -import { useRefValue } from "../../hooks/use-ref-value"; -export function FontSize(props) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.FontFamily = exports.FontSize = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var dropdown_1 = require("../components/dropdown"); +var react_1 = require("react"); +var counter_1 = require("../components/counter"); +var useRefValue_1 = require("../../hooks/useRefValue"); +function FontSize(props) { var editor = props.editor; var _fontSize = editor.getAttributes("textStyle").fontSize; var fontSize = _fontSize || "16px"; - var fontSizeAsNumber = useRefValue(parseInt(fontSize.replace("px", ""))); - var decreaseFontSize = useCallback(function () { + var fontSizeAsNumber = (0, useRefValue_1.useRefValue)(parseInt(fontSize.replace("px", ""))); + var decreaseFontSize = (0, react_1.useCallback)(function () { return Math.max(8, fontSizeAsNumber.current - 1); }, []); - var increaseFontSize = useCallback(function () { + var increaseFontSize = (0, react_1.useCallback)(function () { return Math.min(120, fontSizeAsNumber.current + 1); }, []); - return (_jsx(Counter, { title: "font size", onDecrease: function () { + return ((0, jsx_runtime_1.jsx)(counter_1.Counter, { title: "font size", onDecrease: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().setFontSize("".concat(decreaseFontSize(), "px")).run(); }, onIncrease: function () { @@ -38,12 +41,13 @@ export function FontSize(props) { (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().setFontSize("".concat(increaseFontSize(), "px")).run(); }, onReset: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().setFontSize("16px").run(); }, value: fontSize })); } +exports.FontSize = FontSize; var fontFamilies = { System: "Open Sans", Serif: "serif", Monospace: "monospace", }; -export function FontFamily(props) { +function FontFamily(props) { var _a, _b; var editor = props.editor; var currentFontFamily = ((_b = (_a = Object.entries(fontFamilies) @@ -51,9 +55,10 @@ export function FontFamily(props) { var _b = __read(_a, 2), key = _b[0], value = _b[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"; - var items = useMemo(function () { return toMenuItems(editor, currentFontFamily); }, [currentFontFamily]); - return (_jsx(Dropdown, { selectedItem: currentFontFamily, items: items, menuWidth: 130 })); + var items = (0, react_1.useMemo)(function () { return toMenuItems(editor, currentFontFamily); }, [currentFontFamily]); + return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { selectedItem: currentFontFamily, items: items, menuWidth: 130 })); } +exports.FontFamily = FontFamily; function toMenuItems(editor, currentFontFamily) { var menuItems = []; var _loop_1 = function (key) { diff --git a/packages/editor/dist/toolbar/tools/headings.js b/packages/editor/dist/toolbar/tools/headings.js index 1a8e2c672..811dffa22 100644 --- a/packages/editor/dist/toolbar/tools/headings.js +++ b/packages/editor/dist/toolbar/tools/headings.js @@ -1,3 +1,4 @@ +"use strict"; var __read = (this && this.__read) || function (o, n) { var m = typeof Symbol === "function" && o[Symbol.iterator]; if (!m) return o; @@ -23,20 +24,23 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) { } return to.concat(ar || Array.prototype.slice.call(from)); }; -import { jsx as _jsx } from "react/jsx-runtime"; -import { Dropdown } from "../components/dropdown"; -import { useToolbarLocation } from "../stores/toolbar-store"; -import { useMemo } from "react"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.Headings = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var dropdown_1 = require("../components/dropdown"); +var toolbarstore_1 = require("../stores/toolbarstore"); +var react_1 = require("react"); var defaultLevels = [1, 2, 3, 4, 5, 6]; -export function Headings(props) { +function Headings(props) { var editor = props.editor; - var toolbarLocation = useToolbarLocation(); + var toolbarLocation = (0, toolbarstore_1.useToolbarLocation)(); var currentHeadingLevel = defaultLevels.find(function (level) { return editor.isActive("heading", { level: level }); }); - var items = useMemo(function () { return toMenuItems(editor, toolbarLocation, currentHeadingLevel); }, [currentHeadingLevel]); - return (_jsx(Dropdown, { selectedItem: currentHeadingLevel ? "Heading ".concat(currentHeadingLevel) : "Paragraph", items: items, menuWidth: 130 })); + var items = (0, react_1.useMemo)(function () { return toMenuItems(editor, toolbarLocation, currentHeadingLevel); }, [currentHeadingLevel]); + return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { selectedItem: currentHeadingLevel ? "Heading ".concat(currentHeadingLevel) : "Paragraph", items: items, menuWidth: 130 })); } +exports.Headings = Headings; function toMenuItems(editor, toolbarLocation, currentHeadingLevel) { var menuItems = defaultLevels.map(function (level) { return ({ type: "button", diff --git a/packages/editor/dist/toolbar/tools/image.js b/packages/editor/dist/toolbar/tools/image.js index 233668634..dccc86a59 100644 --- a/packages/editor/dist/toolbar/tools/image.js +++ b/packages/editor/dist/toolbar/tools/image.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -25,21 +26,23 @@ var __read = (this && this.__read) || function (o, n) { } return ar; }; -import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; -import { ToolButton } from "../components/tool-button"; -import { useMemo, useRef, useState } from "react"; -import { ResponsivePresenter } from "../../components/responsive"; -import { MoreTools } from "../components/more-tools"; -import { useToolbarLocation } from "../stores/toolbar-store"; -import { ImageProperties as ImagePropertiesPopup } from "../popups/image-properties"; -import { findSelectedNode } from "../utils/prosemirror"; -export function ImageSettings(props) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.ImageProperties = exports.ImageAlignCenter = exports.ImageAlignRight = exports.ImageAlignLeft = exports.ImageSettings = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var toolbutton_1 = require("../components/toolbutton"); +var react_1 = require("react"); +var responsive_1 = require("../../components/responsive"); +var moretools_1 = require("../components/moretools"); +var toolbarstore_1 = require("../stores/toolbarstore"); +var imageproperties_1 = require("../popups/imageproperties"); +var prosemirror_1 = require("../utils/prosemirror"); +function ImageSettings(props) { var _a, _b; var editor = props.editor; - var isBottom = useToolbarLocation() === "bottom"; + var isBottom = (0, toolbarstore_1.useToolbarLocation)() === "bottom"; if (!editor.isActive("image") || !isBottom) return null; - return (_jsx(MoreTools, __assign({}, props, { autoCloseOnUnmount: true, popupId: "imageSettings", tools: ((_b = (_a = findSelectedNode(editor, "image")) === null || _a === void 0 ? void 0 : _a.attrs) === null || _b === void 0 ? void 0 : _b.float) + return ((0, jsx_runtime_1.jsx)(moretools_1.MoreTools, __assign({}, props, { autoCloseOnUnmount: true, popupId: "imageSettings", tools: ((_b = (_a = (0, prosemirror_1.findSelectedNode)(editor, "image")) === null || _a === void 0 ? void 0 : _a.attrs) === null || _b === void 0 ? void 0 : _b.float) ? ["imageAlignLeft", "imageAlignRight", "imageProperties"] : [ "imageAlignLeft", @@ -48,40 +51,45 @@ export function ImageSettings(props) { "imageProperties", ] }))); } -export function ImageAlignLeft(props) { +exports.ImageSettings = ImageSettings; +function ImageAlignLeft(props) { var editor = props.editor; - return (_jsx(ToolButton, __assign({}, props, { toggled: false, onClick: function () { + return ((0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({}, props, { toggled: false, onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().setImageAlignment({ align: "left" }).run(); } }))); } -export function ImageAlignRight(props) { +exports.ImageAlignLeft = ImageAlignLeft; +function ImageAlignRight(props) { var editor = props.editor; - return (_jsx(ToolButton, __assign({}, props, { toggled: false, onClick: function () { + return ((0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({}, props, { toggled: false, onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().setImageAlignment({ align: "right" }).run(); } }))); } -export function ImageAlignCenter(props) { +exports.ImageAlignRight = ImageAlignRight; +function ImageAlignCenter(props) { var editor = props.editor; - return (_jsx(ToolButton, __assign({}, props, { toggled: false, onClick: function () { + return ((0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({}, props, { toggled: false, onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().setImageAlignment({ align: "center" }).run(); } }))); } -export function ImageProperties(props) { +exports.ImageAlignCenter = ImageAlignCenter; +function ImageProperties(props) { var editor = props.editor; - var _a = __read(useState(false), 2), isOpen = _a[0], setIsOpen = _a[1]; - var buttonRef = useRef(); + var _a = __read((0, react_1.useState)(false), 2), isOpen = _a[0], setIsOpen = _a[1]; + var buttonRef = (0, react_1.useRef)(); // TODO: defer until user opens the popup - var image = useMemo(function () { return findSelectedNode(editor, "image"); }, []); + var image = (0, react_1.useMemo)(function () { return (0, prosemirror_1.findSelectedNode)(editor, "image"); }, []); var _b = ((image === null || image === void 0 ? void 0 : image.attrs) || {}), float = _b.float, align = _b.align, width = _b.width, height = _b.height; - return (_jsxs(_Fragment, { children: [_jsx(ToolButton, __assign({ buttonRef: buttonRef, toggled: isOpen }, props, { onClick: function () { return setIsOpen(function (s) { return !s; }); } })), _jsx(ResponsivePresenter, __assign({ isOpen: isOpen, desktop: "menu", mobile: "sheet", onClose: function () { return setIsOpen(false); }, blocking: true, focusOnRender: false, position: { + return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({ buttonRef: buttonRef, toggled: isOpen }, props, { onClick: function () { return setIsOpen(function (s) { return !s; }); } })), (0, jsx_runtime_1.jsx)(responsive_1.ResponsivePresenter, __assign({ isOpen: isOpen, desktop: "menu", mobile: "sheet", onClose: function () { return setIsOpen(false); }, blocking: true, focusOnRender: false, position: { target: buttonRef.current || "mouse", align: "start", location: "below", yOffset: 10, isTargetAbsolute: true, - } }, { children: _jsx(ImagePropertiesPopup, { editor: editor, height: height, width: width, align: align, float: float, onClose: function () { return setIsOpen(false); } }) }))] })); + } }, { children: (0, jsx_runtime_1.jsx)(imageproperties_1.ImageProperties, { editor: editor, height: height, width: width, align: align, float: float, onClose: function () { return setIsOpen(false); } }) }))] })); } +exports.ImageProperties = ImageProperties; diff --git a/packages/editor/dist/toolbar/tools/index.js b/packages/editor/dist/toolbar/tools/index.js index 401f877aa..bb422e155 100644 --- a/packages/editor/dist/toolbar/tools/index.js +++ b/packages/editor/dist/toolbar/tools/index.js @@ -1,81 +1,85 @@ -import { Bold, Italic, Underline, Strikethrough, Code, Subscript, Superscript, ClearFormatting, CodeRemove, Math, } from "./inline"; -import { InsertBlock } from "./block"; -import { FontSize, FontFamily } from "./font"; -import { AlignCenter, AlignLeft, AlignRight, AlignJustify } from "./alignment"; -import { Headings } from "./headings"; -import { NumberedList, BulletList } from "./lists"; -import { LeftToRight, RightToLeft } from "./text-direction"; -import { Highlight, TextColor } from "./colors"; -import { TableSettings, ColumnProperties, RowProperties, CellProperties, InsertColumnLeft, InsertColumnRight, MoveColumnLeft, MoveColumnRight, DeleteColumn, SplitCells, MergeCells, InsertRowAbove, InsertRowBelow, MoveRowUp, MoveRowDown, DeleteRow, DeleteTable, CellBackgroundColor, CellBorderColor, CellTextColor, CellBorderWidth, } from "./table"; -import { ImageSettings, ImageAlignCenter, ImageAlignLeft, ImageAlignRight, ImageProperties, } from "./image"; -import { AttachmentSettings, DownloadAttachment, RemoveAttachment, } from "./attachment"; -import { EmbedAlignCenter, EmbedAlignLeft, EmbedAlignRight, EmbedProperties, EmbedSettings, } from "./embed"; -import { AddLink, EditLink, RemoveLink, LinkSettings, OpenLink } from "./link"; +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.findTool = void 0; +var inline_1 = require("./inline"); +var block_1 = require("./block"); +var font_1 = require("./font"); +var alignment_1 = require("./alignment"); +var headings_1 = require("./headings"); +var lists_1 = require("./lists"); +var textdirection_1 = require("./textdirection"); +var colors_1 = require("./colors"); +var table_1 = require("./table"); +var image_1 = require("./image"); +var attachment_1 = require("./attachment"); +var embed_1 = require("./embed"); +var link_1 = require("./link"); var tools = { - bold: Bold, - italic: Italic, - underline: Underline, - strikethrough: Strikethrough, - code: Code, - codeRemove: CodeRemove, - subscript: Subscript, - superscript: Superscript, - clearformatting: ClearFormatting, - addLink: AddLink, - editLink: EditLink, - removeLink: RemoveLink, - linkSettings: LinkSettings, - openLink: OpenLink, - insertBlock: InsertBlock, - numberedList: NumberedList, - bulletList: BulletList, - fontSize: FontSize, - fontFamily: FontFamily, - headings: Headings, - alignCenter: AlignCenter, - alignRight: AlignRight, - alignLeft: AlignLeft, - alignJustify: AlignJustify, - ltr: LeftToRight, - rtl: RightToLeft, - textColor: TextColor, - highlight: Highlight, - math: Math, - imageSettings: ImageSettings, - imageAlignCenter: ImageAlignCenter, - imageAlignLeft: ImageAlignLeft, - imageAlignRight: ImageAlignRight, - imageProperties: ImageProperties, - embedAlignCenter: EmbedAlignCenter, - embedAlignLeft: EmbedAlignLeft, - embedAlignRight: EmbedAlignRight, - embedProperties: EmbedProperties, - embedSettings: EmbedSettings, - attachmentSettings: AttachmentSettings, - downloadAttachment: DownloadAttachment, - removeAttachment: RemoveAttachment, - tableSettings: TableSettings, - columnProperties: ColumnProperties, - rowProperties: RowProperties, - cellProperties: CellProperties, - insertColumnLeft: InsertColumnLeft, - insertColumnRight: InsertColumnRight, - moveColumnLeft: MoveColumnLeft, - moveColumnRight: MoveColumnRight, - deleteColumn: DeleteColumn, - splitCells: SplitCells, - mergeCells: MergeCells, - cellBackgroundColor: CellBackgroundColor, - cellBorderColor: CellBorderColor, - cellTextColor: CellTextColor, - cellBorderWidth: CellBorderWidth, - insertRowAbove: InsertRowAbove, - insertRowBelow: InsertRowBelow, - moveRowUp: MoveRowUp, - moveRowDown: MoveRowDown, - deleteRow: DeleteRow, - deleteTable: DeleteTable, + bold: inline_1.Bold, + italic: inline_1.Italic, + underline: inline_1.Underline, + strikethrough: inline_1.Strikethrough, + code: inline_1.Code, + codeRemove: inline_1.CodeRemove, + subscript: inline_1.Subscript, + superscript: inline_1.Superscript, + clearformatting: inline_1.ClearFormatting, + addLink: link_1.AddLink, + editLink: link_1.EditLink, + removeLink: link_1.RemoveLink, + linkSettings: link_1.LinkSettings, + openLink: link_1.OpenLink, + insertBlock: block_1.InsertBlock, + numberedList: lists_1.NumberedList, + bulletList: lists_1.BulletList, + fontSize: font_1.FontSize, + fontFamily: font_1.FontFamily, + headings: headings_1.Headings, + alignCenter: alignment_1.AlignCenter, + alignRight: alignment_1.AlignRight, + alignLeft: alignment_1.AlignLeft, + alignJustify: alignment_1.AlignJustify, + ltr: textdirection_1.LeftToRight, + rtl: textdirection_1.RightToLeft, + textColor: colors_1.TextColor, + highlight: colors_1.Highlight, + math: inline_1.Math, + imageSettings: image_1.ImageSettings, + imageAlignCenter: image_1.ImageAlignCenter, + imageAlignLeft: image_1.ImageAlignLeft, + imageAlignRight: image_1.ImageAlignRight, + imageProperties: image_1.ImageProperties, + embedAlignCenter: embed_1.EmbedAlignCenter, + embedAlignLeft: embed_1.EmbedAlignLeft, + embedAlignRight: embed_1.EmbedAlignRight, + embedProperties: embed_1.EmbedProperties, + embedSettings: embed_1.EmbedSettings, + attachmentSettings: attachment_1.AttachmentSettings, + downloadAttachment: attachment_1.DownloadAttachment, + removeAttachment: attachment_1.RemoveAttachment, + tableSettings: table_1.TableSettings, + columnProperties: table_1.ColumnProperties, + rowProperties: table_1.RowProperties, + cellProperties: table_1.CellProperties, + insertColumnLeft: table_1.InsertColumnLeft, + insertColumnRight: table_1.InsertColumnRight, + moveColumnLeft: table_1.MoveColumnLeft, + moveColumnRight: table_1.MoveColumnRight, + deleteColumn: table_1.DeleteColumn, + splitCells: table_1.SplitCells, + mergeCells: table_1.MergeCells, + cellBackgroundColor: table_1.CellBackgroundColor, + cellBorderColor: table_1.CellBorderColor, + cellTextColor: table_1.CellTextColor, + cellBorderWidth: table_1.CellBorderWidth, + insertRowAbove: table_1.InsertRowAbove, + insertRowBelow: table_1.InsertRowBelow, + moveRowUp: table_1.MoveRowUp, + moveRowDown: table_1.MoveRowDown, + deleteRow: table_1.DeleteRow, + deleteTable: table_1.DeleteTable, }; -export function findTool(id) { +function findTool(id) { return tools[id]; } +exports.findTool = findTool; diff --git a/packages/editor/dist/toolbar/tools/inline.js b/packages/editor/dist/toolbar/tools/inline.js index 41a61da83..6902cb7fd 100644 --- a/packages/editor/dist/toolbar/tools/inline.js +++ b/packages/editor/dist/toolbar/tools/inline.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -9,52 +10,64 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; -import { jsx as _jsx } from "react/jsx-runtime"; -import { ToolButton } from "../components/tool-button"; -import { useToolbarLocation } from "../stores/toolbar-store"; -export function Italic(props) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.Math = exports.CodeRemove = exports.ClearFormatting = exports.Superscript = exports.Subscript = exports.Bold = exports.Code = exports.Underline = exports.Strikethrough = exports.Italic = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var toolbutton_1 = require("../components/toolbutton"); +var toolbarstore_1 = require("../stores/toolbarstore"); +function Italic(props) { var editor = props.editor; - return (_jsx(ToolButton, __assign({}, props, { toggled: editor.isActive("italic"), onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().toggleItalic().run(); } }))); + return ((0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({}, props, { toggled: editor.isActive("italic"), onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().toggleItalic().run(); } }))); } -export function Strikethrough(props) { +exports.Italic = Italic; +function Strikethrough(props) { var editor = props.editor; - return (_jsx(ToolButton, __assign({}, props, { toggled: editor.isActive("strike"), onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().toggleStrike().run(); } }))); + return ((0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({}, props, { toggled: editor.isActive("strike"), onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().toggleStrike().run(); } }))); } -export function Underline(props) { +exports.Strikethrough = Strikethrough; +function Underline(props) { var editor = props.editor; - return (_jsx(ToolButton, __assign({}, props, { toggled: editor.isActive("underline"), onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().toggleUnderline().run(); } }))); + return ((0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({}, props, { toggled: editor.isActive("underline"), onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().toggleUnderline().run(); } }))); } -export function Code(props) { +exports.Underline = Underline; +function Code(props) { var editor = props.editor; - return (_jsx(ToolButton, __assign({}, props, { toggled: editor.isActive("code"), onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().toggleCode().run(); } }))); + return ((0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({}, props, { toggled: editor.isActive("code"), onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().toggleCode().run(); } }))); } -export function Bold(props) { +exports.Code = Code; +function Bold(props) { var editor = props.editor; - return (_jsx(ToolButton, __assign({}, props, { toggled: editor.isActive("bold"), onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().toggleBold().run(); } }))); + return ((0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({}, props, { toggled: editor.isActive("bold"), onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().toggleBold().run(); } }))); } -export function Subscript(props) { +exports.Bold = Bold; +function Subscript(props) { var editor = props.editor; - return (_jsx(ToolButton, __assign({}, props, { toggled: editor.isActive("subscript"), onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().toggleSubscript().run(); } }))); + return ((0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({}, props, { toggled: editor.isActive("subscript"), onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().toggleSubscript().run(); } }))); } -export function Superscript(props) { +exports.Subscript = Subscript; +function Superscript(props) { var editor = props.editor; - return (_jsx(ToolButton, __assign({}, props, { toggled: editor.isActive("superscript"), onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().toggleSuperscript().run(); } }))); + return ((0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({}, props, { toggled: editor.isActive("superscript"), onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().toggleSuperscript().run(); } }))); } -export function ClearFormatting(props) { +exports.Superscript = Superscript; +function ClearFormatting(props) { var editor = props.editor; - return (_jsx(ToolButton, __assign({}, props, { toggled: false, onClick: function () { + return ((0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({}, props, { toggled: false, onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().clearNodes().unsetAllMarks().unsetMark("link").run(); } }))); } -export function CodeRemove(props) { +exports.ClearFormatting = ClearFormatting; +function CodeRemove(props) { var editor = props.editor; - var isBottom = useToolbarLocation() === "bottom"; + var isBottom = (0, toolbarstore_1.useToolbarLocation)() === "bottom"; if (!editor.isActive("code") || !isBottom) return null; - return (_jsx(ToolButton, __assign({}, props, { toggled: false, onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().unsetMark("code").run(); } }))); + return ((0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({}, props, { toggled: false, onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().unsetMark("code").run(); } }))); } -export function Math(props) { +exports.CodeRemove = CodeRemove; +function Math(props) { var editor = props.editor; - return (_jsx(ToolButton, __assign({}, props, { toggled: false, onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().insertMathInline().run(); } }))); + return ((0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({}, props, { toggled: false, onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().insertMathInline().run(); } }))); } +exports.Math = Math; diff --git a/packages/editor/dist/toolbar/tools/link.js b/packages/editor/dist/toolbar/tools/link.js index b20b6126e..217b6b4d5 100644 --- a/packages/editor/dist/toolbar/tools/link.js +++ b/packages/editor/dist/toolbar/tools/link.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -25,28 +26,31 @@ var __read = (this && this.__read) || function (o, n) { } return ar; }; -import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; -import { ToolButton } from "../components/tool-button"; -import { useCallback, useRef, useState } from "react"; -import { ResponsivePresenter } from "../../components/responsive"; -import { LinkPopup } from "../popups/link-popup"; -import { useToolbarLocation } from "../stores/toolbar-store"; -import { MoreTools } from "../components/more-tools"; -import { useRefValue } from "../../hooks/use-ref-value"; -import { findMark, selectionToOffset } from "../utils/prosemirror"; -import { setTextSelection } from "prosemirror-utils"; -import { Flex, Text } from "rebass"; -export function LinkSettings(props) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.OpenLink = exports.RemoveLink = exports.EditLink = exports.AddLink = exports.LinkSettings = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var toolbutton_1 = require("../components/toolbutton"); +var react_1 = require("react"); +var responsive_1 = require("../../components/responsive"); +var linkpopup_1 = require("../popups/linkpopup"); +var toolbarstore_1 = require("../stores/toolbarstore"); +var moretools_1 = require("../components/moretools"); +var useRefValue_1 = require("../../hooks/useRefValue"); +var prosemirror_1 = require("../utils/prosemirror"); +var prosemirror_utils_1 = require("prosemirror-utils"); +var rebass_1 = require("rebass"); +function LinkSettings(props) { var editor = props.editor; - var isBottom = useToolbarLocation() === "bottom"; + var isBottom = (0, toolbarstore_1.useToolbarLocation)() === "bottom"; if (!editor.isActive("link") || !isBottom) return null; - return (_jsx(MoreTools, __assign({}, props, { autoCloseOnUnmount: true, popupId: "linkSettings", tools: ["openLink", "editLink", "removeLink"] }))); + return ((0, jsx_runtime_1.jsx)(moretools_1.MoreTools, __assign({}, props, { autoCloseOnUnmount: true, popupId: "linkSettings", tools: ["openLink", "editLink", "removeLink"] }))); } -export function AddLink(props) { +exports.LinkSettings = LinkSettings; +function AddLink(props) { var editor = props.editor; var isActive = props.editor.isActive("link"); - var onDone = useCallback(function (href, text) { + var onDone = (0, react_1.useCallback)(function (href, text) { var _a; if (!href) return; @@ -63,21 +67,22 @@ export function AddLink(props) { .run(); }, []); if (isActive) - return _jsx(EditLink, __assign({}, props)); - return (_jsx(LinkTool, __assign({}, props, { onDone: onDone, onClick: function () { + return (0, jsx_runtime_1.jsx)(EditLink, __assign({}, props)); + return ((0, jsx_runtime_1.jsx)(LinkTool, __assign({}, props, { onDone: onDone, onClick: function () { var _a = editor.state.selection, from = _a.from, to = _a.to; var selectedText = editor.state.doc.textBetween(from, to); return { text: selectedText }; } }))); } -export function EditLink(props) { +exports.AddLink = AddLink; +function EditLink(props) { var editor = props.editor, _selectedNode = props.selectedNode; - var selectedNode = useRefValue(_selectedNode || selectionToOffset(editor.state.selection)); - var onDone = useCallback(function (href, text) { + var selectedNode = (0, useRefValue_1.useRefValue)(_selectedNode || (0, prosemirror_1.selectionToOffset)(editor.state.selection)); + var onDone = (0, react_1.useCallback)(function (href, text) { if (!href || !editor.current) return; var _a = selectedNode.current, from = _a.from, node = _a.node, to = _a.to; - var mark = findMark(node, "link"); + var mark = (0, prosemirror_1.findMark)(node, "link"); if (!mark) return; editor.current @@ -87,46 +92,49 @@ export function EditLink(props) { tr.removeMark(from, to, mark.type); tr.addMark(from, to, mark.type.create({ href: href })); tr.insertText(text || node.textContent, from, to); - setTextSelection(tr.mapping.map(from))(tr); + (0, prosemirror_utils_1.setTextSelection)(tr.mapping.map(from))(tr); return true; }) .focus(undefined, { scrollIntoView: true }) .run(); }, []); - return (_jsx(LinkTool, __assign({}, props, { isEditing: true, onDone: onDone, onClick: function () { + return ((0, jsx_runtime_1.jsx)(LinkTool, __assign({}, props, { isEditing: true, onDone: onDone, onClick: function () { var node = selectedNode.current.node; var selectedText = node.textContent; - var mark = findMark(node, "link"); + var mark = (0, prosemirror_1.findMark)(node, "link"); if (!mark) return; return { text: selectedText, href: mark.attrs.href }; } }))); } -export function RemoveLink(props) { +exports.EditLink = EditLink; +function RemoveLink(props) { var editor = props.editor, selectedNode = props.selectedNode; - return (_jsx(ToolButton, __assign({}, props, { toggled: false, onClick: function () { + return ((0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({}, props, { toggled: false, onClick: function () { var _a, _b; if (selectedNode) (_a = editor.current) === null || _a === void 0 ? void 0 : _a.commands.setTextSelection(selectedNode.from); (_b = editor.current) === null || _b === void 0 ? void 0 : _b.chain().focus().unsetLink().run(); } }))); } -export function OpenLink(props) { +exports.RemoveLink = RemoveLink; +function OpenLink(props) { var editor = props.editor, selectedNode = props.selectedNode; var node = (selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.node) || editor.state.selection.$anchor.node(); - var link = selectedNode ? findMark(node, "link") : null; + var link = selectedNode ? (0, prosemirror_1.findMark)(node, "link") : null; if (!link) return null; var href = link === null || link === void 0 ? void 0 : link.attrs.href; - return (_jsxs(Flex, __assign({ sx: { alignItems: "center" } }, { children: [_jsx(Text, __assign({ as: "a", href: href, target: "_blank", variant: "body", sx: { mr: 1 } }, { children: href })), _jsx(ToolButton, __assign({}, props, { toggled: false, onClick: function () { return window.open(href, "_blank"); } }))] }))); + return ((0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ sx: { alignItems: "center" } }, { children: [(0, jsx_runtime_1.jsx)(rebass_1.Text, __assign({ as: "a", href: href, target: "_blank", variant: "body", sx: { mr: 1 } }, { children: href })), (0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({}, props, { toggled: false, onClick: function () { return window.open(href, "_blank"); } }))] }))); } +exports.OpenLink = OpenLink; function LinkTool(props) { var isEditing = props.isEditing, onClick = props.onClick, onDone = props.onDone; - var buttonRef = useRef(null); - var _a = __read(useState(false), 2), isOpen = _a[0], setIsOpen = _a[1]; - var _b = __read(useState(), 2), href = _b[0], setHref = _b[1]; - var _c = __read(useState(), 2), text = _c[0], setText = _c[1]; - return (_jsxs(_Fragment, { children: [_jsx(ToolButton, __assign({}, props, { buttonRef: buttonRef, onClick: function () { + var buttonRef = (0, react_1.useRef)(null); + var _a = __read((0, react_1.useState)(false), 2), isOpen = _a[0], setIsOpen = _a[1]; + var _b = __read((0, react_1.useState)(), 2), href = _b[0], setHref = _b[1]; + var _c = __read((0, react_1.useState)(), 2), text = _c[0], setText = _c[1]; + return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({}, props, { buttonRef: buttonRef, onClick: function () { var result = onClick(); if (!result) return; @@ -134,13 +142,13 @@ function LinkTool(props) { setHref(href); setText(text); setIsOpen(true); - }, toggled: isOpen })), _jsx(ResponsivePresenter, __assign({ mobile: "sheet", desktop: "menu", position: { + }, toggled: isOpen })), (0, jsx_runtime_1.jsx)(responsive_1.ResponsivePresenter, __assign({ mobile: "sheet", desktop: "menu", position: { target: buttonRef.current || undefined, isTargetAbsolute: true, location: "below", align: "center", yOffset: 5, - }, title: isEditing ? "Edit link" : "Insert link", isOpen: isOpen, items: [], onClose: function () { return setIsOpen(false); }, focusOnRender: false }, { children: _jsx(LinkPopup, { href: href, text: text, isEditing: isEditing, onClose: function () { return setIsOpen(false); }, onDone: function (_a) { + }, title: isEditing ? "Edit link" : "Insert link", isOpen: isOpen, items: [], onClose: function () { return setIsOpen(false); }, focusOnRender: false }, { children: (0, jsx_runtime_1.jsx)(linkpopup_1.LinkPopup, { href: href, text: text, isEditing: isEditing, onClose: function () { return setIsOpen(false); }, onDone: function (_a) { var href = _a.href, text = _a.text; onDone(href, text); setIsOpen(false); diff --git a/packages/editor/dist/toolbar/tools/lists.js b/packages/editor/dist/toolbar/tools/lists.js index b57a97006..323963b07 100644 --- a/packages/editor/dist/toolbar/tools/lists.js +++ b/packages/editor/dist/toolbar/tools/lists.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -36,32 +37,37 @@ var __read = (this && this.__read) || function (o, n) { } return ar; }; -import { jsx as _jsx } from "react/jsx-runtime"; -import { Box, Button, Flex } from "rebass"; -import { useCallback, useRef, useState } from "react"; -import { SplitButton } from "../components/split-button"; -import { useToolbarLocation } from "../stores/toolbar-store"; -import { getToolbarElement } from "../utils/dom"; -import { PopupWrapper } from "../../components/popup-presenter"; -import React from "react"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.BulletList = exports.NumberedList = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var rebass_1 = require("rebass"); +var react_1 = require("react"); +var splitbutton_1 = require("../components/splitbutton"); +var toolbarstore_1 = require("../stores/toolbarstore"); +var dom_1 = require("../utils/dom"); +var popuppresenter_1 = require("../../components/popuppresenter"); +var react_2 = __importDefault(require("react")); function _ListTool(props) { var editor = props.editor, onClick = props.onClick, isActive = props.isActive, subTypes = props.subTypes, type = props.type, toolProps = __rest(props, ["editor", "onClick", "isActive", "subTypes", "type"]); - var toolbarLocation = useToolbarLocation(); + var toolbarLocation = (0, toolbarstore_1.useToolbarLocation)(); var isBottom = toolbarLocation === "bottom"; - var _a = __read(useState(false), 2), isOpen = _a[0], setIsOpen = _a[1]; - var buttonRef = useRef(); - return (_jsx(SplitButton, __assign({}, toolProps, { buttonRef: buttonRef, onClick: onClick, toggled: isActive || isOpen, sx: { mr: 0 }, onOpen: function () { return setIsOpen(function (s) { return !s; }); } }, { children: _jsx(PopupWrapper, { isOpen: isOpen, group: "lists", id: toolProps.title, blocking: false, focusOnRender: false, position: { + var _a = __read((0, react_1.useState)(false), 2), isOpen = _a[0], setIsOpen = _a[1]; + var buttonRef = (0, react_1.useRef)(); + return ((0, jsx_runtime_1.jsx)(splitbutton_1.SplitButton, __assign({}, toolProps, { buttonRef: buttonRef, onClick: onClick, toggled: isActive || isOpen, sx: { mr: 0 }, onOpen: function () { return setIsOpen(function (s) { return !s; }); } }, { children: (0, jsx_runtime_1.jsx)(popuppresenter_1.PopupWrapper, { isOpen: isOpen, group: "lists", id: toolProps.title, blocking: false, focusOnRender: false, position: { isTargetAbsolute: true, - target: isBottom ? getToolbarElement() : buttonRef.current || "mouse", + target: isBottom ? (0, dom_1.getToolbarElement)() : buttonRef.current || "mouse", align: "center", location: isBottom ? "top" : "below", yOffset: isBottom ? 10 : 5, - }, onClosed: function () { return setIsOpen(false); }, renderPopup: function () { return (_jsx(Box, __assign({ sx: { + }, onClosed: function () { return setIsOpen(false); }, renderPopup: function () { return ((0, jsx_runtime_1.jsx)(rebass_1.Box, __assign({ sx: { bg: "background", display: "grid", gridTemplateColumns: "1fr 1fr 1fr", p: 1, - } }, { children: subTypes.map(function (item) { return (_jsx(Button, __assign({ variant: "menuitem", sx: { width: 80 }, onClick: function () { + } }, { children: subTypes.map(function (item) { return ((0, jsx_runtime_1.jsx)(rebass_1.Button, __assign({ variant: "menuitem", sx: { width: 80 }, onClick: function () { var _a; var chain = (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus(); if (!chain) @@ -75,15 +81,15 @@ function _ListTool(props) { return chain .updateAttributes(type, { listType: item.type }) .run(); - } }, { children: _jsx(ListThumbnail, { listStyleType: item.type }) }), item.title)); }) }))); } }) }))); + } }, { children: (0, jsx_runtime_1.jsx)(ListThumbnail, { listStyleType: item.type }) }), item.title)); }) }))); } }) }))); } -var ListTool = React.memo(_ListTool, function (prev, next) { +var ListTool = react_2.default.memo(_ListTool, function (prev, next) { return prev.isActive === next.isActive; }); -export function NumberedList(props) { +function NumberedList(props) { var editor = props.editor; - var onClick = useCallback(function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().toggleOrderedList().run(); }, []); - return (_jsx(ListTool, __assign({}, props, { type: "orderedList", isActive: editor.isActive("orderedList"), onClick: onClick, subTypes: [ + var onClick = (0, react_1.useCallback)(function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().toggleOrderedList().run(); }, []); + return ((0, jsx_runtime_1.jsx)(ListTool, __assign({}, props, { type: "orderedList", isActive: editor.isActive("orderedList"), onClick: onClick, 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"] }, @@ -100,30 +106,32 @@ export function NumberedList(props) { { type: "lower-greek", title: "Lower Greek", items: ["α", "β", "γ"] }, ] }))); } -export function BulletList(props) { +exports.NumberedList = NumberedList; +function BulletList(props) { var editor = props.editor; - var onClick = useCallback(function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().toggleOrderedList().run(); }, []); - return (_jsx(ListTool, __assign({}, props, { type: "bulletList", onClick: onClick, isActive: editor.isActive("bulletList"), subTypes: [ + var onClick = (0, react_1.useCallback)(function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().toggleOrderedList().run(); }, []); + return ((0, jsx_runtime_1.jsx)(ListTool, __assign({}, props, { type: "bulletList", onClick: onClick, isActive: editor.isActive("bulletList"), 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"] }, ] }))); } +exports.BulletList = BulletList; function ListThumbnail(props) { var listStyleType = props.listStyleType; - return (_jsx(Flex, __assign({ as: "ul", sx: { + return ((0, jsx_runtime_1.jsx)(rebass_1.Flex, __assign({ as: "ul", sx: { flexDirection: "column", flex: 1, p: 0, listStyleType: listStyleType, - } }, { children: [0, 1, 2].map(function (i) { return (_jsx(Box, __assign({ as: "li", sx: { + } }, { children: [0, 1, 2].map(function (i) { return ((0, jsx_runtime_1.jsx)(rebass_1.Box, __assign({ as: "li", sx: { display: "list-item", color: "text", fontSize: 8, mb: "1px", - } }, { children: _jsx(Flex, __assign({ sx: { + } }, { children: (0, jsx_runtime_1.jsx)(rebass_1.Flex, __assign({ sx: { alignItems: "center", - } }, { children: _jsx(Box, { sx: { + } }, { children: (0, jsx_runtime_1.jsx)(rebass_1.Box, { sx: { width: "100%", flexShrink: 0, height: 4, diff --git a/packages/editor/dist/toolbar/tools/table.js b/packages/editor/dist/toolbar/tools/table.js index fcf345de9..52bd4e6b3 100644 --- a/packages/editor/dist/toolbar/tools/table.js +++ b/packages/editor/dist/toolbar/tools/table.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -25,26 +26,28 @@ var __read = (this && this.__read) || function (o, n) { } return ar; }; -import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; -import { ToolButton } from "../components/tool-button"; -import { useCallback, useMemo, useRef, useState } from "react"; -import { Flex, Text } from "rebass"; -import { ResponsivePresenter } from "../../components/responsive"; -import { moveColumnLeft as moveColumnLeftAction, moveColumnRight as moveColumnRightAction, moveRowDown as moveRowDownAction, moveRowUp as moveRowUpAction, } from "../../extensions/table/actions"; -import { MoreTools } from "../components/more-tools"; -import { menuButtonToTool } from "./utils"; -import { getToolDefinition } from "../tool-definitions"; -import { CellProperties as CellPropertiesPopup } from "../popups/cell-properties"; -import { ColorTool } from "./colors"; -import { Counter } from "../components/counter"; -import { useToolbarLocation } from "../stores/toolbar-store"; -import { showPopup } from "../../components/popup-presenter"; -export function TableSettings(props) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.DeleteTable = exports.DeleteRow = exports.MoveRowDown = exports.MoveRowUp = exports.InsertRowBelow = exports.InsertRowAbove = exports.MergeCells = exports.SplitCells = exports.DeleteColumn = exports.MoveColumnRight = exports.MoveColumnLeft = exports.InsertColumnRight = exports.InsertColumnLeft = exports.CellBorderWidth = exports.CellBorderColor = exports.CellTextColor = exports.CellBackgroundColor = exports.CellProperties = exports.TableProperties = exports.ColumnProperties = exports.RowProperties = exports.TableSettings = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var toolbutton_1 = require("../components/toolbutton"); +var react_1 = require("react"); +var rebass_1 = require("rebass"); +var responsive_1 = require("../../components/responsive"); +var actions_1 = require("../../extensions/table/actions"); +var moretools_1 = require("../components/moretools"); +var utils_1 = require("./utils"); +var tooldefinitions_1 = require("../tooldefinitions"); +var cellproperties_1 = require("../popups/cellproperties"); +var colors_1 = require("./colors"); +var counter_1 = require("../components/counter"); +var toolbarstore_1 = require("../stores/toolbarstore"); +var popuppresenter_1 = require("../../components/popuppresenter"); +function TableSettings(props) { var editor = props.editor; - var isBottom = useToolbarLocation() === "bottom"; + var isBottom = (0, toolbarstore_1.useToolbarLocation)() === "bottom"; if (!editor.isActive("table") || !isBottom) return null; - return (_jsx(MoreTools, __assign({}, props, { autoCloseOnUnmount: true, popupId: "tableSettings", tools: [ + return ((0, jsx_runtime_1.jsx)(moretools_1.MoreTools, __assign({}, props, { autoCloseOnUnmount: true, popupId: "tableSettings", tools: [ "insertColumnLeft", "insertColumnRight", "insertRowAbove", @@ -57,47 +60,50 @@ export function TableSettings(props) { "deleteTable", ] }))); } -export function RowProperties(props) { +exports.TableSettings = TableSettings; +function RowProperties(props) { var editor = props.editor; - var buttonRef = useRef(); - var _a = __read(useState(false), 2), isMenuOpen = _a[0], setIsMenuOpen = _a[1]; - var items = useMemo(function () { return [ + var buttonRef = (0, react_1.useRef)(); + var _a = __read((0, react_1.useState)(false), 2), isMenuOpen = _a[0], setIsMenuOpen = _a[1]; + var items = (0, react_1.useMemo)(function () { return [ insertRowAbove(editor), insertRowBelow(editor), moveRowUp(editor), moveRowDown(editor), deleteRow(editor), ]; }, []); - return (_jsxs(_Fragment, { children: [_jsx(ToolButton, __assign({}, props, { buttonRef: buttonRef, toggled: isMenuOpen, onClick: function () { return setIsMenuOpen(true); } })), _jsx(ResponsivePresenter, { title: "Row properties", mobile: "sheet", desktop: "menu", isOpen: isMenuOpen, onClose: function () { return setIsMenuOpen(false); }, position: { + return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({}, props, { buttonRef: buttonRef, toggled: isMenuOpen, onClick: function () { return setIsMenuOpen(true); } })), (0, jsx_runtime_1.jsx)(responsive_1.ResponsivePresenter, { title: "Row properties", mobile: "sheet", desktop: "menu", isOpen: isMenuOpen, onClose: function () { return setIsMenuOpen(false); }, position: { target: buttonRef.current, isTargetAbsolute: true, location: "below", yOffset: 5, }, items: items })] })); } -export function ColumnProperties(props) { +exports.RowProperties = RowProperties; +function ColumnProperties(props) { var editor = props.editor; - var buttonRef = useRef(); - var _a = __read(useState(false), 2), isMenuOpen = _a[0], setIsMenuOpen = _a[1]; - var items = useMemo(function () { return [ + var buttonRef = (0, react_1.useRef)(); + var _a = __read((0, react_1.useState)(false), 2), isMenuOpen = _a[0], setIsMenuOpen = _a[1]; + var items = (0, react_1.useMemo)(function () { return [ insertColumnLeft(editor), insertColumnRight(editor), moveColumnLeft(editor), moveColumnRight(editor), deleteColumn(editor), ]; }, []); - return (_jsxs(_Fragment, { children: [_jsx(ToolButton, __assign({}, props, { buttonRef: buttonRef, toggled: isMenuOpen, onClick: function () { return setIsMenuOpen(true); } })), _jsx(ResponsivePresenter, { title: "Column properties", mobile: "sheet", desktop: "menu", isOpen: isMenuOpen, onClose: function () { return setIsMenuOpen(false); }, position: { + return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({}, props, { buttonRef: buttonRef, toggled: isMenuOpen, onClick: function () { return setIsMenuOpen(true); } })), (0, jsx_runtime_1.jsx)(responsive_1.ResponsivePresenter, { title: "Column properties", mobile: "sheet", desktop: "menu", isOpen: isMenuOpen, onClose: function () { return setIsMenuOpen(false); }, position: { target: buttonRef.current, isTargetAbsolute: true, location: "below", yOffset: 5, }, items: items })] })); } -export function TableProperties(props) { +exports.ColumnProperties = ColumnProperties; +function TableProperties(props) { var editor = props.editor; - var buttonRef = useRef(); - var _a = __read(useState(false), 2), isMenuOpen = _a[0], setIsMenuOpen = _a[1]; - var items = useMemo(function () { return [ + var buttonRef = (0, react_1.useRef)(); + var _a = __read((0, react_1.useState)(false), 2), isMenuOpen = _a[0], setIsMenuOpen = _a[1]; + var items = (0, react_1.useMemo)(function () { return [ insertColumnLeft(editor), insertColumnRight(editor), moveColumnLeft(editor), @@ -110,15 +116,16 @@ export function TableProperties(props) { { type: "separator", key: "tableSeperator" }, deleteTable(editor), ]; }, []); - return (_jsxs(_Fragment, { children: [_jsx(ToolButton, __assign({}, props, { buttonRef: buttonRef, toggled: isMenuOpen, onClick: function () { return setIsMenuOpen(true); } })), _jsx(ResponsivePresenter, { title: "Table properties", mobile: "sheet", desktop: "menu", isOpen: isMenuOpen, onClose: function () { return setIsMenuOpen(false); }, position: { + return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({}, props, { buttonRef: buttonRef, toggled: isMenuOpen, onClick: function () { return setIsMenuOpen(true); } })), (0, jsx_runtime_1.jsx)(responsive_1.ResponsivePresenter, { title: "Table properties", mobile: "sheet", desktop: "menu", isOpen: isMenuOpen, onClose: function () { return setIsMenuOpen(false); }, position: { target: buttonRef.current, isTargetAbsolute: true, location: "below", yOffset: 5, }, items: items })] })); } -export function CellProperties(props) { - return (_jsx(_Fragment, { children: _jsx(MoreTools, __assign({}, props, { popupId: "cellProperties", tools: [ +exports.TableProperties = TableProperties; +function CellProperties(props) { + return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(moretools_1.MoreTools, __assign({}, props, { popupId: "cellProperties", tools: [ "mergeCells", "splitCells", "cellBackgroundColor", @@ -127,32 +134,36 @@ export function CellProperties(props) { "cellBorderWidth", ] })) })); } -export function CellBackgroundColor(props) { +exports.CellProperties = CellProperties; +function CellBackgroundColor(props) { var editor = props.editor; - return (_jsx(ColorTool, __assign({}, props, { cacheKey: "cellBackgroundColor", getActiveColor: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.getAttributes("tableCell").backgroundColor; }, title: "Cell background color", onColorChange: function (color) { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().setCellAttribute("backgroundColor", color).run(); } }))); + return ((0, jsx_runtime_1.jsx)(colors_1.ColorTool, __assign({}, props, { cacheKey: "cellBackgroundColor", getActiveColor: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.getAttributes("tableCell").backgroundColor; }, title: "Cell background color", onColorChange: function (color) { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().setCellAttribute("backgroundColor", color).run(); } }))); } -export function CellTextColor(props) { +exports.CellBackgroundColor = CellBackgroundColor; +function CellTextColor(props) { var editor = props.editor; - return (_jsx(ColorTool, __assign({}, props, { cacheKey: "cellTextColor", getActiveColor: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.getAttributes("tableCell").color; }, title: "Cell text color", onColorChange: function (color) { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().setCellAttribute("color", color).run(); } }))); + return ((0, jsx_runtime_1.jsx)(colors_1.ColorTool, __assign({}, props, { cacheKey: "cellTextColor", getActiveColor: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.getAttributes("tableCell").color; }, title: "Cell text color", onColorChange: function (color) { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().setCellAttribute("color", color).run(); } }))); } -export function CellBorderColor(props) { +exports.CellTextColor = CellTextColor; +function CellBorderColor(props) { var editor = props.editor; - return (_jsx(ColorTool, __assign({}, props, { cacheKey: "cellBorderColor", getActiveColor: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.getAttributes("tableCell").borderColor; }, title: "Cell border color", onColorChange: function (color) { + return ((0, jsx_runtime_1.jsx)(colors_1.ColorTool, __assign({}, props, { cacheKey: "cellBorderColor", getActiveColor: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.getAttributes("tableCell").borderColor; }, title: "Cell border color", onColorChange: function (color) { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().setCellAttribute("borderColor", color).run(); } }))); } -export function CellBorderWidth(props) { +exports.CellBorderColor = CellBorderColor; +function CellBorderWidth(props) { var editor = props.editor; var _borderWidth = editor.getAttributes("tableCell").borderWidth; var borderWidth = _borderWidth ? _borderWidth : 1; - var decreaseBorderWidth = useCallback(function () { + var decreaseBorderWidth = (0, react_1.useCallback)(function () { return Math.max(1, borderWidth - 1); }, [borderWidth]); - var increaseBorderWidth = useCallback(function () { + var increaseBorderWidth = (0, react_1.useCallback)(function () { return Math.min(10, borderWidth + 1); }, [borderWidth]); - return (_jsxs(Flex, __assign({ sx: { justifyContent: "center", alignItems: "center" } }, { children: [_jsx(Text, __assign({ variant: "subBody", sx: { mx: 1 } }, { children: "Border width:" })), _jsx(Counter, { title: "cell border width", onDecrease: function () { + return ((0, jsx_runtime_1.jsxs)(rebass_1.Flex, __assign({ sx: { justifyContent: "center", alignItems: "center" } }, { children: [(0, jsx_runtime_1.jsx)(rebass_1.Text, __assign({ variant: "subBody", sx: { mx: 1 } }, { children: "Border width:" })), (0, jsx_runtime_1.jsx)(counter_1.Counter, { title: "cell border width", onDecrease: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.commands.setCellAttribute("borderWidth", decreaseBorderWidth()); }, onIncrease: function () { @@ -160,35 +171,36 @@ export function CellBorderWidth(props) { return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.commands.setCellAttribute("borderWidth", increaseBorderWidth()); }, onReset: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.commands.setCellAttribute("borderWidth", 1); }, value: borderWidth + "px" })] }))); } -var insertColumnLeft = function (editor) { return (__assign(__assign({}, getToolDefinition("insertColumnLeft")), { key: "addColumnLeft", type: "button", onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().addColumnBefore().run(); } })); }; -var insertColumnRight = function (editor) { return (__assign(__assign({}, getToolDefinition("insertColumnRight")), { key: "addColumnRight", type: "button", title: "Add column right", onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().addColumnAfter().run(); }, icon: "insertColumnRight" })); }; -var moveColumnLeft = function (editor) { return (__assign(__assign({}, getToolDefinition("moveColumnLeft")), { key: "moveColumnLeft", type: "button", onClick: function () { return moveColumnLeftAction(editor); } })); }; -var moveColumnRight = function (editor) { return (__assign(__assign({}, getToolDefinition("moveColumnRight")), { key: "moveColumnRight", type: "button", onClick: function () { return moveColumnRightAction(editor); } })); }; -var deleteColumn = function (editor) { return (__assign(__assign({}, getToolDefinition("deleteColumn")), { key: "deleteColumn", type: "button", onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().deleteColumn().run(); } })); }; -var splitCells = function (editor) { return (__assign(__assign({}, getToolDefinition("splitCells")), { key: "splitCells", type: "button", onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().splitCell().run(); } })); }; -var mergeCells = function (editor) { return (__assign(__assign({}, getToolDefinition("mergeCells")), { key: "mergeCells", type: "button", onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().mergeCells().run(); } })); }; -var insertRowAbove = function (editor) { return (__assign(__assign({}, getToolDefinition("insertRowAbove")), { key: "insertRowAbove", type: "button", onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().addRowBefore().run(); } })); }; -var insertRowBelow = function (editor) { return (__assign(__assign({}, getToolDefinition("insertRowBelow")), { key: "insertRowBelow", type: "button", onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().addRowAfter().run(); } })); }; -var moveRowUp = function (editor) { return (__assign(__assign({}, getToolDefinition("moveRowUp")), { key: "moveRowUp", type: "button", onClick: function () { return moveRowUpAction(editor); } })); }; -var moveRowDown = function (editor) { return (__assign(__assign({}, getToolDefinition("moveRowDown")), { key: "moveRowDown", type: "button", onClick: function () { return moveRowDownAction(editor); } })); }; -var deleteRow = function (editor) { return (__assign(__assign({}, getToolDefinition("deleteRow")), { key: "deleteRow", type: "button", onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().deleteRow().run(); } })); }; -var deleteTable = function (editor) { return (__assign(__assign({}, getToolDefinition("deleteTable")), { key: "deleteTable", type: "button", onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().deleteTable().run(); } })); }; -var cellProperties = function (editor) { return (__assign(__assign({}, getToolDefinition("cellProperties")), { key: "cellProperties", type: "button", onClick: function () { - showPopup({ +exports.CellBorderWidth = CellBorderWidth; +var insertColumnLeft = function (editor) { return (__assign(__assign({}, (0, tooldefinitions_1.getToolDefinition)("insertColumnLeft")), { key: "addColumnLeft", type: "button", onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().addColumnBefore().run(); } })); }; +var insertColumnRight = function (editor) { return (__assign(__assign({}, (0, tooldefinitions_1.getToolDefinition)("insertColumnRight")), { key: "addColumnRight", type: "button", title: "Add column right", onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().addColumnAfter().run(); }, icon: "insertColumnRight" })); }; +var moveColumnLeft = function (editor) { return (__assign(__assign({}, (0, tooldefinitions_1.getToolDefinition)("moveColumnLeft")), { key: "moveColumnLeft", type: "button", onClick: function () { return (0, actions_1.moveColumnLeft)(editor); } })); }; +var moveColumnRight = function (editor) { return (__assign(__assign({}, (0, tooldefinitions_1.getToolDefinition)("moveColumnRight")), { key: "moveColumnRight", type: "button", onClick: function () { return (0, actions_1.moveColumnRight)(editor); } })); }; +var deleteColumn = function (editor) { return (__assign(__assign({}, (0, tooldefinitions_1.getToolDefinition)("deleteColumn")), { key: "deleteColumn", type: "button", onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().deleteColumn().run(); } })); }; +var splitCells = function (editor) { return (__assign(__assign({}, (0, tooldefinitions_1.getToolDefinition)("splitCells")), { key: "splitCells", type: "button", onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().splitCell().run(); } })); }; +var mergeCells = function (editor) { return (__assign(__assign({}, (0, tooldefinitions_1.getToolDefinition)("mergeCells")), { key: "mergeCells", type: "button", onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().mergeCells().run(); } })); }; +var insertRowAbove = function (editor) { return (__assign(__assign({}, (0, tooldefinitions_1.getToolDefinition)("insertRowAbove")), { key: "insertRowAbove", type: "button", onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().addRowBefore().run(); } })); }; +var insertRowBelow = function (editor) { return (__assign(__assign({}, (0, tooldefinitions_1.getToolDefinition)("insertRowBelow")), { key: "insertRowBelow", type: "button", onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().addRowAfter().run(); } })); }; +var moveRowUp = function (editor) { return (__assign(__assign({}, (0, tooldefinitions_1.getToolDefinition)("moveRowUp")), { key: "moveRowUp", type: "button", onClick: function () { return (0, actions_1.moveRowUp)(editor); } })); }; +var moveRowDown = function (editor) { return (__assign(__assign({}, (0, tooldefinitions_1.getToolDefinition)("moveRowDown")), { key: "moveRowDown", type: "button", onClick: function () { return (0, actions_1.moveRowDown)(editor); } })); }; +var deleteRow = function (editor) { return (__assign(__assign({}, (0, tooldefinitions_1.getToolDefinition)("deleteRow")), { key: "deleteRow", type: "button", onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().deleteRow().run(); } })); }; +var deleteTable = function (editor) { return (__assign(__assign({}, (0, tooldefinitions_1.getToolDefinition)("deleteTable")), { key: "deleteTable", type: "button", onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().deleteTable().run(); } })); }; +var cellProperties = function (editor) { return (__assign(__assign({}, (0, tooldefinitions_1.getToolDefinition)("cellProperties")), { key: "cellProperties", type: "button", onClick: function () { + (0, popuppresenter_1.showPopup)({ theme: editor.storage.theme, - popup: function (hide) { return _jsx(CellPropertiesPopup, { onClose: hide, editor: editor }); }, + popup: function (hide) { return (0, jsx_runtime_1.jsx)(cellproperties_1.CellProperties, { onClose: hide, editor: editor }); }, }); } })); }; -export var InsertColumnLeft = menuButtonToTool(insertColumnLeft); -export var InsertColumnRight = menuButtonToTool(insertColumnRight); -export var MoveColumnLeft = menuButtonToTool(moveColumnLeft); -export var MoveColumnRight = menuButtonToTool(moveColumnRight); -export var DeleteColumn = menuButtonToTool(deleteColumn); -export var SplitCells = menuButtonToTool(splitCells); -export var MergeCells = menuButtonToTool(mergeCells); -export var InsertRowAbove = menuButtonToTool(insertRowAbove); -export var InsertRowBelow = menuButtonToTool(insertRowBelow); -export var MoveRowUp = menuButtonToTool(moveRowUp); -export var MoveRowDown = menuButtonToTool(moveRowDown); -export var DeleteRow = menuButtonToTool(deleteRow); -export var DeleteTable = menuButtonToTool(deleteTable); +exports.InsertColumnLeft = (0, utils_1.menuButtonToTool)(insertColumnLeft); +exports.InsertColumnRight = (0, utils_1.menuButtonToTool)(insertColumnRight); +exports.MoveColumnLeft = (0, utils_1.menuButtonToTool)(moveColumnLeft); +exports.MoveColumnRight = (0, utils_1.menuButtonToTool)(moveColumnRight); +exports.DeleteColumn = (0, utils_1.menuButtonToTool)(deleteColumn); +exports.SplitCells = (0, utils_1.menuButtonToTool)(splitCells); +exports.MergeCells = (0, utils_1.menuButtonToTool)(mergeCells); +exports.InsertRowAbove = (0, utils_1.menuButtonToTool)(insertRowAbove); +exports.InsertRowBelow = (0, utils_1.menuButtonToTool)(insertRowBelow); +exports.MoveRowUp = (0, utils_1.menuButtonToTool)(moveRowUp); +exports.MoveRowDown = (0, utils_1.menuButtonToTool)(moveRowDown); +exports.DeleteRow = (0, utils_1.menuButtonToTool)(deleteRow); +exports.DeleteTable = (0, utils_1.menuButtonToTool)(deleteTable); diff --git a/packages/editor/dist/toolbar/tools/textdirection.js b/packages/editor/dist/toolbar/tools/textdirection.js index 1b773f019..7093cb539 100644 --- a/packages/editor/dist/toolbar/tools/textdirection.js +++ b/packages/editor/dist/toolbar/tools/textdirection.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -20,15 +21,19 @@ var __rest = (this && this.__rest) || function (s, e) { } return t; }; -import { jsx as _jsx } from "react/jsx-runtime"; -import { ToolButton } from "../components/tool-button"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.LeftToRight = exports.RightToLeft = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var toolbutton_1 = require("../components/toolbutton"); function TextDirectionTool(props) { var editor = props.editor, direction = props.direction, toolProps = __rest(props, ["editor", "direction"]); - return (_jsx(ToolButton, __assign({}, toolProps, { onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().setTextDirection(direction).run(); }, toggled: editor.isActive({ textDirection: direction }) }))); + return ((0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({}, toolProps, { onClick: function () { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().setTextDirection(direction).run(); }, toggled: editor.isActive({ textDirection: direction }) }))); } -export function RightToLeft(props) { - return _jsx(TextDirectionTool, __assign({ direction: "rtl" }, props)); +function RightToLeft(props) { + return (0, jsx_runtime_1.jsx)(TextDirectionTool, __assign({ direction: "rtl" }, props)); } -export function LeftToRight(props) { - return _jsx(TextDirectionTool, __assign({ direction: "ltr" }, props)); +exports.RightToLeft = RightToLeft; +function LeftToRight(props) { + return (0, jsx_runtime_1.jsx)(TextDirectionTool, __assign({ direction: "ltr" }, props)); } +exports.LeftToRight = LeftToRight; diff --git a/packages/editor/dist/toolbar/tools/utils.js b/packages/editor/dist/toolbar/tools/utils.js index 3e649ff2b..137d5f033 100644 --- a/packages/editor/dist/toolbar/tools/utils.js +++ b/packages/editor/dist/toolbar/tools/utils.js @@ -1,3 +1,4 @@ +"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { @@ -9,11 +10,14 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; -import { jsx as _jsx } from "react/jsx-runtime"; -import { ToolButton } from "../components/tool-button"; -export function menuButtonToTool(constructItem) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.menuButtonToTool = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var toolbutton_1 = require("../components/toolbutton"); +function menuButtonToTool(constructItem) { return function (props) { var item = constructItem(props.editor); - return (_jsx(ToolButton, __assign({}, props, { icon: item.icon || props.icon, toggled: item.isChecked || false, title: item.title, onClick: item.onClick }))); + return ((0, jsx_runtime_1.jsx)(toolbutton_1.ToolButton, __assign({}, props, { icon: item.icon || props.icon, toggled: item.isChecked || false, title: item.title, onClick: item.onClick }))); }; } +exports.menuButtonToTool = menuButtonToTool; diff --git a/packages/editor/dist/toolbar/types.js b/packages/editor/dist/toolbar/types.js index cb0ff5c3b..c8ad2e549 100644 --- a/packages/editor/dist/toolbar/types.js +++ b/packages/editor/dist/toolbar/types.js @@ -1 +1,2 @@ -export {}; +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); diff --git a/packages/editor/dist/toolbar/utils/dom.js b/packages/editor/dist/toolbar/utils/dom.js index 729a9f754..5256520c0 100644 --- a/packages/editor/dist/toolbar/utils/dom.js +++ b/packages/editor/dist/toolbar/utils/dom.js @@ -1,14 +1,21 @@ -export function getToolbarElement() { +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.getEditorDOM = exports.getEditorContainer = exports.getPopupContainer = exports.getToolbarElement = void 0; +function getToolbarElement() { return (document.querySelector(".editor-toolbar") || undefined); } -export function getPopupContainer() { +exports.getToolbarElement = getToolbarElement; +function getPopupContainer() { return (document.getElementById("popup-container") || undefined); } -export function getEditorContainer() { +exports.getPopupContainer = getPopupContainer; +function getEditorContainer() { return (document.querySelector(".editor") || getPopupContainer()); } -export function getEditorDOM() { +exports.getEditorContainer = getEditorContainer; +function getEditorDOM() { return (document.querySelector(".ProseMirror") || getEditorContainer()); // ProseMirror } +exports.getEditorDOM = getEditorDOM; diff --git a/packages/editor/dist/toolbar/utils/prosemirror.js b/packages/editor/dist/toolbar/utils/prosemirror.js index da12ccabb..5ef9ceda1 100644 --- a/packages/editor/dist/toolbar/utils/prosemirror.js +++ b/packages/editor/dist/toolbar/utils/prosemirror.js @@ -1,31 +1,38 @@ -import { findParentNode, } from "@tiptap/core"; -export function findSelectedDOMNode(editor, types) { +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.selectionToOffset = exports.findMark = exports.findSelectedNode = exports.findSelectedDOMNode = void 0; +var core_1 = require("@tiptap/core"); +function findSelectedDOMNode(editor, types) { var _a; var $anchor = editor.state.selection.$anchor; var selectedNode = editor.state.doc.nodeAt($anchor.pos); var pos = types.includes((selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.type.name) || "") ? $anchor.pos - : (_a = findParentNode(function (node) { return types.includes(node.type.name); })(editor.state.selection)) === null || _a === void 0 ? void 0 : _a.pos; + : (_a = (0, core_1.findParentNode)(function (node) { return types.includes(node.type.name); })(editor.state.selection)) === null || _a === void 0 ? void 0 : _a.pos; if (!pos) return null; return editor.view.nodeDOM(pos) || null; } -export function findSelectedNode(editor, type) { +exports.findSelectedDOMNode = findSelectedDOMNode; +function findSelectedNode(editor, type) { var _a; var $anchor = editor.state.selection.$anchor; var selectedNode = editor.state.doc.nodeAt($anchor.pos); var pos = (selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.type.name) === type ? $anchor.pos - : (_a = findParentNode(function (node) { return node.type.name === type; })(editor.state.selection)) === null || _a === void 0 ? void 0 : _a.pos; + : (_a = (0, core_1.findParentNode)(function (node) { return node.type.name === type; })(editor.state.selection)) === null || _a === void 0 ? void 0 : _a.pos; if (!pos) return null; return editor.state.doc.nodeAt(pos); } -export function findMark(node, type) { +exports.findSelectedNode = findSelectedNode; +function findMark(node, type) { var mark = node.marks.find(function (m) { return m.type.name === type; }); return mark; } -export function selectionToOffset(selection) { +exports.findMark = findMark; +function selectionToOffset(selection) { var $from = selection.$from, from = selection.from; return { node: $from.node(), from: from, to: from + $from.node().nodeSize }; } +exports.selectionToOffset = selectionToOffset; diff --git a/packages/editor/dist/types.js b/packages/editor/dist/types.js index cb0ff5c3b..c8ad2e549 100644 --- a/packages/editor/dist/types.js +++ b/packages/editor/dist/types.js @@ -1 +1,2 @@ -export {}; +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); diff --git a/packages/editor/dist/utils/config.js b/packages/editor/dist/utils/config.js index e1b491284..96965211d 100644 --- a/packages/editor/dist/utils/config.js +++ b/packages/editor/dist/utils/config.js @@ -1,3 +1,6 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.config = void 0; function set(key, value) { if (!value) return window.localStorage.removeItem(key); @@ -9,7 +12,7 @@ function get(key, def) { return def; return tryParse(value); } -export var config = { set: set, get: get }; +exports.config = { set: set, get: get }; function tryParse(val) { if (val === "undefined" || val === "null") return; diff --git a/packages/editor/dist/utils/debounce.js b/packages/editor/dist/utils/debounce.js index a2e0f917e..6b70504f4 100644 --- a/packages/editor/dist/utils/debounce.js +++ b/packages/editor/dist/utils/debounce.js @@ -1,3 +1,4 @@ +"use strict"; var __read = (this && this.__read) || function (o, n) { var m = typeof Symbol === "function" && o[Symbol.iterator]; if (!m) return o; @@ -23,7 +24,9 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) { } return to.concat(ar || Array.prototype.slice.call(from)); }; -export function debounce(func, waitFor) { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.debounce = void 0; +function debounce(func, waitFor) { var timeout; var debounced = function () { var args = []; @@ -36,3 +39,4 @@ export function debounce(func, waitFor) { }; return debounced; } +exports.debounce = debounce; diff --git a/packages/editor/dist/utils/position.js b/packages/editor/dist/utils/position.js index fb3f7ae25..666828b87 100644 --- a/packages/editor/dist/utils/position.js +++ b/packages/editor/dist/utils/position.js @@ -1,3 +1,6 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.getElementPosition = exports.getPosition = void 0; 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; @@ -6,7 +9,7 @@ window.addEventListener("mousemove", function (e) { mousePosition.actualX = actualX; mousePosition.actualY = actualY; }); -export function getPosition(element, options) { +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 @@ -64,6 +67,7 @@ export function getPosition(element, options) { position.left += xOffset; return position; } +exports.getPosition = getPosition; function getMousePosition(e) { var posx = 0; var posy = 0; @@ -88,7 +92,7 @@ function getMousePosition(e) { actualX: posx, }; } -export function getElementPosition(element, absolute) { +function getElementPosition(element, absolute) { var rect = element.getBoundingClientRect(); var position = { x: element.offsetLeft, @@ -104,3 +108,4 @@ export function getElementPosition(element, absolute) { } return position; } +exports.getElementPosition = getElementPosition; diff --git a/packages/editor/package-lock.json b/packages/editor/package-lock.json index 50064dab7..8b96fb162 100644 --- a/packages/editor/package-lock.json +++ b/packages/editor/package-lock.json @@ -3212,7 +3212,7 @@ }, "node_modules/@notesnook/theme": { "version": "0.0.1", - "resolved": "git+ssh://git@github.com/streetwriters/themeprovider.git#c3370d1a0d1168f2b93504e447e1dd394acbf2b7", + "resolved": "git+ssh://git@github.com/streetwriters/themeprovider.git#295391850cdbdd5f1a388254eab4ec21ccd9ce15", "dependencies": { "@rebass/forms": "^4.0.6", "@types/rebass": "^4.0.10", @@ -27905,7 +27905,7 @@ } }, "@notesnook/theme": { - "version": "git+ssh://git@github.com/streetwriters/themeprovider.git#c3370d1a0d1168f2b93504e447e1dd394acbf2b7", + "version": "git+ssh://git@github.com/streetwriters/themeprovider.git#295391850cdbdd5f1a388254eab4ec21ccd9ce15", "from": "@notesnook/theme@github:streetwriters/themeprovider", "requires": { "@rebass/forms": "^4.0.6", diff --git a/packages/editor/tsconfig.json b/packages/editor/tsconfig.json index 8551ae6bf..fe8af7956 100644 --- a/packages/editor/tsconfig.json +++ b/packages/editor/tsconfig.json @@ -28,7 +28,7 @@ // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ /* Modules */ - "module": "ESNext" /* Specify what module code is generated. */, + "module": "CommonJS" /* 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. */