diff --git a/packages/editor/dist/components/menu/usefocus.d.ts b/packages/editor/dist/components/menu/usefocus.d.ts index 36b4ee2ca..66f324efc 100644 --- a/packages/editor/dist/components/menu/usefocus.d.ts +++ b/packages/editor/dist/components/menu/usefocus.d.ts @@ -1,4 +1,3 @@ -/// import { MenuItem } from "./types"; export declare function useFocus(items: MenuItem[], onAction: (event: KeyboardEvent) => void, onClose: (event: KeyboardEvent) => void): { focusIndex: number; diff --git a/packages/editor/dist/extensions.d.ts b/packages/editor/dist/extensions.d.ts new file mode 120000 index 000000000..530154d80 --- /dev/null +++ b/packages/editor/dist/extensions.d.ts @@ -0,0 +1 @@ +/home/thecodrr/Sources/Repos/notesnook-editor/src/extensions.d.ts \ No newline at end of file diff --git a/packages/editor/dist/extensions/react/reactportalprovider.d.ts b/packages/editor/dist/extensions/react/reactportalprovider.d.ts index 62e1d0f5c..b3df1ee34 100644 --- a/packages/editor/dist/extensions/react/reactportalprovider.d.ts +++ b/packages/editor/dist/extensions/react/reactportalprovider.d.ts @@ -23,7 +23,7 @@ export declare class PortalProvider extends React.Component 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 }))); -} diff --git a/packages/editor/dist/toolbar/floatingmenus/searchreplace.d.ts b/packages/editor/dist/toolbar/floatingmenus/searchreplace.d.ts index aa18f7a1a..66a0fa228 100644 --- a/packages/editor/dist/toolbar/floatingmenus/searchreplace.d.ts +++ b/packages/editor/dist/toolbar/floatingmenus/searchreplace.d.ts @@ -1,2 +1,3 @@ +/// import { FloatingMenuProps } from "./types"; -export declare function SearchReplaceFloatingMenu(props: FloatingMenuProps): null; +export declare function SearchReplaceFloatingMenu(props: FloatingMenuProps): JSX.Element; diff --git a/packages/editor/dist/toolbar/floatingmenus/searchreplace.js b/packages/editor/dist/toolbar/floatingmenus/searchreplace.js index 23b13f4da..bba00fcea 100644 --- a/packages/editor/dist/toolbar/floatingmenus/searchreplace.js +++ b/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 ( - // <> - // editor.commands.endSearch()} - // options={{ - // type: "autocomplete", - // position: { - // target: - // document.querySelector(".editor-toolbar") || "mouse", - // isTargetAbsolute: true, - // location: "below", - // align: "end", - // }, - // }} - // > - // - // - // - // ); + 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 }) }))); } diff --git a/packages/editor/dist/toolbar/floatingmenus/table/actions.d.ts b/packages/editor/dist/toolbar/floatingmenus/table/actions.d.ts deleted file mode 100644 index c4a829775..000000000 --- a/packages/editor/dist/toolbar/floatingmenus/table/actions.d.ts +++ /dev/null @@ -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 }; diff --git a/packages/editor/dist/toolbar/floatingmenus/table/actions.js b/packages/editor/dist/toolbar/floatingmenus/table/actions.js deleted file mode 100644 index 2774ab1fe..000000000 --- a/packages/editor/dist/toolbar/floatingmenus/table/actions.js +++ /dev/null @@ -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 }; diff --git a/packages/editor/dist/toolbar/floatingmenus/table/index.d.ts b/packages/editor/dist/toolbar/floatingmenus/table/index.d.ts deleted file mode 100644 index 68a7f6136..000000000 --- a/packages/editor/dist/toolbar/floatingmenus/table/index.d.ts +++ /dev/null @@ -1 +0,0 @@ -export { TableColumnFloatingMenu, TableRowFloatingMenu } from "./table"; diff --git a/packages/editor/dist/toolbar/floatingmenus/table/index.js b/packages/editor/dist/toolbar/floatingmenus/table/index.js deleted file mode 100644 index 68a7f6136..000000000 --- a/packages/editor/dist/toolbar/floatingmenus/table/index.js +++ /dev/null @@ -1 +0,0 @@ -export { TableColumnFloatingMenu, TableRowFloatingMenu } from "./table"; diff --git a/packages/editor/dist/toolbar/floatingmenus/table/table.d.ts b/packages/editor/dist/toolbar/floatingmenus/table/table.d.ts deleted file mode 100644 index a5bcaf42d..000000000 --- a/packages/editor/dist/toolbar/floatingmenus/table/table.d.ts +++ /dev/null @@ -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; diff --git a/packages/editor/dist/toolbar/floatingmenus/table/table.js b/packages/editor/dist/toolbar/floatingmenus/table/table.js deleted file mode 100644 index e962536b5..000000000 --- a/packages/editor/dist/toolbar/floatingmenus/table/table.js +++ /dev/null @@ -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" }))] })) }))); -} diff --git a/packages/editor/dist/toolbar/tools/table.js b/packages/editor/dist/toolbar/tools/table.js index 5e0eed249..56cc0014a 100644 --- a/packages/editor/dist/toolbar/tools/table.js +++ b/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(); } }))); } diff --git a/packages/editor/dist/toolbar/tools/utils.d.ts b/packages/editor/dist/toolbar/tools/utils.d.ts index 2aaf4fe1f..173fe5f55 100644 --- a/packages/editor/dist/toolbar/tools/utils.d.ts +++ b/packages/editor/dist/toolbar/tools/utils.d.ts @@ -1,4 +1,3 @@ -/// import { Editor } from "@tiptap/core"; import { MenuButton } from "../../components/menu/types"; import { ToolProps } from "../types"; diff --git a/packages/editor/scripts/build.sh b/packages/editor/scripts/build.sh index 13724fa53..53f25e3fc 100755 --- a/packages/editor/scripts/build.sh +++ b/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 \ No newline at end of file diff --git a/packages/editor/src/extensions.d.ts b/packages/editor/src/extensions.d.ts new file mode 100644 index 000000000..27031ae24 --- /dev/null +++ b/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"; diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts index db23e3345..8c7aaaa18 100644 --- a/packages/editor/src/index.ts +++ b/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", diff --git a/packages/editor/src/toolbar/floating-menus/search-replace.tsx b/packages/editor/src/toolbar/floating-menus/search-replace.tsx index 80a2dd803..d3da75863 100644 --- a/packages/editor/src/toolbar/floating-menus/search-replace.tsx +++ b/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 ( - // <> - // editor.commands.endSearch()} - // options={{ - // type: "autocomplete", - // position: { - // target: - // document.querySelector(".editor-toolbar") || "mouse", - // isTargetAbsolute: true, - // location: "below", - // align: "end", - // }, - // }} - // > - // - // - // - // ); + return ( + editor.commands.endSearch()} + position={{ + target: getToolbarElement(), + isTargetAbsolute: true, + location: "below", + align: "end", + yOffset: 5, + }} + > + + + ); } diff --git a/packages/editor/src/toolbar/tools/table.tsx b/packages/editor/src/toolbar/tools/table.tsx index 1bf8f1437..cd17b0f7d 100644 --- a/packages/editor/src/toolbar/tools/table.tsx +++ b/packages/editor/src/toolbar/tools/table.tsx @@ -199,9 +199,7 @@ export function CellBackgroundColor(props: ToolProps) { return ( - editor.isActive("tableCell", { backgroundColor: /\W+/gm }) - } + cacheKey="cellBackgroundColor" getActiveColor={(editor) => editor.getAttributes("tableCell").backgroundColor } @@ -217,7 +215,7 @@ export function CellTextColor(props: ToolProps) { return ( 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 ( - editor.isActive("tableCell", { borderColor: /\W+/gm }) - } + cacheKey="cellBorderColor" getActiveColor={(editor) => editor.getAttributes("tableCell").borderColor} title={"Cell border color"} onColorChange={(editor, color) =>