diff --git a/packages/editor/dist/cjs/components/actionsheet/index.js b/packages/editor/dist/cjs/components/actionsheet/index.js index a22f465f3..8eecd8fa5 100644 --- a/packages/editor/dist/cjs/components/actionsheet/index.js +++ b/packages/editor/dist/cjs/components/actionsheet/index.js @@ -29,7 +29,6 @@ Object.defineProperty(exports, "__esModule", { value: true }); exports.ActionSheetPresenter = void 0; const jsx_runtime_1 = require("react/jsx-runtime"); const react_1 = __importStar(require("react")); -const emotion_theming_1 = require("emotion-theming"); const rebass_1 = require("rebass"); const icon_1 = require("../../toolbar/components/icon"); const icons_1 = require("../../toolbar/icons"); @@ -37,6 +36,7 @@ const menubutton_1 = require("../menu/menubutton"); const menuseparator_1 = require("../menu/menuseparator"); const react_modal_1 = __importDefault(require("react-modal")); const framer_motion_1 = require("framer-motion"); +const toolbarstore_1 = require("../../toolbar/stores/toolbarstore"); const AnimatedFlex = (0, framer_motion_1.motion)(rebass_1.Flex); const TRANSITION = { type: "spring", @@ -71,7 +71,7 @@ function useHistory(initial) { function ActionSheetPresenter(props) { var _a; const { isOpen, title, items, onClose, blocking = true, focusOnRender = true, draggable = true, children, } = props; - const theme = (0, emotion_theming_1.useTheme)(); + const theme = (0, toolbarstore_1.useTheme)(); const contentRef = (0, react_1.useRef)(); const y = (0, framer_motion_1.useMotionValue)(0); const opacity = (0, framer_motion_1.useTransform)(y, [0, ((_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || window.innerHeight], [1, 0]); @@ -133,7 +133,7 @@ function ActionSheetPresenter(props) { bg: "background", borderTopLeftRadius: 15, borderTopRightRadius: 15, - boxShadow: theme.shadows.menu, + boxShadow: (theme === null || theme === void 0 ? void 0 : theme.shadows.menu) || "none", flex: 1, flexDirection: "column", } }, { children: [draggable && ((0, jsx_runtime_1.jsx)(AnimatedFlex, Object.assign({ drag: "y", diff --git a/packages/editor/dist/cjs/components/button.d.ts b/packages/editor/dist/cjs/components/button.d.ts index f118730d4..33c39b124 100644 --- a/packages/editor/dist/cjs/components/button.d.ts +++ b/packages/editor/dist/cjs/components/button.d.ts @@ -1,3 +1,3 @@ /// import { ButtonProps } from "rebass"; -export declare const Button: import("react").ForwardRefExoticComponent & import("react").RefAttributes>; +export declare const Button: import("react").ForwardRefExoticComponent & import("react").RefAttributes>; diff --git a/packages/editor/dist/cjs/components/popuppresenter/index.d.ts b/packages/editor/dist/cjs/components/popuppresenter/index.d.ts index 677f9164c..e3ccee1b0 100644 --- a/packages/editor/dist/cjs/components/popuppresenter/index.d.ts +++ b/packages/editor/dist/cjs/components/popuppresenter/index.d.ts @@ -1,6 +1,5 @@ import { PropsWithChildren } from "react"; import { PositionOptions } from "../../utils/position"; -import { Theme } from "@notesnook/theme"; import React from "react"; import { ResponsivePresenterProps } from "../responsive"; export declare type PopupPresenterProps = { @@ -30,7 +29,6 @@ export declare function usePopupHandler(options: UsePopupHandlerOptions): { closePopup: (popupId: string) => void; }; declare type ShowPopupOptions = { - theme: Theme; popup: (closePopup: () => void) => React.ReactNode; } & Partial; export declare function showPopup(options: ShowPopupOptions): () => void; diff --git a/packages/editor/dist/cjs/components/popuppresenter/index.js b/packages/editor/dist/cjs/components/popuppresenter/index.js index a0ea52ace..e1660ca91 100644 --- a/packages/editor/dist/cjs/components/popuppresenter/index.js +++ b/packages/editor/dist/cjs/components/popuppresenter/index.js @@ -21,11 +21,11 @@ const rebass_1 = require("rebass"); const position_1 = require("../../utils/position"); const react_modal_1 = __importDefault(require("react-modal")); const react_dom_1 = __importDefault(require("react-dom")); -const emotion_theming_1 = require("emotion-theming"); const dom_1 = require("../../toolbar/utils/dom"); const toolbarstore_1 = require("../../toolbar/stores/toolbarstore"); const popuprenderer_1 = require("./popuprenderer"); const responsive_1 = require("../responsive"); +const themeprovider_1 = require("../themeprovider"); function _PopupPresenter(props) { const { isOpen, position, onClose, blocking = true, focusOnRender = true, children, } = props; const isMobile = (0, toolbarstore_1.useIsMobile)(); @@ -217,17 +217,17 @@ function usePopupHandler(options) { } exports.usePopupHandler = usePopupHandler; function showPopup(options) { - const { theme, popup } = options, props = __rest(options, ["theme", "popup"]); + const { popup } = options, props = __rest(options, ["popup"]); function hide() { react_dom_1.default.unmountComponentAtNode((0, dom_1.getPopupContainer)()); } - react_dom_1.default.render((0, jsx_runtime_1.jsx)(emotion_theming_1.ThemeProvider, Object.assign({ theme: theme }, { children: (0, jsx_runtime_1.jsx)(responsive_1.ResponsivePresenter, Object.assign({ isOpen: true, onClose: hide, position: { + react_dom_1.default.render((0, jsx_runtime_1.jsx)(themeprovider_1.ThemeProvider, { children: (0, jsx_runtime_1.jsx)(responsive_1.ResponsivePresenter, Object.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) })) })), (0, dom_1.getPopupContainer)()); + }, blocking: true, focusOnRender: true }, props, { children: popup(hide) })) }), (0, dom_1.getPopupContainer)()); return hide; } exports.showPopup = showPopup; diff --git a/packages/editor/dist/cjs/components/themeprovider/index.d.ts b/packages/editor/dist/cjs/components/themeprovider/index.d.ts new file mode 100644 index 000000000..8941a4054 --- /dev/null +++ b/packages/editor/dist/cjs/components/themeprovider/index.d.ts @@ -0,0 +1,2 @@ +import { PropsWithChildren } from "react"; +export declare function ThemeProvider(props: PropsWithChildren<{}>): JSX.Element; diff --git a/packages/editor/dist/cjs/components/themeprovider/index.js b/packages/editor/dist/cjs/components/themeprovider/index.js new file mode 100644 index 000000000..41390e34e --- /dev/null +++ b/packages/editor/dist/cjs/components/themeprovider/index.js @@ -0,0 +1,11 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.ThemeProvider = void 0; +const jsx_runtime_1 = require("react/jsx-runtime"); +const emotion_theming_1 = require("emotion-theming"); +const toolbarstore_1 = require("../../toolbar/stores/toolbarstore"); +function ThemeProvider(props) { + const theme = (0, toolbarstore_1.useTheme)(); + return ((0, jsx_runtime_1.jsx)(emotion_theming_1.ThemeProvider, Object.assign({ theme: theme || {} }, { children: props.children }))); +} +exports.ThemeProvider = ThemeProvider; diff --git a/packages/editor/dist/cjs/extensions/react/reactnodeview.js b/packages/editor/dist/cjs/extensions/react/reactnodeview.js index b58b591d4..dec0efeaf 100644 --- a/packages/editor/dist/cjs/extensions/react/reactnodeview.js +++ b/packages/editor/dist/cjs/extensions/react/reactnodeview.js @@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true }); exports.createNodeView = exports.ReactNodeView = void 0; const jsx_runtime_1 = require("react/jsx-runtime"); const prosemirror_state_1 = require("prosemirror-state"); -const emotion_theming_1 = require("emotion-theming"); // @ts-ignore const prosemirror_view_1 = require("prosemirror-view"); +const themeprovider_1 = require("../../components/themeprovider"); class ReactNodeView { constructor(node, editor, getPos, options) { this.editor = editor; @@ -87,8 +87,7 @@ class ReactNodeView { render(props = {}, forwardRef) { if (!this.options.component) return null; - const theme = this.editor.storage.theme; - return ((0, jsx_runtime_1.jsx)(emotion_theming_1.ThemeProvider, Object.assign({ theme: theme }, { children: (0, jsx_runtime_1.jsx)(this.options.component, Object.assign({}, props, { editor: this.editor, getPos: this.getPos, node: this.node, forwardRef: forwardRef, updateAttributes: (attr, options) => this.updateAttributes(attr, this.getPos(), options === null || options === void 0 ? void 0 : options.addToHistory, options === null || options === void 0 ? void 0 : options.preventUpdate) })) }))); + return ((0, jsx_runtime_1.jsx)(themeprovider_1.ThemeProvider, { children: (0, jsx_runtime_1.jsx)(this.options.component, Object.assign({}, props, { editor: this.editor, getPos: this.getPos, node: this.node, forwardRef: forwardRef, updateAttributes: (attr, options) => this.updateAttributes(attr, this.getPos(), options === null || options === void 0 ? void 0 : options.addToHistory, options === null || options === void 0 ? void 0 : options.preventUpdate) })) })); } updateAttributes(attributes, pos, addToHistory = false, preventUpdate = false) { this.editor.commands.command(({ tr }) => { diff --git a/packages/editor/dist/cjs/extensions/react/selectionbasedreactnodeview.js b/packages/editor/dist/cjs/extensions/react/selectionbasedreactnodeview.js index c0d004a7a..48663a010 100644 --- a/packages/editor/dist/cjs/extensions/react/selectionbasedreactnodeview.js +++ b/packages/editor/dist/cjs/extensions/react/selectionbasedreactnodeview.js @@ -6,7 +6,7 @@ const prosemirror_view_1 = require("prosemirror-view"); const prosemirror_state_1 = require("prosemirror-state"); const plugin_1 = require("./plugin"); const reactnodeview_1 = require("./reactnodeview"); -const emotion_theming_1 = require("emotion-theming"); +const themeprovider_1 = require("../../components/themeprovider"); /** * A ReactNodeView that handles React components sensitive * to selection changes. @@ -80,10 +80,9 @@ class SelectionBasedNodeView extends reactnodeview_1.ReactNodeView { render(props = {}, forwardRef) { if (!this.options.component) return null; - const theme = this.editor.storage.theme; const isSelected = this.editor.isEditable && (this.insideSelection() || this.nodeInsideSelection()); - return ((0, jsx_runtime_1.jsx)(emotion_theming_1.ThemeProvider, Object.assign({ theme: theme }, { children: (0, jsx_runtime_1.jsx)(this.options.component, Object.assign({}, props, { editor: this.editor, getPos: this.getPos, node: this.node, forwardRef: forwardRef, selected: isSelected, updateAttributes: (attr, options) => this.updateAttributes(attr, this.pos, options === null || options === void 0 ? void 0 : options.addToHistory, options === null || options === void 0 ? void 0 : options.preventUpdate) })) }))); + return ((0, jsx_runtime_1.jsx)(themeprovider_1.ThemeProvider, { children: (0, jsx_runtime_1.jsx)(this.options.component, Object.assign({}, props, { editor: this.editor, getPos: this.getPos, node: this.node, forwardRef: forwardRef, selected: isSelected, updateAttributes: (attr, options) => this.updateAttributes(attr, this.pos, options === null || options === void 0 ? void 0 : options.addToHistory, options === null || options === void 0 ? void 0 : options.preventUpdate) })) })); } /** * Update current node's start and end positions. diff --git a/packages/editor/dist/cjs/index.js b/packages/editor/dist/cjs/index.js index b8a352a1a..d19bdd234 100644 --- a/packages/editor/dist/cjs/index.js +++ b/packages/editor/dist/cjs/index.js @@ -79,12 +79,14 @@ prosemirror_view_1.EditorView.prototype.updateState = function updateState(state this.updateStateInner(state, this.state.plugins != state.plugins); }; const useTiptap = (options = {}, deps = []) => { - const { theme, isMobile, onDownloadAttachment, onOpenAttachmentPicker } = options, restOptions = __rest(options, ["theme", "isMobile", "onDownloadAttachment", "onOpenAttachmentPicker"]); + const { theme, isMobile, onDownloadAttachment, onOpenAttachmentPicker, onBeforeCreate } = options, restOptions = __rest(options, ["theme", "isMobile", "onDownloadAttachment", "onOpenAttachmentPicker", "onBeforeCreate"]); const PortalProviderAPI = (0, react_2.usePortalProvider)(); const setIsMobile = (0, toolbarstore_1.useToolbarStore)((store) => store.setIsMobile); + const setTheme = (0, toolbarstore_1.useToolbarStore)((store) => store.setTheme); (0, react_1.useEffect)(() => { setIsMobile(isMobile || false); - }, [isMobile]); + setTheme(theme); + }, [isMobile, theme]); const defaultOptions = (0, react_1.useMemo)(() => ({ extensions: [ react_2.NodeViewSelectionNotifier, @@ -152,18 +154,16 @@ const useTiptap = (options = {}, deps = []) => { keepinview_1.KeepInView, ], onBeforeCreate: ({ editor }) => { - if (theme) { - editor.storage.theme = theme; - } editor.storage.portalProviderAPI = PortalProviderAPI; + if (onBeforeCreate) + onBeforeCreate({ editor }); }, injectCSS: false, }), [ - theme, onDownloadAttachment, onOpenAttachmentPicker, PortalProviderAPI, - isMobile, + onBeforeCreate, ]); const editor = (0, useEditor_1.useEditor)(Object.assign(Object.assign({}, defaultOptions), restOptions), deps); return editor; diff --git a/packages/editor/dist/cjs/toolbar/components/icon.js b/packages/editor/dist/cjs/toolbar/components/icon.js index 3871155dc..60f61af99 100644 --- a/packages/editor/dist/cjs/toolbar/components/icon.js +++ b/packages/editor/dist/cjs/toolbar/components/icon.js @@ -17,14 +17,16 @@ Object.defineProperty(exports, "__esModule", { value: true }); exports.Icon = void 0; const jsx_runtime_1 = require("react/jsx-runtime"); const react_1 = __importDefault(require("@mdi/react")); -const emotion_theming_1 = require("emotion-theming"); const rebass_1 = require("rebass"); +const toolbarstore_1 = require("../stores/toolbarstore"); function MDIIconWrapper({ title, path, size = 24, color = "icon", stroke, rotate, }) { - const theme = (0, emotion_theming_1.useTheme)(); - const themedColor = theme.colors + const theme = (0, toolbarstore_1.useTheme)(); + const themedColor = (theme === null || theme === void 0 ? void 0 : theme.colors) ? theme.colors[color] : color; - return ((0, jsx_runtime_1.jsx)(react_1.default, { className: "icon", title: title, path: path, size: typeof size === "string" ? `${theme.iconSizes[size]}px` : `${size}px`, style: { + return ((0, jsx_runtime_1.jsx)(react_1.default, { className: "icon", title: title, path: path, size: typeof size === "string" + ? `${(theme === null || theme === void 0 ? void 0 : theme.iconSizes[size]) || 24}px` + : `${size}px`, style: { strokeWidth: stroke || "0px", stroke: themedColor, }, color: themedColor, spin: rotate })); diff --git a/packages/editor/dist/cjs/toolbar/floatingmenus/hoverpopup/index.js b/packages/editor/dist/cjs/toolbar/floatingmenus/hoverpopup/index.js index 265d9012e..462e9fc47 100644 --- a/packages/editor/dist/cjs/toolbar/floatingmenus/hoverpopup/index.js +++ b/packages/editor/dist/cjs/toolbar/floatingmenus/hoverpopup/index.js @@ -47,7 +47,6 @@ function HoverPopupHandler(props) { from: pos, to: pos + node.nodeSize, } })), - theme: editor.storage.theme, blocking: false, focusOnRender: false, position: { diff --git a/packages/editor/dist/cjs/toolbar/stores/toolbarstore.d.ts b/packages/editor/dist/cjs/toolbar/stores/toolbarstore.d.ts index b5edf835b..6720f7bde 100644 --- a/packages/editor/dist/cjs/toolbar/stores/toolbarstore.d.ts +++ b/packages/editor/dist/cjs/toolbar/stores/toolbarstore.d.ts @@ -1,9 +1,12 @@ +import { Theme } from "@notesnook/theme"; export declare type ToolbarLocation = "top" | "bottom"; export declare type PopupRef = { id: string; group: string; }; interface ToolbarState { + theme?: Theme; + setTheme: (theme?: Theme) => void; isMobile: boolean; openedPopups: Record; setIsMobile: (isMobile: boolean) => void; @@ -17,4 +20,7 @@ interface ToolbarState { export declare const useToolbarStore: import("zustand").UseBoundStore>; export declare function useToolbarLocation(): ToolbarLocation; export declare function useIsMobile(): boolean; +export declare const useTheme: (() => Theme | undefined) & { + theme: Theme | undefined; +}; export {}; diff --git a/packages/editor/dist/cjs/toolbar/stores/toolbarstore.js b/packages/editor/dist/cjs/toolbar/stores/toolbarstore.js index 602d5c683..5dd7f7089 100644 --- a/packages/editor/dist/cjs/toolbar/stores/toolbarstore.js +++ b/packages/editor/dist/cjs/toolbar/stores/toolbarstore.js @@ -3,14 +3,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) { return (mod && mod.__esModule) ? mod : { "default": mod }; }; Object.defineProperty(exports, "__esModule", { value: true }); -exports.useIsMobile = exports.useToolbarLocation = exports.useToolbarStore = void 0; +exports.useTheme = exports.useIsMobile = exports.useToolbarLocation = exports.useToolbarStore = void 0; const zustand_1 = __importDefault(require("zustand")); exports.useToolbarStore = (0, zustand_1.default)((set, get) => ({ + theme: undefined, isMobile: false, openedPopups: {}, setIsMobile: (isMobile) => set((state) => { state.isMobile = isMobile; }), + setTheme: (theme) => set((state) => { + state.theme = theme; + }), toolbarLocation: "top", setToolbarLocation: (location) => set((state) => { state.toolbarLocation = location; @@ -39,3 +43,8 @@ function useIsMobile() { return (0, exports.useToolbarStore)((store) => store.isMobile); } exports.useIsMobile = useIsMobile; +exports.useTheme = Object.defineProperty(() => { + return (0, exports.useToolbarStore)((store) => store.theme); +}, "theme", { + get: () => exports.useToolbarStore.getState().theme, +}); diff --git a/packages/editor/dist/cjs/toolbar/tools/block.js b/packages/editor/dist/cjs/toolbar/tools/block.js index 99b31a5c6..f0a216530 100644 --- a/packages/editor/dist/cjs/toolbar/tools/block.js +++ b/packages/editor/dist/cjs/toolbar/tools/block.js @@ -166,7 +166,6 @@ const embedDesktop = (editor) => ({ if (!editor) return; (0, popuppresenter_1.showPopup)({ - theme: editor.storage.theme, popup: (hide) => ((0, jsx_runtime_1.jsx)(embedpopup_1.EmbedPopup, { title: "Insert embed", onClose: (embed) => { var _a; if (!embed) @@ -231,7 +230,6 @@ const uploadImageFromURL = (editor) => ({ icon: "link", onClick: () => { (0, popuppresenter_1.showPopup)({ - theme: editor.storage.theme, popup: (hide) => ((0, jsx_runtime_1.jsx)(imageupload_1.ImageUploadPopup, { onInsert: (image) => { var _a; (_a = editor diff --git a/packages/editor/dist/cjs/toolbar/tools/table.js b/packages/editor/dist/cjs/toolbar/tools/table.js index 3f3ad8961..034fd2c95 100644 --- a/packages/editor/dist/cjs/toolbar/tools/table.js +++ b/packages/editor/dist/cjs/toolbar/tools/table.js @@ -160,7 +160,6 @@ const deleteRow = (editor) => (Object.assign(Object.assign({}, (0, tooldefinitio const deleteTable = (editor) => (Object.assign(Object.assign({}, (0, tooldefinitions_1.getToolDefinition)("deleteTable")), { key: "deleteTable", type: "button", onClick: () => { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().deleteTable().run(); } })); const cellProperties = (editor) => (Object.assign(Object.assign({}, (0, tooldefinitions_1.getToolDefinition)("cellProperties")), { key: "cellProperties", type: "button", onClick: () => { (0, popuppresenter_1.showPopup)({ - theme: editor.storage.theme, popup: (hide) => (0, jsx_runtime_1.jsx)(cellproperties_1.CellProperties, { onClose: hide, editor: editor }), }); } })); diff --git a/packages/editor/dist/es/components/actionsheet/index.js b/packages/editor/dist/es/components/actionsheet/index.js index 951927fa3..c434c9781 100644 --- a/packages/editor/dist/es/components/actionsheet/index.js +++ b/packages/editor/dist/es/components/actionsheet/index.js @@ -1,6 +1,5 @@ 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"; @@ -8,6 +7,7 @@ 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"; +import { useTheme } from "../../toolbar/stores/toolbar-store"; const AnimatedFlex = motion(Flex); const TRANSITION = { type: "spring", @@ -104,7 +104,7 @@ export function ActionSheetPresenter(props) { bg: "background", borderTopLeftRadius: 15, borderTopRightRadius: 15, - boxShadow: theme.shadows.menu, + boxShadow: (theme === null || theme === void 0 ? void 0 : theme.shadows.menu) || "none", flex: 1, flexDirection: "column", } }, { children: [draggable && (_jsx(AnimatedFlex, Object.assign({ drag: "y", diff --git a/packages/editor/dist/es/components/button.d.ts b/packages/editor/dist/es/components/button.d.ts index f118730d4..33c39b124 100644 --- a/packages/editor/dist/es/components/button.d.ts +++ b/packages/editor/dist/es/components/button.d.ts @@ -1,3 +1,3 @@ /// import { ButtonProps } from "rebass"; -export declare const Button: import("react").ForwardRefExoticComponent & import("react").RefAttributes>; +export declare const Button: import("react").ForwardRefExoticComponent & import("react").RefAttributes>; diff --git a/packages/editor/dist/es/components/popuppresenter/index.d.ts b/packages/editor/dist/es/components/popuppresenter/index.d.ts index 677f9164c..e3ccee1b0 100644 --- a/packages/editor/dist/es/components/popuppresenter/index.d.ts +++ b/packages/editor/dist/es/components/popuppresenter/index.d.ts @@ -1,6 +1,5 @@ import { PropsWithChildren } from "react"; import { PositionOptions } from "../../utils/position"; -import { Theme } from "@notesnook/theme"; import React from "react"; import { ResponsivePresenterProps } from "../responsive"; export declare type PopupPresenterProps = { @@ -30,7 +29,6 @@ export declare function usePopupHandler(options: UsePopupHandlerOptions): { closePopup: (popupId: string) => void; }; declare type ShowPopupOptions = { - theme: Theme; popup: (closePopup: () => void) => React.ReactNode; } & Partial; export declare function showPopup(options: ShowPopupOptions): () => void; diff --git a/packages/editor/dist/es/components/popuppresenter/index.js b/packages/editor/dist/es/components/popuppresenter/index.js index dfd5015ed..3c6e22925 100644 --- a/packages/editor/dist/es/components/popuppresenter/index.js +++ b/packages/editor/dist/es/components/popuppresenter/index.js @@ -15,11 +15,11 @@ 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"; +import { ThemeProvider } from "../theme-provider"; function _PopupPresenter(props) { const { isOpen, position, onClose, blocking = true, focusOnRender = true, children, } = props; const isMobile = useIsMobile(); @@ -208,16 +208,16 @@ export function usePopupHandler(options) { return { isPopupOpen, closePopup }; } export function showPopup(options) { - const { theme, popup } = options, props = __rest(options, ["theme", "popup"]); + const { popup } = options, props = __rest(options, ["popup"]); function hide() { ReactDOM.unmountComponentAtNode(getPopupContainer()); } - ReactDOM.render(_jsx(ThemeProvider, Object.assign({ theme: theme }, { children: _jsx(ResponsivePresenter, Object.assign({ isOpen: true, onClose: hide, position: { + ReactDOM.render(_jsx(ThemeProvider, { children: _jsx(ResponsivePresenter, Object.assign({ isOpen: true, onClose: hide, position: { target: 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) })) }), getPopupContainer()); return hide; } diff --git a/packages/editor/dist/es/components/themeprovider/index.d.ts b/packages/editor/dist/es/components/themeprovider/index.d.ts new file mode 100644 index 000000000..8941a4054 --- /dev/null +++ b/packages/editor/dist/es/components/themeprovider/index.d.ts @@ -0,0 +1,2 @@ +import { PropsWithChildren } from "react"; +export declare function ThemeProvider(props: PropsWithChildren<{}>): JSX.Element; diff --git a/packages/editor/dist/es/components/themeprovider/index.js b/packages/editor/dist/es/components/themeprovider/index.js new file mode 100644 index 000000000..c14262159 --- /dev/null +++ b/packages/editor/dist/es/components/themeprovider/index.js @@ -0,0 +1,7 @@ +import { jsx as _jsx } from "react/jsx-runtime"; +import { ThemeProvider as EmotionThemeProvider } from "emotion-theming"; +import { useTheme } from "../../toolbar/stores/toolbar-store"; +export function ThemeProvider(props) { + const theme = useTheme(); + return (_jsx(EmotionThemeProvider, Object.assign({ theme: theme || {} }, { children: props.children }))); +} diff --git a/packages/editor/dist/es/extensions/react/reactnodeview.js b/packages/editor/dist/es/extensions/react/reactnodeview.js index ff51a4dc0..c8e5f74e3 100644 --- a/packages/editor/dist/es/extensions/react/reactnodeview.js +++ b/packages/editor/dist/es/extensions/react/reactnodeview.js @@ -1,8 +1,8 @@ import { jsx as _jsx } from "react/jsx-runtime"; import { NodeSelection } from "prosemirror-state"; -import { ThemeProvider } from "emotion-theming"; // @ts-ignore import { __serializeForClipboard } from "prosemirror-view"; +import { ThemeProvider } from "../../components/theme-provider"; export class ReactNodeView { constructor(node, editor, getPos, options) { this.editor = editor; @@ -84,8 +84,7 @@ export class ReactNodeView { render(props = {}, forwardRef) { if (!this.options.component) return null; - const theme = this.editor.storage.theme; - return (_jsx(ThemeProvider, Object.assign({ theme: theme }, { children: _jsx(this.options.component, Object.assign({}, props, { editor: this.editor, getPos: this.getPos, node: this.node, forwardRef: forwardRef, updateAttributes: (attr, options) => this.updateAttributes(attr, this.getPos(), options === null || options === void 0 ? void 0 : options.addToHistory, options === null || options === void 0 ? void 0 : options.preventUpdate) })) }))); + return (_jsx(ThemeProvider, { children: _jsx(this.options.component, Object.assign({}, props, { editor: this.editor, getPos: this.getPos, node: this.node, forwardRef: forwardRef, updateAttributes: (attr, options) => this.updateAttributes(attr, this.getPos(), options === null || options === void 0 ? void 0 : options.addToHistory, options === null || options === void 0 ? void 0 : options.preventUpdate) })) })); } updateAttributes(attributes, pos, addToHistory = false, preventUpdate = false) { this.editor.commands.command(({ tr }) => { diff --git a/packages/editor/dist/es/extensions/react/selectionbasedreactnodeview.js b/packages/editor/dist/es/extensions/react/selectionbasedreactnodeview.js index af24841ef..b12aa43f9 100644 --- a/packages/editor/dist/es/extensions/react/selectionbasedreactnodeview.js +++ b/packages/editor/dist/es/extensions/react/selectionbasedreactnodeview.js @@ -3,7 +3,7 @@ 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"; +import { ThemeProvider } from "../../components/theme-provider"; /** * A ReactNodeView that handles React components sensitive * to selection changes. @@ -77,10 +77,9 @@ export class SelectionBasedNodeView extends ReactNodeView { render(props = {}, forwardRef) { if (!this.options.component) return null; - const theme = this.editor.storage.theme; const isSelected = this.editor.isEditable && (this.insideSelection() || this.nodeInsideSelection()); - return (_jsx(ThemeProvider, Object.assign({ theme: theme }, { children: _jsx(this.options.component, Object.assign({}, props, { editor: this.editor, getPos: this.getPos, node: this.node, forwardRef: forwardRef, selected: isSelected, updateAttributes: (attr, options) => this.updateAttributes(attr, this.pos, options === null || options === void 0 ? void 0 : options.addToHistory, options === null || options === void 0 ? void 0 : options.preventUpdate) })) }))); + return (_jsx(ThemeProvider, { children: _jsx(this.options.component, Object.assign({}, props, { editor: this.editor, getPos: this.getPos, node: this.node, forwardRef: forwardRef, selected: isSelected, updateAttributes: (attr, options) => this.updateAttributes(attr, this.pos, options === null || options === void 0 ? void 0 : options.addToHistory, options === null || options === void 0 ? void 0 : options.preventUpdate) })) })); } /** * Update current node's start and end positions. diff --git a/packages/editor/dist/es/index.js b/packages/editor/dist/es/index.js index 08c44db11..01ce875ff 100644 --- a/packages/editor/dist/es/index.js +++ b/packages/editor/dist/es/index.js @@ -57,12 +57,14 @@ EditorView.prototype.updateState = function updateState(state) { this.updateStateInner(state, this.state.plugins != state.plugins); }; const useTiptap = (options = {}, deps = []) => { - const { theme, isMobile, onDownloadAttachment, onOpenAttachmentPicker } = options, restOptions = __rest(options, ["theme", "isMobile", "onDownloadAttachment", "onOpenAttachmentPicker"]); + const { theme, isMobile, onDownloadAttachment, onOpenAttachmentPicker, onBeforeCreate } = options, restOptions = __rest(options, ["theme", "isMobile", "onDownloadAttachment", "onOpenAttachmentPicker", "onBeforeCreate"]); const PortalProviderAPI = usePortalProvider(); const setIsMobile = useToolbarStore((store) => store.setIsMobile); + const setTheme = useToolbarStore((store) => store.setTheme); useEffect(() => { setIsMobile(isMobile || false); - }, [isMobile]); + setTheme(theme); + }, [isMobile, theme]); const defaultOptions = useMemo(() => ({ extensions: [ NodeViewSelectionNotifier, @@ -130,18 +132,16 @@ const useTiptap = (options = {}, deps = []) => { KeepInView, ], onBeforeCreate: ({ editor }) => { - if (theme) { - editor.storage.theme = theme; - } editor.storage.portalProviderAPI = PortalProviderAPI; + if (onBeforeCreate) + onBeforeCreate({ editor }); }, injectCSS: false, }), [ - theme, onDownloadAttachment, onOpenAttachmentPicker, PortalProviderAPI, - isMobile, + onBeforeCreate, ]); const editor = useEditor(Object.assign(Object.assign({}, defaultOptions), restOptions), deps); return editor; diff --git a/packages/editor/dist/es/toolbar/components/icon.js b/packages/editor/dist/es/toolbar/components/icon.js index 9cf5d090e..3f9d82bdb 100644 --- a/packages/editor/dist/es/toolbar/components/icon.js +++ b/packages/editor/dist/es/toolbar/components/icon.js @@ -11,14 +11,16 @@ var __rest = (this && this.__rest) || function (s, e) { }; import { jsx as _jsx } from "react/jsx-runtime"; import MDIIcon from "@mdi/react"; -import { useTheme } from "emotion-theming"; import { Flex } from "rebass"; +import { useTheme } from "../stores/toolbar-store"; function MDIIconWrapper({ title, path, size = 24, color = "icon", stroke, rotate, }) { const theme = useTheme(); - const themedColor = theme.colors + const themedColor = (theme === null || theme === void 0 ? void 0 : theme.colors) ? theme.colors[color] : color; - return (_jsx(MDIIcon, { className: "icon", title: title, path: path, size: typeof size === "string" ? `${theme.iconSizes[size]}px` : `${size}px`, style: { + return (_jsx(MDIIcon, { className: "icon", title: title, path: path, size: typeof size === "string" + ? `${(theme === null || theme === void 0 ? void 0 : theme.iconSizes[size]) || 24}px` + : `${size}px`, style: { strokeWidth: stroke || "0px", stroke: themedColor, }, color: themedColor, spin: rotate })); diff --git a/packages/editor/dist/es/toolbar/floatingmenus/hoverpopup/index.js b/packages/editor/dist/es/toolbar/floatingmenus/hoverpopup/index.js index 1cebb628a..2504e89ff 100644 --- a/packages/editor/dist/es/toolbar/floatingmenus/hoverpopup/index.js +++ b/packages/editor/dist/es/toolbar/floatingmenus/hoverpopup/index.js @@ -44,7 +44,6 @@ export function HoverPopupHandler(props) { from: pos, to: pos + node.nodeSize, } })), - theme: editor.storage.theme, blocking: false, focusOnRender: false, position: { diff --git a/packages/editor/dist/es/toolbar/stores/toolbarstore.d.ts b/packages/editor/dist/es/toolbar/stores/toolbarstore.d.ts index b5edf835b..6720f7bde 100644 --- a/packages/editor/dist/es/toolbar/stores/toolbarstore.d.ts +++ b/packages/editor/dist/es/toolbar/stores/toolbarstore.d.ts @@ -1,9 +1,12 @@ +import { Theme } from "@notesnook/theme"; export declare type ToolbarLocation = "top" | "bottom"; export declare type PopupRef = { id: string; group: string; }; interface ToolbarState { + theme?: Theme; + setTheme: (theme?: Theme) => void; isMobile: boolean; openedPopups: Record; setIsMobile: (isMobile: boolean) => void; @@ -17,4 +20,7 @@ interface ToolbarState { export declare const useToolbarStore: import("zustand").UseBoundStore>; export declare function useToolbarLocation(): ToolbarLocation; export declare function useIsMobile(): boolean; +export declare const useTheme: (() => Theme | undefined) & { + theme: Theme | undefined; +}; export {}; diff --git a/packages/editor/dist/es/toolbar/stores/toolbarstore.js b/packages/editor/dist/es/toolbar/stores/toolbarstore.js index 9f059d8d0..254ad1eff 100644 --- a/packages/editor/dist/es/toolbar/stores/toolbarstore.js +++ b/packages/editor/dist/es/toolbar/stores/toolbarstore.js @@ -1,10 +1,14 @@ import create from "zustand"; export const useToolbarStore = create((set, get) => ({ + theme: undefined, isMobile: false, openedPopups: {}, setIsMobile: (isMobile) => set((state) => { state.isMobile = isMobile; }), + setTheme: (theme) => set((state) => { + state.theme = theme; + }), toolbarLocation: "top", setToolbarLocation: (location) => set((state) => { state.toolbarLocation = location; @@ -31,3 +35,8 @@ export function useToolbarLocation() { export function useIsMobile() { return useToolbarStore((store) => store.isMobile); } +export const useTheme = Object.defineProperty(() => { + return useToolbarStore((store) => store.theme); +}, "theme", { + get: () => useToolbarStore.getState().theme, +}); diff --git a/packages/editor/dist/es/toolbar/tools/block.js b/packages/editor/dist/es/toolbar/tools/block.js index 35cd30297..65fa48cd3 100644 --- a/packages/editor/dist/es/toolbar/tools/block.js +++ b/packages/editor/dist/es/toolbar/tools/block.js @@ -162,7 +162,6 @@ const embedDesktop = (editor) => ({ if (!editor) return; showPopup({ - theme: editor.storage.theme, popup: (hide) => (_jsx(EmbedPopup, { title: "Insert embed", onClose: (embed) => { var _a; if (!embed) @@ -227,7 +226,6 @@ const uploadImageFromURL = (editor) => ({ icon: "link", onClick: () => { showPopup({ - theme: editor.storage.theme, popup: (hide) => (_jsx(ImageUploadPopup, { onInsert: (image) => { var _a; (_a = editor diff --git a/packages/editor/dist/es/toolbar/tools/table.js b/packages/editor/dist/es/toolbar/tools/table.js index 3da5021b3..177d6bc8f 100644 --- a/packages/editor/dist/es/toolbar/tools/table.js +++ b/packages/editor/dist/es/toolbar/tools/table.js @@ -148,7 +148,6 @@ const deleteRow = (editor) => (Object.assign(Object.assign({}, getToolDefinition const deleteTable = (editor) => (Object.assign(Object.assign({}, getToolDefinition("deleteTable")), { key: "deleteTable", type: "button", onClick: () => { var _a; return (_a = editor.current) === null || _a === void 0 ? void 0 : _a.chain().focus().deleteTable().run(); } })); const cellProperties = (editor) => (Object.assign(Object.assign({}, getToolDefinition("cellProperties")), { key: "cellProperties", type: "button", onClick: () => { showPopup({ - theme: editor.storage.theme, popup: (hide) => _jsx(CellPropertiesPopup, { onClose: hide, editor: editor }), }); } }));