@atlaskit/editor-plugin-quick-insert 16.2.6 → 16.2.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +21 -0
- package/dist/cjs/ui/BlockControlQuickInsertButton.compiled.css +1 -0
- package/dist/cjs/ui/BlockControlQuickInsertButton.js +5 -2
- package/dist/cjs/ui/RegistryElementBrowser/NotFoundIllustration.js +76 -0
- package/dist/cjs/ui/RegistryElementBrowser/RegistryElementBrowser.compiled.css +7 -2
- package/dist/cjs/ui/RegistryElementBrowser/RegistryElementBrowser.js +61 -9
- package/dist/cjs/ui/RegistryElementBrowser/RegistryElementBrowserCategories.compiled.css +3 -1
- package/dist/cjs/ui/RegistryElementBrowser/RegistryElementBrowserCategories.js +12 -9
- package/dist/cjs/ui/RegistryElementBrowser/RegistryElementBrowserFooter.js +28 -10
- package/dist/cjs/ui/RegistryElementBrowser/RegistryElementBrowserSearchResults.compiled.css +20 -2
- package/dist/cjs/ui/RegistryElementBrowser/RegistryElementBrowserSearchResults.js +23 -31
- package/dist/cjs/ui/RegistryElementBrowser/model.js +9 -2
- package/dist/cjs/ui/block-control-quick-insert.js +2 -0
- package/dist/es2019/ui/BlockControlQuickInsertButton.compiled.css +1 -0
- package/dist/es2019/ui/BlockControlQuickInsertButton.js +4 -2
- package/dist/es2019/ui/RegistryElementBrowser/NotFoundIllustration.js +69 -0
- package/dist/es2019/ui/RegistryElementBrowser/RegistryElementBrowser.compiled.css +7 -2
- package/dist/es2019/ui/RegistryElementBrowser/RegistryElementBrowser.js +61 -9
- package/dist/es2019/ui/RegistryElementBrowser/RegistryElementBrowserCategories.compiled.css +3 -1
- package/dist/es2019/ui/RegistryElementBrowser/RegistryElementBrowserCategories.js +11 -8
- package/dist/es2019/ui/RegistryElementBrowser/RegistryElementBrowserFooter.js +28 -10
- package/dist/es2019/ui/RegistryElementBrowser/RegistryElementBrowserSearchResults.compiled.css +20 -2
- package/dist/es2019/ui/RegistryElementBrowser/RegistryElementBrowserSearchResults.js +24 -32
- package/dist/es2019/ui/RegistryElementBrowser/model.js +10 -2
- package/dist/es2019/ui/block-control-quick-insert.js +2 -0
- package/dist/esm/ui/BlockControlQuickInsertButton.compiled.css +1 -0
- package/dist/esm/ui/BlockControlQuickInsertButton.js +5 -2
- package/dist/esm/ui/RegistryElementBrowser/NotFoundIllustration.js +69 -0
- package/dist/esm/ui/RegistryElementBrowser/RegistryElementBrowser.compiled.css +7 -2
- package/dist/esm/ui/RegistryElementBrowser/RegistryElementBrowser.js +61 -9
- package/dist/esm/ui/RegistryElementBrowser/RegistryElementBrowserCategories.compiled.css +3 -1
- package/dist/esm/ui/RegistryElementBrowser/RegistryElementBrowserCategories.js +12 -9
- package/dist/esm/ui/RegistryElementBrowser/RegistryElementBrowserFooter.js +28 -10
- package/dist/esm/ui/RegistryElementBrowser/RegistryElementBrowserSearchResults.compiled.css +20 -2
- package/dist/esm/ui/RegistryElementBrowser/RegistryElementBrowserSearchResults.js +24 -32
- package/dist/esm/ui/RegistryElementBrowser/model.js +9 -2
- package/dist/esm/ui/block-control-quick-insert.js +2 -0
- package/dist/types/ui/BlockControlQuickInsertButton.d.ts +2 -1
- package/dist/types/ui/RegistryElementBrowser/NotFoundIllustration.d.ts +1 -0
- package/dist/types/ui/RegistryElementBrowser/RegistryElementBrowserCategories.d.ts +1 -2
- package/dist/types/ui/RegistryElementBrowser/RegistryElementBrowserFooter.d.ts +2 -1
- package/dist/types/ui/RegistryElementBrowser/RegistryElementBrowserSearchResults.d.ts +1 -2
- package/dist/types/ui/RegistryElementBrowser/model.d.ts +1 -0
- package/package.json +3 -3
|
@@ -16,7 +16,8 @@ const TEXT_PARENT_TYPES = ['paragraph', 'heading', 'blockquote', 'taskItem', 'de
|
|
|
16
16
|
// @atlaskit/css intentionally restricts height and width values, so Compiled owns only the
|
|
17
17
|
// dimensions that scale at runtime with the editor's dense-mode font-size custom property.
|
|
18
18
|
const quickInsertButtonContainerStyles = {
|
|
19
|
-
root: "_1e0c1txw _4t3i9xsi _1bsb9xsi"
|
|
19
|
+
root: "_1e0c1txw _4t3i9xsi _1bsb9xsi",
|
|
20
|
+
reservedDragHandleSpace: "_12l21xcw"
|
|
20
21
|
};
|
|
21
22
|
const quickInsertButtonStyles = {
|
|
22
23
|
root: "_19itglyw _2rko1rr0 _v564k6bl _1rjcze3t _18zrze3t _4cvr1h6o _bfhksm61 _vchhusvi _syazazsu _80omtlke _1e0c1txw _4t3i1osq _1bah1h6o _1bsb1osq _mizu1v1w _1ah3v77o _ra3xnqa1 _128mdkaa _irr31dpa _1ggl5xtf _1di6fcek"
|
|
@@ -121,6 +122,7 @@ const openQuickInsert = (api, view, start, openTypeAhead) => {
|
|
|
121
122
|
export const BlockControlQuickInsertButton = ({
|
|
122
123
|
api,
|
|
123
124
|
openTypeAhead,
|
|
125
|
+
reserveDragHandleSpace = false,
|
|
124
126
|
start,
|
|
125
127
|
view
|
|
126
128
|
}) => {
|
|
@@ -143,7 +145,7 @@ export const BlockControlQuickInsertButton = ({
|
|
|
143
145
|
description: label
|
|
144
146
|
})
|
|
145
147
|
}, /*#__PURE__*/React.createElement("span", {
|
|
146
|
-
className: ax([quickInsertButtonContainerStyles.root])
|
|
148
|
+
className: ax([quickInsertButtonContainerStyles.root, reserveDragHandleSpace && quickInsertButtonContainerStyles.reservedDragHandleSpace])
|
|
147
149
|
}, /*#__PURE__*/React.createElement(Pressable, {
|
|
148
150
|
"aria-label": label,
|
|
149
151
|
onClick: handleClick,
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
6
|
+
import { css, jsx } from '@emotion/react';
|
|
7
|
+
const imageContainer = css({
|
|
8
|
+
width: '120px',
|
|
9
|
+
height: '111px',
|
|
10
|
+
marginTop: "var(--ds-space-600, 48px)"
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
|
|
14
|
+
export default function NotFoundIllustration() {
|
|
15
|
+
return jsx("div", {
|
|
16
|
+
css: imageContainer
|
|
17
|
+
}, jsx("svg", {
|
|
18
|
+
width: "120",
|
|
19
|
+
height: "111",
|
|
20
|
+
fill: "none",
|
|
21
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
22
|
+
}, jsx("g", {
|
|
23
|
+
clipPath: "url(#clip0)"
|
|
24
|
+
}, jsx("path", {
|
|
25
|
+
fill: "#fff",
|
|
26
|
+
fillOpacity: ".01",
|
|
27
|
+
d: "M0 0h120v110.365H0z"
|
|
28
|
+
}), jsx("path", {
|
|
29
|
+
opacity: ".3",
|
|
30
|
+
d: "M60.985 110.336c-.539.017-1.078.029-1.616.035a1.359 1.359 0 01-1.367-1.36 1.361 1.361 0 011.314-1.372h.041a50.876 50.876 0 0010.276-1.105 1.367 1.367 0 01.568 2.674 54.422 54.422 0 01-9.216 1.128zM52 109.877c-.075 0-.156 0-.237-.012a52.688 52.688 0 01-10.583-2.61 1.368 1.368 0 01.92-2.575c3.245 1.169 6.616 2 10.034 2.471.747.104 1.268.79 1.164 1.54A1.36 1.36 0 0152 109.877zM77.088 107.162a1.364 1.364 0 01-1.326-.895 1.366 1.366 0 01.805-1.755 50.423 50.423 0 009.274-4.575 1.358 1.358 0 011.877.43c.4.64.208 1.482-.429 1.884a53.25 53.25 0 01-9.772 4.824 1.26 1.26 0 01-.429.087zM34.9 104.32a1.359 1.359 0 01-.683-.157 53.29 53.29 0 01-9.042-6.092 1.369 1.369 0 01-.18-1.924 1.357 1.357 0 011.918-.18 50.483 50.483 0 008.578 5.778c.667.354.916 1.18.562 1.848a1.337 1.337 0 01-1.152.727zM20.732 93.23a1.372 1.372 0 01-1.06-.448 53.223 53.223 0 01-6.436-8.818 1.37 1.37 0 01.487-1.872 1.36 1.36 0 011.865.489 50.724 50.724 0 006.105 8.364 1.366 1.366 0 01-.098 1.93c-.25.226-.556.343-.863.354zM104.093 84.196a1.367 1.367 0 01-1.228-2.046 50.41 50.41 0 004.183-9.48 1.358 1.358 0 011.714-.878 1.365 1.365 0 01.875 1.72 53.17 53.17 0 01-4.414 9.993 1.34 1.34 0 01-1.13.691zM11.18 77.965a1.365 1.365 0 01-1.31-.854 52.827 52.827 0 01-3.029-10.498 1.362 1.362 0 112.682-.483 50.732 50.732 0 002.873 9.958 1.363 1.363 0 01-1.216 1.877zM110.17 67.218a1.362 1.362 0 01-1.39-1.593c.579-3.395.805-6.876.683-10.347l-.006-.116a1.36 1.36 0 011.315-1.412 1.359 1.359 0 011.408 1.32l.006.115a54.054 54.054 0 01-.724 10.905 1.36 1.36 0 01-1.292 1.128zM7.426 60.3c-.753.03-1.384-.534-1.407-1.29v-.058a53.82 53.82 0 01.712-10.846 1.368 1.368 0 011.57-1.122c.741.128 1.24.83 1.118 1.575a51.307 51.307 0 00-.678 10.288c.029.762-.562 1.425-1.315 1.453zM110.06 49.076a1.363 1.363 0 01-1.385-1.122 50.567 50.567 0 00-2.884-9.95c-.284-.698.052-1.5.747-1.785a1.365 1.365 0 011.778.75 53.085 53.085 0 013.041 10.497 1.37 1.37 0 01-1.094 1.593l-.203.017zM9.888 42.462a1.452 1.452 0 01-.47-.065 1.365 1.365 0 01-.874-1.72 53.157 53.157 0 014.402-9.998 1.362 1.362 0 011.86-.511c.655.372.88 1.209.51 1.866a50.68 50.68 0 00-4.177 9.486 1.37 1.37 0 01-1.251.941zM103.815 32.179a1.355 1.355 0 01-1.222-.674 50.958 50.958 0 00-6.117-8.359 1.366 1.366 0 01.099-1.93 1.355 1.355 0 011.923.099 53.449 53.449 0 016.447 8.806 1.37 1.37 0 01-.487 1.872 1.432 1.432 0 01-.643.186zM18.31 26.529a1.372 1.372 0 01-1.124-2.209 53.551 53.551 0 017.537-7.888 1.363 1.363 0 011.923.157 1.375 1.375 0 01-.156 1.93 51.072 51.072 0 00-7.154 7.487 1.343 1.343 0 01-1.025.523zM92.172 18.444a1.352 1.352 0 01-.915-.314 50.861 50.861 0 00-8.59-5.772 1.368 1.368 0 01-.568-1.849 1.364 1.364 0 011.842-.57 53.153 53.153 0 019.048 6.08c.58.483.66 1.343.18 1.925a1.366 1.366 0 01-.997.5zM31.64 14.433a1.368 1.368 0 01-.776-2.523 53.107 53.107 0 019.771-4.836 1.359 1.359 0 011.75.808c.26.71-.099 1.494-.805 1.755a50.203 50.203 0 00-9.269 4.587c-.208.133-.44.203-.672.209zM76.555 9.51a1.257 1.257 0 01-.504-.082A50.06 50.06 0 0066.013 6.97a1.364 1.364 0 01-1.165-1.54 1.364 1.364 0 011.535-1.168 52.623 52.623 0 0110.584 2.592 1.369 1.369 0 01-.412 2.657zM48.287 7.65a1.367 1.367 0 01-.33-2.703 54.261 54.261 0 0110.827-1.18 1.367 1.367 0 011.372 1.36 1.367 1.367 0 01-1.314 1.377H58.8A50.85 50.85 0 0048.525 7.62c-.081.018-.162.024-.238.03z",
|
|
31
|
+
fill: "#B3BAC5"
|
|
32
|
+
}), jsx("path", {
|
|
33
|
+
opacity: ".3",
|
|
34
|
+
d: "M110.523 19.873a.304.304 0 01-.226-.325l.035-.262c.029-.168.064-.348.11-.534a4.423 4.423 0 01.95-1.796c.458-.53 1.118-.971 1.97-1.314l1.436-.587c.858-.343 1.385-.913 1.593-1.697a2.48 2.48 0 00.07-.878 1.998 1.998 0 00-.273-.849c-.156-.261-.37-.5-.654-.709a3.07 3.07 0 00-1.049-.477c-.451-.116-.851-.133-1.21-.052a2.56 2.56 0 00-.956.43c-.278.204-.51.465-.695.78-.191.313-.33.65-.423.999-.029.104-.052.21-.07.302a.459.459 0 01-.59.355l-2.219-.68a.464.464 0 01-.33-.483c.006-.07.017-.14.029-.21.035-.197.075-.383.121-.569.174-.668.47-1.29.887-1.866a5.14 5.14 0 011.546-1.412c.614-.366 1.31-.605 2.097-.72.788-.117 1.645-.047 2.578.197.967.256 1.778.622 2.433 1.098.66.477 1.176 1.012 1.552 1.599.377.593.614 1.22.707 1.889.093.668.058 1.32-.11 1.953-.261 1-.712 1.796-1.344 2.389a6.773 6.773 0 01-2.288 1.39l-1.211.458c-.341.11-.851.338-1.274.803-.041.046-.214.238-.388.534-.128.221-.22.436-.284.622a.303.303 0 01-.365.192l-2.155-.57zm-1.772 3.412c.145-.552.457-.97.944-1.26a1.942 1.942 0 011.552-.222c.551.146.968.465 1.257.96.29.493.359 1.017.215 1.569a1.966 1.966 0 01-.956 1.25 2.005 2.005 0 01-1.558.203 1.957 1.957 0 01-1.246-.942 1.98 1.98 0 01-.208-1.558zM10.722 12.393a.301.301 0 01-.203-.338l.053-.261c.04-.169.086-.343.15-.523a4.334 4.334 0 011.072-1.727c.492-.5 1.176-.889 2.056-1.18l1.472-.488c.874-.285 1.442-.814 1.703-1.587.092-.279.139-.57.127-.872a2.052 2.052 0 00-.214-.866 2.285 2.285 0 00-.609-.75c-.266-.226-.608-.406-1.013-.546-.44-.151-.846-.192-1.205-.134a2.518 2.518 0 00-1.726 1.099 3.583 3.583 0 00-.585 1.267.461.461 0 01-.615.314L9.02 4.976a.467.467 0 01-.295-.506c.011-.07.029-.14.046-.21a5.65 5.65 0 01.162-.557A5.505 5.505 0 019.946 1.9 5.246 5.246 0 0111.579.593a5.545 5.545 0 012.138-.576c.793-.058 1.645.064 2.554.372.945.32 1.732.739 2.358 1.262.626.523 1.106 1.087 1.442 1.703.336.616.533 1.255.58 1.93a4.97 4.97 0 01-.244 1.941c-.33.982-.828 1.744-1.506 2.29a6.844 6.844 0 01-2.375 1.233l-1.24.372a2.94 2.94 0 00-1.326.715c-.046.046-.232.226-.423.505-.145.215-.249.419-.324.599a.3.3 0 01-.377.168l-2.114-.714zm-1.998 3.284a2 2 0 011.025-1.198 1.957 1.957 0 011.564-.116c.539.18.933.529 1.188 1.04.254.512.29 1.041.11 1.582-.18.54-.528.935-1.037 1.18a2.019 2.019 0 01-1.57.098 1.96 1.96 0 01-1.182-1.029 1.99 1.99 0 01-.098-1.557zM7.177 104.849a.298.298 0 01-.37-.134c-.041-.076-.082-.157-.122-.238a8.207 8.207 0 01-.215-.5 4.405 4.405 0 01-.249-2.017c.076-.698.36-1.436.863-2.215l.84-1.308c.504-.773.614-1.546.33-2.307a2.6 2.6 0 00-.446-.762 2.019 2.019 0 00-.706-.54 2.421 2.421 0 00-.944-.204 3.05 3.05 0 00-1.13.215c-.434.163-.776.378-1.025.657-.25.273-.423.576-.533.901-.11.326-.15.674-.128 1.04.024.367.099.721.226 1.064.04.105.076.198.116.285a.466.466 0 01-.278.634l-2.201.72a.455.455 0 01-.545-.209c-.034-.064-.063-.128-.098-.192a5.595 5.595 0 01-.568-2.575 5.09 5.09 0 01.458-2.046c.29-.65.724-1.25 1.303-1.796.58-.546 1.32-.988 2.225-1.32.938-.348 1.807-.517 2.618-.505.81.012 1.54.151 2.19.413a4.62 4.62 0 011.656 1.139c.458.494.8 1.046 1.025 1.662.36.971.446 1.884.267 2.732-.18.85-.539 1.669-1.078 2.46l-.73 1.075c-.214.29-.503.767-.585 1.389-.005.064-.04.319-.011.657.023.255.07.482.127.668a.309.309 0 01-.19.372l-2.092.785zm.504 3.813a2.026 2.026 0 01.052-1.581 1.958 1.958 0 011.147-1.076 1.986 1.986 0 011.576.064c.521.239.88.628 1.077 1.163a1.947 1.947 0 01-.07 1.569 2.028 2.028 0 01-1.158 1.064 1.977 1.977 0 01-1.564-.052 1.96 1.96 0 01-1.06-1.151z",
|
|
35
|
+
fill: "#C1C7D0"
|
|
36
|
+
}), jsx("path", {
|
|
37
|
+
d: "M86.519 77.651l-4.142-4.028-5.578 5.784 4.141 4.028a7.812 7.812 0 012.15 3.772 7.858 7.858 0 002.148 3.773l16.816 16.333a6.405 6.405 0 009.077-.145 6.46 6.46 0 00-.144-9.108L94.171 81.726a7.786 7.786 0 00-3.83-2.034 7.9 7.9 0 01-3.822-2.04z",
|
|
38
|
+
fill: "#CFD4DB"
|
|
39
|
+
}), jsx("path", {
|
|
40
|
+
d: "M90.18 79.64a7.756 7.756 0 01-3.656-1.995l-1.262-1.226a4 4 0 00-5.671.093 4.032 4.032 0 00.092 5.69l1.263 1.227a7.853 7.853 0 012.103 3.598 33.606 33.606 0 003.858-3.435 33.629 33.629 0 003.273-3.953z",
|
|
41
|
+
fill: "#B3BAC5"
|
|
42
|
+
}), jsx("path", {
|
|
43
|
+
d: "M59.056 90.677c-8.961.146-17.442-3.22-23.877-9.474-13.295-12.91-13.636-34.266-.77-47.606C40.64 27.14 49.01 23.501 57.966 23.35c8.961-.145 17.441 3.22 23.877 9.475 6.441 6.255 10.062 14.654 10.212 23.64.145 8.992-3.209 17.502-9.442 23.96-6.227 6.47-14.597 10.108-23.558 10.253zM58.1 31.388c-6.824.11-13.19 2.883-17.94 7.801-9.795 10.155-9.534 26.413.585 36.242 4.9 4.76 11.36 7.324 18.183 7.213 6.824-.11 13.19-2.883 17.94-7.8 4.744-4.918 7.299-11.399 7.189-18.246-.11-6.847-2.873-13.236-7.774-18.002-4.906-4.755-11.36-7.318-18.183-7.208z",
|
|
44
|
+
fill: "url(#paint0_linear)"
|
|
45
|
+
}), jsx("path", {
|
|
46
|
+
d: "M68.886 49.535l-3.093-3.051a1.158 1.158 0 00-1.64.017l-5.67 5.796-5.776-5.691a1.158 1.158 0 00-1.64.017l-3.04 3.104c-.446.46-.44 1.192.017 1.645l5.775 5.69-5.67 5.796c-.447.46-.44 1.192.017 1.645l3.093 3.052a1.158 1.158 0 001.64-.018l5.67-5.795 5.775 5.69a1.158 1.158 0 001.64-.017l3.04-3.104c.447-.459.441-1.191-.017-1.645l-5.775-5.69 5.671-5.795c.446-.46.44-1.198-.017-1.645z",
|
|
47
|
+
fill: "#C1C7D0"
|
|
48
|
+
})), jsx("defs", null, jsx("linearGradient", {
|
|
49
|
+
id: "paint0_linear",
|
|
50
|
+
x1: "34.792",
|
|
51
|
+
y1: "80.822",
|
|
52
|
+
x2: "82.401",
|
|
53
|
+
y2: "33.377",
|
|
54
|
+
gradientUnits: "userSpaceOnUse"
|
|
55
|
+
}, jsx("stop", {
|
|
56
|
+
offset: ".557",
|
|
57
|
+
stopColor: "#C1C7D0"
|
|
58
|
+
}), jsx("stop", {
|
|
59
|
+
offset: ".966",
|
|
60
|
+
stopColor: "#E9EBEF",
|
|
61
|
+
stopOpacity: ".5"
|
|
62
|
+
})), jsx("clipPath", {
|
|
63
|
+
id: "clip0"
|
|
64
|
+
}, jsx("path", {
|
|
65
|
+
fill: "#fff",
|
|
66
|
+
d: "M0 0h120v110.365H0z"
|
|
67
|
+
})))));
|
|
68
|
+
}
|
|
69
|
+
/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
|
|
@@ -1,2 +1,7 @@
|
|
|
1
|
-
._zulp1ejb{gap:var(--ds-space-300,24px)}
|
|
2
|
-
.
|
|
1
|
+
._zulp1ejb{gap:var(--ds-space-300,24px)}
|
|
2
|
+
._zulp1fka{gap:calc(var(--ds-space-200, 1pc) + var(--ds-space-150, 9pt))}._1bsb1osq{width:100%}
|
|
3
|
+
._1e0c11p5{display:grid}
|
|
4
|
+
._4cvr1h6o{align-items:center}
|
|
5
|
+
._yv0e1xuv{grid-template-columns:182px minmax(0,1fr)}
|
|
6
|
+
._yv0ehpfy{grid-template-columns:minmax(0,1fr) auto}
|
|
7
|
+
@media (max-width:599px){._lk4ji47z{grid-template-columns:minmax(0,1fr)}}
|
|
@@ -3,21 +3,29 @@ import "./RegistryElementBrowser.compiled.css";
|
|
|
3
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
4
4
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
5
5
|
import { useIntl } from 'react-intl';
|
|
6
|
+
import IconButton from '@atlaskit/button/icon/button';
|
|
6
7
|
import Heading from '@atlaskit/heading/heading';
|
|
7
8
|
import { MENU, RECOMMENDED_SECTION } from '@atlaskit/editor-common/quick-insert/keys';
|
|
8
9
|
import { getMenuFooterSectionKey } from '@atlaskit/editor-common/type-ahead-get-menu-footer-section-key';
|
|
9
10
|
import { getSectionOverflowItemKey } from '@atlaskit/editor-common/type-ahead-get-section-overflow-item-key';
|
|
11
|
+
import CrossIcon from '@atlaskit/icon/core/cross';
|
|
10
12
|
import Modal from '@atlaskit/modal-dialog/modal-dialog';
|
|
11
13
|
import ModalBody from '@atlaskit/modal-dialog/modal-body';
|
|
12
14
|
import ModalFooter from '@atlaskit/modal-dialog/modal-footer';
|
|
13
15
|
import ModalHeader from '@atlaskit/modal-dialog/modal-header';
|
|
14
16
|
import ModalTransition from '@atlaskit/modal-dialog/modal-transition';
|
|
17
|
+
import Textfield from '@atlaskit/textfield/text-field';
|
|
15
18
|
import { createRegistryElementBrowserModel, getInitialRegistryElementBrowserSection, getRegistryElementBrowserItems } from './model';
|
|
16
19
|
import { RegistryElementBrowserCategories } from './RegistryElementBrowserCategories';
|
|
17
20
|
import { RegistryElementBrowserFooter } from './RegistryElementBrowserFooter';
|
|
18
21
|
import { RegistryElementBrowserSearchResults } from './RegistryElementBrowserSearchResults';
|
|
22
|
+
const browserGridTemplateColumns = '182px minmax(0, 1fr)';
|
|
23
|
+
const categoryColumnGap = `calc(${"var(--ds-space-200, 16px)"} + ${"var(--ds-space-150, 12px)"})`;
|
|
19
24
|
const browserLayoutStyles = null;
|
|
25
|
+
const headerContentStyles = null;
|
|
26
|
+
const headerSearchStyles = null;
|
|
20
27
|
const resultsId = 'registry-element-browser-results';
|
|
28
|
+
const modalTestId = 'registry-element-browser-modal';
|
|
21
29
|
export const RegistryElementBrowser = ({
|
|
22
30
|
components,
|
|
23
31
|
emptyStateHandler,
|
|
@@ -44,6 +52,7 @@ export const RegistryElementBrowser = ({
|
|
|
44
52
|
const [query, setQuery] = useState('');
|
|
45
53
|
const [section, setSection] = useState(() => getInitialRegistryElementBrowserSection(model, defaultSection));
|
|
46
54
|
const [selectedKey, setSelectedKey] = useState();
|
|
55
|
+
const searchInputRef = useRef(null);
|
|
47
56
|
const wasOpen = useRef(false);
|
|
48
57
|
const previousIsOffline = useRef(isOffline);
|
|
49
58
|
useEffect(() => {
|
|
@@ -61,7 +70,7 @@ export const RegistryElementBrowser = ({
|
|
|
61
70
|
formatMessage,
|
|
62
71
|
model,
|
|
63
72
|
query,
|
|
64
|
-
section
|
|
73
|
+
section
|
|
65
74
|
}), [formatMessage, model, query, section]);
|
|
66
75
|
useEffect(() => {
|
|
67
76
|
if (previousIsOffline.current !== isOffline) {
|
|
@@ -72,7 +81,6 @@ export const RegistryElementBrowser = ({
|
|
|
72
81
|
}, [isOffline, onClearSelection]);
|
|
73
82
|
const onSearchChange = useCallback(event => {
|
|
74
83
|
setQuery(event.currentTarget.value);
|
|
75
|
-
setSection(undefined);
|
|
76
84
|
setSelectedKey(undefined);
|
|
77
85
|
onClearSelection();
|
|
78
86
|
}, [onClearSelection]);
|
|
@@ -82,10 +90,26 @@ export const RegistryElementBrowser = ({
|
|
|
82
90
|
setSelectedKey(undefined);
|
|
83
91
|
onClearSelection();
|
|
84
92
|
}, [onClearSelection]);
|
|
93
|
+
const onClearSearch = useCallback(() => {
|
|
94
|
+
var _searchInputRef$curre;
|
|
95
|
+
setQuery('');
|
|
96
|
+
setSelectedKey(undefined);
|
|
97
|
+
onClearSelection();
|
|
98
|
+
(_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.focus();
|
|
99
|
+
}, [onClearSelection]);
|
|
85
100
|
const onRegistrySelect = useCallback((key, handler) => {
|
|
86
101
|
setSelectedKey(key);
|
|
87
102
|
onSelect(handler);
|
|
88
103
|
}, [onSelect]);
|
|
104
|
+
const onModalOpenComplete = useCallback(node => {
|
|
105
|
+
node.style.borderRadius = "var(--ds-radius-large, 8px)";
|
|
106
|
+
const footer = node.querySelector(`[data-testid="${modalTestId}--footer"]`);
|
|
107
|
+
footer === null || footer === void 0 ? void 0 : footer.style.setProperty('box-sizing', 'border-box');
|
|
108
|
+
footer === null || footer === void 0 ? void 0 : footer.style.setProperty('height', '64px');
|
|
109
|
+
footer === null || footer === void 0 ? void 0 : footer.style.setProperty('padding-block', "var(--ds-space-200, 16px)");
|
|
110
|
+
const scrollableBody = node.querySelector(`[data-testid="${modalTestId}--scrollable"]`);
|
|
111
|
+
scrollableBody === null || scrollableBody === void 0 ? void 0 : scrollableBody.style.setProperty('border-block-end', 'none');
|
|
112
|
+
}, []);
|
|
89
113
|
const onKeyDown = useCallback(event => {
|
|
90
114
|
if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
|
|
91
115
|
var _resultCollection$que;
|
|
@@ -115,18 +139,46 @@ export const RegistryElementBrowser = ({
|
|
|
115
139
|
defaultMessage: 'Insert elements',
|
|
116
140
|
id: 'editor.quick-insert.title'
|
|
117
141
|
}),
|
|
142
|
+
height: "664px",
|
|
118
143
|
onClose: onClose,
|
|
119
144
|
onCloseComplete: onCloseComplete,
|
|
120
|
-
|
|
121
|
-
|
|
145
|
+
onOpenComplete: onModalOpenComplete,
|
|
146
|
+
testId: modalTestId,
|
|
147
|
+
width: "min(968px, calc(100vw - 32px))"
|
|
148
|
+
}, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement("div", {
|
|
149
|
+
className: ax(["_zulp1fka _1e0c11p5 _yv0e1xuv _1bsb1osq _lk4ji47z"])
|
|
150
|
+
}, /*#__PURE__*/React.createElement(Heading, {
|
|
122
151
|
size: "medium"
|
|
123
152
|
}, formatMessage({
|
|
124
153
|
defaultMessage: 'Insert elements',
|
|
125
154
|
id: 'editor.quick-insert.title'
|
|
126
|
-
}))
|
|
127
|
-
className: ax(["_zulp1ejb _1e0c11p5
|
|
155
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
156
|
+
className: ax(["_zulp1ejb _4cvr1h6o _1e0c11p5 _yv0ehpfy _1bsb1osq"])
|
|
157
|
+
}, /*#__PURE__*/React.createElement(Textfield, {
|
|
158
|
+
autoFocus: true,
|
|
159
|
+
"aria-controls": resultsId,
|
|
160
|
+
"aria-label": formatMessage({
|
|
161
|
+
defaultMessage: 'Search elements',
|
|
162
|
+
id: 'editor.quick-insert.search'
|
|
163
|
+
}),
|
|
164
|
+
isCompact: true,
|
|
165
|
+
name: "registry-element-browser-search",
|
|
166
|
+
onChange: onSearchChange,
|
|
167
|
+
onKeyDown: onKeyDown,
|
|
168
|
+
ref: searchInputRef,
|
|
169
|
+
value: query
|
|
170
|
+
}), /*#__PURE__*/React.createElement(IconButton, {
|
|
171
|
+
appearance: "subtle",
|
|
172
|
+
icon: CrossIcon,
|
|
173
|
+
label: formatMessage({
|
|
174
|
+
defaultMessage: 'Clear search',
|
|
175
|
+
id: 'editor.quick-insert.clear-search'
|
|
176
|
+
}),
|
|
177
|
+
onClick: onClearSearch,
|
|
178
|
+
spacing: "compact"
|
|
179
|
+
})))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", {
|
|
180
|
+
className: ax(["_zulp1fka _1e0c11p5 _yv0e1xuv _lk4ji47z"])
|
|
128
181
|
}, /*#__PURE__*/React.createElement(RegistryElementBrowserCategories, {
|
|
129
|
-
query: query,
|
|
130
182
|
section: section,
|
|
131
183
|
sections: model.sections,
|
|
132
184
|
onSectionClick: onSectionClick
|
|
@@ -140,12 +192,12 @@ export const RegistryElementBrowser = ({
|
|
|
140
192
|
section: section,
|
|
141
193
|
selectedKey: selectedKey,
|
|
142
194
|
onKeyDown: onKeyDown,
|
|
143
|
-
onSearchChange: onSearchChange,
|
|
144
195
|
onSelect: onRegistrySelect
|
|
145
196
|
}))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(RegistryElementBrowserFooter, {
|
|
146
197
|
helpUrl: helpUrl,
|
|
147
198
|
isInsertEnabled: Boolean(selectedKey),
|
|
148
199
|
onClose: onClose,
|
|
149
|
-
onConfirmInsert: onConfirmInsert
|
|
200
|
+
onConfirmInsert: onConfirmInsert,
|
|
201
|
+
resultCount: items.length
|
|
150
202
|
}))));
|
|
151
203
|
};
|
|
@@ -1,2 +1,4 @@
|
|
|
1
1
|
._zulpu2gc{gap:var(--ds-space-100,8px)}._1e0c11p5{display:grid}
|
|
2
|
-
.
|
|
2
|
+
._ae4vv2br{align-content:start}
|
|
3
|
+
._yv0ei47z{grid-template-columns:minmax(0,1fr)}
|
|
4
|
+
@media (max-width:599px){._1w2e1ris{grid-auto-columns:max-content}._1ato1bp4{grid-auto-flow:column}._lk4jglyw{grid-template-columns:none}._1cgyi47z{grid-template-rows:minmax(0,1fr)}._1s8e1wug{overflow-x:auto}._pevy15vq{overflow-y:hidden}}
|
|
@@ -18,7 +18,6 @@ const sectionMessages = {
|
|
|
18
18
|
};
|
|
19
19
|
const categoryGridStyles = null;
|
|
20
20
|
export const RegistryElementBrowserCategories = ({
|
|
21
|
-
query,
|
|
22
21
|
section,
|
|
23
22
|
sections,
|
|
24
23
|
onSectionClick
|
|
@@ -26,30 +25,34 @@ export const RegistryElementBrowserCategories = ({
|
|
|
26
25
|
const {
|
|
27
26
|
formatMessage
|
|
28
27
|
} = useIntl();
|
|
29
|
-
const isAllSelected = section === undefined
|
|
28
|
+
const isAllSelected = section === undefined;
|
|
30
29
|
return /*#__PURE__*/React.createElement("div", {
|
|
31
30
|
"aria-label": formatMessage({
|
|
32
31
|
defaultMessage: 'Element categories',
|
|
33
32
|
id: 'editor.quick-insert.categories-label'
|
|
34
33
|
}),
|
|
35
34
|
"data-testid": "registry-element-browser-categories",
|
|
36
|
-
className: ax(["_zulpu2gc _1e0c11p5
|
|
35
|
+
className: ax(["_zulpu2gc _ae4vv2br _1e0c11p5 _yv0ei47z _1w2e1ris _1ato1bp4 _lk4jglyw _1cgyi47z _1s8e1wug _pevy15vq"])
|
|
37
36
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
38
|
-
appearance:
|
|
37
|
+
appearance: 'subtle',
|
|
39
38
|
"aria-pressed": isAllSelected,
|
|
40
39
|
"data-section": "",
|
|
41
|
-
onClick: onSectionClick
|
|
40
|
+
onClick: onSectionClick,
|
|
41
|
+
isSelected: isAllSelected,
|
|
42
|
+
shouldFitContainer: true
|
|
42
43
|
}, formatMessage({
|
|
43
44
|
defaultMessage: 'All',
|
|
44
45
|
id: 'editor.quick-insert.all'
|
|
45
46
|
})), sections.map(entry => {
|
|
46
47
|
var _sectionMessages;
|
|
47
48
|
return /*#__PURE__*/React.createElement(Button, {
|
|
48
|
-
appearance:
|
|
49
|
-
"aria-pressed": section === entry.key
|
|
49
|
+
appearance: 'subtle',
|
|
50
|
+
"aria-pressed": section === entry.key,
|
|
50
51
|
"data-section": entry.key,
|
|
51
52
|
key: entry.key,
|
|
52
|
-
onClick: onSectionClick
|
|
53
|
+
onClick: onSectionClick,
|
|
54
|
+
isSelected: section === entry.key,
|
|
55
|
+
shouldFitContainer: true
|
|
53
56
|
}, formatMessage((_sectionMessages = sectionMessages[entry.key]) !== null && _sectionMessages !== void 0 ? _sectionMessages : messages.categoryOther));
|
|
54
57
|
}));
|
|
55
58
|
};
|
|
@@ -2,34 +2,52 @@ import React from 'react';
|
|
|
2
2
|
import { useIntl } from 'react-intl';
|
|
3
3
|
import Button from '@atlaskit/button/default/button';
|
|
4
4
|
import LinkButton from '@atlaskit/button/link';
|
|
5
|
+
import { Inline, Text } from '@atlaskit/primitives/compiled';
|
|
5
6
|
export const RegistryElementBrowserFooter = ({
|
|
6
7
|
helpUrl,
|
|
7
8
|
isInsertEnabled,
|
|
8
9
|
onClose,
|
|
9
|
-
onConfirmInsert
|
|
10
|
+
onConfirmInsert,
|
|
11
|
+
resultCount
|
|
10
12
|
}) => {
|
|
11
13
|
const {
|
|
12
14
|
formatMessage
|
|
13
15
|
} = useIntl();
|
|
14
|
-
return /*#__PURE__*/React.createElement(
|
|
16
|
+
return /*#__PURE__*/React.createElement(Inline, {
|
|
17
|
+
alignBlock: "center",
|
|
18
|
+
grow: "fill",
|
|
19
|
+
spread: "space-between"
|
|
20
|
+
}, /*#__PURE__*/React.createElement(Inline, {
|
|
21
|
+
alignBlock: "center",
|
|
22
|
+
space: "space.100"
|
|
23
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
|
24
|
+
color: "color.text.subtlest"
|
|
25
|
+
}, formatMessage({
|
|
26
|
+
defaultMessage: '{count, plural, one {# result available} other {# results available}}',
|
|
27
|
+
id: 'editor.quick-insert.results-available'
|
|
28
|
+
}, {
|
|
29
|
+
count: resultCount
|
|
30
|
+
})), helpUrl && /*#__PURE__*/React.createElement(LinkButton, {
|
|
15
31
|
appearance: "subtle",
|
|
16
32
|
href: helpUrl,
|
|
17
33
|
target: "_blank"
|
|
18
34
|
}, formatMessage({
|
|
19
35
|
defaultMessage: 'Help',
|
|
20
36
|
id: 'editor.quick-insert.help'
|
|
21
|
-
})), /*#__PURE__*/React.createElement(
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}, formatMessage({
|
|
25
|
-
defaultMessage: 'Close',
|
|
26
|
-
id: 'editor.quick-insert.close'
|
|
27
|
-
})), /*#__PURE__*/React.createElement(Button, {
|
|
37
|
+
}))), /*#__PURE__*/React.createElement(Inline, {
|
|
38
|
+
space: "space.100"
|
|
39
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
28
40
|
appearance: "primary",
|
|
29
41
|
isDisabled: !isInsertEnabled,
|
|
30
42
|
onClick: onConfirmInsert
|
|
31
43
|
}, formatMessage({
|
|
32
44
|
defaultMessage: 'Insert',
|
|
33
45
|
id: 'editor.quick-insert.insert'
|
|
34
|
-
}))
|
|
46
|
+
})), /*#__PURE__*/React.createElement(Button, {
|
|
47
|
+
appearance: "subtle",
|
|
48
|
+
onClick: onClose
|
|
49
|
+
}, formatMessage({
|
|
50
|
+
defaultMessage: 'Close',
|
|
51
|
+
id: 'editor.quick-insert.close'
|
|
52
|
+
}))));
|
|
35
53
|
};
|
package/dist/es2019/ui/RegistryElementBrowser/RegistryElementBrowserSearchResults.compiled.css
CHANGED
|
@@ -1,2 +1,20 @@
|
|
|
1
|
-
.
|
|
2
|
-
.
|
|
1
|
+
._11c81af2{font:var(--ds-font-heading-medium,normal 653 20px/24px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
2
|
+
._zulpu2gc{gap:var(--ds-space-100,8px)}
|
|
3
|
+
._yyhyjvu9{grid-column:1/-1}
|
|
4
|
+
._19pk1ejb{margin-top:var(--ds-space-300,24px)}
|
|
5
|
+
._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
|
|
6
|
+
._19pkutpp{margin-top:var(--ds-space-150,9pt)}
|
|
7
|
+
._1bah1h6o{justify-content:center}
|
|
8
|
+
._1bsb1osq{width:100%}
|
|
9
|
+
._1e0c11p5{display:grid}
|
|
10
|
+
._1e0c1txw{display:flex}
|
|
11
|
+
._2lx21bp4{flex-direction:column}
|
|
12
|
+
._4cvr1h6o{align-items:center}
|
|
13
|
+
._4cvrv2br{align-items:start}
|
|
14
|
+
._ae4vv2br{align-content:start}
|
|
15
|
+
._p12f1kdj{max-width:25pc}
|
|
16
|
+
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
17
|
+
._y3gn1h6o{text-align:center}
|
|
18
|
+
._yv0ei47z{grid-template-columns:minmax(0,1fr)}
|
|
19
|
+
@media (min-width:550px) and (max-width:1023px){._16409sye{grid-template-columns:repeat(2,minmax(0,1fr))}}
|
|
20
|
+
@media (min-width:1024px){._g98o1koq{grid-template-columns:repeat(3,232px)}}
|
|
@@ -5,9 +5,13 @@ import React, { useMemo } from 'react';
|
|
|
5
5
|
import { useIntl } from 'react-intl';
|
|
6
6
|
import LinkButton from '@atlaskit/button/link';
|
|
7
7
|
import { QuickInsertProvider } from '@atlaskit/editor-common/quick-insert/provider';
|
|
8
|
-
import {
|
|
9
|
-
import
|
|
8
|
+
import { Text } from '@atlaskit/primitives/compiled';
|
|
9
|
+
import NotFoundIllustration from './NotFoundIllustration';
|
|
10
10
|
const resultsGridStyles = null;
|
|
11
|
+
const emptyStateWrapperStyles = null;
|
|
12
|
+
const emptyStateHeadingStyles = null;
|
|
13
|
+
const emptyStateSubheadingStyles = null;
|
|
14
|
+
const emptyStateLinkStyles = null;
|
|
11
15
|
const RegistryElementBrowserItem = ({
|
|
12
16
|
editorView,
|
|
13
17
|
isOffline,
|
|
@@ -23,12 +27,13 @@ const RegistryElementBrowserItem = ({
|
|
|
23
27
|
editorView,
|
|
24
28
|
isOffline,
|
|
25
29
|
item: {
|
|
30
|
+
description: item.description,
|
|
26
31
|
id: key,
|
|
27
32
|
isSelected
|
|
28
33
|
},
|
|
29
34
|
select: handler => onSelect(key, handler),
|
|
30
35
|
surface: 'element-browser'
|
|
31
|
-
}), [editorView, isOffline, isSelected, key, onSelect]);
|
|
36
|
+
}), [editorView, isOffline, isSelected, item.description, key, onSelect]);
|
|
32
37
|
if (!Component) {
|
|
33
38
|
return null;
|
|
34
39
|
}
|
|
@@ -46,34 +51,13 @@ export const RegistryElementBrowserSearchResults = ({
|
|
|
46
51
|
section,
|
|
47
52
|
selectedKey,
|
|
48
53
|
onKeyDown,
|
|
49
|
-
onSearchChange,
|
|
50
54
|
onSelect
|
|
51
55
|
}) => {
|
|
52
56
|
var _emptyStateHandler;
|
|
53
57
|
const {
|
|
54
58
|
formatMessage
|
|
55
59
|
} = useIntl();
|
|
56
|
-
return /*#__PURE__*/React.createElement(
|
|
57
|
-
space: "space.200"
|
|
58
|
-
}, /*#__PURE__*/React.createElement(Textfield, {
|
|
59
|
-
autoFocus: true,
|
|
60
|
-
"aria-controls": resultsId,
|
|
61
|
-
"aria-label": formatMessage({
|
|
62
|
-
defaultMessage: 'Search elements',
|
|
63
|
-
id: 'editor.quick-insert.search'
|
|
64
|
-
}),
|
|
65
|
-
name: "registry-element-browser-search",
|
|
66
|
-
onChange: onSearchChange,
|
|
67
|
-
onKeyDown: onKeyDown,
|
|
68
|
-
value: query
|
|
69
|
-
}), /*#__PURE__*/React.createElement(Text, {
|
|
70
|
-
"aria-live": "polite"
|
|
71
|
-
}, formatMessage({
|
|
72
|
-
defaultMessage: '{count} results',
|
|
73
|
-
id: 'editor.quick-insert.results'
|
|
74
|
-
}, {
|
|
75
|
-
count: items.length
|
|
76
|
-
})), /*#__PURE__*/React.createElement("div", {
|
|
60
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
77
61
|
"aria-label": formatMessage({
|
|
78
62
|
defaultMessage: 'Element results',
|
|
79
63
|
id: 'editor.quick-insert.results-label'
|
|
@@ -83,7 +67,7 @@ export const RegistryElementBrowserSearchResults = ({
|
|
|
83
67
|
onKeyDown: onKeyDown,
|
|
84
68
|
tabIndex: -1,
|
|
85
69
|
role: items.length ? 'listbox' : undefined,
|
|
86
|
-
className: ax(["_zulpu2gc _1e0c11p5
|
|
70
|
+
className: ax(["_zulpu2gc _ae4vv2br _4cvrv2br _1e0c11p5 _yv0ei47z _16409sye _g98o1koq"])
|
|
87
71
|
}, items.length ? items.map(item => /*#__PURE__*/React.createElement(RegistryElementBrowserItem, {
|
|
88
72
|
editorView: editorView,
|
|
89
73
|
isOffline: isOffline,
|
|
@@ -95,18 +79,26 @@ export const RegistryElementBrowserSearchResults = ({
|
|
|
95
79
|
mode: 'full',
|
|
96
80
|
searchTerm: query,
|
|
97
81
|
selectedCategory: section
|
|
98
|
-
})) !== null && _emptyStateHandler !== void 0 ? _emptyStateHandler : /*#__PURE__*/React.createElement(
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
82
|
+
})) !== null && _emptyStateHandler !== void 0 ? _emptyStateHandler : /*#__PURE__*/React.createElement("div", {
|
|
83
|
+
className: ax(["_yyhyjvu9 _4cvr1h6o _1e0c1txw _2lx21bp4 _1bah1h6o _1bsb1osq"])
|
|
84
|
+
}, /*#__PURE__*/React.createElement(NotFoundIllustration, null), /*#__PURE__*/React.createElement("div", {
|
|
85
|
+
className: ax(["_11c81af2 _syazi7uo _19pk1ejb"])
|
|
86
|
+
}, formatMessage({
|
|
102
87
|
defaultMessage: 'Nothing matches your search',
|
|
103
88
|
id: 'editor.quick-insert.empty'
|
|
104
|
-
})), /*#__PURE__*/React.createElement(
|
|
89
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
90
|
+
className: ax(["_19pkpxbi _p12f1kdj _y3gn1h6o"])
|
|
91
|
+
}, /*#__PURE__*/React.createElement(Text, null, formatMessage({
|
|
92
|
+
defaultMessage: 'Try searching with a different term or discover new apps for Atlassian products.',
|
|
93
|
+
id: 'editor.quick-insert.empty-description'
|
|
94
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
95
|
+
className: ax(["_19pkutpp"])
|
|
96
|
+
}, /*#__PURE__*/React.createElement(LinkButton, {
|
|
105
97
|
appearance: "primary",
|
|
106
98
|
href: "https://marketplace.atlassian.com/search?category=Macros&hosting=cloud&product=confluence",
|
|
107
99
|
target: "_blank"
|
|
108
100
|
}, formatMessage({
|
|
109
101
|
defaultMessage: 'Explore Atlassian Marketplace',
|
|
110
102
|
id: 'editor.quick-insert.explore-marketplace'
|
|
111
|
-
})))));
|
|
103
|
+
}))))));
|
|
112
104
|
};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { createQuickInsertMatcher } from '@atlaskit/editor-common/quick-insert/create-quick-insert-matcher';
|
|
1
2
|
const compareRanks = (left, right) => {
|
|
2
3
|
for (let index = 0; index < Math.max(left.length, right.length); index++) {
|
|
3
4
|
var _left$index, _right$index;
|
|
@@ -80,10 +81,17 @@ export const getRegistryElementBrowserItems = ({
|
|
|
80
81
|
}) => {
|
|
81
82
|
const normalizedQuery = query.trim();
|
|
82
83
|
const items = section ? model.items.filter(item => item.sectionKeys.includes(section)) : model.items;
|
|
84
|
+
const itemsWithDescriptions = items.map(item => {
|
|
85
|
+
var _createQuickInsertMat;
|
|
86
|
+
return {
|
|
87
|
+
...item,
|
|
88
|
+
description: (_createQuickInsertMat = createQuickInsertMatcher.getDescription) === null || _createQuickInsertMat === void 0 ? void 0 : _createQuickInsertMat.call(createQuickInsertMatcher, item.registration.match, formatMessage)
|
|
89
|
+
};
|
|
90
|
+
});
|
|
83
91
|
if (!normalizedQuery) {
|
|
84
|
-
return
|
|
92
|
+
return itemsWithDescriptions;
|
|
85
93
|
}
|
|
86
|
-
return
|
|
94
|
+
return itemsWithDescriptions.flatMap(item => {
|
|
87
95
|
var _item$registration$ma, _item$registration;
|
|
88
96
|
const result = (_item$registration$ma = (_item$registration = item.registration).match) === null || _item$registration$ma === void 0 ? void 0 : _item$registration$ma.call(_item$registration, {
|
|
89
97
|
formatMessage,
|
|
@@ -22,6 +22,7 @@ export const getBlockControlQuickInsertComponents = ({
|
|
|
22
22
|
component: ({
|
|
23
23
|
surfaceContext
|
|
24
24
|
}) => {
|
|
25
|
+
var _context$activeNode;
|
|
25
26
|
const context = surfaceContext === null || surfaceContext === void 0 ? void 0 : surfaceContext.get(BLOCK_CONTROL_UI_CONTEXT);
|
|
26
27
|
const view = getEditorView();
|
|
27
28
|
if (!context || !view) {
|
|
@@ -30,6 +31,7 @@ export const getBlockControlQuickInsertComponents = ({
|
|
|
30
31
|
return /*#__PURE__*/React.createElement(BlockControlQuickInsertButton, {
|
|
31
32
|
api: api,
|
|
32
33
|
openTypeAhead: openTypeAhead,
|
|
34
|
+
reserveDragHandleSpace: ((_context$activeNode = context.activeNode) === null || _context$activeNode === void 0 ? void 0 : _context$activeNode.pos) !== context.rootNode.pos,
|
|
33
35
|
start: context.targetNode.pos,
|
|
34
36
|
view: view
|
|
35
37
|
});
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
._v564k6bl{transition:var(--ds-button-hovered,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
|
|
4
4
|
._18zrze3t{padding-inline:var(--ds-space-0,0)}
|
|
5
5
|
._1rjcze3t{padding-block:var(--ds-space-0,0)}
|
|
6
|
+
._12l21xcw{margin-inline-end:calc(var(--ak-editor-base-font-size, 1pc)*12/16 + var(--ds-space-025, 2px))}
|
|
6
7
|
._1bah1h6o{justify-content:center}
|
|
7
8
|
._1bsb1osq{width:100%}
|
|
8
9
|
._1bsb9xsi{width:calc(var(--ak-editor-base-font-size, 1pc)*24/16)}
|
|
@@ -16,7 +16,8 @@ var TEXT_PARENT_TYPES = ['paragraph', 'heading', 'blockquote', 'taskItem', 'deci
|
|
|
16
16
|
// @atlaskit/css intentionally restricts height and width values, so Compiled owns only the
|
|
17
17
|
// dimensions that scale at runtime with the editor's dense-mode font-size custom property.
|
|
18
18
|
var quickInsertButtonContainerStyles = {
|
|
19
|
-
root: "_1e0c1txw _4t3i9xsi _1bsb9xsi"
|
|
19
|
+
root: "_1e0c1txw _4t3i9xsi _1bsb9xsi",
|
|
20
|
+
reservedDragHandleSpace: "_12l21xcw"
|
|
20
21
|
};
|
|
21
22
|
var quickInsertButtonStyles = {
|
|
22
23
|
root: "_19itglyw _2rko1rr0 _v564k6bl _1rjcze3t _18zrze3t _4cvr1h6o _bfhksm61 _vchhusvi _syazazsu _80omtlke _1e0c1txw _4t3i1osq _1bah1h6o _1bsb1osq _mizu1v1w _1ah3v77o _ra3xnqa1 _128mdkaa _irr31dpa _1ggl5xtf _1di6fcek"
|
|
@@ -116,6 +117,8 @@ var openQuickInsert = function openQuickInsert(api, view, start, openTypeAhead)
|
|
|
116
117
|
export var BlockControlQuickInsertButton = function BlockControlQuickInsertButton(_ref5) {
|
|
117
118
|
var api = _ref5.api,
|
|
118
119
|
openTypeAhead = _ref5.openTypeAhead,
|
|
120
|
+
_ref5$reserveDragHand = _ref5.reserveDragHandleSpace,
|
|
121
|
+
reserveDragHandleSpace = _ref5$reserveDragHand === void 0 ? false : _ref5$reserveDragHand,
|
|
119
122
|
start = _ref5.start,
|
|
120
123
|
view = _ref5.view;
|
|
121
124
|
var _useIntl = useIntl(),
|
|
@@ -138,7 +141,7 @@ export var BlockControlQuickInsertButton = function BlockControlQuickInsertButto
|
|
|
138
141
|
description: label
|
|
139
142
|
})
|
|
140
143
|
}, /*#__PURE__*/React.createElement("span", {
|
|
141
|
-
className: ax([quickInsertButtonContainerStyles.root])
|
|
144
|
+
className: ax([quickInsertButtonContainerStyles.root, reserveDragHandleSpace && quickInsertButtonContainerStyles.reservedDragHandleSpace])
|
|
142
145
|
}, /*#__PURE__*/React.createElement(Pressable, {
|
|
143
146
|
"aria-label": label,
|
|
144
147
|
onClick: handleClick,
|