| @@ -108,9 +108,9 @@ | ||
| 108 | 108 | RichTextData: () => RichTextData, |
| 109 | 109 | __experimentalRichText: () => __experimentalRichText, |
| 110 | 110 | __unstableCreateElement: () => createElement, |
| 111 | 111 | __unstableToDom: () => toDom, |
| 112 | - __unstableUseRichText: () => useDeprecatedRichText, | |
| 112 | + __unstableUseRichText: () => __unstableUseRichText, | |
| 113 | 113 | applyFormat: () => applyFormat, |
| 114 | 114 | concat: () => concat, |
| 115 | 115 | create: () => create, |
| 116 | 116 | getActiveFormat: () => getActiveFormat, |
| @@ -238,14 +238,10 @@ | ||
| 238 | 238 | } |
| 239 | 239 | if (format1.type !== format2.type) { |
| 240 | 240 | return false; |
| 241 | 241 | } |
| 242 | - let attributes1 = format1.attributes; | |
| 243 | - let attributes2 = format2.attributes; | |
| 244 | - if (format1.unregisteredAttributes || format2.unregisteredAttributes) { | |
| 245 | - attributes1 = { ...attributes1, ...format1.unregisteredAttributes }; | |
| 246 | - attributes2 = { ...attributes2, ...format2.unregisteredAttributes }; | |
| 247 | - } | |
| 242 | + const attributes1 = format1.attributes; | |
| 243 | + const attributes2 = format2.attributes; | |
| 248 | 244 | if (attributes1 === attributes2) { |
| 249 | 245 | return true; |
| 250 | 246 | } |
| 251 | 247 | if (!attributes1 || !attributes2) { |
| @@ -816,20 +812,15 @@ | ||
| 816 | 812 | } |
| 817 | 813 | if (formatType.contentEditable === false) { |
| 818 | 814 | delete unregisteredAttributes.contenteditable; |
| 819 | 815 | } |
| 820 | - const format = { | |
| 816 | + return { | |
| 821 | 817 | formatType, |
| 822 | 818 | type: formatType.name, |
| 823 | - tagName | |
| 819 | + tagName, | |
| 820 | + attributes: registeredAttributes, | |
| 821 | + unregisteredAttributes | |
| 824 | 822 | }; |
| 825 | - if (Object.keys(registeredAttributes).length) { | |
| 826 | - format.attributes = registeredAttributes; | |
| 827 | - } | |
| 828 | - if (Object.keys(unregisteredAttributes).length) { | |
| 829 | - format.unregisteredAttributes = unregisteredAttributes; | |
| 830 | - } | |
| 831 | - return format; | |
| 832 | 823 | } |
| 833 | 824 | var RichTextData = class _RichTextData { |
| 834 | 825 | #value; |
| 835 | 826 | static empty() { |
| @@ -1749,27 +1740,12 @@ | ||
| 1749 | 1740 | ); |
| 1750 | 1741 | |
| 1751 | 1742 | // packages/rich-text/build-module/hook/index.mjs |
| 1752 | 1743 | var import_element5 = __toESM(require_element(), 1); |
| 1753 | - var import_compose8 = __toESM(require_compose(), 1); | |
| 1744 | + var import_compose2 = __toESM(require_compose(), 1); | |
| 1754 | 1745 | var import_data9 = __toESM(require_data(), 1); |
| 1755 | 1746 | var import_deprecated = __toESM(require_deprecated(), 1); |
| 1756 | 1747 | |
| 1757 | - // packages/rich-text/build-module/owns-selection.mjs | |
| 1758 | - function ownsSelection(element) { | |
| 1759 | - const { ownerDocument } = element; | |
| 1760 | - const { activeElement } = ownerDocument; | |
| 1761 | - if (activeElement === element) { | |
| 1762 | - return true; | |
| 1763 | - } | |
| 1764 | - if (!activeElement || !activeElement.isContentEditable || !element.isContentEditable || !activeElement.contains(element)) { | |
| 1765 | - return false; | |
| 1766 | - } | |
| 1767 | - const selection = ownerDocument.defaultView.getSelection(); | |
| 1768 | - const { anchorNode, focusNode } = selection; | |
| 1769 | - return !!anchorNode && !!focusNode && element.contains(anchorNode) && element.contains(focusNode); | |
| 1770 | - } | |
| 1771 | - | |
| 1772 | 1748 | // packages/rich-text/build-module/hook/use-default-style.mjs |
| 1773 | 1749 | var import_element = __toESM(require_element(), 1); |
| 1774 | 1750 | var whiteSpace = "pre-wrap"; |
| 1775 | 1751 | function useDefaultStyle() { |
| @@ -1776,9 +1752,9 @@ | ||
| 1776 | 1752 | return (0, import_element.useCallback)((element) => { |
| 1777 | 1753 | if (!element) { |
| 1778 | 1754 | return; |
| 1779 | 1755 | } |
| 1780 | - element.style.whiteSpace = element.style.whiteSpace || whiteSpace; | |
| 1756 | + element.style.whiteSpace = whiteSpace; | |
| 1781 | 1757 | }, []); |
| 1782 | 1758 | } |
| 1783 | 1759 | |
| 1784 | 1760 | // node_modules/colord/index.mjs |
| @@ -1976,18 +1952,16 @@ | ||
| 1976 | 1952 | } |
| 1977 | 1953 | |
| 1978 | 1954 | // packages/rich-text/build-module/hook/event-listeners/index.mjs |
| 1979 | 1955 | var import_element3 = __toESM(require_element(), 1); |
| 1980 | - var import_compose7 = __toESM(require_compose(), 1); | |
| 1956 | + var import_compose = __toESM(require_compose(), 1); | |
| 1981 | 1957 | |
| 1982 | 1958 | // packages/rich-text/build-module/hook/event-listeners/copy-handler.mjs |
| 1983 | - var import_compose = __toESM(require_compose(), 1); | |
| 1984 | - var { subscribeDelegatedListener } = unlock(import_compose.privateApis); | |
| 1985 | 1959 | var copy_handler_default = (props) => (element) => { |
| 1986 | 1960 | function onCopy(event) { |
| 1987 | - const { record, handleChange } = props.current; | |
| 1961 | + const { record } = props.current; | |
| 1988 | 1962 | const { ownerDocument } = element; |
| 1989 | - if (isCollapsed(record.current) || !element.contains(ownerDocument.activeElement) && !ownsSelection(element)) { | |
| 1963 | + if (isCollapsed(record.current) || !element.contains(ownerDocument.activeElement)) { | |
| 1990 | 1964 | return; |
| 1991 | 1965 | } |
| 1992 | 1966 | const selectedRecord = slice(record.current); |
| 1993 | 1967 | const plainText = getTextContent(selectedRecord); |
| @@ -1996,31 +1970,21 @@ | ||
| 1996 | 1970 | event.clipboardData.setData("text/html", html); |
| 1997 | 1971 | event.clipboardData.setData("rich-text", "true"); |
| 1998 | 1972 | event.preventDefault(); |
| 1999 | 1973 | if (event.type === "cut") { |
| 2000 | - handleChange(remove2(record.current)); | |
| 1974 | + ownerDocument.execCommand("delete"); | |
| 2001 | 1975 | } |
| 2002 | 1976 | } |
| 2003 | 1977 | const { defaultView } = element.ownerDocument; |
| 2004 | - const unsubscribeCopy = subscribeDelegatedListener( | |
| 2005 | - defaultView, | |
| 2006 | - "copy", | |
| 2007 | - onCopy | |
| 2008 | - ); | |
| 2009 | - const unsubscribeCut = subscribeDelegatedListener( | |
| 2010 | - defaultView, | |
| 2011 | - "cut", | |
| 2012 | - onCopy | |
| 2013 | - ); | |
| 1978 | + defaultView.addEventListener("copy", onCopy); | |
| 1979 | + defaultView.addEventListener("cut", onCopy); | |
| 2014 | 1980 | return () => { |
| 2015 | - unsubscribeCopy(); | |
| 2016 | - unsubscribeCut(); | |
| 1981 | + defaultView.removeEventListener("copy", onCopy); | |
| 1982 | + defaultView.removeEventListener("cut", onCopy); | |
| 2017 | 1983 | }; |
| 2018 | 1984 | }; |
| 2019 | 1985 | |
| 2020 | 1986 | // packages/rich-text/build-module/hook/event-listeners/select-object.mjs |
| 2021 | - var import_compose2 = __toESM(require_compose(), 1); | |
| 2022 | - var { subscribeDelegatedListener: subscribeDelegatedListener2 } = unlock(import_compose2.privateApis); | |
| 2023 | 1987 | var select_object_default = () => (element) => { |
| 2024 | 1988 | function onClick(event) { |
| 2025 | 1989 | const { target } = event; |
| 2026 | 1990 | if (target === element || target.textContent && target.isContentEditable) { |
| @@ -2039,49 +2003,22 @@ | ||
| 2039 | 2003 | selection.addRange(range); |
| 2040 | 2004 | event.preventDefault(); |
| 2041 | 2005 | } |
| 2042 | 2006 | function onFocusIn(event) { |
| 2043 | - if (event.relatedTarget && !element.contains(event.relatedTarget)) { | |
| 2007 | + if (event.relatedTarget && !element.contains(event.relatedTarget) && event.relatedTarget.tagName === "A") { | |
| 2044 | 2008 | onClick(event); |
| 2045 | 2009 | } |
| 2046 | 2010 | } |
| 2047 | - const unsubscribeClick = subscribeDelegatedListener2( | |
| 2048 | - element, | |
| 2049 | - "click", | |
| 2050 | - onClick | |
| 2051 | - ); | |
| 2052 | - const unsubscribeFocusIn = subscribeDelegatedListener2( | |
| 2053 | - element, | |
| 2054 | - "focusin", | |
| 2055 | - onFocusIn | |
| 2056 | - ); | |
| 2011 | + element.addEventListener("click", onClick); | |
| 2012 | + element.addEventListener("focusin", onFocusIn); | |
| 2057 | 2013 | return () => { |
| 2058 | - unsubscribeClick(); | |
| 2059 | - unsubscribeFocusIn(); | |
| 2014 | + element.removeEventListener("click", onClick); | |
| 2015 | + element.removeEventListener("focusin", onFocusIn); | |
| 2060 | 2016 | }; |
| 2061 | 2017 | }; |
| 2062 | 2018 | |
| 2063 | 2019 | // packages/rich-text/build-module/hook/event-listeners/format-boundaries.mjs |
| 2064 | 2020 | var import_keycodes = __toESM(require_keycodes(), 1); |
| 2065 | - | |
| 2066 | - // packages/rich-text/build-module/subscribe-owned-listener.mjs | |
| 2067 | - var import_compose3 = __toESM(require_compose(), 1); | |
| 2068 | - var { subscribeDelegatedListener: subscribeDelegatedListener3 } = unlock(import_compose3.privateApis); | |
| 2069 | - function subscribeOwnedListener(element, eventType, callback, capture = false) { | |
| 2070 | - return subscribeDelegatedListener3( | |
| 2071 | - element.ownerDocument, | |
| 2072 | - eventType, | |
| 2073 | - (event) => { | |
| 2074 | - if (!element.contains(event.target) && !ownsSelection(element)) { | |
| 2075 | - return; | |
| 2076 | - } | |
| 2077 | - callback(event); | |
| 2078 | - }, | |
| 2079 | - capture | |
| 2080 | - ); | |
| 2081 | - } | |
| 2082 | - | |
| 2083 | - // packages/rich-text/build-module/hook/event-listeners/format-boundaries.mjs | |
| 2084 | 2021 | var EMPTY_ACTIVE_FORMATS = []; |
| 2085 | 2022 | var format_boundaries_default = (props) => (element) => { |
| 2086 | 2023 | function onKeyDown(event) { |
| 2087 | 2024 | const { keyCode, shiftKey, altKey, metaKey, ctrlKey } = event; |
| @@ -2099,9 +2036,10 @@ | ||
| 2099 | 2036 | end, |
| 2100 | 2037 | activeFormats: currentActiveFormats = [] |
| 2101 | 2038 | } = record.current; |
| 2102 | 2039 | const collapsed = isCollapsed(record.current); |
| 2103 | - const { defaultView } = element.ownerDocument; | |
| 2040 | + const { ownerDocument } = element; | |
| 2041 | + const { defaultView } = ownerDocument; | |
| 2104 | 2042 | const { direction } = defaultView.getComputedStyle(element); |
| 2105 | 2043 | const reverseKey = direction === "rtl" ? import_keycodes.RIGHT : import_keycodes.LEFT; |
| 2106 | 2044 | const isReverse = event.keyCode === reverseKey; |
| 2107 | 2045 | if (collapsed && currentActiveFormats.length === 0) { |
| @@ -2142,9 +2080,12 @@ | ||
| 2142 | 2080 | record.current = newValue; |
| 2143 | 2081 | applyRecord(newValue); |
| 2144 | 2082 | forceRender(); |
| 2145 | 2083 | } |
| 2146 | - return subscribeOwnedListener(element, "keydown", onKeyDown, true); | |
| 2084 | + element.addEventListener("keydown", onKeyDown); | |
| 2085 | + return () => { | |
| 2086 | + element.removeEventListener("keydown", onKeyDown); | |
| 2087 | + }; | |
| 2147 | 2088 | }; |
| 2148 | 2089 | |
| 2149 | 2090 | // packages/rich-text/build-module/hook/event-listeners/delete.mjs |
| 2150 | 2091 | var import_keycodes2 = __toESM(require_keycodes(), 1); |
| @@ -2150,8 +2091,9 @@ | ||
| 2150 | 2091 | var import_keycodes2 = __toESM(require_keycodes(), 1); |
| 2151 | 2092 | var delete_default = (props) => (element) => { |
| 2152 | 2093 | function onKeyDown(event) { |
| 2153 | 2094 | const { keyCode } = event; |
| 2095 | + const { createRecord, handleChange } = props.current; | |
| 2154 | 2096 | if (event.defaultPrevented) { |
| 2155 | 2097 | return; |
| 2156 | 2098 | } |
| 2157 | 2099 | if (keyCode !== import_keycodes2.DELETE && keyCode !== import_keycodes2.BACKSPACE) { |
| @@ -2156,9 +2098,8 @@ | ||
| 2156 | 2098 | } |
| 2157 | 2099 | if (keyCode !== import_keycodes2.DELETE && keyCode !== import_keycodes2.BACKSPACE) { |
| 2158 | 2100 | return; |
| 2159 | 2101 | } |
| 2160 | - const { createRecord, handleChange } = props.current; | |
| 2161 | 2102 | const currentValue = createRecord(); |
| 2162 | 2103 | const { start, end, text } = currentValue; |
| 2163 | 2104 | if (start === 0 && end !== 0 && end === text.length) { |
| 2164 | 2105 | handleChange(remove2(currentValue)); |
| @@ -2164,14 +2105,14 @@ | ||
| 2164 | 2105 | handleChange(remove2(currentValue)); |
| 2165 | 2106 | event.preventDefault(); |
| 2166 | 2107 | } |
| 2167 | 2108 | } |
| 2168 | - return subscribeOwnedListener(element, "keydown", onKeyDown); | |
| 2109 | + element.addEventListener("keydown", onKeyDown); | |
| 2110 | + return () => { | |
| 2111 | + element.removeEventListener("keydown", onKeyDown); | |
| 2112 | + }; | |
| 2169 | 2113 | }; |
| 2170 | 2114 | |
| 2171 | - // packages/rich-text/build-module/hook/event-listeners/input-and-selection.mjs | |
| 2172 | - var import_compose4 = __toESM(require_compose(), 1); | |
| 2173 | - | |
| 2174 | 2115 | // packages/rich-text/build-module/update-formats.mjs |
| 2175 | 2116 | function updateFormats({ value, start, end, formats }) { |
| 2176 | 2117 | const min = Math.min(start, end); |
| 2177 | 2118 | const max = Math.max(start, end); |
| @@ -2199,9 +2140,8 @@ | ||
| 2199 | 2140 | return value; |
| 2200 | 2141 | } |
| 2201 | 2142 | |
| 2202 | 2143 | // packages/rich-text/build-module/hook/event-listeners/input-and-selection.mjs |
| 2203 | - var { subscribeDelegatedListener: subscribeDelegatedListener4 } = unlock(import_compose4.privateApis); | |
| 2204 | 2144 | var INSERTION_INPUT_TYPES_TO_IGNORE = /* @__PURE__ */ new Set([ |
| 2205 | 2145 | "insertParagraph", |
| 2206 | 2146 | "insertOrderedList", |
| 2207 | 2147 | "insertUnorderedList", |
| @@ -2249,34 +2189,25 @@ | ||
| 2249 | 2189 | formats: clearFormats ? [] : oldActiveFormats |
| 2250 | 2190 | }); |
| 2251 | 2191 | handleChange(change); |
| 2252 | 2192 | } |
| 2253 | - let selectionSnapshot; | |
| 2254 | 2193 | function handleSelectionChange() { |
| 2255 | 2194 | const { record, applyRecord, createRecord, onSelectionChange } = props.current; |
| 2256 | 2195 | if (element.contentEditable !== "true") { |
| 2257 | 2196 | return; |
| 2258 | 2197 | } |
| 2259 | - if (ownerDocument.activeElement !== element && !ownsSelection(element)) { | |
| 2198 | + if (ownerDocument.activeElement !== element) { | |
| 2199 | + ownerDocument.removeEventListener( | |
| 2200 | + "selectionchange", | |
| 2201 | + handleSelectionChange | |
| 2202 | + ); | |
| 2260 | 2203 | return; |
| 2261 | 2204 | } |
| 2262 | 2205 | if (isComposing) { |
| 2263 | 2206 | return; |
| 2264 | 2207 | } |
| 2265 | - const selection = defaultView.getSelection(); | |
| 2266 | - if (selectionSnapshot && selectionSnapshot.anchorNode === selection.anchorNode && selectionSnapshot.anchorOffset === selection.anchorOffset && selectionSnapshot.focusNode === selection.focusNode && selectionSnapshot.focusOffset === selection.focusOffset && selectionSnapshot.processedStart === record.current.start && selectionSnapshot.processedEnd === record.current.end) { | |
| 2267 | - return; | |
| 2268 | - } | |
| 2269 | 2208 | const { start, end, text } = createRecord(); |
| 2270 | 2209 | const oldRecord = record.current; |
| 2271 | - selectionSnapshot = { | |
| 2272 | - anchorNode: selection.anchorNode, | |
| 2273 | - anchorOffset: selection.anchorOffset, | |
| 2274 | - focusNode: selection.focusNode, | |
| 2275 | - focusOffset: selection.focusOffset, | |
| 2276 | - processedStart: start, | |
| 2277 | - processedEnd: end | |
| 2278 | - }; | |
| 2279 | 2210 | if (text !== oldRecord.text) { |
| 2280 | 2211 | onInput(); |
| 2281 | 2212 | return; |
| 2282 | 2213 | } |
| @@ -2306,31 +2237,25 @@ | ||
| 2306 | 2237 | onSelectionChange(start, end); |
| 2307 | 2238 | } |
| 2308 | 2239 | function onCompositionStart() { |
| 2309 | 2240 | isComposing = true; |
| 2241 | + ownerDocument.removeEventListener( | |
| 2242 | + "selectionchange", | |
| 2243 | + handleSelectionChange | |
| 2244 | + ); | |
| 2310 | 2245 | element.querySelector(`[${PLACEHOLDER_ATTR_NAME}]`)?.remove(); |
| 2311 | 2246 | } |
| 2312 | 2247 | function onCompositionEnd() { |
| 2313 | 2248 | isComposing = false; |
| 2314 | 2249 | onInput({ inputType: "insertText" }); |
| 2250 | + ownerDocument.addEventListener( | |
| 2251 | + "selectionchange", | |
| 2252 | + handleSelectionChange | |
| 2253 | + ); | |
| 2315 | 2254 | } |
| 2316 | - function onFocus(event) { | |
| 2317 | - if (event.target !== element) { | |
| 2318 | - return; | |
| 2319 | - } | |
| 2320 | - if (element.contentEditable !== "true") { | |
| 2321 | - return; | |
| 2322 | - } | |
| 2255 | + function onFocus() { | |
| 2323 | 2256 | const { record, isSelected, onSelectionChange, applyRecord } = props.current; |
| 2324 | 2257 | if (element.parentElement.closest('[contenteditable="true"]')) { |
| 2325 | - const selection = defaultView.getSelection(); | |
| 2326 | - if (!selection.anchorNode || !element.contains(selection.anchorNode)) { | |
| 2327 | - if (isSelected && record.current.start !== void 0) { | |
| 2328 | - applyRecord(record.current); | |
| 2329 | - } else { | |
| 2330 | - selection.collapse(element, 0); | |
| 2331 | - } | |
| 2332 | - } | |
| 2333 | 2258 | return; |
| 2334 | 2259 | } |
| 2335 | 2260 | if (!isSelected) { |
| 2336 | 2261 | const index = void 0; |
| @@ -2339,71 +2264,31 @@ | ||
| 2339 | 2264 | start: index, |
| 2340 | 2265 | end: index, |
| 2341 | 2266 | activeFormats: EMPTY_ACTIVE_FORMATS2 |
| 2342 | 2267 | }; |
| 2343 | - selectionSnapshot = void 0; | |
| 2344 | 2268 | } else { |
| 2345 | - applyRecord(record.current); | |
| 2269 | + applyRecord(record.current, { domOnly: true }); | |
| 2346 | 2270 | } |
| 2347 | 2271 | onSelectionChange(record.current.start, record.current.end); |
| 2348 | 2272 | window.queueMicrotask(handleSelectionChange); |
| 2273 | + ownerDocument.addEventListener( | |
| 2274 | + "selectionchange", | |
| 2275 | + handleSelectionChange | |
| 2276 | + ); | |
| 2349 | 2277 | } |
| 2350 | - const unsubscribeInput = subscribeOwnedListener( | |
| 2351 | - element, | |
| 2352 | - "input", | |
| 2353 | - onInput, | |
| 2354 | - true | |
| 2355 | - ); | |
| 2356 | - const unsubscribeCompositionStart = subscribeOwnedListener( | |
| 2357 | - element, | |
| 2358 | - "compositionstart", | |
| 2359 | - onCompositionStart | |
| 2360 | - ); | |
| 2361 | - const unsubscribeCompositionEnd = subscribeOwnedListener( | |
| 2362 | - element, | |
| 2363 | - "compositionend", | |
| 2364 | - onCompositionEnd, | |
| 2365 | - true | |
| 2366 | - ); | |
| 2367 | - const unsubscribeFocus = subscribeDelegatedListener4( | |
| 2368 | - element, | |
| 2369 | - "focusin", | |
| 2370 | - onFocus | |
| 2371 | - ); | |
| 2372 | - const unsubscribeSelectionChange = subscribeDelegatedListener4( | |
| 2373 | - ownerDocument, | |
| 2374 | - "selectionchange", | |
| 2375 | - handleSelectionChange | |
| 2376 | - ); | |
| 2377 | - const unsubscribeEnsureSelectionSync = [ | |
| 2378 | - "keydown", | |
| 2379 | - "beforeinput", | |
| 2380 | - "copy", | |
| 2381 | - "cut", | |
| 2382 | - "paste" | |
| 2383 | - ].map( | |
| 2384 | - (eventType) => subscribeDelegatedListener4( | |
| 2385 | - ownerDocument, | |
| 2386 | - eventType, | |
| 2387 | - handleSelectionChange, | |
| 2388 | - true | |
| 2389 | - ) | |
| 2390 | - ); | |
| 2278 | + element.addEventListener("input", onInput); | |
| 2279 | + element.addEventListener("compositionstart", onCompositionStart); | |
| 2280 | + element.addEventListener("compositionend", onCompositionEnd); | |
| 2281 | + element.addEventListener("focus", onFocus); | |
| 2391 | 2282 | return () => { |
| 2392 | - unsubscribeInput(); | |
| 2393 | - unsubscribeCompositionStart(); | |
| 2394 | - unsubscribeCompositionEnd(); | |
| 2395 | - unsubscribeFocus(); | |
| 2396 | - unsubscribeSelectionChange(); | |
| 2397 | - unsubscribeEnsureSelectionSync.forEach( | |
| 2398 | - (unsubscribe) => unsubscribe() | |
| 2399 | - ); | |
| 2283 | + element.removeEventListener("input", onInput); | |
| 2284 | + element.removeEventListener("compositionstart", onCompositionStart); | |
| 2285 | + element.removeEventListener("compositionend", onCompositionEnd); | |
| 2286 | + element.removeEventListener("focus", onFocus); | |
| 2400 | 2287 | }; |
| 2401 | 2288 | }; |
| 2402 | 2289 | |
| 2403 | 2290 | // packages/rich-text/build-module/hook/event-listeners/selection-change-compat.mjs |
| 2404 | - var import_compose5 = __toESM(require_compose(), 1); | |
| 2405 | - var { subscribeDelegatedListener: subscribeDelegatedListener5 } = unlock(import_compose5.privateApis); | |
| 2406 | 2291 | var selection_change_compat_default = () => (element) => { |
| 2407 | 2292 | const { ownerDocument } = element; |
| 2408 | 2293 | const { defaultView } = ownerDocument; |
| 2409 | 2294 | const selection = defaultView?.getSelection(); |
| @@ -2429,27 +2314,17 @@ | ||
| 2429 | 2314 | ownerDocument.addEventListener("selectionchange", onCancel); |
| 2430 | 2315 | ownerDocument.addEventListener("input", onCancel); |
| 2431 | 2316 | range = getRange(); |
| 2432 | 2317 | } |
| 2433 | - const unsubscribePointerDown = subscribeDelegatedListener5( | |
| 2434 | - element, | |
| 2435 | - "pointerdown", | |
| 2436 | - onDown | |
| 2437 | - ); | |
| 2438 | - const unsubscribeKeyDown = subscribeDelegatedListener5( | |
| 2439 | - element, | |
| 2440 | - "keydown", | |
| 2441 | - onDown | |
| 2442 | - ); | |
| 2318 | + element.addEventListener("pointerdown", onDown); | |
| 2319 | + element.addEventListener("keydown", onDown); | |
| 2443 | 2320 | return () => { |
| 2444 | - unsubscribePointerDown(); | |
| 2445 | - unsubscribeKeyDown(); | |
| 2321 | + element.removeEventListener("pointerdown", onDown); | |
| 2322 | + element.removeEventListener("keydown", onDown); | |
| 2446 | 2323 | }; |
| 2447 | 2324 | }; |
| 2448 | 2325 | |
| 2449 | 2326 | // packages/rich-text/build-module/hook/event-listeners/prevent-focus-capture.mjs |
| 2450 | - var import_compose6 = __toESM(require_compose(), 1); | |
| 2451 | - var { subscribeDelegatedListener: subscribeDelegatedListener6 } = unlock(import_compose6.privateApis); | |
| 2452 | 2327 | function preventFocusCapture() { |
| 2453 | 2328 | return (element) => { |
| 2454 | 2329 | const { ownerDocument } = element; |
| 2455 | 2330 | const { defaultView } = ownerDocument; |
| @@ -2473,21 +2348,13 @@ | ||
| 2473 | 2348 | element.setAttribute("contenteditable", value); |
| 2474 | 2349 | value = null; |
| 2475 | 2350 | } |
| 2476 | 2351 | } |
| 2477 | - const unsubscribePointerDown = subscribeDelegatedListener6( | |
| 2478 | - defaultView, | |
| 2479 | - "pointerdown", | |
| 2480 | - onPointerDown | |
| 2481 | - ); | |
| 2482 | - const unsubscribePointerUp = subscribeDelegatedListener6( | |
| 2483 | - defaultView, | |
| 2484 | - "pointerup", | |
| 2485 | - onPointerUp | |
| 2486 | - ); | |
| 2352 | + defaultView.addEventListener("pointerdown", onPointerDown); | |
| 2353 | + defaultView.addEventListener("pointerup", onPointerUp); | |
| 2487 | 2354 | return () => { |
| 2488 | - unsubscribePointerDown(); | |
| 2489 | - unsubscribePointerUp(); | |
| 2355 | + defaultView.removeEventListener("pointerdown", onPointerDown); | |
| 2356 | + defaultView.removeEventListener("pointerup", onPointerUp); | |
| 2490 | 2357 | }; |
| 2491 | 2358 | }; |
| 2492 | 2359 | } |
| 2493 | 2360 | |
| @@ -2492,13 +2359,13 @@ | ||
| 2492 | 2359 | } |
| 2493 | 2360 | |
| 2494 | 2361 | // packages/rich-text/build-module/hook/event-listeners/index.mjs |
| 2495 | 2362 | var allEventListeners = [ |
| 2496 | - input_and_selection_default, | |
| 2497 | 2363 | copy_handler_default, |
| 2498 | 2364 | select_object_default, |
| 2499 | 2365 | format_boundaries_default, |
| 2500 | 2366 | delete_default, |
| 2367 | + input_and_selection_default, | |
| 2501 | 2368 | selection_change_compat_default, |
| 2502 | 2369 | preventFocusCapture |
| 2503 | 2370 | ]; |
| 2504 | 2371 | function useEventListeners(props) { |
| @@ -2509,9 +2376,9 @@ | ||
| 2509 | 2376 | const refEffects = (0, import_element3.useMemo)( |
| 2510 | 2377 | () => allEventListeners.map((refEffect) => refEffect(propsRef)), |
| 2511 | 2378 | [propsRef] |
| 2512 | 2379 | ); |
| 2513 | - return (0, import_compose7.useRefEffect)( | |
| 2380 | + return (0, import_compose.useRefEffect)( | |
| 2514 | 2381 | (element) => { |
| 2515 | 2382 | const cleanups = refEffects.map((effect) => effect(element)); |
| 2516 | 2383 | return () => { |
| 2517 | 2384 | cleanups.forEach((cleanup) => cleanup()); |
| @@ -2754,9 +2621,11 @@ | ||
| 2754 | 2621 | function applyFromProps() { |
| 2755 | 2622 | const previousValue = _valueRef.current; |
| 2756 | 2623 | setRecordFromProps(); |
| 2757 | 2624 | const contentLengthChanged = previousValue && typeof previousValue === "string" && typeof value === "string" && previousValue.length !== value.length; |
| 2758 | - const hasFocus = ref.current?.contains(ref.current.ownerDocument.activeElement) || ownsSelection(ref.current); | |
| 2625 | + const hasFocus = ref.current?.contains( | |
| 2626 | + ref.current.ownerDocument.activeElement | |
| 2627 | + ); | |
| 2759 | 2628 | const skipSelection = contentLengthChanged && !hasFocus; |
| 2760 | 2629 | applyRecord(recordRef.current, { domOnly: skipSelection }); |
| 2761 | 2630 | } |
| 2762 | 2631 | const didMountRef = (0, import_element5.useRef)(false); |
| @@ -2769,15 +2638,15 @@ | ||
| 2769 | 2638 | (0, import_element5.useLayoutEffect)(() => { |
| 2770 | 2639 | if (!hadSelectionUpdateRef.current) { |
| 2771 | 2640 | return; |
| 2772 | 2641 | } |
| 2773 | - if (ref.current.ownerDocument.activeElement !== ref.current && !ownsSelection(ref.current)) { | |
| 2642 | + if (ref.current.ownerDocument.activeElement !== ref.current) { | |
| 2774 | 2643 | ref.current.focus(); |
| 2775 | 2644 | } |
| 2776 | 2645 | applyRecord(recordRef.current); |
| 2777 | 2646 | hadSelectionUpdateRef.current = false; |
| 2778 | 2647 | }, [hadSelectionUpdateRef.current]); |
| 2779 | - const mergedRefs = (0, import_compose8.useMergeRefs)([ | |
| 2648 | + const mergedRefs = (0, import_compose2.useMergeRefs)([ | |
| 2780 | 2649 | ref, |
| 2781 | 2650 | useDefaultStyle(), |
| 2782 | 2651 | useBoundaryStyle({ record: recordRef }), |
| 2783 | 2652 | useEventListeners({ |
| @@ -2788,9 +2657,9 @@ | ||
| 2788 | 2657 | isSelected, |
| 2789 | 2658 | onSelectionChange, |
| 2790 | 2659 | forceRender |
| 2791 | 2660 | }), |
| 2792 | - (0, import_compose8.useRefEffect)(() => { | |
| 2661 | + (0, import_compose2.useRefEffect)(() => { | |
| 2793 | 2662 | applyFromProps(); |
| 2794 | 2663 | didMountRef.current = true; |
| 2795 | 2664 | }, [placeholder, ...__unstableDependencies]) |
| 2796 | 2665 | ]); |
| @@ -2864,9 +2733,9 @@ | ||
| 2864 | 2733 | __unstableAddInvisibleFormats: addInvisibleFormats |
| 2865 | 2734 | }); |
| 2866 | 2735 | return { ...result, formatTypes: formatTypes2 }; |
| 2867 | 2736 | } |
| 2868 | - function useDeprecatedRichText(props) { | |
| 2737 | + function __unstableUseRichText(props) { | |
| 2869 | 2738 | (0, import_deprecated.default)("`__unstableUseRichText` hook", { |
| 2870 | 2739 | since: "7.0" |
| 2871 | 2740 | }); |
| 2872 | 2741 | return useRichTextBase(props); |
| @@ -2871,102 +2740,16 @@ | ||
| 2871 | 2740 | }); |
| 2872 | 2741 | return useRichTextBase(props); |
| 2873 | 2742 | } |
| 2874 | 2743 | |
| 2875 | - // packages/rich-text/build-module/contexts.mjs | |
| 2876 | - var import_element6 = __toESM(require_element(), 1); | |
| 2877 | - var KeyboardShortcutContext = (0, import_element6.createContext)(); | |
| 2878 | - KeyboardShortcutContext.displayName = "KeyboardShortcutContext"; | |
| 2879 | - var InputEventContext = (0, import_element6.createContext)(); | |
| 2880 | - InputEventContext.displayName = "InputEventContext"; | |
| 2881 | - | |
| 2882 | - // packages/rich-text/build-module/keyboard-shortcut.mjs | |
| 2883 | - var import_keycodes3 = __toESM(require_keycodes(), 1); | |
| 2884 | - var import_element7 = __toESM(require_element(), 1); | |
| 2885 | - var import_compose9 = __toESM(require_compose(), 1); | |
| 2886 | - function RichTextShortcut({ character, type, onUse }) { | |
| 2887 | - const keyboardShortcuts = (0, import_element7.useContext)(KeyboardShortcutContext); | |
| 2888 | - const stableOnUse = (0, import_compose9.useEvent)(onUse); | |
| 2889 | - (0, import_element7.useEffect)(() => { | |
| 2890 | - const shortcuts = keyboardShortcuts.current; | |
| 2891 | - function callback(event) { | |
| 2892 | - if (import_keycodes3.isKeyboardEvent[type](event, character)) { | |
| 2893 | - stableOnUse(); | |
| 2894 | - event.preventDefault(); | |
| 2895 | - } | |
| 2896 | - } | |
| 2897 | - shortcuts.add(callback); | |
| 2898 | - return () => { | |
| 2899 | - shortcuts.delete(callback); | |
| 2900 | - }; | |
| 2901 | - }, [character, type, keyboardShortcuts, stableOnUse]); | |
| 2902 | - return null; | |
| 2903 | - } | |
| 2904 | - | |
| 2905 | - // packages/rich-text/build-module/input-event.mjs | |
| 2906 | - var import_element8 = __toESM(require_element(), 1); | |
| 2907 | - var import_compose10 = __toESM(require_compose(), 1); | |
| 2908 | - function RichTextInputEvent({ inputType, onInput }) { | |
| 2909 | - const callbacks = (0, import_element8.useContext)(InputEventContext); | |
| 2910 | - const stableOnInput = (0, import_compose10.useEvent)(onInput); | |
| 2911 | - (0, import_element8.useEffect)(() => { | |
| 2912 | - const inputCallbacks = callbacks.current; | |
| 2913 | - function callback(event) { | |
| 2914 | - if (event.inputType === inputType) { | |
| 2915 | - stableOnInput(); | |
| 2916 | - event.preventDefault(); | |
| 2917 | - } | |
| 2918 | - } | |
| 2919 | - inputCallbacks.add(callback); | |
| 2920 | - return () => { | |
| 2921 | - inputCallbacks.delete(callback); | |
| 2922 | - }; | |
| 2923 | - }, [inputType, callbacks, stableOnInput]); | |
| 2924 | - return null; | |
| 2925 | - } | |
| 2926 | - | |
| 2927 | - // packages/rich-text/build-module/event-listeners.mjs | |
| 2928 | - var shortcutsListener = (props) => (element) => { | |
| 2929 | - const { keyboardShortcuts } = props.current; | |
| 2930 | - function onKeyDown(event) { | |
| 2931 | - for (const keyboardShortcut of keyboardShortcuts.current) { | |
| 2932 | - keyboardShortcut(event); | |
| 2933 | - } | |
| 2934 | - } | |
| 2935 | - element.addEventListener("keydown", onKeyDown); | |
| 2936 | - return () => { | |
| 2937 | - element.removeEventListener("keydown", onKeyDown); | |
| 2938 | - }; | |
| 2939 | - }; | |
| 2940 | - var inputEventsListener = (props) => (element) => { | |
| 2941 | - const { inputEvents } = props.current; | |
| 2942 | - function onInput(event) { | |
| 2943 | - for (const inputEventHandler of inputEvents.current) { | |
| 2944 | - inputEventHandler(event); | |
| 2945 | - } | |
| 2946 | - } | |
| 2947 | - element.addEventListener("input", onInput); | |
| 2948 | - return () => { | |
| 2949 | - element.removeEventListener("input", onInput); | |
| 2950 | - }; | |
| 2951 | - }; | |
| 2952 | - | |
| 2953 | 2744 | // packages/rich-text/build-module/private-apis.mjs |
| 2954 | 2745 | var privateApis = {}; |
| 2955 | 2746 | lock(privateApis, { |
| 2956 | - useRichText, | |
| 2957 | - KeyboardShortcutContext, | |
| 2958 | - InputEventContext, | |
| 2959 | - RichTextShortcut, | |
| 2960 | - RichTextInputEvent, | |
| 2961 | - shortcutsListener, | |
| 2962 | - inputEventsListener, | |
| 2963 | - ownsSelection, | |
| 2964 | - subscribeOwnedListener | |
| 2747 | + useRichText | |
| 2965 | 2748 | }); |
| 2966 | 2749 | |
| 2967 | 2750 | // packages/rich-text/build-module/hook/use-anchor-ref.mjs |
| 2968 | - var import_element9 = __toESM(require_element(), 1); | |
| 2751 | + var import_element6 = __toESM(require_element(), 1); | |
| 2969 | 2752 | var import_deprecated2 = __toESM(require_deprecated(), 1); |
| 2970 | 2753 | function useAnchorRef({ ref, value, settings = {} }) { |
| 2971 | 2754 | (0, import_deprecated2.default)("`useAnchorRef` hook", { |
| 2972 | 2755 | since: "6.1", |
| @@ -2973,9 +2756,9 @@ | ||
| 2973 | 2756 | alternative: "`useAnchor` hook" |
| 2974 | 2757 | }); |
| 2975 | 2758 | const { tagName, className, name } = settings; |
| 2976 | 2759 | const activeFormat = name ? getActiveFormat(value, name) : void 0; |
| 2977 | - return (0, import_element9.useMemo)(() => { | |
| 2760 | + return (0, import_element6.useMemo)(() => { | |
| 2978 | 2761 | if (!ref.current) { |
| 2979 | 2762 | return; |
| 2980 | 2763 | } |
| 2981 | 2764 | const { |
| @@ -3000,10 +2783,10 @@ | ||
| 3000 | 2783 | }, [activeFormat, value.start, value.end, tagName, className]); |
| 3001 | 2784 | } |
| 3002 | 2785 | |
| 3003 | 2786 | // packages/rich-text/build-module/hook/use-anchor.mjs |
| 3004 | - var import_compose11 = __toESM(require_compose(), 1); | |
| 3005 | - var import_element10 = __toESM(require_element(), 1); | |
| 2787 | + var import_compose3 = __toESM(require_compose(), 1); | |
| 2788 | + var import_element7 = __toESM(require_element(), 1); | |
| 3006 | 2789 | var import_dom = __toESM(require_dom(), 1); |
| 3007 | 2790 | function getFormatElement(range, editableContentElement, tagName, className) { |
| 3008 | 2791 | let element = range.startContainer; |
| 3009 | 2792 | if (element.nodeType === element.TEXT_NODE && element instanceof window.Text && range.startOffset === element.length && element.nextSibling) { |
| @@ -3024,11 +2807,8 @@ | ||
| 3024 | 2807 | if (!editableContentElement.contains(element)) { |
| 3025 | 2808 | return; |
| 3026 | 2809 | } |
| 3027 | 2810 | const selector = tagName + (className ? "." + className : ""); |
| 3028 | - if (!selector) { | |
| 3029 | - return; | |
| 3030 | - } | |
| 3031 | 2811 | if (!(element instanceof window.HTMLElement)) { |
| 3032 | 2812 | return; |
| 3033 | 2813 | } |
| 3034 | 2814 | let closestElement = element; |
| @@ -3067,12 +2847,18 @@ | ||
| 3067 | 2847 | const range = selection.getRangeAt(0); |
| 3068 | 2848 | if (!range || !range.startContainer) { |
| 3069 | 2849 | return; |
| 3070 | 2850 | } |
| 3071 | - if (!tagName && !className) { | |
| 3072 | - return createVirtualAnchorElement(range, editableContentElement); | |
| 2851 | + const formatElement = getFormatElement( | |
| 2852 | + range, | |
| 2853 | + editableContentElement, | |
| 2854 | + tagName, | |
| 2855 | + className | |
| 2856 | + ); | |
| 2857 | + if (formatElement) { | |
| 2858 | + return formatElement; | |
| 3073 | 2859 | } |
| 3074 | - return getFormatElement(range, editableContentElement, tagName, className) ?? createVirtualAnchorElement(range, editableContentElement); | |
| 2860 | + return createVirtualAnchorElement(range, editableContentElement); | |
| 3075 | 2861 | } |
| 3076 | 2862 | var DEFAULT_SETTINGS = { |
| 3077 | 2863 | tagName: "", |
| 3078 | 2864 | className: "" |
| @@ -3082,13 +2868,13 @@ | ||
| 3082 | 2868 | settings |
| 3083 | 2869 | }) { |
| 3084 | 2870 | const { tagName, className } = settings ?? DEFAULT_SETTINGS; |
| 3085 | 2871 | const isActive = !!(settings && "isActive" in settings && settings.isActive); |
| 3086 | - const [anchor, setAnchor] = (0, import_element10.useState)( | |
| 2872 | + const [anchor, setAnchor] = (0, import_element7.useState)( | |
| 3087 | 2873 | () => getAnchor(editableContentElement, tagName, className ?? "") |
| 3088 | 2874 | ); |
| 3089 | - const wasActive = (0, import_compose11.usePrevious)(isActive); | |
| 3090 | - (0, import_element10.useLayoutEffect)(() => { | |
| 2875 | + const wasActive = (0, import_compose3.usePrevious)(isActive); | |
| 2876 | + (0, import_element7.useLayoutEffect)(() => { | |
| 3091 | 2877 | if (!editableContentElement) { |
| 3092 | 2878 | return; |
| 3093 | 2879 | } |
| 3094 | 2880 | function callback() { |
| @@ -3102,9 +2888,9 @@ | ||
| 3102 | 2888 | function detach() { |
| 3103 | 2889 | ownerDocument.removeEventListener("selectionchange", callback); |
| 3104 | 2890 | } |
| 3105 | 2891 | const { ownerDocument } = editableContentElement; |
| 3106 | - if (ownsSelection(editableContentElement) || // When a link is created, we need to attach the popover to the newly created anchor. | |
| 2892 | + if (editableContentElement === ownerDocument.activeElement || // When a link is created, we need to attach the popover to the newly created anchor. | |
| 3107 | 2893 | !wasActive && isActive || // Sometimes we're _removing_ an active anchor, such as the inline color popover. |
| 3108 | 2894 | // When we add the color, it switches from a virtual anchor to a `<mark>` element. |
| 3109 | 2895 | // When we _remove_ the color, it switches from a `<mark>` element to a virtual anchor. |
| 3110 | 2896 | wasActive && !isActive) { |
