Release 5.2.0

Commands rework and new hotkeys

New hotkeys functionality has been added to make registering commands and customizing key bindings easier (48023d0).

The defaultCommands() extension has now been deprecated and will be removed in the next major release. It has been replaced by the new editorCommands() extension which allows customizable key bindings and behaves almost identically when given the defaultKeymap. Note that The basicEditor() setup will continue to use defaultCommands() for backwards compatibility until the next major release. The example below shows how to use the new extension:

import { editorCommands, defaultKeymap } from "prism-code-editor/commands"

editor.addExtensions(editorCommands(defaultKeymap))

Most commands part of defaultCommands() have how been extracted from the extension and are exported from prism-code-editor/commands. This makes it easy to make custom keymaps or to create command palettes. The commands include:

• copySelectedLines()
• deleteSelectedLines()
• indentSelectedLines()
• insertLineAndIndent()
• insertTab()
• moveSelectedLines()
• scrollByOneLine()
• toggleComment()

editor.keyCommandMap has also been deprecated and will be removed in the next major release. Read the hotkeys guide to see how addEditorHotkey() can be used instead.

Improvements

• Added extra key bindings to the search widget (1a5ab1a)
• Added scroll up/down 1 line key binding for Mac to defaultKeymap (a54dc41)
• Optimized the setSelection() utility (3f6aafd)

solid-pce@3.2.0

• Fixed Prism grammars being treeshaken away with Vite 8 (#53) (2b5aef0)
• For other changes, see Prism code editor 5.2.0 release

react-pce@3.2.0

• Fixed some of the Prism types being broken in the build (0a2446d)
• Fixed Prism grammars being treeshaken away with Vite 8 (#53) (2b5aef0)
• For other changes, see Prism code editor 5.2.0 release

Release 5.1.0

New features

• Added renderDocs() property to completion items (30fdf11)
• Added renderSnippet() utility (30fdf11)
• Snippets for JavaScript and Svelte can now be displayed inside a tooltip (30fdf11)
• Added more key bindings for triggering autocompletion (d8af156)

Fixes and improvements

• Fixed an edge case when highlighting tags (f5985fa)
• Improved templating performance on large documents (0bbe0eb)
• Fixed cursorPosition() extension in RTL mode (20046f7)
• Custom selection color is now applied to all overlays (72ea825)
• Added aria-posinset and aria-setsize to completion items (a212dc8)
• Fixed moving to another tab stop with arrow keys clearing tab stops (9aaf74c)
• Fixed refocusing the textarea sometimes closing the autocompletion widget (c448930)
• Completion options with the same score are no longer sorted by length (9cff5a3)
• Improved documentation for key bindings (4a92ce1)
• Updated CSS autocompletion data (027acf1)
• Upgraded to Vite 8 (7382ab6)

solid-pce@3.1.0

See 5.1.0 release

react-pce@3.1.0

See 5.1.0 release

Release 5.0.1

• Updated HTML, SVG, and React JSX autocompletion data (2da5b4e) (7220858) (7f2e9b5)
• Made tag matching case insensitive in HTML so <DIV> and </div> can be matched together (0cba41c)
• Fixed aria-activedescendant not always being added to the textarea when opening the autocompletion tooltip (332024c)

solid-pce@3.0.1

• Updated HTML, SVG, and React JSX autocompletion data (2da5b4e) (7220858) (7f2e9b5)
• Made tag matching case insensitive in HTML so <DIV> and </div> can be matched together (0cba41c)
• Fixed aria-activedescendant not always being added to the textarea when opening the autocompletion tooltip (332024c)
• Fixed incorrect color sometimes being applied to closing brackets with rainbow brackets enabled (8141a26)

react-pce@3.0.1

• Updated HTML, SVG, and React JSX autocompletion data (2da5b4e) (7220858) (7f2e9b5)
• Made tag matching case insensitive in HTML so <DIV> and </div> can be matched together (0cba41c)
• Fixed aria-activedescendant not always being added to the textarea when opening the autocompletion tooltip (332024c)

Release 5.0.0

Breaking changes

Many CSS variable names have been changed (5e80b80). To migrate, perform a controlled search and replace on your project. The following table shows which names have been changed:

Old variable name	New variable name
--editor__line-number	--pce-line-number
--editor__bg-highlight	--pce-bg-highlight
--editor__border-highlight	--pce-border-highlight
--editor__bg-selection-match	--pce-selection-match
--editor__bg-scrollbar	--pce-scrollbar
--editor__bg-fold	--pce-bg-fold
--editor__bg	--pce-bg
--bg-guide-indent	--pce-guide-indent
--widget__bg-input	--pce-widget-bg-input
--widget__bg-active	--pce-widget-bg-active
--widget__bg-hover	--pce-widget-bg-hover
--widget__bg-error	--pce-widget-bg-error
--widget__bg	--pce-widget-bg
--widget__border	--pce-widget-border
--widget__color-active	--pce-widget-color-active
--widget__color-options	--pce-widget-color-options
--widget__color	--pce-widget-color
--widget__focus-ring	--pce-widget-focus
--widget__error-ring	--pce-widget-error
--search__bg-find	--pce-search-match

• Line numbers now use CSS counters instead of a data-line attribute (5fabaae)
• Changed to class added to the next/prev match buttons in the search widget from next-match and prev-match to pce-next and pce-prev (e5f109b)
• Removed the alwaysShow parameter of the showInvisibles() extension. Use tokenizeInvisibles() instead to highlight all invisibles (be0510a)
• All tokens with the global regex flag now use greedy matching. This means the greedy flag is no longer needed (b938258)
• The editor is now passed as an additional argument to listener options instead of through this. This does not apply to listeners added by the editor.on() method (0b8243f)

// Instead of this:
const options = {
  onUpdate(value) { console.log(this.container) }
}

// Do this:
const options = {
  onUpdate(value, editor) { console.log(editor.container) }
}

New features

• Added a new customCursor() extension. Check the custom cursor guide to see it in action (95f08c3) (328e6e7)
• Added a getDocumentPosition() utility to calculate the cursor's column, line, and selected character count (459f878)
• Bracket/tag pair pair highlighting can now be added to any container (2477f8f)
• The CSS variable --pce-cursor can now be used to configure the cursor's color. This variable also doesn't affect the cursor of the inputs inside the search widget (5fabaae)

Other changes

• editor.extensions.history.clear() is now called automatically after changing the editor's value (940d1ff)
• Made the focus border around the next/prev match buttons in the search widget red during an error (7f58e2a)
• Fixed interacting with the search widget scrolling the editor in Chrome due to scroll padding issues (34bc36f) (1bb72e9)
• Fixed Cursor.getPosition() returning the old position when called inside a selectionChange handler added before the cursorPosition() extension (4154f0b)
• Many opening punctuation tokens now use greedy matching. This means the two single quotes inside an attribute like value="''foo" won't be highlighted as punctuation (bf972ce)
• Plain-text merging in large JSX documents is now much faster (596f291) (e194d2c)
• CSS variables are now highlighted without css-extras (019d65a)
• Removed color token from stylus grammar (ab750e1)