@strapi/content-manager 0.0.0-experimental.62ce06180fe9a772eaeb3d43d238b26644f39f7c → 0.0.0-experimental.745741d19e90275ca6f7c928ca19f9bb0fd9d933

package/dist/_chunks/{Field-BZBYmvaf.mjs → Field-R5NbffTB.mjs}

@@ -2,12 +2,12 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { useState, useEffect, useCallback, memo } from "react";
 import { useStrapiApp, createContext, useField, useNotification, useForm, useAPIErrorHandler, useQueryParams, useFocusInputField, InputRenderer as InputRenderer$1 } from "@strapi/admin/strapi-admin";
-import { Typography, Flex, Box, BaseLink, Button, Popover, Field, Tooltip, SingleSelect, SingleSelectOption, IconButton, useComposedRefs, Portal, FocusTrap, Divider, VisuallyHidden, Grid as Grid$1, Accordion, TextButton, BaseButton, TextInput, IconButtonGroup, Menu, MenuItem } from "@strapi/design-system";
+import { Box, SingleSelect, SingleSelectOption, Typography, Flex, BaseLink, Button, Popover, Field, Tooltip, IconButton, useComposedRefs, Portal, FocusTrap, Divider, VisuallyHidden, Grid as Grid$1, Accordion, TextButton, BaseButton, TextInput, IconButtonGroup, Menu, MenuItem } from "@strapi/design-system";
 import pipe$1 from "lodash/fp/pipe";
 import { useIntl } from "react-intl";
-import { m as DOCUMENT_META_FIELDS, g as getTranslation, c as useDoc, e as contentManagerApi, d as buildValidParams, f as useDocumentRBAC, n as useDocLayout } from "./index-6kKXK7y8.mjs";
+import { m as DOCUMENT_META_FIELDS, g as getTranslation, c as useDoc, e as contentManagerApi, d as buildValidParams, f as useDocumentRBAC, n as useDocLayout } from "./index-CaE6NG4a.mjs";
 import { generateNKeysBetween } from "fractional-indexing";
-import { u as useComponent, C as ComponentProvider, M as MemoizedRelationsField } from "./Relations-KMf5qEN0.mjs";
+import { u as useComponent, C as ComponentProvider, M as MemoizedRelationsField } from "./Relations-u8-37jK0.mjs";
 import { Code, HeadingOne, HeadingTwo, HeadingThree, HeadingFour, HeadingFive, HeadingSix, Image as Image$1, NumberList, BulletList, Paragraph, Quotes, Link as Link$1, Drag, Collapse, Bold, Italic, Underline, StrikeThrough, Expand, PlusCircle, Plus, Trash, EyeStriked, CheckCircle, WarningCircle, Loader, ArrowClockwise, More } from "@strapi/icons";
 import { styled, css, keyframes } from "styled-components";
 import { C as ComponentIcon, a as COMPONENT_ICONS } from "./ComponentIcon-u4bIXTFY.mjs";
@@ -160,6 +160,220 @@ const useLazyComponents = (componentUids = []) => {
   }, []);
   return { isLazyLoading: loading, lazyComponentStore, cleanup };
 };
+const codeLanguages = [
+  {
+    value: "asm",
+    label: "Assembly"
+  },
+  {
+    value: "bash",
+    label: "Bash"
+  },
+  {
+    value: "c",
+    label: "C"
+  },
+  {
+    value: "clojure",
+    label: "Clojure"
+  },
+  {
+    value: "cobol",
+    label: "COBOL"
+  },
+  {
+    value: "cpp",
+    label: "C++"
+  },
+  {
+    value: "csharp",
+    label: "C#"
+  },
+  {
+    value: "css",
+    label: "CSS"
+  },
+  {
+    value: "dart",
+    label: "Dart"
+  },
+  {
+    value: "dockerfile",
+    label: "Dockerfile"
+  },
+  {
+    value: "elixir",
+    label: "Elixir"
+  },
+  {
+    value: "erlang",
+    label: "Erlang"
+  },
+  {
+    value: "fortran",
+    label: "Fortran"
+  },
+  {
+    value: "fsharp",
+    label: "F#"
+  },
+  {
+    value: "go",
+    label: "Go"
+  },
+  {
+    value: "graphql",
+    label: "GraphQL"
+  },
+  {
+    value: "groovy",
+    label: "Groovy"
+  },
+  {
+    value: "haskell",
+    label: "Haskell"
+  },
+  {
+    value: "haxe",
+    label: "Haxe"
+  },
+  {
+    value: "html",
+    label: "HTML"
+  },
+  {
+    value: "ini",
+    label: "INI"
+  },
+  {
+    value: "java",
+    label: "Java"
+  },
+  {
+    value: "javascript",
+    label: "JavaScript"
+  },
+  {
+    value: "jsx",
+    label: "JavaScript (React)"
+  },
+  {
+    value: "json",
+    label: "JSON"
+  },
+  {
+    value: "julia",
+    label: "Julia"
+  },
+  {
+    value: "kotlin",
+    label: "Kotlin"
+  },
+  {
+    value: "latex",
+    label: "LaTeX"
+  },
+  {
+    value: "lua",
+    label: "Lua"
+  },
+  {
+    value: "markdown",
+    label: "Markdown"
+  },
+  {
+    value: "matlab",
+    label: "MATLAB"
+  },
+  {
+    value: "makefile",
+    label: "Makefile"
+  },
+  {
+    value: "objectivec",
+    label: "Objective-C"
+  },
+  {
+    value: "perl",
+    label: "Perl"
+  },
+  {
+    value: "php",
+    label: "PHP"
+  },
+  {
+    value: "plaintext",
+    label: "Plain text"
+  },
+  {
+    value: "powershell",
+    label: "PowerShell"
+  },
+  {
+    value: "python",
+    label: "Python"
+  },
+  {
+    value: "r",
+    label: "R"
+  },
+  {
+    value: "ruby",
+    label: "Ruby"
+  },
+  {
+    value: "rust",
+    label: "Rust"
+  },
+  {
+    value: "sas",
+    label: "SAS"
+  },
+  {
+    value: "scala",
+    label: "Scala"
+  },
+  {
+    value: "scheme",
+    label: "Scheme"
+  },
+  {
+    value: "shell",
+    label: "Shell"
+  },
+  {
+    value: "sql",
+    label: "SQL"
+  },
+  {
+    value: "stata",
+    label: "Stata"
+  },
+  {
+    value: "swift",
+    label: "Swift"
+  },
+  {
+    value: "typescript",
+    label: "TypeScript"
+  },
+  {
+    value: "tsx",
+    label: "TypeScript (React)"
+  },
+  {
+    value: "vbnet",
+    label: "VB.NET"
+  },
+  {
+    value: "xml",
+    label: "XML"
+  },
+  {
+    value: "yaml",
+    label: "YAML"
+  }
+];
 const baseHandleConvert = (editor, attributesToSet) => {
   const [_, lastNodePath] = Editor$1.last(editor, []);
   Transforms.unwrapNodes(editor, {
@@ -230,6 +444,7 @@ const CodeBlock = styled.pre`
   overflow: auto;
   padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[4]}`};
   flex-shrink: 1;
+
   & > code {
     font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas,
       monospace;
@@ -238,9 +453,61 @@ const CodeBlock = styled.pre`
     max-width: 100%;
   }
 `;
+const CodeEditor = (props) => {
+  const { editor } = useBlocksEditorContext("ImageDialog");
+  const editorIsFocused = useFocused();
+  const imageIsSelected = useSelected();
+  const { formatMessage } = useIntl();
+  const [isSelectOpen, setIsSelectOpen] = React.useState(false);
+  const shouldDisplayLanguageSelect = editorIsFocused && imageIsSelected || isSelectOpen;
+  return /* @__PURE__ */ jsxs(Box, { position: "relative", width: "100%", children: [
+    /* @__PURE__ */ jsx(CodeBlock, { ...props.attributes, children: /* @__PURE__ */ jsx("code", { children: props.children }) }),
+    shouldDisplayLanguageSelect && /* @__PURE__ */ jsx(
+      Box,
+      {
+        position: "absolute",
+        background: "neutral0",
+        borderColor: "neutral150",
+        borderStyle: "solid",
+        borderWidth: "0.5px",
+        shadow: "tableShadow",
+        top: "100%",
+        marginTop: 1,
+        right: 0,
+        padding: 1,
+        hasRadius: true,
+        children: /* @__PURE__ */ jsx(
+          SingleSelect,
+          {
+            onChange: (open) => {
+              Transforms.setNodes(
+                editor,
+                { language: open.toString() },
+                { match: (node) => !Editor$1.isEditor(node) && node.type === "code" }
+              );
+            },
+            value: props.element.type === "code" && props.element.language || "plaintext",
+            onOpenChange: (open) => {
+              setIsSelectOpen(open);
+              if (!open) {
+                ReactEditor.focus(editor);
+              }
+            },
+            onCloseAutoFocus: (e) => e.preventDefault(),
+            "aria-label": formatMessage({
+              id: "components.Blocks.blocks.code.languageLabel",
+              defaultMessage: "Select a language"
+            }),
+            children: codeLanguages.map(({ value, label }) => /* @__PURE__ */ jsx(SingleSelectOption, { value, children: label }, value))
+          }
+        )
+      }
+    )
+  ] });
+};
 const codeBlocks = {
   code: {
-    renderElement: (props) => /* @__PURE__ */ jsx(CodeBlock, { ...props.attributes, children: /* @__PURE__ */ jsx("code", { children: props.children }) }),
+    renderElement: (props) => /* @__PURE__ */ jsx(CodeEditor, { ...props }),
     icon: Code,
     label: {
       id: "components.Blocks.blocks.code",
@@ -249,7 +516,7 @@ const codeBlocks = {
     matchNode: (node) => node.type === "code",
     isInBlocksSelector: true,
     handleConvert(editor) {
-      baseHandleConvert(editor, { type: "code" });
+      baseHandleConvert(editor, { type: "code", language: "plaintext" });
     },
     handleEnterKey(editor) {
       pressEnterTwiceToExit(editor);
@@ -5196,4 +5463,4 @@ export {
   transformDocument as t,
   useLazyComponents as u
 };
-//# sourceMappingURL=Field-BZBYmvaf.mjs.map
+//# sourceMappingURL=Field-R5NbffTB.mjs.map