@predocs/components v0.0.15

@predocs/components

A viewer and editor for predocs components.

Usage

Install the package:

npm install --save @predocs/components

Import the CSS at some top-level component:

import '@predocs/components/global-css';

Then import what you need, e.g.

import editorLibrary from '@predocs/components/editor';
import viewerLibrary from '@predocs/components/viewer';

const ExampleComponent = () => {
  const CodeBlock = viewerLibrary.CodeBlock;

  const state = {
    code: 'console.log("hello world!");',
    language: 'javascript',
    name: 'hello_world.js',
    hideLineNumbers: false,
  };

  return (
    <CodeBlock state={state}  />
  )
}

Some components that are interactive, such as McQuestion, need to be wrapped in its ContextWrapper, exported via @predocs/core:

import { ComponentCoreObjectsByType } from '@predocs/core';

const { ContextWrapper } = ComponentCoreObjectsByType.McQuestion;

export default ({ children }) => (
  <ContextWrapper initialState={...}>
    {children}
  </ContextWrapper>
)

Developing

To run a sample document editor locally, run the dev script:

npm run dev

One day tests will be added.