@opengis/richtext 0.0.7 → 0.0.9
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 +170 -5
- package/dist/richtext.css +1 -1
- package/dist/richtext.js +17842 -19321
- package/dist/richtext.umd.cjs +157 -175
- package/package.json +19 -39
package/README.md
CHANGED
|
@@ -1,5 +1,170 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
# @opengis/richtext
|
|
2
|
+
|
|
3
|
+
<!-- [](https://www.npmjs.com/package/@opengis/richtext) -->
|
|
4
|
+
|
|
5
|
+
A powerful and extensible rich text editor component for Vue 3.
|
|
6
|
+
Built with TipTap editor, featuring comprehensive formatting tools, table support, and markdown integration.
|
|
7
|
+
|
|
8
|
+
## Features
|
|
9
|
+
|
|
10
|
+
- **Rich Text Formatting**: Bold, italic, underline, strikethrough, superscript, subscript
|
|
11
|
+
- **History Management**: Combined undo/redo functionality with keyboard shortcuts
|
|
12
|
+
- **Help System**: Markdown shortcuts reference popover
|
|
13
|
+
- **Text Alignment**: Left, center, right, justify alignment options
|
|
14
|
+
- **Lists**: Bullet lists and ordered lists with full nesting support
|
|
15
|
+
- **Tables**: Full table support with resizable columns and sticky headers
|
|
16
|
+
- **Links**: Automatic link detection and manual link insertion
|
|
17
|
+
- **Code Support**: Inline code and code blocks with syntax highlighting
|
|
18
|
+
- **Color Support**: Text color and background color picker
|
|
19
|
+
- **Blockquotes**: Styled blockquotes with custom formatting
|
|
20
|
+
- **Images**: Image insertion and management
|
|
21
|
+
- **Markdown Integration**: Built-in markdown to HTML conversion and vice versa
|
|
22
|
+
- **Customizable Toolbar**: Configurable toolbar with selective feature inclusion
|
|
23
|
+
- **Internationalization**: Built-in i18n support (English/Ukrainian)
|
|
24
|
+
- **Responsive Design**: Mobile-friendly and fully responsive
|
|
25
|
+
- **TypeScript Support**: Written in TypeScript with full type definitions
|
|
26
|
+
- **Vue 3 Composition API**: Modern Vue 3 with `<script setup>` syntax
|
|
27
|
+
|
|
28
|
+
## Documentation
|
|
29
|
+
|
|
30
|
+
### Local Development
|
|
31
|
+
To run the documentation locally:
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
cd docs
|
|
35
|
+
npm install
|
|
36
|
+
npm run docs:dev
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
The documentation will be available at `http://localhost:5173/`
|
|
40
|
+
|
|
41
|
+
### Online Documentation
|
|
42
|
+
Complete documentation and examples available at [https://richtext.opengis.info](https://richtext.opengis.info)
|
|
43
|
+
|
|
44
|
+
- [Component documentation](https://richtext.opengis.info/guide/)
|
|
45
|
+
- [API Reference](https://richtext.opengis.info/api/)
|
|
46
|
+
- [Examples](https://richtext.opengis.info/examples/)
|
|
47
|
+
|
|
48
|
+
## Changelog
|
|
49
|
+
|
|
50
|
+
Full change log available at [https://richtext.opengis.info/changelog/](https://richtext.opengis.info/changelog/)
|
|
51
|
+
|
|
52
|
+
Local changelog: [docs/changelog/](docs/changelog/)
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
## Install & Usage
|
|
56
|
+
|
|
57
|
+
### Install
|
|
58
|
+
|
|
59
|
+
```bash
|
|
60
|
+
npm i @opengis/richtext
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### Usage
|
|
64
|
+
|
|
65
|
+
#### Complete Editor Example
|
|
66
|
+
```vue
|
|
67
|
+
<template>
|
|
68
|
+
<VsRichText
|
|
69
|
+
v-model="content"
|
|
70
|
+
:height="'400px'"
|
|
71
|
+
:toolbar="toolbarOptions"
|
|
72
|
+
@update:modelValue="handleContentChange"
|
|
73
|
+
/>
|
|
74
|
+
</template>
|
|
75
|
+
|
|
76
|
+
<script setup lang="ts">
|
|
77
|
+
import VsRichText from "@opengis/richtext";
|
|
78
|
+
import { ref } from 'vue'
|
|
79
|
+
|
|
80
|
+
const content = ref('<p>Start typing your content here...</p>')
|
|
81
|
+
|
|
82
|
+
const toolbarOptions = [
|
|
83
|
+
'bold',
|
|
84
|
+
'italic',
|
|
85
|
+
'underline',
|
|
86
|
+
'text_align',
|
|
87
|
+
'color',
|
|
88
|
+
'blockquote',
|
|
89
|
+
'bullet_list',
|
|
90
|
+
'ordered_list',
|
|
91
|
+
'codeblock',
|
|
92
|
+
'link',
|
|
93
|
+
'table'
|
|
94
|
+
]
|
|
95
|
+
|
|
96
|
+
const handleContentChange = (newContent: string) => {
|
|
97
|
+
console.log('Content changed:', newContent)
|
|
98
|
+
}
|
|
99
|
+
</script>
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
#### Toolbar Controls
|
|
103
|
+
|
|
104
|
+
- **`bold`** - Жирний текст
|
|
105
|
+
- **`italic`** - Курсив
|
|
106
|
+
- **`underline`** - Підкреслення
|
|
107
|
+
- **`strike`** - Закреслення
|
|
108
|
+
- **`text_align`** - Вирівнювання тексту
|
|
109
|
+
- **`color`** - Колір тексту
|
|
110
|
+
- **`color_picker`** - Розширений вибір кольору
|
|
111
|
+
- **`blockquote`** - Цитати
|
|
112
|
+
- **`bullet_list`** - Маркований список
|
|
113
|
+
- **`ordered_list`** - Нумерований список
|
|
114
|
+
- **`codeblock`** - Блок коду
|
|
115
|
+
- **`text_more`** - Додаткове форматування
|
|
116
|
+
- **`link`** - Посилання
|
|
117
|
+
- **`table`** - Таблиці
|
|
118
|
+
|
|
119
|
+
### Register
|
|
120
|
+
|
|
121
|
+
```ts
|
|
122
|
+
// main.ts
|
|
123
|
+
import VsRichText from '@opengis/richtext';
|
|
124
|
+
app.use(VsRichText);
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
### Style
|
|
128
|
+
|
|
129
|
+
```html
|
|
130
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
---
|
|
134
|
+
|
|
135
|
+
## Props
|
|
136
|
+
|
|
137
|
+
| Prop | Type | Default | Description |
|
|
138
|
+
|------|------|---------|-------------|
|
|
139
|
+
| `modelValue` | String | `""` | The HTML content of the editor |
|
|
140
|
+
| `height` | String | `"300px"` | Height of the editor container |
|
|
141
|
+
| `toolbar` | Array | `[...]` | Array of toolbar controls to display |
|
|
142
|
+
|
|
143
|
+
## Events
|
|
144
|
+
|
|
145
|
+
| Event | Payload | Description |
|
|
146
|
+
|-------|---------|-------------|
|
|
147
|
+
| `update:modelValue` | String | Emitted when content changes |
|
|
148
|
+
|
|
149
|
+
## Styling
|
|
150
|
+
|
|
151
|
+
The component uses Tailwind CSS classes and can be fully customized with CSS variables:
|
|
152
|
+
|
|
153
|
+
```css
|
|
154
|
+
.editor-content {
|
|
155
|
+
/* Customize editor content area */
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.editor-toolbar {
|
|
159
|
+
/* Customize toolbar appearance */
|
|
160
|
+
}
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
## Contributions
|
|
164
|
+
|
|
165
|
+
We welcome contributions!
|
|
166
|
+
Feel free to open issues, suggest features, or submit pull requests.
|
|
167
|
+
|
|
168
|
+
## License
|
|
169
|
+
|
|
170
|
+
MIT
|
package/dist/richtext.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
.ui-dialog__wrapper[data-v-479158fb]{position:relative}.ui-dialog__modal[data-v-479158fb]{margin:10px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);min-height:0;height:fit-content;max-height:80vh;overflow:hidden}.ui-dialog__content[data-v-479158fb]{min-height:0;height:100%;overflow:auto}.ui-dialog__content[data-v-479158fb]::-webkit-scrollbar{width:6px;height:6px;background-color:#f5f5f5}.ui-dialog__content[data-v-479158fb]::-webkit-scrollbar-thumb{border-radius:10px;background-color:#d9d9d9bf}.ui-dialog__content[data-v-479158fb]::-webkit-scrollbar-track{background-color:#f5f5f5}@media (max-width: 650px){.ui-dialog__modal[data-v-479158fb]{top:50%}}.fade-enter-active[data-v-479158fb],.fade-leave-active[data-v-479158fb]{transition:opacity .2s}.fade-enter-from[data-v-479158fb],.fade-leave-to[data-v-479158fb]{opacity:0}.content-enter-active[data-v-479158fb],.content-leave-active[data-v-479158fb]{transition:transform .4s}.content-enter-from[data-v-479158fb],.content-leave-to[data-v-479158fb]{transform:translate(-50%,-50%) scale(.95)}.col-error .vs-form-text input[data-v-749b581f]{border:1px solid red}.vs-form-text[data-v-749b581f]{position:relative}.vs-form-text__input[data-v-749b581f]::placeholder{opacity:.5}.fade-enter-active,.fade-leave-active{transition:opacity .3s}.fade-enter-from,.fade-leave-to{opacity:0}.heading-level-1[data-v-ef7c378e]{font-weight:700;font-size:30px}.heading-level-2[data-v-ef7c378e]{font-weight:700;font-size:26px}.heading-level-3[data-v-ef7c378e]{font-weight:700;font-size:22px}.heading-level-4[data-v-ef7c378e]{font-weight:700;font-size:18px}.heading-level-5[data-v-ef7c378e]{font-weight:500;font-size:16px}.heading-level-6[data-v-ef7c378e]{font-weight:400;font-size:14px}.flex>button[data-v-b5a7cc5a]:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.flex>button[data-v-b5a7cc5a]:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.flex:hover button[data-v-b5a7cc5a]:first-child{border-right-color:transparent}code[data-v-155e282c]{font-family:Courier New,monospace;font-size:11px}.editor-content{min-height:160px;width:100%;overflow:auto;max-height:500px}.editor-content table{width:100%;border-collapse:collapse;text-align:left;margin:20px 0;font-family:Arial,sans-serif;font-size:14px;position:relative}.editor-content thead{position:sticky;top:0;z-index:10}.editor-content th{background-color:#f4f4f4;font-weight:700;position:sticky;top:0;z-index:10}.ProseMirror-focused{outline:none}.editor-toolbar{background-color:#f9fafb}.editor-content{min-height:160px;width:100%;overflow:auto}button{transition:background-color .2s ease;outline:none}button:focus{outline:none}.editor-content ul{margin-left:20px}.editor-content ul>li{list-style:disc}.editor-content ol{list-style-type:decimal;margin-left:20px}.editor-content pre{background-color:#e7e7e7;border-radius:4px;padding:0 4px}.editor-code{background-color:#f1f1f1;border-radius:3px;padding:2px 4px;font-family:Courier New,monospace;font-size:.9em}.editor-codeblock{background-color:#f8f8f8;border:1px solid #e1e1e1;border-radius:4px;padding:12px;margin:8px 0;font-family:Courier New,monospace;overflow-x:auto}.editor-content a{color:#00f;text-decoration:underline}.editor-content table{width:100%;border-collapse:collapse;text-align:left;margin:20px 0;font-family:Arial,sans-serif;font-size:14px}.editor-content th,.editor-content td{border:1px solid #ccc;padding:10px;position:relative}.editor-content th{background-color:#f4f4f4;font-weight:700}.editor-content tr:nth-child(2n){background-color:#f9f9f9}.editor-content tr:nth-child(odd){background-color:#fff}.selectedCell{background:#f0eeed}.column-resize-handle{background-color:#1d4ed8;bottom:-2px;pointer-events:none;position:absolute;right:-2px;top:0;width:4px}.resize-cursor{cursor:ew-resize;cursor:col-resize}.editor-link{color:#00f}.editor-link:hover{text-decoration:underline}blockquote{font-style:italic;quotes:"«" "»";text-indent:16px}blockquote>p{display:inline}blockquote:before{content:open-quote;display:inline;font-size:18px;margin-right:2px}blockquote:after{content:close-quote;font-size:18px;display:inline;margin-left:2px}
|