Merge branch 'main' of https://github.com/Power-Playground/app into f…

…eat/vim-mode
Power-Playground · Sep 4, 2023 · a1be24b · a1be24b
2 parents ec1f617 + 70c8781
commit a1be24b
Show file tree

Hide file tree

Showing 24 changed files with 756 additions and 300 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -96,6 +96,7 @@ module.exports = {
     }],
     'simple-import-sort/exports': 'error',
     'semi': ['error', 'never'],
+    'quotes': ['error', 'single'],
     'keyword-spacing': ['error', { before: true, after: true }],
     'space-before-blocks': ['error', 'always'],
     'comma-dangle': ['error', 'never'],

diff --git a/core/src/components/EditorZone.tsx b/core/src/components/EditorZone.tsx
@@ -135,10 +135,22 @@ export default function EditorZone(props: EditorZoneProps) {
   useEffect(() => {
     if (!monaco || !editor) return
 
-    const dispose = plugins.map(plugin => plugin?.editor?.load?.(
-      editor as IStandaloneCodeEditor,
-      monaco
-    ))
+    const dispose = plugins
+      .map(plugin => {
+        const loadRT = plugin?.editor?.load?.(
+          editor as IStandaloneCodeEditor,
+          monaco
+        )
+        if (typeof loadRT === 'function') {
+          return loadRT
+        }
+        if (Array.isArray(loadRT)) {
+          return loadRT.reduce(
+            (acc, func) => () => (acc?.(), func?.()),
+            () => void 0
+          )
+        }
+      })
     return () => dispose.forEach(func => func?.())
   }, [monaco, editor, plugins])
 

diff --git a/core/src/components/LeftBar.tsx b/core/src/components/LeftBar.tsx
@@ -19,23 +19,23 @@ export function LeftBar(props: LeftBarProps) {
   return <div className={classnames(prefix, props.className)}
               style={props.style}>
     <div className={`${prefix}__top`}>
-      <button onClick={() => messenger.then(m => m.display('warning', 'Not implemented yet'))}>
+      <button onClick={() => messenger.then(m => m.display('warning', <>Not implemented yet, it will come soon, <a href='https://github.com/Power-Playground/app/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22' target='_blank' rel='noreferrer'>help us</a></>))}>
         <span className='cldr codicon codicon-folder'></span>
         {/* TODO multiple files plugin */}
       </button>
-      <button onClick={() => messenger.then(m => m.display('warning', 'Not implemented yet'))}>
+      <button onClick={() => messenger.then(m => m.display('warning', <>Not implemented yet, it will come soon, <a href='https://github.com/Power-Playground/app/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22' target='_blank' rel='noreferrer'>help us</a></>))}>
         <span className='cldr codicon codicon-heart'></span>
         {/* TODO snippets */}
       </button>
-      <button onClick={() => messenger.then(m => m.display('warning', 'Not implemented yet'))}>
+      <button onClick={() => messenger.then(m => m.display('warning', <>Not implemented yet, it will come soon, <a href='https://github.com/Power-Playground/app/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22' target='_blank' rel='noreferrer'>help us</a></>))}>
         <span className='cldr codicon codicon-source-control'></span>
         {/* TODO code timeline */}
       </button>
-      <button onClick={() => messenger.then(m => m.display('warning', 'Not implemented yet'))}>
+      <button onClick={() => messenger.then(m => m.display('warning', <>Not implemented yet, it will come soon, <a href='https://github.com/Power-Playground/app/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22' target='_blank' rel='noreferrer'>help us</a></>))}>
         <span className='cldr codicon codicon-book'></span>
         {/* TODO examples and documents */}
       </button>
-      <button onClick={() => messenger.then(m => m.display('warning', 'Not implemented yet'))}>
+      <button onClick={() => messenger.then(m => m.display('warning', <>Not implemented yet, it will come soon, <a href='https://github.com/Power-Playground/app/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22' target='_blank' rel='noreferrer'>help us</a></>))}>
         <span className='cldr codicon codicon-extensions'></span>
         {/* TODO extensions marketplace */}
       </button>
@@ -44,10 +44,7 @@ export function LeftBar(props: LeftBarProps) {
       {/* TODO: move to settings */}
       <button onClick={() => toggleVimMode(mode => !mode)}>
         Vim Mode
-      </button>
-      <button onClick={() => messenger.then(m => m.display('warning', 'Not implemented yet'))}>
-        <span className='cldr codicon codicon-account'></span>
-      </button>
+      </button> 
       <button onClick={() => messenger.then(m => m.display('warning', 'Not implemented yet'))}>
         <span className='cldr codicon codicon-account'></span>
       </button>

diff --git a/core/src/components/TopBar.scss b/core/src/components/TopBar.scss
@@ -19,6 +19,7 @@ div.ppd-top-bar {
   button {
     --inner-color: var(--btn-color, var(--primary));
 
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;

diff --git a/core/src/components/base/Popover.scss b/core/src/components/base/Popover.scss
@@ -24,6 +24,7 @@
       width: 0;
       height: 0;
       border: 6px solid transparent;
+      pointer-events: none;
     }
     &[data-position^=top]::before, &[data-position^=bottom]::before {
       left: 50%;

diff --git a/core/src/components/base/Popover.tsx b/core/src/components/base/Popover.tsx
@@ -4,6 +4,7 @@ import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useSta
 import { createPortal } from 'react-dom'
 import type { Placement } from '@popperjs/core'
 import { createPopper } from '@popperjs/core'
+import { useDebouncedValue } from 'foxact/use-debounced-value'
 
 export interface PopoverProps {
   tabIndex?: number
@@ -102,6 +103,7 @@ export const Popover = forwardRef<PopoverRef, PopoverProps>(function Popover(pro
     open: () => changeVisible(true),
     hide: () => changeVisible(false)
   }), [changeVisible])
+  const display = useDebouncedValue(visible, 200)
   return <>
     <div
       ref={setReferenceElement}
@@ -165,13 +167,17 @@ export const Popover = forwardRef<PopoverRef, PopoverProps>(function Popover(pro
       >
       {children}
     </div>
-    {createPortal(<div
+    {(
+      visible ? true : display
+    ) && createPortal(<div
       ref={setPopperElement}
       className={
         `monaco-editor ${prefix}`
         + (props.contentClassName ? ' ' + props.contentClassName : '')
       }
-      data-show={visible}
+      data-show={(
+        !visible ? false : display
+      )}
       onMouseOver={() => {
         if (trigger === 'hover') {
           changeVisible(true)

diff --git a/core/src/plugins/history-for-local/satusbar/HistoryDialog.tsx b/core/src/plugins/history-for-local/satusbar/HistoryDialog.tsx
@@ -123,7 +123,7 @@ export const HistoryDialog = forwardRef<DialogRef, HistoryDialogProps>(function
       }
       if (e.key === 'Backspace') {
         // TODO remove history item
-        messenger.then(m => m.display('warning', 'Not implemented yet'))
+        messenger.then(m => m.display('warning', <>Not implemented yet, it will come soon, <a href='https://github.com/Power-Playground/app/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22' target='_blank' rel='noreferrer'>help us</a></>))
       }
     }}
     handleKeyDownOnOpen={e => {

diff --git a/core/src/plugins/index.tsx b/core/src/plugins/index.tsx
@@ -191,7 +191,7 @@ export type Editor<X extends {
   load?: (
     editorInstance: IStandaloneCodeEditor,
     monaco: typeof MonacoEditor
-  ) => Dispose | void
+  ) => Dispose | void | Dispose[]
 
   topbar?: React.ComponentType<BarItemProps<X['ExtShareState']>>[]
   statusbar?: React.ComponentType<

diff --git a/core/src/plugins/social/index.ts b/core/src/plugins/social/index.ts
@@ -0,0 +1,9 @@
+import { definePlugin } from '@power-playground/core'
+
+import { Share } from './topbar/Share'
+
+export default definePlugin({
+  editor: {
+    topbar: [Share]
+  }
+})
diff --git a/core/src/plugins/social/topbar/Share.tsx b/core/src/plugins/social/topbar/Share.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import type { BarItemProps } from '@power-playground/core'
+import { messenger } from '@power-playground/core'
+
+import { Popover } from '../../../components/base/Popover'
+import { isMacOS } from '../../../utils'
+
+const prefix = 'social__share'
+
+export const Share: React.ComponentType<BarItemProps> = () => {
+  return <Popover
+    style={{ order: -99 }}
+    placement='top'
+    content={<>
+      Share to Social
+      &nbsp;&nbsp;
+      <kbd>{isMacOS ? '⌘' : 'Ctrl'} + SHIFT + S</kbd>
+      <br />
+      <span style={{ color: 'gray' }}>(Change mode by context menu.)</span>
+    </>}
+    offset={[0, 6]}
+    >
+    <button
+      className={prefix}
+      onClick={() => messenger.then(m => m.display('warning', <>
+        Not implemented yet, it will come soon, <a href='https://github.com/Power-Playground/app/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22' target='_blank' rel='noreferrer'>
+          help us
+        </a>
+      </>))}
+    >
+      <span className='cldr codicon codicon-link' style={{ transform: 'rotate(-45deg)' }} />
+    </button>
+  </Popover>
+}
diff --git a/core/src/plugins/typescript/index.scss b/core/src/plugins/typescript/index.scss
@@ -3,16 +3,28 @@
   color: var(--vscode-editorInlayHint-foreground) !important;
   background-color: var(--vscode-editorInlayHint-background);
 }
-div[widgetid^=typescript-test-glyph-margin] {
+div[widgetid^=ppd-plugins-typescript-glyph-margin] {
   position: relative;
   cursor: pointer;
   > .codicon {
+    --ic-color: #888;
+
     display: flex;
     align-items: center;
     justify-content: center;
+    color: var(--ic-color);
+    transition: .1s;
+    &.codicon-run-errors {
+      --ic-color: #ff5370;
+    }
+    &.codicon-run-check, &.codicon-run-check-all {
+      --ic-color: #3ea638;
+    }
     &::before {
-      color: #3ea638;
       height: 18px;
     }
+    &:hover {
+      filter: drop-shadow(0 0 2px var(--ic-color));
+    }
   }
 }