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)

solid-pce@3.0.0

Breaking changes

• Many CSS variable names have been changed. See 5.0.0 relase for a table of changed names (5e80b80).
• 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() exported from solid-prism-editor/prism/utils 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)

New features

• Added a new customCursor() extension. Check the custom cursor guide to see it in action (95f08c3) (328e6e7)
• Added a getDocumentPosition() utility exported from solid-prism-editor/utils to calculate the cursor's column, line, and selected character count (459f878)
• 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)

Fixes and improvements

• 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)
• 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)

rehype-pce@0.3.0

Breaking changes

• Reworked how line highlighting works. Now, the prop name becomes the class added. To migrate, either rename the props from ins to inserted, del to deleted, and highlight to highlighted or change your CSS selectors (f7f4cc9)
• The plugin is now exported as a default export. Below you can see how to import it (8b8ad71)

import prismCodeEditor from "rehype-prism-code-editor"

New features

Added a new option trimEndingNewline that allows disabling trimming the last linefeed by passing false (7e18178)

Other changes

prism-code-editor 5.0.0 is now explicitly supported

react-pce@3.0.0

Breaking changes

• Many CSS variable names have been changed. See 5.0.0 relase for a table of changed names (5e80b80).
• 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 useshowInvisibles() extension. Use tokenizeInvisibles() exported from prism-react-editor/prism/utils 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)

Editors and code blocks don't need to be passed to extensions anymore (771e567)

// Instead of this:
<Editor language="jsx" value="foo">
  {editor => <BasicSetup editor={editor} />}
</Editor>
<CodeBlock language="jsx" value="foo">
  {(codeBlock, props) => <CopyButton codeBlock={codeBlock} props={props} />}
</CodeBlock>

// Do this:
<Editor language="jsx" value="foo">
  <BasicSetup />
</Editor>
<CodeBlock language="jsx" value="foo">
  <CopyButton />
</CodeBlock>

To access the editor or codeBlock inside an extension, use the usePrismEditor() or usePrismCodeBlock() hooks:

import { usePrismEditor } from "prism-react-editor/extensions"
import { usePrismCodeBlock } from "prism-react-editor/code-blocks"

function MyExtension() {
  const [editor, props] = usePrismEditor()
  // ...
}

function MyCodeBlockExtension() {
  const [codeBlock, props] = usePrismCodeBlock()
  // ...
}

New features

• Added a new useCustomCursor() extension. Check the custom cursor guide to see it in action (95f08c3) (328e6e7)
• Added a getDocumentPosition() utility exported from prism-react-editor/utils to calculate the cursor's column, line, and selected character count (459f878)
• 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)
• Added new hooks useEditorValue() and useEditorSelection() exported from prism-react-editor/extensions to access and editor's value or selection in an extension and rerender when it changes (771e567)

Other changes

• 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 editor.extensions.cursor.getPosition() returning the old position when called inside a selectionChange handler added before the useCursorPosition() 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)