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)

marked-pce@0.2.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 extension is now exported as a default export. Below you can see how to import it (8b8ad71)

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

Other changes

prism-code-editor 5.0.0 and marked 17.0.0 are now explicitly supported

markdown-it-pce@0.1.0

First stable release.

Release 4.2.0

Changes

• Increased width of search widget in narrow editors (9e14dbb)
• Updated HTML and CSS autocompletion data (da9bb8e)
• Improved URL and markdown highlighting for some themes (1227a17)

New features

• Added startQuery() and insertCompletion() methods to the AutoComplete extension (#49) (db22e78)
• Added 3 new utilities to prism-code-editor/prism/utils to modify tokens (1a91d26):
  • tokenizeString(): applies a tokenization function to all strings
  • tokenizeInvisibles(): uses tokenizeString() to highlight all spaces and tabs as tokens.
  • tokenizeDataUris(): uses tokenizeString() to highlight the body of data-uris like data:image/svg+xml,<svg></svg>.

solid-pce@2.2.0

See prism code editor 4.2.0 release

react-pce@2.2.0

• Changing the z-index and class name of search containers is now supported (a7ab47b)
• For other changes, see prism code editor 4.2.0 release

Release 4.1.0

New features

Added customizable scroll padding through the --pce-scroll-padding CSS variable (fbca174)

Fixes and improvements

• Fixed tab stops from autocompletion snippets not being properly scrolled into view when selected (5600a73)
• Improved CSS variable autocompletion (27e752c):
  • Variables are no longer wrapped by var() when completed if the cursor is already inside var()
  • When inside var(), only CSS variables are returned as completions
• Fixed incorrect color of class-name tokens inside HTML/JSX tags in the Night Owl themes (5e83ab6)
• Fixed words inside JSX tags not being returned as completions by jsCompletion() or completeIdentifiers() (addf57d)