Release 2.0.0

New features

Re-exporting Prism's grammars

Prism's grammars are now re-exported. These grammars automatically import required dependencies. Optional dependencies are handled at runtime, so import order usually won't matter.

import "prism-code-editor/grammars/markup"
import "prism-code-editor/grammars/css-extras"
import "prism-code-editor/grammars/js-extras"

This means prismjs is now longer a necessary dependency in your projects.

Bracket matching in markup

Bracket matching has been added to markup languages like HTML by modifying their grammars. All themes style these brackets with color: inherit to disable rainbow brackets. If you want to style them, use the CSS selector .token.markup-bracket.punctuation.

Extra folding features

You can now import a provider that allows folding of titles and code blocks in markdown. Folding of block comments is now optional. To enable them, pass them to the readOnlyCodeFolding extension when creating it.

import {
  markdownFolding, blockCommentFolding, readOnlyCodeFolding
} from "prism-code-editor/code-folding"
import "prism-code-editor/languages/html"

const editor = createEditor(
  "#editor",
  { language: "markdown" },
  readOnlyCodeFolding(markdownFolding, blockCommentFolding)
)

New tag highlighting feature

Added an extension that highlights < and > punctuation in XML tags.

import { highlightTagPunctuation } from "prism-code-editor/match-tags"

Breaking changes

• It's no longer possible to use your own Prism instance.
• You can now longer import languages from prismjs without defining window.Prism. Import languages from prism-code-editor/grammars/* instead.
• prism-code-editor/prism-core has been removed. If you want access to the Prism instance, import it from prism-code-editor instead.
• prism-code-editor/prism-markdown has been removed too. Import prism-code-editor/grammars/markdown instead.
• The Prism parameter has been removed from all functions in the library which simplifies many APIs.
• The languages import from the core has now been renamed to languageMap.
• The utilities regexEscape, getLineBefore, getLines, getClosestToken, getLanguage, insertText and getModifierCode are now exported from prism-code-editor/utils instead of the core.

Changed class names

Most class names have been prefixed to make style conflicts much less likely. If you've overridden some of the styles, chances are you'll need to change some selectors. Here's a list of all classes that have been changed:

• prism-editor to prism-code-editor
• prism-editor-wrapper to pce-wrapper
• editor-overlays to pce-overlays
• code-line to pce-line
• word-wrap to pce-wrap
• no-word-wrap to pce-nowrap
• readonly to pce-readonly
• no-selection to pce-no-selection
• rtl-editor to pce-rtl
• search-input to pce-input
• use-regexp to pce-regex
• whole-word to pce-whole
• find-in-selection to pce-in-selection
• match-count to pce-match-count
• search-options to pce-options
• find to pce-find
• replace to pce-replace
• has-error to pce-error
• search-matches to pce-matches
• editor-copy to pce-copy
• fold-placeholder to pce-unfold
• fold-line-btn to pce-fold

Improvements/fixes

• The matchTags extensions would add a new selection change handler every time editor.setOptions was called. This has been fixed.
• The multiline flag is now enabled when doing RegExp search in the search widget. This means that ^ and $ now match the beginning/end on lines instead of the whole code.
• The $ character is now escaped when executing replace all in the search widget since it has special functionality.
• Tag matching now works with all languages instead of just a handful.
• Changed the default margin on .pce-wrapper from 0.75em 0 to 0.5em 0.
• Fixed a Safari bug where the search highlight wouldn't be removed when switching focus back to the editor.
• Small improvements to most of the themes.

Release 1.2.2

Fixes

• Fixed a bug in Prism.languages.insertBefore in the patched Prism core. This didn't cause issues with many languages which is why it wasn't spotted before.
• Fixed a typo in the patched markdown language which gave code blocks the wrong class name.

Improvements

• Small improvements to the prism, prism-okaidia, night-owl, vs-code-light, vs-code-dark and github-light themes.
• Big improvements to the atom-one-dark theme.
• Refactored some extensions for a smaller bundle size.

Release 1.2.1

No changes to functionality, just improvements to the documentation.

Release 1.2.0

New features

• Added RTL directionality support thtough an optional extra stylesheet. Currently experimental due to multiple browser bugs.

import "prism-code-editor/rtl-layout.css"

• Added a wrapper around createEditor that replaces the element with the editor instead of appending the editor to it.

import { editorFromPlaceholder } from "prism-code-editor"

const editor = editorFromPlaceholder(Prism, "#editor", { language: "javascript" })

Fixes

• aria-readonly="true" is now added to the textarea when in read-only mode.
• An error is no longer thrown when an editor is created with exactly two lines of code.

Release 1.1.0

New features

• Added a utility for adding tooltips to an editor.

import { addTooltip } from "prism-code-editor/tooltips"

const [show, hide] = addTooltip(editor, element)

• Added a utility that adds overscrolling to an editor, allowing users to scroll until the last line is at the top.

import { addOverscroll, removeOverscroll } from "prism-code-editor/tooltips"

addOverscroll(editor)

• Height property has been added when getting the cursor position.

Minor changes

• Read-only mode no longer uses the readonly attribute, instead cancelling beforeinput events. This will make read-only editors more interactive.
• Automatically inserted closing tags are inserted immediately instead of after a 100ms delay.
• Improved titles when hovering over the fold buttons.

Fixes

• Small issues with z-index have been fixed.
• Read-only editors no longer handle the Tab Key with the default commands added.

1.0.4

Fixed issue where the unfold button had position: static resulting in its z-index having no effect.

Improved scroll behavior in certain scenarios when hiding replace functionality in the search widget.

Release 1.0.2

Version 1.0.1 gave the search widget and copy button the same z-index. This change has been reversed so the search widget is always on top.

Release 1.0.1

• The background image on the unfold button no longer repeats vertically in Safari.
• A read-only editor's textarea no longer has user-select: none in Safari.
• Slightly improved styling for the search widget.

Release 1.0.0

New fatures

Added a code folding extension supporting read-only editors. You can see it in action in the last example on the demo page.

import "prism-code-editor/code-folding.css"
import { readOnlyCodeFolding } from "prism-code-editor/code-folding"

Added a read-only property extensions to the PrismEditor interface. This property can be used to access many of the extensions added to the editor.

Ctrl+] / [ can now also be used to indent/outdent lines (Cmd+] / [ on Mac).

Added tag matching, selection match highlighting and read-only code folding to the read-only setup.

Breaking changes

The numLines signature has been changed from: numLines: (str: string, position?: number) => number to numLines: (str: string, start?: number, end?: number) => number. This means that you'll need to change all calls to numLines with 2 arguments.

The defaultCommands extension's first argument has been removed since it's no longer necessary to pass the cursor extension to it.

The deprecated matchBrackets extension has been removed and replaced by the new bracket matcher. If you're already using the new bracket matcher, you'll need to rename it from bracketMatcher to matchBrackets. If you're using the old one, you might need to change the arguments and add the highlightBracketPairs extension.

--widget__bg-find custom property used to color search matches has been renamed to --search__bg-find.

Bug fixes

• prism-code-editor/prism-markdown and prism-code-editor/prism-core are now properly marked as having side-effects in package.json.
• Cursor position extension could incorrectly position the cursor with word wrap enabled.
• Empty search matches could be incorrectly positioned with word wrap enabled.
• editor.value could be stale when accessed in an extension update callback. This wasn't causing issues, but had the potensial to.
• Extensions no longer update if setOptions throws an error due to passing an invalid language

Release 0.3.0

New bracket matcher:

The old bracket matcher has been replaced with a faster and smaller one. Rainbow brackets are now optional and highlighting the closest bracket pair is handled by a separate extension.

import { bracketMatcher } from "prism-code-editor/match-brackets"
import { highlightBracketPairs } from "prism-code-editor/highlight-brackets"

I would've preferred to have highlightBracketPairs in the same package, but tree-shaking didn't work as expected when I did.

The old bracket matcher is kept for backwards compatibility, but is marked as deprecated and will be removed in the future.