Overview

Recipes for best ways to use the API methods exposed by a doc instance.

`doc.compile()`

Use this method if you want to compile and render the document as in this example of compiling to react:

Live Code Editor

// import { createElement } from 'react';
// import rehype2react from 'rehype-react';
// import Doc from 'unified-doc';

function() {
  const doc = Doc({
    compiler: [[rehype2react, { createElement }]],
    content: '> **some** markdown content',
    filename: 'doc.md',
  });
  return (
    <div>
      <div>Render the doc anywhere in the React tree</div>
      <div>{doc.compile().result}</div>
    </div>
  );
}

// import { createElement } from 'react';
// import rehype2react from 'rehype-react';
// import Doc from 'unified-doc';
function() {
  const doc = Doc({
    compiler: [[rehype2react, { createElement }]],
    content: '> **some** markdown content',
    filename: 'doc.md',
  });
  return (
    <div>
      <div>Render the doc anywhere in the React tree</div>
      <div>{doc.compile().result}</div>
    </div>
  );
}

Preview

Render the doc anywhere in the React tree

some markdown content

`doc.file()`

Use this method if you want to create or work with the corresponding JS File, filename, extensions, and mime type. This method is also useful for exporting to other supported formats.

Live Code Editor

// import Doc from 'unified-doc';

function() {
  const doc = Doc({
    content: '> **some** markdown content',
    filename: 'doc.md',
  });

  const fileData = doc.file('.html');
  const { content, name, type } = fileData;
  let file = {};
  if (typeof File !== 'undefined') {
    file = new File([content], name, { type });
  }
  console.log('------------------------------');
  console.log('[Recipes] doc.file()')
  console.log('------------------------------');
  console.log('filename: ', fileData.name);
  console.log('extension: ', fileData.extension);
  console.log('stem: ', fileData.stem);
  console.log('mimeType: ', fileData.type);
  console.log('file: ', file);

  return <div>Check console for logged file</div>;
}

// import Doc from 'unified-doc';
function() {
  const doc = Doc({
    content: '> **some** markdown content',
    filename: 'doc.md',
  });
  const fileData = doc.file('.html');
  const { content, name, type } = fileData;
  let file = {};
  if (typeof File !== 'undefined') {
    file = new File([content], name, { type });
  }
  console.log('------------------------------');
  console.log('[Recipes] doc.file()')
  console.log('------------------------------');
  console.log('filename: ', fileData.name);
  console.log('extension: ', fileData.extension);
  console.log('stem: ', fileData.stem);
  console.log('mimeType: ', fileData.type);
  console.log('file: ', file);
  return <div>Check console for logged file</div>;
}

Preview

Check console for logged file

`doc.parse()`

Use this method if you want to obtain the hast representation of the content, which is useful if you want to work with the syntax tree directly (e.g. with hast utils).

Live Code Editor

// import Doc from 'unified-doc';
// import visit from 'unist-util-visit';

function() {
  const doc = Doc({
    content: '> **some** markdown content',
    filename: 'doc.md',
  });

  const hast = doc.parse();

  function visitor(hast) {
    console.log('visiting the text nodes of a hast tree...')
    visit(hast, 'text', node => {
      console.log('text node value: ', node.value);
    });
  }

  console.log('------------------------------');
  console.log('[Recipes] doc.parse()');
  console.log('------------------------------');
  console.log('hast: ', hast);
  visitor(hast);

  return <div>Check console for logged content</div>;
}

// import Doc from 'unified-doc';
// import visit from 'unist-util-visit';
function() {
  const doc = Doc({
    content: '> **some** markdown content',
    filename: 'doc.md',
  });
  const hast = doc.parse();
  function visitor(hast) {
    console.log('visiting the text nodes of a hast tree...')
    visit(hast, 'text', node => {
      console.log('text node value: ', node.value);
    });
  }
  console.log('------------------------------');
  console.log('[Recipes] doc.parse()');
  console.log('------------------------------');
  console.log('hast: ', hast);
  visitor(hast);
  return <div>Check console for logged content</div>;
}

Preview

Check console for logged content

`doc.search()`

Use this method if you want to search for matches for in the document for a given query and attached search algorithm. Search results are simple and conveniently return start/end offset and snippet information that is useful to display context around the matched search value.

This method is useful when returning interface-compatible data for marks to highlight matches in a document. It is also useful in general for computing offsets and derived data in other NLP pipelines and processes.

Live Code Editor

// import { createElement } from 'react';
// import rehype2react from 'rehype-react';
// import Doc from 'unified-doc';

function() {
  const term = 'content';
  const content = '> **some** markdown content, content, content';
  const filename = 'doc.md';

  const results = Doc({ content, filename }).search(term);
  const marks = results.map((result, i) => ({
    id: i.toString(),
    ...result,
  }));

  const doc = Doc({
    compiler: [[rehype2react, { createElement }]],
    content,
    filename,
    marks,
  });

  return (
    <div>
      <div>
        <h4>Compiled</h4>
        <div>{doc.compile().result}</div>
        <h4>Results</h4>
        {results.map((result, i) => {
          const { start, end, snippet } = result;
          const [left, matched, right] = snippet;
          return (
            <div key={i}>
              {left}<strong>{matched}</strong>{right}{' '}
              (start: {start}, end: {end})
            </div>
          );
        })}
      </div>
    </div>
  );
}

// import { createElement } from 'react';
// import rehype2react from 'rehype-react';
// import Doc from 'unified-doc';
function() {
  const term = 'content';
  const content = '> **some** markdown content, content, content';
  const filename = 'doc.md';
  const results = Doc({ content, filename }).search(term);
  const marks = results.map((result, i) => ({
    id: i.toString(),
    ...result,
  }));
  const doc = Doc({
    compiler: [[rehype2react, { createElement }]],
    content,
    filename,
    marks,
  });
  return (
    <div>
      <div>
        <h4>Compiled</h4>
        <div>{doc.compile().result}</div>
        <h4>Results</h4>
        {results.map((result, i) => {
          const { start, end, snippet } = result;
          const [left, matched, right] = snippet;
          return (
            <div key={i}>
              {left}<strong>{matched}</strong>{right}{' '}
              (start: {start}, end: {end})
            </div>
          );
        })}
      </div>
    </div>
  );
}

Preview

Compiled

some markdown content, content, content

Results

some markdown content, content, content (start: 15, end: 22)

some markdown content, content, content (start: 24, end: 31)

some markdown content, content, content (start: 33, end: 40)

`doc.textContent()`

Use this method if you want to obtain the textContent representation of the document, useful for computing offsets and derived data in other NLP pipelines and processes.

Live Code Editor

// import Doc from 'unified-doc';

function() {
  const term = 'content';
  const content = '> **some** markdown content, content, content';
  const filename = 'doc.md';
  const doc = Doc({ content, filename });
  const textContent = doc.textContent();

  function countPipeline(text, term) {
    return (text.match(new RegExp(`${term}`, 'gi')) || []).length;
  }

  return (
    <div>
      <div>
        <strong>Text content:</strong>{' '}
        <code>{textContent}</code>
      </div>
      <div>
        <strong>Term:</strong>{' '}
        <code>{term}</code>
      </div>
      <div>
        <strong>Count:</strong>{' '}
        <code>{countPipeline(textContent, term)}</code>
      </div>
    </div>
  );
}

// import Doc from 'unified-doc';
function() {
  const term = 'content';
  const content = '> **some** markdown content, content, content';
  const filename = 'doc.md';
  const doc = Doc({ content, filename });
  const textContent = doc.textContent();
  function countPipeline(text, term) {
    return (text.match(new RegExp(`${term}`, 'gi')) || []).length;
  }
  return (
    <div>
      <div>
        <strong>Text content:</strong>{' '}
        <code>{textContent}</code>
      </div>
      <div>
        <strong>Term:</strong>{' '}
        <code>{term}</code>
      </div>
      <div>
        <strong>Count:</strong>{' '}
        <code>{countPipeline(textContent, term)}</code>
      </div>
    </div>
  );
}

Preview

Text content:


some markdown content, content, content

Term: content

Count: 3