Резюме:
– копировать обычный текст
– копировать обычный текст как файл
– обходной путь Firefox
– копировать несколько файлов одновременно (браузеры не поддерживают )
- application/octet-stream вместо text/plain (браузеры не поддерживают)

Я создал платформу для преобразования объектов Salesforce в код Kotlin/Java и подумал, что вместо того, чтобы вручную выбирать код и копировать его, было бы более удобнее иметь кнопку копирования для этого.

Насколько это сложно? Не слишком сложно, НО!☝️… Начнем с примеров.

Примеры

Это работает. Когда я нажимаю кнопку, которая вызывает эту функцию, она копирует simpleText в буфер обмена как text/plain MIME type.

Когда я вставляю это в IntelliJ IDEA, идея настолько умна, что анализирует код, находит имя интерфейса, создает файл в дереве проекта с правильным типом и именем.

Это просто потрясающе, НО!☝️ Я также разрешаю генерировать код Kotlin, в котором некоторые файлы называются по-разному и могут содержать несколько классов. В этом случае было бы неплохо, если бы мы могли скопировать содержимое и имя файла в буфер обмена. Для этой цели мы можем использовать ClipboardItem.

Чтобы создать ClipboardItem, нам нужно:
- определить MIME-тип (для Blob и File)
- создать Blob из текста и введите
— создайте Fфайл из BLOB-объекта, введите и назовите его
 — создайте ClipboardItem из типа файла и файла
— передать его в функцию navigator.clipboard.write()

Не слишком сложно, верно? НО!☝️ Проблема с Firefox 🚨 Firefox не знает ClipboardItem 🙈 Вот обходной путь, который применяется, когда обнаруживается, что Firefox копирует только обычный текст.

НО!☝️ В IntelliJ IDEA есть классная функция, с помощью которой вы можете копировать/вставлять несколько файлов одновременно! 👀 Представьте, вы создаете 10 файлов на моей платформе и вместо того, чтобы копировать/вставлять каждый из них, вы всего одна кнопка и все в дереве проекта.

Настоящая борьба начинается здесь

Что это?
 – копирование нескольких файлов
 – изменение типа MIME на application/octet-stream

Есть отличный веб-сайт Clipboard Test (madebyevan.com), где вы можете проверить, что находится в вашем буфере обмена. Как видите, я использую тип text/plain, но когда я копирую файлы из IntelliJ IDEA, это Тип файла (это должен быть application/octet-stream, поправьте меня, если я ошибаюсь).

Файлы с типом application/octet-stream не поддерживаются браузерами. В следующей таблице (немного устарелой, но все еще отражающей текущее состояние совместимости) показана поддержка типов браузерами:

Подробнее о совместимости API буфера обмена с браузерами:
- https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API
- https://caniuse.com/ ?поиск=буфер обмена

Почему это работает в IntelliJ IDEA, а не в веб-браузерах? Оба они являются приложениями для ОС и используют API буфера обмена, который предлагает ОС. Ребята из JetBrains решили сделать все правильно, а ребята из Google, Mozilla, Apple… нет. Они сосредоточены на других вещах.

Я бы отказался от типа файла, НО☝️ я вижу большую проблему при попытке скопировать несколько файлов одновременно.

Если вы прокомментируете/удалите новый ClipboardItem({[file2.type]: file2}), тогда это сработает. Разве это не глупо?

Если у вас есть какие-либо идеи по этой теме, дайте мне знать в комментариях.