Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@prosekit/web

Package Overview
Dependencies
Maintainers
1
Versions
79
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@prosekit/web - npm Package Compare versions

Comparing version 0.0.0-next-20240602042411 to 0.0.0-next-20240605080819

dist/chunk-Y2CJYXR5.js

244

dist/prosekit-web-autocomplete.js

@@ -6,3 +6,3 @@ import {

defineCustomElement
} from "./chunk-LCDA7GFP.js";
} from "./chunk-Y2CJYXR5.js";

@@ -18,4 +18,3 @@ // src/components/autocomplete/autocomplete-empty/element.gen.ts

function useAutocompleteEmpty(element, _props) {
useListboxEmpty(element);
return {};
return useListboxEmpty(element), {};
}

@@ -48,10 +47,8 @@

""
);
var onSubmitContext = createContext(
), onSubmitContext = createContext(
"prosekit/autocomplete-popover/onSubmit",
null
);
var openContext = createContext(
), openContext = createContext(
"prosekit/autocomplete-popover/open",
false
!1
);

@@ -61,11 +58,7 @@

function useAutocompleteItem(element, props) {
const { onSelect, value } = useListboxItem(element, props);
const open = openContext.consume(element);
useEffect(element, () => {
let { onSelect, value } = useListboxItem(element, props), open = openContext.consume(element);
return useEffect(element, () => {
var _a;
if (!value.peek() && open.value) {
value.value = (_a = element.textContent) != null ? _a : "";
}
});
return { onSelect, value };
!value.peek() && open.value && (value.value = (_a = element.textContent) != null ? _a : "");
}), { onSelect, value };
}

@@ -83,4 +76,3 @@

import { defaultListboxProps } from "@aria-ui/listbox";
var defaultFilter = defaultListboxProps.filter;
var defaultAutocompleteListProps = {
var defaultFilter = defaultListboxProps.filter, defaultAutocompleteListProps = {
filter: defaultFilter,

@@ -103,15 +95,6 @@ editor: null

function useAutocompleteList(element, props) {
const fullProps = assignProps(defaultAutocompleteListProps, props);
const editor = createSignal(fullProps.editor);
const open = openContext.consume(element);
const query = queryContext.consume(element);
const onSubmit = onSubmitContext.consume(element);
const onKeydownHandlerAdd = useKeyboardHandler(element, open, editor);
const onValueChange = (value) => {
let fullProps = assignProps(defaultAutocompleteListProps, props), editor = createSignal(fullProps.editor), open = openContext.consume(element), query = queryContext.consume(element), onSubmit = onSubmitContext.consume(element), onKeydownHandlerAdd = useKeyboardHandler(element, open, editor), onValueChange = (value) => {
var _a;
if (value) {
(_a = onSubmit.peek()) == null ? void 0 : _a();
}
};
const {
value && ((_a = onSubmit.peek()) == null || _a());
}, {
query: listboxQuery,

@@ -126,64 +109,39 @@ value: listboxValue,

});
useEffect2(element, () => {
return useEffect2(element, () => {
listboxQuery.value = query.value;
});
useEffect2(element, () => {
if (!open.value) {
listboxValue.value = "";
query.value = "";
}
});
useEffect2(element, () => {
if (!open.value) {
autoFocus.value = false;
} else {
let canceled = false;
requestAnimationFrame(() => {
if (canceled)
return;
autoFocus.value = true;
});
return () => {
canceled = true;
}), useEffect2(element, () => {
open.value || (listboxValue.value = "", query.value = "");
}), useEffect2(element, () => {
if (!open.value)
autoFocus.value = !1;
else {
let canceled = !1;
return requestAnimationFrame(() => {
canceled || (autoFocus.value = !0);
}), () => {
canceled = !0;
};
}
});
useEffect2(element, () => {
}), useEffect2(element, () => {
element.tabIndex = -1;
});
return { editor, filter };
}), { editor, filter };
}
function useKeyboardHandler(element, open, editor) {
const keydownHandler = createSignal(
let keydownHandler = createSignal(
null
);
let disposeKeydownHandler = null;
useEffect2(element, () => {
const editorValue = editor.value;
const keydownHandlerValue = keydownHandler.value;
if (!editorValue || !keydownHandlerValue) {
), disposeKeydownHandler = null;
return useEffect2(element, () => {
let editorValue = editor.value, keydownHandlerValue = keydownHandler.value;
if (!editorValue || !keydownHandlerValue)
return;
}
const extension = defineDOMEventHandler(
let extension = defineDOMEventHandler(
"keydown",
(view, event) => {
if (view.composing || event.defaultPrevented || !open.value) {
return false;
}
keydownHandlerValue(event);
return event.defaultPrevented;
}
(view, event) => view.composing || event.defaultPrevented || !open.value ? !1 : (keydownHandlerValue(event), event.defaultPrevented)
);
disposeKeydownHandler == null ? void 0 : disposeKeydownHandler();
disposeKeydownHandler = editorValue.use(
disposeKeydownHandler == null || disposeKeydownHandler(), disposeKeydownHandler = editorValue.use(
withPriority(extension, Priority.highest)
);
}), (keydownHandlerValue) => (keydownHandler.value = keydownHandlerValue, () => {
disposeKeydownHandler == null || disposeKeydownHandler(), disposeKeydownHandler = null;
});
return (keydownHandlerValue) => {
keydownHandler.value = keydownHandlerValue;
return () => {
disposeKeydownHandler == null ? void 0 : disposeKeydownHandler();
disposeKeydownHandler = null;
};
};
}

@@ -201,5 +159,3 @@

import { defaultOverlayPositionerProps } from "@aria-ui/overlay";
var body = typeof document !== "undefined" && document.querySelector("body");
var defaultBoundary = body || "clippingAncestors";
var defaultAutocompletePopoverProps = Object.freeze({
var body = typeof document != "undefined" && document.querySelector("body"), defaultBoundary = body || "clippingAncestors", defaultAutocompletePopoverProps = Object.freeze({
...defaultOverlayPositionerProps,

@@ -212,5 +168,5 @@ editor: null,

offset: 4,
inline: true,
hoist: true,
fitViewport: true,
inline: !0,
hoist: !0,
fitViewport: !0,
boundary: defaultBoundary,

@@ -247,9 +203,8 @@ overflowPadding: 8

function useFirstRendering(host) {
const firstRendering = createSignal2(true);
useEffect3(host, () => {
let firstRendering = createSignal2(!0);
return useEffect3(host, () => {
requestAnimationFrame(() => {
firstRendering.value = false;
firstRendering.value = !1;
});
});
return firstRendering;
}), firstRendering;
}

@@ -264,18 +219,8 @@

function useAutocompletePopover(host, props) {
const state = mapSignals(assignProps2(defaultAutocompletePopoverProps, props));
useAutocompletePopoverState(host, state);
return state;
let state = mapSignals(assignProps2(defaultAutocompletePopoverProps, props));
return useAutocompletePopoverState(host, state), state;
}
function useAutocompletePopoverState(host, state) {
const { editor, regex, ...overlayState } = state;
const reference = createSignal3(null);
const query = createSignal3("");
const onDismiss = createSignal3(null);
const onSubmit = createSignal3(null);
const presence = createComputed(() => !!reference.value);
queryContext.provide(host, query);
onSubmitContext.provide(host, onSubmit);
openContext.provide(host, presence);
useEscapeKeydown(host, editor, createKeymapHandler(onDismiss, presence));
useAutocompleteExtension(
let { editor, regex, ...overlayState } = state, reference = createSignal3(null), query = createSignal3(""), onDismiss = createSignal3(null), onSubmit = createSignal3(null), presence = createComputed(() => !!reference.value);
queryContext.provide(host, query), onSubmitContext.provide(host, onSubmit), openContext.provide(host, presence), useEscapeKeydown(host, editor, createKeymapHandler(onDismiss, presence)), useAutocompleteExtension(
host,

@@ -288,63 +233,41 @@ editor,

onSubmit
);
useOverlayPositionerState(host, overlayState, { reference });
usePresence(host, presence);
const firstRendering = useFirstRendering(host);
), useOverlayPositionerState(host, overlayState, { reference }), usePresence(host, presence);
let firstRendering = useFirstRendering(host);
useEffect4(host, () => {
var _a;
const queryValue = query.value;
if (!firstRendering.peek()) {
(_a = state.onQueryChange.peek()) == null ? void 0 : _a(queryValue);
}
let queryValue = query.value;
firstRendering.peek() || (_a = state.onQueryChange.peek()) == null || _a(queryValue);
}), useAnimationFrame(host, () => {
let presenceValue = presence.value, onOpenChangeValue = state.onOpenChange.peek();
if (onOpenChangeValue)
return () => {
onOpenChangeValue(presenceValue);
};
});
useAnimationFrame(host, () => {
const presenceValue = presence.value;
const onOpenChangeValue = state.onOpenChange.peek();
if (!onOpenChangeValue) {
return;
}
return () => {
onOpenChangeValue(presenceValue);
};
});
}
function useAutocompleteExtension(host, editor, regex, reference, query, onDismiss, onSubmit) {
useEffect4(host, () => {
const editorValue = editor.value;
const regexValue = regex.value;
if (!editorValue || !regexValue) {
return;
}
return addAutocompleteExtension(
editorValue,
regexValue,
reference,
query,
onDismiss,
onSubmit
);
let editorValue = editor.value, regexValue = regex.value;
if (!(!editorValue || !regexValue))
return addAutocompleteExtension(
editorValue,
regexValue,
reference,
query,
onDismiss,
onSubmit
);
});
}
function addAutocompleteExtension(editor, regex, reference, query, onDismiss, onSubmit) {
const handleEnter = (options) => {
const span = editor.view.dom.querySelector(".prosemirror-prediction-match");
if (span) {
reference.value = span;
}
query.value = defaultQueryBuilder(options.match);
onDismiss.value = options.ignoreMatch;
onSubmit.value = options.deleteMatch;
};
const handleLeave = () => {
reference.value = null;
query.value = "";
onDismiss.value = null;
onSubmit.value = null;
};
const rule = new AutocompleteRule({
let handleEnter = (options) => {
let span = editor.view.dom.querySelector(".prosemirror-prediction-match");
span && (reference.value = span), query.value = defaultQueryBuilder(options.match), onDismiss.value = options.ignoreMatch, onSubmit.value = options.deleteMatch;
}, handleLeave = () => {
reference.value = null, query.value = "", onDismiss.value = null, onSubmit.value = null;
}, rule = new AutocompleteRule({
regex,
onEnter: handleEnter,
onLeave: handleLeave
});
const extension = defineAutocomplete(rule);
}), extension = defineAutocomplete(rule);
return editor.use(extension);

@@ -354,15 +277,10 @@ }

return () => {
if (!enabled.value) {
return false;
}
const fn = handler.peek();
if (!fn)
return false;
fn();
return true;
if (!enabled.value)
return !1;
let fn = handler.peek();
return fn ? (fn(), !0) : !1;
};
}
function useEscapeKeydown(host, editor, handler) {
const keymap = { Escape: handler };
const extension = withPriority2(defineKeymap(keymap), Priority2.highest);
let extension = withPriority2(defineKeymap({ Escape: handler }), Priority2.highest);
return useEditorExtension(host, editor, extension);

@@ -369,0 +287,0 @@ }

@@ -6,3 +6,3 @@ import {

defineCustomElement
} from "./chunk-LCDA7GFP.js";
} from "./chunk-Y2CJYXR5.js";

@@ -40,38 +40,21 @@ // src/components/block-handle/block-drag-handle/element.gen.ts

function useBlockDragHandle(host, props) {
const context = blockPopoverContext.consume(host);
const state = mapSignals(assignProps(defaultBlockDragHandleProps, props));
useEffect(host, () => {
host.draggable = true;
});
useEventListener(host, "pointerdown", () => {
let context = blockPopoverContext.consume(host), state = mapSignals(assignProps(defaultBlockDragHandleProps, props));
return useEffect(host, () => {
host.draggable = !0;
}), useEventListener(host, "pointerdown", () => {
var _a, _b;
const { pos } = (_a = context.value) != null ? _a : {};
const { view } = (_b = state.editor.value) != null ? _b : {};
if (pos == null || view == null) {
return;
}
view.dispatch(
let { pos } = (_a = context.value) != null ? _a : {}, { view } = (_b = state.editor.value) != null ? _b : {};
pos == null || view == null || (view.dispatch(
view.state.tr.setSelection(NodeSelection.create(view.state.doc, pos))
);
requestAnimationFrame(() => {
), requestAnimationFrame(() => {
view.focus();
});
});
useEventListener(host, "dragstart", (event) => {
}));
}), useEventListener(host, "dragstart", (event) => {
var _a, _b;
const { pos, element, node } = (_a = context.value) != null ? _a : {};
const { view } = (_b = state.editor.value) != null ? _b : {};
if (pos == null || !element || !node || !view || !event.dataTransfer) {
return;
}
event.dataTransfer.clearData();
event.dataTransfer.setData("text/html", element.outerHTML);
event.dataTransfer.effectAllowed = "copyMove";
event.dataTransfer.setDragImage(element, 0, 0);
view.dragging = {
let { pos, element, node } = (_a = context.value) != null ? _a : {}, { view } = (_b = state.editor.value) != null ? _b : {};
pos == null || !element || !node || !view || !event.dataTransfer || (event.dataTransfer.clearData(), event.dataTransfer.setData("text/html", element.outerHTML), event.dataTransfer.effectAllowed = "copyMove", event.dataTransfer.setDragImage(element, 0, 0), view.dragging = {
slice: new Slice(Fragment.from(node), 0, 0),
move: true
};
});
return state;
move: !0
});
}), state;
}

@@ -115,7 +98,4 @@

return (...args) => {
const now = Date.now();
if (now - lastTime >= wait) {
callback(...args);
lastTime = now;
}
let now = Date.now();
now - lastTime >= wait && (callback(...args), lastTime = now);
};

@@ -126,6 +106,5 @@ }

function defineElementHoverHandler(handler) {
const handlePointerEvent = (view, event) => {
let handlePointerEvent = (view, event) => {
var _a;
const rect = view.dom.getBoundingClientRect();
const pos = (_a = view.posAtCoords({
let rect = view.dom.getBoundingClientRect(), pos = (_a = view.posAtCoords({
top: event.clientY,

@@ -139,9 +118,5 @@ // Use the center of the editor

}
const $pos = view.state.doc.resolve(pos);
const node = view.state.doc.nodeAt(pos);
const element = view.nodeDOM(pos);
let $pos = view.state.doc.resolve(pos), node = view.state.doc.nodeAt(pos), element = view.nodeDOM(pos);
if ($pos.depth >= 1 && $pos.index($pos.depth) === 0) {
const ancestorPos = $pos.before($pos.depth);
const node2 = view.state.doc.nodeAt(ancestorPos);
const element2 = view.nodeDOM(ancestorPos);
let ancestorPos = $pos.before($pos.depth), node2 = view.state.doc.nodeAt(ancestorPos), element2 = view.nodeDOM(ancestorPos);
if (!element2) {

@@ -151,3 +126,3 @@ handler(null, null, null, null);

}
const reference = {
handler({
contextElement: element2,

@@ -157,8 +132,3 @@ // Get the bounding client rect of the parent node, including its

getBoundingClientRect: () => {
const rect2 = element2.getBoundingClientRect();
const style = window.getComputedStyle(element2);
const marginTop = Number.parseInt(style.marginTop, 10) || 0;
const marginRight = Number.parseInt(style.marginRight, 10) || 0;
const marginBottom = Number.parseInt(style.marginBottom, 10) || 0;
const marginLeft = Number.parseInt(style.marginLeft, 10) || 0;
let rect2 = element2.getBoundingClientRect(), style = window.getComputedStyle(element2), marginTop = Number.parseInt(style.marginTop, 10) || 0, marginRight = Number.parseInt(style.marginRight, 10) || 0, marginBottom = Number.parseInt(style.marginBottom, 10) || 0, marginLeft = Number.parseInt(style.marginLeft, 10) || 0;
return {

@@ -175,4 +145,3 @@ top: rect2.top - marginTop,

}
};
handler(reference, element2, node2, ancestorPos);
}, element2, node2, ancestorPos);
return;

@@ -191,7 +160,5 @@ }

function useBlockPopover(host, props) {
const state = mapSignals2(assignProps2(defaultBlockPopoverProps, props));
const { editor, ...overlayState } = state;
const reference = createSignal(null);
let state = mapSignals2(assignProps2(defaultBlockPopoverProps, props)), { editor, ...overlayState } = state, reference = createSignal(null);
useOverlayPositionerState(host, overlayState, { reference });
const context = createSignal({
let context = createSignal({
pos: null,

@@ -202,26 +169,15 @@ node: null,

blockPopoverContext.provide(host, context);
const open = createSignal(false);
let open = createSignal(!1);
useEffect2(host, () => {
open.value = !!context.value.element;
}), useHoverExtension(host, editor, (referenceValue, element, node, pos) => {
reference.value = referenceValue, context.value = { element, node, pos };
});
useHoverExtension(host, editor, (referenceValue, element, node, pos) => {
reference.value = referenceValue;
context.value = { element, node, pos };
});
const presence = createComputed(() => !!reference.value);
useAttribute(host, "data-state", () => presence.value ? "open" : "closed");
usePresence(host, presence);
return state;
let presence = createComputed(() => !!reference.value);
return useAttribute(host, "data-state", () => presence.value ? "open" : "closed"), usePresence(host, presence), state;
}
function useHoverExtension(host, editor, handler) {
let prevElement = null;
let prevPos = null;
const extension = defineElementHoverHandler(
let prevElement = null, prevPos = null, extension = defineElementHoverHandler(
(reference, element, node, pos) => {
if (prevElement === element && prevPos === pos) {
return;
}
prevElement = element;
prevPos = pos;
handler(reference, element, node, pos);
prevElement === element && prevPos === pos || (prevElement = element, prevPos = pos, handler(reference, element, node, pos));
}

@@ -228,0 +184,0 @@ );

@@ -6,3 +6,3 @@ import {

defineCustomElement
} from "./chunk-LCDA7GFP.js";
} from "./chunk-Y2CJYXR5.js";

@@ -17,14 +17,14 @@ // src/components/inline-popover/inline-popover/element.gen.ts

editor: null,
open: true,
open: !0,
onOpenChange: null,
placement: "top",
offset: 12,
shift: true,
flip: true,
hide: true,
overlap: true,
inline: true,
shift: !0,
flip: !0,
hide: !0,
overlap: !0,
inline: !0,
overflowPadding: 8,
// Don't need boundary when hoist is true.
hoist: true,
hoist: !0,
boundary: []

@@ -50,3 +50,3 @@ });

function useEditorFocusChangeEvent(host, editor, handler) {
const extension = defineFocusChangeHandler(handler);
let extension = defineFocusChangeHandler(handler);
useEditorExtension(host, editor, extension);

@@ -58,3 +58,3 @@ }

function useEditorUpdateEvent(host, editor, handler) {
const extension = defineUpdateHandler(handler);
let extension = defineUpdateHandler(handler);
useEditorExtension(host, editor, extension);

@@ -68,3 +68,3 @@ }

function isInCodeBlock(selection) {
const type = selection.$from.parent.type;
let type = selection.$from.parent.type;
return type.spec.code && type.isBlock;

@@ -75,13 +75,11 @@ }

function getVirtualSelectionElement(view) {
if (typeof window === "undefined" || view.isDestroyed) {
if (typeof window == "undefined" || view.isDestroyed)
return null;
}
const selection = view.state.selection;
let selection = view.state.selection;
if (!selection.empty && !isInCodeBlock(selection) && isTextSelection(selection)) {
const decoration = getInlineDecoration(view);
if (decoration) {
let decoration = getInlineDecoration(view);
if (decoration)
return decoration;
}
const range = getDomRange();
if (range) {
let range = getDomRange();
if (range)
return {

@@ -92,3 +90,2 @@ contextElement: view.dom,

};
}
}

@@ -98,21 +95,16 @@ return null;

function getDomRange() {
const selection = window.getSelection();
if (!selection || selection.isCollapsed) {
let selection = window.getSelection();
if (!selection || selection.isCollapsed)
return;
}
const range = typeof selection.rangeCount === "number" && selection.rangeCount > 0 && selection.getRangeAt(0);
if (!range) {
return;
}
return range;
let range = typeof selection.rangeCount == "number" && selection.rangeCount > 0 && selection.getRangeAt(0);
if (range)
return range;
}
function getInlineDecoration(view) {
const match = view.dom.querySelectorAll(".prosekit-virtual-selection");
if (match.length === 0) {
let match = view.dom.querySelectorAll(".prosekit-virtual-selection");
if (match.length === 0)
return;
}
if (match.length === 1) {
if (match.length === 1)
return match[0];
}
const items = Array.from(match);
let items = Array.from(match);
return {

@@ -127,33 +119,22 @@ contextElement: items[0],

function useInlinePopover(host, props) {
const state = mapSignals(assignProps(defaultInlinePopoverProps, props));
useInlinePopoverState(host, state);
return state;
let state = mapSignals(assignProps(defaultInlinePopoverProps, props));
return useInlinePopoverState(host, state), state;
}
function useInlinePopoverState(host, state) {
const { editor, open, onOpenChange, ...overlayState } = state;
const reference = useInlinePopoverReference(host, editor);
let { editor, open, onOpenChange, ...overlayState } = state, reference = useInlinePopoverReference(host, editor);
useOverlayPositionerState(host, overlayState, { reference });
const presence = createComputed(() => !!reference.value && open.value);
useAttribute(host, "data-state", () => presence.value ? "open" : "closed");
usePresence(host, presence);
useEffect(host, () => {
let presence = createComputed(() => !!reference.value && open.value);
useAttribute(host, "data-state", () => presence.value ? "open" : "closed"), usePresence(host, presence), useEffect(host, () => {
var _a;
const presenceValue = presence.value;
(_a = onOpenChange.peek()) == null ? void 0 : _a(presenceValue);
let presenceValue = presence.value;
(_a = onOpenChange.peek()) == null || _a(presenceValue);
});
}
function useInlinePopoverReference(host, editor) {
const reference = createSignal(null);
let editorFocused = false;
useEditorFocusChangeEvent(host, editor, (focus) => {
let reference = createSignal(null), editorFocused = !1;
return useEditorFocusChangeEvent(host, editor, (focus) => {
editorFocused = focus;
});
useEditorUpdateEvent(host, editor, (view) => {
const isPopoverFocused = !editorFocused && host.contains(host.ownerDocument.activeElement);
if (isPopoverFocused) {
return;
}
reference.value = getVirtualSelectionElement(view);
});
return reference;
}), useEditorUpdateEvent(host, editor, (view) => {
!editorFocused && host.contains(host.ownerDocument.activeElement) || (reference.value = getVirtualSelectionElement(view));
}), reference;
}

@@ -160,0 +141,0 @@

import {
defineCustomElement
} from "./chunk-LCDA7GFP.js";
} from "./chunk-Y2CJYXR5.js";

@@ -5,0 +5,0 @@ // src/components/popover/popover-content/element.gen.ts

import {
defineCustomElement
} from "./chunk-LCDA7GFP.js";
} from "./chunk-Y2CJYXR5.js";

@@ -27,8 +27,6 @@ // src/components/resizable/resizable-handle/element.gen.ts

null
);
var onResizeStartContext = createContext(
), onResizeStartContext = createContext(
"prosekit/resizable/onResizeStart",
null
);
var onResizeEndContext = createContext(
), onResizeEndContext = createContext(
"prosekit/resizable/onResizeEnd",

@@ -40,3 +38,3 @@ null

function isFinitePositiveNumber(value) {
return typeof value === "number" && Number.isFinite(value) && value > 0;
return typeof value == "number" && Number.isFinite(value) && value > 0;
}

@@ -46,5 +44,3 @@

function calcResize(position, w, h, dx, dy, aspectRatio) {
aspectRatio = aspectRatio ? aspectRatio : w / h;
aspectRatio = isFinitePositiveNumber(aspectRatio) ? aspectRatio : 1;
switch (position) {
switch (aspectRatio = aspectRatio || w / h, aspectRatio = isFinitePositiveNumber(aspectRatio) ? aspectRatio : 1, position) {
case "bottom-right":

@@ -71,88 +67,34 @@ return calcBottomRightResize(w, h, dx, dy, aspectRatio);

var calcBottomRightResize = (w, h, dx, dy, r) => {
w += dx;
h += dy;
const sum = w + h;
h = sum / (r + 1);
w = sum - h;
return [w, h];
};
var calcBottomLeftResize = (w, h, dx, dy, r) => {
w -= dx;
h += dy;
const sum = w + h;
h = sum / (r + 1);
w = sum - h;
return [w, h];
};
var calcTopRightResize = (w, h, dx, dy, r) => {
w += dx;
h -= dy;
const sum = w + h;
h = sum / (r + 1);
w = sum - h;
return [w, h];
};
var calcTopLeftResize = (w, h, dx, dy, r) => {
w -= dx;
h -= dy;
const sum = w + h;
h = sum / (r + 1);
w = sum - h;
return [w, h];
};
var calcTopResize = (w, h, dx, dy, r) => {
h -= dy;
w = h * r;
return [w, h];
};
var calcRightResize = (w, h, dx, dy, r) => {
w += dx;
h = w / r;
return [w, h];
};
var calcBottomResize = (w, h, dx, dy, r) => {
h += dy;
w = h * r;
return [w, h];
};
var calcLeftResize = (w, h, dx, dy, r) => {
w -= dx;
h = w / r;
return [w, h];
};
w += dx, h += dy;
let sum = w + h;
return h = sum / (r + 1), w = sum - h, [w, h];
}, calcBottomLeftResize = (w, h, dx, dy, r) => {
w -= dx, h += dy;
let sum = w + h;
return h = sum / (r + 1), w = sum - h, [w, h];
}, calcTopRightResize = (w, h, dx, dy, r) => {
w += dx, h -= dy;
let sum = w + h;
return h = sum / (r + 1), w = sum - h, [w, h];
}, calcTopLeftResize = (w, h, dx, dy, r) => {
w -= dx, h -= dy;
let sum = w + h;
return h = sum / (r + 1), w = sum - h, [w, h];
}, calcTopResize = (w, h, dx, dy, r) => (h -= dy, w = h * r, [w, h]), calcRightResize = (w, h, dx, dy, r) => (w += dx, h = w / r, [w, h]), calcBottomResize = (w, h, dx, dy, r) => (h += dy, w = h * r, [w, h]), calcLeftResize = (w, h, dx, dy, r) => (w -= dx, h = w / r, [w, h]);
// src/components/resizable/resizable-handle/state.ts
function useResizableHandle(host, props) {
const state = mapSignals(assignProps(defaultResizableHandleProps, props));
const onResize = onResizeContext.consume(host);
const onResizeStart = onResizeStartContext.consume(host);
const onResizeEnd = onResizeEndContext.consume(host);
useResizableHandleState(host, state, { onResize, onResizeStart, onResizeEnd });
return state;
let state = mapSignals(assignProps(defaultResizableHandleProps, props)), onResize = onResizeContext.consume(host), onResizeStart = onResizeStartContext.consume(host), onResizeEnd = onResizeEndContext.consume(host);
return useResizableHandleState(host, state, { onResize, onResizeStart, onResizeEnd }), state;
}
function useResizableHandleState(host, state, context) {
let startX = 0;
let startY = 0;
let width = 0;
let height = 0;
let aspectRatio = 1;
const pointerPressing = createSignal(false);
const handlePointerDown = (event) => {
let startX = 0, startY = 0, width = 0, height = 0, aspectRatio = 1, pointerPressing = createSignal(!1), handlePointerDown = (event) => {
var _a, _b;
event.preventDefault();
pointerPressing.value = true;
startX = event.x;
startY = event.y;
const size = (_b = (_a = context.onResizeStart).value) == null ? void 0 : _b.call(_a);
if (size) {
;
[width, height, aspectRatio] = size;
}
};
const handlePointerMove = (event) => {
event.preventDefault(), pointerPressing.value = !0, startX = event.x, startY = event.y;
let size = (_b = (_a = context.onResizeStart).value) == null ? void 0 : _b.call(_a);
size && ([width, height, aspectRatio] = size);
}, handlePointerMove = (event) => {
var _a, _b;
event.preventDefault();
const dx = event.x - startX;
const dy = event.y - startY;
const [w, h] = calcResize(
let dx = event.x - startX, dy = event.y - startY, [w, h] = calcResize(
state.position.peek(),

@@ -165,26 +107,15 @@ width,

);
(_b = (_a = context.onResize).value) == null ? void 0 : _b.call(_a, w, h);
};
const handlePointerUp = (event) => {
(_b = (_a = context.onResize).value) == null || _b.call(_a, w, h);
}, handlePointerUp = (event) => {
var _a, _b;
event.preventDefault();
pointerPressing.value = false;
(_b = (_a = context.onResizeEnd).value) == null ? void 0 : _b.call(_a);
event.preventDefault(), pointerPressing.value = !1, (_b = (_a = context.onResizeEnd).value) == null || _b.call(_a);
};
useEffect(host, () => {
host.addEventListener("pointerdown", handlePointerDown);
return () => {
host.removeEventListener("pointerdown", handlePointerDown);
};
});
useEffect(host, () => {
if (!pointerPressing.value) {
useEffect(host, () => (host.addEventListener("pointerdown", handlePointerDown), () => {
host.removeEventListener("pointerdown", handlePointerDown);
})), useEffect(host, () => {
if (!pointerPressing.value)
return;
}
const win = getWindow(host);
win.addEventListener("pointermove", handlePointerMove);
win.addEventListener("pointerup", handlePointerUp);
return () => {
win.removeEventListener("pointermove", handlePointerMove);
win.removeEventListener("pointerup", handlePointerUp);
let win = getWindow(host);
return win.addEventListener("pointermove", handlePointerMove), win.addEventListener("pointerup", handlePointerUp), () => {
win.removeEventListener("pointermove", handlePointerMove), win.removeEventListener("pointerup", handlePointerUp);
};

@@ -220,32 +151,19 @@ });

function useResizableRoot(host, props) {
const state = mapSignals2(assignProps2(defaultResizableRootProps, props));
useResizableRootState(host, state);
return state;
let state = mapSignals2(assignProps2(defaultResizableRootProps, props));
return useResizableRootState(host, state), state;
}
function useResizableRootState(host, state) {
const onResizeStart = () => {
let onResizeStart = () => {
var _a, _b;
const { width, height } = host.getBoundingClientRect();
let aspectRatio = (_a = state.aspectRatio.peek()) != null ? _a : width / height;
if (!isFinitePositiveNumber(aspectRatio)) {
aspectRatio = 0;
}
(_b = state.onSizeChangeStart.peek()) == null ? void 0 : _b({ width, height });
return [width, height, aspectRatio];
};
const onResize = (width, height) => {
let { width, height } = host.getBoundingClientRect(), aspectRatio = (_a = state.aspectRatio.peek()) != null ? _a : width / height;
return isFinitePositiveNumber(aspectRatio) || (aspectRatio = 0), (_b = state.onSizeChangeStart.peek()) == null || _b({ width, height }), [width, height, aspectRatio];
}, onResize = (width, height) => {
var _a;
(_a = state.onSizeChange.peek()) == null ? void 0 : _a({ width, height });
state.width.value = width;
state.height.value = height;
};
const onResizeEnd = () => {
(_a = state.onSizeChange.peek()) == null || _a({ width, height }), state.width.value = width, state.height.value = height;
}, onResizeEnd = () => {
var _a;
const { width, height } = host.getBoundingClientRect();
(_a = state.onSizeChangeEnd.peek()) == null ? void 0 : _a({ width, height });
let { width, height } = host.getBoundingClientRect();
(_a = state.onSizeChangeEnd.peek()) == null || _a({ width, height });
};
onResizeStartContext.provide(host, createSignal2(onResizeStart));
onResizeContext.provide(host, createSignal2(onResize));
onResizeEndContext.provide(host, createSignal2(onResizeEnd));
useEffect2(host, () => {
onResizeStartContext.provide(host, createSignal2(onResizeStart)), onResizeContext.provide(host, createSignal2(onResize)), onResizeEndContext.provide(host, createSignal2(onResizeEnd)), useEffect2(host, () => {
updateResizableRootStyles(

@@ -260,12 +178,3 @@ host,

function updateResizableRootStyles(host, width, height, aspectRatio) {
host.style.width = isFinitePositiveNumber(width) ? `${width}px` : "";
host.style.height = isFinitePositiveNumber(height) ? `${height}px` : "";
if (isFinitePositiveNumber(aspectRatio)) {
host.style.aspectRatio = `${aspectRatio}`;
if (width && width > 0 && aspectRatio >= 1) {
host.style.height = "auto";
} else if (height && height > 0 && aspectRatio <= 1) {
host.style.width = "auto";
}
}
host.style.width = isFinitePositiveNumber(width) ? `${width}px` : "", host.style.height = isFinitePositiveNumber(height) ? `${height}px` : "", isFinitePositiveNumber(aspectRatio) && (host.style.aspectRatio = `${aspectRatio}`, width && width > 0 && aspectRatio >= 1 ? host.style.height = "auto" : height && height > 0 && aspectRatio <= 1 && (host.style.width = "auto"));
}

@@ -272,0 +181,0 @@

import {
defineCustomElement
} from "./chunk-LCDA7GFP.js";
} from "./chunk-Y2CJYXR5.js";

@@ -12,8 +12,8 @@ // src/components/tooltip/tooltip-content/element.gen.ts

...defaultProps,
shift: true,
flip: true,
shift: !0,
flip: !0,
offset: 6,
overflowPadding: 4,
// Don't need boundary when hoist is true.
hoist: true,
hoist: !0,
boundary: []

@@ -20,0 +20,0 @@ };

{
"name": "@prosekit/web",
"type": "module",
"version": "0.0.0-next-20240602042411",
"version": "0.0.0-next-20240605080819",
"private": false,

@@ -76,9 +76,9 @@ "author": {

"@floating-ui/dom": "^1.6.5",
"@prosekit/core": "0.0.0-next-20240602042411",
"@prosekit/extensions": "0.0.0-next-20240602042411",
"@prosekit/pm": "0.0.0-next-20240602042411",
"@zag-js/dom-query": "^0.51.2"
"@zag-js/dom-query": "^0.53.0",
"@prosekit/core": "^0.0.0-next-20240605080819",
"@prosekit/extensions": "^0.0.0-next-20240605080819",
"@prosekit/pm": "^0.0.0-next-20240605080819"
},
"devDependencies": {
"tsup": "^8.0.2",
"tsup": "^8.1.0",
"typescript": "^5.4.5",

@@ -85,0 +85,0 @@ "vitest": "^1.6.0",

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc