@manuscripts/body-editor 1.6.11 → 1.6.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/commands.js +57 -1
- package/dist/cjs/components/toolbar/LevelSelector.js +2 -2
- package/dist/cjs/index.js +4 -9
- package/dist/cjs/keys/list.js +9 -9
- package/dist/cjs/lib/context-menu.js +81 -163
- package/dist/cjs/menus.js +353 -405
- package/dist/cjs/toolbar.js +30 -34
- package/dist/cjs/views/editable_block.js +12 -4
- package/dist/es/commands.js +57 -2
- package/dist/es/components/toolbar/LevelSelector.js +2 -2
- package/dist/es/index.js +2 -4
- package/dist/es/keys/list.js +7 -7
- package/dist/es/lib/context-menu.js +81 -163
- package/dist/es/menus.js +353 -405
- package/dist/es/toolbar.js +31 -35
- package/dist/es/views/editable_block.js +13 -5
- package/dist/types/commands.d.ts +1 -0
- package/dist/types/components/toolbar/LevelSelector.d.ts +2 -2
- package/dist/types/configs/editor-views.d.ts +14 -14
- package/dist/types/index.d.ts +2 -4
- package/dist/types/keys/list.d.ts +1 -1
- package/dist/types/lib/context-menu.d.ts +0 -7
- package/dist/types/menus.d.ts +2 -3
- package/dist/types/toolbar.d.ts +18 -1
- package/dist/types/views/bibliography_element_editable.d.ts +1 -1
- package/dist/types/views/blockquote_element_editable.d.ts +1 -1
- package/dist/types/views/bullet_list_editable.d.ts +1 -1
- package/dist/types/views/editable_block.d.ts +1 -1
- package/dist/types/views/equation_element_editable.d.ts +1 -1
- package/dist/types/views/figure_element_editable.d.ts +1 -1
- package/dist/types/views/footnote_editable.d.ts +1 -1
- package/dist/types/views/footnotes_element_editable.d.ts +1 -1
- package/dist/types/views/listing_element_editable.d.ts +1 -1
- package/dist/types/views/ordered_list_editable.d.ts +1 -1
- package/dist/types/views/paragraph_editable.d.ts +1 -1
- package/dist/types/views/placeholder_element_editable.d.ts +1 -1
- package/dist/types/views/pullquote_element_editable.d.ts +1 -1
- package/dist/types/views/section_title_editable.d.ts +1 -1
- package/dist/types/views/table_element_editable.d.ts +1 -1
- package/dist/types/views/toc_element_editable.d.ts +1 -1
- package/package.json +2 -4
- package/dist/cjs/components/application-menu/ApplicationMenu.js +0 -63
- package/dist/cjs/components/application-menu/MenuItemContainer.js +0 -127
- package/dist/cjs/components/application-menu/Shortcut.js +0 -63
- package/dist/cjs/components/application-menu/index.js +0 -22
- package/dist/cjs/components/application-menu/menuState.js +0 -49
- package/dist/cjs/components/application-menu/types.js +0 -17
- package/dist/cjs/components/application-menu/useApplicationMenus.js +0 -154
- package/dist/cjs/components/dialog/TableCellBorderOptions.js +0 -64
- package/dist/cjs/components/dialog/TableCellOptions.js +0 -50
- package/dist/cjs/components/dialog/TableOptions.js +0 -31
- package/dist/cjs/components/dialog/commands.js +0 -185
- package/dist/cjs/components/dialog/index.js +0 -26
- package/dist/cjs/components/dialog/shared.js +0 -48
- package/dist/cjs/components/dialog/types.js +0 -9
- package/dist/cjs/components/toolbar/ListStyleSelector.js +0 -150
- package/dist/cjs/components/toolbar/ManuscriptToolbar.js +0 -104
- package/dist/cjs/components/toolbar/OrderListSelector.js +0 -103
- package/dist/cjs/views/EditableBlock.js +0 -37
- package/dist/es/components/application-menu/ApplicationMenu.js +0 -56
- package/dist/es/components/application-menu/MenuItemContainer.js +0 -120
- package/dist/es/components/application-menu/Shortcut.js +0 -56
- package/dist/es/components/application-menu/index.js +0 -17
- package/dist/es/components/application-menu/menuState.js +0 -44
- package/dist/es/components/application-menu/types.js +0 -16
- package/dist/es/components/application-menu/useApplicationMenus.js +0 -148
- package/dist/es/components/dialog/TableCellBorderOptions.js +0 -36
- package/dist/es/components/dialog/TableCellOptions.js +0 -22
- package/dist/es/components/dialog/TableOptions.js +0 -26
- package/dist/es/components/dialog/commands.js +0 -177
- package/dist/es/components/dialog/index.js +0 -18
- package/dist/es/components/dialog/shared.js +0 -21
- package/dist/es/components/dialog/types.js +0 -6
- package/dist/es/components/toolbar/ListStyleSelector.js +0 -120
- package/dist/es/components/toolbar/ManuscriptToolbar.js +0 -97
- package/dist/es/components/toolbar/OrderListSelector.js +0 -72
- package/dist/es/views/EditableBlock.js +0 -29
- package/dist/types/components/application-menu/ApplicationMenu.d.ts +0 -24
- package/dist/types/components/application-menu/MenuItemContainer.d.ts +0 -27
- package/dist/types/components/application-menu/Shortcut.d.ts +0 -26
- package/dist/types/components/application-menu/index.d.ts +0 -18
- package/dist/types/components/application-menu/menuState.d.ts +0 -18
- package/dist/types/components/application-menu/types.d.ts +0 -47
- package/dist/types/components/application-menu/useApplicationMenus.d.ts +0 -12
- package/dist/types/components/dialog/TableCellBorderOptions.d.ts +0 -9
- package/dist/types/components/dialog/TableCellOptions.d.ts +0 -4
- package/dist/types/components/dialog/TableOptions.d.ts +0 -4
- package/dist/types/components/dialog/commands.d.ts +0 -28
- package/dist/types/components/dialog/index.d.ts +0 -4
- package/dist/types/components/dialog/shared.d.ts +0 -16
- package/dist/types/components/dialog/types.d.ts +0 -16
- package/dist/types/components/toolbar/ListStyleSelector.d.ts +0 -36
- package/dist/types/components/toolbar/ManuscriptToolbar.d.ts +0 -50
- package/dist/types/components/toolbar/OrderListSelector.d.ts +0 -14
- package/dist/types/views/EditableBlock.d.ts +0 -19
|
@@ -1,177 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* © 2019 Atypon Systems LLC
|
|
3
|
-
*
|
|
4
|
-
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
5
|
-
* you may not use this file except in compliance with the License.
|
|
6
|
-
* You may obtain a copy of the License at
|
|
7
|
-
*
|
|
8
|
-
* http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
-
*
|
|
10
|
-
* Unless required by applicable law or agreed to in writing, software
|
|
11
|
-
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
12
|
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
13
|
-
* See the License for the specific language governing permissions and
|
|
14
|
-
* limitations under the License.
|
|
15
|
-
*/
|
|
16
|
-
import { TABLE_CELL_STYLES, } from '@manuscripts/transform';
|
|
17
|
-
import { get as _get } from 'lodash-es';
|
|
18
|
-
import { CellSelection, TableMap } from 'prosemirror-tables';
|
|
19
|
-
import { isTextSelection } from '../../commands';
|
|
20
|
-
import { isNodeOfType, mergeSimilarItems, nearestAncestor, } from '../../lib/helpers';
|
|
21
|
-
export const getSelectedTableAttr = (state) => {
|
|
22
|
-
const { $head } = state.selection;
|
|
23
|
-
const tableDepth = nearestAncestor(isNodeOfType('table'))($head);
|
|
24
|
-
if (!tableDepth) {
|
|
25
|
-
return {
|
|
26
|
-
id: '',
|
|
27
|
-
headerRows: 1,
|
|
28
|
-
footerRows: 1,
|
|
29
|
-
};
|
|
30
|
-
}
|
|
31
|
-
const tableEl = $head.node(tableDepth);
|
|
32
|
-
return tableEl.attrs;
|
|
33
|
-
};
|
|
34
|
-
export const setTableAttrs = (attrs) => (state, dispatch) => {
|
|
35
|
-
const { selection, tr } = state;
|
|
36
|
-
const { $head } = selection;
|
|
37
|
-
const tableDepth = nearestAncestor(isNodeOfType('table'))($head);
|
|
38
|
-
if (!tableDepth) {
|
|
39
|
-
return false;
|
|
40
|
-
}
|
|
41
|
-
const tableEl = $head.node(tableDepth);
|
|
42
|
-
const start = $head.start(tableDepth);
|
|
43
|
-
if (dispatch) {
|
|
44
|
-
tr.setNodeMarkup(start - 1, tableEl.type, attrs, tableEl.marks);
|
|
45
|
-
dispatch(tr);
|
|
46
|
-
}
|
|
47
|
-
return true;
|
|
48
|
-
};
|
|
49
|
-
const getTableCellSelection = (selection) => {
|
|
50
|
-
if (selection instanceof CellSelection) {
|
|
51
|
-
const nodes = [];
|
|
52
|
-
selection.ranges.map((range) => {
|
|
53
|
-
const { parent, pos } = range.$from;
|
|
54
|
-
if (!isNodeOfType('table_cell')) {
|
|
55
|
-
return true;
|
|
56
|
-
}
|
|
57
|
-
nodes.push([parent, pos]);
|
|
58
|
-
return true;
|
|
59
|
-
});
|
|
60
|
-
return nodes;
|
|
61
|
-
}
|
|
62
|
-
if (!isTextSelection(selection)) {
|
|
63
|
-
return [];
|
|
64
|
-
}
|
|
65
|
-
const depth = nearestAncestor(isNodeOfType('table_cell'))(selection.$anchor);
|
|
66
|
-
if (!depth) {
|
|
67
|
-
return [];
|
|
68
|
-
}
|
|
69
|
-
const { $anchor } = selection;
|
|
70
|
-
const node = $anchor.node(depth);
|
|
71
|
-
return [[node, $anchor.start(depth)]];
|
|
72
|
-
};
|
|
73
|
-
const getNeighbouringCells = (state, cells) => {
|
|
74
|
-
if (!cells.length) {
|
|
75
|
-
return () => [];
|
|
76
|
-
}
|
|
77
|
-
const $firstCell = state.doc.resolve(cells[0][1]);
|
|
78
|
-
const tableDepth = nearestAncestor(isNodeOfType('table'))($firstCell);
|
|
79
|
-
if (!tableDepth) {
|
|
80
|
-
throw new Error('Attempting to resolve cell not in table');
|
|
81
|
-
}
|
|
82
|
-
const table = $firstCell.node(tableDepth);
|
|
83
|
-
const map = TableMap.get(table);
|
|
84
|
-
const offset = $firstCell.start(tableDepth) + 1;
|
|
85
|
-
return (direction) => {
|
|
86
|
-
const getNeighbourPosition = (pos) => {
|
|
87
|
-
const axis = ['top', 'bottom'].includes(direction) ? 'vert' : 'horiz';
|
|
88
|
-
const dir = ['bottom', 'right'].includes(direction) ? 1 : -1;
|
|
89
|
-
return (map.nextCell(pos - offset, axis, dir) || 0) + offset;
|
|
90
|
-
};
|
|
91
|
-
return cells
|
|
92
|
-
.map(([, pos]) => {
|
|
93
|
-
const neighbourPos = getNeighbourPosition(pos);
|
|
94
|
-
if (neighbourPos <= offset) {
|
|
95
|
-
return null;
|
|
96
|
-
}
|
|
97
|
-
const $neighbour = state.doc.resolve(neighbourPos);
|
|
98
|
-
const neighbour = $neighbour.parent;
|
|
99
|
-
if (neighbour.type !== state.schema.nodes.table_cell) {
|
|
100
|
-
return null;
|
|
101
|
-
}
|
|
102
|
-
return [neighbour, neighbourPos];
|
|
103
|
-
})
|
|
104
|
-
.filter(Boolean);
|
|
105
|
-
};
|
|
106
|
-
};
|
|
107
|
-
const everyNodeAttr = (nodes, attr) => {
|
|
108
|
-
const value = _get(nodes[0].attrs, attr, null);
|
|
109
|
-
return nodes.every((node) => _get(node.attrs, attr, null) === value)
|
|
110
|
-
? value
|
|
111
|
-
: null;
|
|
112
|
-
};
|
|
113
|
-
export const getSelectedTableCellStyles = (state) => {
|
|
114
|
-
const { selection } = state;
|
|
115
|
-
const nodes = getTableCellSelection(selection);
|
|
116
|
-
const empty = {};
|
|
117
|
-
if (!nodes.length) {
|
|
118
|
-
return empty;
|
|
119
|
-
}
|
|
120
|
-
const styles = TABLE_CELL_STYLES.reduce((acc, key) => {
|
|
121
|
-
const value = everyNodeAttr(nodes.map((node) => node[0]), `styles.${key}`);
|
|
122
|
-
acc[key] = value;
|
|
123
|
-
return acc;
|
|
124
|
-
}, empty);
|
|
125
|
-
return styles;
|
|
126
|
-
};
|
|
127
|
-
const reshapeStyleCommands = mergeSimilarItems((a, b) => a[1] === b[1], (a, b) => {
|
|
128
|
-
return [a[0], a[1], Object.assign(Object.assign({}, a[2]), b[2])];
|
|
129
|
-
});
|
|
130
|
-
const mapStylesToNodes = (nodes, style) => {
|
|
131
|
-
return nodes.map((node) => [node[0], node[1], style]);
|
|
132
|
-
};
|
|
133
|
-
const applyStylesToTableCells = (commands) => (state, dispatch) => {
|
|
134
|
-
const { tr } = state;
|
|
135
|
-
if (!commands.length) {
|
|
136
|
-
return false;
|
|
137
|
-
}
|
|
138
|
-
const reshaped = reshapeStyleCommands(commands);
|
|
139
|
-
reshaped.map(([node, pos, styles]) => {
|
|
140
|
-
tr.setNodeMarkup(pos - 1, undefined, Object.assign(Object.assign({}, node.attrs), { styles: Object.assign(Object.assign({}, node.attrs.styles), styles) }), node.marks);
|
|
141
|
-
});
|
|
142
|
-
dispatch && dispatch(tr);
|
|
143
|
-
return true;
|
|
144
|
-
};
|
|
145
|
-
export const setTableCellStyles = (styles) => (state, dispatch) => {
|
|
146
|
-
const { selection } = state;
|
|
147
|
-
const nodes = getTableCellSelection(selection);
|
|
148
|
-
if (!nodes.length) {
|
|
149
|
-
return false;
|
|
150
|
-
}
|
|
151
|
-
return applyStylesToTableCells(mapStylesToNodes(nodes, styles))(state, dispatch);
|
|
152
|
-
};
|
|
153
|
-
export const setTableCellBorderStyles = ({ direction, width, color }) => (state, dispatch) => {
|
|
154
|
-
const { selection } = state;
|
|
155
|
-
const nodes = getTableCellSelection(selection);
|
|
156
|
-
if (!nodes.length) {
|
|
157
|
-
return false;
|
|
158
|
-
}
|
|
159
|
-
const neighbours = getNeighbouringCells(state, nodes);
|
|
160
|
-
const value = Number(width)
|
|
161
|
-
? `${width}px solid ${color}`
|
|
162
|
-
: `1px solid transparent`;
|
|
163
|
-
let commands = [];
|
|
164
|
-
if (['all', 'top'].includes(direction)) {
|
|
165
|
-
commands = commands.concat(mapStylesToNodes(nodes, { 'border-top': value }), mapStylesToNodes(neighbours('top'), { 'border-bottom': value }));
|
|
166
|
-
}
|
|
167
|
-
if (['all', 'bottom'].includes(direction)) {
|
|
168
|
-
commands = commands.concat(mapStylesToNodes(nodes, { 'border-bottom': value }), mapStylesToNodes(neighbours('bottom'), { 'border-top': value }));
|
|
169
|
-
}
|
|
170
|
-
if (['all', 'left'].includes(direction)) {
|
|
171
|
-
commands = commands.concat(mapStylesToNodes(nodes, { 'border-left': value }), mapStylesToNodes(neighbours('left'), { 'border-right': value }));
|
|
172
|
-
}
|
|
173
|
-
if (['all', 'right'].includes(direction)) {
|
|
174
|
-
commands = commands.concat(mapStylesToNodes(nodes, { 'border-right': value }), mapStylesToNodes(neighbours('right'), { 'border-left': value }));
|
|
175
|
-
}
|
|
176
|
-
return applyStylesToTableCells(commands)(state, dispatch);
|
|
177
|
-
};
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import TableCellBorderOptions from './TableCellBorderOptions';
|
|
3
|
-
import TableCellOptions from './TableCellOptions';
|
|
4
|
-
import TableOptions from './TableOptions';
|
|
5
|
-
export { DialogNames } from './types';
|
|
6
|
-
const Lookup = {
|
|
7
|
-
TableOptions,
|
|
8
|
-
TableCellOptions,
|
|
9
|
-
TableCellBorderOptions,
|
|
10
|
-
};
|
|
11
|
-
export const DialogController = (props) => {
|
|
12
|
-
const { currentDialog } = props;
|
|
13
|
-
if (!currentDialog) {
|
|
14
|
-
return null;
|
|
15
|
-
}
|
|
16
|
-
const Component = Lookup[currentDialog];
|
|
17
|
-
return React.createElement(Component, Object.assign({}, props));
|
|
18
|
-
};
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { Category, Dialog } from '@manuscripts/style-guide';
|
|
2
|
-
import React, { useCallback, useState } from 'react';
|
|
3
|
-
export function Modal({ handleCloseDialog, editorState, dispatch, selector, command, header, children, }) {
|
|
4
|
-
const [state, setState] = useState(selector(editorState));
|
|
5
|
-
const handleChange = useCallback((key, value) => setState((prevState) => (Object.assign(Object.assign({}, prevState), { [key]: value }))), []);
|
|
6
|
-
const handleOK = useCallback(() => {
|
|
7
|
-
command(state)(editorState, dispatch);
|
|
8
|
-
handleCloseDialog();
|
|
9
|
-
}, [state, editorState, dispatch, command, handleCloseDialog]);
|
|
10
|
-
return (React.createElement(Dialog, { category: Category.confirmation, header: header, isOpen: true, actions: {
|
|
11
|
-
primary: {
|
|
12
|
-
action: handleOK,
|
|
13
|
-
title: 'OK',
|
|
14
|
-
isDestructive: false,
|
|
15
|
-
},
|
|
16
|
-
secondary: {
|
|
17
|
-
action: handleCloseDialog,
|
|
18
|
-
title: 'Cancel',
|
|
19
|
-
},
|
|
20
|
-
}, message: children({ state, handleChange }) }));
|
|
21
|
-
}
|
|
@@ -1,120 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* © 2023 Atypon Systems LLC
|
|
3
|
-
*
|
|
4
|
-
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
5
|
-
* you may not use this file except in compliance with the License.
|
|
6
|
-
* You may obtain a copy of the License at
|
|
7
|
-
*
|
|
8
|
-
* http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
-
*
|
|
10
|
-
* Unless required by applicable law or agreed to in writing, software
|
|
11
|
-
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
12
|
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
13
|
-
* See the License for the specific language governing permissions and
|
|
14
|
-
* limitations under the License.
|
|
15
|
-
*/
|
|
16
|
-
import ArrowDown from '@manuscripts/assets/react/ArrowDownBlack';
|
|
17
|
-
import { DropdownList, useDropdown } from '@manuscripts/style-guide';
|
|
18
|
-
import React from 'react';
|
|
19
|
-
import styled, { css } from 'styled-components';
|
|
20
|
-
const buttonCss = css `
|
|
21
|
-
background-color: ${(props) => props['data-active'] ? '#eee' : props.theme.colors.background.primary};
|
|
22
|
-
border: 1px solid ${(props) => props.theme.colors.border.secondary};
|
|
23
|
-
cursor: pointer;
|
|
24
|
-
display: inline-flex;
|
|
25
|
-
align-items: center;
|
|
26
|
-
transition: 0.2s all;
|
|
27
|
-
|
|
28
|
-
&:hover {
|
|
29
|
-
background: ${(props) => props['data-active'] ? '#eee' : props.theme.colors.background.secondary};
|
|
30
|
-
z-index: 2;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
&:active {
|
|
34
|
-
background: #ddd;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
&:disabled {
|
|
38
|
-
opacity: 0.2;
|
|
39
|
-
}
|
|
40
|
-
`;
|
|
41
|
-
export const ListButton = styled.button.attrs({
|
|
42
|
-
type: 'button',
|
|
43
|
-
}) `
|
|
44
|
-
${buttonCss};
|
|
45
|
-
padding: 2px ${(props) => props.theme.grid.unit * 1}px 2px
|
|
46
|
-
${(props) => props.theme.grid.unit * 3}px;
|
|
47
|
-
border-top-right-radius: 0 !important;
|
|
48
|
-
border-bottom-right-radius: 0 !important;
|
|
49
|
-
`;
|
|
50
|
-
export const ListStyleButton = styled.button.attrs({
|
|
51
|
-
type: 'button',
|
|
52
|
-
}) `
|
|
53
|
-
${buttonCss};
|
|
54
|
-
border-left: 0;
|
|
55
|
-
svg {
|
|
56
|
-
width: 8px;
|
|
57
|
-
}
|
|
58
|
-
path {
|
|
59
|
-
stroke: #c9c9c9;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
&:hover path {
|
|
63
|
-
stroke: #6e6e6e;
|
|
64
|
-
}
|
|
65
|
-
`;
|
|
66
|
-
export const ListStyleSelector = ({ disabled, onClickListType, list }) => {
|
|
67
|
-
const { isOpen, toggleOpen, wrapperRef } = useDropdown();
|
|
68
|
-
return (React.createElement(Container, { onClick: (e) => !disabled && toggleOpen(e), ref: wrapperRef },
|
|
69
|
-
React.createElement(ListStyleButton, { disabled: disabled },
|
|
70
|
-
React.createElement(ArrowDown, null)),
|
|
71
|
-
isOpen && (React.createElement(DropdownList, { direction: 'right', top: 6, onClick: toggleOpen },
|
|
72
|
-
React.createElement(ListContainer, null, list.map((style, index) => (React.createElement(StylesBlock, { onClick: onClickListType, key: index, style: style }))))))));
|
|
73
|
-
};
|
|
74
|
-
const Container = styled.div `
|
|
75
|
-
display: flex;
|
|
76
|
-
`;
|
|
77
|
-
const ListContainer = styled.div `
|
|
78
|
-
padding: ${(props) => props.theme.grid.unit * 4}px;
|
|
79
|
-
display: grid;
|
|
80
|
-
grid-template-columns:
|
|
81
|
-
${(props) => props.theme.grid.unit * 21}px
|
|
82
|
-
${(props) => props.theme.grid.unit * 21}px;
|
|
83
|
-
gap: 6px;
|
|
84
|
-
`;
|
|
85
|
-
const StylesBlock = ({ style, onClick }) => (React.createElement(StyleBlock, { onClick: () => onClick(style.type) }, style.items.map((style, index) => (React.createElement(BlockItem, { key: index },
|
|
86
|
-
React.createElement(Label, null, style),
|
|
87
|
-
React.createElement(Block, null))))));
|
|
88
|
-
const StyleBlock = styled.div `
|
|
89
|
-
border: 1px solid ${(props) => props.theme.colors.border.tertiary};
|
|
90
|
-
padding: ${(props) => props.theme.grid.unit * 2}px;
|
|
91
|
-
cursor: pointer;
|
|
92
|
-
display: flex;
|
|
93
|
-
flex-direction: column;
|
|
94
|
-
row-gap: ${(props) => props.theme.grid.unit * 2}px;
|
|
95
|
-
|
|
96
|
-
&:hover {
|
|
97
|
-
background: ${(props) => props.theme.colors.button.default.border.hover};
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
&:active {
|
|
101
|
-
border-color: ${(props) => props.theme.colors.border.primary};
|
|
102
|
-
}
|
|
103
|
-
`;
|
|
104
|
-
const BlockItem = styled.div `
|
|
105
|
-
display: flex;
|
|
106
|
-
align-items: center;
|
|
107
|
-
gap: 6px;
|
|
108
|
-
`;
|
|
109
|
-
const Block = styled.div `
|
|
110
|
-
height: 3px;
|
|
111
|
-
width: ${(props) => props.theme.grid.unit * 14}px;
|
|
112
|
-
background: ${(props) => props.theme.colors.border.tertiary};
|
|
113
|
-
`;
|
|
114
|
-
const Label = styled.div `
|
|
115
|
-
font-family: Lato, serif;
|
|
116
|
-
font-size: ${(props) => props.theme.font.size.small};
|
|
117
|
-
font-weight: ${(props) => props.theme.font.weight.normal};
|
|
118
|
-
line-height: ${(props) => props.theme.font.lineHeight.small};
|
|
119
|
-
font-style: normal;
|
|
120
|
-
`;
|
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* © 2019 Atypon Systems LLC
|
|
3
|
-
*
|
|
4
|
-
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
5
|
-
* you may not use this file except in compliance with the License.
|
|
6
|
-
* You may obtain a copy of the License at
|
|
7
|
-
*
|
|
8
|
-
* http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
-
*
|
|
10
|
-
* Unless required by applicable law or agreed to in writing, software
|
|
11
|
-
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
12
|
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
13
|
-
* See the License for the specific language governing permissions and
|
|
14
|
-
* limitations under the License.
|
|
15
|
-
*/
|
|
16
|
-
import React from 'react';
|
|
17
|
-
import styled from 'styled-components';
|
|
18
|
-
import { toolbar } from '../../toolbar';
|
|
19
|
-
import { LevelSelector } from './LevelSelector';
|
|
20
|
-
export const ToolbarItem = styled.div `
|
|
21
|
-
display: inline-flex;
|
|
22
|
-
position: relative;
|
|
23
|
-
`;
|
|
24
|
-
const ToolbarButton = styled.button.attrs({
|
|
25
|
-
type: 'button',
|
|
26
|
-
}) `
|
|
27
|
-
background-color: ${(props) => props['data-active'] ? '#eee' : props.theme.colors.background.primary};
|
|
28
|
-
border: 1px solid ${(props) => props.theme.colors.border.secondary};
|
|
29
|
-
cursor: pointer;
|
|
30
|
-
padding: 2px ${(props) => props.theme.grid.unit * 3}px;
|
|
31
|
-
display: inline-flex;
|
|
32
|
-
align-items: center;
|
|
33
|
-
transition: 0.2s all;
|
|
34
|
-
|
|
35
|
-
&:hover {
|
|
36
|
-
background: ${(props) => props['data-active'] ? '#eee' : props.theme.colors.background.secondary};
|
|
37
|
-
z-index: 2;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
&:active {
|
|
41
|
-
background: #ddd;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
&:disabled {
|
|
45
|
-
opacity: 0.2;
|
|
46
|
-
}
|
|
47
|
-
`;
|
|
48
|
-
export const ToolbarContainer = styled.div `
|
|
49
|
-
margin: ${(props) => props.theme.grid.unit}px;
|
|
50
|
-
display: flex;
|
|
51
|
-
flex-wrap: wrap;
|
|
52
|
-
`;
|
|
53
|
-
export const ToolbarGroup = styled.div `
|
|
54
|
-
margin-right: ${(props) => props.theme.grid.unit * 2}px;
|
|
55
|
-
margin-bottom: ${(props) => props.theme.grid.unit * 2}px;
|
|
56
|
-
white-space: nowrap;
|
|
57
|
-
|
|
58
|
-
& ${ToolbarItem} button {
|
|
59
|
-
margin-right: 0;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
& ${ToolbarItem}:not(:first-of-type) button {
|
|
63
|
-
margin-left: -1px;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
& ${ToolbarItem}:first-of-type button {
|
|
67
|
-
border-top-left-radius: ${(props) => props.theme.grid.radius.small};
|
|
68
|
-
border-bottom-left-radius: ${(props) => props.theme.grid.radius.small};
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
& ${ToolbarItem}:last-of-type button {
|
|
72
|
-
border-top-right-radius: ${(props) => props.theme.grid.radius.small};
|
|
73
|
-
border-bottom-right-radius: ${(props) => props.theme.grid.radius.small};
|
|
74
|
-
}
|
|
75
|
-
`;
|
|
76
|
-
export const ManuscriptToolbar = ({ state, dispatch, view, footnotesEnabled, can }) => {
|
|
77
|
-
return (React.createElement(ToolbarContainer, null,
|
|
78
|
-
React.createElement(ToolbarGroup, null,
|
|
79
|
-
React.createElement(LevelSelector, { state: state, dispatch: dispatch, view: view })),
|
|
80
|
-
Object.entries(toolbar).map(([groupKey, toolbarGroup]) => (React.createElement(ToolbarGroup, { key: groupKey }, Object.entries(toolbarGroup)
|
|
81
|
-
.filter(([itemKey]) => {
|
|
82
|
-
switch (itemKey) {
|
|
83
|
-
case 'footnotes':
|
|
84
|
-
return footnotesEnabled;
|
|
85
|
-
case 'highlight':
|
|
86
|
-
return can.handleOwnComments;
|
|
87
|
-
default:
|
|
88
|
-
return true;
|
|
89
|
-
}
|
|
90
|
-
})
|
|
91
|
-
.map(([itemKey, item]) => item.Component ? (React.createElement(item.Component, Object.assign({ key: itemKey, state: state, dispatch: dispatch, view: view }, item))) : (React.createElement(ToolbarItem, { key: itemKey },
|
|
92
|
-
React.createElement(ToolbarButton, { title: item.title, "data-active": item.active && item.active(state), disabled: item.enable && !item.enable(state), onMouseDown: (event) => {
|
|
93
|
-
event.preventDefault();
|
|
94
|
-
item.run(state, dispatch);
|
|
95
|
-
view && view.focus();
|
|
96
|
-
} }, item.content)))))))));
|
|
97
|
-
};
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
import OrderedList from '@manuscripts/assets/react/ToolbarIconOrderedList';
|
|
2
|
-
import { skipTracking } from '@manuscripts/track-changes-plugin';
|
|
3
|
-
import { schema, } from '@manuscripts/transform';
|
|
4
|
-
import { wrapInList } from 'prosemirror-schema-list';
|
|
5
|
-
import { Selection } from 'prosemirror-state';
|
|
6
|
-
import React, { useCallback } from 'react';
|
|
7
|
-
import { skipTrackingChanges } from '../../keys/list';
|
|
8
|
-
import { ListButton, ListStyleSelector } from './ListStyleSelector';
|
|
9
|
-
import { ToolbarItem } from './ManuscriptToolbar';
|
|
10
|
-
export const OrderListSelector = ({ state, dispatch, view, title, active, run, enable }) => {
|
|
11
|
-
const isEnabled = !enable || enable(state);
|
|
12
|
-
const onClickListType = useCallback((type) => {
|
|
13
|
-
if (!dispatch) {
|
|
14
|
-
return;
|
|
15
|
-
}
|
|
16
|
-
const { $from, $to } = state.selection;
|
|
17
|
-
const range = $from.blockRange($to);
|
|
18
|
-
const isListNode = range &&
|
|
19
|
-
schema.nodes.ordered_list.compatibleContent($from.node(range.depth - 1).type);
|
|
20
|
-
if (!isListNode) {
|
|
21
|
-
skipTrackingChanges(wrapInList(schema.nodes.ordered_list, { listStyleType: type }))(state, dispatch);
|
|
22
|
-
view && view.focus();
|
|
23
|
-
}
|
|
24
|
-
else {
|
|
25
|
-
updateListStyle(state, dispatch, range, type);
|
|
26
|
-
}
|
|
27
|
-
}, [dispatch, state, view]);
|
|
28
|
-
return (React.createElement(ToolbarItem, null,
|
|
29
|
-
React.createElement(ListButton, { title: title, "data-active": active && active(state), disabled: !isEnabled, onMouseDown: (event) => {
|
|
30
|
-
event.preventDefault();
|
|
31
|
-
run(state, dispatch);
|
|
32
|
-
view && view.focus();
|
|
33
|
-
} },
|
|
34
|
-
React.createElement(OrderedList, null)),
|
|
35
|
-
React.createElement(ListStyleSelector, { disabled: !isEnabled, onClickListType: onClickListType, list: [
|
|
36
|
-
{ items: ['1.', '2.', '3.'], type: 'order' },
|
|
37
|
-
{ items: ['A.', 'B.', 'C.'], type: 'alpha-upper' },
|
|
38
|
-
{ items: ['a.', 'b.', 'c.'], type: 'alpha-lower' },
|
|
39
|
-
{ items: ['I.', 'II.', 'III.'], type: 'roman-upper' },
|
|
40
|
-
{ items: ['i.', 'ii.', 'iii.'], type: 'roman-lower' },
|
|
41
|
-
] })));
|
|
42
|
-
};
|
|
43
|
-
export const updateListStyle = (state, dispatch, range, type) => {
|
|
44
|
-
const { $from } = state.selection;
|
|
45
|
-
const tr = state.tr;
|
|
46
|
-
const targetLevel = range.depth - 1;
|
|
47
|
-
const selectionDepth = $from.sharedDepth(state.selection.to);
|
|
48
|
-
const parentListDepth = [...Array(selectionDepth)].findIndex((_, index) => {
|
|
49
|
-
const node = $from.node(index + 1);
|
|
50
|
-
return (node.type === schema.nodes.ordered_list ||
|
|
51
|
-
node.type === schema.nodes.bullet_list);
|
|
52
|
-
}) + 1;
|
|
53
|
-
const parentListNode = $from.node(parentListDepth);
|
|
54
|
-
const parentListPos = $from.before(parentListDepth);
|
|
55
|
-
if (parentListDepth === targetLevel) {
|
|
56
|
-
replaceToOrderList(parentListPos, parentListPos + parentListNode.nodeSize, parentListNode);
|
|
57
|
-
}
|
|
58
|
-
else {
|
|
59
|
-
parentListNode.descendants((node, pos) => {
|
|
60
|
-
if ((node.type === schema.nodes.ordered_list ||
|
|
61
|
-
node.type === schema.nodes.bullet_list) &&
|
|
62
|
-
state.doc.resolve(parentListPos + pos + node.nodeSize).depth ===
|
|
63
|
-
targetLevel) {
|
|
64
|
-
replaceToOrderList(parentListPos + pos, parentListPos + pos + node.nodeSize, node);
|
|
65
|
-
}
|
|
66
|
-
});
|
|
67
|
-
}
|
|
68
|
-
function replaceToOrderList(from, to, node) {
|
|
69
|
-
tr.replaceRangeWith(from, to, schema.nodes.ordered_list.create(Object.assign(Object.assign({}, node.attrs), { listStyleType: type }), node.content, node.marks));
|
|
70
|
-
}
|
|
71
|
-
dispatch(skipTracking(tr).setSelection(Selection.near(tr.doc.resolve($from.pos))));
|
|
72
|
-
};
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import styled from 'styled-components';
|
|
3
|
-
import { ContextMenu } from '../lib/context-menu';
|
|
4
|
-
export const Menus = ({ openAddMenu, openEditMenu }) => {
|
|
5
|
-
return (React.createElement(React.Fragment, null,
|
|
6
|
-
React.createElement(MenuButton, { href: "#", onClick: openAddMenu, className: "add-block add-block-after", "aria-label": "Open menu", "data-balloon-pos": "down-left" }),
|
|
7
|
-
React.createElement(MenuButton, { href: "#", onClick: openEditMenu, className: "edit-block", "aria-label": "Open menu", "data-balloon-pos": "down-left" })));
|
|
8
|
-
};
|
|
9
|
-
export const openMenu = (viewProps, edit = false) => (e) => {
|
|
10
|
-
e.preventDefault();
|
|
11
|
-
e.stopPropagation();
|
|
12
|
-
const menu = new ContextMenu(viewProps.node, viewProps.view, viewProps.getPos);
|
|
13
|
-
if (edit) {
|
|
14
|
-
menu.showEditMenu(e.currentTarget);
|
|
15
|
-
}
|
|
16
|
-
else {
|
|
17
|
-
menu.showAddMenu(e.currentTarget, true);
|
|
18
|
-
}
|
|
19
|
-
};
|
|
20
|
-
const EditableBlock = ({ children, canWrite, viewProps, }) => {
|
|
21
|
-
return (React.createElement("div", { className: "block-container" },
|
|
22
|
-
React.createElement("div", { className: "block-gutter", contentEditable: false }, canWrite && (React.createElement(Menus, { openAddMenu: openMenu(viewProps), openEditMenu: openMenu(viewProps, true) }))),
|
|
23
|
-
React.createElement("div", { className: "block" }, children),
|
|
24
|
-
React.createElement("div", { className: "block-gutter", contentEditable: false })));
|
|
25
|
-
};
|
|
26
|
-
export default EditableBlock;
|
|
27
|
-
export const MenuButton = styled.a `
|
|
28
|
-
position: relative;
|
|
29
|
-
`;
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* © 2019 Atypon Systems LLC
|
|
3
|
-
*
|
|
4
|
-
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
5
|
-
* you may not use this file except in compliance with the License.
|
|
6
|
-
* You may obtain a copy of the License at
|
|
7
|
-
*
|
|
8
|
-
* http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
-
*
|
|
10
|
-
* Unless required by applicable law or agreed to in writing, software
|
|
11
|
-
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
12
|
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
13
|
-
* See the License for the specific language governing permissions and
|
|
14
|
-
* limitations under the License.
|
|
15
|
-
*/
|
|
16
|
-
import React from 'react';
|
|
17
|
-
import { MenuItem } from './types';
|
|
18
|
-
interface Props {
|
|
19
|
-
menuState: MenuItem[];
|
|
20
|
-
wrapperRef: React.Ref<HTMLDivElement>;
|
|
21
|
-
handleItemClick: (indices: number[]) => void;
|
|
22
|
-
}
|
|
23
|
-
export declare const ApplicationMenus: React.FC<Props>;
|
|
24
|
-
export {};
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* © 2019 Atypon Systems LLC
|
|
3
|
-
*
|
|
4
|
-
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
5
|
-
* you may not use this file except in compliance with the License.
|
|
6
|
-
* You may obtain a copy of the License at
|
|
7
|
-
*
|
|
8
|
-
* http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
-
*
|
|
10
|
-
* Unless required by applicable law or agreed to in writing, software
|
|
11
|
-
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
12
|
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
13
|
-
* See the License for the specific language governing permissions and
|
|
14
|
-
* limitations under the License.
|
|
15
|
-
*/
|
|
16
|
-
import React from 'react';
|
|
17
|
-
import { MenuItem } from './types';
|
|
18
|
-
export declare const Text: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
19
|
-
export declare const MenuList: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
20
|
-
interface Props {
|
|
21
|
-
item: MenuItem;
|
|
22
|
-
handleMenuItemClick: () => void;
|
|
23
|
-
handleSubmenuItemClick?: (index: number) => void;
|
|
24
|
-
depth: number;
|
|
25
|
-
}
|
|
26
|
-
export declare const MenuItemContainer: React.FC<Props>;
|
|
27
|
-
export {};
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* © 2019 Atypon Systems LLC
|
|
3
|
-
*
|
|
4
|
-
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
5
|
-
* you may not use this file except in compliance with the License.
|
|
6
|
-
* You may obtain a copy of the License at
|
|
7
|
-
*
|
|
8
|
-
* http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
-
*
|
|
10
|
-
* Unless required by applicable law or agreed to in writing, software
|
|
11
|
-
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
12
|
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
13
|
-
* See the License for the specific language governing permissions and
|
|
14
|
-
* limitations under the License.
|
|
15
|
-
*/
|
|
16
|
-
import React from 'react';
|
|
17
|
-
export interface Accelerator {
|
|
18
|
-
mac: string;
|
|
19
|
-
pc: string;
|
|
20
|
-
}
|
|
21
|
-
export declare const ShortcutContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
22
|
-
interface ShortcutProps {
|
|
23
|
-
accelerator: Accelerator;
|
|
24
|
-
}
|
|
25
|
-
export declare const Shortcut: React.FunctionComponent<ShortcutProps>;
|
|
26
|
-
export {};
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* © 2019 Atypon Systems LLC
|
|
3
|
-
*
|
|
4
|
-
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
5
|
-
* you may not use this file except in compliance with the License.
|
|
6
|
-
* You may obtain a copy of the License at
|
|
7
|
-
*
|
|
8
|
-
* http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
-
*
|
|
10
|
-
* Unless required by applicable law or agreed to in writing, software
|
|
11
|
-
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
12
|
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
13
|
-
* See the License for the specific language governing permissions and
|
|
14
|
-
* limitations under the License.
|
|
15
|
-
*/
|
|
16
|
-
export { ApplicationMenus } from './ApplicationMenu';
|
|
17
|
-
export { useApplicationMenus } from './useApplicationMenus';
|
|
18
|
-
export type { MenuSpec } from './types';
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* © 2019 Atypon Systems LLC
|
|
3
|
-
*
|
|
4
|
-
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
5
|
-
* you may not use this file except in compliance with the License.
|
|
6
|
-
* You may obtain a copy of the License at
|
|
7
|
-
*
|
|
8
|
-
* http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
-
*
|
|
10
|
-
* Unless required by applicable law or agreed to in writing, software
|
|
11
|
-
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
12
|
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
13
|
-
* See the License for the specific language governing permissions and
|
|
14
|
-
* limitations under the License.
|
|
15
|
-
*/
|
|
16
|
-
import { MenuItem, MenuPointer, MenuSpec } from './types';
|
|
17
|
-
export declare const getMenuState: (spec: MenuSpec[], pointer: MenuPointer, depth?: number) => MenuItem[];
|
|
18
|
-
export declare const getMenuItem: (menuState: MenuItem[], indices: number[]) => MenuItem | null;
|