How to use @edtr-io/store - 10 common examples
To help you get started, we’ve selected a few @edtr-io/store examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
edtr-io / edtr-io / packages / plugins / rows / src / editor / render.tsx View on Github 
if (index - 1 < 0) return
const current = getDocument(row.id)(store.getState())
let previous = getDocument(rows[index - 1].id)(store.getState())
if (!previous || !current) return
if (previous.plugin !== current.plugin) {
// check if previous focus plugin is the same type
const root = getFocusTree()(store.getState())
if (!root) return
const previousFocusId = findPreviousNode(root, row.id)
if (!previousFocusId) return
previous = getDocument(previousFocusId)(store.getState())
if (!previous || previous.plugin !== current.plugin) return
const merged = merge(previous.state)
dispatch(
change({
id: previousFocusId,
state: { initial: () => merged }
})
)
rows.remove(index)
} else {
merge(previous.state)
setTimeout(() => rows.remove(index - 1))
}
},
mergeWithNext: (merge: (statePrevious: unknown) => unknown) => {mergeWithNext: (merge: (statePrevious: unknown) => unknown) => {
if (index + 1 === rows.length) return
const current = getDocument(row.id)(store.getState())
let next = getDocument(rows[index + 1].id)(store.getState())
if (!next || !current) return
if (next.plugin !== current.plugin) {
// check if next focus plugin is the same type
const root = getFocusTree()(store.getState())
if (!root) return
const nextFocusId = findNextNode(root, row.id)
if (!nextFocusId) return
// use that plugin for merge
next = getDocument(nextFocusId)(store.getState())
if (!next || next.plugin !== current.plugin) return
}
merge(next.state)
setTimeout(() => {
rows.remove(index + 1)
})
}
}mergeWithNext: (merge: (statePrevious: unknown) => unknown) => {
if (index + 1 === rows.length) return
const current = getDocument(row.id)(store.getState())
let next = getDocument(rows[index + 1].id)(store.getState())
if (!next || !current) return
if (next.plugin !== current.plugin) {
// check if next focus plugin is the same type
const root = getFocusTree()(store.getState())
if (!root) return
const nextFocusId = findNextNode(root, row.id)
if (!nextFocusId) return
// use that plugin for merge
next = getDocument(nextFocusId)(store.getState())
if (!next || next.plugin !== current.plugin) return
}
merge(next.state)
setTimeout(() => {mergeWithNext: (merge: (statePrevious: unknown) => unknown) => {
if (index + 1 === rows.length) return
const current = getDocument(row.id)(store.getState())
let next = getDocument(rows[index + 1].id)(store.getState())
if (!next || !current) return
if (next.plugin !== current.plugin) {
// check if next focus plugin is the same type
const root = getFocusTree()(store.getState())
if (!root) return
const nextFocusId = findNextNode(root, row.id)
if (!nextFocusId) return
// use that plugin for merge
next = getDocument(nextFocusId)(store.getState())
if (!next || next.plugin !== current.plugin) return
}
merge(next.state)
setTimeout(() => {
rows.remove(index + 1)
})
},
renderSettings(children: React.ReactNode, { close }: { close(): void }) {if (index - 1 < 0) return
const current = getDocument(row.id)(store.getState())
let previous = getDocument(rows[index - 1].id)(store.getState())
if (!previous || !current) return
if (previous.plugin !== current.plugin) {
// check if previous focus plugin is the same type
const root = getFocusTree()(store.getState())
if (!root) return
const previousFocusId = findPreviousNode(root, row.id)
if (!previousFocusId) return
previous = getDocument(previousFocusId)(store.getState())
if (!previous || previous.plugin !== current.plugin) return
const merged = merge(previous.state)
dispatch(
change({
id: previousFocusId,
state: () => merged
})
)
rows.remove(index)
} else {
merge(previous.state)
setTimeout(() => rows.remove(index - 1))
}
},
mergeWithNext: (merge: (statePrevious: unknown) => unknown) => {mergeWithNext: (merge: (statePrevious: unknown) => unknown) => {
if (index + 1 === rows.length) return
const current = getDocument(row.id)(store.getState())
let next = getDocument(rows[index + 1].id)(store.getState())
if (!next || !current) return
if (next.plugin !== current.plugin) {
// check if next focus plugin is the same type
const root = getFocusTree()(store.getState())
if (!root) return
const nextFocusId = findNextNode(root, row.id)
if (!nextFocusId) return
// use that plugin for merge
next = getDocument(nextFocusId)(store.getState())
if (!next || next.plugin !== current.plugin) return
}
merge(next.state)>((props, ref) => {
const [expandedState, setExpanded] = React.useState(false)
const [showExtendedSettings, setShowExtendedSettings] = React.useState(false)
const rows = props.state
const index = props.index
const row = rows[index]
const focused = useScopedSelector(isFocused(row.id))
// DnD
const rowRef = React.useRef(null)
React.useImperativeHandle(ref, () => {
return { getNode: () => rowRef.current }
})
if (props.connectDragSource) {
props.connectDragPreview(rowRef)
props.connectDropTarget(rowRef)
// const opacity = isDragging ? 0 : 1
}
const extendedSettingsNode = React.useRef(null)
const settingsTheme = usePluginTheme(name, rowsPluginThemeFactory)mergeWithNext: (merge: (statePrevious: unknown) => unknown) => {
if (index + 1 === rows.length) return
const current = getDocument(row.id)(store.getState())
let next = getDocument(rows[index + 1].id)(store.getState())
if (!next || !current) return
if (next.plugin !== current.plugin) {
// check if next focus plugin is the same type
const root = getFocusTree()(store.getState())
if (!root) return
const nextFocusId = findNextNode(root, row.id)
if (!nextFocusId) return
// use that plugin for merge
next = getDocument(nextFocusId)(store.getState())
if (!next || next.plugin !== current.plugin) return
}
merge(next.state)
setTimeout(() => {
rows.remove(index + 1)
})
},
renderSettings(children: React.ReactNode, { close }: { close(): void }) {mergeWithNext: (merge: (statePrevious: unknown) => unknown) => {
if (index + 1 === rows.length) return
const current = getDocument(row.id)(store.getState())
let next = getDocument(rows[index + 1].id)(store.getState())
if (!next || !current) return
if (next.plugin !== current.plugin) {
// check if next focus plugin is the same type
const root = getFocusTree()(store.getState())
if (!root) return
const nextFocusId = findNextNode(root, row.id)
if (!nextFocusId) return
// use that plugin for merge
next = getDocument(nextFocusId)(store.getState())
if (!next || next.plugin !== current.plugin) return
}
merge(next.state)
setTimeout(() => {
rows.remove(index + 1)
})
}
}mergeWithPrevious: (merge: (statePrevious: unknown) => unknown) => {
if (index - 1 < 0) return
const current = getDocument(row.id)(store.getState())
let previous = getDocument(rows[index - 1].id)(store.getState())
if (!previous || !current) return
if (previous.plugin !== current.plugin) {
// check if previous focus plugin is the same type
const root = getFocusTree()(store.getState())
if (!root) return
const previousFocusId = findPreviousNode(root, row.id)
if (!previousFocusId) return
previous = getDocument(previousFocusId)(store.getState())
if (!previous || previous.plugin !== current.plugin) return
const merged = merge(previous.state)
dispatch(
change({
id: previousFocusId,
state: () => merged
})
)
rows.remove(index)
} else {
merge(previous.state)
setTimeout(() => rows.remove(index - 1))
Popular @edtr-io/store functions
- @edtr-io/store.createStore
- @edtr-io/store.findNextNode
- @edtr-io/store.findPreviousNode
- @edtr-io/store.getDocument
- @edtr-io/store.getScope
- @edtr-io/store.hasFocusedDescendant
- @edtr-io/store.hasPendingChanges
- @edtr-io/store.initRoot
- @edtr-io/store.isFocused
- @edtr-io/store.serializeDocument
- @edtr-io/store.serializeRootDocument