@vonaffenfels/slate-editor 1.0.2 → 1.0.3

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 (12) hide show
  1. package/componentLoader.js +10 -8
  2. package/dist/BlockEditor.css +1 -92
  3. package/dist/BlockEditor.js +1 -1
  4. package/dist/Renderer.js +1 -1
  5. package/dist/index.css +1 -92
  6. package/dist/index.js +1 -1
  7. package/package.json +2 -3
  8. package/scss/sidebarEditor.scss +104 -0
  9. package/src/BlockEditor.js +2 -2
  10. package/src/SidebarEditor/SidebarEditorField.js +35 -32
  11. package/src/SidebarEditor.js +13 -12
  12. package/src/SidebarEditor.css +0 -92
package/componentLoader.js CHANGED
@@ -13,7 +13,10 @@ module.exports = async function componentLoader() {
13
13
  "**/*.loader.js",
14
14
  "**/*.loader.jsx",
15
15
  "**/*.loader.ts",
16
- "atomic/**/*",
16
+ "**/streams/*.js",
17
+ "**/streams/*.jsx",
18
+ "**/streams/*.ts",
19
+ "**/atomic/**/*",
17
20
  ],
18
21
  });
19
22
 
@@ -21,11 +24,11 @@ module.exports = async function componentLoader() {
21
24
  const components = files.map(file => {
22
25
  let componentNameParts = file.split(".");
23
26
  componentNameParts.pop();
24
- return {name: componentNameParts.join("/"), file: `${options.componentImportRoot}/${file}`};
25
- })
27
+ return {name: componentNameParts.join("").split("/").join(""), namePath: componentNameParts.join(""), file: `${options.componentImportRoot}/${file}`};
28
+ });
26
29
 
27
30
  const componentImports = components.map(component => {
28
- return `const ${component.name} = dynamic(() => import("${component.file}").then(v => v?.[${component.name}] || v.default));`;
31
+ return `const ${component.name} = dynamic(() => import("${component.file}").then(v => v?.["${component.name}"] || v.default));`;
29
32
  });
30
33
 
31
34
  return `
@@ -39,10 +42,9 @@ module.exports = async function componentLoader() {
39
42
  switch(localBlock) {
40
43
  ${components.map(component => {
41
44
  return `
42
- case "${component.name.toLowerCase()}":
43
- return ${component.name};
44
- `;
45
- })}
45
+ case "${component.namePath.toLowerCase()}":
46
+ return ${component.name};`;
47
+ }).join("\n")}
46
48
  default:
47
49
  console.warn(\`No Component found for \${block}\`);
48
50
  return null;
package/dist/BlockEditor.css CHANGED
@@ -1,95 +1,4 @@
1
1
  .toolbar{background-color:rgba(255,255,255,.95);border-bottom:1px solid rgba(0,0,0,.3);display:none;flex-direction:row;justify-content:space-between;padding:5px;position:absolute;z-index:500}.toolbar.toolbar-static{display:block;position:fixed;width:100%;max-width:100%;top:0px;left:0px}.toolbar.active{display:block}.toolbar .toolbar-btns{display:flex}.toolbar .toolbar-btn{border-radius:3px;color:#000;cursor:pointer;font-weight:bold;margin-right:5px;padding:5px 7px;z-index:500;position:relative;display:block}.toolbar .toolbar-btn.active{background-color:rgba(0,0,0,.3)}.toolbar .toolbar-btn:last-child{margin-right:0px}.toolbar .toolbar-btn:hover,.toolbar .toolbar-btn:active{background-color:rgba(0,0,0,.2)}.toolbar .toolbar-btn:hover .toolbar-btn-config,.toolbar .toolbar-btn:active .toolbar-btn-config{display:block}.toolbar .toolbar-btn .toolbar-btn-config{position:absolute;top:28px;left:0px;display:none;background-color:rgba(255,255,255,.95);border-bottom:1px solid rgba(0,0,0,.3);padding:5px 7px}.toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner{display:flex;flex-direction:column}.toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row{min-width:250px;padding:5px 7px;display:flex;flex-direction:row}.toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row .toolbar-form-label{flex-grow:0;padding:0 7px 0 0}.toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row .toolbar-form-input{flex-grow:1}.toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row .toolbar-form-input input{padding:5px;border:1px solid gray;background-color:#fff;color:#000}.toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row .toolbar-form-input input[type=checkbox]:checked{color:#fff;background-color:#000}.toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row .toolbar-btn{display:flex;flex-grow:1;border:1px solid #000}.toolbar .toolbar-btn-expand{z-index:500;display:block;max-height:28px;overflow:hidden}.toolbar .toolbar-btn-expand .toolbar-btn-expand-inner{display:flex;flex-direction:column}.toolbar .toolbar-btn-expand .toolbar-btn-expand-inner .toolbar-btn.active{order:-1}.toolbar .toolbar-btn-expand:hover{overflow:visible}.toolbar .toolbar-btn-expand:hover .toolbar-btn-expand-inner{background-color:rgba(255,255,255,.95);border-bottom:1px solid rgba(0,0,0,.3)}.toolbar .toolbar-btn-expand-right{z-index:500;display:block;max-height:28px;overflow:hidden}.toolbar .toolbar-btn-expand-right .toolbar-btn-expand-inner{left:100%;display:flex;flex-direction:column}.toolbar .toolbar-btn-expand-right .toolbar-btn-expand-inner .toolbar-btn.active{order:-1}.toolbar .toolbar-btn-expand-right:hover{overflow:visible}.toolbar .toolbar-btn-expand-right:hover .toolbar-btn-expand-inner{background-color:rgba(255,255,255,.95);border-bottom:1px solid rgba(0,0,0,.3)}
2
2
  .storybook-element{display:inline}.storybook-element.storybook-element-float-left{float:left}.storybook-element.storybook-element-float-right{float:right}.storybook-element .storybook-element-component{user-select:none;display:block}.storybook-element .storybook-element-component.storybook-inline{display:inline-block}.storybook-element .storybook-element-component .editor-empty-element{background-color:red;border:1px solid #000;min-height:20px;min-width:100px}.storybook-element .storybook-element-component .storybook-element-display:empty{display:block;background-color:red;border:1px solid #000;min-height:30px;min-width:100px}.storybook-element .storybook-element-component .storybook-element-display.storybook-element-display-empty{display:block;background-color:red;border:1px solid #000;color:#fff;font-weight:bold;font-size:110%;padding:10px;min-height:30px;min-width:100px;position:relative}.storybook-element .storybook-element-component .storybook-element-display.storybook-element-display-empty::after{position:absolute;top:0px;left:0px;content:attr(data-content)}.storybook-element .storybook-element-error{background-color:red;padding:15px;font-size:18px;font-weight:bold;min-height:100px;min-width:100px}
3
3
  .block-editor-wrapper{position:relative;display:flex;height:100%;max-height:100%;max-width:100%;width:100%}.block-editor-wrapper.storybook-active .slate-editor{display:none;overflow:hidden}.block-editor-wrapper .storybook-target{display:block;height:100%;left:0px;position:fixed;top:0px;width:100%;z-index:1000}.block-editor-wrapper .storybook-target:empty{display:none}.block-editor-wrapper .storybook-target .storybook-frame{height:100%;width:100%}.block-editor-wrapper .storybook-target .storybook-frame iframe{height:100%;width:100%}.block-editor-wrapper .slate-editor{max-height:100%;height:100%;z-index:100;max-width:100%;overflow-y:auto;padding:40px 60px 0 60px;position:relative;width:100%}.block-editor-wrapper .slate-editor span[data-slate-node=text]{font-family:"Font TWO BR",sans-serif}.block-editor-wrapper .slate-editor p[data-slate-node=element]{padding-bottom:20px;position:relative}.block-editor-wrapper .slate-editor p[data-slate-node=element]:after{font-size:1em;content:"P";color:#cecece;position:absolute;left:-20px;text-transform:uppercase;top:1px;user-select:none}.block-editor-wrapper .slate-editor h1[data-slate-node=element]{font-size:2em;position:relative}.block-editor-wrapper .slate-editor h1[data-slate-node=element]:after{content:"h1";color:#cecece;position:absolute;left:-26px;text-transform:uppercase;top:1px;user-select:none}.block-editor-wrapper .slate-editor h2[data-slate-node=element]{font-size:1.5em;position:relative}.block-editor-wrapper .slate-editor h2[data-slate-node=element]:after{content:"h2";color:#cecece;position:absolute;left:-26px;text-transform:uppercase;top:1px;user-select:none}.block-editor-wrapper .slate-editor h3[data-slate-node=element]{font-size:1.3em;position:relative}.block-editor-wrapper .slate-editor h3[data-slate-node=element]:after{content:"h3";color:#cecece;position:absolute;left:-26px;text-transform:uppercase;top:1px;user-select:none}.block-editor-wrapper .slate-editor h4[data-slate-node=element]{font-size:1.1em;position:relative}.block-editor-wrapper .slate-editor h4[data-slate-node=element]:after{content:"h4";color:#cecece;position:absolute;left:-26px;text-transform:uppercase;top:1px;user-select:none}.block-editor-wrapper .slate-editor h5[data-slate-node=element]{font-size:1em;position:relative}.block-editor-wrapper .slate-editor h5[data-slate-node=element]:after{content:"h5";color:#cecece;position:absolute;left:-26px;text-transform:uppercase;top:1px;user-select:none}.block-editor-wrapper .slate-editor h6[data-slate-node=element]{font-size:1em;position:relative}.block-editor-wrapper .slate-editor h6[data-slate-node=element]:after{content:"h6";color:#cecece;position:absolute;left:-26px;text-transform:uppercase;top:1px;user-select:none}.block-editor-wrapper .slate-editor ul[data-slate-node=element]{list-style:circle}.block-editor-wrapper .slate-editor ol[data-slate-node=element]{list-style:decimal}.block-editor-wrapper .slate-editor a[data-slate-node=element]{color:rgb(var(--color-secondary));text-decoration:underline}.block-editor-wrapper .slate-editor div[data-slate-editor=true]{height:100%}.block-editor-wrapper .slate-editor .align-left{text-align:left}.block-editor-wrapper .slate-editor .align-right{text-align:right}.block-editor-wrapper .slate-editor .align-center{text-align:center}.block-editor-wrapper .slate-editor .align-justify{text-align:justify}.block-editor-wrapper .slate-editor .block-align-left{display:inline-block;float:left;margin-right:15px}.block-editor-wrapper .slate-editor .block-align-undefined{display:inline-block}.block-editor-wrapper .slate-editor .block-align-right{display:inline-block;float:right;margin-left:15px}.block-editor-wrapper .options-wrapper{position:relative}.block-editor-wrapper .options-wrapper:hover .options-container{display:flex}.block-editor-wrapper .options-wrapper .options-container{display:none;flex-direction:row;justify-content:center;left:0px;position:absolute;top:0px;z-index:200;background-color:gray;padding:4px 4px 4px 4px}.block-editor-wrapper .options-wrapper .options-container .options-container-option{cursor:pointer;width:26px}.block-editor-wrapper .options-wrapper .options-container .options-container-option>svg{width:100%}.block-editor-wrapper .options-wrapper .options-container .options-container-option.options-container-option-expand-text{width:100px}.block-editor-wrapper .options-wrapper .options-container .options-container-option.options-container-option-delete{color:red}.block-editor-wrapper .options-wrapper .options-container.options-container-right{left:-26px}.block-editor-wrapper .layout-slot-option-padding{position:relative;width:20px;height:20px;display:inline-block}.block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-item{background-color:#000;display:block;position:absolute;cursor:pointer}.block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-item:hover{background-color:#fff;z-index:10}.block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-item.active{background-color:#d3d3d3;z-index:10}.block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-top{height:5px;width:20px;top:0;left:0}.block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-right{height:20px;width:5px;right:0;top:0}.block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-bottom{height:5px;width:20px;bottom:0;left:0}.block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-left{height:20px;width:5px;top:0;left:0}.block-editor-wrapper .layout-block{display:flex;flex-direction:row}.block-editor-wrapper .layout-block.article-width{width:44.4444444444%}.block-editor-wrapper .layout-block.site-width{width:66.6666666667%}.block-editor-wrapper .layout-block .layout-slot{display:flex;flex-direction:column;position:relative;outline:1px dashed gray}.block-editor-wrapper .layout-block .layout-slot .layout-slot-options{background-color:gray;color:#fff;font-size:24px;padding:10px;display:flex;flex-direction:row;justify-content:space-between}.block-editor-wrapper .layout-block .layout-slot .layout-slot-options .layout-slot-option{text-transform:uppercase;display:inline-block}.block-editor-wrapper .layout-block .layout-slot .layout-slot-options .layout-slot-name{text-transform:uppercase;display:inline-block}.block-editor-wrapper .layout-block .layout-slot.layout-slot-widecol{flex-grow:1}.block-editor-wrapper .layout-block .layout-slot.layout-slot-maincol{flex-grow:1}.block-editor-wrapper .layout-block .layout-slot.layout-slot-sidecol{flex-grow:0;width:30%}.block-editor-wrapper .layout-block .layout-slot.layout-slot-grid-half{flex-grow:0;width:50%}.block-editor-wrapper .layout-block .layout-slot.layout-slot-grid-3{flex-grow:0;width:100%}.block-editor-wrapper .layout-block .layout-slot.layout-slot-grid-2{flex-grow:0;width:66.6666666666%}.block-editor-wrapper .layout-block .layout-slot.layout-slot-grid-1{flex-grow:0;width:33.3333333333%}.block-editor-wrapper .layout-block .layout-slot.layout-slot-grid-fill{flex-grow:1}.block-editor-wrapper .layout-block .layout-slot.layout-slot-grid-auto{flex-grow:0;width:auto}
4
- * {
5
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
6
- }
7
-
8
- #sidebar-editor {
9
- background-color: rgb(247, 249, 250);
10
- height: 100%;
11
- overflow-y: auto;
12
- flex-basis: 400px;
13
- flex-shrink: 0;
14
- padding: 61px 16px 16px 16px;
15
- resize: horizontal;
16
- }
17
-
18
- select {
19
- font-size: 0.875rem !important;
20
- color: rgb(90, 101, 124) !important;
21
- background-color: white !important;
22
- border: 1px solid #cfd9e0 !important;
23
- border-radius: 6px !important;
24
- box-shadow: none !important;
25
- filter: none !important;
26
- }
27
-
28
- p, label {
29
- color: rgb(90, 101, 124);
30
- }
31
-
32
- label {
33
- display: block;
34
- margin: 0 0 4px 0 !important;
35
- }
36
-
37
- input[type="text"],
38
- input[type="number"],
39
- input[type="color"],
40
- input[type="date"],
41
- select,
42
- textarea {
43
- display: block;
44
- font-size: 0.875rem !important;
45
- color: rgb(90, 101, 124) !important;
46
- background-color: white !important;
47
- border: 1px solid #cfd9e0 !important;
48
- border-radius: 6px !important;
49
- box-shadow: none !important;
50
- filter: none !important;
51
- width: 100% !important;
52
- padding: 8px 0.75rem !important;
53
- }
54
-
55
- input[type="color"] {
56
- padding: 0;
57
- }
58
-
59
- input[type="range"] {
60
- display: block;
61
- width: 100%;
62
- }
63
-
64
- input[type="radio"],
65
- input[type="checkbox"] {
66
- margin-right: 4px;
67
- }
68
-
69
- /* button[data-test-id="cf-ui-button"] span {
70
- color: #036fe3 !important;
71
- }
72
-
73
- button[data-test-id="cf-ui-button"] svg {
74
- fill: #036fe3 !important;
75
- }
76
-
77
- button[data-test-id="cf-ui-button"]:hover span {
78
- color: #FFFFFF !important;
79
- }
80
-
81
- button[data-test-id="cf-ui-button"]:hover svg {
82
- fill: #FFFFFF !important;
83
- } */
84
-
85
- .inline-check-wrapper {
86
- display: inline-block;
87
- margin-right: 8px;
88
- }
89
-
90
- button {
91
- width: 100%;
92
- padding: 8px !important;
93
- color: #036fe3 !important;
94
- border: 1px solid #036fe3 !important;
95
- }
4
+ #sidebar-editor{background-color:#f7f9fa;height:100%;overflow-y:auto;flex-basis:400px;flex-shrink:0;padding:61px 16px 16px 16px;resize:horizontal}#sidebar-editor *{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" !important}#sidebar-editor select{font-size:.875rem !important;color:#5a657c !important;background-color:#fff !important;border:1px solid #cfd9e0 !important;border-radius:6px !important;box-shadow:none !important;filter:none !important}#sidebar-editor p,#sidebar-editor label{color:#5a657c}#sidebar-editor label{margin:0 0 6px 0 !important}#sidebar-editor input[type=text],#sidebar-editor input[type=number],#sidebar-editor input[type=color],#sidebar-editor input[type=date],#sidebar-editor select,#sidebar-editor textarea{display:block;font-size:.875rem !important;color:#5a657c !important;background-color:#fff !important;border:1px solid #cfd9e0 !important;border-radius:6px !important;box-shadow:none !important;filter:none !important;width:100% !important;padding:8px .75rem !important}#sidebar-editor input[type=color]{padding:0}#sidebar-editor input[type=range]{display:block;width:100%}#sidebar-editor input[type=radio],#sidebar-editor input[type=checkbox]{margin-right:4px}#sidebar-editor .inline-check-wrapper{display:inline-block;margin-right:8px}#sidebar-editor button{width:100%;padding:8px !important;color:#036fe3 !important;border:1px solid #036fe3 !important}#sidebar-editor details{display:block;font-size:.875rem !important;color:#5a657c !important;background-color:#fff !important;border:1px solid #cfd9e0 !important;border-radius:6px !important;box-shadow:none !important;filter:none !important;width:100% !important;padding:16px !important}