@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.
- package/dist/{CodeBlockEditor-7e15d01c.cjs → CodeBlockEditor-4ddeaaa3.cjs} +1 -1
- package/dist/{CodeBlockEditor-85a8b6b0.js → CodeBlockEditor-b4eb4a95.js} +2 -2
- package/dist/{FrontmatterEditor-a8263f5d.js → FrontmatterEditor-2362b83d.js} +1 -1
- package/dist/{FrontmatterEditor-bd112c96.cjs → FrontmatterEditor-510a024d.cjs} +1 -1
- package/dist/ImageEditor-04e57c59.cjs +1 -0
- package/dist/ImageEditor-3afec501.js +190 -0
- package/dist/{JsxEditor-85e636d6.cjs → JsxEditor-345a3902.cjs} +1 -1
- package/dist/{JsxEditor-4511b188.js → JsxEditor-833132d2.js} +1 -1
- package/dist/{SandpackEditor-04d3c3ce.cjs → SandpackEditor-3128b9fb.cjs} +1 -1
- package/dist/{SandpackEditor-0a3bfaf0.js → SandpackEditor-8562657d.js} +2 -2
- package/dist/{TableEditor-d0c5800f.cjs → TableEditor-a4fa1bc5.cjs} +1 -1
- package/dist/{TableEditor-0aedb943.js → TableEditor-e1050552.js} +2 -2
- package/dist/{index-11db5fbf.js → index-a1fa6c7f.js} +305 -82
- package/dist/index-c5c6df38.cjs +1 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +23 -1
- package/dist/index.js +9 -9
- package/dist/style.css +146 -128
- package/dist/{useCodeMirrorRef-cba12130.cjs → useCodeMirrorRef-67194f45.cjs} +1 -1
- package/dist/{useCodeMirrorRef-89746e60.js → useCodeMirrorRef-71e54daf.js} +1 -1
- package/package.json +5 -3
- package/dist/index-731c8e58.cjs +0 -1
|
@@ -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
|
-
|
|
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.
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
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 = "
|
|
2928
|
-
const
|
|
2929
|
-
const
|
|
2930
|
-
const
|
|
2931
|
-
const
|
|
2932
|
-
const
|
|
2933
|
-
const
|
|
2934
|
-
const
|
|
2935
|
-
const
|
|
2936
|
-
const
|
|
2937
|
-
const
|
|
2938
|
-
const
|
|
2939
|
-
const
|
|
2940
|
-
const
|
|
2941
|
-
const
|
|
2942
|
-
const
|
|
2943
|
-
const
|
|
2944
|
-
const
|
|
2945
|
-
const
|
|
2946
|
-
const
|
|
2947
|
-
const
|
|
2948
|
-
const
|
|
2949
|
-
const
|
|
2950
|
-
const
|
|
2951
|
-
const
|
|
2952
|
-
const
|
|
2953
|
-
const
|
|
2954
|
-
const
|
|
2955
|
-
const
|
|
2956
|
-
const
|
|
2957
|
-
const
|
|
2958
|
-
const
|
|
2959
|
-
const
|
|
2960
|
-
const
|
|
2961
|
-
const
|
|
2962
|
-
const
|
|
2963
|
-
const
|
|
2964
|
-
const
|
|
2965
|
-
const
|
|
2966
|
-
const
|
|
2967
|
-
const
|
|
2968
|
-
const
|
|
2969
|
-
const
|
|
2970
|
-
const
|
|
2971
|
-
const
|
|
2972
|
-
const
|
|
2973
|
-
const
|
|
2974
|
-
const
|
|
2975
|
-
const
|
|
2976
|
-
const
|
|
2977
|
-
const
|
|
2978
|
-
const
|
|
2979
|
-
const
|
|
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(
|
|
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-
|
|
3886
|
+
() => import("./FrontmatterEditor-2362b83d.js").then((module) => ({ default: module.FrontmatterEditor }))
|
|
3671
3887
|
);
|
|
3672
|
-
const LazyJsxEditor = React__default.lazy(() => import("./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-
|
|
3890
|
+
() => import("./SandpackEditor-8562657d.js").then((module) => ({ default: module.SandpackEditor }))
|
|
3675
3891
|
);
|
|
3676
3892
|
const LazyCodeBlockEditor = React__default.lazy(
|
|
3677
|
-
() => import("./CodeBlockEditor-
|
|
3893
|
+
() => import("./CodeBlockEditor-b4eb4a95.js").then((module) => ({ default: module.CodeBlockEditor }))
|
|
3678
3894
|
);
|
|
3679
|
-
const LazyTableEditor = React__default.lazy(() => import("./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) =>
|
|
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
|
-
$
|
|
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
|
-
$
|
|
3864
|
-
$
|
|
3865
|
-
$
|
|
4086
|
+
$createAdmonitionNode as b,
|
|
4087
|
+
$isAdmonitionNode as c,
|
|
4088
|
+
$createCodeBlockNode as d,
|
|
3866
4089
|
exportLexicalTreeToMdast as e,
|
|
3867
|
-
$
|
|
3868
|
-
$
|
|
3869
|
-
$
|
|
4090
|
+
$isCodeBlockNode as f,
|
|
4091
|
+
$createFrontmatterNode as g,
|
|
4092
|
+
$isFrontmatterNode as h,
|
|
3870
4093
|
importMdastTreeToLexical as i,
|
|
3871
|
-
$
|
|
4094
|
+
$createImageNode as j,
|
|
3872
4095
|
$createJsxNode as k,
|
|
3873
4096
|
$isJsxNode as l,
|
|
3874
4097
|
SandpackNode as m,
|