@bigbinary/neeto-editor 0.2.0 → 0.2.1

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 (41) hide show
  1. package/index.js +27 -6
  2. package/package.json +7 -4
  3. package/src/Common/Button.js +95 -0
  4. package/src/Common/Description.js +1 -5
  5. package/src/Common/Dropdown/index.js +6 -2
  6. package/src/Common/Input.js +70 -0
  7. package/src/Common/Label.js +45 -0
  8. package/src/Common/Modal.js +91 -0
  9. package/src/Common/Tab.js +79 -0
  10. package/src/Common/ToolTip.js +37 -0
  11. package/src/Editor/CustomExtensions/BubbleMenu/index.js +2 -2
  12. package/src/Editor/CustomExtensions/FixedMenu/FontSizeOption.js +3 -3
  13. package/src/Editor/CustomExtensions/FixedMenu/TextColorOption.js +1 -1
  14. package/src/Editor/CustomExtensions/FixedMenu/index.js +7 -10
  15. package/src/Editor/CustomExtensions/Image/LinkUploader/URLForm.js +39 -0
  16. package/src/Editor/CustomExtensions/Image/LocalUploader.js +21 -0
  17. package/src/Editor/CustomExtensions/Image/ProgressBar.js +34 -0
  18. package/src/Editor/CustomExtensions/Image/Uploader.js +72 -31
  19. package/src/Editor/CustomExtensions/Image/constants.js +5 -0
  20. package/src/Editor/CustomExtensions/Mention/ExtensionConfig.js +0 -1
  21. package/src/Editor/CustomExtensions/Mention/MentionList.js +1 -1
  22. package/src/Editor/CustomExtensions/SlashCommands/ExtensionConfig.js +180 -176
  23. package/src/Editor/CustomExtensions/Variable/index.js +3 -3
  24. package/src/Editor/CustomExtensions/useCustomExtensions.js +2 -1
  25. package/src/Editor/index.js +17 -5
  26. package/src/constants/regexp.js +1 -0
  27. package/src/examples/constants.js +1 -1
  28. package/src/examples/index.js +25 -25
  29. package/src/hooks/useTabBar.js +9 -0
  30. package/src/index.scss +5 -0
  31. package/src/styles/abstracts/_neeto-ui-variables.scss +80 -9
  32. package/src/styles/abstracts/_variables.scss +4 -1
  33. package/src/styles/components/_button.scss +161 -0
  34. package/src/styles/components/_editor.scss +4 -0
  35. package/src/styles/components/_fixed-menu.scss +4 -0
  36. package/src/styles/components/_image-uploader.scss +109 -0
  37. package/src/styles/components/_input.scss +165 -0
  38. package/src/styles/components/_tab.scss +74 -0
  39. package/src/styles/components/_tooltip.scss +152 -0
  40. package/webpack.config.js +7 -0
  41. package/webpack.dev.config.js +7 -0
package/src/styles/components/_tab.scss ADDED
@@ -0,0 +1,74 @@
1
+ .neeto-ui-tab__wrapper {
2
+ width: 100%;
3
+ border-bottom: 1px solid $neeto-ui-gray-300;
4
+
5
+ &--size-large {
6
+ .neeto-ui-tab {
7
+ font-size: $neeto-ui-text-xl;
8
+ padding-left: 12px;
9
+ padding-right: 12px;
10
+ }
11
+ }
12
+ &--underline-none {
13
+ border-bottom: none;
14
+ .neeto-ui-tab {
15
+ &::before {
16
+ display: none;
17
+ }
18
+ }
19
+ }
20
+ }
21
+
22
+ .neeto-ui-tab {
23
+ color: $neeto-ui-gray-500;
24
+ font-weight: $neeto-ui-font-semibold;
25
+ font-size: $neeto-ui-text-sm;
26
+ line-height: 1;
27
+ padding: 12px 8px;
28
+ transition: $neeto-ui-transition;
29
+ position: relative;
30
+ cursor: pointer;
31
+ text-decoration: none;
32
+ outline: none;
33
+
34
+ &:hover,
35
+ &:focus,
36
+ &:focus-visible,
37
+ &:active {
38
+ text-decoration: none;
39
+ outline: none;
40
+ }
41
+
42
+ &__icon {
43
+ margin-right: 12px;
44
+ }
45
+
46
+ svg {
47
+ width: 16px;
48
+ height: 16px;
49
+ }
50
+
51
+ &:hover {
52
+ color: $neeto-ui-gray-600;
53
+ }
54
+
55
+ &:before {
56
+ content: "";
57
+ position: absolute;
58
+ width: 100%;
59
+ height: 1px;
60
+ background-color: transparent;
61
+ left: 0;
62
+ right: 0;
63
+ bottom: -2px;
64
+ transition: $neeto-ui-transition;
65
+ }
66
+
67
+ &.active {
68
+ color: $neeto-ui-gray-800;
69
+
70
+ &:before {
71
+ background-color: $neeto-ui-gray-800;
72
+ }
73
+ }
74
+ }
package/src/styles/components/_tooltip.scss ADDED
@@ -0,0 +1,152 @@
1
+ .tippy-box[data-animation="fade"][data-state="hidden"] {
2
+ opacity: 0;
3
+ }
4
+ [data-tippy-root] {
5
+ max-width: calc(100vw - 10px);
6
+ }
7
+ .tippy-box {
8
+ position: relative;
9
+ background-color: $neeto-ui-gray-800;
10
+ color: $neeto-ui-white;
11
+ border-radius: $neeto-ui-rounded-sm;
12
+ font-size: $neeto-ui-text-xs;
13
+ line-height: 1.4;
14
+ outline: 0;
15
+ transition-property: transform, visibility, opacity;
16
+ }
17
+ .tippy-box[data-placement^="top"] > .tippy-arrow {
18
+ bottom: 0;
19
+ }
20
+ .tippy-box[data-placement^="top"] > .tippy-arrow:before {
21
+ bottom: -7px;
22
+ left: 0;
23
+ border-width: 8px 8px 0;
24
+ border-top-color: initial;
25
+ transform-origin: center top;
26
+ }
27
+ .tippy-box[data-placement^="bottom"] > .tippy-arrow {
28
+ top: 0;
29
+ }
30
+ .tippy-box[data-placement^="bottom"] > .tippy-arrow:before {
31
+ top: -7px;
32
+ left: 0;
33
+ border-width: 0 8px 8px;
34
+ border-bottom-color: initial;
35
+ transform-origin: center bottom;
36
+ }
37
+ .tippy-box[data-placement^="left"] > .tippy-arrow {
38
+ right: 0;
39
+ }
40
+ .tippy-box[data-placement^="left"] > .tippy-arrow:before {
41
+ border-width: 8px 0 8px 8px;
42
+ border-left-color: initial;
43
+ right: -7px;
44
+ transform-origin: center left;
45
+ }
46
+ .tippy-box[data-placement^="right"] > .tippy-arrow {
47
+ left: 0;
48
+ }
49
+ .tippy-box[data-placement^="right"] > .tippy-arrow:before {
50
+ left: -7px;
51
+ border-width: 8px 8px 8px 0;
52
+ border-right-color: initial;
53
+ transform-origin: center right;
54
+ }
55
+ .tippy-box[data-inertia][data-state="visible"] {
56
+ transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
57
+ }
58
+ .tippy-arrow {
59
+ width: 16px;
60
+ height: 16px;
61
+ color: $neeto-ui-gray-800;
62
+ }
63
+ .tippy-arrow:before {
64
+ content: "";
65
+ position: absolute;
66
+ border-color: transparent;
67
+ border-style: solid;
68
+ }
69
+ .tippy-content {
70
+ position: relative;
71
+ padding: 5px 9px;
72
+ z-index: 1;
73
+ }
74
+
75
+ // svg arrow
76
+ .tippy-box[data-placement^="top"] > .tippy-svg-arrow {
77
+ bottom: 0;
78
+ }
79
+ .tippy-box[data-placement^="top"] > .tippy-svg-arrow:after,
80
+ .tippy-box[data-placement^="top"] > .tippy-svg-arrow > svg {
81
+ top: 16px;
82
+ transform: rotate(180deg);
83
+ }
84
+ .tippy-box[data-placement^="bottom"] > .tippy-svg-arrow {
85
+ top: 0;
86
+ }
87
+ .tippy-box[data-placement^="bottom"] > .tippy-svg-arrow > svg {
88
+ bottom: 16px;
89
+ }
90
+ .tippy-box[data-placement^="left"] > .tippy-svg-arrow {
91
+ right: 0;
92
+ }
93
+ .tippy-box[data-placement^="left"] > .tippy-svg-arrow:after,
94
+ .tippy-box[data-placement^="left"] > .tippy-svg-arrow > svg {
95
+ transform: rotate(90deg);
96
+ top: calc(50% - 3px);
97
+ left: 13px;
98
+ }
99
+ .tippy-box[data-placement^="right"] > .tippy-svg-arrow {
100
+ left: 0;
101
+ }
102
+ .tippy-box[data-placement^="right"] > .tippy-svg-arrow:after,
103
+ .tippy-box[data-placement^="right"] > .tippy-svg-arrow > svg {
104
+ transform: rotate(-90deg);
105
+ top: calc(50% - 3px);
106
+ right: 13px;
107
+ }
108
+ .tippy-svg-arrow {
109
+ width: 16px;
110
+ height: 16px;
111
+ fill: $neeto-ui-gray-800;
112
+ text-align: initial;
113
+ }
114
+ .tippy-svg-arrow,
115
+ .tippy-svg-arrow > svg {
116
+ position: absolute;
117
+ }
118
+
119
+ .tippy-svg-arrow > svg > path {
120
+ fill: $neeto-ui-gray-800;
121
+ }
122
+
123
+ // light theme
124
+ .tippy-box[data-theme~="light"] .tippy-svg-arrow > svg > path {
125
+ fill: $neeto-ui-white;
126
+ }
127
+ .tippy-box[data-theme~="light"] {
128
+ color: $neeto-ui-gray-800;
129
+ box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15),
130
+ 0 4px 80px -8px rgba(36, 40, 47, 0.25),
131
+ 0 4px 4px -2px rgba(91, 94, 105, 0.15);
132
+ background-color: $neeto-ui-white;
133
+ }
134
+ .tippy-box[data-theme~="light"][data-placement^="top"] > .tippy-arrow:before {
135
+ border-top-color: $neeto-ui-white;
136
+ }
137
+ .tippy-box[data-theme~="light"][data-placement^="bottom"]
138
+ > .tippy-arrow:before {
139
+ border-bottom-color: $neeto-ui-white;
140
+ }
141
+ .tippy-box[data-theme~="light"][data-placement^="left"] > .tippy-arrow:before {
142
+ border-left-color: $neeto-ui-white;
143
+ }
144
+ .tippy-box[data-theme~="light"][data-placement^="right"] > .tippy-arrow:before {
145
+ border-right-color: $neeto-ui-white;
146
+ }
147
+ .tippy-box[data-theme~="light"] > .tippy-backdrop {
148
+ background-color: $neeto-ui-white;
149
+ }
150
+ .tippy-box[data-theme~="light"] > .tippy-svg-arrow {
151
+ fill: $neeto-ui-white;
152
+ }
package/webpack.config.js CHANGED
@@ -1,4 +1,5 @@
1
1
  const PeerDepsExternalsPlugin = require("peer-deps-externals-webpack-plugin");
2
+ const path = require("path");
2
3
 
3
4
  module.exports = {
4
5
  entry: "./src/Editor/index.js",
@@ -40,4 +41,10 @@ module.exports = {
40
41
  libraryTarget: "umd",
41
42
  },
42
43
  plugins: [new PeerDepsExternalsPlugin()],
44
+ resolve: {
45
+ alias: {
46
+ common: path.resolve(__dirname, "/src/Common"),
47
+ hooks: path.resolve(__dirname, "/src/hooks"),
48
+ },
49
+ },
43
50
  };
package/webpack.dev.config.js CHANGED
@@ -1,4 +1,5 @@
1
1
  const HtmlWebPackPlugin = require("html-webpack-plugin");
2
+ const path = require("path");
2
3
 
3
4
  module.exports = {
4
5
  entry: "./src/index.js",
@@ -58,4 +59,10 @@ module.exports = {
58
59
  filename: "./index.html",
59
60
  }),
60
61
  ],
62
+ resolve: {
63
+ alias: {
64
+ common: path.resolve(__dirname, "/src/Common"),
65
+ hooks: path.resolve(__dirname, "/src/hooks"),
66
+ },
67
+ },
61
68
  };