focusreactive / headless-cms-yaml-input Goto Github PK

While working with a YamlEditor component within a NextJS project running in development mode, any time I delete all text from the editor window, an error is thrown:

Error: merge function should return object with "text" or "json" fields

Call Stack
getMergedValue
node_modules/@focus-reactive/react-yaml/dist/YamlEditor.js (94:0)
eval
node_modules/@focus-reactive/react-yaml/dist/YamlEditor.js (131:0)
updateMemo
node_modules/react-dom/cjs/react-dom.development.js (17246:0)
Object.useMemo
node_modules/react-dom/cjs/react-dom.development.js (17886:0)
Object.useMemo
node_modules/react/cjs/react.development.js (1650:0)
YamlEditor
node_modules/@focus-reactive/react-yaml/dist/YamlEditor.js (130:0)

index.d.ts:

interface EditorProps {
  json?: {};
  text?: string;
  onChange?: (value: { json: {}; text: string }) => void;
  onError?: (error: {}) => void;
  theme?: any;
}
declare const YamlEditor: (props: EditorProps) => JSX.Element;
export default YamlEditor;

The optional properties "merge" and "ref" need to be added to EditorProps.

Hi,

The demo application (https://headless-cms-yaml-input.vercel.app/) is currently not working. It shows this message on screen:

Application error: a client-side exception has occurred (see the browser console for more information).

And this message in the console:

Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.
NextJS 16
o
o
o
o
resolve
resolve
create
E
E
Ii
unstable_runWithPriority
$l
Oi
zi
D
onmessage

Programmatically updating the text of the yaml editor, either by using ref.current.replaceValue or by using merge={({text}) => {return {text: text}}), fails if the text currently within the editor is more characters than the new text. The error message is RangeError: Selection points outside of document, and is thrown by codemirror/text/dist/index.cjs/Transaction constructor.

replaceText example:

const yamlEditorRef = useRef<any | null>(null);
...
<button onClick={() => { yamlEditorRef.current.replaceValue({ text: "foo: bar" }); }}>Reset</button>
<YamlEditor text={exampleYaml} ref={yamlEditorRef} />

merge example:

const [exampleYaml, setExampleYaml] = useState("");
const handleYamlChange = ({ json, text }: { json: any, text: string }) => {
    setExampleYaml(text);
}
const handleMerge = ({ json, text, currentText }: { json: any, text: string, currentText: string }) => {
    return { text: text };
...
<button onClick={() => { setExampleYaml("foo: bar"); }}>Reset</button>
<YamlEditor text={exampleYaml} onChange={handleYamlChange} merge={handleMerge}/>

In both of these cases, if the text box currently has something shorter than or equal to "foo: bar", such as "12345678", this will succeed. If the text box has more characters, it will fail with that RangeError.

The home page / demo page for this project is down: http://headless-cms-yaml-input.vercel.app/

Console reveals client-side exceptions e.g. Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.

Uncaught TypeError: Cannot read properties of undefined (reading 'baseTheme')
at ./node_modules/@focus-reactive/react-yaml/dist/extensions/zebra-stripes.js

Is it possible to disable editing?

else when I want to use a theme
for example like this
<YamlEditor json={data || {}} theme={oneDark}/>
then I get an error
chunk-NVDOSXA3.js?v=308cb37b:16659 Uncaught Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.