@modusoperandi/licit 1.0.4 → 1.0.5

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.
Files changed (317) hide show
  1. package/BlockquoteInsertNewLineCommand.js +7 -8
  2. package/BlockquoteInsertNewLineCommand.js.flow +77 -77
  3. package/BlockquoteNodeSpec.js +1 -1
  4. package/BlockquoteNodeSpec.js.flow +30 -30
  5. package/BlockquoteToggleCommand.js +8 -9
  6. package/BlockquoteToggleCommand.js.flow +56 -56
  7. package/BookmarkNodeSpec.js +1 -1
  8. package/BookmarkNodeSpec.js.flow +39 -39
  9. package/BulletListNodeSpec.js.flow +61 -61
  10. package/CZIProseMirror.js.flow +90 -90
  11. package/CodeBlockCommand.js +8 -9
  12. package/CodeBlockCommand.js.flow +65 -65
  13. package/CodeBlockNodeSpec.js.flow +24 -24
  14. package/CodeMarkSpec.js.flow +14 -14
  15. package/ContentPlaceholderPlugin.js +3 -4
  16. package/ContentPlaceholderPlugin.js.flow +187 -187
  17. package/CursorPlaceholderPlugin.js +4 -4
  18. package/CursorPlaceholderPlugin.js.flow +115 -115
  19. package/DocLayoutCommand.js +9 -10
  20. package/DocLayoutCommand.js.flow +99 -99
  21. package/DocNodeSpec.js.flow +64 -64
  22. package/EMMarkSpec.js.flow +14 -14
  23. package/EditorCommands.js.flow +126 -126
  24. package/EditorKeyMap.js.flow +187 -187
  25. package/EditorMarks.js +1 -1
  26. package/EditorMarks.js.flow +71 -71
  27. package/EditorNodes.js +1 -1
  28. package/EditorNodes.js.flow +59 -59
  29. package/EditorPageLayoutPlugin.js +2 -2
  30. package/EditorPageLayoutPlugin.js.flow +67 -67
  31. package/EditorPlugins.js.flow +8 -8
  32. package/EditorSchema.js.flow +12 -12
  33. package/EditorState.js.flow +7 -7
  34. package/FontSizeMarkSpec.js.flow +49 -49
  35. package/FontTypeMarkSpec.js.flow +80 -80
  36. package/HTMLMutator.js +2 -3
  37. package/HTMLMutator.js.flow +59 -59
  38. package/HardBreakNodeSpec.js.flow +15 -15
  39. package/HeadingNodeSpec.js +1 -1
  40. package/HeadingNodeSpec.js.flow +52 -52
  41. package/HistoryRedoCommand.js +7 -8
  42. package/HistoryRedoCommand.js.flow +41 -41
  43. package/HistoryUndoCommand.js +7 -8
  44. package/HistoryUndoCommand.js.flow +41 -41
  45. package/HorizontalRuleCommand.js +7 -8
  46. package/HorizontalRuleCommand.js.flow +71 -71
  47. package/HorizontalRuleNodeSpec.js.flow +39 -39
  48. package/ImageUploadPlaceholderPlugin.js +2 -2
  49. package/ImageUploadPlaceholderPlugin.js.flow +192 -192
  50. package/LinkMarkSpec.js.flow +32 -32
  51. package/LinkSetURLCommand.js +8 -9
  52. package/LinkSetURLCommand.js.flow +117 -117
  53. package/LinkTooltipPlugin.js +3 -4
  54. package/LinkTooltipPlugin.js.flow +190 -190
  55. package/ListItemInsertNewLineCommand.js +7 -8
  56. package/ListItemInsertNewLineCommand.js.flow +77 -77
  57. package/ListItemMergeCommand.js +9 -10
  58. package/ListItemMergeCommand.js.flow +199 -199
  59. package/ListItemNodeSpec.js.flow +52 -52
  60. package/ListSplitCommand.js +7 -8
  61. package/ListSplitCommand.js.flow +54 -54
  62. package/ListToggleCommand.js +11 -12
  63. package/ListToggleCommand.js.flow +99 -99
  64. package/MarkNames.js.flow +18 -18
  65. package/MarksClearCommand.js +9 -10
  66. package/MarksClearCommand.js.flow +65 -65
  67. package/MathEditCommand.js +8 -9
  68. package/MathEditCommand.js.flow +120 -120
  69. package/MathNodeSpec.js.flow +46 -46
  70. package/NodeNames.js.flow +23 -23
  71. package/OrderedListNodeSpec.js +1 -1
  72. package/OrderedListNodeSpec.js.flow +132 -132
  73. package/ParagraphNodeSpec.js.flow +156 -156
  74. package/ParagraphSpacingCommand.js +9 -10
  75. package/ParagraphSpacingCommand.js.flow +144 -144
  76. package/PrintCommand.js +9 -10
  77. package/PrintCommand.js.flow +53 -53
  78. package/SelectionPlaceholderPlugin.js +4 -4
  79. package/SelectionPlaceholderPlugin.js.flow +131 -131
  80. package/SpacerMarkSpec.js +1 -1
  81. package/SpacerMarkSpec.js.flow +47 -47
  82. package/StrikeMarkSpec.js.flow +21 -21
  83. package/StrongMarkSpec.js.flow +25 -25
  84. package/StyleView.js +2 -3
  85. package/StyleView.js.flow +19 -19
  86. package/TableBackgroundColorCommand.js +25 -12
  87. package/TableBackgroundColorCommand.js.flow +83 -75
  88. package/TableBorderColorCommand.js +25 -12
  89. package/TableBorderColorCommand.js.flow +86 -75
  90. package/TableCellColorCommand.js +11 -11
  91. package/TableCellColorCommand.js.flow +75 -75
  92. package/TableCellMenuPlugin.js +3 -4
  93. package/TableCellMenuPlugin.js.flow +132 -132
  94. package/TableInsertCommand.js +9 -10
  95. package/TableInsertCommand.js.flow +120 -120
  96. package/TableMergeCellsCommand.js +7 -8
  97. package/TableMergeCellsCommand.js.flow +112 -112
  98. package/TableNodesSpecs.js.flow +78 -78
  99. package/TablePlugins.js.flow +14 -14
  100. package/TableResizePlugin.js +3 -4
  101. package/TableResizePlugin.js.flow +631 -631
  102. package/TextColorMarkSpec.js.flow +35 -35
  103. package/TextHighlightMarkSpec.js.flow +38 -38
  104. package/TextInsertTabSpaceCommand.js +7 -8
  105. package/TextInsertTabSpaceCommand.js.flow +106 -106
  106. package/TextNoWrapMarkSpec.js.flow +14 -14
  107. package/TextNodeSpec.js.flow +7 -7
  108. package/TextSelectionMarkSpec.js.flow +24 -24
  109. package/TextSubMarkSpec.js.flow +20 -20
  110. package/TextSuperMarkSpec.js.flow +20 -20
  111. package/TextUnderlineMarkSpec.js.flow +27 -27
  112. package/Types.js +5 -0
  113. package/Types.js.flow +80 -75
  114. package/WebFontLoader.js +2 -3
  115. package/WebFontLoader.js.flow +22 -22
  116. package/blockQuoteInputRule.js.flow +36 -36
  117. package/bom.xml +21569 -23179
  118. package/browser.js.flow +7 -7
  119. package/buildEditorPlugins.js +2 -3
  120. package/buildEditorPlugins.js.flow +49 -49
  121. package/buildInputRules.js.flow +81 -81
  122. package/client/CollabConnector.js +12 -12
  123. package/client/CollabConnector.js.flow +90 -90
  124. package/client/EditorConnection.js +2 -3
  125. package/client/EditorConnection.js.flow +323 -323
  126. package/client/Licit.js +59 -60
  127. package/client/Licit.js.flow +643 -643
  128. package/client/Licit.test.js +2 -2
  129. package/client/Licit.test.js.flow +98 -98
  130. package/client/Reporter.js +2 -3
  131. package/client/Reporter.js.flow +37 -37
  132. package/client/SimpleConnector.js +1 -1
  133. package/client/SimpleConnector.js.flow +61 -61
  134. package/client/http.js.flow +70 -70
  135. package/client/licit.css +12 -12
  136. package/client/throttle.js.flow +27 -27
  137. package/convertFromDOMElement.js.flow +36 -36
  138. package/convertFromHTML.js.flow +17 -17
  139. package/convertFromJSON.js.flow +56 -56
  140. package/convertToCSSPTValue.js.flow +22 -22
  141. package/convertToJSON.js.flow +7 -7
  142. package/createCommand.js +8 -9
  143. package/createCommand.js.flow +62 -62
  144. package/createEditorKeyMap.js +1 -1
  145. package/createEditorKeyMap.js.flow +94 -94
  146. package/createEmptyEditorState.js.flow +31 -31
  147. package/createTableResizingPlugin.js.flow +86 -86
  148. package/findActionableCell.js.flow +74 -74
  149. package/findActiveMark.js.flow +32 -32
  150. package/hyphenize.js.flow +17 -17
  151. package/index.d.ts +165 -165
  152. package/index.js.flow +10 -10
  153. package/insertTable.js.flow +56 -56
  154. package/isEditorStateEmpty.js.flow +32 -32
  155. package/isTableNode.js.flow +15 -15
  156. package/joinDown.js.flow +27 -27
  157. package/joinListNode.js.flow +55 -55
  158. package/joinUp.js.flow +39 -39
  159. package/keymaps.js.flow +185 -185
  160. package/lookUpElement.js.flow +14 -14
  161. package/nodeAt.js.flow +12 -12
  162. package/normalizeHTML.js.flow +78 -78
  163. package/package.json +156 -155
  164. package/patchAnchorElements.js.flow +38 -38
  165. package/patchBreakElements.js.flow +22 -22
  166. package/patchElementInlineStyles.js.flow +92 -92
  167. package/patchListElements.js.flow +276 -276
  168. package/patchMathElements.js.flow +60 -60
  169. package/patchParagraphElements.js.flow +20 -20
  170. package/patchStyleElements.js.flow +196 -196
  171. package/patchTableElements.js.flow +89 -89
  172. package/rebaseDocWithSteps.js.flow +42 -42
  173. package/sanitizeURL.js.flow +13 -13
  174. package/splitListItem.js +1 -1
  175. package/splitListItem.js.flow +191 -191
  176. package/styles.css +19 -19
  177. package/styles0.css +29 -29
  178. package/toClosestFontPtSize.js.flow +22 -22
  179. package/toSafeHTMLDocument.js.flow +9 -9
  180. package/toggleBlockquote.js.flow +108 -108
  181. package/toggleCodeBlock.js.flow +102 -102
  182. package/ui/AlertInfo.js +7 -8
  183. package/ui/AlertInfo.js.flow +64 -64
  184. package/ui/BookmarkNodeView.js +8 -10
  185. package/ui/BookmarkNodeView.js.flow +66 -66
  186. package/ui/CommandButton.js +7 -8
  187. package/ui/CommandButton.js.flow +68 -68
  188. package/ui/CommandMenu.js +8 -9
  189. package/ui/CommandMenu.js.flow +75 -75
  190. package/ui/CommandMenuButton.js +13 -14
  191. package/ui/CommandMenuButton.js.flow +131 -131
  192. package/ui/CustomEditorView.js +8 -9
  193. package/ui/CustomEditorView.js.flow +28 -28
  194. package/ui/CustomMenu.js +3 -4
  195. package/ui/CustomMenu.js.flow +17 -17
  196. package/ui/CustomMenuItem.js +6 -8
  197. package/ui/CustomMenuItem.js.flow +36 -36
  198. package/ui/CustomNodeView.js +2 -3
  199. package/ui/CustomNodeView.js.flow +200 -200
  200. package/ui/CustomRadioButton.js +6 -7
  201. package/ui/CustomRadioButton.js.flow +65 -65
  202. package/ui/DocLayoutEditor.js +9 -10
  203. package/ui/DocLayoutEditor.js.flow +146 -146
  204. package/ui/Editor.js +15 -16
  205. package/ui/Editor.js.flow +288 -288
  206. package/ui/EditorFrameset.js +5 -6
  207. package/ui/EditorFrameset.js.flow +81 -81
  208. package/ui/EditorToolbar.js +13 -14
  209. package/ui/EditorToolbar.js.flow +218 -218
  210. package/ui/EditorToolbarConfig.js.flow +164 -164
  211. package/ui/FontSizeCommandMenuButton.js +5 -6
  212. package/ui/FontSizeCommandMenuButton.js.flow +66 -66
  213. package/ui/FontTypeCommandMenuButton.js +5 -6
  214. package/ui/FontTypeCommandMenuButton.js.flow +61 -61
  215. package/ui/Frag.js +3 -4
  216. package/ui/Frag.js.flow +13 -13
  217. package/ui/Icon.js +9 -12
  218. package/ui/Icon.js.flow +89 -89
  219. package/ui/ImageInlineEditor.js +6 -7
  220. package/ui/ImageInlineEditor.js.flow +67 -67
  221. package/ui/KeyCodes.js.flow +12 -12
  222. package/ui/LinkTooltip.js +9 -10
  223. package/ui/LinkTooltip.js.flow +85 -85
  224. package/ui/LinkURLEditor.js +9 -10
  225. package/ui/LinkURLEditor.js.flow +117 -117
  226. package/ui/ListItemNodeView.js +2 -3
  227. package/ui/ListItemNodeView.js.flow +98 -98
  228. package/ui/ListTypeButton.js +13 -14
  229. package/ui/ListTypeButton.js.flow +131 -131
  230. package/ui/ListTypeCommandButton.js +5 -6
  231. package/ui/ListTypeCommandButton.js.flow +85 -85
  232. package/ui/ListTypeMenu.js +11 -12
  233. package/ui/ListTypeMenu.js.flow +70 -70
  234. package/ui/LoadingIndicator.js +3 -4
  235. package/ui/LoadingIndicator.js.flow +20 -20
  236. package/ui/MathEditor.js +10 -11
  237. package/ui/MathEditor.js.flow +78 -78
  238. package/ui/MathInlineEditor.js +8 -9
  239. package/ui/MathInlineEditor.js.flow +102 -102
  240. package/ui/MathNodeView.js +14 -16
  241. package/ui/MathNodeView.js.flow +186 -186
  242. package/ui/PasteMenu.js +10 -11
  243. package/ui/PasteMenu.js.flow +57 -57
  244. package/ui/ResizeObserver.js.flow +106 -106
  245. package/ui/RichTextEditor.js +9 -10
  246. package/ui/RichTextEditor.js.flow +133 -133
  247. package/ui/SelectionObserver.js +2 -3
  248. package/ui/SelectionObserver.js.flow +134 -134
  249. package/ui/TableCellMenu.js +6 -7
  250. package/ui/TableCellMenu.js.flow +51 -51
  251. package/ui/TableGridSizeEditor.js +19 -21
  252. package/ui/TableGridSizeEditor.js.flow +184 -184
  253. package/ui/TableNodeView.js +3 -4
  254. package/ui/TableNodeView.js.flow +25 -25
  255. package/ui/bindScrollHandler.js.flow +46 -46
  256. package/ui/canUseCSSFont.js.flow +43 -43
  257. package/ui/czi-body-layout-editor.css +16 -16
  258. package/ui/czi-bookmark-view.css +10 -10
  259. package/ui/czi-cursor-placeholder.css +36 -36
  260. package/ui/czi-custom-menu-button.css +18 -18
  261. package/ui/czi-custom-menu-item.css +30 -30
  262. package/ui/czi-custom-menu.css +8 -8
  263. package/ui/czi-custom-radio-button.css +80 -80
  264. package/ui/czi-custom-scrollbar.css +21 -21
  265. package/ui/czi-editor-frameset.css +81 -81
  266. package/ui/czi-editor-toolbar.css +122 -122
  267. package/ui/czi-editor.css +220 -220
  268. package/ui/czi-form.css +107 -107
  269. package/ui/czi-frag.css +3 -3
  270. package/ui/czi-heading.css +40 -40
  271. package/ui/czi-icon.css +72 -72
  272. package/ui/czi-image-resize-box.css +165 -165
  273. package/ui/czi-image-upload-editor.css +57 -57
  274. package/ui/czi-image-upload-placeholder.css +50 -50
  275. package/ui/czi-image-url-editor.css +38 -38
  276. package/ui/czi-image-view.css +125 -125
  277. package/ui/czi-indent.css +137 -137
  278. package/ui/czi-inline-editor.css +20 -20
  279. package/ui/czi-link-tooltip.css +71 -71
  280. package/ui/czi-list.css +410 -410
  281. package/ui/czi-loading-indicator.css +111 -111
  282. package/ui/czi-math-view.css +62 -62
  283. package/ui/czi-selection-placeholder.css +24 -24
  284. package/ui/czi-table-cell-menu.css +14 -14
  285. package/ui/czi-table-grid-size-editor.css +37 -37
  286. package/ui/czi-table.css +87 -87
  287. package/ui/czi-vars.css +2 -2
  288. package/ui/findActiveFontSize.js.flow +58 -58
  289. package/ui/findActiveFontType.js.flow +38 -38
  290. package/ui/fonts.css +460 -460
  291. package/ui/handleEditorDrop.js.flow +28 -28
  292. package/ui/handleEditorKeyDown.js.flow +39 -39
  293. package/ui/handleEditorPaste.js.flow +33 -33
  294. package/ui/htmlElementToRect.js.flow +18 -18
  295. package/ui/icon-font.css +9 -9
  296. package/ui/injectStyleSheet.js.flow +42 -42
  297. package/ui/isElementFullyVisible.js.flow +26 -26
  298. package/ui/isOffline.js.flow +8 -8
  299. package/ui/isReactClass.js.flow +12 -12
  300. package/ui/listType.css +21 -21
  301. package/ui/mathquill-editor/MathQuillEditor.js +15 -17
  302. package/ui/mathquill-editor/MathQuillEditor.js.flow +159 -159
  303. package/ui/mathquill-editor/MathQuillEditorSymbols.js.flow +483 -483
  304. package/ui/mathquill-editor/MathQuillEditorSymbolsPanel.js +6 -7
  305. package/ui/mathquill-editor/MathQuillEditorSymbolsPanel.js.flow +50 -50
  306. package/ui/mathquill-editor/czi-mathquill-editor-symbols-panel.css +39 -39
  307. package/ui/mathquill-editor/czi-mathquill-editor.css +50 -50
  308. package/ui/mathquill-editor/mathquill-import-kludge.js.flow +24 -24
  309. package/ui/renderLaTeXAsHTML.js +1 -1
  310. package/ui/renderLaTeXAsHTML.js.flow +46 -46
  311. package/ui/resolveImage.js +1 -1
  312. package/ui/resolveImage.js.flow +123 -123
  313. package/ui/toCSSColor.js.flow +51 -51
  314. package/ui/toCSSLineSpacing.js.flow +55 -55
  315. package/ui/toHexColor.js.flow +26 -26
  316. package/ui/uuid.js.flow +9 -9
  317. package/uuid.js.flow +9 -9
package/patchListElements.js.flow CHANGED
@@ -1,276 +1,276 @@
1
- // @flow
2
-
3
- import HTMLMutator from './HTMLMutator.js';
4
- import nullthrows from 'nullthrows';
5
- import uuid from './ui/uuid.js';
6
-
7
- import { ATTRIBUTE_LIST_STYLE_TYPE } from './ListItemNodeSpec.js';
8
- import {
9
- ATTRIBUTE_INDENT,
10
- EMPTY_CSS_VALUE,
11
- convertMarginLeftToIndentValue,
12
- } from './ParagraphNodeSpec.js';
13
- import {
14
- ATTRIBUTE_COUNTER_RESET,
15
- ATTRIBUTE_FOLLOWING,
16
- } from './OrderedListNodeSpec.js';
17
- import { ATTRIBUTE_CSS_BEFORE_CONTENT } from './patchStyleElements.js';
18
-
19
- export default function patchListElements(doc: Document): void {
20
- // In Google Doc, lists are exported as indented
21
- // (e.g. style="margin-left: 48pt") list elements which is the default DOM
22
- // structure that `czi-prosemirror` supports. However, other doc providers
23
- // (e.g Office 365) may export lists as nested list elements that can't
24
- // be rendered properly.
25
- // Before proceeding further, it needs to convert the nested list elements
26
- // into indented list elements.
27
- liftNestedListElements(doc);
28
- Array.from(doc.querySelectorAll('ol, ul')).forEach(patchListElementsElement);
29
- }
30
-
31
- // This assumes that every 36pt maps to one indent level.
32
- const CHAR_BULLET = '\u25cf';
33
- const CHAR_CIRCLE = '\u25cb';
34
- const CHAR_SQUARE = '\u25a0';
35
- const CHAR_BOX = '\u274f';
36
- const CHAR_ZERO_SPACE = '\u200B';
37
- const INLINE_NODE_NAME_PATTERN = /^(#text)|(A|SPAN|B|STRONG)$/;
38
-
39
- function patchListElementsElement(listElement: HTMLElement): void {
40
- // If the children of `listElement` all have teh same marginLeft, assume
41
- // it to be indented.
42
- let marginLeft = undefined;
43
- let beforeContent = undefined;
44
- const { parentElement, children } = listElement;
45
-
46
- // A workaround to patch the issue when <ul /> or <ol /> is pasted as the
47
- // first child of <body />, its first <li /> somehow can't be wrapped
48
- // with the list. The hack is to prepend zero-width-space character
49
- // before the list.
50
- if (
51
- parentElement &&
52
- parentElement.nodeName === 'BODY' &&
53
- parentElement.firstChild === listElement
54
- ) {
55
- const tt = parentElement.ownerDocument.createTextNode(CHAR_ZERO_SPACE);
56
- parentElement.insertBefore(tt, listElement);
57
- }
58
-
59
- Array.from(children).forEach((listItemElement) => {
60
- const { style } = listItemElement;
61
- patchPaddingStyle(listItemElement);
62
-
63
- const bc = listItemElement.getAttribute(ATTRIBUTE_CSS_BEFORE_CONTENT) || '';
64
- if (beforeContent === undefined) {
65
- beforeContent = bc;
66
- }
67
- if (beforeContent !== bc) {
68
- beforeContent = null;
69
- }
70
-
71
- const ml = (style && style.marginLeft) || '';
72
- if (marginLeft === undefined) {
73
- marginLeft = ml;
74
- }
75
-
76
- if (ml !== marginLeft) {
77
- marginLeft = null;
78
- }
79
- });
80
-
81
- if (marginLeft) {
82
- const indent = convertMarginLeftToIndentValue(marginLeft);
83
- if (indent) {
84
- listElement.setAttribute(ATTRIBUTE_INDENT, String(indent));
85
- }
86
- }
87
-
88
- if (beforeContent) {
89
- beforeContent = String(beforeContent);
90
- let listStyleType;
91
- switch (true) {
92
- case beforeContent.indexOf(CHAR_BULLET) > -1:
93
- listStyleType = 'disc';
94
- break;
95
-
96
- case beforeContent.indexOf(CHAR_CIRCLE) > -1:
97
- listStyleType = 'circle';
98
- break;
99
-
100
- case beforeContent.indexOf(CHAR_SQUARE) > -1:
101
- listStyleType = 'square';
102
- break;
103
-
104
- case beforeContent.indexOf(CHAR_BOX) > -1:
105
- listStyleType = 'box';
106
- break;
107
-
108
- case beforeContent.indexOf('lower-latin') > -1:
109
- listStyleType = 'lower-latin';
110
- break;
111
-
112
- case beforeContent.indexOf('upper-latin') > -1:
113
- listStyleType = 'upper-latin';
114
- break;
115
-
116
- case beforeContent.indexOf('lower-roman') > -1:
117
- listStyleType = 'lower-roman';
118
- break;
119
-
120
- case beforeContent.indexOf('upper-roman') > -1:
121
- listStyleType = 'upper-roman';
122
- break;
123
-
124
- case beforeContent.indexOf('-') > -1:
125
- listStyleType = 'dash';
126
- break;
127
-
128
- default:
129
- console.log('unknown list style type', beforeContent);
130
- break;
131
- }
132
- if (listStyleType) {
133
- listElement.setAttribute(ATTRIBUTE_LIST_STYLE_TYPE, listStyleType);
134
- }
135
- }
136
- }
137
-
138
- // This moves the styles of <li /> into its content <p />.
139
- function patchPaddingStyle(listItemElement: HTMLElement): void {
140
- const { style, childNodes } = listItemElement;
141
- const { paddingTop, paddingBottom, lineHeight } = style;
142
- if (
143
- !EMPTY_CSS_VALUE.has(paddingBottom) &&
144
- !EMPTY_CSS_VALUE.has(paddingTop) &&
145
- !EMPTY_CSS_VALUE.has(lineHeight)
146
- ) {
147
- return;
148
- }
149
-
150
- const doc = listItemElement.ownerDocument;
151
- const frag = doc.createDocumentFragment();
152
- let contentIsInline = true;
153
-
154
- Array.from(childNodes).forEach((cn) => {
155
- contentIsInline =
156
- contentIsInline && INLINE_NODE_NAME_PATTERN.test(cn.nodeName);
157
- frag.appendChild(cn);
158
- });
159
-
160
- if (contentIsInline) {
161
- // Wrap all inline content with <p /> with the padding style applied.
162
- const pEl = doc.createElement('p');
163
- Object.assign(pEl.style, {
164
- lineHeight,
165
- paddingBottom,
166
- paddingTop,
167
- });
168
- pEl.appendChild(frag);
169
- listItemElement.appendChild(pEl);
170
- } else {
171
- // Unable to patch the style.
172
- listItemElement.appendChild(frag);
173
- }
174
- }
175
-
176
- // This converts all nested list elements into indented list elements.
177
- // For instance,
178
- // == UI ==
179
- // 1. AA
180
- // 1. BB
181
- // 2. BB
182
- // 2. AA
183
- // == DOM Structure (Before) ==
184
- // <ol> <!-- Parent List -->
185
- // <li>
186
- // AA
187
- // <ol> <!-- Child (nested) List -->
188
- // <li>BB</li>
189
- // <li>BB</li>
190
- // </ol>
191
- // </li>
192
- // <li> AA</li>
193
- // </ol>
194
- // == DOM Structure (After) ==
195
- // <ol name="x">
196
- // <li>AA</li>
197
- // </ol>
198
- // <ol data-indent="1">
199
- // <li>BB</li>
200
- // <li>BB</li>
201
- // </ol>
202
- // <ol data-following="x" data-counter-reset-"none">
203
- // <li>AA</li>
204
- // </ol>
205
- function liftNestedListElements(doc: Document): void {
206
- const selector = 'li > ol, li > ul';
207
- const els = Array.from(doc.querySelectorAll(selector));
208
- const htmlMutator = new HTMLMutator(doc);
209
-
210
- els.forEach((list) => {
211
- const indent = findIndentLevel(list);
212
- list.setAttribute('data-indent', String(indent));
213
-
214
- const parentListItem = nullthrows(list.parentElement);
215
- const parentList = nullthrows(parentListItem.parentElement);
216
- const parentListNodeName = parentList.nodeName.toLowerCase();
217
- const isLast = parentList.lastElementChild === parentListItem;
218
- const style = parentList.getAttribute('style') || '';
219
-
220
- // The parent list will be split into two lists and the second list should
221
- // follow the first list.
222
- const followingName = parentList.getAttribute('name') || uuid();
223
- parentList.setAttribute('name', followingName);
224
-
225
- // Stub HTML snippets that will lift the list.
226
-
227
- // Before:
228
- // <ol>
229
- // <li>
230
- // AAA
231
- // <ol><li>BBB</li></ol>
232
- // </li>
233
- // <li>CCC</li>
234
- // </ol>
235
- // After:
236
- // <ol><li>AAA</li></ol>
237
- // <ol><li>BBB</li></ol>
238
- // <ol><li>CCC</li></ol>
239
-
240
- // Close the parent list before the list.
241
- htmlMutator.insertHTMLBefore(`<\/${parentListNodeName}>`, list);
242
- // Open a new list after list.
243
- htmlMutator.insertHTMLAfter(
244
- `<${parentListNodeName}
245
- style="${style}"
246
- class="${parentList.className}"
247
- ${ATTRIBUTE_COUNTER_RESET}="none"
248
- ${ATTRIBUTE_FOLLOWING}="${followingName}">`,
249
- list
250
- );
251
-
252
- if (isLast) {
253
- // The new list after list is an empty list, comment it out.
254
- htmlMutator
255
- .insertHTMLAfter('<!--', list)
256
- .insertHTMLAfter('-->', parentList);
257
- }
258
- });
259
-
260
- htmlMutator.execute();
261
- }
262
-
263
- function findIndentLevel(el: Element): number {
264
- let indent = 0;
265
- let currentEl = el.parentElement;
266
- while (currentEl) {
267
- const { nodeName } = currentEl;
268
- if (nodeName === 'OL' || nodeName === 'UL') {
269
- indent++;
270
- } else if (nodeName !== 'LI') {
271
- break;
272
- }
273
- currentEl = currentEl.parentElement;
274
- }
275
- return indent;
276
- }
1
+ // @flow
2
+
3
+ import HTMLMutator from './HTMLMutator.js';
4
+ import nullthrows from 'nullthrows';
5
+ import uuid from './ui/uuid.js';
6
+
7
+ import { ATTRIBUTE_LIST_STYLE_TYPE } from './ListItemNodeSpec.js';
8
+ import {
9
+ ATTRIBUTE_INDENT,
10
+ EMPTY_CSS_VALUE,
11
+ convertMarginLeftToIndentValue,
12
+ } from './ParagraphNodeSpec.js';
13
+ import {
14
+ ATTRIBUTE_COUNTER_RESET,
15
+ ATTRIBUTE_FOLLOWING,
16
+ } from './OrderedListNodeSpec.js';
17
+ import { ATTRIBUTE_CSS_BEFORE_CONTENT } from './patchStyleElements.js';
18
+
19
+ export default function patchListElements(doc: Document): void {
20
+ // In Google Doc, lists are exported as indented
21
+ // (e.g. style="margin-left: 48pt") list elements which is the default DOM
22
+ // structure that `czi-prosemirror` supports. However, other doc providers
23
+ // (e.g Office 365) may export lists as nested list elements that can't
24
+ // be rendered properly.
25
+ // Before proceeding further, it needs to convert the nested list elements
26
+ // into indented list elements.
27
+ liftNestedListElements(doc);
28
+ Array.from(doc.querySelectorAll('ol, ul')).forEach(patchListElementsElement);
29
+ }
30
+
31
+ // This assumes that every 36pt maps to one indent level.
32
+ const CHAR_BULLET = '\u25cf';
33
+ const CHAR_CIRCLE = '\u25cb';
34
+ const CHAR_SQUARE = '\u25a0';
35
+ const CHAR_BOX = '\u274f';
36
+ const CHAR_ZERO_SPACE = '\u200B';
37
+ const INLINE_NODE_NAME_PATTERN = /^(#text)|(A|SPAN|B|STRONG)$/;
38
+
39
+ function patchListElementsElement(listElement: HTMLElement): void {
40
+ // If the children of `listElement` all have teh same marginLeft, assume
41
+ // it to be indented.
42
+ let marginLeft = undefined;
43
+ let beforeContent = undefined;
44
+ const { parentElement, children } = listElement;
45
+
46
+ // A workaround to patch the issue when <ul /> or <ol /> is pasted as the
47
+ // first child of <body />, its first <li /> somehow can't be wrapped
48
+ // with the list. The hack is to prepend zero-width-space character
49
+ // before the list.
50
+ if (
51
+ parentElement &&
52
+ parentElement.nodeName === 'BODY' &&
53
+ parentElement.firstChild === listElement
54
+ ) {
55
+ const tt = parentElement.ownerDocument.createTextNode(CHAR_ZERO_SPACE);
56
+ parentElement.insertBefore(tt, listElement);
57
+ }
58
+
59
+ Array.from(children).forEach((listItemElement) => {
60
+ const { style } = listItemElement;
61
+ patchPaddingStyle(listItemElement);
62
+
63
+ const bc = listItemElement.getAttribute(ATTRIBUTE_CSS_BEFORE_CONTENT) || '';
64
+ if (beforeContent === undefined) {
65
+ beforeContent = bc;
66
+ }
67
+ if (beforeContent !== bc) {
68
+ beforeContent = null;
69
+ }
70
+
71
+ const ml = (style && style.marginLeft) || '';
72
+ if (marginLeft === undefined) {
73
+ marginLeft = ml;
74
+ }
75
+
76
+ if (ml !== marginLeft) {
77
+ marginLeft = null;
78
+ }
79
+ });
80
+
81
+ if (marginLeft) {
82
+ const indent = convertMarginLeftToIndentValue(marginLeft);
83
+ if (indent) {
84
+ listElement.setAttribute(ATTRIBUTE_INDENT, String(indent));
85
+ }
86
+ }
87
+
88
+ if (beforeContent) {
89
+ beforeContent = String(beforeContent);
90
+ let listStyleType;
91
+ switch (true) {
92
+ case beforeContent.indexOf(CHAR_BULLET) > -1:
93
+ listStyleType = 'disc';
94
+ break;
95
+
96
+ case beforeContent.indexOf(CHAR_CIRCLE) > -1:
97
+ listStyleType = 'circle';
98
+ break;
99
+
100
+ case beforeContent.indexOf(CHAR_SQUARE) > -1:
101
+ listStyleType = 'square';
102
+ break;
103
+
104
+ case beforeContent.indexOf(CHAR_BOX) > -1:
105
+ listStyleType = 'box';
106
+ break;
107
+
108
+ case beforeContent.indexOf('lower-latin') > -1:
109
+ listStyleType = 'lower-latin';
110
+ break;
111
+
112
+ case beforeContent.indexOf('upper-latin') > -1:
113
+ listStyleType = 'upper-latin';
114
+ break;
115
+
116
+ case beforeContent.indexOf('lower-roman') > -1:
117
+ listStyleType = 'lower-roman';
118
+ break;
119
+
120
+ case beforeContent.indexOf('upper-roman') > -1:
121
+ listStyleType = 'upper-roman';
122
+ break;
123
+
124
+ case beforeContent.indexOf('-') > -1:
125
+ listStyleType = 'dash';
126
+ break;
127
+
128
+ default:
129
+ console.log('unknown list style type', beforeContent);
130
+ break;
131
+ }
132
+ if (listStyleType) {
133
+ listElement.setAttribute(ATTRIBUTE_LIST_STYLE_TYPE, listStyleType);
134
+ }
135
+ }
136
+ }
137
+
138
+ // This moves the styles of <li /> into its content <p />.
139
+ function patchPaddingStyle(listItemElement: HTMLElement): void {
140
+ const { style, childNodes } = listItemElement;
141
+ const { paddingTop, paddingBottom, lineHeight } = style;
142
+ if (
143
+ !EMPTY_CSS_VALUE.has(paddingBottom) &&
144
+ !EMPTY_CSS_VALUE.has(paddingTop) &&
145
+ !EMPTY_CSS_VALUE.has(lineHeight)
146
+ ) {
147
+ return;
148
+ }
149
+
150
+ const doc = listItemElement.ownerDocument;
151
+ const frag = doc.createDocumentFragment();
152
+ let contentIsInline = true;
153
+
154
+ Array.from(childNodes).forEach((cn) => {
155
+ contentIsInline =
156
+ contentIsInline && INLINE_NODE_NAME_PATTERN.test(cn.nodeName);
157
+ frag.appendChild(cn);
158
+ });
159
+
160
+ if (contentIsInline) {
161
+ // Wrap all inline content with <p /> with the padding style applied.
162
+ const pEl = doc.createElement('p');
163
+ Object.assign(pEl.style, {
164
+ lineHeight,
165
+ paddingBottom,
166
+ paddingTop,
167
+ });
168
+ pEl.appendChild(frag);
169
+ listItemElement.appendChild(pEl);
170
+ } else {
171
+ // Unable to patch the style.
172
+ listItemElement.appendChild(frag);
173
+ }
174
+ }
175
+
176
+ // This converts all nested list elements into indented list elements.
177
+ // For instance,
178
+ // == UI ==
179
+ // 1. AA
180
+ // 1. BB
181
+ // 2. BB
182
+ // 2. AA
183
+ // == DOM Structure (Before) ==
184
+ // <ol> <!-- Parent List -->
185
+ // <li>
186
+ // AA
187
+ // <ol> <!-- Child (nested) List -->
188
+ // <li>BB</li>
189
+ // <li>BB</li>
190
+ // </ol>
191
+ // </li>
192
+ // <li> AA</li>
193
+ // </ol>
194
+ // == DOM Structure (After) ==
195
+ // <ol name="x">
196
+ // <li>AA</li>
197
+ // </ol>
198
+ // <ol data-indent="1">
199
+ // <li>BB</li>
200
+ // <li>BB</li>
201
+ // </ol>
202
+ // <ol data-following="x" data-counter-reset-"none">
203
+ // <li>AA</li>
204
+ // </ol>
205
+ function liftNestedListElements(doc: Document): void {
206
+ const selector = 'li > ol, li > ul';
207
+ const els = Array.from(doc.querySelectorAll(selector));
208
+ const htmlMutator = new HTMLMutator(doc);
209
+
210
+ els.forEach((list) => {
211
+ const indent = findIndentLevel(list);
212
+ list.setAttribute('data-indent', String(indent));
213
+
214
+ const parentListItem = nullthrows(list.parentElement);
215
+ const parentList = nullthrows(parentListItem.parentElement);
216
+ const parentListNodeName = parentList.nodeName.toLowerCase();
217
+ const isLast = parentList.lastElementChild === parentListItem;
218
+ const style = parentList.getAttribute('style') || '';
219
+
220
+ // The parent list will be split into two lists and the second list should
221
+ // follow the first list.
222
+ const followingName = parentList.getAttribute('name') || uuid();
223
+ parentList.setAttribute('name', followingName);
224
+
225
+ // Stub HTML snippets that will lift the list.
226
+
227
+ // Before:
228
+ // <ol>
229
+ // <li>
230
+ // AAA
231
+ // <ol><li>BBB</li></ol>
232
+ // </li>
233
+ // <li>CCC</li>
234
+ // </ol>
235
+ // After:
236
+ // <ol><li>AAA</li></ol>
237
+ // <ol><li>BBB</li></ol>
238
+ // <ol><li>CCC</li></ol>
239
+
240
+ // Close the parent list before the list.
241
+ htmlMutator.insertHTMLBefore(`<\/${parentListNodeName}>`, list);
242
+ // Open a new list after list.
243
+ htmlMutator.insertHTMLAfter(
244
+ `<${parentListNodeName}
245
+ style="${style}"
246
+ class="${parentList.className}"
247
+ ${ATTRIBUTE_COUNTER_RESET}="none"
248
+ ${ATTRIBUTE_FOLLOWING}="${followingName}">`,
249
+ list
250
+ );
251
+
252
+ if (isLast) {
253
+ // The new list after list is an empty list, comment it out.
254
+ htmlMutator
255
+ .insertHTMLAfter('<!--', list)
256
+ .insertHTMLAfter('-->', parentList);
257
+ }
258
+ });
259
+
260
+ htmlMutator.execute();
261
+ }
262
+
263
+ function findIndentLevel(el: Element): number {
264
+ let indent = 0;
265
+ let currentEl = el.parentElement;
266
+ while (currentEl) {
267
+ const { nodeName } = currentEl;
268
+ if (nodeName === 'OL' || nodeName === 'UL') {
269
+ indent++;
270
+ } else if (nodeName !== 'LI') {
271
+ break;
272
+ }
273
+ currentEl = currentEl.parentElement;
274
+ }
275
+ return indent;
276
+ }
package/patchMathElements.js.flow CHANGED
@@ -1,60 +1,60 @@
1
- // @flow
2
-
3
- import queryString from 'query-string';
4
- import url from 'url';
5
- export default function patchMathElements(doc: Document): void {
6
- Array.from(doc.querySelectorAll('img')).forEach(patchGoogleEquationElement);
7
- }
8
-
9
- // See https://developers.google.com/chart/image/docs/chart_params#gcharts_cht
10
- const PARAM_CHART_CHART_TYPE = 'cht';
11
- const PARAM_CHART_LABEL = 'chl';
12
-
13
- // Google Doc exports math equation content as single image element that loads
14
- // its content from google. For example:
15
- // <img src="https://www.google.com/chart?cht=tx&amp;c...p;chl=m%E2%88%A0C" />
16
- // Unfortunately, such image often fails to load because its url contains the
17
- // value that the Google Chart API does not support.
18
- // The workaround is to use KaTex (https://katex.org/) whoch supports a broader
19
- // set of characters that can be safely converted into math quations.
20
-
21
- function patchGoogleEquationElement(el: HTMLElement): void {
22
- const { ownerDocument, parentElement } = el;
23
- if (!ownerDocument || !parentElement) {
24
- return;
25
- }
26
- const src = el.getAttribute('src');
27
- const content = getGoogleEquationContent(src);
28
- if (!content) {
29
- return;
30
- }
31
-
32
- // Replace `<img src="..." />` with `<math data-latex="..." />`.
33
- // Note that this requires the schema to support `MathNodeSpec`.
34
- const math = ownerDocument.createElement('math');
35
- math.setAttribute('data-latex', content);
36
- parentElement.insertBefore(math, el);
37
- parentElement.removeChild(el);
38
- }
39
-
40
- function getGoogleEquationContent(src: ?string): ?string {
41
- if (!src) {
42
- return null;
43
- }
44
- const { host, pathname, query } = url.parse(src);
45
- if (host !== 'www.google.com' || pathname !== '/chart') {
46
- return null;
47
- }
48
-
49
- const params = queryString.parse(query);
50
- const chartType = params[PARAM_CHART_CHART_TYPE];
51
- const label = params[PARAM_CHART_LABEL];
52
-
53
- // Google exports math equation as a special chart with plan text only
54
- // contents.
55
- if (chartType !== 'tx' || !label) {
56
- return null;
57
- }
58
-
59
- return label;
60
- }
1
+ // @flow
2
+
3
+ import queryString from 'query-string';
4
+ import url from 'url';
5
+ export default function patchMathElements(doc: Document): void {
6
+ Array.from(doc.querySelectorAll('img')).forEach(patchGoogleEquationElement);
7
+ }
8
+
9
+ // See https://developers.google.com/chart/image/docs/chart_params#gcharts_cht
10
+ const PARAM_CHART_CHART_TYPE = 'cht';
11
+ const PARAM_CHART_LABEL = 'chl';
12
+
13
+ // Google Doc exports math equation content as single image element that loads
14
+ // its content from google. For example:
15
+ // <img src="https://www.google.com/chart?cht=tx&amp;c...p;chl=m%E2%88%A0C" />
16
+ // Unfortunately, such image often fails to load because its url contains the
17
+ // value that the Google Chart API does not support.
18
+ // The workaround is to use KaTex (https://katex.org/) whoch supports a broader
19
+ // set of characters that can be safely converted into math quations.
20
+
21
+ function patchGoogleEquationElement(el: HTMLElement): void {
22
+ const { ownerDocument, parentElement } = el;
23
+ if (!ownerDocument || !parentElement) {
24
+ return;
25
+ }
26
+ const src = el.getAttribute('src');
27
+ const content = getGoogleEquationContent(src);
28
+ if (!content) {
29
+ return;
30
+ }
31
+
32
+ // Replace `<img src="..." />` with `<math data-latex="..." />`.
33
+ // Note that this requires the schema to support `MathNodeSpec`.
34
+ const math = ownerDocument.createElement('math');
35
+ math.setAttribute('data-latex', content);
36
+ parentElement.insertBefore(math, el);
37
+ parentElement.removeChild(el);
38
+ }
39
+
40
+ function getGoogleEquationContent(src: ?string): ?string {
41
+ if (!src) {
42
+ return null;
43
+ }
44
+ const { host, pathname, query } = url.parse(src);
45
+ if (host !== 'www.google.com' || pathname !== '/chart') {
46
+ return null;
47
+ }
48
+
49
+ const params = queryString.parse(query);
50
+ const chartType = params[PARAM_CHART_CHART_TYPE];
51
+ const label = params[PARAM_CHART_LABEL];
52
+
53
+ // Google exports math equation as a special chart with plan text only
54
+ // contents.
55
+ if (chartType !== 'tx' || !label) {
56
+ return null;
57
+ }
58
+
59
+ return label;
60
+ }