Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat!: change export path #8

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat!: change export path #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3a6b97b
feat!: change export path
martyanovandrey Sep 21, 2023
76ae48b
feat: configure tabs
martyanovandrey Sep 22, 2023
1628538
fix: style borders
martyanovandrey Sep 22, 2023
e8e598a
fix: delete style constant
martyanovandrey Sep 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion scripts/bundle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const external = [

await esbuild.build({
...configs.ts({
entryPoints: ['src/app.tsx'],
entryPoints: ['src/index.tsx'],
outfile: path.join(outdir, 'index.js'),
}),
target: 'es2020',
Expand Down
5 changes: 3 additions & 2 deletions scripts/dev.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,16 @@ const {generateHTML} = require('../src/index.html.js');

const html = generateHTML({
env: 'development',
csspath: path.join('/', 'index.css'),
jspath: 'pages.js',
csspath: 'pages.css',
});

await writeFile(path.join(outdir, 'index.html'), html);

let ctx;

ctx = await esbuild.context(configs.ts({
entryPoints: ['src/index.tsx'],
entryPoints: ['src/pages.tsx'],
outdir,
}));

Expand Down
2 changes: 1 addition & 1 deletion scripts/pages.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const {generateHTML} = require('../src/index.html.js');
await writeFile(path.join(outdir, 'index.html'), html);

await esbuild.build(configs.ts({
entryPoints: ['src/index.tsx'],
entryPoints: ['src/pages.tsx'],
outfile: path.join(outdir, 'index.js'),
}));
})();
118 changes: 0 additions & 118 deletions src/app.tsx
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion src/callout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {Card, Text, Row, Col} from '@gravity-ui/uikit';
import {Card, Row, Col} from '@gravity-ui/uikit';

function CallOut() {
return (<Row space={4}>
Expand Down
126 changes: 114 additions & 12 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,118 @@
import {createRoot} from 'react-dom/client';
import {ThemeProvider} from '@gravity-ui/uikit';
import {useCallback, useState, useEffect} from 'react';
import {Container, Row, Col} from '@gravity-ui/uikit';

import {App} from './app';
import {CallOut} from './callout';
import {InputArea} from './input-area';
import {OutputArea} from './output-area';

import './index.css';
import '@doc-tools/transform/dist/js/yfm.js';
import {useTabs} from './useTabs';
import {generateMD, generateHTML, generateTokens} from './generators';
import persistRestore from './persistRestore';

const container = document.getElementById('app');
const root = createRoot(container as HTMLElement);
import './styles.css';

root.render(
<ThemeProvider theme="light">
<App />
</ThemeProvider>
);
(window as any).MonacoEnvironment = {
getWorker: (_, label: string) => {
if (label === 'json') {
return new Worker(
new URL('monaco-editor/esm/vs/language/json/json.worker?worker', 'monaco-worker'),
);
}
return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker?worker', 'monaco-worker'));
},
};

const App = () => {
return(<>
<Container>
<CallOut />
<Playground persistRestore={true} />
</Container>
</>)
};

export type PlaygroundProperties = {
content?: string;
tabs?: { id: string, title: string }[];
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we are allowing to choose from predefined tabs(with transformations that goes with them)

each id has transformations tied up to them: md2html(preview), md2html(raw), md2md, etc...

change type to

tabs?: Tabs[]

export type Tabs = {
  id: 'preview' | 'html' | 'markdown' | 'tokens';
  title: string;
}

persistRestore?: boolean;
}

function Playground(props: PlaygroundProperties) {
const persist = useCallback(persistRestore.persist, []);
const restore = useCallback(persistRestore.restore, []);
const content = props?.persistRestore ? restore() : props?.content
const [input, setInput] = useState(content ?? '');
const [generated, setGenerated] = useState(input);

const generate = useCallback((active: string) => {
if (active === 'markdown') {
setGenerated(generateMD(input));
} else if (active === 'html') {
setGenerated(generateHTML(input));
} else if (active === 'tokens') {
setGenerated(generateTokens(input));
} else if (active === 'preview') {
setGenerated(generateHTML(input));
} else {
setGenerated(input);
}
}, [input]);

const [
inputItems,
inputActive,
handleSetInputAreaTabActive
] = useTabs({
items: [ { id: 'input', title: 'input' } ],
initial: 'input',
});

const [
outputItems,
outputActive,
handleSetOutputAreaTabActive
] = useTabs({
items: props?.tabs || [
{ id: 'preview', title: 'html preview' },
{ id: 'html', title: 'html' },
{ id: 'markdown', title: 'markdown' },
{ id: 'tokens', title: 'tokens' },
],
initial: 'preview',
onSetActive: generate,
});

const handleInputChange = (input?: string) => {
setInput(input || '');
};

useEffect(() => {
generate(outputActive);

if (props?.persistRestore) {
persist(input);
}
}, [input]);

return (
<Row space={6} className="diplodoc-playground">
<Col s="12"/>
<InputArea
handleSelectTab={handleSetInputAreaTabActive}
handleInputChange={handleInputChange}
input={input}
tabActive={inputActive}
tabItems={inputItems}
/>
<OutputArea
handleSelectTab={handleSetOutputAreaTabActive}
tabItems={outputItems}
tabActive={outputActive}
output={generated}
/>
</Row>
);
}

export {App, Playground};
export default {App, Playground};
2 changes: 1 addition & 1 deletion src/input-area.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ function InputArea(props: InputAreaProps) {
</Col>
<Col s="12"/>
<Col s="12">
<Card size="m" className="area__card area-card__editor">
<Card size="m" view={'clear'} className="area-card__editor">
<Editor height={height} defaultLanguage="markdown" defaultValue={input} onChange={handleInputChange} options={editorOptions} onMount={handleOnMount} />
</Card>
</Col>
Expand Down
4 changes: 2 additions & 2 deletions src/output-area.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ function OutputArea(props: OutputAreaProps) {
<Col s="12" />
<Col s="12">
{tabActive === 'preview'
? <Card size="m" className="yfm area__yfm">
<div dangerouslySetInnerHTML={{__html: output}} className="area__card"></div>
? <Card size="m" className="yfm area__yfm" view={'clear'}>
<div dangerouslySetInnerHTML={{__html: output}}/>
</Card>
: <TextArea
onUpdate={handleInputChange}
Expand Down
16 changes: 16 additions & 0 deletions src/pages.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import {createRoot} from 'react-dom/client';
import {ThemeProvider} from '@gravity-ui/uikit';

import {App} from './index';

import './index.css';
import '@doc-tools/transform/dist/js/yfm.js';

const container = document.getElementById('app');
const root = createRoot(container as HTMLElement);

root.render(
<ThemeProvider theme="light">
<App />
</ThemeProvider>
);
4 changes: 1 addition & 3 deletions src/persistRestore.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import {useCallback} from 'react';

function persist(input: string) {
try {
const current = new URL(location.toString());
current.searchParams.set('input', encodeURI(input) ?? '');

history.pushState(null, null, current);
history.pushState(null, '', current);
} catch (err) {
console.error(err);
}
Expand Down
14 changes: 7 additions & 7 deletions src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
padding: var(--g-text-body-1-font-size);
}

.area__card > section {
.area-card__editor > section {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

since you are nuking borders from html preview, can you also remove borders from other tabs.

now layout "jumping" because of that

height: var(--diplodoc-playground-height) !important;
min-height: var(--diplodoc-playground-height) !important;
max-height: var(--diplodoc-playground-height) !important;
Expand All @@ -50,9 +50,9 @@
}

.g-text-area__control {
height: calc(var(--diplodoc-playground-height) + 26px) !important;
min-height: calc(var(--diplodoc-playground-height) + 26px) !important;
max-height: calc(var(--diplodoc-playground-height) + 26px) !important;
height: var(--diplodoc-playground-height) !important;
min-height: var(--diplodoc-playground-height) !important;
max-height: var(--diplodoc-playground-height) !important;

overflow-y: scroll;
overflow-x: hidden;
Expand All @@ -66,9 +66,9 @@
.area__yfm {
border-radius: 2px !important;

height: calc(var(--diplodoc-playground-height) + 26px);
min-height: calc(var(--diplodoc-playground-height) + 26px);
max-height: calc(var(--diplodoc-playground-height) + 26px);
height: var(--diplodoc-playground-height) !important;
min-height: var(--diplodoc-playground-height) !important;
max-height: var(--diplodoc-playground-height) !important;

overflow-y: scroll;
overflow-x: hidden;
Expand Down