Add the ability to highlight individual lines #151

Activity

1. jaywcjlove commented on Jun 11, 2023

   

   jaywcjlove

   on Jun 11, 2023

   Member

   More actions

   @lucgagan https://codesandbox.io/embed/https-github-com-uiwjs-react-textarea-code-editor-issues-151-nsm7qp?fontsize=14&hidenavigation=1&theme=dark

   import React, { useEffect } from "react";
   import CodeEditor, { SelectionText } from "@uiw/react-textarea-code-editor";
   import rehypePrism from "rehype-prism-plus";
   import rehypeRewrite from "rehype-rewrite";
   import "./styles.css";
   
   export default function App() {
     const textRef = React.useRef();
     const [code, setCode] = React.useState(
       `function add(a, b) {\n  return a + b;\n}`
     );
     useEffect(() => {
       if (textRef.current) {
         const obj = new SelectionText(textRef.current);
         console.log("obj:", obj);
       }
     }, []);
     return (
       <CodeEditor
         value={code}
         ref={textRef}
         language="js"
         rehypePlugins={[
           [rehypePrism, { ignoreMissing: true }],
           [
             rehypeRewrite,
             {
               rewrite: (node, index, parent) => {
                 if (node.properties?.className?.includes("code-line")) {
                   if (index === 0 && node.properties?.className) {
                     node.properties.className.push("demo01");
                     console.log("~~~", index, node.properties?.className);
                   }
                 }
                 if (node.type === "text") {
                   if (node.value === "return" && parent.children.length === 1) {
                     parent.properties.className.push("demo123");
                     // console.log("node123", node.value);
                     // console.log("node111.properties.className", parent);
                   }
                 }
               }
             }
           ]
         ]}
         placeholder="Please enter JS code."
         onChange={(evn) => setCode(evn.target.value)}
         padding={15}
         style={{
           fontFamily:
             "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
           fontSize: 12
         }}
       />
     );
   }
2. jaywcjlove commented on Jun 11, 2023

   

   jaywcjlove

   on Jun 11, 2023

   Member

   More actions

   

   @lucgagan
3. jaywcjlove

   added a commit that references this issue on Jun 11, 2023

   doc: add example in document. (#151)

   4b608ce