feat: toggle fullscreen (#14)

Author: pd4d10

examples/svelte/src/App.svelte

@@ -102,8 +102,8 @@
     margin: 10px 0;
     text-align: center;
   }
-  :global(.bytemd-body) {
-    height: calc(100vh - 140px);
+  :global(.bytemd) {
+    height: calc(100vh - 100px);
   }
   :global(.medium-zoom-overlay) {
     z-index: 100;

packages/bytemd/src/editor.svelte

@@ -26,6 +26,7 @@
   let textarea: HTMLTextAreaElement;
   let editor: Editor;
   let activeTab = 0;
+  let fullscreen = false;
 
   $: context = { editor, $el: el };
 
@@ -232,14 +233,20 @@
 
 <svelte:options immutable={true} />
 
-<div class={`bytemd bytemd-mode-${mode}`} bind:this={el}>
+<div
+  class={`bytemd bytemd-mode-${mode}${fullscreen ? ' bytemd-fullscreen' : ''}`}
+  bind:this={el}>
   <Toolbar
     {context}
     {mode}
     {activeTab}
     {plugins}
     {toolbar}
-    on:tab={setActiveTab} />
+    {fullscreen}
+    on:tab={setActiveTab}
+    on:fullscreen={() => {
+      fullscreen = !fullscreen;
+    }} />
   <div class="bytemd-body">
     <div
       class="bytemd-editor"

packages/bytemd/src/icons.ts

@@ -23,4 +23,8 @@ export const icons = {
     '<svg width="1em" height="1em" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-opacity=".01" d="M0 0h48v48H0z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M20 24h24-24z" fill="#FFF"/><path d="M20 24h24" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M20 38h24-24z" fill="#FFF"/><path d="M20 38h24" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M20 10h24-24z" fill="#FFF"/><path d="M20 10h24" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path fill="#FFF" stroke="currentColor" stroke-width="4" stroke-linejoin="round" d="M4 34h8v8H4zM4 20h8v8H4zM4 6h8v8H4z"/></svg>',
   info:
     '<svg width="1em" height="1em" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-opacity=".01" d="M0 0h48v48H0z"/><path d="M24 44a19.937 19.937 0 0014.142-5.858A19.937 19.937 0 0044 24a19.938 19.938 0 00-5.858-14.142A19.937 19.937 0 0024 4 19.938 19.938 0 009.858 9.858 19.938 19.938 0 004 24a19.937 19.937 0 005.858 14.142A19.938 19.938 0 0024 44z" fill="#FFF" stroke="currentColor" stroke-width="4" stroke-linejoin="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M24 11a2.5 2.5 0 110 5 2.5 2.5 0 010-5z" fill="currentColor"/><path d="M24.5 34V20h-2M21 34h7" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+  fullscreenOn:
+    '<svg width="1em" height="1em" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-opacity=".01" d="M0 0h48v48H0z"/><path d="M33 6h9v9M42 33v9h-9M15 42H6v-9M6 15V6h9" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+  fullscreenOff:
+    '<svg width="1em" height="1em" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-opacity=".01" d="M0 0h48v48H0z"/><path d="M33 6v9h9M15 6v9H6M15 42v-9H6M33 42v-9h8.9" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>',
 };

packages/bytemd/src/toolbar.svelte

@@ -12,6 +12,7 @@
   export let activeTab: number;
   export let plugins: EditorProps['plugins'];
   export let toolbar: EditorProps['toolbar'];
+  export let fullscreen: boolean;
 
   function normalize(itemMap: NonNullable<BytemdPlugin['toolbar']>) {
     if (toolbar == null) {
@@ -64,4 +65,11 @@
     on:click={() => {
       window.open('https://github.com/bytedance/bytemd');
     }} />
+  <ToolbarButton
+    tooltip="Toggle Fullscreen"
+    icon={fullscreen ? icons.fullscreenOff : icons.fullscreenOn}
+    style="float:right"
+    on:click={() => {
+      dispatch('fullscreen');
+    }} />
 </div>

packages/bytemd/styles/index.scss

@@ -4,6 +4,7 @@
 
 .bytemd {
   border: 1px solid $gray-200;
+  background-color: $white;
   box-sizing: border-box;
   height: 300px;
 }
@@ -79,6 +80,18 @@
   }
 }
 
+.bytemd-fullscreen {
+  &.bytemd {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    border: none;
+    height: 100vh;
+  }
+}
+
 .bytemd-mode-split {
   .bytemd-editor {
     float: left;

scripts/icon.js

@@ -18,6 +18,8 @@ import {
   CheckCorrect,
   InsertTable,
   Pic,
+  FullScreen,
+  OffScreen,
 } from '@icon-park/svg';
 
 const svgo = new Svgo();
@@ -37,6 +39,8 @@ const meta = {
     ol: OrderedList,
     ul: ListCheckbox,
     info: Info,
+    fullscreenOn: FullScreen,
+    fullscreenOff: OffScreen,
   },
   'plugin-gfm': {
     task: CheckCorrect,