@blocklet/editor 2.3.2 → 2.3.3

package/lib/ext/Alert/AlertComponent.js

@@ -28,7 +28,7 @@ export default function AlertComponent({ text, severity, onChange }) {
             setEditing(true);
         }
     };
-    return (_jsxs(Alert, { severity: severity, icon: false, sx: { '.MuiAlert-message': { width: '100%' } }, children: [!editing && (_jsx(Box, { onClick: edit, sx: { ...(!text && { height: '1em' }) }, children: text })), editing && (_jsx(Box, { component: "input", type: "text", value: value, onClick: (e) => e.stopPropagation(), onChange: (e) => setValue(e.target.value), onBlur: handleChange, onKeyDown: (e) => {
+    return (_jsxs(Alert, { severity: severity, sx: { '.MuiAlert-message': { width: '100%' } }, children: [!editing && (_jsx(Box, { onClick: edit, sx: { ...(!text && { height: '1em' }) }, children: text })), editing && (_jsx(Box, { component: "input", type: "text", value: value, onClick: (e) => e.stopPropagation(), onChange: (e) => setValue(e.target.value), onBlur: handleChange, onKeyDown: (e) => {
                     if (e.key === 'Enter') {
                         e.preventDefault();
                         e.stopPropagation();

package/lib/main/icons.d.ts

@@ -0,0 +1,3 @@
+export declare const icons: {
+    [key: string]: string;
+};

package/lib/main/icons.js

@@ -0,0 +1,25 @@
+export const icons = {
+    paragraph: 'tabler:letter-case',
+    h1: 'tabler:h-1',
+    h2: 'tabler:h-2',
+    h3: 'tabler:h-3',
+    bullet: 'tabler:list',
+    number: 'tabler:list-numbers',
+    check: 'tabler:list-details',
+    quote: 'tabler:quote',
+    code: 'tabler:code',
+    alignLeft: 'tabler:align-left',
+    alignCenter: 'tabler:align-center',
+    alignRight: 'tabler:align-right',
+    alignJustify: 'tabler:align-justified',
+    table: 'tabler:table',
+    divider: 'tabler:separator',
+    alert: 'tabler:alert-circle',
+    media: 'tabler:photo-plus',
+    template: 'tabler:template',
+    collapsible: 'tabler:layout-sidebar-right-collapse',
+    copy: 'tabler:copy',
+    copySuccess: 'tabler:check',
+    brandX: 'tabler:brand-x',
+    brandFigma: 'tabler:brand-figma',
+};

package/lib/main/images/excalidraw.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.9643 15.1993C17.9502 15.1865 17.9331 15.1775 17.9145 15.1733C17.896 15.1691 17.8767 15.1698 17.8585 15.1753C17.0221 13.937 15.9582 12.7627 14.9283 11.6285L14.7586 11.4424C14.7586 11.4204 14.7486 11.4004 14.7347 11.3824C14.7178 11.3611 14.6936 11.3468 14.6668 11.3424L14.6329 11.3064L14.6089 11.2884C14.579 11.2244 14.5031 11.1764 14.4193 11.2184C14.1039 11.3804 13.8205 11.6125 13.541 11.8265C13.1678 12.1126 12.8025 12.4107 12.4592 12.7307C12.3195 12.8608 12.1817 12.9968 12.066 13.1488C12.0101 13.2229 12.052 13.2929 12.1199 13.3229C11.8763 13.5629 11.6308 13.813 11.3853 14.0711C11.3634 14.0951 11.3514 14.1271 11.3534 14.1591C11.3554 14.1911 11.3713 14.2211 11.3973 14.2411L11.8284 14.5712C11.8284 14.5712 11.8304 14.5772 11.8344 14.5792C12.4512 15.1893 13.533 16.0355 14.6788 16.9317C14.8484 17.0658 15.0201 17.1998 15.1918 17.3338C15.2696 17.4279 15.3435 17.5219 15.4153 17.6139C15.4532 17.6639 15.5251 17.6739 15.575 17.6359C15.6009 17.6559 15.6269 17.6779 15.6528 17.6979C15.6646 17.7071 15.6781 17.7139 15.6925 17.7179C15.7069 17.7218 15.722 17.7229 15.7368 17.7211C15.7516 17.7192 15.766 17.7145 15.779 17.707C15.7919 17.6996 15.8033 17.6897 15.8125 17.6779C15.8265 17.6599 15.8325 17.6379 15.8345 17.6159C15.8425 17.6159 15.8485 17.6219 15.8544 17.6219C15.8844 17.6219 15.9163 17.6099 15.9383 17.5859L17.9702 15.3614C17.9804 15.3504 17.9882 15.3375 17.9933 15.3235C17.9984 15.3095 18.0006 15.2946 17.9999 15.2797C17.9991 15.2648 17.9954 15.2501 17.9889 15.2367C17.9825 15.2232 17.9734 15.2112 17.9623 15.2013L17.9643 15.1993ZM12.1298 14.4291C12.1438 14.4471 12.1578 14.4632 12.1717 14.4792C12.4033 14.6752 12.6508 14.8873 12.9023 15.1033L11.8803 14.3211C11.8803 14.3211 11.8165 14.2771 11.7765 14.2491C11.7546 14.2331 11.7346 14.2171 11.7147 14.2011L11.6388 14.1371C11.6388 14.1371 11.6528 14.1231 11.6588 14.1151L11.7286 14.0451C12.0719 13.697 12.6608 13.1168 12.9642 12.8328C12.6428 13.1568 11.9921 14.1071 12.1318 14.4291H12.1298ZM15.6289 17.1918L14.7866 16.5477C14.4572 16.2056 14.1019 15.8675 13.7406 15.5414C14.1957 15.8935 14.585 16.1916 14.6428 16.2436C15.084 16.6377 15.064 16.5657 15.3674 16.8257L15.7327 17.0918C15.6968 17.1238 15.6608 17.1578 15.6269 17.1898L15.6289 17.1918ZM15.8405 17.3538L15.8245 17.3418C15.8564 17.3158 15.8904 17.2918 15.9223 17.2658L15.8425 17.3538H15.8405ZM2.48097 4.29073C2.50892 4.43476 2.53487 4.57679 2.56082 4.71283C2.69854 5.453 2.82629 6.11916 3.06981 6.62528L3.16562 7.00938C3.20354 7.15541 3.25743 7.33745 3.30733 7.37546C3.87621 7.87958 4.74848 8.63176 5.68063 9.33993C5.72254 9.37194 5.78043 9.36994 5.82035 9.33793C5.82235 9.34193 5.82634 9.34393 5.82833 9.34593C5.85029 9.36594 5.87624 9.37594 5.90418 9.37594C5.93612 9.37594 5.96606 9.36394 5.98802 9.33793C7.18165 8.00761 8.06989 6.91335 8.70263 5.99713C8.74255 5.94712 8.76251 5.88911 8.76051 5.82909C8.80044 5.78108 8.84235 5.73307 8.88028 5.69306C8.89183 5.68118 8.90059 5.66686 8.90592 5.65116C8.91126 5.63546 8.91304 5.61876 8.91112 5.60228C8.90921 5.58581 8.90366 5.56996 8.89487 5.55591C8.88608 5.54185 8.87428 5.52993 8.86032 5.52102C8.85787 5.49374 8.84585 5.46822 8.82638 5.449C8.54893 5.18094 8.34334 4.98689 8.13576 4.79285C7.76848 4.44876 7.38924 4.09268 6.58483 3.29049C6.58084 3.28649 6.57485 3.28249 6.57086 3.27848C6.55865 3.26579 6.5436 3.25619 6.52695 3.25048C6.30539 3.17246 5.85029 3.09444 5.27743 2.99442C4.4351 2.85038 3.28139 2.65033 2.24345 2.34026H2.23546V2.33826C2.23546 2.33826 2.23147 2.33826 2.22947 2.34226H2.22748L2.23546 2.33826C2.23546 2.33826 2.17358 2.34026 2.16161 2.34626C2.14564 2.35426 2.13366 2.36427 2.12368 2.37627C2.1137 2.38827 2.10572 2.40028 2.02987 2.41628C1.95402 2.43228 2.04584 2.41628 2.05183 2.41628H2.02987V2.42228C2.04384 2.4903 2.03985 2.53831 2.06181 2.61633C2.05781 2.63633 2.10372 2.82038 2.10971 2.83838L2.47499 4.29073H2.48097ZM8.65872 5.59904C8.65872 5.59904 8.65273 5.60704 8.65073 5.60904L8.52299 5.46701C8.5669 5.50902 8.61081 5.55103 8.65872 5.59904ZM7.24353 7.47749C7.24353 7.47749 7.22955 7.49349 7.22356 7.50149L7.21957 7.49749C7.22756 7.49149 7.23554 7.48349 7.24552 7.47749H7.24353ZM6.43513 3.45653C6.50499 3.52654 6.78244 3.78661 6.84631 3.85062C6.55689 3.71859 5.83632 3.38251 5.50098 3.27448C5.83033 3.3325 6.28543 3.40651 6.43513 3.45653ZM2.60672 2.90239C2.77439 3.19046 2.90613 4.2007 3.03787 5.18294C2.96402 4.86686 2.90014 4.55879 2.84026 4.26272C2.73647 3.7506 2.64066 3.29249 2.50692 2.88639C2.53487 2.88839 2.5688 2.89239 2.60473 2.89639C2.60473 2.89839 2.60473 2.90039 2.60872 2.90239H2.60672ZM2.54884 2.66034C2.50293 2.65634 2.46101 2.65234 2.42508 2.65033C2.42109 2.64233 2.4191 2.63433 2.4171 2.62633L2.54884 2.66234V2.66034ZM17.7826 2.5143C17.7906 2.46829 17.5631 2.26624 17.6349 2.26224C17.8046 2.25424 17.8066 1.99218 17.6349 2.00018C17.4094 2.01218 17.1818 2.06419 16.9622 2.1062C16.567 2.18022 16.1738 2.26224 15.7806 2.34826C14.9043 2.53631 14.0301 2.73435 13.1658 2.97041C12.8943 3.04443 12.5949 3.11044 12.3454 3.24248C12.2616 3.28649 12.2656 3.37651 12.3115 3.43252C12.2935 3.44252 12.2755 3.44853 12.2556 3.45053C12.1817 3.46453 12.1079 3.47653 12.034 3.48853C12.0156 3.49149 11.9982 3.49897 11.9833 3.51032C11.9685 3.52168 11.9567 3.53654 11.949 3.55358C11.9412 3.57063 11.9379 3.58932 11.9391 3.60799C11.9404 3.62666 11.9462 3.64473 11.9562 3.66058C11.4931 4.28072 10.9661 4.94888 10.3953 5.65105C9.83438 6.2932 9.25154 6.97737 8.65473 7.67953C6.77645 9.89206 4.64668 12.4007 2.28736 14.6092C2.24145 14.6512 2.23945 14.7232 2.28137 14.7692C2.29135 14.7812 2.30532 14.7892 2.3193 14.7952C2.28736 14.8252 2.25542 14.8552 2.22349 14.8833C2.20352 14.9013 2.19554 14.9233 2.19155 14.9473C2.17558 14.9633 2.15961 14.9813 2.14564 14.9973C2.10372 15.0433 2.10572 15.1153 2.15163 15.1573C2.19754 15.1993 2.26939 15.1973 2.31131 15.1513C2.31929 15.1433 2.32728 15.1333 2.33526 15.1253C2.35093 15.1087 2.36981 15.0955 2.39074 15.0865C2.41168 15.0775 2.43423 15.0728 2.45702 15.0728C2.47981 15.0728 2.50236 15.0775 2.5233 15.0865C2.54423 15.0955 2.56311 15.1087 2.57878 15.1253C2.71651 15.2733 2.84625 15.4134 2.96801 15.5434L2.69255 15.3134C2.66948 15.2941 2.63975 15.2848 2.60983 15.2874C2.57992 15.29 2.55226 15.3044 2.53287 15.3274C2.49295 15.3754 2.49894 15.4474 2.54684 15.4874L5.50497 17.974C5.52693 17.992 5.55288 18 5.57883 18C5.60877 18 5.63671 17.988 5.65867 17.966L5.73053 17.894C5.75142 17.9034 5.77468 17.9061 5.79717 17.9018C5.81966 17.8975 5.84029 17.8864 5.85628 17.87C9.86632 13.833 13.0959 10.7823 16.7946 8.05562C16.8285 8.03162 16.8445 7.99161 16.8405 7.9536C16.8623 7.95122 16.8829 7.94258 16.8999 7.92875C16.9169 7.91491 16.9295 7.89645 16.9363 7.87558C17.6189 5.78308 17.7507 3.93064 17.7906 3.02042C17.7906 3.01442 17.7926 3.01042 17.7946 3.00642C17.7986 2.99642 17.8006 2.98641 17.8026 2.97841C17.8086 2.95641 17.8126 2.9404 17.8126 2.9404C17.8645 2.78437 17.8465 2.63433 17.7826 2.5103V2.5143ZM10.6128 5.78908C10.7925 5.58303 10.9701 5.38099 11.1458 5.18494C9.99606 6.7013 8.09184 9.03786 5.39519 11.8145C7.23155 9.77804 9.08188 7.66753 10.6128 5.78908ZM4.11573 16.3536L4.10974 16.3476C4.1317 16.3516 4.14767 16.3556 4.14966 16.3556C4.13845 16.3535 4.12695 16.3535 4.11573 16.3556V16.3536ZM5.493 17.6379L5.48302 17.6299L5.48901 17.6239C5.493 17.6239 5.49499 17.6279 5.49699 17.6279C5.49699 17.6319 5.493 17.6339 5.491 17.6379H5.493ZM7.16169 16.1956L7.43714 15.9075C7.43914 15.9095 7.44113 15.9135 7.44313 15.9175C7.34932 16.0095 7.2555 16.1035 7.15969 16.1956H7.16169ZM7.6088 15.7535C7.6607 15.6934 7.72058 15.6234 7.78246 15.5494C7.78445 15.5474 7.78645 15.5434 7.79044 15.5414C8.44714 14.8633 9.12379 14.1771 9.82241 13.4909C9.8264 13.4869 9.83239 13.4829 9.83638 13.4789C10.008 13.3469 10.1997 13.2009 10.3793 13.0628C9.47709 13.927 8.56091 14.8192 7.6088 15.7555V15.7535ZM11.9302 4.57479C11.559 5.05891 11.1518 5.68706 10.8065 6.18918C9.71662 7.77156 6.20758 11.6465 6.12973 11.7205C5.58881 12.2446 3.95804 13.813 2.91811 14.7952C2.89016 14.8212 2.86821 14.8432 2.85024 14.8653C2.8357 14.8501 2.8243 14.8322 2.81672 14.8126C2.80914 14.7929 2.80552 14.772 2.80608 14.751C2.80664 14.7299 2.81136 14.7092 2.81996 14.69C2.82857 14.6709 2.8409 14.6536 2.85623 14.6392C7.8104 9.95808 10.8164 6.05915 12.038 4.36074C12.0121 4.42676 11.9901 4.49878 11.9282 4.57879L11.9302 4.57479ZM15.2257 5.99513L15.2237 5.99913C15.2237 5.99513 15.2197 5.98513 15.2257 5.99513ZM13.8684 6.85934C13.4173 6.59728 13.2057 6.20518 13.3275 5.80909L13.3654 5.67706C13.3813 5.63905 13.3993 5.60104 13.4213 5.56303C13.539 5.36698 13.7187 5.19294 13.9243 5.09092C13.9343 5.08692 13.9442 5.08492 13.9542 5.08292C13.9437 5.05553 13.9409 5.02576 13.9462 4.99689C13.9562 4.93488 13.9961 4.88087 14.078 4.88087C14.2117 4.88087 14.6269 5.0049 14.7846 5.14093C14.8325 5.17894 14.8784 5.22095 14.9203 5.26696C14.9802 5.33698 15.068 5.451 15.1119 5.53302C15.1379 5.54503 15.1578 5.65705 15.1878 5.71507C15.2157 5.80709 15.2277 5.90111 15.2237 5.99513C15.2237 5.99913 15.2237 5.99913 15.2257 6.00113C15.2197 6.01514 15.2257 6.07515 15.2177 6.08115C15.1977 6.22519 15.1458 6.36722 15.068 6.49125C15.06 6.50125 15.054 6.51326 15.046 6.52326C15.046 6.52526 15.0421 6.52726 15.0401 6.53126C14.9802 6.61728 14.9103 6.6973 14.8245 6.75731C14.573 6.93536 14.2796 6.98937 13.9861 6.91535C13.9474 6.90056 13.9095 6.88387 13.8724 6.86534L13.8684 6.85934ZM17.1159 6.53326C17.0181 6.94336 16.8984 7.37146 16.7566 7.80957C16.7507 7.82557 16.7507 7.84157 16.7507 7.85558C16.7307 7.85758 16.7127 7.86558 16.6968 7.87758C15.8105 8.52974 14.9542 9.2019 14.1059 9.90006C14.8385 9.23591 15.581 8.57575 16.3475 7.90959C16.5695 7.71616 16.7183 7.45192 16.7686 7.16141L16.8804 6.48725L16.8864 6.46725C16.9363 6.32521 17.1539 6.38723 17.1199 6.53326H17.1159Z" fill="#71717B" style="fill:#71717B;fill:color(display-p3 0.4431 0.4431 0.4824);fill-opacity:1;"/>
+</svg>

package/lib/main/index.css

@@ -138,7 +138,7 @@
   list-style: none;
   margin: 0;
   border-radius: 8px;
-  max-height: 200px;
+  max-height: 280px;
   overflow-y: scroll;
 }
 
@@ -149,6 +149,7 @@
 .typeahead-popover ul {
   -ms-overflow-style: none;
   scrollbar-width: none;
+  padding: 8px 0;
 }
 
 .typeahead-popover ul li {
@@ -157,7 +158,6 @@
   font-size: 14px;
   outline: none;
   cursor: pointer;
-  border-radius: 8px;
 }
 
 .typeahead-popover ul li.selected {
@@ -176,7 +176,6 @@
   flex-direction: row;
   flex-shrink: 0;
   background-color: #fff;
-  border-radius: 8px;
   border: 0;
 }
 
@@ -187,14 +186,6 @@
   background-size: contain;
 }
 
-.typeahead-popover li:first-child {
-  border-radius: 8px 8px 0px 0px;
-}
-
-.typeahead-popover li:last-child {
-  border-radius: 0px 0px 8px 8px;
-}
-
 .typeahead-popover li:hover {
   background-color: #eee;
 }
@@ -472,7 +463,6 @@ i.prettier-error {
 }
 
 .dropdown .item {
-  margin: 0 8px 0 8px;
   padding: 8px;
   color: #050505;
   cursor: pointer;
@@ -484,7 +474,6 @@ i.prettier-error {
   flex-shrink: 0;
   justify-content: space-between;
   background-color: #fff;
-  border-radius: 8px;
   border: 0;
   max-width: 250px;
   min-width: 100px;
@@ -1344,3 +1333,10 @@ li.embed-option-disabled > span:after {
 .inline-translation-node-inline > * {
   border-bottom: 2px dashed #3890f9;
 }
+
+.bg-excalidraw {
+  background-image: url(images/excalidraw.svg);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}

package/lib/main/markdown-editor/plugins/ToolbarPlugin.js

@@ -138,7 +138,7 @@ function BlockFormatDropDown({ editor, blockType, disabled = false, }) {
         }
     };
     const icons = {
-        paragraph: 'tabler:align-justified',
+        paragraph: 'tabler:letter-case',
         h1: 'tabler:h-1',
         h2: 'tabler:h-2',
         h3: 'tabler:h-3',

package/lib/main/plugins/AutoEmbedPlugin/index.d.ts

@@ -13,6 +13,7 @@ export interface PlaygroundEmbedConfig extends EmbedConfig {
     exampleUrl: string;
     keywords: Array<string>;
     description?: string;
+    skipDefaultEmbedOption?: boolean;
 }
 export declare const YoutubeEmbedConfig: PlaygroundEmbedConfig;
 export declare const TwitterEmbedConfig: PlaygroundEmbedConfig;

package/lib/main/plugins/AutoEmbedPlugin/index.js

@@ -30,6 +30,7 @@ import { $createEmojiNode } from '../../nodes/EmojiNode';
 import { useEditorConfig } from '../../../config';
 import { fetchOpenGraphInfo } from '../../../ext/utils';
 import createPortal from '../../../components/createPortal';
+import { icons } from '../../icons';
 export const YoutubeEmbedConfig = {
     contentName: 'Youtube Video',
     exampleUrl: 'https://www.youtube.com/watch?v=jNQXAC9IVRw',
@@ -55,10 +56,10 @@ export const YoutubeEmbedConfig = {
 };
 export const TwitterEmbedConfig = {
     // e.g. Tweet or Google Map.
-    contentName: 'Tweet',
+    contentName: 'X',
     exampleUrl: 'https://twitter.com/jack/status/20',
     // Icon for display.
-    icon: _jsx("i", { className: "iconify", "data-icon": "mdi:twitter" }),
+    icon: _jsx("i", { className: "iconify", "data-icon": icons.brandX }),
     // Create the Lexical embed node from the url data.
     insertNode: (editor, result) => {
         editor.dispatchCommand(INSERT_TWEET_COMMAND, result.id);
@@ -79,9 +80,9 @@ export const TwitterEmbedConfig = {
     type: 'tweet',
 };
 export const FigmaEmbedConfig = {
-    contentName: 'Figma Document',
+    contentName: 'Figma',
     exampleUrl: 'https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File',
-    icon: _jsx("i", { className: "iconify", "data-icon": "ph:figma-logo-bold" }),
+    icon: _jsx("i", { className: "iconify", "data-icon": icons.brandFigma }),
     insertNode: (editor, result) => {
         editor.dispatchCommand(INSERT_FIGMA_COMMAND, result.id);
     },
@@ -100,10 +101,10 @@ export const FigmaEmbedConfig = {
     type: 'figma',
 };
 export const GithubConfig = {
-    contentName: '',
+    contentName: 'GitHub',
     exampleUrl: 'https://github.com/blocklet/discuss-kit/pull/722',
     // Icon for display.
-    icon: _jsx("i", { className: "iconify", "data-icon": "mdi:github" }),
+    icon: _jsx("i", { className: "iconify", "data-icon": "tabler:brand-github" }),
     // Create the Lexical embed node from the url data.
     insertNode: (editor, result) => { },
     // For extra searching.
@@ -123,6 +124,7 @@ export const GithubConfig = {
             return null;
         }
     }, 'github'),
+    skipDefaultEmbedOption: true,
     type: 'github',
 };
 const LinkFallbackConfig = {
@@ -137,6 +139,7 @@ const LinkFallbackConfig = {
         }
         return { id: text, url: text };
     },
+    skipDefaultEmbedOption: true,
     type: 'link-fallback',
 };
 export const EmbedConfigs = [
@@ -224,7 +227,7 @@ export default function AutoEmbedPlugin() {
             new AutoEmbedOption('Dismiss', {
                 onSelect: dismissFn,
             }),
-            ...(activeEmbedConfig.contentName
+            ...(activeEmbedConfig.skipDefaultEmbedOption !== true
                 ? [
                     new AutoEmbedOption(`Embed ${activeEmbedConfig.contentName}`, {
                         onSelect: embedFn,

package/lib/main/plugins/CodeActionMenuPlugin/components/CopyButton/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -9,7 +9,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { $isCodeNode } from '@lexical/code';
 import { $getNearestNodeFromDOMNode, $getSelection, $setSelection } from 'lexical';
 import { useState } from 'react';
+import { Box } from '@mui/material';
 import { useDebounce } from '../../utils';
+import { icons } from '../../../../icons';
 export function CopyButton({ editor, getCodeDOMNode }) {
     const [isCopyCompleted, setCopyCompleted] = useState(false);
     const removeSuccessIcon = useDebounce(() => {
@@ -38,5 +40,5 @@ export function CopyButton({ editor, getCodeDOMNode }) {
             console.error('Failed to copy: ', err);
         }
     }
-    return (_jsx("button", { className: "menu-item", onClick: handleClick, "aria-label": "copy", children: isCopyCompleted ? _jsx("i", { className: "format success" }) : _jsx("i", { className: "format copy" }) }));
+    return (_jsxs(_Fragment, { children: [_jsx("button", { className: "menu-item", onClick: handleClick, "aria-label": "copy", style: { display: isCopyCompleted ? 'none' : 'inline-block' }, children: _jsx(Box, { component: "i", className: "iconify", "data-icon": icons.copy, "data-height": 20 }) }), _jsx("button", { className: "menu-item", "aria-label": "copy", style: { display: isCopyCompleted ? 'inline-block' : 'none' }, children: _jsx(Box, { component: "i", className: "iconify", "data-icon": icons.copySuccess, "data-height": 20 }) })] }));
 }

package/lib/main/plugins/CodeActionMenuPlugin/index.css

@@ -22,7 +22,7 @@
   flex-shrink: 0;
   display: flex;
   align-items: center;
-  color: rgba(0, 0, 0, 0.5);
+  color: #fff;
   text-transform: uppercase;
 }
 
@@ -41,6 +41,6 @@
 }
 
 .code-action-menu-container button.menu-item:active {
-  background-color: rgba(223, 232, 250);
-  border: 1px solid rgba(0, 0, 0, 0.45);
+  /* background-color: rgba(223, 232, 250);
+  border: 1px solid rgba(0, 0, 0, 0.45); */
 }

package/lib/main/plugins/CodeActionMenuPlugin/index.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import './index.css';
-import { $isCodeNode, CodeNode, getLanguageFriendlyName } from '@lexical/code';
+import { $isCodeNode, CodeNode } from '@lexical/code';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { $getNearestNodeFromDOMNode, isHTMLElement } from 'lexical';
 import { useEffect, useRef, useState } from 'react';
@@ -82,15 +82,14 @@ function CodeActionMenuContainer({ anchorElem }) {
             setShouldListenMouseMove(codeSetRef.current.size > 0);
         }, { skipInitialization: false });
     }, [editor]);
-    const codeFriendlyName = getLanguageFriendlyName(lang);
     return (
     // eslint-disable-next-line react/jsx-no-useless-fragment
-    _jsx(_Fragment, { children: isShown ? (_jsxs("div", { className: "code-action-menu-container", style: { ...position }, children: [_jsx("div", { className: "code-highlight-language", children: codeFriendlyName }), _jsx(CopyButton, { editor: editor, getCodeDOMNode: getCodeDOMNode })] })) : null }));
+    _jsx(_Fragment, { children: isShown ? (_jsx("div", { className: "code-action-menu-container", style: { ...position }, children: _jsx(CopyButton, { editor: editor, getCodeDOMNode: getCodeDOMNode }) })) : null }));
 }
 function getMouseInfo(event) {
     const { target } = event;
     if (isHTMLElement(target)) {
-        const codeDOMNode = target.closest('code.PlaygroundEditorTheme__code');
+        const codeDOMNode = target.closest('code');
         const isOutside = !(codeDOMNode || target.closest('div.code-action-menu-container'));
         return { codeDOMNode, isOutside };
     }

package/lib/main/plugins/ComponentPickerPlugin/index.js

@@ -1,12 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-import styled from '@emotion/styled';
 import { $createCodeNode } from '@lexical/code';
 import { INSERT_CHECK_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from '@lexical/list';
 import { INSERT_EMBED_COMMAND } from '@lexical/react/LexicalAutoEmbedPlugin';
@@ -37,6 +29,7 @@ import { INSERT_PDF_COMMAND, isPdf } from '../../../ext/PdfPlugin';
 import { INSERT_FILE_COMMAND } from '../../../ext/FilePlugin';
 import { $insertSubpageListing } from '../../../ext/SubpageListingPlugin/SubpageListingPlugin';
 import { INSERT_PAGES_KIT_COMPONENT_COMMAND, usePagesKitComponents, } from '../../../ext/PagesKitComponent/PagesKitComponentPlugin';
+import { icons } from '../../icons';
 class ComponentPickerOption extends TypeaheadOption {
     // What shows up in the editor
     title;
@@ -62,7 +55,17 @@ function ComponentPickerMenuItem({ index, isSelected, onClick, onMouseEnter, opt
     if (isSelected) {
         className += ' selected';
     }
-    return (_jsxs("li", { tabIndex: -1, className: className, ref: option.setRefElement, role: "option", "aria-selected": isSelected, id: `typeahead-item-${index}`, onMouseEnter: onMouseEnter, onClick: onClick, children: [option.icon, _jsx("span", { className: "text", children: option.title })] }, option.key));
+    return (_jsxs(Box, { component: "li", tabIndex: -1, className: className, ref: option.setRefElement, role: "option", "aria-selected": isSelected, id: `typeahead-item-${index}`, onMouseEnter: onMouseEnter, onClick: onClick, sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            svg: {
+                width: '1em',
+                height: '1em',
+                fontSize: 20,
+                color: 'text.secondary',
+            },
+        }, children: [option.icon, _jsx("span", { className: "text", children: option.title })] }, option.key));
 }
 export const INSERT_COMPONENT_COMMAND = createCommand('INSERT_COMPONENT_COMMAND');
 export default function ComponentPickerMenuPlugin() {
@@ -112,7 +115,7 @@ export default function ComponentPickerMenuPlugin() {
         const baseOptions = [
             !minimalMode &&
                 new ComponentPickerOption('Paragraph', {
-                    icon: _jsx("i", { className: "iconify", "data-icon": "bi:text-paragraph" }),
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons.paragraph }),
                     keywords: ['normal', 'paragraph', 'p', 'text'],
                     onSelect: () => editor.update(() => {
                         const selection = $getSelection();
@@ -145,7 +148,7 @@ export default function ComponentPickerMenuPlugin() {
             //   }),
             ...(hasNodes('heading') && !minimalMode
                 ? Array.from({ length: 3 }, (_, i) => i + 1).map((n) => new ComponentPickerOption(`Heading ${n}`, {
-                    icon: _jsx("i", { className: "iconify", "data-icon": `mdi:format-heading-${n}` }),
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons[`h${n}`] }),
                     keywords: ['heading', 'header', `h${n}`],
                     onSelect: () => editor.update(() => {
                         const selection = $getSelection();
@@ -160,35 +163,35 @@ export default function ComponentPickerMenuPlugin() {
             hasNodes('table') &&
                 !minimalMode &&
                 new ComponentPickerOption('Table', {
-                    icon: _jsx("i", { className: "iconify", "data-icon": "mdi:table" }),
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons.table }),
                     keywords: ['table'],
                     onSelect: () => showModal('Insert Table', (onClose) => _jsx(InsertTableDialog, { activeEditor: editor, onClose: onClose })),
                 }),
             hasNodes('list', 'listitem') &&
                 !minimalMode &&
                 new ComponentPickerOption('Numbered List', {
-                    icon: _jsx("i", { className: "iconify", "data-icon": "mdi:format-list-numbered" }),
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons.number }),
                     keywords: ['numbered list', 'ordered list', 'ol'],
                     onSelect: () => editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined),
                 }),
             hasNodes('list', 'listitem') &&
                 !minimalMode &&
                 new ComponentPickerOption('Bulleted List', {
-                    icon: _jsx("i", { className: "iconify", "data-icon": "mdi:format-list-bulleted" }),
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons.bullet }),
                     keywords: ['bulleted list', 'unordered list', 'ul'],
                     onSelect: () => editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined),
                 }),
             hasNodes('list', 'listitem') &&
                 !minimalMode &&
                 new ComponentPickerOption('Check List', {
-                    icon: _jsx("i", { className: "iconify", "data-icon": "mdi:format-list-checkbox" }),
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons.check }),
                     keywords: ['check list', 'todo list'],
                     onSelect: () => editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined),
                 }),
             !minimalMode &&
                 hasNodes('quote') &&
                 new ComponentPickerOption('Quote', {
-                    icon: _jsx("i", { className: "iconify", "data-icon": "mdi:comment-quote-outline" }),
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons.quote }),
                     keywords: ['block quote'],
                     onSelect: () => editor.update(() => {
                         const selection = $getSelection();
@@ -200,34 +203,34 @@ export default function ComponentPickerMenuPlugin() {
             !minimalMode &&
                 hasNodes('alert') &&
                 new ComponentPickerOption('Alert (Warning)', {
-                    icon: _jsx("i", { className: "iconify", "data-icon": "ic:outline-info" }),
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons.alert }),
                     keywords: ['alert', 'warning'],
                     onSelect: () => $insertAlert(editor, 'warning'),
                 }),
             !minimalMode &&
                 hasNodes('alert') &&
                 new ComponentPickerOption('Alert (Success)', {
-                    icon: _jsx("i", { className: "iconify", "data-icon": "ic:outline-info" }),
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons.alert }),
                     keywords: ['alert', 'success'],
                     onSelect: () => $insertAlert(editor, 'success'),
                 }),
             !minimalMode &&
                 hasNodes('alert') &&
                 new ComponentPickerOption('Alert (Info)', {
-                    icon: _jsx("i", { className: "iconify", "data-icon": "ic:outline-info" }),
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons.alert }),
                     keywords: ['alert', 'info'],
                     onSelect: () => $insertAlert(editor, 'info'),
                 }),
             !minimalMode &&
                 hasNodes('alert') &&
                 new ComponentPickerOption('Alert (Error)', {
-                    icon: _jsx("i", { className: "iconify", "data-icon": "ic:outline-info" }),
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons.alert }),
                     keywords: ['alert', 'error'],
                     onSelect: () => $insertAlert(editor, 'error'),
                 }),
             hasNodes('code') &&
                 new ComponentPickerOption('Code', {
-                    icon: _jsx("i", { className: "iconify", "data-icon": "mdi:code-tags" }),
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons.code }),
                     keywords: ['javascript', 'python', 'js', 'codeblock'],
                     onSelect: () => editor.update(() => {
                         const selection = $getSelection();
@@ -248,14 +251,14 @@ export default function ComponentPickerMenuPlugin() {
             !minimalMode &&
                 hasNodes('horizontalrule') &&
                 new ComponentPickerOption('Divider', {
-                    icon: _jsx("i", { className: "iconify", "data-icon": "mdi:border-horizontal" }),
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons.divider }),
                     keywords: ['horizontal rule', 'divider', 'hr'],
                     onSelect: () => editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined),
                 }),
             !minimalMode &&
                 hasNodes('excalidraw') &&
                 new ComponentPickerOption('Excalidraw', {
-                    icon: _jsx("i", { className: "iconify", "data-icon": "mdi:graph-outline" }),
+                    icon: (_jsx(Box, { component: "span", className: "bg-excalidraw", sx: { display: 'inline-block', width: 20, height: 20 } })),
                     keywords: ['excalidraw', 'diagram', 'drawing'],
                     onSelect: () => editor.dispatchCommand(INSERT_EXCALIDRAW_COMMAND, undefined),
                 }),
@@ -270,7 +273,7 @@ export default function ComponentPickerMenuPlugin() {
             hasNodes('image') &&
                 hasUploader &&
                 new ComponentPickerOption(isExistAiKit() ? 'Media (Support AI)' : 'Media', {
-                    icon: _jsx("i", { className: "iconify", "data-icon": "mdi:file-image-plus" }),
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons.media }),
                     keywords: ['image', 'photo', 'picture', 'file', 'video', 'media', 'pdf'],
                     onSelect: () => {
                         uploadFile(editor);
@@ -278,7 +281,7 @@ export default function ComponentPickerMenuPlugin() {
                 }),
             !minimalMode &&
                 new ComponentPickerOption('Templates', {
-                    icon: _jsx("i", { className: "iconify", "data-icon": "tabler:template" }),
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons.template }),
                     keywords: ['templates'],
                     onSelect: () => {
                         editor.dispatchCommand(INSERT_TEMPLATE_COMMAND, undefined);
@@ -287,14 +290,14 @@ export default function ComponentPickerMenuPlugin() {
             !minimalMode &&
                 hasNodes('collapsible-container') &&
                 new ComponentPickerOption('Collapsible', {
-                    icon: _jsx("i", { className: "iconify", "data-icon": "bi:caret-right-fill" }),
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons.collapsible }),
                     keywords: ['collapse', 'collapsible', 'toggle'],
                     onSelect: () => editor.dispatchCommand(INSERT_COLLAPSIBLE_COMMAND, undefined),
                 }),
             ...(minimalMode
                 ? []
                 : ['left', 'center', 'right', 'justify'].map((alignment) => new ComponentPickerOption(`Align ${alignment}`, {
-                    icon: _jsx("i", { className: "iconify", "data-icon": `mdi:format-align-${alignment}` }),
+                    icon: (_jsx("i", { className: "iconify", "data-icon": icons[`align${alignment.charAt(0).toUpperCase() + alignment.slice(1)}`] })),
                     keywords: ['align', 'justify', alignment],
                     onSelect: () => 
                     // @ts-ignore Correct types, but since they're dynamic TS doesn't like it.
@@ -370,7 +373,7 @@ export default function ComponentPickerMenuPlugin() {
     }, [editor]);
     return (_jsxs(_Fragment, { children: [modal, _jsx(LexicalTypeaheadMenuPlugin, { onQueryChange: setQueryString, onSelectOption: onSelectOption, triggerFn: checkForTriggerMatch, options: options, menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
                     return anchorElementRef.current && options.length
-                        ? createPortal(_jsx("div", { className: "typeahead-popover component-picker-menu", children: _jsx(List, { children: options.map((option, i) => (_jsx(ComponentPickerMenuItem, { index: i, isSelected: selectedIndex === i, onClick: () => {
+                        ? createPortal(_jsx("div", { className: "typeahead-popover component-picker-menu", children: _jsx("ul", { children: options.map((option, i) => (_jsx(ComponentPickerMenuItem, { index: i, isSelected: selectedIndex === i, onClick: () => {
                                         setHighlightedIndex(i);
                                         selectOptionAndCleanUp(option);
                                     }, onMouseEnter: () => {
@@ -435,15 +438,3 @@ export const uploadFile = (editor) => {
         throw new Error('Missing required `window.uploaderRef`');
     }
 };
-const List = styled.ul `
-  > li {
-    display: flex;
-    align-items: center;
-
-    .iconify {
-      font-size: 16px;
-      width: 20px;
-      opacity: 0.6;
-    }
-  }
-`;

package/lib/main/plugins/ToolbarPlugin/index.js

@@ -122,7 +122,7 @@ function BlockFormatDropDown({ editor, blockType, disabled = false, }) {
         }
     };
     const icons = {
-        paragraph: 'tabler:align-justified',
+        paragraph: 'tabler:letter-case',
         h1: 'tabler:h-1',
         h2: 'tabler:h-2',
         h3: 'tabler:h-3',
@@ -389,7 +389,7 @@ export default function ToolbarPlugin() {
             }
             case 'strikethrough': {
                 if (blockType !== 'code') {
-                    menus.push(_jsxs(DropDown, { disabled: !isEditable, buttonClassName: "toolbar-item spaced text-format-additional", buttonLabel: "", buttonAriaLabel: "Formatting options for additional text styles", buttonIconData: "tabler:letter-case", buttonIconClassName: "iconify", children: [_jsxs(DropDownItem, { onClick: () => {
+                    menus.push(_jsxs(DropDown, { disabled: !isEditable, buttonClassName: "toolbar-item spaced text-format-additional", buttonLabel: "", buttonAriaLabel: "Formatting options for additional text styles", buttonIconData: "tabler:adjustments", buttonIconClassName: "iconify", children: [_jsxs(DropDownItem, { onClick: () => {
                                     activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
                                 }, className: `item ${dropDownActiveClass(isStrikethrough)}`, title: "Strikethrough", "aria-label": "Format text with a strikethrough", children: [_jsx("i", { className: "iconify", "data-icon": "tabler:strikethrough" }), _jsx("span", { className: "text", children: "Strikethrough" })] }), _jsxs(DropDownItem, { onClick: () => {
                                     activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'subscript');

package/lib/main/themes/customTheme.js

@@ -227,6 +227,28 @@ const createCustomTheme = (theme) => {
         }
       }
     }
+  `;
+    const code = css `
+    background-color: #18181b;
+    color: #fff;
+    font-family: Menlo, Consolas, Monaco, monospace;
+    display: block;
+    padding: 16px;
+    line-height: 1.53;
+    font-size: 13px;
+    margin: 0;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    tab-size: 2;
+    /* white-space: pre; */
+    overflow-x: auto;
+    position: relative;
+    border-radius: 8px;
+    border: 1px solid #27272;
+
+    &:before {
+      display: none;
+    }
   `;
     /**
      * 基于 mui theme 的自定义主题
@@ -266,6 +288,7 @@ const createCustomTheme = (theme) => {
             focus: alertFocus,
         },
         image: `${defaultTheme.image} ${image}`,
+        code,
     };
     return customTheme;
 };

package/lib/main/themes/defaultTheme.js

@@ -452,28 +452,28 @@ const nestedListItem = css `
   }
 `;
 const tokenComment = css `
-  color: slategray;
+  color: #6a9955;
 `;
 const tokenPunctuation = css `
-  color: #999;
+  color: #d4d4d4;
 `;
 const tokenProperty = css `
-  color: #905;
+  color: #9cdcfe;
 `;
 const tokenSelector = css `
-  color: #690;
+  color: #d7ba7d;
 `;
 const tokenOperator = css `
-  color: #9a6e3a;
+  color: #d4d4d4;
 `;
 const tokenAttr = css `
-  color: #07a;
+  color: #9cdcfe;
 `;
 const tokenVariable = css `
-  color: #e90;
+  color: #9cdcfe;
 `;
 const tokenFunction = css `
-  color: #dd4a68;
+  color: #dcdcaa;
 `;
 const mark = css `
   background: rgba(255, 212, 0, 0.14);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "main": "lib/index.js",
   "publishConfig": {
     "access": "public"
@@ -68,7 +68,7 @@
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
-    "@blocklet/pdf": "^2.3.2"
+    "@blocklet/pdf": "^2.3.3"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",