@vonaffenfels/slate-editor 1.0.3 → 1.0.4

package/dist/index.js.LICENSE.txt

@@ -4,30 +4,6 @@
 	http://jedwatson.github.io/classnames
 */
 
-/*!
-  Copyright (c) 2015 Jed Watson.
-  Based on code that is Copyright 2013-2015, Facebook, Inc.
-  All rights reserved.
-*/
-
-/*!
-  Copyright (c) 2018 Jed Watson.
-  Licensed under the MIT License (MIT), see
-  http://jedwatson.github.io/classnames
-*/
-
-/*!
- * Adapted from jQuery UI core
- *
- * http://jqueryui.com
- *
- * Copyright 2014 jQuery Foundation and other contributors
- * Released under the MIT license.
- * http://jquery.org/license
- *
- * http://api.jqueryui.com/category/ui-core/
- */
-
 /*!
  * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
@@ -58,12 +34,3 @@
 /*! https://mths.be/esrever v0.2.0 by @mathias */
 
 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
-
-/** @license React v16.13.1
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -71,7 +71,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "5886b3f191d7e644434c7baef0808194aec62802",
+    "gitHead": "ba6d3fea2cca04a822de7e3d7dff5949e62a9d46",
     "publishConfig": {
         "access": "public"
     }

package/scss/demo.scss

@@ -6,6 +6,7 @@ html, body, #root {
 @media (prefers-color-scheme: dark) {
     .slate-editor {
         color: white;
+        background-color: #1c1c27;
     }
 }
 
@@ -17,6 +18,7 @@ html, body, #root {
     flex-direction: column;
 
     .editor-demo-output {
+        display: none;
         width: 100%;
     }
 
@@ -76,23 +78,28 @@ html, body, #root {
 
 .block-editor-content h1 {
     font-size: 2em;
+    margin-bottom: 2em;
 }
 
 .block-editor-content h2 {
     font-size: 1.5em;
+    margin-bottom: 1em;
 }
 
 .block-editor-content h3 {
     font-size: 1.3em;
+    margin-bottom: 1em;
 }
 
 .block-editor-content h4 {
     font-size: 1.1em;
+    margin-bottom: 1em;
 }
 
 .block-editor-content h5,
 .block-editor-content h6 {
     font-size: 1em;
+    margin-bottom: 1em;
 }
 
 .block-editor-content ul, .block-editor-content ol {

package/scss/editor.scss

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 .block-editor-wrapper {
 
   position: relative;
@@ -39,14 +43,12 @@
   }
 
   .slate-editor {
-    max-height: 100%;
+    width: 100%;
     height: 100%;
     z-index: 100;
-    max-width: 100%;
     overflow-y: auto;
-    padding: 40px 60px 0 60px;
+    padding: 40px 0 0 0;
     position: relative;
-    width: 100%;
 
     span[data-slate-node="text"] {
       /* eslint-disable-next-line */
@@ -59,7 +61,7 @@
       //outline: #CECECE dashed;
 
       &:after {
-        font-size: 1em;
+        font-size: 24px;
         content: "P";
         color: #CECECE;
         position: absolute;
@@ -71,29 +73,29 @@
     }
 
     h1[data-slate-node="element"] {
-      font-size: 2em;
       position: relative;
 
       &:after {
         content: "h1";
+        font-size: 24px;
         color: #CECECE;
         position: absolute;
-        left: -26px;
+        left: -36px;
         text-transform: uppercase;
-        top: 1px;
+        top: 6px;
         user-select: none;
       }
     }
 
     h2[data-slate-node="element"] {
-      font-size: 1.5em;
       position: relative;
 
       &:after {
         content: "h2";
+        font-size: 24px;
         color: #CECECE;
         position: absolute;
-        left: -26px;
+        left: -36px;
         text-transform: uppercase;
         top: 1px;
         user-select: none;
@@ -101,14 +103,14 @@
     }
 
     h3[data-slate-node="element"] {
-      font-size: 1.3em;
       position: relative;
 
       &:after {
         content: "h3";
+        font-size: 24px;
         color: #CECECE;
         position: absolute;
-        left: -26px;
+        left: -36px;
         text-transform: uppercase;
         top: 1px;
         user-select: none;
@@ -116,14 +118,14 @@
     }
 
     h4[data-slate-node="element"] {
-      font-size: 1.1em;
       position: relative;
 
       &:after {
         content: "h4";
+        font-size: 24px;
         color: #CECECE;
         position: absolute;
-        left: -26px;
+        left: -36px;
         text-transform: uppercase;
         top: 1px;
         user-select: none;
@@ -131,14 +133,14 @@
     }
 
     h5[data-slate-node="element"] {
-      font-size: 1em;
       position: relative;
 
       &:after {
         content: "h5";
+        font-size: 24px;
         color: #CECECE;
         position: absolute;
-        left: -26px;
+        left: -36px;
         text-transform: uppercase;
         top: 1px;
         user-select: none;
@@ -146,14 +148,14 @@
     }
 
     h6[data-slate-node="element"] {
-      font-size: 1em;
       position: relative;
 
       &:after {
         content: "h6";
+        font-size: 24px;
         color: #CECECE;
         position: absolute;
-        left: -26px;
+        left: -36px;
         text-transform: uppercase;
         top: 1px;
         user-select: none;
@@ -211,7 +213,9 @@
   }
 
   .options-wrapper {
+    font-family: Arial, sans-serif;
     position: relative;
+    color: #161616;
 
     &:hover {
       .options-container {
@@ -219,20 +223,25 @@
       }
     }
 
+    .options-toolbar {
+      justify-content: space-between;
+      display: flex;
+      background-color: rgb(235 235 235);
+      padding: 0.25em;
+    }
+
     .options-container {
-      display: none;
+      display: flex;
       flex-direction: row;
       justify-content: center;
-      left: 0px;
-      position: absolute;
-      top: 0px;
+      position: relative;
       z-index: 200;
-      background-color: grey;
-      padding: 4px 4px 4px 4px;
+      padding: 0.25em;
 
       .options-container-option {
         cursor: pointer;
         width: 26px;
+        margin-right: 0.25em;
 
         > svg {
           width: 100%;
@@ -248,16 +257,15 @@
       }
 
       &.options-container-right {
-        left: -26px;
+        self-align: flex-end;
       }
     }
   }
 
   .layout-slot-option-padding {
-
     position: relative;
-    width: 20px;
-    height: 20px;
+    width: 1.5em;
+    height: 1.5em;
     display: inline-block;
 
     .layout-slot-option-padding-item {
@@ -267,40 +275,40 @@
       cursor: pointer;
 
       &:hover {
-        background-color: white;
+        background-color: #61a2e9;
         z-index: 10
       }
 
       &.active {
-        background-color: lightgray;
+        background-color: #3490f3;
         z-index: 10
       }
     }
 
     .layout-slot-option-padding-top {
-      height: 5px;
-      width: 20px;
+      height: 20%;
+      width: 100%;
       top: 0;
       left: 0;
     }
 
     .layout-slot-option-padding-right {
-      height: 20px;
-      width: 5px;
+      height: 100%;
+      width: 20%;
       right: 0;
       top: 0;
     }
 
     .layout-slot-option-padding-bottom {
-      height: 5px;
-      width: 20px;
+      height: 20%;
+      width: 100%;
       bottom: 0;
       left: 0;
     }
 
     .layout-slot-option-padding-left {
-      height: 20px;
-      width: 5px;
+      height: 100%;
+      width: 20%;
       top: 0;
       left: 0;
     }
@@ -391,4 +399,28 @@
       }
     }
   }
+
+  .selected-storybook-element {
+    outline: dashed #036fe3;
+  }
+}
+
+button {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
+  width: 100%;
+  padding: 8px 0.75rem !important;
+  color: #FFFFFF !important;
+  border: 1px solid #036fe3 !important;
+  transition: all 100ms ease-in-out;
+  background-color: #036fe3 !important;
+  font-size: 0.875rem !important;
+  border-radius: 4px !important;
+}
+
+button:hover {
+  background-color: #0275F0 !important;
+}
+
+button:active {
+  background-color: #0262C9 !important;
 }

package/scss/sidebarEditor.scss

@@ -1,25 +1,16 @@
 #sidebar-editor {
+    display: flex;
+    flex-direction: column;
     background-color: rgb(247, 249, 250);
-    height: 100%;
+    max-height: 100%;
     overflow-y: auto;
     flex-basis: 400px;
     flex-shrink: 0;
-    padding: 61px 16px 16px 16px;
-    resize: horizontal;
+    padding: 60px 16px 16px 16px;
 
     * {
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
     }
-
-    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);
@@ -48,7 +39,7 @@
     }
     
     input[type="color"] {
-        padding: 0;
+        padding: 4px !important;
     }
     
     input[type="range"] {
@@ -82,13 +73,6 @@
         margin-right: 8px;
     }
     
-    button {
-        width: 100%;
-        padding: 8px !important;
-        color: #036fe3 !important;
-        border: 1px solid #036fe3 !important;
-    }
-    
     details {
         display: block;
         font-size: 0.875rem !important;
@@ -101,4 +85,59 @@
         width: 100% !important;
         padding: 16px !important;
     }
+
+    summary {
+        cursor: pointer;
+    }
+
+    .disabled {
+        opacity: 0.4;
+        cursor: not-allowed !important;
+    }
+
+    .icon-button {
+        display: inline-block;
+        color: rgb(90, 101, 124) !important;
+        background-color: white !important;
+        border: 1px solid #cfd9e0 !important;
+        border-radius: 6px;
+        filter: none !important;
+        width: auto !important;
+        text-align: center;
+    }
+
+    .icon-button:not(.disabled):hover {
+        background-color: rgb(248, 248, 248) !important;
+    }
+
+    .icon-button:not(.disabled):active {
+        background-color: rgb(237, 237, 237) !important;
+    }
+
+    .icon-button-group {
+        display: inline-flex;
+        border-radius: 6px !important;
+        overflow: hidden;
+        border: 1px solid #cfd9e0 !important;
+
+        .icon-button {
+            border-radius: 0 !important;
+            border: none !important;
+            border-right: 1px solid #cfd9e0 !important;
+        }
+
+        .icon-button:last-child {
+            border: none !important;
+        }
+    }
+
+    .message {
+        font-size: 0.875rem;
+        padding: 16px;
+        border-radius: 4px;
+    }
+
+    .message.message--negative {
+        background-color: rgba(238, 26, 26, 0.2);
+    }
 }

package/scss/storybook.scss

@@ -1,6 +1,53 @@
 .storybook-element {
   display: inline;
 
+  .storybook-element-component-overlay {
+    display: none;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 10;
+    background-color: rgba(255, 255, 255, 0.7);
+    color: black;
+    font-size: 2em;
+    align-items: center;
+    justify-content: center;
+    content-visibility: auto;
+  }
+
+  &.storybook-inline {
+    display: inline-flex;
+    flex-direction: row-reverse;
+
+    .options-toolbar {
+      display: inline-block;
+
+      .options-container {
+        padding: 0.15em;
+
+        .options-container-option {
+          width: 16px;
+        }
+      }
+    }
+
+    .storybook-element-component {
+      display: inline-block;
+
+      .editor-empty-element {
+        min-width: 220px;
+        min-height: 10px;
+        padding: 0.15em;
+      }
+    }
+
+    .storybook-element-component-overlay {
+      font-size: 0.75em;
+      min-width: 220px;
+      text-align: center;
+    }
+  }
+
   &.storybook-element-float-left {
     float: left;
   }
@@ -12,18 +59,39 @@
   .storybook-element-component {
     user-select: none;
     display: block;
+    position: relative;
 
-    &.storybook-inline {
-      display: inline-block;
+    &:not(.selected-storybook-element):hover {
+      .storybook-element-component-overlay {
+        user-select: none;
+        display: flex;
+        cursor: pointer;
+      }
     }
 
     .editor-empty-element {
-      background-color: red;
+
+      display: block;
+      background-color: #42000b;
+      color: white;
       border: 1px solid black;
-      min-height: 20px;
-      min-width: 100px;
+      min-height: 40px;
+      padding: 2em;
+      min-width: 100%;
+
+      &.editor-select-element {
+        background-color: #555555;
+      }
     }
 
+    &.storybook-inline {
+      .editor-empty-element {
+        min-height: 20px;
+        min-width: 100px;
+      }
+    }
+
+
     .storybook-element-display {
       &:empty {
         display: block;

package/scss/toolbar.scss

@@ -4,6 +4,7 @@
     display: none;
     flex-direction: row;
     justify-content: space-between;
+    font-family: Arial, sans-serif;
     padding: 5px;
     position: absolute;
     z-index: 500;
@@ -23,6 +24,7 @@
 
     .toolbar-btns {
         display: flex;
+        align-items: center;
     }
 
     .toolbar-btn {