Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[BAD ISSUE] Autocapitalization, autopunctuation, and autocorrect not supported on iOS #1020

Closed
josephdpurcell opened this issue Dec 1, 2022 · 6 comments
Closed

[BAD ISSUE] Autocapitalization, autopunctuation, and autocorrect not supported on iOS #1020

josephdpurcell opened this issue Dec 1, 2022 · 6 comments

Comments

@josephdpurcell
Copy link

josephdpurcell commented Dec 1, 2022 •
edited

BAD ISSUE: I created this issue without fully understanding that CodeMirror5 is a separate repository. See codemirror/codemirror5#7009 for the correct issue.

Describe the issue

Using Codemirror when writing markdown (eg https://codemirror.net/try/?example=Markdown%20code%20block%20highlighting) does not support autocapitalization, autopunctuation, nor autocorrect on iOS.

To reproduce the issue, go to https://codemirror.net/try/?example=Markdown%20code%20block%20highlighting on an iOS device and notice words are not autocapitalized, two spaces does not result in an automatic period, and words like "cant" are not autocorrected to "can't".

An example use case for this is Directus, which supports authoring content in Markdown format. In that scenario, a user writing non-code / long form content would benefit from autocapitalization, autopunctuation, and autocorrect.

Browser and platform

iOS

Reproduction link

No response
@josephdpurcell josephdpurcell changed the title Autocapitalization and autopunctuation not supported on iOS Autocapitalization, autopunctuation, and autocorrect not supported on iOS Dec 1, 2022
@josephdpurcell
Copy link
Author

Sorry, I should have dug further before opening a ticket.

I see #63 (comment) and directus/directus#14409.

I'll close this ticket.

@josephdpurcell
Copy link
Author

Ok, after reading through those tickets I now see that other discussions (only #63 I think?) are in reference to the browser's spell checker, which is different functionality than I am reporting here, and I don't see discussions on this functionality.

Specifically, this ticket is for the iOS features of autocapitalization, autopunctuation, and autocorrect which benefit users writing long form (non-code) content.

@josephdpurcell josephdpurcell reopened this Dec 1, 2022
@josephdpurcell josephdpurcell mentioned this issue Dec 1, 2022
Open
@marijnh
Copy link
Member

marijnh commented Dec 1, 2022

These are intentionally turned off, because they are usually inappropriate for a code editor, but you can use EditorView.contentAttributes.of({autocorrect: "on", autocapitalize: "on"}) to override attributes if you need to.

@marijnh marijnh closed this as completed Dec 1, 2022
@josephdpurcell
Copy link
Author

Thank you! I see now that I should have discovered that answer on my own, I searched only on this issue queue as opposed to broader Internet.

Digging further I see the v5 manual references autocorrect and autocapitalize: https://codemirror.net/5/doc/manual.html. I don't see this referenced in v6.

I see there are lots of discussions on discuss.codemirror.net related, such as https://discuss.codemirror.net/t/ios-turn-off-autocorrect/2912/6.

@josephdpurcell josephdpurcell changed the title Autocapitalization, autopunctuation, and autocorrect not supported on iOS [BAD ISSUE] Autocapitalization, autopunctuation, and autocorrect not supported on iOS Dec 8, 2022
@josephdpurcell
Copy link
Author

CodeMirror6 does support autocapitalization, autopunctuation, and autocomplete on iOS. Here is how I proved this, in detail using https://codemirror.net/examples/bundle/ as a guide.

Create a random directory we'll do our testing inside of:

mkdir tmp
cd tmp

Setup npm:

npm init -y
npm i codemirror @codemirror/lang-javascript
npm i rollup @rollup/plugin-node-resolve

Create an editor:

editor.js

import {EditorView, basicSetup} from "codemirror"
import {javascript} from "@codemirror/lang-javascript"

let editor = new EditorView({
  extensions: [
    basicSetup,
    javascript(),
    EditorView.contentAttributes.of({autocorrect: "on", autocapitalize: "on"}),
  ],
  parent: document.body
})

Bundle the editor:

node_modules/.bin/rollup editor.js -f iife -o editor.bundle.js   -p @rollup/plugin-node-resolve

Create an HTML page to load it:

index.html

<!doctype html>
<meta charset=utf8>
<h1>CodeMirror!</h1>
<script src="editor.bundle.js"></script>

Serve it using whatever:

browser-sync start --server --no-open --files "*.js"  "*.css" "*.html" --serveStatic "./*" --port 8080 --host 0.0.0.0 --listen 0.0.0.0

@josephdpurcell
Copy link
Author

I bundled that up and put it in a code pen https://codepen.io/josephdpurcell/pen/RwJdVMQ. (I couldn't figure out how to get codepen to bundle it for me.)

Here is a recording of how it works on iOS:

IMG_8970.MOV

This was referenced Dec 8, 2022
Open
Open
This was referenced Dec 27, 2022
Closed
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@marijnh @josephdpurcell