@strapi/content-manager 5.5.2 → 5.7.0-beta.0

package/dist/_chunks/{Field-B9ADaInZ.js → Field-vX6JQNBo.js}

@@ -5,9 +5,9 @@ const strapiAdmin = require("@strapi/admin/strapi-admin");
 const designSystem = require("@strapi/design-system");
 const pipe$1 = require("lodash/fp/pipe");
 const reactIntl = require("react-intl");
-const index = require("./index-BlX-OdHL.js");
+const index = require("./index-DxfsPVeu.js");
 const fractionalIndexing = require("fractional-indexing");
-const Relations = require("./Relations-xtKZHtTN.js");
+const Relations = require("./Relations-DhF1xMOX.js");
 const Icons = require("@strapi/icons");
 const styledComponents = require("styled-components");
 const ComponentIcon = require("./ComponentIcon-CRbtQEUV.js");
@@ -17,6 +17,57 @@ const objects = require("./objects-BcXOv6_9.js");
 const slate = require("slate");
 const slateHistory = require("slate-history");
 const slateReact = require("slate-react");
+const Prism = require("prismjs");
+require("prismjs/themes/prism-solarizedlight.css");
+require("prismjs/components/prism-asmatmel");
+require("prismjs/components/prism-bash");
+require("prismjs/components/prism-basic");
+require("prismjs/components/prism-c");
+require("prismjs/components/prism-clojure");
+require("prismjs/components/prism-cobol");
+require("prismjs/components/prism-cpp");
+require("prismjs/components/prism-csharp");
+require("prismjs/components/prism-dart");
+require("prismjs/components/prism-docker");
+require("prismjs/components/prism-elixir");
+require("prismjs/components/prism-erlang");
+require("prismjs/components/prism-fortran");
+require("prismjs/components/prism-fsharp");
+require("prismjs/components/prism-go");
+require("prismjs/components/prism-graphql");
+require("prismjs/components/prism-groovy");
+require("prismjs/components/prism-haskell");
+require("prismjs/components/prism-haxe");
+require("prismjs/components/prism-ini");
+require("prismjs/components/prism-java");
+require("prismjs/components/prism-javascript");
+require("prismjs/components/prism-jsx");
+require("prismjs/components/prism-json");
+require("prismjs/components/prism-julia");
+require("prismjs/components/prism-kotlin");
+require("prismjs/components/prism-latex");
+require("prismjs/components/prism-lua");
+require("prismjs/components/prism-markdown");
+require("prismjs/components/prism-matlab");
+require("prismjs/components/prism-makefile");
+require("prismjs/components/prism-objectivec");
+require("prismjs/components/prism-perl");
+require("prismjs/components/prism-php");
+require("prismjs/components/prism-powershell");
+require("prismjs/components/prism-python");
+require("prismjs/components/prism-r");
+require("prismjs/components/prism-ruby");
+require("prismjs/components/prism-rust");
+require("prismjs/components/prism-sas");
+require("prismjs/components/prism-scala");
+require("prismjs/components/prism-scheme");
+require("prismjs/components/prism-sql");
+require("prismjs/components/prism-stata");
+require("prismjs/components/prism-swift");
+require("prismjs/components/prism-typescript");
+require("prismjs/components/prism-tsx");
+require("prismjs/components/prism-vbnet");
+require("prismjs/components/prism-yaml");
 const useDebounce = require("./useDebounce-CtcjDB3L.js");
 const Toolbar = require("@radix-ui/react-toolbar");
 const reactRouterDom = require("react-router-dom");
@@ -55,6 +106,7 @@ function _interopNamespace(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespace(React);
 const pipe__default = /* @__PURE__ */ _interopDefault(pipe$1);
+const Prism__namespace = /* @__PURE__ */ _interopNamespace(Prism);
 const Toolbar__namespace = /* @__PURE__ */ _interopNamespace(Toolbar);
 const CodeMirror__default = /* @__PURE__ */ _interopDefault(CodeMirror);
 const sanitizeHtml__default = /* @__PURE__ */ _interopDefault(sanitizeHtml);
@@ -196,7 +248,8 @@ const useLazyComponents = (componentUids = []) => {
 const codeLanguages = [
   {
     value: "asm",
-    label: "Assembly"
+    label: "Assembly",
+    decorate: "asmatmel"
   },
   {
     value: "bash",
@@ -232,7 +285,8 @@ const codeLanguages = [
   },
   {
     value: "dockerfile",
-    label: "Dockerfile"
+    label: "Dockerfile",
+    decorate: "docker"
   },
   {
     value: "elixir",
@@ -388,7 +442,8 @@ const codeLanguages = [
   },
   {
     value: "typescript",
-    label: "TypeScript"
+    label: "TypeScript",
+    decorate: "ts"
   },
   {
     value: "tsx",
@@ -404,7 +459,8 @@ const codeLanguages = [
   },
   {
     value: "yaml",
-    label: "YAML"
+    label: "YAML",
+    decorate: "yml"
   }
 ];
 const baseHandleConvert = (editor, attributesToSet) => {
@@ -470,6 +526,29 @@ const pressEnterTwiceToExit = (editor) => {
     });
   }
 };
+const decorateCode = ([node, path]) => {
+  const ranges = [];
+  if (!slate.Element.isElement(node) || node.type !== "code") return ranges;
+  const text = slate.Node.string(node);
+  const language = codeLanguages.find((lang) => lang.value === node.language);
+  const decorateKey = language?.decorate ?? language?.value;
+  const selectedLanguage = Prism__namespace.languages[decorateKey || "plaintext"];
+  const tokens = Prism__namespace.tokenize(text, selectedLanguage);
+  let start = 0;
+  for (const token of tokens) {
+    const length = token.length;
+    const end = start + length;
+    if (typeof token !== "string") {
+      ranges.push({
+        anchor: { path, offset: start },
+        focus: { path, offset: end },
+        className: `token ${token.type}`
+      });
+    }
+    start = end;
+  }
+  return ranges;
+};
 const CodeBlock = styledComponents.styled.pre`
   border-radius: ${({ theme }) => theme.borderRadius};
   background-color: ${({ theme }) => theme.colors.neutral100};
@@ -554,8 +633,7 @@ const codeBlocks = {
     handleEnterKey(editor) {
       pressEnterTwiceToExit(editor);
     },
-    snippets: ["```"],
-    dragHandleTopMargin: "10px"
+    snippets: ["```"]
   }
 };
 const H1 = styledComponents.styled(designSystem.Typography).attrs({ tag: "h1" })`
@@ -1334,13 +1412,13 @@ const quoteBlocks = {
     handleEnterKey(editor) {
       pressEnterTwiceToExit(editor);
     },
-    snippets: [">"],
-    dragHandleTopMargin: "6px"
+    snippets: [">"]
   }
 };
 const ToolbarWrapper = styledComponents.styled(designSystem.Flex)`
   &[aria-disabled='true'] {
     cursor: not-allowed;
+    background: ${({ theme }) => theme.colors.neutral150};
   }
 `;
 const Separator = styledComponents.styled(Toolbar__namespace.Separator)`
@@ -1351,7 +1429,7 @@ const Separator = styledComponents.styled(Toolbar__namespace.Separator)`
 const FlexButton = styledComponents.styled(designSystem.Flex)`
   // Inherit the not-allowed cursor from ToolbarWrapper when disabled
   &[aria-disabled] {
-    cursor: inherit;
+    cursor: not-allowed;
   }
 
   &[aria-disabled='false'] {
@@ -1703,7 +1781,7 @@ const BlocksToolbar = () => {
     return false;
   };
   const isButtonDisabled = checkButtonDisabled();
-  return /* @__PURE__ */ jsxRuntime.jsx(Toolbar__namespace.Root, { "aria-disabled": disabled, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(ToolbarWrapper, { gap: 2, padding: 2, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Toolbar__namespace.Root, { "aria-disabled": disabled, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(ToolbarWrapper, { gap: 2, padding: 2, width: "100%", children: [
     /* @__PURE__ */ jsxRuntime.jsx(BlocksDropdown, {}),
     /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
     /* @__PURE__ */ jsxRuntime.jsx(Toolbar__namespace.ToggleGroup, { type: "multiple", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, children: [
@@ -1777,30 +1855,32 @@ const DragIconButton = styledComponents.styled(designSystem.IconButton)`
   display: flex;
   align-items: center;
   justify-content: center;
+  border: none;
   border-radius: ${({ theme }) => theme.borderRadius};
-  width: ${({ theme }) => theme.spaces[4]};
-  height: ${({ theme }) => theme.spaces[6]};
+  padding-left: ${({ theme }) => theme.spaces[0]};
+  padding-right: ${({ theme }) => theme.spaces[0]};
+  padding-top: ${({ theme }) => theme.spaces[1]};
+  padding-bottom: ${({ theme }) => theme.spaces[1]};
   visibility: hidden;
   cursor: grab;
   opacity: inherit;
   margin-top: ${(props) => props.$dragHandleTopMargin ?? 0};
 
   &:hover {
-    background: ${({ theme }) => theme.colors.neutral200};
+    background: ${({ theme }) => theme.colors.neutral100};
   }
   &:active {
     cursor: grabbing;
+    background: ${({ theme }) => theme.colors.neutral150};
   }
   &[aria-disabled='true'] {
-    cursor: not-allowed;
-    background: transparent;
+    visibility: hidden;
   }
   svg {
-    height: auto;
     min-width: ${({ theme }) => theme.spaces[3]};
 
     path {
-      fill: ${({ theme }) => theme.colors.neutral700};
+      fill: ${({ theme }) => theme.colors.neutral500};
     }
   }
 `;
@@ -1951,7 +2031,7 @@ const baseRenderLeaf = (props, modifiers2) => {
     }
     return currentChildren;
   }, props.children);
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...props.attributes, children: wrappedChildren });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...props.attributes, className: props.leaf.className, children: wrappedChildren });
 };
 const baseRenderElement = ({
   props,
@@ -2153,7 +2233,7 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
       background: "neutral0",
       color: "neutral800",
       lineHeight: 6,
-      paddingRight: 4,
+      paddingRight: 7,
       paddingTop: 6,
       paddingBottom: 3,
       children: [
@@ -2164,6 +2244,7 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
             readOnly: disabled,
             placeholder,
             isExpandedMode,
+            decorate: decorateCode,
             renderElement,
             renderLeaf,
             onKeyDown: handleKeyDown,
@@ -2486,6 +2567,7 @@ const ExpandIconButton = styledComponents.styled(designSystem.IconButton)`
   position: absolute;
   bottom: 1.2rem;
   right: 1.2rem;
+  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
 `;
 function useResetKey(value) {
   const slateUpdatesCount = React__namespace.useRef(0);
@@ -3139,11 +3221,11 @@ const AddComponentButton = ({
       children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { tag: "span", gap: 2, children: [
         /* @__PURE__ */ jsxRuntime.jsx(StyledAddIcon, { "aria-hidden": true, $isOpen: isOpen, $hasError: hasError && !isOpen }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          AddComponentTitle,
+          designSystem.Typography,
           {
             variant: "pi",
             fontWeight: "bold",
-            textColor: hasError && !isOpen ? "danger600" : "neutral500",
+            textColor: hasError && !isOpen ? "danger600" : "neutral600",
             children
           }
         )
@@ -3160,43 +3242,14 @@ const StyledAddIcon = styledComponents.styled(Icons.PlusCircle)`
     fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger200 : theme.colors.neutral150};
   }
   > path {
-    fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral600};
+    fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral500};
   }
 `;
-const AddComponentTitle = styledComponents.styled(designSystem.Typography)``;
 const StyledButton = styledComponents.styled(designSystem.Button)`
+  padding-left: ${({ theme }) => theme.spaces[3]};
   border-radius: 26px;
-  border-color: ${({ theme }) => theme.colors.neutral150};
   box-shadow: ${({ theme }) => theme.shadows.filterShadow};
   height: 5rem;
-
-  &:hover {
-    ${AddComponentTitle} {
-      color: ${({ theme }) => theme.colors.primary600};
-    }
-
-    ${StyledAddIcon} {
-      > circle {
-        fill: ${({ theme }) => theme.colors.primary600};
-      }
-      > path {
-        fill: ${({ theme }) => theme.colors.primary600};
-      }
-    }
-  }
-  &:active {
-    ${AddComponentTitle} {
-      color: ${({ theme }) => theme.colors.primary600};
-    }
-    ${StyledAddIcon} {
-      > circle {
-        fill: ${({ theme }) => theme.colors.primary600};
-      }
-      > path {
-        fill: ${({ theme }) => theme.colors.neutral100};
-      }
-    }
-  }
 `;
 const ComponentCategory = ({
   category,
@@ -5591,4 +5644,4 @@ exports.transformDocument = transformDocument;
 exports.useDynamicZone = useDynamicZone;
 exports.useFieldHint = useFieldHint;
 exports.useLazyComponents = useLazyComponents;
-//# sourceMappingURL=Field-B9ADaInZ.js.map
+//# sourceMappingURL=Field-vX6JQNBo.js.map