@flozy/editor 1.0.5 → 1.0.7
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/Editor/CollaborativeEditor.js +116 -0
- package/dist/Editor/CommonEditor.js +132 -0
- package/dist/Editor/Editor.css +115 -0
- package/dist/Editor/Elements/CodeToText/CodeToText.css +57 -0
- package/dist/Editor/Elements/CodeToText/CodeToText.js +112 -0
- package/dist/Editor/Elements/CodeToText/CodeToTextButton.js +18 -0
- package/dist/Editor/Elements/CodeToText/HtmlCode.js +54 -0
- package/dist/Editor/Elements/CodeToText/HtmlContextMenu.js +39 -0
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +38 -0
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +116 -0
- package/dist/Editor/Elements/Color Picker/defaultColors.js +1 -0
- package/dist/Editor/Elements/Embed/Embed.css +14 -0
- package/dist/Editor/Elements/Embed/Embed.js +94 -0
- package/dist/Editor/Elements/Embed/Image.js +70 -0
- package/dist/Editor/Elements/Embed/Video.js +62 -0
- package/dist/Editor/Elements/Equation/Equation.js +24 -0
- package/dist/Editor/Elements/Equation/EquationButton.js +66 -0
- package/dist/Editor/Elements/Equation/styles.css +4 -0
- package/dist/Editor/Elements/Grid/Grid.js +53 -0
- package/dist/Editor/Elements/Grid/GridButton.js +19 -0
- package/dist/Editor/Elements/Grid/GridItem.js +53 -0
- package/dist/Editor/Elements/ID/Id.js +56 -0
- package/dist/Editor/Elements/Link/Link.js +34 -0
- package/dist/Editor/Elements/Link/LinkButton.js +77 -0
- package/dist/Editor/Elements/Link/styles.css +20 -0
- package/dist/Editor/Elements/Mentions/Mentions.js +34 -0
- package/dist/Editor/Elements/NewLine/NewLineButton.js +22 -0
- package/dist/Editor/Elements/Table/Table.js +15 -0
- package/dist/Editor/Elements/Table/TableSelector.css +18 -0
- package/dist/Editor/Elements/Table/TableSelector.js +93 -0
- package/dist/Editor/Elements/TableContextMenu/TableContextMenu.js +91 -0
- package/dist/Editor/Elements/TableContextMenu/styles.css +18 -0
- package/dist/Editor/RemoteCursorOverlay/Overlay.js +75 -0
- package/dist/Editor/Toolbar/Toolbar.js +166 -0
- package/dist/Editor/Toolbar/styles.css +28 -0
- package/dist/Editor/Toolbar/toolbarGroups.js +131 -0
- package/dist/Editor/Toolbar/toolbarIcons/align-center.svg +1 -0
- package/dist/Editor/Toolbar/toolbarIcons/align-left.svg +1 -0
- package/dist/Editor/Toolbar/toolbarIcons/align-right.svg +1 -0
- package/dist/Editor/Toolbar/toolbarIcons/blockquote.svg +1 -0
- package/dist/Editor/Toolbar/toolbarIcons/bold.png +0 -0
- package/dist/Editor/Toolbar/toolbarIcons/fontColor.svg +4 -0
- package/dist/Editor/Toolbar/toolbarIcons/headingOne.svg +3 -0
- package/dist/Editor/Toolbar/toolbarIcons/headingTwo.svg +3 -0
- package/dist/Editor/Toolbar/toolbarIcons/italic.png +0 -0
- package/dist/Editor/Toolbar/toolbarIcons/link.svg +1 -0
- package/dist/Editor/Toolbar/toolbarIcons/orderedList.svg +1 -0
- package/dist/Editor/Toolbar/toolbarIcons/strikethrough.png +0 -0
- package/dist/Editor/Toolbar/toolbarIcons/subscript.svg +1 -0
- package/dist/Editor/Toolbar/toolbarIcons/superscript.svg +1 -0
- package/dist/Editor/Toolbar/toolbarIcons/textColor.png +0 -0
- package/dist/Editor/Toolbar/toolbarIcons/underline.png +0 -0
- package/dist/Editor/Toolbar/toolbarIcons/unlink.svg +1 -0
- package/dist/Editor/Toolbar/toolbarIcons/unorderedList.svg +1 -0
- package/dist/Editor/YjsProvider.js +9 -0
- package/dist/Editor/common/Button.js +21 -0
- package/dist/Editor/common/Icon.js +114 -0
- package/dist/Editor/common/MentionsPopup.js +54 -0
- package/dist/Editor/hooks/useMentions.js +44 -0
- package/dist/Editor/hooks/withCollaborative.js +15 -0
- package/dist/Editor/hooks/withCommon.js +11 -0
- package/dist/Editor/plugins/withEmbeds.js +29 -0
- package/dist/Editor/plugins/withEquation.js +8 -0
- package/dist/Editor/plugins/withLinks.js +8 -0
- package/dist/Editor/plugins/withMentions.js +18 -0
- package/dist/Editor/plugins/withTable.js +61 -0
- package/dist/Editor/utils/SlateUtilityFunctions.js +224 -0
- package/dist/Editor/utils/customHooks/useContextMenu.js +37 -0
- package/dist/Editor/utils/customHooks/useFormat.js +21 -0
- package/dist/Editor/utils/customHooks/usePopup.js +21 -0
- package/dist/Editor/utils/customHooks/useResize.js +47 -0
- package/dist/Editor/utils/draftToSlate.js +111 -0
- package/dist/Editor/utils/embed.js +24 -0
- package/dist/Editor/utils/equation.js +23 -0
- package/dist/Editor/utils/events.js +76 -0
- package/dist/Editor/utils/grid.js +13 -0
- package/dist/Editor/utils/gridItem.js +19 -0
- package/dist/Editor/utils/link.js +52 -0
- package/dist/Editor/utils/mentions.js +12 -0
- package/dist/Editor/utils/paragraph.js +6 -0
- package/dist/Editor/utils/serializer.js +28 -0
- package/dist/Editor/utils/table.js +129 -0
- package/dist/index.js +4 -0
- package/package.json +18 -8
@@ -0,0 +1,131 @@
|
|
1
|
+
const toolbarGroups = [[{
|
2
|
+
id: 1,
|
3
|
+
format: "fontFamily",
|
4
|
+
type: "dropdown",
|
5
|
+
options: [{
|
6
|
+
text: "Sans Serif",
|
7
|
+
value: "sans"
|
8
|
+
}, {
|
9
|
+
text: "Serif",
|
10
|
+
value: "serif"
|
11
|
+
}, {
|
12
|
+
text: "MonoSpace",
|
13
|
+
value: "monospace"
|
14
|
+
}]
|
15
|
+
}, {
|
16
|
+
id: 2,
|
17
|
+
format: "fontSize",
|
18
|
+
type: "dropdown",
|
19
|
+
options: [{
|
20
|
+
text: "Small",
|
21
|
+
value: "small"
|
22
|
+
}, {
|
23
|
+
text: "Normal",
|
24
|
+
value: "normal"
|
25
|
+
}, {
|
26
|
+
text: "Medium",
|
27
|
+
value: "medium"
|
28
|
+
}, {
|
29
|
+
text: "Huge",
|
30
|
+
value: "huge"
|
31
|
+
}]
|
32
|
+
}], [{
|
33
|
+
id: 3,
|
34
|
+
format: "bold",
|
35
|
+
type: "mark"
|
36
|
+
}, {
|
37
|
+
id: 4,
|
38
|
+
format: "italic",
|
39
|
+
type: "mark"
|
40
|
+
}, {
|
41
|
+
id: 5,
|
42
|
+
format: "underline",
|
43
|
+
type: "mark"
|
44
|
+
}, {
|
45
|
+
id: 6,
|
46
|
+
format: "strikethrough",
|
47
|
+
type: "mark"
|
48
|
+
}], [{
|
49
|
+
id: 7,
|
50
|
+
format: "color",
|
51
|
+
type: "color-picker"
|
52
|
+
}, {
|
53
|
+
id: 8,
|
54
|
+
format: "bgColor",
|
55
|
+
type: "color-picker"
|
56
|
+
}], [{
|
57
|
+
id: 9,
|
58
|
+
format: "superscript",
|
59
|
+
type: "mark"
|
60
|
+
}, {
|
61
|
+
id: 10,
|
62
|
+
format: "subscript",
|
63
|
+
type: "mark"
|
64
|
+
}], [{
|
65
|
+
id: 11,
|
66
|
+
format: "headingOne",
|
67
|
+
type: "block"
|
68
|
+
}, {
|
69
|
+
id: 12,
|
70
|
+
format: "headingTwo",
|
71
|
+
type: "block"
|
72
|
+
}, {
|
73
|
+
id: 13,
|
74
|
+
format: "headingThree",
|
75
|
+
type: "block"
|
76
|
+
}, {
|
77
|
+
id: 14,
|
78
|
+
format: "blockquote",
|
79
|
+
type: "block"
|
80
|
+
}], [{
|
81
|
+
id: 15,
|
82
|
+
format: "orderedList",
|
83
|
+
type: "block"
|
84
|
+
}, {
|
85
|
+
id: 16,
|
86
|
+
format: "unorderedList",
|
87
|
+
type: "block"
|
88
|
+
}], [{
|
89
|
+
id: 17,
|
90
|
+
format: "alignLeft",
|
91
|
+
type: "block"
|
92
|
+
}, {
|
93
|
+
id: 18,
|
94
|
+
format: "alignCenter",
|
95
|
+
type: "block"
|
96
|
+
}, {
|
97
|
+
id: 19,
|
98
|
+
format: "alignRight",
|
99
|
+
type: "block"
|
100
|
+
}], [{
|
101
|
+
id: 20,
|
102
|
+
format: "link",
|
103
|
+
type: "link"
|
104
|
+
}, {
|
105
|
+
id: 21,
|
106
|
+
format: "image",
|
107
|
+
type: "embed"
|
108
|
+
}, {
|
109
|
+
id: 22,
|
110
|
+
format: "video",
|
111
|
+
type: "embed"
|
112
|
+
}, {
|
113
|
+
id: 23,
|
114
|
+
type: "table"
|
115
|
+
}], [{
|
116
|
+
id: 25,
|
117
|
+
type: "id"
|
118
|
+
}, {
|
119
|
+
id: 26,
|
120
|
+
type: "equation"
|
121
|
+
}, {
|
122
|
+
id: 27,
|
123
|
+
type: "codeToText"
|
124
|
+
}, {
|
125
|
+
id: 28,
|
126
|
+
type: "grid"
|
127
|
+
}, {
|
128
|
+
id: 29,
|
129
|
+
type: "newLine"
|
130
|
+
}]];
|
131
|
+
export default toolbarGroups;
|
@@ -0,0 +1 @@
|
|
1
|
+
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="align-center" class="svg-inline--fa fa-align-center fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M432 160H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0 256H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM108.1 96h231.81A12.09 12.09 0 0 0 352 83.9V44.09A12.09 12.09 0 0 0 339.91 32H108.1A12.09 12.09 0 0 0 96 44.09V83.9A12.1 12.1 0 0 0 108.1 96zm231.81 256A12.09 12.09 0 0 0 352 339.9v-39.81A12.09 12.09 0 0 0 339.91 288H108.1A12.09 12.09 0 0 0 96 300.09v39.81a12.1 12.1 0 0 0 12.1 12.1z"></path></svg>
|
@@ -0,0 +1 @@
|
|
1
|
+
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="align-left" class="svg-inline--fa fa-align-left fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M12.83 352h262.34A12.82 12.82 0 0 0 288 339.17v-38.34A12.82 12.82 0 0 0 275.17 288H12.83A12.82 12.82 0 0 0 0 300.83v38.34A12.82 12.82 0 0 0 12.83 352zm0-256h262.34A12.82 12.82 0 0 0 288 83.17V44.83A12.82 12.82 0 0 0 275.17 32H12.83A12.82 12.82 0 0 0 0 44.83v38.34A12.82 12.82 0 0 0 12.83 96zM432 160H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0 256H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"></path></svg>
|
@@ -0,0 +1 @@
|
|
1
|
+
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="align-right" class="svg-inline--fa fa-align-right fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 224h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16zm416 192H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm3.17-384H172.83A12.82 12.82 0 0 0 160 44.83v38.34A12.82 12.82 0 0 0 172.83 96h262.34A12.82 12.82 0 0 0 448 83.17V44.83A12.82 12.82 0 0 0 435.17 32zm0 256H172.83A12.82 12.82 0 0 0 160 300.83v38.34A12.82 12.82 0 0 0 172.83 352h262.34A12.82 12.82 0 0 0 448 339.17v-38.34A12.82 12.82 0 0 0 435.17 288z"></path></svg>
|
@@ -0,0 +1 @@
|
|
1
|
+
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="quote-right" class="svg-inline--fa fa-quote-right fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M464 32H336c-26.5 0-48 21.5-48 48v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48zm-288 0H48C21.5 32 0 53.5 0 80v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48z"></path></svg>
|
Binary file
|
@@ -0,0 +1,4 @@
|
|
1
|
+
<svg width="634" height="461" viewBox="0 0 634 461" fill="none" xmlns="http://www.w3.org/2000/svg">
|
2
|
+
<path d="M59.2793 8.77344H55.7051L54.9023 11H53.7422L57 2.46875H57.9844L61.248 11H60.0938L59.2793 8.77344ZM56.0449 7.84766H58.9453L57.4922 3.85742L56.0449 7.84766Z" fill="black"/>
|
3
|
+
<line x1="54" y1="12.5" x2="61" y2="12.5" stroke="black"/>
|
4
|
+
</svg>
|
@@ -0,0 +1,3 @@
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-h1" viewBox="0 0 16 16">
|
2
|
+
<path d="M8.637 13V3.669H7.379V7.62H2.758V3.67H1.5V13h1.258V8.728h4.62V13h1.259zm5.329 0V3.669h-1.244L10.5 5.316v1.265l2.16-1.565h.062V13h1.244z"/>
|
3
|
+
</svg>
|
@@ -0,0 +1,3 @@
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-h2" viewBox="0 0 16 16">
|
2
|
+
<path d="M7.638 13V3.669H6.38V7.62H1.759V3.67H.5V13h1.258V8.728h4.62V13h1.259zm3.022-6.733v-.048c0-.889.63-1.668 1.716-1.668.957 0 1.675.608 1.675 1.572 0 .855-.554 1.504-1.067 2.085l-3.513 3.999V13H15.5v-1.094h-4.245v-.075l2.481-2.844c.875-.998 1.586-1.784 1.586-2.953 0-1.463-1.155-2.556-2.919-2.556-1.941 0-2.966 1.326-2.966 2.74v.049h1.223z"/>
|
3
|
+
</svg>
|
Binary file
|
@@ -0,0 +1 @@
|
|
1
|
+
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="link" class="svg-inline--fa fa-link fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg>
|
@@ -0,0 +1 @@
|
|
1
|
+
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="list-ol" class="svg-inline--fa fa-list-ol fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M61.77 401l17.5-20.15a19.92 19.92 0 0 0 5.07-14.19v-3.31C84.34 356 80.5 352 73 352H16a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h22.83a157.41 157.41 0 0 0-11 12.31l-5.61 7c-4 5.07-5.25 10.13-2.8 14.88l1.05 1.93c3 5.76 6.29 7.88 12.25 7.88h4.73c10.33 0 15.94 2.44 15.94 9.09 0 4.72-4.2 8.22-14.36 8.22a41.54 41.54 0 0 1-15.47-3.12c-6.49-3.88-11.74-3.5-15.6 3.12l-5.59 9.31c-3.72 6.13-3.19 11.72 2.63 15.94 7.71 4.69 20.38 9.44 37 9.44 34.16 0 48.5-22.75 48.5-44.12-.03-14.38-9.12-29.76-28.73-34.88zM496 224H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM16 160h64a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H64V40a8 8 0 0 0-8-8H32a8 8 0 0 0-7.14 4.42l-8 16A8 8 0 0 0 24 64h8v64H16a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8zm-3.91 160H80a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H41.32c3.29-10.29 48.34-18.68 48.34-56.44 0-29.06-25-39.56-44.47-39.56-21.36 0-33.8 10-40.46 18.75-4.37 5.59-3 10.84 2.8 15.37l8.58 6.88c5.61 4.56 11 2.47 16.12-2.44a13.44 13.44 0 0 1 9.46-3.84c3.33 0 9.28 1.56 9.28 8.75C51 248.19 0 257.31 0 304.59v4C0 316 5.08 320 12.09 320z"></path></svg>
|
Binary file
|
@@ -0,0 +1 @@
|
|
1
|
+
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="subscript" class="svg-inline--fa fa-subscript fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M496 448h-16V304a16 16 0 0 0-16-16h-48a16 16 0 0 0-14.29 8.83l-16 32A16 16 0 0 0 400 352h16v96h-16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h96a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM336 64h-67a16 16 0 0 0-13.14 6.87l-79.9 115-79.9-115A16 16 0 0 0 83 64H16A16 16 0 0 0 0 80v48a16 16 0 0 0 16 16h33.48l77.81 112-77.81 112H16a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h67a16 16 0 0 0 13.14-6.87l79.9-115 79.9 115A16 16 0 0 0 269 448h67a16 16 0 0 0 16-16v-48a16 16 0 0 0-16-16h-33.48l-77.81-112 77.81-112H336a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16z"></path></svg>
|
@@ -0,0 +1 @@
|
|
1
|
+
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="superscript" class="svg-inline--fa fa-superscript fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M496 160h-16V16a16 16 0 0 0-16-16h-48a16 16 0 0 0-14.29 8.83l-16 32A16 16 0 0 0 400 64h16v96h-16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h96a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM336 64h-67a16 16 0 0 0-13.14 6.87l-79.9 115-79.9-115A16 16 0 0 0 83 64H16A16 16 0 0 0 0 80v48a16 16 0 0 0 16 16h33.48l77.81 112-77.81 112H16a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h67a16 16 0 0 0 13.14-6.87l79.9-115 79.9 115A16 16 0 0 0 269 448h67a16 16 0 0 0 16-16v-48a16 16 0 0 0-16-16h-33.48l-77.81-112 77.81-112H336a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16z"></path></svg>
|
Binary file
|
Binary file
|
@@ -0,0 +1 @@
|
|
1
|
+
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="unlink" class="svg-inline--fa fa-unlink fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M304.083 405.907c4.686 4.686 4.686 12.284 0 16.971l-44.674 44.674c-59.263 59.262-155.693 59.266-214.961 0-59.264-59.265-59.264-155.696 0-214.96l44.675-44.675c4.686-4.686 12.284-4.686 16.971 0l39.598 39.598c4.686 4.686 4.686 12.284 0 16.971l-44.675 44.674c-28.072 28.073-28.072 73.75 0 101.823 28.072 28.072 73.75 28.073 101.824 0l44.674-44.674c4.686-4.686 12.284-4.686 16.971 0l39.597 39.598zm-56.568-260.216c4.686 4.686 12.284 4.686 16.971 0l44.674-44.674c28.072-28.075 73.75-28.073 101.824 0 28.072 28.073 28.072 73.75 0 101.823l-44.675 44.674c-4.686 4.686-4.686 12.284 0 16.971l39.598 39.598c4.686 4.686 12.284 4.686 16.971 0l44.675-44.675c59.265-59.265 59.265-155.695 0-214.96-59.266-59.264-155.695-59.264-214.961 0l-44.674 44.674c-4.686 4.686-4.686 12.284 0 16.971l39.597 39.598zm234.828 359.28l22.627-22.627c9.373-9.373 9.373-24.569 0-33.941L63.598 7.029c-9.373-9.373-24.569-9.373-33.941 0L7.029 29.657c-9.373 9.373-9.373 24.569 0 33.941l441.373 441.373c9.373 9.372 24.569 9.372 33.941 0z"></path></svg>
|
@@ -0,0 +1 @@
|
|
1
|
+
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="list-ul" class="svg-inline--fa fa-list-ul fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M48 48a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm448 16H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"></path></svg>
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import * as Y from "yjs";
|
2
|
+
import { WebsocketProvider } from "y-websocket";
|
3
|
+
const YJS_SOCKET_URL = "ws://localhost:8080";
|
4
|
+
function YjsProvider(roomName) {
|
5
|
+
const doc = new Y.Doc();
|
6
|
+
const provider = new WebsocketProvider(YJS_SOCKET_URL, roomName, doc);
|
7
|
+
return provider;
|
8
|
+
}
|
9
|
+
export default YjsProvider;
|
@@ -0,0 +1,21 @@
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
2
|
+
import React from 'react';
|
3
|
+
const Button = props => {
|
4
|
+
const {
|
5
|
+
children,
|
6
|
+
format,
|
7
|
+
active,
|
8
|
+
...rest
|
9
|
+
} = props;
|
10
|
+
return /*#__PURE__*/React.createElement("button", _extends({
|
11
|
+
className: active ? 'btnActive' : '',
|
12
|
+
title: format
|
13
|
+
}, rest, {
|
14
|
+
style: {
|
15
|
+
width: '30px',
|
16
|
+
height: '20px',
|
17
|
+
margin: '0 2px'
|
18
|
+
}
|
19
|
+
}), children);
|
20
|
+
};
|
21
|
+
export default Button;
|
@@ -0,0 +1,114 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { MdFormatBold, MdFormatItalic, MdStrikethroughS, MdFormatUnderlined, MdFormatQuote, MdFormatAlignLeft, MdFormatAlignCenter, MdFormatAlignRight, MdFormatListNumbered, MdFormatListBulleted, MdInsertLink, MdVideoLibrary, MdImage, MdAdd, MdArrowForward } from "react-icons/md";
|
3
|
+
import { BsTypeH1, BsTypeH2, BsTypeH3, BsCameraVideoFill } from "react-icons/bs";
|
4
|
+
import { FaSuperscript, FaSubscript } from "react-icons/fa";
|
5
|
+
import { AiFillEdit, AiOutlineTable, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutlineDelete, AiFillTag, AiOutlineUpload, AiOutlineArrowsAlt, AiOutlineInsertRowAbove, AiOutlineInsertRowLeft, AiFillHtml5 } from "react-icons/ai";
|
6
|
+
import { SiLatex } from "react-icons/si";
|
7
|
+
const iconList = {
|
8
|
+
bold: /*#__PURE__*/React.createElement(MdFormatBold, {
|
9
|
+
size: 20
|
10
|
+
}),
|
11
|
+
italic: /*#__PURE__*/React.createElement(MdFormatItalic, {
|
12
|
+
size: 20
|
13
|
+
}),
|
14
|
+
strikethrough: /*#__PURE__*/React.createElement(MdStrikethroughS, {
|
15
|
+
size: 20
|
16
|
+
}),
|
17
|
+
underline: /*#__PURE__*/React.createElement(MdFormatUnderlined, {
|
18
|
+
size: 20
|
19
|
+
}),
|
20
|
+
headingOne: /*#__PURE__*/React.createElement(BsTypeH1, {
|
21
|
+
size: 20
|
22
|
+
}),
|
23
|
+
headingTwo: /*#__PURE__*/React.createElement(BsTypeH2, {
|
24
|
+
size: 20
|
25
|
+
}),
|
26
|
+
headingThree: /*#__PURE__*/React.createElement(BsTypeH3, {
|
27
|
+
size: 20
|
28
|
+
}),
|
29
|
+
blockquote: /*#__PURE__*/React.createElement(MdFormatQuote, {
|
30
|
+
size: 20
|
31
|
+
}),
|
32
|
+
superscript: /*#__PURE__*/React.createElement(FaSuperscript, {
|
33
|
+
size: 15
|
34
|
+
}),
|
35
|
+
subscript: /*#__PURE__*/React.createElement(FaSubscript, {
|
36
|
+
size: 15
|
37
|
+
}),
|
38
|
+
alignLeft: /*#__PURE__*/React.createElement(MdFormatAlignLeft, {
|
39
|
+
size: 20
|
40
|
+
}),
|
41
|
+
alignCenter: /*#__PURE__*/React.createElement(MdFormatAlignCenter, {
|
42
|
+
size: 20
|
43
|
+
}),
|
44
|
+
alignRight: /*#__PURE__*/React.createElement(MdFormatAlignRight, {
|
45
|
+
size: 20
|
46
|
+
}),
|
47
|
+
orderedList: /*#__PURE__*/React.createElement(MdFormatListNumbered, {
|
48
|
+
size: 20
|
49
|
+
}),
|
50
|
+
unorderedList: /*#__PURE__*/React.createElement(MdFormatListBulleted, {
|
51
|
+
size: 20
|
52
|
+
}),
|
53
|
+
link: /*#__PURE__*/React.createElement(MdInsertLink, {
|
54
|
+
size: 20
|
55
|
+
}),
|
56
|
+
image: /*#__PURE__*/React.createElement(MdImage, {
|
57
|
+
size: 20
|
58
|
+
}),
|
59
|
+
video: /*#__PURE__*/React.createElement(MdVideoLibrary, {
|
60
|
+
size: 20
|
61
|
+
}),
|
62
|
+
add: /*#__PURE__*/React.createElement(MdAdd, {
|
63
|
+
size: 20
|
64
|
+
}),
|
65
|
+
table: /*#__PURE__*/React.createElement(AiOutlineTable, {
|
66
|
+
size: 20
|
67
|
+
}),
|
68
|
+
insertRowBelow: /*#__PURE__*/React.createElement(AiOutlineInsertRowBelow, {
|
69
|
+
size: 25
|
70
|
+
}),
|
71
|
+
insertColumnRight: /*#__PURE__*/React.createElement(AiOutlineInsertRowRight, {
|
72
|
+
size: 25
|
73
|
+
}),
|
74
|
+
insertColumnLeft: /*#__PURE__*/React.createElement(AiOutlineInsertRowLeft, {
|
75
|
+
size: 25
|
76
|
+
}),
|
77
|
+
insertRowAbove: /*#__PURE__*/React.createElement(AiOutlineInsertRowAbove, {
|
78
|
+
size: 25
|
79
|
+
}),
|
80
|
+
trashCan: /*#__PURE__*/React.createElement(AiOutlineDelete, {
|
81
|
+
size: 25
|
82
|
+
}),
|
83
|
+
addId: /*#__PURE__*/React.createElement(AiFillTag, {
|
84
|
+
size: 20
|
85
|
+
}),
|
86
|
+
upload: /*#__PURE__*/React.createElement(AiOutlineUpload, {
|
87
|
+
size: 20
|
88
|
+
}),
|
89
|
+
equation: /*#__PURE__*/React.createElement(SiLatex, {
|
90
|
+
size: 20
|
91
|
+
}),
|
92
|
+
resize: /*#__PURE__*/React.createElement(AiOutlineArrowsAlt, {
|
93
|
+
size: 20
|
94
|
+
}),
|
95
|
+
videoPlayer: /*#__PURE__*/React.createElement(BsCameraVideoFill, {
|
96
|
+
size: 20
|
97
|
+
}),
|
98
|
+
insertHtml: /*#__PURE__*/React.createElement(AiFillHtml5, {
|
99
|
+
size: 20
|
100
|
+
}),
|
101
|
+
arrowRight: /*#__PURE__*/React.createElement(MdArrowForward, {
|
102
|
+
size: 35
|
103
|
+
}),
|
104
|
+
pen: /*#__PURE__*/React.createElement(AiFillEdit, {
|
105
|
+
size: 20
|
106
|
+
})
|
107
|
+
};
|
108
|
+
const Icon = props => {
|
109
|
+
const {
|
110
|
+
icon
|
111
|
+
} = props;
|
112
|
+
return iconList[icon];
|
113
|
+
};
|
114
|
+
export default Icon;
|
@@ -0,0 +1,54 @@
|
|
1
|
+
import React, { useRef, useEffect } from "react";
|
2
|
+
import { Transforms } from "slate";
|
3
|
+
import { ReactEditor } from "slate-react";
|
4
|
+
import { insertMention } from "../utils/mentions";
|
5
|
+
const MentionsPopup = props => {
|
6
|
+
const {
|
7
|
+
editor,
|
8
|
+
index,
|
9
|
+
target,
|
10
|
+
chars,
|
11
|
+
mentions,
|
12
|
+
setMentions
|
13
|
+
} = props;
|
14
|
+
const ref = useRef(null);
|
15
|
+
useEffect(() => {
|
16
|
+
if (target && chars.length > 0) {
|
17
|
+
const el = ref.current;
|
18
|
+
const domRange = ReactEditor.toDOMRange(editor, target);
|
19
|
+
const rect = domRange.getBoundingClientRect();
|
20
|
+
el.style.top = `${rect.top + window.scrollY + 24}px`;
|
21
|
+
el.style.left = `${rect.left + window.scrollX}px`;
|
22
|
+
}
|
23
|
+
}, [chars.length, editor, index, target]);
|
24
|
+
return target && chars.length > 0 ? /*#__PURE__*/React.createElement("div", {
|
25
|
+
ref: ref,
|
26
|
+
style: {
|
27
|
+
top: "-9999px",
|
28
|
+
left: "-9999px",
|
29
|
+
position: "absolute",
|
30
|
+
zIndex: 1,
|
31
|
+
padding: "3px",
|
32
|
+
background: "white",
|
33
|
+
borderRadius: "4px",
|
34
|
+
boxShadow: "0 1px 5px rgba(0,0,0,.2)"
|
35
|
+
},
|
36
|
+
"data-cy": "mentions-portal"
|
37
|
+
}, chars.map((char, i) => /*#__PURE__*/React.createElement("div", {
|
38
|
+
key: char,
|
39
|
+
onClick: () => {
|
40
|
+
Transforms.select(editor, target);
|
41
|
+
insertMention(editor, char);
|
42
|
+
setMentions({
|
43
|
+
...mentions,
|
44
|
+
target: null
|
45
|
+
});
|
46
|
+
},
|
47
|
+
style: {
|
48
|
+
padding: "1px 3px",
|
49
|
+
borderRadius: "3px",
|
50
|
+
background: i === index ? "#B4D5FF" : "transparent"
|
51
|
+
}
|
52
|
+
}, char))) : null;
|
53
|
+
};
|
54
|
+
export default MentionsPopup;
|
@@ -0,0 +1,44 @@
|
|
1
|
+
import { useEffect, useState } from "react";
|
2
|
+
import { Editor, Range } from "slate";
|
3
|
+
const useMentions = props => {
|
4
|
+
const {
|
5
|
+
editor,
|
6
|
+
selection
|
7
|
+
} = props;
|
8
|
+
const [mentions, setMentions] = useState({
|
9
|
+
target: null,
|
10
|
+
index: null,
|
11
|
+
search: null
|
12
|
+
});
|
13
|
+
useEffect(() => {
|
14
|
+
if (selection && Range.isCollapsed(selection)) {
|
15
|
+
const [start] = Range.edges(selection);
|
16
|
+
const wordBefore = Editor.before(editor, start, {
|
17
|
+
unit: "word"
|
18
|
+
});
|
19
|
+
const before = wordBefore && Editor.before(editor, wordBefore);
|
20
|
+
const beforeRange = before && Editor.range(editor, before, start);
|
21
|
+
const beforeText = beforeRange && Editor.string(editor, beforeRange);
|
22
|
+
const beforeMatch = beforeText && beforeText.match(/^@(\w+)$/);
|
23
|
+
const after = Editor.after(editor, start);
|
24
|
+
const afterRange = Editor.range(editor, start, after);
|
25
|
+
const afterText = Editor.string(editor, afterRange);
|
26
|
+
const afterMatch = afterText.match(/^(\s|$)/);
|
27
|
+
if (beforeMatch && afterMatch) {
|
28
|
+
setMentions({
|
29
|
+
target: beforeRange,
|
30
|
+
search: beforeMatch[1],
|
31
|
+
index: 0
|
32
|
+
});
|
33
|
+
}
|
34
|
+
} else {
|
35
|
+
setMentions({
|
36
|
+
target: null,
|
37
|
+
search: null,
|
38
|
+
index: null
|
39
|
+
});
|
40
|
+
}
|
41
|
+
}, [selection, editor]);
|
42
|
+
return [mentions, setMentions];
|
43
|
+
};
|
44
|
+
export default useMentions;
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import { createEditor } from "slate";
|
2
|
+
import { withYjs, withCursors } from "@slate-yjs/core";
|
3
|
+
const withCollaborative = props => {
|
4
|
+
const {
|
5
|
+
provider,
|
6
|
+
sharedType,
|
7
|
+
data
|
8
|
+
} = props;
|
9
|
+
return withCursors(withYjs(createEditor(), sharedType, {
|
10
|
+
autoConnect: false
|
11
|
+
}), provider.awareness, {
|
12
|
+
data
|
13
|
+
});
|
14
|
+
};
|
15
|
+
export default withCollaborative;
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import { withReact } from "slate-react";
|
2
|
+
import { withHistory } from "slate-history";
|
3
|
+
import withLinks from "../plugins/withLinks";
|
4
|
+
import withTables from "../plugins/withTable";
|
5
|
+
import withEmbeds from "../plugins/withEmbeds";
|
6
|
+
import withEquation from "../plugins/withEquation";
|
7
|
+
import withMentions from "../plugins/withMentions";
|
8
|
+
const withCommon = props => {
|
9
|
+
return withEquation(withHistory(withEmbeds(withTables(withLinks(withMentions(withReact(props)))))));
|
10
|
+
};
|
11
|
+
export default withCommon;
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import { Transforms, Path, Node } from 'slate';
|
2
|
+
const withEmbeds = editor => {
|
3
|
+
const {
|
4
|
+
isVoid,
|
5
|
+
insertBreak
|
6
|
+
} = editor;
|
7
|
+
editor.isVoid = element => ['video', 'image', 'htmlCode'].includes(element.type) ? true : isVoid(element);
|
8
|
+
editor.insertBreak = (...args) => {
|
9
|
+
const parentPath = Path.parent(editor.selection.focus.path);
|
10
|
+
const parentNode = Node.get(editor, parentPath);
|
11
|
+
// console.log(parentNode);
|
12
|
+
if (editor.isVoid(parentNode)) {
|
13
|
+
const nextPath = Path.next(parentPath);
|
14
|
+
Transforms.insertNodes(editor, {
|
15
|
+
type: 'paragraph',
|
16
|
+
children: [{
|
17
|
+
text: ''
|
18
|
+
}]
|
19
|
+
}, {
|
20
|
+
at: nextPath,
|
21
|
+
select: true // Focus on this node once inserted
|
22
|
+
});
|
23
|
+
} else {
|
24
|
+
insertBreak(...args);
|
25
|
+
}
|
26
|
+
};
|
27
|
+
return editor;
|
28
|
+
};
|
29
|
+
export default withEmbeds;
|
@@ -0,0 +1,18 @@
|
|
1
|
+
const withMentions = editor => {
|
2
|
+
const {
|
3
|
+
isInline,
|
4
|
+
isVoid,
|
5
|
+
markableVoid
|
6
|
+
} = editor;
|
7
|
+
editor.isInline = element => {
|
8
|
+
return element.type === "mention" ? true : isInline(element);
|
9
|
+
};
|
10
|
+
editor.isVoid = element => {
|
11
|
+
return element.type === "mention" ? true : isVoid(element);
|
12
|
+
};
|
13
|
+
editor.markableVoid = element => {
|
14
|
+
return element.type === "mention" || markableVoid(element);
|
15
|
+
};
|
16
|
+
return editor;
|
17
|
+
};
|
18
|
+
export default withMentions;
|
@@ -0,0 +1,61 @@
|
|
1
|
+
import { Editor, Range, Point, Element } from "slate";
|
2
|
+
const withTable = editor => {
|
3
|
+
const {
|
4
|
+
deleteBackward,
|
5
|
+
deleteForward
|
6
|
+
} = editor;
|
7
|
+
editor.deleteBackward = unit => {
|
8
|
+
const {
|
9
|
+
selection
|
10
|
+
} = editor;
|
11
|
+
if (selection) {
|
12
|
+
const [cell] = Editor.nodes(editor, {
|
13
|
+
match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-cell"
|
14
|
+
});
|
15
|
+
const prevNodePath = Editor.before(editor, selection);
|
16
|
+
const [tableNode] = Editor.nodes(editor, {
|
17
|
+
at: prevNodePath,
|
18
|
+
match: n => !Editor.isEditor(n) && Element.isElement && n.type === "table-cell"
|
19
|
+
});
|
20
|
+
if (cell) {
|
21
|
+
const [, cellPath] = cell;
|
22
|
+
const start = Editor.start(editor, cellPath);
|
23
|
+
if (Point.equals(selection.anchor, start)) {
|
24
|
+
return;
|
25
|
+
}
|
26
|
+
}
|
27
|
+
if (!cell && tableNode) {
|
28
|
+
return;
|
29
|
+
}
|
30
|
+
}
|
31
|
+
deleteBackward(unit);
|
32
|
+
};
|
33
|
+
editor.deleteForward = unit => {
|
34
|
+
const {
|
35
|
+
selection
|
36
|
+
} = editor;
|
37
|
+
if (selection && Range.isCollapsed(selection)) {
|
38
|
+
const [cell] = Editor.nodes(editor, {
|
39
|
+
match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-cell"
|
40
|
+
});
|
41
|
+
const prevNodePath = Editor.after(editor, selection);
|
42
|
+
const [tableNode] = Editor.nodes(editor, {
|
43
|
+
at: prevNodePath,
|
44
|
+
match: n => !Editor.isEditor(n) && Element.isElement && n.type === "table-cell"
|
45
|
+
});
|
46
|
+
if (cell) {
|
47
|
+
const [, cellPath] = cell;
|
48
|
+
const end = Editor.end(editor, cellPath);
|
49
|
+
if (Point.equals(selection.anchor, end)) {
|
50
|
+
return;
|
51
|
+
}
|
52
|
+
}
|
53
|
+
if (!cell && tableNode) {
|
54
|
+
return;
|
55
|
+
}
|
56
|
+
}
|
57
|
+
deleteForward(unit);
|
58
|
+
};
|
59
|
+
return editor;
|
60
|
+
};
|
61
|
+
export default withTable;
|