Skip to content

Release 2.0.0

Compare
Choose a tag to compare
@FIameCaster FIameCaster released this 20 Oct 21:35
· 324 commits to main since this release
ceca41e

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.