网页版Markdown编辑器-LetsMarkdown(前端为javascipt程序，后端为rust)

LetsMarkdown是一款开源的轻量级网页版 Markdown 编辑器，支持实时协作编辑、语法高亮、自动补全、主题设置等功能。基于Typescript编写，遵守MIT开源协议。

功能特色：

    实时合作编辑与预览
    类VSCode编辑器，支持语法高亮，自动补全
    无需登录，绿色安装
    后台使用了高效的Rust和WebAssembly
    黑暗模式
    Emoji 表情支持(可快捷输入）

源码：https://github.com/Cveinnt/LetsMarkdown.com

官网：https://letsmarkdown.com/

-------------------------------------------------------------------

Features

• Live collaborative markdown editing and preview
• VSCode-like editor with support for command palette (syntax highlighting, autocomplete, editor themes...)
• Minimal setup with no login required - say goodbye to malicious trackers and privacy invasions
• Efficient backend built with Rust and WebAssembly
• Dark mode (duh)
• Emoji support with shortcuts enabled
• (Upcoming) cursors tracking, synced scrolling, subscript/footnote/insert support, and more

Tech Stack

• Frontend: React.js (TypeSript), Vite.js, Chakra UI
  • Editor & markdown preview: Monaco, mardown-it.js, highlight.js
• Backend: Rust, WebAssembly
• CI/CD: Github Action
• Formatting: Prettier, Rustfmt
• Design & prototyping: Figma

Development Info

This application is built using a backend operational transformation control server written in Rust (based on Rustpad), and a frontend written in TypeScript using React.js.

The backend server supports real-time collaborative editing sessions, and the frontend offers a collaborative text editor with built-in markdown syntax highlighting and auto-completion. These parts of the application are connected via WebSocket communication.

For markdown previewing, I used the markdown-it.js library to dynamically render the markdown file. To style the markdown file, I also created a custom markdown.css stylesheet.

To develop this application locally, you need to:

First, install Rust, wasm-pack, and Node.js. Verify your installation with:

rustup -V && wasm-pack -V && npm -v

Then, build the WebAssembly part of the app:

wasm-pack build --target web letsmarkdown-wasm

After that, install the dependencies for the React application:

npm install

Next, you can compile and run the backend web server:

cargo run

While the backend is running, open another shell and run the following command to start the frontend dev server.

npm run dev

This command will open a browser window to http://localhost:3000, with hot reloading enabled on saved changes.

Credits

LetsMarkdown.com is inspired by composing.studio, which is based on Rustpad.

from https://github.com/Cveinnt/LetsMarkdown.com

----------------------------------------------------------------------

Efficient and minimal collaborative code editor, self-hosted, no database required

rustpad.io 

Rustpad is an efficient and minimal open-source collaborative text editor based on the operational transformation algorithm. It lets users collaborate in real time while writing code in their browser. Rustpad is completely self-hosted and fits in a tiny Docker image, no database required.

rustpad.io

The server is written in Rust using the warp web server framework and the operational-transform library. We use wasm-bindgen to compile text operation logic to WebAssembly code, which runs in the browser. The frontend is written in TypeScript using React and interfaces with Monaco, the text editor that powers VS Code.

Architecturally, client-side code communicates via WebSocket with a central server that stores in-memory data structures. This makes the editor very fast, allows us to avoid provisioning a database, and makes testing much easier. The tradeoff is that documents are transient and lost between server restarts, or after 24 hours of inactivity.

Development setup

To run this application, you need to install Rust, wasm-pack, and Node.js. Then, build the WebAssembly portion of the app:

wasm-pack build --target web rustpad-wasm

When that is complete, you can install dependencies for the frontend React application:

npm install

Next, compile and run the backend web server:

cargo run

While the backend is running, open another shell and run the following command to start the frontend server.

npm run dev

This command will open a browser window to http://localhost:3000, with hot reloading on changes.

Testing

To run integration tests for the server, use the standard cargo test command. For the WebAssembly component, you can run tests in a headless browser with

wasm-pack test --chrome --headless rustpad-wasm

Configuration

Although the default behavior of Rustpad is to store documents solely in memory and collect garbage after 24 hours of inactivity, this can be configured by setting the appropriate variables. The application server looks for the following environment variables on startup:

• EXPIRY_DAYS: An integer corresponding to the number of days that inactive documents are kept in memory before being garbage collected by the server (default 1 day).
• SQLITE_URI: A SQLite connection string used for persistence. If provided, Rustpad will snapshot document contents to a local file, which enables them to be retained between server restarts and after their in-memory data structures expire. (When deploying a Docker container, this should point to the path of a mounted volume.)
• PORT: Which local port to listen for HTTP connections on (defaults to 3030).
• RUST_LOG: Directives that control application logging, see the env_logger docs for more information.

In the media

• July 11, 2021: Featured in Console 61 - The open-source newsletter.
• June 5, 2021: Front-page Hacker News post. Reddit discussions in r/rust and r/programming.

from https://github.com/ekzhang/rustpad