@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
367 lines (366 loc) • 10.4 kB
JavaScript
import { customRef as e, defineComponent as t, getCurrentInstance as n, h as r, markRaw as i, nextTick as a, onBeforeUnmount as o, onMounted as s, provide as c, reactive as l, ref as u, render as d, shallowRef as f, toRaw as p, unref as m, watchEffect as h } from "vue";
import { Editor as g, MarkView as _, NodeView as v } from "@tiptap/core";
export * from "@tiptap/core";
//#region ../../node_modules/.pnpm/@tiptap+vue-3@3.19.0_patch_hash=hlk524tqy4svh2bbayevihx324_@floating-ui+dom@1.7.6_@tiptap+cor_kpexihlfm3sl2tcft5dydpfypm/node_modules/@tiptap/vue-3/dist/index.js
function y(t) {
return e((e, n) => ({
get() {
return e(), t;
},
set(e) {
t = e, requestAnimationFrame(() => {
requestAnimationFrame(() => {
n();
});
});
}
}));
}
var b = class extends g {
constructor(e = {}) {
return super(e), this.contentComponent = null, this.appContext = null, this.reactiveState = y(this.view.state), this.reactiveExtensionStorage = y(this.extensionStorage), this.on("beforeTransaction", ({ nextState: e }) => {
this.reactiveState.value = e, this.reactiveExtensionStorage.value = this.extensionStorage;
}), i(this);
}
get state() {
return this.reactiveState ? this.reactiveState.value : this.view.state;
}
get storage() {
return this.reactiveExtensionStorage ? this.reactiveExtensionStorage.value : super.storage;
}
registerPlugin(e, t) {
let n = super.registerPlugin(e, t);
return this.reactiveState && (this.reactiveState.value = n), n;
}
unregisterPlugin(e) {
let t = super.unregisterPlugin(e);
return this.reactiveState && t && (this.reactiveState.value = t), t;
}
}, x = t({
name: "EditorContent",
props: { editor: {
default: null,
type: Object
} },
setup(e) {
let t = u(), r = n();
return h(() => {
let n = e.editor;
n && n.options.element && t.value && a(() => {
if (!t.value || !n.view.dom?.parentNode) return;
let e = m(t.value);
t.value.append(...n.view.dom.parentNode.childNodes), n.contentComponent = r.ctx._, r && (n.appContext = {
...r.appContext,
provides: r.provides
}), n.setOptions({ element: e }), n.createNodeViews();
});
}), o(() => {
let t = e.editor;
t && (t.contentComponent = null, t.appContext = null);
}), { rootEl: t };
},
render() {
return r("div", { ref: (e) => {
this.rootEl = e;
} });
}
}), S = t({
name: "NodeViewContent",
props: { as: {
type: String,
default: "div"
} },
render() {
return r(this.as, {
style: { whiteSpace: "pre-wrap" },
"data-node-view-content": ""
});
}
}), C = t({
name: "NodeViewWrapper",
props: { as: {
type: String,
default: "div"
} },
inject: ["onDragStart", "decorationClasses"],
render() {
var e;
return r(this.as, {
class: this.decorationClasses,
style: { whiteSpace: "normal" },
"data-node-view-wrapper": "",
onDragstart: this.onDragStart
}, (e = this.$slots).default?.call(e));
}
}), w = (e = {}) => {
let t = f();
return s(() => {
t.value = new b(e);
}), o(() => {
var e, n;
let r = t.value?.view.dom?.parentNode, i = r?.cloneNode(!0);
(e = r?.parentNode) == null || e.replaceChild(i, r), (n = t.value) == null || n.destroy();
}), t;
}, T = class {
constructor(e, { props: t = {}, editor: n }) {
this.destroyed = !1, this.editor = n, this.component = i(e), this.el = document.createElement("div"), this.props = l(t), this.renderedComponent = this.renderComponent();
}
get element() {
return this.renderedComponent.el;
}
get ref() {
return this.renderedComponent.vNode?.component?.exposed ? this.renderedComponent.vNode.component.exposed : this.renderedComponent.vNode?.component?.proxy;
}
renderComponent() {
if (this.destroyed) return this.renderedComponent;
let e = r(this.component, this.props);
return this.editor.appContext && (e.appContext = this.editor.appContext), typeof document < "u" && this.el && d(e, this.el), {
vNode: e,
destroy: () => {
this.el && d(null, this.el), this.el = null, e = null;
},
el: this.el ? this.el.firstElementChild : null
};
}
updateProps(e = {}) {
this.destroyed || (Object.entries(e).forEach(([e, t]) => {
this.props[e] = t;
}), this.renderComponent());
}
destroy() {
this.destroyed || (this.destroyed = !0, this.renderedComponent.destroy());
}
}, E = {
editor: {
type: Object,
required: !0
},
mark: {
type: Object,
required: !0
},
extension: {
type: Object,
required: !0
},
inline: {
type: Boolean,
required: !0
},
view: {
type: Object,
required: !0
},
updateAttributes: {
type: Function,
required: !0
},
HTMLAttributes: {
type: Object,
required: !0
}
}, D = t({
name: "MarkViewContent",
props: { as: {
type: String,
default: "span"
} },
render() {
return r(this.as, {
style: { whiteSpace: "inherit" },
"data-mark-view-content": ""
});
}
}), O = class extends _ {
constructor(e, n, r) {
super(e, n, r);
let i = {
...n,
updateAttributes: this.updateAttributes.bind(this)
};
this.renderer = new T(t({
extends: { ...e },
props: Object.keys(i),
template: this.component.template,
setup: (t) => e.setup?.call(e, t, { expose: () => void 0 }),
__scopeId: e.__scopeId,
__cssModules: e.__cssModules,
__name: e.__name,
__file: e.__file
}), {
editor: this.editor,
props: i
});
}
get dom() {
return this.renderer.element;
}
get contentDOM() {
return this.dom.querySelector("[data-mark-view-content]");
}
updateAttributes(e) {
let t = p(this.mark);
super.updateAttributes(e, t);
}
destroy() {
this.renderer.destroy();
}
};
function k(e, t = {}) {
return (n) => n.editor.contentComponent ? new O(e, n, t) : {};
}
var A = {
editor: {
type: Object,
required: !0
},
node: {
type: Object,
required: !0
},
decorations: {
type: Object,
required: !0
},
selected: {
type: Boolean,
required: !0
},
extension: {
type: Object,
required: !0
},
getPos: {
type: Function,
required: !0
},
updateAttributes: {
type: Function,
required: !0
},
deleteNode: {
type: Function,
required: !0
},
view: {
type: Object,
required: !0
},
innerDecorations: {
type: Object,
required: !0
},
HTMLAttributes: {
type: Object,
required: !0
}
}, j = class extends v {
constructor() {
super(...arguments), this.cachedExtensionWithSyncedStorage = null;
}
get extensionWithSyncedStorage() {
if (!this.cachedExtensionWithSyncedStorage) {
let e = this.editor, t = this.extension;
this.cachedExtensionWithSyncedStorage = new Proxy(t, { get(n, r, i) {
return r === "storage" ? e.storage[t.name] ?? {} : Reflect.get(n, r, i);
} });
}
return this.cachedExtensionWithSyncedStorage;
}
mount() {
let e = {
editor: this.editor,
node: this.node,
decorations: this.decorations,
innerDecorations: this.innerDecorations,
view: this.view,
selected: !1,
extension: this.extensionWithSyncedStorage,
HTMLAttributes: this.HTMLAttributes,
getPos: () => this.getPos(),
updateAttributes: (e = {}) => this.updateAttributes(e),
deleteNode: () => this.deleteNode()
}, n = this.onDragStart.bind(this);
this.decorationClasses = u(this.getDecorationClasses());
let r = t({
extends: { ...this.component },
props: Object.keys(e),
template: this.component.template,
setup: (e) => {
var t;
return c("onDragStart", n), c("decorationClasses", this.decorationClasses), (t = this.component).setup?.call(t, e, { expose: () => void 0 });
},
__scopeId: this.component.__scopeId,
__cssModules: this.component.__cssModules,
__name: this.component.__name,
__file: this.component.__file
});
this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this), this.editor.on("selectionUpdate", this.handleSelectionUpdate), this.renderer = new T(r, {
editor: this.editor,
props: e
});
}
get dom() {
if (!this.renderer.element || !this.renderer.element.hasAttribute("data-node-view-wrapper")) throw Error("Please use the NodeViewWrapper component for your node view.");
return this.renderer.element;
}
get contentDOM() {
return this.node.isLeaf ? null : this.dom.querySelector("[data-node-view-content]");
}
handleSelectionUpdate() {
let { from: e, to: t } = this.editor.state.selection, n = this.getPos();
if (typeof n == "number") if (e <= n && t >= n + this.node.nodeSize) {
if (this.renderer.props.selected) return;
this.selectNode();
} else {
if (!this.renderer.props.selected) return;
this.deselectNode();
}
}
update(e, t, n) {
let r = (e) => {
this.decorationClasses.value = this.getDecorationClasses(), this.renderer.updateProps(e);
};
if (typeof this.options.update == "function") {
let i = this.node, a = this.decorations, o = this.innerDecorations;
return this.node = e, this.decorations = t, this.innerDecorations = n, this.options.update({
oldNode: i,
oldDecorations: a,
newNode: e,
newDecorations: t,
oldInnerDecorations: o,
innerDecorations: n,
updateProps: () => r({
node: e,
decorations: t,
innerDecorations: n,
extension: this.extensionWithSyncedStorage
})
});
}
return e.type === this.node.type ? e === this.node && this.decorations === t && this.innerDecorations === n ? !0 : (this.node = e, this.decorations = t, this.innerDecorations = n, r({
node: e,
decorations: t,
innerDecorations: n,
extension: this.extensionWithSyncedStorage
}), !0) : !1;
}
selectNode() {
this.renderer.updateProps({ selected: !0 }), this.renderer.element && this.renderer.element.classList.add("ProseMirror-selectednode");
}
deselectNode() {
this.renderer.updateProps({ selected: !1 }), this.renderer.element && this.renderer.element.classList.remove("ProseMirror-selectednode");
}
getDecorationClasses() {
return this.decorations.flatMap((e) => e.type.attrs.class).join(" ");
}
destroy() {
this.renderer.destroy(), this.editor.off("selectionUpdate", this.handleSelectionUpdate);
}
};
function M(e, t) {
return (n) => n.editor.contentComponent ? new j(typeof e == "function" && "__vccOpts" in e ? e.__vccOpts : e, n, t) : {};
}
//#endregion
export { b as Editor, x as EditorContent, D as MarkViewContent, S as NodeViewContent, C as NodeViewWrapper, O as VueMarkView, k as VueMarkViewRenderer, M as VueNodeViewRenderer, T as VueRenderer, E as markViewProps, A as nodeViewProps, w as useEditor };
//# sourceMappingURL=vue-3.js.map