@tn-pulse-suivi/notion-ui-comps 1.0.4 → 1.0.6

package/dist/index.cjs

@@ -2508,7 +2508,7 @@ function addEmojiTrigger(editor, trigger = ":", node, nodePos) {
 }
 
 // src/components/tiptap-ui/slash-dropdown-menu/use-slash-dropdown-menu.tsx
-var getSlashMenuItemsTexts = (tNL, tCommon, tBook) => ({
+var getSlashMenuItemsTexts = (tNL) => ({
   // Style
   text: {
     title: tNL("Text"),
@@ -2698,7 +2698,7 @@ var getItemImplementations = (commonFns) => {
         const statusNodeDomNode = commonFns.findDomRefAtPos(pos, domAtPos.bind(view));
         if (statusNodeDomNode.tagName === "STATUS-NODE") {
           const statusNodeDomNodeText = statusNodeDomNode.getAttribute("text");
-          const emptyStatusPopupInputPlaceholder = commonFns.getI18next().t("emptyStatusPopupInputPlaceholder");
+          const emptyStatusPopupInputPlaceholder = t("emptyStatusPopupInputPlaceholder");
           const nodeAtPos = doc.nodeAt(pos);
           if (commonFns.equalNodeType(nodes.statusNode, nodeAtPos)) {
             if (statusNodeDomNodeText === emptyStatusPopupInputPlaceholder) {
@@ -2810,12 +2810,10 @@ function organizeItemsByGroups(items, showGroups) {
 }
 function useSlashDropdownMenu(config) {
   const { t: tNotionLike } = (0, import_react_i18next.useTranslation)("notionLike" /* notionLike */);
-  const { t: tCommon } = (0, import_react_i18next.useTranslation)("common" /* common */);
-  const { t: tBook } = (0, import_react_i18next.useTranslation)("book" /* book */);
   const getSlashMenuItems = (0, import_react38.useCallback)(
     (editor, commonFns) => {
       const items = [];
-      const texts = getSlashMenuItemsTexts(tNotionLike, tCommon, tBook);
+      const texts = getSlashMenuItemsTexts(tNotionLike);
       const enabledItems = config?.enabledItems || Object.keys(texts);
       const showGroups = config?.showGroups !== false;
       const itemImplementations = getItemImplementations(commonFns);
@@ -10994,7 +10992,8 @@ var TurnIntoDropdown = (0, import_react138.forwardRef)(
       hideWhenUnavailable,
       blockTypes,
       onOpenChange,
-      tNotionLike
+      tNotionLike,
+      commonFns
     });
     if (!isVisible) {
       return null;
@@ -11123,7 +11122,7 @@ function shouldShowTurnInto(params) {
   return true;
 }
 function useTurnIntoDropdown(config) {
-  const { editor: providedEditor, hideWhenUnavailable = false, blockTypes, onOpenChange, tNotionLike } = config || {};
+  const { editor: providedEditor, hideWhenUnavailable = false, blockTypes, onOpenChange, tNotionLike, commonFns } = config || {};
   const { editor } = useTiptapEditor(providedEditor);
   const [isOpen, setIsOpen] = (0, import_react139.useState)(false);
   const [isVisible, setIsVisible] = (0, import_react139.useState)(true);
@@ -11162,7 +11161,7 @@ function useTurnIntoDropdown(config) {
     activeBlockType,
     handleOpenChange,
     filteredOptions: getFilteredBlockTypeOptions(tNotionLike, blockTypes),
-    label: capitalizeFirstLetter(tNotionLike("TurnInto").toLowerCase()) + ` (current: ${activeBlockType?.label || tNotionLike("Text")})`,
+    label: commonFns.capitalizeFirstLetter(tNotionLike("TurnInto").toLowerCase()) + ` (current: ${activeBlockType?.label || tNotionLike("Text")})`,
     Icon: ChevronDownIcon
   };
 }
@@ -11644,7 +11643,7 @@ var import_react_i18next3 = require("react-i18next");
 var import_react_fontawesome = require("@fortawesome/react-fontawesome");
 var import_jsx_runtime100 = require("react/jsx-runtime");
 function ImageExpandButton(props) {
-  const { commonFns, customIcons } = props;
+  const { commonFns } = props;
   const { t } = (0, import_react_i18next3.useTranslation)("richText" /* richText */);
   const { currentSelectedImgId } = window;
   return currentSelectedImgId ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
@@ -11661,7 +11660,7 @@ function ImageExpandButton(props) {
         commonFns.ExpandImgIconClickHAndler(e, currentSelectedImgId);
         commonFns.stopEventPropagation(e);
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_react_fontawesome.FontAwesomeIcon, { id: "ImageExpandBtnIcon", icon: customIcons.faExpand, style: { height: 20, width: "auto" } })
+      children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_react_fontawesome.FontAwesomeIcon, { id: "ImageExpandBtnIcon", icon: commonFns.customIcons.faExpand, style: { height: 20, width: "auto" } })
     }
   ) : "";
 }
@@ -12226,10 +12225,8 @@ RefreshCcwIcon.displayName = "RefreshCcwIcon";
 var import_jsx_runtime108 = require("react/jsx-runtime");
 function ImageNodeFloating({
   editor: providedEditor,
-  ExpandImgIconClickHAndler,
   tNotionLike,
-  commonFns,
-  customIcons
+  commonFns
 }) {
   const { editor } = useTiptapEditor(providedEditor);
   const visible = isNodeTypeSelected(editor, ["image"]);
@@ -12237,7 +12234,7 @@ function ImageNodeFloating({
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(import_jsx_runtime108.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(image_expand_button_default, { ExpandImgIconClickHAndler, commonFns, customIcons }),
+    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(image_expand_button_default, { commonFns }),
     /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(ImageAlignButton, { align: "left" }),
     /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(ImageAlignButton, { align: "center" }),
     /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(ImageAlignButton, { align: "right" }),
@@ -12495,10 +12492,8 @@ function MainToolbarContent({
   isMobile,
   toolbarViews,
   onViewChange,
-  ExpandImgIconClickHAndler,
   tNotionLike,
-  commonFns,
-  customIcons
+  commonFns
 }) {
   const hasSelection = hasTextSelection(editor);
   const hasContent = (editor?.getText().length ?? 0) > 0;
@@ -12519,7 +12514,7 @@ function MainToolbarContent({
           editor
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(ImageNodeFloating, { ExpandImgIconClickHAndler, tNotionLike, commonFns, customIcons }),
+      /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(ImageNodeFloating, { tNotionLike, commonFns }),
       /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(ScriptGroup, { tNotionLike }),
       /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(AlignmentGroup, { tNotionLike }),
       /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(ToolbarGroup, { children: [
@@ -12543,7 +12538,7 @@ function SpecializedToolbarContent({ view, onBack }) {
     view.content
   ] });
 }
-function MobileToolbar({ editor: providedEditor, ExpandImgIconClickHAndler, tNotionLike, commonFns, customIcons }) {
+function MobileToolbar({ editor: providedEditor, tNotionLike, commonFns }) {
   const { editor } = useTiptapEditor(providedEditor);
   const isMobile = useIsBreakpoint("max", 480);
   const toolbarRef = (0, import_react155.useRef)(null);
@@ -12575,10 +12570,8 @@ function MobileToolbar({ editor: providedEditor, ExpandImgIconClickHAndler, tNot
           isMobile,
           toolbarViews,
           onViewChange: toolbarState.showView,
-          ExpandImgIconClickHAndler,
           tNotionLike,
-          commonFns,
-          customIcons
+          commonFns
         }
       ) : currentView && /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(SpecializedToolbarContent, { view: currentView, onBack: toolbarState.showMainView })
     }
@@ -12836,7 +12829,7 @@ var isElementWithinEditor = (editor, element) => {
 
 // src/components/tiptap-templates/notion-like/notion-like-editor-toolbar-floating.tsx
 var import_jsx_runtime112 = require("react/jsx-runtime");
-function NotionToolbarFloating({ ExpandImgIconClickHAndler, tNotionLike, commonFns, customIcons }) {
+function NotionToolbarFloating({ tNotionLike, commonFns }) {
   const { editor } = useTiptapEditor();
   const isMobile = useIsBreakpoint("max", 480);
   const { lockDragHandle, commentInputVisible } = useUiEditorState(editor);
@@ -12857,7 +12850,7 @@ function NotionToolbarFloating({ ExpandImgIconClickHAndler, tNotionLike, commonF
       /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(MarkButton, { type: "code", hideWhenUnavailable: true, tNotionLike })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(ToolbarSeparator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(ImageNodeFloating, { ExpandImgIconClickHAndler, tNotionLike, commonFns, customIcons }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(ImageNodeFloating, { tNotionLike, commonFns }) }),
     /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(VideoNodeFloating, { tNotionLike }) }),
     /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(ToolbarGroup, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(LinkPopover, { autoOpenOnLinkActive: false, hideWhenUnavailable: true, tNotionLike }),
@@ -19545,10 +19538,11 @@ function ImageNodeView(props) {
   const { editor, node, updateAttributes, getPos } = props;
   const hasContent = node.content.size > 0;
   const { commonFns } = (0, import_react198.useContext)(import_react199.EditorContext);
+  console.log("\u{1F680} ~ ImageNodeView ~ commonFns:", commonFns);
   if (!commonFns) {
     console.error("ImageNodeView :: commonFns NOT PROVIDED !!!!");
   }
-  const { getFileUrl, ExpandImgIconClickHAndler } = commonFns || {};
+  const { getFileUrl } = commonFns || {};
   return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
     ResizableImage,
     {
@@ -19574,7 +19568,6 @@ function ImageNodeView(props) {
       },
       onUpdateAttributes: updateAttributes,
       getPos,
-      ExpandImgIconClickHAndler,
       commonFns
     }
   );
@@ -19595,7 +19588,6 @@ var ResizableImage = ({
   onImageResize,
   onUpdateAttributes,
   getPos,
-  ExpandImgIconClickHAndler,
   commonFns
 }) => {
   const [width, setWidth] = (0, import_react198.useState)(initialWidth);
@@ -20173,7 +20165,7 @@ CloseIcon.displayName = "CloseIcon";
 
 // src/components/tiptap-node/image-upload-node/image-upload-node.tsx
 var import_jsx_runtime136 = require("react/jsx-runtime");
-function useFileUpload(options, commonFns) {
+function useFileUpload(options) {
   const [fileItems, setFileItems] = (0, import_react202.useState)([]);
   const fileItemsRef = (0, import_react202.useRef)(fileItems);
   fileItemsRef.current = fileItems;
@@ -20240,8 +20232,7 @@ function useFileUpload(options, commonFns) {
             } else {
               console.error("abortController.signal.aborted !!");
             }
-          },
-          commonFns
+          }
         );
         return null;
       } catch (error) {
@@ -20265,7 +20256,7 @@ function useFileUpload(options, commonFns) {
       options.onError?.(new Error(`Maximum ${options.limit} file${options.limit === 1 ? "" : "s"} allowed`));
       return [];
     }
-    const uploadPromises = files.map((file) => uploadFile(file, commonFns));
+    const uploadPromises = files.map((file) => uploadFile(file));
     const results = await Promise.all(uploadPromises);
     return results.filter((imgInfos) => imgInfos !== null);
   };
@@ -20482,7 +20473,8 @@ var ImageUploadNode = (props) => {
     onError: extension.options.onError
   };
   const { commonFns } = (0, import_react202.useContext)(import_react203.EditorContext);
-  const { fileItems, uploadFiles, removeFileItem, clearAllFiles } = useFileUpload(uploadOptions, commonFns);
+  console.log("\u{1F680} ~ ImageUploadNode ~ commonFns:", commonFns);
+  const { fileItems, uploadFiles, removeFileItem, clearAllFiles } = useFileUpload(uploadOptions);
   const handleUpload = async (files) => {
     const imgsInfos = await uploadFiles(files);
     if (imgsInfos.length > 0) {
@@ -20863,11 +20855,12 @@ var useNotionLikeExtensions = (args) => {
     withVideo = true,
     setTocContent,
     ignore,
-    customExtensions = []
+    customExtensions = [],
+    commonFns
   } = args;
   const editable = Boolean(isEditable);
   const localHandleImageUpload = (0, import_react206.useCallback)(
-    async (file, fileId, onProgress, abortSignal, onDoneCb, commonFns) => {
+    async (file, fileId, onProgress, abortSignal, onDoneCb) => {
       if (!file) {
         throw new Error("No file provided");
       }
@@ -20884,7 +20877,7 @@ var useNotionLikeExtensions = (args) => {
     [MAX_FILE_SIZE]
   );
   if (ignore) {
-    return void 0;
+    return [];
   }
   let extensions = [
     import_starter_kit.StarterKit.configure({
@@ -21106,8 +21099,6 @@ function TocSidebar({ className, maxShowCount = 20, topOffset = 0, commonFns, ..
 var import_jsx_runtime138 = require("react/jsx-runtime");
 function EditorProvider(props) {
   const {
-    // provider,
-    // ydoc,
     placeholder = "Start writing...",
     getInchangeableProps,
     className,
@@ -21115,8 +21106,6 @@ function EditorProvider(props) {
     width,
     height,
     extraStyle,
-    // setMenuBarGetter,
-    // mentionList,
     isEditable = true,
     withImages = true,
     initialContent = "",
@@ -21132,10 +21121,7 @@ function EditorProvider(props) {
     withTables,
     withVideo,
     pSwipeIsOpen,
-    showToCInBookPages,
-    customExtensions,
-    customIcons
-    // withStatus,
+    showToCInBookPages
   } = props;
   const { setTocContent } = useToc();
   const { t: tBook } = (0, import_react_i18next8.useTranslation)("book" /* book */);
@@ -21153,18 +21139,16 @@ function EditorProvider(props) {
     onDestroyTimerLockRef,
     isLinkRemovalRef,
     fileReUploadIsOnRef,
-    // svgs,
-    // t,
-    // setVideoUrlDialogData,
     getFileUrl,
     setGetEditorContent,
     getEditorRef,
     setAutoFocusOnPopupIsReady,
     ExpandImgIconClickHAndler,
     tNotionLike,
-    commonFns
-    // isPasteEventRef
+    commonFns,
+    customExtensions
   } = getInchangeableProps();
+  const { getUpdatedProseMirrorViewVars, urlToFile, ...restCommonFns } = commonFns;
   const extensions = useNotionLikeExtensions_default({
     isEditable,
     withImages,
@@ -21173,7 +21157,8 @@ function EditorProvider(props) {
     withTables,
     withVideo,
     setTocContent,
-    customExtensions
+    customExtensions,
+    commonFns: restCommonFns
   });
   const imageIndexRef = (0, import_react208.useRef)(0);
   const transformNode = (args) => {
@@ -21240,7 +21225,7 @@ function EditorProvider(props) {
     const selection = bookmark.resolve(view.state.doc);
     setTimeout(
       ({ sel, frag, v }) => {
-        let { newDispatch, newTr } = commonFns.getUpdatedProseMirrorViewVars(v);
+        let { newDispatch, newTr } = getUpdatedProseMirrorViewVars(v);
         const { from, to } = sel;
         newDispatch(newTr.replaceRange(from, to, frag).scrollIntoView());
       },
@@ -21298,7 +21283,7 @@ function EditorProvider(props) {
           if (slice.content.size === 0 && fileImages.length) {
             setTimeout(
               (blobs) => {
-                let { newDispatch, newTr } = commonFns.getUpdatedProseMirrorViewVars(view);
+                let { newDispatch, newTr } = getUpdatedProseMirrorViewVars(view);
                 const { schema: schema2 } = editorRef.current;
                 let tr;
                 if (blobs.length === 1) {
@@ -21338,7 +21323,7 @@ function EditorProvider(props) {
                     const isFile = htmImg instanceof File;
                     if (!isFile) {
                       const { src } = htmImg;
-                      commonFns.urlToFile(src, `pasted-${hiIndex}.png`, (err, imf) => {
+                      urlToFile(src, `pasted-${hiIndex}.png`, (err, imf) => {
                         if (err) {
                           console.error("handlePaste.urlToFile.cb ~ err : ", err);
                         } else {
@@ -21576,18 +21561,16 @@ function EditorProvider(props) {
         ...extraStyle
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_react209.EditorContext.Provider, { value: { editor, commonFns: { getFileUrl } }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_react209.EditorContext.Provider, { value: { editor, commonFns: { ...restCommonFns, getFileUrl, ExpandImgIconClickHAndler } }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
             EditorContentArea,
             {
               mentionListRef,
-              ExpandImgIconClickHAndler,
               tNotionLike,
-              commonFns,
-              customIcons
+              commonFns: restCommonFns
             }
           ),
-          withToc && showToCInBookPages ? /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(TocSidebar, { topOffset: 48, commonFns }) : "",
+          withToc && showToCInBookPages ? /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(TocSidebar, { topOffset: 48, commonFns: restCommonFns }) : "",
           /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(TableExtendRowColumnButtons, {}),
           /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(TableHandle, { tNotionLike }),
           /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
@@ -21632,7 +21615,7 @@ function LoadingSpinner({ text = "Connecting..." }) {
     /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "spinner-loading-text", children: text })
   ] }) });
 }
-function EditorContentArea({ mentionListRef, ExpandImgIconClickHAndler, tNotionLike, commonFns, customIcons }) {
+function EditorContentArea({ mentionListRef, tNotionLike, commonFns }) {
   const { editor } = (0, import_react210.useContext)(import_react211.EditorContext);
   const { isDragging } = useUiEditorState(editor);
   useScrollToHash();
@@ -21653,9 +21636,9 @@ function EditorContentArea({ mentionListRef, ExpandImgIconClickHAndler, tNotionL
         /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(EmojiDropdownMenu, {}),
         /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(MentionDropdownMenu, { mentionListRef }),
         /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(SlashDropdownMenu, { commonFns }),
-        /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(NotionToolbarFloating, { ExpandImgIconClickHAndler, tNotionLike, commonFns, customIcons }),
+        /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(NotionToolbarFloating, { tNotionLike, commonFns }),
         (0, import_react_dom.createPortal)(
-          /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(MobileToolbar, { ExpandImgIconClickHAndler, tNotionLike, commonFns, customIcons }),
+          /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(MobileToolbar, { tNotionLike, commonFns }),
           document.body
         )
       ]