feat(json-crdt-peritext-ui): 🎸 create editor wrapper element

Author: streamich

src/json-crdt-peritext-ui/web/constants.ts

@@ -7,6 +7,7 @@ export enum ElementAttr {
 }
 
 export enum CssClass {
+  Editor = 'jsonjoy-peritext-editor',
   Editable = 'jsonjoy-peritext-editable',
   Inline = 'jsonjoy-peritext-inline',
 }

src/json-crdt-peritext-ui/web/react/PeritextView.tsx

@@ -72,8 +72,10 @@ export const PeritextView: React.FC<PeritextViewProps> = React.memo((props) => {
   // Return the final result.
   return (
     <context.Provider value={state}>
-      <PeritextViewInner div={ref} state={state} />
-      <div ref={el => state.portalEl = el || void 0} style={{height: 0}}></div>
+      <div className={CssClass.Editor}>
+        <PeritextViewInner div={ref} state={state} />
+        <div ref={el => state.portalEl = el || void 0} style={{height: 0}}></div>
+      </div>
     </context.Provider>
   );
 });