19 |
25 | onChange({ value: e.currentTarget.value, unit: value.unit })
26 | }
27 | />
28 |
39 | )
40 | }
41 |
42 | export default TyXLengthEditor
43 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import react from "@vitejs/plugin-react"
2 | import { defineConfig } from "vite"
3 | import { viteStaticCopy } from "vite-plugin-static-copy"
4 |
5 | // @ts-expect-error process is a nodejs global
6 | const host = process.env.TAURI_DEV_HOST
7 |
8 | // https://vitejs.dev/config/
9 | export default defineConfig(async () => ({
10 | plugins: [
11 | react(),
12 | viteStaticCopy({
13 | targets: [
14 | { src: "node_modules/mathlive/fonts/*", dest: "fonts" },
15 | {
16 | src: "node_modules/mathlive/mathlive-fonts.css",
17 | dest: ".",
18 | },
19 | ],
20 | }),
21 | ],
22 |
23 | // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
24 | //
25 | // 1. prevent vite from obscuring rust errors
26 | clearScreen: false,
27 | // 2. tauri expects a fixed port, fail if that port is not available
28 | server: {
29 | port: 1420,
30 | strictPort: true,
31 | host: host || false,
32 | hmr: host
33 | ? {
34 | protocol: "ws",
35 | host,
36 | port: 1421,
37 | }
38 | : undefined,
39 | watch: {
40 | // 3. tell vite to ignore watching `src-tauri`
41 | ignored: ["**/src-tauri/**"],
42 | },
43 | },
44 | }))
45 |
--------------------------------------------------------------------------------
/src/components/plugins/ImagePlugin.tsx:
--------------------------------------------------------------------------------
1 | import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
2 | import { $insertNodes, COMMAND_PRIORITY_EDITOR } from "lexical"
3 | import { useEffect, useState } from "react"
4 | import { insertImage, readImage } from "../../backend"
5 | import { getCurrentDocument } from "../../utilities"
6 | import { $createImageNode, INSERT_IMAGE_COMMAND } from "./image"
7 |
8 | export const ImageEditor = ({ src }: { src: string }) => {
9 | const [contents, setContents] = useState
31 |
53 |
55 |
56 | )
57 | }
58 |
59 | export default MathInlineShortcutEditor
60 |
--------------------------------------------------------------------------------
/src/functions.ts:
--------------------------------------------------------------------------------
1 | import { FunctionDefinition } from "./models"
2 | import { getSettings } from "./settings"
3 | import { getCurrentDocument } from "./utilities"
4 |
5 | export const FUNCTIONS: Record
79 |
89 |
85 | {openDocuments.length > 0 ?
87 |
29 | {successMessage}
30 |
31 | ) : (
32 | successMessage
33 | ),
34 | })
35 | }
36 |
37 | /** Shows a failure notification with the given message. */
38 | export const showFailureMessage = (
39 | failureMessage: string,
40 | options?: MessageOptions,
41 | ) => {
42 | notifications.show({
43 | title: options?.title ?? i18n.t("failed") + "!",
44 | color: "red",
45 | icon:
48 | {failureMessage}
49 |
50 | ) : (
51 | failureMessage
52 | ),
53 | })
54 | }
55 |
56 | /** Shows a modal to confirm a possibly dangerous action. */
57 | export const showConfirmModal = (message: string, onConfirm: () => void) => {
58 | modals.openConfirmModal({
59 | title: i18n.t("pleaseConfirmYourAction"),
60 | children: message,
61 | onConfirm,
62 | labels: { confirm: i18n.t("confirm"), cancel: i18n.t("cancel") },
63 | })
64 | }
65 |
66 | export const getCurrentDocument = () => {
67 | const openDocuments = getLocalStorage
64 |
74 | {recording ? (
75 |
98 |
100 |
101 | )
102 | }
103 |
104 | export default KeyboardShortcutEditor
105 |
--------------------------------------------------------------------------------
/src-tauri/gen/android/gradlew.bat:
--------------------------------------------------------------------------------
1 | @rem
2 | @rem Copyright 2015 the original author or authors.
3 | @rem
4 | @rem Licensed under the Apache License, Version 2.0 (the "License");
5 | @rem you may not use this file except in compliance with the License.
6 | @rem You may obtain a copy of the License at
7 | @rem
8 | @rem https://www.apache.org/licenses/LICENSE-2.0
9 | @rem
10 | @rem Unless required by applicable law or agreed to in writing, software
11 | @rem distributed under the License is distributed on an "AS IS" BASIS,
12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | @rem See the License for the specific language governing permissions and
14 | @rem limitations under the License.
15 | @rem
16 |
17 | @if "%DEBUG%" == "" @echo off
18 | @rem ##########################################################################
19 | @rem
20 | @rem Gradle startup script for Windows
21 | @rem
22 | @rem ##########################################################################
23 |
24 | @rem Set local scope for the variables with windows NT shell
25 | if "%OS%"=="Windows_NT" setlocal
26 |
27 | set DIRNAME=%~dp0
28 | if "%DIRNAME%" == "" set DIRNAME=.
29 | set APP_BASE_NAME=%~n0
30 | set APP_HOME=%DIRNAME%
31 |
32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter.
33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
34 |
35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
37 |
38 | @rem Find java.exe
39 | if defined JAVA_HOME goto findJavaFromJavaHome
40 |
41 | set JAVA_EXE=java.exe
42 | %JAVA_EXE% -version >NUL 2>&1
43 | if "%ERRORLEVEL%" == "0" goto execute
44 |
45 | echo.
46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
47 | echo.
48 | echo Please set the JAVA_HOME variable in your environment to match the
49 | echo location of your Java installation.
50 |
51 | goto fail
52 |
53 | :findJavaFromJavaHome
54 | set JAVA_HOME=%JAVA_HOME:"=%
55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe
56 |
57 | if exist "%JAVA_EXE%" goto execute
58 |
59 | echo.
60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
61 | echo.
62 | echo Please set the JAVA_HOME variable in your environment to match the
63 | echo location of your Java installation.
64 |
65 | goto fail
66 |
67 | :execute
68 | @rem Setup the command line
69 |
70 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
71 |
72 |
73 | @rem Execute Gradle
74 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
75 |
76 | :end
77 | @rem End local scope for the variables with windows NT shell
78 | if "%ERRORLEVEL%"=="0" goto mainEnd
79 |
80 | :fail
81 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
82 | rem the _cmd.exe /c_ return code!
83 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
84 | exit /b 1
85 |
86 | :mainEnd
87 | if "%OS%"=="Windows_NT" endlocal
88 |
89 | :omega
90 |
--------------------------------------------------------------------------------
/src/components/UpdateChecker.tsx:
--------------------------------------------------------------------------------
1 | import { Alert, Button, Progress } from "@mantine/core"
2 | import { IconDownload, IconNews, IconRefresh } from "@tabler/icons-react"
3 | import { useEffect, useState } from "react"
4 | import { useTranslation } from "react-i18next"
5 | import { checkForUpdates, relaunch } from "../backend"
6 | import { Update } from "../backend/base"
7 |
8 | declare global {
9 | interface Window {
10 | checkedForUpdate?: boolean
11 | currentUpdate?: Update | null
12 | }
13 | }
14 |
15 | const UpdateChecker = () => {
16 | const { t } = useTranslation()
17 | const [update, setUpdate] = useStateTyX {update.version} is now available!
83 |{update.body}
84 | {contentLength && ( 85 | 92 | )} 93 | } 98 | onClick={startUpdate} 99 | > 100 | Update TyX 101 | 102 | 103 | ) 104 | } 105 | 106 | export default UpdateChecker 107 | -------------------------------------------------------------------------------- /src/models/document.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file TypeScript models used for TyX documents. 3 | */ 4 | 5 | import { z } from "zod/v4" 6 | import { TyXNode } from "./content" 7 | import { FunctionDefinition } from "./functions" 8 | import { TyXLength } from "./values" 9 | 10 | export const TyXCompilationOptions = z 11 | .object({ 12 | root: z 13 | .string() 14 | .optional() 15 | .describe("The root directory for the Typst compiler."), 16 | fontPaths: z 17 | .array(z.string()) 18 | .optional() 19 | .describe("Additional font paths for the Typst compiler."), 20 | }) 21 | .describe("Compilation options passed to the Typst compiler.") 22 | .meta({ id: "TyXCompilationOptions" }) 23 | export type TyXCompilationOptions = z.infer
2 | TyX
3 |
4 | 
5 | 
6 | 
7 | 
8 |
9 |
10 |
11 | 12 | A LyX-like experience rewritten for Typst and the modern era. 13 |
14 | 15 | > [!WARNING] 16 | > TyX is currently in early development and breaking changes 17 | > are introduced frequently. 18 | 19 | ## Getting Started 20 | 21 | Check out the [web editor](https://app.tyx-editor.com) or [download TyX](https://tyx-editor.com)! 22 | 23 | ## Features 24 | 25 | ### Math Editor 26 | 27 | TyX uses MathLive to make math formula editing easy by _seeing_ the formula you're editing! 28 | 29 |  30 | 31 | > [!NOTE] 32 | > This is currently LaTeX-based. We are working on a Typst-based editor! 33 | 34 | ### Keyboard Shortcuts 35 | 36 | TyX supports customizable keyboard shortcuts! 37 | 38 |  39 | 40 | ### Function Calls 41 | 42 | TyX supports an easy-to-use wrapper for Typst function calls, including types, labels and documentation for parameters! 43 | 44 |  45 | 46 | > [!TIP] 47 | > This is how the footnote node is currently implemented! 48 | 49 | More definitions can be added to [the functions file](src/functions.ts). 50 | 51 | ### Keyboard Map 52 | 53 | TyX supports keyboard maps (currently only a Hebrew keyboard map has been added [in the Keyboard Map Plugin](src/components/plugins/KeyboardMapPlugin.tsx)). 54 | This enables you to write in your language without having to switch to English every time you edit math environments! 55 | 56 |  57 | 58 | ### Typst Importing 59 | 60 | Thanks to [contributions by Myriad-Dreamin](https://github.com/tyx-editor/TyX/commits?author=Myriad-Dreamin) you can open `.typ` files into TyX! 61 | 62 | > [!NOTE] 63 | > This, as well, is still a work in progress. 64 | > Many Typst features are currently not imported correctly. 65 | 66 | ### Translations 67 | 68 | TyX currently has translations for Hebrew! Further translations can be added via GitHub PRs 69 | by adding a file to [the translations directory](src/translations) and adding it to [the translations file](src/translations/index.ts). 70 | 71 | ## Acknowledgements 72 | 73 | TyX would not be possible without the following open-source libraries: 74 | 75 | - [typst](https://github.com/typst/typst/) (Apache-2.0 License) 76 | - [typst.ts](https://github.com/Myriad-Dreamin/typst.ts/) (Apache-2.0 License) 77 | - [tyx2typst](https://github.com/qwinsi/tex2typst/) (Apache-2.0 License) 78 | - [tinymist](https://github.com/Myriad-Dreamin/tinymist/) (Apache-2.0 License) 79 | - [mathlive](https://github.com/arnog/mathlive/) (MIT License) 80 | - [lexical](https://github.com/facebook/lexical/) (MIT License) 81 | - [tauri](https://github.com/tauri-apps/tauri/) (Apache-2.0/MIT License) 82 | - [mantine](https://github.com/mantinedev/mantine/) (MIT License) 83 | - [tabler](https://github.com/tabler/tabler-icons/) (MIT License) 84 | - [vite](https://github.com/vitejs/vite/) (MIT License) 85 | -------------------------------------------------------------------------------- /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | name: "publish" 2 | 3 | on: 4 | push: 5 | branches: 6 | - release 7 | 8 | jobs: 9 | publish-tauri: 10 | permissions: 11 | contents: write 12 | strategy: 13 | fail-fast: false 14 | matrix: 15 | include: 16 | - platform: "macos-latest" 17 | args: "--target aarch64-apple-darwin" 18 | - platform: "macos-latest" 19 | args: "--target x86_64-apple-darwin" 20 | - platform: "ubuntu-22.04" 21 | args: "" 22 | - platform: "windows-latest" 23 | args: "" 24 | 25 | runs-on: ${{ matrix.platform }} 26 | steps: 27 | - uses: actions/checkout@v4 28 | 29 | - name: setup node 30 | uses: actions/setup-node@v4 31 | with: 32 | node-version: lts/* 33 | 34 | - name: install Rust stable 35 | uses: dtolnay/rust-toolchain@stable 36 | with: 37 | # Those targets are only used on macos runners so it's in an `if` to slightly speed up windows and linux builds. 38 | targets: ${{ matrix.platform == 'macos-latest' && 'aarch64-apple-darwin,x86_64-apple-darwin' || '' }} 39 | 40 | - name: install go 41 | uses: actions/setup-go@v5 42 | with: 43 | go-version: "stable" 44 | 45 | - name: install bun 46 | uses: oven-sh/setup-bun@v2 47 | with: 48 | bun-version: latest 49 | 50 | - name: install relic for code signing (windows only) 51 | if: matrix.platform == 'windows-latest' 52 | run: go install github.com/sassoftware/relic/v8@latest 53 | 54 | - name: install dependencies (ubuntu only) 55 | if: matrix.platform == 'ubuntu-22.04' 56 | run: | 57 | sudo apt-get update 58 | sudo apt-get install -y libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf 59 | 60 | - name: install frontend dependencies 61 | run: bun install 62 | 63 | - name: Override linuxdeploy version (potential AppImage fix) 64 | if: matrix.platform == 'ubuntu-22.04' 65 | run: | 66 | # Pin linuxdeploy version to prevent @tauri-apps/cli-linux-x64-gnu from pulling in an outdated version 67 | TAURI_TOOLKIT_PATH="${XDG_CACHE_HOME:-$HOME/.cache}/tauri" 68 | mkdir -p "$TAURI_TOOLKIT_PATH" 69 | wget https://github.com/linuxdeploy/linuxdeploy/releases/download/1-alpha-20250213-2/linuxdeploy-x86_64.AppImage -O "$TAURI_TOOLKIT_PATH/linuxdeploy-x86_64.AppImage" 70 | chmod +x "$TAURI_TOOLKIT_PATH/linuxdeploy-x86_64.AppImage" 71 | 72 | - name: Get current changelog 73 | id: changelog 74 | run: echo "changelog<This document appears to be corrupted!
91 |
92 | {error.message}
93 |
94 | {/* Invisible stub editor for TyX's commands. */}
95 |
65 | } />
68 | }
69 | ErrorBoundary={LexicalErrorBoundary}
70 | />
71 |
72 |
54 |
56 |
74 | v{version}
75 |
88 |
96 |
98 | {t("createdWith")}:
99 | {CREATED_WITH_LINKS.map(({ label, href }, index) => (
100 |
101 | {label}
102 |
103 | ))}
104 |
105 | {!isWeb &&
108 |
111 |
112 | )
113 | }
114 |
115 | export default WelcomeScreen
116 |
--------------------------------------------------------------------------------
/src/components/plugins/TypstCodePlugin.tsx:
--------------------------------------------------------------------------------
1 | import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin"
2 | import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
3 | import { ContentEditable } from "@lexical/react/LexicalContentEditable"
4 | import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary"
5 | import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer"
6 | import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin"
7 | import { PlainTextPlugin } from "@lexical/react/LexicalPlainTextPlugin"
8 | import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection"
9 | import { mergeRegister } from "@lexical/utils"
10 | import {
11 | $createNodeSelection,
12 | $getNodeByKey,
13 | $getRoot,
14 | $getSelection,
15 | $insertNodes,
16 | $setSelection,
17 | COMMAND_PRIORITY_EDITOR,
18 | COMMAND_PRIORITY_HIGH,
19 | KEY_DOWN_COMMAND,
20 | KEY_ENTER_COMMAND,
21 | LexicalEditor,
22 | NodeKey,
23 | } from "lexical"
24 | import { useEffect } from "react"
25 | import {
26 | $createTypstCodeNode,
27 | $isTypstCodeNode,
28 | INSERT_TYPST_CODE_COMMAND,
29 | } from "./typstCode"
30 | import { UPDATE_LOCAL_STORAGE_COMMAND } from "./updateLocalStorage"
31 |
32 | export const TypstCodeEditor = ({
33 | text,
34 | nodeKey,
35 | }: {
36 | text: LexicalEditor
37 | nodeKey: NodeKey
38 | }) => {
39 | const [editor] = useLexicalComposerContext()
40 | const [isSelected] = useLexicalNodeSelection(nodeKey)
41 |
42 | useEffect(() => {
43 | return mergeRegister(
44 | editor.registerCommand(
45 | KEY_ENTER_COMMAND,
46 | (e) => {
47 | const node = $getNodeByKey(nodeKey)
48 | const textSelection = text.read(() => $getSelection())
49 | if ($getSelection() === null && textSelection !== null && node) {
50 | $setSelection(node.selectEnd())
51 | e?.preventDefault()
52 | return true
53 | }
54 | return false
55 | },
56 | COMMAND_PRIORITY_EDITOR,
57 | ),
58 | editor.registerCommand(
59 | KEY_DOWN_COMMAND,
60 | (e) => {
61 | const node = $getNodeByKey(nodeKey)
62 |
63 | if (
64 | e.key === "Backspace" &&
65 | $isTypstCodeNode(node) &&
66 | text.read(() => $getRoot().getTextContentSize()) === 0
67 | ) {
68 | node.remove(true)
69 | e.preventDefault()
70 | return true
71 | }
72 |
73 | return false
74 | },
75 | COMMAND_PRIORITY_HIGH,
76 | ),
77 | )
78 | }, [editor])
79 |
80 | useEffect(() => {
81 | if (isSelected) {
82 | editor.read(() => {
83 | const selection = $getSelection()
84 | if (selection?.getNodes().length === 1) {
85 | text.focus()
86 | }
87 | })
88 | }
89 | }, [isSelected])
90 |
91 | return (
92 |