70 lines
2.2 KiB
JavaScript
70 lines
2.2 KiB
JavaScript
|
import React from 'react';
|
||
|
|
import { List } from 'immutable';
|
||
|
|
import MarkupIt from 'markup-it';
|
||
|
|
import markdownSyntax from 'markup-it/syntaxes/markdown';
|
||
|
|
import htmlSyntax from 'markup-it/syntaxes/html';
|
||
|
|
import { Icon } from '../UI';
|
||
|
|
|
||
|
|
/*
|
||
|
|
* All Rich text widgets (Markdown, for example) should use Slate for text editing and
|
||
|
|
* MarkupIt to convert between structured formats (Slate JSON, Markdown, HTML, etc.).
|
||
|
|
* This module Processes and provides Slate nodes and MarkupIt syntaxes augmented with plugins
|
||
|
|
*/
|
||
|
|
|
||
|
|
let processedPlugins = List([]);
|
||
|
|
|
||
|
|
|
||
|
|
const nodes = {};
|
||
|
|
const augmentedMarkdownSyntax = markdownSyntax;
|
||
|
|
const augmentedHTMLSyntax = htmlSyntax;
|
||
|
|
|
||
|
|
function processEditorPlugins(plugins) {
|
||
|
|
// Since the plugin list is immutable, a simple comparisson is enough
|
||
|
|
// to determine whether we need to process again.
|
||
|
|
if (plugins === processedPlugins) return;
|
||
|
|
|
||
|
|
plugins.forEach(plugin => {
|
||
|
|
const markdownRule = MarkupIt.Rule(plugin.id)
|
||
|
|
.regExp(plugin.pattern, function(state, match) { return plugin.fromBlock(match); })
|
||
|
|
.toText(function(state, token) { return plugin.toBlock(token.getData()); });
|
||
|
|
|
||
|
|
const htmlRule = MarkupIt.Rule(plugin.id)
|
||
|
|
.regExp(plugin.pattern, function(state, match) { return plugin.fromBlock(match); })
|
||
|
|
.toText(function(state, token) { return plugin.toPreview(token.getData()); });
|
||
|
|
|
||
|
|
const nodeRenderer = (props) => {
|
||
|
|
/* eslint react/prop-types: 0 */
|
||
|
|
const { node, state } = props;
|
||
|
|
const isFocused = state.selection.hasEdgeIn(node);
|
||
|
|
const className = isFocused ? 'plugin active' : 'plugin';
|
||
|
|
return (
|
||
|
|
<div {...props.attributes} className={className}>
|
||
|
|
<Icon type={plugin.icon}/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
augmentedMarkdownSyntax.addInlineRules(markdownRule);
|
||
|
|
augmentedHTMLSyntax.addInlineRules(htmlRule);
|
||
|
|
nodes[plugin.id] = nodeRenderer;
|
||
|
|
});
|
||
|
|
|
||
|
|
processedPlugins = plugins;
|
||
|
|
}
|
||
|
|
|
||
|
|
function getPlugins() {
|
||
|
|
return processedPlugins.map(plugin => (
|
||
|
|
{ id: plugin.id, icon: plugin.icon }
|
||
|
|
)).toArray();
|
||
|
|
}
|
||
|
|
|
||
|
|
function getNodes() {
|
||
|
|
return nodes;
|
||
|
|
}
|
||
|
|
|
||
|
|
function getSyntaxes() {
|
||
|
|
return { markdown: augmentedMarkdownSyntax, html:augmentedHTMLSyntax };
|
||
|
|
}
|
||
|
|
|
||
|
|
export { processEditorPlugins, getNodes, getSyntaxes, getPlugins };
|