Skip to content

When using the function convertPosToMatchEditorMode() to convert the selection coordinates, there is an offset, resulting in inaccuracy.Β #3326

@arrayListTwo

Description

@arrayListTwo

Describe the bug

When switching between the editor mode (WYSIWYG ↔ Markdown) in Toast UI Editor, the position of the text selection cannot be correctly maintained. After converting the selection position using the convertPosToMatchEditorMode() method, by changing the mode using the changeMode() method and then setting the selection using the setSelection() method, the selection position remains incorrect or is lost.

To Reproduce

Steps to reproduce the behavior:

  • Open the sample file "switch-mode-preserve-selection.html"
  • Select some text in the editor (in WYSIWYG or Markdown mode)
  • Click the "Switch Mode and Preserve Selection" button
  • Observe the position of the selected area after the mode switch
  • The position of the selected area may be incorrect or completely lost

Expected behavior

When switching to the editor mode, the selection area should be able to remain correctly. After converting the selection area position using the function "convertPosToMatchEditorMode()", switch the mode by using the function "changeMode()", and then set the selection area using the function "setSelection()". The selection area should precisely be positioned at the position after the conversion.

Screenshots

If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: Windows 11
  • Browser Chrome
  • Version latest version

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context

  • Implementation method:
    • Use editor.getSelection() to obtain the selection area of the current mode
    • Use editor.convertPosToMatchEditorMode(start, end, targetMode) to convert the position of the selection area
    • Use editor.changeMode(targetMode) to switch the editor mode
    • Use editor.setSelection(targetPosition[0], targetPosition[1]) to set the selection area
  • Selection format:
    • WYSIWYG mode: The selection format is [start, end], where start and end are numbers.
    • Markdown mode: The selection format is [[line1, ch1], [line2, ch2]], where line and ch are numbers.
  • Delay settings:
    • Due to the time required for mode switching, setTimeout was used to delay the selection area setting (5000ms was used for testing)
    • Even with the delay setting, the position of the selection area remained incorrect

switch-mode-preserve-selection.html

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions