BlockNote Custom Block Playground

Explore custom blocks for documenting test cases and actionable steps, then convert the document to Markdown using a bespoke serializer.

Markdown Input

setMarkdownInput(event.target.value)}
              onKeyDown={(event) => {
                if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
                  event.preventDefault();
                  if (markdownInput.trim().length > 0) {
                    handleApplyMarkdown();
                  }
                }
              }}
              placeholder="Paste Markdown here, then Apply (Ctrl/Cmd+Enter) to load it into the editor"
              spellCheck={false}
            />
            {inputError && <p className="app__error">{inputError}</p>}
          </div>
          <div className="app__panel">
            <div className="app__panel-header">
              <h2>Markdown Preview</h2>
              <div className="app__copy">
                <button
                  type="button"
                  className="app__action app__action--ghost"
                  onClick={handleCopyMarkdown}
                  disabled={!!conversionError || markdown.length === 0}
                  title="Copy Markdown"
                >
                  <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
                </button>
                {copyStatus === "copied" && (
                  <span className="app__copy-status">Copied!</span>
                )}
                {copyStatus === "failed" && (
                  <span className="app__copy-status app__copy-status--error">
                    Copy failed
                  </span>
                )}
              </div>
            </div>
            {conversionError ? (
              <p className="app__error">{conversionError}</p>
            ) : (
              <pre>{markdown}</pre>
            )}
          </div>
          <div className="app__panel app__panel--light">
            <div className="app__panel-header">
              <h2>Autocomplete Steps</h2>
            </div>
            <p className="app__panel-text">
              Markdown format supported
            </p>
            <ol className="app__step-list">
              {(DEMO_STEP_FIXTURES.data ?? []).map((step) => (
                <li key={step.id ?? step.attributes?.title}>
                  <span className="app__step-title">{step.attributes?.title}</span>
                  {typeof step.attributes?.["usage-count"] === "number" && (
                    <span className="app__step-meta">{step.attributes?.["usage-count"]} uses</span>
                  )}
                </li>
              ))}
            </ol>
          </div>
          <div className="app__panel">
            <div className="app__panel-header">
              <h2>Blocks JSON</h2>
              <div className="app__copy">
                <button
                  type="button"
                  className="app__action app__action--ghost"
                  onClick={handleCopyBlocks}
                  disabled={!!conversionError || blocksJson.length === 0}
                  title="Copy Blocks"
                >
                  <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
                </button>
                {copyBlocksStatus === "copied" && (
                  <span className="app__copy-status">Copied!</span>
                )}
                {copyBlocksStatus === "failed" && (
                  <span className="app__copy-status app__copy-status--error">
                    Copy failed
                  </span>
                )}
              </div>
            </div>
            <pre>{blocksJson}</pre>
          </div>
        </aside>
      </section>
    </div>
  );
}

export default App;