@layers-app/editor-video 0.1.7 → 0.1.8

package/dist/index.css

@@ -99,6 +99,14 @@ div.doc-space-styles-provider .video-upload-container *::after {
   pointer-events: auto !important;
 }
 
+.editor-select__chevron {
+  transition: transform 150ms ease;
+}
+
+[data-expanded=true] + * .editor-select__chevron {
+  transform: rotate(180deg);
+}
+
 .media-actions .media-action {
   border: none;
   background-color: var(--mantine-color-body, white);

package/dist/index.js

@@ -5,11 +5,12 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { createContext, useState, useRef, useCallback, useMemo, useContext, forwardRef, createElement, useEffect } from "react";
 import { createCommand, $getNodeByKey, $setSelection, COMMAND_PRIORITY_LOW, DecoratorNode } from "lexical";
 import { useTranslation } from "react-i18next";
-import { Tooltip, ActionIcon, Text, Progress, Paper, Button, TextInput, Menu, Box, Slider, Flex, Select, Stack, Divider, Group, Textarea, Loader, Switch, Modal } from "@mantine/core";
+import { Tooltip, ActionIcon, Text, Progress, Paper, Button, TextInput, Menu, Box, Slider, Flex, useCombobox, Combobox, InputBase, Group, Stack, Divider, Textarea, Loader, Switch, Modal } from "@mantine/core";
 import { BlockWithAlignableContents } from "@lexical/react/LexicalBlockWithAlignableContents";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { Dropzone as Dropzone$1, IMAGE_MIME_TYPE } from "@mantine/dropzone";
 import ShakaPlayer from "shaka-player-react";
+import { IconChevronDown, IconCheck } from "@tabler/icons-react";
 import { Carousel } from "@mantine/carousel";
 const VideoContext = createContext(null);
 function VideoPluginProvider({
@@ -4972,6 +4973,115 @@ function VideoPlayerState({
     }
   );
 }
+function VideoSelect({
+  size = "sm",
+  w = 150,
+  comboboxProps,
+  rightSection,
+  renderOption,
+  data,
+  value,
+  defaultValue,
+  onChange,
+  inputClassName,
+  ...inputProps
+}) {
+  var _a;
+  const {
+    onClick: onInputClick,
+    type: _inputType,
+    onCopy: _onCopy,
+    onCut: _onCut,
+    onPaste: _onPaste,
+    classNames: parentClassNames,
+    allowDeselect: _allowDeselect,
+    ...restInputProps
+  } = inputProps;
+  const parentInputClass = typeof parentClassNames === "object" && parentClassNames && "input" in parentClassNames ? parentClassNames.input : void 0;
+  const inputClass = [parentInputClass, inputClassName].filter(Boolean).join(" ") || void 0;
+  const mergedClassNames = inputClass ? {
+    ...typeof parentClassNames === "object" && parentClassNames ? parentClassNames : {},
+    input: inputClass
+  } : parentClassNames;
+  const [search, setSearch] = useState("");
+  const combobox = useCombobox({
+    onDropdownClose: () => {
+      combobox.resetSelectedOption();
+      combobox.focusTarget();
+      setSearch("");
+    },
+    onDropdownOpen: () => {
+      combobox.focusSearchInput();
+    }
+  });
+  const normalizedData = useMemo(
+    () => (Array.isArray(data) ? data : []).map(
+      (item) => typeof item === "string" ? { value: item, label: item } : item
+    ),
+    [data]
+  );
+  const selectedValue = value ?? defaultValue ?? null;
+  const selectedLabel = ((_a = normalizedData.find((item) => item.value === selectedValue)) == null ? void 0 : _a.label) ?? "";
+  const renderOptionNode = (optionValue, optionLabel, checked) => renderOption ? renderOption({
+    option: { value: optionValue, label: optionLabel },
+    checked
+  }) : /* @__PURE__ */ jsxs(Group, { justify: "space-between", wrap: "nowrap", w: "100%", children: [
+    optionLabel,
+    checked && /* @__PURE__ */ jsx(IconCheck, { size: 16, color: "var(--primary-color-text, #4C6EF5)" })
+  ] });
+  const { width: comboboxWidth, ...restComboboxProps } = comboboxProps || {};
+  const dropdownWidth = comboboxWidth ?? 250;
+  return /* @__PURE__ */ jsxs(
+    Combobox,
+    {
+      store: combobox,
+      withinPortal: true,
+      onOptionSubmit: (val) => {
+        const option = normalizedData.find((item) => item.value === val) ?? {
+          value: val,
+          label: val
+        };
+        onChange == null ? void 0 : onChange(val, option);
+        combobox.closeDropdown();
+      },
+      width: dropdownWidth,
+      ...restComboboxProps,
+      children: [
+        /* @__PURE__ */ jsx(Combobox.Target, { children: /* @__PURE__ */ jsx(
+          InputBase,
+          {
+            component: "button",
+            size,
+            w,
+            classNames: mergedClassNames,
+            pointer: true,
+            rightSection: rightSection ?? /* @__PURE__ */ jsx(IconChevronDown, { size: 16, className: "editor-select__chevron" }),
+            rightSectionPointerEvents: "none",
+            onClick: (e) => {
+              onInputClick == null ? void 0 : onInputClick(e);
+              combobox.toggleDropdown();
+            },
+            ...restInputProps,
+            children: selectedLabel
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Combobox.Dropdown, { children: /* @__PURE__ */ jsx(
+          Combobox.Options,
+          {
+            style: {
+              maxHeight: 200,
+              overflowY: "auto"
+            },
+            children: normalizedData.length > 0 ? normalizedData.map((item) => {
+              const checked = item.value === selectedValue;
+              return /* @__PURE__ */ jsx(Combobox.Option, { value: item.value, children: renderOptionNode(item.value, item.label, checked) }, item.value);
+            }) : /* @__PURE__ */ jsx(Combobox.Empty, { children: "Nothing found" })
+          }
+        ) })
+      ]
+    }
+  );
+}
 const isLinkPlatform = (value) => value === "link" || value === "youtube" || value === "vk" || value === "rutube";
 const isUploadPlatform = (value) => value === "upload" || value === "download";
 function VideoUploadComponent({
@@ -4997,7 +5107,7 @@ function VideoUploadComponent({
   const { t, i18n } = useTranslation();
   const { config, dependencies, registerUpload, unregisterUpload, reportError } = useVideoPluginContext();
   const { maxFileSize = 5, pageId } = config;
-  const SelectComponent = dependencies.Select || Select;
+  const SelectComponent = dependencies.Select || VideoSelect;
   const [currentState, setCurrentState] = useState(
     initialVideoState ?? "default"
   );
@@ -5841,7 +5951,7 @@ function ChaptersSection({
   addTranscriptManuallyLabel
 }) {
   const dependencies = useVideoPluginDependencies();
-  const SelectComponent = dependencies.Select || Select;
+  const SelectComponent = dependencies.Select || VideoSelect;
   const [editableChapters, setEditableChapters] = useState(
     []
   );
@@ -6494,7 +6604,7 @@ function ManualSubtitlesPanel({
   const { t } = useTranslation();
   const { reportError } = useVideoPluginContext();
   const dependencies = useVideoPluginDependencies();
-  const SelectComponent = dependencies.Select || Select;
+  const SelectComponent = dependencies.Select || VideoSelect;
   const [tracks, setTracks] = useState([]);
   const [drafts, setDrafts] = useState([]);
   const uploadControllersRef = useRef(/* @__PURE__ */ new Map());