@vonaffenfels/slate-editor 1.0.1

package/.babelrc

@@ -0,0 +1,44 @@
+{
+  "presets": [
+    "next/babel",
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "targets": {
+          "browsers": [
+            "last 2 Chrome versions",
+            "last 2 Firefox versions",
+            "last 2 Safari versions",
+            "last 2 iOS versions",
+            "last 1 Android version",
+            "last 1 ChromeAndroid version",
+            "ie 11"
+          ]
+        }
+      }
+    ],
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-proposal-private-methods",
+      {
+        "loose": true
+      }
+    ],
+    [
+      "@babel/plugin-proposal-private-property-in-object",
+      {
+        "loose": true
+      }
+    ],
+    [
+      "@babel/plugin-proposal-class-properties",
+      {
+        "loose": true
+      }
+    ],
+    "@babel/plugin-syntax-dynamic-import"
+  ]
+}

package/README.md

@@ -0,0 +1,5 @@
+# dev
+
+run config EDITOR :: DEV or in repo root yarn devEditor
+
+http://localhost:9000/dist/

package/componentLoader.js

@@ -0,0 +1,52 @@
+const walkSync = require("walk-sync");
+
+module.exports = async function componentLoader() {
+    const options = this.getOptions();
+
+    const files = walkSync(options.componentRoot, {
+        directories: false,
+        globs: ["**/*.js", "**/*.jsx", "**/*.ts"],
+        ignore: [
+            "**/*.stories.js",
+            "**/*.stories.jsx",
+            "**/*.stories.ts",
+            "**/*.loader.js",
+            "**/*.loader.jsx",
+            "**/*.loader.ts",
+            "atomic/**/*",
+        ],
+    });
+
+    console.log(`Found ${files.length} components in ${options.componentRoot}`);
+    const components = files.map(file => {
+        let componentNameParts = file.split(".");
+        componentNameParts.pop();
+        return {name: componentNameParts.join("/"), file: `${options.componentImportRoot}/${file}`};
+    })
+
+    const componentImports = components.map(component => {
+        return `const ${component.name} = dynamic(() => import("${component.file}").then(v => v?.[${component.name}] || v.default));`;
+    });
+
+    return `
+        import dynamic from 'next/dynamic';
+    
+        ${componentImports.join("\n")}
+        
+        export default function componentLoader(block) {
+            const localBlock = String(block).toLowerCase();
+            
+            switch(localBlock) {
+                ${components.map(component => {
+        return `
+                        case "${component.name.toLowerCase()}":
+                            return ${component.name};
+                    `;    
+    })}
+                default:
+                    console.warn(\`No Component found for \${block}\`);
+                    return null;
+            }
+        }
+    `;
+};

package/dist/BlockEditor.css

@@ -0,0 +1,93 @@
+.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)}
+.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}
+.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}
+* {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
+}
+
+#sidebar-editor {
+    background-color: rgb(247, 249, 250);
+    height: 100%;
+    overflow-y: auto;
+    flex-basis: 400px;
+    flex-shrink: 0;
+    padding: 61px 16px 16px 16px;
+}
+
+select {
+    font-size: 0.875rem !important;
+    color: rgb(90, 101, 124) !important;
+    background-color: white !important;
+    border: 1px solid #cfd9e0 !important;
+    border-radius: 6px !important;
+    box-shadow: none !important;
+    filter: none !important;
+}
+
+p, label {
+    color: rgb(90, 101, 124);
+}
+
+label {
+    display: block;
+    margin: 0 0 4px 0 !important;
+}
+
+input[type="text"],
+input[type="number"],
+input[type="color"],
+input[type="date"],
+textarea {
+    display: block;
+    font-size: 0.875rem !important;
+    color: rgb(90, 101, 124) !important;
+    background-color: white !important;
+    border: 1px solid #cfd9e0 !important;
+    border-radius: 6px !important;
+    box-shadow: none !important;
+    filter: none !important;
+    width: 100% !important;
+    padding: 8px 0.75rem;
+}
+
+input[type="color"] {
+    padding: 0;
+}
+
+input[type="range"] {
+    display: block;
+    width: 100%;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+    margin-right: 4px;
+}
+
+/* button[data-test-id="cf-ui-button"] span {
+    color: #036fe3 !important;
+}
+
+button[data-test-id="cf-ui-button"] svg {
+    fill: #036fe3 !important;
+}
+
+button[data-test-id="cf-ui-button"]:hover span {
+    color: #FFFFFF !important;
+}
+
+button[data-test-id="cf-ui-button"]:hover svg {
+    fill: #FFFFFF !important;
+} */
+
+.inline-check-wrapper {
+    display: inline-block;
+    margin-right: 8px;
+}
+
+button {
+    width: 100%;
+    padding: 8px !important;
+    color: #036fe3 !important;
+    border: 1px solid #036fe3 !important;
+}