@mdxeditor/editor 1.10.1 → 1.11.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.
Files changed (40) hide show
  1. package/dist/exportMarkdownFromLexical.d.ts +4 -0
  2. package/dist/exportMarkdownFromLexical.js +34 -0
  3. package/dist/gurx/realmFactory.d.ts +1 -1
  4. package/dist/importMarkdownToLexical.d.ts +4 -0
  5. package/dist/importMarkdownToLexical.js +1 -0
  6. package/dist/index.js +4 -0
  7. package/dist/plugins/codeblock/index.d.ts +12 -2
  8. package/dist/plugins/codemirror/index.d.ts +16 -2
  9. package/dist/plugins/core/GenericHTMLNode.d.ts +38 -0
  10. package/dist/plugins/core/GenericHTMLNode.js +117 -0
  11. package/dist/plugins/core/LexicalGenericHTMLNodeVisitor.d.ts +4 -0
  12. package/dist/plugins/core/LexicalGenericHTMLNodeVisitor.js +15 -0
  13. package/dist/plugins/core/LexicalTextVisitor.js +17 -1
  14. package/dist/plugins/core/MdastHTMLNode.d.ts +13 -0
  15. package/dist/plugins/core/MdastHTMLNode.js +122 -0
  16. package/dist/plugins/core/MdastHTMLVisitor.d.ts +3 -0
  17. package/dist/plugins/core/MdastHTMLVisitor.js +12 -0
  18. package/dist/plugins/core/index.d.ts +11 -3
  19. package/dist/plugins/core/index.js +19 -1
  20. package/dist/plugins/diff-source/SourceEditor.js +7 -1
  21. package/dist/plugins/diff-source/index.d.ts +14 -4
  22. package/dist/plugins/diff-source/index.js +2 -1
  23. package/dist/plugins/directives/index.d.ts +12 -2
  24. package/dist/plugins/frontmatter/index.d.ts +12 -2
  25. package/dist/plugins/headings/index.d.ts +12 -2
  26. package/dist/plugins/image/index.d.ts +12 -2
  27. package/dist/plugins/jsx/index.d.ts +12 -2
  28. package/dist/plugins/link/index.d.ts +1 -0
  29. package/dist/plugins/link-dialog/index.d.ts +10 -2
  30. package/dist/plugins/lists/index.d.ts +12 -2
  31. package/dist/plugins/markdown-shortcut/index.d.ts +1 -0
  32. package/dist/plugins/quote/index.d.ts +9 -2
  33. package/dist/plugins/sandpack/index.d.ts +16 -2
  34. package/dist/plugins/table/index.d.ts +12 -2
  35. package/dist/plugins/thematic-break/index.d.ts +12 -2
  36. package/dist/plugins/toolbar/index.d.ts +10 -2
  37. package/dist/style.css +3 -0
  38. package/dist/utils/mergeStyleAttributes.d.ts +1 -0
  39. package/dist/utils/mergeStyleAttributes.js +22 -0
  40. package/package.json +2 -1
@@ -73,6 +73,10 @@ export interface LexicalExportVisitor<LN extends LexicalNode, UN extends Mdast.C
73
73
  * For this to be called by the tree walk, shouldJoin must return true.
74
74
  */
75
75
  join?<T extends Mdast.Content>(prevNode: T, currentNode: T): T;
76
+ /**
77
+ * Default 0, optional, sets the priority of the visitor. The higher the number, the earlier it will be called.
78
+ */
79
+ priority?: number;
76
80
  }
77
81
  /**
78
82
  * The "any" type for LexicalExportVisitor.
@@ -1,5 +1,7 @@
1
1
  import { $isElementNode } from "lexical";
2
2
  import { toMarkdown } from "mdast-util-to-markdown";
3
+ import { isMdastHTMLNode } from "./plugins/core/MdastHTMLNode.js";
4
+ import { mergeStyleAttributes } from "./utils/mergeStyleAttributes.js";
3
5
  function isParent(node) {
4
6
  return node.children instanceof Array;
5
7
  }
@@ -11,6 +13,7 @@ function exportLexicalTreeToMdast({
11
13
  }) {
12
14
  let unistRoot = null;
13
15
  const referredComponents = /* @__PURE__ */ new Set();
16
+ visitors = visitors.sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
14
17
  visit(root, null);
15
18
  function registerReferredComponent(componentName) {
16
19
  referredComponents.add(componentName);
@@ -123,11 +126,42 @@ function exportLexicalTreeToMdast({
123
126
  typedRoot.children.unshift(...imports);
124
127
  }
125
128
  fixWrappingWhitespace(typedRoot, []);
129
+ collapseNestedHtmlTags(typedRoot);
126
130
  if (!jsxIsAvailable) {
127
131
  convertUnderlineJsxToHtml(typedRoot);
128
132
  }
129
133
  return typedRoot;
130
134
  }
135
+ function collapseNestedHtmlTags(node) {
136
+ if ("children" in node) {
137
+ if (isMdastHTMLNode(node) && node.children.length === 1) {
138
+ const onlyChild = node.children[0];
139
+ if (onlyChild.type === "mdxJsxTextElement" && onlyChild.name === "span") {
140
+ (onlyChild.attributes || []).forEach((attribute) => {
141
+ var _a;
142
+ if (attribute.type === "mdxJsxAttribute") {
143
+ const parentAttribute = (_a = node.attributes) == null ? void 0 : _a.find((attr) => attr.type === "mdxJsxAttribute" && attr.name === attribute.name);
144
+ if (parentAttribute) {
145
+ if (attribute.name === "className") {
146
+ const mergedClassesSet = /* @__PURE__ */ new Set([
147
+ ...parentAttribute.value.split(" "),
148
+ ...attribute.value.split(" ")
149
+ ]);
150
+ parentAttribute.value = Array.from(mergedClassesSet).join(" ");
151
+ } else if (attribute.name === "style") {
152
+ parentAttribute.value = mergeStyleAttributes(parentAttribute.value, attribute.value);
153
+ }
154
+ } else {
155
+ node.attributes.push(attribute);
156
+ }
157
+ }
158
+ });
159
+ node.children = onlyChild.children;
160
+ }
161
+ }
162
+ node.children.forEach((child) => collapseNestedHtmlTags(child));
163
+ }
164
+ }
131
165
  function convertUnderlineJsxToHtml(node) {
132
166
  if (Object.hasOwn(node, "children")) {
133
167
  const nodeAsParent = node;
@@ -1,6 +1,6 @@
1
1
  import { Realm, RealmNode, Subscription, UnsubscribeHandle } from './realm';
2
2
  /**
3
- * The system interface is the runtime representation of a state management module, a a record of nodes.
3
+ * The system interface is the runtime representation of a state management module, a record of nodes.
4
4
  */
5
5
  export interface System {
6
6
  [key: string]: RealmNode<any>;
@@ -59,6 +59,10 @@ export interface MdastImportVisitor<UN extends Mdast.Content> {
59
59
  * The function that is called when the node is visited. See {@link MdastVisitParams} for details.
60
60
  */
61
61
  visitNode(params: MdastVisitParams<UN>): void;
62
+ /**
63
+ * Default 0, optional, sets the priority of the visitor. The higher the number, the earlier it will be called.
64
+ */
65
+ priority?: number;
62
66
  }
63
67
  /**
64
68
  * The options of the tree import utility. Not meant to be used directly.
@@ -18,6 +18,7 @@ function importMarkdownToLexical({ root, markdown, visitors, syntaxExtensions, m
18
18
  }
19
19
  function importMdastTreeToLexical({ root, mdastRoot, visitors }) {
20
20
  const formattingMap = /* @__PURE__ */ new WeakMap();
21
+ visitors = visitors.sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
21
22
  function visitChildren(mdastNode, lexicalParent) {
22
23
  if (!isParent(mdastNode)) {
23
24
  throw new Error("Attempting to visit children of a non-parent");
package/dist/index.js CHANGED
@@ -48,13 +48,16 @@ import { TooltipWrap } from "./plugins/toolbar/primitives/TooltipWrap.js";
48
48
  import { Select, SelectButtonTrigger, SelectContent, SelectItem, SelectTrigger } from "./plugins/toolbar/primitives/select.js";
49
49
  import { NestedEditorsContext, NestedLexicalEditor, useLexicalNodeRemove, useMdastNodeUpdater, useNestedEditorContext } from "./plugins/core/NestedLexicalEditor.js";
50
50
  import { PropertyPopover } from "./plugins/core/PropertyPopover.js";
51
+ import { $createGenericHTMLNode, $isGenericHTMLNode, GenericHTMLNode } from "./plugins/core/GenericHTMLNode.js";
51
52
  import { $createImageNode, $isImageNode, ImageNode } from "./plugins/image/ImageNode.js";
52
53
  import { useCodeBlockEditorContext } from "./plugins/codeblock/CodeBlockNode.js";
53
54
  import { RefCount, defaultComparator, realm } from "./gurx/realm.js";
54
55
  import { RealmPluginInitializer, RequirePlugin, realmFactoryToComponent, realmPlugin, sysHooks, useHasPlugin } from "./gurx/react.js";
55
56
  import { getRealmFactory, realmFactory, system } from "./gurx/realmFactory.js";
56
57
  export {
58
+ $createGenericHTMLNode,
57
59
  $createImageNode,
60
+ $isGenericHTMLNode,
58
61
  $isImageNode,
59
62
  ADMONITION_TYPES,
60
63
  AdmonitionDirectiveDescriptor,
@@ -72,6 +75,7 @@ export {
72
75
  DialogButton,
73
76
  DiffSourceToggleWrapper,
74
77
  GenericDirectiveEditor,
78
+ GenericHTMLNode,
75
79
  GenericJsxEditor,
76
80
  INSERT_IMAGE_COMMAND,
77
81
  ImageNode,
@@ -93,6 +93,7 @@ export declare const codeBlockSystem: SystemSpec<[SystemSpec<[], (r: Realm) => {
93
93
  initialMarkdown: RealmNode<string>;
94
94
  setMarkdown: RealmNode<string>;
95
95
  markdown: RealmNode<string>;
96
+ markdownSignal: RealmNode<string>;
96
97
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
97
98
  contentEditableClassName: RealmNode<string>;
98
99
  placeholder: RealmNode<ReactNode>;
@@ -149,6 +150,7 @@ export declare const codeBlockSystem: SystemSpec<[SystemSpec<[], (r: Realm) => {
149
150
  initialMarkdown: RealmNode<string>;
150
151
  setMarkdown: RealmNode<string>;
151
152
  markdown: RealmNode<string>;
153
+ markdownSignal: RealmNode<string>;
152
154
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
153
155
  contentEditableClassName: RealmNode<string>;
154
156
  placeholder: RealmNode<ReactNode>;
@@ -228,6 +230,7 @@ codeBlockPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
228
230
  initialMarkdown: RealmNode<string>;
229
231
  setMarkdown: RealmNode<string>;
230
232
  markdown: RealmNode<string>;
233
+ markdownSignal: RealmNode<string>;
231
234
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
232
235
  contentEditableClassName: RealmNode<string>;
233
236
  placeholder: RealmNode<ReactNode>;
@@ -284,6 +287,7 @@ codeBlockPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
284
287
  initialMarkdown: RealmNode<string>;
285
288
  setMarkdown: RealmNode<string>;
286
289
  markdown: RealmNode<string>;
290
+ markdownSignal: RealmNode<string>;
287
291
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
288
292
  contentEditableClassName: RealmNode<string>;
289
293
  placeholder: RealmNode<ReactNode>;
@@ -355,6 +359,7 @@ codeBlockPluginHooks: {
355
359
  initialMarkdown: RealmNode<string>;
356
360
  setMarkdown: RealmNode<string>;
357
361
  markdown: RealmNode<string>;
362
+ markdownSignal: RealmNode<string>;
358
363
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
359
364
  contentEditableClassName: RealmNode<string>;
360
365
  placeholder: RealmNode<ReactNode>;
@@ -385,7 +390,7 @@ codeBlockPluginHooks: {
385
390
  onBlur: RealmNode<FocusEvent>;
386
391
  iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
387
392
  }>;
388
- useEmitter: <K extends "jsxComponentDescriptors" | "jsxIsAvailable" | "toMarkdownOptions" | "toMarkdownExtensions" | "mdastExtensions" | "syntaxExtensions" | "markdown" | "activeEditor" | "inFocus" | "historyState" | "currentSelection" | "initialRootEditorState" | "rootEditor" | "createRootEditorSubscription" | "createActiveEditorSubscription" | "importVisitors" | "usedLexicalNodes" | "addImportVisitor" | "addLexicalNode" | "addSyntaxExtension" | "addMdastExtension" | "addToMarkdownExtension" | "addExportVisitor" | "exportVisitors" | "initialMarkdown" | "setMarkdown" | "editorRootElementRef" | "contentEditableClassName" | "placeholder" | "autoFocus" | "readOnly" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "onBlur" | "iconComponentFor" | "codeBlockEditorDescriptors" | "defaultCodeBlockLanguage" | "appendCodeBlockEditorDescriptor" | "insertCodeBlock">(key: K, callback: (value: ValueForKey<{
393
+ useEmitter: <K extends "jsxComponentDescriptors" | "jsxIsAvailable" | "toMarkdownOptions" | "toMarkdownExtensions" | "mdastExtensions" | "syntaxExtensions" | "markdown" | "activeEditor" | "inFocus" | "historyState" | "currentSelection" | "initialRootEditorState" | "rootEditor" | "createRootEditorSubscription" | "createActiveEditorSubscription" | "importVisitors" | "usedLexicalNodes" | "addImportVisitor" | "addLexicalNode" | "addSyntaxExtension" | "addMdastExtension" | "addToMarkdownExtension" | "addExportVisitor" | "exportVisitors" | "initialMarkdown" | "setMarkdown" | "markdownSignal" | "editorRootElementRef" | "contentEditableClassName" | "placeholder" | "autoFocus" | "readOnly" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "onBlur" | "iconComponentFor" | "codeBlockEditorDescriptors" | "defaultCodeBlockLanguage" | "appendCodeBlockEditorDescriptor" | "insertCodeBlock">(key: K, callback: (value: ValueForKey<{
389
394
  codeBlockEditorDescriptors: RealmNode<CodeBlockEditorDescriptor[]>;
390
395
  defaultCodeBlockLanguage: RealmNode<string>;
391
396
  appendCodeBlockEditorDescriptor: RealmNode<CodeBlockEditorDescriptor>;
@@ -417,6 +422,7 @@ codeBlockPluginHooks: {
417
422
  initialMarkdown: RealmNode<string>;
418
423
  setMarkdown: RealmNode<string>;
419
424
  markdown: RealmNode<string>;
425
+ markdownSignal: RealmNode<string>;
420
426
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
421
427
  contentEditableClassName: RealmNode<string>;
422
428
  placeholder: RealmNode<ReactNode>;
@@ -479,6 +485,7 @@ codeBlockPluginHooks: {
479
485
  initialMarkdown: RealmNode<string>;
480
486
  setMarkdown: RealmNode<string>;
481
487
  markdown: RealmNode<string>;
488
+ markdownSignal: RealmNode<string>;
482
489
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
483
490
  contentEditableClassName: RealmNode<string>;
484
491
  placeholder: RealmNode<ReactNode>;
@@ -540,6 +547,7 @@ codeBlockPluginHooks: {
540
547
  initialMarkdown: RealmNode<string>;
541
548
  setMarkdown: RealmNode<string>;
542
549
  markdown: RealmNode<string>;
550
+ markdownSignal: RealmNode<string>;
543
551
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
544
552
  contentEditableClassName: RealmNode<string>;
545
553
  placeholder: RealmNode<ReactNode>;
@@ -602,6 +610,7 @@ codeBlockPluginHooks: {
602
610
  initialMarkdown: RealmNode<string>;
603
611
  setMarkdown: RealmNode<string>;
604
612
  markdown: RealmNode<string>;
613
+ markdownSignal: RealmNode<string>;
605
614
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
606
615
  contentEditableClassName: RealmNode<string>;
607
616
  placeholder: RealmNode<ReactNode>;
@@ -632,7 +641,7 @@ codeBlockPluginHooks: {
632
641
  onBlur: RealmNode<FocusEvent>;
633
642
  iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
634
643
  }>) => void;
635
- usePublisher: <K_2 extends "jsxComponentDescriptors" | "jsxIsAvailable" | "toMarkdownOptions" | "toMarkdownExtensions" | "mdastExtensions" | "syntaxExtensions" | "markdown" | "activeEditor" | "inFocus" | "historyState" | "currentSelection" | "initialRootEditorState" | "rootEditor" | "createRootEditorSubscription" | "createActiveEditorSubscription" | "importVisitors" | "usedLexicalNodes" | "addImportVisitor" | "addLexicalNode" | "addSyntaxExtension" | "addMdastExtension" | "addToMarkdownExtension" | "addExportVisitor" | "exportVisitors" | "initialMarkdown" | "setMarkdown" | "editorRootElementRef" | "contentEditableClassName" | "placeholder" | "autoFocus" | "readOnly" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "onBlur" | "iconComponentFor" | "codeBlockEditorDescriptors" | "defaultCodeBlockLanguage" | "appendCodeBlockEditorDescriptor" | "insertCodeBlock">(key: K_2) => (value: ValueForKey<{
644
+ usePublisher: <K_2 extends "jsxComponentDescriptors" | "jsxIsAvailable" | "toMarkdownOptions" | "toMarkdownExtensions" | "mdastExtensions" | "syntaxExtensions" | "markdown" | "activeEditor" | "inFocus" | "historyState" | "currentSelection" | "initialRootEditorState" | "rootEditor" | "createRootEditorSubscription" | "createActiveEditorSubscription" | "importVisitors" | "usedLexicalNodes" | "addImportVisitor" | "addLexicalNode" | "addSyntaxExtension" | "addMdastExtension" | "addToMarkdownExtension" | "addExportVisitor" | "exportVisitors" | "initialMarkdown" | "setMarkdown" | "markdownSignal" | "editorRootElementRef" | "contentEditableClassName" | "placeholder" | "autoFocus" | "readOnly" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "onBlur" | "iconComponentFor" | "codeBlockEditorDescriptors" | "defaultCodeBlockLanguage" | "appendCodeBlockEditorDescriptor" | "insertCodeBlock">(key: K_2) => (value: ValueForKey<{
636
645
  codeBlockEditorDescriptors: RealmNode<CodeBlockEditorDescriptor[]>;
637
646
  defaultCodeBlockLanguage: RealmNode<string>;
638
647
  appendCodeBlockEditorDescriptor: RealmNode<CodeBlockEditorDescriptor>;
@@ -664,6 +673,7 @@ codeBlockPluginHooks: {
664
673
  initialMarkdown: RealmNode<string>;
665
674
  setMarkdown: RealmNode<string>;
666
675
  markdown: RealmNode<string>;
676
+ markdownSignal: RealmNode<string>;
667
677
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
668
678
  contentEditableClassName: RealmNode<string>;
669
679
  placeholder: RealmNode<ReactNode>;
@@ -41,6 +41,7 @@ export declare const codeMirrorSystem: SystemSpec<[SystemSpec<[], (r: Realm) =>
41
41
  initialMarkdown: RealmNode<string>;
42
42
  setMarkdown: RealmNode<string>;
43
43
  markdown: RealmNode<string>;
44
+ markdownSignal: RealmNode<string>;
44
45
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
45
46
  contentEditableClassName: RealmNode<string>;
46
47
  placeholder: RealmNode<ReactNode>;
@@ -97,6 +98,7 @@ export declare const codeMirrorSystem: SystemSpec<[SystemSpec<[], (r: Realm) =>
97
98
  initialMarkdown: RealmNode<string>;
98
99
  setMarkdown: RealmNode<string>;
99
100
  markdown: RealmNode<string>;
101
+ markdownSignal: RealmNode<string>;
100
102
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
101
103
  contentEditableClassName: RealmNode<string>;
102
104
  placeholder: RealmNode<ReactNode>;
@@ -153,6 +155,7 @@ export declare const codeMirrorSystem: SystemSpec<[SystemSpec<[], (r: Realm) =>
153
155
  initialMarkdown: RealmNode<string>;
154
156
  setMarkdown: RealmNode<string>;
155
157
  markdown: RealmNode<string>;
158
+ markdownSignal: RealmNode<string>;
156
159
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
157
160
  contentEditableClassName: RealmNode<string>;
158
161
  placeholder: RealmNode<ReactNode>;
@@ -214,6 +217,7 @@ export declare const codeMirrorSystem: SystemSpec<[SystemSpec<[], (r: Realm) =>
214
217
  initialMarkdown: RealmNode<string>;
215
218
  setMarkdown: RealmNode<string>;
216
219
  markdown: RealmNode<string>;
220
+ markdownSignal: RealmNode<string>;
217
221
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
218
222
  contentEditableClassName: RealmNode<string>;
219
223
  placeholder: RealmNode<ReactNode>;
@@ -284,6 +288,7 @@ codeMirrorPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
284
288
  initialMarkdown: RealmNode<string>;
285
289
  setMarkdown: RealmNode<string>;
286
290
  markdown: RealmNode<string>;
291
+ markdownSignal: RealmNode<string>;
287
292
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
288
293
  contentEditableClassName: RealmNode<string>;
289
294
  placeholder: RealmNode<ReactNode>;
@@ -340,6 +345,7 @@ codeMirrorPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
340
345
  initialMarkdown: RealmNode<string>;
341
346
  setMarkdown: RealmNode<string>;
342
347
  markdown: RealmNode<string>;
348
+ markdownSignal: RealmNode<string>;
343
349
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
344
350
  contentEditableClassName: RealmNode<string>;
345
351
  placeholder: RealmNode<ReactNode>;
@@ -396,6 +402,7 @@ codeMirrorPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
396
402
  initialMarkdown: RealmNode<string>;
397
403
  setMarkdown: RealmNode<string>;
398
404
  markdown: RealmNode<string>;
405
+ markdownSignal: RealmNode<string>;
399
406
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
400
407
  contentEditableClassName: RealmNode<string>;
401
408
  placeholder: RealmNode<ReactNode>;
@@ -457,6 +464,7 @@ codeMirrorPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
457
464
  initialMarkdown: RealmNode<string>;
458
465
  setMarkdown: RealmNode<string>;
459
466
  markdown: RealmNode<string>;
467
+ markdownSignal: RealmNode<string>;
460
468
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
461
469
  contentEditableClassName: RealmNode<string>;
462
470
  placeholder: RealmNode<ReactNode>;
@@ -535,6 +543,7 @@ codeMirrorHooks: {
535
543
  initialMarkdown: RealmNode<string>;
536
544
  setMarkdown: RealmNode<string>;
537
545
  markdown: RealmNode<string>;
546
+ markdownSignal: RealmNode<string>;
538
547
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
539
548
  contentEditableClassName: RealmNode<string>;
540
549
  placeholder: RealmNode<ReactNode>;
@@ -570,7 +579,7 @@ codeMirrorHooks: {
570
579
  appendCodeBlockEditorDescriptor: RealmNode<CodeBlockEditorDescriptor>;
571
580
  insertCodeBlock: RealmNode<Partial<CreateCodeBlockNodeOptions>>;
572
581
  }>;
573
- useEmitter: <K extends "jsxComponentDescriptors" | "jsxIsAvailable" | "toMarkdownOptions" | "toMarkdownExtensions" | "mdastExtensions" | "syntaxExtensions" | "markdown" | "activeEditor" | "inFocus" | "historyState" | "currentSelection" | "initialRootEditorState" | "rootEditor" | "createRootEditorSubscription" | "createActiveEditorSubscription" | "importVisitors" | "usedLexicalNodes" | "addImportVisitor" | "addLexicalNode" | "addSyntaxExtension" | "addMdastExtension" | "addToMarkdownExtension" | "addExportVisitor" | "exportVisitors" | "initialMarkdown" | "setMarkdown" | "editorRootElementRef" | "contentEditableClassName" | "placeholder" | "autoFocus" | "readOnly" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "onBlur" | "iconComponentFor" | "codeBlockEditorDescriptors" | "defaultCodeBlockLanguage" | "appendCodeBlockEditorDescriptor" | "insertCodeBlock" | "codeBlockLanguages" | "insertCodeMirror">(key: K, callback: (value: ValueForKey<{
582
+ useEmitter: <K extends "jsxComponentDescriptors" | "jsxIsAvailable" | "toMarkdownOptions" | "toMarkdownExtensions" | "mdastExtensions" | "syntaxExtensions" | "markdown" | "activeEditor" | "inFocus" | "historyState" | "currentSelection" | "initialRootEditorState" | "rootEditor" | "createRootEditorSubscription" | "createActiveEditorSubscription" | "importVisitors" | "usedLexicalNodes" | "addImportVisitor" | "addLexicalNode" | "addSyntaxExtension" | "addMdastExtension" | "addToMarkdownExtension" | "addExportVisitor" | "exportVisitors" | "initialMarkdown" | "setMarkdown" | "markdownSignal" | "editorRootElementRef" | "contentEditableClassName" | "placeholder" | "autoFocus" | "readOnly" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "onBlur" | "iconComponentFor" | "codeBlockEditorDescriptors" | "defaultCodeBlockLanguage" | "appendCodeBlockEditorDescriptor" | "insertCodeBlock" | "codeBlockLanguages" | "insertCodeMirror">(key: K, callback: (value: ValueForKey<{
574
583
  codeBlockLanguages: RealmNode<Record<string, string>>;
575
584
  insertCodeMirror: RealmNode<{
576
585
  language: string;
@@ -603,6 +612,7 @@ codeMirrorHooks: {
603
612
  initialMarkdown: RealmNode<string>;
604
613
  setMarkdown: RealmNode<string>;
605
614
  markdown: RealmNode<string>;
615
+ markdownSignal: RealmNode<string>;
606
616
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
607
617
  contentEditableClassName: RealmNode<string>;
608
618
  placeholder: RealmNode<ReactNode>;
@@ -671,6 +681,7 @@ codeMirrorHooks: {
671
681
  initialMarkdown: RealmNode<string>;
672
682
  setMarkdown: RealmNode<string>;
673
683
  markdown: RealmNode<string>;
684
+ markdownSignal: RealmNode<string>;
674
685
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
675
686
  contentEditableClassName: RealmNode<string>;
676
687
  placeholder: RealmNode<ReactNode>;
@@ -738,6 +749,7 @@ codeMirrorHooks: {
738
749
  initialMarkdown: RealmNode<string>;
739
750
  setMarkdown: RealmNode<string>;
740
751
  markdown: RealmNode<string>;
752
+ markdownSignal: RealmNode<string>;
741
753
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
742
754
  contentEditableClassName: RealmNode<string>;
743
755
  placeholder: RealmNode<ReactNode>;
@@ -806,6 +818,7 @@ codeMirrorHooks: {
806
818
  initialMarkdown: RealmNode<string>;
807
819
  setMarkdown: RealmNode<string>;
808
820
  markdown: RealmNode<string>;
821
+ markdownSignal: RealmNode<string>;
809
822
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
810
823
  contentEditableClassName: RealmNode<string>;
811
824
  placeholder: RealmNode<ReactNode>;
@@ -841,7 +854,7 @@ codeMirrorHooks: {
841
854
  appendCodeBlockEditorDescriptor: RealmNode<CodeBlockEditorDescriptor>;
842
855
  insertCodeBlock: RealmNode<Partial<CreateCodeBlockNodeOptions>>;
843
856
  }>) => void;
844
- usePublisher: <K_2 extends "jsxComponentDescriptors" | "jsxIsAvailable" | "toMarkdownOptions" | "toMarkdownExtensions" | "mdastExtensions" | "syntaxExtensions" | "markdown" | "activeEditor" | "inFocus" | "historyState" | "currentSelection" | "initialRootEditorState" | "rootEditor" | "createRootEditorSubscription" | "createActiveEditorSubscription" | "importVisitors" | "usedLexicalNodes" | "addImportVisitor" | "addLexicalNode" | "addSyntaxExtension" | "addMdastExtension" | "addToMarkdownExtension" | "addExportVisitor" | "exportVisitors" | "initialMarkdown" | "setMarkdown" | "editorRootElementRef" | "contentEditableClassName" | "placeholder" | "autoFocus" | "readOnly" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "onBlur" | "iconComponentFor" | "codeBlockEditorDescriptors" | "defaultCodeBlockLanguage" | "appendCodeBlockEditorDescriptor" | "insertCodeBlock" | "codeBlockLanguages" | "insertCodeMirror">(key: K_2) => (value: ValueForKey<{
857
+ usePublisher: <K_2 extends "jsxComponentDescriptors" | "jsxIsAvailable" | "toMarkdownOptions" | "toMarkdownExtensions" | "mdastExtensions" | "syntaxExtensions" | "markdown" | "activeEditor" | "inFocus" | "historyState" | "currentSelection" | "initialRootEditorState" | "rootEditor" | "createRootEditorSubscription" | "createActiveEditorSubscription" | "importVisitors" | "usedLexicalNodes" | "addImportVisitor" | "addLexicalNode" | "addSyntaxExtension" | "addMdastExtension" | "addToMarkdownExtension" | "addExportVisitor" | "exportVisitors" | "initialMarkdown" | "setMarkdown" | "markdownSignal" | "editorRootElementRef" | "contentEditableClassName" | "placeholder" | "autoFocus" | "readOnly" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "onBlur" | "iconComponentFor" | "codeBlockEditorDescriptors" | "defaultCodeBlockLanguage" | "appendCodeBlockEditorDescriptor" | "insertCodeBlock" | "codeBlockLanguages" | "insertCodeMirror">(key: K_2) => (value: ValueForKey<{
845
858
  codeBlockLanguages: RealmNode<Record<string, string>>;
846
859
  insertCodeMirror: RealmNode<{
847
860
  language: string;
@@ -874,6 +887,7 @@ codeMirrorHooks: {
874
887
  initialMarkdown: RealmNode<string>;
875
888
  setMarkdown: RealmNode<string>;
876
889
  markdown: RealmNode<string>;
890
+ markdownSignal: RealmNode<string>;
877
891
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
878
892
  contentEditableClassName: RealmNode<string>;
879
893
  placeholder: RealmNode<ReactNode>;
@@ -0,0 +1,38 @@
1
+ import { DOMConversionMap, DOMExportOutput, ElementNode, LexicalEditor, LexicalNode, NodeKey, SerializedElementNode, Spread } from 'lexical';
2
+ import { MdxJsxAttribute } from 'mdast-util-mdx-jsx';
3
+ import { MDX_NODE_TYPES, htmlTags } from './MdastHTMLNode';
4
+ export type KnownHTMLTagType = (typeof htmlTags)[number];
5
+ declare const TYPE_NAME: "generic-html";
6
+ export type SerializedGenericHTMLNode = Spread<{
7
+ tag: KnownHTMLTagType;
8
+ type: typeof TYPE_NAME;
9
+ mdxType: MdxNodeType;
10
+ attributes: MdxJsxAttribute[];
11
+ version: 1;
12
+ }, SerializedElementNode>;
13
+ type MdxNodeType = (typeof MDX_NODE_TYPES)[number];
14
+ export declare class GenericHTMLNode extends ElementNode {
15
+ /** @internal */
16
+ __tag: KnownHTMLTagType;
17
+ __nodeType: MdxNodeType;
18
+ __attributes: MdxJsxAttribute[];
19
+ static getType(): string;
20
+ static clone(node: GenericHTMLNode): GenericHTMLNode;
21
+ constructor(tag: KnownHTMLTagType, type: MdxNodeType, attributes: MdxJsxAttribute[], key?: NodeKey);
22
+ getTag(): KnownHTMLTagType;
23
+ getNodeType(): MdxNodeType;
24
+ getAttributes(): MdxJsxAttribute[];
25
+ updateAttributes(attributes: MdxJsxAttribute[]): void;
26
+ getStyle(): string;
27
+ createDOM(): HTMLElement;
28
+ updateDOM(): boolean;
29
+ static importDOM(): DOMConversionMap | null;
30
+ exportDOM(editor: LexicalEditor): DOMExportOutput;
31
+ static importJSON(serializedNode: SerializedGenericHTMLNode): GenericHTMLNode;
32
+ exportJSON(): SerializedGenericHTMLNode;
33
+ extractWithChild(): boolean;
34
+ isInline(): boolean;
35
+ }
36
+ export declare function $createGenericHTMLNode(tag: KnownHTMLTagType, type: MdxNodeType, attributes: MdxJsxAttribute[]): GenericHTMLNode;
37
+ export declare function $isGenericHTMLNode(node: LexicalNode | null | undefined): node is GenericHTMLNode;
38
+ export {};
@@ -0,0 +1,117 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3
+ var __publicField = (obj, key, value) => {
4
+ __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
5
+ return value;
6
+ };
7
+ import { ElementNode, $applyNodeReplacement } from "lexical";
8
+ const TYPE_NAME = "generic-html";
9
+ class GenericHTMLNode extends ElementNode {
10
+ constructor(tag, type, attributes, key) {
11
+ super(key);
12
+ /** @internal */
13
+ __publicField(this, "__tag");
14
+ __publicField(this, "__nodeType");
15
+ __publicField(this, "__attributes");
16
+ this.__tag = tag;
17
+ this.__nodeType = type;
18
+ this.__attributes = attributes;
19
+ }
20
+ static getType() {
21
+ return TYPE_NAME;
22
+ }
23
+ static clone(node) {
24
+ return new GenericHTMLNode(node.__tag, node.__nodeType, node.__attributes, node.__key);
25
+ }
26
+ getTag() {
27
+ return this.__tag;
28
+ }
29
+ getNodeType() {
30
+ return this.__nodeType;
31
+ }
32
+ getAttributes() {
33
+ return this.__attributes;
34
+ }
35
+ updateAttributes(attributes) {
36
+ const self = this.getWritable();
37
+ self.__attributes = attributes;
38
+ }
39
+ getStyle() {
40
+ var _a;
41
+ return (_a = this.__attributes.find((attribute) => attribute.name === "style")) == null ? void 0 : _a.value;
42
+ }
43
+ // View
44
+ createDOM() {
45
+ const tag = this.__tag;
46
+ const element = document.createElement(tag);
47
+ this.__attributes.forEach((attribute) => {
48
+ element.setAttribute(attribute.name, attribute.value);
49
+ });
50
+ return element;
51
+ }
52
+ updateDOM() {
53
+ return false;
54
+ }
55
+ static importDOM() {
56
+ return {};
57
+ }
58
+ exportDOM(editor) {
59
+ const { element } = super.exportDOM(editor);
60
+ return {
61
+ element
62
+ };
63
+ }
64
+ static importJSON(serializedNode) {
65
+ const node = $createGenericHTMLNode(serializedNode.tag, serializedNode.mdxType, serializedNode.attributes);
66
+ node.setFormat(serializedNode.format);
67
+ node.setIndent(serializedNode.indent);
68
+ node.setDirection(serializedNode.direction);
69
+ return node;
70
+ }
71
+ exportJSON() {
72
+ return {
73
+ ...super.exportJSON(),
74
+ tag: this.getTag(),
75
+ attributes: this.__attributes,
76
+ mdxType: this.__nodeType,
77
+ type: TYPE_NAME,
78
+ version: 1
79
+ };
80
+ }
81
+ /*
82
+ // Mutation
83
+ insertNewAfter(selection?: RangeSelection, restoreSelection = true): ParagraphNode | GenericHTMLNode {
84
+ const anchorOffet = selection ? selection.anchor.offset : 0
85
+ const newElement =
86
+ anchorOffet > 0 && anchorOffet < this.getTextContentSize() ? $createHeadingNode(this.getTag()) : $createParagraphNode()
87
+ const direction = this.getDirection()
88
+ newElement.setDirection(direction)
89
+ this.insertAfter(newElement, restoreSelection)
90
+ return newElement
91
+ }
92
+
93
+ collapseAtStart(): true {
94
+ const newElement = !this.isEmpty() ? $createHeadingNode(this.getTag()) : $createParagraphNode()
95
+ const children = this.getChildren()
96
+ children.forEach((child) => newElement.append(child))
97
+ this.replace(newElement)
98
+ return true
99
+ }*/
100
+ extractWithChild() {
101
+ return true;
102
+ }
103
+ isInline() {
104
+ return this.__nodeType === "mdxJsxTextElement";
105
+ }
106
+ }
107
+ function $createGenericHTMLNode(tag, type, attributes) {
108
+ return $applyNodeReplacement(new GenericHTMLNode(tag, type, attributes));
109
+ }
110
+ function $isGenericHTMLNode(node) {
111
+ return node instanceof GenericHTMLNode;
112
+ }
113
+ export {
114
+ $createGenericHTMLNode,
115
+ $isGenericHTMLNode,
116
+ GenericHTMLNode
117
+ };
@@ -0,0 +1,4 @@
1
+ import { MdxJsxFlowElement, MdxJsxTextElement } from 'mdast-util-mdx-jsx';
2
+ import { GenericHTMLNode } from './GenericHTMLNode';
3
+ import { LexicalExportVisitor } from '../../exportMarkdownFromLexical';
4
+ export declare const LexicalGenericHTMLVisitor: LexicalExportVisitor<GenericHTMLNode, MdxJsxFlowElement | MdxJsxTextElement>;
@@ -0,0 +1,15 @@
1
+ import { $isGenericHTMLNode } from "./GenericHTMLNode.js";
2
+ const LexicalGenericHTMLVisitor = {
3
+ testLexicalNode: $isGenericHTMLNode,
4
+ visitLexicalNode({ actions, lexicalNode }) {
5
+ actions.addAndStepInto("mdxJsxTextElement", {
6
+ name: lexicalNode.getTag(),
7
+ type: lexicalNode.getNodeType(),
8
+ attributes: lexicalNode.getAttributes()
9
+ });
10
+ },
11
+ priority: -100
12
+ };
13
+ export {
14
+ LexicalGenericHTMLVisitor
15
+ };
@@ -5,7 +5,14 @@ function isMdastText(mdastNode) {
5
5
  }
6
6
  const LexicalTextVisitor = {
7
7
  shouldJoin: (prevNode, currentNode) => {
8
- return ["text", "emphasis", "strong", "mdxJsxTextElement"].includes(prevNode.type) && prevNode.type === currentNode.type;
8
+ if (["text", "emphasis", "strong"].includes(prevNode.type)) {
9
+ return prevNode.type === currentNode.type;
10
+ }
11
+ if (prevNode.type === "mdxJsxTextElement" && currentNode.type === "mdxJsxTextElement") {
12
+ const currentMdxNode = currentNode;
13
+ return prevNode.name === currentMdxNode.name && JSON.stringify(prevNode.attributes) === JSON.stringify(currentMdxNode.attributes);
14
+ }
15
+ return false;
9
16
  },
10
17
  join(prevNode, currentNode) {
11
18
  if (isMdastText(prevNode) && isMdastText(currentNode)) {
@@ -26,6 +33,7 @@ const LexicalTextVisitor = {
26
33
  const prevFormat = $isTextNode(previousSibling) ? previousSibling.getFormat() : 0;
27
34
  const textContent = lexicalNode.getTextContent();
28
35
  const format = lexicalNode.getFormat() ?? 0;
36
+ const style = lexicalNode.getStyle();
29
37
  if (format & IS_CODE) {
30
38
  actions.addAndStepInto("inlineCode", {
31
39
  value: textContent
@@ -33,6 +41,14 @@ const LexicalTextVisitor = {
33
41
  return;
34
42
  }
35
43
  let localParentNode = mdastParent;
44
+ if (style) {
45
+ localParentNode = actions.appendToParent(localParentNode, {
46
+ type: "mdxJsxTextElement",
47
+ name: "span",
48
+ children: [],
49
+ attributes: [{ type: "mdxJsxAttribute", name: "style", value: style }]
50
+ });
51
+ }
36
52
  if (prevFormat & format & IS_ITALIC) {
37
53
  localParentNode = actions.appendToParent(localParentNode, {
38
54
  type: "emphasis",
@@ -0,0 +1,13 @@
1
+ import * as Mdast from 'mdast';
2
+ import { MdxJsxFlowElement, MdxJsxTextElement } from 'mdast-util-mdx-jsx';
3
+ interface MdastBlockHTMLNode extends MdxJsxFlowElement {
4
+ name: (typeof htmlTags)[number];
5
+ }
6
+ interface MdastInlineHTMLNode extends MdxJsxTextElement {
7
+ name: (typeof htmlTags)[number];
8
+ }
9
+ export type MdastHTMLNode = MdastBlockHTMLNode | MdastInlineHTMLNode;
10
+ export declare const MDX_NODE_TYPES: readonly ["mdxJsxTextElement", "mdxJsxFlowElement"];
11
+ export declare function isMdastHTMLNode(node: Mdast.Parent | Mdast.Content | Mdast.Root): node is MdastHTMLNode;
12
+ export declare const htmlTags: readonly ["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "u", "ul", "var", "video", "wbr"];
13
+ export {};