Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-24 15:39:44 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: weird input bugs with gboard

Browse Source
This commit is contained in:
thecodrr
2022-06-04 22:33:12 +05:00
parent ac91cbead7
commit ae8dab7048
25 changed files with 0 additions and 1475 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/editor/dist/extensions/react/Editor.d.ts vendored
View File

@@ -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<EditorContentProps, EditorContentState> | null;
}

26
packages/editor/dist/extensions/react/Editor.js vendored
View File

@@ -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 };

19
packages/editor/dist/extensions/react/EditorContent.d.ts vendored
View File

@@ -1,19 +0,0 @@
import React, { HTMLProps } from 'react';
import { Editor } from './Editor';
import { ReactRenderer } from './ReactRenderer';
export interface EditorContentProps extends HTMLProps<HTMLDivElement> {
editor: Editor | null;
}
export interface EditorContentState {
renderers: Map<string, ReactRenderer>;
}
export declare class PureEditorContent extends React.Component<EditorContentProps, EditorContentState> {
editorContentRef: React.RefObject<any>;
constructor(props: EditorContentProps);
componentDidMount(): void;
componentDidUpdate(): void;
init(): void;
componentWillUnmount(): void;
render(): JSX.Element;
}
export declare const EditorContent: React.MemoExoticComponent<typeof PureEditorContent>;

131
packages/editor/dist/extensions/react/EditorContent.js vendored
View File

@@ -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);

6
packages/editor/dist/extensions/react/NodeViewContent.d.ts vendored
View File

@@ -1,6 +0,0 @@
import React from "react";
export interface NodeViewContentProps {
[key: string]: any;
as?: React.ElementType;
}
export declare const NodeViewContent: React.FC<NodeViewContentProps>;

30
packages/editor/dist/extensions/react/NodeViewContent.js vendored
View File

@@ -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" }) })));
};

6
packages/editor/dist/extensions/react/NodeViewWrapper.d.ts vendored
View File

@@ -1,6 +0,0 @@
import React from 'react';
export interface NodeViewWrapperProps {
[key: string]: any;
as?: React.ElementType;
}
export declare const NodeViewWrapper: React.FC<NodeViewWrapperProps>;

19
packages/editor/dist/extensions/react/NodeViewWrapper.js vendored
View File

@@ -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' }) })));
});

50
packages/editor/dist/extensions/react/ReactNodeView.d.ts vendored
View File

@@ -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<P> implements NodeView {
protected readonly editor: Editor;
protected readonly getPos: GetPos;
protected readonly portalProviderAPI: PortalProviderAPI;
protected readonly eventDispatcher: EventDispatcher;
protected readonly options: ReactNodeViewOptions<P>;
private domRef;
private contentDOMWrapper?;
contentDOM: HTMLElement | undefined;
node: PMNode;
constructor(node: PMNode, editor: Editor, getPos: GetPos, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, options: ReactNodeViewOptions<P>);
/**
* 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<any> | 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<TProps>(component: React.ComponentType<TProps & ReactComponentProps>, options?: Omit<ReactNodeViewOptions<TProps>, "component">): ({ node, getPos, editor }: NodeViewRendererProps) => ReactNodeView<TProps>;
}

241
packages/editor/dist/extensions/react/ReactNodeView.js vendored
View File

@@ -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<Decoration>,
// 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));
}

38
packages/editor/dist/extensions/react/ReactNodeViewPortals.d.ts vendored
View File

@@ -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<HTMLElement, React.ReactChild>;
export declare type PortalRendererState = {
portals: Portals;
};
declare type MountedPortal = {
children: () => React.ReactChild | null;
};
export declare class PortalProviderAPI extends EventDispatcher {
portals: Map<HTMLElement, MountedPortal>;
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<BasePortalProviderProps> {
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 {};

111
packages/editor/dist/extensions/react/ReactNodeViewPortals.js vendored
View File

@@ -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 };

15
packages/editor/dist/extensions/react/ReactNodeViewRenderer.d.ts vendored
View File

@@ -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<ReactNodeViewRendererOptions>): NodeViewRenderer;

194
packages/editor/dist/extensions/react/ReactNodeViewRenderer.js vendored
View File

@@ -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 <editor-content> isn’t rendered yet
if (!props.editor.contentComponent) {
return {};
}
return new ReactNodeView(component, props, options);
};
}

24
packages/editor/dist/extensions/react/ReactRenderer.d.ts vendored
View File

@@ -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<string, any>;
as?: string;
className?: string;
}
declare type ComponentType<R, P> = React.ComponentClass<P> | React.FunctionComponent<P> | React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<R>>;
export declare class ReactRenderer<R = unknown, P = unknown> {
id: string;
editor: ExtendedEditor;
component: any;
element: Element;
props: Record<string, any>;
reactElement: React.ReactNode;
ref: R | null;
constructor(component: ComponentType<R, P>, { editor, props, as, className, }: ReactRendererOptions);
render(): void;
updateProps(props?: Record<string, any>): void;
destroy(): void;
}
export {};

98
packages/editor/dist/extensions/react/ReactRenderer.js vendored
View File

@@ -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 };

54
packages/editor/dist/extensions/react/SelectionBasedReactNodeView.d.ts vendored
View File

@@ -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<P = ReactComponentProps> extends ReactNodeView<P> {
private oldSelection;
private selectionChangeState;
pos: number | undefined;
posEnd: number | undefined;
constructor(node: PMNode, editor: Editor, getPos: GetPos, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, options: ReactNodeViewOptions<P>);
/**
* 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<TProps>(component: React.ComponentType<TProps & ReactComponentProps>, options?: Omit<ReactNodeViewOptions<TProps>, "component">): ({ node, getPos, editor }: NodeViewRendererProps) => any;
}

164
packages/editor/dist/extensions/react/SelectionBasedReactNodeView.js vendored
View File

@@ -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 };

3
packages/editor/dist/extensions/react/useEditor.d.ts vendored
View File

@@ -1,3 +0,0 @@
import { DependencyList } from 'react';
import { EditorOptions } from '@tiptap/core';
export declare const useEditor: (options?: Partial<EditorOptions>, deps?: DependencyList) => any;

43
packages/editor/dist/extensions/react/useEditor.js vendored
View File

@@ -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;
};

7
packages/editor/dist/extensions/react/useReactNodeView.d.ts vendored
View File

@@ -1,7 +0,0 @@
/// <reference types="react" />
export interface ReactNodeViewContextProps {
onDragStart: (event: DragEvent) => void;
nodeViewContentRef: (element: HTMLElement | null) => void;
}
export declare const ReactNodeViewContext: import("react").Context<Partial<ReactNodeViewContextProps>>;
export declare const useReactNodeView: () => Partial<ReactNodeViewContextProps>;

5
packages/editor/dist/extensions/react/useReactNodeView.js vendored
View File

@@ -1,5 +0,0 @@
import { createContext, useContext } from 'react';
export var ReactNodeViewContext = createContext({
onDragStart: undefined,
});
export var useReactNodeView = function () { return useContext(ReactNodeViewContext); };

14
packages/editor/dist/extensions/taskitem/reactnodeview.d.ts vendored
View File

@@ -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<ReactNodeViewRendererOptions>): NodeViewRenderer;

167
packages/editor/dist/extensions/taskitem/reactnodeview.js vendored
View File

@@ -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 <editor-content> isn’t rendered yet
if (!props.editor.contentComponent) {
return {};
}
return new ReactNodeView(component, props, options);
};
}

4
packages/editor/src/styles.css
View File

@@ -6,10 +6,6 @@
pointer-events: none;
}
.ProseMirror {
color: var(--text);
}
.ProseMirror code:not(pre code) {
background-color: var(--bgSecondary);
}