@mdxeditor/editor 0.5.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -13,7 +13,7 @@ import { ListPlugin } from "@lexical/react/LexicalListPlugin";
13
13
  import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
14
14
  import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin";
15
15
  import classNames from "classnames";
16
- import { ElementNode, $createParagraphNode, $applyNodeReplacement, DecoratorNode, createEditor, $getRoot, $isRootNode, $isParagraphNode, $isLineBreakNode, $isTextNode, $isElementNode, ParagraphNode, $createTextNode, $getSelection, $isRangeSelection, DEPRECATED_$isGridSelection, FORMAT_TEXT_COMMAND, $isRootOrShadowRoot, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, BLUR_COMMAND, COMMAND_PRIORITY_LOW, FOCUS_COMMAND, KEY_ESCAPE_COMMAND, KEY_MODIFIER_COMMAND, COMMAND_PRIORITY_HIGH, createCommand, INDENT_CONTENT_COMMAND, $getNodeByKey } from "lexical";
16
+ import { ElementNode, $createParagraphNode, $applyNodeReplacement, DecoratorNode, createEditor, $getRoot, $isRootNode, $isParagraphNode, $isLineBreakNode, $isTextNode, $isElementNode, ParagraphNode, $createTextNode, $getSelection, $isRangeSelection, DEPRECATED_$isGridSelection, FORMAT_TEXT_COMMAND, $isRootOrShadowRoot, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, BLUR_COMMAND, COMMAND_PRIORITY_LOW, PASTE_COMMAND, FOCUS_COMMAND, KEY_ESCAPE_COMMAND, KEY_MODIFIER_COMMAND, COMMAND_PRIORITY_HIGH, createCommand, INDENT_CONTENT_COMMAND, $getNodeByKey, $insertNodes, COMMAND_PRIORITY_EDITOR, DRAGSTART_COMMAND, DRAGOVER_COMMAND, DROP_COMMAND, $createRangeSelection, $setSelection, $isNodeSelection } from "lexical";
17
17
  import * as React from "react";
18
18
  import React__default, { createContext, forwardRef, useMemo, useImperativeHandle, createElement, useCallback, useContext, useState, useEffect } from "react";
19
19
  import { CodeNode } from "@lexical/code";
@@ -30,7 +30,7 @@ import { directive } from "micromark-extension-directive";
30
30
  import { frontmatter } from "micromark-extension-frontmatter";
31
31
  import { gfmTable } from "micromark-extension-gfm-table";
32
32
  import { mdxjs } from "micromark-extension-mdxjs";
33
- import { addClassNamesToElement, $insertNodeToNearestRoot, $findMatchingParent, $getNearestNodeOfType } from "@lexical/utils";
33
+ import { addClassNamesToElement, $insertNodeToNearestRoot, $findMatchingParent, $getNearestNodeOfType, mergeRegister, $wrapNodeInElement } from "@lexical/utils";
34
34
  import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
35
35
  import { $setBlocksType, $isAtNodeEnd } from "@lexical/selection";
36
36
  import { createEmptyHistoryState, HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
@@ -372,8 +372,12 @@ class ImageNode extends DecoratorNode {
372
372
  setTitle(title) {
373
373
  this.getWritable().__title = title;
374
374
  }
375
- decorate() {
376
- return /* @__PURE__ */ React__default.createElement("img", { title: this.__title, src: this.__src, alt: this.__altText });
375
+ decorate(_parentEditor, {
376
+ theme: {
377
+ nodeDecoratorComponents: { ImageEditor }
378
+ }
379
+ }) {
380
+ return /* @__PURE__ */ React__default.createElement(ImageEditor, { src: this.getSrc(), title: this.getTitle(), nodeKey: this.getKey() });
377
381
  }
378
382
  }
379
383
  function $createImageNode(options) {
@@ -1028,11 +1032,17 @@ const LexicalThematicBreakVisitor = {
1028
1032
  };
1029
1033
  const LexicalImageVisitor = {
1030
1034
  testLexicalNode: $isImageNode,
1031
- visitLexicalNode({ lexicalNode, actions }) {
1032
- actions.addAndStepInto("image", {
1033
- url: lexicalNode.getSrc(),
1034
- alt: lexicalNode.getAltText(),
1035
- title: lexicalNode.getTitle()
1035
+ visitLexicalNode({ mdastParent, lexicalNode, actions }) {
1036
+ actions.appendToParent(mdastParent, {
1037
+ type: "paragraph",
1038
+ children: [
1039
+ {
1040
+ type: "image",
1041
+ url: lexicalNode.getSrc(),
1042
+ alt: lexicalNode.getAltText(),
1043
+ title: lexicalNode.getTitle()
1044
+ }
1045
+ ]
1036
1046
  });
1037
1047
  }
1038
1048
  };
@@ -2220,6 +2230,9 @@ const [EditorSystem, EditorSystemType] = system((r) => {
2220
2230
  const lexicalConvertOptions = r.node(null);
2221
2231
  const lexicalNodes = r.node([]);
2222
2232
  const imageAutocompleteSuggestions = r.node([]);
2233
+ const imageUploadHandler = r.node((_) => {
2234
+ throw new Error("Image upload handling is not implemented");
2235
+ });
2223
2236
  r.link(
2224
2237
  r.pipe(
2225
2238
  createEditorSubscription,
@@ -2394,6 +2407,26 @@ const [EditorSystem, EditorSystemType] = system((r) => {
2394
2407
  COMMAND_PRIORITY_LOW
2395
2408
  );
2396
2409
  });
2410
+ r.pub(createEditorSubscription, (theEditor) => {
2411
+ return theEditor.registerCommand(
2412
+ PASTE_COMMAND,
2413
+ (event) => {
2414
+ var _a;
2415
+ let cbPayload = Array.from(((_a = event.clipboardData) == null ? void 0 : _a.items) || []);
2416
+ cbPayload = cbPayload.filter((i) => /image/.test(i.type));
2417
+ if (!cbPayload.length || cbPayload.length === 0) {
2418
+ return false;
2419
+ }
2420
+ const imageUploadHandlerValue = r.getValue(imageUploadHandler);
2421
+ const theImage = cbPayload[0].getAsFile();
2422
+ imageUploadHandlerValue(theImage).then((url) => r.pub(insertImage, url)).catch((e) => {
2423
+ throw e;
2424
+ });
2425
+ return true;
2426
+ },
2427
+ COMMAND_PRIORITY_CRITICAL
2428
+ );
2429
+ });
2397
2430
  return {
2398
2431
  editor,
2399
2432
  activeEditor,
@@ -2418,7 +2451,8 @@ const [EditorSystem, EditorSystemType] = system((r) => {
2418
2451
  lexicalConvertOptions,
2419
2452
  lexicalNodes,
2420
2453
  imageAutocompleteSuggestions,
2421
- markdownSource
2454
+ markdownSource,
2455
+ imageUploadHandler
2422
2456
  };
2423
2457
  }, []);
2424
2458
  const [JsxSystem, JsxSystemType] = system((r) => {
@@ -2876,6 +2910,7 @@ const {
2876
2910
  lexicalNodes: "lexicalNodes"
2877
2911
  },
2878
2912
  optional: {
2913
+ imageUploadHandler: "imageUploadHandler",
2879
2914
  editorRootElementRef: "editorRootElementRef",
2880
2915
  viewMode: "viewMode",
2881
2916
  linkAutocompleteSuggestions: "linkAutocompleteSuggestions",
@@ -2924,61 +2959,65 @@ const SvgArrowDropDown = (props) => /* @__PURE__ */ React.createElement("svg", {
2924
2959
  maskType: "alpha"
2925
2960
  } }, /* @__PURE__ */ React.createElement("path", { d: "M0 0h24v24H0z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "m12 15-5-5h10l-5 5Z" })));
2926
2961
  const DropDownIcon = SvgArrowDropDown;
2927
- const editorRoot = "_editorRoot_gm91f_47";
2928
- const editorWrapper = "_editorWrapper_gm91f_141";
2929
- const nestedListItem = "_nestedListItem_gm91f_145";
2930
- const toolbarRoot = "_toolbarRoot_gm91f_149";
2931
- const toolbarModeSwitch = "_toolbarModeSwitch_gm91f_170";
2932
- const toolbarToggleItem = "_toolbarToggleItem_gm91f_179";
2933
- const toolbarGroupOfGroups = "_toolbarGroupOfGroups_gm91f_189";
2934
- const toolbarToggleSingleGroup = "_toolbarToggleSingleGroup_gm91f_193";
2935
- const toolbarButton = "_toolbarButton_gm91f_207";
2936
- const toolbarNodeKindSelectContainer = "_toolbarNodeKindSelectContainer_gm91f_236";
2937
- const toolbarButtonDropdownContainer = "_toolbarButtonDropdownContainer_gm91f_237";
2938
- const toolbarCodeBlockLanguageSelectContent = "_toolbarCodeBlockLanguageSelectContent_gm91f_238";
2939
- const toolbarNodeKindSelectTrigger = "_toolbarNodeKindSelectTrigger_gm91f_252";
2940
- const toolbarButtonSelectTrigger = "_toolbarButtonSelectTrigger_gm91f_253";
2941
- const toolbarCodeBlockLanguageSelectTrigger = "_toolbarCodeBlockLanguageSelectTrigger_gm91f_286";
2942
- const toolbarNodeKindSelectItem = "_toolbarNodeKindSelectItem_gm91f_292";
2943
- const toolbarNodeKindSelectDropdownArrow = "_toolbarNodeKindSelectDropdownArrow_gm91f_315";
2944
- const contentEditable = "_contentEditable_gm91f_319";
2945
- const sandpackWrapper = "_sandpackWrapper_gm91f_327";
2946
- const frontmatterWrapper = "_frontmatterWrapper_gm91f_331";
2947
- const frontmatterToggleButton = "_frontmatterToggleButton_gm91f_341";
2948
- const frontmatterEditorTable = "_frontmatterEditorTable_gm91f_349";
2949
- const iconButton = "_iconButton_gm91f_367";
2950
- const frontmatterInput = "_frontmatterInput_gm91f_373";
2951
- const primaryButton = "_primaryButton_gm91f_388";
2952
- const linkDialogEditForm = "_linkDialogEditForm_gm91f_398";
2953
- const linkDialogInputContainer = "_linkDialogInputContainer_gm91f_404";
2954
- const linkDialogInputWrapper = "_linkDialogInputWrapper_gm91f_410";
2955
- const linkDialogInput = "_linkDialogInput_gm91f_404";
2956
- const linkDialogAutocompleteContainer = "_linkDialogAutocompleteContainer_gm91f_440";
2957
- const linkDialogAnchor = "_linkDialogAnchor_gm91f_485";
2958
- const linkDialogPopoverContent = "_linkDialogPopoverContent_gm91f_499";
2959
- const tableColumnEditorPopoverContent = "_tableColumnEditorPopoverContent_gm91f_499";
2960
- const dialogContent = "_dialogContent_gm91f_499";
2961
- const linkDialogPreviewAnchor = "_linkDialogPreviewAnchor_gm91f_513";
2962
- const tooltipContent = "_tooltipContent_gm91f_535";
2963
- const actionButton = "_actionButton_gm91f_549";
2964
- const primaryActionButton = "_primaryActionButton_gm91f_555";
2965
- const tableEditor = "_tableEditor_gm91f_564";
2966
- const toolCell = "_toolCell_gm91f_575";
2967
- const tableColumnEditorTrigger = "_tableColumnEditorTrigger_gm91f_592";
2968
- const tableRowEditorTrigger = "_tableRowEditorTrigger_gm91f_592";
2969
- const addRowButton = "_addRowButton_gm91f_592";
2970
- const addColumnButton = "_addColumnButton_gm91f_592";
2971
- const tableColumnEditorToolbar = "_tableColumnEditorToolbar_gm91f_626";
2972
- const toggleGroupRoot = "_toggleGroupRoot_gm91f_638";
2973
- const tableToolsColumn = "_tableToolsColumn_gm91f_655";
2974
- const leftAlignedCell = "_leftAlignedCell_gm91f_663";
2975
- const rightAlignedCell = "_rightAlignedCell_gm91f_667";
2976
- const centeredCell = "_centeredCell_gm91f_671";
2977
- const dialogOverlay = "_dialogOverlay_gm91f_699";
2978
- const overlayShow = "_overlayShow_gm91f_1";
2979
- const contentShow = "_contentShow_gm91f_1";
2962
+ const editorRoot = "_editorRoot_2nk92_47";
2963
+ const dropZone = "_dropZone_2nk92_141";
2964
+ const editorWrapper = "_editorWrapper_2nk92_149";
2965
+ const nestedListItem = "_nestedListItem_2nk92_153";
2966
+ const toolbarRoot = "_toolbarRoot_2nk92_157";
2967
+ const toolbarModeSwitch = "_toolbarModeSwitch_2nk92_178";
2968
+ const toolbarToggleItem = "_toolbarToggleItem_2nk92_187";
2969
+ const toolbarGroupOfGroups = "_toolbarGroupOfGroups_2nk92_197";
2970
+ const toolbarToggleSingleGroup = "_toolbarToggleSingleGroup_2nk92_201";
2971
+ const toolbarButton = "_toolbarButton_2nk92_215";
2972
+ const toolbarNodeKindSelectContainer = "_toolbarNodeKindSelectContainer_2nk92_244";
2973
+ const toolbarButtonDropdownContainer = "_toolbarButtonDropdownContainer_2nk92_245";
2974
+ const toolbarCodeBlockLanguageSelectContent = "_toolbarCodeBlockLanguageSelectContent_2nk92_246";
2975
+ const toolbarNodeKindSelectTrigger = "_toolbarNodeKindSelectTrigger_2nk92_260";
2976
+ const toolbarButtonSelectTrigger = "_toolbarButtonSelectTrigger_2nk92_261";
2977
+ const toolbarCodeBlockLanguageSelectTrigger = "_toolbarCodeBlockLanguageSelectTrigger_2nk92_294";
2978
+ const toolbarNodeKindSelectItem = "_toolbarNodeKindSelectItem_2nk92_300";
2979
+ const toolbarNodeKindSelectDropdownArrow = "_toolbarNodeKindSelectDropdownArrow_2nk92_323";
2980
+ const contentEditable = "_contentEditable_2nk92_327";
2981
+ const sandpackWrapper = "_sandpackWrapper_2nk92_335";
2982
+ const frontmatterWrapper = "_frontmatterWrapper_2nk92_339";
2983
+ const frontmatterToggleButton = "_frontmatterToggleButton_2nk92_349";
2984
+ const frontmatterEditorTable = "_frontmatterEditorTable_2nk92_357";
2985
+ const iconButton = "_iconButton_2nk92_375";
2986
+ const frontmatterInput = "_frontmatterInput_2nk92_381";
2987
+ const primaryButton = "_primaryButton_2nk92_396";
2988
+ const linkDialogEditForm = "_linkDialogEditForm_2nk92_406";
2989
+ const linkDialogInputContainer = "_linkDialogInputContainer_2nk92_412";
2990
+ const linkDialogInputWrapper = "_linkDialogInputWrapper_2nk92_418";
2991
+ const linkDialogInput = "_linkDialogInput_2nk92_412";
2992
+ const linkDialogAutocompleteContainer = "_linkDialogAutocompleteContainer_2nk92_448";
2993
+ const linkDialogAnchor = "_linkDialogAnchor_2nk92_493";
2994
+ const linkDialogPopoverContent = "_linkDialogPopoverContent_2nk92_507";
2995
+ const tableColumnEditorPopoverContent = "_tableColumnEditorPopoverContent_2nk92_507";
2996
+ const dialogContent = "_dialogContent_2nk92_507";
2997
+ const linkDialogPreviewAnchor = "_linkDialogPreviewAnchor_2nk92_521";
2998
+ const tooltipContent = "_tooltipContent_2nk92_543";
2999
+ const actionButton = "_actionButton_2nk92_557";
3000
+ const primaryActionButton = "_primaryActionButton_2nk92_563";
3001
+ const tableEditor = "_tableEditor_2nk92_572";
3002
+ const toolCell = "_toolCell_2nk92_583";
3003
+ const tableColumnEditorTrigger = "_tableColumnEditorTrigger_2nk92_600";
3004
+ const tableRowEditorTrigger = "_tableRowEditorTrigger_2nk92_600";
3005
+ const addRowButton = "_addRowButton_2nk92_600";
3006
+ const addColumnButton = "_addColumnButton_2nk92_600";
3007
+ const tableColumnEditorToolbar = "_tableColumnEditorToolbar_2nk92_634";
3008
+ const toggleGroupRoot = "_toggleGroupRoot_2nk92_646";
3009
+ const tableToolsColumn = "_tableToolsColumn_2nk92_663";
3010
+ const leftAlignedCell = "_leftAlignedCell_2nk92_671";
3011
+ const rightAlignedCell = "_rightAlignedCell_2nk92_675";
3012
+ const centeredCell = "_centeredCell_2nk92_679";
3013
+ const dialogOverlay = "_dialogOverlay_2nk92_707";
3014
+ const overlayShow = "_overlayShow_2nk92_1";
3015
+ const contentShow = "_contentShow_2nk92_1";
3016
+ const focusedImage = "_focusedImage_2nk92_749";
3017
+ const imageWrapper = "_imageWrapper_2nk92_753";
2980
3018
  const styles = {
2981
3019
  editorRoot,
3020
+ dropZone,
2982
3021
  editorWrapper,
2983
3022
  nestedListItem,
2984
3023
  toolbarRoot,
@@ -3030,7 +3069,9 @@ const styles = {
3030
3069
  centeredCell,
3031
3070
  dialogOverlay,
3032
3071
  overlayShow,
3033
- contentShow
3072
+ contentShow,
3073
+ focusedImage,
3074
+ imageWrapper
3034
3075
  };
3035
3076
  createCommand();
3036
3077
  const MAX_SUGGESTIONS$1 = 20;
@@ -3490,12 +3531,21 @@ const ActionButton = React__default.forwardRef(({ className, ...props }, ref) =>
3490
3531
  });
3491
3532
  const ToggleItem = React__default.forwardRef(
3492
3533
  ({ title, children, className: passedClassName, ...props }, forwardedRef) => {
3493
- return /* @__PURE__ */ React__default.createElement(RadixToolbar.ToggleItem, { className: classNames(passedClassName, styles.toolbarToggleItem), ...props, ref: forwardedRef }, /* @__PURE__ */ React__default.createElement(InstantTooltip, { title }, children));
3534
+ return /* @__PURE__ */ React__default.createElement(
3535
+ RadixToolbar.ToggleItem,
3536
+ {
3537
+ "data-toolbar-item": true,
3538
+ className: classNames(passedClassName, styles.toolbarToggleItem),
3539
+ ...props,
3540
+ ref: forwardedRef
3541
+ },
3542
+ /* @__PURE__ */ React__default.createElement(InstantTooltip, { title }, children)
3543
+ );
3494
3544
  }
3495
3545
  );
3496
3546
  const ToolbarButton = React__default.forwardRef(
3497
3547
  ({ title, children, ...props }, forwardedRef) => {
3498
- return /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { className: styles.toolbarButton, ...props, ref: forwardedRef }, /* @__PURE__ */ React__default.createElement(InstantTooltip, { title }, children));
3548
+ return /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { "data-toolbar-item": true, className: styles.toolbarButton, ...props, ref: forwardedRef }, /* @__PURE__ */ React__default.createElement(InstantTooltip, { title }, children));
3499
3549
  }
3500
3550
  );
3501
3551
  const ToggleSingleGroup = React__default.forwardRef(
@@ -3666,23 +3716,191 @@ const RichTextButtonSet = () => {
3666
3716
  const [toolbarComponents] = useEmitterValues("toolbarComponents");
3667
3717
  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, toolbarComponents.map((Component, index2) => /* @__PURE__ */ React__default.createElement(Component, { key: index2 })));
3668
3718
  };
3719
+ const getDOMSelection = (targetWindow) => CAN_USE_DOM ? (targetWindow || window).getSelection() : null;
3720
+ const INSERT_IMAGE_COMMAND = createCommand("INSERT_IMAGE_COMMAND");
3721
+ const ImagesPlugin = () => {
3722
+ const [editor] = useLexicalComposerContext();
3723
+ const [imageUploadHandler] = useEmitterValues("imageUploadHandler");
3724
+ useEffect(() => {
3725
+ return mergeRegister(
3726
+ editor.registerCommand(
3727
+ INSERT_IMAGE_COMMAND,
3728
+ (payload) => {
3729
+ const imageNode = $createImageNode(payload);
3730
+ $insertNodes([imageNode]);
3731
+ if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
3732
+ $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
3733
+ }
3734
+ return true;
3735
+ },
3736
+ COMMAND_PRIORITY_EDITOR
3737
+ ),
3738
+ editor.registerCommand(
3739
+ DRAGSTART_COMMAND,
3740
+ (event) => {
3741
+ return onDragStart(event);
3742
+ },
3743
+ COMMAND_PRIORITY_HIGH
3744
+ ),
3745
+ editor.registerCommand(
3746
+ DRAGOVER_COMMAND,
3747
+ (event) => {
3748
+ return onDragover(event);
3749
+ },
3750
+ COMMAND_PRIORITY_LOW
3751
+ ),
3752
+ editor.registerCommand(
3753
+ DROP_COMMAND,
3754
+ (event) => {
3755
+ return onDrop(event, editor, imageUploadHandler);
3756
+ },
3757
+ COMMAND_PRIORITY_HIGH
3758
+ )
3759
+ );
3760
+ }, [editor, imageUploadHandler]);
3761
+ return null;
3762
+ };
3763
+ const TRANSPARENT_IMAGE = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
3764
+ const img = document.createElement("img");
3765
+ img.src = TRANSPARENT_IMAGE;
3766
+ function onDragStart(event) {
3767
+ const node = getImageNodeInSelection();
3768
+ if (!node) {
3769
+ return false;
3770
+ }
3771
+ const dataTransfer = event.dataTransfer;
3772
+ if (!dataTransfer) {
3773
+ return false;
3774
+ }
3775
+ dataTransfer.setData("text/plain", "_");
3776
+ dataTransfer.setDragImage(img, 0, 0);
3777
+ dataTransfer.setData(
3778
+ "application/x-lexical-drag",
3779
+ JSON.stringify({
3780
+ data: {
3781
+ altText: node.__altText,
3782
+ title: node.__title,
3783
+ key: node.getKey(),
3784
+ src: node.__src
3785
+ },
3786
+ type: "image"
3787
+ })
3788
+ );
3789
+ return true;
3790
+ }
3791
+ function onDragover(event) {
3792
+ var _a;
3793
+ let cbPayload = Array.from(((_a = event.dataTransfer) == null ? void 0 : _a.items) || []);
3794
+ cbPayload = cbPayload.filter((i) => /image/.test(i.type));
3795
+ if (cbPayload.length > 0) {
3796
+ event.preventDefault();
3797
+ return true;
3798
+ }
3799
+ const node = getImageNodeInSelection();
3800
+ if (!node) {
3801
+ return false;
3802
+ }
3803
+ if (!canDropImage(event)) {
3804
+ event.preventDefault();
3805
+ }
3806
+ return true;
3807
+ }
3808
+ function onDrop(event, editor, imageUploadHandler) {
3809
+ var _a;
3810
+ let cbPayload = Array.from(((_a = event.dataTransfer) == null ? void 0 : _a.items) || []);
3811
+ cbPayload = cbPayload.filter((i) => /image/.test(i.type));
3812
+ if (cbPayload.length > 0) {
3813
+ event.preventDefault();
3814
+ imageUploadHandler(cbPayload[0].getAsFile()).then((url) => {
3815
+ editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
3816
+ src: url,
3817
+ altText: ""
3818
+ });
3819
+ }).catch((e) => {
3820
+ throw e;
3821
+ });
3822
+ return true;
3823
+ }
3824
+ const node = getImageNodeInSelection();
3825
+ if (!node) {
3826
+ return false;
3827
+ }
3828
+ const data = getDragImageData(event);
3829
+ if (!data) {
3830
+ return false;
3831
+ }
3832
+ event.preventDefault();
3833
+ if (canDropImage(event)) {
3834
+ const range = getDragSelection(event);
3835
+ node.remove();
3836
+ const rangeSelection = $createRangeSelection();
3837
+ if (range !== null && range !== void 0) {
3838
+ rangeSelection.applyDOMRange(range);
3839
+ }
3840
+ $setSelection(rangeSelection);
3841
+ editor.dispatchCommand(INSERT_IMAGE_COMMAND, data);
3842
+ }
3843
+ return true;
3844
+ }
3845
+ function getImageNodeInSelection() {
3846
+ const selection = $getSelection();
3847
+ if (!$isNodeSelection(selection)) {
3848
+ return null;
3849
+ }
3850
+ const nodes = selection.getNodes();
3851
+ const node = nodes[0];
3852
+ return $isImageNode(node) ? node : null;
3853
+ }
3854
+ function getDragImageData(event) {
3855
+ var _a;
3856
+ const dragData = (_a = event.dataTransfer) == null ? void 0 : _a.getData("application/x-lexical-drag");
3857
+ if (!dragData) {
3858
+ return null;
3859
+ }
3860
+ const { type, data } = JSON.parse(dragData);
3861
+ if (type !== "image") {
3862
+ return null;
3863
+ }
3864
+ return data;
3865
+ }
3866
+ function canDropImage(event) {
3867
+ const target = event.target;
3868
+ return !!(target && target instanceof HTMLElement && target.parentElement);
3869
+ }
3870
+ function getDragSelection(event) {
3871
+ let range;
3872
+ const target = event.target;
3873
+ const targetWindow = target == null ? null : target.nodeType === 9 ? target.defaultView : target.ownerDocument.defaultView;
3874
+ const domSelection = getDOMSelection(targetWindow);
3875
+ if (document.caretRangeFromPoint) {
3876
+ range = document.caretRangeFromPoint(event.clientX, event.clientY);
3877
+ } else if (event.rangeParent && domSelection !== null) {
3878
+ domSelection.collapse(event.rangeParent, event.rangeOffset || 0);
3879
+ range = domSelection.getRangeAt(0);
3880
+ } else {
3881
+ throw Error(`Cannot get the selection when dragging`);
3882
+ }
3883
+ return range;
3884
+ }
3669
3885
  const LazyFrontmatterEditor = React__default.lazy(
3670
- () => import("./FrontmatterEditor-a8263f5d.js").then((module) => ({ default: module.FrontmatterEditor }))
3886
+ () => import("./FrontmatterEditor-2362b83d.js").then((module) => ({ default: module.FrontmatterEditor }))
3671
3887
  );
3672
- const LazyJsxEditor = React__default.lazy(() => import("./JsxEditor-4511b188.js").then((module) => ({ default: module.JsxEditor })));
3888
+ const LazyJsxEditor = React__default.lazy(() => import("./JsxEditor-833132d2.js").then((module) => ({ default: module.JsxEditor })));
3673
3889
  const LazySandpackEditor = React__default.lazy(
3674
- () => import("./SandpackEditor-0a3bfaf0.js").then((module) => ({ default: module.SandpackEditor }))
3890
+ () => import("./SandpackEditor-8562657d.js").then((module) => ({ default: module.SandpackEditor }))
3675
3891
  );
3676
3892
  const LazyCodeBlockEditor = React__default.lazy(
3677
- () => import("./CodeBlockEditor-85a8b6b0.js").then((module) => ({ default: module.CodeBlockEditor }))
3893
+ () => import("./CodeBlockEditor-b4eb4a95.js").then((module) => ({ default: module.CodeBlockEditor }))
3678
3894
  );
3679
- const LazyTableEditor = React__default.lazy(() => import("./TableEditor-0aedb943.js").then((module) => ({ default: module.TableEditor })));
3895
+ const LazyTableEditor = React__default.lazy(() => import("./TableEditor-e1050552.js").then((module) => ({ default: module.TableEditor })));
3896
+ const LazyImageEditor = React__default.lazy(() => import("./ImageEditor-3afec501.js").then((module) => ({ default: module.ImageEditor })));
3680
3897
  const defaultNodeDecorators = {
3681
3898
  FrontmatterEditor: LazyFrontmatterEditor,
3682
3899
  JsxEditor: LazyJsxEditor,
3683
3900
  SandpackEditor: LazySandpackEditor,
3684
3901
  CodeBlockEditor: LazyCodeBlockEditor,
3685
- TableEditor: LazyTableEditor
3902
+ TableEditor: LazyTableEditor,
3903
+ ImageEditor: LazyImageEditor
3686
3904
  };
3687
3905
  const defaultToolbarComponents = [
3688
3906
  BoldItalicUnderlineButtons,
@@ -3752,6 +3970,7 @@ const MDXEditor = React__default.forwardRef(
3752
3970
  className,
3753
3971
  contentEditableClassName,
3754
3972
  toolbarComponents = defaultToolbarComponents,
3973
+ imageUploadHandler,
3755
3974
  markdownParseOptions: {
3756
3975
  syntaxExtensions = Object.values(defaultSyntaxExtensions),
3757
3976
  mdastExtensions = Object.values(defaultMdastExtensions),
@@ -3784,7 +4003,9 @@ const MDXEditor = React__default.forwardRef(
3784
4003
  nodeDecoratorComponents: defaultNodeDecorators
3785
4004
  },
3786
4005
  nodes: lexicalNodes,
3787
- onError: (error) => console.error(error)
4006
+ onError: (error) => {
4007
+ throw error;
4008
+ }
3788
4009
  }
3789
4010
  },
3790
4011
  /* @__PURE__ */ React__default.createElement(
@@ -3810,7 +4031,8 @@ const MDXEditor = React__default.forwardRef(
3810
4031
  toMarkdownOptions,
3811
4032
  toMarkdownExtensions
3812
4033
  },
3813
- lexicalNodes
4034
+ lexicalNodes,
4035
+ imageUploadHandler
3814
4036
  },
3815
4037
  /* @__PURE__ */ React__default.createElement(ToolbarPlugin, null),
3816
4038
  /* @__PURE__ */ React__default.createElement(ViewModeToggler, null, /* @__PURE__ */ React__default.createElement(
@@ -3828,6 +4050,7 @@ const MDXEditor = React__default.forwardRef(
3828
4050
  /* @__PURE__ */ React__default.createElement(TabIndentationPlugin, null),
3829
4051
  /* @__PURE__ */ React__default.createElement(LinkDialogPlugin, null),
3830
4052
  /* @__PURE__ */ React__default.createElement(SharedHistoryPlugin, null),
4053
+ /* @__PURE__ */ React__default.createElement(ImagesPlugin, null),
3831
4054
  /* @__PURE__ */ React__default.createElement(PatchedMarkdownShortcutPlugin, null),
3832
4055
  /* @__PURE__ */ React__default.createElement(MDXMethods, { mdxRef: ref })
3833
4056
  )
@@ -3850,7 +4073,7 @@ const MDXMethods = ({ mdxRef }) => {
3850
4073
  return null;
3851
4074
  };
3852
4075
  export {
3853
- $createAdmonitionNode as $,
4076
+ $isImageNode as $,
3854
4077
  AdmonitionNode as A,
3855
4078
  CodeBlockNode as C,
3856
4079
  FrontmatterNode as F,
@@ -3860,15 +4083,15 @@ export {
3860
4083
  SharedHistoryPlugin as S,
3861
4084
  ToolbarComponents as T,
3862
4085
  usePublisher as a,
3863
- $isAdmonitionNode as b,
3864
- $createCodeBlockNode as c,
3865
- $isCodeBlockNode as d,
4086
+ $createAdmonitionNode as b,
4087
+ $isAdmonitionNode as c,
4088
+ $createCodeBlockNode as d,
3866
4089
  exportLexicalTreeToMdast as e,
3867
- $createFrontmatterNode as f,
3868
- $isFrontmatterNode as g,
3869
- $createImageNode as h,
4090
+ $isCodeBlockNode as f,
4091
+ $createFrontmatterNode as g,
4092
+ $isFrontmatterNode as h,
3870
4093
  importMdastTreeToLexical as i,
3871
- $isImageNode as j,
4094
+ $createImageNode as j,
3872
4095
  $createJsxNode as k,
3873
4096
  $isJsxNode as l,
3874
4097
  SandpackNode as m,