chore: publish

2026-02-24 04:00:59 +01:00 · 2022-07-09 09:00:36 +05:00
parent 39bc1d58cf
commit 4d94ec5ea7
30 changed files with 101 additions and 61 deletions
--- 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", 
--- a/packages/editor/dist/cjs/components/button.d.ts
+++ b/packages/editor/dist/cjs/components/button.d.ts
--- 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<ResponsivePresenterProps>;
 export declare function showPopup(options: ShowPopupOptions): () => void;
--- 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;
--- a/packages/editor/dist/cjs/components/themeprovider/index.d.ts
+++ 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;
--- a/packages/editor/dist/cjs/components/themeprovider/index.js
+++ 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;
--- 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 }) => {
--- 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.
--- 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;
--- 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 }));
--- 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: {
--- 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<string, PopupRef | false>;
    setIsMobile: (isMobile: boolean) => void;
@@ -17,4 +20,7 @@ interface ToolbarState {
 export declare const useToolbarStore: import("zustand").UseBoundStore<ToolbarState, import("zustand").StoreApi<ToolbarState>>;
 export declare function useToolbarLocation(): ToolbarLocation;
 export declare function useIsMobile(): boolean;
+export declare const useTheme: (() => Theme | undefined) & {
+    theme: Theme | undefined;
+};
 export {};
--- 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,
+});
--- 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
--- 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 }),
        });
    } }));
--- 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", 
--- a/packages/editor/dist/es/components/button.d.ts
+++ b/packages/editor/dist/es/components/button.d.ts
--- 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<ResponsivePresenterProps>;
 export declare function showPopup(options: ShowPopupOptions): () => void;
--- 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;
 }
--- a/packages/editor/dist/es/components/themeprovider/index.d.ts
+++ 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;
--- a/packages/editor/dist/es/components/themeprovider/index.js
+++ 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 })));
+}
--- 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 }) => {
--- 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.
--- 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;
--- 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 }));
--- 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: {
--- 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<string, PopupRef | false>;
    setIsMobile: (isMobile: boolean) => void;
@@ -17,4 +20,7 @@ interface ToolbarState {
 export declare const useToolbarStore: import("zustand").UseBoundStore<ToolbarState, import("zustand").StoreApi<ToolbarState>>;
 export declare function useToolbarLocation(): ToolbarLocation;
 export declare function useIsMobile(): boolean;
+export declare const useTheme: (() => Theme | undefined) & {
+    theme: Theme | undefined;
+};
 export {};
--- 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,
+});
--- 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
--- 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 }),
        });
    } }));