chore: export as commonjs

This commit is contained in:
thecodrr
2022-06-30 18:40:20 +05:00
parent 84d2720762
commit e04aac2624
146 changed files with 2649 additions and 1755 deletions

View File

@@ -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));
}
})] })));
}

View File

@@ -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);

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -1 +1,2 @@
export {};
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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");

View File

@@ -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;

View File

@@ -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)

View File

@@ -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);

View File

@@ -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: {

View File

@@ -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;

View File

@@ -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 };
}

View File

@@ -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<CaretPosition>();
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)); }) }))] })) })));
}

View File

@@ -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).

View File

@@ -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);

View File

@@ -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) {

View File

@@ -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 });
},
});

View File

@@ -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; } });

View File

@@ -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)];
},
});

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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);

View File

@@ -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"],

View File

@@ -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;

View File

@@ -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;

View File

@@ -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];

View File

@@ -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);

View File

@@ -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;

View File

@@ -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);

View File

@@ -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);
} });
},
});

View File

@@ -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; } });

View File

@@ -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];
},

View File

@@ -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];
},
});

View File

@@ -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;

View File

@@ -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;
};
}

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;
};
}

View File

@@ -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;

View File

@@ -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);

View File

@@ -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);

View File

@@ -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;

View File

@@ -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);

View File

@@ -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;

View File

@@ -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;

View File

@@ -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("(?<!\\\\)\\$(.+)(?<!\\\\)\\$");
}
catch (e) {
return REGEX_INLINE_MATH_DOLLARS;
return exports.REGEX_INLINE_MATH_DOLLARS;
}
})();
// ---- Block Input Rules ------------------------------- //
// simple inputrule for block math
export var REGEX_BLOCK_MATH_DOLLARS = /\$\$\$\s+$/; //new RegExp("\$\$\s+$", "i");
exports.REGEX_BLOCK_MATH_DOLLARS = /\$\$\$\s+$/; //new RegExp("\$\$\s+$", "i");
////////////////////////////////////////////////////////////
export function makeInlineMathInputRule(pattern, nodeType, getAttrs) {
return new InputRule(pattern, function (state, match, start, end) {
function makeInlineMathInputRule(pattern, nodeType, getAttrs) {
return new prosemirror_inputrules_1.InputRule(pattern, function (state, match, start, end) {
var $start = state.doc.resolve(start);
var index = $start.index();
var $end = state.doc.resolve(end);
@@ -39,8 +42,9 @@ export function makeInlineMathInputRule(pattern, nodeType, getAttrs) {
return state.tr.replaceRangeWith(start, end, nodeType.create(attrs, nodeType.schema.text(match[1])));
});
}
export function makeBlockMathInputRule(pattern, nodeType, getAttrs) {
return new InputRule(pattern, function (state, match, start, end) {
exports.makeInlineMathInputRule = makeInlineMathInputRule;
function makeBlockMathInputRule(pattern, nodeType, getAttrs) {
return new prosemirror_inputrules_1.InputRule(pattern, function (state, match, start, end) {
var $start = state.doc.resolve(start);
var attrs = getAttrs instanceof Function ? getAttrs(match) : getAttrs;
if (!$start
@@ -50,6 +54,7 @@ export function makeBlockMathInputRule(pattern, nodeType, getAttrs) {
var tr = state.tr
.delete(start, end)
.setBlockType(start, start, nodeType, attrs);
return tr.setSelection(NodeSelection.create(tr.doc, tr.mapping.map($start.pos - 1)));
return tr.setSelection(prosemirror_state_1.NodeSelection.create(tr.doc, tr.mapping.map($start.pos - 1)));
});
}
exports.makeBlockMathInputRule = makeBlockMathInputRule;

View File

@@ -1,3 +1,4 @@
"use strict";
/**
* Note that for some of the `ParseRule`s defined below,
* we define a `getAttrs` function, which, other than
@@ -19,7 +20,9 @@ var __values = (this && this.__values) || function(o) {
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
import { Fragment, } from "prosemirror-model";
Object.defineProperty(exports, "__esModule", { value: true });
exports.defaultBlockMathParseRules = exports.defaultInlineMathParseRules = exports.wikipediaInlineMathParseRule = exports.wikipediaBlockMathParseRule = void 0;
var prosemirror_model_1 = require("prosemirror-model");
////////////////////////////////////////////////////////////
function getFirstMatch(root, rules) {
var e_1, _a;
@@ -42,7 +45,7 @@ function getFirstMatch(root, rules) {
return false;
}
function makeTextFragment(text, schema) {
return Fragment.from(schema.text(text));
return prosemirror_model_1.Fragment.from(schema.text(text));
}
////////////////////////////////////////////////////////////
// -- Wikipedia ----------------------------------------- //
@@ -115,7 +118,7 @@ function matchWikipedia(root) {
* </span></dd></dl>
* ```
*/
export var wikipediaBlockMathParseRule = {
exports.wikipediaBlockMathParseRule = {
tag: "dl",
getAttrs: function (p) {
var dl = p;
@@ -165,7 +168,7 @@ export var wikipediaBlockMathParseRule = {
* </span>
* ```
*/
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,
];

View File

@@ -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);
},
},
});

View File

@@ -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,

View File

@@ -1 +1,2 @@
export {};
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });

View File

@@ -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$$"); },

View File

@@ -1 +1,2 @@
export {};
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });

View File

@@ -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;

View File

@@ -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: {

View File

@@ -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;

View File

@@ -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);

View File

@@ -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"));

View File

@@ -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;

View File

@@ -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);

View File

@@ -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 };

View File

@@ -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;

View File

@@ -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);

View File

@@ -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];
},
});

View File

@@ -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);

View File

@@ -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;

View File

@@ -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;

View File

@@ -1 +1,2 @@
export {};
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });

View File

@@ -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);

View File

@@ -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: {

View File

@@ -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 };

View File

@@ -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" }))] })));
}

View File

@@ -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);

View File

@@ -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);

View File

@@ -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;

View File

@@ -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") });

View File

@@ -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; });

View File

@@ -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);

View File

@@ -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) {

View File

@@ -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;

View File

@@ -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);

View File

@@ -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"));

View File

@@ -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;

View File

@@ -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"],

View File

@@ -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;

View File

@@ -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);

View File

@@ -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;
});

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;
});

Some files were not shown because too many files have changed in this diff Show More