@vonaffenfels/slate-editor 1.0.1

package/package.json

@@ -0,0 +1,79 @@
+{
+    "name": "@vonaffenfels/slate-editor",
+    "version": "1.0.1",
+    "description": "",
+    "main": "dist/index.js",
+    "scripts": {
+        "prepublish": "yarn run build",
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "build": "rm -rf dist && webpack --config webpack.config.build.js",
+        "buildWatch": "rm -rf dist && webpack --config webpack.config.build.js --watch",
+        "dev": "webpack serve --config webpack.config.dev.js --open"
+    },
+    "author": "",
+    "license": "ISC",
+    "peerDependencies": {
+        "react": "17.0.2",
+        "react-dom": "17.0.2"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.20.12",
+        "@babel/plugin-proposal-class-properties": "^7.12.13",
+        "@babel/plugin-proposal-private-methods": "^7.18.6",
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/preset-env": "^7.13.15",
+        "@babel/preset-react": "^7.13.13",
+        "@contentful/forma-36-react-components": "^3.100.7",
+        "@fortawesome/fontawesome-svg-core": "^1.2.35",
+        "@fortawesome/free-solid-svg-icons": "^5.15.3",
+        "@fortawesome/react-fontawesome": "^0.1.14",
+        "@tailwindcss/postcss7-compat": "^2.1.0",
+        "autoprefixer": "^10.4.13",
+        "babel-loader": "^8.2.2",
+        "browserify-fs": "^1.0.0",
+        "buffer": "^6.0.3",
+        "classnames": "2.3.2",
+        "clean-webpack-plugin": "^3.0.0",
+        "copy-webpack-plugin": "^8.1.1",
+        "core-js": "^3.11.0",
+        "css-loader": "^5.2.4",
+        "dotenv-webpack": "^7.0.2",
+        "file-loader": "^6.2.0",
+        "graphql": "16.5.0",
+        "graphql-tag": "2.12.6",
+        "html-webpack-plugin": "^5.3.1",
+        "mini-css-extract-plugin": "^1.5.0",
+        "next": "^12.3.4",
+        "path-browserify": "^1.0.1",
+        "postcss": "8.4.14",
+        "postcss-import": "^15.1.0",
+        "postcss-loader": "^5.2.0",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "sass": "^1.32.11",
+        "sass-loader": "^10.0.1",
+        "shortid": "^2.2.16",
+        "slate": "^0.62.0",
+        "slate-history": "^0.62.0",
+        "slate-react": "^0.62.0",
+        "slate-when": "^0.2.0",
+        "style-loader": "^2.0.0",
+        "tailwindcss": "3.3.2",
+        "url-loader": "^4.1.1",
+        "util": "^0.12.5",
+        "walk-sync": "^3.0.0",
+        "webpack": "5.73.0",
+        "webpack-cli": "^4.6.0",
+        "webpack-dev-server": "4.7.4"
+    },
+    "dependencies": {
+        "@svgr/webpack": "^5.5.0",
+        "cssnano": "^5.0.1",
+        "escape-html": "^1.0.3"
+    },
+    "gitHead": "06971175660ea52650bfb65a3d68b34a7926475e",
+    "publishConfig": {
+        "access": "public"
+    }
+}

package/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    plugins: {
+        'postcss-import': {},
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};

package/scss/demo.scss

@@ -0,0 +1,142 @@
+html, body, #root {
+    height: 100%;
+    width: 100%;
+}
+
+@media (prefers-color-scheme: dark) {
+    .slate-editor {
+        color: white;
+    }
+}
+
+.editor-demo-wrapper {
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    width: 100%;
+    flex-direction: column;
+
+    .editor-demo-output {
+        width: 100%;
+    }
+
+    .editor-demo {
+        display: block;
+        flex: 1;
+        height: 100%;
+        width: 100%;
+        position: relative;
+
+        .editor-demo-editor {
+            display: flex;
+            height: 100%;
+            position: relative;
+            width: 100%;
+            padding-top: 40px;
+
+            &.container {
+                display: flex;
+                flex: 1;
+                justify-content: center;
+                min-width: 100%;
+                min-height: 100%;
+                position: relative;
+
+                &.block-editor-wrapper {
+                    flex-grow: 1;
+                    //max-width: 703px;
+                    //width: 703px; // contentful editor default width
+                }
+            }
+
+            &.value {
+                textarea {
+                    max-height: 50px;
+                }
+            }
+        }
+    }
+}
+
+.test-block {
+    background-color: #fefefe;
+    border: 1px solid black;
+    color: black;
+    padding: 5px;
+}
+
+.block-editor-content {
+    font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
+    line-height: 1em;
+}
+
+.block-editor-content p {
+    margin-bottom: 20px;
+}
+
+.block-editor-content h1 {
+    font-size: 2em;
+}
+
+.block-editor-content h2 {
+    font-size: 1.5em;
+}
+
+.block-editor-content h3 {
+    font-size: 1.3em;
+}
+
+.block-editor-content h4 {
+    font-size: 1.1em;
+}
+
+.block-editor-content h5,
+.block-editor-content h6 {
+    font-size: 1em;
+}
+
+.block-editor-content ul, .block-editor-content ol {
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    padding-inline-start: 40px;
+}
+
+.block-editor-content ul {
+    list-style-type: disc;
+}
+
+.block-editor-content ol {
+    list-style-type: decimal;
+}
+
+.block-editor-content blockquote {
+    display: block;
+    background-color: grey;
+    padding: 1em;
+}
+
+.block-editor-content a,
+.block-editor-content a:visited {
+    color: blue;
+    cursor: pointer;
+}
+
+
+.block-editor-content a:hover {
+    text-decoration: underline;
+}
+
+.editor-mt-16  {
+    @apply pt-16 block;
+}
+.editor-mr-16  {
+    @apply md:pr-16 block;
+}
+.editor-mb-16  {
+    @apply pb-16 block;
+}
+.editor-ml-16  {
+    @apply md:pl-16 block;
+}

package/scss/editor.scss

@@ -0,0 +1,394 @@
+.block-editor-wrapper {
+
+  position: relative;
+  display: flex;
+  height: 100%;
+  max-height: 100%;
+  max-width: 100%;
+  width: 100%;
+
+  &.storybook-active {
+    .slate-editor {
+      display: none;
+      overflow: hidden;
+    }
+  }
+
+  .storybook-target {
+    display: block;
+    height: 100%;
+    left: 0px;
+    position: fixed;
+    top: 0px;
+    width: 100%;
+    z-index: 1000;
+
+    &:empty {
+      display: none;
+    }
+
+    .storybook-frame {
+      height: 100%;
+      width: 100%;
+
+      iframe {
+        height: 100%;
+        width: 100%;
+      }
+    }
+  }
+
+  .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%;
+
+    span[data-slate-node="text"] {
+      /* eslint-disable-next-line */
+      font-family: "Font TWO BR", sans-serif;
+    }
+
+    p[data-slate-node="element"] {
+      padding-bottom: 20px;
+      position: relative;
+      //outline: #CECECE dashed;
+
+      &:after {
+        font-size: 1em;
+        content: "P";
+        color: #CECECE;
+        position: absolute;
+        left: -20px;
+        text-transform: uppercase;
+        top: 1px;
+        user-select: none;
+      }
+    }
+
+    h1[data-slate-node="element"] {
+      font-size: 2em;
+      position: relative;
+
+      &:after {
+        content: "h1";
+        color: #CECECE;
+        position: absolute;
+        left: -26px;
+        text-transform: uppercase;
+        top: 1px;
+        user-select: none;
+      }
+    }
+
+    h2[data-slate-node="element"] {
+      font-size: 1.5em;
+      position: relative;
+
+      &:after {
+        content: "h2";
+        color: #CECECE;
+        position: absolute;
+        left: -26px;
+        text-transform: uppercase;
+        top: 1px;
+        user-select: none;
+      }
+    }
+
+    h3[data-slate-node="element"] {
+      font-size: 1.3em;
+      position: relative;
+
+      &:after {
+        content: "h3";
+        color: #CECECE;
+        position: absolute;
+        left: -26px;
+        text-transform: uppercase;
+        top: 1px;
+        user-select: none;
+      }
+    }
+
+    h4[data-slate-node="element"] {
+      font-size: 1.1em;
+      position: relative;
+
+      &:after {
+        content: "h4";
+        color: #CECECE;
+        position: absolute;
+        left: -26px;
+        text-transform: uppercase;
+        top: 1px;
+        user-select: none;
+      }
+    }
+
+    h5[data-slate-node="element"] {
+      font-size: 1em;
+      position: relative;
+
+      &:after {
+        content: "h5";
+        color: #CECECE;
+        position: absolute;
+        left: -26px;
+        text-transform: uppercase;
+        top: 1px;
+        user-select: none;
+      }
+    }
+
+    h6[data-slate-node="element"] {
+      font-size: 1em;
+      position: relative;
+
+      &:after {
+        content: "h6";
+        color: #CECECE;
+        position: absolute;
+        left: -26px;
+        text-transform: uppercase;
+        top: 1px;
+        user-select: none;
+      }
+    }
+
+    ul[data-slate-node="element"] {
+      list-style: circle;
+    }
+
+    ol[data-slate-node="element"] {
+      list-style: decimal;
+    }
+
+    a[data-slate-node="element"] {
+      color: rgb(var(--color-secondary));
+      text-decoration: underline;
+    }
+
+    div[data-slate-editor="true"] {
+      height: 100%;
+    }
+
+    .align-left {
+      text-align: left;
+    }
+
+    .align-right {
+      text-align: right;
+    }
+
+    .align-center {
+      text-align: center;
+    }
+
+    .align-justify {
+      text-align: justify;
+    }
+
+    .block-align-left {
+      display: inline-block;
+      float: left;
+      margin-right: 15px;
+    }
+
+    .block-align-undefined {
+      display: inline-block;
+    }
+
+    .block-align-right {
+      display: inline-block;
+      float: right;
+      margin-left: 15px;
+    }
+  }
+
+  .options-wrapper {
+    position: relative;
+
+    &:hover {
+      .options-container {
+        display: flex;
+      }
+    }
+
+    .options-container {
+      display: none;
+      flex-direction: row;
+      justify-content: center;
+      left: 0px;
+      position: absolute;
+      top: 0px;
+      z-index: 200;
+      background-color: grey;
+      padding: 4px 4px 4px 4px;
+
+      .options-container-option {
+        cursor: pointer;
+        width: 26px;
+
+        > svg {
+          width: 100%;
+        }
+
+        &.options-container-option-expand-text {
+          width: 100px
+        }
+
+        &.options-container-option-delete {
+          color: red;
+        }
+      }
+
+      &.options-container-right {
+        left: -26px;
+      }
+    }
+  }
+
+  .layout-slot-option-padding {
+
+    position: relative;
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+
+    .layout-slot-option-padding-item {
+      background-color: black;
+      display: block;
+      position: absolute;
+      cursor: pointer;
+
+      &:hover {
+        background-color: white;
+        z-index: 10
+      }
+
+      &.active {
+        background-color: lightgray;
+        z-index: 10
+      }
+    }
+
+    .layout-slot-option-padding-top {
+      height: 5px;
+      width: 20px;
+      top: 0;
+      left: 0;
+    }
+
+    .layout-slot-option-padding-right {
+      height: 20px;
+      width: 5px;
+      right: 0;
+      top: 0;
+    }
+
+    .layout-slot-option-padding-bottom {
+      height: 5px;
+      width: 20px;
+      bottom: 0;
+      left: 0;
+    }
+
+    .layout-slot-option-padding-left {
+      height: 20px;
+      width: 5px;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  .layout-block {
+    display: flex;
+    flex-direction: row;
+
+    &.article-width {
+      width: 44.44444444435556%;
+    }
+
+    &.site-width {
+      width: 66.66666666666667%;
+    }
+
+    .layout-slot {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      outline: 1px dashed grey;
+
+      .layout-slot-options {
+        background-color: grey;
+        color: white;
+        font-size: 24px;
+        padding: 10px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+
+        .layout-slot-option {
+          text-transform: uppercase;
+          display: inline-block;
+        }
+
+        .layout-slot-name {
+          text-transform: uppercase;
+          display: inline-block;
+        }
+
+      }
+
+      .layout-slot-content {
+      }
+
+      &.layout-slot-widecol {
+        flex-grow: 1;
+      }
+
+      &.layout-slot-maincol {
+        flex-grow: 1;
+      }
+
+      &.layout-slot-sidecol {
+        flex-grow: 0;
+        width: 30%;
+      }
+
+      &.layout-slot-grid-half {
+        flex-grow: 0;
+        width: 50%;
+      }
+
+      &.layout-slot-grid-3 {
+        flex-grow: 0;
+        width: 100%;
+      }
+
+      &.layout-slot-grid-2 {
+        flex-grow: 0;
+        width: 66.6666666666%;
+      }
+
+      &.layout-slot-grid-1 {
+        flex-grow: 0;
+        width: 33.3333333333%;
+      }
+
+      &.layout-slot-grid-fill {
+        flex-grow: 1;
+      }
+
+      &.layout-slot-grid-auto {
+        flex-grow: 0;
+        width: auto;
+      }
+    }
+  }
+}

package/scss/storybook.scss

@@ -0,0 +1,66 @@
+.storybook-element {
+  display: inline;
+
+  &.storybook-element-float-left {
+    float: left;
+  }
+
+  &.storybook-element-float-right {
+    float: right;
+  }
+
+  .storybook-element-component {
+    user-select: none;
+    display: block;
+
+    &.storybook-inline {
+      display: inline-block;
+    }
+
+    .editor-empty-element {
+      background-color: red;
+      border: 1px solid black;
+      min-height: 20px;
+      min-width: 100px;
+    }
+
+    .storybook-element-display {
+      &:empty {
+        display: block;
+        background-color: red;
+        border: 1px solid black;
+        min-height: 30px;
+        min-width: 100px;
+      }
+
+      &.storybook-element-display-empty {
+        display: block;
+        background-color: red;
+        border: 1px solid black;
+        color: white;
+        font-weight: bold;
+        font-size: 110%;
+        padding: 10px;
+        min-height: 30px;
+        min-width: 100px;
+        position: relative;
+
+        &::after {
+          position: absolute;
+          top: 0px;
+          left: 0px;
+          content: attr(data-content);
+        }
+      }
+    }
+  }
+
+  .storybook-element-error {
+    background-color: red;
+    padding: 15px;
+    font-size: 18px;
+    font-weight: bold;
+    min-height: 100px;
+    min-width: 100px;
+  }
+}