diff --git a/packages/editor/dist/extensions/react/Editor.d.ts b/packages/editor/dist/extensions/react/Editor.d.ts deleted file mode 100644 index 20f906c4a..000000000 --- a/packages/editor/dist/extensions/react/Editor.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import { Editor as CoreEditor } from '@tiptap/core'; -import { EditorContentProps, EditorContentState } from './EditorContent'; -export declare class Editor extends CoreEditor { - contentComponent: React.Component | null; -} diff --git a/packages/editor/dist/extensions/react/Editor.js b/packages/editor/dist/extensions/react/Editor.js deleted file mode 100644 index 55ec62914..000000000 --- a/packages/editor/dist/extensions/react/Editor.js +++ /dev/null @@ -1,26 +0,0 @@ -var __extends = (this && this.__extends) || (function () { - var extendStatics = function (d, b) { - extendStatics = Object.setPrototypeOf || - ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || - function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; - return extendStatics(d, b); - }; - return function (d, b) { - if (typeof b !== "function" && b !== null) - throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); - extendStatics(d, b); - function __() { this.constructor = d; } - d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); - }; -})(); -import { Editor as CoreEditor } from '@tiptap/core'; -var Editor = /** @class */ (function (_super) { - __extends(Editor, _super); - function Editor() { - var _this = _super !== null && _super.apply(this, arguments) || this; - _this.contentComponent = null; - return _this; - } - return Editor; -}(CoreEditor)); -export { Editor }; diff --git a/packages/editor/dist/extensions/react/EditorContent.d.ts b/packages/editor/dist/extensions/react/EditorContent.d.ts deleted file mode 100644 index ff4973e49..000000000 --- a/packages/editor/dist/extensions/react/EditorContent.d.ts +++ /dev/null @@ -1,19 +0,0 @@ -import React, { HTMLProps } from 'react'; -import { Editor } from './Editor'; -import { ReactRenderer } from './ReactRenderer'; -export interface EditorContentProps extends HTMLProps { - editor: Editor | null; -} -export interface EditorContentState { - renderers: Map; -} -export declare class PureEditorContent extends React.Component { - editorContentRef: React.RefObject; - constructor(props: EditorContentProps); - componentDidMount(): void; - componentDidUpdate(): void; - init(): void; - componentWillUnmount(): void; - render(): JSX.Element; -} -export declare const EditorContent: React.MemoExoticComponent; diff --git a/packages/editor/dist/extensions/react/EditorContent.js b/packages/editor/dist/extensions/react/EditorContent.js deleted file mode 100644 index 18569ed2c..000000000 --- a/packages/editor/dist/extensions/react/EditorContent.js +++ /dev/null @@ -1,131 +0,0 @@ -var __extends = (this && this.__extends) || (function () { - var extendStatics = function (d, b) { - extendStatics = Object.setPrototypeOf || - ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || - function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; - return extendStatics(d, b); - }; - return function (d, b) { - if (typeof b !== "function" && b !== null) - throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); - extendStatics(d, b); - function __() { this.constructor = d; } - d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); - }; -})(); -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 __rest = (this && this.__rest) || function (s, e) { - var t = {}; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) - t[p] = s[p]; - if (s != null && typeof Object.getOwnPropertySymbols === "function") - for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { - if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) - t[p[i]] = s[p[i]]; - } - return t; -}; -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; -}; -var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) { - if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { - if (ar || !(i in from)) { - if (!ar) ar = Array.prototype.slice.call(from, 0, i); - ar[i] = from[i]; - } - } - return to.concat(ar || Array.prototype.slice.call(from)); -}; -import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; -import React from 'react'; -import ReactDOM from 'react-dom'; -var Portals = function (_a) { - var renderers = _a.renderers; - return (_jsx(_Fragment, { children: Array.from(renderers).map(function (_a) { - var _b = __read(_a, 2), key = _b[0], renderer = _b[1]; - return ReactDOM.createPortal(renderer.reactElement, renderer.element, key); - }) })); -}; -var PureEditorContent = /** @class */ (function (_super) { - __extends(PureEditorContent, _super); - function PureEditorContent(props) { - var _this = _super.call(this, props) || this; - _this.editorContentRef = React.createRef(); - _this.state = { - renderers: new Map(), - }; - return _this; - } - PureEditorContent.prototype.componentDidMount = function () { - this.init(); - }; - PureEditorContent.prototype.componentDidUpdate = function () { - this.init(); - }; - PureEditorContent.prototype.init = function () { - var editor = this.props.editor; - if (editor && editor.options.element) { - if (editor.contentComponent) { - return; - } - var element = this.editorContentRef.current; - element.append.apply(element, __spreadArray([], __read(editor.options.element.childNodes), false)); - editor.setOptions({ - element: element, - }); - editor.contentComponent = this; - editor.createNodeViews(); - } - }; - PureEditorContent.prototype.componentWillUnmount = function () { - var editor = this.props.editor; - if (!editor) { - return; - } - if (!editor.isDestroyed) { - editor.view.setProps({ - nodeViews: {}, - }); - } - editor.contentComponent = null; - if (!editor.options.element.firstChild) { - return; - } - var newElement = document.createElement('div'); - newElement.append.apply(newElement, __spreadArray([], __read(editor.options.element.childNodes), false)); - editor.setOptions({ - element: newElement, - }); - }; - PureEditorContent.prototype.render = function () { - var _a = this.props, editor = _a.editor, rest = __rest(_a, ["editor"]); - return (_jsxs(_Fragment, { children: [_jsx("div", __assign({ ref: this.editorContentRef }, rest)), _jsx(Portals, { renderers: this.state.renderers })] })); - }; - return PureEditorContent; -}(React.Component)); -export { PureEditorContent }; -export var EditorContent = React.memo(PureEditorContent); diff --git a/packages/editor/dist/extensions/react/NodeViewContent.d.ts b/packages/editor/dist/extensions/react/NodeViewContent.d.ts deleted file mode 100644 index 3d0ae2fd5..000000000 --- a/packages/editor/dist/extensions/react/NodeViewContent.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -import React from "react"; -export interface NodeViewContentProps { - [key: string]: any; - as?: React.ElementType; -} -export declare const NodeViewContent: React.FC; diff --git a/packages/editor/dist/extensions/react/NodeViewContent.js b/packages/editor/dist/extensions/react/NodeViewContent.js deleted file mode 100644 index a58583f46..000000000 --- a/packages/editor/dist/extensions/react/NodeViewContent.js +++ /dev/null @@ -1,30 +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 __rest = (this && this.__rest) || function (s, e) { - var t = {}; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) - t[p] = s[p]; - if (s != null && typeof Object.getOwnPropertySymbols === "function") - for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { - if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) - t[p[i]] = s[p[i]]; - } - return t; -}; -import { jsx as _jsx } from "react/jsx-runtime"; -import { useReactNodeView } from "./useReactNodeView"; -export var NodeViewContent = function (_a) { - var as = _a.as, props = __rest(_a, ["as"]); - var Tag = as || "div"; - var nodeViewContentRef = useReactNodeView().nodeViewContentRef; - return (_jsx(Tag, __assign({}, props, { ref: nodeViewContentRef, "data-node-view-content": "", style: __assign(__assign({}, props.style), { whiteSpace: "pre-wrap" }) }))); -}; diff --git a/packages/editor/dist/extensions/react/NodeViewWrapper.d.ts b/packages/editor/dist/extensions/react/NodeViewWrapper.d.ts deleted file mode 100644 index 9879283a2..000000000 --- a/packages/editor/dist/extensions/react/NodeViewWrapper.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -export interface NodeViewWrapperProps { - [key: string]: any; - as?: React.ElementType; -} -export declare const NodeViewWrapper: React.FC; diff --git a/packages/editor/dist/extensions/react/NodeViewWrapper.js b/packages/editor/dist/extensions/react/NodeViewWrapper.js deleted file mode 100644 index c886e879c..000000000 --- a/packages/editor/dist/extensions/react/NodeViewWrapper.js +++ /dev/null @@ -1,19 +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 React from 'react'; -import { useReactNodeView } from './useReactNodeView'; -export var NodeViewWrapper = React.forwardRef(function (props, ref) { - var onDragStart = useReactNodeView().onDragStart; - var Tag = props.as || 'div'; - return (_jsx(Tag, __assign({}, props, { ref: ref, "data-node-view-wrapper": "", onDragStart: onDragStart, style: __assign(__assign({}, props.style), { whiteSpace: 'normal' }) }))); -}); diff --git a/packages/editor/dist/extensions/react/ReactNodeView.d.ts b/packages/editor/dist/extensions/react/ReactNodeView.d.ts deleted file mode 100644 index da2e74f45..000000000 --- a/packages/editor/dist/extensions/react/ReactNodeView.d.ts +++ /dev/null @@ -1,50 +0,0 @@ -import React from "react"; -import { NodeView, Decoration, DecorationSource } from "prosemirror-view"; -import { Node as PMNode } from "prosemirror-model"; -import { PortalProviderAPI } from "./ReactNodeViewPortals"; -import { EventDispatcher } from "./event-dispatcher"; -import { ReactComponentProps, ReactNodeViewOptions, GetPos, ForwardRef, ContentDOM } from "./types"; -import { Editor, NodeViewRendererProps } from "@tiptap/core"; -export declare class ReactNodeView

implements NodeView { - protected readonly editor: Editor; - protected readonly getPos: GetPos; - protected readonly portalProviderAPI: PortalProviderAPI; - protected readonly eventDispatcher: EventDispatcher; - protected readonly options: ReactNodeViewOptions

; - private domRef; - private contentDOMWrapper?; - contentDOM: HTMLElement | undefined; - node: PMNode; - constructor(node: PMNode, editor: Editor, getPos: GetPos, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, options: ReactNodeViewOptions

); - /** - * This method exists to move initialization logic out of the constructor, - * so object can be initialized properly before calling render first time. - * - * Example: - * Instance properties get added to an object only after super call in - * constructor, which leads to some methods being undefined during the - * first render. - */ - init(): this; - private renderReactComponent; - createDomRef(): HTMLElement; - getContentDOM(): ContentDOM; - handleRef: (node: HTMLElement | null) => void; - private _handleRef; - render(props?: P, forwardRef?: ForwardRef): React.ReactElement | null; - private updateAttributes; - update(node: PMNode, _decorations: readonly Decoration[], _innerDecorations: DecorationSource): boolean; - ignoreMutation(mutation: MutationRecord | { - type: "selection"; - target: Element; - }): boolean; - viewShouldUpdate(nextNode: PMNode): boolean; - /** - * Copies the attributes from a ProseMirror Node to a DOM node. - * @param node The Prosemirror Node from which to source the attributes - */ - setDomAttrs(node: PMNode, element: HTMLElement): void; - get dom(): HTMLElement; - destroy(): void; - static fromComponent(component: React.ComponentType, options?: Omit, "component">): ({ node, getPos, editor }: NodeViewRendererProps) => ReactNodeView; -} diff --git a/packages/editor/dist/extensions/react/ReactNodeView.js b/packages/editor/dist/extensions/react/ReactNodeView.js deleted file mode 100644 index 782641179..000000000 --- a/packages/editor/dist/extensions/react/ReactNodeView.js +++ /dev/null @@ -1,241 +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; -}; -var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) { - if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { - if (ar || !(i in from)) { - if (!ar) ar = Array.prototype.slice.call(from, 0, i); - ar[i] = from[i]; - } - } - return to.concat(ar || Array.prototype.slice.call(from)); -}; -import { jsx as _jsx } from "react/jsx-runtime"; -var ReactNodeView = /** @class */ (function () { - function ReactNodeView(node, editor, getPos, portalProviderAPI, eventDispatcher, options) { - var _this = this; - this.editor = editor; - this.getPos = getPos; - this.portalProviderAPI = portalProviderAPI; - this.eventDispatcher = eventDispatcher; - this.options = options; - this.handleRef = function (node) { return _this._handleRef(node); }; - this.node = node; - } - /** - * This method exists to move initialization logic out of the constructor, - * so object can be initialized properly before calling render first time. - * - * Example: - * Instance properties get added to an object only after super call in - * constructor, which leads to some methods being undefined during the - * first render. - */ - ReactNodeView.prototype.init = function () { - var _this = this; - this.domRef = this.createDomRef(); - // this.setDomAttrs(this.node, this.domRef); - var _a = this.getContentDOM() || { - dom: undefined, - contentDOM: undefined, - }, contentDOMWrapper = _a.dom, contentDOM = _a.contentDOM; - if (this.domRef && contentDOMWrapper) { - this.domRef.appendChild(contentDOMWrapper); - this.contentDOM = contentDOM ? contentDOM : contentDOMWrapper; - this.contentDOMWrapper = contentDOMWrapper || contentDOM; - } - // @see ED-3790 - // something gets messed up during mutation processing inside of a - // nodeView if DOM structure has nested plain "div"s, it doesn't see the - // difference between them and it kills the nodeView - this.domRef.classList.add("".concat(this.node.type.name, "-view-content-wrap")); - this.renderReactComponent(function () { - return _this.render(_this.options.props, _this.handleRef); - }); - return this; - }; - ReactNodeView.prototype.renderReactComponent = function (component) { - if (!this.domRef || !component) { - return; - } - this.portalProviderAPI.render(component, this.domRef); - }; - ReactNodeView.prototype.createDomRef = function () { - if (this.options.wrapperFactory) - return this.options.wrapperFactory(); - if (!this.node.isInline) { - return document.createElement("div"); - } - var htmlElement = document.createElement("span"); - return htmlElement; - }; - ReactNodeView.prototype.getContentDOM = function () { - var _a, _b; - return (_b = (_a = this.options).contentDOMFactory) === null || _b === void 0 ? void 0 : _b.call(_a); - }; - ReactNodeView.prototype._handleRef = function (node) { - var contentDOM = this.contentDOMWrapper || this.contentDOM; - // move the contentDOM node inside the inner reference after rendering - if (node && contentDOM && !node.contains(contentDOM)) { - node.appendChild(contentDOM); - } - }; - ReactNodeView.prototype.render = function (props, forwardRef) { - var _this = this; - if (props === void 0) { props = {}; } - if (!this.options.component) - return null; - return (_jsx(this.options.component, __assign({}, props, { editor: this.editor, getPos: this.getPos, node: this.node, forwardRef: forwardRef, updateAttributes: function (attr) { return _this.updateAttributes(attr); } }))); - }; - ReactNodeView.prototype.updateAttributes = function (attributes) { - var _this = this; - this.editor.commands.command(function (_a) { - var tr = _a.tr; - if (typeof _this.getPos === "boolean") - return false; - var pos = _this.getPos(); - tr.setNodeMarkup(pos, undefined, __assign(__assign({}, _this.node.attrs), attributes)); - return true; - }); - }; - ReactNodeView.prototype.update = function (node, _decorations, _innerDecorations - // _innerDecorations?: Array, - // validUpdate: (currentNode: PMNode, newNode: PMNode) => boolean = () => true - ) { - var _this = this; - // @see https://github.com/ProseMirror/prosemirror/issues/648 - var isValidUpdate = this.node.type === node.type; // && validUpdate(this.node, node); - if (!isValidUpdate) { - return false; - } - // if (this.domRef && !this.node.sameMarkup(node)) { - // this.setDomAttrs(node, this.domRef); - // } - // View should not process a re-render if this is false. - // We dont want to destroy the view, so we return true. - if (!this.viewShouldUpdate(node)) { - this.node = node; - return true; - } - this.node = node; - this.renderReactComponent(function () { - return _this.render(_this.options.props, _this.handleRef); - }); - return true; - }; - ReactNodeView.prototype.ignoreMutation = function (mutation) { - if (!this.dom || !this.contentDOM) { - return true; - } - // TODO if (typeof this.options.ignoreMutation === 'function') { - // return this.options.ignoreMutation({ mutation }) - // } - // a leaf/atom node is like a black box for ProseMirror - // and should be fully handled by the node view - if (this.node.isLeaf || this.node.isAtom) { - return true; - } - // ProseMirror should handle any selections - if (mutation.type === "selection") { - return false; - } - // try to prevent a bug on mobiles that will break node views on enter - // this is because ProseMirror can’t preventDispatch on enter - // this will lead to a re-render of the node view on enter - // see: https://github.com/ueberdosis/tiptap/issues/1214 - if (this.dom.contains(mutation.target) && - mutation.type === "childList" && - this.editor.isFocused) { - var changedNodes = __spreadArray(__spreadArray([], __read(Array.from(mutation.addedNodes)), false), __read(Array.from(mutation.removedNodes)), false); - // we’ll check if every changed node is contentEditable - // to make sure it’s probably mutated by ProseMirror - if (changedNodes.every(function (node) { return node.isContentEditable; })) { - return false; - } - } - // we will allow mutation contentDOM with attributes - // so we can for example adding classes within our node view - if (this.contentDOM === mutation.target && mutation.type === "attributes") { - return true; - } - // ProseMirror should handle any changes within contentDOM - if (this.contentDOM.contains(mutation.target)) { - return false; - } - return true; - }; - ReactNodeView.prototype.viewShouldUpdate = function (nextNode) { - if (this.options.shouldUpdate) - return this.options.shouldUpdate(this.node, nextNode); - return true; - }; - /** - * Copies the attributes from a ProseMirror Node to a DOM node. - * @param node The Prosemirror Node from which to source the attributes - */ - ReactNodeView.prototype.setDomAttrs = function (node, element) { - Object.keys(node.attrs || {}).forEach(function (attr) { - element.setAttribute(attr, node.attrs[attr]); - }); - }; - Object.defineProperty(ReactNodeView.prototype, "dom", { - get: function () { - return this.domRef; - }, - enumerable: false, - configurable: true - }); - ReactNodeView.prototype.destroy = function () { - if (!this.domRef) { - return; - } - this.portalProviderAPI.remove(this.domRef); - // @ts-ignore NEW PM API - this.domRef = undefined; - this.contentDOM = undefined; - }; - ReactNodeView.fromComponent = function (component, options) { - return function (_a) { - var node = _a.node, getPos = _a.getPos, editor = _a.editor; - return new ReactNodeView(node, editor, getPos, editor.storage.portalProviderAPI, editor.storage.eventDispatcher, __assign(__assign({}, options), { component: component })).init(); - }; - }; - return ReactNodeView; -}()); -export { ReactNodeView }; -function isiOS() { - return ([ - "iPad Simulator", - "iPhone Simulator", - "iPod Simulator", - "iPad", - "iPhone", - "iPod", - ].includes(navigator.platform) || - // iPad on iOS 13 detection - (navigator.userAgent.includes("Mac") && "ontouchend" in document)); -} diff --git a/packages/editor/dist/extensions/react/ReactNodeViewPortals.d.ts b/packages/editor/dist/extensions/react/ReactNodeViewPortals.d.ts deleted file mode 100644 index b3df1ee34..000000000 --- a/packages/editor/dist/extensions/react/ReactNodeViewPortals.d.ts +++ /dev/null @@ -1,38 +0,0 @@ -import React from "react"; -import { EventDispatcher } from "./event-dispatcher"; -export declare type BasePortalProviderProps = { - render: (portalProviderAPI: PortalProviderAPI) => React.ReactChild | JSX.Element | null; -}; -export declare type Portals = Map; -export declare type PortalRendererState = { - portals: Portals; -}; -declare type MountedPortal = { - children: () => React.ReactChild | null; -}; -export declare class PortalProviderAPI extends EventDispatcher { - portals: Map; - context: any; - constructor(); - setContext: (context: any) => void; - render(children: () => React.ReactChild | JSX.Element | null, container: HTMLElement): void; - forceUpdate(): void; - remove(container: HTMLElement): void; -} -export declare class PortalProvider extends React.Component { - static displayName: string; - portalProviderAPI: PortalProviderAPI; - constructor(props: BasePortalProviderProps); - render(): React.ReactChild | JSX.Element | null; - componentDidUpdate(): void; -} -export declare class PortalRenderer extends React.Component<{ - portalProviderAPI: PortalProviderAPI; -}, PortalRendererState> { - constructor(props: { - portalProviderAPI: PortalProviderAPI; - }); - handleUpdate: (portals: Portals) => void; - render(): JSX.Element; -} -export {}; diff --git a/packages/editor/dist/extensions/react/ReactNodeViewPortals.js b/packages/editor/dist/extensions/react/ReactNodeViewPortals.js deleted file mode 100644 index c059549da..000000000 --- a/packages/editor/dist/extensions/react/ReactNodeViewPortals.js +++ /dev/null @@ -1,111 +0,0 @@ -var __extends = (this && this.__extends) || (function () { - var extendStatics = function (d, b) { - extendStatics = Object.setPrototypeOf || - ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || - function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; - return extendStatics(d, b); - }; - return function (d, b) { - if (typeof b !== "function" && b !== null) - throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); - extendStatics(d, b); - function __() { this.constructor = d; } - d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); - }; -})(); -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 { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime"; -import React from "react"; -import { createPortal, unstable_renderSubtreeIntoContainer, unmountComponentAtNode, } from "react-dom"; -import { EventDispatcher } from "./event-dispatcher"; -var PortalProviderAPI = /** @class */ (function (_super) { - __extends(PortalProviderAPI, _super); - function PortalProviderAPI() { - var _this = _super.call(this) || this; - _this.portals = new Map(); - _this.setContext = function (context) { - _this.context = context; - }; - return _this; - } - PortalProviderAPI.prototype.render = function (children, container) { - this.portals.set(container, { - children: children, - }); - var wrappedChildren = children(); - unstable_renderSubtreeIntoContainer(this.context, wrappedChildren, container); - }; - // TODO: until https://product-fabric.atlassian.net/browse/ED-5013 - // we (unfortunately) need to re-render to pass down any updated context. - // selectively do this for nodeviews that opt-in via `hasAnalyticsContext` - PortalProviderAPI.prototype.forceUpdate = function () { }; - PortalProviderAPI.prototype.remove = function (container) { - this.portals.delete(container); - // There is a race condition that can happen caused by Prosemirror vs React, - // where Prosemirror removes the container from the DOM before React gets - // around to removing the child from the container - // This will throw a NotFoundError: The node to be removed is not a child of this node - // Both Prosemirror and React remove the elements asynchronously, and in edge - // cases Prosemirror beats React - try { - unmountComponentAtNode(container); - } - catch (error) { - console.error(error); - } - }; - return PortalProviderAPI; -}(EventDispatcher)); -export { PortalProviderAPI }; -var PortalProvider = /** @class */ (function (_super) { - __extends(PortalProvider, _super); - function PortalProvider(props) { - var _this = _super.call(this, props) || this; - _this.portalProviderAPI = new PortalProviderAPI(); - return _this; - } - PortalProvider.prototype.render = function () { - return this.props.render(this.portalProviderAPI); - }; - PortalProvider.prototype.componentDidUpdate = function () { - this.portalProviderAPI.forceUpdate(); - }; - PortalProvider.displayName = "PortalProvider"; - return PortalProvider; -}(React.Component)); -export { PortalProvider }; -var PortalRenderer = /** @class */ (function (_super) { - __extends(PortalRenderer, _super); - function PortalRenderer(props) { - var _this = _super.call(this, props) || this; - _this.handleUpdate = function (portals) { return _this.setState({ portals: portals }); }; - props.portalProviderAPI.setContext(_this); - props.portalProviderAPI.on("update", _this.handleUpdate); - _this.state = { portals: new Map() }; - return _this; - } - PortalRenderer.prototype.render = function () { - var portals = this.state.portals; - return (_jsx(_Fragment, { children: Array.from(portals.entries()).map(function (_a) { - var _b = __read(_a, 2), container = _b[0], children = _b[1]; - return createPortal(children, container); - }) })); - }; - return PortalRenderer; -}(React.Component)); -export { PortalRenderer }; diff --git a/packages/editor/dist/extensions/react/ReactNodeViewRenderer.d.ts b/packages/editor/dist/extensions/react/ReactNodeViewRenderer.d.ts deleted file mode 100644 index 2065ca147..000000000 --- a/packages/editor/dist/extensions/react/ReactNodeViewRenderer.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { NodeViewRenderer, NodeViewRendererOptions } from "@tiptap/core"; -import { Decoration } from "prosemirror-view"; -import { Node as ProseMirrorNode } from "prosemirror-model"; -export interface ReactNodeViewRendererOptions extends NodeViewRendererOptions { - update: ((props: { - oldNode: ProseMirrorNode; - oldDecorations: Decoration[]; - newNode: ProseMirrorNode; - newDecorations: Decoration[]; - updateProps: () => void; - }) => boolean) | null; - as?: string; - className?: string; -} -export declare function ReactNodeViewRenderer(component: any, options?: Partial): NodeViewRenderer; diff --git a/packages/editor/dist/extensions/react/ReactNodeViewRenderer.js b/packages/editor/dist/extensions/react/ReactNodeViewRenderer.js deleted file mode 100644 index af762ff68..000000000 --- a/packages/editor/dist/extensions/react/ReactNodeViewRenderer.js +++ /dev/null @@ -1,194 +0,0 @@ -var __extends = (this && this.__extends) || (function () { - var extendStatics = function (d, b) { - extendStatics = Object.setPrototypeOf || - ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || - function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; - return extendStatics(d, b); - }; - return function (d, b) { - if (typeof b !== "function" && b !== null) - throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); - extendStatics(d, b); - function __() { this.constructor = d; } - d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); - }; -})(); -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; -}; -var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) { - if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { - if (ar || !(i in from)) { - if (!ar) ar = Array.prototype.slice.call(from, 0, i); - ar[i] = from[i]; - } - } - return to.concat(ar || Array.prototype.slice.call(from)); -}; -import { jsx as _jsx } from "react/jsx-runtime"; -import { NodeView, } from "@tiptap/core"; -import { ReactRenderer } from "./ReactRenderer"; -import { ReactNodeViewContext, } from "./useReactNodeView"; -var ReactNodeView = /** @class */ (function (_super) { - __extends(ReactNodeView, _super); - function ReactNodeView() { - return _super !== null && _super.apply(this, arguments) || this; - } - ReactNodeView.prototype.mount = function () { - var _this = this; - var props = { - editor: this.editor, - node: this.node, - decorations: this.decorations, - selected: false, - extension: this.extension, - getPos: function () { return _this.getPos(); }, - updateAttributes: function (attributes) { - if (attributes === void 0) { attributes = {}; } - return _this.updateAttributes(attributes); - }, - deleteNode: function () { return _this.deleteNode(); }, - }; - if (!this.component.displayName) { - var capitalizeFirstChar = function (string) { - return string.charAt(0).toUpperCase() + string.substring(1); - }; - this.component.displayName = capitalizeFirstChar(this.extension.name); - } - var ReactNodeViewProvider = function (componentProps) { - var Component = _this.component; - var onDragStart = _this.onDragStart.bind(_this); - var nodeViewContentRef = function (element) { - if (element && - _this.contentDOMElement && - element.firstChild !== _this.contentDOMElement) { - element.appendChild(_this.contentDOMElement); - } - }; - return (_jsx(ReactNodeViewContext.Provider, __assign({ value: { onDragStart: onDragStart, nodeViewContentRef: nodeViewContentRef } }, { children: _jsx(Component, __assign({}, componentProps)) }))); - }; - ReactNodeViewProvider.displayName = "ReactNodeView"; - this.contentDOMElement = this.node.isLeaf - ? null - : document.createElement(this.node.isInline ? "span" : "div"); - if (this.contentDOMElement) { - // For some reason the whiteSpace prop is not inherited properly in Chrome and Safari - // With this fix it seems to work fine - // See: https://github.com/ueberdosis/tiptap/issues/1197 - this.contentDOMElement.style.whiteSpace = "inherit"; - } - var as = this.node.isInline ? "span" : "div"; - if (this.options.as) { - as = this.options.as; - } - var _a = this.options.className, className = _a === void 0 ? "" : _a; - this.renderer = new ReactRenderer(ReactNodeViewProvider, { - editor: this.editor, - props: props, - as: as, - className: "node-".concat(this.node.type.name, " ").concat(className).trim(), - }); - }; - Object.defineProperty(ReactNodeView.prototype, "dom", { - get: function () { - var _a; - if (this.renderer.element.firstElementChild && - !((_a = this.renderer.element.firstElementChild) === null || _a === void 0 ? void 0 : _a.hasAttribute("data-node-view-wrapper"))) { - throw Error("Please use the NodeViewWrapper component for your node view."); - } - return this.renderer.element; - }, - enumerable: false, - configurable: true - }); - Object.defineProperty(ReactNodeView.prototype, "contentDOM", { - get: function () { - if (this.node.isLeaf) { - return null; - } - return this.contentDOMElement; - }, - enumerable: false, - configurable: true - }); - ReactNodeView.prototype.update = function (node, readonlyDecorations, innerDecorations) { - var _this = this; - var decorations = __spreadArray([], __read(readonlyDecorations), false); - var updateProps = function (props) { - _this.renderer.updateProps(props); - }; - if (node.type !== this.node.type) { - return false; - } - if (typeof this.options.update === "function") { - var oldNode = this.node; - var oldDecorations = this.decorations; - this.node = node; - this.decorations = decorations; - return this.options.update({ - oldNode: oldNode, - oldDecorations: oldDecorations, - newNode: node, - newDecorations: decorations, - updateProps: function () { return updateProps({ node: node, decorations: decorations }); }, - }); - } - if (node === this.node && this.decorations === decorations) { - return true; - } - this.node = node; - this.decorations = decorations; - updateProps({ node: node, decorations: decorations }); - return true; - }; - ReactNodeView.prototype.selectNode = function () { - this.renderer.updateProps({ - selected: true, - }); - }; - ReactNodeView.prototype.deselectNode = function () { - this.renderer.updateProps({ - selected: false, - }); - }; - ReactNodeView.prototype.destroy = function () { - this.renderer.destroy(); - this.contentDOMElement = null; - }; - return ReactNodeView; -}(NodeView)); -export function ReactNodeViewRenderer(component, options) { - return function (props) { - // try to get the parent component - // this is important for vue devtools to show the component hierarchy correctly - // maybe it’s `undefined` because isn’t rendered yet - if (!props.editor.contentComponent) { - return {}; - } - return new ReactNodeView(component, props, options); - }; -} diff --git a/packages/editor/dist/extensions/react/ReactRenderer.d.ts b/packages/editor/dist/extensions/react/ReactRenderer.d.ts deleted file mode 100644 index 10ee232d0..000000000 --- a/packages/editor/dist/extensions/react/ReactRenderer.d.ts +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { Editor } from '@tiptap/core'; -import { Editor as ExtendedEditor } from './Editor'; -export interface ReactRendererOptions { - editor: Editor; - props?: Record; - as?: string; - className?: string; -} -declare type ComponentType = React.ComponentClass

| React.FunctionComponent

| React.ForwardRefExoticComponent & React.RefAttributes>; -export declare class ReactRenderer { - id: string; - editor: ExtendedEditor; - component: any; - element: Element; - props: Record; - reactElement: React.ReactNode; - ref: R | null; - constructor(component: ComponentType, { editor, props, as, className, }: ReactRendererOptions); - render(): void; - updateProps(props?: Record): void; - destroy(): void; -} -export {}; diff --git a/packages/editor/dist/extensions/react/ReactRenderer.js b/packages/editor/dist/extensions/react/ReactRenderer.js deleted file mode 100644 index 6602b51a5..000000000 --- a/packages/editor/dist/extensions/react/ReactRenderer.js +++ /dev/null @@ -1,98 +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; -}; -var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) { - if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { - if (ar || !(i in from)) { - if (!ar) ar = Array.prototype.slice.call(from, 0, i); - ar[i] = from[i]; - } - } - return to.concat(ar || Array.prototype.slice.call(from)); -}; -import { jsx as _jsx } from "react/jsx-runtime"; -function isClassComponent(Component) { - return !!(typeof Component === 'function' - && Component.prototype - && Component.prototype.isReactComponent); -} -function isForwardRefComponent(Component) { - var _a; - return !!(typeof Component === 'object' - && ((_a = Component.$$typeof) === null || _a === void 0 ? void 0 : _a.toString()) === 'Symbol(react.forward_ref)'); -} -var ReactRenderer = /** @class */ (function () { - function ReactRenderer(component, _a) { - var _b; - var editor = _a.editor, _c = _a.props, props = _c === void 0 ? {} : _c, _d = _a.as, as = _d === void 0 ? 'div' : _d, _e = _a.className, className = _e === void 0 ? '' : _e; - this.ref = null; - this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString(); - this.component = component; - this.editor = editor; - this.props = props; - this.element = document.createElement(as); - this.element.classList.add('react-renderer'); - if (className) { - (_b = this.element.classList).add.apply(_b, __spreadArray([], __read(className.split(' ')), false)); - } - this.render(); - } - ReactRenderer.prototype.render = function () { - var _this = this; - var _a; - var Component = this.component; - var props = this.props; - if (isClassComponent(Component) || isForwardRefComponent(Component)) { - props.ref = function (ref) { - _this.ref = ref; - }; - } - this.reactElement = _jsx(Component, __assign({}, props)); - if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.contentComponent) { - this.editor.contentComponent.setState({ - renderers: this.editor.contentComponent.state.renderers.set(this.id, this), - }); - } - }; - ReactRenderer.prototype.updateProps = function (props) { - if (props === void 0) { props = {}; } - this.props = __assign(__assign({}, this.props), props); - this.render(); - }; - ReactRenderer.prototype.destroy = function () { - var _a; - if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.contentComponent) { - var renderers = this.editor.contentComponent.state.renderers; - renderers.delete(this.id); - this.editor.contentComponent.setState({ - renderers: renderers, - }); - } - }; - return ReactRenderer; -}()); -export { ReactRenderer }; diff --git a/packages/editor/dist/extensions/react/SelectionBasedReactNodeView.d.ts b/packages/editor/dist/extensions/react/SelectionBasedReactNodeView.d.ts deleted file mode 100644 index 47515c369..000000000 --- a/packages/editor/dist/extensions/react/SelectionBasedReactNodeView.d.ts +++ /dev/null @@ -1,54 +0,0 @@ -import React from "react"; -import { Node as PMNode } from "prosemirror-model"; -import { PortalProviderAPI } from "./ReactNodeViewPortals"; -import { EventDispatcher } from "./event-dispatcher"; -import { ReactComponentProps, GetPos, ReactNodeViewOptions } from "./types"; -import ReactNodeView from "./ReactNodeView"; -import { Editor, NodeViewRendererProps } from "@tiptap/core"; -/** - * A ReactNodeView that handles React components sensitive - * to selection changes. - * - * If the selection changes, it will attempt to re-render the - * React component. Otherwise it does nothing. - * - * You can subclass `viewShouldUpdate` to include other - * props that your component might want to consider before - * entering the React lifecycle. These are usually props you - * compare in `shouldComponentUpdate`. - * - * An example: - * - * ``` - * viewShouldUpdate(nextNode) { - * if (nextNode.attrs !== this.node.attrs) { - * return true; - * } - * - * return super.viewShouldUpdate(nextNode); - * }``` - */ -export declare class SelectionBasedNodeView

extends ReactNodeView

{ - private oldSelection; - private selectionChangeState; - pos: number | undefined; - posEnd: number | undefined; - constructor(node: PMNode, editor: Editor, getPos: GetPos, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, options: ReactNodeViewOptions

); - /** - * Update current node's start and end positions. - * - * Prefer `this.pos` rather than getPos(), because calling getPos is - * expensive, unless you know you're definitely going to render. - */ - private updatePos; - private getPositionsWithDefault; - isNodeInsideSelection: (from: number, to: number, pos?: number, posEnd?: number) => boolean; - isSelectionInsideNode: (from: number, to: number, pos?: number, posEnd?: number) => boolean; - private isSelectedNode; - insideSelection: () => boolean; - nodeInsideSelection: () => boolean; - viewShouldUpdate(_nextNode: PMNode): boolean; - destroy(): void; - private onSelectionChange; - static fromComponent(component: React.ComponentType, options?: Omit, "component">): ({ node, getPos, editor }: NodeViewRendererProps) => any; -} diff --git a/packages/editor/dist/extensions/react/SelectionBasedReactNodeView.js b/packages/editor/dist/extensions/react/SelectionBasedReactNodeView.js deleted file mode 100644 index 50f0e4739..000000000 --- a/packages/editor/dist/extensions/react/SelectionBasedReactNodeView.js +++ /dev/null @@ -1,164 +0,0 @@ -var __extends = (this && this.__extends) || (function () { - var extendStatics = function (d, b) { - extendStatics = Object.setPrototypeOf || - ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || - function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; - return extendStatics(d, b); - }; - return function (d, b) { - if (typeof b !== "function" && b !== null) - throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); - extendStatics(d, b); - function __() { this.constructor = d; } - d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); - }; -})(); -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 { DecorationSet } from "prosemirror-view"; -import { NodeSelection } from "prosemirror-state"; -import { stateKey as SelectionChangePluginKey, } from "./plugin"; -import ReactNodeView from "./ReactNodeView"; -/** - * A ReactNodeView that handles React components sensitive - * to selection changes. - * - * If the selection changes, it will attempt to re-render the - * React component. Otherwise it does nothing. - * - * You can subclass `viewShouldUpdate` to include other - * props that your component might want to consider before - * entering the React lifecycle. These are usually props you - * compare in `shouldComponentUpdate`. - * - * An example: - * - * ``` - * viewShouldUpdate(nextNode) { - * if (nextNode.attrs !== this.node.attrs) { - * return true; - * } - * - * return super.viewShouldUpdate(nextNode); - * }``` - */ -var SelectionBasedNodeView = /** @class */ (function (_super) { - __extends(SelectionBasedNodeView, _super); - function SelectionBasedNodeView(node, editor, getPos, portalProviderAPI, eventDispatcher, options) { - var _this = _super.call(this, node, editor, getPos, portalProviderAPI, eventDispatcher, options) || this; - _this.isNodeInsideSelection = function (from, to, pos, posEnd) { - var _a; - (_a = _this.getPositionsWithDefault(pos, posEnd), pos = _a.pos, posEnd = _a.posEnd); - if (typeof pos !== "number" || typeof posEnd !== "number") { - return false; - } - return from <= pos && to >= posEnd; - }; - _this.isSelectionInsideNode = function (from, to, pos, posEnd) { - var _a; - (_a = _this.getPositionsWithDefault(pos, posEnd), pos = _a.pos, posEnd = _a.posEnd); - if (typeof pos !== "number" || typeof posEnd !== "number") { - return false; - } - return pos < from && to < posEnd; - }; - _this.isSelectedNode = function (selection) { - if (selection instanceof NodeSelection) { - var _a = _this.editor.view.state.selection, from = _a.from, to = _a.to; - return (selection.node === _this.node || - // If nodes are not the same object, we check if they are referring to the same document node - (_this.pos === from && - _this.posEnd === to && - selection.node.eq(_this.node))); - } - return false; - }; - _this.insideSelection = function () { - var _a = _this.editor.view.state.selection, from = _a.from, to = _a.to; - return (_this.isSelectedNode(_this.editor.view.state.selection) || - _this.isSelectionInsideNode(from, to)); - }; - _this.nodeInsideSelection = function () { - var selection = _this.editor.view.state.selection; - var from = selection.from, to = selection.to; - return (_this.isSelectedNode(selection) || _this.isNodeInsideSelection(from, to)); - }; - _this.onSelectionChange = function () { - _this.update(_this.node, [], DecorationSet.empty); - }; - _this.updatePos(); - _this.oldSelection = editor.view.state.selection; - _this.selectionChangeState = SelectionChangePluginKey.getState(_this.editor.view.state); - _this.selectionChangeState.subscribe(_this.onSelectionChange); - return _this; - } - /** - * Update current node's start and end positions. - * - * Prefer `this.pos` rather than getPos(), because calling getPos is - * expensive, unless you know you're definitely going to render. - */ - SelectionBasedNodeView.prototype.updatePos = function () { - if (typeof this.getPos === "boolean") { - return; - } - this.pos = this.getPos(); - this.posEnd = this.pos + this.node.nodeSize; - }; - SelectionBasedNodeView.prototype.getPositionsWithDefault = function (pos, posEnd) { - return { - pos: typeof pos !== "number" ? this.pos : pos, - posEnd: typeof posEnd !== "number" ? this.posEnd : posEnd, - }; - }; - SelectionBasedNodeView.prototype.viewShouldUpdate = function (_nextNode) { - var selection = this.editor.view.state.selection; - // update selection - var oldSelection = this.oldSelection; - this.oldSelection = selection; - // update cached positions - var _a = this, oldPos = _a.pos, oldPosEnd = _a.posEnd; - this.updatePos(); - var from = selection.from, to = selection.to; - var oldFrom = oldSelection.from, oldTo = oldSelection.to; - if (this.node.type.spec.selectable) { - var newNodeSelection = selection instanceof NodeSelection && selection.from === this.pos; - var oldNodeSelection = oldSelection instanceof NodeSelection && oldSelection.from === this.pos; - if ((newNodeSelection && !oldNodeSelection) || - (oldNodeSelection && !newNodeSelection)) { - return true; - } - } - var movedInToSelection = this.isNodeInsideSelection(from, to) && - !this.isNodeInsideSelection(oldFrom, oldTo); - var movedOutOfSelection = !this.isNodeInsideSelection(from, to) && - this.isNodeInsideSelection(oldFrom, oldTo); - var moveOutFromOldSelection = this.isNodeInsideSelection(from, to, oldPos, oldPosEnd) && - !this.isNodeInsideSelection(from, to); - if (movedInToSelection || movedOutOfSelection || moveOutFromOldSelection) { - return true; - } - return false; - }; - SelectionBasedNodeView.prototype.destroy = function () { - this.selectionChangeState.unsubscribe(this.onSelectionChange); - _super.prototype.destroy.call(this); - }; - SelectionBasedNodeView.fromComponent = function (component, options) { - return function (_a) { - var node = _a.node, getPos = _a.getPos, editor = _a.editor; - return new SelectionBasedNodeView(node, editor, getPos, editor.storage.portalProviderAPI, editor.storage.eventDispatcher, __assign(__assign({}, options), { component: component })).init(); - }; - }; - return SelectionBasedNodeView; -}(ReactNodeView)); -export { SelectionBasedNodeView }; diff --git a/packages/editor/dist/extensions/react/useEditor.d.ts b/packages/editor/dist/extensions/react/useEditor.d.ts deleted file mode 100644 index f325cd188..000000000 --- a/packages/editor/dist/extensions/react/useEditor.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { DependencyList } from 'react'; -import { EditorOptions } from '@tiptap/core'; -export declare const useEditor: (options?: Partial, deps?: DependencyList) => any; diff --git a/packages/editor/dist/extensions/react/useEditor.js b/packages/editor/dist/extensions/react/useEditor.js deleted file mode 100644 index 09dc2df85..000000000 --- a/packages/editor/dist/extensions/react/useEditor.js +++ /dev/null @@ -1,43 +0,0 @@ -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 { useState, useEffect } from 'react'; -import { Editor } from './Editor'; -function useForceUpdate() { - var _a = __read(useState(0), 2), setValue = _a[1]; - return function () { return setValue(function (value) { return value + 1; }); }; -} -export var useEditor = function (options, deps) { - if (options === void 0) { options = {}; } - if (deps === void 0) { deps = []; } - var _a = __read(useState(null), 2), editor = _a[0], setEditor = _a[1]; - var forceUpdate = useForceUpdate(); - useEffect(function () { - var instance = new Editor(options); - setEditor(instance); - instance.on('transaction', function () { - requestAnimationFrame(function () { - requestAnimationFrame(function () { - forceUpdate(); - }); - }); - }); - return function () { - instance.destroy(); - }; - }, deps); - return editor; -}; diff --git a/packages/editor/dist/extensions/react/useReactNodeView.d.ts b/packages/editor/dist/extensions/react/useReactNodeView.d.ts deleted file mode 100644 index f4a4aaa20..000000000 --- a/packages/editor/dist/extensions/react/useReactNodeView.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -/// -export interface ReactNodeViewContextProps { - onDragStart: (event: DragEvent) => void; - nodeViewContentRef: (element: HTMLElement | null) => void; -} -export declare const ReactNodeViewContext: import("react").Context>; -export declare const useReactNodeView: () => Partial; diff --git a/packages/editor/dist/extensions/react/useReactNodeView.js b/packages/editor/dist/extensions/react/useReactNodeView.js deleted file mode 100644 index 0c8358b50..000000000 --- a/packages/editor/dist/extensions/react/useReactNodeView.js +++ /dev/null @@ -1,5 +0,0 @@ -import { createContext, useContext } from 'react'; -export var ReactNodeViewContext = createContext({ - onDragStart: undefined, -}); -export var useReactNodeView = function () { return useContext(ReactNodeViewContext); }; diff --git a/packages/editor/dist/extensions/taskitem/reactnodeview.d.ts b/packages/editor/dist/extensions/taskitem/reactnodeview.d.ts deleted file mode 100644 index f738682b8..000000000 --- a/packages/editor/dist/extensions/taskitem/reactnodeview.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { NodeViewRenderer, NodeViewRendererOptions } from "@tiptap/core"; -import { Decoration } from "prosemirror-view"; -import { Node as ProseMirrorNode } from "prosemirror-model"; -export interface ReactNodeViewRendererOptions extends NodeViewRendererOptions { - update: ((props: { - oldNode: ProseMirrorNode; - oldDecorations: Decoration[]; - newNode: ProseMirrorNode; - newDecorations: Decoration[]; - updateProps: () => void; - }) => boolean) | null; - as?: string; -} -export declare function ReactNodeViewRenderer(component: any, options?: Partial): NodeViewRenderer; diff --git a/packages/editor/dist/extensions/taskitem/reactnodeview.js b/packages/editor/dist/extensions/taskitem/reactnodeview.js deleted file mode 100644 index 67fbc90ec..000000000 --- a/packages/editor/dist/extensions/taskitem/reactnodeview.js +++ /dev/null @@ -1,167 +0,0 @@ -var __extends = (this && this.__extends) || (function () { - var extendStatics = function (d, b) { - extendStatics = Object.setPrototypeOf || - ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || - function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; - return extendStatics(d, b); - }; - return function (d, b) { - if (typeof b !== "function" && b !== null) - throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); - extendStatics(d, b); - function __() { this.constructor = d; } - d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); - }; -})(); -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 { NodeView, } from "@tiptap/core"; -import { ReactRenderer } from "@tiptap/react/src"; -import { ReactNodeViewContext, } from "@tiptap/react/src/useReactNodeView"; -var ReactNodeView = /** @class */ (function (_super) { - __extends(ReactNodeView, _super); - function ReactNodeView() { - return _super !== null && _super.apply(this, arguments) || this; - } - ReactNodeView.prototype.mount = function () { - var _this = this; - var props = { - editor: this.editor, - node: this.node, - decorations: this.decorations, - selected: false, - extension: this.extension, - getPos: function () { return _this.getPos(); }, - updateAttributes: function (attributes) { - if (attributes === void 0) { attributes = {}; } - return _this.updateAttributes(attributes); - }, - deleteNode: function () { return _this.deleteNode(); }, - }; - if (!this.component.displayName) { - var capitalizeFirstChar = function (string) { - return string.charAt(0).toUpperCase() + string.substring(1); - }; - this.component.displayName = capitalizeFirstChar(this.extension.name); - } - var ReactNodeViewProvider = function (componentProps) { - var Component = _this.component; - var onDragStart = _this.onDragStart.bind(_this); - var nodeViewContentRef = function (element) { - if (element && - _this.contentDOMElement && - element.firstChild !== _this.contentDOMElement) { - element.appendChild(_this.contentDOMElement); - } - }; - return (_jsx(ReactNodeViewContext.Provider, __assign({ value: { onDragStart: onDragStart, nodeViewContentRef: nodeViewContentRef } }, { children: _jsx(Component, __assign({}, componentProps)) }))); - }; - ReactNodeViewProvider.displayName = "ReactNodeView"; - this.contentDOMElement = this.node.isLeaf - ? null - : document.createElement(this.node.isInline ? "span" : "div"); - if (this.contentDOMElement) { - // For some reason the whiteSpace prop is not inherited properly in Chrome and Safari - // With this fix it seems to work fine - // See: https://github.com/ueberdosis/tiptap/issues/1197 - this.contentDOMElement.style.whiteSpace = "inherit"; - } - var as = this.node.isInline ? "span" : "div"; - if (this.options.as) { - as = this.options.as; - } - this.renderer = new ReactRenderer(ReactNodeViewProvider, { - editor: this.editor, - props: props, - as: as, - className: "node-".concat(this.node.type.name), - }); - }; - Object.defineProperty(ReactNodeView.prototype, "dom", { - get: function () { - var _a; - if (this.renderer.element.firstElementChild && - !((_a = this.renderer.element.firstElementChild) === null || _a === void 0 ? void 0 : _a.hasAttribute("data-node-view-wrapper"))) { - throw Error("Please use the NodeViewWrapper component for your node view."); - } - return this.renderer.element; - }, - enumerable: false, - configurable: true - }); - Object.defineProperty(ReactNodeView.prototype, "contentDOM", { - get: function () { - if (this.node.isLeaf) { - return null; - } - return this.contentDOMElement; - }, - enumerable: false, - configurable: true - }); - ReactNodeView.prototype.update = function (node, decorations) { - var _this = this; - var updateProps = function (props) { - _this.renderer.updateProps(props); - }; - if (node.type !== this.node.type) { - return false; - } - if (typeof this.options.update === "function") { - var oldNode = this.node; - var oldDecorations = this.decorations; - this.node = node; - this.decorations = decorations; - return this.options.update({ - oldNode: oldNode, - oldDecorations: oldDecorations, - newNode: node, - newDecorations: decorations, - updateProps: function () { return updateProps({ node: node, decorations: decorations }); }, - }); - } - if (node === this.node && this.decorations === decorations) { - return true; - } - this.node = node; - this.decorations = decorations; - updateProps({ node: node, decorations: decorations }); - return true; - }; - ReactNodeView.prototype.selectNode = function () { - this.renderer.updateProps({ - selected: true, - }); - }; - ReactNodeView.prototype.deselectNode = function () { - this.renderer.updateProps({ - selected: false, - }); - }; - ReactNodeView.prototype.destroy = function () { - this.renderer.destroy(); - this.contentDOMElement = null; - }; - return ReactNodeView; -}(NodeView)); -export function ReactNodeViewRenderer(component, options) { - return function (props) { - // try to get the parent component - // this is important for vue devtools to show the component hierarchy correctly - // maybe it’s `undefined` because isn’t rendered yet - if (!props.editor.contentComponent) { - return {}; - } - return new ReactNodeView(component, props, options); - }; -} diff --git a/packages/editor/src/styles.css b/packages/editor/src/styles.css index ad05dabcb..44350d7a0 100644 --- a/packages/editor/src/styles.css +++ b/packages/editor/src/styles.css @@ -6,10 +6,6 @@ pointer-events: none; } -.ProseMirror { - color: var(--text); -} - .ProseMirror code:not(pre code) { background-color: var(--bgSecondary); }