2 |
3 | # PanWriter
4 |
5 | PanWriter is a distraction-free markdown editor with two unique features:
6 |
7 | 1. Tight integration with pandoc for import/export to/from plenty of file formats (including HTML, docx, LaTeX and EPUB).
8 | 2. Preview pane that can show pages – including page breaks etc. Layout adjustments are immediately reflected in the preview.
9 |
10 | Read the **[MANUAL](https://www.panwriter.com/MANUAL.html)** for more info.
11 |
12 | **[Download PanWriter](https://www.panwriter.com)**
13 |
14 | - You also have to [install pandoc](https://pandoc.org/installing.html) to export to most formats.
15 | - If you're on macOS, see this [thread on how to bypass the security warning](https://github.com/mb21/panwriter/issues/33#issuecomment-2354944902).
16 |
17 | 
18 |
19 | Feedback, suggestions and contributions very much welcome! Please open an issue to start a conversation.
20 |
21 |
22 | ## Develop
23 |
24 | Install git (if you haven't already) and [install Volta](https://docs.volta.sh/guide/getting-started) (which will make the correct Node.js and npm versions availlable in the project directory), then:
25 |
26 | git clone git@github.com:mb21/panwriter.git
27 | cd panwriter
28 | npm ci
29 |
30 | ## To run the app in development mode:
31 | npm run electron:dev
32 |
33 | ## To build distributable app package (goes to ./dist):
34 | npm dist
35 |
36 | Check out the `package.json` for more scripts to run.
37 |
38 |
39 | ## Powered by
40 |
41 | PanWriter is powered by (amongst other open source libraries):
42 |
43 | - [pandoc](http://pandoc.org) (import/export)
44 | - [Electron](https://electronjs.org) (app framework)
45 | - [CodeMirror](https://codemirror.net) (editor)
46 | - For the preview pane:
47 | - [pagedjs](https://gitlab.pagedmedia.org/tools/pagedjs)
48 | - [markdown-it](https://github.com/markdown-it/markdown-it#markdown-it)
49 | - [KaTeX](https://katex.org)
50 |
--------------------------------------------------------------------------------
/TODO.md:
--------------------------------------------------------------------------------
1 | ## TODOs
2 |
3 | - Preview:
4 | - respect `css`, `toc` metadata fields
5 | - Editor:
6 | - expand `Format` menu
7 | - spell check
8 | - improve find/replace
9 | - expand things that can be controlled from the `settings.yaml` file (possibly add a Settings/Preferences window to add that file):
10 | - set a CodeMirror editor theme css
11 | - edit the default CSS and YAML files
12 | - choose `pandoc` executable (probably with file-open dialog, which we can use for app sandboxing with security-scoped bookmarks)
13 | - Write pandoc lua filter that does some PanWriter-specific transformations:
14 | - add [page-break syntax](https://github.com/jgm/pandoc/issues/1934#issuecomment-274327751)
15 | - [Variable substitution in body](https://github.com/jgm/pandoc/issues/1950#issuecomment-427671251)
16 | - read out `type` metadata and if it references a css file, put the path into the `css` metadata variable
17 | - GUI popup on file import: at least allow to set `-f`, `-t`, `--track-changes` and `--extract-media` pandoc options.
18 | - Unify PanWriter custom document type and pandoc template concepts?
19 | - Rename `type` metadata key to `doctype`?
20 |
--------------------------------------------------------------------------------
/electron/dataDir.ts:
--------------------------------------------------------------------------------
1 | import { readFile } from 'fs/promises'
2 | import * as jsYaml from 'js-yaml'
3 | import { app } from 'electron'
4 | import { basename, sep } from 'path'
5 | import { Meta } from '../src/appState/AppState'
6 |
7 | export const dataDir = [app.getPath('appData'), 'PanWriterUserData', ''].join(sep)
8 |
9 | /**
10 | * reads the right default yaml file
11 | *
12 | * make sure this function is safe to expose in `preload.ts`
13 | */
14 | export const readDataDirFile = async (fileName: string): Promise<[Meta | undefined, string]> => {
15 | try {
16 | // make sure only PanWriterUserData directory can be accessed
17 | fileName = dataDir + basename(fileName)
18 |
19 | const str = await readFile(fileName, 'utf8')
20 | const yaml = jsYaml.load(str)
21 | return [
22 | typeof yaml === 'object' ? (yaml as Meta) : {},
23 | fileName
24 | ]
25 | } catch(e) {
26 | console.warn("Error loading or parsing YAML file." + (e as Error).message)
27 | return [ undefined, fileName ]
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/electron/file.ts:
--------------------------------------------------------------------------------
1 | import { BrowserWindow, dialog } from 'electron'
2 | import { readFile, writeFile } from 'fs'
3 | import { basename, extname } from 'path'
4 | import { promisify } from 'util'
5 | import * as ipc from './ipc'
6 | import { Doc } from '../src/appState/AppState'
7 | import { addToRecentFiles } from './recentFiles'
8 |
9 |
10 | export const openFile = async (
11 | win: BrowserWindow
12 | , filePath: string
13 | ): Promise
44 |
56 | );
57 | }
58 |
59 | const initialState: AppState = {
60 | doc: {
61 | md: window.ipcApi ? '' : websiteText
62 | , yaml: ''
63 | , bodyMd: ''
64 | , meta: {}
65 | , html: ''
66 | , fileName: 'Untitled'
67 | , filePath: undefined
68 | , fileDirty: false
69 | }
70 | , metaEditorOpen: false
71 | , settings: defaultSettings
72 | , split: 'onlyEditor'
73 | , paginated: false
74 | , previewDivRef: createRef()
75 | }
76 |
--------------------------------------------------------------------------------
/src/components/Button/Button.module.css:
--------------------------------------------------------------------------------
1 | .primary, .secondary {
2 | border: 0;
3 | border-radius: 5px;
4 | padding: 8px;
5 | font-family: var(--system-font);
6 |
7 | --primary-color: white;
8 | --primary-bg: linear-gradient(rgb(73, 143, 247), rgb(51, 120, 246));
9 | --primary-bg-active: linear-gradient(rgb(57, 123, 227), rgb(41, 101, 227));
10 | --secondary-color: rgb(69, 69, 69);
11 | --secondary-bg: rgb(202, 202, 202);
12 | --secondary-bg-active: rgb(190, 190, 190);
13 | }
14 |
15 | @media (prefers-color-scheme: dark) {
16 | .primary, .secondary {
17 | --primary-color: rgb(238, 238, 238);
18 | --primary-bg: linear-gradient(rgb(57, 121, 222), rgb(50, 108, 197));
19 | --primary-bg-active: linear-gradient(rgb(78, 158, 236), rgb(70, 144, 223));
20 | --secondary-color: rgb(238, 238, 238);
21 | --secondary-bg: rgb(98, 98, 98);
22 | --secondary-bg-active: rgb(132, 132, 132);
23 | }
24 | }
25 |
26 |
27 | .primary {
28 | color: var(--primary-color);
29 | background: var(--primary-bg);
30 | }
31 | .primary:active {
32 | background: var(--primary-bg-active);
33 | }
34 |
35 | .secondary {
36 | color: var(--secondary-color);
37 | background: var(--secondary-bg);
38 | }
39 | .secondary:active {
40 | background: var(--secondary-bg-active);
41 | }
42 |
--------------------------------------------------------------------------------
/src/components/Button/Button.tsx:
--------------------------------------------------------------------------------
1 | import styles from './Button.module.css'
2 |
3 | interface Props {
4 | active?: boolean;
5 | children: JSX.Element | JSX.Element[] | string;
6 | onClick: () => void;
7 | variant?: 'primary' | 'secondary';
8 | }
9 |
10 | export const Button = (props: Props) =>
11 |
17 |
--------------------------------------------------------------------------------
/src/components/ColorPicker/ColorPicker.css:
--------------------------------------------------------------------------------
1 | .colorpicker input {
2 | width: 4.5em;
3 | }
4 | .colorpicker .rectangle {
5 | display: inline-block;
6 | height: 19px;
7 | width: 19px;
8 | vertical-align: middle;
9 | margin-left: 0.25em;
10 | margin-bottom: 2px;
11 | cursor: pointer;
12 | border: 1px solid var(--input-border-color);
13 | }
14 | .colorpicker .background {
15 | position: absolute;
16 | top: 0;
17 | left: 0;
18 | width: 100%;
19 | height: 100%;
20 | }
21 | .colorpicker .sketch-picker {
22 | position: absolute;
23 | background-color: var(--overlay-background-color) !important;
24 | border-radius: 10px !important;
25 | padding-bottom: 6px !important;
26 | }
27 | .colorpicker .sketch-picker label {
28 | color: var(--font-color) !important;
29 | }
30 | .colorpicker .sketch-picker input {
31 | box-shadow: none !important;
32 | border: 1px solid var(--input-border-color) !important;
33 | border-bottom: 1px solid var(--input-border-bottom-color) !important;
34 | }
35 |
--------------------------------------------------------------------------------
/src/components/ColorPicker/ColorPicker.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 | import { SketchPicker } from 'react-color'
3 |
4 | import './ColorPicker.css'
5 |
6 | interface Props {
7 | id: string;
8 | value: string;
9 | onChange: (s: string) => void;
10 | }
11 |
12 | export const ColorPicker = (props: Props) => {
13 | const { id, value, onChange } = props
14 | const [showPicker, setShowPicker] = useState(false)
15 | const focus = () => setShowPicker(true)
16 | return (
17 |
46 | { state.metaEditorOpen
47 | ?
51 |
18 | onChange(e.target.value)}
24 | />
25 |
30 | { showPicker
31 | ? <>
32 | ;
22 | }
23 |
24 | export const Editor = (props: Props) => {
25 | const { state, dispatch } = props
26 | return (
27 |
29 | dispatch({ type: 'setMdAndRender', md })
30 | }
31 | onScroll={scrollPreview}
32 | editorDidMount={onEditorDidMount}
33 | value={state.doc.md}
34 | autoCursor={true}
35 | options={codeMirrorOptions}
36 | />
37 | )
38 | }
39 |
40 | const codeMirrorOptions = {
41 | mode: {
42 | name: 'yaml-frontmatter'
43 | , base: 'markdown'
44 | }
45 | , theme: 'paper'
46 | , indentUnit: 4 // because of how numbered lists behave in CommonMark
47 | , tabSize: 4
48 | , lineNumbers: false
49 | , lineWrapping: true
50 | , autofocus: true
51 | , extraKeys: {
52 | Enter: 'newlineAndIndentContinueMarkdownList'
53 | , Tab: 'indentMore'
54 | , 'Shift-Tab': 'indentLess'
55 | }
56 | }
57 |
58 | const onEditorDidMount = (editor: CMEditor) => {
59 | editor.focus();
60 |
61 | // adapted from https://codemirror.net/demo/indentwrap.html
62 | const charWidth = editor.defaultCharWidth()
63 | const basePadding = 4
64 | // matches markdown list `-`, `+`, `*`, `1.`, `1)` and blockquote `>` markers:
65 | // eslint-disable-next-line no-useless-escape
66 | const listRe = /^(([-|\+|\*|\>]|\d+[\.|\)])\s+)(.*)/
67 |
68 | editor.on('renderLine', (cm, line, elt) => {
69 | const txt = line.text
70 | const matches = txt.trim().match(listRe)
71 | if (matches && matches[1]) {
72 | const extraIndent = matches[1].length
73 | const columnCount = countColumn(txt, null, cm.getOption('tabSize') || 4)
74 | const off = (columnCount + extraIndent) * charWidth
75 | elt.style.textIndent = '-' + off + 'px';
76 | elt.style.paddingLeft = (basePadding + off) + 'px';
77 | }
78 | });
79 | editor.refresh();
80 |
81 | registerScrollEditor(editor);
82 |
83 | window.ipcApi?.on.find( () => editor.execCommand('findPersistent'))
84 | window.ipcApi?.on.findNext( () => editor.execCommand('findPersistentNext'))
85 | window.ipcApi?.on.findPrevious( () => editor.execCommand('findPersistentPrev'))
86 |
87 |
88 | const replaceSelection = (fn: (s: string) => string) =>
89 | editor.replaceSelection( fn( editor.getSelection() ) )
90 |
91 | window.ipcApi?.on.addBold( () => replaceSelection(s => ['**', s, '**'].join('')) )
92 | window.ipcApi?.on.addItalic( () => replaceSelection(s => ['_', s, '_' ].join('')) )
93 | window.ipcApi?.on.addStrikethrough( () => replaceSelection(s => ['~~', s, '~~'].join('')) )
94 | }
95 |
--------------------------------------------------------------------------------
/src/components/Editor/codemirror.css:
--------------------------------------------------------------------------------
1 | /* BASICS */
2 |
3 | .CodeMirror {
4 | /* Set height, width, borders, and global font properties here */
5 | font-family: monospace;
6 | height: 300px;
7 | color: black;
8 | direction: ltr;
9 | }
10 |
11 | /* PADDING */
12 |
13 | .CodeMirror-lines {
14 | padding: 4px 0; /* Vertical padding around content */
15 | }
16 | .CodeMirror pre.CodeMirror-line,
17 | .CodeMirror pre.CodeMirror-line-like {
18 | padding: 0 4px; /* Horizontal padding of content */
19 | }
20 |
21 | .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
22 | background-color: transparent; /* The little square between H and V scrollbars */
23 | }
24 |
25 | /* GUTTER */
26 |
27 | .CodeMirror-gutters {
28 | border-right: 1px solid #ddd;
29 | background-color: #f7f7f7;
30 | white-space: nowrap;
31 | }
32 | .CodeMirror-linenumbers {}
33 | .CodeMirror-linenumber {
34 | padding: 0 3px 0 5px;
35 | min-width: 20px;
36 | text-align: right;
37 | color: #999;
38 | white-space: nowrap;
39 | }
40 |
41 | .CodeMirror-guttermarker { color: black; }
42 | .CodeMirror-guttermarker-subtle { color: #999; }
43 |
44 | /* CURSOR */
45 |
46 | .CodeMirror-cursor {
47 | border-left: 1px solid black;
48 | border-right: none;
49 | width: 0;
50 | }
51 | /* Shown when moving in bi-directional text */
52 | .CodeMirror div.CodeMirror-secondarycursor {
53 | border-left: 1px solid silver;
54 | }
55 | .cm-fat-cursor .CodeMirror-cursor {
56 | width: auto;
57 | border: 0 !important;
58 | background: #7e7;
59 | }
60 | .cm-fat-cursor div.CodeMirror-cursors {
61 | z-index: 1;
62 | }
63 | .cm-fat-cursor-mark {
64 | background-color: rgba(20, 255, 20, 0.5);
65 | -webkit-animation: blink 1.06s steps(1) infinite;
66 | -moz-animation: blink 1.06s steps(1) infinite;
67 | animation: blink 1.06s steps(1) infinite;
68 | }
69 | .cm-animate-fat-cursor {
70 | width: auto;
71 | border: 0;
72 | -webkit-animation: blink 1.06s steps(1) infinite;
73 | -moz-animation: blink 1.06s steps(1) infinite;
74 | animation: blink 1.06s steps(1) infinite;
75 | background-color: #7e7;
76 | }
77 | @-moz-keyframes blink {
78 | 0% {}
79 | 50% { background-color: transparent; }
80 | 100% {}
81 | }
82 | @-webkit-keyframes blink {
83 | 0% {}
84 | 50% { background-color: transparent; }
85 | 100% {}
86 | }
87 | @keyframes blink {
88 | 0% {}
89 | 50% { background-color: transparent; }
90 | 100% {}
91 | }
92 |
93 | /* Can style cursor different in overwrite (non-insert) mode */
94 | .CodeMirror-overwrite .CodeMirror-cursor {}
95 |
96 | .cm-tab { display: inline-block; text-decoration: inherit; }
97 |
98 | .CodeMirror-rulers {
99 | position: absolute;
100 | left: 0; right: 0; top: -50px; bottom: 0;
101 | overflow: hidden;
102 | }
103 | .CodeMirror-ruler {
104 | border-left: 1px solid #ccc;
105 | top: 0; bottom: 0;
106 | position: absolute;
107 | }
108 |
109 | /* DEFAULT THEME */
110 |
111 | .cm-s-default .cm-header {color: blue;}
112 | .cm-s-default .cm-quote {color: #090;}
113 | .cm-negative {color: #d44;}
114 | .cm-positive {color: #292;}
115 | .cm-header, .cm-strong {font-weight: bold;}
116 | .cm-em {font-style: italic;}
117 | .cm-link {text-decoration: underline;}
118 | .cm-strikethrough {text-decoration: line-through;}
119 |
120 | .cm-s-default .cm-keyword {color: #708;}
121 | .cm-s-default .cm-atom {color: #219;}
122 | .cm-s-default .cm-number {color: #164;}
123 | .cm-s-default .cm-def {color: #00f;}
124 | .cm-s-default .cm-variable,
125 | .cm-s-default .cm-punctuation,
126 | .cm-s-default .cm-property,
127 | .cm-s-default .cm-operator {}
128 | .cm-s-default .cm-variable-2 {color: #05a;}
129 | .cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
130 | .cm-s-default .cm-comment {color: #a50;}
131 | .cm-s-default .cm-string {color: #a11;}
132 | .cm-s-default .cm-string-2 {color: #f50;}
133 | .cm-s-default .cm-meta {color: #555;}
134 | .cm-s-default .cm-qualifier {color: #555;}
135 | .cm-s-default .cm-builtin {color: #30a;}
136 | .cm-s-default .cm-bracket {color: #997;}
137 | .cm-s-default .cm-tag {color: #170;}
138 | .cm-s-default .cm-attribute {color: #00c;}
139 | .cm-s-default .cm-hr {color: #999;}
140 | .cm-s-default .cm-link {color: #00c;}
141 |
142 | .cm-s-default .cm-error {color: #f00;}
143 | .cm-invalidchar {color: #f00;}
144 |
145 | .CodeMirror-composing { border-bottom: 2px solid; }
146 |
147 | /* Default styles for common addons */
148 |
149 | div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
150 | div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
151 | .CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
152 | .CodeMirror-activeline-background {background: #e8f2ff;}
153 |
154 | /* STOP */
155 |
156 | /* The rest of this file contains styles related to the mechanics of
157 | the editor. You probably shouldn't touch them. */
158 |
159 | .CodeMirror {
160 | position: relative;
161 | overflow: hidden;
162 | background: white;
163 | }
164 |
165 | .CodeMirror-scroll {
166 | overflow: scroll !important; /* Things will break if this is overridden */
167 | /* 50px is the magic margin used to hide the element's real scrollbars */
168 | /* See overflow: hidden in .CodeMirror */
169 | margin-bottom: -50px; margin-right: -50px;
170 | padding-bottom: 50px;
171 | height: 100%;
172 | outline: none; /* Prevent dragging from highlighting the element */
173 | position: relative;
174 | }
175 | .CodeMirror-sizer {
176 | position: relative;
177 | border-right: 50px solid transparent;
178 | }
179 |
180 | /* The fake, visible scrollbars. Used to force redraw during scrolling
181 | before actual scrolling happens, thus preventing shaking and
182 | flickering artifacts. */
183 | .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
184 | position: absolute;
185 | z-index: 6;
186 | display: none;
187 | outline: none;
188 | }
189 | .CodeMirror-vscrollbar {
190 | right: 0; top: 0;
191 | overflow-x: hidden;
192 | overflow-y: scroll;
193 | }
194 | .CodeMirror-hscrollbar {
195 | bottom: 0; left: 0;
196 | overflow-y: hidden;
197 | overflow-x: scroll;
198 | }
199 | .CodeMirror-scrollbar-filler {
200 | right: 0; bottom: 0;
201 | }
202 | .CodeMirror-gutter-filler {
203 | left: 0; bottom: 0;
204 | }
205 |
206 | .CodeMirror-gutters {
207 | position: absolute; left: 0; top: 0;
208 | min-height: 100%;
209 | z-index: 3;
210 | }
211 | .CodeMirror-gutter {
212 | white-space: normal;
213 | height: 100%;
214 | display: inline-block;
215 | vertical-align: top;
216 | margin-bottom: -50px;
217 | }
218 | .CodeMirror-gutter-wrapper {
219 | position: absolute;
220 | z-index: 4;
221 | background: none !important;
222 | border: none !important;
223 | }
224 | .CodeMirror-gutter-background {
225 | position: absolute;
226 | top: 0; bottom: 0;
227 | z-index: 4;
228 | }
229 | .CodeMirror-gutter-elt {
230 | position: absolute;
231 | cursor: default;
232 | z-index: 4;
233 | }
234 | .CodeMirror-gutter-wrapper ::selection { background-color: transparent }
235 | .CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
236 |
237 | .CodeMirror-lines {
238 | cursor: text;
239 | min-height: 1px; /* prevents collapsing before first draw */
240 | }
241 | .CodeMirror pre.CodeMirror-line,
242 | .CodeMirror pre.CodeMirror-line-like {
243 | /* Reset some styles that the rest of the page might have set */
244 | -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
245 | border-width: 0;
246 | background: transparent;
247 | font-family: inherit;
248 | font-size: inherit;
249 | margin: 0;
250 | white-space: pre;
251 | word-wrap: normal;
252 | line-height: inherit;
253 | color: inherit;
254 | z-index: 2;
255 | position: relative;
256 | overflow: visible;
257 | -webkit-tap-highlight-color: transparent;
258 | -webkit-font-variant-ligatures: contextual;
259 | font-variant-ligatures: contextual;
260 | }
261 | .CodeMirror-wrap pre.CodeMirror-line,
262 | .CodeMirror-wrap pre.CodeMirror-line-like {
263 | word-wrap: break-word;
264 | white-space: pre-wrap;
265 | word-break: normal;
266 | }
267 |
268 | .CodeMirror-linebackground {
269 | position: absolute;
270 | left: 0; right: 0; top: 0; bottom: 0;
271 | z-index: 0;
272 | }
273 |
274 | .CodeMirror-linewidget {
275 | position: relative;
276 | z-index: 2;
277 | padding: 0.1px; /* Force widget margins to stay inside of the container */
278 | }
279 |
280 | .CodeMirror-widget {}
281 |
282 | .CodeMirror-rtl pre { direction: rtl; }
283 |
284 | .CodeMirror-code {
285 | outline: none;
286 | }
287 |
288 | /* Force content-box sizing for the elements where we expect it */
289 | .CodeMirror-scroll,
290 | .CodeMirror-sizer,
291 | .CodeMirror-gutter,
292 | .CodeMirror-gutters,
293 | .CodeMirror-linenumber {
294 | -moz-box-sizing: content-box;
295 | box-sizing: content-box;
296 | }
297 |
298 | .CodeMirror-measure {
299 | position: absolute;
300 | width: 100%;
301 | height: 0;
302 | overflow: hidden;
303 | visibility: hidden;
304 | }
305 |
306 | .CodeMirror-cursor {
307 | position: absolute;
308 | pointer-events: none;
309 | }
310 | .CodeMirror-measure pre { position: static; }
311 |
312 | div.CodeMirror-cursors {
313 | visibility: hidden;
314 | position: relative;
315 | z-index: 3;
316 | }
317 | div.CodeMirror-dragcursors {
318 | visibility: visible;
319 | }
320 |
321 | .CodeMirror-focused div.CodeMirror-cursors {
322 | visibility: visible;
323 | }
324 |
325 | .CodeMirror-selected { background: #d9d9d9; }
326 | .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
327 | .CodeMirror-crosshair { cursor: crosshair; }
328 | .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
329 | .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
330 |
331 | .cm-searching {
332 | background-color: #ffa;
333 | background-color: rgba(255, 255, 0, .4);
334 | }
335 |
336 | /* Used to force a border model for a node */
337 | .cm-force-border { padding-right: .1px; }
338 |
339 | @media print {
340 | /* Hide the cursor when printing */
341 | .CodeMirror div.CodeMirror-cursors {
342 | visibility: hidden;
343 | }
344 | }
345 |
346 | /* See issue #2901 */
347 | .cm-tab-wrap-hack:after { content: ''; }
348 |
349 | /* Help users use markselection to safely style text background */
350 | span.CodeMirror-selectedtext { background: none; }
351 |
--------------------------------------------------------------------------------
/src/components/MetaEditor/MetaEditor.css:
--------------------------------------------------------------------------------
1 | .metaeditor {
2 | font-family: var(--system-font);
3 | background-color: var(--background-color);
4 | color: var(--font-color);
5 | height: 100vh;
6 | padding: 50px 20px;
7 | box-sizing: border-box;
8 | overflow: auto;
9 | position: relative;
10 | }
11 |
12 | .metaeditor .backbtn {
13 | position: absolute;
14 | border: 0;
15 | padding: 0;
16 | background: none;
17 | }
18 |
19 | .metaeditor .content {
20 | padding-top: 40px;
21 | max-width: 50vw;
22 | margin: 0 auto;
23 | }
24 | .metaeditor h4 {
25 | font-size: 12px;
26 | margin: 2em 0 1em 0;
27 | }
28 |
29 | .metaeditor .kvs {
30 | display: grid;
31 | grid-template-columns: 100px 1fr;
32 | }
33 | .metaeditor label {
34 | font-size: 12px;
35 | padding: 3px 10px 0 0;
36 | }
37 |
38 | .metaeditor textarea {
39 | resize: vertical;
40 | min-height: 7em;
41 | font-family: var(--mono-font);
42 | }
43 | @media (prefers-color-scheme: light) {
44 | .metaeditor .darkmodewarning {
45 | display: none;
46 | }
47 | }
48 | .metaeditor .darkmodewarning {
49 | font-size: 12px;
50 | }
51 |
--------------------------------------------------------------------------------
/src/components/MetaEditor/MetaEditor.tsx:
--------------------------------------------------------------------------------
1 | import { Fragment } from 'react'
2 | import { AppState } from '../../appState/AppState'
3 | import { Action } from '../../appState/Action'
4 | import { defaultVars, stripSurroundingStyleTags } from '../../renderPreview/templates/getCss'
5 | import { ColorPicker } from '../ColorPicker/ColorPicker'
6 |
7 | import back from './back.svg'
8 | import './MetaEditor.css'
9 |
10 | type Kv = String | Textarea | Number | Select | Color;
11 |
12 | interface BaseKv {
13 | name: string;
14 | label: string;
15 | placeholder?: string;
16 | onLoad?: (v: string) => string;
17 | onDone?: (v: string) => string;
18 | }
19 |
20 | interface String extends BaseKv {
21 | type: 'string';
22 | }
23 | interface Textarea extends BaseKv {
24 | type: 'textarea';
25 | }
26 | interface Number extends BaseKv {
27 | type: 'number';
28 | step: number;
29 | }
30 | interface Select extends BaseKv {
31 | type: 'select';
32 | options: string[];
33 | }
34 | interface Color extends BaseKv {
35 | type: 'color';
36 | }
37 |
38 | interface Props {
39 | state: AppState;
40 | dispatch: React.Dispatch;
41 | }
42 |
43 | export const MetaEditor = (props: Props) => {
44 | const { state, dispatch } = props
45 | const { doc } = state
46 | const renderKv = (kv: Kv) =>
47 |
48 |
51 | { renderInput(kv) }
52 |
53 |
54 | const renderInput = (kv: Kv): JSX.Element => {
55 | const { onLoad, onDone, placeholder } = kv
56 | const key = kv.name
57 | const val = doc.meta[key]?.toString() || defaultVars[key] || ''
58 | const value = onLoad ? onLoad(val) : val
59 | const onChange = (
60 | e: string | React.ChangeEvent
61 | ) => {
62 | const v = typeof e === 'string' ? e : e.target.value
63 | dispatch({ type: 'setMetaAndRender', key, value: onDone ? onDone(v) : v })
64 | }
65 | const common = { id: kv.name, placeholder, value, onChange }
66 | switch(kv.type) {
67 | case 'string': return
68 | case 'textarea': return
69 | case 'number': return
70 | case 'select': return
71 | case 'color': return ) => {
11 | const { paginated } = props
12 | const [zoom, setZoom] = useState(1.0)
13 | return (
14 | ;
19 | }
20 |
21 | export const Toolbar = (props: Props) => {
22 | const { state, dispatch } = props
23 | const { doc, metaEditorOpen, split, paginated } = state
24 | const { fileName, fileDirty } = doc
25 | return (
26 |
16 | { modal === 'chooseFormat'
17 | ? ,
20 | document.getElementById('root')
21 | );
22 |
--------------------------------------------------------------------------------
/src/raw-loader.d.ts:
--------------------------------------------------------------------------------
1 | declare module '!!raw-loader!*' {
2 | const content: string;
3 | export default content;
4 | }
5 |
--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// {
61 | const urlPath = pathToURLpath(path)
62 | return urlPath.substring(0, urlPath.lastIndexOf('/'))
63 | }
64 |
65 | /**
66 | * Convert a POSIX or Windows file path to a path in a `file://` scheme URL
67 | *
68 | * adapted from https://github.com/sindresorhus/file-url/blob/main/index.js
69 | */
70 | const pathToURLpath = (path: string): string => {
71 | path = path.replace(/\\/g, '/')
72 |
73 | // Windows drive letter must be prefixed with a slash.
74 | if (path[0] !== '/') {
75 | path = `/${path}`
76 | }
77 |
78 | // Escape required characters for path components.
79 | // See: https://tools.ietf.org/html/rfc3986#section-3.3
80 | return encodeURI(path).replace(/[?#]/g, encodeURIComponent)
81 | }
82 |
--------------------------------------------------------------------------------
/src/renderPreview/convertYaml.ts:
--------------------------------------------------------------------------------
1 | import jsYaml from 'js-yaml'
2 | import { Doc, Meta } from '../appState/AppState'
3 |
4 | // from https://github.com/dworthen/js-yaml-front-matter/blob/master/src/index.js#L14
5 | const yamlFrontRe = /^(-{3}(?:\n|\r)([\w\W]+?)(?:\n|\r)-{3})?([\w\W]*)*/
6 |
7 | export const parseYaml = (md: string) => {
8 | let yamlStr = ''
9 | , bodyMd = md
10 | , meta: Meta = {}
11 | , yaml
12 | , results = yamlFrontRe.exec(md)
13 | try {
14 | yaml = results?.[2]
15 | if (yaml) {
16 | const metaObj = jsYaml.load(yaml, {schema: jsYaml.JSON_SCHEMA})
17 | if (typeof metaObj === 'object' && !(metaObj instanceof Array) ) {
18 | yamlStr = yaml
19 | bodyMd = results?.[3] || ''
20 | meta = metaObj as Meta
21 | } else {
22 | console.warn("YAML wasn't an object")
23 | }
24 | }
25 | } catch(e) {
26 | console.warn("Could not parse YAML", (e as Error).message)
27 | }
28 | return { yaml: yamlStr, bodyMd, meta }
29 | }
30 |
31 | export const serializeMetaToMd = (doc: Doc): string => {
32 | const { meta, bodyMd } = doc
33 | const yamlStr = Object.keys(meta).length > 0
34 | ? jsYaml.dump(meta, {skipInvalid: true})
35 | : ''
36 | return (yamlStr ? '---\n' + yamlStr + '---\n\n' : '') + bodyMd.trim()
37 | }
38 |
--------------------------------------------------------------------------------
/src/renderPreview/renderPreview.ts:
--------------------------------------------------------------------------------
1 | import { AppState } from '../appState/AppState'
2 | import { convertMd } from './convertMd'
3 | import { renderPlain, renderPaged } from './renderPreviewImpl'
4 | import { clearPreview, initScroll } from './scrolling'
5 |
6 | let renderInProgress = false
7 | , needsRerender = false
8 | , stateBuffer: AppState
9 |
10 | /**
11 | * Converts md to html (eventually setting `state.doc.html`) and
12 | * renders into `state.previewDiv`.
13 | * Throttles when a render is still in progress.
14 | */
15 | export const renderPreview = (state: AppState): void => {
16 | needsRerender = true
17 | if (state.split === 'onlyEditor') {
18 | clearPreview()
19 | } else {
20 | renderNext(state)
21 | }
22 | }
23 |
24 | /**
25 | * buffers the latest text change and renders when previous rendering is done
26 | */
27 | const renderNext = (state: AppState) => {
28 | stateBuffer = state
29 | if (needsRerender && !renderInProgress) {
30 | renderInProgress = true
31 | render(state)
32 | .catch(e => console.warn('renderer crashed:', e.message, e.stack))
33 | .then(contentWindow => {
34 | renderInProgress = false
35 | if (contentWindow) {
36 | initScroll(contentWindow, state.paginated)
37 | }
38 | renderNext(stateBuffer)
39 | })
40 | needsRerender = false
41 | }
42 | }
43 |
44 | const render = async (state: AppState): Promise => {
45 | const { doc, paginated, previewDivRef } = state
46 | doc.html = convertMd(doc)
47 | const previewDiv = previewDivRef.current
48 | if (previewDiv) {
49 | if (paginated) {
50 | return renderPaged(doc, previewDiv)
51 | } else {
52 | return renderPlain(doc, previewDiv)
53 | }
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/src/renderPreview/renderPreviewImpl.ts:
--------------------------------------------------------------------------------
1 | import { Doc } from '../appState/AppState'
2 | import { getCss } from './templates/getCss'
3 |
4 | let singleFrame: HTMLIFrameElement | undefined
5 | , frame1: HTMLIFrameElement | undefined
6 | , frame2: HTMLIFrameElement | undefined
7 | ;
8 |
9 | const injectMathCss = (contentWindow: Window) =>
10 | [ './katex/katex.min.css', './katex/texmath.css'].forEach(href =>
11 | contentWindow.document.head.appendChild( createLinkEl(href) )
12 | )
13 |
14 | const interceptClicks = (contentWindow: Window, e: MouseEvent) => {
15 | e.preventDefault()
16 | e.returnValue = false
17 | if (e.target && ('href' in e.target)) {
18 | const target = e.target as HTMLAnchorElement
19 | const { href, hash } = target
20 | const hrefStart = href.substr(0, 7)
21 | if (hrefStart === "file://" && hash) {
22 | // probably in-document navigation by hash
23 | // this currently does not work in dev mode since hrefStart === http://localhost:3000, but works in prod build
24 | // Note that you need to add ids to link to manually in markdown, like `# myTitle {#myId}`
25 | const element = contentWindow.document.querySelector(hash)
26 | if (element) {
27 | element.scrollIntoView()
28 | }
29 | } else if (hrefStart === "http://" || hrefStart === "https:/") {
30 | // external link
31 | if (window.ipcApi) {
32 | window.ipcApi.send.openLink(href)
33 | } else {
34 | window.open(href, '_blank')
35 | }
36 | }
37 | }
38 | return false
39 | }
40 |
41 | async function insertFrame(
42 | src: string
43 | , target: HTMLElement
44 | , noScriptsInFrame: boolean
45 | ): Promise {
46 | const frame = document.createElement('iframe')
47 | if (noScriptsInFrame) {
48 | // adding a sandbox attribute prevents script execution. but we still set the frame to have same-origin as parent,
49 | // in order to write the text to be previewed into the frame directly instead of the slower window.postMessage.
50 | // we need allow-modals for window.print()
51 | frame.setAttribute('sandbox', 'allow-same-origin allow-modals')
52 | }
53 | frame.setAttribute('src', src)
54 | frame.setAttribute('style', 'width: 100%; height: 100%;')
55 | target.appendChild(frame)
56 | return new Promise(resolve => {
57 | const contentWindow = frame.contentWindow
58 | contentWindow?.addEventListener('DOMContentLoaded', () => {
59 | injectMathCss(contentWindow)
60 | contentWindow.addEventListener('click', e => interceptClicks(contentWindow, e))
61 | return resolve(frame);
62 | })
63 | })
64 | }
65 |
66 | async function setupSingleFrame(target: HTMLElement) {
67 | if (!singleFrame) {
68 | singleFrame = await insertFrame('previewFrame.html', target, true)
69 | }
70 | if (frame1) {
71 | frame1.remove();
72 | frame1 = undefined
73 | }
74 | if (frame2) {
75 | frame2.remove();
76 | frame2 = undefined
77 | }
78 | return singleFrame
79 | }
80 |
81 | const setupSwapFrames = async (target: HTMLElement) => {
82 | if (!frame1 || !frame2) {
83 | frame1 = await insertFrame('previewFramePaged.html', target, false)
84 | frame2 = await insertFrame('previewFramePaged.html', target, false)
85 | }
86 | if (singleFrame) {
87 | singleFrame.remove();
88 | singleFrame = undefined
89 | }
90 | return [frame1, frame2] as const
91 | }
92 |
93 | const renderAndSwap = async (
94 | previewDiv: HTMLDivElement
95 | , renderFn: (w: Window) => Promise
96 | ): Promise => {
97 | const [f1, f2] = await setupSwapFrames(previewDiv)
98 | if (!f1.contentWindow) {
99 | throw Error('f1.contentWindow was null in renderAndSwap')
100 | }
101 | return renderFn(f1.contentWindow).then(() => {
102 | if (!f1.contentWindow || !f2.contentWindow) {
103 | throw Error(`contentWindow was null in renderAndSwap ${f1.contentWindow} ${f2.contentWindow}`)
104 | }
105 | f1.contentWindow?.scrollTo(0, f2.contentWindow.scrollY || 0)
106 | f1.style.top = '0'
107 | f2.style.top = '-1000vh'; // `display: none` would break pagedjs
108 | [frame2, frame1] = [frame1, frame2]
109 | return f1.contentWindow
110 | })
111 | }
112 |
113 |
114 | export const renderPlain = async (doc: Doc, previewDiv: HTMLDivElement): Promise => {
115 | const { contentWindow } = await setupSingleFrame(previewDiv);
116 | const content = [
117 | ''
118 | , doc.meta['header-includes']
119 | , doc.html
120 | ].join('')
121 | if (!contentWindow) {
122 | throw Error('contentWindow was undefined in renderPlain')
123 | }
124 | contentWindow.document.body.innerHTML = content
125 | return contentWindow
126 | }
127 |
128 | const createStyleEl = (text: string) => {
129 | const style = document.createElement('style')
130 | style.textContent = text
131 | return style
132 | }
133 |
134 | const createLinkEl = (href: string): HTMLLinkElement => {
135 | const link = document.createElement('link')
136 | link.setAttribute('rel', 'stylesheet')
137 | link.setAttribute('href', href)
138 | return link
139 | }
140 |
141 | const pagedjsStyleEl = createStyleEl(`
142 | @media screen {
143 | .pagedjs_pages {
144 | overflow: scroll;
145 | padding: 90px 50px 50px 50px;
146 | }
147 |
148 | .pagedjs_page {
149 | background-color: white;
150 | margin: 0 auto;
151 | margin-bottom: 50px;
152 | }
153 | }
154 | `);
155 |
156 | export const renderPaged = async (doc: Doc, previewDiv: HTMLDivElement): Promise => {
157 | return renderAndSwap(previewDiv, async frameWindow => {
158 |
159 | const cssStr = await getCss(doc)
160 | , metaHtml = doc.meta['header-includes']
161 | , content = doc.html
162 | , frameHead = frameWindow.document.head
163 | , frameBody = frameWindow.document.body
164 | ;
165 |
166 | // Unfortunately, pagedjs removes our style elements from
167 | // and appends its transformed styles – on each render. Thus we not only
168 | // need to clear the body, but also remove the styles from the head.
169 | frameHead.querySelectorAll('style').forEach(s => s.remove())
170 | frameBody.innerHTML = content
171 |
172 | // repopulate styles
173 | injectMathCss(frameWindow)
174 | frameHead.appendChild( createStyleEl(cssStr) )
175 | if (typeof metaHtml === 'string') {
176 | frameHead.insertAdjacentHTML('beforeend', metaHtml)
177 | }
178 | frameHead.appendChild(pagedjsStyleEl);
179 |
180 | (frameWindow as any).PagedConfig = {
181 | auto: false
182 | };
183 |
184 | await new Promise(resolve => {
185 | const s = document.createElement('script')
186 | s.src = './paged.polyfill.js'
187 | s.async = false
188 | s.addEventListener('load', resolve)
189 | frameBody.appendChild(s)
190 | })
191 |
192 | // wait for images etc. to have loaded
193 | await new Promise(resolve => {
194 | if (frameWindow.document.readyState === 'complete') {
195 | resolve(undefined)
196 | } else {
197 | frameWindow.addEventListener('load', resolve, {once: true})
198 | }
199 | })
200 |
201 | return (frameWindow as any).PagedPolyfill.preview()
202 | })
203 | }
204 |
--------------------------------------------------------------------------------
/src/renderPreview/scrolling.ts:
--------------------------------------------------------------------------------
1 | import { Editor } from 'codemirror'
2 | import { throttle } from './throttle'
3 |
4 | let editor: Editor
5 | , editorOffset = 0
6 | , scrollEditorFn: ((e: Event) => void) | undefined
7 | , scrollMap: number[] | undefined
8 | , reverseScrollMap: number[] | undefined
9 | , frameWindow: Window | undefined
10 | , scrollSyncTimeout: NodeJS.Timeout | undefined // shared between scrollPreview and scrollEditorFn
11 | , paginated = false
12 |
13 | export const printPreview = () => {
14 | if (frameWindow) {
15 | frameWindow.print()
16 | } else {
17 | alert('To print, please open a preview view first (e.g. View -> Show Split View)')
18 | }
19 | }
20 |
21 | window.ipcApi?.on.printFile(printPreview)
22 |
23 | export const initScroll = (contentWindow: Window, isPaginated: boolean) => {
24 | paginated = isPaginated
25 | resetScrollMaps();
26 | frameWindow = contentWindow
27 | frameWindow.addEventListener('resize', resetScrollMaps);
28 | if (scrollEditorFn) {
29 | frameWindow.addEventListener('scroll', scrollEditorFn);
30 | }
31 | }
32 |
33 | export const clearPreview = () => {
34 | frameWindow = undefined;
35 | }
36 |
37 | export const refreshEditor = () => {
38 | if (editor) {
39 | editor.refresh()
40 | }
41 | }
42 |
43 | export const scrollPreview = throttle(() => {
44 | if (frameWindow) {
45 | if (!scrollMap) {
46 | buildScrollMap(editor, editorOffset);
47 | }
48 | var scrollTop = Math.round(editor.getScrollInfo().top)
49 | , scrollTo = scrollMap![scrollTop]
50 | ;
51 | if (scrollTo !== undefined && frameWindow) {
52 | frameWindow.scrollTo(0, scrollTo);
53 | }
54 | }
55 | }, 30, scrollSyncTimeout);
56 |
57 | export const registerScrollEditor = (ed: Editor) => {
58 | editor = ed;
59 | const codeMirrorLines = document.querySelector('.CodeMirror-lines')
60 | editorOffset = codeMirrorLines
61 | ? parseInt(window.getComputedStyle(codeMirrorLines).getPropertyValue('padding-top'), 10)
62 | : 0
63 | var editorScrollFrame = document.querySelector('.CodeMirror-scroll')
64 |
65 | scrollEditorFn = throttle( (e: Event) => {
66 | e.preventDefault();
67 | if (frameWindow !== undefined) {
68 | if (!reverseScrollMap) {
69 | buildScrollMap(editor, editorOffset);
70 | }
71 | for (var i=frameWindow.scrollY; i>=0; i--) {
72 | if (reverseScrollMap![i] !== undefined) {
73 | editorScrollFrame?.scrollTo(0, reverseScrollMap![i])
74 | break;
75 | }
76 | }
77 | }
78 | }, 30, scrollSyncTimeout);
79 | }
80 |
81 | /*
82 | * Private functions
83 | */
84 |
85 | const buildScrollMap = (editor: Editor, editorOffset: number) => {
86 | if (!frameWindow) {
87 | console.error('frameWindow was undefined in buildScrollMap')
88 | return
89 | }
90 |
91 | // scrollMap maps source-editor-line-offsets to preview-element-offsets
92 | // (offset is the number of vertical pixels from the top)
93 | scrollMap = [];
94 | scrollMap[0] = 0;
95 | reverseScrollMap = [];
96 |
97 | // lineOffsets[i] holds top-offset of line i in the source editor
98 | var lineOffsets = [undefined as any as number, 0]
99 | , knownLineOffsets = []
100 | , offsetSum = 0
101 | ;
102 | editor.eachLine((line: any) => {
103 | offsetSum += line.height;
104 | lineOffsets.push(offsetSum);
105 | });
106 |
107 | var lastEl: Element | undefined = undefined
108 | , selector = paginated ? '.pagedjs_page_content [data-source-line]'
109 | : 'body > [data-source-line]'
110 | ;
111 | for (const el of frameWindow.document.querySelectorAll(selector)) {
112 | // for each element in the preview with source annotation
113 | var line = parseInt(el.getAttribute('data-source-line') || '1', 10)
114 | , lineOffset = lineOffsets[line]
115 | , elOffset = Math.round(el.getBoundingClientRect().top + frameWindow.scrollY);
116 | ;
117 | // fill in the target offset for the corresponding editor line
118 | if (scrollMap[lineOffset] === undefined) {
119 | // after pagination, we can have two elements in the preview
120 | // that have the same source line. We only use the first.
121 | scrollMap[lineOffset] = elOffset - editorOffset;
122 | knownLineOffsets.push(lineOffset)
123 | }
124 |
125 | lastEl = el;
126 | }
127 | if (lastEl) {
128 | scrollMap[offsetSum] = Math.ceil(lastEl.getBoundingClientRect().bottom + frameWindow.scrollY);
129 | knownLineOffsets.push(offsetSum);
130 | }
131 |
132 | if (knownLineOffsets[0] !== 0) {
133 | // make sure line zero is in the list, to guarantee a smooth scrolling start
134 | knownLineOffsets.unshift(0);
135 | }
136 |
137 | // fill in the blanks by interpolating between the two closest known line offsets
138 | var j = 0;
139 | for (var i=1; i < offsetSum; i++) {
140 | if (scrollMap[i] === undefined) {
141 | var a = knownLineOffsets[j]
142 | , b = knownLineOffsets[j + 1]
143 | ;
144 | scrollMap[i] = Math.round(( scrollMap[b]*(i - a) + scrollMap[a]*(b - i) ) / (b - a));
145 | } else {
146 | j++;
147 | }
148 | reverseScrollMap[ scrollMap[i] ] = i;
149 | }
150 | }
151 |
152 | const resetScrollMaps = () => {
153 | scrollMap = undefined;
154 | reverseScrollMap = undefined;
155 | }
156 |
--------------------------------------------------------------------------------
/src/renderPreview/templates/getCss.ts:
--------------------------------------------------------------------------------
1 | import { Doc } from '../../appState/AppState'
2 | import { parseToTemplate, interpolateTemplate, extractDefaultVars } from './templates'
3 | // eslint-disable-next-line import/no-webpack-loader-syntax
4 | import styles from '!!raw-loader!../../assets/preview.pandoc-styles.css'
5 |
6 | const template = parseToTemplate(styles)
7 |
8 | export const defaultVars = extractDefaultVars(template)
9 |
10 | let headerIncludes = ''
11 | let docType: string | undefined
12 | const headerIncludesCssFromDataDirFile = async (doc: Doc): Promise => {
13 | let newDocType = doc.meta.type
14 | if (typeof newDocType !== 'string') {
15 | newDocType = 'default'
16 | }
17 | if (newDocType !== docType && window.ipcApi) {
18 | // cache css
19 | docType = newDocType
20 | const meta = await window.ipcApi.readDataDirFile(docType + '.yaml')
21 | const field = meta?.['header-includes']
22 | headerIncludes = typeof field === 'string'
23 | ? stripSurroundingStyleTags(field)
24 | : ''
25 | }
26 | return headerIncludes
27 | }
28 |
29 | export const getCss = async (doc: Doc): Promise =>
30 | interpolateTemplate(template, doc.meta) + (await headerIncludesCssFromDataDirFile(doc))
31 |
32 | export const stripSurroundingStyleTags = (s: string): string =>
33 | s.startsWith('') ? s.slice(8, -9) : s
34 |
--------------------------------------------------------------------------------
/src/renderPreview/templates/templates.ts:
--------------------------------------------------------------------------------
1 | import { Meta } from '../../appState/AppState'
2 |
3 | type Template = Array;
4 |
5 | // This hacky parser only supports one syntax: `foobar $if(X)$$X$$else$Y$endif$`
6 | // which is converted to `["foobar ", {varName: "X", default: "Y"}, ... ]`
7 | export const parseToTemplate = (str: string): Template => {
8 | const arr = str.split(/\$if\([\w\-.]+\)\$(\$[\w\-.]+)\$\$else\$([^$]+)\$endif\$/g);
9 | const template: Template = [];
10 | for (let i=0; i
26 | template.map(t => {
27 | if (typeof t === 'string') {
28 | return t;
29 | } else {
30 | const v = variables[t.varName]
31 | return typeof v === 'string' ? v : t.default
32 | }
33 | }).join('')
34 |
35 | export const extractDefaultVars = (template: Template): Record =>
36 | template.reduce((acc, t) => {
37 | if (typeof t === 'object' && t.default != null) {
38 | acc[t.varName] = t.default;
39 | }
40 | return acc;
41 | }, {} as Record)
42 |
--------------------------------------------------------------------------------
/src/renderPreview/throttle.ts:
--------------------------------------------------------------------------------
1 | export const throttle = function(fn: (...args: any[]) => T, wait: number, timeout?: NodeJS.Timeout) {
2 | // adapted from https://github.com/jashkenas/underscore/blob/master/underscore.js#L842
3 | var context: any;
4 | var args: any;
5 | var result: T;
6 | var previous = 0;
7 |
8 | var later = function() {
9 | previous = Date.now();
10 | timeout = undefined;
11 | result = fn.apply(context, args);
12 | if (!timeout) context = args = null;
13 | };
14 |
15 | var throttled = function(this: any) {
16 | var now = Date.now();
17 | var remaining = wait - (now - previous);
18 | context = this;
19 | args = arguments;
20 | if (remaining <= 0 || remaining > wait) {
21 | if (timeout) {
22 | clearTimeout(timeout);
23 | timeout = undefined;
24 | }
25 | previous = now;
26 | result = fn.apply(context, args);
27 | if (!timeout) context = args = null;
28 | } else if (!timeout) {
29 | timeout = setTimeout(later, remaining);
30 | }
31 | return result;
32 | };
33 |
34 | return throttled;
35 | };
36 |
--------------------------------------------------------------------------------
/src/result.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * `Result` (sometimes known as `Either`) is a generic type that is either
3 | * something of type `T` (in case of success), or of type `AppError` (in case of an error or failure).
4 | * see e.g. https://blog.logrocket.com/pattern-matching-and-type-safety-in-typescript-1da1231a2e34/
5 | */
6 | export type Result = AppError | T
7 |
8 | export interface AppError {
9 | /** short English debug string */
10 | error: string;
11 | }
12 |
--------------------------------------------------------------------------------
/src/website.md:
--------------------------------------------------------------------------------
1 | ## Distraction-free writing environment
2 |
3 | Focus on the content of your text. No fiddling around in menus or getting distracted by buttons. No selecting fonts and layouting before your text is actually written. Instead, you can write text in [Markdown](https://commonmark.org/help/) – a convention on how to write plain text files. Basically, it's like you would write an Email.
4 |
5 | 
6 |
7 | PanWriter highlights a few things, like headings, for you. Other than that, it just gets out of the way, so you can focus on your text.
8 |
9 |
10 | ## Beautifully simple GUI – all the power of pandoc underneath
11 |
12 | [Pandoc](https://pandoc.org) is a well-known and treasured tool among hackers.[^1] It can convert between all sorts of document formats – from and to Markdown, HTML webpages, MS Office Word `.docx`, EPUB eBooks, LaTeX for academic publishing, and many more. You can even generate PDF and PowerPoint slide-shows, as well as export to InDesign ICML. But until now, users had to master the command-line, before they could tap into the power of pandoc. No longer!
13 |
14 | But if you eventually need to automate your workflow, it's easy to start using pandoc on the command-line, write [pandoc scripts](http://pandoc.org/lua-filters.html) that transform your documents in highly customizable ways, or integrate with web services or other applications – all while continuing to write in PanWriter.
15 |
16 | [^1]: [Hacker-News](https://news.ycombinator.com/item?id=17855104)
17 |
18 |
19 | ## Import/Export: Word, HTML and plenty of other formats
20 |
21 | Simply drag a `.docx`-file onto the PanWriter app: it will be converted to Markdown and opened so you can edit the text in the distraction-free writing environment of PanWriter. When you're done, use `File -> Export` to convert the text back to .docx, or any other of pandoc's output formats.
22 |
23 | 
24 |
25 |
26 | ## Paginated preview for print and PDF
27 |
28 | Once you've written a first draft of your text, you might want to see how it would look like in print. Instead of exporting, you can simply open the preview pane. A unique feature among markdown editors is that PanWriter actually lays out your text on pages in the preview – suddenly your text becomes tangible, and you can see where pagebreaks end up.
29 |
30 | It's not a good idea to start layouting before you've finished the hard work of the first few drafts. But once you're there, you can apply a pre-defined layout template – or tune the layout yourself by adding a few lines of [CSS](https://developer.mozilla.org/docs/Glossary/CSS), the layouting language of the web. Changes are reflected live in the preview.
31 |
32 | 
33 |
34 |
35 | ## Free and Open Source
36 |
37 | PanWriter is free and open source software. Visit [PanWriter on GitHub](https://github.com/mb21/panwriter#panwriter) and please open an issue if you have a question or would like to give feedback.
38 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es2019",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "noFallthroughCasesInSwitch": true,
16 | "module": "esnext",
17 | "moduleResolution": "node",
18 | "resolveJsonModule": true,
19 | "isolatedModules": true,
20 | "noEmit": true,
21 | "jsx": "react-jsx"
22 | },
23 | "include": [
24 | "src"
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------
setShowPicker(false)} />
33 | onChange(c.hex)}
38 | />
39 |
40 | : null }
41 |
42 | )
43 | }
44 |
--------------------------------------------------------------------------------
/src/components/Editor/Editor.css:
--------------------------------------------------------------------------------
1 | @import './codemirror.css'; /* https://github.com/codemirror/CodeMirror/blob/master/lib/codemirror.css */
2 |
3 | .CodeMirror {
4 | font-family: var(--mono-font);
5 | color: var(--font-color);
6 | font-size: 17px;
7 | line-height: 1.8em;
8 | }
9 | div.CodeMirror {
10 | height: 100vh;
11 | background-color: var(--background-color);
12 | }
13 |
14 | /* Make editor resize to fit its content
15 | * see https://codemirror.net/doc/manual.html#styling
16 | * and https://codemirror.net/demo/resize.html
17 | */
18 | .CodeMirror-scroll {
19 | overflow-x: auto;
20 | overflow-y: hidden;
21 | }
22 | .CodeMirror-lines { /* div holding all the text lines */
23 | padding: 60px 50px 50px 50px;
24 | max-width: 40em;
25 | margin: 0 auto;
26 | }
27 |
28 | .CodeMirror-sizer {
29 | overflow: hidden;
30 | }
31 |
32 | .CodeMirror-vscrollbar:focus {
33 | outline: 0;
34 | }
35 |
36 | .CodeMirror-dialog {
37 | font-family: var(--system-font);
38 | font-size: 13px;
39 | width: 100%;
40 | padding: 2px 50px;
41 | box-sizing: border-box;
42 | background: var(--overlay-transparent-background-color);
43 | z-index: 10;
44 | position: fixed;
45 | bottom: 0;
46 | }
47 | .CodeMirror-search-field {
48 | font-size: 13px;
49 | width: 200px !important;
50 | margin-left: 15px;
51 | }
52 | .CodeMirror-search-hint {
53 | display: none;
54 | }
55 |
56 | .CodeMirror div.CodeMirror-cursor {
57 | border-left: 1px solid var(--cursor-color);
58 | }
59 |
60 | .CodeMirror div.CodeMirror-selected {
61 | background: var(--input-border-color);
62 | }
63 |
64 | .cm-s-paper .cm-keyword { color: var(--highlight-font-color); }
65 | .cm-s-paper .cm-atom { color: var(--highlight-font-color); }
66 | .cm-s-paper .cm-variable { color: var(--font-color); }
67 | .cm-s-paper .cm-variable-2 { color: var(--font-color); }
68 | .cm-s-paper .cm-variable-3 { color: var(--font-color); }
69 | .cm-s-paper .cm-property { color: var(--font-color); }
70 | .cm-s-paper .cm-operator { color: var(--font-color); }
71 | .cm-s-paper .cm-comment { color: var(--highlight-font-color); }
72 | .cm-s-paper .cm-meta { color: var(--highlight-font-color); }
73 | .cm-s-paper .cm-qualifier { color: var(--highlight-font-color); }
74 | .cm-s-paper .cm-builtin { color: var(--highlight-font-color); }
75 | .cm-s-paper .cm-quote { color: var(--highlight-font-color); }
76 | .cm-s-paper .cm-hr { color: var(--highlight-font-color); }
77 | .cm-s-paper .cm-def { color: var(--highlight-font-color); }
78 | .cm-s-paper .cm-image-marker { color: var(--highlight-font-color); }
79 |
80 | /* HTML stuff
81 | .cm-s-paper .cm-bracket { color: var(--highlight-font-color); }
82 | .cm-s-paper .cm-tag { color: var(--highlight-font-color); }
83 | .cm-s-paper .cm-attribute { color: var(--highlight-font-color); }
84 | .cm-s-paper .cm-string { color: var(--highlight-font-color); }
85 | .cm-s-paper .cm-string-2 { color: var(--highlight-font-color); }
86 | */
87 |
88 | .cm-s-paper .cm-link {
89 | color: var(--highlight-font-color);
90 | text-decoration: none;
91 | }
92 | .cm-s-paper .cm-url {
93 | color: var(--highlight-font-color);
94 | text-decoration: underline;
95 | }
96 |
--------------------------------------------------------------------------------
/src/components/Editor/Editor.tsx:
--------------------------------------------------------------------------------
1 | import { countColumn, Editor as CMEditor } from 'codemirror'
2 | import 'codemirror/addon/dialog/dialog'
3 | import 'codemirror/addon/search/search'
4 | import 'codemirror/addon/search/searchcursor'
5 | import 'codemirror/addon/search/jump-to-line'
6 | import 'codemirror/addon/mode/overlay'
7 | import 'codemirror/mode/markdown/markdown'
8 | import 'codemirror/mode/yaml/yaml'
9 | import 'codemirror/mode/yaml-frontmatter/yaml-frontmatter'
10 | import 'codemirror/addon/edit/continuelist'
11 | import { Controlled as CodeMirror } from 'react-codemirror2'
12 |
13 | import { AppState } from '../../appState/AppState'
14 | import { Action } from '../../appState/Action'
15 | import { registerScrollEditor, scrollPreview } from '../../renderPreview/scrolling'
16 |
17 | import './Editor.css'
18 |
19 | interface Props {
20 | state: AppState;
21 | dispatch: React.Dispatch
77 |
86 |
100 | )
101 | }
102 |
103 | const renderOption = (o: string) =>
104 |
105 |
106 | const metaKvs: Kv[] = [{
107 | name: 'title'
108 | , label: 'Title'
109 | , type: 'string'
110 | }, {
111 | name: 'author'
112 | , label: 'Author'
113 | , type: 'string'
114 | }, {
115 | name: 'date'
116 | , label: 'Date'
117 | , type: 'string'
118 | }, {
119 | name: 'lang'
120 | , label: 'Language'
121 | , type: 'string'
122 | , placeholder: 'en'
123 | }]
124 |
125 | const layoutKvs: Kv[] = [{
126 | name: 'mainfont'
127 | , label: 'Font'
128 | , type: 'select'
129 | , options: [
130 | ''
131 | , 'Georgia, serif'
132 | , 'Helvetica, Arial, sans-serif'
133 | , 'Palatino, Palatino Linotype, serif'
134 | ]
135 | }, {
136 | name: 'fontsize'
137 | , label: 'Font size'
138 | , type: 'number'
139 | , step: 1
140 | , onLoad: s => s ? parseInt(s, 10).toString() : ''
141 | , onDone: s => s + 'px'
142 | }, {
143 | name: 'linestretch'
144 | , label: 'Line height'
145 | , type: 'number'
146 | , step: 0.1
147 | }, {
148 | name: 'fontcolor'
149 | , label: 'Font color'
150 | , type: 'color'
151 | }, {
152 | name: 'linkcolor'
153 | , label: 'Link color'
154 | , type: 'color'
155 | }, {
156 | name: 'monobackgroundcolor'
157 | , label: 'Code bg'
158 | , type: 'color'
159 | }, {
160 | name: 'backgroundcolor'
161 | , label: 'Background'
162 | , type: 'color'
163 | }, {
164 | name: 'header-includes'
165 | , label: 'Include CSS'
166 | , type: 'textarea'
167 | , onLoad: stripSurroundingStyleTags
168 | , onDone: s => ``
169 | , placeholder: `blockquote {
170 | font-style: italic;
171 | }`
172 | }]
173 |
--------------------------------------------------------------------------------
/src/components/MetaEditor/back.svg:
--------------------------------------------------------------------------------
1 |
15 |
--------------------------------------------------------------------------------
/src/components/ModalChooseFormat/ModalChooseFormat.module.css:
--------------------------------------------------------------------------------
1 | .root {
2 | display: flex;
3 | flex-direction: column;
4 | justify-content: center;
5 | background-color: var(--bg);
6 | height: 100vh;
7 |
8 | --bg: rgba(230, 230, 230);
9 | }
10 | @media (prefers-color-scheme: dark) {
11 | .root {
12 | --bg: rgb(37,37,37);
13 | }
14 | }
15 |
16 | .root select, .root button {
17 | margin: 1em;
18 | }
19 |
20 | .text {
21 | margin: 1em;
22 | text-align: center;
23 | font-weight: bold;
24 | font-size: 15px;
25 | font-family: var(--system-font);
26 | color: var(--font-color);
27 | }
28 |
29 | .tick {
30 | display: block;
31 | margin: 0 auto;
32 | }
33 |
--------------------------------------------------------------------------------
/src/components/ModalChooseFormat/ModalChooseFormat.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react'
2 | import { Button } from '../Button/Button'
3 |
4 | import tick from './tick.svg'
5 | import styles from './ModalChooseFormat.module.css'
6 |
7 | export const ModalChooseFormat = () => {
8 | const [format, setFormat] = useState(getPreviouslyUsedFormat)
9 | const [success, setSuccess] = useState(false)
10 |
11 | const submit = async (format: string) => {
12 | if (window.ipcApi) {
13 | const success = await window.ipcApi.chooseFormat(format)
14 | if (success) {
15 | setSuccess(true)
16 | setTimeout(() => window.close(), 1500)
17 | window.localStorage.setItem('modalChooseFormat', JSON.stringify({ format }))
18 | } else {
19 | window.close()
20 | }
21 | }
22 | }
23 |
24 | const cancel = () => {
25 | window.ipcApi?.chooseFormat('closingWindow')
26 | window.close()
27 | }
28 |
29 | useEffect(() => {
30 | const keyHandler = (e: KeyboardEvent) => {
31 | if (e.key === 'Enter') {
32 | submit(format)
33 | } else if (e.key === 'Escape') {
34 | cancel()
35 | }
36 | }
37 | document.body.addEventListener('keydown', keyHandler)
38 | return () => document.body.removeEventListener('keydown', keyHandler)
39 | }, [format])
40 |
41 | return (
42 |
87 |
99 | Document metadata
88 |
89 | { metaKvs.map(renderKv) }
90 |
91 | Layout
92 |93 | Previewing custom colors in dark mode is not supported. 94 |
95 |
96 | { layoutKvs.map(renderKv) }
97 |
98 |
43 | {success
44 | ? 
45 | : <>
46 |
56 | )
57 | }
58 |
59 | const getPreviouslyUsedFormat = (): string => {
60 | try {
61 | const prev = window.localStorage.getItem('modalChooseFormat')
62 | if (prev) {
63 | return JSON.parse(prev).format
64 | }
65 | } catch (e) {
66 | }
67 | return 'html'
68 | }
69 |
70 | // see also list of standalone output formats in export.ts
71 | const formats = [
72 | { name: 'HTML (html)', value: 'html' }
73 | , { name: 'LaTeX (latex)', value: 'latex' }
74 | , { name: 'ConTeXt (context)', value: 'context' }
75 | , { name: 'InDesign ICML (icml)', value: 'icml' }
76 | , { name: 'RTF (rtf)', value: 'rtf' }
77 | , { name: 'DocBook XML (docbook)', value: 'docbook' }
78 | , { name: 'JATS XML (jats)', value: 'jats' }
79 | , { name: 'Text Encoding Initiative (tei)', value: 'tei' }
80 | , { name: 'OPML (opml)', value: 'opml' }
81 | , { name: 'FictionBook2 (fb2)', value: 'fb2' }
82 | , { name: 'groff (ms)', value: 'ms' }
83 | , { name: 'GNU Texinfo (texinfo)', value: 'texinfo' }
84 | , { name: 'Textile (textile)', value: 'textile' }
85 | , { name: 'Jira/Confluence (jira)', value: 'jira' }
86 | , { name: 'DokuWiki (dokuwiki)', value: 'dokuwiki' }
87 | , { name: 'MediaWiki (mediawiki)', value: 'mediawiki' }
88 | , { name: 'Muse (muse)', value: 'muse' }
89 | , { name: 'ZimWiki (zimwiki)', value: 'zimwiki' }
90 | , { name: 'AsciiDoc (asciidoc)', value: 'asciidoc' }
91 | , { name: 'Emacs Org mode (org)', value: 'org' }
92 | , { name: 'reStructuredText (rst)', value: 'rst' }
93 | , { name: 'Markdown (markdown)', value: 'markdown' }
94 | , { name: 'Plain text (txt)', value: 'txt' }
95 | ]
96 |
--------------------------------------------------------------------------------
/src/components/ModalChooseFormat/tick.svg:
--------------------------------------------------------------------------------
1 |
14 |
--------------------------------------------------------------------------------
/src/components/Preview/Preview.css:
--------------------------------------------------------------------------------
1 | .preview {
2 | overflow: hidden;
3 | position: relative;
4 | border-left: 1px solid var(--separator-color);
5 | }
6 | .preview.paginated > .previewDiv {
7 | background-color: var(--underlay-background-color);
8 | }
9 | .preview iframe {
10 | border: 0;
11 | position: absolute;
12 | }
13 | .preview > button {
14 | width: 36px;
15 | height: 36px;
16 | border-radius: 18px;
17 | box-shadow: 0 1px #0000000a;
18 | transition: opacity 0.2s ease-out;
19 | opacity: 0;
20 | }
21 | .preview > button:active {
22 | background: var(--button-active-color);
23 | }
24 | .preview:hover > button {
25 | transition: opacity 0.12s ease-in;
26 | opacity: 1;
27 | }
28 | .zoomBtn, .exportBtn {
29 | position: absolute;
30 | bottom: 10px;
31 | right: 10px;
32 | font-size: 27px;
33 | color: var(--filename-font-color);
34 | background: var(--background-color);
35 | border: 0;
36 | cursor: pointer;
37 | line-height: 1;
38 | display: block;
39 | }
40 | .zoomIn {
41 | bottom: 55px;
42 | }
43 | .exportBtn {
44 | bottom: 100px;
45 | font-family: sans-serif;
46 | font-size: 20px;
47 | }
48 |
--------------------------------------------------------------------------------
/src/components/Preview/Preview.tsx:
--------------------------------------------------------------------------------
1 | import { forwardRef, useState } from 'react'
2 | import { printPreview } from '../../renderPreview/scrolling'
3 |
4 | import './Preview.css'
5 |
6 | interface Props {
7 | paginated: boolean;
8 | }
9 |
10 | export const Preview = forwardRef((props: Props, ref: React.RefTo which format do you want to export to clipboard?
47 | 51 | 52 | 53 | 54 | } 55 |
15 |
25 |
26 |
27 |
28 |
29 | )
30 | })
31 |
--------------------------------------------------------------------------------
/src/components/Toolbar/Toolbar.css:
--------------------------------------------------------------------------------
1 | .toolbar {
2 | position: fixed;
3 | z-index: 99999;
4 | height: 40px;
5 | width: 100vw;
6 | }
7 |
8 | .toolbar > .toolbararea {
9 | font-family: var(--system-font);
10 | font-size: 13px;
11 | grid-template-rows: 38px;
12 | overflow: hidden;
13 | background: var(--overlay-background-color);
14 | border-bottom: 1px solid var(--separator-color);
15 | transition: opacity 0.2s ease-out;
16 | opacity: 0;
17 | display: grid;
18 | grid-template-columns: max-content minmax(max-content, 1fr) auto minmax(max-content, 1fr);
19 | grid-column-gap: 5px;
20 | align-items: center;
21 | }
22 | .toolbar:hover > .toolbararea {
23 | -webkit-app-region: drag;
24 | transition: opacity 0.12s ease-in;
25 | opacity: 1;
26 | }
27 |
28 | /* Place an invisible block where the macOS .windowbuttons are going to be
29 | * to push the other stuff to the right away on very small windows */
30 | ._macOS .toolbar > .toolbararea::before {
31 | display: block;
32 | width: 70px;
33 | content: ' ';
34 | }
35 |
36 | .toolbar .windowbuttons {
37 | position: fixed;
38 | top: 5px;
39 | left: 8px;
40 | display: none;
41 | }
42 | ._macOS .windowbuttons {
43 | display: flex;
44 | margin-top: 7px;
45 | }
46 | ._macOS .windowbuttons > div {
47 | -webkit-app-region: no-drag;
48 | cursor: default;
49 | box-sizing: border-box;
50 | width: 12px;
51 | height: 12px;
52 | border-width: 1px;
53 | border-style: solid;
54 | border-radius: 50%;
55 | margin-top: 1px;
56 | margin-left: 5px;
57 | margin-right: 4px;
58 | line-height: 0;
59 | }
60 | ._macOS .windowbuttons > div:nth-child(1) {
61 | background-color: rgb(255, 95, 87);
62 | border-color: rgb(226, 70, 63);
63 | }
64 | ._macOS .windowbuttons > div:nth-child(2) {
65 | background-color: rgb(255, 189, 46);
66 | border-color: rgb(225, 161, 22);
67 | }
68 | ._macOS .windowbuttons > div:nth-child(3) {
69 | background-color: rgb(40, 201, 64);
70 | border-color: rgb(18, 172, 40);
71 | }
72 | ._macOS .windowbuttons img {
73 | display: none;
74 | }
75 | ._macOS .windowbuttons:hover img {
76 | display: inline;
77 | }
78 |
79 | .toolbar img {
80 | -webkit-user-drag: none;
81 | }
82 |
83 | .toolbar .filename {
84 | color: var(--filename-font-color);
85 | grid-column-start: 3;
86 | max-height: 30px;
87 | cursor: default;
88 | }
89 |
90 | .toolbar .edited {
91 | color: var(--edited-font-color);
92 | }
93 |
94 | .toolbar .btns {
95 | margin-left: auto;
96 | }
97 | .toolbar .btns > * {
98 | display: inline-block;
99 | }
100 |
101 | .toolbar button {
102 | -webkit-app-region: no-drag;
103 | cursor: default;
104 | height: 24px;
105 | background: none;
106 | font-size: 13px;
107 | line-height: 5px;
108 | margin-right: 5px;
109 | border: 0;
110 | border-radius: 5px;
111 | padding: 1px 5px;
112 | }
113 | .toolbar button:hover,
114 | .toolbar button:active,
115 | .toolbar button.active {
116 | background: var(--button-active-color);
117 | }
118 | .toolbar button:active:hover,
119 | .toolbar button.active:hover {
120 | background: var(--button-active-onhover-color);
121 | }
122 |
123 | .toolbar button img {
124 | height: 20px;
125 | }
126 |
127 | .toolbar .leftbtns {
128 | margin-left: 5px;
129 | }
130 |
131 | .toolbar .btngroup button:not(:first-child) {
132 | border-top-left-radius: 0;
133 | border-bottom-left-radius: 0;
134 | border-left: 0;
135 | }
136 | .toolbar .btngroup button:not(:last-child) {
137 | border-top-right-radius: 0;
138 | border-bottom-right-radius: 0;
139 | margin-right: 0;
140 | }
141 |
--------------------------------------------------------------------------------
/src/components/Toolbar/Toolbar.tsx:
--------------------------------------------------------------------------------
1 | import { AppState, viewSplits } from '../../appState/AppState'
2 | import { Action } from '../../appState/Action'
3 | import { Button } from '../Button/Button'
4 |
5 | import macCloseIcon from './macOS_window_close.svg'
6 | import macMaximizeIcon from './macOS_window_maximize.svg'
7 | import macMinimizeIcon from './macOS_window_minimize.svg'
8 | // icons are based on https://material.io/tools/icons/
9 | import metaEditor from './metaEditor.svg'
10 | import notes from './notes.svg'
11 | import page from './page.svg'
12 | import verticalSplit from './vertical_split.svg'
13 | import visibility from './visibility.svg'
14 | import './Toolbar.css'
15 |
16 | interface Props {
17 | state: AppState;
18 | dispatch: React.Dispatch
27 |
74 | )
75 | }
76 |
77 | const macIcons = {
78 | close: macCloseIcon
79 | , maximize: macMaximizeIcon
80 | , minimize: macMinimizeIcon
81 | }
82 |
83 | const splitIcons = {
84 | onlyEditor: notes
85 | , split: verticalSplit
86 | , onlyPreview: visibility
87 | }
88 |
--------------------------------------------------------------------------------
/src/components/Toolbar/macOS_window_close.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/components/Toolbar/macOS_window_maximize.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/components/Toolbar/macOS_window_minimize.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/components/Toolbar/metaEditor.svg:
--------------------------------------------------------------------------------
1 |
15 |
--------------------------------------------------------------------------------
/src/components/Toolbar/notes.svg:
--------------------------------------------------------------------------------
1 |
15 |
--------------------------------------------------------------------------------
/src/components/Toolbar/page.svg:
--------------------------------------------------------------------------------
1 |
14 |
--------------------------------------------------------------------------------
/src/components/Toolbar/vertical_split.svg:
--------------------------------------------------------------------------------
1 |
15 |
--------------------------------------------------------------------------------
/src/components/Toolbar/visibility.svg:
--------------------------------------------------------------------------------
1 |
15 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import { App } from './components/App/App'
4 | import { ModalChooseFormat } from './components/ModalChooseFormat/ModalChooseFormat'
5 |
6 | window.ipcApi?.on.sendPlatform(platform => {
7 | if (platform === 'darwin') {
8 | document.body.classList.add('_macOS')
9 | }
10 | })
11 |
12 | const modal = new URLSearchParams(window.location.search).get('modal')
13 |
14 | ReactDOM.render(
15 |
28 |
73 |
29 | { (['close', 'minimize', 'maximize'] as const).map(action =>
30 |
34 | window.ipcApi?.send[action]()}>
31 | 
32 |
)}
33 |
35 | { split !== 'onlyPreview'
36 | ?
42 | : null }
43 |
44 |
45 | {fileName}
46 | { fileDirty
47 | ? — Edited
48 | : null }
49 |
50 |
51 |
72 |
52 | { split !== 'onlyEditor'
53 | ?
59 | : null }
60 |
61 |
62 | { viewSplits.map(s =>
63 | )}
70 |
71 |