@puredesktop/platform-editor 1.0.0-beta.1 → 2.1.0

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 (45) hide show
  1. package/package.json +1 -1
  2. package/src/CollapsePanel.tsx +35 -35
  3. package/src/DocumentDiffView.tsx +130 -130
  4. package/src/DocumentEditor.test.ts +118 -118
  5. package/src/DocumentEditor.tsx +2651 -2631
  6. package/src/alignedLineDiff.test.ts +52 -52
  7. package/src/alignedLineDiff.ts +67 -67
  8. package/src/collectionAssetSrc.ts +2 -2
  9. package/src/commentUtils.test.ts +350 -350
  10. package/src/commentUtils.ts +546 -546
  11. package/src/constants/toolKeys.ts +14 -14
  12. package/src/contentFormat.test.ts +27 -27
  13. package/src/contentFormat.ts +18 -18
  14. package/src/editorExtensions.ts +155 -155
  15. package/src/extensions/appliedChangeMark.ts +115 -115
  16. package/src/extensions/autoReviewPrompts.test.ts +529 -529
  17. package/src/extensions/autoReviewPrompts.ts +1442 -1442
  18. package/src/extensions/collectionImage.ts +26 -26
  19. package/src/extensions/collectionImagePaste.ts +215 -215
  20. package/src/extensions/commentMark.ts +223 -223
  21. package/src/extensions/documentAssetIdentity.ts +54 -54
  22. package/src/extensions/figure.ts +92 -92
  23. package/src/extensions/footnote.ts +186 -186
  24. package/src/extensions/indexMarker.ts +88 -88
  25. package/src/extensions/mathEditing.ts +239 -239
  26. package/src/extensions/mermaidBlock.tsx +297 -297
  27. package/src/extensions/slashCommands.test.ts +170 -170
  28. package/src/extensions/slashCommands.ts +746 -746
  29. package/src/extensions/smartTypography.test.ts +74 -74
  30. package/src/extensions/smartTypography.ts +120 -120
  31. package/src/index.ts +138 -137
  32. package/src/insertCollectionImage.test.ts +60 -60
  33. package/src/insertCollectionImage.ts +63 -63
  34. package/src/insertInlineAssetKind.test.ts +67 -67
  35. package/src/insertInlineAssetKind.ts +49 -49
  36. package/src/mermaidPreview.test.ts +54 -54
  37. package/src/mermaidPreview.ts +115 -115
  38. package/src/styled.ts +697 -676
  39. package/src/toolbar/ToolBtn.tsx +77 -63
  40. package/src/toolbar/Toolbar.test.tsx +325 -325
  41. package/src/toolbar/Toolbar.tsx +662 -624
  42. package/src/toolbar/groups/HeadingGroup.tsx +175 -153
  43. package/src/toolbar/overlayTypes.ts +28 -28
  44. package/src/useEditorExtensions.ts +22 -22
  45. package/src/utils/markdownUtils.ts +331 -331
package/src/toolbar/ToolBtn.tsx CHANGED
@@ -1,63 +1,77 @@
1
- import type React from 'react'
2
- import { styled } from 'styled-components'
3
-
4
- export const ToolBtn = styled.button.attrs<{ $active?: boolean }>({
5
- onMouseDown: (event: React.MouseEvent<HTMLButtonElement>) => {
6
- event.preventDefault()
7
- },
8
- })<{ $active?: boolean }>`
9
- align-items: center;
10
- background: ${({ $active }) =>
11
- $active
12
- ? 'rgb(from var(--platform-colors-text) r g b / 0.05)'
13
- : 'transparent'};
14
- border: none;
15
- border-radius: 6px;
16
- color: var(--platform-colors-text);
17
- cursor: pointer;
18
- display: flex;
19
- font-size: 13px;
20
- font-weight: ${({ $active }) => ($active ? '600' : '400')};
21
- height: 30px;
22
- justify-content: center;
23
- min-width: 30px;
24
- padding: 0 7px;
25
- transition: background 0.12s ease, color 0.12s ease, opacity 0.12s ease;
26
-
27
- &:disabled {
28
- cursor: not-allowed;
29
- opacity: 0.35;
30
- }
31
-
32
- &:hover:not(:disabled) {
33
- background: ${({ $active }) =>
34
- $active
35
- ? 'rgb(from var(--platform-colors-text) r g b / 0.08)'
36
- : 'rgb(from var(--platform-colors-text) r g b / 0.045)'};
37
- }
38
- `
39
-
40
- export const Divider = styled.span`
41
- background: rgb(from var(--platform-colors-border) r g b / 0.92);
42
- display: inline-block;
43
- height: 16px;
44
- margin: 0 12px;
45
- width: 1px;
46
- `
47
-
48
- export const ToolbarRow = styled.div`
49
- align-items: center;
50
- display: flex;
51
- flex-shrink: 0;
52
- flex-wrap: wrap;
53
- gap: 0;
54
- margin: 0 auto;
55
- padding: 4px 8px;
56
- position: sticky;
57
- top: 0;
58
- z-index: 5;
59
- width: 100%;
60
- max-width: 680px;
61
- background: var(--platform-colors-bg);
62
- border-bottom: 1px solid var(--platform-colors-divider);
63
- `
1
+ import type React from 'react'
2
+ import { styled } from 'styled-components'
3
+
4
+ export const ToolBtn = styled.button.attrs<{ $active?: boolean }>({
5
+ onMouseDown: (event: React.MouseEvent<HTMLButtonElement>) => {
6
+ event.preventDefault()
7
+ },
8
+ })<{ $active?: boolean }>`
9
+ align-items: center;
10
+ background: ${({ $active }) =>
11
+ $active
12
+ ? 'rgb(from var(--editor-toolbar-text, var(--editor-paper-text, var(--platform-colors-text))) r g b / 0.06)'
13
+ : 'transparent'};
14
+ border: none;
15
+ border-radius: 6px;
16
+ color: var(
17
+ --editor-toolbar-text,
18
+ var(--editor-paper-text, var(--platform-colors-text))
19
+ );
20
+ cursor: pointer;
21
+ display: flex;
22
+ font-size: 13px;
23
+ font-weight: ${({ $active }) => ($active ? '600' : '400')};
24
+ height: 30px;
25
+ justify-content: center;
26
+ min-width: 30px;
27
+ padding: 0 7px;
28
+ transition: background 0.12s ease, color 0.12s ease, opacity 0.12s ease;
29
+
30
+ &:disabled {
31
+ cursor: not-allowed;
32
+ opacity: 0.35;
33
+ }
34
+
35
+ &:hover:not(:disabled) {
36
+ background: ${({ $active }) =>
37
+ $active
38
+ ? 'rgb(from var(--editor-toolbar-text, var(--editor-paper-text, var(--platform-colors-text))) r g b / 0.1)'
39
+ : 'rgb(from var(--editor-toolbar-text, var(--editor-paper-text, var(--platform-colors-text))) r g b / 0.06)'};
40
+ }
41
+ `
42
+
43
+ export const ToolbarInlineToolButton = styled(ToolBtn)``
44
+
45
+ export const Divider = styled.span`
46
+ background: rgb(
47
+ from
48
+ var(
49
+ --editor-toolbar-border,
50
+ var(--editor-paper-border, var(--platform-colors-border))
51
+ )
52
+ r g b / 0.92
53
+ );
54
+ display: inline-block;
55
+ height: 16px;
56
+ margin: 0 12px;
57
+ width: 1px;
58
+ `
59
+
60
+ export const ToolbarRow = styled.div`
61
+ align-items: center;
62
+ display: flex;
63
+ flex-shrink: 0;
64
+ flex-wrap: wrap;
65
+ gap: 0;
66
+ margin: 0 auto;
67
+ padding: 4px 8px;
68
+ position: sticky;
69
+ top: 0;
70
+ z-index: 5;
71
+ width: 100%;
72
+ max-width: 680px;
73
+ background: var(
74
+ --editor-toolbar-bg,
75
+ var(--editor-paper-subtle, var(--platform-colors-bg))
76
+ );
77
+ `