@prosekit/web
Advanced tools
Comparing version 0.0.0-next-20240602042411 to 0.0.0-next-20240605080819
@@ -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", |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
63305
1515
+ Added@prosekit/core@0.0.0(transitive)
+ Added@prosekit/extensions@0.0.0-next-20240901092634(transitive)
+ Added@prosekit/pm@0.0.0-next-20240901092634(transitive)
+ Added@zag-js/dom-query@0.53.0(transitive)
+ Addedprosemirror-changeset@2.2.1(transitive)
+ Addedprosemirror-gapcursor@1.3.2(transitive)
+ Addedprosemirror-highlight@0.8.0(transitive)
+ Addedprosemirror-search@1.0.0(transitive)
- Removed@prosekit/core@0.0.0-next-20240602042411(transitive)
- Removed@prosekit/extensions@0.0.0-next-20240602042411(transitive)
- Removed@prosekit/pm@0.0.0-next-20240602042411(transitive)
- Removed@zag-js/dom-query@0.51.2(transitive)
- Removedclsx@2.1.1(transitive)
- Removedprosemirror-highlight@0.6.0(transitive)
- Removedprosemirror-splittable@0.1.1(transitive)
- Removedtype-fest@4.30.2(transitive)
Updated@zag-js/dom-query@^0.53.0