mirror of
https://github.com/jzillmann/pdf-to-markdown.git
synced 2025-06-21 10:08:03 +02:00
Introduce Result View
This commit is contained in:
parent
b7634423cc
commit
b31ad64fb7
@ -6,6 +6,7 @@ import TopBar from './TopBar.jsx';
|
|||||||
import { View } from '../models/AppState.jsx';
|
import { View } from '../models/AppState.jsx';
|
||||||
import PdfUploadView from './PdfUploadView.jsx';
|
import PdfUploadView from './PdfUploadView.jsx';
|
||||||
import LoadingView from './LoadingView.jsx';
|
import LoadingView from './LoadingView.jsx';
|
||||||
|
import ResultView from './ResultView.jsx';
|
||||||
import DebugView from './DebugView.jsx';
|
import DebugView from './DebugView.jsx';
|
||||||
|
|
||||||
export default class App extends React.Component {
|
export default class App extends React.Component {
|
||||||
@ -26,14 +27,19 @@ export default class App extends React.Component {
|
|||||||
case View.LOADING:
|
case View.LOADING:
|
||||||
mainView = <LoadingView fileBuffer={ appState.fileBuffer } storePdfPagesFunction={ appState.storePdfPages } />
|
mainView = <LoadingView fileBuffer={ appState.fileBuffer } storePdfPagesFunction={ appState.storePdfPages } />
|
||||||
break;
|
break;
|
||||||
|
case View.RESULT:
|
||||||
|
mainView = <ResultView pdfPages={ appState.pdfPages } transformations={ appState.transformations } />
|
||||||
|
break;
|
||||||
case View.DEBUG:
|
case View.DEBUG:
|
||||||
mainView = <DebugView pdfPages={ appState.pdfPages } transformations={ appState.transformations } />
|
mainView = <DebugView pdfPages={ appState.pdfPages } transformations={ appState.transformations } />
|
||||||
break;
|
break;
|
||||||
|
default:
|
||||||
|
throw `View ${this.props.appState.mainView} not supported!`;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<TopBar/>
|
<TopBar mainView={ appState.mainView } switchMainViewFunction={ appState.switchMainView } />
|
||||||
<Grid>
|
<Grid>
|
||||||
<div>
|
<div>
|
||||||
{ mainView }
|
{ mainView }
|
||||||
|
@ -10,9 +10,9 @@ import Label from 'react-bootstrap/lib/Label'
|
|||||||
import Checkbox from 'react-bootstrap/lib/Checkbox'
|
import Checkbox from 'react-bootstrap/lib/Checkbox'
|
||||||
|
|
||||||
import ContentView from '../models/ContentView.jsx';
|
import ContentView from '../models/ContentView.jsx';
|
||||||
import PdfPageView from './PdfPageView.jsx';
|
import PdfPageView from './debug/PdfPageView.jsx';
|
||||||
import TextPageView from './TextPageView.jsx';
|
import TextPageView from './debug/TextPageView.jsx';
|
||||||
import MarkdownView from './MarkdownView.jsx';
|
import MarkdownPageView from './debug/MarkdownPageView.jsx';
|
||||||
|
|
||||||
// A view which displays the content of the given pages transformed by the given transformations
|
// A view which displays the content of the given pages transformed by the given transformations
|
||||||
export default class DebugView extends React.Component {
|
export default class DebugView extends React.Component {
|
||||||
@ -92,7 +92,7 @@ export default class DebugView extends React.Component {
|
|||||||
pageComponents = transformedPages.map(page => <TextPageView key={ page.index } page={ page } />);
|
pageComponents = transformedPages.map(page => <TextPageView key={ page.index } page={ page } />);
|
||||||
break;
|
break;
|
||||||
case ContentView.MARKDOWN:
|
case ContentView.MARKDOWN:
|
||||||
pageComponents = transformedPages.map(page => <MarkdownView key={ page.index } page={ page } />);
|
pageComponents = transformedPages.map(page => <MarkdownPageView key={ page.index } page={ page } />);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -5,17 +5,33 @@ import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar'
|
|||||||
import ButtonGroup from 'react-bootstrap/lib/ButtonGroup'
|
import ButtonGroup from 'react-bootstrap/lib/ButtonGroup'
|
||||||
import Button from 'react-bootstrap/lib/Button'
|
import Button from 'react-bootstrap/lib/Button'
|
||||||
|
|
||||||
export default class MarkdownView extends React.Component {
|
export default class ResultView extends React.Component {
|
||||||
|
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
page: React.PropTypes.object.isRequired,
|
pdfPages: React.PropTypes.array.isRequired,
|
||||||
|
transformations: React.PropTypes.array.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillMount() {
|
||||||
|
const {pdfPages, transformations} = this.props;
|
||||||
|
var transformedPages = pdfPages;
|
||||||
|
var lastTransformation;
|
||||||
|
transformations.forEach(transformation => {
|
||||||
|
if (lastTransformation) {
|
||||||
|
transformedPages = lastTransformation.processAnnotations(transformedPages);
|
||||||
|
}
|
||||||
|
transformedPages = transformation.transform(transformedPages);
|
||||||
|
lastTransformation = transformation;
|
||||||
|
});
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
preview: true,
|
preview: true,
|
||||||
text: props.page.text
|
text: transformedPages[0].text
|
||||||
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
@ -1,17 +1,25 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import Navbar from 'react-bootstrap/lib/Navbar'
|
import Navbar from 'react-bootstrap/lib/Navbar'
|
||||||
|
import Nav from 'react-bootstrap/lib/Nav'
|
||||||
|
import NavItem from 'react-bootstrap/lib/NavItem'
|
||||||
import MenuItem from 'react-bootstrap/lib/MenuItem'
|
import MenuItem from 'react-bootstrap/lib/MenuItem'
|
||||||
import Dropdown from 'react-bootstrap/lib/Dropdown'
|
import Dropdown from 'react-bootstrap/lib/Dropdown'
|
||||||
import Popover from 'react-bootstrap/lib/Popover'
|
import Popover from 'react-bootstrap/lib/Popover'
|
||||||
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger'
|
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger'
|
||||||
|
|
||||||
import AppLogo from './AppLogo.jsx';
|
import AppLogo from './AppLogo.jsx';
|
||||||
|
import { View } from '../models/AppState.jsx';
|
||||||
|
|
||||||
export default class TopBar extends React.Component {
|
export default class TopBar extends React.Component {
|
||||||
|
|
||||||
render() {
|
static propTypes = {
|
||||||
|
mainView: React.PropTypes.object.isRequired,
|
||||||
|
switchMainViewFunction: React.PropTypes.func.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {mainView, switchMainViewFunction} = this.props;
|
||||||
const aboutPopover = (
|
const aboutPopover = (
|
||||||
<Popover id="popover-trigger-click-root-close" title={ `About PDF to Markdown Converter - ${ process.env.version }` }>
|
<Popover id="popover-trigger-click-root-close" title={ `About PDF to Markdown Converter - ${ process.env.version }` }>
|
||||||
<p>
|
<p>
|
||||||
@ -20,6 +28,8 @@ export default class TopBar extends React.Component {
|
|||||||
</Popover>
|
</Popover>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const showTabs = mainView == View.RESULT || mainView == View.DEBUG;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Navbar inverse>
|
<Navbar inverse>
|
||||||
<Navbar.Header>
|
<Navbar.Header>
|
||||||
@ -41,6 +51,15 @@ export default class TopBar extends React.Component {
|
|||||||
</Dropdown.Menu>
|
</Dropdown.Menu>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
</Navbar.Brand>
|
</Navbar.Brand>
|
||||||
|
{ showTabs &&
|
||||||
|
<Nav bsStyle="tabs" activeKey={ mainView } pullRight>
|
||||||
|
<NavItem eventKey={ View.RESULT } activeKey={ mainView } onSelect={ switchMainViewFunction }>
|
||||||
|
Result View
|
||||||
|
</NavItem>
|
||||||
|
<NavItem eventKey={ View.DEBUG } activeKey={ mainView } onSelect={ switchMainViewFunction }>
|
||||||
|
Debug View
|
||||||
|
</NavItem>
|
||||||
|
</Nav> }
|
||||||
</Navbar.Header>
|
</Navbar.Header>
|
||||||
</Navbar>
|
</Navbar>
|
||||||
);
|
);
|
||||||
|
23
src/javascript/components/debug/MarkdownPageView.jsx
Normal file
23
src/javascript/components/debug/MarkdownPageView.jsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import Remarkable from 'remarkable';
|
||||||
|
|
||||||
|
export default class MarkdownPageView extends React.Component {
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
page: React.PropTypes.object.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const remarkable = new Remarkable({
|
||||||
|
breaks: true
|
||||||
|
});
|
||||||
|
|
||||||
|
const html = remarkable.render(this.props.page.text);
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div dangerouslySetInnerHTML={ { __html: html } } />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -11,7 +11,11 @@ export default class TextPageView extends React.Component {
|
|||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<h2>{ header }</h2>
|
<h2>{ header }</h2>
|
||||||
<textarea rows="45" cols="150" value={ this.props.page.text }>
|
<textarea
|
||||||
|
rows="45"
|
||||||
|
cols="150"
|
||||||
|
value={ this.props.page.text }
|
||||||
|
readOnly="readonly">
|
||||||
</textarea>
|
</textarea>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
@ -8,7 +8,7 @@ import RemoveRepetitiveElements from './transformations/RemoveRepetitiveElements
|
|||||||
import HeadlineDetector from './transformations/HeadlineDetector.jsx'
|
import HeadlineDetector from './transformations/HeadlineDetector.jsx'
|
||||||
import HeadlineToUppercase from './transformations/HeadlineToUppercase.jsx'
|
import HeadlineToUppercase from './transformations/HeadlineToUppercase.jsx'
|
||||||
import ToTextPages from './transformations/ToTextPages.jsx';
|
import ToTextPages from './transformations/ToTextPages.jsx';
|
||||||
import ToSingleTextPage from './transformations/ToSingleTextPage.jsx'
|
import ToMarkdown from './transformations/ToMarkdown.jsx'
|
||||||
|
|
||||||
// Holds the state of the Application
|
// Holds the state of the Application
|
||||||
export default class AppState {
|
export default class AppState {
|
||||||
@ -27,12 +27,13 @@ export default class AppState {
|
|||||||
new HeadlineDetector(),
|
new HeadlineDetector(),
|
||||||
new HeadlineToUppercase(),
|
new HeadlineToUppercase(),
|
||||||
new ToTextPages(),
|
new ToTextPages(),
|
||||||
new ToSingleTextPage()];
|
new ToMarkdown()];
|
||||||
|
|
||||||
//bind functions
|
//bind functions
|
||||||
this.render = this.render.bind(this);
|
this.render = this.render.bind(this);
|
||||||
this.storeFileBuffer = this.storeFileBuffer.bind(this);
|
this.storeFileBuffer = this.storeFileBuffer.bind(this);
|
||||||
this.storePdfPages = this.storePdfPages.bind(this);
|
this.storePdfPages = this.storePdfPages.bind(this);
|
||||||
|
this.switchMainView = this.switchMainView.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
@ -49,7 +50,12 @@ export default class AppState {
|
|||||||
storePdfPages(pdfPages) {
|
storePdfPages(pdfPages) {
|
||||||
this.pdfPages = pdfPages;
|
this.pdfPages = pdfPages;
|
||||||
this.fileBuffer = null;
|
this.fileBuffer = null;
|
||||||
this.mainView = View.DEBUG;
|
this.mainView = View.RESULT;
|
||||||
|
this.render();
|
||||||
|
}
|
||||||
|
|
||||||
|
switchMainView(view) {
|
||||||
|
this.mainView = view;
|
||||||
this.render();
|
this.render();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -57,4 +63,4 @@ export default class AppState {
|
|||||||
|
|
||||||
export class View extends Enum {
|
export class View extends Enum {
|
||||||
}
|
}
|
||||||
View.initEnum(['UPLOAD', 'LOADING', 'DEBUG'])
|
View.initEnum(['UPLOAD', 'LOADING', 'RESULT', 'DEBUG'])
|
@ -2,10 +2,10 @@ import Transformation from './Transformation.jsx';
|
|||||||
import TextPage from '../TextPage.jsx';
|
import TextPage from '../TextPage.jsx';
|
||||||
import ContentView from '../ContentView.jsx';
|
import ContentView from '../ContentView.jsx';
|
||||||
|
|
||||||
export default class ToSingleTextPage extends Transformation {
|
export default class ToMarkdown extends Transformation {
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super("To Single Text Page");
|
super("To Markdown");
|
||||||
}
|
}
|
||||||
|
|
||||||
showPageSelection() {
|
showPageSelection() {
|
Loading…
x
Reference in New Issue
Block a user