Search code examples
javascripthtmlace-editor

Ace editor paste button is missing on iPhone

I have embedded Ace editor to my web-app and when app is opened on iPhone (Safari or Chrome) - the button "paste" is not shown in the menu.

However, I do see this button when:

  1. I open my app from Google Chrome's mobile mode
  2. I open this page on the iPhone: https://ace.c9.io

The button I am talking about: Ace web-site

On my app:

My app

UPD: even more weird - when I open below snippet from iPhone - I also see the button.

So the question is rather - what may cause this button to disappear on my implementation.

The snippet used for embedding:

editor = ace.edit("editor");
editor.setOptions({
  mode: "ace/mode/python",
  wrap: "off",
  tabSize: 4,
  overwrite: false,
  useWorker: false,
  newLineMode: "auto",
  useSoftTabs: true,
  firstLineNumber: 1,
  indentedSoftWrap: true,
  navigateWithinSoftTabs: false,
 })
#editor { 
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.10.1/ace.js"
        integrity="sha512-U/FB3cdRpCPIpdDLjvLQoqCiupCM95qGrIMZqb99+84XrRQp4EppJ0gfVZAL5kcI9owxxKxrMrrFDJP1RfKAXQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="editor"></div>

Solution

  • Found out the reason 🤦‍♂️ The button paste is shown only when page is hosted via https

    I have deployed my application and now see the button. However, it's not shown when debugging locally (over HTTP).