diff --git a/demo/src/index.js b/demo/src/index.js
index a3e5270..011e3c1 100644
--- a/demo/src/index.js
+++ b/demo/src/index.js
@@ -103,164 +103,164 @@ const Demo = () => {
   };
 
   return (
-    <React.StrictMode>
-      <ConfigProvider
-        direction={lang ? "rtl" : "ltr"}
-        locale={lang}
-        componentSize="large"
-      >
-        <div className="editorShell" style={{ direction: locale.direction }}>
+    <div style={{ position: "relative", minHeight: "100vh" }}>
+      <React.StrictMode>
+        <ConfigProvider
+          direction={lang ? "rtl" : "ltr"}
+          locale={lang}
+          componentSize="large"
+        >
           <Editor
             configuration={configuration}
             value={value}
             onChange={(val) => console.log("OnChange: ", val)}
             onSave={onSave}
           />
-        </div>
-        <FloatButton icon={<Icons.Setting />} onClick={showDrawer} />
-        <Drawer
-          title="Settings"
-          icon={<Icons.Setting />}
-          placement="right"
-          onClose={onClose}
-          open={open}
-        >
-          <Space direction="vertical">
-            <Switch
-              checkedChildren="Rich Text"
-              unCheckedChildren="Plain Text"
-              defaultChecked={configuration.richText}
-              onChange={(checked) =>
-                setConfiguration((e) => ({ ...e, richText: checked }))
-              }
-            />
-            <Select
-              defaultValue={lang}
-              onChange={(value) => setConfiguration(changeLanguage)}
-              options={[
-                {
-                  value: "en",
-                  label: "English",
-                },
-                {
-                  value: "ur",
-                  label: "Urdu",
-                },
-              ]}
-            />
-            <Divider />
-            <Select
-              defaultValue={configuration.format}
-              onChange={(value) =>
-                setConfiguration((e) => ({ ...e, format: value }))
-              }
-              options={[
-                {
-                  value: "raw",
-                  label: "Raw",
-                },
-                {
-                  value: "markdown",
-                  label: "Markdown",
-                },
-              ]}
-            />
-            <Divider />
-            <Switch
-              checkedChildren="Show Alignment"
-              unCheckedChildren="Hide Alignment"
-              defaultChecked={configuration.toolbar.showAlignment}
-              onChange={(checked) =>
-                setConfiguration((e) => ({
-                  ...e,
-                  toolbar: { ...e.toolbar, showAlignment: checked },
-                }))
-              }
-            />
-            <Switch
-              checkedChildren="Show Undo/Redo"
-              unCheckedChildren="Hide Undo/Redo"
-              defaultChecked={configuration.toolbar.showUndoRedo}
-              onChange={(checked) =>
-                setConfiguration((e) => ({
-                  ...e,
-                  toolbar: { ...e.toolbar, showUndoRedo: checked },
-                }))
-              }
-            />
-            <Switch
-              checkedChildren="Show Block Format"
-              unCheckedChildren="Hide Block Format"
-              defaultChecked={configuration.toolbar.showBlockFormat}
-              onChange={(checked) =>
-                setConfiguration((e) => ({
-                  ...e,
-                  toolbar: { ...e.toolbar, showBlockFormat: checked },
-                }))
-              }
-            />
-            <Switch
-              checkedChildren="Show Insert"
-              unCheckedChildren="Hide Insert"
-              defaultChecked={configuration.toolbar.showInsert}
-              onChange={(checked) =>
-                setConfiguration((e) => ({
-                  ...e,
-                  toolbar: { ...e.toolbar, showInsert: checked },
-                }))
-              }
-            />
-            <Switch
-              checkedChildren="Show Font Format"
-              unCheckedChildren="Hide Font Format"
-              defaultChecked={configuration.toolbar.showFontFormat}
-              onChange={(checked) =>
-                setConfiguration((e) => ({
-                  ...e,
-                  toolbar: { ...e.toolbar, showFontFormat: checked },
-                }))
-              }
-            />
-            <Switch
-              checkedChildren="Show extra formatting options"
-              unCheckedChildren="Hide extra formatting options"
-              defaultChecked={configuration.toolbar.showExtraFormat}
-              onChange={(checked) =>
-                setConfiguration((e) => ({
-                  ...e,
-                  toolbar: { ...e.toolbar, showExtraFormat: checked },
-                }))
-              }
-            />
-            <Switch
-              checkedChildren="Show link options"
-              unCheckedChildren="Hide link options"
-              defaultChecked={configuration.toolbar.showInsertLink}
-              onChange={(checked) =>
-                setConfiguration((e) => ({
-                  ...e,
-                  toolbar: { ...e.toolbar, showInsertLink: checked },
-                }))
-              }
-            />
-            <Divider />
-            <Switch
-              checkedChildren="Spell Check"
-              unCheckedChildren="No Spell Check"
-              defaultChecked={configuration.spellchecker.enabled}
-              onChange={(checked) =>
-                setConfiguration((e) => ({
-                  ...e,
-                  spellchecker: { ...e.spellchecker, enabled: checked },
-                }))
-              }
-            />
-            <Divider />
-            <Button onClick={setEditorValue}>Change Value</Button>
-          </Space>
-        </Drawer>
-      </ConfigProvider>
-    </React.StrictMode>
+          <FloatButton icon={<Icons.Setting />} onClick={showDrawer} />
+          <Drawer
+            title="Settings"
+            icon={<Icons.Setting />}
+            placement="right"
+            onClose={onClose}
+            open={open}
+          >
+            <Space direction="vertical">
+              <Switch
+                checkedChildren="Rich Text"
+                unCheckedChildren="Plain Text"
+                defaultChecked={configuration.richText}
+                onChange={(checked) =>
+                  setConfiguration((e) => ({ ...e, richText: checked }))
+                }
+              />
+              <Select
+                defaultValue={lang}
+                onChange={(value) => setConfiguration(changeLanguage)}
+                options={[
+                  {
+                    value: "en",
+                    label: "English",
+                  },
+                  {
+                    value: "ur",
+                    label: "Urdu",
+                  },
+                ]}
+              />
+              <Divider />
+              <Select
+                defaultValue={configuration.format}
+                onChange={(value) =>
+                  setConfiguration((e) => ({ ...e, format: value }))
+                }
+                options={[
+                  {
+                    value: "raw",
+                    label: "Raw",
+                  },
+                  {
+                    value: "markdown",
+                    label: "Markdown",
+                  },
+                ]}
+              />
+              <Divider />
+              <Switch
+                checkedChildren="Show Alignment"
+                unCheckedChildren="Hide Alignment"
+                defaultChecked={configuration.toolbar.showAlignment}
+                onChange={(checked) =>
+                  setConfiguration((e) => ({
+                    ...e,
+                    toolbar: { ...e.toolbar, showAlignment: checked },
+                  }))
+                }
+              />
+              <Switch
+                checkedChildren="Show Undo/Redo"
+                unCheckedChildren="Hide Undo/Redo"
+                defaultChecked={configuration.toolbar.showUndoRedo}
+                onChange={(checked) =>
+                  setConfiguration((e) => ({
+                    ...e,
+                    toolbar: { ...e.toolbar, showUndoRedo: checked },
+                  }))
+                }
+              />
+              <Switch
+                checkedChildren="Show Block Format"
+                unCheckedChildren="Hide Block Format"
+                defaultChecked={configuration.toolbar.showBlockFormat}
+                onChange={(checked) =>
+                  setConfiguration((e) => ({
+                    ...e,
+                    toolbar: { ...e.toolbar, showBlockFormat: checked },
+                  }))
+                }
+              />
+              <Switch
+                checkedChildren="Show Insert"
+                unCheckedChildren="Hide Insert"
+                defaultChecked={configuration.toolbar.showInsert}
+                onChange={(checked) =>
+                  setConfiguration((e) => ({
+                    ...e,
+                    toolbar: { ...e.toolbar, showInsert: checked },
+                  }))
+                }
+              />
+              <Switch
+                checkedChildren="Show Font Format"
+                unCheckedChildren="Hide Font Format"
+                defaultChecked={configuration.toolbar.showFontFormat}
+                onChange={(checked) =>
+                  setConfiguration((e) => ({
+                    ...e,
+                    toolbar: { ...e.toolbar, showFontFormat: checked },
+                  }))
+                }
+              />
+              <Switch
+                checkedChildren="Show extra formatting options"
+                unCheckedChildren="Hide extra formatting options"
+                defaultChecked={configuration.toolbar.showExtraFormat}
+                onChange={(checked) =>
+                  setConfiguration((e) => ({
+                    ...e,
+                    toolbar: { ...e.toolbar, showExtraFormat: checked },
+                  }))
+                }
+              />
+              <Switch
+                checkedChildren="Show link options"
+                unCheckedChildren="Hide link options"
+                defaultChecked={configuration.toolbar.showInsertLink}
+                onChange={(checked) =>
+                  setConfiguration((e) => ({
+                    ...e,
+                    toolbar: { ...e.toolbar, showInsertLink: checked },
+                  }))
+                }
+              />
+              <Divider />
+              <Switch
+                checkedChildren="Spell Check"
+                unCheckedChildren="No Spell Check"
+                defaultChecked={configuration.spellchecker.enabled}
+                onChange={(checked) =>
+                  setConfiguration((e) => ({
+                    ...e,
+                    spellchecker: { ...e.spellchecker, enabled: checked },
+                  }))
+                }
+              />
+              <Divider />
+              <Button onClick={setEditorValue}>Change Value</Button>
+            </Space>
+          </Drawer>
+        </ConfigProvider>
+      </React.StrictMode>
+    </div>
   );
 };
 
diff --git a/src/index.js b/src/index.js
index f387fea..8e44513 100644
--- a/src/index.js
+++ b/src/index.js
@@ -128,25 +128,61 @@ export default ({
   }, [isSmallWidthViewport]);
 
   return (
-    <LexicalComposer initialConfig={initialConfig}>
-      {configuration.richText && (
-        <ToolbarPlugin
-          configuration={configuration}
-          setIsLinkEditMode={setIsLinkEditMode}
-          locale={locale}
-        />
-      )}
-      <div className={"editor-container " + (isRtl ? "rtl" : null)}>
-        {configuration.richText ? (
-          <>
-            <RichTextPlugin
-              contentEditable={
-                <div className="editorScroller">
-                  <div className="editor" ref={onRef}>
-                    <ContentEditable />
+    <div className="editorShell" style={{ direction: locale.direction }}>
+      <LexicalComposer initialConfig={initialConfig}>
+        {configuration.richText && (
+          <ToolbarPlugin
+            configuration={configuration}
+            setIsLinkEditMode={setIsLinkEditMode}
+            locale={locale}
+          />
+        )}
+        <div className={"editor-container " + (isRtl ? "rtl" : null)}>
+          {configuration.richText ? (
+            <>
+              <RichTextPlugin
+                contentEditable={
+                  <div className="editorScroller">
+                    <div className="editor" ref={onRef}>
+                      <ContentEditable />
+                    </div>
                   </div>
-                </div>
-              }
+                }
+                placeholder={
+                  <Placeholder>
+                    {configuration.placeholder ?? locale.resources.placeholder}
+                  </Placeholder>
+                }
+                ErrorBoundary={LexicalErrorBoundary}
+              />
+              <ListPlugin />
+              <CheckListPlugin />
+              <AutoLinkPlugin />
+              <LinkPlugin />
+              <HorizontalRulePlugin />
+              {floatingAnchorElem && !isSmallWidthViewport && (
+                <>
+                  <DraggableBlockPlugin
+                    anchorElem={floatingAnchorElem}
+                    isRtl={isRtl}
+                  />
+                  <FloatingLinkEditorPlugin
+                    anchorElem={floatingAnchorElem}
+                    isLinkEditMode={isLinkEditMode}
+                    setIsLinkEditMode={setIsLinkEditMode}
+                    isRtl={isRtl}
+                  />
+                  <FloatingTextFormatToolbarPlugin
+                    configuration={configuration}
+                    anchorElem={floatingAnchorElem}
+                    isRtl={isRtl}
+                  />
+                </>
+              )}
+            </>
+          ) : (
+            <PlainTextPlugin
+              contentEditable={<ContentEditable />}
               placeholder={
                 <Placeholder>
                   {configuration.placeholder ?? locale.resources.placeholder}
@@ -154,61 +190,27 @@ export default ({
               }
               ErrorBoundary={LexicalErrorBoundary}
             />
-            <ListPlugin />
-            <CheckListPlugin />
-            <AutoLinkPlugin />
-            <LinkPlugin />
-            <HorizontalRulePlugin />
-            {floatingAnchorElem && !isSmallWidthViewport && (
-              <>
-                <DraggableBlockPlugin
-                  anchorElem={floatingAnchorElem}
-                  isRtl={isRtl}
-                />
-                <FloatingLinkEditorPlugin
-                  anchorElem={floatingAnchorElem}
-                  isLinkEditMode={isLinkEditMode}
-                  setIsLinkEditMode={setIsLinkEditMode}
-                  isRtl={isRtl}
-                />
-                <FloatingTextFormatToolbarPlugin
-                  configuration={configuration}
-                  anchorElem={floatingAnchorElem}
-                  isRtl={isRtl}
-                />
-              </>
-            )}
-          </>
-        ) : (
-          <PlainTextPlugin
-            contentEditable={<ContentEditable />}
-            placeholder={
-              <Placeholder>
-                {configuration.placeholder ?? locale.resources.placeholder}
-              </Placeholder>
+          )}
+          <HistoryPlugin />
+          <SavePlugin onSave={onSave} format={configuration.format} />
+          <SpellCheckerPlugin
+            locale={locale}
+            language={
+              configuration.spellchecker.language || configuration.language
             }
-            ErrorBoundary={LexicalErrorBoundary}
+            configuration={configuration.spellchecker}
           />
-        )}
-        <HistoryPlugin />
-        <SavePlugin onSave={onSave} format={configuration.format} />
-        <SpellCheckerPlugin
-          locale={locale}
-          language={
-            configuration.spellchecker.language || configuration.language
-          }
-          configuration={configuration.spellchecker}
-        />
-        <ControlledValuePlugin
-          value={value}
-          onChange={onChange}
-          format={configuration.format}
-          isRichtext={configuration.richText}
-        />
-        {configuration.format == "markdown" && (
-          <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
-        )}
-      </div>
-    </LexicalComposer>
+          <ControlledValuePlugin
+            value={value}
+            onChange={onChange}
+            format={configuration.format}
+            isRichtext={configuration.richText}
+          />
+          {configuration.format == "markdown" && (
+            <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
+          )}
+        </div>
+      </LexicalComposer>
+    </div>
   );
 };
diff --git a/src/styles.css b/src/styles.css
index 67f4b41..1908155 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -49,7 +49,11 @@ code {
   max-width: 1100px;
   min-height: 300px;
   color: #000;
-  position: relative;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
   line-height: 1.7;
   font-weight: 400;
   display: flex;
@@ -59,7 +63,10 @@ code {
 .editorShell .editor-container {
   background: #fff;
   position: relative;
-  display: block;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
 }
@@ -76,6 +83,7 @@ code {
 .editorScroller {
   min-height: 150px;
   border: 0;
+  flex-grow: 1;
   display: flex;
   position: relative;
   outline: 0;