getValue ---> getOffsetAt stack overflow #3652

pyt111 · 2021-11-03T07:15:40Z

pyt111
Nov 3, 2021

monaco-editor version: 0.29.1
Browser: chrome
OS:
Playground code that reproduces the issue:

<template>
  <div class="editor-container" :style="style">
    <div @click="getValue">click me getalue</div>

    <div ref="editorRef" class="editor" :style="style"> </div>
  </div>
</template>

<script lang="ts">
  import {
    computed,
    defineComponent,
    nextTick,
    onMounted,
    reactive,
    ref,
    toRefs,
    watch,
  } from 'vue';
  import * as monaco from 'monaco-editor';
  import { editor } from 'monaco-editor';

  export default defineComponent({
    name: 'MonacoEditor1',

    props: {
      width: {
        type: [String] as PropType<string>,
        default: '100%' as string,
      },
      height: { type: [String, Number], default: '100%' },
    },

    setup(props) {
      const state = reactive({
        value: '',
      });
      const editorRef = ref();
      const monacoEditor = ref<editor.IStandaloneCodeEditor | null>(null);

      const style = computed(() => {
        return {
          width: !/^\d+$/.test(props.width) ? props.width : `${props.width}px`,
          height: !/^\d+$/.test(String(props.height)) ? props.height : `${props.height}px`,
        };
      });

      const creatMonacoEditor = () => {
        monacoEditor.value = monaco.editor.create(editorRef.value, {
          value: state.value,
          language: 'sql',
        });
        monacoEditor.value.onDidChangeModelContent((e) => {
          const value = monacoEditor.value.getValue();
        });
      };

      const getValue = () => {
        console.log('monacoEditor.value?.getValue', monacoEditor.value?.getValue());
        
      }

      watch(
        () => style.value,
        () => {
          nextTick(() => {
            if (monacoEditor.value) {
              monacoEditor.value.layout();
            }
          });
        },
      );

      onMounted(() => {
        creatMonacoEditor();
      });

      return {
        // data
        ...toRefs(state),
        style,

        getValue,

        editorRef,
      };
    },
  });
</script>

<style scoped>
  .editor-container {
    height: 100%;
  }
</style>

this step

 getOffsetAt(lineNumber, column) {
        let leftLen = 0; // inorder
        let x = this.root;
        while (x !== SENTINEL) {
        // here Infinite loop
            if (x.left !== SENTINEL && x.lf_left + 1 >= lineNumber) {
                x = x.left;
            }
            else if (x.lf_left + x.piece.lineFeedCnt + 1 >= lineNumber) {
                leftLen += x.size_left;
                // lineNumber >= 2
                let accumualtedValInCurrentIndex = this.getAccumulatedValue(x, lineNumber - x.lf_left - 2);
                return leftLen += accumualtedValInCurrentIndex + column - 1;
            }
            else {
                lineNumber -= x.lf_left + x.piece.lineFeedCnt;
                leftLen += x.size_left + x.piece.length;
                x = x.right;
            }
        }
        return leftLen;
    }

Month7 · 2021-12-17T08:58:14Z

Month7
Dec 17, 2021

i have the same question on vue3.x

0 replies

Month7 · 2021-12-17T15:22:45Z

Month7
Dec 17, 2021

I have solved this problem, here is my solution:

Don’t let your editor instance be a reactive variable, but as an ordinary variable

change

const monacoEditor = ref<editor.IStandaloneCodeEditor | null>(null);

to

const monacoEditor:editor.IStandaloneCodeEditor = null

@pyt111

monaco-editor version: 0.29.1 Browser: chrome OS: Playground code that reproduces the issue:

<template>
  <div class="editor-container" :style="style">
    <div @click="getValue">click me getalue</div>

    <div ref="editorRef" class="editor" :style="style"> </div>
  </div>
</template>

<script lang="ts">
  import {
    computed,
    defineComponent,
    nextTick,
    onMounted,
    reactive,
    ref,
    toRefs,
    watch,
  } from 'vue';
  import * as monaco from 'monaco-editor';
  import { editor } from 'monaco-editor';

  export default defineComponent({
    name: 'MonacoEditor1',

    props: {
      width: {
        type: [String] as PropType<string>,
        default: '100%' as string,
      },
      height: { type: [String, Number], default: '100%' },
    },

    setup(props) {
      const state = reactive({
        value: '',
      });
      const editorRef = ref();
      const monacoEditor = ref<editor.IStandaloneCodeEditor | null>(null);

      const style = computed(() => {
        return {
          width: !/^\d+$/.test(props.width) ? props.width : `${props.width}px`,
          height: !/^\d+$/.test(String(props.height)) ? props.height : `${props.height}px`,
        };
      });

      const creatMonacoEditor = () => {
        monacoEditor.value = monaco.editor.create(editorRef.value, {
          value: state.value,
          language: 'sql',
        });
        monacoEditor.value.onDidChangeModelContent((e) => {
          const value = monacoEditor.value.getValue();
        });
      };

      const getValue = () => {
        console.log('monacoEditor.value?.getValue', monacoEditor.value?.getValue());
        
      }

      watch(
        () => style.value,
        () => {
          nextTick(() => {
            if (monacoEditor.value) {
              monacoEditor.value.layout();
            }
          });
        },
      );

      onMounted(() => {
        creatMonacoEditor();
      });

      return {
        // data
        ...toRefs(state),
        style,

        getValue,

        editorRef,
      };
    },
  });
</script>

<style scoped>
  .editor-container {
    height: 100%;
  }
</style>

this step

 getOffsetAt(lineNumber, column) {
        let leftLen = 0; // inorder
        let x = this.root;
        while (x !== SENTINEL) {
        // here Infinite loop
            if (x.left !== SENTINEL && x.lf_left + 1 >= lineNumber) {
                x = x.left;
            }
            else if (x.lf_left + x.piece.lineFeedCnt + 1 >= lineNumber) {
                leftLen += x.size_left;
                // lineNumber >= 2
                let accumualtedValInCurrentIndex = this.getAccumulatedValue(x, lineNumber - x.lf_left - 2);
                return leftLen += accumualtedValInCurrentIndex + column - 1;
            }
            else {
                lineNumber -= x.lf_left + x.piece.lineFeedCnt;
                leftLen += x.size_left + x.piece.length;
                x = x.right;
            }
        }
        return leftLen;
    }

0 replies

Kinplemelon · 2022-02-27T04:55:21Z

Kinplemelon
Feb 27, 2022

I have solved this problem, here is my solution:

Don’t let your editor instance be a reactive variable, but as an ordinary variable

change

const monacoEditor = ref<editor.IStandaloneCodeEditor | null>(null);

to

const monacoEditor:editor.IStandaloneCodeEditor = null

@pyt111

monaco-editor version: 0.29.1 Browser: chrome OS: Playground code that reproduces the issue:

<template>
  <div class="editor-container" :style="style">
    <div @click="getValue">click me getalue</div>

    <div ref="editorRef" class="editor" :style="style"> </div>
  </div>
</template>

<script lang="ts">
  import {
    computed,
    defineComponent,
    nextTick,
    onMounted,
    reactive,
    ref,
    toRefs,
    watch,
  } from 'vue';
  import * as monaco from 'monaco-editor';
  import { editor } from 'monaco-editor';

  export default defineComponent({
    name: 'MonacoEditor1',

    props: {
      width: {
        type: [String] as PropType<string>,
        default: '100%' as string,
      },
      height: { type: [String, Number], default: '100%' },
    },

    setup(props) {
      const state = reactive({
        value: '',
      });
      const editorRef = ref();
      const monacoEditor = ref<editor.IStandaloneCodeEditor | null>(null);

      const style = computed(() => {
        return {
          width: !/^\d+$/.test(props.width) ? props.width : `${props.width}px`,
          height: !/^\d+$/.test(String(props.height)) ? props.height : `${props.height}px`,
        };
      });

      const creatMonacoEditor = () => {
        monacoEditor.value = monaco.editor.create(editorRef.value, {
          value: state.value,
          language: 'sql',
        });
        monacoEditor.value.onDidChangeModelContent((e) => {
          const value = monacoEditor.value.getValue();
        });
      };

      const getValue = () => {
        console.log('monacoEditor.value?.getValue', monacoEditor.value?.getValue());
        
      }

      watch(
        () => style.value,
        () => {
          nextTick(() => {
            if (monacoEditor.value) {
              monacoEditor.value.layout();
            }
          });
        },
      );

      onMounted(() => {
        creatMonacoEditor();
      });

      return {
        // data
        ...toRefs(state),
        style,

        getValue,

        editorRef,
      };
    },
  });
</script>

<style scoped>
  .editor-container {
    height: 100%;
  }
</style>

this step

 getOffsetAt(lineNumber, column) {
        let leftLen = 0; // inorder
        let x = this.root;
        while (x !== SENTINEL) {
        // here Infinite loop
            if (x.left !== SENTINEL && x.lf_left + 1 >= lineNumber) {
                x = x.left;
            }
            else if (x.lf_left + x.piece.lineFeedCnt + 1 >= lineNumber) {
                leftLen += x.size_left;
                // lineNumber >= 2
                let accumualtedValInCurrentIndex = this.getAccumulatedValue(x, lineNumber - x.lf_left - 2);
                return leftLen += accumualtedValInCurrentIndex + column - 1;
            }
            else {
                lineNumber -= x.lf_left + x.piece.lineFeedCnt;
                leftLen += x.size_left + x.piece.length;
                x = x.right;
            }
        }
        return leftLen;
    }

you solved my problem, thank you very much

0 replies

alexander-zw · 2022-06-29T22:12:51Z

alexander-zw
Jun 29, 2022

@Month7 I don't think that works for my use case, since the editor must be converted to a proxy to be shared between Vue blocks (e.g. between setup, mounted, and methods), or to be shared with other Vue components. However, I found a hack that seems to work, Object.freeze():

// Vue stuff
data(component) {
  return {
    editor: null as editor.IStandaloneCodeEditor | null,
  };
},
mounted() {
  const editor = monaco.editor.create(element, {});
  this.editor = Object.freeze(editor);
  console.log(this.editor.getValue()); // Prints correctly.
}
// More Vue stuff

0 replies

alexander-zw · 2022-09-01T18:12:29Z

alexander-zw
Sep 1, 2022

Note: I ran into the same issue again, this time with context keys. Also fixed with freeze.

this.editor = Object.freeze(monaco.editor.create(element, {}));
this.contextKey = Object.freeze(this.editor.createContextKey('myContextKey', false));
this.contextKey.set(true);

0 replies

bcrespinr · 2024-11-27T23:59:41Z

bcrespinr
Nov 27, 2024

When I was using Vue 2, Object.freeze was my go-to solution to prevent reactivity issues with the Monaco Editor instance. It worked well and avoided any interference from Vue's reactivity system.

But when I migrated to Nuxt/Vue 3, this approach started breaking things. I got errors like:
Uncaught Error: Cannot assign to read-only property '_bannerDomNode' of object '#<StandaloneEditor2>'

It turns out Vue 3's reactivity system interacts differently with frozen objects, and that messed up Monaco Editor's internal behavior.

After some trial and error, I found that using shallowRef solved the problem. Unlike Object.freeze, shallowRef keeps Vue from deeply reacting to the Monaco Editor instance, but still lets you use it as expected.

You just have to define the editor variable like this at start :
const editor = shallowRef(null)

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

getValue ---> getOffsetAt stack overflow #3652

{{title}}

Replies: 6 comments

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

getValue ---> getOffsetAt stack overflow #3652

pyt111 Nov 3, 2021

Replies: 6 comments

Month7 Dec 17, 2021

Month7 Dec 17, 2021

Kinplemelon Feb 27, 2022

alexander-zw Jun 29, 2022

alexander-zw Sep 1, 2022

bcrespinr Nov 27, 2024

pyt111
Nov 3, 2021

Month7
Dec 17, 2021

Month7
Dec 17, 2021

Kinplemelon
Feb 27, 2022

alexander-zw
Jun 29, 2022

alexander-zw
Sep 1, 2022

bcrespinr
Nov 27, 2024