Update: Make it possible to use the editor in other editors

Configuration/Settings.yaml

@@ -5,6 +5,8 @@ Neos:
         javascript:
           Carbon.RangeEditor:Plugin:
             resource: resource://Carbon.RangeEditor/Public/Plugin.js
+            attributes:
+              type: 'module'
         stylesheets:
           Carbon.RangeEditor:Plugin:
             resource: resource://Carbon.RangeEditor/Public/Plugin.css

Resources/Private/RangeEditor/manifest.js

@@ -1,11 +1,18 @@
 import manifest from "@neos-project/neos-ui-extensibility";
+import React, { Suspense, lazy } from "react";
 
-import Editor from "./index.jsx";
+const LazyEditor = lazy(() => import("./RangeEditor"));
+
+const component = (props) => (
+    <Suspense fallback="">
+        <LazyEditor {...props} />
+    </Suspense>
+);
 
 manifest("Carbon.RangeEditor:Editor", {}, (globalRegistry) => {
     const editorsRegistry = globalRegistry.get("inspector").get("editors");
 
     editorsRegistry.set("Carbon.RangeEditor/Editor", {
-        component: Editor,
+        component,
     });
 });

Resources/Public/Plugin.css

@@ -1,29 +1,29 @@
-:root, .range-fw8xo9{--range-g2ve3s:var(--colors-PrimaryBlue);--range-1ndee7u:var(--colors-ContrastNeutral);--range-z0ukz9:var(--colors-ContrastBright);--range-1xyut5p:var(--colors-ContrastBrightest);--range-13vtvis:var(--colors-ContrastDarkest);--range-gr1rf3:var(--colors-Warn);}
-:root, .range-67urvy{--range-z5f5sf:var(--transition-Default);--range-j71u7i:cubic-bezier(0.4, 0, 0.2, 1);}
-.range-13jlg89{--color:var(--range-g2ve3s)}
-.range-36r50j{--color:var(--range-z0ukz9)}
+:root, .range-39wzrw{--range-17fcymb:var(--transition-Default);--range-1qkce6e:cubic-bezier(0.4, 0, 0.2, 1);}
+:root, .range-1ow9cle{--range-1yfsa84:var(--colors-PrimaryBlue);--range-11ai139:var(--colors-ContrastNeutral);--range-3rq551:var(--colors-ContrastBright);--range-112jqwz:var(--colors-ContrastBrightest);--range-5uow9g:var(--colors-ContrastDarkest);--range-1aufrmy:var(--colors-Warn);}
+.range-jcvozh{--color:var(--range-1yfsa84)}
+.range-orarm7{--color:var(--range-3rq551)}
 .range-1xmiaan{--opacity:.7}
 .range-npukh0:focus{--opacity:1}
 .range-11g6tue:not(#\#){background:none}
 .range-1md70p1:not(#\#){background:transparent}
-.range-140bi14:not(#\#){background:var(--range-1ndee7u)}
+.range-10msy31:not(#\#){background:var(--range-11ai139)}
 .range-1wty727:not(#\#){border:0}
 .range-1ghz6dp:not(#\#){margin:0}
 .range-29crso:not(#\#){padding:0 var(--spacing-Half)}
 .range-1717udv:not(#\#){padding:0}
-.range-uq02hg:focus-within:not(#\#){background:var(--range-1xyut5p)}
+.range-1rhx0j6:focus-within:not(#\#){background:var(--range-112jqwz)}
 .range-1cum3z5:not(#\#):not(#\#){border-radius:2px}
 .range-6gsi71:not(#\#):not(#\#){gap:.25em}
 .range-12mrbbr:not(#\#):not(#\#){gap:1px}
 .range-1a2a7pz:not(#\#):not(#\#){outline:none}
-.range-sofr38:focus:not(#\#):not(#\#){outline:2px solid var(--range-g2ve3s)}
+.range-1x5k38z:focus:not(#\#):not(#\#){outline:2px solid var(--range-1yfsa84)}
 .range-1uvtmcs:focus:not(#\#):not(#\#){outline:none}
 .range-6s0dn4:not(#\#):not(#\#):not(#\#){align-items:center}
 .range-jyslct:not(#\#):not(#\#):not(#\#){appearance:none}
-.range-5mwlyb:not(#\#):not(#\#):not(#\#){box-shadow:0 0 0 2px var(--range-gr1rf3)}
+.range-d2bjx:not(#\#):not(#\#):not(#\#){box-shadow:0 0 0 2px var(--range-1aufrmy)}
 .range-1afcbsf:not(#\#):not(#\#):not(#\#){box-sizing:content-box}
 .range-1heor9g:not(#\#):not(#\#):not(#\#){color:inherit}
-.range-ftaoss:not(#\#):not(#\#):not(#\#){color:var(--range-1xyut5p)}
+.range-yhbhln:not(#\#):not(#\#):not(#\#){color:var(--range-112jqwz)}
 .range-1h6gzvc:not(#\#):not(#\#):not(#\#){cursor:not-allowed}
 .range-1ypdohk:not(#\#):not(#\#):not(#\#){cursor:pointer}
 .range-1ed109x:not(#\#):not(#\#):not(#\#){cursor:text}
@@ -35,7 +35,7 @@
 .range-190dgpg:not(#\#):not(#\#):not(#\#){opacity:.65}
 .range-1hr2gdg:not(#\#):not(#\#):not(#\#){text-align:right}
 .range-87ps6o:not(#\#):not(#\#):not(#\#){user-select:none}
-.range-1md4nzd:focus-within:not(#\#):not(#\#):not(#\#){color:var(--range-13vtvis)}
+.range-xeqyu3:focus-within:not(#\#):not(#\#):not(#\#){color:var(--range-5uow9g)}
 .range-vszx66:where(*)>*:not(#\#):not(#\#):not(#\#){pointer-events:none}
 .range-1cm8ssg:focus:not(#\#):not(#\#):not(#\#){outline-offset:2px}
 .range-lrawln:not(#\#):not(#\#):not(#\#):not(#\#){height:25px}
@@ -57,12 +57,12 @@ html[dir='rtl'] .range-66xn83:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#
 .range-vs8oyn:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-moz-range-thumb{cursor:pointer}
 .range-avsfv4:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-slider-thumb{opacity:var(--opacity)}
 .range-hyizb5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-moz-range-thumb{opacity:var(--opacity)}
-.range-10ysmi6:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-slider-thumb{transition-duration:var(--range-z5f5sf)}
-.range-96lbvo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-moz-range-thumb{transition-duration:var(--range-z5f5sf)}
+.range-14qvetc:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-slider-thumb{transition-duration:var(--range-17fcymb)}
+.range-10p4uoo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-moz-range-thumb{transition-duration:var(--range-17fcymb)}
 .range-5rbd5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-slider-thumb{transition-property:transform,opacity}
 .range-bffa19:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-moz-range-thumb{transition-property:transform,opacity}
-.range-1att8qm:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-slider-thumb{transition-timing-function:var(--range-j71u7i)}
-.range-e42of:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-moz-range-thumb{transition-timing-function:var(--range-j71u7i)}
+.range-nq99s9:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-slider-thumb{transition-timing-function:var(--range-1qkce6e)}
+.range-1a7ebab:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-moz-range-thumb{transition-timing-function:var(--range-1qkce6e)}
 .range-5e1a76:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-slider-thumb:hover{opacity:1}
 .range-l3xga7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-moz-range-thumb:hover{opacity:1}
 .range-1tk0e90:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-slider-thumb:active{cursor:grabbing}