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>.

[email protected]

See prism code editor 4.2.0 release

[email protected]

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

[email protected]

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)

[email protected]

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)
• Fixed tab-size style being set in pixels in Preact (1bc0e45)

[email protected]

• Omiting the inline option no longer throws an error (30b158c)

Release 4.0.0

Breaking changes

Core API changes

The following breaking changes have been made to the core API, mostly to decrease bundle size of the core.

• editor.setSelection() has been replaced with the setSelection() utility (4a35a8e)
• editor.addListener() has been renamed to editor.on() (46fed2d)
• editor.removeListener() has been removed. Use the function returned from editor.on() to remove the listener instead (46fed2d)
• isMac, isChrome, and isWebkit has been moved to prism-code-editor/utils (7f23f84)
• Renamed editor.scrollContainer to editor.container (c6facc3)
• Removed editor.overlays. Use editor.lines[0] or the addOverlay() utility (c6facc3)
• Removed the editor.removed property
• Renamed editor.activeLineNumber to editor.activeLine (c6facc3)
• editor.activeLine is now the line number instead of the element. Use editor.lines[editor.activeLine] to get the element instead (c6facc3)
• Removed the EventHandler type (c7b9129)
• An error is no longer thrown if the language has no registered Prism grammar. Instead, syntax highlighting is disabled (0e8d2a8)

Setups

• Removed fullSetup(). Use basicSetup() instead (cf20517)
• Added the search widget to basicSetup() (cf20517)
• Added the showInvisibles() extension to basicSetup() (b5934d2)
• Removed updateTheme(). Use editor.setOptions({ theme: newTheme })
  instead (3301f8b)

Extension changes

• Changed the order of elements inside the Bracket tuple (977176e)
• The indentGuides() extension is now just an Extension which means its lines and indentLevels properties have been removed (b71c45c)
• The indentGuides() extension now requires styles from prism-code-editor/guides.css (e9fd198)
• The readOnlyCodeFolding() extension no longer folds brackets and XML elements by default. Instead you can pass it the bracketFolding and tagFolding providers (or your own) when creating the extension (4949443)
• Renamed completeSnippets() to completeFromList() (743c69f)
• Changed findWords() return type from string[] to Set<string> (96c0a93)
• Changed the first parameter to markupCompletion() to support completions from multiple namespaces of tags (27bfb50)
• Merged the last two parameters of matchBrackets(). Instead of
  matchBrackets(true, "([{", ")]}"), do matchBrackets(true, "()[]{}") (12a947a)

Class name changes

• Changed the class added to active indentation guides from active to active-indent to reduce the chances of style collisions (3bcf6a6)
• Changed the class added to active search matches from match to pce-match to reduce the chances of style collisions (f9af5a5)

Prism grammar changes

• Removed the clike dependency from the following languages: apex, birb, cfscript, chaiscript, csharp, d, firestore-security-rules, gradle, reason, solidity, tt2, and v (52c2c12)
• Added support for type parameters to components in tsx e.g. <Component<string>> (12c3813)
• Removed the color token from css-extras (f4de8e1)
• Changed the xeora grammar to support bracket matching (a1fa7cc)
• Merged the script and spread tokens inside JSX tags into a single expression token (b4484a8)
• markdown grammar now supports code snippets wrapped in more than two backticks (2e86529) (be4ff23)
• Added script/style aliases to JS/CSS attributes in markup (1238abf)

Browser support

Changed the build target of the package from ES2020 to ES2021. If you transpile the JS syntax in your own build system, then the browser support remains the same.

New features

Core

• Added the class pce-textarea to the editor's textarea (a1934e3)
• Added a class option to editors. This makes it easier to style individual editors (a2ecea8)
• Added the night-owl-light theme (0047e39)
• Added the addOverlay() utility (c6facc3)

New grammars

• Added Astro grammar (50cfb67)
• Added Svelte grammar (e29d3db)
• Added Vue grammar (78e9219)

Extensions

• Added two new icons for completion options: text and event (49a9b89) (607f4ee)
• Added the jsCompletion() completion source (f61ab1e)
• Added MathML autocompletion data (1cad6ca)
• Added autocompletion to Vue (ac1a3ee)
• Added autocompletion to Svelte (e6d7a76)
• Added getIndentGuides() to calculate indentation guides for a string of code (b71c45c) (e9fd198)

Server side rendering

This release adds the feature to render an editor as an HTML string with renderEditor() and later making it interactive with mountEditorsUnder(). For more information, check the SSR guide (8aa848c)

Static code blocks

This release also adds static code blocks rendered as an HTML string with renderCodeBlock(). For more information, check the code block guide (005a0a4)

Markdown plugins

Added plugins for marked and rehype to highlight fenced code blocks using renderEditor() and renderCodeBlock(). Check the markdown plugin documentation for more info (88add96) (09db1d9)

Documentation website

V4 comes with a new and improved documentation website made with Astro. It has many examples and guides for common use cases and problems.

Other changes

• Slightly changed the appearance of the copy button icon (b699cc2)
• Added aria-hidden="true" to the copy button's SVG (1f71b31)
• Matches that are empty after removing the lookbehind group are no longer skipped (6e8aa90)
• Improved SVG autocompletion data (ab5bf6a)
• Improved CSS autocompletion (fdf5f8f)
• Updated CSS autocompletion data (10cd99e)
• Added ARIA attributes to SVG autocompletion (7edd658)
• findWords() now searches all languages with the same completion definition (bf4380b)
• There's no longer any unprotected usage of browser APIs in module scope. This means that every entry point is safe to import in Node.js (7f23f84)

Bug fixes

• Changing language without changing value with setOptions() no longer moves the cursor to the start of the editor (0e8d2a8)
• Fixed the autocomplete extension absorbing Escape presses when the tooltip is closed (a486a6c)
• Fixed the autocomplete tooltip sometimes opening for a single frame if the beforeinput event was cancelled (a486a6c)
• Fixed broken auto-indenting in markup templating languages (1442d88)

[email protected]

Breaking changes

Core API changes

The following breaking changes have been made to the core API to decrease bundle size of the core

• editor.setSelection() has been replaced with the setSelection() utility (4a35a8e) - isMac, isChrome, and isWebkit has been moved to solid-prism-editor/utils (7f23f84)

Setups

• Added the showInvisibles() extension to basicSetup. This requires styling from solid-prism-editor/invisibles.css (b5934d2)

Extension changes

• Changed the order of elements inside the Bracket tuple (977176e)
• The readOnlyCodeFolding() extension no longer folds brackets and XML elements by default. Instead you can pass it the bracketFolding and tagFolding providers (or your own) when creating the extension (4949443)
• Renamed completeSnippets() to completeFromList() (743c69f)
• Changed findWords() return type from string[] to Set<string> (96c0a93)
• Changed the first parameter to markupCompletion() to support completions from multiple namespaces of tags (27bfb50)
• Merged the last two parameters of matchBrackets(). Instead of matchBrackets(true, "([{", ")]}"), do matchBrackets(true, "()[]{}") (12a947a)

Class name changes

• Changed the class added to active indentation guides from active to active-indent to reduce the chances of style collisions (3bcf6a6)
• Changed the class added to active search matches from match to pce-match to reduce the chances of style collisions (f9af5a5)

Prism grammar changes

• Removed the clike dependency from the following languages: apex, birb, cfscript, chaiscript, csharp, d, firestore-security-rules, gradle, reason, solidity, tt2, and v (52c2c12)
• Added support for type parameters to components in tsx e.g. <Component<string>> (12c3813)
• Removed the color token from css-extras (f4de8e1)
• Changed the xeora grammar to support bracket matching (a1fa7cc)
• Merged the script and spread tokens inside JSX tags into a single expression token (b4484a8)
• markdown grammar now supports code snippets wrapped in more than two backticks (2e86529) (be4ff23)
• Added script/style aliases to JS/CSS attributes in markup (1238abf)

New features

Core

• Added the class pce-textarea to the editor's textarea (a1934e3)
• Added a class prop to the <PrismEditor /> component. This makes it easier to style individual editors (32e5320)
• Added the night-owl-light theme (0047e39)
• Added the addOverlay() utility (c6facc3)

New grammars

• Added Astro grammar (50cfb67)
• Added Svelte grammar (e29d3db)
• Added Vue grammar (78e9219)

Extensions

• Added two new icons for completion options: text and event (49a9b89) (607f4ee)
• Added the jsCompletion() completion source (f61ab1e)
• Added MathML autocompletion data (1cad6ca)
• Added autocompletion to Vue (ac1a3ee)
• Added autocompletion to Svelte (e6d7a76)
• Added getIndentGuides() to calculate indentation guides for a string of code (b71c45c) (e9fd198)

Static code blocks

This release also adds static code blocks with the <CodeBlock /> component (13fd208)

Other changes

• Slightly changed the appearance of the copy button icon (b699cc2)
• Added aria-hidden="true" to the copy button's SVG (1f71b31)
• Matches that are empty after removing the lookbehind group are no longer skipped (6e8aa90)
• Improved SVG autocompletion data (ab5bf6a)
• Improved CSS autocompletion (fdf5f8f)
• Updated CSS autocompletion data (10cd99e)
• Added ARIA attributes to SVG autocompletion (7edd658)
• findWords() now searches all languages with the same completion definition (bf4380b)
• There's no longer any unprotected usage of browser APIs in module scope. This means that every entry point is safe to import in Node.js (7f23f84)

Bug fixes

• Fixed the autocomplete extension absorbing Escape presses when the tooltip is closed (a486a6c)
• Fixed the autocomplete tooltip sometimes opening for a single frame if the beforeinput event was cancelled (a486a6c)
• Fixed broken auto-indenting in markup templating languages (1442d88)

[email protected]

First stable release.