Safari/Chrome: курсор не размещается до или после нередактируемых элементов в редакторах форматированного текста (Jodit) ⇐ Javascript

[Anonymous]

Я столкнулся с проблемой положения курсора в Safari при работе с нередактируемыми элементами в редакторе форматированного текста (например, Jodit).
Когда встроенный или блочный элемент внутри редактора помечен как нередактируемый (с использованием contenteditable="false", data-non-editable или защищенной/настраиваемой оболочки), Safari ведет себя иначе, чем Chrome и Firefox:

• Курьер не может быть расположен непосредственно перед или после нередактируемого элемента.
• При нажатии рядом с границей элемента иногда курсор помещается внутрь неправильного текстового узла или выходит за пределы ожидаемой области.
• В некоторых случаях редактор не может создать правильный диапазон выбора рядом с защищенным элементом, что приводит к ошибке логики навигации или удаления. не удалось.
• Safari возвращает противоречивые значения Range.startContainer / Range.startOffset рядом с нередактируемыми узлами.
• Он также иногда отказывается свернуть выделение на границе, если рядом с нередактируемым элементом не существует дополнительного текстового узла.
  const editorConfig = {
  readonly: false,
  statusbar: false,
  toolbar: '#global-jodit-toolbar-container',
  placeholder: 'How this will appear in the SOAP note...',
  showPlaceholder: true,
  showFullsizeBtn: false,
  saveSelectionOnBlur: false,
  askBeforePasteFromWord: false,
  askBeforePasteHTML: false,
  scrollToPastedContent: true,
  addNewLineOnDBLClick: false,
  autofocus: false,
  enter: 'br' as any, // Use
  instead of tags for new lines
  enterBlock: 'br' as any, // Consistent behavior for block-level enter
  cleanHTML: {
  removeEmptyElements: false,
  fillEmptyParagraph: false,
  },
  beautifyHTML: false,
  useNativeTooltip: true,
  buttons: [
  'undo',
  'redo',
  '|',
  'fontsize',
  'bold',
  'italic',
  'underline',
  'strikethrough',
  '|',
  'brush',
  'eraser',
  '|',
  'ul',
  'ol',
  ],
  showCharsCounter: false,
  maxWidth:
  isDesktop && selectedMenuItem?.menuType === 'default'
  ? is1900To1920
  ? 380
  : isLaptop
  ? 320
  : '-webkit-fill-available'
  : selectedMenuItem?.menuType === 'add-on' && isDesktop
  ? is1900To1920
  ? 690
  : isLaptop
  ? 480
  : '-webkit-fill-available'
  : selectedMenuItem?.menuType === 'default'
  ? 363
  : 610,
  processPasteHTML: true,
  processPasteFromWord: true,
  showWordsCounter: false,
  showXPathInStatusbar: false,
  toolbarSticky: false,
  toolbarAdaptive: false,
  style: {
  color: theme.palette.customColors.grayV2[900],
  fontFamily: 'Inter',
  fontSize: '14px !important',
  minHeight: '100px !important',
  lineHeight: '28px !important',
  caretColor: '#9772e3',
  },
  // Enable drag and drop functionality
  enableDragAndDrop: false,
  disablePlugins: ['drag-and-drop', 'drag-and-drop-element', 'backspace'],
  }

Sometimes Chrome (Blink engine) sometimes fails to position the caret correctly after inline non-editable elements

Sample html:-
Accident typeXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<span class="soap-builder-narrative-question" data-attributetype="question" data-attributeidentifier="row-1757600496733-11aglbt2b" data-menuid="2148" data-attributelabel="Accident type" draggable="true" contenteditable="false" style="-webkit-user-select: none;">Accident type</span>


Подробнее здесь: https://stackoverflow.com/questions/798 ... -rich-text