(this.editorEl = r)} />;
}
}
const EditorOuter = React.forwardRef(function EditorOuter(props, ref) {
- return
- {(context) => }
- ;
+ return (
+
+ {(context) => }
+
+ );
});
export default EditorOuter;
diff --git a/src/components/LinkButton.js b/src/components/LinkButton.js
index ad5862e..69d9992 100644
--- a/src/components/LinkButton.js
+++ b/src/components/LinkButton.js
@@ -1,33 +1,47 @@
import PropTypes from 'prop-types';
import React from 'react';
import { UI } from 'mobiledoc-kit';
-import { ReactMobileDocContext } from "./Context";
+import { ReactMobileDocContext } from './Context';
-const LinkButton = ({ children = "Link", type = "button", handler, className, activeClassName = 'active', ...props }) => {
- return
- {({ editor, activeMarkupTags = []}) => {
- const onClick = () => {
- if (!editor.hasCursor()) {
- return;
- }
+const LinkButton = ({
+ children = 'Link',
+ type = 'button',
+ handler,
+ className,
+ activeClassName = 'active',
+ ...props
+}) => {
+ return (
+
+ {({ editor, activeMarkupTags = [] }) => {
+ const onClick = () => {
+ if (!editor.hasCursor()) {
+ return;
+ }
- if (editor.hasActiveMarkup('a')) {
- editor.toggleMarkup('a');
- } else {
- UI.toggleLink(editor, handler);
- }
- };
+ if (editor.hasActiveMarkup('a')) {
+ editor.toggleMarkup('a');
+ } else {
+ UI.toggleLink(editor, handler);
+ }
+ };
- className = [className, activeMarkupTags.indexOf('a') > -1 && activeClassName].filter(Boolean).join(' ');
+ className = [
+ className,
+ activeMarkupTags.indexOf('a') > -1 && activeClassName,
+ ]
+ .filter(Boolean)
+ .join(' ');
- props = { type, ...props, onClick, className };
- return ;
- }}
- ;
+ props = { type, ...props, onClick, className };
+ return ;
+ }}
+
+ );
};
LinkButton.propTypes = {
- children: PropTypes.node
+ children: PropTypes.node,
};
export default LinkButton;
diff --git a/src/components/MarkupButton.js b/src/components/MarkupButton.js
index 3d4a7ed..bf942d1 100644
--- a/src/components/MarkupButton.js
+++ b/src/components/MarkupButton.js
@@ -1,22 +1,36 @@
import PropTypes from 'prop-types';
import React from 'react';
import titleCase from '../utils/titleCase';
-import { ReactMobileDocContext } from "./Context";
+import { ReactMobileDocContext } from './Context';
-const MarkupButton = ({ tag = '', type = 'button', children = titleCase(tag), className, activeClassName = 'active', ...props }) => {
- return
- {({ editor, activeMarkupTags = []}) => {
- const onClick = () => editor.toggleMarkup(tag);
- className = [className, activeMarkupTags.indexOf(tag.toLowerCase()) > -1 && activeClassName].filter(Boolean).join(' ');
- props = { type, ...props, onClick, className };
- return ;
- }}
- ;
+const MarkupButton = ({
+ tag = '',
+ type = 'button',
+ children = titleCase(tag),
+ className,
+ activeClassName = 'active',
+ ...props
+}) => {
+ return (
+
+ {({ editor, activeMarkupTags = [] }) => {
+ const onClick = () => editor.toggleMarkup(tag);
+ className = [
+ className,
+ activeMarkupTags.indexOf(tag.toLowerCase()) > -1 && activeClassName,
+ ]
+ .filter(Boolean)
+ .join(' ');
+ props = { type, ...props, onClick, className };
+ return ;
+ }}
+
+ );
};
MarkupButton.propTypes = {
tag: PropTypes.string.isRequired,
- children: PropTypes.node
+ children: PropTypes.node,
};
export default MarkupButton;
diff --git a/src/components/SectionButton.js b/src/components/SectionButton.js
index c178275..0939b7f 100644
--- a/src/components/SectionButton.js
+++ b/src/components/SectionButton.js
@@ -1,22 +1,36 @@
import PropTypes from 'prop-types';
import React from 'react';
import titleCase from '../utils/titleCase';
-import { ReactMobileDocContext } from "./Context";
+import { ReactMobileDocContext } from './Context';
-const SectionButton = ({ tag = '', type = 'button', children = titleCase(tag), className, activeClassName = 'active', ...props }) => {
- return
- {({ editor, activeSectionTags = []}) => {
- const onClick = () => editor.toggleSection(tag);
- className = [className, activeSectionTags.indexOf(tag.toLowerCase()) > -1 && activeClassName].filter(Boolean).join(' ');
- props = { type, ...props, onClick, className };
- return ;
- }}
- ;
+const SectionButton = ({
+ tag = '',
+ type = 'button',
+ children = titleCase(tag),
+ className,
+ activeClassName = 'active',
+ ...props
+}) => {
+ return (
+
+ {({ editor, activeSectionTags = [] }) => {
+ const onClick = () => editor.toggleSection(tag);
+ className = [
+ className,
+ activeSectionTags.indexOf(tag.toLowerCase()) > -1 && activeClassName,
+ ]
+ .filter(Boolean)
+ .join(' ');
+ props = { type, ...props, onClick, className };
+ return ;
+ }}
+
+ );
};
SectionButton.propTypes = {
tag: PropTypes.string.isRequired,
- children: PropTypes.node
+ children: PropTypes.node,
};
export default SectionButton;
diff --git a/src/components/SectionSelect.js b/src/components/SectionSelect.js
index 16e2f1c..2494216 100644
--- a/src/components/SectionSelect.js
+++ b/src/components/SectionSelect.js
@@ -1,29 +1,47 @@
import PropTypes from 'prop-types';
import React from 'react';
-import { ReactMobileDocContext } from "./Context";
+import { ReactMobileDocContext } from './Context';
const SectionSelect = ({ tags = [], ...props }) => {
- return
- {({ editor, activeSectionTags = []}) => {
- const activeTag = () => tags.find((t) => activeSectionTags.includes(t));
+ return (
+
+ {({ editor, activeSectionTags = [] }) => {
+ const activeTag = () => tags.find((t) => activeSectionTags.includes(t));
- const onChange = (event) => {
- const tag = event.target.value || activeTag();
- editor.toggleSection(tag);
- };
+ const onChange = (event) => {
+ const tag = event.target.value || activeTag();
+ editor.toggleSection(tag);
+ };
- return (
-
- );
- }}
- ;
+ return (
+
+ );
+ }}
+
+ );
};
SectionSelect.propTypes = {
- tags: PropTypes.arrayOf(PropTypes.oneOf(['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'aside'])).isRequired
+ tags: PropTypes.arrayOf(
+ PropTypes.oneOf([
+ 'p',
+ 'h1',
+ 'h2',
+ 'h3',
+ 'h4',
+ 'h5',
+ 'h6',
+ 'blockquote',
+ 'aside',
+ ])
+ ).isRequired,
};
export default SectionSelect;
diff --git a/src/components/Toolbar.js b/src/components/Toolbar.js
index 5c829c2..a24e0d1 100644
--- a/src/components/Toolbar.js
+++ b/src/components/Toolbar.js
@@ -5,16 +5,37 @@ import LinkButton from './LinkButton';
import SectionSelect from './SectionSelect';
import AttributeSelect from './AttributeSelect';
-const Toolbar = (props) =>
+const Toolbar = (props) => (
- - Style:
- - Alignment:
- - UL
- - OL
-
;
+
+
+
+
+
+
+
+
+
+
+ Style:
+
+
+ Alignment:{' '}
+
+
+
+
+
+
+ UL
+
+
+ OL
+
+
+);
export default Toolbar;
diff --git a/src/index.js b/src/index.js
index 7698be0..017b333 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,15 +1,15 @@
-import { classToDOMCard } from './utils/classToCard';
-import { classToDOMAtom } from './utils/classToAtom';
-import { EMPTY_MOBILEDOC } from './utils/mobiledoc';
+import AttributeSelect from './components/AttributeSelect';
import Container from './components/Container';
-import { ReactMobileDocContext } from "./components/Context";
+import { ReactMobileDocContext } from './components/Context';
import Editor from './components/Editor';
import LinkButton from './components/LinkButton';
import MarkupButton from './components/MarkupButton';
-import AttributeSelect from './components/AttributeSelect';
import SectionButton from './components/SectionButton';
import SectionSelect from './components/SectionSelect';
import Toolbar from './components/Toolbar';
+import { classToDOMAtom } from './utils/classToAtom';
+import { classToDOMCard } from './utils/classToCard';
+import { EMPTY_MOBILEDOC } from './utils/mobiledoc';
export {
classToDOMCard,
@@ -23,5 +23,5 @@ export {
SectionButton,
SectionSelect,
Toolbar,
- ReactMobileDocContext
+ ReactMobileDocContext,
};
diff --git a/src/utils/classToAtom.js b/src/utils/classToAtom.js
index b6a3d8a..5f2fde2 100644
--- a/src/utils/classToAtom.js
+++ b/src/utils/classToAtom.js
@@ -1,23 +1,25 @@
import React from 'react';
import ReactDOM from 'react-dom';
-const atomRenderer = (component) => ({ env, options, payload, value }) => {
- const { onTeardown } = env;
+const atomRenderer =
+ (component) =>
+ ({ env, options, payload, value }) => {
+ const { onTeardown } = env;
- const element = React.createElement(component, {
- ...env,
- ...options,
- value,
- payload: { ...payload }
- });
+ const element = React.createElement(component, {
+ ...env,
+ ...options,
+ value,
+ payload: { ...payload },
+ });
- const targetNode = document.createElement('span');
- ReactDOM.render(element, targetNode);
+ const targetNode = document.createElement('span');
+ ReactDOM.render(element, targetNode);
- onTeardown(() => ReactDOM.unmountComponentAtNode(targetNode));
+ onTeardown(() => ReactDOM.unmountComponentAtNode(targetNode));
- return targetNode;
-};
+ return targetNode;
+ };
export const classToDOMAtom = (component) => {
if (!component.displayName) {
@@ -30,6 +32,6 @@ export const classToDOMAtom = (component) => {
name: component.displayName,
component,
type: 'dom',
- render: atomRenderer(component)
+ render: atomRenderer(component),
};
};
diff --git a/src/utils/classToCard.js b/src/utils/classToCard.js
index 66b520b..06d490a 100644
--- a/src/utils/classToCard.js
+++ b/src/utils/classToCard.js
@@ -1,25 +1,34 @@
import React from 'react';
import ReactDOM from 'react-dom';
-const cardRenderer = (component, isEditing = false) => ({ env, options, payload }) => {
- const targetNode = document.createElement('div');
- const { didRender, onTeardown } = env;
+const cardRenderer =
+ (component, isEditing = false) =>
+ ({ env, options, payload }) => {
+ const targetNode = document.createElement('div');
+ const { didRender, onTeardown } = env;
- didRender(() => {
- payload = { ...payload }; // deref payload
- const { cardProps } = options;
- const element = React.createElement(component, { ...env, ...cardProps, payload, isEditing });
- ReactDOM.render(element, targetNode);
- });
+ didRender(() => {
+ payload = { ...payload }; // deref payload
+ const { cardProps } = options;
+ const element = React.createElement(component, {
+ ...env,
+ ...cardProps,
+ payload,
+ isEditing,
+ });
+ ReactDOM.render(element, targetNode);
+ });
- onTeardown(() => ReactDOM.unmountComponentAtNode(targetNode));
+ onTeardown(() => ReactDOM.unmountComponentAtNode(targetNode));
- return targetNode;
-};
+ return targetNode;
+ };
export const classToDOMCard = (component) => {
if (!component.displayName) {
- throw new Error("Can't create card from component, no displayName defined: " + component);
+ throw new Error(
+ "Can't create card from component, no displayName defined: " + component
+ );
}
return {
@@ -27,6 +36,6 @@ export const classToDOMCard = (component) => {
component,
type: 'dom',
render: cardRenderer(component),
- edit: cardRenderer(component, true)
+ edit: cardRenderer(component, true),
};
};
diff --git a/src/utils/getActiveAttribute.js b/src/utils/getActiveAttribute.js
index 2ca26d8..2669429 100644
--- a/src/utils/getActiveAttribute.js
+++ b/src/utils/getActiveAttribute.js
@@ -1,6 +1,6 @@
export default (activeSectionAttributes, attribute, defaultValue) => {
const attributes = activeSectionAttributes.map(
- a => a[`data-md-${attribute}`] || defaultValue
+ (a) => a[`data-md-${attribute}`] || defaultValue
);
let activeAttribute = attributes[0];
diff --git a/src/utils/mobiledoc.js b/src/utils/mobiledoc.js
index 75bc55c..e02ce04 100644
--- a/src/utils/mobiledoc.js
+++ b/src/utils/mobiledoc.js
@@ -1,11 +1,9 @@
-export const LATEST_MOBILEDOC_VERSION = "0.3.2";
+export const LATEST_MOBILEDOC_VERSION = '0.3.2';
export const EMPTY_MOBILEDOC = {
version: LATEST_MOBILEDOC_VERSION,
markups: [],
atoms: [],
cards: [],
- sections: [
- [1, "p", []]
- ]
+ sections: [[1, 'p', []]],
};
diff --git a/test/components/AttributeSelectTest.js b/test/components/AttributeSelectTest.js
index 98309bd..1a22775 100644
--- a/test/components/AttributeSelectTest.js
+++ b/test/components/AttributeSelectTest.js
@@ -1,6 +1,5 @@
import React from 'react';
-import AttributeSelect from '../../src/components/AttributeSelect';
-import { ReactMobileDocContext } from "../../src/components/Context";
+import { AttributeSelect, ReactMobileDocContext } from 'react-mobiledoc-editor';
import { expect } from 'chai';
import { spy } from 'sinon';
import { mount } from 'enzyme';
@@ -11,10 +10,14 @@ describe('
', () => {
const context = { activeSectionAttributes };
const wrapper = mount(
-
+
);
- const option =
;
+ const option = (
+
+ );
expect(wrapper.containsMatchingElement(option)).to.be.true;
expect(wrapper.find('select')).to.have.prop('value', 'left');
});
@@ -24,17 +27,25 @@ describe('
', () => {
const context = { activeSectionAttributes };
const wrapper = mount(
-
+
);
- const option =
;
+ const option = (
+
+ );
expect(wrapper.containsMatchingElement(option)).to.be.true;
expect(wrapper.find('select')).to.have.prop('value', 'right');
});
it('should pass props to