usfm-editor
Version:
A WYSIWYG editor component for USFM
176 lines (137 loc) • 7.63 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.numberClassNames = numberClassNames;
exports.renderElementByType = renderElementByType;
exports.renderLeafByProps = renderLeafByProps;
var React = _interopRequireWildcard(require("react"));
var _slate = require("slate");
var _VerseNumber = require("../components/VerseNumber");
var _UsfmMarkers = require("../utils/UsfmMarkers");
var _NodeTypes = _interopRequireDefault(require("../utils/NodeTypes"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function renderLeafByProps(props) {
const type = props.leaf[_UsfmMarkers.UsfmMarkers.SPECIAL_TEXT.bk] ? "cite" : "span";
let className = "";
if (props.leaf[_UsfmMarkers.UsfmMarkers.SPECIAL_TEXT.nd]) className = className + "usfm-marker-nd ";
if (props.leaf[_UsfmMarkers.UsfmMarkers.SPECIAL_TEXT.bk]) className = className + "usfm-marker-bk ";
return /*#__PURE__*/React.createElement(type, {
className: className.trim(),
...props.attributes
}, props.children);
}
function renderElementByType(props) {
var _UsfmMarkers$destruct;
switch (props.element.type) {
case undefined:
case null:
return /*#__PURE__*/React.createElement(UnrenderedMarker, props);
case _NodeTypes.default.CHAPTER:
return /*#__PURE__*/React.createElement(Chapter, props);
case _NodeTypes.default.HEADERS:
return /*#__PURE__*/React.createElement(Headers, props);
case _NodeTypes.default.INLINE_CONTAINER:
return /*#__PURE__*/React.createElement(InlineContainer, props);
case _NodeTypes.default.VERSE:
return /*#__PURE__*/React.createElement(Verse, props);
case _UsfmMarkers.UsfmMarkers.CHAPTERS_AND_VERSES.c:
return /*#__PURE__*/React.createElement(ChapterNumber, props);
case _UsfmMarkers.UsfmMarkers.CHAPTERS_AND_VERSES.v:
return /*#__PURE__*/React.createElement(_VerseNumber.VerseNumberWithVerseMenu, props);
default:
// This element is derived from a Usfm Marker
const baseMarker = (_UsfmMarkers$destruct = _UsfmMarkers.UsfmMarkers.destructureMarker(props.element.type)) === null || _UsfmMarkers$destruct === void 0 ? void 0 : _UsfmMarkers$destruct.baseMarker;
switch (baseMarker) {
case _UsfmMarkers.UsfmMarkers.TITLES_HEADINGS_LABELS.s:
return /*#__PURE__*/React.createElement(SectionHeader, props);
default:
if (isRenderedParagraphMarker(props.element.type)) {
// Both supported and unsupported paragraph markers will
// be rendered like a normal paragraph.
return /*#__PURE__*/React.createElement(Paragraph, _extends({}, props, {
cssClass: `usfm-marker-${baseMarker}`
}));
} else {
return /*#__PURE__*/React.createElement(UnrenderedMarker, props);
}
}
}
}
const UnrenderedMarker = props => {
return /*#__PURE__*/React.createElement("span", _extends({}, props.attributes, {
className: "usfm-editor-unrendered-marker"
}), props.children);
};
function numberClassNames(node) {
if (_slate.Node.string(node) === "front") return "usfm-editor-front";
return "";
}
function isRenderedParagraphMarker(marker) {
var _UsfmMarkers$destruct2;
const baseMarker = (_UsfmMarkers$destruct2 = _UsfmMarkers.UsfmMarkers.destructureMarker(marker)) === null || _UsfmMarkers$destruct2 === void 0 ? void 0 : _UsfmMarkers$destruct2.baseMarker;
return baseMarker !== undefined && _UsfmMarkers.UsfmMarkers.isParagraphType(marker) && !unrenderedParagraphMarkers.includes(baseMarker);
} // Special paragraph markers that will not be visibly rendered but will
// exist in the slate dom.
const unrenderedParagraphMarkers = Object.values(_UsfmMarkers.UsfmMarkers.IDENTIFICATION);
const Chapter = props => {
return /*#__PURE__*/React.createElement("div", _extends({}, props.attributes, {
className: "usfm-editor-chapter"
}), props.children);
};
const Paragraph = ({
cssClass,
...props
}) => {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("br", {
className: "usfm-editor-break"
}), /*#__PURE__*/React.createElement("span", _extends({}, props.attributes, {
className: `${cssClass}`
}), props.children));
};
const Headers = props => {
return /*#__PURE__*/React.createElement("div", _extends({}, props.attributes, {
className: "usfm-editor-headers"
}), props.children);
};
const Verse = props => {
const empty = _slate.Node.string(props.element) === _slate.Node.string(props.element.children[0]) ? " usfm-editor-empty-verse" : "";
return /*#__PURE__*/React.createElement("span", _extends({}, props.attributes, {
className: "usfm-editor-verse" + empty
}), props.children);
};
const InlineContainer = props => {
return /*#__PURE__*/React.createElement("span", _extends({}, props.attributes, {
className: "usfm-editor-inline"
}), props.children);
};
const ChapterNumber = props => {
return /*#__PURE__*/React.createElement("h1", _extends({}, props.attributes, {
contentEditable: false,
className: `usfm-marker-c usfm-editor-no-select ${numberClassNames(props.element)}`
}), props.children);
};
const SectionHeader = props => {
var _UsfmMarkers$destruct3;
const sCssClass = "usfm-marker-s";
const number = (_UsfmMarkers$destruct3 = _UsfmMarkers.UsfmMarkers.destructureMarker(props.element.type)) === null || _UsfmMarkers$destruct3 === void 0 ? void 0 : _UsfmMarkers$destruct3.number;
if (number && parseInt(number) == 5 && _slate.Node.string(props.element).trim() === "") {
// Some editors use \s5 as a chunk delimiter. Separate chunks by horizontal rules.
return /*#__PURE__*/React.createElement("span", {
contentEditable: false,
className: sCssClass
}, /*#__PURE__*/React.createElement("hr", _extends({}, props.attributes, {
className: "usfm-editor-hr"
})), props.children);
} else {
const headingTag = `h${number || 3}`;
const attribs = {
className: sCssClass,
...props.attributes
};
return /*#__PURE__*/React.createElement(headingTag, attribs, props.children);
}
};