code complete

apps/example-react/src/Editor.tsx

@@ -6,7 +6,6 @@ import {
   InsertTable,
   ListsToggle,
   MDXEditor,
-  MDXEditorMethods,
   UndoRedo,
   diffSourcePlugin,
   headingsPlugin,
@@ -21,24 +20,20 @@ import {
 } from "@mdxeditor/editor";
 import { highlightPlugin } from "mdxe-plugin-highlight";
 import "@mdxeditor/editor/style.css";
-import { useRef } from "react";
+import { useState } from "react";
 
 const Editor = () => {
-  const editorRef = useRef<MDXEditorMethods | null>(null);
+  const [editorState, setEditorState] = useState<string>("");
 
   const handleGetState = () => {
-    console.log(editorRef.current?.getMarkdown());
-  };
-
-  const insertStartingText = () => {
-    editorRef.current?.setMarkdown(`Hello World`);
+    console.log(editorState);
   };
 
   return (
-    <div style={{backgroundColor: "#FFF"}}>
+    <div style={{ backgroundColor: "#FFF" }}>
       <MDXEditor
-        ref={editorRef}
-        markdown=""
+        markdown={editorState}
+        onChange={(newState) => setEditorState(newState)}
         plugins={[
           headingsPlugin(),
           listsPlugin(),
@@ -71,7 +66,6 @@ const Editor = () => {
         ]}
       />
       <button onClick={handleGetState}>Get State</button>
-      <button onClick={insertStartingText}>Insert Starting Text</button>
     </div>
   );
 };

package.json

@@ -2,7 +2,7 @@
   "name": "mdxe-plugins",
   "private": true,
   "scripts": {
-    "dev": "turbo watch dev --filter=example-react",
+    "dev": "turbo dev --filter=example-react",
     "docs:dev": "turbo dev --filter=docs",
     "docs:build": "turbo build --filter=docs",
     "example:build": "turbo build --filter=example-react",
@@ -19,7 +19,7 @@
     "@playwright/test": "^1.40.1",
     "@types/node": "^20.11.0",
     "prettier": "^3.1.1",
-    "turbo": "latest",
+    "turbo": "^2.0.0",
     "typescript": "^5.4.3"
   },
   "engines": {

packages/mdxe-plugin-highlight/src/index.ts

@@ -37,19 +37,17 @@ export const highlightPlugin = realmPlugin<HighlightPluginOptions>({
       [addActivePlugin$]: "text-highlight",
     });
   },
-  update(realm, options): void {
-    realm.pub(stringsToHighlight$, options?.stringsToHighlight ?? []);
-    realm.pub(highlightColor$, options?.highlightColor ?? "red");
-
-    const stringsToHighlight = realm.getValue(stringsToHighlight$);
-
+  postInit(realm, params) {
     const currentEditor = realm.getValue(activeEditor$);
     if (!currentEditor) {
       return;
     }
 
+    // Register listener for textNodes
     currentEditor.registerNodeTransform(TextNode, (textNode) => {
       // This transform runs twice but does nothing the first time because it doesn't meet the preconditions
+      const stringsToHighlight = realm.getValue(stringsToHighlight$);
+
       const currentText = textNode.getTextContent();
       const includes = checkIfArrayIncludes(currentText, stringsToHighlight);
       if (!includes) {
@@ -130,4 +128,8 @@ export const highlightPlugin = realmPlugin<HighlightPluginOptions>({
       }
     });
   },
+  update(realm, options): void {
+    realm.pub(stringsToHighlight$, options?.stringsToHighlight ?? []);
+    realm.pub(highlightColor$, options?.highlightColor ?? "red");
+  },
 });

turbo.json

@@ -20,5 +20,6 @@
     "preview": {
       "dependsOn": ["^build", "build"]
     }
-  }
+  },
+  "ui": "stream"
 }