From 5b45ddf004500ca7f201e5084382412512e76239 Mon Sep 17 00:00:00 2001 From: Tsotne Gvadzabia Date: Wed, 12 Jun 2024 01:07:34 +0100 Subject: [PATCH] highlight working, but not properly --- packages/mdxe-plugin-highlight/src/index.ts | 70 +++++++++------------ 1 file changed, 29 insertions(+), 41 deletions(-) diff --git a/packages/mdxe-plugin-highlight/src/index.ts b/packages/mdxe-plugin-highlight/src/index.ts index 14b20a6..4896b8a 100644 --- a/packages/mdxe-plugin-highlight/src/index.ts +++ b/packages/mdxe-plugin-highlight/src/index.ts @@ -1,23 +1,22 @@ import { Cell, addActivePlugin$, - addExportVisitor$, - addImportVisitor$, + // addExportVisitor$, + // addImportVisitor$, realmPlugin, markdown$, Signal, map, - rootEditor$, activeEditor$, // rootEditor$, // setMarkdown$, // insertDecoratorNode$, } from "@mdxeditor/editor"; -import { - HighlightedTextNode, - LexicalHighlightVisitor, - MdastHighlightVisitor, -} from "./visitors"; +import {} from // HighlightedTextNode, +// LexicalHighlightVisitor, +// MdastHighlightVisitor, +"./visitors"; +import { TextNode } from "lexical"; const stringsToHighlight$ = Cell>([]); const highlightColor$ = Cell("red"); @@ -48,8 +47,8 @@ export const highlightPlugin = realmPlugin({ console.log("Init"); realm.pubIn({ [addActivePlugin$]: "text-highlight", - [addImportVisitor$]: [MdastHighlightVisitor], - [addExportVisitor$]: [LexicalHighlightVisitor], + // [addImportVisitor$]: [MdastHighlightVisitor], + // [addExportVisitor$]: [LexicalHighlightVisitor], }); }, update(realm, options): void { @@ -59,40 +58,29 @@ export const highlightPlugin = realmPlugin({ const stringsToHighlight = realm.getValue(stringsToHighlight$); - const md = realm.pipe( - markdown$, - map((str: string) => { - const regex = new RegExp(stringsToHighlight.join("|"), "gi"); - if (regex.test(str)) { - return str.replace(regex, (match) => `**${match}**`); // replace with your desired replacement - } - return str; - }) - ); - - realm.sub(md, (markdown) => { - const rootEditor = realm.getValue(rootEditor$); - const currentEditor = realm.getValue(activeEditor$); - const stringsToHighlight = realm.getValue(stringsToHighlight$); - if (!stringsToHighlight || stringsToHighlight.length === 0) { + const currentEditor = realm.getValue(activeEditor$); + if (!currentEditor) { + return; + } + currentEditor.registerNodeTransform(TextNode, (textNode) => { + // This transform runs twice but does nothing the first time because it doesn't meet the preconditions + console.log(textNode.getTextContent()); + if ( + textNode + .getStyle() + .includes(`color: ${realm.getValue(highlightColor$)}`) + ) { + console.log("Already highlighted"); return; } - - if (!rootEditor || !currentEditor) { - return; + if ( + stringsToHighlight.some((highlightString) => { + const regex = new RegExp(highlightString, "gi"); + return regex.test(textNode.getTextContent()); + }) + ) { + textNode.setStyle(`color: ${realm.getValue(highlightColor$)}`); } - - console.log("Current Editor", currentEditor); - - // This might be useful but we might have to switch back to the TextNode's - // https://lexical.dev/docs/concepts/transforms - currentEditor.registerNodeTransform(HighlightedTextNode, (node) => {}); - - const hTextNodes = rootEditor.hasNode(HighlightedTextNode); - - console.log(hTextNodes, "HTextNodes"); - - // realm.pubIn({ [setMarkdown$]: markdown }); }); }, });