@mdxeditor/editor 1.4.3 → 1.5.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.
@@ -53,6 +53,7 @@ export declare class CodeBlockNode extends DecoratorNode<JSX.Element> {
53
53
  setLanguage: (language: string) => void;
54
54
  select: () => void;
55
55
  decorate(editor: LexicalEditor): JSX.Element;
56
+ isInline(): boolean;
56
57
  }
57
58
  interface CodeBlockEditorContainerProps extends CodeBlockEditorProps {
58
59
  /** The Lexical editor that contains the node */
@@ -91,6 +91,9 @@ class CodeBlockNode extends DecoratorNode {
91
91
  }
92
92
  );
93
93
  }
94
+ isInline() {
95
+ return false;
96
+ }
94
97
  }
95
98
  const CodeBlockEditorContext = React__default.createContext(null);
96
99
  const CodeBlockEditorContextProvider = ({ parentEditor, lexicalNode, children }) => {
@@ -13,6 +13,7 @@ const DiffViewer = () => {
13
13
  };
14
14
  const CmMergeView = ({ oldMarkdown, newMarkdown, onUpdate }) => {
15
15
  const cmMergeViewRef = React__default.useRef(null);
16
+ const [cmExtensions] = diffSourcePluginHooks.useEmitterValues("cmExtensions");
16
17
  const ref = React__default.useCallback(
17
18
  (el) => {
18
19
  var _a;
@@ -30,11 +31,12 @@ const CmMergeView = ({ oldMarkdown, newMarkdown, onUpdate }) => {
30
31
  gutter: true,
31
32
  a: {
32
33
  doc: oldMarkdown,
33
- extensions: [...COMMON_STATE_CONFIG_EXTENSIONS, EditorState.readOnly.of(true)]
34
+ extensions: [...cmExtensions, ...COMMON_STATE_CONFIG_EXTENSIONS, EditorState.readOnly.of(true)]
34
35
  },
35
36
  b: {
36
37
  doc: newMarkdown,
37
38
  extensions: [
39
+ ...cmExtensions,
38
40
  ...COMMON_STATE_CONFIG_EXTENSIONS,
39
41
  EditorView.updateListener.of(({ state }) => {
40
42
  const md = state.doc.toString();
@@ -48,7 +50,7 @@ const CmMergeView = ({ oldMarkdown, newMarkdown, onUpdate }) => {
48
50
  cmMergeViewRef.current = null;
49
51
  }
50
52
  },
51
- [newMarkdown, oldMarkdown, onUpdate]
53
+ [newMarkdown, oldMarkdown, onUpdate, cmExtensions]
52
54
  );
53
55
  return /* @__PURE__ */ React__default.createElement("div", { ref });
54
56
  };
@@ -9,6 +9,7 @@ import { corePluginHooks } from "../core/index.js";
9
9
  const COMMON_STATE_CONFIG_EXTENSIONS = [basicSetup, basicLight, markdown(), lineNumbers()];
10
10
  const SourceEditor = () => {
11
11
  const [markdown2, readOnly] = corePluginHooks.useEmitterValues("markdown", "readOnly");
12
+ const [cmExtensions] = diffSourcePluginHooks.useEmitterValues("cmExtensions");
12
13
  const updateMarkdown = diffSourcePluginHooks.usePublisher("markdownSourceEditorValue");
13
14
  const editorViewRef = React__default.useRef(null);
14
15
  const ref = React__default.useCallback(
@@ -16,6 +17,8 @@ const SourceEditor = () => {
16
17
  var _a;
17
18
  if (el !== null) {
18
19
  const extensions = [
20
+ // custom extensions should come first so that you can override the default extensions
21
+ ...cmExtensions,
19
22
  ...COMMON_STATE_CONFIG_EXTENSIONS,
20
23
  EditorView.updateListener.of(({ state }) => {
21
24
  updateMarkdown(state.doc.toString());
@@ -34,7 +37,7 @@ const SourceEditor = () => {
34
37
  editorViewRef.current = null;
35
38
  }
36
39
  },
37
- [markdown2, readOnly, updateMarkdown]
40
+ [markdown2, readOnly, updateMarkdown, cmExtensions]
38
41
  );
39
42
  return /* @__PURE__ */ React__default.createElement("div", { ref, className: "cm-sourceView" });
40
43
  };
@@ -11,6 +11,7 @@ import type { HistoryState } from '@lexical/history';
11
11
  import type { LexicalEditor, RangeSelection, Klass, LexicalNode, TextFormatType, ElementNode, DecoratorNode } from 'lexical';
12
12
  import type { SystemSpec, Realm, RealmNode, PluginConstructor, TypedRealm, ValueForKey, SystemKeys, ValuesForKeys, SystemDict } from '../../gurx';
13
13
  /// <reference types="react" />
14
+ import { Extension } from '@codemirror/state';
14
15
  /** @internal */
15
16
  export type ViewMode = 'rich-text' | 'source' | 'diff';
16
17
  /** @internal */
@@ -128,7 +129,13 @@ export declare const diffSourceSystem: SystemSpec<[SystemSpec<[], (r: Realm) =>
128
129
  viewMode: RealmNode<ViewMode>;
129
130
  diffMarkdown: RealmNode<string>;
130
131
  markdownSourceEditorValue: RealmNode<string>;
132
+ cmExtensions: RealmNode<Extension[]>;
131
133
  }>;
134
+ export interface DiffSourcePluginParams {
135
+ viewMode?: ViewMode;
136
+ diffMarkdown?: string;
137
+ codeMirrorExtensions?: Extension[];
138
+ }
132
139
  export declare const
133
140
  /** @internal */
134
141
  diffSourcePlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
@@ -245,16 +252,15 @@ diffSourcePlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
245
252
  viewMode: RealmNode<ViewMode>;
246
253
  diffMarkdown: RealmNode<string>;
247
254
  markdownSourceEditorValue: RealmNode<string>;
248
- }>, {
249
- viewMode?: ViewMode | undefined;
250
- diffMarkdown?: string | undefined;
251
- }>,
255
+ cmExtensions: RealmNode<Extension[]>;
256
+ }>, DiffSourcePluginParams>,
252
257
  /** @internal */
253
258
  diffSourcePluginHooks: {
254
259
  useRealmContext: () => TypedRealm<{
255
260
  viewMode: RealmNode<ViewMode>;
256
261
  diffMarkdown: RealmNode<string>;
257
262
  markdownSourceEditorValue: RealmNode<string>;
263
+ cmExtensions: RealmNode<Extension[]>;
258
264
  } & {
259
265
  activeEditor: RealmNode<LexicalEditor | null>;
260
266
  inFocus: RealmNode<boolean>;
@@ -311,10 +317,11 @@ diffSourcePluginHooks: {
311
317
  insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
312
318
  onBlur: RealmNode<FocusEvent>;
313
319
  }>;
314
- 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" | "markdownSourceEditorValue" | "viewMode" | "diffMarkdown">(key: K, callback: (value: ValueForKey<{
320
+ 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" | "markdownSourceEditorValue" | "viewMode" | "diffMarkdown" | "cmExtensions">(key: K, callback: (value: ValueForKey<{
315
321
  viewMode: RealmNode<ViewMode>;
316
322
  diffMarkdown: RealmNode<string>;
317
323
  markdownSourceEditorValue: RealmNode<string>;
324
+ cmExtensions: RealmNode<Extension[]>;
318
325
  } & {
319
326
  activeEditor: RealmNode<LexicalEditor | null>;
320
327
  inFocus: RealmNode<boolean>;
@@ -375,6 +382,7 @@ diffSourcePluginHooks: {
375
382
  viewMode: RealmNode<ViewMode>;
376
383
  diffMarkdown: RealmNode<string>;
377
384
  markdownSourceEditorValue: RealmNode<string>;
385
+ cmExtensions: RealmNode<Extension[]>;
378
386
  } & {
379
387
  activeEditor: RealmNode<LexicalEditor | null>;
380
388
  inFocus: RealmNode<boolean>;
@@ -434,6 +442,7 @@ diffSourcePluginHooks: {
434
442
  viewMode: RealmNode<ViewMode>;
435
443
  diffMarkdown: RealmNode<string>;
436
444
  markdownSourceEditorValue: RealmNode<string>;
445
+ cmExtensions: RealmNode<Extension[]>;
437
446
  } & {
438
447
  activeEditor: RealmNode<LexicalEditor | null>;
439
448
  inFocus: RealmNode<boolean>;
@@ -494,6 +503,7 @@ diffSourcePluginHooks: {
494
503
  viewMode: RealmNode<ViewMode>;
495
504
  diffMarkdown: RealmNode<string>;
496
505
  markdownSourceEditorValue: RealmNode<string>;
506
+ cmExtensions: RealmNode<Extension[]>;
497
507
  } & {
498
508
  activeEditor: RealmNode<LexicalEditor | null>;
499
509
  inFocus: RealmNode<boolean>;
@@ -550,10 +560,11 @@ diffSourcePluginHooks: {
550
560
  insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
551
561
  onBlur: RealmNode<FocusEvent>;
552
562
  }>) => void;
553
- 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" | "markdownSourceEditorValue" | "viewMode" | "diffMarkdown">(key: K_2) => (value: ValueForKey<{
563
+ 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" | "markdownSourceEditorValue" | "viewMode" | "diffMarkdown" | "cmExtensions">(key: K_2) => (value: ValueForKey<{
554
564
  viewMode: RealmNode<ViewMode>;
555
565
  diffMarkdown: RealmNode<string>;
556
566
  markdownSourceEditorValue: RealmNode<string>;
567
+ cmExtensions: RealmNode<Extension[]>;
557
568
  } & {
558
569
  activeEditor: RealmNode<LexicalEditor | null>;
559
570
  inFocus: RealmNode<boolean>;
@@ -6,6 +6,7 @@ const diffSourceSystem = system(
6
6
  (r, [{ markdown, setMarkdown }]) => {
7
7
  const diffMarkdown = r.node("");
8
8
  const markdownSourceEditorValue = r.node("");
9
+ const cmExtensions = r.node([]);
9
10
  r.link(markdown, markdownSourceEditorValue);
10
11
  const viewMode = r.node("rich-text");
11
12
  r.sub(
@@ -28,7 +29,7 @@ const diffSourceSystem = system(
28
29
  }
29
30
  }
30
31
  );
31
- return { viewMode, diffMarkdown, markdownSourceEditorValue };
32
+ return { viewMode, diffMarkdown, markdownSourceEditorValue, cmExtensions };
32
33
  },
33
34
  [coreSystem]
34
35
  );
@@ -45,6 +46,7 @@ const [
45
46
  },
46
47
  init(r, params) {
47
48
  r.pubKey("diffMarkdown", (params == null ? void 0 : params.diffMarkdown) || "");
49
+ r.pubKey("cmExtensions", (params == null ? void 0 : params.codeMirrorExtensions) || []);
48
50
  r.pubKey("addEditorWrapper", DiffSourceWrapper);
49
51
  }
50
52
  });
package/package.json CHANGED
@@ -9,7 +9,7 @@
9
9
  "private": false,
10
10
  "sideEffects": false,
11
11
  "type": "module",
12
- "version": "1.4.3",
12
+ "version": "1.5.0",
13
13
  "description": "React component for rich text markdown editing",
14
14
  "scripts": {
15
15
  "build": "vite build",
@@ -110,6 +110,7 @@
110
110
  "@typescript-eslint/parser": "^6.7.2",
111
111
  "@vitejs/plugin-react": "^4.0.0",
112
112
  "autoprefixer": "^10.4.14",
113
+ "cm6-theme-basic-dark": "^0.2.0",
113
114
  "eslint": "^8.41.0",
114
115
  "eslint-config-prettier": "^8.8.0",
115
116
  "eslint-config-standard-with-typescript": "^39.1.0",