@flozy/editor 1.0.0 → 1.0.5

Sign up to get free protection for your applications and to get access to all the features.
Files changed (105) hide show
  1. package/package.json +6 -2
  2. package/.eslintignore +0 -4
  3. package/.eslintrc.json +0 -6
  4. package/.github/workflows/npm-publish.yml +0 -33
  5. package/.husky/pre-commit +0 -1
  6. package/.storybook/main.js +0 -20
  7. package/.storybook/preview.js +0 -14
  8. package/.vscode/extensions.json +0 -7
  9. package/.vscode/launch.json +0 -15
  10. package/.vscode/settings.json +0 -22
  11. package/craco.config.js +0 -16
  12. package/public/favicon.ico +0 -0
  13. package/public/index.html +0 -43
  14. package/public/logo192.png +0 -0
  15. package/public/logo512.png +0 -0
  16. package/public/manifest.json +0 -25
  17. package/public/robots.txt +0 -3
  18. package/src/components/Editor/CollaborativeEditor.js +0 -119
  19. package/src/components/Editor/CommonEditor.js +0 -549
  20. package/src/components/Editor/Editor.css +0 -115
  21. package/src/components/Editor/Elements/CodeToText/CodeToText.css +0 -57
  22. package/src/components/Editor/Elements/CodeToText/CodeToText.jsx +0 -115
  23. package/src/components/Editor/Elements/CodeToText/CodeToTextButton.jsx +0 -16
  24. package/src/components/Editor/Elements/CodeToText/HtmlCode.jsx +0 -59
  25. package/src/components/Editor/Elements/CodeToText/HtmlContextMenu.jsx +0 -39
  26. package/src/components/Editor/Elements/Color Picker/ColorPicker.css +0 -38
  27. package/src/components/Editor/Elements/Color Picker/ColorPicker.jsx +0 -110
  28. package/src/components/Editor/Elements/Color Picker/defaultColors.js +0 -34
  29. package/src/components/Editor/Elements/Embed/Embed.css +0 -14
  30. package/src/components/Editor/Elements/Embed/Embed.jsx +0 -74
  31. package/src/components/Editor/Elements/Embed/Image.jsx +0 -82
  32. package/src/components/Editor/Elements/Embed/Video.jsx +0 -65
  33. package/src/components/Editor/Elements/Equation/Equation.jsx +0 -19
  34. package/src/components/Editor/Elements/Equation/EquationButton.jsx +0 -59
  35. package/src/components/Editor/Elements/Equation/styles.css +0 -4
  36. package/src/components/Editor/Elements/Grid/Grid.js +0 -48
  37. package/src/components/Editor/Elements/Grid/GridButton.js +0 -21
  38. package/src/components/Editor/Elements/Grid/GridItem.js +0 -57
  39. package/src/components/Editor/Elements/ID/Id.jsx +0 -56
  40. package/src/components/Editor/Elements/Link/Link.jsx +0 -24
  41. package/src/components/Editor/Elements/Link/LinkButton.jsx +0 -71
  42. package/src/components/Editor/Elements/Link/styles.css +0 -20
  43. package/src/components/Editor/Elements/Mentions/Mentions.jsx +0 -37
  44. package/src/components/Editor/Elements/NewLine/NewLineButton.js +0 -29
  45. package/src/components/Editor/Elements/Table/Table.jsx +0 -13
  46. package/src/components/Editor/Elements/Table/TableSelector.css +0 -18
  47. package/src/components/Editor/Elements/Table/TableSelector.jsx +0 -76
  48. package/src/components/Editor/Elements/TableContextMenu/TableContextMenu.jsx +0 -97
  49. package/src/components/Editor/Elements/TableContextMenu/styles.css +0 -18
  50. package/src/components/Editor/RemoteCursorOverlay/Overlay.js +0 -78
  51. package/src/components/Editor/Toolbar/Toolbar.jsx +0 -167
  52. package/src/components/Editor/Toolbar/styles.css +0 -28
  53. package/src/components/Editor/Toolbar/toolbarGroups.js +0 -167
  54. package/src/components/Editor/Toolbar/toolbarIcons/align-center.svg +0 -1
  55. package/src/components/Editor/Toolbar/toolbarIcons/align-left.svg +0 -1
  56. package/src/components/Editor/Toolbar/toolbarIcons/align-right.svg +0 -1
  57. package/src/components/Editor/Toolbar/toolbarIcons/blockquote.svg +0 -1
  58. package/src/components/Editor/Toolbar/toolbarIcons/bold.png +0 -0
  59. package/src/components/Editor/Toolbar/toolbarIcons/fontColor.svg +0 -4
  60. package/src/components/Editor/Toolbar/toolbarIcons/headingOne.svg +0 -3
  61. package/src/components/Editor/Toolbar/toolbarIcons/headingTwo.svg +0 -3
  62. package/src/components/Editor/Toolbar/toolbarIcons/italic.png +0 -0
  63. package/src/components/Editor/Toolbar/toolbarIcons/link.svg +0 -1
  64. package/src/components/Editor/Toolbar/toolbarIcons/orderedList.svg +0 -1
  65. package/src/components/Editor/Toolbar/toolbarIcons/strikethrough.png +0 -0
  66. package/src/components/Editor/Toolbar/toolbarIcons/subscript.svg +0 -1
  67. package/src/components/Editor/Toolbar/toolbarIcons/superscript.svg +0 -1
  68. package/src/components/Editor/Toolbar/toolbarIcons/textColor.png +0 -0
  69. package/src/components/Editor/Toolbar/toolbarIcons/underline.png +0 -0
  70. package/src/components/Editor/Toolbar/toolbarIcons/unlink.svg +0 -1
  71. package/src/components/Editor/Toolbar/toolbarIcons/unorderedList.svg +0 -1
  72. package/src/components/Editor/YjsProvider.js +0 -11
  73. package/src/components/Editor/common/Button.jsx +0 -12
  74. package/src/components/Editor/common/Icon.jsx +0 -82
  75. package/src/components/Editor/common/MentionsPopup.jsx +0 -56
  76. package/src/components/Editor/hooks/useMentions.js +0 -44
  77. package/src/components/Editor/hooks/withCollaborative.js +0 -15
  78. package/src/components/Editor/hooks/withCommon.js +0 -17
  79. package/src/components/Editor/plugins/withEmbeds.js +0 -36
  80. package/src/components/Editor/plugins/withEquation.js +0 -8
  81. package/src/components/Editor/plugins/withLinks.js +0 -9
  82. package/src/components/Editor/plugins/withMentions.js +0 -19
  83. package/src/components/Editor/plugins/withTable.js +0 -74
  84. package/src/components/Editor/utils/SlateUtilityFunctions.js +0 -273
  85. package/src/components/Editor/utils/customHooks/useContextMenu.js +0 -42
  86. package/src/components/Editor/utils/customHooks/useFormat.js +0 -26
  87. package/src/components/Editor/utils/customHooks/usePopup.jsx +0 -26
  88. package/src/components/Editor/utils/customHooks/useResize.js +0 -41
  89. package/src/components/Editor/utils/draftToSlate.js +0 -104
  90. package/src/components/Editor/utils/embed.js +0 -18
  91. package/src/components/Editor/utils/equation.js +0 -22
  92. package/src/components/Editor/utils/events.js +0 -56
  93. package/src/components/Editor/utils/grid.js +0 -12
  94. package/src/components/Editor/utils/gridItem.js +0 -19
  95. package/src/components/Editor/utils/link.js +0 -53
  96. package/src/components/Editor/utils/mentions.js +0 -11
  97. package/src/components/Editor/utils/paragraph.js +0 -4
  98. package/src/components/Editor/utils/serializer.js +0 -32
  99. package/src/components/Editor/utils/table.js +0 -151
  100. package/src/components/index.js +0 -5
  101. package/src/index.js +0 -1
  102. package/src/stories/CollaborativeEditor.stories.js +0 -30
  103. package/src/stories/Editor.stories.js +0 -24
  104. package/src/stories/EditorSampleProps/ChatSample.js +0 -43
  105. package/src/stories/EditorSampleProps/LayoutOne.js +0 -551
@@ -1,78 +0,0 @@
1
- import React, { useRef } from "react";
2
- import { useRemoteCursorOverlayPositions } from "@slate-yjs/react";
3
-
4
- function Caret({ caretPosition, data }) {
5
- const caretStyle = {
6
- ...caretPosition,
7
- background: data?.color || "#d33d3db5",
8
- };
9
-
10
- const labelStyle = {
11
- transform: "translateY(-100%)",
12
- background: data?.color || "#d33d3db5",
13
- };
14
-
15
- return (
16
- <div style={{ ...caretStyle, position: "absolute", width: "0.5px" }}>
17
- <div
18
- style={{
19
- position: "absolute",
20
- color: "#FFF",
21
- whiteSpace: "nowrap",
22
- top: 0,
23
- ...labelStyle,
24
- }}
25
- >
26
- {data?.name}
27
- </div>
28
- </div>
29
- );
30
- }
31
-
32
- function RemoteSelection({ data, selectionRects, caretPosition }) {
33
- if (!data) {
34
- return null;
35
- }
36
-
37
- const selectionStyle = {
38
- backgroundColor: data.color,
39
- };
40
-
41
- return (
42
- <React.Fragment>
43
- {selectionRects.map((position, i) => (
44
- <div
45
- style={{
46
- ...selectionStyle,
47
- ...position,
48
- position: "absolute",
49
- pointerEvents: "none",
50
- }}
51
- // eslint-disable-next-line react/no-array-index-key
52
- key={i}
53
- />
54
- ))}
55
- {caretPosition && <Caret caretPosition={caretPosition} data={data} />}
56
- </React.Fragment>
57
- );
58
- }
59
-
60
- export function RemoteCursorOverlay({ className, children }) {
61
- const containerRef = useRef(null);
62
- const [cursors] = useRemoteCursorOverlayPositions({
63
- containerRef,
64
- });
65
-
66
- return (
67
- <div
68
- className={`${className}`}
69
- style={{ position: "relative" }}
70
- ref={containerRef}
71
- >
72
- {children}
73
- {cursors.map((cursor) => (
74
- <RemoteSelection key={cursor.clientId} {...cursor} />
75
- ))}
76
- </div>
77
- );
78
- }
@@ -1,167 +0,0 @@
1
- import React, { useEffect, useState } from "react";
2
- import { useSlate } from "slate-react";
3
- import Button from "../common/Button";
4
- import Icon from "../common/Icon";
5
- import {
6
- toggleBlock,
7
- toggleMark,
8
- isMarkActive,
9
- addMarkData,
10
- isBlockActive,
11
- activeMark,
12
- } from "../utils/SlateUtilityFunctions.js";
13
- import useFormat from "../utils/customHooks/useFormat.js";
14
- import defaultToolbarGroups from "./toolbarGroups.js";
15
- import "./styles.css";
16
- import ColorPicker from "../Elements/Color Picker/ColorPicker";
17
- import LinkButton from "../Elements/Link/LinkButton";
18
- import Embed from "../Elements/Embed/Embed";
19
- import TableSelector from "../Elements/Table/TableSelector";
20
- import EquationButton from "../Elements/Equation/EquationButton";
21
- import Id from "../Elements/ID/Id";
22
- import TableContextMenu from "../Elements/TableContextMenu/TableContextMenu";
23
- import CodeToTextButton from "../Elements/CodeToText/CodeToTextButton";
24
- import HtmlContextMenu from "../Elements/CodeToText/HtmlContextMenu";
25
- import GridButton from "../Elements/Grid/GridButton";
26
- import NewLineButton from "../Elements/NewLine/NewLineButton";
27
-
28
- const Toolbar = (props) => {
29
- const { handleCodeToText } = props;
30
- const editor = useSlate();
31
- const isTable = useFormat(editor, "table");
32
- const [toolbarGroups, setToolbarGroups] = useState(defaultToolbarGroups);
33
-
34
- useEffect(() => {
35
- // Filter out the groups which are not allowed to be inserted when a table is in focus.
36
- let filteredGroups = [...defaultToolbarGroups];
37
- if (isTable) {
38
- filteredGroups = toolbarGroups.map((grp) =>
39
- grp.filter(
40
- (element) =>
41
- //groups that are not supported inside the table
42
- !["codeToText"].includes(element.type)
43
- )
44
- );
45
- filteredGroups = filteredGroups.filter((elem) => elem.length);
46
- }
47
- setToolbarGroups(filteredGroups);
48
- // eslint-disable-next-line react-hooks/exhaustive-deps
49
- }, [isTable]);
50
-
51
- const BlockButton = ({ format }) => {
52
- return (
53
- <Button
54
- active={isBlockActive(editor, format)}
55
- format={format}
56
- onMouseDown={(e) => {
57
- e.preventDefault();
58
- toggleBlock(editor, format);
59
- }}
60
- >
61
- <Icon icon={format} />
62
- </Button>
63
- );
64
- };
65
- const MarkButton = ({ format }) => {
66
- return (
67
- <Button
68
- active={isMarkActive(editor, format)}
69
- format={format}
70
- onMouseDown={(e) => {
71
- e.preventDefault();
72
- toggleMark(editor, format);
73
- }}
74
- >
75
- <Icon icon={format} />
76
- </Button>
77
- );
78
- };
79
- const Dropdown = ({ format, options }) => {
80
- return (
81
- <select
82
- value={activeMark(editor, format)}
83
- onChange={(e) => changeMarkData(e, format)}
84
- >
85
- {options.map((item, index) => (
86
- <option key={index} value={item.value}>
87
- {item.text}
88
- </option>
89
- ))}
90
- </select>
91
- );
92
- };
93
- const changeMarkData = (event, format) => {
94
- event.preventDefault();
95
- const value = event.target.value;
96
- addMarkData(editor, { format, value });
97
- };
98
-
99
- return (
100
- <div className="toolbar">
101
- {toolbarGroups.map((group, index) => (
102
- <span key={index} className="toolbar-grp">
103
- {group.map((element, gi) => {
104
- switch (element.type) {
105
- case "block":
106
- return <BlockButton key={element.id} {...element} />;
107
- case "mark":
108
- return <MarkButton key={element.id} {...element} />;
109
- case "dropdown":
110
- return <Dropdown key={element.id} {...element} />;
111
- case "link":
112
- return (
113
- <LinkButton
114
- key={element.id}
115
- active={isBlockActive(editor, "link")}
116
- editor={editor}
117
- />
118
- );
119
- case "embed":
120
- return (
121
- <Embed
122
- key={element.id}
123
- format={element.format}
124
- editor={editor}
125
- />
126
- );
127
- case "color-picker":
128
- return (
129
- <ColorPicker
130
- key={element.id}
131
- activeMark={activeMark}
132
- format={element.format}
133
- editor={editor}
134
- />
135
- );
136
- case "table":
137
- return <TableSelector key={element.id} editor={editor} />;
138
- case "id":
139
- return <Id key={`gi_id_${gi}`} editor={editor} />;
140
- case "equation":
141
- return (
142
- <EquationButton key={`gi_equation_${gi}`} editor={editor} />
143
- );
144
- case "codeToText":
145
- return (
146
- <CodeToTextButton
147
- key={`gi_codeToText_${gi}`}
148
- handleButtonClick={handleCodeToText}
149
- />
150
- );
151
- case "grid":
152
- return <GridButton key={element.id} editor={editor} />;
153
- case "newLine":
154
- return <NewLineButton key={element.id} editor={editor} />;
155
- default:
156
- return null;
157
- }
158
- })}
159
- </span>
160
- ))}
161
- <TableContextMenu editor={editor} />
162
- <HtmlContextMenu editor={editor} handleCodeToText={handleCodeToText} />
163
- </div>
164
- );
165
- };
166
-
167
- export default Toolbar;
@@ -1,28 +0,0 @@
1
- .toolbar{
2
- border-radius: 10px;
3
- background: #ffffff;
4
- box-shadow: -8px 8px 13px #ededed,
5
- 8px -8px 13px #ffffff;
6
- margin:4px 0;
7
- display:flex;
8
- flex-wrap:wrap;
9
- align-items:center;
10
- padding: 15px 10px;
11
- row-gap: 15px;
12
- position: -webkit-sticky;
13
- position: sticky;
14
- top: 0;
15
- z-index: 2;
16
- }
17
- .toolbar-grp>*{
18
- margin-right: 10px;
19
- cursor: pointer;
20
- }
21
- .toolbar-grp{
22
- margin:0 10px;
23
- }
24
- select{
25
- height: 30px;
26
- border: none;
27
- width: 6.9rem;
28
- }
@@ -1,167 +0,0 @@
1
- const toolbarGroups = [
2
- [
3
- {
4
- id: 1,
5
- format: "fontFamily",
6
- type: "dropdown",
7
- options: [
8
- { text: "Sans Serif", value: "sans" },
9
- { text: "Serif", value: "serif" },
10
- { text: "MonoSpace", value: "monospace" },
11
- ],
12
- },
13
- {
14
- id: 2,
15
- format: "fontSize",
16
- type: "dropdown",
17
- options: [
18
- { text: "Small", value: "small" },
19
- { text: "Normal", value: "normal" },
20
- { text: "Medium", value: "medium" },
21
- { text: "Huge", value: "huge" },
22
- ],
23
- },
24
- ],
25
- [
26
- {
27
- id: 3,
28
- format: "bold",
29
- type: "mark",
30
- },
31
- {
32
- id: 4,
33
- format: "italic",
34
- type: "mark",
35
- },
36
- {
37
- id: 5,
38
- format: "underline",
39
- type: "mark",
40
- },
41
- {
42
- id: 6,
43
- format: "strikethrough",
44
- type: "mark",
45
- },
46
- ],
47
- [
48
- {
49
- id: 7,
50
- format: "color",
51
- type: "color-picker",
52
- },
53
- {
54
- id: 8,
55
- format: "bgColor",
56
- type: "color-picker",
57
- },
58
- ],
59
- [
60
- {
61
- id: 9,
62
- format: "superscript",
63
- type: "mark",
64
- },
65
- {
66
- id: 10,
67
- format: "subscript",
68
- type: "mark",
69
- },
70
- ],
71
- [
72
- {
73
- id: 11,
74
- format: "headingOne",
75
- type: "block",
76
- },
77
- {
78
- id: 12,
79
- format: "headingTwo",
80
- type: "block",
81
- },
82
- {
83
- id: 13,
84
- format: "headingThree",
85
- type: "block",
86
- },
87
- {
88
- id: 14,
89
- format: "blockquote",
90
- type: "block",
91
- },
92
- ],
93
- [
94
- {
95
- id: 15,
96
- format: "orderedList",
97
- type: "block",
98
- },
99
- {
100
- id: 16,
101
- format: "unorderedList",
102
- type: "block",
103
- },
104
- ],
105
- [
106
- {
107
- id: 17,
108
- format: "alignLeft",
109
- type: "block",
110
- },
111
- {
112
- id: 18,
113
- format: "alignCenter",
114
- type: "block",
115
- },
116
- {
117
- id: 19,
118
- format: "alignRight",
119
- type: "block",
120
- },
121
- ],
122
- [
123
- {
124
- id: 20,
125
- format: "link",
126
- type: "link",
127
- },
128
- {
129
- id: 21,
130
- format: "image",
131
- type: "embed",
132
- },
133
- {
134
- id: 22,
135
- format: "video",
136
- type: "embed",
137
- },
138
- {
139
- id: 23,
140
- type: "table",
141
- },
142
- ],
143
- [
144
- {
145
- id: 25,
146
- type: "id",
147
- },
148
- {
149
- id: 26,
150
- type: "equation",
151
- },
152
- {
153
- id: 27,
154
- type: "codeToText",
155
- },
156
- {
157
- id: 28,
158
- type: "grid",
159
- },
160
- {
161
- id: 29,
162
- type: "newLine",
163
- },
164
- ],
165
- ];
166
-
167
- export default toolbarGroups;
@@ -1 +0,0 @@
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>
@@ -1 +0,0 @@
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>
@@ -1 +0,0 @@
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>
@@ -1 +0,0 @@
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>
@@ -1,4 +0,0 @@
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>
@@ -1,3 +0,0 @@
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>
@@ -1,3 +0,0 @@
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>
@@ -1 +0,0 @@
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>
@@ -1 +0,0 @@
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>
@@ -1 +0,0 @@
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>
@@ -1 +0,0 @@
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>
@@ -1 +0,0 @@
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>
@@ -1 +0,0 @@
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>
@@ -1,11 +0,0 @@
1
- import * as Y from "yjs";
2
- import { WebsocketProvider } from "y-websocket";
3
- const YJS_SOCKET_URL = "ws://localhost:8080";
4
-
5
- function YjsProvider(roomName) {
6
- const doc = new Y.Doc();
7
- const provider = new WebsocketProvider(YJS_SOCKET_URL, roomName, doc);
8
- return provider;
9
- }
10
-
11
- export default YjsProvider;
@@ -1,12 +0,0 @@
1
- import React from 'react'
2
-
3
- const Button =(props)=>{
4
- const {children,format,active, ...rest} = props
5
- return(
6
- <button className={active?'btnActive':''} title={format} {...rest} style={{width:'30px',height:'20px',margin:'0 2px'}}>
7
- {children}
8
- </button>
9
- )
10
- }
11
-
12
- export default Button;
@@ -1,82 +0,0 @@
1
- import React from "react";
2
- import {
3
- MdFormatBold,
4
- MdFormatItalic,
5
- MdStrikethroughS,
6
- MdFormatUnderlined,
7
- MdFormatQuote,
8
- MdFormatAlignLeft,
9
- MdFormatAlignCenter,
10
- MdFormatAlignRight,
11
- MdFormatListNumbered,
12
- MdFormatListBulleted,
13
- MdInsertLink,
14
- MdVideoLibrary,
15
- MdImage,
16
- MdAdd,
17
- MdArrowForward,
18
- } from "react-icons/md";
19
- import {
20
- BsTypeH1,
21
- BsTypeH2,
22
- BsTypeH3,
23
- BsCameraVideoFill,
24
- } from "react-icons/bs";
25
- import { FaSuperscript, FaSubscript } from "react-icons/fa";
26
- import {
27
- AiFillEdit,
28
- AiOutlineTable,
29
- AiOutlineInsertRowBelow,
30
- AiOutlineInsertRowRight,
31
- AiOutlineDelete,
32
- AiFillTag,
33
- AiOutlineUpload,
34
- AiOutlineArrowsAlt,
35
- AiOutlineInsertRowAbove,
36
- AiOutlineInsertRowLeft,
37
- AiFillHtml5,
38
- } from "react-icons/ai";
39
- import { SiLatex } from "react-icons/si";
40
- const iconList = {
41
- bold: <MdFormatBold size={20} />,
42
- italic: <MdFormatItalic size={20} />,
43
- strikethrough: <MdStrikethroughS size={20} />,
44
- underline: <MdFormatUnderlined size={20} />,
45
- headingOne: <BsTypeH1 size={20} />,
46
- headingTwo: <BsTypeH2 size={20} />,
47
- headingThree: <BsTypeH3 size={20} />,
48
-
49
- blockquote: <MdFormatQuote size={20} />,
50
- superscript: <FaSuperscript size={15} />,
51
- subscript: <FaSubscript size={15} />,
52
- alignLeft: <MdFormatAlignLeft size={20} />,
53
- alignCenter: <MdFormatAlignCenter size={20} />,
54
- alignRight: <MdFormatAlignRight size={20} />,
55
- orderedList: <MdFormatListNumbered size={20} />,
56
- unorderedList: <MdFormatListBulleted size={20} />,
57
- link: <MdInsertLink size={20} />,
58
- image: <MdImage size={20} />,
59
- video: <MdVideoLibrary size={20} />,
60
- add: <MdAdd size={20} />,
61
- table: <AiOutlineTable size={20} />,
62
- insertRowBelow: <AiOutlineInsertRowBelow size={25} />,
63
- insertColumnRight: <AiOutlineInsertRowRight size={25} />,
64
- insertColumnLeft: <AiOutlineInsertRowLeft size={25} />,
65
- insertRowAbove: <AiOutlineInsertRowAbove size={25} />,
66
- trashCan: <AiOutlineDelete size={25} />,
67
- addId: <AiFillTag size={20} />,
68
- upload: <AiOutlineUpload size={20} />,
69
- equation: <SiLatex size={20} />,
70
- resize: <AiOutlineArrowsAlt size={20} />,
71
- videoPlayer: <BsCameraVideoFill size={20} />,
72
- insertHtml: <AiFillHtml5 size={20} />,
73
- arrowRight: <MdArrowForward size={35} />,
74
- pen: <AiFillEdit size={20} />,
75
- };
76
-
77
- const Icon = (props) => {
78
- const { icon } = props;
79
- return iconList[icon];
80
- };
81
-
82
- export default Icon;