mirror of
https://github.com/streetwriters/notesnook.git
synced 2026-02-24 04:00:59 +01:00
chore: export as commonjs
This commit is contained in:
104
packages/editor/dist/components/actionsheet/index.js
vendored
104
packages/editor/dist/components/actionsheet/index.js
vendored
@@ -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));
|
||||
}
|
||||
})] })));
|
||||
}
|
||||
|
||||
21
packages/editor/dist/components/button.js
vendored
21
packages/editor/dist/components/button.js
vendored
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
|
||||
53
packages/editor/dist/components/menu/index.js
vendored
53
packages/editor/dist/components/menu/index.js
vendored
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1 +1,2 @@
|
||||
export {};
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
|
||||
18
packages/editor/dist/components/menu/usefocus.js
vendored
18
packages/editor/dist/components/menu/usefocus.js
vendored
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
54
packages/editor/dist/components/tabs/index.js
vendored
54
packages/editor/dist/components/tabs/index.js
vendored
@@ -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;
|
||||
|
||||
62
packages/editor/dist/extensions.js
vendored
62
packages/editor/dist/extensions.js
vendored
@@ -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");
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 };
|
||||
}
|
||||
|
||||
@@ -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)); }) }))] })) })));
|
||||
}
|
||||
|
||||
@@ -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).
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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 });
|
||||
},
|
||||
});
|
||||
|
||||
@@ -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; } });
|
||||
|
||||
@@ -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)];
|
||||
},
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
15
packages/editor/dist/extensions/embed/embed.js
vendored
15
packages/editor/dist/extensions/embed/embed.js
vendored
@@ -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;
|
||||
|
||||
18
packages/editor/dist/extensions/embed/index.js
vendored
18
packages/editor/dist/extensions/embed/index.js
vendored
@@ -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);
|
||||
|
||||
@@ -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"],
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
37
packages/editor/dist/extensions/image/image.js
vendored
37
packages/editor/dist/extensions/image/image.js
vendored
@@ -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];
|
||||
|
||||
18
packages/editor/dist/extensions/image/index.js
vendored
18
packages/editor/dist/extensions/image/index.js
vendored
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
} });
|
||||
},
|
||||
});
|
||||
|
||||
@@ -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; } });
|
||||
|
||||
@@ -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];
|
||||
},
|
||||
|
||||
@@ -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];
|
||||
},
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
};
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
};
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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,
|
||||
];
|
||||
|
||||
@@ -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);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -1 +1,2 @@
|
||||
export {};
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
|
||||
@@ -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$$"); },
|
||||
|
||||
@@ -1 +1,2 @@
|
||||
export {};
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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"));
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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 };
|
||||
|
||||
@@ -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;
|
||||
|
||||
28
packages/editor/dist/extensions/react/index.js
vendored
28
packages/editor/dist/extensions/react/index.js
vendored
@@ -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);
|
||||
|
||||
21
packages/editor/dist/extensions/react/plugin.js
vendored
21
packages/editor/dist/extensions/react/plugin.js
vendored
@@ -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];
|
||||
},
|
||||
});
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1 +1,2 @@
|
||||
export {};
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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: {
|
||||
|
||||
18
packages/editor/dist/extensions/table/actions.js
vendored
18
packages/editor/dist/extensions/table/actions.js
vendored
@@ -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 };
|
||||
|
||||
@@ -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" }))] })));
|
||||
}
|
||||
|
||||
18
packages/editor/dist/extensions/table/index.js
vendored
18
packages/editor/dist/extensions/table/index.js
vendored
@@ -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);
|
||||
|
||||
17
packages/editor/dist/extensions/table/table.js
vendored
17
packages/editor/dist/extensions/table/table.js
vendored
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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") });
|
||||
|
||||
@@ -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; });
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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"));
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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"],
|
||||
|
||||
12
packages/editor/dist/hooks/useRefValue.js
vendored
12
packages/editor/dist/hooks/useRefValue.js
vendored
@@ -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;
|
||||
|
||||
195
packages/editor/dist/index.js
vendored
195
packages/editor/dist/index.js
vendored
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
|
||||
23
packages/editor/dist/toolbar/components/icon.js
vendored
23
packages/editor/dist/toolbar/components/icon.js
vendored
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
24
packages/editor/dist/toolbar/components/popup.js
vendored
24
packages/editor/dist/toolbar/components/popup.js
vendored
@@ -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;
|
||||
|
||||
@@ -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
Reference in New Issue
Block a user