Custom JS keyboard

[loc-trinh]

For coding on mobile app, I would like to use a custom keyboard instead of default iOS keyboard which is not good for coding.

For a textarea component, you can set inputType='none' to disable iOS keyboard from popping up. and with onHover or something I figure you probably can pull up a custom coding keyboard.

I was wondering if it's possible to do inputType='none' for a CodeMirror instance somehow?

[jaywcjlove]

@loc-trinh If you want to prevent the default keyboard from appearing on mobile devices for a contenteditable div, you can use a combination of CSS and JavaScript. For example:

<div id="myEditableDiv" contenteditable="true" style="touch-action: none;"></div>

In this example, the touch-action: none; CSS property is used to disable touch interactions, which can prevent the default keyboard from appearing on touch devices. However, keep in mind that this approach may have other implications for touch interactions, so you should thoroughly test it based on your specific use case.

You can try the method mentioned above by encapsulating an extension to add the touch-action: none; style to the div.cm-content.

Here's a simple extension example below, you can refer to and try it out.

react-codemirror/extensions/events/src/index.ts

Lines 18 to 48 in 923c164

	function events<T extends keyof HTMLElementEventMap>(opts: Options<T>) {
	const { type = 'scroll', events } = opts;
	return ViewPlugin.fromClass(
	class {
	dom?: HTMLElement;
	view: EditorView;
	constructor(view: EditorView) {
	this.view = view;
	if (type === 'dom') {
	this.dom = view.dom;
	} else if (type === 'content') {
	this.dom = view.contentDOM;
	} else {
	this.dom = view.scrollDOM;
	}
	(Object.keys(events || {}) as Array<keyof typeof events>).forEach((keyname) => {
	if (events && events[keyname] && this.dom) {
	this.dom.addEventListener(keyname, events[keyname]);
	}
	});
	}
	destroy() {
	(Object.keys(events || {}) as Array<keyof typeof events>).forEach((keyname) => {
	if (events && events[keyname] && this.dom) {
	this.dom.removeEventListener(keyname, events[keyname]);
	}
	});
	}
	},
	);
	}

[loc-trinh]

Thank you so much for the quick reply, I will give this a try.

Update:
this doesn't work
<div id="myEditableDiv" contenteditable="true" style="touch-action: none;"></div>

this works!

<div
    id='myEditableDiv'
    className='h-full w-full'
    contentEditable='true'
    inputmode='none'
>
</div>

Can you elaborate more on how to 'encapsulating an extension to add the touch-action: none; style to the div.cm-content'? I think I want to modify div.cm-content to add another attribute @jaywcjlove thanks

[jaywcjlove]

@loc-trinh, this is the most basic example extensions/events. This extension adds events to the div DOM node, allowing you to add properties to it.

[jaywcjlove]

@loc-trinh I extended the extensions-events plugin.

import { element } from '@uiw/codemirror-extensions-events';

const extension3 = element({
  type: 'content',
  props: {
    inputMode: 'none',
  },
});

[loc-trinh]

Wow you are fast, thank you!