![](\"https://curvenote.dev/images/icon.png\"){kind=icon}
Curvenote\r\n \r\ncode test!`,\r\n});\r\n```\r\n\r\nThe styles are necessary to show the `.fake-cursor`, they are simple if you want to [override them](./src/codemark.css). It does not provide styles for the `code` specifically. The plugin visually works best if the code mark has a border and a different color than the main text.\r\n\r\n## Why\r\n\r\nOne of the biggest frustrations in using what you see is what you get (WYSIWYG) editors when coming from knowing `Markdown` is how they deal with inline code. In Markdown this is easy, you simply wrap a word in back-ticks (e.g. `` `code` ``). In many ways, the other “marks”, like bold, italic, underline are all easier in applications like Word, Notion, Confluence, etc. because almost everyone knows the shortcut to make something stop being bold/italic/underlined. This is **not the case** for code-marks, which act similarly, however there is no common/shared shortcut to remove a code-mark, and every editor application does something subtly different.\r\n\r\nIf you are using Slack or Notion, try creating a code block and then adding something to the start or end **after** it is created. The behaviour is completely unintuitive, you often have no idea if the next character you type will be inside or outside of the code-mark, and in Notion, for example, this changes based on if you hit backspace!\r\n\r\n\r\n\r\nIn Slack, if you start a message with code, there is literally no way to exit the code at the start without using your mouse, deleting the code-mark completely, or knowing the keyboard shortcut. In Slack, the right arrow key also mysteriously turns into a spacebar at the end of the code-mark or feels like it skips one character ahead.\r\n\r\n\r\n\r\nThe ambiguity of whether the next character you type will be “marked” is something that we tolerate for bold/italics/underline — because we all know the escape hatch and don’t have to leave our keyboards. But if you learn the keyboard shortcut for code in Slack, you might be surprised when you use it in Notion that the developer tools in Chrome pop up. Or say you learn the shortcut in Confluence, and jump over to Slack you will open your Mentions — in Notion, it creates a comment! Notion as far as I can tell, doesn’t even have a shortcut for a code-mark.\r\n\r\nThere are so many other quirks in these applications with regard to how the spacebar, or arrow keys work, how to deal with one-character of code. I have yet to see a WYSIWYG editor actually do it “right”.\r\n\r\nOur goal at [Curvenote](https://curvenote.com) is to make a best-in-class editing experience for technical content, and these are the types of details you either never notice because it just works, or they make people tear their hair out.\r\n\r\n## Why is this hard?\r\n\r\nBrowsers `contenteditable` DOM doesn't distinguish between a cursor positions inside and outside inline tags when it comes to where to insert text. This state is held by the application for what to insert next (in ProseMirror these are `storedMarks`, which can be added or removed). This means that visually distinguishing the first two states in the next figure is not possible.\r\n\r\n\r\n\r\nVarious approaches can be taken, and Chrome seems to default to if you are on the left you are outside the mark, if you are on the right you are inside. This can make the default experience quite confusing. Other browsers deal with this differently again.\r\n\r\n## Our Approach\r\n\r\nWe are using ProseMirror and providing two plugins that handle a specialized `InputRule` (forwards and backwards lookup); and a `Decoration` plugin that displays a cursor in the correct location indicating if your next character you type will be marked or not.\r\n\r\nThis is something that can be done a few ways, we tried a ``, but couldn't get that to be reliable as a decoration and did not want to add to the document state when changing selections. Instead, we added a simple `span.fake-cursor` that blinks, has a border, and no-width. For this to work correctly, the `EditorView` briefly makes the default caret transparent when the fake cursor is visible. This cursor is removed when it is not needed.\r\n\r\nThe plugin also provides specialized handling for navigation events (arrows, backspace, etc.), and we have provided a way to exit the code mark using the arrow keys. This defaults to a mental model of the code-mark is wrapped in backticks when you are navigating. The cursor always moves when you press the arrow key, even though the position in the ProseMirror document does not, instead it toggles on/off a `storedMark`.\r\n\r\nWe have also added handlers for jumping between words, to the start & end of line, as well as between lines. These take you outside of the code mark if appropriate.\r\n\r\n# Handled Actions & Selection Events\r\n\r\n## Code mark creation\r\n\r\n- `` `code| → `code`| `` (create remain outside)\r\n- `` |code` → `|code` `` (create remain inside)\r\n- `` ████ → `code` `` (selected and press `` ` ``)\r\n- Inserting `` ` `` around an existing code marks does nothing\r\n\r\n## Enter and Exit\r\n\r\nHolding down the arrow key or word/line modifiers should continue to work as expected.\r\n\r\n### Right Arrow:\r\n\r\n- `` `code|` → `code`| `` (exit)\r\n- `` |`code` → `|code` `` (enter)\r\n- `` `co██|` → `code|` `` (selected remains inside)\r\n- `` ██|`code` → __|`code` `` (selected remains outside)\r\n- `` `code`|$ → `code`$| `` (exit end of line)\r\n- `` |^`code` → ^|`code` `` --> (enter line, remain outside)\r\n\r\n### Left Arrow:\r\n\r\n- `` `code`| → `code|` `` (enter)\r\n- `` `|code` → |`code` `` (exit)\r\n- `` ^`|code` → ^|`code` `` (exit at top of paragraph)\r\n- `` ^|`code` → |^`code` `` (exit line)\r\n- `` `code`|██ → `code`|__ `` (selected remains outside)\r\n- `` `|██de` → `|code` `` (selected remains inside)\r\n- `` `code`$| → `code`|$ `` (enter line, remain outside)\r\n\r\nNote that for arrow modifiers, there is a bit of extra care that needs to happen for single characters of code.\r\n\r\n### Home & End\r\n\r\n- Commands `ctrl-a`, `cmd-left`, and `Home` should jump to start, without mark\r\n- Commands `ctrl-e`, `cmd-right`, and `End` should jump to end, without mark\r\n\r\n### Up & Down\r\n\r\nWhen navigating between lines, default to outside of the codemark if there is a choice.\r\n\r\n### Backspace & Delete:\r\n\r\n- `` `x|` → | `` (delete text, next insertion normal)\r\n- `` `|████` → | `` (delete full mark, next insertion normal)\r\n- `` `|███`█ → | `` (delete full mark, next insertion normal)\r\n\r\n### Clicking\r\n\r\n- Default to outside of the code mark when clicking to a new location in the editor\r\n\r\n## Browser compatibility\r\n\r\nThe plugin works great for Chrome at the moment and is pretty solid in Firefox, Safari has different display for where it puts the cursors before a span, so that needs some work.\r\n\r\n---\r\n\r\n\r\n Made with love by\r\n \r\n Curvenote\r\n \r\n