From 7a02cdd9a05013d4964c3a7e83d906ff4f805387 Mon Sep 17 00:00:00 2001 From: David Furlong Date: Thu, 1 Nov 2018 10:42:05 +0100 Subject: [PATCH 1/2] Add ory scope to redux state and update redux state flow types Signed-off-by: David Furlong --- .../core/src/components/HotKey/Decorator.js | 7 +- packages/core/src/index.js | 16 +- .../core/src/reducer/editable/index.test.js | 6 +- packages/core/src/reducer/editables/index.js | 4 +- .../core/src/reducer/editables/index.test.js | 18 +- packages/core/src/reducer/focus/index.test.js | 6 +- packages/core/src/reducer/index.js | 7 +- packages/core/src/selector/display/index.js | 42 +- packages/core/src/selector/editable/index.js | 33 +- .../core/src/selector/editable/index.test.js | 910 +++++++++--------- packages/core/src/selector/focus.js | 5 +- packages/core/src/selector/index.js | 3 +- packages/core/src/selector/setting.js | 4 +- packages/core/src/types/editable.js | 6 + packages/core/src/types/redux.js | 5 +- packages/core/src/types/state.js | 11 + packages/plugins/content/divider/package.json | 3 +- packages/plugins/content/slate/src/helpers.js | 32 +- packages/plugins/content/slate/src/index.js | 18 +- .../content/slate/src/plugins/code/index.js | 20 +- .../content/slate/src/plugins/link/index.js | 58 +- .../content/slate/src/plugins/lists.js | 39 +- .../plugins/layout/background/src/index.js | 3 +- 23 files changed, 649 insertions(+), 607 deletions(-) create mode 100644 packages/core/src/types/state.js diff --git a/packages/core/src/components/HotKey/Decorator.js b/packages/core/src/components/HotKey/Decorator.js index 3f5cdf6fcf..e01aff42a4 100644 --- a/packages/core/src/components/HotKey/Decorator.js +++ b/packages/core/src/components/HotKey/Decorator.js @@ -39,6 +39,7 @@ import { searchNodeEverywhere } from '../../selector/editable' +import type { RootState } from '../../types/state' import type { Editable, ComponetizedCell } from '../../types/editable' type Props = { @@ -131,9 +132,9 @@ class Decorator extends Component { if (!isEditMode) { return } - + const maybeNode = this.props.searchNodeEverywhere(focus) - if (!maybeNode) { + if (!maybeNode) { return } const { node: n } = maybeNode @@ -192,7 +193,7 @@ const mapStateToProps = createStructuredSelector({ focus, node: (state: any) => (id: string, editable: string) => node(state, { id, editable }), - searchNodeEverywhere: (state: any) => (id: string) => + searchNodeEverywhere: (state: RootState) => (id: string) => searchNodeEverywhere(state, id), editable: (state: any, props: any) => (id?: string) => editable(state, id ? { id } : props), diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 4e2b64f27d..a504277393 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -30,10 +30,11 @@ import { selectors } from './selector' import PluginService from './service/plugin' import pluginDefault from './service/plugin/default' import type { Editable as EditableType } from './types/editable' -import type Store from './types/redux' +import type { Store } from './types/redux' import forEach from 'ramda/src/forEach' import HTML5Backend, { NativeTypes } from 'react-dnd-html5-backend' import { DragDropContext as dragDropContext } from 'react-dnd' +import { oryReducer } from './reducer' let instance: Editor @@ -82,13 +83,15 @@ class Editor { middleware = [], editables = [], defaultPlugin = pluginDefault, - dragDropBackend + dragDropBackend, + store }: { plugins: { content: [], layout: [], native?: any }, middleware: [], editables: EditableType[], defaultPlugin: any, - dragDropBackend: any + dragDropBackend: any, + store: Store } = {}) { if (instance) { console.warn( @@ -97,7 +100,7 @@ class Editor { } instance = this - this.store = createStore(initialState(), middleware) + this.store = store || createStore(initialState(), middleware) this.plugins = new PluginService(plugins) this.middleware = middleware this.trigger = actions(this.store.dispatch) @@ -115,7 +118,7 @@ class Editor { forEach((editable: any) => { console.log(this.plugins.serialize(editable)) this.trigger.editable.update(this.plugins.serialize(editable)) - }, this.store.getState().editables.present) + }, this.store.getState().ory.editables.present) } setLayoutPlugins = (plugins: Array = []) => { @@ -135,7 +138,6 @@ class Editor { setContentPlugins = (plugins: Array = []) => { this.plugins.setContentPlugins(plugins) - console.log(this.store.getState()) this.refreshEditables() } @@ -153,7 +155,7 @@ class Editor { query = {} } -export { PluginService, Editable, Editor } +export { PluginService, Editable, Editor, oryReducer } export const createEmptyState = () => ({ id: v4(), cells: [] }) diff --git a/packages/core/src/reducer/editable/index.test.js b/packages/core/src/reducer/editable/index.test.js index 9bc1ff8f76..3a009c24b5 100644 --- a/packages/core/src/reducer/editable/index.test.js +++ b/packages/core/src/reducer/editable/index.test.js @@ -42,11 +42,13 @@ const walker = ({ cells = [], rows = [], hover = null, ...other }) => { const cells = state => decorate(state).map(walker) const simulateDispatch = (currentState, action) => { - const reducer = combineReducers({ editable: rawEditableReducer }) + const reducer = combineReducers({ + ory: combineReducers({ editable: rawEditableReducer }) + }) const store = createStore(reducer, currentState) store.dispatch(action) - return store.getState() + return store.getState().ory } const runCase = (currentState, action, expectedState) => { diff --git a/packages/core/src/reducer/editables/index.js b/packages/core/src/reducer/editables/index.js index 004c8e0cd7..8045a69508 100644 --- a/packages/core/src/reducer/editables/index.js +++ b/packages/core/src/reducer/editables/index.js @@ -26,7 +26,7 @@ import undoable, { includeAction } from 'redux-undo' import { editable } from '../editable' import { UPDATE_EDITABLE } from '../../actions/editables' -import type { Editable } from '../../types/editable' +import type { Editable, Editables } from '../../types/editable' import { CELL_UPDATE_CONTENT, CELL_UPDATE_LAYOUT, @@ -80,7 +80,7 @@ const inner = undoable( ) export const editables = ( - state: { past: [], present: Editable[], future: [] } = { + state: Editables = { past: [], present: [], future: [] diff --git a/packages/core/src/reducer/editables/index.test.js b/packages/core/src/reducer/editables/index.test.js index f7b9f3026b..6cb1dd2976 100644 --- a/packages/core/src/reducer/editables/index.test.js +++ b/packages/core/src/reducer/editables/index.test.js @@ -71,11 +71,21 @@ describe('editor/reducer/editables', () => { ].forEach((c, k) => { describe(`test case ${k}`, () => { it('should update an existing editable', () => { - const reducer = combineReducers({ editables }) - const store = createStore(reducer, { editables: c.i }, identity) + const reducer = combineReducers({ + ory: combineReducers({ editables }) + }) + const store = createStore( + reducer, + { ory: { editables: c.i } }, + identity + ) store.dispatch(c.a) - expect(store.getState().editables.past.length, 'to equal', c.e.pa) - expect(store.getState().editables.present.length, 'to equal', c.e.pr) + expect(store.getState().ory.editables.past.length, 'to equal', c.e.pa) + expect( + store.getState().ory.editables.present.length, + 'to equal', + c.e.pr + ) }) }) }) diff --git a/packages/core/src/reducer/focus/index.test.js b/packages/core/src/reducer/focus/index.test.js index df3b093899..e4faa46ab3 100644 --- a/packages/core/src/reducer/focus/index.test.js +++ b/packages/core/src/reducer/focus/index.test.js @@ -54,10 +54,10 @@ describe('editor/reducer/focus', () => { ].forEach((c, k) => { describe(`test case ${k}`, () => { it('should dispatch the action and return the expected result', () => { - const reducer = combineReducers({ focus }) - const store = createStore(reducer, { focus: c.s }, identity) + const reducer = combineReducers({ ory: combineReducers({ focus }) }) + const store = createStore(reducer, { ory: { focus: c.s } }, identity) store.dispatch(c.a()) - expect(store.getState(), 'to equal', { focus: c.e }) + expect(store.getState().ory, 'to equal', { focus: c.e }) }) }) }) diff --git a/packages/core/src/reducer/index.js b/packages/core/src/reducer/index.js index 43826419a5..03f50ac65a 100644 --- a/packages/core/src/reducer/index.js +++ b/packages/core/src/reducer/index.js @@ -28,9 +28,14 @@ import { display } from './display' import { focus } from './focus' import { settings } from './settings' -export default combineReducers({ +const ory = combineReducers({ editables, display, focus, settings }) + +// Needed for use of ory-editor with own redux store +export { ory as oryReducer } + +export default combineReducers({ ory }) diff --git a/packages/core/src/selector/display/index.js b/packages/core/src/selector/display/index.js index e5ec0f698b..05de441e74 100644 --- a/packages/core/src/selector/display/index.js +++ b/packages/core/src/selector/display/index.js @@ -29,30 +29,30 @@ import { DISPLAY_MODE_RESIZING } from '../../actions/display' -import type { Display } from '../../types/display' +import type { RootState } from '../../types/state' export const isPreviewMode = ({ - display: { mode } -}: { - display: Display -}): boolean => mode === DISPLAY_MODE_PREVIEW + ory: { + display: { mode } + } +}: RootState): boolean => mode === DISPLAY_MODE_PREVIEW export const isLayoutMode = ({ - display: { mode } -}: { - display: Display -}): boolean => mode === DISPLAY_MODE_LAYOUT + ory: { + display: { mode } + } +}: RootState): boolean => mode === DISPLAY_MODE_LAYOUT export const isEditMode = ({ - display: { mode } -}: { - display: Display -}): boolean => mode === DISPLAY_MODE_EDIT + ory: { + display: { mode } + } +}: RootState): boolean => mode === DISPLAY_MODE_EDIT export const isInsertMode = ({ - display: { mode } -}: { - display: Display -}): boolean => mode === DISPLAY_MODE_INSERT + ory: { + display: { mode } + } +}: RootState): boolean => mode === DISPLAY_MODE_INSERT export const isResizeMode = ({ - display: { mode } -}: { - display: Display -}): boolean => mode === DISPLAY_MODE_RESIZING + ory: { + display: { mode } + } +}: RootState): boolean => mode === DISPLAY_MODE_RESIZING diff --git a/packages/core/src/selector/editable/index.js b/packages/core/src/selector/editable/index.js index 31690db353..3610e670e6 100644 --- a/packages/core/src/selector/editable/index.js +++ b/packages/core/src/selector/editable/index.js @@ -22,14 +22,7 @@ // @flow import type { Editable, Cell, Row, Config } from '../../types/editable' - -type Editables = { - editables: { - past: Editable[], - present: Editable[], - future: Editable[] - } -} +import type { RootState } from '../../types/state' const nodeInner = (current: any, props: { id: string }): any => { const { id, rows = [], cells = [] } = current @@ -50,14 +43,18 @@ const nodeInner = (current: any, props: { id: string }): any => { } export const editable = ( - { editables }: Editables = {}, + { ory: { editables } }: RootState, { id }: { id: string } ): any => editables.present.find(({ id: current }: Editable = {}) => current === id) -export const editables = ({ editables: { present } }: Editables = {}) => present +export const editables = ({ + ory: { + editables: { present } + } +}: RootState) => present -export const purifiedEditable = (state: Editables, props: Editable) => { +export const purifiedEditable = (state: RootState, props: Editable) => { const found = editable(state, props) if (!found) { return null @@ -72,12 +69,12 @@ export const purifiedEditable = (state: Editables, props: Editable) => { } export const editableConfig = ( - state: Editables, + state: RootState, { editable: id }: { editable: string } ): Config => editable(state, { id }).config export const node = ( - state: Object, + state: RootState, props: { id: string, editable: string } ): Object => { const tree = editable(state, { id: props.editable }) @@ -88,13 +85,13 @@ export const node = ( return { ...nodeInner(tree, props) } } -export const searchNodeEverywhere = (state: Object, id: string) => { - for (let i = 0; i < state.editables.present.length; i++) { - const n = node(state, { id, editable: state.editables.present[i].id }) +export const searchNodeEverywhere = (state: RootState, id: string) => { + for (let i = 0; i < state.ory.editables.present.length; i++) { + const n = node(state, { id, editable: state.ory.editables.present[i].id }) if (n.id) { return { node: n, - editable: state.editables.present[i] + editable: state.ory.editables.present[i] } } } @@ -103,7 +100,7 @@ export const searchNodeEverywhere = (state: Object, id: string) => { } export const purifiedNode = ( - state: Editables, + state: RootState, props: { id: string, editable: string } ): any => { const found = node(state, props) diff --git a/packages/core/src/selector/editable/index.test.js b/packages/core/src/selector/editable/index.test.js index fe08c9990f..3ca650dcc1 100644 --- a/packages/core/src/selector/editable/index.test.js +++ b/packages/core/src/selector/editable/index.test.js @@ -27,472 +27,474 @@ import { purifiedNode, searchNodeEverywhere } from './index.js' const expect = unexpected.clone() const state = { - editables: { - present: [ - { - id: '1', - cells: [ - { - levels: { left: 0, right: 0, above: 0, below: 0 }, - id: 'b045776a-c2a3-40ed-8f6b-b188cd6a7427', - hover: null, - size: 12, - bounds: { left: 0, right: 0 }, - resizable: false, - inline: null, - hasInlineNeighbourde: null, - rows: [ - { - levels: { left: 1, right: 1, above: 1, below: 0 }, - id: 'e514fa47-38c7-440e-8ac2-87494dee8d23', - hover: null, - cells: [ - { - levels: { left: 2, right: 2, above: 2, below: 1 }, - props: { - importFromHtml: - '

European? British? These ‘Brexit’ Voters Identify as English

' - }, - id: 'c38fa00e-6b34-4c6d-af3f-2c1374edad11', - plugin: { - name: 'ory/editor/core/content/slate', - version: '0.0.1' - }, - hover: null, - size: 12, - bounds: { left: 0, right: 0 }, - resizable: false, - inline: null, - hasInlineNeighbourde: null - } - ] - }, - { - levels: { left: 1, right: 1, above: 0, below: 0 }, - id: '40635812-d539-47d7-a77f-a8ad0ca140f3', - hover: null, - cells: [ - { - levels: { left: 2, right: 2, above: 1, below: 1 }, - props: {}, - id: 'f6db2d53-f97c-4fb5-959b-5633ea524d18', - plugin: { - name: 'ory/editor/core/content/image', - version: '0.0.1' - }, - hover: null, - size: 12, - bounds: { left: 0, right: 0 }, - resizable: false, - inline: null, - hasInlineNeighbourde: null - } - ] - }, - { - levels: { left: 1, right: 1, above: 0, below: 0 }, - id: '02896bd0-bbd5-4943-89c4-15089744143a', - hover: null, - cells: [ - { - levels: { left: 2, right: 0, above: 1, below: 1 }, - id: 'a3e783dd-5fc3-4c8a-ac2d-546410eaa1e4', - hover: null, - size: 6, - bounds: { left: 0, right: 11 }, - resizable: true, - inline: null, - hasInlineNeighbourde: null, - rows: [ - { - levels: { left: 3, right: 1, above: 2, below: 0 }, - id: 'd4f0d7c0-1329-4b17-886e-39c983a231ed', - hover: null, - cells: [ - { - levels: { left: 4, right: 2, above: 3, below: 1 }, - props: { height: 50 }, - id: 'e799a338-da9d-49d9-93cf-bc9e356e1186', - plugin: { - name: 'ory/editor/core/content/spacer', - version: '0.0.1' - }, - hover: null, - size: 12, - bounds: { left: 0, right: 0 }, - resizable: false, - inline: null, - hasInlineNeighbourde: null - } - ] + ory: { + editables: { + present: [ + { + id: '1', + cells: [ + { + levels: { left: 0, right: 0, above: 0, below: 0 }, + id: 'b045776a-c2a3-40ed-8f6b-b188cd6a7427', + hover: null, + size: 12, + bounds: { left: 0, right: 0 }, + resizable: false, + inline: null, + hasInlineNeighbourde: null, + rows: [ + { + levels: { left: 1, right: 1, above: 1, below: 0 }, + id: 'e514fa47-38c7-440e-8ac2-87494dee8d23', + hover: null, + cells: [ + { + levels: { left: 2, right: 2, above: 2, below: 1 }, + props: { + importFromHtml: + '

European? British? These ‘Brexit’ Voters Identify as English

' }, - { - levels: { left: 3, right: 1, above: 0, below: 2 }, - id: '79810279-6059-407f-baa7-0cd96276c7f0', - hover: null, - cells: [ - { - levels: { left: 4, right: 2, above: 1, below: 3 }, - props: { - importFromHtml: - 'Residents of the Castle Point borough of Essex in England celebrated the queen’s 90th birthday this month. Castle Point is the most ethnically English part of the United Kingdom, with nearly 80 percent describing themselves as purely English, while 95 percent are white. Credit Andrew Testa for The New York Times' - }, - id: 'dd419480-aa37-40cd-af97-ba8c3e8ae2df', - plugin: { - name: 'ory/editor/core/content/slate', - version: '0.0.1' - }, - hover: null, - size: 12, - bounds: { left: 0, right: 0 }, - resizable: false, - inline: null, - hasInlineNeighbourde: null - } - ] - } - ] - }, - { - levels: { left: 0, right: 2, above: 1, below: 1 }, - props: { - src: - 'https://static01.nyt.com/images/2016/06/16/world/16England-web1/16England-web1-master768.jpg' - }, - id: '7ec840b7-1c54-46dd-acfe-ca2e973e1da4', - plugin: { - name: 'ory/editor/core/content/image', - version: '0.0.1' - }, - hover: null, - size: 6, - bounds: { left: 11, right: 0 }, - resizable: false, - inline: null, - hasInlineNeighbourde: null - } - ] - }, - { - levels: { left: 1, right: 1, above: 0, below: 0 }, - id: 'b298dede-8fd4-4ac2-b95c-138b9f09962a', - hover: null, - cells: [ - { - levels: { left: 2, right: 0, above: 1, below: 1 }, - props: { - importFromHtml: - '

SOUTH BENFLEET, England — The topic of the local debate was Britain’s imminent vote on whether to leave the European Union, and the discussion in this English town on the southeastern coast turned to the influx of European citizens into Britain.

\n

“Why do they all want to come here?” demanded one woman, angrily making the case for Britain to leave the bloc at the debate in South Benfleet, organized by the local council. “They want our wages and our benefits! We’re too bloody soft!”

\n

Paddy Ashdown, a former leader of the Liberal Democrats and a supporter of remaining in the European Union in the vote next Thursday, shook his head and responded with a touch of bitterness: “Well, I’ve not seen much evidence of that here.”

' - }, - id: 'bc44aef2-013e-4553-9d18-52f21016d343', - plugin: { - name: 'ory/editor/core/content/slate', - version: '0.0.1' + id: 'c38fa00e-6b34-4c6d-af3f-2c1374edad11', + plugin: { + name: 'ory/editor/core/content/slate', + version: '0.0.1' + }, + hover: null, + size: 12, + bounds: { left: 0, right: 0 }, + resizable: false, + inline: null, + hasInlineNeighbourde: null + } + ] + }, + { + levels: { left: 1, right: 1, above: 0, below: 0 }, + id: '40635812-d539-47d7-a77f-a8ad0ca140f3', + hover: null, + cells: [ + { + levels: { left: 2, right: 2, above: 1, below: 1 }, + props: {}, + id: 'f6db2d53-f97c-4fb5-959b-5633ea524d18', + plugin: { + name: 'ory/editor/core/content/image', + version: '0.0.1' + }, + hover: null, + size: 12, + bounds: { left: 0, right: 0 }, + resizable: false, + inline: null, + hasInlineNeighbourde: null + } + ] + }, + { + levels: { left: 1, right: 1, above: 0, below: 0 }, + id: '02896bd0-bbd5-4943-89c4-15089744143a', + hover: null, + cells: [ + { + levels: { left: 2, right: 0, above: 1, below: 1 }, + id: 'a3e783dd-5fc3-4c8a-ac2d-546410eaa1e4', + hover: null, + size: 6, + bounds: { left: 0, right: 11 }, + resizable: true, + inline: null, + hasInlineNeighbourde: null, + rows: [ + { + levels: { left: 3, right: 1, above: 2, below: 0 }, + id: 'd4f0d7c0-1329-4b17-886e-39c983a231ed', + hover: null, + cells: [ + { + levels: { left: 4, right: 2, above: 3, below: 1 }, + props: { height: 50 }, + id: 'e799a338-da9d-49d9-93cf-bc9e356e1186', + plugin: { + name: 'ory/editor/core/content/spacer', + version: '0.0.1' + }, + hover: null, + size: 12, + bounds: { left: 0, right: 0 }, + resizable: false, + inline: null, + hasInlineNeighbourde: null + } + ] + }, + { + levels: { left: 3, right: 1, above: 0, below: 2 }, + id: '79810279-6059-407f-baa7-0cd96276c7f0', + hover: null, + cells: [ + { + levels: { left: 4, right: 2, above: 1, below: 3 }, + props: { + importFromHtml: + 'Residents of the Castle Point borough of Essex in England celebrated the queen’s 90th birthday this month. Castle Point is the most ethnically English part of the United Kingdom, with nearly 80 percent describing themselves as purely English, while 95 percent are white. Credit Andrew Testa for The New York Times' + }, + id: 'dd419480-aa37-40cd-af97-ba8c3e8ae2df', + plugin: { + name: 'ory/editor/core/content/slate', + version: '0.0.1' + }, + hover: null, + size: 12, + bounds: { left: 0, right: 0 }, + resizable: false, + inline: null, + hasInlineNeighbourde: null + } + ] + } + ] }, - hover: null, - size: 6, - bounds: { left: 0, right: 11 }, - resizable: true, - inline: null, - hasInlineNeighbourde: null - }, - { - levels: { left: 0, right: 2, above: 1, below: 1 }, - id: '60bcd9ce-8490-4288-a378-6cc236d7bb3e', - hover: null, - size: 6, - bounds: { left: 11, right: 0 }, - resizable: false, - inline: null, - hasInlineNeighbourde: null, - rows: [ - { - levels: { left: 1, right: 3, above: 2, below: 2 }, - id: '115cef7f-c878-4de8-b4d7-7e48df2626c5', - hover: null, - cells: [ - { - levels: { left: 2, right: 0, above: 3, below: 3 }, - inline: 'left', - props: { - src: - 'https://static01.nyt.com/images/2016/06/16/world/16England-web2/16England-web2-master675.jpg' - }, - id: '152615ee-9248-42cb-8d79-e5c412c8d92d', - plugin: { - name: 'ory/editor/core/content/image', - version: '0.0.1' - }, - hover: null, - size: 6, - bounds: { left: 0, right: 11 }, - resizable: true - }, - { - levels: { left: 0, right: 4, above: 3, below: 3 }, - props: { - importFromHtml: - 'If Britain votes to leave, it will be in large part because of strong anti-Europe sentiment in much of England, the heart of the movement to divorce Britain from the Continent. Pollsters and analysts say that while Scotland and Northern Ireland are expected to vote overwhelmingly to stay in the bloc, England, far more populous, is likely to go the other way, reflecting a broad and often bluntly expressed view that English identity and values are being washed away by subordination to the bureaucrats of Brussels.' - }, - id: '28d21f71-72fa-41cf-a4bd-f62d7f59bf63', - plugin: { - name: 'ory/editor/core/content/slate', - version: '0.0.1' - }, - hover: null, - size: 12, - bounds: { left: 0, right: 0 }, - resizable: false, - hasInlineNeighbourde: true - } - ] - } - ] - } - ] - }, - { - levels: { left: 1, right: 1, above: 0, below: 1 }, - id: 'ef595bbd-c97c-4471-9e2d-605908cebd79', - hover: null, - cells: [ - { - levels: { left: 2, right: 2, above: 1, below: 2 }, - id: '092f35a7-ab76-4e17-80db-917a9685a818', - layout: { - name: 'ory/editor/core/layout/spoiler', - version: '0.0.1' + { + levels: { left: 0, right: 2, above: 1, below: 1 }, + props: { + src: + 'https://static01.nyt.com/images/2016/06/16/world/16England-web1/16England-web1-master768.jpg' + }, + id: '7ec840b7-1c54-46dd-acfe-ca2e973e1da4', + plugin: { + name: 'ory/editor/core/content/image', + version: '0.0.1' + }, + hover: null, + size: 6, + bounds: { left: 11, right: 0 }, + resizable: false, + inline: null, + hasInlineNeighbourde: null + } + ] + }, + { + levels: { left: 1, right: 1, above: 0, below: 0 }, + id: 'b298dede-8fd4-4ac2-b95c-138b9f09962a', + hover: null, + cells: [ + { + levels: { left: 2, right: 0, above: 1, below: 1 }, + props: { + importFromHtml: + '

SOUTH BENFLEET, England — The topic of the local debate was Britain’s imminent vote on whether to leave the European Union, and the discussion in this English town on the southeastern coast turned to the influx of European citizens into Britain.

\n

“Why do they all want to come here?” demanded one woman, angrily making the case for Britain to leave the bloc at the debate in South Benfleet, organized by the local council. “They want our wages and our benefits! We’re too bloody soft!”

\n

Paddy Ashdown, a former leader of the Liberal Democrats and a supporter of remaining in the European Union in the vote next Thursday, shook his head and responded with a touch of bitterness: “Well, I’ve not seen much evidence of that here.”

' + }, + id: 'bc44aef2-013e-4553-9d18-52f21016d343', + plugin: { + name: 'ory/editor/core/content/slate', + version: '0.0.1' + }, + hover: null, + size: 6, + bounds: { left: 0, right: 11 }, + resizable: true, + inline: null, + hasInlineNeighbourde: null }, - hover: null, - size: 12, - bounds: { left: 0, right: 0 }, - resizable: false, - inline: null, - hasInlineNeighbourde: null, - rows: [ - { - levels: { left: 3, right: 3, above: 2, below: 3 }, - id: '3a261db7-5351-437c-899b-27ebfaa31fe6', - hover: null, - cells: [ - { - levels: { left: 4, right: 0, above: 3, below: 4 }, - props: { - importFromHtml: - 'That sense of resurgent Englishness is palpable in places like South Benfleet, in the heart of a district that is the most ethnically English part of the United Kingdom, according to the Office of National Statistics based on the 2011 census, with nearly 80 percent describing themselves as purely English, while 95 percent are white. They are older than the national average, and only about one-quarter of 1 percent are foreign nationals, very low compared with the rest of Britain.' - }, - id: '9e4f897b-0199-439d-acbd-b98900448c94', - plugin: { - name: 'ory/editor/core/content/slate', - version: '0.0.1' + { + levels: { left: 0, right: 2, above: 1, below: 1 }, + id: '60bcd9ce-8490-4288-a378-6cc236d7bb3e', + hover: null, + size: 6, + bounds: { left: 11, right: 0 }, + resizable: false, + inline: null, + hasInlineNeighbourde: null, + rows: [ + { + levels: { left: 1, right: 3, above: 2, below: 2 }, + id: '115cef7f-c878-4de8-b4d7-7e48df2626c5', + hover: null, + cells: [ + { + levels: { left: 2, right: 0, above: 3, below: 3 }, + inline: 'left', + props: { + src: + 'https://static01.nyt.com/images/2016/06/16/world/16England-web2/16England-web2-master675.jpg' + }, + id: '152615ee-9248-42cb-8d79-e5c412c8d92d', + plugin: { + name: 'ory/editor/core/content/image', + version: '0.0.1' + }, + hover: null, + size: 6, + bounds: { left: 0, right: 11 }, + resizable: true }, - hover: null, - size: 4, - bounds: { left: 0, right: 7 }, - resizable: true, - inline: null, - hasInlineNeighbourde: null - }, - { - levels: { left: 0, right: 0, above: 3, below: 4 }, - props: { - importFromHtml: - 'Castle Point district of Essex, full of people who have made it out of London’s tough East End to a kind of English paradise with lots of single-family homes, lawns, beaches, seaside amusement parks and fish-and-chip shops.' - }, - id: '4520496c-a98e-4b57-b06d-59d156e36451', - plugin: { - name: 'ory/editor/core/content/slate', - version: '0.0.1' - }, - hover: null, - size: 4, - bounds: { left: 7, right: 7 }, - resizable: true, - inline: null, - hasInlineNeighbourde: null - }, - { - levels: { left: 0, right: 4, above: 3, below: 4 }, - props: { - importFromHtml: - 'The people here are fiercely English, fiercely Conservative and fiercely pro-Brexit, as the possible exit is being called, and many feel that their sovereignty and identity are being diluted by a failing European Union and an “uncontrolled” influx of foreigners.' + { + levels: { left: 0, right: 4, above: 3, below: 3 }, + props: { + importFromHtml: + 'If Britain votes to leave, it will be in large part because of strong anti-Europe sentiment in much of England, the heart of the movement to divorce Britain from the Continent. Pollsters and analysts say that while Scotland and Northern Ireland are expected to vote overwhelmingly to stay in the bloc, England, far more populous, is likely to go the other way, reflecting a broad and often bluntly expressed view that English identity and values are being washed away by subordination to the bureaucrats of Brussels.' + }, + id: '28d21f71-72fa-41cf-a4bd-f62d7f59bf63', + plugin: { + name: 'ory/editor/core/content/slate', + version: '0.0.1' + }, + hover: null, + size: 12, + bounds: { left: 0, right: 0 }, + resizable: false, + hasInlineNeighbourde: true + } + ] + } + ] + } + ] + }, + { + levels: { left: 1, right: 1, above: 0, below: 1 }, + id: 'ef595bbd-c97c-4471-9e2d-605908cebd79', + hover: null, + cells: [ + { + levels: { left: 2, right: 2, above: 1, below: 2 }, + id: '092f35a7-ab76-4e17-80db-917a9685a818', + layout: { + name: 'ory/editor/core/layout/spoiler', + version: '0.0.1' + }, + hover: null, + size: 12, + bounds: { left: 0, right: 0 }, + resizable: false, + inline: null, + hasInlineNeighbourde: null, + rows: [ + { + levels: { left: 3, right: 3, above: 2, below: 3 }, + id: '3a261db7-5351-437c-899b-27ebfaa31fe6', + hover: null, + cells: [ + { + levels: { left: 4, right: 0, above: 3, below: 4 }, + props: { + importFromHtml: + 'That sense of resurgent Englishness is palpable in places like South Benfleet, in the heart of a district that is the most ethnically English part of the United Kingdom, according to the Office of National Statistics based on the 2011 census, with nearly 80 percent describing themselves as purely English, while 95 percent are white. They are older than the national average, and only about one-quarter of 1 percent are foreign nationals, very low compared with the rest of Britain.' + }, + id: '9e4f897b-0199-439d-acbd-b98900448c94', + plugin: { + name: 'ory/editor/core/content/slate', + version: '0.0.1' + }, + hover: null, + size: 4, + bounds: { left: 0, right: 7 }, + resizable: true, + inline: null, + hasInlineNeighbourde: null }, - id: 'db728322-6a82-4338-81c4-adde626547a3', - plugin: { - name: 'ory/editor/core/content/slate', - version: '0.0.1' + { + levels: { left: 0, right: 0, above: 3, below: 4 }, + props: { + importFromHtml: + 'Castle Point district of Essex, full of people who have made it out of London’s tough East End to a kind of English paradise with lots of single-family homes, lawns, beaches, seaside amusement parks and fish-and-chip shops.' + }, + id: '4520496c-a98e-4b57-b06d-59d156e36451', + plugin: { + name: 'ory/editor/core/content/slate', + version: '0.0.1' + }, + hover: null, + size: 4, + bounds: { left: 7, right: 7 }, + resizable: true, + inline: null, + hasInlineNeighbourde: null }, - hover: null, - size: 4, - bounds: { left: 7, right: 0 }, - resizable: false, - inline: null, - hasInlineNeighbourde: null - } - ] - } - ] - } - ] - } + { + levels: { left: 0, right: 4, above: 3, below: 4 }, + props: { + importFromHtml: + 'The people here are fiercely English, fiercely Conservative and fiercely pro-Brexit, as the possible exit is being called, and many feel that their sovereignty and identity are being diluted by a failing European Union and an “uncontrolled” influx of foreigners.' + }, + id: 'db728322-6a82-4338-81c4-adde626547a3', + plugin: { + name: 'ory/editor/core/content/slate', + version: '0.0.1' + }, + hover: null, + size: 4, + bounds: { left: 7, right: 0 }, + resizable: false, + inline: null, + hasInlineNeighbourde: null + } + ] + } + ] + } + ] + } + ] + } + ], + config: { + whitelist: [ + 'ory/editor/core/content/missing', + 'ory/editor/core/content/image', + 'ory/editor/core/content/spacer', + 'ory/editor/core/content/slate', + 'ory/editor/core/layout/spoiler' ] } - ], - config: { - whitelist: [ - 'ory/editor/core/content/missing', - 'ory/editor/core/content/image', - 'ory/editor/core/content/spacer', - 'ory/editor/core/content/slate', - 'ory/editor/core/layout/spoiler' - ] - } - }, - { - id: '2', - cells: [ - { - levels: { left: 0, right: 0, above: 0, below: 0 }, - id: '308536be-5e6d-4483-9a5d-7ab422b5fc15', - hover: null, - size: 12, - bounds: { left: 0, right: 0 }, - resizable: false, - inline: null, - hasInlineNeighbourde: null, - rows: [ - { - levels: { left: 1, right: 1, above: 1, below: 0 }, - id: 'f394a468-a64a-479c-8318-4ef2f14433a3', - hover: null, - cells: [ - { - levels: { left: 2, right: 0, above: 2, below: 1 }, - inline: 'right', - props: { - src: - 'https://static01.nyt.com/images/2016/06/16/world/16England-web2/16England-web2-master675.jpg' - }, - id: '0fb41038-7f05-41b8-b5e5-e7cb8e7be701', - plugin: { - name: 'ory/editor/core/content/image', - version: '0.0.1' - }, - hover: null, - size: 6, - bounds: { left: 11, right: 0 }, - resizable: true - }, - { - levels: { left: 0, right: 2, above: 2, below: 1 }, - props: { - importFromHtml: - 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.' - }, - id: '2f0622c1-7546-4c2b-a8af-e9603cd67d96', - plugin: { - name: 'ory/editor/core/content/slate', - version: '0.0.1' - }, - hover: null, - size: 12, - bounds: { left: 0, right: 0 }, - resizable: false, - hasInlineNeighbourde: true - } - ] - }, - { - levels: { left: 1, right: 1, above: 0, below: 0 }, - id: 'a5608665-732a-46a8-8d49-3e33247f8ca2', - hover: null, - cells: [ - { - levels: { left: 2, right: 2, above: 1, below: 1 }, - props: { - importFromHtml: - 'Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.' - }, - id: '51877ffa-09e3-45fa-8e54-d462ac150a0e', - plugin: { - name: 'ory/editor/core/content/slate', - version: '0.0.1' - }, - hover: null, - size: 12, - bounds: { left: 0, right: 0 }, - resizable: false, - inline: null, - hasInlineNeighbourde: null - } - ] - }, - { - levels: { left: 1, right: 1, above: 0, below: 0 }, - id: 'a61e8e9e-962a-433d-ae5b-cda93c834874', - hover: null, - cells: [ - { - levels: { left: 2, right: 2, above: 1, below: 1 }, - props: { - importFromHtml: - 'Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.' - }, - id: '1935e40d-6b41-41ef-9221-ac5359938b69', - plugin: { - name: 'ory/editor/core/content/slate', - version: '0.0.1' - }, - hover: null, - size: 12, - bounds: { left: 0, right: 0 }, - resizable: false, - inline: null, - hasInlineNeighbourde: null - } - ] - }, - { - levels: { left: 1, right: 1, above: 0, below: 1 }, - id: '8781492f-91e6-46ca-b2a6-b34f2e54fac6', - hover: null, - cells: [ - { - levels: { left: 2, right: 2, above: 1, below: 2 }, - props: { - importFromHtml: - 'Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.' - }, - id: '504b9377-05c2-47cc-b218-2513ddfb569a', - plugin: { - name: 'ory/editor/core/content/slate', - version: '0.0.1' + }, + { + id: '2', + cells: [ + { + levels: { left: 0, right: 0, above: 0, below: 0 }, + id: '308536be-5e6d-4483-9a5d-7ab422b5fc15', + hover: null, + size: 12, + bounds: { left: 0, right: 0 }, + resizable: false, + inline: null, + hasInlineNeighbourde: null, + rows: [ + { + levels: { left: 1, right: 1, above: 1, below: 0 }, + id: 'f394a468-a64a-479c-8318-4ef2f14433a3', + hover: null, + cells: [ + { + levels: { left: 2, right: 0, above: 2, below: 1 }, + inline: 'right', + props: { + src: + 'https://static01.nyt.com/images/2016/06/16/world/16England-web2/16England-web2-master675.jpg' + }, + id: '0fb41038-7f05-41b8-b5e5-e7cb8e7be701', + plugin: { + name: 'ory/editor/core/content/image', + version: '0.0.1' + }, + hover: null, + size: 6, + bounds: { left: 11, right: 0 }, + resizable: true }, - hover: null, - size: 12, - bounds: { left: 0, right: 0 }, - resizable: false, - inline: null, - hasInlineNeighbourde: null - } - ] - } + { + levels: { left: 0, right: 2, above: 2, below: 1 }, + props: { + importFromHtml: + 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.' + }, + id: '2f0622c1-7546-4c2b-a8af-e9603cd67d96', + plugin: { + name: 'ory/editor/core/content/slate', + version: '0.0.1' + }, + hover: null, + size: 12, + bounds: { left: 0, right: 0 }, + resizable: false, + hasInlineNeighbourde: true + } + ] + }, + { + levels: { left: 1, right: 1, above: 0, below: 0 }, + id: 'a5608665-732a-46a8-8d49-3e33247f8ca2', + hover: null, + cells: [ + { + levels: { left: 2, right: 2, above: 1, below: 1 }, + props: { + importFromHtml: + 'Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.' + }, + id: '51877ffa-09e3-45fa-8e54-d462ac150a0e', + plugin: { + name: 'ory/editor/core/content/slate', + version: '0.0.1' + }, + hover: null, + size: 12, + bounds: { left: 0, right: 0 }, + resizable: false, + inline: null, + hasInlineNeighbourde: null + } + ] + }, + { + levels: { left: 1, right: 1, above: 0, below: 0 }, + id: 'a61e8e9e-962a-433d-ae5b-cda93c834874', + hover: null, + cells: [ + { + levels: { left: 2, right: 2, above: 1, below: 1 }, + props: { + importFromHtml: + 'Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.' + }, + id: '1935e40d-6b41-41ef-9221-ac5359938b69', + plugin: { + name: 'ory/editor/core/content/slate', + version: '0.0.1' + }, + hover: null, + size: 12, + bounds: { left: 0, right: 0 }, + resizable: false, + inline: null, + hasInlineNeighbourde: null + } + ] + }, + { + levels: { left: 1, right: 1, above: 0, below: 1 }, + id: '8781492f-91e6-46ca-b2a6-b34f2e54fac6', + hover: null, + cells: [ + { + levels: { left: 2, right: 2, above: 1, below: 2 }, + props: { + importFromHtml: + 'Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.' + }, + id: '504b9377-05c2-47cc-b218-2513ddfb569a', + plugin: { + name: 'ory/editor/core/content/slate', + version: '0.0.1' + }, + hover: null, + size: 12, + bounds: { left: 0, right: 0 }, + resizable: false, + inline: null, + hasInlineNeighbourde: null + } + ] + } + ] + } + ], + config: { + whitelist: [ + 'ory/editor/core/content/missing', + 'ory/editor/core/content/image', + 'ory/editor/core/content/spacer', + 'ory/editor/core/content/slate', + 'ory/editor/core/layout/spoiler' ] } - ], - config: { - whitelist: [ - 'ory/editor/core/content/missing', - 'ory/editor/core/content/image', - 'ory/editor/core/content/spacer', - 'ory/editor/core/content/slate', - 'ory/editor/core/layout/spoiler' - ] } - } - ] - }, - display: { previous: 'preview', mode: 'preview' } + ] + }, + display: { previous: 'preview', mode: 'preview' } + } } describe('selectors/editable/node', () => { diff --git a/packages/core/src/selector/focus.js b/packages/core/src/selector/focus.js index 9292312554..5d1eec04ee 100644 --- a/packages/core/src/selector/focus.js +++ b/packages/core/src/selector/focus.js @@ -21,4 +21,7 @@ */ // @flow -export const focus = ({ focus }: { focus: string }) => focus + +import { RootState } from '../types/state' + +export const focus = ({ ory: { focus } }: RootState) => focus diff --git a/packages/core/src/selector/index.js b/packages/core/src/selector/index.js index 8da52cc93c..dd505f750a 100644 --- a/packages/core/src/selector/index.js +++ b/packages/core/src/selector/index.js @@ -22,8 +22,9 @@ // @flow import { editable, editables } from './editable' +import { Store } from '../types/redux' -export const selectors = (store: any) => ({ +export const selectors = (store: Store) => ({ editable: (id: string) => editable(store.getState(), { id }), editables: (id: string) => editables(store.getState()) }) diff --git a/packages/core/src/selector/setting.js b/packages/core/src/selector/setting.js index 652e1b7bd1..3e0d7f527b 100644 --- a/packages/core/src/selector/setting.js +++ b/packages/core/src/selector/setting.js @@ -21,5 +21,7 @@ */ // @flow -export const getSetting = (key: string) => ({ settings }: Object) => +import { RootState } from '../types/state' + +export const getSetting = (key: string) => ({ ory: { settings } }: RootState) => settings[key] diff --git a/packages/core/src/types/editable.js b/packages/core/src/types/editable.js index a3b6f40fbe..33147761cb 100644 --- a/packages/core/src/types/editable.js +++ b/packages/core/src/types/editable.js @@ -199,4 +199,10 @@ export type EditableComponentState = { createFallbackCell(): void } +export type Editables = { + past: Editable[], + present: Editable[], + future: Editable[] +} + export type NativeFactory = (hover: any, monitor: any, component: any) => Object diff --git a/packages/core/src/types/redux.js b/packages/core/src/types/redux.js index 33403556a4..34b674f1fd 100644 --- a/packages/core/src/types/redux.js +++ b/packages/core/src/types/redux.js @@ -20,7 +20,10 @@ * */ +import { RootState } from './state' + export type Action = { type: string } export type Store = { - dispatch(action: Action): Action + dispatch(action: Action): Action, + getState(): RootState } diff --git a/packages/core/src/types/state.js b/packages/core/src/types/state.js new file mode 100644 index 0000000000..bf60a24556 --- /dev/null +++ b/packages/core/src/types/state.js @@ -0,0 +1,11 @@ +import { Editables } from './editable' +import { Display } from './display' + +export type RootState = { + ory: { + editables: Editables, + display: Display, + focus: string, + settings: { [string]: any } + } +} diff --git a/packages/plugins/content/divider/package.json b/packages/plugins/content/divider/package.json index a2ede17453..240154c40f 100644 --- a/packages/plugins/content/divider/package.json +++ b/packages/plugins/content/divider/package.json @@ -22,8 +22,7 @@ "@material-ui/core": "^1.5.1", "@material-ui/icons": "^2.0.3" }, - "dependencies": { - }, + "dependencies": {}, "publishConfig": { "access": "public" } diff --git a/packages/plugins/content/slate/src/helpers.js b/packages/plugins/content/slate/src/helpers.js index e3efcf2697..3a00a25f81 100644 --- a/packages/plugins/content/slate/src/helpers.js +++ b/packages/plugins/content/slate/src/helpers.js @@ -62,16 +62,22 @@ export const ToolbarButton = ({ onClick, disabled = false }: { - icon: string, - isActive: string, - onClick(): void, - disabled?: boolean - }) => ( - - {icon} - - ) + icon: string, + isActive: string, + onClick(): void, + disabled?: boolean +}) => ( + + {icon} + +) diff --git a/packages/plugins/content/slate/src/index.js b/packages/plugins/content/slate/src/index.js index 3281c7481b..ea66ef4a34 100644 --- a/packages/plugins/content/slate/src/index.js +++ b/packages/plugins/content/slate/src/index.js @@ -37,7 +37,10 @@ import * as hooks from './hooks' import parse5 from 'parse5' import v002 from './migrations/v002' -const createPlugins = compose(flatten, map(prop('plugins'))) +const createPlugins = compose( + flatten, + map(prop('plugins')) +) export const createInitialState = hooks.createInitialState @@ -62,10 +65,7 @@ export default (plugins: Plugin[] = hooks.defaultPlugins) => { } if (data.isShift && data.key === 'enter') { - return state - .change() - .insertText('\n') - .value + return state.change().insertText('\n').value } for (let i = 0; i < plugins.length; i++) { @@ -139,9 +139,7 @@ export default (plugins: Plugin[] = hooks.defaultPlugins) => { } setTimeout(() => { - props.state.editorState - .change() - .focus() + props.state.editorState.change().focus() }, 0) }, @@ -151,9 +149,7 @@ export default (plugins: Plugin[] = hooks.defaultPlugins) => { } props.onChange({ - editorState: props.state.editorState - .change() - .blur().value + editorState: props.state.editorState.change().blur().value }) }, diff --git a/packages/plugins/content/slate/src/plugins/code/index.js b/packages/plugins/content/slate/src/plugins/code/index.js index eb742d3ab9..59c521562e 100644 --- a/packages/plugins/content/slate/src/plugins/code/index.js +++ b/packages/plugins/content/slate/src/plugins/code/index.js @@ -46,10 +46,7 @@ export default class CodePlugin extends Plugin { e.preventDefault() onChange({ - value: editorState - .change() - .toggleMark(type) - .value + value: editorState.change().toggleMark(type).value }) } @@ -72,8 +69,7 @@ export default class CodePlugin extends Plugin { onChange({ value: editorState .change() - .setBlocks(isActive ? this.DEFAULT_NODE : type) - .value + .setBlocks(isActive ? this.DEFAULT_NODE : type).value }) } @@ -119,7 +115,9 @@ export default class CodePlugin extends Plugin { if (object.object === 'mark') { switch (object.type) { case CODE: - return {children} + return ( + {children} + ) } } else if (object.object === 'block') { switch (object.type) { @@ -138,7 +136,11 @@ export default class CodePlugin extends Plugin { switch (mark.type) { case CODE: - return {children} + return ( + + {children} + + ) } } @@ -147,7 +149,7 @@ export default class CodePlugin extends Plugin { switch (node.type) { case CODE: - return + return } } } diff --git a/packages/plugins/content/slate/src/plugins/link/index.js b/packages/plugins/content/slate/src/plugins/link/index.js index 500984a3bc..681e12b49c 100644 --- a/packages/plugins/content/slate/src/plugins/link/index.js +++ b/packages/plugins/content/slate/src/plugins/link/index.js @@ -70,10 +70,7 @@ class LinkButton extends Component { ) if (hasLinks) { - const newState = editorState - .change() - .unwrapInline(A) - .value + const newState = editorState.change().unwrapInline(A).value onChange({ value: newState }) } else if (editorState.selection.isExpanded) { this.setState({ @@ -97,10 +94,7 @@ class LinkButton extends Component { handleClose = () => { this.setState({ open: false }) - const newState = this.props.editorState - .change() - .focus() - .value + const newState = this.props.editorState.change().focus().value window.setTimeout(() => this.props.onChange({ value: newState }), 1) } @@ -120,8 +114,7 @@ class LinkButton extends Component { type: A, data: { href: this.state.href } }) - .collapseToEnd() - .value + .collapseToEnd().value window.setTimeout(() => this.props.onChange({ value: newState }), 1) window.setTimeout(() => this.props.focus(), 100) @@ -142,8 +135,7 @@ class LinkButton extends Component { data: { href: this.state.href } }) .collapseToEnd() - .focus() - .value + .focus().value this.props.onChange({ value: newState }) window.setTimeout(() => this.props.focus(), 100) @@ -158,24 +150,26 @@ class LinkButton extends Component { } render() { - const actions = - - - + const actions = ( + + + + + ) const { editorState } = this.props const hasLinks = editorState.inlines.some( @@ -271,9 +265,7 @@ export default class LinkPlugin extends Plugin { renderNode = props => { switch (props.node.type) { case A: { - return ( - - ) + return } } } diff --git a/packages/plugins/content/slate/src/plugins/lists.js b/packages/plugins/content/slate/src/plugins/lists.js index b5cb3aee5c..f77fc8ed4a 100644 --- a/packages/plugins/content/slate/src/plugins/lists.js +++ b/packages/plugins/content/slate/src/plugins/lists.js @@ -41,17 +41,15 @@ const DECREASE_INDENT = 'DECREASE_INDENT' export default class ListsPlugin extends Plugin { constructor(props: Props) { - super(props); + super(props) - this.DEFAULT_NODE = props.DEFAULT_NODE; + this.DEFAULT_NODE = props.DEFAULT_NODE this.plugin = createListPlugin({ types: [UL, OL], typeItem: LI, typeDefault: props.DEFAULT_NODE }) - this.plugins = [ - this.plugin - ] + this.plugins = [this.plugin] } props: Props @@ -76,7 +74,7 @@ export default class ListsPlugin extends Plugin { decreaseItemDepth(change) } } else { - const inList = this.plugin.utils.isSelectionInList(editorState); + const inList = this.plugin.utils.isSelectionInList(editorState) if (inList) { unwrapList(change, type) } else { @@ -87,23 +85,26 @@ export default class ListsPlugin extends Plugin { onChange({ value: change.value }) } - const inList = this.plugin.utils.isSelectionInList(editorState); - const isType = editorState.blocks.some(block => - !!editorState.document.getClosest( - block.key, - parent => parent.type === type - ) + const inList = this.plugin.utils.isSelectionInList(editorState) + const isType = editorState.blocks.some( + block => + !!editorState.document.getClosest( + block.key, + parent => parent.type === type + ) ) - const isIncreaseDecrease = type === INCREASE_INDENT || type === DECREASE_INDENT + const isIncreaseDecrease = + type === INCREASE_INDENT || type === DECREASE_INDENT - const previousItem = this.plugin.utils.getPreviousItem(editorState); - const currentItem = this.plugin.utils.getCurrentItem(editorState); - const itemDepth = this.plugin.utils.getItemDepth(editorState); + const previousItem = this.plugin.utils.getPreviousItem(editorState) + const currentItem = this.plugin.utils.getCurrentItem(editorState) + const itemDepth = this.plugin.utils.getItemDepth(editorState) const canIncreaseIndent = previousItem && currentItem && isIncreaseDecrease const canDecreaseIndent = itemDepth > 1 && currentItem && isIncreaseDecrease - const increaseDecreaseDisabled = type === INCREASE_INDENT ? !canIncreaseIndent : !canDecreaseIndent + const increaseDecreaseDisabled = + type === INCREASE_INDENT ? !canIncreaseIndent : !canDecreaseIndent return ( ), this.createButton(OL, ), this.createButton(INCREASE_INDENT, ), - this.createButton(DECREASE_INDENT, ), + this.createButton(DECREASE_INDENT, ) ] deserialize = (el, next) => { @@ -170,7 +171,7 @@ export default class ListsPlugin extends Plugin { } renderNode = props => { - const { children, attributes } = props; + const { children, attributes } = props switch (props.node.type) { case UL: return
    {children}
diff --git a/packages/plugins/layout/background/src/index.js b/packages/plugins/layout/background/src/index.js index 8fc77d65e0..8be0cdbb1e 100644 --- a/packages/plugins/layout/background/src/index.js +++ b/packages/plugins/layout/background/src/index.js @@ -402,7 +402,8 @@ class PluginComponent extends Component { backgroundImage: `linear-gradient(rgba(0, 0, 0, ${darkenFinal}), rgba(0, 0, 0, ${darkenFinal})),linear-gradient(rgba(255, 255, 255, ${lightenFinal}), rgba(255, 255, 255, ${lightenFinal}))` }} /> - {(!readOnly && + {!readOnly && ( + Date: Thu, 1 Nov 2018 11:08:58 +0100 Subject: [PATCH 2/2] Fix editable tests Signed-off-by: David Furlong --- .../core/src/reducer/editable/index.test.js | 1026 ++++++++--------- 1 file changed, 512 insertions(+), 514 deletions(-) diff --git a/packages/core/src/reducer/editable/index.test.js b/packages/core/src/reducer/editable/index.test.js index 3a009c24b5..8619791560 100644 --- a/packages/core/src/reducer/editable/index.test.js +++ b/packages/core/src/reducer/editable/index.test.js @@ -20,440 +20,438 @@ * */ -import { combineReducers, createStore } from 'redux' -import { rawEditableReducer } from './index' -import * as actions from '../../actions/cell' -import { decorate } from './helper/tree' -import { cellOrder } from './helper/order' +import { combineReducers, createStore } from "redux"; +import { rawEditableReducer } from "./index"; +import * as actions from "../../actions/cell"; +import { decorate } from "./helper/tree"; +import { cellOrder } from "./helper/order"; const walker = ({ cells = [], rows = [], hover = null, ...other }) => { if (cells.length) { - other.cells = cells.map(walker) + other.cells = cells.map(walker); } if (rows.length) { - other.rows = rows.map(walker) + other.rows = rows.map(walker); } return { ...other, hover - } -} + }; +}; -const cells = state => decorate(state).map(walker) +const cells = state => decorate(state).map(walker); const simulateDispatch = (currentState, action) => { - const reducer = combineReducers({ - ory: combineReducers({ editable: rawEditableReducer }) - }) - const store = createStore(reducer, currentState) - store.dispatch(action) + const reducer = combineReducers({ editable: rawEditableReducer }); + const store = createStore(reducer, currentState); + store.dispatch(action); - return store.getState().ory -} + return store.getState(); +}; const runCase = (currentState, action, expectedState) => { - const actualState = simulateDispatch(currentState, action) + const actualState = simulateDispatch(currentState, action); expect(actualState).toEqual({ editable: { ...expectedState.editable, cellOrder: cellOrder(expectedState.editable.cells) } - }) -} + }); +}; export const createEditable = (id, cells) => { - const editable = {} + const editable = {}; if (id) { - editable.id = id + editable.id = id; } if (cells) { - editable.cells = cells + editable.cells = cells; } - return { editable } -} + return { editable }; +}; export const createCell = (id, rows, additional) => { - const cell = {} + const cell = {}; if (id) { - cell.id = id + cell.id = id; } if (rows) { - cell.rows = rows + cell.rows = rows; } return { ...cell, ...additional - } -} + }; +}; export const createLayoutCell = (id, name, state, rows, additional) => { - const cell = createCell(id, null, additional) - const layout = {} + const cell = createCell(id, null, additional); + const layout = {}; if (name) { - layout.plugin = {} - layout.plugin.name = name + layout.plugin = {}; + layout.plugin.name = name; } if (state) { - layout.state = state + layout.state = state; } if (rows) { - cell.rows = rows + cell.rows = rows; } return { ...cell, layout - } -} + }; +}; export const createContentCell = (id, name, state, additional) => { - const cell = createCell(id, null, additional) - const content = {} + const cell = createCell(id, null, additional); + const content = {}; if (name) { - content.plugin = {} - content.plugin.name = name + content.plugin = {}; + content.plugin.name = name; } if (state) { - content.state = state + content.state = state; } return { ...cell, content - } -} + }; +}; export const createRow = (id, cells, additional = {}) => { - const row = {} + const row = {}; if (id) { - row.id = id + row.id = id; } if (cells) { - row.cells = cells + row.cells = cells; } return { hasInlineChildren: false, ...row, ...additional - } -} - -test('basic', () => { - const currentState = createEditable('editable') - const action = { type: 'foo' } - const expectedState = createEditable('editable', []) - - runCase(currentState, action, expectedState) -}) - -test('cleanup does not remove layout nodes when having one child, nested', () => { - const currentState = createEditable('editable', [ - createCell('0', [ - createRow('00', [ - createCell('000', [ - createRow('0000', [ - createLayoutCell('layout', 'layout', null, [ - createRow('00000', [createContentCell('000000', 'foo')]) + }; +}; + +test("basic", () => { + const currentState = createEditable("editable"); + const action = { type: "foo" }; + const expectedState = createEditable("editable", []); + + runCase(currentState, action, expectedState); +}); + +test("cleanup does not remove layout nodes when having one child, nested", () => { + const currentState = createEditable("editable", [ + createCell("0", [ + createRow("00", [ + createCell("000", [ + createRow("0000", [ + createLayoutCell("layout", "layout", null, [ + createRow("00000", [createContentCell("000000", "foo")]) ]) ]) ]) ]) ]) - ]) + ]); - const action = { type: 'foo' } + const action = { type: "foo" }; const expectedState = createEditable( - 'editable', + "editable", cells([ - createCell('0', [ - createRow('00', [ - createLayoutCell('layout', 'layout', null, [ - createRow('00000', [createContentCell('000000', 'foo')]) + createCell("0", [ + createRow("00", [ + createLayoutCell("layout", "layout", null, [ + createRow("00000", [createContentCell("000000", "foo")]) ]) ]) ]) ]) - ) + ); - runCase(currentState, action, expectedState) -}) + runCase(currentState, action, expectedState); +}); -test('cleanup does not remove layout nodes when having multiple cells in one row, nested', () => { - const currentState = createEditable('editable', [ - createCell('0', [ - createRow('00', [ - createCell('000', [ - createRow('0000', [ - createLayoutCell('layout', 'layout', null, [ - createRow('00000', [createContentCell('000000', 'foo', null)]), - createRow('00001', [createContentCell('000010', 'bar', null)]) +test("cleanup does not remove layout nodes when having multiple cells in one row, nested", () => { + const currentState = createEditable("editable", [ + createCell("0", [ + createRow("00", [ + createCell("000", [ + createRow("0000", [ + createLayoutCell("layout", "layout", null, [ + createRow("00000", [createContentCell("000000", "foo", null)]), + createRow("00001", [createContentCell("000010", "bar", null)]) ]) ]) ]) ]) ]) - ]) + ]); - const action = { type: 'foo' } + const action = { type: "foo" }; const expectedState = createEditable( - 'editable', + "editable", cells([ - createCell('0', [ - createRow('00', [ - createLayoutCell('layout', 'layout', null, [ - createRow('00000', [createContentCell('000000', 'foo', null)]), - createRow('00001', [createContentCell('000010', 'bar', null)]) + createCell("0", [ + createRow("00", [ + createLayoutCell("layout", "layout", null, [ + createRow("00000", [createContentCell("000000", "foo", null)]), + createRow("00001", [createContentCell("000010", "bar", null)]) ]) ]) ]) ]) - ) + ); - runCase(currentState, action, expectedState) -}) + runCase(currentState, action, expectedState); +}); -test('cell update content', () => { - const currentState = createEditable('editable', [ - createContentCell('0', 'foo', { foo: 1 }) - ]) +test("cell update content", () => { + const currentState = createEditable("editable", [ + createContentCell("0", "foo", { foo: 1 }) + ]); - const action = actions.updateCellContent('0')({ bar: 1 }) + const action = actions.updateCellContent("0")({ bar: 1 }); const expectedState = createEditable( - 'editable', - cells([createContentCell('0', 'foo', { bar: 1, foo: 1 })]) - ) + "editable", + cells([createContentCell("0", "foo", { bar: 1, foo: 1 })]) + ); - runCase(currentState, action, expectedState) -}) + runCase(currentState, action, expectedState); +}); -test('cell update layout', () => { - const currentState = createEditable('editable', [ - createLayoutCell('0', 'foo', { foo: 1 }, [ - createRow('2', [createContentCell('1', 'bar')]) +test("cell update layout", () => { + const currentState = createEditable("editable", [ + createLayoutCell("0", "foo", { foo: 1 }, [ + createRow("2", [createContentCell("1", "bar")]) ]) - ]) + ]); - const action = actions.updateCellLayout('0')({ bar: 1 }) + const action = actions.updateCellLayout("0")({ bar: 1 }); const expectedState = createEditable( - 'editable', + "editable", cells([ - createLayoutCell('0', 'foo', { foo: 1, bar: 1 }, [ - createRow('2', [createContentCell('1', 'bar')]) + createLayoutCell("0", "foo", { foo: 1, bar: 1 }, [ + createRow("2", [createContentCell("1", "bar")]) ]) ]) - ) + ); - runCase(currentState, action, expectedState) -}) + runCase(currentState, action, expectedState); +}); -test('cell remove', () => { - const currentState = createEditable('editable', [ - createContentCell('0', 'foo'), - createContentCell('1', 'bar') - ]) +test("cell remove", () => { + const currentState = createEditable("editable", [ + createContentCell("0", "foo"), + createContentCell("1", "bar") + ]); - const action = actions.removeCell('0') + const action = actions.removeCell("0"); const expectedState = createEditable( - 'editable', - cells([createContentCell('1', 'bar')]) - ) + "editable", + cells([createContentCell("1", "bar")]) + ); - runCase(currentState, action, expectedState) -}) + runCase(currentState, action, expectedState); +}); -test('last cell remove', () => { - const currentState = createEditable('editable', [ - createContentCell('0', 'foo') - ]) +test("last cell remove", () => { + const currentState = createEditable("editable", [ + createContentCell("0", "foo") + ]); - const action = actions.removeCell('0', ['1']) + const action = actions.removeCell("0", ["1"]); - const actualState = simulateDispatch(currentState, action) + const actualState = simulateDispatch(currentState, action); - expect(actualState.editable.cells.length).toEqual(0) -}) + expect(actualState.editable.cells.length).toEqual(0); +}); -test('cell cancel drag', () => { - const currentState = createEditable('editable', [ - createContentCell('0', 'foo', null, { hover: true }) - ]) +test("cell cancel drag", () => { + const currentState = createEditable("editable", [ + createContentCell("0", "foo", null, { hover: true }) + ]); - const action = actions.cancelCellDrag('0') + const action = actions.cancelCellDrag("0"); const expectedState = createEditable( - 'editable', - cells([createContentCell('0', 'foo')]) - ) - - runCase(currentState, action, expectedState) -}) - -test('cell resize', () => { - const currentState = createEditable('editable', [ - createCell('0', [ - createRow('00', [ - createContentCell('000', 'foo', null, { size: 6 }), - createContentCell('001', 'bar', null, { size: 6 }) + "editable", + cells([createContentCell("0", "foo")]) + ); + + runCase(currentState, action, expectedState); +}); + +test("cell resize", () => { + const currentState = createEditable("editable", [ + createCell("0", [ + createRow("00", [ + createContentCell("000", "foo", null, { size: 6 }), + createContentCell("001", "bar", null, { size: 6 }) ]) ]) - ]) + ]); - const action = actions.resizeCell('000')(4) + const action = actions.resizeCell("000")(4); const expectedState = createEditable( - 'editable', + "editable", cells([ - createCell('0', [ - createRow('00', [ - createContentCell('000', 'foo', null, { size: 4 }), - createContentCell('001', 'bar', null, { size: 8 }) + createCell("0", [ + createRow("00", [ + createContentCell("000", "foo", null, { size: 4 }), + createContentCell("001", "bar", null, { size: 8 }) ]) ]) ]) - ) + ); - runCase(currentState, action, expectedState) -}) + runCase(currentState, action, expectedState); +}); -test('cell resize inline cell (1)', () => { - const currentState = createEditable('editable', [ - createCell('0', [ - createRow('00', [ - createContentCell('000', 'foo', null, { inline: 'left' }), - createContentCell('001', 'bar', null) +test("cell resize inline cell (1)", () => { + const currentState = createEditable("editable", [ + createCell("0", [ + createRow("00", [ + createContentCell("000", "foo", null, { inline: "left" }), + createContentCell("001", "bar", null) ]) ]) - ]) + ]); - const action = actions.resizeCell('000')(4) + const action = actions.resizeCell("000")(4); const expectedState = createEditable( - 'editable', + "editable", cells([ - createCell('0', [ + createCell("0", [ createRow( - '00', + "00", [ - createContentCell('000', 'foo', null, { inline: 'left', size: 4 }), - createContentCell('001', 'bar', null, { size: 12 }) + createContentCell("000", "foo", null, { inline: "left", size: 4 }), + createContentCell("001", "bar", null, { size: 12 }) ], { hasInlineChildren: true } ) ]) ]) - ) + ); - runCase(currentState, action, expectedState) -}) + runCase(currentState, action, expectedState); +}); -test('cell hover real row', () => { - const currentState = createEditable('editable', [ - createCell('0', [ - createRow('00', [createContentCell('000', 'foo')]), - createRow('01', [createContentCell('010', 'bar')]) +test("cell hover real row", () => { + const currentState = createEditable("editable", [ + createCell("0", [ + createRow("00", [createContentCell("000", "foo")]), + createRow("01", [createContentCell("010", "bar")]) ]) - ]) + ]); - const action = actions.cellHoverLeftOf({ id: 'foo' }, { id: '00' }, 0) + const action = actions.cellHoverLeftOf({ id: "foo" }, { id: "00" }, 0); const expectedState = createEditable( - 'editable', + "editable", cells([ - createCell('0', [ - createRow('00', [createContentCell('000', 'foo')], { - hover: 'left-of' + createCell("0", [ + createRow("00", [createContentCell("000", "foo")], { + hover: "left-of" }), - createRow('01', [createContentCell('010', 'bar')]) + createRow("01", [createContentCell("010", "bar")]) ]) ]) - ) + ); - runCase(currentState, action, expectedState) -}) + runCase(currentState, action, expectedState); +}); -test('cell hover row', () => { - const currentState = createEditable('editable', [ - createCell('0', [ - createRow('00', [createContentCell('000', 'foo')]), - createRow('01', [createContentCell('010', 'bar')]) +test("cell hover row", () => { + const currentState = createEditable("editable", [ + createCell("0", [ + createRow("00", [createContentCell("000", "foo")]), + createRow("01", [createContentCell("010", "bar")]) ]) - ]) + ]); - const action = actions.cellHoverLeftOf({ id: 'foo' }, { id: '000' }, 1) + const action = actions.cellHoverLeftOf({ id: "foo" }, { id: "000" }, 1); const expectedState = createEditable( - 'editable', + "editable", cells([ - createCell('0', [ - createRow('00', [createContentCell('000', 'foo')], { - hover: 'left-of' + createCell("0", [ + createRow("00", [createContentCell("000", "foo")], { + hover: "left-of" }), - createRow('01', [createContentCell('010', 'bar')]) + createRow("01", [createContentCell("010", "bar")]) ]) ]) - ) + ); - runCase(currentState, action, expectedState) -}) + runCase(currentState, action, expectedState); +}); -test('cell hover ancestor cell', () => { - const currentState = createEditable('editable', [ - createCell('0', [ - createRow('00', [createContentCell('000', 'foo')]), - createRow('01', [createContentCell('010', 'bar')]) +test("cell hover ancestor cell", () => { + const currentState = createEditable("editable", [ + createCell("0", [ + createRow("00", [createContentCell("000", "foo")]), + createRow("01", [createContentCell("010", "bar")]) ]) - ]) + ]); - const action = actions.cellHoverRightOf({ id: 'foo' }, { id: '000' }, 2) + const action = actions.cellHoverRightOf({ id: "foo" }, { id: "000" }, 2); const expectedState = createEditable( - 'editable', + "editable", cells([ createCell( - '0', + "0", [ - createRow('00', [createContentCell('000', 'foo')]), - createRow('01', [createContentCell('010', 'bar')]) + createRow("00", [createContentCell("000", "foo")]), + createRow("01", [createContentCell("010", "bar")]) ], - { hover: 'right-of' } + { hover: "right-of" } ) ]) - ) - - runCase(currentState, action, expectedState) -}) - -test('insert cell right of, clean up tree afterwards', () => { - const currentState = createEditable('editable', [ - createCell('0', [ - createRow('00', [ - createCell('000', [ - createRow('0000', [ - createCell('00000', [ - createRow('000000', [ - createCell('000000', [ - createRow('0000000', [createContentCell('00000000', 'foo')]), - createRow('0000001', [createContentCell('00000010', 'bar')]) + ); + + runCase(currentState, action, expectedState); +}); + +test("insert cell right of, clean up tree afterwards", () => { + const currentState = createEditable("editable", [ + createCell("0", [ + createRow("00", [ + createCell("000", [ + createRow("0000", [ + createCell("00000", [ + createRow("000000", [ + createCell("000000", [ + createRow("0000000", [createContentCell("00000000", "foo")]), + createRow("0000001", [createContentCell("00000010", "bar")]) ]) ]) ]) @@ -461,42 +459,42 @@ test('insert cell right of, clean up tree afterwards', () => { ]) ]) ]) - ]) + ]); const action = actions.insertCellRightOf( - createContentCell('i', 'insert'), - { id: '00000000' }, + createContentCell("i", "insert"), + { id: "00000000" }, 0, - ['i0', 'i00', 'i000', 'i0000', 'i00000'] - ) + ["i0", "i00", "i000", "i0000", "i00000"] + ); const expectedState = createEditable( - 'editable', + "editable", cells([ - createCell('0', [ - createRow('0000000', [ - createContentCell('i0', 'foo'), - createContentCell('i00', 'insert') + createCell("0", [ + createRow("0000000", [ + createContentCell("i0", "foo"), + createContentCell("i00", "insert") ]), - createRow('0000001', [createContentCell('00000010', 'bar')]) + createRow("0000001", [createContentCell("00000010", "bar")]) ]) ]) - ) - - runCase(currentState, action, expectedState) -}) - -test('anti-recursion test: cell insert below of two level', () => { - const currentState = createEditable('editable', [ - createCell('0', [ - createRow('00', [ - createCell('000', [ - createRow('0000', [ - createCell('00000', [ - createRow('000000', [ - createCell('000000', [ - createRow('0000000', [createContentCell('00000000', 'foo')]), - createRow('0000001', [createContentCell('00000010', 'bar')]) + ); + + runCase(currentState, action, expectedState); +}); + +test("anti-recursion test: cell insert below of two level", () => { + const currentState = createEditable("editable", [ + createCell("0", [ + createRow("00", [ + createCell("000", [ + createRow("0000", [ + createCell("00000", [ + createRow("000000", [ + createCell("000000", [ + createRow("0000000", [createContentCell("00000000", "foo")]), + createRow("0000001", [createContentCell("00000010", "bar")]) ]) ]) ]) @@ -504,463 +502,463 @@ test('anti-recursion test: cell insert below of two level', () => { ]) ]) ]) - ]) + ]); const action = actions.insertCellBelow( - createContentCell('i', 'insert'), - { id: '00000000' }, + createContentCell("i", "insert"), + { id: "00000000" }, 2, - ['i0', 'i00', 'i000', 'i0000', 'i00000'] - ) + ["i0", "i00", "i000", "i0000", "i00000"] + ); const expectedState = createEditable( - 'editable', + "editable", cells([ createCell( - 'i0', + "i0", [ - createRow('0000000', [createContentCell('00000000', 'foo')]), - createRow('0000001', [createContentCell('00000010', 'bar')]), - createRow('i0000', [createContentCell('i00000', 'insert')], { + createRow("0000000", [createContentCell("00000000", "foo")]), + createRow("0000001", [createContentCell("00000010", "bar")]), + createRow("i0000", [createContentCell("i00000", "insert")], { hasInlineChildren: false }) ], { - focusSource: '', + focusSource: "", focused: false } ) ]) - ) + ); - runCase(currentState, action, expectedState) -}) + runCase(currentState, action, expectedState); +}); -test('cell insert right of cell', () => { - const currentState = createEditable('editable', [ - createCell('0', [ - createRow('00', [createContentCell('000', 'foo')]), - createRow('01', [createContentCell('010', 'bar')]) +test("cell insert right of cell", () => { + const currentState = createEditable("editable", [ + createCell("0", [ + createRow("00", [createContentCell("000", "foo")]), + createRow("01", [createContentCell("010", "bar")]) ]) - ]) + ]); const action = actions.insertCellRightOf( - createContentCell('i', 'insert'), - { id: '000' }, + createContentCell("i", "insert"), + { id: "000" }, 0, - ['i0', 'i00', 'i000', 'i0000', 'i00000'] - ) + ["i0", "i00", "i000", "i0000", "i00000"] + ); const expectedState = createEditable( - 'editable', + "editable", cells([ - createCell('0', [ - createRow('00', [ - createContentCell('i0', 'foo'), - createContentCell('i00', 'insert') + createCell("0", [ + createRow("00", [ + createContentCell("i0", "foo"), + createContentCell("i00", "insert") ]), - createRow('01', [createContentCell('010', 'bar')]) + createRow("01", [createContentCell("010", "bar")]) ]) ]) - ) + ); - runCase(currentState, action, expectedState) -}) + runCase(currentState, action, expectedState); +}); -test('cell insert below of cell - one level deep (row)', () => { - const currentState = createEditable('editable', [ - createCell('0', [ - createRow('00', [createContentCell('000', 'foo')]), - createRow('01', [createContentCell('010', 'bar')]) +test("cell insert below of cell - one level deep (row)", () => { + const currentState = createEditable("editable", [ + createCell("0", [ + createRow("00", [createContentCell("000", "foo")]), + createRow("01", [createContentCell("010", "bar")]) ]) - ]) + ]); const action = actions.insertCellBelow( - createContentCell('i', 'insert'), - { id: '000' }, + createContentCell("i", "insert"), + { id: "000" }, 1, - ['i0', 'i00', 'i000', 'i0000', 'i00000'] - ) + ["i0", "i00", "i000", "i0000", "i00000"] + ); const expectedState = createEditable( - 'editable', + "editable", cells([ - createCell('0', [ - createRow('i0', [createContentCell('000', 'foo')]), - createRow('i00', [createContentCell('i000', 'insert')], { + createCell("0", [ + createRow("i0", [createContentCell("000", "foo")]), + createRow("i00", [createContentCell("i000", "insert")], { hasInlineChildren: false }), - createRow('01', [createContentCell('010', 'bar')]) + createRow("01", [createContentCell("010", "bar")]) ]) ]) - ) + ); - runCase(currentState, action, expectedState) -}) + runCase(currentState, action, expectedState); +}); -test('cell insert left of cell - one level deep (row)', () => { - const currentState = createEditable('editable', [ - createCell('0', [ - createRow('00', [createContentCell('000', 'foo')]), - createRow('01', [createContentCell('010', 'bar')]) +test("cell insert left of cell - one level deep (row)", () => { + const currentState = createEditable("editable", [ + createCell("0", [ + createRow("00", [createContentCell("000", "foo")]), + createRow("01", [createContentCell("010", "bar")]) ]) - ]) + ]); const action = actions.insertCellLeftOf( - createContentCell('i', 'insert'), - { id: '000' }, + createContentCell("i", "insert"), + { id: "000" }, 1, - ['i0', 'i00', 'i000', 'i0000', 'i00000'] - ) + ["i0", "i00", "i000", "i0000", "i00000"] + ); const expectedState = createEditable( - 'editable', + "editable", cells([ - createCell('0', [ - createRow('00', [ - createContentCell('i0', 'insert'), - createContentCell('000', 'foo') + createCell("0", [ + createRow("00", [ + createContentCell("i0", "insert"), + createContentCell("000", "foo") ]), - createRow('01', [createContentCell('010', 'bar')]) + createRow("01", [createContentCell("010", "bar")]) ]) ]) - ) + ); - runCase(currentState, action, expectedState) -}) + runCase(currentState, action, expectedState); +}); -test('cell insert left of cell', () => { - const currentState = createEditable('editable', [ - createCell('0', [ - createRow('00', [createContentCell('000', 'foo')]), - createRow('01', [createContentCell('010', 'bar')]) +test("cell insert left of cell", () => { + const currentState = createEditable("editable", [ + createCell("0", [ + createRow("00", [createContentCell("000", "foo")]), + createRow("01", [createContentCell("010", "bar")]) ]) - ]) + ]); const action = actions.insertCellLeftOf( - createContentCell('i', 'insert'), - { id: '000' }, + createContentCell("i", "insert"), + { id: "000" }, 0, - ['i0', 'i00', 'i000', 'i0000', 'i00000'] - ) + ["i0", "i00", "i000", "i0000", "i00000"] + ); const expectedState = createEditable( - 'editable', + "editable", cells([ - createCell('0', [ - createRow('00', [ - createContentCell('i0', 'insert'), - createContentCell('i00', 'foo') + createCell("0", [ + createRow("00", [ + createContentCell("i0", "insert"), + createContentCell("i00", "foo") ]), - createRow('01', [createContentCell('010', 'bar')]) + createRow("01", [createContentCell("010", "bar")]) ]) ]) - ) + ); - runCase(currentState, action, expectedState) -}) + runCase(currentState, action, expectedState); +}); -test('cell insert above cell', () => { - const currentState = createEditable('editable', [ - createCell('0', [ - createRow('00', [createContentCell('000', 'foo')]), - createRow('01', [createContentCell('010', 'bar')]) +test("cell insert above cell", () => { + const currentState = createEditable("editable", [ + createCell("0", [ + createRow("00", [createContentCell("000", "foo")]), + createRow("01", [createContentCell("010", "bar")]) ]) - ]) + ]); const action = actions.insertCellAbove( - createContentCell('i', 'insert'), - { id: '000' }, + createContentCell("i", "insert"), + { id: "000" }, 0, - ['i0', 'i00', 'i000', 'i0000', 'i00000'] - ) + ["i0", "i00", "i000", "i0000", "i00000"] + ); const expectedState = createEditable( - 'editable', + "editable", cells([ - createCell('0', [ - createRow('i00', [createContentCell('i000', 'insert')], { + createCell("0", [ + createRow("i00", [createContentCell("i000", "insert")], { hasInlineChildren: false }), - createRow('i0000', [createContentCell('i00000', 'foo')], { + createRow("i0000", [createContentCell("i00000", "foo")], { hasInlineChildren: false }), - createRow('01', [createContentCell('010', 'bar')]) + createRow("01", [createContentCell("010", "bar")]) ]) ]) - ) + ); - runCase(currentState, action, expectedState) -}) + runCase(currentState, action, expectedState); +}); -test('cell insert below cell', () => { - const currentState = createEditable('editable', [ - createCell('0', [ - createRow('00', [createContentCell('000', 'foo')]), - createRow('01', [createContentCell('010', 'bar')]) +test("cell insert below cell", () => { + const currentState = createEditable("editable", [ + createCell("0", [ + createRow("00", [createContentCell("000", "foo")]), + createRow("01", [createContentCell("010", "bar")]) ]) - ]) + ]); const action = actions.insertCellBelow( - createContentCell('i', 'insert'), - { id: '000' }, + createContentCell("i", "insert"), + { id: "000" }, 0, - ['i0', 'i00', 'i000', 'i0000', 'i00000'] - ) + ["i0", "i00", "i000", "i0000", "i00000"] + ); const expectedState = createEditable( - 'editable', + "editable", cells([ - createCell('0', [ - createRow('i00', [createContentCell('i000', 'foo')], { + createCell("0", [ + createRow("i00", [createContentCell("i000", "foo")], { hasInlineChildren: false }), - createRow('i0000', [createContentCell('i00000', 'insert')], { + createRow("i0000", [createContentCell("i00000", "insert")], { hasInlineChildren: false }), - createRow('01', [createContentCell('010', 'bar')]) + createRow("01", [createContentCell("010", "bar")]) ]) ]) - ) + ); - runCase(currentState, action, expectedState) -}) + runCase(currentState, action, expectedState); +}); -test('cell move below another cell', () => { - const currentState = createEditable('editable', [ - createCell('0', [ - createRow('00', [createContentCell('000', 'foo')]), - createRow('01', [createContentCell('010', 'bar')]) +test("cell move below another cell", () => { + const currentState = createEditable("editable", [ + createCell("0", [ + createRow("00", [createContentCell("000", "foo")]), + createRow("01", [createContentCell("010", "bar")]) ]) - ]) + ]); const action = actions.insertCellBelow( - createContentCell('000', 'foo'), - { id: '010' }, + createContentCell("000", "foo"), + { id: "010" }, 0, - ['i0', 'i00', 'i000', 'i0000', 'i00000'] - ) + ["i0", "i00", "i000", "i0000", "i00000"] + ); const expectedState = createEditable( - 'editable', + "editable", cells([ - createCell('0', [ - createRow('i00', [createContentCell('i000', 'bar')], { + createCell("0", [ + createRow("i00", [createContentCell("i000", "bar")], { hasInlineChildren: false }), - createRow('i0000', [createContentCell('i00000', 'foo')], { + createRow("i0000", [createContentCell("i00000", "foo")], { hasInlineChildren: false }) ]) ]) - ) + ); - runCase(currentState, action, expectedState) -}) + runCase(currentState, action, expectedState); +}); -test('cell insert inline cell left of', () => { - const currentState = createEditable('editable', [ - createCell('0', [ - createRow('00', [ - createContentCell('000', 'foo'), - createContentCell('001', 'bar') +test("cell insert inline cell left of", () => { + const currentState = createEditable("editable", [ + createCell("0", [ + createRow("00", [ + createContentCell("000", "foo"), + createContentCell("001", "bar") ]) ]) - ]) + ]); const action = actions.insertCellLeftInline( - createContentCell('i', 'insert'), - { id: '000' }, + createContentCell("i", "insert"), + { id: "000" }, 0, - ['i0', 'i00', 'i000', 'i0000', 'i00000'] - ) + ["i0", "i00", "i000", "i0000", "i00000"] + ); const expectedState = createEditable( - 'editable', + "editable", cells([ - createCell('0', [ - createRow('00', [ + createCell("0", [ + createRow("00", [ createCell( - 'i0', + "i0", [ createRow( - 'i00', + "i00", [ - createContentCell('i000', 'insert', null, { inline: 'left' }), - createContentCell('i0000', 'foo', null, { inline: null }) + createContentCell("i000", "insert", null, { inline: "left" }), + createContentCell("i0000", "foo", null, { inline: null }) // FIXME: the row with id i00 has inline children! ], { hasInlineChildren: true } ) ], { - focusSource: '', + focusSource: "", focused: false } ), - createContentCell('001', 'bar') + createContentCell("001", "bar") ]) ]) ]) - ) + ); - runCase(currentState, action, expectedState) -}) + runCase(currentState, action, expectedState); +}); -test('move inline cell from left to right', () => { - const currentState = createEditable('editable', [ - createCell('0', [ - createRow('00', [ - createContentCell('000', 'foo', null, { inline: 'left' }), - createContentCell('001', 'bar', null) +test("move inline cell from left to right", () => { + const currentState = createEditable("editable", [ + createCell("0", [ + createRow("00", [ + createContentCell("000", "foo", null, { inline: "left" }), + createContentCell("001", "bar", null) ]) ]) - ]) + ]); const action = actions.insertCellRightInline( - createContentCell('000', 'foo', null, { inline: 'left' }), - { id: '001' }, + createContentCell("000", "foo", null, { inline: "left" }), + { id: "001" }, 0, - ['i0', 'i00', 'i000', 'i0000', 'i00000'] - ) + ["i0", "i00", "i000", "i0000", "i00000"] + ); const expectedState = createEditable( - 'editable', + "editable", cells([ - createCell('0', [ + createCell("0", [ createRow( - 'i00', + "i00", [ - createContentCell('i000', 'foo', null, { inline: 'right' }), - createContentCell('i0000', 'bar', null, { inline: null }) + createContentCell("i000", "foo", null, { inline: "right" }), + createContentCell("i0000", "bar", null, { inline: null }) ], { hasInlineChildren: true } ) ]) ]) - ) + ); - runCase(currentState, action, expectedState) -}) + runCase(currentState, action, expectedState); +}); -test('cell insert cell left of inline row', () => { - const currentState = createEditable('editable', [ - createCell('0', [ - createRow('00', [ - createContentCell('000', 'foo', null, { inline: 'left' }), - createContentCell('001', 'bar', null) +test("cell insert cell left of inline row", () => { + const currentState = createEditable("editable", [ + createCell("0", [ + createRow("00", [ + createContentCell("000", "foo", null, { inline: "left" }), + createContentCell("001", "bar", null) ]) ]) - ]) + ]); const action = actions.insertCellLeftOf( - createContentCell('i', 'insert'), - { id: '000' }, + createContentCell("i", "insert"), + { id: "000" }, 2, - ['i0', 'i00', 'i000', 'i0000', 'i00000'] - ) + ["i0", "i00", "i000", "i0000", "i00000"] + ); const expectedState = createEditable( - 'editable', + "editable", cells([ - createContentCell('i0', 'insert', null, { size: 6 }), - createCell('i00', [ + createContentCell("i0", "insert", null, { size: 6 }), + createCell("i00", [ createRow( - '00', + "00", [ - createContentCell('000', 'foo', null, { inline: 'left' }), - createContentCell('001', 'bar', null) + createContentCell("000", "foo", null, { inline: "left" }), + createContentCell("001", "bar", null) ], { hasInlineChildren: true } ) ]) ]) - ) + ); - runCase(currentState, action, expectedState) -}) + runCase(currentState, action, expectedState); +}); -test('cell insert below inline row', () => { - const currentState = createEditable('editable', [ - createCell('0', [ - createRow('00', [ - createContentCell('000', 'foo', null, { inline: 'left' }), - createContentCell('001', 'bar', null) +test("cell insert below inline row", () => { + const currentState = createEditable("editable", [ + createCell("0", [ + createRow("00", [ + createContentCell("000", "foo", null, { inline: "left" }), + createContentCell("001", "bar", null) ]) ]) - ]) + ]); const action = actions.insertCellBelow( - createContentCell('i', 'insert'), - { id: '000' }, + createContentCell("i", "insert"), + { id: "000" }, 1, - ['i0', 'i00', 'i000', 'i0000', 'i00000'] - ) + ["i0", "i00", "i000", "i0000", "i00000"] + ); const expectedState = createEditable( - 'editable', + "editable", cells([ - createCell('0', [ + createCell("0", [ createRow( - 'i0', + "i0", [ - createContentCell('000', 'foo', null, { inline: 'left' }), - createContentCell('001', 'bar', null) + createContentCell("000", "foo", null, { inline: "left" }), + createContentCell("001", "bar", null) ], { hasInlineChildren: true } ), - createRow('i00', [ - createContentCell('i000', 'insert', null, { size: 6 }) + createRow("i00", [ + createContentCell("i000", "insert", null, { size: 6 }) ]) ]) ]) - ) + ); - runCase(currentState, action, expectedState) -}) + runCase(currentState, action, expectedState); +}); -test('cell insert below inline row - 2 level', () => { - const currentState = createEditable('editable', [ - createCell('0', [ - createRow('00', [ - createContentCell('000', 'foo', null, { inline: 'left' }), - createContentCell('001', 'bar', null) +test("cell insert below inline row - 2 level", () => { + const currentState = createEditable("editable", [ + createCell("0", [ + createRow("00", [ + createContentCell("000", "foo", null, { inline: "left" }), + createContentCell("001", "bar", null) ]) ]) - ]) + ]); const action = actions.insertCellBelow( - createContentCell('i', 'insert'), - { id: '000' }, + createContentCell("i", "insert"), + { id: "000" }, 2, - ['i0', 'i00', 'i000', 'i0000', 'i00000'] - ) + ["i0", "i00", "i000", "i0000", "i00000"] + ); const expectedState = createEditable( - 'editable', + "editable", cells([ createCell( - 'i0', + "i0", [ createRow( - '00', + "00", [ - createContentCell('000', 'foo', null, { inline: 'left' }), - createContentCell('001', 'bar', null) + createContentCell("000", "foo", null, { inline: "left" }), + createContentCell("001", "bar", null) ], { hasInlineChildren: true } ), - createRow('i0000', [ - createContentCell('i00000', 'insert', null, { size: 6 }) + createRow("i0000", [ + createContentCell("i00000", "insert", null, { size: 6 }) ]) ], { - focusSource: '', + focusSource: "", focused: false } ) ]) - ) + ); - runCase(currentState, action, expectedState) -}) + runCase(currentState, action, expectedState); +});