https://github.com/NiaMori/slate-debug-visualizer

https://github.com/NiaMori/slate-debug-visualizer

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/NiaMori/slate-debug-visualizer
• Owner: NiaMori
• License: mit
• Created: 2020-10-11T12:54:38.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2020-10-28T04:14:46.000Z (over 3 years ago)
• Last Synced: 2023-12-21T07:37:24.267Z (6 months ago)
• Language: TypeScript
• Size: 906 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• slatejs-awesome - NiaMori/slate-debug-visualizer - <br/> (0 stars / 2020-10-28 / 13 commits ) (Running the update / By Popularity)

README

        
# slate-debug-visualizer

## Overview

`slate-debug-visualizer` is a [slate](https://github.com/ianstormtaylor/slate) integration for [vscode-debug-visualizer](https://marketplace.visualstudio.com/items?itemName=hediet.debug-visualizer). It provides visualization of slate document model, making debugging slate editor easlier.

![Demo](./docs/slate.gif)

## Installation

```bash

# using npm

npm install slate-debug-visualizer --save

# or using yarn

yarn add slate-debug-visualizer

```

## Usage

Just apply the plugin `withVisualization` on your slate editor and the visualization is available in `vscode-debug-visualizer`

```ts

import { withVisualization } from 'slate-debug-visualizer'

const editor = () => withVisualization(createEditor())

```

## Demo

A simple demo is available [here](./examples/slate-debug-visualizer-example)