Bump slate to v102

.drone.yml

@@ -5,35 +5,35 @@ name: default
 
 steps:
   - name: setup
-    image: node:16
+    image: node:18
     when:
       event: push
     commands:
       - yarn --frozen-lockfile --ignore-scripts
 
   - name: lint
-    image: node:16
+    image: node:18
     when:
       event: push
     commands:
       - yarn lint
 
   - name: type check
-    image: node:16
+    image: node:18
     when:
       event: push
     commands:
       - yarn ts
 
   - name: test
-    image: node:16
+    image: node:18
     when:
       event: push
     commands:
       - yarn test
 
   - name: build
-    image: node:16
+    image: node:18
     when:
       event: push
     commands:

.github/dependabot.yml

@@ -1,13 +1,8 @@
 version: 2
 updates:
   - package-ecosystem: npm
-    directory: "/"
+    directory: '/'
     schedule:
       interval: daily
-      time: "10:00"
+      time: '10:00'
     open-pull-requests-limit: 10
-    ignore:
-      - dependency-name: slate-history
-        versions:
-          - ">= 0.59.a"
-          - "< 0.60"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webkom/lego-editor",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "description": "A React editor written in TS with slate.js for lego-webapp",
   "type": "module",
   "main": "./dist/lego-editor.umd.cjs",
@@ -52,10 +52,10 @@
     "react-dropzone": "^14.2.2",
     "react-image-crop": "^11.0.5",
     "react-modal": "^3.11.2",
-    "slate": "^0.94.0",
-    "slate-history": "^0.93.0",
-    "slate-hyperscript": "^0.81.3",
-    "slate-react": "^0.94.0"
+    "slate": "^0.102.0",
+    "slate-history": "^0.100.0",
+    "slate-hyperscript": "^0.100.0",
+    "slate-react": "^0.102.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -69,8 +69,8 @@
     "@types/node": "^20.1.0",
     "@types/react": "^18.0.15",
     "@types/react-modal": "^3.10.6",
-    "@typescript-eslint/eslint-plugin": "^5.30.5",
-    "@typescript-eslint/parser": "^5.30.5",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
     "@vitejs/plugin-react": "^4.0.0",
     "c8": "^7.12.0",
     "eslint": "^8.19.0",
@@ -83,7 +83,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "ts-node": "^10.9.1",
-    "typescript": "^5.0.4",
+    "typescript": "^5.4.2",
     "vite": "^4.3.5",
     "vitest": "^0.34.1"
   },

src/Editor.css

@@ -11,15 +11,19 @@
 
 ._legoEditor_root:focus-within {
   border-color: var(--border-gray);
-  box-shadow: var(--shadow-md);
-  transition: box-shadow var(--easing-fast);
+  box-shadow: var(--shadow-sm);
+  transition: box-shadow var(--easing-medium);
   outline: none;
 }
 
 ._legoEditor_disabled {
   border: none;
 }
 
+._legoEditor_textInputField {
+  outline: none;
+}
+
 ._legoEditor_root a {
   cursor: text;
 }

src/index.tsx

@@ -268,7 +268,11 @@ const LegoEditor = (props: Props): JSX.Element => {
           : '_legoEditor_root'
       }
     >
-      <Slate editor={editor} value={value as Descendant[]} onChange={onChange}>
+      <Slate
+        editor={editor}
+        initialValue={value as Descendant[]}
+        onChange={onChange}
+      >
         {!props.disabled && !props.simple && <Toolbar />}
         <Editable
           onKeyDown={onKeyDown}
@@ -279,6 +283,7 @@ const LegoEditor = (props: Props): JSX.Element => {
           autoFocus={props.autoFocus}
           onBlur={onBlur}
           onFocus={onFocus}
+          className="_legoEditor_textInputField"
         />
       </Slate>
     </div>