@mdxeditor/editor 3.55.0 → 4.0.1
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/defaultSvgIcons.js +0 -7
- package/dist/index.d.ts +11 -115
- package/dist/index.js +2 -12
- package/dist/plugins/codeblock/CodeBlockNode.js +4 -4
- package/dist/plugins/codeblock/MdastCodeVisitor.js +3 -2
- package/dist/plugins/codeblock/findCodeBlockDescriptor.js +8 -0
- package/dist/plugins/codeblock/index.js +3 -3
- package/dist/plugins/codemirror/CodeMirrorEditor.js +2 -2
- package/dist/plugins/codemirror/index.js +4 -4
- package/dist/plugins/{sandpack → codemirror}/useCodeMirrorRef.js +3 -3
- package/dist/plugins/core/NestedLexicalEditor.js +4 -1
- package/dist/plugins/core/index.js +4 -1
- package/dist/plugins/table/TableEditor.js +5 -2
- package/dist/plugins/toolbar/components/KitchenSinkToolbar.js +1 -4
- package/dist/style.css +313 -307
- package/dist/styles/lexical-theme.module.css.js +21 -18
- package/dist/styles/lexicalTheme.js +1 -0
- package/dist/styles/ui.module.css.js +94 -97
- package/package.json +1 -2
- package/dist/plugins/sandpack/SandpackEditor.js +0 -56
- package/dist/plugins/sandpack/index.js +0 -83
- package/dist/plugins/toolbar/components/InsertSandpack.js +0 -15
- package/dist/plugins/toolbar/components/ShowSandpackInfo.js +0 -41
|
@@ -1,21 +1,22 @@
|
|
|
1
|
-
const bold = "
|
|
2
|
-
const italic = "
|
|
3
|
-
const underline = "
|
|
4
|
-
const strikethrough = "
|
|
5
|
-
const underlineStrikethrough = "
|
|
6
|
-
const subscript = "
|
|
7
|
-
const superscript = "
|
|
8
|
-
const code = "
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
const
|
|
16
|
-
const
|
|
17
|
-
const
|
|
18
|
-
const
|
|
1
|
+
const bold = "_bold_6j9u9_10";
|
|
2
|
+
const italic = "_italic_6j9u9_14";
|
|
3
|
+
const underline = "_underline_6j9u9_18";
|
|
4
|
+
const strikethrough = "_strikethrough_6j9u9_34";
|
|
5
|
+
const underlineStrikethrough = "_underlineStrikethrough_6j9u9_38";
|
|
6
|
+
const subscript = "_subscript_6j9u9_42";
|
|
7
|
+
const superscript = "_superscript_6j9u9_47";
|
|
8
|
+
const code = "_code_6j9u9_52";
|
|
9
|
+
const quote = "_quote_6j9u9_59";
|
|
10
|
+
const nestedListItem = "_nestedListItem_6j9u9_66";
|
|
11
|
+
const listitem = "_listitem_6j9u9_76";
|
|
12
|
+
const listItemChecked = "_listItemChecked_6j9u9_80";
|
|
13
|
+
const listItemUnchecked = "_listItemUnchecked_6j9u9_81";
|
|
14
|
+
const admonitionDanger = "_admonitionDanger_6j9u9_158";
|
|
15
|
+
const admonitionInfo = "_admonitionInfo_6j9u9_159";
|
|
16
|
+
const admonitionNote = "_admonitionNote_6j9u9_160";
|
|
17
|
+
const admonitionTip = "_admonitionTip_6j9u9_161";
|
|
18
|
+
const admonitionCaution = "_admonitionCaution_6j9u9_162";
|
|
19
|
+
const mdxExpression = "_mdxExpression_6j9u9_195";
|
|
19
20
|
const lexicalThemeStyles = {
|
|
20
21
|
bold,
|
|
21
22
|
italic,
|
|
@@ -25,6 +26,7 @@ const lexicalThemeStyles = {
|
|
|
25
26
|
subscript,
|
|
26
27
|
superscript,
|
|
27
28
|
code,
|
|
29
|
+
quote,
|
|
28
30
|
nestedListItem,
|
|
29
31
|
listitem,
|
|
30
32
|
listItemChecked,
|
|
@@ -51,6 +53,7 @@ export {
|
|
|
51
53
|
listitem,
|
|
52
54
|
mdxExpression,
|
|
53
55
|
nestedListItem,
|
|
56
|
+
quote,
|
|
54
57
|
strikethrough,
|
|
55
58
|
subscript,
|
|
56
59
|
superscript,
|
|
@@ -1,98 +1,97 @@
|
|
|
1
|
-
const editorRoot = "
|
|
2
|
-
const editorWrapper = "
|
|
3
|
-
const toolbarRoot = "
|
|
4
|
-
const readOnlyToolbarRoot = "
|
|
5
|
-
const toolbarToggleItem = "
|
|
6
|
-
const toolbarGroupOfGroups = "
|
|
7
|
-
const toolbarToggleSingleGroup = "
|
|
8
|
-
const toolbarButton = "
|
|
9
|
-
const activeToolbarButton = "
|
|
10
|
-
const toolbarButtonDropdownContainer = "
|
|
11
|
-
const selectContainer = "
|
|
12
|
-
const selectItem = "
|
|
13
|
-
const toolbarButtonSelectTrigger = "
|
|
14
|
-
const selectTrigger = "
|
|
15
|
-
const selectDropdownArrow = "
|
|
16
|
-
const contentEditable = "
|
|
17
|
-
const codeMirrorWrapper = "
|
|
18
|
-
const
|
|
19
|
-
const
|
|
20
|
-
const
|
|
21
|
-
const
|
|
22
|
-
const
|
|
23
|
-
const
|
|
24
|
-
const
|
|
25
|
-
const
|
|
26
|
-
const
|
|
27
|
-
const
|
|
28
|
-
const
|
|
29
|
-
const
|
|
30
|
-
const
|
|
31
|
-
const
|
|
32
|
-
const
|
|
33
|
-
const
|
|
34
|
-
const
|
|
35
|
-
const
|
|
36
|
-
const
|
|
37
|
-
const
|
|
38
|
-
const
|
|
39
|
-
const
|
|
40
|
-
const
|
|
41
|
-
const
|
|
42
|
-
const
|
|
43
|
-
const
|
|
44
|
-
const
|
|
45
|
-
const
|
|
46
|
-
const
|
|
47
|
-
const
|
|
48
|
-
const
|
|
49
|
-
const
|
|
50
|
-
const
|
|
51
|
-
const
|
|
52
|
-
const
|
|
53
|
-
const
|
|
54
|
-
const
|
|
55
|
-
const
|
|
56
|
-
const
|
|
57
|
-
const
|
|
58
|
-
const
|
|
59
|
-
const
|
|
60
|
-
const
|
|
61
|
-
const
|
|
62
|
-
const
|
|
63
|
-
const
|
|
64
|
-
const
|
|
65
|
-
const
|
|
66
|
-
const
|
|
67
|
-
const
|
|
68
|
-
const
|
|
69
|
-
const
|
|
70
|
-
const
|
|
71
|
-
const
|
|
72
|
-
const
|
|
73
|
-
const
|
|
74
|
-
const
|
|
75
|
-
const
|
|
76
|
-
const
|
|
77
|
-
const
|
|
78
|
-
const
|
|
79
|
-
const
|
|
80
|
-
const
|
|
81
|
-
const
|
|
82
|
-
const
|
|
83
|
-
const
|
|
84
|
-
const
|
|
85
|
-
const
|
|
86
|
-
const
|
|
87
|
-
const
|
|
88
|
-
const
|
|
89
|
-
const
|
|
90
|
-
const
|
|
91
|
-
const
|
|
92
|
-
const
|
|
93
|
-
const
|
|
94
|
-
const
|
|
95
|
-
const inputSizer = "_inputSizer_1e2ox_1245";
|
|
1
|
+
const editorRoot = "_editorRoot_f3hmk_53";
|
|
2
|
+
const editorWrapper = "_editorWrapper_f3hmk_155";
|
|
3
|
+
const toolbarRoot = "_toolbarRoot_f3hmk_162";
|
|
4
|
+
const readOnlyToolbarRoot = "_readOnlyToolbarRoot_f3hmk_189";
|
|
5
|
+
const toolbarToggleItem = "_toolbarToggleItem_f3hmk_208";
|
|
6
|
+
const toolbarGroupOfGroups = "_toolbarGroupOfGroups_f3hmk_219";
|
|
7
|
+
const toolbarToggleSingleGroup = "_toolbarToggleSingleGroup_f3hmk_224";
|
|
8
|
+
const toolbarButton = "_toolbarButton_f3hmk_239";
|
|
9
|
+
const activeToolbarButton = "_activeToolbarButton_f3hmk_275";
|
|
10
|
+
const toolbarButtonDropdownContainer = "_toolbarButtonDropdownContainer_f3hmk_286";
|
|
11
|
+
const selectContainer = "_selectContainer_f3hmk_288";
|
|
12
|
+
const selectItem = "_selectItem_f3hmk_301";
|
|
13
|
+
const toolbarButtonSelectTrigger = "_toolbarButtonSelectTrigger_f3hmk_307";
|
|
14
|
+
const selectTrigger = "_selectTrigger_f3hmk_308";
|
|
15
|
+
const selectDropdownArrow = "_selectDropdownArrow_f3hmk_373";
|
|
16
|
+
const contentEditable = "_contentEditable_f3hmk_379";
|
|
17
|
+
const codeMirrorWrapper = "_codeMirrorWrapper_f3hmk_391";
|
|
18
|
+
const codeMirrorToolbar = "_codeMirrorToolbar_f3hmk_408";
|
|
19
|
+
const propertyPanelTitle = "_propertyPanelTitle_f3hmk_430";
|
|
20
|
+
const propertyEditorTable = "_propertyEditorTable_f3hmk_438";
|
|
21
|
+
const iconButton = "_iconButton_f3hmk_456";
|
|
22
|
+
const readOnlyColumnCell = "_readOnlyColumnCell_f3hmk_461";
|
|
23
|
+
const buttonsFooter = "_buttonsFooter_f3hmk_474";
|
|
24
|
+
const propertyEditorInput = "_propertyEditorInput_f3hmk_480";
|
|
25
|
+
const primaryButton = "_primaryButton_f3hmk_506";
|
|
26
|
+
const secondaryButton = "_secondaryButton_f3hmk_507";
|
|
27
|
+
const smallButton = "_smallButton_f3hmk_522";
|
|
28
|
+
const dialogForm = "_dialogForm_f3hmk_534";
|
|
29
|
+
const linkDialogEditForm = "_linkDialogEditForm_f3hmk_540";
|
|
30
|
+
const linkDialogInputContainer = "_linkDialogInputContainer_f3hmk_548";
|
|
31
|
+
const linkDialogInputWrapper = "_linkDialogInputWrapper_f3hmk_554";
|
|
32
|
+
const linkDialogInput = "_linkDialogInput_f3hmk_548";
|
|
33
|
+
const linkDialogAnchor = "_linkDialogAnchor_f3hmk_586";
|
|
34
|
+
const linkDialogPopoverContent = "_linkDialogPopoverContent_f3hmk_600";
|
|
35
|
+
const tableColumnEditorPopoverContent = "_tableColumnEditorPopoverContent_f3hmk_601";
|
|
36
|
+
const dialogContent = "_dialogContent_f3hmk_602";
|
|
37
|
+
const largeDialogContent = "_largeDialogContent_f3hmk_614";
|
|
38
|
+
const dialogTitle = "_dialogTitle_f3hmk_624";
|
|
39
|
+
const dialogCloseButton = "_dialogCloseButton_f3hmk_630";
|
|
40
|
+
const popoverContent = "_popoverContent_f3hmk_637";
|
|
41
|
+
const popoverArrow = "_popoverArrow_f3hmk_649";
|
|
42
|
+
const linkDialogPreviewAnchor = "_linkDialogPreviewAnchor_f3hmk_653";
|
|
43
|
+
const tooltipTrigger = "_tooltipTrigger_f3hmk_676";
|
|
44
|
+
const tooltipContent = "_tooltipContent_f3hmk_680";
|
|
45
|
+
const actionButton = "_actionButton_f3hmk_694";
|
|
46
|
+
const primaryActionButton = "_primaryActionButton_f3hmk_701";
|
|
47
|
+
const tableEditor = "_tableEditor_f3hmk_713";
|
|
48
|
+
const toolCell = "_toolCell_f3hmk_724";
|
|
49
|
+
const tableColumnEditorTrigger = "_tableColumnEditorTrigger_f3hmk_743";
|
|
50
|
+
const addRowButton = "_addRowButton_f3hmk_745";
|
|
51
|
+
const addColumnButton = "_addColumnButton_f3hmk_746";
|
|
52
|
+
const tableColumnEditorToolbar = "_tableColumnEditorToolbar_f3hmk_788";
|
|
53
|
+
const toggleGroupRoot = "_toggleGroupRoot_f3hmk_801";
|
|
54
|
+
const tableToolsColumn = "_tableToolsColumn_f3hmk_819";
|
|
55
|
+
const leftAlignedCell = "_leftAlignedCell_f3hmk_828";
|
|
56
|
+
const rightAlignedCell = "_rightAlignedCell_f3hmk_832";
|
|
57
|
+
const centeredCell = "_centeredCell_f3hmk_836";
|
|
58
|
+
const dialogOverlay = "_dialogOverlay_f3hmk_869";
|
|
59
|
+
const focusedImage = "_focusedImage_f3hmk_915";
|
|
60
|
+
const imageWrapper = "_imageWrapper_f3hmk_919";
|
|
61
|
+
const editImageToolbar = "_editImageToolbar_f3hmk_932";
|
|
62
|
+
const editImageButton = "_editImageButton_f3hmk_936";
|
|
63
|
+
const inlineEditor = "_inlineEditor_f3hmk_942";
|
|
64
|
+
const blockEditor = "_blockEditor_f3hmk_951";
|
|
65
|
+
const nestedEditor = "_nestedEditor_f3hmk_960";
|
|
66
|
+
const genericComponentName = "_genericComponentName_f3hmk_979";
|
|
67
|
+
const diffSourceToggleWrapper = "_diffSourceToggleWrapper_f3hmk_985";
|
|
68
|
+
const ggDiffSourceToggle = "_ggDiffSourceToggle_f3hmk_993";
|
|
69
|
+
const diffSourceToggle = "_diffSourceToggle_f3hmk_985";
|
|
70
|
+
const selectWithLabel = "_selectWithLabel_f3hmk_1011";
|
|
71
|
+
const toolbarTitleMode = "_toolbarTitleMode_f3hmk_1026";
|
|
72
|
+
const imageControlWrapperResizing = "_imageControlWrapperResizing_f3hmk_1031";
|
|
73
|
+
const imageResizer = "_imageResizer_f3hmk_1035";
|
|
74
|
+
const imageResizerN = "_imageResizerN_f3hmk_1044";
|
|
75
|
+
const imageResizerNe = "_imageResizerNe_f3hmk_1050";
|
|
76
|
+
const imageResizerE = "_imageResizerE_f3hmk_1056";
|
|
77
|
+
const imageResizerSe = "_imageResizerSe_f3hmk_1062";
|
|
78
|
+
const imageResizerS = "_imageResizerS_f3hmk_1062";
|
|
79
|
+
const imageResizerSw = "_imageResizerSw_f3hmk_1074";
|
|
80
|
+
const imageResizerW = "_imageResizerW_f3hmk_1080";
|
|
81
|
+
const imageResizerNw = "_imageResizerNw_f3hmk_1086";
|
|
82
|
+
const imagePlaceholder = "_imagePlaceholder_f3hmk_1092";
|
|
83
|
+
const imageDimensionsContainer = "_imageDimensionsContainer_f3hmk_1100";
|
|
84
|
+
const placeholder = "_placeholder_f3hmk_1105";
|
|
85
|
+
const rootContentEditableWrapper = "_rootContentEditableWrapper_f3hmk_1118";
|
|
86
|
+
const downshiftInputWrapper = "_downshiftInputWrapper_f3hmk_1128";
|
|
87
|
+
const downshiftInput = "_downshiftInput_f3hmk_1128";
|
|
88
|
+
const downshiftAutocompleteContainer = "_downshiftAutocompleteContainer_f3hmk_1159";
|
|
89
|
+
const textInput = "_textInput_f3hmk_1205";
|
|
90
|
+
const multiFieldForm = "_multiFieldForm_f3hmk_1213";
|
|
91
|
+
const formField = "_formField_f3hmk_1219";
|
|
92
|
+
const markdownParseError = "_markdownParseError_f3hmk_1230";
|
|
93
|
+
const popupContainer = "_popupContainer_f3hmk_1239";
|
|
94
|
+
const inputSizer = "_inputSizer_f3hmk_1244";
|
|
96
95
|
const styles = {
|
|
97
96
|
editorRoot,
|
|
98
97
|
editorWrapper,
|
|
@@ -111,7 +110,6 @@ const styles = {
|
|
|
111
110
|
selectDropdownArrow,
|
|
112
111
|
contentEditable,
|
|
113
112
|
codeMirrorWrapper,
|
|
114
|
-
sandPackWrapper,
|
|
115
113
|
codeMirrorToolbar,
|
|
116
114
|
propertyPanelTitle,
|
|
117
115
|
propertyEditorTable,
|
|
@@ -261,7 +259,6 @@ export {
|
|
|
261
259
|
readOnlyToolbarRoot,
|
|
262
260
|
rightAlignedCell,
|
|
263
261
|
rootContentEditableWrapper,
|
|
264
|
-
sandPackWrapper,
|
|
265
262
|
secondaryButton,
|
|
266
263
|
selectContainer,
|
|
267
264
|
selectDropdownArrow,
|
package/package.json
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"*.css"
|
|
12
12
|
],
|
|
13
13
|
"type": "module",
|
|
14
|
-
"version": "
|
|
14
|
+
"version": "4.0.1",
|
|
15
15
|
"description": "React component for rich text markdown editing",
|
|
16
16
|
"scripts": {
|
|
17
17
|
"build": "vite build",
|
|
@@ -44,7 +44,6 @@
|
|
|
44
44
|
"@codemirror/merge": "^6.4.0",
|
|
45
45
|
"@codemirror/state": "^6.4.0",
|
|
46
46
|
"@codemirror/view": "^6.23.0",
|
|
47
|
-
"@codesandbox/sandpack-react": "^2.20.0",
|
|
48
47
|
"@lexical/clipboard": "^0.35.0",
|
|
49
48
|
"@lexical/link": "^0.35.0",
|
|
50
49
|
"@lexical/list": "^0.35.0",
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import { SandpackProvider, SandpackLayout, SandpackCodeEditor, SandpackPreview, useSandpack } from "@codesandbox/sandpack-react";
|
|
2
|
-
import { useCellValues } from "@mdxeditor/gurx";
|
|
3
|
-
import React__default from "react";
|
|
4
|
-
import styles from "../../styles/ui.module.css.js";
|
|
5
|
-
import { useCodeBlockEditorContext } from "../codeblock/CodeBlockNode.js";
|
|
6
|
-
import { readOnly$, iconComponentFor$, useTranslation } from "../core/index.js";
|
|
7
|
-
import { useCodeMirrorRef } from "./useCodeMirrorRef.js";
|
|
8
|
-
const CodeUpdateEmitter = ({ onChange, snippetFileName }) => {
|
|
9
|
-
const { sandpack } = useSandpack();
|
|
10
|
-
onChange(sandpack.files[snippetFileName].code);
|
|
11
|
-
return null;
|
|
12
|
-
};
|
|
13
|
-
const SandpackEditor = ({ nodeKey, code, focusEmitter, preset }) => {
|
|
14
|
-
const codeMirrorRef = useCodeMirrorRef(nodeKey, "sandpack", "jsx", focusEmitter);
|
|
15
|
-
const [readOnly, iconComponentFor] = useCellValues(readOnly$, iconComponentFor$);
|
|
16
|
-
const { setCode } = useCodeBlockEditorContext();
|
|
17
|
-
const { parentEditor, lexicalNode } = useCodeBlockEditorContext();
|
|
18
|
-
const t = useTranslation();
|
|
19
|
-
return /* @__PURE__ */ React__default.createElement("div", { className: styles.sandPackWrapper }, /* @__PURE__ */ React__default.createElement("div", { className: styles.codeMirrorToolbar }, /* @__PURE__ */ React__default.createElement(
|
|
20
|
-
"button",
|
|
21
|
-
{
|
|
22
|
-
className: styles.iconButton,
|
|
23
|
-
type: "button",
|
|
24
|
-
disabled: readOnly,
|
|
25
|
-
title: t("codeblock.delete", "Delete code block"),
|
|
26
|
-
onClick: (e) => {
|
|
27
|
-
e.preventDefault();
|
|
28
|
-
parentEditor.update(() => {
|
|
29
|
-
lexicalNode.remove();
|
|
30
|
-
});
|
|
31
|
-
}
|
|
32
|
-
},
|
|
33
|
-
iconComponentFor("delete_small")
|
|
34
|
-
)), /* @__PURE__ */ React__default.createElement(
|
|
35
|
-
SandpackProvider,
|
|
36
|
-
{
|
|
37
|
-
template: preset.sandpackTemplate,
|
|
38
|
-
theme: preset.sandpackTheme,
|
|
39
|
-
files: {
|
|
40
|
-
[preset.snippetFileName]: code,
|
|
41
|
-
...Object.entries(preset.files ?? {}).reduce(
|
|
42
|
-
(acc, [filePath, fileContents]) => ({ ...acc, ...{ [filePath]: { code: fileContents, readOnly: true } } }),
|
|
43
|
-
{}
|
|
44
|
-
)
|
|
45
|
-
},
|
|
46
|
-
customSetup: {
|
|
47
|
-
dependencies: preset.dependencies
|
|
48
|
-
}
|
|
49
|
-
},
|
|
50
|
-
/* @__PURE__ */ React__default.createElement(SandpackLayout, null, /* @__PURE__ */ React__default.createElement(SandpackCodeEditor, { readOnly, showLineNumbers: true, showInlineErrors: true, ref: codeMirrorRef }), /* @__PURE__ */ React__default.createElement(SandpackPreview, null)),
|
|
51
|
-
/* @__PURE__ */ React__default.createElement(CodeUpdateEmitter, { onChange: setCode, snippetFileName: preset.snippetFileName })
|
|
52
|
-
));
|
|
53
|
-
};
|
|
54
|
-
export {
|
|
55
|
-
SandpackEditor
|
|
56
|
-
};
|
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
import React__default from "react";
|
|
2
|
-
import { insertCodeBlock$, appendCodeBlockEditorDescriptor$ } from "../codeblock/index.js";
|
|
3
|
-
import { SandpackEditor } from "./SandpackEditor.js";
|
|
4
|
-
import { Cell, Signal, withLatestFrom, map, useCellValue } from "@mdxeditor/gurx";
|
|
5
|
-
import { realmPlugin } from "../../RealmWithPlugins.js";
|
|
6
|
-
const defaultSnippetContent = `
|
|
7
|
-
export default function App() {
|
|
8
|
-
return (
|
|
9
|
-
<div className="App">
|
|
10
|
-
<h1>Hello CodeSandbox</h1>
|
|
11
|
-
<h2>Start editing to see some magic happen!</h2>
|
|
12
|
-
</div>
|
|
13
|
-
);
|
|
14
|
-
}
|
|
15
|
-
`;
|
|
16
|
-
const defaultSandpackConfig = {
|
|
17
|
-
defaultPreset: "react",
|
|
18
|
-
presets: [
|
|
19
|
-
{
|
|
20
|
-
name: "react",
|
|
21
|
-
meta: "live react",
|
|
22
|
-
label: "React",
|
|
23
|
-
sandpackTemplate: "react",
|
|
24
|
-
sandpackTheme: "light",
|
|
25
|
-
snippetFileName: "/App.js",
|
|
26
|
-
snippetLanguage: "jsx",
|
|
27
|
-
initialSnippetContent: defaultSnippetContent
|
|
28
|
-
}
|
|
29
|
-
]
|
|
30
|
-
};
|
|
31
|
-
const sandpackConfig$ = Cell(defaultSandpackConfig);
|
|
32
|
-
const insertSandpack$ = Signal((r) => {
|
|
33
|
-
r.link(
|
|
34
|
-
r.pipe(
|
|
35
|
-
insertSandpack$,
|
|
36
|
-
withLatestFrom(sandpackConfig$),
|
|
37
|
-
map(([presetName, sandpackConfig]) => {
|
|
38
|
-
const preset = presetName ? sandpackConfig.presets.find((preset2) => preset2.name === presetName) : sandpackConfig.presets.find((preset2) => preset2.name == sandpackConfig.defaultPreset);
|
|
39
|
-
if (!preset) {
|
|
40
|
-
throw new Error(`No sandpack preset found with name ${presetName}`);
|
|
41
|
-
}
|
|
42
|
-
return {
|
|
43
|
-
code: preset.initialSnippetContent ?? "",
|
|
44
|
-
language: preset.snippetLanguage ?? "jsx",
|
|
45
|
-
meta: preset.meta
|
|
46
|
-
};
|
|
47
|
-
})
|
|
48
|
-
),
|
|
49
|
-
insertCodeBlock$
|
|
50
|
-
);
|
|
51
|
-
});
|
|
52
|
-
const sandpackPlugin = realmPlugin({
|
|
53
|
-
init(realm, params) {
|
|
54
|
-
realm.pubIn({
|
|
55
|
-
[sandpackConfig$]: params == null ? void 0 : params.sandpackConfig,
|
|
56
|
-
[appendCodeBlockEditorDescriptor$]: sandpackCodeBlockDescriptor()
|
|
57
|
-
});
|
|
58
|
-
},
|
|
59
|
-
update(realm, params) {
|
|
60
|
-
realm.pub(sandpackConfig$, params == null ? void 0 : params.sandpackConfig);
|
|
61
|
-
}
|
|
62
|
-
});
|
|
63
|
-
function sandpackCodeBlockDescriptor() {
|
|
64
|
-
return {
|
|
65
|
-
match(_language, meta) {
|
|
66
|
-
return Boolean(meta == null ? void 0 : meta.startsWith("live"));
|
|
67
|
-
},
|
|
68
|
-
Editor(props) {
|
|
69
|
-
const config = useCellValue(sandpackConfig$);
|
|
70
|
-
const preset = config.presets.find((preset2) => preset2.meta === props.meta);
|
|
71
|
-
if (!preset) {
|
|
72
|
-
throw new Error(`No sandpack preset found with ${props.meta}`);
|
|
73
|
-
}
|
|
74
|
-
return /* @__PURE__ */ React__default.createElement(SandpackEditor, { ...props, preset });
|
|
75
|
-
},
|
|
76
|
-
priority: 1
|
|
77
|
-
};
|
|
78
|
-
}
|
|
79
|
-
export {
|
|
80
|
-
insertSandpack$,
|
|
81
|
-
sandpackConfig$,
|
|
82
|
-
sandpackPlugin
|
|
83
|
-
};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import React__default from "react";
|
|
2
|
-
import { ButtonOrDropdownButton } from "../primitives/toolbar.js";
|
|
3
|
-
import { sandpackConfig$, insertSandpack$ } from "../../sandpack/index.js";
|
|
4
|
-
import { useCellValues, usePublisher } from "@mdxeditor/gurx";
|
|
5
|
-
import { iconComponentFor$, useTranslation } from "../../core/index.js";
|
|
6
|
-
const InsertSandpack = () => {
|
|
7
|
-
const [sandpackConfig, iconComponentFor] = useCellValues(sandpackConfig$, iconComponentFor$);
|
|
8
|
-
const insertSandpack = usePublisher(insertSandpack$);
|
|
9
|
-
const items = React__default.useMemo(() => sandpackConfig.presets.map((preset) => ({ value: preset.name, label: preset.label })), [sandpackConfig]);
|
|
10
|
-
const t = useTranslation();
|
|
11
|
-
return /* @__PURE__ */ React__default.createElement(ButtonOrDropdownButton, { title: t("toolbar.insertSandpack", "Insert Sandpack"), onChoose: insertSandpack, items }, iconComponentFor("sandpack"));
|
|
12
|
-
};
|
|
13
|
-
export {
|
|
14
|
-
InsertSandpack
|
|
15
|
-
};
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import React__default from "react";
|
|
2
|
-
import styles from "../../../styles/ui.module.css.js";
|
|
3
|
-
import { $isCodeBlockNode } from "../../codeblock/CodeBlockNode.js";
|
|
4
|
-
import { editorInFocus$, activeEditor$, iconComponentFor$, useTranslation } from "../../core/index.js";
|
|
5
|
-
import { sandpackConfig$ } from "../../sandpack/index.js";
|
|
6
|
-
import { ButtonWithTooltip } from "../primitives/toolbar.js";
|
|
7
|
-
import { useCellValues } from "@mdxeditor/gurx";
|
|
8
|
-
const ShowSandpackInfo = () => {
|
|
9
|
-
const [editorInFocus, theEditor, iconComponentFor, sandpackConfig] = useCellValues(
|
|
10
|
-
editorInFocus$,
|
|
11
|
-
activeEditor$,
|
|
12
|
-
iconComponentFor$,
|
|
13
|
-
sandpackConfig$
|
|
14
|
-
);
|
|
15
|
-
const t = useTranslation();
|
|
16
|
-
const sandpackNode = $isCodeBlockNode(editorInFocus.rootNode) ? editorInFocus.rootNode : null;
|
|
17
|
-
if (!sandpackNode) {
|
|
18
|
-
return null;
|
|
19
|
-
}
|
|
20
|
-
const preset = sandpackConfig.presets.find((preset2) => preset2.meta === sandpackNode.getMeta());
|
|
21
|
-
return /* @__PURE__ */ React__default.createElement("div", { className: styles.selectWithLabel }, /* @__PURE__ */ React__default.createElement(
|
|
22
|
-
ButtonWithTooltip,
|
|
23
|
-
{
|
|
24
|
-
title: t("toolbar.deleteSandpack", "Delete this code block"),
|
|
25
|
-
onClick: () => {
|
|
26
|
-
theEditor == null ? void 0 : theEditor.update(() => {
|
|
27
|
-
if (sandpackNode.getNextSibling()) {
|
|
28
|
-
sandpackNode.selectNext();
|
|
29
|
-
} else {
|
|
30
|
-
sandpackNode.selectPrevious();
|
|
31
|
-
}
|
|
32
|
-
sandpackNode.remove();
|
|
33
|
-
});
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
iconComponentFor("delete_big")
|
|
37
|
-
), /* @__PURE__ */ React__default.createElement("label", null, "Sandpack preset: ", preset.name));
|
|
38
|
-
};
|
|
39
|
-
export {
|
|
40
|
-
ShowSandpackInfo
|
|
41
|
-
};
|