Skip to main content

GapCursorExtension

Summary​

This will capture clicks near and arrow-key-motion past places that don't have a normally selectable position nearby, and create a gap cursor selection for them.

For example, the user normally couldn't move the cursor after a horizontal line, if this is the last node in the document. The gap cursor gives the user the impression that the cursor could be behind the horizontal line, and lets the user type further.

Styling​

The cursor is drawn as an element with class ProseMirror-gapcursor. The color (and other attributes) can be styled with CSS:

.remirror-editor.ProseMirror .ProseMirror-gapcursor:after {
  border-top-color: red;
}

Usage​

Installation​

It is not necessary to install the GapCursorExtension explicitely because it comes as part of the CorePreset, i.e. every editor has automatically this extension.

Make sure to import the styles, which make the gap cursor visible:

import '@remirror/styles/extension-gap-cursor.css';

Examples​

Source code
import 'remirror/styles/all.css';
import './styles.css';

import React from 'react';
import { htmlToProsemirrorNode } from 'remirror';
import { HorizontalRuleExtension } from 'remirror/extensions';
import { Remirror, ThemeProvider, useRemirror } from '@remirror/react';

// Note: It's not required to add the GapCursorExtension explicitly because it's
// part of the CorePreset, i.e. every editor has it.
const extensions = () => [new HorizontalRuleExtension()];

const Basic = (): JSX.Element => {
  const { manager, state, onChange } = useRemirror({
    extensions,
    content: 'Move with mouse/keyboard below the horizontal rule to see the gap cursor<hr />',
    stringHandler: htmlToProsemirrorNode,
  });

  return (
    <ThemeProvider>
      <Remirror
        manager={manager}
        autoFocus
        onChange={onChange}
        initialContent={state}
        autoRender='end'
      />
    </ThemeProvider>
  );
};

export default Basic;

API​