@team-monolith/cds 1.120.2 → 1.121.0
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/@types/emotion.d.ts +2 -0
- package/dist/CdsProvider.js +4 -0
- package/dist/icons/custom/colored/AiSocroomColor.d.ts +5 -0
- package/dist/icons/custom/colored/AiSocroomColor.js +7 -0
- package/dist/icons/custom/colored/ai-socroom-color.svg +15 -0
- package/dist/icons/custom/colored/index.d.ts +1 -0
- package/dist/icons/custom/colored/index.js +1 -0
- package/dist/icons/custom/default/AiSocroom.d.ts +6 -0
- package/dist/icons/custom/default/AiSocroom.js +7 -0
- package/dist/icons/custom/default/ai-socroom.svg +13 -0
- package/dist/icons/custom/default/index.d.ts +1 -0
- package/dist/icons/custom/default/index.js +1 -0
- package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/ComponentAdderPlugin.js +2 -6
- package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/useContextMenuOptions.d.ts +1 -5
- package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/useContextMenuOptions.js +47 -306
- package/dist/patterns/LexicalEditor/plugins/ComponentPickerMenuPlugin/ComponentPickerMenuPlugin.js +63 -93
- package/dist/patterns/LexicalEditor/plugins/ComponentPickerMenuPlugin/componentPickerOptionUtils.d.ts +24 -0
- package/dist/patterns/LexicalEditor/plugins/ComponentPickerMenuPlugin/componentPickerOptionUtils.js +221 -0
- package/dist/utils/types.d.ts +1 -0
- package/dist/utils/types.js +3 -0
- package/package.json +1 -1
package/@types/emotion.d.ts
CHANGED
package/dist/CdsProvider.js
CHANGED
|
@@ -117,6 +117,8 @@ export const light = {
|
|
|
117
117
|
codapAlt: "#CEF2FD",
|
|
118
118
|
aiQuiz: "#6773FF",
|
|
119
119
|
aiQuizAlt: "#E3EAFF",
|
|
120
|
+
aiSocroom: "#FFB01C",
|
|
121
|
+
aiSocroomAlt: "#FFF7E2",
|
|
120
122
|
decorativeRed: "#D73152",
|
|
121
123
|
decorativePink: "#D13D78",
|
|
122
124
|
decorativeAmber: "#CC4827",
|
|
@@ -268,6 +270,8 @@ export const dark = {
|
|
|
268
270
|
codapAlt: "#006A7F",
|
|
269
271
|
aiQuiz: "#6773FF",
|
|
270
272
|
aiQuizAlt: "#434BA5",
|
|
273
|
+
aiSocroom: "#FFB01C",
|
|
274
|
+
aiSocroomAlt: "#7C5100",
|
|
271
275
|
decorativeRed: "#D73152",
|
|
272
276
|
decorativePink: "#D13D78",
|
|
273
277
|
decorativeAmber: "#CC4827",
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from "react";
|
|
3
|
+
import svgImport from "./ai-socroom-color.svg";
|
|
4
|
+
export const CustomAiSocroomColorIcon = forwardRef(function CustomAiSocroomColorIcon(props, ref) {
|
|
5
|
+
return (_jsxs("svg", Object.assign({ width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ref: ref }, props, { children: [_jsx("path", { d: "M13.3333 25.331V25.9024C13.3333 26.8117 13.6143 27.6838 14.1144 28.3268C14.6145 28.9697 15.2928 29.331 16 29.331C16.7072 29.331 17.3855 28.9697 17.8856 28.3268C18.3857 27.6838 18.6667 26.8117 18.6667 25.9024V25.331H13.3333Z", fill: "#5F6987" }), _jsx("path", { d: "M10.6667 20V24.6766C10.6667 25.2044 10.887 25.7106 11.2793 26.0838C11.6715 26.457 12.2035 26.6667 12.7582 26.6667H19.2418C19.5165 26.6667 19.7885 26.6152 20.0422 26.5152C20.296 26.4152 20.5265 26.2686 20.7207 26.0838C20.915 25.899 21.069 25.6796 21.1741 25.4382C21.2792 25.1967 21.3333 24.938 21.3333 24.6766V20H10.6667Z", fill: "#E0E0FF" }), _jsx("path", { d: "M21.3333 20C22.9878 18.8627 24.1368 17.2162 24.8015 15.3025C25.4662 13.3889 25.5089 11.3091 24.9235 9.36894C24.338 7.42878 23.1551 5.73064 21.5489 4.52419C19.9426 3.31775 17.9976 2.66666 16 2.66666C14.0024 2.66666 12.0574 3.31775 10.4511 4.52419C8.84487 5.73064 7.66203 7.42878 7.07654 9.36894C6.49105 11.3091 6.5338 13.3889 7.1985 15.3025C7.8632 17.2162 9.01222 18.8627 10.6667 20H21.3333Z", fill: "#FFDB58" }), _jsx("path", { d: "M14.6667 13.3333H17.3333V20H14.6667V13.3333Z", fill: "#62BD6D" }), _jsx("path", { d: "M28.5943 11.4843H27.7547C27.349 11.4843 27.02 11.8132 27.02 12.219C27.02 12.6247 27.349 12.9536 27.7547 12.9536H28.5943C29.0001 12.9536 29.329 12.6247 29.329 12.219C29.329 11.8132 29.0001 11.4843 28.5943 11.4843Z", fill: "#FFB01C" }), _jsx("path", { d: "M4.2453 11.4843H3.40567C2.99993 11.4843 2.67101 11.8132 2.67101 12.219C2.67101 12.6247 2.99993 12.9536 3.40567 12.9536H4.2453C4.65104 12.9536 4.97996 12.6247 4.97996 12.219C4.97996 11.8132 4.65104 11.4843 4.2453 11.4843Z", fill: "#FFB01C" }), _jsx("path", { d: "M26.5388 5.28494L25.8117 5.70475C25.4603 5.90762 25.3399 6.35693 25.5428 6.70831C25.7456 7.05968 26.195 7.18007 26.5463 6.97719L27.2734 6.55738C27.6248 6.35451 27.7452 5.9052 27.5423 5.55383C27.3395 5.20245 26.8901 5.08206 26.5388 5.28494Z", fill: "#FFB01C" }), _jsx("path", { d: "M5.45284 17.4594L4.72573 17.8792C4.37435 18.0821 4.25397 18.5314 4.45684 18.8828C4.65972 19.2342 5.10902 19.3546 5.4604 19.1517L6.18751 18.7319C6.53889 18.529 6.65927 18.0797 6.4564 17.7283C6.25353 17.3769 5.80422 17.2566 5.45284 17.4594Z", fill: "#FFB01C" }), _jsx("path", { d: "M5.46003 5.28581C5.10865 5.08293 4.65934 5.20332 4.45647 5.55469C4.2536 5.90607 4.37398 6.35538 4.72536 6.55825L5.45247 6.97806C5.80385 7.18094 6.25315 7.06055 6.45603 6.70917C6.6589 6.3578 6.53851 5.90849 6.18714 5.70562L5.46003 5.28581Z", fill: "#FFB01C" }), _jsx("path", { d: "M26.5475 17.4619C26.1961 17.259 25.7468 17.3794 25.544 17.7308C25.3411 18.0822 25.4615 18.5315 25.8129 18.7344L26.54 19.1542C26.8913 19.3571 27.3406 19.2367 27.5435 18.8853C27.7464 18.5339 27.626 18.0846 27.2746 17.8817L26.5475 17.4619Z", fill: "#FFB01C" }), _jsx("path", { d: "M21.3048 11.3432C21.2833 11.1774 21.2034 11.0231 21.0778 10.905C20.9521 10.7868 20.788 10.7117 20.6116 10.6916C20.5112 10.68 18.1538 10.4278 16.7814 11.7188C16.4353 12.0527 16.1689 12.4523 16.0001 12.8907C15.8314 12.4523 15.565 12.0527 15.2188 11.7188C13.846 10.4287 11.489 10.6809 11.3887 10.6916C11.2123 10.7117 11.0481 10.7868 10.9225 10.905C10.7968 11.0231 10.7169 11.1774 10.6955 11.3432C10.6837 11.4371 10.4149 13.6534 11.7877 14.9435C12.7601 15.8577 14.2255 15.9976 15.0341 15.9976H16.9662C17.7747 15.9976 19.2406 15.8577 20.2125 14.9435C21.584 13.6534 21.3166 11.4371 21.3048 11.3432Z", fill: "#62BD6D" }), _jsx("path", { d: "M10.6667 21.3333H21.3333V22.6667H10.6667V21.3333Z", fill: "#F8F8FF" }), _jsx("path", { d: "M21.3333 24.6745C21.3333 24.8995 21.2905 25.1216 21.2122 25.3333H10.7865C10.7089 25.1234 10.6667 24.9012 10.6667 24.6745V24H21.3333V24.6745Z", fill: "#F8F8FF" })] })));
|
|
6
|
+
});
|
|
7
|
+
export const customAiSocroomColorSvg = svgImport;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M13.3333 25.331V25.9024C13.3333 26.8117 13.6143 27.6838 14.1144 28.3268C14.6145 28.9697 15.2928 29.331 16 29.331C16.7072 29.331 17.3855 28.9697 17.8856 28.3268C18.3857 27.6838 18.6667 26.8117 18.6667 25.9024V25.331H13.3333Z" fill="#5F6987"/>
|
|
3
|
+
<path d="M10.6667 20V24.6766C10.6667 25.2044 10.887 25.7106 11.2793 26.0838C11.6715 26.457 12.2035 26.6667 12.7582 26.6667H19.2418C19.5165 26.6667 19.7885 26.6152 20.0422 26.5152C20.296 26.4152 20.5265 26.2686 20.7207 26.0838C20.915 25.899 21.069 25.6796 21.1741 25.4382C21.2792 25.1967 21.3333 24.938 21.3333 24.6766V20H10.6667Z" fill="#E0E0FF"/>
|
|
4
|
+
<path d="M21.3333 20C22.9878 18.8627 24.1368 17.2162 24.8015 15.3025C25.4662 13.3889 25.5089 11.3091 24.9235 9.36894C24.338 7.42878 23.1551 5.73064 21.5489 4.52419C19.9426 3.31775 17.9976 2.66666 16 2.66666C14.0024 2.66666 12.0574 3.31775 10.4511 4.52419C8.84487 5.73064 7.66203 7.42878 7.07654 9.36894C6.49105 11.3091 6.5338 13.3889 7.1985 15.3025C7.8632 17.2162 9.01222 18.8627 10.6667 20H21.3333Z" fill="#FFDB58"/>
|
|
5
|
+
<path d="M14.6667 13.3333H17.3333V20H14.6667V13.3333Z" fill="#62BD6D"/>
|
|
6
|
+
<path d="M28.5943 11.4843H27.7547C27.349 11.4843 27.02 11.8132 27.02 12.219C27.02 12.6247 27.349 12.9536 27.7547 12.9536H28.5943C29.0001 12.9536 29.329 12.6247 29.329 12.219C29.329 11.8132 29.0001 11.4843 28.5943 11.4843Z" fill="#FFB01C"/>
|
|
7
|
+
<path d="M4.2453 11.4843H3.40567C2.99993 11.4843 2.67101 11.8132 2.67101 12.219C2.67101 12.6247 2.99993 12.9536 3.40567 12.9536H4.2453C4.65104 12.9536 4.97996 12.6247 4.97996 12.219C4.97996 11.8132 4.65104 11.4843 4.2453 11.4843Z" fill="#FFB01C"/>
|
|
8
|
+
<path d="M26.5388 5.28494L25.8117 5.70475C25.4603 5.90762 25.3399 6.35693 25.5428 6.70831C25.7456 7.05968 26.195 7.18007 26.5463 6.97719L27.2734 6.55738C27.6248 6.35451 27.7452 5.9052 27.5423 5.55383C27.3395 5.20245 26.8901 5.08206 26.5388 5.28494Z" fill="#FFB01C"/>
|
|
9
|
+
<path d="M5.45284 17.4594L4.72573 17.8792C4.37435 18.0821 4.25397 18.5314 4.45684 18.8828C4.65972 19.2342 5.10902 19.3546 5.4604 19.1517L6.18751 18.7319C6.53889 18.529 6.65927 18.0797 6.4564 17.7283C6.25353 17.3769 5.80422 17.2566 5.45284 17.4594Z" fill="#FFB01C"/>
|
|
10
|
+
<path d="M5.46003 5.28581C5.10865 5.08293 4.65934 5.20332 4.45647 5.55469C4.2536 5.90607 4.37398 6.35538 4.72536 6.55825L5.45247 6.97806C5.80385 7.18094 6.25315 7.06055 6.45603 6.70917C6.6589 6.3578 6.53851 5.90849 6.18714 5.70562L5.46003 5.28581Z" fill="#FFB01C"/>
|
|
11
|
+
<path d="M26.5475 17.4619C26.1961 17.259 25.7468 17.3794 25.544 17.7308C25.3411 18.0822 25.4615 18.5315 25.8129 18.7344L26.54 19.1542C26.8913 19.3571 27.3406 19.2367 27.5435 18.8853C27.7464 18.5339 27.626 18.0846 27.2746 17.8817L26.5475 17.4619Z" fill="#FFB01C"/>
|
|
12
|
+
<path d="M21.3048 11.3432C21.2833 11.1774 21.2034 11.0231 21.0778 10.905C20.9521 10.7868 20.788 10.7117 20.6116 10.6916C20.5112 10.68 18.1538 10.4278 16.7814 11.7188C16.4353 12.0527 16.1689 12.4523 16.0001 12.8907C15.8314 12.4523 15.565 12.0527 15.2188 11.7188C13.846 10.4287 11.489 10.6809 11.3887 10.6916C11.2123 10.7117 11.0481 10.7868 10.9225 10.905C10.7968 11.0231 10.7169 11.1774 10.6955 11.3432C10.6837 11.4371 10.4149 13.6534 11.7877 14.9435C12.7601 15.8577 14.2255 15.9976 15.0341 15.9976H16.9662C17.7747 15.9976 19.2406 15.8577 20.2125 14.9435C21.584 13.6534 21.3166 11.4371 21.3048 11.3432Z" fill="#62BD6D"/>
|
|
13
|
+
<path d="M10.6667 21.3333H21.3333V22.6667H10.6667V21.3333Z" fill="#F8F8FF"/>
|
|
14
|
+
<path d="M21.3333 24.6745C21.3333 24.8995 21.2905 25.1216 21.2122 25.3333H10.7865C10.7089 25.1234 10.6667 24.9012 10.6667 24.6745V24H21.3333V24.6745Z" fill="#F8F8FF"/>
|
|
15
|
+
</svg>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from "react";
|
|
3
|
+
import svgImport from "./ai-socroom.svg";
|
|
4
|
+
export const CustomAiSocroomIcon = forwardRef(function CustomAiSocroomIcon(props, ref) {
|
|
5
|
+
return (_jsxs("svg", Object.assign({ width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ref: ref }, props, { children: [_jsx("path", { d: "M13.3333 25.3333V25.9048C13.3333 26.8141 13.6143 27.6862 14.1144 28.3291C14.6145 28.9721 15.2928 29.3333 16 29.3333C16.7072 29.3333 17.3855 28.9721 17.8856 28.3291C18.3857 27.6862 18.6667 26.8141 18.6667 25.9048V25.3333H13.3333Z", fill: "currentColor" }), _jsx("path", { d: "M28.5943 11.4843H27.7547C27.349 11.4843 27.02 11.8132 27.02 12.219C27.02 12.6247 27.349 12.9536 27.7547 12.9536H28.5943C29.0001 12.9536 29.329 12.6247 29.329 12.219C29.329 11.8132 29.0001 11.4843 28.5943 11.4843Z", fill: "currentColor" }), _jsx("path", { d: "M4.2453 11.4843H3.40567C2.99993 11.4843 2.67101 11.8132 2.67101 12.219C2.67101 12.6247 2.99993 12.9536 3.40567 12.9536H4.2453C4.65104 12.9536 4.97996 12.6247 4.97996 12.219C4.97996 11.8132 4.65104 11.4843 4.2453 11.4843Z", fill: "currentColor" }), _jsx("path", { d: "M26.5388 5.28494L25.8117 5.70475C25.4603 5.90762 25.3399 6.35693 25.5428 6.70831C25.7456 7.05968 26.195 7.18007 26.5463 6.97719L27.2734 6.55738C27.6248 6.35451 27.7452 5.9052 27.5423 5.55383C27.3395 5.20245 26.8901 5.08206 26.5388 5.28494Z", fill: "currentColor" }), _jsx("path", { d: "M5.45284 17.4594L4.72573 17.8792C4.37435 18.0821 4.25397 18.5314 4.45684 18.8828C4.65972 19.2342 5.10902 19.3546 5.4604 19.1517L6.18751 18.7319C6.53889 18.529 6.65927 18.0797 6.4564 17.7283C6.25353 17.3769 5.80422 17.2566 5.45284 17.4594Z", fill: "currentColor" }), _jsx("path", { d: "M5.46003 5.28581C5.10865 5.08293 4.65934 5.20332 4.45647 5.55469C4.2536 5.90607 4.37398 6.35538 4.72536 6.55825L5.45247 6.97806C5.80385 7.18094 6.25315 7.06055 6.45603 6.70917C6.6589 6.3578 6.53851 5.90849 6.18714 5.70562L5.46003 5.28581Z", fill: "currentColor" }), _jsx("path", { d: "M26.5475 17.4619C26.1961 17.259 25.7468 17.3794 25.544 17.7308C25.3411 18.0822 25.4615 18.5315 25.8129 18.7344L26.54 19.1542C26.8913 19.3571 27.3406 19.2367 27.5435 18.8853C27.7464 18.5339 27.626 18.0846 27.2746 17.8817L26.5475 17.4619Z", fill: "currentColor" }), _jsx("path", { d: "M16 2.66666C17.9976 2.66666 19.9432 3.31828 21.5495 4.52473C23.1553 5.73104 24.3377 7.42879 24.9232 9.36848C25.5086 11.3084 25.4666 13.3886 24.8021 15.3021C24.1374 17.2157 22.9878 18.8627 21.3333 20H17.3333V15.9857C18.1677 15.9422 19.3737 15.7323 20.2122 14.944C21.5814 13.656 21.3173 11.4446 21.3047 11.3437C21.2832 11.178 21.2037 11.023 21.0781 10.9049C20.9525 10.7869 20.7882 10.7116 20.612 10.6914C20.5116 10.6799 18.1536 10.4277 16.7812 11.7187C16.4351 12.0527 16.1687 12.4522 16 12.8906C15.8312 12.4522 15.5649 12.0526 15.2187 11.7187C13.8487 10.4313 11.4985 10.6798 11.3893 10.6914C11.2129 10.7115 11.0475 10.7868 10.9219 10.9049C10.7964 11.023 10.7167 11.178 10.6953 11.3437C10.6826 11.445 10.4174 13.6562 11.7877 14.944C12.6265 15.7323 13.8323 15.9422 14.6666 15.9857V20H10.6666C9.01222 18.8627 7.8626 17.2157 7.1979 15.3021C6.5334 13.3886 6.49138 11.3084 7.07681 9.36848C7.66227 7.42879 8.84471 5.73104 10.4505 4.52473C12.0568 3.31829 14.0023 2.66666 16 2.66666Z", fill: "currentColor" }), _jsx("path", { d: "M21.3333 24H10.6667V22.6667H21.3333V24Z", fill: "currentColor" }), _jsx("path", { d: "M21.3333 21.3333H10.6667V20H21.3333V21.3333Z", fill: "currentColor" }), _jsx("path", { d: "M11.2786 26.0833C11.6708 26.4565 12.2032 26.6666 12.7578 26.6667H16H19.2422C19.7968 26.6666 20.3292 26.4565 20.7213 26.0833C21.2135 25.6695 21.2135 25.3333 21.2135 25.3333H16H10.7865C10.7865 25.3333 10.7864 25.6695 11.2786 26.0833Z", fill: "currentColor" })] })));
|
|
6
|
+
});
|
|
7
|
+
export const customAiSocroomSvg = svgImport;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M13.3333 25.3333V25.9048C13.3333 26.8141 13.6143 27.6862 14.1144 28.3291C14.6145 28.9721 15.2928 29.3333 16 29.3333C16.7072 29.3333 17.3855 28.9721 17.8856 28.3291C18.3857 27.6862 18.6667 26.8141 18.6667 25.9048V25.3333H13.3333Z" fill="#363636"/>
|
|
3
|
+
<path d="M28.5943 11.4843H27.7547C27.349 11.4843 27.02 11.8132 27.02 12.219C27.02 12.6247 27.349 12.9536 27.7547 12.9536H28.5943C29.0001 12.9536 29.329 12.6247 29.329 12.219C29.329 11.8132 29.0001 11.4843 28.5943 11.4843Z" fill="#363636"/>
|
|
4
|
+
<path d="M4.2453 11.4843H3.40567C2.99993 11.4843 2.67101 11.8132 2.67101 12.219C2.67101 12.6247 2.99993 12.9536 3.40567 12.9536H4.2453C4.65104 12.9536 4.97996 12.6247 4.97996 12.219C4.97996 11.8132 4.65104 11.4843 4.2453 11.4843Z" fill="#363636"/>
|
|
5
|
+
<path d="M26.5388 5.28494L25.8117 5.70475C25.4603 5.90762 25.3399 6.35693 25.5428 6.70831C25.7456 7.05968 26.195 7.18007 26.5463 6.97719L27.2734 6.55738C27.6248 6.35451 27.7452 5.9052 27.5423 5.55383C27.3395 5.20245 26.8901 5.08206 26.5388 5.28494Z" fill="#363636"/>
|
|
6
|
+
<path d="M5.45284 17.4594L4.72573 17.8792C4.37435 18.0821 4.25397 18.5314 4.45684 18.8828C4.65972 19.2342 5.10902 19.3546 5.4604 19.1517L6.18751 18.7319C6.53889 18.529 6.65927 18.0797 6.4564 17.7283C6.25353 17.3769 5.80422 17.2566 5.45284 17.4594Z" fill="#363636"/>
|
|
7
|
+
<path d="M5.46003 5.28581C5.10865 5.08293 4.65934 5.20332 4.45647 5.55469C4.2536 5.90607 4.37398 6.35538 4.72536 6.55825L5.45247 6.97806C5.80385 7.18094 6.25315 7.06055 6.45603 6.70917C6.6589 6.3578 6.53851 5.90849 6.18714 5.70562L5.46003 5.28581Z" fill="#363636"/>
|
|
8
|
+
<path d="M26.5475 17.4619C26.1961 17.259 25.7468 17.3794 25.544 17.7308C25.3411 18.0822 25.4615 18.5315 25.8129 18.7344L26.54 19.1542C26.8913 19.3571 27.3406 19.2367 27.5435 18.8853C27.7464 18.5339 27.626 18.0846 27.2746 17.8817L26.5475 17.4619Z" fill="#363636"/>
|
|
9
|
+
<path d="M16 2.66666C17.9976 2.66666 19.9432 3.31828 21.5495 4.52473C23.1553 5.73104 24.3377 7.42879 24.9232 9.36848C25.5086 11.3084 25.4666 13.3886 24.8021 15.3021C24.1374 17.2157 22.9878 18.8627 21.3333 20H17.3333V15.9857C18.1677 15.9422 19.3737 15.7323 20.2122 14.944C21.5814 13.656 21.3173 11.4446 21.3047 11.3437C21.2832 11.178 21.2037 11.023 21.0781 10.9049C20.9525 10.7869 20.7882 10.7116 20.612 10.6914C20.5116 10.6799 18.1536 10.4277 16.7812 11.7187C16.4351 12.0527 16.1687 12.4522 16 12.8906C15.8312 12.4522 15.5649 12.0526 15.2187 11.7187C13.8487 10.4313 11.4985 10.6798 11.3893 10.6914C11.2129 10.7115 11.0475 10.7868 10.9219 10.9049C10.7964 11.023 10.7167 11.178 10.6953 11.3437C10.6826 11.445 10.4174 13.6562 11.7877 14.944C12.6265 15.7323 13.8323 15.9422 14.6666 15.9857V20H10.6666C9.01222 18.8627 7.8626 17.2157 7.1979 15.3021C6.5334 13.3886 6.49138 11.3084 7.07681 9.36848C7.66227 7.42879 8.84471 5.73104 10.4505 4.52473C12.0568 3.31829 14.0023 2.66666 16 2.66666Z" fill="#363636"/>
|
|
10
|
+
<path d="M21.3333 24H10.6667V22.6667H21.3333V24Z" fill="#363636"/>
|
|
11
|
+
<path d="M21.3333 21.3333H10.6667V20H21.3333V21.3333Z" fill="#363636"/>
|
|
12
|
+
<path d="M11.2786 26.0833C11.6708 26.4565 12.2032 26.6666 12.7578 26.6667H16H19.2422C19.7968 26.6666 20.3292 26.4565 20.7213 26.0833C21.2135 25.6695 21.2135 25.3333 21.2135 25.3333H16H10.7865C10.7865 25.3333 10.7864 25.6695 11.2786 26.0833Z" fill="#363636"/>
|
|
13
|
+
</svg>
|
|
@@ -146,11 +146,7 @@ export function ComponentAdderPlugin(props) {
|
|
|
146
146
|
resolves.forEach((resolve) => resolve());
|
|
147
147
|
setResolves((newResolves) => newResolves.filter((newResolve) => resolves.indexOf(newResolve) === -1));
|
|
148
148
|
});
|
|
149
|
-
const getContextMenuOptions = useContextMenuOptions(
|
|
150
|
-
isSheetEnabled,
|
|
151
|
-
isQuizEnabled,
|
|
152
|
-
showFileUpload,
|
|
153
|
-
});
|
|
149
|
+
const getContextMenuOptions = useContextMenuOptions();
|
|
154
150
|
const filteredOptions = options.filter((option) => {
|
|
155
151
|
if (!query) {
|
|
156
152
|
return true;
|
|
@@ -244,7 +240,7 @@ export function ComponentAdderPlugin(props) {
|
|
|
244
240
|
// Add a node key to the selection.
|
|
245
241
|
nodeSelection.add(newNode.getKey());
|
|
246
242
|
$setSelection(nodeSelection);
|
|
247
|
-
const contextMenuOptions = getContextMenuOptions(editor, newNode
|
|
243
|
+
const contextMenuOptions = getContextMenuOptions(editor, newNode);
|
|
248
244
|
setOptions(contextMenuOptions);
|
|
249
245
|
if (nodeKey === null) {
|
|
250
246
|
setNodeKey(newNode.getKey());
|
|
@@ -3,8 +3,4 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { LexicalEditor, LexicalNode } from "lexical";
|
|
5
5
|
import { ComponentDrawerOption, ComponentPickerOption } from "../ComponentPickerMenuPlugin";
|
|
6
|
-
export declare function useContextMenuOptions(
|
|
7
|
-
isSheetEnabled: boolean;
|
|
8
|
-
isQuizEnabled: boolean;
|
|
9
|
-
showFileUpload: boolean;
|
|
10
|
-
}): (editor: LexicalEditor, node: LexicalNode, setImageOpen: (open: boolean) => void, setVideoOpen: (open: boolean) => void, setFileOpen: (open: boolean) => void) => (ComponentPickerOption | ComponentDrawerOption)[];
|
|
6
|
+
export declare function useContextMenuOptions(): (editor: LexicalEditor, node: LexicalNode) => (ComponentPickerOption | ComponentDrawerOption)[];
|
|
@@ -1,81 +1,57 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
1
|
/**
|
|
3
2
|
* Context Menu (:: 버튼)
|
|
4
3
|
*/
|
|
5
4
|
import { $createParagraphNode, ParagraphNode, } from "lexical";
|
|
6
|
-
import { ComponentPickerOption, getBaseOptions, } from "../ComponentPickerMenuPlugin";
|
|
7
5
|
import { $createHeadingNode, $createQuoteNode, HeadingNode, } from "@lexical/rich-text";
|
|
8
6
|
import { $setBlocksType } from "@lexical/selection";
|
|
9
7
|
import { ListItemNode, ListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, } from "@lexical/list";
|
|
10
8
|
import { $createCodeNode } from "@lexical/code";
|
|
11
|
-
import { H1Icon, H2Icon, H3Icon, CloseFillIcon, ListUnorderedIcon, ListOrderedIcon, InputMethodLineIcon, CodeViewIcon, DoubleQuotesLIcon, TextIcon, } from "../../../../icons";
|
|
12
9
|
import { $isColoredQuoteNode, } from "../../nodes/ColoredQuoteNode";
|
|
13
10
|
import { useTheme } from "@emotion/react";
|
|
14
|
-
import { css } from "@emotion/css";
|
|
15
|
-
import { $isFileNode, $isImageNode, $isVideoNode, $isProblemInputNode, } from "../../nodes";
|
|
16
|
-
import { $isProblemSelectNode, } from "../../nodes/ProblemSelectNode";
|
|
17
|
-
import { $isSheetInputNode } from "../../nodes/SheetInputNode";
|
|
18
|
-
import { $isSheetSelectNode, } from "../../nodes/SheetSelectNode";
|
|
19
|
-
import { $isSelfEvaluationNode, } from "../../nodes/SelfEvaluationNode";
|
|
20
11
|
import { useTranslation } from "react-i18next";
|
|
12
|
+
import { getComponentPickerOptions, getQuoteColorOptions, getRemoveBlockMenu, } from "../ComponentPickerMenuPlugin/componentPickerOptionUtils";
|
|
21
13
|
function getParagraphContextMenuOptions(editor, node, t) {
|
|
22
14
|
return [
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
// eslint-disable-next-line i18next/no-literal-string
|
|
26
|
-
keywords: ["normal", "paragraph", "p", "text", "본문", "단락", "내용"],
|
|
15
|
+
getComponentPickerOptions({
|
|
16
|
+
key: "p",
|
|
27
17
|
onSelect: () => editor.update(() => {
|
|
28
18
|
const selection = node.selectStart();
|
|
29
19
|
$setBlocksType(selection, () => $createParagraphNode());
|
|
30
20
|
}),
|
|
31
|
-
}),
|
|
21
|
+
}, t),
|
|
32
22
|
...[1, 2, 3].map((n) => {
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
3: t("작은 제목", { context: "렉시컬 드롭다운 메뉴" }),
|
|
37
|
-
};
|
|
38
|
-
const iconMap = {
|
|
39
|
-
1: _jsx(H1Icon, {}),
|
|
40
|
-
2: _jsx(H2Icon, {}),
|
|
41
|
-
3: _jsx(H3Icon, {}),
|
|
42
|
-
};
|
|
43
|
-
return new ComponentPickerOption(titleMap[n], {
|
|
44
|
-
icon: iconMap[n],
|
|
45
|
-
keywords: ["heading", "header", `h${n}`, titleMap[n]],
|
|
23
|
+
const headerKey = `h${n}`;
|
|
24
|
+
return getComponentPickerOptions({
|
|
25
|
+
key: headerKey,
|
|
46
26
|
onSelect: () => editor.update(() => {
|
|
47
27
|
const selection = node.selectStart();
|
|
48
|
-
$setBlocksType(selection, () => $createHeadingNode(
|
|
28
|
+
$setBlocksType(selection, () => $createHeadingNode(headerKey));
|
|
49
29
|
}),
|
|
50
|
-
});
|
|
30
|
+
}, t);
|
|
51
31
|
}),
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
keywords: ["bulleted list", "unordered list", "ul"],
|
|
32
|
+
getComponentPickerOptions({
|
|
33
|
+
key: "ul",
|
|
55
34
|
onSelect: () => {
|
|
56
35
|
node.selectStart();
|
|
57
36
|
editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
|
|
58
37
|
},
|
|
59
|
-
}),
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
keywords: ["numbered list", "ordered list", "ol"],
|
|
38
|
+
}, t),
|
|
39
|
+
getComponentPickerOptions({
|
|
40
|
+
key: "ol",
|
|
63
41
|
onSelect: () => {
|
|
64
42
|
node.selectStart();
|
|
65
43
|
editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
|
|
66
44
|
},
|
|
67
|
-
}),
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
keywords: ["block quote"],
|
|
45
|
+
}, t),
|
|
46
|
+
getComponentPickerOptions({
|
|
47
|
+
key: "quote",
|
|
71
48
|
onSelect: () => editor.update(() => {
|
|
72
49
|
const selection = node.selectStart();
|
|
73
50
|
$setBlocksType(selection, () => $createQuoteNode());
|
|
74
51
|
}),
|
|
75
|
-
}),
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
keywords: ["javascript", "python", "js", "codeblock"],
|
|
52
|
+
}, t),
|
|
53
|
+
getComponentPickerOptions({
|
|
54
|
+
key: "code",
|
|
79
55
|
onSelect: () => editor.update(() => {
|
|
80
56
|
const selection = node.selectStart();
|
|
81
57
|
if (selection.isCollapsed()) {
|
|
@@ -89,307 +65,72 @@ function getParagraphContextMenuOptions(editor, node, t) {
|
|
|
89
65
|
selection.insertRawText(textContent);
|
|
90
66
|
}
|
|
91
67
|
}),
|
|
92
|
-
}),
|
|
93
|
-
|
|
94
|
-
icon: _jsx(CloseFillIcon, {}),
|
|
95
|
-
keywords: [],
|
|
96
|
-
onSelect: () => {
|
|
97
|
-
editor.update(() => {
|
|
98
|
-
node.remove();
|
|
99
|
-
});
|
|
100
|
-
},
|
|
101
|
-
}),
|
|
68
|
+
}, t),
|
|
69
|
+
getRemoveBlockMenu(editor, node, t),
|
|
102
70
|
];
|
|
103
71
|
}
|
|
104
72
|
function getHeadingContextMenuOptions(editor, node, t) {
|
|
105
73
|
return [
|
|
106
74
|
...[1, 2, 3].map((n) => {
|
|
107
|
-
const
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
3: t("작은 제목", { context: "렉시컬 드롭다운 메뉴" }),
|
|
111
|
-
};
|
|
112
|
-
const iconMap = {
|
|
113
|
-
1: _jsx(H1Icon, {}),
|
|
114
|
-
2: _jsx(H2Icon, {}),
|
|
115
|
-
3: _jsx(H3Icon, {}),
|
|
116
|
-
};
|
|
117
|
-
return new ComponentPickerOption(titleMap[n], {
|
|
118
|
-
icon: iconMap[n],
|
|
119
|
-
keywords: ["heading", "header", `h${n}`, titleMap[n]],
|
|
75
|
+
const headerKey = `h${n}`;
|
|
76
|
+
return getComponentPickerOptions({
|
|
77
|
+
key: headerKey,
|
|
120
78
|
onSelect: () => editor.update(() => {
|
|
121
79
|
const selection = node.selectStart();
|
|
122
|
-
$setBlocksType(selection, () => $createHeadingNode(
|
|
80
|
+
$setBlocksType(selection, () => $createHeadingNode(headerKey));
|
|
123
81
|
}),
|
|
124
|
-
});
|
|
125
|
-
}),
|
|
126
|
-
new ComponentPickerOption(t("블록 삭제"), {
|
|
127
|
-
icon: _jsx(CloseFillIcon, {}),
|
|
128
|
-
keywords: [],
|
|
129
|
-
onSelect: () => {
|
|
130
|
-
editor.update(() => {
|
|
131
|
-
node.remove();
|
|
132
|
-
});
|
|
133
|
-
},
|
|
82
|
+
}, t);
|
|
134
83
|
}),
|
|
84
|
+
getRemoveBlockMenu(editor, node, t),
|
|
135
85
|
];
|
|
136
86
|
}
|
|
137
|
-
function getListContextMenuOptions(editor,
|
|
87
|
+
function getListContextMenuOptions(editor, node, t) {
|
|
138
88
|
return [
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
keywords: ["bulleted list", "unordered list", "ul"],
|
|
89
|
+
getComponentPickerOptions({
|
|
90
|
+
key: "ul",
|
|
142
91
|
onSelect: () => {
|
|
143
92
|
node.selectStart();
|
|
144
93
|
editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
|
|
145
94
|
},
|
|
146
|
-
}),
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
keywords: ["numbered list", "ordered list", "ol"],
|
|
95
|
+
}, t),
|
|
96
|
+
getComponentPickerOptions({
|
|
97
|
+
key: "ol",
|
|
150
98
|
onSelect: () => {
|
|
151
99
|
node.selectStart();
|
|
152
100
|
editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
|
|
153
101
|
},
|
|
154
|
-
}),
|
|
155
|
-
|
|
156
|
-
icon: _jsx(CloseFillIcon, {}),
|
|
157
|
-
keywords: [],
|
|
158
|
-
onSelect: () => {
|
|
159
|
-
editor.update(() => {
|
|
160
|
-
node.remove();
|
|
161
|
-
});
|
|
162
|
-
},
|
|
163
|
-
}),
|
|
164
|
-
];
|
|
165
|
-
}
|
|
166
|
-
function getProblemInputContextMenuOptions(node, t) {
|
|
167
|
-
return [
|
|
168
|
-
new ComponentPickerOption(t("블록 삭제"), {
|
|
169
|
-
icon: _jsx(CloseFillIcon, {}),
|
|
170
|
-
keywords: [],
|
|
171
|
-
onSelect: () => {
|
|
172
|
-
node.remove();
|
|
173
|
-
},
|
|
174
|
-
}),
|
|
175
|
-
];
|
|
176
|
-
}
|
|
177
|
-
function getProblemSelectContextMenuOptions(node, t) {
|
|
178
|
-
return [
|
|
179
|
-
new ComponentPickerOption(t("블록 삭제"), {
|
|
180
|
-
icon: _jsx(CloseFillIcon, {}),
|
|
181
|
-
keywords: [],
|
|
182
|
-
onSelect: () => {
|
|
183
|
-
node.remove();
|
|
184
|
-
},
|
|
185
|
-
}),
|
|
186
|
-
];
|
|
187
|
-
}
|
|
188
|
-
function getSheetInputContextMenuOptions(node, t) {
|
|
189
|
-
return [
|
|
190
|
-
new ComponentPickerOption(t("블록 삭제"), {
|
|
191
|
-
icon: _jsx(CloseFillIcon, {}),
|
|
192
|
-
keywords: [],
|
|
193
|
-
onSelect: () => {
|
|
194
|
-
node.remove();
|
|
195
|
-
},
|
|
196
|
-
}),
|
|
197
|
-
];
|
|
198
|
-
}
|
|
199
|
-
function getSheetSelectContextMenuOptions(node, t) {
|
|
200
|
-
return [
|
|
201
|
-
new ComponentPickerOption(t("블록 삭제"), {
|
|
202
|
-
icon: _jsx(CloseFillIcon, {}),
|
|
203
|
-
keywords: [],
|
|
204
|
-
onSelect: () => {
|
|
205
|
-
node.remove();
|
|
206
|
-
},
|
|
207
|
-
}),
|
|
208
|
-
];
|
|
209
|
-
}
|
|
210
|
-
function getSelfEvaluationContextMenuOptions(node, t) {
|
|
211
|
-
return [
|
|
212
|
-
new ComponentPickerOption(t("블록 삭제"), {
|
|
213
|
-
icon: _jsx(CloseFillIcon, {}),
|
|
214
|
-
keywords: [],
|
|
215
|
-
onSelect: () => {
|
|
216
|
-
node.remove();
|
|
217
|
-
},
|
|
218
|
-
}),
|
|
219
|
-
];
|
|
220
|
-
}
|
|
221
|
-
function getImageContextMenuOptions(node, t) {
|
|
222
|
-
return [
|
|
223
|
-
new ComponentPickerOption(t("블록 삭제"), {
|
|
224
|
-
icon: _jsx(CloseFillIcon, {}),
|
|
225
|
-
keywords: [],
|
|
226
|
-
onSelect: () => {
|
|
227
|
-
node.remove();
|
|
228
|
-
},
|
|
229
|
-
}),
|
|
230
|
-
];
|
|
231
|
-
}
|
|
232
|
-
function getVideoContextMenuOptions(node, t) {
|
|
233
|
-
return [
|
|
234
|
-
new ComponentPickerOption(t("블록 삭제"), {
|
|
235
|
-
icon: _jsx(CloseFillIcon, {}),
|
|
236
|
-
keywords: [],
|
|
237
|
-
onSelect: () => {
|
|
238
|
-
node.remove();
|
|
239
|
-
},
|
|
240
|
-
}),
|
|
102
|
+
}, t),
|
|
103
|
+
getRemoveBlockMenu(editor, node, t),
|
|
241
104
|
];
|
|
242
105
|
}
|
|
243
106
|
function getColoredQuoteContextMenuOptions(editor, theme, node, t) {
|
|
244
107
|
return [
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
onSelect: () => {
|
|
252
|
-
editor.update(() => {
|
|
253
|
-
node.setColor("grey");
|
|
254
|
-
});
|
|
255
|
-
},
|
|
256
|
-
}),
|
|
257
|
-
new ComponentPickerOption(t("빨간색"), {
|
|
258
|
-
icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.redOnContainer })),
|
|
259
|
-
iconContainerClassName: css `
|
|
260
|
-
background: ${theme.color.container.redContainer};
|
|
261
|
-
`,
|
|
262
|
-
keywords: ["red"],
|
|
263
|
-
onSelect: () => {
|
|
264
|
-
editor.update(() => {
|
|
265
|
-
node.setColor("red");
|
|
266
|
-
});
|
|
267
|
-
},
|
|
268
|
-
}),
|
|
269
|
-
new ComponentPickerOption(t("노란색"), {
|
|
270
|
-
icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.yellowOnContainer })),
|
|
271
|
-
iconContainerClassName: css `
|
|
272
|
-
background: ${theme.color.container.yellowContainer};
|
|
273
|
-
`,
|
|
274
|
-
keywords: ["yellow"],
|
|
275
|
-
onSelect: () => {
|
|
276
|
-
editor.update(() => {
|
|
277
|
-
node.setColor("yellow");
|
|
278
|
-
});
|
|
279
|
-
},
|
|
280
|
-
}),
|
|
281
|
-
new ComponentPickerOption(t("파란색"), {
|
|
282
|
-
icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.blueOnContainer })),
|
|
283
|
-
iconContainerClassName: css `
|
|
284
|
-
background: ${theme.color.container.blueContainer};
|
|
285
|
-
`,
|
|
286
|
-
keywords: ["blue"],
|
|
287
|
-
onSelect: () => {
|
|
288
|
-
editor.update(() => {
|
|
289
|
-
node.setColor("blue");
|
|
290
|
-
});
|
|
291
|
-
},
|
|
292
|
-
}),
|
|
293
|
-
new ComponentPickerOption(t("초록색"), {
|
|
294
|
-
icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.greenOnContainer })),
|
|
295
|
-
iconContainerClassName: css `
|
|
296
|
-
background: ${theme.color.container.greenContainer};
|
|
297
|
-
`,
|
|
298
|
-
keywords: ["green"],
|
|
299
|
-
onSelect: () => {
|
|
300
|
-
editor.update(() => {
|
|
301
|
-
node.setColor("green");
|
|
302
|
-
});
|
|
303
|
-
},
|
|
304
|
-
}),
|
|
305
|
-
new ComponentPickerOption(t("블록 삭제"), {
|
|
306
|
-
icon: _jsx(CloseFillIcon, {}),
|
|
307
|
-
keywords: [],
|
|
308
|
-
onSelect: () => {
|
|
309
|
-
editor.update(() => {
|
|
310
|
-
node.remove();
|
|
311
|
-
});
|
|
312
|
-
},
|
|
313
|
-
}),
|
|
314
|
-
];
|
|
315
|
-
}
|
|
316
|
-
function getUploadFileContextMenuOptions(editor, node, t) {
|
|
317
|
-
return [
|
|
318
|
-
new ComponentPickerOption(t("블록 삭제"), {
|
|
319
|
-
icon: _jsx(CloseFillIcon, {}),
|
|
320
|
-
keywords: [],
|
|
321
|
-
onSelect: () => {
|
|
322
|
-
editor.update(() => {
|
|
323
|
-
node.remove();
|
|
324
|
-
});
|
|
325
|
-
},
|
|
326
|
-
}),
|
|
108
|
+
getQuoteColorOptions(editor, node, "grey", t, theme),
|
|
109
|
+
getQuoteColorOptions(editor, node, "red", t, theme),
|
|
110
|
+
getQuoteColorOptions(editor, node, "yellow", t, theme),
|
|
111
|
+
getQuoteColorOptions(editor, node, "blue", t, theme),
|
|
112
|
+
getQuoteColorOptions(editor, node, "green", t, theme),
|
|
113
|
+
getRemoveBlockMenu(editor, node, t),
|
|
327
114
|
];
|
|
328
115
|
}
|
|
329
|
-
export function useContextMenuOptions(
|
|
330
|
-
const { isSheetEnabled, isQuizEnabled, showFileUpload } = props;
|
|
116
|
+
export function useContextMenuOptions() {
|
|
331
117
|
const theme = useTheme();
|
|
332
118
|
const { t } = useTranslation();
|
|
333
|
-
return (editor, node
|
|
334
|
-
if (
|
|
335
|
-
return getProblemInputContextMenuOptions(node, t);
|
|
336
|
-
}
|
|
337
|
-
else if ($isProblemSelectNode(node)) {
|
|
338
|
-
return getProblemSelectContextMenuOptions(node, t);
|
|
339
|
-
}
|
|
340
|
-
else if ($isSheetInputNode(node)) {
|
|
341
|
-
return getSheetInputContextMenuOptions(node, t);
|
|
342
|
-
}
|
|
343
|
-
else if ($isSheetSelectNode(node)) {
|
|
344
|
-
return getSheetSelectContextMenuOptions(node, t);
|
|
345
|
-
}
|
|
346
|
-
else if ($isSelfEvaluationNode(node)) {
|
|
347
|
-
return getSelfEvaluationContextMenuOptions(node, t);
|
|
348
|
-
}
|
|
349
|
-
else if ($isImageNode(node)) {
|
|
350
|
-
return getImageContextMenuOptions(node, t);
|
|
351
|
-
}
|
|
352
|
-
else if ($isVideoNode(node)) {
|
|
353
|
-
return getVideoContextMenuOptions(node, t);
|
|
354
|
-
}
|
|
355
|
-
else if (node instanceof ParagraphNode) {
|
|
119
|
+
return (editor, node) => {
|
|
120
|
+
if (node instanceof ParagraphNode) {
|
|
356
121
|
return getParagraphContextMenuOptions(editor, node, t);
|
|
357
122
|
}
|
|
358
123
|
else if (node instanceof HeadingNode) {
|
|
359
124
|
return getHeadingContextMenuOptions(editor, node, t);
|
|
360
125
|
}
|
|
361
126
|
else if (node instanceof ListNode || node instanceof ListItemNode) {
|
|
362
|
-
return getListContextMenuOptions(editor,
|
|
127
|
+
return getListContextMenuOptions(editor, node, t);
|
|
363
128
|
}
|
|
364
129
|
else if ($isColoredQuoteNode(node)) {
|
|
365
130
|
return getColoredQuoteContextMenuOptions(editor, theme, node, t);
|
|
366
131
|
}
|
|
367
|
-
else if ($isFileNode(node)) {
|
|
368
|
-
return getUploadFileContextMenuOptions(editor, node, t);
|
|
369
|
-
}
|
|
370
132
|
else {
|
|
371
|
-
return [
|
|
372
|
-
...getBaseOptions({
|
|
373
|
-
editor,
|
|
374
|
-
theme,
|
|
375
|
-
t,
|
|
376
|
-
setImageOpen,
|
|
377
|
-
setVideoOpen,
|
|
378
|
-
isSheetEnabled,
|
|
379
|
-
isQuizEnabled,
|
|
380
|
-
setFileOpen,
|
|
381
|
-
showFileUpload,
|
|
382
|
-
}),
|
|
383
|
-
new ComponentPickerOption(t("블록 삭제"), {
|
|
384
|
-
icon: _jsx(CloseFillIcon, {}),
|
|
385
|
-
keywords: [],
|
|
386
|
-
onSelect: () => {
|
|
387
|
-
editor.update(() => {
|
|
388
|
-
node.remove();
|
|
389
|
-
});
|
|
390
|
-
},
|
|
391
|
-
}),
|
|
392
|
-
];
|
|
133
|
+
return [getRemoveBlockMenu(editor, node, t)];
|
|
393
134
|
}
|
|
394
135
|
};
|
|
395
136
|
}
|
package/dist/patterns/LexicalEditor/plugins/ComponentPickerMenuPlugin/ComponentPickerMenuPlugin.js
CHANGED
|
@@ -14,13 +14,11 @@ import { INSERT_HORIZONTAL_RULE_COMMAND } from "@lexical/react/LexicalHorizontal
|
|
|
14
14
|
import { LexicalTypeaheadMenuPlugin, MenuOption, useBasicTypeaheadTriggerMatch, } from "@lexical/react/LexicalTypeaheadMenuPlugin";
|
|
15
15
|
import { $createHeadingNode, $createQuoteNode } from "@lexical/rich-text";
|
|
16
16
|
import { $setBlocksType } from "@lexical/selection";
|
|
17
|
-
import { INSERT_TABLE_COMMAND } from "@lexical/table";
|
|
18
17
|
import { $createParagraphNode, $getSelection, $isRangeSelection, } from "lexical";
|
|
19
18
|
import { useCallback, useMemo, useState } from "react";
|
|
20
19
|
import * as ReactDOM from "react-dom";
|
|
21
20
|
import { css as cssToClassName } from "@emotion/css";
|
|
22
21
|
import { ComponentPickerMenuList } from "./ComponentPickerMenuList";
|
|
23
|
-
import { TextIcon, H1Icon, H2Icon, H3Icon, ListUnorderedIcon, ListOrderedIcon, DoubleQuotesLIcon, CodeViewIcon, SeparatorIcon, ImageLineIcon, VideoLineIcon, InputMethodLineIcon, ListRadioIcon, LayoutColumnLineIcon, FileList2LineIcon, EmojiStickerLineIcon, File3LineIcon, } from "../../../../icons";
|
|
24
22
|
import { ZINDEX } from "../../../../utils/zIndex";
|
|
25
23
|
import { css, useTheme } from "@emotion/react";
|
|
26
24
|
import { INSERT_PROBLEM_INPUT_COMMAND } from "../ProblemInputPlugin";
|
|
@@ -37,6 +35,7 @@ import { UploadFileDialog } from "../../components/UploadFileDialog";
|
|
|
37
35
|
import { UPLOAD_FILE_COMMAND } from "../FilePlugin";
|
|
38
36
|
import { useTranslation } from "react-i18next";
|
|
39
37
|
import { getTexts } from "../../../../texts";
|
|
38
|
+
import { getComponentPickerOptions, getTableComponentPickerOption, getThemedComponentPickerOptions, } from "./componentPickerOptionUtils";
|
|
40
39
|
// import useModal from "../../hooks/useModal";
|
|
41
40
|
// import catTypingGif from "../../images/cat-typing.gif";
|
|
42
41
|
// import { INSERT_IMAGE_COMMAND, InsertImageDialog } from "../ImagesPlugin";
|
|
@@ -71,20 +70,18 @@ function getDynamicOptions(editor, queryString) {
|
|
|
71
70
|
const colOptions = tableMatch[2]
|
|
72
71
|
? [tableMatch[2]]
|
|
73
72
|
: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(String);
|
|
74
|
-
options.push(...colOptions.map((columns) =>
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
73
|
+
options.push(...colOptions.map((columns) => getTableComponentPickerOption({
|
|
74
|
+
editor,
|
|
75
|
+
rows,
|
|
76
|
+
columns,
|
|
78
77
|
})));
|
|
79
78
|
}
|
|
80
79
|
return options;
|
|
81
80
|
}
|
|
82
81
|
function getSheetContextOptions(editor, theme, t) {
|
|
83
82
|
return [
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
// eslint-disable-next-line i18next/no-literal-string
|
|
87
|
-
keywords: ["sheet select", "선택형 입력"],
|
|
83
|
+
getThemedComponentPickerOptions({
|
|
84
|
+
key: "sheet_select",
|
|
88
85
|
onSelect: () => editor.dispatchCommand(INSERT_SHEET_SELECT_COMMAND, {
|
|
89
86
|
selections: [
|
|
90
87
|
{
|
|
@@ -98,14 +95,16 @@ function getSheetContextOptions(editor, theme, t) {
|
|
|
98
95
|
selected: [],
|
|
99
96
|
allowMultipleAnswers: false,
|
|
100
97
|
}),
|
|
101
|
-
}),
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
// eslint-disable-next-line i18next/no-literal-string
|
|
105
|
-
keywords: ["self evaluation", "3단계 평가 입력"],
|
|
98
|
+
}, t, theme),
|
|
99
|
+
getThemedComponentPickerOptions({
|
|
100
|
+
key: "self_evaluation",
|
|
106
101
|
onSelect: () => editor.dispatchCommand(INSERT_SELF_EVALUATION_COMMAND, {
|
|
107
102
|
iconType: "emoji",
|
|
108
|
-
labels: [
|
|
103
|
+
labels: [
|
|
104
|
+
t("아주 잘했어요!"),
|
|
105
|
+
t("보통이에요."),
|
|
106
|
+
t("잘 모르겠어요."),
|
|
107
|
+
],
|
|
109
108
|
evaluations: [
|
|
110
109
|
{
|
|
111
110
|
question: {
|
|
@@ -115,27 +114,23 @@ function getSheetContextOptions(editor, theme, t) {
|
|
|
115
114
|
},
|
|
116
115
|
],
|
|
117
116
|
}),
|
|
118
|
-
}),
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
// eslint-disable-next-line i18next/no-literal-string
|
|
122
|
-
keywords: ["sheet short input", "단답형 입력"],
|
|
117
|
+
}, t, theme),
|
|
118
|
+
getThemedComponentPickerOptions({
|
|
119
|
+
key: "sheet_input",
|
|
123
120
|
onSelect: () => editor.dispatchCommand(INSERT_SHEET_INPUT_COMMAND, {
|
|
124
121
|
multiline: false,
|
|
125
122
|
value: "",
|
|
126
123
|
placeholder: "",
|
|
127
124
|
}),
|
|
128
|
-
}),
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
// eslint-disable-next-line i18next/no-literal-string
|
|
132
|
-
keywords: ["sheet long input", "서술형 입력"],
|
|
125
|
+
}, t, theme),
|
|
126
|
+
getThemedComponentPickerOptions({
|
|
127
|
+
key: "sheet_long_input",
|
|
133
128
|
onSelect: () => editor.dispatchCommand(INSERT_SHEET_INPUT_COMMAND, {
|
|
134
129
|
multiline: true,
|
|
135
130
|
value: "",
|
|
136
131
|
placeholder: "",
|
|
137
132
|
}),
|
|
138
|
-
}),
|
|
133
|
+
}, t, theme),
|
|
139
134
|
new ComponentDrawerOption(t("활동지 메뉴구분선"), (_jsx("div", { css: css `
|
|
140
135
|
width: 100%;
|
|
141
136
|
height: 1px;
|
|
@@ -146,10 +141,8 @@ function getSheetContextOptions(editor, theme, t) {
|
|
|
146
141
|
}
|
|
147
142
|
function getQuizContextOptions(editor, theme, t) {
|
|
148
143
|
return [
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
// eslint-disable-next-line i18next/no-literal-string
|
|
152
|
-
keywords: ["problem input", "주관식 입력"],
|
|
144
|
+
getThemedComponentPickerOptions({
|
|
145
|
+
key: "problem_input",
|
|
153
146
|
onSelect: () => editor.dispatchCommand(INSERT_PROBLEM_INPUT_COMMAND, {
|
|
154
147
|
solutions: [
|
|
155
148
|
{
|
|
@@ -163,11 +156,9 @@ function getQuizContextOptions(editor, theme, t) {
|
|
|
163
156
|
caseSensitive: false,
|
|
164
157
|
ignoreWhitespace: true,
|
|
165
158
|
}),
|
|
166
|
-
}),
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
// eslint-disable-next-line i18next/no-literal-string
|
|
170
|
-
keywords: ["problem select", "객관식 입력"],
|
|
159
|
+
}, t, theme),
|
|
160
|
+
getThemedComponentPickerOptions({
|
|
161
|
+
key: "problem_select",
|
|
171
162
|
onSelect: () => {
|
|
172
163
|
editor.dispatchCommand(INSERT_PROBLEM_SELECT_COMMAND, {
|
|
173
164
|
selections: [
|
|
@@ -183,7 +174,7 @@ function getQuizContextOptions(editor, theme, t) {
|
|
|
183
174
|
selected: [],
|
|
184
175
|
});
|
|
185
176
|
},
|
|
186
|
-
}),
|
|
177
|
+
}, t, theme),
|
|
187
178
|
new ComponentDrawerOption(t("퀴즈 메뉴구분선"), (_jsx("div", { css: css `
|
|
188
179
|
width: 100%;
|
|
189
180
|
height: 1px;
|
|
@@ -195,62 +186,46 @@ function getQuizContextOptions(editor, theme, t) {
|
|
|
195
186
|
export function getBaseOptions(props) {
|
|
196
187
|
const { editor, theme, t, setImageOpen, setVideoOpen, setFileOpen, isSheetEnabled, isQuizEnabled, showFileUpload, } = props;
|
|
197
188
|
const baseOptions = [
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
// eslint-disable-next-line i18next/no-literal-string
|
|
201
|
-
keywords: ["normal", "paragraph", "p", "text", "본문", "단락", "내용"],
|
|
189
|
+
getComponentPickerOptions({
|
|
190
|
+
key: "p",
|
|
202
191
|
onSelect: () => editor.update(() => {
|
|
203
192
|
const selection = $getSelection();
|
|
204
193
|
if ($isRangeSelection(selection)) {
|
|
205
194
|
$setBlocksType(selection, () => $createParagraphNode());
|
|
206
195
|
}
|
|
207
196
|
}),
|
|
208
|
-
}),
|
|
197
|
+
}, t),
|
|
209
198
|
...[1, 2, 3].map((n) => {
|
|
210
|
-
const
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
3: t("작은 제목", { context: "렉시컬 드롭다운 메뉴" }),
|
|
214
|
-
};
|
|
215
|
-
const iconMap = {
|
|
216
|
-
1: _jsx(H1Icon, {}),
|
|
217
|
-
2: _jsx(H2Icon, {}),
|
|
218
|
-
3: _jsx(H3Icon, {}),
|
|
219
|
-
};
|
|
220
|
-
return new ComponentPickerOption(titleMap[n], {
|
|
221
|
-
icon: iconMap[n],
|
|
222
|
-
keywords: ["heading", "header", `h${n}`, titleMap[n]],
|
|
199
|
+
const headerKey = `h${n}`;
|
|
200
|
+
return getComponentPickerOptions({
|
|
201
|
+
key: headerKey,
|
|
223
202
|
onSelect: () => editor.update(() => {
|
|
224
203
|
const selection = $getSelection();
|
|
225
204
|
if ($isRangeSelection(selection)) {
|
|
226
|
-
$setBlocksType(selection, () => $createHeadingNode(
|
|
205
|
+
$setBlocksType(selection, () => $createHeadingNode(headerKey));
|
|
227
206
|
}
|
|
228
207
|
}),
|
|
229
|
-
});
|
|
208
|
+
}, t);
|
|
230
209
|
}),
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
keywords: ["bulleted list", "unordered list", "ul"],
|
|
210
|
+
getComponentPickerOptions({
|
|
211
|
+
key: "ul",
|
|
234
212
|
onSelect: () => editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined),
|
|
235
|
-
}),
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
keywords: ["numbered list", "ordered list", "ol"],
|
|
213
|
+
}, t),
|
|
214
|
+
getComponentPickerOptions({
|
|
215
|
+
key: "ol",
|
|
239
216
|
onSelect: () => editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined),
|
|
240
|
-
}),
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
keywords: ["block quote"],
|
|
217
|
+
}, t),
|
|
218
|
+
getComponentPickerOptions({
|
|
219
|
+
key: "quote",
|
|
244
220
|
onSelect: () => editor.update(() => {
|
|
245
221
|
const selection = $getSelection();
|
|
246
222
|
if ($isRangeSelection(selection)) {
|
|
247
223
|
$setBlocksType(selection, () => $createQuoteNode());
|
|
248
224
|
}
|
|
249
225
|
}),
|
|
250
|
-
}),
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
keywords: ["javascript", "python", "js", "codeblock"],
|
|
226
|
+
}, t),
|
|
227
|
+
getComponentPickerOptions({
|
|
228
|
+
key: "code",
|
|
254
229
|
onSelect: () => editor.update(() => {
|
|
255
230
|
const selection = $getSelection();
|
|
256
231
|
if ($isRangeSelection(selection)) {
|
|
@@ -266,22 +241,19 @@ export function getBaseOptions(props) {
|
|
|
266
241
|
}
|
|
267
242
|
}
|
|
268
243
|
}),
|
|
269
|
-
}),
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
keywords: ["horizontal rule", "divider", "hr"],
|
|
244
|
+
}, t),
|
|
245
|
+
getComponentPickerOptions({
|
|
246
|
+
key: "divider",
|
|
273
247
|
onSelect: () => editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined),
|
|
274
|
-
}),
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
keywords: ["image", "photo", "picture", "file"],
|
|
248
|
+
}, t),
|
|
249
|
+
getComponentPickerOptions({
|
|
250
|
+
key: "image",
|
|
278
251
|
onSelect: () => setImageOpen(true),
|
|
279
|
-
}),
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
keywords: ["video", "movie"],
|
|
252
|
+
}, t),
|
|
253
|
+
getComponentPickerOptions({
|
|
254
|
+
key: "video",
|
|
283
255
|
onSelect: () => setVideoOpen(true),
|
|
284
|
-
}),
|
|
256
|
+
}, t),
|
|
285
257
|
];
|
|
286
258
|
// devMode, labMode 여부를 로컬스토리지에서 가져옵니다.
|
|
287
259
|
const isDevMode = localStorage.getItem("devMode") === "true";
|
|
@@ -296,19 +268,17 @@ export function getBaseOptions(props) {
|
|
|
296
268
|
}
|
|
297
269
|
// devMode || labMode이면 칼럼 컨텍스트 메뉴를 추가합니다. (일부공개)
|
|
298
270
|
if (isDevMode || isLabMode) {
|
|
299
|
-
baseOptions.push(
|
|
300
|
-
|
|
301
|
-
keywords: ["columns", "layout", "grid"],
|
|
271
|
+
baseOptions.push(getComponentPickerOptions({
|
|
272
|
+
key: "column",
|
|
302
273
|
onSelect: () => editor.dispatchCommand(INSERT_LAYOUT_COMMAND, "1fr 1fr"),
|
|
303
|
-
}));
|
|
274
|
+
}, t));
|
|
304
275
|
}
|
|
305
276
|
// showFileUpload 이면 파일블록을 추가합니다.
|
|
306
277
|
if (showFileUpload || isDevMode) {
|
|
307
|
-
baseOptions.push(
|
|
308
|
-
|
|
309
|
-
keywords: ["file", "upload"],
|
|
278
|
+
baseOptions.push(getComponentPickerOptions({
|
|
279
|
+
key: "file",
|
|
310
280
|
onSelect: () => setFileOpen(true),
|
|
311
|
-
}));
|
|
281
|
+
}, t));
|
|
312
282
|
}
|
|
313
283
|
return baseOptions;
|
|
314
284
|
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { LexicalEditor, LexicalNode } from "lexical";
|
|
2
|
+
import { ComponentPickerOption } from "./ComponentPickerMenuPlugin";
|
|
3
|
+
import { TFunction } from "i18next";
|
|
4
|
+
import { Theme } from "@emotion/react";
|
|
5
|
+
import { ColoredQuoteNode } from "../../nodes";
|
|
6
|
+
type ComponentPickerOptionKey = "p" | "h1" | "h2" | "h3" | "ul" | "ol" | "quote" | "code" | "toggle" | "divider" | "file" | "image" | "video" | "column";
|
|
7
|
+
type ThemedComponentPickerOptionKey = "sheet_select" | "sheet_input" | "sheet_long_input" | "self_evaluation" | "problem_select" | "problem_input";
|
|
8
|
+
type QuoteColorKey = "grey" | "red" | "yellow" | "blue" | "green";
|
|
9
|
+
export declare function getComponentPickerOptions(props: {
|
|
10
|
+
key: ComponentPickerOptionKey;
|
|
11
|
+
onSelect: (queryString: string) => void;
|
|
12
|
+
}, t: TFunction): ComponentPickerOption;
|
|
13
|
+
export declare function getThemedComponentPickerOptions(props: {
|
|
14
|
+
key: ThemedComponentPickerOptionKey;
|
|
15
|
+
onSelect: (queryString: string) => void;
|
|
16
|
+
}, t: TFunction, theme: Theme): ComponentPickerOption;
|
|
17
|
+
export declare function getTableComponentPickerOption(params: {
|
|
18
|
+
editor: LexicalEditor;
|
|
19
|
+
rows: string;
|
|
20
|
+
columns: string;
|
|
21
|
+
}): ComponentPickerOption;
|
|
22
|
+
export declare function getQuoteColorOptions(editor: LexicalEditor, node: ColoredQuoteNode, colorKey: QuoteColorKey, t: TFunction, theme: Theme): ComponentPickerOption;
|
|
23
|
+
export declare function getRemoveBlockMenu(editor: LexicalEditor, node: LexicalNode, t: TFunction): ComponentPickerOption;
|
|
24
|
+
export {};
|
package/dist/patterns/LexicalEditor/plugins/ComponentPickerMenuPlugin/componentPickerOptionUtils.js
ADDED
|
@@ -0,0 +1,221 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { CloseFillIcon, CodeViewIcon, DoubleQuotesLIcon, EmojiStickerLineIcon, File3LineIcon, FileList2LineIcon, H1Icon, H2Icon, H3Icon, ImageLineIcon, InputMethodLineIcon, LayoutColumnLineIcon, ListOrderedIcon, ListRadioIcon, ListUnorderedIcon, PlayList2FillIcon, SeparatorIcon, TextIcon, VideoLineIcon, } from "../../../../icons";
|
|
3
|
+
import { ComponentPickerOption } from "./ComponentPickerMenuPlugin";
|
|
4
|
+
import { css } from "@emotion/css";
|
|
5
|
+
import { INSERT_TABLE_COMMAND } from "@lexical/table";
|
|
6
|
+
import { expectNever } from "../../../../utils/types";
|
|
7
|
+
const getHeaderInfo = (key, t) => ({
|
|
8
|
+
h1: {
|
|
9
|
+
title: t("큰 제목"),
|
|
10
|
+
icon: _jsx(H1Icon, {}),
|
|
11
|
+
},
|
|
12
|
+
h2: {
|
|
13
|
+
title: t("중간 제목"),
|
|
14
|
+
icon: _jsx(H2Icon, {}),
|
|
15
|
+
},
|
|
16
|
+
h3: {
|
|
17
|
+
title: t("작은 제목"),
|
|
18
|
+
icon: _jsx(H3Icon, {}),
|
|
19
|
+
},
|
|
20
|
+
})[key];
|
|
21
|
+
export function getComponentPickerOptions(props, t) {
|
|
22
|
+
const { key, onSelect } = props;
|
|
23
|
+
switch (key) {
|
|
24
|
+
case "p":
|
|
25
|
+
return new ComponentPickerOption(t("본문"), {
|
|
26
|
+
icon: _jsx(TextIcon, {}),
|
|
27
|
+
// eslint-disable-next-line i18next/no-literal-string
|
|
28
|
+
keywords: ["normal", "paragraph", "p", "text", "본문", "단락", "내용"],
|
|
29
|
+
onSelect,
|
|
30
|
+
});
|
|
31
|
+
case "h1":
|
|
32
|
+
case "h2":
|
|
33
|
+
case "h3": {
|
|
34
|
+
const { title, icon } = getHeaderInfo(key, t);
|
|
35
|
+
return new ComponentPickerOption(title, {
|
|
36
|
+
icon,
|
|
37
|
+
keywords: ["heading", "header", key, title],
|
|
38
|
+
onSelect,
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
case "ul":
|
|
42
|
+
return new ComponentPickerOption(t("일반 목록"), {
|
|
43
|
+
icon: _jsx(ListUnorderedIcon, {}),
|
|
44
|
+
keywords: ["bulleted list", "unordered list", "ul"],
|
|
45
|
+
onSelect,
|
|
46
|
+
});
|
|
47
|
+
case "ol":
|
|
48
|
+
return new ComponentPickerOption(t("숫자 목록"), {
|
|
49
|
+
icon: _jsx(ListOrderedIcon, {}),
|
|
50
|
+
keywords: ["numbered list", "ordered list", "ol"],
|
|
51
|
+
onSelect,
|
|
52
|
+
});
|
|
53
|
+
case "quote":
|
|
54
|
+
return new ComponentPickerOption(t("인용 블록"), {
|
|
55
|
+
icon: _jsx(DoubleQuotesLIcon, {}),
|
|
56
|
+
keywords: ["block quote"],
|
|
57
|
+
onSelect,
|
|
58
|
+
});
|
|
59
|
+
case "code":
|
|
60
|
+
return new ComponentPickerOption(t("코드 블록"), {
|
|
61
|
+
icon: _jsx(CodeViewIcon, {}),
|
|
62
|
+
keywords: ["javascript", "python", "js", "codeblock"],
|
|
63
|
+
onSelect,
|
|
64
|
+
});
|
|
65
|
+
case "toggle":
|
|
66
|
+
return new ComponentPickerOption(t("토글 목록", { context: "렉시컬 드롭다운 메뉴" }), {
|
|
67
|
+
icon: _jsx(PlayList2FillIcon, {}),
|
|
68
|
+
keywords: ["toggle", "collapsible"],
|
|
69
|
+
onSelect,
|
|
70
|
+
});
|
|
71
|
+
case "divider":
|
|
72
|
+
return new ComponentPickerOption(t("구분선"), {
|
|
73
|
+
icon: _jsx(SeparatorIcon, {}),
|
|
74
|
+
keywords: ["horizontal rule", "divider", "hr"],
|
|
75
|
+
onSelect,
|
|
76
|
+
});
|
|
77
|
+
case "file":
|
|
78
|
+
return new ComponentPickerOption(t("파일 게시"), {
|
|
79
|
+
icon: _jsx(File3LineIcon, {}),
|
|
80
|
+
keywords: ["file", "upload"],
|
|
81
|
+
onSelect,
|
|
82
|
+
});
|
|
83
|
+
case "image":
|
|
84
|
+
return new ComponentPickerOption(t("이미지"), {
|
|
85
|
+
icon: _jsx(ImageLineIcon, {}),
|
|
86
|
+
keywords: ["image", "photo", "picture", "file"],
|
|
87
|
+
onSelect,
|
|
88
|
+
});
|
|
89
|
+
case "video":
|
|
90
|
+
return new ComponentPickerOption(t("동영상"), {
|
|
91
|
+
icon: _jsx(VideoLineIcon, {}),
|
|
92
|
+
keywords: ["video", "movie"],
|
|
93
|
+
onSelect,
|
|
94
|
+
});
|
|
95
|
+
case "column":
|
|
96
|
+
return new ComponentPickerOption(t("칼럼"), {
|
|
97
|
+
icon: _jsx(LayoutColumnLineIcon, {}),
|
|
98
|
+
keywords: ["columns", "layout", "grid"],
|
|
99
|
+
onSelect,
|
|
100
|
+
});
|
|
101
|
+
default:
|
|
102
|
+
expectNever(key);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
export function getThemedComponentPickerOptions(props, t, theme) {
|
|
106
|
+
const { key, onSelect } = props;
|
|
107
|
+
switch (key) {
|
|
108
|
+
case "sheet_select":
|
|
109
|
+
return new ComponentPickerOption(t("선택형 입력 칸", { context: "렉시컬 드롭다운 메뉴" }), {
|
|
110
|
+
icon: _jsx(ListRadioIcon, { color: theme.color.foreground.primary }),
|
|
111
|
+
// eslint-disable-next-line i18next/no-literal-string
|
|
112
|
+
keywords: ["sheet select", "선택형 입력"],
|
|
113
|
+
onSelect,
|
|
114
|
+
});
|
|
115
|
+
case "sheet_input":
|
|
116
|
+
return new ComponentPickerOption(t("단답형 입력 칸", { context: "렉시컬 드롭다운 메뉴" }), {
|
|
117
|
+
icon: _jsx(InputMethodLineIcon, { color: theme.color.foreground.primary }),
|
|
118
|
+
// eslint-disable-next-line i18next/no-literal-string
|
|
119
|
+
keywords: ["sheet short input", "단답형 입력"],
|
|
120
|
+
onSelect,
|
|
121
|
+
});
|
|
122
|
+
case "sheet_long_input":
|
|
123
|
+
return new ComponentPickerOption(t("서술형 입력 칸", { context: "렉시컬 드롭다운 메뉴" }), {
|
|
124
|
+
icon: _jsx(FileList2LineIcon, { color: theme.color.foreground.primary }),
|
|
125
|
+
// eslint-disable-next-line i18next/no-literal-string
|
|
126
|
+
keywords: ["sheet long input", "서술형 입력"],
|
|
127
|
+
onSelect,
|
|
128
|
+
});
|
|
129
|
+
case "self_evaluation":
|
|
130
|
+
return new ComponentPickerOption(t("3단계 평가 입력 칸"), {
|
|
131
|
+
icon: _jsx(EmojiStickerLineIcon, { color: theme.color.foreground.primary }),
|
|
132
|
+
// eslint-disable-next-line i18next/no-literal-string
|
|
133
|
+
keywords: ["self evaluation", "3단계 평가 입력"],
|
|
134
|
+
onSelect,
|
|
135
|
+
});
|
|
136
|
+
case "problem_select":
|
|
137
|
+
return new ComponentPickerOption(t("객관식 입력 칸", { context: "렉시컬 드롭다운 메뉴" }), {
|
|
138
|
+
icon: _jsx(ListRadioIcon, { color: theme.color.foreground.primary }),
|
|
139
|
+
// eslint-disable-next-line i18next/no-literal-string
|
|
140
|
+
keywords: ["problem select", "객관식 입력"],
|
|
141
|
+
onSelect,
|
|
142
|
+
});
|
|
143
|
+
case "problem_input":
|
|
144
|
+
return new ComponentPickerOption(t("주관식 입력 칸", { context: "렉시컬 드롭다운 메뉴" }), {
|
|
145
|
+
icon: _jsx(InputMethodLineIcon, { color: theme.color.foreground.primary }),
|
|
146
|
+
// eslint-disable-next-line i18next/no-literal-string
|
|
147
|
+
keywords: ["problem input", "주관식 입력"],
|
|
148
|
+
onSelect,
|
|
149
|
+
});
|
|
150
|
+
default:
|
|
151
|
+
expectNever(key);
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
export function getTableComponentPickerOption(params) {
|
|
155
|
+
const { editor, rows, columns } = params;
|
|
156
|
+
return new ComponentPickerOption(`${rows}x${columns} Table`, {
|
|
157
|
+
icon: _jsx("i", { className: "icon table" }),
|
|
158
|
+
keywords: ["table"],
|
|
159
|
+
onSelect: () => {
|
|
160
|
+
editor.dispatchCommand(INSERT_TABLE_COMMAND, { columns, rows });
|
|
161
|
+
},
|
|
162
|
+
});
|
|
163
|
+
}
|
|
164
|
+
const getColoredQuoteInfo = (key, t, theme) => ({
|
|
165
|
+
grey: {
|
|
166
|
+
title: t("회색"),
|
|
167
|
+
iconColor: theme.color.container.marbleOnContainer,
|
|
168
|
+
containerColor: theme.color.container.marbleContainer,
|
|
169
|
+
keywords: ["grey", "gray"],
|
|
170
|
+
},
|
|
171
|
+
red: {
|
|
172
|
+
title: t("빨간색"),
|
|
173
|
+
iconColor: theme.color.container.redOnContainer,
|
|
174
|
+
containerColor: theme.color.container.redContainer,
|
|
175
|
+
keywords: ["red"],
|
|
176
|
+
},
|
|
177
|
+
yellow: {
|
|
178
|
+
title: t("노란색"),
|
|
179
|
+
iconColor: theme.color.container.yellowOnContainer,
|
|
180
|
+
containerColor: theme.color.container.yellowContainer,
|
|
181
|
+
keywords: ["yellow"],
|
|
182
|
+
},
|
|
183
|
+
blue: {
|
|
184
|
+
title: t("파란색"),
|
|
185
|
+
iconColor: theme.color.container.blueOnContainer,
|
|
186
|
+
containerColor: theme.color.container.blueContainer,
|
|
187
|
+
keywords: ["blue"],
|
|
188
|
+
},
|
|
189
|
+
green: {
|
|
190
|
+
title: t("초록색"),
|
|
191
|
+
iconColor: theme.color.container.greenOnContainer,
|
|
192
|
+
containerColor: theme.color.container.greenContainer,
|
|
193
|
+
keywords: ["green"],
|
|
194
|
+
},
|
|
195
|
+
})[key];
|
|
196
|
+
export function getQuoteColorOptions(editor, node, colorKey, t, theme) {
|
|
197
|
+
const { title, iconColor, containerColor, keywords } = getColoredQuoteInfo(colorKey, t, theme);
|
|
198
|
+
return new ComponentPickerOption(title, {
|
|
199
|
+
icon: _jsx(InputMethodLineIcon, { color: iconColor }),
|
|
200
|
+
iconContainerClassName: css `
|
|
201
|
+
background: ${containerColor};
|
|
202
|
+
`,
|
|
203
|
+
keywords,
|
|
204
|
+
onSelect: () => {
|
|
205
|
+
editor.update(() => {
|
|
206
|
+
node.setColor(colorKey);
|
|
207
|
+
});
|
|
208
|
+
},
|
|
209
|
+
});
|
|
210
|
+
}
|
|
211
|
+
export function getRemoveBlockMenu(editor, node, t) {
|
|
212
|
+
return new ComponentPickerOption(t("블록 삭제"), {
|
|
213
|
+
icon: _jsx(CloseFillIcon, {}),
|
|
214
|
+
keywords: [],
|
|
215
|
+
onSelect: () => {
|
|
216
|
+
editor.update(() => {
|
|
217
|
+
node.remove();
|
|
218
|
+
});
|
|
219
|
+
},
|
|
220
|
+
});
|
|
221
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function expectNever(never: never): never;
|