@dxos/plugin-github 0.6.8-main.046e6cf

package/src/components/EmbeddedMain/EmbeddedMain.tsx

@@ -0,0 +1,296 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import './embedded.css';
+
+import {
+  ArrowSquareOut,
+  CaretDown,
+  DotsThreeVertical,
+  Eye,
+  Option,
+  PencilSimpleLine,
+  UserPlus,
+} from '@phosphor-icons/react';
+import React, { useCallback, useContext, useRef, useState } from 'react';
+
+import { Surface, useIntent } from '@dxos/app-framework';
+import { SPACE_PLUGIN, SpaceAction, getSpaceDisplayName } from '@dxos/plugin-space';
+import { useClient } from '@dxos/react-client';
+import { getMeta } from '@dxos/react-client/echo';
+import {
+  Avatar,
+  Button,
+  ButtonGroup,
+  DensityProvider,
+  Dialog,
+  DropdownMenu,
+  Main,
+  Toggle,
+  Tooltip,
+  toLocalizedString,
+  useTranslation,
+} from '@dxos/react-ui';
+import { defaultTx, descriptionText, getSize, mx } from '@dxos/react-ui-theme';
+import { hexToFallback } from '@dxos/util';
+
+import { GfmPreview } from './GfmPreview';
+import { useDocGhId } from '../../hooks';
+import { GITHUB_PLUGIN } from '../../meta';
+import type { EditorViewState } from '../../types';
+import {
+  DocumentResolverProvider,
+  DocumentResolverContext,
+  ResolverDialog,
+  SpaceResolverProvider,
+  SpaceResolverContext,
+} from '../GithubEchoResolverProviders';
+
+const overlayAttrs = { side: 'top' as const, sideOffset: 4 };
+
+const EmbeddedLayoutImpl = () => {
+  const { t } = useTranslation(GITHUB_PLUGIN);
+  const { space, source, id, identityHex } = useContext(SpaceResolverContext);
+  const { document } = useContext(DocumentResolverContext);
+  const { dispatch } = useIntent();
+  const client = useClient();
+
+  const handleCloseEmbed = useCallback(() => {
+    window.parent.postMessage({ type: 'close-embed' }, 'https://github.com');
+  }, []);
+
+  const handleSaveAndCloseEmbed = useCallback(() => {
+    document &&
+      window.parent.postMessage({ type: 'save-data', content: document.content?.content }, 'https://github.com');
+  }, [document]);
+
+  const handleCreateSpace = () => dispatch({ action: SpaceAction.CREATE });
+  const handleJoinSpace = () => dispatch({ action: SpaceAction.JOIN });
+
+  const handleInvite = useCallback(() => {
+    if (client && space) {
+      void client.shell.shareSpace({ spaceKey: space.key });
+    }
+  }, [client, space]);
+
+  const [editorViewState, setEditorViewState] = useState<EditorViewState>('editor');
+  const isPreviewing = editorViewState === 'preview';
+
+  const suppressNextTooltip = useRef<boolean>(false);
+  const [optionsTooltipOpen, setOptionsTooltipOpen] = useState(false);
+  const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
+
+  const [renameDialogOpen, setRenameDialogOpen] = useState(false);
+  const [resolverDialogOpen, setResolverDialogOpen] = useState(false);
+
+  const spaceFallbackValue = hexToFallback(space?.key.toHex() ?? '0');
+
+  const docGhId = useDocGhId((document ? getMeta(document)?.keys : []) ?? []);
+  const name = space && getSpaceDisplayName(space);
+
+  return (
+    <>
+      <style type='text/css'>{`
+        :root {
+          --surface-bg: #F6F8FA;
+        }
+        .dark:root {
+          --surface-bg: #161b22;
+        }
+      `}</style>
+      <DensityProvider density='fine'>
+        <div role='none' className='fixed inline-end-2 block-end-2 z-10 flex gap-2'>
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Button disabled={!space} onClick={handleInvite}>
+                <span className='sr-only'>{t('create invitation label', { ns: 'appkit' })}</span>
+                <UserPlus className={getSize(5)} />
+              </Button>
+            </Tooltip.Trigger>
+            <Tooltip.Content {...overlayAttrs}>
+              {t('create invitation label', { ns: 'appkit' })}
+              <Tooltip.Arrow />
+            </Tooltip.Content>
+          </Tooltip.Root>
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Toggle
+                disabled={!(space && document)}
+                pressed={isPreviewing}
+                onPressedChange={(nextPressed) => setEditorViewState(nextPressed ? 'preview' : 'editor')}
+              >
+                <span className='sr-only'>{t(isPreviewing ? 'exit gfm preview label' : 'preview gfm label')}</span>
+                {isPreviewing ? <PencilSimpleLine className={getSize(5)} /> : <Eye className={getSize(5)} />}
+              </Toggle>
+            </Tooltip.Trigger>
+            <Tooltip.Content {...overlayAttrs}>
+              {t(isPreviewing ? 'exit gfm preview label' : 'preview gfm label')}
+              <Tooltip.Arrow />
+            </Tooltip.Content>
+          </Tooltip.Root>
+          <Tooltip.Root
+            open={optionsTooltipOpen}
+            onOpenChange={(nextOpen) => {
+              if (suppressNextTooltip.current) {
+                setOptionsTooltipOpen(false);
+                suppressNextTooltip.current = false;
+              } else {
+                setOptionsTooltipOpen(nextOpen);
+              }
+            }}
+          >
+            <DropdownMenu.Root
+              {...{
+                modal: false,
+                open: optionsMenuOpen,
+                onOpenChange: (nextOpen: boolean) => {
+                  if (!nextOpen) {
+                    suppressNextTooltip.current = true;
+                  }
+                  return setOptionsMenuOpen(nextOpen);
+                },
+              }}
+            >
+              <Tooltip.Trigger asChild>
+                <DropdownMenu.Trigger asChild disabled={!(space && document)}>
+                  <Button>
+                    <DotsThreeVertical className={getSize(5)} />
+                    <span className='sr-only'>{t('embedded options label')}</span>
+                  </Button>
+                </DropdownMenu.Trigger>
+              </Tooltip.Trigger>
+              <DropdownMenu.Content {...overlayAttrs}>
+                <DropdownMenu.Viewport>
+                  <DropdownMenu.Item asChild>
+                    <a
+                      target='_blank'
+                      rel='noreferrer'
+                      href={
+                        space && document
+                          ? `${location.origin}/dxos/space/${space?.key.toHex() ?? 'never'}/${document.id}`
+                          : '#'
+                      }
+                    >
+                      <ArrowSquareOut className={mx('shrink-0', getSize(5))} />
+                      <span className='grow'>{t('open in composer label', { ns: GITHUB_PLUGIN })}</span>
+                    </a>
+                  </DropdownMenu.Item>
+                  <DropdownMenu.Separator />
+                  <DropdownMenu.GroupLabel>
+                    {t('active space label', { ns: SPACE_PLUGIN })}
+                    <Avatar.Root size={5} variant='circle'>
+                      <div role='none' className='flex gap-1 mlb-1 items-center'>
+                        <Avatar.Frame>
+                          <Avatar.Fallback text={spaceFallbackValue.emoji} />
+                        </Avatar.Frame>
+                        <Avatar.Label classNames='text-sm text-[--surface-text]'>
+                          {name && toLocalizedString(name, t)}
+                        </Avatar.Label>
+                      </div>
+                    </Avatar.Root>
+                  </DropdownMenu.GroupLabel>
+                  <DropdownMenu.Item onClick={() => setRenameDialogOpen(true)}>
+                    <span className='grow'>{t('rename space label', { ns: SPACE_PLUGIN })}</span>
+                    <PencilSimpleLine className={mx('shrink-0', getSize(5))} />
+                  </DropdownMenu.Item>
+                  <DropdownMenu.Item onClick={() => setResolverDialogOpen(true)}>
+                    <span className='grow'>{t('unset repo space label')}</span>
+                    <Option className={mx('shrink-0', getSize(5))} />
+                  </DropdownMenu.Item>
+                </DropdownMenu.Viewport>
+                <DropdownMenu.Arrow />
+              </DropdownMenu.Content>
+              <Tooltip.Content {...overlayAttrs}>
+                {t('embedded options label')}
+                <Tooltip.Arrow />
+              </Tooltip.Content>
+            </DropdownMenu.Root>
+          </Tooltip.Root>
+          <ButtonGroup classNames={[!(space && document) && 'shadow-none']}>
+            <Button disabled={!(space && document)} onClick={handleSaveAndCloseEmbed}>
+              {t('save and close label')}
+            </Button>
+            <DropdownMenu.Root>
+              <DropdownMenu.Trigger asChild disabled={!(space && document)}>
+                <Button>
+                  <CaretDown />
+                </Button>
+              </DropdownMenu.Trigger>
+              <DropdownMenu.Portal>
+                <DropdownMenu.Content {...overlayAttrs}>
+                  <DropdownMenu.Viewport>
+                    <DropdownMenu.Item onClick={handleSaveAndCloseEmbed} classNames='block'>
+                      <p>{t('save and close label')}</p>
+                      <p className={descriptionText}>{t('save and close description')}</p>
+                    </DropdownMenu.Item>
+                    <DropdownMenu.Item onClick={handleCloseEmbed} classNames='block'>
+                      <p>{t('close label', { ns: 'appkit' })}</p>
+                      <p className={descriptionText}>{t('close embed description')}</p>
+                    </DropdownMenu.Item>
+                  </DropdownMenu.Viewport>
+                  <DropdownMenu.Arrow />
+                </DropdownMenu.Content>
+              </DropdownMenu.Portal>
+            </DropdownMenu.Root>
+          </ButtonGroup>
+        </div>
+        {space && document ? (
+          editorViewState === 'preview' ? (
+            <Main.Content classNames='min-bs-[100dvh] flex flex-col p-0.5'>
+              <GfmPreview
+                markdown={document.content?.toString() ?? ''}
+                {...(docGhId && { owner: docGhId.owner, repo: docGhId.repo })}
+              />
+            </Main.Content>
+          ) : (
+            // TODO(burdon): This will break since model is not defined.
+            <Surface role='main' data={{ properties: document, view: 'embedded' }} />
+          )
+        ) : source && id && identityHex ? (
+          <Dialog.Root open onOpenChange={() => true}>
+            <div role='none' className={defaultTx('dialog.overlay', 'dialog--resolver__overlay', {}, 'static bs-full')}>
+              <div
+                role='none'
+                className={defaultTx(
+                  'dialog.content',
+                  'dialog--resolver__content',
+                  {},
+                  'p-2 bs-72 flex flex-col shadow-none bg-transparent',
+                )}
+              >
+                <ResolverDialog handleCreateSpace={handleCreateSpace} handleJoinSpace={handleJoinSpace} />
+              </div>
+            </div>
+          </Dialog.Root>
+        ) : null}
+        {space && (
+          <Dialog.Root open={renameDialogOpen} onOpenChange={setRenameDialogOpen}>
+            <Dialog.Overlay classNames='backdrop-blur'>
+              <Dialog.Content>
+                <Surface role='dialog' data={{ content: 'dxos.org/plugin/space/RenameSpaceDialog', subject: space }} />
+              </Dialog.Content>
+            </Dialog.Overlay>
+          </Dialog.Root>
+        )}
+        <Dialog.Root open={resolverDialogOpen} onOpenChange={setResolverDialogOpen}>
+          <Dialog.Overlay classNames='backdrop-blur'>
+            <Dialog.Content>
+              <ResolverDialog handleCreateSpace={handleCreateSpace} handleJoinSpace={handleJoinSpace} />
+            </Dialog.Content>
+          </Dialog.Overlay>
+        </Dialog.Root>
+      </DensityProvider>
+    </>
+  );
+};
+
+export const EmbeddedMain = () => {
+  return (
+    <SpaceResolverProvider>
+      <DocumentResolverProvider>
+        <EmbeddedLayoutImpl />
+      </DocumentResolverProvider>
+    </SpaceResolverProvider>
+  );
+};

package/src/components/EmbeddedMain/GfmPreview.tsx

@@ -0,0 +1,110 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import 'github-markdown-css/github-markdown.css';
+import DOMPurify from 'dompurify';
+import React, { useEffect, useState } from 'react';
+
+import { useTranslation } from '@dxos/react-ui';
+
+import { GITHUB_PLUGIN } from '../../meta';
+import { GitHubSettings, useOctokitContext } from '../GithubApiProviders';
+import { Loading } from '../Loading';
+
+const defaultOptions: Parameters<typeof DOMPurify.sanitize>[1] = {
+  ALLOWED_TAGS: [
+    'span',
+    'div',
+    'b',
+    'i',
+    'em',
+    'strong',
+    'a',
+    'p',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'table',
+    'td',
+    'th',
+    'tr',
+    'blockquote',
+    'ul',
+    'ol',
+    'li',
+    'dd',
+    'tt',
+    'dl',
+    'dt',
+    'details',
+    'figcaption',
+    'figure',
+    'summary',
+    'abbr',
+    'dfn',
+    'mark',
+    'sub',
+    'sup',
+    'img',
+    'code',
+    'kbd',
+    'pre',
+    'samp',
+    'hr',
+    'input',
+    'pre',
+    'del',
+    'g-emoji',
+    'label',
+  ],
+  ALLOWED_ATTR: ['class', 'href', 'target', 'hidden', 'title', 'type', 'role', 'align', 'data-footnote-ref'],
+};
+
+const sanitize = (dirty: string, options: Partial<Parameters<typeof DOMPurify.sanitize>[1]>) => ({
+  __html: DOMPurify.sanitize(dirty, { ...defaultOptions, ...options }) as string,
+});
+
+export type GfmPreviewProps = {
+  markdown: string;
+  owner?: string;
+  repo?: string;
+};
+
+export const GfmPreview = ({ markdown, owner, repo }: GfmPreviewProps) => {
+  const [html, setHtml] = useState('');
+  const { octokit } = useOctokitContext();
+  const { t } = useTranslation(GITHUB_PLUGIN);
+
+  useEffect(() => {
+    if (octokit && markdown) {
+      void octokit
+        .request('POST /markdown', {
+          text: markdown,
+          ...(owner && repo && { context: `${owner}/${repo}` }),
+        })
+        .then(
+          ({ data }) => setHtml(data),
+          () => {},
+        );
+    }
+  }, [markdown, octokit]);
+
+  return html ? (
+    <>
+      <style>{'.markdown-body ol, .markdown-body ul {list-style-type: disc; list-style-position: outside;}'}</style>
+      <article
+        className='markdown-body grow is-full max-is-[980px] mli-auto p-[15px] sm:pli-[45px] sm:plb-[30px]'
+        dangerouslySetInnerHTML={sanitize(html, {})}
+      />
+    </>
+  ) : (
+    <div role='none' className='mli-auto max-is-md pli-2 text-center'>
+      {!octokit && <p className='mlb-4 text-lg font-medium'>{t('empty github pat message')}</p>}
+      {octokit ? <Loading label={t('loading preview message')} /> : <GitHubSettings />}
+    </div>
+  );
+};

package/src/components/EmbeddedMain/embedded.css

@@ -0,0 +1,3 @@
+html, body, #root {
+  height: 100%;
+}

package/src/components/EmbeddedMain/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './EmbeddedMain';

package/src/components/ExportDialog.tsx

@@ -0,0 +1,157 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useCallback, useState } from 'react';
+
+import { log } from '@dxos/log';
+import { Button, Dialog, Input, Trans, useTranslation } from '@dxos/react-ui';
+
+import { useOctokitContext } from './GithubApiProviders';
+import { GITHUB_PLUGIN } from '../meta';
+import type { ExportViewState, GhFileIdentifier, GhIdentifier } from '../types';
+
+export const ExportDialog = ({
+  type,
+  target,
+  docGhId,
+}: {
+  type: ExportViewState;
+  target: string | null;
+  docGhId: GhIdentifier;
+}) => {
+  // TODO(burdon): Model removed.
+  const content = '';
+
+  const { octokit } = useOctokitContext();
+  const { t } = useTranslation(GITHUB_PLUGIN);
+  const [exportViewState, setExportViewState] = useState<ExportViewState>(type);
+  const [ghResponseUrl, setGhResponseUrl] = useState<string | null>(target);
+  const [ghBranchValue, setGhBranchValue] = useState('');
+  const [ghMessageValue, setGhMessageValue] = useState('');
+
+  const exportGhFileContent = useCallback(async () => {
+    if (octokit && docGhId && 'path' in docGhId && content) {
+      const branchName = ghBranchValue || t('github branch name placeholder');
+      const commitMessage = ghMessageValue || t('github commit message placeholder');
+      setExportViewState('pending');
+      try {
+        const { owner, repo, path, ref } = docGhId as GhFileIdentifier;
+        const { data: fileData } = await octokit.rest.repos.getContent({ owner, repo, path });
+        if (Array.isArray(fileData) || fileData.type !== 'file') {
+          log.error('Attempted to export to a destination in Github that is not a file.');
+          return;
+        }
+        const { sha: fileSha } = fileData;
+        const {
+          data: {
+            object: { sha: baseSha },
+          },
+        } = await octokit.rest.git.getRef({ owner, repo, ref: `heads/${ref}` });
+        await octokit.rest.git.createRef({
+          owner,
+          repo,
+          ref: `refs/heads/${branchName}`,
+          sha: baseSha,
+        });
+        await octokit.rest.repos.createOrUpdateFileContents({
+          owner,
+          repo,
+          path,
+          message: commitMessage,
+          branch: branchName,
+          sha: fileSha,
+          content: btoa(content),
+        });
+        const {
+          data: { html_url: prUrl },
+        } = await octokit.rest.pulls.create({
+          owner,
+          repo,
+          head: branchName,
+          base: ref,
+          title: commitMessage,
+        });
+        setGhResponseUrl(prUrl);
+        setExportViewState('response');
+      } catch (err) {
+        log.error('Failed to export to Github file', err);
+        setExportViewState('create-pr');
+        setGhResponseUrl(null);
+      }
+    } else {
+      log.error('Not prepared to export to Github file when requested.');
+      setGhResponseUrl(null);
+    }
+  }, [octokit, docGhId, content, ghBranchValue, ghMessageValue, t]);
+
+  return (
+    <Dialog.Content>
+      <Dialog.Title>{t('confirm export title')}</Dialog.Title>
+      {exportViewState === 'response' ? (
+        <>
+          <p>
+            <Trans
+              {...{
+                t,
+                i18nKey: 'export to github success message',
+                values: { linkText: ghResponseUrl },
+                components: {
+                  resultStyle: <span className='text-success-600 dark:text-success-300'>_</span>,
+                  prLink: (
+                    <a
+                      href={ghResponseUrl!}
+                      target='_blank'
+                      rel='noreferrer'
+                      className='text-primary-600 dark:text-primary-300 hover:text-primary-700 dark:hover:text-primary-400'
+                    >
+                      _
+                    </a>
+                  ),
+                },
+              }}
+            />
+          </p>
+          <div role='none' className='flex justify-end'>
+            <Dialog.Close asChild>
+              <Button variant='primary' onClick={() => setExportViewState(null)}>
+                {t('done label', { ns: 'os' })}
+              </Button>
+            </Dialog.Close>
+          </div>
+        </>
+      ) : (
+        <div role='none' className='mbs-2 space-b-2'>
+          <Input.Root>
+            <Input.Label>{t('github branch name label')}</Input.Label>
+            <Input.TextInput
+              autoFocus
+              classNames='font-mono'
+              disabled={exportViewState === 'pending'}
+              placeholder={t('github branch name placeholder')}
+              value={ghBranchValue}
+              onChange={({ target: { value } }) => setGhBranchValue(value)}
+            />
+          </Input.Root>
+          <Input.Root>
+            <Input.Label>{t('github commit message label')}</Input.Label>
+            <Input.TextArea
+              disabled={exportViewState === 'pending'}
+              placeholder={t('github commit message placeholder')}
+              value={ghMessageValue}
+              onChange={({ target: { value } }) => setGhMessageValue(value)}
+            />
+          </Input.Root>
+          <div role='none' className='flex justify-end gap-2'>
+            <Dialog.Close asChild>
+              <Button onClick={() => setExportViewState(null)}>{t('close label', { ns: 'os' })}</Button>
+            </Dialog.Close>
+            <Button disabled={exportViewState === 'pending'} variant='primary' onClick={() => exportGhFileContent()}>
+              {t('continue label', { ns: 'os' })}
+            </Button>
+          </div>
+        </div>
+      )}
+    </Dialog.Content>
+  );
+};

package/src/components/GithubApiProviders/GitHubSettings.tsx

@@ -0,0 +1,72 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { ArrowSquareOut } from '@phosphor-icons/react';
+import React, { type PropsWithChildren, useEffect, useState } from 'react';
+
+import { SettingsValue } from '@dxos/plugin-settings';
+import { Link, Input, Trans, useTranslation, useId } from '@dxos/react-ui';
+import { getSize, mx } from '@dxos/react-ui-theme';
+
+import { useOctokitContext } from './OctokitProvider';
+import { GITHUB_PLUGIN } from '../../meta';
+
+// TODO(burdon): Factor out with PluginList.
+const ExternalLink = ({ children }: PropsWithChildren<{}>) => {
+  const { t } = useTranslation(GITHUB_PLUGIN);
+  const descriptionId = useId('link--external');
+  return (
+    <>
+      <Link href={t('github pat description href')} target='_blank' rel='noreferrer' aria-describedby={descriptionId}>
+        {children}
+        <ArrowSquareOut weight='bold' className={mx(getSize(3), 'inline-block leading-none -mbs-0.5 mli-px')} />
+      </Link>
+      <span className='sr-only' id={descriptionId}>
+        {t('target blank description', { ns: GITHUB_PLUGIN })}
+      </span>
+    </>
+  );
+};
+
+// TODO(burdon): Pass in settings.
+export const GitHubSettings = () => {
+  const { t } = useTranslation(GITHUB_PLUGIN);
+  const { pat, setPat } = useOctokitContext();
+  const [patValue, setPatValue] = useState(pat);
+
+  useEffect(() => {
+    setPatValue(pat);
+  }, [pat]);
+
+  useEffect(() => {
+    void setPat(patValue);
+  }, [patValue]);
+
+  return (
+    <>
+      <SettingsValue
+        label={t('github pat label')}
+        description={
+          <Trans
+            {...{
+              t,
+              i18nKey: 'github pat description',
+              components: {
+                docsLink: <ExternalLink />,
+              },
+            }}
+          />
+        }
+      >
+        <Input.TextInput
+          autoFocus
+          spellCheck={false}
+          classNames='font-mono mlb-1'
+          value={patValue ?? ''}
+          onChange={({ target: { value } }) => setPatValue(value)}
+        />
+      </SettingsValue>
+    </>
+  );
+};