chore: fix extensions types

packages/editor/dist/components/menu/usefocus.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MenuItem } from "./types";
 export declare function useFocus(items: MenuItem[], onAction: (event: KeyboardEvent) => void, onClose: (event: KeyboardEvent) => void): {
     focusIndex: number;

packages/editor/dist/extensions.d.ts

@@ -0,0 +1 @@
+/home/thecodrr/Sources/Repos/notesnook-editor/src/extensions.d.ts

packages/editor/dist/extensions/react/reactportalprovider.d.ts

@@ -23,7 +23,7 @@ export declare class PortalProvider extends React.Component<BasePortalProviderPr
     static displayName: string;
     portalProviderAPI: PortalProviderAPI;
     constructor(props: BasePortalProviderProps);
-    render(): JSX.Element | React.ReactChild | null;
+    render(): React.ReactChild | JSX.Element | null;
     componentDidUpdate(): void;
 }
 export declare class PortalRenderer extends React.Component<{

packages/editor/dist/index.d.ts

@@ -1,3 +1,4 @@
+import "./extensions";
 import { EditorOptions } from "@tiptap/react";
 import Toolbar from "./toolbar";
 import { Theme } from "@notesnook/theme";

packages/editor/dist/index.js

@@ -20,6 +20,7 @@ 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";
@@ -76,6 +77,10 @@ var useTiptap = function (options, deps) {
                 listItem: false,
                 orderedList: false,
                 bulletList: false,
+                history: {
+                    depth: 200,
+                    newGroupDelay: 1000,
+                },
             }),
             Dropcursor.configure({
                 class: "drop-cursor",

packages/editor/dist/toolbar/components/button.d.ts

@@ -1,2 +0,0 @@
-import { ButtonProps } from "rebass";
-export default function Button(props: ButtonProps): JSX.Element;

packages/editor/dist/toolbar/components/button.js

@@ -1,36 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useRef } from "react";
-import { Button as RebassButton } from "rebass";
-export default function Button(props) {
-    var touchStartTime = useRef(0);
-    var onTouchEnd = useCallback(function (e) {
-        e.preventDefault();
-        var now = Date.now();
-        setTimeout(function () {
-            if (touchStartTime.current === 0)
-                return;
-            if (now - touchStartTime.current > 300)
-                return;
-            //@ts-ignore
-            props.onClick(e);
-        }, 1);
-    }, []);
-    var onTouchStart = useCallback(function (e) {
-        touchStartTime.current = Date.now();
-        e.preventDefault();
-    }, []);
-    return (_jsx(RebassButton, __assign({}, props, { onClick: props.onClick, onMouseDown: function (e) { return e.preventDefault(); }, onTouchEnd: onTouchEnd, onTouchMove: function () {
-            touchStartTime.current = 0;
-        }, onTouchStart: onTouchStart })));
-}

packages/editor/dist/toolbar/floatingmenus/searchreplace.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { FloatingMenuProps } from "./types";
-export declare function SearchReplaceFloatingMenu(props: FloatingMenuProps): null;
+export declare function SearchReplaceFloatingMenu(props: FloatingMenuProps): JSX.Element;

packages/editor/dist/toolbar/floatingmenus/searchreplace.js

@@ -1,29 +1,26 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SearchReplacePopup } from "../popups/search-replace";
+import { ResponsivePresenter, } from "../../components/responsive";
+import { getToolbarElement } from "../utils/dom";
 export function SearchReplaceFloatingMenu(props) {
     var editor = props.editor;
     var isSearching = editor.storage.searchreplace.isSearching;
-    if (!isSearching)
-        return null;
-    return null;
-    // return (
-    //   <>
-    //     <PopupPresenter
-    //       mobile="sheet"
-    //       desktop="menu"
-    //       isOpen
-    //       onClose={() => editor.commands.endSearch()}
-    //       options={{
-    //         type: "autocomplete",
-    //         position: {
-    //           target:
-    //             document.querySelector<HTMLElement>(".editor-toolbar") || "mouse",
-    //           isTargetAbsolute: true,
-    //           location: "below",
-    //           align: "end",
-    //         },
-    //       }}
-    //     >
-    //       <SearchReplacePopup editor={editor} />
-    //     </PopupPresenter>
-    //   </>
-    // );
+    return (_jsx(ResponsivePresenter, __assign({ mobile: "sheet", desktop: "menu", isOpen: isSearching, onClose: function () { return editor.commands.endSearch(); }, position: {
+            target: getToolbarElement(),
+            isTargetAbsolute: true,
+            location: "below",
+            align: "end",
+            yOffset: 5,
+        } }, { children: _jsx(SearchReplacePopup, { editor: editor }) })));
 }

packages/editor/dist/toolbar/floatingmenus/table/actions.d.ts

@@ -1,6 +0,0 @@
-import { Editor } from "@tiptap/core";
-declare function moveColumnRight(editor: Editor): void;
-declare function moveColumnLeft(editor: Editor): void;
-declare function moveRowDown(editor: Editor): void;
-declare function moveRowUp(editor: Editor): void;
-export { moveColumnLeft, moveColumnRight, moveRowDown, moveRowUp };

packages/editor/dist/toolbar/floatingmenus/table/actions.js

@@ -1,108 +0,0 @@
-import { selectedRect } from "prosemirror-tables";
-function moveColumnRight(editor) {
-    var tr = editor.state.tr;
-    var rect = selectedRect(editor.state);
-    if (rect.right === rect.map.width)
-        return;
-    var transaction = moveColumn(tr, rect, rect.left, rect.left + 1);
-    if (!transaction)
-        return;
-    editor.view.dispatch(transaction);
-}
-function moveColumnLeft(editor) {
-    var tr = editor.state.tr;
-    var rect = selectedRect(editor.state);
-    if (rect.left === 0)
-        return;
-    var transaction = moveColumn(tr, rect, rect.left, rect.left - 1);
-    if (!transaction)
-        return;
-    editor.view.dispatch(transaction);
-}
-function moveRowDown(editor) {
-    var tr = editor.state.tr;
-    var rect = selectedRect(editor.state);
-    if (rect.top + 1 === rect.map.height)
-        return;
-    var transaction = moveRow(tr, rect, rect.top, rect.top + 1);
-    if (!transaction)
-        return;
-    editor.view.dispatch(transaction);
-}
-function moveRowUp(editor) {
-    var tr = editor.state.tr;
-    var rect = selectedRect(editor.state);
-    if (rect.top === 0)
-        return;
-    var transaction = moveRow(tr, rect, rect.top, rect.top - 1);
-    if (!transaction)
-        return;
-    editor.view.dispatch(transaction);
-}
-function moveColumn(tr, rect, from, to) {
-    var fromCells = getColumnCells(rect, from);
-    var toCells = getColumnCells(rect, to);
-    return moveCells(tr, rect, fromCells, toCells);
-}
-function getColumnCells(_a, col) {
-    var map = _a.map, table = _a.table;
-    var cells = [];
-    for (var row = 0; row < map.height;) {
-        var index = row * map.width + col;
-        if (index >= map.map.length)
-            break;
-        var pos = map.map[index];
-        var cell = table.nodeAt(pos);
-        if (!cell)
-            continue;
-        cells.push({ cell: cell, pos: pos });
-        row += cell.attrs.rowspan;
-        console.log(cell.textContent);
-    }
-    return cells;
-}
-function moveRow(tr, rect, from, to) {
-    var fromCells = getRowCells(rect, from);
-    var toCells = getRowCells(rect, to);
-    return moveCells(tr, rect, fromCells, toCells);
-}
-function getRowCells(_a, row) {
-    var map = _a.map, table = _a.table;
-    var cells = [];
-    for (var col = 0, index = row * map.width; col < map.width; col++, index++) {
-        if (index >= map.map.length)
-            break;
-        var pos = map.map[index];
-        var cell = table.nodeAt(pos);
-        if (!cell)
-            continue;
-        cells.push({ cell: cell, pos: pos });
-        col += cell.attrs.colspan - 1;
-    }
-    return cells;
-}
-function moveCells(tr, rect, fromCells, toCells) {
-    if (fromCells.length !== toCells.length)
-        return;
-    var mapStart = tr.mapping.maps.length;
-    for (var i = 0; i < toCells.length; ++i) {
-        var fromCell = fromCells[i];
-        var toCell = toCells[i];
-        var fromStart = tr.mapping
-            .slice(mapStart)
-            .map(rect.tableStart + fromCell.pos);
-        var fromEnd = fromStart + fromCell.cell.nodeSize;
-        var fromSlice = tr.doc.slice(fromStart, fromEnd);
-        var toStart = tr.mapping
-            .slice(mapStart)
-            .map(rect.tableStart + toCell.pos);
-        var toEnd = toStart + toCell.cell.nodeSize;
-        var toSlice = tr.doc.slice(toStart, toEnd);
-        tr.replace(toStart, toEnd, fromSlice);
-        fromStart = tr.mapping.slice(mapStart).map(rect.tableStart + fromCell.pos);
-        fromEnd = fromStart + fromCell.cell.nodeSize;
-        tr.replace(fromStart, fromEnd, toSlice);
-    }
-    return tr;
-}
-export { moveColumnLeft, moveColumnRight, moveRowDown, moveRowUp };

packages/editor/dist/toolbar/floatingmenus/table/index.d.ts

@@ -1 +0,0 @@
-export { TableColumnFloatingMenu, TableRowFloatingMenu } from "./table";

packages/editor/dist/toolbar/floatingmenus/table/index.js

@@ -1 +0,0 @@
-export { TableColumnFloatingMenu, TableRowFloatingMenu } from "./table";

packages/editor/dist/toolbar/floatingmenus/table/table.d.ts

@@ -1,3 +0,0 @@
-import { FloatingMenuProps } from "../types";
-export declare function TableRowFloatingMenu(props: FloatingMenuProps): JSX.Element | null;
-export declare function TableColumnFloatingMenu(props: FloatingMenuProps): JSX.Element | null;

packages/editor/dist/toolbar/floatingmenus/table/table.js

@@ -1,113 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { Flex } from "rebass";
-import { PopupPresenter } from "../../../components/popup-presenter";
-import { InsertColumnRight, InsertRowBelow, RowProperties, TableProperties, } from "../../tools/table";
-import { findSelectedDOMNode } from "../../utils/prosemirror";
-import { getToolDefinition } from "../../tool-definitions";
-export function TableRowFloatingMenu(props) {
-    var editor = props.editor;
-    var _a = __read(useState(null), 2), position = _a[0], setPosition = _a[1];
-    useEffect(function () {
-        if (!editor.isActive("table")) {
-            setPosition(null);
-            return;
-        }
-        var currentRow = findSelectedDOMNode(editor, ["tableRow"]);
-        if (!currentRow)
-            return;
-        setPosition(function (old) {
-            if ((old === null || old === void 0 ? void 0 : old.target) === currentRow)
-                return old;
-            return {
-                isTargetAbsolute: true,
-                location: "left",
-                xOffset: -5,
-                target: currentRow,
-                // parent: editor.view.dom as HTMLElement,
-            };
-        });
-    }, [editor.state.selection]);
-    if (!position)
-        return null;
-    return (_jsx(PopupPresenter, __assign({ isOpen: true, blocking: false, focusOnRender: false, onClose: function () { }, position: position }, { children: _jsxs(Flex, __assign({ sx: {
-                bg: "background",
-                flexWrap: "nowrap",
-                borderRadius: "default",
-                // opacity: isMenuOpen ? 1 : 0.3,
-                ":hover": {
-                    opacity: 1,
-                },
-            } }, { children: [_jsx(RowProperties, __assign({}, getToolDefinition("rowProperties"), { icon: "more", variant: "small", editor: editor })), _jsx(InsertRowBelow, __assign({}, getToolDefinition("insertRowBelow"), { editor: editor, variant: "small" }))] })) })));
-}
-export function TableColumnFloatingMenu(props) {
-    var editor = props.editor;
-    var _a = __read(useState(null), 2), position = _a[0], setPosition = _a[1];
-    useEffect(function () {
-        var _a;
-        if (!editor.isActive("tableCell") &&
-            !editor.isActive("tableRow") &&
-            !editor.isActive("tableHeader")) {
-            setPosition(null);
-            return;
-        }
-        var $from = editor.state.selection.$from;
-        var selectedNode = $from.node();
-        var pos = selectedNode.isTextblock ? $from.before() : $from.pos;
-        var currentCell = (_a = editor.view.nodeDOM(pos)) === null || _a === void 0 ? void 0 : _a.closest("td,th");
-        var currentTable = currentCell === null || currentCell === void 0 ? void 0 : currentCell.closest("table");
-        if (!currentCell || !currentTable)
-            return;
-        setPosition(function (old) {
-            if ((old === null || old === void 0 ? void 0 : old.target) === currentCell)
-                return old;
-            return {
-                isTargetAbsolute: true,
-                location: "top",
-                align: "center",
-                yAnchor: currentTable,
-                yOffset: 2,
-                target: currentCell,
-            };
-        });
-    }, [editor.state.selection]);
-    if (!position)
-        return null;
-    return (_jsx(PopupPresenter, __assign({ isOpen: true, onClose: function () { }, blocking: false, position: position, focusOnRender: false }, { children: _jsxs(Flex, __assign({ sx: {
-                bg: "background",
-                flexWrap: "nowrap",
-                borderRadius: "default",
-                // opacity: 0.3,
-                //  opacity: isMenuOpen || showCellProps ? 1 : 0.3,
-                ":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" }))] })) })));
-}

packages/editor/dist/toolbar/tools/table.js

@@ -128,23 +128,19 @@ export function CellProperties(props) {
             ] })) }));
 }
 export function CellBackgroundColor(props) {
-    return (_jsx(ColorTool, __assign({}, props, { isActive: function (editor) {
-            return editor.isActive("tableCell", { backgroundColor: /\W+/gm });
-        }, getActiveColor: function (editor) {
+    return (_jsx(ColorTool, __assign({}, props, { cacheKey: "cellBackgroundColor", getActiveColor: function (editor) {
             return editor.getAttributes("tableCell").backgroundColor;
         }, title: "Cell background color", onColorChange: function (editor, color) {
             return editor.chain().setCellAttribute("backgroundColor", color).run();
         } })));
 }
 export function CellTextColor(props) {
-    return (_jsx(ColorTool, __assign({}, props, { isActive: function (editor) { return editor.isActive("tableCell", { color: /\W+/gm }); }, getActiveColor: function (editor) { return editor.getAttributes("tableCell").color; }, title: "Cell text color", onColorChange: function (editor, color) {
+    return (_jsx(ColorTool, __assign({}, props, { cacheKey: "cellTextColor", getActiveColor: function (editor) { return editor.getAttributes("tableCell").color; }, title: "Cell text color", onColorChange: function (editor, color) {
             return editor.chain().focus().setCellAttribute("color", color).run();
         } })));
 }
 export function CellBorderColor(props) {
-    return (_jsx(ColorTool, __assign({}, props, { isActive: function (editor) {
-            return editor.isActive("tableCell", { borderColor: /\W+/gm });
-        }, getActiveColor: function (editor) { return editor.getAttributes("tableCell").borderColor; }, title: "Cell border color", onColorChange: function (editor, color) {
+    return (_jsx(ColorTool, __assign({}, props, { cacheKey: "cellBorderColor", getActiveColor: function (editor) { return editor.getAttributes("tableCell").borderColor; }, title: "Cell border color", onColorChange: function (editor, color) {
             return editor.chain().focus().setCellAttribute("borderColor", color).run();
         } })));
 }

packages/editor/dist/toolbar/tools/utils.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Editor } from "@tiptap/core";
 import { MenuButton } from "../../components/menu/types";
 import { ToolProps } from "../types";

packages/editor/scripts/build.sh

@@ -1,3 +1,4 @@
 ln -s $(realpath ./src/styles.css) $(realpath ./dist/)
+ln -s $(realpath ./src/extensions.d.ts) $(realpath ./dist/)
 
 yarn tsc --watch

packages/editor/src/extensions.d.ts

@@ -0,0 +1,31 @@
+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/link";
+import "./extensions/outline-list";
+import "./extensions/outline-list-item";
+import "./extensions/table";

packages/editor/src/index.ts

@@ -1,3 +1,4 @@
+import "./extensions";
 import CharacterCount from "@tiptap/extension-character-count";
 import Placeholder from "@tiptap/extension-placeholder";
 import Underline from "@tiptap/extension-underline";
@@ -75,6 +76,10 @@ const useTiptap = (
           listItem: false,
           orderedList: false,
           bulletList: false,
+          history: {
+            depth: 200,
+            newGroupDelay: 1000,
+          },
         }),
         Dropcursor.configure({
           class: "drop-cursor",

packages/editor/src/toolbar/floating-menus/search-replace.tsx

@@ -1,34 +1,32 @@
 import { SearchStorage } from "../../extensions/search-replace";
 import { FloatingMenuProps } from "./types";
 import { SearchReplacePopup } from "../popups/search-replace";
-import { DesktopOnly, MobileOnly } from "../../components/responsive";
+import {
+  DesktopOnly,
+  MobileOnly,
+  ResponsivePresenter,
+} from "../../components/responsive";
+import { getToolbarElement } from "../utils/dom";
 
 export function SearchReplaceFloatingMenu(props: FloatingMenuProps) {
   const { editor } = props;
   const { isSearching } = editor.storage.searchreplace as SearchStorage;
 
-  if (!isSearching) return null;
-  return null;
-  // return (
-  //   <>
-  //     <PopupPresenter
-  //       mobile="sheet"
-  //       desktop="menu"
-  //       isOpen
-  //       onClose={() => editor.commands.endSearch()}
-  //       options={{
-  //         type: "autocomplete",
-  //         position: {
-  //           target:
-  //             document.querySelector<HTMLElement>(".editor-toolbar") || "mouse",
-  //           isTargetAbsolute: true,
-  //           location: "below",
-  //           align: "end",
-  //         },
-  //       }}
-  //     >
-  //       <SearchReplacePopup editor={editor} />
-  //     </PopupPresenter>
-  //   </>
-  // );
+  return (
+    <ResponsivePresenter
+      mobile="sheet"
+      desktop="menu"
+      isOpen={isSearching}
+      onClose={() => editor.commands.endSearch()}
+      position={{
+        target: getToolbarElement(),
+        isTargetAbsolute: true,
+        location: "below",
+        align: "end",
+        yOffset: 5,
+      }}
+    >
+      <SearchReplacePopup editor={editor} />
+    </ResponsivePresenter>
+  );
 }

packages/editor/src/toolbar/tools/table.tsx

@@ -199,9 +199,7 @@ export function CellBackgroundColor(props: ToolProps) {
   return (
     <ColorTool
       {...props}
-      isActive={(editor) =>
-        editor.isActive("tableCell", { backgroundColor: /\W+/gm })
-      }
+      cacheKey="cellBackgroundColor"
       getActiveColor={(editor) =>
         editor.getAttributes("tableCell").backgroundColor
       }
@@ -217,7 +215,7 @@ export function CellTextColor(props: ToolProps) {
   return (
     <ColorTool
       {...props}
-      isActive={(editor) => editor.isActive("tableCell", { color: /\W+/gm })}
+      cacheKey="cellTextColor"
       getActiveColor={(editor) => editor.getAttributes("tableCell").color}
       title={"Cell text color"}
       onColorChange={(editor, color) =>
@@ -231,9 +229,7 @@ export function CellBorderColor(props: ToolProps) {
   return (
     <ColorTool
       {...props}
-      isActive={(editor) =>
-        editor.isActive("tableCell", { borderColor: /\W+/gm })
-      }
+      cacheKey="cellBorderColor"
       getActiveColor={(editor) => editor.getAttributes("tableCell").borderColor}
       title={"Cell border color"}
       onColorChange={(editor, color) =>