static-cms/src/components/Widgets/MarkdownControlElements/RawEditor/index.js

import React, { PropTypes } from 'react';
import { Editor, Plain, Mark } from 'slate';
import Prism from 'prismjs';
import PluginDropImages from 'slate-drop-or-paste-images';
import MediaProxy from '../../../../valueObjects/MediaProxy';
import marks from './prismMarkdown';
import styles from './index.css';

Prism.languages.markdown = Prism.languages.extend('markup', {});
Prism.languages.insertBefore('markdown', 'prolog', marks);
Prism.languages.markdown['bold'].inside['url'] = Prism.util.clone(Prism.languages.markdown['url']);
Prism.languages.markdown['italic'].inside['url'] = Prism.util.clone(Prism.languages.markdown['url']);
Prism.languages.markdown['bold'].inside['italic'] = Prism.util.clone(Prism.languages.markdown['italic']);
Prism.languages.markdown['italic'].inside['bold'] = Prism.util.clone(Prism.languages.markdown['bold']);

function renderDecorations(text, block) {
  let characters = text.characters.asMutable();
  const string = text.text;
  const grammar = Prism.languages.markdown;
  const tokens = Prism.tokenize(string, grammar);
  let offset = 0;

  for (const token of tokens) {
    if (typeof token == 'string') {
      offset += token.length;
      continue;
    }

    const length = offset + token.matchedStr.length;
    const name = token.alias || token.type;
    const type = `highlight-${name}`;

    for (let i = offset; i < length; i++) {
      let char = characters.get(i);
      let { marks } = char;
      marks = marks.add(Mark.create({ type }));
      char = char.merge({ marks });
      characters = characters.set(i, char);
    }

    offset = length;
  }

  return characters.asImmutable();
}

const SCHEMA = {
  rules: [
    {
      match: (object) => object.kind == 'block',
      decorate: renderDecorations
    }
  ],
  marks: {
    'highlight-comment': {
      opacity: '0.33'
    },
    'highlight-important': {
      fontWeight: 'bold',
      color: '#006',
    },
    'highlight-keyword': {
      fontWeight: 'bold',
      color: '#006',
    },
    'highlight-url': {
      color: '#006',
    },
    'highlight-punctuation': {
      color: '#006',
    }
  }
};

export default class RawEditor extends React.Component {

  static propTypes = {
    onAddMedia: PropTypes.func.isRequired,
    getMedia: PropTypes.func.isRequired,
    onChange: PropTypes.func.isRequired,
    value: PropTypes.string,
  };

  constructor(props) {
    super(props);
    const content = props.value ? Plain.deserialize(props.value) : Plain.deserialize('');

    this.state = {
      state: content
    };

    this.plugins = [
      PluginDropImages({
        applyTransform: (transform, file) => {
          const mediaProxy = new MediaProxy(file.name, file);
          const state = Plain.deserialize(`\n\n![${file.name}](${mediaProxy.public_path})\n\n`);
          props.onAddMedia(mediaProxy);
          return transform
            .insertFragment(state.get('document'));
        }
      })
    ];
  }

  /**
   * Slate keeps track of selections, scroll position etc.
   * So, onChange gets dispatched on every interaction (click, arrows, everything...)
   * It also have an onDocumentChange, that get's dispatched only when the actual
   * content changes
   */
  handleChange = state => {
    this.setState({ state });
  };

  handleDocumentChange = (document, state) => {
    const content = Plain.serialize(state, { terse: true });
    this.props.onChange(content);
  };

  render() {
    return (
      <Editor
        className={styles.root}
        placeholder={'Enter some rich text...'}
        state={this.state.state}
        schema={SCHEMA}
        onChange={this.handleChange}
        onDocumentChange={this.handleDocumentChange}
        plugins={this.plugins}
      />
    );
  }
}