Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

getValue ---> getOffsetAt stack overflow

See original GitHub issue

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;
    }

Issue Analytics

State:
Created 2 years ago
Reactions:2
Comments:5 (2 by maintainers)

Top GitHub Comments

6reactions

Month7commented, 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);

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;
    }

1reaction

alexander-zwcommented, 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

Top Results From Across the Web

Monaco editor I want to get value between brackets from caret ...

The character "s" seems to be in excess and you dont need to escape % it should be /\[%(.*?)%\]/g.

Integrations - Stack Overflow for Teams Help Center

Embed knowledge sharing into your existing workflows, whether in Slack, MS Teams, JIRA, or Github Enterprise.

ITextModel | Monaco Editor API - Microsoft Open Source

This is the preferred way of editing the model. The edit operations will land on the undo stack. Parameters. beforeCursorState: Selection[]. The cursor ......

llvm::ConstantInt Class Reference

Public Member Functions. ConstantInt (const ConstantInt &)=delete. const APInt &, getValue () const. Return the constant as an APInt value reference.

Stack Overflow Tech Stack

JavaScript, GitHub, Git, Visual Studio Code, and HTML5 are some of the popular tools that Stack Overflow uses. Learn more about the Language,...