1.11.2 release

karamem0 · May 20, 2024 · 82055bc · 82055bc
1 parent 0c315cb
commit 82055bc
Show file tree

Hide file tree

Showing 8 changed files with 191 additions and 69 deletions.
diff --git a/.github/workflows/workflow.yml b/.github/workflows/workflow.yml
@@ -5,7 +5,7 @@ on:
       - develop
 
 env:
-  BUILD_VERSION: '1.11.1'
+  BUILD_VERSION: '1.11.2'
 
 jobs:
   select-environment:

diff --git a/src/features/main/components/ContentMarkdown.presenter.tsx b/src/features/main/components/ContentMarkdown.presenter.tsx
@@ -21,7 +21,8 @@ import {
   ScrollPosition
 } from '../../../types/Model';
 import MarkdownEditor from '../../markdown/components/MarkdownEditor';
-import MarkdownSplitBar from '../../markdown/components/MarkdownSplitBar';
+import MarkdownSplitter from '../../markdown/components/MarkdownSplitter';
+import MarkdownToolbar from '../../markdown/components/MarkdownToolbar';
 import MarkdownViewer from '../../markdown/components/MarkdownViewer';
 
 interface ContentMarkdownProps {
@@ -54,7 +55,6 @@ function ContentMarkdown(props: Readonly<ContentMarkdownProps>) {
     position,
     preview,
     scroll,
-    tabOpen,
     text,
     wordWrap,
     onCursorPositionChange,
@@ -72,51 +72,62 @@ function ContentMarkdown(props: Readonly<ContentMarkdownProps>) {
       enabled={scroll}
       render={
         (state) => (
-          <React.Fragment>
-            <div
+          <div
+            css={css`
+              display: grid;
+              grid-template-columns: auto auto auto;
+              grid-template-rows: 2.5rem 1fr;
+              @media all and (width <= 960px) {
+                height: ${layouts.contentBody.height.small};
+              }
+              @media not all and (width <= 960px) {
+                height: ${layouts.contentBody.height.large};
+              }
+            `}>
+            <MarkdownToolbar
               css={css`
-                position: fixed;
-                @media all and (width <= 960px) {
-                  width: calc(${layouts.contentBody.width.small} / ${preview ? 2 : 1} - 1rem);
-                  height: ${layouts.contentBody.height.small};
-                }
-                @media not all and (width <= 960px) {
-                  width: calc(${tabOpen ? layouts.contentBody.width.large : layouts.contentBody.width.small} / ${preview ? 2 : 1} - 1rem);
-                  height: ${layouts.contentBody.height.large};
-                }
-              `}>
-              <MarkdownEditor
-                cursorPosition={defaultCursorPosition}
-                cursorSelection={defaultCursorSelection}
-                minimap={minimap}
-                scrollPosition={state.element1Position}
-                text={defaultText}
-                wordWrap={wordWrap}
-                onCursorPositionChange={onCursorPositionChange}
-                onCursorSelectionChange={onCursorSelectionChange}
-                onMouseEnter={state.onElement1MouseEnter}
-                onMouseLeave={state.onElement1MouseLeave}
-                onResize={state.onElement1Resize}
-                onSave={onSave}
-                onTextChange={onTextChange}
-                onScrollPositonChange={(e, data) => {
-                  state.onElement1ScrollChange?.(e, data);
-                  onScrollPositonChange?.(e, data);
-                }} />
-            </div>
-            <MarkdownSplitBar />
+                grid-column: 1 / 4;
+                grid-row: 1 / 2;
+              `} />
+            <MarkdownEditor
+              cursorPosition={defaultCursorPosition}
+              cursorSelection={defaultCursorSelection}
+              minimap={minimap}
+              scrollPosition={state.element1Position}
+              text={defaultText}
+              wordWrap={wordWrap}
+              css={css`
+                grid-column: 1 / 2;
+                grid-row: 2 / 3;
+              `}
+              onCursorPositionChange={onCursorPositionChange}
+              onCursorSelectionChange={onCursorSelectionChange}
+              onMouseEnter={state.onElement1MouseEnter}
+              onMouseLeave={state.onElement1MouseLeave}
+              onResize={state.onElement1Resize}
+              onSave={onSave}
+              onTextChange={onTextChange}
+              onScrollPositonChange={(e, data) => {
+                state.onElement1ScrollChange?.(e, data);
+                onScrollPositonChange?.(e, data);
+              }} />
+            <MarkdownSplitter
+              css={css`
+                grid-column: 2 / 3;
+                grid-row: 2 / 3;
+              `} />
             <ScrollPanel
               position={state.element2Position}
               css={css`
+                grid-column: 3 / 4;
+                grid-row: 2 / 3;
                 display: ${preview ? 'block' : 'none'};
                 padding: 0 0 0 0.5rem;
                 @media (width < 960px) {
-                  margin: 0 0 0 calc((${layouts.contentBody.width.small}) / 2);
                   border: ${theme.colorNeutralStencil1Alpha} 1px solid;
                 }
                 @media (width >= 960px) {
                   padding: 0 0 0 0.5rem;
-                  margin: 0 0 0 calc(${tabOpen ? layouts.contentBody.width.large : layouts.contentBody.width.small} / 2);
                 }
               `}
               render={
@@ -132,7 +143,7 @@ function ContentMarkdown(props: Readonly<ContentMarkdownProps>) {
               onMouseLeave={state.onElement2MouseLeave}
               onResize={state.onElement2Resize}
               onScrollPositonChange={state.onElement2ScrollChange} />
-          </React.Fragment>
+          </div>
         )
       } />
   ) : (

diff --git a/src/features/markdown/components/MarkdownEditor.presenter.tsx b/src/features/markdown/components/MarkdownEditor.presenter.tsx
@@ -11,28 +11,44 @@ import React from 'react';
 import { css } from '@emotion/react';
 
 import { useTheme } from '../../../providers/ThemeProvider';
+import { layouts } from '../../../themes/Layout';
 
 interface MarkdownEditorProps {
-  className?: string
+  className?: string,
+  preview?: boolean,
+  tabOpen?: boolean
 }
 
 function MarkdownEditor(props: Readonly<MarkdownEditorProps>, ref: React.Ref<HTMLDivElement>) {
 
   const {
-    className
+    className,
+    preview,
+    tabOpen
   } = props;
 
   const { theme } = useTheme();
 
   return (
     <div
-      ref={ref}
-      className={className}
       css={css`
+        height: 100%;
+        @media all and (width <= 960px) {
+          width: calc(${layouts.contentBody.width.small} / ${preview ? 2 : 1} - 1rem);
+        }
+        @media not all and (width <= 960px) {
+          width: calc(${tabOpen ? layouts.contentBody.width.large : layouts.contentBody.width.small} / ${preview ? 2 : 1} - 1rem);
+        }
+      `}>
+      <div
+        ref={ref}
+        className={className}
+        css={css`
         width: inherit;
         height: inherit;
         border: 0.05rem solid ${theme.colorNeutralStrokeAlpha};
       `} />
+    </div>
   );
 
 }

diff --git a/src/features/markdown/components/MarkdownEditor.tsx b/src/features/markdown/components/MarkdownEditor.tsx
@@ -26,6 +26,7 @@ import {
 import Presenter from './MarkdownEditor.presenter';
 
 interface MarkdownEditorProps {
+  className?: string,
   cursorPosition?: CursorPosition,
   cursorSelection?: CursorSelection,
   minimap?: boolean,
@@ -45,6 +46,7 @@ interface MarkdownEditorProps {
 function MarkdownEditor(props: Readonly<MarkdownEditorProps>) {
 
   const {
+    className,
     cursorPosition,
     cursorSelection,
     minimap,
@@ -63,6 +65,7 @@ function MarkdownEditor(props: Readonly<MarkdownEditorProps>) {
 
   const {
     state: {
+      contentProps,
       tabProps
     }
   } = useStore();
@@ -348,7 +351,11 @@ function MarkdownEditor(props: Readonly<MarkdownEditorProps>) {
   useEvent('resize', handleResize, window);
 
   return (
-    <Presenter ref={editorRef} />
+    <Presenter
+      ref={editorRef}
+      className={className}
+      preview={contentProps?.preview}
+      tabOpen={tabProps?.open} />
   );
 
 }

diff --git a/...components/MarkdownSplitBar.presenter.tsx → ...components/MarkdownSplitter.presenter.tsx b/...components/MarkdownSplitBar.presenter.tsx → ...components/MarkdownSplitter.presenter.tsx
@@ -16,41 +16,32 @@ import { useTheme } from '../../../providers/ThemeProvider';
 import { layouts } from '../../../themes/Layout';
 import { EventHandler } from '../../../types/Event';
 
-interface SplitBarProps {
+interface MarkdownSplitterProps {
+  className?: string,
   preview?: boolean,
-  tabOpen?: boolean,
   onChangePreview?: EventHandler<boolean>
 }
 
-function MarkdownSplitBar(props: Readonly<SplitBarProps>) {
+function MarkdownSplitter(props: Readonly<MarkdownSplitterProps>) {
 
   const {
+    className,
     preview,
-    tabOpen,
     onChangePreview
   } = props;
 
   const { theme } = useTheme();
 
   return preview ? (
-    <div
-      role="button"
+    <button
+      className={className}
       tabIndex={-1}
       css={css`
-        position: fixed;
         display: grid;
         place-items: center center;
         width: 1rem;
         text-align: center;
         background-color: ${theme.colorNeutralBackground2};
-        @media all and (width <= 960px) {
-          right: calc(${layouts.contentBody.width.small} / 2 + 1rem);
-          height: ${layouts.contentBody.height.small};
-        }
-        @media not all and (width <= 960px) {
-          right: calc(${tabOpen ? layouts.contentBody.width.large : layouts.contentBody.width.small} / 2 + 1rem);
-          height: ${layouts.contentBody.height.large};
-        }
       `}
       onClick={(e) => onChangePreview?.(e, !preview)}>
       {
@@ -60,10 +51,10 @@ function MarkdownSplitBar(props: Readonly<SplitBarProps>) {
             line-height: 0.5rem;
           `} />
       }
-    </div>
+    </button>
   ) : (
-    <div
-      role="button"
+    <button
+      className={className}
       tabIndex={-1}
       css={css`
         position: fixed;
@@ -88,9 +79,9 @@ function MarkdownSplitBar(props: Readonly<SplitBarProps>) {
             line-height: 0.5rem;
           `} />
       }
-    </div>
+    </button>
   );
 
 }
 
-export default React.memo(MarkdownSplitBar);
+export default React.memo(MarkdownSplitter);
diff --git a/.../markdown/components/MarkdownSplitBar.tsx → .../markdown/components/MarkdownSplitter.tsx b/.../markdown/components/MarkdownSplitBar.tsx → .../markdown/components/MarkdownSplitter.tsx
@@ -12,15 +12,20 @@ import { useStore } from '../../../providers/StoreProvider';
 import { setContentPreview } from '../../../stores/Action';
 import { Event } from '../../../types/Event';
 
-import Presenter from './MarkdownSplitBar.presenter';
+import Presenter from './MarkdownSplitter.presenter';
 
-function MarkdownSplitBar() {
+interface MarkdownSplitterProps {
+  className?: string
+}
+
+function MarkdownSplitter(props: Readonly<MarkdownSplitterProps>) {
+
+  const { className } = props;
 
   const {
     dispatch,
     state: {
-      contentProps,
-      tabProps
+      contentProps
     }
   } = useStore();
 
@@ -32,11 +37,11 @@ function MarkdownSplitBar() {
 
   return (
     <Presenter
+      className={className}
       preview={contentProps?.preview}
-      tabOpen={tabProps?.open}
       onChangePreview={handleChangePreview} />
   );
 
 }
 
-export default MarkdownSplitBar;
+export default MarkdownSplitter;
diff --git a/src/features/markdown/components/MarkdownToolbar.presenter.tsx b/src/features/markdown/components/MarkdownToolbar.presenter.tsx
@@ -0,0 +1,65 @@
+//
+// Copyright (c) 2023-2024 karamem0
+//
+// This software is released under the MIT License.
+//
+// https://github.com/karamem0/hitofude/blob/main/LICENSE
+//
+
+import React from 'react';
+
+import { Toolbar, ToolbarButton } from '@fluentui/react-components';
+import {
+  BoldIcon,
+  ItalicIcon,
+  UnderlineIcon
+} from '@fluentui/react-icons-mdl2';
+
+import { css } from '@emotion/react';
+
+interface MarkdownToolbarProps {
+  className?: string
+}
+
+function MarkdownToolbar(props: Readonly<MarkdownToolbarProps>) {
+
+  const { className } = props;
+
+  return (
+    <div
+      className={className}
+      css={css`
+        height: 2.5rem;
+      `}>
+      <Toolbar>
+        <ToolbarButton
+          icon={(
+            <BoldIcon
+              css={css`
+                font-size: 1rem;
+                line-height: 1rem;
+              `} />
+          )} />
+        <ToolbarButton
+          icon={(
+            <ItalicIcon
+              css={css`
+                font-size: 1rem;
+                line-height: 1rem;
+              `} />
+          )} />
+        <ToolbarButton
+          icon={(
+            <UnderlineIcon
+              css={css`
+                font-size: 1rem;
+                line-height: 1rem;
+              `} />
+          )} />
+      </Toolbar>
+    </div>
+  );
+
+}
+
+export default MarkdownToolbar;