wysimark-lite 0.9.1 → 0.9.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +69 -159
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,189 +1,99 @@
|
|
|
1
|
-
# Wysimark
|
|
1
|
+
# Wysimark-lite
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A modern and clean rich text editor for React, supporting CommonMark and GFM Markdown spec.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
wysimark ( https://github.com/portive/wysimark ) is a modern and clean rich text editor for React, supporting CommonMark and GFM Markdown spec. It is a fork of wysimark with some modifications to make it more lightweight and easier to use.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Thanks to the original author of wysimark, portive m(_ _)m
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
## Usage
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
### As React Component
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
```tsx
|
|
14
|
+
import { Editable, useEditor } from "wysimark-lite";
|
|
15
|
+
import React from "react";
|
|
14
16
|
|
|
15
|
-
|
|
17
|
+
const Editor: React.FC = () => {
|
|
18
|
+
const [value, setValue] = React.useState("");
|
|
19
|
+
const editor = useEditor({});
|
|
16
20
|
|
|
17
|
-
|
|
21
|
+
return (
|
|
22
|
+
<div style={{ width: "800px" }}>
|
|
23
|
+
<Editable editor={editor} value={value} onChange={setValue} />
|
|
24
|
+
</div>
|
|
25
|
+
);
|
|
26
|
+
};
|
|
27
|
+
```
|
|
18
28
|
|
|
19
|
-
|
|
29
|
+
With initial value:
|
|
20
30
|
|
|
21
|
-
|
|
31
|
+
```tsx
|
|
32
|
+
const Editor: React.FC = () => {
|
|
33
|
+
const [value, setValue] = React.useState(`# Welcome to Wysimark
|
|
22
34
|
|
|
23
|
-
|
|
35
|
+
This is a **rich text editor** with _markdown_ support.`);
|
|
36
|
+
const editor = useEditor({});
|
|
24
37
|
|
|
25
|
-
|
|
38
|
+
return <Editable editor={editor} value={value} onChange={setValue} />;
|
|
39
|
+
};
|
|
40
|
+
```
|
|
26
41
|
|
|
27
|
-
|
|
28
|
-
- **Markdown Shortcuts**: Supports familiar Markdown shortcuts for user's familiar with them. e.g., `**` for **bold**, `#` for a heading.
|
|
29
|
-
- **Keyboard Shortcuts**: Supports familiar keyboard shortcuts from word processors. e.g., `CTRL+B` (Windows, Nix) or `CMD+B` (Mac) for **bold**, `CTRL+SHIFT+1` (Windows, Nix) or `CMD+OPT+1` (Mac) for a heading.
|
|
42
|
+
### Direct Initialization
|
|
30
43
|
|
|
31
|
-
|
|
44
|
+
You can also initialize the editor directly on an HTML element:
|
|
32
45
|
|
|
33
|
-
|
|
34
|
-
|
|
46
|
+
```html
|
|
47
|
+
<div id="editor"></div>
|
|
48
|
+
<script type="module">
|
|
49
|
+
import { createWysimark } from "wysimark-lite";
|
|
35
50
|
|
|
36
|
-
|
|
51
|
+
const editor = createWysimark(document.getElementById("editor"), {
|
|
52
|
+
initialMarkdown: "# Hello Wysimark\n\nStart typing here...",
|
|
53
|
+
onChange: (markdown) => {
|
|
54
|
+
console.log("Markdown changed:", markdown);
|
|
55
|
+
},
|
|
56
|
+
});
|
|
57
|
+
</script>
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## Features
|
|
61
|
+
|
|
62
|
+
- **Complete Markdown Support**: Full support for CommonMark and GFM Markdown spec
|
|
63
|
+
- **Modern Design**: Clean and contemporary interface that integrates seamlessly with React applications
|
|
64
|
+
- **User-Friendly Interface**:
|
|
65
|
+
- Simplified toolbar with toggle buttons (click to activate/deactivate formatting)
|
|
66
|
+
- Markdown shortcuts (e.g., `**` for **bold**, `#` for heading)
|
|
67
|
+
- Keyboard shortcuts (e.g., `Ctrl/Cmd + B` for bold)
|
|
68
|
+
- Japanese localized UI (toolbar and menu items in Japanese)
|
|
69
|
+
- **Enhanced List Support**:
|
|
70
|
+
- Nested lists support (create hierarchical lists with multiple levels)
|
|
71
|
+
- Mix different list types in the hierarchy
|
|
72
|
+
|
|
73
|
+
## Supported Features
|
|
37
74
|
|
|
38
75
|
- Tables
|
|
39
|
-
- Ordered and
|
|
76
|
+
- Ordered and Unordered Lists with nesting support
|
|
40
77
|
- Task lists
|
|
41
|
-
-
|
|
42
|
-
- File Attachments
|
|
43
|
-
- Heading and paragraph blocks
|
|
78
|
+
- Headings and paragraphs
|
|
44
79
|
- Code blocks with syntax highlighting
|
|
45
80
|
- Inline code
|
|
46
81
|
- Links
|
|
47
|
-
- Text styling
|
|
48
|
-
|
|
49
|
-
## Usability
|
|
50
|
-
|
|
51
|
-
### Button Tooltips with hints and shortcuts
|
|
52
|
-
|
|
53
|
-
Hovering over the toolbar displays helpful tooltips and keyboard shortcuts. Window, Linux and Mac each get their own OS specific shortcuts following the conventions of each operating system.
|
|
54
|
-
|
|
55
|
-
<img src="https://raw.githubusercontent.com/portive/wysimark-assets/main/readme/toolbar-button-tooltips@2x.png" width="540">
|
|
56
|
-
|
|
57
|
-
### Sticky Dropdown Menus with Hints and shortcuts
|
|
58
|
-
|
|
59
|
-
Menus stay closed until they are clicked open and then they stay open as you hover over other menu buttons. This makes discoverability in menus fast, easy and it works like your operating system. Drop down menus show icons, hints and device operating system dependant shortcuts.
|
|
60
|
-
|
|
61
|
-
<img src="https://raw.githubusercontent.com/portive/wysimark-assets/main/readme/toolbar-menu@2x.png" width="541">
|
|
62
|
-
|
|
63
|
-
### Quick Pick Table Builder
|
|
64
|
-
|
|
65
|
-
Use the flyout to quickly select how many rows and columns in your table.
|
|
66
|
-
|
|
67
|
-
<img src="https://raw.githubusercontent.com/portive/wysimark-assets/main/readme/toolbar-table-menu@2x.png" width="541">
|
|
68
|
-
|
|
69
|
-
### Quick Pick Emoji Picker
|
|
70
|
-
|
|
71
|
-
Integrates the `emoji-mart` Emoji Picker.
|
|
72
|
-
|
|
73
|
-
<img src="https://raw.githubusercontent.com/portive/wysimark-assets/main/readme/toolbar-emoji-dialog@2x.png" width="559">
|
|
74
|
-
|
|
75
|
-
## Image and Attachment Uploading
|
|
76
|
-
|
|
77
|
-
Wysimark supports image and file uploading using Portive, a service created by the creator of Wysimark to an Amazon AWS S3 Bucket. Wysimark supports three intuitive ways to upload images to Wysimark.
|
|
78
|
-
|
|
79
|
-
### Upload from Toolbar
|
|
80
|
-
|
|
81
|
-
Click the image or attachment icon in the toolbar then select an image from your computer to upload it.
|
|
82
|
-
|
|
83
|
-
<img src="https://raw.githubusercontent.com/portive/wysimark-assets/main/readme/image-select-dialog@2x.png" width="577">
|
|
84
|
-
|
|
85
|
-
### Drag and Drop Images and Files
|
|
86
|
-
|
|
87
|
-
Drag and drop files from Windows Explorer the Mac Finder or your operating system's equivalent directly into editor to start uploading.
|
|
88
|
-
|
|
89
|
-
<img src="https://raw.githubusercontent.com/portive/wysimark-assets/main/readme/image-drag-and-drop@2x.png" width="545">
|
|
90
|
-
|
|
91
|
-
### Paste Images and Files
|
|
92
|
-
|
|
93
|
-
Copy and paste images from anywhere in your operating system directly into the editor to start uploading.
|
|
94
|
-
|
|
95
|
-
## Easy Image Resizing
|
|
96
|
-
|
|
97
|
-
### Drag to Resize
|
|
98
|
-
|
|
99
|
-
Grab a resize handle on the image and drag to resize.
|
|
100
|
-
|
|
101
|
-
<img src="https://raw.githubusercontent.com/portive/wysimark-assets/main/readme/image-resize-drag@2x.jpg" width="545">
|
|
102
|
-
|
|
103
|
-
The current width and height of the image are shown as you drag.
|
|
104
|
-
|
|
105
|
-
An image, resized and optimized in the cloud, will be delivered to the user based on the final width and height.
|
|
106
|
-
|
|
107
|
-
### Preset: Resize to Fixed Width
|
|
108
|
-
|
|
109
|
-
You can provide a set of preset shortcuts to your users with fixed bounds that users can click.
|
|
110
|
-
|
|
111
|
-
In this example, we provide S, M and L sizes and M is set to have bounds of 320x320. Based on this image, the preset value shows 320x213.
|
|
82
|
+
- Text styling (bold, italic, inline code)
|
|
83
|
+
- Block quotes
|
|
112
84
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
### Preset: Resize to Fraction
|
|
116
|
-
|
|
117
|
-
You can also provide a set of preset shortcuts to your users with fractional sizes that users can click. This is useful, for example, if a user takes a screenshot in a high DPI device (e.g. 2x) and the use wants to resize it to exactly half the uploaded size so as to maintain a 1 to 1 size in the editor.
|
|
118
|
-
|
|
119
|
-
<img src="https://raw.githubusercontent.com/portive/wysimark-assets/main/readme/image-resize-fraction@2x.jpg" width="545">
|
|
120
|
-
|
|
121
|
-
## Checklists
|
|
122
|
-
|
|
123
|
-
Supports nested checklists. Supports toggling of checklists by clicking on them.
|
|
124
|
-
|
|
125
|
-
<img src="https://raw.githubusercontent.com/portive/wysimark-assets/main/readme/checklist-nested@2x.png" width="545">
|
|
126
|
-
|
|
127
|
-
## Lists: Mix Numbered, Bullet and Checklists
|
|
128
|
-
|
|
129
|
-
Supports mixing of numbered, bullet and checklists.
|
|
130
|
-
|
|
131
|
-
<img src="https://raw.githubusercontent.com/portive/wysimark-assets/main/readme/list-mixed@2x.png" width="545">
|
|
132
|
-
|
|
133
|
-
## Nested Block Quotes
|
|
134
|
-
|
|
135
|
-
Supports nesting of block quotes through the toolbar menu. Selected block quote indent and outdent content. Fully supports all content type in block quotes like lists, tables and images.
|
|
136
|
-
|
|
137
|
-
<img src="https://raw.githubusercontent.com/portive/wysimark-assets/main/readme/blockquote-nested@2x.png" width="545">
|
|
138
|
-
|
|
139
|
-
## Links
|
|
140
|
-
|
|
141
|
-
### Viewing Link Details
|
|
142
|
-
|
|
143
|
-
Click a link in the editor to see its details, like the website domain, link path, and tooltip. Want to change or delete the link? Use the icons at the top of the dialog.
|
|
144
|
-
|
|
145
|
-
<img src="https://raw.githubusercontent.com/portive/wysimark-assets/main/readme/link-view-detail-dialog@2x.png" width="545">
|
|
146
|
-
|
|
147
|
-
### Editing Link Details
|
|
148
|
-
|
|
149
|
-
When Viewing Link Details click the "Edit Link" icon to edit the link. You can easily edit the URL and tooltip text for any link.
|
|
150
|
-
|
|
151
|
-
<img src="https://raw.githubusercontent.com/portive/wysimark-assets/main/readme/link-edit-dialog@2x.png" width="545">
|
|
152
|
-
|
|
153
|
-
## Responsive Toolbar Layouts
|
|
154
|
-
|
|
155
|
-
The Wysimark Toolbar dynamically adjusts the layout of its buttons depending on the width of the available space. Works with full screen editing all the way down to narrow devices in portrait mode or thinner web forms.
|
|
156
|
-
|
|
157
|
-
### Wide Toolbar
|
|
158
|
-
|
|
159
|
-
<img src="https://raw.githubusercontent.com/portive/wysimark-assets/main/readme/editor-wide-width@2x.jpg" width="540">
|
|
160
|
-
|
|
161
|
-
### Medium Toolbar
|
|
162
|
-
|
|
163
|
-
Insert for table, images attachments and emoji are merged into one button.
|
|
164
|
-
|
|
165
|
-
<img src="https://raw.githubusercontent.com/portive/wysimark-assets/main/readme/editor-medium-width@2x.jpg" width="559">
|
|
166
|
-
|
|
167
|
-
### Narrow Toolbar
|
|
168
|
-
|
|
169
|
-
The **bold** and _italic_ styles are merged into the styles button.
|
|
170
|
-
|
|
171
|
-
<img src="https://raw.githubusercontent.com/portive/wysimark-assets/main/readme/editor-narrow-width@2x.jpg" width="360">
|
|
172
|
-
|
|
173
|
-
## Code Blocks with Syntax Highlighting
|
|
174
|
-
|
|
175
|
-
Built-in support for syntax highlighting in code blocks.
|
|
176
|
-
|
|
177
|
-
<img src="https://raw.githubusercontent.com/portive/wysimark-assets/main/readme/syntax-highlighting@2x.png" width="544">
|
|
178
|
-
|
|
179
|
-
## Works in all Modern Browsers
|
|
85
|
+
## Browser Support
|
|
180
86
|
|
|
181
87
|
- Google Chrome
|
|
182
88
|
- Apple Safari
|
|
183
89
|
- Microsoft Edge
|
|
184
90
|
- Firefox
|
|
185
91
|
|
|
186
|
-
##
|
|
92
|
+
## Requirements
|
|
93
|
+
|
|
94
|
+
- React >= 17.x
|
|
95
|
+
- React DOM >= 17.x
|
|
96
|
+
|
|
97
|
+
## License
|
|
187
98
|
|
|
188
|
-
|
|
189
|
-
- Mobile/Tablet: iOS and Android
|
|
99
|
+
MIT
|