@mdxeditor/editor 0.0.1 → 0.0.5-development

package/dist/plugins/diff-source/DiffViewer.js

@@ -0,0 +1,59 @@
+import React__default from "react";
+import { diffSourcePluginHooks } from "./index.js";
+import { corePluginHooks } from "../core/index.js";
+import { MergeView } from "@codemirror/merge";
+import { EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { COMMON_STATE_CONFIG_EXTENSIONS } from "./SourceEditor.js";
+const DiffViewer = () => {
+  const [newText] = corePluginHooks.useEmitterValues("markdown");
+  const [oldText] = diffSourcePluginHooks.useEmitterValues("diffMarkdown");
+  const updateMarkdown = diffSourcePluginHooks.usePublisher("markdownSourceEditorValue");
+  return /* @__PURE__ */ React__default.createElement(CmMergeView, { oldMarkdown: oldText, newMarkdown: newText, onUpdate: updateMarkdown });
+};
+const CmMergeView = ({ oldMarkdown, newMarkdown, onUpdate }) => {
+  const cmMergeViewRef = React__default.useRef(null);
+  const [cmExtensions] = diffSourcePluginHooks.useEmitterValues("cmExtensions");
+  const ref = React__default.useCallback(
+    (el) => {
+      var _a;
+      if (el !== null) {
+        cmMergeViewRef.current = new MergeView({
+          renderRevertControl: () => {
+            const el2 = document.createElement("button");
+            el2.classList.add("cm-merge-revert");
+            el2.appendChild(document.createTextNode("⮕"));
+            return el2;
+          },
+          parent: el,
+          orientation: "a-b",
+          revertControls: "a-to-b",
+          gutter: true,
+          a: {
+            doc: oldMarkdown,
+            extensions: [...cmExtensions, ...COMMON_STATE_CONFIG_EXTENSIONS, EditorState.readOnly.of(true)]
+          },
+          b: {
+            doc: newMarkdown,
+            extensions: [
+              ...cmExtensions,
+              ...COMMON_STATE_CONFIG_EXTENSIONS,
+              EditorView.updateListener.of(({ state }) => {
+                const md = state.doc.toString();
+                onUpdate(md);
+              })
+            ]
+          }
+        });
+      } else {
+        (_a = cmMergeViewRef.current) == null ? void 0 : _a.destroy();
+        cmMergeViewRef.current = null;
+      }
+    },
+    [newMarkdown, oldMarkdown, onUpdate, cmExtensions]
+  );
+  return /* @__PURE__ */ React__default.createElement("div", { ref });
+};
+export {
+  DiffViewer
+};

package/dist/plugins/diff-source/SourceEditor.d.ts

@@ -0,0 +1,4 @@
+import { Extension } from '@codemirror/state';
+import React from 'react';
+export declare const COMMON_STATE_CONFIG_EXTENSIONS: Extension[];
+export declare const SourceEditor: () => React.JSX.Element;

package/dist/plugins/diff-source/SourceEditor.js

@@ -0,0 +1,53 @@
+import { markdown } from "@codemirror/lang-markdown";
+import { EditorState } from "@codemirror/state";
+import { lineNumbers, EditorView } from "@codemirror/view";
+import { basicLight } from "cm6-theme-basic-light";
+import { basicSetup } from "codemirror";
+import React__default from "react";
+import { diffSourcePluginHooks } from "./index.js";
+import { corePluginHooks } from "../core/index.js";
+const COMMON_STATE_CONFIG_EXTENSIONS = [
+  basicSetup,
+  basicLight,
+  markdown(),
+  lineNumbers(),
+  EditorView.lineWrapping
+];
+const SourceEditor = () => {
+  const [markdown2, readOnly] = corePluginHooks.useEmitterValues("markdown", "readOnly");
+  const [cmExtensions] = diffSourcePluginHooks.useEmitterValues("cmExtensions");
+  const updateMarkdown = diffSourcePluginHooks.usePublisher("markdownSourceEditorValue");
+  const editorViewRef = React__default.useRef(null);
+  const ref = React__default.useCallback(
+    (el) => {
+      var _a;
+      if (el !== null) {
+        const extensions = [
+          // custom extensions should come first so that you can override the default extensions
+          ...cmExtensions,
+          ...COMMON_STATE_CONFIG_EXTENSIONS,
+          EditorView.updateListener.of(({ state }) => {
+            updateMarkdown(state.doc.toString());
+          })
+        ];
+        if (readOnly) {
+          extensions.push(EditorState.readOnly.of(true));
+        }
+        el.innerHTML = "";
+        editorViewRef.current = new EditorView({
+          parent: el,
+          state: EditorState.create({ doc: markdown2, extensions })
+        });
+      } else {
+        (_a = editorViewRef.current) == null ? void 0 : _a.destroy();
+        editorViewRef.current = null;
+      }
+    },
+    [markdown2, readOnly, updateMarkdown, cmExtensions]
+  );
+  return /* @__PURE__ */ React__default.createElement("div", { ref, className: "cm-sourceView" });
+};
+export {
+  COMMON_STATE_CONFIG_EXTENSIONS,
+  SourceEditor
+};