prosemirror-dev-tools

<p>
  </a><br /> <a rel="nofollow noopener" target="_blank" href="http://commitizen.github.io/cz-cli/"></p> 
  
  <p>
    </a>
  </p>
  
  <h2 dir="auto">
    <a rel="nofollow noopener" target="_blank" id="user-content-table-of-content" class="anchor" aria-hidden="true" href="#table-of-content"></a>Table of Content
  </h2>
  
  <ul dir="auto">
    <li>
      <a rel="nofollow noopener" target="_blank" href="#table-of-content">Table of Content</a>
    </li>
    <li>
      <a rel="nofollow noopener" target="_blank" href="#quick-start">Quick Start</a></p> <ul dir="auto">
        <li>
          <a rel="nofollow noopener" target="_blank" href="#npm-way">NPM Way</a>
        </li>
      </ul>
    </li>
    
    <li>
      <a rel="nofollow noopener" target="_blank" href="#features">Features</a></p> <ul dir="auto">
        <li>
          <a rel="nofollow noopener" target="_blank" href="#state">State</a>
        </li>
        <li>
          <a rel="nofollow noopener" target="_blank" href="#history">History</a>
        </li>
        <li>
          <a rel="nofollow noopener" target="_blank" href="#plugins">Plugins</a>
        </li>
        <li>
          <a rel="nofollow noopener" target="_blank" href="#schema">Schema</a>
        </li>
        <li>
          <a rel="nofollow noopener" target="_blank" href="#structure">Structure</a>
        </li>
        <li>
          <a rel="nofollow noopener" target="_blank" href="#snapshots">Snapshots</a>
        </li>
      </ul>
    </li>
    
    <li>
      <a rel="nofollow noopener" target="_blank" href="#demo">Demo</a>
    </li>
    <li>
      <a rel="nofollow noopener" target="_blank" href="#contributing">Contributing</a>
    </li>
    <li>
      <a rel="nofollow noopener" target="_blank" href="#license">License</a>
    </li>
  </ul>
  
  <h2 dir="auto">
    <a rel="nofollow noopener" target="_blank" id="user-content-quick-start" class="anchor" aria-hidden="true" href="#quick-start"></a>Quick Start
  </h2>
  
  <h3 dir="auto">
    <a rel="nofollow noopener" target="_blank" id="user-content-npm-way" class="anchor" aria-hidden="true" href="#npm-way"></a>NPM Way
  </h3>
  
  <p>
    Install <code>prosemirror-dev-tools</code> package from npm:
  </p>
  
  <pre>npm install --save-dev prosemirror-dev-tools</pre>
  
  <p>
    Wrap <code>EditorView</code> instance in applyDevTools method:
  </p>
  
  <pre>import applyDevTools from "prosemirror-dev-tools";

const view = new EditorView /…/();

applyDevTools(view);

  <h2 dir="auto">
    <a rel="nofollow noopener" target="_blank" id="user-content-features" class="anchor" aria-hidden="true" href="#features"></a>Features
  </h2>
  
  <h3 dir="auto">
    <a rel="nofollow noopener" target="_blank" id="user-content-state" class="anchor" aria-hidden="true" href="#state"></a>State
  </h3>
  
  <ul dir="auto">
    <li>
      Inspect document – all nodes and marks
    </li>
    <li>
      Inspect selection – position, head, anchor and etc.
    </li>
    <li>
      Inspect active marks
    </li>
    <li>
      See document stats – size, child count
    </li>
  </ul>
  
  <h3 dir="auto">
    <a rel="nofollow noopener" target="_blank" id="user-content-history" class="anchor" aria-hidden="true" href="#history"></a>History
  </h3>
  
  <ul dir="auto">
    <li>
      Inspect document changes over time
    </li>
    <li>
      Time travel between states
    </li>
    <li>
      See selection content for particular state in time
    </li>
    <li>
      See selection diff
    </li>
  </ul>
  
  <h3 dir="auto">
    <a rel="nofollow noopener" target="_blank" id="user-content-plugins" class="anchor" aria-hidden="true" href="#plugins"></a>Plugins
  </h3>
  
  <p>
    Inspect state of each plugin inside prosemirror.
  </p>
  
  <h3 dir="auto">
    <a rel="nofollow noopener" target="_blank" id="user-content-schema" class="anchor" aria-hidden="true" href="#schema"></a>Schema
  </h3>
  
  <p>
    Inspect current document schema with nodes and marks.
  </p>
  
  <h3 dir="auto">
    <a rel="nofollow noopener" target="_blank" id="user-content-structure" class="anchor" aria-hidden="true" href="#structure"></a>Structure
  </h3>
  
  <p>
    Visual representation of current document tree with positions at the beginning<br /> and the end of every node.
  </p>
  
  <h3 dir="auto">
    <a rel="nofollow noopener" target="_blank" id="user-content-snapshots" class="anchor" aria-hidden="true" href="#snapshots"></a>Snapshots
  </h3>
  
  <p>
    Snapshots allow you to save current editor state and restore it later. State is<br /> stored in local storage.
  </p>
  
  <h2 dir="auto">
    <a rel="nofollow noopener" target="_blank" id="user-content-demo" class="anchor" aria-hidden="true" href="#demo"></a>Demo
  </h2>
  
  <ul dir="auto">
    <li>
      <a rel="nofollow noopener" target="_blank" href="https://codesandbox.io/s/l9n6667ooz">Demo & Example Setup</a>
    </li>
  </ul>
  
  <h2 dir="auto">
    <a rel="nofollow noopener" target="_blank" id="user-content-contributing" class="anchor" aria-hidden="true" href="#contributing"></a>Contributing
  </h2>
  
  <p>
    Contributions are highly welcome! This repo is commitizen friendly — please read<br /> about it <a rel="nofollow noopener" target="_blank" href="http://commitizen.github.io/cz-cli/">here</a>.
  </p>
  
  <h2 dir="auto">
    <a rel="nofollow noopener" target="_blank" id="user-content-license" class="anchor" aria-hidden="true" href="#license"></a>License
  </h2>
  
  <ul dir="auto">
    <li>
      <strong>MIT</strong> : <a rel="nofollow noopener" target="_blank" href="http://opensource.org/licenses/MIT">http://opensource.org/licenses/MIT</a>
    </li>
  </ul>