v0.1.9

Features

SandpackCodeViewer

It replaces the Prism syntax-highlight in favor to use the Codemirror itself in read-only mode, which will ensure that syntax-highlight will always match on both component, SandpackCodeEditor and SandpackCodeViewer.

Decorators

Now the SandpackCodeViewer supports decorations, which is useful to highlight entire lines or just parts of the code. This is an abstraction on top of Codemirror decorations and for while only works on read-only instances of the Codemirror:

API

<SandpackCodeViewer
  showLineNumbers
  decorators={[
    { className: "highlight", line: 1 },
    { className: "highlight", line: 9 },
    {
      className: "widget",
      elementAttributes: { "data-id": "1" },
      line: 12,
      startColumn: 26,
      endColumn: 38,
    },
    {
      className: "widget",
      elementAttributes: { "data-id": "2" },
      line: 13,
      startColumn: 8,
      endColumn: 17,
    },
  ]}
/>

Preview

New methods: reset changes

From now the useSandpack provider more two methods to control the state of the code editor:

• resetAllFiles: reset all files for all paths;
• resetFile: reset the code for a given path;

Example:

const { sandpack } = useSandpack();

const revertCurrentFile = () => {
  sandpack.resetFile(sandpack.activePath) // receives a path as argument
}

const revertAllFiles = () => {
  sandpack.resetAllFiles()
}

Bundler version

codesandbox/codesandbox-client@e37e8f3