Insert in the current position?

[ikkysleepy]

How do I get the current position to Insert my images. I have this, which works but I wanted to insert the images in the current cursor position. I have a custom toolbar button that I am calling to open a new view to select images and then I am processing the images and inserting them.

        let selectedImages = '';
        images.map(async (photo) => {
            selectedImages = selectedImages + `\r![](${photo.base_url})\r\n`;
        });

        editorRef.value?.insert(() => {
            return {
                targetValue: `${selectedImages}`,
                select: true,
                deviationStart: 0,
                deviationEnd: 0
            };
        });

I didn't see how to get the current cursor position, is this possible?

[imzbf]

Yes, it does work. targetValue is always inserted into current cursor position.

[ikkysleepy]

It keeps inserting the value into the top position. I think it's because I am navigating to a different view element and then going back? I'll try to see if I can focus back to the element. Is there away I can get the current cursor position / pass it to the insert?

Example of Inserting Image

[ikkysleepy]

The issue is with focus. I tried several times to try to get the selectedText but this is not actually a text area so I can't get the value. I have on click event working where I get the div and can calculate the cursor position. This is pretty consistent; however, if a user does arrow up / down or presses enter then the cursor needs to be calculated by some tricks and there are a lot of corner cases. Can you help think of a way to get the current cursor position on blur so that I can store this value?

Update: I was able to use the ModalToolbar to do a modal within a Modal. This not ideal but it did work with tracking the cursor pointer.

[imzbf]

It keeps inserting the value into the top position. I think it's because I am navigating to a different view element and then going back? I'll try to see if I can focus back to the element. Is there away I can get the current cursor position / pass it to the insert?

Example of Inserting Image

Did you hide the editor when opening the pop-up window? Like setting v-if. The editor instance was destroyed, there is no way to retrieve the last cursor position. I found the same problem as you encountered through the following steps

1. Move the cursor position to the middle.
2. Input some words into element input.
3. Click button which named dddd.

<script setup lang="ts">
import { ref } from 'vue';
import { MdEditor, NormalToolbar } from 'md-editor-v3';
import type { ExposeParam } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

const text = ref(`123

234

345
34
5
345


3465`);
const editorRef = ref<ExposeParam>();

const callback = () => {
  editorRef.value?.insert((selectedText) => {
    return {
      targetValue: `![${selectedText}](https://imzbf.github.io/md-editor-rt/imgs/mark_emoji.gif)`,
      select: false,
      deviationStart: 0,
      deviationEnd: 0,
    };
  });
};

const show = ref(true);
const changeShow = () => {
  show.value = !show.value;
};
</script>

<template>
  <button @click="callback">dddd</button>
  <input @click="changeShow" @blur="changeShow" />
  <MdEditor v-if="show" v-model="text" :toolbars="['bold', 0]" ref="editorRef">
    <template #defToolbars>
      <NormalToolbar title="mark" @onClick="callback">
        <template #trigger>
          <svg class="md-editor-icon" aria-hidden="true">
            <use xlink:href="#md-editor-icon-strike-through"></use>
          </svg>
        </template>
      </NormalToolbar>
    </template>
  </MdEditor>
</template>

We should ensure that the editor is not removed from the page.

[ikkysleepy]

Thank You . This did solve the problem . I am using if-show now . Thanks.