uiwjs / react-codemirror

CodeMirror 6 component for React. @codemirror https://uiwjs.github.io/react-codemirror/
https://uiwjs.github.io/react-codemirror/
MIT License
1.55k stars 126 forks source link

Getting cm editor instance and swapping doc #468

Closed UhMarco closed 1 year ago

UhMarco commented 1 year ago

I've seen previous, similar questions but I'm not sure they're providing what I'm after. I'd like an instance of code mirror where I can run methods such as cm.getDoc() and cm.swapDoc() as seen in the documentation here:

image

Could anyone clear this up for me?

UhMarco commented 1 year ago

I've realised I was looking at version 5 documentation. What's the version 6 equivalent?

For some more context: I'm working on a note taking app and would like a different instance for each note opened, for history and similar purposes. I believe .swapDoc() would have been a solution in v5.

jaywcjlove commented 1 year ago

What version are you sure you are using?

UhMarco commented 1 year ago

What version are you sure you are using?

Latest

jaywcjlove commented 1 year ago

@UhMarco https://codesandbox.io/embed/react-codemirror-example-codemirror-6-https-github-com-uiwjs-react-codemirror-issues-468-it0dlh?fontsize=14&hidenavigation=1&theme=dark


import CodeMirror from "@uiw/react-codemirror";
import { StreamLanguage } from "@codemirror/language";
import { shell } from "@codemirror/legacy-modes/mode/shell";
import { useEffect, useRef } from "react";

const code = `x = 10`;

export default function App() {
  const ref = useRef();
  useEffect(() => {
    console.log("ref:", ref.current);
  }, []);
  return (
    <CodeMirror
      ref={ref}
      value={code}
      height="200px"
      readOnly={false}
      extensions={[StreamLanguage.define(shell)]}
      onChange={(value, viewUpdate) => {
        console.log("value:", value);
      }}
    />
  );
}

``
UhMarco commented 1 year ago

Thanks. What is the equivalent of .swapDoc() in the latest version?

jaywcjlove commented 1 year ago

@UhMarco You need to check the CM 6 documentation for this.

UhMarco commented 1 year ago

I've been looking but haven't found anything that looks similar...

UhMarco commented 1 year ago

@jaywcjlove Perhaps if I give some more context you'll be able to point me in the right direction. The way I'm currently swapping between notes is just by setting the content. If I perform an undo command, the content goes back to the previous note. From my understand swapDoc() would have been what I needed to prevent this from happening and also keep other notes in memory. Is there an equivalent for version 6? I have read through the docs you sent and have not seen something directly similar.

jaywcjlove commented 1 year ago

https://discuss.codemirror.net/

@UhMarco Possibility to ask questions to the CM author.

UhMarco commented 1 year ago

Solved, thanks for your help. https://discuss.codemirror.net/t/swapdoc-v6-equivalent/5973